@charset "UTF-8";
/* ==========================================================================
   page-store.css ── 店舗案内・アクセス
   値は Figma の access_PC（544:29067）／access_SP（544:29379）のもの
   ========================================================================== */

/* ---- 1. Two Shops ---- */
.pw-s2shop { padding: 0 var(--pw-gutter) 88px; background: var(--pw-color-bg); }
.pw-s2shop__hero { width: calc(100% + var(--pw-gutter) * 2); margin-inline: calc(var(--pw-gutter) * -1); aspect-ratio: 1440 / 516; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-s2shop__hero img { width: 100%; height: 100%; object-fit: cover; }
.pw-s2shop__heading { width: min(428px, 100%); margin: 64px auto 0; }
.pw-s2shop__box { width: min(1040px, 100%); margin: 64px auto 0; padding: 64px 80px; background: var(--pw-color-white); border: 2px solid var(--pw-color-primary); border-radius: 8px; }   /* 線 2px を含めて 66／82 */
.pw-s2shop__cols { display: grid; grid-template-columns: 404px 404px; column-gap: 96px; }   /* Figma：列 404×2＋96＝904（枠の右の余白 82 を 28 食う） */
.pw-s2shop__label { color: var(--pw-color-primary); }
.pw-s2shop__name { font-size: 26px; font-weight: 500; line-height: 47px; }
.pw-s2shop__photo { width: 380px; max-width: 100%; margin-top: 16px; aspect-ratio: 380 / 268; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-s2shop__photo img { width: 100%; height: 100%; object-fit: cover; }
.pw-s2shop__info { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.pw-s2shop__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.pw-s2shop__row dd { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 25px; letter-spacing: .16em; padding-top: 1px; white-space: nowrap; }   /* 1行目の値は 292（Figma 290）。折り返さず 1px はみ出す */
.pw-s2shop__row dd.pw-s2shop__note { flex: 0 0 100%; margin-top: -8px; padding-top: 0; font-size: 12px; line-height: 22px; letter-spacing: 0; white-space: normal; }   /* 注記は行の左端から。行の間隔 16 → 8 */   /* 注記は行の左端（ピルの下）から */
.pw-s2shop__reserve { display: flex; align-items: flex-start; gap: 24px; margin-top: 64px; padding: 16px 24px; background: var(--pw-color-bg-yellowgreen); }
.pw-s2shop__icon { flex: none; width: 34.7px; height: 29.5px; }
.pw-s2shop__reserve-body { flex: 1 1 0; min-width: 0; }
.pw-s2shop__reserve-ttl { font-size: 16px; font-weight: 500; line-height: 29px; color: var(--pw-color-primary); }
.pw-s2shop__reserve-text { margin-top: 10px; font-size: 14px; line-height: 25px; }

/* ---- 2. Our Shop ---- */
.pw-sshop { position: relative; padding: 96px 0; background: var(--pw-color-bg); overflow: hidden; }
.pw-sshop__inner { width: min(var(--pw-content), 100% - var(--pw-gutter) * 2); margin-inline: auto; }
.pw-sshop__heading { width: min(390px, 100%); margin-left: 140px; }   /* 見出しは x260、本文は x720〜1320 */
.pw-sshop__body { position: relative; display: flex; justify-content: flex-end; margin-top: 120px; }
.pw-sshop__photos { position: absolute; left: calc(var(--pw-gutter) * -1); top: -40px; width: var(--pw-sshop-photos); aspect-ratio: 642 / 536; }   /* 写真は画面の左端いっぱい（x0〜642）。1440 未満は画面幅に合わせて縮める（1440 の Figma しか無い） */
.pw-sshop { --pw-sshop-photos: min(642px, 50vw - 60px); }
.pw-sshop__photo { position: absolute; overflow: hidden; background: var(--pw-color-placeholder); }
.pw-sshop__photo img { width: 100%; height: 100%; object-fit: cover; }
.pw-sshop__photo--1 { left: 0; top: 0; width: 73.21%; height: 54.1%; }   /* 470×290 ／ 642×536 */
.pw-sshop__photo--2 { left: 52.02%; top: 64.55%; width: 47.98%; height: 35.45%; }   /* 334,346 308×190 */
.pw-sshop__arrow { position: absolute; left: 571px; top: -136px; width: 136px; height: 116px; }   /* Figma：x691（容器 120 から 571）y2334（本文 2470 の 136 上） */
.pw-sshop__text { width: min(600px, 100% - (var(--pw-sshop-photos) + 78px - var(--pw-gutter))); }   /* 本文は写真の右端＋78 から（1440：720〜1320）。1440 未満は写真に重ならない幅に */
.pw-sshop__ttl { font-size: 20px; font-weight: 500; line-height: 36px; color: var(--pw-color-primary); }
.pw-sshop__text p { margin-top: 16px; font-size: 16px; line-height: 29px; }
.pw-sshop__text p + p { margin-top: 29px; }

/* ---- 3. Safety ---- */
.pw-ssafe { padding: 56px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-ssafe__heading { width: min(364px, 100%); margin-inline: auto; }

/* ---- 4. Information ---- */
.pw-sinfo { padding: 104px var(--pw-gutter); background: var(--pw-color-bg-green10); }
.pw-sinfo__box { width: min(920px, 100%); margin-inline: auto; padding: 32px 88px 56px; background: var(--pw-color-white); border-radius: 8px; }
.pw-sinfo__heading { width: min(364px, 100%); margin-inline: auto; }
.pw-btn--insta .pw-btn__insta { flex: none; width: 24px; height: 24px; }

/* ---- 5. Access & Map ---- */
.pw-smap { padding: 88px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-smap__heading { width: min(372px, 100%); margin-inline: auto; }
.pw-smap__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--pw-content), 100%); margin: 84px auto 0; }
.pw-smap__map { aspect-ratio: 600 / 496; background: #D9D9D9; }
.pw-smap__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.pw-smap__list { display: flex; flex-direction: column; gap: 16px; padding: 34.5px 40px; background: #F5F6E9; }
.pw-smap__row dt { font-size: 18px; line-height: 32px; color: var(--pw-color-primary); }
.pw-smap__row dd { padding: 16px 0; font-size: 16px; line-height: 29px; border-bottom: 1px solid var(--pw-color-border); }
.pw-smap__row:last-child dd { border-bottom: 0; }

/* ==========================================================================
   タブレット（768〜1024px）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-s2shop__box { padding: 40px; }
	.pw-s2shop__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
	.pw-s2shop__row dd { white-space: normal; }
	.pw-sshop__heading { margin-left: 0; }
	.pw-sshop__body { flex-direction: column; margin-top: 40px; }
	.pw-sshop__photos { position: relative; right: auto; top: auto; width: 100%; height: auto; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
	.pw-sshop__photo { position: static; width: auto; height: auto; aspect-ratio: 47 / 29; }
	.pw-sshop__arrow { display: none; }
	.pw-sshop__text { width: 100%; margin-top: 40px; }
	.pw-sinfo__box { padding: 32px 40px 48px; }
	.pw-smap__body { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
	.pw-s2shop { padding: 0 12px 64px; }
	.pw-s2shop__hero { width: calc(100% + 24px); margin-inline: -12px; aspect-ratio: 375 / 420; }
	.pw-s2shop__heading { width: 100%; margin: 92px auto 0; padding-inline: 8px; }
	.pw-s2shop__heading .pw-lead { align-self: stretch; text-align: left; }
	.pw-s2shop__box { margin-top: 32px; padding: 32px 16px; }   /* 線 2px を含めて 34／18 */
	.pw-s2shop__cols { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
	.pw-s2shop__row dd { white-space: normal; }
	.pw-s2shop__row--long dd { flex: 0 0 100%; white-space: normal; }
	.pw-s2shop__row dd.pw-s2shop__note { flex: 0 0 100%; }   /* 注記は行の左端（Figma SP x30） */   /* 長い値はピルの下（Figma SP） */
	.pw-s2shop__name { font-size: 20px; line-height: 36px; }
	.pw-s2shop__photo { width: 100%; aspect-ratio: 315 / 268; }
	.pw-s2shop__reserve { flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; padding: 16px; }
	.pw-s2shop__reserve-body { display: contents; }
	.pw-s2shop__reserve-text { flex: 0 0 100%; margin-top: 0; }
	.pw-sshop { padding: 48px 0; }
	.pw-sshop__inner { width: 100%; }
	.pw-sshop__heading { width: 100%; margin-left: 0; padding-inline: 20px; }
	.pw-sshop__heading .pw-h2 { max-width: 300px; }
	.pw-sshop__body { display: block; margin-top: 40px; }
	.pw-sshop__photos { position: relative; right: auto; top: auto; width: 100%; height: 511.5px; aspect-ratio: auto; }
	.pw-sshop__photo--1 { left: 0; top: 0; width: 100%; height: 290px; }
	.pw-sshop__photo--2 { left: auto; right: 0; top: 322px; width: 81.9%; height: 189.5px; }
	.pw-sshop__arrow { display: none; }   /* Figma の SP に無い */
	.pw-sshop__text { width: 100%; margin-top: 120.5px; padding-inline: 20px; }
	.pw-ssafe { padding: 48px 12px; }
	.pw-ssafe__heading { width: 100%; }
	.pw-sinfo { padding: 72px 12px; }
	.pw-sinfo__box { padding: 32px 16px; }
	.pw-sinfo__heading { width: 100%; }
	.pw-smap { padding: 56px 12px; }
	.pw-smap__heading { width: 100%; }
	.pw-smap__body { grid-template-columns: minmax(0, 1fr); margin-top: 38px; }
	.pw-smap__map { aspect-ratio: 351 / 350; }
	.pw-smap__list { gap: 16px; padding: 24px 40px; }
	.pw-smap__row dd { padding: 16px 0; }
}