@charset "UTF-8";

/* =====================
  ATELIESTATE a - redesign (CLEAN / NO DUP)
  - theme: #485554 base
  - header mix-blend-mode
  - drawer underline L->R
  - drawer open: only morph-X button on top
  - SP drawer: 2 columns menu + meta stack
===================== */

/* =====================
  Theme tokens
===================== */
:root{
  --ink:#485554;

  --bg:#f7f8f8;
  --bg2:#ffffff;

  --muted:rgba(72,85,84,.78);
  --muted2:rgba(72,85,84,.60);

  --line:rgba(72,85,84,.14);
  --line-strong:rgba(72,85,84,.22);

  --card:rgba(255,255,255,.72);
  --panel:rgba(255,255,255,.96);

  --shadow:0 18px 55px rgba(15,25,35,.12);

  --radius:22px;
  --container:min(1100px, calc(100% - 40px));
  --ease:cubic-bezier(.22,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Hiragino Sans", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(980px 520px at 10% 0%, rgba(72,85,84,.10), transparent 60%),
    radial-gradient(820px 420px at 95% 10%, rgba(72,85,84,.06), transparent 55%),
    var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:var(--container); margin-inline:auto}

/* =====================
  Loading
===================== */
.loading{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#fff;
  display:grid;
  place-items:center;
  transition:opacity .6s ease, visibility .6s ease;
}

.loading.is-hide{
  opacity:0;
  visibility:hidden;
}

.loading__logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.loading__bar{
  width:120px;
  height:2px;
  background:#e5e5e5;
  overflow:hidden;
  position:relative;
}

.loading__bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:#485554;
  transform:translateX(-100%);
  animation:loading-bar 1.2s ease-in-out infinite;
}

/* ===== Loading logo size override ===== */
.loading .logo-img--loading{
  width: 180px;         /* ←好きな大きさに */
  height: auto !important; /* ←これが重要（height:20px を殺す） */
  max-width: none;
}



@keyframes loading-bar{
  to{ transform:translateX(100%); }
}


/* =====================
  Header (fixed + blend invert)
===================== */
.header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  height:78px;
}
.header::before{
  content:"";
  position:absolute; inset:10px 12px;
  border-radius:0px;
  background:rgba(255,255,255,.60);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 36px rgba(15,25,35,.12);
  backdrop-filter:saturate(140%) blur(14px);
}
.header__inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 35px;
}

/* Logo / hamburger */
.brand-logo-wrap,
.navbtn{
  mix-blend-mode:normal;
  color:#485554;
}
.logo-img{
  height:20px;
  width:auto;
  filter:none;
  opacity:1;
}

/* nav button */
.navbtn{
  position:relative;
  width:54px;
  height:40px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.navbtn__bar{
  position:absolute;
  left:4px;
  right:9px;
  height:1px;
  background:currentColor;
  transition:transform .35s var(--ease), top .35s var(--ease), opacity .25s var(--ease);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.navbtn__bar--top{top:14px}
.navbtn__bar--bottom{top:26px}

/* morph to X */
body.is-drawer-open .navbtn__bar--top{top:20px; transform:rotate(45deg)}
body.is-drawer-open .navbtn__bar--bottom{top:20px; transform:rotate(-45deg)}

/* =====================
  HERO (logo main / minimal)
  - logo: slow float-up
  - subtitle: slow typewriter (left aligned)
  - lead: last fade-in
===================== */

.hero{
  position:relative;
  min-height:92svh;
  display:grid;
  align-items:center;
  padding-top:100px;
  overflow:hidden;
}

.hero__media{
  position:absolute;
  inset:-15% -10% -15% -10%;
  background:
    radial-gradient(800px 520px at 18% 35%, rgba(72,85,84,.18), transparent 62%),
    radial-gradient(860px 560px at 82% 45%, rgba(72,85,84,.12), transparent 62%),
    radial-gradient(980px 620px at 60% 0%,  rgba(72,85,84,.10), transparent 68%);
}

.hero__inner{
  position:relative;
  padding: 120px 0 64px;
  text-align:left; /* ←全体左揃えの基準 */
}

/* kicker */
.kicker{
  margin:0 0 50px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(72,85,84,.72);
  opacity:.85;
}

/* ===== LOGO (main) ===== */
/*
.hero__logoRow{
  margin:0 0 18px;
  opacity:0;
  transform:translateY(22px);
  filter:blur(10px);
  transition:
    opacity 1.35s var(--ease),
    transform 1.35s var(--ease),
    filter 1.35s var(--ease);
}
*/

.hero__logoRow{
  display:flex;                 /* ←中央揃えの土台 */
  justify-content:center;       /* ←横中央 */
  align-items:center;           /* ←縦中央 */
  width:100%;                   /* ←これが重要（中央基準になる） */

  margin: 0 0 80px;             /* ←下余白だけでOK */
  opacity:0;
  transform:translateY(22px);
  filter:blur(10px);
  transition:
    opacity 1.35s var(--ease),
    transform 1.35s var(--ease),
    filter 1.35s var(--ease);
}


.hero__logoRow.is-show{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* ロゴサイズ：ここが「2倍くらい」にしたいところ */
.hero__mark{
  width: min(820px, 86vw); /* ←ロゴをデカくするのはここ */
  max-width:none;
  height:auto;
  display:block;
}

/* ===== Subtitle (typewriter) ===== */
.hero__subttl{
  margin: 10px 0 18px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.12;
  color: var(--ink);

  width:100%;
  text-align:left;   /* ←完全左揃え */
  padding-left:0;
  margin-left:0;
  text-indent:0;
}

/* ===== Lead (fade in last) ===== */
.hero__lead{
  max-width: 72ch;
  font-size: 14px;
  line-height: 2.0;
  letter-spacing: .02em;
  color: rgba(72,85,84,.78);

  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
}

.hero__lead.is-show{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* actions */
.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 24px;

  opacity:0;
  transform: translateY(10px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.hero__actions.is-show{
  opacity:1;
  transform:none;
}

/* scroll hint */
.scrollhint{
  position:absolute;
  left:0; right:0;
  bottom:18px;
  display:flex;
  justify-content:center;
  opacity:.8;
}
.scrollhint span{
  font-size:12px;
  letter-spacing:.18em;
}

/* ===== Typewriter caret ===== */
[data-typewriter]{
  position:relative;
/*  white-space:pre-wrap;*/
  white-space:normal
}

[data-typewriter].is-typing::after{
  content:"";
  display:inline-block;
  width:1px;
  height:1em;
  background: currentColor;
  margin-left:.18em;
  transform: translateY(.10em);
  animation: caretBlink 1.1s step-end infinite;
  opacity:.85;
}

/* JSが動くまで「元の文字」を見せない（スペースは確保） */
[data-typewriter]{
  visibility: hidden; /* ←表示だけ消す。レイアウトは崩れない */
}

/* JS側で付けるクラス */
[data-typewriter].is-ready{
  visibility: visible;
}


@keyframes caretBlink{
  50%{ opacity:0; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero__logoRow,
  .hero__lead,
  .hero__actions{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  [data-typewriter].is-typing::after{ animation:none; }
}

/* SP tuning */
@media (max-width: 900px){
  .hero__inner{ padding: 74px 0 52px; }
  .hero__mark{ width: min(480px, 88vw); }
  .hero__subttl{ font-size: clamp(2px, 5vw, 20px); }
  .hero__lead{ font-size: 10px; }
}



/* =====================
  Buttons (shared)
===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--ink); color:#fff; box-shadow:0 14px 34px rgba(72,85,84,.22)}
.btn--ghost{background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.65); backdrop-filter:blur(10px)}



/* =====================
  Sections / cards
===================== */
.section{padding:92px 0; background:transparent}
.section--light{background:rgba(255,255,255,.55)}
.section__head{max-width:720px; margin:0 0 28px}
.h2{font-size:clamp(22px, 2.5vw, 32px); margin:10px 0 8px}
.h3{font-size:18px; margin:0 0 8px}
.p{color:var(--muted); line-height:1.95; margin:0}

.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:1.15fr .85fr}
.grid--3{grid-template-columns:repeat(3, 1fr)}

/* =====================
  Sections (alternate bg)
===================== */
.section{
  padding: 110px 0;
  background: var(--bg2); /* ← 白 */
  border-top: 1px solid rgba(72,85,84,.06);
}

.section.section--light{
  background: var(--bg);  /* ← グレー */
}

/* =====================
  Branding section upgrade
===================== */
#branding{
  position: relative;
  overflow: hidden;
}

/* 背景のうっすらアクセント（大きい光） */
#branding::before{
  content:"";
  position:absolute;
  inset:-120px -180px auto -180px;
  height: 360px;
  background:
    radial-gradient(520px 260px at 18% 40%, rgba(72,85,84,.10), transparent 62%),
    radial-gradient(520px 260px at 78% 20%, rgba(72,85,84,.07), transparent 62%);
  pointer-events:none;
  z-index:0;
}

#branding .container{ position:relative; z-index:1; }

/* 左：見出しに“ライン” */
#branding .h2{
  position:relative;
  padding-left: 18px;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
#branding .h2::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.25em;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: rgba(72,85,84,.55);
}

/* 左：文章の読みやすさ（行間・段落） */
#branding .p{
  line-height: 2.1;
  letter-spacing: .02em;
  color: rgba(72,85,84,.78);
}
#branding .p br.pc{ display:none; } /* PC改行が詰まって見えるなら一旦OFF */
@media (min-width: 900px){
  #branding .p br.pc{ display:inline; }
}

/* 右：カードをガラスっぽく＋罫線＋影 */
#branding .card{
  position:relative;
  border-radius: 0px;
  padding: 34px 34px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(72,85,84,.12);
  box-shadow:
    0 22px 70px rgba(15,25,35,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(14px);
}

/* カード内に“薄い罫線”を引いて情報を整列 */
#branding .dl > div{
  padding: 18px 0;
  border-top: 1px solid rgba(72,85,84,.10);
}
#branding .dl > div:first-child{ border-top: 0; padding-top: 0; }

/* dt（ラベル）を小さく上品に */
#branding .dl dt{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(72,85,84,.60);
  margin-bottom: 10px;
}

