html{
overflow-y:scroll;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:
"Hiragino Sans",
"Yu Gothic",
sans-serif;
background:#f5f5f5;
color:#333;
}
/* ===============================
共通
=============================== */
.menu-gallery{
max-width:1600px;
margin:auto;
padding:30px 20px 60px;
}
.menu-gallery h1{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:100%;
min-height:140px;
padding:18px;
border-radius:8px;
margin-bottom:24px;
text-align:center;
font-size:2rem;
font-weight:600;
line-height:1.45;
color:#fff;
text-shadow:
0 1px 2px rgba(0,0,0,.15);
}
.price-main{
display:block;
font-size:1em;
}
.menu-gallery h1 .tax{
font-size:.6em;
font-weight:400;
}
.menu-gallery h1 .sub-copy{
display:block;
font-size:.55em;
font-weight:400;
color:
rgba(255,255,255,.95);
}
/* ===============================
帯色切替
=============================== */
/* 10000 */
.theme-10000 .menu-gallery h1{
background:
linear-gradient(
135deg,
#92295a,
#c45f89
);
box-shadow:
0 3px 12px rgba(146,41,90,.24);
}
.theme-10000 .price-main,
.theme-10000 .tax{
color:#fff;
text-shadow:
0 2px 6px rgba(0,0,0,.22);
}
/* 8500 */
.theme-8500 .menu-gallery h1{
background:
linear-gradient(
135deg,
#d96b45,
#f0a572
);
box-shadow:
0 3px 12px rgba(217,107,69,.22);
}
.theme-8500 .price-main,
.theme-8500 .tax{
color:#fff;
}
/* 7500 */
.theme-7500 .menu-gallery h1{
background:
linear-gradient(
135deg,
#ea964f,
#ffd29a
);
box-shadow:
0 3px 12px rgba(234,150,79,.22);
}
.theme-7500 .price-main,
.theme-7500 .tax{
color:#5d4331;
}
/* 6500 */
.theme-6500 .menu-gallery h1{
background:
linear-gradient(
135deg,
#e5b028,
#f7df9f
);
box-shadow:
0 3px 12px rgba(229,176,40,.20);
}
.theme-6500 .price-main,
.theme-6500 .tax{
color:#4b4033;
}
/* 5500 */
.theme-5500 .menu-gallery h1{
background:
linear-gradient(
135deg,
#96ab4c,
#d8e69c
);
box-shadow:
0 3px 12px rgba(150,171,76,.18);
}
.theme-5500 .price-main,
.theme-5500 .tax{
color:#445038;
}
/* ===============================
ギャラリー
=============================== */
.gallery-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(250px,1fr));
gap:24px;
}
.gallery-item{
background:#fff;
border-radius:10px;
overflow:hidden;
cursor:pointer;
transition:.2s;
box-shadow:
0 2px 10px rgba(0,0,0,.08);
}
.gallery-item:hover{
transform:
translateY(-4px);
}
.gallery-item img{
width:100%;
display:block;
}
/* 各社情報 */
.caption{
padding:12px;
text-align:center;
}
/* 各社説明 */
.caption p{
margin-top:10px;
font-size:.95rem;
line-height:1.9;
color:#666;
}
/* 1行目（プラン名）強調 */
.caption p:first-line{
font-size:1.08rem;
font-weight:700;
color:#7d5425;
background:
linear-gradient(
135deg,
#fff4dc,
#ffe6b0
);
padding:10px 18px;
border-radius:999px;
line-height:2.8;
}
/* 各社名上部のケイ線（太め） */
.caption h3{
position:relative;
padding-top:20px;
margin-top:6px;
margin-bottom:2px;
}
.caption h3::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:72%;
height:3px;
border-radius:999px;
background:
linear-gradient(
90deg,
transparent,
#d8a328,
#f2d58a,
#d8a328,
transparent
);
}
/* ===============================
モーダル
=============================== */
.modal{
display:none;
position:fixed;
inset:0;
background:
rgba(0,0,0,.92);
z-index:9999;
}
.modal-content{
position:relative;
width:fit-content;
max-width:95vw;
height:auto;
max-height:95vh;
margin:auto;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
pointer-events:none;
}
.modal-image-wrap,
.modal-buttons,
.modal-close{
pointer-events:auto;
}
.modal-close{
position:absolute;
right:20px;
top:10px;
font-size:40px;
color:#fff;
cursor:pointer;
}
.modal-image-wrap{
overflow:hidden;
width:100%;
height:80vh;
display:flex;
justify-content:center;
align-items:center;
}
#modalImage{
max-width:90vw;
max-height:80vh;
cursor:grab;
}
/* ===============================
価格帯ナビ
=============================== */
/* 説明文 */
.menu-note{
margin:24px 0 8px;
text-align:center;
color:#666;
font-size:1rem;
line-height:2;
letter-spacing:.02em;
}
.other-price-nav{
margin-top:10px;
padding-top:10px;
border-top:
1px solid #e5e5e5;
text-align:center;
}
/* 価格帯タイトル */
.other-price-title{
margin:10px 0 12px;
font-size:1.02rem;
font-weight:500;
line-height:1.8;
color:#666;
letter-spacing:.03em;
}
.other-price-buttons,
.party-price-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:28px;
margin-top:24px;
margin-bottom:40px;
}
.other-price-buttons .price-btn,
.party-price-buttons .price-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:150px;
min-height:60px;
padding:10px 20px;
border-radius:12px;
text-decoration:none;
font-size:1rem;
font-weight:600;
letter-spacing:.02em;
color:#fff;
text-shadow:
0 1px 1px rgba(0,0,0,.12);
transition:
transform .25s,
box-shadow .25s;
box-shadow:
0 3px 8px rgba(0,0,0,.10);
}
.other-price-buttons .price-btn:hover,
.party-price-buttons .price-btn:hover{
transform:
translateY(-2px);
box-shadow:
0 6px 14px rgba(0,0,0,.14);
}
/* ボタン色 */
.price-10000{
background:
linear-gradient(
135deg,
#a1265d,
#d66a92
);
}
.price-8500{
background:
linear-gradient(
135deg,
#e66d45,
#f4a56f
);
}
.price-7500{
background:
linear-gradient(
135deg,
#ef9646,
#ffd08b
);
color:#5d4331;
}
.price-6500{
background:
linear-gradient(
135deg,
#ebb321,
#ffe29a
);
color:#4b4033;
}
.price-5500{
background:
linear-gradient(
135deg,
#93b93b,
#d8ec93
);
color:#445038;
}
.current{
cursor:default;
}
.current small{
display:block;
margin-top:2px;
font-size:.92em;
}
/* ===============================
レスポンシブ
=============================== */
@media(max-width:1200px){
.gallery-grid{
grid-template-columns:
repeat(3,1fr);
}
}
@media(max-width:768px){
.gallery-grid{
grid-template-columns:
repeat(2,1fr);
}
.price-btn{
min-width:120px;
font-size:.95rem;
}
.party-price-buttons{
gap:16px;
}
.party-price-buttons .price-btn{
min-width:170px;
min-height:64px;
font-size:1.05rem;
}
}
@media(max-width:480px){
.gallery-grid{
grid-template-columns:1fr;
}
.menu-gallery h1{
font-size:1.5rem;
}
}
/* ===============================
モーダルボタン復旧
=============================== */
.modal-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
}
.modal-buttons button,
.modal-buttons a{
display:inline-block;
min-width:auto;
min-height:auto;
padding:12px 18px;
font-size:14px;
font-weight:500;
line-height:1.4;
border:none;
border-radius:6px;
background:#0068b7;
color:#fff;
text-decoration:none;
text-shadow:none;
box-shadow:none;
transform:none;
transition:none;
}
.modal-buttons button{
background:#555;
}
/* プラン帯 */
.plan-label{
display:inline-block;
margin-bottom:10px;
padding:
6px 14px;
background:
linear-gradient(
135deg,
#fff3d6,
#ffe3a0
);
border-radius:
8px;
font-size:
1.00rem;
font-weight:
700;
line-height:
1.4;
color:
#7d5425;
}