@charset "UTF-8";
/* ============================================================
   株式会社 佐と着 — 共通スタイル
   色は #918664（ブランドカラー）＋ 墨 ＋ 白 の3色のみ
   見出し＝明朝／本文＝筑紫ゴシック（無い環境は游ゴシックへ）
   構造装置＝縦組みのセクション番号＋細い縦罫（ロゴの縦組み・のれんから）
   ============================================================ */

:root{
  --gold:#918664;          /* ブランドカラー（利休色系カーキゴールド） */
  --gold-deep:#6f6748;     /* 文字にゴールドを使うときの可読性確保用 */
  --ink:#080808;           /* 墨 */
  --ink-60:rgba(8,8,8,.62);
  --ink-40:rgba(8,8,8,.42);
  --paper:#ffffff;
  --paper-2:#fbfaf8;       /* ごく淡い生成り。面の切り替えにだけ使う */
  --paper-3:#f8f6f1;       /* waitona 帯の地色（プラスワンの区別・主張しすぎない濃さ） */
  --line:rgba(8,8,8,.12);
  --gold-line:rgba(145,134,100,.35);

  /* 余白は3段階。すべて同値にしない（強弱で「間」を作る） */
  --gap-s:clamp(28px,4vw,48px);
  --gap-m:clamp(64px,8vw,110px);
  --gap-l:clamp(96px,13vw,180px);

  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --gothic:"Tsukushi A Round Gothic","TsukuARdGothic-Regular","筑紫ゴシック","Yu Gothic","YuGothic","Hiragino Sans","Noto Sans JP",sans-serif;
  --latin:"Futura","Futura LT","Century Gothic","Jost","Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:15px;
  line-height:2.0;           /* 和文は行間を広く取ると品が出る */
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{width:min(1120px,88vw);margin-inline:auto}
.wrap--narrow{width:min(820px,88vw);margin-inline:auto}

/* ---------- 欧文ラベル（現サイトの Futura 使いを踏襲） ---------- */
.latin{
  font-family:var(--latin);
  letter-spacing:.42em;
  font-size:11px;
  text-transform:uppercase;
  color:var(--gold-deep);
}

/* ---------- 見出し ---------- */
h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.14em;line-height:1.7;margin:0}
h2{font-size:clamp(21px,2.4vw,29px)}
h3{font-size:clamp(18px,2vw,22px)}

/* ============================================================
   ヘッダー
   ============================================================ */