/* dd（内容）を読みやすく */
#branding .dl dd{
  margin:0;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: .02em;
  color: rgba(72,85,84,.85);
}

/* ddの中の“/”の並びを少し引き締めたい場合 */
#branding .dl dd{
  word-spacing: .08em;
}

/* =====================
  WHY section upgrade (SINGLE / CLEAN)
  target: .section.section--light (WHY)
  - background soft glow
  - head with left bar
  - cards: glass + hover lift
  - badge: ONLY ::after (no overlap)
===================== */

/* 背景を“ただのグレー”じゃなく、うっすら光を足す */
.section.section--light{
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.section.section--light::before{
  content:"";
  position:absolute;
  inset:-140px -220px auto -220px;
  height: 420px;
  background:
    radial-gradient(720px 320px at 18% 30%, rgba(72,85,84,.10), transparent 65%),
    radial-gradient(720px 320px at 82% 10%, rgba(72,85,84,.07), transparent 65%);
  pointer-events:none;
  z-index:0;
}
.section.section--light > .container{ position:relative; z-index:1; }

/* 見出し（WHY）を“締まる”ように */
.section.section--light .section__head{
  margin-bottom: 28px;
}

.section.section--light .section__head .kicker{
  font-size: 12px;
  letter-spacing: .26em;
  opacity: .75;
  color: rgba(72,85,84,.70);
}

/* h2に左ライン */
.section.section--light .section__head .h2{
  position: relative;
  padding-left: 18px;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}
.section.section--light .section__head .h2::before{
  content:"";
  position:absolute;
  left:0;
  top: .22em;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: rgba(72,85,84,.55);
}

/* リード文を読みやすく */
.section.section--light .section__head .p{
  color: rgba(72,85,84,.78);
  line-height: 2.05;
  letter-spacing: .02em;
  max-width: 70ch;
}

/* ===== 3カード（grid--3 の card）を上品に ===== */
.section.section--light .grid--3 .card{
  position: relative;
  border-radius: 0px;
  padding: 34px 26px 24px; /* ←上だけ多め（タグ用） */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(72,85,84,.10);
  box-shadow:
    0 18px 55px rgba(15,25,35,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* ふわっと浮く（PCだけ） */
@media (hover:hover){
  .section.section--light .grid--3 .card:hover{
    transform: translateY(-3px);
    box-shadow:
      0 28px 70px rgba(15,25,35,.12),
      0 1px 0 rgba(255,255,255,.55) inset;
  }
}

/* 見出し h3 を締める */
.section.section--light .grid--3 .h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* 本文を読みやすく */
.section.section--light .grid--3 .p{
  margin: 0;
  color: rgba(72,85,84,.78);
  line-height: 1.95;
}

/* ===== WHYバッジ：外側上に“1つだけ” ===== */
.section.section--light .grid--3 .card::after{
  content:"WHY";
  position:absolute;
  top: -12px;
  left: 18px;
  font-size: 11px;
  letter-spacing: .22em;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(72,85,84,.14);
  color: rgba(72,85,84,.70);
  box-shadow: 0 10px 30px rgba(15,25,35,.08);
  backdrop-filter: blur(10px);
  pointer-events:none;
}

/* SP：カードの余白を少し詰める */
@media (max-width: 900px){
  .section.section--light .grid--3{ gap: 14px; }
  .section.section--light .grid--3 .card{ padding: 30px 20px 20px; }
}

/* 画像枠の高さを固定して、ズレ防止 */
.biz-card__media{
  aspect-ratio: 16 / 9;   /* ここを 4/3 とかに変えると印象変わる */
  overflow: hidden;
  border-radius: 18px;
}

/* 中の画像はトリミングして綺麗にフィット */
.biz-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================
  PROCESS line grow (left rail)
===================== */
#process{
  position: relative;
}

/* 左の縦ライン（伸びる） */
#process::before{
  content:"";
  position:absolute;
  left: calc((100% - var(--container)) / 2); /* container左端に揃える */
  top: 120px;          /* 見出しに被らない位置に調整 */
  bottom: 90px;        /* セクション下の余白 */
  width: 2px;
  background: rgba(72,85,84,.18);
  border-radius: 999px;

  /* 伸びる演出 */
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s var(--ease);
  z-index: 0;

}

/* 伸びた状態 */
#process.is-show::before{
  transform: scaleY(1);
}

/* コンテンツをラインより上に */
#process .container{
  position: relative;
  z-index: 1;
}

/* スマホはライン位置を少し内側に */
@media (max-width: 900px){
  #process::before{
    left: 20px;
    top: 110px;
    bottom: 70px;
  }
}




.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.60);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(130%);
  padding:22px;
}

/* Biz cards */
.biz-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
.biz-card{
  overflow:hidden;
  border-radius:var(--radius);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.60);
  box-shadow:var(--shadow)
}
.biz-card__media img{width:100%; height:220px; object-fit:cover; display:block}
.biz-card__body{padding:22px}
.biz-card__eyebrow{font-size:12px; letter-spacing:.12em; opacity:.78; margin:0 0 10px}
.biz-card__heading{margin:0 0 10px; font-size:18px}
.biz-card__desc{margin:0 0 12px; color:var(--muted); line-height:1.9}
.biz-card__meta{margin:0 0 12px; font-size:12px; color:rgba(72,85,84,.72)}
.biz-card__link{display:inline-flex; gap:8px; font-weight:700}
.biz-card__link:hover{text-decoration:underline}

/* =====================
  WHAT WE DO (biz) hover upgrade
  - image zoom on card hover
  - link underline L->R + lift
===================== */

/* カード全体を上品に（必要なら） */
.biz-card{
  overflow: hidden; /* 画像ズームがはみ出さない */
}

/* 画像の器 */
.biz-card__media{
  overflow: hidden;
  border-radius: 0px; /* 角丸があるなら合わせる */
}

/* 画像ズーム（hover/focus-withinで） */
.biz-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .9s var(--ease), filter .9s var(--ease);
  will-change: transform;
}

