/* =========================================================================
   kikudu.com v13 — 配色を「藍・朱・金茶」に。緑はすべてやめ、白を広く使う
   v12 — 配色を「木肌・生成り・黄土・深緑」に（ricoas と重なる黄緑・水色・橙をやめた）
   v10 — ricoas.co.jp の見た目と色の差を、木くづの色で
   v10：栄和会館（文字がぼかしから現れる見出し）／infofarm（事業紹介・会社概要）／
        湘南クラウド会計（よくある質問）の形を、木くづの色で
   写真を全面に敷いた最初の画面／緑の弧／白い丸ヘッダー／カプセル型のバッジ
   丸いラベル＋大きな見出し／弧で区切る面／角丸の写真カード
   ricoas の緑 → #3F826D、赤橙 → #C03221、橙 → #2A2A2A、水色・クリーム → 緑の淡い色・#F3F3F3
   ========================================================================= */
:root {
  --ink: #2A2A2A;       /* 文字・2つ目のボタン */
  --mist: #F3F3F3;      /* 地の面 */
  --red: #C03221;       /* 強調・一番押してほしいボタン */
  --green: #3F826D;     /* ricoas の緑の位置 */
  --white: #FFFFFF;
  /* ↓ ricoas のように、役割ごとに差がはっきり分かる色を足す（4色と相性のよい色） */
  --green-d: #24584A;   /* 濃い緑：丸の濃い弧、見出しの文字 */
  --leaf: #A3C653;      /* 若葉：ricoas の黄緑の位置（丸の明るい弧・弧の帯・枠） */
  --leaf-l: #DCEBA2;    /* 緑の面の上の強調文字（ricoas の黄色の位置） */
  --mint: #D6EDEA;      /* 水色がかった面：ricoas の水色の位置 */
  --mint-l: #E9F6F3;    /* 大きな丸 */
  --cream: #F7F3E2;     /* お役立ち情報の面：ricoas のクリームの位置 */
  --amber: #E2902B;     /* 2つ目のボタン：ricoas の橙の位置 */
  --amber-d: #C97A1A;
  --green-t: #E6F1DA;   /* 若葉の淡い色（アイコンの下地） */
  --green-l: #9CC2B4;
  --green-band: rgba(163, 198, 83, .6);   /* 最初の画面の弧の明るい帯（若葉） */
  --red-d: #A52A1B;
  --sub: #5C5C5C;
  --line: #E1E1E1;
  --ff: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --fn: "Outfit", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --r-s: 8px; --r: 12px; --r-l: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gutr: max(16px, env(safe-area-inset-right, 0px));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--ff); font-size: 16px; line-height: 1.8; letter-spacing: .03em;
  font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, .kp { word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; line-height: 1.5; }
p { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 16px; }
.ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--fn); font-variant-numeric: tabular-nums; letter-spacing: 0; }
br.sp { display: none; }
@media (max-width: 600px) { br.sp { display: inline; } }

.wrap { width: 100%; max-width: calc(1120px + 48px); margin-inline: auto; padding-left: max(24px, var(--gut)); padding-right: max(24px, var(--gutr)); }
.wrap--n { max-width: calc(860px + 48px); }
@media (max-width: 600px) { .wrap { padding-left: max(20px, var(--gut)); padding-right: max(20px, var(--gutr)); } }

/* =========================================================================
   部品：丸いラベル・見出し・ボタン・吹き出し
   ========================================================================= */
.pill { display: inline-flex; align-items: center; gap: .4em; padding: 5px 20px; border-radius: 999px; background: var(--white); border: 1px solid var(--green); color: var(--green); font-size: 16px; font-weight: 700; letter-spacing: .1em; line-height: 1.6; white-space: nowrap; }
.pill--w { border-color: transparent; }
.pill--s { font-size: 13px; padding: 2px 14px; letter-spacing: .06em; }

