@charset "utf-8";
/* =========================================================
   SOKEN CONSTRUCTION - common.css
   1rem = 10px @1440 / 1441px以上はpx固定 / 768px以下は375基準
   ========================================================= */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd,dt,table,th,td{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:inherit;text-decoration:none}
button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* ---------- root ---------- */
:root{
  /* ベース */
  --c-white:#fff;
  --c-base:#fff;
  /* メイン / アクセント */
  --c-main:#d6432c;
  --c-main-ink:#bd3721;
  --c-accent:#efbb45;
  --c-accent-ink:#a9761a;
  /* 文字（黒は使わない・温かみのあるダークブラウン） */
  --c-ink:#3f3733;
  --c-text:var(--c-ink);
  --c-dark:var(--c-ink);
  /* 面 */
  --c-beige:#f7f4ef;
  --c-beige2:#efe7da;
  --c-gray:var(--c-beige);
  --c-gray2:var(--c-beige2);
  --c-line:#e8e2d9;
  --c-sub:#8c8279;
  /* js-rc の既定テーマ */
  --accent:var(--c-main);
  --accent-ink:var(--c-main-ink);
  --on-accent:#fff;
  --ease:cubic-bezier(.42,.06,.16,1);
  --ease-out:cubic-bezier(.33,1,.68,1);
  --ease-mask:cubic-bezier(.83,0,.17,1);
}

html{font-size:calc(100vw / 1440 * 10);scroll-behavior:smooth}
@media screen and (min-width:1441px){html{font-size:10px}}
@media screen and (max-width:768px){html{font-size:calc(100vw / 375 * 10)}}

