@charset "UTF-8";
/**
 * top.css — トップページ固有（is_front_page() のときだけ読み込む）
 *
 * 上半分＝mv / btn_area×2 / common_challenges / use_cases
 * 下半分＝find_by_use / case / for_prospective_customers / news / contact
 * 共通パーツと共通コンポーネントは common.css 側。
 */

/* ==========================================================================
   上半分（mv 〜 use_cases）
   ========================================================================== */

/* top-upper.css =============================================
   トップページ上部5セクション（上部担当）
     1. mv                 Figma node 2:51      PC 1440×644
     2. btn_area（1本目）   Figma node 490:4298  PC 1440×180  → .top-apply
     3. btn_area（2本目）   Figma node 320:4788  PC 1440×252  → .top-purpose
     4. common_challenges  Figma node 26:1202   PC 1440×919  → .top-challenges
     5. use_cases          Figma node 26:1215   PC 1440×1653 → .top-use-cases

   ■ SP の扱い
     - mv / btn_area 2本 は SP カンプ（Figma node 175:957・375×1178）に準拠。
     - use_cases は SP カンプ（Figma node 507:4423・375×1375）に準拠。
     - common_challenges は **SP はカンプ無し・当方設計**（PC カンプから縦1列へ再構成）。

   ■ 前提
     - 変数・リセット・.btn の基本形は common.css 側にある。ここでは重複させない。
     - 実装契約書 4. の共通コンポーネント（.heading-01 / .sub-head / .btn--4 /
       .btn--5 / .ar / .ar--white / .ar--2 / .ar--2-white）は共通パーツ担当の実装。
       ここでは「自セクション内での寸法と配置」だけを当てている。
     - 1rem = 10px（html{font-size:62.5%}）。数値は figma-dump/inspect と
       file.json の実測値。clamp() は 1440px で Figma 実測値に一致するよう算出。
     - Figma の leadingTrim: CAP_HEIGHT は text-box-trim / text-box-edge で再現する
       （未対応ブラウザでは行の上下に数px余白が出るだけで崩れない）。
   ============================================================ */

/* =============================================================
   1. mv（メインビジュアル）
   ============================================================= */
.top-mv {
  position: relative;
  overflow: hidden;
  background: #fff;
}
/* 1440×644 の比率を保った箱にして、中の要素を % で置く */
.top-mv::before {
  content: "";
  display: block;
  padding-top: 44.7222%; /* 644 / 1440 */
}

/* --- スライダー本体（カンプの主画像は x=599〜1326・画面中央ではない） --- */
.top-mv__slider {
  position: absolute;
  top: 3.5714%;    /* 23 / 644 */
  left: 41.5972%;  /* 599 / 1440 */
  width: 50.4861%; /* 727 / 1440 */
}
.top-mv__slider .slick-list {
  overflow: visible; /* 左右のスライドを枠外に見せる。切り取りは .top-mv 側 */
}
.top-mv__slide {
  padding: 0 .6rem; /* Figma: スライド枠 727 に対して画像 715（左右6px） */
}
.top-mv__img {
  width: 100%;
  aspect-ratio: 715 / 565;
  object-fit: cover;
  border-radius: 3rem;
}
/* Slick 初期化前は1枚だけ見せる（読み込み時のちらつき防止） */
.top-mv__slider:not(.slick-initialized) .top-mv__slide + .top-mv__slide {
  display: none;
}
/* 中央以外を縮小＋ぼかす（デザイナー指示 Figma memo node 188:1130）
   Figma 実測：中央 715×565 / 左右 660×522（= 12/13 縮小）・LAYER_BLUR 20・不透明度 20% */
.top-mv__slider .slick-slide {
  transform: scale(0.9231);
  filter: blur(20px);
  opacity: .2;
  transition: transform .8s ease, filter .8s ease, opacity .8s ease;
}
/* .is-center-target は「3枚目 → 1枚目」の周回時に中央へ入ってくる複製スライド用。
   Slick は複製（.slick-cloned）に .slick-center を付けないため、周回の800msだけ
   中央の写真がぼけたまま（blur 20px・不透明度.2）残り、切り替わった瞬間に
   はっきりした写真へ飛ぶ挙動になっていた。mv.php の beforeChange で印を付ける。 */
.top-mv__slider .slick-slide.slick-center,
.top-mv__slider .slick-slide.is-center-target {
  transform: none;
  filter: none;
  opacity: 1;
}
/* 周回中、Slick は「中央へ入ってくる複製」ではなく、その隣の複製へ .slick-center を
   付けてしまう（実測：3枚目→1枚目のとき idx4 が中央扱い）。そのままだと画面右端に
   はっきりした写真の端が出てきて「4枚目へ行こうとしている」ように見える。
   周回中だけは、印を付けた要素以外の .slick-center を通常の脇スライドと同じ扱いに戻す。 */
.top-mv__slider.is-wrapping .slick-slide.slick-center:not(.is-center-target) {
  transform: scale(0.9231);
  filter: blur(20px);
  opacity: .2;
}
/* Slick が周回後にトラック位置を戻す一瞬だけ、ぼかし・拡大の変化を再生させない
   （戻した直後に複製が横位置へ移るため、ここで動かすと横の写真がぼけ直して見える）。 */
.top-mv__slider.is-no-anim .slick-slide {
  transition: none;
}

/* --- ドット --- */
.top-mv__dots {
  position: absolute;
  left: 44.0278%;   /* 634 / 1440 */
  bottom: 4.6584%;  /* (644-614) / 644 */
}
.top-mv__dots .slick-dots {
  position: static;
  display: flex;
  gap: .8rem;
  width: auto;
  margin: 0;
  padding: 0;
}
.top-mv__dots .slick-dots li {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
}
.top-mv__dots .slick-dots button {
  display: block;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color_gray);
  font-size: 0;
  color: transparent;
  cursor: pointer;
}
.top-mv__dots .slick-dots button::before {
  display: none;
}
.top-mv__dots .slick-dots .slick-active button {
  background: var(--color_main);
}

/* --- 右の機器写真 --- */
.top-mv__device {
  position: absolute;
  left: 76.7361%;  /* 1105 / 1440 */
  top: 23.6025%;   /* 152 / 644 */
  width: 19.1667%; /* 276 / 1440 */
  aspect-ratio: 276 / 492;
  object-fit: cover;
}

/* --- コピー --- */
.top-mv__copy {
  position: absolute;
  left: 8.3333%; /* 120 / 1440 = 1200px コンテナの左端 */
  top: 20.0311%; /* 129 / 644 */
}
.top-mv__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(2.8rem, 2.7778vw, 4rem); /* 1440px で 40px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.top-mv__catch-row {
  display: inline-flex;
  align-items: center;
  height: 1.475em; /* 59 / 40 */
  /* 左右 10px（.25em）。右は letter-spacing が最後の文字の後にも入るぶんを差し引く */
  padding: 0 .2em 0 .25em;
  background: #fff;
  white-space: nowrap;
}
.top-mv__catch-row--2 {
  margin-top: .175em; /* 7 / 40 */
  color: var(--color_main);
}
.top-mv__catch-gold {
  margin-right: -.05em; /* 同上（文字送りの余りを詰める） */
  color: #A57123;
}
.top-mv__catch-tight {
  letter-spacing: -.1em; /* Figma: 該当2文字のみ letterSpacing -4 */
}
.top-mv__no1 {
  width: 3em; /* 120 / 40 */
  height: auto;
  margin: 0 .075em 0 .25em;
  transform: translateY(-.4125em); /* 白帯の中心より 16.5px 上 */
}
.top-mv__text {
  margin: 2.8rem 0 0 1.3rem;
  font-size: clamp(1.4rem, 1.1111vw, 1.6rem);
  font-weight: 500;
  line-height: 1.8; /* 28.8 / 16 */
  letter-spacing: .05em;
}

