/*
Theme Name: ヒトココロ
Theme URI: https://hitokokoro-love.com/
Description: ヒトココロ（hitokokoro）のブランドデザインに合わせた、コラム表示用のWordPressテーマ。静的サイトと同じローズ×ゴールドの世界観で記事・一覧を表示します。
Author: ヒトココロ
Version: 1.0.0
Requires at least: 6.0
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: hitokokoro
*/

@charset "UTF-8";
/* =========================================================
   ヒトココロ -hitokokoro-  /  Style Sheet
   復縁・恋愛カウンセリング　上坂葵
   Design tokens drawn from 和の伝統色（灰桜 / 青磁）
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* color — 恋結び：ローズ × ゴールド（elegant / warm / hopeful） */
  --paper:    #FBF6F2;   /* 温かなアイボリー・ブラッシュ：基本背景 */
  --paper-2:  #FFFDFB;   /* カード・明るい面 */
  --paper-3:  #F6E7E3;   /* 淡い桜色：差し色 */
  --ink:      #3A2730;   /* 深いローズウッド：本文 */
  --ink-soft: #7A6A6E;   /* 補助テキスト */
  --ink-faint:#A99CA0;   /* キャプション */
  --rose:     #C0466B;   /* ローズ：主アクセント（恋・希望） */
  --rose-deep:#97315A;   /* 深いラズベリー */
  --rose-tint:#F5DBE2;   /* ローズの淡い面 */
  --sage:     #C9A14E;   /* シャンパンゴールド：副アクセント（上質・特別感） */
  --sage-deep:#9A7322;   /* 深いゴールド */
  --sage-tint:#F3E6C8;   /* ゴールドの淡い面 */
  --plum:     #471F33;   /* 深いワイン：フッター/CTA */
  --line:     #EBDDD8;   /* 罫線 */
  --shadow:   0 1px 2px rgba(74,31,51,.05), 0 16px 44px -24px rgba(74,31,51,.26);
  --shadow-sm:0 1px 2px rgba(74,31,51,.05), 0 10px 28px -20px rgba(74,31,51,.20);

  /* type */
  --serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --latin: "Fraunces", "Shippori Mincho", "Noto Serif JP", serif;

  /* metrics */
  --container: 1120px;
  --reading: 720px;
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;
  --pad-section: clamp(64px, 9vw, 132px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.95;
  letter-spacing:.04em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul{ list-style:none; padding:0; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:var(--pad-section); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }
.section--paper2{ background:var(--paper-2); }
.section--tint{ background:var(--paper-3); }
.section--sage{ background:linear-gradient(180deg,var(--sage-tint),#EFDFB8); }
.center{ text-align:center; }
.measure{ max-width:var(--reading); }
.mx-auto{ margin-inline:auto; }
.u-mark{ background:linear-gradient(transparent 60%, var(--sage-tint) 60%); padding:0 .06em; border-radius:1px; }
/* placeholder figure with a real image */
.ph:has(img){ border:none; background:none; padding:0; min-height:0; display:block; }
.ph > img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  font-family:var(--latin);
  font-size:.84rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--rose);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--rose); display:inline-block; opacity:.7;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{
  content:""; width:26px; height:1px; background:var(--rose); display:inline-block; opacity:.7;
}

.h-jp{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--ink);
}
.title{ font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:500; }
.title--lg{ font-size:clamp(2rem,5vw,3.2rem); font-weight:400; line-height:1.45; }
.subtitle{ font-size:clamp(1.15rem,2vw,1.45rem); font-weight:500; }
.lead{ color:var(--ink-soft); font-size:1.02rem; line-height:2.05; }
.kome{ color:var(--ink-faint); font-size:.82rem; line-height:1.9; letter-spacing:.03em; }

.section-head{ margin-bottom:clamp(38px,5vw,60px); }
.section-head .title{ margin-top:.5em; }
.section-head .lead{ margin-top:1.1em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.05em 2.2em;
  font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.08em;
  border-radius:999px; border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s, color .35s, box-shadow .35s;
  line-height:1.2; text-align:center;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .35s; }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:linear-gradient(135deg,var(--rose),var(--rose-deep)); color:#fff; box-shadow:0 14px 30px -14px rgba(151,49,90,.5); }
