@charset "UTF-8";
/* =====================================================================
   三善建設 モデルハウス LP
   Dessin 共通標準準拠: フルリキッド calc(px / var(--screen-w) * 100vw)
   Breakpoints: max-width のみ / Base canvas 1440
   ===================================================================== */

:root {
  --screen-w: 1440;
  /* --cw: min(100vw, 1440px); */
  --cw: 100vw;
  /* 中央寄せ(max-width:1440)セクション用: 1440超では頭打ち */
  --spad: 100;
  /* section 縦padding nominal */
  --navy: #1F2E43;
  --navyD: #1B2738;
  --lav: #C7B8CD;
  --pink: #E1BED2;
  --grayBg: #F3F3F3;
  --blueGray: #A4B4C1;
  --line: #E3E3E3;
  --jp: "IBM Plex Sans JP", "Noto Sans JP", sans-serif;
  --en: "Albert Sans", "IBM Plex Sans JP", sans-serif;
}

/* reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--jp);
  color: var(--navy);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* utilities（必須） */
.df {
  display: flex;
}

.sb {
  justify-content: space-between;
}

.dg {
  display: grid;
}

.fw {
  flex-wrap: wrap;
}

.w90 {
  width: 90%;
  margin: 0 auto;
}

.aic {
  align-items: center;
}

/* section 縦padding 共通 */
.sec {
  padding-block: calc(var(--spad) / var(--screen-w) * 100vw);
}

/* 英語ラベル */
.enLabel {
  font-family: var(--en);
  font-weight: 800;
  font-size: calc(12 / var(--screen-w) * 100vw);
  letter-spacing: .08em;
  color: var(--navy);
}

/* eyebrow（中央見出し） */
.eyebrow {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(14 / var(--screen-w) * 100vw);
}

.eyebrow h2 {
  font-weight: 500;
  font-size: calc(28 / var(--screen-w) * 100vw);
  letter-spacing: .07em;
  line-height: 1.45;
}

/* =========================== HERO =========================== */
.hero {
  position: relative;
  height: calc(100svh - (94 / var(--screen-w) * 100vw) - 1px);
  overflow: visible;
  line-height: 1.4;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
}

.hero-tagline {
  position: absolute;
  top: 4%;
  left: 0;
  padding-left: 2.5%;
  z-index: 2;
  font-size: calc(14 / var(--screen-w) * 100vw);
  padding-bottom: .5em;
  border-bottom: 1px solid rgba(255, 255, 255, .7);
}

.hero-tagline b {
  font-weight: 500;
  font-size: calc(16 / var(--screen-w) * 100vw);
}

.hero-reserve {
  position: absolute;
  top: 3.2%;
  right: 2%;
  z-index: 2;
  display: block;
}

.hero-reserve img {
  width: calc(366 / var(--screen-w) * 100vw);
  height: auto;
  display: block;
}

/* 固定フローティングCTA */
.floatCta {
  position: fixed;
  right: calc(24 / var(--screen-w) * 100vw);
  bottom: calc(24 / var(--screen-w) * 100vw);
  z-index: 100;
  display: block;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3));
}

.floatCta.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floatCta img {
  width: calc(430 / var(--screen-w) * 100vw);
  height: auto;
  display: block;
}

.hero-copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(36 / var(--screen-w) * 100vw);
  z-index: 60;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
  width: calc(543 / var(--screen-w) * 100vw);
}

.hero-copy-sub {
  font-size: calc(18 / var(--screen-w) * 100vw);
  letter-spacing: .08em;
}

.hero-copy h1 {
  font-size: calc(64 / var(--screen-w) * 100vw);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: .06em;
  margin-top: .2em;
}

.hero-copy img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-badge {
  position: absolute;
  left: 50px;
  bottom: -20px;
  width: 31%;
  z-index: 55;
}

.hero-badge img {
  width: 100%;
  height: auto;
  aspect-ratio: 938/568;
  object-fit: contain;
}

.hero-badge-circle {
  position: absolute;
  left: 12.5%;
  top: 17%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.hero-badge-circle small {
  font-family: var(--en);
  font-weight: 300;
  font-size: calc(13 / var(--screen-w) * 100vw);
}

.hero-badge-circle b {
  font-weight: 300;
  font-size: calc(20 / var(--screen-w) * 100vw);
  letter-spacing: .14em;
}

/* =========================== NAV =========================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: transform .35s ease, opacity .35s ease;
}

/* 最下部までスクロールしたらヘッダーnavを隠す */
.nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.nav-inner {
  align-items: center;
  margin: 0 auto;
  padding: 0 calc(55 / var(--screen-w) * 100vw);
  height: calc(94 / var(--screen-w) * 100vw);
}

.nav-links {
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.nav-logoBar {
  display: none;
}

.nav-links a {
  font-size: calc(15 / var(--screen-w) * 100vw);
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  display: flex;
  justify-content: center;
  width: 20%;
  border-right: 1px solid var(--line);
  align-self: stretch;
  cursor: pointer;
}

.nav-links a:last-child {
  border-right: none;
}

.nav-links>a:not(.nav-logo)::after {
  content: "⌄";
  font-size: .8em;
  color: #888;
  transform: translateY(-.2em);
}

.nav-logo img {
  width: calc(216 / var(--screen-w) * 100vw);
}

.nav-cta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--navyD);
  color: #fff;
  padding: calc(8 / var(--screen-w) * 100vw) calc(22 / var(--screen-w) * 100vw);
  text-align: center;
  white-space: nowrap;
  display: flex;
}

.nav-cta small {
  font-size: calc(11 / var(--screen-w) * 100vw);
  font-weight: 300;
  opacity: .85;
}

.nav-cta span {
  font-size: calc(15 / var(--screen-w) * 100vw);
  font-weight: 500;
  align-items: center;
  gap: 8px;
  display: flex;
}

.nav-cta span::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--lav);
}

/* =========================== SP固定フッターナビ ===========================
   PCでは非表示。768px以下でのみ画面下に固定表示（ハンバーガーの代替）      */
.spBar {
  display: none;
}

/* =========================== INTRO =========================== */
.intro {
  background: var(--blueGray);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, .06) 0 40%, rgba(0, 0, 0, .05));
  color: #fff;
  overflow: hidden;
}

.intro-inner {
  align-items: center;
  margin: 0 auto;
  grid-template-columns: 1fr auto;
}

