/*
Theme Name: Meguriwa support
Theme URI: https://meguriwasupport.com/
Author: MEGURIWA / くろーどん
Description: meguriwasupport.com オリジナルテーマ v2「白基調・タイポ主役」。Studio版の凛とした白の空気を正統進化——縦書き明朝ヒーロー・ナンバリングエディトリアル・実写主体。表示ロジックのみ（運用は mu-plugins/meguriwa-ops.php）。
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary (MEGURIWA)
Text Domain: meguriwa-support
*/

/* =========================================================================
 * 1. デザイントークン
 *    白基調＝寒色オフホワイト（生成り禁止ルール準拠）／タイポ3階層／朱は極少量
 * ========================================================================= */
:root {
  /* 色 */
  --c-paper:    #F8F9F8;   /* 地色（寒色オフホワイト・純白回避） */
  --c-white:    #FFFFFF;   /* カード・浮き面 */
  --c-ink:      #1A1C1D;   /* 主見出し・墨 */
  --c-text:     #35393B;   /* 本文 */
  --c-sub:      #6E7477;   /* サブテキスト */
  --c-weak:     #9AA0A3;   /* 弱テキスト・注記 */
  --c-line:     #DFE2E2;   /* 罫線 */
  --c-line-dk:  #C6CACA;   /* 濃罫線 */
  --c-accent:   #C0392B;   /* 朱（Studio踏襲の赤を調律）— 極少量のみ */
  --c-footer:   #1D2021;   /* フッター墨面 */
  --c-footer-tx:#B9BEC0;

  /* 書体（3階層＝eyebrow英・見出し明朝・本文明朝／UI=Lato） */
  --f-jp:       'Shippori Mincho', 'Noto Serif JP', serif;
  --f-caslon:   'Libre Caslon Display', serif;
  --f-garamond: 'EB Garamond', serif;
  --f-script:   'Reenie Beanie', cursive;   /* STUDIO原本の手書き英字 */
  --f-ui:       'Lato', sans-serif;

  /* タイポスケール */
  --fz-11: 11px; --fz-12: 12px; --fz-13: 13px; --fz-14: 14px;
  --fz-15: 15px; --fz-16: 16px; --fz-18: 18px; --fz-22: 22px;
  --fz-28: 28px; --fz-34: 34px;

  /* レイアウト */
  --maxw: 1160px;
  --maxw-narrow: 720px;
  --gutter: 28px;
  --header-h: 84px;

  /* 余白スケール */
  --s-1: 8px; --s-2: 16px; --s-3: 28px; --s-4: 44px;
  --s-5: 72px; --s-6: 110px; --s-7: 150px;

  /* モーション */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
 * 2. リセット / ベース
 * ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; } /* sticky/fixedを壊さない横はみ出し止め */
body {
  background: var(--c-paper);
  color: var(--c-text);
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: var(--fz-15);
  line-height: 2.15;
  letter-spacing: .05em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--c-ink); color: var(--c-paper); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* =========================================================================
 * 3. リビール（JS無効・失敗時も必ず見える設計＝html.js ゲート）
 * ========================================================================= */