.btn--primary:hover{ background:var(--rose-deep); transform:translateY(-2px); }
.btn--dark{ background:var(--plum); color:#FBEFEA; }
.btn--dark:hover{ background:#2E1320; transform:translateY(-2px); }
.btn--ghost{ background:transparent; border-color:var(--rose); color:var(--rose-deep); }
.btn--ghost:hover{ background:var(--rose); color:#fff; transform:translateY(-2px); }
.btn--sage{ background:var(--sage); color:var(--plum); }
.btn--sage:hover{ background:var(--sage-deep); color:#fff; transform:translateY(-2px); }
.btn--sm{ padding:.78em 1.6em; font-size:.86rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row--center{ justify-content:center; }

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--rose-deep); font-weight:500; font-size:.92rem; letter-spacing:.06em;
  border-bottom:1px solid transparent; transition:border-color .3s, gap .3s;
}
.textlink:hover{ border-color:var(--rose); gap:.85em; }
.textlink svg{ width:.95em; height:.95em; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,246,242,.85);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.brand{ display:flex; align-items:baseline; gap:.6em; line-height:1; }
.brand__mark{ font-family:var(--serif); font-weight:600; font-size:1.5rem; letter-spacing:.18em; color:var(--ink); }
.brand__sub{ font-family:var(--latin); font-size:.78rem; letter-spacing:.36em; text-transform:uppercase; color:var(--rose); padding-bottom:.15em; }
.nav__menu{ display:flex; align-items:center; gap:30px; }
.nav__link{
  font-size:.9rem; letter-spacing:.06em; color:var(--ink); position:relative; padding:.4em 0; font-weight:500;
}
.nav__link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--rose); transition:width .3s; }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ width:100%; }
.nav__link[aria-current="page"]{ color:var(--rose-deep); }
.nav__has-children{ position:relative; }
.nav__panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:10px; min-width:260px; opacity:0; visibility:hidden; transition:opacity .25s, transform .25s;
}
.nav__has-children:hover .nav__panel,.nav__has-children:focus-within .nav__panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__panel a{ display:block; padding:.7em .9em; border-radius:var(--r-sm); transition:background .25s; }
.nav__panel a:hover{ background:var(--rose-tint); }
.nav__panel .pl{ font-weight:500; font-size:.92rem; }
.nav__panel .ps{ display:block; font-size:.74rem; color:var(--ink-faint); letter-spacing:.02em; margin-top:.1em; }
.nav__cta{ margin-left:6px; }
.nav__toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; padding-block:clamp(56px,8vw,108px); }
.hero__copy .eyebrow{ margin-bottom:1.6em; }
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5.4vw,3.7rem); line-height:1.5; letter-spacing:.05em; color:var(--ink);
}
.hero__title b{ font-weight:600; color:var(--rose-deep); }
.hero__title .thin{ font-size:.62em; display:block; color:var(--ink-soft); letter-spacing:.1em; margin-top:.4em; font-weight:400; }
.hero__lead{ margin-top:1.8em; color:var(--ink-soft); font-size:1.04rem; line-height:2.1; max-width:30em; }
.hero__cta{ margin-top:2.4em; }
.hero__note{ margin-top:1.6em; font-size:.8rem; color:var(--ink-faint); letter-spacing:.03em; }
.hero__visual{ position:relative; }
.hero__thread{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* placeholder figure */
.ph{
  position:relative; border:1.5px dashed var(--rose); background:
    repeating-linear-gradient(45deg,rgba(192,70,107,.05) 0 12px,transparent 12px 24px), var(--paper-2);
  border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--rose-deep); padding:24px; min-height:200px; gap:.5em;
}
.ph__tag{ font-family:var(--latin); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--rose); }
.ph__label{ font-family:var(--serif); font-size:1rem; font-weight:500; color:var(--ink); line-height:1.7; }
.ph__spec{ font-size:.76rem; color:var(--ink-faint); letter-spacing:.02em; }
.ph--hero{ aspect-ratio:4/5; min-height:340px; }
.ph--wide{ aspect-ratio:16/9; }
.ph--square{ aspect-ratio:1/1; }
.ph--round{ border-radius:50%; aspect-ratio:1/1; }

