@charset "UTF-8";

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

/* ============================================================
   ヒーロー
   ============================================================ */
.hero {
  position: relative;
  display: grid;
  isolation: isolate;
}
.hero > * { grid-area: 1 / 1; }

.hero__photo img {
  width: 100%; height: 535px;
  object-fit: cover; object-position: 50% 40%;
}

/* 右側を白く飛ばして縦組み見出しの可読性を確保（デザイン画の雰囲気に合わせる） */
.hero__scrim {
  background: linear-gradient(to left,
              rgba(255, 255, 255, .9) 0%,
              rgba(255, 255, 255, .82) 18%,
              rgba(255, 255, 255, .45) 30%,
              rgba(255, 255, 255, 0) 42%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-end;
  align-items: flex-start;
}

.hero__copy {
  writing-mode: vertical-rl;
  margin-top: -86px; /* ヘッダー右側の余白へ食い込ませ、デザイン画の位置に合わせる */
  margin-right: 10px;
}

.hero__title {
  font-family: var(--font-mincho);
  font-size: 76px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: .1em;
  white-space: nowrap;
}

.hero__lead {
  /* 縦組みでは block 方向が左向きなので、見出しの左隣に並ぶ */
  margin-block-start: 4px;
  padding-top: 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--c-blue);
}

/* ============================================================
   A Century of Quality Living（縦組みの本文）
   ============================================================ */
.century { padding-block: 82px 90px; }

.century__layout {
  margin-top: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 横スクロールの向きを縦組みにそろえ、右端（本文の書き出し）を始点にする。
   ltr のままだと初期位置が左端になり、script.js の送りボタン（左へ送る）が動かない。
   また justify-content: center ではみ出すと、左端（本文の終わり）がスクロールで
   届かない位置に出てしまうため、中央寄せは本文の auto マージンで行う
   （flex のアイテムの auto マージンは、はみ出すと 0 になり始点にそろう）。 */
.century__scroller {
  display: flex;
  direction: rtl;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--sp-3);
}
.century__scroller:focus-visible { outline-offset: 6px; }

.century__body {
  writing-mode: vertical-rl;
  direction: ltr; /* スクロール要素の rtl を引き継がず、縦組みの字の進む向きを上から下に保つ */
  flex: 0 0 auto;
  margin-inline: auto;
  width: max-content;
  /* 1列20字で折り返す（デザイン画の列の長さ） */
  max-height: 425px;
  font-size: 20px;
  line-height: 2.15;
  letter-spacing: .06em;
  color: var(--c-ink-body);
}
.century__body > * + * { margin-block-start: 22px; }

.century__lead {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .02em;
}

.century__body > .century__closing {
  margin-block-start: 24px;
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .02em;
}

.century__mascot {
  flex: 0 0 auto;
  width: auto;
  height: 300px;
  /* 見出し1列目（「人生百年を、」）の下の空きに少し重ねる（デザイン画の配置） */
  margin-left: -24px;
  margin-bottom: -36px;
}

/* 本文がはみ出しているときだけ出る送りボタン */
.tategaki-hint {
  display: block;
  margin: var(--sp-4) auto 0;
  padding: 6px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-blue);
  color: #fff;
  font-size: 13px;
  letter-spacing: .3em;
  cursor: pointer;
  transition: background-color .18s ease;
}
.tategaki-hint:hover { background: var(--c-blue-hover); }
.tategaki-hint[hidden] { display: none; }

.century__actions {
  margin-top: 64px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4) 66px;
}
.century__actions .btn { min-width: 144px; }

/* ============================================================
   About iCareGym（葉と空の帯）
   ============================================================ */
.intro { padding-block: 44px 56px; }

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 490px) minmax(0, 1fr);
  column-gap: 30px;
  align-items: start;
}

.intro__head {
  position: relative;
  justify-self: start;
  padding-top: 10px;
}
.intro__watermark { left: -96px; top: -40px; }

.intro__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
  color: var(--c-blue);
}
.intro__about { font-size: 58px; padding-left: 4px; }
.intro__brand { margin-top: 6px; font-size: 84px; letter-spacing: -.005em; }

.intro__sub {
  margin-top: 18px;
  font-size: 28px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: right;
  color: var(--c-ink-body);
}

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

.intro__lead {
  margin-bottom: 14px;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--c-green);
}
.intro__kana { font-family: var(--font-mincho); font-weight: 600; color: var(--c-blue); }

.intro__body strong {
  font-family: var(--font-mincho);
  font-size: 26px;
  line-height: 1; /* 大きい字で行の高さが伸びないようにする */
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c-blue);
}

/* ============================================================
   Find the Right Way for You（2つの利用スタイル）
   ============================================================ */
.ways { padding-block: 54px 72px; }

.ways__list {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 540px));
  justify-content: center;
  column-gap: 136px;
  row-gap: var(--sp-8);
}