html.js .fade-in { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .fade-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
 * 4. ヘッダー
 * ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.site-header.is-solid {
  background: rgba(248,249,248,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--c-line);
  height: 64px;
}
.site-header .inner {
  width: 100%; max-width: none; padding: 0 clamp(20px, 3.4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.site-logo {
  font-family: var(--f-caslon);
  font-size: 17px; letter-spacing: .28em; color: var(--c-ink); white-space: nowrap;
}
.site-logo span + span { margin-left: .45em; }
.gnav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.gnav a {
  position: relative;
  font-family: var(--f-ui); font-weight: 700;
  font-size: var(--fz-11); letter-spacing: .22em;
  color: var(--c-ink); padding: 6px 0;
}
.gnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--c-ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.gnav a:hover::after, .gnav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; }

/* モバイルヘッダー（STUDIO原本＝静的・ロゴ中央＋ナビ横並び・ハンバーガー無し） */
@media (max-width: 820px) {
  .site-header {
    position: static; height: auto;
    background: var(--c-paper);
    padding: 40px 0 26px;
  }
  .site-header.is-solid { background: var(--c-paper); box-shadow: none; height: auto; }
  .site-header .inner { flex-direction: column; gap: 26px; }
  .site-logo {
    font-size: 21px; letter-spacing: .42em; text-align: center;
    white-space: normal; line-height: 1.9;
  }
  .site-logo span { display: block; }
  .site-logo span + span { margin-left: 0; }
  .nav-toggle { display: none; }
  .gnav { gap: 22px; flex-wrap: wrap; justify-content: center; }
  .gnav a { font-family: var(--f-garamond); font-weight: 400; font-size: var(--fz-13); letter-spacing: .16em; }
  /* 固定ヘッダー前提の上余白を解除 */
  .hero2, .hero { padding-top: 0; }
  .crumb { padding-top: 30px; }
  .page-hero { padding-top: clamp(28px, 5vh, 56px); }
}

/* =========================================================================
 * 5. ヒーロー（タイポ主役＝縦書き明朝 × 森 × ゴーストEN）
 * ========================================================================= */
.hero {
  position: relative;
  min-height: clamp(560px, 94vh, 900px);
  display: grid; align-items: stretch;
  overflow: clip;
  padding-top: var(--header-h);
}
.hero .hero-photo {
  position: absolute; top: 0; right: 0; bottom: clamp(48px, 8vh, 90px);
  width: min(56vw, 760px);
  background-size: cover; background-position: center;
}
.hero .hero-photo::after { /* 紙面に沈める薄膜 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(248,249,248,.28) 0%, rgba(248,249,248,0) 38%);
}
.hero .inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; min-height: inherit;
}
.hero h1 {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-jp); font-weight: 600;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 2.3; letter-spacing: .22em;
  color: var(--c-ink);
  margin-left: clamp(0px, 2vw, 24px);
}
.hero .hero-en {
  position: absolute; left: clamp(12px, 2vw, 40px); bottom: clamp(28px, 5vh, 60px); z-index: 2;
  font-family: var(--f-caslon);
  font-size: clamp(44px, 8.4vw, 118px);
  letter-spacing: .06em; line-height: 1; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line-dk);
  user-select: none; pointer-events: none;
}
.hero .hero-scroll {
  position: absolute; right: clamp(16px, 2.4vw, 40px); bottom: 0; z-index: 3;
  font-family: var(--f-garamond); font-size: var(--fz-12); letter-spacing: .3em;
  color: var(--c-sub);
  writing-mode: vertical-rl; padding-bottom: 76px;
}
.hero .hero-scroll::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 64px; background: var(--c-ink);
  animation: scrollcue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scrollcue { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

@media (max-width: 820px) {
  .hero { min-height: 0; padding-top: var(--header-h); }
  .hero .hero-photo { position: relative; width: 100%; right: auto; bottom: auto; aspect-ratio: 4/5; max-height: 64vh; }
  .hero .hero-photo::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(20,24,25,.42) 0%, rgba(20,24,25,.06) 55%);
  }
  .hero .inner { position: absolute; inset: var(--header-h) 0 0 0; align-items: flex-start; padding-top: 6vh; }
  .hero h1 { height: auto; max-height: 52vh; font-size: clamp(22px, 6vw, 30px); line-height: 2.1;
    color: #fff; text-shadow: 0 1px 22px rgba(0,0,0,.4); margin-left: 4px; }
  .hero .hero-en { position: relative; left: 0; bottom: 0; margin: 18px var(--gutter) 0; -webkit-text-stroke-color: var(--c-line-dk); }
  .hero .hero-scroll { display: none; }
}

/* =========================================================================
 * 6. セクション共通（ナンバリング・エディトリアル見出し）
 * ========================================================================= */
.section { padding: var(--s-7) 0; }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: var(--s-5); }
.section-head .en {
  display: block;
  font-family: var(--f-caslon);
  font-size: var(--fz-13); letter-spacing: .34em; text-transform: uppercase;
  color: var(--c-sub);
}
.section-head .en::before {
  content: attr(data-no) " — ";
  font-family: var(--f-garamond); letter-spacing: .18em; color: var(--c-weak);
}
.section-head .en[data-no=""]::before { content: none; }
.section-head .ja {
  display: block; margin-top: 14px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: clamp(24px, 3vw, var(--fz-34));
  letter-spacing: .14em; line-height: 1.6; color: var(--c-ink);
}
.section-head.center { text-align: center; }
.section-head .rule { display: block; width: 56px; height: 1px; background: var(--c-ink); margin-top: 26px; }
.section-head.center .rule { margin-left: auto; margin-right: auto; }

/* 本文ブロック */
.body p + p { margin-top: 1.9em; }
.lead-en {
  margin-top: var(--s-4);
  font-family: var(--f-script);
  font-size: 21px; letter-spacing: .06em; line-height: 1.9;
  color: var(--c-text); text-align: center;
}

/* ボタン（STUDIO原本＝箱型） */
.btn-line {
  display: inline-block;
  font-family: var(--f-jp); font-weight: 500;
  font-size: var(--fz-14); letter-spacing: .3em;
  color: var(--c-ink); padding: 16px 52px 16px calc(52px + .3em);
  border: 1px solid var(--c-ink);
  background: transparent;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn-line:hover { background: var(--c-ink); color: var(--c-paper); }
.btn {
  display: inline-block;
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-13); letter-spacing: .26em;
  color: var(--c-paper); background: var(--c-ink);
  padding: 20px 54px;
  transition: opacity .35s var(--ease), letter-spacing .35s var(--ease);
}
.btn:hover { opacity: .82; letter-spacing: .32em; }
.loadmore-wrap { text-align: center; margin-top: var(--s-5); }

/* パンくず */
.crumb {
  padding: calc(var(--header-h) + 26px) 0 0;
  font-family: var(--f-garamond);
  font-size: var(--fz-12); letter-spacing: .14em; color: var(--c-weak);
}
.crumb a { color: var(--c-sub); }
.crumb a:hover { color: var(--c-ink); }
.crumb span { margin: 0 .7em; }

/* =========================================================================
 * 7. トップ：About 抜粋
 * ========================================================================= */
.intro { padding-top: var(--s-7); }
.intro .body { text-align: center; }
.intro .body p + p { margin-top: 2.1em; }
.intro .btn-wrap { text-align: center; margin-top: var(--s-4); }
@media (max-width: 640px) { .intro .body { text-align: left; } }

/* =========================================================================
 * 8. サービス（ナンバリング・交互エディトリアル行）
 * ========================================================================= */
.service-list { display: grid; gap: var(--s-6); }
.service {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(24px, 4vw, 64px); align-items: center;
  position: relative;
}
.service .service-photo {
  grid-column: 1 / span 6;
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
}
.service .service-photo.is-tall { aspect-ratio: 3 / 4; max-height: 560px; }
.service .service-body { grid-column: 7 / span 6; padding: var(--s-3) 0; }
.service:nth-child(even) .service-photo { grid-column: 7 / span 6; order: 2; }
.service:nth-child(even) .service-body  { grid-column: 1 / span 6; order: 1; }
.service .no {
  font-family: var(--f-garamond); font-size: var(--fz-13); letter-spacing: .2em;
  color: var(--c-weak); display: block; margin-bottom: 18px;
}
.service .no::after { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--c-line-dk); vertical-align: middle; margin-left: 14px; }
.service .en {
  display: block; font-family: var(--f-caslon);
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .12em; color: var(--c-ink); line-height: 1.4;
}
.service .ja {
  display: block; margin-top: 6px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-14); letter-spacing: .22em; color: var(--c-sub);
}
.service p { margin-top: 22px; font-size: var(--fz-14); line-height: 2.2; }
.service-tags { display: flex; flex-wrap: wrap; gap: 10px 10px; margin-top: 24px; }
.service-tags span {
  font-family: var(--f-jp); font-size: var(--fz-11); letter-spacing: .14em;
  color: var(--c-sub);
  border: 1px solid var(--c-line-dk); border-radius: 999px;
  padding: 5px 16px;
}
@media (max-width: 820px) {
  .service, .service:nth-child(even) { display: block; }
  .service .service-photo { aspect-ratio: 3 / 2; margin-bottom: 6px; }
  .service .service-photo.is-tall { aspect-ratio: 4 / 5; }
  .service .service-body { padding: var(--s-3) 0 0; }
  .service-list { gap: var(--s-5); }
}