body>header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,52px);
  background:rgba(255,255,255,0);
  transition:background .5s,box-shadow .5s;
}
body>header.is-solid{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:34px;filter:brightness(0) invert(1);transition:filter .5s}
body>header.is-solid .brand img{filter:none}
.brand span{font-family:var(--serif);font-size:13px;letter-spacing:.3em;color:#fff;transition:color .5s}
body>header.is-solid .brand span{color:var(--ink)}

body>header nav{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center}
body>header nav a{
  font-family:var(--latin);font-size:10.5px;letter-spacing:.28em;
  color:#fff;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .5s,border-color .3s;
}
body>header.is-solid nav a{color:var(--ink)}
body>header nav a:hover{border-bottom-color:var(--gold)}

/* 下層ページはヒーローが浅いので、ヘッダーは最初から白地で置く */
body.page>header{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--line)}
body.page>header .brand img{filter:none}
body.page>header .brand span,body.page>header nav a{color:var(--ink)}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero::after{content:"";position:absolute;inset:0;background:rgba(8,8,8,.28)}
.hero-copy{
  position:absolute;z-index:2;left:clamp(24px,7vw,96px);bottom:clamp(72px,12vh,132px);color:#fff;
}
.hero-copy h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,3.4vw,40px);line-height:2.0;letter-spacing:.22em;
  margin:0 0 22px;text-shadow:0 1px 24px rgba(0,0,0,.35);
}
.hero-copy p{margin:0;font-size:13px;letter-spacing:.2em;opacity:.92}
.hero-copy .latin{color:#fff;opacity:.8;display:block;margin-bottom:20px}

/* 下層ページ用の浅いヒーロー */
.hero--sub{height:56svh;min-height:380px}
.hero--sub .hero-copy{bottom:clamp(44px,7vh,72px)}
.hero--sub .hero-copy h1{font-size:clamp(20px,2.8vw,32px);margin-bottom:14px}

/* ============================================================
   セクション共通：縦組みの番号＋縦罫（構造装置）
   ============================================================ */
section{padding-block:var(--gap-m)}
.sec-head{display:flex;align-items:baseline;gap:22px;margin-bottom:var(--gap-s)}
.sec-head .latin{white-space:nowrap}
.sec-head .rule{flex:1;height:1px;background:var(--gold-line)}

/* 縦組みラベル（掛け軸・のれんの視覚言語をレイアウトの構造として使う） */
.tate{
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-size:16px;letter-spacing:.5em;color:var(--ink);
  border-right:1px solid var(--gold-line);
  padding-right:18px;
  height:max-content;
}
/* 縦組みの中で番号だけは正立させる（横倒しの数字は読みにくい）。
   何番目の事業かが遠目にも分かるよう、番号は大きくブランドカラーで置く */
.tate .num{font-family:var(--latin);letter-spacing:0;font-size:22px;color:var(--gold);display:block;margin-bottom:20px;text-combine-upright:all;-webkit-text-combine:horizontal}

/* ============================================================
   About
   ============================================================ */
.about{padding-top:var(--gap-l)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:center}
/* 丸窓の借景 — 現サイトのキービジュアルに由来。マスクはここ1箇所だけに絞る */
.marumado{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden}
.marumado img{width:100%;height:100%;object-fit:cover}
.about-body h2{margin-bottom:26px}
.about-body p{margin:0 0 20px;color:var(--ink-60)}
.about-body p:last-child{margin-bottom:0}
.about-body .lead{color:var(--ink);font-size:16px}

/* ============================================================
   事業（同じ型を繰り返す）
   ============================================================ */
.services{background:var(--paper);padding-top:var(--gap-l)}

/* 対応シーン ── 守備範囲の広さを一行で。事業インデックスの前に置く（2026-08-19） */
.svc-scenes{
  margin:var(--gap-s) 0 0;padding-bottom:2px;
  font-family:var(--serif);font-size:clamp(12.5px,1.15vw,14px);
  letter-spacing:.16em;line-height:2.2;color:var(--ink-60);
}
.svc-scenes span{white-space:nowrap}   /* 「雑誌・広告撮影」が行またぎで割れないように */
.svc-scenes + .svc-index{margin-top:18px}

/* 4事業のインデックス ── 「4つある」ことと「何が違うか」を最初に一望させる */
.svc-index{
  list-style:none;counter-reset:none;margin:var(--gap-s) 0 var(--gap-m);padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);
}
.svc-index li{background:var(--paper)}
.svc-index a{display:block;padding:26px 20px 28px;height:100%;transition:background .3s}
.svc-index a:hover{background:var(--paper-2)}
.svc-index .n{
  display:block;font-family:var(--latin);font-size:26px;letter-spacing:.06em;
  color:var(--gold);line-height:1;margin-bottom:14px;
}
.svc-index .ttl{display:block;font-family:var(--serif);font-size:17px;letter-spacing:.12em;margin-bottom:8px}
.svc-index .sub{display:block;font-size:12px;letter-spacing:.1em;color:var(--gold-deep);margin-bottom:10px}
.svc-index .dsc{display:block;font-size:11.5px;line-height:1.85;color:var(--ink-40)}

.svc{display:grid;grid-template-columns:auto 1.05fr 1fr;gap:clamp(26px,4vw,56px);align-items:start;
     padding-block:var(--gap-m);border-top:1px solid var(--line)}
.svc:first-of-type{border-top:none;padding-top:var(--gap-s)}
.svc--rev .svc-fig{order:3}          /* 左右交互に組んで単調さを消す */

