/*
Theme Name: Wakasa Advertising
Theme URI: https://wakasa.example.com/
Author: Wakasa Inc. / Wacarthur Group
Author URI: https://wacarthur.com/
Description: 株式会社わかさ 広告事業のためのカスタムテーマ。「『伝わる』を、経済にする。」をコンセプトに、余白とクリエイティブな動きを両立したエディトリアルデザイン。
Version: 1.9.16
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wakasa-ad
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:        #14130f;   /* 墨色に近いブラック */
  --paper:      #f4f1ea;   /* 和紙のようなオフホワイト */
  --paper-deep: #e9e4d8;
  --accent:     #d8430f;   /* 朱（たたら・鉄の赤） */
  --accent-2:   #1c5d4c;   /* 深緑（出雲の森） */
  --line:       #c9c2b2;
  --muted:      #6f6a5d;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.85;
  font-feature-settings:"palt";
  overflow-x:hidden;
  max-width:100%;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* grain overlay */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* ============================================================
   HEADER（資料準拠：太い白バー＋日英フリップ＋CTAブロック）
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:stretch; justify-content:space-between;
  height:76px; padding:0 0 0 var(--gutter);
  background:#ffffff; color:var(--ink);
  border-bottom:1px solid #ececec;
}
/* ログイン中：WordPress管理バー(32px)分、ヘッダーとメガメニューを下げる */
.admin-bar .site-header{ top:32px; }
.admin-bar .nav-mega{ top:108px; } /* 32(admin bar) + 76(header) */
@media screen and (max-width:782px){
  .admin-bar .site-header{ top:46px; } /* モバイル管理バーは46px */
}
.site-header .brand{
  display:flex; align-items:center;
  font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.08em;
  color:var(--ink);
}
.site-header .brand small{
  display:block; font-size:10px; letter-spacing:.3em; opacity:.6; margin-top:4px;
}

/* ナビ本体（メニュー＋CTAを並べる） */
.nav-wrap{ display:flex; align-items:stretch; }

.nav{
  display:flex; align-items:center; gap:36px; height:100%;
  padding:0 32px; font-size:14px; letter-spacing:.12em;
  font-weight:500;
}

/* 各リンクは「日本語/英語」のフリップカード構造 */
.nav a{
  position:relative;
  display:inline-block;
  height:1.4em; overflow:hidden;
  color:var(--ink);
}
.nav a .flip{
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease);
}
.nav a .flip > span{
  display:block; height:1.4em; line-height:1.4em;
  white-space:nowrap;
}
.nav a .flip .en{ color:var(--accent); letter-spacing:.16em; }
/* ホバー時、英語表記が上にスライドアップ */
.nav a:hover .flip{ transform:translateY(-1.4em); }

