/* ==========================================================================
   BODY MAINTE — legacy/css/card.css
   旧サイトから取り込んだページ（note / athletestories / athletestories/timing）を
   新デザインのカード型（Figma「実装取り込み・カード型」6615:6269）で表示するための CSS。
   タイトル（base.css の 7. Section header）→ 本文（旧デザインのまま白い面に入れる）→ 関連リンク（13. Link tiles）。
   本文はレイアウト・行間・横幅とも旧デザインのまま。上端の旧ヘッダー分の余白だけ詰める。

   site-nav.css（ヘッダー・ページトップ・フッター）の後に読み込む。デザイントークンも site-nav.css のものを使う。
   元は Code-unified/bdm/assets/legacy/css/card-chrome.css のカード型の節と card-focus.css。
   関連リンクのマウスオーバーは、ほかのページのタイル（base.css の .c-tile）と同じ動きにする（2026-10-14）。
   ========================================================================== */

:root {
  --w-card: 1320px;       /* タイトルの幅（左右 60px） */
  --w-card-wide: 1380px;  /* 3つ並びの関連リンク（左右 30px） */
  --radius-card: 10px;
}

/* main.css が a の outline を消しているため、キーボード操作でフォーカスしたときだけ枠を出す（WCAG 2.4.7）。
   マウス・タップ時の見た目は旧サイトと変わらない。値は base.css の :focus-visible に合わせている */
:focus-visible {
  outline: 2px solid var(--c-focus) !important;
  outline-offset: 3px;
}

body {
  background: var(--c-bg);
}

/* base.css のリセットのうち、タイトル・関連リンクに必要な分だけ */
.p-legacy-head *,
.c-links * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.c-links ul {
  list-style: none;
}

.c-links a {
  color: inherit;
  text-decoration: none;
}

.c-links img {
  display: block;
  max-width: none;
}

/* タイトル：PC は英字見出しの右に説明を下揃え（gap 70）。ヘッダー 100 ＋ 余白 50 の下に置く */
.p-legacy-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  column-gap: 70px;
  row-gap: 20px;
  width: min(100% - 120px, var(--w-card));
  margin: 0 auto;
  padding: 150px 0 40px;
  color: var(--c-text);
  font-family: var(--ff-ja);
  letter-spacing: var(--ls-body);
}

.c-sec-head__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.c-tag {
  display: inline-block;
  min-height: 29px;
  padding: 0 15px;
  color: var(--c-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.2em;
  background: var(--c-black);
  border-radius: var(--radius-pill);
}

.c-en-title {
  max-width: 100%;
  font-family: var(--ff-en);
  font-size: 96px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.c-sec-head__lead {
  flex: 0 1 760px;
  min-width: 0;
  font-size: 22px;
  line-height: 1.57;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

/* 本文：白い面に旧デザインをそのまま入れ、上端の旧ヘッダー分（PC 198px / SP 100px）を詰める */
.p-legacy-card {
  overflow: hidden;
  isolation: isolate; /* 旧 CSS の z-index が負の装飾（athletestories の緑の面など）を、白い面の奥に回さない */
  background: var(--c-white);
}

.p-legacy-card__inner {
  display: flow-root;
  margin-top: -198px;
}

/* 本文の img に付けた width・height（CL 制作ガイドライン 2.1.1）は縦横比の確保だけに使い、
   表示サイズは旧 CSS の幅指定のまま（高さは幅に合わせて決まる）。
   note は旧 CSS が高さだけを指定する img があり、もとの width・height で表示が合っているので対象外 */
.p-legacy-page--athlete .p-legacy-card__inner img,
.timing__wrap img {
  height: auto;
}

/* athletestories：旧 .main の上余白（22.6vw / SP 48.3vw）は本文の中に移し、タイトルの上には付けない */
.p-legacy-page--athlete .main {
  padding-top: 0;
}

.p-legacy-page--athlete .p-legacy-card__inner {
  padding-top: calc(22.6 * var(--vw));
}

/* 本文の最後の白い余白は出さない（note・athletestories） */
.p-legacy-card--flush .section {
  padding-bottom: 0;
}

/* 関連リンク：白カード。2つは 960px（pad 50/60/30）、3つは 1380px（左右 30px） */
.c-card {
  background: var(--c-white);
  border-radius: var(--radius-card);
}

.c-links {
  box-sizing: border-box; /* 幅に余白を含める（base.css と同じ。含めないと PC 1080px・SP 385px になり、他ページより広がる） */
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, 960px);
  margin: 60px auto 90px; /* 他ページ（CM・FAQ・SPECIAL など）と同じ：本文 → 60 → リンクカード → 90 → フッター */
  padding: 50px 60px 30px;
  color: var(--c-text);
  font-family: var(--ff-ja);
}

/* 3つ並び：他ページ（CM・FAQ・SPECIAL などの .p-gallery-links）と同じ。幅 100% − 60、余白 50 / 40 / 40 / 60 */
.c-links--3col {
  width: min(100% - 60px, var(--w-card-wide)); /* 他ページは本文が 1440px までなので最大 1380（1440 − 60）。旧ページは本文の幅の上限がないため、ここで止める */
  padding: 50px 40px 40px 60px;
}

.c-links__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 40px;
}

.c-links--3col .c-links__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-tile {
  display: block;
}

.c-tile__visual {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, rgb(240 240 240 / 30%) 0%, rgb(225 230 227 / 70%) 100%) var(--c-white);
  border-radius: var(--radius-card);
}