/* カードにカーソルで画像ズーム */
@media (hover:hover){
  .biz-card:hover .biz-card__media img{
    transform: scale(1.06);
    filter: saturate(1.02);
  }
}

/* キーボード操作でも同様に */
.biz-card:focus-within .biz-card__media img{
  transform: scale(1.06);
}

/* ---------------------
  「詳細を見る」リンク：浮き＋下線 L->R
--------------------- */
.biz-card__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px; /* 下線スペース */
  transform: translateY(0);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

/* 下線 */
.biz-card__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
  opacity: .6;
}

/* hoverで “浮く” + 下線が伸びる */
@media (hover:hover){
  .biz-card__link:hover{
    transform: translateY(-1px);
    opacity: .92;
  }
  .biz-card__link:hover::after{
    transform: scaleX(1);
  }
}

/* フォーカス時も同様 */
.biz-card__link:focus-visible{
  outline: none;
}
.biz-card__link:focus-visible::after{
  transform: scaleX(1);
}

/* クリックできる感じを少し */
.biz-card__link:active{
  transform: translateY(0);
}

/* 2重下線を防ぐ（元のunderlineを消す） */
.biz-card__link{
  text-decoration: none !important;
}

/* =====================
  WHAT WE DO（.biz）見出しに左縦ライン（h2統一版）
===================== */
.biz .h2{
  position: relative;
  padding-left: 18px;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.biz .h2::before{
  content:"";
  position:absolute;
  left:0;

  top:50%;
  transform: translateY(-50%);

  width:6px;
  height:1em;
  border-radius:999px;
  background: rgba(72,85,84,.55);
}

/* SP微調整（<=520px） */
@media (max-width: 520px){
  .biz .h2{
    padding-left: 14px;
    line-height: 1.15;
  }
  .biz .h2::before{
    width:5px;
    height:0.9em;
  }
}


/* =====================
  PROCESS section upgrade
  target: #process
===================== */

/* 背景：section--light を綺麗に保つ（WHYと統一） */
#process.section--light{
  position: relative;
  overflow: hidden;
}

#process.section--light::before{
  content:"";
  position:absolute;
  inset:-160px -240px auto -240px;
  height: 460px;
  background:
    radial-gradient(760px 340px at 20% 25%, rgba(72,85,84,.10), transparent 65%),
    radial-gradient(760px 340px at 85% 10%, rgba(72,85,84,.07), transparent 65%);
  pointer-events:none;
  z-index:0;
}

#process.section--light > .container{
  position:relative;
  z-index:1;
}

/* 見出し：左ライン入れて締める（WHYと統一） */
#process .section__head .h2{
  position:relative;
  padding-left: 18px;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}
#process .section__head .h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:6px;
  height:1.1em;
  border-radius:999px;
  background: rgba(72,85,84,.55);
}

#process .section__head .p{
  max-width: 72ch;
  line-height: 2.05;
  letter-spacing: .02em;
  color: rgba(72,85,84,.78);
}

/* ===== ステップ全体：縦ライン（タイムライン感） ===== */
.process-steps{
  list-style:none;
  padding: 0;
  margin: 34px 0 0;

  display:grid;
  gap: 18px;
}

/* 1つのカード */
.process-step{
  position: relative;
  border-radius: 22px;
  padding: 26px 28px 22px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(72,85,84,.10);
  box-shadow:
    0 18px 55px rgba(15,25,35,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(12px);

  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* hoverでふわっと */
@media (hover:hover){
  .process-step:hover{
    transform: translateY(-3px);
    box-shadow:
      0 28px 70px rgba(15,25,35,.12),
      0 1px 0 rgba(255,255,255,.55) inset;
  }
}

/* 左の縦ライン：カード内に通す */
.process-step::before{
  content:"";
  position:absolute;
  left: 26px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(72,85,84,.10);
}

/* ===== 上部：番号 + 見出し ===== */
.process-step__head{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

/* 丸い番号 */
.process-step__num{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  display:grid;
  place-items:center;

  font-weight: 700;
  letter-spacing: .06em;

  background: rgba(72,85,84,.08);
  border: 1px solid rgba(72,85,84,.14);
  color: rgba(72,85,84,.85);

  box-shadow: 0 14px 34px rgba(15,25,35,.08);
}

/* 英語ラベル */
.process-step__en{
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(72,85,84,.60);
}

/* 日本語タイトル */
.process-step__ja{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* 説明文 */
.process-step__desc{
  margin: 0 0 14px;
  color: rgba(72,85,84,.78);
  line-height: 1.95;
}

/* アウトプット（箇条書き） */
.process-step__out{
  margin: 0;
  padding-left: 0;
  list-style: none;

  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* チップ風 */
.process-step__out li{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;

  background: rgba(72,85,84,.06);
  border: 1px solid rgba(72,85,84,.10);
  color: rgba(72,85,84,.78);
}

/* ===== SP ===== */
@media (max-width: 900px){
  .process-step{
    padding: 22px 20px 18px;
  }
  .process-step::before{
    left: 20px;
  }
  .process-step__num{
    width: 40px;
    height: 40px;
  }
  .process-step__ja{
    font-size: 17px;
  }
}

@media (max-width: 520px){
  .process-step__out{
    gap: 8px;
  }
  .process-step__out li{
    font-size: 12px;
    padding: 7px 10px;
  }
}
/* =====================
  PROCESS reveal (step-by-step)
  - only for #process
===================== */
#process .process-step{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease);
  will-change: opacity, transform, filter;
}

#process.is-show .process-step{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 1→2→3→4 の遅延（順番に出す） */
#process.is-show .process-step:nth-child(1){ transition-delay: .05s; }
#process.is-show .process-step:nth-child(2){ transition-delay: .18s; }
#process.is-show .process-step:nth-child(3){ transition-delay: .31s; }
#process.is-show .process-step:nth-child(4){ transition-delay: .44s; }

/* 動きを減らす設定の人は即表示 */
@media (prefers-reduced-motion: reduce){
  #process .process-step{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* =====================
  FIT section upgrade
  target: #fit (white section)
===================== */
#fit{
  position: relative;
  background: var(--bg2); /* 白 */
  overflow: hidden;
}

/* うっすら光（背景に品） */
#fit::before{
  content:"";
  position:absolute;
  inset:-140px -220px auto -220px;
  height: 420px;
  background:
    radial-gradient(720px 320px at 18% 30%, rgba(72,85,84,.08), transparent 65%),
    radial-gradient(720px 320px at 82% 10%, rgba(72,85,84,.06), transparent 65%);
  pointer-events:none;
  z-index:0;
}
#fit > .container{ position:relative; z-index:1; }

/* 見出しをWHYと同じ“左ライン” */
#fit .section__head .h2{
  position: relative;
  padding-left: 18px;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}
#fit .section__head .h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:6px;
  height:1.1em;
  border-radius:999px;
  background: rgba(72,85,84,.55);
}

#fit .section__head .p{
  color: rgba(72,85,84,.78);
  line-height: 2.05;
  letter-spacing: .02em;
  max-width: 72ch;
}

/* =====================
  FIT cards
===================== */

/* 4枚のカードを自然な2列に */
.fit-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

/* カード本体 */
.fit-card{
  position: relative;
  border-radius: 22px;
  padding: 26px 26px 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(72,85,84,.10);
  box-shadow:
    0 18px 55px rgba(15,25,35,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow:hidden;
}

/* うっすら上品なハイライト */
.fit-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(72,85,84,.07), transparent 55%),
    radial-gradient(520px 220px at 90% 10%, rgba(72,85,84,.05), transparent 55%);
  opacity:.85;
  pointer-events:none;
}

/* hoverで浮く（PCのみ） */
@media (hover:hover){
  .fit-card:hover{
    transform: translateY(-3px);
    box-shadow:
      0 28px 70px rgba(15,25,35,.12),
      0 1px 0 rgba(255,255,255,.55) inset;
  }
}

