html{
    font-size: 62.5%;
}
body{
    font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
    max-width: 1980px;
    margin: 0 auto;
    margin-top: 6.8%;
    box-sizing: border-box;
}
@media screen and (max-width: 900px){
    body{
        max-width: 900px;
        padding-top: 9.4%;
    }
}

img{
   width: 100%;
}

/*header*/
header{
   position: fixed;
   z-index: 1000;
   width: 100%;
    top: 0;
    left: 0;
}

.header_wrapper{
    background-color: #1b56a2;
    display: flex;
    justify-content:center;
    align-items: center;
    column-gap: 41.72%;
    padding: 0.45% 13.84%;
}
.header_logo{
    display: block;　
    width: 20.86%;
}
.header_btn{
}
.h_btn_pc{
    display: block;
}
.openbtn{
    display: none;
}
.header_nav{
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    column-gap: 6.06%;
    padding: 0.5%;
}
.nav_lists{
    font-size: 1.2vw;
	font-weight: bold;
	color: #535353;
}

@media screen and (max-width: 900px) {
    .header_wrapper{
        column-gap: 0;
        display: flex;
        padding: 3.33% 5%; 
}
    .header_logo{
        display: block;
        max-width: 60%;
        margin: 0 auto;
    }
    
    .openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    display: block;
	position: relative;
	cursor: pointer;
    width: 12%;
    z-index: 800;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    height: 3px;
    border-radius: 2px;
	background: #fff;
    width: 100%;
    margin-top: 20%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 30px;
    left: 18px;
    transform: translateY(2.6vw) rotate(-45deg);
    width: 100%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-4.3vw) rotate(45deg);
    width: 100%;
}
    .header_nav{
  
    }
    
  .header_nav{
      position: absolute;
      background-color: #1b56a2;
      right: 0;
      left: 0;
      top: 0;
      width: 100%;
      margin-top: 13%;
          padding-top: 16%;
      transform: translateX(100%);
      transition: ease .4s;
      flex-direction: column;
}
    .nav_lists{
        width: 70%;
        text-align: center;
        font-size: clamp(12px, 5vw, 24px);
        color: #fff;
        border-bottom: 1px solid #fff;
        padding-bottom: 1%;
        margin: 0 auto 9% auto;
        
}
    .header_nav.active{
        transform: translateX(0%);
        transition: ease .4s;
    }
    
}



.fv{
	background-color: #D9E8F8;
	position: relative;
}
.sp{
    display: none;
}
.pc{
    display: block;
    }
.fv_arrow{
    position: absolute;
    max-width: 3.43%;
    margin: 0 auto;
    left: 47.33%;
}
.fv_btn_area{
	background-color: #D9E8F8;
    padding-top: 2.32%;
    padding-bottom: 2.27%;
}
.down{
        animation: down 1s infinite alternate ease-out;;
    }
    @keyframes down {
      from {
          transform: translateY(-150%);
        }
        to {
          transform: translateY(-40%);
        }
      }
.fv_btn{
  max-width: 56.67%;
  margin: 0 auto;
}
@media screen and (max-width: 900px){
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }
    
    
    .down{
        animation: down 1s infinite alternate ease-out;;
    }
    @keyframes down {
      from {
          transform: translateY(-100%);
        }
        to {
          transform: translateY(-10%);
        }
      }
    
    .fv_btn_area{
        background-color: #D9E8F8;
        padding-top:  4.44%;
        padding-bottom:4.44%
    }
    .fv_btn{
      max-width: 67.33%;
      margin: 0 auto;
    }
}

#contents_01{
	

}