.intro-inner .intro-copy {
  width: calc(757 / var(--screen-w) * var(--cw));
  height: 100%;
  padding: calc(17/ var(--screen-w) * var(--cw)) 20px calc(37/ var(--screen-w) * var(--cw)) calc(106/ var(--screen-w) * var(--cw));
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.intro-inner .intro-copy>img {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.intro-inner .intro-imgs {
  width: calc(683 / var(--screen-w) * var(--cw));
  height: 100%;
}

.intro-copy h3 {
  font-size: calc(23 / var(--screen-w) * var(--cw));
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .05em;
  margin-bottom: calc(13 / var(--screen-w) * var(--cw));
}

.intro-copy h3 .big {
  font-size: 1.5em;
}

.intro-copy p {
  font-size: calc(13 / var(--screen-w) * var(--cw));
  line-height: 1.6;
}

.intro-imgs img {
  width: calc(227 / var(--screen-w) * var(--cw));
  aspect-ratio: 227/212;
  object-fit: cover;
}

/* =========================== NOTICE =========================== */
.notice {
  background: #fff;
  padding: calc(80 / var(--screen-w) * 100vw) 0 calc(72 / var(--screen-w) * 100vw);
}

.notice-inner {
  width: calc(800 / var(--screen-w) * 100vw);
  max-width: 800px;
  margin: 0 auto;
}

.notice-inner h2 {
  font-size: calc(22 / var(--screen-w) * 100vw);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  text-align: center;
  margin-bottom: calc(34 / var(--screen-w) * 100vw);
}

.notice-inner p {
  font-size: calc(16 / var(--screen-w) * 100vw);
  line-height: 1.9;
  letter-spacing: .03em;
}

/* =========================== CONCEPT =========================== */
.concept {
  padding: calc(86 / var(--screen-w) * 100vw) 0 calc(128 / var(--screen-w) * 100vw) 0;
}

.concept-inner {
  justify-content: flex-end;
  align-items: flex-start;
}

.concept-imgs {
  position: relative;
  width: calc(684 / var(--screen-w) * 100vw);
  min-height: calc(680 / var(--screen-w) * 100vw);
}

.concept-imgs .cfade {
  position: absolute;
  width: 48%;
  aspect-ratio: 324/571;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.concept-imgs .cfade:first-child {
  left: 0;
  top: 0;
  z-index: 1;
}

.concept-imgs .cfade:last-child {
  right: 0;
  top: calc(46 / var(--screen-w) * 100vw);
  z-index: 2;
}

/* 2枚をフェードでループ切り替え（上の画像の不透明度をアニメ） */
.cfade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cfade img:last-child {
  /* スライド間隔3.5秒（＝2枚で1周7秒）、イーズ(フェード)を約20%長く */
  animation: conceptFade 7s ease-in-out infinite;
}

.concept-imgs .cfade:last-child img:last-child {
  /* 右カラムを0.3秒後にスタート */
  animation-delay: 0.3s;
}

@keyframes conceptFade {

  0%,
  37.5% {
    opacity: 1
  }

  50%,
  87.5% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media (prefers-reduced-motion:reduce) {
  .cfade img:last-child {
    animation: none;
  }
}

.concept-text {
  margin-top: calc(142 / var(--screen-w) * 100vw);
}

.concept-text .enLabel {
  display: block;
  margin-bottom: calc(16 / var(--screen-w) * 100vw);
  padding-left: calc(72 / var(--screen-w) * var(--cw));
}

.concept-text h2 {
  font-size: calc(32 / var(--screen-w) * 100vw);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.55;
  margin-bottom: calc(-10 / var(--screen-w) * 100vw);
  padding-left: calc(72 / var(--screen-w) * var(--cw));
}

.ribon {
  width: 100%;
}

.concept-text p {
  font-size: calc(15 / var(--screen-w) * 100vw);
  line-height: 2;
  letter-spacing: .04em;
  margin-top: calc(20 / var(--screen-w) * 100vw);
  margin-bottom: calc(32 / var(--screen-w) * 100vw);
  padding-left: calc(72 / var(--screen-w) * var(--cw));
}

.concept-text p:last-child {
  margin-bottom: 0;
}

/* =========================== EMPATHY =========================== */
.empathy {
  background: var(--grayBg);
  padding-top: calc(118 / var(--screen-w) * 100vw);
  margin-bottom: calc(135 / var(--screen-w) * 100vw);
}

.empathy-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 5%;
}

.empathy-head .enLabel {
  display: block;
  margin-bottom: calc(20 / var(--screen-w) * 100vw);
}

.empathy-head h2 {
  font-size: calc(28 / var(--screen-w) * 100vw);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: calc(48 / var(--screen-w) * 100vw);
  letter-spacing: 0.1em;
}

.empathy-head mark {
  background: var(--lav);
  color: var(--navy);
  padding: 0 .15em;
}

.empathy-head p {
  font-size: calc(15 / var(--screen-w) * 100vw);
  line-height: 2;
}

.empathy-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 / var(--screen-w) * 100vw);
  width: calc(1008 / var(--screen-w) * 100vw);
  margin: calc(80 / var(--screen-w) * 100vw) auto 0;
}

.empathy-tags span {
  position: relative;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  font-size: calc(14 / var(--screen-w) * 100vw);
  font-weight: 500;
  text-align: center;
  height: calc(57 / var(--screen-w) * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - calc(8 / var(--screen-w) * 100vw) * 2) / 3);
}

.empathy-tags span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(14 / var(--screen-w) * 100vw) calc(14 / var(--screen-w) * 100vw) 0 0;
  border-color: var(--lav) transparent transparent transparent;
}

