:root {
    --pink:        #D4637E;
    --pink-dark:   #B84A66;
    --pink-light:  #FDF2F5;
    --pink-gradient: #F9E4EC;
    --green:       #1A9D57;
    --green-dark:  #147A44;
    --green-light: #ECF7F1;
    --ink:         #243040;
    --sub:         #4A5568;
    --bg:          #ffffff;
    --bg-soft:     #F7F8FA;
    --line:        #E8ECF0;
    --radius:      12px;
    --fs-body:     16px;
    --fs-note:     14px;
    --fs-tag:      12px;
    --maxw:        1200px;
    --shadow-sm:   0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:   0 4px 16px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04);
    --shadow-lg:   0 12px 40px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
    --shadow-xl:   0 20px 60px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.04);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
  body { font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif; color: var(--ink); background: var(--bg); line-height: 1.8; text-wrap: wrap; word-break: normal; }

  /* お知らせ詳細：本文はヘッダーメニュー幅の白いカラムに乗せ、左右の余白では
     サイト共通の背景アニメ(FloatingLines)を見せる（参考: Goodpatch news）。
     白カラムの幅・中央寄せは header.css の .nav-row（calc(100% - 32px) / max 1360px）に合わせる。
     ※ news-article.css は詳細ページ専用のため、一覧やその他ページには影響しない。 */
  .page-hero,
  .article-section {
    width: calc(100% - 32px);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    background: #fff !important;
  }
  /* 上：パンくずの少し上で白を開始し、ヘッダーとの間に背景アニメを見せる。上角を丸める */
  .page-hero { margin-top: 110px; padding-top: 24px !important; padding-bottom: 16px !important; border-radius: 24px 24px 0 0; }
  /* 下：本文の下で白を切り、下角を丸める。記事ナビ（前/次の記事）は背景の上に置く */
  .article-section { padding-bottom: 56px; border-radius: 0 0 24px 24px; }
  /* タイトル（ヒーロー）の左位置を本文（.article-body 800px・中央寄せ）に合わせる。
     880px = 本文800px + .wrap の左右padding 40px×2。中央寄せで本文と左右端が一致する。 */
  .page-hero .wrap { max-width: 880px; }

  /* BASE */
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
  .eyebrow { font-size: 11px; font-weight: 700; color: var(--pink-dark); letter-spacing: .25em; text-transform: uppercase; margin-bottom: 20px; }

  /* PAGE HERO */
  .page-hero { padding: 64px 0 40px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .breadcrumb { font-size: var(--fs-note); color: var(--sub); margin-bottom: 24px; line-height: 1.7; }
  .breadcrumb a { color: var(--sub); text-decoration: none; }
  .breadcrumb a:hover { color: var(--ink); }
  .breadcrumb span { margin: 0 6px; }

  /* ARTICLE HEAD */
  .article-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .article-date { font-size: var(--fs-note); color: var(--sub); font-weight: 300; letter-spacing: .03em; }
  .article-cat { display: inline-block; background: var(--pink-light); border: 1px solid var(--pink-gradient); color: var(--pink-dark); font-size: var(--fs-tag); font-weight: 700; padding: 3px 12px; border-radius: 9999px; letter-spacing: .04em; }
  /* .page-hero h1（テーマ共通 style.css）より詳細度を上げて確実に上書きする */
  .page-hero .article-title { font-size: 30px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }

  /* ARTICLE BODY */
  .article-section { padding: 56px 0 96px; }
  .article-body { max-width: 800px; margin-left: auto; margin-right: auto; border-top: 1px solid var(--line); padding-top: 40px; }
  .article-body > * + * { margin-top: 22px; }
  .article-body p { font-size: var(--fs-body); line-height: 2; color: var(--ink); }
  .article-body .lead { font-size: var(--fs-body); color: var(--sub); line-height: 2; }
  .article-body h2 { font-size: 20px; font-weight: 700; line-height: 1.55; margin-top: 48px; padding-left: 14px; border-left: 4px solid var(--pink); }
  .article-body h3 { font-size: 16px; font-weight: 700; line-height: 1.6; margin-top: 36px; }
  .article-body ul, .article-body ol { padding-left: 1.4em; }
  .article-body li { font-size: 16px; line-height: 1.95; margin-top: 8px; }
  .article-body li::marker { color: var(--pink); }
  .article-body a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
  .article-body a:hover { color: var(--pink-dark); }
  .article-body strong { font-weight: 700; }
  .article-body img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
  .article-body figure { margin-top: 28px; }
  .article-body figcaption { font-size: var(--fs-note); color: var(--sub); margin-top: 8px; text-align: center; }
  .article-body blockquote { border-left: 3px solid var(--line); padding: 4px 0 4px 18px; color: var(--sub); font-size: var(--fs-note); }
  .article-note { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; font-size: var(--fs-note); color: var(--sub); line-height: 1.9; }
  .article-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
  .article-table th, .article-table td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
  .article-table th { background: var(--bg-soft); font-weight: 500; color: var(--sub); white-space: nowrap; }

  /* ===== MEMBER INTERVIEW ===== */
  /* プロフィールカード */
  .iv-hero { display: flex; gap: 28px; align-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; margin-top: 36px; }
  .iv-hero-photo { flex-shrink: 0; }
  .iv-hero-photo img { width: 160px; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; }
  .iv-hero-info { flex: 1; min-width: 0; }
  .iv-hero .iv-hero-eyebrow { font-size: 11px; font-weight: 700; color: var(--pink-dark); letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; margin-bottom: 10px; }
  .iv-hero .iv-hero-name { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 8px; }
  .iv-hero .iv-hero-role { font-size: var(--fs-note); color: var(--sub); line-height: 1.7; margin-bottom: 14px; }
  .iv-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .iv-hero-tag { display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--sub); font-size: var(--fs-tag); font-weight: 500; padding: 4px 12px; border-radius: 9999px; }

  /* 章見出し */
  .iv-chapter { display: flex; flex-direction: column; gap: 4px; margin-top: 52px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .iv-chapter-num { font-size: 11px; font-weight: 700; color: var(--pink); letter-spacing: .14em; text-transform: uppercase; }
  .iv-chapter-label { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.5; }

  /* 一問一答 */
  .iv-block { margin-top: 28px; }
  .iv-block .iv-q { display: flex; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.8; margin-bottom: 12px; }
  .iv-a { display: flex; gap: 10px; }
  .iv-a .iv-a-body { flex: 1; min-width: 0; }
  .iv-a .iv-a-body p { font-size: var(--fs-body); line-height: 2; color: var(--ink); }
  .iv-a .iv-a-body p + p { margin-top: 16px; }
  .iv-mark { flex-shrink: 0; font-weight: 700; font-size: 15px; line-height: 1.9; }
  .iv-q .iv-mark { color: var(--pink); }
  .iv-a .iv-mark { color: var(--green); }

  /* プルクォート */
  .iv-pull { margin-top: 44px; padding: 28px 32px; background: var(--pink-light); border: 1px solid var(--pink-gradient); border-radius: 16px; }
  .iv-pull p { font-size: var(--fs-body); font-weight: 700; color: var(--ink); line-height: 1.85; }
  .iv-pull .iv-pull-source { font-size: 13px; font-weight: 500; color: var(--pink-dark); margin-top: 12px; }

  /* 1日のスケジュール（横タイムライン / Daily Schedule） */
  .iv-day { margin-top: 40px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px 22px; box-shadow: var(--shadow-sm); }
  .iv-day .iv-day-title { font-size: 26px; font-weight: 700; color: var(--pink); opacity: .5; line-height: 1.2; letter-spacing: .01em; text-align: left; margin-top: 0; margin-bottom: 2px; }
  .iv-day .iv-day-sub { font-size: 13px; color: var(--sub); margin-bottom: 4px; }
  .iv-day-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 6px 0; }
  .iv-day-track { position: relative; height: 300px; min-width: 700px; }
  .iv-day-bar { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 44px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9999px; }
  .iv-day-time { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 700; color: var(--sub); white-space: nowrap; }
  .iv-day-event { position: absolute; top: 0; bottom: 0; width: 0; }
  .iv-day-node { position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); border: 2px solid #fff; box-shadow: 0 0 0 3px var(--pink-light); }
  .iv-day-event.is-up .iv-day-node { top: calc(50% - 22px); transform: translate(-50%, -50%); }
  .iv-day-event.is-down .iv-day-node { top: calc(50% + 22px); transform: translate(-50%, -50%); }
  .iv-day-event::before { content: ''; position: absolute; left: 0; width: 2px; transform: translateX(-50%); background: var(--line); }
  .iv-day-event.is-up::before { top: calc(50% - 56px); height: 34px; }
  .iv-day-event.is-down::before { top: calc(50% + 22px); height: 34px; }
  .iv-day-card { position: absolute; left: 0; width: 154px; }
  .iv-day-event.is-up .iv-day-card { bottom: calc(50% + 54px); }
  .iv-day-event.is-down .iv-day-card { top: calc(50% + 54px); }
  .iv-day-event.is-end .iv-day-card { left: auto; right: 0; text-align: right; }
  .iv-day-card h4 { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
  .iv-day-card p { font-size: var(--fs-note); color: var(--sub); line-height: 1.7; }

  /* ARTICLE FOOT */
  /* ナビ（白シートの外・背景の上）とフッターの間に余白を確保 */
  .article-after { padding-bottom: 80px; }
  /* 1行3カラム：左=前の記事／中央=一覧ボタン／右=次の記事。
     .post-nav を display:contents で展開し、pn-prev / back-to-list / pn-next を列割り当て。
     前後どちらかのみのページは空の <span> が残り列へ自動配置される。 */
  .article-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 28px; max-width: 800px; margin: 64px auto 0; }
  .back-to-list { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; gap: 10px; background: var(--pink); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; padding: 14px 32px; border-radius: 9999px; border: 1px solid transparent; letter-spacing: .02em; box-shadow: 0 4px 16px rgba(212,99,126,.2); transition: all .35s cubic-bezier(.4,0,.2,1); white-space: nowrap; }
  .back-to-list:hover { background: var(--pink-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(212,99,126,.3); }
  .back-to-list svg { width: 18px; height: 18px; flex-shrink: 0; }
  .post-nav { display: contents; }
  .post-nav a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; line-height: 1.6; transition: color .2s; }
  .post-nav a:hover { color: var(--pink); }
  .post-nav .pn-arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--pink); transition: transform .25s; }
  .post-nav .pn-prev { grid-column: 1; grid-row: 1; justify-self: start; }
  .post-nav .pn-prev:hover .pn-arrow { transform: translateX(-3px); }
  .post-nav .pn-next { grid-column: 3; grid-row: 1; justify-self: end; }
  .post-nav .pn-next:hover .pn-arrow { transform: translateX(3px); }

  /* RESPONSIVE */
  @media (max-width: 768px) {
    .wrap { padding: 0 20px; }
    /* SP：本文はウィンドウ幅に合わせてベタ打ちで折り返す（文節単位の折り返しを解除） */
    body { word-break: normal; text-wrap: wrap; }
    .article-body, .article-body p, .article-body li, .article-lead,
    .iv-pull p, .article-note, .breadcrumb { word-break: normal; overflow-wrap: anywhere; text-wrap: wrap; }
    .page-hero { padding: 40px 0 32px; }
    .page-hero .article-title { font-size: 23px; }
    .article-section { padding: 40px 0 72px; }
    .article-body h2 { font-size: 18px; margin-top: 40px; }
    .iv-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px; }
    .iv-hero-photo img { width: 140px; }
    .iv-chapter { margin-top: 40px; }
    .iv-chapter-label { font-size: 17px; }
    .iv-pull { padding: 22px; }
    .iv-day { padding: 20px 18px 16px; }
    .iv-day .iv-day-title { font-size: 22px; }
    /* フッターナビ：上段に一覧ボタン、下段に前/次を左右配置 */
    .article-foot { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 24px; }
    .back-to-list { grid-column: 1 / -1; grid-row: 1; }
    .post-nav .pn-prev { grid-column: 1; grid-row: 2; }
    .post-nav .pn-next { grid-column: 2; grid-row: 2; }
    .article-after { padding-bottom: 56px; }
    .article-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .article-table th { white-space: normal; }
    .footer-inner { flex-direction: column; gap: 28px; }
    .footer-nav { justify-content: flex-start; gap: 14px 20px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  }