@charset "UTF-8";

/* ============================================================
   「iCareGymについて」ページ固有のスタイル（画面設計「iCG Website-0927」版）
   共通部品は common.css にある。寸法は web-ABOUT.jpg（幅4267px）を
   1440px 幅のデスクトップとして実測したもの（実寸 ÷ 約2.96）。
   ============================================================ */

/* ============================================================
   ヒーロー
   ============================================================ */
.about-hero { position: relative; }

.about-hero__photo {
  width: 100%;
  aspect-ratio: 1440 / 627;
  object-fit: cover;
  /* 素材は 3:2。横幅いっぱいに敷いて上下を切り、二人の顔と右の焼き込み文字が収まる位置にする */
  object-position: 50% 66%;
}

/* 左上の半透明の白帯。下の五重塔がぼんやり透けて見えるデザイン。 */
.about-hero__band {
  position: absolute;
  left: 0;
  top: 6.7%;
  width: 37%;
  height: 47.5%;
  display: flex;
  align-items: center;
  padding-left: min(6vw, var(--page-max) * .06); /* 1440px（--page-max）より広い画面では広げない */
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.about-hero__title {
  font-family: var(--font-mincho);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
}
.about-hero__brand {
  margin-right: .25em;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0;
}

/* ============================================================
   2段ずらしの英文見出し（Brand Story・Customer Voice）
   1行目は左寄せ、2行目と日本語の小見出しは右寄せにする。
   ============================================================ */
.stagger-title {
  position: relative;
  isolation: isolate; /* 透かし文字（z-index:-1）を見出しの背後にとどめる */
  display: inline-grid;
  justify-items: start;
}
.stagger-title__en {
  display: grid;
  font-family: var(--font-en);
  font-size: clamp(40px, 4.8vw, 70px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .005em;
}
.stagger-title__line { justify-self: start; }
.stagger-title__line--end { justify-self: end; padding-left: 1.6em; }
.stagger-title__ja {
  justify-self: end;
  margin-top: 6px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--c-ink-body);
}

/* ============================================================
   Brand Story
   ============================================================ */
.story { padding-block: 92px 76px; }

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 531px) minmax(0, 700px);
  align-items: start;
}

.story__head { justify-self: start; padding-left: 96px; }
.story__watermark { left: -90px; top: -60px; }

.story__body {
  padding-top: 112px;
  font-feature-settings: "palt"; /* 横組みの本文は約物を詰めた組版（HOME と同じ） */
  font-size: 20px;
  line-height: 2.15;
  letter-spacing: .2em;
  color: var(--c-ink-body);
}

.story__lead {
  margin-block: 18px 14px;
  font-family: var(--font-mincho);
  font-size: 31px;
  font-weight: 600;
  line-height: 2.2;
  letter-spacing: .24em;
}

/* ============================================================
   iCareGym の考え方（寿命から、健康寿命へ。）
   背景は葉と空の帯。デザイン画では帯が見出しより下から始まるので、
   common.css の .leaves-band の背景を下側だけに敷き直す。
   ============================================================ */
.philosophy { padding-block: 76px 70px; }
.philosophy.leaves-band::before {
  top: 230px;
  bottom: 0;
}

.philosophy__watermark { right: -70px; top: 10px; }

.philosophy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 438px);
  grid-template-areas: "main side";
  align-items: start;
}

.philosophy__main { grid-area: main; padding: 70px 0 0 53px; }
.philosophy__side { grid-area: side; }

.philosophy__title {
  font-family: var(--font-en);
  font-size: clamp(40px, 4.8vw, 70px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-blue);
}
.philosophy__sub {
  margin-top: 4px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--c-ink-body);
}

.philosophy__mascot { width: 256px; margin: 52px 0 0 59px; }

.philosophy__lead {
  font-family: var(--font-mincho);
  font-size: 60px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .15em;
}

.philosophy__body {
  margin-top: 24px;
  font-feature-settings: "palt";
  font-size: 21px;
  line-height: 2.6;
  letter-spacing: .2em;
  color: var(--c-ink-body);
}

/* ============================================================
   Our Belief
   ============================================================ */
.belief { padding-block: 10px 110px; }

.belief__list {
  max-width: 1330px;
  margin: 58px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: var(--sp-7);
}

.belief__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.belief__icon { width: 121px; height: 121px; }
.belief__text {
  margin-top: 14px;
  font-size: 20px;
  line-height: 2.15;
  letter-spacing: .2em;
  color: var(--c-ink-body);
}

/* ============================================================
   Technology is not the Goal
   ============================================================ */
.technology { padding-bottom: 92px; }