/* =========================================================================
 * 9. NEWS & WORKS カード
 * ========================================================================= */
.nw-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) clamp(20px, 3vw, 40px);
}
.nw-card { display: block; }
.nw-card .thumb {
  aspect-ratio: 4 / 3; overflow: hidden; background: #E9EBEA;
  margin-bottom: 20px;
}
.nw-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .6s;
}
.nw-card:hover .thumb img { transform: scale(1.045); }
.nw-meta { display: flex; align-items: center; gap: 16px; }
.nw-date {
  font-family: var(--f-garamond); font-size: var(--fz-13); letter-spacing: .14em; color: var(--c-weak);
}
.nw-cats { display: inline-flex; gap: 8px; }
.nw-cats span {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-sub);
  border-bottom: 1px solid var(--c-line-dk); padding-bottom: 2px;
}
.nw-title {
  margin-top: 12px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-15); letter-spacing: .08em; line-height: 1.9; color: var(--c-ink);
  transition: opacity .3s;
}
.nw-card:hover .nw-title { opacity: .62; }
.nw-excerpt { display: none; } /* 一覧は目次に徹する（声のトーン＝編集） */
.nw-author { margin-top: 8px; font-size: var(--fz-11); letter-spacing: .1em; color: var(--c-weak); }

/* 一覧ページ：先頭1枚を大きく（編集的な「入口」） */
.nw-list.has-featured .nw-card:first-child { grid-column: span 2; }
.nw-list.has-featured .nw-card:first-child .thumb { aspect-ratio: 16 / 9; }
.nw-list.has-featured .nw-card:first-child .nw-title { font-size: var(--fz-18); }

