@charset "utf-8";

section{ position: relative; }
/* .bg{ overflow: hidden; } */

.area01{ position: relative; padding: 100px 0 50px; }
.area01:before{ position: absolute; z-index: 1; content: ""; right: 0; bottom: -550px; width: 885px; height: 731px; background: url(../images/ink_04.png) center/cover; }
.area01:after{ position: absolute; content: ""; left: 0; bottom: -260px; width: 465px; height: 602px; background: url(../images/ink_14.png) center/cover; }

.area02{ }
.area03{ }
.area04{ padding: 0 0 140px; }
.area05{ }

.area02 .bg{ position: relative; padding: 120px 0 180px; background: url(../images/ink_05.png) center no-repeat; }
.area03 .bg{ padding: 150px 0 130px; background: url(../images/ink_07.png) calc(50% - 150px) 30px no-repeat, url(../images/ink_08.png) center calc(100% - 450px) no-repeat; }
.area02 .bg:after{ position: absolute; bottom: -200px; left: -750px; content: ""; width: 1381px; height: 878px; background: url(../images/ink_06.png) center/cover no-repeat; }

.area04 .bg{ background: url(../images/ink_10.png) center no-repeat; }
.area04 .cta{ position: relative; padding: 130px 0 0; background: none; }
.area04 .cta:before{ position: absolute; content: ""; top: -200px; left: calc(20% - 800px); width: 1064px; height: 631px; background: url(../images/ink_03.png) center/cover no-repeat; }
.area04 .cta:after{ background: url(../images/ink_09.png) center/cover no-repeat; bottom: -340px; right: 0; width: 789px; height: 769px; }


/* ------------------------------------------------------------ fv */
#fixed_area{ z-index: 100; position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; min-width: 1400px; }
#fixed_area .box{ width: 50%; padding: 15px 3%; }
#fixed_area .box p{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; font-size: 18px; letter-spacing: 0.1em; text-align: center; color: #e40057; }
#fixed_area .box p:after{ top: 50%; right: 0; width: 10px; height: 10px; position: absolute; content: ""; border-top: 1px solid #e40057; border-right: 1px solid #e40057; transform: translate(0,-50%) rotate(45deg); }
#fixed_area .box p strong{ position: relative; display: block; width: 225px; margin: 0 20px 0 0; padding: 15px; border-radius: 10px; background: #e40057; font-size: 18px; left: 0.1em; color: #fff; }
#fixed_area .box p strong:after{ position: absolute; content: ""; right: -10px; top: 50%; transform: translate(0,-50%); width: 20px; height: 20px; background: #e40057; clip-path: polygon(0 0, 100% 50%, 0 100%); color: #fff; }
#fixed_area .box p span{ line-height: 150%; }
#fixed_area .box p img{ width: auto; height: 20px; margin: 0 10px 0 0; }


#fixed_area .whight{ background: #fff; color: #e40057; }
#fixed_area .red{ align-items: center; display: flex; justify-content: center; background: #e40057; color: #fff; border-radius: 0; }
#fixed_area .red a{; color: #fff; }
#fixed_area .red p:after{  border-top: 1px solid #fff; border-right: 1px solid #fff; }


/* ------------------------------------------------------------ fv */
#fv{ position: relative; width: auto; height: 1000px; margin: 0 auto; }
#fv img{ width: 100%; height: auto; }

#fv .text_fv{ z-index: 5; position: absolute; top: 1%; left: 50%; transform: translate(-50%,0); max-width: 1400px; width: 90%; padding: 0; }
#fv .txt{ z-index: 10; position: absolute; bottom: 30px; left: 50%; transform: translate(-50%,0); max-width: 1400px; width: 90%; padding: 0; }
#fv .txt h2{ width: 100%; }

#fv .free{ position: absolute; top: 50%; left: calc(50% + 165px); transform: translate(0,-50%); width: 370px; z-index: 100; }
#fv .free img{ width: 100%; height: auto; }


