@charset "UTF-8";

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

/* ============================================================
   ヒーロー
   ============================================================ */
.studio-hero img {
  width: 100%;
  height: 543px;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ============================================================
   STUDIO（導入）
   ============================================================ */
.studio-intro {
  position: relative;
  isolation: isolate; /* 透かし文字（z-index: -1）をこの区画の中に閉じ込める */
  padding-block: 84px 0;
}

.studio-intro__grid {
  display: grid;
  /* 見出しの右端と本文の左端の位置がデザイン画に合うよう、1列目の幅を固定する */
  grid-template-columns: 368px minmax(0, 1fr);
  column-gap: 95px;
  align-items: start;
}

.studio-intro__head {
  position: relative;
  padding-top: 42px;
}
/* 設計図では「i」が画面の左端にかかる位置。共通の透かしより一回り小さい。 */
.studio-intro__watermark { left: -90px; top: -14px; font-size: 266px; }

.studio-intro__title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-weight: inherit;
}
.studio-intro__en {
  font-family: var(--font-en);
  font-size: 74px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-blue);
}
.studio-intro__ja {
  margin-top: 16px;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: .1em;
  color: var(--c-ink-body);
}

.studio-intro__body {
  font-feature-settings: "palt"; /* デザイン画の横組み本文は約物を詰めた組版 */
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: .17em;
  color: var(--c-ink-body);
}
.studio-intro__body > p + p { margin-top: 22px; }

.studio-intro__body > .studio-intro__lead {
  margin-bottom: 12px;
  font-family: var(--font-mincho);
  font-size: 58px;
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: .06em;
  color: var(--c-blue);
}

/* ============================================================
   iCareGym 7 STEP（1006版）
   写真と説明を組にした2列のグリッド。寸法は1006版の設計図の実測（1440px 幅換算）。
   左の列は写真が x150〜400・文が x400 から、右の列は写真が x770〜1030・文が x1068 から。
   ============================================================ */
.steps {
  --steps-orange: #f09400;  /* ピン（設計図の実測値。共通の --c-orange より赤みが強い） */
  --steps-ink:    #201814;  /* 説明文（印刷物のような濃い墨色） */
  position: relative;
  isolation: isolate;
  padding-block: 175px 56px;
  font-feature-settings: "palt"; /* 図版の文字は約物を詰めた組版 */
}
/* 上部だけの葉と空の帯（共通の .leaves-band と同じ画像を、下へ向けて白に溶かす） */
.steps::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 560px;
  z-index: -1;
  background: #f4f8fb url("assets/bg-leaves.jpg") center top / cover no-repeat;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
          mask-image: linear-gradient(to bottom, #000 45%, transparent);
}

.steps__head { text-align: center; }
.steps__title {
  font-family: var(--font-en);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--c-blue);
}
.steps__title .is-green { white-space: nowrap; }
.steps__sub {
  margin-top: 10px;
  font-size: 27px;
  line-height: 1.4;
  letter-spacing: .08em;
  color: #545454;
}

/* 7件と操作動画のボタンを同じグリッドに並べる（ol は display: contents） */
.steps__grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 44px;
}
.steps__list { display: contents; }

/* 1件：左に写真、右にピン・見出し・説明 */
.step {
  display: grid;
  grid-template-columns: var(--photo-col, 250px) minmax(0, 1fr);
  grid-template-areas:
    "photo pin"
    "photo title"
    "photo desc";
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding-left: var(--cell-pad, 66px);
}
.step:nth-child(even) { --photo-col: 298px; --cell-pad: 50px; --pin-offset: 81px; }

/* 設計図では写真が文の塊より上下に少しはみ出しているので、写真で行の高さが決まらないよう上下に負の余白を付ける */
.step__photo {
  grid-area: photo;
  align-self: center;
  justify-self: start;
  width: var(--photo-w, 250px);
  height: auto;
  margin-block: -36px;
}
.step--2 { --photo-w: 255px; }
.step--3 { --photo-w: 232px; }
.step--4 { --photo-w: 236px; }
.step--5 { --photo-w: 262px; }
.step--6 { --photo-w: 299px; }
.step--6 .step__photo { margin-left: -22px; } /* 設計図では x748 から。文の左端（x1068）に掛からないよう左へ出す */

