@charset "utf-8";
/*-------------カスタムプロパティ------------*/
:root {
--color-logoBlue: #217fc4;
--color-logoRed: #e73357;
--color-blue: #0c174f;
--font-midashi: "fot-chiaro-std", sans-serif;
--font-base: "murecho","yu-gothic-pr6n", sans-serif;
}
.FOT-Chiaro_B{
font-family: "fot-chiaro-std", sans-serif;
font-weight: 700;
font-style: normal;
}
.murecho{
font-family: "murecho", sans-serif;
font-weight: 200;
font-style: normal;
}
.Yu_Gothic_Pr6N{
font-family: "yu-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
}
/*--------------------------------------------------------*/
/*リセット*/
html{margin:0px;padding:0px;border:0px;scroll-behavior: smooth;}
*{box-sizing: border-box;margin:0px;padding:0px;border:0px;}
h1,h2,h3,h4,h5,h6,p,span,table,a,img,dl,dt,dd,ul,li,ol,iframe,nav{
background:transparent;
border:none;
font-size:100%;
font-weight:normal;
margin:0px;
padding:0px;
vertical-align:bottom;
word-break: break-word;
}
ol, ul{list-style:none; list-style-type:none;}
.span{display: inline-block;}
/*.mx_menu_all{margin-bottom:0px !important;min-width: initial !important;min-width: auto !important;}*/
.onlyPc{}
.onlySp{display: none;}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
padding: 0;
white-space: nowrap;
width: 1px;
}
/*--------------------------------------------------------*/
body{
color: #000;
font-weight: 100;
font-style: normal;
line-height:1;
text-align:center;
}
a:link,a:visited,a:hover{color:black; text-decoration:underline;}
a:hover{transition-duration: 0.2s;}
small {
line-height: 1.2em;
font-size: min(2vw, 18px);
display: block;
margin-top: 0.5em;
text-align: center;
}
/*パンくずリスト----------------------------------*/
nav.panlist{
background-color: white;
color: #0c174f;
padding: 4px 0;
width: 100%;
}
nav.panlist strong{
font-weight:normal;
}
nav.panlist ol {
color: #0c174f;
display: flex;
font-size: min(0.7em,2.4vw);
list-style: none;
line-height:1.5;
margin: 0 auto;
padding: 0;
white-space: nowrap;
max-width: 1270px;
width: 98%;
}
nav.panlist li + li::before {
content: ">";
margin: 0 0.5em;
}
nav.panlist ol a{
color: #0c174f;
text-decoration: underline;
}

/*--------------------------------------------------------*/
/*--SNS--*/
#sns_button{
text-align: center;
margin: 2% auto;
}
#sns_button img{
width: 40px !important;
height: 40px !important;
margin: 0.5%;
}
/*--------------------------------------------------------*/
/*#page_all {
line-height: 1.5;
text-align: left;
word-wrap: break-word;
}*/

/*-----------------------------------*/
main#all {
color: #343434;
font-size: min(3.4vw, 1.2em);
line-height: min(6vw, 1.6em);
}

/* 共通 ------------------------------------------- */

.heading {
color: var(--color-blue);
display: flex;
font-family: var(--font-midashi);
margin: 0 auto 0.8em;
}
.heading [lang="ja"] {
font-size: min(2.0em,5.0vw);
}
.heading [lang="en"] {
font-size: min(1.5em, 4.0vw);
margin: 0.2em 0 0 0.4em;
}
.contents {
display: block;
font-family: var(--font-base);
margin: 0 auto;
padding: 5%;
text-align: left;
width: min(90vw, 1100px);
}
#box_stream .contents,
#box_about .contents,
#box_aoppella .contents{
background: white;
box-sizing: border-box;
box-shadow: 0 0 10px #7c97af;
}
.box_cmn {
display: block;
padding: min(10%,120px) min(8%, 120px) 5%;
/*padding: 120px 0 100px;*/
}
.box_cmn img{
height: auto;
width: 100%;
}
.text_red {
color: #e30000;
font-weight: bold;
}
.text_blue {
color: #0248a7;
font-weight: bold;
}