/* --- 実績バッジ（月桂冠）。--bu で PC/SP のスケールを1箇所で切り替える --- */
.top-mv-badge {
  /* mv は比率箱（padding-top %）で中の要素も % 配置のため、バッジも画面幅に比例させる。
     .69444vw = 10 / 1440。カンプ幅 1440px で 1rem（＝Figma 実測）に一致する。
     上限を付けると大画面で mv だけ伸びてバッジが取り残されるので上限なし（SP は下の mq で固定値に切替） */
  --bu: .69444vw;
  position: absolute;
  width: calc(var(--bu) * 22.4);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color_dark);
}
.top-mv-badge--share {
  left: 7.5%;        /* 108 / 1440 */
  bottom: 20.6522%;  /* (644-511) / 644 */
  height: calc(var(--bu) * 12.8);
}
.top-mv-badge--users {
  left: 23.6111%;    /* 340 / 1440 */
  bottom: 20.6522%;
  height: calc(var(--bu) * 12);
}
.top-mv-badge__pill {
  position: absolute;
  left: calc(var(--bu) * 1.2);
  bottom: calc(var(--bu) * .7);
  width: calc(var(--bu) * 20);
  height: calc(var(--bu) * 10);
  border-radius: calc(var(--bu) * 6);
  background: #fff;
  filter: blur(calc(var(--bu) * 1));
}
.top-mv-badge__laurel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--bu) * 22.4);
  height: calc(var(--bu) * 11);
}
.top-mv-badge__label,
.top-mv-badge__title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  paint-order: stroke fill;
  -webkit-text-stroke: calc(var(--bu) * .6) #fff;
}
.top-mv-badge__label {
  top: 0;
  font-size: calc(var(--bu) * 1.6);
}
.top-mv-badge__title {
  font-size: calc(var(--bu) * 2);
}
.top-mv-badge--share .top-mv-badge__title {
  top: calc(var(--bu) * 1.8);
}
.top-mv-badge--users .top-mv-badge__title {
  top: 0;
  /* 2026-09-24 ケンネット様のご指示で「年間」を足し8文字（国内外年間利用数）になった。
     元の 2bu のままだと幅が約16bu になり、月桂樹の上端の葉に左右とも約1bu 重なる
     （Figma 02_mv.txt の実測＝枠 x340〜564、葉の内側 x381〜523、元の文字枠 x392〜512）。
     葉の内側（枠の幅の 18.3%〜81.7%）に収まる 1.65bu に下げ、1行のまま出す。 */
  font-size: calc(var(--bu) * 1.65);
  white-space: nowrap;
}
.top-mv-badge__no1 {
  position: absolute;
  left: calc(var(--bu) * 3.6);
  bottom: calc(var(--bu) * 1.5);
  width: calc(var(--bu) * 16.1);
  height: calc(var(--bu) * 9.8);
}
.top-mv-badge__num {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--bu) * 1.61);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.top-mv-badge__figure {
  font-family: var(--font_eng_cond);
  font-size: calc(var(--bu) * 9);
  line-height: 1.1;
  letter-spacing: -.05em;
  background: linear-gradient(180deg, #DB6526, #B80003);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.top-mv-badge__unit {
  margin: 0 0 calc(var(--bu) * 1.86) calc(var(--bu) * -.61);
  font-size: calc(var(--bu) * 2.305);
  font-weight: 900;
  color: var(--color_main);
  paint-order: stroke fill;
  -webkit-text-stroke: calc(var(--bu) * .69) #fff;
}
.top-mv-badge__unit-large {
  font-size: calc(var(--bu) * 2.997);
}

/* XL（1199px 以下）の調整。下限は切らず LG・SP へそのまま継承させる。
   この幅ではリード文の右側がスライダーの写真に重なって読みにくくなるため、白の光彩を出す。
   ぼかし幅は文字サイズに追従させたいので em。写真の暗部でも輪郭が残るよう4段で外へ広げている。 */
@media (max-width: 1199px) {
  .top-mv__text {
    text-shadow: 0 0 .8em #fff, 0 0 .5em #fff, 0 0 .3em #fff, 0 0 .15em #fff;
  }
}

/* LG（1023px 以下）の調整。
   この幅ではバッジが小さくなり、2枚の月桂冠の間の空きが目立つため右のバッジを左へ寄せる。
   ※ SP（768px 以下）は 375px カンプの配置を持つため、下の mq で従来値のまま上書きされる。 */
@media (max-width: 1023px) {
  .top-mv-badge--users { left: 22.4%; }
}

@media (max-width: 768px) {
  /* SP カンプ Figma node 175:957（375幅）の mv〜バッジ部（y=88〜587）を再現 */
  /* 499/375 の比率。ただしタブレット縦（〜768px）で高くなりすぎないよう上限を付ける */
  .top-mv::before { padding-top: min(133.0667%, 62rem); }

  .top-mv__slider { top: 0; left: 10.6667%; width: 89.3333%; }
  .top-mv__slider .slick-list { overflow: hidden; }
  /* SP カンプの画像は Crop（imageTransform）指定。枠を作って中で拡大・オフセットする */
  .top-mv__slide {
    position: relative;
    overflow: hidden;
    aspect-ratio: 335 / 270;
    padding: 0;
    border-radius: 2rem 0 0 2rem;
  }
  .top-mv__img {
    position: absolute;
    left: -14.72%;
    top: -8.93%;
    width: 158.19%;
    height: 109.17%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: fill;
    border-radius: 0;
  }
  /* SP は縮小・ぼかしを使わない。上の周回用の指定（.is-wrapping）より
     詳細度が低いままだと周回中だけぼけてしまうため、同じ強さで打ち消す。 */
  .top-mv__slider .slick-slide,
  .top-mv__slider.is-wrapping .slick-slide.slick-center:not(.is-center-target) { transform: none; filter: none; opacity: 1; }

  .top-mv__dots { left: 4.8%; top: 2.4048%; bottom: auto; }
  .top-mv__dots .slick-dots { flex-direction: column; }

  .top-mv__device { left: 68.5333%; top: 28.2565%; width: 27.2%; aspect-ratio: 102 / 181; }

  .top-mv__copy { left: 4.5333%; top: 41.6834%; }
  .top-mv__catch { font-size: clamp(2rem, 6.4vw, 2.8rem); } /* 375px で 24px */
  .top-mv__catch-row--1 { height: 1.4167em; padding: 0 .1125em; }
  .top-mv__catch-row--2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    margin-top: .2292em;
    padding: 0;
    background: none;
  }
  .top-mv__catch-part {
    display: inline-flex;
    align-items: center;
    height: 1.3917em;
    padding: 0 .2369em;
    background: #fff;
  }
  .top-mv__catch-part + .top-mv__catch-part { margin-top: -.0625em; }
  .top-mv__no1 { width: 2.8333em; margin: 0 .025em 0 .1375em; transform: translateY(-.375em); }
  .top-mv__text { margin: .4em 0 0 .3rem; font-size: 1.3rem; line-height: 1.8; }

  .top-mv-badge { --bu: .69737rem; }
  .top-mv-badge--share { left: 7.7333%; bottom: 6.012%; }
  /* 右のバッジは % 固定（旧 50.88%）だと画面幅が広いほど左のバッジから離れて間が開くため、
     左のバッジの左端からの距離（22.29bu＝375px カンプでの2枚の間隔）で置く。
     375px の見た目はカンプのまま、幅が広がっても間隔が変わらない。 */
  .top-mv-badge--users { left: calc(7.7333% + var(--bu) * 22.29); bottom: 6.012%; }
}

/* =============================================================
   2. btn_area 1本目（今すぐレンタル申込）
   ============================================================= */