.technology__visual {
  position: relative;
  isolation: isolate;
  margin-top: 40px;
  min-height: 360px;
  display: flex;
  align-items: center;
}

/* 写真は右寄せで敷き、左側を白に溶かして本文を載せる */
.technology__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: -2;
  width: 81.4%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
}
.technology__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #fff 18.6%, rgba(255, 255, 255, .55) 33%, rgba(255, 255, 255, 0) 46%);
}

.technology__body {
  padding: 40px 0 40px 51px;
  font-feature-settings: "palt";
  font-size: 21px;
  line-height: 2.6;
  letter-spacing: .2em;
  color: var(--c-ink-body);
}

/* ============================================================
   Global Market Experience
   地図・特許ボックス・マスコットは、デスクトップでは設計図の配置を
   ステージ（幅に比例して縮む箱）の中に % で再現する。文字の大きさも
   cqw（ステージ幅に対する割合）で指定し、配置と一緒に縮むようにする。
   ============================================================ */
.global { padding-bottom: 130px; }

.global__stage {
  position: relative;
  container-type: inline-size;
  width: calc(100% - var(--gutter) * 2);
  max-width: 1300px;
  margin: 6px auto 0;
  aspect-ratio: 3856 / 1624;
}

.global__map {
  position: absolute;
  left: 0; top: 11.1%;
  width: 75.2%;
  container-type: inline-size; /* 国ラベルの文字は地図の幅に対する cqw で指定する */
}
.global__map-image { width: 100%; }

/* 点と引き出し線。SVG は地図画像と同じ比率の viewBox なので、地図と一緒に伸び縮みする。 */
/* 点と線の箱は地図画像と同じ比率に固定する（地図画像の高さに合わせるため） */
.global__lines,
.global__dots {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 2900 / 1444;
  pointer-events: none;
}
.global__lines { overflow: visible; }
.global__lines polyline { fill: none; stroke: #262042; stroke-width: 4; }

/* 点は HTML で置く。大きさは地図の幅に比例。 */
.global__dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: max(6px, .76cqw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #262042;
}

/* 特許ライセンス情報 */
.patent {
  position: absolute;
  left: 71.4%; top: 61.9%;
  width: 28.6%;
  height: 25.7%;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 0 1.6cqw 0 1.8cqw;
  border-radius: 1.2cqw;
  background: var(--c-blue);
  color: #fff;
}
.patent__medal { flex: 0 0 auto; width: 4.4cqw; height: auto; }
.patent__ribbon { fill: #e9a630; }
.patent__rosette { fill: #f2b13f; }
.patent__ring { fill: none; stroke: #fff; stroke-width: 1.2; stroke-dasharray: 1.4 1.6; opacity: .9; }

.patent__text { flex: 1 1 auto; min-width: 0; text-align: center; }
.patent__title {
  padding-bottom: .6cqw;
  margin-inline: .6cqw;
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  font-size: 1.4cqw;
  line-height: 1.5;
  letter-spacing: .14em;
}
.patent__number {
  margin-top: .8cqw;
  font-size: 1.45cqw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.patent__name {
  margin-top: .3cqw;
  font-size: 1.08cqw;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.global__mascot {
  position: absolute;
  left: 80.7%; top: 0;
  width: 15.6%;
}

/* ============================================================
   Customer Voice
   ============================================================ */
.voice { padding-block: 0 80px; }

/* 見出しの右端と動画の並びを設計図の位置に合わせるため、このセクションだけ容器を広げる */
.voice .container { max-width: 1420px; }

.voice__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 836px);
  column-gap: 60px;
  align-items: center;
}

.voice__head { justify-self: end; padding-top: 20px; }
.voice__watermark { left: -150px; top: -70px; }

/* カルーセル：矢印｜横スクロールする列｜矢印。product.css の製品一覧も同じ .carousel の名前で別の見た目に
   しているため、この区画（.voice）に限る（WordPress の編集画面は全ページの CSS を同時に読み込む）。 */
.voice .carousel {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  column-gap: 27px;
}

.voice .carousel__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 56px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-blue);
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
}
.voice .carousel__arrow .icon { width: 32px; height: 32px; stroke-width: 1.8; }
.voice .carousel__arrow:hover:not(:disabled) { color: var(--c-blue-hover); }
/* 送り先が無いとき。デザイン画では2件とも見えているが、押せないことは見た目で伝える。 */
.voice .carousel__arrow:disabled { opacity: .3; cursor: default; }

.voice .carousel__track {
  display: flex;
  gap: 38px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* 矢印での送り（script.js の共通カルーセル処理）をアニメーションさせる */
  scrollbar-width: none;
  /* 横スクロールの列は縦方向もはみ出しを切るため、動画ボタンの外側に出るフォーカス枠
     （common.css の :focus-visible、3px＋間隔2px）が欠ける。内側に6pxの余白を取って枠を収め、
     同じだけ外へ広げて、見た目の位置・カード幅・送り幅は変えない。 */
  padding: 6px;
  margin: -6px;
  scroll-padding-inline: 6px;
}
.voice .carousel__track::-webkit-scrollbar { display: none; }

.voice .carousel__item {
  flex: 0 0 calc((100% - 38px) / 2);
  scroll-snap-align: start;
}

.voice-video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
}
.voice-video img {
  width: 100%;
  aspect-ratio: 368 / 247;
  object-fit: cover;
  transition: transform .3s ease, filter .3s ease;
}
.voice-video:hover img { transform: scale(1.03); filter: brightness(.96); }

/* YouTube 風の赤い再生ボタン。2枚目の素材に焼き込まれた再生マークをちょうど覆う大きさにしてある。 */
.voice-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 21%;
  aspect-ratio: 68 / 48;
  border-radius: 22% / 30%;
  background: #e8203a;
  color: #fff;
  transition: transform .25s ease, background-color .25s ease;
}
.voice-video__play svg { width: 46%; height: 64%; fill: currentColor; margin-left: 6%; }
.voice-video:hover .voice-video__play { transform: translate(-50%, -50%) scale(1.08); background: #f0273f; }

/* ============================================================
   中間幅（1025〜1279px）：デザインの寸法のままだと横幅が足りない箇所を縮める
   ============================================================ */
@media (max-width: 1279px) {
  .story__head { padding-left: 40px; }
  .story__lead { font-size: 27px; letter-spacing: .18em; }
  .story__body { font-size: 18px; letter-spacing: .14em; }

  .philosophy__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .philosophy__main { padding-left: 20px; }
  .philosophy__lead { font-size: 50px; }
  .philosophy__body { font-size: 18px; letter-spacing: .14em; }
  .philosophy__mascot { width: 220px; margin-left: 30px; }

  .belief__text { font-size: 17px; letter-spacing: .12em; }
  .technology__body { font-size: 18px; letter-spacing: .14em; }

  .voice__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 700px); column-gap: 32px; }
}

