.furigana_article_content__U9A4Y h1 {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 24px;
  text-align: center;
}
.furigana_article_content__U9A4Y h2 {
  font-weight: 700;
  margin-top: 12px;
  font-size: 24px;
  text-align: center;
}
.furigana_article_content__U9A4Y p {
  text-align: justify;
  margin-top: 14px;
  margin-bottom: 14px;
}
.furigana_article_content__U9A4Y a {
  text-decoration: underline;
}
.furigana_article_content__U9A4Y img {
  margin-top: 20px;
}
.Marquee_marquee__nBaAi {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
}
.Marquee_fade__bLCkv {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.Marquee_track__RNY_P {
  display: flex;
  width: max-content;
  animation: Marquee_marquee-scroll__qquqi var(--duration) linear infinite;
  animation-direction: var(--direction);
  will-change: transform;
}
.Marquee_pause__egjyk:hover .Marquee_track__RNY_P {
  animation-play-state: paused;
}
.Marquee_group__B2Cww {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap);
  margin: 0;
  padding-left: 0;
  list-style: none;
  flex-shrink: 0;
}
.Marquee_measure__1VrTS {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}
.Marquee_item___yQte {
  flex-shrink: 0;
  white-space: nowrap;
  user-select: none;
}
.Marquee_pill__u8Bd_ {
  padding: 10px 22px;
  border: 1.5px solid #111;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
  background: #fff;
  line-height: 1;
}
@keyframes Marquee_marquee-scroll__qquqi {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .Marquee_track__RNY_P {
    animation: none;
  }
}

#furigana-tooltip {
  position: absolute;
  background: #fff;
  color: #111;
  font-size: 13px;
  line-height: 1.6;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border: 1px solid #eee;
  pointer-events: none;
  z-index: 50;
  transform: translateX(-50%);
  white-space: nowrap;
}

#furigana-tooltip[hidden] {
  display: none;
}

.marquee {
  overflow: hidden;
  padding-bottom: 12px;
}

