@charset "UTF-8";
/* CSS Document */


/* Fonts Include */
@font-face { font-family: 'Noto Serif Japanese Light'; src: url('../fonts/NotoSerifJpLight.woff2') format('woff'); font-style: normal; font-weight: 300; }
@font-face { font-family: 'Noto Serif Japanese Regular'; src: url('../fonts/NotoSerifJpRegular.woff2') format('woff'); font-style: normal; font-weight: 400; }
@font-face { font-family: 'Noto Serif Japanese Bold'; src: url('../fonts/NotoSerifJpBold.woff2') format('woff'); font-style: normal; font-weight: 700; }
.noto-serif-l { font-family: 'Noto Serif Japanese Light'; }
.noto-serif-r { font-family: 'Noto Serif Japanese Regular'; }
.noto-serif-b { font-family: 'Noto Serif Japanese Bold'; }


/* Reset */
* { zoom: 1; }
html, body, header, footer, h1, h2, h3, h4, h5, h6, p, pre, address, ul, ol, li, dl, dt, em, dd, caption, img, form
{ margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; }
html { }
img { vertical-align: bottom; width: 100%; height: auto; }
hr { display: none; }
a { color: #06C; text-decoration: none; transition: .4s; }
a:hover { color: #C00; }


/* Common */
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: 16px; line-height: 1.8em; letter-spacing: 0.06em; color: #333; -webkit-text-size-adjust: none; }

#wrap { height: 100%; min-height: 100%; margin: 0 auto; position: relative; }
body > #wrap { height: auto; min-height: 100%; }
#triangle { background: url(../images/bg.png) no-repeat top right; background-size: contain; }
.inner-box { width: min(92%,920px); margin: 0 auto; }
#pagetop { position: absolute; left: 0; top: 0; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#triangle { background-size: cover; }
	body { line-height: 1.6em; }
	#triangle { background-position-x: 30%; }
}

/* Header */
#head-column { width: 100%; position: relative; }
header { width: 100%; position: absolute; z-index: 10; }
#head-logo { display: flex; align-items: center; justify-content: flex-start; position: absolute; top: 1rem; left: 4%; z-index: 10; }
#head-logo dt { width: 140px; }
#head-logo dt a:hover { opacity: .8; }
#head-logo dd { padding-left: .8rem; }
#head-logo dd p { font-size: 1rem; line-height: 1.2; color: #049; }

#keyvisual { width: 100%; position: relative; }
#visual span { display: none; }
#visual img { mix-blend-mode: multiply; }
#keyvisual p#main-read { font-size: 2.5vw; line-height: 1.2; color: #049; position: absolute; top: 43%; left: 56%; z-index: 10; }
#regist-btn { position: absolute; top: 0; right: 4%; z-index: 20; }
#regist-btn a { color: #FFF; width: 7rem; height: 6rem; background: rgba(0,68,153,1); clip-path: polygon(0 0,100% 0,50% 100%); display: block; position: relative; }
#regist-btn a:hover { background: rgba(0,68,153,.8); }
#regist-btn a p { font-size: 1.2rem; line-height: 1.2; text-align: center; padding-top: .8rem; position: relative; }
#regist-btn a p::after { content: ""; width: .6rem; height: .6rem; background: #FFF; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); }
#movie-cube { width: 8rem; height: auto; position: absolute; right: 4%; bottom: -1.5rem; transition: .3s; }
#movie-cube:hover { bottom: -.5rem; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	header { width: 100%; height: 18svw; background: #FFF; position: relative; display: flex; align-items: center; justify-content: center; }
	#head-logo { width: 92%; position: relative; top: auto; left: auto; }
	#head-logo dt { width: 35%; }
	#head-logo dd { width: 65%; padding-left: 0; }
	#head-logo dd p { font-size: 4.5svw; line-height: 1.2; text-align: right; }
	#visual {  }
	#visual span { height: calc(100svh - 18svw); display: block; }
	#visual strong { display: none; }
	#visual img { height: 100%; object-fit: cover; object-position: center center; mix-blend-mode: normal; }
	#keyvisual p#main-read { font-size: 6.5svw; line-height: 1.2; text-align: center; width: 100%; top: 62%; left: 50%; transform: translateX(-50%); }
	#regist-btn { right: 3%; }
	#regist-btn a { width: 6.5rem; height: 5.5rem; }
	#regist-btn a p { font-size: 1.2rem; line-height: 1.2; padding-top: .5rem; }
	#regist-btn a p::after { width: .6rem; height: .7rem; bottom: -1rem; }
	#movie-cube { width: 35%; height: auto; right: auto; bottom: 1.5rem; left: 50%; transform: translateX(-50%); }
	#movie-cube:hover { bottom: 2rem; }
}