/* タイトル */
.fit-card__title{
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* 本文 */
.fit-card__desc{
  margin: 0 0 16px;
  color: rgba(72,85,84,.78);
  line-height: 1.95;
  letter-spacing: .02em;
}

/* タグ（pill） */
.fit-card__tag{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(72,85,84,.78);
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(72,85,84,.06);
  border: 1px solid rgba(72,85,84,.12);
  margin: 0;
}

/* =====================
  FIT CTA (single card)
===================== */
.fit-cta{
  margin-top: 22px;
}

.fit-cta__card{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 18px;

  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(72,85,84,.10);
  box-shadow: 0 18px 55px rgba(15,25,35,.08);
  backdrop-filter: blur(12px);
}

.fit-cta__lead{
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fit-cta__sub{
  margin: 0;
  color: rgba(72,85,84,.78);
  line-height: 1.9;
}

/* ボタンを右に寄せて“締まる” */
.fit-cta__action{
  display:flex;
  justify-content:flex-end;
}

/* SPは縦積みで自然に */
@media (max-width: 900px){
  .fit-cta__card{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px;
  }
  .fit-cta__action{
    justify-content:flex-start;
  }
}

/* =====================
  FIT CTA responsive fix
===================== */
@media (max-width: 900px){
  .fit-cta{
    margin-top: 16px;
  }

  .fit-cta__card{
    padding: 18px 16px;
    gap: 12px;
  }

  /* テキストを少し詰めて“はみ出し感”を消す */
  .fit-cta__lead{ font-size: 16px; }
  .fit-cta__sub{ font-size: 14px; }

  /* ボタンをセンター&気持ち大きめで揃える */
  .fit-cta__action{
    justify-content: center;   /* ←左寄せをやめる */
  }

  .fit-cta__action .btn{
    width: 100%;              /* ←カード幅いっぱい */
    max-width: 360px;         /* ←伸びすぎ防止 */
    justify-content: center;
    padding: 14px 18px;       /* ←SPで押しやすい */
  }
}



/* Works */
.works{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.work{
  border-radius:var(--radius);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.60);
  box-shadow:var(--shadow);
  overflow:hidden
}
.work__thumb{height:180px; background:linear-gradient(135deg, rgba(155,231,255,.55), rgba(255,210,122,.25))}
.work__meta{padding:18px}
.work__title{margin:0 0 6px; font-weight:700}
.work__desc{margin:0; color:var(--muted)}

/* =====================
  WORKS (upgrade)
===================== */

#works .section__head{
  margin-bottom: 26px;
}

/* 作品一覧 */
.works{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

/* カード本体 */
.work{
  position:relative;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(72,85,84,.10);
  box-shadow: 0 18px 55px rgba(15,25,35,.10);
  overflow:hidden;
  transform: translateY(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* hoverで浮く */
@media (hover:hover){
  .work:hover{
    transform: translateY(-4px);
    box-shadow: 0 28px 70px rgba(15,25,35,.12);
  }
}

/* サムネ */
.work__thumb{
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position:center;
  transform: scale(1);
  transition: transform .6s var(--ease), filter .6s var(--ease);
  filter: saturate(1) contrast(1);
}

/* hoverでズーム */
@media (hover:hover){
  .work:hover .work__thumb{
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.03);
  }
}

/* メタ */
.work__meta{
  padding: 18px 18px 16px;
}

.work__title{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink);
}

.work__desc{
  margin: 0;
  font-size: 13px;
  color: rgba(72,85,84,.78);
  line-height: 1.75;
}

/* 右下の矢印＋下線演出 */
.work::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 1px;
  background: rgba(72,85,84,.14);
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .45s var(--ease), background .45s var(--ease);
}

.work::before{
  content:"→";
  position:absolute;
  right: 18px;
  bottom: 10px;
  font-size: 14px;
  color: rgba(72,85,84,.70);
  transform: translateX(-6px);
  transition: transform .45s var(--ease), color .45s var(--ease);
}

@media (hover:hover){
  .work:hover::after{
    transform: scaleX(1);
    background: rgba(72,85,84,.22);
  }
  .work:hover::before{
    transform: translateX(0);
    color: rgba(72,85,84,.90);
  }
}

/* レスポンシブ */
@media (max-width: 900px){
  .works{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .works{ grid-template-columns: 1fr; }
  .work__meta{ padding: 16px; }
}

/* =====================
  WORKS card: clean fit
===================== */
.work{
  border-radius: 22px;
  overflow: hidden;                /* ←これが一番効く */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(72,85,84,.10);
  box-shadow: 0 18px 55px rgba(15,25,35,.10);
}

/* サムネはカード幅いっぱいで上に固定 */
.work__thumb{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0;                /* ←角丸は .work に任せる */
  border-bottom: 1px solid rgba(72,85,84,.10);

  background:
    radial-gradient(520px 220px at 18% 20%, rgba(72,85,84,.10), transparent 60%),
    radial-gradient(520px 220px at 82% 10%, rgba(72,85,84,.08), transparent 60%),
    linear-gradient(135deg, rgba(72,85,84,.10), rgba(72,85,84,.04));
}

/* 画像を入れた時にピッタリ収める */
.work__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}




/* News */
.news-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.news-item{
  border-radius:14px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.60);
  padding:14px 16px;
  display:flex;
  gap:12px;
  align-items:center
}
.news-item__date{font-size:12px; opacity:.7}
.news-item__link{font-weight:700}
.news-item__link:hover{text-decoration:underline}

/* =====================
  NEWS (simple list like ref)
===================== */
#news .news-head{ margin-bottom: 26px; }

.news-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top: 1px solid var(--line);
}

.news-item{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items:center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.news-item__date{
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(72,85,84,.55);
  white-space: nowrap;
}

.news-item__link{
  position:relative;
  display:inline-block;
  font-size: 18px;
  font-weight: 500;                 /* 600→500 */
  color: rgba(72,85,84,.78);        /* 濃すぎ回避 */
  line-height: 1.4;
  padding-bottom: 6px; /* 下線の余白 */
}

/* 下線：1本だけ（hoverで左→右に伸びる） */
.news-item__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: currentColor;         /* これが一番綺麗 */
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

@media (hover:hover){
  .news-item__link:hover::after{
    transform: scaleX(1);
  }
}

/* SP */
@media (max-width: 720px){
  .news-item{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .news-item__link{ font-size: 16px; }
}

.news-more{ margin-top: 18px; }

.news-more__link{
  position:relative;
  display:inline-block;
  color: rgba(72,85,84,.78);
  font-weight: 600;
  padding-bottom: 6px;
}

.news-more__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: currentColor;
  opacity:.55;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .35s var(--ease);
}

@media (hover:hover){
  .news-more__link:hover{ color: rgba(72,85,84,.92); }
  .news-more__link:hover::after{ transform: scaleX(1); }
}

/* =========================================
  NEWS：下線を1本（流れる線）だけにする
========================================= */

/* 静的な下線を完全に無効化 */
.news-item__link {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 念のため、before側も使ってたら殺す */
.news-item__link::before {
  content: none !important;
}

/* after（←左から右に流れる線）だけを有効にする */
.news-item__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

/* hoverで流れる */
.news-item__link:hover::after {
  transform: scaleX(1);
}

/* News archive (tags) */
.news-tag{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(72,85,84,.20);
  color: rgba(72,85,84,.78);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  font-size:13px;
  margin: 0 8px 8px 0;
}
.news-tag.is-active{
  border-color: rgba(72,85,84,.42);
  color: rgba(72,85,84,.92);
}
@media (max-width:520px){
  .news-tag{ font-size:12px; height:28px; padding:0 10px; }
}



/* =====================
  COMPANY (double)
===================== */
.company{
  align-items: start;
  gap: 26px;
}

.company__left .h2{
  position: relative;
  padding-left: 18px;
  margin: 10px 0 12px;
}
.company__left .h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:6px;
  height:1.1em;
  border-radius:999px;
  background: rgba(72,85,84,.55);
}

.company__card{
  padding: 26px 26px 22px;
}

.company__table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.company__table th,
.company__table td{
  padding: 14px 0;
  border-bottom: 1px solid rgba(72,85,84,.12);
  vertical-align: top;
}

.company__table th{
  width: 110px;
  font-weight: 600;
  color: rgba(72,85,84,.75);
  letter-spacing: .02em;
}
.company__table td{
  color: rgba(72,85,84,.88);
  line-height: 1.8;
}

.company__maplink{
  display: inline-block;
  margin-top: 16px;
  font-weight: 500;
  color: rgba(72,85,84,.80);
  padding-bottom: 6px;
  position: relative;
}

/* 下線 1本 伸びる */
.company__maplink::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: currentColor;
  opacity:.55;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
@media (hover:hover){
  .company__maplink:hover{ color: rgba(72,85,84,.92); }
  .company__maplink:hover::after{ transform: scaleX(1); }
}

/* SP */
@media (max-width: 900px){
  .company{ gap: 16px; }
  .company__table th{ width: 92px; }
}

/* =====================
  CONTACT (double)
===================== */
.contact{
  align-items: start;
  gap: 26px;
}

.contact__left .h2{
  position: relative;
  padding-left: 18px;
  margin: 10px 0 12px;
}
.contact__left .h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  width:6px;
  height:1.1em;
  border-radius:999px;
  background: rgba(72,85,84,.55);
}