/* swiper */
.fv_area{ z-index: 1; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; }
.fv_area .swiper{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* bg_color */
.swiper-wrapper,
.bg_color,
.swiper-slide,
.slide{ width: 100%; height: 100%; }

.swiper-wrapper{ position: absolute; top: 0; left: 0; right: 0; }

/* human */
.human{ width: 1600px; margin: 0 auto; transition-timing-function: linear; z-index: 5; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); }
.human_area{ position: relative; }
.human_area:after{ z-index: -5; position: absolute; content: ""; width: 100vw; height: 100%; margin: 0 calc(50% - 50vw); background: url(../images/fv/fv_line.png) center/cover no-repeat; left: 0; top: 0; }


    
.fv_area .swiper-slide[class*=-active] .slide-media.clip img {
    transform: scale(1.2);
}
.fv_area .swiper-slide[class*=-prev] .slide-media img {
    transform: translateX(80vw);
}
.fv_area .swiper-slide[class*=-next] .slide-media img {
    transform: translateX(-80vw);
}

.fv_area .human_area{ opacity: 0; }
.fv_area .anm-started .human_area {
	position: relative;
	z-index: 10;
    -webkit-animation: human_area 4s 1s ease;
            animation: human_area 4s 1s ease;
}

@-webkit-keyframes human_area {
    0%{ opacity: 1; transform: scale(1); }
    100%{ opacity: 1; transform: scale(1); }
}

@keyframes mv05-marker {
    0%{ opacity: 1; transform: scale(1); }
    100%{ opacity: 1; transform: scale(1); }
}



/* ------------------------------------------------------------ free */
#free{ padding: 130px 0 50px; background: url(../images/bg_01.png) calc(50% + 620px) 140px/400px no-repeat ,url(../images/img_06.png) calc(50% - 430px) 220px/900px no-repeat; }
#free:before{ top: 200px; left: calc(50% - 830px); width: 940px; height: 517px; background: url(../images/img_06.png) center/cover no-repeat; }
#free:after{ bottom: -170px; left: calc(50% - 1200px); width: 836px; height: 530px; background: url(../images/ink_06.png) center/cover no-repeat; }

#free .txt{ width: 725px; margin: 0 0 0 auto; }
#free .txt h3{ padding: 0 0 35px; }
#free .txt .subttl{ width: 440px; margin: 0 0 0 auto; padding: 0 30px 20px 0; } 
#free .txt .subttl img { width: 100%; height: auto; }
#free .txt .ast{ width: 420px; margin: 0 0 0 auto; color: #fff; }


/* ------------------------------------------------------------ get */
#get{ overflow: hidden; padding: 0 0 15px; }
#get h3{ position: relative; z-index: 1; width: 720px; margin-left: -50px; padding: 0 0 30px; }
#get h3 img{ width: 100%; height: auto; }

#get .subttl{ width: 100%; margin: 0 auto 40px; text-align: center; }
#get .subttl img{ width: 100%; height: auto; }

#get article{ position: relative; z-index: 1; margin: 0 0 80px; padding: 50px 50px 80px; background: #fff; }
#get article h4{ display: flex; align-items: baseline; justify-content: center; font-size: 115px; color: #1ad9c0;}
/* #get article h4 .num{ width: 20%; font-size: 160px; letter-spacing: -0.05em; font-family: 'Aviano-Sans-Black'; } */
#get article h4 .en{ width: 100%; font-family: 'Aviano-Sans-Black'; }
#get article .sub{ width: 700px; height: auto; margin: 0 auto; padding: 0 0 40px; }
#get article .sub img{ width: 100%; height: auto; }

#get article .box{ display: flex; justify-content: space-between; align-items: flex-start; }
#get article .box img{ width: 100%; height: auto; }

#get article .box figure{ width: 41%; }
#get article .box figcaption{ padding: 10px 0 0; text-align: center; font-size: 12px; }
#get article .box .txt{ width: 57%; }
#get article .box .txt h5{ padding: 0 0 20px; }
#get article .box .txt h5 small{ display: block; padding: 0 0 15px; font-size: 27px; font-family: 'Noto-Sans-JP-Bold'; }
#get article .box .txt .ast{ font-size: 12px; }
#get article .box .txt .img{ width: 95%; }

#get article.w_box02 h5{ margin: -20px auto 0; padding: 0 0 50px; text-align: center; }
#get article.w_box02 h5 small{ display: block; padding: 0 0 20px; font-size: 28px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; line-height: 100%; }
#get article.w_box02 h4{ align-items: center; }
#get article.w_box02 h4 .en{ font-size: 74px; line-height: 90%; font-size: 110px; }
#get article.w_box02 .ast{ padding: 0 0 20px; text-align: right; }

