@charset "UTF-8";
/* ==========================================================================
   project — トップページ 各セクション
   座標・サイズはすべて Figma 実測値（PC 1440 カンプ）
   ※ カンプ上でセクション枠が 1436/1444px 等 1440 からわずかにずれている箇所は
     1440px カンバスに正規化している（差分 2〜4px）
   ========================================================================== */

/* ==========================================================================
   ファーストビュー（0:309）
   ========================================================================== */
.p-fv {
  position: relative;
  height: calc(100vh - 144px);
  height: calc(100dvh - 144px);
  min-height: 1px;
  overflow: hidden;
  background-color: #fff;
}

.p-fv__canvas {
  --fv-scale: 1;
  --fv-layout-width: var(--canvas);
  --fv-right-extension: 0px;

  position: relative;
  left: 50%;
  width: var(--fv-layout-width);
  height: 805px;
  margin-left: calc(var(--fv-layout-width) / -2);
  transform: scale(var(--fv-scale));
  transform-origin: center top;
}

/* 左位置を維持したまま、写真を画面右端まで隙間なく広げる。
   1024〜1440px では右端を基準に幅を比率で伸縮させる */
.p-fv__photo {
  position: absolute;
  top: 0;
  right: calc(0px - var(--fv-right-extension));
  z-index: 0;
  width: calc(61.3889% + 2px + var(--fv-right-extension)); /* 左位置を保って右側だけ拡張 */
  height: 740px;
  overflow: hidden;
  border-radius: 48px 0 0 48px;
  pointer-events: none;
}

.p-fv__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-fv__slide.is-active {
  z-index: 1;
  opacity: 1;
}

.p-fv__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.p-fv__slide img {
  display: block;
  max-width: none;
  will-change: transform;
}

/* 1枚目はカンプのトリミングを維持する */
.p-fv__slide--main img {
  position: absolute;
  top: -16.03%;
  left: -34.19%;
  width: 156.56%;
  height: 124.7%;
  max-width: none;
  object-fit: cover;
}

/* 2・3枚目は同じ表示枠に収め、人物・施術部分が自然に見える位置で切り抜く */
.p-fv__slide--cut img,
.p-fv__slide--haircare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-fv__slide--cut img {
  object-position: 38% center;
}

.p-fv__slide--haircare img {
  object-position: 42% center;
}

/* フェード中にわずかに寄る、落ち着いたKen Burns効果 */
.p-fv__slide.is-active img {
  animation: fv-photo-zoom 10s cubic-bezier(0.2, 0.45, 0.3, 1) both;
}

@keyframes fv-photo-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .p-fv__slide {
    transition: none;
  }

  .p-fv__slide.is-active img {
    animation: none;
  }
}

/* ガラスパネル */
.p-fv__panel {
  position: absolute;
  top: 220px;
  left: 60px;
  z-index: 1;
  width: 632px;
  height: 455px;
  background-color: var(--overlay-glass);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.p-fv__content {
  position: absolute;
  top: 244px;
  left: 104px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 574px;
}

.p-fv__lede {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* H1：カンプの文字単位サイズ／字間をそのまま再現（確認事項#7） */
.p-fv__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 400;
  text-shadow: var(--ts-hero);
  white-space: nowrap;
}

.p-fv__title-line1,
.p-fv__title-line2 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-fv__title-line1 {
  margin-bottom: -6.746px;
  font-size: 0;
  line-height: 0;
  background-image: var(--grad-heading-fv1);
}

.p-fv__title-line1 span {
  line-height: 105.857px;
}

.p-fv__title-line1 .is-lg { font-size: 82.334px; }
.p-fv__title-line1 .is-sm { font-size: 70.572px; }
.p-fv__title-line1 .is-ls-1 { letter-spacing: -4.94px; }
.p-fv__title-line1 .is-ls-2 { letter-spacing: -16.2315px; }
.p-fv__title-line1 .is-ls-3 { letter-spacing: -7.0572px; }

.p-fv__title-line2 {
  font-size: 90.271px;
  line-height: 105.857px;
  background-image: var(--grad-heading-fv2);
}

.p-fv__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px 8px;
  background-color: var(--color-accent);
  border-radius: 60px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  white-space: nowrap;
}

.p-fv__desc {
  width: 520px;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-body);
}

/* 装飾筆記体 Visit / Beauty
   Figma のテキストをアウトライン化した透明 SVG として配置する。
   SVG の原寸と整数座標を使い、細い輪郭の再サンプリングを防ぐ */
.p-fv__script-image {
  position: absolute;
  z-index: 3;
  display: block;
  max-width: none;
  pointer-events: none;
}

.p-fv__script-image--visit {
  top: -38px;
  left: 21px;
  width: 371px;
  height: 219px;
}

.p-fv__script-image--beauty {
  top: 110px;
  left: 112px;
  width: 433px;
  height: 225px;
}

/* FV スクロール案内
   PC カンプにはなく、TAB / SP の右端にのみ表示する。 */
.p-fv__scroll-guide {
  display: none;
  pointer-events: none;
}

@keyframes fv-scroll-text-pulse {
  0%,
  100% {
    opacity: 0.58;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(6px);
  }
}

@keyframes fv-scroll-line-flow {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%);
  }
  18% { opacity: 0.75; }
  72% { opacity: 0.75; }
  100% {
    opacity: 0;
    transform: translate(-50%, 285%);
  }
}