/* ---------- Empathy ---------- */
.empathy{ background:linear-gradient(180deg,var(--paper-3), var(--paper)); }
.empathy__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px; margin-top:clamp(30px,4vw,48px); }
.empathy__item{
  display:flex; gap:.9em; align-items:flex-start; padding:1.1em 1.3em; background:var(--paper-2);
  border-radius:var(--r); border:1px solid var(--line); font-size:.96rem; color:var(--ink); line-height:1.85;
}
.empathy__item::before{
  content:""; flex:none; width:9px; height:9px; margin-top:.7em; border-radius:50%;
  background:var(--rose); box-shadow:0 0 0 4px var(--rose-tint);
}
.empathy__out{ margin-top:clamp(34px,4vw,52px); text-align:center; }
.empathy__out .subtitle{ color:var(--ink); }

/* ---------- Method (process) ---------- */
.method__steps{ display:grid; gap:22px; margin-top:clamp(34px,4vw,54px); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,38px); align-items:start;
  padding:clamp(24px,3vw,38px); background:var(--paper-2); border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative;
}
.step__no{ font-family:var(--latin); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700; color:var(--rose); line-height:1; }
.step__no small{ display:block; font-family:var(--latin); font-size:.32em; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); margin-top:.5em; }
.step__body h3{ font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:.05em; }
.step__body p{ margin-top:.7em; color:var(--ink-soft); font-size:.96rem; }
.step__tag{ display:inline-block; margin-top:1em; font-size:.74rem; letter-spacing:.14em; color:var(--sage-deep); background:var(--sage-tint); padding:.4em 1em; border-radius:999px; }

/* ---------- Reasons / features ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.feat{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,3vw,40px);
  box-shadow:var(--shadow-sm); transition:transform .4s, box-shadow .4s;
}
.feat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.feat__no{ font-family:var(--latin); font-size:.8rem; letter-spacing:.28em; color:var(--rose); }
.feat__icon{ width:46px; height:46px; margin-bottom:18px; color:var(--sage-deep); }
.feat h3{ font-family:var(--serif); font-size:1.22rem; font-weight:500; letter-spacing:.04em; margin-top:.2em; }
.feat p{ margin-top:.8em; color:var(--ink-soft); font-size:.95rem; }
.feat__data{ margin-top:1.1em; font-family:var(--latin); font-size:1.05rem; color:var(--rose-deep); letter-spacing:.04em; }
.feat__data b{ font-size:1.9rem; font-weight:600; }

/* stat band */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); }
.stat{ padding:clamp(28px,4vw,46px) 20px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat__num{ font-family:var(--latin); font-weight:600; font-size:clamp(2.4rem,5vw,3.4rem); color:var(--rose-deep); line-height:1; }
.stat__num span{ font-size:.45em; margin-left:.15em; color:var(--ink-soft); }
.stat__label{ margin-top:.9em; font-size:.86rem; color:var(--ink-soft); letter-spacing:.06em; }

/* ---------- Service cards ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card{
  display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s, box-shadow .4s;
}
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.svc-card__media{ position:relative; }
.svc-card__media .ph{ border-radius:0; border-left:none; border-right:none; border-top:none; min-height:170px; aspect-ratio:16/10; }
.svc-card__no{ position:absolute; top:14px; left:14px; z-index:3; font-family:var(--latin); font-size:.74rem; letter-spacing:.24em; color:#fff; background:rgba(74,31,51,.55); padding:.3em .9em; border-radius:999px; }
.svc-card__body{ padding:clamp(22px,2.5vw,30px); display:flex; flex-direction:column; flex:1; }
.svc-card__cat{ font-family:var(--latin); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep); }
.svc-card h3{ font-family:var(--serif); font-size:1.3rem; font-weight:500; letter-spacing:.04em; margin-top:.25em; }
.svc-card p{ margin-top:.8em; color:var(--ink-soft); font-size:.92rem; flex:1; }
.svc-card .textlink{ margin-top:1.4em; }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.1em; }
.tag{ font-size:.74rem; letter-spacing:.04em; color:var(--rose-deep); background:var(--rose-tint); padding:.32em .9em; border-radius:999px; }

/* ---------- Profile block ---------- */
.profile{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,5vw,64px); align-items:center; }
.profile__media{ position:relative; }
.profile__badge{
  position:absolute; right:-14px; bottom:24px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); padding:.9em 1.2em; box-shadow:var(--shadow); text-align:center;
}
.profile__badge b{ font-family:var(--latin); font-size:1.7rem; color:var(--rose-deep); display:block; line-height:1; }
.profile__badge span{ font-size:.72rem; color:var(--ink-soft); letter-spacing:.04em; }
.profile__name{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.1rem); font-weight:500; letter-spacing:.08em; }
.profile__name .en{ font-family:var(--latin); font-size:.5em; letter-spacing:.2em; color:var(--rose); margin-left:1em; }
.profile__role{ margin-top:.5em; font-size:.86rem; letter-spacing:.16em; color:var(--sage-deep); }
.profile__lead{ margin-top:1.5em; color:var(--ink-soft); font-size:.98rem; line-height:2.05; }
.profile__list{ margin-top:1.6em; display:grid; gap:12px; }
.profile__list li{ display:flex; gap:.8em; align-items:flex-start; font-size:.94rem; }
.profile__list svg{ flex:none; width:1.2em; height:1.2em; color:var(--sage-deep); margin-top:.35em; }