#get .gift_swiper{ width: 100vw; margin: 0 calc(50% - 50vw); overflow: visible; }
#get .gift_swiper .swiper-slide{ float: left; width: 370px!important; margin: 0 20px; filter: drop-shadow(10px 7px 0px #ffff01); }
#get .gift_swiper .swiper-slide h5 span{ display: inline-block; margin: 0 0 5px; padding: 9px 25px; font-size: 14px; letter-spacing: 0.05em; background: #fff; border: 1px solid #000; }
#get .gift_swiper .swiper-slide img{ width: 100%; height: auto; }

.btns .btn{ position: relative; display: flex; align-items: center; justify-content: center; width: 600px; height: 80px; margin: 0 auto 30px; box-shadow: 10px 10px 0px 0px rgba(106, 106, 106, 0.2); background: #fff; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; }
.btns .btn:after{　top: 50%!important; transform: rotate(45deg) translate(0,-50%); }
.btns .btn img{ width: 20px; height: auto; margin: 0 10px 0 0; filter: grayscale(100%); }

.red{ letter-spacing: 0.1em; color: #e40057; text-align: center; border: 3px solid #e40057; border-radius: 15px; }
.red:after{ left: calc(50% + 100px); }

.gray{ border: 3px solid #434343; border-radius: 15px; }
.gray:after{ left: calc(50% + 200px); border-color: #434343!important; }


/* ------------------------------------------------------------ movies */
#movies{ position: relative; padding: 0 0 240px; }
#movies h3{ width: 880px; margin: 0 auto; padding: 0 0 35px; }
#movies h3 img{ width: 100%; height: auto; }
#movies .subttl{ padding: 0 0 50px; text-align: center; }
#movies .subttl span{ display: inline-block; margin: 0 0 10px; padding: 5px 10px; font-size: 20px; color: #fe5747; letter-spacing: 0.05em; background: #fff; }

#movies .yt{ width: 525px; margin: 0 0 50px; }
#movies .yt_area{ display: flex; justify-content: space-between; flex-wrap: wrap; }

#movies .yt_area .yt_wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#movies .yt_area .yt_wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#movies .yt_area h4{ margin: 20px 0 0; padding: 20px 0; font-size: 20px; letter-spacing: 0.05em; text-align: center; background: #fff; border: 1px solid #000; }
#movies .yt .commingsoon{ z-index: 10; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); } 
#movies .yt .commingsoon:before{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: "comming soon"; color: #fff; font-size: 36px; }


/* ------------------------------------------------------------ features */
#features{ padding: 80px 0 65px; }
#features h3{ width: 105%; margin-left: -60px; padding: 0 0 45px; }
#features h3 img{ width: 100%; height: auto; }

#features .w_box{ padding: 70px 50px; background: #fff; }
#features h4 span{ display: inline-block; margin: 0 0 15px; background: #ffff01; font-size: 40px; letter-spacing: 0.05em; font-family: 'Noto-Sans-JP-Bold'; }

#features .main{ display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px; }
#features .main .txt{ width: 645px; }
#features .main .item{ width: 340px; height: auto; }

#features .main h4{ padding: 0 0 10px; }
#features .main p{ font-size: 19px; letter-spacing: 0.05em; line-height: 200%; }

#features .sub h4{ padding: 0 0 30px; }
#features .sub h4 span{ font-size: 30px; }
#features .sub .flex{ display: flex; justify-content: space-between; }
#features .sub .sub_box{ width: 300px; }
#features .sub .sub_box img{ display: block; width: 70%; height: auto; margin: 0 auto; padding: 0 0 15px; }
#features .sub .sub_box h5{ padding: 0 0 20px; font-size: 20px; letter-spacing: 0.05em; text-align: center; font-family: 'Noto-Sans-JP-Bold'; }
#features .sub .sub_box p{ font-size: 16px; line-height: 200%; }


/* ------------------------------------------------------------ isit */
#isit{ padding: 25vw 0 0; background: url(../images/img_12.png) calc(50% - 100px) top no-repeat; }
#isit h3{ width: 620px; margin: 0 auto; padding: 130px 0 100px; }
#isit .ast{ color: #fff; line-height: 170%; font-size: 14px; font-family: 'Noto-Sans-JP-Medium'; }

#isit ul{ display: flex; justify-content: space-between; padding: 0 0 40px; }
#isit ul li{ position: relative; width: 300px; }
#isit ul li .num{ position: absolute; top: -60px; left: 50%; transform: translate(-50%,0); width: auto; height: 85px; }
#isit ul li .num img{ width: auto; height: 100%; }
#isit ul li .item{ display: block; width: 100%; height: auto; border-radius: 15px; margin: 0 0 15px; }
#isit ul li .txt{ text-align: center; }


/* ------------------------------------------------------------ try */
#try{ padding: 100px 0 0; }
#try h3{ width: 815px; margin: 0 auto; }
#try h3 img{ width: 100%; height: auto; padding: 0 0 40px; }


#try .roop{ background: url(../images/roop_txt02.png); }
#try .bnr_roop .bnr{  display: block; padding: 0; }
#try .bnr_roop a img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ flow */
#flow{ padding: 130px 0; background: url(../images/ink_11.png) center 20px no-repeat; }
#flow h3{ padding: 0 0 30px; width: 360px; margin: 0 auto; }
#flow h3 img{ width: 100%; height: auto; }
#flow .subttl{ width: 900px; margin: 0 auto; padding: 0 0 50px; }
#flow .subttl img{ width: 100%; height: auto; }

#flow ul{ display: flex; justify-content: space-between; padding: 0 0 50px; }
#flow li{ position: relative; width: 250px; padding: 30px 25px; background: #fff; border-radius: 15px; box-shadow: 20px 20px 0px 0px rgba(106, 106, 106, 0.3); }
#flow li:after{ position: absolute; content: ""; background: #ffff01; right: -23px; top: 50%; transform: translate(0,-50%); width: 14px; height: 83px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#flow li:last-of-type:after{ display: none; }

#flow li .num{ font-size: 30px; color: #e40057; font-family: 'Aviano-Sans-Bold'; text-align: center; }
#flow li .num span{ font-size: 70px; }
#flow li .item{ display: block; width: 110px; height: auto; margin: 0 auto; padding: 0 0 30px; }
#flow li h4{ padding: 0 0 20px; font-size: 19px; letter-spacing: 0.05em; font-family: 'Noto-Sans-JP-Bold'; line-height: 150%; text-align: center; }
#flow li .txt{ font-size: 16px; line-height: 200%; font-family: 'Noto-Sans-JP-Medium'; }
#flow li .txt small{ display: block; padding: 10px 0 0; font-size: 14px; line-height: 150%; }

#flow .ast{ color: #fff; }


/* ------------------------------------------------------------ school */
.lightbox {
  display: none;
}
.school{
  padding: 130px 0;
  /* background: url(../images/school_bg.png) top center no-repeat; */
  /* background-size: cover; */
}
.school .school_inner{
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.school .school_inner figure{
  width: 42%;
}
.school .school_inner .right_area{
  width: 58%;
}
.school .school_inner .right_area div{
  width: 100%;
  border-radius: 5px;
  background: #fff;
  opacity: 1;
  display: flex;
  padding: 15px;
  margin-bottom: 20px;
}
.school .school_inner .right_area .kanto{
  border: 1px solid #d55c6a;
}
.school .school_inner .right_area .chubu{
  border: 1px solid #de8b54;
}
.school .school_inner .right_area .kinki{
  border: 1px solid #dfb33f;
}
.school .school_inner .right_area .kyushu{
  border: 1px solid #a9c63f;
}

.school .school_inner .right_area h3{
  width: 25%;
  font-weight: 600;
  font-size: 16px;
}
.school .school_inner .right_area .kanto h3{
  color: #d55c6a;
}
.school .school_inner .right_area .chubu h3{
  color: #de8b54;
}
.school .school_inner .right_area .kinki h3{
  color: #dfb33f;
}
.school .school_inner .right_area .kyushu h3{
  color: #a9c63f;
}
.school .school_inner .right_area ul{
  width: 75%;
  display: flex;
  flex-wrap: wrap;
}
.school .school_inner .right_area ul li{
  width: 23%;
  border-radius: 20px;
  margin: 0 1% 10px;
  padding: 5px 2px;
  text-align: center;
}

.school .school_inner .right_area .kanto ul li{
  background: #FBEEF0;
}
.school .school_inner .right_area .chubu ul li{
  background: #FCF3ED;
}
.school .school_inner .right_area .kinki ul li{
  background: #FBF6EB;
}
.school .school_inner .right_area .kyushu ul li{
  background: #F5F8EB;
}
.school .school_inner .right_area a{
  display: block;
  text-decoration: none;
  position: relative;
  font-size: 14px; 

}
.school .school_inner .right_area a::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 35%;
}

.school h2{
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	color: #c8113d;
	margin-bottom: 60px;
}

/* ------------------------------------------------------------ modal */
/* #modal{ background: rgb(0,0,0,0.5); } */
.modal_html {
  width: 900px;
  max-height: 85%;
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal_html::-webkit-scrollbar {
  display: none;
}
.modal_inner {
  border: 1px solid #c8113d;
  border-radius: 10px;
  padding: 60px 50px 70px;
  overflow-y: scroll;
  scrollbar-width: none;
  height: 700px;
}

#aichi .modal_inner,
#shizuoka .modal_inner,
#mie .modal_inner,
#gifu .modal_inner{
  border: 1px solid #de8b54;
}
#osaka .modal_inner,
#kyoto .modal_inner,
#hyogo .modal_inner,
#shiga .modal_inner,
#nara .modal_inner,
#wakayama .modal_inner{
  border: 1px solid #dfb33f;
}
#okayama .modal_inner,
#fukuoka .modal_inner,
#kagoshima .modal_inner{
  border: 1px solid #a9c63f;
}

.modal_html h2{
  width: 150px;
  border-radius: 25px;
  background: #c8113d;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-align: center;
  color: #fff;
  margin: 0 auto;
  padding: 10px 0;
}
#aichi h2,
#shizuoka h2,
#mie h2,
#gifu h2{
  background: #de8b54;
}
#osaka h2,
#kyoto h2,
#hyogo h2,
#shiga h2,
#nara h2,
#wakayama h2{
  background: #dfb33f;
}
#okayama h2,
#fukuoka h2,
#kagoshima h2{
   background: #a9c63f;
}

