@charset "UTF-8";
/* auther: cee; */

#leaf section[id^=archive] h4 {
position: relative;
z-index: 1;
}
#leaf section[id^=archive] h4 time {
margin-bottom: 7px;
font-size: 22px;
font-weight: 300;
line-height: 1em;
display: block;
overflow: hidden;
position: relative;
}
article p {
max-width: 640px;
margin: 0 auto 1em;
line-height: 1.75em;
text-align: justify;
}
article p:last-child {margin-bottom: 0;}
#kv p {margin-left: 0;}
#sub-kv p {margin-left: 0;}

article .container {
max-width: 1395px;
margin: 0 auto;
padding: 0 10vw;
}
.box {position: relative;}

.button:not(.s) {
width: 100%;
line-height: 3em;
border-radius: 3px;
border: 1px solid transparent;
box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.4);
overflow: hidden;
display: block;
clear: both;
position: relative;
z-index: 3;
}
.button:not(.s)::before {
width: 130%;
height: 100%;
margin: auto 0;
content: "";
display: block;
transform: skewX(45deg) ;
transform-origin: center center;
position: absolute;
left: -150%;
top: 0;
bottom: 0;
transition: .4s linear;
}
.button:not(.s):hover::before {left: -20%;}
.button:not(.s) a {
width: 100%;
font-size: 14px;
text-align: center;
display: block;
position: relative;
}
.button.s a {
min-height: 1.75em;
padding-left: 1.5em;
vertical-align: middle;
display: inline-block;
position: relative;
z-index: 1;
}
.button.s a + a {margin-left: 20px;}
.button:not(.s) a::before {
width: 15px;
height: 3em;
content: "";
background-repeat: no-repeat;
background-position: left center;
background-size: 10px auto;
opacity: .9;
position: absolute;
left: 12px;
top: 0;
}
.button.s a::before,
.button.s a::after {
width: 1em;
height: 1em;
content: '';
border-radius: 1em;
position: absolute;
left: 0;
top: 0.375em;
z-index: -1;
}
.button.s a::before {
background-repeat: no-repeat;
background-position: center center;
background-size: 7px auto;
border: 1px solid transparent;
box-shadow: -1px -1px 5px 2px rgba(0,0,0,.2) inset;
box-sizing: border-box;
}
.button.s a:hover::before {
background-size: 6px auto;
box-shadow: 1px 1px 5px 4px rgba(0,0,0,.2) inset;
}
.button.black a::before,
.button.red a::before,
.button.blue a::before {background-image: url(/jpn/images/common/button_arrow_fff.png)}
.button.gray a::before,
.button.yellow a::before {background-image: url(/jpn/images/common/button_arrow.png)}
.button:not(.s) a:hover::before {top: 1px;}

.recruit#categorytop .button:not(.s) a,
#leaf .button:not(.s) a {
height: 30px;
line-height: 29px;
}
.recruit#categorytop .button:not(.s) a:hover,
#leaf .button:not(.s) a:hover {line-height: 31px;}
.recruit#categorytop .button:not(.s) a::before,
#leaf .button:not(.s) a::before {height: 29px;}
.button:not(.s).black a,
.button:not(.s).red a,
.button:not(.s).blue a {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
}
.button:not(.s).black a:hover,
.button:not(.s).red a:hover,
.button:not(.s).blue a:hover {text-shadow: 1px 0 1px rgba(0,0,0,.6);}
.button:not(.s).gray a,
.button:not(.s).yellow a {
color: #5B5B5B;
text-shadow: 1px 1px 0 rgba(255,255,255,.6);
}
.button:not(.s).gray a:hover,
.button:not(.s).yellow a:hover {text-shadow: 1px 0 1px rgba(255,255,255,.6);}
.button:not(.s).black,
.button.black.s a::before {
background-color: rgba(62,68,74,1);
border-color: rgba(72,78,84,1);
}
.button:not(.s).black::before {background: rgba(0,0,0,.2);}
.button:not(.s).black a {box-shadow: 0 -15px 15px 3px rgba(0,0,0,.5) inset;}
.button:not(.s).black a:hover {box-shadow: 0 10px 15px 3px rgba(0,0,0,.3) inset;}
.button.black.s a {color: rgba(0,0,0,1);}
.button.black.s a:hover {color: rgba(120,120,120,1);}
.button.black.s a::after {box-shadow: 0 0 0 1px rgba(0,0,0,1);}

.button:not(.s).red,
.button.red.s a::before {
background-color: rgba(255,0,0,1);
border-color: rgba(255,0,0,1);
}
.button:not(.s).red::before {background: rgba(160,0,0,.4);}
.button:not(.s).red a {box-shadow: 0 -15px 15px 3px rgba(160,0,0,.9) inset;}
.button:not(.s).red a:hover {box-shadow: 0 10px 15px 3px rgba(160,0,0,.9) inset;}
.button.red.s a {color: rgba(160,0,0,1);}
.button.red.s a:hover {color: rgba(255,0,0,1);}
.button.red.s a::after {box-shadow: 0 0 0 1px rgba(160,0,0,1);}