/* ---------- Column cards ---------- */
.col-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.col-card{
  display:flex; flex-direction:column; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s, box-shadow .4s;
}
.col-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.col-card__media .ph{ border-radius:0; border:none; min-height:150px; aspect-ratio:16/9; }
.col-card__body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.col-card__meta{ display:flex; align-items:center; gap:12px; font-size:.74rem; color:var(--ink-faint); letter-spacing:.04em; }
.col-card__cat{ color:var(--sage-deep); background:var(--sage-tint); padding:.25em .8em; border-radius:999px; letter-spacing:.06em; }
.col-card h3{ font-family:var(--serif); font-size:1.08rem; font-weight:500; line-height:1.7; letter-spacing:.03em; margin-top:.8em; }
.col-card p{ margin-top:.7em; color:var(--ink-soft); font-size:.86rem; flex:1; }
.col-card__foot{ margin-top:1.2em; display:flex; align-items:center; justify-content:space-between; }
.col-card.is-soon{ opacity:.78; }
.col-card.is-soon .badge-soon{ font-size:.72rem; letter-spacing:.1em; color:var(--ink-faint); border:1px solid var(--line); padding:.3em .9em; border-radius:999px; }

.col-filter{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(34px,4vw,52px); }
.col-filter button{
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-soft);
  padding:.6em 1.3em; border-radius:999px; font-size:.84rem; letter-spacing:.05em; transition:all .3s;
}
.col-filter button:hover{ border-color:var(--rose); color:var(--rose-deep); }
.col-filter button.is-active{ background:var(--rose); border-color:var(--rose); color:#fff; }

/* ---------- Flow (steps numbered timeline) ---------- */
.flow{ display:grid; gap:0; max-width:780px; margin-inline:auto; }
.flow__item{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding-bottom:34px; position:relative; }
.flow__item:last-child{ padding-bottom:0; }
.flow__dot{ position:relative; display:flex; flex-direction:column; align-items:center; }
.flow__dot span{
  width:46px; height:46px; flex:none; border-radius:50%; background:var(--rose); color:#fff;
  display:grid; place-items:center; font-family:var(--latin); font-weight:600; font-size:1.1rem; z-index:2;
}
.flow__item:not(:last-child) .flow__dot::after{ content:""; position:absolute; top:46px; bottom:-12px; width:2px; background:var(--line); }
.flow__body{ padding-top:.4em; }
.flow__body h3{ font-family:var(--serif); font-size:1.15rem; font-weight:500; letter-spacing:.04em; }
.flow__body p{ margin-top:.6em; color:var(--ink-soft); font-size:.94rem; }

/* ---------- Voice / testimonial ---------- */
.voice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.voice{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,34px); box-shadow:var(--shadow-sm); position:relative; }
.voice__quote{ font-family:var(--serif); font-size:3rem; line-height:1; color:var(--rose-tint); position:absolute; top:18px; right:24px; }
.voice p{ position:relative; color:var(--ink); font-size:.95rem; line-height:2; }
.voice__who{ margin-top:1.4em; display:flex; align-items:center; gap:12px; }
.voice__who .ph{ width:46px; height:46px; min-height:auto; border-radius:50%; padding:0; }
.voice__who b{ font-size:.9rem; font-weight:500; }
.voice__who span{ display:block; font-size:.76rem; color:var(--ink-faint); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:14px; }
.faq__item{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.faq__q{
  width:100%; text-align:left; background:none; border:none; padding:1.3em 1.5em; display:flex; gap:1em; align-items:flex-start;
  font-family:var(--serif); font-size:1.02rem; font-weight:500; color:var(--ink); letter-spacing:.03em; line-height:1.7;
}
.faq__q .q{ font-family:var(--latin); color:var(--rose); font-weight:600; flex:none; }
.faq__q .ic{ margin-left:auto; flex:none; width:18px; height:18px; position:relative; margin-top:.45em; transition:transform .35s; }
.faq__q .ic::before,.faq__q .ic::after{ content:""; position:absolute; background:var(--rose); border-radius:2px; }
.faq__q .ic::before{ top:8px; left:0; width:18px; height:2px; }
.faq__q .ic::after{ top:0; left:8px; width:2px; height:18px; transition:transform .35s; }
.faq__item.is-open .ic::after{ transform:scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq__a-inner{ padding:0 1.5em 1.5em 3.4em; color:var(--ink-soft); font-size:.94rem; line-height:2; }
.faq__a-inner .q{ display:none; }

/* ---------- CTA band ---------- */
.cta{ background:var(--plum); color:#FBEFEA; position:relative; overflow:hidden; }
.cta__inner{ position:relative; z-index:2; text-align:center; max-width:680px; margin-inline:auto; }
.cta .eyebrow{ color:var(--sage); }
.cta .eyebrow::before,.cta .eyebrow::after{ background:var(--sage); }
.cta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.55; letter-spacing:.05em; margin-top:.6em; color:#FCF4F0; }
.cta p{ margin-top:1.2em; color:#D8C2C9; font-size:.98rem; }
.cta .btn-row{ margin-top:2.2em; }
.cta__thread{ position:absolute; inset:0; opacity:.5; z-index:1; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero{ background:linear-gradient(180deg,var(--paper-3),var(--paper)); border-bottom:1px solid var(--line); }
.page-hero__inner{ padding-block:clamp(52px,7vw,92px); text-align:center; }
.page-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,4.4vw,3rem); line-height:1.5; letter-spacing:.06em; margin-top:.5em; }
.page-hero p{ margin-top:1.2em; color:var(--ink-soft); max-width:36em; margin-inline:auto; }
.crumbs{ font-size:.78rem; color:var(--ink-faint); letter-spacing:.04em; }
.crumbs a:hover{ color:var(--rose); }

/* ---------- Prose (column article) ---------- */
.prose{ max-width:var(--reading); margin-inline:auto; }
.prose > *+*{ margin-top:1.5em; }
.prose p{ color:var(--ink); font-size:1.02rem; line-height:2.15; }
.prose h2{
  font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,1.8rem); font-weight:500; letter-spacing:.04em; line-height:1.6;
  margin-top:2.4em; padding-bottom:.5em; border-bottom:1px solid var(--line); position:relative;
}
.prose h2::before{ content:""; position:absolute; left:0; bottom:-1px; width:64px; height:2px; background:var(--rose); }
.prose h3{ font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:.04em; margin-top:2em; color:var(--rose-deep); }
.prose ul,.prose ol{ padding-left:0; display:grid; gap:.7em; }
.prose ul li{ position:relative; padding-left:1.6em; color:var(--ink); }
.prose ul li::before{ content:""; position:absolute; left:0; top:.85em; width:8px; height:8px; border-radius:50%; background:var(--sage); }
.prose ol{ counter-reset:li; }
.prose ol li{ position:relative; padding-left:2em; counter-increment:li; }
.prose ol li::before{ content:counter(li); position:absolute; left:0; top:.05em; width:1.4em; height:1.4em; background:var(--rose-tint); color:var(--rose-deep); font-family:var(--latin); font-weight:600; font-size:.85em; border-radius:50%; display:grid; place-items:center; }
.prose blockquote{ border-left:3px solid var(--sage); background:var(--sage-tint); padding:1.2em 1.5em; border-radius:0 var(--r) var(--r) 0; color:var(--ink); font-size:.98rem; }
.prose strong, .prose b{ color:var(--rose-deep); font-weight:600; }
.prose .lead{ font-size:1.1rem; color:var(--ink-soft); }
.callout{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:1.4em 1.6em; box-shadow:var(--shadow-sm); }
.callout h4{ font-family:var(--serif); font-size:1.05rem; margin-bottom:.6em; color:var(--ink); display:flex; align-items:center; gap:.5em; }
.callout h4 svg{ width:1.1em; height:1.1em; color:var(--sage-deep); }

.article-head{ max-width:var(--reading); margin-inline:auto; text-align:center; }
.article-head .col-card__meta{ justify-content:center; }
.article-head h1{ font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.55; letter-spacing:.04em; margin-top:1em; }
.article-figure{ margin-block:2.4em; }
.author-card{ max-width:var(--reading); margin:clamp(40px,5vw,64px) auto 0; display:flex; gap:20px; align-items:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-sm); }
.author-card .ph{ width:84px; height:84px; flex:none; border-radius:50%; min-height:auto; padding:0; }
.author-card__mark{ width:84px; height:84px; flex:none; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--rose),var(--rose-deep)); color:var(--sage); font-family:var(--serif); font-size:2.1rem; font-weight:600; line-height:1; box-shadow:var(--shadow-sm); }
.author-card h4{ font-family:var(--serif); font-size:1.1rem; font-weight:500; }
.author-card .r{ font-size:.78rem; color:var(--sage-deep); letter-spacing:.1em; margin:.2em 0 .6em; }
.author-card p{ font-size:.88rem; color:var(--ink-soft); }