/* ============================================================
   タブレット（1024px 以下）
   ============================================================ */
@media (max-width: 1024px) {
  /* 改行位置はデスクトップの組版に合わせたものなので、幅が変わる画面では外す */
  .story__body br,
  .philosophy__body br,
  .technology__body br { display: none; }

  .about-hero__band { width: 46%; padding-left: 5vw; }
  .about-hero__title { font-size: clamp(26px, 4.6vw, 44px); }

  /* Brand Story：見出しと本文を縦積みに */
  .story { padding-block: var(--sp-8); }
  .story__grid { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .story__head { padding-left: var(--sp-6); }
  .story__watermark { left: -36px; }
  .story__body { padding-top: 0; font-size: 17px; letter-spacing: .1em; line-height: 2; }
  .story__lead { font-size: clamp(22px, 3.4vw, 27px); letter-spacing: .12em; line-height: 1.8; }
  /* 強調文だけは意味の切れ目で改行したいので <br> を残す */
  .story__lead br { display: inline; }

  /* 考え方：見出し → 大見出しと本文 → マスコットの順に縦積み */
  .philosophy { padding-block: var(--sp-8); }
  .philosophy.leaves-band::before { top: 160px; }
  .philosophy__watermark { right: -40px; }
  .philosophy__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head head"
      "main mascot";
    row-gap: var(--sp-6);
    column-gap: var(--sp-5);
  }
  .philosophy__side { display: contents; }
  .philosophy__head { grid-area: head; justify-self: end; }
  .philosophy__mascot { grid-area: mascot; align-self: end; width: 160px; margin: 0; }
  .philosophy__main { padding: 0; }
  .philosophy__lead { font-size: clamp(32px, 5.4vw, 46px); }
  .philosophy__body { font-size: 17px; letter-spacing: .1em; line-height: 2.2; }
  .philosophy__lead br { display: inline; }

  /* Our Belief：3＋2 の2段に */
  .belief { padding-bottom: var(--sp-8); }
  .belief__list { margin-top: var(--sp-7); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .belief__item { grid-column: span 2; }
  .belief__item:nth-child(4) { grid-column: 2 / span 2; }
  .belief__icon { width: 104px; height: 104px; }
  .belief__text { font-size: 16px; letter-spacing: .1em; line-height: 1.9; }

  /* Technology */
  .technology { padding-bottom: var(--sp-8); }
  .technology__visual { margin-top: var(--sp-6); min-height: 300px; }
  .technology__photo { width: 100%; object-position: 60% 78%; }
  .technology__visual::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .75) 55%, rgba(255, 255, 255, .1) 85%);
  }
  .technology__body { padding: var(--sp-6) 0; font-size: 17px; letter-spacing: .1em; line-height: 2.1; max-width: 32em; }

  /* Global：地図を全幅にし、特許ボックスとマスコットはその下に並べる */
  .global { padding-bottom: var(--sp-8); }
  .global__stage {
    aspect-ratio: auto;
    margin-top: var(--sp-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "map map"
      "patent mascot";
    align-items: end;
    column-gap: var(--sp-5);
    row-gap: var(--sp-4);
  }
  .global__map {
    grid-area: map;
    position: relative;
    left: auto; top: auto;
    width: 100%;
  }
  /* 特許ボックスが地図の下に回るので、日本からの線と点は隠す */
  .global__line--patent,
  .global__dot--patent { display: none; }

  .patent {
    grid-area: patent;
    position: static;
    width: auto;
    max-width: 440px;
    height: auto;
    justify-self: end;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 14px;
  }
  .patent__medal { width: 44px; }
  .patent__title { padding-bottom: 6px; margin-inline: 0; font-size: 16px; }
  .patent__number { margin-top: 8px; font-size: 17px; }
  .patent__name { margin-top: 2px; font-size: 13px; white-space: normal; }

  .global__mascot { grid-area: mascot; position: static; width: 130px; }

  /* Customer Voice：見出しの下にカルーセル */
  .voice { padding-bottom: var(--sp-8); }
  .voice__grid { grid-template-columns: 1fr; row-gap: var(--sp-6); }
  .voice__head { justify-self: start; padding-left: var(--sp-6); }
  .voice__watermark { left: -36px; }
}