/* --------------------------------------------------------------------------
   FV — TAB（0:2203 / 0:2218）
   写真とテキストを縦積みに変更。ガラスパネルはテキスト側に統合する
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-fv {
    height: calc(100vh - 71px);
    height: calc(100svh - 71px);
    height: calc(var(--fv-stable-viewport-height, 100svh) - 71px);
    padding-bottom: 0;
  }

  .p-fv__canvas {
    display: flex;
    flex-direction: column;
    height: 1090px;
  }

  .p-fv__photo {
    position: relative;
    right: auto;
    width: calc(100% - 40px);
    height: 610px;
    margin-left: 40px;
    border-radius: 32px 0 0 32px;
    box-shadow: 0 4px 19px 0 #d2d2e6;
  }

  /* TAB のガラスパネルはテキストブロック自身（0:2205） */
  .p-fv__panel {
    display: none;
  }

  .p-fv__content {
    position: relative;
    top: auto;
    left: auto;
    gap: 12px;
    width: min(632px, calc(100% - 80px));
    padding-left: 20px;
    margin: 32px 0 0 40px; /* 写真下端 681px → パネル上端 713px */
    background-color: var(--overlay-glass);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .p-fv__lede {
    gap: 6px;
  }

  .p-fv__desc {
    width: min(520px, 100%);
    line-height: 20px;
  }

  .p-fv__script-image--visit {
    top: 468px;
    left: -10px;
    width: 258px;
    height: 126px;
  }

  .p-fv__script-image--beauty {
    top: 473px;
    left: 298px;
    width: 354px;
    height: 151px;
  }

  .p-fv__scroll-guide {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
  }

  .p-fv__scroll-text {
    position: absolute;
    top: 672px; /* カンプ y743px - ヘッダー 71px */
    right: 12px;
    width: 28px;
    height: 55px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #7b5352;
    text-align: center;
    white-space: nowrap;
    writing-mode: vertical-rl;
    animation: fv-scroll-text-pulse 2.6s ease-in-out infinite;
  }

  .p-fv__scroll-line {
    position: absolute;
    top: 731px; /* カンプ y802px - ヘッダー 71px */
    right: 53px;
    width: 3px;
    height: 264px;
    overflow: hidden;
    border: 0.2px solid rgba(0, 0, 0, 0.55);
  }

  .p-fv__scroll-line::after {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 26%;
    background-image: linear-gradient(
      to bottom,
      rgba(123, 83, 82, 0),
      rgba(123, 83, 82, 0.95)
    );
    content: "";
    translate: -50% -100%;
    animation: fv-scroll-line-flow 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  }
}

