なので汎用の margin/padding/font-size/line-height を上書きする。
高さは固定せず min-height にして、文字が折り返しても切れないようにしている */
#tplContents .tpl-cont--app .tpl-app-banner {
display: flex;
align-items: center;
justify-content: center;
width: min(100% - 40px, var(--app-max));
min-height: 180px;
margin: 80px auto 0;
padding: .3em .4em;
border-radius: 20px;
background: var(--app-banner-bg);
color: var(--app-banner-txt);
font-size: min(4.9rem, 6vw);
font-weight: 600;
line-height: 1.36;
text-align: center;
}
/* 本文ブロック（画像＋期間＋注記） */
#tplContents .tpl-cont--app .tpl-app-body {
width: min(100% - 40px, var(--app-max));
margin: 80px auto 0;
}
#tplContents .tpl-cont--app .tpl-app-icon {
display: block;
width: 400px;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#tplContents .tpl-cont--app .tpl-app-period {
margin: 40px 0 0;
font-size: 2.6rem;
line-height: 1.4;
text-align: center;
}
#tplContents .tpl-cont--app .tpl-app-note {
margin: 40px 0 0;
font-size: 1.4rem;
line-height: 1.8;
text-align: left; /* 汎用の .tpl-cont（text-align: center）を解除 */
}
/* 登録ボタン */
#tplContents .tpl-cont--app .tpl-app-btn-wrap {
width: min(100% - 40px, var(--app-btn-max));
margin: 80px auto 0;
}
#tplContents .tpl-cont--app .tpl-app-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 27px; /* 文字の右端→丸アイコンの左端 */
width: 100%;
min-height: 96px;
padding: 8px 20px;
border: 2px solid var(--app-btn-color);
border-radius: 999px;
background: var(--app-btn-bg);
color: var(--app-btn-color);
font-size: 2.4rem;
font-weight: 600;
line-height: 1.42;
text-align: center;
transition: .3s ease-out;
}
#tplContents .tpl-cont--app .tpl-app-btn-arrow {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--app-btn-color);
transition: .3s ease-out;
}
#tplContents .tpl-cont--app .tpl-app-btn-arrow::before {
content: "";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 24px solid var(--app-btn-bg);
transition: .3s ease-out;
}
/* hover は .tpl-btn と同じ 0.3 秒の配色反転。ただしタッチ端末で hover が
残留しないよう、グランドメニューと同じ「マウス等のPC環境のみ」に分けている */
@media (hover: hover) and (pointer: fine) {
#tplContents .tpl-cont--app .tpl-app-btn:hover {
background: var(--app-btn-color);
color: var(--app-btn-bg);
}
#tplContents .tpl-cont--app .tpl-app-btn:hover .tpl-app-btn-arrow {
background: var(--app-btn-bg);
}
#tplContents .tpl-cont--app .tpl-app-btn:hover .tpl-app-btn-arrow::before {
border-left-color: var(--app-btn-color);
}
}
/* ============================================================
商品詳細ボタン（詳細はこちら）
XD: 長方形9524（通常）/9525（hover）・楕円形27/28・多角形2/3 を再現
幅600pxはグループ12793（幅1251px）の48%＝tpl-item--2col幅と一致するため
2カラム商品カード幅いっぱいに配置する
============================================================ */
.tpl-btn-wrap {
width: 100%;
margin-top: 20px;
}
.tpl-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 49px;
position: relative;
padding: 0 40px;
border: 2px solid #000000;
color: #201000;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0;
text-align: center;
transition: .3s ease-out;
}
.tpl-btn::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
border-radius: 50%;
background: #000000;
transition: .3s ease-out;
}
.tpl-btn::after {
content: "";
position: absolute;
top: 50%;
right: 21px;
transform: translateY(-50%) rotate(-90deg);
border-top: 5px solid #fff;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
transition: .3s ease-out;
}
.tpl-btn:hover {
background: #000000;
color: #fff;
}
.tpl-btn:hover::before {
background: #fff;
}
.tpl-btn:hover::after {
border-top: 5px solid #000000;
}
/* 半分幅ボタン（詳細はこちら） */
.tpl-btn-wrap--half {
width: 48%;
margin-top: 12px;
}
/* 半分幅ボタンを左右2カラムで並べる行ラッパー
PC・SPとも常に左右2カラム（横並び）を維持する（SP用の横並び指定はレスポンシブ側に記載） */
.tpl-btn-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
}
.tpl-btn-row .tpl-btn-wrap--half {
margin-top: 0; /* ボタン間の余白は行の gap で管理 */
}
/* ============================================================
松坂屋オンラインストアボタン（商品カード内・半分幅ボタンの直下）
.tpl-btn を流用し、幅455pxで配置
============================================================ */
.tpl-btn-wrap--online,
.tpl-btn-wrap--app {
width: 455px;
max-width: 100%;
margin-top: 12px;
}
/* ハーフボタン・オンラインストアボタンの改行位置コントロール（flex-wrap: wrap）:
ボタン文言を で区切ると、1行に収まる間は横並びのまま、
収まらない幅になったときだけ span の区切り位置で改行される */
.tpl-btn-wrap--half .tpl-btn,
.tpl-btn-wrap--online .tpl-btn {
height: auto;
min-height: 49px;
padding: 8px 40px;
font-size: 2.4rem;
line-height: 1.3;
flex-wrap: wrap;
}
/* ============================================================
大丸・松坂屋アプリ会員ボタン（商品カード内・オンラインストアボタンの直下）
XD: 長方形15（455×68px、白塗り/黒枠2px）+ ロゴ画像 + 既存の黒丸・矢印アイコン
============================================================ */
.tpl-btn--app {
height: auto; /* タイトルが2行になった場合に高さを伸ばす（1行時は min-height により従来と同じ68px） */
min-height: 68px;
padding: 0 40px;
}
.tpl-btn-app-logo {
width: 50px;
height: 50px;
margin-right: 15px;
flex-shrink: 0;
}
.tpl-btn-app-text {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.3;
}
/* タイトルはオンラインストアボタンと同じ改行位置コントロール:
文言を で区切ると、1行に収まる間は横並びのまま、
収まらない幅になったときだけ span の区切り位置で改行される */
.tpl-btn-app-title {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 2.5rem;
font-weight: 600;
}
.tpl-btn-app-sub {
font-size: 1.8rem;
}
/* ============================================================
リンクバナー（XD: 画像 1・リンクバナー をCSSで再現）
============================================================ */
.tpl-link-banner-area {
width: calc(100% - 60px);
max-width: var(--banner-max);
margin: var(--banner-margin);
}
.tpl-link-banner-area--top {
margin-top: 60px;
}
.tpl-link-banner-area--section {
margin: 80px auto 0;
}
.tpl-link-banner-area--inline {
width: 100%;
margin: 0 auto;
}
.tpl-link-banner-area > * + * {
margin-top: 30px;
}
.tpl-link-banner {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: calc(100% - 60px);
max-width: var(--banner-max);
aspect-ratio: 1251 / 162;
height: auto;
margin: var(--banner-margin);
border: 1px solid #707070;
border-radius: 81px;
background: #CBCBCB;
overflow: hidden;
color: #fff;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 600;
font-size: 5rem;
line-height: 1;
letter-spacing: 0;
text-align: center;
transition: .3s ease-out;
}
.tpl-link-banner-area .tpl-link-banner {
width: 100%;
margin: 0 auto;
}
.tpl-link-banner span {
display: block;
width: auto;
min-width: 298px;
max-width: calc(100% - 100px);
height: auto;
padding: 0;
color: #fff;
font: inherit;
font-size: clamp(3rem, 4vw, 5rem);
line-height: 1.2;
overflow-wrap: anywhere;
text-align: center;
white-space: normal;
}
.tpl-link-banner:hover {
opacity: .85;
}
.tpl-link-banner-img {
display: block;
width: calc(100% - 60px);
max-width: var(--banner-max);
margin: var(--banner-margin);
transition: .3s ease-out;
}
.tpl-link-banner-area .tpl-link-banner-img {
width: 100%;
margin: 0 auto;
}
.tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner,
.tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner-img,
.tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner,
.tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner-img {
margin-top: 60px;
}
.tpl-link-banner-img img {
display: block;
width: 100%;
}
.tpl-link-banner-img:hover {
opacity: .85;
}
#tplContents .tpl-cont .tpl-item--1col.tpl-link-banner-item {
width: 100%;
margin: 40px 0 80px;
}
#tplContents .tpl-cont .tpl-item--1col.tpl-link-banner-item .tpl-link-banner-area {
max-width: var(--content-max);
}
/* ------------------------------------------------------------
PC/タブレット幅（769px以上）の左右余白を最低20pxずつ確保する
ビューポート端に接する最上位コンテナの幅を
min(100% - 40px, 最大幅) に固定することで、
・画面が広いときは従来どおり最大幅を維持（自動余白は20px超）
・最大幅に近い中間幅でも左右の余白が必ず20px以上になる
従来の「width:100% + max-width + margin:auto」だけでは、
画面幅が「最大幅 〜 最大幅+40px」のときに自動余白が20px未満へ
痩せる隙間があった（例: コンテンツ1266〜1289px、
グランドメニュー1026〜1239px）。
.tpl-notice は常に .tpl-cont ul の内側にあるため、親側の余白で
自動的に20px以上が確保される（ここでは触れない）。
スマホ幅（768px以下）は各要素の専用指定が優先されるため影響なし。
------------------------------------------------------------ */
@media screen and (min-width: 769px) {
#tplContents .tpl-cont ul {
width: min(100% - 40px, var(--content-max));
}
.tpl-grandmenu ul.tpl-cir {
width: min(100% - 40px, var(--grandmenu-max));
}
}
@media screen and (max-width: 1025px) and (min-width: 769px) {
.tpl-grandmenu ul.tpl-cir {
grid-template-columns: minmax(0, var(--grandmenu-btn-w));
}
.tpl-grandmenu ul.tpl-cir li {
width: 100%;
max-width: var(--grandmenu-btn-w);
}
}
/* ============================================================
レスポンシブ（スマートフォン：768px以下）
[clamp() の読み方]
clamp(最小, 可変vw, 最大) の可変vw は、基本 「最大px ÷ 768 × 100」。
→ 画面幅768pxのとき最大値に到達し、そこから画面幅に比例して縮み、
最小値で止まる（例: 5.21vw = 40px ÷ 768 × 100）。
グランドメニューのボタン内だけは XD の SPアートボード基準で「÷ 750」。
フォントサイズ系は最大値へ到達する幅が個別（「最大px ÷ vw係数 × 100」で逆算できる）。
============================================================ */
@media screen and (max-width: 768px) {
.tpl-page {
--sp-edge: clamp(14px, 5.21vw, 40px); /* 画面端の余白（768px時 40px） */
--sp-narrow-edge: clamp(14px, 3.91vw, 30px); /* 狭めの画面端余白（768px時 30px） */
--sp-section-y: clamp(48px, 7.82vw, 60px); /* セクション上下余白（768px時 60px） */
--sp-list-gap: clamp(28px, 5.21vw, 40px); /* 商品リストの間隔（768px時 40px） */
}
.tpl-page .sp {
display: block;
}
.tpl-page .pc {
display: none;
}
#tplLead {
max-width: 100%;
padding: clamp(14px, 3.65vw, 28px) var(--sp-narrow-edge);
}
#tplLead .tpl-ttl,
#tplLead .tpl-kaiki,
#tplLead .tpl-txt {
margin: clamp(8px, 1.3vw, 10px) 0;
}
#tplLead .tpl-ttl {
gap: clamp(4px, 1.04vw, 8px);
}
#tplLead .tpl-ttl b {
font-size: clamp(1.7rem, 4.58vw, 2.2rem);
}
#tplLead .tpl-kaiki {
gap: clamp(8px, 2.6vw, 20px);
}
#tplLead .tpl-kaiki {
line-height: 1.6;
}
#tplLead .tpl-txt,
#tplLead .tpl-kaiki p {
font-size: clamp(1.1rem, 3.13vw, 1.4rem);
}
#tplLead .tpl-sub {
margin: clamp(18px, 3.26vw, 25px) 0 clamp(12px, 1.95vw, 15px);
font-size: clamp(.8rem, 2.35vw, .9rem);
line-height: 1.7;
}
.tpl-grandmenu {
padding: clamp(32px, 5.21vw, 40px) 0;
}
.tpl-grandmenu > h2 {
padding: clamp(36px, 6.51vw, 50px) var(--sp-edge);
font-size: clamp(1.9rem, 5.21vw, 2.4rem);
line-height: 1.35;
}
.tpl-grandmenu ul.tpl-cir {
width: calc(100% - 20px);
max-width: 710px;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: clamp(10px, 2.67vw, 20px);
column-gap: clamp(5px, 1.33vw, 10px);
counter-reset: tpl-menu-number;
}
.tpl-grandmenu ul.tpl-cir li {
counter-increment: tpl-menu-number;
width: 100%;
max-width: 350px;
min-width: 0;
height: auto;
aspect-ratio: 350 / 120;
min-height: 0;
padding: clamp(12px, 3.73vw, 28px) clamp(6px, 2.13vw, 16px) clamp(4px, 1.07vw, 8px);
border-radius: 999px;
align-content: center;
}
.tpl-grandmenu ul.tpl-cir li u {
position: absolute;
top: calc(clamp(-10px, -1.33vw, -5px) - 4px);
left: 50%;
transform: translateX(-50%);
width: clamp(18px, 5.34vw, 40px);
height: clamp(18px, 5.34vw, 40px);
text-decoration: none;
}
.tpl-grandmenu ul.tpl-cir li u::before {
content: counter(tpl-menu-number, decimal-leading-zero);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #777;
border-radius: 4px;
background: #d9d9d9;
color: var(--grandmenu-text);
font-size: clamp(.7rem, 1.87vw, 1.4rem);
line-height: 1;
}
.tpl-grandmenu ul.tpl-cir li.select u::before {
border-color: var(--color-black);
background: var(--color-black);
color: var(--btn-txt-active);
}
.tpl-grandmenu ul.tpl-cir li i {
width: 100%;
font-size: clamp(.7rem, 2.14vw, 1.6rem);
line-height: 1.15;
text-align: center;
}
.tpl-grandmenu ul.tpl-cir li b {
padding: 0 4px;
font-size: clamp(1rem, 3.2vw, 2.4rem);
line-height: 1.1;
overflow-wrap: anywhere;
}
#tplContents .tpl-cont {
padding: var(--sp-section-y) 0;
}
#tplContents .tpl-cont h2 {
padding: clamp(70px, 11.72vw, 90px) var(--sp-edge) 0;
font-size: clamp(2rem, 6.25vw, 2.4rem);
line-height: 1.25;
}
#tplContents .tpl-cont h2::before {
width: clamp(44px, 7.82vw, 60px);
height: clamp(44px, 7.82vw, 60px);
}
#tplContents .tpl-cont p {
font-size: clamp(1.3rem, 4.58vw, 1.76rem);
line-height: 1.55;
}
#tplContents .tpl-cont > p {
margin-top: clamp(16px, 2.87vw, 22px);
padding: 0 var(--sp-narrow-edge);
}
#tplContents .tpl-cont ul {
width: 100%;
padding: clamp(14px, 2.6vw, 20px);
}
#tplContents .tpl-cont ul.tpl-items {
margin-top: clamp(48px, 10.42vw, 80px);
}
#tplContents .tpl-cont.tpl-layout-2col .tpl-item--2col {
width: 100%;
margin-bottom: var(--sp-list-gap);
}
#tplContents .tpl-inner-ttl {
padding: 0 clamp(14px, 2.6vw, 20px);
margin-bottom: clamp(20px, 3.91vw, 30px);
}
#tplContents .tpl-inner-ttl.mt {
margin-top: clamp(44px, 10.42vw, 80px);
}
#tplContents .tpl-cont .tpl-item--1col.tpl-notice-item--with-list {
margin-bottom: clamp(44px, 10.42vw, 80px);
}
#tplContents .tpl-cont .tpl-item--2col .tpl-thumb {
margin-bottom: clamp(8px, 1.3vw, 10px);
}
#tplContents .tpl-cont .tpl-item--2col .tpl-genre-tags,
#tplContents .tpl-notice .tpl-genre-tags {
gap: clamp(5px, 1.04vw, 8px);
margin-bottom: clamp(8px, 1.3vw, 10px);
}
#tplContents .tpl-cont .tpl-item--2col .tpl-genre-tag,
#tplContents .tpl-notice .tpl-genre-tag {
width: auto;
min-width: clamp(58px, 10.42vw, 80px);
height: auto;
min-height: clamp(26px, 4.56vw, 35px);
padding: 0 clamp(6px, 1.3vw, 10px);
font-size: clamp(1.1rem, 3.65vw, 1.4rem);
}
#tplContents .tpl-cont .tpl-item--2col .tpl-genre-tags .tpl-period-badge,
#tplContents .tpl-notice .tpl-genre-tags .tpl-period-badge {
width: clamp(64px, 10.67vw, 82px);
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text,
#tplContents .tpl-notice .tpl-text {
margin-top: clamp(10px, 2.08vw, 16px);
font-size: clamp(1.3rem, 3.65vw, 1.4rem);
line-height: 1.7;
}
#tplContents .tpl-cont .tpl-item--2col .tpl-text p,
#tplContents .tpl-notice .tpl-text p,
#tplContents .tpl-notice-text .tpl-notice-line {
font-size: inherit;
line-height: inherit;
}
#tplContents .tpl-notice-img {
margin-bottom: clamp(20px, 3.91vw, 30px);
}
#tplContents .tpl-notice .tpl-btn-wrap + .tpl-btn-wrap {
margin-top: clamp(18px, 3.13vw, 24px);
}
#tplContents .tpl-cont .tpl-item--1col.tpl-link-banner-item {
margin: clamp(28px, 5.21vw, 40px) 0 clamp(48px, 10.42vw, 80px);
}
.tpl-link-banner-area {
width: calc(100% - (var(--sp-edge) * 2));
margin: clamp(40px, 7.82vw, 60px) auto clamp(24px, 3.91vw, 30px);
}
.tpl-link-banner-area--inline {
width: 100%;
margin: 0 auto;
}
.tpl-link-banner-area > * + * {
margin-top: clamp(20px, 3.13vw, 24px);
}
.tpl-link-banner {
width: calc(100% - (var(--sp-edge) * 2));
height: auto;
min-height: clamp(50px, 12.5vw, 96px);
margin: clamp(40px, 7.82vw, 60px) auto clamp(24px, 3.91vw, 30px);
padding: clamp(8px, 2.08vw, 16px) clamp(18px, 4.17vw, 32px);
border-radius: 999px;
font-size: clamp(1.2rem, 3.65vw, 2.8rem);
}
.tpl-link-banner-area .tpl-link-banner {
width: 100%;
margin: 0 auto;
}
.tpl-link-banner span {
min-width: clamp(140px, 46.6vw, 179px);
max-width: calc(100% - clamp(32px, 7.82vw, 60px));
height: auto;
padding: 0;
font-size: clamp(1.2rem, 3.65vw, 2.8rem);
line-height: 1.2;
}
.tpl-link-banner-img {
width: calc(100% - (var(--sp-edge) * 2));
margin: clamp(40px, 7.82vw, 60px) auto clamp(24px, 3.91vw, 30px);
}
.tpl-link-banner-area .tpl-link-banner-img {
width: 100%;
margin: 0 auto;
}
.tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner,
.tpl-link-banner-area--bottom > .tpl-link-banner + .tpl-link-banner-img,
.tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner,
.tpl-link-banner-area--bottom > .tpl-link-banner-img + .tpl-link-banner-img {
margin-top: clamp(28px, 5.21vw, 40px);
}
.tpl-btn-wrap {
margin-top: clamp(14px, 3.13vw, 20px);
}
/* ハーフボタン（1個設置）はSPでも半分幅のまま（基本の width:48% をそのまま適用） */
/* 2カラム行はSPでも横並びを維持（フルレスポンシブ）。
gapを差し引いた残りを2列で均等に折半する */
.tpl-btn-row {
flex-wrap: nowrap; /* 折り返し無効＝縦積みにしない */
margin-top: clamp(14px, 3.13vw, 20px); /* 既存の上マージンは維持 */
}
.tpl-btn-row .tpl-btn-wrap--half {
flex: 1 1 0; /* 2列を均等・流動的に維持（折り返さない） */
width: auto; /* 基本の width:48% を無効化し、flexの均等配分に任せる */
min-width: 0; /* コンテンツ幅以下にも縮小可能にしてはみ出し防止 */
}
.tpl-btn {
height: auto;
min-height: clamp(40px, 11.46vw, 44px);
padding: clamp(8px, 2.6vw, 10px) clamp(32px, 10.42vw, 40px);
font-size: clamp(1.2rem, 3.39vw, 1.3rem);
line-height: 1.25;
}
.tpl-btn::before {
width: clamp(16px, 5.21vw, 20px);
height: clamp(16px, 5.21vw, 20px);
right: clamp(10px, 3.91vw, 15px);
}
.tpl-btn::after {
right: clamp(15px, 5.47vw, 21px);
border-top-width: clamp(4px, 1.3vw, 5px);
border-right-width: clamp(2px, .78vw, 3px);
border-left-width: clamp(2px, .78vw, 3px);
}
.tpl-btn-wrap--online,
.tpl-btn-wrap--app {
width: 100%;
}
.tpl-btn-wrap--half .tpl-btn,
.tpl-btn-wrap--online .tpl-btn {
min-height: clamp(44px, 12.76vw, 49px);
padding: clamp(8px, 2.6vw, 10px) clamp(32px, 10.42vw, 40px);
font-size: clamp(1.4rem, 5.33vw, 2.4rem);
line-height: 1.2;
}
.tpl-btn--app {
height: auto;
min-height: clamp(54px, 15.63vw, 68px);
padding: clamp(8px, 2.6vw, 10px) clamp(34px, 10.42vw, 40px);
}
.tpl-btn-app-logo {
width: clamp(34px, 10.42vw, 50px);
height: clamp(34px, 10.42vw, 50px);
margin-right: clamp(10px, 1.95vw, 15px);
}
.tpl-btn-app-title {
font-size: clamp(1.6rem, 5.33vw, 2.5rem);
}
.tpl-btn-app-sub {
font-size: clamp(1.2rem, 3.91vw, 1.8rem);
}
/* --- 出店舗リスト（cont7）。2カラムは維持したまま縮小する ---
幅は PC 側の min(100% - 40px, --shop-max) がそのまま効くので上書きしない */
#tplContents .tpl-shop-period {
margin-top: clamp(48px, 10.42vw, 80px);
}
#tplContents .tpl-shop-period + .tpl-shop-period {
margin-top: clamp(48px, 10.42vw, 80px);
}
/* バー内の文字は font-size 1か所で拡縮する（gap・padding は em で追従）。
可変部を「vw − px」の一次式にしているのは、いちばん字数の多い会期バーが
375px幅でもバー内に収まるようにするため（他所の「最大px ÷ 768 × 100」だけでは
375pxで文字がバー幅いっぱいになってしまう）。768pxでPC側の値に接続する */
#tplContents .tpl-shop-period-bar {
min-height: clamp(44px, 10.42vw, 80px);
border-radius: clamp(10px, 2.6vw, 20px);
font-size: clamp(1.6rem, 7.2vw - 8.3px, 4.9rem);
}
#tplContents .tpl-cont--shops ul.tpl-shop-list {
column-gap: 10px; /* 2列維持のため、折り返し時に列同士が接しないよう最小の列間を入れる */
margin-top: clamp(20px, 5.86vw, 45px);
padding: 0; /* 汎用SPの ul（padding: clamp(14px, 2.6vw, 20px)）を解除 */
}
#tplContents .tpl-cont--shops .tpl-shop-item {
font-size: clamp(1.4rem, 3.39vw, 2.6rem); /* 26px系の既存SP指定と同係数 */
}
/* --- アプリクーポン（cont8） ---
幅は PC 側の min(100% - 40px, --app-max / --app-btn-max) がそのまま効くので上書きしない。
バナーの font-size も PC 側の min(4.9rem, 6vw) が 375px で約22pxまで下がるため上書き不要 */
#tplContents .tpl-cont--app .tpl-app-banner {
min-height: clamp(80px, 23.44vw, 180px);
margin-top: clamp(48px, 10.42vw, 80px);
border-radius: clamp(10px, 2.6vw, 20px);
}
#tplContents .tpl-cont--app .tpl-app-body {
margin-top: clamp(48px, 10.42vw, 80px);
}
#tplContents .tpl-cont--app .tpl-app-icon {
width: clamp(180px, 52.08vw, 400px);
}
#tplContents .tpl-cont--app .tpl-app-period {
margin-top: clamp(20px, 5.21vw, 40px);
font-size: clamp(1.4rem, 3.39vw, 2.6rem); /* 26px系の既存SP指定と同係数 */
}
#tplContents .tpl-cont--app .tpl-app-note {
margin-top: clamp(20px, 5.21vw, 40px);
font-size: clamp(1.1rem, 1.82vw, 1.4rem);
}
#tplContents .tpl-cont--app .tpl-app-btn-wrap {
margin-top: clamp(48px, 10.42vw, 80px);
}
#tplContents .tpl-cont--app .tpl-app-btn {
gap: clamp(10px, 3.52vw, 27px);
min-height: clamp(56px, 12.5vw, 96px);
font-size: clamp(1.4rem, 3.13vw, 2.4rem);
}
#tplContents .tpl-cont--app .tpl-app-btn-arrow {
width: clamp(28px, 6.51vw, 50px);
height: clamp(28px, 6.51vw, 50px);
}
#tplContents .tpl-cont--app .tpl-app-btn-arrow::before {
border-top-width: clamp(5.6px, 1.3vw, 10px);
border-bottom-width: clamp(5.6px, 1.3vw, 10px);
border-left-width: clamp(13.4px, 3.13vw, 24px);
}
}
/* 768px以下でもマウス操作できる環境（狭い PC ウィンドウ等）向けの番号バッジ hover。
タッチ端末には効かせず、タップ後の select 表示だけを残します */
@media screen and (max-width: 768px) and (hover: hover) and (pointer: fine) {
.tpl-grandmenu ul.tpl-cir li:hover u::before {
border-color: var(--color-black);
background: var(--color-black);
color: var(--btn-txt-active);
}
}
/* ==========================================================================
案件スキン: osechi
サイズ・余白・行間が案件のデザインで違う場合は、テンプレートの基本値を書き換えず
ここに .tpl-page--osechi 配下で上書きを書く。変更した値には XD 注記コメントで出所を残す。
PC は XD px = CSS px、rem は px ÷ 10（html{font-size:10px}）。
SP は XD にアートボードが無いので、既存の clamp() 設計をそのまま使う。
========================================================================== */
/* 和文のプロポーショナルメトリクス（palt）はページ全体には当てない。
XD 実測で本文は全角ベタ（palt なし）であることが確認できているため。
・XD の「（木）」= 85px ＝ 28px × 3文字の全角ベタ（Hiragino Sans 28px palt なしで 84px）
・palt の有無で行数が変わるテキスト 9 件を XD と全件照合し、8 件は palt なしが一致
例外は cont8「ご注文期間」の日付 1 行だけで、そこは .tpl-info-em.tpl-info-tight で個別に当てる。
※以前ここで括弧が間延びして見えたのは書体が置換されていたためで、
font-family を Hiragino Sans に直したことで解消している。 */
/* 書体。XD の指定は cont1〜cont6 が Hiragino Kaku Gothic ProN、cont8 が Hiragino Sans で、
どちらも同じヒラギノ角ゴだが、現行 macOS に実在するのは Hiragino Sans のほう。
"Hiragino Kaku Gothic ProN" は「見つからない」ではなく OS 側で別書体に置換されるため、
後ろに Hiragino Sans を並べても到達しない。必ず Hiragino Sans を先頭に置くこと。
ウェイトは W3 = 300 / W6 = 600（400 は W4 で 1 段太い）。
#tplContents .tpl-cont（基本CSS）が id 込みの詳細度で当たるので、そちらも上書きする。 */
.tpl-page--osechi,
.tpl-page--osechi #tplContents .tpl-cont {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}
.tpl-page--osechi {
/* --- グランドメニュー（XD: btn 共通シンボル / パス957） -------------------
通常=ピンク地、hover/select=白地。文字色は状態で変えない（XD に色変化なし）。
アイコンは画面収録 2026-08-31 16.29.46 の動きを正とする。 */
--grandmenu-btn-w: 390px; /* XD: パス957 390px */
--grandmenu-btn-bg: #F0B9B9; /* XD: パス957 通常時の塗り */
--grandmenu-btn-txt: #333333; /* XD: サブコピー（例 心ときめくスペシャルな一品） */
--grandmenu-btn-bg-active: #FFFFFF; /* XD: パス957 選択時の塗り */
--grandmenu-btn-txt-active: #333333; /* 文字色は状態で変えない */
--grandmenu-color-duration: .3s;
--grandmenu-motion-duration: .3s;
--grandmenu-sub-shift: -21.5px; /* XD: アイコン33px + gap10px の半分 */
--grandmenu-max: 792px; /* XD: グループ13000 792px */
}
/* 赤い帯（XD: pixta_79757784_XL_反転 #F22D00 をアートボード幅いっぱいに敷く） */
.tpl-page--osechi .tpl-grandmenu {
background-color: #F22D00; /* XD: pixta_79757784_XL_反転 */
padding: 0 0 50px; /* XD: 金色ボタン下端1798 → アートボード下端1848 */
}
.tpl-page--osechi .tpl-grandmenu > h2 {
padding: 60px 20px 39px; /* XD: 帯上端1196→h2上端1256 / h2下端1293→ボタン上端1332 */
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
/* XD: 同テキスト Hiragino Kaku Gothic ProN。
テンプレート既定の .tpl-grandmenu > h2 は
"Hiragino Kaku Gothic StdN" を要素へ直接宣言しているため、
上の .tpl-page--osechi の書体指定が継承では届かない。
ここで打ち消して他のテキストと同じヒラギノ角ゴにそろえる */
font-size: 2.6rem; /* XD: 松坂屋名古屋店の厳選おせち・迎春料理をピックアップ 26px */
font-weight: 400; /* XD: 同テキスト W4。テンプレート既定の 600 は W6 で 2 段太い */
line-height: 1.92; /* XD: 行送り50px ÷ 26px */
color: #FFFFFF; /* XD: 同テキスト #FFFFFF */
}
/* 見出しの改行位置。XD は PC（TOP – 1）が1行、SP（TOP_SP）が
「松坂屋名古屋店の」で改行した2行なので、SP でだけ効く の高さは行送りぶんあるので字面の上下に (1.68-1)/2 = .34em の半端アキが付く。
したがって margin を 16px にすると字面の間隔は 16 + .34em×2 ≒ 33px になり、倍近く開く。
margin: 0 にすると半端アキ 2つぶん（22px なら 14.96px / 26px なら 17.68px）が
そのまま XD の 16px に相当するので、これが正しい実装。 */
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text {
margin-top: 31px; /* XD: 画像下端 → 監修者名の字面上端 40px − 上の半端アキ 8.8px */
font-size: 1.8rem; /* 2026年版サイト実測: スペック・注記・説明文 18px（XD は 22px） */
line-height: 1.68; /* XD: 行送り 36.96px ÷ 22px。18px でも 30.24px となり
2026年版サイトの 30.27px と一致するため係数は据え置き */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-genre-tags + .tpl-text {
margin-top: 7px; /* XD: マーク下端 2992 → 監修者名の字面上端 3008 = 16px − 8.8px */
}
/* ＜肉の御嵩屋＞だけ「価格＋内容」が2組あり、校正指示で組ごとにオンライン購入ボタンを置く。
ボタンに続くテキストは、画像に続くときの 31px ではなくボタン自身と同じ 33px で受ける
（ボタンの上下どちらも字面 40px でそろう） */
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-btn-wrap--online + .tpl-text {
margin-top: 33px;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text p {
margin: 0; /* XD: 字面どうし 16px ＝ 上下の半端アキでちょうど埋まる */
font-size: inherit; /* 基本CSSの #tplContents .tpl-cont p（1.4rem）が
に直接当たって .tpl-text の 22px を上書きするため打ち消す
（SP側の基本CSSには同じ打ち消しが元から入っている） */
font-weight: 300; /* XD: 商品名・スペック・注記・説明文はすべて W3。
ヒラギノの W3 は CSS の 300 で、400 は W4（1段太い）。
監修者名だけ W6 なので下の .tpl-brand で 600 に戻す */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-brand {
font-size: 2rem; /* 2026年版サイト実測: 監修者名 20px（XD は 26px W6） */
font-weight: 600;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-name {
font-size: 2rem; /* 2026年版サイト実測: 商品名+価格 20px（XD は 26px W3） */
font-weight: 300;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-price {
font-weight: 300; /* XD: 商品名と価格は同じ 1 ノード＝同じ W3 */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-desc {
margin-top: 25px; /* XD: 注記 → 説明文 40px − 半端アキ 2つぶん 15px。
注記が無いカードでも効くよう説明文側に持たせる */
margin-bottom: 0;
}
/* 校正指示の「（400ｇ） ⬆写真の商品」。上矢印を丸で囲んだ印を全角アキのあとに置く。
1em 角・vertical-align も em で持たせてあるので、SP の clamp() で本文が縮んでも
同じ比率で付いてくる（SP 側の上書きは不要）*/
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-photo-mark {
display: inline-block;
width: 1em;
height: 1em;
margin-right: .15em;
vertical-align: -.15em;
background: url("assets/images/cont4/cont4_icon2.svg") no-repeat center / contain;
}
/* 購入ボタン（XD: SymbolInstance「オンライン購入ボタン」495×91・カード左端そろえ）。
1行目が文言、2行目が注文期間で、期間もボタンの内側にある */
.tpl-page--osechi .tpl-btn-wrap--online {
width: 495px; /* XD: オンライン購入ボタン 495px */
margin-top: 33px; /* XD: 説明文の字面下端 → ボタン上端 40px − 下の半端アキ 7.5px */
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn {
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 91px; /* XD: ボタン高さ 91px */
padding: 15.7px 70px 13.6px 19px; /* XD: ボタン外周から字面まで 上20 / 左20 / 下17。
padding は枠線の内側から測るので 1px 枠と、
line-height 1.3 の半端アキ（22px→3.3 / 16px→2.4）を差し引く。
右は丸アイコンぶん確保 */
border: 1px solid #B42727; /* XD: 長方形9466 の線 1px（塗りは無効） */
color: #B42727; /* XD: オンラインストアにて購入する #B42727 */
font-size: 2.2rem; /* XD: 同 22px W6 */
line-height: 1.3;
text-align: left;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn .tpl-date {
margin: 9.3px 0 0; /* XD: 文言の字面下端 → 期間の字面上端 15px
（グループ12752 の stack spacing 15）− 半端アキ 3.3+2.4 */
color: var(--color-text); /* XD: 注文期間 16px W6 #333333 */
font-size: 1.6rem;
transition: .3s ease-out; /* 親の .tpl-btn と同じ 0.3s。
これが無いと hover 時にこの色だけ即座に切り替わる */
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn::before {
width: 38px; /* XD: 楕円形 38px */
height: 38px;
top: 24.72%; /* XD: ボタン上端 6551 → 楕円上端 6574 ＝ 23px。
% の基準は border ではなく padding ボックス（91−枠2＝89px）なので
(23−1) ÷ 89 = 24.72%。上下中央（26.5px）より 3.5px 上。
% にしておくと SP でボタンが縮んでも同じ比率で付いてくる */
right: 20px;
transform: none; /* テンプレートの translateY(-50%) を打ち消す */
background: #B42727;
}
/* 矢印（XD: グループ12750 = 長方形9467「軸 13×2」＋ 長方形9468「8×2 を +45°」
＋ 長方形9469「8×2 を −45°」の3本で描いた線矢印。塗りつぶし三角ではない）。
::after を軸に、ヒゲ2本は .tpl-btn-label の疑似要素で描く（.tpl-btn の疑似要素は
丸と軸で使い切っているため）。位置はすべて丸の中心（右から 39px）を基準にした XD 実測値 */
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn::after {
width: 13px; /* XD: 長方形9467 13×2 */
height: 2px;
top: 46.07%; /* 丸の中心 = 23 + 19 = 42px。(42−1) ÷ 89 = 46.07% */
right: 33px; /* 丸の中心 39px − 軸の右へのはみ出し 6px */
border: 0; /* テンプレートの三角形（border）を打ち消す */
transform: translateY(-50%); /* 同 rotate(-90deg) も打ち消す */
background: #FFFFFF;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::before,
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::after {
content: "";
width: 8px; /* XD: 長方形9468 / 9469 とも 8×2 */
height: 2px;
position: absolute;
top: 46.07%; /* 軸と同じく丸の中心 */
right: 31px; /* ヒゲの中心 = 丸の中心 39px − 4px → 右端は 31px */
background: #FFFFFF;
transition: .3s ease-out;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::before {
transform: translateY(calc(-50% - 2.46px)) rotate(45deg);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::after {
transform: translateY(calc(-50% + 2.46px)) rotate(-45deg);
}
/* hover はテンプレートの「0.3秒で配色反転」を踏襲し、色だけ XD の赤に置き換える
（XD 側に hover 状態は存在しない） */
@media (hover: hover) and (pointer: fine) {
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover {
background: #B42727;
color: #FFFFFF;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover .tpl-date {
color: #FFFFFF;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover::before {
background: #FFFFFF;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover::after {
border: 0; /* テンプレート側の :hover::after（border-top 再指定）を打ち消す */
background: #B42727;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover .tpl-btn-label::before,
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover .tpl-btn-label::after {
background: #B42727;
}
}
/* タッチ端末では tap 後に :hover が残る。テンプレートの .tpl-btn:hover（黒地・白文字）は
@media の外にあるため、上の赤い hover を打ち消して黒くなってしまう。
このテンプレートの方針（cont8 の登録ボタン・グランドメニューと同じ）に合わせ、
hover を持たない環境では通常時の配色のままにする */
@media not all and (hover: hover) and (pointer: fine) {
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover {
background: transparent;
color: #B42727;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover .tpl-date {
color: var(--color-text);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover::before {
background: #B42727;
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover::after,
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover .tpl-btn-label::before,
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn:hover .tpl-btn-label::after {
border: 0;
background: #FFFFFF;
}
}
/* セクション見出し（XD: 大丸・松坂屋特別企画監修おせち 49px W6 / サブコピー 26px W3）
ウェイトはテンプレートの基本値（h2 = 500 / サブコピー = 400）のままだと
h2 が W5 相当で細く、サブコピーが W4 相当で1段太い。XD の W6 / W3 に合わせる
（cont1「大丸・松坂屋特別企画監修おせち」と cont8「承りおよびお渡し方法」の両方で
49px W6、cont8 のサブコピー「お早めのご予約をおすすめしております。」で 26px W3 を実測） */
.tpl-page--osechi #tplContents .tpl-cont h2 {
padding-top: 120px; /* XD: アイコン上端188 → h2上端308（アイコン65px + 55px） */
font-size: 3.6rem; /* 2026年版サイト実測: セクション見出し 36px（XD は 49px。
昨年サイトに合わせる指示のため XD より優先。基本値 4.9rem は残す） */
line-height: 1; /* 2026年版サイト実測: h2 は行間＝文字サイズ（PC 36/36・SP 24.5/24.5 とも 1.0）。
未指定だと PC は normal（36px→54px）、SP は基本CSS の 1.25（45px）が効き、
768/769 の境界で行ボックスが 9px 跳ぶ。1本で両方に効かせて段差を消す。
半端アキが 0 になるので padding-top 120px が字面の位置そのものになり、
アイコン下端→字面 55px（2026年版は 54px）と一致する */
color: var(--color-text); /* XD: 見出し #333333 */
font-weight: 600; /* XD: W6 */
}
.tpl-page--osechi #tplContents .tpl-cont > p {
margin-top: 40px; /* 2026年版サイト実測: h2 の margin-bottom 相当が 40px（.cont_lede の margin-top）。
h2 の行間を 1.0 にして下の半端アキ 9px が消えたため、16px のままだと
字面間隔が 25.2px まで詰まる（2026年版は 49.2px）。実測値に合わせる。
旧コメントの 12.25 / 11.96 は font-size 49/26px 前提で現在は無効 */
font-size: 2rem; /* 2026年版サイト実測: セクションリード 20px（XD は 26px） */
font-weight: 300; /* XD: W3 */
line-height: 1.92; /* XD: 行送り50px ÷ 26px。20px でも 38.4px となり
2026年版サイトの 38.46px と一致するため係数は据え置き */
}
/* テンプレートの「contごとの識別用カラー」はダミー期間の暫定色分け（h2 の色分けと
.tpl-thumb への filter）。実データを入れたセクションでは見た目を壊すので無効化する。
基本宣言は CLAUDE.md の残置指定どおり削除せず、ここで打ち消すだけにする。
セクションを実データ化するたびに、このセレクタへ [name="contN"] を足していく */
.tpl-page--osechi #tplContents .tpl-cont[name="cont2"] h2,
.tpl-page--osechi #tplContents .tpl-cont[name="cont3"] h2,
.tpl-page--osechi #tplContents .tpl-cont[name="cont4"] h2,
.tpl-page--osechi #tplContents .tpl-cont[name="cont5"] h2,
.tpl-page--osechi #tplContents .tpl-cont[name="cont6"] h2 {
color: var(--color-text);
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont2"] .tpl-thumb,
.tpl-page--osechi #tplContents .tpl-cont[name="cont2"] .tpl-inner-ttl img,
.tpl-page--osechi #tplContents .tpl-cont[name="cont3"] .tpl-thumb,
.tpl-page--osechi #tplContents .tpl-cont[name="cont3"] .tpl-inner-ttl img,
.tpl-page--osechi #tplContents .tpl-cont[name="cont4"] .tpl-thumb,
.tpl-page--osechi #tplContents .tpl-cont[name="cont4"] .tpl-inner-ttl img,
.tpl-page--osechi #tplContents .tpl-cont[name="cont5"] .tpl-thumb,
.tpl-page--osechi #tplContents .tpl-cont[name="cont5"] .tpl-inner-ttl img,
.tpl-page--osechi #tplContents .tpl-cont[name="cont6"] .tpl-thumb,
.tpl-page--osechi #tplContents .tpl-cont[name="cont6"] .tpl-inner-ttl img {
filter: none;
}
/* セクション見出しのアイコンは cont ごとに違う（テンプレートの既定は cont1 の画像固定）。
cont1〜cont3 は各グランドメニューボタンと同じアイコンを使う。 */
.tpl-page--osechi #tplContents .tpl-cont[name="cont1"] h2::before {
background-image: url("assets/images/top/icon01.svg");
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont2"] h2::before {
background-image: url("assets/images/top/icon02.svg");
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont3"] h2::before {
background-image: url("assets/images/top/icon03.svg");
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont4"] h2::before {
background-image: url("assets/images/cont4/cont4_icon1.svg"); /* XD: グループ12792 */
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont5"] h2::before {
background-image: url("assets/images/cont5/cont5_icon1.svg"); /* XD: グループ12794 */
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont6"] h2::before {
background-image: url("assets/images/cont6/cont6_icon1.svg"); /* XD: グループ12796 */
}
.tpl-page--osechi #tplContents .tpl-cont[name="cont8"] h2::before {
background-image: url("assets/images/cont8/cont8_icon1.svg"); /* XD: グループ12799 */
}
/* 写真2枚を重ねて置くカード（XD: cont3 カード6 グループ12757 1080×622）。
右上（back）が背面、左下（front）が前面。位置は XD の実測値を % 換算して可変にする */
.tpl-page--osechi #tplContents .tpl-cont .tpl-img--duo {
position: relative;
width: 100%;
aspect-ratio: 1080 / 622; /* XD: グループ12757 1080×622 */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-img--duo .tpl-thumb {
position: absolute;
width: auto;
margin: 0;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-img--duo .tpl-thumb--back {
left: 47.407%; /* XD: onArtboard x=771（グループ左端259から512px） */
top: 4.180%; /* XD: y=6392（グループ上端6366から26px） */
width: 47.778%; /* XD: 516px ÷ 1080px */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-img--duo .tpl-thumb--front {
left: 5.926%; /* XD: onArtboard x=323（グループ左端から64px） */
top: 27.974%; /* XD: y=6540（グループ上端から174px） */
width: 47.130%; /* XD: 509px ÷ 1080px */
}
/* ============================================================
承りおよびお渡し方法（cont8 / .tpl-cont--info）
XD: 07_ 承りおよびお渡し方法。テンプレートに同型が無いため新設したセクション型。
[構成] 下の見出し番号で PC → SP（@media 768px以下）が同じ並びになっている。
1 変数（幅・配色） 5 ラベル列 9 マーク
2 セクション枠 6 値カラム 10 ● の注記リスト
3 黒帯（サブ見出し） 7 値のテキスト 11 オンラインストアボタン
4 「ラベル ／ 内容」の行 8 ピンク／緑の囲み
[余白の決め方 — 各所の margin がXD実測値とズレて見える理由]
XD の座標は「字面（em ボックス）」基準だが、CSS の margin は「行ボックス」の外に付く。
行ボックスは字面より (行送り − 文字サイズ) ÷ 2 だけ上下に大きいので、そのままでは広がる。
margin ＝ XDのアキ − 前の要素の下の余り − 次の要素の上の余り
各行のコメントにある「XD: ○○px」は計算前の実測値。主な余り（PC・片側）:
.tpl-info-em 6.65 / .tpl-info-strong 10.08 / .tpl-info-label 6.5 / .tpl-info-label--lg 8
.tpl-info-line 6.6 / .tpl-info-caution 8.06 / .tpl-info-sub 5.04 / 注記・囲み本文 8
XD が同じ関係に別のアキを使っている箇所は、隣接セレクタ（+）や :has() で個別に足し引きする。
[:has() について] 行の例外指定に使っている。非対応ブラウザでは例外が効かず
基本値（ベースライン揃え・行間24px）のままになるだけで、崩れはしない。
============================================================ */
/* ---- 1. 変数（幅・配色） ---------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info {
--info-max: 1080px; /* XD: グループ12959 1080px */
--info-edge: 40px; /* 画面幅が --info-max に足りないときの左右余白（合計）。
テンプレート共通の #tplContents .tpl-cont ul と同じ
min(100% - 40px, 最大幅) ＝ 片側 20px の体系 */
--info-pad: 60px; /* XD: 本文の左右インセット（x=320 − 260） */
--info-bg: #F5F5F5; /* XD: pixta_78255150_L 各ブロックの下地（3ブロックとも塗り有効） */
--info-bar-bg: #F22D00; /* XD: pixta_78255150_L 赤帯 */
--info-bar-txt: #FFFFFF;
--info-sub-bg: #000000; /* XD: pixta_78255150_L 黒帯 960×72 #000000 */
--info-sub-txt: #FFFFFF;
--info-sub-accent: #F22D00; /* XD: pixta_78255150_L 黒帯左の 10×72 */
--info-em: #F22D00; /* XD: 日付・金額の赤 */
--info-pink-bg: #FFDEE9; /* XD: 長方形9495 */
--info-pink-key: #EF286D; /* XD: 長方形9494 */
--info-green-bg: #DAF5DC; /* XD: 長方形9495（緑） */
--info-green-key: #2EB133; /* XD: 長方形9494（緑） */
--info-overhang: 26px; /* XD: 末尾の注記だけ本文の右インセット(60px)を超えて 986px ある */
--info-btn-from: #E50002; /* XD: 長方形9498 グラデーション上 */
--info-btn-to: #A92324; /* XD: 同 下 */
}
/* ---- 2. セクション枠 -------------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info > p {
margin-bottom: 77px; /* XD: リード文の字面下端 412 → ブロック上端 501 ＝ 89px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-block {
width: min(100% - var(--info-edge), var(--info-max));
margin: 0 auto 60px; /* XD: ブロック間 stack spacing 60px */
padding-bottom: var(--info-pad); /* XD: ブロック下 padding 60px */
background: var(--info-bg);
text-align: left;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-bar {
display: flex;
align-items: center;
justify-content: center;
height: 100px; /* XD: グループ12955 1080×100 */
margin: 0 0 35px; /* XD: 帯下端 → 次の字面 43px（1ブロック目）/ 41px（オンラインストア） */
padding-top: 10px; /* XD: 帯(100px)の中で字面は上 36 / 下 26。
行ボックスの中央寄せだと 31/31 になるので 10px 下げる */
background: var(--info-bar-bg);
color: var(--info-bar-txt);
font-size: 3.8rem; /* XD: 店頭・お電話での承り 38px W6 */
font-weight: 600;
line-height: 1.3;
text-align: center;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body {
padding: 0 var(--info-pad);
}
/* XD: cont8 本文の既定 characterSpacing 20 ＝ .02em。入れないと1行に入る文字数が増えて改行位置がずれる。
letter-spacing の em は「宣言した要素自身の font-size」で px に解決され、その px 値が子へ継承される。
.tpl-info-body（font-size 10px）に1回だけ書くと 0.2px に固定され、26〜38px の子では
XD の 1/2.6〜1/3.8 の字送りにしかならないので、文字を持つ要素の側で宣言して
各要素の font-size で解決させる。:where() は詳細度 0 なので、下の .tpl-info-tight /
.tpl-info-kern / .tpl-info-kern2 / .tpl-info-day / .tpl-info-btn-text の個別指定が従来どおり勝つ */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body :where(p, li, h4, span, small, b, a) {
letter-spacing: .02em;
}
/* XD 側に字送りの指定が無いノード（ご注文期間の日付 / 本州・四国へのお届け / ※一部お届け地域）。
中の span・small も XD は 0 なので一緒に戻す（例外の1文字カーニングは下の .tpl-info-kern が上書きする） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tight,
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tight :where(span, small, b) {
letter-spacing: 0;
}
/* ---- 3. 黒帯（サブ見出し） -------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 12px;
min-height: 72px; /* XD: 黒帯 960×72 */
margin: 51px 0 22px; /* XD: 前の字面 → 帯上端 83px / 帯下端 → 次の字面 44px */
padding: 10px 21px; /* XD: テキスト x=352 − 帯 x=321 − 赤10px = 21px */
border-left: 10px solid var(--info-sub-accent); /* XD: 帯左の 10×72 #F22D00 */
background: var(--info-sub-bg); /* XD: 黒帯 #000000 */
color: var(--info-sub-txt);
font-size: 2.8rem; /* XD: ご来店お渡しの場合 28px W6 */
font-weight: 600;
line-height: 1.36; /* XD: 行送り 38px ÷ 28px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub:first-child {
margin-top: 62px; /* XD: 赤帯下端 2527 → 黒帯上の字面 2611 ＝ 84px。
赤帯の margin-bottom と相殺されるのでこちらに全量を持たせる */
}
/* 次がラベル独立行のときだけ帯下が広い（XD: 通常 44px / ラベル独立行 51px） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub + .tpl-info-row--stack {
margin-top: 27px;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub-note {
margin-left: 12px;
font-size: 2rem; /* XD: ※一般商品とは… 20px W6 */
font-weight: 600;
}
/* ---- 4. 「ラベル ／ 内容」の行 ---------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row {
display: flex;
align-items: baseline; /* XD: ラベルと値はベースライン揃え
（店頭承り期間 654+22.88 ≒ 10月1日（木） 644+33.44）。
flex-start だと小さいラベルが上に浮く */
gap: 12px; /* XD: ラベル右端 489 → 値 501 */
margin-bottom: 24px; /* XD: 行間 40〜41px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:last-child {
margin-bottom: 0; /* 次の黒帯の margin-top と二重にしない */
}
/* 以下は XD が行ごとに違うアキを使っている箇所の例外（4件） */
/* 値が「日付＋場所」の組（22px 終わり）の行は行ボックスの余りが小さいぶん戻す */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(.tpl-info-pair) {
margin-bottom: 27px;
}
/* 値が 32px の行は余りが大きいぶん削る（送料 → お届け地区） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:not(.tpl-info-row--stack):has(> .tpl-info-value > .tpl-info-strong) + .tpl-info-row {
margin-top: -3px;
}
/* XD: お渡し日時（字面下端 2728）→ お渡し場所（2754）は 26px。他の行間 40〜41px より詰まっている */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(> .tpl-info-value > .tpl-info-em:only-child) + .tpl-info-row {
margin-top: -15px;
}
/* XD:「ご注文期間」の日付（字面下端 2069）→ 注記（2102）は 33px */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row + .tpl-info-notes {
margin-top: -6px;
}
/* XD:「送料込み商品のお届けについて」の3行はラベルが独立行（ラベルも内容も x=320 で縦積み） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack {
display: block;
}
/* XD: ラベル独立行どうしの間は 60px（通常の行間 40px より広い） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack + .tpl-info-row--stack {
margin-top: 44px;
}
/* ---- 5. ラベル列 ------------------------------------------ */
/* XD はラベル列を固定幅にしていない（値の開始 x が行ごとに違う）。
固定幅にすると長いラベルが折り返してカラム落ちするので、折り返さない自動幅にする。 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-label {
flex: none;
margin: 0;
white-space: nowrap;
font-size: 2.6rem; /* XD: 店頭承り期間 26px W6 */
font-weight: 600;
line-height: 1.5;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-label--lg {
font-size: 3.2rem; /* XD: 送料込み商品について / お届け日 / お届け地域 32px W7 */
font-weight: 700;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-label--lg .tpl-info-sep {
font-size: 2.6rem; /* XD: ／ は 26px W6 のまま */
font-weight: 600;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sep {
margin-left: .3em;
}
/* XD:「店頭承り期間」「お電話承り期間」の2行だけ ／ が同じ x（527）にそろっていて、
ラベル+／ をまとめたグループの幅が 2行とも 233px（グループ12872 / 12871）。
ラベルの字面幅が違う（店頭承り期間 159px / お電話承り期間 185px）ぶん、／ の前のアキは
48px / 22px と変わる。列幅を固定して ／ を右端そろえにするとこの2つが同時に出る。
他のブロックは ／ の x が行ごとに違う（ご注文期間 465 / お渡し日時ほか 463 / 送料 383）ので
そろえない。.tpl-info-pair を持つのはこの2行だけなので、上の margin-bottom と同じ条件で当てる */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(.tpl-info-pair) .tpl-info-label {
display: flex;
width: 233px; /* XD: グループ12872 / 12871 の幅 233px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(.tpl-info-pair) .tpl-info-sep {
margin-left: auto; /* XD: ／ の左端は 2行とも x=527（列の右端そろえ） */
}
/* XD: 値が「日付1行だけ」の行はラベルが字面の中心で揃っている
（ご注文期間 +6 / お渡し日時 +5 / お届け日時 +5。ベースライン揃えだと一律 +10.5）。
値が複数行の行（店頭承り期間など）は XD もベースライン揃えなのでセレクタから外す */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(> .tpl-info-value > .tpl-info-em:first-child) .tpl-info-label {
position: relative;
top: -5.5px;
}
/* ラベル独立行のラベル下（XD: 28px。お届け地域だけ 39px） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack .tpl-info-label {
margin-bottom: 10px;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack:has(.tpl-info-em) .tpl-info-label {
margin-bottom: 8px; /* 値が 38px の行は上の余りが 6.65px と小さい */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack:has(.tpl-info-strong .tpl-genre-tag) .tpl-info-label {
margin-bottom: 20px; /* XD: お届け地域だけ 39px。59px のマークが入るぶん下げてある */
}
/* ---- 6. 値カラム ------------------------------------------ */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-value {
flex: 1 1 auto;
min-width: 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-value > p {
margin: 0 0 3px; /* XD: 値カラム内のアキ 16〜25px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-value > p:last-child {
margin-bottom: 0;
}
/* XD:「オンラインストアでのご注文の場合…」→「店頭・お電話・FAX…」は 21px。
1行目が 38px の「495円」を含むぶん行ボックスが高いので少し戻す */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-value > .tpl-info-strong + .tpl-info-strong {
margin-top: -4.5px;
}
/* ラベル独立行の中だけアキが広い2組 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack .tpl-info-value > p + .tpl-info-caution {
margin-top: 7px; /* XD: 商品によってお届け日が… → ※お届け時間… 25px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack .tpl-info-value > .tpl-info-strong + .tpl-info-strong {
margin-top: 20px; /* XD: 冷蔵便 → 冷凍便 47px。59px のマークで行ボックスが高い */
}
/* 「日付＋場所」を1組として扱う（XD: グループ12874 / 12875。組の中 12px、組と組 25px） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair {
margin-bottom: 12px; /* XD: 組と組は 25px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair:last-child {
margin-bottom: 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair > p {
margin: 0; /* XD: 組の中は 12px。行ボックスの余りだけで足りる */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair > p:last-child {
margin-bottom: 0;
}
/* ---- 7. 値のテキスト -------------------------------------- */
/* 日付・金額（数字が大きく、時刻など補助部分が小さい混在スタイル） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em {
color: var(--info-em); /* XD: #F22D00 */
font-size: 3.8rem; /* XD: 10月1日（木）→31日（土）38px W7 */
font-weight: 700;
line-height: 1.35;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em small {
font-size: 2.8rem; /* XD: 9時～21時 など 28px */
font-weight: 700;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em .tpl-info-em-sub {
font-size: 3.2rem; /* XD: 14時 / 午前10時 32px */
font-weight: 700;
}
/* XD はいずれも1行。ただし要素全体を nowrap にすると狭い PC 幅で横はみ出しするので、
「日付＋時刻」の句だけを改行禁止にして、折り返しは → の位置だけで起きるようにする */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-nw {
white-space: nowrap;
}
/* 「ご注文期間」の日付行だけ、XD が本文枠（x=320〜1280）の右を 11px はみ出して
793px 一行で置いている（x=498 → 1291）。当方の値カラムは 783px なのではみ出させる */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em.tpl-info-tight {
margin-right: -10px; /* XD: 793px − 値カラム 783px */
}
/* 和文の括弧ツメ。XD は「（」の直前の文字と、行によっては「）」自身に charSpacing -299 を
当てて括弧まわりを詰めている（例: 10月1日[日:-299]（木）→…）。
基準の字送りが +20 の行は差分 -0.319em、字送り指定が無い .tpl-info-tight の行は -0.299em。
palt をページ全体に当てない方針（style.css 冒頭の注記）なので、詰める箇所だけ span で囲む */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-paren {
margin-left: -.319em; /* XD: 「（」の直前 charSpacing -299（基準 +20） */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-paren--both {
margin-right: -.319em; /* XD: 「）」自身も charSpacing -299 の箇所 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tight .tpl-info-paren {
margin-left: -.299em; /* XD: 基準の字送りが 0 の行（差分がそのまま -299） */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tight .tpl-info-paren--both {
margin-right: -.299em;
}
/* 1文字だけの字送り指定（XD の charSpacing をそのまま写したもの） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-kern {
letter-spacing: -.2em; /* XD: 「州・」だけ charSpacing -200。無いと
「本州・四国へのお届け（…）」が 800px に収まらない */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-kern2 {
letter-spacing: -.029em; /* XD: 「け」だけ charSpacing -29 */
}
/* 緑の囲み本文の約物ツメ。XD は palt（全角約物を一律に詰める）ではなく、
隣り合う約物のアキだけを1文字ずつ charSpacing -299 で詰めている（基準は +20）。
段落全体に palt を掛けると 〈 の左や 〉 の右まで詰まって XD より窮屈になるので、
該当文字だけ span で囲んでこのクラスを当てる。
当てるのは「次が 〈 か （ の文字」の 6 文字だけ（〉〈 ／ 瓢亭（ ／ 台まで、〈）。
XD は「（166）」の ） にも -299 を当てているが、そこはブラウザで組むと
）と〉が字面 8.24px（＝ ）〉 が一続きの 》 に見える）まで寄って読みにくいため外してある。
外すと字面 14.62px になり、素の 〉の（14.16px）・〉は（14.82px）とそろう。行数への影響は無い。
実測: 1300 / 1600px とも段落全体 7 行で XD（テキスト高さ236px ÷ 行送り36px ＝ 7行）と一致。
ツメを入れずに palt を外すだけだと第1文が2行に落ちて全体 8 行になる */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-kern3 {
letter-spacing: -.299em; /* XD: charSpacing -299（基準 +20 の行） */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-line {
font-size: 2.2rem; /* XD: 南館8階… 22px W6 */
font-weight: 600;
line-height: 1.6;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong {
font-size: 3.2rem; /* XD: オンラインストアでのご注文の場合 32px W6 */
font-weight: 600;
line-height: 1.63; /* XD: 行送り 52px ÷ 32px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong small {
font-size: 2.6rem; /* XD: （青森県・秋田県・岩手県・離島を除く）26px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong--red {
color: var(--info-em); /* XD: 南館8階…お渡しコーナー / 愛知県全域 #F22D00 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong--em {
color: var(--info-em); /* XD: 商品によってお届け日が異なります。32px W7 #F22D00 */
font-weight: 700;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-price {
margin-left: .4em;
color: var(--info-em); /* XD: 一律税込495円 32px W6 #F22D00 */
font-size: 3.2rem;
font-weight: 600;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-price b {
font-size: 3.8rem; /* XD: 数字 495 だけ 38px */
font-weight: 600;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-caution {
font-size: 2.6rem; /* XD: ●配達可能エリア… 26px W6 #333333 */
font-weight: 600;
line-height: 1.62; /* XD: 行送り 42px ÷ 26px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-caution--red {
color: var(--info-em); /* XD: ※お届け時間のご指定はできません。#F22D00 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-caution--sm {
font-size: 2.2rem; /* XD: ※お届け時間の…ご在宅を… 22px W7 */
font-weight: 700;
}
/* 値カラムに入れず行の外に置く、本文幅いっぱいの注記（XD: 950px / 986px） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body > .tpl-info-caution {
margin: 0 calc(var(--info-overhang) * -1) 44px 0; /* XD: 幅 986px（右インセット 34px）/ 下は次のラベルまで 60px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body > .tpl-info-caution:last-child {
margin-bottom: -16px; /* ブロック下 padding 60px を字面基準にそろえる */
}
/* ここから2件は上の .tpl-info-body > .tpl-info-caution と詳細度が同じ (1,4,0) で、
あちらが margin ショートハンド（＝margin-top: 0）なので【必ずこの順】に置く。
前後を入れ替えると「※一部お届け地域が異なる…」が 9px 下がる。
XD: ラベル独立行の直後の注記は 24px（.tpl-info-em の後）と 40px（それ以外）の2種類 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack + .tpl-info-caution {
margin-top: -9px; /* XD: 冷凍便（4811）→ ※一部お届け地域（4851）＝ 40px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack:has(.tpl-info-em) + .tpl-info-caution {
margin-top: -20px; /* XD: 表示価格に送料が…（4222）→ ●他の商品との同送（4246）＝ 24px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tel {
display: flex;
align-items: center;
gap: 10px;
font-size: 3.8rem; /* XD: 0120-974-995 38px W6 */
font-weight: 600;
line-height: 1.3;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tel img {
flex: none;
width: 55px; /* XD: グループ12869 55.1×31.5 */
height: auto;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair + .tpl-info-tel {
margin-top: -11px; /* XD: 受付…（925）→ フリーダイヤル（938）は 13px。組と組の 25px より狭い */
}
/* 配送地域（県名＋市町村リスト） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area {
margin-bottom: 19px; /* XD: グループ12917 stack spacing 34px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area:last-child {
margin-bottom: 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong + .tpl-info-area {
margin-top: 17px; /* XD: 愛知県全域（3228）→ 岐阜県（3262）は 34px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area-name {
margin: 0; /* XD: 県名の下は 14px。行ボックスの余りだけで足りる */
color: var(--info-em); /* XD: 岐阜県 / 三重県 32px W6 #F22D00 */
font-size: 3.2rem;
font-weight: 600;
line-height: 1.4;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area-list {
margin: 0;
font-size: 2.6rem; /* XD: 市町村リスト 26px W6 */
font-weight: 600;
line-height: 1.62; /* XD: 行送り 42px ÷ 26px */
}
/* ---- 8. ピンク／緑の囲み ---------------------------------- */
/* XD は3層構造。下地は白（長方形9492 / 9497 の 962px 幅 #FFFFFF）で、
色が付くのは上部 81px の見出し帯（長方形9495）だけ。本文は白地に乗る。 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box {
margin-top: 34px; /* XD: フリーダイヤルの字面下端 976 → 囲み上端 1016 ＝ 40px */
margin-bottom: 0;
padding: 0;
background: #FFFFFF; /* XD: 長方形9492 / 9497 #FFFFFF */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box + .tpl-info-box {
margin-top: 20px; /* XD: グループ12883 stack spacing 20px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box + .tpl-info-notes {
margin-top: 27px; /* XD: グループ12954 stack spacing 27px */
}
/* 見出し帯（日付バッジ＋タイトル）。ここだけ色が付く */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box-head {
display: flex;
align-items: stretch;
flex-wrap: nowrap; /* 帯そのものは折り返さない。幅が足りないときは
タイトル側で折り返る（下の min-width: 0）。
wrap にするとタイトルがバッジの下へ落ち、
長いピンクだけ2段・短いグリーンは1段になって不揃いになる */
min-height: 81px; /* XD: 長方形9495 962×81 */
margin: 0;
background: var(--info-pink-bg); /* XD: 長方形9495 #FFDEE9 */
color: var(--info-pink-key); /* XD: 「ご予約順番券」の配布について #EF296D */
font-size: 2.8rem;
font-weight: 600;
line-height: 1.143; /* XD: lineSpacing 32 ÷ 28px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box--green .tpl-info-box-head {
background: var(--info-green-bg); /* XD: 長方形9495（緑）#DAF5DC */
color: var(--info-green-key); /* XD: 「整理券」の配布について #2DB134 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box-title {
display: flex;
align-items: center;
min-width: 0; /* max-content 幅より縮めてよい＝バッジの右で自然に折り返る */
padding: 6px 10px 0; /* XD: バッジ右端 548 → タイトル 558。
上下中央だと字面がバッジより 3px 高いので下げる */
text-wrap: balance; /* 折り返したとき最終行に1〜2文字だけ残さない。
未対応ブラウザでは通常の折り返しになるだけ */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box-body {
padding: 13px 30px 22px; /* XD: 帯下 21px / 左 31px / 下 30px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box p {
margin: 0;
font-size: 2rem; /* XD: 囲み本文 20px W6 */
font-weight: 600;
line-height: 1.8;
}
/* 日付バッジ */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-day {
display: flex;
align-items: center;
justify-content: center;
flex: none;
min-width: 228px; /* XD: 長方形9494 228×81（帯の左端に密着） */
padding: 4px 9.5px; /* XD: 228 の中に日付ブロック（字面）206 ＝ 左右 11px。
ブラウザの測定値 209px は字面でなく送り幅で左右 1.5px 広いので、
9.5px にするとバッジ 228px・字面の左右 11px が両立する */
background: var(--info-pink-key);
color: #FFFFFF;
font-size: 2.8rem; /* XD: 月・日・（木）28px */
font-weight: 600;
line-height: 1; /* XD: 日付ブロックの高さ 42px。行ボックスを字面と同じにして
バッジ(81px)の上下中央に来るようにする（XD は上19/下20） */
letter-spacing: -.08em; /* XD: 10月 / 1日 の charSpacing -80 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box--green .tpl-info-day {
background: var(--info-green-key);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-day b {
font-size: 4.2rem; /* XD: 10 / 1 の数字 42px */
font-weight: 600;
}
/* ---- 9. マーク（.tpl-genre-tag / .tpl-info-mark） ---------- */
/* 送料込み・冷蔵便・冷凍便は商品カードと同じ .tpl-genre-tag を流用。
カードの中央寄せ指定は .tpl-item--2col / .tpl-notice 配下限定で cont8 には効かないため明示する。
text-indent は注記の行頭ぶら下げが flex アイテムへ継承されて文字だけ左へずれるので 0 に戻す。
[縦位置] XD ではマーク帯は本文の「字面（em ボックス）」の中心にそろっている
（ご予約順番券の帯 1110〜1146 の中心 1128 ＝ 本文字面 1118〜1138 の中心 1128）。
CSS の vertical-align: middle は x-height 基準で、字面中心より 親フォントサイズ × 約0.095 下がる。
その分を各サイズの top で戻す。em はタグ自身の文字サイズ基準で、
SP の clamp はタグと本文が同じ比率（1.303倍）で縮むため PC/SP 共通で効く。 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-genre-tag {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
margin: 0 .3em;
text-indent: 0;
vertical-align: middle;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-genre-tag--shipping {
background: #F22D00; /* XD: 長方形9489 #F22D00（商品カードの #B42727 とは別の赤） */
}
/* 行頭のタグは左に余白を持たない（XD: タグは行の左端 320 に密着し、
タグ右端 458.68 → 本文左端 480 の 21.3px だけが空く） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-genre-tag:first-child {
margin-left: 0;
margin-right: 21.3px; /* em だとタグ自身の font-size(36px) 基準で 24px と広くなるので px */
}
/* サイズは置かれる文脈ごとに3種類（XD の長方形9489 / グループ12926 の実寸） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes .tpl-genre-tag {
min-width: 84px; /* XD: 注記の中 長方形9489 84×27 */
height: 27px;
padding: 0 6px;
font-size: 1.8rem;
top: -.106em; /* 本文 20px × 0.095 ＝ 1.9px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em .tpl-genre-tag {
min-width: 164px; /* XD: 表示価格に送料が… の行 長方形9489 164×54 */
height: 54px;
padding: 0 18px;
font-size: 3.2rem;
top: -.113em; /* 本文 38px × 0.095 ＝ 3.6px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong .tpl-genre-tag {
min-width: 138px; /* XD: お届け地域の行 グループ12926 138.68×59.19。
139 に切り上げると「冷蔵便 本州・四国へのお届け（…）」が
0.6px 足りず 2 行に落ちる */
height: 59px;
padding: 0 15px;
font-size: 3.6rem;
top: -.083em; /* 本文 32px × 0.095 ＝ 3.0px */
}
/* 注記の中だけタグ後のアキが狭い。XD はタグ位置に全角スペース4個＋半角1個（約92px）を置いて
タグ（84px）を重ねているので空くのは 8px。21.3px のままだと XD の 1 行に収まらない */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes .tpl-genre-tag:first-child {
margin-right: 8px;
}
/* 囲みの中の「ご予約順番券」「整理券」 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-mark {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -.095em; /* 本文 20px × 0.095 ＝ 1.9px */
margin: 0 .3em;
padding: 2px 10px;
background: var(--info-pink-key);
color: #FFFFFF;
font-size: 2rem; /* XD: ご予約順番券 / 整理券 20px W6 */
font-weight: 600;
line-height: 1.5;
vertical-align: middle;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-mark--green {
background: var(--info-green-key);
}
/* ---- 10. ● の注記リスト ----------------------------------- */
/* 行頭の ● は CSS ではなく HTML のテキスト（原稿をそのまま貼れるようにしている）。 */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes {
display: block;
width: auto;
max-width: none;
margin: 0;
padding: 0;
list-style: none;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes li {
margin-bottom: 6px; /* XD: グループ12898 stack spacing 22px */
font-size: 2rem; /* XD: ● の注記 20px W6 */
font-weight: 600;
line-height: 1.8; /* XD: 行送り 36px ÷ 20px */
text-indent: -1.3em; /* XD: ● は別ノードで本文の左端が本文枠 +26px（346 − 320）。
1em（20px）だと 2 行目以降が 6px 左に出て改行位置が変わる */
padding-left: 1.3em;
}
/* XD: ブロック内の注記の行頭記号は「楕円形30」＝ Ø12px のベクター円で、末尾注記の 26px の
文字「●」とは別物。文字の ● のままだと 20px 文字で字面 Ø18 になり一回り大きく、
そのぶんタグ・本文が左へ 6px 寄る。::first-letter で字面だけ XD に合わせ、
送り幅は margin で 26px（XD: 本文枠 346 − ブロック左 320）に戻す。
.667em で字面 Ø12・ベースラインから 5.5px 上（XD は Ø12・5.6px 上）になる。
※行頭が ● であることが前提。末尾注記（--foot）は XD も文字の ● なので除外する */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes:not(.tpl-info-notes--foot) li::first-letter {
font-size: .667em;
margin-right: .937em; /* ＝ li の .625em。送り幅 13.5 ＋ 12.5 ＝ 26px */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes:not(.tpl-info-notes--foot) li:first-child:not(:last-child) {
margin-bottom: .5em; /* XD: 注記の1行目の下だけ 26px（以降は 22px） */
}
/* ブロック末尾に来る注記リストは、最終行の行ボックスの余りと li の margin-bottom を
打ち消してブロック下 padding 60px を字面基準にそろえる（em なので SP でも同比率） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body > .tpl-info-notes:last-child > li:last-child {
margin-bottom: -.4em;
}
/* 末尾の注意書きの見出し（校正指示: ● のリストの前に ＜お願い・ご注意＞ を置く）。
リスト本体と同じ幅・左寄せにそろえ、文字サイズも注意書きと同じ 26px にする */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes-head {
width: min(100% - var(--info-edge), var(--info-max));
margin: 0 auto 8px;
padding: 0; /* SP の #tplContents .tpl-cont > p が持つ左右 padding
（--sp-narrow-edge）を打ち消す。これが無いと 768px以下で
見出しの字面だけ 14〜30px 内側へ寄り、● のリストと頭が揃わない */
text-align: left;
font-size: 2.6rem;
font-weight: 700;
line-height: 1.62;
letter-spacing: .02em;
}
/* 末尾の注意書き（ブロックの外・XD: グループ12935 は 1080px 幅いっぱい） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes--foot {
width: min(100% - var(--info-edge), var(--info-max));
margin: 0 auto;
padding: 0;
text-align: left; /* .tpl-cont の中央寄せを継承しない（XD: textAlign left） */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes--foot li {
margin-bottom: 4px; /* XD: stack spacing 20px */
font-size: 2.6rem; /* XD: 末尾の注意書き 26px W6 */
line-height: 1.62; /* XD: 行送り 42px ÷ 26px */
text-indent: -1.2em; /* XD: ● x=260 → 本文 x=291 の 31px。本文幅は 1049px */
padding-left: 1.2em;
letter-spacing: .02em; /* XD: characterSpacing 20 */
}
/* ---- 11. オンラインストアボタン --------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn-wrap {
margin-top: 32px; /* XD: 注記の字面下端 2122 → ボタンの字面 2224 ＝ 102px */
text-align: center;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
width: 100%;
max-width: 960px; /* XD: 長方形9498 960×146 */
min-height: 146px;
margin: 0 auto;
padding: 32px 30px 16px; /* XD: ボタン(146px)の中で字面は上 62 / 下 46。
上下同値だと 54/54 になるので padding で 8px 下げる */
border-radius: 13px; /* XD: 同 角丸13px */
background: linear-gradient(180deg, var(--info-btn-from) 0%, var(--info-btn-to) 100%);
color: #FFFFFF; /* XD: 大丸松坂屋オンラインストアはこちらから #FFFFFF */
font-size: 3.8rem; /* XD: 同 38px W6 */
font-weight: 600;
line-height: 1.3;
text-align: center;
transition: .3s ease-out;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn-text {
letter-spacing: 0; /* XD: 大丸松坂屋オンラインストアはこちらから characterSpacing 0。
.tpl-info-body の既定（.02em）から戻す */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn-arrow {
flex: none;
width: 64px; /* XD: グループ12904 64×64 */
height: 64px;
}
@media (hover: hover) and (pointer: fine) {
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn:hover {
opacity: .7; /* 変化量を .85（-15%）から倍の -30% にする。
テンプレート既定の .85 より大きい意図的な値なので戻さない */
}
}
/* --- 承りおよびお渡し方法の SP（768px以下）---------------------------------
cont8 に XD の SP アートボードは無いので、テンプレート既定の clamp 設計
（可変vw = 最大px ÷ 768 × 100）で PC の値を縮める。
見出し番号は上の PC ブロックと同じ 1〜11 で、同じ並びにしてある。 --- */
@media screen and (max-width: 768px) {
/* ---- 1. 変数 -------------------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info {
/* 左右余白はテンプレートの商品リスト（SP: padding clamp(14px, 2.6vw, 20px) /
PC: min(100% - 40px, …)）と同じ片側 14〜20px。768px で 40px＝片側20px、375px で 28px＝片側14px */
--info-edge: clamp(28px, 5.21vw, 40px);
/* 本文インセットは PC と同じ 60 ÷ 768 × 100。769px 側もブロック幅 714px に対して
60px なので、ブレークポイントの境界で段差が出ない */
--info-pad: clamp(14px, 7.81vw, 60px);
}
/* ---- 2. セクション枠 ------------------------------------ */
.tpl-page--osechi #tplContents .tpl-cont--info > p {
margin-bottom: clamp(38px, 10.03vw, 77px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-block {
margin-bottom: clamp(32px, 7.81vw, 60px);
padding-bottom: var(--info-pad);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-bar {
height: clamp(48px, 13.02vw, 100px);
margin-bottom: clamp(18px, 4.56vw, 35px);
padding: clamp(5px, 1.3vw, 10px) clamp(10px, 2.6vw, 20px) 0;
font-size: clamp(1.6rem, 4.95vw, 3.8rem);
}
/* ---- 3. 黒帯（サブ見出し） ------------------------------ */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub {
min-height: clamp(38px, 9.38vw, 72px);
margin: clamp(26px, 6.64vw, 51px) 0 clamp(11px, 2.86vw, 22px);
padding: clamp(6px, 1.3vw, 10px) clamp(10px, 2.73vw, 21px);
border-left-width: clamp(5px, 1.3vw, 10px);
font-size: clamp(1.3rem, 3.65vw, 2.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub:first-child {
margin-top: clamp(31px, 8.07vw, 62px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub + .tpl-info-row--stack {
margin-top: clamp(14px, 3.52vw, 27px);
}
/* SP は幅が足りないので注記をラベルの下へ落とす */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-sub-note {
display: block;
margin-left: 0;
font-size: clamp(1rem, 2.6vw, 2rem);
}
/* ---- 4. 「ラベル ／ 内容」の行 -------------------------- */
/* SP はラベルを値の上に積む（横並びだと値の折り返しが厳しいため） */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row {
display: block;
margin-bottom: clamp(12px, 3.13vw, 24px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(.tpl-info-pair) {
margin-bottom: clamp(14px, 3.52vw, 27px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(> .tpl-info-value > .tpl-info-em:only-child) + .tpl-info-row {
margin-top: clamp(-15px, -1.95vw, -8px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row + .tpl-info-notes {
margin-top: clamp(-6px, -.78vw, -3px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack + .tpl-info-row--stack {
margin-top: clamp(22px, 5.73vw, 44px);
}
/* ---- 5. ラベル列 ---------------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-label {
margin-bottom: 4px;
white-space: normal;
font-size: clamp(1.2rem, 3.39vw, 2.6rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-label--lg {
font-size: clamp(1.4rem, 4.17vw, 3.2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-label--lg .tpl-info-sep {
font-size: clamp(1.2rem, 3.39vw, 2.6rem);
}
/* SP はラベルが値の上に積まれるので、PC の「／ 右端そろえ」は解除する */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(.tpl-info-pair) .tpl-info-label {
display: block;
width: auto;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(.tpl-info-pair) .tpl-info-sep {
margin-left: .3em;
}
/* SP はラベルが値の上に積まれるので、PC の字面中心そろえは解除する */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row:has(> .tpl-info-value > .tpl-info-em:first-child) .tpl-info-label {
top: 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack .tpl-info-label {
margin-bottom: clamp(5px, 1.3vw, 10px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack:has(.tpl-info-em) .tpl-info-label {
margin-bottom: clamp(4px, 1.04vw, 8px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack:has(.tpl-info-strong .tpl-genre-tag) .tpl-info-label {
margin-bottom: clamp(10px, 2.6vw, 20px);
}
/* ---- 6. 値カラム ---------------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack .tpl-info-value > p + .tpl-info-caution {
margin-top: clamp(4px, .91vw, 7px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack .tpl-info-value > .tpl-info-strong + .tpl-info-strong {
margin-top: clamp(10px, 2.6vw, 20px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair {
margin-bottom: clamp(6px, 1.56vw, 12px);
}
/* ---- 7. 値のテキスト ------------------------------------ */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em {
font-size: clamp(1.7rem, 4.95vw, 3.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em small {
font-size: clamp(1.3rem, 3.65vw, 2.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em .tpl-info-em-sub {
font-size: clamp(1.4rem, 4.17vw, 3.2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-nw {
white-space: normal; /* SP は幅が足りないので句の途中でも折り返す */
}
/* SP は本文幅が狭いので、PC の右はみ出し（XD 793px 相当）は解除する */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em.tpl-info-tight {
margin-right: 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-line {
font-size: clamp(1.1rem, 2.86vw, 2.2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong small {
font-size: clamp(1.2rem, 3.39vw, 2.6rem);
/* PC の 26px（（青森県・秋田県・岩手県・離島を除く））を 26px 系と同じ換算で SP でも縮める。
ここだけ SP の指定が無く、375px で親（15.6px）より大きい 26px のまま残っていた。
cont8 に SP カンプは無いので XD 由来ではなく、他の 26px 要素にそろえた値 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong {
font-size: clamp(1.4rem, 4.17vw, 3.2rem);
}
/* SP は幅が足りないので金額を改行して置く */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-price {
display: inline-block;
margin-left: 0;
font-size: clamp(1.4rem, 4.17vw, 3.2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-price b {
font-size: clamp(1.7rem, 4.95vw, 3.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-caution {
font-size: clamp(1.2rem, 3.39vw, 2.6rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-caution--sm {
font-size: clamp(1.1rem, 2.86vw, 2.2rem);
}
/* SP は本文幅が狭いので、PC の右はみ出し（XD 986px 相当）は解除する */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body > .tpl-info-caution {
margin-right: 0;
margin-bottom: clamp(23px, 5.73vw, 44px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-body > .tpl-info-caution:last-child {
margin-bottom: clamp(-16px, -2.08vw, -8px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack + .tpl-info-caution {
margin-top: clamp(-9px, -1.17vw, -5px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-row--stack:has(.tpl-info-em) + .tpl-info-caution {
margin-top: clamp(-20px, -2.6vw, -10px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tel {
gap: clamp(5px, 1.3vw, 10px);
font-size: clamp(1.7rem, 4.95vw, 3.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-tel img {
width: clamp(28px, 7.16vw, 55px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-pair + .tpl-info-tel {
margin-top: clamp(-11px, -1.43vw, -6px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area {
margin-bottom: clamp(10px, 2.47vw, 19px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong + .tpl-info-area {
margin-top: clamp(9px, 2.21vw, 17px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area-name {
font-size: clamp(1.4rem, 4.17vw, 3.2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area-list {
font-size: clamp(1.2rem, 3.39vw, 2.6rem);
}
/* SP では県名の下に市町村が続くので、PC の改行位置は解除する */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-area-list br {
display: none;
}
/* ---- 8. ピンク／緑の囲み -------------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box {
margin-top: clamp(17px, 4.43vw, 34px);
padding: 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box + .tpl-info-box {
margin-top: clamp(10px, 2.6vw, 20px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box + .tpl-info-notes {
margin-top: clamp(14px, 3.52vw, 27px);
}
/* SP も PC と同じ作り（バッジは帯いっぱい・タイトルはそのすぐ右）。
幅が足りないぶんはタイトルのテキストが2行に折り返って帯が伸びる */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box-head {
min-height: clamp(41px, 10.55vw, 81px);
font-size: clamp(1.3rem, 3.65vw, 2.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box-title {
padding: clamp(3px, .78vw, 6px) clamp(6px, 1.43vw, 11px) 0;
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box-body {
padding: clamp(7px, 1.69vw, 13px) clamp(14px, 3.9vw, 30px) clamp(11px, 2.86vw, 22px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-box p {
font-size: clamp(1rem, 2.6vw, 2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-day {
min-width: clamp(114px, 29.69vw, 228px);
padding: clamp(2px, .52vw, 4px) clamp(5px, 1.24vw, 9.5px);
font-size: clamp(1.3rem, 3.65vw, 2.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-day b {
font-size: clamp(1.9rem, 5.47vw, 4.2rem);
}
/* ---- 9. マーク ------------------------------------------ */
/* top（字面中心そろえ）は PC 側の em 指定がそのまま効くので SP では触らない */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-genre-tag:first-child {
margin-right: clamp(10px, 2.776vw, 21.3px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes .tpl-genre-tag {
min-width: clamp(42px, 10.94vw, 84px);
height: clamp(18px, 3.52vw, 27px);
padding: 0 clamp(4px, .78vw, 6px);
font-size: clamp(.9rem, 2.34vw, 1.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes .tpl-genre-tag:first-child {
margin-right: clamp(4px, 1.04vw, 8px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-em .tpl-genre-tag {
min-width: clamp(72px, 21.35vw, 164px);
height: clamp(26px, 7.03vw, 54px);
padding: 0 clamp(8px, 2.34vw, 18px);
font-size: clamp(1.4rem, 4.17vw, 3.2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-strong .tpl-genre-tag {
min-width: clamp(70px, 17.97vw, 138px);
height: clamp(30px, 7.68vw, 59px);
padding: 0 clamp(8px, 1.95vw, 15px);
font-size: clamp(1.8rem, 4.69vw, 3.6rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-mark {
padding: 2px clamp(5px, 1.3vw, 10px);
font-size: clamp(1rem, 2.6vw, 2rem);
}
/* ---- 10. ● の注記リスト --------------------------------- */
/* 行頭記号のサイズ・送り幅（::first-letter）と、ぶら下げ幅は PC 側の em 指定で
文字サイズに追従するので SP では文字サイズだけ差し替える */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes li {
font-size: clamp(1rem, 2.6vw, 2rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes-head {
margin-bottom: clamp(4px, 1.04vw, 8px);
font-size: clamp(1.2rem, 3.39vw, 2.6rem); /* 注意書き本体と同係数 */
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-notes--foot li {
font-size: clamp(1.2rem, 3.39vw, 2.6rem);
}
/* ---- 11. オンラインストアボタン ------------------------- */
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn-wrap {
margin-top: clamp(16px, 4.17vw, 32px);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn {
gap: clamp(10px, 3.13vw, 24px);
min-height: clamp(64px, 19.01vw, 146px);
padding: clamp(16px, 4.17vw, 32px) clamp(12px, 3.9vw, 30px) clamp(8px, 2.08vw, 16px);
border-radius: clamp(7px, 1.69vw, 13px);
font-size: clamp(1.4rem, 4.95vw, 3.8rem);
}
.tpl-page--osechi #tplContents .tpl-cont--info .tpl-info-btn-arrow {
width: clamp(28px, 8.33vw, 64px);
height: clamp(28px, 8.33vw, 64px);
}
}
/* --- 商品カードの SP（768px以下）。cont1〜cont6 に SP アートボードは存在しないので
XD 由来ではなく、テンプレート既定の clamp 設計（可変vw = 最大px ÷ 768 × 100）で縮める --- */
@media screen and (max-width: 768px) {
.tpl-page--osechi #tplContents .tpl-cont h2 {
padding-top: clamp(70px, 15.63vw, 120px);
font-size: clamp(2rem, 6.53vw, 3.6rem); /* 2026年版サイト実測: 375px で 24.5px。
可変vw = SPカンプ 49px ÷ 750。上限は PC と同じ 36px */
}
.tpl-page--osechi #tplContents .tpl-cont > p {
margin-top: clamp(17px, 5.33vw, 40px); /* 2026年版サイト実測: 375px で 20px（PC 40px の半分）。
可変vw = 40 ÷ 750。上限は PC と同じ 40px */
font-size: clamp(1.1rem, 3.47vw, 2rem); /* 2026年版サイト実測: 375px で 13px。
可変vw = SPカンプ 26px ÷ 750。上限は PC と同じ 20px */
}
.tpl-page--osechi #tplContents .tpl-cont ul.tpl-items {
margin-top: clamp(48px, 11.72vw, 90px);
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col {
margin-bottom: clamp(32px, 7.81vw, 60px);
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tags {
margin-top: clamp(16px, 5.21vw, 40px);
margin-bottom: 0;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tag {
min-width: clamp(40px, 9.38vw, 72px); /* 上限を PC と同じ 72px に。可変vw = 72 ÷ 768。
下限 40px は 320px での自然幅。375px では
9.38vw=35px < 自然幅 45px なので min-width は効かず、
箱は字面＋padding のまま（旧 52px は 7px 余っていた）*/
height: clamp(22px, 4.56vw, 35px);
padding: 0 clamp(5px, 1.04vw, 8px);
font-size: clamp(.9rem, 2.93vw, 1.8rem); /* 2026年版サイト実測: 375px で 11px。
可変vw = SPカンプ 22px ÷ 750。上限は PC と同じ 18px */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tag--shipping {
min-width: clamp(47px, 11.46vw, 88px); /* 上限を PC と同じ 88px に。可変vw = 88 ÷ 768。
375px では 11.46vw=43px < 自然幅 54px なので効かない
（旧 66px は 12px 余っていた）*/
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text {
margin-top: clamp(12px, 4.04vw, 31px);
font-size: clamp(.9rem, 2.93vw, 1.8rem); /* 2026年版サイト実測: 375px で 11px。
可変vw = SPカンプ 22px ÷ 750。上限は PC と同じ 18px */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-genre-tags + .tpl-text {
margin-top: clamp(3px, .91vw, 7px);
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-btn-wrap--online + .tpl-text {
margin-top: clamp(13px, 4.3vw, 33px); /* ボタン自身の margin-top と同じ値 */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text p {
margin: 0;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-brand,
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-name {
font-size: clamp(1.1rem, 3.47vw, 2rem); /* 2026年版サイト実測: 375px で 13px。
可変vw = SPカンプ 26px ÷ 750。上限は PC と同じ 20px */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-text .tpl-desc {
margin-top: clamp(10px, 3.26vw, 25px);
}
.tpl-page--osechi .tpl-btn-wrap--online {
width: 100%;
margin-top: clamp(13px, 4.3vw, 33px);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn {
min-height: clamp(56px, 11.85vw, 91px);
padding: clamp(8px, 2.04vw, 15.7px) clamp(44px, 9.11vw, 70px) clamp(7px, 1.77vw, 13.6px) clamp(9px, 2.47vw, 19px);
font-size: clamp(1.4rem, 2.86vw, 2.2rem);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn .tpl-date {
margin-top: clamp(5px, 1.21vw, 9.3px);
font-size: clamp(1.1rem, 2.08vw, 1.6rem);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn::before {
width: clamp(24px, 4.95vw, 38px);
height: clamp(24px, 4.95vw, 38px);
right: clamp(10px, 2.6vw, 20px);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn::after {
width: clamp(8px, 1.69vw, 13px);
right: clamp(18px, 4.3vw, 33px);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::before,
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::after {
width: clamp(5px, 1.04vw, 8px);
right: clamp(17px, 4.04vw, 31px);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::before {
transform: translateY(calc(-50% - clamp(1.5px, .32vw, 2.46px))) rotate(45deg);
}
.tpl-page--osechi .tpl-btn-wrap--online .tpl-btn-label::after {
transform: translateY(calc(-50% + clamp(1.5px, .32vw, 2.46px))) rotate(-45deg);
}
}
/* 769〜1025px の帯。テンプレートは 494px ボタン前提でこの範囲を 1 カラムに固定しているが、
XD のボタンは 390px なので 2 カラムが収まる幅では 2 カラムのままにする
（収まらない幅では auto-fit が自動で 1 カラムへ折り返す） */
@media screen and (max-width: 1025px) and (min-width: 769px) {
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir {
grid-template-columns: repeat(auto-fit, var(--grandmenu-btn-w));
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li {
max-width: 100%;
}
}
/* --- SP（768px以下）。XD: TOP_SP（750px 基準）が実在するので、
clamp の可変 vw は 750 で割る（テンプレート既定の ÷768 ではない）。
テンプレートの「番号バッジ表示」は使わず、XD どおり実アイコンを出す --- */
@media screen and (max-width: 768px) {
/* SP のグリッドはテンプレート側の 2 カラム（repeat(2, minmax(0,1fr)) / max-width: 710px）を使う。
ただし幅は calc(100% - 20px) だと XD とズレるので下で 92.533% に上書きする。
--grandmenu-btn-w は SP では使われない。 */
.tpl-page--osechi .tpl-grandmenu {
padding-bottom: clamp(20px, 6.627vw, 49.7px); /* XD: ゴールドのピル下端2558.3 → アートボード下端2608
= 49.7px ÷750。PC の 50px 固定が SP にも効いていて
相対的に約2倍あいていた */
}
.tpl-page--osechi .tpl-grandmenu > h2 {
padding: clamp(30px, 8vw, 60px) 20px clamp(20px, 5.2vw, 39px);
font-size: clamp(1.2rem, 3.73vw, 2.8rem); /* XD: SP見出し 28px ÷750（TOP_SP guid 55a4df58。
旧コメントの「32px」は XD の実値と違っていた） */
line-height: 1.25; /* XD: 行送り35px ÷ 28px */
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir {
width: 92.533%; /* XD: ピル341×2 + 列間12 = 694 ÷ 750。
テンプレート既定の calc(100% - 20px) だと
ピルが XD より約2%広くなる。列は 2 等分なので
この幅を決めると 1 列 = 341 ÷750 になる */
column-gap: clamp(6px, 1.6vw, 12px); /* XD: SPピル間 12px ÷750 */
row-gap: clamp(8px, 2vw, 15px); /* XD: SP行間 15px ÷750 */
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li {
aspect-ratio: auto;
height: clamp(74px, 20.93vw, 157px); /* XD: 長方形130 157px */
max-width: none;
padding: 0 clamp(5px, 2.2vw, 16.5px); /* XD は 24.5px ÷750（= 3.267vw）だが、CSS の字送りは
同じ font-size でも XD より約3%広い（letter-spacing が
最後の1文字の後ろにも入る）。1行目が全角10文字の項目
（大丸・松坂屋特別企画 など4件）が制約になり、
XD どおりの 3.267vw では枠に収まらず3行に落ちる。
320px 幅でも収まる上限として 2.2vw（XD 比 67%）を採る */
border-width: clamp(1px, .27vw, 2px); /* XD: 長方形130 の線 2px。ただし SP アートボードは
750px 幅なので、375px 表示では 1px が等倍。
他の値は ÷750 で clamp しているのに枠線だけ 2px
固定で残っていて、相対的に 2 倍太かった */
border-radius: clamp(37px, 10.53vw, 79px); /* XD: 長方形130 79px */
row-gap: clamp(4px, 1.2vw, 9px); /* XD: グループ12747 gap 9px */
column-gap: clamp(5px, 1.33vw, 10px);
}
/* --- アイコンとテキストの縦積み（XD: TOP_SP 2026-09-01 版・左上ボタンで実測） ---
ピル 341×157 の中で
アイコン グループ12789 44×44、左右中央・ピル上端そろえ（y 1683.0 / ピル上端 1682.67）
テキスト群 グループ12747 ピル上端から 44px（padding top 44）、縦積み gap 9
サブコピー 16px → 字面 44〜60
メインコピー 26px → 字面 69〜131
下 26px（padding bottom 26）
PC は従来どおり「アイコンとサブコピーが横並び」なので、ここは SP だけの指定。 */
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: normal;
row-gap: 0;
}
/* アイコンは常に 44×44 の場所を確保しておき、表示・非表示は不透明度だけで切り替える。
こうすると出したり消したりしてもテキストが動かない（＝移動なし）。 */
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li u {
position: static;
top: auto;
left: auto;
transform: none;
display: block;
flex: none;
width: clamp(21px, 5.867vw, 44px); /* XD: グループ12789 44px ÷750 */
height: clamp(21px, 5.867vw, 44px);
margin-top: calc(-1 * clamp(1px, .27vw, 2px)); /* XD はアイコン上端がピルの外周とほぼ同じ（0.33px）。
padding は枠線の内側から始まるので枠線ぶん戻す */
pointer-events: none;
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li u::before,
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li.select u::before {
content: "";
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
opacity: 0;
transform: none;
background-color: transparent;
background-image: var(--menu-icon-active, var(--menu-icon, none));
background-size: calc(100% * var(--menu-icon-scale, 1));
/* SVG の中の絵の大きさが図案ごとに違う。
icon01/02（＝09/10）は絵の高さが枠の 62〜72%
なのに対し icon03〜08 は 83〜93% あり、同じ枠でも
1.4 倍ほど大きく見える。該当項目の
を入れてある。
PC 側で消すだけにして SP では
の既定の動きに任せる（display: block を当てると
ブラウザによって改行しなくなる・空の行が増えることがあるため） */
@media screen and (min-width: 769px) {
.tpl-page--osechi .tpl-grandmenu > h2 .tpl-br-sp {
display: none;
}
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir {
column-gap: 12px; /* XD: 792px − 390px×2 */
row-gap: 12px; /* XD: 348px − 78px×4 */
margin-top: 0;
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li {
height: 78px; /* XD: パス957 78px */
padding: 10px 17px; /* XD のメインコピーは字面 346px がボタン 390px の中で左右 22px。
ただし CSS の折り返し判定は字面ではなく送り幅（letter-spacing は
最後の1文字の後ろにも入る）で行うため、22px ちょうどだと
「三が日のおもてなしを彩る迎春スイーツ」が 4px 足りず 2 行に落ちる。
枠線 2px と合わせて 19px にし、字面の左右は XD どおり 22px にする */
border-color: #E6D076; /* XD: パス957 の線 2px #E6D076 */
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li u {
width: 3.3rem; /* XD: グループ12789 ほかアイコン 33px */
height: 3.3rem;
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li i {
font-size: 1.4rem; /* XD: サブコピー 14px */
font-weight: 600; /* XD: サブコピー W6。テンプレートは指定が無く
継承で 400（＝ヒラギノの W4）になり 1 段細かった */
line-height: 1.71; /* XD: 行送り24px ÷ 14px */
}
/* メインコピーは通常時も hover/select 時も赤のまま（テンプレートの
.select / :hover が :is(b,i) をまとめて塗り替えるのをここで打ち消す） */
/* 内の
は SP の改行位置。PC は XD が 1 行なので無効化する */
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li b br {
display: none;
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li b {
font-size: 1.8rem; /* XD: メインコピー 18px */
font-weight: 600; /* XD: メインコピー W6。テンプレートの 700 は
ヒラギノの W7 で 1 段太い */
line-height: 1.67; /* XD: 行送り30px ÷ 18px */
letter-spacing: .08em; /* XD: charSpacing 80 */
color: #F22D00; /* XD: メインコピー #F22D00 */
}
/* セクションを切り替えない外部リンク項目。ボタン全面を覆う を重ねる。
li は position: relative なのでそのまま inset: 0 で足りる */
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li .tpl-menu-link {
position: absolute;
inset: -2px; /* li の 2px ボーダーぶん外へ広げて全面を当たり判定にする */
border-radius: 999px;
z-index: 1;
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li .tpl-menu-link:focus-visible {
outline: 2px solid var(--color-black);
outline-offset: 2px;
}
/* 金色の2項目（デジタルカタログ / 抽選会）。サブコピーが無いので
b の width:100% を外して、アイコンと同じ行に並べる */
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold {
--grandmenu-btn-bg: #D2B35E; /* XD: パス957（グループ13008）の塗り */
--grandmenu-btn-bg-active: #D2B35E; /* hover でも地色は変えない */
border-color: #FFFFFF; /* XD: 同パスの線 2px #FFFFFF */
margin-top: 28px; /* XD: ピル下端1680 → 金色ボタン上端1720 の 40px（行gap 12px との差） */
}
.tpl-page--osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold b {
width: auto;
color: #FFFFFF; /* XD: デジタルカタログはこちら #FFFFFF */
}
/* 画面収録 2026-08-31 16.29.46:
白いボタンはアイコンがテキスト左の寄り位置から左へ移動しながら表示する。
金色2ボタンはテキストを動かさず、中央上のアイコンだけをフェード表示する。
縦位置は XD（TOP - 1 / btn グループ13008）が正。ピル 78px の中で
アイコン グループ12567 上端 6px（6〜39px）
メインコピー 字面 41.5〜59.5px（＝ピル下端から 18.5px）
アイコンを絶対配置で浮かせると だけが中央そろえで残り、字面が 30〜48px に来て
XD より 11.5px 高くなる。下の margin-top で XD の位置まで下げる。 */
@media screen and (min-width: 769px) {
.tpl-page--osechi.tpl-page--grandmenu-motion-osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold u {
position: absolute;
top: 4px; /* XD: アイコン上端 6px。top は枠線 2px の内側（padding box）
から測るので 6 - 2 = 4px */
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}
/* 中央そろえのまま上に余白を足して字面を下げる。
li は height 78px 固定 + align-content: center なので、余白を足すと
中央そろえの余りが半分吸収する。**margin-top は半分しか効かない**:
字面上端 = 30 + margin-top ÷ 2 （margin-top 0 のときが 30px＝ピルの中央）
XD の値に合わせ直すときは「XD の字面上端 − 30」を 2 倍した値を入れる
（例: XD が 44px なら (44 − 30) × 2 = 28px）。
PC は b br { display: none } なので 1 行が前提。文言を長くして 2 行に折り返すと
ピル下端から 2.5px はみ出すので、そのときはピルの高さ側も見直すこと。 */
.tpl-page--osechi.tpl-page--grandmenu-motion-osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold b {
margin-top: 23px; /* XD: デジタルカタログはこちら 字面上端 41.5px
（41.5 − 30）× 2 = 23px */
}
.tpl-page--osechi.tpl-page--grandmenu-motion-osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold u::before {
opacity: 0;
transform: none;
transition: opacity var(--grandmenu-motion-duration);
}
.tpl-page--osechi.tpl-page--grandmenu-motion-osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold.select u::before {
opacity: 1;
transform: none;
transition: opacity var(--grandmenu-motion-duration);
}
}
@media screen and (min-width: 769px) and (hover: hover) and (pointer: fine) {
.tpl-page--osechi.tpl-page--grandmenu-motion-osechi .tpl-grandmenu ul.tpl-cir li.tpl-menu-item--gold:hover u::before {
opacity: 1;
transform: none;
transition: opacity var(--grandmenu-motion-duration);
}
}
/* --- リード文（XD: グループ12661） ---------------------------------------- */
.tpl-page--osechi #tplLead .tpl-ttl b {
letter-spacing: .04em; /* XD: 二〇二七年 松坂屋名古屋店の charSpacing 40 */
line-height: 1.36; /* XD: 行送り30px ÷ 22px */
}
.tpl-page--osechi #tplLead .tpl-kaiki p {
font-weight: 300; /* XD: 【店頭承り期間および場所】W3。
テンプレートに指定が無く .tpl-page の 400（＝W4）を継承していた */
line-height: 1.56; /* XD: 【店頭承り期間および場所】行送り25px ÷ 16px */
}
.tpl-page--osechi #tplLead .tpl-txt {
font-weight: 300; /* XD: 迎春の食卓を華やかに演出する W3。
ヒラギノの W3 は CSS の 300（400 は W4 で 1 段太い） */
line-height: 1.69; /* XD: 行送り27px ÷ 16px */
}
.tpl-page--osechi #tplLead .tpl-txt b {
font-weight: 600; /* XD: 晴れの日を彩る、至福の味わい。W6 */
}
/* --- リード文の SP（XD: TOP_SP / グループ12667）------------------------------
テンプレート既定は「可変vw = 最大px ÷ 768」「上限 = PC 値」だが、この案件は SP カンプ
（TOP_SP・幅750px）が実在するので、グランドメニュー（下の 768px 以下ブロック）と同じく
÷750 で引き直す。clamp の最小値は既存スキンと同じ「328px 幅での値」にそろえた。
テンプレートは .tpl-txt と .tpl-kaiki p に同じ clamp を共有させていて、
XD で 28px と 20px に分かれている 2 つが SP で同サイズになっていたので分ける --- */
@media screen and (max-width: 768px) {
.tpl-page--osechi #tplLead .tpl-ttl b {
font-size: clamp(1.6rem, 4.8vw, 3.6rem); /* XD: 二〇二七年 松坂屋名古屋店の／おせち 36px ÷750 */
line-height: 1.44; /* XD: 行送り52px ÷ 36px（字面 88px = 36 + 52 と一致） */
}
.tpl-page--osechi #tplLead .tpl-kaiki p {
font-size: clamp(.9rem, 2.67vw, 2rem); /* XD: 【店頭承り期間および場所】20px ÷750 */
line-height: 1.9; /* XD: 行送り38px ÷ 20px（字面 172px = 20 + 4×38 と一致）。
PC 用の 1.56 が @media の外にあり SP にも効いていた */
}
.tpl-page--osechi #tplLead .tpl-txt {
font-size: clamp(1.2rem, 3.73vw, 2.8rem); /* XD: 迎春の食卓を華やかに演出する 28px ÷750 */
}
.tpl-page--osechi #tplLead .tpl-txt:has(> b) {
line-height: 1; /* XD: 晴れの日を彩る、至福の味わい。は1行のポイントテキスト。
XD の行送り 27px は font-size 28px より小さく描画に出ないので
機械変換せず、XD の実測ボックス 28px（= font-size）に合わせる */
}
}
/* --- 商品カード（XD: SymbolInstance「1カラム」/ 幅1080px の縦スタック） --------
縦順は 画像 →(40px) ジャンルタグ/テキスト群 →(40px) 購入ボタン。
テキスト群の内部は 監修者名 →16→ 商品名+価格 →16→ スペック →16→ 注記 →40→ 説明文。
セクションは tpl-layout-1col だが、カード部品は共通の tpl-item--2col をそのまま使う */
.tpl-page--osechi #tplContents .tpl-cont ul.tpl-items {
max-width: 1080px; /* XD: カード幅 1080px */
margin-top: 90px; /* XD: サブコピー下端423 → カード上端513 */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col {
width: 100%;
margin: 0 0 60px; /* XD: カード間 60px */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col:last-child {
margin-bottom: 0;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-item--2col .tpl-thumb {
margin-bottom: 0;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tags {
gap: 5px; /* XD: タグ列 gap 5px */
margin-top: 40px; /* XD: 画像下端 → タグ/テキスト 40px */
margin-bottom: 0; /* 基本CSSの 10px が下の .tpl-text の margin-top 7px と
相殺（collapse）して 10px 側が勝つため 0 にする */
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tag {
width: auto;
min-width: 72px; /* 18px 基準に引き直し: 字面 54（3字×18）+ padding 16 + 枠 2。
XD の 82px は 22px 基準（字面66+16）で、18px では左右 14px 余る。
冷蔵便（枠なし・自然幅70px）もこの値で冷凍便と同幅にそろう */
height: 35px; /* XD: タグ高さ 35px */
box-sizing: border-box; /* 白抜きタグの1px枠を外形に含める */
padding: 7px 8px 6px; /* XD: タグ padding */
font-size: 1.8rem; /* 2026年版サイト実測: タグ文字 18px（XD は 22px W6） */
font-weight: 600;
line-height: 1;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tag--shipping {
min-width: 88px; /* 18px 基準に引き直し: 字面 72（4字×18）+ padding 16。
XD の 104px は 22px 基準（字面88+16）で、18px では左右 16px 余る */
background: #B42727; /* XD: 送料込みタグの塗り */
color: #FFFFFF;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tag--frozen {
background: transparent; /* XD: 冷凍便は塗り無効（白抜き） */
border: 1px solid #3897BA;
color: #3897BA;
}
.tpl-page--osechi #tplContents .tpl-cont .tpl-genre-tag--chilled {
background: #3756BE; /* XD: 冷蔵便の塗り */
color: #FFFFFF;
}
/* テキスト群の縦の間隔について（XD 実測・コンポーネント 17 – 7）
XD のテキストフレームの高さは「字面（em ボックス）」で、1行なら height = font-size、
複数行なら font-size + (行数-1) × 行送り。説明文 4行 133px から行送り 36.96px = 1.68em が出る
（lineSpacing: 0 = Hiragino Kaku Gothic ProN のフォント既定）。
その字面どうしの間隔が 16px（注記→説明文だけ 40px）で、これがデザインの余白。
CSS の