/* ---------- Forms ---------- */
.form{ max-width:680px; margin-inline:auto; display:grid; gap:22px; }
.field{ display:grid; gap:.6em; }
.field label{ font-size:.9rem; font-weight:500; letter-spacing:.04em; display:flex; align-items:center; gap:.6em; }
.field .req{ font-size:.7rem; color:#fff; background:var(--rose); padding:.15em .6em; border-radius:4px; letter-spacing:.08em; }
.field .opt{ font-size:.7rem; color:var(--ink-faint); border:1px solid var(--line); padding:.12em .6em; border-radius:4px; }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.95em 1.1em; width:100%; transition:border-color .3s, box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 3px var(--rose-tint); }
.field textarea{ min-height:160px; resize:vertical; }
.radio-row{ display:flex; flex-wrap:wrap; gap:12px; }
.radio-row label{ background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:.6em 1.3em; cursor:pointer; font-weight:400; font-size:.9rem; transition:all .25s; }
.radio-row input{ position:absolute; opacity:0; width:0; }
.radio-row input:checked + span{ color:var(--rose-deep); font-weight:500; }
.radio-row label:has(input:checked){ border-color:var(--rose); background:var(--rose-tint); }
.consent{ display:flex; gap:.7em; align-items:flex-start; font-size:.88rem; color:var(--ink-soft); }
.consent input{ margin-top:.35em; accent-color:var(--rose); }
.form__note{ font-size:.82rem; color:var(--ink-faint); text-align:center; line-height:1.9; }