.button:not(.s).blue,
.button.blue.s a::before {
background-color: rgba(73,190,226,1);
border-color: rgba(80,200,244,1);
}
.button:not(.s).blue::before {background: rgba(0,120,180,.4);}
.button:not(.s).blue a {box-shadow: 0 -15px 15px 3px rgba(0,120,180,.6) inset;}
.button:not(.s).blue a:hover {box-shadow: 0 10px 15px 3px rgba(0,120,180,.6) inset;}
.button.blue.s a {color: rgba(0,120,180,1);}
.button.blue.s a:hover {color: rgba(80,200,244,1);}
.button.blue.s a::after {box-shadow: 0 0 0 1px rgba(0,120,180,1);}

.button:not(.s).gray,
.button.gray.s a::before {
background-color: rgba(250,250,250,1);
border-color: rgba(250,250,250,1);
}
.button:not(.s).gray:hover,
.button.gray.s a:hover::before {border-color: rgba(240,240,240,1);}
.button:not(.s).gray::before {background: rgba(120,120,120,.1);}
.button:not(.s).gray a {box-shadow: 0 -15px 15px 3px rgba(0,0,0,.1) inset;}
.button:not(.s).gray a:hover {box-shadow: 0 10px 15px 3px rgba(0,0,0,.1) inset;}
.button.gray.s a {color: rgba(120,120,120,1);}
.button.gray.s a:hover {color: rgba(200,200,200,1);}
.button.gray.s a::after {box-shadow: 0 0 0 1px rgba(200,200,200,1);}

.button:not(.s).yellow,
.button.yellow.s a::before {
background-color: rgba(236,245,82,1);
border-color: rgba(236,245,82,1);
}
.button:not(.s).yellow::before {background: rgba(140,160,0,.1);}
.button:not(.s).yellow a {box-shadow: 0 -15px 15px 3px rgba(100,120,0,.4) inset;}
.button:not(.s).yellow a:hover {box-shadow: 0 10px 15px 3px rgba(100,120,0,.4) inset;}
.button.yellow.s a {color: rgba(140,160,0,1);}
.button.yellow.s a:hover {color: rgba(100,120,0,1);}
.button.yellow.s a::after {box-shadow: 0 0 0 1px rgba(140,160,0,1);}

