@charset "utf-8";
/*
 * サマーセミナー2026（senior40） 単体ページ用スタイル
 * バニラCSS（手書き）。assets/style/_src の Sass ビルド対象ではないので直接編集する。
 * senior40 ページ表示時のみ header.php から読み込まれる。
 *
 * デザイン: Figma「サマセミ2026」node 148-3870（PC 1220px / SP 375px）
 * KV は絶対配置のコンポジションなので、デザイン基準幅に対する縮小率を
 * --s40-u（1デザインpx分の長さ）として持たせ、狭い画面では比例縮小させる。
 */

/* bodyClass() により body にも senior40 クラスが付くため、必ず #content で限定すること。
   ここを素の .senior40 にすると body の背景（#e3e3e3）まで白で塗りつぶしてしまい、
   ウィンドウ右側の余白や、フッターの白パネルの隙間（＝区切り線）が消える */
#content.senior40 {
  /* PC: サイドバー218px を除いたコンテンツ幅1000pxを基準にする（スクロールバー分18pxを控除） */
  --s40-u: min(1px, calc((100vw - 236px) / 1000));
  --s40-font-w6: "MFW-HiraginoUDSansStd-W6", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro W6", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  background: #fff;
  overflow: hidden;
  /* フッターとの間に2pxの隙間をあけ、body の背景（#e3e3e3）を区切り線として見せる。
     デザイン上フッターの白パネルは上端2pxを空けて始まっている（テーマの $item_margin と同値） */
  margin-bottom: 2px;
}

.senior40 img {
  display: block;
  max-width: 100%;
}

/* 右から左へ流れるマーキー共通。1周分の移動量は要素側で --s40-period に指定する */
@keyframes s40-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--s40-period)), 0, 0); }
}

/* 流れている画像はドラッグ・選択・カーソルの対象にしない（マーキーの器ごと無効化する） */
.senior40 .s40-kv-marquee,
.senior40 .s40-thumbs {
  pointer-events: none;
}


/* ===================================================================
 * KV
 * =================================================================== */

.senior40 .s40-kv {
  position: relative;
  padding-top: calc(47 * var(--s40-u));
  overflow-x: clip;
}

.senior40 .s40-kv-marquee {
  overflow: hidden;
}

.senior40 .s40-kv-track {
  --s40-period: calc(1832 * var(--s40-u)); /* 写真4枚分 = (340 + 118) * 4 */
  display: flex;
  align-items: flex-start;
  gap: calc(118 * var(--s40-u));
  width: max-content;
  animation: s40-marquee 50s linear infinite;
}

.senior40 .s40-kv-item {
  flex: none;
  width: calc(340 * var(--s40-u));
  height: calc(262 * var(--s40-u));
}

/* 2枚目・4枚目を下げて段差をつける */
.senior40 .s40-kv-item:nth-child(4n+2) { margin-top: calc(121 * var(--s40-u)); }
.senior40 .s40-kv-item:nth-child(4n+4) { margin-top: calc(78 * var(--s40-u)); }

.senior40 .s40-kv-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* トリミングは PC/SP それぞれの書き出し画像側で済んでいる。
   cover は素材の実寸が枠と数px違っても縦横比が崩れないようにするための保険 */