/* ── 見出し：縦組み。事業名の左に「何をするか」の一語を細く添える ── */
.svc-head{border-right:1px solid var(--gold-line);padding-right:clamp(16px,1.8vw,24px);text-align:center}
.svc-head .num{
  display:block;font-family:var(--latin);font-size:23px;letter-spacing:.04em;
  color:var(--gold);line-height:1;margin-bottom:22px;
}
/* 縦書きでは flex の row が「上下」に並ぶため、column にして事業名と一語を左右に置く */
.svc-title-wrap{writing-mode:vertical-rl;display:flex;flex-direction:column;gap:15px;margin-inline:auto;height:max-content}
.svc-title-wrap h3{
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.3em;margin:0;line-height:1;
  font-feature-settings:"palt";
}
.svc-title-wrap .svc-sub{
  font-family:var(--serif);font-size:11.5px;letter-spacing:.5em;color:var(--gold-deep);
  padding-right:13px;border-right:1px dotted var(--gold-line);align-self:flex-start;
}

/* ── 写真：白の余白で額装する（掛け軸の表装から） ── */
.svc-fig figure{margin:0;background:var(--paper);border:1px solid var(--line);padding:clamp(10px,1vw,15px)}
.svc-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.svc-fig.is-wide img{aspect-ratio:3/2}
/* チラシ・誌面など「紙面そのものが情報」の素材は切らずに全体を見せる */
.svc-fig.is-doc img{aspect-ratio:auto;object-fit:contain}
.svc-fig figcaption{
  margin:13px 2px 2px;padding-top:12px;border-top:1px solid var(--line);border-left:none;padding-left:0;
}
figcaption{
  margin-top:12px;font-size:11.5px;line-height:1.9;color:var(--ink-40);letter-spacing:.08em;
  border-left:2px solid var(--gold);padding-left:11px;
}

.svc-body{padding-top:6px}
.svc-body>p{margin:0 0 30px;color:var(--ink-60);font-size:14px}
/* ヘアメイクの想い：欧文ラベル＋明朝の一言（佐々木先生「Beauty with Comfort」） */
.svc-concept{
  font-family:var(--serif);font-size:21px;letter-spacing:.22em;color:var(--ink);
  margin:0 0 22px;
}
.svc-concept .latin{display:block;margin-bottom:10px}
/* 実績リスト：年号を大きく置き、行そのものを一枚の札のように扱う */
.works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.works li{
  display:grid;grid-template-columns:64px 1fr;gap:18px;
  padding:15px 4px 15px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.85;
  transition:background .3s,padding-left .3s;
}
.works li:hover{background:var(--paper-2);padding-left:8px}
.works .y{font-family:var(--latin);font-size:13px;letter-spacing:.06em;color:var(--gold);padding-top:2px}
.works .d{color:var(--ink-40);font-size:12px;display:block;margin-top:2px}

/* ============================================================
   waitona ── 4事業に対する「＋1」。地色と組み方を変えて明確に切り離す
   ============================================================ */
/* 主張は4事業より一段弱く：面を狭め、写真と文字を小さくする。組み方は変えない */
/* padding は .plus-inner 側で持つ。section 既定の余白と二重に効かせない */
.plus{background:var(--paper-3);margin-top:var(--gap-m);padding-block:0}
.plus .wrap{width:min(940px,88vw)}
.plus-inner{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,4.5vw,60px);align-items:center;
            padding-block:clamp(52px,6vw,84px)}