/* --------------------------------------------------------------------------
   FV — SP（0:1081 / 0:1098 / 0:1100）
   ガラスパネルなし・写真は右に 26px はみ出す（カンプ実測 x20 w396）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-fv {
    height: calc(100vh - 61px);
    height: calc(100svh - 61px);
    height: calc(var(--fv-stable-viewport-height, 100svh) - 61px);
    padding-bottom: 0;
  }

  .p-fv__canvas {
    height: 670.42px;
  }

  .p-fv__photo {
    width: calc(100% + 6px); /* 390 幅で 396px */
    height: 331px;
    margin-left: 20px;
    border-radius: 16px 0 0 16px;
    box-shadow: none;
  }

  .p-fv__content {
    gap: 11.499px;
    width: min(350px, calc(100% - 40px));
    padding-left: 0;
    margin: 14px 0 0 20px;
    background-color: transparent;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .p-fv__lede {
    gap: 6.899px;
  }

  .p-fv__title {
    text-shadow: 0 0 16.06px #fff;
  }

  .p-fv__title-line1 { margin-bottom: -3.878px; }
  .p-fv__title-line1 span { line-height: 60.861px; }
  .p-fv__title-line1 .is-lg { font-size: 47.336px; }
  .p-fv__title-line1 .is-sm { font-size: 40.574px; }
  .p-fv__title-line1 .is-ls-1 { letter-spacing: -2.8402px; }
  .p-fv__title-line1 .is-ls-2 { letter-spacing: -9.332px; }
  .p-fv__title-line1 .is-ls-3 { letter-spacing: -4.0574px; }

  .p-fv__title-line2 {
    font-size: 51.9px;
    line-height: 60.861px;
  }

  .p-fv__badge {
    padding: 3.45px 12.648px 4.599px;
    border-radius: 34.496px;
    font-size: 11.499px;
    line-height: 11.499px;
  }

  .p-fv__desc {
    width: min(332px, 100%);
    font-size: 11.499px;
    line-height: 17.248px;
  }

  .p-fv .c-btn-line--fv {
    gap: 13.383px;
    width: min(292.754px, 100%);
    height: 53.532px;
    padding-inline: 20.075px;
    filter: drop-shadow(0 3.346px 4.182px rgba(0, 0, 0, 0.25));
  }

  .p-fv .c-btn-line--fv .c-btn-line__icon {
    width: 32.21px;
    height: 32.21px;
  }

  .p-fv .c-btn-line--fv .c-btn-line__label { font-size: 18.402px; }

  .p-fv .c-btn-line--fv .c-btn-line__arrow {
    width: 17.147px;
    height: 4.6px;
  }

  .p-fv__script-image--visit {
    top: 237px;
    left: 0;
    width: 141px;
    height: 98px;
  }

  .p-fv__script-image--beauty {
    top: 250px;
    left: 136px;
    width: 193px;
    height: 101px;
  }

  .p-fv__scroll-text {
    top: 365px; /* カンプ y426px - FV 上端 61px */
    right: 8px;
    width: 20px;
    height: 39px;
    font-size: 14px;
  }

  .p-fv__scroll-line {
    top: 415px; /* カンプ y476px - FV 上端 61px */
    right: 20px;
    width: 1px;
    height: 165px;
    border: 0;
    background-color: rgba(0, 0, 0, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-fv__scroll-text,
  .p-fv__scroll-line::after {
    animation: none;
  }

  .p-fv__scroll-text {
    opacity: 0.9;
  }

  .p-fv__scroll-line::after {
    opacity: 0.55;
    transform: translate(-50%, 140%);
  }
}

/* ==========================================================================
   こんな方へ（0:330）
   ========================================================================== */
.p-target {
  position: relative;
  height: 641px;
  overflow: hidden;
  background-color: #fff;
  -webkit-backdrop-filter: blur(33.15px);
  backdrop-filter: blur(33.15px);
}

.p-target__bg,
.p-target__bg-blur {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.p-target__bg img {
  position: absolute;
  top: -10.55%;
  left: -0.01%;
  width: 100%;
  height: 149.78%;
  max-width: none;
  object-fit: cover;
}

/* 同じ写真を blur(22px) + opacity .2 で重ねる */
.p-target__bg-blur {
  opacity: 0.2;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.p-target__bg-blur img {
  position: absolute;
  top: -77.11%;
  left: -0.03%;
  width: 100%;
  height: 224.65%;
  max-width: none;
  object-fit: cover;
}

.p-target__canvas {
  position: relative;
  width: var(--canvas);
  height: 641px;
  margin-inline: auto;
}

.p-target__title {
  position: absolute;
  top: 76px;
  left: 0;
  width: 100%;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-heading);
  text-align: center;
}

.p-target__cards {
  position: absolute;
  top: 188px;
  left: 50%;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 981px;
  margin-left: -490.5px;
}

.p-target__cards .c-card-target:nth-child(1) .c-card-target__body { gap: 8px; }
.p-target__cards .c-card-target:nth-child(2) .c-card-target__body { gap: 14px; }

.p-target__cards .c-card-target:nth-child(3) {
  padding-inline: 83px;
}

.p-target__cards .c-card-target:nth-child(3) .c-card-target__body {
  gap: 17px;
  width: auto;
}

.p-target__cards .c-card-target:nth-child(3) .c-card-target__desc {
  width: 211px;
}

.c-card-target__icon.is-blue  { background-color: var(--color-icon-blue); }
.c-card-target__icon.is-pink  { background-color: var(--color-icon-pink); }
.c-card-target__icon.is-green { background-color: var(--color-icon-green); }

.c-card-target__icon.is-center {
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   こんな方へ — TAB（0:2222）: カード 3 枚を縦積み（幅 688px）
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-target,
  .p-target__canvas {
    height: 1217px;
  }

  .p-target__canvas {
    width: 100%;
  }

  /* TAB の背景写真は PC と切り出しが異なる */
  .p-target__bg img {
    top: 0;
    left: -69.14%;
    width: 238.29%;
    height: 100%;
  }

  .p-target__title {
    top: 78px;
  }

  .p-target__cards {
    top: 212.3px;
    flex-direction: column;
    gap: 24px;
    width: min(688px, calc(100% - 80px));
    height: 850.241px;
    margin-left: 0;
    transform: translateX(-50%);
  }

  .p-target__cards .c-card-target {
    flex: 1 0 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding-inline: 24px;
  }

  /* PC の 3 枚目だけの左右パディングは TAB では共通値に戻る */
  .p-target__cards .c-card-target:nth-child(3) {
    padding-inline: 24px;
  }

  .p-target__cards .c-card-target:nth-child(3) .c-card-target__body {
    width: 100%;
  }

  .c-card-target__caption {
    width: min(640px, 100%);
  }

  .p-target__cards .c-card-target:nth-child(3) .c-card-target__desc {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   こんな方へ — SP（0:1129）: カード 225×220 の縦積み・見出し 24px
   ※ 背景のぼかし複製レイヤーは SP カンプになし
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-target,
  .p-target__canvas {
    height: 961px;
  }

  .p-target__bg img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p-target__bg-blur {
    display: none;
  }

  /* wrapper(0:1130 h785) はセクション（h961・py96）内で中央寄せ → 上端 88px */
  .p-target__title {
    top: 88px;
    font-size: 24px;
  }

  .p-target__cards {
    top: 149px; /* wrapper 上端 88px + cards-row top 61px */
    width: 225px;
    height: auto;
    gap: 24px;
  }

  .p-target__cards .c-card-target {
    flex: 0 0 auto;
    width: 225px;
    height: 220px;
    padding: 16px;
  }

  .p-target__cards .c-card-target:nth-child(3) {
    padding: 16px;
  }

  /* アイコン円は 3 枚それぞれサイズが異なる（100 / 92 / 102px） */
  .c-card-target__icon {
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .p-target__cards .c-card-target:nth-child(1) .c-card-target__icon {
    width: 100px;
    height: 100px;
  }

  .p-target__cards .c-card-target:nth-child(2) .c-card-target__icon {
    width: 92px;
    height: 92px;
  }

  .p-target__cards .c-card-target:nth-child(3) .c-card-target__icon {
    width: 102px;
    height: 102px;
  }

  /* アイコン実寸も SP のみ縮小（3 枚目は PC と同寸のまま） */
  .p-target__cards .c-card-target:nth-child(1) .c-card-target__icon img {
    width: 54px;
    height: 44px;
  }

  .p-target__cards .c-card-target:nth-child(2) .c-card-target__icon img {
    width: 46px;
    height: 48px;
  }

  .c-card-target__caption {
    width: 100%;
  }

  .c-card-target__title {
    font-size: 20px;
  }

  .p-target__cards .c-card-target:nth-child(3) .c-card-target__desc {
    width: 100%;
  }
}

/* ==========================================================================
   サービス内容（0:380）
   ========================================================================== */
.p-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--section-pt) var(--section-pb);
}

.p-service__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: var(--container);
  overflow: visible;
}

.p-service__title {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* SERVICE のみグラデーション（確認事項#4） */
.p-service__title .c-section-title__en {
  /* 文字サイズより小さい行高ではグラデーションの描画領域が欠けるため、
     64px で描画し、負のマージンでカンプの占有高 54px を維持する */
  margin-block: -5px;
  line-height: 64px;
  letter-spacing: 5.12px;
  background-image: var(--grad-heading-svc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-service__label {
  width: 100%;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  color: #000;
  text-align: center;
}

.p-service__cards {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  width: var(--container);
}

.p-service__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.p-service__card:nth-child(1) { gap: 36px; }
.p-service__card:nth-child(2) {
  gap: 31px;
  margin-left: 80px;
}
.p-service__card:nth-child(3) {
  gap: 29px;
  margin-left: 96px;
}

.p-service__photo {
  position: relative;
  flex-shrink: 0;
  width: 360px;
  height: 440px;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
}

.p-service__photo img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.p-service__card:nth-child(1) .p-service__photo img {
  top: -0.09%;
  left: -8.23%;
  width: 183.31%;
  height: 100%;
}

.p-service__card:nth-child(2) .p-service__photo img {
  top: -0.05%;
  left: -21.09%;
  width: 183.31%;
  height: 100%;
}

.p-service__card:nth-child(3) .p-service__photo img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: 68% center;
}

.p-service__caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

.p-service__card:nth-child(1) .p-service__caption { width: 304px; }
.p-service__card:nth-child(2) .p-service__caption,
.p-service__card:nth-child(3) .p-service__caption { width: 360px; }

.p-service__card-title {
  width: 100%;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  color: #000;
}

.p-service__card-desc {
  width: 100%;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-card-desc);
}

/* 1枚目のみ Zen Kaku Gothic New（確認事項#5） */
.p-service__card:nth-child(1) .p-service__card-desc {
  font-family: var(--font-gothic);
}

.p-service__cta {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
}

.p-service__cta .c-btn-outline {
  flex: 0 0 380px;
  width: 380px;
  min-width: 380px;
  max-width: none;
}

/* --------------------------------------------------------------------------
   サービス内容 — TAB（0:2267）: カード縦積み・写真 276×337
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-service {
    padding-block: 96px;
  }

  .p-service__inner {
    gap: 8px; /* 見出し → 訪問美容 → カード群の間隔（実測 8px） */
    width: min(500px, 100%);
    padding-inline: 16px;
    overflow: visible;
  }

  .p-service__title {
    gap: 8px;
  }

  .p-service__title .c-section-title__en {
    font-size: 48px;
    /* Figma の占有高 32px を維持しつつ、字形全体を48pxの行高で描画する */
    margin-block: -8px;
    line-height: 48px;
    letter-spacing: 3.84px;
    background-image: linear-gradient(144.1372deg, #222 75.77%, #636399 98.878%);
  }

  .p-service__title .c-section-title__ja {
    font-size: 20px;
    line-height: 16px;
  }

  .p-service__label {
    font-size: 24px;
  }

  .p-service__cards {
    flex-direction: column;
    gap: 102px;
    align-items: center;
    width: 100%;
  }

  .p-service__card:nth-child(1),
  .p-service__card:nth-child(2),
  .p-service__card:nth-child(3) {
    gap: 8px;
    margin-left: 0;
  }

  .p-service__photo {
    width: 276px;
    height: 337px;
  }

  .p-service__card:nth-child(1) .p-service__caption { width: min(304px, 100%); }
  .p-service__card:nth-child(2) .p-service__caption,
  .p-service__card:nth-child(3) .p-service__caption { width: 100%; }

  .p-service__card-title {
    font-size: 20px;
  }

  .p-service__cta {
    margin-top: 32px; /* inner gap 8px + 32px = カンプ実測 40px */
  }
}

/* --------------------------------------------------------------------------
   サービス内容 — SP（0:1101）: 見出し 32px・ボタン 320×50
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-service__inner {
    width: min(390px, 100%);
  }

  .p-service__title .c-section-title__en {
    font-size: 32px;
    margin-block: 0;
    line-height: 32px;
    letter-spacing: 2.56px;
    background-image: linear-gradient(132.683deg, #222 75.77%, #636399 98.878%);
  }

  .p-service__title .c-section-title__ja {
    font-size: 16px;
  }

  .p-service__label {
    font-size: 20px;
  }

  .p-service__cards {
    gap: 96px;
  }

  .p-service__cta {
    margin-top: 16px; /* inner gap 8px + 16px = カンプ実測 24px */
    /* inner の左右 padding 16px でボタンが 320px 未満へ縮まないよう、
       SERVICE の CTA 領域だけセクション幅まで戻す */
    width: calc(100% + 32px);
    margin-inline: -16px;
  }

  .p-service__cta .c-btn-outline {
    flex-basis: 320px;
    width: 320px;
    min-width: 320px;
  }
}

