@charset "UTF-8";
/* ============================================================
   SIMPLOGO — 想いを、まっすぐシンプルに。
   コンクリートのライトグレー地に、白い紙を置いた静かなミニマル
   ============================================================ */

:root{
  /* --- 色（コンクリート地＋白い紙＋差し色1色） --- */
  --bg:        #E1DFD9;   /* モルタルの地（画像が読めない時の色） */
  --paper:     #FFFFFF;   /* 不透明な紙（作品の下地など） */
  --paper-sheer: rgba(255,255,255,.55);  /* 透かした紙：カード（地のモルタルが透ける） */
  --paper-field: rgba(255,255,255,.60);  /* 入力欄 */
  --ink:       #38352E;   /* 見出し・本文  墨色 9.2:1 */
  --ink-2:     #4F4C44;   /* 副文          6.4:1 */
  --ink-3:     #4E4B44;   /* ラベル・注記  6.5:1 */
  --sumi:      #413E37;   /* ボタンの墨色（原色の黒は使わない） */
  --sumi-h:    #4C4941;   /* ボタン hover */
  --line:      #C7C2B7;
  --line-2:    #B4AEA2;
  --accent:    #7E6E3C;   /* 差し色：くすんだ金 */

  /* --- 書体 --- */
  --mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --gothic: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --en:     'Cormorant', 'Times New Roman', serif;

  /* --- モーション（必ずここから引く） --- */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-in-out: cubic-bezier(.76,0,.24,1);
  --d-fast: .2s;
  --d-mid: .45s;
  --d-slow: .9s;

  --hd-h: 68px;
  --tex: url("../images/mortar.jpg");
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  font-family:var(--gothic);
  font-weight:400;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.035em;
  color:var(--ink);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 日本語を語句のまとまりで折り返す（「シンプ／ル」のような切れ方を防ぐ） */
  word-break:auto-phrase;
  line-break:strict;
}
h1,h2,h3,p,li,figcaption,blockquote,summary,label{ text-wrap:pretty }
/* モルタルの壁：画面に固定して敷くのでスクロールしても繰り返しが出ない */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:var(--bg) var(--tex) center center / cover no-repeat;
}

/* 透かし：右端に縦組みの SIMPLOGO（主張しすぎない濃度で固定） */
.wm{
  position:fixed;right:clamp(14px,3.4vw,72px);top:50%;transform:translateY(-50%);
  z-index:-1;
  writing-mode:vertical-rl;line-height:1;
  font-family:var(--en);font-weight:600;
  /* 高さに追従させて縦にはみ出させない。字送りを詰めたぶん文字を大きくできる */
  font-size:min(9.5vw,10.5vh);
  letter-spacing:.08em;padding-top:.08em;
  color:var(--ink);opacity:.08;
  white-space:nowrap;pointer-events:none;user-select:none;-webkit-user-select:none;
}
/* 狭い画面では本文の列が細いので、少し小さく薄く */
@media(max-width:899px){
  .wm{ right:8px; font-size:min(13vw,7.4vh); opacity:.055; }
}
@media(min-width:768px){ body{font-size:17px} }
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
::selection{background:rgba(126,110,60,.18)}

.skip{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--sumi);color:#fff;padding:12px 20px}
.skip:focus{left:8px;top:8px}

/* 面の切り替えはしない（境目の線が出るため）。構造は白いカードで作る */

/* ============ 共通レイアウト ============ */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:24px}
@media(min-width:768px){ .wrap{padding-inline:40px} }
.wrap--narrow{max-width:780px}

.sec{padding-block:88px}
@media(min-width:768px){ .sec{padding-block:128px} }
@media(min-width:1024px){ .sec{padding-block:164px} }

.eyebrow{
  font-family:var(--en);font-size:.86rem;font-weight:600;
  letter-spacing:.4em;color:var(--ink-3);
  text-transform:uppercase;line-height:1;margin-bottom:24px;padding-left:.4em;
}
.eyebrow::before{
  content:"";display:inline-block;width:26px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:14px;margin-left:-.4em;
}
.h2{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.65rem,5vw,2.5rem);
  line-height:1.5;letter-spacing:.08em;
  margin-bottom:26px;
  position:relative;display:inline-block;isolation:isolate;
}
/* 見出しの黄色マーカー。手で引いたようなストロークを、左から引いていく */
.hero__mk,.hero__h1{position:relative;display:inline-block;isolation:isolate}