.sh { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: clamp(36px, 5vw, 60px); }
.sh--left { align-items: flex-start; text-align: left; }
.sh__t { font-size: clamp(28px, 3.35vw, 48px); font-weight: 700; color: var(--green); letter-spacing: .05em; line-height: 1.5; }
.sh__t em, .em { font-style: normal; color: var(--red); }
.sh__sub { color: var(--ink); max-width: 40em; }
.sh--w .sh__t { color: var(--white); }
.sh--w .sh__t em { color: var(--leaf-l); }
.sh--w .sh__sub { color: #fff; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 70px; min-width: 240px; padding: 10px 64px 10px 32px; border-radius: 10px; border: 1px solid transparent;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-align: center;
  transition: background-color .3s, color .3s, border-color .3s, transform .16s var(--ease); -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn__t { display: block; }
.btn__arw { position: absolute; right: 22px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 4px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.btn__arw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
@media (hover: hover) { .btn:hover .btn__arw svg { transform: translateX(3px); } }
.btn--red { background: var(--red); color: #fff; } .btn--red .btn__arw { color: var(--red); }
.btn--red:hover { background: var(--red-d); }
.btn--ink { background: var(--ink); color: #fff; } .btn--ink .btn__arw { color: var(--ink); }
.btn--ink:hover { background: #111; }
.btn--amber { background: var(--amber); color: #fff; } .btn--amber .btn__arw { color: var(--amber-d); }
.btn--amber:hover { background: var(--amber-d); }
.btn--green { background: var(--green); color: #fff; } .btn--green .btn__arw { color: var(--green); }
.btn--green:hover { background: var(--green-d); }
.btn--outline { border-color: #fff; }
.btn--white { background: var(--white); color: var(--green); border-color: var(--green); }
.btn--white .btn__arw { background: var(--green); color: #fff; }
.btn--white:hover { background: var(--green-t); }
.btn--line { background: transparent; color: #fff; border-color: #fff; }
.btn--line:hover { background: rgba(255,255,255,.12); }
.btn--xl { min-height: 90px; min-width: min(300px, 100%); font-size: 18px; border-radius: 8px; padding-right: 70px; }
.btn--s { min-height: 50px; min-width: 0; font-size: 14px; padding: 8px 52px 8px 22px; border-radius: 8px; }
.btn--s .btn__arw { right: 14px; width: 20px; height: 20px; margin-top: -10px; }
.btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.btns--c { justify-content: center; }

.btnwrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.balloon { position: relative; display: inline-block; padding: 4px 18px; border-radius: 6px; background: var(--white); border: 1.5px solid var(--ink); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.55; text-align: center; }
.balloon::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.on-dark .balloon { background: transparent; color: #fff; border-color: #fff; }
.on-dark .balloon::after { background: transparent; border-color: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.copy { border: 1px solid currentColor; background: transparent; border-radius: 999px; padding: 2px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.copy.is-done { background: var(--white); color: var(--green); border-color: var(--white); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 16px; border-radius: 999px; border: 1px solid var(--green); color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; background: var(--white); }
.tag--w { border-color: #fff; color: #fff; background: transparent; font-weight: 500; font-size: 14px; }

/* 面を弧で区切る（上がふくらんだ形） */
.arch { position: relative; }
.arch::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(70px, 17.4vw, 250px); background: radial-gradient(70% 100% at 50% 100%, transparent 99.5%, var(--prev, var(--white)) 100%); pointer-events: none; z-index: 1; }
.sec { padding-block: clamp(72px, 9vw, 120px); position: relative; }
.arch.sec, .arch.cta { padding-top: clamp(120px, 17vw, 240px); }
.bg-mist { background: var(--mist); }
.bg-green { background: var(--green); color: #fff; }
.bg-white { background: var(--white); }
.bg-tint { background: var(--green-t); }
.bg-mint { background: var(--mint); }
.bg-cream { background: var(--cream); }

/* =========================================================================
   写真（番号つき。本番の写真を置くと自動で差し替わる）
   ========================================================================= */
.pic { position: relative; overflow: hidden; border-radius: var(--r); background: var(--green-t); aspect-ratio: var(--ratio, 50 / 34); max-width: 100%; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.ptag { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-family: var(--fn); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #fff; background: rgba(42,42,42,.72); border-radius: 999px; padding: 1px 10px; pointer-events: none; }
.pic--empty { background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(42,42,42,.05) 16px 17px), #EDEDED; }
.pic__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center; color: var(--sub); font-size: 13px; }
.pic__in b { font-family: var(--fn); color: var(--ink); letter-spacing: .1em; }
.pic__ico { width: 30px; height: 30px; }

/* =========================================================================
   ヘッダー（緑の上に浮かぶ白い丸の帯）
   ========================================================================= */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--green); }
.hd { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + 40px); left: max(30px, var(--gut)); right: max(30px, var(--gutr)); transition: top .4s var(--ease), transform .5s var(--ease); }
.hd.is-small { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.hd.is-hidden { transform: translateY(calc(-100% - 60px)); }
.hd__in { position: relative; display: flex; align-items: center; gap: 18px; height: 80px; padding: 0 36px 0 24px; background: var(--white); border-radius: 50px; transition: height .4s var(--ease), box-shadow .4s; }
.hd.is-small .hd__in { height: 64px; box-shadow: 0 8px 26px rgba(42,42,42,.12); }
.hd__brand { display: flex; align-items: center; gap: 16px; flex: none; }
.hd__copy { font-size: 12px; font-weight: 700; color: var(--sub); line-height: 1.45; letter-spacing: .02em; }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); }
.logo__mk { width: 48px; height: auto; fill: var(--ink); }
.logo__t { display: flex; flex-direction: column; line-height: 1.1; }
.logo__t small { font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.logo__t b { font-size: 22px; font-weight: 900; letter-spacing: .12em; }
.gnav { margin-left: auto; }
.gnav > ul { display: flex; align-items: center; gap: clamp(10px, 1.25vw, 18px); }
.gnav__item { position: relative; }
.gnav__item > a { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; letter-spacing: .02em; padding: 24px 0; white-space: nowrap; transition: color .2s; }
.gnav__item > a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); opacity: .7; transition: transform .35s var(--ease), opacity .2s; }
.gnav__item > a:hover, .gnav__item > a[aria-current] { color: var(--green); }
.gnav__item > a:hover::before, .gnav__item > a[aria-current]::before { opacity: 1; transform: scale(1.3); }
.drop { position: absolute; left: 50%; top: 100%; width: 340px; padding-top: 6px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s, transform .35s var(--ease), visibility .25s; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop__in { background: var(--white); border-radius: 18px; padding: 14px; box-shadow: 0 18px 50px rgba(42,42,42,.14); }
.drop__top { display: flex; align-items: center; position: relative; padding: 10px 50px 10px 16px; border-radius: 10px; background: var(--green); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.drop__top .btn__arw { right: 12px; color: var(--green); }
.drop li a { display: flex; flex-direction: column; padding: 9px 14px; border-radius: 10px; transition: background-color .2s; }
.drop li a:hover { background: var(--mist); }
.drop li b { font-size: 14px; }
.drop li small { font-size: 12px; color: var(--sub); line-height: 1.5; }
/* 右上のタブ（ricoas の電話番号の位置） */
.hd__tab { position: absolute; right: 44px; top: -16px; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 4px 14px 4px 8px; background: var(--green); color: #fff; border-radius: 6px; line-height: 1.25; transition: background-color .2s; }
.hd__tab:hover { background: var(--green-d); }
.hd__tab-i { grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--green); display: grid; place-items: center; }
.hd__tab-i .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.hd__tab b { font-size: 14px; letter-spacing: .04em; }
.hd__tab small { font-size: 10px; opacity: .92; }
.is-small .hd__tab { top: 50%; transform: translateY(-50%); right: 14px; }
.is-small .gnav { margin-right: 200px; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--green); cursor: pointer; position: relative; flex: none; }
.menu-btn i { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease), opacity .2s; }
.menu-btn i:nth-child(1) { top: 16px; } .menu-btn i:nth-child(2) { top: 23px; } .menu-btn i:nth-child(3) { top: 30px; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1360px) { .hd__copy { display: none; } }
@media (max-width: 1180px) {
  .gnav, .hd__copy { display: none; }
  .menu-btn { display: block; }
  .hd__in { height: 70px; padding: 0 12px 0 20px; justify-content: space-between; }
  .hd.is-small .hd__in { height: 60px; }
  .hd__tab { position: static; margin-left: auto; padding: 6px 14px 6px 8px; border-radius: 999px; background: transparent; color: var(--ink); }
  .hd__tab:hover { background: var(--mist); }
  .hd__tab-i { background: var(--green); color: #fff; width: 32px; height: 32px; }
  .hd__tab b { color: var(--green); }
  .is-small .hd__tab { transform: none; }
}
@media (max-width: 600px) {
  .hd { top: calc(env(safe-area-inset-top, 0px) + 20px); left: max(20px, var(--gut)); right: max(20px, var(--gutr)); }
  .hd.is-small { top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .hd__in { height: 56px; padding: 0 5px 0 16px; gap: 6px; }
  .hd.is-small .hd__in { height: 52px; }
  .logo__mk { width: 36px; } .logo__t b { font-size: 17px; } .logo__t small { font-size: 9px; }
  .hd__tab { padding: 4px 6px; column-gap: 6px; }
  .hd__tab-i { width: 30px; height: 30px; }
  .hd__tab .pc { display: none; } .hd .hd__tab b .spx { display: inline; } .hd__tab b { font-size: 14px; } .hd__tab small { font-size: 9px; color: var(--sub); }
  .menu-btn { width: 46px; height: 46px; }
  .menu-btn i { left: 13px; right: 13px; } .menu-btn i:nth-child(1) { top: 15px; } .menu-btn i:nth-child(2) { top: 22px; } .menu-btn i:nth-child(3) { top: 29px; }
}
@media (max-width: 380px) { .hd__tab small { display: none; } }

/* メニュー（スマホ） */
.dw { position: fixed; inset: 0; z-index: 45; background: var(--white); padding: calc(env(safe-area-inset-top, 0px) + 100px) var(--gutr) calc(env(safe-area-inset-bottom, 0px) + 32px) var(--gut); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .35s, transform .5s var(--ease), visibility .35s; }
.dw.is-open { opacity: 1; visibility: visible; transform: none; }
.dw__in { max-width: 720px; margin-inline: auto; display: grid; gap: 28px; padding-inline: 8px; }
.dw__g { border-bottom: 1px solid var(--line); padding-block: 4px 14px; }
.dw__h { position: relative; display: flex; align-items: center; font-weight: 700; font-size: 18px; padding: 12px 44px 8px 18px; }
.dw__h::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.dw__h .btn__arw { background: var(--green); color: #fff; right: 0; }
.dw__subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 2px 16px; padding-left: 18px; }
.dw__subs a { font-size: 14px; color: var(--sub); padding: 6px 0 6px 18px; position: relative; }
.dw__subs a::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1.5px; background: var(--green-l); }
.dw__cta { display: grid; gap: 22px; justify-items: stretch; }
.dw__cta .btnwrap .btn { width: 100%; }
.dw__mail { text-align: center; font-size: 13px; color: var(--sub); }
.dw__mail b { font-family: var(--fn); font-size: 18px; color: var(--ink); letter-spacing: .04em; user-select: all; }

/* =========================================================================
   最初の画面（写真を全面に、上に緑の弧）
   ========================================================================= */
.fv { position: relative; height: max(680px, min(100svh, 62.5vw + 80px)); max-height: 1080px; overflow: hidden; background: var(--green); color: #fff; isolation: isolate; }
.fv__slides { position: absolute; inset: 0; z-index: 0; }
.fv__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.fv__slide.is-on { opacity: 1; }
.fv__slide .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: var(--green-d); }
.fv__slide .pic img { transform-origin: 60% 50%; }
.fv__slide .ptag { right: auto; left: max(20px, var(--gut)); bottom: 96px; }
@media (prefers-reduced-motion: no-preference) {
  .fv__slide.is-on .pic img { animation: fvzoom 20s linear both; }
}
@keyframes fvzoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.fv__shade { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(14, 22, 34, .5) 0%, rgba(14, 22, 34, .28) 42%, rgba(14, 22, 34, .06) 70%),
  linear-gradient(0deg, rgba(14, 22, 34, .35), transparent 34%),
  rgba(0, 0, 0, .1); }
/* 緑の弧：外側が濃い緑、写真とのあいだに明るい帯 */
.fv__deco { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 23.7vw; pointer-events: none;
  background:
    radial-gradient(62.5vw 30.4vw at 50% 34.5vw, transparent 99.6%, var(--green) 100%),
    radial-gradient(52.8vw 27.6vw at 50% 32.5vw, transparent 99.6%, var(--green-band) 100%); }
.fv__deco::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .1; mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(62.5vw 30.4vw at 50% 34.5vw, transparent 99.6%, #000 100%); mask: radial-gradient(62.5vw 30.4vw at 50% 34.5vw, transparent 99.6%, #000 100%); }
.fv__spcopy { display: none; }
.fv__inner { position: relative; z-index: 3; height: 100%; max-width: 1254px; margin-inline: auto; padding: 0 68px; }
.fv__body { position: absolute; left: 108px; right: 68px; bottom: clamp(150px, 17.5vh, 180px); display: flex; flex-direction: column; align-items: flex-start; }
.fv__tagline { display: inline-flex; padding: 5px 26px; border-radius: 40px; background: var(--white); border: 1px solid var(--green); color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.fv__catch { margin-top: 22px; font-size: clamp(40px, 3.9vw, 58px); font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .22); }
.fv__catch .ln { display: block; white-space: nowrap; }
.fv__catch .br-sp { display: none; }
.fv__bottom { width: 100%; margin-top: clamp(40px, 7vh, 64px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.fv__cta { display: flex; gap: 17px; }
.fv__cta .btn { min-width: 300px; min-height: 90px; font-size: 18px; border-radius: 8px; padding-right: 70px; padding-left: 40px; }
.fv__badges-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fv__badges { display: flex; gap: 13px; }
.badge { width: 98px; height: 167px; border-radius: 49px; background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 6px 12px; gap: 4px; color: var(--green); }
.badge svg { width: 38px; height: 38px; flex: none; }
.badge__t { display: flex; flex-direction: column; align-items: center; gap: 0; }
.badge__t small { font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; margin-top: 4px; }
.badge__t b { font-family: var(--fn); font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.badge__t b i { font-style: normal; font-family: var(--ff); font-size: 11px; font-weight: 700; margin-left: 2px; }
.badge__t > span { font-size: 10px; color: var(--sub); letter-spacing: 0; line-height: 1.4; }
.fv__note { font-size: 11px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.fv__scroll { position: absolute; right: 12px; top: 37%; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; }
.fv__scroll span { writing-mode: vertical-lr; font-size: 12px; letter-spacing: .1em; }
.fv__scroll i { position: relative; width: 1px; height: 116px; background: rgba(255,255,255,.4); overflow: hidden; }
.fv__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .fv__scroll i::after { animation: scrollbar 2.2s cubic-bezier(.65,0,.35,1) infinite; } }
@keyframes scrollbar { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.fv__nav { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; }
.fv__nav ul { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.3); }
.fv__nav li + li { border-left: 1px solid rgba(255,255,255,.3); }
.fv__nav a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 79px; padding: 12px 16px; background: rgba(36, 71, 107, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: #fff; font-weight: 700; font-size: 15px; line-height: 1.45; letter-spacing: .02em; transition: background-color .3s; }
.fv__nav a:hover { background: rgba(36, 71, 107, .85); }
.fv__nav .ico { width: 22px; height: 22px; }
/* 動き：言葉が下からふわっと */
@media (prefers-reduced-motion: no-preference) {
  .fv__tagline, .fv__catch .ln, .fv__cta, .fv__badges-wrap { animation: fadeup 1s var(--ease) both; }
  .fv__catch .ln:nth-child(1) { animation-delay: .12s; } .fv__catch .ln:nth-child(2) { animation-delay: .22s; }
  .fv__cta { animation-delay: .4s; } .fv__badges-wrap { animation-delay: .5s; }
}
@keyframes fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .fv__inner { padding: 0 32px; }
  .fv__body { left: 40px; right: 40px; }
  .fv__bottom { flex-direction: column-reverse; align-items: flex-start; }
  .fv__badges-wrap { align-items: flex-start; }
}
/* スマホ：ricoas と同じく、緑の帯の上にひとこと → 弧 → 言葉 → 横長のバッジ → ボタン2つ */
@media (max-width: 760px) {
  .fv { height: auto; min-height: 820px; max-height: none; }
  .fv__deco { height: 180px; background:
    radial-gradient(77vw 53.3vw at 50% 79vw, transparent 99.4%, var(--green) 100%),
    radial-gradient(66.7vw 54.4vw at 50% 82vw, transparent 99.4%, var(--green-band) 100%); }
  .fv__deco::after { -webkit-mask: radial-gradient(77vw 53.3vw at 50% 79vw, transparent 99.4%, #000 100%); mask: radial-gradient(77vw 53.3vw at 50% 79vw, transparent 99.4%, #000 100%); }
  .fv__spcopy { display: block; position: absolute; z-index: 3; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 82px); text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #fff; }
  .fv__shade { background: linear-gradient(0deg, rgba(14, 22, 34, .6) 0%, rgba(14, 22, 34, .35) 45%, rgba(14, 22, 34, .1) 75%), rgba(0,0,0,.1); }
  .fv__inner { height: auto; padding: 280px max(20px, var(--gutr)) 36px max(20px, var(--gut)); }
  .fv__body { position: static; }
  .fv__tagline { font-size: 13px; padding: 6px 12px; border-radius: 20px; }
  .fv__catch { margin-top: 12px; font-size: clamp(30px, 9.2vw, 38px); line-height: 1.35; }
  .fv__catch .br-sp { display: block; }
  .fv__bottom { margin-top: 20px; flex-direction: column; gap: 22px; }
  .fv__badges-wrap { order: -1; }
  .fv__badges-wrap { align-items: stretch; width: 100%; gap: 6px; }
  .fv__badges { gap: 8px; }
  .badge { flex: 1 1 0; width: auto; height: 70px; border-radius: 35px; flex-direction: row; gap: 4px; padding: 6px 8px 6px 6px; justify-content: center; }
  .badge svg { width: 28px; height: 28px; }
  .badge__t small { font-size: 11px; margin-top: 0; line-height: 1.3; }
  .badge__t b { font-size: 24px; }
  .badge__t b i { font-size: 10px; }
  .badge__t > span { display: none; }
  .fv__note { text-align: right; font-size: 10px; }
  .fv__cta { width: 100%; gap: 12px; }
  .fv__cta .btnwrap { flex: 1 1 0; min-width: 0; }
  .fv__cta .btn { width: 100%; min-width: 0; min-height: 70px; font-size: 14px; padding: 8px 34px 8px 12px; }
  .fv__cta .btn .btn__arw { right: 10px; width: 20px; height: 20px; margin-top: -10px; }
  .fv__cta .balloon { font-size: 12.5px; padding: 3px 10px; line-height: 1.45; }
  .fv__scroll { display: none; }
  .fv__slide .ptag { bottom: auto; top: 200px; }
  .fv__nav { position: relative; }
  .fv__nav ul { grid-template-columns: 1fr 1fr; }
  .fv__nav li:nth-child(3) { border-left: 0; }
  .fv__nav li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.3); }
  .fv__nav a { background: var(--green); -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 64px; font-size: 13px; justify-content: flex-start; gap: 10px; padding: 10px 14px; }
  .fv__nav .ico { width: 20px; height: 20px; }
}

/* =========================================================================
   お悩み
   ========================================================================= */
.worry { background: var(--white); }
.worry__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; max-width: 980px; margin-inline: auto; }
.bub { position: relative; padding: 18px 26px; border-radius: 22px; background: var(--mist); font-weight: 700; font-size: 16px; line-height: 1.7; letter-spacing: .03em; text-align: center; }
.bub::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: inherit; transform: rotate(45deg); }
.worry__ans { margin-top: clamp(36px, 5vw, 56px); text-align: center; display: grid; justify-items: center; gap: 16px; }
.chev { display: grid; color: var(--green); }
.chev svg { width: 40px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chev svg + svg { margin-top: -8px; opacity: .45; }
.worry__a { font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: .05em; line-height: 1.5; color: var(--green); }
.worry__a em { font-style: normal; color: var(--red); }
@media (max-width: 700px) { .worry__list { display: grid; } .bub::after { display: none; } .bub { text-align: left; } }

/* =========================================================================
   選ばれる理由（水色の面・大きな丸と数字）
   ========================================================================= */
.reason { background: var(--mint); overflow: hidden; }
.reason__circle { position: absolute; left: 50%; top: 40px; width: min(1000px, 140vw); aspect-ratio: 1; border-radius: 50%; background: var(--mint-l); transform: translateX(-50%); }
.reason .wrap { position: relative; }
.reason__head { position: relative; }
.reason__img { position: absolute; right: 0; top: clamp(30px, 4vw, 60px); width: clamp(160px, 15vw, 220px); }
.reason__img .pic { aspect-ratio: 16 / 10; border-radius: 999px; box-shadow: 0 16px 40px -18px rgba(42,42,42,.4); }
.rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); }
.ring { aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: clamp(24px, 3.4vw, 44px);
  background: linear-gradient(var(--white), var(--white)) padding-box, conic-gradient(from 300deg, var(--leaf) 0 22%, var(--green) 22% 58%, var(--green-d) 58% 80%, var(--green) 80% 100%) border-box; border: clamp(10px, 1vw, 14px) solid transparent; }
.ring:nth-child(2) { background: linear-gradient(var(--white), var(--white)) padding-box, conic-gradient(from 20deg, var(--leaf) 0 26%, var(--green) 26% 62%, var(--green-d) 62% 86%, var(--green) 86% 100%) border-box; }
.ring:nth-child(3) { background: linear-gradient(var(--white), var(--white)) padding-box, conic-gradient(from 160deg, var(--leaf) 0 20%, var(--green) 20% 46%, var(--green-d) 46% 76%, var(--green) 76% 100%) border-box; }
.ring .pill { font-size: 14px; }
.ring__n { font-family: var(--fn); font-weight: 700; font-size: clamp(46px, 5vw, 70px); line-height: 1.05; color: var(--red); letter-spacing: -.01em; }
.ring__n i { font-style: normal; font-family: var(--ff); font-size: .3em; color: var(--red); margin-left: 2px; font-weight: 700; }
.ring__h { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.ring__t { font-size: clamp(12px, 1.05vw, 14px); line-height: 1.8; color: var(--green-d); max-width: 17em; }
.ring__note { font-size: 11px; color: var(--green-d); opacity: .8; }
.rings--s { margin-top: clamp(16px, 3vw, 40px); }
.ring--s .ring__ico { width: 108px; height: 70px; border-radius: 999px; background: var(--mint-l); display: grid; place-items: center; }
.ring--s .ring__ico svg { width: 54px; height: 54px; }
@media (max-width: 860px) {
  .reason__img { position: static; width: min(280px, 80%); margin: -12px auto 32px; }
  .rings { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .ring { aspect-ratio: auto; border-radius: 28px; padding: 28px 24px; }
}
.strip { position: relative; margin-top: clamp(48px, 6vw, 72px); border: 2px solid var(--green); border-radius: 999px; background: var(--white); padding: 34px clamp(20px, 4vw, 56px) 26px; }
.strip > .pill { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); background: var(--green); color: #fff; }
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(18px, 3.4vw, 46px); }
.strip li { font-family: var(--fn); font-weight: 700; font-size: clamp(16px, 1.8vw, 22px); color: var(--ink); letter-spacing: .02em; }
.strip li.jp { font-family: var(--ff); font-size: clamp(14px, 1.5vw, 18px); }
@media (max-width: 600px) { .strip { border-radius: 28px; } }

/* =========================================================================
   相談の帯（緑・紙の粒・丸い写真2枚）
   ========================================================================= */
.cta { position: relative; background: var(--green); color: #fff; padding-top: clamp(80px, 9vw, 120px); padding-bottom: clamp(72px, 8vw, 100px); overflow: hidden; }
.cta::after { content: ""; position: absolute; inset: 0; background: var(--grain), radial-gradient(60% 80% at 20% 30%, rgba(255,255,255,.08), transparent 70%); opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.cta:not(.arch) { border-top: 1px solid rgba(255,255,255,.22); }
.cta__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.cta__sub { font-weight: 700; letter-spacing: .08em; padding-bottom: 6px; border-bottom: 1px solid #fff; }
.cta__t { font-size: clamp(26px, 2.85vw, 41px); font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 8px; }
.cta__mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin-top: 8px; }
.cta__mail-i { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--green); display: grid; place-items: center; }
.cta__mail-i .ico { width: 18px; height: 18px; stroke-width: 2.2; }
.cta__mail-a { font-family: var(--fn); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: .04em; user-select: all; }
.cta__note { font-size: 14px; }
.cta__photos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta__ph { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.cta__ph--big { width: clamp(220px, 22vw, 320px); right: max(5vw, 24px); top: clamp(40px, 6vw, 90px); }
.cta__ph--small { width: clamp(150px, 14vw, 200px); left: max(7vw, 24px); bottom: clamp(70px, 9vw, 130px); }
.cta__ph .ptag { right: 50%; transform: translateX(50%); bottom: 12px; }
@media (max-width: 1100px) { .cta__ph--big { width: 170px; top: auto; bottom: 30px; right: 20px; } .cta__ph--small { width: 120px; left: 20px; bottom: 30px; } .cta { padding-bottom: 220px; } }
@media (max-width: 600px) { .cta__btns { width: 100%; } .cta__btns .btnwrap { width: 100%; } .cta__btns .btn { width: 100%; } }

/* =========================================================================
   サービス（緑の面・写真と行）／料金の帯／対応エリア
   ========================================================================= */
.svc { background: var(--green); color: #fff; }
.svc__list { display: grid; }
.svc__row { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: clamp(28px, 4.6vw, 60px); align-items: center; padding-block: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(255,255,255,.3); }
.svc__row:first-child { padding-top: 0; }
.svc__row .pic { aspect-ratio: 50 / 34; }
.svc__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.svc__body h3 { font-size: clamp(24px, 2.25vw, 32px); font-weight: 700; letter-spacing: .1em; line-height: 1.45; }
.svc__body p { max-width: 30em; }
.svc__body .btns { margin-top: 14px; }
@media (max-width: 860px) { .svc__row { grid-template-columns: 1fr; } .svc__body .btns .btn { flex: 1 1 200px; } }

.est { position: relative; overflow: hidden; margin-top: clamp(48px, 6vw, 72px); border-radius: var(--r); color: #fff; }
.est__bg { position: absolute !important; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.est::after { content: ""; position: absolute; inset: 0; background: rgba(20, 26, 36, .62); z-index: 1; }
.est__in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px); text-align: center; }
.est__t { font-size: clamp(24px, 2.1vw, 30px); letter-spacing: .1em; }
.est__lead { font-size: 15px; }
.est__row { display: grid; grid-template-columns: auto 1px auto; gap: clamp(24px, 4vw, 56px); align-items: end; margin-top: 18px; }
.est__row::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; height: 100%; background: rgba(255,255,255,.55); }
.est__l { grid-column: 1; grid-row: 1; }
.est__r { grid-column: 3; grid-row: 1; display: grid; justify-items: center; gap: 4px; }
.est__big { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.est__big .num { font-size: clamp(40px, 4vw, 56px); line-height: 1.05; }
.est__big small { font-size: 16px; }
.est__s { font-size: 13px; }
.est .ptag { z-index: 3; }
@media (max-width: 760px) { .est__row { grid-template-columns: 1fr; } .est__row::before { display: none; } .est__l, .est__r { grid-column: 1; grid-row: auto; } }

.area__card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; margin-top: clamp(48px, 6vw, 72px); background: var(--white); color: var(--ink); border-radius: var(--r); padding: clamp(24px, 3.4vw, 40px); }
.map { width: 100%; height: auto; }
.map .land { fill: var(--green-t); stroke: var(--green); stroke-width: 2; stroke-linejoin: round; }
.map .dot { fill: var(--green); }
.map .dot--main { fill: var(--red); }
.map .ring-mk { fill: none; stroke: var(--red); stroke-width: 2.5; opacity: .45; }
.map text { font-family: var(--ff); font-size: 19px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--white); stroke-width: 5px; stroke-linejoin: round; }
.map text.sm { font-size: 15px; font-weight: 500; fill: var(--sub); }
.area__t { text-align: center; font-size: clamp(24px, 2.25vw, 32px); color: var(--green); letter-spacing: .08em; margin-bottom: 22px; }
.acc { display: grid; gap: 10px; }
.acc details { border: 1.5px solid var(--green); border-radius: 6px; overflow: hidden; }
.acc summary { list-style: none; cursor: pointer; position: relative; padding: 10px 48px; text-align: center; font-weight: 700; font-size: 17px; color: var(--green); letter-spacing: .06em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before, .acc summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 2px; background: var(--green); transition: transform .3s var(--ease); }
.acc summary::after { transform: rotate(90deg); }
.acc details[open] summary::after { transform: rotate(0); }
.acc__b { margin: 0 12px 12px; padding: 14px 18px; background: var(--mint); border-radius: 4px; font-size: 14px; color: var(--green-d); font-weight: 500; line-height: 1.9; }
@media (max-width: 860px) { .area__card { grid-template-columns: 1fr; } .area__map { max-width: 400px; margin-inline: auto; } }
/* 下層ページの対応エリア（v7 から） */
.area { padding-block: clamp(56px, 7vw, 88px) clamp(24px, 3vw, 40px); }
.area .area__card { margin-top: 0; }
.area__body h2:not(.area__t) { font-size: clamp(24px, 2.8vw, 34px); color: var(--green); letter-spacing: .06em; margin: 14px 0 18px; }
.area__body h2 em { font-style: normal; color: var(--red); }
.area__box { border: 1.5px solid var(--green); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 10px; }
.area__box h3 { font-size: 15px; color: var(--green); display: flex; align-items: center; gap: 6px; }
.area__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area__chips span { background: var(--mist); border-radius: 6px; padding: 2px 12px; font-size: 14px; font-weight: 700; }
.area__chips span.main { background: var(--red); color: #fff; }
.area__note { font-size: 14px; color: var(--sub); margin-top: 14px; }
.price { padding-top: clamp(56px, 7vw, 88px); }
.price__card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 48px; align-items: center; background: var(--ink); color: #fff; border-radius: var(--r); padding: clamp(32px, 5vw, 56px); }
.price__k { display: inline-flex; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--green-l); margin-bottom: 8px; }
.price__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; }
.price__big .num { font-size: clamp(48px, 6vw, 80px); line-height: 1.05; }
.price__big small { font-size: clamp(16px, 1.6vw, 20px); }
.price__t { margin-top: 12px; color: rgba(255,255,255,.88); max-width: 32em; }
.price__btns { display: grid; gap: 14px; }
.price__btns .btn { width: 100%; }
@media (max-width: 860px) { .price__card { grid-template-columns: 1fr; } }

/* お客様の事例・制作実績（ricoas の「お客様の声」「施工実績」の面） */
.voice { background: var(--mint); }

/* =========================================================================
   横にめくるカード（scroll-snap）
   ========================================================================= */
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 12px; margin: -4px; overscroll-behavior-x: contain; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
.slider__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.slider__btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--green); background: var(--white); color: var(--green); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s, transform .16s var(--ease); }
.slider__btn:hover { background: var(--green); color: #fff; }
.slider__btn:active { transform: scale(.94); }
.slider__btn[disabled] { opacity: .35; pointer-events: none; }
.slider__btn .ico { width: 20px; height: 20px; }
.slider__btn--prev .ico { transform: scaleX(-1); }
.slider__dots { display: flex; gap: 8px; }
.slider__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-l); opacity: .5; transition: opacity .3s, transform .3s var(--ease); }
.slider__dots i.on { opacity: 1; background: var(--green); transform: scale(1.25); }
@media (max-width: 960px) { .slider__track { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; } }
@media (max-width: 600px) { .slider__track { grid-auto-columns: 84%; gap: 16px; } }

/* お客様の事例カード */
.case { display: flex; flex-direction: column; gap: 14px; background: var(--white); border-radius: var(--r); padding: 28px; height: 100%; transition: transform .45s var(--ease), box-shadow .45s; }
@media (hover: hover) { .case:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(42,42,42,.3); } }
.case__hd { display: flex; align-items: center; gap: 14px; }
.case__av { width: 56px; height: 56px; border-radius: 50%; background: var(--green-t); border: 2px solid var(--green-t); overflow: hidden; display: grid; place-items: center; flex: none; color: var(--green); }
.case__av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.case__av .ico { width: 26px; height: 26px; }
.case__name { font-weight: 700; color: var(--green); font-size: 17px; line-height: 1.5; }
.case__where { font-size: 12px; color: var(--sub); line-height: 1.5; }
.case__res { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 14px; }
.case__res .num { font-size: 44px; font-weight: 700; color: var(--red); line-height: 1.1; }
.case__res b { font-size: 15px; }
.case__res > span:last-child { width: 100%; font-size: 12px; color: var(--sub); line-height: 1.6; }
.case__q { font-size: 13px; font-weight: 700; color: var(--green); }
.case__t { font-size: 14px; line-height: 1.8; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.case .btn { margin-top: auto; width: 100%; }

/* 制作実績カード */
.wk { display: flex; flex-direction: column; gap: 12px; background: var(--white); border-radius: var(--r); padding: 18px 18px 22px; height: 100%; transition: transform .45s var(--ease), box-shadow .45s; }
.wk__img { aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--mist); }
.wk__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
@media (hover: hover) { .wk:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(42,42,42,.3); } .wk:hover .wk__img img { transform: scale(1.04); } }
.wk__meta { font-size: 12px; color: var(--sub); font-family: var(--fn); letter-spacing: .06em; }
.wk__t { font-size: 18px; font-weight: 700; color: var(--green); line-height: 1.5; }
.wk__w { font-size: 13px; color: var(--sub); line-height: 1.6; }
.wk__one { font-size: 14px; line-height: 1.75; }

/* =========================================================================
   自社事業
   ========================================================================= */
.own__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.own { display: flex; flex-direction: column; gap: 16px; background: var(--mist); border-radius: var(--r-l); padding: clamp(20px, 2.6vw, 32px); }
.own__k { align-self: flex-start; }
.own__items { display: grid; gap: 16px; }
.own__item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--white); border-radius: var(--r); padding: 16px; }
.own__fig { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--green-t); display: grid; place-items: center; color: var(--green); }
.own__fig img { width: 100%; height: 100%; object-fit: cover; }
.own__fig.is-logo img { object-fit: contain; padding: 12px; background: #fff; }
.own__fig.is-phone { background: var(--ink); }
.own__fig.is-phone img { object-fit: contain; }
.own__fig .ico { width: 40px; height: 40px; }
.own__item h3 { font-size: 17px; color: var(--ink); line-height: 1.5; }
.own__item .wh { font-size: 12px; color: var(--sub); }
.own__item p { font-size: 14px; line-height: 1.8; margin-top: 6px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lnk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.lnk .ico { width: 14px; height: 14px; }
@media (max-width: 860px) { .own__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .own__item { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; } }

/* お役立ち情報 */
.cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px; }
.col-card { display: flex; flex-direction: column; gap: 14px; }
.col-card .slot { border-radius: var(--r); transition: transform .6s var(--ease); }
.col-card__k { align-self: flex-start; }
.col-card h3 { font-size: 18px; color: var(--green); line-height: 1.6; transition: color .2s; }
.col-card p { font-size: 14px; color: var(--sub); }
@media (hover: hover) { .col-card:hover h3 { color: var(--red); } .col-card:hover .slot { transform: translateY(-4px); } }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* 会社案内（緑） */
.co { background: var(--green); color: #fff; }
.co__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.co__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.co__txt h3 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 900; letter-spacing: .06em; line-height: 1.45; }
.co__txt p { color: rgba(255,255,255,.92); }
.co__fig { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4/3; background: rgba(255,255,255,.1); }
.co__fig img { width: 100%; height: 100%; object-fit: cover; }
.co__fig figcaption { font-size: 12px; }
.co__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 64px); }
.co__card { background: var(--white); color: var(--ink); border-radius: var(--r); padding: 26px 28px; }
.co__card h4 { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--green); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.co__card p { font-size: 14px; line-height: 1.9; }
.co__card .lnk { margin-top: 10px; }
@media (max-width: 860px) { .co__grid, .co__cards { grid-template-columns: 1fr; } }

/* お知らせ */
.news-sec { background: var(--green); color: #fff; padding-bottom: clamp(72px, 9vw, 110px); }
.news-sec h2 { text-align: center; font-size: 28px; letter-spacing: .12em; margin-bottom: 32px; }
.news-sec h2 span { padding-bottom: 6px; border-bottom: 2px solid #fff; }
.news { display: grid; gap: 12px; }
.news a, .news .nolink { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; background: var(--white); color: var(--ink); border-radius: var(--r); padding: 18px 24px; transition: transform .35s var(--ease); }
.news a:hover { transform: translateX(4px); }
.news time { font-family: var(--fn); font-size: 14px; color: var(--sub); letter-spacing: .06em; }
.news .tag { min-height: 24px; font-size: 11px; }
.news .tt { font-weight: 700; font-size: 15px; line-height: 1.6; }
.news .ico { color: var(--green); }
@media (max-width: 700px) { .news a, .news .nolink { grid-template-columns: auto minmax(0, 1fr); } .news .tt { grid-column: 1 / -1; } .news .ico { display: none; } }
.center { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* =========================================================================
   下層ページの頭
   ========================================================================= */
.ph { position: relative; background: var(--mist); padding-top: calc(env(safe-area-inset-top, 0px) + 150px); padding-bottom: clamp(56px, 7vw, 96px); overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .06; mix-blend-mode: multiply; pointer-events: none; }
.ph__deco { position: absolute; left: 0; right: 0; top: 0; height: 128px; background: var(--green); clip-path: ellipse(80% 100% at 50% 0); }
.ph__in { position: relative; z-index: 2; display: grid; gap: 40px; align-items: center; }
.ph--side .ph__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ph__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ph__t { font-size: clamp(30px, 4vw, 52px); font-weight: 900; letter-spacing: .05em; line-height: 1.45; }
.ph__t em { font-style: normal; color: var(--green); }
.ph__lead { color: var(--sub); max-width: 34em; }
.crumb { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--sub); }
.crumb li + li::before { content: "/"; margin: 0 10px; color: var(--green-l); }
.crumb a:hover { color: var(--green); }
.nf { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
@media (max-width: 760px) { .nf { grid-template-columns: 1fr; } .nf .ph__side { max-width: 280px; } }
.ph__side .slot, .ph__side img { border-radius: 28px; box-shadow: 0 30px 60px -32px rgba(42,42,42,.35); }
@media (max-width: 860px) { .ph { padding-top: calc(env(safe-area-inset-top, 0px) + 112px); } .ph__deco { height: 96px; } .ph--side .ph__in { grid-template-columns: 1fr; } }

/* 下層ページの部品 */
.lead-l { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; line-height: 1.8; letter-spacing: .05em; }
.prose { display: grid; gap: 1.2em; max-width: 44em; }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--green); letter-spacing: .05em; margin-top: 1.2em; padding-left: 18px; position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.prose h3 { font-size: 18px; margin-top: .6em; }
.prose ul { display: grid; gap: 6px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 8px; height: 1.5px; background: var(--green); }
.prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.prose .box { background: var(--mist); border-radius: var(--r); padding: 22px 24px; }
.prose .box b { color: var(--green); }

.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.menu { background: var(--white); border-radius: var(--r-l); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); }
.bg-mist .menu { border-color: transparent; }
.menu__ico { width: 60px; height: 60px; border-radius: 50%; background: var(--green-t); color: var(--green); display: grid; place-items: center; }
.menu__ico .ico { width: 30px; height: 30px; }
.menu h3 { font-size: 21px; color: var(--green); letter-spacing: .06em; }
.menu p { font-size: 15px; }
@media (max-width: 760px) { .menu-grid { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--white); border-radius: var(--r); padding: 22px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat__k { font-size: 12px; font-weight: 700; color: var(--green); }
.stat__n { font-family: var(--fn); font-weight: 700; font-size: clamp(36px, 3.6vw, 48px); color: var(--red); line-height: 1.15; }
.stat__n i { font-style: normal; font-family: var(--ff); font-size: .4em; color: var(--ink); margin-left: 2px; }
.stat__t { font-size: 13px; color: var(--sub); line-height: 1.7; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: st; }
.step { position: relative; background: var(--white); border-radius: var(--r); padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.bg-white .step { background: var(--mist); }
.step__n { font-family: var(--fn); font-weight: 700; color: var(--green); font-size: 14px; letter-spacing: .1em; }
.step__n b { font-size: 28px; margin-left: 4px; }
.step h3 { font-size: 18px; }
.step p { font-size: 14px; color: var(--sub); line-height: 1.8; }
.step .ico { position: absolute; right: 20px; top: 24px; width: 30px; height: 30px; color: var(--green-l); }
.step:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: translateY(-50%) rotate(45deg); z-index: 1; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step:not(:last-child)::after { right: 50%; top: auto; bottom: -13px; transform: translateX(50%) rotate(135deg); } }

.ptable { display: grid; gap: 14px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; background: var(--white); border-radius: var(--r); padding: 24px 28px; border: 1px solid var(--line); }
.prow h3 { font-size: 18px; color: var(--green); }
.prow p { grid-column: 1 / 2; font-size: 14px; color: var(--sub); }
.prow__v { grid-row: 1 / span 2; grid-column: 2; font-weight: 900; font-size: clamp(18px, 2vw, 24px); white-space: nowrap; }
.prow--main { border: 2px solid var(--red); }
.prow--main .prow__v { color: var(--red); font-size: clamp(22px, 2.6vw, 32px); }
@media (max-width: 640px) { .prow { grid-template-columns: 1fr; } .prow__v { grid-row: auto; grid-column: auto; } }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.chip .ico { color: var(--green); }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.two--top { align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* 丸投げできる理由 */
.why { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.why:last-child { border-bottom: 0; }
.why__k { font-family: var(--fn); color: var(--green); font-weight: 700; letter-spacing: .12em; font-size: 14px; }
.why h3 { font-size: clamp(24px, 2.8vw, 34px); color: var(--green); margin: 6px 0 14px; letter-spacing: .06em; }
.why h3 em { font-style: normal; color: var(--red); }
.why p { max-width: 34em; }
.why .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.why .stat { background: var(--mist); }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } .why .slot { max-width: 300px; } .why .stats { grid-template-columns: 1fr; } }

/* よくある質問 */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--white); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.bg-mist .faq details { border-color: transparent; }
.faq summary { list-style: none; cursor: pointer; position: relative; display: flex; gap: 14px; padding: 20px 64px 20px 24px; font-weight: 700; line-height: 1.7; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--fn); color: var(--green); font-size: 20px; line-height: 1.4; flex: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--green-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v10M7 12h10' stroke='%2324476B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { display: flex; gap: 14px; padding: 0 24px 22px; color: var(--ink); }
.faq .a::before { content: "A"; font-family: var(--fn); color: var(--red); font-size: 20px; font-weight: 700; line-height: 1.4; flex: none; }
.faq .a a { color: var(--green); text-decoration: underline; }
.faq details[open] .a { animation: fadeup .45s var(--ease); }
.faq-h { font-size: 20px; color: var(--green); margin: 40px 0 16px; letter-spacing: .06em; display: flex; align-items: center; gap: 10px; }
.faq-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.faq-h:first-child { margin-top: 0; }

/* 表 */
.tbl { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--r); overflow: hidden; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.tbl th { width: 30%; min-width: 7em; color: var(--green); font-weight: 700; background: #FAFAFA; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) { .tbl th, .tbl td { display: block; width: 100%; } .tbl th { border-bottom: 0; padding-bottom: 4px; } .tbl td { padding-top: 4px; } }

/* 実績一覧 */
.filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.filter button { border: 1.5px solid var(--green); background: var(--white); color: var(--green); border-radius: 999px; padding: 6px 18px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.filter button[aria-pressed="true"] { background: var(--green); color: #fff; }
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wgrid > [hidden] { display: none !important; }
.ocard { display: flex; flex-direction: column; gap: 10px; background: var(--white); border-radius: var(--r); padding: 16px 16px 20px; }
.ocard__img { aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; background: var(--mist); }
.ocard__img img { width: 100%; height: 100%; object-fit: cover; }
.ocard__img.is-phone { background: var(--ink); }
.ocard__img.is-phone img { object-fit: contain; }
.ocard h3 { font-size: 16px; color: var(--green); line-height: 1.5; }
.ocard .m { font-size: 12px; color: var(--sub); }
.ocard p { font-size: 14px; line-height: 1.75; }
.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.rowc { background: var(--white); border-radius: var(--r); padding: 18px 22px; }
.rowc h3 { font-size: 16px; color: var(--green); }
.rowc .m { font-size: 12px; color: var(--sub); }
.rowc p { font-size: 14px; margin-top: 6px; }
@media (max-width: 960px) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wgrid, .rows { grid-template-columns: 1fr; } }

.casebig { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); background: var(--white); border-radius: var(--r-l); padding: clamp(24px, 3.4vw, 44px); }
.casebig + .casebig { margin-top: 20px; }
.casebig__side { display: flex; flex-direction: column; gap: 14px; border-right: 1px dashed var(--line); padding-right: clamp(16px, 3vw, 40px); }
.casebig__side .case__res { border-top: 0; padding-top: 0; }
.casebig h3 { font-size: clamp(19px, 2vw, 24px); color: var(--green); line-height: 1.6; margin-bottom: 12px; }
.casebig ul { display: grid; gap: 4px; margin-top: 14px; }
.casebig ul li { position: relative; padding-left: 20px; font-size: 14px; }
.casebig ul li::before { content: ""; position: absolute; left: 3px; top: .75em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--green); }
@media (max-width: 760px) { .casebig { grid-template-columns: 1fr; } .casebig__side { border-right: 0; padding-right: 0; border-bottom: 1px dashed var(--line); padding-bottom: 18px; } }

/* 実績の詳細 */
.wd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0; background: var(--white); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.wd-meta div { padding: 16px 20px; border-right: 1px solid var(--line); }
.wd-meta dt { font-family: var(--fn); font-size: 12px; color: var(--green); letter-spacing: .12em; font-weight: 700; }
.wd-meta dd { font-size: 14px; font-weight: 700; line-height: 1.6; }
.wd-meta a { color: var(--green); text-decoration: underline; }
.wd-hero { border-radius: var(--r-l); overflow: hidden; box-shadow: 0 30px 70px -36px rgba(42,42,42,.45); }
.wd-sec { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.wd-sec__h .pill { margin-bottom: 12px; }
.wd-sec__h h2 { font-size: clamp(20px, 2.2vw, 26px); color: var(--green); letter-spacing: .05em; }
.wd-sec__b { display: grid; gap: 16px; min-width: 0; }
.wd-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wd-pt { background: var(--mist); border-radius: var(--r); padding: 18px 20px; }
.wd-pt b { display: block; color: var(--green); margin-bottom: 4px; }
.wd-pt span { font-size: 14px; }
.wd-pt i { font-style: normal; font-family: var(--fn); font-size: 11px; letter-spacing: .14em; color: var(--red); display: block; }
.wd-imgs { display: grid; gap: 16px; }
.wd-imgs--sp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wd-imgs img { border-radius: 10px; border: 1px solid var(--line); background: var(--mist); }
@media (max-width: 860px) { .wd-sec { grid-template-columns: 1fr; } .wd-pts { grid-template-columns: 1fr; } .wd-imgs--sp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 採用 */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.job { background: var(--white); border-radius: var(--r); padding: 24px; display: grid; gap: 8px; align-content: start; }
.job h3 { font-size: 18px; color: var(--green); }
.job p { font-size: 14px; }
.job p.m { color: var(--sub); border-top: 1px dashed var(--line); padding-top: 8px; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fit > div { border-radius: var(--r); padding: 24px 26px; background: var(--white); }
.fit h3 { font-size: 17px; margin-bottom: 10px; color: var(--green); }
.fit .ng h3 { color: var(--red); }
.fit li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.8; }
.fit li::before { content: "○"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.fit .ng li::before { content: "×"; color: var(--red); }
@media (max-width: 860px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fit { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .jobs { grid-template-columns: 1fr; } }

/* お問い合わせ */
.form { display: grid; gap: 22px; background: var(--white); border-radius: var(--r-l); padding: clamp(24px, 4vw, 48px); }
.fld { display: grid; gap: 8px; }
.fld label, .fld .lb { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.req { font-size: 11px; color: #fff; background: var(--red); border-radius: 4px; padding: 0 8px; line-height: 1.8; }
.opt { font-size: 11px; color: var(--sub); background: var(--mist); border-radius: 4px; padding: 0 8px; line-height: 1.8; }
.fld input, .fld select, .fld textarea { width: 100%; font: inherit; font-size: 16px; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #FCFCFC; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(36, 71, 107,.15); }
.fld textarea { min-height: 180px; resize: vertical; }
.agree { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.agree input { width: 20px; height: 20px; accent-color: var(--green); }
.agree a { color: var(--green); text-decoration: underline; }
.form__msg { border-radius: 10px; padding: 14px 18px; background: var(--green-t); color: var(--green-d); font-weight: 700; font-size: 14px; }
.form .btn { justify-self: center; min-width: 280px; cursor: pointer; }
.hp { position: absolute; left: -9999px; }

/* 規約 */
.legal-body { background: var(--white); border-radius: var(--r-l); padding: clamp(24px, 4vw, 48px); display: grid; gap: 1em; }
.legal-body h2 { font-size: 18px; color: var(--green); margin-top: 1em; }
.legal-body ul { padding-left: 1.2em; list-style: disc; }
.legal-body a { color: var(--green); text-decoration: underline; }
.legal-body .legal-box { background: var(--mist); border-radius: 10px; padding: 16px 20px; font-size: 14px; }
.legal-body table.tbl th { width: 28%; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.legal-nav a { border: 1.5px solid var(--green); color: var(--green); border-radius: 999px; padding: 4px 16px; font-weight: 700; font-size: 14px; }
.legal-nav a[aria-current] { background: var(--green); color: #fff; }

/* =========================================================================
   フッター・浮かぶ入口・上へ
   ========================================================================= */
.ft { background: var(--white); padding-top: clamp(56px, 7vw, 88px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }
.ft__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.ft__co { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ft__co .logo__mk { width: 72px; }
.ft__co .logo__t b { font-size: 26px; }
.ft__name { font-weight: 700; } .ft__name span { font-family: var(--fn); font-size: 12px; color: var(--sub); margin-left: 6px; }
.ft__co address { font-style: normal; font-size: 14px; line-height: 1.9; color: var(--sub); }
.ft__mail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fn); font-weight: 600; user-select: all; }
.ft__mail .ico { color: var(--green); }
.ft__note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); border: 1.5px solid var(--green); border-radius: 999px; padding: 4px 14px; }
.ft__note .ico { width: 14px; height: 14px; }
.ft__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; align-content: start; }
.ft__col { display: grid; gap: 14px; align-content: start; }
.ft__h { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.ft__h::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-l); }
.ft__h:hover { color: var(--green); }
.ft__col ul { display: grid; gap: 2px; margin-top: 8px; }
.ft__col li a { position: relative; display: inline-block; font-size: 13px; color: var(--sub); padding-left: 16px; line-height: 1.8; padding-block: 2px; }
.ft__col li a::before { content: ""; position: absolute; left: 0; top: calc(.9em + 2px); width: 8px; height: 1.5px; background: var(--green-l); }
.ft__col li a:hover { color: var(--green); }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.ft__bottom ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft__bottom a:hover { color: var(--green); }
@media (max-width: 960px) { .ft__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ft__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ft { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); } }

.fl { position: fixed; z-index: 40; right: max(20px, calc(var(--gutr) + 4px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); display: flex; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .4s, transform .6s var(--ease), visibility .4s; }
.fl.is-on { opacity: 1; visibility: visible; transform: none; }
.fl__card { display: flex; align-items: center; gap: 12px; width: 260px; padding: 12px 16px; border-radius: 14px; background: var(--white); border: 2px solid var(--green); box-shadow: 0 14px 34px -14px rgba(42,42,42,.35); transition: transform .3s var(--ease), background-color .2s; }
.fl__card:hover { transform: translateY(-3px); }
.fl__card--red { border-color: var(--red); }
.fl__ico { width: 42px; height: 42px; border-radius: 10px; background: var(--green-t); color: var(--green); display: grid; place-items: center; flex: none; }
.fl__card--red .fl__ico { background: var(--red); color: #fff; }
.fl__t { display: flex; flex-direction: column; line-height: 1.45; }
.fl__t small { font-size: 11px; color: var(--sub); }
.fl__t b { font-size: 15px; color: var(--green); }
.fl__card--red .fl__t b { color: var(--red); }
.totop { position: fixed; z-index: 39; right: max(20px, calc(var(--gutr) + 4px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--green); background: var(--white); color: var(--green); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background-color .2s; }
.totop.is-on { opacity: 1; visibility: visible; }
.totop:hover { background: var(--green); color: #fff; }
@media (max-width: 760px) {
  .fl { left: 0; right: 0; bottom: 0; gap: 0; padding: 8px max(8px, var(--gutr)) calc(env(safe-area-inset-bottom, 0px) + 8px) max(8px, var(--gut)); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .fl__card { width: auto; padding: 8px 10px; gap: 8px; box-shadow: none; }
  .fl__ico { width: 34px; height: 34px; }
  .fl__t small { display: none; } .fl__t b { font-size: 13px; }
  .totop { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); width: 44px; height: 44px; }
}

/* =========================================================================
   スクロールで現れる（最初の画面に入っているものは最初から見える）
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .pre { opacity: 0; transform: translateY(36px); }
  .js .pre.is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2, 1, .3, 1), transform 1s cubic-bezier(.2, 1, .3, 1); transition-delay: calc(var(--i, 0) * 90ms); }   /* v23：ぼかしをやめて、速く・はっきり */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* 制作メモ（_guide） */
.guide-nav { position: relative; display: flex; flex-wrap: wrap; gap: 8px; background: rgba(243,243,243,.92); backdrop-filter: blur(8px); padding: 10px; border-radius: 999px; width: fit-content; margin: 0 auto 40px; }
.guide-nav a { padding: 4px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.guide-nav a:hover { background: var(--white); color: var(--green); }
.tree { display: grid; gap: 10px; }
.tree ul { display: grid; gap: 8px; margin: 8px 0 4px 22px; padding-left: 18px; border-left: 2px solid var(--green-l); }
.tree li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; background: var(--white); border-radius: 10px; padding: 10px 16px; }
.tree li > div b { color: var(--green); }
.tree li > div code { font-family: var(--fn); font-size: 12px; color: var(--sub); }
.tree li > div span { font-size: 13px; color: var(--sub); }
.tree li.new > div { box-shadow: inset 4px 0 0 var(--red); }
.wf { display: grid; gap: 6px; counter-reset: wf; }
.wf li { counter-increment: wf; display: grid; grid-template-columns: 44px minmax(0, 200px) minmax(0, 1fr); gap: 12px; align-items: center; background: var(--white); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.wf li::before { content: counter(wf, decimal-leading-zero); font-family: var(--fn); font-weight: 700; color: var(--green); }
.wf li b { color: var(--ink); }
.wf li span { color: var(--sub); }
.wf li.bg-g { background: var(--green-t); }
@media (max-width: 700px) { .wf li { grid-template-columns: 36px minmax(0, 1fr); } .wf li span { grid-column: 2; } }
.pr { background: var(--white); border-radius: var(--r-l); padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; }
.pr + .pr { margin-top: 18px; }
.pr__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pr__id { font-family: var(--fn); font-weight: 700; color: #fff; background: var(--green); border-radius: 8px; padding: 2px 10px; }
.pr__id.ph { background: var(--ink); }
.pr__h h3 { font-size: 18px; }
.pr__m { font-size: 13px; color: var(--sub); }
.pr pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; background: var(--mist); border-radius: 12px; padding: 16px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.8; margin: 0; max-height: 360px; overflow: auto; }
.pr .copy { justify-self: start; color: var(--green); border-color: var(--green); padding: 6px 16px; font-size: 13px; }
.pr .copy.is-done { background: var(--green); color: #fff; }
.todo { display: grid; gap: 10px; counter-reset: td; }
.todo li { counter-increment: td; background: var(--white); border-radius: 10px; padding: 14px 18px 14px 52px; position: relative; font-size: 15px; }
.todo li::before { content: counter(td); position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--fn); font-weight: 700; font-size: 13px; display: grid; place-items: center; }

/* =========================================================================
   v8：ricoas の見た目に合わせた上書き
   ========================================================================= */
/* お役立ち情報（ricoas のクリーム色の面 → #F3F3F3） */
.info { background: var(--cream); }
.info__t { text-align: center; font-size: clamp(28px, 3.35vw, 48px); font-weight: 700; color: var(--green); letter-spacing: .05em; line-height: 1.5; margin-bottom: clamp(36px, 5vw, 56px); }
.info__t em { font-style: normal; color: var(--red); }
.info__sub { text-align: center; margin-bottom: 28px; }
.info__sub span { display: inline-block; font-size: clamp(20px, 1.9vw, 26px); color: var(--green); letter-spacing: .06em; padding-bottom: 6px; border-bottom: 2px solid var(--green); }
.col-card { display: flex; flex-direction: column; gap: 14px; }
.col-card__img { position: relative; }
.col-card__img .pic { aspect-ratio: 16 / 11; border-radius: var(--r); }
.col-card__img .pic img { transition: transform .8s var(--ease); }
.col-card__k { position: absolute; left: 12px; top: 12px; z-index: 2; }
.col-card h3 { font-size: 17px; color: var(--green); line-height: 1.6; transition: color .2s; }
.col-card p { font-size: 14px; color: var(--sub); }
@media (hover: hover) { .col-card:hover h3 { color: var(--red); } .col-card:hover .pic img { transform: scale(1.05); } }
.info .own { background: var(--white); }
.info .own__item { background: var(--mist); }

/* 会社案内＋お知らせ（緑の面） */
.co { background: var(--green); color: #fff; }
.co__txt h3 { font-size: clamp(30px, 3.1vw, 44px); font-weight: 700; letter-spacing: .04em; line-height: 1.5; }
.co__txt p { color: #fff; }
.co__fig { aspect-ratio: auto; background: none; border-radius: var(--r); }
.co__fig .pic { aspect-ratio: 4 / 3; }
.co__card h4 { font-size: 20px; }
.co__card h4 .ico { width: 24px; height: 24px; }
.news-in { margin-top: clamp(64px, 8vw, 100px); }
.news__t { text-align: center; font-size: 28px; letter-spacing: .12em; margin-bottom: 32px; }
.news__t span { padding-bottom: 6px; border-bottom: 2px solid #fff; }
.news-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ncard { display: flex; flex-direction: column; gap: 8px; color: #fff; }
.ncard__img { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); background: var(--white); display: grid; place-items: center; overflow: hidden; }
.ncard__mk svg { width: 96px; height: auto; fill: var(--green); transition: transform .6s var(--ease); }
.ncard__img .pill { position: absolute; left: 12px; top: 12px; }
.ncard time { font-family: var(--fn); font-size: 13px; opacity: .85; margin-top: 4px; }
.ncard__t { font-weight: 700; font-size: 15px; line-height: 1.6; }
@media (hover: hover) { a.ncard:hover .ncard__mk svg { transform: scale(1.06); } a.ncard:hover .ncard__t { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 860px) { .news-cards { grid-template-columns: 1fr; } .ncard { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; } .ncard__img { grid-row: 1 / span 2; } .ncard__img .pill { display: none; } .ncard__mk svg { width: 54px; } }

/* 右下の入口（ricoas の写真つきカード） */
.fl__card { width: 268px; padding: 8px 14px 8px 8px; gap: 12px; border: 2.5px solid var(--leaf); border-radius: 10px; box-shadow: 0 10px 28px -12px rgba(42,42,42,.35); }
.fl__card + .fl__card { border-color: var(--leaf); }
.fl__pic { width: 72px; height: 54px; aspect-ratio: auto; border-radius: 6px; flex: none; }
.fl__t small { font-size: 11px; color: var(--sub); }
.fl__t b { font-size: 15px; color: var(--green); }
.fl__card:hover { background: var(--mint-l); }
@media (max-width: 760px) { .fl__pic { display: none; } .fl__card { border-width: 1.5px; justify-content: center; } .fl__card:last-child { background: var(--red); border-color: var(--red); } .fl__card:last-child .fl__t b { color: #fff; } .fl__card:last-child .fl__t small { color: rgba(255,255,255,.85); } }

/* 下層ページ：写真の扱い */
.ph__side .pic { aspect-ratio: 4 / 3; border-radius: var(--r-l); box-shadow: 0 30px 60px -32px rgba(42,42,42,.35); }
.why .pic { aspect-ratio: 4 / 3; border-radius: var(--r-l); }
.two .pic { aspect-ratio: 16 / 10; }
.nf__mk svg { width: 100%; max-width: 280px; height: auto; fill: var(--green-l); }
.ph { background: var(--mint); }
.ph__deco { height: 128px; }

/* 制作メモ：写真の用意リスト */
.pls { display: grid; gap: 14px; margin-top: 24px; }
.pl { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; background: var(--white); border-radius: var(--r); padding: 14px; }
.pl__img { aspect-ratio: 16 / 10; }
.pl__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.pl__h h3 { font-size: 16px; }
.pl__l { display: grid; gap: 4px; font-size: 14px; }
.pl__l b { display: inline-block; min-width: 7em; color: var(--green); font-size: 12px; }
@media (max-width: 640px) { .pl { grid-template-columns: 1fr; } }

.hd__tab b .spx { display: none; }
.fv__nav span { word-break: keep-all; overflow-wrap: anywhere; }


/* =========================================================================
   v9：色の差・新しい段
   ========================================================================= */
/* 弧と若葉の帯をはっきり */
.fv__nav a { background: rgba(36, 71, 107, .55); }
.badge { color: var(--green); }
.badge svg { width: 42px; height: 42px; }
@media (max-width: 760px) { .badge svg { width: 30px; height: 30px; } }
.tag { border-color: var(--green); }
.strip { border-color: var(--green); }
.strip > .pill { background: var(--green); }

/* お知らせ（ricoas の PICK UP の位置。最初の画面のすぐ下の緑の帯） */
.pick { background: var(--green); color: #fff; padding-block: 40px 56px; position: relative; }
.pick::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
.pick .wrap { position: relative; z-index: 1; }
.pick__t { text-align: center; font-family: var(--fn); font-size: 26px; letter-spacing: .12em; margin-bottom: 22px; }
.slider--pick { padding-inline: 64px; }
.slider--pick .slider__track { grid-auto-columns: calc((100% - 2 * 22px) / 3); gap: 22px; }
.pick__arw, .side__arw { position: absolute; top: 50%; margin-top: -30px; z-index: 2; background: transparent; border-color: #fff; color: #fff; }
.pick__arw:hover { background: rgba(255,255,255,.15); color: #fff; }
.slider--pick .slider__btn--prev { left: 0; } .slider--pick .slider__btn--next { right: 0; }
.slider--pick .slider__dots { justify-content: center; margin-top: 16px; }
.slider--pick .slider__dots i { background: rgba(255,255,255,.5); }
.slider--pick .slider__dots i.on { background: #fff; }
.pick .ncard__img { aspect-ratio: 16 / 7; border-radius: 10px; }
.pick .ncard__mk svg { width: 70px; }
.pick .ncard { color: #fff; }
@media (max-width: 960px) { .slider--pick .slider__track { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 600px) { .slider--pick { padding-inline: 0; } .slider--pick .slider__track { grid-auto-columns: 84%; } .pick__arw { display: none; } .pick .ncard { display: flex; } .pick .ncard__img .pill { display: inline-flex; } }

/* お客様の事例（ricoas の「お客様の声」のカード） */
.slider--side { padding-inline: clamp(0px, 5vw, 70px); }
.slider--side .slider__track { gap: 26px; grid-auto-columns: calc((100% - 2 * 26px) / 3); }
.side__arw { margin-top: -26px; width: 52px; height: 52px; background: var(--white); border-color: var(--green); color: var(--green); }
.side__arw:hover { background: var(--green); color: #fff; }
.slider--side .slider__btn--prev { left: 0; } .slider--side .slider__btn--next { right: 0; }
.vc { display: flex; flex-direction: column; gap: 16px; background: var(--white); border-radius: 16px; padding: 36px 32px 32px; height: 100%; }
.vc__hd { display: flex; align-items: center; gap: 14px; }
.vc__av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--green); }
.vc__av img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.vc__av svg { width: 100%; height: 100%; }
.vc__name { font-size: clamp(18px, 1.6vw, 22px); color: var(--green); line-height: 1.45; letter-spacing: .02em; }
.vc__meta { font-size: 13px; color: var(--green); font-weight: 500; }
.vc__res { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; padding: 12px 16px; background: var(--mint-l); border-radius: 10px; }
.vc__res .num { font-size: 38px; font-weight: 700; color: var(--red); line-height: 1.1; }
.vc__res b { font-size: 15px; color: var(--red); }
.vc__res > span:last-child { width: 100%; font-size: 12px; color: var(--green-d); line-height: 1.6; }
.vc__q { font-size: 15px; font-weight: 700; color: var(--green); }
.vc__t { font-size: 15px; line-height: 1.85; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btn--block { width: 100%; min-width: 0; margin-top: auto; min-height: 60px; border-radius: 8px; }
.btn--block .btn__arw { background: transparent; border: 1.5px solid #fff; color: #fff; }
.btn--block:hover { background: var(--white); color: var(--green); border-color: var(--green); }
.btn--block:hover .btn__arw { background: var(--green); border-color: var(--green); color: #fff; }
@media (max-width: 960px) { .slider--side .slider__track { grid-auto-columns: calc((100% - 26px) / 2); } }
@media (max-width: 600px) { .slider--side { padding-inline: 0; } .slider--side .slider__track { grid-auto-columns: 88%; } .side__arw { display: none; } .vc { padding: 28px 22px 24px; } }

/* 制作実績（今の kikudu.com の実績スライダーの形） */
.wks__bar { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; }
.wks__bar h3 { font-size: 22px; letter-spacing: .1em; color: var(--ink); }
.wks__bar span { flex: 1; height: 1px; background: rgba(42, 42, 42, .15); }
.slider--wk .slider__track { grid-auto-columns: calc((100% - 2 * 30px) / 2.6); gap: 30px; padding-bottom: 24px; }
.wk2 { display: flex; flex-direction: column; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px -22px rgba(42,42,42,.35); height: 100%; transition: transform .45s var(--ease), box-shadow .45s; }
.wk2__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1e1e1e; }
.wk2__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.wk2__img.is-phone { background: var(--mint); }
.wk2__img.is-phone img { object-fit: contain; object-position: center; padding: 10px 0; }
.wk2__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; margin: -25px 0 0 -36px; border-radius: 14px; background: rgba(30, 30, 30, .62); display: grid; place-items: center; }
.wk2__play svg { width: 26px; height: 26px; fill: #fff; }
.wk2__b { display: flex; flex-direction: column; gap: 8px; padding: 26px 30px 28px; flex: 1; }
.wk2__k { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--green); }
.wk2__t { font-size: 18px; letter-spacing: .08em; line-height: 1.6; }
.wk2__m { font-size: 13px; color: var(--sub); }
.wk2__lk { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--green); }
.wk2__lk .ico { width: 16px; height: 16px; }
@media (hover: hover) { .wk2:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(42,42,42,.45); } .wk2:hover .wk2__img img { transform: scale(1.04); } }
.wks__nav { display: flex; justify-content: flex-end; gap: 20px; margin-top: 10px; }
.wks__nav .slider__btn { width: 80px; height: 80px; border-color: rgba(42,42,42,.12); color: var(--ink); background: var(--white); }
.wks__nav .slider__btn:hover { background: var(--ink); color: #fff; }
.wks__nav .slider__btn .ico { width: 24px; height: 24px; }
@media (max-width: 960px) { .slider--wk .slider__track { grid-auto-columns: calc((100% - 30px) / 1.6); } }
@media (max-width: 600px) { .slider--wk .slider__track { grid-auto-columns: 86%; gap: 18px; } .wks__nav .slider__btn { width: 56px; height: 56px; } .wk2__b { padding: 20px 22px 22px; } }

/* 相談の帯（ricoas の形：紙のような緑・下線つきのひとこと・横長の大きなボタン・薄いメール） */
.cta { background: var(--green); }
.cta::after { background: var(--grain), radial-gradient(40% 50% at 18% 40%, rgba(255,255,255,.07), transparent 70%), radial-gradient(35% 45% at 82% 70%, rgba(0,0,0,.08), transparent 70%); opacity: .55; mix-blend-mode: soft-light; }
.cta__sub { font-weight: 500; font-size: 18px; letter-spacing: .1em; padding-bottom: 8px; border-bottom: 1.5px solid #fff; }
.cta__t { font-size: clamp(24px, 2.85vw, 41px); }
.cta__btns { gap: 22px; margin-top: 26px; }
.btn--cta { min-width: min(366px, 100%); min-height: 86px; font-size: 18px; border-radius: 6px; padding-right: 72px; padding-left: 40px; }
.cta__mail { margin-top: 18px; gap: 8px 14px; }
.cta__mail-i { width: 40px; height: 40px; background: rgba(255,255,255,.75); color: var(--green); }
.cta__mail-a { font-style: italic; font-size: clamp(26px, 3vw, 40px); color: rgba(255,255,255,.78); letter-spacing: .02em; }
.cta__note { font-size: 15px; line-height: 1.9; }
.cta__ph--big { opacity: .92; }
.cta__ph--big img { filter: saturate(.9); }
.cta__ph--big::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(200deg, transparent 45%, rgba(36, 71, 107,.45)); pointer-events: none; }

/* SNSのロゴの帯 */
.strip--logo ul { gap: 18px clamp(22px, 3.6vw, 52px); align-items: flex-start; }
.strip--logo li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--ff); font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.sns-logo { width: 40px; height: 40px; display: block; }
@media (max-width: 600px) { .strip--logo ul { display: grid; grid-template-columns: repeat(4, 1fr); } .sns-logo { width: 34px; height: 34px; } .strip--logo li { font-size: 10.5px; text-align: center; } }

/* 選ばれる理由ページ：数字の行 */
.why--n { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.why__num { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; aspect-ratio: 1; max-width: 300px; border-radius: 50%;
  background: linear-gradient(var(--white), var(--white)) padding-box, conic-gradient(from 300deg, var(--leaf) 0 22%, var(--green) 22% 58%, var(--green-d) 58% 80%, var(--green) 80% 100%) border-box; border: 12px solid transparent; }
.why__no { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .1em; margin-right: 8px; }
.why__k { display: flex; align-items: center; gap: 6px; }
.why h3 em { font-style: normal; color: var(--red); }
.why__note { font-size: 12px; color: var(--sub); margin-top: 6px; }
@media (max-width: 860px) { .why--n { grid-template-columns: 1fr; } .why__num { width: min(260px, 80%); } }

/* 自社課題に向き合う */
.ckf { display: grid; gap: 22px; }
.ckg { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.ckg legend { margin-bottom: 10px; padding: 0; }
.ckg ul { display: grid; gap: 10px; }
.ck { display: flex; align-items: center; gap: 14px; background: var(--white); border-radius: 12px; padding: 16px 20px; cursor: pointer; border: 2px solid transparent; transition: border-color .2s, background-color .2s; }
.ck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck__box { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--green); display: grid; place-items: center; flex: none; color: transparent; transition: background-color .2s, color .2s; }
.ck__box .ico { width: 18px; height: 18px; stroke-width: 3; }
.ck__t { font-weight: 700; font-size: 16px; line-height: 1.6; }
.ck:has(input:checked) { border-color: var(--green); background: var(--mint-l); }
.ck input:checked + .ck__box { background: var(--green); color: #fff; }
.ck input:focus-visible + .ck__box { outline: 3px solid var(--red); outline-offset: 2px; }
.ckf__none { justify-self: center; background: none; border: 0; color: var(--green-d); text-decoration: underline; text-underline-offset: 4px; font-size: 14px; cursor: pointer; padding: 6px; }
.ckr { margin-top: 32px; }
.ckr__item { background: var(--green); color: #fff; border-radius: 16px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 12px; }
.ckr__k { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--leaf-l); }
.ckr__item h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .04em; }
.ckr__item .btns { margin-top: 10px; }

.tag--w { border-color: #fff; }
.map .land { fill: var(--mint); }
.vc__name { font-size: 18px; }
@media (max-width: 600px) { .acc summary { font-size: 15px; padding: 10px 40px; } }

/* =========================================================================
   v10（2026-11-01 のご指示）：並びの組み直し・新しい段・動き
   ========================================================================= */
:root {
  --sand: #F3F0E8;      /* 民主化の段・お知らせ・事業紹介の面（infofarm の生成りの位置） */
  --sand-d: #B5AE98;    /* 生成りの上の英字・線 */
  --eq: cubic-bezier(.16, .5, .43, 1);   /* 文字がぼかしから現れるときのゆるみ */
}
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- 見出しの文字：1文字ずつ、ぼかしから現れる（栄和会館の見出しの出方） ---- */
.js-split .ch { display: inline; }   /* inline のまま（文節で改行する <wbr> の効き目を残す） */
/* v23：ぼかしは残しつつ、下から浮き上がる動きを足して、速く（1文字 32ms ずつ）。inline のままなので top で動かす */
.js .js-split .ch { position: relative; top: .42em; opacity: 0; filter: blur(6px); transition: opacity .5s ease, filter .45s ease, top .8s cubic-bezier(.2, 1, .3, 1); transition-delay: calc(var(--c, 0) * 32ms); will-change: opacity, filter; }
.js .js-split.is-show .ch { top: 0; opacity: 1; filter: blur(0); }
/* v23：文字に分ける前の一瞬、見出しがそのまま見えてしまうのを防ぐ（動きが止まっても 2.5 秒で必ず出す） */
@media (prefers-reduced-motion: no-preference) { .js .js-split:not(.is-split) { visibility: hidden; animation: jsSplitFb 0s linear 2.5s forwards; } }
@keyframes jsSplitFb { to { visibility: visible; } }
.js .js-split.is-done .ch { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .js .js-split .ch { opacity: 1; filter: none; top: 0; transition: none; } }

/* ---- 写真：左から幕が開くように現れ、少し引いて止まる ---- */
.js [data-img].pre-img { clip-path: inset(0 100% 0 0); }
.js [data-img].pre-img img { transform: scale(1.16); }
.js [data-img].pre-img.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1); }
.js [data-img].pre-img.is-in img { transform: scale(1); transition: transform 1.9s var(--ease); }

/* ---- 最初の画面：お知らせ1行・ラベル・言葉 ---- */
.fv__news { display: inline-flex; align-items: center; gap: 12px; max-width: min(580px, 100%); margin-bottom: 16px; padding: 7px 12px 7px 7px; border-radius: 999px; background: rgba(255,255,255,.93); color: var(--ink); font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); transition: background-color .3s, transform .35s var(--ease); }
.fv__news:hover { background: #fff; transform: translateY(-2px); }
.fv__news-k { flex: none; padding: 3px 12px; border-radius: 999px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.fv__news time { flex: none; font-family: var(--fn); font-size: 13px; color: var(--sub); letter-spacing: .02em; }
.fv__news-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.fv__news .ico { width: 16px; height: 16px; color: var(--green); }
.fv__tagline { letter-spacing: .14em; }
@media (prefers-reduced-motion: no-preference) {
  .fv__catch .ln { animation: none; }
  .fv__news { animation: fadeup 1s var(--ease) 2.3s both; }
  .fv__tagline { animation-delay: .25s; }
  .fv__cta { animation-delay: 1.5s; } .fv__badges-wrap { animation-delay: 1.65s; }
}
@media (max-width: 760px) {
  .fv__news { width: 100%; font-size: 12px; gap: 8px; padding: 6px 10px 6px 6px; margin-bottom: 12px; }
  .fv__news-k { font-size: 11px; padding: 2px 9px; }
  .fv__news time { font-size: 11.5px; }
  .fv__tagline { letter-spacing: .08em; }
}

/* ---- 生成りの面（民主化の段＋お知らせ） ---- */
.sandwrap { position: relative; background: var(--sand); }
.sandwrap__wave { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(34px, 5vw, 76px); fill: var(--white); pointer-events: none; }

/* 民主化の段（馬路の森の段の形） */
.msg { position: relative; padding: clamp(96px, 11vw, 160px) 0 clamp(24px, 3vw, 40px); }
.msg__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.msg__t { font-size: clamp(26px, 2.9vw, 42px); font-weight: 700; color: var(--ink); letter-spacing: .12em; line-height: 1.55; }
.msg__t .ln { display: block; white-space: nowrap; }
.msg__t .ln:first-child { position: relative; display: inline-block; padding-bottom: .22em; margin-bottom: .32em; }
.msg__t .ln:first-child::after { content: ""; position: absolute; left: 0; right: .12em; bottom: 0; height: 3px; border-radius: 2px; background: var(--green-d); transform-origin: left; }
.js .msg__t .ln:first-child::after { transform: scaleX(0); transition: transform 1.2s var(--ease) .55s; }
.js .msg__t.is-show .ln:first-child::after { transform: none; }
.msg__body { margin-top: clamp(28px, 3.4vw, 44px); }
.msg__body p { font-size: 15px; line-height: 2.15; letter-spacing: .08em; color: var(--ink); }
.msg__body p + p { margin-top: 1.5em; }
.ulink { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(32px, 4vw, 48px); padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 18px; font-weight: 700; letter-spacing: .1em; }
.ulink i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-d); color: #fff; transition: transform .4s var(--ease); }
.ulink i .ico { width: 14px; height: 14px; }
.ulink:hover i { transform: translateX(4px); }
.msg__fig { position: relative; }
.msg__slides { position: relative; aspect-ratio: 4 / 3.3; border-radius: 14px; overflow: hidden; background: var(--green-t); }
.msg__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.msg__slide.is-on { opacity: 1; }
.msg__slide .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.msg__slide .ptag { left: 14px; right: auto; top: 14px; bottom: auto; }
.msg__dots { display: flex; justify-content: flex-start; gap: 10px; margin-top: 18px; padding-left: 4px; }
.msg__dots i { width: 9px; height: 9px; border-radius: 50%; background: #D8D3C5; transition: background-color .4s; }
.msg__dots i.on { background: var(--green); }
.msg__news { position: absolute; right: clamp(-40px, -2.4vw, -16px); bottom: 0; width: min(420px, 88%); padding: 16px 18px 14px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 7px rgba(214, 237, 234, .85), 0 22px 44px -26px rgba(22, 34, 52, .45); }
.msg__news-h { display: flex; align-items: baseline; gap: 10px; }
.msg__news-h b { font-size: 15px; color: var(--green-d); letter-spacing: .1em; }
.msg__news-h span { font-family: var(--fn); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--leaf); }
.msg__news-h a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--green); }
.msg__news-h a .ico { width: 14px; height: 14px; }
.msg__news-in { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; margin-top: 10px; align-items: center; }
.msg__news-mk { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 6px; background: var(--mint); color: var(--green); }
.msg__news-mk svg { width: 44px; height: auto; }
.msg__news ol { display: grid; gap: 2px; }
.msg__news li a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 4px 0; font-size: 12.5px; line-height: 1.5; transition: color .3s; }
.msg__news .n { position: relative; color: var(--green); font-weight: 700; font-size: 12px; transition: transform .35s var(--ease); }
.msg__news .nb { min-width: 0; }
.msg__news time { display: block; font-size: 11px; color: var(--sub); }
.msg__news .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink); }
.msg__news .nb { overflow: hidden; }
.msg__news li a:hover .t { color: var(--green); }
.msg__news li a:hover .n { transform: translateX(4px); }
@media (max-width: 900px) {
  .msg__in { grid-template-columns: 1fr; }
  .msg__fig { padding-bottom: 0; }
  .msg__news { position: relative; right: auto; bottom: auto; width: auto; margin: 18px 10px 0; }
  .msg__dots { margin-top: 14px; justify-content: center; padding: 0; }
}
@media (max-width: 600px) {
  .msg { padding-top: 76px; }
  .msg__t { font-size: clamp(22px, 7.2vw, 30px); letter-spacing: .08em; }
  .msg__body p { font-size: clamp(13px, 3.75vw, 14.5px); letter-spacing: .04em; line-height: 2.05; }
  .ulink { font-size: 16px; }
}

/* お知らせ（一覧の段） */
.nws { position: relative; padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 9vw, 120px); }
.nws__in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.nws__h { text-align: center; padding-top: 8px; }
.nws__mk svg { width: 38px; height: 23px; display: block; margin: 0 auto 10px; }
.nws__h h2 { font-size: clamp(24px, 2.2vw, 30px); color: var(--green); letter-spacing: .14em; line-height: 1.4; }
.nws__h p { font-size: 12px; font-weight: 600; letter-spacing: .24em; color: var(--ink); margin-top: 6px; }
.nws__list li a { display: grid; grid-template-columns: 7.6em 7.4em minmax(0, 1fr); align-items: center; gap: 18px; padding: 15px 4px; border-bottom: 1px solid #E3DDCD; transition: background-color .3s; }
.nws__list li:first-child a { border-top: 1px solid #E3DDCD; }
.nws__list li a:hover { background: rgba(255,255,255,.55); }
.nws__list time { font-size: 15px; color: var(--sub); letter-spacing: .04em; }
.nws__list .tag { justify-self: start; display: inline-block; min-width: 6.6em; text-align: center; padding: 2px 10px; border: 1px solid var(--green); border-radius: 4px; background: #fff; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; }
.nws__list .t { font-size: 15px; font-weight: 500; letter-spacing: .05em; line-height: 1.6; }
.more { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 26px; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.more i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff; transition: transform .4s var(--ease), background-color .3s; }
.more i .ico { width: 18px; height: 18px; }
.more:hover i { transform: translateX(4px); background: var(--green-d); }
@media (max-width: 760px) {
  .nws__in { grid-template-columns: 1fr; gap: 20px; }
  .nws__h { display: flex; align-items: baseline; gap: 12px; text-align: left; padding: 0; }
  .nws__mk svg { margin: 0; }
  .nws__list li a { grid-template-columns: auto auto 1fr; gap: 6px 12px; padding: 14px 2px; }
  .nws__list time { font-size: 13px; }
  .nws__list .t { grid-column: 1 / -1; font-size: 14px; }
}

/* ---- 入口のカード3つ ---- */
.ent { position: relative; overflow: hidden; background: var(--mint-l); padding: clamp(96px, 10vw, 140px) 0 clamp(72px, 8vw, 110px); }
.ent__wave { position: absolute; left: 0; top: -1px; width: 100%; height: clamp(34px, 5vw, 80px); fill: var(--sand); pointer-events: none; }
.ent__leaf { position: absolute; right: -90px; top: 40px; width: min(300px, 30vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--leaf-l), rgba(235, 220, 192, 0) 70%); opacity: .9; pointer-events: none; }
.ent__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 32px); max-width: 1060px; margin-inline: auto; }
.ent__card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 36px 22px 60px; border-radius: 20px; background: #fff; border: 2px solid transparent; box-shadow: 0 16px 34px -24px rgba(23, 46, 71, .45); transition: border-color .3s, transform .45s var(--ease), box-shadow .45s; }
.ent__card:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(23, 46, 71, .5); }
.ent__ico { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--green); color: #fff; margin-bottom: 14px; }
.ent__ico .ico { width: 42px; height: 42px; stroke-width: 1.6; }
.ent__list li:nth-child(2) .ent__ico { background: var(--green-d); }
.ent__list li:nth-child(3) .ent__ico { background: var(--amber); }
.ent__card h3 { font-size: 18px; color: var(--green); letter-spacing: .12em; }
.ent__card p { font-size: 13px; color: var(--sub); margin-top: 4px; letter-spacing: .04em; }
.ent__arw { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); transition: background-color .3s, color .3s; }
.ent__arw .ico { width: 15px; height: 15px; }
.ent__card:hover .ent__arw { background: var(--green); color: #fff; }
@media (max-width: 760px) {
  .ent__list { grid-template-columns: 1fr; max-width: 420px; gap: 12px; }
  .ent__card { flex-direction: row; text-align: left; gap: 0 14px; padding: 16px 56px 16px 16px; display: grid; grid-template-columns: 58px 1fr; }
  .ent__ico { width: 58px; height: 58px; margin: 0; grid-row: span 2; }
  .ent__ico .ico { width: 30px; height: 30px; }
  .ent__card h3 { font-size: 16px; align-self: end; }
  .ent__card p { margin: 0; align-self: start; }
  .ent__arw { top: 50%; bottom: auto; margin-top: -16px; }
  .ent__leaf { width: 220px; right: -60px; top: -20px; }
}

/* ---- 対応しているSNS（10種類に） ---- */
.strip--logo ul { gap: 18px clamp(16px, 2.6vw, 40px); }
.sns-logo--txt { display: grid; place-items: center; border-radius: 10px; border: 1.5px solid var(--ink); background: #fff; font-family: var(--fn); font-size: 9.5px; font-weight: 700; letter-spacing: 0; color: var(--ink); line-height: 1; }
@media (max-width: 600px) { .strip--logo ul { grid-template-columns: repeat(5, 1fr); gap: 14px 6px; } .strip--logo li { font-size: 10px; } .sns-logo--txt { font-size: 8px; } }

/* ---- 事業紹介（infofarm の形：大きな丸・番号・縦の目次・次の小さな丸） ---- */
.biz { position: relative; background: var(--sand); padding-top: clamp(72px, 9vw, 120px); }
.biz__track { position: relative; }
.biz__stage { position: relative; padding: 8px 0 clamp(80px, 9vw, 120px); }
.biz__wrap { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: clamp(8px, 2vw, 28px); }
.biz__nav { position: relative; display: flex; flex-direction: column; gap: 22px; padding-top: 90px; }
.biz__nav::before { content: ""; position: absolute; left: 12px; top: 84px; height: 170px; width: 1px; background: var(--sand-d); opacity: .6; }
.biz__nav button { position: relative; background: none; border: 0; padding: 2px 0 2px 28px; cursor: pointer; color: #A39D88; font-family: var(--fn); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-align: left; transition: color .3s; }
.biz__nav button::before { content: ""; position: absolute; left: 4px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.biz__nav button[aria-current="true"] { color: var(--green); }
.biz__nav button[aria-current="true"]::before { transform: none; }
.biz__panels { display: grid; gap: 80px; }
.biz__p { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.biz__c { position: relative; padding-bottom: 120px; }
.biz__circle { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-left: clamp(0px, 2vw, 24px); border-radius: 50%; background: #fff; box-shadow: 0 0 0 clamp(14px, 1.8vw, 26px) rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 11%; }
.biz__num { position: absolute; right: -2%; top: 1%; font-size: clamp(70px, 7.6vw, 116px); font-weight: 700; line-height: 1; color: var(--green); letter-spacing: -.02em; }
.biz__en { font-family: var(--fn); font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--sand-d); }
.biz__name { margin-top: 8px; font-size: clamp(22px, 2.1vw, 28px); font-weight: 700; color: #4D4D4D; letter-spacing: .1em; line-height: 1.45; }
.biz__sub { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--sub); letter-spacing: .06em; }
.biz__items { margin-top: 20px; display: grid; gap: 7px; text-align: left; }
.biz__items li { position: relative; padding-left: 28px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #4D4D4D; letter-spacing: .05em; }
.biz__items li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 2px; margin-top: -1px; background: var(--green); }
.biz__photo { position: absolute; right: -36px; bottom: 0; width: clamp(140px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 18px 36px -22px rgba(22, 34, 52, .5); }
.biz__photo .pic { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.biz__photo .ptag { display: none; }
.biz__next { position: absolute; left: 0; bottom: 0; width: clamp(130px, 12.5vw, 176px); aspect-ratio: 1; border-radius: 50%; border: 0; background: rgba(255,255,255,.62); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; cursor: pointer; color: #6B6B6B; transition: background-color .3s, transform .45s var(--ease); }
.biz__next b { font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: var(--green); }
.biz__next span { font-size: 12px; font-weight: 700; line-height: 1.45; letter-spacing: .04em; word-break: keep-all; overflow-wrap: anywhere; }
.biz__next:hover { background: #fff; transform: scale(1.04); }
.biz__more-sp { display: none; }
.biz__rn { display: flex; align-items: center; gap: 18px; }
.biz__rn > .num { flex: none; white-space: nowrap; font-size: clamp(60px, 5.8vw, 88px); font-weight: 700; line-height: 1; color: var(--green); letter-spacing: -.02em; }
.biz__rt b { display: block; font-size: clamp(20px, 1.9vw, 26px); color: #4D4D4D; letter-spacing: .08em; line-height: 1.45; }
.biz__rt small { display: block; margin-top: 4px; font-family: var(--fn); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--green); }
.biz__bar { display: block; width: 38px; height: 2px; background: var(--green); margin: 22px 0 20px; }
.biz__desc { font-size: 15px; line-height: 2.05; letter-spacing: .06em; }
.biz__btns { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.biz__ask { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 700; color: var(--green); }
.biz__ask .ico { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.biz__ask:hover .ico { transform: translateX(3px); }
/* 動きあり：1つずつ切り替える */
.biz.is-js .biz__panels { gap: 0; }
.biz.is-js .biz__p { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .55s ease, visibility .55s; }
.biz.is-js .biz__p.is-on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .biz.is-js .biz__p.is-on .biz__circle > *, .biz.is-js .biz__p.is-on .biz__r > * { animation: fadeup .8s var(--ease) both; }
  .biz.is-js .biz__p.is-on .biz__circle > :nth-child(2) { animation-delay: .05s; } .biz.is-js .biz__p.is-on .biz__circle > :nth-child(3) { animation-delay: .1s; }
  .biz.is-js .biz__p.is-on .biz__circle > :nth-child(4) { animation-delay: .15s; } .biz.is-js .biz__p.is-on .biz__circle > :nth-child(5) { animation-delay: .2s; }
  .biz.is-js .biz__p.is-on .biz__r > :nth-child(2) { animation-delay: .08s; } .biz.is-js .biz__p.is-on .biz__r > :nth-child(3) { animation-delay: .14s; } .biz.is-js .biz__p.is-on .biz__r > :nth-child(4) { animation-delay: .2s; }
  .biz.is-js .biz__p.is-on .biz__photo { animation: pop .9s var(--ease) .1s both; }
  .biz.is-js .biz__p.is-on .biz__next { animation: pop .9s var(--ease) .2s both; }
}
/* パソコン：スクロールに合わせて 01→04（画面に止めて切り替える） */
.biz.is-pin .biz__track { height: calc(100vh + var(--n) * 62vh); }
.biz.is-pin .biz__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 0; }
.biz.is-pin .biz__stage > .wrap { width: 100%; }
.biz.is-pin .biz__circle { width: min(100%, 540px, 62vh); }
.biz.is-pin .biz__c { padding-bottom: min(120px, 13vh); }
.biz__prog { display: none; }
@media (max-width: 999px) {
  .biz__wrap { grid-template-columns: minmax(0, 1fr); }
  .biz__nav { position: absolute; left: max(14px, var(--gut)); top: 0; z-index: 3; padding-top: 6px; gap: 14px; }
  .biz__nav::before { top: 0; height: 80px; }
  .biz__p { grid-template-columns: minmax(0, 1fr); }
  .biz__r { display: none; }
  .biz__c { padding-bottom: 200px; max-width: 560px; margin-inline: auto; width: 100%; }
  .biz__circle { width: 100%; margin-left: 0; }
  .biz__next { left: 0; bottom: 70px; width: 120px; }
  .biz__photo { right: 0; bottom: 70px; width: 128px; border-width: 5px; }
  .biz__more-sp { display: inline-flex; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-width: 220px; }
}
@media (max-width: 600px) {
  .biz__circle { aspect-ratio: auto; min-height: min(92vw, 380px); border-radius: 50% / 46%; padding: 58px 28px 50px; box-shadow: 0 0 0 12px rgba(255,255,255,.5); }
  .biz__num { font-size: 64px; right: 4%; top: -2%; }
  .biz__name { font-size: 20px; }
  .biz__sub { font-size: 12px; }
  .biz__items { margin-top: 14px; gap: 4px; }
  .biz__items li { font-size: 12.5px; padding-left: 22px; }
  .biz__items li::before { width: 12px; }
  .biz__c { padding-bottom: 190px; }
  .biz__next { width: 108px; bottom: 74px; }
  .biz__next b { font-size: 28px; }
  .biz__next span { font-size: 11px; }
  .biz__photo { width: 112px; bottom: 74px; }
}

/* ---- 料金の目安・自社事業 ---- */
.price-sec { background: var(--white); }
.price-sec .est { margin-top: 0; }
.own-sec { background: var(--white); }
.own-sec .own { background: var(--mist); }

/* ---- 会社概要（infofarm の形：緑の面・白いカード・写真に縦の英字） ---- */
.co2 { position: relative; overflow: hidden; background: var(--white); padding: clamp(40px, 5vw, 70px) 0 clamp(90px, 10vw, 140px); }
.co2__panel { position: absolute; left: 0; top: clamp(40px, 5vw, 70px); width: 76%; height: 72%; background: var(--green); border-radius: 0 40px 40px 0; }
.co2__panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .35; mix-blend-mode: soft-light; }
.co2__photo { position: absolute; right: 0; top: clamp(100px, 10vw, 150px); width: 60%; height: clamp(440px, 44vw, 640px); border-radius: 40px 0 0 40px; overflow: hidden; background: var(--green-d); }
.co2__photo .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.co2__photo .pic img { height: 112%; margin-top: -6%; }
.co2__vt { position: absolute; z-index: 2; left: 52%; top: 44px; writing-mode: vertical-rl; font-size: clamp(64px, 7.2vw, 112px); font-weight: 700; line-height: 1; letter-spacing: .04em; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.18); pointer-events: none; }
.co2__photo .ptag { left: auto; right: 16px; }
.co2__wrap { position: relative; z-index: 2; }
.co2__card { width: min(100%, 660px); margin-top: clamp(110px, 11vw, 160px); padding: clamp(40px, 5vw, 68px) clamp(28px, 4.4vw, 64px); background: #fff; border-radius: 28px; box-shadow: 0 34px 60px -44px rgba(16, 28, 44, .55); }
.co2__t { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; color: #4D4D4D; letter-spacing: .16em; line-height: 1.4; }
.co2__en { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--green); }
.co2__bar { display: block; width: 38px; height: 2px; background: var(--green); margin: 24px 0; }
.co2__lead { font-size: 15px; line-height: 2.05; }
.co2__dl { margin: 22px 0 32px; border-top: 1px solid var(--line); }
.co2__dl div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.co2__dl dt { font-weight: 700; color: var(--green-d); }
@media (max-width: 860px) {
  .co2 { display: flex; flex-direction: column; padding-top: 0; }
  .co2__panel { top: 0; width: 100%; height: 360px; border-radius: 0 0 40px 0; }
  .co2__wrap { order: 1; }
  .co2__card { margin-top: 64px; }
  .co2__photo { order: 2; position: relative; top: auto; width: 88%; height: 280px; margin: 28px 0 0 auto; border-radius: 28px 0 0 28px; }
  .co2__vt { left: auto; right: 14px; top: 18px; font-size: 36px; }
}

/* ---- よくあるご質問（湘南クラウド会計の形） ---- */
.fq { background: var(--white); }
.fq__list { display: grid; gap: clamp(36px, 4vw, 52px); }
.fq__q { display: flex; align-items: center; gap: 14px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: .1em; line-height: 1.55; color: var(--ink); }
.qa { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-family: var(--fn); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.fq__q .qa { background: #4B4B4B; color: #fff; }
.fq__a { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding-left: 24px; }
.fq__a .qa { width: 34px; height: 34px; background: var(--mist); color: var(--green); font-size: 14px; }
.fq__a p { font-size: 14.5px; line-height: 2; letter-spacing: .08em; color: var(--green-d); padding-top: 2px; }
.fq__txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fq__more { display: inline-block; font-size: 13px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.more2 { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 156px; height: 48px; margin-top: clamp(40px, 5vw, 56px); border: 1.5px solid var(--green-d); border-radius: 10px; color: var(--green-d); font-size: 16px; font-weight: 600; letter-spacing: .1em; transition: background-color .3s; }
.more2 i { position: absolute; right: -15px; bottom: -15px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-d); color: #fff; transition: transform .4s var(--ease); }
.more2 i .ico { width: 15px; height: 15px; }
.more2:hover { background: var(--mint-l); }
.more2:hover i { transform: translate(3px, 3px); }
@media (max-width: 600px) { .fq__a { padding-left: 0; } .qa { width: 32px; height: 32px; font-size: 13px; } .fq__a .qa { width: 30px; height: 30px; } .fq__q { letter-spacing: .05em; gap: 10px; } }

/* ---- 採用（栄和会館の形：太い帯の線・広い字間の見出し・傾いたカード） ---- */
.rc { position: relative; overflow: hidden; background: var(--white); padding: clamp(80px, 9vw, 130px) 0 clamp(100px, 11vw, 150px); }
.rc__line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rc__path { fill: none; stroke: url(#rcg); stroke-width: 90; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .rc__path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.65, 0, .35, 1); }
.js .rc.is-in .rc__path { stroke-dashoffset: 0; }
.rc__in { position: relative; z-index: 1; }
.rc__lab { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.rc__lab .num { color: var(--green); font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.rc__lab i { width: 3px; height: 15px; background: radial-gradient(circle, var(--ink) 1.2px, transparent 1.6px) 0 0 / 3px 5px; }
.rc__head { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rc__t { font-size: clamp(30px, 3.3vw, 48px); font-weight: 700; color: var(--green-d); letter-spacing: .2em; line-height: 1.6; }
.rc__t .ln { display: block; white-space: nowrap; }
.rc__side { display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.rc__side p { font-size: 15px; line-height: 2.1; letter-spacing: .08em; }
.pbtn { display: inline-flex; align-items: center; gap: 14px; padding: 9px 30px 9px 9px; border: 2px solid var(--green); border-radius: 999px; background: #fff; color: var(--green-d); font-size: 15px; font-weight: 700; letter-spacing: .08em; transition: background-color .3s; }
.pbtn i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; transition: transform .4s var(--ease); }
.pbtn i .ico { width: 16px; height: 16px; }
.pbtn:hover { background: var(--green-t); }
.pbtn:hover i { transform: translateX(3px); }
.rc__cards { margin-top: clamp(56px, 6vw, 84px); display: flex; justify-content: center; align-items: flex-start; }
.rc__card { width: min(340px, 33%); position: relative; }
.rc__card:nth-child(2) { z-index: 2; }
.rc__cin { height: 100%; padding: 32px 28px 36px; text-align: center; background: #fff; border-radius: 28px; border: 1px solid #ECE4D6; box-shadow: 0 26px 50px -32px rgba(22, 38, 60, .45); transition: transform .6s var(--ease); }
.rc__card:nth-child(1) .rc__cin { transform: rotate(-6deg) translate(34px, 64px); background: var(--mint-l); }
.rc__card:nth-child(3) .rc__cin { transform: rotate(6deg) translate(-34px, 64px); background: var(--mint-l); }
.rc__card:nth-child(1):hover .rc__cin { transform: rotate(-3deg) translate(28px, 48px); }
.rc__card:nth-child(3):hover .rc__cin { transform: rotate(3deg) translate(-28px, 48px); }
.rc__k { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--green-d); }
.rc__k::before, .rc__k::after { content: ""; width: 16px; height: 9px; background: linear-gradient(var(--green-d), var(--green-d)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--green-d), var(--green-d)) 0 50% / 70% 1.5px no-repeat, linear-gradient(var(--green-d), var(--green-d)) 0 100% / 100% 1.5px no-repeat; opacity: .5; }
.rc__k::after { transform: scaleX(-1); }
.rc__n { font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--green); }
.rc__ico { display: grid; place-items: center; width: 96px; height: 96px; margin: 16px auto 18px; border-radius: 50%; background: var(--green-t); color: var(--green-d); }
.rc__ico .ico { width: 46px; height: 46px; stroke-width: 1.5; }
.rc__card h3 { font-size: 18px; letter-spacing: .06em; }
.rc__tx { margin-top: 10px; font-size: 13.5px; line-height: 1.9; color: var(--sub); text-align: left; }
@media (max-width: 860px) {
  .rc__head { grid-template-columns: 1fr; }
  .rc__side { align-items: flex-start; }
  .rc__cards { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * max(20px, var(--gut))); padding: 8px max(20px, var(--gut)) 24px; justify-content: start; }
  .rc__cards::-webkit-scrollbar { display: none; }
  .rc__card { width: auto; scroll-snap-align: center; }
  .rc__card .rc__cin, .rc__card:hover .rc__cin { transform: none !important; }
  .rc__t { font-size: clamp(28px, 8.6vw, 40px); letter-spacing: .14em; }
}

/* ---- 所在地・対応エリア（栄和会館の地図の段の形） ---- */
.acs { background: var(--mist); padding: clamp(64px, 7vw, 100px) 0; }
.acs__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1360px; margin-inline: auto; padding-left: max(24px, var(--gut)); padding-right: max(24px, var(--gutr)); }
.acs__map { position: relative; aspect-ratio: 1.12; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -36px rgba(22, 34, 52, .5); }
.acs__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.acs__svg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: var(--mint-l); }
.acs__svg .map { width: 88%; height: auto; max-height: 84%; }
.acs__mapnote { font-size: 11px; color: var(--sub); text-align: center; }
.acs__lab { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--green-d); }
.acs__lab i { width: 1px; height: 12px; background: var(--green-d); }
.acs__t { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px clamp(14px, 2vw, 26px); color: var(--green-d); }
.acs__t .en { font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; letter-spacing: .08em; color: var(--green); }
.acs__t .jp { font-size: clamp(42px, 4.4vw, 66px); font-weight: 700; letter-spacing: .3em; line-height: 1.1; margin-right: -.3em; }
.acs__dl { margin-top: 30px; display: grid; gap: 20px; }
.acs__dl dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--green-d); letter-spacing: .06em; }
.acs__dl dt .ico { width: 20px; height: 20px; color: var(--green); }
.acs__dl dd { margin: 6px 0 0 28px; font-size: 15px; line-height: 1.9; }
.acs__gm { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--fn); font-size: 14px; font-weight: 700; color: var(--green-d); }
.acs__gm i { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; transition: transform .35s var(--ease); }
.acs__gm .ico { width: 13px; height: 13px; }
.acs__gm:hover i { transform: translateX(3px); }
.acs__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acs__chips span { padding: 3px 12px; border-radius: 6px; border: 1px solid var(--green); background: #fff; color: var(--green-d); font-size: 13px; font-weight: 700; }
.acs__chips span.main { background: var(--green); color: #fff; }
.acs__s { font-size: 13px; color: var(--sub); margin-top: 8px; }
@media (max-width: 860px) { .acs__in { grid-template-columns: 1fr; } .acs__map { aspect-ratio: 1.15; } .acs__dl dd { margin-left: 0; } }
@media (max-width: 600px) { .acs__t { gap: 4px 12px; } .acs__t .en { font-size: 14px; } .acs__t .jp { font-size: 36px; letter-spacing: .2em; margin-right: -.2em; } }

/* ---- 講演・講座（栄和会館の Event の形） ---- */
.smn { position: relative; overflow: hidden; padding: clamp(60px, 6.4vw, 88px) 0 clamp(56px, 6vw, 80px); background: linear-gradient(180deg, var(--green-d) 0%, var(--green) 100%); color: #fff; }
.smn::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: soft-light; pointer-events: none; }
.smn .wrap { position: relative; z-index: 1; }
.smn__h { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 32px; margin-bottom: clamp(28px, 3.4vw, 40px); }
.smn__h h2 { display: flex; align-items: baseline; gap: 16px; }
.smn__h .en { font-size: clamp(40px, 4.4vw, 60px); font-weight: 500; letter-spacing: .02em; line-height: 1; }
.smn__h .jp { font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.smn__h p { font-size: 14px; opacity: .95; }
.slider--smn .slider__track { grid-auto-columns: min(440px, 84%); gap: 28px; padding-left: 46px; scroll-padding-left: 46px; }
.smc { position: relative; display: block; min-height: 214px; padding: 28px 30px 34px 68px; margin-left: 0; background: rgba(250, 247, 241, .97); color: var(--ink); border-radius: 0 0 0 66px; transition: transform .45s var(--ease), background-color .3s; }
a.smc:hover { background: #fff; transform: translateY(-3px); }
.smc__d { position: absolute; left: -42px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--leaf); color: #fff; line-height: 1; box-shadow: 0 8px 20px -10px rgba(16, 32, 52, .4); }
.smc__d small { font-size: 12px; letter-spacing: .04em; }
.smc__d b { font-size: 30px; font-weight: 500; margin-top: 2px; }
.smc__tag { display: inline-block; padding: 1px 10px; border-radius: 4px; background: var(--green-d); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.smc h3 { margin-top: 10px; font-size: 16px; line-height: 1.65; letter-spacing: .04em; }
.smc__o { margin-top: 6px; font-size: 13px; color: var(--sub); }
.smc__dt { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--green); }
.smc__arw { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); transition: background-color .3s, color .3s; }
.smc__arw .ico { width: 16px; height: 16px; }
a.smc:hover .smc__arw { background: var(--green); color: #fff; }
.smn__nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 26px; }
.smn__nav .slider__btn { background: transparent; border-color: #fff; color: #fff; }
.smn__nav .slider__dots i { background: rgba(255,255,255,.45); }
.smn__nav .slider__dots i.on { background: #fff; }
@media (max-width: 600px) { .smc { padding: 24px 22px 60px 56px; } .smc__d { width: 74px; height: 74px; left: -36px; } .slider--smn .slider__track { padding-left: 40px; scroll-padding-left: 40px; } }

/* ---- お役立ち情報の見出し ---- */
.info__t.js-split em .ch { color: inherit; }

/* =========================================================================
   v11（2026-11-01 夜のご指示）：最初の画面のお知らせを外す／民主化の段のお知らせを細い1行に
   ========================================================================= */
.mnews { position: relative; z-index: 2; display: flex; align-items: center; gap: 0; height: 54px; margin: -27px -28px 0 32px; padding: 0 7px 0 22px; border-radius: 999px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(36, 71, 107,.12), 0 16px 34px -20px rgba(22, 34, 52,.45); }
.mnews__lab { flex: none; padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .22em; color: var(--green); line-height: 22px; }
.mnews__list { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; }
.mnews__list li { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transform: translateY(100%); transition: transform .7s var(--ease), opacity .5s ease, visibility 0s .7s; }
.mnews__list li.is-on { opacity: 1; visibility: visible; transform: none; transition: transform .7s var(--ease), opacity .5s ease .1s, visibility 0s; }
.mnews__list li.is-out { opacity: 0; visibility: visible; transform: translateY(-100%); }
.mnews__list a { display: flex; align-items: center; gap: 14px; min-width: 0; width: 100%; height: 100%; }
.mnews__list time { flex: none; font-size: 13px; color: var(--sub); letter-spacing: .03em; }
.mnews__list .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink); transition: color .3s; }
.mnews__list a:hover .t { color: var(--green); }
.mnews__count { flex: none; margin: 0 12px 0 14px; font-size: 11px; color: var(--sub); letter-spacing: .06em; }
.mnews__count b { font-weight: 600; color: var(--green); }
.mnews__all { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; transition: background-color .3s, transform .4s var(--ease); }
.mnews__all .ico { width: 16px; height: 16px; }
.mnews__all:hover { background: var(--green-d); transform: translateX(2px); }
.msg__dots { margin-top: 22px; }
@media (max-width: 900px) { .mnews { margin: -26px 10px 0; } .msg__dots { margin-top: 18px; justify-content: center; padding: 0; } }
@media (max-width: 600px) {
  .mnews { height: 52px; padding-left: 16px; }
  .mnews__lab { padding-right: 10px; margin-right: 10px; font-size: 10.5px; letter-spacing: .14em; }
  .mnews__list a { gap: 10px; }
  .mnews__list time { font-size: 11px; }
  .mnews__list .t { font-size: 12.5px; }
  .mnews__count { display: none; }
  .mnews__list a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
  .mnews__list time { line-height: 1.3; }
  .mnews__list .t { width: 100%; line-height: 1.45; }
  .mnews__all { width: 38px; height: 38px; margin-left: 8px; }
}

/* =========================================================================
   v12（2026-11-01 深夜のご指示）
   ・配色：ricoas と重なっていた黄緑・水色・橙をやめ、社名の「木くづ」にちなんだ
     木肌・生成り・黄土・深緑で組み直し（木くづの4色 緑・朱・炭・地 はそのまま）
   ・民主化の段：見出しと本文の太さ・行間を参考サイト（馬路の森の段）に合わせる
   ・お客様の事例：カードの各行の高さをそろえる
   ・取引のある地域の地図
   ========================================================================= */
:root {
  --green-d: #1F4A3F;   /* 深緑：濃い弧・見出し・暗い面 */
  --leaf: #C4A06C;      /* 木肌：弧の明るい帯・丸の弧・点（旧：黄緑） */
  --leaf-l: #EBDCC0;    /* 木肌の淡い色：緑の面の上の強調文字 */
  --mint: #E8EEE9;      /* 白緑：選ばれる理由・事例・実績の面（旧：水色） */
  --mint-l: #F7EEE9;    /* 薄桜：入口の面（朱に寄せた淡い色） */
  --cream: #F6EDE8;     /* 薄桜：お役立ち情報の面 */
  --amber: #A6762A;     /* 黄土：2つ目のボタン（旧：橙）。白い文字とのコントラスト 4.0 */
  --amber-d: #8A6020;
  --green-t: #EFE6D6;   /* 木肌のごく淡い色：アイコンの下地 */
  --green-l: #A9BFB5;
  --green-band: rgba(196, 160, 108, .58);   /* 最初の画面の弧の明るい帯（木肌） */
  --sand: #F3EEE6;      /* 生成り：民主化の段・お知らせ・事業紹介 */
  --sand-d: #B3A68E;
}
.reason__circle { background: #FBF9F5; }
.btn--amber:hover { background: var(--amber-d); }
.rc__path { opacity: .85; }

/* ---- 民主化の段：参考サイトと同じ太さ・行間（見出しは2行とも下に手書き風の線） ---- */
.msg__t { font-size: clamp(26px, 2.55vw, 37px); font-weight: 700; color: var(--green-d); letter-spacing: .1em; line-height: 1.45; }
.msg__t .ln, .msg__t .ln:first-child { position: relative; display: table; white-space: nowrap; padding-bottom: .3em; margin-bottom: .62em; }
.msg__t .ln:last-child { margin-bottom: 0; }
.msg__t .ln::after, .msg__t .ln:first-child::after { content: ""; position: absolute; left: 0; right: .1em; bottom: 0; height: 5px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.4C40 2.2 78 3.9 120 3.1S200 2.3 240 3.3 285 2.6 298.5 3' fill='none' stroke='%23172E47' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6 4.3C70 3.6 130 4.6 190 3.9S270 4.2 294 3.8' fill='none' stroke='%23172E47' stroke-width='.9' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: left; }
.js .msg__t .ln::after { transform: scaleX(0); transition: transform 1.1s var(--ease) .5s; }
.js .msg__t .ln:nth-child(2)::after { transition-delay: .9s; }
.js .msg__t.is-show .ln::after { transform: none; }
.msg__body { margin-top: clamp(30px, 3.4vw, 44px); }
.msg__body p { font-size: 15px; font-weight: 500; line-height: 2.4; letter-spacing: .1em; color: #2E3946; }
.msg__body p + p { margin-top: 1.15em; }
.ulink { border-bottom: 0; padding-bottom: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.4C40 2.2 78 3.9 120 3.1S200 2.3 240 3.3 285 2.6 298.5 3' fill='none' stroke='%23172E47' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6 4.3C70 3.6 130 4.6 190 3.9S270 4.2 294 3.8' fill='none' stroke='%23172E47' stroke-width='.9' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") left bottom / 100% 5px no-repeat; color: var(--green-d); }
@media (max-width: 600px) {
  .msg__t { font-size: clamp(22px, 6.6vw, 28px); letter-spacing: .07em; }
  .msg__body p { font-size: clamp(13px, 3.7vw, 14.5px); line-height: 2.3; letter-spacing: .05em; }
}

/* ---- お客様の事例：行の高さをカード間でそろえる ---- */
.slider--side .slider__track { grid-template-rows: repeat(6, auto); row-gap: 16px; column-gap: 26px; align-items: stretch; }
.wgrid:has(> .vc) { row-gap: 16px; }
.vc { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: inherit; align-content: start; height: auto; }
.vc__hd { align-items: center; }
.vc__who { min-width: 0; }
.vc__city { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sub); letter-spacing: .04em; line-height: 1.5; }
.vc__city .ico { width: 14px; height: 14px; color: var(--green); }
.vc__name { margin-top: 2px; font-size: 18px; line-height: 1.5; letter-spacing: .04em; color: var(--green-d); }
.vc__meta { margin-top: 2px; font-size: 12.5px; line-height: 1.6; color: var(--green); }
.vc__res { align-content: start; }
.vc .tags { align-content: start; align-self: start; }
.vc__t { align-self: start; }
.vc .btn--block { align-self: end; }
@supports not (grid-template-rows: subgrid) { .vc { display: flex; flex-direction: column; } .vc .btn--block { margin-top: auto; } }

/* ---- 所在地・お取引のある地域（日本地図にピン＋青森県の拡大） ---- */
.acs__map { aspect-ratio: auto; background: #fff; }
.deal { position: relative; padding: clamp(20px, 2.6vw, 32px); background: linear-gradient(180deg, #FBF8F2, #fff 60%); }
.deal__h { position: absolute; left: clamp(20px, 2.6vw, 32px); top: clamp(20px, 2.6vw, 32px); z-index: 2; display: grid; gap: 2px; }
.deal__h b { font-size: 15px; letter-spacing: .1em; color: var(--green-d); }
.deal__h span { font-size: 12.5px; color: var(--sub); letter-spacing: .04em; }
.deal__h em { font-style: normal; font-size: 20px; font-weight: 700; color: var(--red); margin: 0 2px; }
.jmap { display: block; width: 100%; height: auto; }
.jmap .land { fill: var(--sand); stroke: var(--sand-d); stroke-width: .8; stroke-linejoin: round; }
.jmap .pin { fill: var(--red); stroke: #fff; stroke-width: 2; }
.jmap .pin--home { fill: var(--red); stroke: #fff; stroke-width: 2.5; }
.jmap text { font-family: var(--ff); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; fill: var(--green-d); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.jmap .cnt, .map--deal .cnt { font-family: var(--fn); font-weight: 700; fill: var(--red); }
.jmap .cnt { font-size: 16px; }
.deal__inset { position: absolute; left: clamp(14px, 2.4vw, 30px); top: 21%; width: 35%; padding: 10px 12px 6px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(22, 34, 52, .4); }
.deal__inset > p { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--green-d); }
.map--deal .land { fill: var(--sand); stroke: var(--sand-d); stroke-width: 2; }
.map--deal text { font-size: 30px; }
.map--deal .cnt { font-size: 36px; }
.deal__note { position: absolute; left: clamp(20px, 2.6vw, 32px); bottom: clamp(14px, 2vw, 22px); font-size: 11px; color: var(--sub); }
.deal__list { display: flex; flex-wrap: wrap; gap: 8px; }
.deal__list li { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--green); background: #fff; color: var(--green-d); font-size: 13px; line-height: 1.6; }
.deal__list li b { font-weight: 700; }
.deal__list li .num { font-size: 15px; font-weight: 700; color: var(--red); }
.deal__list li small { flex-basis: 100%; font-size: 11px; color: var(--sub); line-height: 1.5; }
.deal__list li.home { background: var(--green); color: #fff; border-color: var(--green); }
.deal__list li.home .num { color: #fff; }
.deal__list li.home small { color: rgba(255,255,255,.88); }
@media (max-width: 600px) {
  .deal { padding: 76px 12px 16px; }
  .deal__h { left: 16px; top: 16px; }
  .jmap text { font-size: 22px; }
  .jmap .cnt { font-size: 26px; }
  .jmap text.one { display: none; }      /* スマホは件数のある地域だけ文字を出す（名前は下の一覧に） */
  .jmap .pin { stroke-width: 2.5; }
  .deal__inset { position: relative; left: auto; top: auto; width: 78%; margin: 6px auto 0; padding: 8px 12px 4px; }
  .deal__note { position: static; margin-top: 8px; text-align: right; }
}
.vc .tags { gap: 6px; }
.vc .tag { min-height: 26px; padding: 2px 11px; font-size: 11.5px; }
.vc__hd { gap: 12px; }
.vc__av { width: 52px; height: 52px; }
.vc__name { font-size: 17px; }

/* =========================================================================
   v13（2026-11-02 のご指示）：緑から離れる。白を広く使い、藍・朱・金茶で
   ※ CSS の中の名前（--green など）はそのまま、中身の色だけ藍に置き換えています
   ========================================================================= */
:root {
  --green: #24476B;     /* 藍：見出し・ボタン・弧・帯（旧：緑 #3F826D） */
  --green-d: #172E47;   /* 濃藍：濃い弧・暗い面・民主化の段の見出し */
  --green-l: #A9B6C6;   /* 藍の淡い色：点など */
  --green-t: #EEF1F5;   /* 藍白：アイコンの下地 */
  --leaf: #C4A06C;      /* 金茶：弧の明るい帯・丸の弧 */
  --leaf-l: #EBDCC0;    /* 金茶の淡い色：藍の面の上の強調文字 */
  --mint: #F5F3EF;      /* 白に近い生成り：選ばれる理由・事例・実績・下層の頭 */
  --mint-l: #FAF7F2;
  --sand: #F4F0E8;      /* 生成り：民主化の段・事業紹介 */
  --cream: #F8F1EE;     /* 薄桜：お役立ち情報 */
  --amber: #A6762A;     /* 金茶：2つ目のボタン */
  --amber-d: #8A6020;
  --green-band: rgba(196, 160, 108, .62);
}

/* ---- 民主化の段：参考画像を測った比率に合わせる ----
   見出し＝本文の3倍・太字・字間0.03em／見出しの行の間隔＝1.9倍（文字の下0.4em に線、線から0.6em あけて次の行）
   線から本文まで＝見出し1文字分／本文＝中くらいの太さ・行間2.33・字間0.07em／段落の間＝1行 */
.msg__t { font-size: clamp(30px, 3.15vw, 45px); font-weight: 700; letter-spacing: .03em; line-height: 1.45; color: var(--green-d); }
.msg__t .ln, .msg__t .ln:first-child { padding-bottom: .125em; margin-bottom: .315em; }
.msg__t .ln:last-child { margin-bottom: 0; }
.msg__t .ln::after, .msg__t .ln:first-child::after { height: 4px; bottom: -1px; right: 0; }
.msg__body { margin-top: clamp(24px, 2.4vw, 34px); }
.msg__body p { font-size: 15px; font-weight: 500; line-height: 2.33; letter-spacing: .07em; color: #222C38; }
.msg__body p + p { margin-top: 1em; }
.ulink { margin-top: clamp(32px, 3.2vw, 46px); font-size: 19px; letter-spacing: .04em; }
@media (max-width: 600px) {
  .msg__t { font-size: clamp(24px, 8vw, 32px); letter-spacing: .02em; }
  .msg__body p { font-size: clamp(13.5px, 3.75vw, 15px); letter-spacing: .04em; line-height: 2.25; }
}

/* ---- お客様の事例：掲載は一部・NDA・問い合わせ ---- */
.nda { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 28px; align-items: center; margin-top: clamp(36px, 4vw, 52px); padding: clamp(24px, 3vw, 34px) clamp(22px, 3.4vw, 44px); background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(36, 71, 107, .1), 0 20px 40px -30px rgba(22, 34, 52, .45); }
.nda__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--green-t); color: var(--green); }
.nda__ico .ico { width: 30px; height: 30px; stroke-width: 1.6; }
.nda__t { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: var(--green-d); letter-spacing: .06em; line-height: 1.6; }
.nda__p { margin-top: 8px; font-size: 14px; line-height: 2; color: var(--ink); }
.nda__p b { color: var(--green); }
@media (max-width: 860px) { .nda { grid-template-columns: auto minmax(0, 1fr); } .nda .btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 600px) { .nda { grid-template-columns: 1fr; } .nda__ico { width: 52px; height: 52px; } }

/* ---- 制作実績：パソコンの枠＋スマホの枠（制作会社らしい見せ方） ---- */
.wks2 { background: var(--white); }
.scg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.sc { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; color: inherit; }
.sc--lg { grid-column: span 7; grid-row: span 2; }
.sc--md { grid-column: span 5; }
.sc--half { grid-column: span 6; }
.sc__stage { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3; background: var(--sc-bg, #EEF1F5); background-image: radial-gradient(rgba(36, 71, 107, .09) 1px, transparent 1.2px); background-size: 18px 18px; transition: box-shadow .5s; }
.scg > .sc:nth-child(6n+1) { --sc-bg: #EFE9DF; } .scg > .sc:nth-child(6n+2) { --sc-bg: #E8ECF2; } .scg > .sc:nth-child(6n+3) { --sc-bg: #F4E9E4; }
.scg > .sc:nth-child(6n+4) { --sc-bg: #E9EDF3; } .scg > .sc:nth-child(6n+5) { --sc-bg: #F1EBE0; } .scg > .sc:nth-child(6n+6) { --sc-bg: #F3E7E2; }
.sc--lg .sc__stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 460px; }
.sc--md .sc__stage { aspect-ratio: 16 / 9.4; }
.sc--half .sc__stage { aspect-ratio: 16 / 10.5; }
.dev { position: absolute; inset: 0; }
.dev-pc { position: absolute; left: 8%; top: 12%; width: 74%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 30px 60px -30px rgba(22, 34, 52, .5), 0 0 0 1px rgba(22, 34, 52, .06); transition: transform .8s var(--ease); }
.dev-pc__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #F2F2F4; border-bottom: 1px solid #E6E6EA; }
.dev-pc__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D5D5DA; }
.dev-pc__bar b { margin-left: 10px; padding: 0 10px; border-radius: 4px; background: #fff; font-family: var(--fn); font-size: 10px; font-weight: 500; letter-spacing: .02em; color: #8B8B93; line-height: 15px; }
.dev-pc__scr { aspect-ratio: 16 / 10; overflow: hidden; }
.dev-pc__scr img { width: 100%; height: auto; transition: transform 3s cubic-bezier(.45, 0, .2, 1); }
.dev-sp { position: absolute; right: 8%; bottom: 9%; width: 20%; padding: 4px; border-radius: 18px; background: #16181D; box-shadow: 0 26px 46px -22px rgba(22, 34, 52, .6); transition: transform .8s var(--ease); }
.dev-sp__scr { aspect-ratio: 390 / 844; overflow: hidden; border-radius: 14px; background: #fff; }
.dev-sp__scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sc--lg .dev-pc { left: 8%; top: 9%; width: 80%; }
.sc--lg .dev-sp { width: 23%; bottom: 7%; right: 6%; }
@media (hover: hover) {
  .sc:hover .dev-pc { transform: translateY(-6px); }
  .sc:hover .dev-pc__scr img { transform: translateY(-30%); }   /* 画面がゆっくり下へ流れて、ページの中身が見える */
  .sc:hover .dev-sp { transform: translateY(-10px); }
  .sc:hover .sc__arw { background: var(--green); color: #fff; }
  .sc:hover h3 { color: var(--green); }
}
.sc__cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.sc__n { font-size: 30px; font-weight: 600; line-height: 1; color: var(--leaf); letter-spacing: -.02em; padding-top: 2px; }
.sc__k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--green); }
.sc__k i { width: 18px; height: 1px; background: currentColor; }
.sc h3 { margin-top: 4px; font-size: 18px; letter-spacing: .04em; line-height: 1.5; transition: color .3s; }
.sc__m { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.sc__tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.sc__tags span { padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; color: var(--sub); }
.sc__arw { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); transition: background-color .3s, color .3s; }
.sc__arw .ico { width: 16px; height: 16px; }
/* 映像・SNS・システム（小さなカードの列） */
.minis { margin-top: clamp(48px, 6vw, 72px); }
.minis__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; font-size: 17px; letter-spacing: .08em; color: var(--green-d); padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.minis__h .num { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--leaf); }
.minis__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mini { display: flex; flex-direction: column; gap: 6px; color: inherit; }
.mini__img { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 10; background: var(--mist); }
.mini__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mini.is-phone .mini__img { background: #EEF1F5; }
.mini.is-phone .mini__img img { object-fit: contain; padding: 8px 0; }
.mini:hover .mini__img img { transform: scale(1.06); }
.mini__play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); }
.mini__play svg { width: 16px; height: 16px; fill: var(--red); margin-left: 2px; }
.mini__k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--green); margin-top: 4px; }
.mini__t { font-size: 13px; font-weight: 700; line-height: 1.5; }
@media (max-width: 1000px) {
  .sc--lg, .sc--md, .sc--half { grid-column: span 6; grid-row: auto; }
  .sc { grid-column: span 6; }
  .sc--lg .sc__stage { aspect-ratio: 4 / 3; min-height: 0; }
  .minis__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .scg { grid-template-columns: minmax(0, 1fr); }
  .sc, .sc--lg, .sc--md, .sc--half { grid-column: auto; }
  .sc__stage, .sc--md .sc__stage, .sc--half .sc__stage, .sc--lg .sc__stage { aspect-ratio: 4 / 3.1; }
  .minis__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-pc__bar b { display: none; }
}
/* 実績ページの、映像・システム・印刷物のカード */
.wgrid .ocard { background: #fff; border-radius: 16px; padding: 14px 14px 20px; box-shadow: 0 0 0 1px var(--line); }
.wgrid .ocard__img { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.wgrid .ocard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wgrid .ocard:hover .ocard__img img { transform: scale(1.05); }
.wgrid .ocard__img.is-phone { background: #EEF1F5; }
.wgrid .ocard__img.is-phone img { object-fit: contain; padding: 8px 0; }
/* 実績の詳細：最初の画面をパソコンの枠＋スマホの枠で */
.wd-hero2 { position: relative; margin: 32px 0 0; aspect-ratio: 16 / 8.6; border-radius: 22px; overflow: hidden; background: #EEF1F5; background-image: radial-gradient(rgba(36, 71, 107, .09) 1px, transparent 1.2px); background-size: 18px 18px; }
.wd-hero2 .dev-pc { left: 7%; top: 9%; width: 72%; }
.wd-hero2 .dev-pc__scr { aspect-ratio: 1600 / 840; }
.wd-hero2 .dev-sp { width: 17%; right: 7%; bottom: 7%; }
@media (max-width: 640px) { .wd-hero2 { aspect-ratio: 4 / 3; } .wd-hero2 .dev-pc { width: 80%; left: 6%; } .wd-hero2 .dev-sp { width: 26%; } }

/* ---- 取引のある地域：東京はたくさんの点＋都内の拡大図 ---- */
.jmap .pin--s { fill: var(--red); stroke: #fff; stroke-width: .6; }
.jmap .halo { fill: rgba(192, 50, 33, .1); }
.deal__inset--tk { left: auto; top: auto; right: clamp(14px, 2vw, 26px); bottom: clamp(30px, 3.6vw, 44px); width: 33%; }
.tmap { display: block; width: 100%; height: auto; }
.tmap .tama { fill: var(--sand); stroke: #fff; stroke-width: 1.2; }
.tmap .ward { fill: #E8DFD0; stroke: #fff; stroke-width: 1.2; }
.tmap .pin { fill: var(--red); stroke: #fff; stroke-width: 2.4; }
.tmap .lb { font-family: var(--ff); font-size: 34px; font-weight: 700; fill: var(--green-d); opacity: .55; }
.deal__list li.many { background: var(--green); color: #fff; border-color: var(--green); }
.deal { padding-bottom: 58px; }
.deal__note { max-width: none; right: clamp(20px, 2.6vw, 32px); bottom: 16px; line-height: 1.6; }
@media (max-width: 600px) { .deal__inset--tk { position: relative; right: auto; bottom: auto; width: 78%; margin: 10px auto 0; } .deal__note { max-width: none; } }

/* =========================================================================
   v13：下層ページの作り込み
   ========================================================================= */
/* ページの頭：白を広く。上に藍の弧と金茶の細い帯（最初の画面と同じ組み立て）、英字の大きな見出し */
.ph { background: var(--white); padding-bottom: clamp(56px, 7vw, 100px); border-bottom: 1px solid var(--line); }
.ph::after { display: none; }
.ph__deco { height: 132px; background: var(--green); clip-path: ellipse(78% 100% at 50% 0); }
.ph__deco::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .14; mix-blend-mode: soft-light; }
.ph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 146px; background: var(--leaf); opacity: .55; clip-path: ellipse(80% 100% at 50% 0); }
.ph__txt { gap: 14px; }
.ph__en { margin-top: 6px; font-size: clamp(46px, 7vw, 104px); font-weight: 600; line-height: .95; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px rgba(196, 160, 108, .8); }
.ph__t { color: var(--green-d); font-weight: 700; letter-spacing: .06em; }
.ph__t em { color: var(--red); }
.ph__lead { color: var(--ink); line-height: 2.05; }
.ph__side { position: relative; }
.ph__side::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 62%; height: 70%; border-radius: 28px; background: var(--sand); z-index: -1; }
.ph__in { isolation: isolate; }
.crumb { font-size: 12px; }
@media (max-width: 860px) { .ph__deco { height: 100px; } .ph::before { height: 112px; } .ph__side::before { right: -8px; bottom: -10px; } }

/* お知らせ（一覧のページ）：トップのお知らせと同じ、日付・ラベル・題名の行 */
.news-sec { background: var(--white); color: var(--ink); }
.news { gap: 0; border-top: 1px solid var(--line); }
.news a, .news .nolink { grid-template-columns: 7.6em 7.4em minmax(0, 1fr) auto; gap: 8px 18px; background: transparent; border-radius: 0; padding: 20px 6px; border-bottom: 1px solid var(--line); }
.news a:hover { transform: none; background: var(--mint-l); }
.news .tag { justify-self: start; min-width: 6.6em; justify-content: center; border-radius: 4px; }
.news .tt { font-weight: 500; }
@media (max-width: 640px) { .news a, .news .nolink { grid-template-columns: auto auto 1fr; } .news .tt { grid-column: 1 / -1; } .news .ico { display: none; } }

/* よくあるご質問（ページ）：トップと同じ Q・A の丸 */
.faq { gap: 0; border-top: 1px solid var(--line); }
.faq details, .bg-mist .faq details { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq summary { padding: 24px 60px 24px 0; align-items: center; font-size: 16.5px; letter-spacing: .06em; }
.faq summary::before { content: "Q"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #4B4B4B; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.faq .a { padding: 0 8px 26px 18px; align-items: flex-start; color: var(--green-d); line-height: 2; }
.faq .a::before { content: "A"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mist); color: var(--green); font-size: 13px; line-height: 1; margin-top: 2px; }
.faq-h { font-size: 18px; color: var(--green-d); margin-top: 56px; }
.faq-h::before { width: 18px; height: 2px; border-radius: 0; background: var(--leaf); }
/* メディア掲載のカード */
.medias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mcard { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); color: inherit; transition: box-shadow .3s, transform .4s var(--ease); }
a.mcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--green), 0 16px 30px -22px rgba(22, 34, 52, .4); }
.mcard__k { align-self: flex-start; padding: 1px 10px; border-radius: 4px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.mcard__n { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--green-d); }
.mcard__t { font-size: 14px; line-height: 1.75; flex: 1; }
.mcard__f { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.mcard__f .ico { width: 15px; height: 15px; color: var(--green); }
@media (max-width: 1000px) { .medias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .medias { grid-template-columns: 1fr; } }
/* お役立ち情報の記事：本文＋横に目次（パソコン）／書いた人 */
.art { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 5vw, 72px); align-items: start; max-width: calc(1080px + 48px); }
.art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12.5px; color: var(--sub); margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.art__prose { max-width: none; font-size: 15.5px; line-height: 2.1; }
.art__prose h2 { display: flex; align-items: baseline; gap: 14px; padding: 0 0 14px; margin-top: 1.8em; font-size: clamp(20px, 2vw, 25px); color: var(--green-d); border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.art__prose h2::before { display: none; }
.art__prose h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--leaf); }
.art__prose h2 .num { font-size: .8em; font-weight: 600; color: var(--leaf); }
.art__prose h3 { font-size: 17px; color: var(--green); margin-top: .6em; padding-left: 14px; border-left: 3px solid var(--leaf); line-height: 1.6; }
.art__prose ul { display: grid; gap: 8px; padding: 18px 22px; background: var(--mint-l); border-radius: 12px; }
.art__prose ul li { position: relative; padding-left: 18px; }
.art__prose ul li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 2px; background: var(--green); }
.art__prose .box { border-left: 4px solid var(--red); border-radius: 0 12px 12px 0; background: #FBF4F1; padding: 18px 22px; }
.art__side { position: relative; height: 100%; }
.art__sticky { position: sticky; top: 110px; display: grid; gap: 24px; }
.art__toch { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--leaf); }
.art__toch span { font-family: var(--ff); font-size: 15px; letter-spacing: .1em; color: var(--green-d); font-weight: 700; }
.art__toc { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.art__toc a { display: flex; gap: 10px; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.6; color: var(--ink); transition: color .3s, border-color .3s; }
.art__toc a:hover { color: var(--green); border-color: var(--green); }
.art__toc .num { font-size: 12px; color: var(--leaf); font-weight: 600; padding-top: 2px; }
.art__cta { padding: 20px; border-radius: 14px; background: var(--mint); display: grid; gap: 12px; }
.art__cta p { font-size: 13.5px; font-weight: 700; color: var(--green-d); line-height: 1.7; }
.art__check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--green); }
.art__check .ico { width: 14px; height: 14px; }
.author { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; margin-top: 56px; padding: 26px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.author__mk { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--mint); color: var(--green-d); }
.author__mk svg { width: 44px; height: auto; }
.author__k { font-size: 11.5px; letter-spacing: .14em; color: var(--sub); font-weight: 700; }
.author__n { font-size: 17px; font-weight: 700; color: var(--green-d); margin-top: 2px; }
.author__t { font-size: 13.5px; line-height: 1.9; margin-top: 6px; }
.author .ulink { margin-top: 12px; font-size: 14px; }
@media (max-width: 960px) { .art { grid-template-columns: 1fr; } .art__side { order: -1; } .art__sticky { position: static; } .art__cta { display: none; } }
@media (max-width: 560px) { .author { grid-template-columns: 1fr; } }

/* 採用：働く魅力（ページの最初）・仕事のカード */
.rc--page { padding-top: clamp(72px, 8vw, 110px); }
.rc--page .rc__cards { margin-top: 0; }
.job { position: relative; padding: 26px 24px 24px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s, transform .4s var(--ease); }
.job:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--green), 0 18px 34px -26px rgba(22, 34, 52, .45); }
.job__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green-t); color: var(--green); margin-bottom: 4px; }
.job__ico .ico { width: 22px; height: 22px; }
.job h3 { color: var(--green-d); }
.fit > div { box-shadow: 0 0 0 1px var(--line); border-radius: 16px; }
.fit h3 { display: flex; align-items: center; gap: 8px; }
@media (max-width: 860px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jobs { grid-template-columns: 1fr; } }

/* =========================================================================
   v14（2026-11-02 深夜のご指示）
   ========================================================================= */
/* ---- フッター：濃藍の面で締める（2列ずつきれいに並ぶ） ---- */
.ft { background: var(--green-d); color: rgba(255,255,255,.86); padding-top: clamp(64px, 7vw, 96px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); position: relative; }
.ft::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .12; mix-blend-mode: soft-light; pointer-events: none; }
.ft .wrap { position: relative; }
.ft__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); }
.ft__co { gap: 16px; }
.ft__co .logo { color: #fff; }
.ft__co .logo__mk { width: 64px; filter: brightness(0) invert(1); }
.ft__co .logo__t, .ft__co .logo__t b, .ft__co .logo__t small { color: #fff; }
.ft__desc { font-size: 13.5px; line-height: 1.95; color: rgba(255,255,255,.82); }
.ft__co address { color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.9; }
.ft__mail { color: #fff; }
.ft__mail .ico { color: var(--leaf); }
.ft__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ft__cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; transition: background-color .3s; }
.ft__cta:hover { background: var(--red-d); }
.ft__cta .ico { width: 16px; height: 16px; }
.ft__note { color: #fff; border-color: rgba(255,255,255,.5); padding: 7px 16px; }
.ft__note:hover { background: rgba(255,255,255,.1); }
.ft__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
.ft__col { display: block; }
.ft__h { color: #fff; font-size: 14.5px; letter-spacing: .06em; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.18); display: flex; }
.ft__h::before { width: 6px; height: 6px; background: var(--leaf); }
.ft__h:hover { color: var(--leaf-l); }
.ft__col ul { margin-top: 0; gap: 0; }
.ft__col li a { color: rgba(255,255,255,.72); font-size: 13px; padding: 5px 0 5px 14px; }
.ft__col li a::before { background: rgba(255,255,255,.35); width: 7px; height: 1px; top: calc(.9em + 5px); }
.ft__col li a:hover { color: #fff; }
.ft__bottom { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.6); margin-top: 56px; }
.ft__bottom a:hover { color: #fff; }
@media (max-width: 1100px) { .ft__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .ft__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ft__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ft__col:last-child { display: block; grid-column: auto; grid-template-columns: none; }
  .ft__bottom { flex-direction: column; }
  .ft { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }   /* 下の固定ボタンに隠れないように */
}
/* ---- スマホの下の固定ボタン：2つが画面の中に収まるように ---- */
@media (max-width: 760px) {
  .fl__card, .fl__card + .fl__card { width: auto; min-width: 0; padding: 10px 8px; }
  .fl__t { min-width: 0; align-items: center; text-align: center; }
  .fl__t b { font-size: 13.5px; white-space: nowrap; }
}

/* =========================================================================
   v14（2026-11-02）：増やしたページ・スマホの横スクロール・動き
   ========================================================================= */

/* ---- 読んだ量のバー（画面のいちばん上の細い線） ---- */
.prog { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--green), var(--leaf)); }

/* ---- 「選ばれる理由」：スマホは横にスクロール（丸の形のまま） ---- */
.hs-dots { display: none; }
@media (max-width: 860px) {
  .reason .rings { display: flex; gap: 14px; max-width: none; margin-inline: calc(-1 * max(24px, var(--gut))) calc(-1 * max(24px, var(--gutr))); padding: 6px max(24px, var(--gut)) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: max(24px, var(--gut)); }
  .reason .rings::-webkit-scrollbar { display: none; }
  .reason .rings { align-items: center; }
  .reason .ring { flex: 0 0 min(84vw, 330px); height: auto; aspect-ratio: 1; border-radius: 50%; padding: 20px 26px; scroll-snap-align: center; gap: 5px; border-width: 10px; }
  .reason .ring .pill { font-size: 12px; padding: 1px 12px; }
  .reason .ring .ring__t { font-size: 12px; line-height: 1.7; max-width: 16.5em; }
  .reason .ring .ring__note { font-size: 10px; }
  .reason .ring__n { font-size: 46px; }
  .reason .ring--s { flex-basis: min(76vw, 290px); padding: 20px 22px; min-width: 0; }
  .reason .ring--s .ring__ico { width: 88px; height: 56px; }
  .reason .ring--s .ring__ico svg { width: 44px; height: 44px; }
  .reason .rings--s { margin-top: 6px; }
  .hs-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; }
  .hs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--green-l); opacity: .55; cursor: pointer; transition: width .4s var(--ease), opacity .3s, background-color .3s; }
  .hs-dots button.on { width: 26px; opacity: 1; background: var(--green); }
  .hs-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: .12em; }
  .hs-hint .ico { width: 16px; height: 16px; animation: hsHint 1.6s var(--ease) 3; }
}
@media (min-width: 861px) { .hs-hint { display: none; } }
@keyframes hsHint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ---- 数字で見る（会社概要） ---- */
.kfs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kf { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 18px 28px; border-radius: 20px; background: var(--mist); overflow: hidden; height: 100%; }
.kf::before { content: ""; position: absolute; left: 50%; top: -60%; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(196, 160, 108, .18), rgba(196, 160, 108, 0) 60%); transform: translateX(-50%); pointer-events: none; }
.kf__k { position: relative; font-size: 14px; font-weight: 700; color: var(--green); letter-spacing: .08em; }
.kf__n { position: relative; display: flex; align-items: baseline; gap: 4px; color: var(--red); }
.kf__n .num { font-family: var(--fn); font-weight: 700; font-size: clamp(48px, 5.4vw, 68px); line-height: 1.1; letter-spacing: -.01em; }
.kf__n i { font-style: normal; font-size: 16px; font-weight: 700; }
.kf__t { position: relative; font-size: 13px; color: var(--sub); line-height: 1.7; }
.kfs__note { margin-top: 14px; font-size: 12px; color: var(--sub); text-align: right; }
@media (max-width: 860px) { .kfs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kf { padding: 26px 12px 22px; } }

.tbl--co th { width: 26%; }
.tbl__note { margin-top: 22px; font-size: 14px; color: var(--sub); line-height: 1.9; }
@media (max-width: 600px) {
  .tbl--co, .tbl--co tbody, .tbl--co tr, .tbl--co th, .tbl--co td { display: block; width: 100%; }
  .tbl--co th { padding: 14px 18px 2px; border-bottom: 0; background: none; font-size: 13px; }
  .tbl--co td { padding: 2px 18px 14px; font-size: 14px; }
}

/* 代表 */
.ceo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ceo__img { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--green-t); }
.ceo__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ceo__img::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(23, 46, 71, .25)); }
.ceo__role { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--sub); letter-spacing: .12em; }
.ceo__n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: .14em; color: var(--ink); }
.ceo__n small { font-size: 13px; letter-spacing: .24em; color: var(--leaf); font-weight: 700; }
.ceo__t { margin-top: 18px; line-height: 2; }
.ceo__q { position: relative; margin: 26px 0 28px; padding: 18px 0 18px 26px; border-left: 3px solid var(--leaf); font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; color: var(--green-d); line-height: 1.9; }
.ceo .btns { align-items: center; gap: 12px 28px; }
.ceo .ulink { margin-top: 0; font-size: 15px; }
@media (max-width: 860px) { .ceo { grid-template-columns: 1fr; } .ceo__img { max-width: 360px; width: 100%; margin-inline: auto; } }

/* 事業内容 */
.cbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cb { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 30px 28px 64px; border-radius: 20px; background: #fff; color: inherit; transition: transform .45s var(--ease), box-shadow .45s; box-shadow: 0 0 0 1px rgba(36, 71, 107, .06); }
.cb:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(23, 46, 71, .45); }
.cb__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-t); color: var(--green); }
.cb__ico .ico { width: 28px; height: 28px; }
.cb h3 { font-size: 19px; color: var(--green); letter-spacing: .06em; }
.cb p { font-size: 14px; color: var(--sub); line-height: 1.85; }
.cb__arw { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--green); color: var(--green); transition: background-color .3s, color .3s; }
.cb__arw .ico { width: 15px; height: 15px; }
.cb:hover .cb__arw { background: var(--green); color: #fff; }
.cb--own { background: var(--green); }
.cb--own h3, .cb--own p { color: #fff; }
.cb--own .cb__ico { background: rgba(255, 255, 255, .14); color: var(--leaf-l); }
.cb--own .cb__arw { border-color: #fff; color: #fff; }
.cb--own:hover .cb__arw { background: #fff; color: var(--green); }
@media (max-width: 960px) { .cbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cbs { grid-template-columns: 1fr; } }

/* 沿革（線は読み進めると伸びる） */
.tl { position: relative; padding-left: 34px; }
.tl::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.tl__bar { position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--green), var(--leaf)); transform-origin: 0 0; transform: scaleY(var(--lp, 1)); }
@media (prefers-reduced-motion: no-preference) { .js .tl__bar { transform: scaleY(var(--lp, 0)); } }
.tl__y + .tl__y { margin-top: 30px; }
.tl__yr { position: relative; font-family: var(--fn); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); color: var(--green); line-height: 1.2; }
.tl__yr::before { content: ""; position: absolute; left: -32px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--green); z-index: 1; }
.tl__list { margin-top: 10px; display: grid; gap: 0; }
.tl__i { position: relative; display: grid; grid-template-columns: 4.2em auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px dashed var(--line); }
.tl__i::before { content: ""; position: absolute; left: -29px; top: 25px; width: 12px; height: 12px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px #fff; z-index: 1; }
.tl__d { font-family: var(--fn); font-weight: 700; font-size: 18px; color: var(--green-d); }
.tl__k { justify-self: start; padding: 1px 10px; border-radius: 4px; background: var(--green-t); color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.tl__t { font-size: 15px; line-height: 1.8; }
.tl__t a { color: inherit; border-bottom: 1px solid var(--green-l); }
.tl__t a .ico { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; color: var(--green); }
@media (max-width: 600px) { .tl__i { grid-template-columns: auto minmax(0, 1fr); } .tl__t { grid-column: 1 / -1; font-size: 14px; } }

/* 所在地 */
.loc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -40px rgba(22, 34, 52, .5); }
.loc__map { position: relative; min-height: 340px; background: var(--green-t); }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.75); }
.loc__dl { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 0; align-content: center; }
.loc__dl > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.loc__dl > div:last-child { border-bottom: 0; }
.loc__dl dt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .08em; }
.loc__dl dt .ico { width: 18px; height: 18px; }
.loc__dl dd { margin-top: 6px; font-size: 15px; line-height: 1.85; }
.loc__dl .acs__gm { margin-top: 8px; }
.loc2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 24px; padding: clamp(20px, 3vw, 36px); background: #fff; border-radius: 22px; }
.loc2__b h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--green); margin-bottom: 12px; }
.loc2__b h3 .ico { width: 18px; height: 18px; }
@media (max-width: 860px) { .loc, .loc2 { grid-template-columns: 1fr; } .loc__map { min-height: 280px; } }

/* 運営店舗 */
.shops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.shop { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--mist); }
.shop__img { aspect-ratio: 16 / 10; background: #fff; overflow: hidden; }
.shop__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.shop__img.is-logo { display: grid; place-items: center; padding: 28px; }
.shop__img.is-logo img { width: auto; max-width: 70%; height: auto; max-height: 120px; object-fit: contain; }
.shop:hover .shop__img img { transform: scale(1.04); }
.shop__b { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.shop__b h3 { font-size: 18px; color: var(--green); }
.shop__a { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green-d); }
.shop__a .ico { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--red); }
.shop__b > p:not(.shop__a) { font-size: 14px; color: var(--sub); line-height: 1.8; flex: 1; }
.shop .links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
@media (max-width: 960px) { .shops { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---- 料金 ---- */
.prcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 18px; align-items: stretch; }
.prc { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 10px; margin-bottom: 18px; padding: 26px 22px 22px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.prc--main { box-shadow: 0 0 0 2px var(--red), 0 26px 44px -30px rgba(192, 50, 33, .45); }
.prc__hd { display: flex; justify-content: space-between; align-items: center; }
.prc__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green-t); color: var(--green); }
.prc__ico .ico { width: 24px; height: 24px; }
.prc__bill { padding: 2px 10px; border-radius: 4px; background: var(--mist); font-size: 11px; font-weight: 700; color: var(--green-d); letter-spacing: .06em; }
.prc__n { font-size: 18px; color: var(--green); letter-spacing: .04em; min-height: 2.9em; display: flex; align-items: center; }
.prc__v { display: flex; align-items: baseline; gap: 2px; min-height: 64px; color: var(--red); font-weight: 900; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.prc__v .num { font-family: var(--fn); font-weight: 700; font-size: 54px; line-height: 1; }
.prc__v b { font-size: 22px; }
.prc__v small { font-size: 14px; color: var(--ink); font-weight: 700; }
.prc__v--t { align-items: center; font-size: 24px; color: var(--green-d); }
.prc__t { font-size: 13px; color: var(--sub); line-height: 1.8; }
.prc__k { font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: .1em; margin-top: 4px; }
.prc__m { display: grid; gap: 4px; }
.prc__m li { position: relative; padding-left: 16px; font-size: 13px; font-weight: 700; }
.prc__m li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.prc__f { display: grid; gap: 12px; margin-top: 8px; }
.prc__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); }
.prc__more .ico { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.prc__more:hover .ico { transform: translateX(4px); }
.prc .btn { min-width: 0; }
@media (max-width: 1100px) { .prcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .prcs { grid-template-columns: 1fr; } .prc__n { min-height: 0; } }
.pfs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pf { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 22px; border-radius: 18px; background: #fff; }
.pf h3 { font-size: 16px; color: var(--green); min-height: 2.9em; display: flex; align-items: center; }
.pf__bill { font-size: 12px; color: var(--sub); font-weight: 700; }
.pf__chips { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pf__chips .chip { justify-content: center; background: var(--mist); border-color: transparent; font-size: 13px; }
@media (max-width: 960px) { .pfs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pfs { grid-template-columns: 1fr; } .pf h3 { min-height: 0; } }
.pz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 980px; margin-inline: auto; }
.pz__ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: clamp(220px, 24vw, 290px); aspect-ratio: 1; border-radius: 50%; text-align: center; padding: 30px;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 300deg, var(--leaf) 0 22%, var(--green) 22% 58%, var(--green-d) 58% 80%, var(--green) 80% 100%) border-box; border: 12px solid transparent; }
.pz__ring .ring__h { max-width: 10.5em; line-height: 1.6; }
.pz__t { margin: 16px 0 14px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.6; letter-spacing: .06em; }
.pz__t em, .pz__t .em { font-style: normal; color: var(--red); }
.pz__b > p { line-height: 2; }
@media (max-width: 760px) { .pz { grid-template-columns: 1fr; justify-items: center; text-align: left; } }
.pps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.pp { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 26px 24px; border-radius: 18px; background: var(--mist); }
.pp__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--amber); }
.pp__ico .ico { width: 24px; height: 24px; }
.pp h3 { font-size: 18px; color: var(--green); }
.pp p { font-size: 14px; color: var(--sub); line-height: 1.85; }
@media (max-width: 760px) { .pps { grid-template-columns: 1fr; } }

/* ---- ご相談の流れ（線は読み進めると伸びる） ---- */
.fws { position: relative; display: grid; gap: 22px; padding-left: 0; }
.fws__bar, .fws::before { content: ""; position: absolute; left: 47px; top: 40px; bottom: 40px; width: 2px; }
.fws::before { background: var(--line); }
.fws__bar { background: linear-gradient(var(--green), var(--leaf)); transform-origin: 0 0; transform: scaleY(var(--lp, 1)); }
@media (prefers-reduced-motion: no-preference) { .js .fws__bar { transform: scaleY(var(--lp, 0)); } }
.fw { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 32px); align-items: start; }
.fw__n { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 8px #fff; }
.fw__n small { font-size: 11px; letter-spacing: .2em; opacity: .8; }
.fw__n b { font-size: 34px; line-height: 1; font-weight: 700; }
.fw:nth-child(2) .fw__n { background: var(--green-d); }
.fw:nth-child(3) .fw__n { background: var(--amber); }
.fw:nth-child(4) .fw__n { background: var(--red); }
.fw__b { padding: 24px clamp(20px, 3vw, 34px); border-radius: 20px; background: var(--mist); }
.fw__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fw__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--green); }
.fw__ico .ico { width: 20px; height: 20px; }
.fw__hd h3 { font-size: clamp(18px, 2vw, 22px); color: var(--green); letter-spacing: .06em; }
.fw__b > p { line-height: 1.95; }
.fw__m { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(36, 71, 107, .2); }
.fw__m li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 700; color: var(--green-d); line-height: 1.7; }
.fw__m li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23C03221' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
@media (max-width: 600px) {
  .fws__bar, .fws::before { left: 31px; top: 32px; }
  .fw { grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; }
  .fw__n { width: 64px; height: 64px; box-shadow: 0 0 0 6px #fff; }
  .fw__n b { font-size: 24px; } .fw__n small { font-size: 9px; }
  .fw__b { padding: 20px 18px; }
}
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.way { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: clamp(26px, 3vw, 38px); border-radius: 22px; background: #fff; }
.way__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: #fff; }
.way:nth-child(2) .way__ico { background: var(--amber); }
.way__ico .ico { width: 28px; height: 28px; }
.way h3 { font-size: 22px; color: var(--green); letter-spacing: .06em; }
.way__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: 12px; background: var(--mist); font-weight: 700; color: var(--green-d); }
.way__fit b { padding: 1px 10px; border-radius: 4px; background: var(--red); color: #fff; font-size: 12px; }
.way > p:not(.way__fit) { line-height: 1.9; flex: 1; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } }
.hws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hw { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 26px 24px; border-radius: 20px; background: var(--mist); color: inherit; transition: transform .45s var(--ease), box-shadow .45s, background-color .3s; }
.hw:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 0 0 1px var(--green-l), 0 24px 40px -28px rgba(23, 46, 71, .45); }
.hw__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--green); }
.hw__ico .ico { width: 26px; height: 26px; }
.hw h3 { font-size: 18px; color: var(--green); }
.hw p { font-size: 14px; color: var(--sub); line-height: 1.8; flex: 1; overflow-wrap: anywhere; }
.hw__go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--red); }
.hw__go .ico { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.hw:hover .hw__go .ico { transform: translateX(4px); }
@media (max-width: 860px) { .hws { grid-template-columns: 1fr; } }

/* ---- 講演・講座 ---- */
.tks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tk { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; height: 100%; padding: 24px 56px 24px 24px; border-radius: 20px; background: var(--mist); color: inherit; transition: transform .45s var(--ease), box-shadow .45s, background-color .3s; }
a.tk:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 0 0 1px var(--green-l), 0 24px 40px -28px rgba(23, 46, 71, .45); }
.tk__d { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--green); }
.tk__d small { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sub); }
.tk__d b { font-size: 24px; line-height: 1.1; font-weight: 700; }
.tk__k { display: inline-block; padding: 1px 10px; border-radius: 4px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.tk h3 { margin-top: 8px; font-size: 16px; line-height: 1.7; }
.tk__o { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--green-d); }
.tk__o .ico { flex: none; width: 15px; height: 15px; color: var(--leaf); }
.tk__arw { position: absolute; right: 20px; top: 24px; color: var(--green); }
.tk__arw .ico { width: 18px; height: 18px; }
@media (max-width: 860px) { .tks { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tk { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 20px 44px 20px 18px; } .tk__d b { font-size: 19px; } .tk__d small { font-size: 10px; } }
.ths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.th { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; align-content: start; margin-bottom: 20px; padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: #fff; }
.th > ul { align-self: start; }
.th__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--green-t); color: var(--green); }
.th__ico .ico { width: 26px; height: 26px; }
.th h3 { font-size: 20px; color: var(--green); letter-spacing: .05em; }
.th > p:not(.th__k) { line-height: 1.9; }
.th__k { align-self: end; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--amber-d); letter-spacing: .1em; }
.th ul { display: grid; gap: 4px; }
.th li { position: relative; padding-left: 16px; font-size: 13px; color: var(--sub); }
.th li::before { content: ""; position: absolute; left: 1px; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
@media (max-width: 760px) { .ths { grid-template-columns: 1fr; } }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .steps--3 { grid-template-columns: 1fr; } .steps--3 .step:not(:last-child)::after { display: none; } }

/* ---- お客様の事例（1件ずつ） ---- */
.cd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.cd-res { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: clamp(28px, 3.6vw, 44px); border-radius: 24px; background: var(--green); color: #fff; overflow: hidden; }
.cd-res::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; aspect-ratio: 1; border-radius: 50%; border: 26px solid var(--leaf); opacity: .45; pointer-events: none; }
.cd-res__k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--leaf-l); }
.cd-res__k .ico { width: 18px; height: 18px; }
.cd-res__n { display: flex; align-items: baseline; gap: 8px; }
.cd-res__n .num { font-family: var(--fn); font-weight: 700; font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: -.02em; }
.cd-res__n b { font-size: clamp(20px, 2.2vw, 28px); }
.cd-res__c { position: relative; z-index: 1; font-size: 15px; font-weight: 700; line-height: 1.8; max-width: 24em; }
.cd-meta { display: grid; align-content: center; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--mist); }
.cd-meta > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(36, 71, 107, .12); }
.cd-meta > div:last-child { border-bottom: 0; }
.cd-meta dt { font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .06em; padding-top: 3px; }
.cd-meta dd { font-size: 15px; line-height: 1.8; }
.cd-meta .cd-meta__who { display: flex; align-items: center; gap: 16px; }
.cd-meta__who dd b { display: block; font-size: 18px; color: var(--green-d); }
.cd-meta__who dd span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--sub); }
.cd-meta__who dd span .ico { width: 14px; height: 14px; color: var(--red); }
.cd-av { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; overflow: hidden; color: var(--green); box-shadow: 0 0 0 1px var(--line); }
.cd-av img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cd-av .ico { width: 28px; height: 28px; }
.cd-meta .links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lnk--b { font-size: 14px; }
.cd-body { margin-top: clamp(28px, 4vw, 48px); }
.cd-sec { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(36px, 4.6vw, 56px); border-top: 1px solid var(--line); }
.cd-sec__h .pill { margin-bottom: 12px; }
.cd-sec__h h2 { font-size: clamp(20px, 2.2vw, 26px); color: var(--green); letter-spacing: .05em; line-height: 1.6; }
.cd-did { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cd-did__i { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 20px 22px; border-radius: 16px; background: var(--mist); }
.cd-did__i .num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 700; font-size: 15px; }
.cd-did__i p { font-weight: 700; line-height: 1.75; padding-top: 7px; }
.css { display: flex; flex-wrap: wrap; gap: 12px; }
.cs { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--green-l); font-weight: 700; color: var(--green); transition: background-color .3s, color .3s, box-shadow .3s; }
.cs__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green-t); }
.cs__ico .ico { width: 20px; height: 20px; }
.cs > .ico { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.cs:hover { background: var(--green); color: #fff; box-shadow: 0 0 0 1px var(--green); }
.cs:hover .cs__ico { background: rgba(255, 255, 255, .15); }
.cs:hover > .ico { transform: translateX(3px); }
@media (max-width: 860px) {
  .cd-top { grid-template-columns: 1fr; }
  .cd-sec { grid-template-columns: 1fr; gap: 16px; }
  .cd-did { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .cd-meta > div { grid-template-columns: 1fr; gap: 4px; } .cd-meta .cd-meta__who { display: flex; } }
.casebig__more { margin-top: 22px; font-size: 15px; }
.co2__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.co2__btns .ulink { margin-top: 0; font-size: 15px; }

/* ---- 動き（v14） ---- */
@media (prefers-reduced-motion: no-preference) {
  /* 地図のピンが、ぽんと立つ */
  .js .jmap .pin, .js .map--deal .dot, .js .tmap .pin { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--pd, 0) * 1ms); }
  .js .is-pinned .jmap .pin, .js .is-pinned .map--deal .dot, .js .is-pinned .tmap .pin { transform: scale(1); }
  .js .jmap .halo { opacity: 0; transition: opacity .8s .9s; }
  .js .is-pinned .jmap .halo { opacity: 1; }
  /* 制作実績：パソコンは左から、スマホは右から */
  .js .sc.pre:not(.is-in) .dev-pc { transform: translateX(-28px); opacity: 0; }
  .js .sc.pre:not(.is-in) .dev-sp { transform: translate(24px, 18px); opacity: 0; }
  .js .sc.pre .dev-pc, .js .sc.pre .dev-sp { transition: transform 1.1s var(--ease), opacity .8s; }
  .js .sc.pre.is-in:not(.is-done) .dev-pc { transition-delay: .15s; }
  .js .sc.pre.is-in:not(.is-done) .dev-sp { transition-delay: .4s; }
  /* 見出しの小さなラベル：線が伸びる */
  .js .sh .pill, .js .sec-head .pill { transition: box-shadow .6s; }
  /* カードの写真：少しずつ寄る */
  .col-card:hover .slot img, .shop:hover .shop__img img { transform: scale(1.05); }
  /* ボタン：押したときに少し沈む */
  .btn:active { transform: translateY(1px) scale(.985); }
  /* ページの頭の英字：ゆっくり現れる */
  .js .ph__en { animation: phEn 1.4s var(--ease) both .1s; }
}
@keyframes phEn { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; } }

