@charset "utf-8";

.bold { font-weight:bold;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:30px; height:21px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:1px; background-color:#333;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body {font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif; text-align: center; background: #f2f7ee; font-feature-settings: "palt"; line-height:1.7; color:#000; letter-spacing:0.1em;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}
svg{ vertical-align:middle; max-width:100%;}
svg{ width:auto\9; height:auto\9;}

section{ overflow-x: hidden;}

.mincho{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
a{ text-decoration: none;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}


#opening{ position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:10100;}
#openingInner{position:absolute; top:0; left:0; width:100%; height:100%; display:none;}
#openingInner::before{content:""; position:absolute; top:0; left:0; background:#fff; clip-path: polygon(0 8rem, 100% 0, 100% calc(100% - 8rem), 0 100%); transform-origin:center center; width:100%; height:100%; z-index:-1; animation:openingScaleUp 1s 1s ease-in-out forwards;transform: scale(0.8);}
@keyframes openingScaleUp {
  from { transform: scale(0.8);background:#fff; }
  to {transform: scale(1);background:#F1F7ED; }
}

#openingInner img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); height:auto; width: 80px; filter: grayscale(100%)  brightness(130%); transition: all 1s;}
#openingInner img.color{ filter: grayscale(0%) brightness(100%);}

#openingSeed{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); display:none;}
#openingSeed img{ height:auto; width: 80px; transform: scale(0); transition: all .5s; transform-origin:35% 75%;}
#openingSeed img.scale{ transform: scale(1);}

.pageCover{ overflow-x:hidden;}

#headerWrapper{ padding:2rem 0 4rem;}
#headerWrapper h1{ display:inline-block;}
#headerWrapper h1 dl dt img{ width:80px; height:auto;}
#headerWrapper h1 dl dt{ margin-bottom:0.5em;}
#headerWrapper h1 dl dd img{ width:auto; height:1.2rem;}

#gNavWrapper{ position:relative; width:100%; z-index:9990; opacity:0; transform: translate(0,-1rem); transition: all .5s;}
.navBee{ position: absolute;}
.navBee.home{top:120px; left:50%; margin-left:-440px;}
.navBee.cat1{top:120px; left:50%; margin-left:-290px;}
.navBee.cat2{top:140px; left:50%; margin-left:-160px;}
.navBee.cat3{top:240px; left:50%; margin-left:0;}
.navBee.cat4{top:120px; left:50%; margin-left:140px;}
.navBee.cat5{top:120px; left:50%; margin-left:300px;}
.navBee.cat6{display:none;}

.navBee img{height:3rem; width:auto;}

#gNavWrapper.on{ opacity:1; transform: translate(0,0);}
#gNavWrapper.fixed{ position:fixed; top:0; left:0; width:100%;}
#gNav{ padding:2rem 0 0 ; position:absolute; top:0; left:50%; transform:translate(-50%,0); width:100%; transition: all .25s;}
#gNavWrapper.fixed #gNav{ background: rgba(255, 255, 255, 0.95); background:rgba(242, 247, 238,0.9);}

#gNav > li{ display:inline-block; padding:0 2rem 1rem; vertical-align: top; position:relative;}
#gNav > li > a:hover{ color: #b1d039;}
#gNav > li > span{cursor: pointer; display:inline-block;}
#gNav > li > span > a:hover{ color: #b1d039;}

#gNav > li > ul{ text-align: left; position: absolute; top:2em; left:0; width:12.4em; opacity:0;}
#gNav > li > ul::after{ content:""; position: absolute; bottom:1em; left:0; width:1px; height:100%; background:#000;}
#gNav > li > ul > li{ padding:0.25em 0 0.25em 1.5em; position:relative; background-color: #fff;}
#gNav > li > ul > li:nth-child(1){ border-radius:0 8px 0 0;}
#gNav > li > ul > li:last-child{ border-radius:0 0 8px 8px;}
#gNav > li > ul > li > a{ font-size:0.8rem;}
#gNav > li > ul > li > a:hover{ color:#b1d039;}
#gNav > li > ul > li::after{ content:""; position: absolute; top:50%; left:0; width:0.5rem; height:1px; background:#000;}

#gNav > li.hasChild > ul.animeOn{ animation:subnavOn .25s ease-in 0s 1 normal forwards;}
#gNav > li.hasChild > ul.animeOff{ animation:subnavOff .25s ease-in 0s 1 normal forwards;}

@keyframes subnavOn {
  0%{ opacity:0; transform:translate(0,-0.25rem);}
  100%{ opacity:1; transform:translate(0,0);}
}
@keyframes subnavOff {
  0%{ opacity:1; transform:translate(0,0);}
  100%{ opacity:0; transform:translate(0,-0.25rem);}
}

.spNavLogo{ display:none;}


#hamburger{ position:fixed; top:10px; right:10px; display:block; z-index:10000;}
#gNavWrapper-sp{ position:fixed; top:0; transform: translate(102%,0);height:100vh; width:100%; z-index:9991;transition: all .5s;}
#gNavWrapper-sp.on{ transform: translate(0,0);}
#gNav-sp{ background:#f2f7ee; padding:2rem 0; width:100%;height:100%;}
#gNav-sp > li{ display:block; padding:0 0 2rem; font-size:0.8rem;}
#gNav-sp > li > ul{ text-align: center; position: static; width:auto; opacity:1; max-width:280px; margin-left:auto; margin-right:auto; margin-top:1rem; }
#gNav-sp > li > ul::after{ content:none;}
#gNav-sp > li > ul > li{ padding:0.5em 0 0.5em 0; position:relative; border-radius:8px 8px; margin-top:0.5rem; background-color: #fff;}
#gNav-sp > li > ul > li:nth-child(1){ border-radius:8px 8px;}
#gNav-sp > li > ul > li:last-child{ border-radius:8px 8px;}
#gNav-sp > li > ul > li::after{ content:none;}
#gNav-sp > li > ul > li a{ display: block;}

@media only screen and (max-width : 960px) {
  #headerWrapper{ padding:2rem 0 2rem;}
  #headerWrapper h1 dl dt img{ width:60px;}
  #gNavWrapper{ display:none; }
  .navBee{ display:none;}
}




.turnupAnime{opacity:0; filter: blur(10px);transform:translate(0,-2rem);}
.turnupAnime.animeOn{ animation:fadeInBlur .75s ease-in 0s 1 normal forwards;}
@keyframes fadeInBlur {
  0%{ opacity:0; filter: blur(10px);transform:translate(0,-2rem);}
  100%{ opacity:1; filter: blur(0px);transform:translate(0,0);}
}

.turnupAnimeDelayManual{transform:translate(-1rem,0); opacity:0;}
.turnupAnimeDelayManual.animeOn{ animation:fadeFromLeft .5s ease-in calc(var(--index) * 0.5s) 1 normal forwards;}
@keyframes fadeFromLeft {
  0%{ transform:translate(-1rem,0); opacity:0;}
  100%{ transform:translate(0,0); opacity:1;}
}

.beeAnime{ opacity:0; transform: translate(-4rem, 1rem);}
.beeAnime.on{animation: beeAnime .5s linear 1 normal forwards;}
@keyframes beeAnime {
  0% { transform: translate(-4rem, 1rem); opacity:0;}
  50% { transform: translate(-2rem, 2rem);}
  100% { transform: translate(0, 0); opacity:1;}
}




.whiteBgBox {position:relative; padding:8rem 0;}
.whiteBgBox::before{content:""; position:absolute; top:0; left:0; background-color:#fff; clip-path: polygon(0 8rem, 100% 0, 100% calc(100% - 8rem), 0 100%); transform: scale(0.8); transform-origin:center center; width:100%; height:100%; z-index:-1;}
.whiteBgBox.animeOn::before {animation:scaleUp 1s ease-in-out forwards;}

@keyframes scaleUp {
  from { transform: scale(0.8);}
  to {transform: scale(1);}
}
#copyRight{ font-size:0.75rem; letter-spacing:0em; padding:1rem 0 1rem;}

@media only screen and (max-width : 800px) {
  .whiteBgBox { padding:10% 0;}
  .whiteBgBox.animeOn::before { clip-path: polygon(0 2rem, 100% 0, 100% calc(100% - 2rem), 0 100%);}
}




.indexWorksList{ display:flex; max-width:960px; width:100%; margin:2rem auto 0; flex-wrap: wrap; gap:2rem;}
.indexWorksList > li{ background:#000; flex-basis: calc(50% - 1rem); color: #fff; position:relative; text-align: left;}
.indexWorksList > li::after{ content:""; position: absolute; top:50%; right:4rem; width:2rem; height:2rem; border-top:1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg) translate(0,-50%); transition: all .5s; opacity:.7;}
.indexWorksList > li:hover:after{ right:3rem;}

.indexWorksList > li.worksBlock1{ background:#000 url(img/worksbg_visualcontent.jpg) center center no-repeat; background-size: contain;}
.indexWorksList > li.worksBlock1::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7);}

.indexWorksList > li.worksBlock2{ background:#000 url(img/worksbg_2.jpg) center center no-repeat; background-size: contain;}
.indexWorksList > li.worksBlock2::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7);}

.indexWorksList > li.worksBlock3{ background:#000 url(img/worksbg_3.jpg) center center no-repeat; background-size: contain;}
.indexWorksList > li.worksBlock3::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7);}

.indexWorksList > li.worksBlock4{ background:#000 url(img/worksbg_lighting.jpg) center center no-repeat; background-size: contain;}
.indexWorksList > li.worksBlock4::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7);}

.indexWorksList > li.worksBlock5{ background:#000 url(img/worksbg_art.jpg) center center no-repeat; background-size: 100% auto;}
.indexWorksList > li.worksBlock5::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7);}