/* ピン（オレンジの雫型に白い円と番号）。中心は左の列で文の左端から約71px、右の列で約117px（設計図の実測） */
.step__pin {
  grid-area: pin;
  position: relative;
  isolation: isolate;
  justify-self: start;
  width: 72px;
  height: 90px;
  margin-left: var(--pin-offset, 35px);
  display: grid;
  place-items: start center;
  padding-top: 16px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: #3c3838;
  font-feature-settings: normal;
}
.step__pin::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  width: 72px;
  height: 72px;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg) scale(.96);
  transform-origin: 50% 50%;
  background: radial-gradient(circle, #fff 0 51%, var(--steps-orange) 52%);
}

.step__title {
  grid-area: title;
  margin-top: 14px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--c-blue);
}
.step__note {
  margin-left: 2px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--steps-ink);
}
/* 見出しの下の、両端が消えていく青い線（説明文のある件だけ） */
.step__title::after {
  content: "";
  display: block;
  width: calc(100% + 24px);
  max-width: 280px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(to right,
    rgba(20, 104, 180, 0), rgba(20, 104, 180, .9) 20%, rgba(20, 104, 180, .9) 65%, rgba(20, 104, 180, 0));
}
.step--1 .step__title::after { display: none; }

.step__desc {
  grid-area: desc;
  align-self: start;
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--steps-ink);
}

/* 7件目は写真が無く、ピン・見出し・説明を、ピンの中心（文の左端から約71px）を軸に中央揃えにする */
.step--7 {
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas: ". pin" ". title" ". desc";
  justify-items: start;
}
.step--7 .step__pin,
.step--7 .step__title,
.step--7 .step__desc {
  justify-self: start;
  width: 320px;
  margin-left: -89px;
  text-align: center;
}
.step--7 .step__pin { width: 72px; margin-left: 35px; }
.step--7 .step__title::after { margin-inline: auto; }

/* 操作動画のボタン：7件目の隣のマス。設計図では x905〜1228、高さ約52px */
.steps__actions {
  align-self: center;
  margin-top: 78px; /* 設計図では7件目の見出しの高さ（中央より約40px下） */
  padding-left: 185px;
}
.steps__button {
  min-width: 323px;
  min-height: 52px;
  padding-inline: 20px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .04em;
  font-feature-settings: normal;
}

/* ============================================================
   通うたびに、自分の変化が見えてくる。
   ============================================================ */
.studio-change {
  padding-block: 96px 74px;
  font-feature-settings: "palt"; /* 見出しも本文も約物とかなを詰めた組版 */
}

.studio-change__grid {
  display: grid;
  grid-template-columns: 467px minmax(0, 1fr);
  align-items: start;
}

.studio-change__title {
  padding-left: 14px;
  font-family: var(--font-mincho);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.46;
  letter-spacing: .16em;
  white-space: nowrap;
}

.studio-change__body {
  padding-top: 4px;
  font-size: 25px;
  line-height: 1.6;
  letter-spacing: .17em;
  color: var(--c-ink-body);
}

.plus-list {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 385px auto;
  row-gap: 12px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .12em;
}
.plus-list li::before {
  content: "+";
  margin-right: .45em;
}
.studio-change__body > .plus-list + p { margin-top: 30px; letter-spacing: .22em; }

/* ============================================================
   CTA
   ============================================================ */
.studio-cta {
  --cta-bg: #d2ecf9; /* 設計図の実測値。写真（studio-cta.jpg）もこの色の上に合成してある */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 592px;
  background: var(--cta-bg);
}

/* 写真は帯の右側に、1440px 幅のときの位置（左端 644px）を中央基準で保つ */
.studio-cta__photo {
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% - 76px);
  width: 793px;
  max-width: none;
}

.studio-cta__inner { padding-block: 52px 40px; }

.studio-cta__title {
  padding-left: 12px;
  font-family: var(--font-mincho);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: .04em;
  color: var(--c-blue);
}

.studio-cta__text {
  margin-top: 10px;
  padding-left: 12px;
  font-feature-settings: "palt";
  font-size: 21px;
  line-height: 1.95;
  letter-spacing: .17em;
  color: var(--c-ink-body);
}

