@charset "UTF-8";
/* ==========================================================
   2026-10 改修（キンレイをもっと知る / 監修先様との取り組み）
   ※ MT インデックステンプレート「kinrei2026.css」(#826) から
     share/css/kinrei2026.css に出力。編集は git → MT へ貼り付け。
   ※ 既存の html.re-html body.re-body a {display:inline-block} 等に負けないよう
     先頭に html.re-html body.re-body を付けている。
   ========================================================== */

/* 文節改行（BudouX で <wbr> を入れた要素に付与） */
html.re-html body.re-body .k26-phrase { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- TOP：Voice Of Fan（各記事のトップ画像を表示） ---------- */
#re-voice ul li a .re-voice-box.re-voice-photo { margin-top: 0; padding: 26px 26px 34px; min-height: 612px; }
#re-voice ul li a .re-voice-box.re-voice-photo:before { content: none; display: none; }
#re-voice ul li a .re-voice-box.re-voice-photo .re-voice-img { display: block; width: 100%; height: auto; aspect-ratio: 359 / 251; object-fit: cover; margin: 0 0 26px; }
#re-voice ul li a .re-voice-box.re-voice-photo p { line-height: calc(30 / 18); }
@media screen and (max-width: 1340px) {
  #re-voice ul li a .re-voice-box.re-voice-photo { width: 100%; }
}
@media screen and (max-width: 767px) {
  #re-voice ul li a .re-voice-box.re-voice-photo { margin-top: 0; padding: calc(40 / 750 * 100vw) calc(40 / 750 * 100vw) calc(50 / 750 * 100vw); min-height: 0; width: calc(670 / 750 * 100vw); }
  #re-voice ul li a .re-voice-box.re-voice-photo .re-voice-img { margin-bottom: calc(40 / 750 * 100vw); }
}

/* ---------- TOP：監修先様との取り組み（見出しは他の .re-heading と同一仕様） ---------- */
#re-partner { width: 95%; max-width: 1278px; margin: 115px auto 0; padding-bottom: 120px; }
#re-partner .re-heading { margin-bottom: 60px; }
#re-partner .re-heading h3 { max-width: none; }
#re-partner .re-heading h3::before,
#re-partner .re-heading h3::after { left: 50%; margin-left: -140px; }
#re-partner .re-heading h3::before { width: 280px; }
#re-partner .re-heading h3::after { width: 140px; }
html.re-html body.re-body .re-partner-list { display: grid; grid-template-columns: repeat(4, 300px); gap: 28px 27px; justify-content: center; margin: 0 auto; padding: 0; list-style: none; }
html.re-html body.re-body .re-partner-list li { margin: 0; }
html.re-html body.re-body .re-partner-list a { position: relative; display: block; width: 300px; aspect-ratio: 1 / 1; overflow: hidden; text-decoration: none; container-type: inline-size; }
html.re-html body.re-body .re-partner-list img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
html.re-html body.re-body .re-partner-list a:hover img { transform: scale(1.05); }
/* ラベルはタイル幅に比例（PC 300px 時に 16px）→ SP でも PC と同じ見え方 */
html.re-html body.re-body .re-partner-list .re-partner-label { position: absolute; left: 3.333cqw; bottom: 3.333cqw; display: flex; flex-direction: column; align-items: flex-start; }
html.re-html body.re-body .re-partner-list .re-partner-label span { display: inline-block; background: #00A72B; color: #fff; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", Meiryo, sans-serif; font-weight: 900; font-size: 5.333cqw; line-height: 1.625; padding: 0 1.333cqw; letter-spacing: .02em; white-space: nowrap; }
@media screen and (max-width: 1340px) {
  html.re-html body.re-body .re-partner-list { grid-template-columns: repeat(4, 1fr); }
  html.re-html body.re-body .re-partner-list a { width: 100%; }
}
@media screen and (max-width: 767px) {
  #re-partner { margin-top: 22%; padding-bottom: 18%; width: 100%; }
  #re-partner .re-heading { margin-bottom: 9%; }
  #re-partner .re-heading h3::before { width: 60%; left: 20%; margin-left: 0; }
  #re-partner .re-heading h3::after { width: 30%; left: 20%; margin-left: 0; }
  #re-partner .re-heading p { width: 90%; margin: 0 auto; }
  html.re-html body.re-body .re-partner-list { grid-template-columns: repeat(2, 1fr); gap: 3vw; width: 90%; }
}

/* ---------- ヘッダー：キンレイをもっと知る（PCメガメニュー） ---------- */
header#re-header nav > ul.header_pc-only > li .header_slide .header_slide_inner.header_slide_fan.header_slide_fan26 { display: block; }
header#re-header .hd-fan26 { display: grid; grid-template-columns: repeat(2, 343px); gap: 30px 30px; margin-top: 4px; }
header#re-header .hd-fan26 a { display: flex; align-items: center; justify-content: space-between; height: 95px; border: 1px solid #a9a9a9; background: #fff; text-decoration: none; color: #000; overflow: hidden; }
header#re-header .hd-fan26 a span { padding-left: 20px; font-size: 18px; letter-spacing: .05em; }
header#re-header .hd-fan26 a img { width: 135px; height: 93px; object-fit: cover; display: block; }
header#re-header .hd-fan26 a:hover { opacity: .75; }

/* ---------- キンレイをもっと知る（/fan/） ---------- */
/* MV：ブラウザを縮小・拡大しても常に画面幅いっぱい（旧ページと同じ挙動） */
html.re-html body.re-body .re-fan #re-mv img { display: block; width: 100%; height: auto; }
html.re-html body.re-body .re-fan #re-mv img.re-sp-only { display: none; }
html.re-html body.re-body .re-fan #re-about p { word-break: keep-all; overflow-wrap: anywhere; }
/* ページ内リンク後にキャレット（点滅カーソル）を出さない */
html.re-html body.re-body .re-fan .fan26-sec,
html.re-html body.re-body .re-fan .fan26-sec * { caret-color: transparent; }
html.re-html body.re-body .re-fan .fan26-sec:focus,
html.re-html body.re-body .re-fan .fan26-sec h3:focus { outline: none; }

html.re-html body.re-body .re-fan .fan26-anchor { display: grid; grid-template-columns: repeat(2, 500px); gap: 24px 24px; justify-content: center; margin: 80px auto 100px; padding: 0; list-style: none; }
html.re-html body.re-body .re-fan .fan26-anchor a { position: relative; display: flex; align-items: center; justify-content: center; height: 86px; border-radius: 43px; background: #00A72B; color: #fff; font-size: 24px; letter-spacing: .08em; text-decoration: none; }
html.re-html body.re-body .re-fan .fan26-anchor a::after { content: ""; position: absolute; right: 44px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
html.re-html body.re-body .re-fan .fan26-anchor a:hover { opacity: .8; }

html.re-html body.re-body .re-fan .fan26-sec { border-top: 2px solid #ededed; padding: 78px 0 70px; scroll-margin-top: 110px; }
/* 見出し：旧「キンレイファンのみなさまへ」ページの見出し（44px／小文字30px）と同サイズ */
html.re-html body.re-body .re-fan .fan26-sec h3 { text-align: center; font-size: 44px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; margin: 0 0 56px; padding-bottom: 22px; position: relative; }
html.re-html body.re-body .re-fan .fan26-sec h3 small { font-size: 30px; }
html.re-html body.re-body .re-fan .fan26-sec h3::before,
html.re-html body.re-body .re-fan .fan26-sec h3::after { content: ""; position: absolute; bottom: 0; left: 50%; height: 2px; }
html.re-html body.re-body .re-fan .fan26-sec h3::before { width: 218px; margin-left: -109px; background: #EA5521; }
html.re-html body.re-body .re-fan .fan26-sec h3::after { width: 109px; margin-left: -109px; background: #00A33E; }
html.re-html body.re-body .re-fan .fan26-cards { display: grid; grid-template-columns: repeat(3, 413px); gap: 40px 20px; justify-content: center; margin: 0 auto; padding: 0; list-style: none; }
html.re-html body.re-body .re-fan .fan26-cards li { margin: 0; }
html.re-html body.re-body .re-fan .fan26-cards a { display: block; color: #000; text-decoration: none; }
html.re-html body.re-body .re-fan .fan26-cards .fan26-img { display: block; width: 100%; aspect-ratio: 413 / 310; overflow: hidden; }
html.re-html body.re-body .re-fan .fan26-cards img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
html.re-html body.re-body .re-fan .fan26-cards a:hover img { transform: scale(1.05); }
/* カードタイトル：旧ページのカテゴリタイトル（24px）と同サイズ */
html.re-html body.re-body .re-fan .fan26-cards p { margin: 18px 0 0; text-align: center; font-size: 24px; font-weight: 700; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
html.re-html body.re-body .re-fan .fan26-more { text-align: center; margin: 56px 0 0; }
html.re-html body.re-body .re-fan .fan26-more a { display: inline-flex; align-items: center; justify-content: center; gap: 26px; width: 241px; height: 55px; border: 1px solid #000; border-radius: 30px; background: #fff; color: #000; font-size: 20px; text-decoration: none; }
html.re-html body.re-body .re-fan .fan26-more a img { width: 24px; height: auto; }
html.re-html body.re-body .re-fan .fan26-bnr { text-align: center; margin: 56px 0 0; }
html.re-html body.re-body .re-fan .fan26-bnr a { display: inline-block; color: #000; text-decoration: none; }
html.re-html body.re-body .re-fan .fan26-bnr .fan26-bnr-box { display: flex; align-items: center; justify-content: center; gap: 30px; width: 826px; height: 138px; margin-top: 15px; background: #e9ede9; overflow: visible; }
html.re-html body.re-body .re-fan .fan26-bnr .fan26-bnr-box img.illust { width: 163px; margin-top: -30px; }
html.re-html body.re-body .re-fan .fan26-bnr .fan26-bnr-box img.logo { width: 566px; }
html.re-html body.re-body .re-fan .fan26-bnr p { margin: 14px 0 0; font-size: 18px; letter-spacing: .05em; }
@media screen and (max-width: 1340px) {
  html.re-html body.re-body .re-fan .fan26-cards { grid-template-columns: repeat(3, 1fr); width: 92%; }
}
/* SP：旧ページ（キンレイファンのみなさまへ）の SP 仕様に合わせる */
@media screen and (max-width: 767px) {
  html.re-html body.re-body .re-fan #re-mv img.re-pc-only { display: none; }
  html.re-html body.re-body .re-fan #re-mv img.re-sp-only { display: block; }
  html.re-html body.re-body .re-fan .fan26-anchor { grid-template-columns: 1fr 1fr; gap: 3vw; width: 90%; margin: 10% auto 12%; }
  html.re-html body.re-body .re-fan .fan26-anchor a { height: 13vw; border-radius: 6.5vw; font-size: 3.3vw; letter-spacing: 0; padding: 0 7vw 0 2vw; white-space: nowrap; }
  html.re-html body.re-body .re-fan .fan26-anchor a::after { right: 3.6vw; width: 1.6vw; height: 1.6vw; margin-top: -1.2vw; border-width: 0 1.5px 1.5px 0; }
  html.re-html body.re-body .re-fan .fan26-sec { padding: 13% 0 12%; scroll-margin-top: 70px; }
  html.re-html body.re-body .re-fan .fan26-sec h3 { font-size: 7.5vw; margin-bottom: 8%; padding-bottom: 4vw; }
  html.re-html body.re-body .re-fan .fan26-sec h3 small { font-size: 5vw; }
  html.re-html body.re-body .re-fan .fan26-sec h3::before { width: 40vw; margin-left: -20vw; }
  html.re-html body.re-body .re-fan .fan26-sec h3::after { width: 20vw; margin-left: -20vw; }
  html.re-html body.re-body .re-fan .fan26-cards { grid-template-columns: 1fr; gap: 9vw; width: 85%; }
  html.re-html body.re-body .re-fan .fan26-cards p { font-size: 4.6vw; line-height: 1.6; margin-top: 3vw; }
  html.re-html body.re-body .re-fan .fan26-more { margin-top: 11%; }
  html.re-html body.re-body .re-fan .fan26-more a { width: 55vw; height: 12vw; border-radius: 6vw; font-size: 4vw; gap: 4vw; }
  html.re-html body.re-body .re-fan .fan26-more a img { width: 5vw; }
  html.re-html body.re-body .re-fan .fan26-bnr { margin-top: 11%; }
  html.re-html body.re-body .re-fan .fan26-bnr .fan26-bnr-box { width: 90vw; height: 18vw; gap: 3vw; margin: 4vw auto 0; padding: 0 3vw; }
  html.re-html body.re-body .re-fan .fan26-bnr .fan26-bnr-box img.illust { width: 17vw; margin-top: -5vw; }
  html.re-html body.re-body .re-fan .fan26-bnr .fan26-bnr-box img.logo { width: 62vw; }
  html.re-html body.re-body .re-fan .fan26-bnr p { font-size: 3.4vw; padding: 0 5%; }
}