#contents_02{
    
    background-color: #1B56A2;
    text-align: center;
    padding-top: 3.33%;
    padding-bottom: 8.08%;
}
.contents_02_title{
    max-width: 68.64%;
    margin: 0 auto -6% auto;
}
.contens_02_movie-area{
    width: 67.88%;
    margin: -5% auto;
}
.contens_02_movie-area p{
    margin-top: -12%;
    color: #fff;
    font-size: clamp(10px, 1.7vw, 24px)
}
.contents_02_text-area{
    width: 67.88%;
    border-radius: 0.5vw;
    background-color: #fff;
    margin: 2.53% auto;
    font-size: clamp(10px, 1.7vw, 24px);
    font-weight: bold;
    color: #105CB0;
    padding: 2% 1.41%;
    line-height: 1.5;
    text-align: left
}
.contents_02_text-area p:nth-child(2){
    margin: 3% 0 3%;
}

@media screen and (max-width: 900px){
    #contents_02{
    padding-top: 3.33%;
}
    .contents_02_title{
    max-width: 83.89%;
    margin: 0 auto 3.33% auto;
}
    .contens_02_movie-area{
    width: 90.11%;
    margin: 0 auto;
}
    .contens_02_movie-area p{
    margin-top: -1%;
}
    .contents_02_text-area{
    width: 90.11%;
    margin: 2.53% auto;
}
}

#contents_04{
    position: relative;
    padding: 6.06% 0 8.18%;
    background-color: #1B56A2;
}
.contents_04_title{
    max-width: 46.21%;
    margin: 0 auto;
}
.comparison-table_area{
    width: 70.71%;
    margin: 2.42% auto 0 auto;
}
@media screen and (max-width: 900px){
    .comparison-table_area{
        width: 90%;
        overflow-x: scroll; 
    }
    .comparison-table{
        width: 750px;
    }
    .scroll_pointer_01{
        position: absolute;
        max-width: 7.22%;
        top: 90%;
        right: 6%
    }
}
@media screen and (max-width: 900px){
    .scroll_pointer_01{
        position: absolute;
        max-width: 7.22%;
        top: 90%;
        right: 6%
    }
}

#contents_05{
    position: relative;
}
.contents_05_btn{
    position: absolute;
    max-width: 56.67%;
    top:80.9%;
    left: 21.67%;
}
@media screen and (max-width: 900px){
    .contents_05_btn{
    position: absolute;
    max-width: 67.33%;
    top:80.9%; 
    left: 16.33%;
}
}


#contents_06{
    position: relative;
    background-color: #1B56A2;
    padding: 6.06% 0 8.08%;
}
.contents_06_title{
    max-width: 52.63%;
    margin: 0 auto;
}
.sns-imag_area{
    max-width: 82.42%;
    margin: 3.54% auto 0 auto;
}
@media screen and (max-width: 900px){
    .sns-imag_area{
        max-width: 90%;    
        overflow-x: scroll;
    }
    .sns-imag{
        width: 750px;
    }
    .scroll_pointer_02{
        position: absolute;
        max-width: 7.22%;
        top: 91%;
        right: 6%
    }
}


#contents_07{
    position: relative;
}
.contents_07_btn{
    position: absolute;
    max-width: 56.67%;
    top:67.99%;
    left: 21.67%;
}
@media screen and (max-width: 900px){
    .contents_07_btn{
    position: absolute;
    max-width: 67.33%;
    top:67.99%;
    left: 16.33%;
}
}


#contents_08{
    background-color: #1B56A2;
    padding: 6.01% 0 5.96% 0;
}
.contents_08_imag{
    max-width: 71.26%;
    margin: 0 auto;
}
@media screen and (max-width: 900px){
    .contents_08_imag{
    max-width: 86.78%;
}
}

#faq{
    background-color: #fff;
}
.faq_wrapper{
    padding-top: 6.06%;
    background-color: #D9E8F8;
}
.faq_title{
    max-width: 22.56%;
    margin: 0 auto;
}
.faq_imag{
    max-width: 90%;
    margin: 4.04% auto 0 auto;
}
.faq_accordion-area{
    max-width: 67.88%;
    list-style: none;
    margin: 0 16.06%;
}
.faq_list{
    position: relative;
    border-radius: 1.5vw;
    margin: 2.03% auto 0 auto;
    padding: 0.1%;
    background-color: #1B56A2;
    font-size: clamp(12px, 2.4vw, 24px);
    cursor: pointer;
}