.smn .center .ulink { color: #fff; border-color: rgba(255, 255, 255, .8); font-size: 15px; }
.smn .center .ulink i { background: var(--leaf); color: var(--green-d); }
/* 制作メモ：ChatGPT 用の指示文 */
.pl__real, .pl__prio { display: inline-block; padding: 1px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--green); }
.pl__prio { background: var(--red); }
.pl__pr { margin-top: 12px; border-radius: 12px; background: var(--mist); padding: 12px 14px; }
.pl__prh { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.pl__prh b { font-size: 12px; color: var(--green); letter-spacing: .06em; }
.pl__copy { flex: none; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--green); background: #fff; color: var(--green); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.pl__copy:hover, .pl__copy.is-done { background: var(--green); color: #fff; }
.pl__pr pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--ff); font-size: 13px; line-height: 1.8; color: var(--ink); max-height: 9.2em; overflow: auto; }
/* v14：自社事業の白いカードを、となりの箱と同じ高さに */
.own__items { flex: 1; grid-auto-rows: 1fr; }
.own__item > div:not(.own__fig) { display: flex; flex-direction: column; height: 100%; }
.own__item .links { margin-top: auto; padding-top: 8px; }
/* v14：採用の傾いたカード：となりのカードに文章が隠れないよう、重なりを浅く */
@media (min-width: 861px) {
  .rc__cards { gap: 10px; }
  .rc__card:nth-child(1) .rc__cin { transform: rotate(-5deg) translate(6px, 60px); }
  .rc__card:nth-child(3) .rc__cin { transform: rotate(5deg) translate(-6px, 60px); }
  .rc__card:nth-child(1):hover .rc__cin { transform: rotate(-2deg) translate(4px, 44px); }
  .rc__card:nth-child(3):hover .rc__cin { transform: rotate(2deg) translate(-4px, 44px); }
}
/* v14：理由の丸の小見出しは、きりのいいところで折り返す */
.ring__h { max-width: 13em; line-height: 1.6; }
.tk h3 { word-break: normal; line-break: strict; }
/* v14：スマホのご相談の流れは、番号を上に出して本文を広く */
@media (max-width: 600px) {
  .fws::before, .fws__bar { display: none; }
  .fw { grid-template-columns: 1fr; gap: 0; }
  .fw__n { flex-direction: row; align-items: baseline; gap: 6px; width: auto; height: auto; padding: 6px 18px; border-radius: 999px 999px 0 0; justify-self: start; margin-left: 18px; box-shadow: none; }
  .fw__n small { font-size: 10px; } .fw__n b { font-size: 20px; }
  .fw__b { border-radius: 18px; }
}
/* v14：スマホで、中央にそろえたボタンが2つ以上並ぶときは幅をそろえる */
@media (max-width: 600px) {
  .btns--c { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-inline: auto; }
  .btns--c > .btn, .btns--c > .btnwrap, .btns--c > .btnwrap .btn { width: 100%; }
}
/* v14：カードの下端（リンク・タグ）を、となりのカードとそろえる */
.ocard .lnk { margin-top: auto; align-self: flex-start; }
.menu .tags { margin-top: auto; }
.wgrid > .ocard, .wgrid > .wk, .wgrid > .vc { height: 100%; }
#cases .casebig { background: var(--mist); }
.rows { align-items: stretch; }
.prose > .pill { justify-self: start; }
/* v14：はみ出しの修正（1024px のお知らせの帯／320px のフォーム） */
@media (max-width: 1100px) and (min-width: 901px) { .mnews { margin-right: 0; } }
.form { grid-template-columns: minmax(0, 1fr); }
.fld { min-width: 0; }
.fld select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* v15：写真を差し替えたので、明るい写真の上の白い文字が読めるように */
.co2__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 46, 71, .42) 0%, rgba(23, 46, 71, .12) 38%, rgba(23, 46, 71, 0) 60%); pointer-events: none; z-index: 1; }
.co2__vt { z-index: 2; text-shadow: 0 2px 18px rgba(23, 46, 71, .35); }
/* v15：最初の画面の写真が明るくなったので、文字の下だけ少し暗く */
.fv__shade { background:
  linear-gradient(90deg, rgba(14, 22, 34, .58) 0%, rgba(14, 22, 34, .34) 42%, rgba(14, 22, 34, .06) 72%),
  linear-gradient(0deg, rgba(14, 22, 34, .38), transparent 36%),
  rgba(0, 0, 0, .08); }
