。写真パートナーの2枚は なので、
指差しカーソルもホバーの拡大も付かない。 */
a.venue-card { cursor: pointer; }
.venue-detail-link {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: auto;
padding-top: 7px;
color: var(--gold-ink);
font-family: var(--sans);
font-size: 12px;
font-weight: 400;
line-height: 1.4;
letter-spacing: .01em;
}
.venue-detail-label {
border-bottom: 1px solid color-mix(in srgb, var(--champagne-gold) 52%, transparent);
}
.venue-detail-arrow {
color: var(--champagne-gold);
font-size: 18px;
font-weight: 400;
line-height: 1;
transition: transform .25s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
a.venue-card:focus-visible {
outline: 2px solid var(--deep-teal);
outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
a.venue-card:hover .venue-image img {
transform: scale(1.035);
filter: brightness(1.04);
}
a.venue-card:hover .venue-detail-arrow {
color: var(--gold-ink);
transform: translateX(2px);
}
}
@supports (background-image: image-set(url("./assets/img_blank.webp") type("image/webp"))) {
.gbox:nth-child(1) { background-image: image-set(url("./assets/img_gbox_1.webp") type("image/webp"), url("./assets/img_gbox_1.jpg") type("image/jpeg")); }
.gbox:nth-child(2) { background-image: image-set(url("./assets/img_gbox_2.webp") type("image/webp"), url("./assets/img_gbox_2.jpg") type("image/jpeg")); }
.gbox:nth-child(3) { background-image: image-set(url("./assets/img_gbox_3.webp") type("image/webp"), url("./assets/img_gbox_3.jpg") type("image/jpeg")); }
.step:nth-child(1) .step-image { background-image: image-set(url("./assets/img_point1.webp") type("image/webp"), url("./assets/img_point1.jpg") type("image/jpeg")); }
.step:nth-child(2) .step-image { background-image: image-set(url("./assets/img_point2.webp") type("image/webp"), url("./assets/img_point2.jpg") type("image/jpeg")); }
.step:nth-child(3) .step-image { background-image: image-set(url("./assets/img_point3.webp") type("image/webp"), url("./assets/img_point3.jpg") type("image/jpeg")); }
.step:nth-child(4) .step-image { background-image: image-set(url("./assets/img_point4.webp") type("image/webp"), url("./assets/img_point4.jpg") type("image/jpeg")); }
.dest-card:nth-child(1) .dest-image { background-image: image-set(url("./assets/img_tokyo.webp") type("image/webp"), url("./assets/img_tokyo.jpg") type("image/jpeg")); }
.dest-card:nth-child(2) .dest-image { background-image: image-set(url("./assets/img_kyoto.webp") type("image/webp"), url("./assets/img_kyoto.jpg") type("image/jpeg")); }
.dest-card:nth-child(3) .dest-image { background-image: image-set(url("./assets/img_okinawa.webp") type("image/webp"), url("./assets/img_okinawa.jpg") type("image/jpeg")); }
.dest-card:nth-child(4) .dest-image { background-image: image-set(url("./assets/img_karuizawa.webp") type("image/webp"), url("./assets/img_karuizawa.jpg") type("image/jpeg")); }
.dest-card:nth-child(5) .dest-image { background-image: image-set(url("./assets/img_hokkaido.webp") type("image/webp"), url("./assets/img_hokkaido.jpg") type("image/jpeg")); }
}
.venue-body { padding-top: 10px; }
.venue-tag {
display: inline-flex;
min-height: 22px;
align-items: center;
gap: 5px;
width: fit-content;
margin: 0 0 7px;
padding: 4px 8px;
color: var(--gold-ink);
background: rgba(199,164,106,.12);
border: 0;
border-radius: 999px;
box-sizing: border-box;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
line-height: 14px;
letter-spacing: 0;
white-space: nowrap;
}
.venue-tag::before {
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 1.8 6.6v1.8h1.1V14h3.7v-3.7h2.8V14h3.7V8.4h1.1V6.6L8 1.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 16 16'%3E%3Cpath d='M8 1.6 1.8 6.6v1.8h1.1V14h3.7v-3.7h2.8V14h3.7V8.4h1.1V6.6L8 1.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.venue-tag:has(.venue-tag-icon path[d="M2.5 13h11"])::before {
width: 12px;
height: 12px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.4 7 4.6C3.8 2.3 5.6-.7 8 1.5c2.4-2.2 4.2.8 1 3.1l-1 .8ZM2 7.2 8 5l6 2.2v1.5h-1v4h1v1.8H2v-1.8h1v-4H2V7.2Zm3 1.5v4h2v-4H5Zm4 0v4h2v-4H9Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.4 7 4.6C3.8 2.3 5.6-.7 8 1.5c2.4-2.2 4.2.8 1 3.1l-1 .8ZM2 7.2 8 5l6 2.2v1.5h-1v4h1v1.8H2v-1.8h1v-4H2V7.2Zm3 1.5v4h2v-4H5Zm4 0v4h2v-4H9Z'/%3E%3C/svg%3E");
}
.venue-tag:has(.venue-tag-icon path[d="M4 13V3h8v10"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2.4h10v11.2H9.7V11H6.3v2.6H3V2.4Zm2.1 2v1.4h1.4V4.4H5.1Zm4.4 0v1.4h1.4V4.4H9.5ZM5.1 7.1v1.4h1.4V7.1H5.1Zm4.4 0v1.4h1.4V7.1H9.5Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2.4h10v11.2H9.7V11H6.3v2.6H3V2.4Zm2.1 2v1.4h1.4V4.4H5.1Zm4.4 0v1.4h1.4V4.4H9.5ZM5.1 7.1v1.4h1.4V7.1H5.1Zm4.4 0v1.4h1.4V7.1H9.5Z'/%3E%3C/svg%3E");
}
.venue-tag:has(.venue-tag-icon path[d="M5 3v4"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 2.2h1v4.2h.8V2.2h1v4.2h.8V2.2h1v4.7c0 1.2-.8 2.1-1.9 2.4v4.5H5.1V9.3C4 9 3.2 8.1 3.2 6.9V2.2h1Zm7.1 0c1.1.7 1.8 2 1.8 3.6v8h-1.8V9.2H10V5.8c0-1.6.5-2.9 1.3-3.6Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 2.2h1v4.2h.8V2.2h1v4.2h.8V2.2h1v4.7c0 1.2-.8 2.1-1.9 2.4v4.5H5.1V9.3C4 9 3.2 8.1 3.2 6.9V2.2h1Zm7.1 0c1.1.7 1.8 2 1.8 3.6v8h-1.8V9.2H10V5.8c0-1.6.5-2.9 1.3-3.6Z'/%3E%3C/svg%3E");
}
.venue-tag:has(.venue-tag-icon path[d="M3 4h10"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14l-.8 2.2H9.1v1.3h4.2v2H12l.9 6.5h-2.3L9.8 7.5H6.2L5.4 14H3.1L4 7.5H2.7v-2h4.2V4.2H1.8L1 2Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14l-.8 2.2H9.1v1.3h4.2v2H12l.9 6.5h-2.3L9.8 7.5H6.2L5.4 14H3.1L4 7.5H2.7v-2h4.2V4.2H1.8L1 2Z'/%3E%3C/svg%3E");
}
.venue-tag:has(.venue-tag-icon path[d="M3 7h10"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.3 2.2 5.8V7h11.6V5.8L8 2.3ZM3.2 8v4.1H2.4v1.4h11.2v-1.4h-.8V8h-1.7v4.1H9.4V8H6.6v4.1H4.9V8H3.2Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.3 2.2 5.8V7h11.6V5.8L8 2.3ZM3.2 8v4.1H2.4v1.4h11.2v-1.4h-.8V8h-1.7v4.1H9.4V8H6.6v4.1H4.9V8H3.2Z'/%3E%3C/svg%3E");
}
.venue-tag:has(.venue-tag-icon path[d="M8 2.5v11"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.1 2.2 6.3v7.5h11.6V6.3L8 2.1Zm0 2.2 3.9 2.8v4.9H9.4V8.9H6.6V12H4.1V7.1L8 4.3Zm-2.4 3h1.5v1.5H5.6V7.3Zm3.3 0h1.5v1.5H8.9V7.3Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.1 2.2 6.3v7.5h11.6V6.3L8 2.1Zm0 2.2 3.9 2.8v4.9H9.4V8.9H6.6V12H4.1V7.1L8 4.3Zm-2.4 3h1.5v1.5H5.6V7.3Zm3.3 0h1.5v1.5H8.9V7.3Z'/%3E%3C/svg%3E");
}
.venue-tag:has(.venue-tag-icon path[d="M4 6h8v6H4z"])::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.7 4.2 6.5 3h3l.8 1.2H13c.8 0 1.4.6 1.4 1.4v6.2c0 .8-.6 1.4-1.4 1.4H3c-.8 0-1.4-.6-1.4-1.4V5.6c0-.8.6-1.4 1.4-1.4h2.7ZM8 6.2a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.7 4.2 6.5 3h3l.8 1.2H13c.8 0 1.4.6 1.4 1.4v6.2c0 .8-.6 1.4-1.4 1.4H3c-.8 0-1.4-.6-1.4-1.4V5.6c0-.8.6-1.4 1.4-1.4h2.7ZM8 6.2a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2Z'/%3E%3C/svg%3E");
}
.venue-tag-icon {
display: none;
}
.venue-name { font-size: 14px; font-weight: 500; line-height: 1.45; }
.partner-card .venue-name { font-size: 16px; }
.budget-section {
color: var(--ink);
background: var(--pale-gold);
}
.budget-section h2 {
font-family: var(--display);
}
.budget-wrap {
width: min(calc(100% - 56px), 920px);
max-width: 920px;
}
.budget-lede {
max-width: 620px;
margin-right: auto;
margin-left: auto;
}
.bm-container {
display: grid;
gap: 26px;
width: min(100%, 440px);
margin: 42px auto 0;
}
.bm-filters {
display: grid;
gap: 18px;
}
.bm-filter label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
color: var(--ink);
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
}
.bm-label-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.bm-label-icon-area {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.bm-label-icon-guests {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20v-1.5A5.5 5.5 0 0 1 8 13h2a5.5 5.5 0 0 1 5.5 5.5V20M16 5a3 3 0 0 1 0 6M17 13.5a5 5 0 0 1 4.5 5V20'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20v-1.5A5.5 5.5 0 0 1 8 13h2a5.5 5.5 0 0 1 5.5 5.5V20M16 5a3 3 0 0 1 0 6M17 13.5a5 5 0 0 1 4.5 5V20'/%3E%3C/svg%3E");
}
.bm-label-icon-budget {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15.2 15.2 5.3 5.3M12.5 6.8c-.6-.5-1.4-.8-2.4-.8-1.4 0-2.4.7-2.4 1.8 0 2.8 5.3 1.2 5.3 4 0 1.2-1.1 2.1-2.8 2.1-1.1 0-2.1-.4-2.8-1M10.2 4.5v11'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15.2 15.2 5.3 5.3M12.5 6.8c-.6-.5-1.4-.8-2.4-.8-1.4 0-2.4.7-2.4 1.8 0 2.8 5.3 1.2 5.3 4 0 1.2-1.1 2.1-2.8 2.1-1.1 0-2.1-.4-2.8-1M10.2 4.5v11'/%3E%3C/svg%3E");
}
.bm-filter select {
width: 100%;
height: 56px;
min-height: 56px;
padding: 0 48px 0 15px;
color: var(--ink);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23263838' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 17px center;
background-size: 12px 8px;
border: 1px solid color-mix(in srgb, var(--ink-mute) 28%, white);
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
font-weight: 500;
-webkit-appearance: none;
appearance: none;
}
.bm-result {
padding: 24px 20px 22px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(22, 45, 56, .12);
}
.bm-result-head {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
color: var(--ink-mute);
font-size: 15px;
}
.bm-guests {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 12px;
color: #155d78;
background: #eef7f8;
border-radius: 999px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 700;
}
.bm-result-body { border-top: 1px solid var(--line); }
.bm-result-row {
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 14px;
align-items: baseline;
padding: 16px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink-mute) 18%, white);
}
.bm-result-body .bm-result-row:last-child {
border-bottom: 0;
}
.bm-row-label {
color: var(--ink-mute);
font-size: 13px;
}
.bm-row-value {
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
text-align: right;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.bm-sgd .bm-row-value { font-size: clamp(19px, 5.6vw, 24px); }
.bm-usd .bm-row-value {
color: var(--ink-mute);
font-size: 14px;
font-weight: 500;
}
.bm-exchange-note {
margin: 16px 0 0;
padding-top: 14px;
color: var(--ink-mute);
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
line-height: 1.65;
}
.bm-detail-cta {
width: min(100%, 340px);
margin: 22px auto 0;
background: var(--deep-teal);
}
.bm-note {
max-width: 480px;
margin: 16px auto 0;
color: var(--ink-mute);
text-align: center;
font-size: 12px;
line-height: 1.55;
}
.final-cta {
padding: 92px 20px 100px;
color: var(--deep-teal-accessible);
background: #fff;
text-align: center;
}
.final-cta h2 { max-width: 720px; margin: 0 auto 20px; }
.final-cta h2 { color: var(--gold-ink); }
.final-cta p { margin: 0 0 30px; color: var(--deep-teal-accessible); }
.final-cta-visual {
width: min(520px, calc(100% - 40px));
height: auto;
margin: 0 auto 26px;
border-radius: 16px 0 16px 0;
}
.btn-primary {
min-height: 56px;
display: inline-flex;
align-items: center;
gap: 10px;
min-width: min(290px, 100%);
justify-content: center;
padding: 0 34px;
border-radius: 12px;
background: var(--deep-teal);
color: var(--text-on-dark);
text-decoration: none;
font-size: 16px;
font-family: var(--sans);
font-weight: 700;
transition: filter 240ms ease, transform 240ms ease;
}
.btn-primary.bm-detail-cta {
background: var(--deep-teal);
}
.btn-primary:hover { filter: brightness(1.08); }
.final-cta .btn-primary {
background: var(--champagne-gold);
color: #fff;
}
.final-cta .btn-primary:hover {
color: #fff;
background: var(--champagne-gold);
}
.btn-calendar::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3.3' width='11.6' height='10.2' rx='1.4'/%3E%3Cpath d='M5 1.8v3M11 1.8v3M2.2 6.3h11.6'/%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 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3.3' width='11.6' height='10.2' rx='1.4'/%3E%3Cpath d='M5 1.8v3M11 1.8v3M2.2 6.3h11.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 大きいCTAボタン（最終CTA・見積）は、お問い合わせ欄の WhatsApp / カレンダーと同じ 24px に揃える。
ヘッダーの小さいボタン（.btn-mini）と追従バーは既定サイズのまま。 */
.btn-primary.btn-calendar::before {
width: 24px;
height: 24px;
}
.btn-calendar i { display: none; }
.brand-section {
position: relative;
overflow: hidden;
color: #fff;
background: #102f38;
}
.brand-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(rgba(10,28,34,.08), rgba(10,28,34,.36));
}
.brand-section .wrap {
position: relative;
z-index: 2;
}
.brand-section h2,
.brand-logo,
.brand-block p {
color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,.26);
}
.brand-bg {
position: absolute;
inset: 0;
z-index: 0;
display: block;
}
.brand-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.brand-block { text-align: center; }
.brand-logo { font-family: var(--serif); font-size: 38px; letter-spacing: .04em; }
.brand-logo-img {
width: min(210px, 62vw);
height: auto;
margin: 0 auto;
}
.brand-block p { margin: 8px 0 0; font-size: 12px; letter-spacing: .06em; }
.support-list {
width: min(100%, 360px);
margin: 36px auto 0;
padding: 0;
list-style: none;
text-align: left;
}
.support-list li {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
font-size: 18px;
}
.support-list i {
width: 26px;
height: 26px;
flex: 0 0 auto;
display: inline-grid;
place-items: center;
margin-right: 0;
color: var(--champagne-gold);
background: transparent;
border: 1.5px solid currentColor;
border-radius: 50%;
font-size: 0;
}
.support-list i::before {
content: "✓";
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.contact-layout {
margin-top: 34px;
}
.contact-visual {
position: relative;
max-width: 520px;
margin: 0 auto;
}
.contact-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 18px 18px 18px 4px;
}
.contact-gif {
position: absolute;
left: 14px;
top: 14px;
width: clamp(78px, 24vw, 116px);
height: auto;
background: #fff;
border-radius: 14px;
}
.contact-actions .lede {
margin-top: 22px;
}
.contact-grid { display: grid; gap: 10px; max-width: 520px; margin: 32px auto 0; }
.btn-contact {
min-height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 12px;
color: var(--text-on-dark);
background: var(--deep-teal);
text-decoration: none;
font-family: var(--sans);
font-weight: 700;
font-size: 16px;
transition: filter 240ms ease, transform 240ms ease;
}
.btn-contact:hover { filter: brightness(1.08); }
.btn-contact[data-channel]::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 auto;
background: center / contain no-repeat;
}
.btn-contact[data-channel="whatsapp"]::before { background-image: url("./assets/ico_whats.png"); }
.btn-contact[data-channel="consultation"]::before { display: none; }
.btn-contact[data-channel] i { display: none; }
.btn-contact svg {
/* WhatsApp アイコン（::before の 16px）とサイズを揃える */
width: 16px;
height: 16px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-grid .btn-contact[data-channel]::before,
.contact-grid .btn-contact svg {
width: 24px;
height: 24px;
}
.contact-grid .btn-contact[data-channel="consultation"] {
color: #fff;
background: var(--champagne-gold);
}
.footer {
position: relative;
overflow: hidden;
padding: 50px 20px 110px;
color: rgba(255,255,255,.68);
background:
linear-gradient(rgba(21,93,120,.88), rgba(21,93,120,.9)),
url("./assets/img_footer.jpg") center 44% / cover no-repeat;
border-top: 1px solid var(--border-strong);
text-align: center;
font-size: 13px;
}
@supports (background-image: image-set(url("./assets/img_footer.webp") type("image/webp"))) {
.footer {
background-image:
linear-gradient(rgba(21,93,120,.88), rgba(21,93,120,.9)),
image-set(url("./assets/img_footer.webp") type("image/webp"), url("./assets/img_footer.jpg") type("image/jpeg"));
}
}
.footer .links { margin-bottom: 16px; }
.footer a { text-decoration: none; }
/* タグラインと著作権表記は分ける。1行に溶接すると、法務の文の事務的な調子が
タグライン側に流れて、ブランドの言葉が業種名のように読めてしまう。
thanks.html の .booking-page-footer にも同じ構造があるが、
あちらは白地・こちらは濃いティール地なので色の指定は別で持つ。 */
.footer .footer-tagline {
margin: 0 0 8px;
font-size: 13px;
letter-spacing: .02em;
}
.footer .footer-copy {
margin: 0;
color: rgba(255,255,255,.5);
font-size: 11px;
letter-spacing: .04em;
}
.sticky-cta {
position: fixed;
z-index: 30;
bottom: 0;
left: 0;
right: 0;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.96);
box-shadow: 0 -2px 8px rgba(14,34,43,.12);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(16px);
transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms;
}
.sticky-cta.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
.sticky-cta .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sticky-cta .btn-contact { min-height: 48px; background: var(--navy); color: #fff; border: 0; border-radius: 8px; }
.sticky-cta .btn-contact:first-child { background: var(--deep-teal); }
.sticky-cta .btn-contact:last-child {
color: #fff;
background: var(--champagne-gold);
}
.booking-modal {
position: fixed;
z-index: 50;
inset: 0;
display: none;
padding: 18px;
background: rgba(10, 31, 38, .72);
backdrop-filter: blur(8px);
overflow-y: auto;
}
.booking-modal.open { display: block; }
.booking-card {
position: relative;
max-width: 660px;
margin: 18px auto;
padding: 34px 22px 28px;
background: #fff;
border-radius: 18px;
box-shadow: 0 18px 44px rgba(18, 41, 48, .24);
}
.booking-card .close {
position: absolute;
top: 12px;
right: 12px;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
color: var(--deep-teal-accessible);
background: var(--pale-mist);
display: block;
padding: 0;
}
.booking-card .close i {
display: none;
}
.booking-card .close::before,
.booking-card .close::after {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
content: "";
background: currentColor;
border-radius: 999px;
transform-origin: center;
}
.booking-card .close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.booking-card .close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.booking-card h3,
.booking-card h1 {
margin: 0 48px 8px 0;
color: var(--gold-ink);
font-family: var(--display);
letter-spacing: .5px;
font-size: 28px;
font-weight: 500;
line-height: 1.25;
}
.bk-lead {
max-width: 460px;
margin: 14px 0 32px;
color: var(--text-muted);
font-size: 14px;
line-height: 1.7;
}
.bk-note {
max-width: 460px;
margin: 16px auto 0;
color: var(--ink-mute);
text-align: center;
font-size: 12px;
line-height: 1.6;
}
.bk-section {
margin: 28px 0 16px;
padding-bottom: 8px;
color: var(--deep-teal-accessible);
border-bottom: 1px solid var(--line);
font-size: 15px;
font-weight: 700;
}
.bk-row { display: grid; gap: 14px; }
.bk-field { margin-bottom: 16px; }
.bk-field label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
color: var(--ink);
font-size: 13px;
font-weight: 700;
}
.req,
.opt {
min-height: 20px;
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.req {
color: #fff;
background: var(--champagne-gold);
}
.opt {
color: var(--text-accent);
background: color-mix(in srgb, var(--pale-gold) 62%, white);
}
.bk-input, .bk-select, .bk-textarea {
width: 100%;
min-height: 52px;
border: 1px solid color-mix(in srgb, var(--champagne-gold) 42%, white);
border-radius: 10px;
padding: 11px 14px;
color: var(--ink);
background: rgba(199, 164, 106, .06);
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.bk-input,
.bk-select {
height: 56px;
min-height: 56px;
}
.bk-select {
padding-right: 48px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23263838' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 17px center;
background-size: 12px 8px;
-webkit-appearance: none;
appearance: none;
}
.bk-select option {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.bk-date-control {
position: relative;
width: 100%;
height: 56px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--champagne-gold) 42%, white);
border-radius: 10px;
background: rgba(199, 164, 106, .06);
transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.bk-date-native {
position: absolute;
z-index: 3;
inset: 0;
display: block;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: inherit;
background: transparent;
color: transparent;
-webkit-text-fill-color: transparent;
caret-color: transparent;
opacity: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.bk-date-native::-webkit-date-and-time-value {
color: transparent;
}
.bk-date-native::-webkit-calendar-picker-indicator {
opacity: 0;
}
.bk-date-display {
position: absolute;
z-index: 1;
top: 50%;
right: 48px;
left: 14px;
overflow: hidden;
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
transform: translateY(-50%);
}
.bk-date-display.is-placeholder {
color: var(--ink-mute);
}
/* 飾りのアイコン。クリックは受け取らせず、欄そのものに通す */
.bk-field .bk-date-trigger {
position: absolute;
z-index: 2;
top: 50%;
right: 2px;
display: grid;
place-items: center;
width: 44px;
height: 52px;
padding: 0;
color: var(--deep-teal-accessible);
background: transparent;
border: 0;
border-radius: 8px;
pointer-events: none;
margin: 0;
transform: translateY(-50%);
}
.bk-date-trigger svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.bk-input:focus,
.bk-select:focus,
.bk-textarea:focus {
background: #fff;
border-color: var(--champagne-gold);
box-shadow: 0 0 0 4px rgba(199, 164, 106, .16);
outline: none;
}
.bk-date-control:focus-within {
background: #fff;
border-color: var(--champagne-gold);
box-shadow: 0 0 0 4px rgba(199, 164, 106, .16);
}
.bk-date-native:focus {
border: 0;
background: transparent;
box-shadow: none;
outline: none;
}
.bk-error {
margin: 6px 2px 0;
color: #b42318;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.45;
}
.bk-error:empty { display: none; }
.bk-input.has-error,
.bk-select.has-error,
.bk-textarea.has-error,
.bk-date-control.has-error,
.bk-phone-row.has-error .bk-input,
.bk-phone-row.has-error .bk-select {
border-color: #b42318;
}
.bk-input.has-error:focus,
.bk-select.has-error:focus,
.bk-textarea.has-error:focus,
.bk-date-control.has-error:focus-within,
.bk-phone-row.has-error:focus-within .bk-input,
.bk-phone-row.has-error:focus-within .bk-select {
box-shadow: 0 0 0 3px rgba(180, 35, 24, .14);
}
.bk-phone-row {
display: grid;
grid-template-columns: 122px minmax(0, 1fr);
gap: 10px;
}
.bk-country-code {
padding-right: 8px;
white-space: nowrap;
}
.bk-textarea { min-height: 110px; resize: vertical; }
/* 規約への同意。チェックボックスは置かず、ボタンを押す行為で成立させる。
ボタンの直前に置いて、押す直前に目に入るようにする。 */
.bk-consent {
margin: 20px 0 12px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.6;
text-align: center;
text-wrap: balance;
}
.bk-consent a {
color: var(--deep-teal-accessible);
font-weight: normal;
text-decoration: underline;
text-underline-offset: 2px;
}
.bk-submit {
width: min(100%, 320px);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin: 26px auto 0;
border: 0;
border-radius: 12px;
color: #fff;
background: var(--deep-teal);
font-size: 16px;
font-weight: 700;
transition: filter 240ms ease, transform 240ms ease;
}
.bk-submit:hover { filter: brightness(1.08); }
.bk-submit:disabled { filter: none; opacity: .55; cursor: not-allowed; }
/* ---- 単独ページ（thanks.html）の土台。
送信直後に見る画面なので、白地にして静かに受け止める。
クリームは注記の面（.thanks-note）にだけ使う。
index.html のモーダルには影響させない。 ---- */
/* 縦のflexにして、フッターに margin-top:auto を持たせる。
内容が短ければフッターが画面下に沈み、長ければ押し下げられて被らない。
position:fixed は使わない（必ず内容に被るため）。
dvh はモバイルでURLバーの伸縮に追従させるための指定。 */
.booking-page {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 30px 18px 40px;
background: #fff;
}
.booking-page-logo {
display: block;
width: 118px;
margin: 0 auto 22px;
}
.booking-page-logo img { display: block; width: 100%; height: auto; }
/* モーダルではないので、カードとして浮かせない。
背景・影を外してページに溶かし、代わりに入力欄を白にして操作箇所を目立たせる。
index.html のモーダル側（暗い背景に白カード）には影響させない。 */
.booking-page .booking-card {
margin: 0 auto;
padding-left: 0;
padding-right: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.booking-page .booking-card h1 { margin-right: 0; }
.booking-page .bk-input,
.booking-page .bk-select,
.booking-page .bk-textarea,
.booking-page .bk-date-control { background: #fff; }
/* margin-top:auto で画面下へ。padding-top は内容が長いときの最低間隔。
auto は余白が無いと 0 に潰れるので、間隔は padding 側で担保する */
.booking-page-footer {
margin: auto auto 0;
padding-top: 40px;
color: var(--text-muted);
text-align: center;
font-size: 13px;
}
.booking-page-footer .links { margin-bottom: 16px; }
.booking-page-footer a { color: inherit; text-decoration: none; }
.booking-page-footer a:hover { text-decoration: underline; }
/* タグラインと著作権表記は分ける。1行に溶接すると、法務の文の事務的な調子が
タグライン側に流れて、ブランドの言葉が業種名のように読めてしまう */
.booking-page-footer .footer-tagline {
margin: 0 0 8px;
font-size: 13px;
letter-spacing: .02em;
}
.booking-page-footer .footer-copy {
margin: 0;
color: color-mix(in srgb, var(--text-muted) 70%, white);
font-size: 11px;
letter-spacing: .04em;
}
@media (min-width: 768px) {
.booking-page { padding: 48px 20px 56px; }
}
/* ---- サンクスページ（thanks.html）。formrun の送信後リダイレクト先。 ---- */
/* 送信直後の画面。白地に要素を少なく置くので、余白でゆとりを作る */
.thanks-card { text-align: center; padding-top: 28px; padding-bottom: 36px; }
/* 見出しは h1。h3 を指していたため当たっておらず、共通ルールの 8px が効いていた */
.thanks-card h1 { margin-bottom: 26px; }
.thanks-lead {
max-width: 480px;
margin: 0 auto 12px;
color: var(--text-muted);
font-size: 15px;
line-height: 1.9;
text-wrap: balance;
}
/* 「まだ確定ではない」の注記。本文と同じ大きさだと主文に埋もれるので一段落とす */
.thanks-lead-note {
max-width: 480px;
margin: 0 auto 34px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.7;
text-wrap: balance;
}
/* 連絡が来ないときの逃げ道。白地から少し沈めて「補足」だと分かるようにする */
.thanks-note {
max-width: 480px;
margin: 0 auto 30px;
padding: 18px 24px;
background: var(--warm-cream);
border-radius: 14px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.75;
text-wrap: pretty;
}
.thanks-note a { color: var(--deep-teal-accessible); font-weight: 700; }
/* 控えめな線のボタン。btn-primary（塗りティール）は使わない。
送信後なので次の行動を促す必要がなく、「戻れる」ことだけ静かに示す */
.thanks-back {
display: inline-flex;
min-height: 48px;
margin: 0 auto;
padding: 0 26px;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 10px;
background: transparent;
color: var(--text-muted);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color 240ms ease, color 240ms ease;
}
.thanks-back:hover {
border-color: var(--text-muted);
color: var(--text-primary);
}
@media (min-width: 768px) {
.thanks-card { padding-bottom: 48px; }
/* PCのみ見出しを大きく。SPで36pxにすると2行に割れて窮屈になるため28pxのまま */
.thanks-card h1 { font-size: 36px; }
}
/* formrun のスパム対策項目。画面にも読み上げにも出さない。 */
.bk-gotcha {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--border-strong);
outline-offset: 3px;
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: .48;
}
/* 会場名が長いページ用（FUNATSURU / Chinzanso / Luke）。
HTML側で
を手で入れて1行を短くしたうえで使う。 */
.venue-detail-page .visual-title h1.venue-title-compact {
font-size: clamp(28px, 4vw, 58px);
white-space: nowrap;
}
@media (max-width: 767px) {
.venue-detail-page .visual-title h1.venue-title-compact {
font-size: clamp(32px, 8.6vw, 38px);
}
}
@media (min-width: 768px) {
.wrap { width: calc(100% - 40px); }
.hero-image {
min-height: 600px;
height: calc(100svh - 200px);
max-height: none;
}
.topbar-inner { height: 88px; padding: 0 34px; }
.logo img { width: 134px; }
.btn-mini { gap: 8px; padding: 0 18px; }
.hero-overlay { left: clamp(34px, 8vw, 120px); right: auto; bottom: 92px; }
/* 横はセンター、縦は下から約10%の位置で見せる */
.hero-picture img { object-position: 50% 90%; }
.section { padding: 104px 0; }
.section.tight { padding: 72px 0; }
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.feature { display: block; padding: 32px 30px; border-bottom: 0; border-right: 1px solid var(--line); }
.feature:last-child { border-right: 0; }
.feature .icon { margin-bottom: 22px; }
.gallery {
grid-template-columns: 1.35fr .9fr;
grid-template-rows: repeat(2, minmax(0, 210px));
gap: 14px;
}
.gbox:nth-child(1) { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
.gbox:nth-child(2),
.gbox:nth-child(3) { aspect-ratio: auto; }
.gbox:nth-child(4) { display: none; }
.steps {
max-width: 900px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px 26px;
margin: 60px auto 0;
}
.step { grid-template-columns: 64px 1fr; gap: 0 18px; align-content: start; }
.step-image { height: auto; }
.role-band { max-width: 900px; margin: 46px auto 0; padding: 48px 48px 52px; }
.role-bestrate {
width: 86px;
}
.role-band-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
gap: 0 44px;
align-items: start;
}
.role-band h3,
.role-band p:not(.role-note) {
grid-column: 1;
max-width: 520px;
}
.role-media {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
margin-top: 0;
}
.role-note { max-width: none; }
.why-cards { max-width: 760px; margin: 54px auto 0; }
.why-card { padding: 22px 22px; }
.dest-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin: 54px 0 0; }
.dest-card { min-width: 0; }
.venues-grid-1, .venues-grid-2, .venues-grid-3, .venues-grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 16px; }
.venue-area-3 .venues-grid-1 {
grid-template-columns: minmax(280px, 440px);
justify-content: center;
}
.venue-name { font-size: 14px; }
.bm-container {
width: min(100%, 760px);
grid-template-columns: 230px minmax(0, 1fr);
gap: 28px;
align-items: stretch;
max-width: 880px;
margin-top: 54px;
}
.bm-filters { align-content: start; }
.bm-result {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
}
.bm-row-value { font-size: 20px; }
.bm-sgd .bm-row-value { white-space: nowrap; }
.contact-grid { grid-template-columns: 1fr 1fr; }
.sticky-cta { display: none; }
.footer { padding-bottom: 50px; }
.bk-row { grid-template-columns: 1fr 1fr; }
.booking-card { padding: 48px; }
}
/* PC: 1024px and above */
@media (min-width: 1024px) {
.wrap { width: min(calc(100% - 40px), 1020px); }
.contact-grid .btn-contact {
min-height: 70px;
}
.bm-container {
width: min(100%, 840px);
grid-template-columns: 250px minmax(0, 1fr);
gap: 44px;
max-width: 840px;
}
.bm-sgd .bm-row-value {
font-size: 24px;
white-space: nowrap;
}
.hero-image {
min-height: 600px;
height: calc(100svh - 200px);
max-height: none;
}
.section { padding: 96px 0; }
.section.tight { padding: 76px 0; }
h2 {
font-size: 44px;
}
body > section.section.surface-white:nth-of-type(4) {
padding-top: 64px;
padding-bottom: 84px;
}
.topbar-inner {
max-width: none;
padding-left: clamp(34px, 8vw, 120px);
padding-right: clamp(34px, 4vw, 58px);
}
.logo img {
width: 147px;
}
.lede.intro-message {
font-size: 15px !important;
}
.hero-title {
font-size: 70px;
}
.lede.intro-message,
.feature p,
.step-text p,
.role-band p,
.role-note,
.why-card p,
.support-list li,
.btn-primary,
.btn-contact {
font-size: 16px !important;
}
.lede.intro-message {
font-size: 15px !important;
}
.photo-section .lede {
font-size: 14px !important;
}
.role-band p {
font-size: 14px !important;
}
.dest-body p {
font-size: 13px !important;
}
.step-num .number {
font-size: 38px;
}
.step,
.step:last-child {
border-top: 0;
border-bottom: 0;
}
.section.destinations-section h2 {
font-size: 44px;
}
.dest-body h3 {
font-size: 25px;
}
.venues-area-head .count {
font-size: 13px;
}
.feature .translation-story,
.feature .estimate-story,
.feature .venue-story {
width: 120px;
height: 120px;
}
.dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-layout {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
gap: 56px;
align-items: center;
max-width: 920px;
margin: 54px auto 0;
}
.contact-visual {
max-width: none;
margin: 0;
}
.contact-actions .lede {
margin: 0;
text-align: left;
}
.contact-grid {
grid-template-columns: 1fr;
max-width: none;
margin: 30px 0 0;
}
.venues-grid-1, .venues-grid-2, .venues-grid-3, .venues-grid-4 {
grid-template-columns: repeat(4,minmax(0,1fr));
}
.venue-area-1 .venues-grid-4,
.venue-area-2 .venues-grid-3,
.venue-area-4 .venues-grid-1 {
grid-template-columns: repeat(3, minmax(0,1fr));
}
.venue-area-5 .venues-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Venue detail section-heading rhythm. */
.venue-detail-page .facts h2 {
margin-bottom: 32px;
}
.venue-detail-page .fact-list {
margin-top: 0;
}
.venue-detail-page .photo-heading,
.venue-detail-page .access-heading {
margin-bottom: 32px;
}
.venue-detail-page .facilities-inner h2 {
margin: 0 0 32px;
font-size: 24px;
letter-spacing: .5px;
}
.venue-detail-page .facilities-inner ul {
margin-top: 0;
}
.venue-detail-page .highlights h2 {
font-size: 16px;
}
.venue-detail-page .highlights li:last-child {
border-bottom: 0;
}
.venue-detail-page .facts {
border-bottom: 0;
}
.venue-detail-page .access-route {
padding: 0;
}
.venue-detail-page .facilities ul {
border-radius: 0;
}
.venue-detail-page .facilities li {
font-size: 13px;
}
.venue-detail-page .facilities li::after {
width: 14px;
height: 14px;
box-sizing: border-box;
content: "";
font-size: 0;
}
.venue-detail-page .facilities .yes::after {
content: "";
border: 1.5px solid currentColor;
border-radius: 50%;
background: none;
}
.venue-detail-page .facilities .no::after {
content: "";
border: 0;
background:
linear-gradient(45deg, transparent 44%, currentColor 44% 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, currentColor 44% 56%, transparent 56%);
}
.venue-detail-page .facility-key > span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.venue-detail-page .facility-key-symbol {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
box-sizing: border-box;
flex: 0 0 14px;
font-style: normal;
}
.venue-detail-page .facility-key-symbol.is-available {
border: 1.5px solid var(--blue);
border-radius: 50%;
}
.venue-detail-page .facility-key-symbol.is-unavailable::before,
.venue-detail-page .facility-key-symbol.is-unavailable::after {
position: absolute;
top: 6.25px;
left: 0;
width: 14px;
height: 1.5px;
content: "";
border-radius: 999px;
background: #8d8881;
}
.venue-detail-page .facility-key-symbol.is-unavailable::before {
transform: rotate(45deg);
}
.venue-detail-page .facility-key-symbol.is-unavailable::after {
transform: rotate(-45deg);
}
.venue-detail-page .closing-cta-note > span {
display: block;
}
@media (max-width: 767px) {
.venue-detail-page .facts {
padding: 38px 0 20px;
}
.venue-detail-page .venue-photo-section {
padding: 40px 20px 32px;
}
.venue-detail-page .access-section {
padding: 32px 20px 72px;
}
.venue-detail-page .facilities li {
font-size: 13px;
}
}
@media (min-width: 768px) {
.venue-detail-page .visual-title h1 {
font-size: clamp(42px, 4.8vw, 64px);
}
.venue-detail-page .about h2 {
font-size: 32px;
}
.venue-detail-page .photo-heading h2,
.venue-detail-page .access-heading h2,
.venue-detail-page .facilities-inner h2,
.venue-detail-page .closing-cta h2 {
font-size: 32px;
}
.venue-detail-page .highlights ul {
grid-template-columns: 1fr;
}
.venue-detail-page .photo-heading {
display: block;
margin-bottom: 48px;
text-align: center;
}
.venue-detail-page .venue-photo-section {
padding-bottom: 0;
}
.venue-detail-page .access-section {
padding-top: 100px;
}
.venue-detail-page .access-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.venue-detail-page .access-heading {
margin-bottom: 48px;
text-align: center;
}
.venue-detail-page .access-route {
margin-right: 48px;
}
.venue-detail-page .venue-map {
aspect-ratio: 4 / 3;
}
.venue-detail-page .facilities-section {
padding-top: 72px;
padding-bottom: 72px;
}
.venue-detail-page .facilities-inner > .eyebrow,
.venue-detail-page .facilities-inner h2 {
text-align: center;
}
.venue-detail-page .facilities-inner h2 {
margin-bottom: 48px;
}
.venue-detail-page .facilities li {
font-size: 16px;
}
.venue-detail-page .facility-key {
font-size: 13px;
}
.venue-detail-page .closing-cta .closing-cta-lede {
margin: 18px 0 48px;
}
.venue-detail-page .closing-cta .cta-button {
height: 70px;
min-width: min(360px, calc((100% - 12px) / 2));
}
.venue-detail-page .closing-support {
margin-top: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* ============== ACCESS: 鉄道ルート／車ルートの並記 ============== */
/* 会場に着くルートが2通りある会場で使う。鉄道を先に置く（インバウンドは鉄道利用が前提）。 */
.venue-detail-page .access-routes {
display: flex;
flex-direction: column;
}
.venue-detail-page .access-option,
.venue-detail-page .access-route-tail {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
/* ラベルの余白・文字サイズは .venue-tag に合わせる（色だけ teal 系） */
.venue-detail-page .access-option-label {
display: inline-flex;
min-height: 22px;
width: fit-content;
margin: 0 0 4px;
padding: 4px 8px;
align-items: center;
box-sizing: border-box;
border-radius: 999px;
background: var(--pale);
color: var(--teal);
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
line-height: 14px;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.venue-detail-page .access-option .access-route {
padding-top: 0;
}
/* 文字サイズと行間を詰める */
.venue-detail-page .access-route li {
padding: 12px 0;
}
.venue-detail-page .access-route strong {
font-size: 14px;
line-height: 1.35;
}
.venue-detail-page .access-route p {
margin-top: 3px;
line-height: 1.5;
}
@media (max-width: 767px) {
.venue-detail-page .access-option,
.venue-detail-page .access-route-tail {
margin-top: 14px;
padding-top: 14px;
}
}
/* ============== CTA下の注記（Zoom相談と日程調整の説明） ============== */
/* .bm-note と同じ見た目に揃える。既存の .final-cta p / .closing-cta p が
margin と color を上書きしてくるため、詳細度を上げてまとめて指定する。 */
.cta-note,
.final-cta .cta-note,
.venue-detail-page .closing-cta .cta-note {
max-width: 480px;
margin: 16px auto 0;
color: var(--ink-mute);
text-align: center;
font-size: 12px;
line-height: 1.55;
}
/* Hide the programmatic focus ring only when a touch opens the gallery. */
.venue-detail-page .lightbox.is-touch-open .lightbox-close:focus {
outline: none;
}