@charset "UTF-8";
/* COLUMN 特集第1回（/column/01/）固有スタイル（2026-10-07 作成）
   デザイン：/00_input/design/column01-mockup.html
   色・フォントは common.css の変数を参照。ブレークポイントは 768px の1本のみ */

.p-col01 { --col01-text: 760px; --col01-wide: 1080px; --col01-photo: 920px; }

/* ---------- 記事ヘッダー ---------- */
.p-col01__head { max-width: 940px; margin-inline: auto; padding: 88px var(--container-pad) 0; }
.p-col01__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 40px; font-family: var(--font-en); font-size: 12px; line-height: 1.5; }
.p-col01__label { letter-spacing: .22em; color: var(--color-accent); }
.p-col01__meta-rule { width: 64px; height: 1px; background: var(--gradient-brand); }
.p-col01__vol, .p-col01__date { letter-spacing: .14em; color: var(--color-text-muted); }
.p-col01__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(25px, 2.95vw, 38px);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--color-navy);
}
.p-col01__lead { margin-top: 24px; font-size: 15px; line-height: 2.2; color: var(--color-text-body); }
.p-col01__title + .p-col01__lead { margin-top: 40px; }

/* ---------- 写真 ---------- */
/* 2026-10-13 写真はトリミングせず全体を表示（高さ・縦横比の固定をやめ、元画像の比率のまま） */
.p-col01__photo { margin: 0; overflow: hidden; }
.p-col01__photo img { display: block; width: 100%; height: auto; }
.p-col01__photo--main { width: 100%; max-width: var(--col01-photo); margin: 72px auto 0; }
.p-col01__photo--wide { width: 100%; max-width: var(--col01-photo); margin: 80px auto 0; border-radius: 2px; }
.p-col01__photo--portrait { width: 100%; max-width: 420px; }

/* ---------- 本文 ---------- */
.p-col01__body { max-width: var(--col01-text); margin-inline: auto; padding-inline: var(--container-pad); }
.p-col01__section { padding-top: 96px; }
.p-col01__h2 {
  margin: 0 0 44px;
  font-family: var(--font-mincho);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--color-navy);
}
/* 質問：朱色の短い線＋質問文 */
.p-col01__q {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 18px;
  font-size: 14px; font-weight: 500; line-height: 2;
  color: var(--color-accent);
}
.p-col01__q::before { content: ""; flex: 0 0 16px; height: 1px; margin-top: 1em; background: var(--color-accent); transform-origin: 0 50%; }
/* 回答・本文 */
.p-col01__a { margin: 0 0 24px; font-size: 15px; line-height: 2.2; color: var(--color-text-body); }
.p-col01__a--end { margin-bottom: 48px; }
.p-col01__a--last { margin-bottom: 0; }
.p-col01__a, .p-col01__lead { text-align: justify; text-justify: inter-character; }

/* セクション3：縦写真＋本文 */
.p-col01__split {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 64px; align-items: center;
  max-width: var(--col01-wide); margin-inline: auto; padding: 96px var(--container-pad) 0;
}

/* ---------- 編集後記 ---------- */
.p-col01__note { margin-top: 112px; padding: 88px var(--container-pad); background: var(--color-bg-fv); }
.p-col01__note-inner { max-width: calc(var(--col01-text) - 48px); margin-inline: auto; }
.p-col01__note-head { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.p-col01__note-label { margin: 0; font-family: var(--font-en); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .2em; color: var(--color-accent); }
.p-col01__note-line { flex: 1; height: 1px; background: var(--color-border); }
.p-col01__quote { display: flex; gap: 28px; margin: 0 0 40px; }
.p-col01__quote-rule { flex: 0 0 2px; align-self: stretch; background: var(--color-accent); transform-origin: 50% 0; }
.p-col01__quote p { margin: 0; font-family: var(--font-mincho); font-size: 23px; font-weight: 500; line-height: 2; color: var(--color-navy); }

/* ---------- シェア ---------- */
.p-col01__share {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 28px;
  max-width: var(--col01-text); margin-inline: auto; padding: 72px var(--container-pad) 0;
}
.p-col01__share-label { font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--color-text-muted); }
.p-col01__share-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.p-col01__share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 46px; height: 46px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-navy);
  font-family: var(--font-sans); font-size: 13px; text-decoration: none; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.p-col01__share-copy { padding: 0 22px; }