.contact__meta{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(72,85,84,.10);
  backdrop-filter: blur(10px);
}

.contact__metaTitle{
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(72,85,84,.82);
  letter-spacing: .02em;
}

.contact__metaList{
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(72,85,84,.72);
  line-height: 1.9;
  font-size: 13px;
}

.contact__card{
  padding: 26px 26px 22px;
}

/* input見た目（すでにあるなら不要） */
.contact__card input,
.contact__card select,
.contact__card textarea{
  width: 100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(72,85,84,.14);
  background: rgba(255,255,255,.85);
  outline: none;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.contact__card input:focus,
.contact__card select:focus,
.contact__card textarea:focus{
  border-color: rgba(72,85,84,.26);
  box-shadow: 0 0 0 6px rgba(72,85,84,.08);
}

/* SP */
@media (max-width: 900px){
  .contact{ gap: 16px; }
  .contact__card{ padding: 22px 18px 18px; }
}


/* Table */
.tablewrap{border-radius:var(--radius)}
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius)}
.table th,.table td{padding:14px 14px; border-bottom:1px solid rgba(15,25,35,.10); vertical-align:top}
.table th{width:28%; text-align:left; color:rgba(72,85,84,.86)}
.table td{color:var(--muted)}
.note{font-size:12px; color:rgba(72,85,84,.60)}

/* Form */
.form label{display:block; font-weight:700; font-size:13px}
.form input,.form select,.form textarea{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,25,35,.12);
  background:rgba(255,255,255,.78);
  font:inherit;
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.form__actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px}
.req{font-size:11px; margin-left:6px; opacity:.75}
.toast{margin-top:10px; font-size:12px; color:rgba(72,85,84,.72)}

/* =====================
  Drawer (clean)
===================== */
.drawer{position:fixed; inset:0; z-index:200; pointer-events:none;}
.drawer[aria-hidden="false"]{pointer-events:auto;}

.drawer__bg{
  position:absolute; inset:0;
  background:rgba(72,85,84,.22);
  opacity:0;
  transition:opacity .35s var(--ease);
  z-index:0;
}
.drawer__panel{
  position:absolute; inset:0;
  display:flex;
  justify-content:flex-end;
  z-index:1;
}
.drawer__shell{
  width:min(1120px, 78vw);
  height:100%;
  background:var(--panel);
  border-left:1px solid var(--line-strong);
  box-shadow:-18px 0 55px rgba(15,25,35,.16);
  padding:34px 34px 24px;
  transform:translateX(26px);
  opacity:0;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
  overflow:auto;
}

/* open state */
body.is-drawer-open .drawer[aria-hidden="false"] .drawer__bg{opacity:1}
body.is-drawer-open .drawer[aria-hidden="false"] .drawer__shell{transform:none; opacity:1}

/* grid */
.drawer__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:44px;
  margin-top:20px; /* ←カテゴリ開始位置はここ */
  align-items:start;
}
.drawer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:20px; /*カテゴリーの行間*/
}

/* links */
.drawer__link{
  display:inline-flex;
  gap:10px;
  align-items:baseline;
  padding:10px 6px;
  position:relative;
}
.drawer__link .en{
  font-weight:400;  /* 文字の太さ */
  letter-spacing:.04em;
  font-size:18px;
  line-height:1.15;
}
.drawer__link .ja{
  font-size:12px;
  color:var(--muted);
  line-height:1.15;
}
.drawer__link .pipe{
  width:1px;
  height:12px;
  background:var(--line-strong);
  transform:translateY(1px);
}
/* underline */
.drawer__link::after{
  content:"";
  position:absolute;
  left:6px; right:6px;
  bottom:2px;
  height:1px;
  background:rgba(72,85,84,.92);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.drawer__link:hover::after,
.drawer__link:focus-visible::after{transform:scaleX(1)}

/* meta right */
.drawer__meta{padding-top:0; color:var(--ink);}

.drawer__eyebrow{
  font-size:9px;                 /* Real Estate.. */
  letter-spacing:.12em;
  opacity:.85;
  margin:0 0 22px;
  color:var(--muted);
}
.drawer__logo{
  display:block;
  width:min(190px, 100%);
  height:auto;
  margin:0 0 22px;
}

/* SNS (icon only / no circle) */
.drawer__sns{
  display:flex;
  gap:18px;
  align-items:center;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.drawer__snsbtn{
  width:auto; height:auto; padding:0;
  border:0; background:transparent;
  border-radius:0;
  box-shadow:none;
  outline:0;
  -webkit-tap-highlight-color: transparent;
}
.drawer__snsbtn::before,
.drawer__snsbtn::after{content:none !important;}
.drawer__snsico{
  width:24px;
  height:24px; /* SNSサイズ */
  fill:var(--ink);
  display:block;
}

/* address */
.drawer__addr{margin:0 0 16px;} /* google map　高さ */
.drawer__city{font-size:13px; margin:0 0 4px; font-weight:550;}
.drawer__jp{font-size:12px; margin:0; opacity:.8; color:var(--muted);}

/* map */
.drawer__map{
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(72,85,84,.25);
}
.drawer__map:hover{
  border-bottom-color:rgba(72,85,84,.60);
  transform:translateY(-1px);
}

/* drawer internal close not used */
.drawer__close{display:none !important;}

/* =====================
  Drawer open: show ONLY morph-X on top
===================== */
body.is-drawer-open .header{
  z-index:1000;
  pointer-events:none;
}
body.is-drawer-open .header::before{
  opacity:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
body.is-drawer-open .brand-logo-wrap{opacity:0 !important;}

/* keep only navbtn */
body.is-drawer-open .navbtn{
  pointer-events:auto;
  position:fixed;
  top:18px; right:18px;
  z-index:9999;
  mix-blend-mode:normal;
  color:var(--ink);
}
body.is-drawer-open .navbtn__bar{filter:none;}

/* =====================
  Inview animations (soft float)
===================== */
.inview{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
  transition:opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
  will-change:transform, opacity, filter;
}
.inview.is-inview{opacity:1; transform:none; filter:blur(0)}
.fade-up{transform:translateY(22px)}
.fade-b{transform:translateY(12px)}
.fade-a{transform:translateY(14px)}
.slide-left{transform:translateX(-22px)}
.slide-right{transform:translateX(22px)}
.anim-scale{transform:scale(.97)}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}

/* =========================================================
  FOOTER + PAGETOP (NO DUPLICATES)
========================================================= */

/* ---------- Footer base ---------- */
.site-footer{
  background:#fff;
  padding:56px 0 32px;
}

.site-footer__inner{
  width:var(--container);
  margin-inline:auto;
}

/* ---------- Top row (kicker + logo) ---------- */
.site-footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:28px;
}

/* [CHANGE] footer brand: 左寄せ固定 */
.site-footer__brand{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;     /* ★追加：ロゴ/キッカーを左寄せ */
  text-align:left;            /* ★追加：テキストも左寄せ */
}


.site-footer__kicker{
  margin:0;
  font-size:9px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(72,85,84,.65);
}

/* [CHANGE] footer logo img: margin auto 防止 */
.site-footer__logoimg{
  width:190px;
  height:auto;
  display:block;
  opacity:.95;
  margin:0 !important;        /* ★追加：中央寄せの原因を潰す */
}



/* ---------- (optional) rule line: hidden ---------- */
.site-footer__rule{
  display:none !important;
}

/* ---------- Mid row layout (PC default) ----------
  nav | (sns + address)
  ※SNSを「住所の上」に置くため、SNSは .site-footer__mid の子要素として配置されている前提
----------------------------------------------- */
.site-footer__mid{
  display:grid;
  grid-template-columns:minmax(520px, 1fr) auto; /* ←左(nav)の最小幅が効く */
  column-gap:60px;                               /* ← nav ↔ 住所の距離（調整ここ） */
  row-gap:0;
  padding:34px 0 34px;
  align-items:start;
}

/* nav */
.site-footer__nav{
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  grid-template-columns:1fr 2.4fr; /* ←左列(Our branding等)を少し広め */
  column-gap:18px;                 /* ←2列ナビの間隔（調整ここ） */
  row-gap:18px;
}

.site-footer__navcol{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.site-footer__navcol a{
  font-size:16px;
  font-weight:400;
  letter-spacing:-0.01em;
  color:rgba(72,85,84,.78);
}

/* sns (icon only / no circle) */
.site-footer__sns{
  grid-column:2;
  grid-row:1;
  justify-self:start;   /* 左揃え固定 */
  align-self:start;     /* 上揃え固定 */
  display:flex;
  gap:16px;
  padding:0;
  margin:0 0 6px;       /* ← SNS ↔ 住所の間隔（縮めるならここ） */
  list-style:none;
}

.site-footer__sns a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  width:auto;
  height:auto;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}

.site-footer__sns svg{
  width:28px;
  height:28px;
  color:rgba(72,85,84,.75);
}

@media (hover:hover){
  .site-footer__sns a:hover{
    opacity:.7;
    transform:translateY(-1px);
  }
}

/* address */
.site-footer__addr{
  grid-column:2;
  grid-row:2;
  justify-self:start; /* 左寄せ固定（中央寄り防止） */
  align-self:start;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:rgba(72,85,84,.70);
}

.site-footer__addr p{
  margin:0;
  font-size:12px;
  line-height:2.0;
}

.site-footer__map{
  display:inline-flex;
  justify-content:flex-start;
  font-size:12px;
  font-weight:300;
  color:rgba(72,85,84,.78);
}

/* ---------- Bottom row ---------- */
.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:18px;
  border-top:none; /* 上下線を消す */
}