.c-tile__visual img {
  position: absolute;
  width: auto;
}

/* NOTE のタイル（SPECIAL 特集コンテンツと同じ画像）と、PRODUCTS・公式通販サイトのタイル（デザインデータの書き出し1枚） */
.c-tile__visual .p-legacy-tile,
.c-tile__visual .c-tile__image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* マウスオーバーで中の画像を少しだけ拡大する。ほかのページのタイル（base.css の .c-tile）と同じ動き（2026-10-14）。
   枠（角丸・overflow: hidden）はそのまま */
.c-tile__visual > :not(picture),
.c-tile__visual > picture > img {
  transition: scale 0.6s cubic-bezier(0.2, 0, 0.09, 0.99);
}

.c-tile:hover .c-tile__visual > :not(picture),
.c-tile:hover .c-tile__visual > picture > img {
  scale: 1.02;
}

.c-tile__label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

@media only screen and (max-width: 999px) {
  /* SP：ラベルの上に見出し 60px、説明は下に縦積み（gap 25）。ヘッダー 65 の下に置く */
  .p-legacy-head {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 25px;
    width: auto;
    padding: 83px 25px 50px;
  }

  .c-tag {
    min-height: 25px;
    font-size: 14px;
  }

  .c-sec-head__title {
    flex: initial;
  }

  .c-en-title {
    font-size: 60px;
  }

  .c-sec-head__lead {
    flex: none;
    font-size: 18px;
    line-height: 1.6;
  }

  /* 2行（「ボディメンテ おすすめ摂取タイミング」「FOR マラソン…」）をそれぞれ1行に収める */
  .p-legacy-head__lead--fit {
    font-size: 15.5px;
  }

  .p-legacy-card__inner {
    margin-top: -100px;
  }

  .p-legacy-page--athlete .p-legacy-card__inner {
    padding-top: 48.3vw;
  }

  .c-links,
  .c-links--3col {
    width: calc(100% - 20px);
    margin: 50px auto 90px; /* 他ページの SP と同じ：本文 → 50 → リンクカード → 90 → フッター */
    padding: 15px;
  }

  /* 他ページの SP と同じ：2つ並びは間 40（base.css）、3つ並びは間 25（.p-gallery-links） */
  .c-links__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .c-links--3col .c-links__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
  }

  .c-links .c-tile__label {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では、旧 CSS のアニメーションも他ページ（base.css）と同じく一瞬で終わらせる。
     timing の吹き出し（.period__anchor-speech-inner）は無限に上下し続けるため、ここで1回にする */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 読み込み演出（2026-10-07 に案2 に決定）：旧サイトの演出（main.js の loading）のうち、上端のラインと黒い帯は出さない
   （新しいページに無い動きのため）。画像を読み終わるまでは覆いで隠し、覆いは横へスライドさせずに 0.5 秒でフェードアウトする。
   覆いを外すまでの時間は assets/legacy/js/loading-fade.js */
.loading__bar {
  display: none;
}

/* 覆いはヘッダー（site-nav.css）より手前にして、画面全体を隠す。
   旧サイトでは覆いがヘッダーも隠していたが、差し替えた新しいヘッダーのほうが手前に出て、先に見えていた */
.js-loading {
  z-index: 1001;
}

.js-loading.js-loading-end {
  opacity: 0;
  transform: none;
  transition: opacity 0.5s ease-out;
}