.top-apply {
  padding: 3rem 0;
  background: var(--color_main_light);
}
.top-apply__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82rem;
  max-width: calc(100% - 4rem);
  height: 12rem;
  margin: 0 auto;
  background: var(--color_main);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1rem 3rem rgba(134, 13, 8, .3);
  transition: var(--transition);
}
/* hover はカンプの hover フレーム（Figma node 569:4991）実測：main_color → main_color_dark */
.top-apply__btn:hover { background: var(--color_main_dark); }
.top-apply__icon {
  position: absolute;
  left: 3.1rem;
  top: 50%;
  width: 8.2rem;
  height: 8.2rem;
  transform: translateY(-50%);
}
.top-apply__arrow {
  position: absolute;
  right: 2.4rem;
  top: 50%;
  width: 5.6rem;
  height: 5.6rem;
  transform: translateY(-50%);
}
.top-apply__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.top-apply__title,
.top-apply__sub {
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.top-apply__title { font-size: clamp(2.6rem, 2.3611vw, 3.4rem); }
.top-apply__sub { font-size: clamp(1.6rem, 1.3889vw, 2rem); }

@media (max-width: 768px) {
  /* SP カンプ：btn_area 375×120（y=587〜707）。補足文はカンプに無いので非表示 */
  .top-apply { padding: 2rem 0; }
  .top-apply__btn {
    width: calc(100% - 8rem);
    max-width: none;
    height: 8rem;
    justify-content: flex-start;
    padding-left: 7rem;
    box-shadow: none;
  }
  .top-apply__icon { left: 1.2rem; width: 5.6rem; height: 5.6rem; }
  .top-apply__arrow { right: 1rem; width: 2.4rem; height: 2.4rem; }
  .top-apply__txt { align-items: flex-start; gap: 0; }
  .top-apply__title { font-size: 1.6rem; }
  .top-apply__sub { display: none; }
}

/* =============================================================
   3. btn_area 2本目（目的に合わせて探す）
   ============================================================= */
.top-purpose {
  padding: 3rem 0 5rem;
  background: #fff;
}
.top-purpose__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0 0 2.4rem;
}
.top-purpose__head-icon {
  width: 2.8rem;
  height: 2.8rem;
}
.top-purpose__head-text {
  font-size: clamp(1.6rem, 1.3889vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  color: var(--color_main);
}
.top-purpose__list {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  max-width: 124rem; /* 1200 + 左右 padding 20 = 1240px 以上で内容幅 1200 */
  margin: 0 auto;
  padding: 0 2rem;
}
.top-purpose__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28.2rem;
  min-width: 0;
  height: 12rem;
  background: #fff;
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .1);
  text-decoration: none;
  transition: var(--transition);
}
/* hover はカンプ実測（Figma node 569:5013）：白のまま 2px の赤枠が内側に付く */
.top-purpose__card:hover {
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .1), inset 0 0 0 2px var(--color_main);
}
.top-purpose__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.top-purpose__title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--color_main);
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.top-purpose__sub {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4; /* 16.8 / 12 */
  letter-spacing: .05em;
  color: var(--color_dark);
  text-align: center;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.top-purpose__arrow {
  position: absolute;
  right: 1rem;
  bottom: 1.8rem;
  width: 2.4rem;
  height: 2.4rem;
}
/* PC の改行位置（SP カンプでは 3枚目タイトル・4枚目補足の改行位置が違う） */
.top-purpose__sub-a { display: block; }

/* XL（1199px 以下）の調整。カード幅が縮んで3枚目のタイトルが1行に収まらなくなるため、
   「WEB版」を1行目、「イヤホンガイドについて」を2行目に分ける（LG・SP へそのまま継承）。 */
@media (max-width: 1199px) {
  .top-purpose__title-a { display: block; }
}

@media (max-width: 768px) {
  /* SP カンプ：btn_area 375×333（y=707〜1040）。2列×2行 */
  .top-purpose { padding: 2rem 0 3rem; }
  .top-purpose__head { margin-bottom: 1rem; }
  .top-purpose__head-text { font-size: 1.6rem; }
  .top-purpose__list {
    flex-wrap: wrap;
    gap: .5rem;
    max-width: none;
    padding: 0 1rem;
  }
  .top-purpose__card {
    width: calc(50% - .25rem);
    align-items: flex-start;
    padding-top: 2.4rem;
  }
  /* 3枚目だけタイトルが2行になるためカンプどおり上詰めを浅くする */
  .top-purpose__card:nth-child(3) { padding-top: 1rem; }
  .top-purpose__txt { gap: .8rem; width: 100%; }
  .top-purpose__title {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0;
    text-box-trim: none;
  }
  .top-purpose__sub {
    font-size: 1.2rem;
    letter-spacing: 0;
    text-box-trim: none;
  }
  .top-purpose__arrow { right: .5rem; bottom: .5rem; }
  /* .top-purpose__title-a の2行化は上の XL ブロックから継承される（ここで重複させない） */
  .top-purpose__sub-a { display: inline; }
  .top-purpose__sub-c { display: block; }
}

/* =============================================================
   4. common_challenges（こんなお悩みありませんか？）
   ============================================================= */
.top-challenges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: clamp(6rem, 6.944vw, 10rem) 0;
  background: var(--color_light);
}
.top-challenges__wrap {
  width: 100%;
  max-width: 104rem;
  padding-bottom: 6rem;
}
.top-challenges__panel {
  position: relative;
  padding: 3rem 0 5rem;
  background: #fff;
}
.top-challenges__head {
  position: absolute;
  top: -2.5rem;
  left: 0;
  right: 0;
  font-size: clamp(2.2rem, 1.9444vw, 2.8rem);
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
  letter-spacing: .05em;
  text-align: center;
}
.top-challenges__boxes {
  display: flex;
}
.top-challenges-box {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3rem;
  border-right: 1px solid var(--color_line);
}
.top-challenges-box:last-child {
  border-right: 0;
}
.top-challenges-box__icon {
  width: 16rem;
  height: 11rem;
}
.top-challenges-box__title {
  margin-bottom: 1rem;
  font-size: clamp(1.8rem, 1.3889vw, 2rem);
  font-weight: 700;
  line-height: 1.4; /* 28 / 20 */
  letter-spacing: .05em;
  text-align: center;
}
.top-challenges-box__text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
  color: var(--color_muted);
  text-align: center;
}
.top-challenges__notch {
  position: absolute;
  left: 50%;
  bottom: -3.8rem;
  width: 20.4rem;
  height: 5.4rem;
  transform: translateX(-50%);
}

/* --- 解決できます！（赤い枠が四隅だけ見える構造） --- */
.top-challenges-solution {
  width: 100%;
  max-width: 99.8rem;
  padding: 0 2.8rem; /* border 2px と合わせて Figma の 30px */
  border: 2px solid var(--color_main);
}
.top-challenges-solution__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -2px 0; /* 上下のボーダーを内側の背景で隠す＝四隅だけ残す */
  padding: 0 3rem;
  background: var(--color_light);
}
.top-challenges-solution__head {
  position: relative;
  padding-bottom: 3rem;
  font-size: clamp(2.4rem, 2.0833vw, 3rem);
  font-weight: 700;
  line-height: 1.2; /* 36 / 30 */
  letter-spacing: .05em;
  color: var(--color_main);
  text-align: center;
}
.top-challenges-solution__lead,
.top-challenges-solution__result {
  display: block;
}
.top-challenges-solution__strong {
  font-size: 1.3333em; /* 40 / 30 */
  line-height: 1.2;
}
.top-challenges-solution__underline {
  position: absolute;
  left: 50%;
  top: 8.7rem;
  width: 23.1rem;
  height: 2px;
  background: var(--color_main);
  transform: translateX(-50%);
}
.top-challenges-solution__points {
  display: flex;
  gap: 1rem;
  width: 100%;
  padding-bottom: 2rem;
}
.top-challenges-solution__point {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.6rem;
  background: #fff;
  border: 3px solid var(--color_line);
  font-size: clamp(1.8rem, 1.3889vw, 2rem);
  font-weight: 700;
  line-height: 1.8; /* 36 / 20 */
  letter-spacing: .05em;
  color: var(--color_main);
  text-align: center;
}
.top-challenges-solution__text {
  font-size: clamp(1.8rem, 1.5278vw, 2.2rem);
  font-weight: 700;
  line-height: 1.6; /* 35.2 / 22 */
  letter-spacing: .05em;
  text-align: center;
}

