の直下）にマークアップを移動したことで、
幅いっぱいに広がるようにした（vw指定はスクロールバー分のズレで
横スクロールバーが出る原因になっていたため使わない） */
.book-section {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0 40px;
perspective: 2000px;
overflow-x: clip;
}
/* スマホ：横300px × 縦420px */
/* 表紙の色（外枠）を常に敷いておき、開いた後もページの外側に少しだけ見えるようにする */
.book {
position: relative;
width: 300px;
height: 420px;
background-color: #2f2a3a;
border-radius: 4px 12px 12px 4px;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.book.is-open {
transform: none;
}
/* .book-coverは回転すると.book自体の背景と重ならなくなるため、
左ページ(.cover-back)の外側にも表紙色が見えるよう、ここにも同じ色を敷いておく */
.book-cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #2f2a3a;
border-radius: 4px 12px 12px 4px;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.book.is-open .book-cover {
transform: rotateY(-180deg);
}
/* ページ側は表紙よりひと回り小さくして、外側（上下と外側の縦辺）にだけ
表紙の色が見えるようにする。中央の綴じ目側は0にして、両ページがぴったり
くっつくようにする。影は無し（開いた瞬間に影が急に出るのを防ぐため） */
.book-page {
position: absolute;
inset: 12px 12px 12px 0;
border-radius: 4px 12px 12px 4px;
box-shadow: none;
}
/* 表紙のオモテ面 */
.cover-front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: #2f2a3a;
color: #e1c798;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.cover-front::before {
content: '';
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
border: 2px solid #e1c798;
border-radius: 4px;
}
.cover-decor {
width: 90px;
height: 90px;
margin-bottom: 20px;
opacity: 0.9;
object-fit: contain;
}
.cover-title {
font-family: var(--font-en);
font-style: italic;
font-size: 20px;
letter-spacing: 0.15em;
border-top: 1px solid #e1c798;
border-bottom: 1px solid #e1c798;
padding: 10px 0;
width: 85%;
font-weight: normal;
}
/* 開いた時の左側（スマホ＝表紙と同じ紺色）。表紙よりひと回り小さくして、
外側（上下と外側の縦辺）にだけ表紙の色が見えるようにする。
180deg回転で左右が反転するため、綴じ目側になるのは(見た目の左右とは逆の)
ローカル座標の左端。そちらを0にして、右ページとぴったりくっつくようにする */
.cover-back {
position: absolute;
inset: 12px 12px 12px 0;
backface-visibility: hidden;
background-color: #2f2a3a;
transform: rotateY(180deg);
border-radius: 12px 4px 4px 12px;
}
/* 内側の金のボーダーは不要 */
.cover-back::before {
display: none;
content: '';
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: 4px;
}
/* 右側のページ */
.book-page {
background: var(--color-card-bg);
z-index: 1;
border-left: 2px solid #e8d6ac;
overflow: hidden;
}
.page-content {
padding: 25px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
color: #3d2403;
text-align: left;
}
.page-content h3 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid rgba(61, 36, 3, 0.2);
padding-bottom: 6px;
letter-spacing: 0.05em;
}
.page-content p {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.7;
text-align: justify;
}
.page-period {
margin-top: 4px;
font-size: 12px;
letter-spacing: 0.1em;
}
/* 右ページ：中央寄せレイアウト */
.page-content--center {
align-items: center;
justify-content: center;
text-align: center;
}
/* 見出し「予約特典」（東京会場と同じ大きめ中央表示） */
.book-heading {
font-size: 26px;
font-weight: 600;
letter-spacing: 0.3em;
color: var(--color-text-main);
border-bottom: none !important;
}
.book-heading small {
display: block;
margin-top: 8px;
font-size: 20px;
letter-spacing: 0.12em;
color: var(--color-accent-brown);
}
.book-note {
font-size: 11px;
color: rgba(61, 36, 3, .75);
}
/* 左ページ：画像をそのまま入れるスロット */
.page-content--photo {
padding: 24px;
}
.page-photo {
width: 100%;
height: 100%;
display: grid;
place-items: center;
border-radius: 0;
font-size: 12px;
letter-spacing: 0.15em;
color: var(--color-accent-brown);
}
/* どんな画像サイズでも見切れないよう全体表示 */
.page-content--photo img,
.page-photo img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
}
/* スマホ右ページ内の画像（高さは画像なりに） */
.page-photo--sp {
width: 100%;
height: auto;
margin-bottom: 14px;
}
.page-photo--sp img {
height: auto;
}
.page-period strong {
font-family: var(--font-en);
font-size: 17px;
color: inherit; /* 配布期間の日時を本文と同じ文字色に */
}
.novelty-badge {
display: inline-block;
align-self: flex-start;
margin-bottom: 12px;
padding: 4px 16px;
font-size: 11px;
letter-spacing: 0.2em;
color: #fff;
background: var(--color-accent-red);
border-radius: 999px;
}
/* コースターのプレースホルダー（12種グリッド） */
.coaster-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 15px;
}
.coaster-grid span {
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f0e2c0, #cbb389);
border: 1px solid #b49c72;
display: grid;
place-items: center;
font-size: 10px;
color: #7a6034;
}
/* 表示切り替えの初期設定（スマホ優先） */
.sp-content { display: flex; }
.pc-content { display: none; }
/* PC向け：480px以上 */
@media (min-width: 480px) {
.sp-content { display: none; }
.pc-content { display: flex; }
/* 開いた見開き（幅×2）が960px以下でも必ず画面内に収まるよう、
固定460pxではなく画面幅に応じて縮む可変サイズにする（見切れ防止）。
高さは幅に比例させつつ、文章が収まる600pxを下回らないようにする */
.book {
--book-w: min(460px, 42vw);
width: var(--book-w);
height: max(600px, calc(var(--book-w) * 640 / 460));
}
/* 開いた時、本の合わせ目が画面の水平中央に来るよう右へ半分スライド */
.book.is-open {
transform: translateX(calc(var(--book-w) / 2));
}
.cover-front { padding: 60px; }
.cover-front::before {
top: 20px; left: 20px; right: 20px; bottom: 20px;
border: 4px solid #e1c798;
}
.cover-decor { width: 150px; height: 150px; margin-bottom: 40px; }
.cover-title { font-size: 30px; padding: 20px 0; }
/* 左側を右ページと同じ古紙色に(フラット) */
.cover-back {
background: var(--color-card-bg);
border-right: 2px solid #e8d6ac;
border-left: none;
}
.cover-back::before { display: none; }
.page-content { padding: 50px; }
.page-content h3 {
font-size: 28px;
margin-bottom: 20px;
padding-bottom: 12px;
}
.book-page .pc-content p {
font-size: 16px;
line-height: 1.9;
}
.coaster-grid { gap: 14px; margin-bottom: 0; }
.coaster-grid span { font-size: 13px; }
}
/* -----------------------------------------
キャラクター別ページ（taxonomy-character.php）
----------------------------------------- */
.chara-hero { text-align: center; padding: 64px 20px 24px; }
.chara-hero__en {
font-family: var(--font-en);
font-style: italic;
letter-spacing: .22em;
color: var(--color-accent-brown);
}
.chara-hero__name {
font-size: clamp(24px, 4vw, 34px);
letter-spacing: .2em;
color: var(--color-text-main);
margin-top: 10px;
}
.chara-hero__notice {
margin-top: -16px;
margin-bottom: 6px;
font-size: 16px;
line-height: 1.5;
color: #705147;
font-weight: bold;
}
.chara-grid { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.chara-grid .card-grid { margin-bottom: 8px; }
/* メニューカテゴリのアンカーナビ・見出し */
.menu-cat-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
max-width: 1040px;
margin: 0 auto 40px;
padding: 0 20px;
}
.menu-cat-pill {
display: block;
box-sizing: border-box;
padding: 8px 40px 8px 16px;
border: 1px solid var(--wood-dark);
background-color: var(--wood-dark);
color: var(--color-bg-light);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
text-align: center;
position: relative;
}
.menu-cat-pill::after {
content: '';
position: absolute;
right: 18px;
top: 50%;
width: 6px;
height: 6px;
border-right: 1px solid var(--color-bg-light);
border-bottom: 1px solid var(--color-bg-light);
transform: translateY(-65%) rotate(45deg);
}
.menu-cat-pill:hover {
background-color: var(--color-accent-brown);
border-color: var(--color-accent-brown);
opacity: 1;
}
@media (max-width: 600px) {
.menu-cat-nav {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
@media (max-width: 390px) {
.menu-cat-nav {
grid-template-columns: 1fr;
}
}
.menu-cat-group {
scroll-margin-top: 100px;
}
.menu-cat-heading {
max-width: 1040px;
margin: 64px auto 20px;
padding: 0 20px;
font-size: 28px;
letter-spacing: 0.1em;
color: var(--wood-dark);
text-align: center;
}
@media (max-width: 600px) {
.menu-cat-heading {
font-size: 20px;
}
}
.chara-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--color-text-main);
padding: 24px;
}
.chara-back { text-align: center; padding: 72px 20px; }
/* トピックス一覧・お知らせ一覧：見出し下とTOPへ戻るボタン上の余白を詰める */
#news-archive-page .sec-head-img,
#topics-archive-page .sec-head-img {
margin-bottom: 4px;
}
#news-archive-page .chara-back,
#topics-archive-page .chara-back {
padding-top: 8px;
}
/* 本体の.section-innerは上下80pxの余白があり、これが余白の主因だったので詰める */
#news-archive-page .section-inner,
#topics-archive-page .section-inner {
padding-top: 24px;
padding-bottom: 24px;
}
/* キャラ別ページ：見出し下の余白を詰める */
#character-single-page .chara-hero {
padding-bottom: 8px;
}
/* -----------------------------------------
投稿詳細ページ（single.php：トピックス・お知らせ個別記事）
----------------------------------------- */
.single-inner {
max-width: 760px;
}
/* タイトル～TOPへ戻るまでをまとめて囲む枠（Menuカードと同じ色・枠線） */
.single-panel {
background-color: var(--color-card-bg);
border: 2px solid #c1a18b;
border-radius: 0;
padding: 48px 20px;
}
.single-panel__title {
text-align: left;
font-size: clamp(22px, 4vw, 30px);
letter-spacing: .15em;
color: var(--color-text-main);
margin-bottom: 20px;
}
.single-meta {
justify-content: flex-start;
margin-bottom: 28px;
}
/* カテゴリバッジと日付のサイズを揃える */
.single-meta .card-meta__cat,
.single-meta .card-meta__date {
font-family: var(--font-en);
font-size: 11px;
padding: 3px 14px;
}
.single-back {
padding: 40px 0 0;
}
.single-thumb {
margin-bottom: 32px;
border-radius: 0;
overflow: hidden;
}
.single-thumb img {
width: 100%;
height: auto;
display: block;
}
.single-content {
text-align: left;
line-height: 1.9;
color: var(--color-text-main);
}
.single-content p {
margin-bottom: 1.4em;
}
/* -----------------------------------------
FAQページ（キーワード検索・カテゴリ選択・カテゴリ別アコーディオン）
----------------------------------------- */
.faq-page .single-panel__title {
text-align: center;
}
.faq-page .single-panel__notice {
text-align: center;
font-size: 13px;
line-height: 1.8;
color: var(--color-text-muted);
margin-bottom: 30px;
}
.faq-group {
margin-bottom: 40px;
}
.faq-item {
margin-bottom: 10px;
}
/* 質問と「詳細を見る」の部分＝茶色の枠（塗り）にベージュ文字。回答側は変更しない */
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
text-align: left;
cursor: pointer;
list-style: none;
font-size: 14px;
border: 1px solid #705147;
background: #705147;
color: var(--color-light-gold);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item__q-label {
color: var(--color-light-gold);
font-weight: bold;
margin-right: 6px;
}
/* 「詳細を見る」の文字とアイコン(＋/－)を別要素にし、スマホでは文字だけ消せるようにする */
.faq-item__toggle {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
font-size: 12px;
white-space: nowrap;
}
.faq-item__toggle-text--open,
.faq-item__toggle-icon--open {
display: none;
}
.faq-item[open] .faq-item__toggle-text--closed,
.faq-item[open] .faq-item__toggle-icon--closed {
display: none;
}
.faq-item[open] .faq-item__toggle-text--open,
.faq-item[open] .faq-item__toggle-icon--open {
display: inline;
}
.faq-item__a {
padding: 10px 4px 20px;
text-align: left;
line-height: 1.8;
}
/* 回答をリッチエディタ(wp_editor)で入力するようになったため、
タグの余白を詰めてこれまでの見た目に近づける。リンクには下線を付ける */
.faq-item__a p {
margin: 0 0 0.8em;
}
.faq-item__a p:last-child {
margin-bottom: 0;
}
.faq-item__a a {
text-decoration: underline;
}
.faq-item__a-label {
color: var(--color-accent-red);
font-weight: bold;
margin-right: 6px;
}
.single-content img {
max-width: 100%;
height: auto;
border-radius: 0;
margin: 24px 0;
}
.single-content h2,
.single-content h3 {
margin: 1.6em 0 .8em;
color: var(--color-accent-brown);
letter-spacing: .05em;
}
.single-content a {
text-decoration: underline;
}
/* -----------------------------------------
無限ループスライダー（Character / Menu / Goods 共通）
----------------------------------------- */
/* 画面幅いっぱいに表示し、両端のアイテムは見切れる */
.slider {
position: relative;
width: 100%;
padding: 0;
}
.slider-viewport {
overflow: hidden;
}
.slider-track {
display: flex;
align-items: flex-end; /* 各アイテムは下端揃え */
transition: transform .55s cubic-bezier(.45, 0, .3, 1);
}
/* 中央かどうかで明るさだけ変える（拡大縮小の動きは無し） */
.slider-item {
flex: 0 0 auto;
padding: 8px 14px;
filter: brightness(.93); /* 中央以外は少し暗く */
transition: filter .55s ease;
}
.slider-item.is-center {
filter: none; /* 中央だけ通常の明るさ */
}
/* キャラクターは写真の色が薄く、標準の暗さでは分かりにくいのでもう少し暗く */
#character .slider-item {
filter: brightness(.85);
}
#character .slider-item.is-center {
filter: none;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid #fff;
background: var(--wood-dark);
color: #fff;
font-size: 16px;
line-height: 1;
cursor: pointer;
z-index: 2;
transition: var(--transition-smooth);
}
.slider-arrow:hover {
opacity: .65;
}
/* 矢印は「見切れアイテムと中央側アイテムの間の隙間」に配置
（隙間位置 = 見切れ0.25個ぶん = 0.25 / (表示枚数 + 0.5)） */
.slider-arrow--prev {
left: 7.1%;
transform: translate(-50%, -50%);
}
.slider-arrow--next {
right: 7.1%;
transform: translate(50%, -50%);
}
/* -----------------------------------------
Character
----------------------------------------- */
.char-item {
text-align: center;
}
/* 円の枠・背景をなくし、背景の上に画像がそのまま表示される */
.char-pic {
aspect-ratio: 1;
display: grid;
place-items: center;
color: var(--color-accent-brown);
font-size: 11px;
letter-spacing: 0.1em;
transition: transform .3s ease;
}
.char-pic img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 9/16時点はリンクを無効化しているため、ホバー時の演出も無し */
.char-name {
margin-top: 14px;
font-size: 13px;
letter-spacing: 0.14em;
color: var(--color-text-main);
}
/* -----------------------------------------
カード（Menu / Goods / Topics 共通）
----------------------------------------- */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-bottom: 48px;
}
.card-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.card {
background-color: var(--color-bg-light);
border: 2px solid #c1a18b;
overflow: hidden;
box-shadow: 0 8px 20px rgba(46, 26, 12, .15);
transition: transform .3s ease, box-shadow .3s ease;
text-align: center;
}
/* hover:hover（マウスのある端末）でのみ適用。スマホ等のタップ操作では
タップ後に:hoverが残り続けて浮き上がった見た目のままになってしまうため */
@media (hover: hover) {
.card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(46, 26, 12, .25);
}
}
/* メニュー・グッズは、アイキャッチの有無にかかわらず全項目でポップアップ・ホバー演出を統一している
（画像が無い項目はNOW PRINTINGを表示） */
.card-pic {
aspect-ratio: 8 / 5;
display: grid;
place-items: center;
color: var(--color-accent-brown);
font-size: 12px;
letter-spacing: 0.15em;
padding: 10px;
}
/* トピックでアイキャッチ画像が未設定の時のデフォルト表示（thumbnail.png） */
.card-pic.is-default img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* メニュー・グッズに追加画像（ギャラリー）が複数登録されている場合のスライド表示。
ドットは画像に重ねず、画像の下に別要素として並べる */
.card-pic--slider {
aspect-ratio: auto;
display: block;
}
/* aspect-ratioだと中身が全てposition:absoluteのスライドだけの場合に
高さが確保されないことがあるため、古くからある確実な方法
（height:0 + padding-bottomで比率を作る）に変更 */
.card-pic__slides {
position: relative;
width: 100%;
height: 0;
padding-bottom: 62.5%; /* 8:5 */
overflow: hidden;
}
/* すべてのスライドを重ねておき、opacityだけで切り替えることでふんわりクロスフェードさせる */
.card-pic__slide {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: 0;
transition: opacity 1.4s ease;
}
.card-pic__slide.is-active {
opacity: 1;
z-index: 1;
}
.card-pic__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
padding: 6px 0 0;
}
.card-pic__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #d8c6a8;
}
.card-pic__dot.is-active {
background: var(--color-accent-brown);
}
.card-body {
padding: 20px 18px 26px;
}
.card-tag {
display: inline-block;
font-size: 10px;
letter-spacing: 0.24em;
color: var(--color-accent-brown);
}
.card-title {
margin-top: 20px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.7;
white-space: pre-line; /* 管理画面で入力した改行(\n)をそのまま反映する */
}
/* メニュー・グッズ：名称の長さに関わらず必ず同じ高さに揃える（PC3行/スマホ4行）。
行数を超える場合は「…」で省略し、それより溢れて枠の高さが変わらないようにする */
/* -webkit-box-packは複数行に省略されたテキスト自体には効かないため、
高さを確保する役目はラッパー側(.card-title-wrap)に移し、
flexのalign-itemsで縦中央寄せしている */
.card--fancy .card-title-wrap,
.card--arch .card-title-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 5.1em;
}
.card--fancy .card-title,
.card--arch .card-title {
margin-top: 0;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* キャラクター一覧ページ（page-characters.php）専用 */
/* Menuと同じ薄い黄色＋外枠だけを使う（四隅の飾り・内側の線は無し） */
.card--character {
background-color: var(--color-card-bg);
}
/* 9/16時点はリンクを無効化しているため、一覧ページのホバー演出（浮き上がり）も無し */
.card--character:hover {
transform: none;
box-shadow: 0 8px 20px rgba(46, 26, 12, .15);
}
#character-list .card-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-desc {
font-size: 13px;
line-height: 1.5;
color: var(--color-text-muted);
text-align: left;
white-space: pre-line; /* 説明文の改行(\n)をそのまま反映する */
}
@media (max-width: 600px) {
.card-desc {
font-size: 11px;
margin-bottom: 10px;
}
.card--fancy .card-title,
.card--arch .card-title {
font-size: 12px;
-webkit-line-clamp: 4;
line-clamp: 4;
}
.card--fancy .card-title-wrap,
.card--arch .card-title-wrap {
min-height: 6.8em;
}
}
/* メニューの説明文は3行までにして、はみ出す分は…で省略する（ブラウザ標準の省略記号を使用） */
.card--fancy .card-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: start;
-webkit-line-clamp: 3;
overflow: hidden;
flex-shrink: 0;
}
.card--fancy .card-title-wrap {
flex-shrink: 0;
}
/* 説明文の有無・長さに関わらず、カードの高さを必ず揃える。
文章が短い/無い場合の余白は下部にだけ残るようにする（上詰めのまま） */
.card--fancy .card-body {
min-height: 260px;
flex: 1;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* 説明文の長さに関わらず、価格の上の線と価格の位置を全カードで揃える。
line-clampは文字数が少ないと余白を詰めてしまうため、区切り線を
flexの下端に固定(margin-top:auto)して吸収させる */
.card--fancy .card-body .deco-divider--small {
margin-top: auto;
margin-bottom: 12px;
flex-shrink: 0;
}
/* 画像を掲載しないメニュー(ソフトドリンク等)は、画像分の余白ができるので
説明文を7行まで表示できるようにし、枠の高さもそのぶん広げる */
.card--fancy.card--no-image .card-desc {
-webkit-line-clamp: 8;
}
.card-price {
margin-top: 10px;
font-family: var(--font-en);
font-size: 18px;
color: var(--color-text-main); /* 価格を他の文字と同じ色に */
}
.card-price small {
font-size: 11px;
color: var(--color-text-muted);
margin-left: 4px;
}
/* 購入制限は0916テーマでは非表示（表示スペースも含めて無し） */
.card-goods-limit {
display: none;
}
.card-goods-supplement {
/* margin-top: 6px; */
font-size: 12px;
line-height: 1.2;
min-height: 1.6em;
color: var(--color-text-muted);
}
.card-date {
margin-top: 10px;
font-family: var(--font-en);
font-size: 13px;
letter-spacing: 0.1em;
color: var(--color-accent-brown);
}
/* Menu用：内側の線＋四隅の装飾スロット付きカード */
.card--fancy {
background-color: var(--color-card-bg);
overflow: visible;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
}
@media (hover: hover) {
.card--fancy:hover {
box-shadow: none;
transform: translateY(-6px);
}
}
.card--fancy::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(139, 90, 43, 23%);
border-radius: 3px;
pointer-events: none;
z-index: 2;
}
.card--fancy { position: relative; }
/* メニュー写真の裏（周囲）の濃い金枠は消す（カード自体の枠と内側の線は残す） */
.card--fancy .card-pic {
margin: 16px 16px 0;
border-radius: 4px;
border: none;
/* card--fancyがflexコンテナになったことで、写真(img)の実サイズ(縦横px)が
flexアイテムの自動最小サイズとして扱われ、枠より画像が大きい場合に
枠からはみ出てしまうため、縮んでよいことを明示する */
min-width: 0;
min-height: 0;
}
/* アイキャッチの有無・元画像のサイズに関わらず、表示サイズを揃える */
.card--fancy .card-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 四隅の装飾（デフォルトはスパークル。![]()
に差し替え可） */
.card-corner {
position: absolute;
width: 22px;
height: 22px;
z-index: 3;
background-color: var(--color-accent-gold);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
img.card-corner {
background: none;
-webkit-mask: none;
mask: none;
object-fit: contain;
}
/* 内側の線の角にはまるよう少し内側へ配置 */
.card-corner--tl { top: 6px; left: 6px; }
.card-corner--tr { top: 6px; right: 6px; }
.card-corner--bl { bottom: 6px; left: 6px; }
.card-corner--br { bottom: 6px; right: 6px; }
/* menu_corner.png は右上向き。各角に合わせて回転・反転 */
img.card-corner--tr { transform: none; }
img.card-corner--tl { transform: scaleX(-1); }
img.card-corner--br { transform: scaleY(-1); }
img.card-corner--bl { transform: scale(-1, -1); }
/* Goods用：アーチ形のベージュ枠
横方向の半径を50%にすることで、カードがどんなに幅広くなっても
（大きいモニターでも）アーチの丸みが必ずカード中央できれいに合わさる。
縦方向の半径は固定値。画像側のmargin-topと必ず同じ値にして、
画像がアーチの丸みで見切れないようにする。 */
.card--arch {
background-color: var(--color-card-bg);
border-radius: 400px 400px 8px 8px;
box-shadow: none;
}
@media (hover: hover) {
.card--arch:hover {
box-shadow: none;
transform: translateY(-6px);
}
}
/* 画像は白背景の枠内に contain で収め、左右・上の余白は白で埋める（見切れを目立たせない） */
.card--arch .card-pic {
aspect-ratio: 1 / 1;
margin: 15% 24px 0;
padding: 12px;
border-radius: 4px;
border: none;
height: auto;
}
/* グッズの画像は正方形で納品されるため、スライド枠も正方形にする */
.card--arch .card-pic__slides {
padding-bottom: 100%;
}
.card--arch .card-pic img {
width: 90%;
height: auto;
display: block;
}
/* NOW PRINTING画像(SVG)は元の比率が正方形でないため、グッズでは明示的に正方形にする */
.card--arch .card-pic.is-default img {
aspect-ratio: 1 / 1;
}
/* Topics用：ベージュ枠カード */
.card--topic {
background-color: var(--color-card-bg);
}
.card--topic .card-title {
text-align: left;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.05em;
color: var(--color-text-main);
margin-bottom: 36px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
/* サムネ画像とその下の日付の間の余白を詰める */
.card--topic .card-body {
padding-top: 2px;
}
/* Topics用：カテゴリ＋日付の横並びメタ（左寄せ） */
.card-meta {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
}
/* Topicsの区切り線は枠内90%まで */
.card--topic .deco-divider--small {
width: 100%;
}
.card-meta__cat,
.card-meta__date {
display: inline-block;
padding: 2px 12px;
font-size: 10px;
letter-spacing: 0.2em;
border: 1px solid var(--color-accent-brown);
border-radius: 0;
color: var(--color-accent-brown);
}
.card-meta__date {
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.08em;
}
/* -----------------------------------------
News（WPループ）
----------------------------------------- */
/* お知らせ背後の枠（額装パネル） */
/* ベージュの角丸なしパネル */
.news-panel {
max-width: 820px;
margin: 0 auto 40px;
padding: 36px 28px;
background-color: #f6edd8;
border: 2px solid #c1a18b;
border-radius: 0;
box-shadow: 0 14px 32px rgba(46, 26, 12, .18);
}
.news-list {
max-width: 760px;
margin: 0 auto;
text-align: left;
}
.news-list li {
border-bottom: 1px solid rgba(139, 90, 43, .25);
}
.news-list li:first-child {
border-top: 1px solid rgba(139, 90, 43, .25);
}
.news-list a {
display: flex;
align-items: center;
gap: 20px;
padding: 8px 8px;
color: var(--color-text-main);
}
.news-list a:hover {
background: rgba(223, 183, 67, .12);
opacity: 1;
}
/* 日付とカテゴリをひとまとめにして、タイトルと横並びにする */
.news-meta {
display: flex;
align-items: center;
gap: 20px;
flex: 0 0 auto;
}
.news-date {
flex: 0 0 100px;
font-family: var(--font-en);
font-size: 14px;
color: var(--color-accent-brown);
}
.news-cat {
flex: 0 0 64px;
font-size: 10px;
letter-spacing: 0.2em;
text-align: center;
padding: 3px 0;
border: 1px solid #cdb183;
background: #cdb183;
color: #fff;
border-radius: 0;
}
.news-title {
flex: 1 1 auto;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
/* -----------------------------------------
予約CTA
----------------------------------------- */
/* フッターと同じ紺色の背景 */
.cta-reserve {
text-align: center;
padding: 72px 20px;
background-color: var(--color-bg-navy);
}
.cta-reserve .btn {
min-width: 300px;
font-size: 16px;
padding: 18px 48px;
}
/* -----------------------------------------
Footer & Footer Logo
----------------------------------------- */
.site-footer {
background-color: var(--color-bg-navy);
color: var(--color-text-muted);
padding: 60px 20px 40px;
}
.footer-inner {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.footer-logo-area {
margin-bottom: 30px;
}
.footer-logo-link {
display: inline-block;
transition: transform 0.3s ease;
}
.footer-logo-link:hover {
transform: scale(1.08) rotate(-1deg);
opacity: 1;
}
.footer-logo-img {
max-width: 120px;
height: auto;
}
.footer-links, .footer-ltr {
list-style: none;
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 30px;
font-size: 0.9rem;
color: var(--color-light-gold);
}
.footer-links a {
color: var(--color-light-gold);
position: relative;
padding-bottom: 4px;
}
.footer-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background-color: #c2a45f;
transition: width 0.3s ease, left 0.3s ease;
}
.footer-links a:hover {
color: #c2a45f;
}
.footer-links a:hover::after {
width: 100%;
left: 0;
}
.copyright {
font-size: 0.75rem;
letter-spacing: 0.05em;
color: var(--color-copyright);
}
/* -----------------------------------------
下部追従の予約ボタン（ムービー到達後に表示）
----------------------------------------- */
/* 追従の予約ボタン。見た目は .btn--plaque と共通（同じ高さ・幅）。
ここでは固定配置と表示アニメだけを担当する */
.float-reserve {
position: fixed;
left: 50%;
bottom: 16px;
transform: translate(-50%, 130%);
z-index: 45;
opacity: 0;
visibility: hidden;
filter: drop-shadow(0 8px 16px rgba(26, 16, 8, .4));
transition: transform .5s ease, opacity .5s ease, visibility .5s;
}
.float-reserve.is-visible {
transform: translate(-50%, 0);
opacity: 1;
visibility: visible;
}
.float-reserve:hover {
opacity: 1;
filter: drop-shadow(0 8px 16px rgba(26, 16, 8, .4)) brightness(1.08);
}
/* -----------------------------------------
ページトップへ戻る
----------------------------------------- */
.to-top {
position: fixed;
right: 18px;
bottom: 16px;
z-index: 40;
width: 52px;
height: 52px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--wood-dark);
color: var(--color-accent-gold);
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.1em;
box-shadow: 0 6px 16px rgba(46, 26, 12, .4), inset 0 0 0 1px rgba(223, 183, 67, .5);
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease, transform .3s ease;
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
}
.to-top:hover {
transform: translateY(-4px);
opacity: 1;
}
/* ボタンを画像にする場合（![]()
を入れ、aに to-top--img を付与）
totop.png(約200×156、縦長寄り)に合わせた枠 */
.to-top--img {
background: none;
box-shadow: none;
border-radius: 0;
width: 70px;
height: 55px;
overflow: visible;
}
.to-top--img .to-top__label {
display: contents;
}
.to-top__img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* クリック時：少し上にしゅっと動いて元に戻る */
.to-top.is-jump {
animation: toTopJump .45s cubic-bezier(.3, 0, .3, 1);
}
@keyframes toTopJump {
30% { transform: translateY(-14px); }
100% { transform: translateY(0); }
}
/* -----------------------------------------
レスポンシブ (スマホ対応)
----------------------------------------- */
@media screen and (max-width: 1100px) {
/* スマホのハンバーガーメニュー(.gnav)は自前の赤背景を持つ別パネルなので、
PC用のマスク(.site-header::after)は不要。付けたままだとメニュー全体が
マスクの下に隠れて見えなくなってしまうため、ここで無効化する */
.site-header::after {
content: none;
}
/* ロゴを中央寄せにし、ナビはロゴタップで開くドロップダウンに切り替える */
.site-header__inner {
justify-content: center;
position: relative;
}
.gnav {
display: block;
position: absolute;
top: calc(100% - 6px);
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
background: var(--color-accent-red);
transition: max-height .3s ease;
}
.gnav.is-open {
max-height: 600px;
}
.gnav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
/* 仕切り線は画面端まで届かせず、少し内側で切れるようにする */
.gnav__list li {
position: relative;
}
.gnav__list li::before {
content: '';
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 1px;
background: rgba(255, 255, 255, .15);
}
/* 一番下の項目（HELP&GUIDE）の下にも同じ仕切り線を引く */
.gnav__list li:last-child::after {
content: '';
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background: rgba(255, 255, 255, .15);
}
.gnav__list a,
.gnav__list .gnav__link-static,
.gnav__details summary {
padding: 16px 24px;
font-size: 12px;
}
/* メニューを開いた時にだけ表示する、画面右上・ロゴと同じ行の×閉じるボタン。
.site-header__innerを基準に配置するため、.gnavの中ではなくロゴの隣に置いている。
表示・非表示はJSが付け外しする.is-openで切り替える（メニューの開閉と連動） */
.gnav__close {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 32px;
height: 32px;
z-index: 60;
}
.gnav__close.is-open {
display: block;
}
/* ハンバーガーボタンはロゴの左・×ボタン(.gnav__close)と対称の位置に置く。
メニューが開いている間は×ボタンに役目を譲り、ハンバーガー自体は隠す */
.gnav__hamburger {
display: block;
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 32px;
z-index: 60;
}
.gnav__hamburger.is-open {
display: none;
}
/* 下部固定バー。TOPへ戻るボタンが被らないよう、ボタン分の余白を上に空ける */
.bottom-bar {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 55;
min-height: 60px;
box-shadow: 0 -2px 8px rgba(26, 16, 8, .12);
}
.to-top {
bottom: 76px;
}
.site-footer {
padding-bottom: 76px;
}
.gnav__top-only {
display: list-item;
}
/* スマホはタップでも:hoverが反応してしまうため、下線演出を止める */
.gnav__list a::after {
display: none;
}
/* スマホ：RESERVATION(has-sub--tap)はのタップ開閉に任せ、常時表示にはしない。
HELP&GUIDE(has-sub--pc-only)は、下部に同じ内容の項目が常にあるため出さない */
.gnav__sub {
position: static;
min-width: 0;
background: rgba(0, 0, 0, .15);
box-shadow: none;
padding: 0;
}
.gnav__sub a {
padding: 12px 24px 12px 52px;
}
/* スマホではホバーが無いため、タップでが開いた時だけ表示する。
.gnav__subはのきょうだい要素なので、隣接兄弟結合子(~)で指定する
（PC側にはこのルールを置かないことで、PCは常にホバーのみで開閉するようにしている） */
.gnav__details[open] ~ .gnav__sub {
display: block;
}
.has-sub--pc-only .gnav__sub {
display: none !important;
}
/* よくある質問・プライバシーポリシー・お問い合わせ（スマホのみ表示） */
.gnav__utility {
display: block;
padding: 18px 24px 24px;
}
.gnav__utility-list {
display: flex;
justify-content: space-between;
list-style: none;
}
.gnav__utility-list a {
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, .7);
}
}
@media screen and (max-width: 960px) {
.card-grid,
.card-grid--4 {
grid-template-columns: 1fr 1fr;
}
.slider-arrow { width: 40px; height: 40px; font-size: 14px; }
/* タブレット：表示2枚 → 隙間位置 0.25/2.5 = 10% */
.slider-arrow--prev { left: 10%; }
.slider-arrow--next { right: 10%; }
/* アクセスの扉が画面外にはみ出しても横スクロールさせない(見切れたまま)。
960px以下ではみ出すため、600px専用だった対応をここまで広げる */
.access-section {
overflow: hidden;
}
}
@media screen and (max-width: 600px) {
.chara-hero__notice {
margin-top: 0;
margin-bottom: 0;
}
/* スマホ：中央アイテムに被らないよう、見切れ部分の中間あたりに配置 */
.slider-arrow--prev { left: 8%; }
.slider-arrow--next { right: 8%; }
/* FAQ：スマホでは「詳細を見る／隠す」の文字を消し、＋／－だけ残す */
.faq-item__toggle-text {
display: none !important;
}
/* 特典タイトルを「予約特典」と同じくらいの大きさに縮める。
他の特典テキストも合わせて少し小さくする */
.book-heading small {
font-size: 15px;
}
.page-content p {
font-size: 11px;
}
.page-period {
font-size: 11px;
}
.page-period strong {
font-size: 15px;
}
.book-note {
font-size: 10px;
}
/* 見出し画像（Access等）をスマホでは少し小さく、下の余白も詰める */
.sec-head-img {
max-width: 220px;
margin-bottom: 8px;
}
/* トピックス・ニュースの見出し画像の上下余白を揃える（上=セクションのpadding-top 56pxと同じくらいに） */
#topics .sec-head-img,
#news .sec-head-img {
margin-bottom: 56px;
}
/* アクセスのキャラ画像をスマホでは小さく（マップを大きく見せる） */
.access-char {
flex: 0 0 70px;
}
/* マップはスマホだけ正方形に(PCは元のまま) */
.access-map {
aspect-ratio: 4 / 4;
}
/* 「東京会場」上の余白を詰め、住所・営業時間の項目名を狭く、値を広く */
.access-panel {
padding: 56px 20px 48px;
}
.access-panel dl {
grid-template-columns: 68px 1fr;
}
/* Aboutの3ボタンを縦並び＆同じ幅に揃える */
.about-board__actions .btn {
width: 280px;
max-width: 88%;
min-width: 0;
}
.sp-content.page-content {
padding: 10px;
justify-content: flex-start;
}
}
/* sp-content(1カラム表示)が使われる479px以下の全域で、必ず本の高さを
確保する */
@media screen and (max-width: 479px) {
.book {
height: 600px;
}
}
@media screen and (max-width: 480px) {
.deco-divider{
margin: 10px auto;
background: linear-gradient(#dfcba7 0 0) center / calc(100% - 30px) 1px no-repeat;
}
.deco-divider::before,
.deco-divider::after {
width: 10px;
height: 10px;
}
.chara-hero__notice {
font-size: 14px;
}
.kv-bar {
height: 2px;
}
/* カーテン画像が縦長になりすぎるのを緩和。スマホでは丈がセクションより
短くなって下部に隙間ができてもよいので、大きめに詰めている。
※幅を広げる形にすると、中央で左右のカーテンの絵柄(不透明部分)が
重なって見えてしまうため、幅はデスクトップと同じ58%のままにしている */
.curtain {
bottom: 28%;
}
/* カード内枠を細く、四隅の飾りもそれに合わせて内側へ・小さく */
.card--fancy::before {
inset: 3px;
}
.card-corner--tl { top: 1px; left: 1px; }
.card-corner--tr { top: 1px; right: 1px; }
.card-corner--bl { bottom: 1px; left: 1px; }
.card-corner--br { bottom: 1px; right: 1px; }
.card-corner {
width: 12px;
height: 12px;
}
.movie-frame .card-corner {
width: 30px;
height: 30px;
}
.card-body {
padding: 0px 10px 26px;
}
/* スマホは説明文のフォントが小さくなる分、最低限の高さを詰める。
ただしタイトル・説明文3行分が収まらない場合はflexで自動的に伸びる */
.card--fancy .card-body {
min-height: 200px;
}
.card-price {
font-size: 12px;
}
.card-goods-limit {
font-size: 12px;
}
.card-goods-supplement {
font-size: 11px;
}
.marquee-img { height: 16px; }
.footer-links a { font-size: 12px; }
/* プライバシーポリシー〜お問い合わせを縦並びに */
.footer-links {
flex-direction: column;
align-items: center;
gap: 14px;
}
.footer-logo-img { max-width: 100px; }
.bg-paper { background-size: 500px; }
.bg-paper-dark { background-size: 500px; }
.bg-paper-news { background-size: 450px; }
.marquee-group {
gap: 48px;
padding-right: 48px;
}
.card-grid,
.card-grid--4 {
grid-template-columns: 1fr;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
/* メニュー・グッズ一覧ページはスマホでも横2枠のまま */
#menu-archive .card-grid,
#goods-archive .card-grid {
grid-template-columns: 1fr 1fr;
max-width: 100%;
gap: 12px;
}
/* 2枠になって写真が小さく見えるので、余白を削って写真を大きく見せる */
#menu-archive .card--fancy .card-pic {
margin: 10px 10px 0;
padding: 4px;
}
/* アーチの形は変えず、2枠で幅が狭くなるぶん、画像側の上余白を増やして
画像を少し小さめにすることで見切れを防ぐ */
#goods-archive .card--arch .card-pic {
margin: 20% 10px 0;
padding: 6px;
}
#goods-archive .card--arch .card-pic img {
width: 85%;
}
/* 日付とお知らせカテゴリを縦並びにして、タイトルの幅を確保する */
.news-list a {
gap: 10px;
padding: 6px 8px;
}
.news-meta {
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.news-date {
flex: none;
font-size: 10px;
line-height: 1.1;
}
.news-cat {
flex: none;
font-size: 9px;
padding: 0;
line-height: 1.5;
}
.news-panel { padding: 24px 14px; }
.section-inner { padding: 56px 16px; }
.br-sp { display: block; }
.slider-item { padding: 6px 8px; }
.float-reserve {
min-width: 0;
width: calc(100% - 32px);
}
.to-top {
right: 12px;
bottom: 76px;
}
.to-top--img {
width: 52px;
height: 41px;
}
}
/* -----------------------------------------
メニュー・グッズ画像ポップアップ
----------------------------------------- */
.img-modal {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: 24px;
background: rgba(26, 16, 8, .82);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.img-modal.is-open {
opacity: 1;
visibility: visible;
transition: opacity .25s ease, visibility 0s;
}
.img-modal__inner {
max-width: min(600px, 90vw);
max-height: 85vh;
/* 画像・タイトル・説明文をまとめて1つの枠としてスクロールさせる
（説明文の欄だけを個別にスクロールさせない） */
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--wood-dark) transparent;
}
.img-modal__inner::-webkit-scrollbar {
width: 6px;
}
.img-modal__inner::-webkit-scrollbar-track {
background: transparent;
}
.img-modal__inner::-webkit-scrollbar-thumb {
background-color: var(--wood-dark);
border-radius: 3px;
}
.img-modal__inner::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
/* 画像はベージュの枠（名前欄・説明文と同じ幅）の中央に収める。
画像が枠より小さい比率の場合は、枠の余白（ベージュ）がそのまま見える */
.img-modal__pic {
position: relative;
width: 100%;
aspect-ratio: 8 / 5;
box-sizing: border-box;
padding: 16px;
background-color: var(--color-card-bg);
display: flex;
align-items: center;
justify-content: center;
}
.img-modal__pic img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: opacity .25s ease;
}
/* グッズはNOW PRINTING画像だけ正方形で見せる（枠自体は変えない） */
.img-modal__pic img.is-square-placeholder {
aspect-ratio: 1 / 1;
width: auto;
height: 100%;
}
/* 追加画像（ギャラリー）が複数あるときだけJSで表示する前後矢印 */
.img-modal__prev,
.img-modal__next {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
padding: 4px;
color: #dfcba7;
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 3;
}
.img-modal__prev:hover,
.img-modal__next:hover {
opacity: .7;
}
.img-modal__prev {
left: 8px;
}
.img-modal__next {
right: 8px;
}
/* ポップアップ内、画像の下に出すドット（追加画像が複数あるときだけJSで生成） */
.img-modal__dots {
display: flex;
justify-content: center;
gap: 6px;
padding: 10px 0;
background-color: var(--color-card-bg);
}
.img-modal__dots:empty {
display: none;
}
.img-modal__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #d8c6a8;
cursor: pointer;
}
.img-modal__dot.is-active {
background: var(--color-accent-brown);
}
/* 画像の下に、メニュー・グッズ名を名前の長さに関わらず省略せず表示する枠 */
.img-modal__title {
width: 100%;
margin: 0px auto 0;
padding: 12px 16px;
background-color: var(--color-card-bg);
color: var(--color-text-main);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.6;
text-align: center;
white-space: pre-line; /* メニュー・グッズ名の改行(\n)をそのまま反映する */
}
.img-modal__title:empty {
display: none;
}
.img-modal__goods-limit {
width: 100%;
margin: 0 auto;
padding: 0 16px 12px;
background-color: var(--color-card-bg);
color: var(--color-accent-red-dark);
font-size: 15px;
font-weight: 600;
text-align: center;
}
.img-modal__goods-limit:empty {
display: none;
}
.img-modal__goods-supplement {
width: 100%;
margin: 0 auto;
padding: 0 16px 12px;
background-color: var(--color-card-bg);
color: var(--color-text-muted);
font-size: 13px;
line-height: 1.6;
text-align: center;
}
.img-modal__goods-supplement:empty {
display: none;
}
.img-modal__desc {
width: 100%;
margin: 0 auto;
padding: 0 16px 16px;
background-color: var(--color-card-bg);
color: var(--color-text-main);
font-size: 13px;
line-height: 1.8;
text-align: left;
white-space: pre-wrap;
}
.img-modal__desc:empty {
display: none;
}
.img-modal__close {
position: absolute;
top: 20px;
right: 24px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.img-modal__close:hover {
opacity: .7;
}
/* クリックできる画像であることが分かるように */
.js-img-popup {
cursor: pointer;
}
/* -----------------------------------------
JavaScript Animation Styles (動きの仕掛け)
----------------------------------------- */
.js-fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1),
transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.js-fade.is-show {
opacity: 1;
transform: translateY(0);
}
.js-bounce {
opacity: 0;
transform: translateY(60px);
}
.js-bounce.is-show {
animation: bounceInUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(60px) scaleY(1.2);
}
50% {
opacity: 1;
transform: translateY(-15px) scaleY(0.9);
}
70% {
transform: translateY(7px) scaleY(1.05);
}
85% {
transform: translateY(-3px) scaleY(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scaleY(1);
}
}
/* メニュー・グッズの登場演出（左からスライドイン） */
/* 位置は動かさず、小さい状態から等倍に大きくなりながらフェードインする。
弾む動きにならないよう、イージングはオーバーシュートのない ease にしている */
.js-slide-left {
opacity: 0;
transform: scale(0.85);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.js-slide-left.is-show {
opacity: 1;
transform: scale(1);
}