）。クリック誘発のホバー演出・ポインタを無効化し、
見た目（サイズ・配置・色）は他カードと揃えたまま静止させる。 */
.page-id-2784 .shop-line-card--concept {
cursor: default;
}
.page-id-2784 .shop-line-card--concept:hover .shop-line-thumb {
transform: none;
box-shadow: none;
}
.page-id-2784 .shop-line-card--concept:hover .shop-line-name small {
color: var(--kage-amber, #A9762B);
}
/* スマホ：3枚並びを維持しつつ余白・字間を詰める */
@media (max-width: 600px) {
.page-id-2784 .shop-line-cards { gap: .6rem; }
.page-id-2784 .shop-line-name { letter-spacing: .06em; }
}
/* =========================================================================
HOME と SKIN の line-cards の「親の幅」差を吸収して横幅を揃える
-------------------------------------------------------------------------
HOMEの line-cards は .shop-fragrance（alignfull＝全幅）の中にあり全幅(例:400px)、
SKINの line-cards は .shop-fragrance の外（通常コンテンツ幅＝左右padding分狭い・例:336px）
にあるため、モバイルで幅が食い違う（PC幅は両者 max-width:1100 で一致）。
SKIN側＝「.shop-fragrance の外にある line-cards」だけを、モバイルでビューポート幅へ
広げて HOME と揃える。:not(.shop-fragrance *) で HOME(=fragrance内)は対象外。
※ 恒久対処はエディタで SKIN セクションを「Fragrance Line up」グループ内へ移すこと。
========================================================================= */
@media (max-width: 781px) {
.page-id-2784 .shop-line-cards:not(.shop-fragrance *) {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
/* =========================================================================
B-15 Fragrance Line up リニューアル（コンセプト画像＋展開アコーディオン）
-------------------------------------------------------------------------
旧「Concept＋3ライン＝4枚グリッド（小さく見づらい）」を廃し、
1) HOME/SKIN ごとに「コンセプト画像（横長バナー・非リンク）」
2) その下に「ライン画像3枚の横アコーディオン」
… ホバー/タップで選んだ1枚が大きく展開（約2倍）し、他は縦長タブに畳む。
画像は文字・香りピラミッドを内包した完成画像なので、重ね表示の見出し・
サブコピー・プレースホルダ文字は使わず、画像のみを
![]()
で配置する。
（旧 .shop-line-* / .shop-line-cards のCSSは新マークアップでは未使用＝休眠）
◆ マークアップ（カスタムHTMLブロック）
![]()
爽 SOU
… ×3（先頭に is-active を付けて既定で開いておく）
◆ 挙動は js/shop-redesign1-lineup.js（PCホバー / タップ / フォーカスで is-active 切替）。
JSが無くても先頭パネルが開いた静的表示にフォールバックする。
◆ 変数（--kage-*）は B-7（product_cards.css）の .page-id-2784 で定義済み。
========================================================================= */
/* グループ（HOME / SKIN）。alignfull の .shop-fragrance 内でコンテンツ幅に収める */
.page-id-2784 .shop-lineup {
width: 100%;
max-width: 1100px;
margin: 0 auto;
box-sizing: border-box;
}
/* HOME と SKIN の間に余白を確保 */
.page-id-2784 .shop-lineup + .shop-lineup {
margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
/* コンセプト画像（横長3:2 バナー・非リンク） */
.page-id-2784 .shop-lineup-concept {
margin: 0 auto clamp(1.2rem, 3vw, 2rem);
}
.page-id-2784 .shop-lineup-concept-img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
}
/* --- 横アコーディオン本体 --------------------------------------------- */
.page-id-2784 .shop-lineup-accordion {
display: flex;
gap: 10px;
width: 100%;
max-width: 1100px;
margin: 0 auto;
height: clamp(380px, 46vw, 600px); /* 行の高さ＝畳んだタブの高さ */
box-sizing: border-box;
}
/* 各パネル（既定は均等。is-active で大きく伸びる） */
.page-id-2784 .shop-lineup-panel {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
border-radius: 8px;
display: block;
text-decoration: none;
color: var(--kage-ink, #333333);
background: #EFE7DB; /* フォールバック地色 */
cursor: pointer;
transition: flex-grow 1.1s cubic-bezier(.22, .61, .36, 1);
}
/* 畳んだタブの地色（ライン別の落ち着いた自然色グラデ） */
.page-id-2784 .shop-lineup-panel--sou { background: linear-gradient(160deg, #e6efe1 0%, #cdd9c4 100%); }
.page-id-2784 .shop-lineup-panel--hana { background: linear-gradient(160deg, #f3e6e0 0%, #e3ccc3 100%); }
.page-id-2784 .shop-lineup-panel--kira { background: linear-gradient(160deg, #eae6f2 0%, #c8c2dd 100%); }
.page-id-2784 .shop-lineup-panel--floral { background: linear-gradient(160deg, #f0e2e2 0%, #dcc4c6 100%); }
.page-id-2784 .shop-lineup-panel--fruity { background: linear-gradient(160deg, #f4e8d8 0%, #e6ceb2 100%); }
.page-id-2784 .shop-lineup-panel--herbal { background: linear-gradient(160deg, #e6ece0 0%, #ccd6c0 100%); }
/* 展開時：大きく伸び、地色は消してセクションのベージュに溶かし画像を主役に */
.page-id-2784 .shop-lineup-panel.is-active {
flex-grow: 4;
background: transparent;
}
/* ライン画像（展開時のみ表示・全体を見せる contain・中央寄せ） */
.page-id-2784 .shop-lineup-panel-img {
position: absolute;
inset: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
opacity: 0;
transition: opacity .85s ease .3s; /* 幅が伸びきる頃にゆっくり出す */
}
.page-id-2784 .shop-lineup-panel.is-active .shop-lineup-panel-img {
opacity: 1;
border: 1px solid var(--kage-line, #E7DBCF);
box-shadow: 0 16px 34px -20px rgba(51, 51, 51, .4);
}
/* タブのラベル（畳んでいる時のみ表示・縦長タブの中央） */
.page-id-2784 .shop-lineup-panel-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
padding: .6rem;
text-align: center;
font-family: var(--kage-serif, "Noto Serif JP", "游明朝", serif);
font-size: clamp(1.2rem, 2.2vw, 1.8rem);
letter-spacing: .12em;
line-height: 1.3;
color: var(--kage-ink, #333333);
opacity: 1;
transition: opacity .6s ease;
pointer-events: none; /* クリックはパネル
に通す */
}
.page-id-2784 .shop-lineup-panel-label small {
font-family: var(--kage-sans, "Montserrat", "Lato", sans-serif);
font-size: .5em;
letter-spacing: .26em;
color: var(--kage-amber, #A9762B);
}
.page-id-2784 .shop-lineup-panel.is-active .shop-lineup-panel-label {
opacity: 0;
}
/* フォーカス可視（キーボード操作） */
.page-id-2784 .shop-lineup-panel:focus-visible {
outline: 2px solid var(--kage-amber, #A9762B);
outline-offset: 2px;
}
/* モバイル：横アコーディオンを解除し、画像を縦に積む（タップ＝そのままリンク遷移）。
タップでの誤展開・誤遷移を避けるため、JS側(shop-redesign1-lineup.js)でも
max-width:781px ではタップ展開を無効化している。 */
@media (max-width: 781px) {
.page-id-2784 .shop-lineup-accordion {
flex-direction: column;
height: auto;
gap: clamp(1rem, 5vw, 1.6rem);
}
/* パネルは全幅の通常ブロックに。タブ地色・固定高さ・伸縮アニメを解除 */
.page-id-2784 .shop-lineup-panel {
flex: 0 0 auto;
width: 100%;
height: auto;
overflow: visible;
border-radius: 0;
background: transparent !important;
transition: none;
}
/* 画像を通常フローで全幅表示（absolute/contain・フェードを解除して常時表示） */
.page-id-2784 .shop-lineup-panel-img {
position: static;
inset: auto;
margin: 0;
width: 100%;
height: auto;
max-width: 100%;
max-height: none;
opacity: 1 !important;
border: 1px solid var(--kage-line, #E7DBCF);
border-radius: 8px;
box-shadow: none;
transition: none;
}
/* タブのラベルは縦積みでは不要 */
.page-id-2784 .shop-lineup-panel-label {
display: none;
}
}
/* モーション軽減設定では伸縮アニメを無効化（即時切替） */
@media (prefers-reduced-motion: reduce) {
.page-id-2784 .shop-lineup-panel,
.page-id-2784 .shop-lineup-panel-img,
.page-id-2784 .shop-lineup-panel-label {
transition: none;
}
}