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


/* Fonts Include */
@font-face { font-family: 'Noto Sans Japanese Regular'; src: url('../fonts/NotoSansJpRegular.woff2') format('woff'); font-style: normal; font-weight: 400; }
@font-face { font-family: 'Noto Sans Japanese Midium'; src: url('../fonts/NotoSansJpMidium.woff2') format('woff'); font-style: normal; font-weight: 500; }
@font-face { font-family: 'Noto Sans Japanese Bold'; src: url('../fonts/NotoSansJpBold.woff2') format('woff'); font-style: normal; font-weight: 700; }
.noto-r { font-family: 'Noto Sans Japanese Regular'; }
.noto-m { font-family: 'Noto Sans Japanese Midium'; }
.noto-b { font-family: 'Noto Sans Japanese Bold'; }


/* Reset */
*, ::before, ::after { box-sizing: border-box; }
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 { line-sizing: normal; }
body { margin: 0; }
[hidden] { display: none; }
pre { white-space: pre-wrap; }
hr { color: inherit; height: 0; border-style: solid; border-width: 1px 0 0; overflow: visible; }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; width: 100%; display: block; }
audio:not([controls]) { display:none; }
picture { display: contents; }
source { display: none; }
img, svg, video, canvas { height: auto; }
audio { width: 100%; }
img { border-style: none; }
svg { overflow: hidden; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }
[type='checkbox'], [type='radio'] { box-sizing: border-box; padding: 0; }


/* 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; color: #333; -webkit-text-size-adjust: none; position: relative; }
body.active { overflow: hidden; }
b, strong, .bold { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif; }
a { color: #06C; text-decoration: none; transition: .4s; }
a:hover { color: #F63; }
#pagetop { position: absolute; left: 0; top: 0; }
.clearfix { zoom: 1; overflow: hidden; }
.clearfix:after { content: ""; display: block; clear: both; }
#future-map { padding-top: 80px; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	#future-map { padding-top: 70px; }
}


/* Header */
header { width: 100%; background: #FFF; box-shadow: 0 0 1rem rgba(0,0,0,.5); position: fixed; z-index: 100; }
#head-box { width: 92%; height: 80px; margin: 0 auto; display: flex; align-items: center; }
#head-logo { width: min(75%,340px); height: auto; }
#head-logo a:hover img { opacity: .8; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	#head-box { height: 70px; }
}

