/* =========================================================
   開腸瑜伽協会 — コンポーネント
   役割: 再利用UI部品。セクション見出し／リンク／ボタン／カード／ニュース／
         ナビのリンク装飾＆ドロワー／フォーム／バッジ／プレースホルダ・写真トーン。
   依存: tokens.css, base.css, layout.css
   注意: SPの max-width @media は responsive.css に集約。
   ========================================================= */

/* ---------- セクション見出しの型（section title） ---------- */
.sec-head { display: flex; align-items: baseline; gap: var(--s-4); }
.sec-index {
  font-family: var(--font-latin); font-style: italic;
  font-size: var(--fs-h3); color: var(--ink-3); line-height: 1;
}
.sec-eyebrow {
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
  color: var(--rose-brown); writing-mode: horizontal-tb;
}
.secnum { font-family: var(--font-latin); font-style: italic; font-size: 1.3rem; color: var(--ink-3); }
.sechead { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); }

/* ---------- リンク（静かな下線アニメ） ---------- */
.link {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: var(--fs-small); letter-spacing: 0.12em; color: var(--ink);
  padding-bottom: 3px; position: relative; width: fit-content;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.6s var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }
.link .arrow { transition: transform 0.5s var(--ease); }
.link:hover .arrow { transform: translateX(5px); }

/* ---------- ボタン（低圧・締め色アクセント） ---------- */
/* ページトップへ戻る（スクロールで右下に出現） */
.to-top {
  position: fixed; right: clamp(18px, 2.4vw, 34px); bottom: clamp(18px, 2.4vw, 34px); z-index: 60;
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border: none;
  box-shadow: 0 6px 22px rgba(40, 34, 30, 0.22);
  cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.4s var(--ease);
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: color-mix(in oklab, var(--ink) 84%, var(--paper)); }
.to-top:hover .to-top__arrow { transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--rose-brown); outline-offset: 4px; }
.to-top__arrow { display: block; transition: transform 0.4s var(--ease); }
@media (max-width: 560px) { .to-top { width: 46px; height: 46px; right: 16px; bottom: 16px; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
  font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0.14em;
  padding: 1.1em 2.4em;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  transition: background 0.55s var(--ease), color 0.55s var(--ease), border-color 0.55s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--on-dark { border-color: var(--on-dark-2); color: var(--on-dark); }
.btn--on-dark:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* ---------- カード（4導線 等） ---------- */
.card { display: block; position: relative; }
.card__media { position: relative; overflow: hidden; border-radius: var(--radius-img); }
.card__media img, .card__media .kv-ph { transition: transform 1.6s var(--ease); }
.card:hover .card__media img,
.card:hover .card__media .kv-ph { transform: scale(1.045); }
.card__index { font-family: var(--font-latin); font-style: italic; font-size: var(--fs-small); color: var(--ink-3); }
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); margin-top: var(--s-3); letter-spacing: 0.04em; }
.card__desc { color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-snug); margin-top: var(--s-3); }
.card__foot { margin-top: var(--s-4); }

/* 汎用メディア枠（影つき） */
.kv { position: relative; overflow: hidden; box-shadow: var(--shadow-soft); }