@media (max-width: 820px) {
  .nw-list { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) 18px; }
  .nw-list.has-featured .nw-card:first-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .nw-list { grid-template-columns: 1fr; }
  .nw-list.has-featured .nw-card:first-child { grid-column: auto; }
}

/* フィルタタブ（下線型＝今いる場所の表示） */
.nw-filter {
  display: flex; justify-content: center; gap: clamp(28px, 5vw, 64px);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.nw-filter a {
  font-family: var(--f-caslon); font-size: var(--fz-14); letter-spacing: .22em;
  color: var(--c-weak); padding: 6px 2px 18px; position: relative;
  transition: color .3s;
}
.nw-filter a:hover { color: var(--c-ink); }
.nw-filter a[aria-current="page"] { color: var(--c-ink); }
.nw-filter a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--c-ink);
}

/* ページネーション */
.pagination, .nav-links { display: flex; justify-content: center; gap: 8px; font-family: var(--f-garamond); letter-spacing: .1em; }
.nav-links .page-numbers {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-sub); border: 1px solid transparent; font-size: var(--fz-14);
}
.nav-links .page-numbers.current { border-color: var(--c-ink); color: var(--c-ink); }
.nav-links a.page-numbers:hover { border-color: var(--c-line-dk); color: var(--c-ink); }

/* =========================================================================
 * 10. 共通CTA（静けさのある結び）
 * ========================================================================= */
.softcta { padding: var(--s-7) 0; }
.softcta .wrap {
  max-width: 860px; text-align: center;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  padding-top: var(--s-6); padding-bottom: var(--s-6);
}
.softcta .en {
  display: block; font-family: var(--f-caslon);
  font-size: var(--fz-13); letter-spacing: .34em; text-transform: uppercase; color: var(--c-sub);
  margin-bottom: 26px;
}
.softcta .cta-title {
  font-family: var(--f-jp); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .18em; color: var(--c-ink); line-height: 1.9;
}
.softcta p.sub { margin-top: 22px; font-size: var(--fz-14); color: var(--c-sub); }
.softcta .btn { margin-top: var(--s-4); }

/* =========================================================================
 * 11. フッター（STUDIO原本＝グレー面）
 * ========================================================================= */