@media (max-width: 760px) {
  .fv__shade { background: linear-gradient(0deg, rgba(14, 22, 34, .7) 0%, rgba(14, 22, 34, .46) 45%, rgba(14, 22, 34, .16) 75%), rgba(0, 0, 0, .1); }
}

/* =========================================================================
   v15：民主化の段を組み直す（2026-11-03）
   ・見出し：小さな前置き「青森県内で」＋大きな「SNSマーケの民主化を」（v17：ゴシックのまま）。手書き風の二重線はやめる
   ・本文：細めのゴシックで、行間2.15・字間0.06em。1つ目は導入として少し大きく、4つ目の問いかけは太字で強める
   ・「木くづについて」は細い線のリンクに
   ========================================================================= */
.msg__lab { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--green-d); letter-spacing: .14em; }
.msg__lab .num { font-size: 12px; font-weight: 600; letter-spacing: .26em; color: var(--leaf); }
.msg__lab i { width: 36px; height: 1px; background: var(--leaf); }
.msg2__t { margin-top: clamp(20px, 2.2vw, 28px); color: var(--green-d); }
.msg2__s { display: block; font-size: clamp(16px, 1.45vw, 20px); font-weight: 700; letter-spacing: .22em; line-height: 1.6; margin-bottom: .5em; }
.msg2__l { display: block; font-family: var(--ff); font-weight: 700; font-size: clamp(32px, 3.25vw, 48px); line-height: 1.45; letter-spacing: .06em; word-break: keep-all; }
.msg2__l em { font-style: normal; color: var(--red); }
.msg2__body { margin-top: clamp(32px, 3.4vw, 48px); max-width: 30em; }
.msg2__body p { font-size: 15px; font-weight: 400; line-height: 2.15; letter-spacing: .06em; color: #3E444E; }
.msg2__body p + p { margin-top: 1.35em; }
.msg2__body .msg__lead { font-size: 17px; font-weight: 500; line-height: 2; letter-spacing: .05em; color: var(--ink); }
.msg2__body .msg__ask { position: relative; margin-top: 2.2em; padding-top: 1.7em; font-family: var(--ff); font-weight: 700; font-size: clamp(18px, 1.65vw, 21px); line-height: 1.85; letter-spacing: .06em; color: var(--green-d); }
.msg2__body .msg__ask::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 1px; background: var(--leaf); }
.msg2__body .msg__ask + p { margin-top: 1em; }
.msg2__more { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(36px, 3.6vw, 52px); padding: 10px 0 12px; border-bottom: 1px solid rgba(23, 46, 71, .3); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--green-d); transition: border-color .3s; }
.msg2__more i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--green-d); transition: background-color .3s, color .3s, transform .45s var(--ease); }
.msg2__more i .ico { width: 14px; height: 14px; }
.msg2__more:hover { border-color: var(--green-d); }
.msg2__more:hover i { background: var(--green-d); color: #fff; transform: translateX(4px); }
@media (max-width: 600px) {
  .msg2__s { font-size: 15px; letter-spacing: .18em; }
  .msg2__l { font-size: clamp(25px, 7.4vw, 32px); letter-spacing: .04em; }
  .msg2__body { margin-top: 28px; }
  .msg2__body p { font-size: 14px; line-height: 2.05; letter-spacing: .04em; }
  .msg2__body p + p { margin-top: 1.25em; }
  .msg2__body .msg__lead { font-size: 15.5px; }
  .msg2__body .msg__ask { font-size: 17px; margin-top: 2em; padding-top: 1.5em; }
}

/* v15：作った写真の「※イメージ」（小さく、写真の右下） */
.ptag { font-family: var(--ff); font-size: 10px; font-weight: 500; letter-spacing: .06em; background: rgba(23, 46, 71, .55); padding: 1px 9px; }
.fv__slide .ptag { left: auto; right: max(20px, var(--gutr)); bottom: 62px; top: auto; }
.reason__img .ptag, .biz__photo .ptag { display: inline-block; right: 50%; transform: translateX(50%); bottom: 8%; white-space: nowrap; }
.fl__pic .ptag { display: none; }
.msg__slide .ptag { left: auto; right: 12px; top: 12px; bottom: auto; }
@media (max-width: 760px) { .fv__slide .ptag { bottom: auto; top: 118px; right: 14px; } }
/* v15：パソコンでは、本文を読み進める間、右の写真がついてくる */
@media (min-width: 901px) { .msg__fig { position: sticky; top: 120px; } }

/* =========================================================================
   v17（2026-11-03）：明朝はやめて、ゴシック（Zen Kaku Gothic New）のまま組む
   ========================================================================= */
.msg2__l { font-family: var(--ff); font-weight: 700; font-size: clamp(30px, 3.05vw, 44px); line-height: 1.5; letter-spacing: .05em; }
.msg2__body .msg__ask { font-family: var(--ff); font-weight: 700; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.95; letter-spacing: .06em; }
@media (max-width: 600px) {
  .msg2__l { font-size: clamp(24px, 7vw, 30px); letter-spacing: .03em; }
  .msg2__body .msg__ask { font-size: 16px; }
}

/* =========================================================================
   v19（2026-11-03 のご指示）
   ・「※イメージ」をやめる ・木くづについて：「・」「：」を使わず、ラベルの形で見せる／行動指針を立体のカードに／ブロックの高さをそろえる
   ・SNS運用を LP の形に ・経営支援に鯉艸郷のイベント ・ロゴの一覧 ・料金 ・自社課題に向き合う（10の質問）・採用
   ========================================================================= */
.ptag { display: none !important; }

/* 見出しの種類のラベル（英字の小さなラベル＋日本語）。「：」の代わり */
.kk { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--green-d); }
.kk__en { position: relative; padding: 4px 12px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .22em; line-height: 1.4; }
.kk__jp { position: relative; padding-left: 14px; }
.kk__jp::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--leaf); }