.message {
padding: 0;
color: #fff;
overflow: hidden;
background: rgb(10,10,10);
}
.message .box {background: rgba(30,30,30,.9);}
.message .interviewee {
color: #fff;
line-height: 1em;
position: absolute;
z-index: 5;
}
.message .interviewee span:nth-of-type(1) {
padding: .1em .5em .3em;
font-size: 16px;
text-align: center;
background: linear-gradient(90deg,rgb(0,184,230),rgb(0,140,222));
display: block;
clear: both;
}
@media all and (-ms-high-contrast: none) {
.message .interviewee span:nth-of-type(1) {padding: .4em .5em .3em;}
}
.message .interviewee span:nth-of-type(2) {
padding-top: .5em;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 23px;
letter-spacing: 2px;
display: block;
clear: both;
}
.message h4 {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: left;
}
@media all and (-ms-high-contrast: none) {
	.message h4 {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
.message p:last-child {margin-bottom: 0;}
section.video {background: #252525;}
.box > .video {margin-bottom: 20px;}
.video h3 {display: none;}
.video .wrap::after {
height: 0;
content: '.';
visibility: hidden;
display: block;
clear: both;
}
.video .youtube {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.video .youtube iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.related {
color: #fff;
counter-reset: num;
}
.related h3 {text-align: left;}
.related h3 span {
border-bottom: 3px solid rgba(209,209,209,1);
display: inline-block;
}
.related a,
.related .box{
counter-increment: num;
display: block;
}
.related a::after,
.related .box::after{
width: 100%;
height: 0;
content: '.';
visibility: hidden;
display: block;
clear: both;
}
.related a:nth-of-type(odd), 
.related .box:nth-of-type(odd)
 {
	background: rgb(37,37,37);
}
.related a:nth-of-type(even),
.related .box:nth-of-type(even)
{
	background: rgb(42,42,42);
}
.related h4 {
min-height: 55px;
padding-left: 55px;
text-align: left;
position: relative;
}
.related h4 {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}
@media all and (-ms-high-contrast: none) {
	.related h4 {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
.related h4 span::before,
.related h4 span::after {
width: 50px;
height: 55px;
content: '';
display: block;
position: absolute;
left: 0;
top: 4px;
}
.related h4 span::before {
background: url(/jpn/images/common/related_icon.png) no-repeat right center;
background-size: contain;
opacity: .2;
}
.related h4 span::after {
padding-top: 10px;
content: '0' counter(num);
font-family: 'Roboto', sans-serif;
font-size: 18px;
line-height: 1.5em;
text-align: center;
}
#kv {
color: #fff;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
#kv::before {
width: 100%;
height: 100%;
content: '';
background: linear-gradient(45deg, rgba(45,40,35,.9), rgba(45,40,35,.3));
display: block;
position: absolute;
left: 0;
top: 0;
}
#kv .box {
position: relative;
z-index: 2;
}
#kv .box::before {
content: '';
visibility: visible;
background-repeat: no-repeat;
display: block;
position: absolute;
z-index: -1;
}
#kv h2 span::after {background: #fff;}

.DisabledJS aside {display: none;}
.EnableJS aside {display: block;}
article {
position: relative;
z-index: 2;
}
#submenuData {
font-family: 'Roboto', sans-serif;
font-weight: 500;
counter-reset: num 0;
background: rgb(40,40,40);
}
#submenuData .container {
max-width: 100%;
margin: 0;
padding: 0;
}
#submenuData li {
color: rgba(255,255,255,.7);
background-repeat: no-repeat;
background-size: cover;
float: left;
position: relative;
}
#submenuData a {
width: 100%;
height: 100%;
text-align: center;
line-height: 1em;
background: rgba(40,40,40,.75);
position: absolute;
left: 0;
top: 0;
}
#submenuData a:hover {
/* color: rgba(0,0,0,1) !important;
background: rgba(236,245,82,.75); */
color: #E4FF00;

}
#submenuData a::before {
height: 50%;
margin-top: -.5em;
content: '';
display: block;
}
#submenuData a::after {
counter-increment: num 1;
content: '0' counter(num);
font-size: 12px;
font-weight: 700;
position: absolute;
left: 20px;
top: 10px;
z-index: 3;
}
#information {
color: #fff;
background: linear-gradient(-90deg, rgba(0,183,229,.85), rgba(0,139,221,.85));
}
#information h2 {background: linear-gradient(-90deg, rgba(0,183,229,1), rgba(0,139,221,1));}
#information h3 {
font-weight: 700;
background: #3e444a;
position: relative;
}
#information h3:nth-of-type(1) {
margin: 0;
background: #2a2a2a;
}
#information .box h3:nth-of-type(2) {z-index: 1;}
#information .box h3:nth-of-type(2)::after {
width: 55px;
height: 65px;
margin: auto;
content: "";
visibility: visible;
display: block;
z-index: -1;
position: absolute;
right: 15px;
top: 0;
bottom: 0;
transition: .2s ease-out;
}
#information .box:nth-of-type(1) h3:nth-of-type(2)::after {
background: #3e444a url(/jpn/images/common/icon_pdf.png) no-repeat right center ;
background-size: 55px auto;
}
#information .box:nth-of-type(2) h3:nth-of-type(2)::after {
background: #3e444a url(/jpn/images/common/icon_movie.png) no-repeat right center ;
background-size: 55px auto;
}
#information .box:nth-of-type(1) h3:nth-of-type(2):hover::after,
#information .box:nth-of-type(2) h3:nth-of-type(2):hover::after {background-size: 30px auto;}
#information h3 a {
height: 72px;
padding: 12px 20px 18px;
display: block;
box-sizing: border-box;
overflow: hidden;
position: relative;
transition: .2s ease-out;
}
#information h3:nth-of-type(2) a {height: 102px;}
#information h3 a::before {
width: 2px;
height: auto;
content: "";
background: #49BEE2;
position: absolute;
left: 9px;
top: 0;
bottom: 10px;
transition: .2s ease-out;
}
#information h3 a:hover::before {background: #E4FF00;}
#information h3 a::after {
height: 1px;
content: "";
visibility: hidden;
display: block;
clear: both;
}
#information .box h3 a:hover {
font-size: 12px;
color: #ccc;
}
#information h3 span {
margin: 0 0 6px;
font-size: 12px;
text-transform: uppercase;
display: block;
}
#information h3 span:nth-of-type(1) {
font-family: 'Roboto', sans-serif;
font-weight: 300;
transition: .2s ease-out;
}
#information h3 a:hover span:nth-of-type(1) {color: #E4FF00;}
#information h3 span + span {
padding: 8px 0 2px;
transition: .2s ease-out;
}
#information h3 a:hover span + span {color: #fff;}
#information .box ul {
position: relative;
overflow: hidden;
z-index: 1;
}
#information .box:nth-of-type(2) ul::before {
width: 360px;
height: 360px;
content: "";
visibility: visible;
background: url(/jpn/images/top/info.jpg) no-repeat right bottom;
background-size: contain;
opacity: .2;
z-index: -1;
position: absolute;
right: -140px;
bottom: 0;
}
#information ul li:nth-of-type(n+2) {
border-top-width: 1px;
border-style: dashed;
}
#information .box:nth-of-type(odd) li {border-color: #F4F4F4;}
#information .box:nth-of-type(even) li {border-color: #000;}
#information h4 {
padding: 15px 20px;
font-size: 14px;
line-height: 1.5em;
display: block;
position: relative;
z-index: 1;
}
#information .box:nth-of-type(odd) h4 {color: #fff;}
#information .box:nth-of-type(even) h4 {color: #000;}
#information .box h4 a {display: block;}
#information .box h4 a:hover {color: #4AAFD3;}
#information .box h4 a::before {
width: 100%;
height: 100%;
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
#information h4 time,
#information h4 span {
font-size: 12px;
font-weight: 400;
display: block;
}
#information h4 time {
font-family: 'Roboto', sans-serif;
color: #4AAFD3;
}
#information h4 a:hover time {color: #ccc;}
#support {
width: 100%;
margin-top: -64px;
color: #fff;
background: url(/jpn/images/top/support.jpg) no-repeat left 64px;
background-size: cover;
}
#support h2 {
margin: 20px 0;
overflow: hidden;
position: relative;
z-index: 1;
}
#support h2::before {
width: 100%;
height: 100%;
content: "";
background: linear-gradient(-90deg, rgba(0,183,229,1), rgba(0,139,221,1));
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: .8;
}
#support a {
padding: 20px 0;
text-align: center;
float: left;
overflow: hidden;
display: block;
z-index: 1;
position: relative;
}
#support a::before {
width: 100%;
height: 100%;
content: "";
background: linear-gradient(#fff,#E8E8E8);
display: block;
opacity: 0.9;
z-index: -1;
position: absolute;
left: 0;
top: 0;
}
#support a h3 {
color: #009BE8;
font-size: 19px;
z-index: 2;
position: relative;
}
#support a .icon {
height: 47px;
margin: 14px auto;
display: block;
clear: both;
position: relative;
}
#support a .icon img {
height: 47px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
transition: .5s ease-out;
}
#support a:nth-of-type(1) .icon {width: 60px;}
#support a:nth-of-type(1) .icon img {
height: 60px;
bottom: 0;
}
#support a:nth-of-type(1) .icon img:nth-of-type(1) {
transform: rotate(45deg);
transform-origin: center bottom;
right: auto;
}
#support a:nth-of-type(1) .icon img:nth-of-type(2) {
transform: rotate(-45deg);
transform-origin: center bottom;
left: auto;
}
#support a:nth-of-type(1):hover .icon img:nth-of-type(1),
#support a:nth-of-type(1):hover .icon img:nth-of-type(2) {transform: rotate(0) translate(0,7px);}
#support a:nth-of-type(2):hover .icon img {transform: rotate(360deg);}
#support a:nth-of-type(3):hover .icon img {
animation-name: supportKart;
animation-duration: .5s;
}
@keyframes supportKart {
10% {transform: rotate(-30deg);}
30% {height: 47px;}
50% {visibility: visible; right: -600px; height: 0;}
51% {visibility: hidden;}
52% {left: 0; right: -600px;}
53% {left: -600px; right: 0;}
54% {visibility: hidden; height: 0;}
55% {visibility: visible;}
70% {height: 47px;}
90% {transform: rotate(-30deg);}
100% {transform: rotate(0); left: 0; right: 0;}
}
#support a:nth-of-type(4) .icon {width: 47px;}
#support a:nth-of-type(4) .icon img {display: none;}
#support a:nth-of-type(4) .icon span,
#support a:nth-of-type(4) .icon span::before,
#support a:nth-of-type(4) .icon span::after {
width: 47px;
height: 47px;
font-size: 35px;
font-weight: 700;
line-height: 47px;
}
#support a:nth-of-type(4) .icon span {
overflow: hidden;
background: linear-gradient(90deg,#5dcbef,#69b6ff);
border-radius: 47px;
display: block;
position: relative;
}
#support a:nth-of-type(4) .icon span::before,
#support a:nth-of-type(4) .icon span::after {
display: block;
position: absolute;
top: -2px;
}
#support a:nth-of-type(4) .icon span::before {content: "?";}
#support a:nth-of-type(4) .icon span::after {
visibility: hidden;
content: "!";
}
#support a:nth-of-type(4):hover .icon span::before,
#support a:nth-of-type(4):hover .icon span::after {color: #fff;}
#support a:nth-of-type(4):hover .icon span {
animation-name: supportBall;
animation-duration: 1.2s;
transform-origin: center bottom;
}
@keyframes supportBall {
0%,86%,100% {width: 47px; height: 47px; font-size: 35px; line-height: 47px; transform: translate3d(0,0,0); }
1%,72% {transform: translate3d(0,-30px,0);}
15% {transform: translate3d(0,10px,0);}
19% {transform: translate3d(0,-5px,0);}
39% { width: 0; height: 0; font-size: 0; line-height: 0; transform: translate3d(0,0,0);}
51% {transform: translate3d(0,-50px,0);}
66% {transform: translate3d(0,0,0);}
}
#support a:nth-of-type(4):hover .icon span::before {
animation-name: supportFaq01;
animation-duration: 1.2s;
animation-fill-mode: forwards;
transform-origin: center bottom;
}
@keyframes supportFaq01 {
0% {visibility: visible; width: 47px; height: 47px; font-size: 35px; line-height: 47px; transform: translate3d(0,0,0);}
8% {transform: translate3d(0,-30px,0);}
9%,86%,100% {visibility: hidden;}
39% {width: 0; height: 0; font-size: 0; line-height: 0; transform: translate3d(0,0,0);}
}
#support a:nth-of-type(4):hover .icon span::after {
visibility: visible;
animation-name: supportFaq02;
animation-duration: 1.2s;
transform-origin: center bottom;
}
@keyframes supportFaq02 {
0% {visibility: hidden; width: 47px; height: 47px; font-size: 35px; line-height: 47px; transform: translate3d(0,0,0);}
8% {transform: translate3d(0,-30px,0);}
9% {visibility: hidden;}
39% {width: 0; height: 0; font-size: 0; line-height: 0; transform: translate3d(0,0,0);}
40%,86%,100% {visibility: visible;}
51% {transform: translate3d(0,-60px,0);}
52% {visibility: hidden; transform: translate3d(0,-60px,0);}
72% {visibility: visible; transform: translate3d(0,-60px,0);}
}
#support a:nth-of-type(5) .icon {
width: 63px;
margin: 14px auto;
overflow: hidden;
transition: .5s ease-in-out;
}
#support a:nth-of-type(5) .icon img {display: none;}
#support a:nth-of-type(5) .icon::after,
#support a:nth-of-type(5) .icon span::before,
#support a:nth-of-type(5) .icon span::after {
width: 0;
height: 0;
content: "";
visibility: visible;
display: block;
position: absolute;
transition: .5s ease-out;
}
#support a:nth-of-type(5) .icon::after {
border: 38px solid transparent;
border-top: 34px solid #63c0f8;
transform: translate(-6.5px,-3px);
}
#support a:nth-of-type(5) .icon span::after {border: 23px solid transparent;}
#support a:nth-of-type(5) .icon > span::after {
border-right: 25px solid #63c0f8;
transform: translate(20px,1.5px);
}
#support a:nth-of-type(5) .icon span span::after {
border-left: 25px solid #63c0f8;
transform: translate(-5px,1.5px);
}
#support a:nth-of-type(5) .icon span::before {
border: 32px solid transparent;
border-bottom: 30px solid #63c0f8;
}
#support a:nth-of-type(5) .icon span span::before {transform: translate(-10px,-6px);}
#support a:nth-of-type(5) .icon > span::before {
opacity: 1;
transform: translate(9px,-6px);
}
#support a:nth-of-type(5):hover .icon {margin: 17px auto 11px;}
#support a:nth-of-type(5):hover .icon::after {
border: 30px solid transparent;
border-top: 12px solid #63c0f8;
transform: translate(0,1px) rotate(-10deg);
transform-origin: right top;
}
#support a:nth-of-type(5):hover .icon > span::after {
border-right: 21px solid #63c0f8;
transform: translate(18px,3px) rotate(15deg);
transform-origin: right top;
}
#support a:nth-of-type(5):hover .icon span span::after {
border: 5px solid transparent;
border-left: 9px solid #69b6ff;
border-bottom-width: 20px;
transform: translate(25px,24px) rotate(35deg);
}
#support a:nth-of-type(5):hover .icon span::before {
border: 14px solid transparent;
border-right-width: 3px;
border-bottom: 7px solid #69b6ff;
transform: translate(9px,11px) rotate(-55deg);
}
#support a:nth-of-type(5):hover .icon > span::before {
border-bottom-width: 0;
opacity: 0;
}
#support a:nth-of-type(6):hover .icon img {
animation-name: supportToolbox;
animation-duration: .5s;
}
@keyframes supportToolbox {
0%,100% {transform: rotate(0);}
12%,36%,50%,74% {transform: rotate(10deg);}
24%,48%,62%,86% {transform: rotate(-10deg);}
}
#support a p {
color: #AFAFAF;
font-family: 'Play', sans-serif;
font-size: 14px;
}
footer {
margin: auto;
padding: 0 0 20px;
font-size: 12px;
position: relative;
}
.DisabledJS footer {display: none;}
footer a:hover {color: #E4FF00;}
footer nav {
padding: 20px 20px 25px;
color: #fff;
background: #2a2a2a;
z-index: 1;
position: relative;
}
footer nav h2 {
padding: 10px;
color: #fff;
font-size: 22px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
z-index: 1;
position: relative;
}
footer nav h2::before {
width: 100%;
height: 1px;
margin: auto 0;
content: "";
background: #fff;
display: block;
z-index: -2;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
footer nav h2::after {
width: 6.5em;
height: 100%;
margin: 0 auto;
content: "";
background: #2a2a2a;
display: block;
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
}
footer nav input {display: none;}
footer nav form > ul {
position: relative;
z-index: 2;
}
footer nav li {
text-transform: capitalize;
font-size: 20px;
display: block;
}
footer nav li a,
footer nav li span {
padding: 10px 0;
display: block;
}
footer nav li li {
width: 100%;
font-size: 12px;
}
footer nav li li a {
padding: 5px 0 5px 7px;
color: #ccc;
position: relative;
}
footer #condition {
padding: 0 20px;
position: relative;
}
footer #condition .fix_bottom {
z-index: 5;
opacity: 1;
right: 20px;
}
.DisabledJS footer #condition .fix_bottom {
position: absolute;
top: 20px;
}
.EnableJS footer #condition .fix_bottom {position: fixed;}
footer #condition .fix_bottom .back_top {
background: linear-gradient(0deg,rgba(44,177,231,.85),rgba(73,190,226,.85));
float: right;
display: block;
}
footer #condition .fix_bottom .back_top:hover {opacity: 1;}
footer #condition .fix_bottom a {
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 300;
text-align: center;
background: url(/jpn/images/common/back_top.png) no-repeat;
background-position: center 16px;
background-size: 18px auto;
display: block;
box-sizing: border-box;
}
footer #condition .fix_bottom a,
footer #condition .fix_bottom a:hover {color: #fff;}
footer #condition dl {
line-height: 1.5em;
position: relative;
}
footer #condition dl dt:nth-of-type(1) {margin-bottom: 5px;}
footer #condition dl dt:nth-of-type(n+2) {float: left;}
footer #condition dl dt:nth-of-type(n+2)::after {
width: 1em;
visibility: visible;
content: "：";
display: inline-block;
}
footer #condition dl dd:nth-of-type(1) {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
footer #condition small {
margin: 20px 155px 0 0;
display: block;
}
footer #condition .intercast {
width: 115px;
height: 33px;
display: block;
}
footer #condition .intercast img {width: 100%;}
@media all and (min-width:1800px) {
	#kv .container {padding-top: 20vw;}
	#support a {width: calc((100% - 101px) / 6);}
	#support a:nth-of-type(n+2) {margin-left: 20px;}
	footer nav form > ul {
	max-width: 1800px;
	margin: 0 auto;
	}
}
@media all and (min-width:995px) {
	article h2:not(article #information h2) {font-size: 42px;}
	article h2 span:not(article #information h2 span) {font-size: 84px;}
	article h3:not(article #information h3) {font-size: 36px;}
	article h3 span:not(article #information h3 span) {font-size: 24px;}
	article h4:not(article #information h4) {font-size: 24px;}
	article h4 span:not(article #information h4 span) {font-size: 18px;}
	article #information h2, aside h2 {font-size: 30px;}
	#kv .box {
	padding-top: 224px;
	padding-bottom:160px;
	}
	#submenuData li {height: 250px;}
	.message .container::before {
	width: calc(100% + 5vw);
	height: 100%;
	content: '';
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 120%;
	position: absolute;
	top: 0;
	left: -5vw;
	}
	.message .container {
	min-height: 400px;
	position: relative;
	padding-bottom: 80px;
	}
	.message .interviewee {
	padding: 0 0 10px;
	left: 10vw;
	bottom: 0;
	}
	.message .box {
	margin: 0 0 42px 300px;
	padding: 120px 60px 60px;
	}
	.message .box::before {
	padding-bottom: .25em;
	content: 'MESSAGE';
	font-family: 'Roboto', sans-serif;
	font-size: 58px;
	display: block;
	clear: both;
	}
	.message .box p {margin-left: 0;}
	.video .wrap {padding: 20px 0;}
	.video .wrap .box {
	width: 50%;
	float: left;
	}
	.video .wrap .box:nth-of-type(odd) {padding-right: 10px;}
	.video .wrap .box:nth-of-type(even) {padding-left: 10px;}
	.related {padding: 150px 0;}
	.related a,
	.related .box{padding: 60px;}
	.related h4 {
	max-width: 260px;
	line-height: 1.25em;
	float: left;
	}
	.related h4 span {
	margin: .25em 0;
	line-height: 1.25em;
	}
	.related p {margin-left: 290px;}
	#information .container {
	width: 100%;
	padding: 20px;
	display: table;
	}
	#information .box {
	width: 33.3333%;
	vertical-align: top;
	display: table-cell;
	overflow: hidden;
	z-index: 1;
	}
	#information .box:nth-of-type(-n+2) {padding-bottom: 122px;}
	#information .box:nth-of-type(1) {padding-right: 10px;}
	#information .box:nth-of-type(2) {
	padding-left: 5px;
	padding-right: 5px;
	}
	#information .box:nth-of-type(3) {padding-left: 10px;}
	#information .box::before {
	width: calc(100% - 10px);
	height: 100%;
	content: '';
	position: absolute;
	z-index: -1;
	}
	#information .box:nth-of-type(1)::before {
	background: #3e444a;
	left: 0;
	bottom: 122px;
	}
	#information .box:nth-of-type(2)::before {
	background: #fff;
	left: 5px;
	bottom: 122px;
	}
	#information .box:nth-of-type(3)::before {
	background: #3e444a;
	right: 0;
	bottom: 0;
	}
	#information h3 {
	margin: 20px 0 0;
	font-size: 25px;
	}
	#information .box:nth-of-type(-n+2) h3:nth-of-type(2) {
	width: calc(100% - 10px);
	position: absolute;
	bottom: 0;
	}
	#information .box:nth-of-type(1) h3:nth-of-type(2) {left: 0;}
	#information .box:nth-of-type(2) h3:nth-of-type(2) {left: 5px;}
	#information h3:nth-of-type(1) a:hover span:nth-of-type(1) {font-size: 25px;}
	#information h3 a:hover span + span {font-size: 23px;}
	#support {padding: 64px 20px 150px;}
	footer nav form > ul > li {
	width: calc((100% - 1px) / 7);
	padding: 10px 0 10px 10px;
	float: left;
	}
	footer nav li li a::before {
	width: 2px;
	height: 2px;
	margin: auto;
	content: "";
	background: #fff;
	display: block;
	border-radius: 2px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	}
	footer nav .mynavi_link {padding: 5px 0;}
	footer #condition .fix_bottom {width: 75px;}
	footer #condition .fix_bottom .back_top,
	footer #condition .fix_bottom a {
	width: 65px;
	height: 65px;
	}
	footer #condition .fix_bottom a {
	padding-top: 40px;
	background-position: center 16px;
	}
	footer #condition dl {
	margin-right: 155px;
	padding: 20px 0 2em;
	}
	footer #condition .intercast {
	margin: 20px 20px 0 20px;
	position: absolute;
	right: 0;
	bottom: 0;
	}
}
@media all and (max-width:1800px) and (min-width:994.9px) {
	#support a {width: calc(((100% - 1px) / 3) - 10px);}
	#support a:nth-of-type(3n+1) {margin: 0 10px 20px 0;}
	#support a:nth-of-type(3n+2) {margin: 0 5px 20px;}
	#support a:nth-of-type(3n+3) {margin: 0 0 20px 10px;}
}
@media all and (max-width:1150px) and (min-width:994.9px) {
	footer nav form > ul {margin: 0 0 0 10px;}
	footer nav li li {font-size: 10px;}
}
@media all and (max-width:994.9px) {
	article h2:not(article #information h2) {font-size: 36px;}
	article h2 span:not(article #information h2 span) {font-size: 64px;}
	article h3:not(article #information h3) {font-size: 30px;}
	article h3 span:not(article #information h3 span){font-size: 20px;}
	article h4:not(article #information h4) {font-size: 20px;}
	article h4 span:not(article #information h4 span) {
	padding-top: .5em;
	font-size: 16px;
	line-height: 1em;
	}
	article #information h2, aside h2 {font-size: 25px;}
	#kv .box {
	padding-top: 224px;
	padding-bottom: 10vw;
	}
	#submenuData li {
	width: 50%;
	height: 100px;
	}
	.message {position: relative;}
	.message::before {
	max-width: 600px;
	width: 100%;
	height: 100%;
	content: '';
	visibility: visible;
	background: url(/jpn/images/common/message.svg) no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	left: 0;
	top: 0;
	opacity: .7;
	z-index: 2;
	}
	.message::after {
	width: 100%;
	height: 100%;
	margin-left: 10vw;
	margin-right: 10vw;
	padding: 20px 0;
	content: 'MESSAGE';
	font-size: 28px;
	visibility: visible;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	}
	.message .container {
	max-width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
	}
	.message .container::before {
	width: 100%;
	height: 550px;
	margin: 0 auto -50px;
	content: '';
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	display: block;
	position: relative;
	z-index: -1;
	}
	.message .container::after {
	width: 100%;
	height: 150px;
	content: '';
	visibility: visible;
	background: linear-gradient(rgba(10,10,10,0), rgba(10,10,10,1));
	position: absolute;
	left: 0;
	top: 400px;
	z-index: 1;
	}
	.message .interviewee {
	margin-left: 10vw;
	margin-right: 10vw;
	padding: 0;
	left: 0;
	top: 420px;
	}
	.message .box {
	padding: 60px 10vw;
	z-index: 2;
	}
	.message h4 {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	}
	.message .box br {display: none;}
	.video .wrap {padding: 20px 0;}
	.video .box + .box {margin-top: 20px;}
	.related {padding: 60px 0 120px;}
	.related a,
	.related .box{padding: 40px 20px;}
	.related h4 {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	}
	#information h3 {
	margin: 20px 0;
	font-size: 18px;
	}
	#information h3:nth-of-type(1) a:hover span:nth-of-type(1) {font-size: 18px;}
	#information h3 a:hover span + span {font-size: 18px;}
	#information ul {background: #3e444a;}
	#information .box:nth-of-type(2) ul {background: #fff;}
	#support {padding: 64px 20px 0;}
	footer {font-size: 10px;}
	footer nav form > ul {text-align: center;}
	footer nav form > ul > li {
	width: 100%;
	height: 100%;
	overflow: hidden;
	}
	footer nav form > ul > li > a,
	footer nav form > ul > li > span {
	padding-left: 10px;
	display: inline-block;
	}
	footer nav form > ul > li > .mynavi_link {padding-left: 0;}
	footer nav form > ul > li input + label {
	width: 20px;
	height: 20px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	}
	footer nav form > ul > li input + label:hover::before,
	footer nav form > ul > li input + label:hover::after {background: rgba(229, 224, 0, 1);}
	footer nav form > ul > li input + label::before,
	footer nav form > ul > li input + label::after {
	margin: auto;
	content: "";
	background: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	}
	footer nav form > ul > li input + label::before {
	width: 10px;
	height: 1px;
	}
	footer nav form > ul > li input + label::after {
	width: 1px;
	height: 10px;
	transition: .5s ease;
	}
	footer nav form > ul > li input:checked + label::after {height: 0;}
	footer nav form > ul > li input ~ ul {
	max-height: 0;
	visibility: hidden;
	display: block;
	opacity: 0;
	transition: .2s linear;
	}
	footer nav form > ul > li input:checked ~ ul {
	max-height: 10em;
	visibility: visible;
	opacity: 1;
	}
	footer #condition .fix_bottom {
	width: 45px;
	padding: 0;
	}
	footer #condition .fix_bottom .back_top,
	footer #condition .fix_bottom a {
	width: 45px;
	height: 45px;
	}
	footer #condition .fix_bottom a {
	padding-top: 28px;
	background-position: center 8px;
	}
	footer #condition dl {padding: 20px 0 3.5em;}
	footer #condition small {
	margin-right: 0;
	margin-bottom: 20px;
	clear: both;
	}
	footer #condition .intercast {margin: 20px 0 0;}
}
@media all and (max-width:994.9px) and (min-width:500px) {
	#information .container {
	max-width: 1395px;
	margin: 0 auto;
	padding: 20px 10vw;
	}
	#support a {width: calc((100% / 2) - 10px);}
	#support a:nth-of-type(2n+1) {margin: 0 10px 20px 0;}
	#support a:nth-of-type(2n+2) {margin: 0 0 20px 10px;}
}
@media screen and (max-width:700px) {
	h2 br, h3 br, h4 br, #kv br {display: none;}
	article h4:not(article #information h4) {text-align: left;}
}
@media screen and (max-width:500px) {
	article .container {
	max-width: 100%;
	margin: 0;
	padding: 20px;
	}
	#information .container {padding: 20px;}
	#support a {
	width: 100%;
	margin: 0 0 20px !important;
	}
}



@media (min-width: 995px)
{
	#recruit .related
	{
		padding-bottom: 0!important;
	}
	#recruit .message,
	#history .episode,
	#outline .companies,
	#privacy .takumi
	{
		margin-bottom: 150px!important;
	}
}

@media (max-width: 994.9px)
{
	#recruit .related
	{
	    padding-bottom: 0!important;
	}
	#recruit .message,
	#history .episode,
	#outline .companies,
	#privacy .takumi
	{
		margin-bottom: 120px!important;
	}
}



#information .recruit_bnr img {
width: 100%;
}

#information .recruit_bnr {
padding-bottom: 60px;
}

@media (min-width: 995px){
#information .recruit_bnr {
padding-right: 24px;
}
}

@media (max-width: 994.9px){
#information .recruit_bnr {
padding-top: 0px;
padding-bottom: 20px;
}
}