/* マーカー本体。スマホは行ごと（.hero__mk）、PCは1行なので見出し全体（.hero__h1）に1本 */
.h2::before,.hero__mk::before,.hero__h1::before{
  content:"";position:absolute;z-index:-1;
  left:-.26em;right:-.38em;bottom:.26em;height:.60em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 48' preserveAspectRatio='none'%3E %3Cpath d='M2 13 C26 5 52 11 78 8 C104 5 128 12 156 9 C186 6 212 13 240 9 C264 6 288 11 312 4 L316 33 C292 41 266 35 240 38 C212 41 186 34 156 37 C128 40 104 33 78 36 C52 39 26 33 4 41 Z' fill='%23FFD23F' fill-opacity='.78'/%3E %3Cpath d='M8 11 C40 4 76 10 110 7 C150 4 190 11 232 7 C262 4 288 9 310 3 L311 12 C288 18 262 13 232 16 C190 20 150 13 110 16 C76 19 40 13 8 21 Z' fill='%23FFE679' fill-opacity='.62'/%3E %3Cpath d='M5 34 C38 28 74 34 108 31 C150 27 192 34 234 30 C264 27 290 32 314 26 L315 35 C290 41 264 36 234 39 C192 43 150 36 108 39 C74 42 38 36 5 43 Z' fill='%23EFBB12' fill-opacity='.34'/%3E %3Cpath d='M286 6 C296 4 306 6 316 2 L318 34 C308 38 298 35 289 37 Z' fill='%23FFD23F' fill-opacity='.34'/%3E %3Cpath d='M300 9 C308 8 313 9 318 7 L318 28 C312 30 306 29 301 30 Z' fill='%23FFE679' fill-opacity='.22'/%3E %3C/svg%3E") no-repeat left center;
  background-size:100% 100%;
  transform:rotate(-.9deg);
  opacity:.5;                 /* 地に馴染ませるため半分の濃さに */
  clip-path:inset(0 0 0 0);
}
.hero__h1::before{display:none}                       /* スマホでは使わない */
@media(min-width:768px){
  .hero__mk::before{display:none}                     /* PCでは行ごとの分割をやめる */
  .hero__h1::before{display:block}
}

/* 引き始めの状態 */
.js .h2.reveal::before,
.js .hero__mk::before,
.js .hero__h1::before{clip-path:inset(0 100% 0 0)}

/* 引く */
.js .h2.reveal.is-in::before,
.js.is-ready .hero__mk::before,
.js.is-ready .hero__h1::before{
  clip-path:inset(0 -1% 0 0);
  /* 一定の速さで引くのではなく、書き出しと止めがある人の手の速度感に */
  transition:clip-path 1s cubic-bezier(.58,.04,.36,.99) .35s;
}
/* ヒーローは見出しが立ち上がってから */
.js.is-ready .hero__mk::before,
.js.is-ready .hero__h1::before{transition-delay:1.15s}
.js.is-ready .hero__mk:last-of-type::before{transition-delay:1.5s}
/* PCは1本なので少し長めに引く */
@media(min-width:768px){
  .js.is-ready .hero__h1::before{transition-duration:1.25s}
}
.lead{color:var(--ink-2);font-size:1rem;line-height:2.05;margin-bottom:56px}
@media(min-width:768px){ .lead{margin-bottom:72px} }

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 34px;cursor:pointer;border:0;
  background:var(--sumi);color:#fff;
  font-family:var(--gothic);font-size:.94rem;font-weight:500;letter-spacing:.12em;
  box-shadow:0 2px 8px -3px rgba(56,53,46,.34);
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),
             transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.btn:hover{background:var(--sumi-h);transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(56,53,46,.46)}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px -3px rgba(56,53,46,.34)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:0 2px 10px -3px rgba(56,53,46,.24)}
.btn--ghost:hover{background:var(--paper);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(56,53,46,.34)}
.btn--wide{width:100%}
@media(min-width:600px){ .btn--wide{width:auto;min-width:280px} }
.btn i{display:inline-block;width:14px;height:1px;background:currentColor;position:relative;transition:transform var(--d-fast) var(--e-out)}
.btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover i{transform:translateX(4px)}