.empathyBand {
  margin-top: calc(131 / var(--screen-w) * var(--cw));
  background: linear-gradient(to bottom, #f3f3f3 50%, #fff 50%);
  color: #fff;
  overflow: hidden;
}

.empathyBand-inner {
  align-items: center;
  width: calc(1224 / var(--screen-w) * var(--cw));
  margin: 0 auto;
  grid-template-columns: auto 1fr;
  gap: calc(70 / var(--screen-w) * var(--cw));
  padding-right: calc(120 / var(--screen-w) * var(--cw));
  background: var(--navyD);
  position: relative;
}

.empathyBand-inner::after {
  position: absolute;
  width: 1px;
  height: calc(62 / var(--screen-w) * var(--cw));
  display: block;
  content: "";
  background: linear-gradient(to bottom, #C5C5C5 50%, #fff 50%);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.empathyBand-inner img {
  width: calc(504 / var(--screen-w) * var(--cw));
  aspect-ratio: 504/284;
  object-fit: cover;
}

.empathyBand-txt .pill {
  display: block;
  background: #fff;
  color: var(--navy);
  font-size: calc(15 / var(--screen-w) * var(--cw));
  font-weight: 500;
  padding: calc(6 / var(--screen-w) * var(--cw)) calc(26 / var(--screen-w) * var(--cw));
  width: calc(360 / var(--screen-w) * var(--cw));
  margin: 0 auto calc(20 / var(--screen-w) * var(--cw));
  text-align: center;
}

.empathyBand-txt h3 {
  font-size: calc(26 / var(--screen-w) * var(--cw));
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: calc(20 / var(--screen-w) * var(--cw));
  text-align: center;
}

.empathyBand-txt p {
  font-size: calc(12 / var(--screen-w) * var(--cw));
  font-weight: 300;
  line-height: 2;
  opacity: .9;
  max-width: calc(640 / var(--screen-w) * var(--cw));
}

/* =========================== CRITERIA =========================== */
.criteria-inner {
  grid-template-columns: auto 1fr;
  gap: calc(189 / var(--screen-w) * 100vw);
}

.criteria-title {
  align-items: flex-start;
}

.criteria-title .enLabel {
  writing-mode: vertical-rl;
  letter-spacing: .2em;
}

.criteria-title h2 {
  writing-mode: vertical-rl;
  font-size: calc(28 / var(--screen-w) * 100vw);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .12em;
}

.criteria-title .num {
  color: var(--lav);
  font-family: var(--en);
  font-size: 1.6em;
  padding: 0 .1em;
}

.criteria-grid {
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line);
}

.crit {
  position: relative;
  min-height: calc(376 / var(--screen-w) * 100vw);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: calc(34 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw) calc(40 / var(--screen-w) * 100vw);
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
  cursor: pointer;
  transition: background .3s ease;
}

.crit:nth-child(n+4) {
  border-bottom: none;
}

.crit-no {
  font-family: var(--en);
  font-weight: 500;
  font-size: calc(48 / var(--screen-w) * 100vw);
  color: var(--navy);
  line-height: 1;
  margin-bottom: calc(8 / var(--screen-w) * 100vw);
  transition: color .3s;
}

.crit-cat {
  font-size: calc(12 / var(--screen-w) * 100vw);
  font-weight: 600;
  margin-bottom: calc(22 / var(--screen-w) * 100vw);
  transition: color .3s;
}

.crit-q {
  font-size: calc(15 / var(--screen-w) * 100vw);
  font-weight: 600;
  line-height: 1.75;
  margin-bottom: calc(26 / var(--screen-w) * 100vw);
  flex: 1;
  transition: color .3s;
}

.crit img {
  width: calc(78 / var(--screen-w) * 100vw);
  height: calc(78 / var(--screen-w) * 100vw);
  object-fit: contain;
}

/* 回答は通常フロー表示。カードに余裕高さを確保し、ホバーでも高さ不変＝ガタつかない */
.crit-answer {
  display: none;
  width: 100%;
  margin-top: calc(4 / var(--screen-w) * 100vw);
}

.crit-answer-box {
  background: #fff;
  color: #555;
  text-align: left;
  font-size: calc(13 / var(--screen-w) * 100vw);
  line-height: 1.95;
  padding: calc(18 / var(--screen-w) * 100vw);
}

/* ホバー / タップ で回答表示 */
.crit:hover,
.crit.active {
  background: var(--navy);
}

.crit:hover .crit-no,
.crit.active .crit-no,
.crit:hover .crit-cat,
.crit.active .crit-cat,
.crit:hover .crit-q,
.crit.active .crit-q {
  color: #fff;
}

.crit:hover .crit-q,
.crit.active .crit-q {
  flex: none;
  margin-bottom: calc(16 / var(--screen-w) * 100vw);
}

.crit:hover>img,
.crit.active>img {
  display: none;
}

.crit:hover .crit-answer,
.crit.active .crit-answer {
  display: block;
}

/* =========================== MODEL HOUSE =========================== */
.model {
  background: linear-gradient(to bottom, #f3f3f3 62%, #fff 62%);
  padding: 0 0 calc(171 / var(--screen-w) * 100vw);
  position: relative;
}

.model>img {
  position: absolute;
  top: calc(100% + (-19 / var(--screen-w) * 100vw));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.model-inner {
  width: 100%;
  padding-inline: calc(108 / var(--screen-w) * 100vw);
}

/* full-width コラージュ（Figma実座標 / 基準1440・内容幅1224） */
.model-top {
  position: relative;
  min-height: calc(1300 / var(--screen-w) * 100vw);
}

.model-head {
  position: absolute;
  top: calc(156 / var(--screen-w) * 100vw);
  left: 0;
  width: 42%;
  z-index: 5;
}

.model-head h2 {
  font-family: var(--en);
  font-weight: 500;
  font-size: calc(50 / var(--screen-w) * 100vw);
  letter-spacing: .02em;
  line-height: 1;
}

.model-head .sub {
  font-size: calc(12.5 / var(--screen-w) * 100vw);
  margin: calc(18 / var(--screen-w) * 100vw) 0 calc(26 / var(--screen-w) * 100vw);
}

.model-head p {
  font-size: calc(15 / var(--screen-w) * 100vw);
  line-height: 2.1;
}

.model-top img {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.mcTr {
  top: calc(108 / var(--screen-w) * 100vw);
  left: 88.2%;
  width: 14.7%;
  aspect-ratio: 180/134;
  z-index: 3;
}

.mcMain {
  top: calc(175 / var(--screen-w) * 100vw);
  left: 44.1%;
  width: 55.9%;
  aspect-ratio: 684/538;
  z-index: 1;
}

.model-tall {
  top: calc(494 / var(--screen-w) * 100vw);
  left: 0;
  width: 29.4%;
  aspect-ratio: 360/452;
  z-index: 2;
}

.mcMid {
  top: calc(774 / var(--screen-w) * 100vw);
  left: 35.3%;
  width: 35.3%;
  aspect-ratio: 432/343;
  z-index: 2;
}

.mcS3 {
  top: calc(1082 / var(--screen-w) * 100vw);
  left: 5.9%;
  width: 17.6%;
  aspect-ratio: 216/170;
  z-index: 2;
}

.mcS2 {
  top: calc(1053 / var(--screen-w) * 100vw);
  left: 76.5%;
  width: 23.5%;
  aspect-ratio: 288/227;
  z-index: 2;
}

/* video + floor plans */
.media {
  grid-template-columns: 1fr 1fr;
  gap: calc(48 / var(--screen-w) * 100vw);
  margin-top: calc(97 / var(--screen-w) * 100vw);
  width: calc(700 / var(--screen-w) * 100vw);
  margin-inline: auto;
}

/* 1つ目のfigure（動画）が復活してfigureが3つになったら元のデザイン（動画｜間取り1F｜間取り2F の横1列）に戻す */
.media:has(figure:nth-of-type(3)) {
  width: auto;
  grid-template-columns: 2.08fr 1fr 1fr;
  align-items: start;
}

.media .thumb {
  position: relative;
  overflow: hidden;
}

.media .thumb img {
  width: 100%;
  height: auto;
}

.media .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(64 / var(--screen-w) * 100vw);
  height: calc(64 / var(--screen-w) * 100vw);
  border: 1px solid #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.media .play::after {
  content: "";
  border-left: .9em solid #fff;
  border-top: .6em solid transparent;
  border-bottom: .6em solid transparent;
  margin-left: .25em;
}

.media figcaption {
  align-items: center;
  gap: 10px;
  font-size: calc(14 / var(--screen-w) * 100vw);
  margin-top: calc(16 / var(--screen-w) * 100vw);
  display: flex;
}

.media figcaption::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lav);
  flex: none;
}

.media .plan {
  background: #fff;
  align-items: center;
  justify-content: center;
  padding: calc(14 / var(--screen-w) * 100vw);
  display: flex;
}

.media .plan img {
  width: auto;
  max-height: calc(280 / var(--screen-w) * 100vw);
}

/* =========================== HIGHLIGHTS =========================== */
.highlights {
  background: var(--grayBg);
  padding-block: calc(190 / var(--screen-w) * 100vw);
}

.highlights-inner {
  grid-template-columns: calc(324 / var(--screen-w) * 100vw) 1fr;
  gap: 0;
}

.highlights-title {
  align-items: flex-start;
  gap: 10px;
}

.highlights-title .enLabel {
  writing-mode: vertical-rl;
}

.highlights-title h2 {
  writing-mode: vertical-rl;
  font-size: calc(28 / var(--screen-w) * 100vw);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.6;
}

.hlGrid {
  grid-template-columns: 1fr 1fr;
  gap: calc(44 / var(--screen-w) * 100vw) calc(66 / var(--screen-w) * 100vw);
}

.hlItem figure {
  overflow: hidden;
}

.hlItem img {
  width: 100%;
  aspect-ratio: 417/333;
  object-fit: cover;
}

.hlCap {
  justify-content: space-between;
  align-items: flex-end;
  margin-top: calc(16 / var(--screen-w) * 100vw);
  padding-bottom: calc(10 / var(--screen-w) * 100vw);
  display: flex;
}

.hlCap .t {
  font-size: calc(14 / var(--screen-w) * 100vw);
}

.hlCap .n {
  font-family: var(--en);
  font-weight: 300;
  font-size: calc(28 / var(--screen-w) * 100vw);
  color: var(--lav);
  line-height: 1;
}

.hlWhy {
  min-height: 3.4em;
  font-size: calc(12 / var(--screen-w) * 100vw);
  line-height: 1.7;
  letter-spacing: .03em;
  color: #66717e;
}

/* =========================== CTA BAND =========================== */
.ctaBand {
  background: linear-gradient(to top right, #1B2738 50%, #1F2E43 50%);
  color: #fff;
  padding-top: calc(30 / var(--screen-w) * 100vw);
}

.ctaBand-inner {
  align-items: center;
  width: calc(999 / var(--screen-w) * var(--cw));
  aspect-ratio: 999 / 338;
  position: relative;
  margin: 0 auto;
}

.ctaBand-img {
  position: absolute;
  left: 0;
  bottom: 0;
}

.ctaBand-img img {
  width: calc(623 / var(--screen-w) * var(--cw));
  aspect-ratio: 623/334;
}

.ctaBand-badge {
  position: absolute;
  left: 1%;
  top: 0;
  width: calc(150 / var(--screen-w) * var(--cw));
  height: calc(150 / var(--screen-w) * var(--cw));
  border-radius: 50%;
  border: .5px solid #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  display: flex;
}

.ctaBand-badge small {
  font-family: var(--en);
  font-weight: 300;
  font-size: calc(13 / var(--screen-w) * var(--cw));
}

.ctaBand-badge b {
  font-weight: 200;
  font-size: calc(22 / var(--screen-w) * var(--cw));
  letter-spacing: .14em;
}

.ctaBand-body {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ctaBand-body h2 {
  font-size: calc(32 / var(--screen-w) * var(--cw));
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .02em;
  margin-bottom: calc(22 / var(--screen-w) * var(--cw));
  text-align: center;
}

.ctaTags {
  gap: calc(12 / var(--screen-w) * var(--cw));
  margin-bottom: calc(26 / var(--screen-w) * var(--cw));
}

.ctaTags span {
  position: relative;
  background: #fff;
  color: var(--navy);
  font-size: calc(14 / var(--screen-w) * var(--cw));
  font-weight: 500;
  padding: calc(9 / var(--screen-w) * var(--cw)) calc(16 / var(--screen-w) * var(--cw));
  height: calc(49 / var(--screen-w) * var(--cw));
  display: flex;
  justify-content: center;
  align-items: center;
}

.ctaTags span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(14 / var(--screen-w) * var(--cw)) calc(14 / var(--screen-w) * var(--cw)) 0 0;
  border-color: var(--lav) transparent transparent transparent;
}

.ctaBtn {
  display: flex;
  width: calc(195 / var(--screen-w) * var(--cw));
  align-items: center;
  gap: calc(16 / var(--screen-w) * var(--cw));
  border: .5px solid #fff;
  border-radius: 41px;
  padding: calc(11 / var(--screen-w) * var(--cw)) calc(10 / var(--screen-w) * var(--cw)) calc(10 / var(--screen-w) * var(--cw)) calc(34 / var(--screen-w) * var(--cw));
  font-size: calc(16 / var(--screen-w) * var(--cw));
  font-weight: 500;
  color: #fff;
  margin: 0 auto;
}

.ctaBtn i {
  width: calc(25 / var(--screen-w) * var(--cw));
  height: calc(25 / var(--screen-w) * var(--cw));
  border-radius: 50%;
  background: var(--lav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ctaBtn i::after {
  content: "";
  width: .35em;
  height: .35em;
  border-top: 1.5px solid var(--navy);
  border-right: 1.5px solid var(--navy);
  transform: rotate(45deg);
  margin-left: -.1em;
}

/* =========================== PERFORMANCE =========================== */
.perf .eyebrow {
  margin-bottom: calc(26 / var(--screen-w) * 100vw);
}

.perf-lead {
  text-align: center;
  font-size: calc(15 / var(--screen-w) * 100vw);
  line-height: 1.9;
  max-width: calc(680 / var(--screen-w) * 100vw);
  margin: 0 auto calc(64 / var(--screen-w) * 100vw);
}

.perfTable-wrap {
  overflow-x: visible;
}

.perfTable {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(8 / var(--screen-w) * 100vw);
  max-width: 1160px;
  margin: 0 auto;
  align-items: start;
}

.pcol-head,
.pcol-row .v {
  overflow-wrap: anywhere;
}

.pcol {
  border: .8px solid #AFB6BC;
  background: #fff;
}

/* 三善建設列: 行は揃えたまま、紺ヘッダーを上に飛び出させて強調（scaleは使わない） */
.pcol.isMain {
  position: relative;
  z-index: 2;
  margin-top: calc(-16 / var(--screen-w) * 100vw);
  box-shadow: 0 12px 28px rgba(31, 46, 67, .22);
  border: none;
  border: 1px solid #1F2E43;
  border-radius: calc(4 / var(--screen-w) * 100vw);
  overflow: hidden;
}

.pcol-head {
  background: #AFB6BC;
  color: #fff;
  text-align: center;
  font-size: calc(16 / var(--screen-w) * 100vw);
  font-weight: 500;
  padding: calc(18 / var(--screen-w) * 100vw) 8px;
}

.pcol.isMain .pcol-head {
  background: var(--navyD);
  padding: calc(32 / var(--screen-w) * 100vw) 0 calc(33 / var(--screen-w) * 100vw);

}

.pcol-row {
  padding: calc(12 / var(--screen-w) * 100vw) 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.pcol-row:nth-child(odd) {
  background: #F8F8F8;
}

.pcol.isMain .pcol-row {
  background: #F7F4F9;
}

.pcol.isMain .pcol-row:nth-child(odd) {
  background: #ECE5EF;
}

.pcol-row .k {
  font-size: calc(9.5 / var(--screen-w) * 100vw);
  letter-spacing: .05em;
  margin-bottom: 2px;
}

.pcol-row .v {
  font-size: calc(12 / var(--screen-w) * 100vw);
  font-weight: 700;
  line-height: 1.4;
}

.perf-note {
  max-width: 1160px;
  margin: calc(14 / var(--screen-w) * 100vw) auto 0;
  margin-top: calc(-16 / var(--screen-w) * 100vw);
  text-align: right;
  font-size: calc(12 / var(--screen-w) * 100vw);
}

/* スマホ幅のみ: 表がはみ出す分は横スクロール */
@media (max-width: 560px) {
  .perfTable-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .perfTable {
    min-width: 640px;
  }

  .pcol.isMain {
    margin-top: 0;
  }

  .pcol-head {
    font-size: 13px;
    padding: 12px 6px;
  }

  .pcol-row {
    padding: 11px 8px;
  }

  .pcol-row .k {
    font-size: 10px;
  }

  .pcol-row .v {
    font-size: 13px;
  }
}

/* =========================== POINTS =========================== */
.points {
  background: url('assets/img/bg-point.jpg') no-repeat center;
  background-size: cover;
  color: #fff;
}

.points .eyebrow .enLabel,
.points .eyebrow h2 {
  color: #fff;
}

.points .eyebrow {
  margin-bottom: calc(60 / var(--screen-w) * 100vw);
}

.point-box {
  position: relative;
  background: #fff;
  padding: calc(32 / var(--screen-w) * 100vw);
  margin-bottom: calc(10 / var(--screen-w) * 100vw);
}

.point-box::before,
.pcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(14 / var(--screen-w) * 100vw) calc(14 / var(--screen-w) * 100vw) 0 0;
  border-color: var(--lav) transparent transparent transparent;
}

.point01 {
  grid-template-columns: 1fr auto;
  gap: calc(20 / var(--screen-w) * 100vw);
  align-items: center;
  margin-bottom: calc(24 / var(--screen-w) * 100vw);
}

.point01 .lbl {
  flex-direction: column;
  display: flex;
}

.point01 .p {
  font-family: var(--en);
  font-size: calc(11 / var(--screen-w) * 100vw);
  color: var(--lav);
}

.point01 h3 {
  font-size: calc(22 / var(--screen-w) * 100vw);
  font-weight: 600;
  line-height: 1.5;
  margin-top: calc(6 / var(--screen-w) * 100vw);
  color: #1F2E43;
}

.point01 .imgs {
  gap: calc(10 / var(--screen-w) * 100vw);
}

.point01 .imgs img {
  width: calc(180 / var(--screen-w) * 100vw);
  aspect-ratio: 180/105;
  object-fit: cover;
}

.point01 .imgs img:first-child {
  width: calc(107 / var(--screen-w) * 100vw);
}

.technoBanner img {
  width: 100%;
  height: auto;
}

.pointsGrid {
  grid-template-columns: 1fr 1fr;
  gap: calc(10 / var(--screen-w) * 100vw);
}

.pcard {
  position: relative;
  background: #fff;
  color: var(--navy);
  grid-template-columns: 1fr auto;
  gap: calc(16 / var(--screen-w) * 100vw);
  align-items: center;
  padding: calc(26 / var(--screen-w) * 100vw) calc(22 / var(--screen-w) * 100vw);
}

.pcard .p {
  font-family: var(--en);
  font-size: calc(11 / var(--screen-w) * 100vw);
  color: var(--lav);
  font-weight: 500;
}

.pcard .p span {
  font-size: calc(15 / var(--screen-w) * 100vw);
}

.pcard h3 {
  font-size: calc(20 / var(--screen-w) * 100vw);
  font-weight: 600;
  line-height: 1.5;
  margin-top: calc(8 / var(--screen-w) * 100vw);
}

.pcard img {
  width: calc(180 / var(--screen-w) * 100vw);
  aspect-ratio: 180/105;
  object-fit: cover;
}

/* =========================== WORKS =========================== */
.works .eyebrow {
  margin-bottom: calc(24 / var(--screen-w) * 100vw);
}

.worksLead {
  max-width: 900px;
  font-size: calc(15 / var(--screen-w) * 100vw);
  line-height: 2;
  letter-spacing: .04em;
  text-align: center;
  margin-bottom: calc(60 / var(--screen-w) * 100vw);
}

/* full-bleed マーキー（上段 左→右 / 下段 右→左 に無限スクロール） */
.works {
  overflow: hidden;
  /* iOS Safari: 自身を合成レイヤー化して、内部のアニメ要素が消える不具合を防ぐ */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.works-rows {
  width: 100%;
  flex-direction: column;
  gap: calc(24 / var(--screen-w) * 100vw);
  display: flex;
}

.works-row {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 1画面に3.5枚（カード+余白で 100vw/3.5 のスロット） */
.works-row .wcard {
  flex: 0 0 calc(100vw / 3.5 - 24 / var(--screen-w) * 100vw);
  margin-right: calc(8 / var(--screen-w) * 100vw);
  /* iOS Safari: 画像の本来幅(800px)が最小幅になりカードが膨張→行が巨大化して描画されない不具合を防ぐ */
  min-width: 0;
}

.works-ltr {
  animation: worksLtr 60s linear infinite;
}

.works-rtl {
  animation: worksRtl 60s linear infinite;
}

@keyframes worksLtr {
  from {
    transform: translate3d(-50%, 0, 0)
  }

  to {
    transform: translate3d(0, 0, 0)
  }
}

@keyframes worksRtl {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-50%, 0, 0)
  }
}

.wcard figure {
  overflow: hidden;
  position: relative;
  aspect-ratio: 400/300;
}

.wcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wcard p {
  font-size: calc(14 / var(--screen-w) * 100vw);
  margin-top: calc(8 / var(--screen-w) * 100vw);
  line-height: 1.6;
  letter-spacing: -0.03em;
}

@media (prefers-reduced-motion:reduce) {
  .works-row {
    animation: none;
  }
}

/* =========================== CONSULT =========================== */
.consult {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.consult-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.consult::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 40, .35);
  z-index: 1;
}

.consult-inner {
  position: relative;
  z-index: 2;
  max-width: 1224px;
  margin: 0 auto;
  padding: calc(110 / var(--screen-w) * 100vw) 5%;
}

.consult .eyebrow {
  margin-bottom: calc(54 / var(--screen-w) * 100vw);
}

.consult .eyebrow .enLabel,
.consult .eyebrow h2 {
  color: #fff;
}

.consult-banners {
  grid-template-columns: 1fr 1fr;
  gap: calc(44 / var(--screen-w) * 100vw);
  max-width: 940px;
  margin: 0 auto;
}

.consultBadges {
  justify-content: center;
  gap: calc(12 / var(--screen-w) * 100vw);
  max-width: 940px;
  margin: calc(42 / var(--screen-w) * 100vw) auto 0;
}

.consultBadges span {
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(31, 46, 67, .48);
  font-size: calc(14 / var(--screen-w) * 100vw);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
  padding: calc(9 / var(--screen-w) * 100vw) calc(18 / var(--screen-w) * 100vw);
}

.cbanner {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.cbanner>img {
  width: 100%;
  height: 100%;
  aspect-ratio: 456/181;
  object-fit: cover;
}

.cbanner-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(30 / var(--screen-w) * 100vw);
  color: #fff;
}

.cbanner-box::before {
  content: "";
  position: absolute;
  inset: calc(14 / var(--screen-w) * 100vw);
  border: 1px solid rgba(255, 255, 255, .75);
  pointer-events: none;
}

.cbanner-blue {
  background: linear-gradient(90deg, rgba(138, 161, 188, .15), rgba(138, 161, 188, .9) 22%);
}

.cbanner-gray {
  background: linear-gradient(90deg, rgba(70, 72, 78, .1), rgba(70, 72, 78, .82) 22%);
}

.cbanner-box .s {
  font-size: calc(20 / var(--screen-w) * 100vw);
  font-weight: 600;
  letter-spacing: .04em;
}

.cbanner-box .l {
  font-size: calc(29 / var(--screen-w) * 100vw);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
}

/* =========================== ACCESS =========================== */
.access-inner {
  grid-template-columns: 1fr 1fr;
  gap: calc(70 / var(--screen-w) * 100vw);
  align-items: start;
}

.access .eyebrow {
  align-items: flex-start;
  text-align: left;
  margin-bottom: calc(40 / var(--screen-w) * 100vw);
}

.access dl {
  grid-template-columns: calc(120 / var(--screen-w) * 100vw) 1fr;
  display: grid;
}

.access dl>div {
  display: contents;
}

.access dt,
.access dd {
  border-top: 1px solid var(--line);
  padding: calc(20 / var(--screen-w) * 100vw) 0;
  font-size: calc(13 / var(--screen-w) * 100vw);
}

.access dl>div:first-child dt,
.access dl>div:first-child dd {
  border-top: none;
}

.access dt {
  font-weight: 600;
}

.access dd {
  line-height: 1.7;
}

.access .tel {
  font-size: calc(18 / var(--screen-w) * 100vw);
  font-weight: 500;
  margin: calc(6 / var(--screen-w) * 100vw) 0 4px;
}

.access .telBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 / var(--screen-w) * 100vw);
  border: 1px solid #ddd;
  border-radius: 40px;
  padding: calc(12 / var(--screen-w) * 100vw) calc(14 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) calc(30 / var(--screen-w) * 100vw);
  margin-top: calc(12 / var(--screen-w) * 100vw);
  margin-bottom: calc(5 / var(--screen-w) * 100vw);
  width: calc(231 / var(--screen-w) * 100vw);
  font-weight: 500;
  font-size: calc(16 / var(--screen-w) * 100vw);
}

.access .telBtn i {
  position: relative;
  flex: none;
  width: calc(26 / var(--screen-w) * 100vw);
  height: calc(26 / var(--screen-w) * 100vw);
  border-radius: 50%;
  background: var(--lav);
}

.access .telBtn i::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(6 / var(--screen-w) * 100vw);
  height: calc(6 / var(--screen-w) * 100vw);
  border-top: 1.5px solid var(--navy);
  border-right: 1.5px solid var(--navy);
  transform: rotate(45deg) translate(-1px, 1px);
}