@media (max-width: 319px) {
  .p-service__cta .c-btn-outline {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   安心・安全のポイント（0:406）
   ========================================================================== */
.p-point {
  position: relative;
  padding-block: var(--section-pt) var(--section-pb);
  overflow: hidden;
}

.p-point__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.p-point__bg img {
  position: absolute;
  top: -67.24%;
  left: -56.55%;
  width: 204.99%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.p-point__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-point);
  pointer-events: none;
}

.p-point__canvas {
  position: relative;
  width: var(--canvas);
  height: 1491px;
  margin-inline: auto;
}

.p-point__title {
  position: relative;
  height: 120px;
  text-align: center;
}

.p-point__title .c-section-title__en {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 64px;
  color: var(--color-text);
}

.p-point__title .c-section-title__ja {
  position: absolute;
  top: 77px;
  left: 0;
  width: 100%;
}

.p-point__rule {
  position: absolute;
  top: 145px;
  left: 50%;
  width: 80px;
  height: 1px;
  margin-left: -40px;
  background-color: var(--color-rule-point);
}

.p-point__row {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 64px;
  align-items: center;
  width: 1204px;
  margin-left: -602px;
}

.p-point__row--01 { top: 175px; }
.p-point__row--02 { top: 635px; }
.p-point__row--03 { top: 1111px; }

.p-point__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 320px;
  white-space: nowrap;
}

.p-point__row--reverse .p-point__text { padding-left: 0; }
.p-point__row:not(.p-point__row--reverse) .p-point__text { padding-left: 24px; }

.p-point__heading {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-point-title);
}

.p-point__body {
  font-family: var(--font-gothic);
  font-size: 16px;
  font-weight: 400;
  line-height: 34px;
  color: var(--color-point-body);
}

.p-point__photo {
  flex-shrink: 0;
  width: 820px;
  height: 380px;
  overflow: hidden;
  border-radius: 16px;
}

.p-point__row--reverse .p-point__photo { width: 818px; }

