/* =========================================================================
monocosmelab /shop_redesign1/ 商品カード基層スタイル（B-7）
-------------------------------------------------------------------------
保守的刷新の品格チューニング。WooCommerce「商品コレクション」ブロックが
出力する標準クラスを対象に、Noto Serif JP / 游明朝ベースで整える。
◆ 適用方法
外観 → カスタマイズ → 追加 CSS に貼り付ける。
全 CSS は .page-id-2784 配下にスコープしているため、本番ショップや
他ページには一切影響しない。
◆ スコープ方式（page-id 方式 / マークアップ変更ゼロ）
全セレクタを .page-id-2784 配下にスコープ済み。
WordPress が /shop_redesign1/（ページID=2784）表示時に へ
自動付与する page-id-2784 クラスを利用するため、
★ 最上位グループ等への className 付与は不要 ★。
ブロックを一切触らないのでブロック検証エラーの心配もない。
※ ページIDが変わった場合は .page-id-2784 を新IDに一括置換すること。
◆ 見出し装飾の className（別途・各見出しブロックに付与）
shop-section-title / shop-aroma-label / shop-kanji / shop-kanji-roman /
shop-skin-title / shop-skin-sub は、各見出しブロックの
「高度な設定 → 追加CSSクラス」に付与する（page-id方式と併用）。
◆ カラーパレット（design.md 準拠）
メイン文字 #333333
背景ベージュ #FEF5EE
アクセント緑 #6B7A5E（植物の緑）
アクセント琥珀 #B8860B 系 → 控えめに #A9762B
========================================================================= */
/* ---- 0. 変数定義 -------------------------------------------------------- */
.page-id-2784 {
--kage-ink: #333333;
--kage-beige: #FEF5EE;
--kage-green: #6B7A5E;
--kage-amber: #A9762B;
--kage-line: #E7DBCF; /* 区切り線（ベージュに馴染む薄茶） */
--kage-serif: "Noto Serif JP", "游明朝", "YuMincho", serif;
--kage-sans: "Montserrat", "Lato", "Helvetica Neue", sans-serif;
}
/* =========================================================================
1. 商品グリッド（商品コレクション = Product Collection）
========================================================================= */
/* グリッド container（Post Template 相当）の余白を均す */
.page-id-2784 .wp-block-woocommerce-product-template {
gap: 2.4rem 2rem;
}
/* 商品カード 1 枚（li.product / .wc-block-product） */
.page-id-2784 li.product,
.page-id-2784 .wc-block-product {
background: #FFFFFF;
border: 1px solid var(--kage-line);
border-radius: 6px;
padding: 1.4rem 1.4rem 1.8rem;
transition: transform .45s ease, box-shadow .45s ease;
display: flex;
flex-direction: column;
}
/* ホバー：ふわりと持ち上がる保守的な演出（ギラつかせない） */
.page-id-2784 li.product:hover,
.page-id-2784 .wc-block-product:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px -18px rgba(51, 51, 51, .35);
}
/* =========================================================================
2. 商品画像
========================================================================= */
.page-id-2784 .wc-block-components-product-image,
.page-id-2784 li.product .wp-block-woocommerce-product-image {
overflow: hidden;
border-radius: 4px;
margin-bottom: 1.1rem;
}
.page-id-2784 .wc-block-components-product-image img,
.page-id-2784 li.product img {
transition: transform .8s cubic-bezier(.2, .6, .2, 1);
display: block;
width: 100%;
height: auto;
}
/* ホバーでゆっくりズーム（素材感を引き立てる） */
.page-id-2784 li.product:hover img,
.page-id-2784 .wc-block-product:hover img {
transform: scale(1.05);
}
/* =========================================================================
3. 商品名（明朝で上品に）
========================================================================= */
.page-id-2784 .wp-block-post-title,
.page-id-2784 .wc-block-components-product-title,
.page-id-2784 li.product .woocommerce-loop-product__title {
font-family: var(--kage-serif);
font-weight: 500;
font-size: 1.02rem;
line-height: 1.7;
letter-spacing: .02em;
color: var(--kage-ink);
margin: .2rem 0 .5rem;
}
.page-id-2784 .wp-block-post-title a,
.page-id-2784 .wc-block-components-product-title a {
color: inherit;
text-decoration: none;
}
/* =========================================================================
4. 価格
========================================================================= */
.page-id-2784 .wp-block-woocommerce-product-price,
.page-id-2784 .wc-block-components-product-price,
.page-id-2784 li.product .price {
font-family: var(--kage-sans);
font-size: .92rem;
letter-spacing: .04em;
color: var(--kage-amber);
margin-top: auto; /* カード高さが揃うよう価格を下端へ */
padding-top: .6rem;
}
/* =========================================================================
5. カートに追加ボタン（控えめ・余白多め）
========================================================================= */
.page-id-2784 .wp-block-woocommerce-product-button .wp-block-button__link,
.page-id-2784 li.product .button {
font-family: var(--kage-sans);
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
background: transparent;
color: var(--kage-ink);
border: 1px solid var(--kage-ink);
border-radius: 999px;
padding: .6rem 1.4rem;
margin-top: 1rem;
transition: background .35s ease, color .35s ease;
}
.page-id-2784 .wp-block-woocommerce-product-button .wp-block-button__link:hover,
.page-id-2784 li.product .button:hover {
background: var(--kage-ink);
color: var(--kage-beige);
}
/* =========================================================================
6. セクション見出し
========================================================================= */
/* HOME ライン名 = 漢字一文字大判（観夏方式） */
.page-id-2784 .shop-kanji {
font-family: var(--kage-serif);
font-weight: 600;
font-size: clamp(2.6rem, 7vw, 4.4rem);
line-height: 1.1;
letter-spacing: .12em;
color: var(--kage-ink);
text-align: center;
}
/* 漢字に添えるローマ字（-SOU- 等） */
.page-id-2784 .shop-kanji-roman {
font-family: var(--kage-sans);
font-size: .8rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--kage-green);
text-align: center;
margin-top: .4rem;
}
/* SKIN ライン名 = 英字大文字＋日本語サブコピー */
.page-id-2784 .shop-skin-title {
font-family: var(--kage-sans);
font-weight: 600;
font-size: clamp(1.3rem, 3.4vw, 1.9rem);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kage-ink);
text-align: center;
}
.page-id-2784 .shop-skin-sub {
font-family: var(--kage-serif);
font-size: .95rem;
letter-spacing: .04em;
color: #6B6258;
text-align: center;
margin-top: .5rem;
}
/* セクション見出し共通（人気ランキング / Fragrance Line up 等） */
.page-id-2784 .shop-section-title {
font-family: var(--kage-serif);
font-weight: 500;
font-size: clamp(1.4rem, 3.6vw, 2.1rem);
letter-spacing: .14em;
color: var(--kage-ink);
text-align: center;
position: relative;
padding-bottom: 1rem;
margin-bottom: 2.4rem;
/* custom.css の .page h2 が付けるピンクの左ボーダー＋左パディングを解除
（中央寄せ見出しなので不要。下線は ::after の琥珀ラインで表現） */
border-left: none;
padding-left: 0;
}
/* 見出し下の細い区切り（琥珀の短い下線） */
.page-id-2784 .shop-section-title::after {
content: "";
display: block;
width: 48px;
height: 1px;
background: var(--kage-amber);
margin: 1rem auto 0;
}
/* 大分類ラベル（HOME AROMA / SKIN AROMA） */
.page-id-2784 .shop-aroma-label {
font-family: var(--kage-sans);
font-size: .78rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--kage-green);
text-align: center;
}
/* =========================================================================
7. レスポンシブ（モバイルは2カラム→必要に応じ1カラム）
========================================================================= */
@media (max-width: 600px) {
.page-id-2784 .wp-block-woocommerce-product-template {
gap: 1.6rem 1rem;
}
.page-id-2784 li.product,
.page-id-2784 .wc-block-product {
padding: 1rem 1rem 1.4rem;
}
/* タッチ端末はホバーズームを抑制（誤作動防止） */
.page-id-2784 li.product:hover img,
.page-id-2784 .wc-block-product:hover img {
transform: none;
}
}
/* =========================================================================
「モノコスメラボのモノづくり」本文（案1 森 / Forest）＋ タグライン
-------------------------------------------------------------------------
◆ 本文: 幅を約2/3に絞り、明朝・やや大きめ・行間ゆったり。ポエム風の改行。
森の気配（葉❧のディバイダ・深緑インク・やわらかな紙パネル）。
◆ マークアップ: 既存「見出し＋リード＋本文3段落」のうち、本文側を
カスタムHTMLブロック（内側ラッパー .shop-about-poem）に差し替える。
見出し h2.shop-section-title と外側グループ .shop-about はそのまま。
◆ DOM（カスタムHTML）
========================================================================= */
/* やわらかな紙パネル（見出しの下・幅2/3で中央寄せ） */
.page-id-2784 .shop-about-poem {
max-width: 33rem;
margin: 0 auto;
padding: 2.6rem 2rem;
font-family: var(--kage-serif, "Noto Serif JP", "游明朝", "YuMincho", serif);
color: #3c3a35;
background: linear-gradient(180deg, #fbf8f2 0%, #f5efe5 100%);
border: 1px solid #ece3d4;
border-radius: 16px;
box-shadow: 0 24px 50px -38px rgba(80, 70, 50, .5);
}
/* リード文（中央・ポエム・深い森の緑インク） */
.page-id-2784 .shop-about-poem .shop-about-lead {
text-align: center;
font-size: clamp(1.18rem, 2.7vw, 1.4rem);
line-height: 2.15;
letter-spacing: .1em;
font-weight: 400;
color: #4d5a3c;
margin: 0;
}
/* 本文（左寄せ・読みやすく） */
.page-id-2784 .shop-about-poem .shop-about-body {
text-align: left;
font-size: clamp(1rem, 2.3vw, 1.1rem);
line-height: 2.1;
letter-spacing: .05em;
font-weight: 400;
margin: 1.6rem 0;
}
/* 結び（中央・ポエム） */
.page-id-2784 .shop-about-poem .shop-about-closing {
text-align: center;
font-size: clamp(1.05rem, 2.5vw, 1.22rem);
line-height: 2.2;
letter-spacing: .1em;
font-weight: 400;
color: #4d5a3c;
margin: 0;
}
/* 葉のディバイダ（短い線 ＋ ❧ ＋ 短い線） */
.page-id-2784 .shop-about-poem .shop-about-div {
display: flex;
align-items: center;
justify-content: center;
gap: .95rem;
margin: 2.4rem 0;
color: #8a967a;
}
.page-id-2784 .shop-about-poem .shop-about-div::before,
.page-id-2784 .shop-about-poem .shop-about-div::after {
content: "";
width: 46px;
height: 1px;
background: currentColor;
opacity: .7;
}
.page-id-2784 .shop-about-poem .shop-about-div .g {
font-size: 1.25rem;
line-height: 1;
}
.page-id-2784 .shop-about-poem .shop-about-div .g::before {
content: "❧";
}
/* スマホ：パネル余白を詰める */
@media (max-width: 600px) {
.page-id-2784 .shop-about-poem {
padding: 2rem 1.3rem;
}
}
/* ------- タグライン「AROMA THAT SOFTENS THE MIND」を森のトーンに ------- */
.page-id-2784 .shop-tagline-text {
font-family: var(--kage-serif, "Noto Serif JP", "游明朝", serif);
font-weight: 400;
font-style: italic;
color: #4d5a3c; /* 森の緑インク */
letter-spacing: .16em;
font-size: clamp(1rem, 2.6vw, 1.35rem);
line-height: 1.8;
padding-top: 1.6rem;
}
/* タグライン上に葉の小さなアクセント（本文の森と呼応） */
.page-id-2784 .shop-tagline-text::before {
content: "❧";
display: block;
color: #8a967a;
font-style: normal;
font-size: 1.1rem;
letter-spacing: 0;
margin-bottom: .6rem;
}
/* =========================================================================
スクロール連動フェードイン（shop-redesign1-reveal.js と対）
-------------------------------------------------------------------------
◆ 初期の「隠し」は body.reveal-ready が付いている間だけ有効。
JS が付与するまでは隠れない＝JS失敗時もコンテンツは必ず表示される（安全）。
◆ data-reveal の値で出方を変える: up=下から / down=上から / in=その場 /
zoom=拡大しながら / diag=右下から左上へ斜めに。
◆ 速さ1.8s・移動量80px（scroll-reveal-demo.html で確定）。
========================================================================= */
.reveal-ready [data-reveal] {
opacity: 0;
transition: opacity 1.8s ease,
transform 1.8s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, transform;
}
.reveal-ready [data-reveal="up"] { transform: translateY(80px); }
.reveal-ready [data-reveal="down"] { transform: translateY(-64px); }
.reveal-ready [data-reveal="in"] { transform: none; }
.reveal-ready [data-reveal="zoom"] { transform: scale(.95); }
.reveal-ready [data-reveal="diag"] { transform: translate(80px, 80px); } /* 右下→左上 */
/* 表示状態（定位置・不透明に） */
.reveal-ready [data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* モバイルでは横移動系（斜めdiag/左right/左leftなど）を縦移動に置き換え、
横スクロール（はみ出し）が発生しないようにする。フェードの印象は維持。 */
@media (max-width: 781px) {
.reveal-ready [data-reveal="diag"],
.reveal-ready [data-reveal="left"],
.reveal-ready [data-reveal="right"] {
transform: translateY(80px);
}
}
/* モーション軽減設定では一切動かさず即表示 */
@media (prefers-reduced-motion: reduce) {
.reveal-ready [data-reveal] {
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================================================
【横はみ出し対策・本丸】position:fixed 要素のはみ出しをルートでクリップ
-------------------------------------------------------------------------
右下の固定要素——Xooサイドカートの基地/控えパネル(.xoo-wsc*) や reCAPTCHA
バッジ(.grecaptcha-badge)——がビューポート右外にはみ出し、ページに横スクロールを
生んでいた。fixed 要素は祖先(body)の overflow では切れないため、ルート要素(html)で
クリップする。本CSSは is_page(2784) でのみ読み込まれるので、この html ルールは
2784 ページにだけ存在＝2784限定で効く（他ページ・2781には影響しない）。
overflow-x:clip は縦スクロールも position:sticky（モバイルヘッダー）も壊さない。
========================================================================= */
html {
overflow-x: clip;
}
/* =========================================================================
【モバイル横はみ出し対策】PC用ヘッダー横並びメニューをモバイルで確実に隠す
-------------------------------------------------------------------------
ヘッダー .custom-alignment 内 .left-item に「is-not-stacked-on-mobile ＋
flex-basis:1400px」のカラムがあり、モバイルで縦積みされず横約1000〜1400px
に膨張して、このページ全体を横スクロール（右側空白）させていた。
custom.css の同等ルール（.custom-alignment / .header_menu_outline を非表示）が
このページでは効いていないため、page-id を付けた強い指定で確実に隠す。
※ モバイル用ヘッダー .m-header は .custom-alignment の「兄弟」なので消えない。
========================================================================= */
@media (max-width: 782px) {
/* (A) PC用ヘッダーの横並び要素を広めに非表示（モバイルは .m-header を使う） */
body.page-id-2784 .wp-block-template-part .custom-alignment,
body.page-id-2784 .wp-block-template-part .header_menu_outline,
body.page-id-2784 .wp-block-template-part .header_menu,
body.page-id-2784 .wp-block-template-part .left-item,
body.page-id-2784 .wp-block-template-part .right-item {
display: none !important;
}
/* (B) 保険：万一はみ出す要素が残っても、ページ自体は横スクロールさせない。
overflow-x:clip は overflow-y を spoil せず position:sticky も壊さない。
body=ビューポート幅なので metaslider の full-bleed(100vw) は切れない。 */
body.page-id-2784 {
overflow-x: clip;
}
/* (C) 決め手：2784 でのみ が content幅(約1400-1526px)に膨張する症状を、
ユーザー報告のセレクタを直接ターゲットして「ビューポート幅」に固定し、
はみ出しをクリップする。中の m-drawer は position:fixed なのでクリップされない。
max-width:100vw で content幅への膨張を強制的に打ち切る。 */
html body.page-id-2784 > .wp-site-blocks > header,
html body.page-id-2784 > .wp-site-blocks > header > .custom-alignment,
html body.page-id-2784 > .wp-site-blocks > header > .m-header,
html body.page-id-2784 > .wp-site-blocks > header > .m-header > .m-header__inner {
max-width: 100vw !important;
overflow-x: clip !important;
}
}