/**
 * Front Page Styles
 * トップページ各セクションのスタイル
 *
 * @package KNOT_For_Dogs
 */

/* ===== SP用改行: <br class="u-sp-only"> ===== */
/* foundation.cssが@import経由のため個別シートとして認識されずCSSOMに展開されない。
   ここで明示的にオーバーライドする */
br.u-sp-only {
  display: inline; /* SP: brは inline を維持して改行として機能させる */
}

@media (min-width: 768px) {
  br.u-sp-only {
    display: none; /* PC: 非表示 */
  }
}

/* ===== Hero ===== */
.p-hero {
  position: relative;
  overflow-x: clip;  /* 画像が右にはみ出すがスクロールバーは出ない */
  overflow-y: visible;
  padding-top: 48px; /* SP: Figma SP準拠 — ヘッダーとの間隔を縮小 */
  padding-bottom: 0;
  background-color: var(--color-base);
}

@media (min-width: 768px) {
  .p-hero {
    padding-top: 0px; /* Figma: テキスト位置 top: 92px */
  }
}

.p-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  /* SP: l-container のセンタリングに依存せず、左基準で配置 */
  padding-left: 34px;
  padding-right: 0;
  width: 100%;
  margin-inline: 0;
  max-width: none;
}

@media (min-width: 768px) {
  .p-hero__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    min-height: 570px;
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- テキスト --- */
.p-hero__content {
  flex-shrink: 0;
  /* SP: Figma上 width=322px */
  max-width: 322px;
}

@media (min-width: 768px) {
  .p-hero__content {
    flex: 1;
    max-width: none;
    padding-top: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 17px; /* Figma: コンテンツ間隔 17px */
  }
}

.p-hero__catchcopy {
  font-family: var(--font-ja);
  font-size: 2rem; /* SP: 32px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls-normal);
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .p-hero__catchcopy {
    letter-spacing: 0; /* Figma SP: letter-spacing なし */
  }
}

@media (min-width: 768px) {
  .p-hero__catchcopy {
    font-size: 3rem; /* PC: 48px */
    font-weight: 400;
    max-width: 460px;
    width: 100%;
  }
}

.p-hero__sub {
  margin-top: var(--sp-md);
  font-family: var(--font-ja);
  font-size: var(--fz-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .p-hero__sub {
    margin-top: var(--sp-md);
    font-size: 1.25rem;
    line-height: 1.8;
    padding-left: 10px;
    max-width: 460px;
    width: 100%;
  }
}

/* --- スライダー --- */
.p-hero__slider {
  position: relative;
  flex: 1;
  min-width: 0;
  /* SP: Figmaでは画像が右に88pxはみ出す。左はviewport 77px地点から開始 */
  margin-left: calc(77px - 34px);  /* viewport 77px - 親の padding-left 34px = 43px */
  margin-right: -88px;  /* 右に88pxはみ出す */
}

@media (min-width: 768px) {
  .p-hero__slider {
    flex: 0 0 670px;
    width: 670px;
    max-width: none;
    margin-left: auto;
    margin-right: 0;
  }
}

/* ピンクがかった円形背景 — PNGのblob形状に含まれるため非表示 */
.p-hero__slider-bg {
  display: none;
}

.p-hero__slider .swiper {
  position: relative;
  z-index: 1;
}

.p-hero__slider .swiper-slide img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .p-hero__slider .swiper-slide img {
    width: 670px;
    height: 570px;
    object-fit: contain;
  }
}

/* PC: blob形状はPNG自体に含まれるため clip-path 不要 */

