/* ===============================
   base
=============================== */
:root {
  --offset: 30px; /* サイト共通の左右余白。ブレークポイントごとに下で上書き */
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", "YuGothic", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
  color: #333;
  letter-spacing: 0.5px; /* サイト全体の文字間隔の基本値（個別に指定がある場所はそちらが優先） */
}
a {
  text-decoration: none;
  color: inherit;
}

/* ===============================
   header（共通ヘッダー）
=============================== */
.l-header {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: sticky; /* スクロールしても画面の上に付いてくる（ハンバーガーの中身の基準にもなる） */
  top: 0;
  z-index: 100;
}

.l-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.6rem var(--offset) calc(1.6rem - 1px);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* キャプション文字をロゴの上にグレーで配置 */
.l-header__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px; /* キャプション文字とロゴの上下の間隔 */
  flex-shrink: 0;
}

/* キャプション文字＋ロゴ画像をまとめるラッパー（h1はヒーロー側の見出しに譲るのでpタグ）
   display:contentsでボックスを消し、.l-header__logoのflexレイアウトをそのまま維持 */
.l-header__logo-group {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  display: contents;
}

.l-header__logo-text {
  font-size: 11px;
  font-weight: 500;
  color: #848484;
  line-height: 1.4;
  white-space: nowrap;
}

.l-header__logo-img {
  /* header_logo.svg は横長の文字ロゴ（253.34×19.24）なので高さ基準で縮小
     PC・タブレット（481px以上）は24px。480px以下で20px */
  height: 24px;
  width: auto;
  display: block;
}

/* ナビまわり（サブリンク + メインナビ）をまとめて右寄せ */
.l-header__nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px; /* サブリンクとメインナビの上下の間隔 */
  margin-left: auto;
  flex-shrink: 0;
}

