/* Cotocoto Works approved five-page design starter
   Scope all use under .cw-editorial-page to avoid affecting excluded pages. */
.cw-editorial-page {
  --cw-ink: #11110f;
  --cw-ivory: #f5f0e6;
  --cw-paper: #faf8f4;
  --cw-bronze: #a77847;
  --cw-bronze-light: #c7aa84;
  --cw-muted: #716c64;
  --cw-line: #d8d0c3;
  --cw-ease-out: cubic-bezier(.23,1,.32,1);
  color: var(--cw-ink);
  background: var(--cw-ivory);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-feature-settings: "palt";
}
.cw-editorial-page *, .cw-editorial-page *::before, .cw-editorial-page *::after { box-sizing: border-box; }
.cw-container { width:min(100% - 48px, 1280px); margin-inline:auto; }
.cw-reading { width:min(100% - 48px, 800px); margin-inline:auto; }
.cw-serif { font-family:"Noto Serif JP", serif; font-weight:400; letter-spacing:-.02em; }
.cw-eyebrow { color:var(--cw-bronze); font-size:.75rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.cw-display { font-family:"Noto Serif JP", serif; font-size:clamp(2rem,4.3vw,4rem); font-weight:400; line-height:1.28; letter-spacing:-.025em; }
.cw-lead { color:var(--cw-muted); font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.85; }
.cw-section { padding-block:clamp(64px,8vw,120px); }
.cw-section--ink { color:var(--cw-ivory); background:var(--cw-ink); }
.cw-section--paper { background:var(--cw-paper); }
.cw-grid-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); min-height:680px; }
.cw-grid-hero__copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(72px,8vw,128px); }
.cw-media { display:block; overflow:hidden; background:#ddd5c8; }
.cw-media img { display:block; width:100%; height:100%; object-fit:cover; }
.cw-btn { min-height:52px; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:13px 22px; border:1px solid var(--cw-bronze); border-radius:2px; text-decoration:none; font-weight:700; transition:transform 160ms var(--cw-ease-out),background-color 180ms var(--cw-ease-out),color 180ms var(--cw-ease-out); }
.cw-btn:active { transform:scale(.97); }
.cw-btn--primary { background:var(--cw-bronze); color:var(--cw-ink); }
.cw-btn--dark { background:var(--cw-ink); border-color:var(--cw-ink); color:var(--cw-ivory); }
.cw-btn--outline { background:transparent; color:inherit; }
.cw-facts { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--cw-line); border-bottom:1px solid var(--cw-line); }
.cw-fact { padding:28px; border-right:1px solid var(--cw-line); }
.cw-fact:last-child { border-right:0; }
.cw-card { background:var(--cw-paper); border:1px solid var(--cw-line); padding:clamp(24px,3vw,40px); border-radius:3px; }
.cw-rule { height:1px; border:0; background:var(--cw-line); }
.cw-legal-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--cw-line); border:1px solid var(--cw-line); }
.cw-legal-summary > * { background:var(--cw-paper); padding:28px; }
.cw-editorial-page :focus-visible { outline:3px solid var(--cw-bronze); outline-offset:4px; }
.cw-editorial-page [id] { scroll-margin-top:96px; }
@media (hover:hover) {
  .cw-btn:hover { transform:translateY(-2px); }
  .cw-btn--primary:hover { background:var(--cw-bronze-light); }
}
@media (max-width: 767px) {
  .cw-container,.cw-reading { width:min(100% - 40px, 100%); }
  .cw-grid-hero { grid-template-columns:1fr; min-height:0; }
  .cw-grid-hero__copy { padding:72px 20px 40px; }
  .cw-grid-hero .cw-media { min-height:210px; order:2; }
  .cw-facts { grid-template-columns:1fr; }
  .cw-fact { border-right:0; border-bottom:1px solid var(--cw-line); padding:20px 0; }
  .cw-fact:last-child { border-bottom:0; }
  .cw-legal-summary { grid-template-columns:1fr; }
  .cw-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .cw-editorial-page *, .cw-editorial-page *::before, .cw-editorial-page *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   記事内の図解パーツ（2026-08-22 追加）
   画像ではなくHTMLで作る。中の文字をAI・検索エンジンが読めるようにするため。
   ============================================================ */

/* ---- 工程フロー（PC横並び／モバイル縦積み）---- */
.cw-editorial-page .ar-flow {
  display: grid; gap: 30px; margin: 32px 0 10px;
}
@media (min-width: 768px) {
  .cw-editorial-page .ar-flow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 34px; }
}
.cw-editorial-page .ar-flow__step {
  position: relative; border: 1px solid var(--cw-line); background: var(--cw-paper);
  padding: 20px 18px 18px;
}
.cw-editorial-page .ar-flow__step:not(:last-child)::after {
  content: ""; position: absolute; background: var(--cw-bronze);
  left: 50%; bottom: -21px; transform: translateX(-50%);
  width: 15px; height: 12px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@media (min-width: 768px) {
  .cw-editorial-page .ar-flow__step:not(:last-child)::after {
    left: auto; right: -24px; top: 50%; bottom: auto; transform: translateY(-50%);
    width: 12px; height: 15px;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
  }
}
.cw-editorial-page .ar-flow__num {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 2.1rem; line-height: 1; color: var(--cw-bronze); margin-bottom: 10px;
}
.cw-editorial-page .ar-flow__title {
  font-family: "Noto Serif JP", serif; font-weight: 600; font-size: 1rem;
  line-height: 1.6; margin-bottom: 8px;
}
.cw-editorial-page .ar-flow__note {
  font-size: .84rem; line-height: 1.8; color: var(--cw-muted);
}
.cw-editorial-page .ar-flow__who {
  display: inline-block; margin-top: 14px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; padding: 3px 10px; border: 1px solid;
}
.cw-editorial-page .ar-flow__who--human { color: var(--cw-ink); border-color: var(--cw-ink); background: transparent; }
.cw-editorial-page .ar-flow__who--ai     { color: var(--cw-paper); border-color: var(--cw-bronze); background: var(--cw-bronze); }
.cw-editorial-page .ar-flow__who--auto   { color: var(--cw-muted); border-color: var(--cw-line); background: var(--cw-ivory); }

/* 本文カラムは min-content 以下にも縮めてよい。
   これがないと表の min-width が本文カラムを押し広げ、狭い画面で右端が切れる */
.cw-editorial-page .ar-layout > .ar-main { min-width: 0; }

.cw-editorial-page .ar-flow__who--plain { color: var(--cw-muted); border-color: var(--cw-line); background: var(--cw-ivory); }
.cw-editorial-page .ar-flow__who--alert { color: var(--cw-paper); border-color: var(--cw-bronze); background: var(--cw-bronze); }

/* ---- 表（画像化しない）---- */
.cw-editorial-page .ar-tblwrap { overflow-x: auto; margin: 30px 0 10px; -webkit-overflow-scrolling: touch; }
.cw-editorial-page .ar-tbl {
  width: 100%; border-collapse: collapse;
  font-size: .92rem; background: var(--cw-paper);
}
.cw-editorial-page .ar-tbl caption {
  caption-side: top; text-align: left; font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; color: var(--cw-bronze); padding-bottom: 10px;
}
.cw-editorial-page .ar-tbl th,
.cw-editorial-page .ar-tbl td {
  border: 1px solid var(--cw-line); padding: 12px 14px;
  text-align: left; vertical-align: top; line-height: 1.75;
}
.cw-editorial-page .ar-tbl thead th {
  background: var(--cw-ink); color: var(--cw-ivory);
  font-weight: 500; font-size: .82rem; letter-spacing: .04em;
}
.cw-editorial-page .ar-tbl tbody th { background: var(--cw-ivory); font-weight: 700; }
.cw-editorial-page .ar-tbl--wide { min-width: 460px; }
.cw-editorial-page .ar-tbl__note { font-size: .74rem; color: var(--cw-muted); margin-top: 8px; }

/* 記事内インラインCSSの .article-body p (0,1,1) が
   .ar-split__head--ai / --human (0,1,0) に勝ってしまい、
   AI列と人列の色分けが効いていなかったため、詳細度を上げて上書きする */
.cw-editorial-page .ar-split__head--ai { color: var(--cw-bronze); }
.cw-editorial-page .ar-split__head--human { color: var(--cw-ink); }

/* ---- FAQ（可視の内容と FAQPage 構造化データは必ず一致させる）---- */
.cw-editorial-page .ar-faq { margin-top: 8px; }
.cw-editorial-page .ar-faq__item {
  border: 1px solid var(--cw-line); background: var(--cw-paper); margin-bottom: 10px;
}
.cw-editorial-page .ar-faq__item > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 15px 48px 15px 18px;
  font-family: "Noto Serif JP", serif; font-weight: 600;
  font-size: .95rem; line-height: 1.7; color: var(--cw-ink);
}
.cw-editorial-page .ar-faq__item > summary::-webkit-details-marker { display: none; }
.cw-editorial-page .ar-faq__item > summary::after {
  content: "+"; position: absolute; right: 18px; top: 14px;
  color: var(--cw-bronze); font-size: 1.2rem; line-height: 1; font-weight: 400;
}
.cw-editorial-page .ar-faq__item[open] > summary::after { content: "\2212"; }
.cw-editorial-page .ar-faq__item[open] > summary { padding-bottom: 6px; }
.cw-editorial-page .ar-faq__item > p {
  margin: 0; padding: 0 18px 17px; font-size: .89rem; line-height: 1.95; color: var(--cw-muted);
}