/* --- 詳しく見るボタン --- */
.top-challenges__btn-area {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 5rem;
}
.top-challenges__btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 43.1rem;
  max-width: calc(100% - 4rem);
  height: 7.3rem;
  padding: 0 5rem 0 3rem;
  background: var(--color_dark);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
  transition: var(--transition);
}
/* hover はカンプ実測（Figma node 569:5027）：#111111 → #323232 */
.top-challenges__btn:hover { background: #323232; }
.top-challenges__btn-label {
  font-size: clamp(1.6rem, 1.25vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4; /* 25.2 / 18 */
  letter-spacing: .05em;
}
.top-challenges__btn .ar {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  /* ★ SP はカンプ無し・当方設計（PC カンプから縦1列へ再構成） */
  .top-challenges { padding: 6rem 1.5rem; }
  .top-challenges__wrap { padding-bottom: 4rem; }
  .top-challenges__panel { padding: 3rem 0 4rem; }
  .top-challenges__head { top: -1.8rem; font-size: 2rem; }
  .top-challenges__boxes { flex-direction: column; }
  .top-challenges-box {
    padding: 1rem 2rem 2rem;
    border-right: 0;
    border-bottom: 1px solid var(--color_line);
  }
  .top-challenges-box:last-child { border-bottom: 0; }
  .top-challenges-box__title { font-size: 1.8rem; }
  .top-challenges__notch { bottom: -2.6rem; width: 14rem; height: 3.7rem; }

  .top-challenges-solution { max-width: none; padding: 0 1.4rem; }
  .top-challenges-solution__inner { padding: 3rem 1.6rem; }
  .top-challenges-solution__head { padding-bottom: 2rem; font-size: 2rem; }
  .top-challenges-solution__underline { display: none; }
  .top-challenges-solution__result { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4rem; }
  .top-challenges-solution__points { flex-direction: column; gap: .8rem; padding-bottom: 1.6rem; }
  /* 親が縦並びになると flex: 1 が高さ方向に効き、指定した高さが潰れる（46px→33px）ため伸縮を止める */
  .top-challenges-solution__point { flex: none; height: 4.6rem; border-width: 2px; font-size: 1.6rem; }
  .top-challenges-solution__text { font-size: 1.5rem; line-height: 1.7; }

  .top-challenges__btn-area { padding-top: 3rem; }
  .top-challenges__btn { height: 6.4rem; padding: 0 4rem 0 2rem; box-shadow: 0 .5rem 1.6rem rgba(0, 0, 0, .2); }
  /* 1行に収める（2026-08-01 CEO 指示）。15px では 251px 必要で入る幅が 245px しかなく折り返していた。 */
  .top-challenges__btn-label { font-size: 1.4rem; }
}

/* =============================================================
   5. use_cases（代表製品・ラインアップ）
   ============================================================= */
.top-use-cases {
  position: relative;
  overflow: hidden;
  padding: 18rem 0 clamp(6rem, 6.944vw, 10rem);
  background: var(--gradient);
}
.top-use-cases__bg {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
}
.top-use-cases__bg-img {
  width: 50%;
  aspect-ratio: 720 / 300;
  background-repeat: no-repeat;
}
/* background-size / position は Figma の Crop（imageTransform）から換算 */
.top-use-cases__bg-img--left {
  background-image: url(../images/use_cases_bg_left.png);
  background-size: 106.76% 128.11%;
  background-position: 49.32% 89.17%;
}
.top-use-cases__bg-img--right {
  background-image: url(../images/use_cases_bg_right.png);
  background-size: 105.53% 142.54%;
  background-position: 100% 57.2%;
}
.top-use-cases__panel {
  position: relative;
  width: calc(100% - 11rem);
  max-width: 133rem;
  margin: 0 auto;
  padding: 8rem 5rem;
  background: #fff;
}
/* 1200〜1439px は、5列の表組みを収めるための縮小率を上げる目的でパネルの左右余白を詰める。
   カンプが寸法を定義しているのは 1440px 以上で、その帯の余白（外 5.5rem×2・内 5rem×2）は変えない。
   2026-09-08 ケンネット様のご指摘対応。詰めない場合、1200px で本文が 9.5px 相当まで落ちる。 */
@media (min-width: 1200px) and (max-width: 1439px) {
  .top-use-cases__panel {
    width: calc(100% - 6rem);
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
.top-use-cases .heading-01,
.top-use-cases .sub-head {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
}
/* use_cases の head_01 インスタンスだけ Figma で 112px（find_by_use / case は 90px）。
   inspect 06_use_cases.txt: 枠 [120,260,1320,372] に対して
   本文「代表製品・ラインアップ」が [120,271,1320,316]＝上に 11px、
   ラベル下端 345 に対して枠下端 372＝下に 27px の余白がある。
   この差 22px を入れないと以降のカード・比較ボタン・リンクが一律 22px 上へずれる。 */
.top-use-cases .heading-01 {
  padding-top: 1.1rem;
  padding-bottom: 2.7rem;
}
.top-use-cases__sub-br { display: none; } /* SP カンプのみ2行 */

/* --- 表組み本体 --- */
.top-lineup {
  display: flex;
  align-items: stretch;
  padding-bottom: 3rem;
  /* 5列の表組みは内容幅 1230px を必要とする。パネルの内容幅がそれに満たない帯
     （Windows で表示幅 1456px 以下・Mac で 1439px 以下・2026-09-08 ケンネット様よりご指摘）は、表組みの体裁を保ったまま
     全体を縮めて収める。倍率は use-cases.php の JS が --lineup-zoom に入れる（既定 1）。 */
  zoom: var(--lineup-zoom, 1);
}
/* JS が動かない・slick の読込に失敗した場合の保険。
   各帯の下限幅でスクロールバー 17px を見込んでも収まる値を既定にしておく。
   JS が動く時は --lineup-zoom（実測値）が必ず入るのでこちらは使われない。 */
@media (min-width: 1200px) and (max-width: 1279px) { .top-lineup { zoom: var(--lineup-zoom, 0.86); } }
@media (min-width: 1280px) and (max-width: 1365px) { .top-lineup { zoom: var(--lineup-zoom, 0.92); } }
@media (min-width: 1366px) and (max-width: 1439px) { .top-lineup { zoom: var(--lineup-zoom, 0.99); } }
@media (min-width: 1440px) and (max-width: 1456px) { .top-lineup { zoom: var(--lineup-zoom, 0.98); } }
.top-lineup__labels {
  flex: 0 0 12rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 75.1rem; /* Figma のカード高さ。下揃えの基準をカード高さに固定する */
  padding-bottom: 15.4rem;
}
.top-lineup__label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color_light);
  border-left: 1px solid var(--color_line);
  border-bottom: 1px solid var(--color_line);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2; /* 16.8 / 14 */
  letter-spacing: .05em;
  text-align: center;
}
.top-lineup__label--call { height: 5rem; border-top: 1px solid var(--color_line); }
.top-lineup__label--type { height: 8rem; }
.top-lineup__label--power { height: 5rem; }
.top-lineup__nav { display: none; } /* SP のみ表示 */
/* slick-theme.css の .slick-slider{margin-bottom:30px} を打ち消す */
.top-mv__slider.slick-slider,
.top-lineup__cards.slick-slider { margin-bottom: 0; }
.top-lineup__cards {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* --- 製品カード --- */
.top-lineup-card {
  flex: 0 0 22rem;
  width: 22rem;
  background: #fff;
}
.top-lineup-card--web {
  flex: 0 0 23rem;
  width: 23rem;
}
.top-lineup-card__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 7.6rem;
  padding: 1rem;
  background: var(--color_main);
  border-right: 1px solid #fff;
  color: #fff;
  text-align: center;
}
.top-lineup-card--web .top-lineup-card__name {
  background: var(--color_main_dark);
  border-right: 0;
  border-left: 1px solid #fff;
}
.top-lineup-card__model {
  font-size: clamp(2rem, 1.6667vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4; /* 33.6 / 24 */
  letter-spacing: .05em;
}
.top-lineup-card--web .top-lineup-card__model {
  font-size: clamp(1.6rem, 1.25vw, 1.8rem);
}
.top-lineup-card__type {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.4; /* 22.4 / 16 */
  letter-spacing: .05em;
}
.top-lineup-card__body {
  height: 67.5rem; /* Figma 実測（751 - 名前欄 76）。中身の合計と一致 */
  padding: 1rem 1rem 2rem;
  border-right: 1px solid var(--color_line);
  border-bottom: 1px solid var(--color_line);
}
.top-lineup-card:first-child .top-lineup-card__body {
  border-left: 1px solid var(--color_line);
}

/* 写真＋アイコン＋説明 */
.top-lineup-card__intro {
  display: flex;
  height: 20.5rem;
  padding-bottom: 2rem;
}
.top-lineup-card__photo {
  flex: 0 0 10.5rem;
  height: 17rem;
  background-repeat: no-repeat;
}
.top-lineup-card:nth-child(1) .top-lineup-card__photo {
  background-image: url(../images/product_photo_01.png);
  background-size: 200.2% 123.53%;
  background-position: 50.37% 85%;
}
.top-lineup-card:nth-child(2) .top-lineup-card__photo {
  background-image: url(../images/product_photo_02.png);
  background-size: 195.45% 120.41%;
  background-position: 50.61% 82.55%;
}
.top-lineup-card:nth-child(3) .top-lineup-card__photo {
  background-image: url(../images/product_photo_03.png);
  background-size: 191.38% 118.09%;
  background-position: 50% 86.61%;
}
.top-lineup-card:nth-child(4) .top-lineup-card__photo {
  background-image: url(../images/product_photo_04.png);
  background-size: 60.56% 87.23%;
  background-position: 50% 79.48%;
}
.top-lineup-card__intro-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}
.top-lineup-card__icon {
  width: 8rem;
  height: 8rem;
  margin-bottom: 1rem;
}
.top-lineup-card__desc {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4; /* 16.8 / 12 */
  letter-spacing: .05em;
}
.top-lineup-card__desc-strong {
  font-weight: 700;
  color: var(--color_main);
}

/* オススメ使用シーン */
.top-lineup-card__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 9rem;
  margin-bottom: 2rem;
  /* 左右は Figma の 5px からボーダー分を引いた値。カンプの2行組みが入る幅を確保する */
  padding: 1rem .3rem;
  border: 1px solid var(--color_main);
  text-align: center;
}
.top-lineup-card__scene-head {
  padding: .3rem 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4; /* 19.6 / 14 */
  letter-spacing: .05em;
  color: var(--color_main);
}
.top-lineup-card__scene-text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 仕様3行 */
.top-lineup-card__specs {
  margin-bottom: 2rem;
}
.top-lineup-card__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color_line);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}
.top-lineup-card__spec--call { height: 5rem; border-top: 1px solid var(--color_line); }
.top-lineup-card__spec--type { height: 8rem; }
.top-lineup-card__spec--power { height: 5rem; }
.top-lineup-card__spec-note {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6; /* 19.2 / 12 */
}

