@charset "UTF-8";

body{
 font-family: "Noto Sans JP", sans-serif;
 color: #222;
 overflow: hidden;
}

.c-pc{
 display: block;
}

.c-sp {
 display: none;
}

@media screen and (max-width: 767px) {
 .c-pc{
  display: none;
 }
 
 .c-sp {
  display: block;
 }
}

.inner{
 width: 100%;
 padding-left: 40px;
 padding-right: 40px;
 margin: 0 auto;
}

@media screen and (max-width: 767px) {
 .inner{
  padding-left: 16px;
  padding-right: 16px;
 }
}


/* header */
.l-header{
 position: relative;
 z-index: 2;
background-color: #fff;
padding-top: 12px;
padding-bottom: 12px;
}

.l-header_inner{
 max-width: 1480px;
 width: 100%;
 padding-left: 40px;
 padding-right: 40px;
 margin: 0 auto;
}

.l-header_logo{
 display: block;
 width: 200px;
}

.l-header_logo:hover{
 opacity: .8;
 transition: .4s;
}

@media screen and (max-width: 767px) {
 .l-header_inner{
  padding-left: 24px;
  padding-right: 24px;
 }

 .l-header_logo{
  width: 140px;
 }
}

/* movie */
.movie{
 background-color: #ebf6f7;
 padding-top: 64px;
}

.movie_bg{
 position: relative;
 z-index: 1;
}

.movie_bg_image{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 z-index: -1;
 min-width: 3000px;
 width: 100%;
}

.movie_bg_top{
 top: -16px;
}

.movie_bg_bottom{
 bottom: 0;
}

.movie_inner{
 max-width: 740px;
}

.movie_title{
 text-align: center;
 font-size: 40px;
 line-height: 1.2;
  margin-bottom: 24px;
}

.movie_title .subtxt{
 display: block;
 line-height: 1;
 font-size: 20px;
 width: 320px;
 background-color: #e12700;
 color: #fff;
 border-radius: 50px;
 padding: 6px 24px 8px;
  margin: 0 auto 8px;
}

_::-webkit-full-page-media, _:future, :root .movie_title .subtxt{
	padding: 8px 24px 6px;
}

.win {
 .movie_title .subtxt{
  padding: 8px 24px 4px;
 }
}

.android {
 .movie_title .subtxt{
  padding: 8px 24px 4px;
 }
}

.movie_box{
 border: solid 16px #008ae9;
  border-radius: 20px;
}

#movie{
 border: solid 4px #fff;
 width: 100%;
 height: 100%;
 vertical-align: bottom;
}

.movie_txt{
 text-align: center;
 font-size: 16px;
 padding-top: 8px;
}

@media screen and (max-width: 767px) {
 .movie{
  padding-top: 48px;
 }

 .movie_inner{
  max-width: 600px;
 }

 .movie_bg_image{
  min-width: 860px;
  width: 100%;
 }

 .movie_title{
  font-size: 32px;
  margin-bottom: 24px;
 }

 .movie_title .subtxt{
  width: 250px;
  font-size: 18px;
 }

 .movie_box{
  border: solid 12px #008ae9;
 }

 .movie_txt{
  font-size: 14px;
  padding-top: 24px;
 }
}

/* ボタンエリア */
.movie_btn_area{
 background-color: #cedeea;
 padding-top: 64px;
 padding-bottom: 80px;
}

.movie_btn_area_inner{
 max-width: 1060px;
}

.movie_btn_area_flex{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 padding-top: 40px;
}

/* ボタン style */
.movie_btn{
 position: relative;
 display: block;
 width: 100%;
 height: 64px;
 font-weight: 600;
 font-family: "Noto Sans JP", sans-serif;
 border-radius: 100px;
 margin: auto;
}

.movie_btn:after{
 content: "";
 position: absolute;
 top: 50%;
 right: 20px;
 transform: translateY(-50%);
 background-repeat: no-repeat;
 background-size: contain;
 width: 38px;
 height: 38px;
}