.site-footer__copy{
  margin:0;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(72,85,84,.50);
}

.site-footer__backtop{
  font-size:12px;
  font-weight:500;
  color:rgba(72,85,84,.65);
}

/* ---------- Underline (ONE LINE / text-width) ---------- */
.u-underline{
  position:relative;
  display:inline-flex;
  width:fit-content;
  text-decoration:none !important;
  border-bottom:none !important;
  padding-bottom:6px;
}

.u-underline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:100%;
  background:rgba(72,85,84,.38);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}

@media (hover:hover){
  .u-underline:hover::after{
    transform:scaleX(1);
  }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .site-footer{
    padding:46px 0 26px;
  }

  .site-footer__top{
    padding-bottom:2px;
  }

  .site-footer__logoimg{
    width:165px;
  }

  /* 1列にして、SNSを「ナビ(カテゴリー)と住所の間」へ */
  .site-footer__mid{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:18px;
    padding:28px 0 28px;
  }

  .site-footer__nav{
    grid-column:1;
    grid-row:1;
    column-gap:34px;
    row-gap:18px;
  }

  .site-footer__sns{
    grid-column:1;
    grid-row:2;
    margin:0; /* ここは間隔を詰めたいなら row-gap 側で */
  }

  .site-footer__addr{
    grid-column:1;
    grid-row:3;
  }
}

