@charset "UTF-8";

/* ============================================================
   製品紹介ページ（product.html）固有のスタイル
   画面設計「iCG Website-0927」の web-Product.jpg が視覚基準。
   共通部品は common.css にある。
   ============================================================ */

/* 横組みの本文（導入文・Everyday・Smart Equipment x Data で共通の字組み） */
.p-intro__body,
.everyday__body,
.data-band__body {
  font-size: 21px;
  line-height: 2.6;
  letter-spacing: .12em;
  color: var(--c-ink-body);
}

/* ============================================================
   ヒーロー
   ============================================================ */
.p-hero {
  position: relative;
  isolation: isolate;
}

.p-hero__photo {
  width: 100%; height: 543px;
  object-fit: cover; object-position: 50% 50%;
}

/* 写真の左下に重ねる半透明の白い箱。デザイン画では画面の左端から始まり、
   内容の左端から584pxの位置で終わる（1440px幅で 0〜668px）。
   幅と字下げの % はヒーロー（包含ブロック）の幅を基準にしている。 */
.p-hero__panel {
  position: absolute;
  left: 0; bottom: 44px;
  width: calc((100% - min(100%, var(--container))) / 2 + var(--gutter) + 584px);
  height: 280px;
  padding-top: 18px;
  padding-left: calc((100% - min(100%, var(--container))) / 2 + var(--gutter) + 13px);
  background: rgba(255, 255, 255, .7); /* デザイン画の実測で不透明度約0.7 */
}

.p-hero__title {
  font-family: var(--font-mincho);
  font-size: 52px;
  font-weight: 600;
  line-height: 80px;
  letter-spacing: .04em;
  /* デザイン画は仮名と約物を詰めた組版（「動くための」の字間が詰まっている） */
  font-feature-settings: "palt";
  color: var(--c-blue);
  white-space: nowrap;
}

/* ============================================================
   導入文（右寄せの1段）
   ============================================================ */
.p-intro { padding-top: 30px; }

.p-intro__body {
  width: 636px;
  max-width: 100%;
  margin-left: auto;
}

.p-intro__key {
  display: block;
  margin-block: 8px 2px;
  font-family: var(--font-mincho);
  font-size: 38px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: .08em;
  color: var(--c-green);
}

/* ============================================================
   Everyday Life Fitness
   ============================================================ */
.everyday { padding-top: 13px; }

.everyday__grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  align-items: end;
}

.everyday__head {
  position: relative;
  display: inline-block;
  padding-left: 91px; /* 見出しの左端は内容の左端より右（デザイン画の位置） */
}
.everyday__watermark { left: -96px; top: -26px; }

.everyday__title {
  font-family: var(--font-en);
  /* デザイン画の Minion 系より Georgia のほうが字幅が広いので、行の長さを合わせて少し小さくする */
  font-size: 70px;
  font-weight: 700;
  line-height: 88px;
  letter-spacing: -.01em;
  color: var(--c-blue);
}

.everyday__sub {
  margin-top: 21px;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: right;
  color: var(--c-ink-body);
}

.everyday__body {
  max-width: 620px;
  margin-top: 50px;
  padding-left: 11px;
}

.everyday__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-left: 17px;
}

.everyday__mascot {
  flex: 0 0 auto;
  width: auto;
  height: 352px; /* 透過の余白込み。絵の部分がデザイン画の高さ（約335px）になる */
  margin-bottom: -5px;
  /* デザイン画では足元に淡い影がある（素材の PNG には無いので CSS で足す） */
  filter: drop-shadow(0 12px 6px rgba(0, 0, 0, .08));
}

.everyday__phrase {
  flex: 0 0 auto;
  width: 435px; /* 透過の余白込み。文字の部分がデザイン画の幅（約347px）になる */
  margin-left: -74px;
  margin-bottom: 63px;
}

/* ============================================================
   iCareGym Smart Fitness Product（葉と空の帯＋製品の一覧）
   ============================================================ */
.lineup { margin-top: 56px; }

.lineup__band {
  height: 432px;
  padding-top: 105px;
}