.p-col01__share-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.p-col01__share-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- 次回予告 ---------- */
.p-col01__next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  max-width: calc(var(--col01-text) - 48px); margin: 56px auto 0; padding: 36px 40px;
  border: 1px solid var(--color-border);
}
.p-col01__next-label { margin: 0 0 10px; font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--color-text-muted); }
.p-col01__next-text { margin: 0; font-family: var(--font-mincho); font-size: 17px; line-height: 1.8; color: var(--color-navy); }
.p-col01__next-status { font-family: var(--font-en); font-size: 13px; letter-spacing: .1em; color: var(--color-text-muted); }
/* 2026-11-07 第2回公開：次回予告を第2回へのリンクに（第2回の「前後の記事」と同じ見た目） */
.p-col01__next-text a { color: var(--color-navy); text-decoration: none; border-bottom: 1px solid var(--color-border); transition: color var(--transition), border-color var(--transition); }
.p-col01__next-text a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- 商品導線 ---------- */
.p-col01__product { max-width: var(--col01-wide); margin-inline: auto; padding: 80px var(--container-pad) 0; }
.p-col01__product-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px;
  padding: 56px 48px; background: var(--color-navy);
}
.p-col01__product-text { flex: 1 1 380px; min-width: 0; }
.p-col01__product-label { margin: 0 0 14px; font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: #E2A08F; }
.p-col01__product-name { margin: 0 0 16px; font-family: var(--font-mincho); font-size: 25px; line-height: 1.7; color: var(--color-white); }
.p-col01__product-spec { margin: 0; font-size: 14px; line-height: 2; color: var(--color-bg-gray); }
.p-col01__product-note { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--color-bg-gray); }
.p-col01__product-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.p-col01__btn {
  display: inline-block; padding: 16px 34px; border-radius: var(--radius-pill);
  font-size: 14px; line-height: 1.5; text-align: center; text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition);
}
.p-col01__btn--primary { background: var(--color-accent); color: var(--color-white); }
.p-col01__btn--primary:hover { background: #A8452F; }
.p-col01__btn--ghost { border: 1px solid rgba(255, 255, 255, .55); color: var(--color-white); }
.p-col01__btn--ghost:hover { border-color: var(--color-white); }

/* ---------- 一覧へ戻る ---------- */
.p-col01__back { padding: 72px var(--container-pad) 112px; text-align: center; }
.p-col01__back-link { display: inline-block; padding-bottom: 8px; border-bottom: 1px solid var(--color-accent); font-size: 14px; letter-spacing: .06em; color: var(--color-navy); text-decoration: none; }
.p-col01__back-link:hover { color: var(--color-accent); }

/* ---------- 読了プログレスバー ---------- */
.p-col01__progress { display: none; }

/* =========================================================
   エフェクト（CSSのみ。JavaScript・ライブラリ不使用）
   - スクロール連動アニメーション（animation-timeline）に対応したブラウザでのみ動く
     非対応のブラウザでは、すべて最初から表示された状態になる
   - 「視差効果を減らす（prefers-reduced-motion: reduce）」設定では、すべて無効
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* 1. 読了プログレスバー（画面上端に固定、5px） */
    .p-col01__progress {
      display: block; position: fixed; inset: 0 0 auto 0; z-index: 110;
      height: 5px; background: var(--color-accent);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: col01-grow-x linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
  @supports (animation-timeline: view()) {
    /* 2. ブロックのフェードアップ */
    [data-rise] { animation: col01-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; }
    /* 3. 写真のゆっくりズームアウト */
    /*    2026-10-13：写真全体を見せるため、画面の中央に来た時点でズームを終える（cover 0%〜100% → entry 0%〜cover 50%） */
    .p-col01__photo img { animation: col01-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    /* 4. 編集後記の引用の縦罫線（上から下へ） */
    .p-col01__quote-rule { animation: col01-grow-y linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    /* 5. 質問文の前の短い線（左から右へ） */
    .p-col01__q::before { animation: col01-grow-x linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}
@keyframes col01-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes col01-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes col01-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes col01-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }

/* ---------- スマートフォン ---------- */
@media (max-width: 767px) {
  .p-col01__head { padding-top: 56px; }
  .p-col01__meta { margin-bottom: 28px; }
  .p-col01__meta-rule { width: 40px; }
  .p-col01__title { font-size: 23px; line-height: 1.65; }
  .p-col01__title + .p-col01__lead { margin-top: 32px; }
  .p-col01__photo--main { margin-top: 48px; }
  .p-col01__photo--wide { margin-top: 64px; border-radius: 0; }
  .p-col01__section { padding-top: 72px; }
  .p-col01__h2 { margin-bottom: 32px; font-size: 21px; line-height: 1.7; }
  .p-col01__a--end { margin-bottom: 40px; }
  .p-col01__split { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; }
  .p-col01__photo--portrait { margin-inline: auto; }
  .p-col01__note { margin-top: 88px; padding-block: 64px; }
  .p-col01__quote { gap: 20px; margin-bottom: 32px; }
  .p-col01__quote p { font-size: 19px; line-height: 1.9; }
  .p-col01__share { padding-top: 56px; }
  .p-col01__next { margin: 48px var(--container-pad) 0; padding: 28px 24px; }
  .p-col01__product { padding-top: 64px; }
  .p-col01__product-inner { padding: 40px 24px; }
  .p-col01__product-text { flex-basis: 100%; }
  .p-col01__product-name { font-size: 22px; }
  .p-col01__product-btns { width: 100%; flex-direction: column; }
  .p-col01__btn { width: 100%; }
  .p-col01__back { padding-block: 56px 88px; }
}