/* --- 波形SVG --- */
.p-hero__wave {
  position: absolute; /* SP: Figma準拠 — heroセクション内に絶対配置 */
  top: 493px; /* SP: Figma Frame150 = ヒーロー起点y=0基準で493px offset、header分は引かない */
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

@media (min-width: 768px) {
  .p-hero__wave {
    top: 415px; /* Figma: hero frame内での波形SVG位置 */
  }
}

.p-hero__wave img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Worry ===== */
.p-worry {
  background-color: var(--color-base);
  /* Figma: hero底面〜worryコンテンツ上端の間隔 */
  padding-top: 48px;
  padding-bottom: 56px; /* SP: Figma SP準拠 — worry〜concept間隔調整 */
  overflow-x: clip; /* SP: worry__bodyの390px幅がviewportを超えるのを防止 */
}

@media (min-width: 768px) {
  .p-worry {
    padding-top: 32px;
    padding-bottom: 32px; /* Figma: worry〜concept間の間隔 */
  }
}

.p-worry .c-heading {
  text-align: center;
}

.p-worry .c-heading {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1rem; /* 16px */
  color: var(--color-accent);
}

.p-worry .c-heading__sub {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.6; /* Figma: ja/heading3-ja */
  color: var(--color-text-sub);
}

.p-worry__body {
  position: relative;
  margin-top: var(--sp-lg);  /* var(--sp-xl)=48px → var(--sp-lg)=32px に変更 */
  min-height: 400px;
}

@media (min-width: 768px) {
  .p-worry__body {
    min-height: 240px; /* Figma: 高さ調整 */
    max-width: 791px;
    margin-inline: auto;
  }
}

/* --- 悩みアイテム共通 --- */
.p-worry__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 吹き出し背景SVG --- */
.p-worry__bubble {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.p-worry__bubble img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* --- 悩みテキスト --- */
.p-worry__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 0.75rem; /* SP: 12px */
  line-height: 1.6;
  color: var(--color-text-sub);
  text-align: left; /* Figma: 吹き出し内テキストは左詰め */
  padding: 24px 20px;
}

@media (min-width: 768px) {
  .p-worry__text {
    font-size: 0.875rem; /* PC: 14px */
    padding: 28px 24px;
  }
}

/* --- Worry highlight（2行目テキストの白背景 — Figma準拠） --- */
.p-worry__line-highlight {
  background-color: #FFFFFF;
  display: inline;
}

/* SP: Figma準拠の絶対配置 */
@media (max-width: 767px) {
  .p-worry__body {
    /* Figma: Illustration Container は 458px 幅、親Containerはviewportから-34pxオフセット */
    /* margin-left = Figmaオフセット(-34px) - l-containerの左マージン(--sp-md=24px) */
    width: 458px;
    margin-left: calc(-34px - var(--sp-md));
    min-height: 387px; /* Figma: Illustration Container height = 386.5px */
  }

  .p-worry__item {
    position: absolute;
    margin: 0;
    width: auto;
  }

  /* Figma: Vector(97:328) left=5px, top=0, width=259px, height=109px */
  .p-worry__item--1 {
    top: 0;
    left: 5px;
    width: 259px;
    height: 109px;
  }

  /* Figma: Vector(97:331) left=172px, top=71px, width=272px, height=115px（右にはみ出す） */
  .p-worry__item--2 {
    top: 71px;
    left: 172px;
    width: 272px;
    height: 115px;
  }

  /* Figma: item3「他の犬や人と触れ合う」→ Group(97:371)の吹き出し位置に対応 */
  /* HTMLのitem3は右下の小さい吹き出し: top=237px, left=171px, width=287px, height=113px（右にはみ出す） */
  .p-worry__item--3 {
    top: 237px;
    left: 171px;
    width: 287px;
    height: 113px;
  }

  /* Figma: item4「しつけが中途半端で」→ Vector(97:334)の大きい吹き出し位置に対応 */
  /* HTMLのitem4は左の大きい吹き出し: top=129px, left=0, width=300px, height=183px */
  .p-worry__item--4 {
    top: 129px;
    left: 0;
    width: 300px;
    height: 183px;
  }

  /* Figma: Group(97:393) イラスト left=43px, top=254px, width=148px */
  .p-worry__illustration {
    position: absolute;
    top: 254px;
    left: 43px;
    width: 148px;
    margin-inline: 0;
  }
}

/* --- PC: Figma準拠の散らばった絶対配置 --- */
@media (min-width: 768px) {
  .p-worry__item {
    position: absolute;
    margin: 0;
    width: auto;
  }

  .p-worry__item--1 {
    top: 15px;
    left: 87px;
    width: 259px;
    height: 109px;
  }

  .p-worry__item--2 {
    top: 0;
    left: 444px;
    width: 272px;
    height: 115px;
  }

  .p-worry__item--3 {
    top: 111px;
    left: 0;
    width: 287px;
    height: 113px;
  }

  .p-worry__item--4 {
    top: 76px;
    left: 491px;
    width: 300px;
    height: 183px;
  }
}

/* --- 中央の犬イラスト（SP/PC両方で表示） --- */
/* SP: Figma準拠148px。base styleをSP max-widthクエリより後ろに書くと
   ソースオーダーバグで上書きされるため、PCのみmin-widthクエリで指定 */
.p-worry__illustration {
  display: block;
  width: 148px; /* SP: Figma SP準拠 148px */
  height: auto;
  margin-inline: auto;
  pointer-events: none;
  z-index: 2;
}

.p-worry__illustration img {
  width: 100%;
  height: auto;
  color: var(--color-illust);
}

@media (min-width: 768px) {
  .p-worry__illustration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 225px;
    margin-inline: 0;
  }
}