.plus-fig{position:relative}
.plus-fig img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* 「＋」の記号そのものを見出しの位置に置き、番号の連番から外れていることを示す */
.plus-mark{
  font-family:var(--latin);font-size:22px;line-height:1;color:var(--gold);
  display:block;margin-bottom:16px;font-weight:300;
}
.plus-body .wordmark{
  font-family:var(--latin);font-size:clamp(20px,2.2vw,27px);letter-spacing:.24em;
  color:var(--gold-deep);margin:0 0 5px;font-weight:400;
}
.plus-body .yomi{font-size:10.5px;letter-spacing:.28em;color:var(--ink-40);margin:0 0 20px}
.plus-body h3{margin-bottom:20px}
.plus-body p{margin:0 0 20px;color:var(--ink-60);font-size:13px}
.plus-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.plus-tags li{border:1px solid var(--gold-line);padding:5px 13px;font-size:11px;letter-spacing:.1em;background:rgba(255,255,255,.5)}
.btn-line{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--latin);font-size:11px;letter-spacing:.26em;color:var(--gold-deep);
  border-bottom:1px solid var(--gold);padding-bottom:6px;transition:gap .3s;
}
.btn-line:hover{gap:22px}

/* ============================================================
   取引実績（社名を並べる＝法人に最も効く信用材料）
   ============================================================ */
.clients{background:var(--paper-2);padding-block:var(--gap-m)}
.client-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--gap-s)}
.client-list div{background:var(--paper-2);padding:30px 22px;font-size:13.5px;letter-spacing:.1em;line-height:1.7}
.client-list small{display:block;font-size:11px;color:var(--ink-40);letter-spacing:.06em;margin-top:6px}
.clients .note{margin-top:20px;font-size:11.5px;color:var(--ink-40)}

/* ============================================================
   カタログ（要件④：Adobeアイコン→表紙サムネイル）
   ============================================================ */
.catalog{padding-block:var(--gap-m)}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);margin-top:var(--gap-s)}
.cat-card{display:flex;gap:24px;align-items:flex-start;border:1px solid var(--line);padding:22px;transition:border-color .3s}
.cat-card:hover{border-color:var(--gold)}
.cat-thumb{width:132px;flex:none;aspect-ratio:1/1.414;overflow:hidden;background:#eee;box-shadow:0 6px 22px rgba(8,8,8,.10)}
.cat-thumb img{width:100%;height:100%;object-fit:cover}
.cat-card h3{font-size:16px;margin-bottom:10px}
.cat-card p{margin:0 0 14px;font-size:12px;color:var(--ink-40);line-height:1.9}
.cat-card .dl{font-family:var(--latin);font-size:10.5px;letter-spacing:.24em;color:var(--gold-deep);border-bottom:1px solid var(--gold-line);padding-bottom:3px}

/* ============================================================
   NEWS（サムネイル付き）
   ============================================================ */
.news-list{list-style:none;margin:var(--gap-s) 0 0;padding:0;border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{
  display:grid;grid-template-columns:132px 96px 108px 1fr;gap:24px;align-items:center;
  padding:20px 4px;transition:background .3s;
}
.news-list a:hover{background:var(--paper-2)}
.news-list a:hover .th img{transform:scale(1.04)}
.th{overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.th img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-list time{font-family:var(--latin);font-size:11px;letter-spacing:.1em;color:var(--ink-40)}
.news-list .cat{font-size:10.5px;letter-spacing:.16em;color:var(--gold-deep);border:1px solid var(--gold-line);text-align:center;padding:3px 0}
.news-list .t{font-size:13.5px;line-height:1.8}
.news-more{margin-top:var(--gap-s);text-align:right}

/* NEWS一覧ページのカード組み */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.6vw,44px);margin-top:var(--gap-s)}
.news-card{display:block;transition:opacity .3s}
.news-card:hover{opacity:.82}
.news-card .th{aspect-ratio:3/2;margin-bottom:16px}
.news-card .meta{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.news-card time{font-family:var(--latin);font-size:11px;letter-spacing:.1em;color:var(--ink-40)}
.news-card .cat{font-size:10px;letter-spacing:.16em;color:var(--gold-deep);border:1px solid var(--gold-line);padding:2px 10px}
.news-card h3{font-size:15px;line-height:1.9;letter-spacing:.08em}

/* ============================================================
   waitona 独自ページ
   ============================================================ */
.wt-lead{text-align:center;padding:var(--gap-m) 0 0}  /* 下は次セクションの余白に任せる */
.wt-lead .wordmark{font-family:var(--latin);font-size:clamp(30px,5vw,52px);letter-spacing:.26em;color:var(--gold-deep);margin:0 0 10px;font-weight:400}
.wt-lead .yomi{font-size:11px;letter-spacing:.32em;color:var(--ink-40);margin:0 0 var(--gap-s)}
.wt-lead p{max-width:30em;margin:0 auto 20px;color:var(--ink-60);font-size:14px}
.wt-lead .quote{font-family:var(--serif);font-size:clamp(17px,2.2vw,22px);letter-spacing:.16em;color:var(--ink);margin:0 0 var(--gap-s)}

.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.4vw,44px);margin-top:var(--gap-s)}
.menu-item .th{aspect-ratio:3/4;margin-bottom:18px;overflow:hidden}
.menu-item .th img{width:100%;height:100%;object-fit:cover}
.menu-item h3{font-size:17px;margin-bottom:12px}
.menu-item p{margin:0 0 14px;font-size:13px;color:var(--ink-60);line-height:1.95}
.menu-item ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.menu-item li{padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-60)}

