@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:24px; height:21px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:1px; background-color:#666;}
.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; line-height:1.7; color:#333; letter-spacing:0.1em; background: #fff;
font-family: "Sawarabi Gothic";}
/* font読み込み後に表示 
html #cover{
    visibility: hidden;
}
html.wf-active #cover, html.wfno-load #cover{
    visibility: visible;
}
*/
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;}
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;}

.mincho{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.centuryGothic{font-family:century-gothic, sans-serif; font-weight:bold;}

.mt1rem{ margin-top:1rem;}
.mt2rem{ margin-top:2rem;}
.mt4rem{ margin-top:4rem;}
.mt8rem{ margin-top:8rem;}

.mb1rem{ margin-bottom:1rem;}
.mb2rem{ margin-bottom:2rem;}
.mb4rem{ margin-bottom:4rem;}
.mb8rem{ margin-bottom:8rem;}

.pt1rem{ padding-top:1rem;}
.pt2rem{ padding-top:2rem;}
.pt4rem{ padding-top:4rem;}
.pt8rem{ padding-top:8rem;}

.pb1rem{ padding-bottom:1rem;}
.pb2rem{ padding-bottom:2rem;}
.pb4rem{ padding-bottom:4rem;}
.pb8rem{ padding-bottom:8rem;}


#loading{ position:fixed; top:0; left:0; width:100%; height:100vh; z-index:12000;}
#loading::before{ content:""; position:absolute; top:0 ;left:0; width:100%; height:100%; background:#fff;}

#headerWrapper{ position:absolute; top:0; left:0; width:100%; z-index:9998;}
#headerInner{ max-width:calc(960px + 2rem); max-width:none; width:100%; margin:0 auto; padding:4rem 1rem 2rem; text-align:left; position:relative;}
#headerInner div.hLogo{ position: absolute; top:7rem; left:40%; transform: translate(-50%,0);}
#headerInner div.hLogo h1 img{ width:auto; height:1.8rem;}
#headerInner div.hLogo p{ color:#fff;writing-mode: vertical-rl; font-size:0.8rem; position: absolute; top:calc(1.8rem + 2rem); left:50%; height:180px; transform: translate(-50%,0);}

#headerLowerWrapper{ position:absolute; top:0; left:0; width:100%; z-index:99999;}
#headerLowerInner{ max-width:calc(960px + 2rem); width:100%; margin:0 auto; padding:2rem 1rem 2rem; text-align:left; position:relative;}
#headerLowerInner h1 img{ width:auto; height:1.8rem;}


#gNav{ position: absolute; top:100%; left:50%; padding-bottom:1rem; overflow: hidden;}
/*#gNav::before{ content:""; position: absolute; top:0; left:0; height:100%; width:1px; background: #fff;animation: lineLoopAnime 3.5s linear 0s infinite normal backwards;}
#gNav::after{ content:""; position: absolute; top:0; left:0; height:100%; width:1px; background: rgba(255, 255, 255, .5);}

@keyframes lineLoopAnime {
  0%{ transform: translate(0,-100%);}
  100%{ transform: translate(0,100%);}
}
*/
#gNav > li{ display:block; padding:1rem 0 0 2rem;}
#gNav > li a{font-family: avenir-lt-pro, sans-serif;font-weight: 700;font-style: normal; letter-spacing:0; color:#fff; font-size:0.8rem; line-height:1;}
#gNav > li span{font-family: avenir-lt-pro, sans-serif;font-weight: 700;font-style: normal; letter-spacing:0; color:#fff; font-size:0.8rem; line-height:1; opacity:0.5;}
#gNav > li > ul > li a{ font-size:1.0rem;}
#gNav > li > ul > li::before{ content:"┗ "; color: #fff;}
#gNav > li a:hover{opacity:0.5;}

#gNav.bkNav{top:50%; left:auto; padding:0; right:1rem; transform:translate(0,-50%); overflow:visible;}
#gNav.bkNav > li{display:inline-block;}
#gNav.bkNav > li a{ color:#969696;position:relative;display:inline-block;}
#gNav.bkNav > li span{ color: #969696; cursor: pointer; opacity:1;}
#gNav.bkNav > li > ul{ position:absolute; top:3rem; left:1rem;}
#gNav.bkNav > li > ul > li::before{ color:#333;}

#gNav.bkNav::before{ content:none;}
#gNav.bkNav::after{ content:none;}

#gNav.bkNav > li a:hover{animation: navJumpAnime .5s linear 0s 1 normal backwards;}

@keyframes navJumpAnime {
  0%{ transform: translate(0,0);}
  50%{ transform: translate(0,-0.2rem);}
  100%{ transform: translate(0,0);}
}

@media only screen and (max-width : 800px) {
  #gNav.bkNav{ display:none;}
  #headerLowerInner{ padding:1rem 1rem 1rem;}
  #headerLowerInner h1{}
  #headerLowerInner h1 img{ height:1.4rem;}
}
/*
#mainWrapper{ background:url(img/main01__pc.jpg) center center no-repeat; background-size:auto 100%; height:680px; position:relative;}
#mainInner{ position:absolute; bottom:0; left:50%; transform: translate(-50%,0); color:#fff; text-align:left; max-width:calc(960px + 2rem); width:100%; margin:0 auto; padding:2rem 1rem 2rem;}
*/




#mainWrapper{ width:100%;}
#mainInner{ position:relative; overflow: hidden; max-height:720px; max-width: 1440px; margin:0 auto;}

#mainInner > ul > li:not(:last-child){ display:none; position:absolute; top:0; left:0;}
#mainInner > ul > li:last-child{ display:block; position:relative; z-index:9980;}

#mainInner > ul > li > img{ filter: blur(7px); transform: scale(1.1); transform-origin: center center; opacity:1;}
#mainInner > ul > li > img.mainFadeInStart{animation: mainFadeInAnime 7s linear 0s 1 normal backwards;}

@keyframes mainFadeInAnime {
  0%{ filter: blur(7px); transform: scale(1.1); opacity:1;}
  10%{ filter: blur(0);}
  90%{ opacity:1;}
  100%{ filter: blur(0); transform: scale(1); opacity:0;}
}

#mainCatch{ position:absolute; left:50%; top:50%; z-index:9997;  transform: translate(-50%,-50%);}
#mainCopy-en{ line-height:1;font-family:"brandon-grotesque", sans-serif;font-weight: 100;font-style: normal; font-size:1.4rem; margin-bottom:0; color:#fff;}
#mainCopy-jp{ font-size:1rem;}
#mainCopy-jp img{ width:4rem; height:auto;}

#mainLead{ margin:2rem auto;}
#mainLead h2{font-family:"brandon-grotesque", sans-serif;font-weight: 100;font-style: normal; font-size:2.4rem; letter-spacing:0; position:relative; display: inline-block; padding:0 1rem; white-space:nowrap;}
#mainLead h2::before{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); left:0; height:1em; width:1px; background:#666;}
#mainLead h2::after{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); right:0; height:1em; width:1px; background:#666;}

@media only screen and (max-width : 800px) {
  #headerInner{ height:auto; padding:1rem 1rem 1rem;}
  #headerInner div.hLogo{ top:2rem; left:20%;}
  #headerInner div.hLogo p{ top:calc(1.4rem + 2rem);}
  #headerInner div.hLogo h1 img{ height:1.4rem;}
  #gNav{ display:none; padding-bottom:0;}
  #gNav.spOn{ display:block; top:2rem; left:40%;}
  #gNav > li a{ font-size:0.8rem;}
  #gNav > li > ul > li a{ font-size:0.8rem;}

  #gNav > li:nth-child(1){ padding:0 0 0 1rem;}
/*
  #mainWrapper{ background:url(img/main01__sp.jpg) center center no-repeat; height:240px; background-size:auto 100%;}*/

  #mainInner{ height:auto;}
  #mainCatch{ top:50%; left:50%; transform: translate(-50%,-50%);}
  #mainCopy-en{ font-size:1.2rem;}
  #mainCopy-jp{ font-size:0.8rem;}
  #mainCopy-jp img{ width:2.8rem;}

  #mainLead{ margin:2rem auto;}
  #mainLead h2{ font-size:1.4rem;}
  #mainLead p{ font-size:0.8rem;}
}


.flex{ display:flex; justify-content: space-between;}
.flex.gap4{gap:4rem;}
.flex.aic{align-items: center;}

.pointIllust{ flex-basis:40%; text-align: center;}
.pointBox{ padding:0 2rem;}
.pointBox img{}

#point01{ width:100px; height:auto;}
#point02{ width:140px; height:auto;}
#point03{ width:160px; height:auto;}

.pointContent{ flex-basis:60%;}
.pointContent > dl > dt{font-family:"brandon-grotesque", sans-serif;font-weight: 100;font-style: normal; font-size:1.8rem; letter-spacing:0; margin-bottom:1rem;}
.pointContent > dl > dd{font-size:0.8rem;}
.pointContent > dl > dd strong{ font-weight:normal; display:inline-block; font-size:1.4em; animation:sizeUp 3s ease-in calc(var(--index) * .5s) infinite normal forwards;}

.coreContentWrapper{max-width:calc(960px + 2rem); width:100%; margin:4rem auto 4rem; padding:0 1rem;}
.coreContentWrapper > ul > li{ margin:4rem 0 0; padding-bottom:2rem; position:relative;}
.coreContentWrapper > ul > li::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#ccc;}
.coreContentWrapper > ul > li:last-child{ padding-bottom:0;}
.coreContentWrapper > ul > li:last-child::after{ content:none;}

.handBtnWrapper{ text-align: right; margin:4rem auto 0}
.handBtnWrapper a{ display:inline-block; padding:0 6rem 6rem 0; position:relative;}
.handBtnWrapper a.serviceBtn{ padding:0 0 7rem 0;}

.handBtnWrapper a span{/*font-family:"brandon-grotesque", sans-serif;*/font-weight: 100; font-size:1.0rem; display:inline-block; padding:0 1rem; position:relative;}
.handBtnWrapper a span::before{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); left:0; height:1em; width:1px; background:#666;}
.handBtnWrapper a span::after{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); right:0; height:1em; width:1px; background:#666;}
.handBtnWrapper a::after{ content:""; position:absolute; bottom:0; right:0; height: 8rem; width:5rem;background:url(img/hands2.svg) right bottom no-repeat; background-size:contain; transition: all .5s;}
.handBtnWrapper a:hover::after{ bottom:1rem; right:1rem;}

.handBtnWrapper a.serviceBtn span.border{/*font-family:"brandon-grotesque", sans-serif;*/font-weight: 100; font-size:1.0rem; display:inline-block; padding:0.2rem 1rem; position:relative; background:#000; color:#fff;}
.handBtnWrapper a.serviceBtn:hover span.border{ opacity:0.7;}
.handBtnWrapper a.serviceBtn span.border::before{content:none;}
.handBtnWrapper a.serviceBtn span.border::after{content:none;}

.nextSign{ height:1rem; width:auto;}

.handBtnWrapper.ac{text-align: center;}
.handBtnWrapper a span.food{display:inline-block; padding:0;}
.handBtnWrapper a span.food img{ width:280px; height:auto;}
.handBtnWrapper a span.food::before{content:none;}
.handBtnWrapper a span.food::after{content:none;}

.handSimpleBtnWrapper a{ display:inline-block; padding:0; position:relative; background:#000;}
.handSimpleBtnWrapper a::after{ content:""; position:absolute; bottom:-4rem; right:0; height: 8rem; width:5rem;background:url(img/hands_white.svg) right bottom no-repeat; background-size:contain;transform: translate(0,0); transition: all .5s;}
.handSimpleBtnWrapper a:hover::after{ transform: translate(-0.5rem,-0.5rem);}
.handSimpleBtnWrapper a img{ transition: all .5s;}
.handSimpleBtnWrapper a:hover img{ opacity:0.5;}

@keyframes sizeUp{
  0%{ transform:scale(1.0);}
  80%{ transform:scale(1.0);}
  90%{ transform:scale(1.2);}
  100%{ transform:scale(1.0);}
}

@keyframes swing{
  0%{ transform:translate(0,0) scale(1);}
  50%{ transform:translate(-0.5rem,-0.5rem) scale(1);}
  100%{ transform:translate(0,0) scale(1);}
}

@media only screen and (max-width : 800px) {
  .flex{flex-direction:column;gap:1rem;}
  .coreContentWrapper{margin:4rem auto 4rem;}
  .coreContentWrapper > ul > li{ margin:2rem 0 0;}

  .pointIllust{ flex-basis:auto;}
  .pointContent{ flex-basis:auto;}
  .pointContent > dl > dt{ font-size:1.4rem;}

  .handBtnWrapper.ac{ margin:2rem auto 0}
  .handBtnWrapper a span{font-size:1.0rem;}
  .handBtnWrapper a span.food img{ width:190px;}
}



.worksWrapper{ padding:4rem 0; background:#d0cac0;}
.worksList{ display:flex; flex-wrap: wrap; max-width:1440px; width:100%; margin:2rem auto; align-items: flex-start;}
.worksList > li{ width:33.33%; padding:0 0.5rem 2rem;}
.worksList > li h2{ margin:10px 0 0; text-align: left; font-size:0.8rem;}
.worksList > li h2 span{ padding-right:1em;}
.worksDetailParts{margin:0;font-size:0.8rem;text-align: left;}
.worksDetailParts a{ text-decoration: underline;}
.worksDetailParts a:hover{ text-decoration: none;}

.workGenre{ text-align: left; margin:10px 0 0;}
.workGenre span{ display:inline-block; padding:0.25rem 0.5rem; border:1px solid #333; font-size:0.8rem; letter-spacing:0;}

.secTitle{ overflow: hidden; max-width:960px; margin:0 auto; text-align: left;}
.secTitle.ac{ margin-left:auto; margin-right: auto;}
.secTitle span{font-family:"brandon-grotesque", sans-serif;font-weight: 100; font-size: 2.4rem; letter-spacing: 0; position:relative; display:inline-block; padding:0 2rem;}
.secTitle span::before{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); left:100%; height:1px; width:800px; background:#666;}
.secTitle span::after{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); right:100%; height:1px; width:800px; background:#666;}

.moreBtnWrapper a{ display:inline-block; background:#fff; padding:1rem 1rem; min-width:320px; border-radius:100px; font-size:1rem; line-height:1;}



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

  .worksList{ padding:0 4px;}
  .worksList > li{ width:50%; padding:0 1px 2rem;}
  .worksList > li h2 span{ padding-right:0; display:block;}

  .secTitle span{font-size:1.4rem;white-space: nowrap; padding:0 2rem 0 0;}
  .moreBtnWrapper a{font-size:0.8rem;}

  .worksDetailParts{ display:none;}
}



.aboutusWrapper{max-width:calc(960px + 2rem); width:100%; margin:0 auto; padding:4rem 1rem;}
.aboutusObjWrapper{ width:240px; margin:0 auto; height:280px; position:relative;}
#aboutusObj01{ position: absolute; width:1rem; height:12rem; background:rgba(161, 195, 201,0.6); bottom:0; left:25%; transform:rotate(25deg);transform-origin: top left; animation:rotate01 3s ease-in-out 0s infinite normal forwards;}
#aboutusObj02{ position: absolute; width:1rem; height:16rem; background:rgba(215, 218, 221,0.6); bottom:1rem; left:25%; transform:rotate(-25deg);transform-origin: top right; animation:rotate02 3s ease-in-out 0s infinite normal forwards;}
#aboutusObj03{ position: absolute; width:1rem; height:6rem; background:rgba(207, 190, 197,0.6); bottom:0; left:55%; transform:rotate(75deg);transform-origin: top right; animation:rotate03 3s ease-in-out 0s infinite normal forwards;}

@keyframes rotate01{
  0%{ transform:rotate(25deg);}
  50%{ transform:rotate(-25deg);}
  100%{ transform:rotate(25deg);}
}

@keyframes rotate02{
  0%{ transform:rotate(-25deg);}
  50%{ transform:rotate(25deg);}
  100%{ transform:rotate(-25deg);}
}

@keyframes rotate03{
  0%{ transform:rotate(75deg);}
  50%{ transform:rotate(45deg);}
  100%{ transform:rotate(75deg);}
}

.companyWrapper{max-width:calc(960px + 2rem); width:100%; margin:0 auto; padding:8rem 1rem 0;}
.companyInner{ margin:2rem auto 0; padding:0 1rem; position:relative; display:inline-block; width:100%;}


.companyInner h2{ font-weight: bold; font-size:1.0rem;}
.companyService{ font-size:0.8rem; margin:10px auto 1rem;}
.companyMember{ font-size:0.8rem; margin:0 auto 1rem;}
.companyOffice{ font-size:0.8rem;}
.companyGmap{ margin-top:10px;}
.companyGmap img{ height:4rem; width:auto;}

.contactBtnWrapper{ margin:4rem auto 0;}
.contactBtnWrapper p{ font-size:0.8rem;}
.contactBtnWrapper a{ display: block; max-width:320px; width:100%; border: 1px solid #333; padding:1rem 0; margin:10px auto 0;}

.ourSiteList{ margin:8rem auto;}
.ourSiteList > li{ display:inline-block; padding:0 2rem;}
.ourSiteList > li img{ height:240px; width:auto;}

#popupNav{ position: fixed; top:0; left:0; width:100%; height:100vh; z-index:10000; background:#fff; transform: translate(101%,0); transition: all .5s;}
#popupNav.on{ transform: translate(0,0);}
#popupNav h1 img{ height:1.6rem; width:auto;}

.popupNavInner{ padding:4rem 1rem 4rem; overflow: auto; height:100%;}
.popupNavInner svg{ height:calc(100vh - 8rem); width:auto; min-height:600px;}

#fNav{ margin:4rem auto 0;}
#fNav > li{ display:block; padding:0 0 2rem;}
#fNav > li a{font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal; letter-spacing:0; color:#000; font-size:1rem; line-height:1; display:inline-block; position: relative;}
/*
#fNav > li a::before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  margin-right: 6px;
  vertical-align: middle;
}
*/
#fNav > li span{ font-weight: bold; margin:0 auto 1em; opacity:1; display: block; font-size:0.8rem; color:#000; letter-spacing:0;}



#hamburger{ display:none;position: fixed; top:0; right:0; padding:10px 10px 4px; z-index:99999;}
#hamburger.dispHamberger{display:block;}

.footerLogoWrapper{ background:url(img/opening__sp.jpg) center center no-repeat; background-size:cover; padding:8rem 0;}

.footerByebye{ position:relative; padding:0 5rem; display:inline-block;}
.footerByebye::before{ content:""; position:absolute; bottom:0; left:0; height: 8rem; width:5rem; background:url(img/hands3.svg) 0 0 no-repeat; background-size:contain; transform-origin: right bottom; animation:rotate04 1s ease-in-out 0s infinite normal forwards;}

@keyframes rotate04{
  0%{ transform:rotate(0deg);}
  50%{ transform:rotate(-10deg);}
  100%{ transform:rotate(0deg);}
}

.footerLogoWrapper dl dt{ margin-bottom:10px;}
.footerLogoWrapper dl dt img{ height:1.8rem;}
.footerLogoWrapper dl dd{ font-size:1rem; font-weight: bold;font-family: century-gothic, sans-serif; font-weight: bold; letter-spacing:0; color:#000;}


.companyHero{ margin:1rem auto 0; width:100%;}
.companyHero > div{ display:flex; justify-content:space-between; gap:1px;}

.companyInfoWrapper dl {display: flex; align-items:flex-start; margin:0.5rem auto; width:100%;}
.companyInfoWrapper dt {font-weight: bold; border-right: 1px solid #ccc; white-space: nowrap; flex-basis:35%; text-align: right; padding:0 1rem 0 0;}
.companyInfoWrapper dd {flex-basis:65%; text-align: left; padding:0 0 0 1rem;}
.companyInfoWrapper dd a{ display:inline-block; padding:0.95rem 0.75rem; border-radius:50px; border:1px solid #666; font-size:0.75rem; letter-spacing:0; margin-left:1em; margin-top:-1rem;}
.companyInfoWrapper dd a:hover{ background: #666; color:#fff;}

.indexAboutus{ max-width:860px; text-align: left; margin:2rem auto 0; font-size:1rem;}

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

  .companyHero{ margin:1rem auto 0;}
  .companyInfoWrapper dl {font-size:0.8rem;}
  .companyInfoWrapper dt {flex-basis:25%; padding:0 1em 0 0;}
  .companyInfoWrapper dd {flex-basis:75%;padding:0 0 0 1em;}
  .companyInfoWrapper dd a{margin-top:0;}
  .companyInfoWrapper dd span{ display:block; text-align: right;}

  .ourSiteList{ margin:2rem auto 2rem;}
  .ourSiteList > li{ display:block; padding:2rem 0 0;}
  .ourSiteList > li img{ height:160px;}

  .footerByebye{ padding:0 3rem;}
  .footerByebye::before{ height: 5rem; width:3rem;}

  .footerLogoWrapper{ padding:4rem 0;}
  .footerLogoWrapper dl dt img{ height:1.4rem;}
  .footerLogoWrapper dl dd{ font-size:0.8rem;}

  #popupNav{ display:block; }
  #hamburger{ display:block;}
  #hamburger.spOff{ display:none;}
  #hamburger.dispHamberger{display:block;}

  .popupNavInner svg{ height:auto; width:calc(100% - 2rem); max-width:420px; min-height:auto;}

  .indexAboutus{ margin:1rem auto 0; font-size:0.8rem;}
}



.lowerMainWrapper{ padding:8rem 0 4rem;}

.lowerMainWrapper h2{ margin:0 auto 2rem;}
.lowerMainWrapper h2 dt{font-family:"brandon-grotesque", sans-serif;font-weight: 100;font-style: normal; font-size:2.4rem; letter-spacing:0; position:relative; display: inline-block; padding:0 1rem;}
.lowerMainWrapper h2 dt::before{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); left:0; height:1em; width:1px; background:#666;}
.lowerMainWrapper h2 dt::after{content:""; display:block; position:absolute; top:50%; transform: translate(0,-50%); right:0; height:1em; width:1px; background:#666;}
.lowerMainWrapper h2 dd{ font-size:1.0rem;}

.servicePic1 img{ width:360px; height:auto;}
.pageTitle{ font-size:1.4rem; margin:4rem auto 0;}

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

  .lowerMainWrapper{ padding:4rem 0 4rem;}

  .lowerMainWrapper h2 dt{ font-size:1.4rem;}
  .servicePic1 img{ width:240px;}
  .pageTitle{ font-size:1.0rem; margin:4rem auto 0;}
  .lowerMainWrapper h2 dd{ font-size:0.8rem;}
}



.defaultContentWrapper{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-left:auto; margin-right:auto;}
.defaultContentWrapper.devWrapper{ padding:2rem 0 4rem;}
.defaultContentWrapper.pcIconWrapper{ padding:0 0 4rem; text-align: center;}
.defaultContentWrapper.pcIconWrapper img{width:360px;}

.hansTitle{ display:block; position:relative; padding:2rem 0 1rem 5rem; font-size:1.4rem;}
.hansTitle::before{ content:""; position:absolute; bottom:0; left:0; height: 8rem; width:5rem; background:url(img/hands3.svg) 0 0 no-repeat; background-size:contain; transform-origin: right bottom; animation:rotate04 1s ease-in-out calc(var(--index) * .5s) infinite normal forwards;}

.secSubTitle{ font-weight:bold;}

.serviceListWrapper{ padding:2rem 0;
  background:linear-gradient(45deg, #d4fc79,#96e6a1),#d4fc79;/*グラデーションを定義*/
  background-size: 200% 200%;
  animation: bggradient 5s linear infinite;  
}

.service01Wrapper{padding:2rem 0; background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee); background-size: 200% 200%; animation: bggradient 5s linear infinite;}

.service02Wrapper{padding:3rem 0; background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee); background-size: 200% 200%; animation: bggradient 5s linear infinite;}
.service02Inner{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-left:auto; margin-right:auto;}
.service02Inner h3{ font-size:1.2rem; font-weight: bold; position:relative; padding:0 0 0 4rem; display: inline-block;}
.service02Inner h3::before{ content:""; position: absolute; height:2rem; width:2rem; background:url(img/fukidashi3.svg) center center no-repeat; background-size: contain; top:50%; left:0; transform: translate(0,-50%);}
.service02Content p{ margin:1rem 0 0;}

.service03Wrapper{padding:3rem 0; background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee); background-size: 200% 200%; animation: bggradient 5s linear infinite;}
.service03Inner{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-left:auto; margin-right:auto;}
.service03Inner h3{ font-size:1.2rem; font-weight: bold; position:relative; padding:0 0 0 4rem; display: inline-block;}
.service03Inner h3::before{ content:""; position: absolute; height:2rem; width:2rem; background:url(img/fukidashi3.svg) center center no-repeat; background-size: contain; top:50%; left:0; transform: translate(0,-50%);}
.service03Content p{ margin:1rem 0 0;}

.service04Wrapper{padding:3rem 0; background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee); background-size: 200% 200%; animation: bggradient 5s linear infinite;}
.service04Inner{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-left:auto; margin-right:auto;}
.service04Inner h3{ font-size:1.2rem; font-weight: bold; position:relative; padding:0 0 0 4rem; display: inline-block;}
.service04Inner h3::before{ content:""; position: absolute; height:2rem; width:2rem; background:url(img/fukidashi3.svg) center center no-repeat; background-size: contain; top:50%; left:0; transform: translate(0,-50%);}
.service04Content{ margin-bottom:8rem;}
.service04Content p{ margin:1rem 0 0;}

.service05Wrapper{padding:3rem 0; background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee); background-size: 200% 200%; animation: bggradient 5s linear infinite;}
.service05Inner{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-left:auto; margin-right:auto;}
.service05Inner h3{ font-size:1.2rem; font-weight: bold; position:relative; padding:0 0 0 4rem; display: inline-block;}
.service05Inner h3::before{ content:""; position: absolute; height:2rem; width:2rem; background:url(img/fukidashi3.svg) center center no-repeat; background-size: contain; top:50%; left:0; transform: translate(0,-50%);}
.service05Content{ margin-bottom:8rem;}
.service05Content p{ margin:1rem 0 0;}

@keyframes bggradient{
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

.serviceList{ display:flex; justify-content: space-between; align-items: stretch; gap:1rem; margin:1rem auto; max-width:calc(960px + 2rem); width:100%;}
.serviceList > li{ width:100%; background:#fff;border:1px solid #707070; padding:1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center; position: relative; overflow: hidden;
}
.serviceList > li span{ text-align: center; line-height:1; display:block;  font-size:0.8rem; }

.serviceList.color01 > li::before{ content:""; position: absolute; top:-2em; left:-2em; height:3em; width:3em; background:rgba(161, 195, 201,0.6); transform: rotate(45deg);}
.serviceList.color02 > li::before{ content:""; position: absolute; top:-2em; left:-2em; height:3em; width:3em; background:rgba(215, 218, 221,0.6); transform: rotate(45deg);}
.serviceList.color03 > li::before{ content:""; position: absolute; top:-2em; left:-2em; height:3em; width:3em; background:rgba(207, 190, 197,0.6); transform: rotate(45deg);}

.serviceList.color01 > li::after{ content:""; position: absolute; bottom:-2em; right:-2em; height:3em; width:3em; background:rgba(215, 218, 221,0.6); transform: rotate(45deg);}
.serviceList.color02 > li::after{ content:""; position: absolute; bottom:-2em; right:-2em; height:3em; width:3em; background:rgba(207, 190, 197,0.6); transform: rotate(45deg);}
.serviceList.color03 > li::after{ content:""; position: absolute; bottom:-2em; right:-2em; height:3em; width:3em; background:rgba(161, 195, 201,0.6); transform: rotate(45deg);}

.flowListWrapper{ margin:1rem 0;}
.flowList > li{ display:inline-block;}
.flowList > li::after{ content:"　→…→　";}
.flowList > li:last-child::after{content:none;}

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

  .hansTitle{ padding:1rem 0 1rem 3.0rem; font-size:1.0rem;}
  .hansTitle br{ display:none;}
  .hansTitle::before{ height:5rem; width:3rem; left:0;}

  .defaultContentWrapper.pcIconWrapper img{width:280px;}

  .serviceList{ gap:10px; padding:0 10px;}
  .serviceList > li{ padding:10px 10px 8px;}
  .serviceList > li span{line-height:1.2;}

  .service01Wrapper{padding:1rem 0;}

  .service02Wrapper{padding:1rem 0;}
  .service02Inner h3{ font-size:1.0rem; padding:0 1rem 0 3rem;}
  .service02Inner h3::before{ left:1rem; height:1rem; width:1rem;}
  .service02Content p{ font-size:0.8rem; margin:1em 0 0;}

  .service03Wrapper{padding:1rem 0;}
  .service03Inner h3{ font-size:1.0rem; padding:0 1rem 0 3rem;}
  .service03Inner h3::before{ left:1rem; height:1rem; width:1rem;}
  .service03Content p{ font-size:0.8rem; margin:1em 0 0;}

  .service04Wrapper{padding:1rem 0;}
  .service04Inner h3{ font-size:1.0rem; padding:0 1rem 0 3rem;}
  .service04Inner h3::before{ left:1rem; height:1rem; width:1rem;}
  .service04Content{ margin-bottom:4rem;}
  .service04Content p{ font-size:0.8rem; margin:1em 0 0;}

  .service05Wrapper{padding:1rem 0;}
  .service05Inner h3{ font-size:1.0rem; padding:0 1rem 0 3rem;}
  .service05Inner h3::before{ left:1rem; height:1rem; width:1rem;}
  .service05Content{ margin-bottom:4rem;}
  .service05Content p{ font-size:0.8rem; margin:1em 0 0;}
}

.budgetWrapper{ margin:4rem auto 0; text-align:center;}
.budgetWrapper span{ display:inline-block; border:1px solid #707070; padding:1rem 2rem; line-height:1; border-radius:100px;}

.amondObjWrapper{ max-width:320px; width:100%; margin:2rem auto; height:280px; position:relative;}
#amondObj01{ position: absolute; width:1rem; height:12rem; background:rgba(161, 195, 201,0.6); bottom:0; left:35%; transform:rotate(-65deg);transform-origin: top left; animation:rotate05 3s ease-in-out 0s infinite normal forwards;}
#amondObj02{ position: absolute; width:1rem; height:16rem; background:rgba(215, 218, 221,0.6); bottom:1rem; left:25%; transform:rotate(-10deg);transform-origin: top right; animation:rotate06 3s ease-in-out 0s infinite normal forwards;}
#amondObj03{ position: absolute; width:1rem; height:6rem; background:rgba(207, 190, 197,0.6); bottom:2rem; left:65%; transform:rotate(65deg);transform-origin: top right; animation:rotate07 3s ease-in-out 0s infinite normal forwards;}

#amondObj04{ position: absolute; width:1rem; height:12rem; background:rgba(161, 195, 201,0.6); bottom:0; left:40%; transform:rotate(25deg);transform-origin: top left; animation:rotate01 3s ease-in-out 0s infinite normal forwards;}
#amondObj05{ position: absolute; width:1rem; height:16rem; background:rgba(215, 218, 221,0.6); bottom:1rem; left:40%; transform:rotate(-25deg);transform-origin: top right; animation:rotate02 3s ease-in-out 0s infinite normal forwards;}
#amondObj06{ position: absolute; width:1rem; height:6rem; background:rgba(207, 190, 197,0.6); bottom:0; left:70%; transform:rotate(75deg);transform-origin: top right; animation:rotate03 3s ease-in-out 0s infinite normal forwards;}

@keyframes rotate05{
  0%{ transform:rotate(-65deg);}
  50%{ transform:rotate(5deg);}
  100%{ transform:rotate(-65deg);}
}

@keyframes rotate06{
  0%{ transform:rotate(-10deg);}
  50%{ transform:rotate(-35deg);}
  100%{ transform:rotate(-10deg);}
}

@keyframes rotate07{
  0%{ transform:rotate(65deg);}
  50%{ transform:rotate(45deg);}
  100%{ transform:rotate(65deg);}
}

.brandDesignWrapper{ padding:3rem 0;
background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee);
background-size: 200% 200%;
animation: bggradient 5s linear infinite;
}

.brandDesignInner{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-left:auto; margin-right:auto;}
.brandDesignInner h3{ font-size:1.2rem; font-weight: bold;}
.brandDesignInner h3::before{ content:"『";}
.brandDesignInner h3::after{ content:"』";}
.brandDesignInner p{ margin:1rem 0;}

.tableFlex{border:1px solid #707070; display:flex; justify-content: space-between; align-items:center; background:#fff; background: transparent; gap:0; padding:2rem 0; margin:2rem 0 0;}
.tableFlex > div{ text-align: center; }
.tableFlex > div.tableFlexPrimary{ flex-basis:20%; font-weight: bold;}
.tableFlex > div.tableFlexSecondary{ flex-basis:80%; text-align:left;}

.devList{ margin:2rem 0 0;}
.devList > li{display:inline-block; padding:0 1rem 0 0;}
.devList > li img{ height:2rem;}

.lowerMainLead{ margin:4rem auto 0; font-size:1.0rem; line-height:3.2;}
.lowerMainLead strong{ font-weight:normal;}
.lowerMainLead strong::before{ content:" ” ";}
.lowerMainLead strong::after{ content:" ” ";}

.greetingWrapper{ margin:4rem auto 0;}
.greetingWrapper h3{ font-weight:bold; font-size:1rem;}
.greetingWrapper p{ font-size:0.8rem; margin:1em 0 0;}

.signWrapper{margin:0 0 1rem;}
.signWrapper .nameJp{ display: block; font-size:1.0rem;}
.signWrapper .nameEn{ display: block;font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal; font-size:0.75rem;}
.signWrapper dl dt{ font-size:0.8rem; font-weight: normal;}
.signWrapper dl dd{ font-size:0.8rem;}


.profileSecTitle{ text-align: center;line-height: 1; font-size: 1.2rem; margin: 0 auto 4rem; color: #a5a5a5; font-family: avenir-lt-pro, sans-serif; font-weight: 700; font-style: normal; letter-spacing: .1em;}

.profileFlex{ display:flex; justify-content: space-between; gap:4rem; align-items:flex-start; max-width:720px; margin:4rem auto 0;}
.profilePhoto{ flex-basis:40%;}
.profileText{ flex-basis:40%; text-align: left;}
.profileText dl dt{ font-weight:bold;font-size:1rem;}
.profileText dl dd{ font-weight:bold;font-size:1rem;}

.section{font-weight:bold; margin:1rem 0; font-size:0.8rem;}
.profileBox{ text-align: left; font-size:0.8rem;}
.profileBox p{ margin-top:1em;}
.profileBox a{ text-decoration: underline;}
.profileBox a:hover{ text-decoration: none;}

.themetext{ font-size:1.0rem; text-align: center;}

@media only screen and (max-width : 800px) {
  .amondObjWrapper.spNoMt{ margin:0 auto 2rem;}
  .budgetWrapper{ margin:2rem auto 0;}
  .budgetWrapper span{ font-size:0.8rem;}

  .tableFlex{padding:1rem 0;}
  .tableFlex > div.tableFlexPrimary{ font-size:0.8rem;}
  .tableFlex > div.tableFlexSecondary{ font-size:0.8rem;}

  .devList > li img{ height:2rem;}

  .lowerMainLead{ margin:2rem auto 0; font-size:0.8rem; padding:0 1rem; line-height:1.7; text-align: left;}
  .lowerMainLead br{ display:none;}
  .greetingWrapper h3{ font-size:0.8rem;}

  .signWrapper{ margin:0;}
  .signWrapper h2{ font-size:0.8rem;}

  .profileSecTitle{ margin: 0 auto 2rem;}
  .profileFlex{ flex-direction: column; gap:2rem; align-items:flex-start; margin:4rem auto 0;}
  .profilePhoto{ flex-basis:auto; text-align: center; width:100%; order:1;}
  .profilePhoto img{ width:240px;}
  .profileText{ flex-basis:auto;order:2;}
}




.selectList{
  position: relative;
  display: block;
  width: 280px;
  border: 1px solid #ccc;
  background: #fff;
}
.selectList.sizeS{
  width: 5em;
}
  
.selectList:before {
      content: "";
      position: absolute;
      top: 50%;
      right: 10px;
      display: block;
      width: 0;
      height: 0;
      margin: -2px 0 0 0;
      border: 5px solid transparent;
      border-top: 7px solid #ccc;
}

.selectList select{
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 320px;
  border: none;
  background: transparent;
  padding:1rem;
  box-sizing:border-box;
}

.formWrapper{ max-width:640px; width:100%; text-align: left; margin:0 auto 4rem;}
.formWrapper fieldset legend{ text-align:center; margin-bottom:2rem;}
.formWrapper dl{ margin:2rem auto 2rem; color: #333;}
.formWrapper dl dt{ font-weight: normal; margin-bottom:5px;}
.formWrapper dl dt span{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;}

.formWrapper input[type=text]{ border:1px solid #ccc; width:100%; padding:0.5rem; background: #fff;}
.formWrapper input[type=email]{ border:1px solid #ccc; width:100%; padding:0.5rem; background: #fff;}
.formWrapper input[type=number]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:5em; width:100%;}
.formWrapper textarea{ border:1px solid #ccc; width:100%; padding:0.5rem; height:10em; background: #fff;}

.formWrapper input[type=radio],.formWrapper 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;}
.formWrapper input[type=radio]:checked + .form-check-label::before { opacity:1;}
.formWrapper input[type=radio]:checked + .form-check-label::after { border: 2px solid #655F5F;}
.formWrapper input[type=checkbox]:checked + .form-check-label::before { opacity:1;}
.formWrapper input[type=checkbox]:checked + .form-check-label::after { border: 2px solid #655F5F;}

.submitWrapper{ margin:1rem auto 0; text-align: center;}
.submitWrapper ul li{ display:inline-block; padding:0 1rem;}
.submitWrapper input[type=submit]{ background:#a9a9a9; color:#fff; padding:1rem 4rem; border-radius:8px;}
.submitWrapper input[type=submit]:hover{ background:hsl(0, 0%, 56%);}

.addLine{ border:1px solid #ccc; width:100%; padding:0.5rem;}
.bookNote{ font-size:0.8rem; margin-top:10px;}

.consulBlock{ margin:1em 0 1em; font-size:0.8rem; background:#f3f3f3; border-radius:8px; padding:1rem;}
.consulBlock ul{ margin-top:1em;}
.consulBlock ul li{ list-style-type: disc; list-style-position: outside; margin:0 0 0 1.2em;}

@media only screen and (max-width : 800px) {
  .formWrapper{ padding:0 1rem; margin:2rem auto;}
  .formWrapper fieldset legend{ margin-bottom:1rem;}
  .formWrapper dl{ font-size:0.8rem;}
  .submitWrapper ul li{ display:block; padding:0 0 1rem;}
  .submitWrapper input[type=submit]{ font-size:0.8rem;}
  .preCheckText{ font-size:0.8rem;}
}

.checkAnser{ background:#f3f3f3; border-radius:8px; color:#666; padding:0.5rem 1rem;}

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




.caseWrapper{ padding:8rem 0 4rem; background:#d0cac0;}
.caseWrapper .secTitle{ margin: 0 auto;}

.caseHeader{ margin:0 auto 4rem; text-align: center;}
.caseHeader h2{ font-size:1.8rem; font-weight: bold;}
.caseHeader p{ font-size:1.0rem;}

.caseContent{ max-width:1000px; width:100%; margin:4rem auto; text-align: left; background:#fff; padding:4rem;}
.caseContent h3{ font-size:1.4rem; font-weight: bold; border-left:4px solid rgba(161, 195, 201, 1); padding-left:0.5em; margin-bottom:1rem;}

.blockList > ul{ display:flex;flex-wrap: wrap; justify-content: space-between; gap:1rem; align-items:stretch; font-size:1.0rem;}
.blockList > ul > li{ background:#efefef; padding:0.5em 1em;flex: 1 1 calc(50% - 1rem); border-radius:8px;}

.caseBox{ margin-top:4rem;}
.listBox ul li{ list-style-type: disc; list-style-position: outside; margin: 0 0 0 1.2em;}

.caseFlex{ display:flex; justify-content: space-between; gap:0; margin:4rem 0 0; align-items: center;}
.caseFlex > div{ width:50%; text-align: center;}
.bflLogo{ width:180px; height:auto;}
.workTalk{ margin:4rem 0 0;}


.caseHeader-v2{ margin:0 auto 2rem; text-align: center; border-bottom:1px solid #333; padding-bottom:2rem;}
.caseHeader-v2 h2{ font-size:1.8rem; font-weight: bold; margin-top:2rem;}
.caseHeader-v2 a{ font-size:1.0rem;}

.caseBox-v2{ margin-top:4rem; border-bottom:1px solid #333; padding-bottom:4rem;}
.caseBox-v2 p{ margin:2rem 0;}

.caseFlex-v2{ display: flex; justify-content: space-between; gap:4rem; align-items: flex-start;}
.caseTitle{ flex-basis:8rem; font-weight: bold;}
.caseText{ flex-basis:calc(100% - 8rem); text-align: left;}
.caseText p{ margin:0 0 1em;}
.caseText p:last-child{ margin:0 0 0;}
.caseText table th{ padding:0 2rem 1rem 0; font-weight:normal; border-right:1px solid #333;}
.caseText table td{ padding:0 0 1rem 2rem;}

.pcOnly{}
.spOnly{ display:none;}

@media only screen and (max-width : 800px) {
  .caseWrapper{ padding:4rem 0 2rem;}
  .caseHeader{ margin:0 auto 2rem; text-align: left;}
  .caseHeader h2{ font-size:1.2rem; margin-bottom:1rem;}
  .caseHeader p{ font-size:0.8rem;}

  .caseContent{ margin:2rem auto; padding:2rem 1rem;}
  .caseContent h3{ font-size:1.0rem; border-left:2px solid rgba(161, 195, 201, 1);}

.caseHeader-v2 h2{ font-size:1.2rem; margin-bottom:0;}
.caseHeader-v2 a{ font-size:0.8rem;}

.caseFlex-v2{ flex-direction: column; gap:2rem;}
.caseTitle{ flex-basis:auto;}
.caseText{ flex-basis:auto; font-size:0.8rem;}

.caseBox-v2{ margin-top:2rem; padding-bottom:2rem;}
.caseBox-v2 p{ font-size:0.8rem;}

.caseText table th{ padding:0; display:block; border:none; font-weight: bold;}
.caseText table td{ padding:0 0 1rem; display:block;}

  .blockList > ul{ font-size:0.8rem; flex-direction: column;}
  .caseBox{ margin-top:2rem;}

  .listBox ul li{ font-size:0.8rem;}
  .textBox{ font-size:0.8rem;}

  .caseFlex{ margin:4rem 0 0; flex-direction: column; gap:4rem;}
  .caseFlex > div{ width:100%;}
  .bflLogo{ width:180px;}
  .workTalk{ margin:2rem 0 0; font-size:0.8rem; padding:0 1rem;}

  .pcOnly{ display:none;}
  .spOnly{ display:block;}

  .secTitle--jpn{ font-size:0.8rem;}
}




.coreFlex{ max-width:720px; margin:4rem auto; display: flex; justify-content: space-between; gap:2rem; align-items: center;}
.coreImage{ flex-basis:30%; text-align: center;}
.coreImage img{ max-width:160px;}
.coreText{ flex-basis:70%; text-align: left;}
.coreText h2{ margin-bottom:2em;font-weight:normal;font-size:1.2rem;}
.coreText h2 ul li{ font-weight:bold; font-size:1rem;}
.coreText p{ font-size:0.8rem; margin:1rem 0 0;}

/*.serviceFlex{ max-width:860px; margin:2rem auto 4rem; display: flex; justify-content: space-between; gap:4rem; align-items: center;}*/
.serviceImage{ flex-basis:50%; text-align: center;}
.serviceImage ul li{ margin:4rem auto 0;}

.serviceText{ flex-basis:50%; text-align: left;}
.serviceText dl dt{ margin-bottom:2em; position:relative; padding:0 1em; display:inline-block;}
.serviceText dl dt::before{ content:""; position: absolute; top:0; left:0; width:1px; height:100%; background:#666;}
.serviceText dl dt::after{ content:""; position: absolute; top:0; right:0; width:1px; height:100%; background:#666;}
.serviceText dl dd{ font-size:0.8rem;}
.serviceText dl dd ul li{ margin:0 0 1em 1em;}

.urlBox dl{ display:flex; justify-content: flex-start; gap:1rem; align-items: center;}
.urlBox dl dt img{ height:3.0rem; width:auto;}

@media only screen and (max-width : 800px) {
.coreFlex{ gap:2em; flex-direction: column;}
.coreImage img{ max-width:140px;}
.coreText{ padding:0 1rem;}
.coreText h2 ul li{font-size: 1.0rem;}
.coreText h2 ul li span{ letter-spacing:0;}
.coreText h2{ margin-bottom:1rem;}
.coreText p{font-size: 0.8rem;}
.coreText dl dt{ font-size:0.8rem; margin-bottom:1em;}
.coreText dl dd br{ display:none;}

/*.serviceFlex{ gap:0; flex-direction: column;}*/
.serviceImage{ order:1;}
.serviceText{ order:2;}

.serviceImage ul li{ margin:0 auto 2rem;}

.urlBox dl dt img{ height:1.7rem;}
.urlBox dl dd a{ font-size:0.8rem;}
}


.title-v2025{ font-size:1.0rem; font-weight: bold; margin:0 0 1rem;}
.title-v2025.futura1{ position:relative; padding-left:3rem; display:inline-block;}
.title-v2025.futura1::before{content:""; position: absolute; top:50%; left:0; height:2rem; width:2rem; transform: translate(0,-50%); background:url(img/futura_1.svg) center bottom no-repeat; background-size: contain;}
.title-v2025.futura2{ position:relative; padding-left:3rem; display:inline-block;}
.title-v2025.futura2::before{content:""; position: absolute; top:50%; left:0; height:2rem; width:2rem; transform: translate(0,-50%); background:url(img/futura_2.svg) center bottom no-repeat; background-size: contain;}
.title-v2025.futura3{ position:relative; padding-left:3rem; display:inline-block;}
.title-v2025.futura3::before{content:""; position: absolute; top:50%; left:0; height:2rem; width:2rem; transform: translate(0,-50%); background:url(img/futura_3.svg) center bottom no-repeat; background-size: contain;}
.title-v2025.futura4{ position:relative; padding-left:3rem; display:inline-block;}
.title-v2025.futura4::before{content:""; position: absolute; top:50%; left:0; height:2rem; width:2rem; transform: translate(0,-50%); background:url(img/futura_4.svg) center bottom no-repeat; background-size: contain;}
.title-v2025.futura5{ position:relative; padding-left:3rem; display:inline-block;}
.title-v2025.futura5::before{content:""; position: absolute; top:50%; left:0; height:2rem; width:2rem; transform: translate(0,-50%); background:url(img/futura_5.svg) center bottom no-repeat; background-size: contain;}

.pointWrapper dl{ margin:1rem 0 0;}
.pointWrapper dl dd{font-size:0.8rem;}
.subTitleKakko{ font-size:1.2rem; text-align:center; margin:2rem 0 2rem; font-weight:normal;}
.subTitleKakko::before{content:"[ ";}
.subTitleKakko::after{content:" ]";}

.pinkBg{background:#FFF4F4;background:rgba(207, 190, 197, 0.2); padding:4rem 0; margin:4rem 0 0;}
.blueBg{background:#F4FCFF;background:rgba(161, 195, 201, 0.3); padding:4rem 0; margin:0 0 4rem;}

.noteLinkWrapper{ max-width: calc(960px + 2rem); margin:2rem auto 2rem;}




.lowerFirstWrapper{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin-top:8rem; margin-left:auto; margin-right:auto;}
.lineTitle{ position: relative; padding:0 1em; display:inline-block;}
.lineTitle::before{ content:""; top:0; left:0; height:100%; width:1px; background:#333; position: absolute;}
.lineTitle::after{ content:""; top:0; right:0; height:100%; width:1px; background:#333; position: absolute;}

.lowerNextWrapper{ max-width:calc(960px + 2rem); width:100%; text-align: left; margin:4rem auto 0;}

.greetingImageBox{ margin:4rem auto 0; text-align: center;}
.greetingImageBox ul li{display: inline-block; vertical-align:bottom; padding:0 2rem;}
.greetingImageBox ul li:nth-child(1){width:160px;animation: fukurouJumpAnime 7s linear 0s infinite normal forwards;}
.greetingImageBox ul li:nth-child(2){width:150px;animation: fukurouJumpAnime 7s linear 0.5s infinite normal forwards;}
@keyframes fukurouJumpAnime {
  0%{ transform: translate(0,0) scaleX(1);}
  49%{ transform: translate(0,0) scaleX(1);}
  50%{ transform: translate(0,-1rem) scaleX(1);}
  51%{ transform: translate(0,0) scaleX(1);}
  100%{ transform: translate(0,0) scaleX(1);}
}

.singleWrapper{ margin:8rem auto 0; text-align: left; max-width:860px;}
.singleWrapper h2{font-size: 1.4rem;}
.singleInner{ text-align: left; margin:2rem auto 0;}
.singleInner h3{ margin:1rem 0; font-size:1.0rem; padding:1rem; background-color: rgba(208, 202, 192,0.4);}
.singleInner h4{ margin:1rem 0; font-size:1.0rem; font-weight: bold;}
.singleInner h4::before{ content:"// ";}
.singleInner h4::after{ content:" //";}

.singleInner h4.boxTitle{margin:2rem 0 0; font-size:1.0rem; font-weight: bold;display:inline-block; border:1px solid #333; border-radius:8px; padding:0.5rem 1rem;}
.singleInner h4.boxTitle::before{ content:"";}
.singleInner h4.boxTitle::after{ content:"";}
.singleInner h4.boxTitle:first-child{margin:0 0 0;}

.singleInner p{ margin:1rem 0;}
.singleBox{ margin:2rem 0;}
.singleBox.mbAdd{ margin-bottom:4rem;}
.singleInner table{ width:100%; margin:1rem 0; border-top:1px solid #ccc; border-left:1px solid #ccc;}
.singleInner table th{ background:rgb(239, 239, 239,0.4); width:20%; padding:0.5rem 1rem; font-weight: normal; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
.singleInner table td{  padding:0.5rem 1rem; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
.singleInner dl{ margin:2rem 0;}
.singleInner dl dt{ padding:0.5em 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.singleInner dl dt::before{ content:"■ ";}
.singleInner dl dd{ padding:0.5em 0 2rem;}

.singleWorkList > li{ margin:0 0 1px;}
.diskUl > li{ list-style-type: disc; list-style-position: outside; margin:0 0 0 1.4em;}
.blockTitle{ padding:0 1rem;}
.subheading{ font-size:1.4rem;}
.singleFooter{ padding:1px 1rem; background: rgba(208, 202, 192,0.4);}

.question::before{ content:"Q:";}
.amondTurn{ display:inline-block; border:1px solid #333; border-radius:8px; padding:0.5rem 1rem;}
.amondVoice{ margin:0 1rem 0;}

.answer{ display: inline-block; border-radius:8px; padding:1rem 2rem;background-color: rgba(208, 202, 192,0.4);background:rgba(161, 195, 201,0.4);}


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

  .lowerFirstWrapper{ margin-top:6rem;}

  .greetingImageBox ul li{ padding:0 1rem;}
  .greetingImageBox ul li:nth-child(1){width:100px;}
  .greetingImageBox ul li:nth-child(2){width:94px;}

  .singleWrapper{ margin:6rem auto 0;}
  .singleWrapper h2{font-size: 1.0rem; padding:0 1rem;}
  .singleInner{ margin:1rem auto 0;}
  .singleInner h3{ font-size:0.8rem;}
  .singleInner h4{ font-size:0.8rem;}
  .singleInner p{font-size:0.8rem;}
  .singleBox{ margin:1rem 0; padding:0 1rem;}

  .singleInner table{ font-size:0.8rem; border-left:none;}
  .singleInner table th{ width:30%;}
  .singleInner table td{ border-right:none;}

  .singleInner dl dt{ font-size:0.8rem;}
  .singleInner dl dd{ font-size:0.8rem;}
  .singleInner dl dd:last-child{ padding:0.5em 0 0;}

  .amondVoice{ margin:0;}

  .singleFooter{margin:0 1rem;}

  .diskUl > li{ font-size:0.8rem;}
  .singleInner h4.boxTitle{font-size:0.8rem;}
  .subCopy{ font-size: 0.8rem;}
}




.webHeader{ padding-top:calc(1.8rem + 4rem);padding-top:6rem;}
.webHeaderInner{ background:url(img/web_creative_hero__pc.jpg) center center no-repeat; background-size:cover; padding:6rem 0;}

.webHeaderInner h2{ color:#fff; background:rgba(0, 0, 0,0.8); font-size:1.0rem; position:relative; padding:0 1em; display: inline-block;}
/*
.webHeaderInner h2::before{ content:""; height:100%; width:1px; background:#fff; position: absolute; top:0; left:0;}
.webHeaderInner h2::after{ content:""; height:100%; width:1px; background:#fff; position: absolute; top:0; right:0;}
*/
.webHeaderImageBox{ margin:2rem auto 0; text-align: center; display:inline-block; padding:1rem 2rem; mix-blend-mode: multiply;}
.webHeaderImageBox ul li{display: inline-block; vertical-align:bottom; padding:0 2rem;}
.webHeaderImageBox ul li:nth-child(1){width:160px;animation: fukurouJumpAnime 7s linear 0s infinite normal forwards;}
.webHeaderImageBox ul li:nth-child(2){width:150px;animation: fukurouJumpAnime 7s linear 0.5s infinite normal forwards;}

.webContentWrapper{ margin:4rem auto; max-width:calc(960px + 2rem); width:100%; text-align: left;}

.title-v2026{ font-size:1.4rem; font-weight: bold; margin:0 0 1rem; font-weight: normal;}
.title-v2026.futura1{ position:relative; padding-top:3rem; display:inline-block;}
.title-v2026.futura1::before{content:""; position: absolute; top:0; left:0; height:2rem; width:2rem; background:url(img/futura_1.svg) center bottom no-repeat; background-size: contain;}
.title-v2026.futura2{ position:relative; padding-top:3rem; display:inline-block;}
.title-v2026.futura2::before{content:""; position: absolute; top:0; left:0; height:2rem; width:2rem; background:url(img/futura_2.svg) center bottom no-repeat; background-size: contain;}
.title-v2026.futura3{ position:relative; padding-top:3rem; display:inline-block;}
.title-v2026.futura3::before{content:""; position: absolute; top:0; left:0; height:2rem; width:2rem; background:url(img/futura_3.svg) center bottom no-repeat; background-size: contain;}

.webFlex{ display:flex; align-items: center;}
.webHeaderImageBox{ flex-basis: 30%;}

.webBox{ flex-basis:70%;}
.webBox h3{font-weight: normal; font-size:1.2rem;}
.webBox h3::before{content:"「";}
.webBox h3::after{content:"」";}
.webBox h4{font-weight: normal; font-size:1.0rem; margin:1rem 0;}
.webBox h4::before{content:"「";}
.webBox h4::after{content:"」";}
.webBox p{ font-size:0.8rem; margin:1rem 0 2rem;}
.webBox.ml30{ margin:0 0 0 30%;}

.webBox-b{ margin:0 30% 0 0;}
.webBox-b h3{font-weight: normal; font-size:1.2rem;}
.webBox-b p{ font-size:0.8rem; margin:1rem 0 2rem;}

.aiBox h3{font-weight: normal; font-size:1.0rem; margin:0 0 1rem;}
.aiBox h3::before{content:"「";}
.aiBox h3::after{content:"」";}

.aiInner{ font-size:0.8rem;}
.aiInner dl{ display:block; margin:1rem 0;}
.aiInner dl dt{ display: inline;}
.aiInner dl dd{ display: inline;}

.preSiteList{ font-size:0.8rem;}

.aiBox{ background:#FFF7F7; border:8px; padding:2rem;}
.webMenuList{ margin:2rem 0 0;}
.webMenuList > li{border:1px solid #D9E022; padding:2rem; border-radius:8px; margin:1rem 0 0; font-size:0.8rem; background:#FDFFEA;}
.webMenuList > li:nth-child(1){ background:#fafaf5;}

.offerWrapper{ margin:4rem auto 4rem;}
.offerTitle{ font-size:1.4rem; margin:2rem auto 1rem;}
.offerWrapper a{ display:inline-block; padding:1rem 0; max-width:320px; width:100%; background:#0094AC; border-radius:50px; color:#fff; font-size:1rem; letter-spacing:0;}

.creativeJournalWrapper{ margin:0 auto; background:#fafbf6; padding:4rem 0;}
.cjTitle{ max-width:calc(960px + 0rem); width:100%; margin:0 auto 2rem; text-align: left; overflow: hidden;}
.cjTitle span{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 100;
    font-size: 2.4rem;
    letter-spacing: 0;
    position: relative;
    display: inline-block;
    padding: 0 2rem;
}
.cjTitle span::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 100%;
    height: 1px;
    width: 800px;
    background: #666;
}
/*
.cjTitle::after{ content:none; position: absolute; left:420px; top:-1rem; width:6rem; height:6rem; background:url(img/icon_mana_hands.jpg) 0 center no-repeat; background-size:contain; mix-blend-mode: multiply;}
.cjTitle::before{ content:""; position:absolute; top:0; left:0; width:1px; height:100%; background:#333;}
.cjTitle::after{ content:""; position:absolute; top:0; right:0; width:1px; height:100%; background:#333;}
*/
.creativeJournalInner{max-width:calc(960px + 2rem); width:100%; margin:0 auto 0; text-align: left;}
.creativeJournalInner ul{ padding:0 0.5rem;}
.creativeJournalInner ul li{ width:33.33%; display:inline-block; padding:0 0.5rem; vertical-align: top;}
.creativeJournalInner ul li h2{margin:0.5rem 1rem 0 0; background:url(img/icon_note_v2.svg) 0 0 no-repeat; background-size:1.4rem; padding-left:2rem;}
.creativeJournalInner ul li h2 a{ font-size:0.8rem; text-decoration: underline; font-weight:normal; line-height:1.6; display:inline-block;}
.creativeJournalInner ul li h2 a:hover{ text-decoration: none;}

@media only screen and (max-width : 800px) {
  .webHeaderInner{ background:url(img/web_creative_hero__sp.jpg) center center no-repeat; background-size:cover; padding:2rem 0;}
  .webHeaderInner h2{ font-size:0.8rem;}
  .webHeaderImageBox ul li{ padding:0 1rem;}
  .webHeaderImageBox ul li:nth-child(1){width:100px;}
  .webHeaderImageBox ul li:nth-child(2){width:94px;}

  .webContentWrapper{ margin:4rem auto; padding:0 1rem;}
  .webContentWrapper > p{ font-size:0.8rem;}
  .title-v2026{ font-size:1.2rem;}

  .webFlex{ flex-direction: column;}
  .webHeaderImageBox{ flex-basis:auto;}
  .webBox{ flex-basis:auto;}
  .webBox h3{font-size:1.0rem;}
  .webBox-b h3{font-size:1.0rem;}
  .webBox.ml30{ margin:0;}

  .webHeaderImageBox{ margin:0 auto 0; padding:0 0 1rem;}
  .webBox-b{ margin:0;}

  .aiBox{ padding:1rem;}
  .aiBox h3{font-size:0.8rem;}

  .webMenuList > li{padding:1rem;}

  .offerWrapper{ padding:0 1rem;}
  .offerWrapper > p{ font-size:0.8rem; text-align: left;}
  .offerWrapper > p br{ display:none;}
  .offerTitle{ font-size:1.2rem;}
  .offerWrapper a{ font-size:0.8rem;}

  .creativeJournalWrapper{ padding:2rem 1rem;}
  .creativeJournalInner ul{ padding:0 1rem;}
  .creativeJournalInner ul li{ width:100%; display:block; padding:0 0 1rem;}
  .creativeJournalInner ul li h2{ font-size:0.8rem;}

  .cjTitle span{font-size:1.4rem; white-space:nowrap; padding:0 2rem 0 0;}
  .cjTitleWrapper{padding:0 1rem;}
}


.myWebPlan{ font-size:1.4rem; margin-bottom:2rem;}
.amondLeadLogo{ max-width:140px;}
.foodDesignLeadLogo{ max-width:220px;}
.greetingLeadLogo{ max-width:260px;}
.serviceNum{ font-size:0.8rem; font-weight: bold; margin-bottom:2rem; letter-spacing:0;}
.otherPostWrapper{ margin:6rem auto 0;}

.tegakiWrapper{ text-align: center; margin:4rem auto;}
.tegakiWrapper img{ width:380px; height:auto;}

@media only screen and (max-width : 800px) {
  .amondLeadLogo{ max-width:120px;}
  .foodDesignLeadLogo{ max-width:200px;}
  .greetingLeadLogo{ max-width:240px;}

  .otherPostWrapper{ margin:4rem auto 0;}

  .tegakiWrapper img{ width:240px;}
}








.amondWrapper{ position:relative; overflow:hidden; width:100%;}
.bg-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;z-index: 1;filter: grayscale(0%);}

.amondWrapper::after{ 
  content: "";
  position: absolute;
  z-index:2;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /*
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 0) 30%,

    rgba(255, 255, 255, 0) 36%,
    rgba(255, 255, 255, 1) 41%,
    rgba(255, 255, 255, 0) 46%,

    rgba(255, 255, 255, 0) 51%,
    rgba(255, 255, 255, 1) 56%,
    rgba(255, 255, 255, 0) 61%
  );
  */
  opacity:0;
  background:#fcf6eb;
  transition: opacity 1.0s ease;
  pointer-events: none;
}
.amondWrapper.is-fading::after{ opacity:1;}

/*
.amondWrapper::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff url(img/2026_main_bg.jpg) center center no-repeat;background-size: cover;}
*/
.fullHeight{position: absolute; top:0; left:0; width:100%; height:100vh; z-index:9999;}
.mainContent202606{position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);text-align:left; width:100%; max-width:calc(960px + 2rem); padding:0 1rem;}
.mainCatch202606{ display:flex; flex-direction: column; position: relative; padding-bottom:2rem; gap:2rem;}
.mainCatch202606::after{ content:""; position: absolute; bottom:0; left:-4rem; width:calc(100% + 8rem); height:1px; background:#333; transition: all .5s;}
.mainCatch202606.is-loaded::after{ width:calc(100% + 8rem);}

.mainCatch202606 > h1{ order:2; letter-spacing:0.2em; line-height:1; overflow:hidden; height:3.2rem; font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.mainCatch202606 > h1{ font-size:3.2rem; display:inline-block;}
.mainCatch202606 > h1 > span.hiragana{ font-size:1.8rem; margin:0 0.2em;}

.mainCatch202606 > h1.is-loaded > span{ animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}

@keyframes slideUp {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}
.mainCatch202606 > div > p{ order:1; color:#aaaaaa; line-height:1; letter-spacing:0.1em; font-family: "Bodoni Moda SC", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; height:1.6rem; overflow:hidden;}
.mainCatch202606 > div > p > span{font-size:1.6rem;transform: translateY(110%); display:inline-block;}
.mainCatch202606 > div > p:nth-child(1){ margin:0 0 1em;}
.mainCatch202606 > div.is-loaded > p > span{ animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;animation-delay: calc(var(--i) * 0.1s);}

.subCatch202606{ margin:2rem 0 0;font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal;}

.subCatch202606{ display:inline-block; position:relative; padding:0 1rem; font-size:1.0rem; font-weight:bold; letter-spacing:0;}
.subCatch202606::before{ content:""; position: absolute; top:0; left:0; width:1px; height:100%; background:#333;}
.subCatch202606::after{ content:""; position: absolute; top:0; right:0; width:1px; height:100%; background:#333;}

.subCatch202606.is-loaded > span{ animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;animation-delay: calc(var(--i) * 0.1s);}

.mainCatchEng202606{font-family: "linotype-didot", serif;font-weight: 400;font-style: normal; font-size:1.8rem; color:#a5a5a5; line-height:1.4;}

@media only screen and (max-width : 800px) {
.amondWrapper{}
.fullHeight{height:580px;}

.mainCatch202606::after{ left:-1rem; width:calc(100% + 2rem);}

.mainCatch202606 > h1{ height:1.8rem;font-size:1.8rem;}
.mainCatch202606 > h1 > span{ font-size:1.8rem;}
.mainCatch202606 > h1 > span.hiragana{ font-size:1.0rem;}

.mainCatchEng202606{ font-size:1.2rem;}

.mainCatch202606 > div > p{ height:1.0rem;}
.mainCatch202606 > div > p > span{font-size:1.0rem;}

.subCatch202606{ font-size:0.8rem;}
}




.catTitle{ line-height:1; letter-spacing:0; font-size:1.2rem; margin:0 auto 4rem; position:relative; color:#a5a5a5;font-family: avenir-lt-pro, sans-serif;font-weight: 700;font-style: normal; letter-spacing: .1em; padding-left:1rem;}
.catTitle.dark{ color:#333;}
/*.catTitle::before{ content:""; position: absolute; bottom:-0.5rem; left:50%; width:3rem; height:1px; background: #333; transform: translate(-50%,0);}*/

.aboutusCover{ position:relative; padding-top:100vh; z-index:9999;}
.innerBottomBg{ width:100%; height:200px; background:url(img/content_bottombg__pc.png) center top no-repeat; background-size:100% auto;opacity:0.77;}
@media only screen and (max-width : 1000px) {
  .innerBottomBg{height:auto; aspect-ratio:1000 / 200;}
}
@media only screen and (max-width : 800px) {
.aboutusCover{ padding-top:580px;}
}

.aboutusCoverInner{ text-align:left; width:100%; max-width:calc(960px + 2rem); padding:0 1rem 8rem; margin:0 auto;}
.aboutusCoverInner h2{ font-size:1.8rem; margin:0 auto 3rem; line-height:1; }
/*
.aboutusCoverInner h2 > span{display:inline-block; transform:translateY(110%);}
.aboutusCoverInner h2.anime > span{ animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
*/
.aboutusCoverInner p{line-height:2.4; font-size:0.8rem;}
/*
.aboutusCoverInner p > span{ display:block; overflow:hidden; line-height:1; margin:0 auto 1rem;}
.aboutusCoverInner p > span > span{ display:inline-block; font-size:1.0rem; transform:translateY(110%);}
.aboutusCoverInner p.anime > span > span{ animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
*/
.btnBlock{ margin:2rem auto 0;}
.btnBlock a{ display:inline-block; line-height:1; padding:1rem 4rem; font-size:0.8rem; background:#606060; box-shadow: 0 2px 4px #0000001a;color:#fff;}

.handBtnWrapper a.serviceBtn span.border{padding:1rem 4rem; font-size:0.8rem; background:#a9a9a9; box-shadow: 0 2px 4px #0000001a;color:#fff;}

@keyframes zoomInOutAnime {
  0%{ transform: scale(1) translate(-50%,-50%);}
  50%{ transform: scale(1) translate(-50%,-50%);}
  100%{ transform: scale(1) translate(-50%,-50%);}
}

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

.catTitle{ font-size:1.2rem; margin: 0 auto 2rem;}

.aboutusCoverInner{ padding:0 1rem 2rem;}
.aboutusCoverInner h2{ font-size:1.2rem;}
.aboutusCoverInner p{font-size:0.8rem;}
.aboutusCoverInner p > span > span{ font-size:0.8rem; line-height:1.7;}
}




.journalWrapper{ padding:4rem 0;}
.journalInner{ margin:0 auto; width:100%; max-width:calc(960px + 8rem); position:relative; display:flex; justify-content: space-between; align-items: stretch;}

.journalCover{ overflow:hidden; width:960px; margin:0 4rem; text-align:left;}
.journalCover > ul{ width: max-content; display:flex; justify-content:flex-start; gap:0; align-items: stretch;}
.journalCover > ul > li{flex-shrink:0; width:320px; background: #fbf9f6;background: #fff; padding:0 0.5rem 2rem; position:relative;}
.journalCover > ul > li::before{ content:""; width:100%; height:4rem; position: absolute; bottom:0; left:0; background:#ede4db; background: #fff;
    clip-path: polygon(
        0% 100%,    /* 上中央 */
        100% 0%,   /* 左下 */
        100% 100%  /* 右下 */
    );
}
.journalCover > ul > li h2{ font-size:0.8rem; margin:0; padding:0.5rem 1rem; background:#F8F8F8;}
.journalCover > ul > li p{ font-size:0.8rem; padding:0.5rem 1rem;}
.journalCover > ul > li a.viewBtn{ margin:0 2rem 0 0; width:100%; text-align: right;}

#modoruJoutnal{ cursor: pointer; display:block; position:absolute; left:0; top:0; transform:translate(0,0); width:4rem; height:100%; background:rgba(255, 255, 255, .9);}
#nextJoutnal{ cursor: pointer; display:block; position:absolute; right:0; top:0; transform:translate(0,0); width:4rem; height:100%; background:rgba(255, 255, 255, .9);}

#modoruJoutnal:hover{ opacity:.5;}
#nextJoutnal:hover{ opacity:.5;}

#modoruJoutnal > span{ display: block; width:0.5rem; height:0.5rem; transform:translate(-30%,-50%) rotate(-45deg); border-top:1px solid #333; border-left:1px solid #333; position: absolute; top:50%; left:50%;}
#nextJoutnal > span{ display: block; width:0.5rem; height:0.5rem; transform:translate(-70%,-50%) rotate(135deg); border-top:1px solid #333; border-left:1px solid #333; position: absolute; top:50%; left:50%;}

.journalImageBtn{ display:block; height:200px; transition: all .5s;}
.journalImageBtn.on{height:400px;}

@media only screen and (max-width : 800px) {
.journalCover{ width:320px; margin:0 auto;}

#modoruJoutnal{ left:0; top:auto; bottom:0; width:4rem; height:2rem; z-index:9999;}
#nextJoutnal{ right:0; top:auto; bottom:0; width:4rem; height:2rem;}

}





.serviceCover{ padding:4rem 0 4rem; background:url(img/2026_service_bg__pc.jpg?t=2) center center no-repeat; background-size: cover; position:relative; max-width:1280px; margin:0 auto;}
/*.serviceCover::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:#ede4db; mix-blend-mode:soft-light;}*/
.serviceCoverInner{ margin:4rem auto 0; position:relative;}

.serviceCoverContent{ width:100%; max-width: 960px; padding:0 0 4rem; margin:0 auto; position:relative;}
.serviceNav{display:flex; justify-content: space-between;}
.servicePic{ max-width: 800px; margin:0 auto; position:relative;}

#service01p{ position:absolute; top:65%; left:3%; text-align: left;}
#service01p h2{font-family: "linotype-didot", serif;font-weight: 400;font-style: normal; letter-spacing:0; font-size:2.4rem; font-weight: bold; line-height:1; margin-bottom:1rem;}

#service02p{ position:absolute; top:38%; left:37%; text-align: left;}
#service02p h2{font-family: "linotype-didot", serif;font-weight: 400;font-style: normal; letter-spacing:0; font-size:2.4rem; font-weight: bold; line-height:1; margin-bottom:1rem;}

#service03p{ position:absolute; top:12%; left:69%; text-align: left;}
#service03p h2{font-family: "linotype-didot", serif;font-weight: 400;font-style: normal; letter-spacing:0; font-size:2.4rem; font-weight: bold; line-height:1; margin-bottom:1rem;}


.serviceBox{ padding:2rem 2rem; width:33.33%; text-align: left; height:220px; position:relative; transform: scale(0);}
.serviceBox.anime{ animation:hopeBoxUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: calc(var(--i) * 0.1s); opacity:0;}


@keyframes hopeBoxUp {
  0% { transform: scale(0); opacity:0;}
  90% { transform: scale(1.1);}
  100% { transform: scale(1); opacity:1;}
}

/*
.serviceBox h2{font-family: "Bodoni Moda SC", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size:1.8rem; line-height:1.2; position:relative;}
*/
.serviceBox p{ margin:1rem 0 0; font-size:1rem; position:relative;}

#service01{ margin-top:220px; z-index:98;}
#service02{ margin-top:110px; z-index:99;}
#service03{ margin-top:0; z-index:100;}

#service01::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(img/2026_service_01_bg.jpg) center center no-repeat; background-size: cover; box-shadow: 0 2px 4px #0000001a; transform:scale(1.05); border-radius:8px;}
#service02::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(img/2026_service_02_bg.jpg) center center no-repeat; background-size: cover; box-shadow: 0 2px 4px #0000001a; transform:scale(1.05); border-radius:8px;}
#service03::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(img/2026_service_03_bg.jpg) center center no-repeat; background-size: cover; box-shadow: 0 2px 4px #0000001a; transform:scale(1.05); border-radius:8px;}
/*
#service01::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#ede4db; mix-blend-mode:color; transform:scale(1.05); border-radius:8px;}
#service02::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#f2ebe5; mix-blend-mode:color; transform:scale(1.05); border-radius:8px;}
#service03::after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#ede4db; mix-blend-mode:color; transform:scale(1.05); border-radius:8px;}
*/
#service01 > h2{ line-height:1; margin-bottom:1.2em; position: relative;}
/*
#service01 > h2 > span{display:inline-block; transform:scale(1.4); opacity:0;}
#service01 > h2.anime > span{ animation: scallUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
#service01 > p > span{ display: block; line-height:1; overflow:hidden; margin-bottom:0.75em;}
#service01 > p > span > span{display:inline-block; transform:translateY(110%);}
#service01 > p.anime > span > span{ animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
*/

#service02 > h2{ line-height:1; margin-bottom:1.2em; position: relative;}
/*
#service02 > h2 > span{display:inline-block; transform:scale(1.4); opacity:0;}
#service02 > h2.anime > span{ animation: scallUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
#service02 > p > span{ display: block; line-height:1; overflow:hidden; height:1rem; margin-bottom:0.75em;}
#service02 > p > span > span{display:inline-block; transform:translateY(110%);}
#service02 > p.anime > span > span{ animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
*/

#service03 > h2{ line-height:1; margin-bottom:1.2em; position: relative;}
/*
#service03 > h2 > span{ line-height:1; overflow:hidden; display: block; margin-bottom:0.25em;}
#service03 > h2 > span > span{display:inline-block; transform:scale(1.4); opacity:0;}
#service03 > h2.anime > span > span{ animation: scallUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
#service03 > p > span{ display: block; line-height:1; overflow:hidden; height:1rem; margin-bottom:0.75em;}
#service03 > p > span > span{display:inline-block; transform:translateY(110%);}
#service03 > p.anime > span > span{ animation: slideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation-delay: calc(var(--i) * 0.1s);}
*/
@keyframes scallUp {
  from { transform:scale(1.4); opacity:0;}
  to { transform: scale(1); opacity:1;}
}



.serviceIconList{ position:absolute; text-align: left;}
.serviceIconList > li{font-family: avenir-lt-pro, sans-serif;font-weight: 700;font-style: normal; letter-spacing:0; color:#fff; opacity:0;}
.serviceIconList > li.anime{ animation:hopeUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: calc(var(--i) * 0.1s);}

@keyframes hopeUp {
  0% { transform: translate(0,0)scale(0); opacity:0;}
  90% { transform: translate(0,0) scale(1.1);}
  100% { transform: translate(0,0) scale(1); opacity:1;}
}

#serviceIcon01{ top:4rem; left:9rem;}
#serviceIcon02{ bottom:1rem; right:22rem;}
#serviceIcon03{ bottom:4rem; right:6rem;}

.serviceBottomLinkBlock{ margin:6rem auto 0; text-align:right;width:100%; max-width:calc(960px + 2rem); padding:0 1rem;}

@media only screen and (max-width : 960px) {
.serviceIconList > li{ font-size:0.75rem; letter-spacing:0;}
#serviceIcon01{ top:10%; left:2%;}
#serviceIcon02{ bottom:-10%; right:35%;}
#serviceIcon03{ bottom:0; right:2%;}
}

@media only screen and (max-width : 800px) {
.serviceCover{ overflow:hidden;}
.serviceCoverInner{ padding:0 0 0; margin:0 0 0;}
.serviceCoverContent{ padding:4rem 0 4rem;}

.serviceNav{flex-direction:column; gap:2rem;}

.serviceBox{ padding:2rem 2rem; width:calc(100% - 4rem); height:auto;}
.serviceBox h2{font-size:1.4rem;}
.serviceBox p{ font-size:0.8rem;}

#service01{ margin:0 auto;}
#service02{ margin:0 auto; text-align:right;}
#service03{ margin:0 auto;}


#service01p{ position:absolute; top:65%; left:3%; text-align: left; width:30%;}
#service01p h2{ font-size:1.4rem;}
#service01p p{ font-size:0.8rem;}

#service02p{ position:absolute; top:38%; left:37%; text-align: left; width:30%;}
#service02p h2{ font-size:1.4rem;}
#service02p p{ font-size:0.8rem;}

#service03p{ position:absolute; top:12%; left:69%; text-align: left; width:30%;}
#service03p h2{ font-size:1.4rem;}
#service03p p{ font-size:0.8rem;}
}


.worksCover{ padding:8rem 1rem;}
.worksCoverInner{ width:100%; max-width: 960px; margin:0 auto;}
.worksFlexList{ display:flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch; text-align: left; gap:30px;}
.worksFlexList > li{ flex-basis:300px;}
.worksFlexList > li.bigBlock{ flex-basis:630px;}

/*
.worksFlexList > li:nth-child(3n+1){ margin-top:120px;}
.worksFlexList > li:nth-child(3n+2){ margin-top:60px;}
*/
.worksFlexList > li.one{ margin-top:120px;}
.worksFlexList > li.two{ margin-top:60px;}


.workTitle{padding: 1em 1em; background: #f4f4f4; margin-bottom:0.5em; font-size:0.8rem;}

.worksSummary{ font-size:0.8rem; padding:1em 0 0;}
.worksSummary > dl{display:flex; justify-content: flex-start; gap:1em; letter-spacing:0;}
.worksSummary > dl.filed{ color: #a9a9a9;}
.worksSummary > dl > dt::after{ content:" /"}
.worksSummary > .client{ font-size:1.4rem; font-weight: normal; margin:0 auto 0.5rem;}

.worksCoverLower{ padding:0 0 8rem;}

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

.worksFlexList{ margin:0 auto; width:100%; padding:0 1rem; gap:2rem;}
/*
.worksFlexList > li:nth-child(3n+1){ margin-top:0;}
.worksFlexList > li:nth-child(3n+2){ margin-top:0;}
*/
.worksFlexList > li.one{ margin-top:0;}
.worksFlexList > li.two{ margin-top:0;}

.worksFlexList > li{flex-basis:auto;}
}



.caseCover{ background: url(img/2026_case_bg__pc.jpg) center center no-repeat; background-size: cover; padding:8rem 0; position:relative;}
.caseCover::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);filter: grayscale(100%);}
.caseCover::after{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; mix-blend-mode:screen;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 0) 30%,

    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 1) 35%,
    rgba(255, 255, 255, 1) 45%,
    rgba(255, 255, 255, 0) 50%,

    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 1) 55%,
    rgba(255, 255, 255, 0) 60%
  );
}
/*
.caseCover::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:#ede4db; mix-blend-mode:soft-light;}
*/

.caseCoverInner{ max-width: calc(960px + 2rem);width: 100%; margin:0 auto; padding:0 1rem; text-align: left; position:relative; z-index:9999;}

.project-case#case01{ background:#eee url(img/case_echizen_fukuushi.jpg?v=2) center top no-repeat; background-size:cover; border-radius:8px; position:relative;}
.project-case#case01::before{ content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.5);}

.project-case#case02{ background:#eee url(img/case_neonneon.jpg?v=2) center center no-repeat; background-size:cover; border-radius:8px;}
.project-case#case02::before{ content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.5);}

.project-case#case01 h2{ position: absolute; top:50%; left:10%; transform: translate(0,-50%);}
.project-case#case01 h2 img{ height:140px; width:auto;}

.project-case{ height:280px; background:#eee; margin:1rem 0 0; position:relative; overflow:hidden;}

.brandLabel{display: inline-block; position:absolute; bottom:1rem; left:1rem; padding: 0 1rem; font-size:0.8rem; font-weight: normal; color:#fff; line-height:1;}
.brandLabel::before{ content:""; position: absolute; top:0; left:0; width:1px; height:100%; background:#fff;}
.brandLabel::after{ content:""; position: absolute; top:0; right:0; width:1px; height:100%; background:#fff;}

.doneList{ position: absolute; top:50%; right:10%; text-align: left; transform: translate(0,-50%);}
.doneList ul li{ color:#fff; margin:0.5em 0; font-size:0.8rem;}

.brandViewBtn{ position:absolute; bottom:1rem; right:1rem;}

/*
.project-case#case01::after{ content:""; position:absolute; top:50%; right:1rem; height:200px; width:300px; background:url(img/case_text.png) center center no-repeat; background-size: contain; mix-blend-mode:screen; transform: rotate(-10deg) translate(0,-50%);}

.project-inner{ position:absolute; bottom:0; left:0; width:100%; text-align: left; color:#fff;}
.project-inner > header{ display:flex; flex-direction: column; gap:0;}
.project-inner > header > .category-label{ order:1; font-size:0.8rem; font-weight:normal; letter-spacing:0;}
.project-inner > header > h2{ order:2; font-size:1.2rem; font-weight:bold;}
.project-inner > header > h2 a{color:#fff;}

.project-details{ margin:1em 0 0; font-size:0.8rem; display: flex; flex-wrap: wrap; justify-content: flex-start; gap:1rem; line-height:1;}
.project-details > dt{ letter-spacing:0;}
.project-details > dd{ padding:0 0 0 1rem; position:relative; font-weight:bold;}
.project-details > dd::after{ content:""; position:absolute; top:0; left:0; width:1px; height:100%; background:#fff;}

.triangle { position:absolute; top:50%; left:50%;display:inline-block; height:100px; width:86.6px; clip-path: polygon(100% 50%, 0 100%, 0 0); background: rgba(255, 255, 255, 0.5); transform:scale(0.8) translate(-50%,-50%);}
*/
.contentFlex{ display:flex; justify-content: space-between; align-items: flex-end; gap:30px;}
.contentFlex.flex-start{ align-items: flex-start;}

.flexBasis60{ flex-basis:calc(60% - 15px);}
.flexBasis50{ flex-basis:calc(50% - 15px);}
.flexBasis40{ flex-basis:calc(40% - 15px);}

.borderImage{ box-shadow: 0 2px 4px #0000001a; border:1px solid #ebebeb;}
/*
.viewBtn{ line-height:1; display:inline-block; padding:1rem 3rem 1rem 3rem; font-size:0.8rem; background:#fff; border:1px solid #aaaaaa; box-shadow: 0 2px 4px #0000001a; margin-top:1rem; border-radius:100px; position:relative; overflow: hidden;}
.viewBtn::after{ content:"";display: block; width:0.5rem; height:0.5rem; transform:translate(0,-50%) rotate(135deg); border-top:1px solid #333; border-left:1px solid #333; position: absolute; top:50%; right:1rem;}
.viewBtn:hover{ background:#8598b0; color:#fff;}
.viewBtn:hover::after{border-top:1px solid #fff; border-left:1px solid #fff;
  animation: viewBtnAnime 1.0s linear 1 both;}
*/
.viewBtn{ line-height:1; display:inline-block; padding:0 2rem 0 0; font-size:1rem; margin-top:1rem; position:relative; font-weight:bold; letter-spacing:0;
font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal;}
.viewBtn::after{ content:"";display: block; width:0.5rem; height:0.5rem; transform:translate(0,-50%) rotate(135deg); border-top:1px solid #333; border-left:1px solid #333; position: absolute; top:50%; right:1rem;}
.viewBtn:hover{ color:#8598b0;}
.viewBtn:hover::after{border-top:1px solid #8598b0; border-left:1px solid #8598b0;}

.brandViewBtn .viewBtn{ color:#fff;}
.brandViewBtn .viewBtn::after{border-top:1px solid #fff; border-left:1px solid #fff;}

@keyframes viewBtnAnime {
  0%{ transform:translate(0,-50%) rotate(135deg); opacity:1;}
  50%{ transform:translate(400%,-50%) rotate(135deg); opacity:1;}
  51%{ transform:translate(400%,-50%) rotate(135deg); opacity:0;}
  80%{ transform:translate(0,-50%) rotate(135deg); opacity:0;}
  100%{ transform:translate(0,-50%) rotate(135deg); opacity:1;}
}




.contentSetWidth{ width:100%; max-width:calc(960px + 2rem); margin:0 auto; padding:0 1rem; text-align: left;}
.contentSetWidth.max720{ max-width:calc(720px + 2rem);}

.ourProjectWrapper{ padding:8rem 0;}
.ourProjectSummary{ margin:0 auto;}
.ourProjectSummary p{ margin:0 0 1rem; font-size:0.8rem; line-height:2.4;}

.projectSection{ margin:4rem 0 0;}

.projectBlock{ padding:2rem; background:#F8F8F8; border-radius:8px;}

.caseCover.lower{ padding:4rem 0;}

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

.project-case#case01 h2 img{ height:80px;}

.contentFlex{ flex-direction:column; gap:1rem; align-items: flex-start;}
.caseCover{padding:4rem 0;}
}


.companyCover{ background:url(img/2026_footer_bg__pc.jpg) center center no-repeat; background-size: cover;}
.companyCoverBlur{padding:8rem 0 2rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.companyCoverInner{ position:relative;}
/*
.companyCoverInner::after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:200px; background:url(img/content_bottombg__pc.png) center top no-repeat; background-size:100% auto;opacity:0.77;}
*/
.companyCoverContent{ width:100%; max-width: 960px; padding:0; margin:0 auto; text-align:left;}
.companyCoverContent h2{}

.companyPhotosCover{ overflow: hidden; width:100%; text-align: left;}
.companyPhotosCover > ul{ display:flex; width:max-content; max-width:1000px; margin:0 auto; gap:10px;}
.companyPhotosCover > ul > li{}

.contactBtnBlock{ margin:2rem auto 2rem;}

#copyRight{ font-size:0.75rem; letter-spacing:0;}

.companyInfoFlex{ display:flex; justify-content: space-between; margin:4rem auto 4rem; max-width:calc(680px + 2rem); padding:0 1rem; text-align: left;}
.companyInfoFlexText{ text-align: left; font-size:0.8rem;}
.companyInfoFlexText h2{margin:0 0 1rem;}
.companyInfoFlexText h2 img{ height:1.2rem;}

.companyInfoFlexText ul{ margin:1rem 0 0;}
.companyInfoFlexText ul li{ display:inline-block; padding-right:1em;}

.linkList li a{ text-decoration: underline; font-size:0.8rem;}
.linkList li a:hover{ text-decoration:none;}

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

.companyInfoFlex{ flex-direction:column; gap:2rem;}

.companyCover{ background:url(img/2026_footer_bg__sp.jpg) center center no-repeat; background-size: cover;}
.companyPhotosCover > ul{ max-width:200vw;gap:0;}

.companyCoverBlur{padding:4rem 0 2rem;}
}

.footerIcons{ margin:1rem 0 0;}
.footerIcons > li{display:inline-block; margin:0 1em 0 0;}
.noteIcon{ height:0.6rem; width:auto;}
.xIcon{ height:1.0rem; width:auto;}

.gmapIcon{ height:1.4rem; width:auto;}
.mailIcon{ height:1.0rem; width:auto;}


.singleHeader{ margin:8rem auto 4rem;}
.worksPic{ max-width:1200px; margin:2rem auto;}
.worksHeadeerTitle{ margin:-2rem auto 0; text-align: center;}
.worksHeadeerTitle h2{ font-size:1.8rem; margin:0 auto 1rem;}

.singleHeader .catTitle{ display:inline-block;}
/*.singleHeader .catTitle::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#a5a5a5;}*/

.worksPicList{ margin:4rem 0;}
.worksPicList > li{ margin:1rem 0;}
.worksPicList > li > img{ border:1px solid #ccc;}

.worksContactBlock{ padding:16rem 1rem 12rem; margin:8rem 0 0; position:relative; overflow: hidden;}
.worksContactBlock::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%;background:url(img/2026_works_contact_bg__pc.jpg) center top no-repeat; background-size: cover; z-index:-1; filter: blur(5px); transform: scale(1.1);}

.commentBlock{ margin:2rem 0 0;}
.commentBlock h3{ font-size:0.8rem; font-weight: bold;font-family: avenir-lt-pro, sans-serif; margin-bottom:1em;}
.commentBlock p{ font-size:0.8rem; margin-top:1em;}

.commentCenterBlock{ margin:2rem 0 0; text-align: center;}
.commentCenterBlock p{ font-size:0.8rem; margin-top:1em; line-height:2.4;}

.worksMeta table{ font-size:0.8rem;}
.worksMeta table th{ padding:0.5em 1em;font-weight: bold;font-family: avenir-lt-pro, sans-serif; background:#f4f4f4; border-bottom:2px solid #fff;}
.worksMeta table td{ padding:0.5em 1em; border-bottom:2px solid #fff;}

.contactHeader{ margin:8rem auto 0;}
.contactHeader .catTitle{ display:inline-block;}
/*.contactHeader .catTitle::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#a5a5a5;}*/

@media only screen and (max-width : 800px) {
.singleHeader{ margin:5rem auto 2rem;}
.worksHeadeerTitle h2{ font-size:1.2rem;}
.worksPicList{ margin:2rem 0;}

.worksContactBlock{ padding:6rem 0 4rem; margin:4rem 0 0; position:relative; overflow: hidden;}
.worksContactBlock::before{ background:url(img/2026_works_contact_bg__sp.jpg) center top no-repeat; background-size: cover;}
.worksContactBlock p{ font-size:0.8rem;}

.commentCenterBlock{ text-align:left;}
.commentCenterBlock p br{ display:none;}
}




.journalHeader{ margin:8rem auto 0;}
.journalHeader .catTitle{ display:inline-block;}
/*.journalHeader .catTitle::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#a5a5a5;}*/

.journalSingle{ margin:0 auto 8rem; max-width:640px;}
.journalSingle h2{ font-size:1.0rem; margin:0 0 2rem;}

.journalContent img{ margin:2rem 0 0;}
.journalContent p{ font-size:0.8rem; margin:1rem 0 0;}

.nextPostsBlock{ margin:2rem auto 4rem; display:flex; justify-content: space-between; align-items: stretch; gap:1rem; max-width:640px;}

.nextPostBtn{ line-height:1; display:inline-block; padding:0 2rem 0 0; font-size:1rem; position:relative; font-weight:bold; letter-spacing:0;
font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal; text-align:right;}
.nextPostBtn::after{ content:"";display: block; width:0.5rem; height:0.5rem; transform:translate(0,-50%) rotate(135deg); border-top:1px solid #333; border-left:1px solid #333; position: absolute; top:50%; right:1rem;}
.nextPostBtn:hover{ color:#8598b0;}
.nextPostBtn:hover::after{border-top:1px solid #8598b0; border-left:1px solid #8598b0;}

.backPostBtn{ line-height:1; display:inline-block; padding:0 0 0 2rem; font-size:1rem; position:relative; font-weight:bold; letter-spacing:0;
font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal; text-align:left;}
.backPostBtn::after{ content:"";display: block; width:0.5rem; height:0.5rem; transform:translate(0,-50%) rotate(135deg); border-bottom:1px solid #333; border-right:1px solid #333; position: absolute; top:50%; left:1rem;}
.backPostBtn:hover{ color:#8598b0;}
.backPostBtn:hover::after{border-bottom:1px solid #8598b0; border-right:1px solid #8598b0;}

@media only screen and (max-width : 800px) {
  .journalSingle{ margin:0 auto 4rem;}
  .journalHeader{ margin:5rem auto 0;}
}




.caseHeader{ margin:8rem auto 0;}
.caseHeader .catTitle{ display:inline-block;}
/*.caseHeader .catTitle::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#a5a5a5;}*/

@media only screen and (max-width : 800px) {
  .caseHeader{ margin:5rem auto 0;}
}




.aboutusHeader{ padding:16rem 0 4rem; margin:0 auto; position:relative;}
.aboutusHeader::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background: url(img/2026_aboutus_bg__pc.jpg) center top no-repeat; background-size: cover; opacity:0.33;}
.aboutusHeader .catTitle{ display:inline-block;}

.aboutusHeader h2{font-size: 1.8rem; margin: 0 auto 3rem; line-height: 1;}
.aboutusHeader p{line-height: 2.4;font-size: 0.8rem;}

.tegakiLogoWrapper{ margin:4rem auto 2rem; text-align:center; width:100%;}
.tegakiLogoWrapper img{ width:320px; height:auto;}

.aboutusSingle{ margin:0 auto 8rem; max-width:calc(960px + 2rem); padding:0 1rem; text-align:left;}
.aboutusSingle p{ margin:1rem auto 0;}

@media only screen and (max-width : 800px) {
  .aboutusHeader{ padding:8rem 0 2rem;}
  .aboutusHeader::before{ background: url(img/2026_aboutus_bg__sp.jpg) center top no-repeat; background-size: cover;}

  .aboutusHeader h2{font-size: 1.2rem; margin:1rem auto 3rem;}
  .aboutusSingle{ margin:0 auto 4rem;}

  .tegakiLogoWrapper img{ width:180px;}
}




.journalLowerWrapper{ max-width:calc(960px + 2rem); margin:0 auto 8rem; padding:0 1rem;}
.journalLowerWrapper > ul{ display:flex; justify-content:flex-start; gap:0; align-items: stretch; flex-wrap:wrap;}
.journalLowerWrapper > ul > li{flex-shrink:0; width:320px; background: #fbf9f6;background: #fff; padding:0 0.5rem 2rem; position:relative;}
.journalLowerWrapper > ul > li h2{ font-size:0.8rem; margin:0; padding:0.5rem 1rem; background:#F8F8F8;}
.journalLowerWrapper > ul > li p{ font-size:0.8rem; padding:0.5rem 1rem;}
.journalLowerWrapper > ul > li a.viewBtn{ margin:0 2rem 0 0; width:100%; text-align: right;}

@media only screen and (max-width : 800px) {
.journalLowerWrapper > ul{ flex-direction:column; justify-content:center;}
.journalLowerWrapper{ margin:0 auto 4rem;}
.journalLowerWrapper > ul > li{margin:0 auto;}
}




/*.serviceHeader .catTitle::after{ content:""; position: absolute; bottom:0; left:0; width:100%; height:1px; background:#a5a5a5;}*/
.serviceHeader{ padding:6rem 0 6rem; margin:0 auto; position:relative;}
.serviceHeader::before{ content:""; position: absolute; top:0; left:0; width:100%; height:100%; background: url(img/2026_service_bg__pc.jpg) center bottom 0 no-repeat; background-size: cover; opacity:1;}
.serviceHeader .catTitle{ display:inline-block;}

#servivePageTitle{font-size: 1.8rem; margin: 0 auto 0; line-height: 1; position:relative; transform:translateY(2em);}
.serviceHeader p{font-size:1.0rem;}


.serviceLowerHeader{ margin:0 auto 0; padding:8rem 0 0;}
.serviceLowerHeader .catTitle{margin: 0 auto 0;}


@media only screen and (max-width : 800px) {
  .serviceHeader{ padding:3rem 0 9rem;}
.serviceHeader::before{ background: url(img/2026_service_bg__pc.jpg) center bottom 0 no-repeat; background-size: cover;}

  #servivePageTitle{font-size: 1.2rem; margin:1rem auto 3rem;}
}

.serviceLower{padding:4rem 0 0;}
.serviceLower.ptSet{padding:8rem 0 0;}
.serviceLowerInner section{ text-align:left; max-width:calc(720px + 2rem); margin:0 auto; padding:0 1rem 4rem;}

.serviceTitle{font-family: "linotype-didot", serif; font-weight: 400; font-style: normal; letter-spacing: 0; font-size: 2.4rem; font-weight: bold; line-height: 1; margin-bottom: 1rem;}
.serviceTitle span{font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal; font-size:4.2rem; display:inline-block;padding:0 10px 0 0;}

.serviceTitleJpn{ font-size: 1.8rem; margin:2rem 0 2rem 4rem; line-height:1.7;}

.serviceTitleWhy{ margin:2rem 0 -1rem;}
.serviceTitleWhy img{ height:3rem; width:auto;}

.serviceTitleHow{ margin:2rem 0 -1rem;}
.serviceTitleHow img{ height:2.2rem; width:auto;}

.serviceTitleArrow{ margin:2rem 0 -1rem 1rem;}
.serviceTitleArrow img{ height:3rem; width:auto;}

.serviceText{ line-height: 2.4; font-size: 0.8rem; margin:2rem 0 2rem 4rem;}
.serviceText.eng{font-family: avenir-lt-pro, sans-serif;font-weight: 400;font-style: normal; font-size:1.0rem; line-height: 1.7;}
.serviceText.blue{color:#6B9CA2;}
.serviceText.red{color:#C18686;}
.serviceText.yellow{color:#969445;}

.serviceText ul li{ display:inline-block; padding:0; margin:0; letter-spacing:0;}
/*
.serviceText.blue ul li{ background:rgba(107, 156, 162,0.5);}
.serviceText.red ul li{ background:rgba(193, 134, 134,0.5);}
.serviceText.yellow ul li{ background:rgba(150, 148, 69,0.5);}
*/
.serviceText ul li::after{ content:"/"; display:inline-block; padding:0 0.5em;}
.serviceText ul li:last-child::after{ content:none;}

.serviceFlex{ display:flex; justify-content: space-between; align-items: center; gap:2rem; margin:4rem auto 0;}

.serviceSummary{ order:2; flex-basis:calc(50% - 1rem);}
.serviceIllust{ order:1; flex-basis:calc(50% - 1rem); text-align: center;}

.serviceSummary p{ margin:0 0 1rem; font-size:0.8rem;}
.serviceSummary ul li{ margin:0 0 1rem;}
.serviceSummary ul li a{ display:block; position:relative; padding:1em 6em 1em 1em; cursor:pointer; line-height:1; box-shadow: 0 2px 4px #0000001a; font-size:0.8rem; border-radius:8px;}
.serviceSummary ul li a::before{ content:""; position:absolute; left:0; top:0; height:100%; width:100%; z-index:-1; border-radius:8px; opacity:0.2; transition: all .5s;}
.serviceSummary ul li a::after{ content:""; position:absolute; right:10px; top:50%; height:1em; width:2em; background:url(img/2026_arrow_1.svg) center center no-repeat; background-size: contain; transform:translate(0,-50%);}
.serviceSummary ul li a:hover::before{ opacity:0.4;}

.serviceSummary ul.blue li a::before{ background:#6B9CA2;}
.serviceSummary ul.red li a::before{ background:#C18686;}
.serviceSummary ul.yellow li a::before{ background:#969445;}

.serviceIllust img{ max-width:200px; height:auto;}
.serviceIllust.imgL img{ max-width:220px;}
.serviceIllust .serviceCat{font-family: "linotype-didot", serif; font-weight: bold; font-style: normal; letter-spacing: 0; font-size:1.4rem; margin:10px auto 0;}

.servicePanelOverlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:998;}
.servicePanelOverlay.is-active{ opacity:1; visibility:visible;}

.servicePanel{ position:fixed; top:0; right:0; width:100%; max-width:480px; height:100%; background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,0.15); transform:translateX(100%); transition:transform .4s cubic-bezier(.25,.46,.45,.94); z-index:999; overflow-y:auto;}
.servicePanel.is-active{ transform:translateX(0);}

.servicePanelInner{ padding:4rem 2rem 2rem;}
.servicePanelClose{ position:absolute; top:1.5rem; right:1.5rem; width:2.5rem; height:2.5rem; border:none; background:none; font-size:1.8rem; line-height:1; cursor:pointer;}

body.panel-open{ overflow:hidden;}

@media only screen and (max-width : 800px) {
.serviceLowerInner section{ padding-bottom:4rem;}

  .servicePanel{ max-width:100%;}

.serviceTitle{ font-size: 1.4rem;}
.serviceTitle span{ font-size:1.8rem;}

.serviceTitleJpn{ font-size: 1.2rem; margin:2rem 0 2rem 0;}
.serviceText{ line-height: 2.4; font-size: 0.8rem; margin:2rem 0 2rem 0;}
.serviceText.eng {font-size: 0.8rem;}
/*
.serviceText.eng ul{ margin:1rem 0 0;}
*/
.serviceTitleWhy{ margin:2rem 0 -1rem;}
.serviceTitleWhy img{ height:2.4rem;}

.serviceTitleHow{ margin:2rem 0 -1rem;}
.serviceTitleHow img{ height:1.8rem;}

.serviceTitleArrow{ margin:2rem 0 -1rem 1rem;}
.serviceTitleArrow img{ height:2.4rem;}

.serviceText p br{ display:none;}

.serviceIllust img{ max-width:180px;}
.serviceIllust.imgL img{ max-width:180px;}

.serviceSummary ul li a{  min-width:320px;}

.serviceFlex{ margin:2rem auto 0;gap:1rem; flex-direction: column;}
}


#fixedMenuBtn{ display:inline-block; position:fixed; top:1rem; right:1rem;}
#fixedMenuBtn > div{ display:inline-block; padding:0.5rem 0.5rem; border:1px solid #333; background:#fff; box-shadow: 0 2px 4px #0000001a; font-size:0.8rem;font-family: avenir-lt-pro, sans-serif;font-weight:700;font-style: normal; letter-spacing:0; text-align:center; cursor:pointer;}
#fixedMenuBtn > div > span{ display: block; width:0.5rem; height:0.5rem; transform:translate(25%,0) rotate(-45deg); border-top:2px solid #333; border-left:2px solid #333; margin:0 auto;}


.serviceLowerFlex{ display:flex; justify-content: space-between; align-items: flex-start; gap:2rem; margin:8rem auto 8rem;}

.serviceLowerFlexContent{ flex-basis:calc(80% - 1rem); order:2;}
.serviceLowerFlexDeco{ flex-basis:calc(20% - 1rem); order:1; position:relative;}

.serviceLowerEng1{ display:block; transform:rotate(-90deg); position:absolute; top:0; left:0rem; transform-origin:top left; font-size:1.2rem; font-family: avenir-lt-pro, sans-serif;font-weight: 700;font-style: normal; letter-spacing:0;}
.serviceLowerEng2{ display:block; font-size:1.8rem;font-family: "linotype-didot", serif;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0; line-height:1; padding:1rem 0;
}
.serviceLowerEng3{ display:block; transform:rotate(-90deg) translate(calc(-100% - 0.5rem),200%); transform-origin:top left; font-size:1rem; font-family: avenir-lt-pro, sans-serif;font-weight: 700;font-style: normal; letter-spacing:0; width:max-content;margin:0;
}

.serviceLowerFlexContent table{font-size:0.8rem; width:100%; border-collapse: collapse;}
.serviceLowerFlexContent table th{width:8em;}
.serviceLowerFlexContent table th{ padding:2em 0 2em;}
.serviceLowerFlexContent table td{ padding:2em 0 2em;}

.serviceLowerFlexContent table th,.serviceLowerFlexContent table td{ border-bottom:1px solid #707070;}

.serviceLowerFlexContent table td span{ font-size:1.2rem;}
.serviceLowerFlexContent table td div{ margin:0.5em 0 0;}

@media only screen and (max-width : 800px) {
.serviceLowerFlex{ flex-direction:column; margin:0 auto 4rem;}
.serviceLowerFlexDeco{ display:none;}

.serviceLowerFlexContent table th{width:6em;}
}


.soloFooterWrapper{ margin:4rem auto 1rem;}