/* ============================================================
   読む必要がある文字だけ、コントラストを基準（4.5:1）まで濃くする。
   ブロンズ #a77847 は アイボリー地で 3.4〜3.7 しかなく、小さい文字だと読みにくい。
   装飾の英字ラベル（Author / Featured / Reading / Contents / 01）は
   ブランド表現としてそのまま残す。
   ============================================================ */
.cw-editorial-page { --cw-bronze-text: #8c6238; }

.cw-editorial-page .article-body a,
.cw-editorial-page .ar-author a,
.cw-editorial-page .ar-midcta__link,
.cw-editorial-page .ar-meta__cat,
.cw-editorial-page .ar-takeaway__head,
.cw-editorial-page .ar-caution__head,
.cw-editorial-page .ar-split__head--ai,
.cw-editorial-page .ar-tbl caption,
.cw-editorial-page .cl-meta__cat,
.cw-editorial-page .pv-toc__head { color: var(--cw-bronze-text); }

/* ---- 記事ヘッダーの相談ボタン（2026-08-23 追加）----
   検索から記事に着地した人が、最初の画面で相談導線に出会えるようにする。
   従来はロゴと「コラム一覧へ」だけで、相談ボタンは記事末尾（7〜11画面分下）にしかなかった。 */
.cw-editorial-page .ar-header__right {
  display: flex; align-items: center; gap: 14px;
}
.cw-editorial-page .ar-header__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 16px;
  background: var(--cw-bronze); color: var(--cw-paper);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap;
  transition: background .18s var(--cw-ease-out);
}
.cw-editorial-page .ar-header__cta:hover { background: #8c6238; }

/* 狭い画面では「コラム一覧へ」を隠し、ロゴと相談ボタンだけにする。
   すぐ下のパンくず（ホーム ＞ コラム ＞ …）が戻り導線を兼ねるため、迷子にはならない。 */
@media (max-width: 519px) {
  .cw-editorial-page .ar-header__right .ar-header__link { display: none; }
}

/* ============================================================
   全ページ共通のモバイルメニュー（2026-08-23 追加）
   接頭辞 cwmm- は他のどのCSSとも衝突しない独自の名前空間。
   ページごとにヘッダーの作りが違う（Tailwind版2種＋自作CSS版）ため、
   ヘッダーのレイアウトには一切干渉せず、ボタン1個を差し込むだけにしてある。
   ボタンの色は currentColor。暗いヘッダーでも明るいヘッダーでもそのまま見える。
   ============================================================ */
.cwmm-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; margin-left: 2px;
  background: none; border: 0; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.cwmm-btn__bar {
  display: block; height: 1.5px; width: 100%; background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}
.cwmm-btn.is-open .cwmm-btn__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cwmm-btn.is-open .cwmm-btn__bar:nth-child(2) { opacity: 0; }
.cwmm-btn.is-open .cwmm-btn__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 768px) { .cwmm-btn { display: none; } }

.cwmm {
  position: fixed; inset: 0; z-index: 9999;
  background: #11110f; color: #f5f0e6;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cwmm[hidden] { display: none; }
.cwmm__inner {
  width: min(100% - 48px, 560px); margin-inline: auto;
  padding: 92px 0 48px; display: flex; flex-direction: column;
}
.cwmm__inner a {
  color: #f5f0e6; text-decoration: none;
  font-family: "Noto Serif JP", serif; font-size: 1.02rem; line-height: 1.6;
  padding: 17px 0; border-bottom: 1px solid rgba(245,240,230,.16);
  min-height: 44px; display: flex; align-items: center;
}
.cwmm__inner a:hover { color: #c9a37a; }
.cwmm__cta {
  margin-top: 26px; justify-content: center; border-bottom: 0 !important;
  background: #a77847; color: #faf8f4 !important;
  font-weight: 700; font-size: .95rem; padding: 18px 0 !important;
}
.cwmm__cta:hover { background: #c9a37a; }
.cwmm__close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  color: #f5f0e6; font-size: 1.6rem; line-height: 1;
}