.movie_btn:hover{
 opacity: .8;
 transition: .4s;
}

.movie_btn_area_flex .movie_btn{
 width: 48%;
 font-size: 1.67vw;
 background-color: #fff;
 color: #008ae9;
 border: solid 3px #008ae9;
}

.movie_btn_area_flex .movie_btn:after{
 background-image: url(../imgs/arrow_blue.svg);
}

.movie_btn_area_flex .movie_btn:nth-of-type(n + 3){
 margin-top: 16px;
}

.all_btn{
 max-width: 480px;
 font-size: 2.33vw;
 background-color: #008ae9;
 color: #fff;
 box-shadow: 0px 6px 0px 0px #006cb6; 
}

.all_btn span,
.movie_btn_area_flex .movie_btn span{
 font-size: 1.33vw;
}

.all_btn:after{
 background-image: url(../imgs/arrow_white.svg);
}

@media screen and (min-width: 1201px) {
 .movie_btn_area_flex .movie_btn{
  font-size: 20px;
 }

 .all_btn{
  font-size: 28px;
 }

 .all_btn span,
 .movie_btn_area_flex .movie_btn span{
  font-size: 16px;
 }
}

@media screen and (max-width: 767px) {
 .movie_btn_area{
  padding-top: 40px;
  padding-bottom: 120px;
 }

 .movie_btn_area_flex .movie_btn{
  max-width: 480px;
  width: 100%;
  font-size: 16px;
  margin: auto;
 }

 .movie_btn_area_flex .movie_btn:nth-of-type(n + 2){
  margin-top: 16px;
 }

 .all_btn{
  font-size: 20px;
 }

 .all_btn span,
 .movie_btn_area_flex .movie_btn span{
  display: block;
  font-size: 12px;
 }

 .movie_btn:after{
  right: 16px;
  width: 28px;
  height: 28px;
 }
}

@media screen and (max-width: 369px) {
 .movie_btn_area_flex .movie_btn{
  font-size: 4.32vw;
 }
 
 .all_btn{
  font-size:5.41vw;
 }

 .all_btn span,
 .movie_btn_area_flex .movie_btn span{
  font-size: 3.24vw;
 }
}

.site_btn{
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 max-width: 480px;
 width: 100%;
 background-color: #fff;
 color: #008ae9;
 font-size: 20px;
 font-weight: 600;
 padding-top: 4px;
 padding-bottom: 4px;
 margin: 48px auto 0;
}

_::-webkit-full-page-media, _:future, :root .site_btn {
	padding-bottom: 2px;
}

.win {
 .site_btn{
  padding-top: 8px;
 }
}

.android {
 .site_btn{
  padding-top: 8px;
 }
}

.site_btn span{
 display: inline-block;
 width: 55px;
 height: 58px;
}

.site_btn:after{
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-image: url(../imgs/tab.svg);
 background-repeat: no-repeat;
 background-size: contain;
 width: 22px;
 height: 22px;
 right: 20px;
}

.site_btn:hover{
 opacity: .8;
 transition: .4s;
}

@media screen and (max-width: 767px) {
 .site_btn{
  font-size: 16px;
 }

 .site_btn span{
  width: 40px;
  height: 41px;
 }

 .site_btn:after{
  width: 16px;
  height: 16px;
 }
}

@media screen and (max-width: 379px) {
 .site_btn{
  font-size: 4vw;
 }

 .site_btn:after{
  right: 10px;
 }
}

/* フッター */
.l-footer{
background-color: #222;
color: #fff;
text-align: center;
font-size: 12px;
padding-top: 24px;
padding-bottom: 24px;
}

.l-footer_inner{
 position: relative;
 max-width: 1200px;
}

.backtotop{
 position: absolute;
 right: 40px;
 bottom: 120px;
 width: 80px;
 height: 80px;
}

.backtotop:hover{
 opacity: .8;
 transition: .4s;
}


@media screen and (max-width: 767px) {
 .backtotop{
  right: 16px;
  bottom: 80px;
  width: 64px;
  height: 64px;
 }
}