.indexWorksList > li.worksBlock6{ background:#000 url(img/worksbg_online.jpg) center center no-repeat; background-size: 100% auto;}
.indexWorksList > li.worksBlock6::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7);}

.indexWorksList > li > a{ display:block; position:relative; height:100%; padding:1rem 1rem 1rem;}
.indexWorksList > li > a::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2.0rem; background:#000;}
.indexWorksList > li > a::after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:2.0rem; background:#000;}





.worksListTitle-en{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; font-size:1.2rem; font-weight:normal; line-height:1; position:relative;}

.worksListBox{ padding:8rem 0 0; position:relative; z-index:1000;}
.worksListBox h2{ font-size:1.2rem; margin:0 0 1rem; letter-spacing:0.1em; opacity:0!important;}
.worksListBox p{ font-size:0.8rem;}
@media only screen and (max-width : 800px) {
  .worksListTitle-en{ line-height:1;}
  .indexWorksList{ flex-direction:column; gap:1px; padding:0 1rem;}

  .indexWorksList > li::after{ right:2rem;}
  .indexWorksList > li:hover:after{ right:1.5rem;}
}




.boxWrapper{ margin:4rem auto;}
.boxWrapper.topWorks{ margin-top:-2rem;}
.boxWrapper.companyWrapper{ margin:8rem auto 4rem;}