/* ============================================================
   スマートフォン（767px 以下）
   ============================================================ */
@media (max-width: 767px) {
  /* ヒーロー：写真は素材の比率のまま全体を見せ、見出しは写真の下に置く */
  .about-hero__photo { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .about-hero__band {
    position: static;
    width: auto;
    height: auto;
    padding: var(--sp-5) var(--gutter) 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .about-hero__title { font-size: clamp(26px, 8vw, 34px); }

  .story { padding-block: var(--sp-7); }
  .story__head { padding-left: var(--sp-4); }
  .story__body { font-size: 16px; letter-spacing: .06em; }
  .story__lead { font-size: clamp(18px, 5.4vw, 22px); letter-spacing: .06em; }

  .philosophy { padding-block: var(--sp-7); }
  .philosophy.leaves-band::before { top: 120px; }
  .philosophy__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "main"
      "mascot";
  }
  .philosophy__head { justify-self: start; }
  .philosophy__mascot { justify-self: end; width: 120px; }
  .philosophy__body { font-size: 16px; letter-spacing: .06em; }

  /* Our Belief：2列 */
  .belief__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); row-gap: var(--sp-6); }
  .belief__item,
  .belief__item:nth-child(4) { grid-column: auto; }
  .belief__item:last-child { grid-column: 1 / -1; }
  .belief__icon { width: 88px; height: 88px; }
  .belief__text { font-size: 15px; letter-spacing: .04em; }

  .technology__visual { min-height: 0; }
  .technology__body { font-size: 16px; letter-spacing: .06em; }

  /* Global：地図・特許ボックス・マスコットを縦に並べる */
  .global__stage { grid-template-columns: 1fr; grid-template-areas: "map" "patent" "mascot"; }
  /* 特許ボックスが地図の下に回るので、引き出し線は隠す */
  .global__lines { display: none; }
  .patent { justify-self: stretch; max-width: none; gap: 12px; padding-inline: 16px; }
  .patent__medal { width: 36px; }
  .patent__name { font-size: 12px; } /* 「システム」の途中で折り返さない大きさ（320px 幅でも1行に収まる） */
  .global__mascot { justify-self: end; width: 110px; margin-top: calc(var(--sp-6) * -1); }

  .voice { padding-bottom: var(--sp-7); }
  .voice__head { padding-left: var(--sp-4); }
  /* 1件ずつ見せ、次の件が少し覗くようにして横に送れることを示す */
  .voice .carousel { grid-template-columns: 32px minmax(0, 1fr) 32px; column-gap: 6px; }
  .voice .carousel__arrow { width: 32px; }
  .voice .carousel__arrow .icon { width: 26px; height: 26px; }
  .voice .carousel__track { gap: 14px; }
  .voice .carousel__item { flex-basis: 88%; }
  .voice-video { border-radius: 16px; }
}

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