/* --- 結び文 --- */
.p-worry__transition {
  text-align: center;
  margin-top: var(--sp-lg);  /* var(--sp-xl)=48px → var(--sp-lg)=32px */
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .p-worry__transition {
    margin-top: var(--sp-lg);  /* Figma: 32px */
  }
}

/* ===== Concept ===== */
.p-concept {
  position: relative;
  background-color: var(--color-surface-soft);
  overflow: hidden;
  /* Figma: セクション上端〜画像上端の間隔 */
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (max-width: 767px) {
  .p-concept {
    width: 100%; /* SP: コンテナ幅崩壊を防止 */
    overflow-x: hidden;
    padding-top: 0; /* SP: Figma SP準拠 — スライダー画像がWorryセクション直下にくっつく */
    padding-bottom: 0; /* Figma: SP時はイラスト群直下にサービスセクションが密接 */
  }
}

@media (min-width: 768px) {
  .p-concept {
    padding-top: 64px;
    padding-bottom: 0;
  }
}

/* --- 上部: 写真 + テキスト --- */
.p-concept__hero {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .p-concept__hero {
    flex-direction: row;
    align-items: stretch;
    min-height: 387px;
    max-width: none;
  }
}

/* 写真エリア */
.p-concept__hero-image {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 390 / 272; /* SP: Figma SP準拠 — 画像フレーム高さ272px */
  overflow: hidden;
  border-radius: 0;
}

@media (min-width: 768px) {
  .p-concept__hero-image {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    height: 387px;
    aspect-ratio: auto;
    border-radius: 0 12px 12px 0;
  }
}

.p-concept__hero-image img,
.p-concept__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-concept__slider {
  width: 100%;
  height: 100%;
}

.p-concept__slider .swiper-wrapper,
.p-concept__slider .swiper-slide {
  height: 100%;
}

/* テキストエリア */
.p-concept__hero-content {
  padding: 64px 16px 24px; /* SP: Figma SP準拠 — スライダー画像下端(y=272)〜Description上端(y=336)の差分64px */
  text-align: center;
}

.p-concept__hero-content .c-heading {
  text-align: center;
}

@media (min-width: 768px) {
  .p-concept__hero-content {
    flex: 1;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
  }

  .p-concept__hero-content .c-heading {
    text-align: left;
    width: 100%;
    max-width: 480px;
  }
}

.p-concept__hero-content .c-heading {
  font-family: var(--font-en); /* Figma: Cormorant Garamond */
  font-weight: 600;
  font-size: 1rem; /* Figma: 16px */
  color: var(--color-accent);
}

.p-concept__hero-content .c-heading__sub {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.6; /* Figma: ja/heading3-ja */
  color: var(--color-text-sub);
}

.p-concept__description {
  margin-top: 24px;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--color-text-sub);
  max-width: 480px;
  width: 100%;
}

@media (max-width: 767px) {
  .p-concept__description {
    text-align: center; /* Figma SP: 中央揃え */
  }
}

/* 装飾ウェーブ */
.p-concept__wave {
  position: absolute;
  pointer-events: none;
  z-index: 3; /* SP: 画像(z-index:2)より上に表示する */
  overflow: hidden;
  left: -8%;
  top: 272px; /* SP: Figma画像高さ272px に合わせてスライダー下端にぴったり接するよう修正 */
  width: 116%;
}

.p-concept__wave img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .p-concept__wave {
    left: 50%; /* SVG左端を画像の右端（= コンテンツ中央）に合わせる */
    top: 326px; /* Figma: Image and Text Section内での波形Y位置(y=325.89) */
    width: 50vw; /* SVG右端を画面の右端に合わせる */
    overflow: visible;
  }
}

