@charset "utf-8";
@import "css/clear.css";
@import "css/utill.css";
@import "css/hamburger.css";


/* 基本設定 ---------------------------------------------*/

* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
list-style: none;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

body {
text-align: center;
font-size: 100%;
line-height: 1.7;
color: #333333;
letter-spacing:0.1em;
background:#efefef;
}


body {
  font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
               'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
               'Segoe UI',       /* Windowsの欧文 */
               YuGothicM,        /* Windows8.1以上は游ゴシック */
               YuGothic,         /* Macの游ゴシック */
               Meiryo,           /* 游ゴシックが入っていないWindows */
               sans-serif;
}
/* IE8〜11はメイリオ */
@media screen\0 {
  body {
    font-family: 'Segoe UI', /* Windowsの欧文 */
                 Meiryo,     /* メイリオ */
                 sans-serif;
  }
}

/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),  /* Mediumを明示的に指定 */
       local('Yu Gothic Medium'), /* Chrome用 */
       local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'), /* Boldはそのまま */
       local('Yu Gothic');     /* Chrome用 */
}




img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}

a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}

.SPOnly{ display:none;}
.textRed{ color:#cc0000;}
.textLeft{ text-align: left !important;}
.smallText{ font-size:0.5rem;}

.mt05rem{ margin-top:0.5rem;}
.mt1rem{ margin-top:1rem;}
.mb1rem{ margin-bottom:1rem;}
.mb2rem{ margin-bottom:2rem;}

.fvIn{ opacity:0;
animation-name: fvIn;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 0s;
-webkit-animation-name: fvIn;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0s;
}
.fvIn.delay1{
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}

@keyframes fvIn{
  0% {
    opacity:0;
    -webkit-transform: translateX(-4rem);
    transform:translateX(-4rem);
  }
  100% {
    opacity:1;
    -webkit-transform: translateX(0);
    transform:translateX(0);
  }
}
@-webkit-keyframes fvIn{
  0% {
    opacity:0;
    -webkit-transform: translateX(-4rem);
    transform:translateX(-4rem);
  }
  100% {
    opacity:1;
    -webkit-transform: translateX(0);
    transform:translateX(0);
  }
}

.setLeftIn{
-webkit-transition: all 1s;
transition: all 1s;
-webkit-transform: translateX(-4rem);
transform:translateX(-4rem);
opacity:0;
}
.setLeftIn.leftInOn{transform:translateX(0); opacity:1;}




header{ background:#cc0000;}
#header{ padding:1rem 1rem; margin:0 auto; max-width:1000px; box-sizing:border-box; position:relative; text-align:left;}
#header h1 img{ width:auto; height:40px;}
#header nav ul{ position:absolute; top:1rem; right:1rem;}
#header nav ul li{ display: inline-block; margin-left:1rem;}
#header nav ul li a{ color:#fff; line-height:40px;}


#mainWrapper{ background:#003366; padding:50px 1rem;}
#mainContent{ background:#fff; text-align:center; color:#cc0000; margin:0 auto; max-width:1000px; box-sizing:border-box; padding:6rem 1rem 2rem;}
#mainContent h2 img{ height:130px; width:auto;}


#sNav{ margin:6rem auto 0;}
#sNav ul li{ display:inline-block; padding:0 1rem;}
#sNav ul li img{ width:auto; height:78px;}


.categoryListWrapper{ margin:60px auto 0; max-width:1000px;}
.categoryListWrapper.borderRed{ border-top:8px solid #cc0000;}
.categoryListWrapper.borderBlue{ border-top:8px solid #003366;}

#indexCatBox0{ background:#fff;}
#indexCatBox1{ background:#fff url(img/bg_indexCatBox1.png) 0 -1px no-repeat; background-size:auto 300px;}
#indexCatBox2{ background:#fff url(img/bg_indexCatBox2.png) -9px -3px no-repeat; background-size:auto 300px;}
#indexCatBox3{ background:#fff url(img/bg_indexCatBox3.png) -5px -5px no-repeat; background-size:auto 300px;}
#indexCatBox4{ background:#fff url(img/bg_indexCatBox4.png) 0 -3px no-repeat; background-size:auto 300px;}
#indexCatBox5{ background:#fff url(img/bg_indexCatBox5.png) 0 -7px no-repeat; background-size:auto 300px; position:relative;}
#indexCatBox6{ background:#fff url(img/bg_indexCatBox6.png) 0 -7px no-repeat; background-size:auto 103%; background-size:auto 300px; position:relative;}
#indexCatBox6:after{ content:""; width:1px; height:80%; background:#003366; position:absolute; top:10%; left:47%;}
#indexCatBox7{ background:#fff url(img/bg_indexCatBox7.png) 0 -7px no-repeat; background-size:auto 103%; background-size:auto 300px; position:relative;}
#indexCatBox7:after{ content:""; width:1px; height:80%; background:#cc0000; position:absolute; top:10%; left:47%;}
#indexCatBox7.noBorder:after{ content:none;}

#indexCatBox5.separate:after{ content:""; width:1px; height:80%; background:#cc0000; position:absolute; top:10%; left:47%;}
#indexCatBox6.noSeparate:after{ content:none;}
#indexCatBox7.noSeparate:after{ content:none;}

.innerCategoryList{ min-height:300px; width:100%; box-sizing:border-box; padding:1rem; text-align:left; position:relative;}
.innerCategoryList h2 img{ height:28px; width:auto; vertical-align:baseline;}
.innerCategoryList h2 span{ display:inline-block; margin:0 0 0 1rem; font-size:80%;}

#toCat1Btn{ position:absolute; top:1rem; right:1rem;}
.squareBtn{ display:inline-block; padding:0.2rem 2rem; line-height:1;}
.redBtn{ color:#fff; background:#cc0000;}
.blueBtn{ color:#fff; background:#0e335f;}

.dispTable{ display:table; table-layout:fixed; width:100%;}
.dispTableCell{ display:table-cell; vertical-align:top; position:relative;}
.dispTableCell.borderRed{ border-right:1px solid #cc0000;}
.dispTableCell.borderBlue{ border-right:1px solid #003366;}
.dispTableCell.w300{ width:300px; box-sizing:border-box; padding:0 1rem 0 0;}


#indexCat1:after{ content:""; position:absolute; width:50px; height:50px; left:1rem; top:15rem; background:url(img/icon_indexCategory1.png) 0 0 no-repeat; background-size:contain;}
#indexCat2:after{ content:""; position:absolute; width:50px; height:50px; left:6rem; top:12rem; background:url(img/icon_indexCategory2.png) 0 0 no-repeat; background-size:contain;}
#indexCat3:after{ content:""; position:absolute; width:50px; height:50px; left:6rem; top:4rem; background:url(img/icon_indexCategory3.png) 0 0 no-repeat; background-size:contain;}
#indexCat4:after{ content:""; position:absolute; width:50px; height:50px; left:2rem; top:12rem; background:url(img/icon_indexCategory4.png) 0 0 no-repeat; background-size:contain;}
#indexCat5:after{ content:""; position:absolute; width:50px; height:50px; left:13rem; top:7rem; background:url(img/icon_indexCategory5.png) 0 0 no-repeat; background-size:contain;}
#indexCat6:after{ content:""; position:absolute; width:50px; height:50px; left:9rem; top:-0.5rem; background:url(img/icon_indexCategory6.png) 0 0 no-repeat; background-size:contain;}
#indexCat7:after{ content:""; position:absolute; width:50px; height:50px; left:9rem; top:-0.5rem; background:url(img/icon_indexCategory7.png) 0 0 no-repeat; background-size:contain;}
#indexCat8:after{ content:""; position:absolute; width:50px; height:50px; left:7rem; top:-0.5rem; background:url(img/icon_indexCategory8.png) 0 0 no-repeat; background-size:contain;}
#indexCat9:after{ content:""; position:absolute; width:50px; height:50px; left:7rem; top:-0.5rem; background:url(img/icon_indexCategory9.png) 0 0 no-repeat; background-size:contain;}

#indexCat8.topSet:after{ top:3rem;}
#indexCat9.topSet:after{ top:3rem;}


#indexWorksList{ margin:2rem 0 0 20%;}
#indexWorksList li{ display:inline-block; margin:0 0.5rem; position:relative;}
#indexWorksList li:nth-child(2n){ top:2rem;}
#indexWorksList li img{ height:120px; width:auto;}

#indexArtistsWrapper{ margin:0 0 0 20%; display:table; table-layout:fixed; width:80%;}
#indexArtistsGroupA{ display:table-cell; vertical-align:top; width:80%; text-align:center;}
#indexArtistsGroupA h3 img{ height:20px; width:auto;}
#indexArtistsGroupA ul li{ display:inline-block; margin-top:0.5rem; position:relative; vertical-align:top;}

#indexArtistsGroupA ul li a{ display:block; width:100px; height:100px; position:relative;}
#indexArtistsGroupA ul li a:after{ content:""; width:100px; height:100px; background:rgba(255,255,255,0); position:absolute; top:0; left:0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#indexArtistsGroupA ul li a:hover:after{ background:rgba(255,255,255,0.75);}

#indexArtistsGroupA ul li a span{ position:absolute; left:50%; top:50%; font-size:75%; opacity:0; z-index:300; display:inline-block; width:100%;
transform: translate(-50%, -100%);
-webkit-transform: translate(-50%, -100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#indexArtistsGroupA ul li a:hover span{
opacity:1;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

.nameText{ font-size:75%; width:100px;}
.nameText--L{ font-size:75%; width:126px;}


#indexArtistsGroupB{ display:table-cell; vertical-align:top; width:20%; text-align:center;}
#indexArtistsGroupB h3 img{ height:18px; width:auto;}
#indexArtistsGroupB ul li{ display:inline-block; margin-top:0.5rem; vertical-align:top;}

#indexArtistsGroupB ul li a{ display:block; width:100px; height:100px; position:relative;}
#indexArtistsGroupB ul li a:after{ content:""; width:100px; height:100px; background:rgba(255,255,255,0); position:absolute; top:0; left:0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#indexArtistsGroupB ul li a:hover:after{ background:rgba(255,255,255,0.75);}

#indexArtistsGroupB ul li a span{ position:absolute; left:50%; top:50%; font-size:75%; opacity:0; z-index:300; display:inline-block; width:100%;
transform: translate(-50%, -100%);
-webkit-transform: translate(-50%, -100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#indexArtistsGroupB ul li:hover span{
opacity:1;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}


#indexEngineersList{ margin:2rem 0 0 30%; text-align:center;}
#indexEngineersList li{ display:inline-block; margin:0 0.5rem;}
#indexEngineersList li:nth-child(2n){ top:2rem;}

#indexEngineersList li a{ display:block; width:126px; height:126px; position:relative;}
#indexEngineersList li a:after{ content:""; width:126px; height:126px; background:rgba(255,255,255,0); position:absolute; top:0; left:0;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#indexEngineersList li a:hover:after{ background:rgba(255,255,255,0.75);}

#indexEngineersList li a span{ position:absolute; left:50%; top:50%; font-size:75%; opacity:0; z-index:300; display:inline-block; width:100%;
transform: translate(-50%, -100%);
-webkit-transform: translate(-50%, -100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#indexEngineersList li:hover span{
opacity:1;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}


#indexStaffList{ margin:2rem 0 0 25%;}
#indexStaffList li{ display:inline-block; width:50%; vertical-align:top; margin-bottom:1rem; box-sizing:border-box; padding:0 0.5rem 1rem;}
#indexStaffList li dl{ margin-bottom:0.5rem;}
#indexStaffList li dl dt{ text-align:center; background:#003366; color:#fff; margin-bottom:2px; font-size:80%;}
#indexStaffList li dl dt span{ display:inline-block; margin-left:1rem; font-size:70%;}
#indexStaffList li dl dd{ text-align:center; background:#003366; color:#fff; font-size:70%; display:none;}
#indexStaffList li p{ font-size:60%; margin-top:1rem;}


#indexRecruitWrapper{ margin:0 0 0 30%; width:70%; text-align:center;}
#indexRecruitWrapper > p{ font-size: 80%; margin-bottom:1rem;}
#indexRecruitDetail dl{ margin:0 0.5rem;}
#indexRecruitDetail dl dt{ text-align:center; background:#666666; color:#fff; margin-bottom:2px; font-size:80%;}
#indexRecruitDetail dl dd{ text-align:center; font-size:60%; margin:0.5rem auto;}


#indexAboutusWrapper{ text-align:center; margin-top:3rem;}
#indexAboutusWrapper img{ height:90px; width:auto; margin-right:5%;}


#indexContactWrapper{ text-align:center; margin-top:3rem;}
#indexContactWrapper img{ height:90px; width:auto;}
#indexContactWrapper p{ margin:0.5rem auto; font-size:60%;}


#indexStudioWrapper{ text-align:center; margin-top:3rem;}
#indexStudioWrapper img{ height:120px; width:auto; margin-right:5%;}
#indexStudioWrapper img.lower{ height:180px; width:auto; margin-right:auto;}
#indexStudioWrapper p{ margin:0.5rem 5% 0.5rem auto; font-size:60%;}
#indexStudioWrapper p.lower{ margin:1rem auto 1rem auto; font-size:75%;}
#toStudioIndexBtnWrapper{ margin-right:5%;}


#indexLinkList{ margin:3rem auto 0; text-align:center;}
#indexLinkList li{ display:inline-block; box-sizing:border-box; padding:0 1rem 1rem;}
#indexLinkList li img{ height:100px; width:auto; margin-bottom:0.5rem;}
#indexLinkList li p{ font-size:80%;}
#indexLinkList li.lower{ display:inline-block; box-sizing:border-box; padding:0 2rem 1rem;}
#indexLinkList li.lower img{ height:140px; width:auto; margin-bottom:0.5rem;}




#footer{ background:#cc0000; padding:2rem 0; margin:60px 0 0; text-align:center; color:#fff; font-size:75%; position:relative;}
#footerLogo{ position:absolute; left:1rem; top:50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}
#footerLogo img{ width:auto; height:40px;}


#topBack{ position:fixed; bottom:6rem; right:2rem; width:50px; height:50px; cursor:pointer;}


.newsWrapper{display:table; table-layout:fixed; width:100%; padding:1rem; box-sizing:border-box;}
.newsPrimary{display:table-cell; vertical-align:top; text-align:left;}
.newsSecondary{display:table-cell; vertical-align:middle; padding:0 2rem; box-sizing:border-box; text-align:left;}
.newsSecondary h3{font-size:1.2rem; margin-bottom:1rem;}
.newsSecondary h4{font-size:0.8rem;}
.newsSecondary p{font-size:0.8rem; margin-bottom:1rem;}
.newsSecondary p.fontSet{font-size:0.8rem; margin-bottom:2rem;}
.newsSecondary p:last-child{margin-bottom:0;}
.topBackBtnWrapper{ margin-top:2rem;}
.newsSecondary ul{font-size:0.8rem;}
.newsSecondary ul li a{ text-decoration:underline;}
.newsSecondary ul li a:hover{ text-decoration:none;}
.trytextWrapper{ margin:2rem 0 3rem;}

.newsWrapper.dispBlock{display:block; padding:0 1rem;}
.newsPrimary.dispBlock{display:block; width:100%; text-align:center; padding:2rem 0;}
.newsSecondary.dispBlock{display:block; width:100%; padding:0;}

.movieWrapper{
position:relative;
height:0;
padding-top:56.25%;
}

.movieWrapper iframe{
height:100%;
position:absolute;
left:0;
top:0;
width:100%;
}


.websiteInfo a{ text-decoration:underline;}
.websiteInfo a:hover{ text-decoration:none;}




.langSelectWrapper{ position:absolute; top:0; right:0; padding:1rem 0.5rem 1rem 1rem; background:rgba(204, 0, 0,1);}
.langSelectWrapper > ul > li{ display:inline-block; padding:0;}
.langSelectWrapper > ul > li > span{ font-weight: bold; display: block; padding:0.2rem 1rem 0.2rem; line-height:1; background:#fff; color:#cc0000; border:1px solid #fff; font-size:0.75rem;}
.langSelectWrapper > ul > li > a{ font-size:0.75rem; display: block; padding:0.2rem 1rem 0.2rem; color:#fff; opacity:1; line-height:1; border:1px solid #fff;}
.langSelectWrapper > ul > li > a:hover{ background: #003366;}

.popupNavLang li{ display:inline-block; padding-right:1rem;}
.popupNavLang li a{ font-size:0.75rem; display: block; padding:0.2rem 1rem 0.2rem; color:#fff; opacity:1; line-height:1; border:1px solid #fff;}
.popupNavLang li span{font-weight: bold; display: block; padding:0.2rem 1rem 0.2rem; line-height:1; background:#fff; color:#003366; border:1px solid #fff; font-size:0.75rem;}

@media screen and (max-width : 1280px) {
  .langSelectWrapper{ padding:0.2rem 0.5rem;}
  #header nav ul{ top:2rem!important;}
}

@media screen and (max-width : 980px) {
#gNav.PCOnly{ display:none;}
#hamburger{ position:fixed; top:0; right:0; z-index:310; background:#cc0000; padding:14px 14px 6px;}
#hamburger.SPOnly{ display:block;}
.langSelectWrapper{ right:68px;}


#spMenu{ position:fixed; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:305; -webkit-transition: all 0.2s; transition: all 0.2s; display:none;}
#spMenuContent{ position:absolute; top:0; right:-100%; width:90%; height:100%; padding:4rem 0 0 1rem; background:#003366; text-align:left; box-sizing:border-box; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay:0.2s; transition-delay:0.2s;}
#spMenuContent.spMenuOn{ right:0;}
#spMenuContent li{ margin:0 0 1rem;}
#spMenuContent li a{ color:#fff;}
#spMenuContent li img{ height:14px; width:auto;}
#spMenuContent li:first-child img{ height:12px; width:auto;}
}

@media screen and (max-width : 768px) {
  /*.langSelectWrapper{ right:0; top:auto; bottom:0; width:100%;padding:0.5rem 0.5rem; box-sizing:border-box;}
  .langSelectWrapper > ul > li{ width:50%; padding:0 0.5rem; box-sizing:border-box;}
  #footer{ padding-bottom:60px;}
  */
  .langSelectWrapper{ right:58px; padding:0.45rem 0.5rem 0.4rem; position:fixed; z-index:311;}
  .langSelectWrapper > ul > li{ display:block;}
  .langSelectWrapper > ul > li:first-child{ margin-bottom:4px;}
  .langSelectWrapper > ul > li > span{ padding:0.1rem 1rem 0.1rem;}
  .langSelectWrapper > ul > li > a{ padding:0.1rem 1rem 0.1rem;}
}




/* タブレット ---------------------------------------------*/
@media screen and (max-width : 768px) {


.newsWrapper{display:block; padding:1rem;}
.newsPrimary{display:block; width:100%;}
.newsSecondary{display:block; width:100%; padding:1rem 0 0;}
.newsSecondary h3{font-size:1rem; margin-bottom:1rem;}
.newsSecondary h4{font-size:0.8rem; margin-bottom:1rem;}
.newsSecondary p{font-size:0.8rem; margin-bottom:1rem;}
.newsSecondary p.font1rem{font-size:1rem; margin-bottom:1rem;}
.newsSecondary p:last-child{margin-bottom:0;}
.topBackBtnWrapper{ margin-top:2rem;}

.newsWrapper.dispBlock{ padding:0;}
.newsPrimary.dispBlock{ padding:1rem 0;}


html,body{ width: 100%;}
.SPOnly{ display:block;}
.PCOnly{ display:none;}


#mainWrapper{ padding:1rem;}
#mainContent{ padding:2rem 1rem 1rem;}
#sNav{ margin:2rem auto 0;}
#sNav ul li{ text-align: center; padding:0 1rem 1rem; box-sizing:border-box; width:11%;}
#sNav ul li img{ height:auto;}

.categoryListWrapper{ margin:2rem auto 0;}

#indexCatBox1{ background-size:auto 150px;}
#indexCatBox2{ background-size:auto 150px;}
#indexCatBox3{ background-size:auto 150px;}
#indexCatBox4{ background-size:auto 150px;}
#indexCatBox5{ background-size:auto 150px;}
#indexCatBox5.separate:after{ content:none;}
#indexCatBox6{ background-size:auto 150px; position:relative;}
#indexCatBox6:after{ content:none;}
#indexCatBox7{ background-size:auto 150px; position:relative;}
#indexCatBox7:after{ content:none;}


.innerCategoryList{ min-height:inherit;}
.innerCategoryList h2 img{ height:20px;}
.innerCategoryList h2 span{ display:block; margin:0; font-size:80%;}

#toCat1Btn{ text-align:center; position:static;}

#indexCat1:after{ left:auto; right:1rem; top:1rem; width:40px; height:40px;}
#indexCat2:after{ left:auto; right:1rem; top:0.5rem; width:40px; height:40px;}
#indexCat3:after{ left:auto; right:1rem; top:0.5rem; width:40px; height:40px;}
#indexCat4:after{ left:auto; right:1rem; top:0.5rem; width:40px; height:40px;}
#indexCat5:after{ left:auto; right:1rem; top:0.5rem; width:40px; height:40px;}
#indexCat6:after{ left:0; top:3rem; width:40px; height:40px;}
#indexCat7:after{ left:0; top:3rem; width:40px; height:40px;}
#indexCat8:after{ left:0; top:4rem; width:40px; height:40px;}
#indexCat9:after{ left:0; top:4rem; width:40px; height:40px;}

#indexCat7.spSeparate:after{ top:5rem;}
#indexCat8.topSet:after{left:auto; right:1rem; top:0.5rem;}
#indexCat9.topSet:after{left:auto; right:1rem; top:0.5rem;}

#indexWorksList{ margin:2rem auto 0; text-align: center;}
#indexWorksList li{ margin:0 0.5rem 1rem;}
#indexWorksList li:nth-child(2n){ top:0;}

#indexArtistsWrapper{ margin:0 auto; display:block; width:100%;}
#indexArtistsGroupA{ display:block; width:100%; margin: 1rem 0 1rem;}
#indexArtistsGroupB{ display:block; width:100%; margin-bottom:1rem;}


#indexArtistsGroupA ul li a.SPoverOn:after{ background:rgba(255,255,255,0.9);}
#indexArtistsGroupA ul li a.SPoverOn span{
opacity:1;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

#indexArtistsGroupA > h3{ margin-bottom:0.5rem;}
#indexArtistsGroupA ul li{ margin:0 0.2rem 1rem;}
#indexArtistsGroupB ul li{ margin:0 0.2rem 1rem;}

#indexEngineersList{ margin:1rem auto 0; text-align: center;}
#indexEngineersList li{ margin:0 0.2rem 1rem;}
#indexEngineersList li:nth-child(2n){ top:0;}
#indexEngineersList li a{ width:100px; height:100px;}
#indexEngineersList .nameText--L{width:100px;}

#indexStaffList{ margin:1rem 0 0;}
#indexRecruitWrapper{ margin:1rem 0 0; width:100%;}

#indexCatBox5 .dispTableCell{ display:block; width:100%;}
#indexCat7.spSeparate{ margin-top:4rem; padding-top:2rem; border-top:1px solid #cc0000;}
}


/* スマホ ---------------------------------------------*/
@media screen and (max-width : 600px) {


#sNav ul li{ width:33%;}
#sNav ul li img{ height:78px;}

#indexStaffList li{ width:100%; padding:0 0.5rem 0;}
#indexStaffList li p{ font-size:75%;}

#indexRecruitDetail{ display:block;}
#indexRecruitDetail .dispTableCell{ display:block; width:100%;}
#indexRecruitDetail dl dd{ font-size:75%;}

#indexCatBox6{ display:block;}
#indexCatBox6 .dispTableCell{ display:block; width:100%;}

#indexAboutusWrapper{ margin:1rem auto 1rem;}
#indexAboutusWrapper img{ height:60px; margin-right:auto;}

#indexContactWrapper{ margin-top:1rem;}
#indexContactWrapper img{ height:60px;}

#indexCatBox7{ display:block;}
#indexCatBox7 .dispTableCell{ display:block; width:100%;}

#indexStudioWrapper{ margin-top:1rem;}
#indexStudioWrapper img{ height:100px; margin-right:auto;}
#indexStudioWrapper p{ margin:0.5rem auto 0.5rem;}
#toStudioIndexBtnWrapper{ margin-right:auto;}

#indexCat9{ margin-top:1rem;}
#indexCat9.topSet{margin-top:0;}
#indexLinkList{ margin:1rem auto 0;}
#indexLinkList li{ display:inline-block; box-sizing:border-box; padding:0 1rem 1rem;}

#indexContactWrapper p{ font-size:75%;}
#indexStudioWrapper p{ font-size:75%;}

#footer{ margin:2rem 0 0;}

.dispTableCell.w300{ padding:0;}

}








.MainSlideWrapper{ padding:4rem 0 0; width:100%; overflow:hidden;}


.slider-container{ max-width:1000px; width:100%; margin:0 auto; padding:3rem 4rem calc(3rem - 7px); background:#000; box-sizing: border-box;}
.slider-container.pw-L{ padding:3rem 10rem calc(3rem - 7px);}
.slick-slide{ padding:0 1px;}

#slider .slick-slide > div > div{ position:relative;}
#slider .slick-slide > div > div::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing: border-box; background:rgba(0, 0, 0, .8);}
#slider .slick-current > div > div{ position:relative;}
#slider .slick-current > div > div::after{ content:none;}


#thumbs{ padding:0 0; box-sizing: border-box;}
#thumbs .slick-slide > div > div{ position:relative; cursor: pointer;}
#thumbs .slick-slide > div > div::after{ content:""; position:absolute; top:0; left:0; border:4px solid #666; width:100%; height:100%; box-sizing: border-box; background:rgba(0, 0, 0, .8);}
#thumbs .slick-slide > div > div:hover::after{ background:rgba(0, 0, 0, 0);}
#thumbs .slick-current > div > div{ position:relative; cursor: pointer;}
#thumbs .slick-current > div > div::after{ content:""; position:absolute; top:0; left:0; border:4px solid #cc0000; width:100%; height:100%; box-sizing: border-box; background:rgba(0, 0, 0, 0);}


.slick-prev,.slick-next{z-index:2;}
.slick-prev{left:0!important;}
.slick-next{right:0!important;}

.slideInner{ position:relative;}
.slideInner a{ display:block; position:relative;}
.slideInner a:hover{ opacity:0.8;}
.slideInner a::before{ content:""; position:absolute; top:50%; left:50%; width:100px; height:75px; background:url( img/icon_youtube.svg) center center no-repeat; background-size:contain; transform: translate(-50%,-50%);}
.slideDetailInfo{ position:absolute; bottom:0; right:0; background:rgba(0,0,0,0.8); text-align:right; padding:1rem 1rem; color:#fff;}
.slideDetailInfo .outside{ font-size:0.75rem; opacity:0.6;}

/*　全画面表示用のスタイル
.slick-list{ overflow:visible;}
*/

.slick-prev:before, .slick-next:before {color:#cc0000; opacity:1;}

.playlistWrapper{ margin-top: 2rem; padding: 0 2rem; box-sizing: border-box; margin-bottom:-1rem;}

.staffBox{ margin-top:2rem;}

@media screen and (max-width : 600px) {
  .MainSlideWrapper{ padding:calc(2rem - 8px) 0 0;}
  .slider-container{ padding:2rem 1rem calc(2rem - 7px);}
  .slider-container.pw-L{ padding:2rem 1rem calc(2rem - 7px);}

  .slideDetailInfo{ font-size:0.75rem;}
  .slideDetailInfo .outside{ font-size:0.6rem; opacity:0.5;}

  #thumbs .slick-slide > div > div::after{ border:2px solid #666;}
  #thumbs .slick-current > div > div::after{ border:2px solid #cc0000;}

  .slideInner{ position:relative;}
  .slideDetailInfo{ position:static; text-align:left;}

  .slideInner a::before{ content:""; top:38%; width:60px; height:45px;}

  .playlistWrapper{ padding:0;}

  .staffBox{ margin-top:1rem;}
}