/* ---------- ニュース（news） ---------- */
.news { display: flex; flex-direction: column; }
/* 最大3件表示（4件目以降は非表示） */
.news__row:nth-child(n+4) { display: none; }
.news__row {
  display: grid; grid-template-columns: max-content 132px 1fr; column-gap: var(--s-4); align-items: center;
  padding: var(--s-6) 0; border-top: 1px solid var(--line);
}
.news__date { font-family: var(--font-latin); font-style: italic; color: var(--ink-3); font-size: 1.05rem; }
/* hover：タイトルに左から伸びる下線（下線MOV） */
.news__title { font-size: var(--fs-body); color: var(--ink); position: relative; width: fit-content; max-width: 100%; margin-left: var(--s-5); }
.news__title::after {
  content: ""; position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.news__title:hover::after { transform: scaleX(1); transform-origin: left; }
.news__cat { justify-self: start; }
.news__cat.tag { display: inline-flex; align-items: center; justify-content: center; width: 100%; text-align: center; }

/* ---------- フォーム ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-3); }
.field__label { font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--ink-2); }
.field__label .req { color: var(--rose-brown); font-size: var(--fs-micro); margin-inline-start: 0.5em; letter-spacing: 0.12em; }
.input, .textarea, .select {
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.95em 1.1em; width: 100%;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--ink); background: #fff; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.textarea { resize: vertical; min-height: 9em; line-height: var(--lh-snug); }

/* 用途選択（ラジオをチップ化） */
.choice { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.choice label {
  font-size: var(--fs-small); letter-spacing: 0.06em;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.6em 1.3em; color: var(--ink-2); cursor: pointer; transition: all 0.4s var(--ease);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice input:checked + span { color: var(--paper); }
.choice label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.consent { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-small); color: var(--ink-2); line-height: var(--lh-snug); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- バッジ / メタ ---------- */
.meta { font-size: var(--fs-small); color: var(--ink-3); letter-spacing: 0.08em; }
.tag {
  display: inline-block; font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--rose-brown);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.35em 1em;
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* =========================================================
   ナビ（リンク装飾・CTA・会員ログイン・SPトグル・ドロワー）
   ヘッダーの殻は layout.css。HERO上の白ナビ状態色もここ。
   ========================================================= */
.wordmark {
  display: flex; align-items: center;
}
.wordmark__logo { display: block; width: auto; height: clamp(20px, 1.9vw, 27px); }
.wordmark__logo--wh { display: none; }
/* HERO上（白ナビ・非ソリッド）は白ロゴ、それ以外（白背景・下層・ドロワー）は黒ロゴ */
.site-header.on-hero:not(.is-solid) .wordmark__logo--bl { display: none; }
.site-header.on-hero:not(.is-solid) .wordmark__logo--wh { display: block;
  filter: drop-shadow(0 1px 14px rgba(34,28,24,0.42)) drop-shadow(0 0 2px rgba(34,28,24,0.25)); }

/* HERO上＝白ナビ。ソリッド化したら墨色へ戻す */
.site-header.on-hero .wordmark,
.site-header.on-hero .nav__link,
.site-header.on-hero .nav__toggle { color: var(--on-dark); }
.site-header.on-hero .nav__link::after { background: var(--on-dark); }
.site-header.on-hero.is-solid .wordmark,
.site-header.on-hero.is-solid .nav__link,
.site-header.on-hero.is-solid .nav__toggle { color: var(--ink); }
.site-header.on-hero.is-solid .nav__link::after { background: var(--ink); }
.site-header.on-hero .wordmark .en { color: var(--on-dark-2); }
/* HERO上：白ナビの可読性は文字影で確保（帯・罫線は出さない） */
.site-header.on-hero:not(.is-solid) .wordmark,
.site-header.on-hero:not(.is-solid) .nav__link,
.site-header.on-hero:not(.is-solid) .nav__toggle {
  text-shadow: 0 1px 16px rgba(34,28,24,0.45), 0 0 2px rgba(34,28,24,0.22);
}
/* HEROを抜けてソリッド化したら、お問い合わせは墨色に戻す */
.site-header.on-hero.is-solid .nav__cta.btn--on-dark { border-color: var(--ink); color: var(--ink); }
.site-header.on-hero.is-solid .nav__cta.btn--on-dark:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__link {
  font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--ink);
  position: relative; padding-bottom: 4px;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-inline-start: var(--s-3); }
.nav__cta.btn { padding: 0.8em 1.6em; }

/* 会員ログイン：唯一の塗りボタンとして目立たせる（HERO＝桜／スクロール後＝ミント） */
.nav__member { margin-inline-start: calc(var(--s-3) * -0.4); }
.nav__member.btn {
  padding: 0.8em 1.5em; gap: 0.55em;
  background: #319A82; color: #fff; border-color: #319A82;
}
.nav__member.btn:hover { background: #277F6B; border-color: #277F6B; color: #fff; }
.nav__member .lock { flex: none; margin-top: -1px; }
/* HERO上：濃めの桜塗り・白文字で動画の上でも際立つ */
.site-header.on-hero:not(.is-solid) .nav__member.btn { background: #CB5575; color: #fff; border-color: #CB5575; }
.site-header.on-hero:not(.is-solid) .nav__member.btn:hover { background: #B34561; border-color: #B34561; color: #fff; }

.nav__toggle {
  display: none; background: none; border: 0; color: var(--ink);
  font-size: var(--fs-small); letter-spacing: 0.14em; align-items: center; gap: 0.7em;
}
.nav__toggle .bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.nav__toggle .bars i { height: 1px; background: currentColor; display: block; transition: transform 0.4s var(--ease), opacity 0.3s; }

/* SPドロワー */
.nav-drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--paper);
  transform: translateY(-100%); visibility: hidden;
  transition: transform 0.7s var(--ease), visibility 0s linear 0.7s;
  display: flex; flex-direction: column;
  padding: clamp(20px,6vw,40px) var(--gutter) var(--s-8);
}
.nav-drawer.is-open { transform: none; visibility: visible; transition: transform 0.7s var(--ease); }
.nav-drawer__top { display: flex; justify-content: space-between; align-items: center; }
.nav-drawer__close { background: none; border: 0; color: var(--ink); font-size: var(--fs-small); letter-spacing: 0.14em; }
.nav-drawer__list { margin-top: clamp(32px,8vw,72px); display: flex; flex-direction: column; }
.nav-drawer__item {
  font-family: var(--font-display); font-size: clamp(1.5rem, 7vw, 2.1rem);
  letter-spacing: 0.06em; color: var(--ink);
  padding: clamp(14px,3.5vw,22px) 0; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 1em;
}
.nav-drawer__item .num { font-family: var(--font-latin); font-style: italic; font-size: 0.7rem; color: var(--ink-3); }
.nav-drawer__foot { margin-top: auto; padding-top: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); }

/* =========================================================
   プレースホルダ・写真トーン
   実素材が入るまでのレイアウト確認＋ブランドトーンの軽い統一。
   ========================================================= */
.ph {
  position: relative; overflow: hidden;
  background-color: var(--paper-3);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(44,37,33,0.035) 0, rgba(44,37,33,0.035) 1px,
      transparent 1px, transparent 11px);
  color: var(--ink-3); isolation: isolate;
}
.ph--rose { background-color: color-mix(in oklab, var(--rose-greige) 40%, var(--paper-3)); }
.ph--pink { background-color: color-mix(in oklab, var(--pink-beige) 38%, var(--paper-3)); }
.ph--mint { background-color: color-mix(in oklab, var(--mint-grey) 48%, var(--paper-3)); }

/* 仮画像（トーン補正で全体に馴染ませる） */
.photo { position: relative; overflow: hidden; background: var(--mint-050); isolation: isolate; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.01) saturate(0.98); }
.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(152deg, #dcebe6 0%, #f3f8f6 60%, #f3e8e8 100%); opacity: 0.16;
}
.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(40,34,30,0.05) 100%);
}
.photo--mint::after { background: linear-gradient(152deg, #cfe3de 0%, #eef4f2 100%); opacity: 0.18; }
.photo--pink::after { background: linear-gradient(152deg, #f0dddd 0%, #f8eeee 100%); opacity: 0.16; }
.photo--neutral::after { background: linear-gradient(152deg, #e4ded8 0%, #f2efeb 100%); opacity: 0.14; }
.photo--dark { background: #243532; }
.photo--dark img { filter: contrast(1.04) saturate(0.95); }
.photo--dark::after { background: linear-gradient(152deg, #2f4a45 0%, #2a2f2c 100%); opacity: 0.28; }

/* プレースホルダの注記（monospaceで"指示"であることを明示） */
.ph__note {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 3;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--fs-micro); letter-spacing: 0.04em; color: var(--ink-2);
  background: rgba(255,255,255,0.84); backdrop-filter: blur(2px);
  border: 1px solid var(--line); padding: 0.5em 0.85em; max-width: min(86%, 360px); line-height: 1.5;
}
.ph__note b { font-weight: 600; color: var(--ink); }
.ph__note--dark { background: rgba(36,30,26,0.62); color: var(--on-dark); border-color: rgba(252,251,249,0.22); }
.ph__note--dark b { color: #fff; }
.ph__icon { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--ink-3); }
.ph__icon svg { width: 44px; height: 44px; opacity: 0.5; }
.ph--safe::before { content: ""; position: absolute; z-index: 2; inset: 8% 8%; border: 1px dashed var(--line-strong); }

/* HERO動画プレースホルダ：海と朝の光（ゆっくり揺らぐ光）。実素材が無いページ用 */
.hero-ph {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%,
      color-mix(in oklab, var(--mint-grey) 16%, #ffffff) 52%,
      color-mix(in oklab, var(--mint-grey) 26%, #ffffff) 100%);
}
.hero-ph__light {
  position: absolute; inset: -20%;
  background:
    radial-gradient(58% 44% at 50% 20%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(46% 30% at 66% 32%, rgba(205,222,218,0.45), transparent 72%);
  mix-blend-mode: screen; animation: heroLight 26s var(--ease-soft) infinite alternate;
}
.hero-ph__horizon { position: absolute; left: -10%; right: -10%; top: 58%; height: 1px; background: rgba(40,34,30,0.07); filter: blur(0.4px); }
.hero-ph__shimmer {
  position: absolute; left: 0; right: 0; top: 56%; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 9px);
  opacity: 0.5; animation: heroShimmer 18s linear infinite;
}
.hero-ph__grain {
  position: absolute; inset: 0; opacity: 0.05; 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='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-ph__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 34%, transparent 60%); }
@keyframes heroLight {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); opacity: 0.9; }
  100% { transform: translate3d(2%, 2%, 0) scale(1.1); opacity: 1; }
}
@keyframes heroShimmer { to { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-ph__light, .hero-ph__shimmer { animation: none; }
}