@charset "UTF-8";
:root {
--ease-in: .5,0,1,.5 ;
--ease-out:.35,.6,.4,1;
--ease-in-out:1,0,0,1;
--color: #d1e0d1;
}
.keyColor{ color: #d1e0d1;}
@font-face {
font-family: 'sawarabi-gothic';
src: url('../font/sawarabi-gothic-medium.woff') format('woff'),
url('../font/sawarabi-gothic-medium.ttf') format('truetype'),
url('../font/sawarabi-gothic-medium.eot?#iefix') format('embedded-opentype'),
url('../font/sawarabi-gothic-medium.woff') format('woff');
}
/*
================================================================================
reset
================================================================================
*/
/*/////////////////////////
reset
//////////////////////////*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
a img {
border: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
img,
div,
a,
*:after,
*:before{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
vertical-align: bottom;
}
::-webkit-scrollbar
{
overflow:hidden;
width:3px;
background:#999;
}
::-webkit-scrollbar:horizontal
{
height:3px;
background:#fafafa;
}
::-webkit-scrollbar-button
{
display:none;
}
::-webkit-scrollbar-piece
{
background:#eee;
}
::-webkit-scrollbar-piece:start
{
background:#eee;
}
::-webkit-scrollbar-thumb
{
overflow:hidden;
-webkit-border-radius:3px;
border-radius:3px;
background:#333;
}
::-webkit-scrollbar-corner
{
overflow:hidden;
-webkit-border-radius:3px;
border-radius:3px;
background:#333;
}
/*/////////////////////////
clearfix
//////////////////////////*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table; }
.clearfix:after {
clear: both; }
.clearfix {
*zoom: 1; }
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
color: #666;
opacity: 1; }
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
color: #666;
opacity: 1; }
/* Firefox 18- */
:-moz-placeholder {
color: #666;
opacity: 1; }
/* Firefox 19+ */
::-moz-placeholder {
color: #666;
opacity: 1; }
/* IE 10+ */
:-ms-input-placeholder {
color: #666;
opacity: 1; }
.placeholder {
color: #666;
opacity: 1; }
:disabled {
color: #fff !important;
opacity: 1 !important; }
textarea[disabled][readonly], input[disabled][readonly] {
color: #fff !important;
opacity: 1 !important; }
/* IE Only
----------------------------------------------- */
#dp_swf_engine {
display: none; }
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0; }
input[type="submit"],
input[type="button"] {
border-radius: 0 !important;
-webkit-box-sizing: content-box !important;
-webkit-appearance: button !important;
appearance: button !important;
border: none !important;
box-sizing: border-box !important;
cursor: pointer !important; }
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none !important; }
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px !important; }
/*
================================================================================
core > _global.scss
================================================================================
*/
* {
-webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: auto;
outline: 0;
box-sizing: border-box;
max-height: 999999px;
}
a, button {
text-decoration: underline;
-webkit-tap-highlight-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
outline: none !important; }
a:hover, a:active {
text-decoration: none; }
p {
}
hr {
border: 0;
padding: 0;
margin: 0;
height: 1px; }
a,a:link,a:visited{ text-decoration: none; color: #fff;}
/*
================================================================================
class
================================================================================
*/
.onlyIE{ display: none ;}
html.uaIE .onlyIE{ display: block;}
html.uaIE .hideIE{ display: none !important;}
#forIE{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; color: #000;}
#forIE p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 1em; line-height: 1.8;}
.windowFit{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.hide{ display: none;}
.wFull{ width: 100%; height: auto;}
.tCenter{ text-align: center; padding-top: 1em;}
p.tCenter a{ text-decoration: underline;}
.tCenter.small{ font-size: 0.8em;}
.more{ text-align: center;width: 100%; padding-top: 50px;}
.more .btn{ display: block; border: solid 2px #fff; width: 200px; height: 50px; margin: auto;}
.more .btn span{ display: inline-block; line-height: 50px; padding: 0 20px; }
.grid{
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
align-items: center;
}
.grid.itemsCenter{align-items: center;}
.grid.col_3{grid-template-columns: 1fr 1fr 1fr;}
.grid.col_4{grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid.col_5{grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
ol { list-style: decimal; padding-left: 1.5em; margin-left: 1em;}
ol li{ margin-bottom: 1em;}
ol.subList {
padding-top: 0.5em;
list-style: none;
counter-reset: count2 0;
}
ol.subList li{ position: relative; margin-bottom: 0.5em;}
ol.subList > li:before {
position: absolute;
top: 0; left: -2.5em;
counter-increment: count2;
content: "（" counter(count2) "） ";
}
ul{ list-style: disc; padding-left: 1.5em;margin-left: 1em;}
ul.list{margin-left: 0.2em;}
ul li{ margin-bottom: 0.2em;}
dl.count {
counter-reset: count 0;
}
dl.count > dt{ position: relative; padding: 0.5em 1em 0 2.5em !important;}
dl.count > dt:before {
counter-increment: count;
content: counter(count) ". ";
position: absolute;
top: 0.5em; left: 0.3em;
width: 1.5em;
text-align: right;
}
table.tableInfo{}
table.tableInfo th,
table.tableInfo td{ position: relative; vertical-align: top;}
table.tableInfo th{ width: 9em;padding: 0.5em 0; }
table.tableInfo th:after{ content: '：'; display: inline-block; position: absolute; right: 0;}
table.tableInfo td{padding: 0.5em; }
dl.tableData{
display: -ms-grid;
display: grid;
-ms-grid-columns: 9em 1fr;
grid-template-columns: 9em 1fr;
grid-gap: 0px;
}
dl.tableData dt,
dl.tableData dd{ padding: 0.5em 0 !important; margin: 0 !important; }
dl.tableData dt{ border-bottom: 0; border-right: 0; position: relative}
dl.tableData dt:after{ content: '：'; display: inline-block; position: absolute; right: 0;}
dl.tableData dd{ padding-left: 1em !important;}
dl.tableData.company{
display: -ms-grid;
display: grid;
-ms-grid-columns: 11em 1fr;
grid-template-columns: 11em 1fr;
}
dl.tableData.company dt,
dl.tableData.company dd{ border-top:solid 1px #fff;padding: 1em 0 !important;}
dl.tableData.company dt:after{ display: none;}
table.company{ width: 100%;border-bottom:solid 1px #fff;}
table.company tr{border-top:solid 1px #fff;}
table.company th,
table.company td{padding:1em; vertical-align: top;}
table.company th{ width: 11em;}
dl.tableData.schedule{
grid-template-columns: 5em 4em 1fr;
}
dl.tableData.schedule dt:after{ content: '：'; display: none;}
dl.tableData.schedule dt{ text-align: right; }
dl.tableData.schedule dd{padding-left: 0 !important;}
dl.tableData.schedule dd.youbi{ text-align: center; }
table.schedule{ width: auto;}
table.schedule tr{}
table.schedule th,
table.schedule td{padding:1em; vertical-align: top; white-space: nowrap; padding: 0.5em;}
table.schedule th{ text-align: right;}
table.schedule tr td:nth-of-type(1) { text-align: center;}
table.schedule tr td:nth-of-type(2) { text-align: right;}
dl.flow{ margin-bottom: 50px !important;}
dl.flow dt{ min-width: 200px; text-align: center; border: solid 1px #fff; display: inline-block; padding: 1em;position: relative;}
dl.flow dd{ min-height:75px; margin: 0 0 0.25em 0 !important; padding:25px 0 0 150px; position: relative;}
dl.flow dd:before{ content: '↓'; display: inline-block; font-size: 2em; position: absolute; top: 12px; left: 70px;}
dl.flow dd:last-child:before{ display: none;}
dl.flow dt .sub{ position: absolute; top: 50%; left: 110%; transform: translate(0,-50%); font-size: 0.9em; white-space: nowrap;}
dl.accordion{ margin-bottom: 0px !important; padding-bottom: 50px;}
dl.accordion dt{ padding:0.5em 0 0 1em; cursor: pointer; line-height: 1.5;}
dl.accordion dt:hover{ text-decoration: underline;}
dl.accordion dt:after{ content:''; display: inline-block; width: 0.5em; height: 0.5em; border-bottom: solid 2px #fff; border-right: solid 2px #fff; margin-left: 0; font-size: 0.8em; transform: translate(100%,-140%) rotate(45deg);}
dl.accordion dd{ display:none; padding:0em;margin: 0 !important; font-size: 0.9em;}
dl.accordion dd p{padding: 0.5em 0 1em 2.5em !important; }
dl.accordion.count dd p{padding:0.5em 2em 1em 2.8em !important}
.unitWrap{ padding: 50px; background-color: rgba(255,255,255,.1); margin-bottom: 50px;}
.unitWrap h4{ font-size: 1.8em !important; padding-top: 0 !important;}
.unitWrap dl.dtLine > dt{ margin-top: 2em !important;}
.unitWrap dl.dtLine > dd:not(:last-child){margin-bottom: 20px !important;}
.unitWrap dl.dtLine > dd:last-child{margin-bottom: 0px !important;}
.komeArea{ font-size: 0.8em;}
.slick-wrapper{ width: 100%;
position: absolute;
top: 0;
left: 0;
line-height: 0;
font-size: 0;
}
.slick-container{ position: relative; top: 0;width: 100%; }
.slick-track{ overflow: hidden;}
.slick-list{ }
.slick-slider{ margin: 0;}
.slick-slide{width: 73.8vw; max-width: 900px;
background-color: #f3f5f6;
background-size: cover;
position: relative;
margin: 0 !important;
padding: 0 !important;
}
.slick-slide a{ display: block;}
.slick-slide a,
.slick-slide img{ cursor: pointer; }
.slick-slide a.comingsoon{cursor: default; pointer-events: none; }
.slick-slide a.comingsoon:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(../img/common/comingsoon.png) center center rgba(0,0,0,.8) no-repeat; background-size: 45% auto;}
.slick-slide .item {
padding-top: 61.111%;
overflow: hidden;
}
.slick-dots,
.slick-prev, .slick-next {}
.slick-prev, .slick-next{ width: 60px; height: 60px; border: solid 0px #369}
.slick-prev {
left: 0;
transform: translate(-100%,-50%);
}
.slick-next {
right: 0;
transform: translate(100%,-50%);
}
.slick-prev:before, .slick-next:before{
width: 30px;
height: 30px;
border-color: rgba(255,255,255,1);
}
.slick-prev:before{ margin-left: 0%;}
.slick-next:before{ margin-left: 0%;}
.slick-prev:hover:before, .slick-next:hover:before{
border-color: rgba(255,255,255,.8);
}
.slick-dots{ bottom: -30px;}
.slick-dots li {
width: 25px;
height: 25px;
margin: 0 3px;
overflow: hidden;
}
.slick-dots li button{ position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.slick-dots li button:before{
width: 5px;
height: 5px;
border: 0 !important;
background-color: rgba(255,255,255,.3);
border-radius: 4px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inMovie{ width: 100%; height: 0; padding-top: 56.3%;}
.inMovie video,
.inMovie iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%;}
article .contents p{ margin-bottom: 1em;}
article .contents p small{ font-size: 0.8em; line-height: 1.4; display: inline-block; }
article .contents.basic .unitTitle{ border-bottom: solid 1px #fff; margin-bottom: 20px; padding-bottom: 15px; }
article .contents.titleLine{}
article .contents.titleLine .unitTitle{ border: 0; margin-bottom: 30px; position: relative;}
article .contents.titleLine p{ }
article .image{ overflow: hidden;}
.labelLine{ display:table;position: relative; z-index: 2;color: #000; }
.labelLine img{ width: auto; height: 52px; position:relative; top: 0; left: 0; visibility: hidden; vertical-align: bottom;}
.labelLine.subHead{ margin-bottom: 10px !important;}
.labelLine.subHead img{ height: 16px;}
.showEffect .unitTitle{ line-height: 0; font-size: 0;}
.showEffect .labelLine{ width:auto; position: relative; overflow: hidden; margin: 0;line-height: 0; font-size: 0;}
.showEffect .unitTitle .labelLine:nth-of-type(2){ transform: translate(0 ,-1px);}
.showEffect .unitTitle .labelLine:nth-of-type(3){ transform: translate(0 ,-1px);}
.showEffect .textImage{ position: absolute; top: 0; left: 0; z-index: 2;width: 0; height: 100%;background-repeat: no-repeat; background-size: contain; background-position: left top; background-color: #fff; transition: all 0.25s cubic-bezier(.5,0,1,.5) ;}
.showEffect .labelLine.transparent .textImage{ background-color: transparent;}
.showEffect .textImage:after{ content: ''; display: block; position: absolute; top: 0; right: 0;z-index: 5; width: 100%; height: 100%; background-color: #fff;transition: all 0.7s cubic-bezier(.35,.6,.4,1);}
.showEffect .textImage.black:after{background-color: #000;}
.showEffect.is-show .labelLine{ }
.showEffect.is-show .textImage{ width: 100%;}
.showEffect.is-show .textImage:after{ width: 0;}
.showEffect.is-show .labelLine:nth-of-type(1) .textImage{ transition-delay: 0s; }
.showEffect.is-show .labelLine:nth-of-type(2) .textImage{ transition-delay: 0.2s; }
.showEffect.is-show .labelLine:nth-of-type(3) .textImage{ transition-delay: 0.4s; }
.showEffect.is-show .labelLine:nth-of-type(1) .textImage:after{ transition-delay: 0.,25s;}
.showEffect.is-show .labelLine:nth-of-type(2) .textImage:after{ transition-delay: 0.45s;}
.showEffect.is-show .labelLine:nth-of-type(3) .textImage:after{ transition-delay: 0.65s;}
article .contents .inContents{position: relative; overflow: hidden; }
article .inWrap{ transform: translate(-110%,0);transition: all 0.35s cubic-bezier(.5,0,1,.5); }
article .contents .inContents .inWrap{ transform: translate(0,0);overflow: hidden;width: 0%; transition: all 0.25s cubic-bezier(.35,.6,.4,1);transition-delay: 0.7s !important; }
article .image .inWrap{ transition-delay: 1.0s;}
article .image .hideScroll{ position: relative; width: 100%; height: 0; padding-top: 50%; overflow: hidden; }
article .image .hideScroll .inWrap{ position: absolute; top: 0; left: 0; width: 100%; }
article .inWrap:before{ content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; transition: all 0.7s cubic-bezier(.35,.6,.4,1); z-index: 10;}
article .contents .inContents .inWrap:before{ display: none;}
article .image .inWrap:before{ transition-delay: 1.35s;}
.showEffect.is-show .inWrap{ transform: translate(0%,0);width: 100% !important;}
.showEffect.is-show .inWrap:before{ width: 0%;right:-5%;}
article.grid.imgL .image .inWrap{ transition-delay: 0s;}
article.grid.imgL .image .inWrap:before{ transition-delay: 0.35s;}
article.grid.imgL .contents .inContents .inWrap{ transition-delay: 0.7s;}
.btnArea{display: table; margin: auto; text-align: center; position: relative; overflow: hidden;}
.btnArea.marginT{padding-top: 50px;}
.btnArea.marginB{padding-bottom: 50px;}
.btnArea.center{}
.btnArea.hoverBG .inBtn:before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: translate3d(-100%,0,0);background:rgba(255,255,255,.2);transition: all 0.25s cubic-bezier(.35,.6,.4,1); }
.btnArea.hoverBG:hover .inBtn:before{ transform: translate3d(0%,0,0);}
.btnArea.hoverOpa{ transition: opacity 0.35s cubic-bezier(.35,.6,.4,1);}
.btnArea.hoverOpa:hover{ opacity: .9;}
.btnArea .inBtn{ position: relative;}
.btnArea .inMask{ position: absolute; top: 0; left: 0; width: 0%; height: 0%; transition: all 0.35s ease-in-out; overflow: hidden;}
.btnArea .linkArea{ position: absolute; top: 0; left: 0; border: solid 3px #fff; margin: auto; padding: 0 80px;height:94px;
display: -ms-grid;
display: grid;
align-items: center;
align-content: center;
align-self: center;
display: -ms-grid;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
text-decoration: none !important; }
.btnArea .linkArea .cWrap{width: 100%; margin:0 auto; padding: 0; line-height: 0;
}
.btnArea .linkArea > span{ }
html.IE.version_11 .btnArea .linkArea{ line-height: 0;}
html.IE.version_11 .btnArea .linkArea .cWrap{ display: table-cell;height: inherit; vertical-align: middle;width:inherit;}
html.IE.version_11 .btnArea .linkArea > span { }
.btnArea .linkArea:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translate3d(-100%,0,0); background-color: rgba(255,255,255,.2);transition: all 0.25s cubic-bezier(.35,.6,.4,1);}
.btnArea .linkArea:hover:before{ transform: translate3d(0%,0,0);}
.btnArea.link_ch{ margin-bottom: 20px;}
.btnArea.bgWhite .linkArea{ background-color: #fff;}
.btnArea.viewmore .linkArea{ padding: 0 25px;height:50px; }
.btnArea.youtube_ch .linkArea{ padding: 0 25px;height:170px; }
.btnArea.link_ch .linkArea{ padding: 0 0px;height:140px; }
.wakate{margin-bottom: 1.5rem; font-size: 1.5rem;}
.btnArea.sns_ch{margin-bottom: 40px !important;}
.btnArea.sns_ch .linkArea{ padding: 0px;height:auto; }
.btnArea.sns_ch .linkArea span img{ height: 100px;}
.btnArea.inText{}
.btnArea.inText .linkArea .labelLine{ line-height: 1; font-size: 1rem; white-space: nowrap;}
.btnArea.inText .linkArea .textImageData{white-space: nowrap; color: #fff;}
.btnArea .linkArea span{ display: inline-block; line-height: 0; }
.btnArea .linkArea span img{ height: 35px;}
.btnArea.viewmore .linkArea span img{ height: 10px;}
.btnArea.youtube_ch .linkArea span img{ height: 120px;}
.btnArea.link_ch .linkArea span img{ height: 120px;}
.btnArea.contentsText{ margin-bottom: 10%;}
.btnArea.contentsText .linkArea{ height: auto; padding: 1.5rem 3rem;}
.btnArea.contentsText .linkArea span{ line-height: 1.2;}
.btnArea.contentsText .linkArea span .labelLine{line-height: 1.4; font-size: 1rem;}
.btnArea.contentsText .linkArea span .labelLine .text{ display: block; width: 90%; min-width: 600px; max-width: 1000px;
line-height: 1.6; font-size: 0.9rem;
color: #fff; opacity: 0;transition: opacity 250ms ease 500ms;}
@media (max-width: 1000px){
.btnArea.contentsText{ width: 100%; }
.btnArea.contentsText .linkArea{ width: 100% !important; padding: 0 !important; display: block;}
.btnArea.contentsText .linkArea{width: 100% !important; padding: 0 !important; display: block;}
.btnArea.contentsText .inBtn{ min-width: 100%;max-width: 100%;}
.btnArea.contentsText .linkArea span .labelLine .text{ width: 90%; min-width: inherit; margin: 0 auto;font-size: 0.8rem;}
}
.btnArea.contentsText.showEffect.is-show .linkArea span .labelLine .text{ opacity: 1;}
.btnArea .linkArea .labelLine .textImage{ transition-delay: 0.2s !important;}
.btnArea .linkArea .labelLine .textImage:after{ transition-delay: 0.45s !important;}
.showEffect.is-show .inMask{ width: 100%; height: 100%;}
.showDelay{transition: opacity 0.25s cubic-bezier(.35,.6,.4,1); opacity: 0;}
.showDelay.is-show{opacity: 1;}
.flex{ display: flex; }
.flexItem{ width: 50%; }
/*
================================================================================
#loader
================================================================================
*/
#loader{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50000; pointer-events: none; }
#loadingAnim{ position: absolute; width: 54vw; height: 40vw; background-size: 85%; z-index: 9000; opacity:0; transition:opacity 0.3s ease-in-out;
top: 50%;
left: 50%;
transform: translate3d(-50%,-60%,0);
}
#loading_count{ }
#loading_count .bar{ }
#loader .line{ width: 100vw; height: 20vh; position: absolute; top: 0; left: 0;}
#loader .line:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scale(1,1.01); transition: all 0.8s cubic-bezier(1,0,0,1);}
/*
#loader .line_in{ transition: width 0.35s cubic-bezier(1,0,.8,1) , height 0s; }
#loader .line_out{ transition: width 0.35s cubic-bezier(0,1,.5,1) , height 0s; }
*/
#loader .line:nth-of-type(1) { top: 0vh;}
#loader .line:nth-of-type(2) { top: 20vh;}
#loader .line:nth-of-type(3) { top: 40vh;}
#loader .line:nth-of-type(4) { top: 60vh;}
#loader .line:nth-of-type(5) { top: 80vh;}
#loader .line:nth-of-type(1):before{ transition-delay: 0s;}
#loader .line:nth-of-type(2):before { transition-delay: 0.1s;}
#loader .line:nth-of-type(3):before { transition-delay: 0.2s;}
#loader .line:nth-of-type(4):before { transition-delay: 0.3s;}
#loader .line:nth-of-type(5):before { transition-delay: 0.4s;}
.loadingFinish #loader:not(.move) .line:before{ transform: translate3d(100%,0,0) scale(1,1.01);}
#loader.move .line:before{ transform: translate3d(-100%,0,0) scale(1,1.01);}
#loader.move.in .line:before{ transform: translate3d(0%,0,0) scale(1,1.01);}
/*
================================================================================
body , base , loading ....
================================================================================
*/
html,body{ width: 100%; line-height: 1.8; font-size: 16px;}
body{ overflow: hidden; overflow-y: scroll; height: auto; text-align: left; background: #fff; color: #fff; max-height: 100vh;
font-family: 'sawarabi-gothic' , 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.IE.version_11 body,
.uaIE body{ background:url(../img/common/bg_ie.png) center top no-repeat; background-size: cover; background-attachment: fixed;}
/* .scroll{ overflow: auto; overflow-y: scroll; overflow-x: hidden; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} */
/* .scroll{ overflow: hidden; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} */
.scroll{ min-height: 100vh;}
.scrollContents{ position: relative;min-height: 100vh; padding-bottom: 100px !important;}
body.scrollOn{ max-height: none;}
body.page #pageScroll .scrollContents{ padding: 250px 0 0 0 ;}
body#person #pageScroll .scrollContents{ padding: 100px 0 0 0;}
body#project #pageScroll .scrollContents{ padding: 100px 0 0 0;}
body#rookie #pageScroll .scrollContents{ padding: 100px 0 0 0;}
body#yell #pageScroll .scrollContents{ padding: 100px 0 0 0;}
body.fixed{display: fixed; overflow: hidden; overflow-x: hidden; width: 100%; height: 100vh;}
body.modalMode{ }
body #container{ position: relative; height: 100vh; display:table; z-index: 3;}
#container,
#toolWrap,
#mypageWrap,
#frameTitle,
#frameRecruit,
#toolWrap,
#stage,
#stageBG,
#stageImg{visibility: hidden;}
body.loadingFinish #container,
body.loadingFinish #toolWrap,
body.loadingFinish #mypageWrap,
body.loadingFinish #frameTitle,
body.loadingFinish #frameRecruit,
body.loadingFinish #toolWrap,
body.loadingFinish #stage,
body.loadingFinish #stageBG,
body.loadingFinish #stageImg{visibility: visible;}
#stage{ position: fixed;
width: 100%;
height: 110vh !important;
top: 0;
left: 0;
display: none;
}
#stageBG{ position: fixed;
width: 100%;
height: 110vh !important;
top: 0;
left: 0;
background: #f30;
}
#stageBG .bg{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#stageBG div{ background-size: cover !important;}
#stageImg{ position: fixed;
width: 100%;
height: 110vh !important;
top: 0;
left: 0;
background: #fff;
z-index: 1;
}
#stageImg .swiper-container{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#stageImg .swiper-container .base,
#stageImg .randomBG{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity:0; z-index: 1;}
#stageImg.type_a .randomBG.active{ opacity: 1;transition: all 6.9s ease-in-out 0ms ;}
#stageImg.type_B .randomBG.active{ opacity: 1;transition: all 6.9s ease-in-out 0ms ;}
#stageImg.type_C .randomBG.active{ opacity: 1;transition: all 6.9s ease-in-out 0ms ;}
#stageImg .swiper-container .swiper-slide{ transition-timing-function:ease-in-out !important;}
#stageImg .swiper-container .swiper-slide.bg_1{background-image: url('../img/bg/A_gazo/1_yoko.jpg'); background-size: 100% 100%; }
#stageImg .swiper-container .swiper-slide.bg_1 .base{background-image: url('../img/bg/A_gazo/1_yoko.jpg'); background-size: 100% 100%; }
#stageImg .swiper-container .swiper-slide.bg_2{background-image: url('../img/bg/A_gazo/2_yoko.jpg'); background-size: 100% 100%; }
#stageImg .swiper-container .swiper-slide.bg_3{background-image: url('../img/bg/A_gazo/3_yoko.jpg'); background-size: 100% 100%; }
#stageImg .swiper-container .swiper-slide.bg_4{background-image: url('../img/bg/A_gazo/4_yoko.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg .swiper-container .swiper-slide.bg_1{background-image: url('../img/bg/A_gazo/1.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg .swiper-container .swiper-slide.bg_2{background-image: url('../img/bg/A_gazo/2.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg .swiper-container .swiper-slide.bg_3{background-image: url('../img/bg/A_gazo/3.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg .swiper-container .swiper-slide.bg_4{background-image: url('../img/bg/A_gazo/4.jpg'); background-size: 100% 100%; }
#stageImg.type_b .swiper-container .swiper-slide.bg_1{background-image: url('../img/bg/B_gazo/1_yoko.jpg'); background-size: 100% 100%; }
#stageImg.type_b .swiper-container .swiper-slide.bg_2{background-image: url('../img/bg/B_gazo/2_yoko.jpg'); background-size: 100% 100%; }
#stageImg.type_b .swiper-container .swiper-slide.bg_3{background-image: url('../img/bg/B_gazo/3_yoko.jpg'); background-size: 100% 100%; }
#stageImg.type_b .swiper-container .swiper-slide.bg_4{background-image: url('../img/bg/A_gazo/4_yoko.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg.type_b .swiper-container .swiper-slide.bg_1{background-image: url('../img/bg/B_gazo/1.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg.type_b .swiper-container .swiper-slide.bg_2{background-image: url('../img/bg/B_gazo/2.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg.type_b .swiper-container .swiper-slide.bg_3{background-image: url('../img/bg/B_gazo/3.jpg'); background-size: 100% 100%; }
.touchDevice #stageImg.type_b .swiper-container .swiper-slide.bg_4{background-image: url('../img/bg/B_gazo/4.jpg'); background-size: 100% 100%; }
#yt_player {
position: fixed;
}
#yt_player{
z-index: 60000;
}
#yt_playerWrap{ position: fixed; width: 100%; height: 100%; top: 0; left: 0;z-index: 60000; opacity: 1;}
#yt_playerWrap.active{ opacity: 1;}
#yt_playerWrap .inFrame{ position: absolute;width: 100%; height: 100%; top: 0; left: 0;}
#yt_playerWrap.sp{ background: #000}
#yt_playerWrap.sp:after{ }
#yt_playerWrap.sp .inFrame{ height: 0; padding-top:56.25%; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#yt_playerWrap.sp iframe{position: absolute;width: 100%; height: 100%; top: 0; left: 0;}
#yt_playerWrap:after{ content: ''; display: block; position: fixed; top: 0; left: 0; z-index: 69000;width: 100%; height: 100%; pointer-events: none; background: #fff; opacity: 1;transition: all 0.4s ease-in;}
#yt_playerWrap.active:after{ opacity: 0;}
#yt_playerWrap.deactive:after{ opacity: 1 !important;}
#yt_playerWrap iframe{ pointer-events: none;}
#yt_player_skip{ display: inline-block;width: 100px; height: 50px; line-height: 1; color: #fff; background: url(../img/common/btn_skip.png) center center no-repeat; background-size: contain ; position: absolute;bottom: 50px; left: 50%; transform: translate(-50%,0%); z-index: 60001; cursor: pointer;}
#yt_player_skip span{ display: none;}
#yt_player_mute{ display: inline-block; width: 50px; height: 50px; line-height: 1; color: #fff; background: url(../img/common/btn_mute.png) center center no-repeat; background-size: contain ; position: absolute;bottom: 50px; right: 50px; transform: translate(0%,0%); z-index: 60001;cursor: pointer;}
#yt_player_mute span{ display: none;}
#yt_player_mute.off{background: url(../img/common/btn_mute_off.png) center center no-repeat; background-size: contain ; }
/*
================================================================================
toolWrap
================================================================================
*/
#toolWrap{ position: fixed; top: 20px; right: 10px; padding-right: 50px; z-index: 5100; transform: translate3d(150%,0,0);transition: all 0.5s cubic-bezier(0,1,.8,1); }
body.toolWrapIn #toolWrap{ transform: translate3d(0,0,0);}
#menuBtn{ width: 50px; height: 40px; position: absolute; top: 0; right: 0; cursor: pointer; }
#menuBtn hr{ border: 0; width: 30px; height: 5px; background: #fff; position: absolute; left: 50%; transform: translate3d(-50%,0%,0);transition: all 0.25s ease;}
#menuBtn hr:nth-of-type(1) { top: 0%;}
#menuBtn hr:nth-of-type(2) { top: 10px;}
#menuBtn hr:nth-of-type(3) { top: 21px;}
#menuBtn:after{ content: ''; display: block; width: 30px; height: 8px; position: absolute; bottom: 0; left: 50%; transform: translate3d(-50%,0%,0);background: url(../img/menu/menu_white.png) center center no-repeat; background-size: contain; transition: all 0.25s ease;}
#entryBtn{ box-sizing: border-box;display: inline-block; width: 77px; height: 40px; padding: 0px; text-align: center;cursor: pointer;transition: all 0.25s ease; position: relative; overflow: hidden;}
.menuOpen #entryBtn{ opacity: 0; pointer-events: none;}
#entryBtn:after{ content: ''; display: block; width: 44px; height: 21px; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);background: url(../img/common/register.png) center center no-repeat; background-size: contain;}
#entryBtn:before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: translate3d(-100%,0,0);background:rgba(255,255,255,.2);transition: all 0.25s cubic-bezier(.35,.6,.4,1); }
#entryBtn:hover:before{ transform: translate3d(0%,0,0);}
#entryBtn span{ display: block; text-indent: -9999px; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 3px #fff; z-index: 10;}
body.menuOpen #menuBtn{ }
body.menuOpen #menuBtn hr{ background: #000;}
body.menuOpen #menuBtn hr:nth-of-type(1) { width: 80%; top: 12px; transform: translate(-50%,0) rotate(-45deg);}
body.menuOpen #menuBtn hr:nth-of-type(2) { opacity: 0;}
body.menuOpen #menuBtn hr:nth-of-type(3) { width: 80%; top: 12px; transform: translate(-50%,0) rotate(45deg);}
body.menuOpen #menuBtn:after{ opacity: 0;}
/*
================================================================================
mypageWrap
================================================================================
*/
#mypageWrap{ position: fixed; height: 60px; bottom: 0px; right: 20px; z-index: 500; opacity: 0; transition: opacity 0.35s cubic-bezier(.35,.6,.4,1); }
body.mypageWrapIn #mypageWrap{opacity:1;}
body.footerVisible #mypageWrap{ top: auto;}
.btnArea.mypage .linkArea{ padding: 0px; width:93px;height:40px; background: #fff; border: 0;transition: opacity 0.35s cubic-bezier(.35,.6,.4,1); text-align: center;}
.btnArea.mypage .linkArea .labelLine { margin: auto !important;}
.btnArea.mypage .inMask{ height: 100%;}
.btnArea.mypage .linkArea span{position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}
.btnArea.mypage .linkArea span img{ height: 8px; }
.btnArea.mypage:hover .linkArea{ opacity: .9;}
/*
================================================================================
#youtubeCh_Banner
================================================================================
*/
#youtubeCh_Banner{ display: block; position: fixed; width: 70px; height: auto; top: 50%; right: 0px; transform: translate(100%,-50%); z-index: 500; opacity: 1; transition: all 0.5s cubic-bezier(0,1,.8,1); background: url(../img/common/banner_youtube_ch.png) right center no-repeat; background-size:contain; overflow: hidden; pointer-events: none;}
body.youtubeBannerIn #youtubeCh_Banner{ transform: translate(0,-50%); pointer-events: all;}
#youtubeCh_Banner a{ display: block; width: 100%; height: auto;padding-top: 400%;}
#youtubeCh_Banner span{ display: none;}
body.youtubeWrapIn #youtubeCh_Banner{opacity:1;}
/*
================================================================================
#snsCh_Banner
================================================================================
*/
#snsCh_Banner{ display: block; position: fixed; width: 70px; height: auto; top: 50%; right: 0px; transform: translate(100%,-50%); z-index: 500; opacity: 1; transition: all 0.5s cubic-bezier(0,1,.8,1); background: url(../img/common/banner_instagram_ch.png) right center no-repeat; background-size:contain; overflow: hidden; pointer-events: none;}
body.youtubeBannerIn #snsCh_Banner{ transform: translate(0,-50%); pointer-events: all;}
#snsCh_Banner a{ display: block; width: 100%; height: auto;padding-top: 375%;}
#snsCh_Banner span{ display: none;}
body.youtubeWrapIn #youtubeCh_Banner{opacity:1;}
/*
================================================================================
Page Scroll
================================================================================
*/
#pageTopBtn{width: 50px; height: 50px; position: fixed; top: auto; bottom: 80px; right: 8px; transform: translate(0%,0%); z-index: 500;}
#siteTop #pageTopBtn{bottom: 130px;}
#scrollDown{ width: 100px; height: 50px; position: fixed; bottom: 20px; left: 50%; transform: translate(-50%,0); z-index: 500;}
#pageTopBtn{ cursor: pointer; transition: opacity 0.35s cubic-bezier(.35,.6,.4,1); opacity: 0; pointer-events: none;}
#scrollDown{ cursor: pointer; transition: all 0.35s cubic-bezier(.35,.6,.4,1); opacity: 0; pointer-events: none;}
#pageTopBtn.is-show,
#scrollDown.is-show{ opacity: 1; pointer-events: all;}
#pageTopBtn:after,
#scrollDown:after{ content: ''; display: block; width: 15px; height: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg);}
#pageTopBtn:after{border-top: solid 2px #fff; border-left: solid 2px #fff; margin-top: 3px;}
#scrollDown:after{border-bottom: solid 2px #fff; border-right: solid 2px #fff;}
#scrollDown:after{
animation: arrow 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
}
@keyframes arrow {
0% {
transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
90% {
transform: translate3d(-50%, -100%, 0) rotate(45deg);
}
100% {
transform: translate3d(-50%, -100%, 0) rotate(45deg);
}
}
/*
================================================================================
MENU
================================================================================
*/
#globalMenu{ width: 0%;
height: 120vh;
height: calc(var(--vh, 1vh) * 100);
overflow: hidden; position: fixed; top:0; right:0; z-index: 5000; background-color:#fff; color: #000 !important; pointer-events: none;
transition: all 0.5s cubic-bezier(1,0,0,1) , height 0s;
text-align: center;}
body.menuOpen #globalMenu{ pointer-events: all; width: 100%; }
#globalMenu:after{ content: ''; display: none; position: absolute; top: 0; left: 0px; z-index: 4000; width: 100%; height: 100%; background: #fff;transition: all 0.35s ease-in-out 0.25s;}
body.menuOpen #globalMenu:after{width: 0%; }
#globalMenu > .scroll{
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
position: absolute;
top: 0;
right: 0;
left: auto;
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
.menuOpen #globalMenu > .scroll{
overflow-y: scroll;
overflow-x: hidden;
}
#globalMenu > .scroll:before{ content: ''; display: block; position: absolute; top: 35px; left: 45px; max-width: 87px; max-height: 23px; width: 100vw; height: 26.7vw; background: url(../img/menu/menu.png) left center no-repeat; background-size:contain;}
#globalMenu .listWrap{ display: inline-block; margin: auto;}
#globalMenu ul { padding: 100px 0 100px 0 ; margin: 0 auto; width: auto; text-align: center;
display: grid;
grid-template-columns: 1fr;
grid-gap: 0px;
}
#globalMenu ul li{ text-align: left; display: block; margin: 0 0 25px 0; border: solid 0px #f30; }
/* #globalMenu ul li:nth-of-type(5){ opacity: .1; pointer-events: none;} */
#globalMenu ul .linkArea{}
#globalMenu ul .linkArea img{ height: 2.5vw; min-height: 20px;max-height: 40px; }
#globalMenu ul .linkArea.deactive{ pointer-events: none; opacity: .15;}
#globalMenu ul li.event { margin-bottom: 4rem;}
#globalMenu ul li.sns{margin-bottom: 1rem;}
#globalMenu ul li.sns img{ height: 2.0vw; max-height: 35px; }
#globalMenu ul .linkArea{ padding-bottom: 5px;transition: all 0.25s ease;}
#globalMenu ul .linkArea:hover{ opacity: .5;}
#globalMenu ul li.event{pointer-events: none; opacity: .1;}
/*
================================================================================
FOOTER
================================================================================
*/
#globalFooter{ position: absolute; bottom: 0; left: 0; width: 100%; margin-top: 0px; font-size: 0.7rem;}
#globalFooter .innerWrap{
background-color: #fff; height: 80px;padding: 0 40px;
width: 100%;
display: flex;
color: #000;
}
#globalFooter .innerWrap{ overflow: hidden;}
#globalFooter .innerWrap .logo,
#globalFooter .innerWrap .site,
#globalFooter .innerWrap .copyright{height:80px;
display: flex; /* 子要素をflexboxで揃える */
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
align-items: center; /* 子要素をflexboxにより中央に配置する */
}
#globalFooter .innerWrap .logo{ width: 100px; margin-right: 20px;}
#globalFooter .innerWrap .site{ width: 320px; margin-right: 20px;}
#globalFooter .innerWrap .copyright{ }
#globalFooter .logo{ position: relative;}
#globalFooter .logo .logoImage{ width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translate(0,-50%);}
#globalFooter ul{ list-style: none; padding: 0px 0 0 0; margin: 0;}
#globalFooter ul li{ display: inline-block; margin-right: 10px; line-height: 1;}
#globalFooter ul li:last-child{ margin-right: 0;}
#globalFooter ul li a{ color: inherit !important;}
#globalFooter ul li a:before{ content: '▼'; display: inline-block; transform: rotate(-90deg); margin-right: 0.5em;}
#globalFooter .copyright{ padding: 0px 0 0 0; }
@media screen and (min-width:769px) and ( max-width:950px) {
}
@media (max-width: 800px){
#globalFooter .innerWrap{ display: block; height: auto;padding: 0 40px;}
#globalFooter .innerWrap .logo,
#globalFooter .innerWrap .site,
#globalFooter .innerWrap .copyright{height:auto; display: block; text-align: center; width: auto; margin: 0 0 20px 0}
#globalFooter .innerWrap .logo{ padding-top: 20px;}
#globalFooter .logo .logoImage{ width: 200px; position: relative; top: auto; left: auto; transform: translate(0,0%);}
}
/*
================================================================================
BG
================================================================================
*/
#colorBar{ width: 80%; height: 50px; position: fixed; top: 10px; left: 1%; opacity: .7; z-index: 5000; background: #000; visibility: hidden; pointer-events: none;}
#colorBar div{ width: 10px; height: 10px; background: #f30; position: absolute; transition: all 2.5s ease-in-out; }
#colorBar.quick div{transition: all 0s !important;}
#colorBar div.h{ top: 5px;left: 0; }
#colorBar div.s{ top: 20px;left: 0; }
#colorBar div.l{ top: 36px;left: 0; }
#colorBar div.end_h{ top: 5px;right: 0; }
#colorBar div.end_s{ top: 20px;right: 0;}
#colorBar div.end_l{ top: 36px;right: 0;}
#colorBar.step_1{}
#colorBar.step_1 div.h{ left: 0px;}
#colorBar.step_1 div.s{ left: 100px;}
#colorBar.step_1 div.l{ left: 45px;}
#colorBar.step_1 div.end_h{ right: 56px;}
#colorBar.step_1 div.end_s{ right: 100px;}
#colorBar.step_1 div.end_l{ right: 50px;}
#colorBar.step_2{}
#colorBar.step_2 div.h{ left: 158px;}
#colorBar.step_2 div.s{ left: 100px;}
#colorBar.step_2 div.l{ left: 30px;}
#colorBar.step_2 div.end_h{ right: 56px;}
#colorBar.step_2 div.end_s{ right: 100px;}
#colorBar.step_2 div.end_l{ right: 50px;}
#colorBar.step_3{}
#colorBar.step_3 div.h{ left: 212px;}
#colorBar.step_3 div.s{ left: 100px;}
#colorBar.step_3 div.l{ left: 30px;}
#colorBar.step_3 div.end_h{ right: 195px;}
#colorBar.step_3 div.end_s{ right: 86px;}
#colorBar.step_3 div.end_l{ right: 56px;}
#colorBar.step_4{}
#colorBar.step_4 div.h{ left: 233px;}
#colorBar.step_4 div.s{ left: 50px;}
#colorBar.step_4 div.l{ left: 42px;}
#colorBar.step_4 div.end_h{ right: 355px;}
#colorBar.step_4 div.end_s{ right: 100px;}
#colorBar.step_4 div.end_l{ right: 45px;}
#colorBar.step_5{}
#colorBar.step_5 div.h{ left: 360px;}
#colorBar.step_5 div.s{ left: 100px;}
#colorBar.step_5 div.l{ left: 45px;}
#colorBar.step_5 div.end_h{ right: 416px;}
#colorBar.step_5 div.end_s{ right: 100px;}
#colorBar.step_5 div.end_l{ right: 50px;}
/*
================================================================================
top
================================================================================
*/
section{ width: 100vw; position: relative; }
.ease-in{transition: width 0.2s ease-in , height 0s; }
.ease-out{transition: width 0.2s ease-in , height 0s; }
.animOff *{transition: all 0s}
section > .contentsWrap{ padding: 150px 100px 100px 100px; margin: auto; max-width: 1200px;}
section > .frameWrap{ padding: 100px 160px 100px 160px;margin: auto; max-width: 1200px;}
section .centerContents{ position: relative; width: 100%; height: 0; padding-top: 61.111%; background-color: #f3f3f3; margin-bottom: 50px;}
section.top{ height: 100vh; min-height: 400px;}
section.top:before{ content: ''; display: block; height: 400px;}
#frameTitle{ position: fixed; top: 0; left: 0; z-index: 500;}
#frameTitle .item{width: 0; height: 11.2vw; max-height:135px; position: relative; overflow: hidden; }
#frameTitle .item img{ width: auto; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.5 !important}
#frameTitle .item:before{ content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #fff !important;}
#frameTitle .item:after{ content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff !important;}
#frameTitle .readWrap{ position: absolute; top: 0; left: 0;}
#frameTitle .readWrap .item{ transition: width 0.35s cubic-bezier(.5,0,1,.5) , height 0s;}
#frameTitle .readWrap .item_1{ }
#frameTitle .readWrap .item_2{ }
#frameTitle .readWrap .item_3{ }
#frameTitle .readWrap .item:after{ transition: all 0.8s cubic-bezier(.35,.6,.4,1);}
#frameTitle .readWrap .item_1:after{ }
#frameTitle .readWrap .item_2:after{}
#frameTitle .readWrap .item_3:after{}
#frameTitle .readWrap.in .item{ }
#frameTitle .readWrap.in .item:after{ width: 0;}
#frameTitle .readWrap.in .item_1{ transition-delay: 0s; width: 51vw; max-width: 605px;}
#frameTitle .readWrap.in .item_2{ transition-delay: 0.1s; width: 38.6vw; max-width: 460px;}
#frameTitle .readWrap.in .item_3{ transition-delay: 0.2s; width: 33.6vw; max-width: 400px;}
#frameTitle.start .readWrap.in .item_1{ background: url(../img/top/read_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.start .readWrap.in .item_2{background: url(../img/top/read_2.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.start .readWrap.in .item_3{ background: url(../img/top/read_3.png) left center no-repeat; background-size:auto 100%;}
#frameTitle.start .readWrap.in .item img{ display: none;}
#frameTitle .readWrap.in .item_1:after{ transition-delay: 0.35s;}
#frameTitle .readWrap.in .item_2:after{ transition-delay: 0.45s;}
#frameTitle .readWrap.in .item_3:after{ transition-delay: 0.55s;}
#frameTitle .readWrap.out .item{ width: 0 !important; transition: all 0.5s cubic-bezier(.5,0,1,.5); }
#frameTitle .readWrap.out .item:after{ width: 0 !important;}
#frameTitle .readWrap.out .item_1{ transition-delay: 0.1s !important;}
#frameTitle .readWrap.out .item_2{ transition-delay: 0.05s !important;}
#frameTitle .readWrap.out .item_3{ transition-delay: 0s !important;}
#frameTitle .readWrap.w0 .item:after{ display: none;}
#frameTitlecompact .readWrap.in.w0 .item:after{ display: block;}
#frameTitle.compact .readWrap .item{height: 11.2vw; max-height:56px; width: 0; margin-bottom: -1px;}
#frameTitle.compact .readWrap.in .item{}
#frameTitle.compact .readWrap.in .item:after{width: 0;}
#frameTitle.compact .readWrap.in .item_1{transition-delay: 0s; width: 100vw;}
#frameTitle.compact .readWrap.in .item_2{max-height:28px; transition-delay: 0.1s !important;width: 100vw; }
#frameTitle.compact .readWrap.in .item_3{max-height:28px; transition-delay: 0.2s !important; width: 100vw;}
#frameTitle.compact .readWrap.in .item_1:after{ transition-delay: 0.35s !important;}
#frameTitle.compact .readWrap.in .item_2:after{ transition-delay: 0.45s !important;}
#frameTitle.compact .readWrap.in .item_3:after{ transition-delay: 0.55s !important;}
#frameTitle.compact .readWrap.in .item img{ display: none;}
#frameTitle.compact .readWrap.out .item{ width: 0 !important; transition: all 0.5s ease-in-out; }
#frameTitle.compact .readWrap.out .item_1{ transition-delay: 0.1s !important;}
#frameTitle.compact .readWrap.out .item_2{ transition-delay: 0.05s !important;}
#frameTitle.compact .readWrap.out .item_3{ transition-delay: 0s !important;}
#frameTitle.top .readWrap.in .item_1{max-width: 253px; background: url(../img/top/read_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.top .readWrap.in .item_2{max-height:56px; max-width: 192px; background: url(../img/top/read_2.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.top .readWrap.in .item_3{max-height:56px; max-width: 166px; background: url(../img/top/read_3.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.about{ opacity: 0}
#frameTitle.person .readWrap.in .item_1{max-width: 263px; background: url(../img/person/title_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.person .readWrap.in .item_2{max-width: 111px; background: url(../img/person/title_2.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.person .readWrap.in .item_3{max-width: 67px; background: url(../img/person/title_3.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.project .readWrap.in .item_1{max-width: 286px; background: url(../img/project/title_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.project .readWrap.in .item_2{max-width: 149px; background: url(../img/project/title_2.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.project .readWrap.in .item_3{max-width: 131px; background: url(../img/project/title_3.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.rookie .readWrap.in .item_1{max-width: 243px; background: url(../img/rookie/title_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.rookie .readWrap.in .item_2{max-width: 111px; background: url(../img/rookie/title_2.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.rookie .readWrap.in .item_3{max-width: 96px; background: url(../img/rookie/title_3.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.yell .readWrap.in .item_1{max-width: 184px; background: url(../img/yell/title_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.yell .readWrap.in .item_2{max-width: 137px; background: url(../img/yell/title_2.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.yell .readWrap.in .item_3{max-width: 103px; background: url(../img/yell/title_3.png) left center no-repeat; background-size: auto 100%;}
#frameTitle.recruit .readWrap.in .item_1{max-width: 278px; background: url(../img/recruit/title_1.png) left center no-repeat; background-size: auto 100%; }
#frameTitle.recruit .readWrap.in .item_2,
#frameTitle.recruit .readWrap.in .item_3{ width: 0 !important}
#frameTitle.event .readWrap.in .item_1{max-width: 217px; background: url(../img/event/title_1.png) left center no-repeat; background-size: auto 100%; }
.recruitTitle{ position: fixed; bottom: 0; left: 0;z-index: 500; }
#frameRecruitCompact,
.versionWrap.compact{ transform-origin: left bottom; transform: scale(0.5);}
.recruitTitle .item{width: 0; height: 11.2vw; max-height:56px; position: relative; overflow: hidden; background-color: #fff !important; }
.recruitTitle .item img{ width: auto; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.recruitTitle .item:after{ content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff !important; z-index: 5;}
.recruitTitle .versionWrap{ position: absolute; bottom: 0; left: 0;}
.recruitTitle .versionWrap .item{ transition: width 0.35s cubic-bezier(.5,0,1,.5) , height 0s; }
.recruitTitle .versionWrap .item_1{max-width:224px;transition-delay: 0s; }
.recruitTitle .versionWrap .item_2{ max-width: 275px;transition-delay: 0.05s; }
.recruitTitle .versionWrap .item_3{ max-width: 164px;transition-delay: 0.1s; }
.recruitTitle .versionWrap .item:after{ transition: all 0.35s cubic-bezier(.35,.6,.4,1);}
.recruitTitle .versionWrap .item_1:after{ transition-delay: 0.35s;}
.recruitTitle .versionWrap .item_2:after{ transition-delay: 0.4s;}
.recruitTitle .versionWrap .item_3:after{ transition-delay: 0.45s;}
body:not(.scrollOn) .recruitTitle .versionWrap .item_1{ transition-delay: 0.5s; }
body:not(.scrollOn) .recruitTitle .versionWrap .item_2{ transition-delay: 0.6s; }
body:not(.scrollOn) .recruitTitle .versionWrap .item_3{ transition-delay: 0.7s; }
body:not(.scrollOn) .recruitTitle .versionWrap .item_1:after{ transition-delay: 0.85s;}
body:not(.scrollOn) .recruitTitle .versionWrap .item_2:after{ transition-delay: 0.95s;}
body:not(.scrollOn) .recruitTitle .versionWrap .item_3:after{transition-delay: 1.05s;}
.recruitTitle .versionWrap.in .item{width: 100vw; margin-bottom: -1px;}
.recruitTitle .versionWrap.in .item_1{
background: url(../img/top/version_1.png) left center no-repeat;
background-size: auto 100%;
}
.recruitTitle .versionWrap.in .item_2{ background: url(../img/top/version_2.png) left center no-repeat;
background-size: auto 100%;}
.recruitTitle .versionWrap.in .item_3{ background: url(../img/top/version_3.png) left center no-repeat;
background-size: auto 100%; }
.recruitTitle .versionWrap.in .item_3 img{ }
.recruitTitle .versionWrap.in .item:after{ transform: translate3d(100%,0,0);}
.recruitTitle .versionWrap.in .item_1:after{ }
.recruitTitle .versionWrap.in .item_2:after{ }
.recruitTitle .versionWrap.in .item_3:after{ }
.recruitTitle .versionWrap.out .item{ width: 0; transition: all 0.35s cubic-bezier(0,1,.5,1);}
.recruitTitle .versionWrap.out .item_1{ transition-delay: 0.1s;}
.recruitTitle .versionWrap.out .item_2{ transition-delay: 0.05s;}
.recruitTitle .versionWrap.out .item_3{ transition-delay: 0s;}
.recruitTitle .item{width: 0; height: 11.2vw; max-height:56px; position: relative; overflow: hidden; }
.recruitTitle .item img{ width: auto; height: 100%; position: absolute; top: 0; left: 0; display: none;}
.recruitTitle .item:after{ content: ''; display: block; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff !important;}
.recruitTitle .versionWrap{ position: absolute; bottom: 0; left: 0;}
#frameRecruitMenu.recruitTitle{bottom: 0px; left: 0px; position: absolute; z-index: 4900; height: 100vw; overflow: visible; }
body.menuOpen s#frameRecruitMenu.recruitTitle{ }
#frameRecruitMenu.recruitTitle .versionWrap{bottom: 25px; left: 40px; position: absolute; }
#frameRecruitMenu.recruitTitle .versionWrap .item{max-height: 32px; }
#frameRecruitMenu.recruitTitle .versionWrap .item_1{max-width:130px; }
#frameRecruitMenu.recruitTitle .versionWrap .item_2{ max-width: 160px; }
#frameRecruitMenu.recruitTitle .versionWrap .item_3{ max-width: 93px; }
#frameRecruitMenu.recruitTitle .versionWrap .item_1:before{ background: url(../img/top/version_1.png) left center no-repeat; background-size: contain; }
#frameRecruitMenu.recruitTitle .versionWrap .item_2:before{ background: url(../img/top/version_2.png) left center no-repeat; background-size: contain; }
#frameRecruitMenu.recruitTitle .versionWrap .item_3:before{ background: url(../img/top/version_3.png) left center no-repeat; background-size: contain; }
/*
================================================================================
about
================================================================================
*/
section.about{}
section.about .contentsWrap{ padding: 150px 240px 120px 240px;}
section.about .contentsWrap ul{width: 100%; min-width: 500px; margin:0 0 120px 0; list-style: none; padding: 0;
}
section.about .contentsWrap ul li{ width: 0%; height:34px; max-height:34px;margin-bottom: 2%; line-height: 0; position: relative; overflow: hidden;transition: all 0.8s ease-in-out;}
section.about .contentsWrap ul li.is-show{ width: 100%;}
section.about .contentsWrap ul li.large{ height:50px; max-height:50px;}
section.about .contentsWrap ul li.auto{ height:50px; max-height:50px; }
section.about .contentsWrap ul.is-show li{ width: 100%;}
section.about .contentsWrap ul li span{ content: ''; display: block; position: absolute;top: 0; left: 0; height: 100%;
background: url(../img/top/about_2023.png) left top no-repeat; background-size: 100% auto;
}
section.about .contentsWrap ul li:nth-of-type(4),
section.about .contentsWrap ul li:nth-of-type(9),
section.about .contentsWrap ul li:nth-of-type(12),
section.about .contentsWrap ul li:nth-of-type(15),
section.about .contentsWrap ul li:nth-of-type(17),
section.about .contentsWrap ul li:nth-of-type(19){ margin-bottom: 7%;}
section.about .contentsWrap ul li:nth-of-type(1) span { background-position: 0 0%; }
section.about .contentsWrap ul li:nth-of-type(2) span { background-position: 0 4.5%; }
section.about .contentsWrap ul li:nth-of-type(3) span { background-position: 0 9.3%; }
section.about .contentsWrap ul li:nth-of-type(4) span { background-position: 0 14%; }
section.about .contentsWrap ul li:nth-of-type(5) span { background-position: 0 21.2%; }
section.about .contentsWrap ul li:nth-of-type(6) span { background-position: 0 26%; }
section.about .contentsWrap ul li:nth-of-type(7) span { background-position: 0 30.6%; }
section.about .contentsWrap ul li:nth-of-type(8) span { background-position: 0 35.3%; }
section.about .contentsWrap ul li:nth-of-type(9) span { background-position: 0 40%; }
section.about .contentsWrap ul li:nth-of-type(10) span { background-position: 0 47.3%; }
section.about .contentsWrap ul li:nth-of-type(11) span { background-position: 0 52.0%; }
section.about .contentsWrap ul li:nth-of-type(12) span { background-position: 0 56.7%; }
section.about .contentsWrap ul li:nth-of-type(13) span { background-position: 0 64%; }
section.about .contentsWrap ul li:nth-of-type(14) span { background-position: 0 68.7%; }
section.about .contentsWrap ul li:nth-of-type(15) span{ background-position: 0 73.5%; }
section.about .contentsWrap ul li:nth-of-type(16) span { background-position: 0 80.2%; }
section.about .contentsWrap ul li:nth-of-type(17) span { background-position: 0 85.0%; }
section.about .contentsWrap ul li:nth-of-type(18) span { background-position: 0 94.5%; }
section.about .contentsWrap ul li:nth-of-type(19) span { background-position: 0 100.5%; }
section.about .contentsWrap ul li:nth-of-type(20) span { background:none; }
section.about .contentsWrap .btnToMovie{ display: inline-block; position: absolute; top: 0; left: 0;padding:0; border: solid 2px #fff; width: 250px;}
section.about .contentsWrap .btnToMovie img{ width: 100%; height: auto;}
.btnArea.internship .linkArea{ padding: 0px 75px;height:120px;}
.btnArea.internship .inMask{ height: 100%;}
.btnArea.internship .linkArea span img{ height: 75px; }
/*
================================================================================
person
================================================================================
*/
section.person{}
section.person .centerContents{ }
section.person .slick-slide .item{
background-size: 100% auto;
}
section.person .slick-slide .item2{
background: url(../img/person/bg_slide.png) center top repeat-y; background-size: 100% auto;
}
section.person .centerContents .parts{ line-height: 0; font-size: 0;position: absolute;}
section.person .centerContents .parts img{ width: 100%; height: auto; vertical-align: bottom;}
section.person .centerContents .no{ width: 14%; height: auto; top: 5%; left: 83%; right: auto; z-index: 3;}
section.person .centerContents .name{ width: 33.5%; max-width: 292px; height: 100%; top: 0%; left: 10%;z-index: 4;}
section.person .centerContents .photo{ width: 100%; height: auto;top:0; left: 0px; z-index: 2; }
section.person .centerContents .name img.set{ position: absolute; top: 50%; transform: translate(0,-50%);}
section.person .centerContents .name .imageWrap{ position: absolute; top: 50%; transform: translate(0,-50%);}
section.person .centerContents .name .imageWrap img{ width: auto;}
section.person .centerContents .name .imageWrap img:nth-of-type(1) { height: 3.2vw; max-height: 38px; margin-bottom: 20px;}
section.person .centerContents .name .imageWrap img:nth-of-type(2) { height: 3.2vw; max-height: 38px; margin-bottom: 29px;}
section.person .centerContents .name .imageWrap img:nth-of-type(3) { height: 3.5vw; max-height: 42px; margin-bottom: 13px;}
section.person .centerContents .name .imageWrap img:nth-of-type(4) { height: 1.4vw; max-height: 15px; margin-bottom: 8px;}
section.person .centerContents .name .imageWrap img:nth-of-type(5) { height: 1.4vw; max-height: 15px;}
/*
================================================================================
project
================================================================================
*/
section.project{}
section.project .centerContents{ }
section.project.comingsoon .centerContents{ background: url(../img/project/comingsoon.jpg) center center no-repeat; background-size: cover; }
section.project .slick-slide .item{
background-size: 100% auto;
}
section.project .slick-slide .item2{
background: url(../img/person/bg_slide.png) center top repeat-y; background-size: 100% auto;
}
section.project .centerContents .parts{ line-height: 0; font-size: 0;position: absolute;}
section.project .centerContents .parts img{ width: auto; height: 5.6vw; max-height: 75px; vertical-align: bottom;}
section.project .centerContents .no{ width: 11.8%; height: auto; top: 5%; left: 3%; right: auto; z-index: 3;}
section.project .centerContents .name{ width: 33.5%; max-width: 292px; height: auto; top: 0%; left: 16.5%;z-index: 4;}
section.project .centerContents .photo{ width: 100%; height: auto;top:0; left: 0px; z-index: 2; }
section.project .centerContents .name img.set{ position: absolute; top: 50%; transform: translate(0,-50%);}
section.project .centerContents .name .imageWrap{ position: absolute; transform: translate(0,0%);}
section.project .centerContents .name .imageWrap img{ width: auto;}
section.project .centerContents .name .imageWrap img:nth-of-type(1) { height: 3.8vw; max-height: 54px; margin-bottom: 0px;}
section.project .centerContents .name .imageWrap img:nth-of-type(2) { height: 1.5vw; max-height: 20px; margin-bottom: 0px;}
section.project .centerContents .name .imageWrap .name_1_spacer{ height: 1.2vw; max-height: 13px;}
@media screen and (min-width:769px) and ( max-width:1000px) {
}
/*
================================================================================
rookie
================================================================================
*/
body#rookie #frameTitle{ display: none;}
body#rookie #globalMenu ul li.rookie{ pointer-events: none;}
body#rookie section#visualArea .inWrap{padding-top:61%;}
body#rookie section#visualArea .enWrap{ top: 34%; left: auto; right: -15.5%; transform: rotate(90deg);}
body#rookie section#visualArea .enWrap .textImageData{ height: 3.4vw;max-height: 54px;}
body#rookie section#visualArea .jpWrap{ top: -41.5%; left: auto; right: 36.5%; transform: rotate(90deg)}
body#rookie section#visualArea .jpWrap .textImageData{ height: 1.8vw;max-height: 27px;}
section.rookie{}
section.rookie .centerContents{ display: block; background: url(../img/rookie/top.jpg) center center no-repeat; background-size: cover; }
section.rookie.comingsoon{pointer-events: none;}
section.rookie.comingsoon .centerContents{ display: block; background: url(../img/rookie/comingsoon.jpg) center center no-repeat; background-size: cover; }
body#rookie section#contentsArea .readWrap ul{width: 100%; margin:0 0 10% 0; list-style: none; padding: 0;}
body#rookie section#contentsArea .readWrap ul li{ width: 0%; height:3vw; max-height:50px;margin-bottom: 1.5%; line-height: 0; position: relative; overflow: hidden;transition: width 0.8s ease-in-out;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(1) { height:5.6vw; max-height:94px;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(1){ transition-delay: 0.1s;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(2){ transition-delay: 0.2s;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(3){ transition-delay: 0.3s;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(4){ transition-delay: 0.4s;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(5){ transition-delay: 0.5s;}
body#rookie section#contentsArea .readWrap.is-show ul li{ width: 100%;}
body#rookie section#contentsArea .readWrap ul li span{ content: ''; display: block; position: absolute;top: 0; left: 0; height: 100%;
background: url(../img/rookie/read.png) left top no-repeat; background-size: 100% auto;
}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(1){ margin-bottom: 4%;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(1) span { background-position: 0 0%; }
body#rookie section#contentsArea .readWrap ul li:nth-of-type(2) span { background-position: 0 37.5%; }
body#rookie section#contentsArea .readWrap ul li:nth-of-type(3) span { background-position: 0 58%; }
body#rookie section#contentsArea .readWrap ul li:nth-of-type(4) span { background-position: 0 78.5%; }
body#rookie section#contentsArea .readWrap ul li:nth-of-type(5) span { background-position: 0 98.5%; }
body#rookie .contentsLinkTitle{ text-align:center;}
body#rookie .contentsLinkTitle img{ width: 100%; max-width: 420px; margin: auto;}
body#rookie .qaArea .unit_1 {}
body#rookie .qaArea .unit_2 {}
body#rookie .qaArea .unit_3 {grid-template-columns:1fr 1fr;}
body#rookie .qaArea .unit_4 {}
body#rookie .qaArea .unit_5 {grid-template-columns:1fr 1fr;}
body#rookie .qaArea .unit_7 {grid-template-columns:1fr 1fr;}
body#rookie .qaArea .unit_3 article,
body#rookie .qaArea .unit_5 article,
body#rookie .qaArea .unit_7 article{
margin-bottom: 100px;
}
.memberWrap{ margin-bottom: 150px;}
.memberWrap .titleWrap{ text-align: center;}
.memberWrap .title{display: inline-block; width: auto; height: 100px; margin: auto; position: relative; overflow: hidden;}
.memberWrap .title .inWrap{ display: inline-block; text-align: left; width: auto;margin: auto; position: relative;}
.memberWrap .title .labelLine{margin: auto;}
.memberWrap .title .labelLine .textImageData{ height: 5vw;max-height:40px;}
.memberWrap .memberBoxes{
/*
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns :1fr 1fr 1fr 1fr;
list-style: none; grid-gap:30px; margin: 0; padding: 0; align-items: flex-start;
*/
list-style: none;
display: flex;
align-content: center;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}
.memberWrap .memberBoxes > div{ width: 18%; text-align: center;margin: 0 0 2% 0; padding: 0; }
.memberWrap .memberBoxes .fullSpacer{ display: block; width: 100%; margin: 0;}
.memberWrap .memberBoxes > div .nameWrap{display: grid; align-items: flex-start; text-align: center;}
html.IE.version_11 .memberWrap .memberBoxes { display: block; overflow: hidden;}
html.IE.version_11 .memberWrap .memberBoxes > div{ display: block; width: 21%; margin: 0 2% 2% 2%; float: left; height: 25vw; max-height: 350px; }
.memberWrap .thumb{ border-radius:50%; overflow: hidden; width: 100%; position: relative; margin-bottom: 5%; z-index: 1;}
.memberWrap .thumb:before{ content:''; display: inline-block; width: 100%; padding-top: 100%;}
.memberWrap .inWrap{ position: absolute; top: 0; left: 0; }
.memberWrap .inWrap .thumbnail{ z-index: 1;}
.memberWrap .name{ display: inline-block; text-align: left; margin: auto;}
.memberWrap .name .labelLine{margin-bottom: 2%;}
.memberWrap .name .labelLine .textImageData{ height: 1.2vw;max-height: 18px;}
.memberWrap .name .labelLine:nth-of-type(1) { margin-bottom: 4%;}
.memberWrap .name .labelLine:nth-of-type(1) .textImageData { height: 2.6vw; max-height: 42px;}
.honneRead{ margin-bottom: 150px; padding-top: 10rem;}
dl.qa{ display: grid;
grid-template-columns: 4.5rem 1fr;
grid-gap: 1rem 0.5rem ;
padding-left: 3rem;
}
dl.qa dt{ text-align: right;}
dl.qa dt::after{
content: ' ：';
display: inline-block;
}
dl.qa dd{}
.messageWrap{ overflow: hidden; border: solid 0.5em #fff; background: rgba(255,255,255,0.2); background-size: 100% auto;
padding: 3% 5% 5%; color: #000; margin-bottom: 5%;}
.messageWrap h3{ margin-bottom: 3rem; text-align: center;}
.messageWrap h3 img{ width: 100%; max-width: 540px; }
.messageWrap h4{ width: 200px; margin: 0 auto 2rem;}
.messageVisual{ margin-bottom: 5%;}
.messageText{ font-size: 1.05em;}
.messageText ul.normalList li{ line-height: 1.8; margin-bottom: 1em;}
.messageTitle{ text-align: center; margin-bottom: 40px}
.messageTitle img{ width:auto; height: 100px; }
.messageWrap .movieArea{ position: relative;}
.messageWrap .movieArea:not(:last-child) { margin-bottom: 3rem; }
.messageWrap .movieArea::before{ content: ''; display: block; width: 100%; height: auto; padding-top: 56.25%;}
.messageWrap .movieArea iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*
================================================================================
yell
================================================================================
*/
section.yell{}
section.yell .centerContents{ }
section.yell .itemList{
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:auto;
grid-gap: 20px;
}
section.yell .itemList .item{ background: #fff; height: 0; padding-top: 100%;position: relative;}
section.yell .itemList .item:nth-of-type(1) {background: url(../img/yell/comingsoon_1.png) center center no-repeat; background-size: cover;}
section.yell .itemList .item:nth-of-type(2) {background: url(../img/yell/comingsoon_2.png) center center no-repeat; background-size: cover;}
section.yell .itemList .item:nth-of-type(3) {background: url(../img/yell/comingsoon_3.png) center center no-repeat; background-size: cover;}
section.yell .itemList .item:nth-of-type(4) {background: url(../img/yell/comingsoon_4.png) center center no-repeat; background-size: cover;}
section.yell .itemList .item:nth-of-type(5) {background: url(../img/yell/comingsoon_5.png) center center no-repeat; background-size: cover;}
section.yell .itemList .item:nth-of-type(6) {background: url(../img/yell/comingsoon_6.png) center center no-repeat; background-size: cover;}
/*
================================================================================
recruit
================================================================================
*/
section.recruit { padding-bottom: 100px;}
.relationPage .btnArea{margin-bottom: 50px;}
.relationPage .btnArea .linkArea{ padding: 0px 75px;height:95px; }
.relationPage .btnArea .inMask{ height: 100%;}
.relationPage .btnArea .linkArea span img{ height: 46px; }
/*
================================================================================
Coming Soon
================================================================================
*/
section.comingsoon{ pointer-events: none;}
section.project.comingsoon .centerContents:after,
section.yell.comingsoon .centerContents:after,
section.yell.comingsoon .itemList .item:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(../img/common/comingsoon.png) center center rgba(0,0,0,.8) no-repeat; background-size: 45% auto; }
/*
================================================================================
ページ用 （person ベース）
================================================================================
*/
section.page{ padding: 100px 0;}
.globalInnerWrap{ width: 84%; margin: auto; max-width: 1200px;}
section#visualArea{margin-bottom: 130px;}
section#visualArea .globalInnerWrap{ overflow: hidden;}
section#visualArea .inWrap{ width: 100%; height: 0; padding-top: 55%;}
section#visualArea .inWrap:before{ z-index: 2;}
section#visualArea .inWrap .visualImage{ position: absolute; top: 0; z-index: 1;}
section#visualArea .inWrap .labelLine .textImage{transition-delay: 0.35s !important;}
section#visualArea .inWrap .labelLine .textImage:after{transition-delay: 0.6s !important;}
section#visualArea .number,
section#visualArea .jpWrap,
section#visualArea .enWrap{ z-index: 5; }
section#visualArea .number{ position: absolute; top: 7%; left: 6%;}
section#visualArea .jpWrap{ position: absolute; bottom: 6%; left: 6%; }
section#visualArea .enWrap{ position: absolute; top: 40%; left: 6%;}
section#visualArea .number .labelLine:nth-of-type(1) .textImageData{ height: 8vw; max-height: 105px;}
section#visualArea .jpWrap .labelLine:nth-of-type(1){ margin-bottom: 7%;}
section#visualArea .jpWrap .labelLine:nth-of-type(2){ margin-bottom: 4%;}
section#visualArea .jpWrap .labelLine:nth-of-type(1) .textImageData{ height: 4vw;max-height: 52px;}
section#visualArea .jpWrap .labelLine:nth-of-type(2) .textImageData{ height: 1.4vw;max-height: 18px;}
section#visualArea .jpWrap .labelLine:nth-of-type(3) .textImageData{ height: 1.6vw;max-height: 20px;}
section#visualArea .enWrap .labelLine:nth-of-type(1){ margin-bottom: 6%;}
section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 3.4vw;max-height: 42px;}
section#visualArea .enWrap .labelLine:nth-of-type(2) .textImageData{ height: 3.4vw;max-height: 42px;}
section#visualArea p.exComment{ transition: all 500ms ease 1000ms; opacity: 0; font-size: 0.8rem;}
section#visualArea .showEffect.is-show p.exComment{ opacity:1;}
body.person_01 section#visualArea .number{}
body.person_01 section#visualArea .jpWrap{ bottom: 50.5%; left: 6.3%}
body.person_01 section#visualArea .enWrap{ top: auto;bottom: 25%; left: 48.3%; transform: rotate(90deg);}
body.person_02 section#visualArea .number{}
body.person_02 section#visualArea .jpWrap{ bottom: 46.5%; left: 56%}
body.person_02 section#visualArea .enWrap{ top: 71%; left: 5.3%;transform: rotate(90deg); }
body.person_02 section#visualArea .enWrap .labelLine{ padding-right: 1rem;}
body.person_02 section#visualArea .enWrap .labelLine:nth-of-type(2){margin-bottom: 8%;}
body.person_02 section#visualArea .enWrap .labelLine:nth-of-type(2){ padding-right: 0;}
body.person_02 section#visualArea .enWrap .textImageData{ }
body.person_03 section#visualArea .number{}
body.person_03 section#visualArea .jpWrap{ bottom: auto; top:41%; left: 6%;}
body.person_03 section#visualArea .enWrap{ top: 45%; left: 53.5%; transform: rotate(90deg);}
body.person_04 section#visualArea .number{}
body.person_04 section#visualArea .jpWrap{ bottom: auto; top:41%; left: 6%;}
body.person_04 section#visualArea .enWrap{ top: 23%; left: 55.5%; transform: rotate(90deg);}
body.person_05 section#visualArea .number{ }
body.person_05 section#visualArea .jpWrap{ bottom: 7%; left: 50%;}
body.person_05 section#visualArea .enWrap{ top: 59%; left: -4%; transform: rotate(90deg);}
body.person_05 section#visualArea .enWrap .textImageData{ }
body.person_06 section#visualArea .number{ }
body.person_06 section#visualArea .jpWrap{ bottom: 41%; left: 56.5%}
body.person_06 section#visualArea .enWrap{ top: 55%; left: -0.4%; transform: rotate(90deg);}
body.person_06 section#visualArea .enWrap .labelLine{ padding-right: 2vw;}
section#contentsArea{margin-bottom: 100px; padding:0 50px;}
body.page section#contentsArea{margin-bottom: 100px;}
section#contentsArea.noPadding{padding:0px;}
article:not(:last-child){ margin-bottom: 100px;}
article.grid{
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-gap: 50px;
text-align: left;
width: 100%;
}
article.grid.inPadding{ padding: 0 12%;}
article.grid .contents{ overflow: auto;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 1 /2;grid-row: 1/2;
}
html.IE.version_11 article.grid .contents{ padding-right: 0%; }
html.IE.version_11 body.page article.grid .contents{ padding-right: 0%;}
article.grid:not(.col_2_image) .image{
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 2 /3;grid-row: 1/2;}
article.grid.imgR .contents{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 1 /2; grid-row: 1/2;}
html.IE.version_11 article.grid.imgR .contents{ padding-right: 10%;}
article.grid.imgR .image{
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 2 /3;grid-row: 1/2;}
article.grid.imgL .contents{
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 2 /3;grid-row: 1/2;}
html.IE.version_11 article.grid.imgL .contents{ padding-left: 10%;}
article.grid.imgL .image{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 1 /2;grid-row: 1/2;}
article.grid.imgFull .image{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
-ms-grid-row-span: 1;
grid-column: 1 /3;grid-row: 1/2;}
article.grid.contentsFull .contents{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
-ms-grid-row-span: 1;
grid-column: 1 /3;grid-row: 1/2;}
article .contents h2.pageTitle{ font-size: 2.5rem; line-height: 1.5; margin-bottom: 50px;}
body.page .subNavi{ margin:0 0 100px 0 !important; list-style: none; padding: 0; border-right: solid 1px #fff;}
body.page .subNavi li{ border-left: solid 1px #fff; text-align: center; font-size: 1.4em;}
body.page .subNavi li a{ display: block; text-decoration: none !important;}
html.IE.version_11 body.page .subNavi{ display: block; overflow: hidden; }
html.IE.version_11 body.page .subNavi li{ width: 33.3%; float: left;}
body.page .contents a{ text-decoration: underline;}
body.page .contents h3{ font-size: 1.5rem; line-height: 1.5; margin-bottom: 60px; background-color: rgba(0,0,0,.1); padding: 1em;}
body.page .contents h4{ font-size: 1.2rem; line-height: 1.5; margin-bottom: 20px; padding-top: 20px;}
body.page .contents dl{ margin-bottom: 20px;}
body.page .contents dl dl{}
body.page .contents dl dd{ margin-bottom: 40px;}
body.page .contents dl.privacy{ padding-top: 40px;}
body.page .contents dl.privacy dt{ margin-bottom: 20px;}
body.page .contents dl.privacy dt:not(:first-child){ margin-top: 40px;}
body.page .contents dl.privacy dd{}
body.page .contents ol{margin-bottom: 20px;}
body.page .contents ol li{}
body.page .contents ul{ margin-bottom: 20px;}
body.page .contents ul li{}
body.page .contents dl.dtLine{}
body.page .contents dl.dtLine > dt{ font-size: 1.2em; border-bottom: dashed 1px #fff; border-top: dashed 1px #fff; padding:0.5em 0; margin-bottom: 1em;}
body.page .contents dl.dtLine > dt:not(:first-child){ margin-top: 60px;}
body.page .contents dl.dtLine > dd{}
body.page article .h3Wrap:not(:last-child){ margin-bottom: 100px; }
body.page article .h3Wrap .h3inWrap{ padding: 0;}
/*
================================================================================
PERSON (Detail Page)
================================================================================
*/
body#person:not(.person_top) #frameTitle{ display: none;}
html:not(.smartPhone) body#person.person_top #archivesArea ul li:nth-of-type(2),
body#person.person_top #archivesArea ul li:last-child{}
body#person #contentsArea article{}
body#person #contentsArea article .inContents{ font-size: 0.8em;}
body#person #contentsArea article img.photoFrame{ outline: 3px solid #fff; outline-offset: -3px;}
body#person #contentsArea article .photoFrame:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: 3px solid #fff; outline-offset: -3px;z-index: 100; opacity: 0;transform: translate(0,0); transition: all 0.1s cubic-bezier(.5,0,1,.5) 1.3s;}
.showEffect.is-show .photoFrame:after{opacity: 1 !important;}
/* 0 ============================================================================================= */
body#person #contentsArea article.favorite .image .hideScroll{ padding-top: 65.8%; }
body#person #contentsArea article.voice .image .hideScroll{ padding-top: 79.6%; }
/* 01 ============================================================================================= */
body#person.person_01 #contentsArea article.unit_1{ grid-template-columns:50% 1fr}
body#person.person_01 #contentsArea article.unit_1 .titleLine{}
body#person.person_01 #contentsArea article.unit_1 .inContents{ margin-left: 5%;}
body#person.person_01 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 77.8%;}
body#person.person_01 #contentsArea article.unit_2{}
body#person.person_01 #contentsArea article.unit_2 .titleLine{margin-left: 5%;margin-right: 5%;}
body#person.person_01 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#person.person_01 #contentsArea article.unit_3{ grid-template-columns:1fr 60%;}
body#person.person_01 #contentsArea article.unit_3 .titleLine{}
body#person.person_01 #contentsArea article.unit_3 .inContents{margin-left: 10%;}
body#person.person_01 #contentsArea article.unit_3 .image .hideScroll{ padding-top: 86.4%;}
body#person.person_01 #contentsArea article.unit_4{ grid-template-columns:50% 1fr}
.pcDevice body#person.person_01 #contentsArea article.unit_4{ width: 90%; margin-left: auto; margin-right: auto; }
body#person.person_01 #contentsArea article.unit_4 .titleLine{}
body#person.person_01 #contentsArea article.unit_4 .inContents{}
body#person.person_01 #contentsArea article.unit_5{ grid-template-columns:1fr 35%}
body#person.person_01 #contentsArea article.unit_5 .titleLine{}
body#person.person_01 #contentsArea article.unit_5 .inContents{}
body#person.person_01 #contentsArea article.unit_6{ grid-template-columns:35% 1fr}
body#person.person_01 #contentsArea article.unit_6 .titleLine{}
body#person.person_01 #contentsArea article.unit_6 .inContents{}
/* 02 ============================================================================================= */
body#person.person_02 #contentsArea article.unit_1{ grid-template-columns:40% 1fr}
body#person.person_02 #contentsArea article.unit_1 .titleLine{}
body#person.person_02 #contentsArea article.unit_1 .inContents{ margin-left: 5%;}
body#person.person_02 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 77.8%;}
body#person.person_02 #contentsArea article.unit_2{}
body#person.person_02 #contentsArea article.unit_2 .titleLine{margin-left: 5%;margin-right: 5%;}
body#person.person_02 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#person.person_02 #contentsArea article.unit_3{ grid-template-columns:1fr 40%;}
body#person.person_02 #contentsArea article.unit_3 .titleLine{}
body#person.person_02 #contentsArea article.unit_3 .inContents{margin-left: 15%;}
body#person.person_02 #contentsArea article.unit_3 .image .hideScroll{ padding-top: 86.4%;}
body#person.person_02 #contentsArea article.unit_4{ grid-template-columns:32% 1fr}
.pcDevice body#person.person_02 #contentsArea article.unit_4{ width: 90%; margin-left: auto; margin-right: auto; }
body#person.person_02 #contentsArea article.unit_4 .titleLine{}
body#person.person_02 #contentsArea article.unit_4 .inContents{}
body#person.person_02 #contentsArea article.unit_5{ grid-template-columns:1fr 35%}
body#person.person_02 #contentsArea article.unit_5 .titleLine{}
body#person.person_02 #contentsArea article.unit_5 .inContents{}
body#person.person_02 #contentsArea article.unit_6{ grid-template-columns:35% 1fr}
body#person.person_02 #contentsArea article.unit_6 .titleLine{}
body#person.person_02 #contentsArea article.unit_6 .inContents{}
body#person.person_03 #contentsArea article.unit_1{ grid-template-columns:40% 1fr}
body#person.person_03 #contentsArea article.unit_1 .titleLine{}
body#person.person_03 #contentsArea article.unit_1 .inContents{ margin-left: 5%;}
body#person.person_03 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 77.8%;}
body#person.person_03 #contentsArea article.unit_2{}
body#person.person_03 #contentsArea article.unit_2 .titleLine{margin-left: 5%;margin-right: 5%;}
body#person.person_03 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#person.person_03 #contentsArea article.unit_3{ grid-template-columns:1fr 40%;}
body#person.person_03 #contentsArea article.unit_3 .titleLine{}
body#person.person_03 #contentsArea article.unit_3 .inContents{margin-left: 5%;}
body#person.person_03 #contentsArea article.unit_3 .image .hideScroll{ padding-top: 86.4%;}
body#person.person_03 #contentsArea article.unit_4{ grid-template-columns: 1fr 32%}
.pcDevice body#person.person_03 #contentsArea article.unit_4{ width: 90%; margin-left: auto; margin-right: auto; }
body#person.person_03 #contentsArea article.unit_4 .titleLine{}
body#person.person_03 #contentsArea article.unit_4 .inContents{}
body#person.person_03 #contentsArea article.unit_5{ grid-template-columns:1fr 35%}
body#person.person_03 #contentsArea article.unit_5 .titleLine{}
body#person.person_03 #contentsArea article.unit_5 .inContents{}
body#person.person_01 #contentsArea article.unit_6{ grid-template-columns:35% 1fr}
body#person.person_03 #contentsArea article.unit_6 .titleLine{}
body#person.person_03 #contentsArea article.unit_6 .inContents{}
/* 03 ============================================================================================= */
/* 04 ============================================================================================= */
body#person.person_04 #contentsArea article.unit_1{ grid-template-columns:1fr 42%}
body#person.person_04 #contentsArea article.unit_1 .titleLine{}
body#person.person_04 #contentsArea article.unit_1 .inContents{ margin-left: 15%;}
body#person.person_04 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 72.3%;}
body#person.person_04 #contentsArea article.unit_2{grid-template-columns:35% 1fr}
body#person.person_04 #contentsArea article.unit_2 .titleLine{margin-left: 0%;}
body#person.person_04 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#person.person_04 #contentsArea article.unit_2 .image .hideScroll{ padding-top: 97.6%;}
body#person.person_04 #contentsArea article.unit_3{ }
body#person.person_04 #contentsArea article.unit_3 .titleLine{margin-left: 5%; margin-right: 5%;}
body#person.person_04 #contentsArea article.unit_3 .inContents{margin-left: 10%;}
body#person.person_04 #contentsArea article.unit_4{ grid-template-columns:1fr 44%}
body#person.person_04 #contentsArea article.unit_4 .titleLine{margin-left: 5%;}
body#person.person_04 #contentsArea article.unit_4 .inContents{}
body#person.person_04 #contentsArea article.unit_5{ grid-template-columns:35% 1fr}
body#person.person_04 #contentsArea article.unit_5 .titleLine{}
body#person.person_04 #contentsArea article.unit_5 .inContents{}
body#person.person_04 #contentsArea article.unit_6{ grid-template-columns:1fr 35%}
body#person.person_04 #contentsArea article.unit_6 .titleLine{}
body#person.person_04 #contentsArea article.unit_6 .inContents{}
/* 05 ============================================================================================= */
body#person.person_05 #contentsArea article.unit_1{ grid-template-columns:42% 1fr}
body#person.person_05 #contentsArea article.unit_1 .titleLine{}
body#person.person_05 #contentsArea article.unit_1 .inContents{ margin-left: 15%;}
body#person.person_05 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 77%;}
body#person.person_05 #contentsArea article.unit_2{ grid-template-columns:1fr 35%;}
body#person.person_05 #contentsArea article.unit_2 .titleLine{}
body#person.person_05 #contentsArea article.unit_2 .inContents{margin-left: 15%;}
body#person.person_05 #contentsArea article.unit_2 .image .hideScroll{ padding-top: 99.4%;}
body#person.person_05 #contentsArea article.unit_3{}
body#person.person_05 #contentsArea article.unit_3 .titleLine{margin-left: 9%;}
body#person.person_05 #contentsArea article.unit_3 .inContents{margin-left: 15%;}
body#person.person_05 #contentsArea article.unit_4{ grid-template-columns:25% 1fr}
body#person.person_05 #contentsArea article.unit_4 .titleLine{}
body#person.person_05 #contentsArea article.unit_4 .inContents{}
body#person.person_05 #contentsArea article.unit_5{ grid-template-columns:1fr 35%}
body#person.person_05 #contentsArea article.unit_5 .titleLine{}
body#person.person_05 #contentsArea article.unit_5 .inContents{}
body#person.person_05 #contentsArea article.unit_6{ grid-template-columns:35% 1fr}
body#person.person_05 #contentsArea article.unit_6 .titleLine{}
body#person.person_05 #contentsArea article.unit_6 .inContents{}
/* 06 ============================================================================================= */
body#person.person_06 #contentsArea article.unit_1{ grid-template-columns:1fr 42%}
body#person.person_06 #contentsArea article.unit_1 .titleLine{}
body#person.person_06 #contentsArea article.unit_1 .inContents{ margin-left: 15%;}
body#person.person_06 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 73.2%;}
body#person.person_06 #contentsArea article.unit_2{}
body#person.person_06 #contentsArea article.unit_2 .titleLine{margin-left: 15%;}
body#person.person_06 #contentsArea article.unit_2 .inContents{margin-left: 15%;}
body#person.person_06 #contentsArea article.unit_3{ grid-template-columns:42% 1fr;}
body#person.person_06 #contentsArea article.unit_3 .titleLine{}
body#person.person_06 #contentsArea article.unit_3 .inContents{margin-left: 15%;}
body#person.person_06 #contentsArea article.unit_3 .image .hideScroll{ padding-top: 80%;}
body#person.person_06 #contentsArea article.unit_4{ grid-template-columns:1fr 42%}
body#person.person_06 #contentsArea article.unit_4 .titleLine{margin-left: 5%;}
body#person.person_06 #contentsArea article.unit_4 .inContents{}
body#person.person_06 #contentsArea article.unit_5{ grid-template-columns:35% 1fr}
body#person.person_06 #contentsArea article.unit_5 .titleLine{}
body#person.person_06 #contentsArea article.unit_5 .inContents{}
body#person.person_06 #contentsArea article.unit_6{ grid-template-columns:1fr 35%}
body#person.person_06 #contentsArea article.unit_6 .titleLine{}
body#person.person_06 #contentsArea article.unit_6 .inContents{}
/* 07 ============================================================================================= */
body#person.person_07 #contentsArea article.unit_1{ grid-template-columns:42% 1fr}
body#person.person_07 #contentsArea article.unit_1 .titleLine{}
body#person.person_07 #contentsArea article.unit_1 .inContents{ margin-left: 10%;}
body#person.person_07 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 77.8%;}
body#person.person_07 #contentsArea article.unit_2{}
body#person.person_07 #contentsArea article.unit_2 .titleLine{margin-left: 5%;}
body#person.person_07 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#person.person_07 #contentsArea article.unit_3{ grid-template-columns:1fr 42%;}
body#person.person_07 #contentsArea article.unit_3 .titleLine{}
body#person.person_07 #contentsArea article.unit_3 .inContents{margin-left: 15%;}
body#person.person_07 #contentsArea article.unit_3 .image .hideScroll{ padding-top: 80%;}
body#person.person_07 #contentsArea article.unit_4{ grid-template-columns:42% 1fr}
body#person.person_07 #contentsArea article.unit_4 .titleLine{}
body#person.person_07 #contentsArea article.unit_4 .inContents{}
body#person.person_07 #contentsArea article.unit_5{ grid-template-columns:1fr 35%}
body#person.person_07 #contentsArea article.unit_5 .titleLine{}
body#person.person_07 #contentsArea article.unit_5 .inContents{}
body#person.person_07 #contentsArea article.unit_6{ grid-template-columns:35% 1fr}
body#person.person_07 #contentsArea article.unit_6 .titleLine{}
body#person.person_07 #contentsArea article.unit_6 .inContents{}
/* 08 ============================================================================================= */
body#person.person_08 #contentsArea article.unit_1{ grid-template-columns:1fr 42%}
body#person.person_08 #contentsArea article.unit_1 .titleLine{}
body#person.person_08 #contentsArea article.unit_1 .inContents{ margin-left: 15%;}
body#person.person_08 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 79.4%;}
body#person.person_08 #contentsArea article.unit_2{}
body#person.person_08 #contentsArea article.unit_2 .titleLine{margin-left: 8%;}
body#person.person_08 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#person.person_08 #contentsArea article.unit_3{ grid-template-columns:42% 1fr;}
body#person.person_08 #contentsArea article.unit_3 .titleLine{}
body#person.person_08 #contentsArea article.unit_3 .inContents{margin-left: 15%;}
body#person.person_08 #contentsArea article.unit_3.image .hideScroll{ padding-top: 80%;}
body#person.person_08 #contentsArea article.unit_4{ grid-template-columns:1fr 42%}
body#person.person_08 #contentsArea article.unit_4 .titleLine{margin-left: 5%;}
body#person.person_08 #contentsArea article.unit_4 .inContents{}
body#person.person_08 #contentsArea article.unit_5{ grid-template-columns:35% 1fr}
body#person.person_08 #contentsArea article.unit_5 .titleLine{}
body#person.person_08 #contentsArea article.unit_5 .inContents{}
body#person.person_08 #contentsArea article.unit_6{ grid-template-columns:1fr 35%}
body#person.person_08 #contentsArea article.unit_6 .titleLine{}
body#person.person_08 #contentsArea article.unit_6 .inContents{}
#archivesArea{ padding-bottom: 100px;}
body:not(.project_top) #archivesArea .globalInnerWrap{ width: 66%;}
body.person_top #archivesArea .globalInnerWrap{ width: 90%;}
#archivesArea .globalInnerWrap ul.grid{}
body#person.person_top #archivesArea{ padding-top: 50px;}
#archivesArea .showEffect{}
#archivesArea ul{
display: -ms-flex;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 !important;
margin:0 auto 20px auto;
grid-gap:0;
}
#archivesArea ul li{ overflow: hidden; position: relative;
width: 23.5%;
height: auto;
margin:0 2% 2% 0;
display: -ms-flex;
display: grid;
align-items: flex-start;
}
#archivesArea ul li.fullSpacer{ display: block; width: 100%; margin: 0;}
#archivesArea ul li a{ display: block; line-height: 0;}
/* body:not(.person_top) #archivesArea ul li:nth-of-type(4n){ margin-right: 0;} */
#archivesArea ul li .inWrap{ width: 100%; height: 0; padding-top: 120%;}
#archivesArea ul li .inWrap:before{z-index: 2;}
#archivesArea ul li .inWrap img.thumbnail{ position: absolute; top:0%;z-index: 1; }
#archivesArea ul li .number{ position: absolute; top: 10px; right: 10px; z-index: 10; width: auto; height: auto; }
#archivesArea ul li .number .labelLine img{ height: 2.7vw; max-height: 45px;}
#archivesArea ul li .nameWrap{ position: absolute; top: 10px; left: 10px; z-index: 2; width: 100%;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(1) { margin-bottom: 8px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(2) { margin-bottom: 4px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(3) { margin-bottom: 4px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(4) { margin-bottom: 4px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(5) {}
#archivesArea ul li .nameWrap .labelLine img{ margin-right: 1vw;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(1) img{ height: 1.5vw; max-height: 18px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(2) img{height: 0.6vw; max-height: 8px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(3) img{height: 0.6vw; max-height: 8px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(4) img{height: 0.6vw; max-height: 8px;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(5) img{height: 0.6vw; max-height: 8px;}
#archivesArea ul li .nameWrap .labelLine .textImage{transition-delay: 0.35s !important; background-position: left top; text-align: left;}
#archivesArea ul li .nameWrap .labelLine .textImage:after{transition-delay: 0.6s !important;}
#archivesArea ul li.comingsoon{}
#archivesArea ul li.comingsoon a{ pointer-events: none;}
#archivesArea ul li.comingsoon a .inWrap::after{ content: ''; display: block; background: #fff; opacity: .5; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#archivesArea ul li.comingsoon .nameWrap{ top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-flex; justify-content: center;}
#archivesArea ul li.comingsoon .nameWrap .labelLine:nth-of-type(1) img{ height: 2.0vw; max-height: 20px;}
#archivesArea .senpaiCheck{ margin-bottom: 100px; text-align: center;}
#archivesArea .senpaiCheck img{ height: 47px;}
#archivesArea .houmon.btnArea{ margin-bottom: 20px;}
#archivesArea .houmon.btnArea .labelLine{ margin: 0vw 0;}
#archivesArea .houmon.btnArea .linkArea{ height: 110px;}
#archivesArea .houmon.btnArea img{ height: 72px;}
.uaIE #archivesArea .houmon.btnArea img{ height: 102px;}
body#person #archivesArea .houmon,
body#person #archivesArea p.tCenter{ display: none !important; visibility: hidden !important; pointer-events: none !important;}
#mbArea{ padding-bottom: 30px;padding-top: 0px; padding-left: 50px; padding-right: 50px;}
#mbArea .globalInnerWrap{ width:80%;max-width:1100px;}
#mbArea .globalInnerWrap ul.grid{}
#mbArea .showEffect{}
#mbArea .memberWrap{ margin-bottom: 20px;}
#mbArea .memberWrap .title{}
#mbArea .memberWrap .title .labelLine{ margin-bottom: 0px;}
#mbArea .memberWrap .title .labelLine .textImageData{ height: 5vw ;max-height:40px;}
#mbArea ul{ list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0 !important;
margin:0 auto 20px auto;
align-items: stretch;
align-content: stretch;
vertical-align: top;
}
#mbArea ul li{ position: relative;
width: 31.3%;
height: auto;
margin:0 3% 5% 0;
display:grid;
align-items: flex-start;
align-content: flex-start;
}
#mbArea ul li a{ display: block; line-height: 0;}
#mbArea ul li:nth-of-type(3n){ margin-right: 0;}
.pcDevice #mbArea ul.cWrap li{ width: 30.3%; text-align: left;}
.pcDevice #mbArea ul.cWrap li:nth-of-type(3n){ margin:0 3% 5% 0;}
.pcDevice #mbArea ul.cWrap.f_2_3_2 li:nth-of-type(6){ margin-right: 0;}
#mbArea ul.cWrap li.full{ width: 100%; height: 0; margin: 0;}
#mbArea ul li .inWrap{ width: 100%; height: 0; padding-top: 100%; margin-bottom: 20px; }
#mbArea ul li .inWrap:before{ z-index: 2; }
#mbArea ul li .inWrap img.thumbnail{ position: absolute; top:0%;z-index:1; }
#mbArea .titleWrap .labelLine{margin-bottom: 30px; }
#mbArea .titleWrap .labelLine img.textImageData{height: 30px;}
#mbArea ul li .photoWrap{ overflow: hidden;}
#mbArea ul li .nameWrap{ position: relative; width: 100%;padding-bottom: 0px; margin-bottom: 10px; border-bottom: solid 1px #fff;}
#mbArea ul li .nameWrap .labelLine.name{margin-bottom: 10px; }
#mbArea ul li .nameWrap .labelLine.division{ margin-bottom: 10px; }
#mbArea ul li .nameWrap .labelLine.name img.textImageData{height: 33px;}
#mbArea ul li .nameWrap .labelLine.division img.textImageData{ height: 15px;}
#mbArea ul li .textWrap{ font-size: 0.9em; line-height: 1.5;}
/*
================================================================================
PROJECT (Detail Page)
================================================================================
*/
body#project:not(.project_top) #frameTitle{ display: none;}
body#project section#visualArea{ margin-bottom: 75px;}
body#project section#visualArea .number{ position: absolute; top: 4.5%; left: 2.8%;}
body#project section#visualArea .enWrap{ position: absolute; top: 4.5%; left: 15%;}
body#project section#visualArea .number .labelLine:nth-of-type(1) .textImageData{ max-height:86px; height: 6.2vw;}
body#project section#visualArea .enWrap .labelLine:nth-of-type(1) { margin-bottom: 0;}
body#project section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 3.3vw;max-height:48px;}
body#project section#visualArea .enWrap .labelLine:nth-of-type(3) .textImageData{height:1.8vw;max-height:26px;}
body#project section#visualArea .enWrap .spacerBlock{ height: 1.1vw; max-height: 13px;}
body#project #contentsArea article{}
body#project #contentsArea .globalInnerWrap{ width: 80%;max-width:1100px;}
@media (max-width: 768px){
body#project #contentsArea .globalInnerWrap{ width: 90%;max-width:1100px;}
}
body#project #contentsArea article .inContents{ font-size: 0.8em;}
body#project #contentsArea article img.photoFrame{ outline: 3px solid #fff; outline-offset: -3px;}
body#project #contentsArea article .photoFrame:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: 3px solid #fff; outline-offset: -3px;z-index: 100; opacity: 0;transform: translate(0,0); transition: all 0.1s cubic-bezier(.5,0,1,.5) 1.3s;}
.showEffect.is-show .photoFrame:after{opacity: 1 !important;}
/* 01 ============================================================================================= */
body#project.project_01 section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{height: 3.5vw; max-height:43px;}
body#project.project_01 #contentsArea article.unit_1{ margin-left: 10%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_01 #contentsArea article.unit_1 .inContents{margin-left: 5%;margin-right: 5%;}
body#project.project_01 #contentsArea article.unit_2{margin-left: 0%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_01 #contentsArea article.unit_2 .inContents{margin-left: 5%;margin-right: 10%;}
body#project.project_01 #contentsArea article.unit_3{margin-left: 0%;margin-right: 10%;margin-bottom: 10%; }
body#project.project_01 #contentsArea article.unit_4{margin-bottom: 10%; }
body#project.project_01 #contentsArea article.unit_5{grid-template-columns:1fr 50%;margin-left: 0%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_01 #contentsArea article.unit_6{margin-left: 10%;margin-right: 10%;margin-bottom: 5%; }
/* 02 ============================================================================================= */
body#project.project_02 section#visualArea .enWrap{ }
body#project.project_02 section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 3.0vw; max-height: 46px;}
body#project.project_02 section#visualArea .enWrap .spacerBlock{ }
body#project.project_02 #contentsArea article.unit_1{ margin-bottom: 5%;}
body#project.project_02 #contentsArea article.unit_2{grid-template-columns:1fr 50%;margin-bottom: 3%; }
body#project.project_02 #contentsArea article.unit_2 .inContents{margin-left: 10%;}
body#project.project_02 #contentsArea article.unit_3{margin-left: 10%;margin-right: 10%;margin-bottom: 3%; }
body#project.project_02 #contentsArea article.unit_4{grid-template-columns:50% 1fr ;margin-bottom: 10%; }
body#project.project_02 #contentsArea article.unit_5{margin-left: 0%;margin-right: 0%;margin-bottom: 3%; }
body#project.project_02 #contentsArea article.unit_6{margin-left: 10%;margin-right: 10%;margin-bottom: 5%; }
body#project.project_02 #contentsArea article.unit_7{margin-left: 5%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_02 #contentsArea article.unit_8{margin-left: 5%;margin-right: 0%;margin-bottom: 10%; }
body#project.project_02 #contentsArea article.unit_9{margin-left: 0%;margin-right: 0%;margin-bottom: 10%; }
body#project.project_02 #contentsArea article.unit_10{margin-left: 3%;margin-right: 3%;margin-bottom: 3%; }
body#project.project_02 #contentsArea article.unit_11{margin-left: 3%;margin-right: 3%;margin-bottom: 10%; }
/* 03 ============================================================================================= */
body#project.project_03 section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{height: 3.0vw; max-height:46px;}
body#project.project_03 #contentsArea article.unit_1{ margin-left: 10%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_03 #contentsArea article.unit_1 .inContents{margin-left: 5%;margin-right: 5%;}
body#project.project_03 #contentsArea article.unit_2{margin-left: 0%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_03 #contentsArea article.unit_2 .inContents{margin-left: 5%;margin-right: 10%;}
body#project.project_03 #contentsArea article.unit_3{margin-left: 0%;margin-right: 10%;margin-bottom: 10%; }
body#project.project_03 #contentsArea article.unit_4{margin-bottom: 10%; }
body#project.project_03 #contentsArea article.unit_5{grid-template-columns:1fr 50%;margin-left: 0%;margin-right: 0%;margin-bottom: 5%; }
body#project.project_03 #contentsArea article.unit_6{margin-left: 10%;margin-right: 10%;margin-bottom: 5%; }
/* 04 ============================================================================================= */
body#project.project_04 #contentsArea article.unit_1{ margin-bottom: 5%;}
body#project.project_04 #contentsArea article.unit_1 .inContents{margin-left: 10%;margin-right: 10%;}
body#project.project_04 #contentsArea article.unit_2{margin-left: 15%;margin-right: 15%;margin-bottom: 3%; }
body#project.project_04 #contentsArea article.unit_3{margin-left: 10%;margin-right: 10%;margin-bottom: 3%; }
body#project.project_04 #contentsArea article.unit_4{grid-template-columns:1fr 1fr;margin-bottom: 3%; grid-gap:2%;}
body#project.project_04 #contentsArea article.unit_5{margin-left: 10%;margin-right: 10%;margin-bottom: 3%; }
body#project.project_04 #contentsArea article.unit_6{margin-left: 5%;margin-right: 10%;margin-bottom: 10%; }
body#project.project_04 #contentsArea article.unit_7{margin-left: 0%;margin-right: 0%;margin-bottom: 3%; }
body#project.project_04 #contentsArea article.unit_8{margin-left: 0%;margin-right: 0%;margin-bottom: 10%; }
body#project.project_04 #contentsArea article.unit_9{margin-left: 5%;margin-right: 5%;margin-bottom: 10%; }
body#project.project_04 #contentsArea article.unit_10{margin-left: 3%;margin-right: 3%;margin-bottom: 10%; }
body#project.project_04 #contentsArea article.unit_11{margin-left: 3%;margin-right: 3%;margin-bottom: 10%; }
body#project.project_04 #contentsArea article.unit_12{margin-left: 0%;margin-right: 0%;margin-bottom: 10%; }
body#project.project_04 #contentsArea article.unit_13{margin-left: 5%;margin-right: 5%;margin-bottom: 10%; }
.otherProjects{ padding-top: 50px; margin-bottom: 50px; display: flex;flex-wrap:wrap;justify-content:center;}
.otherProjects .project{ overflow: hidden; position: relative;
width: 48%; margin: 0 1% 2% 1%;
height: auto;
display: -ms-flex;
display: grid;
align-items: flex-start;
}
.otherProjects .project .inWrap:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: .5; z-index: 2;}
.otherProjects .project .inWrap{ width: 100%; height: 0; padding-top: 61.1%; position: relative;z-index: 1; }
.otherProjects .project .inWrap img.thumbnail{ position: absolute; top:0%;z-index: 1; }
.otherProjects .project .thumbnail {position: absolute; top: 0; left: 0; width: 100%; height: 100%;z-index: 1;}
.otherProjects .project .number{ position: absolute; top: 6%; left: 4%;z-index: 5;}
.otherProjects .project .number .textImageData{ height: 3.5vw; max-height: 52px;}
.otherProjects .project .enWrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;z-index: 5;}
.otherProjects .project .enWrap .labelLine{ margin: 0;}
.otherProjects .project .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.5vw; max-height: 100px;}
.otherProjects .project_01 .enWrap{
transform: translate(-50%,-40%);
}
.otherProjects .project_01 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 7.5vw; max-height: 107px;}
.otherProjects .project_02 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.5vw; max-height: 30px;}
.otherProjects .project_03 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.5vw; max-height: 36px;}
.otherProjects .project_04 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 7.5vw; max-height: 100px;}
.otherProjects .project .enWrap .labelLine:nth-of-type(2) .textImageData { height: 1.65vw; max-height: 24px;}
.otherProjects .project .enWrap .labelLine:nth-of-type(3) .textImageData { height: 1.65vw; max-height: 24px;}
.otherProjects .project .enWrap .labelLine:nth-of-type(4) .textImageData { height: 1.65vw; max-height: 24px;}
.otherProjects .project_01 .enWrap .labelLine:nth-of-type(3) .textImageData{ height: 3vw; max-height: 36px;}
.otherProjects .project_02 .enWrap .labelLine:nth-of-type(3) .textImageData{ height: 3vw; max-height: 22px;}
.otherProjects .project_04 .enWrap .labelLine:nth-of-type(3) .textImageData{ height: 3vw; max-height: 22px;}
.otherProjects .comingsoonThumb{ pointer-events: none;}
.otherProjects .comingsoonThumb .enWrap .labelLine:nth-of-type(1) .textImageData{height: 4vw; max-height: 55px;}
.otherProjects .project .spacerBlock{height: 0.9vw; max-height:14px;}
.otherProjects .project .labelLine .textImage{transition-delay: 0.35s !important; background-position: left top; text-align: left;}
.otherProjects .project .labelLine .textImage:after{transition-delay: 0.6s !important;}
body:not(.project_top) .otherProjects .project{
width: 28%;
margin: 0 1% 2% 1%;
}
body:not(.project_top) .otherProjects .project .number{ top: 8%; left: 6%;}
body:not(.project_top) .otherProjects .project .number .textImageData{ height: 1.8vw; max-height: 30px;}
body:not(.project_top) .otherProjects .project .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 3.9vw; max-height: 56px;}
body:not(.project_top) .otherProjects .project_01 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 5.5vw; max-height: 75px;}
body:not(.project_top) .otherProjects .project_01 .enWrap .labelLine:nth-of-type(2) .textImageData{ height: 1.5vw; max-height: 76px;}
body:not(.project_top) .otherProjects .project_02 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 1.1vw; max-height: 69px;}
body:not(.project_top) .otherProjects .project_03 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 1.2vw; max-height: 69px;}
body:not(.project_top) .otherProjects .project_04 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 4.5vw; max-height: 69px;}
body:not(.project_top) .otherProjects .comingsoonThumb{ pointer-events: none;}
body:not(.project_top) .otherProjects .comingsoonThumb .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.2vw; max-height: 92px;}
body:not(.project_top) .otherProjects .project .enWrap .labelLine:nth-of-type(3) .textImageData { height: 0.8vw; max-height: 15px;}
body:not(.project_top) .otherProjects .project_01 .enWrap .labelLine:nth-of-type(3) .textImageData { height: 1.8vw; max-height: 26px;}
body:not(.project_top) .otherProjects .project .spacerBlock{height: 0.4vw; max-height: 9px;}
body:not(.project_top) .otherProjects .project.comingsoon .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 1.2vw; max-height: 16px;}
.otherProjects .project.comingsoon .inWrap:after{ background: #000;}
.otherProjects .project.comingsoon:after{ display: none;}
.otherProjects .project.comingsoon .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 1.2vw; max-height: 20px;}
.otherProjects a.project .number,
.otherProjects a.project .enWrap,
.otherProjects a.project .inWrap:after{ transition: opacity 0.3s ease; }
.otherProjects a.project:hover .number,
.otherProjects a.project:hover .enWrap,
.otherProjects a.project:hover .inWrap:after{ opacity: 0;}
.otherCheck{ text-align: center;}
.otherCheck img{ height: 50px;}
.inWrap{ transform: translate(-110%,0);transition: all 0.25s cubic-bezier(.5,0,1,.5); transition-delay: 0s;}
.inWrap:before{ content: ''; display: block; position: absolute; top: 0; right: 0; z-index: 2; width: 100%; height: 100%; background: #fff; transition: all 0.7s cubic-bezier(.35,.6,.4,1); transition-delay: 0.35s;}
.showEffect.is-show .inWrap{ transform: translate(0%,0);}
.showEffect.is-show .inWrap:before{ width: 0%;}
/*
================================================================================
YELL (Detail Page)
================================================================================
*/
body#yell:not(.yell_top) #frameTitle{ display: none;}
body#yell section#visualArea .number { top: 6%; left: 4.5%;}
body#yell section#visualArea .number .labelLine:nth-of-type(1) .textImageData{height: 6.5vw;max-height: 90px;}
body#yell section#visualArea .messageWrap{ position: absolute; top: 32.5%; left: 7%;z-index: 5;
border: 0;
background: transparent;
padding: 0;
}
body#yell section#visualArea .nameWrap{ position: absolute; bottom: 5.8%; left: 4.5%; z-index: 5;}
body#yell section#visualArea .messageWrap .labelLine:nth-of-type(1) .textImageData{ height: 15.5vw; max-height: 222px;}
body#yell section#visualArea .nameWrap .labelLine:nth-of-type(1) { margin-bottom: 4.5%;}
body#yell section#visualArea .nameWrap .labelLine:nth-of-type(2) { margin-bottom: 2.5%;}
body#yell section#visualArea .nameWrap .labelLine:last-child{ margin-bottom: 0 !important;}
body#yell section#visualArea .nameWrap .labelLine:nth-of-type(1) .textImageData{height: 3.1vw; max-height: 44px;}
body#yell section#visualArea .nameWrap .labelLine:nth-of-type(2) .textImageData{height: 1.3vw; max-height: 18px;}
body#yell section#visualArea .nameWrap .labelLine:nth-of-type(3) .textImageData{height: 1.3vw; max-height: 18px;}
body#yell #contentsArea article{}
body#yell .textContents { padding: 0 5%; max-width: 1200px; margin: auto; position: relative;}
body#yell .textContents .fullTextImage{ width:90%; max-width: 1120px; height: auto; margin: auto; position: absolute; top:0; left: 5%; z-index: 1; }
body#yell .textContents ul{width: 100%; margin:0 0 120px 0; list-style: none; padding: 0; position: relative; z-index: 2;}
body#yell .textContents ul li{ width: 0%; height:3.8vw; max-height:52px;margin-bottom: 1.2%; line-height: 0; position: relative; overflow: hidden;transition: width 0.8s ease-in-out; }
body#yell .textContents ul li.is-show{ width: 100%;}
body#yell .textContents ul.is-show li{ width: 100%;}
body#yell .textContents ul li span{ content: ''; display: block; position: absolute;top: 0; left: 0; height: 100%; background-size: 100% auto; border: solid 0px #fff; }
body#yell .textContents ul li.wait{ margin-top: 5.2%;}
body#yell .textContents ul li:nth-of-type(1) span { background-position: 0 0%; }
body#yell .textContents ul li:nth-of-type(2) span { background-position: 0 3.7%; }
body#yell .textContents ul li:nth-of-type(3) span { background-position: 0 11.0%; }
body#yell .textContents ul li:nth-of-type(4) span { background-position: 0 14.7%; }
body#yell .textContents ul li:nth-of-type(5) span { background-position: 0 18.5%; }
body#yell .textContents ul li:nth-of-type(6) span { background-position: 0 22.2%; }
body#yell .textContents ul li:nth-of-type(7) span { background-position: 0 29.7%; }
body#yell .textContents ul li:nth-of-type(8) span { background-position: 0 33.4%; }
body#yell .textContents ul li:nth-of-type(9) span { background-position: 0 40.7%; }
body#yell .textContents ul li:nth-of-type(10) span { background-position: 0 44.4%; }
body#yell .textContents ul li:nth-of-type(11) span { background-position: 0 48.2%; }
body#yell .textContents ul li:nth-of-type(12) span { background-position: 0 51.9%; }
body#yell .textContents ul li:nth-of-type(13) span { background-position: 0 59.2%; }
body#yell .textContents ul li:nth-of-type(14) span { background-position: 0 63.0%; }
body#yell .textContents ul li:nth-of-type(15) span { background-position: 0 66.7%; }
body#yell .textContents ul li:nth-of-type(16) span { background-position: 0 70.4%; }
body#yell .textContents ul li:nth-of-type(17) span { background-position: 0 74.2%; }
body#yell .textContents ul li:nth-of-type(18) span { background-position: 0 81.5%; }
body#yell .textContents ul li span{ }
body#yell.yell_01 .textContents ul li:nth-of-type(1) span { background-position: 0 0%; }
body#yell.yell_01 .textContents ul li:nth-of-type(2) span { background-position: 0 9.5%; }
body#yell.yell_01 .textContents ul li:nth-of-type(3) span { background-position: 0 14.2%; }
body#yell.yell_01 .textContents ul li:nth-of-type(4) span { background-position: 0 19%; }
body#yell.yell_01 .textContents ul li:nth-of-type(5) span { background-position: 0 28.5%; }
body#yell.yell_01 .textContents ul li:nth-of-type(6) span { background-position: 0 33.3%; }
body#yell.yell_01 .textContents ul li:nth-of-type(7) span { background-position: 0 43%; }
body#yell.yell_01 .textContents ul li:nth-of-type(8) span { background-position: 0 47.5%; }
body#yell.yell_01 .textContents ul li:nth-of-type(9) span { background-position: 0 52.5%; }
body#yell.yell_01 .textContents ul li:nth-of-type(10) span { background-position: 0 57.2%; }
body#yell.yell_01 .textContents ul li:nth-of-type(11) span { background-position: 0 61.8%; }
body#yell.yell_01 .textContents ul li:nth-of-type(12) span { background-position: 0 71.5%; }
body#yell.yell_01 .textContents ul li:nth-of-type(13) span { background-position: 0 76.2%; }
body#yell.yell_01 .textContents ul li:nth-of-type(14) span { background-position: 0 81%; }
body#yell.yell_01 .textContents ul li:nth-of-type(15) span { background-position: 0 85.5%; }
body#yell.yell_01 .textContents ul li:nth-of-type(16) span { background-position: 0 95.2%; }
body#yell.yell_01 .textContents ul li:nth-of-type(17) span { background-position: 0 99.8%; }
body#yell.yell_02 .textContents ul li:nth-of-type(1) span { background-position: 0 0%; }
body#yell.yell_02 .textContents ul li:nth-of-type(2) span { background-position: 0 3.7%; }
body#yell.yell_02 .textContents ul li:nth-of-type(3) span { background-position: 0 7.4%; }
body#yell.yell_02 .textContents ul li:nth-of-type(4) span { background-position: 0 14.7%; }
body#yell.yell_02 .textContents ul li:nth-of-type(5) span { background-position: 0 18.5%; }
body#yell.yell_02 .textContents ul li:nth-of-type(6) span { background-position: 0 22.2%; }
body#yell.yell_02 .textContents ul li:nth-of-type(7) span { background-position: 0 25.9%; }
body#yell.yell_02 .textContents ul li:nth-of-type(8) span { background-position: 0 33.4%; }
body#yell.yell_02 .textContents ul li:nth-of-type(9) span { background-position: 0 37.1%; }
body#yell.yell_02 .textContents ul li:nth-of-type(10) span { background-position: 0 40.7%; }
body#yell.yell_02 .textContents ul li:nth-of-type(11) span { background-position: 0 44.4%; }
body#yell.yell_02 .textContents ul li:nth-of-type(12) span { background-position: 0 48.2%; }
body#yell.yell_02 .textContents ul li:nth-of-type(13) span { background-position: 0 51.8%; }
body#yell.yell_02 .textContents ul li:nth-of-type(14) span { background-position: 0 55.5%; }
body#yell.yell_02 .textContents ul li:nth-of-type(15) span { background-position: 0 63.0%; }
body#yell.yell_05 .textContents ul li:nth-of-type(1) span { background-position: 0 0%; }
body#yell.yell_05 .textContents ul li:nth-of-type(2) span { background-position: 0 4.4%; }
body#yell.yell_05 .textContents ul li:nth-of-type(3) span { background-position: 0 8.6%; }
body#yell.yell_05 .textContents ul li:nth-of-type(4) span { background-position: 0 13.0%; }
body#yell.yell_05 .textContents ul li:nth-of-type(5) span { background-position: 0 17.4%; }
body#yell.yell_05 .textContents ul li:nth-of-type(6) span { background-position: 0 25.8%; }
body#yell.yell_05 .textContents ul li:nth-of-type(7) span { background-position: 0 30.2%; }
body#yell.yell_05 .textContents ul li:nth-of-type(8) span { background-position: 0 34.6%; }
body#yell.yell_05 .textContents ul li:nth-of-type(9) span { background-position: 0 38.8%; }
body#yell.yell_05 .textContents ul li:nth-of-type(10) span { background-position: 0 43.4%; }
body#yell.yell_05 .textContents ul li:nth-of-type(11) span { background-position: 0 47.4%; }
body#yell.yell_05 .textContents ul li:nth-of-type(12) span { background-position: 0 51.8%; }
body#yell.yell_05 .textContents ul li:nth-of-type(13) span { background-position: 0 60.4%; }
body#yell.yell_05 .textContents ul li:nth-of-type(14) span { background-position: 0 64.8%; }
body#yell.yell_05 .textContents ul li:nth-of-type(15) span { background-position: 0 69.0%; }
body#yell.yell_05 .textContents ul li:nth-of-type(16) span { background-position: 0 73.4%; }
body#yell.yell_05 .textContents ul li:nth-of-type(17) span { background-position: 0 77.6%; }
body#yell.yell_05 .textContents ul li:nth-of-type(18) span { background-position: 0 86.2%; }
body#yell.yell_05 .textContents ul li:nth-of-type(19) span { background-position: 0 90.6%; }
body#yell.yell_05 .textContents ul li:nth-of-type(20) span { background-position: 0 94.8%; }
body#yell.yell_05 .textContents ul li:nth-of-type(21) span { background-position: 0 99.2%; }
body#yell.yell_04 .textContents ul li:nth-of-type(1) span { background-position: 0 0%; }
body#yell.yell_04 .textContents ul li:nth-of-type(2) span { background-position: 0 4.7%; }
body#yell.yell_04 .textContents ul li:nth-of-type(3) span { background-position: 0 9.4%; }
body#yell.yell_04 .textContents ul li:nth-of-type(4) span { background-position: 0 18.9%; }
body#yell.yell_04 .textContents ul li:nth-of-type(5) span { background-position: 0 23.6%; }
body#yell.yell_04 .textContents ul li:nth-of-type(6) span { background-position: 0 33.1%; }
body#yell.yell_04 .textContents ul li:nth-of-type(7) span { background-position: 0 37.8%; }
body#yell.yell_04 .textContents ul li:nth-of-type(8) span { background-position: 0 42.6%; }
body#yell.yell_04 .textContents ul li:nth-of-type(9) span { background-position: 0 47.2%; }
body#yell.yell_04 .textContents ul li:nth-of-type(10) span { background-position: 0 52.0%; }
body#yell.yell_04 .textContents ul li:nth-of-type(11) span { background-position: 0 56.6%; }
body#yell.yell_04 .textContents ul li:nth-of-type(12) span { background-position: 0 61.4%; }
body#yell.yell_04 .textContents ul li:nth-of-type(13) span { background-position: 0 71.0%; }
body#yell.yell_04 .textContents ul li:nth-of-type(14) span { background-position: 0 75.5%; }
body#yell.yell_04 .textContents ul li:nth-of-type(15) span { background-position: 0 80.4%; }
body#yell.yell_04 .textContents ul li:nth-of-type(16) span { background-position: 0 85.2%; }
body#yell.yell_04 .textContents ul li:nth-of-type(17) span { background-position: 0 90.0%; }
body#yell.yell_04 .textContents ul li:nth-of-type(18) span { background-position: 0 94.7%; }
body#yell.yell_04 .textContents ul li:nth-of-type(19) span { background-position: 0 99.4%; }
body#yell.yell_06 .textContents ul li:nth-of-type(1) span { background-position: 0 0%; }
body#yell.yell_06 .textContents ul li:nth-of-type(2) span { background-position: 0 5.7%; }
body#yell.yell_06 .textContents ul li:nth-of-type(3) span { background-position: 0 17.2%; }
body#yell.yell_06 .textContents ul li:nth-of-type(4) span { background-position: 0 23.2%; }
body#yell.yell_06 .textContents ul li:nth-of-type(5) span { background-position: 0 29.0%; }
body#yell.yell_06 .textContents ul li:nth-of-type(6) span { background-position: 0 34.7%; }
body#yell.yell_06 .textContents ul li:nth-of-type(7) span { background-position: 0 40.7%; }
body#yell.yell_06 .textContents ul li:nth-of-type(8) span { background-position: 0 46.7%; }
body#yell.yell_06 .textContents ul li:nth-of-type(9) span { background-position: 0 52.5%; }
body#yell.yell_06 .textContents ul li:nth-of-type(10) span { background-position: 0 58.2%; }
body#yell.yell_06 .textContents ul li:nth-of-type(11) span { background-position: 0 69.7%; }
body#yell.yell_06 .textContents ul li:nth-of-type(12) span { background-position: 0 81.7%; }
body#yell.yell_06 .textContents ul li:nth-of-type(13) span { background-position: 0 87.2%; }
body#yell.yell_06 .textContents ul li:nth-of-type(14) span { background-position: 0 93.1%; }
body#yell.yell_06 .textContents ul li:nth-of-type(15) span { background-position: 0 99%; }
body#yell #archivesArea ul{ margin-bottom: 50px !important;}
body#yell #archivesArea ul li{ margin-bottom: 4%;}
body#yell #archivesArea ul li .inWrap{ padding-top: 122.6%;}
body#yell #archivesArea ul li .number{ position: relative; top: 0; left: 0; padding-top: 3%; width: 100%; text-align: center;}
body#yell #archivesArea ul li .number .labelLine img{ height: 1.96vw; max-height: 32px;}
body#yell #archivesArea ul li .number .labelLine{ margin: auto;}
/* 01 ============================================================================================= */
body#yell #contentsArea article.favorite .image .hideScroll{ padding-top: 65.8%; }
body#yell #contentsArea article.voice .image .hideScroll{ padding-top: 79.6%; }
body#yell.person_05 #contentsArea article.unit_1{ grid-template-columns:1fr 42%}
body#yell.person_05 #contentsArea article.unit_1 .titleLine{}
body#yell.person_05 #contentsArea article.unit_1 .inContents{ margin-left: 15%;}
body#yell.person_05 #contentsArea article.unit_1 .image .hideScroll{ padding-top: 73.2%;}
body#yell.person_05 #contentsArea article.unit_2{}
body#yell.person_05 #contentsArea article.unit_2 .titleLine{margin-left: 15%;}
body#yell.person_05 #contentsArea article.unit_2 .inContents{margin-left: 15%;}
/*
================================================================================
WORKS
================================================================================
*/
#teamMembers{ margin-bottom: 100px;}
#teamMembers ul{
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 40px;
}
#teamMembers ul li{ overflow: hidden;}
#teamMembers ul dl{}
#teamMembers ul dl dt{ margin-bottom: 10px;}
#teamMembers ul dl dd{}
#teamMembers ul .image{}
#teamMembers ul .name{margin-bottom: 10px;}
#teamMembers ul .comment{}
/*
================================================================================
RECRUIT
================================================================================
*/
body#recruit{}
body#recruit .contents{}
body#recruit .contents .flex{ border: solid 0px #ccc;}
body#recruit .contents .flexItem{ border: solid 0px #369;}
body#recruit .contents p.read{ font-size: 1.2em;}
body#recruit .contents .message{ grid-template-columns: 150px 1fr; background-color: rgba(255,255,255,.1); padding: 20px; width: 500px; margin-top: 50px;}
body#recruit .contents .message .image{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 1 /2;grid-row: 1/2;
}
body#recruit .contents .message .text{
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-column: 2 /3;grid-row: 1/2;
}
body#recruit .contents .message .image img{ width: 100%; height: auto;}
body#recruit .contents .message.right{ grid-template-columns: 1fr 200px; background-color:transparent; padding: 20px; width: 100%; align-items: flex-start;}
body#recruit .contents .message.full{ grid-template-columns: 1fr; background-color:transparent; padding: 20px; width: 100%; align-items: flex-start;}
body#recruit.education .contents .message .image{
-ms-grid-column: 2;
-ms-grid-column-span: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-column: 2 /3;grid-row: 1/2;
}
body#recruit.education .contents .message .text{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 1 /2;grid-row: 1/2;
}
html.IE.version_11 body#recruit .contents .message{ display: block; overflow: hidden}
html.IE.version_11 body#recruit .contents .message .image{ float: left; width: 120px; margin-right: 10px;}
html.IE.version_11 body#recruit .contents .message .text{ float: left;width: 310px;}
html.IE.version_11 body#recruit .contents .message .image img{ width: 100%; height: auto;}
html.IE.version_11 body#recruit .contents .message.right{ position: relative; min-height: 200px;}
html.IE.version_11 body#recruit .contents .message.right .text{ float: none; width: auto; padding-right: 220px;}
html.IE.version_11 body#recruit .contents .message.right .image{ width: 200px; position: absolute; top: 0; right: 0;}
@media screen and (min-width:769px) and ( max-width:1300px) {
.labelLine img{ height:3.4vw;}
}
@media screen and (min-width:769px) and ( max-width:950px) {
body#person #contentsArea article.grid{ grid-gap: 3vw; align-items: flex-start;}
body#person #contentsArea article .contents.titleLine,
body#person #contentsArea article .inContents{ margin: 0 !important;}
body#project #contentsArea article.grid{ grid-gap: 3vw; align-items: flex-start;}
body#project #contentsArea article .contents.titleLine,
body#project #contentsArea article .inContents{ margin: 0 !important;}
#mbArea ul li .nameWrap .labelLine.division img.textImageData{ height: 1.2vw;}
}
@media (max-width: 768px){
/* 768px以下 */
*{overflow-wrap: break-word;}
.onlyPC{ display: none ;}
.onlySP{ display: block ;}
.labelLine.onlySP{ display: inline-block ;}
html,body{ }
.touchDevice body{ font-size: 16px; }
#scrollDown{bottom: 5vw;}
#menuBtn hr,
#menuBtn:after{ transform: translate3d(0,0,0); left: auto; right: 1.5vw;}
body.menuOpen #menuBtn hr:nth-of-type(1){ left: 55%; right: auto;}
body.menuOpen #menuBtn hr:nth-of-type(3){left: 55%;right: auto;}
#toolWrap{ padding-right: 45px;}
#mypageWrap{ right:calc(1vw + 45px);height: 60px;transform: translate3d(0,0,0); opacity: 0;transition: opacity 0.25s cubic-bezier(.35,.6,.4,1) ;}
#mypageWrap .btnArea.mypage .linkArea{
width: 77px;
height: 40px;
}
.mypageWrapIn #mypageWrap{ opacity: 1;}
#pageTopBtn{ width: 40px; height: 60px; top: auto; bottom: 0px; right: 1.5vw; transform: translate(0,0); transition: all 0s , opacity 0.25s cubic-bezier(.35,.6,.4,1);}
#pageTopBtn:before{ content: ''; display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; }
#pageTopBtn:after{ border-color: #fff; margin-top: -6px;}
body #container{ position: absolute; width: 100vw; height: 100vh;}
.scrollContents{ padding-bottom: 250px !important}
#container .btnArea .inBtn{ }
#container .btnArea .linkArea{ width: 60vw; padding: 0;}
#container .btnArea.viewmore .linkArea{ width: 30vw !important; padding: 0;}
#container .btnArea .labelLine{ left: 50%; transform: translate(-50%,0); }
.touchDevice #container .btnArea .labelLine{ margin: 4vw 0;}
#toolWrap{ top: 3vw; right: 1vw}
#entryBtn{}
#entryBtn:after{transform: translate3d(-50%,-50%,0) ;}
#entryBtn:before{ transform: translate3d(0,0,0) !important; background-color: rgba(160,160,160,.5)}
#menuBtn{ }
#globalMenu{height: 120vh;height: calc(var(--vh, 1vh) * 120);}
#globalMenu > .scroll{}
#globalMenu > .scroll:before{
top: 5vw;
left: 5vw;
height: 4.5vw;
}
#frameRecruitMenu.recruitTitle .versionWrap{ bottom: 5vw;
left: 5vw;}
#globalMenu ul{ padding-top: 15vw; padding-bottom: 0vw; grid-gap: 2vw;}
#globalMenu ul li{ margin: 0 0 3vw 0;}
#globalMenu ul li.event{ margin-bottom: 4rem;}
#globalMenu ul li.sns{margin-bottom: 0rem;}
#globalMenu ul li.sns.youtube{ margin-top: -0.5rem;}
#globalFooter { }
#globalFooter .innerWrap{ height: auto; grid-template-columns: 1fr; grid-gap: 1vw; padding-left: 0; padding-right: 0;}
#globalFooter .logo{ height: auto; padding: 3vw 0 0 0;}
#globalFooter .logo .logoImage{ width: 35vw; height: auto; position: relative; top: 0%; left: 0; transform: translate(0,0%);}
#globalFooter ul li{ margin-bottom: 5vw;}
#globalFooter .copyright{ padding-bottom: 5vw; text-align: center; padding-top: 0;}
section > .contentsWrap{ padding:30px}
section > .frameWrap { padding:30px}
#frameTitle.compact .readWrap .item_1{ height: 8vw;}
#frameTitle.compact .readWrap .item_2{ height: 5vw;}
#frameTitle.compact .readWrap .item_3{ height: 5vw;}
#frameTitle.top .readWrap.in .item_1{ max-width: 70vw;}
#frameTitle.top .readWrap.in .item_2{ max-width: 45vw;}
#frameTitle.top .readWrap.in .item_3{ max-width: 26vw;}
#frameTitle.top.compact .readWrap.in .item_1{ max-width: 36vw;height: 8vw;}
#frameTitle.top.compact .readWrap.in .item_2{ max-width: 28vw;height: 8vw;}
#frameTitle.top.compact .readWrap.in .item_3{ max-width: 24vw;height: 8vw;}
#frameTitle.person .readWrap.in .item_1{ max-width: 38vw;}
#frameTitle.person .readWrap.in .item_2{ max-width: 21vw;}
#frameTitle.person .readWrap.in .item_3{ max-width: 13vw;}
#frameTitle.project .readWrap.in .item_1{ max-width: 41vw;}
#frameTitle.project .readWrap.in .item_2{ max-width: 27vw;}
#frameTitle.project .readWrap.in .item_3{ max-width: 24vw;}
#frameTitle.rookie .readWrap.in .item_1{ max-width: 35vw;}
#frameTitle.rookie .readWrap.in .item_2{ max-width: 21vw;}
#frameTitle.rookie .readWrap.in .item_3{ max-width: 18vw;}
#frameTitle.yell .readWrap.in .item_1{ max-width: 27vw;}
#frameTitle.yell .readWrap.in .item_2{ max-width: 25vw;}
#frameTitle.yell .readWrap.in .item_3{ max-width: 19vw;}
#frameTitle.recruit .readWrap.in .item_1{ max-width: 40vw;}
#frameTitle.event .readWrap.in .item_1{ max-width: 31vw;}
.recruitTitle .item{ height: 8vw; }
.recruitTitle .versionWrap .item_1{ max-width: 33vw;}
.recruitTitle .versionWrap .item_2{ max-width: 40vw;}
.recruitTitle .versionWrap .item_3{ max-width: 24vw;}
#frameRecruitMenu.recruitTitle .versionWrap .item{ max-height: 5vw;}
#frameRecruitMenu.recruitTitle .versionWrap .item_1{ max-width: 20vw;}
#frameRecruitMenu.recruitTitle .versionWrap .item_2{ max-width: 24vw;}
#frameRecruitMenu.recruitTitle .versionWrap .item_3{ max-width: 13vw;}
#frameRecruitCompact,
.versionWrap.compact{ transform-origin: left bottom; transform: scale(0.625);}
section.about .contentsWrap{ padding-bottom: 20vw;}
section.about .contentsWrap{padding:30px;}
section.about .contentsWrap ul{ min-width: inherit; margin-bottom: 10vw;}
section.about .contentsWrap ul li{ height: 5vw;}
section.about .contentsWrap ul li.large{ height: 7vw;}
section.about .contentsWrap ul li.auto{ height:15vw; max-height:15vw;}
section.about .contentsWrap .btnToMovie{ width: 50vw}
#container .btnArea.internship .linkArea{ width: 60vw !important; height: auto !important ;}
#container .btnArea.internship .linkArea .labelLine{ margin: 2vw 0 ;}
.slick-prev:before, .slick-next:before{ width: 15px; height: 15px;}
.slick-prev{ transform: translate(-65%,-50%);}
.slick-next{ transform: translate(65%,-50%);}
section.person .centerContents{ margin-bottom: 10vw;}
section.person .centerContents .name .imageWrap img:nth-of-type(1){ margin-bottom: 2vw;height: 3.8vw;}
section.person .centerContents .name .imageWrap img:nth-of-type(2){ margin-bottom: 3vw; height: 3.8vw;}
section.person .centerContents .name .imageWrap img:nth-of-type(3){ margin-bottom: 1.5vw;height: 4.2vw;}
section.person .centerContents .name .imageWrap img:nth-of-type(4){ margin-bottom: 1vw;}
section.project .centerContents .name .imageWrap img:nth-of-type(1) { height: 5.3vw; margin-bottom: 3%;}
section.project .centerContents .name .imageWrap img:nth-of-type(2) { height: 2vw; }
section.project .centerContents .name .imageWrap .name_1_spacer{ display: none;}
.btnArea.internship .linkArea{ height: auto; padding: 0 10vw;}
.btnArea.internship .linkArea span img{height:15vw}
section.person .centerContents .photo{}
section.yell .itemList{grid-template-columns:1fr 1fr}
section.recruit .btnArea{ margin-bottom: 10vw;}
section.recruit .btnArea .linkArea{ height: auto;}
section.recruit .btnArea .linkArea span img{ height: 6vw;}
.globalInnerWrap{ width: 90vw;}
section#contentsArea{ padding: 0 5vw;}
article:not(:last-child),
section#visualArea{ margin-bottom: 20vw}
section#visualArea .number .labelLine:nth-of-type(1) .textImageData{ }
section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{}
section#visualArea .enWrap .labelLine:nth-of-type(2) .textImageData{}
section#visualArea .enWrap .labelLine:nth-of-type(1){ }
section#visualArea .jpWrap .labelLine:nth-of-type(1) .textImageData{}
section#visualArea .jpWrap .labelLine:nth-of-type(2) .textImageData,
section#visualArea .jpWrap .labelLine:nth-of-type(3) .textImageData,
section#visualArea .jpWrap .labelLine:nth-of-type(4) .textImageData{}
body#person #contentsArea article.grid{grid-template-rows:auto !important; grid-template-columns: 1fr !important;grid-gap:5vw;}
html.IE body#person #contentsArea article.grid{display: block !important;}
body#person #contentsArea article.grid.inPadding{ padding: 0;}
body#person #contentsArea article .titleLine{ padding: 0 !important; margin: 0 !important;}
body#person #contentsArea article .contents.titleLine .unitTitle{ margin-bottom: 5vw;}
body#person #contentsArea article .inContents{ padding: 0 !important; margin: 0 !important;}
body#person #contentsArea article.grid .contents,
body#person #contentsArea article.grid .image{grid-column:auto; grid-row: auto;
grid-column-start: auto;
grid-column-end: auto;
grid-row-start:auto;
grid-row-end:auto;
}
body#person #contentsArea article .labelLine img{ height: 9vw;}
body#person #contentsArea article .labelLine.subHead img{height: 4vw;}
body#person #contentsArea article .inContents{ font-size: 1em;}
html.IE.version_11 article.grid.imgL .contents{ padding: 0%;}
html.IE.version_11 article.grid.imgR .contents{ padding: 0%;}
body#person #archivesArea .globalInnerWrap{ width: 90%;}
#archivesArea .globalInnerWrap{ width: 90%;}
#archivesArea ul li{ width: 49%; margin-right:2%; display: block;}
#archivesArea ul li:nth-of-type(4){margin-right:2%;}
#archivesArea ul li.fullSpacer{ display: none;}
body#yell.yell_top #archivesArea ul li:nth-last-child(even){margin-right:2%;}
body#yell.yell_top #archivesArea ul li:nth-last-child(odd){margin-right:0%;}
body#yell.yell_top #archivesArea ul li:last-child{margin-right:0%;}
body#yell:not(.yell_top) #archivesArea ul li:nth-last-child(even){margin-right:0%;}
body#yell:not(.yell_top) #archivesArea ul li:last-child{margin-right:0%;}
body#person #archivesArea ul li:nth-of-type(1),
body#person #archivesArea ul li:nth-of-type(4){margin-right:2%;}
body#person #archivesArea ul li:nth-of-type(2),
body#person #archivesArea ul li:nth-of-type(5),
body#person #archivesArea ul li:nth-of-type(6){margin-right:0%;}
body#person.person_top #archivesArea ul li:nth-last-child(odd){margin-right:0%;}
body#person.person_top #archivesArea ul li:nth-last-child(even){margin-right:2%;}
#archivesArea ul li .inWrap img.thumbnail{ }
#archivesArea ul li .number{ }
#archivesArea ul li .number .labelLine img{ height: 6vw;}
#archivesArea ul li .nameWrap .labelLine{}
#archivesArea ul li .nameWrap .labelLine.onlySP{ display: table;}
#archivesArea ul li .nameWrap .textImage{ background-position:0 0;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(1) { margin-bottom: 2vw;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(2) { margin-bottom: 1vw;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(3) { margin-bottom: 1vw;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(4) { margin-bottom: 1vw;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(5) {}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(1) img{ height: 3.8vw; max-height: none;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(2) img{height: 1.6vw; max-height: none;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(3) img{height: 1.6vw; max-height: none;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(4) img{height: 1.6vw; max-height: none;}
#archivesArea ul li .nameWrap .labelLine:nth-of-type(5) img{height: 1.6vw; max-height: none;}
#archivesArea ul li.comingsoon .nameWrap .labelLine:nth-of-type(1) img{height: 5vw; max-height: none;}
#archivesArea .senpaiCheck img{ height: 6vw;}
#archivesArea .houmon.btnArea .linkArea{ height: auto; width: 70vw; padding: 2vw 0;}
#archivesArea .houmon.btnArea img{ height: 12vw;}
#archivesArea .globalInnerWrap{ width: 90%;}
#mbArea { padding-left: 0; padding-right: 0;}
#mbArea ul li .nameWrap .labelLine.name img.textImageData{ height:6vw;}
#mbArea ul li .nameWrap .labelLine.division img.textImageData{ height: 3vw; max-height: 8px;}
#mbArea .memberWrap .title{ height: 10vw}
body#project #contentsArea article.grid{grid-template-rows:auto !important; grid-template-columns: 1fr !important;grid-gap:5vw;}
html.IE body#project #contentsArea article.grid{display: block !important;}
body#project #contentsArea article{margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; justify-content: flex-start !important;}
body#project #contentsArea article.grid.inPadding{ padding: 0;}
body#project #contentsArea article .titleLine{ padding: 0 !important; margin: 0 !important;}
body#project #contentsArea article .contents.titleLine .unitTitle{ margin-bottom: 5vw;margin-left: 0 !important;padding-left: 0 !important;}
body#project #contentsArea article .inContents{ padding: 0 !important; margin: 0 !important;}
body#project #contentsArea article .inContents p{ margin-left: 0 !important; margin-right: 0 !important;}
body#project #contentsArea article.grid .contents,
body#project #contentsArea article.grid .image{
grid-column:auto; grid-row: auto;
grid-column-start: auto;
grid-column-end: auto;
grid-row-start:auto;
grid-row-end:auto;
}
body#project #contentsArea article .labelLine img{ height: 7.2vw;}
body#project #contentsArea article .labelLine.subHead img{height: 4vw;}
body#project.project_04 section#visualArea .enWrap{padding-top: 0;}
body#project.project_04 section#visualArea .enWrap .labelLine:nth-of-type(1) .textImageData{
height: 2.9vw;
}
body#project #contentsArea article .inContents{ font-size: 1em;}
body.project_top #archivesArea .globalInnerWrap{ width: 98%;}
.otherProjects{}
.otherProjects .project{ width: 45% !important; display: block;}
.otherProjects .project .number{ position: absolute; top: 7% !important; left: 5% !important;}
.otherProjects .project .number .textImageData{ height: 3.5vw !important; max-height: none !important;}
.otherProjects .project .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 7vw !important; max-height: none !important;}
.otherProjects .project.project_01 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 7.0vw !important; max-height: none !important;}
.otherProjects .project.project_02 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.2vw !important; max-height: none !important;}
.otherProjects .project.project_03 .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.2vw !important; max-height: none !important;}
.project_top .otherProjects .project .enWrap .labelLine:nth-of-type(1) .textImageData{ }
.otherProjects .project.comingsoonThumb .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 3.5vw !important; max-height: none !important;}
.otherProjects .project .enWrap .labelLine:nth-of-type(3) .textImageData { height: 1.6vw !important; max-height: none !important;}
.project_top .otherProjects .project_03 .enWrap .labelLine:nth-of-type(1) .textImageData{height: 2.8vw !important; }
.otherProjects .project .enWrap .labelLine:nth-of-type(3) .textImageData { height: 1.8vw; max-height: none;}
.otherProjects .project .spacerBlock{height: 1vw; max-height: none;}
.otherProjects .project.comingsoon .enWrap .labelLine:nth-of-type(1) .textImageData{ height: 2.4vw; max-height: none;}
#mbArea .globalInnerWrap{ width: 90vw;}
#mbArea .titleWrap .labelLine img.textImageData{height: 4vw;}
#mbArea ul.cWrap li.full{ display: none;}
#mbArea ul li {
position: relative;
width: 47% !important;
height: auto;
margin: 0 6% 5% 0 !important;
}
#mbArea ul li.spR,
#mbArea ul li.spC {
margin-right: 0 !important;
}
.otherCheck img{ height: 6vw;}
body.page #pageScroll .scrollContents{ padding-top: 30vw;}
body.page article .contents h2.pageTitle{margin-bottom: 10vw; font-size: 1.8rem;}
body.page article .h3Wrap:not(:last-child){margin-bottom:20vw;}
body.page .subNavi{ margin-bottom: 10vw !important;grid-gap:0;grid-template-columns:1fr 1fr 1fr; }
body.page .subNavi li{ font-size: 0.9em; text-align: center;}
body.page .contents h3{ margin-bottom: 10vw !important;}
body#recruit .inContents #essential:after{ font-size: 0.8rem !important;padding: 0em !important; text-align: left !important; margin: 0 0 0 0rem !important; line-height: 1em; transform: translate(0,0em);}
#container .relationPage .btnArea{ margin-bottom: 10vw;}
#container .relationPage .btnArea .linkArea{ width: 50vw !important;height:16vw; margin-left: auto; margin-right: auto;}
#container .relationPage .btnArea .linkArea span img{ height:7vw}
.touchDevice #container .relationPage .btnArea .labelLine{ margin: 0 !important;}
dl.tableData{grid-template-columns:1fr;}
dl.tableData.company{grid-template-columns:1fr;}
dl.tableData dt, dl.tableData dd{ padding: 0 !important; }
dl.tableData dt{ margin-bottom: 0.2em !important;line-height: 1.2;}
dl.tableData dd{margin-bottom: 2em !important; padding-left: 1em !important;}
dl.tableData dt:after{ display: none;}
dl.tableData.company dt{ padding-bottom: 0.5em !important; margin-bottom: 0.5em;}
dl.tableData.company dd{ padding: 0 0 0 1em !important; border: 0;margin-bottom: 1em;}
table.company{ width: 100%;border-bottom:solid 1px #fff; margin-bottom: 100px;}
table.company tr{border-top:solid 1px #fff;}
table.company th,
table.company td{ display: block;}
table.company th{ width:auto; padding-bottom: 0;}
dl.flow dt{ width: 100%;}
dl.flow dt .sub{ top: 110%; left: 0em; transform:translate(0,0); line-height: 1; width: 100%; text-align: center; white-space: normal; line-height: 1.5}
dl.flow dd{ padding: 1em 0 0 4em; margin-bottom: 0.5em !important; min-height: 5.5em;}
dl.flow dd:before{ left: 0.5em; top: 0.6em;}
body#recruit .contents .message{grid-template-columns:1fr; width: 100%; grid-gap: 0;}
body#recruit .contents .message .image{ transform: scale(0.8);}
body#recruit .contents .message.right{grid-template-columns:1fr;}
body#recruit.education .contents .message .image{
-ms-grid-column: 1;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-column: 1 /2;grid-row: 2/3;
}
body#recruit.education .contents .message .text{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
-ms-grid-row-span: 1;
grid-column: 1 /2;grid-row: 1/2;
}
html.IE.version_11 body#recruit .contents .message{ display: block; overflow: hidden}
html.IE.version_11 body#recruit .contents .message .image{ float: none; width: auto; margin-right: 0px;}
html.IE.version_11 body#recruit .contents .message .text{ float: none;width: auto;}
html.IE.version_11 body#recruit .contents .message .image img{ width: 100%; height: auto;}
html.IE.version_11 body#recruit .contents .message.right .text{ float: none; width: auto; padding-right: 0px;}
html.IE.version_11 body#recruit .contents .message.right .image{ width: auto; position: relative; }
dl.accordion dt:after{ transform: translate(100%,-100%) rotate(45deg)}
body.person_04 section#visualArea .enWrap{ }
body.person_05 section#visualArea .enWrap{}
body#rookie section#visualArea .enWrap .textImageData{ height: 4vw;}
body#rookie section#visualArea .jpWrap .textImageData{ height: 2vw;}
body#rookie section#contentsArea .readWrap ul{margin-bottom:10vw; }
body#rookie section#contentsArea .readWrap ul li{ max-height: none !important;}
body#rookie section#contentsArea .readWrap ul li{ height:4vw; max-height:none;}
body#rookie section#contentsArea .readWrap ul li:nth-of-type(1) { height:7vw; max-height:none;}
body#rookie section#contentsArea .memberWrap{ margin-bottom:10vw; }
body#rookie section#contentsArea .memberWrap .title{ height: 15vw;}
body#rookie section#contentsArea .memberWrap .memberBoxes{display: flex;}
body#rookie section#contentsArea .memberWrap .memberBoxes .fullSpacer{ display: none;}
body#rookie section#contentsArea .honneRead{ margin-bottom: 15vw; padding-top: 5vw;}
body#rookie section#contentsArea .messageWrap{ padding: 5vw;}
body#rookie section#contentsArea .messageWrap h3{ margin-bottom: 5vw;}
body#rookie section#contentsArea .messageWrap h4{ width: 30vw;margin-bottom: 2.5vw;}
body#rookie section#contentsArea .titleLine .labelLine img{ height:6vw;}
body#rookie section#contentsArea dl.qa{
padding-left: 0;
}
body#rookie .qaArea .unit_2{grid-template-columns:1fr;}
body#rookie .qaArea .unit_3{grid-template-columns:1fr;}
body#rookie .qaArea .unit_4{grid-template-columns:1fr;}
body#rookie .qaArea .unit_5{grid-template-columns:1fr;}
body#rookie .qaArea .unit_6{grid-template-columns:1fr;}
body#rookie .qaArea .unit_7{grid-template-columns:1fr;}
body#rookie .qaArea .unit_3 article,
body#rookie .qaArea .unit_5 article,
body#rookie .qaArea .unit_7 article{
margin-bottom: 10vw;
}
.memberWrap .memberBoxes{}
.memberWrap .memberBoxes > div{ width: 47%;}
.memberWrap .memberBoxes > div:nth-of-type(5){ margin-left: 0;}
.memberWrap .memberBoxes > div:nth-of-type(7){ margin-right: 0;}
html.IE.version_11 .memberWrap .memberBoxes > div{ display: block; width: 46%; margin: 0 2% 2% 2%; height: 60vw;max-height: none;}
.memberWrap .name{ text-align: center; }
.memberWrap .name .labelLine{margin-bottom: 2%;margin-left: auto; margin-right: auto; }
.memberWrap .name .labelLine .textImageData{ height: 2.9vw;max-height: none;}
.memberWrap .name .labelLine:nth-of-type(1) { margin-bottom: 4%; }
.memberWrap .name .labelLine:nth-of-type(1) .textImageData { height: 6vw; max-height: none;}
.memberWrap .name .labelLine:nth-of-type(2),
.memberWrap .name .labelLine:nth-of-type(3) {}
.qaWrap{ margin-bottom: 10vw;}
article.qaArea{ border: solid 0.3em #fff; padding: 6% 6%;}
article.qaArea dl dt{margin-bottom:2%; font-size: 1.0em; line-height: 1.4; }
article.qaArea dl dd{ line-height: 1.6;font-size: 0.8em; }
article.qaArea dl dd ul{}
article.qaArea dl dd ul li{ }
article.qaArea h3 .textImageData{ height: 4.5vw;}
.messageText{ font-size: 0.8em;}
.messageText ul.normalList li{}
.messageTitle{ margin-bottom: 5vw}
.messageTitle img{height: 15vw;}
.btnArea.youtube_ch .linkArea{ width: 80vw !important; height:20vw;}
.btnArea.youtube_ch .linkArea span img{height:13vw;}
.btnArea.link_ch .linkArea{ width: 80vw !important; height:20vw;}
.btnArea.link_ch .linkArea span img{ height: 13vw;}
.wakate{ font-size: 1rem;}
.btnArea.sns_ch{ margin-bottom: 5vw !important;}
.btnArea.sns_ch .linkArea{ width: 80vw !important; height:20vw;}
.btnArea.sns_ch .linkArea span img{height:13vw;}
body#yell #archivesArea .globalInnerWrap{ width: 90%;}
body.yell_top #archivesArea{ padding-top: 50px;}
body#yell #archivesArea ul{ grid-gap: 0vw;}
body#yell #archivesArea ul li{ display: block; width: 46%;}
body#yell #archivesArea ul li:nth-child(even) { }
body#yell #archivesArea ul li .number .labelLine img{ height: 5vw; max-height: none;}
body#yell article:not(:last-child), section#visualArea{ margin-bottom: 10vw;}
body#yell section#contentsArea{ margin-bottom: 10vw;}
body#yell .textContents ul{ margin-bottom: 10vw;}
body#recruit .h3inWrap .flex{ flex-wrap: wrap;}
body#recruit .h3inWrap .flex .flexItem{ width: 100%;}
#yt_player_skip{ width: 30vw; height: 15vw; bottom: 5vw; }
#yt_player_mute{ width: 15vw; height: 15vw; bottom: 5vw; right: 5vw;}
#yt_playerWrap.sp #yt_player_skip{ bottom: -20vw; }
#yt_playerWrap.sp #yt_player_mute{ bottom: -20vw; right: 5vw;}
#youtubeCh_Banner{ width: 10vw; background: url(../img/common/banner_youtube_ch_mini.png) right center no-repeat; background-size:contain; }
#youtubeCh_Banner a{padding-top: 490%;}
#snsCh_Banner{ width: 10vw; }
}
@media screen and (min-width: 769px) {
/* 769px以上 */
.onlyPC{ display: block ;}
.labelLine.onlyPC{ display: inline-block ;}
.onlySP{ display: none;}
}
/* ▼採用終了時の記述 */
/*
.recruit.btnArea .linkArea{ pointer-events: none; cursor: default;}
.recruit.btnArea .cWrap:before{ content: ''; display: block; position: absolute; top: 0%; left: 0%; z-index: 100; width: 100%; height: 100%; background: rgba(255,255,255,0.9);}
.recruit.btnArea .cWrap:after{ content: '今期のエントリー受付は終了しました'; display: block; position: absolute; top: 50%; left: 50%; z-index: 101;transform: translate(-50%,-50%); color: #c00; font-size: 0.9rem; font-weight:bold;white-space: nowrap;}
#globalMenu ul li.recruit{ opacity: 0.1; pointer-events: none;}
*/
/* ▲採用終了時の記述 */
/*
#entryBtn,
#mypageWrap{ display: none;}
.internship.btnArea .linkArea,
.recruit.btnArea .linkArea,
body#event #contentsArea article .h3Wrap:nth-of-type(1) .btnArea .linkArea,
body#event #contentsArea article .h3Wrap:nth-of-type(2) .btnArea .linkArea{ pointer-events: none; cursor: default;}
.internship.btnArea .cWrap:before,
.recruit.btnArea .cWrap:before,
body#event #contentsArea article .h3Wrap:nth-of-type(1) .btnArea .cWrap:before,
body#event #contentsArea article .h3Wrap:nth-of-type(2) .btnArea .cWrap:before{ content: ''; display: block; position: absolute; top: 0%; left: 0%; z-index: 100; width: 100%; height: 100%; background: rgba(255,255,255,0.9);}
.internship.btnArea .cWrap:after,
.recruit.btnArea .cWrap:after,
body#event #contentsArea article .h3Wrap:nth-of-type(1) .btnArea .cWrap:after,
body#event #contentsArea article .h3Wrap:nth-of-type(2) .btnArea .cWrap:after{ content: 'エントリー受付は終了しました'; display: block; position: absolute; top: 50%; left: 50%; z-index: 101;transform: translate(-50%,-50%); color: #c00; font-size: 1rem; font-weight:bold;white-space: nowrap;}
body#event #contentsArea article .h3Wrap:nth-of-type(1) p.tCenter.small,
body#event #contentsArea article .h3Wrap:nth-of-type(2) p.tCenter.small{ display: none;}
body#recruit .inContents #essential{ }
body#recruit .inContents #essential:after{ content: '※2020年度エントリー受付は終了しました'; display: inline-block; color: #ffff00; font-size: 1rem; font-weight:bold;white-space: nowrap; padding: 0em; text-align: center; margin: 0 0 0 1rem; line-height: 1em; transform: translate(0,-0.7em);}
.smartPhone .internship.btnArea .cWrap:after,
.smartPhone .recruit.btnArea .cWrap:after,
.smartPhone body#event #contentsArea article .h3Wrap:nth-of-type(1) .btnArea .cWrap:after,
.smartPhone body#event #contentsArea article .h3Wrap:nth-of-type(2) .btnArea .cWrap:after{font-size: 0.6rem;}
*/