.flow{background:var(--paper-3)}
.flow-list{list-style:none;counter-reset:f;margin:var(--gap-s) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gold-line)}
.flow-list li{counter-increment:f;background:var(--paper-3);padding:28px 22px}
.flow-list li::before{
  content:"0" counter(f);display:block;font-family:var(--latin);font-size:12px;
  letter-spacing:.16em;color:var(--gold);margin-bottom:14px;
}
.flow-list h3{font-size:15px;margin-bottom:10px}
.flow-list p{margin:0;font-size:12.5px;color:var(--ink-60);line-height:1.95}

/* 佐と着本体へ戻す導線 */
.backlink{text-align:center;padding-block:var(--gap-m);border-top:1px solid var(--line)}
.backlink p{margin:0 0 18px;font-size:13px;color:var(--ink-60)}

/* ============================================================
   記事ページ
   ============================================================ */
.article{padding-block:var(--gap-m)}
.article-head{border-bottom:1px solid var(--line);padding-bottom:var(--gap-s);margin-bottom:var(--gap-s)}
.article-head .meta{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.article-head time{font-family:var(--latin);font-size:11px;letter-spacing:.12em;color:var(--ink-40)}
.article-head .cat{font-size:10.5px;letter-spacing:.16em;color:var(--gold-deep);border:1px solid var(--gold-line);padding:3px 12px}
.article-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,30px);line-height:1.9;letter-spacing:.12em;margin:0}
.article-body p{margin:0 0 30px;color:var(--ink-60)}
.article-body figure{margin:var(--gap-s) 0}
.article-body figure img{width:100%}
.article-body h2{margin:var(--gap-s) 0 22px;font-size:19px}
.article-body .quote{
  border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:0 0 30px;
  font-family:var(--serif);font-size:16px;line-height:2.1;color:var(--ink);letter-spacing:.1em;
}
.article-meta{margin-top:var(--gap-s);border-top:1px solid var(--line);padding-top:26px}
.article-meta dl{display:grid;grid-template-columns:120px 1fr;gap:0;margin:0}
.article-meta dt,.article-meta dd{margin:0;padding:9px 0;font-size:12.5px}
.article-meta dt{color:var(--gold-deep);letter-spacing:.14em}
.article-meta dd{color:var(--ink-60)}
.article-body>header nav{display:flex;justify-content:space-between;gap:20px;margin-top:var(--gap-m);border-top:1px solid var(--line);padding-top:26px}
.article-nav a{font-family:var(--latin);font-size:10.5px;letter-spacing:.24em;color:var(--gold-deep)}
.article-nav a:hover{text-decoration:underline;text-underline-offset:6px}

/* ============================================================
   会社概要
   ============================================================ */