/* --- 下部: 4つの特徴カード --- */
/* SP: p-concept__cards 自体がスクロールコンテナ
   cards-inner(カード行)とillustrations(イラスト行)が一緒にスクロールする */
.p-concept__cards {
  padding: 40px 0 0; /* SP: 左右paddingなし（内側のpadding-leftで管理） */
}

@media (max-width: 767px) {
  .p-concept__cards {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 16px; /* cards-inner の padding-left 分だけスナップ基準をずらして初期位置を正す */
    /* Figma: スクロールバー非表示（バー15px分のギャップを解消） */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .p-concept__cards::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

@media (min-width: 768px) {
  .p-concept__cards {
    padding: 40px 0 16px;
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* SP: cards-inner は通常のflexレイアウト（overflowなし） */
.p-concept__cards-inner {
  display: flex;
  gap: 16px;
  padding: 16px 16px 0; /* 上部16px: バッジ(top:-16px)がクリップされるのを防止 */
  min-width: max-content; /* SP: 全カードが横並びに収まる幅を確保 */
}

/* SP: 各カードの幅 — Figma SPでは320×182px（border-box込みで320px固定） */
.p-concept__cards-inner .c-card-concept {
  width: 320px; /* min-width→width: コンテンツ超過でカードが膨らむのを防ぐ */
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* PC: 4列グリッド */
@media (min-width: 768px) {
  .p-concept__cards-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    min-width: 0;
    padding: 0;
    max-width: 1024px;
    margin-inline: auto;
  }

  .p-concept__cards-inner .c-card-concept {
    width: auto; /* SPの width: 320px を上書き */
    min-width: 0;
    scroll-snap-align: unset;
    flex-shrink: 1;
  }
}

/* コンセプトカードコンポーネント */
.c-card-concept {
  position: relative;
  background-color: var(--color-base);
  border-radius: 12px;
  padding: 48px 16px 24px;
}

.c-card-concept__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.75rem; /* 28px */
  line-height: 1.4;
  color: var(--color-base);
}

.c-card-concept__title {
  font-family: var(--font-ja);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.6; /* Figma: ja/heading4-ja */
  color: var(--color-text-sub);
  margin-bottom: var(--sp-sm);
  text-align: center;
}

.c-card-concept__text {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--color-text-sub);
}

/* --- イラスト群 --- */
.p-concept__illustrations {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 0;
  color: var(--color-illust);
}

/* SP: イラスト群 — p-concept__cardsの直下兄弟でスクロール連動する */
@media (max-width: 767px) {
  .p-concept__illustrations {
    justify-content: flex-start;
    gap: 110px; /* SP: カード列(1360px)に合わせて空白を埋める。(1360-16-890-16)÷4≈110px */
    padding: 48px 16px 0; /* top: Figma Main Container gap(48px) / 左右: カードと揃える / bottom: 0（.p-concept の padding-bottom:48px が地面の役割） */
    min-width: max-content; /* スクロールコンテナ幅に合わせて伸びる */
    width: max-content;
    flex-shrink: 0;
  }

  /* PC用イラスト群はSPで非表示（詳細度0,2,0でdisplay:flexを上書き） */
  .p-concept__illustrations.u-pc-only {
    display: none;
  }
}

@media (min-width: 768px) {
  .p-concept__illustrations.u-pc-only {
    display: flex !important; /* (0,2,0) > .u-pc-only の (0,1,0)+!important を上書き */
  }

  .p-concept__illustrations {
    justify-content: center;
    overflow: visible;
    gap: 32px;
  }
}

.p-concept__illust {
  display: block;
  height: auto;
  color: var(--color-illust);
}

.p-concept__illust--1 {
  width: 50px;
  transform: scaleX(-1); /* Figma: 左右反転 */
}

.p-concept__illust--2 {
  width: 125px;
  transform: scaleX(-1); /* Figma: 左右反転 */
}

.p-concept__illust--3 {
  width: 225px;
}

.p-concept__illust--4 {
  width: 185px;
}

.p-concept__illust--5 {
  width: 305px;
}

/* ===== Service ===== */
.p-service {
  background-color: var(--color-base);
  padding-top: 32px; /* Figma SP: padding-top 32px */
  padding-bottom: 48px; /* Figma SP: restored original spacing */
}

@media (min-width: 768px) {
  .p-service {
    padding-top: 32px; /* Figma PC: heading at y=32 */
    padding-bottom: 32px;
  }
}

/* Service見出し: ENとJAの間隔 — Figma準拠で0 */
.p-service .c-heading__sub {
  margin-top: 0;
}

.p-service__inner {
  max-width: 1024px;
  margin-inline: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .p-service__inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* SP: 左寄せ、PC: 中央揃え */
.p-service .c-heading {
  text-align: left;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1rem; /* 16px */
  color: var(--color-accent);
}

.p-service .c-heading__sub {
  text-align: left;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.6; /* Figma: ja/heading3-ja */
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .p-service .c-heading {
    text-align: center;
  }

  .p-service .c-heading__sub {
    text-align: center;
  }
}

.p-service__featured {
  margin-top: 32px; /* Figma SP: 24px→32px gap from heading to cards */
}

@media (min-width: 768px) {
  .p-service__featured {
    margin-top: 32px; /* Figma PC: heading y=0 height=60, content frame y=92 → gap = 32px */
    display: flex; /* Figma: フィーチャーカードを横並びにする */
    gap: 32px; /* Figma: カード間隔 32px */
  }
}

.p-service__sub {
  display: flex;
  flex-direction: column;
  gap: 16px; /* SP: Figma SP準拠 — サブカード間隔を元に戻す */
  margin-top: var(--sp-lg);
}

@media (min-width: 768px) {
  .p-service__sub {
    flex-direction: row;
    gap: 16px;
    margin-top: 24px; /* Figma PC: featured ends at y=240, sub starts at y=264 → gap = 24px */
  }

  /* Hover時: ホバーされていないカードをalphaで暗くする */
  .p-service__sub .c-card-service--overlay {
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .p-service__sub:hover .c-card-service--overlay:not(:hover) {
    opacity: 0.5;
  }
}

/* ===== Q&A ===== */
.p-qa {
  background-color: var(--color-surface-soft);
  position: relative;
  overflow: hidden;
  /* Figmaに合わせてl-section(64px/96px)をoverride */
  padding-top: 32px; /* Figma SP: padding-top 32px */
  padding-bottom: 0px; /* SP: Figma SP準拠 — FAQセクション末尾の犬と女性のSVGを次セクションにぴったり接するよう修正 */
}

@media (min-width: 768px) {
  .p-qa {
    padding-top: 32px;
    padding-bottom: 48px; /* Figma: FAQ Container pb=48px */
  }
}

.p-qa__inner {
  position: relative;
  max-width: 1248px;
  margin-inline: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.p-qa .c-heading {
  text-align: center;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1rem; /* 16px */
  color: var(--color-accent);
}

.p-qa .c-heading__sub {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.5rem; /* 24px */
  line-height: 1.6; /* Figma: ja/heading3-ja */
  color: var(--color-text-sub);
}

.p-qa__body {
  margin-top: var(--sp-xl); /* SP: 48px — Figmaに合わせて間隔を拡大 */
  max-width: 640px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-qa__body {
    margin-top: var(--sp-lg); /* PC: 32px — 元の値を維持 */
  }
}

.p-qa__accordion {
  min-width: 0;
  margin-bottom: 32px; /* SP: Figma SP準拠 — アコーディオン後の余白を縮小 */
}

/* 左上装飾イラスト
 * Figma: FAQコンテナ(px=16px, pt=32px)のpadding-box基準で left=-125px, top=-62px
 * .p-qa の padding-top を PC時32pxにoverride済みなのでFigmaの値をそのまま使用
 * コンテナ上端はborder-top基準で 32-62=-30px（セクション外）→ overflow:hiddenでクリップ
 * ループはborder-top基準で約77px（表示される）
 */
.p-qa__illust-top {
  position: absolute;
  top: -62px;
  left: -125px;
  width: 470px;
  height: 297px;
  display: none; /* SPではu-pc-onlyで非表示。display:flexがu-pc-onlyを上書きするのを防ぐためnoneに */
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 768px) {
  .p-qa__illust-top {
    display: flex; /* PCのみ表示 */
  }
}

.p-qa__illust-top img {
  display: block;
  width: 512px;
  height: 50.3px;
  max-width: none;
  /* Figma: rotate(150.33deg) + scaleY(-1) */
  transform: rotate(150.33deg) scaleY(-1);
}

/* 右下犬イラスト（PC）/ 下部中央（SP） */
.p-qa__illust-bottom {
  pointer-events: none;
  z-index: 0;
}

/* SP: アコーディオン下に中央配置 */
@media (max-width: 767px) {
  .p-qa__illust-bottom {
    display: block;
    position: relative;
    width: 156px; /* Figma SP: node 112:2264 width=156px */
    height: 141px; /* Figma SP: node 112:2264 height=141px */
    margin: 0 auto;
    bottom: auto;
    right: auto;
  }

  .p-qa__illust-bottom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* PC: 右下絶対配置 */
@media (min-width: 768px) {
  .p-qa__illust-bottom {
    position: absolute;
    bottom: 0;
    right: 41px;
  }

  .p-qa__illust-bottom img {
    width: 238px;
    height: 242px;
    object-fit: contain;
  }
}

/* ===== Google Review ===== */
.p-review {
  background-color: var(--color-surface-gray);
  /* Figma: section padding */
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .p-review {
    padding-top: 40px; /* Figma: py-[40px] */
    padding-bottom: 40px; /* Figma: py-[40px] */
  }
}

.p-review__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .p-review__inner {
    padding: 0 64px;
  }
}

.p-review .c-heading {
  text-align: center;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1rem; /* 16px — Figma: Cormorant Garamond Medium */
  color: var(--color-accent);
  line-height: 1.4;
}

.p-review .c-heading__sub {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: 1.5rem; /* 24px — Figma: Zen Old Mincho Bold */
  color: var(--color-text-sub);
  line-height: 1.6;
  margin-top: 0;
}

.p-review__content {
  margin-top: var(--sp-lg);
}

@media (min-width: 768px) {
  .p-review__content {
    margin-top: 27px; /* Figma PC: gap-[27px] */
  }
}

.p-review__placeholder {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fz-sm);
  padding: var(--sp-xl) 0;
}

/* --- Review Carousel --- */
.p-review__carousel {
  position: relative;
  max-width: 1152px;
  margin-inline: auto;
}

.p-review__carousel .swiper {
  overflow: hidden;
}

/* --- Review Card --- */
.p-review__card {
  background-color: var(--color-base);
  border: 1px solid var(--color-subtle); /* Figma: #EAE4DE */
  border-radius: 10px; /* Figma準拠 */
  padding: 21px;
  height: 248px; /* SP: Figma SP準拠 — カード高さを微調整 */
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .p-review__card {
    height: 243px; /* Figma PC: h-[243.188px] */
  }
}

.p-review__card-header {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma: 10px */
}

.p-review__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-dark);
  font-family: 'Jost', var(--font-body); /* Figma: Jost Light */
  font-size: 15px;
  font-weight: 300;
  flex-shrink: 0;
}

.p-review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-review__name {
  font-family: var(--font-ja); /* Figma: Zen Old Mincho */
  font-size: 13px;
  color: #2C2420;
  line-height: 1.5;
}

.p-review__date {
  font-family: 'Jost', var(--font-body); /* Figma: Jost ExtraLight */
  font-size: 10px;
  font-weight: 200;
  color: #B8B0A4;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.p-review__rating {
  margin-top: 14px; /* Figma: rating行は header+14px */
  display: flex;
  align-items: center;
  gap: 6px; /* Figma: 星とバッジの間隔 */
}

.p-review__star {
  color: #F4B400;
  font-family: 'Inter', sans-serif; /* Figma: Inter */
  font-size: 14px;
  letter-spacing: 1.85px;
  line-height: 1;
}

.p-review__badge {
  margin-top: 0; /* Figma: ratingと同じ行 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Jost', var(--font-body); /* Figma: Jost ExtraLight */
  font-size: 9px;
  font-weight: 200;
  color: #4285F4;
  letter-spacing: 0.45px;
}

.p-review__badge-check {
  color: #4285F4;
  font-size: 9px;
}

.p-review__text {
  margin-top: 10px;
  font-family: var(--font-ja); /* Figma: Zen Old Mincho */
  font-size: 12px;
  color: #4A4640;
  line-height: 1.9; /* Figma: 22.8px / 12px = 1.9 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.p-review__read-more {
  margin-top: 6px;
  font-family: 'Jost', var(--font-body); /* Figma: Jost ExtraLight */
  font-size: 10px;
  font-weight: 200;
  color: #8C7B6E;
  letter-spacing: 1px;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.p-review__read-more:hover {
  opacity: 0.7;
}

/* --- Carousel Navigation --- */
.p-review__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-base);
  border: 1px solid var(--color-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  color: var(--color-text-main);
  transition: opacity var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  padding: 0;
  line-height: 1;
}

.p-review__nav:hover {
  box-shadow: var(--shadow-sm);
}

.p-review__nav--prev {
  left: -16px;
}

.p-review__nav--next {
  right: -16px;
}

@media (max-width: 767px) {
  .p-review__nav--prev {
    left: -4px;
  }

  .p-review__nav--next {
    right: -4px;
  }
}

.p-review__nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Review Action Link --- */
.p-review__action {
  margin-top: var(--sp-lg);
  text-align: center;
}

@media (min-width: 768px) {
  .p-review__action {
    margin-top: 27px; /* Figma PC: gap-[27px] */
  }
}

.p-review__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted); /* Figma: #69645A */
  font-family: var(--font-ja); /* Figma: Zen Old Mincho Medium */
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline; /* Figma準拠 */
  text-decoration-thickness: 1px; /* Figma: 細い下線 */
  text-underline-offset: 2px;
  letter-spacing: var(--ls-normal);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.p-review__link:hover {
  opacity: 0.7;
}

.p-review__link-icon {
  width: 16px; /* Figma: 16px */
  height: 16px;
  flex-shrink: 0;
}

.p-review__link-arrow {
  display: none; /* Figmaにはarrowなし */
}

/* ===== Access ===== */
.p-access {
  background-color: var(--color-base);
  /* Figma: SP用にパディング追加 */
  padding-top: 32px; /* Figma SP: padding-top 32px */
  padding-bottom: 32px; /* SP: Figma SP準拠 — セクション下部余白 32px */
}

@media (min-width: 768px) {
  .p-access {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Figma: Google Mapはviewport左端フラッシュ。l-containerをoverride */
@media (min-width: 768px) {
  .p-access .l-container {
    width: 100%;
    max-width: none;
  }
}

/* SP (default): heading → map → info の縦並び */
.p-access__body {
  display: flex;
  flex-direction: column;
  gap: 24px; /* SP: Figma SP準拠 — heading/map/info間隔を縮小 */
}

@media (min-width: 768px) {
  .p-access__body {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    align-items: start;
  }
}

.p-access__heading {
  display: flex;
  flex-direction: column;
  gap: 0; /* Figma: ENとJAの間隔を詰める */
  text-align: center;
  order: -1; /* SP: heading を先頭に */
  padding-top: 8px;
}

@media (min-width: 768px) {
  .p-access__heading {
    text-align: left;
    order: 0;
    grid-column: 2;
    grid-row: 1;
    padding-top: 48px; /* Figma: py-[48px] on details container */
    align-self: start;
    margin-inline: auto;
    margin-bottom: 32px; /* Figma: gap-[32px] between title and info */
    width: min(506px, 100%); /* Figma: w-[506px] */
  }
}

.p-access__map {
  position: relative;
  width: 100%;
  max-width: 100%; /* SP: コンテナ幅超過を防止 */
  padding-bottom: 56%; /* SP: Figma SP準拠 — 地図のアスペクト比を微調整 */
  border-radius: 0; /* Figma: 角丸なし */
  overflow: hidden;
}

@media (min-width: 768px) {
  .p-access__map {
    grid-column: 1;
    grid-row: 1 / -1;
    padding-bottom: 0;
    height: 440px;
    border-radius: 0;
  }
}

.p-access__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Access Info（情報テーブル） */
.p-access__info {
  width: 100%;
}

@media (min-width: 768px) {
  .p-access__info {
    grid-column: 2;
    grid-row: 2;
    width: min(506px, 100%); /* Figma: w-[506px] */
    margin-inline: auto;
    padding-bottom: 48px; /* Figma: py-[48px] bottom */
  }
}

.p-access__title-en {
  font-family: var(--font-en);
  font-size: 1rem; /* 16px — 他セクションのc-headingと統一 */
  font-weight: 500;
  letter-spacing: var(--ls-en);
  color: var(--color-accent);
  line-height: var(--lh-tight);
}

.p-access__title-ja {
  font-family: var(--font-ja);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: var(--ls-normal);
}

/* Access Info */
.c-access-info {
  margin: 0;
}

.c-access-info__row {
  display: flex;
  gap: 10px; /* Figma: 10px */
  padding-bottom: 16px; /* Figma: pb 16px */
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-subtle); /* Figma: #EAE4DE */
}

.c-access-info__row:last-child {
  margin-bottom: 0;
}

.c-access-info__row:first-child {
  border-top: none; /* Figma: border-topなし */
}

.c-access-info__label {
  flex-shrink: 0;
  width: 80px;
  font-family: var(--font-ja); /* Figma: Zen Old Mincho Medium */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-accent); /* Figma: #80746A */
}

.c-access-info__value {
  flex: 1;
  max-width: 310px;
  font-family: var(--font-ja); /* Figma: Zen Old Mincho Medium */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-sub); /* Figma: #4A4844 */
}