/* ============ オープニング：大きな文字 → ロゴへ ============ */
.intro{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg) var(--tex) center center / cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  animation:introOut 1.7s var(--e-in-out) 4.4s forwards;
}
.intro__stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding-inline:20px}

/* ① 大きな SIMPLOGO ＋ 小さな GRAPHIC DESIGNER */
.intro__word{
  display:flex;flex-direction:column;align-items:center;
  animation:wordOut 1.4s var(--e-out) 2.2s forwards;
}
.intro__letters{
  display:flex;font-family:var(--en);font-weight:600;color:var(--ink);
  font-size:clamp(1.55rem,8.6vw,6.4rem);line-height:1;
  letter-spacing:.16em;padding-left:.16em;
}
.intro__letters i{
  font-style:normal;display:block;
  opacity:0;transform:translateY(.4em);
  animation:letterIn 1.2s var(--e-out) forwards;
}
.intro__letters i:nth-child(1){animation-delay:0.12s}
.intro__letters i:nth-child(2){animation-delay:0.21s}
.intro__letters i:nth-child(3){animation-delay:0.3s}
.intro__letters i:nth-child(4){animation-delay:0.39s}
.intro__letters i:nth-child(5){animation-delay:0.48s}
.intro__letters i:nth-child(6){animation-delay:0.57s}
.intro__letters i:nth-child(7){animation-delay:0.66s}
.intro__letters i:nth-child(8){animation-delay:0.75s}
.intro__sub{
  font-family:var(--en);font-weight:600;color:var(--ink-3);
  font-size:clamp(.58rem,1.5vw,.86rem);letter-spacing:.5em;padding-left:.5em;
  margin-top:clamp(12px,1.8vw,22px);white-space:nowrap;
  opacity:0;animation:subIn 1s var(--e-out) 1s forwards;
}
/* ② ロゴへ変わる */
.intro__logo{
  position:absolute;left:50%;top:50%;
  width:min(248px,58vw);            /* ヒーローの .hero__mark と同じ */
  transform:translate(-50%,-50%) scale(1.16);
  opacity:0;
  animation:logoIn 1.6s var(--e-out) 2.56s forwards;
}
.intro__logo img{width:100%;height:auto}
@media(min-width:768px){ .intro__logo{width:300px} }
@keyframes letterIn{ to{opacity:1;transform:none} }
@keyframes subIn{ to{opacity:1} }
@keyframes wordOut{ to{opacity:0;transform:scale(.5)} }
@keyframes logoIn{ to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes introOut{ to{transform:translateY(-101%);visibility:hidden} }
body.is-locked{overflow:hidden}

/* ============ ヘッダー ============ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:1000;
}
/* スクロール時の背景。下へ向かってぼかしごと消えるので、帯にならず地に溶ける */
.hd::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(228,226,220,.88) 0%,
    rgba(228,226,220,.72) 52%,
    rgba(228,226,220,0) 100%);
  -webkit-backdrop-filter:saturate(115%) blur(10px);
  backdrop-filter:saturate(115%) blur(10px);
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 50%,transparent 100%);
  opacity:0;
  transition:opacity var(--d-mid) var(--e-out);
}
.hd.is-stuck::before{opacity:1}
.hd__in{
  max-width:1120px;margin-inline:auto;padding:0 24px;
  height:var(--hd-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
}
@media(min-width:768px){ .hd__in{padding:0 40px;height:80px} }
.hd__logo{
  font-family:var(--en);font-size:1.14rem;font-weight:600;
  letter-spacing:.26em;padding-left:.26em;line-height:1;
  display:flex;align-items:center;min-height:44px;
}
.hd__nav{display:none}
@media(min-width:1024px){
  .hd__nav{display:flex;align-items:center;gap:30px}
  .hd__nav a{
    position:relative;font-size:.88rem;letter-spacing:.08em;color:var(--ink-2);
    display:flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;
    transition:color var(--d-fast) var(--e-out);
  }
  .hd__nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:var(--accent);
    transform:scaleX(0);transform-origin:right;transition:transform var(--d-mid) var(--e-out);
  }
  .hd__nav a:hover{color:var(--ink)}
  .hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
  /* 当たり判定は44pxを保ち、見える箱だけ上下を詰める */
  .hd__nav a.hd__cta{
    position:relative;background:transparent;color:#fff;padding:0 26px;min-height:44px;
  }
  .hd__nav a.hd__cta::after{display:none}
  .hd__nav a.hd__cta::before{
    content:"";position:absolute;inset:5px 0;z-index:-1;
    background:var(--sumi);
    box-shadow:0 2px 8px -3px rgba(56,53,46,.3);
    transition:background var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
  }
  .hd__nav a.hd__cta:hover::before{background:var(--sumi-h);box-shadow:0 8px 20px -8px rgba(56,53,46,.42)}
}
.burger{
  width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:none;border:0;cursor:pointer;
}
@media(min-width:1024px){ .burger{display:none} }
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform var(--d-mid) var(--e-out),opacity var(--d-fast) var(--e-out)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ============ モバイルメニュー ============ */
.drawer[hidden]{display:none}
.drawer{
  position:fixed;inset:0;z-index:999;
  background:var(--bg) var(--tex) center center / cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--d-mid) var(--e-out);
}
.drawer.is-open{opacity:1}
.drawer__nav{display:flex;flex-direction:column;gap:4px;width:min(420px,84vw)}
.drawer__nav a{
  display:flex;align-items:center;gap:18px;min-height:58px;
  font-family:var(--mincho);font-weight:600;font-size:1.16rem;letter-spacing:.08em;
  border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(14px);
}
.drawer.is-open .drawer__nav a{opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.drawer.is-open .drawer__nav a:nth-child(1){transition-delay:.06s}
.drawer.is-open .drawer__nav a:nth-child(2){transition-delay:.11s}
.drawer.is-open .drawer__nav a:nth-child(3){transition-delay:.16s}
.drawer.is-open .drawer__nav a:nth-child(4){transition-delay:.21s}
.drawer.is-open .drawer__nav a:nth-child(5){transition-delay:.26s}
.drawer.is-open .drawer__nav a:nth-child(6){transition-delay:.31s}
.drawer.is-open .drawer__nav a:nth-child(7){transition-delay:.36s}
.drawer__nav em{font-family:var(--en);font-style:normal;font-size:.8rem;font-weight:600;letter-spacing:.2em;color:var(--ink-3)}
.drawer__cta{justify-content:center;background:var(--sumi);color:#fff;border-bottom:0!important;margin-top:20px;min-height:50px;font-size:1rem!important}

/* ============ ヒーロー ============ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--hd-h) + 40px) 24px 174px;position:relative;
}
@media(min-width:768px){ .hero{padding-bottom:164px} }
.hero__stage{display:flex;flex-direction:column;align-items:center;width:100%}
.hero__mark{width:min(248px,58vw);margin-bottom:26px;will-change:transform}
@media(min-width:768px){ .hero__mark{width:300px;margin-bottom:34px} }
.hero__h1{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.6rem,5.6vw,3rem);
  line-height:1.6;letter-spacing:.12em;
  margin-bottom:26px;
}
.hero__lead{color:var(--ink-2);font-size:1rem;line-height:2.1;letter-spacing:.05em;margin-bottom:44px}
.hero__btns{display:flex;flex-direction:column;gap:12px;width:min(320px,100%)}
@media(min-width:600px){ .hero__btns{display:grid;grid-template-columns:repeat(2,1fr);width:auto} }
.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  min-height:44px;justify-content:flex-end;
}
.hero__scroll span{font-family:var(--en);font-weight:600;font-size:.68rem;letter-spacing:.34em;color:var(--ink-3);padding-left:.34em}
.hero__scroll i{display:block;width:1px;height:46px;background:var(--line-2);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:1px;height:16px;background:var(--ink);animation:scrollDot 2.1s var(--e-in-out) infinite}
@keyframes scrollDot{0%{transform:translateY(-16px)}60%,100%{transform:translateY(46px)}}
.pc{display:none}
@media(min-width:768px){ .pc{display:inline} .sp{display:none} }

/* ============ 想い / About ============ */
.sec--about .about__body p{color:var(--ink-2);line-height:2.25;margin-bottom:26px}
.sign{margin-top:48px;display:flex;flex-direction:column;gap:4px}
.sign__en{font-family:var(--en);font-size:1.3rem;font-weight:600;letter-spacing:.24em;padding-left:.24em}
.sign__role{font-size:.82rem;letter-spacing:.16em;color:var(--ink-3)}
.skills{margin-top:44px;padding-top:28px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:12px 36px}
.skills li{display:flex;align-items:baseline;gap:10px;font-size:.88rem;color:var(--ink-3);letter-spacing:.06em}
.skills em{font-family:var(--en);font-style:normal;font-weight:600;font-size:1.1rem;color:var(--ink);letter-spacing:.05em}

/* ============ 実績 ============ */
.sec--stats{padding-block:72px}
@media(min-width:768px){ .sec--stats{padding-block:104px} }
.stats{display:grid;grid-template-columns:1fr;gap:36px;text-align:center}
@media(min-width:700px){ .stats{grid-template-columns:repeat(3,1fr);gap:24px} }
.stats li{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
@media(min-width:700px){
  .stats li+li::before{content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line-2)}
}
.stats__n{font-family:var(--en);font-size:clamp(2.8rem,9vw,3.8rem);font-weight:600;line-height:1.1;letter-spacing:.02em}
.stats__u{font-family:var(--en);font-weight:600;font-size:.86rem;letter-spacing:.2em;color:var(--ink-3);margin-top:4px}
.stats__l{font-size:.86rem;letter-spacing:.1em;color:var(--ink-2);margin-top:10px}
.stats__note{text-align:center;margin-top:44px;font-size:.88rem;line-height:2.05;color:var(--ink-2);letter-spacing:.06em}

/* ============ サービス ============ */
.svc{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){ .svc{grid-template-columns:1fr 1fr;gap:16px} }
.svc__i{
  position:relative;overflow:hidden;
  background:var(--paper-sheer);border:0;
  padding:28px 24px 26px;
  display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:0 1px 2px rgba(56,53,46,.05),0 10px 28px -20px rgba(56,53,46,.4);
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out);
}
@media(min-width:768px){ .svc__i{padding:34px 32px 30px} }
.svc__i::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out);
}
.svc__i:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(56,53,46,.05),0 30px 54px -30px rgba(56,53,46,.52)}
.svc__i:hover::before{transform:scaleX(1)}
.svc__ic{display:block;width:32px;height:32px;color:var(--accent);margin-bottom:14px}
.svc__ic svg{width:100%;height:100%;display:block}
.svc__no{
  position:absolute;top:28px;right:24px;
  font-family:var(--en);font-weight:600;font-size:.82rem;letter-spacing:.22em;color:var(--ink-3);
}
@media(min-width:768px){ .svc__no{top:34px;right:32px} }
.svc__t{font-family:var(--mincho);font-weight:600;font-size:1.16rem;letter-spacing:.06em;line-height:1.5;margin-bottom:10px}
.svc__d{color:var(--ink-2);font-size:.9rem;line-height:1.9;margin-bottom:18px}
.svc__a{
  margin-top:auto;width:100%;
  padding-top:16px;border-top:1px solid var(--line);
  display:inline-flex;align-items:center;gap:12px;min-height:48px;
  font-size:.85rem;letter-spacing:.1em;color:var(--ink);
  transition:gap var(--d-fast) var(--e-out);
}
.svc__a i{display:inline-block;width:26px;height:1px;background:var(--ink-3);transition:width var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out)}
.svc__a:hover{gap:16px}
.svc__a:hover i{width:34px;background:var(--accent)}
.svc__set{margin-top:32px;font-size:.92rem;color:var(--ink-2);letter-spacing:.05em;line-height:2}
.svc__set a{border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color var(--d-fast) var(--e-out)}
.svc__set a:hover{border-color:var(--ink)}

