を含むため、ブラウザが
を即座に閉じて段落を兄弟要素に分割する。
そのため「空の hero-desc」と「複数の段落」の両方を想定して組む。 */
.hero-text > p:not(.hero-subtitle) {
font-size: 15px;
line-height: 2.15;
color: var(--m-ink-2);
max-width: 470px;
margin: 0 0 40px;
}
.hero-text > p:empty { display: none; }
/* 先頭の段落のみをリード文として 5 行に抑える */
.hero-text > p:not(.hero-subtitle):not(:empty) {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 2 段落目以降と埋め込み画像は hero では出さない（右の主画像と competing するため）。
本文は about ページ / CMS に残っている。 */
.hero-text > p:not(.hero-subtitle):not(:empty) ~ p,
.hero-text figure,
.hero-text img { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-visual { position: relative; }
.hero-image-frame {
position: relative;
aspect-ratio: 4 / 5;
background: var(--m-ivory-3);
overflow: hidden;
z-index: 1;
}
.hero-image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-visual:hover .hero-image-frame img { transform: scale(1.08); }
.hero-visual::before {
/* ずらした金の細枠 */
content: "";
position: absolute;
inset: 26px -26px -26px 26px;
border: 1px solid var(--m-line-gold);
z-index: 0;
}
.hero-image-empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--m-gold);
opacity: 0.5;
}
/* スクロールキュー */
.hero-split::after {
content: "SCROLL";
position: absolute;
left: var(--gutter);
bottom: 34px;
font-family: var(--sans);
font-size: 9.5px;
letter-spacing: 0.36em;
color: var(--m-ink-3);
padding-bottom: 46px;
background: linear-gradient(180deg, var(--m-ink-3) 0%, transparent 100%) no-repeat bottom center / 1px 36px;
animation: maison-cue 2.6s ease-in-out infinite;
z-index: 2;
}
@keyframes maison-cue {
0%, 100% { opacity: 0.35; transform: translateY(0); }
50% { opacity: 0.9; transform: translateY(6px); }
}
/* 中央寄せ hero（クラシックレイアウト用のフォールバック） */
.hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: center;
text-align: center;
padding: calc(var(--header-h) + 80px) 0 80px;
}
.hero .hero-content { max-width: 780px; margin: 0 auto; }
.hero .hero-subtitle { justify-content: center; }
.hero .hero-subtitle::after {
content: "";
width: clamp(30px, 5vw, 64px);
height: 1px;
background: var(--m-gold);
flex: none;
}
.hero h1 { margin-bottom: 30px; }
.hero p { max-width: 560px; margin: 0 auto 42px; }
/* ---------- マニフェスト帯 ---------- */
.manifesto {
position: relative;
background: var(--m-amethyst);
color: var(--m-ivory);
padding: clamp(70px, 9vw, 130px) 0;
text-align: center;
overflow: hidden;
}
.manifesto::before {
content: "";
position: absolute;
inset: 26px var(--gutter);
border-top: 1px solid var(--m-line-ivory);
border-bottom: 1px solid var(--m-line-ivory);
pointer-events: none;
}
.manifesto-text {
font-family: var(--serif);
font-size: clamp(23px, 3.4vw, 46px);
font-weight: 300;
line-height: 1.7;
letter-spacing: 0.09em;
color: var(--m-ivory);
margin: 0;
text-wrap: balance;
}
.manifesto-text::after {
content: "✦";
display: block;
margin-top: 26px;
font-size: 13px;
color: var(--m-gold-2);
letter-spacing: 0;
}
/* ---------- セクション ---------- */
.section { padding: var(--sec-pad) 0; }
.section-alt,
.section[style*="bg-alt"] { background: var(--m-ivory-2); }
/* 固定ヘッダー分の余白（hero が無い下層ページ） */
section.section:first-of-type { padding-top: calc(var(--header-h) + clamp(56px, 7vw, 104px)); }
/* 編集的な見出し（左タイトル + 右リンク） */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
padding-bottom: 26px;
border-bottom: 1px solid var(--m-line);
margin-bottom: clamp(46px, 6vw, 84px);
}
.section-head h2 { margin: 0; }
.section-link {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--m-ink-2);
white-space: nowrap;
padding-bottom: 4px;
border-bottom: 1px solid var(--m-line-gold);
transition: color 0.35s ease, border-color 0.35s ease, letter-spacing var(--transition);
}
.section-link:hover { color: var(--m-gold); border-color: var(--m-gold); letter-spacing: 0.3em; }
/* CMS のリッチテキスト（画像を含むことがある）が入るリード領域 */
.section-intro {
max-width: 680px;
margin: -18px auto clamp(48px, 6vw, 84px);
color: var(--m-ink-2);
text-align: center;
}
.section-intro p { margin: 0 0 1.3em; }
.section-intro p:last-child { margin-bottom: 0; }
.section-intro img {
margin: 0 auto 26px;
max-width: min(100%, 420px);
height: auto;
}
.section-intro figure { margin: 0 0 26px; }
/* 中央見出し（下層ページ） */
.section-title { text-align: center; margin-bottom: clamp(50px, 6vw, 90px); }
.section-title h2 { margin: 0 0 22px; }
.subtitle {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--m-gold);
margin: 0 0 18px;
}
.divider {
width: 62px;
height: 1px;
background: var(--m-gold);
margin: 0 auto;
position: relative;
}
.divider::before {
content: "✦";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--m-ivory);
padding: 0 10px;
font-size: 9px;
color: var(--m-gold);
line-height: 1;
}
.section-alt .divider::before { background: var(--m-ivory-2); }
.section-head-left .subtitle { text-align: left; }
/* ---------- おすすめ商品：ずらした 2 列グリッド ---------- */
.products-mosaic {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(28px, 4vw, 72px);
counter-reset: maison-item;
}
.products-mosaic .mosaic-2,
.products-mosaic .mosaic-4 { margin-top: clamp(30px, 7vw, 110px); }
.products-mosaic .product-card { counter-increment: maison-item; }
.products-mosaic .product-card .product-info::before {
content: "0" counter(maison-item);
display: block;
font-family: var(--serif);
font-size: 13px;
font-style: italic;
color: var(--m-gold);
margin-bottom: 10px;
letter-spacing: 0.1em;
}
.products-mosaic .product-card-image { aspect-ratio: 4 / 5; }
.products-mosaic .product-info h3 { font-size: clamp(20px, 1.9vw, 27px); }
/* ---------- 商品グリッド（一覧） ---------- */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: clamp(26px, 3.4vw, 56px) clamp(20px, 2.6vw, 40px);
}
/* ---------- 商品カード ---------- */
.product-card {
position: relative;
display: block;
background: transparent;
border: none;
color: inherit;
}
.product-card-image {
position: relative;
aspect-ratio: 3 / 4;
background: var(--m-ivory-3);
overflow: hidden;
}
.product-card-image::after {
/* ホバー時に乗る薄い象牙色のベール */
content: "";
position: absolute;
inset: 0;
background: rgba(244, 240, 232, 0.16);
opacity: 0;
transition: opacity var(--transition);
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.product-card:hover .product-card-image img { transform: scale(1.07); }
.product-card:hover .product-card-image::after { opacity: 1; }
.product-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--m-gold);
opacity: 0.45;
}
.product-info { padding: 22px 2px 0; }
.product-info .category {
display: block;
font-family: var(--sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--m-ink-3);
margin-bottom: 10px;
}
.product-info h3 {
font-family: var(--serif);
font-size: 20px;
font-weight: 400;
line-height: 1.45;
color: var(--m-ink);
margin: 0 0 12px;
transition: color 0.35s ease;
}
.product-card:hover .product-info h3 { color: var(--m-amethyst); }
.product-info .price {
position: relative;
display: inline-block;
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--m-ink-2);
padding-bottom: 7px;
}
.product-info .price::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 22px;
height: 1px;
background: var(--m-gold);
transition: width var(--transition);
}
.product-card:hover .product-info .price::after { width: 100%; }
/* ---------- カテゴリフィルタ（products.php のインライン style を上書き） ---------- */
.category-filter {
gap: clamp(6px, 1.4vw, 18px) !important;
padding-bottom: 22px;
border-bottom: 1px solid var(--m-line);
margin-bottom: clamp(44px, 5vw, 76px) !important;
}
.category-filter .cat-link {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--m-ink-3);
background: transparent;
border: none;
border-bottom: 1px solid transparent;
border-radius: 0;
padding: 8px 6px;
transition: color 0.35s ease, border-color 0.35s ease;
}
.category-filter .cat-link:hover {
color: var(--m-ink);
border-color: var(--m-line);
background: transparent;
}
.category-filter .cat-link.active {
color: var(--m-amethyst);
font-weight: 500;
background: transparent;
border-color: var(--m-gold);
}
/* ---------- About（交互配置） ---------- */
.about-split {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
align-items: center;
gap: clamp(34px, 6vw, 88px);
}
.about-visual {
position: relative;
aspect-ratio: 3 / 4;
background: var(--m-amethyst);
display: flex;
align-items: center;
justify-content: center;
}
.about-visual::before {
content: "";
position: absolute;
inset: 16px;
border: 1px solid var(--m-line-ivory);
}
.about-deco {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.about-deco-line { width: 1px; height: clamp(50px, 9vw, 100px); background: var(--m-line-gold); display: block; }
.about-deco-symbol { color: var(--m-gold-2); font-size: 17px; }
.about-text .subtitle,
.about-text h2 { text-align: left; }
.about-text h2 { margin-bottom: 30px; }
.about-text p { max-width: 520px; }
.about-text > div { margin-top: 16px; }
/* ---------- CMS リッチテキストカード（about / services） ----------
コンテンツはインライン style（padding:80px / 旧テーマの紫系見出し色など）を
持ったまま入稿されているため、ここで矯正する。 */
.about-content {
max-width: 760px;
margin: 0 auto;
padding: clamp(28px, 6vw, 80px) !important;
}
.about-content p { line-height: 2.1; }
/* 旧テーマ時代の hsl 紫・青のインライン色をテーマの墨色に統一 */
.about-content [style*="color:"] { color: inherit !important; }
.about-content h2,
.about-content h3 {
margin: 2.1em 0 0.9em;
padding-bottom: 13px;
border-bottom: 1px solid var(--m-line);
}
.about-content h2 { font-size: clamp(21px, 2vw, 27px); }
.about-content h3 { font-size: clamp(17px, 1.6vw, 21px); }
.about-content h2:first-child,
.about-content h3:first-child { margin-top: 0; }
/* 「物語」→「自然との出会い」のような連続見出しは 1 つの塊として詰める */
.about-content h2 + h2,
.about-content h3 + h3 {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
font-size: clamp(16px, 1.5vw, 19px);
color: var(--m-gold);
}
.about-content figure {
margin: 2.2em auto;
max-width: 560px;
}
.about-content img {
width: 100%;
height: auto;
margin: 0 auto;
}
.about-content ul { padding-left: 1.35em; margin: 0 0 1.5em; }
.about-content li { margin-bottom: 0.65em; }
.about-content li::marker { color: var(--m-gold); }
.about-content strong { font-weight: 500; color: var(--m-ink); }
/* ---------- サービス ---------- */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(1px, 0.2vw, 1px);
background: var(--m-line);
border: 1px solid var(--m-line);
}
.service-card {
background: var(--m-ivory);
padding: clamp(34px, 4vw, 54px) clamp(24px, 2.6vw, 38px);
text-align: center;
transition: background var(--transition), transform var(--transition);
}
.service-card:hover { background: var(--m-paper); transform: translateY(-4px); }
.service-icon {
font-size: 26px;
color: var(--m-gold);
margin-bottom: 22px;
line-height: 1;
}
.service-card h3 { font-size: 21px; margin-bottom: 16px; }
.service-card p { font-size: 14px; color: var(--m-ink-2); }
.service-price {
display: inline-block;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--m-line-gold);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--m-gold);
}
.service-cta { text-align: center; margin-top: clamp(48px, 6vw, 80px); }
/* ---------- 店舗情報 ---------- */
/* store.php はインラインで display:flex / margin-bottom:30px / padding-bottom:20px を
持っているため、行の余白が下罫線側に偏る。ここで打ち消して上下対称にする。 */
.info-item {
display: flex;
gap: clamp(16px, 3vw, 34px);
margin-bottom: 0 !important;
padding: 26px 0 !important;
border-bottom: 1px solid var(--m-line);
}
.info-item:first-child { border-top: 1px solid var(--m-line); }
.info-label { width: 130px !important; flex: none; }
.info-label {
font-family: var(--sans);
font-size: 10.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--m-gold);
padding-top: 5px;
}
/* 改行は store.php 側の nl2br（
）が担当する。
white-space: pre-line を付けるとタグ直後のソース改行まで拾ってしまい、
住所・営業時間の値がラベルより 1 行下にずれるため使わない。 */
.info-value { color: var(--m-ink-2); line-height: 2.05; }
/* store の地図コンテナ等、インラインの角丸をゼロラジウスに統一 */
[style*="border-radius: 12px"] { border-radius: 0 !important; }
/* ---------- 商品詳細 ---------- */
/* breadcrumb は product.php が padding ショートハンドをインラインで持つため両方 !important */
.breadcrumb {
padding-top: calc(var(--header-h) + 46px) !important;
padding-bottom: 34px !important;
}
.breadcrumb .container {
font-family: var(--sans) !important;
font-size: 10.5px !important;
letter-spacing: 0.2em !important;
color: var(--m-ink-3) !important;
}
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(34px, 5vw, 84px);
align-items: start;
padding-bottom: clamp(80px, 10vw, 150px);
}
.product-detail #mainImageContainer {
max-width: none !important;
background: var(--m-ivory-3) !important;
margin-bottom: 18px !important;
}
.product-detail .thumbnail { border-radius: 0 !important; }
.product-detail .product-thumbnails-wrapper { max-width: none !important; }
.product-detail .thumb-nav-btn {
background: rgba(27, 24, 21, 0.55) !important;
border-radius: 0 !important;
}
.product-detail > div:last-child { position: sticky; top: calc(var(--header-h) + 24px); }
.product-detail h1 {
font-size: clamp(28px, 3.2vw, 44px);
margin-bottom: 20px !important;
}
.product-detail .category {
color: var(--m-gold) !important;
font-family: var(--sans);
font-size: 10.5px !important;
letter-spacing: 0.28em !important;
}
.product-detail .price {
font-family: var(--serif) !important;
font-size: clamp(26px, 2.6vw, 34px) !important;
font-weight: 400 !important;
color: var(--m-amethyst) !important;
padding-bottom: 26px;
margin-bottom: 0 !important;
}
.product-detail .description {
border-top: 1px solid var(--m-line) !important;
padding-top: 34px !important;
margin-bottom: 44px !important;
color: var(--m-ink-2) !important;
line-height: 2.1;
}
.product-detail .description p { margin-bottom: 1.2em; }
#imageLightbox { background: rgba(20, 18, 15, 0.94) !important; }
#lightboxImage { border-radius: 0 !important; box-shadow: none !important; }
/* ---------- フォーム / お問い合わせ ---------- */
form { font-family: var(--sans); }
.form-group label {
font-family: var(--sans);
color: var(--m-ink-3) !important;
letter-spacing: 0.22em !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
font-family: var(--sans);
font-size: 14px;
color: var(--m-ink);
background: var(--m-paper);
border: 1px solid var(--m-line);
border-radius: 0;
transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--m-gold);
box-shadow: 0 0 0 3px rgba(168, 130, 60, 0.10);
}
textarea { resize: vertical; line-height: 1.9; }
.alert {
font-family: var(--sans);
font-size: 13.5px;
letter-spacing: 0.06em;
border: 1px solid var(--m-line);
border-left: 2px solid var(--m-gold);
background: var(--m-paper);
}
.alert-success { border-left-color: var(--m-amethyst-2); }
.alert-error { border-left-color: var(--danger); color: var(--danger); }
.empty-state {
text-align: center;
padding: clamp(60px, 8vw, 110px) 0;
color: var(--m-ink-3);
font-family: var(--serif);
font-size: 19px;
font-style: italic;
}
/* ---------- フッター ---------- */
footer {
background: var(--m-amethyst);
color: var(--m-ivory);
padding: clamp(60px, 7vw, 100px) 0 44px;
text-align: center;
position: relative;
}
footer::before {
content: "✦";
position: absolute;
top: -1px;
left: 50%;
transform: translate(-50%, -50%);
background: var(--m-ivory);
color: var(--m-gold);
font-size: 11px;
line-height: 1;
padding: 6px 14px;
}
footer .logo a {
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 300;
letter-spacing: 0.2em;
color: var(--m-ivory);
}
footer p {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(244, 240, 232, 0.55);
margin: 26px 0 0;
padding-top: 26px;
border-top: 1px solid var(--m-line-ivory);
display: inline-block;
min-width: min(320px, 80%);
}
.theme-switcher a { color: var(--m-ivory) !important; }
/* ---------- スクロール表示アニメーション ---------- */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.active { opacity: 1; transform: none; }
.products-mosaic .reveal.active,
.products-grid .reveal.active { transition-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ---------- レスポンシブ ---------- */
@media (max-width: 1100px) {
.hero-grid { grid-template-columns: 1fr; gap: 48px; }
.hero-split { min-height: auto; padding-top: calc(var(--header-h) + 48px); }
.hero-split::before { width: 60vw; height: 40%; }
.hero-split::after { display: none; }
.hero-text { max-width: none; }
.hero-visual { max-width: 520px; }
.hero-visual::before { inset: 18px -18px -18px 18px; }
.about-split { grid-template-columns: 1fr; }
.about-visual { aspect-ratio: 16 / 9; }
.product-detail { grid-template-columns: 1fr; }
.product-detail > div:last-child { position: static; }
}
@media (max-width: 900px) {
.nav-toggle { display: block; }
header nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--m-ivory);
border-top: 1px solid var(--m-line-2);
border-bottom: 1px solid var(--m-line-2);
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.5s ease, opacity 0.35s ease, visibility 0.35s ease;
}
header nav.active {
max-height: 78vh;
overflow-y: auto;
opacity: 1;
visibility: visible;
}
header nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px var(--gutter) 20px;
}
header nav ul li { border-bottom: 1px solid var(--m-line-2); }
header nav ul li:last-child { border-bottom: none; }
header nav a { display: block; padding: 17px 0; font-size: 12px; }
header nav a::after { display: none; }
.lang-switch {
border-left: none;
padding-left: 0;
padding-top: 18px;
justify-content: center;
}
/* 狭い画面ではラベルを値の上に積み、住所に横幅をすべて渡す */
.info-item { flex-direction: column; gap: 8px; }
.info-label { width: auto !important; padding-top: 0; }
}
@media (max-width: 700px) {
body { font-size: 14.5px; }
.products-mosaic { grid-template-columns: 1fr; }
.products-mosaic .mosaic-2,
.products-mosaic .mosaic-4 { margin-top: 0; }
.products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 16px; }
.product-info h3 { font-size: 17px; }
.section-head { align-items: flex-start; flex-direction: column; gap: 16px; }
.btn { padding: 15px 30px; font-size: 11px; }
.hero-actions .btn { flex: 1 1 auto; }
footer p { min-width: 100%; }
}