@charset "UTF-8";
/* ==========================================================================
   layout.css ── 全ページ共通の枠
   ヘッダー／SPメニュー／SPの追従CTA／お問い合わせ帯／アクセス／パンくず／フッター
   ========================================================================== */

/* ---- ヘッダー（PC：高さ100・ページの上に重なる） ---- */
.pw-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; justify-content: space-between; align-items: center;
	height: 100px; padding-left: calc(120 * var(--pw-unit));
	background: rgba(255, 255, 255, .4); border-bottom: 1px solid var(--pw-color-border);
	transition: background-color var(--pw-time-hover) var(--pw-ease-io);
}
/* スクロールしたら白100%（半透明のままだと本文の上で読めない）。2026-09-30 大浦さん決定 */
.pw-scrolled .pw-header { background: rgba(255, 255, 255, 1); }
html { scroll-padding-top: 100px; }
.pw-header__brandwrap { font-size: inherit; font-weight: inherit; line-height: inherit; }
.pw-header__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--pw-color-text); }
.pw-header__tagline { font-size: 10px; line-height: 2; letter-spacing: .16em; margin-right: -.16em; white-space: nowrap; }
.pw-header__nav { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.pw-header__row { display: flex; align-items: center; gap: min(32px, calc(32 * var(--pw-unit))); }
.pw-header__row a { display: block; font-size: 16px; line-height: 29px; color: var(--pw-color-text); white-space: nowrap; transition: color var(--pw-time-hover) var(--pw-ease-io); }
@media (hover: hover) { .pw-header__row a:hover { color: var(--pw-color-primary); } }
.pw-header__cta { display: flex; align-self: stretch; }
.pw-navbtn {
	display: flex; align-items: center; width: calc(204 * var(--pw-unit)); padding: 8px calc(24 * var(--pw-unit));
	font-size: 16px; line-height: 29px; color: var(--pw-color-white); white-space: nowrap;
	background: var(--pw-btn-bg);
}
.pw-navbtn:link, .pw-navbtn:visited { color: var(--pw-color-white); }
.pw-navbtn--accent { --pw-btn-bg: var(--pw-color-accent); --pw-btn-dark: var(--pw-color-accent-dark); justify-content: flex-start; gap: 8px; }
/* 「お問い合わせ」の文字をボタン全体の左右中央に（2026-10-02 大浦さん）。矢印と同じ幅 30 の空きを左に置いて対称にする。狭い幅では空きが縮み、文字は矢印に重ならない */
.pw-navbtn--accent::before { content: ""; flex: 0 1 auto; width: 30px; min-width: 0; }
.pw-navbtn--accent .pw-navbtn__label { flex: 1 0 auto; text-align: center; }
.pw-navbtn--accent .pw-btn__arrow { flex: none; }
.pw-navbtn--accent { padding-inline: calc(16 * var(--pw-unit)); }   /* 204 幅で 文字 96＋左右（空き 30＋間 8＋余白 16）がちょうど収まる。Figma の余白 24 だと 8px 左に寄る */
.pw-navbtn--line { --pw-btn-bg: var(--pw-color-line); --pw-btn-dark: var(--pw-color-line-dark); justify-content: center; gap: 8px; }
.pw-header__toggle { display: none; }

/* ---- SPメニュー ---- */
.pw-spmenu {
	position: fixed; inset: 0; z-index: 90; overflow: hidden auto;
	background: var(--pw-color-primary); color: var(--pw-color-white);
	opacity: 0; translate: 0 10px;
	transition: opacity .3s cubic-bezier(0, .55, .45, 1), translate .3s cubic-bezier(0, .55, .45, 1);
}
.pw-spmenu[hidden] { display: none; }
html.pw-menu-open, html.pw-menu-open body { overflow: hidden; }
.pw-spmenu.is-open { opacity: 1; translate: 0 0; }
.pw-spmenu__nav { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(335px, 100% - 40px); margin: 108px auto 0; }
.pw-spmenu__list { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pw-spmenu__list a { display: block; font-size: 16px; line-height: 29px; color: var(--pw-color-white); }
.pw-spmenu__cta { display: flex; flex-direction: column; gap: 24px; width: min(335px, 100% - 40px); margin: 32px auto 48px; }

/* ---- SPの追従CTA ---- */
.pw-fixedcta { display: none; }

/* ---- お問い合わせ帯（緑） ---- */
.pw-contact-band { position: relative; padding: 40px 0; background: var(--pw-color-primary); color: var(--pw-color-white); overflow: hidden; }
.pw-contact-band__inner { display: flex; align-items: center; gap: calc(130 * var(--pw-unit)); max-width: 1440px; margin-inline: auto; }
.pw-contact-band__visual { position: relative; flex: none; width: calc(590 * var(--pw-unit)); aspect-ratio: 590 / 473.06; }
.pw-boxphoto { position: absolute; inset: 0; -webkit-mask: var(--pw-boxphoto-mask) no-repeat center / 100% 100%; mask: var(--pw-boxphoto-mask) no-repeat center / 100% 100%; }
.pw-boxphoto__img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; }
.pw-contact-band__visual .pw-boxphoto { --pw-boxphoto-mask: url(../img/contact_mask_pc.svg); }
.pw-contact-band__visual .pw-boxphoto__img { left: -.339%; width: 100.339%; top: -35.08%; }
.pw-contact-band__body { display: flex; flex-direction: column; gap: 47px; width: 600px; max-width: calc(100% - var(--pw-gutter)); }
.pw-contact-band__heading { display: flex; flex-direction: column; gap: 16px; }
.pw-contact-band__lead { font-size: 14px; line-height: 25px; letter-spacing: .16em; }
.pw-contact-band__buttons { display: flex; flex-wrap: wrap; gap: 24px; }

/* ---- アクセス ---- */
.pw-access { padding: 32px 0; background: var(--pw-color-bg); }
.pw-access__inner { display: flex; flex-direction: column; gap: 26px; width: min(920px, 100% - var(--pw-gutter) * 2); margin-inline: auto; }
.pw-access__heading { display: flex; flex-direction: column; align-items: flex-start; height: 72px; }
.pw-access__body { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.pw-access__main { display: flex; flex-direction: column; gap: 72px; width: 100%; }
.pw-access__map { position: relative; width: calc(100% + 2px); margin-left: -2px; height: 423px; background: #D9D9D9; overflow: hidden; }
.pw-access__map iframe { width: 100%; height: 100%; border: 0; }
.pw-access__info { display: flex; justify-content: space-between; gap: 24px; }
.pw-access__shop { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 336px; max-width: 100%; }
.pw-access__list { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.pw-access__row { display: flex; align-items: center; gap: 16px; }
.pw-access__row--top { align-items: flex-start; }
.pw-access__row dt { flex: none; width: 56px; font-size: 16px; line-height: 1.5; color: var(--pw-color-primary); }
.pw-access__row dd { font-size: 16px; line-height: 29px; }
.pw-access__hours { display: flex; flex-direction: column; gap: 16px; width: 460px; max-width: 100%; }
.pw-hours { width: 100%; table-layout: fixed; }
.pw-hours th, .pw-hours td { height: 48px; padding: 0; text-align: center; vertical-align: middle; font-size: 16px; line-height: 29px; font-weight: 500; }
.pw-hours thead th { background: var(--pw-color-primary); color: var(--pw-color-white); }
.pw-hours tbody :where(th, td) { background: var(--pw-color-bg-green10); color: var(--pw-color-text); }
.pw-hours__first { width: 144px; }
.pw-hours__mark { position: relative; display: inline-block; width: 12px; height: 12px; vertical-align: middle; }
.pw-hours__mark--open, .pw-hours__mark--note { background: url(../img/table_circle.svg) no-repeat center / 12px 12px; }
.pw-hours__mark--note::after { content: "*"; position: absolute; left: 100%; top: -12px; font-size: 14px; line-height: 1.4; color: var(--pw-color-primary); }
.pw-hours__mark--closed { height: 2px; background: var(--pw-color-primary); }
.pw-access__notes { width: 265px; max-width: 100%; font-size: 14px; line-height: 25px; }

/* ---- 下層ページの最初の画面（英字・h1・リード・パンくず）。ヘッダー100px のぶんを含めて上 152 ---- */
.pw-pagehead { padding: 152px 0 31px; background: var(--pw-color-bg); }
.pw-pagehead__inner { width: min(var(--pw-content), 100% - var(--pw-gutter) * 2); margin-inline: auto; }
.pw-pagehead__title { font-size: 32px; font-weight: 500; line-height: 58px; color: var(--pw-color-text); }
.pw-pagehead__lead { margin-top: 16px; font-size: 14px; line-height: 25px; letter-spacing: .16em; }
.pw-pagehead .pw-breadcrumb--top { margin-top: 32px; }

/* ---- パンくず（上は最初の画面の中、下はページの下） ---- */
.pw-breadcrumb--bottom { padding: 48px var(--pw-gutter); background: var(--pw-color-bg); }
.pw-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; line-height: 20px; letter-spacing: .0214em; }   /* 記事では4段になり SP で2行に折り返す（Figma blogpost_SP と同じ。点は行頭に付く） */
.pw-breadcrumb__list li + li { display: flex; align-items: center; gap: 16px; color: var(--pw-color-primary); }
.pw-breadcrumb__list li + li::before { content: ""; width: 4px; height: 4px; background: var(--pw-color-primary); }

/* ---- フッター ---- */
.pw-footer { padding: 64px 0; background: var(--pw-color-secondary); color: var(--pw-color-white); }
.pw-footer__inner { display: flex; flex-direction: column; gap: 64px; width: min(var(--pw-content), 100% - var(--pw-gutter) * 2); margin-inline: auto; }
.pw-footer__top { display: flex; justify-content: space-between; gap: 40px; }
.pw-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pw-footer__lead { font-size: 14px; line-height: 25px; }
.pw-footer__insta { display: block; transition: opacity var(--pw-time-hover) var(--pw-ease-io); }
@media (hover: hover) { .pw-footer__insta:hover { opacity: .7; } }
.pw-footer__navs { display: flex; justify-content: flex-end; gap: 64px; }
.pw-footer__nav { display: flex; flex-direction: column; gap: 16px; }
.pw-footer__nav--service { width: 208px; }
.pw-footer__heading { font-family: var(--pw-font-en); font-weight: 500; font-size: 20px; line-height: 36px; }
.pw-footer__list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pw-footer__list a { display: block; font-size: 16px; line-height: 29px; white-space: nowrap; }
.pw-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-top: 1px solid var(--pw-color-border-green); }
.pw-footer__policy { display: flex; align-items: center; gap: 40px; }
.pw-footer__policy a, .pw-footer__copy { display: block; font-size: 12px; line-height: 22px; }
.pw-footer__copy { width: 174.11px; white-space: nowrap; }
/* メニューのホバー：下線が左から伸び、離すと右へ縮む */
.pw-footer__list a, .pw-footer__policy a {
	background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
	transition: background-size var(--pw-time-hover) var(--pw-ease-io);
}
@media (hover: hover) {
	:is(.pw-footer__list, .pw-footer__policy) a:hover { background-position: 0 100%; background-size: 100% 1px; }
}

/* ==========================================================================
   ヘッダーをハンバーガーに切り替える幅（仮：1279px 以下。実測のうえ候補を出して決める）
   ========================================================================== */
@media (max-width: 1279px) {
	.pw-header { position: sticky; top: 0; height: auto; padding: 16px; }
	html { scroll-padding-top: 69px; }
	.pw-pagehead { padding-top: 83px; }   /* ヘッダーが流れの中（69px）に入るぶんを引く（152−69） */
	.pw-header__tagline, .pw-header__nav, .pw-header__cta { display: none; }
	.pw-header__brand .pw-logo { gap: 0; }
	.pw-header__brand .pw-logo__en { font-size: 20px; letter-spacing: .2em; margin-right: -.2em; }
	.pw-header__toggle { position: relative; z-index: 1; display: block; width: 32px; height: 36px; }
	.pw-header__bar { position: absolute; left: 0; width: 32px; height: 1px; background: var(--pw-color-primary); transition: rotate .3s cubic-bezier(0, .55, .45, 1), scale .3s cubic-bezier(0, .55, .45, 1), top .3s cubic-bezier(0, .55, .45, 1), background-color .3s; }
	.pw-header__bar:nth-child(1) { top: 14px; }
	.pw-header__bar:nth-child(2) { top: 18px; }
	.pw-header__bar:nth-child(3) { top: 22px; }
	/* メニューを開いたとき：ヘッダーは透明・ロゴと×は白 */
	.pw-menu-open .pw-header, .pw-scrolled.pw-menu-open .pw-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; }
	.pw-menu-open .pw-header :where(.pw-logo, .pw-logo__en, .pw-logo__ja) { color: var(--pw-color-white); }
	.pw-menu-open .pw-header__bar { background: var(--pw-color-white); top: 18px; }
	.pw-menu-open .pw-header__bar:nth-child(1) { rotate: 14.04deg; }
	.pw-menu-open .pw-header__bar:nth-child(2) { scale: 0 1; }
	.pw-menu-open .pw-header__bar:nth-child(3) { rotate: -14.04deg; }
}

/* ==========================================================================
   SP（767px 以下）
   ========================================================================== */
@media (max-width: 767px) {
	.pw-fixedcta {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pw-fixedcta__btn { display: flex; justify-content: center; align-items: center; height: 64px; padding: 16px; font-size: 14px; line-height: 25px; color: var(--pw-color-white); white-space: nowrap; }
	.pw-fixedcta__btn:link, .pw-fixedcta__btn:visited { color: var(--pw-color-white); }
	.pw-fixedcta__btn--mail { gap: 4px; background: var(--pw-color-accent); }
	.pw-fixedcta__btn--line { gap: 4px; background: var(--pw-color-line); }
	.pw-fixedcta__icon { display: grid; place-items: center; width: 22px; height: 22px; }
	.pw-fixedcta__btn--line img { width: 34px; height: 34.07px; }
	.pw-menu-open .pw-fixedcta { display: none; }
	body.pw-body { padding-bottom: 64px; }

	.pw-contact-band { padding: 120px 0 48px; }
	.pw-contact-band__inner { display: block; }
	.pw-contact-band__visual { position: absolute; left: calc(178 * var(--pw-unit-sp)); top: 8.09px; width: calc(230 * var(--pw-unit-sp)); aspect-ratio: 230 / 184.41; }
	.pw-contact-band__visual .pw-boxphoto { --pw-boxphoto-mask: url(../img/contact_mask_sp.svg); }
	.pw-contact-band__visual .pw-boxphoto__img { left: 0; width: 86.087%; top: -36.39%; }
	.pw-contact-band__body { position: relative; gap: 32px; width: min(335px, 100% - 40px); max-width: none; margin-inline: auto; }
	.pw-contact-band__buttons { flex-direction: column; gap: 24px; }
	.pw-contact-band__buttons .pw-btn { display: flex; width: 100%; }
	.pw-contact-band__buttons .pw-btn--accent .pw-btn__label { text-align: center; }
	.pw-contact-band__buttons .pw-btn--line .pw-btn__body { justify-content: center; }

	.pw-access { padding: 24px 0 25px; }
	.pw-access__inner { gap: 19px; width: min(335px, 100% - 40px); }
	.pw-access__heading { height: auto; }
	.pw-access__body { align-items: flex-start; gap: 24px; }
	.pw-access__main { gap: 19px; }
	.pw-access__map { width: 100%; margin-left: 0; }
	.pw-access__info { flex-direction: column; gap: 24px; }
	.pw-access__shop { gap: 16px; width: 100%; }
	.pw-access__hours { width: 100%; }
	.pw-hours th, .pw-hours td { font-size: 14px; line-height: 20px; }
	.pw-hours__first { width: 124px; }

	.pw-breadcrumb--bottom { padding: 24px 20px; }
	.pw-pagehead { padding: 40px 0; }
	.pw-pagehead__title { font-size: 24px; line-height: 43px; }
	.pw-pagehead__lead { margin-top: 8px; }
	.pw-pagehead .pw-breadcrumb--top { margin-top: 24px; }

	.pw-footer { padding: 56px 0; }
	.pw-footer__inner { gap: 32px; width: min(335px, 100% - 40px); }
	.pw-footer__top { flex-direction: column; gap: 24px; }
	.pw-footer__line { display: none; }
	.pw-footer__navs { flex-direction: column; justify-content: flex-start; gap: 24px; }
	.pw-footer__list { gap: 16px; }
	.pw-footer__bottom { flex-direction: column; align-items: flex-start; gap: 29px; }
}