/* カード内ボタン（見た目は共通パーツ担当の .btn--4 / .btn--5） */
.top-lineup-card__btns {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.top-lineup-card__btn { width: 100%; }
.top-lineup-card .btn--5 { height: 5rem; }
.top-lineup-card .btn--4 { height: 7rem; }
/* カード内ボタンの文字サイズは Figma 実測に合わせる（btn4/btn5 コンポーネント既定は 16px）。
     製品カード（node 345:1188/1189）：詳細を見る 14px・パンフレット 14px
     WEB版カード（node 490:4535 ほか）：詳細を見る 16px・パンフレット 14px
   セクション外の「製品比較表を見る（PDF）」は 16px のままでカンプどおり。 */
.top-lineup-card .btn--4 { font-size: 1.4rem; }
.top-lineup-card:not(.top-lineup-card--web) .btn--5 { font-size: 1.4rem; }
.top-lineup-card--web .btn--5 { height: 5.2rem; }
/* 「詳細を見る」は Figma では btn5 のインスタンスだが fill を #111111 に上書きしている
   （inspect 06_use_cases.txt: INSTANCE btn5 ... fill=#111111 [style:txt_color]）。
   コンポーネント既定の赤ではなく黒。hover はカンプに無いため濃色ボタン（.btn）と同じ #000。 */
.top-lineup-card .btn--5 { background: var(--color_dark); }
.top-lineup-card .btn--5:hover { background: #323232; } /* 2026-08-20 #000 は #111 との差が見えないため変更 */

/* WEB版カード */
.top-lineup-card__web-lead {
  padding-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}
.top-lineup-card__web-img {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 16.1rem;
  padding-bottom: 2rem;
}
.top-lineup-card__web-img img {
  width: 21rem;
  height: 14.1rem;
}
.top-lineup-card__features {
  margin-bottom: 2rem;
  padding: 1rem;
  background: var(--color_main_light);
}
.top-lineup-card__features-head {
  padding: .3rem 0 .8rem;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  color: var(--color_main);
  text-align: center;
}
.top-lineup-card__feature {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 0; /* border-top 1px と合わせて Figma の 37px */
  border-top: 1px solid #fff;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2; /* 16.8 / 14 */
  letter-spacing: .05em;
  text-align: center;
}

/* --- 製品比較表ボタン --- */
.top-use-cases__compare {
  display: flex;
  justify-content: center;
  padding-bottom: 4rem;
}
.top-use-cases__compare-btn {
  width: 38rem;
  max-width: 100%;
  height: 7.2rem;
}

/* --- 製品一覧／周辺機器への2枚 --- */
.top-use-cases__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.top-product-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 39rem;
  height: 11.2rem;
  padding: 1rem 3rem 1rem 1rem;
  background: #fff;
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .1);
  color: var(--color_dark);
  text-decoration: none;
  transition: var(--transition);
}
/* このカードだけ hover 指定がカンプに無いため、カード系 hover（569:5013）に合わせた */
.top-product-link:hover {
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .1), inset 0 0 0 2px var(--color_main);
}
.top-product-link__img {
  position: relative;
  flex: 0 0 9.2rem;
  height: 9.2rem;
}
.top-product-link__img-main {
  position: absolute;
  left: .6rem;
  top: .7rem;
  width: 3.5rem;
  height: 8.2rem;
  object-fit: cover;
}
.top-product-link__img-sub {
  position: absolute;
  left: 4.1rem;
  top: -.2rem;
  width: 4.6rem;
  height: 9.4rem;
  background-image: url(../images/product_photo_sub.png);
  background-size: 246.91% 120.66%;
  background-position: 51.47% 81.02%;
  background-repeat: no-repeat;
}
.top-product-link__img-square {
  width: 9.2rem;
  height: 9.2rem;
  object-fit: cover;
}
.top-product-link__txt {
  flex: 1 1 auto;
  /* Figma は PC（枠 238×44）・SP（枠 148×44）とも 16px 固定。
     以前は clamp(1.4rem, 1.1111vw, 1.6rem) にしていたが、SP 幅では下限の 14px に
     張り付いてカンプより小さくなっていた（2026-08-01 CEO 指摘）。 */
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}
.top-product-link__sub {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6; /* 19.2 / 12 */
  color: var(--color_muted);
}
.top-product-link .ar {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* XL（1199px 以下）の調整。
   5列の表組みはラベル列 120px ＋ カード 1110px ＝ 内容幅 1230px を必要とし、
   カード幅は固定のため画面が狭くなると縮まずに右へはみ出す。
   そのため、この幅から SP と同じ横スライダーに切り替える（設定・寸法とも SP へそのまま継承）。
   1200〜1456px（Windows・スクロールバー込み。Mac は 1439px まで）の帯は表組みのまま .top-lineup を zoom で縮めて収める（下の --lineup-zoom）。 */
@media (max-width: 1199px) {
  .top-lineup { display: block; padding-bottom: 3rem; }
  .top-lineup__labels { display: none; }
  .top-lineup__cards { display: block; }

  /* 前後ボタン＋ドット（カンプ：ドット y=271・ボタン 52×52 が上下にはみ出す） */
  .top-lineup__nav {
    position: relative;
    display: block;
    height: 1rem;
    margin-bottom: 3rem;
  }
  .top-lineup__dots { display: flex; justify-content: center; }
  .top-lineup__dots .slick-dots {
    position: static;
    display: flex;
    gap: .8rem;
    width: auto;
    margin: 0;
    padding: 0;
  }
  .top-lineup__dots .slick-dots li { width: 1rem; height: 1rem; margin: 0; }
  .top-lineup__dots .slick-dots button {
    display: block;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color_gray);
    font-size: 0;
    color: transparent;
  }
  .top-lineup__dots .slick-dots button::before { display: none; }
  .top-lineup__dots .slick-dots .slick-active button { background: var(--color_main); }

  .top-lineup__arrows .slick-arrow {
    position: absolute;
    top: 50%;
    width: 5.2rem;
    height: 5.2rem;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--color_main) url(../images/challenges_arrow_white.svg) no-repeat center / 2.4rem 2.4rem;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .1);
    font-size: 0;
    color: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1;
  }
  .top-lineup__arrows .slick-arrow::before { display: none; }
  .top-lineup__arrows .slick-prev { left: .5rem; transform: translateY(-50%) rotate(180deg); }
  .top-lineup__arrows .slick-next { right: .5rem; }

  .top-lineup-card { flex: none; }
  .top-lineup-card__body { height: auto; }
  .top-lineup-card__name { height: 6.5rem; }
  .top-lineup-card__model { font-size: 2rem; }
  .top-lineup-card--web .top-lineup-card__model { font-size: 1.6rem; }
  .top-lineup-card__type { font-size: 1.2rem; }
  .top-lineup-card__intro { height: 15.8rem; }
  .top-lineup-card__photo { flex: 0 0 8rem; height: 13rem; }
  .top-lineup-card__icon { width: 5rem; height: 5rem; }
  .top-lineup-card__scene { height: 8rem; margin-bottom: 1rem; }
  .top-lineup-card__scene-head { font-size: 1.2rem; }
  .top-lineup-card__scene-text { font-size: 1.2rem; }
  .top-lineup-card__specs { margin-bottom: 1rem; }
  .top-lineup-card__spec { font-size: 1.2rem; }
  .top-lineup-card__spec--call { height: 4rem; }
  .top-lineup-card__spec--type { height: 7rem; }
  .top-lineup-card__spec--power { height: 4rem; }
  .top-lineup-card .btn--5 { height: 4.9rem; }
  .top-lineup-card .btn--4 { height: 6.6rem; }
  /* SP カンプは製品カード・WEB版カードとも「詳細を見る」「パンフレットを見る（PDF）」が
     12px（PC は製品カード 14px・WEB版の詳細を見る 16px）。太さは PC・SP とも 700 でカンプと同じ。
     PC 用の `.top-lineup-card:not(.top-lineup-card--web) .btn--5` に負けないよう
     同じ強さの指定を並べる（メディアクエリは指定の強さを上げないため）。 */
  .top-lineup-card .btn--4,
  .top-lineup-card .btn--5,
  .top-lineup-card:not(.top-lineup-card--web) .btn--5 { font-size: 1.2rem; }
  .top-lineup-card--web .top-lineup-card__model { font-size: 1.4rem; }
  .top-lineup-card--web .top-lineup-card__type { font-size: 1.4rem; }
  .top-lineup-card__web-lead { font-size: 1.2rem; }
  .top-lineup-card__web-img { height: 11.9rem; }
  .top-lineup-card__web-img img { width: 14.8rem; height: 9.9rem; }
  .top-lineup-card__features { margin-bottom: 1rem; padding: 1.1rem 1rem; }
  .top-lineup-card__features-head { font-size: 1.2rem; }
  .top-lineup-card__feature { padding: .65rem 0; font-size: 1.2rem; }
}

@media (max-width: 768px) {
  /* SP カンプ Figma node 507:4423（375×1375）。製品カードは横スライダー */
  .top-use-cases { padding: 8.2rem .5rem 4rem; }
  .top-use-cases__bg { left: -.5rem; width: calc(100% + 1rem); }
  .top-use-cases__bg-img {
    aspect-ratio: 188 / 111;
    background-size: cover;
    background-position: center;
  }
  .top-use-cases__panel {
    width: 100%;
    max-width: none;
    padding: 4rem 1rem;
  }
  .top-use-cases__sub-br { display: inline; }
  /* 製品ラインアップの横スライダー化とカード各部の寸法は、上の XL ブロックから継承される（ここで重複させない） */

  .top-use-cases__compare { padding-bottom: 2rem; }
  .top-use-cases__compare-btn { width: 30rem; }
  .top-use-cases__links { flex-direction: column; align-items: center; gap: 1rem; }
  .top-product-link { width: 30rem; }
}