/* ---------- Info cards (price etc) ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.info-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,36px); box-shadow:var(--shadow-sm); }
.info-card h3{ font-family:var(--serif); font-size:1.2rem; font-weight:500; letter-spacing:.04em; display:flex; align-items:baseline; justify-content:space-between; gap:1em; flex-wrap:wrap; }
.info-card .price{ font-family:var(--latin); font-size:1.6rem; color:var(--rose-deep); font-weight:600; }
.info-card .price small{ font-family:var(--sans); font-size:.6rem; color:var(--ink-faint); letter-spacing:.04em; }
.info-card ul{ margin-top:1.2em; display:grid; gap:.7em; }
.info-card ul li{ display:flex; gap:.7em; font-size:.92rem; color:var(--ink-soft); }
.info-card ul li svg{ flex:none; width:1.1em; height:1.1em; color:var(--sage-deep); margin-top:.4em; }
.info-card .note{ margin-top:1.2em; font-size:.78rem; color:var(--ink-faint); }

.limited-band{ display:flex; align-items:center; gap:1em; justify-content:center; flex-wrap:wrap; background:var(--rose-tint); border-radius:999px; padding:.9em 1.8em; max-width:max-content; margin-inline:auto; }
.limited-band .dot{ width:8px; height:8px; border-radius:50%; background:var(--rose); animation:pulse 1.8s infinite; }
.limited-band span{ font-size:.9rem; color:var(--rose-deep); letter-spacing:.06em; font-weight:500; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* two-column generic */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; }
.split--media-right .split__media{ order:2; }
.checklist{ display:grid; gap:14px; margin-top:1.4em; }
.checklist li{ display:flex; gap:.9em; align-items:flex-start; font-size:.96rem; }
.checklist svg{ flex:none; width:1.3em; height:1.3em; color:var(--sage-deep); margin-top:.3em; }
.xlist li svg{ color:var(--rose); }