/* ---------------- ロゴの一覧 ---------------- */
.lw { display: grid; gap: clamp(28px, 3.4vw, 44px); margin-top: clamp(28px, 3vw, 40px); }
.lw__g { display: grid; gap: 14px; }
.lw__h { display: flex; align-items: baseline; gap: 12px; font-size: 15px; letter-spacing: .1em; color: var(--green-d); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.lw__h small { font-size: 12px; color: var(--leaf); letter-spacing: .14em; }
.lw__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(164px, 44%), 1fr)); gap: 14px; }
.lw__i { display: grid; grid-template-rows: auto auto; gap: 8px; align-content: start; }
.lw__logo { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 9; padding: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 26px -24px rgba(23, 46, 71, .45); transition: transform .5s var(--ease), box-shadow .4s; }
.lw__logo img { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; }
.lw__i { min-width: 0; }
.lw__i:hover .lw__logo { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--leaf), 0 22px 34px -22px rgba(23, 46, 71, .45); }
.lw__n { font-size: 12px; line-height: 1.6; color: var(--sub); text-align: center; }
.lw__total { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 8px; color: var(--green-d); }
.lw__total .num { font-size: clamp(40px, 5vw, 60px); font-weight: 600; line-height: 1; color: var(--green); }
.lw__total small { font-size: 15px; font-weight: 700; letter-spacing: .1em; }
.lw--c .lw__list { grid-template-columns: repeat(auto-fill, minmax(min(128px, 30%), 1fr)); gap: 10px; }
.lw--c .lw__logo { border-radius: 12px; }
.lw--c .lw__logo img { left: 12%; top: 12%; width: 76%; height: 76%; }
.lw--c .lw__n { font-size: 11px; }
.bg-mist .lw__logo, .bg-mint .lw__logo { box-shadow: 0 14px 26px -24px rgba(23, 46, 71, .45); }
@media (max-width: 560px) { .lw--c .lw__n { display: none; } .lw--c .lw__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------- 木くづについて ---------------- */
.eqb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; margin-top: clamp(36px, 4vw, 52px); }
.sec > .wrap > .eqb:first-child { margin-top: 0; }
.eqb__b { position: relative; display: flex; flex-direction: column; gap: 16px; height: 100%; padding: clamp(28px, 3.6vw, 48px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.bg-mist .eqb__b { box-shadow: 0 24px 48px -40px rgba(23, 46, 71, .5); }
.eqb__b > p { line-height: 2.05; }
.eqb__t { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.6; letter-spacing: .06em; color: var(--green-d); margin-bottom: 4px; }
.eqb__b--ink { background: var(--green-d); color: #fff; box-shadow: none; }
.eqb__b--ink .eqb__t { color: #fff; }
.eqb__b--ink .kk { color: var(--leaf-l); }
.eqb__b--ink .kk__en { background: var(--leaf); color: var(--green-d); }
.eqb__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 8px; }
.eqb__tiles li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: var(--green-t); color: var(--green); font-size: clamp(18px, 2vw, 24px); font-weight: 900; letter-spacing: .08em; transition: transform .6s var(--ease), background-color .4s, color .4s; }
.eqb__tiles li:hover { transform: translateY(-4px); background: var(--green); color: #fff; }
.eqb__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.eqb__chips li { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(235, 220, 192, .5); color: var(--leaf-l); font-weight: 700; letter-spacing: .1em; }
.eqb__link { margin-top: auto !important; align-self: flex-start; }
.eqb--media { align-items: stretch; }
.eqb__fig { padding: 0; overflow: hidden; gap: 0; }
.eqb__img { flex: 1; min-height: 240px; background: var(--mist); }
.eqb__img img { width: 100%; height: 100%; object-fit: cover; }
.eqb__fig figcaption { display: grid; gap: 14px; padding: 24px clamp(24px, 3vw, 36px) 28px; font-size: 14px; color: var(--sub); line-height: 1.9; }
.credit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; color: var(--ink); }
.credit__k { padding: 3px 14px; border-radius: 999px; border: 1px solid var(--leaf); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--amber-d); }
.credit__v { font-size: 16px; font-weight: 700; letter-spacing: .14em; }
.abceo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: auto; padding-top: 22px; border-top: 1px dashed var(--line); }
.abceo img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.abceo__r { font-size: 12px; font-weight: 700; color: var(--sub); letter-spacing: .14em; }
.abceo__n { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--green-d); line-height: 1.4; }
.abceo__t { margin-top: 6px; font-size: 13px; color: var(--sub); line-height: 1.85; }
@media (max-width: 860px) { .eqb { grid-template-columns: 1fr; } .eqb__img { min-height: 0; aspect-ratio: 4 / 3; } }