.senior40 .s40-kv-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 手書きタイトルと丸ボタンを載せる、デザイン基準幅のレイヤー */
.senior40 .s40-kv-inner {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: calc(1000 * var(--s40-u));
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.senior40 .s40-kv-title {
  margin: 0;
}

.senior40 .s40-kv-title-lead,
.senior40 .s40-kv-title-main {
  position: absolute;
  height: auto;
}

.senior40 .s40-kv-title-lead {
  left: calc(139 * var(--s40-u));
  top: calc(69 * var(--s40-u));
  width: calc(353 * var(--s40-u));
}

.senior40 .s40-kv-title-main {
  left: calc(349 * var(--s40-u));
  top: calc(128 * var(--s40-u));
  width: calc(513 * var(--s40-u));
}

/* 「調査レポートを読む」丸ボタン */
.senior40 .s40-cta {
  position: absolute;
  right: calc(38 * var(--s40-u));
  top: calc(329 * var(--s40-u));
  width: calc(148 * var(--s40-u));
  height: calc(148 * var(--s40-u));
  box-sizing: border-box;
  padding-top: calc(29 * var(--s40-u));
  border-radius: 50%;
  background: linear-gradient(148deg, #ffcc4a 0%, #ff8e00 42.3%, #ff5500 100%);
  box-shadow: 0 5px 15px rgba(211, 121, 24, 0.4);
  color: #fff;
  font-family: var(--s40-font-w6);
  text-align: center;
  text-decoration: none;
  font-feature-settings: "palt" 1;
  pointer-events: auto;
  transition: opacity 0.2s;
}

.senior40 .s40-cta:hover {
  opacity: 0.85;
}

.senior40 .s40-cta-icon {
  width: calc(16 * var(--s40-u));
  height: calc(20 * var(--s40-u));
  margin: 0 auto;
}

.senior40 .s40-cta-label,
.senior40 .s40-cta-sub {
  display: block;
  line-height: 1.4;
}

.senior40 .s40-cta-label {
  margin-top: calc(11 * var(--s40-u));
  font-size: calc(21 * var(--s40-u));
  letter-spacing: calc(0.42 * var(--s40-u));
}

.senior40 .s40-cta-sub {
  font-size: calc(18 * var(--s40-u));
  letter-spacing: calc(0.36 * var(--s40-u));
}


/* ===================================================================
 * リード文
 * =================================================================== */

.senior40 .s40-lead {
  width: 553px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding-top: 87px;
  font-family: var(--s40-font-w6);
  font-feature-settings: "pkna" 1;
}

/* letter-spacing はデザイン指定が0.8px(=0.05em)だが、その値だと1行あたり1〜2文字
   多く入って改行位置がデザインとずれるため、実測して合わせている。
   PC16pxで1.25〜1.30pxが安定領域なので、その中央の0.08em(=1.28px)を採る。
   em指定にしておくとSP(14px)でも同じ比率になる */
.senior40 .s40-lead p {
  margin: 0 0 2.4em;
  color: #000;
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: 0.08em;
}

/* 最後の本文段落と ▼ の間隔はデザイン値で個別に取る */
.senior40 .s40-lead > p:nth-last-of-type(2) {
  margin-bottom: 0;
}

.senior40 .s40-lead p.s40-lead-arrow {
  margin: 53px 0 0;
  text-align: center;
}

.senior40 .s40-lead-arrow img {
  width: 14px;
  height: 10px;
  margin: 0 auto;
  transform: rotate(180deg); /* 素材は上向き三角なので反転させる */
}

/* 手書きのマーカー線。折り返しても行ごとに線が付くよう box-decoration-break を使う。
   波線の位置は padding-bottom で下げる。background-position を 100% 超にすると
   background-clip の外側になって切れてしまうため。
   インライン要素の縦paddingは行の高さに影響しないのでレイアウトは動かない */
.senior40 .s40-marker {
  padding-bottom: 0.34em;
  background-image: url(../img/senior40/marker-1.svg);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto; /* 等倍でタイル。幅に合わせて伸縮させると波の細かさが変わってしまう */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* ===================================================================
 * 調査レポート
 * =================================================================== */

/* 幅はコンテンツ領域いっぱい（左右30px空け）。デザイン基準幅ではコンテンツ1000px -
   左右30px = 940px になり従来と同じ見え方で、広い画面では背景写真が画面幅に追従する。
   下マージンは左右と同じ30px。フッターとの間はさらに #content の margin-bottom 2px があく */
.senior40 .s40-report {
  margin: 63px 30px 30px;
  scroll-margin-top: 20px;
}

/* 背景写真は最大幅(1320x790)で切り出し済み。コンテンツ領域は1600pxで頭打ちになるため
   実際の最大は1322pxで、cover による拡大は起きない（切り取りは0.3%）。位置は中央でよい */
.senior40 .s40-report-visual {
  position: relative;
  padding: 59px 0 21px;
  background-image: url(../img/senior40/report-bg.jpg);
  background-image: -webkit-image-set(url(../img/senior40/report-bg.jpg) 1x, url(../img/senior40/report-bg@2x.jpg) 2x);
  background-image: image-set(url(../img/senior40/report-bg.jpg) 1x, url(../img/senior40/report-bg@2x.jpg) 2x);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 下部の暗がり（PDFボタン・注釈の可読性確保） */
.senior40 .s40-report-visual::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  /* Figma node 214:3308（Rectangle 1050）の実測に合わせた濃度カーブ。
     デザインは下にいくほど加速して濃くなる非線形で、下端は不透明度0.44。
     Figma側は上端がいきなり0.09で始まるが、そのまま書くと境目に線が出るため
     0から立ち上げ、濃度が乗り始める34%以降でデザインの値に合わせている */
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 34%,
    rgba(0, 0, 0, 0.17) 50%,
    rgba(0, 0, 0, 0.25) 67%,
    rgba(0, 0, 0, 0.34) 83%,
    rgba(0, 0, 0, 0.44) 100%);
  pointer-events: none;
}

.senior40 .s40-report-inner {
  position: relative;
  z-index: 1;
  font-family: var(--s40-font-w6);
  font-feature-settings: "palt" 1;
}

.senior40 .s40-report-title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: normal;
  line-height: 2.4;
  letter-spacing: 1.32px;
  text-align: center;
}

/* 見出し直下に入る、デジタルブック提供の注記 */
.senior40 .s40-report-note {
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.65px;
  text-align: center;
}

.senior40 .s40-report-cover {
  margin: 45px 0 0;
  text-align: center;
}

.senior40 .s40-report-cover img {
  display: inline-block;
  vertical-align: top; /* inline-block のベースライン下の余白を出さない（背景の切り出しと高さを揃える） */
  width: 637px;
  max-width: calc(100% - 48px);
  height: auto;
}

.senior40 .s40-report-dl {
  margin: 70px 0 0;
  text-align: center;
}

.senior40 .s40-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-sizing: border-box;
  width: 390px;
  max-width: calc(100% - 48px);
  height: 83px;
  border-radius: 100px;
  background: linear-gradient(172.4deg, #ffcc4a 9.63%, #ff8e00 42.31%, #ff5500 86.87%);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16), 0 5px 15px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 25px;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.senior40 .s40-dl-btn:hover {
  opacity: 0.85;
}

.senior40 .s40-dl-btn img {
  width: 16px;
  height: 20px;
}

.senior40 .s40-report-notes {
  width: 584px;
  max-width: calc(100% - 48px);
  margin: 23px auto 0;
  padding: 0;
  list-style: none;
  color: #fff;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.5px;
}

.senior40 .s40-report-notes li {
  padding-left: 1em;
  text-indent: -1em;
}

.senior40 .s40-report-notes li::before {
  content: "●";
}

.senior40 .s40-note-source {
  margin-left: 0.5em;
}

/* 誌面サムネイルのマーキー */
.senior40 .s40-thumbs {
  overflow: hidden;
}

.senior40 .s40-thumbs-track {
  --s40-period: 2440px; /* サムネイル10枚分 = 244 * 10 */
  display: flex;
  width: max-content;
  animation: s40-marquee 45s linear infinite;
}

.senior40 .s40-thumbs-track img {
  flex: none;
  width: 244px;
  height: 137px;
  object-fit: cover;
}


/* ===================================================================
 * SP（テーマの +sp ブレークポイントに合わせる）
 * =================================================================== */

@media only screen and (max-width: 800px) {

  #content.senior40 {
    /* SP: デザイン基準幅375px。広い端末では 1.15 倍で頭打ちにする */
    --s40-u: min(1.15px, calc(100vw / 375));
  }

  /* --- KV --- */

  .senior40 .s40-kv {
    padding-top: calc(42 * var(--s40-u));
  }

  .senior40 .s40-kv-track {
    --s40-period: calc(724 * var(--s40-u)); /* (135 + 46) * 4 */
    gap: calc(46 * var(--s40-u));
    animation-duration: 32s;
  }

  .senior40 .s40-kv-item {
    width: calc(135 * var(--s40-u));
    height: calc(145 * var(--s40-u));
  }

  .senior40 .s40-kv-item:nth-child(4n+2) { margin-top: calc(52 * var(--s40-u)); }
  .senior40 .s40-kv-item:nth-child(4n+4) { margin-top: calc(33 * var(--s40-u)); }

  /* 丸ボタンだけは画面の右端を基準にしたいので、このレイヤーは画面幅いっぱいに広げ、
     手書きタイトルは375px基準の箱（旧レイヤーと同寸）に入れ直して配置を保つ。
     タイトル画像の left / top はデザイン基準のまま変更していない */
  .senior40 .s40-kv-inner {
    width: 100%;
  }

  .senior40 .s40-kv-title {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(375 * var(--s40-u));
    height: 100%;
    transform: translateX(-50%);
  }

  .senior40 .s40-kv-title-lead {
    left: calc(14 * var(--s40-u));
    top: calc(12 * var(--s40-u));
    width: calc(210 * var(--s40-u));
  }

  .senior40 .s40-kv-title-main {
    left: calc(52 * var(--s40-u));
    top: calc(69 * var(--s40-u));
    width: calc(305 * var(--s40-u));
  }

  /* 画面端から24px（リード文の左右マージンと同値）まで右に寄せる。ただし375pxデザインの
     位置（画面中央基準）より左には寄せない。狭い画面では 375px 基準の位置が右に来るため、
     min() で小さいほう＝より右にある位置を採る:
       375px       → 中央基準が15px なので 15px（SPデザインのまま）
       約445px以上 → 24px で固定
     間は連続的に移り変わるので、切り替わりでの飛びはない */
  .senior40 .s40-cta {
    right: min(24px, calc(50% - 187.5 * var(--s40-u) + 15 * var(--s40-u)));
    top: calc(183 * var(--s40-u));
    width: calc(90 * var(--s40-u));
    height: calc(90 * var(--s40-u));
    padding-top: calc(18 * var(--s40-u));
  }

  .senior40 .s40-cta-icon {
    width: calc(10 * var(--s40-u));
    height: calc(12 * var(--s40-u));
  }

  .senior40 .s40-cta-label {
    margin-top: calc(7 * var(--s40-u));
    font-size: calc(13 * var(--s40-u));
  }

  .senior40 .s40-cta-sub {
    font-size: calc(11 * var(--s40-u));
  }

  /* --- リード文 --- */

  .senior40 .s40-lead {
    width: auto;
    max-width: none;
    margin: 0 24px;
    padding-top: 41px;
  }

  .senior40 .s40-lead p {
    font-size: 14px; /* letter-spacing はPCと同じ 0.08em を継承する */
  }

  .senior40 .s40-lead p.s40-lead-arrow {
    margin-top: 28px;
  }

  /* --- 調査レポート --- */

  .senior40 .s40-report {
    max-width: none;
    margin: 30px 11px 10px;
    scroll-margin-top: 113px; /* SPはヘッダーが固定（103px）のため */
  }

  .senior40 .s40-report-visual {
    padding: 28px 0 19px;
  }

  .senior40 .s40-report-visual::after {
    height: 45%;
  }

  .senior40 .s40-report-title {
    font-size: 18px;
    letter-spacing: 1.08px;
  }

  .senior40 .s40-report-note {
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.55px;
  }

  /* SPはデザインどおり「は、」のあとで改行する */
  .senior40 .s40-report-note-break {
    display: block;
  }

  .senior40 .s40-report-cover {
    margin-top: 27px;
  }

  .senior40 .s40-report-cover img {
    width: 77.3%;
    max-width: none;
  }

  .senior40 .s40-report-dl {
    margin-top: 24px;
  }

  .senior40 .s40-dl-btn {
    gap: 10px;
    width: 85.2%;
    max-width: none;
    height: 64px;
    font-size: 19px;
    letter-spacing: 1.14px;
  }

  .senior40 .s40-dl-btn img {
    width: 12px;
    height: 15px;
  }

  /* デザイン上の実測値は9pxだが、その値で書くと実機で読めないほど小さい指定に見えるため、
     10pxで書いて transform: scale(0.9) で見た目を9px相当に落としている。
     transform はレイアウトボックスを縮めないので、見た目がデザインと一致するよう
     幅と下マージンを割り戻している:
       幅       85.8% ÷ 0.9 = 95.33%  → 縮小後に 85.8%
       字送り   0.5px × 0.9 = 0.45px
       下余白   4行 × 10px × 1.7 × 0.1 = 6.8px ぶん浮くので margin-bottom で相殺

     width は fit-content。ブロックを最長行の幅に詰めて margin auto で中央に置くことで、
     文字組は左寄せのまま、注釈全体が中央に来る（text-align: center にすると行ごとに
     中央揃いになってしまい、デザインと変わる）。
     max-width は行が折り返す狭い幅での上限で、そこでは従来どおり 85.8% 幅になる。 */
  .senior40 .s40-report-notes {
    width: fit-content;
    max-width: 95.33%;
    margin: 19px auto -6.8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    transform: scale(0.9);
    transform-origin: 50% 0;
  }

  .senior40 .s40-note-source {
    display: block;
    margin-left: 0;
    padding-left: 1em;
  }

  .senior40 .s40-thumbs-track {
    --s40-period: 2050px; /* 205 * 10 */
    animation-duration: 38s;
  }

  .senior40 .s40-thumbs-track img {
    width: 205px;
    height: 115px;
  }
}


/* ===================================================================
 * スクロール
 * =================================================================== */

/* FVの丸ボタンからレポートセクションへのアンカーをスムーズスクロールにする。
   このCSSはsenior40ページでしか読み込まれないので他ページには影響しない。
   scroll-behavior はルート要素の値がビューポートに伝播する仕様のため、
   body（.senior40）ではなく html に指定する必要がある */
html {
  scroll-behavior: smooth;
}


/* ===================================================================
 * アニメーション抑制設定への配慮
 * =================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .senior40 .s40-kv-track,
  .senior40 .s40-thumbs-track {
    animation: none;
  }
}