@charset "utf-8";
/*
Theme Name: headlock new
*/


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,picture,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #272E2C; text-decoration: none;}
@media screen and (min-width: 768px){ a { transition: .2s ease-out;} a[href*="tel"] { pointer-events: none;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; background: #F7F7F5 url("img/common/bg.png") center top repeat; width: 100%; font-family: 'heisei-kaku-gothic-std', YuGothic, '游ゴシック', 'Yu Gothic Medium', 'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif; font-size: 1.5rem; font-weight: 500; line-height: 1.4; -webkit-font-smoothing: antialiased; word-break: break-all; color: #272E2C;}
#container { position: relative; width: 100%;}
body:not(.home):not(.recruit)::after { content: ''; position: absolute; top: 85px; left: 0; width: 100%; height: 492px; background: url("img/common/dot.svg") center top no-repeat; pointer-events: none;}
i, time, address, .en, .pagination { font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-style: italic; line-height: 1;}
.shutter { position: fixed; top: 0; right: 0; transform: scaleX(1); width: 100vw; min-height: 100vh; min-height: 100svh; background: #01AF88; pointer-events: none; transition: .6s; z-index: 10000;}
body.home .shutter { opacity: 0;} 
body.in .shutter { right: 0; animation: slideIn .2s cubic-bezier(0.215, 0.61, 0.355, 1); animation-fill-mode: both;}
body.out .shutter { opacity: 1; right: auto; left: 0; animation: slideOut .2s cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-fill-mode: both;}
@keyframes slideIn { 0% { transform-origin: right top; transform: scaleX(1);} 100% { transform-origin: right top; transform: scaleX(0);}}
@keyframes slideOut { 0% { transform-origin: left top; transform: scaleX(0);} 100% { transform-origin: left top; transform: scaleX(1);}}


/*HEADER*/
/*******************************************************************/
#header { position: relative; padding: 45px 120px; z-index: 9000;}
#logo { position: fixed; top: 32px; left: 48px; z-index: 9000;}
#nav { position: fixed; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 100vh; background: rgba(92,114,108,.7); z-index: 8000; pointer-events: none; opacity: 0;}
#nav::before { content: ''; position: fixed; top: 15px; right: 15px; width: calc(100% - 30px); height: calc(100% - 30px); background: #FFF; border-radius: 32px; z-index: -1; transform-origin: right top; transform: scale(0.9); transition: .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#navbox { display: grid; grid-template-columns: auto 1fr; gap: 40px 8%; width: 100%; max-width: calc(1166px + 22%); margin: 0 auto; padding: 0 11%;}
#navbox > * { opacity: 0; transition: .3s ease-out .3s;}
#navbox > ul { display: grid; gap: 24px; transform: translateX(-5px);}
#navbox > ul > li > a { display: block; font-size: 1.4rem; letter-spacing: 0.09em; color: #5C726C;}
#navbox > ul > li > a > i { display: block; margin-bottom: 4px; font-size: 4.6rem; letter-spacing: 0; color: #272E2C;}
.navrecruit { grid-column: 2 / 3; grid-row: 1 / 3; display: flex; justify-content: center; padding-left: 8%; border-left: 1px solid #A1ADAA;}
.navrecruit .navsecond { margin-top: 2vh;}
.navrecruit .navsecond .navlist { grid-template-columns: repeat(2,1fr); align-items: flex-start;}
/*first*/
.navrecruit .navsecond .navlist { gap: 24px;}
.navrecruit .navsecond .navlist > li:nth-child(2) { grid-column: 1 / 2; grid-row: 1 / 5;}
/*secound
.navrecruit .navsecond .navlist > li:nth-child(4) { order: 1;}
.navrecruit .navsecond .navlist > li:nth-child(6) { order: 2;}
*/
.navfooter { align-self: flex-end; display: grid; gap: 10px;}
#navbox .navfooter { transform: translateX(-5px);}.navrecruit .navsecond
.navfooter li a { font-size: 1.3rem; text-decoration: underline; color: #272E2C;}
.navlist { display: grid; gap: 4vh;}
.navlist > li > a > figure img { border-radius: 8px;}
.navlist > li > a > span { position: relative; display: block; margin-top: 16px; padding-left: 16px; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em;}
.navlist > li > a > span::before { content: ''; position: absolute; top: 0.5em; left: 0; width: 6px; height: 1px; background: #01AF88;}
.navlist ul { display: grid; gap: 10px; margin: 16px 0 0 16px;}
.navlist ul li a { display: block; font-size: 1.3rem; letter-spacing: 0.09em;}
#open { position: fixed; top: 25px; right: 25px; width: 56px; height: 56px; background: #FFF url("img/common/open.svg") center no-repeat; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,.16); cursor: pointer; z-index: 8888; transition: .2s ease-in-out;}
.nav-open { background: #FFF; border-bottom: 1px solid #DDD;}
.nav-open #nav { pointer-events: auto; opacity: 1;}
.nav-open #nav::before { transform: scale(1);}
.nav-open #navbox > * { transform: translateX(0); opacity: 1;}
.nav-open #open { background-color: #01AF88; background-image: url("img/common/close_w.svg");}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; display: grid; grid-template-columns: 24% 1fr; grid-template-rows: auto auto; padding: 80px 11% 120px; background: #272E2C url("img/common/headlock.svg") center no-repeat; background-size: 78% auto; z-index: 1000;}
#info p { margin-top: 32px; font-family: 'Noto Sans JP', sans-serif; font-size: 1em; transform-origin: left top; transform: scale(0.7); font-weight: 400; line-height: 1.8; color: #FFF;}
#info p .shuffletext { display: block;}
#sitemap {grid-column: 2 / 3; grid-row: 1 / 3; display: flex; justify-content: flex-end; gap: 6%; white-space: nowrap;}
#sitemap a { color: rgba(255,255,255,.7);}
#sitemap > ul { display: flex; flex-direction: column; gap: 32px;}
#sitemap > ul > li > a { position: relative; display: inline-block; padding-left: 20px; font-size: 1.6rem; letter-spacing: 0.09em;}
#sitemap > ul > li > a::before { content: ''; position: absolute; top: 0.4em; left: 0; width: 6px; height: 6px; background: rgba(220,226,224,.5); border-radius: 50%; transition: .2s ease-out;}
#sitemap > ul > li > ul { display: flex; flex-direction: column; gap: 20px; margin: 16px 0 0 20px;}
#sitemap > ul > li > ul > li a { position: relative; display: inline-block; padding-left: 16px; font-size: 1.3rem; letter-spacing: 0.09em;}
#sitemap > ul > li > ul > li > a::before { content: ''; position: absolute; top: 0.5em; left: 0; width: 6px; height: 1px; background: #DCE2E0; transition: .2s ease-out;}
#sitemap > ul > li > ul > li li { margin-top: 8px;}
#pagetop { position: absolute; bottom: 0; right: 11%;}
#pagetop a { display: block; animation: pagetop 3s ease infinite;}
#pagetop a img { width: 60px; transform-origin: left top; transform: rotate(-90deg) translateY(200%);}
@keyframes pagetop { 0% { transform: translateY(0);} 80% { transform: translateY(0);} 85% { transform: translateY(-10px);} 90% { transform: translateY(-5px);} 95% { transform: translateY(-10px);} 100% { transform: translateY(0);}}
#footer .navfooter { align-self: flex-end; color: #A1ADAA;}
#footer .navfooter li a { color: #9FA0A0;}
.copyright { display: block; font-family: 'Nunito Sans', sans-serif; font-size: 1.1rem; font-weight: 400; font-style: normal;}
#footerlink { display: none;}



/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 7% 11%;}
article header { position: relative; display: flex; gap: 0 24px; margin-bottom: 48px; z-index: 100;}
article header .en { font-size: 6.7rem;}
article header h2 { font-size: 3.2rem; font-weight: 500;}
article header .en + h2 { padding-top: 3.2em; font-size: 1.4rem;}
section { position: relative; z-index: 100;}
section + section { margin-top: 11%;}
section p, section li, section dt, section dd, section table { line-height: 2;}
section * + p { margin-top: 1em;}
figure { position: relative;}
.fit { padding-bottom: 0;}
.center { text-align: center;}
.right { text-align: right;}
.reverse { flex-direction: row-reverse;}
.arrbtn { margin-top: 40px;}
.arrbtn a { position: relative; display: inline-block; height: 142px; padding-right: 169px; line-height: 142px;}
.arrbtn a span { display: block; transition: .4s ease-out;}
.arrbtn a::before { content: ''; position: absolute; top: 50%; right: 71px; transform: translate(50%,-50%); width: 142px; height: 142px; border: 2px solid #DCE2E0; border-radius: 50%; transition: .2s ease-out;}
.arrbtn a::after { content: ''; position: absolute; top: 50%; right: 71px; transform: translate(50%,-50%); width: 32px; height: 28px; background: url("img/common/arr.svg") center no-repeat; transition: .2s ease-out;}
.arrbtn.invertion a::after { background-image: url("img/common/arr_w.svg");}
.boxbtn { margin-top: 40px;}
.boxbtn a { display: inline-block; min-width: 190px; padding: 20px 48px 18px 24px; text-align: left; background: url("img/common/arr.svg") right 20px center no-repeat; background-size: 13px auto; border: 1px solid #01AF88; border-radius: 40px; text-decoration: none!important; color: #01AF88;}
.backbtn { margin-top: 40px; text-align: center;}
.backbtn a { position: relative; display: inline-block; padding-left: 32px;}
.backbtn a::after { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%) scale(-1); width: 32px; height: 28px; background: url("img/common/arr.svg") center no-repeat; background-size: 19px auto;}
.blank { position: relative; display: inline-block; padding-right: 20px; font-size: 1.3rem; font-weight: 700; line-height: 1; text-decoration: underline; color: #01AF88;}
.blank::after { content: ''; position: absolute; bottom: -1px; right: -2px; transform-origin: left bottom; transform: rotate(-45deg); display: block; width: 13px; height: 10px; background: url("img/common/arr.svg") center no-repeat; background-size: 13px 10px;}
.fs11 { font-size: 1.1rem!important; line-height: 1.2;}
.fs12 { font-size: 1.2rem!important; line-height: 1.2;}
.grey { color: #5C726C!important;}
.sp { display: none;}
.rellax { position: relative; display: block;}
.shuffletext { display: inline-block; padding-right: 0.05em; opacity: 0; overflow: hidden;}


/*TOP*/
#loadingbg { position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; min-height: 100svh; background: #FFF; pointer-events: none; z-index: 100;}
body.start #loadingbg { animation: loadingBg 0.2s ease-out 0s both;}
@keyframes loadingBg { 0% { background: rgba(255,255,255,1);} 99% { display: block; background: rgba(255,255,255,0);} 100% { display: none; background: rgba(255,255,255,0);}}
#loading { position: fixed; top: 50%; left: 50%; width: 77%; transform: translate(-50%,-50%); mix-blend-mode: exclusion; pointer-events: none; z-index: 200;}
#loading svg { width: 100%;}
#loading.off .loader { fill: #fff; stroke: #fff;}
#loading.on .loader { fill: #fff; stroke: #fff; stroke-miterlimit: 10; animation: loaderStroke 0.8s ease-in-out 0s both, loaderFill 0.8s ease-in-out 0.6s both;}
@keyframes loaderStroke { 0% { stroke-dashoffset: 2402.84619140625px; stroke-dasharray: 2402.84619140625px;} 100% { stroke-dashoffset: 0; stroke-dasharray: 2402.84619140625px;}}
@keyframes loaderFill { 0% { fill: transparent;} 100% { fill: rgb(255, 255, 255);}}
.business { position: absolute; top: 60vh; left: 11%; font-family: 'Noto Sans JP', sans-serif; font-size: 1em; transform: scale(0.9); font-weight: 400; line-height: 1.8; pointer-events: none; z-index: 200;}
.business .shuffletext { display: block; opacity: 0;}
body.home #header { position: absolute; top: 0; left: 0; width: 100%;}
body.home #logo, body.home #menu, body.home #open, #scroll { opacity: 0; transform: translateY(-10px);}
body.home .deco1, body.home .deco2, body.home .deco3 { position: absolute; opacity: 0; transform: translateY(40px);}
body.home.start #logo, body.home.start #menu, body.home.start #open, body.home.start #scroll { animation: fadeDown 0.8s ease-out 0s both;}
body.home.start .deco1, body.home.start .deco2, body.home.start .deco3 { animation: fadeUp 0.8s ease-out 0s both;}
body.home .deco1 { top: 32%; left: -48px;}
body.home .deco1 img { transform: rotate(153deg) scale(0.9); width: 102px;}
body.home .deco2 { bottom: 4%; left: 54%;}
body.home .deco2 img { transform: rotate(-17deg) scale(0.9); width: 230px;}
body.home .deco3 { top: 20%; right: 106px;}
body.home .deco3 img { transform: rotate(13deg) scale(0.9); width: 90px;}
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(40px);} 100% { opacity: 1; transform: translateY(0);}}
@keyframes fadeDown { 0% { opacity: 0; transform: translateY(-10px);} 100% { opacity: 1; transform: translateY(0);}}
.movie { position: fixed; width: 100%; min-height: 100vh; min-height: 100svh; background: url("img/top/poster.jpg") center no-repeat; background-size: cover; -webkit-mask-image: url("img/top/mask.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -webkit-mask-size: 38%; mask-image: url("img/top/mask.svg"); mask-repeat: no-repeat; mask-position: 50% 50%; mask-size: 38%; transform: scale(1.1); transition: 0.3s ease;}
body.start .movie { transform: scale(1); opacity: 1;}
.movie #video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  min-height: 100%; min-width: 100%; z-index: 0;}
#mv { min-height: 100vh; min-height: 100svh; padding: 0; background: #F7F7F5 url("img/common/bg.png") center top repeat;}
#mv::after { content: ''; position: absolute; top: 85px; left: 0; width: 100%; height: 943px; background: url("img/top/dot1.svg") center top no-repeat; pointer-events: none;}
#mv section { position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; padding: 15vh 11%;}
#scroll { position: absolute; bottom: 80px; right: 0;}
body.home.start #scroll.off, body.recruit #scroll.off { pointer-events: none; animation: scrollOff 0.4s ease-out 0s both;}
@keyframes scrollOff { 0% { opacity: 1;} 100% { opacity: 0;}}
#scroll a { display: block; animation: scroll 3s ease 2s infinite;}
@keyframes scroll { 0% { transform: translateY(0);} 80% { transform: translateY(0);} 85% { transform: translateY(10px);} 90% { transform: translateY(5px);} 95% { transform: translateY(10px);} 100% { transform: translateY(0);}}
#scroll img { width: 60px; transform-origin: left top; transform: rotate(90deg);}
#spacer { height: 16vh; padding: 0; background: rgb(247,247,245); background: linear-gradient(0deg, rgba(247,247,245,0.93) 0%, rgba(247,247,245,0) 70%); z-index: 1000;}
#topservices { background: rgb(247,247,245); background: linear-gradient(0deg, rgba(247,247,245,1) 0%, rgba(247,247,245,0.93) 100%); z-index: 1000;}
#topservices::after { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1552px; background: url("img/top/dot2.svg") center no-repeat; pointer-events: none; z-index: 0;}
#topservices header h2 { font-size: 9.2rem; font-weight: 900; letter-spacing: -0.03em;}
#topservices section { width: 510px; margin: 0 8% 0 auto;}
#topservices .deco4 { position: absolute; left: 16%; bottom: 32%;}
#topservices .deco4 img { transform: rotate(30deg) scale(0.9); width: 93px;}
#topservices .deco5 { position: absolute; top: 11%; right: 22%;}
#topservices .deco5 img { width: 180px; animation: rotate 18s linear infinite;}
@keyframes rotate { from { transform: rotate(0);} to { transform: rotate(1turn);}}
#topnews { background: #EBEBEB url("img/common/bg.png") center top repeat; z-index: 900;}
#topnews section { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 0 8%; align-items: flex-start;}
#topnews .tab ul { display: flex; flex-direction: column; gap: 30px;}
#topnews .tab li { display: flex; align-items: center; height: 20px; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.45; transition: 0.25s ease-out;}
#topnews .tab li:hover, #topnews .tab li.on { opacity: 1;}
#topnews .tab li.on { padding-left: 20px;}
#topnews .tabcurrent { position: absolute; top: 0; left: 0; display: flex; align-items: center; width: 6px; height: 16px; transition: 0.25s ease-out;}
#topnews .tabcurrent::before { content: ''; display: block; width: 6px; height: 6px; background: #01AF88; border-radius: 50%;}
#topnews .tabcontents { grid-column: 2 / 3; grid-row: 1 / 3;}
.tabcontents > *:not(:first-child) { display: none;}
.infolist { display: grid; gap: 40px;}
.infolist li { display: grid; grid-template-columns: auto auto 1fr; gap: 32px;}
.infolist time { font-size: 1.6rem; line-height: 2; color: #A1ADAA;}
.infolist .cat { align-self: flex-start; min-width: 118px; padding: 8px 4px 6px; text-align: center; background: #01AF88; border-radius: 4px; font-size: 1.3rem; line-height: 1; color: #FFF;}
.infolist h3 { font-size: 1.6rem;}
.infolist p { font-size: 1.4rem; line-height: 1.2; color: #5C726C;}
#topworks { padding-bottom: 8%; background: #272E2C; color: #FFF; overflow: hidden; z-index: 1000;}
#topworks::after { content: ''; position: absolute; top: 72px; left: 0; width: 100%; height: 1238px; background: url("img/top/dot3.svg") center top no-repeat; pointer-events: none; z-index: 0;}
#topworks section { margin-top: 80px; opacity: 0; transform: translateX(15%); transition: 1.6s ease-out;}
#topworks.on section { opacity: 1; transform: translateX(0);}
#topworks .swiper { overflow: visible;}
#topworks .swiper-slide a { display: block;}
#topworks .swiper-slide figure { margin-bottom: 24px; padding-top: calc(350 / 524 * 100%); border-radius: 20px; overflow: hidden;}
#topworks .swiper-slide figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: transform .2s ease-out;}
#topworks .swiper-slide h3 { margin-bottom: 8px; font-size: 2.2rem; font-weight: 700; color: #DCE2E0;}
#topworks .swiper-slide a .hoverbtn { position: absolute; right: 0; bottom: -4px; width: 14%; padding-top: 14%; border: 2px solid #01AF88; border-radius: 50%; overflow: hidden;}
#topworks .swiper-slide a .hoverbtn::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: 20px; height: 17px; background: url("img/common/arr.svg") center no-repeat; background-size: contain; transition: transform .4s ease-out;}
#topworks .swiper-slide a .hoverbtn::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 100%; background-color: #01AF88; border-radius: 50%; z-index: 0; transform: translate(-50%,0) scale(0.01); transition: transform .4s ease-out;}
#topworks .swiper-slide .tag { padding-right: 20%;}
#topworks .swiper-slide a[target] .hoverbtn::after { transform: translate(-50%,-50%) rotate(-45deg);}
#topworks .swiper-slide a[target] .hoverbtn::before { transform: translate(-50%,50%) scale(0.01);}
#topworks .swiper-nav { position: absolute; bottom: -15%; right: 0; display: flex; gap: 64px;}
#topworks .swiper-prev, #topworks .swiper-next { display: block; width: 18px; height: 30px; background: url("img/top/next.svg") center no-repeat; cursor: pointer; transition: .2s ease-out;}
#topworks .swiper-prev.swiper-button-disabled, #topworks .swiper-next.swiper-button-disabled { opacity: 0.5;}
#topworks .swiper-prev { transform: scaleX(-1);}
.period { display: flex; align-items: center; gap: 8px; font-family: 'heisei-kaku-gothic-std', YuGothic, '游ゴシック', 'Yu Gothic Medium', 'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif; font-size: 1.3rem; font-style: normal; color: #35D6BE;}
.period::before { content: ''; width: 6px; height: 6px; background: #35D6BE; border-radius: 50%;} 
.period.end { color: #A1ADAA;}
.period.end::before { background-color: #A1ADAA;}
.tag { margin-top: 12px; line-height: 1.2; color: #A1ADAA;}
.tag li { display: inline; font-size: 1.3rem; line-height: 1.2;}
.tag li:not(:first-child)::before { content: ' ｜ ';}
#toprecruit { background: #FFF url("img/common/bg.png") center top repeat; color: #FFF; z-index: 900; overflow: hidden;}
#toprecruit::after { content: ''; position: absolute; top: 147px; left: 0; width: 100%; height: 1267px; background: url("img/top/dot4.svg") center top no-repeat; pointer-events: none; z-index: 50;}
.recruitbg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8); width: 100%; height: 100%; background: #35D6BE; border-radius: 154px; transform-origin: center; z-index: 10;}
#toprecruit header { flex-direction: column; align-items: center;}
#toprecruit header .en + h2 { padding-top: 0;}
#toprecruit figure { margin: 0 56px -48px;}
#toprecruit figure img { width: 100%; border-radius: 16px;}
#toprecruit h3 { position: relative; font-size: 6.4rem; font-weight: 900; letter-spacing: -0.06em; line-height: 1.2;}
#toprecruit p { max-width: 530px;}
#toprecruit .arrbtn { position: absolute; bottom: 0; right: 0; z-index: 200;}
#tophistory { background: #FFF url("img/common/bg.png") center top repeat; z-index: 900; overflow: hidden;}
#tophistory::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("img/top/historybg1.png") center no-repeat; background-size: contain; z-index: 50;}
#tophistory::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("img/top/historybg2.png") center no-repeat; background-size: contain; z-index: 60; mix-blend-mode: soft-light;}
#tophistory h3 { margin-bottom: 130px; font-size: 2.7rem; font-weight: 900; letter-spacing: -0.03em;}
#tophistory figure { position: static; float: left; width: 50%;}
#tophistory figure > span { position: absolute;}
#tophistory figure > span img { max-width: initial; border-radius: 10px; box-shadow: 0 3px 20px rgba(60,111,100,.55);}
#tophistory figure .historyimg01 { top: -160px; left: -240px; opacity: 0.72;}
#tophistory figure .historyimg02 { position: relative; display: block;}
#tophistory figure .historyimg02 img { max-width: 100%;}
#tophistory figure .historyimg03 { top: 0; left: 52%;}
#tophistory figure .historyimg04 { top: 120px; left: 70%; opacity: 0.72;}
#tophistory figure .historyimg05 { top: -100px; left: 82%;}
#tophistory figure .historyimg06 { top: 260px; left: 98%;}
#tophistory p { float: right; width: 45%; margin: 160px 0 56px;}
#tophistory .arrbtn { clear: both;}
#toplink { margin-top: -2px; padding: 4% 11%; background: #FFF url("img/common/bg.png") center top repeat; z-index: 1000;}
#toplink section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1116px; margin: 0 auto; background: #FFF url("img/common/bg.png") center top repeat;}
#toplink a { position: relative; display: block; padding: 40px 0;}
#toplink figure { position: absolute; top: -56px; right: calc(50% + 40px); width: 37%; z-index: 0; opacity: 0; transform: rotate(0); transition: .4s ease-out; pointer-events: none;}
#toplink figure:nth-of-type(2) { right: 0;}
#toplink a .en { position: relative; font-size: 6.7rem; color: #FFF; mix-blend-mode: exclusion; z-index: 10;}
#toplink a h2 { margin: 16px 0 32px; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.09em;}
#toplink a .mask { font-size: 1.4rem; font-style: normal; letter-spacing: 0.09em; color: #01AF88; transition: .4s ease-out; -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0);}


/*PAGE*/
#title { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px 32px; padding: 64px 26% 0 11%; z-index: 100;}
#title .en { font-size: 10.8rem; word-break: normal; text-transform: capitalize;}
#title h1 { transform: translateY(-1em); font-size: 1.4rem;}
#title .sub { position: absolute; bottom: -32px; left: 11%; padding: 4px 12px 0; background: #FFF; border: 1px solid #01AF88; border-radius: 6px; font-size: 1.8rem; font-weight: 700; color: #01AF88;}
#breadcrumb { position: fixed; bottom: 24px; right: 32px; font-family: 'Nunito Sans', 'heisei-kaku-gothic-std',sans-serif; font-weight: 800; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways; z-index: 1000;}
#breadcrumb ul { display: flex; font-size: 1.2rem; line-height: 1;}
#breadcrumb li { display: flex; align-items: center;}
#breadcrumb li img { vertical-align: baseline;}
#breadcrumb li:not(:first-child)::before { content: ''; display: block; vertical-align: middle; width: 1px; height: 24px; margin: 10px 0; background: #D6D6D6;}
#siblings { padding: 0; z-index: 500;}
#siblings a { position: relative; display: flex; justify-content: center; align-items: center; padding: 7% 11%; background: #FFF;}
#siblings a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(1,175,136); background: linear-gradient(90deg, rgba(1,175,136,0) 0%, rgba(1,175,136,1) 90%); z-index: 1; transition: .3s ease-out;}
#siblings a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("img/common/noise.jpg") center repeat; z-index: 2; mix-blend-mode: soft-light;}
#siblings a header {  position: absolute; top: 50%; left: 11%; transform: translateY(-50%); display: block;}
#siblings a header > div { margin-bottom: 8px; font-family: 'Nunito Sans', sans-serif; font-weight: 800; line-height: 1;}
#siblings a header .en { position: relative; display: block; font-size: 9.7rem;}
#siblings a header .en span { display: block; color: #A1ADAA; -webkit-clip-path: inset(0); clip-path: inset(0); transition: 0.3s ease-out;}
#siblings a header .en span.mask { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; color: #01AF88; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);}
#siblings a header h2 { padding-top: 8px;}
#siblings a figure { position: relative; display: flex; align-items: flex-end; transform: translateX(10%);z-index: 50;}
#siblings a figure span { position: relative; display: inline-block; border-radius: 16px; overflow: hidden;}
#siblings a figure span img { border-radius: 16px;}
#siblings a figure span.hoverimg1::after { content: ''; position: absolute; top: 0; left: -50%; width: 100%; height: 100%; background: #35D6BE; opacity: 0; transition: .3s ease-out;}
#siblings a figure span.hoverimg2 { margin: 0 0 -10% -10%; opacity: 0.6; z-index: -1; transition: .3s ease-out;}
#siblings a .arr { position: absolute; bottom: calc(50% - 71px); right: 11%; width: 142px; height: 142px; background: url("img/common/arr_w.svg") center no-repeat; z-index: 100;}
#siblings a .arr::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 142px; height: 142px; border: 2px solid #DCE2E0; border-radius: 50%; transition: .3s ease-out;}


/*works*/
#works { padding-top: 2.4%; padding-bottom: 2.4%;}
#works h2 { margin-bottom: 2.4%; font-size: 2.7rem; font-weight: 900; letter-spacing: -0.03em;}
#output { display: flex; align-items: center; gap: 32px; margin-bottom: 2.4%;}
#output dt { font-family: 'Nunito Sans', sans-serif; font-size: 1.4rem; font-weight: 800; font-style: italic; line-height: 1; color: #01AF88;}
#output dd { height: 45px;}
#output dd span {  display: flex; align-items: center; height: 45px; transform: translateY(8px); opacity: 0; animation: output .3s ease-out both;}
@keyframes output { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);}}
#output .unselected { font-family: 'Nunito Sans', sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1; color: #A1ADAA;}
#output .selected { padding: 4px 72px 1px 32px; background: #DCE2E0 url("img/works/close.svg") right 16px center no-repeat; border-radius: 40px; line-height: 1; color: #5C726C; cursor: pointer;}
#filter { position: fixed; right: 5%; bottom: 4%; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 140px; height: 140px; cursor: pointer; z-index: 500;}
#filter i { padding-top: 32px; background: url("img/works/filter.svg") center top no-repeat; font-style: normal; color: #FFF;}
#filter::before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #01AF88; border-radius: 50%; z-index: -1; transition: .2s cubic-bezier(0.55, 0.055, 0.675, 0.19);;}
#searchlist { position: fixed; top: 0; right: 0; transform: translateX(100%); display: flex; flex-direction: column; justify-content: center; gap: 4vh; max-width: 100vw; min-height: 100vh; min-height: 100svh; padding: 4vh 11%; background: #01AF88 url("img/works/headlock.svg") right 20% center no-repeat; background-size: auto 110%; border-radius: 144px 0 0 144px; color: #FFF; z-index: 10000; pointer-events: none; opacity: 0; transition: .2s cubic-bezier(0.55, 0.055, 0.675, 0.19);;}
#searchlist .searchlistcontents { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;}
#searchlistbg { content: ''; position: fixed; top: 0; right: 0; display: block; width: 100vw; min-height: 100vh; min-height: 100svh; background: rgba(92,114,108,.5); z-index: 9000; pointer-events: none; opacity: 0; transition: .3s ease-out;}
#searchlist.open { transform: translateX(0); pointer-events: auto; opacity: 1;}
#searchlistbg.open { pointer-events: auto; opacity: 1;}
#searchlist dl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 40px;}
#searchlist dl:not(:first-of-type) { margin-top: 4vh;}
#searchlist dt { grid-column: 1 / 4; grid-row: 1 / 2; font-size: 2.4rem;}
#searchlist dd { display: flex; flex-direction: column; gap: 8px;}
#searchlist input[type="radio"] { display: none;}
#searchlist input[type="radio"] ~ span { font-weight: 700; color: #FFF; cursor: pointer; opacity: 0.7; transition: .2s ease-out;}
#searchlist input[type="radio"]:checked ~ span, #searchlist input[type="radio"] ~ span:hover { opacity: 1;}
#searchlist .close { position: absolute; bottom: 4%; right: 9%; display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; cursor: pointer; z-index: 10;}
#searchlist .close i { display: block; padding-top: 32px; background: url("img/works/close_w.svg") center top no-repeat; font-style: normal; letter-spacing: 0.09em;}
#searchcontents { padding-right: 100px;}
.grid { margin: 0 -16px;}
.grid-sizer, .grid-item { width: calc(100% / 3); padding: 16px 16px 72px;}
.worksbtn a { position: relative; display: block;}
.worksbtn .balloon { position: absolute; bottom: 100%; left: 16px; transform: translateY(12px); width: calc(100% - 32px);  padding: 4px 4px 1px; background: #FFF; text-align: center; border: 1px solid #A1ADAA; border-radius: 6px; font-weight: 900; color: #5C726C; opacity: 0; transition: .3s ease-out;}
.worksbtn .balloon::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 9px; height: 7px; background: url("img/works/balloon.png") center no-repeat;}
.worksbtn figure { margin-bottom: 16px; padding-top: calc(350 / 524 * 100%); overflow: hidden;}
.worksbtn figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease-out;}
.worksbtn figure::before { content: ''; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding-top: 64px; background: rgba(92,114,108,.8); border-radius: 16px; z-index: 1; opacity: 0; transition: .3s ease-out;}
.worksbtn figure i { content: ''; position: absolute; top: calc(50% - 8px); left: 0; transform: translateY(-50%); width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 1.4rem; font-weight: 800; font-style: normal; letter-spacing: 0.09em; color: #FFF; z-index: 1; opacity: 0; transition: .3s ease-out;}
.worksbtn figure i::before { content: ''; transform: rotate(-90deg); display: block; width: 26px; height: 26px; background: url("img/common/more.svg") center no-repeat; transition: .4s ease-out;}
.worksbtn h3 { margin-bottom: 8px; font-size: 2rem; font-weight: 700; line-height: 1.4;}
.workspu { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; max-width: 1166px; max-height: 90vh; margin: 5vh auto; background: #FFF; border-radius: 64px; animation: output .3s ease-out both;}
.worksimg { position: relative; padding: 8vh 8% 16px 12%; color: #5C726C;}
.worksimg figure { margin-bottom: 8px; text-align: center;}
.workscontents { grid-column: 2 / 3; grid-row: 1 / 3; margin-right: 9%;}
.workscontents h3 { margin: 40px 0 24px; font-size: 4.2rem; font-weight: 900; line-height: 1.2;}
.workscontents .tag { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;}
.workscontents .tag li { padding: 4px 6px 1px; border: 1px solid #A1ADAA; border-radius: 6px; font-size: 1.2rem;}
.workscontents .tag li::before { display: none;}
.workscontents p { line-height: 1.6; color: #5C726C;}
.comment { margin-top: 24px; padding: 8%; background: #E4EAE8; border-radius: 16px; color: #5C726C;}
.comment h4 { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 1.2rem; color: #01AF88;}
.comment h4 i { font-size: 1.6rem;}
.comment h5 { font-size: 1.9rem; font-weight: 900;}
.comment p { margin-top: 8px; font-size: 1.4rem;}
.prof { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 4px 16px; margin-top: 24px; padding-top: 24px; border-top: 1px dotted #01AF88;}
.prof figure { grid-column: 1 / 2; grid-row: 1 / 3;}
.prof h5 { font-size: 1.4rem; font-weight: 500; color: #01AF88;}
.prof p { font-size: 1.3rem;}
.scrollbar { position: relative; height: 100%; min-height: 460px; padding: 8vh 3% 8vh 0; overflow-y: auto; overflow-x: hidden;}
.scrollbar::-webkit-scrollbar { width: 4px;}
.scrollbar::-webkit-scrollbar-track { border-radius: 20px;}
.scrollbar::-webkit-scrollbar-thumb { border-radius: 20px;}
.workslink { padding: 0 0 8vh 12%;}


/*recruit*/
body.recruit { background: #35D6BE;}
body.recruit #header, body.player01 #header, body.player02 #header, body.player03 #header, body.player04 #header, body.player05 #header { position: absolute; top: 0; left: 0; width: 100%;}
#recruittitle { position: absolute; width: 100%; z-index: 50; pointer-events: none;}
#recruittitle .en { position: fixed; top: 18vh; left: 6%; font-size: 19.9rem; color: #FFF;}
#recruittitle h1 { position: absolute; top: 31vh; right: 9%; transform: translateY(-100%); font-size: 1.4rem; color: #FFF;}
#recruitmv { position: relative; width: auto; height: 94vh; max-width: initial; padding: 32vh 9% 0; background: #35D6BE url("img/recruit/bg.svg") center top no-repeat; overflow: hidden; z-index: 10;}
#recruitmv .swiper-slide { border-radius: 16px; overflow: hidden;}
#recruitmv .slide-img { position: relative; width: 100%; height: 62vh; overflow: hidden; transform: scale(1.125);}
#recruitmv .slide-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
@keyframes zoomUp { 0% { transform: scale(1.125);} 100% { transform: scale(1);}}
#recruitmv .swiper-slide-active .slide-img, #recruitmv .swiper-slide-duplicate-active .slide-img, #recruitmv .swiper-slide-prev .slide-img { animation: zoomUp 11.5s linear 0s 1 normal both;}
body.recruit #scroll { right: auto; left: -4%; bottom: 20px; opacity: 1; transform: translateY(0);}
.floatingnav { position: fixed; bottom: 48px; left: 60px; width: 180px; font-size: 1.4rem; z-index: 200; transition: .1s ease-out; mix-blend-mode: exclusion;}
#recruittitle + .floatingnav { opacity: 0; pointer-events: none;}
.floatingnav.on { opacity: 1!important; pointer-events: auto!important;}
.floatingnav ul { display: grid; gap: 24px; line-height: 1; white-space: nowrap;}
.floatingnav li a { position: relative; color: #FFF; opacity: .6;}
.floatingnav > ul > li > a, .floatingnav li a.on { font-weight: 700;}
.floatingnav li a:hover, .floatingnav li a.on { opacity: 1;}
.floatingnav li a.on::before { content: ''; position: absolute; top: calc(50% - 5px); left: -20px; width: 6px; height: 6px; background: #FFF; border-radius: 50%;}
.floatingnav ul ul { margin-top: 16px; gap: 16px;}
#floatingside { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 500;}
#recruitcopy { display: flex; flex-wrap: wrap; gap: 40px 80px; background: rgba(53,214,190,.89); z-index: 400;}
#recruitcopy header { flex: 1; align-self: center; margin-bottom: 0; white-space: nowrap;}
#recruitcopy header h2 { font-size: 4.8rem; font-weight: 900; letter-spacing: -0.03em; color: #FFF;}
#recruitcopy section { flex: 1; white-space: nowrap;}
#recruitcopy p { font-size: 2rem; font-weight: 900; color: #FFF;}
.recruitnews { position: absolute; top: -30px; right: 6%; width: 635px; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #FFF; border-radius: 6px;}
.recruitnews .swiper-nav { display: flex; justify-content: center; align-items: center;}
.recruitnews .swiper-prev, .recruitnews .swiper-next { display: block; width: 34px; height: 34px; background: url("img/common/arr.svg") center no-repeat; background-size: 13px auto; border-radius: 50%; cursor: pointer; transition: .2s ease-out;}
.recruitnews .swiper-prev.swiper-button-disabled, .recruitnews .swiper-next.swiper-button-disabled { background-image: url("img/common/arr_g.svg");}
.recruitnews .swiper-prev { transform: scaleX(-1);}
.recruitnews .swiper-list a { display: flex; justify-content: center; align-items: center; width: 24px; height: 34px;}
.recruitnews .swiper-wrapper { align-items: center; height: auto;}
.recruitnews .swiper-slide div { display: flex; align-items: center;}
.recruitnews .swiper-slide div span { font-size: 1.3rem; color: #5C726C; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.recruitnews .swiper-slide div time { display: inline-block; margin-right: 8px; color: #A1ADAA;}
#recruitabout { padding-left: 238px; background: #FFF; z-index: 100; overflow: hidden;}
#recruitabout ul, #recruitabout li { position: relative;}
#recruitabout ul::before { content: ''; position: absolute; top: 0; left: 0; width: 100vw; height: 1px; background: #272E2C;}
#recruitabout li::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100vw; height: 1px; background: #272E2C;}
#recruitabout li a { display: grid; grid-template-columns: 1fr 20%; align-items: center; gap: 80px; padding: 48px 0;}
.aboutitem i { color: #01AF88;}
.aboutitem h3 { font-size: 3.4rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.4;}
.aboutitem p { max-width: 660px;}
#recruitabout a .arrbtn { text-align: right; white-space: nowrap;}
#recruitabout a .arrbtn span { position: relative; display: inline-block; height: 70px; margin-left: auto; padding-right: 84px; line-height: 70px;}
#recruitabout a .arrbtn span::before { content: ''; position: absolute; top: 50%; right: 35px; transform: translate(50%,-50%); width: 70px; height: 70px; border: 2px solid #01AF88; border-radius: 50%; transition: .2s ease-out;}
#recruitabout a .arrbtn span::after { content: ''; position: absolute; top: 50%; right: 35px; transform: translate(50%,-50%); width: 32px; height: 28px; background: url("img/common/arr.svg") center no-repeat; background-size: 19px auto; transition: .2s ease-out;}
@keyframes stokerOn { 0% { clip-path: inset(100% 0 0 0);} 100% { clip-path: inset(0);}}
#player { padding: 0; background: #CFD5D5; z-index: 150;}
#player header { position: absolute; top: 0; left: 50%; transform: translate(-34%,-54%); z-index: 200; white-space: nowrap;}
#player.other header { top: 16px; left: 16px; transform-origin: left top; transform: rotate(90deg) translateY(-100%);}
#player.other header .en { font-size: 5.8vw;}
#player header .en { font-size: 11.7rem;}
#player header h2 { padding-top: 10%;}
.playermain { position: relative; z-index: 100;}
.playermain a { display: block;}
.playermain dl { position: absolute; bottom: 32%; left: 0; right: 0; width: 90%; max-width: 980px; margin: auto; padding-bottom: 72px; text-align: right; background: url("img/recruit/point.svg") right 0 bottom 24px no-repeat; z-index: 100;}
.playermain dl::after { content: ''; position: absolute; bottom: 0; right: 0; width: 32px; height: 28px; background: url("img/common/arr.svg") right bottom no-repeat;}
.playermain a:hover dl::after { animation: playerscroll 1s ease 0s infinite;}
@keyframes playerscroll { 0% { transform: translateX(0);} 20% { transform: translateX(0);} 40% { transform: translateX(10px);} 60% { transform: translateX(5px);} 80% { transform: translateX(10px);} 100% { transform: translateX(0);}}
.playermain dt i { font-size: 13.8rem; color: #FFF;}
.playermain dd { font-size: 1.4rem; color: #5C726C;}
.playermain dd.join { font-size: 1.3rem;}
.playerthumb { position: absolute; bottom: 10%; left: 0; right: 0; width: 90%; max-width: 980px; margin: auto; text-align: center; z-index: 100;}
.playerthumb .swiper-slide a { position: relative; display: block;}
.playerthumb .swiper-slide img { border: 1px solid #00CC9F; border-radius: 12px; filter: grayscale(100%); transition: .2s ease-out;}
.playerthumb .swiper-slide.on img { filter: grayscale(0%);}
.playercurrent { position: absolute; top: 0; left: 0; width: calc(100% - 7px); height: calc(100% - 7px); border: 4px solid #00CC9F; border-radius: 12px; z-index: 10; pointer-events: none; transition: 0.15s ease-out;}
#recruitstyle { padding-left: 238px; background: #E5EFEB; z-index: 100;}
#recruitstyle h3 { margin: 64px 0 24px; display: flex; align-items: center; gap: 16px; font-size: 2.2rem; font-weight: 900;}
#recruitstyle ul { display: grid; grid-template-columns: repeat(auto-fill,minmax(500px,1fr)); gap: 20px;}
#recruitstyle li { padding: 32px; background: #FFF; border-radius: 10px;}
#recruitstyle li h4 { position: relative; padding-left: 24px; line-height: 1;}
#recruitstyle li h4::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 8px; height: 8px; background: #00CC9F;}
#recruitstyle li p { padding-left: 24px; font-size: 1.4rem; color: #5C726C;}
#recruitentry { display: grid; grid-template-columns: 1fr 1fr; padding: 0; background: rgb(53,214,190); background: linear-gradient(138deg, rgba(53,214,190,1) 0%, rgba(1,175,136,1) 50%, rgba(63,126,111,1) 80%, rgba(60,110,99,1) 100%); color: #FFF; z-index: 2000;}
#recruitentry > div { padding: 80px 6%;}
#recruitentry > div:nth-child(2) { border-left: 1px solid rgba(255,255,255,.6);}
#recruitentry header { display: block; margin-bottom: 16px; text-align: center;}
#recruitentry header .en { display: block; margin-bottom: -16px;}
#recruitentry header h2 { padding: 0; font-size: 3.4rem; font-weight: 900;}
#recruitentry section p { text-align: center;}
.recruitbtn + .recruitbtn { margin-top: 24px;}
.recruitbtn dt { padding-bottom: 8px; font-weight: 700;}
.recruitbtn dt i { font-size: 3rem; margin-right: 16px;}
.recruitbtn dd { border-bottom: 1px solid #A1ADAA;}
.recruitbtn dd a { position: relative; display: block; padding: 24px 64px 24px 72px; background: url("img/common/arr.svg") right 32px center no-repeat; background-size: 19px auto; line-height: 1;}
.recruitbtn dd a::before { content: ''; position: absolute; top: 50%; left: 24px; transform: translateY(-50%); width: 8px; height: 8px; background: #01AF88;}
#recruitentry .recruitbtn dt { border-bottom: 1px solid #FFF;}
#recruitentry .recruitbtn dd { border-color: #FFF;}
#recruitentry .recruitbtn dd a { padding: 16px 40px 16px 40px; background-image: url("img/common/arr_w.svg"); background-position: right 24px center; background-size: 13px auto; font-size: 1.7rem; font-weight: 700; color: #FFF;}
#recruitentry .recruitbtn dd a::before { left: 16px; background: #FFF;}
#recruitentry .boxbtn { display: flex; gap: 16px; margin-top: 32px;}
#recruitentry .boxbtn a { flex: 1; padding: 24px 40px 24px 24px; background-color: #FFF; font-size: 1.4rem; font-weight: 700; line-height: 1; color: #01AF88;}
.entrybtn { margin-top: 64px;}
.entrybtn a { position: relative; display: flex; justify-content: center; align-items: center; padding: 5% 11%; background: #FFF; border-radius: 16px;}
.entrybtn a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(1,175,136); background: linear-gradient(90deg, rgba(132,229,207,.76) 0%, rgba(1,175,136,1) 50%); border-radius: 16px; z-index: 1; transition: .3s ease-out;}
.entrybtn a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("img/common/noise.jpg") center repeat; border-radius: 16px; z-index: 2; mix-blend-mode: soft-light;}
.entrybtn a i { position: relative; font-size: 6.5rem; color: #FFF; z-index: 10;}
.entrybtn a .arr { position: absolute; bottom: calc(50% - 71px); right: 11%; width: 142px; height: 142px; background: url("img/common/arr_w.svg") center no-repeat; z-index: 100;}
.entrybtn a .arr::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 142px; height: 142px; border: 2px solid #DCE2E0; border-radius: 50%; transition: .3s ease-out;}
#floatingprof { position: fixed; bottom: 40px; left: 48px; color: #FFF; z-index: 100;}
#floatingprof .name { position: fixed; bottom: calc(100vh - 120px); left: 50%; transform: translate(-50%,100%); font-size: 16.6rem; line-height: 1; transition: .4s ease-out;}
#floatingprof .name i { display: flex; flex-direction: column; align-items: center; transition: .4s ease-out;}
#floatingprof .name span { display: block; font-size: 1.4rem;}
#floatingprof dl { display: grid; gap: 4px; font-size: 1.2rem; line-height: 1.6; opacity: 0; transition: .6s ease-out;}
#playermv { padding: 0; min-height: 100vh; min-height: 100svh; overflow: hidden;}
#playermv header { position: absolute; top: 150px; left: 48px; flex-direction: column;}
#playermv header .en { font-size: 3.6rem;}
#playermv header h2 { padding-top: 8px; font-size: 1.3rem;}
#playermv::after { content: ''; position: fixed; bottom: 0; left: 0; width: 100%; height: 14px; background: #000; z-index: 50;}
#playermv .imgwrapper { position: relative; width: 100%; min-height: 100vh; min-height: 100svh;}
#playermv .img { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-size: auto 1700%; background-position: center top; background-repeat: no-repeat;}
#playermv h1 { position: absolute; bottom: 50%; left: 50%; width: 100%; transform: translateX(-50%) scale(0.9); text-align: center; font-size: 4.2rem; font-weight: 900; letter-spacing: -0.06em; opacity: 0;}
.playeron { position: static!important;}
.playeron #floatingprof .name { position: fixed; bottom: 100px; left: 48px; transform: translateX(0); text-align: left; font-size: 8.8rem;}
.playeron #floatingprof .name i { align-items: flex-start;}
.playeron #floatingprof .name span { padding-left: 8px;}
.playeron #floatingprof dl { opacity: 1;}
.playeron #playermv .imgwrapper { opacity: 0; transform: scale(1.2); transition: .5s ease-in .6s;}
.playeron #playermv h1 { opacity: 1; transform: translateX(-50%) scale(1); transition: .5s ease-out .8s;}
.playeron #interview { opacity: 1; transform: scale(1); transition: .5s ease-out .8s;}
#interview { display: grid; gap: 100px; margin-top: -35vh; padding-top: 0; opacity: 0; transform-origin: center top; transform: scale(0.9);}
#interview section { max-width: 650px; margin: 0 auto;}
#interview section h3 { margin-bottom: 40px; text-align: center; font-size: 2.4rem; font-weight: 900;}
#interview section p { font-size: 1.6rem;}
#interview section figure { max-width: 422px; margin: 48px auto 0;}
#interview section figure + figure { margin-top: 16px;}
#interview section figure.wide { max-width: initial;}
#interview section figure.mid { max-width: 537px;}
#interview section figure video { width: 100%;}
#interview section figcaption { display: block; margin-top: 8px; font-size: 1.2rem; color: #5C726C;}
#interview section .col { display: grid; grid-template-columns: repeat(auto-fit,minmax(289px,1fr)); gap: 16px 8px; margin: 48px 32px 0;}
#interview section .col > * { margin-top: 0;}
#biography { display: grid; grid-template-columns: 48% 52%; padding: 0; z-index: 80;}
#biography > figure { position: sticky; top: 0; height: 100vh; margin: 0;}
#biography > figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#biography section { margin: 0; padding: 56px 40px; overflow: hidden;}
#biography section:not(:first-of-type) { border-top: 1px solid #272E2C;}
#biography h3 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 32px; padding-left: 56px; background-position: left center; background-repeat: no-repeat; font-size: 1.3rem; white-space: nowrap;}
#biography h3 i { font-size: 4.9rem;}
.timeline h3 { background-image: url("img/recruit/time.svg");}
.policy h3 { background-image: url("img/recruit/policy.svg");}
.special h3 { background-image: url("img/recruit/special.svg");}
.timeline .swiper { margin: 0 8%; overflow: visible;}
.timeline .swiper-wrapper > *:last-of-type::after { display: none;}
.timeline .swiper-slide { display: flex; gap: 24px;}
.timeline .swiper-slide::after { align-self: center; content: ''; width: 40px; height: 1px; background: #272E2C;}
.timeline .swiper-slide figure { width: 28%;}
.timeline .swiper-nav { display: flex; justify-content: center; align-items: center; gap: 100px; margin-top: 40px;}
.timeline .swiper-prev, .timeline .swiper-next { display: block; width: 18px; height: 30px; background: url("img/recruit/next.svg") center no-repeat; cursor: pointer; transition: .2s ease-out;}
.timeline .swiper-prev.swiper-button-disabled, .timeline .swiper-next.swiper-button-disabled { opacity: 0.5;}
.timeline .swiper-prev { transform: scaleX(-1);}
.timeline .schedule { flex: 1;}
.timeline .schedule time { font-size: 6.3rem; font-style: normal; white-space: nowrap;}
.timeline .schedule h4 { margin: 16px 0; font-size: 1.7rem;}
.timeline .schedule p { font-size: 1.4rem;}
.policy p { padding: 40px 0; text-align: center; font-size: 3.4rem; font-weight: 900; line-height: 1.5; letter-spacing: -0.03em;}
.special .col { display: grid; grid-template-columns: 32% 1fr; gap: 40px; align-items: center; padding: 0 8%;}
.special .col h4 { font-size: 1.7rem;}
.player01, .player02, .player03, .player04, .player05 { position: fixed; top: 0; background: url("img/recruit/player_bg.jpg") center no-repeat; background-size: cover; background-attachment: fixed;}
.player01::after, .player02::after, .player03::after, .player04::after, .player05::after { display: none;}
.player01 #playermv::after, .player01 #biography { background: #AFD008;}
.player02 #playermv::after, .player02 #biography { background: #9A6EF2;}
.player03 #playermv::after, .player03 #biography { background: #F26447;}
.player04 #playermv::after, .player04 #biography { background: #00ABD9;}
.player05 #playermv::after, .player05 #biography { background: #EFCB03;}
.player01 #playermv .img { background-image: url("img/recruit/player01.webp");}
.player02 #playermv .img { background-image: url("img/recruit/player02.webp");}
.player03 #playermv .img { background-image: url("img/recruit/player03.webp");}
.player04 #playermv .img { background-image: url("img/recruit/player04.webp");}
.player05 #playermv .img { background-image: url("img/recruit/player05.webp");}

/*value*/
.services article { padding-left: 238px;}
#valuesystem{ padding-bottom: 0;}
#valuesystem header { justify-content: center;}
#valuesystem h2 { text-align: center; font-size: 4.2rem; font-weight: 900;}
#valuesystem p { max-width: 714px; margin: 0 auto 64px;} 
#valuesystem figure { position: relative; max-width: 848px; margin: 0 auto;}
#valuesystem figure span { position: absolute; top: 0; left: 0;}
#valuesystem figure span.rotate { top: 2.8%; left: 7.5%; width: 45%; animation: rotate 18s linear infinite;}
#valueserver { padding-top: 8%; padding-bottom: 0;}
#valueserver section { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 24px 100px;}
#valueserver h3, #valueonestop h3 { align-self: flex-end; font-size: 3rem; font-weight: 900;}
#valueserver figure { grid-column: 2 / 3; grid-row: 1 / 3; text-align: center;}
#valueonestop { padding-top: 8%;}
#valueonestop section { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 24px 100px;}
#valueonestop figure { position: relative; grid-column: 1 / 2; grid-row: 1 / 3; text-align: center;}
#valueonestop figure span.rotate { position: absolute; top: 0; left: 0; display: block; animation: rotate 18s linear infinite;}
#valueservices { padding-left: 0; padding-right: 0; padding-bottom: 0;}
#valueservices header { padding-left: 238px;; padding-right: 11%;}
#services { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: 0 120px; padding: 11% 11% 11% 238px; background: transparent; color: #FFF; transition: .2s ease-out;}
#services.blue { background-color: #003FCC;}
#services.green { background-color: #01AF88;}
#services.pink { background-color: #DD417D;}
#services.blue .floating video.planning, #services.green .floating video.programming, #services.pink .floating video.design { opacity: 1;}
#services .floating video { position: sticky; top: 120px; left: 0; width: 100%; border-radius: 88px; opacity: 0; transition: .2s ease-out;}
#services .floating { grid-column: 1 / 2; grid-row: 1 / 4;}
#services section { padding-top: 11%;}
#services .video { display: none;}
#services h3 i { display: block; font-size: 7.4rem;}
#services h3 span { font-size: 1.4rem; letter-spacing: 0.09em;}
#services h4 { margin: 64px 0 40px; font-size: 2.4rem; font-weight: 900;}
#services ul { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 64px; border-bottom: 2px dotted rgba(220,226,224,.4);}
#services ul li { position: relative; display: flex; align-items: center; margin: 8px 0; font-size: 1.5rem; font-weight: 700; line-height: 1.4;}
#services ul li figure { display: flex; justify-content: center; align-items: center; width: 72px; height: 80px;}
#services ul li:nth-child(odd)::before { content: ''; position: absolute; top: -8px; left: 0; width: 200%; border-top: 2px dotted rgba(220,226,224,.4);}
#services ul li:nth-child(odd) { border-right: 2px dotted rgba(220,226,224,.4);}
#services ol { counter-reset: number;}
#services ol li { position: relative; margin-top: 64px; padding-left: 48px;}
#services ol li::before { counter-increment: number; content: '0' counter(number) '.'; position: absolute; left: 0; font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-style: italic; line-height: 1.6;}
#services ol li h5 { font-size: 1.7rem; line-height: 1.6;}
#services ol li p { font-size: 1.4rem; color: #DCE2E0;}


/*company*/
.company article { padding-left: 238px;}
.company .tabcontents > *:not(:first-child) { display: none;}
.language { position: absolute; top: 220px; right: 11%; z-index: 200;}
.language ul { display: flex; width: 205px; height: 57px; background: #FFF; border-radius: 40px;}
.language::before { content: ''; position: absolute; top: 30%; left: 10%; width: 80%; height: 100%; background: #83868B; filter: blur(11px); opacity: 0.7; z-index: -1;}
.language li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer;}
.language li span, .language li i { position: absolute; top: 7px; display: flex; justify-content: center; align-items: center; width: 93px; height: 44px; text-align: center; background: #FFF; border-radius: 40px; font-size: 1.5rem; font-weight: 900; line-height: 1; color: #A1ADAA; white-space: nowrap; transition: .2s ease-out;}
.language li span { left: 10px;}
.language li i { right: 10px;}
.language li.on { z-index: 0;}
.language li.on span, .language li.on i { background: #272E2C; color: #FFF; z-index: 0;}
.philosophy { display: grid; grid-template-columns: 40% 1fr; gap: 40px;}
.philosophy h3 { display: flex; justify-content: center; align-items: center; font-size: 5rem; font-weight: 900; letter-spacing: -0.06em;}
.philosophy p { font-weight: 500;}
.table { display: grid; grid-template-columns: 156px 1fr; margin-top: -32px;}
* + .table { margin-top: 0;}
.table dt { padding: 32px 0; border-bottom: 1px solid #272E2C; font-weight: 500;}
.table dd { padding: 32px 0 32px 32px; border-bottom: 1px solid #DCE2E0; font-weight: 300;}
.table dd strong { display: inline-block; padding: 16px 0; font-weight: 700;}
.table dd.col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
.table dd ul { margin-left: 1.5em; list-style: disc;}
.table dd ol { margin-left: 1.5em; list-style: decimal;}
.table dd a { text-decoration: underline; color: #01AF88;}
.access p { display: flex; align-items: center; gap: 8px 16px;}
.pin { display: inline-block;  padding-left: 16px; background: url("img/common/pin.svg") left center no-repeat; font-size: 1.3rem; font-weight: 700; text-decoration: underline; letter-spacing: 0.09em; color: #01AF88;}
.notice { display: grid; gap: 8px;}
.notice time { margin-right: 16px; font-size: 1.6rem; color: #A1ADAA;}
.notice a { display: inline-block;  padding-right: 24px; background: url("img/common/pdf.svg") right center no-repeat; font-weight: 700; text-decoration: underline; color: #01AF88;}


/*information*/
#information { display: grid; grid-template-columns: auto 1fr; gap: 0 8%; align-items: flex-start;}
#information .infotab { grid-column: 1 / 2; grid-row: 1 / 3;}
#information .infotab ul { display: flex; flex-direction: column; gap: 30px;}
#information .infotab li { display: flex; align-items: center; height: 20px; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.45; transition: 0.25s ease-out;}
#information .infotab li:hover, #information .infotab li.on { opacity: 1;}
#information .infotab li.on { position: relative; padding-left: 20px;}
#information .infotab li.on::before { content: ''; position: absolute; top: 6px; left: 0; display: block; width: 6px; height: 6px; background: #01AF88; border-radius: 50%;}
.pagination { margin-top: 100px; text-align: center; font-size: 1.6rem;}
.pagination a, .pagination span.current { position: relative; display: inline-block; width: 42px; height: 42px; margin: 2px 4px; vertical-align: middle; border-radius: 50%; line-height: 42px; color: #A1ADAA;}
.pagination span { display: inline-block; margin: 2px 7px; vertical-align: middle;}
.pagination a:not(.next):not(.prev)::before, .pagination span.current::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border: 1px solid #A1ADAA; border-radius: 50%; z-index: -1; transition: .2s ease-out;}
.pagination a.next, .pagination a.prev { text-indent: -9999px; overflow: hidden; white-space: nowrap;}
.pagination a.next::after, .pagination a.prev::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 16px; background: url("img/common/arr.svg") center no-repeat; background-size: 19px auto;}
.pagination a.prev { transform: scale(-1);}
.pagination a:not(.next):not(.prev):hover, .pagination span.current { opacity: 1; background: #01AF88; color: #FFF;}


/*form*/
#contact header { display: block; text-align: center;}
#contact header h2 { font-weight: 900;}
#contact section { max-width: 980px; margin: 0 auto;}
form > dl { margin-top: 24px;}
form dl { display: grid; grid-template-columns: 200px 1fr; gap: 0 20px;}
form dt { padding: 32px 0; text-align: left; font-weight: 700;}
form dt .must { vertical-align: top; margin-left: 12px;}
form dd { padding: 0 0 32px; text-align: left;}
form dd span.item { margin-top: 8px; margin-bottom: 8px; font-size: 1.4rem; white-space: nowrap;}
form dd .row { margin-bottom: 16px;}
form dd .row span { flex: none; align-self: center;}
form dd .open_input { margin-top: 8px;}
form dd ul li:not(:first-of-type) { margin-top: 16px;}
form dd > p { font-size: 1.4rem;}
form > p { margin-bottom: 40px;}
form input[type="text"], form input[type="tel"], form input[type="email"], form input[type="date"], form input[type="number"], form input[type="url"] { display: inline-block; width: calc(100% - 8px); padding: 20px 32px; background: #FFF; border: 1px solid transparent; border-radius: 6px; vertical-align: middle; font-size: 1.6rem;}
form input.tel { width: auto; padding: 20px 16px;}
form select { margin: 0 8px; padding: 20px 48px 20px 32px; background: #FFF url("img/common/select.svg") right 24px center no-repeat; border: 1px solid transparent; border-radius: 6px; font-size: 1.6rem;}
form textarea { min-height: 355px; width: calc(100% - 8px); padding: 20px 32px; background: #FFF; border: 1px solid transparent; border-radius: 6px; font-size: 1.6rem;}
form input.checkbox { display: none; appearance: none;}
form input.checkbox ~ span { position: relative; display: inline-block; padding: 24px 24px 24px 64px; background: #F7F7F5; border: 1px solid #DDD; border-radius: 6px; line-height: 1; cursor: pointer;}
form input.checkbox ~ span::before { content: ''; position: absolute; top: 50%; left: 24px; transform: translateY(-50%); width: 28px; height: 28px; background: #FFF; background-position: center; border: 1px solid #B4B4B4; border-radius: 3px; transition: .2s ease-out;}
form input.checkbox:checked ~ span { background: #FFF;}
form input.checkbox:checked ~ span::before { background: #00AC97 url("img/common/check.svg") center no-repeat; border-color: #00AC97;}
form input[type="radio"] { display: none; appearance: none;}
form input[type="radio"] ~ span { position: relative; display: inline-block; padding: 24px 24px 24px 64px; background: #F7F7F5; border: 1px solid #DDD; border-radius: 6px; line-height: 1; cursor: pointer;}
form input[type="radio"] ~ span::before { content: ''; position: absolute; top: 50%; left: 24px; transform: translateY(-50%); width: 28px; height: 28px; background: #FFF; border: 1px solid #B4B4B4; border-radius: 50%;}
form input[type="radio"] ~ span::after { content: ''; position: absolute; top: 50%; left: 30px; transform: translateY(-50%); width: 16px; height: 16px; background: #01AF88; border-radius: 50%; opacity: 0; transition: .2s ease-out;}
form input[type="radio"]:checked ~ span { background: #FFF;}
form input[type="radio"]:checked ~ span::after { opacity: 1;}
form input:focus, form select:focus, form textarea:focus { border-color: #5C726C!important;}
form .hide { display: none;}
.open_mail { margin-top: 16px; padding: 16px 24px; background: #DCE2E0; border-radius: 6px;}
.open_upload { grid-column: 1 / 3;}
.open_other { margin-top: 16px;}
.mwform-checkbox-field .blank { background: url("img/common/blank.svg") right center no-repeat; font-size: 1.5rem;}
.mwform-checkbox-field .blank::after { display: none;}
.submit { position: relative; margin: 40px 0; text-align: center;}
.submit input[type="submit"] { display: inline-block; width: 100%; max-width: 376px; margin: 8px; padding: 24px 48px; background: #01AF88; border-radius: 64px; font-size: 2rem; font-weight: 700; color: #FFF; transition: .2s ease-out;}
.submit input[type="submit"]:disabled { background: #999;}
.submit input[type="submit"]:not(:disabled):hover { background-color: #777; background-position: right 24px center;}
.submit button { position: relative; display: block; margin: 32px auto 0; padding-left: 24px; font-size: 1.6rem; font-weight: 500;}
.submit button::before { content: ''; position: absolute; top: calc(50% - 8px); left: 0; transform: scaleX(-1); display: block; width: 19px; height: 15px; background: url("img/common/arr.svg") center no-repeat; background-size: 19px auto; transition: .2s ease-out;}
.submit button:hover::before { left: -10px;}
.must { display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: middle; background: #01AF88; border-radius: 50%;}
.attention { font-size: 1.4rem; color: #5C726C;}
.mw_wp_form .error { margin-top: 8px; font-size: 1.4rem; font-weight: 500; color: #FF6100;}
.horizontal-item { display: inline-block; margin: 6px 8px 6px 0;}
.mw_wp_form_input .input-hidden, .mw_wp_form_confirm .confirm-hidden, .mw_wp_form_confirm dt .must { display: none;}
.mw_wp_form_confirm dt { padding-top: 0;}
.mw_wp_form_confirm .open_career, .mw_wp_form_confirm .open_fresh, .mw_wp_form_confirm .open_other { display: block;} 
form ::-webkit-input-placeholder { font-weight: 500; color: #B4B4B4;}
form ::-moz-placeholder { font-weight: 500; color: #B4B4B4;}
form :-ms-input-placeholder { font-weight: 500; color: #B4B4B4;}
.mw_wp_form .horizontal-item + .horizontal-item { margin-left: 0;}
.mw_wp_form_confirm form dd .row { justify-content: flex-start; align-items: center; margin: 0 -8px;}
.mw_wp_form_confirm form dd .row span { display: inline-block; margin: 0 8px;}
.mw_wp_form_confirm .privacy h3, .mw_wp_form_confirm .privacy > div { display: none;}
.mw_wp_form_confirm .privacy h3, .mw_wp_form_confirm .privacy > div { display: none;}
.mw_wp_form_confirm .privacy p { display: flex; justify-content: center; align-items: center;}
.mw_wp_form_confirm .privacy p::before { content: ''; width: 20px; height: 20px; margin-right: 8px; background: #1458E4 url("img/contact/checked.svg") center no-repeat; border: 1px solid #707070; border-radius: 3px;}





@media screen and (min-width: 1025px) {
#menu ul { display: flex; justify-content: flex-end; gap: 3%;}
#menu li a { position: relative; font-size: 1.4rem; white-space: nowrap;}
#menu li:last-child a { padding: 12px 24px 10px; background: #01AF88; border-radius: 6px; font-weight: 700; color: #FFF;}
#menu li:last-child a:hover { opacity: 0.7;}
#menu li:not(:last-child) a::before { content: ''; position: absolute; left: 0; right: 0; bottom: 50%; opacity: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: #01AF88; transition: .4s cubic-bezier(0.23, 1, 0.32, 1);}
body:not(.home) #menu li:first-child a::before { display: none;}
#menu li.current a::before, #menu li a:hover::before { opacity: 1; bottom: calc(50% + 16px);}
.navsecond { display: block!important;}
#navbox > ul > li > a:hover, .navlist > li a:hover, .navinfo li a:hover, .navfooter ul li a:hover { color: #01AF88;}
.navflow { display: flex!important; gap: 16px!important;}
.navflow li:not(:first-child) { padding-left: 16px; border-left: 1px solid #272E2C;}
#sitemap .navflow li:not(:first-child) { border-left-color: rgba(255,255,255,.7);}
#sitemap .navflow li:not(:first-child) a { padding-left: 0;}
#sitemap a:hover { color: #FFF;}
#sitemap > ul > li > a:hover::before, #sitemap > ul > li > ul > li > a:hover::before { background: rgba(0,204,159,.5);}
#footer .navfooter ul li a:hover { color: #FFF;}
.arrbtn a:hover span { transform: translateX(16px);}
.arrbtn a:hover::before { width: 112px; height: 112px; background-color: #01C69A; border-color: #3AF4CA;}
.arrbtn a:hover::after { background-image: url("img/common/arr_w.svg");}
.boxbtn a:hover { background-color: #01AF88; background-image: url("img/common/arr_w.svg"); color: #FFF;}
.blank:hover { text-decoration: none;}
#topworks .boxbtn { position: absolute; top: 15%; right: 11%; z-index: 200;}
#topworks .boxbtn a { width: 240px;}
#topworks .swiper-slide a:hover figure img { transform: scale(1.04);}
#topworks .swiper-slide a:hover .hoverbtn::after { background-image: url("img/common/arr_w.svg");}
#topworks .swiper-slide a:hover .hoverbtn::before { transform: scale(1.1);}
#toplink a:hover + figure { opacity: 1; transform: rotate(5deg) translateY(-32px);}
#toplink a:hover .mask { -webkit-clip-path: inset(0); clip-path: inset(0);}
#filter:hover::before { transform: scale(0.95); background: #00CC9F;}
.worksbtn:hover .balloon { transform: translateY(0); opacity: 1;}
.worksbtn:hover figure::before { opacity: 1;}
.worksbtn:hover figure i { top: 50%; opacity: 1;}
.worksbtn:hover figure i::before { transform: rotate(0deg);}
.recruitnews .swiper-prev:not(.swiper-button-disabled):hover, .recruitnews .swiper-next:not(.swiper-button-disabled):hover { background-color: #01AF88; background-image: url("img/common/arr_w.svg"); background-position: right 4px center;}
.list-stoker { position: fixed; top: 0; left: 0; width: 531px; height: 339px; opacity: 1; z-index: -1; transition: clip-path 1s cubic-bezier(.19,1,.22,1); -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); pointer-events: none;}
.list-stokeritem { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden;}
.list-stokeritem.on { animation: stokerOn 1s cubic-bezier(.19,1,.22,1);}
#floatingside a { display: flex; justify-content: center; align-items: center; width: 72px; margin-right: -10px; padding: 32px 10px 56px 0; background: #272E2C url("img/recruit/entry.svg") left 20px bottom 28px no-repeat; border: 2px solid #D0D0D0; border-right: none; border-radius: 16px 0 0 16px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 1.7rem; font-weight: 900; color: #FFF;}
#floatingside a:hover { margin-right: 0;}
#recruitabout a:hover .arrbtn span::before { width: 62px; height: 62px; background: #01AF88;}
#recruitabout a:hover .arrbtn span::after { background-image: url("img/common/arr_w.svg");}
.recruitbtn dd a:hover { background-color: rgba(161,173,170,.15); background-position: right 24px center;}
#recruitentry .recruitbtn dd a:hover { background-color: rgba(255,255,255,.2); background-position: right 16px center;}
#recruitentry .boxbtn a:hover { background-color: #01AF88; color: #FFF;}
.entrybtn a:hover::before { opacity: 0.8;}
.entrybtn a:hover .arr::before { width: 108px; height: 108px;}
#siblings a:hover:before { opacity: 0.8;}
#siblings a:hover header .en span { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%);}
#siblings a:hover header .en span.mask { -webkit-clip-path: inset(0); clip-path: inset(0);}
#siblings a:hover figure span.hoverimg1::after { left: 0; opacity: 0.4;}
#siblings a:hover figure span.hoverimg2 { opacity: 0.34;}
#siblings a:hover .arr::before { width: 108px; height: 108px;}
.language ul:hover li:not(.on) > * { color: #272E2C;}
.pin:hover { text-decoration: none;}
}





@media screen and (max-width: 1280px){
#logo { z-index: 7000;}
#navbox {  grid-template-columns: 22% 1fr; gap: 2%; padding-left: 8%;}
.navrecruit { padding-left: 4%;}
#navbox > ul > li > a > i { font-size: 3.5rem;}
.grid-sizer, .grid-item { width: calc(100% / 2); padding: 16px 16px 100px;}
#valueserver section { grid-template-columns: 1fr 1fr; gap: 24px 64px;}
#valueonestop section { grid-template-columns: 1fr 1fr; gap: 24px 64px;}
}





@media screen and (max-width: 1024px){
body { background-image: url("img/common/bg_sp.png"); font-size: 1.4rem;}


/*HEADER*/
/*******************************************************************/
#logo { top: 18px; left: 23px; z-index: 9999;}
#menu { display: none;}
#nav { display: block; width: 100vw; height: 100vh; overflow-y: auto; overscroll-behavior: contain;}
#nav::before { position: fixed; transform: scale(0.2);}
#navbox { display: flex; flex-direction: column; gap: 0; height: 100vh; padding: 100px 16px 0;}
#navbox > ul { display: block;}
#navbox > ul:not(.navinfo):not(.navrecruit) > li { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #DCE2E0;}
#navbox > ul:not(.navinfo) > li > a { display: flex; justify-content: space-between; align-items: center; padding: 0 56px 0 16px; background: url("img/common/arr.svg") right 16px center no-repeat; background-size: 13px auto; font-size: 1.2rem;}
#navbox > ul > li > a > i { margin-bottom: 0; font-size: 3.5rem;}
#navbox > ul > li > a.navfirst { background: url("img/common/plus.svg") right 16px center no-repeat; cursor: pointer;}
#navbox > ul > li > a.navfirst.on { background-image: url("img/common/minus.svg");}
.navsecond { display: none;}
.navrecruit { grid-column: 1; flex-direction: column; margin-bottom: 16px; padding-left: 0; border-left: none;}
.navrecruit .navsecond { display: none; margin-top: 16px;}
.navfooter { width: calc(100% + 32px); margin: auto -16px 0; text-align: center; padding: 16px 16px 64px; background: #272E2C; color: #9FA0A0;}
.navfooter li a { color: #9FA0A0;}
.navlist { display: block;}
.navlist > li { margin-top: 16px; border-top: 1px dashed#DCE2E0;}
.navlist > li a { display: block; padding-right: 32px; background: url("img/common/arr.svg") right 16px center no-repeat; background-size: 13px auto;}
.navlist > li > a figure { display: none;}
.navlist > li > a > span { padding-left: 32px;}
.navlist > li > a > span::before { left: 16px;}
.navlist ul { gap: 16px; margin-left: 32px;}
.navlist ul li a { letter-spacing: 0.04em;}
#open { top: 18px; right: 18px;}
.nav-open #nav::before { transform: scale(1); top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border-radius: 0;}


/*FOOTER*/
/*******************************************************************/
#footer { display: block; padding: 48px 16px; background-image: none;}
#info div { width: 232px; margin: 0 auto 32px;}
#info p { display: none;}
#sitemap { display: none;}
#pagetop { display: none;}
#footer .navfooter { width: auto; text-align: center; margin: 32px 0 0; padding: 0;}
#footerlink { display: block;}
#footerlink ul { display: flex; justify-content: center; gap: 10px;}
#footerlink li { flex: 1; max-width: 260px;}
#footerlink a { display: block; padding: 16px; text-align: center; background: #36403D; border-radius: 5px; line-height: 1; color: #FFF;}
#footerlink a div { padding: 12px 0 4px;}
#footerlink a i { font-size: 1.1rem; font-weight: 400; font-style: normal; color: #A1ADAA;}


/*CONTENTS*/ 
article { max-width: initial; padding: 64px 16px;}
article header { flex-direction: column; margin-bottom: 24px;}
article header .en { font-size: 4rem;}
article header h2 { font-size: 2.4rem;}
article header .en + h2 { padding-top: 10px; font-size: 1.2rem;}
section + section { margin-top: 64px;}
section p, section li, section dt, section dd, section table { line-height: 1.75;}
.arrbtn { margin-top: 16px;}
.arrbtn a { height: 84px; padding-right: 100px; line-height: 84px; font-size: 1.2rem; font-weight: 700;}
.arrbtn a::before { right: 42px; width: 84px; height: 84px;}
.arrbtn a::after { right: 42px; width: 24px; height: 20px; background-size: contain;}
.arrbtn.invertion a::after { background-image: url("img/common/arr_w.svg");}
.boxbtn { width: 100%; margin-top: 32px; text-align: center;}
.sp { display: block;}
.sp.inline { display: inline;}
.pc { display: none;}


/*TOP*/
#loading { top: 45%; width: 100%;}
.business { top: 50vh; left: 16px; transform-origin: left top; transform: scale(0.7); color: #FFF; mix-blend-mode: exclusion;}
body.home .deco1 { display: none;}
body.home .deco2 { bottom: 24%; left: 54%; width: 22%;}
body.home .deco2 img { width: 100%;}
body.home .deco3 { top: 16%; right: 70%; width: 12%;}
body.home .deco3 img { width: 100%;}
.movie { -webkit-mask-size: 76%; mask-size: 76%; -webkit-mask-position: 50% 40%; mask-position: 50% 40%;}
#mv::after { top: 72px; left: 0; height: 2000px; background-image: url("img/top/dot1_sp.svg"); background-size: 100%;}
#mv section { padding: 15vh 16px;}
#scroll { bottom: 40px; right: 0;}
#scroll img { width: 42px;}
#spacer { height: 40vh;}
#topservices { padding-top: 100px; padding-bottom: 80px;}
#topservices::after { height: 2000px; background-image: url("img/top/dot2_sp.svg"); background-size: 100%;}
#topservices header h2 { font-size: 4.2rem;}
#topservices section { width: auto; margin: 0;}
#topservices .deco4 { display: none;}
#topservices .deco5 { top: auto; bottom: -64px; right: 55%; width: 125px; height: 160px; transform: scale(0.8)}
#topnews { padding-top: 80px; background-image: url("img/common/bg_sp.png");}
#topnews section { display: flex; flex-direction: column; gap: 24px;}
#topnews .tab ul { flex-direction: row; gap: 8px;}
#topnews .tab li { padding-left: 12px; font-size: 1.2rem;}
#topnews .tab li.on { padding-left: 12px;}
.infolist li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.infolist time { font-size: 1.4rem; line-height: 1.6;}
.infolist .cat { min-width: 89px; padding: 6px 4px 4px; font-size: 1rem;}
.infolist .newscontent { width: 100%;}
.infolist h3 { font-size: 1.5rem; line-height: 1.4;}
.infolist p { font-size: 1.2rem;}
.infolist * + p { margin-top: 8px;}
#topworks::after { top: 0; height: 1238px; background-image: url("img/top/dot3_sp.svg");}
#topworks section { margin-top: 24px;}
#topworks .swiper-slide h3 { font-size: 1.6rem;}
#topworks .swiper-slide a .hoverbtn { bottom: -4px; width: 40px; padding-top: 40px;}
#topworks .swiper-slide a .hoverbtn::after { width: 15px; height: 11px;}
#topworks .swiper-slide .tag { padding-right: 64px;}
#topworks .swiper-nav { display: none;}
.period { font-size: 1.2rem;}
#toprecruit { background-image: url("img/common/bg_sp.png");}
#toprecruit::after { display: none;}
.recruitbg { border-radius: 36px;}
#toprecruit figure { margin: 0 0 -12px;}
#toprecruit figure img { border-radius: 8px;}
#toprecruit h3 { padding: 0 32px; font-size: 3rem;}
#toprecruit p { padding: 0 32px;}
#toprecruit .arrbtn { position: relative;}
#tophistory { background-image: url("img/common/bg_sp.png");}
#tophistory::before { background-position: center 80px;}
#tophistory::after { background-position: center 80px;}
#tophistory h3 { margin-bottom: 32px; font-size: 1.7rem;}
#tophistory figure { float: none; width: 64%; margin: 0 auto;}
#tophistory figure > span img { width: 100%; max-width: 100%;}
#tophistory figure .historyimg01 { top: 30%; left: 78%; width: 20%;}
#tophistory figure .historyimg03 { top: 25%; left: 0; width: 24%;}
#tophistory figure .historyimg04 { display: none;}
#tophistory figure .historyimg05 { display: none;}
#tophistory figure .historyimg06 { top: 5%; left: 76%; width: 24%;}
#tophistory p { float: none; width: 74%; margin: 40px auto 0;}
#toplink { background-image: url("img/common/bg_sp.png");}
#toplink section { grid-template-columns: 1fr; gap: 64px; background-image: url("img/common/bg_sp.png");}
#toplink figure { position: relative; top: 0; right: 0; width: 70%; margin: -200px 0 0 auto; opacity: 1;}
#toplink figure:nth-of-type(2) { right: 0;}
#toplink a { padding: 0;}
#toplink a .en { font-size: 6.8vw;}
#toplink a h2 { margin: 8px 0 16px; font-size: 1.2rem;}
#toplink a .mask { font-size: 1.1rem; -webkit-clip-path: inset(0); clip-path: inset(0);}


/*PAGE*/
#title { gap: 8px 24px; padding: 40px 16px 0;}
#title .en { font-size: 5.5rem;}
#title h1 { padding-top: 3.2em; font-size: 1.2rem;}
#title h1.clear { width: 100%;}
#title .sub { position: relative; bottom: 0; left: 0; font-size: 1.5rem;}
#breadcrumb { display: none;}
#siblings { padding: 0; z-index: 500;}
#siblings a { justify-content: center; padding: 56px 16px;}
#siblings a header { left: 16px;}
#siblings a header .en { font-size: 4.5rem;}
#siblings a header .en span { color: #01AF88;}
#siblings a figure { width: 50%; margin: 0 auto;}
#siblings a figure span { display: flex; border-radius: 12px;}
#siblings a figure span img { border-radius: 12px;}
#siblings a .arr { bottom: 16px; right: 16px; width: 52px; height: 52px; background-size: 17px auto;}
#siblings a .arr::before { width: 52px; height: 52px;}


/*works*/
#works { padding-top: 24px;}
#works h2 { display: none;}
#output { margin-bottom: 24px;}
#filter { right: 20px; bottom: 20px; width: 96px; height: 96px;}
#filter i { padding-top: 24px; background-size: 18px auto; font-size: 1.2rem;}
#filter::before { border: 2px solid #FFF;}
#searchlist { display: block; top: 96px; height: calc(100vh - 96px); padding: 0; background-image: none; border-radius: 48px 0 0 48px;}
#searchlist .searchlistcontents { height: 100%; padding: 64px 40px;}
#searchlist::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 80px; background: rgb(1,175,136); background: linear-gradient(0deg, rgba(1,175,136,0) 0%, rgba(1,175,136,1) 100%); border-top-left-radius: 48px; z-index: 10; pointer-events: none;}
#searchlist::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 120px; background: rgb(1,175,136); background: linear-gradient(180deg, rgba(1,175,136,0) 0%, rgba(1,175,136,1) 100%); border-bottom-left-radius: 48px; z-index: 10; pointer-events: none;}
#searchlist dl { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px;}
#searchlist dt { font-size: 2rem;}
#searchlist dd { display: flex; flex-direction: column; gap: 16px;}
#searchlist .close { position: absolute; bottom: 0; right: 0; width: 120px; height: 64px; align-items: flex-start; margin: 0; margin-left: auto; z-index: 100;}
#searchlist .close i { padding-top: 24px; background-size: 17px auto; font-size: 1.2rem;}
#searchcontents { padding-right: 0;}
.mfp-close { display: none!important;}
.mfp-content { background: url("img/common/close_w.svg") center bottom no-repeat;}
.grid { margin: 0 -16px;}
.grid-sizer, .grid-item { width: 100%; padding: 0 16px 40px;}
.worksbtn { display: flex; flex-direction: column;}
.worksbtn .balloon { order: 1; position: relative; bottom: 0; left: 0; transform: translateY(0); width: 100%; margin-top: 16px; opacity: 1;}
.worksbtn .balloon::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(180deg);}
.workspu { display: block; max-height: 70vh; margin: 0; padding-bottom: 120px; border-radius: 32px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;}
.mfp-content { position: relative; padding-bottom: 48px;}
.mfp-content::after { content: ''; position: absolute; bottom: 48px; left: 0; display: block; width: 100%; height: 120px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-radius: 0 0 32px 32px; z-index: 10; pointer-events: none;}
.worksimg { padding: 24px 24px 0;}
.workscontents { margin-right: 0; padding: 0 32px 32px;}
.workscontents h3 { font-size: 2rem;}
.workscontents .tag li { font-size: 1rem;}
.comment { padding: 24px;}
.comment h5 { font-size: 1.6rem;}
.comment p { font-size: 1.2rem;}
.prof h5 { font-size: 1.3rem;}
.prof p { font-size: 1.2rem;}
.scrollbar { padding: 0;}
.workslink { padding: 0; text-align: center;}


/*recruit*/
#recruittitle { display: flex; gap: 16px; top: 116px; left: 16px; width: auto;}
#recruittitle .en { position: relative; top: 0; left: 0; font-size: 5.8rem;}
#recruittitle h1 { position: relative; top: 0; right: 0; transform: translateY(32px); font-size: 1.2rem;}
#recruitmv { width: auto; height: auto; padding: 155px 0 0; background-image: url("img/recruit/bg_sp.svg");}
#recruitmv .swiper-slide { border-radius: 0;}
#recruitmv .slide-img { height: 32vh;}
body.recruit #scroll { display: none;}
.floatingnav { display: none;}
#floatingside { top: auto; bottom: 20px; right: 20px; transform: translateY(0);}
#floatingside a { display: flex; justify-content: center; align-items: center; width: 96px; height: 96px; padding-top: 24px; background: #272E2C url("img/recruit/entry.svg") center top 24px no-repeat; background-size: 20px auto; border: 2px solid #D0D0D0; border-radius: 50%; font-size: 1.2rem; font-weight: 900; color: #DCE2E0;}
#recruitcopy { flex-direction: column; padding-top: 120px;}
#recruitcopy header { align-self: flex-start;}
#recruitcopy header h2 { font-size: 3rem;}
#recruitcopy section { white-space: normal;}
#recruitcopy p { font-size: 1.3rem;}
.recruitnews { top: -10px; right: 0; width: 88%; padding: 8px; border-radius: 6px 0 0 6px;}
.recruitnews .swiper-slide div { flex-direction: column; align-items: flex-start;}
.recruitnews .swiper-slide div span { font-size: 1.2rem; -webkit-line-clamp: 2;}
.recruitnews .swiper-slide div time { display: block; margin-bottom: 4px;}
#recruitabout { padding-left: 16px; background: #F7F7F5 url("img/common/bg_sp.png") center repeat;}
#recruitabout li { margin-right: -16px;}
#recruitabout li a { grid-template-columns: 1fr; gap: 0; padding: 32px 16px 32px 0; background-position: right -10px top 16px; background-repeat: no-repeat; background-size: 55% auto;}
#recruitabout li:nth-child(1) a { background-image: url("img/recruit/value.png");}
#recruitabout li:nth-child(2) a { background-image: url("img/recruit/works.png");}
#recruitabout li:nth-child(3) a { background-image: url("img/recruit/history.png");}
.aboutitem h3 { margin-top: 8px; padding-right: 24%; font-size: 1.9rem;}
.aboutitem p { padding-right: 24%; font-size: 1.3rem;}
#recruitabout a .arrbtn { text-align: right; white-space: nowrap; font-size: 1.2rem; color: #01AF88;}
#recruitabout a .arrbtn span { height: 52px; padding-right: 64px; line-height: 52px;}
#recruitabout a .arrbtn span::before { right: 26px; width: 52px; height: 52px;}
#recruitabout a .arrbtn span::after { right: 26px; width: 32px; height: 28px; background-size: 14px auto;}
.list-stoker { display: none;}
#player { background: #F7F7F5 url("img/common/bg_sp.png") center repeat; overflow: hidden;}
#player:not(.other) header { position: relative; left: 0; transform: translate(0,0); margin-left: 16px;}
#player header .en { font-size: 4rem;}
#player header h2 { padding-top: 10px;}
.playermain figure { position: relative; padding-top: 100%;}
.playermain figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.playermain dl { bottom: 80px; left: auto; right: 8px; background: none;}
.playermain dt i { font-size: 5.8rem;}
.playermain dd { font-size: 1.1rem; line-height: 1.5;}
.playermain dd.join { font-size: 1rem;}
.playerthumb { bottom: 12px; max-width: 640px;}
.playerthumb .swiper-slide a { pointer-events: none;}
.playerthumb .swiper-slide img { border-radius: 6px;}
.playercurrent { width: calc(100% - 4px); height: calc(100% - 5px); border-width: 3px; border-radius: 6px;}
#recruitstyle { padding-left: 16px;}
#recruitstyle h3 { font-size: 1.9rem;}
#recruitstyle h3 img { width: 56px;}
#recruitstyle ul { grid-template-columns: 1fr;}
#recruitstyle li p { font-size: 1.3rem;}
#recruitentry { grid-template-columns: 1fr;}
#recruitentry > div { padding: 40px 16px;}
#recruitentry > div:nth-child(2) { border-left: none; border-top: 1px solid rgba(255,255,255,.6);}
#recruitentry header { display: block; margin-bottom: 16px; text-align: center;}
#recruitentry header .en { width: 50%; margin: 0 auto -16px;}
#recruitentry header h2 { font-size: 2rem;}
.recruitbtn dd a { padding: 24px 40px 24px 24px!important; background-position: right 24px center!important; background-size: 13px auto!important;}
.recruitbtn dd a::before { left: 0!important;}
#recruitentry .boxbtn { flex-direction: column; gap: 16px;}
#recruitentry .boxbtn a { display: block; width: auto; text-align: center;}
.entrybtn a { justify-content: center; padding: 24px;}
.entrybtn a i { font-size: 4rem;}
.entrybtn a .arr { bottom: calc(50% - 26px); right: 16px; width: 52px; height: 52px; background-size: 17px auto;}
.entrybtn a .arr::before { width: 52px; height: 52px;}
#floatingprof { position: absolute; bottom: auto; top: 180px; left: auto; right: 16px; width: calc(100% - 32px);}
#floatingprof .name { position: absolute; bottom: 0; transform: translate(-50%,80%); font-size: 12.9rem; white-space: nowrap;}
#floatingprof .name span { font-size: 1.3rem;}
#floatingprof dl { text-align: right; font-size: 1.1rem;}
#playermv header { top: 100px; left: 16px;}
#playermv header .en { font-size: 2.7rem;}
#playermv header h2 { padding-top: 4px; font-size: 1rem;}
#playermv h1 { top: 40%; font-size: 2.6rem;}
.playeron #floatingprof .name { position: absolute; bottom: 100%; left: 100%; transform: translateX(-100%); font-size: 6.2rem;}
#interview { gap: 80px;;}
#interview section { padding: 0 24px;}
#interview section h3 { font-size: 1.7rem;}
#interview section p { font-size: 1.4rem;}
#biography { display: block;}
#biography > figure { position: relative; width: 100%; height: auto;}
#biography > figure img { position: relative;}
#biography section { padding: 40px 16px;}
#biography h3 { padding: 4px 0 4px 48px; font-size: 1.1rem;}
#biography h3 i { font-size: 3rem;}
.timeline .swiper { margin: 0;}
.timeline .swiper-slide::after { display: none;}
.timeline .swiper-slide figure { width: 40%;}
.timeline .schedule time { font-size: 3.4rem;}
.timeline .schedule h4 { font-size: 1.5rem;}
.timeline .schedule p { font-size: 1.2rem;}
.policy p { padding: 16px 0; text-align: center; font-size: 2rem;}
.special .col { grid-template-columns: 40% 1fr; gap: 24px; padding: 0;}
.special .col h4 { font-size: 1.5rem;}
.special .col p { font-size: 1.2rem;}


/*value*/
.services article { padding-left: 16px;}
#valuesystem h2 { font-size: 2.6rem;}
#valuesystem p { margin: 0 auto 32px;}
#valueserver { padding-top: 64px;}
#valueserver section { display: block;}
#valueserver h3, #valueonestop h3 { margin-bottom: 24px; text-align: center; font-size: 1.7rem;}
#valueserver figure { margin-bottom: 24px;}
#valueonestop { padding-top: 64px;}
#valueonestop section { display: block;}
#valueonestop figure { margin-bottom: 24px;}
#valueservices header { padding-left: 16px;; padding-right: 0;}
#services { display: block; padding: 64px 16px;}
#services .floating { display: none;}
#services section { padding-top: 11%;}
#services .video { display: block; width: 72%; margin: 0 auto 24px;}
#services .video video { width: 100%; border-radius: 44px;}
#services h3 i { font-size: 3.8rem;}
#services h3 span { font-size: 1.2rem;}
#services h4 { margin: 32px 0 32px; font-size: 1.7rem;}
#services ul { margin-top: 32px;}
#services ul li { font-size: 1.2rem;}
#services ul li figure { width: 48px; height: 64px;}
#services ul li figure img { transform: scale(0.8);}
#services ol li { margin-top: 32px;}
#services ol li h5 { font-size: 1.5rem;}
#services ol li p { font-size: 1.3rem;}


/*company*/
.company article { padding-left: 16px;}
.language { position: fixed; top: auto; bottom: 16px; right: auto; left: 16px;}
.language ul { width: 170px; height: 46px;}
.language li span, .language li i { top: 5px; width: 77px; height: 36px; font-size: 1.3rem;}
.language li span { left: 8px;}
.language li i { right: 8px;}
.philosophy { grid-template-columns: 1fr; gap: 24px;}
.philosophy h3 { font-size: 3rem;}
.sign { text-align: right;}
.table { grid-template-columns: 88px 1fr; margin-top: -20px; font-size: 1.3rem;}
* + .table { margin-top: 0;}
.table dt { padding: 20px 0;}
.table dd { padding: 20px 0 20px 20px;}
.table dd.col { grid-template-columns: 1fr; gap: 24px;}
.access p { flex-direction: column; align-items: flex-start; gap: 0;}


/*information*/
#information { display: flex; flex-direction: column; gap: 32px;}
#information .infotab ul { flex-direction: row; gap: 8px;}
#information .infotab li { padding-left: 12px; font-size: 1.2rem;}
#information .infotab li.on { padding-left: 12px;}
.pagination { width: 100%;}


/*form*/
.contactbox { display: block;}
.contactbox a { font-size: 3rem;}
.contactbox li:not(:first-child) { margin: 32px 0 0; padding: 32px 0 0; border-top: 1px solid #B4B4B4; border-left: none;}
.contactbox li:not(:first-child) a { font-size: 1.8rem;}
form dl { display: block;}
form dt { width: auto; padding: 0 0 8px; line-height: 1;}
form dd { width: auto; padding: 0 0 24px;}
form dd span.item { margin-top: 0;}
form dd .row span { display: block;}
form > p { margin: 0;}
form input[type="text"], form input[type="tel"], form input[type="email"], form input[type="date"], form input[type="url"] { padding: 16px;}
form input.tel { max-width: 28%; padding: 16px 8px;}
form select { margin: 0 4px; padding: 8px 24px 8px 8px; background-position: right 8px center;}
form textarea { padding: 16px;}
form input.checkbox ~ span, form input[type="radio"] ~ span { padding: 16px 16px 16px 48px;}
form input[type="radio"] ~ span::before { left: 14px;}
form input[type="radio"] ~ span::after { left: 20px;}
form input.checkbox ~ span::before { left: 16px; width: 20px; height: 20px;}
.submit { margin: 24px 0 0;}
}





@media print{
body { width: 980px; height: auto;}
.animated { opacity: 1;}
}