@media (max-width:520px){
  .site-footer__top{
    flex-direction:column;
    gap:16px;
  }

  /* SPでもカテゴリーは2列 */
  .site-footer__nav{
    grid-template-columns:1fr 1fr;
    column-gap:34px;
    row-gap:18px;
  }
	
  .site-footer__logoimg{
    width:150px;  /* ←スマホ用 */
  }

  .site-footer__navcol a{
    font-size:13px;
  }

  .site-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---------- Pagetop button ---------- */
.pagetop{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 16px 50px rgba(15,25,35,.14);
  display:grid;
  place-items:center;
  backdrop-filter:blur(14px);
}

/* タブレット */
@media (max-width: 900px){
  .site-footer__kicker{
    font-size: 8px;
    letter-spacing: .24em;
  }
}

/* スマホ */
@media (max-width: 520px){
  .site-footer__kicker{
    font-size: 7.5px;   /* 小さめにしたいなら 7px〜8pxが綺麗 */
    letter-spacing: .22em;
  }
}


/* =====================
  Responsive
===================== */
.sp{display:none}
@media (max-width: 900px){
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .biz-grid{grid-template-columns:1fr}
  .works{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}

  /* drawer shell */
  .drawer__shell{
    width:100vw;
    padding:28px 60px 26px; /* 上 右左 下  調整*/
  }

  /* menu: 2 columns top */
  .drawer__grid{
    grid-template-columns:1fr 1fr;
    gap:32px 4px; /* 行間  列間 */
    margin-top:120px; /* 上のスペース */
    align-items:start;
  }

  /* meta: full width under menu */
  .drawer__meta{
    grid-column:1 / -1;
    margin-top:22px;
    display:flex;
    flex-direction:column;
  }

  /* order inside meta: SNS → eyebrow → logo → addr → map */
  .drawer__sns{order:1;}
  .drawer__eyebrow{
    order:2;
    margin:32px 0 26px;
  }
  .drawer__logo{order:3; width:min(180px, 100%); margin:0 0 26px;}
  .drawer__addr{order:4; margin:0 0 18px;}
  .drawer__map{order:5; margin-top:0; align-self:flex-start;}

  /* link scale on SP */
  .drawer__link{padding:18px 0;}
  .drawer__link .en{font-size:14px;}
  .drawer__link .ja{font-size:10px;}

  /* header x position */
  body.is-drawer-open .navbtn{top:14px; right:14px;}

  .sp{display:inline}
  .pc{display:none}
}

@media (max-width: 520px){

  /* =========================
    A) 外枠：左右余白 / 上の空き
    - 左右：18〜24
    - 上：18〜28（×ボタンとの距離）
  ========================= */
  .drawer__shell{
    padding: 22px 20px 18px;  /* 上 / 左右 / 下 */
  }

  /* =========================
    B) カテゴリーの開始位置＆2列の詰まり
    - margin-top：上スペース（50〜120）
    - gap：行間（12〜20）/ 列間（12〜26）
    - grid-template-columns：左右の列比率も調整可能
  ========================= */
  .drawer__grid{
    margin-top: 80px;
    gap: 16px 18px;

    /* 左列を少し広くしたいなら 1.1fr 0.9fr など */
    grid-template-columns: 1fr 1fr;
  }

  /* =========================
    C) 1行（リンク）の縦余白＆タップしやすさ
    - padding：上下（10〜18）で密度調整
  ========================= */
  .drawer__link{
    padding: 14px 0;
  }

  /* =========================
    D) 英日テキストのバランス
    - en：14〜16
    - ja：9〜11
    - line-height：詰まり防止
    - pipe：高さ/位置ズレ調整
  ========================= */
  .drawer__link .en{
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: .02em; /* 0〜.06で微調整 */
  }

  .drawer__link .ja{
    font-size: 10px;
    line-height: 1.2;
  }

  .drawer__link{
    gap: 10px; /* en | ja の間隔（8〜14） */
  }

  .drawer__link .pipe{
    height: 11px;          /* 10〜13 */
    transform: translateY(1px); /* 0〜2px */
    opacity: .6;           /* 0.4〜0.8 */
  }

  /* =========================
    任意：×ボタン位置も合わせる（必要なら）
  ========================= */
  body.is-drawer-open .navbtn{
    top: 14px;
    right: 14px;
  }
}


/* =====================
  Optional: custom cursor (if you enable it)
===================== */
.cursor{position:fixed; inset:0; pointer-events:none; z-index:999; display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  .cursor__inner{
    width:18px; height:18px;
    border-radius:999px;
    border:1px solid rgba(72,85,84,.40);
    transform:translate(-50%, -50%);
    position:absolute;
    left:var(--cx, -999px);
    top:var(--cy, -999px);
    transition:width .2s var(--ease), height .2s var(--ease), background .2s var(--ease);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(6px);
  }
  body.cursor-hover .cursor__inner{
    width:34px; height:34px;
    background:rgba(72,85,84,.14);
  }
}

/* =========================
  Mobile Optimize (<= 900 / <= 520)
  - grid崩れ・文字サイズ・余白・カード内の詰まりを調整
  - 既存CSSの一番下に貼る（上書き優先）
========================= */

/* 共通：はみ出し事故を止める */
img, svg { max-width: 100%; height: auto; }
* { min-width: 0; }
html { -webkit-text-size-adjust: 100%; } /* iOSの勝手拡大対策 */

/* 余白と文字のベース */
.section{
  padding: 88px 0; /* PC/タブレット側の想定 */
}

@media (max-width: 900px){
  .section{
    padding: 64px 0;
  }
}

@media (max-width: 520px){
  .section{
    padding: 52px 0;
  }

  /* コンテナの横余白（スマホで詰め過ぎ防止） */
  .container{
    width: min(100%, 1080px); /* 念のため */
    padding-inline: 18px;
  }

  /* 見出し周り */
  .kicker{
    font-size: 11px;
    letter-spacing: .22em;
  }

  .h2{
    font-size: 20px;   /* 26〜30で調整 */
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .h3{
    font-size: 16px;
    line-height: 1.35;
  }

  .p{
    font-size: 14px;   /* 14〜16で調整 */
    line-height: 1.8;
  }

  /* PCだけ改行の <br class="pc"> をスマホで無効 */
  br.pc{ display:none; }

  /* カード共通 */
  .card{
    border-radius: 16px;
    padding: 16px 14px;
  }

  /* 2カラム系（grid--2 / company / contact）を1カラムに */
  .grid--2{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* 3カラム（grid--3）も1カラムに */
  .grid--3{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* セクション見出し下の余白 */
  .section__head{
    margin-bottom: 18px;
  }
}

/* =========================
  Branding（dlの読みやすさ）
========================= */
@media (max-width: 520px){
  .dl dt{
    font-size: 12px;
    letter-spacing: .12em;
    margin-bottom: 4px;
  }
  .dl dd{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================
  What we do（biz-card）
  - 画像→本文の縦並び
  - 文字量が多いので詰めすぎない
========================= */
@media (max-width: 520px){
  .biz-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .biz-card{
    border-radius: 18px;
    overflow: hidden; /* 角丸の中に収める */
  }

  .biz-card__media{
    aspect-ratio: 16 / 10; /* スマホで縦に伸びすぎ防止 */
    overflow: hidden;
  }
  .biz-card__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }

  .biz-card__body{
    padding: 16px;
  }

  .biz-card__eyebrow{
    font-size: 12px;
    letter-spacing: .18em;
  }

  .biz-card__heading{
    font-size: 18px;
    line-height: 1.35;
    margin-top: 6px;
  }

  .biz-card__desc{
    font-size: 14px;
    line-height: 1.8;
    margin-top: 10px;
  }

  .biz-card__meta{
    font-size: 12px;
    line-height: 1.7;
    opacity: .85;
    margin-top: 10px;
  }

  .biz-card__link{
    display: inline-flex;
    margin-top: 12px;
    font-size: 14px;
  }
}

/* =========================
  Process（ol/liが詰まりすぎるのを解消）
========================= */
@media (max-width: 520px){
  .process-steps{
    display: grid;
    gap: 12px;
    padding-left: 0;
  }

  .process-step{
    border-radius: 18px;
    padding: 16px;
  }

  .process-step__num{
    font-size: 12px;
  }

  .process-step__ja{
    font-size: 16px;
    line-height: 1.3;
  }

  .process-step__desc{
    font-size: 14px;
    line-height: 1.8;
  }

  .process-step__out{
    margin-top: 10px;
    padding-left: 18px;
  }
  .process-step__out li{
    font-size: 13px;
    line-height: 1.7;
  }
}

/* =========================
  Fit（カード + CTA）
========================= */
@media (max-width: 520px){
  .fit-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fit-card{
    padding: 16px;
    border-radius: 18px;
  }

  .fit-card__title{
    font-size: 17px;
    line-height: 1.35;
  }
  .fit-card__desc{
    font-size: 14px;
    line-height: 1.85;
    margin-top: 8px;
  }
  .fit-card__tag{
    font-size: 12px;
    margin-top: 10px;
  }

  .fit-cta__card{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
  }

  .fit-cta__lead{
    font-size: 16px;
    line-height: 1.5;
  }
  .fit-cta__sub{
    font-size: 13px;
    line-height: 1.7;
  }

  .btn{
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 999px;
    font-size: 15px;
  }
}

/* =========================
  Works（カード内の崩れ対策）
========================= */
@media (max-width: 520px){
  .works{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .work{
    border-radius: 18px;
    overflow:hidden;
  }

  .work__thumb{
    height: 170px; /* 160〜200で調整 */
  }

  .work__meta{
    padding: 14px 16px;
  }

  .work__title{
    font-size: 15px;
    line-height: 1.6;
  }
  .work__desc{
    font-size: 13px;
    line-height: 1.7;
    opacity: .85;
  }
}

/* =========================
  News（リンクが太すぎ/大きすぎ対策）
========================= */
@media (max-width: 520px){
  .news-item{
    display:grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }

  .news-item__date{
    font-size: 12px;
    letter-spacing: .12em;
    opacity: .6;
  }

  .news-item__link{
    font-size: 15px;
    font-weight: 500; /* 濃すぎ防止 */
    line-height: 1.7;
    color: rgba(72,85,84,.78);
  }

  .news-more__link{
    font-size: 14px;
  }
}

/* =========================
  Company（テーブルをスマホで見やすく）
========================= */
@media (max-width: 520px){
  .company__table th,
  .company__table td{
    font-size: 13px;
    line-height: 1.7;
    padding: 10px 0;
  }

  .company__maplink{
    display:inline-flex;
    margin-top: 10px;
    font-size: 14px;
  }
}

/* =========================
  Contact（フォームをスマホで1列に）
========================= */
@media (max-width: 520px){
  .form__row{
    display:grid;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input, select, textarea{
    font-size: 16px; /* iOSズーム防止 */
  }

  textarea{
    min-height: 140px;
  }

  .form__actions .note{
    font-size: 12px;
    line-height: 1.7;
  }
}


/* ロゴ移動アニメ用クローン */
/*
.logo-fly{
  position: fixed;
  left: 0; top: 0;
  width: auto; height: auto;
  transform-origin: left top;
  will-change: transform, opacity;
  z-index: 1000;
  pointer-events: none;
}
*/

/* 状態：ヘッダー側ロゴの出し分け（任意） */
/*
body.is-logo-moved .hero__mark{ opacity: 0; transform: translateY(6px); }
body.is-logo-moved .logo-img--header{ opacity: 1; }

.logo-img--header{ transition: opacity .25s ease; opacity: 0; }  最初は消しておく 
.hero__mark{ transition: opacity .25s ease, transform .25s ease; }
*/

/* 動きを嫌うユーザー向け */
/*
@media (prefers-reduced-motion: reduce){
  .logo-fly{ transition: none !important; animation: none !important; }
  .logo-img--header, .hero__mark{ transition: none !important; }
}
*/

/* =========================================
  TOPページ：カード系をすべて角ばらせる
========================================= */

/* 共通カード */
.card,
.biz-card,
.fit-card,
.process-step,
.work,
.news-item,
.company__card,
.contact__card,
.fit-cta__card {
  border-radius: 0 !important;
}

/* カード内の画像・メディア */
.card img,
.biz-card__media,
.biz-card__media img,
.work__thumb {
  border-radius: 0 !important;
}

/* 念のため：before / after で丸めている場合も潰す */
.card::before,
.card::after,
.biz-card::before,
.biz-card::after {
  border-radius: 0 !important;
}

/* =========================================================
  SUB PAGES (detail pages)
========================================================= */
.page{
  padding-top:110px; /* header offset */
  padding-bottom:70px;
}
.page__header{ padding:28px 0 18px; }

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color:var(--muted2);
}
.breadcrumb a{ color:inherit; }
.breadcrumb .sep{ opacity:.6; }

.page__title{
  margin:18px 0 0;
  font-size:32px;
  letter-spacing:-.02em;
  line-height:1.2;
}
.page__lead{
  margin:12px 0 0;
  max-width:68ch;
  font-size:14px;
  line-height:2.0;
  color:var(--muted);
}

.page__section{
  margin-top:34px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(72,85,84,.14);
  box-shadow:0 18px 55px rgba(15,25,35,.08);
  border-radius:var(--radius);
  padding:24px;
}
.page__section h2{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-.01em;
}
.page__section p{
  margin:0;
  font-size:14px;
  line-height:2.0;
  color:var(--muted);
}

.page__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:900px){
  .page__title{ font-size:28px; }
  .page__grid{ grid-template-columns:1fr; }
}

/* =========================================================
  Footer nav width tuning (blue box control)
  - change these variables to adjust the 2 columns width/gap
========================================================= */
:root{
  --footer-nav-col1: 180px; /* 左列の幅 */
  --footer-nav-col2: 180px; /* 右列の幅 */
  --footer-nav-gap: 48px;   /* 2列の間隔 */
}

.site-footer__nav{
  width:fit-content;
  grid-template-columns: var(--footer-nav-col1) var(--footer-nav-col2);
  column-gap: var(--footer-nav-gap);
}

/* =====================
  SP 全体の文字サイズ調整追加
===================== */
@media (max-width: 900px){
  html{
    font-size: 80%; /* ← 全体を約10%小さく */
  }
}


/* =====================
  <=520px バランス調整
  - header と .container の左右余白を揃える
===================== */
@media (max-width: 520px){

  /* headerの白い箱の余白も少し詰める（見た目が軽くなる） */
  .header::before{
    inset: 8px 10px;
  }

  /* ★ここが本命：本文(.container)の20pxと揃える */
  .header__inner{
    padding: 0 20px;
  }

  /* ついでに kicker の “間延び感” を少し抑える（任意） */
  .kicker{
    letter-spacing: .18em;
    margin-bottom: 22px; /* 大きすぎるなら調整 */
  }
}

/* =========================================
  H2 左ライン：完全統一（ズレない最終版）
  - 既存の各セクションの absolute 指定を全部潰して統一
========================================= */
.h2{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  padding-left:0 !important;     /* absolute用の余白を無効化 */
  position:relative;             /* そのままでOK */
  line-height:1.2;
}

.h2::before{
  content:"" !important;
  display:block !important;

  /* ライン */
  flex:0 0 6px !important;
  height:1.05em !important;
  border-radius:999px !important;
  background: rgba(72,85,84,.55) !important;

  /* absolute系を完全無効化 */
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;

  width:auto !important;         /* widthで伸ばさない */
}

/* SP微調整（<=520px）：padding-leftは使わず gap で調整 */
@media (max-width: 520px){
  .h2{
    gap:10px !important;
    line-height:1.15;
  }
  .h2::before{
    flex-basis:5px !important;
    height:0.95em !important;
  }
}

@media (max-width: 900px){
  .drawer__shell{
    width: 100%;     /* 100vw → 100% */
  }
}

/* =========================
  SP 横ブレ完全停止セット
========================= */

/* 1) 横方向のスクロール領域を作らせない */
html, body{
  overflow-x: hidden;
  width: 100%;
}

/* 2) iOSの“横方向の引っ張り”を抑える（効く端末が多い） */
body{
  overscroll-behavior-x: none;
  touch-action: pan-y; /* 縦スクロールだけ許可 */
}

/* 3) 100vw が原因の横はみ出しを潰す（特にSPで効く） */
@media (max-width: 900px){
  .drawer__shell{ width: 100% !important; } /* 100vw → 100% */
}

/* 4) 画像/要素のはみ出し保険 */
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* =========================
  Scroll hint (fix position + spacing)
========================= */
.hero__inner{
  position: relative;            /* scrollhint の基準にする */
  padding-bottom: 110px;         /* ←CTAと被らないための下余白（ここが本命） */
}
.scrollhint{ pointer-events:auto; }

.scrollhint{
  position: absolute;
  left: 50%;
  bottom: 26px;                  /* ←下に寄せる（CTAから離れる） */
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;        /* ←縦積み：Scrollの下に矢印 */
  align-items: center;
  gap: 6px;                      /* ←Scrollと矢印の間 */
  text-align: center;
  width: auto;
  padding: 8px 10px;             /* ←タップ範囲は確保しつつ大きくしすぎない */
  z-index: 2;
}

.scrollhint__text{
  display: block;
  letter-spacing: .2em;
  font-size: 12px;
  opacity: .85;
}

.scrollhint__arrow{
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  animation: scrollArrow 1.6s ease-in-out infinite;
  opacity: .9;
}

@keyframes scrollArrow{
  0%{ transform: translateY(0); opacity: .35; }
  50%{ transform: translateY(8px); opacity: 1; }
  100%{ transform: translateY(0); opacity: .35; }
}

/* SP微調整 */
@media (max-width: 520px){
  .hero__inner{
    padding-bottom: 130px;       /* ←SPはCTAが縦に長いので少し増やす */
  }
  .scrollhint{
    bottom: 18px;
    gap: 5px;
  }
  .scrollhint__text{ font-size: 11px; }
  .scrollhint__arrow{ font-size: 16px; }
}

/* Sub page: header spacing */
.page__header{ padding: 130px 0 18px; }
@media (max-width: 520px){
  .page__header{ padding: 110px 0 10px; }
}
.page__section{ margin-top: 34px; }


/* =========================
   Page Loader
========================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.8s cubic-bezier(.22, 1, .36, 1),
    visibility 0.8s cubic-bezier(.22, 1, .36, 1);
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  width: min(78vw, 920px);
}

.page-loader__logo {
  width: 100%;
  height: auto;
  display: block;
}

.page-loader .stroke-layer path,
.page-loader .stroke-layer polygon {
  fill: none;
  stroke: #485554;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  opacity: 0;
  animation:
    loaderStrokeShow 0.01s linear var(--delay, 0s) forwards,
    loaderDraw var(--dur, 1.4s) cubic-bezier(.22, 1, .36, 1) var(--delay, 0s) forwards,
    loaderStrokeFade 0.45s ease var(--fade-delay, 2.2s) forwards;
}

.page-loader .fill-layer path,
.page-loader .fill-layer polygon {
  fill: #485554;
  opacity: 0;
  animation: loaderFillIn 0.45s ease var(--fill-delay, 1.6s) forwards;
}

.page-loader .fill-layer .alpha-main {
  animation:
    loaderFillIn 0.45s ease var(--fill-delay, 1.6s) forwards,
    loaderAlphaPulse 0.7s ease calc(var(--fill-delay, 1.6s) + 0.35s) forwards;
  transform-origin: center;
  transform-box: fill-box;
}

.page-loader .fill-layer .alpha-sub {
  animation:
    loaderFillIn 0.45s ease var(--fill-delay, 1.6s) forwards,
    loaderAlphaPulse 0.7s ease calc(var(--fill-delay, 1.6s) + 0.42s) forwards;
  transform-origin: center;
  transform-box: fill-box;
}

body.is-loading {
  overflow: hidden;
}

@keyframes loaderStrokeShow {
  to { opacity: 1; }
}

@keyframes loaderDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes loaderStrokeFade {
  to { opacity: 0; }
}

@keyframes loaderFillIn {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes loaderAlphaPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(72,85,84,0));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 10px 18px rgba(72,85,84,.18));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(72,85,84,0));
  }
}

@media (max-width: 768px) {
  .page-loader__inner {
    width: min(88vw, 720px);
  }

  .page-loader .stroke-layer path,
  .page-loader .stroke-layer polygon {
    stroke-width: 1.8;
  }
}