.marquee .pill {
  padding: 10px 22px;
  border: 1.5px solid #111;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
  background: #fff;
  line-height: 1;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: marquee-scroll 38s linear infinite;
}
.marquee-track.reverse {
  animation-direction: reverse;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =====================================================================
   ヘッダー — ロゴ + 3項目ナビ (Harga / Daftar / Login)。

   style.css はビルド済みの Tailwind 出力で、このリポジトリにビルド手順が
   ないため、そこに無いユーティリティは足せない。任意値パディング・
   rounded-full・hover:bg-*・レスポンシブなロゴ高さがいずれも該当するので、
   ヘッダーの見た目はここで手書きしている。
   ブランド色 #8f2c40 は --color-primary-color-sk / ロゴマークの fill と同値。
   ===================================================================== */
/* ヘッダーは position: fixed (実高 64px)。本文はその分だけ下から始める。
   これが無いと最初の見出しの1行目がヘッダーの下に潜る (モバイルで実測 26px)。
   scroll-padding-top も同じ値にして、アンカー着地やスクロール位置の復元でも潜らないように。 */
:root { --header-h: 64px; }
html { scroll-padding-top: var(--header-h); }
.under-header { padding-top: var(--header-h); }

/* 記事ページ / 記事一覧 共通の「← Kembali」。テンプレートは partial を共有しないので、
   見た目はここに一本化し、両ページとも <a class="back-link inter-bold"> を置く。
   固定ヘッダーとの衝突は z-index ではなく、親の上パディング (--header-h + 余白) で位置的に避ける。 */
.back-link { display: inline-flex; align-items: center; gap: 8px; background: #000; color: #fff; border-radius: 8px;
             padding: 8px 16px; font-size: 14px; line-height: 20px; text-decoration: none; margin-bottom: 2rem; }
.back-link:hover { opacity: 0.9; }

.header-logo {
  height: 56px;
  width: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 3項目に共通する当たり判定と字送り。inline-flex なので min-height が効く。 */
.header-nav__link,
.header-nav__pill,
.header-nav__user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* タップ領域 */
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}

/* Harga — 素のテキストリンク */
.header-nav__link {
  padding: 12px 10px;
  color: #1e2939;
}

.header-nav__link:hover {
  color: var(--color-primary-color-sk, var(--maroon-100));
}

/* Daftar — ブランド色のピル */
.header-nav__pill {
  padding: 11px 18px;
  border-radius: 999px;
  background-color: var(--color-primary-color-sk, var(--maroon-100));
  color: #fff;
}

.header-nav__pill:hover {
  opacity: 0.9;
}

/* Login — 人アイコン + 文字 */
.header-nav__user {
  gap: 6px;
  padding: 12px 10px;
  color: #1e2939;
}

.header-nav__user:hover {
  color: var(--color-primary-color-sk, var(--maroon-100));
}

.header-nav__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* 狭い画面: ロゴをマークに落とし、項目も少し詰める。ただしタップ領域
   44px と項目間 4px は維持する。折り返しもハンバーガーもしない。 */
@media (max-width: 640px) {
  .header-logo {
    height: 37px;
  }

  /* ロゴリンクの当たり判定を 44px 以上に (37px + 4px×2 = 45px)。
     ヘッダーは items-center なのでロゴの位置・寸法は変わらない。 */
  .header-logo-link {
    padding-block: 4px;
  }

  .header-nav {
    gap: 4px;
  }

  .header-nav__link,
  .header-nav__pill,
  .header-nav__user {
    font-size: 14px;
  }

  /* 390px ではヘッダーの内容がバーの内寸(viewport - px-6*2)を超え、
     space-between の間隔が 0 まで潰れてロゴと Harga が接する。左右の
     padding だけを詰めて逃がす。min-height:44px のタップ領域と上下
     padding は据え置き、詰めるのは横だけ。 */
  .header-nav__link,
  .header-nav__user {
    padding-left: 4px;
    padding-right: 4px;
  }
  .header-nav__pill {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 389px 以下ではロゴを花マークだけに落とす (<picture> の source と同じ境界)。
   文字が無くなる分バーの高さいっぱいまで拡大して存在感を保つ。 */
@media (max-width: 389px) {
  .header-logo {
    height: 52px;
  }
}

/* フッターのリンク: padding-block で当たり判定を 44px に (20px + 12px×2)。
   モバイル(縦積み)では gap を 0 にして項目を隙間なく並べる (ピッチ 36→44px)。
   641px 以上(横並び)では元の gap-4 (1rem) のまま。 */
.footer-nav {
  gap: 0;
}
.footer-nav a {
  padding-block: 12px;
}
@media (min-width: 641px) {
  .footer-nav {
    gap: 1rem;
  }
}

/* フォームのエラー/成功メッセージ。app.css と同じ定義を landing 側にも置く。
   landing は base.css / style.css しか読まないため。auth-forms.js が
   textContent と class を差し替えて使う。 */
.auth-message {
  padding: 10px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.auth-message[hidden] {
  display: none;
}

.auth-message--error {
  color: var(--maroon-100);
  border-color: var(--maroon-100);
  background-color: #fff5f6;
}

.auth-message--success {
  color: #1f6f3f;
  border-color: #1f6f3f;
  background-color: #f2fbf5;
}

.auth-message--info {
  color: #1c4f7c;
  border-color: #1c4f7c;
  background-color: #f1f7fc;
}

/* ============ LP改訂 2026-09: 色の憲法トークン(公式パレット10値) ============ */
:root {
  --ink-100: #1A1A1A;
  --ink-70: #555555;
  --ink-40: #9A9A9A;
  --ink-10: #E6E6E6;
  --maroon-140: #5D1D2A;
  --maroon-120: #752434;
  --maroon-100: #8F2C40;
  --maroon-60: #BC808C;
  --maroon-10: #F6EEF0;
}

/* ============ 第一幕A ============ */
.act1a { background: #fff; padding: 1.25rem 1rem 0; }
.act1a__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.act1a__copy { text-align: center; }
.act1a__h1 { color: var(--ink-100); font-size: 1.7rem; line-height: 1.3; letter-spacing: -0.01em; }
.act1a__sub { color: var(--ink-70); font-size: 1rem; line-height: 1.75; max-width: 34em; margin: 1.1rem auto 0; }
.act1a__cta-wrap { margin-top: 1.6rem; }
.cta-pill {
  display: inline-block; background: var(--maroon-100); color: #fff;
  font-size: 1.05rem; padding: 0.8rem 2.2rem; border-radius: 9999px;
  text-decoration: none;
}
.cta-pill:hover { background: var(--maroon-120); }
.cta-pill:active { background: var(--maroon-140); }
/* The Try Out buttons: white, outlined in maroon, so a one-off purchase never
   reads as the monthly plan's filled button. */
.cta-pill--outline { background: #fff; color: var(--maroon-100); border: 2px solid var(--maroon-100); padding: calc(0.8rem - 2px) calc(2.2rem - 2px); }
.cta-pill--outline:hover { background: #fff; color: var(--maroon-120); border-color: var(--maroon-120); }
.cta-pill--outline:active { background: #fff; color: var(--maroon-140); border-color: var(--maroon-140); }
/* A hand tapping the landing page's Try Out button. Only a visitor who
   arrived on /#tryout (the Try Out ads) sees it: everyone else gets
   display: none, so nothing on the page outshines the monthly plan's button.
   Every 1.6s the hand moves in from the lower right and presses the button's
   right end: the hand shrinks a little, the button sinks, and a ring spreads
   from the fingertip. The span wraps the button alone and the hand and the
   ring are absolute, so the button and the card are where they were without
   them. The fingertip sits at (20px, 4px) of the 44px hand, which puts it on
   the ring's centre, 22px from the span's right and 10px from its bottom. The
   landing position under the fixed header is html's scroll-padding-top.
   The tap runs under prefers-reduced-motion too: a fingertip pressing a few
   pixels is not the large motion that setting guards against, and stopping
   it would remove the whole point for those visitors. */
.tryout-cta { position: relative; display: inline-block; }
.tryout-pointer, .tryout-ripple { display: none; position: absolute; pointer-events: none; }
.tryout-pointer {
  width: 44px; height: 44px; right: -6px; bottom: -30px; z-index: 2;
  color: var(--maroon-100); transform-origin: 30% 10%;
}
.tryout-ripple {
  width: 16px; height: 16px; right: 14px; bottom: 2px; z-index: 1;
  border: 2px solid var(--maroon-100); border-radius: 50%; opacity: 0;
}
#tryout:target .tryout-pointer { display: block; animation: tryout-tap 1.6s ease-in-out infinite; }
#tryout:target .tryout-ripple { display: block; animation: tryout-ripple 1.6s ease-out infinite; }
#tryout:target .tryout-cta .cta-pill { animation: tryout-press 1.6s ease-in-out infinite; }
@keyframes tryout-tap {
  0%, 100% { transform: translate(10px, 10px); }
  40%      { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-1px, -1px) scale(0.88); }
  62%      { transform: translate(0, 0) scale(1); }
}
@keyframes tryout-press {
  0%, 44%, 62%, 100% { transform: scale(1); }
  50%                { transform: scale(0.96); }
}
@keyframes tryout-ripple {
  0%, 48%   { opacity: 0; transform: scale(0.4); }
  52%       { opacity: 0.7; transform: scale(0.6); }
  85%, 100% { opacity: 0; transform: scale(2.6); }
}
.act1a__cta-note { color: var(--ink-40); font-size: 0.8rem; margin-top: 0.7rem; }
/* The art is sized by height: the height the previous 834x1050 picture had at
   width min(column, cap), so the taller picture takes the same vertical room.
   100cqw is the figure's width, hence the container. */
.act1a__art { margin: 0; container-type: inline-size; }
.act1a__art img { display: block; width: auto; height: calc(min(100cqw, 340px) * 1050 / 834); margin: 0 auto; }
/* The still drawing sets the stack's size; the moving parts lie exactly over
   it. (0,2,0) outranks .act1a__art img (0,1,1) at every breakpoint below. */
.act1a__stack { position: relative; width: fit-content; margin: 0 auto; }
.act1a__art .act1a__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 768px) {
  .act1a { padding: 3.5rem 1.5rem 0; }
  .act1a__inner { grid-template-columns: 1fr 0.82fr; gap: 2.5rem; }
  .act1a__copy { text-align: left; }
  .act1a__h1 { font-size: 2.15rem; line-height: 1.28; }
  .act1a__sub { font-size: 1rem; margin-left: 0; }
  .act1a__art img { height: calc(min(100cqw, 410px) * 1050 / 834); }
}
@media (min-width: 1100px) {
  .act1a__inner { gap: 3.5rem; }
  .act1a__art img { height: calc(min(100cqw, 470px) * 1050 / 834); }
  .act1a__h1 { font-size: 2.5rem; }
}

/* ============ 第一幕B: スクショ+柱4本 ============ */
.act1b { background: #fff; padding: 1.25rem 1rem 0; }
.act1b__inner { max-width: 1080px; margin: 0 auto; }
.pillars { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
.pillar { border: 1px solid var(--ink-10); border-radius: 12px; padding: 1.25rem; background: #fff; }
.pillar__title { color: var(--ink-100); font-size: 1.1rem; margin-bottom: 0.7rem; }
.pillar__contrast { color: var(--ink-70); font-size: 1rem; line-height: 1.7; }
.pillar__contrast strong { color: var(--ink-100); }
.pillar__benefit { color: var(--ink-100); font-size: 1rem; line-height: 1.7; margin-top: 0.7rem; }
/* 対比2行: 灰の縦罫=従来(色が抜けとる)/若苔の縦罫=うち(生きとる)。文言は段落のまま。 */
.contrast { margin-top: 0.9rem; }
.contrast__was, .contrast__now { padding: 0.7rem 0 0.7rem 0.9rem; line-height: 1.75; }
.contrast__was { color: var(--ink-40); border-left: 3px solid var(--ink-10); font-size: 1rem; }
.contrast__now { color: var(--ink-100); border-left: 3px solid var(--sem-makna); margin-top: 0.35rem; }
.contrast__tag { display: block; font-size: 0.8125rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.25rem; }
.contrast__was .contrast__tag { color: var(--ink-40); }
.contrast__now .contrast__tag { color: var(--sem-makna); }
.figband { margin: 3rem auto 0; display: grid; gap: 3rem; }
.figband__item { margin: 0; max-width: 620px; width: 100%; justify-self: center; }
.figband__item--wide { max-width: 720px; }
.figband__item svg { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .figband { margin-top: 4.5rem; gap: 4.5rem; }
  .figband__item { max-width: 720px; }
  .figband__item--wide { max-width: 860px; }
}
.act1b__bundle { text-align: center; color: var(--ink-100); font-size: 1.15rem; margin: 4rem 0 0; }
.act1b__stats {
  list-style: none; padding: 0; margin: 1.75rem auto 0;
  display: flex; justify-content: center; gap: 2.25rem; flex-wrap: wrap;
}
.act1b__stats li { display: flex; flex-direction: column; gap: 0.15rem; text-align: center; }
.act1b__stats strong { color: var(--ink-100); font-size: 1.35rem; }
.act1b__stats span { color: var(--ink-40); font-size: 0.8rem; }
@media (min-width: 768px) {
  .act1b { padding: 5rem 1.5rem 0; }
  .pillars { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .pillar { padding: 1.75rem; }
  .act1b__bundle { font-size: 1.3rem; }
  .act1b__stats strong { font-size: 1.6rem; }
}

/* ============ 価格ブロック ============ */
.price { background: #fff; padding: 3rem 1rem 0; }
.price__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.price__title { color: var(--ink-100); font-size: 1.5rem; }
.price__lead { color: var(--ink-70); font-size: 1rem; line-height: 1.8; margin-top: 1rem; }
.price__lead strong { color: var(--ink-100); }
.price__figure { color: var(--ink-100); font-size: 2.4rem; margin-top: 1.25rem; }
.price__figure span { font-size: 1rem; color: var(--ink-70); }
.price__clause { color: var(--ink-70); font-size: 1rem; line-height: 1.8; margin-top: 1rem; }
.price__clause strong { color: var(--ink-100); }
.price__cta-wrap { margin-top: 1.75rem; }
.price__escape { margin-top: 0.8rem; font-size: 0.85rem; }
/* 当たり判定だけ 44px 化: inline-block + padding を負 margin で相殺し、視覚位置は不変。 */
.price__escape a { color: var(--maroon-100); text-decoration: underline; display: inline-block; padding: 13px 12px; margin: -13px -12px; }
.price__escape a:hover { color: var(--maroon-120); }
/* The floating WhatsApp button on the landing page: a 52px green circle 16px
   from the right and 20px from the bottom on a phone; 56px, 24px from the
   edges and with a label beside it from 768px up. .wa-fab-clear is a strip in
   the footer's black after the copyright band, so the button never sits over
   the last footer line. */
.wa-fab-wrap { position: fixed; right: 16px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wa-fab { width: 52px; height: 52px; border-radius: 999px; background: #1EA952; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); transition: transform 0.15s; }
.wa-fab svg { width: 26px; height: 26px; }
.wa-fab-wrap:hover .wa-fab { transform: scale(1.06); }
.wa-fab-label { display: none; }
.wa-fab-clear { height: 88px; background: #000; }
@media (min-width: 768px) {
  .wa-fab-wrap { right: 24px; bottom: 24px; }
  .wa-fab { width: 56px; height: 56px; }
  .wa-fab svg { width: 28px; height: 28px; }
  .wa-fab-label { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff; border: 1px solid var(--ink-10); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); }
  .wa-fab-label b { font-size: 14px; color: var(--ink-100); }
  .wa-fab-label span { font-size: 12px; color: var(--ink-70); }
  .wa-fab-clear { height: 104px; }
}
/* WhatsApp under the CTA group: a hairline above, the glyph inline with the
   question and the link (the link never breaks), then what it is for and the
   service hours, each on a line of its own in small type. */
.price__wa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.6rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid #e9e3e3; font-size: 0.95rem; color: var(--ink-70); }
.price__wa img { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 0.3rem; }
.price__wa a { color: var(--maroon-100); font-weight: 600; text-decoration: none; white-space: nowrap; }
.price__wa a:hover { color: var(--maroon-120); text-decoration: underline; }
.price__wa-note { flex-basis: 100%; font-size: 0.8rem; line-height: 1.6; color: var(--ink-70); }
.price__wa-hours { flex-basis: 100%; font-size: 0.75rem; color: var(--ink-40); }
/* リスク逆転の一文(二択の直下)。装飾なし・臙脂なし。 */
.price__assure { font-size: 0.8125rem; color: var(--ink-70); text-align: center; margin-top: 1rem; line-height: 1.7; }
@media (min-width: 768px) {
  .price { padding-top: 4rem; }
  .price__title { font-size: 1.9rem; }
  .price__figure { font-size: 3rem; }
}

/* ============ 第二幕: 旅 ============ */
.journey { background: #fff; padding: 4rem 1rem 0; }
.journey__inner { max-width: 1080px; margin: 0 auto; }
.journey__title { text-align: center; color: var(--ink-100); font-size: 1.5rem; }
.journey__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; align-items: center; }
.journey__art { margin: 0; order: -1; }
.journey__art img { width: 100%; height: auto; }
.journey__steps { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.journey__steps::before {
  content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 3.2rem;
  border-left: 2px solid var(--ink-100);
}
.journey__step { position: relative; padding: 0 0 1.6rem 1.1rem; }
.journey__dot {
  position: absolute; left: -1.42rem; top: 0.28rem; width: 0.62rem; height: 0.62rem;
  border-radius: 50%; background: var(--ink-100);
}
.journey__dot--accent { background: var(--ink-100); }
.journey__dot--open { background: #fff; border: 2px solid var(--ink-40); }
.journey__step h3 { color: var(--ink-100); font-size: 1rem; }
.journey__step p { color: var(--ink-70); font-size: 0.85rem; margin-top: 0.15rem; }
.journey__step--branch h3 { font-size: 0.95rem; }
.journey__step--future h3 { color: var(--ink-40); }
.journey__step--future p { color: var(--ink-40); }
/* 実線は4段目まで、以降は点線(未来) */
.journey__steps::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3.2rem;
  border-left: 2px dashed var(--ink-40);
}
@media (min-width: 768px) {
  .journey__title { font-size: 1.9rem; }
  .journey__grid { grid-template-columns: 5fr 6fr; gap: 3rem; }
  .journey__art { order: 2; }
}

/* 柱: 帯レイアウト(スクショ付き) */
.pillars--bands { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 900px; margin: 2.5rem auto 0; }
.pillars--bands .pillar { border: 0; padding: 0; }
.pband { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; }
@media (max-width: 767px) {
  .pband--strip .pband__left { display: contents; }
  .pband--strip .pband__text { order: 1; }
  .pband--strip .pband__art { order: 2; }
  .pband--strip .pband__figs { order: 3; margin-top: 1rem; }
}
.pband__art { margin: 0; }
.pband__art img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto;
  border: 1px solid var(--ink-10); border-radius: 14px; }
.pband--strip .pband__art img { max-width: 320px; }
.pband__figs { display: grid; gap: 2rem; margin-top: 1.5rem; }
.curveband { margin: 3rem auto 0; max-width: 980px; }
.curveband figure { margin: 0; }
.curveband svg { display: block; width: 100%; height: auto; }
.pband__figs figure { margin: 0; }
.pband__figs svg { display: block; width: 100%; height: auto; }
.pband__figs canvas, .curveband canvas { display: block; width: 100%; }
@media (min-width: 768px) {
  .pband--strip { grid-template-columns: 1fr 0.62fr; align-items: start; }
  .pband--strip .pband__left { display: block; position: sticky; top: 72px; grid-column: 1; }
  .pband--strip .pband__art { grid-column: 2; }
  .pband__figs { gap: 2.5rem; margin-top: 2rem; }
  .curveband { margin-top: 4.5rem; }
}
@media (min-width: 768px) {
  .pillars--bands { gap: 3.5rem; margin-top: 3.5rem; }
  .pband--shot { grid-template-columns: 1.25fr 0.75fr; gap: 2.5rem; }
  .pband--flip .pband__text { order: 2; }
  .pband--flip .pband__art { order: 1; }
}

/* ============ 作り手 Q&A(旅の直後): 白地・髪の毛罫。若苔の縦罫は問いに付く。臙脂はリンクだけ ============ */
.maker { background: #fff; }
/* maker 下端 → 第三幕 h2 の空白 = .maker__inner の padding-bottom + .act3 の padding-top。
   モバイル 24+48=72px (旧 48+120=168)、デスクトップ 48+96=144px (旧 64+120=184、-22%)。 */
.maker__inner { max-width: 640px; margin: 0 auto; padding: 3rem 1rem 1.5rem; border-top: 1px solid var(--ink-10); }
.makerqa__q { font-size: 1.25rem; line-height: 1.45; color: var(--ink-100);
  border-left: 4px solid var(--sem-makna); padding-left: 1rem; margin: 2rem 0 0.8rem; }
.makerqa__q:first-child { margin-top: 0; }
.makerqa__a { font-size: 1rem; line-height: 1.85; color: var(--ink-100); margin: 0; }
.makerqa__a strong { color: var(--ink-100); }
.maker__link { margin-top: 1.6rem; }
.maker__link a { color: var(--maroon-100); text-decoration: none; }
.maker__link a:hover { color: var(--maroon-120); }
.act3 { padding-top: 3rem; }
@media (min-width: 768px) { .maker__inner { padding: 4rem 1.5rem 3rem; } .makerqa__q { font-size: 1.4rem; } .act3 { padding-top: 6rem; } }

/* ============ 記事カード(憲法準拠) ============ */
.article-card { background: #fff; border: 1px solid var(--ink-10); border-radius: 12px; padding: 1.5rem; }
.article-card h3 { color: var(--ink-100); }
.article-card p { color: var(--ink-70); }

/* ============ 最終CTA ============ */
/* 記事カード下端 → 締めの絵までの空白: 記事グリッド下 padding + .final-cta 上 padding の積み上げ。
   モバイル 40+32=72px (旧 96+48=144 の半分)、デスクトップ 64+40=104px (旧 144 の -28%)。
   絵の下 (絵〜見出し) は 24→48px (mobile) / 32px (desktop) に広げ、絵の周りの呼吸を均等寄りに。 */
.articles-grid { padding-bottom: 40px; }
/* 狭幅(〜360px)対策: セクションは grid justify-center なので、子の最小幅が列幅を押し広げると
   段落もピルも画面外へ出る。ラッパの min-width:0 で列幅を利用可能幅に収め、ピルは折り返しを許す。 */
.articles-wrap { min-width: 0; max-width: 100%; }
.cat-pill { max-width: 100%; min-width: 0; box-sizing: border-box; }
.cat-pill__label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cat-pill > div { flex-shrink: 0; }
/* 全記事への入口。カテゴリピルの華やかさと競合させないよう素のテキストリンクに留める。
   padding でタップ領域を稼ぎ、下の負マージンで見た目の間隔を戻す (.price__escape a と同じ手)。 */
.articles-all {
  display: inline-block;
  margin-top: 0.5rem;
  margin-bottom: -13px;
  padding: 13px 12px;
  color: var(--maroon-100);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.articles-all:hover { color: var(--maroon-120); }
.final-cta { background: #fff; text-align: center; padding: 2rem 1rem 2rem; }
.final-cta__art { margin: 0 auto; max-width: 600px; }
.final-cta__art img { width: 100%; height: auto; }
.final-cta__title { color: var(--ink-100); font-size: 1.4rem; max-width: 640px; margin: 3rem auto 0; }
.final-cta__wrap { margin-top: 1.5rem; }
.final-cta p { font-size: 1rem; }
@media (min-width: 768px) {
  .articles-grid { padding-bottom: 64px; }
  .final-cta { padding-top: 2.5rem; }
  .final-cta__title { font-size: 1.8rem; margin-top: 2rem; }
}

/* ============ 配色システムv1(確定 2026-09-04) — 学習UI意味論+紙 ============ */
:root {
  --paper: #F8F6F1; --paper-edge: #EAE5DA;            /* 生成り: 読み沈む場の地 */
  --sem-makna: #7E9B6E; --sem-makna-fill: #EAF1E6;    /* 若苔: 意味が生きとる */
  --sem-bunyi: #C29A3A;                               /* 黄土: 音が生きとる */
  --sem-laser: #C4503A;                               /* 朱: 指し示す点(臙脂とは別赤) */
  --lsn-field: #D1E2B9; --lsn-field-edge: #85995D;
  --lsn-wood: #BA9B63; --lsn-wood-edge: #7A5C36;
  --lsn-iron: #3C3A35; --lsn-iron-edge: #26241F;
}

/* ============ 貝レッスン(柱4・HTML書き下ろし、ex_kai_014) ============ */
.pband__art--lesson { max-width: 380px; margin: 0 auto; width: 100%; }
.lesson { text-align: left; }
/* The line that says what the lesson below is for, above its badge. */
.lesson__intro { color: var(--maroon-100); font-size: 1rem; line-height: 1.5; margin: 0 0 0.8rem; }
.lesson__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; }
/* パンくずは1行固定。列が狭ければ(1280 のレッスン列 322px 等)バッジが2段目に落ちる。 */
.lesson__badge { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--ink-10); border-radius: 9999px; padding: 0.25rem 0.7rem 0.25rem 0.45rem; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); white-space: nowrap; }
.lesson img.lsvg { display: block; margin: 0; max-width: none; border: 0; border-radius: 0; } /* .pband__art img の共通枠を外す */
.lesson__anchor { margin: 1.5rem auto 0; width: 128px; }
.lesson img.lsvg--anchor { width: 128px; height: 128px; }
.lesson__q { margin-top: 1.1rem; color: var(--ink-100); font-size: 1rem; line-height: 1.8; }
.lesson__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.7rem; } /* +0.7rem = 上辺をまたぐチップの半分ぶん */
.lopt { position: relative; color: var(--ink-100); background: #fff; border: 2px solid var(--ink-10); border-radius: 12px; padding: 0.6rem 0.5rem 0.55rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.lopt__art { display: block; width: 100%; aspect-ratio: 1 / 1; }
.lesson .lopt__art img.lsvg { width: 100%; height: 100%; }
.lopt__label { font-family: Georgia, 'Noto Serif JP', serif; font-size: 1.1rem; line-height: 1.3; }
.lopt__chip { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; display: inline-block; font-size: 0.7rem; letter-spacing: 0.06em; color: #fff; background: var(--sem-makna); border-radius: 9999px; padding: 0.15rem 0.6rem; }
.lopt--ok { border-color: var(--sem-makna); background: var(--sem-makna-fill); }
.lesson__deep { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 12px; padding: 0.3rem 1.1rem 1.25rem; margin-top: 1.7rem; }
.lesson__stages { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.15rem; position: relative; }
.lesson__stages::before { content: ""; position: absolute; left: 3px; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--paper-edge); }
.lesson__stages li { padding: 1.1rem 0; position: relative; }
.lesson__stages li::before { content: ""; position: absolute; left: -1.15rem; top: 1.45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-40); }
.lesson__label { display: block; color: var(--ink-40); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.lesson__stages img.lsvg { margin: 0.6rem auto 0; }
.lesson img.lsvg--scene { width: 170px; height: 170px; }
.lesson img.lsvg--glyph { width: 150px; height: 150px; }
.lesson__cap { color: var(--ink-70); font-size: 0.85rem; line-height: 1.7; margin-top: 0.5rem; }
.lesson__text { border-top: 1px solid var(--paper-edge); margin-top: 0.8rem; }
.lesson__text h3 { margin-top: 1.5rem; font-size: 0.8125rem; }
.lesson__text p { color: var(--ink-100); font-size: 1rem; line-height: 1.8; margin-top: 0.5rem; }

/* ============ 認証ページ (register): 白地・カードなし ============
   app.css の後に読む。ヘッダー(header-nav-static 系)とフォントクラスは
   app.css のまま。臙脂は Daftar / Konfirmasi とリンクにのみ。 */
.auth { background: #fff; color: var(--ink-100); width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box;
        min-height: calc(100dvh - 64px); display: flex; align-items: center; padding: 2rem 1rem 3rem; }
.auth *, .auth *::before, .auth *::after { box-sizing: border-box; }
.auth__inner { width: 100%; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; justify-items: center; }
.auth__art { margin: 0; width: 100%; max-width: 300px; }
.auth__art img { display: block; width: 100%; height: auto; }
.auth__panel { width: 100%; max-width: 400px; }
.auth__title { font-size: 1.45rem; line-height: 1.3; margin: 0; color: var(--ink-100); }
.auth__lead { color: var(--ink-70); font-size: 0.95rem; line-height: 1.6; margin: 0.5rem 0 0; }
.auth__form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.auth__field { display: flex; flex-direction: column; gap: 0.35rem; }
.auth__label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40); }
.auth__input { width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 1px solid var(--ink-10); border-radius: 8px;
               background: #fff; color: var(--ink-100); font-size: 1rem; line-height: 1.3; outline: none; transition: border-color 0.15s ease; }
.auth__input::placeholder { color: var(--ink-40); }
.auth__input:focus { border-color: var(--ink-40); }
/* 目玉ボタン: 入力欄と同じ親の中の button[type=button] を auth-forms.js が拾う。 */
.auth__pw { display: flex; align-items: stretch; }
.auth__pw .auth__input { border-radius: 8px 0 0 8px; border-right: 0; }
.auth__eye { display: flex; align-items: center; justify-content: center; width: 44px; padding: 0; border: 1px solid var(--ink-10);
             border-left: 0; border-radius: 0 8px 8px 0; background: #fff; color: var(--ink-40); cursor: pointer; }
.auth__pw:focus-within .auth__input, .auth__pw:focus-within .auth__eye { border-color: var(--ink-40); }
/* 欄ごとのエラー (auth-forms.js): 欄の下の文言と、えんじ色の枠。上の focus の枠より後に置き、
   focus 中も赤のまま。目玉ボタンは入力欄の直後の兄弟なので + で拾う。 */
.auth__field-error { margin: 0; color: var(--maroon-100); font-size: 0.85rem; line-height: 1.6; }
.auth__field-error[hidden] { display: none; }
.auth__input[aria-invalid="true"],
.auth__pw .auth__input[aria-invalid="true"],
.auth__pw .auth__input[aria-invalid="true"] + .auth__eye { border-color: var(--maroon-100); }
.auth__agree { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.55; color: var(--ink-70); cursor: pointer; }
.auth__agree input { width: 18px; height: 18px; margin: 0.1rem 0 0; flex: none; accent-color: var(--maroon-100); }
.auth__agree a, .auth__link { color: var(--maroon-100); text-decoration: none; }
.auth__link { font-weight: 700; }
.auth__agree a:hover, .auth__link:hover { color: var(--maroon-120); }
.auth__link--button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.auth__pill { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 0.25rem;
              padding: 0.75rem 1.5rem; border: 0; border-radius: 9999px; background: var(--maroon-100); color: #fff; font-size: 1rem;
              cursor: pointer; transition: background-color 0.15s ease; }
.auth__pill:hover { background: var(--maroon-120); }
.auth__pill:active { background: var(--maroon-140); }
.auth__pill[disabled] { opacity: 0.6; cursor: default; }
.auth__alt { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--ink-70); text-align: center; }
/* OTP: 6桁枠は白地言語に合わせる (app.css の #4a4a4a 枠 / 臙脂フォーカスを上書き)。 */
.auth .otp-inputs { display: flex; justify-content: center; gap: 8px; }
.auth .otp-input { width: 44px; height: 52px; border: 1px solid var(--ink-10); border-radius: 8px; background: #fff; color: var(--ink-100);
                   text-align: center; font-size: 1.25rem; line-height: 1; outline: none; }
.auth .otp-input:focus { border-color: var(--ink-40); box-shadow: none; }
.auth .auth-message { margin: 0; }
@media (min-width: 820px) {
  .auth { padding: 3rem 1.5rem 4rem; }
  .auth__inner { grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; justify-items: stretch; }
  .auth__art { max-width: 360px; justify-self: center; }
  .auth__panel { justify-self: start; }
}
/* login / reset_password 用の追加。第二行動は白ピル、リンク列は素のリンク。 */
.auth__pill--secondary { background: #fff; color: var(--ink-100); border: 1px solid var(--ink-10); }
.auth__pill--secondary:hover { background: #fff; border-color: var(--ink-40); }
.auth__pill--secondary:active { background: #fff; border-color: var(--ink-70); }
.auth__row { margin: 0.75rem 0 0; font-size: 0.85rem; text-align: right; }
.auth__sub { margin-top: 0.75rem; }
.auth__note { color: var(--ink-70); font-size: 0.85rem; line-height: 1.6; margin: 0; }
.auth__form--tight { margin-top: 0.9rem; }
.auth__view > .auth__pill--secondary { margin-top: 1.25rem; }
.auth__actions { margin: 1rem 0 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.auth__link--muted { color: var(--ink-70); font-weight: 400; }
.auth__link--muted:hover { color: var(--ink-100); }
.auth__msg-standalone { margin-top: 1rem; }
/* 絵の無い一本道(reset): 中央一列。 */
.auth--single .auth__inner { grid-template-columns: 1fr; justify-items: center; }
.auth--single .auth__panel { justify-self: center; }
/* 縦積み時 (<820px): 390×844 で register の全フォームが1画面に収まる余白。desktop は不変。 */
@media (max-width: 819px) {
  .auth { padding: 1.25rem 1rem 1.5rem; align-items: flex-start; }
  .auth__inner { gap: 1rem; }
  .auth__lead { margin-top: 0.4rem; }
  .auth__form { gap: 0.8rem; margin-top: 1.1rem; }
  .auth__field { gap: 0.3rem; }
  .auth__input { min-height: 44px; padding: 0.55rem 0.85rem; }
  .auth__pill { margin-top: 0; min-height: 46px; }
  .auth__alt { margin-top: 0.9rem; }
  .auth__view > .auth__pill--secondary { margin-top: 1rem; }
}

/* ============ 会社ページ (about-us): 白地・墨・髪の毛罫。写真なし。 ============ */
.about { background: #fff; color: var(--ink-100); width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; padding: 2.5rem 1rem 4rem; }
.about *, .about *::before, .about *::after { box-sizing: border-box; }
.about__inner { max-width: 720px; margin: 0 auto; }
.about__title { font-size: 1.7rem; line-height: 1.3; margin: 0; }
.about__lede { margin-top: 1.25rem; }
.about__lede p { color: var(--ink-100); font-size: 1rem; line-height: 1.85; margin: 0 0 1rem; }
.about__lede p:last-child { margin-bottom: 0; }
.about__closing { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
.about__team { margin: 0; }
.about__team img { display: block; width: 100%; height: auto; }
.about__section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-10); }
.about__h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.about__facts { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.7; }
.about__facts th, .about__facts td { text-align: left; vertical-align: top; padding: 0.7rem 0; border-bottom: 1px solid var(--ink-10); }
.about__facts th { color: var(--ink-40); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding-right: 1rem; width: 38%; }
.about__facts td { color: var(--ink-100); }
.about__kbli { list-style: none; margin: 0; padding: 0; }
.about__kbli li + li { margin-top: 0.25rem; }
.about__note { color: var(--ink-70); font-size: 0.95rem; line-height: 1.8; margin: 0 0 1.25rem; }
.about__contacts { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.about__contact { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--ink-10); }
.about__contact img { flex: none; width: 24px; height: 24px; margin-top: 0.15rem; }
.about__contact p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--ink-100); }
.about__small { color: var(--ink-70); font-size: 0.85rem; }
.about__channel { color: var(--maroon-100); font-weight: 700; }
@media (min-width: 768px) {
  .about { padding: 3.5rem 1.5rem 5rem; }
  .about__title { font-size: 2.1rem; }
  .about__closing:has(.about__team:not([hidden])) { grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; }
  .about__contacts { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .about__facts th { width: 32%; }
}

/* ============ 第三幕の外: /kamus/ への静かな出口 ============
   締めのCTAと競わせないための決めごと: 上下は罫線1本だけ (--ink-10、
   maker/about と同じ hairline)、地は白のまま、囲みも色面も作らない。
   人体図は幅 54px 固定 (1280px でも同じ)、部品チップ 26px、字チップ
   21px、カードは最大 27rem。文字は本文より小さく、見出し級は使わない。
   動くのはホットスポットの脈打ちだけで、prefers-reduced-motion で止まる。 */
.kexit {
  background: #fff;
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  padding: 1.25rem 1rem;
}
.kexit__lead {
  max-width: 27rem;
  margin: 0 auto 0.6rem;
  color: var(--ink-70);
  font-size: 0.8rem;
  line-height: 1.6;
}
.kexit__card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 27rem;
  margin: 0 auto;
  padding: 13px 16px;
  color: var(--ink-100);
  text-decoration: none;
}
.kexit__card:hover .kexit__title,
.kexit__card:focus-visible .kexit__title { color: var(--maroon-100); }
.kexit__card:focus-visible { outline: 2px solid var(--maroon-100); outline-offset: 2px; }

/* 人体図: 54px 固定。tubuh.webp は 378x944 なので高さは比率で決まる。 */
.kexit__fig { position: relative; flex: none; width: 54px; line-height: 0; }
.kexit__fig img { display: block; width: 54px; height: auto; }
/* 左手のあたり (索引の zone と同じ位置) */
.kexit__spot {
  position: absolute; left: 6%; top: 54%; width: 10px; height: 10px;
  border-radius: 50%; background: var(--maroon-100); opacity: 0.75;
}
.kexit__spot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--maroon-100); opacity: 0;
  animation: kexit-pulse 2.2s ease-out infinite;
}
@keyframes kexit-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kexit__spot::after { animation: none; }
}

.kexit__body { flex: 1 1 auto; min-width: 0; }
.kexit__title { display: block; font-size: 0.95rem; line-height: 1.3; }
.kexit__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* チップの中身はインライン SVG (viewBox 0 0 200 200)。箱の中で 100%。 */
.kexit__chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 26px; height: 26px;
  border: 1px solid var(--ink-10); border-radius: 6px; padding: 2px;
}
.kexit__chip svg { display: block; width: 100%; height: 100%; }
/* 狭い画面は部品4つだけ。字チップは 768px から。 */
.kexit__chip--kanji { display: none; width: 21px; height: 21px; }
.kexit__go { flex: none; width: 14px; height: 14px; color: var(--ink-40); }
.kexit__go svg { display: block; width: 100%; height: 100%; }

@media (min-width: 768px) {
  .kexit { padding: 1.5rem 1rem; }
  .kexit__chip--kanji { display: inline-flex; }
}

/* ログイン状態がまだ分からない間(<head> 冒頭のインラインスクリプトが
   html に auth-pending を付け、session-header.js が答えを受けて外す)、
   ヘッダーの認証部分だけを隠す。visibility なので場所は残り、名前に
   描き替わっても行は動かない。ロゴ・Alat・Harga は誰にでも同じなので
   隠さない。JS が無ければこのクラスは付かず、Daftar / Login が見える。
   隠す相手はクラス名ではなく data-auth 属性で選ぶ。ヘッダーのクラス名は
   テンプレート系 (header-nav__*) と静的ページ系 (header-nav-static__*) の
   2系統あり、名簿を2か所に書くと片方を書き忘れる。属性なら session-header.js
   と同じ1つの名簿で済む。 */
.auth-pending [data-auth] {
  visibility: hidden;
}