.p-point__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   安心・安全のポイント — TAB（0:2295）
   690px のキャンバス内で、写真が左右交互に画面端へはみ出す配置。
   PC の <br> 位置とは改行が異なるため、CSS で改行を制御する。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-point {
    padding-block: 96px;
  }

  .p-point__bg img {
    top: -68.16%;
    left: -52.49%;
    width: 204.99%;
    height: 100%;
  }

  .p-point__canvas {
    width: 690px;
    max-width: 100%;
    height: 1079px;
  }

  .p-point__title {
    height: 59px;
  }

  /* TAB の POINT はグラデーション（#222 → #06c755・確認事項#18） */
  .p-point__title .c-section-title__en {
    font-size: 32px;
    line-height: 32px;
    background-image: linear-gradient(165.9647deg, #222 49.73%, #06c755 62.68%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .p-point__title .c-section-title__ja {
    top: 40px;
  }

  /* TAB カンプに見出し下の罫線なし */
  .p-point__rule {
    display: none;
  }

  .p-point__row {
    display: block;
    width: 100%;
    margin-left: 0;
    left: 0;
  }

  .p-point__text,
  .p-point__photo {
    position: absolute;
  }

  .p-point__row:not(.p-point__row--reverse) .p-point__text,
  .p-point__row--reverse .p-point__text {
    gap: 12px;
    padding-left: 0;
    white-space: normal;
  }

  .p-point__heading {
    font-size: 24px;
  }

  .p-point__body {
    line-height: 25.6px;
  }

  /* 1・3 段目: テキスト左 / 写真は右端へはみ出す */
  .p-point__row--01 { top: 91px; }
  .p-point__row--03 { top: 811px; }

  .p-point__row--01 .p-point__photo,
  .p-point__row--03 .p-point__photo {
    top: 0;
    right: calc((100vw - 100%) / -2);
    left: auto;
    width: 443px;
    height: 268px;
    border-radius: 16px 0 0 16px;
  }

  .p-point__row--01 .p-point__text,
  .p-point__row--03 .p-point__text {
    top: 72px;
    left: 0;
    width: 269px;
  }

  .p-point__row--03 .p-point__text { left: 0.5px; }

  /* 2 段目: 写真が左端へはみ出し / テキスト右 */
  .p-point__row--02 { top: 461px; }

  .p-point__row--02 .p-point__photo {
    top: 0;
    left: calc((100vw - 100%) / -2);
    width: 412px;
    height: 248px;
    border-radius: 0 16px 16px 0;
  }

  .p-point__row--02 .p-point__text {
    top: 64px;
    left: 392px;
    width: 301px;
  }

  /* 改行位置: 1・2 段目は自然折り返し、3 段目は 2 つ目の <br> のみ有効 */
  .p-point__row--01 .p-point__body br,
  .p-point__row--02 .p-point__body br,
  .p-point__row--03 .p-point__body br:first-of-type {
    display: none;
  }

  .p-point__row--03 .p-point__body {
    line-height: 34px;
  }
}

/* --------------------------------------------------------------------------
   安心・安全のポイント — SP（0:1176）
   写真（h224・左右どちらかへはみ出す）→ 中央揃えテキスト の縦積み
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-point__title .c-section-title__en {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--color-text);
  }

  .p-point__canvas {
    width: 100%;
    height: 1393px;
  }

  .p-point__text {
    top: 248px;
    gap: 12px;
    align-items: center;
    width: 350px;
    text-align: center;
    white-space: nowrap;
  }

  .p-point__body {
    line-height: 25.6px;
  }

  .p-point__row--01 { top: 86px; }
  .p-point__row--02 { top: 553px; }
  .p-point__row--03 { top: 1021px; }

  /* 1・3 段目: 画面幅が変わっても写真の右端をビューポートへ固定 */
  .p-point__row--01 .p-point__photo,
  .p-point__row--03 .p-point__photo {
    top: 0;
    right: 0;
    left: auto;
    width: 370px;
    height: 224px;
    border-radius: 16px 0 0 16px;
  }

  .p-point__row--01 .p-point__text,
  .p-point__row--03 .p-point__text {
    top: 248px;
    left: 18px;
    width: 350px;
  }

  /* 2 段目: 写真の左端をビューポートへ固定 */
  .p-point__row--02 .p-point__photo {
    top: 0;
    left: 0;
    width: 372px;
    height: 224px;
    border-radius: 0 16px 16px 0;
  }

  .p-point__row--02 .p-point__text {
    top: 248px;
    left: 22px;
    width: 369px;
  }

  /* 改行位置: 1・2 段目は PC と同じ 3 行、3 段目のみ 2 行 */
  .p-point__row--01 .p-point__body br,
  .p-point__row--02 .p-point__body br {
    display: inline;
  }

  .p-point__row--03 .p-point__body br:first-of-type {
    display: inline;
  }

  .p-point__row--03 .p-point__body br:nth-of-type(2) {
    display: none;
  }

  .p-point__row--03 .p-point__body {
    line-height: 25.6px;
  }
}

/* ==========================================================================
   料金セクション（0:456）
   ========================================================================== */
.p-price {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding-block: var(--section-pt) var(--section-pb);
  background-color: var(--color-bg-price);
}

.p-price__inner {
  position: relative;
  width: 940px;
  height: 703px;
  overflow: hidden;
}

.p-price__title {
  position: absolute;
  top: 0;
  left: 50%;
  width: 900px;
  height: 120px;
  margin-left: -450px;
  text-align: center;
}

.p-price__title .c-section-title__en {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: normal;
}

.p-price__title .c-section-title__ja {
  position: absolute;
  top: 101px;
  left: 0;
  width: 100%;
}

.p-price__card {
  position: absolute;
  top: 144px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 900px;
  padding: 40px;
  margin-left: -450px;
  background-color: #fff;
  border-radius: 16px;
  filter: var(--shadow-price);
}

.p-price__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 802px;
  padding-block: 40px;
}

.p-price__list {
  display: flex;
  flex-direction: column;
  gap: 21px;
  width: 100%;
}

.p-price__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 29px;
  font-size: 24px;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

.p-price__row dt,
.p-price__row dd {
  margin: 0;
}

.p-price__row dd {
  font-weight: 500;
}

