@charset "utf-8";

#message {
	display:flex; flex-direction:column; justify-content:center; align-items:center; 
	min-height:480px; position:relative; z-index:1; margin:0 calc(50% - 50vw); padding:2em calc(50vw - 50%); text-align:center;}
#message > .image {position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;}
#message > .image > img {display:block; width:100%; height:100%; object-fit:cover;}
#message > h1 {display:none;}
#message > strong {display:block; color:var(--color-sub); font-size:3.2rem; font-weight:bold; line-height:1.5;}
#message > .more {margin-top:1em; font-size:1.6rem;}

@media screen and (max-width:1190px) {
#message {margin-left:-40px; margin-right:-40px; padding-left:40px; padding-right:40px;}
}

@media screen and (max-width:599px) {
#message {display:block; min-height:0; margin:0; padding:0;}
#message > .image {height:72vw; position:static; margin:0 -8vw;}
#message > .image > img {}
#message > h1 {}
#message > strong {margin:1.5em 0 0; font-size:1.6rem; text-align:center;}
#message > .more {display:block; margin:1.5em 0 0; font-size:1.2rem;}
}


#job {padding:80px 0; text-align:left;}
#job > h1 {color:var(--color-sub); font-size:2.4rem; line-height:1;}
#job > .list {padding:40px 0 0;}

@media screen and (max-width:599px) {
#job {padding:8vw 0;}
#job > h1 {font-size:1.6rem;}
#job > .list {padding:5.3333vw 0 0;}
}


#interview {margin:0 calc(50% - 50vw); padding:80px calc(50vw - 50%) 50px; background:var(--color-main-lighter); text-align:left;}
#interview > h1 {color:var(--color-sub); font-size:2.4rem; line-height:1;}
#interview > ul {position:relative; margin:-10px 0 0; padding:40px 0 0; font-size:1.4rem; line-height:1.5;}
#interview > ul::after {display:block; content:''; clear:both; height:0; overflow:hidden;}
#interview > ul > li {margin-left:630px; padding:10px 0; border-bottom:1px solid var(--color-main-light);}
#interview > ul > li > a {display:block; margin:-10px 0; padding:inherit; text-decoration:none;}
#interview > ul > li .image {display:block; width:540px; position:absolute; left:0; top:50px; pointer-events:none; overflow:hidden;}
#interview > ul > li .image > img {display:block; width:100%; height:356px; object-fit:cover; object-position:0 center; opacity:1;}
#interview > ul > li h2 {font-size:1.6rem;}
#interview > ul > li small {display:flex; margin:0.1em 0 0;}
#interview > ul > li small span {display:flex; align-items:center;}
#interview > ul > li small span::before {display:block; content:'/'; margin:0 0.5em; color:#aaa;}
#interview > ul > li small span:first-child::before {display:none;}
#interview > ul > li > a:hover {color:var(--color-main-alpha);}
#interview > .more {display:none;}

html.fac-js-enabled #interview > ul > li .image {visibility:hidden;}
html.fac-js-enabled #interview > ul > li .image > img {}
html.fac-js-enabled #interview > ul > li.selected .image {visibility:visible; z-index:3;}
html.fac-js-enabled #interview > ul > li.last-selected .image {visibility:visible; z-index:2;}
html.fac-js-enabled #interview > ul > li.selected .image {animation:interview-image-show 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;}
html.fac-js-enabled #interview > ul > li .image::after {
	display:block; content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:10; background:#fff; opacity:0.7;}
html.fac-js-enabled #interview > ul > li.selected .image::after {animation:interview-image-light 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;}
html.fac-js-enabled #interview > ul > li.last-selected .image::after {opacity:0;}
@keyframes interview-image-show {
0%   {width:0;}
100% {width:540px;}
}
@keyframes interview-image-light {
0%   {opacity:0.7;}
100% {opacity:0;}
}

@media screen and (max-width:1190px) {
#interview {margin-left:-40px; margin-right:-40px; padding-left:40px; padding-right:40px;}
}

@media screen and (max-width:599px) {
#interview {margin:0 -8vw; padding:6.6666vw 8vw 10.6666vw;}
#interview > h1 {font-size:1.6rem;}
#interview > ul {display:flex; flex-wrap:nowrap; margin:0 -8vw; padding:5.3333vw 0 4vw; font-size:1rem; overflow:auto;}
#interview > ul::after {display:none;}
#interview > ul > li {flex:0 0 calc(100vw - 16vw); margin:0 2.6666vw; padding:0; border-width:0;}
#interview > ul > li:first-child {margin-left:8vw;}
#interview > ul > li:last-child  {margin-right:8vw;}
#interview > ul > li > a {display:block; margin:0; padding-right:0;}
#interview > ul > li .image {width:auto; position:static; visibility:visible !important; animation:none !important;}
#interview > ul > li .image::after {display:none !important;}
#interview > ul > li .image > img {display:block; width:100%; height:auto;}
#interview > ul > li h2 {margin:1em 0 0; font-size:1.6rem;}
#interview > ul > li small {}
#interview > ul > li small span {}
#interview > ul > li small span::before {}
#interview > ul > li small span:first-child::before {}
#interview > ul > li > a:hover {}
#interview > .more {display:block; font-size:1.2rem;}
}


#other {padding:80px 0;}
#other > h1 {display:none;}

@media screen and (max-width:599px) {
#other {padding:8vw 0;}
#other > h1 {}
}