/* 行動指針：立体のカード（ふれると傾く。読み進めると起き上がる） */
.v3 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.v3__c { --rx: 0deg; --ry: 0deg; --lift: 0px; --z: 0; transform-style: preserve-3d; transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .9s cubic-bezier(.2, .9, .25, 1); }
.v3__c.is-tilt { --z: 1; }
.v3__c.is-tilt { transition: transform .18s linear; }
.v3__in { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 30px 22px 30px; border-radius: 22px; transform-style: preserve-3d;
  background: linear-gradient(165deg, #FFFFFF 0%, #FBF8F2 60%, #F3ECDF 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(196, 160, 108, .35), 0 34px 50px -30px rgba(23, 46, 71, .55), 0 14px 22px -16px rgba(23, 46, 71, .28); }
.v3__edge { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(165deg, #2E5A86, var(--green-d)); transform: translateZ(-18px); box-shadow: 0 40px 60px -30px rgba(23, 46, 71, .55); }
.v3__glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 52%); opacity: .55; transition: opacity .5s; transform: translateZ(1px); }
.v3__c.is-tilt .v3__glow { opacity: 1; }
.v3__n { display: block; font-size: clamp(46px, 4.6vw, 64px); font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--green); transform: translateZ(calc(var(--z) * 46px)); transition: transform .6s var(--ease); }
.v3__t { font-size: clamp(17px, 1.6vw, 20px); letter-spacing: .06em; color: var(--green-d); transform: translateZ(calc(var(--z) * 30px)); transition: transform .6s var(--ease); }
.v3__p { font-size: 14px; line-height: 1.95; color: var(--sub); transform: translateZ(calc(var(--z) * 16px)); transition: transform .6s var(--ease); }
.v3__c:nth-child(odd) .v3__n { -webkit-text-stroke-color: var(--leaf); }
@media (prefers-reduced-motion: no-preference) {
  .js .v3 .v3__c { opacity: 0; transform: perspective(900px) translateY(70px) rotateX(-58deg); transform-origin: 50% 100%; transition: transform 1.5s cubic-bezier(.16, 1, .3, 1), opacity 1s; transition-delay: calc(var(--i) * 110ms); }
  .js .v3.on .v3__c { opacity: 1; transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); }
  .js .v3.on.is-settled .v3__c { transition: transform .9s cubic-bezier(.2, .9, .25, 1); transition-delay: 0s; }
  .js .v3.on.is-settled .v3__c.is-tilt { transition: transform .18s linear; }
}
@media (max-width: 1000px) { .v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v3__c:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .v3 { grid-template-columns: 1fr; gap: 18px; }
  .v3__in { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: 6px; padding: 24px 22px; align-items: center; }
  .v3__n { grid-row: 1 / span 2; font-size: 46px; }
  .v3__p { grid-column: 2; }
}