.modal_html ul {
  ;
  padding: 30px 0 0;
}
.modal_html ul li {
  float: left;
  width: 29%;
  min-height: 180px;
  margin: 0 50px 0 0;
}
.modal_html ul li:nth-of-type(3n) {
  margin: 0;
}

.modal_html ul li h3{
  padding: 0 0 10px;
  font-size: 18px;
  color: #c8113d;
  font-weight: 800;
  line-height: 150%;
  border-bottom: 1px solid #c8113d;
}
#aichi ul li h3,
#shizuoka ul li h3,
#mie ul li h3,
#gifu ul li h3{
  color: #de8b54;
  border-bottom: 1px solid #de8b54;
}
#osaka ul li h3,
#kyoto ul li h3,
#hyogo ul li h3,
#shiga ul li h3,
#nara ul li h3,
#wakayama ul li h3{
  color: #dfb33f;
  border-bottom: 1px solid #dfb33f;
}
#okayama ul li h3,
#fukuoka ul li h3,
#kagoshima ul li h3{
  color: #a9c63f;
  border-bottom: 1px solid #a9c63f;
}

.modal_html ul li p {
  line-height: 160%;
  font-size: 13px;
  margin-top: 15px;
}
/* close_btn */
.modal_html .box {
  position: relative;
}
.modal_html .close_btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 80px;
  color: #e40057;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}