.question{
    width: 100%;
    font-weight: bold;
    margin: 1.31% 0 1.31% 1%;
    color: #fff;
}
.faq_list::after{
    position: absolute;
    display: inline-block;
    content: "";
    background: url(../img/faq_btn.png) no-repeat;
    background-size: contain;
    width: 3.2vw;
    height: 3.2vw;
    min-width: 22px;
    min-height: 22px;
    z-index: 500;
    top: 8px;
    right: 15px;
}
.faq_list.close::after{
    display: none;
}

.box {
    display: none;/*はじめは非表示*/
    
    background: #ffff;
	line-height: 1.3;
    color: #1B56A2;
    font-weight: bold;
    padding: 1.62% 2%;
    margin: 1.5%;
}

.faq_btn{
    max-width: 56.67%;
    margin: 4.04% auto;
}
@media screen and (max-width: 900px){
    .faq_wrapper{
        padding-top: 4.89%;
    }
    .faq_accordion-area{
        max-width: 90%;
        list-style: none;
        margin: 4.89% auto;
    }
    .faq_list::after{
        min-width: 20px;
        min-height: 20px;
        top: 4px;
        right: 6px;
    }
    
    
    .faq_btn{
    max-width: 67.33%;
    margin: 4.04% auto;
    }
}



.site_footer{
    background-color: #1B56A2;
    padding: 2.98% 0;
    font-size: clamp(10px, 1.5vw, 24px);
    color: #fff;
}
.footer_logo{
    max-width: 29.29%;
    margin: 0 auto;
}

.tokusho_title{
    width: 44.6%;
    margin: 1.52% auto 0 auto;
    text-align: center;
    font-weight: bold; 
}
.tokusho_table{
    width: 44.6%;
   margin: 1.5% auto 0 auto;
}
.tokusho_table table{
    width: 100%;
    margin: 0 auto;
}
.tokusho_table tr{
    border-bottom: 1px solid #fff;
}
.tokusho_table th{
    padding: 1.24% 0;
}
.tokusho_table td{
    padding: 1.24% 0 1.24% 5.53%;
}
@media screen and (max-width: 900px){
    .site_footer{
        padding-bottom: 5%;
    }
    .tokusho_table{
        width: 71%;
    }
}





/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*スライド*/
.slideleft{
  animation: slideleft 3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
    animation-iteration-count:infinite;
}
 
@keyframes slideleft {
  0% {
    transform: translatex(0);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translatex(-30vw);
  }
}





/*movie-page*/
.wrapper{
    width: 900px;
    padding-top: 0; 
    margin: 0 auto;
     box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.6);
    background-color: #fff;
}
.wrapper img{
    width: 100%;
}
.movie-page_top{
    margin-top: -6.8%;
}

#movie-page_contents_01{
    
    text-align: center;
    padding-top: 3.33%;
    padding-bottom: 8.08%;
}
.movie-page_contents_012_movie-area{
    width: 67.88%;
    margin: -10% auto -5% auto;
}
.movie-page_contents_012_movie-area p{
    margin-top: -12%;
    color: #000;
    font-size: clamp(10px, 1.7vw, 24px)
}
.movie-page_btn{
    max-width: 65.44%;
    margin: 3.67% auto 0 ;
}
.movie-page_site_footer{
    background-color: #1B56A2;
    padding: 2.98% 0;
    font-size: clamp(10px, 1.5vw, 24px);
    color: #fff;
}
.movie-page_footer_logo{
    max-width: 30.89%;
    margin: 0 auto;
}
@media screen and (max-width: 900px){
    .movie-page_top{
    margin-top: -16.2%;
    }
    
    #movie-page_contents_01{
    padding-top: 3.33%;
}
    .movie-page_contents_012_movie-area{
    width: 90.11%;
    margin: 0 auto;
}
    .movie-page_contents_012_movie-area p{
    margin-top: -12%;
    color: #000;
    font-size: clamp(10px, 1.7vw, 24px)
}
}