/* ============ 作品 ============ */
.works{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
@media(min-width:700px){ .works{grid-template-columns:1fr 1fr;gap:40px 28px} }
@media(min-width:1000px){ .works{grid-template-columns:repeat(3,1fr);gap:56px 32px} }
.works__i figure{margin:0}
.works__i picture{display:block;overflow:hidden;background:var(--paper);box-shadow:0 1px 2px rgba(56,53,46,.05),0 12px 30px -22px rgba(56,53,46,.45)}
.works__i img{width:100%;height:auto;transition:transform .7s var(--e-out)}
.works__i:hover img{transform:scale(1.04)}
.works__i figcaption{display:flex;flex-direction:column;gap:4px;margin-top:16px}
.works__i figcaption span{font-size:.88rem;letter-spacing:.1em;color:var(--ink)}
.works__i figcaption em{font-family:var(--en);font-style:normal;font-weight:600;font-size:.84rem;letter-spacing:.14em;color:var(--ink-3)}
.works__note{margin-top:56px;text-align:center;font-size:.92rem;line-height:2.05;color:var(--ink-2);letter-spacing:.06em}
.works__note a{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);
  transition:gap var(--d-fast) var(--e-out);
}
.works__note a i{display:inline-block;width:26px;height:1px;background:var(--ink-3);transition:width var(--d-fast) var(--e-out),background var(--d-fast) var(--e-out)}
.works__note a:hover{gap:16px}
.works__note a:hover i{width:34px;background:var(--accent)}