/* ===== Contact ===== */
/* p-contactのスタイルはcomponent/_contact.cssに移動（全ページ共通読み込み） */

/* =====================================================
 * SP専用オーバーライド（優先度 高→中→低）
 * すべて @media (max-width: 767px) 内に限定
 * ===================================================== */

@media (max-width: 767px) {

  /* --- 優先度 高 --- */

  /* 1. Hero スライダー背景を SP でも表示 */
  .p-hero__slider-bg {
    display: block;
  }

  /* 2. Hero padding-top: ナビとヒーローテキストのギャップ修正 */
  /* Figma SP: 31px（ヘッダーはposition: relativeのため補正不要） */
  .p-hero {
    padding-top: 31px;
  }

  /* 2b. Hero inner gap: Figma SP: 31px */
  .p-hero__inner {
    gap: 31px;
  }

  /* 3. Hero wave: スライダーへの重なりを解消 */
  .p-hero__wave {
    margin-top: 0;
  }

  /* 4. Hero wave img: 結び目SVGを左右反転（ユーザー指定優先） */
  .p-hero__wave img {
    transform: scaleX(-1);
  }


  /* 5. Worry container: SP左マージンを --sp-lg(32px) → --sp-md(24px) に縮小して折り返し解消 */
  .p-worry .l-container {
    width: min(var(--content-width), 100% - var(--sp-md) * 2);
  }

  /* 6. Worry text: font-size 12px → 14px */
  .p-worry__text {
    font-size: 0.875rem; /* 14px */
  }

  /* 7. Access コンテナ: margin 32px → 16px */
  #access .l-container {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  /* 8. Worry transition: ユーザー指示「SPのみ margin-top: 0（ベタ付け）」 */
  .p-worry__transition {
    margin-top: 0;
  }

  /* --- 優先度 中 --- */

  /* Review content: trustindexウィジェット読み込み前の最小高さ確保 */
  .p-review__content {
    min-height: 266px;
  }

  /* Q&A body: margin-top 48px → 32px (Figma SP準拠) */
  .p-qa__body {
    margin-top: 32px;
  }

  /* 8. Concept description: margin-top 24px → 32px */
  .p-concept__description {
    margin-top: 32px;
  }

  /* 9. Concept cards: padding-top を縮小して見た目の上間隔を調整 */
  .p-concept__cards {
    padding-top: 32px;
  }

  /* 10. Access info value: 幅を Figma 値に広げる */
  .c-access-info__value {
    max-width: 268px;
  }

  /* 11. Concept セクション: graybg は Figma でも #f9f7f4 が正しいため変更不要 */
  /* .p-concept { background-color: var(--color-base); } — 適用しない */

  /* 12. Concept wave（結び目SVG）と p-concept__hero-content の間隔 */
  .p-concept__wave {
    margin-top: 0;
  }

  /* --- 優先度 低 --- */

  /* 13. FAQ 下部SVG: お客様の声とベタ付け */
  .p-qa__illust-bottom {
    margin-bottom: 0;
  }

  /* 14. Concept 下部SVG（イラスト群）と Service の境界 */
  .p-concept__illustrations {
    padding-bottom: 0;
  }

  /* 15. Worry 円形: 両外側にはみ出す設定 */
  .p-worry {
    overflow-x: visible;
  }
  .p-worry__body {
    overflow: visible;
  }

  /* 16. Worry padding-bottom: Figma SP準拠 0px */
  /* Figma: Worry Container と次セクションはベタ付け（gap = 0px） */
  .p-worry {
    padding-bottom: 0;
  }
}