/* 記事内の作品ギャラリー（本文の流れを切らないよう罫や枠は付けない） */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin:var(--gap-s) 0}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.gal figcaption{font-size:11px;letter-spacing:.08em;line-height:1.75;color:var(--ink-40);margin-top:9px}

/* 本文中に単独で置く図版 */
.fig-solo{margin:var(--gap-s) 0}
.fig-solo img{width:100%;display:block}
.fig-solo figcaption{font-size:11px;letter-spacing:.08em;line-height:1.75;color:var(--ink-40);margin-top:9px}

/* 受講者の声（引用。地色を変えて本文と区別する） */
.voice{background:var(--paper-2);border-left:1px solid var(--gold-line);
  padding:clamp(22px,3vw,34px);margin:var(--gap-s) 0}
.voice p{margin:0 0 16px;font-size:13.5px;color:var(--ink-60);line-height:2.05}
.voice .by{margin:0;font-size:11.5px;letter-spacing:.14em;color:var(--gold-deep)}

.company{background:var(--paper-2);padding-block:var(--gap-m)}
.company dl{display:grid;grid-template-columns:170px 1fr;margin:var(--gap-s) 0 0;border-top:1px solid var(--line)}
.company dt,.company dd{padding:17px 0;border-bottom:1px solid var(--line);margin:0;font-size:13.5px}
.company dt{color:var(--gold-deep);letter-spacing:.14em}
.company dd{color:var(--ink-60);line-height:1.9}

/* ============================================================
   代表プロフィール（会社概要の生成り地に対して白地で受ける）
   年表は事業内容の .works を流用し、社名の羅列だけ枠付きの列に組む
   ============================================================ */
.profile{background:var(--paper);padding-block:var(--gap-m)}
.profile-head{
  display:grid;grid-template-columns:210px 1fr;gap:clamp(22px,3vw,40px);
  align-items:start;margin-top:var(--gap-s);
}
.profile-photo{background:var(--paper);border:1px solid var(--line);padding:10px}
.profile-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.profile-head .profile-name{margin-top:0}
.profile-name{
  font-family:var(--serif);font-size:clamp(19px,2.4vw,24px);letter-spacing:.16em;
  margin:var(--gap-s) 0 18px;
}
.profile-name span{
  display:block;font-family:var(--gothic);font-size:11.5px;letter-spacing:.14em;
  color:var(--ink-40);margin-top:10px;
}
.profile-lead{margin:0;color:var(--ink-60);font-size:14px}
.profile h3{
  font-family:var(--gothic);font-size:12px;letter-spacing:.18em;color:var(--gold-deep);
  margin:var(--gap-s) 0 14px;padding-bottom:10px;border-bottom:1px solid var(--gold-line);
}
.profile .works{border-top:none}
.profile-note{margin:0 0 14px;font-size:13px;color:var(--ink-60)}
.tag-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tag-list li{
  font-size:11.5px;letter-spacing:.08em;line-height:1.6;color:var(--ink-60);
  border:1px solid var(--line);padding:7px 14px;
}

/* ============================================================
   Contact（墨地。ボタンは白地に反転させて溶けを防ぐ）
   ============================================================ */