/* ==========================================================================
   下半分（find_by_use 〜 contact）
   ========================================================================== */

@charset "UTF-8";
/* =============================================================================
 * top-lower.css — トップページ下部5セクション（下部担当の担当範囲）
 *
 *   .top-find        find_by_use               Figma 26:1222 / 1440×1024
 *   .top-case        case（導入事例）           Figma 18:646  / 1440×891
 *   .top-prospective for_prospective_customers Figma 26:342  / 1440×426
 *   .top-news        news（新着情報）           Figma 26:1224 / 1440×404
 *   .top-contact     contact                   Figma 170:922 / 1440×426
 *
 * ■ SP はカンプ無し・当方設計
 *   上記5セクションには SP カンプが存在しない（案件メモ「トップページ SP のカンプは一部のみ」）。
 *   ヒアリングシートの取り決めが「レスポンシブ対応＝簡易的対応」であるため、
 *   PC カンプの構造をそのまま1カラムへ落とす方針で当方が設計した。
 *   ブレイクポイントはアミッケ共通テーマの実物に合わせ @media (max-width: 768px) のみ。
 *
 * ■ 共通コンポーネントはここでは実装しない（実装契約書 4）
 *   .btn / .btn--2 / .btn--3 / .btn--4 / .btn--5 / .ar 系 / .tag-icon 系 /
 *   .heading-01 / .sub-head は共通パーツ担当が parts-common.css で実装する。
 *   本ファイルは「そのクラスを使う」＋「本セクション内での寸法差だけ上書きする」に留める。
 *
 * ■ 数値の出どころ
 *   すべて figma-dump/inspect/07〜11 の実値。1rem = 10px（html{font-size:62.5%}）。
 *   色: main_color #B80003 / main_color_dark #7C0002 / txt_color #111111 /
 *       base_color #F6F6F6 / base_color2 #F2F2F2 / line_color #EAEAEA / gray #D2D2D2
 *   コンテナ: .section__inner（max-width var(--sectionWidth)=1200px ＋ 左右 padding）。
 *   カンプが 1200px 幅いっぱいに敷くブロックだけ、その padding 分を負マージンで打ち消す。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * find_by_use（レンタル・購入について）
 * -------------------------------------------------------------------------- */
.top-find {
	padding: 8rem 0 10rem; /* Figma pad(80,0,100,0) */
	/* 2枚のカードは出現アニメーションで左右から寄る（data-anim="left" / "right"）。
	   SP はカードが全幅（375px 幅なら左右 20px の余白しか無い）ため、右カードの
	   初期位置 translateX(24px) が画面右へ 4px はみ出し、読み込み直後だけ
	   ページが横に 4px スクロールしていた（2026-08-19 実測・修正）。
	   ここで横方向だけを切り落とす。hidden ではなく clip なのは、hidden にすると
	   overflow-y が auto になり、カード上へせり出す吹き出し（.top-find__balloon）が
	   縦に切れてしまうため。clip は縦を visible のまま残せる唯一の値。 */
	overflow-x: clip;
}

/* 上部リード：レンタルと購入の違いは？（Figma btn_area 1200×110・pad-bottom 40） */
.top-find__lead {
	display: flex;
	justify-content: center;
	padding-bottom: 4rem;
}

.top-find__compare {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 40.9rem; /* Figma 409px 固定 */
	height: 7rem;
	padding: 0 1rem 0 2.6rem; /* 左 30px − border-left 4px */
	background: #fff;
	border-left: 4px solid #B80003;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
	text-decoration: none;
	transition: var(--transition, all .3s ease);
}

.top-find__compare:hover {
	box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.top-find__compare-title {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #111111;
	white-space: nowrap;
}

.top-find__compare-em {
	color: #B80003;
}

.top-find__compare-lg {
	font-size: 2rem; /* Figma 文字単位の上書き（styleOverrideTable 2） */
}

.top-find__compare-note {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #111111;
	white-space: nowrap;
}

.top-find__compare .ar {
	margin-left: auto;
	flex: 0 0 2.4rem;
}

/* カード2枚（Figma wrap 1200×488・pad(30,40,50,40) gap24／中身は 1120px＝section__inner 幅） */
.top-find__cards {
	display: flex;
	gap: 2.4rem;
	padding: 3rem 0 5rem;
}

.top-find__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 2.6rem 2.6rem 3.6rem; /* Figma pad(30,30,40,30) − border 4px */
	background: #fff;
	border: 4px solid #EAEAEA;
}

/* 吹き出し（Figma 388×54 / 335×54・カード上端より 37px 上に出る） */
.top-find__balloon {
	position: absolute;
	bottom: 100%;          /* カードの padding box 上端に下端を合わせる（border 4px 分は含まれない） */
	margin-bottom: -1.3rem; /* カンプは吹き出し下端がカード上端より 13px 内側。行数が増えても上へ伸びる */
	left: 50%;
	transform: translateX(-50%);
	padding: 1.5rem 2.5rem;
	background: #111111;
	border-radius: 5px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #fff;
	text-align: center;
	/* PC カンプは1行（Figma 389/336×54）。max-content で1行幅を保ちつつ、
	   カードが吹き出しより狭くなる中間幅（〜810px）では折り返させる。
	   nowrap のままだと 800px 付近でページ右に 2px はみ出して横スクロールが出る。 */
	width: max-content;
	max-width: 100%;
}

.top-find__balloon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: -1.2rem;
	transform: translateX(-50%);
	border-left: 1.75rem solid transparent;
	border-right: 1.75rem solid transparent;
	border-top: 2.5rem solid #111111; /* Figma Polygon 35×25 */
}

.top-find__card-head {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-bottom: 1.9rem; /* Figma 76px − 内容 56px − border 1px */
	border-bottom: 1px solid #EAEAEA;
	text-decoration: none;
}

.top-find__card-icon {
	flex: 0 0 5.6rem;
	width: 5.6rem;
	height: 5.6rem;
}

.top-find__card-title {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #B80003;
}

.top-find__card-head .ar {
	margin-left: auto;
	flex: 0 0 2.4rem;
}

.top-find__card-head:hover .ar {
	transform: translateX(.4rem);
	transition: var(--transition, all .3s ease);
}

.top-find__tag {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 2rem 0; /* Figma 65px = 20 + タグ 25 + 20 */
}

.top-find__tag-label {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #111111;
	white-space: nowrap;
}

.top-find__tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* li を flex にして行ボックス（body の line-height 1.8）でタグが 25px より高くならないようにする */
.top-find__tag-list li {
	display: flex;
}

.top-find__links {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding-bottom: 2rem;
}

.top-find__links-row {
	display: flex;
	gap: .5rem;
}

/* btn2 は共通コンポーネント（180×60）。ここでは行幅いっぱいに伸ばす。
   共通側の white-space: nowrap のままだと 769〜795px でカードが縮めず
   ページ右へ最大 23px はみ出すため、この2ボタンだけ折り返しを許可する
   （1440px ではボタン幅 241.5px あるので1行のままで見た目は変わらない）。 */
.top-find__links-row .btn--2 {
	width: auto;
	flex: 1;
	white-space: normal;
}

/* btn5 は共通コンポーネント（185×52）。カンプは 240×52 */
.top-find__cta {
	align-self: center;
	width: 24rem;
}

.top-find__foot {
	display: flex;
	justify-content: center;
}

/* -----------------------------------------------------------------------------
 * case（導入事例）
 * -------------------------------------------------------------------------- */
.top-case {
	padding: 8rem 0 10rem; /* Figma pad(80,0,100,0) */
	background: #F6F6F6;
	/* スライダーの「画面幅いっぱい」は 100vw 基準で、100vw は縦スクロールバーの幅を含む。
	   そのぶん（約8px）が画面からはみ出してページが横スクロールしてしまうため、
	   セクションで切り取る。clip は hidden と違いスクロール枠を作らないので
	   ヘッダー追従など他の挙動に影響しない。 */
	overflow-x: clip;
}

/* 事例カテゴリ絞り込み（Figma 1200×98・pad(16,30,10,30)） */
.top-case__filter {
	margin-inline: calc(clamp(2rem, 2.75vw, 4rem) * -1); /* section__inner の左右 padding を打ち消して 1200px にする */
	margin-bottom: 3rem;
	padding: 1.6rem 3rem 1rem;
	background: #F2F2F2;
}

.top-case__filter-lead {
	padding-bottom: 1rem;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #111111;
	text-align: center;
}

.top-case__filter-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-inline: -3rem; /* Figma の list（1183px）は wrap の padding をはみ出して中央寄せされている */
}

/* 事例スライダー（Figma list は 1440px 全幅・中央1枚＋左右がのぞく） */
.top-case__slider {
	position: relative;
	margin-inline: calc(50% - 50vw); /* section__inner から画面幅いっぱいへ抜く */
	overflow: hidden;
}

.top-case__list {
	display: flex;
}

