:root{
  --paper:#f4f8fb;
  --card:#ffffff;
  --sky:#a9dbf6;
  --sky-soft:#d6eefb;
  --sky-deep:#7cc0e6;
  --mist:#e7f1f9;
  --pale:#dcebf5;
  --blue:#3f6f9c;
  --blue-deep:#28527a;
  --rule:#7ba9cc;
  --ink:#1e2a33;
  --ink-soft:#44515d;
  --line:#cddce8;
  --accent:#d9776a;        /* コーラル：手書き文字・番号・MORE矢印・リンクホバー */
  --accent-soft:#f3e2de;
  --cream:#f7f3ec;         /* テクスチャパネルの温かい下地 */
  --radius:16px;
  --maxw:1080px;
  --maxw-wide:1160px;
  --header-h:66px;
  --shadow:0 1px 2px rgba(27,58,87,.05), 0 8px 22px rgba(27,58,87,.06);
  --shadow-sm:0 1px 2px rgba(27,58,87,.04), 0 5px 14px rgba(27,58,87,.05);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:18px; line-height:1.85; font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:normal; word-break:normal; line-break:strict;
}
a{ color:inherit; }
img,svg{ max-width:100%; }
h1,h2,h3,h4,.mincho{ font-family:"Shippori Mincho","Zen Old Mincho",serif; font-weight:500; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* スクロールでふんわり表示（.reveal は JS が付与） */
.reveal{ opacity:0; transform:translateY(20px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---- 写真プレースホルダ（<img> を入れると自動で写真表示） ---- */
.photo{ position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(150deg,var(--cream),#eef5fb); border:1px solid var(--line); }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo:not(:has(img))::after{
  content:attr(data-label); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:11px; letter-spacing:.22em; text-align:center; padding:12px;
}

/* ============================================================
   エディトリアル意匠：共通モチーフ（フェーズ5）
   ============================================================ */

/* 右端の縦組み SNS レール */
.rail{ position:fixed; right:22px; top:0; height:100vh; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; pointer-events:none; }
.rail .rail-label{ writing-mode:vertical-rl; font-family:"EB Garamond",serif; letter-spacing:.34em;
  font-size:12px; color:var(--ink-soft); }
.rail .rail-line{ width:1px; height:52px; background:var(--line); }
.rail a{ pointer-events:auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); border-radius:50%; transition:color .15s, background .15s; }
.rail a:hover{ color:var(--accent); background:var(--accent-soft); }
.rail a svg{ width:17px; height:17px; }
@media (max-width:1180px){ .rail{ display:none; } }

/* セクション見出し（新） */
.sec-title{ margin:0 0 26px; }
.sec-title .sec-index{ display:flex; align-items:baseline; gap:12px; margin:0 0 10px; }
.sec-title .idx{ font-family:"EB Garamond",serif; font-size:38px; line-height:1; color:var(--accent); font-weight:500; }
.sec-title .lbl{ font-family:"EB Garamond",serif; font-style:italic; font-size:15px; letter-spacing:.14em; color:var(--ink-soft); }
.sec-title h2{ font-size:clamp(26px,3.6vw,38px); letter-spacing:.06em; line-height:1.5; margin:0;
  display:inline-block; padding-bottom:12px; position:relative; }
.sec-title h2::after{ content:""; position:absolute; left:0; bottom:0; width:46px; height:2px; background:var(--accent); }

/* 明朝の上品なアクセント一文（旧・手書きは廃止） */
.script{ font-family:"Zen Old Mincho","Shippori Mincho",serif; font-weight:500; color:var(--accent);
  font-size:clamp(15px,1.7vw,19px); line-height:1.9; letter-spacing:.14em; display:inline-flex; align-items:center; gap:12px; }
.script::before{ content:""; width:26px; height:1px; background:var(--accent); flex:none; }

/* 細い罫＋矢印のリンク */
.more{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  font-size:13px; letter-spacing:.22em; }
.more::before{ content:""; width:56px; height:1px; background:var(--ink); transition:width .2s; }
.more .ar{ color:var(--accent); font-size:18px; line-height:1; }
.more:hover{ color:var(--accent); }
.more:hover::before{ width:78px; background:var(--accent); }

/* CSSのみの「絵の具／コラージュ」風パネル */
.texture{ position:absolute; border-radius:4px; pointer-events:none;
  background:
    radial-gradient(60% 45% at 18% 22%, rgba(217,119,106,.13), transparent 70%),
    radial-gradient(55% 50% at 86% 28%, rgba(124,192,230,.16), transparent 72%),
    radial-gradient(70% 55% at 55% 92%, rgba(217,119,106,.07), transparent 70%),
    var(--cream); }

/* 写真の重ね（前面＋背面オフセット） */
.photo-stack{ position:relative; }
.photo-stack .texture{ inset:26px -26px -26px 26px; z-index:0; }
.photo-stack .p-back{ position:absolute; top:-26px; left:-26px; width:62%; aspect-ratio:4/5; z-index:1; transform:rotate(-2deg); }
.photo-stack .p-front{ position:relative; z-index:2; width:100%; aspect-ratio:4/5; }
@media (max-width:720px){
  .photo-stack .texture{ inset:16px -12px -16px 12px; }
  .photo-stack .p-back{ display:none; }
}

/* ---------- header（ミニマル＋全画面オーバーレイメニュー） ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,248,251,.96);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; }
.brand{ font-family:"EB Garamond",serif; font-size:19px; letter-spacing:.3em;
  text-decoration:none; flex:none; color:var(--ink); }
.nav-toggle{ width:40px; height:34px; border:0; background:none; cursor:pointer; position:relative; flex:none; }
.nav-toggle span{ position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink); transition:transform .25s, opacity .2s; }
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:17px; }
.nav-toggle span:nth-child(3){ top:23px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:60; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
  padding:80px 24px;
}
.nav-overlay.open{ opacity:1; visibility:visible; }
.nav-overlay a{ text-decoration:none; color:var(--ink); display:flex; align-items:baseline; gap:14px; padding:10px 0; width:min(340px,82vw); }
.nav-overlay a .no{ font-family:"EB Garamond",serif; font-size:14px; color:var(--accent); width:2.2em; }
.nav-overlay a .jp{ font-family:"Shippori Mincho",serif; font-size:clamp(22px,4vw,30px); letter-spacing:.08em; }
.nav-overlay a .en{ font-family:"EB Garamond",serif; font-style:italic; font-size:13px; letter-spacing:.12em; color:var(--ink-soft); }
.nav-overlay a:hover .jp{ color:var(--accent); }
.nav-overlay .nav-cta{ margin-top:22px; border:1px solid var(--accent); color:var(--accent); border-radius:999px;
  padding:10px 28px; font-size:13px; letter-spacing:.16em; }
.nav-overlay .nav-cta:hover{ background:var(--accent); color:#fff; }
.nav-overlay .nav-close{ position:absolute; top:18px; right:22px; width:44px; height:44px; border:0; background:none;
  font-size:26px; color:var(--ink); cursor:pointer; line-height:1; }

/* PC（タブレットより上）: ヘッダーにメニューを横並び。ハンバーガーは非表示 */
@media (min-width:1025px){
  .nav-toggle{ display:none; }
  .nav-overlay{
    position:static; inset:auto; z-index:auto; background:none; transition:none;
    flex-direction:row; align-items:center; justify-content:flex-end; gap:18px;
    opacity:1; visibility:visible; padding:0;
  }
  .nav-overlay .nav-close{ display:none; }
  .nav-overlay a{ width:auto; padding:0; display:inline-flex; align-items:center; gap:0; }
  .nav-overlay a .no,
  .nav-overlay a .en{ display:none; }
  .nav-overlay a .jp{ font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-size:13px;
    font-weight:500; letter-spacing:.06em; color:var(--ink-soft); }
  .nav-overlay a:hover .jp{ color:var(--accent); }
  .nav-overlay .nav-cta{ margin:0; padding:7px 16px; font-size:12px; letter-spacing:.1em; }
}

/* ---------- hero（エディトリアル：インセット写真＋重ね） ---------- */
.hero{ position:relative; overflow:hidden; padding:0;
  background:linear-gradient(180deg, var(--sky-soft) 0%, var(--paper) 60%); }
.hero .hero-inner{ position:relative; max-width:1080px; margin:0 auto; padding:48px 28px 40px; }
.hero .hero-figure{ position:relative; width:100%; max-width:960px; margin-left:auto; }
.hero .hero-figure .texture{ inset:-30px -30px auto -30px; height:calc(100% + 60px); z-index:0; }
.hero .hero-photo{ position:relative; z-index:1; width:100%; aspect-ratio:16/9; border-radius:2px; }
.hero .hero-photo img{ object-position:center bottom; }
.hero .hero-photo--sub{ position:absolute; right:-40px; bottom:-40px; width:210px; aspect-ratio:3/4; z-index:2;
  border:6px solid var(--paper); }
.hero .hero-quote{ position:absolute; left:0; bottom:34px; z-index:3; margin:0; max-width:min(560px,72vw);
  background:var(--paper); padding:22px 28px 22px 22px; }
.hero .hero-quote .q{ font-family:"Shippori Mincho",serif; font-size:clamp(20px,3.1vw,30px);
  line-height:1.75; letter-spacing:.04em; color:var(--ink); }
.hero .hero-quote .q::before{ content:"\201C"; color:var(--accent); font-size:1.6em; line-height:0;
  margin-right:.1em; vertical-align:-0.35em; }
.hero .hero-script{ display:flex; margin:0 0 20px; }
.hero .hero-meta{ max-width:none; margin:52px 0 0; }
.hero .hero-meta .role{ font-size:14px; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 16px; }
.hero .hero-meta .axes{ list-style:none; display:flex; flex-wrap:wrap; gap:0 10px; padding:0; margin:0 0 18px;
  font-family:"EB Garamond",serif; letter-spacing:.14em; font-size:14px; color:var(--ink); }
.hero .hero-meta .axes li{ display:flex; align-items:center; }
.hero .hero-meta .axes li + li::before{ content:"/"; color:var(--accent); margin-right:10px; }
.hero .hero-meta .lead{ font-size:15px; line-height:2; letter-spacing:.03em; color:var(--ink-soft); margin:0 0 10px; }
.hero .hero-meta .base{ font-size:15px; line-height:2; letter-spacing:.03em; color:var(--ink-soft); margin:0 0 24px; }
.hero .hero-meta .actions{ display:flex; gap:36px; flex-wrap:wrap; }
.hero .scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:44px auto 0;
  width:max-content; font-family:"EB Garamond",serif; font-style:italic; letter-spacing:.24em; font-size:11px;
  color:var(--ink-soft); text-decoration:none; }
.hero .scroll-cue::after{ content:""; width:1px; height:44px; background:var(--accent); }

@media (max-width:820px){
  .hero .hero-figure{ max-width:none; }
  .hero .hero-photo--sub{ display:none; }
  /* ブラウザ既定の figure 余白(左右40px)で写真が右にずれて見切れるのを解除
     ＝案Bの装飾パネルが写真をまっすぐ囲うようにする */
  .hero .hero-photo{ margin-inline:0; }
  /* 案A: 静的配置だと z-index が無効になり、装飾パネル(.texture)の背面に回って
     キャッチコピーが隠れてしまう。relative + z-index で前面に出す */
  .hero .hero-quote{ position:relative; inset:auto; z-index:1; max-width:none; margin:24px 0 0; padding:0; background:none; }
  /* 案B: 装飾パネルを写真の背面ぶんだけに縮め、写真下にできる余白帯をなくす。
     左右の inset で横幅が決まり、aspect-ratio で写真とほぼ同じ高さになる */
  .hero .hero-figure .texture{ inset:-14px -12px auto -12px; height:auto; aspect-ratio:16 / 9.6; }
  .hero .hero-meta{ margin-top:36px; }
}

/* ---------- section 共通 ---------- */
section{ padding:100px 0; scroll-margin-top:calc(var(--header-h) + 12px); }
section.wash{ background:linear-gradient(180deg, #eef5fb, var(--paper)); }
.sec-lead{ margin:-6px 0 44px; color:var(--ink-soft); font-size:16px; line-height:2; letter-spacing:.02em; }

/* 装飾用の帯写真（セクションを上品に見せるための写真置き場） */
.sec-photo{ position:relative; width:100%; aspect-ratio:16/6.2; margin:0 0 60px; border-radius:2px; overflow:hidden; background:var(--cream); }
.sec-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.sec-photo .script{ position:absolute; left:24px; bottom:20px; background:var(--paper); padding:6px 14px; }
@media (max-width:720px){ .sec-photo{ aspect-ratio:16/9; margin-bottom:44px; } }

/* ---------- about（エディトリアル） ---------- */
.about-layout{ display:grid; grid-template-columns:minmax(260px,42%) 1fr; gap:56px; align-items:start; margin:8px 0 60px; }
.about-visual{ position:relative; }
.about-portrait{ aspect-ratio:4/5; border-radius:2px; }
.about-portrait img{ object-position:center; }
.profile-cap{ margin:40px 0 0; font-family:"EB Garamond",serif; font-style:italic; font-size:15px;
  letter-spacing:.12em; color:var(--ink-soft); }
.about-visual .script{ display:flex; margin:16px 0 0; }
.facts{ margin:6px 0 0; }
.facts > div{ display:grid; grid-template-columns:88px 1fr; gap:20px; padding:16px 2px; border-bottom:1px solid var(--line); }
.facts > div:first-child{ border-top:1px solid var(--line); }
.facts dt{ font-family:"EB Garamond",serif; font-style:italic; font-size:13px; letter-spacing:.1em; color:var(--accent); }
.facts dd{ margin:0; font-size:15px; line-height:1.9; color:var(--ink); }
.about-strip{ aspect-ratio:16/6; margin:0 0 56px; }

.creed{ display:grid; gap:0; }
.creed article{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:28px 0; border-top:1px solid var(--line); }
.creed article:last-child{ border-bottom:1px solid var(--line); }
.creed .c-no{ font-family:"EB Garamond",serif; font-size:30px; line-height:1; color:var(--accent); }
.creed h3{ font-size:18px; margin:0 0 10px; }
.creed p{ margin:0; font-size:15px; color:var(--ink-soft); line-height:2; }
@media (max-width:720px){
  .creed article{ grid-template-columns:44px 1fr; gap:14px; }
  .creed .c-no{ font-size:24px; }
}

/* ---------- できること（左右交互のエディトリアル行） ---------- */
.svc{ display:grid; gap:0; }
.svc article{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:64px 0; border-top:1px solid var(--line); }
.svc article:last-child{ border-bottom:1px solid var(--line); }
.svc .card-img{ aspect-ratio:4/3; border:0; border-radius:2px; }
.svc article:nth-child(even) .card-img{ order:2; }
.svc .card-body .num{ font-family:"EB Garamond",serif; font-size:34px; line-height:1; color:var(--accent); display:block; margin:0 0 14px; }
.svc h3{ font-size:20px; margin:0 0 12px; }
.svc p.t{ font-size:15px; line-height:2; color:var(--ink-soft); margin:0 0 14px; }
.svc ul{ margin:0; padding-left:1.1em; font-size:14px; line-height:1.95; color:var(--ink-soft); }
.svc li{ margin-bottom:6px; }

/* ---------- career（1カラムのエディトリアル・リスト） ---------- */
.timeline{ display:grid; gap:0; }
.timeline article{ display:grid; grid-template-columns:56px 1fr; gap:24px; padding:40px 0; border-top:1px solid var(--line); }
.timeline article:last-child{ border-bottom:1px solid var(--line); }
.timeline .c-no{ font-family:"EB Garamond",serif; font-size:26px; line-height:1.2; color:var(--accent); }
.timeline h3{ font-size:18px; margin:0 0 10px; }
.timeline .meta{ font-size:13.5px; letter-spacing:.02em; color:var(--accent); margin:0 0 12px; }
.timeline ul{ margin:0; padding-left:1.1em; font-size:14px; line-height:1.95; color:var(--ink-soft); }
.timeline li{ margin-bottom:5px; }
.timeline article.lead-item{ display:block; border-top:0; padding:36px 32px 40px;
  background:linear-gradient(180deg,var(--cream),transparent); overflow:hidden; }
.timeline .lead-item h3{ font-size:19px; }
.timeline .np-cover{ display:block; width:min(300px,42%); height:auto; float:right;
  margin:0 0 16px 28px; border:1px solid var(--line); }
.more.np-btn{ margin-top:18px; }

/* ---------- works（大きな数字＋実績リスト） ---------- */
.figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; margin:0 0 8px; border-top:1px solid var(--line); }
.figs div{ padding:28px 0; border-bottom:1px solid var(--line); }
.figs .n{ font-family:"EB Garamond","Shippori Mincho",serif; font-size:clamp(26px,3.2vw,38px); line-height:1.1; color:var(--ink); letter-spacing:.01em; }
.figs .c{ font-size:12.5px; line-height:1.8; color:var(--ink-soft); margin-top:10px; }
.wl{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
.wl article{ padding:28px 0; border-top:1px solid var(--line); }
.wl h3{ font-size:16px; margin:0 0 10px; }
.wl p{ font-size:14px; line-height:1.95; color:var(--ink-soft); margin:0; }

/* ---------- skills（罫線区切りの列） ---------- */
.skills{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 40px; border-top:1px solid var(--line); }
.skills article{ padding:28px 0; border-bottom:1px solid var(--line); }
.skills h3{ font-size:14px; letter-spacing:.04em; margin:0 0 14px; color:var(--ink-soft); }
.chips{ display:flex; flex-wrap:wrap; gap:8px 16px; list-style:none; padding:0; margin:0; }
.chips li{ font-size:13.5px; color:var(--ink-soft); letter-spacing:.02em; }
.chips li::before{ content:"—"; color:var(--accent); margin-right:8px; }

/* ---------- remote（番号付きの行組み） ---------- */
.remote{ display:grid; gap:0; }
.remote article{ display:grid; grid-template-columns:56px 1fr; gap:24px; padding:32px 0; border-top:1px solid var(--line); }
.remote article:last-child{ border-bottom:1px solid var(--line); }
.remote .c-no{ font-family:"EB Garamond",serif; font-size:26px; line-height:1; color:var(--accent); }
.remote h3{ font-size:17px; margin:0 0 10px; }
.remote p{ margin:0; font-size:14.5px; line-height:2; color:var(--ink-soft); }

/* ---------- gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.gallery-grid .photo{ aspect-ratio:4/3; border:0; border-radius:0; box-shadow:none; cursor:pointer; }
.gallery-grid .photo img{ transition:opacity .15s ease; }
.gallery-grid .photo:hover img,
.gallery-grid .photo:focus-visible img{ opacity:.82; }
.gallery-grid .photo:focus-visible{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.gallery-note{ margin:14px 0 0; font-size:12.5px; color:var(--ink-soft); }

/* ---------- lightbox（ギャラリー拡大表示） ---------- */
.lightbox{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background:rgba(16,30,42,.9); padding:5vh 5vw; }
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; max-width:min(1100px,92vw); }
.lightbox img{ max-width:100%; max-height:80vh; object-fit:contain; background:#0b1620; }
.lightbox figcaption{ color:#e8eef5; font-size:14px; line-height:1.7; margin-top:14px; text-align:center; max-width:60ch; }
.lightbox .lb-count{ color:#9fb4c4; font-size:12px; letter-spacing:.12em; margin-top:8px; }
.lightbox button{ position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0;
  width:46px; height:46px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.lightbox button:hover{ background:rgba(255,255,255,.28); }
.lightbox .lb-close{ top:18px; right:18px; }
.lightbox .lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:18px; top:50%; transform:translateY(-50%); }
@media (max-width:560px){
  .lightbox{ padding:8vh 3vw; }
  .lightbox .lb-prev{ left:6px; } .lightbox .lb-next{ right:6px; }
}

/* ---------- contact（罫線ベースのミニマルなフォーム） ---------- */
#contact{ position:relative; overflow:hidden; }
#contact .cbg{ position:absolute; inset:0; background:center/cover no-repeat; opacity:.1; filter:blur(2px); pointer-events:none; }
#contact .wrap{ position:relative; }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.contact-card{ background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
.contact-card h3{ font-size:14px; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 12px; }
.contact-card .line{ display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.contact-card .line:last-child{ border-bottom:0; }
.contact-card .line span:first-child{ font-family:"EB Garamond",serif; font-style:italic; color:var(--accent); font-size:14px; letter-spacing:.06em; }
.form-row{ display:grid; gap:8px; margin:0 0 20px; }
.form-row label{ font-size:13px; letter-spacing:.06em; color:var(--ink-soft); }
.form-row input,.form-row textarea{ border:0; border-bottom:1px solid var(--line); background:none; border-radius:0;
  padding:8px 2px; font:inherit; font-size:15px; width:100%; color:var(--ink); }
.form-row input:focus,.form-row textarea:focus{ outline:0; border-bottom-color:var(--accent); }
.form-row textarea{ min-height:96px; resize:vertical; }
.form-btn{ display:inline-flex; align-items:center; gap:14px; background:none; color:var(--ink); border:0; padding:6px 0;
  font:inherit; font-size:13px; letter-spacing:.22em; cursor:not-allowed; opacity:.85; }
.form-btn::before{ content:""; width:56px; height:1px; background:var(--ink); }
.note{ margin-top:18px; font-size:12.5px; line-height:1.9; color:var(--ink-soft); }

/* Google フォーム埋め込み */
/* お問い合わせフォーム
   Google フォーム(embedded)は iframe 幅に中身が追従せず、狭い画面では
   横に見切れる／内部スクロールが出る。→ PC は埋め込み、
   スマホ・小型タブレットは Google の可変フォームを別タブで開くボタンに切替。 */
.form-embed{ max-width:640px; }
.form-embed .form-frame{ width:100%; max-width:100%; min-width:0; border:0; display:block; height:1300px; background:var(--cream); }
.form-embed .form-note{ display:none; margin:0; font-size:14px; line-height:1.9; color:var(--ink-soft); }
.form-embed .form-open{ display:inline-flex; margin-top:16px; }

@media (max-width:700px){
  .form-embed{ max-width:none; padding:30px 22px; border:1px solid var(--line); background:var(--cream); }
  .form-embed .form-frame{ display:none; }
  .form-embed .form-note{ display:block; }
  .form-embed .form-open{ margin-top:14px; }
}

/* ---------- footer（ミニマル・エディトリアル） ---------- */
.site-footer{ background:var(--paper); color:var(--ink-soft); border-top:1px solid var(--line); padding:56px 0; }
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; }
.site-footer .brand-f{ font-family:"EB Garamond",serif; letter-spacing:.42em; text-transform:uppercase; font-size:15px; color:var(--ink); }
.site-footer .foot-nav{ display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.08em; }
.site-footer .foot-meta{ font-family:"EB Garamond",serif; font-style:italic; letter-spacing:.1em; font-size:13px; }
.site-footer a{ text-decoration:none; color:var(--ink-soft); }
.site-footer a:hover{ color:var(--accent); }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  section{ padding:76px 0; }
  .about-layout{ grid-template-columns:1fr; gap:32px; }
  .about-visual{ max-width:420px; }
  .svc article{ grid-template-columns:1fr; gap:24px; padding:48px 0; }
  .svc article:nth-child(even) .card-img{ order:0; }
  .figs{ grid-template-columns:1fr 1fr; gap:0 28px; }
  .wl{ grid-template-columns:1fr; gap:0; }
  .skills{ grid-template-columns:1fr; gap:0; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:600px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .timeline article{ grid-template-columns:40px 1fr; gap:14px; padding:32px 0; }
  .remote article{ grid-template-columns:40px 1fr; gap:14px; }
  .timeline .c-no,.remote .c-no{ font-size:20px; }
  .timeline .np-cover{ float:none; width:100%; margin:0 0 14px; }
}
@media (max-width:520px){
  body{ font-size:17px; }
  section{ padding:60px 0; }
  .figs{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .wrap{ padding:0 18px; }
}