@charset "UTF-8";
/* CSS Document */
html {
  scroll-behavior: smooth;
}
@media all and (-ms-high-contrast: none){
  main,.footer{
    font-family: "メイリオ", Meiryo, sans-serif;
  }
}
/****************************************************/
/*全体
/****************************************************/
.pc{
	display: none!important;
}
.ctvTab{
/* height: 65px;*/
/* background-color: #eee;*/
}
body{
/* overflow: hidden;*/
}
/*チェックボックス*/
input[type="checkbox"] {
  display : none;
}
/*チェックボックスのラベル*/
label {
  display: block;
}
main,.footer{
font-family: 'Kiwi Maru', serif;
 word-break: break-all;
 font-size: 12px;
}
main h2{
 
 text-align: center;
 color: #1c4e84;
 width: calc(100% - 2em);
/* max-width: calc(480px - 2em);*/
 padding: 1em 1em;
 margin: 2em auto;
 letter-spacing: .25em;
 line-height: 1;
 font-size: 2em;
 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0+5,0.5+50,0+95,0+100 */
background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 5%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 95%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}

.bg{
 width: 100vw;
 height: 100vh;
 position: fixed;
 left: 0;
 top: 0;
 z-index: -1;
 overflow: hidden;
}

.slide-flex{
 display: flex;
 flex-wrap: nowrap;
}

.slide-item:nth-child(1) img{
 width: 100vw;
/* animation: slide-cloud-1 200s -100s linear infinite;*/
}
.slide-item:nth-child(2) img{
 width: 100vw;
/* animation: slide-cloud-2 200s linear infinite;*/
}
@keyframes slide-cloud-1{
 0%{
  transform: translateX(100%) scaleX(1);
 }
 100%{
  transform: translateX(-100%) scaleX(1);
 }
}
@keyframes slide-cloud-2{
 0%{
  transform: translateX(0);
 }
 100%{
  transform: translateX(-200%);
 }
}

.bg-b{
  width: 100vw;
 height: 100vh;
 position: fixed;
 left: 0;
 bottom: 0;
 z-index: -2;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aceb+0,74c7f0+33,74c7f0+33,d4ebec+81,72c6c7+100 */
background: #00aceb; /* Old browsers */
background: -moz-linear-gradient(top,  #00aceb 0%, #74c7f0 33%, #74c7f0 33%, #d4ebec 81%, #72c6c7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #00aceb 0%,#74c7f0 33%,#74c7f0 33%,#d4ebec 81%,#72c6c7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #00aceb 0%,#74c7f0 33%,#74c7f0 33%,#d4ebec 81%,#72c6c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aceb', endColorstr='#72c6c7',GradientType=0 ); /* IE6-9 */
}

#page-top{
 position: fixed;
 z-index: 100;
 bottom: 5px;
 right: 5px;
 width: 50px;
 height: 50px;
 font-size: 20px;
 line-height: 50px;
 text-align: center;
 border-radius: 50%;
 color: #fff;
 box-shadow: 0 0 .5em 0 rgba(0,0,0,.1);
 cursor: pointer;
}