/* カンプでは画像の罫線。実装は 1px 実線で置換（#d9d9d9） */
.p-price__rule {
  width: 100%;
  height: 0;
  margin-bottom: -1px; /* カンプの罫線は高さ 0（線はボックス外に描画）のため相殺 */
  border-top: 1px solid var(--color-rule);
}

.p-price__note {
  font-size: 13px;
  line-height: 22px;
  color: var(--color-body);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   料金セクション — TAB（0:2320）: カード幅 688px・注記は折り返し
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-price {
    padding-block: 96px;
  }

  .p-price__inner {
    width: 100%;
    height: 725px;
  }

  .p-price__title {
    width: min(900px, 100%);
    margin-left: 0;
    transform: translateX(-50%);
  }

  .p-price__card {
    width: min(688px, calc(100% - 80px));
    margin-left: 0;
    transform: translateX(-50%);
  }

  .p-price__body {
    width: 100%;
  }

  /* TAB では 1 行に収まらないため折り返す（カンプも折り返し） */
  .p-price__note {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   料金セクション — SP（0:1201）: 見出し 32px・カード 350px・行 14px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-price__inner {
    height: 606px;
  }

  .p-price__title {
    width: 104px;
    height: 75px;
  }

  .p-price__title .c-section-title__en {
    font-size: 32px;
    line-height: 32px;
  }

  .p-price__title .c-section-title__ja {
    top: 56px;
  }

  .p-price__card {
    top: 115px;
    width: min(350px, calc(100% - 40px));
    padding: 24px 16px;
  }

  /* SP のみカード内の上下パディングなし */
  .p-price__body {
    padding-block: 0;
  }

  .p-price__row {
    font-size: 14px;
  }
}

/* ==========================================================================
   施術までのフロー（0:492）
   ========================================================================== */
.p-flow__canvas {
  position: relative;
  width: var(--canvas);
  height: 799px;
  margin-inline: auto;
}

.p-flow__inner {
  position: absolute;
  top: 120px;
  left: 50%;
  width: var(--container);
  height: 444px;
  margin-left: calc(var(--container) / -2);
  overflow: hidden;
}

.p-flow__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.p-flow__header .c-section-title__en {
  line-height: 64px;
  letter-spacing: 8px;
}

.p-flow__header .c-section-title__ja {
  letter-spacing: 2px;
}

.p-flow__lead {
  position: absolute;
  top: 113px;
  left: 50%;
  font-size: 24px;
  line-height: 28px;
  color: var(--color-body);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* ステップ一覧は .p-flow__canvas 直下（inner の外）に置く。
   PC のカンプ座標は inner 上端 120px + 247px = キャンバス 367px */
.p-flow__steps {
  position: absolute;
  top: 367px;
  left: 50%;
  width: 1146px;
  height: 197px;
  margin-left: -573px;
}

/* PC ではトラックは素通し（row / labels の包含ブロックは .p-flow__steps のまま） */
.p-flow__track {
  position: static;
}

/* スクロールヒント（TAB/SP のみ表示） */
.p-flow__fade,
.p-flow__hint {
  display: none;
}

.p-flow__row {
  position: absolute;
  top: 0;
  left: 0;
  width: 1110px;
  height: 150px;
}

/* 点線コネクタ（#333 / 1.5px / dash 3-3） */
.p-flow__line {
  position: absolute;
  top: 75px;
  left: 55px;
  right: 55px;
  height: 1.5px;
  background-image: repeating-linear-gradient(to right, #333 0 3px, transparent 3px 6px);
}

.p-flow__circle {
  position: absolute;
  top: 0;
  width: 150px;
  height: 150px;
  background-color: var(--color-bg-price);
  border-radius: 100px;
}

.p-flow__circle--01 { left: 0; }
.p-flow__circle--02 { left: 240px; }
.p-flow__circle--03 { left: 480px; }
.p-flow__circle--04 { left: 720px; }
.p-flow__circle--05 { left: 960px; }

.p-flow__num {
  position: absolute;
  top: -20px;
  left: 0;
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 300;
  line-height: 64px;
  color: var(--color-flow-num);
  white-space: nowrap;
}

.p-flow__circle--02 .p-flow__num { left: 6px; }
.p-flow__circle--04 .p-flow__num { left: -6px; }

.p-flow__icon {
  position: absolute;
}

.p-flow__icon--01 { top: 43px; left: 31px;   width: 87px;     height: 64px; }
.p-flow__icon--02 { top: 29px; left: 284px;  width: 74.001px; height: 77.817px; }
.p-flow__icon--03 { top: 40px; left: 517px;  width: 84px;     height: 68px; }
.p-flow__icon--04 { top: 28px; left: 751px;  width: 88px;     height: 94px; }
.p-flow__icon--05 { top: 33px; left: 1001px; width: 69px;     height: 80px; }

.p-flow__icon img {
  width: 100%;
  height: 100%;
}

.p-flow__labels {
  position: absolute;
  top: 162px;
  left: 56px;
  width: 1090px;
  height: 35px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-flow-label);
  text-align: center;
}

.p-flow__label {
  position: absolute;
  white-space: nowrap;
  transform: translateX(-50%);
}

.p-flow__label:nth-child(1) { top: 0;   left: 19px; }
.p-flow__label:nth-child(2) { top: 0;   left: 259px; }
.p-flow__label:nth-child(3) { top: 3px; left: 499px; }
.p-flow__label:nth-child(4) { top: 3px; left: 739px; }
.p-flow__label:nth-child(5) { top: 6px; left: 979px; }

.p-flow__cta {
  position: absolute;
  top: 604px;
  left: 50%;
  margin-left: -190px;
}

/* --------------------------------------------------------------------------
   施術までのフロー — TAB（0:2380）
   ※ステップ列（steps-container 0:2386）はカンプ上 1146px 幅のまま
     left: calc(50% + 235.5px) に置かれ、右側が画面外へ切れている。
     TAB 用に組み直されていないカンプ不備と判断し、実測どおり再現した上で
     確認事項#19 に記録している。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-flow__canvas {
    width: 100%;
    height: 652px;
    overflow: hidden;
  }

  .p-flow__inner {
    top: 96px;
    width: min(607px, 100%);
    height: 346px;
    margin-left: 0;
    overflow: visible;
    transform: translateX(-50%);
  }

  .p-flow__header .c-section-title__en {
    font-size: 32px;
    line-height: 32px;
  }

  /* カンプは 1 行（nowrap）で 607px の枠に収まる */
  .p-flow__lead {
    top: 83px;
    font-size: 16px;
    line-height: 28px;
  }

  /* ステップ一覧を横スクロールに再構成（確認事項#19）
     トラックはカンプ実測の 1146×197 を維持し、点線コネクタも横方向のまま。
     右端は意図的に見切れさせ、グラデーションと矢印チップでスクロールを示す。 */
  .p-flow__steps {
    top: 245px;
    left: 0;
    width: 100%;
    margin-left: 0;
    padding-left: 45px; /* カンプのステップ左端位置 */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .p-flow__steps::-webkit-scrollbar {
    display: none;
  }

  .p-flow__steps:focus-visible {
    outline: 2px solid var(--color-btn-outline);
    outline-offset: 2px;
  }

  .p-flow__track {
    position: relative;
    width: 1146px;
    height: 197px;
  }

  .p-flow__fade {
    display: block;
    position: absolute;
    top: 245px;
    right: 0;
    z-index: 1;
    width: 56px;
    height: 197px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  /* ステップ列の直前に横スクロールできることを明示する */
  .p-flow__hint {
    display: flex;
    position: absolute;
    top: 218px;
    right: 40px;
    z-index: 2;
    gap: 8px;
    align-items: center;
    width: auto;
    height: 18px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.08em;
    color: #7b5352;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .p-flow__hint::after {
    font-size: 16px;
    line-height: 1;
    content: "→";
  }

  /* 右端まで送ったらヒントを消す（js/main.js が data 属性を付与） */
  .p-flow[data-flow-end="true"] .p-flow__fade,
  .p-flow[data-flow-end="true"] .p-flow__hint {
    opacity: 0;
  }

  .p-flow__cta {
    top: 482px;
  }
}

/* --------------------------------------------------------------------------
   施術までのフロー — SP（0:1272 / 0:1277）
   ※SP カンプに「詳しく見る」ボタンなし（PC/TAB にはある・確認事項#19）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* カンプは h568（ボタンなし）。他ページと同じ導線を持たせるため
     「詳しく見る」を追加し、その分だけ高さを 592px にしている（確認事項#19） */
  .p-flow__canvas {
    height: 592px;
  }

  .p-flow__inner {
    width: min(347px, calc(100% - 40px));
    height: 139px;
  }

  /* SP は幅 347px 指定で折り返す（0:1276） */
  .p-flow__lead {
    width: min(347px, 100%);
    white-space: normal;
  }

  .p-flow__steps {
    top: 275px;
    padding-left: 25px; /* カンプのステップ左端位置 */
  }

  .p-flow__fade {
    top: 275px;
  }

  .p-flow__hint {
    top: 249px;
    right: 20px;
  }

  /* 料金・サービス内容と同じ「本体 → 24px → ボタン」の間隔に合わせる */
  .p-flow__cta {
    top: 496px; /* ステップ下端 472px + 24px */
    display: flex;
    margin-left: 0;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   対応エリア（0:620）
   ========================================================================== */
.p-area {
  position: relative;
  height: 741px;
  overflow: hidden;
  background-color: var(--color-bg-area);
}

.p-area__canvas {
  position: relative;
  width: var(--canvas);
  height: 741px;
  margin-inline: auto;
}

.p-area__map {
  position: absolute;
  top: 0;
  left: 682px;
  width: 777px;
  height: 745px;
  overflow: hidden;
  pointer-events: none;
}

.p-area__map img {
  position: absolute;
  top: -27.76%;
  left: -18.94%;
  width: 174.76%;
  height: 186.76%;
  max-width: none;
  object-fit: cover;
}

.p-area__title {
  position: absolute;
  top: 174.5px;
  left: 139.5px;
  width: 188px;
  height: 89px;
}

.p-area__title .c-section-title__en {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 64px;
  text-align: center;
}

.p-area__title .c-section-title__ja {
  position: absolute;
  top: 70px;
  left: 0;
}

.p-area__panel {
  position: absolute;
  top: 278px;
  left: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 644px;
  height: 299px;
  background-color: var(--overlay-area-card);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
}

.p-area__card {
  position: relative;
  width: 533px;
  height: 227px;
  border-radius: 8px;
  font-size: 20px;
  line-height: normal;
  color: var(--color-text);
  white-space: nowrap;
}

.p-area__row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid #000;
}

.p-area__row--01 { top: 24px; }
.p-area__row--02 { top: 97px; }
.p-area__row--03 { top: 170px; }

.p-area__row dt,
.p-area__row dd {
  margin: 0;
}

.p-area__circle {
  position: absolute;
  top: 220px;
  left: 887px;
  width: 372px;
  height: 372px;
}

.p-area__badge {
  position: absolute;
  top: 391px;
  left: 1226px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background-color: var(--color-badge-area);
  border-radius: 4px;
  font-size: 24px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   対応エリア — TAB（0:2356）
   PC の「地図右・パネル左」から、「見出し＋パネルが上 / 地図が下」へ再構成。
   背景色も #f6f3ee → #f6f2ee とわずかに異なる（確認事項#20）
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-area {
    height: 851px;
    background-color: #f6f2ee;
  }

  .p-area__canvas {
    width: 100%;
    height: 851px;
  }

  .p-area__title {
    top: 96px;
    left: 50%;
    width: 94px;
    height: 64px;
    transform: translateX(-50%);
  }

  .p-area__title .c-section-title__en {
    font-size: 32px;
    line-height: 32px;
  }

  .p-area__title .c-section-title__ja {
    top: 45px;
    width: 100%;
    text-align: center;
  }

  .p-area__panel {
    top: 180px; /* pt 96px + パネル上端 84px */
    left: 50%;
    width: min(496px, calc(100% - 40px));
    height: auto;
    padding: 16px;
    transform: translateX(-50%);
  }

  .p-area__card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    font-size: 14px;
  }

  .p-area__row {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    align-items: flex-start;
    justify-content: center;
    width: min(394px, 100%);
    height: auto;
    padding-bottom: 8px;
  }

  .p-area__row--01 dt { font-size: 16px; }
  .p-area__row--01 dd { width: 126px; text-align: right; }
  .p-area__row--02 dd,
  .p-area__row--03 dd { width: 282px; }

  .p-area__row dt { white-space: nowrap; }

  /* 3 行目のみ罫線なし */
  .p-area__row--03 { border-bottom: 0; }

  .p-area__map {
    top: 369px; /* pt 96 + ブロック 233 + gap 40 */
    left: 0;
    width: 766px;
    max-width: 100%;
    height: 482px;
  }

  .p-area__map img {
    top: -67.62%;
    left: -18.67%;
    width: 170.76%;
    height: 278.05%;
  }

  .p-area__circle {
    top: 453px; /* 地図上端 369px + 84px */
    left: 201px;
    width: 355px;
    height: 355px;
  }

  .p-area__badge {
    top: 615px; /* 地図上端 369px + 246px */
    left: 526px;
    width: 59.227px;
    height: 31.588px;
    padding: 2px 4px;
    font-size: 10px;
    line-height: 12px;
  }
}

/* --------------------------------------------------------------------------
   対応エリア — SP（0:1236）: 情報行は「項目名の下に内容」の縦積み
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .p-area,
  .p-area__canvas {
    height: 771px;
  }

  .p-area__panel {
    width: min(350px, calc(100% - 20px));
    height: 216px;
    padding-bottom: 20px;
    align-items: flex-start;
  }

  .p-area__card {
    gap: 0;
    height: 161px;
    white-space: nowrap;
  }

  .p-area__row {
    position: absolute;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    width: auto;
  }

  .p-area__row--01 { top: 0; }
  .p-area__row--02 { top: 67px; }
  .p-area__row--03 { top: 131px; }

  .p-area__row--01 dd,
  .p-area__row--02 dd,
  .p-area__row--03 dd {
    width: auto;
    text-align: center;
  }

  .p-area__map {
    top: 399px; /* 情報ボックスの上下余白を均等化 */
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 372px;
  }

  .p-area__map img {
    top: -27.76%;
    left: -18.94%;
    width: 174.76%;
    height: 186.76%;
  }

  .p-area__circle {
    top: 505px; /* 地図上端 399px + 106px */
    left: 99px;
    width: 191px;
    height: 191px;
  }

  .p-area__badge {
    top: 590px; /* 地図上端 399px + 191px */
    left: 272px;
    width: auto;
    height: auto;
  }
}