.studio-cta__actions {
  margin-top: 36px;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
/* 1006版では2つのボタンが同じ幅（設計図の実測で約310×48px） */
.studio-cta__actions .btn {
  min-width: 310px;
  min-height: 48px;
  padding-inline: 24px;
  font-size: 21px;
  letter-spacing: .1em;
}

/* ============================================================
   シニア会員にもたらすメリット（1006版で追加）
   寸法は設計図の実測（1440px 幅換算）。左の列はアイコンの中心が x245・文が x320 から、
   右の列はアイコンの中心が x870・文が x945 から。
   ============================================================ */
.studio-merit { padding-block: 76px 55px; }
.studio-merit__title {
  font-family: var(--font-mincho);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-align: center;
  color: var(--c-blue);
}
.studio-merit__list {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 40px;
}
.studio-merit__item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding-left: 101px;
}
.studio-merit__item:nth-child(even) { padding-left: 90px; }
.studio-merit__icon { justify-self: center; height: auto; }
.studio-merit__item p {
  font-size: 22px;
  line-height: 2.2;
  letter-spacing: .12em;
  color: var(--c-ink-body);
}

/* ============================================================
   中間幅（1399px 以下）
   ============================================================ */
@media (max-width: 1399px) {
  .studio-intro__grid { grid-template-columns: 320px minmax(0, 1fr); column-gap: 64px; }
  .studio-intro__body { font-size: 19px; letter-spacing: .12em; }
  .studio-intro__body > .studio-intro__lead { font-size: 50px; }

  .studio-change__grid { grid-template-columns: 400px minmax(0, 1fr); }
  .studio-change__title { font-size: 48px; }
  .plus-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }

  .studio-cta__title { font-size: 46px; }
  .studio-cta__photo { left: auto; right: 0; width: min(793px, 56vw); }
}

/* ============================================================
   タブレット（1024px 以下）：7 STEP は縦の一覧に切り替える
   ============================================================ */
@media (max-width: 1024px) {
  .studio-hero img { height: auto; aspect-ratio: 2880 / 1087; }

  .studio-intro { padding-top: 48px; }
  .studio-intro__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .studio-intro__head { padding-top: 0; justify-self: start; }
  .studio-intro__watermark { left: -60px; top: -30px; font-size: 180px; }
  .studio-intro__title { align-items: flex-start; }
  .studio-intro__en { font-size: 56px; }
  .studio-intro__ja { margin-top: 8px; font-size: 20px; }
  .studio-intro__body { font-size: 17px; letter-spacing: .08em; line-height: 1.9; }
  .studio-intro__body > p + p { margin-top: 8px; }
  .studio-intro__body > .studio-intro__lead { margin-bottom: 20px; font-size: 40px; }

  /* 7 STEP：2列のまま、写真を小さくして文の幅を確保する。7件目は写真が無いので中央揃え */
  .steps { padding-top: 56px; }
  .steps::before { height: 420px; }
  .steps__title { font-size: 44px; }
  .steps__sub { font-size: 20px; }
  .steps__grid { margin-top: 36px; column-gap: 24px; row-gap: 36px; }
  .step,
  .step:nth-child(even) { --photo-col: 170px; --cell-pad: 0px; --pin-offset: 0px; column-gap: 16px; }
  .steps .step__photo { width: 100%; max-width: 170px; }
  .step--6 .step__photo { margin-left: 0; }
  .step__pin { width: 56px; height: 70px; padding-top: 11px; font-size: 26px; }
  .step__pin::before { width: 56px; height: 56px; }
  .step__title { margin-top: 8px; font-size: 20px; }
  .step__title::after { width: 100%; } /* 狭い幅では見出しより右へ伸ばさない（画面からはみ出すため） */
  .step__note { font-size: 14px; }
  .step__desc { margin-top: 8px; font-size: 16px; }
  .step__break { display: none; }
  .step--7 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pin" "title" "desc"; justify-items: center; }
  .step--7 .step__pin,
  .step--7 .step__title,
  .step--7 .step__desc { justify-self: center; width: auto; margin-left: 0; }
  .step--7 .step__pin { width: 56px; }
  .steps__actions { margin-top: 0; padding-left: 0; justify-self: center; }
  .steps__button { min-width: 0; min-height: 50px; padding-inline: 28px; font-size: 18px; }

  .studio-change { padding-block: 64px 56px; }
  .studio-change__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .studio-change__title { padding-left: 0; font-size: 40px; letter-spacing: .1em; }
  .studio-change__body { padding-top: 0; font-size: 18px; letter-spacing: .08em; }
  .studio-change__body > .plus-list + p { letter-spacing: .08em; }
  .plus-list { font-size: 21px; row-gap: 10px; }

  /* CTA：文と写真を縦に積む */
  .studio-cta { min-height: 0; display: flex; flex-direction: column; }
  .studio-cta__inner { padding-block: 48px 32px; }
  .studio-cta__title,
  .studio-cta__text,
  .studio-cta__actions { padding-left: 0; }
  .studio-cta__title { font-size: 40px; }
  .studio-cta__text { margin-top: 16px; font-size: 17px; letter-spacing: .08em; line-height: 1.9; }
  .studio-cta__actions { margin-top: 28px; gap: 16px; }
  .studio-cta__actions .btn { min-width: 260px; min-height: 46px; padding-inline: 26px; font-size: 18px; letter-spacing: .1em; }

  .studio-merit { padding-block: 56px 44px; }
  .studio-merit__title { font-size: 36px; letter-spacing: .08em; }
  .studio-merit__list { margin-top: 36px; column-gap: 24px; row-gap: 28px; }
  .studio-merit__item,
  .studio-merit__item:nth-child(even) { grid-template-columns: 96px minmax(0, 1fr); padding-left: 0; }
  .studio-merit__icon { max-width: 88px; }
  .studio-merit__item p { font-size: 18px; line-height: 1.9; letter-spacing: .06em; }
  .studio-cta__photo {
    position: static;
    order: 2;
    align-self: flex-end;
    width: min(793px, 100%);
  }
}