/* 4つの姿勢：上っていく階段 */
.ab-st { margin-top: clamp(64px, 8vw, 104px); }
.st3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); align-items: end; counter-reset: st3; perspective: 1600px; }
.st3__s { position: relative; transform-style: preserve-3d; }
.st3__face { position: relative; z-index: 1; display: grid; gap: 8px; padding: 26px 22px calc(26px + (var(--i) * clamp(18px, 2.6vw, 36px))); border-radius: 20px 20px 6px 6px; background: #fff; box-shadow: 0 28px 44px -34px rgba(23, 46, 71, .6); }
.st3__s:nth-child(4) .st3__face { background: var(--green); color: #fff; }
.st3__s:nth-child(4) .st3__face h3 { color: #fff; } .st3__s:nth-child(4) .st3__face p { color: rgba(255, 255, 255, .85); }
.st3__k { font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; letter-spacing: .1em; color: var(--red); line-height: 1.2; }
.st3__s:nth-child(4) .st3__k { color: var(--leaf-l); }
.st3__face h3 { font-size: 16px; color: var(--green-d); }
.st3__face p { font-size: 14px; line-height: 1.9; color: var(--sub); }
.st3__side { position: absolute; left: 10px; right: 10px; bottom: -14px; height: 18px; border-radius: 0 0 14px 14px; background: linear-gradient(#D9CDB6, #EFE6D6); transform: rotateX(-50deg); transform-origin: 50% 0; }
.st3__s:nth-child(4) .st3__side { background: linear-gradient(#0F2135, #172E47); }
.st3__s:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * clamp(12px, 1.4vw, 18px) / 2 - 7px); top: 34px; z-index: 2; width: 14px; height: 14px; border-top: 2px solid var(--leaf); border-right: 2px solid var(--leaf); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .js .st3 .st3__s { opacity: 0; transform: translateY(calc(40px + var(--i) * 20px)); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), opacity .9s; transition-delay: calc(var(--i) * 160ms); }
  .js .st3.on .st3__s { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .st3 { grid-template-columns: 1fr; gap: 14px; }
  .st3__face { padding: 22px 22px 22px calc(22px + var(--i) * 12px); border-radius: 18px; }
  .st3__s { margin-left: calc((3 - var(--i)) * 0px); }
  .st3__side { display: none; }
  .st3__s:not(:last-child)::after { right: 50%; top: auto; bottom: -12px; transform: translateX(50%) rotate(135deg); }
}

/* ---------------- SNS運用：LP の最初の画面 ---------------- */
.lph { position: relative; overflow: hidden; padding: calc(env(safe-area-inset-top, 0px) + 140px) 0 clamp(64px, 8vw, 110px); background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, var(--mist) 100%); }
.lph__deco i { position: absolute; border-radius: 50%; pointer-events: none; }
.lph__deco i:nth-child(1) { right: -12vw; top: -14vw; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(36, 71, 107, .10), rgba(36, 71, 107, 0)); }
.lph__deco i:nth-child(2) { left: -10vw; bottom: -18vw; width: 44vw; height: 44vw; background: radial-gradient(closest-side, rgba(196, 160, 108, .18), rgba(196, 160, 108, 0)); }
.lph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 132px; background: var(--green); clip-path: ellipse(78% 100% at 50% 0); }
.lph__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lph__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lph__en { font-size: clamp(40px, 6vw, 88px); font-weight: 600; line-height: .95; color: transparent; -webkit-text-stroke: 1px rgba(196, 160, 108, .85); }
.lph__t { font-size: clamp(32px, 4.4vw, 58px); font-weight: 700; letter-spacing: .06em; line-height: 1.42; color: var(--green-d); }
.lph__t em { font-style: normal; color: var(--red); }
.lph__lead { line-height: 2.05; max-width: 34em; }
.lph__badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; margin-top: 6px; }
.lph__badges li { display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 30px -26px rgba(23, 46, 71, .5); }
.lph__badges small { font-size: 11px; font-weight: 700; color: var(--sub); letter-spacing: .08em; }
.lph__badges b { font-size: 15px; color: var(--green-d); line-height: 1.2; }
.lph__badges b .num { font-size: clamp(28px, 3vw, 36px); font-weight: 600; color: var(--green); margin-right: 2px; }
.lph__badges span:not(.num) { font-size: 11px; color: var(--sub); }
.lph__note { font-size: 11px; color: var(--sub); }
.lph__cta { display: flex; flex-wrap: wrap; gap: 26px 18px; margin-top: 18px; }
.lph__fig { position: relative; min-height: clamp(420px, 44vw, 600px); }
.ph3 { position: absolute; inset: 0; perspective: 1400px; }
.ph3__p { position: absolute; top: 50%; left: 50%; width: clamp(170px, 17vw, 236px); aspect-ratio: 9 / 19; border-radius: 34px; padding: 9px; background: #10151C; box-shadow: inset 0 0 0 1.5px #3A4452, 0 50px 80px -40px rgba(16, 21, 28, .65), 0 20px 30px -20px rgba(16, 21, 28, .4); }
.ph3__scr { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #fff; }
.ph3__p--m { z-index: 3; transform: translate(-50%, -50%) translateZ(60px); }
.ph3__p--l { z-index: 1; transform: translate(-128%, -42%) rotateY(20deg) scale(.84); opacity: .96; }
.ph3__p--r { z-index: 2; transform: translate(28%, -58%) rotateY(-20deg) scale(.84); opacity: .96; }
.ph3__story, .ph3__reel { background-size: cover; background-position: center; }
.ph3__story::after, .ph3__reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .3)); }
.ph3__bar { position: absolute; z-index: 1; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; }
.ph3__bar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); overflow: hidden; position: relative; }
.ph3__bar i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 0; transform: scaleX(0); }
.ph3__bar i:first-child::after { transform: scaleX(1); }
.ph3__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.ph3__play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--green-d); }
.igx__top { display: flex; align-items: center; gap: 10px; padding: 26px 12px 8px; }
.igx__av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-t); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--leaf); flex: none; }
.igx__av svg { width: 26px; height: auto; fill: var(--green); }
.igx__bars { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.igx__bars i { height: 20px; border-radius: 6px; background: var(--mist); }
.igx__bio { display: grid; gap: 5px; padding: 0 12px 10px; }
.igx__bio i { height: 6px; border-radius: 3px; background: #E6E9EE; } .igx__bio i:last-child { width: 62%; }
.igx__hl { display: flex; gap: 8px; padding: 0 12px 10px; }
.igx__hl i { width: 26px; height: 26px; border-radius: 50%; background: var(--green-t); box-shadow: 0 0 0 1.5px var(--leaf); }
.igx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.igx__grid i { aspect-ratio: 1; background-size: cover; background-position: center; }
.pop { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 18px 34px -18px rgba(23, 46, 71, .45), 0 0 0 1px rgba(23, 46, 71, .06); font-size: 13px; font-weight: 700; color: var(--green-d); white-space: nowrap; }
.pop__i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; }
.pop__i .ico { width: 16px; height: 16px; }
.pop__i--h { background: var(--red); } .pop__i--g { background: var(--leaf); }
.pop--1 { left: 2%; top: 16%; } .pop--2 { right: 0; top: 46%; } .pop--3 { left: 8%; bottom: 10%; }
@media (prefers-reduced-motion: no-preference) {
  .js .ph3__p { animation: ph3in 1.4s cubic-bezier(.16, 1, .3, 1) both; }
  .js .ph3__p--l { animation-delay: .25s; } .js .ph3__p--r { animation-delay: .4s; } .js .ph3__p--m { animation-delay: .1s; }
  .js .pop { animation: popin .8s cubic-bezier(.2, 1.4, .3, 1) both, bob 5s ease-in-out infinite alternate; }
  .js .pop--1 { animation-delay: 1.1s, 1.9s; } .js .pop--2 { animation-delay: 1.6s, 2.4s; } .js .pop--3 { animation-delay: 2.1s, 2.9s; }
  .js .ph3__bar i:nth-child(2)::after { animation: story 4s linear 1.2s infinite; }
}
@keyframes ph3in { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes popin { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes story { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 960px) {
  .lph { padding-top: calc(env(safe-area-inset-top, 0px) + 110px); }
  .lph::before { height: 96px; }
  .lph__in { grid-template-columns: 1fr; }
  .lph__fig { min-height: 0; aspect-ratio: 1 / .92; max-width: 520px; width: 100%; margin-inline: auto; }
  .ph3__p { width: clamp(140px, 36vw, 200px); }
}
@media (max-width: 560px) {
  .lph__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lph__badges li { padding: 10px 8px; border-radius: 12px; }
  .lph__badges b { font-size: 12px; } .lph__badges b .num { font-size: 24px; }
  .lph__badges small, .lph__badges span:not(.num) { font-size: 10px; letter-spacing: 0; }
  .pop { font-size: 11px; padding: 7px 12px 7px 7px; gap: 7px; } .pop__i { width: 24px; height: 24px; }
  .pop--1 { left: 0; top: 8%; } .pop--2 { right: 0; } .pop--3 { left: 2%; bottom: 4%; }
  .lph__cta { width: 100%; } .lph__cta .btnwrap, .lph__cta > .btn { width: 100%; } .lph__cta .btn { width: 100%; }
}

/* ロゴの帯（SNS運用の取引先） */
.lp-logos { padding-block: clamp(48px, 6vw, 80px); }
.lp-logos__h { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; font-weight: 700; color: var(--green-d); letter-spacing: .08em; text-align: center; }
.lp-logos__h .num { font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--leaf); }
.lp-logos .lw { margin-top: 18px; }
.lp-logos .lw__h { display: none; }
.lp-logos .lw__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 760px) { .lp-logos .lw__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* こんなお悩み（やりとりの形） */
.lpchat__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lpchat__h { position: sticky; top: 120px; display: grid; gap: 10px; }
.lpchat__h .sh { margin-bottom: 0; }
.chat { display: grid; gap: 14px; }
.chat__r { display: flex; align-items: flex-end; gap: 12px; }
.chat__r--a { justify-content: flex-end; }
.chat__av { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -12px rgba(23, 46, 71, .5); }
.chat__av svg { width: 100%; height: 100%; }
.chat__av--k { background: var(--green); }
.chat__av--k svg { width: 26px; height: auto; fill: #fff; }
.chat__b { position: relative; max-width: min(30em, 82%); padding: 16px 20px; border-radius: 22px; font-size: 15px; font-weight: 700; line-height: 1.85; }
.chat__r--q .chat__b { background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 16px 30px -26px rgba(23, 46, 71, .6); }
.chat__r--a .chat__b { background: var(--green); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 18px 30px -22px rgba(23, 46, 71, .7); }
.chat__r--a .chat__b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 50%); pointer-events: none; }
.chat__dots { display: none; gap: 5px; padding: 6px 2px; }
.chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
@media (prefers-reduced-motion: no-preference) {
  .js .chat .chat__r { opacity: 0; transform: translateY(18px) scale(.96); transform-origin: 0 100%; transition: opacity .5s, transform .7s cubic-bezier(.2, 1.2, .3, 1); }
  .js .chat .chat__r--a { transform-origin: 100% 100%; }
  .js .chat .chat__r.is-show { opacity: 1; transform: none; }
  .js .chat .chat__r--a.is-typing .chat__dots { display: inline-flex; }
  .js .chat .chat__r--a.is-typing .chat__t { display: none; }
  .js .chat .chat__r--a .chat__t { animation: textin .5s ease both; }
  .js .chat .chat__dots i { animation: dot 1s ease-in-out infinite; }
  .js .chat .chat__dots i:nth-child(2) { animation-delay: .15s; } .js .chat .chat__dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes textin { from { opacity: 0; } to { opacity: 1; } }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 860px) {
  .lpchat__in { grid-template-columns: 1fr; }
  .lpchat__h { position: static; }
  .lpchat__cta { order: 3; }
  .chat__b { font-size: 14px; padding: 13px 16px; max-width: 84%; }
  .chat__av { width: 38px; height: 38px; }
}

/* 数字で見る（藍の面） */
.lpn { background: var(--green-d); color: #fff; overflow: hidden; }
.lpn::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .12; mix-blend-mode: soft-light; pointer-events: none; }
.lpn .wrap { position: relative; }
.lpn__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 52px); }
.lpn__i { position: relative; display: grid; gap: 6px; align-content: start; padding: 26px 22px 70px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.lpn__k { font-size: 12px; font-weight: 700; color: var(--leaf-l); letter-spacing: .1em; }
.lpn__n { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.lpn__n .num { font-size: clamp(48px, 5.2vw, 72px); font-weight: 600; color: #fff; }
.lpn__n i { font-style: normal; font-size: 16px; font-weight: 700; }
.lpn__t { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.lpn__sp { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 36px; width: calc(100% - 36px); }
.lpn__sp path { fill: none; stroke: var(--leaf); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .js .lpn__i.pre .lpn__sp path { stroke-dashoffset: 1; } .js .lpn__i.is-in .lpn__sp path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.16, 1, .3, 1) .3s; } }
.lpn .center .btn { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 960px) { .lpn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .lpn__i { padding: 20px 16px 58px; } .lpn__n .num { font-size: 42px; } }

/* ご提案の中身（5つ） */
.pp2s { position: relative; display: grid; gap: clamp(20px, 3vw, 36px); margin-top: clamp(36px, 4vw, 56px); }
.pp2s__bar { position: absolute; left: 31px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--green), var(--leaf)); transform-origin: 0 0; transform: scaleY(var(--lp, 1)); }
@media (prefers-reduced-motion: no-preference) { .js .pp2s__bar { transform: scaleY(var(--lp, 0)); } }
.pp2s::before { content: ""; position: absolute; left: 31px; top: 24px; bottom: 24px; width: 2px; background: var(--line); }
.pp2 { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding-left: 84px; }
.pp2__l { display: grid; gap: 8px; }
.pp2__no { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--green); color: var(--green); font-size: 20px; font-weight: 600; z-index: 1; }
.pp2__en { font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--leaf); }
.pp2__l h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .06em; color: var(--green-d); }
.pp2__l p { line-height: 2; }
.pp2__v { padding: clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--mist); min-height: 170px; display: grid; align-items: center; }
.pv { display: grid; gap: 10px; }
.pv--qa p { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; font-size: 14px; font-weight: 700; line-height: 1.8; }
.pv--qa b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--fn); font-size: 13px; }
.pv__q { background: #fff; margin-right: 12%; } .pv__q b { background: var(--leaf); color: #fff; }
.pv__a { background: var(--green); color: #fff; margin-left: 12%; } .pv__a b { background: #fff; color: var(--green); }
.pv--iss { display: flex; flex-wrap: wrap; gap: 10px; }
.pv--iss span { padding: 10px 18px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; color: var(--green-d); box-shadow: 0 10px 20px -16px rgba(23, 46, 71, .6); }
.pv--iss span:nth-child(2) { background: var(--red); color: #fff; }
.pv--dir { gap: 12px; }
.sw { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; text-align: center; }
.sw span { position: relative; z-index: 1; padding: 10px 6px; color: var(--sub); transition: color .5s; }
.sw__knob { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 2); border-radius: 999px; background: var(--green); box-shadow: 0 8px 16px -10px rgba(23, 46, 71, .8); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.sw--3 .sw__knob { width: calc((100% - 10px) / 3); }
.sw span:nth-of-type(1) { color: #fff; }
.pp2__v.on .sw--2 .sw__knob { animation: sw2 6s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--k) * .6s); }
.pp2__v.on .sw--3 .sw__knob { animation: sw3 7.5s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--k) * .6s); }
@keyframes sw2 { 0%, 38% { transform: translateX(0); } 50%, 88% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes sw3 { 0%, 26% { transform: translateX(0); } 33%, 59% { transform: translateX(100%); } 66%, 92% { transform: translateX(200%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: no-preference) { .pp2__v.on .sw span { color: var(--sub); } }
.pp2__v.on .sw--2 span:nth-of-type(1) { animation: swt1 6s infinite; animation-delay: calc(var(--k) * .6s); }
.pp2__v.on .sw--2 span:nth-of-type(2) { animation: swt2 6s infinite; animation-delay: calc(var(--k) * .6s); }
.pp2__v.on .sw--3 span:nth-of-type(1) { animation: swu1 7.5s infinite; animation-delay: calc(var(--k) * .6s); }
.pp2__v.on .sw--3 span:nth-of-type(2) { animation: swu2 7.5s infinite; animation-delay: calc(var(--k) * .6s); }
.pp2__v.on .sw--3 span:nth-of-type(3) { animation: swu3 7.5s infinite; animation-delay: calc(var(--k) * .6s); }
@keyframes swt1 { 0%, 40% { color: #fff; } 48%, 90% { color: var(--sub); } 100% { color: #fff; } }
@keyframes swt2 { 0%, 40% { color: var(--sub); } 48%, 90% { color: #fff; } 100% { color: var(--sub); } }
@keyframes swu1 { 0%, 28% { color: #fff; } 33%, 93% { color: var(--sub); } 100% { color: #fff; } }
@keyframes swu2 { 0%, 28% { color: var(--sub); } 33%, 61% { color: #fff; } 66%, 100% { color: var(--sub); } }
@keyframes swu3 { 0%, 61% { color: var(--sub); } 66%, 93% { color: #fff; } 100% { color: var(--sub); } }
@media (prefers-reduced-motion: reduce) { .pp2__v.on .sw__knob, .pp2__v.on .sw span { animation: none !important; } }
.pv--ct { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ct { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 10px 20px -16px rgba(23, 46, 71, .6); }
.ct b { font-size: 12.5px; color: var(--green-d); line-height: 1.4; }
.ct small { font-size: 10.5px; color: var(--sub); line-height: 1.4; }
.ct__ic { position: relative; width: 38px; height: 38px; border-radius: 10px; background: var(--green-t); }
.ct--pin .ct__ic { background: linear-gradient(90deg, var(--green) 0 31%, transparent 31% 34.5%, var(--green) 34.5% 65.5%, transparent 65.5% 69%, var(--green) 69%); background-size: 100% 100%; border-radius: 6px; }
.ct--grid .ct__ic { background: conic-gradient(from 90deg at 50% 50%, var(--leaf) 0 25%, var(--green-l) 0 50%, var(--leaf) 0 75%, var(--green-l) 0); border-radius: 6px; }
.ct--story .ct__ic { border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 6px #fff, inset 0 0 0 20px var(--green-t); }
.ct--hl .ct__ic { border-radius: 50%; background: var(--green-t); box-shadow: inset 0 0 0 2px var(--leaf); }
.ct--reel .ct__ic { width: 26px; height: 42px; border-radius: 6px; background: var(--green); }
.ct--reel .ct__ic::after { content: ""; position: absolute; left: 9px; top: 14px; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .pp2__v .ct { opacity: 0; transform: translateY(14px) scale(.94); transition: transform .9s cubic-bezier(.2, 1.2, .3, 1), opacity .6s; transition-delay: calc(var(--i) * 90ms); }
  .js .pp2__v.on .ct { opacity: 1; transform: none; }
}
.pv--set { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cl { padding: 14px 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 20px -16px rgba(23, 46, 71, .6); }
.cl__h { font-family: var(--fn); font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .04em; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); }
.cl ul { display: grid; gap: 7px; }
.cl li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; font-weight: 700; line-height: 1.55; }
.cl li .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3.2; }
@media (prefers-reduced-motion: no-preference) {
  .js .pp2__v .cl li .ico { transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.6, .3, 1); transition-delay: calc(.3s + var(--i) * 180ms); }
  .js .pp2__v.on .cl li .ico { transform: scale(1); }
}
@media (max-width: 860px) {
  .pp2s::before, .pp2s__bar { left: 21px; }
  .pp2 { grid-template-columns: 1fr; padding-left: 60px; gap: 16px; }
  .pp2__no { top: 0; transform: none; width: 44px; height: 44px; font-size: 15px; }
  .pv--ct { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv--set { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .pp2 { padding-left: 54px; } .pp2__v { padding: 16px; } .pv--ct { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw { font-size: 12.5px; } }

/* できること（写真つきのカード） */
.mcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.mc { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 26px 46px -40px rgba(23, 46, 71, .6); }
.mc__img { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.mc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mc:hover .mc__img img { transform: scale(1.06); }
.mc__no { position: absolute; left: 20px; bottom: -2px; font-size: clamp(54px, 6vw, 80px); font-weight: 600; line-height: .8; color: #fff; text-shadow: 0 8px 30px rgba(23, 46, 71, .35); }
.mc__b { display: flex; flex-direction: column; gap: 12px; padding: 24px clamp(22px, 2.6vw, 32px) 28px; }
.mc__b h3 { font-size: 21px; color: var(--green-d); letter-spacing: .06em; }
.mc__b p { font-size: 15px; line-height: 1.95; }
.mc__b .tags { margin-top: auto; }
@media (max-width: 760px) { .mcs { grid-template-columns: 1fr; } }

/* 料金（藍の箱） */
.lpprice { background: var(--white); }
.lpprice__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(32px, 5vw, 64px); border-radius: 32px; background: radial-gradient(120% 90% at 0% 0%, #2E5A86 0%, var(--green) 40%, var(--green-d) 100%); color: #fff; box-shadow: 0 40px 70px -46px rgba(23, 46, 71, .9); overflow: hidden; position: relative; }
.lpprice__box::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .14; mix-blend-mode: soft-light; pointer-events: none; }
.lpprice__l, .lpprice__r { position: relative; z-index: 1; }
.lpprice__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 10px; }
.lpprice__big small { font-size: 16px; font-weight: 700; }
.lpprice__big b { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: .04em; }
.lpprice__big b .num { font-size: 1.5em; font-weight: 600; color: var(--leaf-l); margin: 0 2px; }
.lpprice__t { line-height: 2; color: rgba(255, 255, 255, .88); }
.lpprice__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.lpprice__k { font-size: 14px; font-weight: 700; color: var(--leaf-l); letter-spacing: .1em; margin-bottom: 14px; }
.pks { display: grid; gap: 12px; }
.pk { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pk__no { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--leaf); color: var(--green-d); font-size: 22px; font-weight: 600; }
.pk h3 { font-size: 17px; color: #fff; }
.pk p { font-size: 13px; color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) { .lpprice__box { grid-template-columns: 1fr; border-radius: 24px; } }

/* ---------------- 経営支援：鯉艸郷のイベント ---------------- */
.evs { background: linear-gradient(180deg, var(--sand) 0%, #FBF8F2 100%); }
.evs__list { display: grid; gap: clamp(22px, 3vw, 36px); margin-top: clamp(32px, 4vw, 52px); }
.ev { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(22px, 3.6vw, 52px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: #fff; box-shadow: 0 30px 56px -46px rgba(23, 46, 71, .55); }
.ev--xmas { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.ev--xmas .ev__art { order: 2; }
.ev__art { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; border-radius: 22px; background: radial-gradient(90% 80% at 50% 70%, #F6EEE0, #EFE4CF); overflow: hidden; }
.ev--xmas .ev__art { background: radial-gradient(90% 80% at 50% 80%, #2B4E73, var(--green-d)); }
.ev__ring { width: 82%; }
.ev__tree { width: 54%; margin-top: 4%; }
.ev__when { position: absolute; left: 16px; top: 14px; padding: 6px 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--green-d); letter-spacing: .1em; box-shadow: 0 8px 16px -12px rgba(23, 46, 71, .6); }
.ev__k { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; font-weight: 700; color: var(--red); letter-spacing: .12em; }
.ev__k span { padding: 2px 12px; border-radius: 999px; background: var(--green-t); color: var(--green-d); letter-spacing: .06em; }
.ev__b { display: grid; gap: 14px; align-content: center; }
.ev__b h3 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .06em; color: var(--green-d); line-height: 1.5; }
.ev__t { line-height: 2.05; }
.ev__nums { display: flex; flex-wrap: wrap; gap: 12px; }
.ev__nums li { display: grid; gap: 2px; min-width: 140px; padding: 12px 18px; border-radius: 16px; background: var(--mist); }
.ev__nums small { font-size: 12px; font-weight: 700; color: var(--sub); }
.ev__nums b { font-size: 16px; color: var(--green-d); }
.ev__nums b .num { font-size: 32px; font-weight: 600; color: var(--green); margin-right: 2px; }
.ev__note { font-size: 12px; color: var(--sub); }
.ev__lights circle { fill: #F4D79B; }
@media (prefers-reduced-motion: no-preference) {
  .ev.on .ev__lights circle { animation: twinkle 2.4s ease-in-out infinite; }
  .ev.on .ev__lights circle:nth-child(3n) { animation-delay: .8s; } .ev.on .ev__lights circle:nth-child(3n+1) { animation-delay: 1.6s; }
  .ev.on .ev__wr--l { animation: pushl 2.6s ease-in-out infinite; } .ev.on .ev__wr--r { animation: pushr 2.6s ease-in-out infinite; }
  .js .ev .ev__tr { transform-origin: 50% 100%; transform: scaleY(.2); opacity: 0; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), opacity .6s; }
  .js .ev.on .ev__tr { transform: none; opacity: 1; }
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pushl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes pushr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.evw { margin-top: clamp(28px, 3.6vw, 44px); padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--green-d); color: #fff; }
.evw__h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-weight: 700; letter-spacing: .08em; margin-bottom: 18px; }
.evw__h .num { font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--leaf); }
.evw__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.evw__list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-weight: 700; font-size: 15px; }
.evw__list .num { font-size: 13px; color: var(--leaf-l); letter-spacing: .1em; }
@media (max-width: 860px) { .ev, .ev--xmas { grid-template-columns: 1fr; } .ev--xmas .ev__art { order: 0; } .evw__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .evw__list { grid-template-columns: 1fr; } .ev__nums li { min-width: 0; flex: 1; } }

/* ---------------- 料金 ---------------- */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 52px); }
.cmp__c { display: grid; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: 24px; }
.cmp__c--x { background: var(--mist); }
.cmp__c--o { background: var(--green); color: #fff; box-shadow: 0 34px 60px -44px rgba(23, 46, 71, .9); }
.cmp__k { font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.cmp__c--x .cmp__k { color: var(--sub); } .cmp__c--o .cmp__k { color: var(--leaf-l); }
.cmp__flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: clamp(16px, 1.8vw, 20px); font-weight: 900; letter-spacing: .06em; }
.cmp__flow span { padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ink); }
.cmp__c--o .cmp__flow span { color: var(--green-d); }
.cmp__flow i .ico { width: 18px; height: 18px; }
.cmp__c--x .cmp__flow i { color: var(--sub); } .cmp__c--o .cmp__flow i { color: var(--leaf-l); }
.cmp__bars { display: grid; gap: 8px; }
.cmp__bars i { position: relative; display: flex; align-items: center; height: 30px; width: var(--w); border-radius: 8px; padding-left: 12px; font-style: normal; }
.cmp__c--x .cmp__bars i { background: repeating-linear-gradient(90deg, #D9D9D9 0 22px, #E9E9E9 22px 26px); }
.cmp__c--o .cmp__bars i { background: linear-gradient(90deg, var(--leaf), #E2C895); }
.cmp__bars b { font-size: 13px; color: var(--green-d); }
.cmp__t { line-height: 1.9; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .js .cmp .cmp__bars i { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); }
  .js .cmp .cmp__bars i:nth-child(2) { transition-delay: .15s; } .js .cmp .cmp__bars i:nth-child(3) { transition-delay: .3s; }
  .js .cmp.on .cmp__bars i { transform: none; }
}
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } }
.pk3s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 52px); }
.pk3 { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px clamp(22px, 2.6vw, 32px) 30px; border-radius: 24px; background: #fff; box-shadow: 0 26px 46px -40px rgba(23, 46, 71, .6); }
.pk3__art { display: grid; place-items: center; height: 120px; margin: -6px -6px 6px; border-radius: 18px; background: var(--mist); }
.pk3__art svg { width: 120px; height: 90px; }
.pk3__no { position: absolute; right: 22px; top: 18px; font-size: 13px; font-weight: 600; color: var(--leaf); letter-spacing: .14em; }
.pk3 h3 { font-size: clamp(19px, 2vw, 23px); color: var(--green-d); letter-spacing: .06em; }
.pk3__q { font-weight: 700; color: var(--red); }
.pk3 > p:last-child { font-size: 14px; line-height: 1.95; color: var(--sub); }
@media (prefers-reduced-motion: no-preference) {
  .pk3.is-in .pk3__days rect { animation: dayin .5s cubic-bezier(.2, 1.4, .3, 1) both; }
  .pk3.is-in .pk3__days rect:nth-child(2) { animation-delay: .1s; } .pk3.is-in .pk3__days rect:nth-child(3) { animation-delay: .2s; } .pk3.is-in .pk3__days rect:nth-child(4) { animation-delay: .3s; }
  .pk3.is-in .pk3__days rect:nth-child(5) { animation-delay: .4s; } .pk3.is-in .pk3__days rect:nth-child(6) { animation-delay: .5s; } .pk3.is-in .pk3__days rect:nth-child(7) { animation-delay: .6s; }
  .pk3.is-in .pk3__knob { animation: knob 4s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
  .pk3.is-in .pk3__fill { animation: fill 4s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
  .pk3.is-in .pk3__rep { animation: rep 3s ease-in-out infinite; }
}
.pk3__days rect { transform-box: fill-box; transform-origin: 50% 50%; }
.pk3__fill { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.69); }
@keyframes dayin { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes knob { from { transform: translateX(-46px); } to { transform: translateX(18px); } }
@keyframes fill { from { transform: scaleX(.21); } to { transform: scaleX(.88); } }
@keyframes rep { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 860px) { .pk3s { grid-template-columns: 1fr; } }
.pz__note { margin-top: 4px; font-size: 11px; color: var(--sub); }
.pdoc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(22px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: clamp(26px, 3.6vw, 48px); border-radius: 28px; background: #fff; box-shadow: 0 30px 56px -46px rgba(23, 46, 71, .55); }
.pdoc__h h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.6; color: var(--green-d); letter-spacing: .06em; }
.pdoc__h .ulink { margin-top: 20px; }
.pdoc__list { display: grid; gap: 10px; perspective: 1000px; }
.pdoc__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--mist); }
.pdoc__list .num { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--green); color: #fff; font-size: 15px; font-weight: 600; }
.pdoc__list b { font-size: 16px; color: var(--green-d); }
.pdoc__list small { font-size: 12.5px; color: var(--sub); line-height: 1.7; }
@media (max-width: 860px) { .pdoc { grid-template-columns: 1fr; } }

/* ---------------- 自社課題に向き合う ---------------- */
.ck2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ck2__q .sh { margin-bottom: 24px; }
.ckf__list { display: grid; gap: 10px; }
.ck__no { font-size: 13px; font-weight: 600; color: var(--leaf); letter-spacing: .1em; flex: none; }
.ck2__r { position: sticky; top: 110px; }
.ckr2 { display: grid; gap: 14px; padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: var(--green-d); color: #fff; box-shadow: 0 34px 60px -44px rgba(23, 46, 71, .9); }
.ckr2__k { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .1em; }
.ckr2__k .num { font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--leaf); }
.ckr2__meter { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ckr2__meter i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--leaf), #E9CF9C); transform-origin: 0 50%; transform: scaleX(var(--m, 0)); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.ckr2__c { font-size: 13px; color: rgba(255, 255, 255, .75); }
.ckr2__c b { font-size: 22px; color: #fff; margin-right: 2px; }
.ckr2__empty, .ckr2__zero { line-height: 1.9; color: rgba(255, 255, 255, .85); }
.sols { display: grid; gap: 10px; }
.sol { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--ink); }
.sol:not([hidden]) { animation: solin .6s cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes solin { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.sol__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-t); color: var(--green); font-size: 17px; font-weight: 600; }
.sol.is-top .sol__n { background: var(--red); color: #fff; }
.sol h4 { font-size: 17px; color: var(--green-d); letter-spacing: .06em; }
.sol p { font-size: 13px; line-height: 1.8; color: var(--sub); margin-top: 2px; }
.sol__a { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--green); }
.sol__a .ico { width: 14px; height: 14px; }
.ckr2__btns .btn { width: 100%; }
@media (max-width: 960px) { .ck2 { grid-template-columns: 1fr; } .ck2__r { position: static; } }
@media (prefers-reduced-motion: reduce) { .sol:not([hidden]) { animation: none; } }

/* ---------------- 採用：職種のカード・合う人 ---------------- */
a.job--on { display: grid; cursor: pointer; }
.job__st { position: absolute; right: 18px; top: 18px; padding: 3px 12px; border-radius: 999px; background: var(--mist); color: var(--sub); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }
.job__st--on { background: var(--red); color: #fff; }
.job__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--green); }
.job__go .ico { width: 16px; height: 16px; transition: transform .4s var(--ease); }
a.job--on:hover .job__go .ico { transform: translateX(4px); }
.job--off { background: #F7F7F7; box-shadow: none !important; }
.job--off:hover { transform: none !important; }
.job--off h3, .job--off p { color: #8A8A8A !important; }
.job--off .job__ico { background: #ECECEC; color: #9A9A9A; }
.fit2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 980px; margin-inline: auto; }
.fit2__c { padding: clamp(24px, 3vw, 36px); border-radius: 24px; }
.fit2__c--ok { background: var(--green); color: #fff; box-shadow: 0 30px 56px -44px rgba(23, 46, 71, .9); }
.fit2__c--ng { background: var(--mist); }
.fit2__k { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: .08em; margin-bottom: 18px; }
.fit2__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--red); }
.fit2__c--ng .fit2__ic { background: var(--green-d); color: #fff; }
.fit2__ic .ico { width: 20px; height: 20px; }
.fit2 ul { display: grid; gap: 10px; }
.fit2 li { position: relative; padding: 14px 18px 14px 46px; border-radius: 14px; font-weight: 700; line-height: 1.7; }
.fit2__c--ok li { background: rgba(255, 255, 255, .1); }
.fit2__c--ng li { background: #fff; }
.fit2 li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 14px; height: 8px; margin-top: -6px; border-left: 2.5px solid var(--leaf-l); border-bottom: 2.5px solid var(--leaf-l); transform: rotate(-45deg); }
.fit2__c--ng li::before { width: 14px; height: 14px; margin-top: -7px; border: 0; transform: none; background: linear-gradient(45deg, transparent 44%, var(--sub) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--sub) 44% 56%, transparent 56%); }
@media (max-width: 760px) { .fit2 { grid-template-columns: 1fr; } }
.fld--job select { width: 100%; }
/* v19 の手直し */
.btn--line .btn__arw { color: var(--green-d); }
.sw .sw__knob { position: absolute; padding: 0; }
.pv--set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv--set .cl:first-child { grid-column: 1 / -1; }
.pv--set .cl:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
@media (max-width: 420px) { .pv--set { grid-template-columns: 1fr; } .pv--set .cl:first-child ul { grid-template-columns: 1fr; } }
/* ロゴの一覧：小さい関わり方（ハンズオン・経営支援・講演会）は1段にまとめる */
.lw { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; }
.lw__g { grid-column: 1 / -1; }
.lw .lw__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lw__g--handson, .lw__g--keiei, .lw__g--koen { grid-column: span 2; }
.lw .lw__g--handson .lw__list, .lw .lw__g--keiei .lw__list, .lw .lw__g--koen .lw__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .lw .lw__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lw__g--handson, .lw__g--keiei { grid-column: span 3; }
  .lw__g--koen { grid-column: 1 / -1; }
  .lw .lw__g--handson .lw__list, .lw .lw__g--keiei .lw__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw .lw__g--koen .lw__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lw__n { font-size: 10.5px; }
}
@media (max-width: 560px) {
  .lpn__n .num { font-size: 34px; } .lpn__n i { font-size: 13px; white-space: nowrap; }
  .ph3__p { width: 31vw; border-radius: 24px; padding: 6px; } .ph3__scr { border-radius: 19px; }
  .ph3__p--l { transform: translate(-116%, -42%) rotateY(18deg) scale(.84); }
  .ph3__p--r { transform: translate(16%, -58%) rotateY(-18deg) scale(.84); }
  .igx__top { padding-top: 16px; } .igx__av { width: 30px; height: 30px; } .igx__av svg { width: 18px; }
}
.ab-v { overflow-x: clip; }
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) { .js .v3 .v3__c { transform: perspective(900px) translateY(50px) rotateX(-32deg); } }

/* =========================================================================
   v20：お取引先を、ロゴが一列で横に流れる形に（押すと、どこで関わったかが出る）
   ========================================================================= */
.pms .sh { margin-bottom: clamp(24px, 3vw, 40px); }
.pm { --g: 14px; --tw: 188px; --th: 100px; position: relative; }
.pm__view { overflow: hidden; padding-block: 10px 14px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.pm__track { display: flex; gap: var(--g); width: max-content; padding-right: var(--g); }
.pm__i { flex: none; }
.pm__b { position: relative; display: grid; place-items: center; width: var(--tw); height: var(--th); padding: 0; border: 0; border-radius: 16px; background: #fff; cursor: pointer; box-shadow: 0 0 0 1px var(--line), 0 14px 26px -24px rgba(23, 46, 71, .5); transition: transform .45s var(--ease), box-shadow .35s; }
.bg-mist .pm__b, .bg-mint .pm__b { box-shadow: 0 0 0 1px rgba(23, 46, 71, .06), 0 14px 26px -22px rgba(23, 46, 71, .5); }
.pm__b img { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; object-fit: contain; pointer-events: none; }
.pm__b--t { padding: 10px 16px; }
.pm__txt { font-family: var(--ff); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--green-d); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
@media (hover: hover) { .pm__b:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--leaf), 0 20px 30px -22px rgba(23, 46, 71, .55); } }
.pm__b.is-on { box-shadow: 0 0 0 2.5px var(--red), 0 20px 30px -22px rgba(23, 46, 71, .55); transform: translateY(-4px); }
.pm__b:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .js .pm__track { animation: pmove calc(var(--n) * 3.4s) linear infinite; }
  .js .pm:hover .pm__track, .js .pm.is-paused .pm__track, .js .pm.is-open .pm__track, .js .pm:has(:focus-visible) .pm__track { animation-play-state: paused; }
}
@keyframes pmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pm__view { overflow-x: auto; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none; padding-inline: max(24px, var(--gut)); }
  .pm__i[aria-hidden] { display: none; }
  .pm__i { scroll-snap-align: start; }
  .pm__pause { display: none !important; }
}
.pm__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; width: 100%; max-width: calc(1120px + 48px); margin: 6px auto 0; padding-inline: max(24px, var(--gut)); }
.pm__hint { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sub); }
.pm__hint .ico { width: 18px; height: 18px; color: var(--leaf); }
.pm__pause { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 700; color: var(--green-d); cursor: pointer; }
.pm__pi { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--green); }
.pm__pi::before, .pm__pi::after { content: ""; position: absolute; top: 7px; width: 2.5px; height: 8px; border-radius: 1px; background: #fff; }
.pm__pi::before { left: 7.5px; } .pm__pi::after { right: 7.5px; }
.pm.is-paused .pm__pi::before { left: 9px; top: 6px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #fff; border-radius: 0; background: none; }
.pm.is-paused .pm__pi::after { display: none; }
.pm__card { position: relative; width: calc(100% - 2 * max(24px, var(--gut))); max-width: 760px; margin: 18px auto 0; padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--green-d); color: #fff; box-shadow: 0 30px 56px -40px rgba(23, 46, 71, .9); }
.pm__card.is-in { animation: pmcard .55s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes pmcard { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.pm__card::before { content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--green-d); transform: rotate(45deg); border-radius: 3px; }
.pm__x { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.pm__x .ico { width: 18px; height: 18px; transform: rotate(45deg); }
.pm__in { display: grid; gap: 10px; padding-right: 36px; }
.pm__dk { display: flex; flex-wrap: wrap; gap: 6px; }
.pm__dk .tag { border-color: var(--leaf); color: var(--leaf-l); background: transparent; }
.pm__dn { font-size: clamp(19px, 2vw, 24px); letter-spacing: .06em; }
.pm__dt { line-height: 1.95; color: rgba(255, 255, 255, .88); }
.pm__go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--green-d); font-size: 14px; font-weight: 700; }
.pm__go .ico { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .pm { --g: 10px; --tw: 140px; --th: 78px; }
  .pm__txt { font-size: 13px; }
  .pm__b--t { padding: 8px 10px; }
  .pm__hint { font-size: 12px; }
}
.lp-logos .pm { margin-top: 18px; }
.lp-logos .strip { margin-top: clamp(40px, 5vw, 64px); }
.pm__txt { font-size: 14.5px; letter-spacing: .04em; }
.pm__txt small { display: block; font-size: 11.5px; letter-spacing: .1em; color: var(--sub); }

/* =========================================================================
   v21：SNS運用ページ「成約マニア」（参考：wad-no-wad.com/otaku-x/ の組み立て）
   パソコン：左に看板・真ん中に縦長の本文・右に目次。方眼の地。スマホ：本文だけ
   ========================================================================= */
.mn { --mn-ink: #1B2A3A; --mn-red: #C03221; --mn-red2: #DC5A3C; --mn-gold: #C4A06C; --mn-hl: #F4DFA6; --mn-gb: #E9C27A;
  --mn-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  position: relative; padding: calc(env(safe-area-inset-top, 0px) + 128px) 0 0; background-color: #F3F1EC;
  background-image: linear-gradient(rgba(27, 42, 58, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 58, .055) 1px, transparent 1px);
  background-size: 24px 24px; }
.mn__grid { display: grid; grid-template-columns: minmax(0, 1fr) min(500px, 100%) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); max-width: 1440px; margin: 0 auto; padding-inline: 24px; }
.mn__col { position: relative; min-width: 0; background: #fff; border-inline: 2px solid var(--mn-ink); box-shadow: 0 30px 80px -50px rgba(27, 42, 58, .55); }
.mn-side { position: sticky; top: 130px; height: calc(100vh - 150px); min-height: 520px; display: flex; align-items: center; }
.mn-side--l { justify-content: flex-end; }
.mn-side--r { justify-content: flex-start; }
.mn-side__in { width: 100%; max-width: 300px; }
.mn-side--l .mn-side__in { display: grid; justify-items: center; gap: 16px; text-align: center; }
.mn-side__t { font-size: 17px; font-weight: 900; line-height: 1.6; color: var(--mn-ink); }
.mn-side__t em, .mn-fv__t em, .mn-h2 em, .mn-end__t em { font-style: normal; color: var(--mn-red); }
.mn-side__ill { display: flex; justify-content: center; gap: 2px; }
.mn-side__img { width: 62px; height: auto; }
.mn-side .btn { min-width: 0; width: 100%; }
.mn-toc__h { font-size: 22px; font-weight: 800; font-style: italic; letter-spacing: .02em; color: var(--mn-ink); margin-bottom: 10px; }
.mn-toc { display: grid; gap: 2px; }
.mn-toc a { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; font-weight: 700; color: rgba(27, 42, 58, .62); transition: color .2s; }
.mn-toc a .num { font-size: 11px; color: rgba(27, 42, 58, .4); }
.mn-toc a:hover, .mn-toc a[aria-current] { color: var(--mn-ink); }
.mn-toc a[aria-current] .num { color: var(--mn-red); }
.mn-toc a[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mn-red); }
@media (max-width: 1100px) {
  .mn__grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .mn-side { display: none; }
}
@media (max-width: 600px) {
  .mn { padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .mn__grid { padding-inline: 0; }
  .mn__col { border-inline: 0; box-shadow: none; }
}

/* 共通の部品 */
.mn-sec { position: relative; padding: clamp(52px, 8vw, 72px) 22px; }
.mn-k { text-align: center; font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .14em; color: var(--mn-red); }
.mn-k--w { color: var(--mn-gb); }
.mn-k--sm { margin-top: 48px; }
.mn-h2 { margin-top: 8px; text-align: center; font-size: clamp(25px, 6.4vw, 30px); font-weight: 900; line-height: 1.5; letter-spacing: .03em; color: var(--mn-ink); }
.mn-h2--w { color: #fff; }
.mn-h2--w em { color: var(--mn-gb); }
.mn-h3 { margin-top: 6px; text-align: center; font-size: 19px; font-weight: 900; color: var(--mn-ink); }
.mn-p { margin-top: 22px; font-size: 15px; line-height: 2; color: #2E3540; }
.mn-p--c { text-align: center; font-size: 13.5px; color: var(--sub); margin-top: 12px; }
.mn-note { margin-top: 10px; font-size: 11px; color: var(--sub); text-align: right; }
.mn-lab { display: table; margin: 6px auto 0; padding: 3px 14px 5px; background: var(--mn-ink); color: #fff; font-size: clamp(19px, 5.4vw, 23px); font-weight: 900; letter-spacing: .04em; line-height: 1.5; box-shadow: 4px 4px 0 rgba(196, 160, 108, .55); }
.mn-lab em { font-style: normal; color: var(--mn-gb); }
.mn-stack { margin-top: 22px; }
.mn-word { display: inline-flex; align-items: baseline; gap: .28em; padding: 8px 16px 9px; border-radius: 10px; background: var(--mn-ink); font-family: var(--fn); font-size: 24px; font-weight: 800; letter-spacing: .01em; line-height: 1; color: #fff; transform: skewX(-8deg); box-shadow: 0 0 0 2px var(--mn-gold) inset; }
.mn-word em { font-style: normal; color: var(--mn-gb); }
.mn-wordi { font-family: var(--fn); font-weight: 800; font-style: italic; letter-spacing: .01em; }
.mn-wordi em { font-style: italic; color: var(--mn-red); }
.mn-cta.btn, .mn .mn-cta .btn { min-width: 0; width: 100%; max-width: 420px; border-radius: 999px; background: linear-gradient(90deg, var(--mn-red), var(--mn-red2)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mn-red), 0 14px 26px -14px rgba(192, 50, 33, .8); }
.mn .btnwrap.mn-cta { width: 100%; max-width: 420px; }
.mn .btnwrap.mn-cta .btn { width: 100%; }
.mn-crumb { margin-top: 26px; justify-content: center; font-size: 11px; }

/* 最初の画面 */
.mn-fv { padding-top: 22px; }
.mn-fv__card { position: relative; overflow: hidden; padding: 24px 18px 0; border: 2px solid var(--mn-ink); border-radius: 24px; background-color: #FBFAF7;
  background-image: linear-gradient(rgba(27, 42, 58, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 42, 58, .06) 1px, transparent 1px); background-size: 18px 18px; }
.mn-fv__k { font-size: 13px; font-weight: 800; color: var(--mn-ink); letter-spacing: .04em; }
.mn-fv__t { margin-top: 10px; font-size: clamp(34px, 10.4vw, 46px); font-weight: 900; line-height: 1.28; letter-spacing: .02em; color: var(--mn-ink); }
.mn-fv__t em { display: inline-block; font-size: 1.24em; background: linear-gradient(90deg, var(--mn-red), #E07A3E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mn-fv__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42%; align-items: end; margin-top: 14px; min-height: 190px; }
.mn-fv__ill { width: 100%; height: auto; margin-bottom: -6px; justify-self: end; }
.mn-term { align-self: start; margin-top: 18px; border-radius: 10px; background: var(--mn-ink); color: #E6EBF1; font-family: var(--mn-mono); font-size: 11px; line-height: 1.8; padding: 8px 12px 10px; box-shadow: 6px 6px 0 rgba(196, 160, 108, .5); z-index: 1; }
.mn-term__bar { display: flex; gap: 5px; margin-bottom: 4px; }
.mn-term__bar i { width: 8px; height: 8px; border-radius: 50%; background: #E0583B; } .mn-term__bar i:nth-child(2) { background: #E9C27A; } .mn-term__bar i:nth-child(3) { background: #6FBF8E; }
.mn-term__l b { color: var(--mn-gb); }
.mn-term__ok { color: var(--mn-gb); }
.mn-caret { display: inline-block; width: 7px; height: 12px; margin-left: 4px; vertical-align: -2px; background: var(--mn-gb); }
@media (prefers-reduced-motion: no-preference) {
  .js .mn-caret { animation: mnBlink 1s steps(1) infinite; }
}
@keyframes mnBlink { 50% { opacity: 0; } }
@keyframes mnBob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.mn-fv__labs { position: relative; z-index: 2; margin-top: -8px; }
.mn-fv__labs .mn-lab { margin-left: 0; }
.mn-fv__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px -18px 0; padding: 14px 18px; background: var(--mn-ink); }
.mn-fv__brand .mn-word { box-shadow: none; padding-inline: 0; font-size: 26px; }
.mn-fv__brand p.num { font-size: 9px; line-height: 1.5; letter-spacing: .14em; color: rgba(255, 255, 255, .6); text-align: right; }
.mn-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mn-badges li { display: grid; gap: 1px; padding: 10px 8px; border: 2px solid var(--mn-ink); border-radius: 14px; background: #fff; text-align: center; }
.mn-badges small, .mn-badges span:not(.num) { font-size: 10px; font-weight: 700; color: var(--sub); }
.mn-badges b { font-size: 12px; color: var(--mn-ink); line-height: 1.2; }
.mn-badges b .num { font-size: 26px; font-weight: 700; color: var(--mn-red); }
.mn-fv__note { margin-top: 6px; font-size: 10.5px; color: var(--sub); text-align: center; }
.mn-fv__cta { display: flex; justify-content: center; margin-top: 30px; }

/* 成約マニアとは？ */
.mn-who { padding-top: 0; overflow: hidden; }
.mn-band { margin: 0 -22px 48px; padding: 9px 0; background: var(--mn-ink); color: #fff; font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .1em; text-align: center; white-space: nowrap; overflow: hidden; }
.mn-swipe { position: relative; margin: 26px -22px 0; }
.mn-team, .mn-voices { display: grid; grid-auto-flow: column; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 22px 14px; scrollbar-width: none; }
.mn-team::-webkit-scrollbar, .mn-voices::-webkit-scrollbar { display: none; }
.mn-team { grid-auto-columns: 68%; }
.mn-tc { scroll-snap-align: center; display: grid; justify-items: center; gap: 4px; padding: 14px 14px 16px; border: 2px solid var(--mn-ink); border-radius: 20px; background: var(--tc); box-shadow: 0 8px 0 var(--mn-ink); }
.mn-tc--director { --tc: #C03221; } .mn-tc--designer { --tc: #24476B; } .mn-tc--camera { --tc: #C4A06C; } .mn-tc--engineer { --tc: #3B5A47; }
.mn-tc__h { font-size: 19px; font-weight: 900; color: #fff; }
.mn-tc__ill { width: 100%; display: grid; place-items: center; padding: 10px 0 4px; border-radius: 14px; background: #fff; }
.mn-tc__img { width: 62%; height: auto; }
.mn-tc__en { margin-top: 6px; font-size: 11px; font-weight: 700; font-style: italic; color: rgba(255, 255, 255, .8); }
.mn-tc__t { display: inline-block; padding: 3px 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; color: var(--mn-ink); }
.mn-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.mn-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(27, 42, 58, .2); transition: width .3s, background-color .3s; }
.mn-dots i.on { width: 22px; background: var(--mn-ink); }

/* なぜマニア：5つの約束 */
.mn-why { padding: 0 0 20px; }
.mn-why__head { padding: 56px 22px 44px; background: var(--mn-ink); background-image: radial-gradient(70% 60% at 50% 0%, rgba(196, 160, 108, .25), transparent 70%); }
.mn-why__box { display: grid; justify-items: center; gap: 6px; margin: 26px auto 0; padding: 16px 18px 18px; max-width: 330px; border-radius: 16px; background: #fff; text-align: center; }
.mn-why__box .mn-wordi { font-size: 20px; color: var(--mn-ink); }
.mn-why__box b { font-size: 19px; font-weight: 900; color: var(--mn-ink); background: linear-gradient(transparent 62%, var(--mn-hl) 62%); }
.mn-why__box b em { font-style: normal; font-size: 1.7em; color: var(--mn-red); line-height: 1; }
.mn-prs { display: grid; }
.mn-pr { padding: 56px 22px 48px; border-bottom: 2px dashed rgba(27, 42, 58, .15); }
.mn-pr:last-child { border-bottom: 0; }
.mn-pr__no { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.mn-pr__no span { font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: .14em; color: var(--mn-ink); }
.mn-pr__no b { font-size: 64px; font-weight: 800; font-style: italic; line-height: 1; background: linear-gradient(120deg, var(--mn-red), var(--mn-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; transform: skewX(-6deg); }
.mn-habit { position: relative; margin: 18px auto 0; max-width: 340px; padding: 22px 16px 16px; border: 2px solid var(--mn-ink); border-radius: 14px; background: #fff; text-align: center; }
.mn-habit p { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0 10px; background: #fff; font-size: 11px; font-weight: 800; font-style: italic; letter-spacing: .14em; color: var(--mn-ink); white-space: nowrap; }
.mn-habit h3 { font-size: 17px; font-weight: 900; line-height: 1.6; color: var(--mn-ink); }
.mn-dakara { display: grid; justify-items: center; gap: 6px; margin-top: 6px; }
.mn-dakara i { width: 2px; height: 34px; background-image: linear-gradient(var(--mn-ink) 50%, transparent 50%); background-size: 2px 7px; position: relative; }
.mn-dakara i::after { content: ""; position: absolute; left: -5px; bottom: -3px; border-style: solid; border-width: 7px 6px 0; border-color: var(--mn-ink) transparent transparent; }
.mn-dakara span { padding: 4px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--mn-red), var(--mn-red2)); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .1em; }
.mn-stack--res { margin-top: 14px; }
.mn-pr__v { margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
}

/* 窓の形の図 */
.mn-win { position: relative; border: 2px solid var(--mn-ink); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--mn-ink); }
.mn-win__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--mn-ink); }
.mn-win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #E0583B; } .mn-win__bar i:nth-child(2) { background: #E9C27A; } .mn-win__bar i:nth-child(3) { background: #6FBF8E; }
.mn-win__bar span { margin-left: 8px; font-family: var(--mn-mono); font-size: 11px; color: #E6EBF1; }
.mn-win__in { position: relative; min-height: 200px; padding: 16px 16px 18px; }
.mn-win--sand .mn-win__in { background: #FBF4E6; } .mn-win--mint .mn-win__in { background: #EEF3F0; } .mn-win--rose .mn-win__in { background: #FBEDEA; }
.mn-win__who { position: absolute; right: 4px; bottom: -6px; width: 92px; height: auto; z-index: 2; }
.mn-cm { font-family: var(--mn-mono); font-size: 11px; color: var(--sub); margin-bottom: 8px; }
.mn-sheet { display: grid; gap: 8px; max-width: 64%; padding: 12px; border: 1.5px solid var(--mn-ink); border-radius: 10px; background: #fff; }
.mn-sheet li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--mn-ink); }
.mn-ck { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 2px solid var(--mn-ink); border-radius: 4px; color: transparent; }
.mn-ck .ico { width: 13px; height: 13px; stroke-width: 3.4; }
.mn-sheet li.on .mn-ck { background: var(--mn-ink); color: #fff; }
.mn-stamp { position: absolute; right: 86px; top: 46px; padding: 6px 10px; border: 2.5px solid var(--mn-red); border-radius: 8px; color: var(--mn-red); font-size: 12px; font-weight: 900; line-height: 1.35; text-align: center; transform: rotate(-8deg); background: rgba(255, 255, 255, .85); }
.mn-bud { display: flex; align-items: baseline; gap: 6px; font-weight: 900; color: var(--mn-ink); }
.mn-bud small { font-size: 12px; } .mn-bud b { font-size: 20px; } .mn-bud b .num { font-size: 40px; color: var(--mn-red); }
.mn-bars { display: grid; gap: 8px; margin-top: 10px; max-width: 70%; }
.mn-bars li { position: relative; height: 28px; border-radius: 8px; background: #fff; border: 1.5px solid var(--mn-ink); overflow: hidden; }
.mn-bars i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--mn-gold), #E2C895); }
.mn-bars b { position: relative; z-index: 1; display: block; padding: 3px 10px; font-size: 12.5px; color: var(--mn-ink); }
.mn-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-width: 74%; }
.mn-keys span { padding: 3px 10px; border-radius: 999px; background: var(--mn-ink); color: #fff; font-size: 11.5px; font-weight: 800; }
.mn-rep { width: 72%; border-collapse: collapse; background: #fff; border: 1.5px solid var(--mn-ink); border-radius: 10px; overflow: hidden; }
.mn-rep th, .mn-rep td { padding: 8px 10px; border-bottom: 1px dashed #D5D9DE; font-size: 12.5px; text-align: left; vertical-align: middle; }
.mn-rep tr:last-child th, .mn-rep tr:last-child td { border-bottom: 0; }
.mn-rep th { font-weight: 900; color: var(--mn-ink); }
.mn-rep th small { display: block; font-size: 10px; font-weight: 700; color: var(--sub); }
.mn-rep td { text-align: right; font-weight: 800; white-space: nowrap; }
.mn-rep td .num { font-size: 19px; color: var(--mn-red); }
.mn-spark { display: block; width: 66%; height: 50px; margin-top: 8px; }
.mn-spark path { fill: none; stroke: var(--mn-red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mn-spark circle { fill: var(--mn-red); }
.mn-shops { display: grid; gap: 8px; max-width: 74%; }
.mn-shops li { display: grid; gap: 2px; padding: 9px 12px; border: 1.5px solid var(--mn-ink); border-radius: 10px; background: #fff; }
.mn-shop__n { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 900; color: var(--mn-ink); }
.mn-shop__n small { font-size: 10px; color: #fff; background: var(--mn-ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.mn-shop__v { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mn-shop__v small { font-size: 10.5px; color: var(--sub); font-weight: 700; }
.mn-shop__v b { font-size: 12px; color: var(--mn-ink); } .mn-shop__v b .num { font-size: 22px; color: var(--mn-red); margin-right: 2px; }
.mn-fun { display: grid; gap: 8px; max-width: 76%; }
.mn-fun li { position: relative; display: flex; align-items: baseline; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--mn-ink); background: #fff; }
.mn-fun i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, #F2C4B8, #F8DCD3); }
.mn-fun li:last-child i { background: linear-gradient(90deg, var(--mn-red), var(--mn-red2)); }
.mn-fun b, .mn-fun small { position: relative; z-index: 1; }
.mn-fun b { font-size: 13px; color: var(--mn-ink); } .mn-fun small { font-size: 10.5px; color: var(--sub); font-weight: 700; }
.mn-fun li:last-child b { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .mn-pr__v .mn-sheet li .mn-ck { transform: scale(.4); opacity: .3; transition: transform .45s cubic-bezier(.2, 1.6, .3, 1), opacity .3s; transition-delay: calc(.2s + var(--i) * .25s); }
  .js .mn-pr__v.on .mn-sheet li .mn-ck { transform: none; opacity: 1; }
  .js .mn-pr__v .mn-stamp { opacity: 0; transform: rotate(-8deg) scale(1.8); transition: opacity .3s 1.3s, transform .5s cubic-bezier(.2, 1.4, .3, 1) 1.3s; }
  .js .mn-pr__v.on .mn-stamp { opacity: 1; transform: rotate(-8deg); }
  .js .mn-pr__v .mn-bars i, .js .mn-pr__v .mn-fun i { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.2s + var(--i) * .15s); }
  .js .mn-pr__v.on .mn-bars i, .js .mn-pr__v.on .mn-fun i { transform: none; }
  .js .mn-pr__v .mn-spark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1) .3s; }
  .js .mn-pr__v.on .mn-spark path { stroke-dashoffset: 0; }
  .js .mn-pr__v .mn-shops li { opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .7s var(--ease); transition-delay: calc(.2s + var(--i) * .18s); }
  .js .mn-pr__v.on .mn-shops li { opacity: 1; transform: none; }
}

/* マニアが必須!! */
.mn-must { overflow: hidden; display: grid; justify-items: center; gap: 10px; padding: 64px 22px 60px; background: var(--mn-ink); color: #fff; text-align: center; }
.mn-must__k { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.mn-must__t { font-size: clamp(38px, 11vw, 50px); font-weight: 900; line-height: 1.2; letter-spacing: .02em; }
.mn-must__t em { font-style: normal; color: var(--mn-gb); }
.mn-must__ill { position: relative; width: 62%; margin: 6px 0 10px; }
.mn-must__img { position: relative; z-index: 1; width: 100%; height: auto; }
.mn-must__glow { position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 194, 122, .45), rgba(233, 194, 122, 0)); }
.mn-must .spark { position: absolute; z-index: 2; width: 18px; fill: var(--mn-gb); }
.mn-must .spark:nth-of-type(1) { left: -6%; top: 16%; } .mn-must .spark:nth-of-type(2) { right: -4%; top: 6%; width: 24px; } .mn-must .spark:nth-of-type(3) { right: 2%; bottom: 22%; width: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js .mn-must .spark { animation: mnTw 2.2s ease-in-out infinite; }
  .js .mn-must .spark:nth-of-type(2) { animation-delay: .7s; } .js .mn-must .spark:nth-of-type(3) { animation-delay: 1.4s; }
}
@keyframes mnTw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
.mn-must .mn-word { font-size: 30px; }
.mn-must__cta { display: flex; justify-content: center; width: 100%; margin-top: 18px; }

/* 導入事例 */
.mn-voices { grid-auto-columns: 84%; }
.mn-vc { scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; border: 2px solid var(--mn-ink); border-radius: 18px; background: #fff; }
.mn-vc__no { font-size: 12px; font-weight: 800; font-style: italic; color: var(--mn-ink); }
.mn-vc__img { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--mist); display: grid; place-items: center; }
.mn-vc__img img { width: 100%; height: 100%; object-fit: cover; }
.mn-vc__img img.is-logo { width: 46%; height: 70%; object-fit: contain; }
.mn-vc__who { font-size: 12.5px; font-weight: 700; color: var(--sub); }
.mn-vc__hl { display: grid; justify-items: start; gap: 4px; }
.mn-vc__hl span { padding: 2px 8px; background: var(--mn-hl); font-size: 17px; font-weight: 900; color: var(--mn-ink); line-height: 1.5; }
.mn-vc__t { font-size: 13px; line-height: 1.9; color: #3A4048; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mn-vc__a { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 13px; font-weight: 800; color: var(--mn-red); }
.mn-vc__a .ico { width: 14px; height: 14px; }
.mn-partners { padding: 0 0 56px; }
.mn-partners .pm { --tw: 140px; --th: 78px; --g: 10px; }
.mn-partners .pm__txt { font-size: 12.5px; }
.mn-partners .pm__bar { padding-inline: 18px; }

/* 業務範囲 */
.mn-svc { background: var(--mn-ink); }
.mn-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.mn-tags li { padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--mn-ink); font-size: 13px; font-weight: 800; }
.mn-tags li.etc { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); border: 0; outline: 1.5px dashed rgba(255, 255, 255, .5); outline-offset: -1.5px; }
.mn-svc__k { margin-top: 34px; text-align: center; font-size: 13px; font-weight: 800; color: var(--mn-gb); letter-spacing: .1em; }
.mn-sns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding: 16px 10px; border-radius: 16px; background: #fff; }
.mn-sns li { display: grid; justify-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--mn-ink); text-align: center; }
.mn-sns .sns-logo { width: 30px; height: 30px; }

/* 料金 */
.mn-pcard { margin-top: 24px; padding: 24px 20px 22px; border: 2px solid var(--mn-ink); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 var(--mn-ink); }
.mn-pcard__big { display: flex; align-items: baseline; justify-content: center; gap: 4px; color: var(--mn-ink); font-weight: 900; }
.mn-pcard__big small { font-size: 16px; } .mn-pcard__big b { font-size: 26px; } .mn-pcard__big .num { font-size: 72px; line-height: 1; color: var(--mn-red); }
.mn-pcard .mn-p { margin-top: 14px; font-size: 14px; }
.mn-pcard__k { margin-top: 18px; font-size: 13px; font-weight: 900; color: var(--mn-ink); text-align: center; }
.mn-keys3 { display: grid; gap: 8px; margin-top: 10px; }
.mn-keys3 li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #F6F3EC; }
.mn-keys3 .num { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mn-ink); color: #fff; font-size: 16px; font-weight: 700; }
.mn-keys3 b { font-size: 15px; color: var(--mn-ink); } .mn-keys3 small { font-size: 12px; color: var(--sub); }
.mn-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--mn-red); }
.mn-more .ico { width: 14px; height: 14px; }

/* ご相談の流れ */
.mn-fl { position: relative; display: grid; gap: 12px; margin-top: 28px; }
.mn-fl::before, .mn-fl__bar { content: ""; position: absolute; left: 21px; top: 20px; bottom: 30px; width: 2px; background: #D9D4C8; }
.mn-fl__bar { background: var(--mn-red); transform-origin: 0 0; transform: scaleY(var(--lp, 1)); }
@media (prefers-reduced-motion: no-preference) { .js .mn-fl__bar { transform: scaleY(var(--lp, 0)); } }
.mn-fl li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.mn-fl__n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--mn-ink); color: #fff; font-size: 15px; font-weight: 800; font-style: italic; }
.mn-fl li > div { padding: 12px 14px; border: 2px solid var(--mn-ink); border-radius: 12px; background: #fff; }
.mn-fl h3 { font-size: 15.5px; font-weight: 900; color: var(--mn-ink); }
.mn-fl p { margin-top: 4px; font-size: 13px; line-height: 1.85; color: #3A4048; }
.mn-fl li.is-last .mn-fl__n { background: #fff; color: var(--mn-red); box-shadow: inset 0 0 0 2px var(--mn-red); }
.mn-fl li.is-last > div { background: var(--mn-ink); }
.mn-fl li.is-last h3 { color: var(--mn-gb); } .mn-fl li.is-last p { color: rgba(255, 255, 255, .85); }

/* よくあるご質問 */
.mn-faq .faq { margin-top: 24px; }
.mn-faq .faq details { border: 2px solid var(--mn-ink); border-radius: 12px; }

/* 最後：フォーム */
.mn-end { padding-bottom: 40px; background: #FBFAF7; border-top: 2px solid var(--mn-ink); }
.mn-end__t { text-align: center; font-size: clamp(26px, 7.4vw, 32px); font-weight: 900; line-height: 1.45; color: var(--mn-ink); }
.mn-end__ill { display: grid; place-items: center; margin-top: 16px; }
.mn-end__img { width: 92%; height: auto; }
.ill--group { display: flex; justify-content: center; align-items: flex-end; }
.ill--group .chara { width: 25%; height: auto; margin-inline: -2%; }
.ill--group .chara:nth-child(2), .ill--group .chara:nth-child(3) { width: 29%; }
.mn-end__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px -22px 0; padding: 14px 22px; background: var(--mn-ink); }
.mn-end__brand .mn-word { box-shadow: none; padding-inline: 0; }
.mn-end__brand p.num { font-size: 9px; line-height: 1.5; letter-spacing: .14em; color: rgba(255, 255, 255, .6); text-align: right; }
.mn-form { margin-top: 26px; padding: 22px 18px; border: 2px solid var(--mn-ink); border-radius: 18px; background: #fff; }
.mn-form__h { margin-bottom: 14px; font-size: 16px; font-weight: 900; color: var(--mn-ink); text-align: center; }
.mn-form .btn { width: 100%; min-width: 0; }
.mn-form__s { margin-top: 12px; font-size: 12px; color: var(--sub); text-align: center; }
/* v21 手直し */
.mn-word { white-space: nowrap; }
@media (max-width: 420px) { .mn-fv__brand .mn-word, .mn-end__brand .mn-word { font-size: 20px; } .mn-fv__brand p.num, .mn-end__brand p.num { font-size: 8px; } }
.mn-stamp { right: 12px; top: 12px; }
.mn-shop__n small { white-space: nowrap; flex: none; }
.mn-fun li { display: block; }
.mn-fun small { display: block; margin-top: 1px; }
.il-prev { display: grid; place-items: center; background: var(--mist); aspect-ratio: 1; border-radius: 16px; }
.il-prev__img { width: 70%; height: auto; max-height: 90%; }
.il-prev .ill--group { width: 92%; }
.mn-fun li:last-child i { background: linear-gradient(90deg, var(--mn-gold), #E9CF9C); }
.mn-fun li:last-child b { color: var(--mn-ink); }
@media (min-width: 1101px) { .is-mania .fl { display: none; } }
/* v21：Recraft のイラスト（画像）が入ったときの大きさ。人物は縦長なので高さでそろえる */
img.mn-fv__ill { width: auto; max-width: 100%; height: auto; max-height: 250px; justify-self: end; }
img.mn-tc__img { width: auto; height: 190px; max-width: 90%; object-fit: contain; }
img.mn-side__img { width: auto; height: 104px; }
.mn-side__ill { align-items: flex-end; gap: 6px; }
img.mn-win__who { width: auto; height: 122px; right: 6px; bottom: -4px; }
img.mn-must__img { width: auto; max-width: 100%; height: 310px; display: block; margin-inline: auto; }
.mn-must__ill { width: auto; }
img.mn-end__img { width: 100%; height: auto; }
img.il-prev__img { width: auto; max-width: 86%; height: auto; max-height: 86%; }
@media (max-width: 420px) { img.mn-fv__ill { max-height: 210px; } img.mn-tc__img { height: 170px; } img.mn-must__img { height: 270px; } img.mn-win__who { height: 108px; } }
/* v22 */
.mn-win .mn-note { text-align: left; padding-right: 96px; }

/* =========================================================================
   v23：成約マニアの動き（参考：wad-no-wad.com/otaku-x/ の動き方）
   ・最初の画面：見出しが行ごとにせり上がる → 黒い画面に文字が打たれる → 人物が右から入って浮かぶ → 帯がめくれる → 数字が弾む
   ・スクロール：見出しのせり上がり、帯のめくれ、カードの弾み、窓の立ち上がり、ボタンの光
   ・回る円・横に流れる文字は使わない
   ========================================================================= */
.mn { --mnE: cubic-bezier(.2, 1, .3, 1); --mnB: cubic-bezier(.2, 1.5, .35, 1); --mnW: cubic-bezier(.7, 0, .2, 1); }
.mn-ln { display: block; overflow: hidden; padding: .08em .12em .12em; margin: -.08em -.12em -.12em; }
.mn-ln > span { display: inline-block; }
.mn-sh { display: inline-block; }
.mn-term__l { min-height: 1.8em; }
.mn-team, .mn-voices { position: relative; }
.mn-dots i { position: relative; cursor: pointer; }
.mn-dots i::before { content: ""; position: absolute; inset: -9px -4px; }
.mn-toc a { transition: color .2s, transform .4s var(--mnE); }
.mn-toc a[aria-current] { transform: translateX(6px); }
/* ボタン：光が横切る・矢印が前へ */
.mn-cta.btn, .mn .mn-cta .btn { overflow: hidden; isolation: isolate; }
.mn-cta.btn::after, .mn .mn-cta .btn::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 28%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: translateX(-140%) skewX(-20deg); }
/* 5つの約束：いまどこを読んでいるか（右の端の点） */
.mn-prs { position: relative; }
.mn-prog { position: sticky; top: calc(50vh - 70px); height: 0; z-index: 4; pointer-events: none; }
.mn-prog__in { position: absolute; right: 5px; top: 0; display: grid; justify-items: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.mn-prog.is-show .mn-prog__in { opacity: 1; }
.mn-prog__in > span { writing-mode: vertical-rl; font-size: 8px; font-weight: 800; letter-spacing: .2em; color: var(--mn-ink); opacity: .55; margin-bottom: 2px; }
.mn-prog i { position: relative; width: 8px; height: 8px; border-radius: 4px; background: rgba(27, 42, 58, .2); transition: height .45s var(--mnE), background-color .3s; }
.mn-prog i b { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; font-style: italic; color: var(--mn-red); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.mn-prog i.on { height: 26px; background: var(--mn-red); }
.mn-prog i.on b { opacity: 1; }
.mn-prog i.done { background: var(--mn-ink); }
/* スマホ：下にずっと出る相談ボタン（最初の画面を過ぎたら出て、フォームが見えたら消える） */
.mn-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: center; padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
  pointer-events: none; transform: translateY(140%); visibility: hidden; transition: transform .45s cubic-bezier(.2, 1, .3, 1), visibility 0s .45s; }
.mn-sticky.is-on { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.2, 1.2, .3, 1); }
.mn-sticky .btn { min-height: 58px; font-size: 16px; pointer-events: auto; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mn-red), 0 16px 30px -12px rgba(27, 42, 58, .55); }
@media (min-width: 1101px) { .mn-sticky { display: none; } }
.is-mania .fl { display: none !important; }
@media (max-width: 1100px) { .is-mania .totop { bottom: calc(env(safe-area-inset-bottom, 0px) + 98px); } }

@media (prefers-reduced-motion: no-preference) {
  /* ---- 最初の画面（読み込んだとき） ---- */
  .js .mn-fv__card { animation: mnCard .8s var(--mnE) both; }
  .js .mn-fv__k { animation: mnUp .7s var(--mnE) both .2s; }
  .js .mn-fv__t .mn-ln > span { animation: mnRise .95s var(--mnE) both; animation-delay: calc(.3s + var(--l) * .13s); }
  .js .mn-fv__t em { background-image: linear-gradient(100deg, rgba(255, 236, 205, 0) 40%, rgba(255, 236, 205, .95) 50%, rgba(255, 236, 205, 0) 60%), linear-gradient(90deg, var(--mn-red), #E07A3E);
    background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; animation: mnSheen 4.2s ease-in-out infinite 1.6s; }
  .js .mn-term { animation: mnUp .8s var(--mnE) both .6s; }
  .js .mn-fv__ill { animation: mnIn 1s var(--mnE) both .7s, mnFloat 3.4s ease-in-out 1.7s infinite alternate; }
  .js .mn-fv__labs .mn-lab { animation: mnWipe .7s var(--mnW) both; animation-delay: calc(1.05s + var(--i) * .16s); }
  .js .mn-fv__brand { animation: mnUp .7s var(--mnE) both 1.3s; }
  .js .mn-badges li { animation: mnPop .65s var(--mnB) both; animation-delay: calc(1.45s + var(--i) * .1s); }
  .js .mn-fv__note { animation: mnUp .6s var(--mnE) both 1.75s; }
  .js .mn-fv__cta { animation: mnUp .7s var(--mnE) both 1.8s; }
  .js .mn-term.js-type .mn-term__l:not(.is-on) { visibility: hidden; }
  .js .mn-term.is-done .mn-term__ok { animation: mnFlash .9s ease-out; }
  /* ボタン */
  .js .mn-cta.btn::after, .js .mn .mn-cta .btn::after { animation: mnShine 3.6s ease-in-out infinite 2.2s; }
  .js .mn-cta .btn__arw svg { animation: mnNudge 1.8s ease-in-out infinite; }
  /* 左の看板：4人が交互に浮かぶ */
  .js .mn-side__img { animation: mnFloat 2.6s ease-in-out infinite alternate; }
  .js .mn-side__img:nth-child(2) { animation-delay: -.65s; } .js .mn-side__img:nth-child(3) { animation-delay: -1.3s; } .js .mn-side__img:nth-child(4) { animation-delay: -1.95s; }
  .js .mn-side--l .mn-word { animation: mnUp .8s var(--mnE) both .3s; }

  /* ---- スクロールで（.mv-on は動きが使えるときだけ付く） ---- */
  .mv-on [data-mv="k"] { transition: opacity .8s, letter-spacing 1.1s var(--mnE); }
  .mv-on [data-mv="k"]:not(.is-in) { opacity: 0; letter-spacing: .6em; }
  .mv-on [data-mv="rise"] .mn-ln > span { transition: transform .95s var(--mnE); transition-delay: calc(.05s + var(--l) * .12s); }
  .mv-on [data-mv="rise"]:not(.is-in) .mn-ln > span { transform: translateY(112%); }
  .mv-on [data-mv="up"] { transition: opacity .7s, transform .9s var(--mnE); }
  .mv-on [data-mv="up"]:not(.is-in) { opacity: 0; transform: translateY(30px); }
  .mv-on [data-mv="pop"] { transition: opacity .35s, transform .7s var(--mnB); }
  .mv-on [data-mv="pop"]:not(.is-in) { opacity: 0; transform: scale(.82) translateY(16px); }
  .mv-on [data-mv="wipe"] .mn-lab { transition: clip-path .7s var(--mnW); transition-delay: calc(.1s + var(--i) * .16s); clip-path: inset(-10px -10px -10px -10px); }
  .mv-on [data-mv="wipe"]:not(.is-in) .mn-lab { clip-path: inset(0 100% 0 0); }
  .mv-on [data-mv="wipe"] .mn-lab em { display: inline-block; transition: transform .5s var(--mnB); transition-delay: calc(.45s + var(--i) * .16s); }
  .mv-on [data-mv="wipe"]:not(.is-in) .mn-lab em { transform: scale(.4); }
  .mv-on [data-mv="stag"] > li { transition: opacity .3s, transform .55s var(--mnB); transition-delay: calc(var(--i) * 45ms); }
  .mv-on [data-mv="stag"]:not(.is-in) > li { opacity: 0; transform: translateY(14px) scale(.7); }
  /* 約束の番号：大きく出て、斜めに収まる */
  .mv-on [data-mv="no"] span { transition: opacity .6s, transform .8s var(--mnE); }
  .mv-on [data-mv="no"] b { transition: opacity .3s, transform .7s var(--mnB); transform: skewX(-6deg); }
  .mv-on [data-mv="no"]:not(.is-in) span { opacity: 0; transform: translateX(-24px); }
  .mv-on [data-mv="no"]:not(.is-in) b { opacity: 0; transform: skewX(-6deg) translateY(30%) scale(1.7); }
  /* だから：点線が伸びて流れ、ラベルが弾む */
  .mn-dakara i { transform-origin: 50% 0; }
  .mv-on [data-mv="dakara"] i { transition: transform .6s var(--mnE); }
  .mv-on [data-mv="dakara"]:not(.is-in) i { transform: scaleY(0); }
  .mv-on [data-mv="dakara"].is-in i { animation: mnDash .55s linear infinite .6s; }
  .mv-on [data-mv="dakara"] span { transition: opacity .3s .35s, transform .6s var(--mnB) .35s; }
  .mv-on [data-mv="dakara"]:not(.is-in) span { opacity: 0; transform: scale(.4); }
  .mv-on [data-mv="dakara"].is-in span { animation: mnHop 2.4s ease-in-out infinite 1.2s; }
  /* 窓：下から立ち上がり、中の人物が右から入って浮かぶ */
  .mv-on [data-mv="win"] { transition: opacity .5s, transform .95s var(--mnE); }
  .mv-on [data-mv="win"]:not(.is-in) { opacity: 0; transform: translateY(44px) rotate(-2deg) scale(.96); }
  .mv-on [data-mv="win"] .mn-win__who { transition: opacity .5s .35s, transform .9s var(--mnE) .35s; }
  .mv-on [data-mv="win"]:not(.is-in) .mn-win__who { opacity: 0; transform: translateX(40px); }
  .mv-on [data-mv="win"].is-in img.mn-win__who { animation: mnFloat 3s ease-in-out infinite alternate 1.4s; }
  /* マニアが必須!!：1文字ずつ叫ぶ */
  .mv-on [data-mv="shout"] .mn-sh { transition: opacity .2s, transform .55s var(--mnB); transition-delay: calc(.1s + var(--i) * 70ms); }
  .mv-on [data-mv="shout"]:not(.is-in) .mn-sh { opacity: 0; transform: scale(2.4) translateY(-12%); }
  .mv-on [data-mv="must"] .mn-must__img { transition: opacity .4s .5s, transform .9s var(--mnB) .5s; }
  .mv-on [data-mv="must"]:not(.is-in) .mn-must__img { opacity: 0; transform: translateY(50px) scale(.7); }
  .mv-on [data-mv="must"].is-in .mn-must__img { animation: mnFloat 2.8s ease-in-out infinite alternate 1.5s; }
  .mv-on [data-mv="must"].is-in .mn-must__glow { animation: mnGlow 3s ease-in-out infinite; }
  /* 料金の箱 */
  .mv-on [data-mv="pcard"] { transition: opacity .5s, transform .8s var(--mnE); }
  .mv-on [data-mv="pcard"]:not(.is-in) { opacity: 0; transform: translateY(40px); }
  .mv-on [data-mv="pcard"] .mn-keys3 li { transition: opacity .5s, transform .7s var(--mnE); transition-delay: calc(.45s + var(--i) * .12s); }
  .mv-on [data-mv="pcard"]:not(.is-in) .mn-keys3 li { opacity: 0; transform: translateX(-24px); }
  /* 業務範囲の SNS */
  .mn-sns li .sns-logo { transition: transform .45s var(--mnB); }
  @media (hover: hover) { .mn-sns li:hover .sns-logo { transform: translateY(-5px) scale(1.12); } .mn-tags li { transition: transform .3s var(--mnB); } .mn-tags li:hover { transform: translateY(-3px); } }
  /* 最後の集合：ゆっくり浮かぶ */
  .mv-on .mn-end__ill.is-in .mn-end__img { animation: mnFloat 4s ease-in-out infinite alternate 1s; }
  /* 横めくり：真ん中のカードを大きく、ほかは少し引く */
  .mv-on .mn-tc, .mv-on .mn-vc { transition: transform .6s var(--mnE), opacity .5s; }
  .mv-on .mn-swipe.is-auto .mn-tc:not(.is-active), .mv-on .mn-swipe.is-auto .mn-vc:not(.is-active) { transform: scale(.9); opacity: .55; }
  .mv-on .mn-tc.is-active .mn-tc__img { animation: mnFloat 1.5s ease-in-out infinite alternate; }
  /* ご相談の流れ：線が届いた段から灯る */
  .mv-on .mn-fl li > div { transition: opacity .5s, transform .6s var(--mnE), box-shadow .5s; }
  .mv-on .mn-fl li .mn-fl__n { transition: background-color .4s, color .4s, transform .5s var(--mnB); }
  .mv-on .mn-fl li:not(.is-lit) > div { opacity: .38; transform: translateX(14px); }
  .mv-on .mn-fl li:not(.is-lit) .mn-fl__n { background: #C9CDD3; transform: scale(.82); }
  .mv-on .mn-fl li.is-lit > div { box-shadow: 4px 4px 0 var(--mn-ink); }
  .mv-on .mn-fl li.is-lit:not(.is-last) .mn-fl__n { background: var(--mn-red); }
  .mv-on .mn-fl li.is-last.is-lit > div { box-shadow: 4px 4px 0 var(--mn-gold); }
}
@keyframes mnCard { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes mnUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes mnRise { from { transform: translateY(112%); } }
@keyframes mnIn { from { opacity: 0; transform: translateX(56px) rotate(5deg); } }
@keyframes mnFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes mnWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-10px -10px -10px -10px); } }
@keyframes mnPop { from { opacity: 0; transform: scale(.55) translateY(16px); } }
@keyframes mnSheen { 0% { background-position: 100% 0, 0 0; } 30%, 100% { background-position: 0% 0, 0 0; } }
@keyframes mnShine { 0% { transform: translateX(-140%) skewX(-20deg); } 34%, 100% { transform: translateX(460%) skewX(-20deg); } }
@keyframes mnNudge { 0%, 55%, 100% { transform: none; } 28% { transform: translateX(4px); } }
@keyframes mnFlash { 0% { text-shadow: 0 0 0 rgba(233, 194, 122, 0); } 30% { text-shadow: 0 0 12px rgba(233, 194, 122, .9); } 100% { text-shadow: 0 0 0 rgba(233, 194, 122, 0); } }
@keyframes mnDash { to { background-position: 0 7px; } }
@keyframes mnHop { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-5px); } 90% { transform: translateY(1px); } }
@keyframes mnGlow { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }

/* =========================================================================
   v23：下層ページの動き
   ・ページの頭：上の帯が降りてくる → パンくず → ラベルが弾む → 見出しが1文字ずつ → 説明 → 写真が幕を開けるように
   ・見出しのラベルが弾む／赤・緑・黄のボタンに光が横切る（相談の帯のボタンは、ときどき自動で）
   ========================================================================= */
.btn--red, .btn--green, .btn--amber, .btn--ink { overflow: hidden; isolation: isolate; }
.btn--red::after, .btn--green::after, .btn--amber::after, .btn--ink::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); transform: translateX(-140%) skewX(-20deg); }
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) { .btn--red:hover::after, .btn--green:hover::after, .btn--amber:hover::after, .btn--ink:hover::after { transform: translateX(420%) skewX(-20deg); transition: transform .75s cubic-bezier(.4, 0, .2, 1); } }
  .js .cta .btn--cta::after { animation: mnShine 4.4s ease-in-out infinite 1.5s; }
  .js .cta .btn--cta.btn--amber::after { animation-delay: 2.6s; }
  .js .ph__deco { animation: phDrop 1s cubic-bezier(.7, 0, .2, 1) both; }
  .js .ph::before { animation: phDrop 1.15s cubic-bezier(.7, 0, .2, 1) both .06s; }
  .js .ph .crumb { animation: phUp .6s cubic-bezier(.2, 1, .3, 1) both .3s; }
  .js .ph__txt > .pill { animation: phPill .65s cubic-bezier(.2, 1.5, .35, 1) both .4s; }
  .js .ph__lead { animation: phUp .8s cubic-bezier(.2, 1, .3, 1) both .75s; }
  .js .ph__side { animation: phWipe 1.15s cubic-bezier(.7, 0, .2, 1) both .35s; }
  .js .ph__side .pic img { animation: phZoom 1.8s cubic-bezier(.2, 1, .3, 1) both .35s; }
  .js .sh.pre .pill { opacity: 0; transform: scale(.55); }
  .js .sh.pre.is-in .pill { opacity: 1; transform: none; transition: opacity .3s .1s, transform .6s cubic-bezier(.2, 1.5, .35, 1) .1s; }
  .js .sh.pre .sh__sub { opacity: 0; transform: translateY(14px); }
  .js .sh.pre.is-in .sh__sub { opacity: 1; transform: none; transition: opacity .6s .45s, transform .8s cubic-bezier(.2, 1, .3, 1) .45s; }
}
@keyframes phDrop { from { transform: translateY(-100%); } }
@keyframes phUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes phPill { from { opacity: 0; transform: scale(.5); } }
@keyframes phWipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-40px -40px -40px -40px); } }
@keyframes phZoom { from { transform: scale(1.18); } }
/* v23：黒い画面の文字。1行目（コマンド）は折り返さない。日本語の行は折り返してよい */
.mn-term__bar + .mn-term__l { white-space: nowrap; }
.mn-term__l { overflow-wrap: anywhere; }
@media (max-width: 420px) { .mn-term { font-size: 10px; padding-inline: 10px; } }

/* =========================================================================
   v23（11/11）：ヘッダーのカクつき対策
   ・上の位置（top）を動かすのをやめ、transform だけで動かす（画面の描き直しが軽い）
   ・細くなる・隠れる、どちらも同じ transform のなめらかな動きに
   ========================================================================= */
.hd { transition: transform .5s cubic-bezier(.2, 1, .3, 1); will-change: transform; backface-visibility: hidden; }
.hd.is-small { top: calc(env(safe-area-inset-top, 0px) + 40px); transform: translate3d(0, -28px, 0); }
.hd.is-hidden { transform: translate3d(0, calc(-100% - 70px), 0); }
.hd__in { transition: height .35s cubic-bezier(.2, 1, .3, 1), box-shadow .4s; }
@media (max-width: 600px) {
  .hd.is-small { top: calc(env(safe-area-inset-top, 0px) + 20px); transform: translate3d(0, -10px, 0); }
  .hd.is-hidden { transform: translate3d(0, calc(-100% - 40px), 0); }
}
@media (prefers-reduced-motion: reduce) { .hd, .hd__in { transition: none; } }