.site-footer {
  background: #C6CAC9; color: #4B5150;
  padding: var(--s-6) 0 var(--s-3);
}
.footer-logo {
  font-family: var(--f-caslon); letter-spacing: .42em; color: var(--c-ink); font-size: var(--fz-18);
  line-height: 1.9;
}
.footer-mission {
  max-width: 560px; margin-top: 22px;
  font-family: var(--f-ui); font-weight: 400;
  font-size: var(--fz-13); line-height: 2.1; letter-spacing: .03em;
  color: #5C6362;
}
.footer-sns { display: flex; gap: 22px; margin-top: 24px; }
.footer-sns a { color: #3E4443; transition: opacity .3s; }
.footer-sns a:hover { opacity: .6; }
.footer-sns svg { width: 19px; height: 19px; }
.footer-sns svg [fill]:not([fill="none"]), .footer-sns svg path:not([stroke]) { fill: currentColor; }
.footer-grid {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: var(--s-5); }
.footer-nav a {
  font-family: var(--f-garamond);
  font-size: var(--fz-15); letter-spacing: .1em;
  color: #3E4443; transition: opacity .3s;
}
.footer-nav a:hover { opacity: .6; }
.footer-copy {
  margin-top: var(--s-5); text-align: center;
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .06em; color: #6E7473;
}
@media (max-width: 640px) {
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-nav { flex-direction: column; gap: 18px; }
}

/* =========================================================================
 * 12. 下層ページ共通ヒーロー
 * ========================================================================= */
.page-hero {
  padding: calc(var(--header-h) + clamp(48px, 9vh, 110px)) var(--gutter) clamp(48px, 8vh, 96px);
  text-align: center;
}
.crumb + .page-hero, .wrap + .page-hero { padding-top: clamp(40px, 7vh, 84px); }
.page-hero .en {
  display: block; font-family: var(--f-caslon);
  font-size: clamp(34px, 5.4vw, 58px); letter-spacing: .1em; color: var(--c-ink); line-height: 1.2;
}
.page-hero .ja {
  display: block; margin-top: 18px;
  font-family: var(--f-jp); font-weight: 500;
  font-size: var(--fz-13); letter-spacing: .34em; color: var(--c-sub);
}
.page-hero::after {
  content: ""; display: block; width: 1px; height: clamp(36px, 6vh, 64px);
  background: var(--c-ink); margin: clamp(28px, 5vh, 48px) auto 0;
}
.page-hero + .section, .page-hero + div.section { padding-top: clamp(28px, 5vh, 56px); }

/* 記事・固定ページ本文 */
.page-body { max-width: var(--maxw-narrow); }
.intro-lead { text-align: center; font-size: var(--fz-15); }
.page-body h2 {
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-18); letter-spacing: .12em; color: var(--c-ink);
  margin: var(--s-5) 0 var(--s-2); line-height: 1.8;
}
.page-body p + p { margin-top: 1.6em; }

/* =========================================================================
 * 13. ABOUT
 * ========================================================================= */
.team {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) clamp(28px, 5vw, 72px);
  max-width: 980px; margin: 0 auto;
}
.member { text-align: left; }
.member .photo {
  aspect-ratio: 4 / 5; background-size: cover; background-position: center top;
  margin-bottom: 26px;
}
.member.no-photo .photo-alt {
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line);
  margin-bottom: 26px;
}
.member.no-photo .photo-alt span {
  font-family: var(--f-caslon); font-size: 44px; letter-spacing: .14em; color: var(--c-weak);
}
.member .name { font-family: var(--f-caslon); font-size: var(--fz-18); letter-spacing: .1em; color: var(--c-ink); }
.member .role {
  font-family: var(--f-ui); font-weight: 700; font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-accent); margin-top: 8px;
}
.member .bio { margin-top: 16px; font-size: var(--fz-13); line-height: 2.2; color: var(--c-text); }
.team-note { text-align: center; color: var(--c-sub); font-size: var(--fz-13); margin-top: var(--s-5); line-height: 2.3; }
@media (max-width: 720px) { .team { grid-template-columns: 1fr; } }

/* プラン（つかいかた） */
.plan-lead { text-align: center; max-width: var(--maxw-narrow); margin: 0 auto var(--s-5); }
.plan-lead .note { font-size: var(--fz-12); color: var(--c-weak); margin-top: 14px; }
.plan-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.plan {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -22px rgba(26,28,29,.18); }
.plan h3 {
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-18); letter-spacing: .14em; color: var(--c-ink); line-height: 1.8;
}
.plan .desc { margin-top: 12px; font-size: var(--fz-13); color: var(--c-sub); }
.plan ol { counter-reset: step; margin-top: 22px; display: grid; gap: 10px; }
.plan ol li {
  counter-increment: step;
  font-size: var(--fz-13); letter-spacing: .08em; color: var(--c-text);
  display: flex; align-items: baseline; gap: 14px;
}
.plan ol li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-garamond); font-size: var(--fz-12); letter-spacing: .1em; color: var(--c-weak);
}
.plan .opt { margin-top: 16px; font-size: var(--fz-11); color: var(--c-weak); }
.plan .price {
  margin-top: auto; padding-top: 26px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-22); letter-spacing: .1em; color: var(--c-ink);
  border-top: 1px solid var(--c-line); margin-top: 26px;
}
.plan .price small { font-size: var(--fz-12); font-weight: 500; letter-spacing: .16em; color: var(--c-sub); margin-right: 10px; }
.plan .note { margin-top: 8px; font-size: var(--fz-11); color: var(--c-weak); }
@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } }

/* 料金表 */
.price-note { text-align: center; color: var(--c-sub); font-size: var(--fz-13); margin-bottom: var(--s-4); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table tr { border-bottom: 1px solid var(--c-line); }
.price-table tr:first-child { border-top: 1px solid var(--c-line); }
.price-table td { padding: 24px 8px; vertical-align: top; }
.price-table .item {
  width: 11em; font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-14); letter-spacing: .1em; color: var(--c-ink);
}
.price-table .price {
  width: 10em; font-family: var(--f-garamond);
  font-size: var(--fz-14); letter-spacing: .06em; color: var(--c-ink); white-space: nowrap;
}
.price-table .desc { font-size: var(--fz-12); color: var(--c-sub); line-height: 2; }
@media (max-width: 640px) {
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table td { padding: 4px 0; }
  .price-table .item { padding-top: 20px; }
  .price-table .desc { padding-bottom: 20px; }
}

/* 会社情報 */
.company-info { max-width: 760px; margin: 0 auto; }
.company-info dl { display: grid; grid-template-columns: 9em 1fr; row-gap: 18px; }
.company-info dt {
  font-family: var(--f-jp); font-weight: 600; font-size: var(--fz-13); letter-spacing: .2em; color: var(--c-ink);
  padding: 4px 0;
}
.company-info dd { font-size: var(--fz-13); color: var(--c-text); padding: 4px 0; }
.company-info dd ul { display: grid; gap: 6px; }
@media (max-width: 560px) { .company-info dl { grid-template-columns: 1fr; row-gap: 4px; } .company-info dt { margin-top: 14px; } }

/* =========================================================================
 * 14. 記事詳細
 * ========================================================================= */
.single-head { text-align: center; max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }
.single-head .nw-cats { justify-content: center; }
.single-head .date { display: block; font-family: var(--f-garamond); font-size: var(--fz-13); letter-spacing: .16em; color: var(--c-weak); margin-top: 16px; }
.single-head h1 {
  margin-top: 20px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: clamp(20px, 3vw, var(--fz-28)); letter-spacing: .1em; line-height: 2; color: var(--c-ink);
}
.single-eyecatch { max-width: 980px; margin: var(--s-5) auto 0; padding: 0 var(--gutter); }
.single-eyecatch img { width: 100%; }
.art-body { max-width: var(--maxw-narrow); margin: var(--s-5) auto 0; }
.art-body p { margin: 1.8em 0; }
.art-body h2 { font-family: var(--f-jp); font-weight: 600; font-size: var(--fz-18); letter-spacing: .12em; color: var(--c-ink); margin: 2.4em 0 1em; }
.art-body img { margin: var(--s-4) auto; }
.art-body a { border-bottom: 1px solid var(--c-line-dk); transition: border-color .3s; }
.art-body a:hover { border-color: var(--c-ink); }
.single-meta { max-width: var(--maxw-narrow); margin: var(--s-4) auto 0; font-size: var(--fz-11); letter-spacing: .12em; color: var(--c-weak); }
.single-nav {
  max-width: var(--maxw-narrow); margin: var(--s-5) auto 0;
  display: flex; justify-content: space-between; gap: var(--s-3);
  border-top: 1px solid var(--c-line); padding-top: var(--s-3);
  font-family: var(--f-garamond); font-size: var(--fz-13); letter-spacing: .1em;
}
.single-nav a { color: var(--c-sub); }
.single-nav a:hover { color: var(--c-ink); }

/* =========================================================================
 * 15. CONTACT / HubSpot フォーム調律（V2 embed 上書き）
 * ========================================================================= */