.lineup__title {
  font-size: 70px; /* Georgia の字幅に合わせて小さめにしている（Everyday の見出しと同じ理由） */
  line-height: 84px;
  letter-spacing: .005em;
}
.lineup__head .section-title__ja {
  margin-top: 9px;
  font-size: 30px;
  letter-spacing: .04em;
}

/* 1006版で追加された「店舗検索」。設計図の実測で 308×49px、説明文の下端から約55px。 */
.lineup__actions { margin-top: 55px; display: flex; justify-content: center; }
.lineup__actions .btn { min-width: 308px; min-height: 49px; font-size: 22px; letter-spacing: .16em; }

/* 製品の一覧。矢印は script.js が、はみ出しているときだけ表示する。
   about.css のお客様の声も同じ .carousel の名前で別の見た目にしているため、どちらも区画（.lineup／.voice）で限る
   （WordPress の編集画面は全ページの CSS を同時に読み込む）。 */
.lineup .carousel {
  position: relative;
  margin-top: 18px;
}

.lineup .carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.lineup .carousel__track::-webkit-scrollbar { display: none; }

.lineup .carousel__arrow {
  position: absolute;
  top: 179px; /* 写真の上下中央より少し下（デザイン画の位置） */
  z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  transform: translateY(-50%);
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--c-blue);
  cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease;
}
.lineup .carousel__arrow .icon { width: 36px; height: 36px; stroke-width: 1.6; }
.lineup .carousel__arrow:hover { background: var(--c-panel-alt); }
.lineup .carousel__arrow--prev { left: -14px; }
.lineup .carousel__arrow--next { right: -14px; }
/* 製品が収まっている幅では、位置だけ確保して隠す（JS が data-hidden を付ける） */
.lineup .carousel__arrow[data-hidden="true"] { visibility: hidden; }
.lineup .carousel__arrow:disabled { opacity: .3; cursor: default; background: transparent; }

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  text-align: center;
}

.product__photo { width: 304px; }

.product__title {
  margin-top: 16px;
  font-size: 23px;
  font-weight: 700;
  line-height: 43.5px;
  letter-spacing: .12em;
  color: var(--c-blue);
}

.product__desc {
  font-size: 22px;
  line-height: 43.5px;
  letter-spacing: .2em;
  color: var(--c-ink-body);
}

/* ============================================================
   Smart Equipment x Data（写真の上に見出しと本文）
   ============================================================ */
.data-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 72px;
}

.data-band__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  /* デザイン画では写真が少し大きく、人物とアイコンが左上に寄っている（実測で約1.06倍） */
  transform: scale(1.06);
  transform-origin: 92% 100%;
}

/* デザイン画では写真の左側（特に左下）が白く飛んでいて、本文が読みやすくなっている */
.data-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 55% 80% at 0% 100%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
              linear-gradient(to right,
              rgba(255, 255, 255, .65) 0%,
              rgba(255, 255, 255, .45) 28%,
              rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.data-band__inner {
  min-height: 582px;
  padding-top: 23px;
}

.data-band__title {
  padding-left: 18px;
  font-family: var(--font-en);
  font-size: 58px; /* Georgia の字幅に合わせて小さめにしている */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--c-blue);
}

.data-band__body {
  margin-top: 13px;
  padding-left: 15px;
}

/* ============================================================
   中間幅（1025〜1399px）：デザインの寸法のままだと横幅が足りない箇所を縮める
   ============================================================ */
@media (max-width: 1399px) {
  /* 英文の画像は右の余白へはみ出して置いているので、画面の右端を越えないよう縮める */
  .everyday__mascot { height: 300px; }
  .everyday__phrase { width: 360px; margin-left: -60px; margin-bottom: 52px; }
}

/* ============================================================
   中間幅（1025〜1279px）続き
   ============================================================ */
@media (max-width: 1279px) {
  .everyday__grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .everyday__head { padding-left: 40px; }
  .everyday__body { padding-left: 0; }
  .everyday__art { padding-left: 0; }
  .everyday__mascot { height: 260px; }
  .everyday__phrase { width: 250px; margin-bottom: 56px; }

  .p-hero__title { font-size: 46px; line-height: 72px; }
}