/* LINEのQR（墨地の上に置くので白のマットで受ける） */
.line-qr{margin-top:var(--gap-m)}
.line-qr img{width:132px;height:132px;background:#fff;padding:11px;display:block;margin:0 auto}
.line-qr p{margin:16px 0 0;font-size:11.5px;line-height:2;letter-spacing:.1em;color:rgba(255,255,255,.7)}

.contact{background:var(--ink);color:#fff;text-align:center;padding-block:var(--gap-l)}
.contact .latin{color:rgba(255,255,255,.6)}
.contact h2{margin:18px 0 22px;color:#fff}
.contact p{margin:0 auto 40px;max-width:34em;color:rgba(255,255,255,.66);font-size:13.5px}
.btn{
  display:inline-block;background:#fff;color:var(--ink);
  font-family:var(--latin);font-size:11px;letter-spacing:.3em;
  padding:19px 54px;border:1px solid #fff;transition:background .3s,color .3s;
}
.btn:hover{background:transparent;color:#fff}

/* 問い合わせフォーム（墨地の上。入力欄は白の細線だけで受ける） */
.cform{max-width:34em;margin:var(--gap-s) auto 0;text-align:left}
.cform label{display:block;margin-bottom:22px;font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.66)}
.cform input,.cform select,.cform textarea{
  display:block;width:100%;margin-top:10px;padding:13px 15px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);border-radius:0;
  color:#fff;font-family:var(--gothic);font-size:14px;letter-spacing:.06em;line-height:1.8;
  -webkit-appearance:none;appearance:none;
}
.cform textarea{resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.09);
}
.cform option{color:var(--ink)}   /* ドロップダウンは環境側の白地で開く */
.cform button.btn{width:100%;margin-top:8px;cursor:pointer;font-family:var(--gothic);letter-spacing:.26em}
.cform-note{margin:18px 0 0;font-size:11px;line-height:2;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.cform-note a{color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.4)}
.cform-note.is-shown{color:rgba(255,255,255,.75)}
.contact .mail{display:block;margin-top:28px;font-family:var(--latin);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.66)}

footer{padding:34px 0;text-align:center;font-family:var(--latin);font-size:10px;letter-spacing:.24em;color:var(--ink-40)}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:860px){
  body>header nav{display:none}
  .about-grid{grid-template-columns:1fr;gap:var(--gap-s)}
  .marumado{width:74%;margin-inline:auto}
  .svc{grid-template-columns:1fr;gap:24px}
  /* 縦組みの見出しは横組みに倒す（狭い画面では縦書きが読みづらいため） */
  .svc-head{border-right:none;border-left:2px solid var(--gold);padding:0 0 0 14px;text-align:left;
            display:flex;align-items:baseline;gap:14px}
  .svc-head .num{margin:0;font-size:19px}
  .svc-title-wrap{writing-mode:horizontal-tb;display:flex;align-items:baseline;gap:14px;margin:0}
  .svc-title-wrap .svc-sub{padding:0 0 0 14px;border-right:none;border-left:1px dotted var(--gold-line);letter-spacing:.3em}
  .svc--rev .svc-fig{order:0}
  .svc-index{grid-template-columns:1fr 1fr}
  .svc--rev .svc-fig{order:0}
  .plus-inner{grid-template-columns:1fr;gap:var(--gap-s)}
  .plus-fig img{aspect-ratio:4/3}
  .client-list{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr}
  .news-list a{grid-template-columns:104px 1fr;row-gap:8px;column-gap:18px}
  .news-list .th{grid-row:1/3}
  .news-list .cat{justify-self:start;padding:3px 12px}
  .news-list .t{grid-column:2}
  .news-grid{grid-template-columns:1fr 1fr}
  .menu-grid{grid-template-columns:1fr}
  .flow-list{grid-template-columns:1fr 1fr}
  .company dl{grid-template-columns:1fr}
  .company dt{padding-bottom:0;border-bottom:none}
  .article-meta dl{grid-template-columns:1fr}
  .article-meta dt{padding-bottom:0}
}
@media (max-width:640px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .profile-head{grid-template-columns:1fr}
  .profile-photo{max-width:220px}
}
@media (max-width:520px){
  .client-list,.news-grid{grid-template-columns:1fr}
  .hero-copy h1{letter-spacing:.16em}
}

/* ── 事業アイキャッチのスライド表示（複数素材をゆっくりクロスフェード） ── */
.fig-slides .slides{display:grid}
.fig-slides .slides img{grid-area:1/1;opacity:0;transition:opacity 1.4s ease}
.fig-slides .slides img.is-active{opacity:1}

/* ── 指導先ホテルのロゴ（ご支給データのみ掲載・無加工） ── */
.logo-strip{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:18px}
.logo-strip img{height:72px;width:auto;display:block;border:1px solid var(--line)}