/* JS 未初期化時のフォールバック：1枚目をカンプと同じ位置（中央）に置く */
.top-case__list:not(.slick-initialized) {
	padding-left: calc(50% - 41rem);
}

/* slick-theme.css の .slick-dotted.slick-slider{margin-bottom:30px} を打ち消す（ドット位置は自前で持つ） */
.top-case__list.slick-dotted {
	margin-bottom: 0;
}

.top-case__item {
	flex: 0 0 82rem; /* カード 800px ＋ 左右 10px（カード間 20px） */
	padding: 0 1rem;
}

.top-case__card {
	display: flex;
	gap: 3rem;
	height: 26.3rem;
	padding: 2rem;
	background: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.top-case__thumb {
	flex: 0 0 29rem;
	width: 29rem;
	height: 22.3rem;
	overflow: hidden;
	background: #EAEAEA;
}

.top-case__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top-case__body {
	flex: 1;
	min-width: 0;
	padding-top: 1rem;
}

.top-case__tag {
	display: flex; /* 行ボックスでタグが 25px より高くならないようにする */
	padding-bottom: 1rem;
}

.top-case__head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-bottom: 2rem;
}

.top-case__title {
	flex: 1;
	min-width: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #111111;
}

.top-case__title a {
	text-decoration: none;
}

.top-case__head .ar {
	flex: 0 0 2.4rem;
	margin-top: .2rem;
}

.top-case__text {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: #111111;
}

/* 前後ボタン（Figma 52×52・中央カードの左右外側 16px・スライダー上端から 197px） */
.top-case__arrow {
	position: absolute;
	top: 19.7rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.2rem;
	height: 5.2rem;
	padding: 0;
	background: #B80003;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
	cursor: pointer;
}

/* ホバーの指定がカンプにも CSS にも無く、押せることが分からなかったため
   2026-08-20 に追加。導入事例ページの同じ赤丸矢印（case-common.css 141行）と同じ語彙＝濃い赤。 */
.top-case__arrow {
	transition: var(--transition, all .3s ease);
}

.top-case__arrow:hover {
	background: var(--color_main_dark);
}

.top-case__arrow--prev {
	left: calc(50% - 44.2rem);
}

.top-case__arrow--next {
	right: calc(50% - 44.2rem);
}

.top-case__arrow--prev .ar {
	transform: rotate(180deg);
}

/* ドット（Figma 10×10・gap 8・1つ目だけ #111111） */
.top-case__dots-wrap {
	margin: 2.4rem 0 4rem;
}

.top-case__dots {
	display: flex;
	justify-content: center;
	gap: .8rem;
}

.top-case__dots li,
.top-case__dots button {
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #D2D2D2;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.top-case__dots-item--current,
.top-case__dots .slick-active button {
	background: #111111;
}

/* slick を初期化したら静的ドットは JS 側のドットに任せる */
.top-case:has(.slick-initialized) .top-case__dots--static {
	display: none;
}

.top-case__empty {
	padding: 6rem 0;
	font-size: 1.6rem;
	text-align: center;
}

.top-case__foot {
	display: flex;
	justify-content: center;
}

/* -----------------------------------------------------------------------------
 * for_prospective_customers（ご検討中の方へ / サポート情報）
 * -------------------------------------------------------------------------- */
.top-prospective {
	padding: 8rem 0 10rem; /* Figma pad(80,0,100,0) */
	background: #fff;
}

/* このセクションだけ head_01 の下余白が 50px（他セクションは 16px） */
.top-prospective .heading-01 {
	padding-bottom: 5rem;
}

.top-prospective__list {
	display: flex;
	gap: 2.4rem;
	margin-inline: calc(clamp(2rem, 2.75vw, 4rem) * -1); /* カンプは 1200px 幅 */
}

.top-prospective__item {
	flex: 1;
	min-width: 0;
}

.top-prospective__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 12.2rem;
	padding: 2rem 5rem 2rem 2rem; /* Figma pad(20,50,20,20) */
	background: #fff;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
	text-decoration: none;
	transition: var(--transition, all .3s ease);
}

.top-prospective__link:hover {
	box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

.top-prospective__icon {
	flex: 0 0 8.2rem;
	width: 8.2rem;
	height: 8.2rem;
}

.top-prospective__title {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	color: #111111;
}

.top-prospective__link .ar {
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
}

/* -----------------------------------------------------------------------------
 * column（コラム）
 * カンプ無し・2026-08-19 今村様ご依頼（AUN https://aun.app/je3263 注釈1）で追加。
 * カード本体は column.css の .column-card をそのまま使う。ここは枠と3列だけ持つ。
 * 背景を #fff にしているのは、アイキャッチ未設定時のカード下地が --color_light
 * （#F6F6F6）で、news と同じ #F6F6F6 にすると下地が見えなくなるため。
 * -------------------------------------------------------------------------- */
.top-column {
	padding: 8rem 0 10rem; /* prospective と同じ余白 */
	background: #fff;
}

/* カードが続くため、見出しの下余白は prospective と同じ 50px にそろえる */
.top-column .heading-01 {
	padding-bottom: 5rem;
}

.top-column__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(2rem, 2.78vw, 4rem); /* コラム一覧 .column-list と同値 */
	row-gap: clamp(3rem, 3.47vw, 5rem);
}

.top-column__item {
	min-width: 0; /* 長いタイトルでグリッドの列が広がらないようにする */
}

.top-column__empty {
	font-size: 1.6rem;
	text-align: center;
}

.top-column__foot {
	display: flex;
	justify-content: center;
	margin-top: clamp(3rem, 3.47vw, 5rem);
}

/* -----------------------------------------------------------------------------
 * news（新着情報）
 * -------------------------------------------------------------------------- */
.top-news {
	padding: 0;
	background: #F6F6F6;
}

.top-news__inner {
	display: flex;
	align-items: flex-start;
	max-width: 104rem; /* Figma wrap 1040px */
	margin-inline: auto;
	padding: 8rem 0; /* Figma pad(80,0,80,0) */
}

.top-news__head {
	flex: 0 0 22rem;
	padding: 2rem 6rem 0 0; /* Figma title_btn pad(20,60,0,0) */
}

.top-news__title {
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1.6; /* Figma lh 51.2 */
	letter-spacing: .05em;
	color: #111111;
}

.top-news__label {
	margin-top: .4rem;
	font-family: "Roboto", sans-serif;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .1em;
	color: #B80003;
}

/* btn4 は共通コンポーネント（185×52）。カンプは 160×52 */
.top-news .btn--4 {
	width: 16rem;
	margin-top: 4rem;
}

/* 幅の基準は Figma の 820px。769〜1069px の中間幅では .section__inner の内側が
   1040px を下回るため、縮む側（shrink 1）にしておく。0 0 のままだと右へはみ出して
   ページ全体に横スクロールが出る（1024px で実測 +44px）。 */
.top-news__list {
	flex: 0 1 82rem;
	min-width: 0;
	padding-top: 2.5rem;
	border-top: 1px solid #EAEAEA;
}

.top-news__item {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 0 2rem 2.4rem; /* Figma 51px − 内容 26px − border 1px */
	border-bottom: 1px solid #EAEAEA;
	text-decoration: none;
}

.top-news__item + .top-news__item {
	margin-top: 2rem;
}

.top-news__date {
	flex: 0 0 10rem;
	font-family: "Roboto", sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: #B80003;
}

.top-news__item-title {
	flex: 1;
	min-width: 0;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	color: #111111;
	text-decoration: underline;
}

.top-news__item:hover .top-news__item-title {
	text-decoration: none;
}

.top-news__empty {
	font-size: 1.6rem;
}

/* -----------------------------------------------------------------------------
 * contact
 * -------------------------------------------------------------------------- */
