@charset "utf-8";
/* ------------------------------------------------------------ common */
body{ min-width: 1400px; margin: 0 auto; font-family: 'Noto-Sans-JP-Medium'; }
a{ position: relative; color: #000; }

.btn:after{ position: absolute; top: 50%; right: 0; transform: rotate(45deg) translate(0,-50%); content: ""; width: 10px; height: 10px; border-top: 2px solid #fe5747; border-right: 2px solid #fe5747; }

.SP{ display: none; }

#wrapper{ position: relative; }
.inner{ width: 1300px; margin: 0 auto; padding: 0 25px; box-sizing: content-box; }
.s_inner{ width: 1100px; margin: 0 auto; padding: 0 50px; box-sizing: content-box; }

.green{ background: #01e0c3; }
.purple{ background: #b667ff; }
.orange{ background: #fe5747; }

.txt_pink{ color: #e40057; }
.txt_otange{ color: #fe5747; }
.txt_puple{ color: #b667ff; }
.txt_green{ color: #07af99; }
.ast{ font-size: 14px; line-height: 200%; }

h1{ z-index: 100; position: absolute; top: 10px; left: 10px; width: 260px; height: auto; }
h1 img{ width: 100%; height: auto; }

sub{ font-size: 21px; vertical-align: text-top; }
figure{ margin: 0; }


.load-fade{ opacity: 0; visibility: hidden; transition: 2s ease; }
.load-fade.done{ opacity: 1; visibility: visible; transition: 2s ease; }


/* shine */
.shine{ position: relative; z-index: 1; width: 800px; margin: 0 auto; text-align: center; background: #e40057; border-radius: 15px; box-shadow: 15px 15px 0px 0px rgba(71,39,21,0.1); }
.shine:before{ position: absolute; content: ""; bottom: 0; left: calc(50% - 290px); width: 111px; height: 133px; background: url(../images/img_btn_r.png) center/cover no-repeat; }
.shine a{ display: block; overflow: hidden; position: relative; padding: 27px 0 27px 50px; background: url(../images/icn_hand.svg) calc(100% - 80%) 40%/30px no-repeat; }
.shine a span{ letter-spacing: 0.1em; line-height: 150%; color: #fff !important; font-size: 18px; letter-spacing: 0.1em; }
.shine a img{ width: 20px; height: auto; margin: 0 10px 0 0; }
.shine .btn:after{ right: initial; left: calc(50% + 200px); border-color: #fff; }

.shine.yellow{ background: #ffff01; }
.shine.yellow:before{ background: url(../images/img_btn_y.png) center/cover no-repeat; }
.shine.yellow a span{ color: #000!important; }
.shine.yellow .btn:after{ border-color: #000; }

/* ボタンをキラッとさせる */
.shine a::before{ content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%); -webkit-animation: shine 0.5s; animation: shine 0.5s; -webkit-animation: shine 1.5s infinite; animation: shine 1.5s infinite; }


@-webkit-keyframes shine {
  100% {
    left: 100%;
  }
}

@keyframes shine {
  100% {
    left: 100%;
  }
}


/* 装飾 */
.deco{ background: url(../images/common/deco_01L.png) left bottom/20px no-repeat, url(../images/common/deco_01R.png) right bottom/20px no-repeat; }

.dot{ position: relative; padding: 5px 0 0; }
.dot:before{ position: absolute; content: ""; top: 0; left: 50%; transform: translate(-50%,0); width: 7px; height: 7px; background: #000; border-radius: 50px; }


/* ------------------------------------------------------------ bnr */
.bnr_roop{ position: relative; }
.roop{ position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 356px; background: url(../images/roop_txt.png);background-repeat: repeat-x; background-position: 0 0; animation: bgroop 20s linear infinite; -webkit-animation: bgroop 20s linear infinite; }

@keyframes bgroop{ 
	from{ background-position: 0 0;}
	to{ background-position: -1821px 0;}
}
@-webkit-keyframes bgroop{ 
	from{ background-position: 0 0;}
	to{ background-position: -1821px 0;}
}

.bnr_roop .bnr{ padding: 50px 0; }
.bnr_roop .bnr a{ display: block; }
.bnr_roop .bnr a img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ cta */
.cta{ position: relative; padding: 120px 0 0; background: url(../images/ink_15.png) calc(50% - 600px) 60px/600px no-repeat }
.cta:after{ position: absolute; content: ""; bottom: -240px; right: 0; width: 731px; height: 616px; background: url(../images/ink_01.png) center/cover no-repeat; }
.cta img{ width: 100%; height: auto; }

.cta .w_box{ position: relative; z-index: 10; padding: 60px 100px 80px; box-sizing: border-box; background: #fff; border-radius: 30px; box-shadow: 20px 20px 0px 0px rgba(106, 106, 106, 0.3); }

.cta .w_box h3{ width: 100%; padding: 0 0 25px; }
.cta .w_box .subttl{ width: 100%; padding: 0 0 60px; }

.cta .w_box ul{ display: flex; justify-content: space-between; padding: 0 0 30px; }
.cta .w_box li{ width: 350px; position: relative; padding: 40px 0 20px; border: 2px solid #fe5747; border-radius: 15px; }
.cta .w_box li .num{ position: absolute; top: -20px; left: 50%; transform: translate(-50%,0); width: 80%; border-radius: 50px; color: #fff; background: #fe5747; font-size: 22px; letter-spacing: 0.05em; font-family: 'Corporate-Logo-Medium'; text-align: center; }
.cta .w_box li .num span{ font-size: 35px; letter-spacing: 0; font-family: 'Aviano-Sans-Bold'; }
.cta .w_box li .txt{ width: 90%; margin: 0 auto; padding: 0 0 35px; }
.cta .w_box li .item{ display: block; width: 90%; margin:  0 auto; }

.cta .w_box li a{ position: relative; width: 45%; margin: 20px auto 0; padding: 0 0 5px; font-size: 16px; letter-spacing: 0.1em; color: #fe5747; display: block; text-align: center; border-bottom: 1px solid #fe5747; text-align: left; }
.cta .w_box li a:after{ position: absolute; top: 6px; right: 0; content: ""; width: 6px; height: 6px; border-top: 2px solid #fe5747; border-right: 2px solid #fe5747; transform: rotate(45deg); }

.cta .w_box li:first-of-type{ width: 300px; }
.cta .w_box li:first-of-type .item{ position: absolute; bottom: 40px; left: 50%; transform: translate(-50%,0); width: 90%;border-radius: 10px; }
.cta .w_box li:nth-of-type(2) .item{ width: 60%; }

.cta .w_box .ast{ padding: 0 0 90px; }


/* ------------------------------------------------------------ modal */
/* モーダルウィンドウ */
.modal-window {
  display: none;
  position: fixed;
  z-index: 300;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  min-width: 600px;
  max-width: 1100px;
  height: 60%;
  min-height: 800px;
  background-color: #fff;
  border-radius: 30px;
  z-index: 11;
  padding: 70px 2rem 0;
  overflow-x: scroll;
}
/* 閉じるボタン */
.button-close {
  position: absolute;
  top: 50px;
  right: 30px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  width: 40px;
  height: auto;
}
.button-close img{
	width: 100%;
	height: auto;
}
/* オーバーレイ */
.overlay {
  display: none;
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.modal-window h3{ padding: 0 0 50px; border-bottom: 1px solid #959595; text-align: center; }
.modal-window h3 span{ display: inline-block; padding: 3px 5px; color: #fff; background: #fe5747; margin: 0 0 20px; font-size: 50px; letter-spacing: 0.05em; font-family: 'Noto-Sans-JP-Bold'; }
.modal-window dl{ padding: 50px 0 0; }
.modal-window dt{ padding: 0 0 30px; text-align: center; }
.modal-window dt span{ display: inline-block; padding: 3px 5px; background: #fffc1f; margin: 0 0 20px; font-size: 30px; letter-spacing: 0.05em; font-family: 'Noto-Sans-JP-Bold'; }
.modal-window dd{ padding: 0 0 70px; font-size: 20px; line-height: 200%; text-align: center; font-family: 'Noto-Sans-JP-Medium'; }
.modal-window dd small{ display: block; padding: 20px 0 0;  font-size: 14px; line-height: 140%; }


/* ------------------------------------------------------------ footer */
footer{ padding: 20px 0 100px; border-top: 1px solid #cccccc; text-align: center; color: #565656; }
footer .page{ padding: 0 0 7px; }
footer .page a{ padding: 0 5px; font-size: 12px; border-right: 2px solid #565656;  color: #565656; }
footer .page a:last-of-type{ border: none; }
footer .copy{ font-size: 12px; }


/* ------------------------------------------------------------ header */
header{transition: all .8s;  opacity: 0; visibility: hidden; position: fixed; z-index: 500; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: scroll; background: #fe5747; }
header .bg{ padding: 110px 0 100px; background: url(../images/bg_menu.png) center /cover; }
header ul{ padding: 30px 0 0; }
header li{ margin: 0 0 15px; padding: 20px 25px 15px; background: #fff; }
header li .en{ padding: 0 0 10px; font-size: 15px; color: #fe5747; font-family: 'Aviano-Sans-Bold'; }
header li .ja span{ display: inline-block; margin: 0 0 10px; font-size: 20px; letter-spacing: 0.05em; color: #fe5747; background: #ffff01; }

header.active{ transition: all .8s; opacity: 1; visibility: visible; }


.burger_btn{ position: fixed; z-index: 550; top: 17px; right: 10px; width: 35px; height: 35px; background: #e40057; }
.burger_btn span{ transition: all .8s; position: absolute; left: 5px; background: #fff; width: 70%; height: 2px; }
.burger_btn span:first-of-type{ top: 8px; }
.burger_btn span:nth-of-type(2){ top: 17px; }
.burger_btn span:last-of-type{ top: 26px; }

.burger_btn.active{ transition: all .8s; }
.burger_btn.active span:first-of-type{ top: 17px; transform: rotate(45deg); }
.burger_btn.active span:nth-of-type(2){ opacity: 0; }
.burger_btn.active span:last-of-type{ top: 17px; transform: rotate(-45deg); }



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



/* ------------------------------------------------------------ common */
	body{ min-width: 100%; }
	
	.inner,
	.s_inner{ width: 90%; padding: 0; }
	
	.PC{ display: none; }
	.SP{ display: block; }
	
	h1{ width: 130px; z-index: 550; }
	
	.ast{ font-size: 11px; }
	
	
	/* shine */
	.shine{ width: 100%; border-radius: 10px; box-shadow: 0px 9px 0px 0px rgba(71,39,21,0.1); }
	.shine:before{ left: calc(50% - 145px); width: 76px; height: 99px; background: url(../images/img_btn_r-sp.png) center/cover no-repeat; }
	.shine a{ display: flex; align-items: center; justify-content: center; padding: 17px 0 17px 50px; }
	.shine a img{ width: 15px; vertical-align: super; }
	.shine a span{ display: block; font-size: 13px; text-align: left; }
	
	.shine .btn:after{ left: initial; right: 25px; border-width: 2px; width: 11px; height: 11px; }
	.shine.yellow:before{ background: url(../images/img_btn_y-sp.png) center/cover no-repeat; }


/* ------------------------------------------------------------ bnr */



/* ------------------------------------------------------------ cta */
	.cta{ padding: 45px 0 0; background: url(../images/ink_15.png) calc(50% - 150px) 0/70% no-repeat; }
	.cta:after{ bottom: -220px; left: initial; right: 0; width: 416px; height: 310px; background: url(../images/ink_01-sp.png) center/cover no-repeat; }
	
	.cta .w_box{ padding: 20px 5% 40px; border-radius: 15px; box-shadow: 10px 10px 0px 0px rgba(106, 106, 106, 0.3); }
	.cta .w_box h3{ width: 90%; margin: 0 auto; }
	.cta .w_box .subttl{ width: 80%; padding: 0 0 25px; margin: 0 auto; }
	
	.cta .w_box ul{ flex-direction: column; padding: 0 0 25px; }
	.cta .w_box li{ width: 100%; margin: 0 0 40px; padding: 35px 0 25px; }
	.cta .w_box li:last-of-type{ margin: 0; }
	.cta .w_box li .num{ top: -15px; font-size: 16px; padding: 4px 0 3px; }
	.cta .w_box li .num span{ font-size: 23px; }
	.cta .w_box li .txt{ width: 80%; padding: 0 0 15px; }
	.cta .w_box li .item{ width: 200px; height: auto; }
	.cta .w_box li a{ width: 130px; font-size: 13px; }
	.cta .w_box li a:after{ border-width: 1px; }
	
	.cta .w_box li:first-of-type{ width: 100%; padding-bottom: 0; }
	.cta .w_box li:first-of-type .item{ position: initial; transform: none; width: 70%; margin-bottom: 20px;/*height: 100px; object-fit: cover; object-position: center top;*/ }
	.cta .w_box li:nth-of-type (3) .item{ width: 200px; }
	
	.cta .w_box .ast{ padding: 0 0 50px; }



/* ------------------------------------------------------------ modal */
/* モーダルウィンドウ */
	.button-close{ top: 40px; right: 0; }
	.modal-window{ width: 90%; min-width: 90%; max-width: 90%; height: 80%; min-height: 80%; padding: 80px 1rem 0; }
	.modal-window h3{ padding: 0 0 20px; }
	.modal-window h3 span{ margin: 0 0 10px; font-size: 25px; }
	.modal-window dl{ padding: 25px 0 0; }
	.modal-window dt span{ margin: 0 0 15px; font-size: 20px; }
	.modal-window dt{ padding: 0; }
	.modal-window dd{ width: 100%; padding: 0 0 35px; font-size: 13px; text-align: left; }
	.modal-window dd img{ display: block; width: 60%; height: auto; margin: 0 auto; }
	.modal-window dd small{ padding: 15px 0 0; font-size: 12px; line-height: 190%; }


/* ------------------------------------------------------------ footer */
	footer{ padding: 20px 0 70px; }
	footer .page a{ font-size: 10px; }
	footer .copy{ font-size: 12px; }




}