.iflame-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iflame-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/****************************************************/
/*装飾
/****************************************************/
.fs-s{
 font-size: .8em!important;
}
.fs-ss{
 font-size: .5em!important;
}
.fs-l{
  font-size: 1.2em!important;
}
.fs-xl{
 font-size: 1.6em!important;
}
.fw-b{
  font-weight: 500!important;
}
.fw-n{
 font-weight: 300!important;
}
.pink{
 color: #ea4b84!important;
}
.skyblue{
 color: #62cdf0!important;
}
.blue{
 color: #36aaef!important;
}
.shadow-blue{
  text-shadow: .03em .05em 1px #1c4e84;
}
.strong{
 color: #ea4b84!important;
 background-color: rgba(255,255,255,.5)!important;
 margin: 0 .2em .3em;
 padding: 0 .2em;
 display: inline-block;
 border-radius: .2em;
}
.strong-green{
 background-color: #a4bf5c;
 color: #fff;
 margin: 0 .2em .3em;
 padding: 0 .2em;
 text-shadow: 0em .1em .1em rgba(0,0,0,.3);
 display: inline-block;
 border-radius: .2em;
}
.strong-orange{
 background-color: #e28932;
 color: #fff;
 margin: 0 .2em .3em;
 padding: 0 .2em;
 text-shadow: 0em .1em .1em rgba(0,0,0,.3);
 display: inline-block;
 border-radius: .2em;
}
.under-pink{
 text-decoration: underline #ea4b84;
}
.gra-blue{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#62cdf0+0,36aaef+100 */
background: #62cdf0; /* Old browsers */
background: -moz-linear-gradient(left,  #62cdf0 0%, #36aaef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #62cdf0 0%,#36aaef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #62cdf0 0%,#36aaef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62cdf0', endColorstr='#36aaef',GradientType=1 ); /* IE6-9 */
}
.gra-green{
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9dc04c+0,c8d921+100 */
background: rgb(157,192,76); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(157,192,76,1) 0%, rgba(200,217,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(157,192,76,1) 0%,rgba(200,217,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(157,192,76,1) 0%,rgba(200,217,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dc04c', endColorstr='#c8d921',GradientType=1 ); /* IE6-9 */

}
.gra-orange{
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f08300+0,f6ad48+100 */
background: rgb(240,131,0); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(240,131,0,1) 0%, rgba(246,173,72,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(240,131,0,1) 0%,rgba(246,173,72,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(240,131,0,1) 0%,rgba(246,173,72,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f08300', endColorstr='#f6ad48',GradientType=1 ); /* IE6-9 */

}
/****************************************************/
/*title
/****************************************************/
.title{
 text-align: center;
 position: relative;
 margin: calc(25vh - 65px) auto 0;
}
.title img{
 width: 100%;
 max-width: 960px;
 height: 40vh;
 object-fit: contain;
 object-position: center center;
}
.tit-parts{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}
.tit-1{
 filter: drop-shadow(0 0 3px rgba(0,0,99,.3));
 
 animation-name: fade-zoom;
 animation-duration: 2s;
 animation-delay: .3s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}
@keyframes fade-zoom{
 0%{
  opacity: 0;
  transform: scale(.7);
 }
 100%{
  opacity: 1;
 }
}
.tit-2{
 animation-name: fade-in;
 animation-duration: 1s;
 animation-delay: 1s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}
.tit-3{
 animation-name: fade-in;
 animation-duration: 1s;
 animation-delay: 1.3s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}
.tit-4{
 animation-name: fade-in;
 animation-duration: 1.5s;
 animation-delay: 2s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}
@keyframes fade-in{
 0%{
  opacity: 0;
 }
 100%{
  opacity: 1;
 }
}
/****************************************************/
/*oa
/****************************************************/
.oa{
 text-align: center;
 letter-spacing: .2em;
 font-size: 4vw;
 
 animation-name: fade-in;
 animation-duration: 1.5s;
 animation-delay: 2s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}

.oa p:nth-child(1){
 font-size: 1.8em;
 line-height: 1;
  color: #1c4e84;
}
.oa p:nth-child(2){
 display: inline-block;
 margin: 1.5em auto;
 padding: .5em 2em;
 border-radius: 3em;
 background-color: #1c4e84;
 color: #fff;
 font-size: .8em;
}
/****************************************************/
/*logo
/****************************************************/
.logo{
 
}
.logo-flex{
 display: flex;
 flex-wrap: wrap;
 max-width: 480px;
 margin: 0 auto;
}
.logo-item{
 display: block;
 width: calc(100% / 2 - 4em);
 margin: 2em;
}
.logo-item img{
 width: 100%;
 box-shadow: 0 0 .5em 0 rgba(0,0,0,.1);
}
.logo-item img:hover{
 opacity: .8;
}
/****************************************************/
/*cast
/****************************************************/
.cast{
 margin-top: 5vh;
 padding: 1em;
}
.cast-flex{
 display: flex;
 flex-wrap: wrap;
 max-width: 860px;
 margin: 0 auto;
}
.cast-item{
 width: calc(100% / 1 - 4em);
 margin: 0 2em 2em;
}
.cast-pic{
 display: block;
 margin: 2em auto;
 padding: 1em;
 border-radius: 50%;
 border: solid 2px rgba(255,255,255,.5);
}
.cast-pic img{
 width: 100%;
 border-radius: 50%;
 box-shadow: 0 0 .5em 0 rgba(0,0,0,.1);
}

.cast-name{
  background-color: rgba(255,255,255,.5);
 padding: 1em;
 transform: skewX(10deg);
 position: relative;
}
.cast-name:before{
 display: block;
 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 top: 5px;
 left: 3px;
 transform: skewX(-20deg);
 
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#62cdf0+0,36aaef+100 */
background: #62cdf0; /* Old browsers */
background: -moz-linear-gradient(left,  #62cdf0 0%, #36aaef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #62cdf0 0%,#36aaef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #62cdf0 0%,#36aaef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62cdf0', endColorstr='#36aaef',GradientType=1 ); /* IE6-9 */
}

.cast-name p{
  text-align: center;
  color: #fff;
  transform: skewX(-10deg);
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
  position: relative;
  z-index: 1;
}
.cast-name p:nth-child(1){
  font-size: 2em;
}

/****************************************************/
/*about
/****************************************************/
.about{
 margin-top: 5vh;
 padding: 1em;
}
.about p{
 line-height: 2.2;
 color: #1c4e84;
 margin-bottom: 1em;
}
.about p br{
 display: none;
}
.mov-wrap{
 max-width: calc(580px - 2em);
 margin: 0 auto;
 padding: 1em;
 background-color: rgba(255,255,255,.5);
}
/****************************************************/
/*highlight
/****************************************************/
.highlight{
 
}
.comingsoon{
 padding: 0 1em 2em;
 text-align: center;
 color: #ea4b84;
 font-size:2em;
}
.highlight-tit{
 width: calc(100% - 6em);
 margin: 0 auto;
 padding: 1em 2em;
 box-shadow: 0 0 .5em 0 rgba(0,0,0,.1);
 color: #fff;
 text-shadow: 1px 1px 2px rgba(0,0,0,.3);
 transform: translateX(-1em) translateY(1em);
}
.highlight-content{
 width: calc(100% - 4em);
 margin: 0 auto 5em;
 padding: 1em 1em 3em;

 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+95,0+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 95%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 95%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 95%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}


.highlight-txt{
 width: calc(100% - 2em);
 margin: 3em 0;
 line-height: 2;
 color: #1c4e84;
}
.highlight-pic{
 display: block;
 margin: 0 auto;
 width: 100%;
 max-width: 380px;
 box-shadow: .5em .5em 1em 0 rgba(0,0,0,.1) ,-.5em -.5em 0em 0 rgba(255,255,255,.5);
}
.highlight-child{

}
.highlight-child h3{
 padding: 1em 1em;
 margin: 1em auto;
 max-width: calc(600px - 2em); 
 color: #fff;
 box-shadow: .5em .5em 1em 0 rgba(0,0,0,.1);
 text-shadow: 1px 1px 2px rgba(0,0,0,.3);
 text-align: center;
 transform: translateY(1.5em);
}
.highlight-child-innner{
 border: dashed 2px #fff; 
/* padding: 0 0 1em;*/
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
}
.highlight-child-innner .flex{
 display: flex;
 flex-wrap: wrap;
}
.highlight-child-innner .item{
 width: calc(100% / 1 - 2em);
 padding: 1em;
}
.highlight-child-innner .item img{
 width: 100%;
 box-shadow: .5em .5em 1em 0 rgba(0,0,0,.1);
}
.highlight-child-innner .item p{
 color: #1c4e84;
 line-height: 2.5;
 font-size: .9em;
 margin-bottom: 1em;
}
.highlight-child-innner > p{
 width: calc(100% - 2em);
 padding: 1em 1em 0;
 color: #1c4e84;
 line-height: 2.5;
 font-size: .9em;
}
.highlight-child-innner > p:last-child{
 margin-bottom: 2em;
}
.highlight-child-innner .item p br,.highlight-child-innner > p br{
 display: none;
}

/****************************************************/
/*afteroa
/****************************************************/
.afteroa{
 margin-top: 5vh;
 padding: 1em;
}
.afteroa p{
 line-height: 2.2;
 color: #1c4e84;
 margin-bottom: 1em;
 text-align: center;
/* color: #ea4b84;*/
 font-size:1.5em;
}
.afteroa p img{
 width: calc(40vw - 1em);
 max-width: 400px;
 display: inline-block;
 margin: .5em;
 filter: drop-shadow(0 0 1em 0 rgba(0,0,0,.8));
}
.afteroa p img:hover{
 opacity: .8;
}
/****************************************************/
/*banner
/****************************************************/
.banner{
 margin-top: 5vh;
 padding: 1em;
 text-align: center;
}
.banner-tw{
 display: inline-block;
 padding: 1em 3em;
 background-color: #1DA1F2;
 color: #fff;
 font-size: 5vw;
 cursor: pointer;box-shadow: 0 0 0.5em 0 rgb(0 0 0 / 10%);
 transition: .3s;
}
.banner-tw:hover{
 background-color: rgba(255,255,255,.7);
 color: #1DA1F2;
}
/****************************************************/
/*sns
/****************************************************/
.sns-archive{
 background-color: rgba(255,255,255,.3);
/* box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);*/
 margin: 1em!important;
 border-radius: 1em;
}
.snstitle{
 margin-bottom: 1em!important;
}
.snstitle{
 color: #1c4e84;
}
/****************************************************/
/*footer-sub
/****************************************************/
.footer-sub{
}
.link-flex{
 display: flex;
 flex-wrap: wrap;
 max-width: 960px;
 margin: 0 auto;
}
.footer-sub a{
 text-align: center;
 width: calc(100% / 1 - 6em);
 margin: 0 1em 1em;
 padding: .5em 2em;
 font-size: .8em;
 color: #333;
 background-color: rgba(255,255,255,.5);
 border-radius: 2em;
}
.footer-sub a i{
 color: #999;
}
/*【PC】*/
@media screen and (min-width: 960px) {
/****************************************************/
/*全体
/****************************************************/
 .sp{
  display: none!important;
 }
 .pc{
  display: unset!important;
 }
 .under-line{
  text-decoration: underline;
 }
 .ctvTab{
/* height: 158px;*/
}
 
 main{
  font-size: 18px;
 }
 
#page-top{
 bottom: 10px;
 right: 10px;
 width: 80px;
 height: 80px;
 font-size: 40px;
 line-height: 80px;
}
 
 .slide-item:nth-child(1) img{
 animation: slide-cloud-1 200s -100s linear infinite;
}
.slide-item:nth-child(2) img{
 animation: slide-cloud-2 200s linear infinite;
}
/****************************************************/
/*title
/****************************************************/
.title{
 margin: calc(25vh - 158px) auto 0;
}
.title img{
 height: 50vh;
}
/****************************************************/
/*cast
/****************************************************/
 .cast-item{
  width: calc(100% / 2 - 4em);
 }
/****************************************************/
/*oa
/****************************************************/
.oa{
 text-align: center;
 letter-spacing: .2em;
 font-size: 1em;
}
.oa p:nth-child(1){
 font-size: 2.5em;
 line-height: .8;
}
/****************************************************/
/*about
/****************************************************/
.about p{
 text-align: center;
}
.about p br{
 display: unset;
}
/****************************************************/
/*highlight
/****************************************************/
 .highlight-tit{
 width: calc(960px - 4em);
 padding: 1em 2em;
 transform: translateX(-1em) translateY(1em);
  font-size: 1.2em;
}
.highlight-content{
 width: calc(960px - 2em);
 margin: 0 auto 5em;
 padding: 1em 1em 3em;
}
 
 .highlight-txt{
  text-align: center;
}
.highlight-child:nth-child(even) .flex{
 flex-direction: row-reverse;
 margin-top: 1em;
}
.flex.reverse{
 flex-direction: row-reverse!important;
}
 .highlight-child-innner{
 border: dashed 2px #fff; 
 padding: 1em;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
}
.highlight-child-innner .flex{
 display: flex;
 flex-wrap: wrap;
}
.highlight-child-innner .item{
 width: calc(100% / 2 - 2em);
}
.highlight-child-innner .item p{
 line-height: 2;
 font-size: .8em;
}
 .highlight-child-innner > p{
 line-height: 2;
 font-size: .8em;
  text-align: center;
}
.highlight-child-innner .item p br,.highlight-child-innner > p br{
 display: unset;
}
/****************************************************/
/*afteroa
/****************************************************/
.afteroa p{
/* text-align: center;*/
}
/****************************************************/
/*banner
/****************************************************/
.banner-tw{
 font-size: 28px;
}
/****************************************************/
/*footer-sub
/****************************************************/
.footer-sub a{
 width: calc(100% / 3 - 6em);
}

 /****************************************************/
/*footer
/****************************************************/
 .footer{
   display: block!important;
   text-align: center;
/*   background-color: #1c4e84;*/
   padding: 1em 0;
   width: 100%;
  }
  .footer a,.footer p{
   color: #fff;font-weight: bold;
 }
}