@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');


/*---------------------------------------------------------------------------------------
	Overall settings
----------------------------------------------------------------------------------------*/

body{ font-family: 'Noto Sans JP', sans-serif; color: #111; text-align: center;}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
a{ color: #111; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration:none;}
.underline{ text-decoration: underline;}
/* font */
.light{ font-weight: 300!important;}
.regular{ font-weight: 400!important;}
.medium{ font-weight: 500!important;}
/* color */
.white{ color: #fff;}
.red{ color: #e60012;}
/* f-size */
.f10{ font-size: 1rem;}
.f11{ font-size: 1.1rem;}
.f12{ font-size: 1.2rem;}
.f13{ font-size: 1.3rem;}
.f14{ font-size: 1.4rem;}
.f15{ font-size: 1.5rem;}
.f16{ font-size: 1.6rem;}
.f17{ font-size: 1.7rem;}
.f18{ font-size: 1.8rem;}
.f19{ font-size: 1.9rem;}
.f20{ font-size: 2rem;}
.f24{ font-size: 2.4rem;}
.f36{ font-size: 3.6rem;}
/* move */
.move.move-active.FadeUp{ animation: FadeUp 1s; opacity: 0;}
@keyframes FadeUp {
	0% { transform: translateY(60px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
.move.move-active.FadeLeft{ animation: FadeLeft 1s; opacity: 0;}
@keyframes FadeLeft {
	0% { transform: translateX(60px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
.move.move-active.FadeRight{ animation: FadeRight 1s;}
@keyframes FadeRight {
	0% { transform: translateX(-60px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
.move.move-active:after{ animation: wideanim 1s;}
@keyframes wideanim{
	0% { width: 0;}
	100% { width: 100%;}
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	body{ font-size: 1.4rem;}
	a:hover{ opacity: 1;}
	/* f-size */
	.f24{ font-size: 1.8rem;}
	.f36{ font-size: 2.6rem;}
}



/*---------------------------------------------------------------------------------------
	header
----------------------------------------------------------------------------------------*/

header{ display: flex; position: fixed; left: 0; top: 0; width: 100%; height: 100px; background: rgba(0,0,0,.6); z-index: 999;}
header .logo{ display: flex; justify-content: flex-start; width: 40%; min-width: 480px; position: relative; z-index: 9999;}
header .logo a{ width: 50%; min-width: 250px; display: flex; align-items: center; justify-content: center; background: #e60012;}
header .logo a:hover{ opacity: 1;}
header .logo span{ width: 230px; margin-left: 30px; display: flex; align-items: center; justify-content: center;}
header .spmenu{ display: none;}
header nav{ flex: 1; padding-right: 3%; font-weight: 500; text-align: right; position: relative; z-index: 999;}
header nav ul{ display: inline-block;}
header nav ul li{ display: inline-block; line-height: 100px;}
header nav ul li:not(:last-child){ margin-right: 3em;}
header nav ul li a{ color: #fff; position: relative;}
header nav ul li a:hover{ opacity: 1;}
header nav ul li > a:before{ display: inline-block; content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: #e60012; transition: all .4s; transform-origin: left top; transform: scale(0,0);}
header nav ul li.active > a:before,
header nav ul li:hover > a:before{ transform: scale(1,1);}
header nav ul li:last-child a{ display: inline-block; width: 150px; color: #fff; line-height: 50px; text-align: center; background: #e60012;}
header nav ul li:last-child a:before{ display: none!important;}
header nav ul li:last-child a:hover{ opacity: .7;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 1350px) {
	header nav ul li:not(:last-child){ margin-right: 1em;}
	header nav ul li:last-child a{ width: 110px;}
	header .logo{ width: 30%; min-width: 440px;}
	header .logo span{ width: 190px; margin-left: 20px;}
}
@media screen and (max-width: 1100px) {
	header{ display: block; height: 60px;}
	header .logo{ width: 290px; min-width: auto; height: 60px;}
	header .logo a{ width: 160px; min-width: auto; padding: 0 10px;}
	header .logo span{ width: 130px; min-width: auto; margin-left: 10px;}
	header .spmenu{ display: block; position: absolute; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; z-index: 9999;}
	header .spmenu span{ display: inline-block; position: absolute; left: 10px; width: 40px; height: 4px; background: #fff; transition: all .3s;}
	header .spmenu span:nth-child(1){ top: 18px;}
	header .spmenu span:nth-child(2){ top: 28px;}
	header .spmenu span:nth-child(3){ top: 38px;}
	header.open .spmenu span{ background: #000!important;}
	header.open .spmenu span:nth-child(1){ transform: translateY(10px) rotate(45deg);}
	header.open .spmenu span:nth-child(2){ opacity: 0;}
	header.open .spmenu span:nth-child(3){ transform: translateY(-10px) rotate(-45deg);}
	header nav{ flex: none; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; padding: 60px 0 0; font-size: 1.6rem; text-align: center; background: #fff;}
	header nav ul{ display: block; margin-bottom: 20px; border-top: 1px solid #ccc;}
	header nav ul li{ display: block; padding: 0 1em; line-height: 50px; text-align: left; border-bottom: 1px solid #ccc; position: relative;}
	header nav ul li:not(:last-child){ margin-right: 0;}
	header nav ul li a{ color: #000!important;}
	header nav ul li > a:before{ display: none;}
	header nav ul li:last-child{ padding: 20px 0; text-align: center; border-bottom: none;}
	header nav ul li:last-child a{ display: inline-block; width: 200px; color: #fff!important;}
}
@media screen and (max-width: 350px) {
	header .logo{ width: 260px; min-width: auto; height: 60px;}
	header .logo a{ width: 130px; min-width: auto; padding: 0 10px;}
	header .logo span{ width: 130px; min-width: auto; margin-left: 10px;}
}



/*---------------------------------------------------------------------------------------
	section
----------------------------------------------------------------------------------------*/

section{ margin-top: 100px; position: relative;}
section:before{ display: block; content: ""; position: absolute; left: 0; top: -100px; width: 100%; height: 100px; background: #4d4d4d; z-index: -1;}
section.top{ margin-top: 0!important; position: static;}
section.top:before{ display: none!important;}
.wrap{ clear: both; box-sizing: content-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%;}
.wrap-w{ clear: both; box-sizing: content-box; max-width: 1800px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%;}
/* ttl */
.pagettl{ display: flex; flex-wrap: wrap; align-items: center; align-content: center; line-height: 1.3; height: 500px;}
.pagettl.form{ background: url(../img/form-pagettl.jpg) center / cover no-repeat;}
.pagettl.outline{ background: url(../img/outline-pagettl.jpg) center / cover no-repeat;}
.pagettl span{ display: block; margin-bottom: .5em; width: 100%; color: #e60012; font-size: 2.4rem; font-weight: 500;}
.pagettl strong{ display: block; width: 100%; color: #fff; font-size: 4.8rem; font-weight: 500;}
.pagettl.noimg{ height: 300px; border-top: 10px solid #e6e6e6;}
.pagettl.noimg strong{ color: #000;}
.ttl1{ padding-bottom: 70px; position: relative;}
.ttl1:before{ display: inline-block; content: ""; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 150px 200px 0 200px; border-color: #e60013 transparent transparent transparent;}
.ttl1 span{ display: inline-block; padding: 0 0 .5em .6em; color: #e60012; font-size: 2.4rem; font-weight: 500; letter-spacing: .6em;}
.ttl1 strong{ position: absolute; left: 50%; transform: translateX(-50%); padding-top: .5em; color: #fff; font-size: 2.1rem; font-weight: 500;}
.ttl2{ font-size: 3.6rem; font-weight: normal; text-align: center; padding-bottom: .8em; border-bottom: 1px solid #e60012;}
.read{ color: #e60012; font-size: 3.6rem; font-weight: 500; line-height: 1.4; text-align: left;}
/* btn */
.btn1{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 500px; margin: 0 auto; padding: .5em 1em; font-size: 1.8rem; line-height: 1.4; border: 1px solid #000; border-radius: 100px;}
.btn1:before{ display: inline-block; content: ""; margin-right: 1em; width: 17px; height: 12px; background: url("../img/arrow-left.svg") no-repeat;}
.btn1.noarrow:before{ display: none;}
.btn1:hover{ opacity: 1; background: #ddd;}
.btnback{ line-height: 50px;}
.btnback:before{ display: inline-block; content: "＜"; width: 50px; color: #fff; font-size: 2.1rem; text-align: center; background: #e60012; margin-right: 1.5em;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 1100px) {
	section{ margin-top: 60px;}
	section:before{ top: -60px; height: 60px;}
}
@media screen and (max-width: 768px) {
	/* ttl */
	.pagettl{ height: 200px;}
	.pagettl span{ font-size: 1.8rem;}
	.pagettl strong{ font-size: 2.8rem;}
	.pagettl.noimg{ height: auto; border-top: 5px solid #e6e6e6; padding: 40px 0;}
	.ttl1{ padding-bottom: 70px;}
	.ttl1:before{ bottom: -40px; border-width: 112px 150px 0 150px;}
	.ttl1 span{ font-size: 2rem;}
	.ttl1 strong{ font-size: 1.6rem;}
	.ttl2{ font-size: 2.4rem; line-height: 1.4;}
	.read{ font-size: 2.6rem;}
}



/*---------------------------------------------------------------------------------------
	footer
----------------------------------------------------------------------------------------*/

footer .about{ padding: 30px 5%; line-height: 40px; background: #f2f2f2;}
footer .about p{ display: inline-block; margin-right: 2em;}
footer .about p a{ pointer-events: none;}
footer .about > a{ display: inline-block; width: 200px; line-height: 40px; border: 1px solid #ccc;}
footer .about > a:hover{ opacity: 1; background: #ddd;}
footer .copy{ color: #fff; line-height: 80px; background: #333;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	footer .about{ padding: 30px 5%; line-height: 1.63;}
	footer .about p{ display: block; margin-right: 0; margin-bottom: 1em;}
	footer .about p a{ pointer-events: auto;}
	footer .copy{ line-height: 60px;}
}



















































/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Sub-page settings
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------
	/
----------------------------------------------------------------------------------------*/

.top1{ padding-top: 56.25vw; position: relative;}
.top1 #video-area{ position: absolute; z-index: -1; top: 0; right:0; left:0; bottom:0; width: 100%; overflow: hidden;}
.top1 #video-area h2{ position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);}
.top1 #video-area video{ position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); width: 177.7777777777778vw; height: 56.25vw;}
.topbg{ padding-top: 40px; background: url("../img/topbg.jpg") center top / cover no-repeat;}
.top2{ padding: 50px; background: rgba(255,255,255,.6);}
.top2 h2{ margin-bottom: 40px;}
.top2wrap{ display: flex; flex-direction: row-reverse; justify-content: space-between;}
.top2wrap div{ width: 54.7%; line-height: 2.2; text-align: left;}
.top2wrap div span{ display: block; text-align: right;}
.top2wrap figure{ width: 41%;}
.top3{ padding: 100px 0 150px;}
.top3 p:nth-child(1){ margin-bottom: 40px;}
.top3 p a{ display: block; height: 430px; border-radius: 30px; position: relative;}
.top3 p:nth-child(1) a{ background: url(../img/top3-img1.jpg) bottom center / cover no-repeat;}
.top3 p:nth-child(2) a{ background: url(../img/top3-img2.jpg) bottom center / cover no-repeat;}
.top3 p a span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 400px; padding: .7em .5em; color: #fff; font-size: 3rem; font-weight: 500; line-height: 1.3; background: rgba(0,0,0,.5); border: 1px solid #fff;}
.top3 p a span:before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; background: #e60012;}
.entrybtn a{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; height: 320px; background: url(../img/entrybtn-bg.jpg) center / cover no-repeat;}
.entrybtn a p{ width: 100%; margin-bottom: 15px;}
.entrybtn a span{ display: inline-block; width: 300px; line-height: 50px; color: #2E3192; font-weight: 500; background: #fff; border-radius: 100px;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.top1{ margin-top: 60px; padding-top: 0; position: relative;}
	.top2{ padding: 50px 5%;}
	.top2 h2{ margin-bottom: 30px;}
	.top2 h2 img{ width: 150px;}
	.top2wrap{ display: block;}
	.top2wrap div{ width: auto; margin-bottom: 2em;}
	.top2wrap figure{ width: auto;}
	.top3{ padding: 50px 0 80px;}
	.top3 p:nth-child(1){ margin-bottom: 20px;}
	.top3 p a{ height: 200px;}
	.top3 p a span{ width: 250px; padding: 1em .5em; font-size: 1.8rem;}
	.top3 p a span:before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; background: #e60012;}
	.entrybtn a{ height: 200px;}
	.entrybtn a p img{ width: 180px;}
}



/*---------------------------------------------------------------------------------------
	interview/
----------------------------------------------------------------------------------------*/

.interview1{ padding-bottom: 100px;}
.interview1wrap{ display: flex; flex-wrap: wrap; animation: FadeUp 1s forwards; opacity: 0;}
.interview1wrap article{ width: 25%; padding: 40px 1% 50px; line-height: 1.4; text-align: left; position: relative;}
.interview1wrap article:before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #e60012;}
.interview1wrap article figure{ margin-bottom: 20px;}
.interview2{ padding-top: 150px; border-top: 10px solid #e6e6e6; position: relative;}
.interview2:before{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 400px); background: #e60012; z-index: -1;}
.interview2 .prof{ position: relative;}
.interview2 .prof figure{ height: 500px; background-position: center!important; background-size: cover!important;}
.interview2 .prof div{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 50%; max-width: 500px; padding: 40px 4%; text-align: left; background: rgba(255,255,255,.8);}
.interview2 .prof div.right{ left: auto; right: 0;}
.interview2 .prof div img{ animation: FadeUp 1s forwards; opacity: 0;}
.interview2 .lead{ padding: 40px 0; font-weight: normal; text-align: left;}
.interview3{ padding-top: 150px; padding-bottom: 100px;}
.interview3 article{ text-align: left; overflow: hidden;}
.interview3 article:not(:last-child){ margin-bottom: 100px;}
.interview3 h2{ clear: both; display: flex; margin-bottom: 30px; font-size: 1.8rem; font-weight: 500; line-height: 1.4; padding: .3em 1em; background: #f2f2f2; border-top: 1px solid #e60012; border-left: 5px solid #e60012;}
.interview3 h3{ color: #e60012; font-size: 2.4rem; font-weight: 500; line-height: 1.4; margin-bottom: 1em;}
.interview3 figure{ float: right; width: 50%; margin: 0 0 20px 3%;}
.interview3 .btn{ display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 900px) {
	.interview1wrap article{ width: 33.3333%;}
}
@media screen and (max-width: 768px) {
	.interview1{ padding-bottom: 50px;}
	.interview1wrap article{ width: 50%; padding: 20px 2% 30px;}
	.interview1wrap article .name{ font-size: 2rem;}
	.interview2{ padding-top: 50px;}
	.interview2:before{ height: calc(100% - 50px - 15%);}
	.interview2 .prof{}
	.interview2 .prof figure{ height: auto; padding-top: 40%;}
	.interview2 .prof figure.spright{ background-position: right center!important;}
	.interview2 .prof figure.spleft{ background-position: left center!important;}
	.interview2 .prof div{ position: static; transform: none; width: auto; max-width: inherit; padding: 20px 5%; font-size: 1.6rem;}
	.interview2 .prof div img{ width: 100%; max-width: 200px;}
	.interview2 .prof div img.maxw260{ max-width: 260px;}
	.interview2 .lead{ padding: 30px 0;}
	.interview3{ padding-top: 60px; padding-bottom: 50px; border-top: 5px solid #e6e6e6;}
	.interview3 article:not(:last-child){ margin-bottom: 50px;}
	.interview3 h2{ clear: both; display: flex; border-top: 1px solid #e60012; margin-bottom: 20px;}
	.interview3 h2 span{ width: 6.5em;}
	.interview3 h3{ font-size: 2rem;}
	.interview3 figure{ float: none; width: auto; margin: 0 0 30px;}
	.interview3 .btn{ display: block;}
	.interview3 .btn span{ display: block; text-align: center; margin-bottom: 1em;}
}



/*---------------------------------------------------------------------------------------
	outline/
----------------------------------------------------------------------------------------*/

.outline1{ padding-top: 100px; padding-bottom: 100px;}
.outline1 dl{ display: flex; padding: 10px 0; text-align: left; border-bottom: 1px solid #e60012;}
.outline1 dl:first-of-type{ border-top: 1px solid #e60012;}
.outline1 dl dt{ width: 200px; padding: 1em 1.5em; background: #f2f2f2;}
.outline1 dl dd{ flex: 1; padding: 1em 0 1em 1.5em;}
.outline2 li{ display: table; width: 100%; padding: 15px 15px 15px 10px; border: 1px solid #e60012; position: relative;}
.outline2 li:not(:last-child){ margin-bottom: 50px;}
.outline2 li:not(:last-child):after{ display: inline-block; content: ""; position: absolute; left: 50%; top: 100%; width: 40px; height: 50px; transform: translateX(-50%); background: url(../img/icon-flow.svg) center no-repeat;}
.outline2 li strong{ display: table-cell; vertical-align: middle; width: 100px; color: #e60012; font-size: 1.4rem; letter-spacing: .05em; font-weight: 500; line-height: 1; border-right: 1px solid #e60012;}
.outline2 li strong span{ display: block; font-size: 4.8rem;}
.outline2 li img{ float: right; width: 37.6%; margin-left: 30px;}
.outline2 li div{ display: flex; line-height: 1.8;}
.outline2 li h3{ width: 200px; margin-left: 30px; padding: .5em 0 1em; font-size: 2.4rem; font-weight: 500; text-align: left;}
.outline2 li p{ flex: 1; margin-left: 30px; text-align: left; padding: 1em 1.5em; background: #f0f0f0; overflow: hidden;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	.outline1{ padding-top: 50px; padding-bottom: 50px;}
	.outline1 dl{ display: block;}
	.outline1 dl dt{ width: auto; padding: .5em 1em; font-size: 1.6rem!important;}
	.outline1 dl dd{ padding: .5em 0 0;}
	.outline2 li{ display: block; padding: 15px;}
	.outline2 li strong{ display: block; width: auto; border-right: none; border-bottom: 1px solid #e60012; padding-bottom: 10px; margin: 0 auto;}
	.outline2 li strong span{ display: block; font-size: 3.5rem;}
	.outline2 li img{ float: right; width: 37.6%; margin-left: 30px;}
	.outline2 li div{ display: block;}
	.outline2 li h3{ width: auto; margin-left: 0; padding: .5em 0; font-size: 1.8rem; text-align: center;}
	.outline2 li p{ margin-left: 0; line-height: 1.5;}
}



/*---------------------------------------------------------------------------------------
	form/
----------------------------------------------------------------------------------------*/

.form1{ padding-top: 100px; padding-bottom: 100px;}
.form1 dl{ display: flex; padding: 10px 0; text-align: left; border-bottom: 1px solid #e60012;}
.form1 dl:first-of-type{ border-top: 1px solid #e60012;}
.form1 dl:last-of-type{ margin-bottom: 50px;}
.form1 dl dt{ width: 300px; padding: 1em 1.5em; background: #f2f2f2;}
.form1 dl dd{ flex: 1; padding: .7em 0 .7em 1.5em;}
.form1 dl dd input[type="text"]{ width: 500px; height: 40px; line-height: 40px; border: 1px solid #b3b3b3;}
.form1 dl dd input.zipcode{ width: 200px;}
.form1 dl dd input.tel{ width: 300px;}
.form1 dl dd input.max{ width: 100%;}
.form1 dl dd select{ appearance: none; padding: 0 3em 0 1em; border: 1px solid #ccc; background: url(../img/icon-select.svg) right 1em center no-repeat; position: relative;}
.form1 dl dd textarea{ height: 200px; border: 1px solid #b3b3b3;}
.form1 dl dd .entryseat{ display: flex; justify-content: space-between;}
.form1 dl dd .entryseat .select label{ display: inline-block; padding: 0 2em; margin-right: 1em; border: 1px solid #b3b3b3; border-radius: 5px; cursor: pointer;}
.form1 dl dd .entryseat .select input[type="file"]{ display: none;}
.form1 .agree label{ display: inline-block; padding: 1em 1.5em; background: #f2f2f2;}
.form1 .agree label input{ width: 20px; height: 20px; margin-bottom: .3em!important;}
.form1 .btn input{ display: inline-block; width: 100%; max-width: 500px; line-height: 50px; font-size: 1.8rem; border: 1px solid #000; border-radius: 100px;}
.form1 .btn input:hover{ color: #fff; background: #333; opacity: 1;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 1050px) {
	.form1 dl dd .entryseat{ display: block;}
	.form1 dl dd .entryseat .select{ margin-bottom: 1em;}
}
@media screen and (max-width: 768px) {
	.form1{ padding-top: 50px; padding-bottom: 50px;}
	.form1 dl{ display: block;}
	.form1 dl:last-of-type{ margin-bottom: 50px;}
	.form1 dl dt{ width: auto; padding: .5em 1em; font-size: 1.6rem!important;}
	.form1 dl dd{ padding: .5em 0 0;}
	.form1 dl dd input{ width: 100%!important;}
	.form1 dl dd select{ width: 100%;}
}