/* Humbarger */
.humbarger-btn { position: fixed; right: 4%; display: block; z-index: 100; cursor: pointer; }
.humbarger-btn ul { width: 40px; height: 32px; position: relative; box-sizing: border-box; }
.humbarger-btn ul li { width: 100%; height: 4px; background: #323232; position: absolute; top: 50%; left: 0; box-sizing: border-box; transition: .4s; }
.humbarger-btn ul li:first-child { transform: translateY(-400%);  }
.humbarger-btn ul li:nth-child(2n) { transform: translateY(-50%); }
.humbarger-btn ul li:last-child { transform: translateY(300%); }
.humbarger-btn.active ul li:first-child { background: #FFF; transform: rotate(45deg); }
.humbarger-btn.active ul li:nth-child(2n) { opacity: 0; }
.humbarger-btn.active ul li:last-child { background: #FFF; transform: rotate(-45deg); }
.humbarger-menu { width: 100vw; height: 400px; background: rgba(50,50,50,.9); box-shadow: 0 0 .5rem rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; right: 0; transform: translateY(-450px); transition: all .3s linear; z-index: 99; }
.humbarger-menu.active { transform: translateY(0); }
.humbarger-menu ul li a img { transition: .3s; }
.humbarger-menu ul.menu-top { position: absolute; top: 1rem; left: 4%; }
.humbarger-menu ul.menu-top li { line-height: 1.4; padding-top: .2rem; }
.humbarger-menu ul.menu-top li a { color: #FFF; display: flex; align-items: center; }
.humbarger-menu ul.menu-top li a::before { content: ""; width: .6rem; height: .6rem; margin-right: .5rem; border-top: solid 2px #FFF; border-left: solid 2px #FFF; transform: rotate(-45deg); transition: .3s; }
.humbarger-menu ul.menu-top li a:hover { transform: translateX(-.5rem); }
.humbarger-menu ul.gmenu { width: min(92%,1100px); padding-top: 2rem; display: flex; justify-content: space-between; }
.humbarger-menu ul.gmenu li { width: 32%; }
.humbarger-menu ul.gmenu li a { padding: 2px; background: #FFF; display: block; }
.humbarger-menu ul.gmenu li a:hover img { opacity: .8; }
#overlay { display: none; pointer-events: none; }
#overlay.active { width: 100%; height: 100vh; background: rgba(0,0,0,.6); display: block; position: fixed; top: 0; left: 0; z-index: 98; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	.humbarger-menu { height: 100svh; transform: translateY(-105svh); }
	.humbarger-menu ul.gmenu { width: 75%; padding-top: 10%; flex-direction: column; }
	.humbarger-menu ul.gmenu li { width: 100%; margin-bottom: 1rem; }
}


/* Footer */
footer { padding: 1rem 0 3rem 0; }
footer div { width: min(70%,400px); margin: 0 auto; }
footer div a img { transition: .4s; }
footer div a:hover img { opacity: .8; }
footer div a p { font-size: 1.2rem; line-height: 1.2; text-align: center; color: #323232; padding-top: .2rem; }
footer div a:hover p { color: #666; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	footer { padding: 0 0 5rem 0; }
	footer div a p { font-size: 1rem; line-height: 1.2; }
}


/* PageTop Button */
#pagetop-btn { width: 60px; height: 60px; position: fixed; bottom: 10px; right: 10px; z-index: 50; }
#pagetop-btn.active-menu { z-index: -1; }
#pagetop-btn img { width: 100%; height: auto; }
#pagetop-btn a img { transition: .2s; }
#pagetop-btn a:hover img { transform: scale(1.05); }

#back-btn { font-size: 1rem; line-height: 1.2; position: fixed; bottom: 10px; left: 0; z-index: 50; }
#back-btn a { color: #FFF; padding: .6rem 1rem .5rem 3rem; border-radius: 0 1.5rem 1.5rem 0; background: rgba(50,50,50,.7); display: block; position: relative; transition: .4s; }
#back-btn a::before { content: ""; width: 1.4rem; height: 1.4rem; border: solid 2px #FFF; border-radius: 50%; position: absolute; top: 50%; left: 1.2rem; transform: translateY(-50%); transition: .4s; }
#back-btn a::after { content: ""; width: .6rem; height: .8rem; background: #FFF; clip-path: polygon(0 50%,100% 0,100% 100%); position: absolute; top: 50%; left: 1.5rem; transform: translateY(-50%); transition: .4s; }
#back-btn a:hover { padding-left: 2.2rem; background: rgba(50,50,50,.9); }
#back-btn a:hover::before { left: .4rem; }
#back-btn a:hover::after { left: .7rem; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	#pagetop-btn { width: 45px; height: 45px; right: 0; }
}

/* Animation */
.sa { opacity: 0; transition: all .5s ease; }
.sa.show { opacity: 1; transform: none; }
.sa--lr { transform: translate(-100px, 0); }
.sa--rl { transform: translate(100px, 0); }
.sa--up { transform: translate(0, 100px); }
.sa--down { transform: translate(0, -100px); }
.sa--scaleUp { transform: scale(.5); }
.sa--scaleDown { transform: scale(1.5); }
.sa--rotateL { transform: rotate(180deg); }
.sa--rotateR { transform: rotate(-180deg); }


/* Contents */
#future-map, .interview { padding-top: 80px; }
.inner-box { width: min(92%,1100px); margin: 0 auto; }
.pc-view { display: block; visibility: visible; }
.sp-view { display: none; visibility: hidden; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	#future-map, .interview { padding-top: 70px; }
	.pc-view { display: none; visibility: hidden; }
	.sp-view { display: block; visibility: visible; }
}


/* Index */
#index-head { height: min(40vw,540px); background: #EBEBEB; background: linear-gradient(0deg,#EBEBEB 42%,#FFF 42%); position: relative; }
#index-head .title-box { width: min(92%,1100px); margin: 0 auto; position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; }
#index-head .title-box h1 { width: min(50%,550px); }
#index-head .img-box { width: 55%; height: 100%; background: #FFF; position: absolute; top: 0; right: 0; }
#index-head .img-box ul { height: 100%; position: relative; }
#index-head .img-box ul li:first-child { width: calc(50% - 1px); height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; overflow: hidden; }
#index-head .img-box ul li:first-child img { width: auto; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
#index-head .img-box ul li:nth-child(2) { width: 50%; height: calc(50% - 1px); object-fit: contain; position: absolute; top: 0; left: 50%; overflow: hidden; }
#index-head .img-box ul li:last-child { width: 50%; height: min(100%,400px); object-fit: contain; position: absolute; top: 50%; left: 50%; overflow: hidden; }
#index-head .img-box ul li:last-child img { transform: scale(1.2); }
@media screen and (max-width: 520px) and (orientation: portrait) {
	#index-head { height: auto; background: none; }
	#index-head .title-box { padding: 1rem 0 2rem 0; position: relative; bottom: auto; left: auto; transform: translateX(0); }
	#index-head .title-box h1 { width: 100%; }
	#index-head .img-box { width: 100%; height: auto; aspect-ratio: 1 / .7; position: relative; }
	#index-head .img-box ul li:nth-child(2) { width: calc(50% - 1px); height: calc(50% - 1px); right: 0; left: auto; }
	#index-head .img-box ul li:last-child { width: calc(50% - 1px); height: calc(50% - 1px); top: auto; right: 0; bottom: 0; left: auto; }
	#index-head .img-box ul li:last-child img { transform: translateY(-10%) scale(1); }
}

#index-column { margin-bottom: min(20vw,15rem); padding-top: 2rem; background: #EBEBEB; background: linear-gradient(90deg,#EBEBEB 65%,#FFF 65%); }
#index-column .read-box { width: 62%; }
#index-column h2 { font-size: 1.4rem; line-height: 1.4; text-align: justify; font-weight: bold; color: #323232; padding-bottom: .8rem; }
#index-column p { font-size: 1.1rem; line-height: 1.8; text-align: justify; color: #323232; }
#index-column p span::before { content: "\A"; white-space: pre; }
#index-column ul { margin-top: -10%; }
#index-column ul li { margin-bottom: 3rem; background: #FFF; position: relative; transform: translateY(50%); }
#index-column ul li:last-child { margin-bottom: 0; }
#index-column ul li a img { transition: .4s; }
#index-column ul li a:hover img { opacity: .8; }
@media screen and (max-width: 520px) and (orientation: portrait) {
	#index-column { margin: -40vw 0 15vw 0; padding-top: 40vw; background: linear-gradient(90deg,#EBEBEB 75%,#FFF 75%); }
	#index-column .read-box { width: 100%; }
	#index-column h2 { font-size: 6.5vw; line-height: 1.4; }
	#index-column h2 span::before { content: "\A"; white-space: pre; }
	#index-column p { font-size: 1rem; line-height: 1.6; }
	#index-column p span::before { content: ""; }
	#index-column ul { margin-top: 0; padding: 2rem 0 3rem 0; }
	#index-column ul li { margin-bottom: 2rem; transform: translateY(0); }
}


/* Interview */
#interview-head { background: #EBEBEB; background: linear-gradient(0deg,#EBEBEB 68%,#FFF 68%); }
#interview-head .head-box { width: calc(1100px + ((100% - 1100px) / 2)); margin-left: calc(((100% - 1100px) / 2)); position: relative; }
#interview-head .head-box h1 { width: 300px; position: absolute; top: 6rem; left: 0; z-index: 2; }
#portrait { width: calc(100% - 240px); height: 560px; margin-left: 240px; object-fit: contain; position: relative; overflow: hidden; }
#portrait img { position: absolute; top: -8%; left: 50%; transform: translate(-50%,0); }

#work-column { width: calc(1100px + ((100% - 1100px) / 2)); background: #EBEBEB; display: flex; justify-content: flex-end; }
#work-column .inner-box { width: 1100px; margin: 0; position: relative; }
#name-box { color: #FFF; width: 300px; height: 300px; padding: 1rem; background: #323232; position: absolute; bottom: 0; }
#name-box h2 { padding-bottom: 1rem; }
#name-box dl { padding-bottom: 1.2rem; }
#name-box dl dt { font-size: 1.1rem; line-height: 1.2; padding: .1rem .4rem; border: solid 1px #FFF; }
#name-box dl dd { padding-top: .4rem; }
#name-box dl dd strong { font-size: 2.4rem; line-height: 1.2; font-weight: normal; }
#name-box dl dd span { font-size: 1.2rem; line-height: 1.2; padding-left: .2rem; }
#name-box p { font-size: 1rem; line-height: 1.4; }
#workplace { padding-left: 320px; }
#workplace h3 { font-size: 2.8rem; line-height: 1.2; color: #323232; padding-top: 1rem; display: flex; align-items: center; }
#workplace h3 span { width: 45px; padding: .2rem .5rem 0 0; display: block; }
#workplace h3 i { font-style: normal; }

@media screen and (max-width: 1100px) {
	#interview-head .head-box { width: 96%; margin-left: 4%; }
	#interview-head .head-box h1 { width: 28%; top: 4rem }
	#portrait { width: 80%; height: 50vw; margin-left: 20%; }

	#work-column { width: 96%; justify-content: flex-start; }
	#work-column .inner-box { width: 100%; margin: 0; padding-left: 4%; }
	#name-box { width: 28%; height: auto; aspect-ratio: 1/1; }
	#name-box div { width: 100%; }
	#name-box h2 { padding-bottom: 1vw; }
	#name-box dl { padding-bottom: 1vw; }
	#name-box dl dt { font-size: 1.8vw; line-height: 1.2; }
	#name-box dl dd strong { font-size: 3.4vw; line-height: 1.2; }
	#name-box dl dd span { font-size: 1.8vw; line-height: 1.2; }
	#name-box p { font-size: 1.5vw; line-height: 1.4; }
	#workplace { padding-left: 31%; }
	#workplace h3 { font-size: 3.6vw; line-height: 1.2; padding-top: .8rem;}
	#workplace h3 span { width: 35px; }
}
@media screen and (max-width: 520px) and (orientation: portrait) {
	#interview-head .head-box { width: 100%; margin-left: 0; padding-top: 45vw; position: relative; }
	#interview-head .head-box::after { content: ""; width: 88%; height: 20vw; background: #EBEBEB; display: block; position: absolute; right: 0; top: 25vw; }
	#interview-head .head-box h1 { width: 80%; position: absolute; top: 1rem; left: 4%; }
	#portrait { width: 100%; height: 110vw; margin-left: 0; overflow: hidden; }
	#portrait img { width: auto; height: 100%; top: 0; }
	#interview01 #portrait img { transform: translate(-50%,0); }
	#interview02 #portrait img { transform: translate(-48%,0); }
	#interview03 #portrait img { transform: translate(-55%,0); }

	#work-column { width: 100%; padding-top: 65vw; background: linear-gradient(90deg,#FFF 12%,#EBEBEB 12%); }
	#work-column .inner-box { padding: 0; }
	#name-box { width: 80%; padding: 1.5rem; bottom: 26vw; }
	#name-box h2 { padding-bottom: 3vw; }
	#name-box dl { padding-bottom: 4vw; }
	#name-box dl dt { font-size: 4.5vw; line-height: 1.2; }
	#name-box dl dd { padding-top: 2vw; }
	#name-box dl dd strong { font-size: 9vw; line-height: 1.2; }
	#name-box dl dd span { font-size: 5vw; line-height: 1.2; }
	#name-box p { font-size: 3.6vw; line-height: 1.6; }
	#workplace { padding: 0 4%; }
	#workplace h3 { font-size: 9vw; line-height: 1.3; padding: 0 0 0 15%; display: block; position: relative; }
	#workplace h3 span { width: 14%; position: absolute; top: 2.8vw; left: 0; }
	#workplace h3 i::before { content: "\A"; white-space: pre; }
}


#message { width: calc(1100px + ((100% - 1100px) / 2)); padding: 3rem 0 4rem 0; background: #EBEBEB; display: flex; justify-content: flex-end; }
#message .inner-box { width: 1100px; margin: 0; padding-right: 4rem; position: relative; }
#message h2 { font-size: 1.8rem; line-height: 1.4; color: #323232; }
.msg-column { padding-top: 3rem; }
.msg-column h3 { font-size: 1.2rem; line-height: 1.4; color: #323232; margin-bottom: .8rem; padding-bottom: .4rem; border-bottom: solid 1px #323232; display: flex; }
.msg-column h3 strong { font-size: .9rem; line-height: 1.2; font-weight: normal; text-align: center; color: #FFF; width: 5.5rem; height: 1.5rem; margin-right: .5rem; padding: 0 .4rem; background: #323232; display: flex; align-items: center; clip-path: polygon(0 0,85% 0,100% 50%,85% 100%,0 100%); }
.msg-column p { font-size: 1rem; line-height: 1.8; text-align: justify; columns: 2; column-gap: 2rem; }
.msg-column p i { font-style: normal; }
@media screen and (max-width: 1100px) {
	#message { width: 96%; justify-content: flex-start; }
	#message .inner-box { width: 100%; margin: 0; padding: 0 4%; }
	#message h2 { font-size: 3vw; line-height: 1.4; }
	.msg-column { padding-top: 2rem; }
}
@media screen and (max-width: 520px) and (orientation: portrait) {
	#message { width: 100%; padding: 1rem 0 2rem 0; background: linear-gradient(90deg,#FFF 12%,#EBEBEB 12%); }
	#message .inner-box { padding: 0; }
	#message h2 { font-size: 6vw; line-height: 1.4; padding: 6% 4%; }
	#message h2 span::before { content: "\A"; white-space: pre; }
	.msg-column { padding-top: 6vw; }
	.msg-column h3 { margin: 0 4%; flex-direction: column; }
	.msg-column h3 strong { margin: 0 0 2% -4%; }
	.msg-column p { line-height: 1.6; columns: 1; padding: 4% 4% 0 4%; }
	.msg-column p i { padding-bottom: 1rem; display: block; }
}

#schedule { padding-left: calc((100% - 1100px) / 2); background: #EBEBEB; }
#schedule dl { display: flex; align-items: stretch; justify-content: space-between; }
#schedule dl dt { width: 50%; object-fit: contain; position: relative; overflow: hidden; }
#schedule dl dt img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#schedule dl dd { width: 50%; padding: 2rem; background: #323232; }
#schedule dl dd h2 { width: min(100%,340px); padding-bottom: 1rem; }
#schedule dl dd ul { font-size: 1rem; line-height: 1.4; color: #FFF; padding-right: 4%; }
#schedule dl dd ul li { text-align: justify; padding: 0 0 1rem 9rem; position: relative; }
#schedule dl dd ul li:last-child { padding-bottom: 0; }
#schedule dl dd ul li span { text-align: right; width: 6.5rem; display: block; position: absolute; left: 0; }
#schedule dl dd ul li::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #FFF; position: absolute; top: .4rem; left: 7.5rem; }
#schedule dl dd ul li::after { content: ""; width: 1px; height: 100%; background: #FFF; position: absolute; top: .6rem; left: 7.8rem; }
#schedule dl dd ul li:last-child::after { background: none; display: none; visibility: hidden; }
#schedule dl dd p.attention { font-size: .9rem; line-height: 1.4; text-indent: -1em; color: #FFF; padding: 1em 0 0 1em; }
@media screen and (max-width: 1100px) {
	#schedule { padding-left: 4%; }
	#schedule dl dt img { width: auto; }
	#schedule dl dd ul li { padding: 0 0 .6rem 9rem; }
}
@media screen and (max-width: 768px) {
	#schedule dl dt img { height: 100%; }
}
@media screen and (max-width: 520px) and (orientation: portrait) {
	#schedule { padding-left: 0; background: none; }
	#schedule dl { flex-direction: column; }
	#schedule dl dt { width: 100%; aspect-ratio: 1/.6; }
	#schedule dl dt img { width: 100%; height: auto; }
	#schedule dl dd { width: 100%; padding: 6% 4%; }
	#schedule dl dd h2 { width: 100%; }
	#schedule dl dd ul { padding-right: 0; }
	#schedule dl dd ul li { padding: 0 0 1rem 1.5rem; }
	#schedule dl dd ul li span { text-align: left; width: auto; display: block; position: relative; }
	#schedule dl dd ul li::before { left: .3rem; }
	#schedule dl dd ul li::after { left: .6rem; }
}

#teacher { width: calc(1100px + ((100% - 1100px) / 2)); padding: 3rem 0 0 0; background: #EBEBEB; display: flex; justify-content: flex-end; }
#teacher .inner-box { width: 1100px; margin: 0; padding-right: 4rem; position: relative; }
#teacher dl { border: solid 1px #323232; background: #FFF; padding: 1rem; display: flex; align-items: center; justify-content: space-between; }
#teacher dl dt { width: 30%; }
#teacher dl dd { width: 66%; }
#teacher dl dd h3 { font-size: 1.3rem; line-height: 1.4; color: #323232; padding-bottom: .5rem; }
#teacher dl dd h3 span { font-size: 80%; line-height: 1.4; }
#teacher dl dd h3 span i { font-style: normal; }
#teacher dl dd p { font-size: 1rem; line-height: 1.6; }
@media screen and (max-width: 1100px) {
	#teacher { width: 96%; justify-content: flex-start; }
	#teacher .inner-box { width: 100%; margin: 0; padding: 0 4%; }
	#teacher dl { align-items: flex-start; }
}
@media screen and (max-width: 768px) {
	#teacher dl dd h3 span i::before { content: "\A"; white-space: pre; }
}
@media screen and (max-width: 520px) and (orientation: portrait) {
	#teacher { width: 100%; padding: 2rem 0 0 0; background: linear-gradient(90deg,#FFF 12%,#EBEBEB 12%); }
	#teacher .inner-box { padding: 0 4%; }
	#teacher dl { flex-direction: column; }
	#teacher dl dt { width: 100%; }
	#teacher dl dd { width: 100%; padding-top: 1rem; }
	#teacher dl dd h3 { font-size: 7vw; line-height: 1.4; }
	#teacher dl dd h3 span { font-size: 70%; line-height: 1.4; }
	#teacher dl dd h3 span i { font-size: 4vw; line-height: 1.4; display: block; }
	#teacher dl dd h3 span i::before { content: ""; }
}

#links { width: calc(1100px + ((100% - 1100px) / 2)); margin-bottom: 10rem; background: #EBEBEB; display: flex; justify-content: flex-end; }
#links .inner-box { width: 1100px; margin: 0; padding-right: 4rem; position: relative; }
#links ul { display: flex; justify-content: space-between; position: relative; bottom: -50%; }
#links ul li { width: 31%; background: #FFF; }
#links ul li a img { transition: .4s; }
#links ul li a:hover img { opacity: .8; }
#links ul li.active a img { opacity: .6; }
@media screen and (max-width: 1100px) {
	#links { width: 96%; margin-bottom: 12vw; justify-content: flex-start; }
	#links .inner-box { width: 100%; margin: 0; padding: 0 4%; }
}
@media screen and (max-width: 520px) and (orientation: portrait) {
	#links { width: 100%; padding: 2rem 0; background: linear-gradient(90deg,#FFF 12%,#EBEBEB 12%); }
	#links .inner-box { padding: 0 4%; }
	#links ul { flex-direction: column; bottom: 0; }
	#links ul li { width: 100%; margin-bottom: 1rem; }
	#links ul li.active { display: none; visibility: hidden; }
}