/* ============================================================
   タブレット（1024px 以下）
   ============================================================ */
@media (max-width: 1024px) {
  .p-intro__body,
  .everyday__body,
  .data-band__body { font-size: 17px; line-height: 2.2; letter-spacing: .08em; }

  /* ヒーロー：見出しを写真の下に置く（HOME と同じ方針） */
  .p-hero__photo { height: clamp(240px, 40vw, 400px); object-position: 70% 50%; }
  .p-hero__panel {
    position: static;
    width: auto; height: auto;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-6) var(--gutter) 0;
    background: none;
  }
  .p-hero__title {
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.5;
    white-space: normal;
  }

  .p-intro { padding-top: var(--sp-5); }
  .p-intro__body { width: auto; max-width: 40em; margin-left: 0; }
  .p-intro__key { margin-block: var(--sp-2); font-size: clamp(22px, 3.4vw, 32px); line-height: 1.6; }

  /* Everyday：見出し・本文・マスコットを縦積みに */
  .everyday { padding-top: var(--sp-8); }
  .everyday__grid { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .everyday__head { padding-left: 0; }
  .everyday__watermark { left: -40px; }
  .everyday__title { font-size: clamp(40px, 6vw, 60px); line-height: 1.2; }
  .everyday__sub { font-size: 20px; }
  .everyday__body { max-width: 40em; margin-top: var(--sp-5); }
  .everyday__art { justify-content: center; }
  .everyday__mascot { height: 220px; margin-bottom: 0; }
  .everyday__phrase { width: 240px; margin-bottom: 40px; }

  .lineup { margin-top: var(--sp-7); }
  .lineup__band { height: auto; padding-block: var(--sp-8); }
  .lineup__title { font-size: clamp(30px, 5.4vw, 56px); line-height: 1.25; }
  .lineup__head .section-title__ja { margin-top: var(--sp-2); font-size: clamp(18px, 2.4vw, 26px); }

  .lineup .carousel__track { grid-auto-columns: 50%; }
  .lineup .carousel__arrow { top: 140px; }
  .lineup .carousel__arrow--prev { left: -12px; }
  .lineup .carousel__arrow--next { right: -12px; }
  .product__photo { width: min(240px, 80%); }
  .product__title { font-size: 19px; line-height: 1.8; }
  .product__desc { font-size: 16px; line-height: 1.9; letter-spacing: .08em; }

  /* Smart Equipment x Data：本文を写真の上に、写真を下に */
  .data-band { display: flex; flex-direction: column; margin-top: var(--sp-8); }
  .data-band__photo { position: static; order: 1; height: clamp(220px, 42vw, 420px); transform: none; }
  .data-band::after { display: none; }
  .data-band__inner { min-height: 0; padding-top: 0; padding-bottom: var(--sp-6); }
  .data-band__title { padding-left: 0; font-size: clamp(30px, 5.4vw, 56px); }
  .data-band__body { margin-top: var(--sp-3); padding-left: 0; }
}

/* ============================================================
   スマートフォン（767px 以下）
   ============================================================ */
@media (max-width: 767px) {
  .p-intro__body,
  .everyday__body,
  .data-band__body { font-size: 16px; }

  .p-hero__photo { height: clamp(220px, 60vw, 320px); object-position: 72% 50%; }

  .everyday__mascot { height: 170px; }
  .everyday__phrase { width: min(200px, 50vw); margin-left: -8px; margin-bottom: 28px; }

  /* 1件ずつ送る。両端の矢印と重ならないよう、写真を少し小さくする */
  .lineup .carousel__track { grid-auto-columns: 100%; }
  .lineup .carousel__arrow { top: 110px; }
  .product__photo { width: min(220px, 64%); }

  /* 狭い幅では、意図した改行で1行が画面からはみ出すので外す */
  .data-band__body br { display: none; }
}

/* 動きを減らす設定では、製品一覧の送りもアニメーションさせない
   （common.css の同じ指定は html のスクロールだけが対象で、一覧には効かないため） */
@media (prefers-reduced-motion: reduce) {
  .lineup .carousel__track { scroll-behavior: auto; }
}