/* ==========================================================================
   LINE CTA（0:643）
   ========================================================================== */
.p-cta {
  position: relative;
  height: 602px;
  overflow: hidden;
}

.p-cta__canvas {
  position: relative;
  width: var(--canvas);
  height: 602px;
  margin-inline: auto;
}

.p-cta__bg {
  position: absolute;
  top: 7px;
  left: 803px;
  width: 999.217px;
  height: 698px;
  overflow: hidden;
  pointer-events: none;
}

.p-cta__bg img {
  position: absolute;
  top: -4.78%;
  left: -74.33%;
  width: 174.33%;
  height: 106.61%;
  max-width: none;
  object-fit: cover;
}

.p-cta__inner {
  position: absolute;
  top: 120px;
  left: 220px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 1000px;
}

.p-cta__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.p-cta__title .c-section-title__en {
  line-height: 64px;
}

/* CONTACT のみサブタイトルが 16px（確認事項#8） */
.p-cta__title .c-section-title__ja {
  font-size: 16px;
}

.p-cta__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1000px;
  height: 243px;
  background-color: var(--overlay-cta-box);
}

.p-cta__actions {
  display: flex;
  gap: 40px;
  align-items: center;
}

.p-cta__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.p-cta__text {
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text);
  white-space: nowrap;
}