/* ============ お客様の声 ============ */
.voice{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:760px){ .voice{grid-template-columns:1fr 1fr;gap:24px} }
.voice__i{
  background:var(--paper-sheer);padding:32px 26px 28px;position:relative;border:0;
  box-shadow:0 1px 2px rgba(56,53,46,.05),0 10px 28px -20px rgba(56,53,46,.4);
  transition:transform var(--d-mid) var(--e-out),box-shadow var(--d-mid) var(--e-out);
}
@media(min-width:768px){ .voice__i{padding:40px 36px 32px} }
.voice__i:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(56,53,46,.05),0 30px 54px -30px rgba(56,53,46,.5)}
.voice__stars{display:flex;gap:5px;margin-bottom:18px}
.voice__stars svg{width:15px;height:15px;display:block;fill:var(--accent)}
.voice__i blockquote p{color:var(--ink-2);font-size:.94rem;line-height:2.1;letter-spacing:.03em}
.voice__n{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.86rem;letter-spacing:.08em;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.voice__n em{font-style:normal;font-size:.78rem;letter-spacing:.1em;color:var(--ink-3)}

/* ============ 制作の流れ ============ */
.flow{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:860px){ .flow{grid-template-columns:repeat(4,1fr);gap:28px} }
.flow__i{position:relative;padding:32px 0;border-top:1px solid var(--line-2)}
@media(min-width:860px){ .flow__i{padding:34px 0 0} }
.flow__i:last-child{border-bottom:1px solid var(--line-2)}
@media(min-width:860px){ .flow__i:last-child{border-bottom:0} }
.flow__no{font-family:var(--en);font-weight:600;font-size:.86rem;letter-spacing:.24em;color:var(--accent);display:block;margin-bottom:14px}
.flow__t{font-family:var(--mincho);font-weight:600;font-size:1.14rem;letter-spacing:.08em;margin-bottom:14px}
.flow__d{color:var(--ink-2);font-size:.92rem;line-height:2.05}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line-2)}
.faq__i{border-bottom:1px solid var(--line-2)}
.faq__i summary{
  list-style:none;cursor:pointer;position:relative;
  padding:26px 52px 26px 0;min-height:44px;
  font-family:var(--mincho);font-weight:600;font-size:1.05rem;letter-spacing:.06em;line-height:1.8;
  transition:color var(--d-fast) var(--e-out);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--accent)}