.top-contact {
	padding: 8rem 0; /* Figma pad(80,276,80,276) の上下 */
	background: linear-gradient(90deg, #DA3106, #B80003); /* Figma cta_gr（handles 0,0.5 → 1,0.5） */
	color: #fff;
}

.top-contact__inner {
	display: flex;
	align-items: center;
	gap: 10rem;
	max-width: 100rem; /* Figma 実配置 220〜1220px */
	min-height: 26.6rem; /* Figma title-wrap 266px（セクション 426 − 上下 padding 160） */
	margin-inline: auto;
}

.top-contact__intro {
	flex: 0 0 30rem;
	align-self: stretch; /* カンプは左カラムだけ上寄せ（266px 枠の上端 80px から始まる） */
}

.top-contact__label {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.top-contact__label-mark {
	flex: 0 0 1.4rem;
	width: 1.4rem;
	height: 1.4rem;
	border: 3px solid #fff;
	border-radius: 50%;
}

.top-contact__title {
	font-family: "Roboto", sans-serif;
	font-size: 6rem;
	font-weight: 700;
	line-height: 1.4; /* Figma lh 84 */
	letter-spacing: 0;
}

.top-contact__point {
	display: block;
	width: 6.8rem;
	height: .4rem;
	margin: 2rem 0;
	background: #fff;
}

.top-contact__tel-label {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
}

.top-contact__tel {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.top-contact__tel-icon {
	flex: 0 0 3.2rem;
	width: 3.2rem;
	height: 3.2rem;
}

.top-contact__tel a {
	font-family: "Roboto", sans-serif;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1.4; /* Figma lh 47.6 */
	letter-spacing: .05em;
	text-decoration: none;
}

.top-contact__hours {
	margin-top: .8rem;
	padding: .7rem; /* Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
	border: 1px solid #EAEAEA;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .05em;
}

/* news と同じ理由で縮む側にする（1024px で右へ +4px はみ出していた） */
.top-contact__btns {
	display: flex;
	flex-direction: column;
	flex: 0 1 60rem;
	min-width: 0;
	gap: 2rem;
}

.top-contact__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 12rem;
	box-shadow: 0 10px 30px rgba(134, 13, 8, .3);
	text-decoration: none;
	transition: var(--transition, all .3s ease);
}

.top-contact__btn--rental {
	background: #7C0002;
	color: #fff;
}

.top-contact__btn--inquiry {
	background: #fff;
	color: #B80003;
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.top-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.top-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.top-contact__btn-icon {
	position: absolute;
	top: 50%;
	left: 4rem;
	transform: translateY(-50%);
	width: 6.4rem;
	height: 6.4rem;
}

.top-contact__btn-txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem;
	text-align: center;
}

.top-contact__btn-main {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
}

.top-contact__btn-sub {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
}

.top-contact__btn .ar {
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
}

/* =============================================================================
 * SP（カンプ無し・当方設計／PC 構造を1カラムへ落とす）
 * ========================================================================== */
@media (max-width: 768px) {

	/* find_by_use ----------------------------------------------------------- */
	.top-find {
		padding: 6rem 0 8rem;
	}

	.top-find__compare {
		width: 100%;
		height: auto;
		padding: 1.6rem 1rem 1.6rem 2.6rem;
		flex-wrap: wrap;
	}

	.top-find__compare-title,
	.top-find__compare-note {
		white-space: normal;
	}

	.top-find__cards {
		flex-direction: column;
		gap: 6rem;
		padding: 3rem 0 4rem;
	}

	.top-find__card {
		padding: 2.6rem 1.6rem 3.6rem;
	}

	.top-find__balloon {
		width: max-content;
		max-width: 100%;
		padding: 1.2rem 2rem;
		/* 1行に収める（2026-08-01 CEO 指示）。最長の「消毒・検品済みですぐにご利用頂けます！」は
		   15px だと 299px 必要で入る幅が 287px しかなく折り返していた。14px なら 279px で収まる。 */
		font-size: 1.4rem;
		white-space: normal;
	}

	.top-find__card-head {
		gap: 1.2rem;
	}

	.top-find__tag {
		flex-direction: column;
		align-items: flex-start;
		gap: .8rem;
	}

	.top-find__links-row {
		flex-direction: column;
	}

	/* 縦並びでは flex: 1 が高さ方向に効き、ボタンの高さ（60px）が 22px に潰れるため伸縮を止める */
	.top-find__links-row .btn--2 {
		flex: none;
	}

	.top-find__cta {
		width: 100%;
	}

	/* case ------------------------------------------------------------------ */
	.top-case {
		padding: 6rem 0 8rem;
	}

	.top-case__filter {
		margin-inline: 0;
		padding: 1.6rem 1.6rem 1rem;
	}

	.top-case__filter-list {
		margin-inline: 0;
	}

	/* 横に複数枚並ぶ帯。カード1枚が狭くなるので隙間を詰め、見出しと本文を1段下げる
	   （1枚表示に戻る 519px 以下では下の mq でカンプの値に戻す） */

	/* 本文の行数でカードの高さが変わり、横に並べたとき不揃いになる。
	   スライダーのトラックを flex にして、各カードを最も高いカードに合わせる。 */
	.top-case__list .slick-track {
		display: flex;
		align-items: stretch;
	}

	.top-case__item {
		flex: 0 0 auto; /* トラックを flex にしたため、slick が各スライドに付ける幅を活かす */
		height: auto;
		padding: 0 .8rem;
	}

	.top-case__title {
		font-size: 1.6rem;
	}

	.top-case__text {
		font-size: 1.3rem;
	}

	.top-case__list:not(.slick-initialized) {
		padding-left: 0;
	}

	.top-case__card {
		flex-direction: column;
		gap: 1.6rem;
		height: 100%; /* 上の stretch で揃ったスライドの高さいっぱいに広げる */
		padding: 1.6rem;
	}

	/* 高さを固定すると、カード幅が広い帯（768px 付近）で 3.4:1 の極端な横長になり、
	   写真を入れると object-fit: cover で上下が大きく切れる。カンプの写真比（279×200）で持つ。 */
	.top-case__thumb {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		aspect-ratio: 279 / 200;
	}

	.top-case__body {
		padding-top: 0;
	}

	/* 縦積みでは矢印がカードの内側に入るため、カード下端に置くと本文に重なり、
	   下のドットとも近接する。カードの縦中央（＝写真の中）に置いて本文・ドットから離す。 */
	.top-case__arrow {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.top-case__arrow--prev {
		left: 1rem;
	}

	.top-case__arrow--next {
		right: 1rem;
	}

	.top-case__dots-wrap {
		margin: 2rem 0 3rem;
	}

	/* for_prospective_customers --------------------------------------------- */
	.top-prospective {
		padding: 6rem 0 8rem;
	}

	.top-prospective .heading-01 {
		padding-bottom: 3rem;
	}

	.top-prospective__list {
		flex-direction: column;
		gap: 1.6rem;
		margin-inline: 0;
	}

	.top-prospective__link {
		height: auto;
		min-height: 10rem;
		padding: 1.6rem 4.4rem 1.6rem 1.6rem;
	}

	.top-prospective__icon {
		flex: 0 0 6.4rem;
		width: 6.4rem;
		height: 6.4rem;
	}

	/* column ---------------------------------------------------------------- */
	.top-column {
		padding: 6rem 0 8rem;
	}

	.top-column .heading-01 {
		padding-bottom: 3rem;
	}

	.top-column__list {
		grid-template-columns: 1fr;
	}

	/* news ------------------------------------------------------------------ */
	.top-news__inner {
		flex-direction: column;
		padding: 6rem 0;
	}

	.top-news__head {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 0 2.4rem;
	}

	.top-news .btn--4 {
		margin-top: 2rem;
	}

	.top-news__list {
		flex: 0 0 auto;
		width: 100%;
	}

	.top-news__item {
		flex-direction: column;
		align-items: flex-start;
		gap: .4rem;
		padding: 0 0 1.6rem;
	}

	.top-news__item + .top-news__item {
		margin-top: 1.6rem;
	}

	.top-news__date {
		flex: 0 0 auto;
	}

	/* 他セクションの見出し（.heading-01）と文字サイズを揃える（2026-08-01 CEO 指示）。
	   SP の .heading-01 は見出し 18px・英字ラベル 10px。 */
	.top-news__title {
		font-size: 1.8rem;
	}

	.top-news__label {
		font-size: 1rem;
	}

	/* contact --------------------------------------------------------------- */
	.top-contact {
		padding: 6rem 0;
	}

	.top-contact__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 4rem;
	}

	.top-contact__intro,
	.top-contact__btns {
		flex: 0 0 auto;
		width: 100%;
	}

	.top-contact__title {
		font-size: 4.4rem;
	}

	.top-contact__tel a {
		font-size: 2.8rem;
	}

	.top-contact__hours {
		font-size: 1.2rem;
	}

	.top-contact__btn {
		height: auto;
		min-height: 10rem;
		padding: 2rem 4.4rem 2rem 8.8rem;
	}

	.top-contact__btn-icon {
		left: 1.6rem;
		width: 5.6rem;
		height: 5.6rem;
	}

	.top-contact__btn-main {
		/* 1行に収める（2026-08-01 CEO 指示）。最長の「お問い合わせ・見積相談」は
		   19px だと 219px 必要で入る幅が 203px しかなく折り返していた。17px なら 196px で収まる。 */
		font-size: 1.7rem;
	}

	.top-contact__btn-sub {
		font-size: 1.3rem;
		line-height: 1.4;
	}

	.top-contact__btn .ar {
		right: 1.2rem;
	}
}

/* =============================================================
   導入事例スライダーが1枚表示に戻る帯（519px 以下）
   ============================================================= */
@media (max-width: 519px) {
	/* 1枚表示ではカードが画面幅いっぱいになるため、写真が大きくなりすぎないよう
	   カードに最大幅を持たせて中央に置く。文字も SP カンプの値に戻す。 */
	.top-case__item {
		padding: 0 1.6rem;
	}

	.top-case__card {
		max-width: 34rem;
		margin-inline: auto;
	}

	.top-case__title {
		font-size: 2rem;
	}

	.top-case__text {
		font-size: 1.6rem;
	}
}