/* サブリンク（お役立ち資料/よくあるご質問） メインナビの上に配置 */
.l-header__sublinks {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-header__sublink {
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #3C4043;
  line-height: 1.4;
  white-space: nowrap;
}

.l-header__sublink:hover {
  opacity: 0.7;
}

/* ナビリンク（ホーム/冊子版/Web版/コンテンツ/導入事例/料金） */
.l-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.l-header__nav-link {
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #3C4043;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.l-header__nav-link:hover {
  border-bottom-color: #FDBC40;
}

.l-header__nav-link.is-active {
  border-bottom-color: #FDBC40;
}

/* お役立ち資料・よくあるご質問：PCでは右上のsublinksにあるので、ハンバーガーメニュー内（1199px以下）だけ表示 */
.l-header__nav-link--sp {
  display: none;
}

/* CTAボタン（右側） 各100×70 / 枠線1px #C4C4C4 / 角丸15px */
.l-header__cta {
  display: flex;
  align-items: center;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-header__cta-link {
  width: 100px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #C4C4C4;
  border-radius: 15px;
  transition: border-color 0.2s, background 0.2s;
}

.l-header__cta-link:hover {
  border-color: #333;
  background: #FAFAFA;
}

.l-header__cta-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.l-header__cta-icon svg,
.l-header__cta-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* header_icon_01〜03は縦横比が異なるため、歪まず収まるように */
  display: block;
}

.l-header__cta-text {
  font-size: 11px;
  line-height: 1.2;
  color: #333;
  text-align: center;
}

/* 右上CTA3つの色（ハンバーガーメニュー内のCTAは対象外）
   --cta-color に各ボタンの背景色を入れ、文字・アイコンは白 */
.l-header__cta--desktop .l-header__cta-item:nth-child(1) { --cta-color: #14B4A0; } /* 資料ダウンロード */
.l-header__cta--desktop .l-header__cta-item:nth-child(2) { --cta-color: #E9455A; } /* 無料サンプル */
.l-header__cta--desktop .l-header__cta-item:nth-child(3) { --cta-color: #149CD3; } /* お問い合わせ */

.l-header__cta--desktop .l-header__cta-link,
.l-header__cta--desktop .l-header__cta-link:hover {
  background: var(--cta-color);
  border-color: var(--cta-color);
}

.l-header__cta--desktop .l-header__cta-link {
  transition: transform 0.2s, box-shadow 0.2s;
}

.l-header__cta--desktop .l-header__cta-link:hover {
  transform: translateY(-4px); /* オンマウスで少し浮く（フッターのCTAと同じ動き） */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.l-header__cta--desktop .l-header__cta-icon-img {
  filter: brightness(0) invert(1); /* アイコンを白に */
}

.l-header__cta--desktop .l-header__cta-text {
  color: #FFFFFF;
  font-weight: 700;
}

/* CTAの表示切り替え：1200px以上は--desktop、1200px未満はnav内の--mobileを表示 */
.l-header__cta--mobile {
  display: none;
}

/* ハンバーガーボタン（PCでは非表示） */
.l-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.l-header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #3C4043;
  transition: transform 0.2s, opacity 0.2s;
}
.l-header__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.l-header__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.l-header__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===============================
   レスポンシブ
   ブレークポイント（サイト共通の基本4つ）:
     1199px … ヘッダーを少しコンパクトにして1行のまま収める（ロゴ20px・CTAを小さく・ナビの間隔は30px→20pxへ滑らかに縮む）／サイト全体の左右余白を20pxに
     820px  … タブレット中間段。現行iPad/iPad Air(820px)の縦幅に合わせた区切り
     640px  … スマホ向けレイアウトに切替
     480px  … 小さいスマホ向けにさらにコンパクトに
   補助（ヘッダー・CTA関連だけ）:
     1014px … ナビ（サブリンク含む）をハンバーガーに切替（小さいノートPC・iPad横までは通常のナビを表示）
     750px  … ヘッダー右上のCTA3つを非表示（CTA自体はメニュー内から利用可能）／フッターCTAカードの最低高さを80pxに
   ※ロゴ＋サブリンク＋ナビ6項目＋CTA3つを1行で収めるには、通常サイズで実測で約1200px必要。
     1015〜1199pxはコンパクト版（約1000px〜）に詰めて収めている
=============================== */

/* 1200px未満：ヘッダーをコンパクトにして1行に収める（ナビはまだ横並びのまま） */
@media (max-width: 1199px) {
  :root {
    --offset: 20px; /* ヘッダーだけでなくフッター等サイト全体に効かせる */
  }
  .l-header__inner {
    gap: 12px;
  }
  .l-header__logo-img {
    height: 20px;
  }
  .l-header__nav {
    gap: clamp(20px, calc(20vw - 183px), 30px); /* 1065px以上は30px、1015pxまで滑らかに20pxへ縮む（ブレークポイントを増やさないため） */
  }
  .l-header__cta--desktop {
    gap: 10px;
  }
  .l-header__cta--desktop .l-header__cta-link {
    width: 84px;
    height: 60px;
  }
}

/* 1015px未満：ナビ＆サブリンクをハンバーガーに格納（ハンバーガーの横にCTA3つも常設表示） */
@media (max-width: 1014px) {
  .l-header__logo-img {
    height: 24px;
  }
  .l-header__sublinks {
    display: none; /* サブリンクはスペースの都合で非表示 → ハンバーガー内の.l-header__nav-link--spで表示 */
  }
  .l-header__nav .l-header__nav-link--sp {
    display: block;
    font-size: 14px; /* 料金までのメインメニュー(16px)より少し小さくして差別化 */
  }
  .l-header__burger {
    display: flex;
    order: 2; /* ハンバーガーは一番右端。CTAはその左隣（order:1） */
  }
  .l-header__cta--desktop {
    order: 1;
  }

  /* ナビは普段は非表示。ハンバーガー展開時だけドロップダウンで表示（CTAもこの中に含む） */
  .l-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 20px 16px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .l-header__nav.is-open {
    display: flex;
  }
  .l-header__nav-link {
    width: 100%;
    font-size: 16px;
    letter-spacing: normal;
    padding: 12px 0;
    border-bottom: 1px solid #EEE;
  }
  .l-header__nav-link.is-active {
    border-bottom: 1px solid #EEE;
    border-left: 3px solid #FDBC40;
    padding-left: 10px;
  }
  .l-header__nav-link:hover {
    border-bottom-color: #EEE; /* メニュー内ではオンマウスの黄色い線・文字のずれはなし */
  }

  /* ドロップダウン内のCTA：PC版ヘッダーと同じ色（緑・赤・青）の横長ボタンとして縦に並べる
     ※align-items:stretchで上書き（素のまま継承すると.l-header__cta基本スタイルのalign-items:centerが効いて
       各行が中央寄せ・幅ハグになってしまうため） */
  .l-header__cta--mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
    margin-top: 12px;
  }
  .l-header__cta--mobile .l-header__cta-item:nth-child(1) { --cta-color: #14B4A0; } /* 資料ダウンロード */
  .l-header__cta--mobile .l-header__cta-item:nth-child(2) { --cta-color: #E9455A; } /* 無料サンプル */
  .l-header__cta--mobile .l-header__cta-item:nth-child(3) { --cta-color: #149CD3; } /* お問い合わせ */
  .l-header__cta--mobile .l-header__cta-link,
  .l-header__cta--mobile .l-header__cta-link:hover {
    background: var(--cta-color);
  }
  .l-header__cta--mobile .l-header__cta-link {
    width: 100%;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
  }
  .l-header__cta--mobile .l-header__cta-icon-img {
    filter: brightness(0) invert(1); /* アイコンを白に */
  }
  .l-header__cta--mobile .l-header__cta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .l-header__cta--mobile .l-header__cta-text {
    font-size: 14px;
    text-align: left;
    color: #FFFFFF;
  }
}

/* 750px以下：ロゴ＋ハンバーガー＋CTA3つが窮屈になるので、右上のCTAの常設表示はここで引っ込める
   （CTA自体はハンバーガーメニューを開けば.l-header__cta--mobileから変わらず使える）
   ※基本4つ（1199/820/640/480px）とは別の補助ブレークポイント。フッターのCTAカードの高さ切替(750px)と同じ幅 */
@media (max-width: 750px) {
  .l-header__cta--desktop {
    display: none;
  }
}

/* 480px以下：スマホ向けに余白・ロゴをコンパクトに（キャプション文字は残す。CTAはメニュー内にあるのでここでの調整は不要） */
@media (max-width: 480px) {
  :root {
    --offset: 16px; /* SP表示時の左右余白 */
  }
  .l-header__inner {
    gap: 8px;
  }
  .l-header__logo-img {
    height: 20px;
  }
}

/* ===============================
   footer（共通フッター）
=============================== */

.l-footer {
  width: 100%;
  background: #FFFFFF;
}

.l-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  padding-bottom: 50px;
}

.l-footer__cta-bg {
  width: 100%;
  background: #F1F3F4;
  border-top: 1px solid #DADCE0; /* コンテンツ（同じグレーの帯など）との境目用。うっすら */
  border-bottom: 1px solid #DADCE0;
  display: flex;
  justify-content: center;
  padding: 48px var(--offset);
}

.l-footer__cta {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-footer__cta-item {
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
}

/* CTA3つの背景色（--cta-color）。文字・アイコンは白 */
.l-footer__cta-item:nth-child(1) { --cta-color: #14B4A0; } /* 資料ダウンロード */
.l-footer__cta-item:nth-child(2) { --cta-color: #E9455A; } /* 無料サンプル */
.l-footer__cta-item:nth-child(3) { --cta-color: #149CD3; } /* お問い合わせ */

.l-footer__cta-link {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 100%;
  min-height: 100px;
  padding: 0 30px;
  background: var(--cta-color);
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.l-footer__cta-link:hover {
  transform: translateY(-4px); /* オンマウスで少し浮く */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.l-footer__cta-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.l-footer__cta-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1); /* アイコンを白に */
}

.l-footer__cta-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.l-footer__cta-title {
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
}

.l-footer__cta-desc {
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.3;
}

/* バナー2つ（画像リンク。元画像は800×240＝400×120の2倍サイズ） */
.l-footer__banners {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--offset);
  display: flex;
  flex-wrap: nowrap; /* 幅が足りなくても縦積みにせず、常に横2つを維持する */
  justify-content: center;
  gap: 50px;
  box-sizing: border-box;
}

/* 固定400pxが入りきらなくなったら%で可変。横2つ並びはスマホでも維持する */
.l-footer__banner-item {
  flex: 1 1 400px;
  width: auto;
  min-width: 120px;
  max-width: 400px;
  display: block;
  box-sizing: border-box;
  transition: opacity 0.2s;
}

.l-footer__banner-item:hover {
  opacity: 0.8; /* オンマウスで少し薄く */
}

.l-footer__banner-img {
  display: block;
  width: 100%;
  height: auto; /* 幅に合わせて縦横比を保ったまま縮む */
}

/* ③ フッター本体（ロゴ/会社情報/リンク/コピーライト） */
.l-footer__bottom {
  width: 100%;
  border-top: 1px solid #BABCBE;
  display: flex;
  justify-content: center;
  padding: 50px var(--offset);
  box-sizing: border-box;
  background: #4D4D4D;
}

.l-footer__bottom-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.l-footer__brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.l-footer__brand-logo {
  width: 76px;
  height: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(0.88); /* ロゴを #E0E0E0 に */
}

.l-footer__brand-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.l-footer__brand-name {
  margin: 0;
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #E0E0E0;
  line-height: 1.4;
}

.l-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.l-footer__links-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  row-gap: 8px;
}

.l-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #E0E0E0;
  line-height: 1.4;
}

.l-footer__link:hover {
  opacity: 0.7;
}

.l-footer__link-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
  filter: brightness(0) invert(0.88); /* 外部リンクアイコンを #E0E0E0 に */
}

.l-footer__link-divider {
  width: 1px;
  height: 10px;
  background: #C4C4C4;
  flex-shrink: 0;
}

.l-footer__copyright {
  width: 100%;
  margin: 0;
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #E0E0E0;
  line-height: 1.4;
  text-align: right;
}

/* ===============================
   footer レスポンシブ
   ※基本4つ(1199px/820px/640px/480px)はヘッダーと共通。CTA関連の補助として750pxも使用
=============================== */

/* 1200px未満：固定320pxのままだと1080px付近で3枚が収まりきらず早期に折り返ってしまうため、
   %で可変に切り替え。220px〜320pxの範囲で縮み、それより狭くなったら
   (.l-footer__cta側のflex-wrapで)自然に折り返す */
@media (max-width: 1199px) {
  .l-footer__cta-bg {
    padding: 50px var(--offset);
  }
  .l-footer__top {
    gap: 50px;
    padding-bottom: 40px;
  }
  .l-footer__cta-item {
    flex: 1 1 220px;
    width: auto;
    min-width: 220px;
    max-width: 320px;
  }
  .l-footer__cta-link {
    padding: 0 16px;
  }
  .l-footer__cta-title {
    font-size: 16px;
  }
  .l-footer__cta-desc {
    font-size: 11px;
  }
  /* バナーは1199px以下でも最大400px。間の空き(gap)は24pxに詰める */
  .l-footer__banner-item {
    max-width: 400px;
  }
  .l-footer__banners {
    gap: 24px;
  }
}

/* 820px未満：カード間のgapを詰めて、3枚並びをもう少し粘らせる */
@media (max-width: 820px) {
  .l-footer__cta {
    gap: 12px;
  }
  .l-footer__banners {
    gap: 16px;
  }
}

/* 750px以下：3つ並びが折り返し始める幅（ブラウザのスクロールバー分を含めて約740〜750px）。
   カードの最低高さを100px→80pxに（ヘッダー右上のCTAを隠す幅と同じ750px） */
@media (max-width: 750px) {
  .l-footer__cta-link {
    min-height: 80px;
  }
}

@media (max-width: 640px) {
  /* スマホ：資料請求・無料サンプルを横2つ並び、お問い合わせはその下に2つ分の幅でフル表示 */
  .l-footer__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .l-footer__cta-item {
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .l-footer__cta-item:nth-child(3) {
    grid-column: 1 / -1;
  }
  .l-footer__cta-link {
    padding: 0 16px;
  }
  .l-footer__banners {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .l-footer__cta-bg {
    padding: 32px var(--offset);
  }
  .l-footer__banners {
    gap: 10px;
  }
  /* 2列のカード内で「無料サンプル」が1行に収まるよう、画面幅に応じて16px→最小11pxまで連続で縮める */
  .l-footer__cta-title {
    font-size: clamp(11px, 3.2vw, 16px);
  }
  .l-footer__bottom {
    padding: 36px var(--offset);
  }
  .l-footer__brand-logo {
    width: 56px;
  }
  .l-footer__brand-name {
    font-size: 14px;
  }
  .l-footer__copyright {
    font-size: 11px;
  }
}


/* ============================================================
   ここから下はトップページ（index.html）の中身
   クラス名は p-top-xxx
============================================================ */

/* ===============================
   1. メインビジュアル
   ※写真は画面の端から「中央±256px」までを埋める（1512px幅でちょうど500pxになる）
   ※1280px以上はこの形のまま。1279px以下は下のほうの2つのブロック（比率を保って縮める／スマホはアーチ）
=============================== */
.p-top-mv {
  --mv-half: 256px; /* 画面中央から写真の内側の端までの距離 */
  position: relative;
  height: 680px;
  overflow: hidden;
  background: #FFFFFF;
}

/* 中央の白い楕円 */
.p-top-mv::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 662px;
  height: 1104px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #FFFFFF;
  z-index: 1;
}

.p-top-mv__photo {
  position: absolute;
  top: 0;
  width: calc(50% - var(--mv-half));
  height: 100%;
  object-fit: cover;
  display: block;
}
/* object-position：幅が狭くなって写真が左右で切れるとき、人物の顔が残る位置に寄せる */
.p-top-mv__photo--left {
  left: 0;
  object-position: 68% center;
}
.p-top-mv__photo--right {
  right: 0;
  object-position: 55% center;
}

.p-top-mv__body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 0 var(--offset);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #3C4043;
}

.p-top-mv__heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: inherit;
  font-weight: inherit;
}

.p-top-mv__lead {
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
}

.p-top-mv__logo {
  width: 445px;
  max-width: 100%;
  height: auto;
  margin-top: 30px;
  display: block;
}

/* 「 」付きのキャッチコピー。カギカッコは線で描画（#C4C4C4） */
.p-top-mv__catch {
  position: relative;
  width: 408px;
  margin: 38px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
}
.p-top-mv__catch::before,
.p-top-mv__catch::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 60px;
  border: 0 solid #C4C4C4;
}
.p-top-mv__catch::before {
  top: -5px;
  left: -17px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.p-top-mv__catch::after {
  bottom: 4px;
  right: -17px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.p-top-mv__buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.p-top-mv__button {
  width: 210px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #BABCBE;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.p-top-mv__button:hover {
  opacity: 0.8;
}
/* 色とマウスを乗せたときの動きは、ヘッダー右上のCTAと同じ（資料ダウンロード #14B4A0 ／ 無料サンプル #E9455A） */
.p-top-mv__button--download { background: #14B4A0; }
.p-top-mv__button--sample   { background: #E9455A; }
.p-top-mv__button--download,
.p-top-mv__button--sample {
  transition: transform 0.2s, box-shadow 0.2s;
}
.p-top-mv__button--download:hover,
.p-top-mv__button--sample:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* <picture> は箱を作らず、中の <img> をそのまま並べる */
.p-top-mv__logo-wrap {
  display: contents;
}

/* ----------------------------------------------------------------
   641〜1279px（タブレット・小さめのPC）
   1280px以上の見た目を、画面幅に合わせてそのまま縮める（1枚の画像のように比率を保つ）
   --u は「1512px幅のときの1px」にあたる長さ。数字はすべて1280px以上のときのpx値
---------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1279px) {
  .p-top-mv {
    --u: calc(100vw / 1512);
    --mv-half: calc(256 * var(--u));
    height: calc(680 * var(--u));
  }
  .p-top-mv::before {
    width: calc(662 * var(--u));
    height: calc(1104 * var(--u));
  }
  .p-top-mv__lead {
    font-size: calc(34 * var(--u));
    line-height: 1.21;
  }
  .p-top-mv__logo {
    width: calc(445 * var(--u));
    margin-top: calc(30 * var(--u));
  }
  .p-top-mv__catch {
    width: calc(408 * var(--u));
    margin-top: calc(38 * var(--u));
    font-size: max(calc(28 * var(--u)), 12px);
    line-height: 1.22;
  }
  .p-top-mv__catch::before,
  .p-top-mv__catch::after {
    width: calc(28 * var(--u));
    height: calc(60 * var(--u));
  }
  .p-top-mv__catch::before {
    top: calc(-5 * var(--u));
    left: calc(-17 * var(--u));
  }
  .p-top-mv__catch::after {
    bottom: calc(4 * var(--u));
    right: calc(-17 * var(--u));
  }
  .p-top-mv__buttons {
    gap: calc(30 * var(--u));
    margin-top: calc(40 * var(--u));
  }
  /* ボタンだけは押しやすさのため、小さくなりすぎないよう下限を付けている */
  .p-top-mv__button {
    width: max(calc(210 * var(--u)), 128px);
    height: max(calc(60 * var(--u)), 38px);
    font-size: max(calc(22 * var(--u)), 13px);
  }
}

/* ----------------------------------------------------------------
   640px以下（スマホ）：アーチ
   上に写真2枚を並べ、白い大きな円の上端（アーチ）を写真に重ねる。文字とボタンはアーチの中
   大きさは vw（画面幅の何%か）で指定しているので、どのスマホでも同じバランスに見える
---------------------------------------------------------------- */
@media (max-width: 640px) {
  .p-top-mv {
    height: auto;
  }
  /* 白い円：直径は画面幅の170%。上端が写真の下のほうに重なってアーチになる */
  .p-top-mv::before {
    top: 46vw;
    width: 170vw;
    height: 170vw;
    transform: translateX(-50%);
  }
  /* 写真：天井が写る上のほうを少し切り、冊子やスマホを持つ手元まで見せる（下端に合わせて表示） */
  .p-top-mv__photo {
    width: 50%;
    height: 62vw;
    object-position: center bottom;
  }
  .p-top-mv__body {
    height: auto;
    padding: 53vw var(--offset) 4vw; /* 下は、すぐ下の注記（.p-top-mv-note）とのすき間 */
  }
  .p-top-mv__lead {
    font-size: 3.8vw;
    line-height: 1.35;
  }
  .p-top-mv__logo {
    width: 52vw;
    margin-top: 2.5vw;
  }
  /* キャッチは2行、カギカッコなし */
  .p-top-mv__br-pc {
    display: none;
  }
  .p-top-mv__catch {
    width: auto;
    margin-top: 3vw;
    font-size: 3.2vw;
    line-height: 1.5;
    white-space: nowrap;
  }
  .p-top-mv__catch::before,
  .p-top-mv__catch::after {
    display: none;
  }
  /* ボタンは横に2個 */
  .p-top-mv__buttons {
    width: 100%;
    gap: 3vw;
    margin-top: 5vw;
  }
  .p-top-mv__buttons li {
    flex: 1;
  }
  .p-top-mv__button {
    width: 100%;
    height: 10.5vw;
    border-radius: 999px;
    font-size: 3.6vw;
  }
}

/* キービジュアルの注記（「5700社以上に選ばれた」の根拠）。.p-top-mv の中のいちばん最後に置いている
   641px以上：キービジュアル右下（右の写真の上）に重ねる
     ・横幅は「写真が見えている幅」まで（中央の白い楕円やボタンには重ならない）。
       画面が狭くなると、その幅の中で右寄せのまま2行・3行と自然に折り返す（急に場所が変わることはない）
     ・--mv-white は、キービジュアルの下の端で、中央から白い楕円の端までの距離
   640px以下：ボタンの下に中央寄せ */
.p-top-mv {
  --mv-white: 261px;
}
.p-top-mv-note {
  position: absolute;
  right: 14px;
  bottom: 8px;
  z-index: 3;
  max-width: calc(50% - var(--mv-white) - 24px);
  margin: 0;
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: clamp(10px, 0.92vw, 11px);
  line-height: 1.5;
  color: #3C4043;
  text-align: right;
  /* 白いにじみ：机の上の物（パソコンなど）に重なっても読めるよう、文字のまわりだけ白くぼかしている */
  text-shadow: 0 0 2px #FFFFFF, 0 0 4px #FFFFFF, 0 0 6px #FFFFFF, 0 0 8px #FFFFFF;
  pointer-events: none;
}
/* 641〜1279px：キービジュアルごと縮むので、白い楕円の幅も同じ比率で縮める。
   狭い幅ではボタンが楕円より外に出るので、赤いボタンの右端にも重ならない幅にしている */
@media (min-width: 641px) and (max-width: 1279px) {
  .p-top-mv {
    --mv-white: calc(261 * var(--u));
  }
  .p-top-mv-note {
    max-width: min(calc(50% - var(--mv-white) - 24px), calc(50% - 15 * var(--u) - max(210 * var(--u), 128px) - 28px));
  }
}
/* 1720px以上（大きなモニター）：写真の見える範囲が変わり、注記の後ろが白い机ではなく黒い上着になる。
   そのため文字を白にして、まわりを黒くぼかしている（この注記のためだけの区切り） */
@media (min-width: 1720px) {
  .p-top-mv-note {
    color: #FFFFFF;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
  }
}
@media (max-width: 640px) {
  .p-top-mv-note {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 2;
    max-width: none;
    padding: 0 var(--offset) 5vw;
    font-size: 10px;
    color: #606368;
    text-align: center;
    text-shadow: none;
  }
}

/* ===============================
   2. 導入企業ロゴ帯
   ロゴの大きさ・間隔・速さは jinzai.diamond.co.jp の導入企業ロゴに合わせている
     PC: ロゴ枠177×56 / 間隔24px / 秒速 約40px
     SP: ロゴ枠136×43 / 間隔8px  / 秒速 約29px
=============================== */
.p-top-logos {
  --logos-count: 16;   /* 1セットのロゴの数。HTMLの数と合わせる */
  --logo-width: 177px;
  --logo-height: 56px;
  --logo-gap: 24px;
  --logo-speed: 40.2;  /* 1秒に流れるpx数 */
  background: #FFFFFF;
  padding: 15px 0;
  overflow: hidden;
}
/* HTMLの <section> に hidden が付いている間は、帯ごと表示しない（index.html のコメント参照） */
.p-top-logos[hidden] {
  display: none;
}

/* 2セット分を横一列に並べた帯。1セット分（=全体の半分）だけ左へ動かして頭に戻す */
.p-top-logos__track {
  display: flex;
  width: max-content;
  height: 99px;
  align-items: center;
  animation: p-top-logos-flow calc((177 + 24) * var(--logos-count) / var(--logo-speed) * 1s) linear infinite;
}

.p-top-logos__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* 間隔はgapではなく右マージンで取る（セットの継ぎ目でも同じ間隔になるように） */
.p-top-logos__item {
  width: var(--logo-width);
  height: var(--logo-height);
  margin-right: var(--logo-gap);
  flex-shrink: 0;
}

.p-top-logos__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes p-top-logos-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .p-top-logos {
    --logo-width: 136px;
    --logo-height: 43px;
    --logo-gap: 8px;
    --logo-speed: 28.9;
    padding: 10px 0;
  }
  .p-top-logos__track {
    height: 70px;
    animation-duration: calc((136 + 8) * var(--logos-count) / var(--logo-speed) * 1s);
  }
}

/* 「視差効果を減らす」設定の人には流さず止めて見せる */
@media (prefers-reduced-motion: reduce) {
  .p-top-logos__track {
    animation: none;
  }
}

/* ============================================================
   トップページ 3〜8（お悩み〜導入事例）
   ※文字・余白の大きさは下層ページ（sub.css）にそろえている
     セクション上下64px / 見出し30px / 本文16px / ボタン高さ48px・16px
   ※中身の幅は1000px＋左右 var(--offset)
============================================================ */

/* ===============================
   トップページ共通：文字・見出し・ボタン・幅
=============================== */
.p-top {
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #3C4043;
}

/* セクション見出し（下層ページの .c-heading と同じ大きさ） */
.p-top-heading {
  margin: 0 0 40px;
  font-family: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #3C4043;
  text-align: center;
}

/* 見出しなどで、変な位置で折り返さないようにひとかたまりにする */
.p-top-nowrap {
  display: inline-block;
}

/* セクションの中身の幅（トップページは1000px＋左右余白） */
.p-top-worry__inner,
.p-top-about__inner,
.p-top-type__inner,
.p-top-reason__inner,
.p-top-case__inner {
  max-width: calc(1000px + var(--offset) * 2);
  margin: 0 auto;
  padding: 0 var(--offset);
}

/* 角丸のボタン（下層ページの .c-button と同じ大きさ。色は薄いグレー #BABCBE） */
.p-top-button {
  width: 280px;
  max-width: 100%;
  min-height: 48px;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #BABCBE;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* マウスを乗せると少し浮いて影が付く（ヘッダー右上のCTA・メインビジュアルのボタンと同じ動き）／押すと元の位置に戻る */
.p-top-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.p-top-button:active {
  transform: translateY(0);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .p-top-button {
    transition: none;
  }
  .p-top-button:hover {
    transform: none;
  }
}
/* 濃いグレーのボタン（フッターと同じ色 #4D4D4D。下層ページの c-button--dark と同じ） */
.p-top-button--dark {
  background: #4D4D4D;
}

@media (max-width: 640px) {
  .p-top-heading {
    margin-bottom: 28px;
    font-size: 22px;
  }
}

/* ===============================
   3. お悩み
   帯 → 下向きの山形 → 「解決します」→ 下向き矢印（山形から次の見出しまでは、縦幅を詰めて短くしている）
   カードは1000pxを3等分（間隔24px）
=============================== */
.p-top-worry {
  background: #FFFFFF;
}
.p-top-worry__top {
  background: #F1F3F4;
  padding: 64px 0 52px;
}
.p-top-worry__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-top-worry__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 24px;
  background: #FFFFFF;
  border-radius: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.p-top-worry__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
/* イラストは大きさがまちまちなので、高さをそろえた枠の中央に置いて3枚の文章の位置をそろえる */
.p-top-worry__figure {
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-top-worry__figure img {
  display: block;
  max-width: 100%;
  height: auto;
  transform: scale(0.75);
}
.p-top-worry__text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
/* 下向きの山形（グレー）。白い背景の上に三角形を切り抜いて置いている */
.p-top-worry__edge {
  height: 40px;
  background: #F1F3F4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-top-worry__answer {
  margin: 0;
  padding: 60px var(--offset) 60px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.p-top-worry__arrow {
  display: block;
  width: 44px;
  height: 66px;
  margin: 0 auto;
}

@media (max-width: 1199px) {
  .p-top-worry__list {
    gap: 16px;
  }
  .p-top-worry__card {
    padding: 28px 16px;
  }
  .p-top-worry__title {
    font-size: clamp(15px, 1.75vw, 19px);
  }
}
/* 820px以下（タブレット縦）：横3枚のまま、すき間と文字を詰める */
@media (max-width: 820px) {
  .p-top-worry__list {
    gap: 12px;
  }
  .p-top-worry__card {
    padding: 24px 12px;
  }
  .p-top-worry__title {
    font-size: clamp(12.5px, 1.95vw, 15px);
  }
  .p-top-worry__figure {
    height: 140px;
  }
  .p-top-worry__text {
    font-size: 13px;
  }
  .p-top-worry__edge {
    height: 34px;
  }
  .p-top-worry__answer {
    padding: 40px var(--offset) 32px;
    font-size: 32px;
  }
}
/* 640px以下（スマホ）：カードは縦に1枚ずつ、幅いっぱい（左右には帯の紫が var(--offset) ぶんだけ見える）
   カードの中は、上に題名、その下に「左：イラスト／右：文章」の横並び */
@media (max-width: 640px) {
  .p-top-worry__top {
    padding: 44px 0 36px;
  }
  .p-top-worry__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .p-top-worry__card {
    display: grid;
    grid-template-columns: 104px 1fr; /* 左の列＝イラストの幅 */
    align-items: center;
    gap: 14px 16px;
    padding: 22px 18px;
  }
  .p-top-worry__title {
    grid-column: 1 / -1;
    font-size: 18px;
  }
  .p-top-worry__figure {
    height: auto;
  }
  .p-top-worry__figure img {
    width: auto;
    max-height: 96px;
    transform: none;
  }
  .p-top-worry__text {
    font-size: 14px;
  }
  .p-top-worry__edge {
    height: 28px;
  }
  .p-top-worry__answer {
    padding: 28px var(--offset) 20px;
    font-size: 22px;
  }
  .p-top-worry__arrow {
    width: 36px;
    height: 54px;
  }
}
@media (max-width: 480px) {
  .p-top-worry__card {
    grid-template-columns: 88px 1fr;
    gap: 12px 14px;
    padding: 20px 16px;
  }
  .p-top-worry__title {
    font-size: 17px;
  }
  .p-top-worry__figure img {
    max-height: 84px;
  }
  .p-top-worry__answer {
    font-size: 18px;
  }
}

/* ===============================
   4. Fresher’s Course とは？
   左に文章、右に画像（角丸24）
=============================== */
/* 上の余白だけ30px：すぐ上の「解決します」と矢印から間を空けずにつなげるため */
.p-top-about {
  background: #FFFFFF;
  padding: 30px 0 64px;
}
.p-top-about__row {
  display: flex;
  align-items: flex-start;
  gap: 45px;
}
.p-top-about__text {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}
.p-top-about__text p {
  margin: 0;
}
.p-top-about__img {
  width: 44%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px;
  flex-shrink: 0;
  display: block;
  order: 2; /* HTMLでは文章より先に書いてあるので、表示は文章のあとに回す */
}

/* 820px以下：文章の下に画像 */
@media (max-width: 820px) {
  .p-top-about__row {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .p-top-about__img {
    width: 100%;
    max-width: 560px;
  }
}
@media (max-width: 640px) {
  .p-top-about {
    padding: 28px 0 44px;
  }
  /* スマホ：写真を右上に小さく置き、文章を写真の横から下へ回り込ませる */
  .p-top-about__row {
    display: flow-root;
  }
  .p-top-about__img {
    float: right;
    width: 42%;
    max-width: none;
    margin: 6px 0 8px 16px;
    border-radius: 12px;
  }
  .p-top-about__text {
    font-size: 14px;
  }
}

/* ===============================
   5. ２つの導入形式
   グレー帯#F1F3F4 / カード2枚（1000pxを2等分）/ 下に「特別セット」の一文
=============================== */
.p-top-type {
  background: #F1F3F4;
  padding: 64px 0;
}
.p-top-type__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.p-top-type__card {
  min-width: 0; /* 幅320pxほどの小さいスマホで、中のボタンに押されてカードが画面からはみ出すのを防ぐ */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 32px 24px;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.p-top-type__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
/* 商品ごとの色分け（料金ページ price.css と同じ色・同じ付け方）
   冊子版 #9A7CB6 ／ Web版 #5FA79F
   カードの上の線・題名・ボタンを商品の色にする。色を変えるときは --c を書き換える */
.p-top-type__card--book { --c: #9A7CB6; }
.p-top-type__card--web  { --c: #5FA79F; }
.p-top-type__card--book,
.p-top-type__card--web {
  border-top: 6px solid var(--c);
}
.p-top-type__card--book .p-top-type__title,
.p-top-type__card--web .p-top-type__title {
  color: var(--c);
}
.p-top-type__card--book .p-top-button,
.p-top-type__card--web .p-top-button {
  background: var(--c);
}
.p-top-type__points {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0 4px;
}
.p-top-type__point {
  padding-left: 30px;
  background: url(../img/top_icon_check.svg) no-repeat left 3px / 22px 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
}
.p-top-type__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
.p-top-type__note {
  margin: 36px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.p-top-type__note strong {
  font-weight: 700;
}

@media (max-width: 1199px) {
  .p-top-type__list {
    gap: 24px;
  }
  .p-top-type__card {
    padding: 30px 20px;
  }
  .p-top-type__points {
    padding: 0;
  }
}
/* カードはどの幅でも横2枚。狭くなるほど、すき間・余白・文字を詰める */
@media (max-width: 820px) {
  .p-top-type__list {
    gap: 16px;
  }
  .p-top-type__card {
    gap: 18px;
    padding: 26px 16px;
  }
  .p-top-type__title {
    font-size: 26px;
  }
  .p-top-type__point {
    padding-left: 26px;
    background-size: 20px 20px;
    font-size: 14px;
    line-height: 24px;
  }
}
@media (max-width: 640px) {
  .p-top-type {
    padding: 44px 0;
  }
  .p-top-type__list {
    gap: 10px;
  }
  .p-top-type__card {
    gap: 12px;
    padding: 18px 10px;
    border-radius: 14px;
  }
  .p-top-type__title {
    font-size: 20px;
  }
  .p-top-type__points {
    gap: 6px;
  }
  .p-top-type__point {
    padding-left: 20px;
    background-size: 16px 16px;
    background-position: left 2px;
    font-size: 12px;
    line-height: 1.6;
  }
  .p-top-type__img {
    border-radius: 10px;
  }
  .p-top-type__card .p-top-button {
    min-height: 40px;
    padding: 6px 4px;
    font-size: 12px;
  }
  .p-top-type__note {
    margin-top: 28px;
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .p-top-type__card {
    padding: 16px 8px;
  }
  .p-top-type__title {
    font-size: 20px;
  }
  .p-top-type__point {
    padding-left: 18px;
    background-size: 14px 14px;
    font-size: 11px;
  }
  .p-top-type__card .p-top-button {
    min-height: 36px;
    font-size: 11px;
  }
}

/* ===============================
   6. 選ばれる理由
   写真と文章が左右交互に3段（冊子版ページの「選ばれる理由」と同じ大きさ：小見出し28px・文章16px）
   641px以上：グリッドで左右2列（写真44%｜小見出し・文章・ボタン）。文字のまとまりは写真の高さの中央に置く
   640px以下：小見出しの下で、写真を右上に小さく置き、文章を写真の横から下へ回り込ませる
=============================== */
.p-top-reason {
  background: #FFFFFF;
  padding: 64px 0;
}
.p-top-reason__row {
  display: grid;
  grid-template-columns: 44% 1fr;
  grid-template-rows: 1fr auto auto auto 1fr; /* 上下の 1fr が余りを分け合い、文字のまとまりを上下中央に置く */
  column-gap: 45px;
}
.p-top-reason__row + .p-top-reason__row {
  margin-top: 60px;
}
/* 小見出し・文章・ボタンを入れた箱。箱そのものは作らず、中身を直接グリッドに並べる */
.p-top-reason__body {
  display: contents;
}
.p-top-reason__img {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.p-top-reason__title {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
}
.p-top-reason__text {
  grid-column: 2;
  grid-row: 3;
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}
.p-top-reason__row .p-top-button {
  grid-column: 2;
  grid-row: 4;
  justify-self: center;
  margin-top: 18px;
}
/* 2段目：写真を右に */
.p-top-reason__row--reverse {
  grid-template-columns: 1fr 44%;
}
.p-top-reason__row--reverse .p-top-reason__img {
  grid-column: 2;
}
.p-top-reason__row--reverse .p-top-reason__title,
.p-top-reason__row--reverse .p-top-reason__text,
.p-top-reason__row--reverse .p-top-button {
  grid-column: 1;
}

@media (max-width: 1199px) {
  .p-top-reason__row {
    column-gap: 36px;
  }
  .p-top-reason__title {
    font-size: clamp(21px, 2.6vw, 28px);
  }
}
@media (max-width: 820px) {
  .p-top-reason__row {
    column-gap: 24px;
  }
  .p-top-reason__row + .p-top-reason__row {
    margin-top: 48px;
  }
  .p-top-reason__title {
    font-size: clamp(17px, 2.6vw, 21px);
  }
  .p-top-reason__text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
  }
}
/* 640px以下（スマホ）：写真の横と下に文章が流れる */
@media (max-width: 640px) {
  .p-top-reason {
    padding: 44px 0;
  }
  .p-top-reason__row,
  .p-top-reason__row--reverse {
    display: flow-root;
  }
  .p-top-reason__row + .p-top-reason__row {
    margin-top: 36px;
  }
  .p-top-reason__title {
    margin-bottom: 12px;
    font-size: 22px;
  }
  .p-top-reason__img {
    float: right;
    width: 42%;
    margin: 6px 0 8px 16px;
    border-radius: 12px;
  }
  .p-top-reason__text {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.6;
  }
  .p-top-reason__row .p-top-button {
    clear: both;
    margin: 18px auto 0;
  }
}
@media (max-width: 480px) {
  .p-top-reason__title {
    font-size: 18px;
  }
}

/* ===============================
   7. 誌面サンプル
   グレー帯#F1F3F4 / ビューアは幅1000px・比率1200:700
=============================== */
.p-top-sample {
  background: #F1F3F4;
  padding: 64px var(--offset);
}

.p-top-sample__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* ビューアの枠。中のiframeは幅・高さ100%で、この枠いっぱいに広がる */
.p-top-sample__viewer {
  width: 100%;
  aspect-ratio: 1200 / 700;
  background: #DCDEE0;
}
/* min-width / min-height：埋め込みスクリプトがiframeに最小サイズ（PCで557px、スマホで320px）を
   後から付けるため、狭い画面で枠からはみ出して横スクロールが出る。枠に収まるよう打ち消している */
.p-top-sample__viewer iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0;
}

/* スマホ：枠をやや縦長（6:6.5）にする
   ビューアはスマホでも見開き表示で、下に操作バー（約110px）が付く。
   正方形で誌面が上下にすき間なく収まる。そこから少しだけ縦に広げて（6:6.5）、誌面の上下にゆとりを持たせている。
   これより低くすると誌面がどんどん小さくなる。縦長にしても、誌面は大きくならず上下が空くだけ */
@media (max-width: 640px) {
  .p-top-sample {
    padding: 44px var(--offset);
  }
  .p-top-sample__viewer {
    aspect-ratio: 6 / 6.5;
  }
}

/* ===============================
   8. 導入事例
   累計導入実績（金の月桂樹＋数字） → カード → 「ほかの導入事例を見る」
   カードの文字の大きさ・動きは導入事例ページ（case.css）と同じ
=============================== */
.p-top-case {
  background: #FFFFFF;
  padding: 64px 0;
}
.p-top-case__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-top-case .p-top-heading {
  margin-bottom: 20px;
}
/* 累計導入実績：左右に金の月桂樹、中央に「累計導入実績」→ 金の大きな数字 → 注記 */
.p-top-case__count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
  text-align: center;
}
.p-top-case__count-laurel {
  flex: none;
  width: 68px;
  height: auto;
  display: block;
}
.p-top-case__count-laurel--right {
  transform: scaleX(-1);
}
.p-top-case__count-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}
.p-top-case__count-label {
  font-size: 18px;
  letter-spacing: 0.08em;
}
/* 数字：金のグラデーション（文字の形に背景を切り抜いている）。
   color の金色は、切り抜きに対応していない古いブラウザ用の予備 */
.p-top-case__count-num {
  font-size: 24px;
  line-height: 1.1;
  color: #B8892B;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .p-top-case__count-num {
    background: linear-gradient(180deg, #D9B550 0%, #B8892B 55%, #8E6A1E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.p-top-case__count-num b {
  margin-right: 4px;
  font-size: 60px;
  letter-spacing: 0.01em;
}
.p-top-case__count-note {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: #848484;
}
/* カードは1000pxを3等分した幅のまま、枚数にかかわらず中央に寄せて並べる（今は2枚） */
.p-top-case__list {
  --case-gap: 30px;
  align-self: stretch;
  display: flex;
  justify-content: center;
  gap: var(--case-gap);
  list-style: none;
  margin: 36px 0 52px;
  padding: 0;
}
.p-top-case__item {
  display: flex;
  flex: 0 1 calc((100% - var(--case-gap) * 2) / 3);
  min-width: 0;
}
.p-top-case__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 14px;
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
/* マウスを乗せると少し浮いて影が濃くなる／押すと少し沈む（導入事例ページ case.css と同じ動き） */
.p-top-case__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.p-top-case__card:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .p-top-case__card {
    transition: none;
  }
  .p-top-case__card:hover {
    transform: none;
  }
}
.p-top-case__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.p-top-case__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.p-top-case__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}
.p-top-case__company {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #848484;
}
.p-top-case__title {
  margin: 11px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.p-top-case__data {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1em;
  margin: 14px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 22px;
  color: #848484;
}
.p-top-case__data dt,
.p-top-case__data dd {
  margin: 0;
}
/* カードのいちばん下の段：左に「記事を読む」、右に掲載日（上に1pxの線）。導入事例ページと同じ作り */
.p-top-case__foot {
  display: flex;
  flex-wrap: wrap; /* 幅が足りないときは、掲載日が下の行に回る */
  justify-content: space-between;
  align-items: flex-end;
  gap: 2px 8px;
  margin: auto 0 0;
  padding-top: 11px;
  border-top: 1px solid #BABCBE;
}
.p-top-case__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
}
.p-top-case__more-icon {
  width: 13px;
  height: 13px;
  display: block;
}
.p-top-case__date {
  margin: 0 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  line-height: 22px;
  color: #848484;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .p-top-case__list {
    --case-gap: 20px;
  }
  .p-top-case__title {
    font-size: clamp(15px, 1.6vw, 17px);
  }
}
/* 掲載日の中の改行：480px以下のときだけ効く */
.p-top-case__date-br {
  display: none;
}
/* 820px以下：カード2枚を、幅いっぱいの横2つに（ここから下は導入事例ページ case.css と同じ値） */
@media (max-width: 820px) {
  .p-top-case__list {
    --case-gap: 24px;
    margin: 32px 0 40px;
  }
  .p-top-case__item {
    flex: 1 1 0;
  }
}
/* 640px以下：2つ並びのまま、すき間と文字を詰める */
@media (max-width: 640px) {
  .p-top-case {
    padding: 44px 0;
  }
  .p-top-case .p-top-heading {
    margin-bottom: 16px;
  }
  .p-top-case__count {
    gap: 8px;
  }
  .p-top-case__count-laurel {
    width: 46px;
  }
  .p-top-case__count-label {
    font-size: 14px;
  }
  .p-top-case__count-num {
    font-size: 18px;
  }
  .p-top-case__count-num b {
    font-size: 42px;
  }
  .p-top-case__count-note {
    font-size: 10px;
  }
  .p-top-case__list {
    --case-gap: 12px;
    margin: 28px 0 32px;
  }
  .p-top-case__card {
    border-radius: 16px;
  }
  .p-top-case__body {
    padding: 0 10px;
  }
  .p-top-case__company {
    margin-top: 14px;
    font-size: 12px;
  }
  .p-top-case__title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
  }
  .p-top-case__data {
    margin: 10px 0;
    font-size: 11px;
    line-height: 18px;
  }
  /* 2列だと幅が足りないので、掲載日の下に「記事を読む」を置く（どちらも右寄せ） */
  .p-top-case__foot {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-top: 8px;
  }
  .p-top-case__more {
    order: 2;
    font-size: 11px;
    line-height: 18px;
  }
  .p-top-case__more-icon {
    width: 11px;
    height: 11px;
  }
  .p-top-case__date {
    font-size: 10px;
    line-height: 18px;
  }
}
/* 480px以下：掲載日を「記事掲載日:」のあとで改行 */
@media (max-width: 480px) {
  .p-top-case__date-br {
    display: inline;
  }
}

/* ============================================================
   上の 3〜8 の基本スタイルに、色と飾りを重ねている。やめたいときはこのブロックを消せば元に戻る
   色はサイトですでに使っている色：黄 #FDBC40（ナビの下線）／紫 #9A7CB6（冊子版）／赤 #C9727D（特別セット）
============================================================ */

/* 帯の色：お悩み・誌面サンプルは淡い紫（冊子版ページと同じ #F3EEF8）、導入形式はグレー寄りの淡い紫 */
.p-top-worry__top,
.p-top-worry__edge {
  background: #F3EEF8;
}
.p-top-type {
  background: #F2F1F5;
}
.p-top-sample {
  background: #F3EEF8;
}

/* お悩みカード：影を紫がかった色に、題名の下に点線（題名の文字色は本文と同じ #3C4043 のまま） */
.p-top-worry__card {
  filter: none;
  box-shadow: 0 6px 18px rgba(154, 124, 182, 0.18);
}
.p-top-worry__title {
  align-self: stretch;
  padding-bottom: 14px;
  border-bottom: 2px dotted #C9B8DA;
}

/* 「解決します」：商品名に黄色のマーカー、下向き矢印も黄色 */
.p-top-marker {
  padding: 0 4px;
  background: linear-gradient(transparent 66%, #FFE48A 66%);
}
.p-top-worry__arrow {
  color: #FDBC40;
}

/* 導入形式：「特別セット」の一文を赤系の枠に */
.p-top-type__note {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 12px 28px;
  border: 2px solid #C9727D;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 16px;
}
.p-top-type__note strong {
  color: #C9727D;
}
@media (max-width: 640px) {
  .p-top-type__note {
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 12px;
  }
}

/* 選ばれる理由：小見出しの上に大きな番号（01〜03。CSSが自動で数える）、写真の後ろに淡い色の四角 */
.p-top-reason__inner {
  counter-reset: reason;
}
.p-top-reason__row {
  counter-increment: reason;
}
.p-top-reason__title::before {
  content: counter(reason, decimal-leading-zero);
  display: block;
  margin-bottom: 2px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: #FDBC40;
}
.p-top-reason__row:nth-of-type(1) .p-top-reason__img { box-shadow: 16px 16px 0 #F3EEF8; }
.p-top-reason__row:nth-of-type(2) .p-top-reason__img { box-shadow: -16px 16px 0 #E6F2EF; }
.p-top-reason__row:nth-of-type(3) .p-top-reason__img { box-shadow: 16px 16px 0 #FFF3D6; }
@media (max-width: 820px) {
  /* 縦並びのときは後ろの四角を出さない（:nth-of-type(n) は上の3行より優先させるため） */
  .p-top-reason__row:nth-of-type(n) .p-top-reason__img {
    box-shadow: none;
  }
}
/* 640px以下（スマホ）：番号を小見出しの左に並べる */
@media (max-width: 640px) {
  .p-top-reason__title {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .p-top-reason__title::before {
    flex: none;
    margin-bottom: 0;
    font-size: 40px;
  }
}
@media (max-width: 480px) {
  .p-top-reason__title {
    font-size: 18px;
  }
  .p-top-reason__title::before {
    font-size: 34px;
  }
}

/* スクロールに合わせて下からふわっと出る動き
   js/top.js が、まだ画面に入っていないブロックに .p-top-fade を付け、画面に入ったら .is-in を足す
   （JSが動かないときは何も付かないので、ふつうに表示される） */
.p-top-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.p-top-fade.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .p-top-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}