@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:#fff;}
.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読み込み後に表示 
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:9999;}
#loading::before{ content:""; position:absolute; top:0 ;left:0; width:100%; height:100%; background:#333;}

#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:fixed; top:0; left:0; width:100%; z-index:9998;}
#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 1rem;}
#gNav > li a{font-family:"century-gothic", sans-serif; letter-spacing:0; color:#fff; font-size:1rem; line-height:1;}
#gNav > li span{font-family:"century-gothic", sans-serif; letter-spacing:0; color:#fff; font-size:1rem; 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:#000;position:relative;display:inline-block;}
#gNav.bkNav > li span{ color: #000; 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{ max-width:320px; width:100%; 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{ display:none;position: fixed; top:0; left:0; width:100%; height:100vh; background:url(img/opening__sp.jpg) center center no-repeat; background-size:cover; z-index:10000; padding:4rem 1rem 0; transform: translate(101%,0); transition: all .5s;}
#popupNav.on{ transform: translate(0,0);}
#popupNav h1 img{ height:1.6rem; width:auto;}
#popupNav.dispHamberger{display:block;}

#fNav{ margin:2rem auto 0;}
#fNav > li{ display:block; padding:0 0 1rem;}
#fNav > li a{font-family:"century-gothic", sans-serif; font-weight:bold; 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; background:#000; z-index:10100;}
#hamburger.dispHamberger{display:none;}

.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;}
#copyRight{ font-size:0.75rem; letter-spacing:0; padding:1rem 0;}

.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;}

  .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:2rem auto 0;}
.greetingWrapper h3{ font-weight:bold; font-size:1rem;}
.greetingWrapper p{ font-size:0.8rem; margin:1em 0 0;}

.signWrapper{ text-align: right; margin:1rem 0;}
.signWrapper dl dt{ font-size:0.8rem; font-weight: normal;}
.signWrapper dl dd{ font-size:0.8rem;}

.profileFlex{ display:flex; justify-content: space-between; gap:2rem; align-items: center; max-width:720px; margin:4rem auto 0;}
.profilePhoto{ flex-basis:40%;}
.profileText{ flex-basis:60%; 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;}

.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;}

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



.selectList{
  position: relative;
  display: block;
  width: 280px;
  border: 1px solid #707070;
  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 #707070;
}

.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:2rem auto 4rem;}
.formWrapper fieldset legend{ text-align:center; margin-bottom:2rem;}
.formWrapper dl{ margin:1rem auto; 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 #707070; width:100%; padding:0.5rem; background: #fff;}
.formWrapper input[type=email]{ border:1px solid #707070; width:100%; padding:0.5rem; background: #fff;}
.formWrapper textarea{ border:1px solid #707070; width:100%; padding:0.5rem; height:10em; background: #fff;}

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

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

@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{ border:1px solid #707070; 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; 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{ margin:2rem auto;}
  .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;}
}