/* #title ---------------------------------- */
#title {
background-color: #9dd2fe;
background-image: url(../img/bg_title.webp),url(../img/bg02.webp);
background-position: top center , bottom center;
background-repeat: no-repeat;
background-size: 100%;
min-height: 700px;
padding: 0 0 5%;
}
#title .inbox{
height: 80vw;
margin: 0 auto;
max-width: 1200px;
width: 90%;
}
#title .titleArea {
background: url(../img/bg_time.webp) no-repeat bottom center / 80%;
margin: 0 auto min(25%, 50vw);
min-height: 640px;
padding: 8% 0 8%;
}
#title h1 {
margin: 0 auto 0;
max-width: min(1100px, 85%);
/* width: 90%;*/
}
#title h1 img{
height: auto;
width: 100%;
}
#title .time {
font-family: var(--font-midashi);
font-size: min(2.2em, 6.0vw);
font-weight: bold;
text-shadow: 2.5px 2.5px 5px white, -2.5px 2.5px 5px white, 2.5px -2.5px 5px white, -2.5px -2.5px 5px white, 2.5px 2.5px 5px white, -2.5px 2.5px 5px white, 2.5px -2.5px 5px white, -2.5px -2.5px 5px white;
margin: min(1.5em, 3vw) auto 0;
}
#title .time .oa_time{
font-size: 125%;
}
#title .time .c_blue{
color: var(--color-logoBlue);
}
#title .time .c_red{
color: var(--color-logoRed);
}
#title .movie {
box-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
margin: 0 auto;
max-width: 1000px;
width: 90%;
}
#title #box_stream{
margin: 0 auto 2%;
/*width: 88%;*/
}
#title #box_stream .detail {
display: flex;
flex-wrap: nowrap;
}
#title #box_stream .detail div{
margin: 0 auto;
width: 49%;
}
#title #box_stream a{
width: 100%;
}
#title #box_stream a img{
height: auto;
width: 100%;
}
#title #box_stream #youtube img{
border: solid 2px #d00;
}
#title #box_stream a:hover{
opacity: 0.6;
}

/* #box_intro ---------------------------------- */
#box_about{
background: url(../img/bg01.webp) top center / 100%;
}
#box_about .contents{
word-break: auto-phrase;
}
#box_about .detail {
display: block;
text-align: center;
padding: min(2em, 3vw) 0 0;
}
#box_about .detail{}
#box_about .detail p {
display: block;
font-weight: bold;
font-size: min(1.2em, 4.0vw);
line-height: 1.5;
margin: 0 auto 0;
}
#box_about .detail p.cast {
text-align: left;
}
#box_about .detail h3 {
color: var(--color-blue);
font-family: var(--font-midashi);
font-size: min(1.5em, 5.0vw);
font-weight: bold;
margin: 3% auto 0;
}
#box_about .detail .img {
display: block;
margin: 0 auto 4%;
}
#box_about .detail .img img{
height: auto;
width: 100%;
}

/* #box_epi ---------------------------------- */
#box_epi{
background: #97cffe url(../img/bg02.webp) no-repeat bottom center / 100% ;
}
#box_epi .contents{
/*width: min(90vw, 1100px);*/
max-width: 1300px;
width: 95%;
}
#box_epi h4 {
align-items: center;
aspect-ratio: 1;
border-radius: 50%;
background: #ffd200;
color: var(--color-blue);
font-family: var(--font-midashi);
display: flex;
justify-content: center;
position: absolute;
top: -1em;
left: -1em;
width: 3em;
}
#box_epi .detail {
margin: 3em auto 0;
max-width: 1400px;
}
#box_epi ol.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(10px, 2vw, 30px);
}
/* 800px以下 */
@media screen and (max-width: 800px) {
    #box_epi ol.card-list {
    grid-template-columns: repeat(2, 1fr);
    }
}

#box_epi ol.card-list li {
background: white;
box-shadow: 4px 4px 0px rgb(123 123 123 / 60%);
font-size: min(0.9em, 2.5vw);
margin: 0 0 1.0em;
padding: 3% 5% 3%;
position: relative;
}
#box_epi .number {
color: #f72ec3;
display: grid;
font-weight: bold;
height: min(10vw, 60px);
place-items: center;
position: absolute;
padding: 14px 0 0 0;
top: -12px;
left: -12px;
width: min(10vw, 60px);
z-index: 1000;
}
#box_epi .date {
font-weight: bold;
line-height: 1.2;
margin: 0 0 0.5em min(2.0em, 4vw);
width: 90%;
}
#box_epi .img {
aspect-ratio: 120 / 66;
overflow: hidden;
}
#box_epi .img img {
box-shadow: 0 0 3px rgb(123 123 123 / 0.2);
height: 100%;
object-fit: cover;
width: 100%;
}
#box_epi .title {
font-weight: 600;
line-height: 1.2;
margin: 3% 0 0;
}