/* ---------- Footer ---------- */
.site-footer{ background:#3C172A; color:#C9B2B9; padding-block:clamp(56px,7vw,84px) 28px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer__brand .brand__mark{ color:#FBEFEA; }
.footer__brand .brand__sub{ color:var(--sage); }
.footer__brand p{ margin-top:1.2em; font-size:.86rem; line-height:1.95; max-width:24em; color:#B79CA4; }
.footer__col h4{ font-family:var(--latin); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); margin-bottom:1.2em; }
.footer__col ul{ display:grid; gap:.8em; }
.footer__col a{ font-size:.88rem; color:#C9B2B9; transition:color .3s; }
.footer__col a:hover{ color:#fff; }
.sns-row{ display:flex; gap:12px; margin-top:.4em; }
.sns-row a{ width:40px; height:40px; border:1px solid rgba(255,255,255,.16); border-radius:50%; display:grid; place-items:center; color:#C9B2B9; transition:all .3s; }
.sns-row a:hover{ background:var(--sage); border-color:var(--sage); color:var(--plum); }
.sns-row a.is-soon{ opacity:.4; }
.sns-row svg{ width:18px; height:18px; }
.footer__bottom{ margin-top:clamp(40px,5vw,60px); padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:.76rem; color:#9E8790; letter-spacing:.04em; }
.footer__bottom a:hover{ color:#fff; }
.footer__disclaimer{ margin-top:18px; font-size:.72rem; color:#7C656E; line-height:1.9; max-width:62em; }

/* ---------- Thread divider ---------- */
.thread-divider{ display:block; width:100%; height:60px; color:var(--rose); }
.thread-divider svg{ width:100%; height:100%; }

/* ---------- Animations ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
  html.js .reveal.is-in{ opacity:1; transform:none; }
  .reveal[data-d="1"]{ transition-delay:.1s; }
  .reveal[data-d="2"]{ transition-delay:.2s; }
  .reveal[data-d="3"]{ transition-delay:.3s; }
  .thread-path{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); animation:draw 2.4s cubic-bezier(.45,0,.2,1) forwards; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .knot-dot{ opacity:0; animation:knot .6s ease forwards; animation-delay:2s; }
  @keyframes knot{ to{ opacity:1; } }
}

/* ---------- Focus ---------- */
:focus-visible{ outline:2px solid var(--rose-deep); outline-offset:3px; border-radius:4px; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ max-width:440px; }
  .profile{ grid-template-columns:1fr; }
  .profile__media{ max-width:420px; }
  .feat-grid{ grid-template-columns:1fr; }
  .svc-grid,.col-grid,.voice-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .split--media-right .split__media{ order:0; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:32px; }
  .info-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  :root{ --pad-section:clamp(54px,12vw,80px); }
  .brand__mark{ font-size:1.25rem; letter-spacing:.1em; }
  .brand__sub{ font-size:.62rem; letter-spacing:.18em; }
  .nav__menu{
    position:fixed; inset:74px 0 auto 0; background:var(--paper-2); flex-direction:column; align-items:stretch;
    gap:0; padding:12px 20px 28px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    transform:translateY(-130%); transition:transform .4s cubic-bezier(.2,.8,.2,1); max-height:calc(100vh - 74px); overflow:auto;
  }
  .nav__menu.is-open{ transform:translateY(0); }
  .nav__link{ padding:1em 0; border-bottom:1px solid var(--line); }
  .nav__link::after{ display:none; }
  .nav__has-children .nav__panel{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:0 0 8px 14px; min-width:0; }
  .nav__cta{ margin:14px 0 0; }
  .nav__cta .btn{ width:100%; }
  .nav__toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
  .nav__toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
  .nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .empathy__grid{ grid-template-columns:1fr; }
  .svc-grid,.col-grid,.voice-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:none; }
  .step{ grid-template-columns:1fr; gap:8px; }
  .footer__top{ grid-template-columns:1fr; }
  .profile__badge{ right:12px; }
  .author-card{ flex-direction:column; text-align:center; }
}

/* =========================================================
   WordPressテーマ用の追記（静的サイトとの差分を吸収）
   ========================================================= */
/* カテゴリ絞り込みをリンクで表示（静的のボタンと同じ見た目） */
.col-filter a{ display:inline-block; font-family:var(--sans); font-size:.84rem; font-weight:500; padding:.5em 1.1em; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:var(--paper-2); text-decoration:none; transition:all .25s; }
.col-filter a:hover{ border-color:var(--rose); color:var(--rose); }
.col-filter a.is-active{ background:var(--rose); border-color:var(--rose); color:#fff; }

/* 本文内（the_content）の画像・表 */
.prose img{ max-width:100%; height:auto; border-radius:var(--r); }
.prose figure{ margin:1.6em 0; }
.prose figure img{ width:100%; }
.prose .wp-block-image{ margin:1.6em 0; }

/* ページネーション */
.hk-pagination{ display:flex; gap:.4em; justify-content:center; flex-wrap:wrap; margin-top:clamp(36px,5vw,56px); }
.hk-pagination .page-numbers{ display:inline-grid; place-items:center; min-width:2.6em; height:2.6em; padding:0 .7em; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); text-decoration:none; font-family:var(--latin); transition:all .25s; }
.hk-pagination .page-numbers.current{ background:var(--rose); border-color:var(--rose); color:#fff; }
.hk-pagination .page-numbers:hover{ border-color:var(--rose); color:var(--rose); }
.hk-pagination .page-numbers.current:hover{ color:#fff; }

/* WP標準のキャプション・整列 */
.wp-caption-text,.prose figcaption{ font-size:.82rem; color:var(--ink-faint); text-align:center; margin-top:.6em; }
.aligncenter{ margin-inline:auto; display:block; }