/* お問い合わせブロック（右端のCTA）— ホバーで背景色と文字色が入れ替わる */
.nav-cta{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-width:160px; padding:0 32px;
  background:var(--accent); color:#fff;
  font-size:14px; letter-spacing:.12em; font-weight:600;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav-cta:hover{ background:#fff; color:var(--accent); }
/* センターHP（わかさ公式サイト）への入口：お問い合わせの左隣に深緑ブロック */
.nav-home{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:150px; padding:0 22px;
  background:var(--accent-2); color:#fff; text-align:center;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav-home__en{ font-size:9px; letter-spacing:.2em; opacity:.8; line-height:1; }
.nav-home__jp{ font-size:13px; letter-spacing:.08em; font-weight:600; line-height:1.2; }
.nav-home:hover{ background:#fff; color:var(--accent-2); }
/* 狭めのPC幅（861〜1180px）：ヘッダーが右にはみ出さないよう間隔とボタン幅を詰める */
@media (min-width:861px) and (max-width:1180px){
  .nav{ gap:20px; padding:0 18px; font-size:13px; letter-spacing:.06em; }
  .site-header .brand small{ display:none; }
  .nav-home{ min-width:0; padding:0 14px; }
  .nav-home__jp{ font-size:12px; letter-spacing:.04em; }
  .nav-cta{ min-width:0; padding:0 18px; font-size:13px; letter-spacing:.06em; }
}

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; position:relative; padding:0; align-self:center;
}
/* 2本線 → ✕ にモーフィングするアイコン（中央線＋上下線） */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:""; position:absolute; left:50%; width:26px; height:2px; margin-left:-13px;
  background:var(--ink); transition:transform .3s var(--ease), background-color .2s, opacity .2s;
}
.nav-toggle__bars{ top:50%; margin-top:-1px; }
.nav-toggle__bars::before{ top:-7px; }
.nav-toggle__bars::after{ top:7px; }
body.mnav-open .nav-toggle__bars{ background:transparent; }
body.mnav-open .nav-toggle__bars::before{ transform:translateY(7px) rotate(45deg); background:var(--ink); }
body.mnav-open .nav-toggle__bars::after{ transform:translateY(-7px) rotate(-45deg); background:var(--ink); }

/* SERVICE メガメニュー（ホバーでバッジ一覧を表示） */
.nav-has-mega{ display:flex; align-items:center; align-self:stretch; height:100%; }
.nav-mega-trigger{ position:relative; display:flex; align-items:center; height:100%; color:var(--ink); }
/* 1.4emの窓（クリップ）。トリガーは全高でホバー判定、窓だけが文字を切り替える */
.nav-mega-trigger__win{ display:inline-block; height:1.4em; overflow:hidden; }
.nav-mega-trigger .flip{ display:flex; flex-direction:column; transition:transform .4s var(--ease); }
.nav-mega-trigger .flip > span{ display:block; height:1.4em; line-height:1.4em; white-space:nowrap; }
.nav-mega-trigger .flip .en{ color:var(--accent); letter-spacing:.16em; }
.nav-has-mega:hover .nav-mega-trigger .flip{ transform:translateY(-1.4em); }

.nav-mega{
  position:fixed; left:0; right:0; top:76px;
  background:#fff; border-top:1px solid #ececec; border-bottom:1px solid #ececec;
  box-shadow:0 16px 30px rgba(20,19,15,.08);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:99;
}
/* トリガーまたはメニュー自身にホバーで表示 */
.nav-has-mega:hover .nav-mega{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-mega:hover{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-mega__inner{
  max-width:var(--maxw); margin-inline:auto; padding:64px var(--gutter) 72px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  min-height:32vh; align-content:center;
}
.nav-mega__item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:20px 12px; border-radius:6px;
  transition:background .3s var(--ease);
}
.nav-mega__item:hover{ background:var(--paper-deep); }
.nav-mega__icon{ width:80px; height:80px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-mega__icon svg{ width:80px !important; height:80px !important; display:block; max-width:80px; max-height:80px; overflow:visible; }
/* バッジの線を濃いインク色に統一し、80px縮小で細りすぎないよう太さもしっかりめに */
.nav-mega__icon svg [stroke]{ stroke:#3a3833 !important; stroke-width:2.4 !important; }
.nav-mega__icon svg text[fill]{ fill:#3a3833 !important; }
/* 修正(v1.9.3): 上部ナビ用の窓化ルール .nav a{ height:1.4em; overflow:hidden; display:inline-block }
   は詳細度が高く、同じ .nav 内の a 要素であるメガメニュー枠 .nav-mega__item まで巻き込んで
   高さを潰し中身を切り取ってしまう。メガメニュー枠だけ本来の flex レイアウトを取り戻す。 */
.nav a.nav-mega__item{ display:flex; height:auto; overflow:visible; }
.nav-mega__label{ display:flex; flex-direction:column; gap:2px; }
.nav-mega__en{ font-family:var(--sans); font-size:16px; color:var(--ink); }
.nav-mega__jp{ font-size:12px; color:var(--muted); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh; position:relative; display:flex; align-items:flex-end;
  padding:76px var(--gutter) clamp(60px,10vh,140px) var(--gutter);
  background:var(--ink); color:var(--paper); overflow:hidden;
}
.hero__bgword{
  position:absolute; top:8%; left:-2%; font-family:var(--serif);
  font-size:clamp(120px, 34vw, 560px); line-height:.8; color:#fff;
  opacity:.05; white-space:nowrap; pointer-events:none; user-select:none;
}
.hero__inner{ position:relative; z-index:2; max-width:980px; }
.hero__eyebrow{
  font-size:13px; letter-spacing:.4em; color:var(--accent);
  margin-bottom:28px; opacity:0; transform:translateY(20px);
  animation:rise .9s var(--ease) .2s forwards;
}
.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(40px, 7vw, 104px); line-height:1.08; margin:0 0 32px;
  letter-spacing:.02em;
}
.hero__title .em{ color:var(--accent); }
.hero__title span{ display:block; opacity:0; transform:translateY(40px); }
.hero__title span:nth-child(1){ animation:rise 1s var(--ease) .3s forwards; }
.hero__title span:nth-child(2){ animation:rise 1s var(--ease) .45s forwards; }
.hero__title span:nth-child(3){ animation:rise 1s var(--ease) .6s forwards; }
.hero__lead{
  max-width:520px; font-size:clamp(15px,1.4vw,18px); color:#cfcabc;
  opacity:0; transform:translateY(20px); animation:rise 1s var(--ease) .85s forwards;
}
.hero__can{ display:block; margin-bottom:10px; font-size:clamp(12px,1.1vw,14px); letter-spacing:.14em; color:#8d877a; }
.hero__can span{ white-space:nowrap; }
.hero__scroll{
  position:absolute; right:var(--gutter); bottom:48px; writing-mode:vertical-rl;
  font-size:11px; letter-spacing:.3em; color:#8d877a; z-index:2;
}
.hero__scroll::after{ content:""; display:block; width:1px; height:60px; background:#8d877a; margin:12px auto 0; transform-origin:top; animation:scrollline 2s var(--ease) infinite; }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes scrollline{ 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }

/* ============================================================
   SECTION COMMONS
   ============================================================ */
section{ position:relative; }
.sec{ padding:clamp(80px,14vh,180px) 0; }
.sec__head{ margin-bottom:64px; }
.sec__num{ font-family:var(--serif); font-size:13px; color:var(--accent); letter-spacing:.2em; }
.sec__title{
  font-family:var(--serif); font-weight:600; font-size:clamp(28px,4.5vw,56px);
  line-height:1.2; margin:12px 0 0;
}
.sec__title-en{ font-size:12px; letter-spacing:.3em; color:var(--muted); margin-top:8px; }

/* reveal on scroll */
/* JSが動いているときだけ最初に隠す（JSが動かない環境では最初から表示） */
.reveal{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(40px); }
.js .reveal.in{ opacity:1; transform:none; }
/* 安全装置：main.jsが一定時間動かなかった場合は演出をやめて全部表示 */
.reveal-fallback .reveal{ opacity:1 !important; transform:none !important; }

/* NEWS（ヒーロー直下の帯） */
.news{ background:#26241e; color:var(--paper); padding:0; border-top:1px solid #3a3833; border-bottom:1px solid #3a3833; }
.news__inner{ display:flex; align-items:center; gap:32px; padding:20px var(--gutter); }
.news__label{ font-family:var(--serif); font-size:13px; letter-spacing:.2em; color:var(--accent); flex-shrink:0; }
.news__ticker{ flex:1; overflow:hidden; }
.news__items{ display:flex; gap:48px; list-style:none; margin:0; padding:0; animation:ticker 28s linear infinite; white-space:nowrap; }
.news__items:hover{ animation-play-state:paused; }
.news__items li{ display:flex; gap:14px; align-items:baseline; font-size:13px; }
.news__items time{ color:#8d877a; font-size:12px; letter-spacing:.08em; }
.news__items a{ color:#cfcabc; }
.news__items a:hover{ color:#fff; }
.news__more{ flex-shrink:0; font-size:12px; letter-spacing:.16em; color:#8d877a; }
.news__more:hover{ color:#fff; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* キャッチコピー（大きな一文） */
.catch{ background:var(--paper); text-align:center; }
.catch__copy{
  font-family:var(--serif); font-weight:600; font-size:clamp(28px,6vw,72px);
  line-height:1.5; letter-spacing:.04em; max-width:16em; margin-inline:auto;
}
.catch__copy .accent{ color:var(--accent); }
.catch__sub{ margin-top:32px; color:var(--muted); font-size:15px; letter-spacing:.1em; }

/* TOPICS（カード3列） */
.topics{ background:var(--paper); }
.topics__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.topics__nav{ display:flex; gap:12px; flex-shrink:0; }
.topics__arrow{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.topics__arrow:hover{ background:var(--ink); color:var(--paper); }
.topics__arrow:disabled{ opacity:.25; cursor:default; }
.topics__arrow:disabled:hover{ background:transparent; color:var(--ink); }

/* 横スクロールのトラック */
.topics__track{
  display:flex; gap:24px; margin-top:48px;
  /* 見出し（.wrap：最大1280px中央寄せ）の左端に開始位置を合わせる。
     scroll-padding-left を同じ値にして、スナップ時もこの位置を基準にする。
     右端はスクロールで隠れるよう余白なし。 */
  padding-left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scroll-padding-left:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-right:0; padding-bottom:8px;
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.topics__track::-webkit-scrollbar{ display:none; }
/* 最後のカードの後ろに開始余白と同じ右マージンを足し、最後まで気持ちよくスクロールできるように */
.topics__track > .topic:last-child{ margin-right:var(--gutter); }

.topic{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  flex:0 0 auto; width:clamp(280px,28vw,360px); aspect-ratio:3/4;
  padding:28px; overflow:hidden; color:#fff; scroll-snap-align:start;
}
.topic__bg{ position:absolute; inset:0; z-index:0; transition:transform 1.2s var(--ease); }
.topic:hover .topic__bg{ transform:scale(1.06); }
.topic__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(20,19,15,.78)); }
.topic__meta{ position:relative; z-index:1; }
.topic__cat{ font-size:11px; letter-spacing:.2em; color:#ff7a4d; }
.topic__title{ font-family:var(--serif); font-size:clamp(18px,2vw,24px); margin-top:8px; line-height:1.4; }
.topic__date{ font-size:11px; color:#bdb6a8; margin-top:10px; letter-spacing:.08em; }

/* view all */
.topics__viewall{ display:flex; justify-content:center; margin-top:40px; }
.topics__viewall a{
  display:inline-flex; align-items:center; gap:14px;
  font-size:13px; letter-spacing:.16em; color:var(--ink);
}
.topics__viewall-icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.topics__viewall a:hover .topics__viewall-icon{ transform:translateX(4px); background:var(--accent); }

/* COMPANY（会社概要） */
.company{ background:var(--paper-deep); }
.company__layout{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.company__lead{ font-family:var(--serif); font-size:clamp(22px,3vw,34px); line-height:1.6; }
.company__lead .accent{ color:var(--accent); }
.company__table{ width:100%; border-collapse:collapse; font-size:14px; }
.company__table th, .company__table td{ text-align:left; padding:16px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.company__table th{ width:34%; font-weight:500; letter-spacing:.08em; color:var(--muted); }
.company__table td{ color:var(--ink); }

/* COMPANY（トップ：左大見出し＋右リンクリスト） */
.company{ background:#dce9dd; }
.company__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
.company__big{
  font-family:var(--sans); font-weight:700; letter-spacing:.02em;
  font-size:clamp(48px,8vw,120px); line-height:.95; color:var(--ink); margin:0;
}
.company__big-sub{ font-size:15px; letter-spacing:.12em; color:var(--muted); margin:8px 0 0; }
.company__big-sub::before{ content:"/ "; color:var(--accent); }

.company__links{ display:flex; flex-direction:column; }
.clink{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 4px; border-bottom:1px solid #b9cbba;
  font-size:clamp(16px,1.6vw,19px); color:var(--ink);
  transition:padding .4s var(--ease);
}
.clink:first-child{ border-top:1px solid #b9cbba; }
.clink:hover{ padding-inline:16px; }
.clink__icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.clink:hover .clink__icon{ transform:scale(1.15); background:var(--accent); }

/* CONTACT（トップ：白枠の誘導バナー） */
.contact{ background:#dce9dd; padding-top:0; }
.contact__banner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--paper); border:1px solid var(--ink);
  padding:clamp(40px,6vw,72px) clamp(32px,5vw,72px);
  max-width:1040px; margin:0 auto;
  transition:transform .4s var(--ease);
}
/* 朱色の影アクセント */
.contact__banner::before{
  content:""; position:absolute; left:18px; right:-10px; bottom:-10px; height:10px;
  background:var(--accent); z-index:-1;
}
.contact__banner:hover{ transform:translate(-2px,-2px); }
.contact__copy-en{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(36px,5.5vw,76px); line-height:1; color:var(--ink); letter-spacing:.01em;
}
.contact__copy-jp{ font-size:15px; letter-spacing:.16em; color:var(--muted); margin-top:14px; }
.contact__icon{
  width:clamp(64px,8vw,96px); height:clamp(64px,8vw,96px); border-radius:50%;
  background:var(--ink); color:#fff; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:clamp(24px,3vw,34px);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.contact__banner:hover .contact__icon{ transform:scale(1.08); background:var(--accent); }

@media (max-width:860px){
  .company__grid{ grid-template-columns:1fr; gap:28px; }
  .contact__banner{ flex-direction:row; padding:32px 24px; }
  .contact__copy-en{ font-size:clamp(28px,9vw,44px); }
}

/* CONCEPT / ABOUT */
.concept{ background:var(--paper-deep); }
.concept__big{
  font-family:var(--serif); font-weight:600; font-size:clamp(26px,4vw,48px);
  line-height:1.6; max-width:18em;
}
.concept__big .accent{ color:var(--accent); }
.concept__cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:56px; }
.concept__cols p{ color:var(--muted); font-size:15px; }

/* SERVICES（資料準拠：ダーク背景・巨大見出し・3列グリッド＋バッジ） */
.services{ background:#3a3833; color:#f4f1ea; }
.services .sec__title{ color:#f4f1ea; }
.services__hero{ margin-bottom:8px; }
.services__big{
  font-family:var(--sans); font-weight:700; letter-spacing:.02em;
  font-size:clamp(56px,11vw,150px); line-height:.95; color:#f4f1ea; margin:0;
}
.services__sub{ font-size:15px; letter-spacing:.12em; color:#c9c2b2; margin:8px 0 0; }
.services__sub::before{ content:"/ "; color:var(--accent); }

.services__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  margin-top:64px;
  border-top:1px solid #56534b;
}
.svc{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:16px; padding:40px 28px; border-bottom:1px solid #56534b;
  transition:background .4s var(--ease);
  cursor:default; min-height:200px; box-sizing:border-box;
}
/* 縦の区切り線（3列） */
/* 2列：右側のカードに中央の区切り線 */
.svc:nth-child(2n){ border-left:1px solid #56534b; }
.svc:hover{ background:rgba(0,0,0,.18); }
.svc__body{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.svc__name{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(22px,2.2vw,32px); line-height:1.12; color:#f4f1ea;
  word-break:keep-all;
}
.svc__jp{
  display:flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.06em; color:#c9c2b2; margin-top:16px;
}
.svc__jp .arrow{ transition:transform .4s var(--ease); }
.svc:hover .svc__jp .arrow{ transform:translateX(6px); color:var(--accent); }

/* バッジ：サイズを完全固定し、SVGの伸びを防ぐ */
.svc__badge{
  flex:0 0 auto;
  width:96px; height:96px; max-width:96px; max-height:96px;
  opacity:.9; line-height:0;
}
.svc__badge svg{
  display:block; width:96px; height:96px;
}
.svc:hover .svc__badge{ opacity:1; }

/* FLOW（一気通貫） */
.flow{ background:var(--ink); color:var(--paper); }
.flow .sec__title{ color:var(--paper); }
.flow__track{ display:flex; gap:0; flex-wrap:wrap; margin-top:48px; }
.flow__step{ flex:1 1 200px; padding:32px 28px; border-left:1px solid #2c2a24; }
.flow__step:first-child{ border-left:none; }
.flow__step .n{ font-family:var(--serif); color:var(--accent); font-size:13px; }
.flow__step h4{ font-family:var(--serif); font-size:20px; margin:10px 0 8px; }
.flow__step p{ font-size:13px; color:#a59f92; }

/* WORKS（巨大見出し。トップ・実績一覧で共通） */
.works{ background:var(--paper); padding-top:clamp(80px,14vh,180px); padding-bottom:0; }
.works__hero{ max-width:var(--maxw); margin:0 auto 60px; padding:0 var(--gutter); }
.works__big{
  font-family:var(--sans); font-weight:700; letter-spacing:.02em;
  font-size:clamp(56px,11vw,150px); line-height:.95; color:var(--ink); margin:0;
}
.works__sub{ font-size:15px; letter-spacing:.12em; color:var(--muted); margin:8px 0 0; }
.works__sub::before{ content:"/ "; color:var(--accent); }


/* CTA / CONTACT */
.cta{ background:var(--accent); color:#fff; text-align:center; }
.cta h2{ font-family:var(--serif); font-size:clamp(30px,6vw,72px); line-height:1.2; margin:0 0 28px; }
.cta p{ max-width:32em; margin:0 auto 40px; opacity:.9; }
.btn{
  display:inline-flex; align-items:center; gap:14px; padding:18px 44px;
  background:var(--ink); color:var(--paper); font-size:14px; letter-spacing:.16em;
  border-radius:999px; transition:transform .4s var(--ease), gap .4s var(--ease);
}
.btn:hover{ transform:translateY(-3px); gap:22px; }

/* CONTACT FORM */
.contact{ background:var(--paper-deep); }
.cform{ max-width:680px; }
.cform .row{ margin-bottom:26px; }
.cform label{ display:block; font-size:13px; letter-spacing:.12em; margin-bottom:8px; }
.cform label .req{ color:var(--accent); margin-left:6px; }
.cform input, .cform textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); background:var(--paper);
  font-family:inherit; font-size:15px; color:var(--ink); border-radius:2px;
}
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--accent); }
.cform textarea{ min-height:160px; resize:vertical; }
.cform .submit{
  border:none; cursor:pointer; background:var(--ink); color:var(--paper);
  padding:18px 48px; font-size:14px; letter-spacing:.16em; border-radius:999px;
  transition:transform .3s var(--ease);
}
.cform .submit:hover{ transform:translateY(-3px); }

/* ============================================================
   COMPANY PAGE（企業情報ページ専用）
   ============================================================ */
.cpage{ padding-top:76px; }
.cpage__hero{
  background:var(--ink); color:var(--paper);
  padding:clamp(80px,12vh,160px) var(--gutter) clamp(60px,9vh,120px);
  position:relative; overflow:hidden;
}
.cpage__hero-en{ font-size:13px; letter-spacing:.4em; color:var(--accent); }
.cpage__hero-jp{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(36px,6.5vw,84px); line-height:1.1; margin:18px 0 0;
}
.cpage__hero-sub{ font-size:13px; letter-spacing:.3em; color:#8d877a; margin-top:14px; }
.cpage__bgword{
  position:absolute; right:-2%; bottom:-12%; font-family:var(--serif);
  font-size:clamp(140px,26vw,420px); line-height:.8; color:#fff;
  opacity:.04; white-space:nowrap; pointer-events:none; user-select:none;
}

.cpage__body{ padding:clamp(64px,10vh,120px) 0; }
/* ごあいさつページのみ上余白を詰める（リード文の上の空きを適正化） */
.cpage__body--message{ padding-top:clamp(40px,6vh,72px); }
.cblock{ margin-bottom:clamp(64px,9vh,110px); }
.cblock__head{
  display:flex; align-items:baseline; gap:18px; margin-bottom:40px;
  border-bottom:1px solid var(--line); padding-bottom:18px;
}
.cblock__num{ font-family:var(--serif); color:var(--accent); font-size:14px; letter-spacing:.2em; }
.cblock__title{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.5vw,40px); }
.cblock__title-en{ font-size:12px; letter-spacing:.3em; color:var(--muted); }

/* 会社概要テーブル */
.ctable{ width:100%; border-collapse:collapse; font-size:15px; }
.ctable th, .ctable td{ text-align:left; padding:20px 0; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.8; }
.ctable th{ width:28%; font-weight:500; letter-spacing:.08em; color:var(--muted); padding-right:24px; }
.ctable td{ color:var(--ink); }
.ctable td a{ color:var(--accent-2); border-bottom:1px solid currentColor; }

/* 沿革（年表） */
.history{ border-top:1px solid var(--line); }
.history__row{
  display:grid; grid-template-columns:180px 1fr; gap:32px;
  padding:24px 0; border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.history__row:hover{ background:var(--paper-deep); }
.history__year{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--accent); }
.history__text{ font-size:15px; color:var(--ink); line-height:1.85; }

/* 企業情報サブリンク */
.csublinks{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:24px; }
.csublink{
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 28px; background:var(--ink); color:var(--paper);
  font-family:var(--serif); font-size:20px;
  transition:background .3s var(--ease);
}
.csublink:hover{ background:var(--accent); }
.csublink span:last-child{ font-size:18px; }

@media (max-width:860px){
  .history__row{ grid-template-columns:1fr; gap:6px; }
  .ctable th{ width:36%; }
  .csublinks{ grid-template-columns:1fr; }
}

/* WORK アーカイブ（/work/）一覧＋絞り込み */
.workfilter{ display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 48px; }
.workfilter__btn{
  padding:10px 24px; border:1px solid var(--line); background:transparent;
  font-family:var(--sans); font-size:14px; letter-spacing:.06em; color:var(--ink);
  border-radius:999px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.workfilter__btn:hover{ border-color:var(--ink); }
.workfilter__btn.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.worklist{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-bottom:40px; }
.workcard{ display:block; color:inherit; }
.workcard__thumb{
  aspect-ratio:4/5; background-size:cover; background-position:center;
  overflow:hidden; transition:transform .6s var(--ease);
}
.workcard:hover .workcard__thumb{ transform:scale(1.04); }
.workcard__meta{ padding:18px 2px; }
.workcard__cat{ font-size:11px; letter-spacing:.2em; color:var(--accent); }
.workcard__title{ font-family:var(--serif); font-size:21px; margin-top:6px; }
.workcard__desc{ font-size:13px; color:var(--muted); margin-top:6px; line-height:1.7; }
.workcard.is-hidden{ display:none; }
/* 動画の実績：縦長カードの中に横長サムネイルを丸ごと収め、再生マークを重ねる */
.workcard__thumb{ position:relative; }
.workcard__thumb--video{ background:var(--ink); display:flex; align-items:center; }
.workcard__vimg{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.workcard__play{
  position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:rgba(20,19,15,.72); border:1px solid rgba(244,241,234,.6);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.workcard__play::after{
  content:""; position:absolute; left:50%; top:50%; margin:-9px 0 0 -5px;
  border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--paper);
}
.workcard:hover .workcard__play{ background:var(--accent); transform:scale(1.08); }
/* 詳細ページの動画プレーヤー（16:9） */
.videoembed{ position:relative; aspect-ratio:16/9; margin-bottom:48px; background:var(--ink); }
.videoembed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.worklist__empty{ color:var(--muted); padding:40px 0; }

/* 実績一覧：画面幅に応じて 4列→2列（スマホでも2列を維持） */
@media (max-width:1100px){
  .worklist{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .worklist{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .workcard__title{ font-size:17px; }
  .workcard__desc{ display:none; }
}

/* ごあいさつページ */
.greeting__lead{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px,3.6vw,44px); line-height:1.6; letter-spacing:.03em;
  max-width:20em; margin:0 0 32px; line-break:strict;
}
.greeting__lead .ph{ white-space:nowrap; }
.greeting__lead .accent{ color:var(--accent); }
.greeting__body{ max-width:720px; font-size:16px; line-height:2.1; color:var(--ink); }
.greeting__body p{ margin:0 0 1.8em; }
.greeting__sign{
  display:flex; align-items:baseline; gap:16px; justify-content:flex-end;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
}
.greeting__sign .role{ font-size:13px; letter-spacing:.12em; color:var(--muted); }
.greeting__sign .name{ font-family:var(--serif); font-size:24px; letter-spacing:.06em; }

/* サービス詳細ページ（参考デザイン準拠） */
.svcpage__hero{
  background:var(--ink); color:var(--paper);
  padding:clamp(80px,12vh,150px) var(--gutter) clamp(50px,7vh,90px);
  position:relative; overflow:hidden;
}
.svcpage__hero-badge{ width:120px; height:120px; margin:0 auto 24px; color:#c9c2b2; }
.svcpage__hero-badge svg{ width:120px; height:120px; }
.svcpage__hero-inner{ text-align:center; position:relative; z-index:2; }
.svcpage__hero-jp{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,5vw,60px); line-height:1.1; margin:0; }
.svcpage__hero-en{ font-size:13px; letter-spacing:.3em; color:var(--accent); margin-top:14px; }

.svcpage__lead{ text-align:center; padding:clamp(56px,9vh,110px) var(--gutter); }
.svcpage__lead-title{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.5vw,40px); line-height:1.5; margin:0 0 28px; }
.svcpage__lead-text{ color:var(--muted); font-size:15px; line-height:2; white-space:pre-line; }

.svcpage__blocks{ padding-bottom:clamp(40px,7vh,90px); }
.svcblock{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:center;
  max-width:var(--maxw); margin:0 auto clamp(48px,8vh,96px); padding:0 var(--gutter);
}
.svcblock:nth-child(even) .svcblock__visual{ order:2; }
.svcblock__visual{
  aspect-ratio:4/3; background:var(--paper-deep);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.svcblock__visual svg{ width:55%; max-width:200px; color:#3a3833; }
.svcblock__visual img{ width:100%; height:100%; object-fit:cover; }
.svcblock__head{ display:flex; align-items:baseline; gap:16px; margin-bottom:18px; }
.svcblock__head::before{ content:""; width:40px; height:1px; background:var(--accent); display:inline-block; }
.svcblock__jp{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.6vw,28px); }
.svcblock__en{ font-size:11px; letter-spacing:.2em; color:var(--muted); }
.svcblock__text{ font-size:15px; line-height:2; color:var(--ink); }

.svcpage__nav{ background:var(--paper-deep); padding:clamp(48px,8vh,90px) var(--gutter); }
.svcpage__nav-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:var(--maxw); margin:0 auto; }
.svcpage__nav-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:24px 12px; border-radius:6px; transition:background .3s var(--ease);
}
.svcpage__nav-item:hover{ background:#fff; }
.svcpage__nav-item.is-current{ background:#fff; }
.svcpage__nav-icon{ width:64px; height:64px; color:#3a3833; }
.svcpage__nav-icon svg{ width:64px; height:64px; }
.svcpage__nav-en{ font-size:14px; color:var(--ink); }
.svcpage__nav-jp{ font-size:11px; color:var(--muted); }

@media (max-width:860px){
  .svcblock{ grid-template-columns:1fr; gap:20px; }
  .svcblock:nth-child(even) .svcblock__visual{ order:0; }
  .svcpage__nav-grid{ grid-template-columns:repeat(2,1fr); }
}

/* 特集記事カテゴリーアーカイブ（アイキャッチのグリッド） */
.topicsarchive{ padding-top:160px; padding-bottom:clamp(80px,12vh,160px); }
.topicsarchive__head{ margin-bottom:56px; }
.topicsgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.topicscard{ display:block; position:relative; }
.topicscard__thumb{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--paper-deep);
  /* 参考デザインの紙が重なったような影 */
  box-shadow:6px 6px 0 rgba(20,19,15,.12);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.topicscard:hover .topicscard__thumb{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 rgba(216,67,15,.25); }
.topicscard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.topicscard__thumb-ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--serif); font-size:22px; text-align:center; padding:20px;
}
.topicscard__readmore{
  position:absolute; right:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.1em; color:#fff;
}
.topicscard__readmore .ic{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px;
}

@media (max-width:860px){
  .topicsgrid{ grid-template-columns:repeat(2,1fr); gap:16px; }
}

/* ニュース一覧ページ（縦リスト形式） */
.newslist{ border-top:1px solid var(--line); margin-top:8px; }
.newsrow{
  display:grid; grid-template-columns:140px 1fr 56px; gap:28px; align-items:center;
  padding:28px 4px; border-bottom:1px solid var(--line);
  color:var(--ink); transition:padding .35s var(--ease), background .35s var(--ease);
}
.newsrow:hover{ padding-inline:18px; background:var(--paper-deep); }
.newsrow__date{ font-size:14px; letter-spacing:.08em; color:var(--muted); white-space:nowrap; }
.newsrow__title{ font-size:16px; line-height:1.7; }
.newsrow__icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; justify-self:end; flex-shrink:0;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.newsrow:hover .newsrow__icon{ transform:scale(1.12); background:var(--accent); }
.newslist__empty{ color:var(--muted); padding:40px 0; }

@media (max-width:860px){
  .newsrow{ grid-template-columns:1fr 44px; gap:8px 16px; padding:22px 4px; }
  .newsrow:hover{ padding-inline:8px; }
  .newsrow__date{ grid-column:1; font-size:12px; }
  .newsrow__title{ grid-column:1; font-size:15px; }
  .newsrow__icon{ grid-column:2; grid-row:1 / span 2; width:40px; height:40px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--paper); padding:80px var(--gutter) 40px; text-align:center; }
.footer__top{ display:none; }
.footer__nav{ display:flex; gap:28px; font-size:13px; }
.footer__nav a{ color:#a59f92; }
.footer__nav a:hover{ color:var(--paper); }
/* 会社情報ブロック（PC・スマホ共通：参考デザイン準拠の中央寄せ） */
.footer__info{ display:block; }
.footer__logo{ font-family:var(--serif); font-size:36px; letter-spacing:.04em; line-height:1; }
.footer__logo small{ display:block; font-size:11px; letter-spacing:.3em; color:#8d877a; margin-top:12px; }
.footer__company{ font-size:15px; color:var(--paper); margin:20px 0 24px; letter-spacing:.04em; }
.footer__addr{ font-size:15px; line-height:2; color:#cfc9bc; margin:0; }
.footer__zip{ display:block; }
.footer__map{ display:inline-flex; align-items:center; gap:6px; color:#cfc9bc; }
.footer__map:hover{ color:var(--paper); }
.footer__pin{ display:inline-flex; }
.footer__home{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  padding:12px 26px; border:1px solid #4a473f; border-radius:999px;
  font-size:13px; letter-spacing:.08em; color:var(--paper);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.footer__home:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.footer__bottom{ margin-top:48px; padding-top:24px; border-top:1px solid #2c2a24; font-size:12px; color:#6f6a5d; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .site-header{ height:72px; padding-right:calc(var(--gutter) - 9px); }
  .site-header .brand{ font-size:18px; }
  .nav-wrap{ display:none; }
  .nav-toggle{ display:block; }
  /* モバイル：メガメニューは展開せず、トリガーを通常リンク扱いに */
  .nav-has-mega{ display:block; }
  .nav-mega{ display:none; }
  .nav-mega-trigger{ height:auto; }
  .nav-mega-trigger__win{ height:auto; overflow:visible; }
  .nav-mega-trigger .flip{ transform:none; }
  .nav-mega-trigger .flip .en{ display:none; }
  .concept__cols{ grid-template-columns:1fr; gap:24px; }
  /* TOPICS：スマホではカード幅を画面に合わせ、矢印は小さく */
  .topics__head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .topic{ width:78vw; max-width:320px; }
  .topics__arrow{ width:40px; height:40px; font-size:20px; }
  /* SERVICE：スマホでも2列を維持（参考デザイン準拠） */
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .svc{ flex-direction:column; align-items:flex-start; min-height:auto; padding:24px 14px; gap:16px; }
  /* 2列の縦罫線（偶数番の左側に線） */
  .svc:nth-child(2n){ border-left:1px solid #56534b; }
  .svc__body{ order:1; }
  .svc__name{ font-size:clamp(18px,5vw,24px); }
  .svc__jp{ font-size:12px; margin-top:10px; }
  .svc__badge{ order:2; align-self:flex-end; width:64px; height:64px; max-width:64px; max-height:64px; }
  .svc__badge svg{ width:64px; height:64px; }
  .company__layout{ grid-template-columns:1fr; gap:32px; }
  .news__inner{ flex-wrap:wrap; gap:14px; }
  .news__more{ display:none; }
  /* スマホのフッター：余白とロゴサイズだけ調整（構成は共通） */
  .site-footer{ padding:56px var(--gutter) 32px; }
  .footer__logo{ font-size:32px; }
  .hero{ padding-top:72px; }
}

/* WP core helpers */
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:10px; top:10px; background:#fff; color:#000; padding:8px 12px; z-index:99999; }

/* ============================================================
   モバイル・ドロワーメニュー（全画面・右からスライドイン）
   ============================================================ */
.mnav{
  position:fixed; inset:0; z-index:90;
  background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden;
  transition:transform .42s var(--ease), visibility .42s;
  overscroll-behavior:contain;
}
body.mnav-open .mnav{ transform:translateX(0); visibility:visible; }
/* 開いている間は背景ページをスクロール固定（位置を保持） */
body.mnav-open{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* スクロールするメニュー本体（ヘッダー分だけ上を空ける） */
.mnav__inner{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:88px 22px 24px;
}
.admin-bar .mnav__inner{ padding-top:134px; }

/* セクション見出し */
.mnav__head{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:.04em;
  color:var(--ink); margin:30px 0 12px;
}
.mnav__head span{ font-size:10px; letter-spacing:.16em; color:var(--accent); }

/* ニュース・特集記事の行 */
.mnav__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px; border-bottom:1px solid var(--line); color:var(--ink);
}
.mnav__row-jp{ display:flex; align-items:baseline; gap:10px; font-size:18px; font-weight:700; }
.mnav__row-en{ font-size:10px; letter-spacing:.16em; color:var(--accent); font-weight:500; }
.mnav__circle{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--ink); color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
}

/* 特集記事の横スクロール */
.mnav__topics{
  display:flex; gap:12px; overflow-x:auto; padding:14px 0 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.mnav__topics::-webkit-scrollbar{ display:none; }
.mtopic{
  position:relative; flex:0 0 62%; max-width:230px; aspect-ratio:5/6;
  border-radius:8px; overflow:hidden; scroll-snap-align:start;
  color:#fff; display:block;
}
.mtopic__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.mtopic__meta{
  position:absolute; left:0; right:0; bottom:0; padding:12px;
  display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(to top, rgba(20,19,15,.82), rgba(20,19,15,0));
}
.mtopic__cat{ font-size:9px; letter-spacing:.12em; opacity:.9; }
.mtopic__title{ font-size:13px; font-weight:700; line-height:1.4; }

/* 製品・サービス／制作実績の2列グリッド（文字左・イラスト右） */
.mnav__grid{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:18px; }
.mnav__item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:12px 2px; border-bottom:1px solid var(--line); color:var(--ink);
}
.mnav__item-txt{ display:flex; flex-direction:column; min-width:0; }
.mnav__item-jp{ font-size:14px; font-weight:700; line-height:1.3; }
.mnav__item-en{ font-size:10px; letter-spacing:.12em; color:var(--muted); margin-top:2px; }
.mnav__item-fig{ flex-shrink:0; display:flex; align-items:center; justify-content:center; }
/* サービスバッジ：濃い線・しっかりめ */
.mnav__item--svc .mnav__item-fig{ width:54px; height:54px; }
.mnav__item--svc .mnav__item-fig svg{ width:54px !important; height:54px !important; max-width:54px; max-height:54px; overflow:visible; }
.mnav__item--svc .mnav__item-fig svg [stroke]{ stroke:#3a3833 !important; stroke-width:2.4 !important; }
.mnav__item--svc .mnav__item-fig svg text[fill]{ fill:#3a3833 !important; }
/* WORKイラスト：currentColor なので color で濃く */

/* 企業情報リンク（点線区切り） */
.mnav__clink{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 2px; border-bottom:1px dotted var(--line);
  color:var(--ink); font-size:16px; font-weight:500;
}

/* 下部固定CTAバー */
.mnav__cta{ flex-shrink:0; display:flex; }
.mnav__cta-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:22px 8px; font-size:15px; font-weight:700; letter-spacing:.04em; text-align:center;
}
.mnav__cta-btn--contact{ background:var(--ink); color:var(--paper); }
.mnav__cta-btn--brand{ background:var(--accent-2); color:#fff; }
.mnav__cta-btn small{ display:block; font-size:9px; letter-spacing:.18em; font-weight:500; opacity:.85; margin-top:3px; }

/* PC幅ではドロワーは存在しない（保険） */
@media (min-width:861px){ .mnav{ display:none; } }

/* ============================================================
   サービスページ：このサービスの制作実績
   ============================================================ */
.svcpage__works{ padding:clamp(56px,8vw,96px) 0 clamp(24px,4vw,40px); }
.svcpage__works-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:32px; }
.svcpage__works-en{ font-size:clamp(32px,5vw,56px); font-weight:700; letter-spacing:.02em; line-height:1; margin:0; white-space:nowrap; }
.svcpage__works-jp{ font-size:13px; letter-spacing:.2em; color:var(--muted); margin:0; }
.svcpage__works-jp::before{ content:"/ "; color:var(--accent); }
.svcpage__works-more{ text-align:center; margin-top:12px; }

/* ============================================================
   サービスページ：タイトル（英字大見出し＋大切にしていること）
   ============================================================ */
.svchero{
  position:relative; background:var(--paper);
  padding:calc(76px + clamp(64px,12vh,150px)) 0 clamp(56px,9vh,110px);
}
/* 左端を .wrap（制作実績など下のセクション）とそろえる */
.svchero__inner{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.svchero__en{
  font-family:var(--sans); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(64px,10vw,160px); line-height:1; color:var(--ink); margin:0;
  white-space:nowrap;
}
.svchero__jp{ font-family:var(--sans); font-size:clamp(20px,2.4vw,34px); letter-spacing:.14em; margin:clamp(16px,2.4vw,32px) 0 0; }
.svchero__lead{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2vw,26px); line-height:1.6; margin:0 0 18px; }
.svchero__desc{ font-size:15px; line-height:2.1; letter-spacing:.06em; color:var(--ink); margin:0; }
.svchero__desc .ph{ white-space:nowrap; }
.svchero__scroll{
  position:absolute; left:calc(var(--gutter) * .5); bottom:32px;
  writing-mode:vertical-rl; font-size:12px; letter-spacing:.2em; color:var(--muted);
}
.svchero__scroll::after{ content:""; display:block; width:1px; height:80px; background:var(--muted); margin:12px auto 0; }

/* にじんで定着するアニメーションは functions.php（wakasa_ad_ink_inline_css）でページ内に直接出力 */

/* できること */
.svcdo{ padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px); }
.svcdo__grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.svcdo__item{ padding:28px 24px 8px; border-right:1px solid var(--line); }
.svcdo__item:first-child{ padding-left:0; }
.svcdo__item:last-child{ border-right:0; }
.svcdo__img{ aspect-ratio:4/3; overflow:hidden; margin-bottom:16px; }
.svcdo__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.svcdo__num{ font-size:12px; letter-spacing:.2em; color:var(--accent); }
.svcdo__jp{ font-family:var(--serif); font-weight:600; font-size:clamp(18px,1.6vw,22px); margin:10px 0 4px; }
.svcdo__en{ font-size:10px; letter-spacing:.2em; color:var(--muted); margin:0 0 14px; }
.svcdo__text{ font-size:14px; line-height:1.9; color:var(--ink); margin:0; }

@media (max-width:1100px){
  .svcdo__grid{ grid-template-columns:repeat(2,1fr); }
  .svcdo__item{ border-bottom:1px solid var(--line); padding-bottom:24px; }
  .svcdo__item:nth-child(2n){ border-right:0; }
  .svcdo__item:nth-child(2n+1){ padding-left:0; }
}
@media (max-width:860px){
  .svchero{ padding:calc(72px + 56px) 0 56px; }
  .svchero__inner{ grid-template-columns:1fr; gap:36px; }
  .svchero__en{ font-size:clamp(56px,19vw,110px); }
  .svchero__scroll{ display:none; }
  .svcdo__grid{ grid-template-columns:1fr; }
  .svcdo__item{ padding:22px 0; border-right:0; }
}

/* ============================================================
   実績の分類＝サービス（v1.9.15）
   ============================================================ */
/* トップのWORK：最新の実績＋一覧へのボタン */
.works--top{ padding-bottom:clamp(64px,10vh,120px); }
.works__more{ text-align:center; margin-top:16px; }
/* PROJECT（2つ以上のサービスにまたがる一貫制作）の目印 */
.workcard__cat--project{ display:inline-block; padding:3px 9px; background:var(--accent); color:#fff; letter-spacing:.2em; }
.workfilter__btn--project{ border-color:var(--accent); color:var(--accent); }
.workfilter__btn--project.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
/* 実績詳細：関わったサービスへのリンク */
.workhero__svcs{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; }
.workhero__svcs a, .workhero__svcs span{
  font-size:12px; letter-spacing:.1em; padding:6px 14px; border:1px solid #4a473f; border-radius:999px; color:var(--paper);
}
.workhero__svcs a:hover{ background:var(--paper); color:var(--ink); }
/* スマホメニュー：サービス一覧の下に、制作実績への1行リンク */
.mnav__row--gap{ margin-top:6px; }