/* #box_aoppella ---------------------------------- */
#box_aoppella{
background: white url(../img/bg03.webp) no-repeat top center / 100% ;
}
#box_aoppella .img{
margin: 0 auto 2em;
}
#box_aoppella .text{
font-weight: bold;
margin: 1.5em 0;
word-break: auto-phrase;
}
#box_aoppella .text a{
background: #d3e8fe;
}
#box_aoppella .text a:hover{
opacity: 0.6;
}
#box_aoppella [lang="en"] {
display: none;
}
#copyright {
color: var(--color-blue);
font-weight: bold;
padding: 2em 0 0;
text-align: center;
}
#copyright p{
display: block;
font-size: min(1.2em, 4.0vw);
}
#copyright a {
display: block;
max-width: 300px;
}
#copyright a img{
height: auto;
width: 100%;
}
.movie iframe {
aspect-ratio: 16 / 9;
height: auto;
width: 100%;
}


/*--フッター--*/
/*google翻訳*/
.skiptranslate.goog-te-gadget,a.goog-logo-link,.goog-logo-link:link{color:#09397a;text-align:center;}
/*-----------------------------------*/
#footer{margin:0 auto;padding:1px 0 10px; padding:1%; line-height:200%;text-align:center;}
#footer #f_PC {
margin-top: 0;
}

/*-- 緊急テキスト ----------------------*/
#rp_textbox .txt_text{
border: rgb(255 255 255 / 50%) solid 0.25em;
border-radius: 0.5em;
background: rgba(255,255,255,0.6);
margin: 20px auto;
padding: 8px;
line-height: 1.6em;
text-align: left;
max-width: 960px;
width: 90%;
}
#rp_textbox .pop_text{
border-radius: 2px;
border: #c9c9c9 solid 1px;
font-size:0.9em;
line-height:1.5em;
margin:0 auto;
padding:20px;
text-align:left;
max-width: 900px;
word-break: break-all;
width:75%;
}
#rp_textbox .pop_text .popup_title{
border-bottom: #999 dotted 1px;
font-size:1.1em;
line-height:1.5em;
font-weight:bold;
margin:0 0 15px 0;
padding-bottom:5px;
text-align:center;
width: 100%;
}
#rp_textbox .eme_img {
display: block;
text-align: center;
width: 100%;
}
#rp_textbox .eme_img img{
height: auto;
margin: 0 auto 10px;
max-width: 100%;
}
#rp_textbox a{
color:#d00;
text-decoration:underline;
}

/*-- ローディング ----------------------*/
#loader{
/*background-color:#f6e349;*/
background: #97cfff url(../img/bg02.webp) no-repeat bottom center / 100%;
position:fixed;width:100%;height:100%;z-index: 2000;
}
/*背景*/
.loader,.loader:before,.loader:after {
/*background: white;*/
background: #479af9;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
height: 4em;
width: 1em;
top: 50%;
}
.loader {
color: white;
/*border-radius: 10px;*/
text-indent: -9999em;
margin: auto;
position: relative;
/*font-size: 20px;*/
-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
-webkit-animation-delay: -0.16s;animation-delay: -0.16s;
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
.loader:before,.loader:after {
background: #479af9;
position: absolute;
top: 0;
content: '';
}
.loader:before {
/*border-radius: 10px;*/
left: -1.5em;
-webkit-animation-delay: -0.32s;animation-delay: -0.32s;
}
.loader:after {
/*border-radius: 10px;*/
left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
	}
	@keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
}
/*--------------------------------------------------------*/

@media screen and (max-width: 1200px) {
	.onlyPc{display: none;}
	.onlySp{display: inline;}
	#all {
	font-size: 0.9em;
	}
	nav#pan_box {
	overflow-x: scroll;
	}
	nav .panlist{
	width: 640px;
	}
	.box_cmn{
	padding: 5% 0;
	}
	.contents{
	margin: 5vw auto;
	}
	.contents::before{
	top: -5vw;
	}
	.contents h2{
	top: -8vw;
	}
	#title .titleArea{
	padding: 4% 0;
	min-height: unset;
	}
	#title h1 {
    max-width: 540px;
    width: 60%;
	}
	#title .time{
	line-height: 1.2;
    min-width: 300px;
	/*width: 70%;*/
	}
	#box_about .detail h3{
	margin: 1em auto 0.2em;
	text-align: left;
	}
	#box_about .detail p{
	text-align: left;
	word-break: auto-phrase;
	}
	#box_epi .detail {
    margin: 2em auto 0;
	}
	#box_story .card-list{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
	}
	#copyright p{
	margin: 0 auto 1em;
	}
}
@media screen and (max-width: 762px) {
	#title #box_stream .detail{
	display: block;
	width: 100%;
	}
	#title #box_stream .detail div{
	margin: 0 auto 0.5em;
	width: 100%;
	}
	#box_epi .contents {
    padding: 0 3%;
	}
	#box_epi ol.card-list{
	/*grid-template-columns: repeat(auto-fill, minmax(130px, 0.5fr));*/
	gap: 1em;
	}
}