.way {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.way__photo {
  width: 90%;
  aspect-ratio: 486 / 328;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.way__title {
  margin-top: 50px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--c-blue);
}

.way__desc {
  max-width: 490px; /* デザイン画の折り返し位置に合わせた幅 */
  margin-top: 6px;
  /* 下端をそろえるため、短い説明文のカードでは余白がここで伸びる */
  margin-bottom: auto;
  font-size: 19px;
  line-height: 2.3;
  letter-spacing: .1em;
  color: var(--c-ink-body);
}

.way__button {
  margin-top: 50px;
  min-height: 50px;
  font-size: 18px;
}

/* ============================================================
   縦組みの本文を縮める幅（1399px 以下）
   字の大きさと列の長さを同じ比率で縮め、1列20字を保ったまま横幅を収める。
   ============================================================ */
@media (max-width: 1399px) {
  .century__body { font-size: 18px; max-height: 383px; }
  .century__lead, .century__body > .century__closing { font-size: 25px; }
  .century__mascot { height: 260px; }
}
@media (max-width: 1199px) {
  .century__body { font-size: 16px; max-height: 341px; }
  .century__lead, .century__body > .century__closing { font-size: 22px; }
  .century__mascot { height: 220px; }
}

/* ============================================================
   中間幅（1025〜1279px）：デザインの寸法のままだと横幅が足りない箇所を縮める
   ============================================================ */
@media (max-width: 1279px) {
  .hero__title { font-size: 64px; }
  .hero__lead { font-size: 26px; }
  .hero__copy { margin-top: -96px; }

  .ways__list { column-gap: 64px; }
  .intro__brand { font-size: 72px; }
}

/* ============================================================
   タブレット（1024px 以下）
   ============================================================ */
@media (max-width: 1024px) {
  /* ヒーロー：縦組みをやめて横組みに */
  .hero { display: block; }
  .hero__photo img { height: clamp(240px, 40vw, 400px); }
  .hero__scrim { display: none; }

  .hero__inner { display: block; padding-block: var(--sp-6) 0; }
  .hero__copy {
    writing-mode: horizontal-tb;
    display: block;
    margin: 0;
  }
  .hero__title { font-size: clamp(32px, 5.4vw, 52px); letter-spacing: .04em; line-height: 1.4; white-space: normal; }
  .hero__lead { margin-top: var(--sp-3); font-size: clamp(16px, 2.4vw, 22px); line-height: 1.7; white-space: normal; }

  /* A Century：横組みに */
  .century { padding-block: var(--sp-8); }
  .century__layout { display: block; position: relative; margin-top: var(--sp-6); }
  .century__scroller { overflow: visible; }
  .century__body {
    writing-mode: horizontal-tb;
    /* 縦組み時の flex:0 0 auto を解除しないと、狭い画面で横はみ出しが起きる */
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-height: none;
    max-width: 40em;
    margin-inline: auto;
    font-size: 17px;
    line-height: 2;
  }
  .century__body > * + *,
  .century__body > .century__closing { margin-block-start: var(--sp-4); }
  .century__lead, .century__body > .century__closing { font-size: 24px; line-height: 1.6; }
  .century__body .upright { text-orientation: mixed; }
  .tategaki-hint { display: none; }

  .century__mascot { display: block; height: 180px; margin: var(--sp-5) 0 0 auto; }
  .century__actions { margin-top: var(--sp-6); gap: var(--sp-4) var(--sp-6); }

  /* About：見出しと本文を縦積みに */
  .intro { padding-block: var(--sp-8); }
  .intro__grid { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .intro__watermark { left: -40px; }
  .intro__about { font-size: 44px; }
  .intro__brand { font-size: 64px; }
  .intro__sub { font-size: 20px; }
  .intro__body { padding-top: 0; font-size: 17px; }
  .intro__lead { font-size: 34px; }
  .intro__body strong { font-size: 22px; }
  .intro__body br { display: none; }

  /* Find the Right Way：2列のまま縮める */
  .ways { padding-block: var(--sp-7) var(--sp-8); }
  .ways__list { margin-top: var(--sp-6); column-gap: var(--sp-6); }
  .way__photo { width: 100%; }
  .way__title { margin-top: var(--sp-5); font-size: 21px; }
  .way__desc { font-size: 16px; line-height: 2; }
  .way__desc br { display: none; }
  .way__button { margin-top: var(--sp-5); font-size: 16px; }
}

/* ============================================================
   スマートフォン（767px 以下）
   ============================================================ */
@media (max-width: 767px) {
  .hero__photo img { height: clamp(200px, 56vw, 300px); }
  .hero__title { font-size: clamp(28px, 8vw, 38px); }

  .century { padding-block: var(--sp-7); }
  .century__body { font-size: 16px; }
  .century__lead, .century__body > .century__closing { font-size: 21px; }
  .century__mascot { height: 140px; }

  .intro { padding-block: var(--sp-7); }
  .intro__about { font-size: 36px; }
  .intro__brand { font-size: 52px; }
  .intro__body { font-size: 16px; }
  .intro__lead { font-size: 28px; }

  .ways__list { grid-template-columns: minmax(0, 540px); row-gap: var(--sp-8); }
}