/* ============================================================
   スマートフォン（767px 以下）
   ============================================================ */
@media (max-width: 767px) {
  .studio-intro__en { font-size: 44px; }
  .studio-intro__ja { font-size: 17px; }
  .studio-intro__body { font-size: 15px; }
  .studio-intro__body > .studio-intro__lead { font-size: 30px; letter-spacing: .04em; }

  .steps { padding-top: 44px; }
  .steps::before { height: 320px; }
  .steps__title { font-size: 34px; }
  .steps__sub { font-size: 17px; }
  .steps__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .step,
  .step:nth-child(even) { --photo-col: 130px; column-gap: 14px; }
  .steps .step__photo { max-width: 130px; }
  .step__title { font-size: 18px; }
  .step__desc { font-size: 15px; }
  .steps__button { font-size: 16px; padding-inline: 24px; letter-spacing: .04em; }

  .studio-change__title { font-size: 30px; letter-spacing: .06em; }
  .studio-change__body { font-size: 15px; letter-spacing: .04em; }
  .studio-change__body > .plus-list + p { letter-spacing: .04em; }
  .plus-list { grid-template-columns: 1fr; font-size: 18px; letter-spacing: .06em; }

  .studio-cta__title { font-size: 30px; }
  .studio-cta__text { font-size: 15px; }
  .studio-cta__text br { display: none; } /* 狭い幅では自然に折り返す */
  .studio-cta__actions .btn { min-width: 0; font-size: 16px; letter-spacing: .06em; }

  .studio-merit__title { font-size: 24px; letter-spacing: .04em; } /* 390px 幅で見出しが1行に収まる大きさ */
  .studio-merit__list { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .studio-merit__item,
  .studio-merit__item:nth-child(even) { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; }
  .studio-merit__icon { max-width: 64px; }
  .studio-merit__item p { font-size: 16px; line-height: 1.8; letter-spacing: .04em; }
}

/* 最小幅 320px でも破綻しないための微調整 */
@media (max-width: 359px) {
  .studio-cta__title { font-size: 26px; }
  .studio-merit__title { font-size: 19px; letter-spacing: 0; }
}