.hs-form-frame { max-width: 640px; margin: var(--s-5) auto 0; }
.contact-form-title {
  text-align: center; font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-16); letter-spacing: .26em; color: var(--c-ink);
  margin-top: var(--s-5);
}
.hs-form-embed .hs-form-field { margin-bottom: 26px !important; }
.hs-form-embed label {
  font-family: var(--f-jp) !important; font-weight: 600 !important;
  font-size: var(--fz-12) !important; letter-spacing: .16em !important;
  color: var(--c-ink) !important; margin-bottom: 8px !important; display: block;
}
.hs-form-embed .hs-form-required { color: var(--c-accent) !important; margin-left: 4px; }
.hs-form-frame input.hs-input, .hs-form-frame select.hs-input, .hs-form-frame textarea.hs-input,
.hs-form-embed .hs-input {
  width: 100% !important;
  font-family: var(--f-jp) !important; font-size: var(--fz-14) !important;
  color: var(--c-ink) !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-line-dk) !important; border-radius: 0 !important;
  padding: 14px 16px !important;
  transition: border-color .3s;
}
.hs-form-embed .hs-input:focus { outline: none !important; border-color: var(--c-ink) !important; }
.hs-form-embed textarea.hs-input { min-height: 180px !important; }
.hs-form-embed select.hs-input { appearance: none; }
.hs-form-embed .hs-error-msgs label { color: var(--c-accent) !important; font-weight: 400 !important; letter-spacing: .06em !important; }
.hs-form-embed .legal-consent-container, .hs-form-embed .legal-consent-container p {
  font-size: var(--fz-11) !important; color: var(--c-sub) !important; font-family: var(--f-jp) !important; line-height: 1.9 !important;
}
.hs-form-embed .hs-button {
  font-family: var(--f-jp) !important; font-weight: 600 !important;
  font-size: var(--fz-13) !important; letter-spacing: .26em !important;
  color: var(--c-paper) !important; background: var(--c-ink) !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 20px 56px !important; width: 100%; cursor: pointer;
  transition: opacity .35s;
}
.hs-form-embed .hs-button:hover { opacity: .82 !important; }
.hs-form-embed .submitted-message { text-align: center; font-family: var(--f-jp); color: var(--c-ink); }

/* =========================================================================
 * 16. トップ「Studio寄せ」レイアウト（v2.1）
 * ========================================================================= */

/* 16-1. ヒーロー：全幅の森＋白抜き明朝（原本踏襲） */
.hero2 {
  position: relative;
  min-height: clamp(520px, 88vh, 860px);
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center 62%;
  text-align: center;
}
.hero2::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,25,.14) 0%, rgba(20,24,25,.02) 45%, rgba(20,24,25,.16) 100%);
}
.hero2 h1 {
  position: relative; z-index: 2;
  font-family: var(--f-jp); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 2.3; letter-spacing: .3em;
  color: #fff;
  text-shadow: 0 1px 26px rgba(0,0,0,.32);
  padding: 0 var(--gutter);
}
.hero2 .hero-scroll2 {
  position: absolute; left: 50%; bottom: 0; z-index: 2; transform: translateX(-50%);
}
.hero2 .hero-scroll2::after {
  content: ""; display: block; width: 1px; height: 72px; background: rgba(255,255,255,.85);
  animation: scrollcue 2.4s var(--ease) infinite;
}

/* 16-2. About：本文×墨アート2カラム */
.about-duo {
  display: grid; grid-template-columns: 7fr 4fr;
  gap: clamp(28px, 5vw, 80px); align-items: center;
  max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter);
}
.about-duo .body { text-align: left; }
.about-duo .art { aspect-ratio: 4 / 5; background-size: contain; background-repeat: no-repeat; background-position: center; }
.about-duo .lead-en { text-align: left; }
@media (max-width: 760px) {
  .about-duo { grid-template-columns: 1fr; }
  .about-duo .art { max-width: 260px; margin: 0 auto; aspect-ratio: 1/1.2; }
  .about-duo .lead-en { text-align: center; }
  .about-duo .btn-wrap-b { text-align: center; }
  .hero2 { min-height: 78vh; align-items: flex-start; }
  .hero2 h1 { margin-top: 21vh; font-size: 21px; letter-spacing: .24em; }
}

/* 16-3. サービス：中央見出し＋キャプション付き図版グリッド（原本踏襲） */
.svc { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }
.svc + .svc { margin-top: var(--s-7); }
.svc .svc-head { text-align: center; margin-bottom: var(--s-4); }
.svc .svc-head .row {
  display: flex; align-items: baseline; justify-content: center; gap: 22px;
}
.svc .svc-head .no {
  font-family: var(--f-garamond);
  font-size: clamp(38px, 4vw, 52px); letter-spacing: .06em; color: var(--c-ink); line-height: 1;
}
.svc .svc-head .en {
  font-family: var(--f-script);
  font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .04em; color: var(--c-ink); line-height: 1.2;
}
.svc .svc-head .ja {
  display: block; margin-top: 12px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-13); letter-spacing: .3em; color: var(--c-text);
}
.svc .svc-body { max-width: 720px; margin: 0 auto var(--s-5); text-align: center; font-size: var(--fz-14); }
.svc .svc-body p + p { margin-top: 1.6em; }

.figrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 34px); }
.figrid.two { grid-template-columns: repeat(2, 1fr); margin-top: clamp(18px, 2.6vw, 34px); }
.figrid figure { margin: 0; }
.figrid .ph { aspect-ratio: 3 / 2; background-size: cover; background-position: center; }
.figrid figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--f-jp); font-weight: 500;
  font-size: var(--fz-12); letter-spacing: .22em; line-height: 1.9; color: var(--c-sub);
}
@media (max-width: 640px) {
  .figrid { grid-template-columns: 1fr; gap: 0; }
  .figrid figure + figure { margin-top: 40px; }
  .figrid.two { grid-template-columns: 1fr; margin-top: 40px; }
  .figrid .ph { aspect-ratio: 3 / 2; }
  .svc .svc-body { text-align: left; }
}

/* 16-4. 撮影コラージュ */
.collage {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(16px, 2.2vw, 28px);
}
.collage figure { margin: 0; }
.collage .ph { background-size: cover; background-position: center; }
.collage .c-glass .ph { aspect-ratio: 16 / 9; }
.collage .c-model { grid-row: span 2; display: flex; flex-direction: column; }
.collage .c-model .ph { flex: 1; background-position: center top; min-height: 320px; }
.collage .c-grass .ph, .collage .c-mist .ph { aspect-ratio: 16 / 9; }
.collage figcaption {
  margin-top: 10px; text-align: center;
  font-family: var(--f-garamond); font-style: italic;
  font-size: var(--fz-13); letter-spacing: .08em; color: var(--c-sub);
}
@media (max-width: 640px) {
  .collage { grid-template-columns: 1fr; gap: 0; }
  .collage figure + figure { margin-top: 36px; }
  .collage .c-model { grid-row: auto; }
  .collage .c-model .ph { aspect-ratio: 3 / 4; min-height: 0; }
}

/* 16-5. デバイスモック（Web design）・イベント図版 */
.svc-solo { max-width: 760px; margin: 0 auto; }
.svc-solo .ph { aspect-ratio: 3 / 2; background-size: contain; background-repeat: no-repeat; background-position: center; }
.event-fig .ph { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.event-list { max-width: 760px; margin: var(--s-4) auto 0; }
.event-list li {
  padding: 16px 4px; border-bottom: 1px solid var(--c-line);
  font-size: var(--fz-13); letter-spacing: .06em; color: var(--c-text); line-height: 2;
}
.event-list li:first-child { border-top: 1px solid var(--c-line); }

/* 16-6. 丸太フルブリードバンド */
.band {
  height: clamp(220px, 38vh, 380px);
  background-size: cover; background-position: center;
}

/* 16-7. お知らせ：リスト行（原本踏襲＋ニュース行コンポーネント） */
.news-rows { max-width: 860px; margin: 0 auto; }
.news-row {
  display: block; padding: 34px 6px;
  border-bottom: 1px solid var(--c-line);
}
.news-row:first-child { border-top: 1px solid var(--c-line); }
.news-row .nr-meta { display: flex; align-items: center; gap: 16px; }
.news-row .nr-title {
  margin-top: 10px;
  font-family: var(--f-jp); font-weight: 600;
  font-size: var(--fz-15); letter-spacing: .08em; line-height: 1.9; color: var(--c-ink);
  transition: opacity .3s;
}
.news-row:hover .nr-title { opacity: .6; }
.news-row .nr-excerpt {
  margin-top: 8px; font-size: var(--fz-12); line-height: 2; color: var(--c-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-row .nr-credit {
  margin-top: 12px; display: flex; align-items: center; gap: 10px;
  font-family: var(--f-garamond); font-size: var(--fz-12); letter-spacing: .08em; color: var(--c-weak);
}
.news-row .nr-credit .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background-size: cover; background-position: center;
  filter: grayscale(1);
}

/* =========================================================================
 * 17. 404 / 汎用
 * ========================================================================= */
.error-hero { text-align: center; padding: calc(var(--header-h) + 120px) var(--gutter) 140px; }
.error-hero .code { font-family: var(--f-caslon); font-size: 96px; color: var(--c-line-dk); letter-spacing: .1em; }