#read-column { background: rgba(0,128,255,.15); }
#read-column .inner-box { width: 92%; padding: 4rem 0 6rem 0; position: relative; }
#read-column h1 { font-size: 1.6rem; line-height: 1.2; text-align: center; color: #049; margin-bottom: 5rem; position: relative; }
#read-column h1::after { content: ""; width: 1rem; height: 1rem; background: #049; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -2.2rem; left: 50%; transform: translateX(-50%); }
#read-column p { font-size: 1rem; line-height: 2; text-align: center; padding-bottom: 2.4rem; }
#read-column p span::before { content: "\A"; white-space: pre; }
#read-column h2 { font-size: 1.6rem; line-height: 1.2; text-align: center; color: #049; width: 10rem; height: 8rem; padding-top: .8rem; background: #FFF; display: flex; justify-content: center; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); z-index: 10; }
#read-column ul { display: flex; flex-wrap: wrap; }
#read-column ul li { width: calc(100% / 3); }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#read-column .inner-box { padding: 2rem 0 2rem 0; }
	#read-column h1 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 2.4rem; }
	#read-column p { font-size: 1rem; line-height: 2; text-align: justify; padding-bottom: 1rem; }
	#read-column p span::before { content: ""; }
	#read-column h2 { font-size: 1rem; line-height: 1.2; width: 5rem; height: 3.7rem; padding-top: .3rem; }
	#read-column ul li { width: 50%; }
	#read-column ul li:first-child { width: 100%; }
}

.lightblue { background: rgba(0,128,255,.15); }

#eligibility { background: rgba(73,120,211,1); background: linear-gradient(0deg, rgba(125,209,236,1) 0%, rgba(73,120,211,1) 100%); }
#eligibility .inner-box { padding: 2rem 0 10rem 0; }
#eligibility h2 { font-size: 1.6rem; line-height: 1.2; text-align: center; color: #FFF; margin-bottom: 5rem; position: relative; }
#eligibility h2::after { content: ""; width: 1rem; height: 1rem; background: #FFF; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); }
#eligibility ul { display: flex; align-items: stretch; justify-content: space-between; }
#eligibility ul li { width: 32%; height: 0; padding-top: 32%; border: solid 1px #FFF; background: rgba(90,95,197,1); background: linear-gradient(0deg, rgba(106,195,237,1) 0%, rgba(90,95,197,1) 80%); position: relative; }
#eligibility ul li h3 { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #049; width: 3rem; height: 2.3rem; padding-top: .1rem; background: #FFF; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); }
#eligibility ul li p { font-size: min(1.4rem,2.2vw); line-height: 2.2; text-align: center; color: #FFF; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#eligibility ul li p span::before { content: "\A"; white-space: pre; }
#eligibility ul li p i { font-style: normal; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#eligibility .inner-box { padding: 2rem 0 4rem 0; }
	#eligibility h2 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 3rem; }
	#eligibility ul { flex-direction: column; }
	#eligibility ul li { width: 100%; min-height: 4.8rem; margin-bottom: 1rem; padding-top: 0; display: flex; align-items: center; }
	#eligibility ul li h3 { font-size: 1rem; line-height: 1.2; width: 1.2rem; height: 2.6rem; padding: 0 .3rem 0 .3rem; display: flex; align-items: center; clip-path: polygon(0 0,100% 50%,0 100%); top: 50%; left: 0; transform: translate(-.3rem,-50%); }
	#eligibility ul li p { font-size: 1rem; line-height: 1.6; text-align: justify; padding: 1.4rem 1rem 1.4rem 2rem; position: relative; top: auto; left: auto; transform: translate(0,0); }
	#eligibility ul li p span::before { content: ""; }
	#eligibility ul li p i::before { content: "\A"; white-space: pre; }
}