/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 960px) {


	.area01{ padding: 30px 0 0; }
	.area01:before{ bottom: -180px; left: 0; transform: none; width: 100vw; height: 77vw; background: url(../images/ink_04-sp.png) center/cover; }
	.area01:after{ display: none; }

	.area02{ padding: 140px 0 0; }
	.area02 .bg:after{ display: none; }
	.area02 .bg{ padding: 0 0 50px; background: url(../images/ink_03.png) calc(50% - 200px) 180px/600px no-repeat, url(../images/ink_01.png) calc(10% + 130px) calc(50% - 100px)/600px no-repeat, url(../images/ink_06.png) calc(50% - 200px) bottom/600px no-repeat; }
	.area03{ padding: 60px 0; }
	.area03 .bg{ padding: 0; background: url(../images/ink_07-sp.png) center 60vw/100% no-repeat, url(../images/ink_12.png) -300px calc(50% + 100px)/500px no-repeat; }
	
	.area04{ padding: 0 0 60px; }
	.area04 .bg{ background: none; }
	.area04 .cta{ padding: 60px 0 0; }
	.area04 .cta:after{ background: none; }
	.area04 .cta:before{ top: -100px; left: -200px; width: 400px; height: 250px; }



/* ------------------------------------------------------------ fixed_area */
	#fixed_area{ min-width: 100%; }
	#fixed_area .box{ padding: 4px 3%; }
	#fixed_area .box p{ justify-content: center; font-size: 12px; line-height: 150%; }
	#fixed_area .box p img{ width: 20px; height: auto; vertical-align: super; }
	#fixed_area .box p span{ display: inline-block; text-align: left; }
	#fixed_area .box p strong.PC{ display: none; }
	
	#fixed_area .box p a{ display: flex; align-items: center; }



/* ------------------------------------------------------------ fv */
	#fv{ width: 100%; height: 237vw; }
	#fv .text_fv{ min-width: 90%; top: 4%; }
	#fv .txt h2{ padding: 0 0 10px; }
	
	#fv .free{ top: 32%; left: initial; right: 0px; transform: none; width: 40%; min-width: 160px; height: auto; } 
	
	.human{ width: 100%; }
	.human:after{ background: url(../images/fv/fv_line-sp.png) center/cover no-repeat; }
	
/*
	@-webkit-keyframes human_area {
	    0%{ opacity: 0; transform: scale(1); }
	    50%{ opacity: 1; transform: scale(1.1); }
	    100%{ opacity: 0; transform: scale(1.2); }
	}
	
	@keyframes mv05-marker {
	    0%{ opacity: 0; transform: scale(1); }
	    50%{ opacity: 1; transform: scale(1.1); }
	    100%{ opacity: 0; transform: scale(1.2); }
	}
*/


/* ------------------------------------------------------------ free */
	#free{ padding: 100px 0 50px; background: none; }
	#free h3{ width: 90%; padding: 0 0 20px; }
	#free h3 img{ width: 100%; height: auto; }
	#free .item{ width: 100%; height: auto; }
	
	#free .txt{ width: 100%; }
	#free .txt .subttl{ width: 80%; margin: 0; padding: 0 0 20px; }
	#free .txt .ast{ width: 100%; padding: 0 0 25px; }


/* ------------------------------------------------------------ get */
	#get h3{ width: 95%; margin-left: 0; padding: 0 0 15px; position: relative; }
	#get .subttl{ margin: 0 auto 25px; }
	
	#get article{ margin: 0 0 40px; padding: 25px 7%; }
	#get article h4{ flex-direction: column; padding: 0 0 20px; font-size: 45px; text-align: center; }
	#get article h4 .num{ width: 100%; font-size: 90px; text-align: center; line-height: 70%; }
	#get article h4 .en{ width: 100%; }
	
	#get article .sub{ width: 90%; padding: 0 0 20px; }
	#get article .sub img{ width: 100%; height: auto; }
	#get article .ast{ padding: 25px 0 0; }
	
	#get article .box{ flex-direction: column-reverse; }
	#get article .box figure{ width: 100%; }
	#get article .box .txt{ width: 100%; }
	#get article .box .txt h5 small{ font-size: 15px; line-height: 150%; }
	
	#get article.w_box02 h4 .en{ font-size: 30px; }
	#get article.w_box02 h5{ margin: 0; padding: 0 0 30px; }
	#get article.w_box02 h5 small{ font-size: 15px; }
	#get article.w_box02 h5 img{ width: 100%; height: auto; }
	#get article.w_box02 .ast{ padding: 0 0 10px; }
	
	#get .swiper-wrapper{ padding: 0 0 30px; }
	#get .gift_swiper .swiper-slide{ width: 200px!important; margin: 0 10px; }
	#get .gift_swiper .swiper-slide h5{ padding: 0; }
	#get .gift_swiper .swiper-slide h5 span{ padding: 5px 11px; font-size: 12px; }
	
	
	.btns .btn{ width: 100%; height: 50px; margin: 0 auto 20px; box-shadow: 5px 5px 0px 0px rgba(106, 106, 106, 0.2); font-size: 12px; line-height: 150%; }
	.red{ border: 1px solid #e40057; border-radius: 10px; }
	.gray{ padding-right: 15px; border: 1px solid #434343; border-radius: 10px; }
	.gray:after{ left: calc(50% + 100px); }


/* ------------------------------------------------------------ movies */
	#movies{ padding: 0; }
	#movies:before{ position: absolute; content: ""; top: -175px; right: 0; width: 215px; height: 265px; background: url(../images/ink_02-sp.png) center/cover no-repeat; }
	#movies h3{ position: relative; z-index: 1; width: 95%; margin: 0 auto; padding: 0 0 20px; }
	#movies h3 img{ width: 100%; height: auto; }
	#movies .subttl { padding: 0 0 40vw; }
	#movies .subttl span{ padding: 3px 7px; font-size: 13px; }
	#movies .item{ position: relative; width: 100%; height: auto; margin-top: -150px; padding: 0 0 50px; }
	
	#movies .yt{ position: relative; z-index: 1; width: 100%; margin: 0 0 30px; }
	#movies .yt_area h4{ margin: 10px 0 0; padding: 11px 0; font-size: 15px; }
	
	#movies .yt .commingsoon:before{ font-size: 25px; width: 100%; text-align: center; }


/* ------------------------------------------------------------ features */
	#features{ z-index: 1; margin: 80px 0 0; padding: 0; background: url(../images/ink_09-sp.png) center 120px/100% no-repeat; }
	#features .w_box{ padding: 30px 7%; }
	
	#features h3{ width: 95%; margin-left: 0; padding: 0 0 25px; }
	#features h4 span{ margin: 0 0 10px; font-size: 25px; }
	
	#features .main{ flex-direction: column; padding: 0; }
	#features .main .txt{ width: 100%; }
	#features .main .item{ width: 80%; margin: 0 auto; padding: 0 0 25px; }
	#features .main h4{ padding: 0 0 20px; }
	#features .main p{ font-size: 14px; line-height: 170%; }
	
	#features .sub{ padding: 50px 0 0; }
	#features .sub h4{ padding: 0 0 20px; }
	#features .sub .flex{ flex-direction: column; }
	
	#features .sub .sub_box{ width: 100%; padding: 0 0 25px; }
	#features .sub .sub_box:last-of-type{ padding: 0; m}
	#features .sub .sub_box img{ width: 60%; }
	#features .sub .sub_box h5{ padding: 0 0 20px; }
	#features .sub .sub_box p{ font-size: 12px; line-height: 200%; }


/* ------------------------------------------------------------ isit */
	#isit{ margin-top: -120px; background: url(../images/img_12-sp.png) center top/100% no-repeat; }
	#isit h3{ width: 95%; margin: 0 auto; padding: 90vw 0 80px; }
	#isit h3 img{ width: 100%; height: auto; }
	#isit .ast{ line-height: 200%; font-size: 11px; }
	
	#isit ul{ padding: 0 0 25px; flex-direction: column; width: 85%; margin: 0 auto; }
	#isit ul li{ width: 100%; padding: 0 0 70px; }
	#isit ul li:last-of-type{ padding: 0; }
	#isit ul li .num{ top: -40px; height: 60px; }
	#isit ul li .txt{ width: 70%; margin: 0 auto; }
	#isit ul li .txt img{ width: 100%; }


/* ------------------------------------------------------------ try */
	#try{ padding: 50px 0 0; }
	#try h3{ width: 90%; padding: 0 0 25px; }
	#try h3 img{ padding: 0; }


/* ------------------------------------------------------------ flow */
	#flow{ padding: 25px 0 60px; background: url(../images/ink_11-sp.png) center 25px/100% no-repeat; }
	#flow h3{ padding: 0 0 50px; width: 80%; }
	#flow h3 img{ width: 100%; height: auto; }
	#flow .subttl{ width: 100%; padding: 0 0 25px; }
	
	#flow ul{ padding: 0 0 35px; flex-direction: column; }
	#flow li{ width: 100%; margin: 0 0 50px; padding: 10px 7% 30px; box-shadow: 10px 10px 0px 0px rgba(106, 106, 106, 0.3); }
	#flow li:last-of-type{ margin: 0; }
	#flow li:after{ right: initial;  top: initial; bottom: -40px; transform: translate(-50%,0); left: 50%; width: 100px; height: 20px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
	
	#flow li .num{ font-size: 20px; text-align: center; }
	#flow li .num span{ margin-left: 5px; font-size: 50px; }
	
	#flow li .flex{ display: flex; align-items: center; padding: 0 0 20px; }
	#flow li .item{ width: 85px; margin: 0; padding: 0 14px 0 0; }
	#flow li h4{ width: calc(100% - 85px); padding: 0; font-size: 15px; text-align: left; }
	#flow li .txt{ font-size: 12px; padding: 0; }
	#flow li .txt small{ font-size: 11px; }


/* ------------------------------------------------------------ school */
	.school {
	  padding: 20px 0;
	  background-size: cover;
	}
	.school h2 {
	  font-size: 20px;
	  position: absolute;
	  margin: 40px 0 0 40px;
	  text-align: left;
	}
	
	.school .school_inner{
	  display: block;
	  width: 100%;
	  margin: 0 auto;
	}
	.school .school_inner figure {
	  width: 90%;
	  margin: 0 auto;
	}
	.school .school_inner figure img{
	  width: 100%;
	}
	.school .school_inner .right_area {
	  width: 80%;
	  margin: 0 auto;
	  border: none;
	}
	.school .school_inner .right_area .kanto,
	.school .school_inner .right_area .chubu,
	.school .school_inner .right_area .kinki,
	.school .school_inner .right_area .kyushu{
	  border:none;
	}
	.school .school_inner .right_area div{
	  width: 100%;
	  display: block;
	  border: none;
	  background: none;
	  padding: 0;
	  margin-bottom: 10px;
	}
	.school .school_inner .right_area h3{
	  border-radius: 5px;
	  text-align: left;
	  font-size: 15px;
	  padding: 15px 20px;
	  width: 100%;
	  position: relative;
	}
	.school .school_inner .right_area .kanto h3 {
	  color: #fff;
	  background: #d55c6a;
	}
	.school .school_inner .right_area .chubu h3 {
	  color: #fff;
	  background: #de8b54;
	}
	.school .school_inner .right_area .kinki h3 {
	  color: #fff;
	  background: #dfb33f;
	}
	.school .school_inner .right_area .kyushu h3 {
	  color: #fff;
	  background: #a9c63f;
	}
	.school .school_inner .right_area h3::after {
	  position: absolute;
	  top: 10px;
	  right: 5px;
	  content: "＋";
	  font-size: 14px;
	  padding: 5px 10px;
	  text-align: center;
	  cursor: pointer;
	}
	.school .school_inner .right_area h3.active::after {
	  content: "－";
	}
	
	.school .school_inner .right_area ul {
	  display: none;
	  width: 100%;
	  border-radius: 5px;
	  background: #fff;
	  border: 1px solid #d55c6a;
	  margin-top: 10px;
	  padding: 15px;
	  overflow: hidden;
	}
	.school .school_inner .right_area .kanto ul{
	  border: 1px solid #d55c6a;
	}
	.school .school_inner .right_area .chubu ul{
	  border: 1px solid #de8b54;
	}
	.school .school_inner .right_area .kinki ul{
	  border: 1px solid #dfb33f;
	}
	.school .school_inner .right_area .kyushu ul{
	  border: 1px solid #a9c63f;
	}
	
	.school .school_inner .right_area ul li {
	  width: 48%;
	  float: left;
	}
	.school .school_inner .right_area ul li:last-child{
	  margin:0;
	}


	/* ------------------------------------------------------------ modal */
	  .modal_html{
	  width: 90%;
	  max-height: auto;
	  height: 400px;
	  padding: 0 5% 40px;
	  border-radius: 10px;
	}
	  .modal_html h2 {
	  }
	  .modal_inner {
	  height: 400px;
	  padding: 20px;
	}
	  .modal_html ul {
	    ;
	    padding: 0;
	  }
	  .modal_html ul li {
	    width: 100%;
	    min-height: auto;
	    margin: 0;
	    padding: 10px 0;
	  }
	  .modal_html ul li:nth-of-type(2), .modal_html ul li:nth-of-type(3) {
	    border-top: none;
	  }
	  .modal_html ul li h3 {
	    padding: 0 0 5px;
	    font-size: 15px;
	  }
	  .modal_html ul li p {
	    font-size: 12px;
	  }
	}
	
	
}