@layer reset, base, layout, component, project, utility;
/* ==========================================================================
* style.css — 全ページ共通スタイル
* --------------------------------------------------------------------------
* Project : 美容室 Parko（パーコ） サイトリニューアル
* Updated : 2026-10-11
* --------------------------------------------------------------------------
* 目次
* 01. Layer 宣言
* 02. Reset
* 03. Base / Design Token （:root の変数はすべてここ）
* 04. Layout l-
* 05. Component c-
* 06. Project p-
* 07. Utility u-
* --------------------------------------------------------------------------
* 編集ルール
* - 1行目の @layer 宣言は消さない。消すと上書き関係が崩れる
* - ブレイクポイントは次の2つのみ。他の書き方をしない
* @media (width >= 768px) / @media (width >= 1024px)
* - 詳細度はクラス1つ。!important は 07.Utility 内のみ
* - c- の部品に margin / width を書かない（配置は呼び出し側で指定）
* ========================================================================== */
/* ==========================================================================
02. Reset
========================================================================== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
}
/* ==========================================================================
03. Base / Design Token
========================================================================== */
@layer base {
:root {
/* Color ------------------------------------------------ */
--color-text: #2e2924; /* 墨茶。純黒より柔らかくアンティーク寄りに */
--color-text-sub: #6b6158;
--color-bg: #f4efe6; /* 生成りの紙 */
--color-bg-deep: #ebe3d5;
--color-bg-card: #faf7f1;
--color-bg-white: #fff; /* MV の背景。写真を明るく見せるため紙色にしない */
--color-primary: #4b6173; /* 店内の青い鎧戸から取った色 */
--color-brass: #9a7a4a; /* 真鍮。装飾線・小見出しのみ（本文には使わない） */
--color-border: #cfc4b3;
--color-line: #06c755; /* LINE 公式カラー。予約ボタンのアイコンのみ */
/* Typography ------------------------------------------- */
--ff-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
--ff-mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
--ff-en: "Cormorant Garamond", "Times New Roman", serif;
/* NOTE: クライアント要望で全体を大きめに設定（規約の標準値より各1〜2段階上）。
PC はさらに一段上げる → 下の @media 内で上書き */
--fs-xs: 0.8125rem; /* 13px 注記 */
--fs-sm: 0.9375rem; /* 15px 補助 */
--fs-md: 1.0625rem; /* 17px 本文 */
--fs-lg: 1.3125rem; /* 21px 小見出し */
--fs-xl: 1.625rem; /* 26px 見出し */
/* Spacing ---------------------------------------------- */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 80px;
--space-2xl: 120px;
/* Layout ----------------------------------------------- */
--width-content: 1120px;
--width-narrow: 760px;
--gutter: 16px;
--header-h: 64px;
/* z-index — ここ以外で z-index を直書きしない ---------- */
--z-header: 100;
--z-drawer: 200;
--z-modal: 1000;
@media (width >= 1024px) {
--fs-xs: 0.875rem; /* 14px */
--fs-sm: 1rem; /* 16px */
--fs-md: 1.125rem; /* 18px */
--fs-lg: 1.375rem; /* 22px */
--fs-xl: 1.75rem; /* 28px */
}
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-h); /* 固定ヘッダーの高さ分アンカー位置をずらす */
}
body {
background-color: var(--color-bg);
/* 紙の繊維感。画像ファイルを増やさないため SVG ノイズをインラインで持つ */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
font-family: var(--ff-base);
font-size: var(--fs-md);
line-height: 1.9;
letter-spacing: .04em;
color: var(--color-text);
font-feature-settings: "palt" 0;
}
body.is-nav-open { overflow: hidden; }
a {
color: inherit;
text-underline-offset: .25em;
text-decoration-thickness: 1px;
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px; /* A11Y: キーボード操作時のフォーカス表示。消さない（WCAG 2.4.7） */
}
iframe { max-width: 100%; }
address { font-style: normal; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
/* A11Y: 動きに酔う利用者向け。アニメーションを一律で無効化する（WCAG 2.3.3） */
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
}
/* ==========================================================================
04. Layout
========================================================================== */
@layer layout {
/* --------------------------------------------------------------------------
l-header — サイト共通ヘッダー
使用箇所 : 全ページ
構成 : l-header > __inner > __logo + __nav( > __list ) + __actions + __trigger
変化 : 1024px未満はナビをドロワー化 / 1024px以上で横並び
注意 : 高さは --header-h と連動。変える場合は変数側を直す
-------------------------------------------------------------------------- */
.l-header {
position: sticky;
top: 0;
z-index: var(--z-header);
height: var(--header-h);
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
border-bottom: 1px solid var(--color-border);
backdrop-filter: blur(6px);
.l-header__inner {
display: flex;
align-items: center;
gap: var(--space-md);
height: 100%;
max-width: calc(var(--width-content) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.l-header__logo {
margin-right: auto;
img { width: 92px; }
}
.l-header__nav {
position: fixed;
inset: var(--header-h) 0 0 0;
z-index: var(--z-drawer);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-lg);
padding: var(--space-lg) var(--gutter);
background: var(--color-bg);
opacity: 0;
visibility: hidden;
transition: opacity .4s, visibility .4s;
&.is-open { opacity: 1; visibility: visible; }
@media (width >= 1024px) {
position: static;
flex-direction: row;
padding: 0;
background: none;
opacity: 1;
visibility: visible;
}
}
.l-header__list {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
@media (width >= 1024px) {
flex-direction: row;
gap: var(--space-lg);
}
a {
display: grid;
justify-items: center;
font-family: var(--ff-mincho);
font-size: var(--fs-lg);
line-height: 1.3;
text-decoration: none;
&:hover { color: var(--color-primary); }
@media (width >= 1024px) { font-size: var(--fs-sm); }
}
}
.l-header__en {
font-family: var(--ff-en);
font-size: var(--fs-xs);
font-style: italic;
letter-spacing: .12em;
color: var(--color-brass);
}
.l-header__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.l-header__trigger {
display: grid;
place-content: center;
gap: 6px;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
&::before, &::after {
content: "";
width: 26px;
height: 1px;
background: currentColor;
transition: transform .3s;
}
&[aria-expanded="true"]::before { transform: translateY(3.5px) rotate(20deg); }
&[aria-expanded="true"]::after { transform: translateY(-3.5px) rotate(-20deg); }
@media (width >= 1024px) { display: none; }
}
}
/* --------------------------------------------------------------------------
l-inner — コンテンツ幅の箱
使用箇所 : 全ページの各セクション
構成 : l-inner 単体
変化 : --narrow で読み物幅（760px）
注意 : 左右余白は --gutter。セクションの上下余白は p- 側で持つ
-------------------------------------------------------------------------- */
.l-inner {
max-width: calc(var(--width-content) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
&.l-inner--narrow { max-width: calc(var(--width-narrow) + var(--gutter) * 2); }
}
/* --------------------------------------------------------------------------
l-footer — サイト共通フッター
使用箇所 : 全ページ
構成 : l-footer > l-inner > __body( > __logo + __info ) + __links + __copy
変化 : 768px以上で左右2カラム
注意 : 店舗情報は p-access と同じ内容。片方だけ直さないこと
-------------------------------------------------------------------------- */
.l-footer {
--wave-color: var(--color-text);
padding-block: var(--space-xl) var(--space-lg);
background: var(--color-text);
font-size: var(--fs-sm);
color: var(--color-bg);
.l-footer__body {
display: grid;
gap: var(--space-lg);
@media (width >= 768px) {
grid-template-columns: auto 1fr auto;
align-items: start;
}
}
.l-footer__logo img {
width: 120px;
filter: invert(93%) sepia(10%); /* 黒ロゴを生成り色で抜くため。白版ロゴ支給後は差し替え */
}
.l-footer__info { line-height: 2; }
.l-footer__links {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-md);
a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
text-decoration: none;
&:hover { text-decoration: underline; }
}
svg { width: 18px; height: 18px; }
}
.l-footer__copy {
margin-top: var(--space-xl);
padding-top: var(--space-md);
border-top: 1px solid color-mix(in srgb, var(--color-bg) 25%, transparent);
font-family: var(--ff-en);
font-size: var(--fs-sm);
letter-spacing: .1em;
color: color-mix(in srgb, var(--color-bg) 75%, transparent);
text-align: center;
}
}
}
/* ==========================================================================
05. Component
========================================================================== */
@layer component {
/* --------------------------------------------------------------------------
c-heading — セクション見出し（英字ラベル＋和文）
使用箇所 : トップ全セクション / お知らせ一覧
構成 : c-heading > __num + __en + __ja
変化 : --left で左揃え（標準は中央）
注意 : 下の余白は持たない。親の gap で取る
-------------------------------------------------------------------------- */
.c-heading {
display: grid;
justify-items: center;
gap: 4px;
text-align: center;
&.c-heading--left { justify-items: start; text-align: left; }
.c-heading__num {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--ff-en);
font-size: var(--fs-sm);
letter-spacing: .2em;
color: var(--color-brass);
&::before, &::after {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
}
.c-heading__en {
font-family: var(--ff-en);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 400;
font-style: italic;
line-height: 1.1;
letter-spacing: .02em;
}
.c-heading__ja {
font-family: var(--ff-mincho);
font-size: var(--fs-sm);
letter-spacing: .3em;
color: var(--color-text-sub);
}
}
/* --------------------------------------------------------------------------
c-wave — セクション境目のゆるい波形
使用箇所 : トップ MV（下）/ メニュー（上下）/ 全ページのフッター（上）
構成 : 付けたセクション自身の ::before（上の波）/ ::after（下の波）
変化 : --top 上側に波 / --bottom 下側に波（併用可）
注意 : 波の色は呼び出し側で --wave-color に自分の背景色を入れる。
波は隣のセクションの余白に重なるので、隣側は上下に余白を持たせておく
-------------------------------------------------------------------------- */
.c-wave {
position: relative;
&.c-wave--top::before,
&.c-wave--bottom::after {
content: "";
position: absolute;
inset-inline: 0;
height: 20px;
background: var(--wave-color, var(--color-bg));
/* 1周期だけのゆるい波。幅に合わせて伸縮させ、どの画面幅でも山が1つに見えるようにする */
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C220 4 470 2 720 22s520 22 720 0v26z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
pointer-events: none;
@media (width >= 768px) { height: 32px; }
@media (width >= 1024px) { height: 44px; }
}
&.c-wave--top::before {
bottom: calc(100% - 1px); /* 1px 重ねて、拡大縮小時に境目へ髪の毛ほどの隙間が出るのを防ぐ */
}
&.c-wave--bottom::after {
top: calc(100% - 1px);
transform: scale(-1, -1); /* 上の波を上下左右に反転させ、上下で同じ形が並ばないようにする */
}
}
/* --------------------------------------------------------------------------
c-btn — ボタン／ボタン型リンク
使用箇所 : ヘッダー予約 / 予約セクション / お知らせ一覧へ
構成 : c-btn > (svg) + テキスト
変化 : --primary 塗り / --ghost 線のみ / --sm ヘッダー用の小
注意 : 幅は持たない。全幅にしたい場合は呼び出し側で指定する
-------------------------------------------------------------------------- */
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 10px 28px;
background: transparent;
border: 1px solid var(--color-text);
border-radius: 999px;
font-family: var(--ff-mincho);
font-size: var(--fs-md);
line-height: 1.4;
letter-spacing: .12em;
text-decoration: none;
transition: background .3s, color .3s;
cursor: pointer;
svg { flex-shrink: 0; width: 20px; height: 20px; }
&:hover { background: var(--color-text); color: var(--color-bg); }
&.c-btn--primary {
background: var(--color-text);
color: var(--color-bg);
&:hover { background: var(--color-primary); border-color: var(--color-primary); }
}
&.c-btn--sm {
min-height: 40px;
padding: 6px 18px;
font-size: var(--fs-sm);
}
}
/* --------------------------------------------------------------------------
c-icon-link — アイコンだけのリンク（Instagram 等）
使用箇所 : ヘッダー
構成 : c-icon-link > svg
変化 : なし
注意 : 文言は aria-label で持つ。タップ領域 44px を下回らせない
-------------------------------------------------------------------------- */
.c-icon-link {
display: grid;
place-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
transition: color .3s;
svg { width: 22px; height: 22px; }
&:hover { color: var(--color-primary); }
}
/* --------------------------------------------------------------------------
c-news-item — お知らせ1件（モーダルを開くボタン）
使用箇所 : トップ「お知らせ」/ お知らせ一覧
構成 : c-news-item > __btn( > __date + __cat + __title )
変化 : 768px以上で横1行
注意 : 本文は同じページ内の c-modal に持つ（JSで描画しない）
-------------------------------------------------------------------------- */
.c-news-item {
border-bottom: 1px dashed var(--color-border);
.c-news-item__btn {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px var(--space-sm);
width: 100%;
padding: var(--space-sm) var(--space-xs);
background: none;
border: 0;
text-align: left;
cursor: pointer;
transition: background .3s;
&:hover { background: color-mix(in srgb, var(--color-bg-deep) 60%, transparent); }
&:hover .c-news-item__title { text-decoration: underline; }
@media (width >= 768px) {
grid-template-columns: 7.5em auto 1fr;
align-items: baseline;
}
}
.c-news-item__date {
font-family: var(--ff-en);
font-size: var(--fs-md);
letter-spacing: .1em;
color: var(--color-text-sub);
}
.c-news-item__cat {
justify-self: start;
padding: 0 10px;
border: 1px solid var(--color-brass);
font-size: var(--fs-xs);
line-height: 1.8;
color: var(--color-brass);
}
.c-news-item__title {
grid-column: 1 / -1;
text-underline-offset: .3em;
@media (width >= 768px) { grid-column: auto; }
}
}
/* --------------------------------------------------------------------------
c-modal — お知らせ本文のモーダル（dialog）
使用箇所 : トップ「お知らせ」/ お知らせ一覧
構成 : c-modal > __inner( > __head( > __date + __title ) + __body + __close )
変化 : なし
注意 : 開閉は dialog.showModal()。Esc とフォーカストラップはブラウザ標準に任せる
-------------------------------------------------------------------------- */
.c-modal {
width: min(640px, calc(100% - var(--gutter) * 2));
max-height: calc(100dvh - var(--space-lg) * 2);
padding: 0;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
color: var(--color-text);
&::backdrop {
background: rgb(46 41 36 / .55);
backdrop-filter: blur(2px);
}
&[open] { animation: modal-in .5s ease-out; }
.c-modal__inner {
display: grid;
gap: var(--space-md);
margin: 8px;
padding: var(--space-lg) var(--space-md) var(--space-md);
border: 1px solid var(--color-border); /* 二重罫で古い便箋のような枠にする */
@media (width >= 768px) { padding: var(--space-lg) var(--space-lg) var(--space-md); }
}
.c-modal__date {
font-family: var(--ff-en);
letter-spacing: .1em;
color: var(--color-text-sub);
}
.c-modal__title {
font-family: var(--ff-mincho);
font-size: var(--fs-xl);
line-height: 1.6;
}
.c-modal__body {
display: grid;
gap: 1em;
overflow-wrap: anywhere; /* CMSで長いURLが入った場合のはみ出し対策 */
}
.c-modal__close {
justify-self: center;
}
}
@keyframes modal-in {
from { opacity: 0; transform: translateY(8px); }
}
/* --------------------------------------------------------------------------
c-breadcrumb — パンくず
使用箇所 : 下層ページ
構成 : c-breadcrumb > ol > li( > a )
変化 : なし
注意 : 区切り記号は CSS で出す（読み上げさせない）
-------------------------------------------------------------------------- */
.c-breadcrumb {
font-size: var(--fs-xs);
color: var(--color-text-sub);
ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
li + li::before { content: "/"; margin-inline: 10px; color: var(--color-border); }
}
}
/* ==========================================================================
06. Project
========================================================================== */
@layer project {
/* --------------------------------------------------------------------------
p-top-mv — トップ メインビジュアル
使用箇所 : トップ
構成 : p-top-mv > __inner > __copy( > __logo + __lead + __meta ) + __visual( > __slides > __slide + __stamp + __pause )
変化 : 1024px以上でコピー左・写真右の2カラム
注意 : 写真はごくゆっくりのクロスフェード＋微ズーム。速度は --mv-* で調整する
-------------------------------------------------------------------------- */
.p-top-mv {
--mv-duration: 9s; /* 1枚あたりの表示時間。JS 側の切替間隔と合わせる */
overflow-x: clip; /* 回転するスタンプの四角い外枠が画面右にはみ出し、横スクロールが出るのを防ぐ */
padding-block: var(--space-lg) var(--space-xl);
background: var(--color-bg-white);
--wave-color: var(--color-bg-white);
@media (width >= 1024px) { padding-block: var(--space-xl) var(--space-2xl); }
.p-top-mv__inner {
display: grid;
gap: var(--space-lg);
max-width: calc(var(--width-content) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
@media (width >= 1024px) {
grid-template-columns: 1fr 520px;
align-items: center;
gap: var(--space-xl);
}
}
.p-top-mv__copy {
display: grid;
justify-items: center;
gap: var(--space-md);
text-align: center;
@media (width >= 1024px) { justify-items: start; text-align: left; }
}
.p-top-mv__logo img { width: clamp(180px, 40vw, 300px); }
.p-top-mv__lead {
font-family: var(--ff-mincho);
font-size: clamp(1.5rem, 3.6vw, 2.375rem);
line-height: 1.8;
letter-spacing: .14em;
}
.p-top-mv__meta {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--ff-en);
font-size: var(--fs-md);
font-style: italic;
letter-spacing: .12em;
color: var(--color-text-sub);
&::before {
content: "";
width: 40px;
height: 1px;
background: var(--color-brass);
}
}
.p-top-mv__visual {
position: relative;
justify-self: center;
width: min(100%, 520px);
}
.p-top-mv__slides {
position: relative;
aspect-ratio: 4 / 5; /* CLS対策: 画像読込前に高さを確定させる */
overflow: hidden;
border-radius: 999px 999px 4px 4px; /* 古い姿見のアーチ形 */
outline: 1px solid var(--color-brass);
outline-offset: 10px;
isolation: isolate; /* 角丸の中でズームを切り抜くため */
}
.p-top-mv__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 3s ease-in-out;
img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(.12) saturate(.9); /* 写真の色味を紙色に寄せてなじませる */
transform: scale(1.08);
transition: transform calc(var(--mv-duration) + 3s) linear;
}
&.is-active {
opacity: 1;
img { transform: scale(1); }
}
}
.p-top-mv__stamp {
position: absolute;
right: -12px;
bottom: 24px;
width: 116px;
height: 116px;
color: var(--color-brass);
animation: stamp-rotate 80s linear infinite;
@media (width >= 768px) { right: -40px; width: 140px; height: 140px; }
@media (width >= 1024px) {
/* 写真が画面端に寄る幅（〜1200px前後）では、はみ出しを画面外の余白の分だけに抑える。
1152px = __inner の最大幅（--width-content + 左右の --gutter） */
right: calc(-1 * min(40px, max(0px, (100vw - var(--width-content) - var(--gutter) * 2) / 2) + 12px));
}
&.is-paused { animation-play-state: paused; }
}
.p-top-mv__pause {
position: absolute;
left: 0;
bottom: -6px;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 4px 12px;
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: 999px;
font-size: var(--fs-xs);
color: var(--color-text-sub);
cursor: pointer;
svg { width: 10px; height: 10px; }
}
}
@keyframes stamp-rotate {
to { transform: rotate(360deg); }
}
/* --------------------------------------------------------------------------
p-top-news — トップ お知らせ
使用箇所 : トップ
構成 : p-top-news > l-inner > __box( > __head + __list + __more )
変化 : 768px以上で見出し左・一覧右
注意 : 表示は最新3件。それ以上は お知らせ一覧 へ
-------------------------------------------------------------------------- */
.p-top-news {
padding-top: calc(var(--space-xl) + 20px); /* MV 下の波（最大44px）がかぶる分を足して、枠との間を確保する */
@media (width >= 1024px) { padding-top: var(--space-2xl); }
.p-top-news__box {
display: grid;
gap: var(--space-md);
padding: var(--space-lg) var(--space-md);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: 0 0 0 6px var(--color-bg), 0 0 0 7px var(--color-border); /* 額縁風の二重線 */
@media (width >= 768px) {
grid-template-columns: 200px 1fr;
align-items: start;
padding: var(--space-lg);
}
}
.p-top-news__more {
grid-column: 1 / -1;
justify-self: end;
font-size: var(--fs-sm);
a { display: inline-block; padding-block: 10px; }
}
}
/* --------------------------------------------------------------------------
p-top-concept — トップ コンセプト
使用箇所 : トップ
構成 : p-top-concept > l-inner > __head + __body( > __photo + __text ) + __details
変化 : 1024px以上で写真と本文を横並び / 細部写真は 3→6 列
注意 : 「第二」の細部写真は小さく添える程度に留める（主役にしない）
-------------------------------------------------------------------------- */
.p-top-concept {
padding-block: var(--space-2xl); /* 下は段違い写真のずれ＋メニュー上の波がかぶる分を見込む */
.l-inner { display: grid; gap: var(--space-xl); }
.p-top-concept__body {
display: grid;
gap: var(--space-lg);
@media (width >= 1024px) {
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--space-xl);
}
}
.p-top-concept__photo {
padding: 10px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.1); }
figcaption {
padding-top: 8px;
font-family: var(--ff-en);
font-size: var(--fs-sm);
font-style: italic;
text-align: center;
color: var(--color-text-sub);
}
}
.p-top-concept__text {
display: grid;
gap: 1.4em;
h3 {
font-family: var(--ff-mincho);
font-size: clamp(1.5rem, 3.2vw, 2rem);
line-height: 1.7;
letter-spacing: .1em;
word-break: keep-all; /* 語の途中で折らず、HTML側の
/ の位置で折るため */
}
}
.p-top-concept__details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
@media (width >= 768px) { grid-template-columns: repeat(6, 1fr); gap: var(--space-md); }
li:nth-child(even) { translate: 0 var(--space-md); } /* 段違いに置いて写真帳の貼り込み風にする */
img {
width: 100%;
aspect-ratio: 1;
padding: 5px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
object-fit: cover;
filter: sepia(.15);
}
}
}
/* --------------------------------------------------------------------------
p-top-menu — トップ メニュー（料金表）
使用箇所 : トップ
構成 : p-top-menu > l-inner > c-heading + __tables( > __table / __group( > __table + __group-note ) ) + __extra + __note
変化 : 料金表はコンテンツ幅いっぱい。768px以上で2列 / 価格は 上段=税抜・下段（td > small）=税込
__group はカテゴリ全体への補足（例: シャンプー別料金）を表のすぐ下に付けたいときに使う
注意 : 原稿は 04_document/Parko_メニュー20261103.txt。カテゴリの並びは原稿どおり（DOM順＝表示順）
NOTE: 日数別料金の表（--matrix）は先方指示で廃止し「期間内サービスあり」の表記にした（2026-11-03）
NOTE: 写真は先方指示で外した（2026-10-28）
-------------------------------------------------------------------------- */
.p-top-menu {
padding-block: var(--space-xl);
--wave-color: var(--color-bg-deep);
background: var(--color-bg-deep);
.l-inner { display: grid; gap: var(--space-lg); }
.p-top-menu__tables {
display: grid;
align-items: start; /* 行数の違う表が隣り合っても、短い方の行間を引き伸ばさないため */
gap: var(--space-lg) var(--space-xl);
@media (width >= 768px) { grid-template-columns: 1fr 1fr; }
}
.p-top-menu__table {
width: 100%;
caption {
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-text);
font-family: var(--ff-mincho);
font-size: var(--fs-lg);
text-align: left;
word-break: keep-all; /* 長いカテゴリ名を語の途中で折らず、HTML側の （「・」の後）で折るため */
span {
margin-left: 10px;
font-family: var(--ff-en);
font-size: var(--fs-sm);
font-style: italic;
color: var(--color-brass);
}
}
th, td {
padding: 12px 0;
border-bottom: 1px dashed var(--color-border);
vertical-align: top;
}
th { font-weight: 400; text-align: left; }
td {
padding-left: var(--space-sm);
font-family: var(--ff-en);
font-size: var(--fs-lg); /* 金額を目立たせるため、メニュー名（本文サイズ）より一段大きくする */
line-height: 1.5;
text-align: right;
white-space: nowrap;
}
small {
display: block;
font-size: var(--fs-xs);
color: var(--color-text-sub);
}
td small {
font-size: var(--fs-md); /* NOTE: 下段の税込価格。総額表示のため、本文と同じ大きさで読みやすくする */
line-height: 1.6;
span {
margin-right: .3em;
font-family: var(--ff-base);
font-size: .7em; /* 和文の「税込」は欧文数字より大きく見えるため、数字の高さに合わせて縮める */
letter-spacing: .05em;
}
}
}
.p-top-menu__group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.p-top-menu__group-note {
font-size: var(--fs-sm);
color: var(--color-text-sub);
}
.p-top-menu__extra {
justify-self: center;
padding: var(--space-xs) var(--space-md);
border: 1px solid var(--color-brass);
font-family: var(--ff-mincho);
text-align: center;
}
.p-top-menu__note {
font-size: var(--fs-xs);
color: var(--color-text-sub);
}
}
/* --------------------------------------------------------------------------
p-top-reserve — トップ ご予約
使用箇所 : トップ
構成 : p-top-reserve > l-inner > __box( > c-heading + __text + __qr + __btns + __tel )
変化 : 768px以上でボタン横並び
注意 : NOTE: 暫定公開版は 公式LINE（QR＋友だち追加ボタン）と電話のみ。Web予約公開時に __btns へボタンを追加する
QR は墨茶 #2e2924 に色替え済み。明暗を逆にしたり薄い色にすると読めなくなるので注意
-------------------------------------------------------------------------- */
.p-top-reserve {
padding-block: var(--space-xl) 0;
text-align: center;
.p-top-reserve__box {
display: grid;
justify-items: center;
gap: var(--space-md);
padding: var(--space-lg) var(--space-md);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
box-shadow: 0 0 0 6px var(--color-bg), 0 0 0 7px var(--color-border); /* お知らせ枠と揃えた額縁風の二重線 */
}
.p-top-reserve__btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
.c-btn svg { color: var(--color-line); }
}
.p-top-reserve__qr {
display: grid;
justify-items: center;
gap: var(--space-xs);
img {
width: 180px;
padding: 8px;
background: var(--color-bg-white);
border: 1px solid var(--color-border);
}
figcaption {
font-family: var(--ff-mincho);
line-height: 1.6;
}
small {
font-family: var(--ff-base);
font-size: var(--fs-xs);
color: var(--color-text-sub);
}
}
.p-top-reserve__tel {
font-size: var(--fs-sm);
color: var(--color-text-sub);
a {
font-family: var(--ff-en);
font-size: var(--fs-xl);
letter-spacing: .08em;
color: var(--color-text);
text-decoration: none;
}
}
}
/* --------------------------------------------------------------------------
p-top-access — トップ アクセス
使用箇所 : トップ
構成 : p-top-access > l-inner > c-heading + __body( > __info( > __list ) + __photo ) + __map
変化 : 768px以上で情報と写真を横並び
注意 : 店舗情報は l-footer・JSON-LD と同じ内容に揃える
-------------------------------------------------------------------------- */
.p-top-access {
padding-block: var(--space-xl) var(--space-2xl);
.l-inner { display: grid; gap: var(--space-lg); }
.p-top-access__body {
display: grid;
gap: var(--space-lg);
@media (width >= 768px) {
grid-template-columns: 1fr 280px;
align-items: center;
}
}
.p-top-access__list {
display: grid;
grid-template-columns: 6em 1fr;
dt, dd {
padding-block: 14px;
border-bottom: 1px solid var(--color-border);
}
dt {
font-family: var(--ff-mincho);
color: var(--color-text-sub);
}
}
.p-top-access__photo img {
width: 100%;
aspect-ratio: 4 / 5;
padding: 8px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
object-fit: cover;
filter: sepia(.12);
}
.p-top-access__map iframe {
display: block;
width: 100%;
height: 420px;
border: 1px solid var(--color-border);
filter: sepia(.35) saturate(.7); /* 地図の色味をサイトの紙色に寄せる */
@media (width >= 768px) { height: 560px; }
}
}
/* --------------------------------------------------------------------------
p-news — お知らせ一覧ページ
使用箇所 : /news/
構成 : p-news > l-inner > c-breadcrumb + c-heading + __year( > __year-title + __list )
変化 : なし
注意 : WP化する場合は年ごとのループに置き換える
-------------------------------------------------------------------------- */
.p-news {
padding-block: var(--space-lg) var(--space-2xl);
.l-inner { display: grid; gap: var(--space-xl); }
.p-news__year { display: grid; gap: var(--space-sm); }
.p-news__year-title {
font-family: var(--ff-en);
font-size: var(--fs-xl);
font-style: italic;
color: var(--color-brass);
}
.p-news__back { justify-self: center; }
}
}
/* ==========================================================================
07. Utility
========================================================================== */
@layer utility {
.u-skip-link {
position: absolute;
top: 8px;
left: 8px;
z-index: calc(var(--z-modal) + 1);
padding: 8px 16px;
background: var(--color-text);
color: var(--color-bg);
transform: translateY(-200%);
&:focus { transform: none; }
}
.u-visually-hidden {
/* A11Y: 画面には出さず読み上げにだけ残す */
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
}