#application {}
#application .inner-box { padding-bottom: 6rem; }
#app-box { margin-top: -5rem; padding: 2rem 0 5rem 0; background: #FFF; position: relative; }
#app-box h2 { font-size: 1.6rem; line-height: 1.2; text-align: center; color: #049; margin-bottom: 4rem; position: relative; }
#app-box h2::after { content: ""; width: 1rem; height: 1rem; background: #049; clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); }
#app-box ul { width: min(94%,820px); margin: 0 auto; border-top: solid 1px #80A3CD; }
#app-box ul li { font-size: .9rem; line-height: 2; text-align: justify; padding: 1.5rem 0 1.5rem 6rem; border-bottom: solid 1px #80A3CD; position: relative; }
#app-box ul li h3 { text-align-last: justify; color: #049; width: 4.4em; position: absolute; left: 0; }
#app-box ul li ul.sub-list { width: 100%; border-top: none; }
#app-box ul li ul.sub-list li { padding: 0 0 .2rem 3rem; border-bottom: none; }
#app-box ul li ul.sub-list li:last-child { padding-bottom: 0; }
#app-box ul li ul.sub-list li h4 { position: absolute; left: 0; }
#app-box ul li ul.attention { width: 100%; padding-top: .2rem; border-top: none; }
#app-box ul li ul.attention li { font-size: .9rem; line-height: 1.6; text-indent: -1em; padding: 0 0 .2em 1em; border-bottom: none; }
#app-box ul li ul.attention li:last-child { padding-bottom: 0; }
#app-box .link-btn { width: min(94%,500px); position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); }
#app-box .link-btn a { padding: 1rem 5rem; border-radius: 3rem; display: block; overflow: hidden; position: relative; }
#app-box .link-btn a::before { content: ""; width: 200%; height: 100%; background: #5A5FC5; background: linear-gradient(90deg, #5A5FC5 50%, #6AC3ED 80%); position: absolute; top: 0; left: -100%; z-index: -1; transition: .3s; }
#app-box .link-btn a:hover::before { left: 0%; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#application .inner-box { padding-bottom: 4rem; }
	#app-box { margin-top: -3rem; padding: 1rem 0 3rem 0; }
	#app-box h2 { font-size: 1.4rem; line-height: 1.2; }
	#app-box ul li { padding: .8rem .8rem; }
	#app-box ul li h3 { text-align-last: left; width: auto; padding-bottom: .2rem; position: relative; }
	#app-box .link-btn a { padding: 1rem 2rem; }
}


/* Footer */
footer { background: #FFF; }
#foot-img { display: flex; flex-wrap: wrap; }
#foot-img li { width: calc(100% / 3); }
footer dl { width: 92%; margin: 0 auto; padding: 1rem 0; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; }
footer dl dt { font-size: .8rem; line-height: 1.2; }
footer dl dt a { color: #333; }
footer dl dt a:hover { color: #333; text-decoration: underline; }
footer dl dd ul { display: flex; }
footer dl dd ul li { font-size: .9rem; line-height: 1.2; padding-right: 1rem; }
footer dl dd ul li a { color: #333; padding-right: .7rem; display: inline-block; position: relative; }
footer dl dd ul li a::after { content: ""; width: .5rem; height: .5rem; border-top: solid 1px #333; border-right: solid 1px #333; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(45deg); transition: .3s; }
footer dl dd ul li a:hover { color: #47D; }
footer dl dd ul li a:hover::after { border-color: #47D; }
@media only screen and (max-width: 768px) {
	footer dl { flex-direction: column-reverse; }
	footer dl dd { padding-bottom: .5rem; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
	#foot-img li { width: 50%	; }
	#foot-img li:first-child { width: 100%; }
	footer dl dt { font-size: .7rem; line-height: 1.2; }
	footer dl dd { width: 100%; padding-bottom: .7rem; }
	footer dl dd ul { flex-direction: column; }
	footer dl dd ul li { font-size: 1rem; line-height: 1.2; padding: 0 0 .3rem 0; }
	footer dl dd ul li a { text-align: center; width: 100%; padding: .5rem 0; border-radius: .5rem; background: #CCC; display: block; }
	footer dl dd ul li a::after { width: 0; height: 0; border: none; }
	footer dl dd ul li a:hover { color: #FFF; background: #6AC3ED; }
}