.p-cta__text--form {
  line-height: 22px;
}

/* --------------------------------------------------------------------------
   LINE CTA — TAB（I0:2510;19:2160）/ SP（0:148）
   PC の横 2 カラムから縦積みへ。背景に rgba(247,247,247,0.7) のオーバーレイが入る
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .p-cta {
    height: auto;
  }

  .p-cta__canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 96px 39px;
  }

  .p-cta__bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .p-cta__bg img {
    top: 66.86%;
    left: 0.1%;
    width: 100%;
    height: 33.18%;
  }

  .p-cta__bg::after {
    position: absolute;
    inset: 0;
    background-color: rgba(247, 247, 247, 0.7);
    content: "";
  }

  /* position: static にすると絶対配置の .p-cta__bg（+ 白オーバーレイ）が
     コンテンツより後に描画され、CTA 全体が白く霞むため relative を維持する */
  .p-cta__inner {
    position: relative;
    top: auto;
    left: auto;
    gap: 24px;
    width: 100%;
  }

  .p-cta__title .c-section-title__en {
    font-size: 32px;
    line-height: 32px;
  }

  .p-cta__title .c-section-title__ja {
    width: 216px;
  }

  .p-cta__box {
    width: min(670px, 100%);
    height: 267px;
    padding: 24px 60px;
  }

  .p-cta__actions {
    flex-direction: column;
    gap: 22px;
  }

  .p-cta__col {
    gap: 8px;
  }

  .p-cta .c-btn-line {
    width: 328px;
  }

  .p-cta .c-btn-form {
    width: 328px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .p-cta__canvas {
    padding: 96px 19px;
  }

  .p-cta__box {
    width: min(350px, 100%);
    height: 270px;
    padding: 24px 0;
  }

  .p-cta__actions {
    gap: 24px;
  }

  .p-cta .c-btn-line {
    width: 270px;
  }

  .p-cta .c-btn-form {
    width: 270px;
  }
}