body{
  background:var(--c-white);
  color:var(--c-text);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-weight:500;
  font-size:1.6rem;
  line-height:1.9;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@media screen and (max-width:768px){body{font-size:1.4rem}}
body.is-loaded,body.is-navOpen{overflow:hidden;height:100vh}

/* ---------- アクセントカラーのテーマ（セクションごとに固定で割当） ---------- */
.c-01{--accent:var(--c-main);--accent-ink:var(--c-main-ink);--on-accent:#fff}
.c-02{--accent:var(--c-accent);--accent-ink:var(--c-accent-ink);--on-accent:var(--c-ink)}

/* ---------- font utility ---------- */
.f-en{font-family:"Poppins","Roc Grotesk",sans-serif;font-weight:500;font-style:normal;letter-spacing:.02em}
.f-en--light{font-family:"Poppins",sans-serif;font-weight:300}
.f-jp--regular{font-weight:400}
.f-jp--medium{font-weight:500}
.f-jp--bold{font-weight:700}

/* ---------- layout ---------- */
.innerBlock{width:120rem;margin-inline:auto}
@media screen and (max-width:768px){.innerBlock{width:auto;margin-inline:2.4rem}}
.pc-only{display:block}
.sp-only{display:none}
@media screen and (max-width:768px){
  .pc-only{display:none}
  .sp-only{display:block}
}

/* =========================================================
   画像プレースホルダ（フリー素材）
   ========================================================= */
.ph{
  display:block;
  position:relative;overflow:hidden;background:#e7dfd2;
  background-image:repeating-linear-gradient(45deg,rgba(63,55,51,.07) 0 1rem,transparent 1rem 2rem);
  box-shadow:inset 0 0 0 .1rem rgba(63,55,51,.08);
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;margin:auto;height:fit-content;
  display:block;text-align:center;
  color:var(--c-sub);font-size:1.3rem;letter-spacing:.14em;
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;
}
@media screen and (max-width:768px){.ph::after{font-size:1.1rem}}
.ph picture{display:block;position:relative;z-index:1;width:100%;height:100%}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* =========================================================
   装飾オブジェクト
   ========================================================= */
.l-obj{will-change:transform,opacity}
.obj-shape{display:block}
.obj-shape.--square{background:var(--shape-color,var(--c-main))}
.obj-shape.--quarter{background:var(--shape-color,var(--c-main));border-radius:100% 0 0 0}
.obj-shape.--corner-bl{
  background:none;
  border-left:1.4rem solid var(--shape-color,var(--c-accent));
  border-bottom:1.4rem solid var(--shape-color,var(--c-accent));
}
.obj-shape.--corner{
  background:none;
  border-left:1.4rem solid var(--shape-color,var(--c-accent));
  border-top:1.4rem solid var(--shape-color,var(--c-accent));
}
.obj-shape.--circle{background:var(--shape-color,var(--c-accent));border-radius:50%}
.obj-shape.--bar{background:var(--shape-color,var(--c-accent))}

/* =========================================================
   ボタン
   ========================================================= */
.cp-btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;overflow:hidden}

/* btn-cp1 : テキスト＋矢印の横長 */
.btn-cp1{
  width:28rem;height:6.4rem;padding:0 2.4rem;border-radius:3.2rem;
  border:.1rem solid var(--c-dark);
}
@media screen and (max-width:768px){.btn-cp1{width:100%;max-width:30rem;height:5.6rem}}
.btn-cp1 .bg{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease);z-index:0}
.btn-cp1 .text,.btn-cp1 .arrow{position:relative;z-index:1;transition:color .4s var(--ease)}
.btn-cp1 .text{font-size:1.5rem;font-weight:700;letter-spacing:.04em;color:var(--c-ink)}
.btn-cp1 .arrow{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--c-dark);display:grid;place-items:center;transition:background .4s var(--ease)}
.btn-cp1 .arrow::before{content:"";width:.7rem;height:.7rem;border-top:.15rem solid #fff;border-right:.15rem solid #fff;transform:rotate(45deg) translate(-.1rem,.1rem);transition:border-color .4s var(--ease)}
.btn-cp1:hover{border-color:var(--accent)}
.btn-cp1:hover .bg{transform:scaleX(1)}
.btn-cp1:hover .text{color:var(--on-accent)}
.btn-cp1:hover .arrow{background:var(--on-accent)}
.btn-cp1:hover .arrow::before{border-color:var(--accent)}

.btn-cp1--white{border-color:#fff}
.btn-cp1--white .bg{background:#fff}
.btn-cp1--white .text{color:#fff}
.btn-cp1--white .arrow{background:#fff}
.btn-cp1--white .arrow::before{border-color:var(--c-main)}
.btn-cp1--white:hover{border-color:#fff}
.btn-cp1--white:hover .text{color:var(--c-main)}
.btn-cp1--white:hover .arrow{background:var(--c-accent)}
.btn-cp1--white:hover .arrow::before{border-color:var(--c-ink)}

/* btn-cp2 : 円形の矢印のみ */
.btn-cp2{width:5.6rem;height:5.6rem;border-radius:50%;border:.1rem solid var(--c-dark);display:grid;place-items:center;place-content:center}
.btn-cp2 .bg{position:absolute;inset:0;background:var(--accent);transform:scale(0);border-radius:50%;transition:transform .45s var(--ease)}
.btn-cp2::before{content:"";position:relative;z-index:1;width:.8rem;height:.8rem;border-top:.15rem solid currentColor;border-right:.15rem solid currentColor;transform:rotate(45deg) translate(-.15rem,.15rem);transition:border-color .4s var(--ease)}
.btn-cp2:hover .bg,a:hover .btn-cp2 .bg,.link:hover .btn-cp2 .bg{transform:scale(1)}
.btn-cp2:hover::before,a:hover .btn-cp2::before,.link:hover .btn-cp2::before{border-color:var(--on-accent)}
.btn-cp2--white{border-color:rgba(255,255,255,.5);color:#fff}

/* btn-cp3 : テキストリンク＋小矢印 */
.btn-cp3{display:inline-flex;align-items:center;gap:1.2rem;font-size:1.5rem;transition:color .3s var(--ease)}
.btn-cp3 .arrow{width:1.8rem;height:.1rem;background:currentColor;position:relative;transition:width .3s var(--ease)}
.btn-cp3 .arrow::after{content:"";position:absolute;right:0;top:-.25rem;width:.6rem;height:.6rem;border-top:.1rem solid currentColor;border-right:.1rem solid currentColor;transform:rotate(45deg)}
.btn-cp3:hover{color:var(--accent-ink)}
.btn-cp3:hover .arrow{width:2.8rem}

/* 準備中 */
span.js-recruit-link{cursor:default}
.ext{display:inline-block;width:1.2rem;height:1.2rem;margin-left:.7rem;vertical-align:middle;flex-shrink:0}
.ext svg{display:block;width:100%;height:100%}
a.js-recruit-link:hover .ext{color:var(--accent-ink)}
span.js-recruit-link:hover .navText,span.js-recruit-link:hover .text{color:inherit!important}

/* =========================================================
   見出し
   ========================================================= */
.secHead .sub{display:block;font-size:1.4rem;letter-spacing:.1em;color:var(--c-sub)}
.secHead .title{display:block;font-family:"Poppins",sans-serif;font-weight:500;line-height:1.15;letter-spacing:-.01em;font-size:7.2rem}
.secHead .caption{display:block;margin-top:1.6rem;font-size:1.5rem;letter-spacing:.04em}
.secHead .caption::before{content:"";display:inline-block;width:3.2rem;height:.1rem;background:var(--accent);margin-right:1.2rem;vertical-align:middle}
@media screen and (max-width:768px){
  .secHead .title{font-size:4.8rem}
  .secHead .sub{font-size:1.2rem}
  .secHead .caption{font-size:1.3rem;margin-top:1.2rem}
}

/* =========================================================
   js-cue : スクロール表示
   ========================================================= */
.js-cue.--a1{display:block;overflow:hidden;padding-bottom:.08em}
.js-cue.--a1 .t{display:inline-block;transform:translate3d(0,110%,0);transition:transform .8s var(--ease-mask)}
.js-cue.--a1.-in .t{transform:translate3d(0,0,0)}

.js-cue.--a2{opacity:0;transform:translate3d(0,1.5rem,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js-cue.--a2.-in{opacity:1;transform:none}

.js-cue.--a3{opacity:0;transform:translate3d(0,2rem,0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js-cue.--a3.-in{opacity:1;transform:none}

.js-cue.--a4{position:relative;overflow:hidden}
.js-cue.--a4::before{content:"";position:absolute;inset:0;background:var(--mask-color,var(--c-white));z-index:2;transition:transform .9s var(--ease-mask)}
.js-cue.--a4.-in::before{transform:translate3d(0,100%,0)}

.js-cue.--a3-all > *{opacity:0;transform:translate3d(0,2rem,0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js-cue.--a3-all.-in > *{opacity:1;transform:none}
.js-cue.--a3-all > *:nth-child(1){transition-delay:.1s}
.js-cue.--a3-all > *:nth-child(2){transition-delay:.3s}
.js-cue.--a3-all > *:nth-child(3){transition-delay:.5s}
.js-cue.--a3-all > *:nth-child(4){transition-delay:.7s}

.js-cue.--a4-all .ph{position:relative;overflow:hidden}
.js-cue.--a4-all .ph::before{content:"";position:absolute;inset:0;background:var(--mask-color,var(--c-white));z-index:2;transition:transform .9s var(--ease-mask)}
.js-cue.--a4-all.-in .ph::before{transform:translate3d(0,100%,0)}
.js-cue.--a4-all .ph.--02::before{transition-delay:.2s}
.js-cue.--a4-all .ph.--03::before{transition-delay:.4s}

/* split text */
.js-split-text .t{display:inline-block;transform:translate3d(0,110%,0);transition:transform .8s var(--ease-mask)}
.js-split-text.-in .t,.-in .js-split-text .t{transform:none}

/* =========================================================
   header
   ========================================================= */
.headerArea{position:fixed;top:0;left:0;width:100%;z-index:100;padding:2.4rem 0;transition:background .4s var(--ease),padding .4s var(--ease)}
.headerArea.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(1rem);padding:1.4rem 0}
.headerArea .innerBlock{display:flex;align-items:center;justify-content:space-between}
.headerArea .logo{display:flex;flex-direction:column;line-height:1.3;z-index:2}
.headerArea .logo .name{font-size:1.8rem;font-weight:700;letter-spacing:.06em}
.headerArea .logo .en{font-family:"Poppins",sans-serif;font-size:1rem;letter-spacing:.18em;color:var(--c-sub)}
@media screen and (max-width:768px){.headerArea .logo .name{font-size:1.5rem}}

.headerArea .navList{display:flex;align-items:center;gap:3.2rem}
.headerArea .navList .navLink{position:relative;font-size:1.4rem;letter-spacing:.04em;display:inline-flex;align-items:center}
.headerArea .navList .navLink::after{content:"";position:absolute;left:0;bottom:-.6rem;width:100%;height:.1rem;background:var(--accent);transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease)}
.headerArea .navList a.navLink:hover{color:var(--accent-ink)}
.headerArea .navList a.navLink:hover::after{transform:scaleX(1);transform-origin:left center}
@media screen and (max-width:1080px){.headerArea .navList{display:none}}

.headerArea .menuBtn{display:none;align-items:center;gap:.8rem;z-index:2}
@media screen and (max-width:1080px){.headerArea .menuBtn{display:flex}}
.menuBtn .line{display:block;width:2.4rem;height:1.2rem;position:relative}
.menuBtn .line .i{position:absolute;left:0;width:100%;height:.15rem;background:var(--c-text);transition:transform .4s var(--ease),opacity .3s}
.menuBtn .line .i:nth-child(1){top:0}
.menuBtn .line .i:nth-child(2){top:50%}
.menuBtn .line .i:nth-child(3){top:100%}
.menuBtn .text{font-family:"Poppins",sans-serif;font-size:1.1rem;letter-spacing:.14em}
body.is-navOpen .menuBtn .line .i{background:#fff}
body.is-navOpen .menuBtn .line .i:nth-child(1){transform:translateY(.6rem) rotate(20deg)}
body.is-navOpen .menuBtn .line .i:nth-child(2){opacity:0}
body.is-navOpen .menuBtn .line .i:nth-child(3){transform:translateY(-.6rem) rotate(-20deg)}
body.is-navOpen .headerArea{background:transparent;backdrop-filter:none}
body.is-navOpen .menuBtn .text,body.is-navOpen .headerArea .logo{color:#fff}
body.is-navOpen .headerArea .logo .en{color:rgba(255,255,255,.6)}

/* 全画面ナビ */
.navArea{
  position:fixed;inset:0;z-index:90;background:var(--c-main);color:#fff;
  display:flex;align-items:center;padding:12rem 0 6rem;
  clip-path:circle(0% at calc(100% - 6rem) 4rem);
  transition:clip-path .8s var(--ease);
  pointer-events:none;overflow-y:auto;
}
body.is-navOpen .navArea{clip-path:circle(150% at calc(100% - 6rem) 4rem);pointer-events:auto}
.navArea .innerBlock{width:min(120rem,100% - 4.8rem);margin-inline:auto}
.navArea .navList{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 6rem;width:100%}
@media screen and (max-width:768px){.navArea{align-items:flex-start;padding:10rem 0 6rem}.navArea .navList{grid-template-columns:1fr}}
.navArea .item{opacity:0;transform:translateY(2rem);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
body.is-navOpen .navArea .item{opacity:1;transform:none}
body.is-navOpen .navArea .item:nth-child(1){transition-delay:.35s}
body.is-navOpen .navArea .item:nth-child(2){transition-delay:.45s}
body.is-navOpen .navArea .item:nth-child(3){transition-delay:.55s}
body.is-navOpen .navArea .item:nth-child(4){transition-delay:.65s}
body.is-navOpen .navArea .item:nth-child(5){transition-delay:.75s}
.navArea .parentItem{display:flex;align-items:center;justify-content:space-between;padding:2.4rem 0;border-bottom:.1rem solid rgba(255,255,255,.15)}
.navArea .parentItem .title{display:block;font-family:"Poppins",sans-serif;font-size:3.2rem;line-height:1.1;letter-spacing:.01em}
.navArea .parentItem .sub{display:block;font-size:1.3rem;color:rgba(255,255,255,.6);margin-top:.4rem}
.navArea a.parentItem:hover .title{color:var(--c-accent)}
@media screen and (max-width:768px){.navArea .parentItem{padding:1.8rem 0}.navArea .parentItem .title{font-size:2.6rem}}

/* =========================================================
   マーキー（CONTACT帯）
   ========================================================= */
.marqueeArea{background:var(--c-main);color:#fff;padding:5.6rem 0;overflow:hidden}
.marqueeArea .track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marqueeArea .item{display:flex;align-items:center;gap:3.2rem;padding-right:8rem}
.marqueeArea .item .text{font-family:"Poppins",sans-serif;font-size:5.6rem;letter-spacing:.04em;line-height:1}
.marqueeArea .btn-cp2{width:8rem;height:8rem;border-width:.15rem}
.marqueeArea .btn-cp2::before{width:1.2rem;height:1.2rem;border-width:.2rem}
.marqueeArea a.item:hover .text{color:var(--c-accent)}
@media screen and (max-width:768px){
  .marqueeArea{padding:3.6rem 0}
  .marqueeArea .item .text{font-size:3.2rem}
  .marqueeArea .item{padding-right:4rem;gap:2rem}
  .marqueeArea .btn-cp2{width:5rem;height:5rem}
  .marqueeArea .btn-cp2::before{width:.9rem;height:.9rem}
}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marqueeArea .track{animation:none}}

/* =========================================================
   footer
   ========================================================= */
.footerArea{background:var(--c-white);padding:8rem 0 4rem;position:relative}
.footerArea .logo{display:block;margin-bottom:4.8rem}
.footerArea .logo .name{display:block;font-size:2.2rem;font-weight:700;letter-spacing:.06em}
@media screen and (max-width:768px){.footerArea .logo .name{font-size:1.7rem}.footerArea .logo{margin-bottom:3.2rem}}
.footerArea .logo .en{display:block;font-family:"Poppins",sans-serif;font-size:1.1rem;letter-spacing:.18em;color:var(--c-sub);margin-top:.4rem}
.footerArea .navList{display:grid;grid-template-columns:repeat(5,1fr);gap:2.4rem;padding-bottom:4.8rem;border-bottom:.1rem solid var(--c-line)}
@media screen and (max-width:768px){.footerArea{padding:5.6rem 0 3.2rem}.footerArea .navList{grid-template-columns:1fr 1fr;gap:2rem}}
.footerArea .navList .title{display:block;font-family:"Poppins",sans-serif;font-size:1.6rem;letter-spacing:.04em}
.footerArea .navList .sub{display:block;font-size:1.2rem;color:var(--c-sub);margin-top:.2rem}
.footerArea a.parentItem:hover .title{color:var(--accent-ink)}
.footerArea .btm{display:flex;align-items:center;padding-top:2.4rem}
.footerArea .copyright{font-family:"Poppins",sans-serif;font-size:1.1rem;letter-spacing:.08em;color:var(--c-sub)}

/* =========================================================
   巨大円（roundBg）
   ========================================================= */
.roundBg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.roundBg .item{
  display:block;position:absolute;inset:0;background:var(--c-main);
  border-radius:50% 50% 0 0 / 12rem 12rem 0 0;
  transform:translate3d(0,6rem,0);opacity:0;
  transition:transform 1s var(--ease),opacity .7s var(--ease);
}
.roundBg.-in .item{transform:none;opacity:1}
@media screen and (max-width:768px){.roundBg .item{border-radius:50% 50% 0 0 / 5rem 5rem 0 0}}