/* 地図（左カラム・情報の下） */
.access-map {
  display: block;
  width: 100%;
  aspect-ratio: 504/215;
  object-fit: cover;
  margin-top: calc(40 / var(--screen-w) * 100vw);
}

/* 右カラム: 縦長の外観写真1枚（左カラムの高さいっぱい） */
.access-media {
  align-self: stretch;
  display: flex;
}

.access-media img,
.access-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================== RESERVATION CALENDAR =========================== */
.reserveCalendar {
  background: #fff;
  padding: calc(80 / var(--screen-w) * 100vw) 5%;
}

.reserveCalendar iframe {
  display: block;
  width: 100%;
  max-width: 960px;
  height: 1000px;
  margin: 0 auto;
  border: 0;
}

/* =========================== FOOTER =========================== */
.footerNav .nav-inner {
  justify-content: center;
  gap: calc(60 / var(--screen-w) * 100vw);
}

.footerMosaic {
  position: relative;
  line-height: 0;
  overflow: hidden;
  background: var(--navyD);
}

.fmRow {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.fmRow img {
  width: calc(372 / var(--screen-w) * 100vw);
  height: calc(264 / var(--screen-w) * 100vw);
  object-fit: cover;
  flex: none;
  display: block;
}

.fmLtr {
  animation: fmLtr 70s linear infinite;
}

.fmRtl {
  animation: fmRtl 70s linear infinite;
}

@keyframes fmLtr {
  from {
    transform: translate3d(-50%, 0, 0)
  }

  to {
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fmRtl {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-50%, 0, 0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .fmRow {
    animation: none;
  }
}

.footerMosaic-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 40, .55);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  gap: calc(18 / var(--screen-w) * 100vw);
  padding: 20px;
  display: flex;
}

.footerMosaic-overlay .in {
  font-family: var(--en);
  font-size: calc(16 / var(--screen-w) * 100vw);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.footerMosaic-overlay h2 {
  font-size: calc(39 / var(--screen-w) * 100vw);
  font-weight: 500;
  line-height: 1.4;
}

.footerMosaic-overlay .ctaTags span {
  color: var(--navy);
}

.copyright {
  background: var(--navyD);
  color: rgba(255, 255, 255, .7);
  text-align: center;
  font-size: calc(12 / var(--screen-w) * 100vw);
  padding: calc(26 / var(--screen-w) * 100vw) 16px;
}

/* --- pixel-perfect セクション高さ調整（1440アンカー / 保全モード） --- */
.perf {
  padding-block: calc(166 / var(--screen-w) * 100vw);
  padding-top: calc(102 / var(--screen-w) * 100vw);
}

.points {
  padding-block: calc(134 / var(--screen-w) * 100vw);
}

.works {
  padding-block: calc(162 / var(--screen-w) * 100vw);
}

.access {
  padding-block: calc(178 / var(--screen-w) * 100vw);
}

.criteria {
  padding: calc(110 / var(--screen-w) * 100vw) 0 calc(135 / var(--screen-w) * 100vw);
}

/* デザイン準拠のコンテンツ幅（左右108px余白 = 内容幅1224 / 基準1440） */
.criteria-inner,
.highlights-inner,
.access-inner,
.points-inner {
  width: 100%;
  padding-inline: calc(108 / var(--screen-w) * 100vw);
}

br.sp {
  display: none;
}

/* =====================================================================
   TABLET  (max-width:768 / canvas 768)
   ===================================================================== */
@media (max-width:768px) {
  :root {
    --screen-w: 768;
    --spad: 60;
  }

  .perf-note {
    margin-top: calc(20 / var(--screen-w) * 100vw);
  }

  .empathy {
    margin-bottom: 0;
  }

  /* 中央寄せ内部コンテナ: モバイルは固定px幅を解除してビューポート幅に収める */
  .intro-inner,
  .empathyBand-inner,
  .ctaBand-inner {
    width: auto;
    max-width: 100%;
  }

  /* notice */
  .notice-inner {
    width: auto;
    max-width: 100%;
    padding: 0 calc(32 / var(--screen-w) * 100vw);
  }

  .notice-inner h2 {
    font-size: calc(20 / var(--screen-w) * 100vw);
    margin-bottom: calc(26 / var(--screen-w) * 100vw);
  }

  .notice-inner p {
    font-size: calc(14 / var(--screen-w) * 100vw);
    line-height: 1.9;
  }

  .enLabel,
  .nav-links a,
  .nav-cta small,
  .nav-cta span,
  .crit-cat,
  .pcol-row .k {
    font-size: calc(12 / var(--screen-w) * 100vw);
  }

  /* hero */
  .hero {
    height: auto;
    aspect-ratio: 4/5;
  }

  .hero-copy {
    left: 50%;
    top: auto;
    bottom: calc(30 / var(--screen-w) * 100vw);
    transform: translateX(-50%);
    width: 84%;
  }

  .hero-copy-sub {
    font-size: calc(15 / var(--screen-w) * 100vw);
  }

  .hero-copy h1 {
    font-size: calc(42 / var(--screen-w) * 100vw);
  }

  .hero-tagline {
    font-size: calc(12 / var(--screen-w) * 100vw);
  }

  .hero-tagline b {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .hero-badge {
    display: none;
  }

  .hero-badge-circle {
    width: calc(96 / var(--screen-w) * 100vw);
    height: calc(96 / var(--screen-w) * 100vw);
  }

  .hero-badge-circle small {
    font-size: calc(11 / var(--screen-w) * 100vw);
  }

  .hero-badge-circle b {
    font-size: calc(16 / var(--screen-w) * 100vw);
  }

  .cbanner-box .s {
    font-size: calc(16 / var(--screen-w) * 100vw);
  }

  .cbanner-box .l {
    font-size: calc(24 / var(--screen-w) * 100vw);
  }

  /* header nav → SPではロゴのみ（ナビは画面下の .spBar に集約） */
  .nav:not(.footerNav) .nav-links {
    display: none;
  }

  .nav-links .nav-logoInline {
    display: none;
  }

  /* footer nav → wrap centered */
  .footerNav {
    position: static;
  }

  .footerNav .nav-inner {
    height: auto;
    padding: calc(22 / var(--screen-w) * 100vw) 5%;
  }

  .footerNav .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: calc(14 / var(--screen-w) * 100vw);
  }

  .footerNav .nav-links a {
    flex: none;
    width: auto;
    white-space: nowrap;
  }

  .footerNav .nav-links a.nav-logo {
    display: none;
  }

  .nav:not(.footerNav) .nav-inner {
    justify-content: center;
    position: relative;
  }

  .nav-logoBar {
    display: flex;
  }

  /* ---- SP固定フッターナビ ---- */
  .spBar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: #fff;
    box-shadow: 0 4px 65px rgba(0, 0, 0, .1);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .spBar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(67 / var(--screen-w) * 100vw);
    padding: calc(7 / var(--screen-w) * 100vw) calc(2 / var(--screen-w) * 100vw) calc(6 / var(--screen-w) * 100vw);
    border-left: 1px solid #EFEFEF;
    color: #1A1A1A;
    text-align: center;
  }

  .spBar-item:first-child {
    border-left: 0;
  }

  /* アイコンはFigma書き出しの実寸（390px基準）で配置。高さ23pxの帯に天地中央 */
  .spBar-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(22.1 / var(--screen-w) * 100vw);
    color: #7B4786;
    flex: none;
  }

  .spBar-ico svg {
    display: block;
    overflow: visible;
  }

  .spBar-ico--logo svg {
    width: calc(30.8 / var(--screen-w) * 100vw);
    height: calc(15.4 / var(--screen-w) * 100vw);
  }

  .spBar-ico--model svg {
    width: calc(22.1 / var(--screen-w) * 100vw);
    height: calc(22.1 / var(--screen-w) * 100vw);
  }

  .spBar-ico--perf svg {
    width: calc(26 / var(--screen-w) * 100vw);
    height: calc(22.1 / var(--screen-w) * 100vw);
  }

  .spBar-ico--access svg {
    width: calc(17.6 / var(--screen-w) * 100vw);
    height: calc(18.3 / var(--screen-w) * 100vw);
  }

  /* ラベル枠は常に2行分の高さで下端固定。1行ラベルもその中で天地中央になり、
     2行ラベルと文字の中心が揃う（デザイン実測：全セル中心 y112.5） */
  .spBar-txt {
    flex: none;
    margin-top: auto;
    height: calc(24 / var(--screen-w) * 100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(10 / var(--screen-w) * 100vw);
    line-height: 1.2;
    letter-spacing: .01em;
    font-weight: 500;
  }

  /* 来場予約セル */
  .spBar-cta {
    background: #1C2653;
    color: #fff;
    border-left: 0;
    padding-top: calc(6 / var(--screen-w) * 100vw);
  }

  .spBar-photo {
    width: calc(64 / var(--screen-w) * 100vw);
    height: calc(29 / var(--screen-w) * 100vw);
    object-fit: contain;
    object-position: center bottom;
    flex: none;
  }

  /* 固定バーの高さぶん、ページ末尾に余白を確保 */
  body {
    padding-bottom: calc(67 / var(--screen-w) * 100vw);
    padding-bottom: calc(67 / var(--screen-w) * 100vw + env(safe-area-inset-bottom));
  }

  /* 右下フローティングCTAは .spBar の来場予約と重複するためSPでは非表示 */
  .floatCta {
    display: none;
  }

  .nav-inner {
    height: calc(64 / var(--screen-w) * 100vw);
    padding-inline: calc(24 / var(--screen-w) * 100vw);
  }

  .nav-logo img {
    height: calc(34 / var(--screen-w) * 100vw);
  }

  /* stacks */
  .intro-inner {
    grid-template-columns: 1fr;
    gap: calc(28 / var(--screen-w) * 100vw);
    padding-inline: calc(40 / var(--screen-w) * 100vw);
  }

  .intro-inner .intro-copy {
    padding-right: 0;
  }

  .concept-inner,
  .criteria-inner,
  .highlights-inner,
  .access-inner,
  .points-inner {
    padding-inline: calc(40 / var(--screen-w) * 100vw);
  }

  .intro-copy h3 {
    font-size: calc(22 / var(--screen-w) * 100vw);
  }

  .intro-copy p {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .intro-imgs img {
    width: calc(180 / var(--screen-w) * 100vw);
  }

  .concept-inner {
    flex-direction: column;
    align-items: stretch;
    gap: calc(30 / var(--screen-w) * 100vw);
  }

  .concept-imgs {
    width: 100%;
    min-height: auto;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    display: grid;
  }

  .concept-text {
    width: 100%;
  }

  .concept-imgs .cfade {
    position: relative;
    width: 100%;
    top: auto;
  }

  .concept-text h2,
  .empathyBand-txt h3,
  .eyebrow h2,
  .criteria-title h2,
  .highlights-title h2,
  .ctaBand-body h2 {
    font-size: calc(24 / var(--screen-w) * 100vw);
  }

  .concept-text p,
  .empathy-head p,
  .model-head p,
  .perf-lead {
    font-size: calc(14 / var(--screen-w) * 100vw);
  }

  .empathy-tags {
    width: 90%;
  }

  .empathy-tags span {
    width: calc((100% - calc(8 / var(--screen-w) * 100vw) * 1) / 2);
  }

  .empathyBand-inner {
    width: auto;
    grid-template-columns: 1fr;
    padding-right: 0;
    gap: 0;
  }

  .empathyBand-inner::after {
    display: none;
  }

  .empathyBand-inner img {
    width: 100%;
  }

  .empathyBand-txt {
    padding: calc(30 / var(--screen-w) * 100vw) 5% calc(44 / var(--screen-w) * 100vw);
  }

  .empathyBand-txt p {
    font-size: calc(13 / var(--screen-w) * 100vw);
    max-width: none;
  }

  .criteria-inner,
  .highlights-inner {
    grid-template-columns: 1fr;
    gap: calc(24 / var(--screen-w) * 100vw);
  }

  .criteria-title,
  .highlights-title {
    justify-content: center;
    margin-bottom: calc(10 / var(--screen-w) * 100vw);
  }

  .criteria-title .enLabel,
  .criteria-title h2,
  .highlights-title .enLabel,
  .highlights-title h2 {
    writing-mode: horizontal-tb;
    text-align: center;
    width: 100%;
  }

  .crit-no {
    font-size: calc(40 / var(--screen-w) * 100vw);
  }

  .crit-cat,
  .crit-q {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  /* タブレット/スマホは確保高さを解除（タップで開くアコーディオン） */
  .crit {
    min-height: 0;
  }

  .model {
    padding-top: calc(60 / var(--screen-w) * 100vw);
  }

  .model-inner {
    padding-inline: 0;
  }

  .model-top {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 / var(--screen-w) * 100vw);
  }

  .model-head {
    position: static;
    width: auto;
    grid-column: 1 / -1;
    margin-bottom: calc(6 / var(--screen-w) * 100vw);
  }

  .model-head h2 {
    font-size: calc(38 / var(--screen-w) * 100vw);
  }

  .model-top img {
    position: static;
    width: 100%;
  }

  .mcMain {
    grid-column: 1 / -1;
  }

  .media {
    margin-top: calc(40 / var(--screen-w) * 100vw);
  }

  .media {
    grid-template-columns: 1fr;
    gap: calc(30 / var(--screen-w) * 100vw);
    width: 90%;
    margin: 60px auto 0;
  }

  .media figcaption {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .media .play {
    width: 64px;
    height: 64px;
  }

  .media .plan img {
    max-height: 340px;
  }

  .hlGrid {
    gap: calc(20 / var(--screen-w) * 100vw) calc(24 / var(--screen-w) * 100vw);
  }

  .hlCap .t,
  .wcard p,
  .empathy-tags span,
  .ctaTags span {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .hlCap .n {
    font-size: calc(24 / var(--screen-w) * 100vw);
  }

  .ctaBand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
    text-align: center;
    gap: calc(24 / var(--screen-w) * 100vw);
    padding: calc(40 / var(--screen-w) * 100vw) 5% 0 5%;
  }

  .ctaBand-img {
    position: static;
    margin: 0 auto;
    order: 2;
  }

  .ctaBand-img img {
    width: min(520px, 90%);
  }

  .ctaBand-body {
    position: static;
    transform: none;
    width: 100%;
    order: 1;
  }

  .ctaBtn {
    margin: 0 auto;
  }

  .ctaTags {
    justify-content: center;
  }

  .points .eyebrow h2,
  .works .eyebrow h2 {
    font-size: calc(24 / var(--screen-w) * 100vw);
  }

  .works-row .wcard {
    flex-basis: calc(300 / var(--screen-w) * 100vw);
  }

  .point01 {
    grid-template-columns: 1fr;
    gap: calc(16 / var(--screen-w) * 100vw);
  }

  .point01 h3 {
    font-size: calc(19 / var(--screen-w) * 100vw);
  }

  .point01 .imgs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(10 / var(--screen-w) * 100vw);
  }

  .point01 .imgs img,
  .point01 .imgs img:first-child {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .pointsGrid {
    grid-template-columns: 1fr;
  }

  .pcard h3 {
    font-size: calc(17 / var(--screen-w) * 100vw);
  }

  .pcard img {
    width: calc(150 / var(--screen-w) * 100vw);
  }

  .access-inner {
    grid-template-columns: 1fr;
    gap: calc(30 / var(--screen-w) * 100vw);
  }

  .access .eyebrow {
    align-items: center;
    text-align: center;
  }

  .access dl {
    grid-template-columns: calc(110 / var(--screen-w) * 100vw) 1fr;
  }

  .access dt,
  .access dd {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .footerMosaic-overlay h2 {
    font-size: calc(26 / var(--screen-w) * 100vw);
  }

  .empathyBand-txt .pill {
    width: 100%;
  }

  .model>img {
    top: calc(100% + (-3 / var(--screen-w) * 100vw));
  }
}

/* =====================================================================
   MOBILE  (max-width:480 / canvas 375)
   ===================================================================== */
@media (max-width:480px) {
  :root {
    --screen-w: 375;
    --spad: 44;
  }

  .enLabel {
    font-size: calc(11 / var(--screen-w) * 100vw);
  }

  /* notice */
  .notice {
    padding: calc(52 / var(--screen-w) * 100vw) 0 calc(48 / var(--screen-w) * 100vw);
  }

  .notice-inner {
    padding: 0 calc(24 / var(--screen-w) * 100vw);
  }

  .notice-inner h2 {
    font-size: calc(18 / var(--screen-w) * 100vw);
    margin-bottom: calc(20 / var(--screen-w) * 100vw);
  }

  .notice-inner p {
    font-size: calc(13 / var(--screen-w) * 100vw);
    line-height: 1.85;
  }

  /* hero */
  .hero {
    height: auto;
    aspect-ratio: 3/4;
  }

  .hero-copy {
    top: auto;
  }

  .hero-copy-sub {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .hero-copy h1 {
    font-size: calc(32 / var(--screen-w) * 100vw);
  }

  .hero-tagline {
    max-width: 64%;
  }

  .hero-badge {
    width: 52%;
  }

  .cbanner-box {
    width: 70%;
  }

  .cbanner-box .l {
    font-size: calc(22 / var(--screen-w) * 100vw);
  }

  .nav-inner {
    height: calc(56 / var(--screen-w) * 100vw);
    padding: 0 16px;
  }

  .nav-links a {
    font-size: calc(15 / var(--screen-w) * 100vw);
  }


  .nav-cta {
    padding: 6px 14px;
  }

  .nav-cta span {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .intro-inner {
    padding: 40px 0 0 0;
  }

  .concept-inner {
    padding: 0;
  }

  .criteria-inner,
  .highlights-inner,
  .access-inner,
  .points-inner {
    padding-inline: calc(20 / var(--screen-w) * 100vw);
  }

  .intro-copy h3 {
    font-size: calc(20 / var(--screen-w) * 100vw);
  }

  .intro-copy p,
  .concept-text p,
  .empathy-head p,
  .model-head p,
  .worksLead,
  .perf-lead,
  .empathyBand-txt p {
    font-size: calc(14 / var(--screen-w) * 100vw);
  }

  .intro-imgs img {
    width: 33.33%;
  }

  .concept-text h2,
  .empathyBand-txt h3,
  .eyebrow h2,
  .criteria-title h2,
  .highlights-title h2,
  .ctaBand-body h2,
  .points .eyebrow h2,
  .works .eyebrow h2 {
    font-size: calc(22 / var(--screen-w) * 100vw);
  }

  .empathy-tags span,
  .hlCap .t,
  .wcard p,
  .ctaTags span,
  .crit-cat,
  .crit-q,
  .access dt,
  .access dd {
    font-size: calc(13 / var(--screen-w) * 100vw);
  }

  .empathy-tags {
    width: 90%;
  }

  .empathy-tags span {
    width: 100%;
  }

  .criteria-grid {
    grid-template-columns: repeat(1, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .crit:nth-child(n+4) {
    border-bottom: 1px solid var(--line);
  }

  .crit-no {
    font-size: calc(36 / var(--screen-w) * 100vw);
  }

  .model-head h2 {
    font-size: calc(34 / var(--screen-w) * 100vw);
  }

  .model-tall {
    width: 70%;
  }

  .hlGrid {
    grid-template-columns: 1fr;
  }

  .hlCap .n {
    font-size: calc(26 / var(--screen-w) * 100vw);
  }

  .hlWhy {
    display: -webkit-box;
    overflow: hidden;
    min-height: 0;
    font-size: calc(12 / var(--screen-w) * 100vw);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .works-row .wcard {
    flex-basis: calc(240 / var(--screen-w) * 100vw);
  }

  .consult-banners {
    grid-template-columns: 1fr;
    gap: calc(24 / var(--screen-w) * 100vw);
  }

  .consultBadges {
    gap: calc(8 / var(--screen-w) * 100vw);
    margin-top: calc(28 / var(--screen-w) * 100vw);
  }

  .consultBadges span {
    font-size: calc(12 / var(--screen-w) * 100vw);
    padding: calc(8 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw);
  }

  .pcard {
    grid-template-columns: 1fr;
  }

  .pcard img {
    width: 100%;
  }

  .footerMosaic-overlay h2 {
    font-size: calc(24 / var(--screen-w) * 100vw);
  }

  .copyright {
    font-size: calc(11 / var(--screen-w) * 100vw);
  }

  .hero-reserve {
    display: none;
  }

  .nav-links a {
    border-right: none;
  }

  .nav:not(.footerNav) .nav-links a:last-child {
    border-bottom: none;
  }

  .intro-inner .intro-copy {
    padding: 0;
    width: 90%;
    margin: 0 auto;
  }

  .intro-inner .intro-imgs {
    width: 100%;
  }

  .concept-text {
    margin-top: 40px;
  }

  .concept-text .enLabel {
    padding: 0 5%;
    text-align: center;
  }

  .concept-text h2 {
    padding: 0 5%;
    text-align: center;
    margin-bottom: 20px;
  }

  .concept-text p {
    padding: 0 5%;
  }

  .concept-text p br {
    display: none;
  }

  .concept {
    padding: 80px 0;
  }

  .empathy-head h2 br {
    display: none;
  }

  .empathy-head p br {
    display: none;
  }

  .empathy-tags {
    margin-top: 40px;
  }

  .empathyBand {
    margin-top: 60px;
  }

  .criteria-title,
  .highlights-title {
    flex-flow: column;
  }

  .criteria-title .enLabel,
  .highlights-title .enLabel {
    text-align: center;
    display: block;
    margin: 0 0 20px;
    width: 100%;
  }

  .criteria {
    padding: 80px 0;
  }

  .model-head {
    width: 90%;
    margin: 0 auto 40px;
  }

  .model {
    padding-bottom: 80px;
  }

  .highlights {
    padding: 80px 0;
  }

  .ctaBand-img img {
    width: 100%;
  }

  .perf {
    padding: 80px 0;
  }

  .perf-lead {
    width: 90%;
    margin: 0 auto 60px;
  }

  .perf-lead br {
    display: none;
  }

  .points {
    padding: 80px 0;
  }

  .point01 .imgs {
    flex-flow: column;
  }

  .point01 .imgs img {
    width: 100%;
  }

  .point01 .imgs img:first-child {
    aspect-ratio: 1/1;
  }

  .works {
    padding: 80px 0;
  }

  .access {
    padding: 80px 0;
  }

  br.sp {
    display: inline;
  }
}

/* =========================== 1920px以上（大画面）調整 =========================== */
@media (min-width: 1920px) {

  /* 長い1行が折り返さないようにpaddingを固定・content幅を確保 */
  .empathy-head {
    max-width: 920px;
    padding: 0 24px;
  }

  /* コンテンツは中央寄せ、ribbonだけ右端まで伸ばす */
  .concept-inner {
    justify-content: center;
  }

  .ribon {
    width: calc(100% + 8.2vw);
    max-width: none;
  }
}

/* =========================== スクロール出現アニメーション（ブロック内で順次） =========================== */
@media (prefers-reduced-motion: no-preference) {

  /* 縦積みの直下要素／2カラム(.df .dg)の各カラム／.empathy-tags・.hlGrid の中身 を初期非表示に（JSが順番に表示） */
  /* オフセットは transform ではなく translate プロパティを使用（中央寄せ等の transform を壊さない） */
  html.reveal-on section > *:not(.df):not(.dg):not(.empathy-tags):not(.model-inner),
  html.reveal-on section > .df > *,
  html.reveal-on section > .dg > *:not(.hlGrid),
  html.reveal-on section > .empathy-tags > *,
  html.reveal-on section > .dg > .hlGrid > *,
  html.reveal-on .model-top > *,
  html.reveal-on footer.footerMosaic {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .7s ease, translate .7s cubic-bezier(.22, .61, .36, 1);
  }

  html.reveal-on section > *:not(.df):not(.dg):not(.empathy-tags):not(.model-inner).is-visible,
  html.reveal-on section > .df > *.is-visible,
  html.reveal-on section > .dg > *:not(.hlGrid).is-visible,
  html.reveal-on section > .empathy-tags > *.is-visible,
  html.reveal-on section > .dg > .hlGrid > *.is-visible,
  html.reveal-on .model-top > *.is-visible,
  html.reveal-on footer.footerMosaic.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}