/* ===== PAGE SHELL (TOP限定：左右レール付き3カラムグリッド) ===== */
.page-top {
  display: grid;
  grid-template-columns: 83px 1fr 83px;
}
.page-top > header { grid-column: 1 / -1; grid-row: 1; }
.page-top > .rail { grid-row: 2; }
.page-top > .rail-left { grid-column: 1; border-left: none; }
.page-top > .rail-right { grid-column: 3; border-right: none; }
.page-top > .content { grid-column: 2; grid-row: 2; }
.page-top > .cta { grid-column: 1 / -1; grid-row: 3; }

/* ===== RAIL（縦書きの帯） ===== */
.rail {
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 16px 0;
  contain: size;
}
.rail span {
  font-family: "Forum", serif;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.content {
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  min-width: 0;
}

/* ===== HERO ===== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 82px 0 42px;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  max-width: 1207px;
  min-width: 0;
  padding: 0;
}
.hero-inner h1 {
  font-family: "Forum", serif;
  font-weight: 400;
  font-size: 250px;
  line-height: 222px;
  margin: 0;
  color: var(--ink);
}
.hero-flex {
  display: flex;
  align-items: flex-end;
  gap: 21px;
  width: 100%;
  max-width: 1207px;
  min-width: 0;
}
.highlight-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 602px;
  min-width: 0;
}
.highlight-block .mark {
  background: var(--accent);
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 48px;
  color: var(--ink);
}
.highlight-block .mark.line1 { width: 100%; max-width: 365px; height: 72px; line-height: 48px; }
.highlight-block .mark.line2 { width: 100%; max-width: 596px; height: 76px; line-height: 76px; justify-content: center; }
.en-desc {
  font-family: "Forum", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 44px;
  max-width: 584px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
}
.for-business {
  font-family: "Albert Sans", sans-serif;
  font-weight: 400;
  font-size: 100px;
  line-height: 68px;
  width: 100%;
  max-width: 1207px;
  min-width: 0;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
}
.divider {
  border: none;
  border-top: 1px solid var(--ink);
  width: 100%;
  max-width: 1274px;
  margin: 82px 0 0;
}

/* ===== CARDS ===== */
.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 27px;
  padding: 130px 0 190px;
  filter: drop-shadow(0px 4px 39.6px rgba(0,0,0,0.1));
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  gap: 20px;
  width: 380px;
  height: 550px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(52,50,50,0.25) 100%);
  border-radius: 56px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 901px) {
  .card:hover {
    transform: translateY(-8px);
    border: 2px solid var(--accent);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
}
.card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 244px;
  height: 150px;
}
.card-head h2 {
  font-family: "Forum", serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 60px;
  text-align: center;
  margin: 0;
  color: var(--ink);
}
.card-head .tagline {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  margin: 0;
  color: var(--ink);
}
.card figure {
  width: 200px;
  height: 200px;
  margin: 0;
  background: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card figure svg,
.card figure img { width: 100%; height: 100%; }
.card-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 320px;
  height: 100px;
}
.card-foot .desc {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  margin: 0;
  color: var(--ink);
}
.card-foot .freq {
  font-family: "Forum", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  color: #FFFFFF;
}

/* ===== TABLET (901px〜1400px：PC構成のまま、900px時点/1400px時点の値をclamp()で滑らかに接続) ===== */
@media (min-width: 901px) and (max-width: 1400px) {
  .cards { flex-wrap: wrap; }

  .hero-inner { padding: 0 40px; }
  .hero-inner h1 {
    font-size: clamp(74px, calc(-242.8px + 35.2vw), 250px);
    line-height: clamp(77.7px, calc(-182.04px + 28.86vw), 222px);
  }
  .highlight-block .mark {
    font-size: clamp(25px, calc(-16.4px + 4.6vw), 48px);
    padding: 4px 10px;
  }
  .highlight-block .mark.line1,
  .highlight-block .mark.line2 {
    width: auto;
    height: auto;
    max-width: none;
    line-height: 1.3;
    white-space: nowrap;
  }
  .en-desc {
    font-size: clamp(18px, calc(-21.6px + 4.4vw), 40px);
    line-height: clamp(28.8px, calc(1.44px + 3.04vw), 44px);
  }
  .for-business {
    font-size: clamp(30px, calc(-96px + 14vw), 100px);
    line-height: clamp(36px, calc(-21.6px + 6.4vw), 68px);
  }
}

/* ===== MOBILE (SP, ~402px design) ===== */
@media (max-width: 900px) {
  .page-top { grid-template-columns: 1fr 32px; }
  .page-top > .rail-left { display: none; }
  .page-top > .content { grid-column: 1; grid-row: 2; min-width: 0; }
  .page-top > .cta { grid-column: 1 / -1; grid-row: 3; }
  .page-top > .rail-right { grid-column: 2; grid-row: 2; }

  .rail span { font-size: 15px; letter-spacing: 0.2em; }

  .hero { padding: 28px 0 24px; align-items: flex-start; }
  .hero-inner { width: 100%; gap: 18px; padding: 0 22px; }
  .hero-inner h1 { font-size: 74px; line-height: 1.05; }
  .hero-flex { flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; }
  .highlight-block { width: 100%; gap: 0; }
  .highlight-block .mark:first-of-type { margin-bottom: 10px; }
  .highlight-block .mark.line1,
  .highlight-block .mark.line2 { width: auto; height: auto; padding: 4px; font-size: 25px; line-height: 1.3; }
  .highlight-block .mark.line2 { font-size: 23px; }
  .en-desc { width: 100%; font-size: 18px; line-height: 1.6; }
  .for-business { width: 100%; font-size: 30px; line-height: 1.2; }
  .divider { width: 100%; margin-top: 24px; }

  .cards { flex-direction: column; padding: 20px 20px 130px; gap: 18px; }
  .card { width: 100%; height: auto; padding: 24px 20px; }
  .card-head { width: auto; height: auto; }
  .card-head h2 { font-size: 40px; line-height: 1.2; }
  .card-head .tagline { font-size: 18px; }
  .card figure { width: 130px; height: 130px; }
  .card-foot { width: auto; height: auto; }
  .card-foot .desc { font-size: 18px; line-height: 1.6; }
  .card-foot .freq { font-size: 25px; }
}