.secTitleWrapper{max-width:960px; width:100%; margin:2rem auto; text-align:left;}
.secTitle{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; font-size:1.2rem; color:#524D4D;}

.secSubTitle-jp{ font-size:0.8rem; margin:1rem auto -1rem;}
.memberDetailFlex .secSubTitle-jp{ padding:0 0 0 2rem;}

.secTitleWrapper.logoIcon{position:relative;}
.secTitleWrapper.logoIcon::before{ content:""; position:absolute; top:-4rem; left:0; height:3.4rem; width:4rem; background:url(img/logo.svg) 0.5rem 0 no-repeat; background-size: contain;}
.secTitleWrapper.max800{max-width:800px;}
.secTitleWrapper.max680{max-width:680px;}

.secSubTitleWrapper{max-width:960px; width:100%; margin:3rem auto 2rem; text-align:left;}
.secSubTitle{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; font-size:1.0rem; color:#524D4D; border:1px solid #524D4D; padding:10px 2rem;}
.secSubTitleWrapper.max800{max-width:800px;}
.secSubTitleWrapper.max680{max-width:680px;}
.secSubTitleWrapper.ac{ text-align: center;}

.nextBtnWrapper{max-width:960px; width:100%; margin:2rem auto; text-align:right;}
.nextBtnWrapper > span{display:inline-block; position:relative; font-size:0.8rem; padding:0.5rem 4rem 0.5rem 0;}
.nextBtnWrapper > span::after{ content:""; position: absolute; top:50%; right:0; width:3rem; height:3rem; background:url(img/icon_arrow.svg) center center no-repeat; background-size:contain; transform: translate(0,-50%);}
.nextBtnWrapper > span > a{display:block; overflow: hidden; position: relative; padding:0.5rem 0 0.5rem 0;}
.nextBtnWrapper > span > a::before{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#333;animation:lineLoopAnime 3s linear 0.1s infinite normal forwards; transform: translate(0,-100%);}

@keyframes lineLoopAnime {
  0%{ transform: translate(-100%,0);}
  100%{ transform: translate(100%,0);}
}




.slideWrapper{ overflow: hidden; width:100%; height:300px; position:relative;}
.sliderInner{ width:9999px; text-align:center; position: absolute; top:0; left:50%; transform: translate(-50%,0);}
#recommendList > li{ display:inline-block;  width:320px;  padding:0 10px; position:relative; vertical-align: top;}
#recommendList > li > div{padding:2rem 0 4rem; background:#efefef;}
#recommendList > li > div span{ display: block; font-size:0.6rem; margin-top:10px;}

.indexTitle{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; font-size:1.8rem; color:#524D4D;}

.seedIllustBox{ margin:4rem auto;}
.seedIllustBox svg{ height:5rem; width:auto;}

#seedLine1{ opacity:0;}
#seedLine2{ opacity:0;}
#seedLine3{ opacity:0;}
#seedLine4{ opacity:0;}
#seedLine5{ opacity:0;}

.seedIllustBox.on #seedLine1{ animation:seedLineAnime .5s ease-in 0s 1 normal forwards;}
.seedIllustBox.on #seedLine2{ animation:seedLineAnime .5s ease-in 0.25s 1 normal forwards;}
.seedIllustBox.on #seedLine3{ animation:seedLineAnime .5s ease-in 0.5s 1 normal forwards;}
.seedIllustBox.on #seedLine4{ animation:seedLineAnime .5s ease-in 0.75s 1 normal forwards;}
.seedIllustBox.on #seedLine5{ animation:seedLineAnime .5s ease-in 1.0s 1 normal forwards;}

@keyframes seedLineAnime {
  0%{ opacity:0;}
  100%{ opacity:1;}
}

@media only screen and (max-width : 800px) {
  .boxWrapper{ margin:2rem auto 2rem;}
  .boxWrapper.companyWrapper{ margin:6rem auto 2rem;}

  .secTitleWrapper{padding:0 1rem;}
  .secTitle{font-size:1.0rem;}
  .secSubTitleWrapper{padding:0 1rem;}
  .secSubTitle{font-size:0.8rem;}
  .nextBtnWrapper{padding:0 1rem;}
  .indexTitle{font-size:1.2rem;}

  .secTitleWrapper.logoIcon::before{ left:10px;}

  .memberDetailFlex .secSubTitle-jp{ padding:0;}
}




.newsWrapper{max-width:960px; width:100%; margin:2rem auto; text-align:left;}
.newsWrapper > ul > li{ border-bottom:1px solid #707070; padding:1rem 0; margin:1rem 0; display:flex; justify-content:space-between; width:100%; font-size:0.8rem;}
.newsWrapper > ul > li > div.newsTime{ flex-basis:8rem;}
.newsWrapper > ul > li > div.newsText{ flex-basis:calc(100% - 8rem);}
.newsWrapper > ul > li > div.newsText a{ text-decoration: underline;}
.newsWrapper > ul > li > div.newsText a:hover{ text-decoration: none;}

.beeIllustBox{ margin:4rem auto;}
.beeIllustBox > img{ height:3rem; width:auto;}

.contactSet{ margin-top:4rem;}
.contactSet > dt{ font-weight: normal; margin-bottom:2rem;}
.contactBtn{ display:inline-block; padding:1rem 2rem; min-width:480px; background:#F1F7ED; border-radius:100px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
.contactBtn:hover{ background:hsl(96, 38%, 85%);}

.contactBtn.deco01{ position:relative;}
.contactBtn.deco01::after{ content:""; position: absolute; top:50%; right:1rem; background:url(img/icon_arrow.svg) center center no-repeat; background-size: contain; height:2rem; width:2rem; transform: translate(0,-50%);}

.footerLogWrapper{max-width:800px; width:100%; margin:2rem auto; text-align:left;}
.footerLogWrapper.logoIcon{position:relative;}
.footerLogWrapper.logoIcon::before{ content:""; position:absolute; top:-4rem; left:0; height:3.4rem; width:4rem; background:url(img/logo.svg) 0.5rem 0 no-repeat; background-size: contain;}

.officeListWrapper{ margin:4rem auto; max-width:800px; width:100%;}
.officeList{}
.officeList > li{ display:flex; justify-content:flex-start; gap:2rem; text-align: left; font-size:0.8rem; margin-top:1rem;}
.officeList > li > div.officeName{ flex-basis:10rem;}
.officeList > li > div.officeAddress{flex-basis:30rem;}
.officeList > li > div.officeMap{}
.mapBtn{ display:inline-block; padding:1rem 2rem; background:#fff; border-radius:100px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
.mapBtn:hover{ background:hsl(96, 38%, 85%);}

.footerWrapper{ margin-top:8rem;}

@media only screen and (max-width : 800px) {
  .newsWrapper{padding:0 1rem; margin:1rem 0;}
  .newsWrapper > ul > li{ flex-direction:column; padding:0 0 1rem; margin:0 0 1rem;}
  .newsWrapper > ul > li:last-child{ margin:0 0 0;}
  .newsWrapper > ul > li > div.newsTime{ flex-basis:auto;}
  .newsWrapper > ul > li > div.newsText{ flex-basis:auto;}

  .contactSet{ margin-top:2rem; padding:0 1rem;}
  .contactSet > dt{ font-size:0.8rem;}
  .contactBtn{ min-width:auto; width:100%;}

  .footerWrapper{ margin-top:6rem;}
  .footerLogWrapper{ padding:0 1rem;}
  .footerLogWrapper.logoIcon::before{ left:10px;}

  .officeListWrapper{ margin:2rem auto; padding:0 1rem;}
  .officeList > li{ flex-direction:column; gap:10px;margin-top:2rem;}
  .officeList > li > div.officeName{ flex-basis:auto;}
  .officeList > li > div.officeAddress{flex-basis:auto;}
}




#aboutIllustWrapper{ max-width:560px; margin:2rem auto; width:100%;}
.messageWrapper p{ margin:2rem auto; line-height:2; font-size:0.8rem;}

.lowerTitleLogWrapper { max-width: 960px;max-width:800px; width: 100%; margin: 2rem auto; text-align: left;}
.lowerTitleLogWrapper.logoIcon{position:relative;}
.lowerTitleLogWrapper.logoIcon::before{ content:""; position:absolute; top:-4rem; left:0; height:3.4rem; width:4rem; background:url(img/logo.svg) 0.5rem 0 no-repeat; background-size: contain;}

.lowercontentWrapper{ max-width:960px; width:100%; margin:2rem auto;}
.companyTable{ max-width:560px; width:100%; margin:0 auto; text-align: left;}
.companyTable th{ font-weight: normal; padding:10px 1rem; font-size:1rem;}
.companyTable td{ padding:10px 1rem; font-size:1rem;}
.companyTable td ul{ font-size:0.8rem;}
.companyTable td dt{ font-weight: normal;}
.companyTable td dd{ margin:0 0 1em; font-size:0.8rem;}


.worksHeaderWrapper{ margin:0 auto; max-width:800px; width:100%; position:relative; text-align:left;}
.worksSubNavList{ position: absolute; right:0; top:0; position: static; margin:1em 0 0;}
.worksSubNavList li{ display: inline-block; padding:0 1rem; font-size:0.8rem;padding:0 2em 0 0;}
.worksSubNavList li a{ line-height:1; position: relative; letter-spacing:0;}
.worksSubNavList li a::before{ content:""; position: absolute; bottom:-10px; left:0; width:calc(100% - 1rem); height:1px; background:#000; transition: all .5s;}
.worksSubNavList li a::after{ content:""; position: absolute; bottom:-10px; right:0; width:1rem; height:1px; background:#b8ce55; transition: all .5s;}
.worksSubNavList li a:hover::before{width:1rem;}
.worksSubNavList li a:hover::after{width:calc(100% - 1rem);}

.catSummary{ text-align: center; font-size:0.8rem;}

.lineTitle{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; margin:2rem auto;}
.lineTitle > span{ position:relative; display:inline-block; line-height:1;}
.lineTitle.ar > span{ text-align: right; padding-left:4rem;}
.lineTitle.ar > span::after{ content:""; position: absolute; bottom:-10px; right:0; width:100%; height:1px; background:#000;}

@media only screen and (max-width : 800px) {
  .lowerTitleLogWrapper{ padding:0 1rem;}
  .lowerTitleLogWrapper.logoIcon::before{ left:10px;}

  #aboutIllustWrapper{ padding:0 1rem;}
  .pageLinkBlock{ padding:0 1rem;}

  .companyTable th{font-size:0.8rem;}
  .companyTable td{font-size:0.8rem;}

  .worksHeaderWrapper{ padding:0 1rem;}
  .worksSubNavList{ position:static; margin:1rem 0 0;}
  .worksSubNavList li{width:50%; padding:0; margin:0 0 1rem;}
}




.worksListWrapper{ margin:3rem auto 0;}
.worksList{ text-align: left; max-width: 1280px; width:100%; margin:0 auto; opacity:0; transition: all .5s; transition-delay:.5s;}
.worksList.on{ opacity:1;}
.worksList > li{ display:inline-block; vertical-align: top; width:25%; text-align: left; padding:0 0.5rem 2rem;}

@media only screen and (max-width : 960px) {
  .worksList{ max-width: 960px;}
  .worksList{ padding:0 10px;}
  .worksList > li{ width:33.33%;padding:0 10px 20px;}
}
@media only screen and (max-width : 600px) {
  .worksList{ padding:0 5px;}
  .worksList > li{ width:50%;padding:0 5px 10px;}
}

.workInfo{ margin:10px 0 0;}
.workCat{ font-size:0.6rem;}
.workArtist{ font-size:0.8rem; font-weight: bold;}
.workTitle{ font-size:0.8rem; font-weight: bold;}
.workCredit{ font-size:0.6rem;}

@media only screen and (max-width : 800px) {
  .messageWrapper{ padding:0 1rem; text-align:left;}
  .messageWrapper p br{ display:none;}
}




.memberListHeaderWrapper{ margin:2rem auto 0; text-align: right;}
.memberListHeaderWrapper ul li{ display:inline-block; padding:0 0 0 1rem;}
.memberListHeaderWrapper ul li img{ height:4rem; width:auto; border-radius:4rem;}

@media only screen and (max-width : 800px) {

}




.memberHeaderWrapper{ margin:0 auto; max-width:800px; width:100%; text-align:left;}
.memberHeaderWrapper .secSubTitleWrapper .secSubTitle-jp{ padding:0 0 0 2rem;}
.memberHeaderWrapper .memberFlexEven .secSubTitleWrapper .secSubTitle-jp{ padding:0 2rem 0 0;}

.memberListWrapper{ margin:3rem auto 0; text-align: center;}
.memberListWrapper > ul > li{ display:inline-block; padding:0 2rem; vertical-align:top;}
.memberListWrapper > ul > li img{ height:6rem; width:auto; border-radius:6rem;}
.memberListWrapper > ul > li img:hover{filter: saturate(2);}
.memberListWrapper > ul > li span{ display:block; font-size:0.75rem; margin-top:5px; text-align: center;}

.memberListWrapper > ul.stairs{ margin-bottom:2rem;}
.memberListWrapper > ul.stairs > li:nth-child(2) { padding-top:2rem;}
.memberListWrapper > ul.stairs > li:nth-child(3) { padding-top:4rem;}
.memberListWrapper > ul.stairs > li:nth-child(4) { padding-top:6rem;}
.memberListWrapper > ul.stairs > li:nth-child(5) { padding-top:8rem;}
.memberListWrapper > ul.stairs > li:nth-child(6) { padding-top:10rem;}
.memberListWrapper > ul.stairs > li:nth-child(7) { padding-top:12rem;}
.memberListWrapper > ul.stairs > li:nth-child(8) { padding-top:14rem;}
.memberListWrapper > ul.stairs > li:nth-child(9) { padding-top:16rem;}
.memberListWrapper > ul.stairs > li:nth-child(10) { padding-top:20rem;}

.memberFlex{ display:flex; flex-wrap: wrap; justify-content:space-around; gap:2rem; align-items: flex-start;}
.memberFlexOdd{ flex-basis: calc(50% - 1rem);}
.memberFlexOdd .secSubTitleWrapper{ margin:0 auto 2rem;}
.memberFlexOdd .memberListWrapper{ text-align: left;}
.memberFlexEven{ flex-basis: calc(50% - 1rem); margin-top:4rem;}
.memberFlexEven .secSubTitleWrapper{ margin:0 auto 2rem;text-align:right;}
.memberFlexEven .memberListWrapper{ text-align: right;}

@media only screen and (max-width : 800px) {
  .memberHeaderWrapper .secSubTitleWrapper .secSubTitle-jp{ padding:0;}

  .memberListWrapper{ margin:2rem auto 0;}
  .memberListWrapper > ul > li{ padding:0 0 0 1rem;}
  .memberListWrapper > ul > li img{ height:4rem;}

  .memberListWrapper > ul.stairs{ margin-bottom:2rem; text-align: left;}
  .memberListWrapper > ul.stairs > li{ width:auto; margin:0 0 2rem;}
  .memberListWrapper > ul.stairs > li:nth-child(2) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(3) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(4) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(5) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(6) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(7) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(8) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(9) { padding-top:0;}
  .memberListWrapper > ul.stairs > li:nth-child(10) { padding-top:0;}

  .memberFlex{ display:flex; flex-direction:column; gap:2rem;}
  .memberFlexOdd{ flex-basis: auto;}
  .memberFlexEven{ flex-basis: auto; margin-top:0;}
  .memberFlexEven .secSubTitleWrapper{ text-align:left;}
  .memberFlexEven .memberListWrapper{ text-align: left;}
}



.decoTitle.recruitTitle{ font-size:1.2rem; margin: 0 auto 2rem;}
.decoTitle::before{ content:"\\\\ ";}
.decoTitle::after{ content:" //";}

.decoTitle2.recruitTitle{ font-size:1.2rem; margin: 0 auto 2rem;}
.decoTitle2::before{ content:"「 ";}
.decoTitle2::after{ content:" 」";}

.recruitLead{ line-height:3; font-size:0.8rem;}
.recruitLogoBlock{ margin:4rem auto;}
.recruitLogo img{ margin:0 auto; height:auto; width: 80px; filter: grayscale(100%)  brightness(130%); transition: all 1s;}
.recruitLogo.color img{ filter: grayscale(0%) brightness(100%);}

.recruitJobInfo{ font-size:0.8rem;}
.recruitList{ margin:2rem auto;}
.recruitList > li{ margin-bottom:0.5rem;}
.recruitList > li::before{content:"/ ";}
.recruitList > li::after{content:" /";}

.recruitApplyWrapper p{ line-height:3; font-size:0.8rem;}
.recruitApplyWrapper .pageLinkBlock{ margin:1rem auto 2rem;}

@media only screen and (max-width : 800px) {
  .decoTitle.recruitTitle{ font-size:1.0rem;}
  .decoTitle2.recruitTitle{ font-size:1.0rem;}
  .recruitLead{ padding:0 1rem;line-height:1.7;}
  .recruitLead br{ display:none;}
  .recruitApplyWrapper p{ padding:0 1rem;line-height:1.7;}
  .recruitApplyWrapper p br{ display:none;}
}




.contactFormWrapper{max-width:800px; margin:0 auto; text-align:left;}
.require::after{content:"必須"; display: inline-block; line-height: 1; padding: 0.25rem 0.5rem; background: #e26459; border-radius: 5px; color: #fff; font-size: 0.75rem; margin: 0.25rem 0 0 1rem; vertical-align: top;}

input[type=text]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
input[type=text].p-postal-code{ max-width:7em;}
input[type=text].sizeS{ max-width:320px;}
input[type=number]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:5em; width:100%;}
input[type=email]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
textarea{ border:1px solid #ccc; background:#fff; padding:0.5rem; width:100%; height:6em;}
input[type=radio],input[type=checkbox]{ display:none;}
.form-check-label{ position:relative; display:inline-block; padding:0 0 0 1.8em; cursor:pointer; line-height:1;}
.form-check-label::after{content:''; position:absolute; top:50%; left:0; display:block; line-height:1; transform: translate(0,-50%); width:16px; height:16px; border: 2px solid #333;}
.form-check-label::before { content: ""; position: absolute; top: 50%; left: 0; display: block; line-height: 1; transform: translate(0, -50%); width: 16px; height: 16px; content: ""; opacity: 0; background:#655F5F;}
input[type=radio]:checked + .form-check-label::before { opacity:1;}
input[type=radio]:checked + .form-check-label::after { border: 2px solid #655F5F;}
input[type=checkbox]:checked + .form-check-label::before { opacity:1;}
input[type=checkbox]:checked + .form-check-label::after { border: 2px solid #655F5F;}
select { appearance: none; background: none; border: none; color: #333; font-size: 1rem; width: 100%; height: 100%; padding: 0 10px;}
.selectBox{ background:#eee; height:3rem; width:100%; max-width:calc(375px - 2rem); border-radius:8px; position: relative; z-index:1;}
.selectBox::after {position: absolute;content: '';width: 8px;height: 8px;right: 10px;top: 50%;transform: translateY(-50%) rotate(45deg);border-bottom: 2px solid #333;border-right: 2px solid #333;z-index: -1;}

.formList > dt{ margin-bottom:0.5em;}
.formList > dd{ margin-bottom:02em;}

.submitWrapper > ul > li{ display:inline-block; margin:0 0.5rem 0 0;}
.contactMailAttentionTextWrapper{ font-size:0.8rem; padding:2rem 0 0;}

.submitBtn{ font-size: 1rem; display:inline-block; padding:1rem 2rem; background:#F1F7ED; border-radius:100px;box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; position:relative;}
.submitBtn:hover{ background: hsl(96, 38%, 85%);}

.submitBtn.gray{ background:#ccc;}
.submitBtn:hover.gray{ background:hsl(0, 0%, 63%);}

.beforeCheckText{ margin:0 0 2rem;}

.checkAnser{border:1px solid #ccc; min-height:1em; background:#eee; padding:0.5rem; max-width:480px; width:100%;}
.checkAnser.w100{ max-width:initial;}

.contactNoteListWrapper{ margin:2rem 0;}
.contactNoteListWrapper ul li{ list-style-type: disc; list-style-position:outside; margin:0 0 0 1.0em; font-size:0.8rem;}
.privacyText{ font-size:0.8rem; margin:0 0 2rem;}
.agreeWrapper{ padding:1rem; background-color:#efefef; margin:2rem 0;}
.agreeWrapper p{ margin-bottom:1rem;}

.sendCompWrapper{margin:0 0 4rem;}
.sendCompWrapper p{ margin:0 0 1rem;}
.sendCompWrapper p.note{ font-size:0.8rem;}
.addressBox{margin-top:10px;}

#workdescWrapper{ margin-top:10px; display:none;}
#where1descWrapper{ margin:10px 0; display:none;}
#where1descWrapper p{ font-size:0.8rem; margin:0 0 10px;}
#where2descWrapper{ margin:10px 0; display:none;}
#where2descWrapper p{ font-size:0.8rem; margin:0 0 10px;}

@media only screen and (max-width : 800px) {
  .contactFormWrapper{ padding:0 1rem;}

  .sendCompWrapper{margin:0 0 2rem;}
  .sendCompWrapper p{ font-size:0.8rem;}

  .agreeWrapper{ font-size:0.8rem;}

  .submitBtn {min-width:auto; width:100%;}
}




.memberSingleWrapper{ text-align:left;max-width:800px; margin:0 auto;}
.memberDetailFlex{ display:flex; justify-content: space-between; gap:2rem;}
.memberInfoBox{ display:inline-block; text-align: center; max-width:240px;}
.memberInfoBox > dl{ margin:2rem auto 2rem; font-size:0.8rem;}
.memberInfoBox > dl > dt{ font-weight:normal; font-size:1.2rem;}
.memberPosition{ font-size:0.8rem; margin:1rem auto; font-weight: bold;}
.memberInfoBox > ul{margin:0 auto 2rem; font-size:0.8rem;}
.memberInfoBox img{ border-radius:240px;}

.commentList > li > dl{ display:flex; justify-content:flex-start; align-items: center; gap:2rem;}
.commentList > li > dl > dt{ flex-basis:180px;}
.commentList > li > dl > dt img{ border-radius:180px;}
.commentList > li > dl > dd > div{ background-color:#EBF1E7; padding:1em; position: relative; font-size:0.8rem;}
.commentList > li > dl > dd > div::after{ content:"";position:absolute; top:50%; left:-1.0rem; width:0; height:0; border-style: solid; border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; border-right: 1rem solid #EBF1E7; border-left: 0; transform: translate(0,-50%);} 

@media only screen and (max-width : 800px) {
  .memberDetailFlex{ gap:0; flex-direction: column;}
  .memberInfoBox{ display:inline-block; text-align: center; max-width:none; width:100%;}
  .memberInfoBox > img{width:140px; height:auto;}
  .memberInfoBox > dl{ margin:2rem auto 0;}
  .memberInfoBox > dl > dt{ font-size:1.0rem;}
  .memberInfoBox > ul{margin:0 auto;}


  .commentList > li > dl{ flex-direction:column; padding:0 1rem;}

  .commentList > li > dl > dt{ flex-basis:auto; text-align:left; width:100%;}
  .commentList > li > dl > dt img{ height:4rem;width:auto;}
  .commentList > li > dl > dd > div br{ display:none;}
  .commentList > li > dl > dd > div::after{ top:-1rem; left:1.0rem; transform: translate(0,0);
    border-top: 0;
    border-bottom: 1rem solid #EBF1E7;
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;


  }
}





.pagenationWrapper{position:relative; max-width:1000px; margin:4rem auto 0; text-align:center; font-size:0.8rem;}
.pagenation a{ display:inline-block; box-sizing:border-box; vertical-align:top; width:40px; height:40px; border:1px solid #333; line-height:38px; overflow:hidden; color:#333; text-decoration:none; background:#fff; margin-top:1rem;}
.pagenation a:hover{ background:#000; color:#b8cf55;}
.pagenation span{ display:inline-block; box-sizing:border-box; vertical-align:top; width:40px; height:40px; border:1px solid #333; background:#000; color:#b8cf55; line-height:38px; margin-top:1rem;}
.pagenation span.dotdotdot{ background:transparent; color:#666; border:none;}

.pagenation a.nextPaginationBtn{ position:relative; background:#eee; color:#666;}
.pagenation a.nextPaginationBtn:after{ content:""; position:absolute; top:20px; right:20px; display:block; width:5px; height:5px; border:1px solid; border-color: #b8cf55 #b8cf55 transparent transparent; transform: translate(2px, -4px) rotate(45deg); -webkit-transform: translate(2px, -4px) rotate(45deg);}
.pagenation a.nextPaginationBtn:hover{ background:#000;}

.pagenation a.backPaginationBtn{ position:relative; background:#eee; color:#666;}
.pagenation a.backPaginationBtn:after{ content:""; position:absolute; top:20px; left:20px; display:block; width:5px; height:5px; border:1px solid; border-color: transparent transparent #b8cf55 #b8cf55; transform: translate(-3px, -4px) rotate(45deg); -webkit-transform: translate(-3px, -4px) rotate(45deg);}
.pagenation a.backPaginationBtn:hover{ background:#000;}

@media only screen and (max-width : 800px) {}



.singleWrapper{max-width:800px; margin:0 auto 2rem; text-align: left;}
.singleWrapper > h2{ font-weight:bold; margin-bottom:2rem;}

.singleInner{ font-size:0.8rem;}
.singleInner p{ margin-top:1rem;}
.singleInner img{ margin-top:1rem;}
.singleInner a{ text-decoration: underline;}
.singleInner a:hover{ text-decoration:none;}

@media only screen and (max-width : 800px) {
  .singleWrapper > h2{ font-size:0.8rem;margin-bottom:1rem;}
  .singleWrapper{padding:0 1rem;}
}



.privacyWrapper{ max-width:800px; margin:0 auto 2rem; text-align: left; font-size:0.8rem;}
.privacyWrapper p{ margin:0 0 2rem;}

.liveYearWrapper{ max-width:1000px; margin:0 auto 2rem;}
.liveYearWrapper > table{ width:100%;}
.liveYearWrapper > table th{ font-weight: normal; width:4em;font-size:0.8rem; padding:0 2rem; border-right:1px solid #707070;}
.liveYearWrapper > table td{ text-align: left; font-size:0.8rem; padding:0 2rem;}
.liveYearList > li{ margin-bottom:1em;}
.liveYearList > li:last-child{ margin-bottom:0;}

.liveYearList > li > dl{ display:table; width: 100%;}
.liveYearList > li > dl > dt{ display:table-cell; width: 25%;}
.liveYearList > li > dl > dd{ display:table-cell; width: 75%;}
.liveYearList > li > div{ font-weight:bold;}

@media only screen and (max-width : 800px) {
  .privacyWrapper{padding:0 1rem;}
  .privacyWrapper p{ margin:0 0 1rem;}

  .liveYearWrapper > table th{ padding:0 1rem;}
  .liveYearWrapper > table td{ padding:0 1rem;}
  .liveYearList > li > dl{ display:block;}
  .liveYearList > li > dl > dt{ display:block; width: 100%;}
  .liveYearList > li > dl > dd{ display:block; width: 100%;}
}



.mediaWorksBlockWrapper{ max-width:680px; margin:0 auto 2rem;}
.mediaWorksBlockWrapper > table{ width:100%; margin-bottom:1em;}
.mediaWorksBlockWrapper > table th{ font-weight: normal; width:4em;font-size:0.8rem; padding:0 2rem;}
.mediaWorksBlockWrapper > table td{ text-align: left; font-size:0.8rem; padding:0 2rem 1rem; position:relative;}
.mediaWorksBlockWrapper > table td::after{ content:""; position:absolute; top:0; left:0; height:calc(100% - 2rem); width:1px; background:#707070;}
.mediaWorksBlockWrapper > table td ul li{ margin-bottom:1em;}

@media only screen and (max-width : 800px) {
  .mediaWorksBlockWrapper > table th{ padding:0 1rem;}
  .mediaWorksBlockWrapper > table td{ padding:0 1rem;}
}