.faq__i summary::before,.faq__i summary::after{
  content:"";position:absolute;right:6px;top:50%;background:var(--ink-2);
  transition:transform var(--d-mid) var(--e-out),background var(--d-fast) var(--e-out);
}
.faq__i summary::before{width:16px;height:1px;transform:translateY(-50%)}
.faq__i summary::after{width:1px;height:16px;right:13.5px;transform:translateY(-50%)}
.faq__i[open] summary::after{transform:translateY(-50%) rotate(90deg)}
.faq__i[open] summary::before,.faq__i[open] summary::after{background:var(--accent)}
.faq__a{padding:0 8px 30px 0}
.faq__a p{color:var(--ink-2);font-size:.94rem;line-height:2.1}
.faq__i[open] .faq__a{animation:faqOpen .5s var(--e-out)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============ お問い合わせ ============ */
.form{display:flex;flex-direction:column;gap:26px}
.form__row{display:flex;flex-direction:column;gap:10px}
.form__row label{font-size:.88rem;letter-spacing:.1em;color:var(--ink);display:flex;align-items:center;gap:10px}
.req{font-size:.68rem;letter-spacing:.08em;color:var(--paper);background:var(--ink-2);padding:3px 8px;line-height:1.4}
.form input,.form textarea,.form select{
  width:100%;background:var(--paper-field);border:0;
  padding:15px 17px;min-height:54px;font-size:1rem;letter-spacing:.03em;line-height:1.8;
  border-radius:0;-webkit-appearance:none;appearance:none;
  box-shadow:0 1px 2px rgba(56,53,46,.06);
  transition:background var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.form textarea{resize:vertical;min-height:150px}
.form input::placeholder,.form textarea::placeholder{color:#8B877C}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;background:rgba(255,255,255,.86);box-shadow:0 0 0 2px var(--accent)}
.form input:focus-visible,.form textarea:focus-visible,.form select:focus-visible{outline:none}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{box-shadow:0 0 0 2px #9C3F37}
.sel{position:relative}
.sel::after{
  content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;
  border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.form__hint{font-size:.8rem;color:var(--ink-3);line-height:1.9;letter-spacing:.03em}
.form__err{font-size:.82rem;color:#8E3A32;letter-spacing:.03em}
.gotcha{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.form__submit{margin-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.form__status{font-size:.92rem;line-height:1.9;letter-spacing:.03em;color:var(--ink-2)}
.form__status.is-ok{color:#3C5B40}
.form__status.is-ng{color:#8E3A32}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.alt{margin-top:64px;padding-top:44px;border-top:1px solid var(--line-2);text-align:center}
.alt__t{font-family:var(--mincho);font-weight:600;font-size:1.14rem;letter-spacing:.08em;margin-bottom:14px}
.alt__d{font-size:.92rem;line-height:2.05;color:var(--ink-2);margin-bottom:26px}

/* ============ フッター ============ */
.ft{padding-block:80px 36px}   /* 面の切り替え線は置かない。余白で分ける */
.ft__in{display:flex;flex-direction:column;gap:44px;align-items:center;text-align:center}
@media(min-width:860px){ .ft__in{flex-direction:row;justify-content:space-between;align-items:center} }
/* ロゴと文言は同じ中心軸で揃える */
.ft__brand{display:flex;flex-direction:column;align-items:center}
.ft__logo{width:138px}
.ft__tag{font-family:var(--mincho);font-weight:600;font-size:.92rem;letter-spacing:.12em;padding-left:.12em;color:var(--ink-2);margin-top:8px;text-align:center}
.ft__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0;max-width:540px}
@media(min-width:1000px){ .ft__nav{flex-wrap:nowrap;justify-content:flex-end;max-width:none} }
.ft__nav a{
  position:relative;
  font-size:.86rem;letter-spacing:.08em;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;          /* 余白は当たり判定。見た目は文字だけ */
  transition:color var(--d-fast) var(--e-out);
}
/* 細い縦線で区切る。折り返すと行頭に線が出てしまうので、
   1行に収まる幅（1000px以上）でのみ表示する */
.ft__nav a::before{display:none}
@media(min-width:1000px){
  .ft__nav a::before{
    content:"";display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:11px;background:var(--line-2);
  }
  .ft__nav a:first-child::before{display:none}
}
.ft__nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:12px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-mid) var(--e-out);
}
.ft__nav a:hover{color:var(--ink)}
.ft__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.ft__c{margin-top:56px;padding-top:26px;border-top:1px solid var(--line);text-align:center}
.ft__c small{font-family:var(--en);font-weight:600;font-size:.78rem;letter-spacing:.2em;padding-left:.2em;color:var(--ink-3)}

/* カーソルを追う星屑（JSが生成。マウス環境のみ） */
.spark{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500;pointer-events:none}

/* ============ スクロール連動アニメーション ============ */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .95s var(--e-out),transform 1.05s var(--e-out);
  transition-delay:var(--dly,0s);
}
.js .hero__stage{opacity:0;transform:translateY(28px)}
.js.is-ready .hero__stage{opacity:1;transform:none;transition:opacity 1.1s var(--e-out),transform 1.2s var(--e-out)}

/* アンカー着地位置（ヘッダー分の逃がし） */
section[id]{scroll-margin-top:88px}

/* ============ 視覚過敏への配慮 ============ */
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .reveal,.js .hero__stage{opacity:1!important;transform:none!important}
  .js .h2.reveal::before,.js .hero__mk::before,.js .hero__h1::before{clip-path:inset(0 0 0 0)!important}
  .works__i:hover img,.voice__i:hover,.svc__i:hover{transform:none!important}
  .spark{display:none!important}
  .hero__scroll i::after{display:none}
}