:root {
    --ink: #292c27;
    --muted: #67685f;
    --paper: #faf9f5;
    --cream: #efeee7;
    --gold: #92794f;
    --line: #d9d6ca;
    --serif: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    --sans: 'Noto Sans JP', sans-serif
}

* {
	margin: 0;
	padding: 0;
    box-sizing:border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top:110px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 16px/1.95 var(--sans);
    -webkit-font-smoothing:antialiased
}

img {
    display: block;
    max-width: 100%;
    height:auto
}

a {
    color: inherit;
    text-decoration:none
}

button, select {
    font:inherit
}

button, a, select {
    touch-action:manipulation
}

button {
    cursor:pointer
}

a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset:5px
}

h1, h2, h3, p, figure, dl, dd {
    margin:0
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.65;
    text-wrap:balance
}

p, dd {
    overflow-wrap:anywhere
}

h2 {
    font-size:clamp(1.75rem, 3vw, 2.7rem)
}

h3 {
    font-size:1.45rem
}

small, .footnote {
    font-size: .875rem;
    color: var(--muted);
    line-height:1.8
}

.phrase {
    display: inline-block;
    max-width:100%
}

.copy-line {
    display:block
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border:0
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: white;
    padding:10px
}

.skip-link:focus {
    top:10px
}

.section {
    padding:88px max(5vw, 24px)
}

.section > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right:auto
}

.eyebrow {
    font: 500 .75rem/1.7 var(--sans);
    letter-spacing: .2em;
    color: var(--gold);
    margin-bottom:15px
}

.section-heading, .compact-heading {
    text-align: center;
    margin-bottom:40px
}

.section-description, .compact-heading > p:last-child {
    margin-top: 18px;
    color:var(--muted)
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 17px 28px;
    min-height: 58px;
    line-height: 1.5;
    font-size: 1rem;
    transition:background .2s
}

.button-red, .header-cta {
    background: var(--ink);
    color:#fff
}

.button-red:hover, .header-cta:hover {
    background:#4b503f
}

.button-outline {
    border:1px solid currentColor
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--gold);
    padding: 8px 0;
    font-size:1rem
}

.text-link:hover {
    color: var(--gold)
}
/* A calm masthead, followed by four photographic introductions. */

.header {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 12px 5vw;
    background: #faf9f5f5;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
    min-height:94px
}

.brand img {
    width: 60px;
    height: 68px;
    object-fit:contain
}

.nav {
    margin-left: auto;
    display: flex;
    gap:26px
}

.nav a {
    font-size: .875rem;
    white-space:nowrap
}

.nav a:hover {
    color:var(--gold)
}

.header-actions {
    display: flex;
    align-items: center;
    gap:22px
}

.language select {
    background: transparent;
    border: 0;
    font-size: .875rem;
    color: var(--ink);
    min-height: 44px;
    max-width:100px
}

.header-cta {
    padding: 12px 22px;
    font-size: .875rem;
    white-space:nowrap
}

.audience-banner {
    padding: 17px 24px;
    background: var(--ink);
    color: #f9f7ee;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    line-height:1.8
}

.audience-banner > span:first-child {
    font: 500 1.05rem/1.7 var(--serif);
    letter-spacing:.06em
}

.audience-banner > span:last-child {
    font-size: .875rem;
    color:#e2dfd3
}

.benefits-overview {
    padding-top: 48px;
    padding-bottom: 62px;
    background:var(--paper)
}

.overview-heading {
    text-align: center;
    margin-bottom:34px
}

.overview-heading .eyebrow {
    margin-bottom:8px
}

.overview-heading h1 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    letter-spacing:.03em
}

.four-number {
    font: 400 1.45em/1 Georgia, serif;
    color: var(--gold);
    padding:0 .07em
}

.overview-heading > p:last-child {
    color: var(--muted);
    font-size: 1rem;
    margin-top:13px
}

.strength-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:24px
}

.strength {
    display: block;
    position: relative;
    min-width:0
}

.strength-photo {
    position: relative;
    aspect-ratio: 1.28;
    overflow: hidden;
    background:#e9e7df
}

.strength-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:transform 1.2s
}

.strength:hover .strength-photo img {
    transform:scale(1.04)
}

.strength:nth-child(4) .strength-photo img {
    object-fit:cover
}

.strength-number {
    position: absolute;
    left: 12px;
    bottom: 6px;
    color: #fff;
    font: 400 3rem/1.2 Georgia, serif;
    text-shadow:0 1px 12px #0005
}

.strength:nth-child(4) .strength-number {
    color: #6b5433;
    text-shadow:none
}

.strength-copy {
    padding: 18px 0 0;
    border-bottom: 1px solid var(--line);
    height: calc(100% -(100vw - 10vw - 72px) /4/1.28);
    min-height: 225px;
    position: relative;
    padding-bottom:40px
}

.strength h2 {
    font-size: clamp(1.13rem, 1.45vw, 1.45rem);
    line-height: 1.85;
    text-wrap:initial
}

.strength p {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--muted);
    margin-top:12px
}

.strength-more {
    position: absolute;
    bottom: 7px;
    right: 4px;
    color: var(--gold);
    font-size: 1.1rem
}
/* Large moving photographs retain their natural colour. */

.hero {
    position: relative;
    isolation: isolate;
    height: 630px;
    overflow: hidden;
    background: #20231e;
    color:white
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index:-3
}

.hero-photo.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 60%;
    opacity: 0;
    transform: scale(1.03);
    transition:opacity 1.6s ease, transform 8s linear
}

.hero-photo.active {
    opacity: 1;
    transform:scale(1.09)
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:linear-gradient(90deg, #101711c9, transparent 85%), linear-gradient(0deg, #14201b42, transparent 55%)
}

.hero-content {
    padding:76px max(7vw, 24px) 105px
}

.hero-story-card {
    max-width:750px
}

.hero-story {
    display:none
}

.hero-story.active {
    display:block
}

.hero-kicker {
    font-size: 1rem;
    line-height: 1.9;
    letter-spacing: .04em;
    margin-bottom:24px
}

.hero-title {
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    line-height: 1.9;
    letter-spacing: .035em;
    text-wrap:initial
}

.hero-title > span, .hero-title > strong {
    display:block
}

.hero-title > strong {
    font-weight: 500;
    color:#ead6b0
}

.hero-description {
    font-size: 1rem;
    line-height: 2;
    margin: 24px 0 30px;
    color:#f5f4ec
}

.hero .button {
    background: #faf9f51a;
    border: 1px solid #e7d7b7;
    color:white
}

.hero .button:hover {
    background:#faf9f530
}

.hero-side {
    position: absolute;
    right: 25px;
    top: 35px;
    writing-mode: vertical-rl;
    font-size: .75rem;
    letter-spacing:.2em
}

.slide-controls {
    position: absolute;
    bottom: 25px;
    right: 5vw;
    display: flex;
    align-items: center;
    gap:6px
}

.slide-dot {
    position: relative;
    background: none;
    border: 0;
    width: 36px;
    height:36px
}

.slide-dot:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background: #ffffff60;
    border-radius:50%
}

.slide-dot.selected:after {
    background:#fff
}

.slide-controls button:not(.slide-dot) {
    border: 1px solid #ffffff60;
    background: transparent;
    color: #fff;
    min-width: 42px;
    height: 40px;
    line-height:1
}

.slide-controls > span {
    font-size: .875rem;
    letter-spacing: .08em;
    margin-left: 12px
}
/* Cuisine is presented in generous, edge-to-edge photographic frames. */

.cuisine {
    background:#fff
}

.cuisine-heading {
    display: grid;
    grid-template-columns: .85fr 1.3fr;
    align-items: center;
    gap: 55px;
    margin-bottom:45px
}

.cuisine-introduction h2 {
    font-size:clamp(2rem, 3.3vw, 3.1rem)
}

.cuisine-introduction p:last-child {
    margin-top: 24px;
    color:var(--muted)
}

.cuisine-lead-photo {
    width: 100%;
    height: 430px;
    object-fit:cover
}

.food-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:30px 22px
}

.food {
    min-width:0
}

.food:nth-child(-n + 3) {
    grid-column:auto
}

.food-image {
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    background:#e9e7e0
}

.food-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:transform .8s
}

.food:hover img {
    transform:scale(1.035)
}

.food-title {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap:8px
}

.food-title h3 {
    font-size:1.08rem
}

.food-title > span {
    font: 400 .75rem var(--sans);
    color: var(--gold);
    letter-spacing:.05em
}

.menu-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top:32px
}

.menu-note p {
    font-size:1rem
}

.menu-note .text-link {
    flex-shrink:0
}

.memory-reel {
    background: var(--ink);
    color: #fff;
    padding: 35px 0 0;
    overflow:hidden
}

.reel-heading {
    display: flex;
    align-items: center;
    gap: 22px;
    padding:0 5vw 25px
}

.reel-heading .eyebrow {
    margin: 0;
    color:#c4ae88
}

.reel-heading > p:nth-child(2) {
    font-family: var(--serif);
    font-size:1.15rem
}

.reel-heading button {
    margin-left: auto;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #c2baa080;
    background: transparent;
    color:#fff
}

.reel-window {
    overflow:hidden
}

.reel-track {
    display: flex;
    width: max-content;
    animation:reel 20s linear infinite
}

.reel-group {
    display: flex;
    gap: 6px;
    padding-right:6px
}

.reel-group img {
    width: 360px;
    height: 235px;
    object-fit:cover
}

.reel-paused .reel-track, .memory-reel:hover .reel-track, .memory-reel:focus-within .reel-track {
    animation-play-state:paused
}

@keyframes reel {
    to {
        transform: translateX(-50%)
    }
}
/* Benefits, with the conditions separate from the overview. */

.comparison-section {
    background:#eeede5
}

.feature-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:30px
}

.feature-offer {
    background: #faf9f5;
    min-width:0
}

.offer-photo {
    position: relative;
    height: 320px;
    overflow:hidden
}

.offer-photo > img {
    width: 100%;
    height: 100%;
    object-fit:cover
}

.offer-two .offer-photo {
    background:#f7f4ec
}

.offer-two .offer-photo img {
    object-fit:contain
}

.image-caption {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: .75rem;
    padding: 2px 8px;
    background: #faf9f5e8;
    color:#68665b
}

.offer-content {
    padding:28px 34px 33px
}

.feature-threshold {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--gold);
    line-height: 1.2;
    margin-bottom:15px
}

.feature-threshold b {
    font:400 4rem/1 Georgia, serif
}

.feature-threshold span {
    font-size:1.15rem
}

.offer-content h3 {
    font-size: 1.8rem;
    line-height:1.6
}

.offer-content h3 em {
    font-style:normal
}

.offer-content > p:not(.feature-threshold) {
    margin-top: 15px;
    color: var(--muted);
    font-size:1rem
}

.offer-content .offer-highlight {
    font-weight: 500;
    color:var(--ink) !important
}

.offer-three {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns:1fr 1fr
}

.offer-three .offer-photo {
    height: 100%;
    min-height: 300px;
    background:#fff
}

.offer-three .offer-photo img {
    object-fit:contain
}

.feature-guide {
    font-family:var(--serif)
}

.offer-three .offer-content {
    align-self:center
}

.compact-booking {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    margin-top:10px
}

.compact-booking > div > strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size:1.3rem
}

.compact-booking p {
    font-size: .875rem;
    color: var(--muted);
    margin-top:7px
}

.compact-booking > a {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-size: .875rem;
    text-align:right
}

.compact-booking > a > strong {
    font-size: 1.3rem;
    font-weight:500
}

.compact-booking b {
    font: 400 2.2rem Georgia, serif;
    padding-right:4px
}

.custom-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 46px;
    margin:50px auto 20px
}

.custom-compact > img {
    width: 100%;
    height: 330px;
    object-fit:cover
}

.custom-compact h3 {
    font-size: 1.75rem;
    line-height:1.75
}

.custom-compact h3 strong {
    font-weight:500
}

.custom-compact p {
    font-size: 1rem;
    color: var(--muted);
    margin-top:15px
}

.custom-compact .text-link {
    margin-top: 15px
}
/* Practical information has less visual weight than the food and benefits. */

.compact-support {
    background:var(--paper)
}

.support-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 55px;
    align-items:start
}

.support-image > img {
    width: 100%;
    height: 380px;
    object-fit:cover
}

.support-image figcaption {
    padding:24px 0
}

.support-image h3 {
    font-size: 1.4rem;
    margin-bottom:12px
}

.support-image p {
    font-size: 1rem;
    color:var(--muted)
}

.service-list > div {
    padding: 18px 0;
    border-bottom:1px solid var(--line)
}

.service-list > div:first-child {
    padding-top:0
}

.service-list dt {
    font: 500 1.15rem/1.75 var(--serif);
    margin-bottom:5px
}

.service-list dt br {
    display:none
}

.service-list dd {
    font-size: 1rem;
    color: var(--muted);
    line-height:1.9
}

.planning-detail {
    margin-top: 40px;
    border-top: 1px solid var(--line);
    padding-top:35px
}

.planning-heading {
    background: #eeeee8;
    padding:22px 28px
}

.planning-heading .eyebrow {
    margin-bottom:5px
}

.planning-heading h3 {
    font-size:1.4rem
}

.planning-detail dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding:25px 0
}

.planning-detail dt {
    font: 500 1.13rem/1.8 var(--serif);
    margin-bottom:8px
}

.planning-detail dd {
    font-size: 1rem;
    color:var(--muted)
}

.takeout-band {
    display: grid;
    grid-template-columns: .75fr 1fr;
    gap: 45px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 35px;
    margin-top:15px
}

.takeout-band figure > img {
    width: 100%;
    height: 230px;
    object-fit:cover
}

.takeout-band figcaption {
    font-size: .875rem;
    color: var(--muted);
    margin-top:6px
}

.takeout-band h3 {
    font-size: 1.55rem;
    margin-bottom:15px
}

.takeout-band p {
    color: var(--muted);
    margin-bottom:12px
}

.compact-support > .footnote {
    margin-top: 24px
}

.local-drinks {
    background:#e8e7df
}

.local-drinks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width:1000px
}

.local-drinks-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit:cover
}

.local-drinks-grid h3 {
    font-size: 1.25rem;
    margin-top:17px
}

.local-drinks-grid p {
    font-size: 1rem;
    color: var(--muted);
    margin-top:8px
}

.local-drinks > .button {
    display: flex;
    width: fit-content;
    margin:32px auto 20px
}

.local-drinks > .footnote {
    text-align: center
}
/* Supplied product artwork remains intact. */

.souvenir-new {
    background:#fff
}

.souvenir-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    align-items:start
}

.thermos > img {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit:cover
}

.thermos figcaption {
    padding:20px 0
}

.goods-tag {
    display: inline-block;
    border: 1px solid #b7aa8c;
    padding: 2px 10px;
    font-size: .875rem;
    margin-bottom: 10px;
    color:#6e5d3e
}

.thermos h3 {
    font-size:1.3rem
}

.thermos p {
    color: var(--muted);
    margin-top:8px
}

.sticker-example > h3 {
    font-size: 1.2rem;
    margin-bottom:12px
}

.sticker-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px
}

.sticker-pair img {
    width: 100%;
    aspect-ratio: 1;
    object-fit:contain
}

.sticker-example > p {
    margin-top: 12px;
    font-size:.875rem
}

.sticker-example small {
    display: block;
    margin-top:5px
}

.more-goods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top:28px
}

.goods-image-frame {
    background: #faf8f1;
    height:380px
}

.goods-image-frame img {
    width: 100%;
    height: 100%;
    object-fit:contain
}

.more-goods figcaption {
    font-size: 1rem;
    padding:12px 0
}

.keychain-examples {
    margin-top: 35px;
    border-top: 1px solid var(--line);
    padding-top: 35px;
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 20px 35px;
    align-items:center
}

.keychain-heading h3 {
    font-size:1.4rem
}

.keychain-heading p {
    color: var(--muted);
    margin-top:12px
}

.keychain-gallery img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    background:#242320
}

.keychain-gallery figcaption {
    font-size: .875rem;
    margin-top: 8px;
    color:var(--muted)
}

.keychain-examples > .footnote {
    grid-column: 1/-1;
    width: 100%
}

.destination {
    background: var(--ink);
    color:#fff
}

.destination .eyebrow {
    color:#cdb996
}

.destination-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:30px
}

.destination-grid article > img {
    width: 100%;
    height: 340px;
    object-fit:cover
}

.destination-grid article > div {
    padding:25px 0
}

.destination-grid .eyebrow {
    margin-bottom:8px
}

.destination-grid h3 {
    font-size: 1.65rem;
    margin-bottom:8px
}

.destination-grid p {
    color:#e6e6dc
}

.destination-grid strong {
    font-weight:500
}

.compact-access {
    background:var(--paper)
}

.access-map-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap:45px
}

.access-store-photo {
    width: 100%;
    height: 270px;
    object-fit:cover
}

.access-map-grid dl {
    margin:20px 0
}

.access-map-grid dl > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 15px;
    margin-bottom: 12px;
    font-size:1rem
}

.access-map-grid dt {
    color:var(--muted)
}

.access-map-grid iframe {
    width: 100%;
    height: 100%;
    min-height: 470px;
    border: 0;
    filter: saturate(.65)
}

.contact {
    background: #252b25;
    color: #f9f8f1;
    text-align: center;
    position:relative
}

.contact > .eyebrow {
    color:#cdb996
}

.compact-signature {
    font: 400 clamp(1.55rem, 2.8vw, 2.3rem) /1.9 var(--serif);
    letter-spacing: .04em;
    max-width: 880px;
    margin-bottom:38px
}

.contact-pre {
    font-size: 1rem;
    color: #d3c6ad;
    margin-bottom:14px
}

.contact h2 {
    font-size:clamp(1.5rem, 2.5vw, 2.1rem)
}

.contact-small-party {
    font-size: 1rem;
    margin-top: 18px;
    color:#e1e0d4
}

.contact > p[data-i18n=contactText] {
    font-size: 1rem;
    max-width: 800px;
    margin-top: 12px;
    color:#cfd3c9
}

.instagram-contact {
    background: #f9f8f1;
    color: var(--ink);
    padding: 32px 30px;
    max-width: 760px;
    margin:35px auto 30px
}

.instagram-contact > img {
    margin: 0 auto 12px;
    width: 30px;
    height:30px
}

.instagram-contact h3 > span {
    display: block;
    font-size:1rem
}

.instagram-contact h3 > strong {
    display: block;
    font-size: 1.45rem;
    font-weight:500
}

.instagram-contact h3 b {
    font: 400 2.8rem Georgia, serif;
    margin-right:5px
}

.instagram-contact p {
    font-size: 1rem;
    line-height: 1.9;
    margin: 18px 0;
    color:var(--muted)
}

.instagram-contact p strong {
    font-weight:500
}

.instagram-contact .button {
    background: var(--ink);
    margin-top:5px
}

.instagram-account {
    display: block;
    font-size: .875rem;
    color: var(--muted);
    margin-top:12px
}

.phone {
    font: 400 2.4rem/1.5 Georgia, serif;
    display:block
}

.phone > span {
    font: 400 .875rem var(--sans);
    margin-right:12px
}

.phone-hours {
    color: #cdd1c6;
    font-size: .875rem;
    margin-top:5px
}

.contact-links {
    margin-top:25px
}

.contact .button-outline {
    font-size: .875rem;
    border-color: #878d7c;
    min-height:48px
}

footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 38px 5vw;
    font-size: .875rem;
    background:#f4f3ed
}

.footer-brand img {
    width: 60px;
    height: 74px;
    object-fit: contain;
    margin:auto
}

.footer-brand > span {
    display: block;
    font-size: .75rem;
    letter-spacing: .12em;
    margin-top:8px
}

.footer-information {
    display: flex;
    gap:25px
}

.back-top {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    display: grid;
    place-items:center
}

.photo-credits {
    padding: 12px 5vw 22px;
    background: #f4f3ed;
    font-size: .75rem;
    color:var(--muted)
}

.photo-credits p {
    margin-top: 10px;
    max-width:1100px
}

.photo-credits a {
    text-decoration:underline
}

.photo-credits summary {
    cursor: pointer;
    width:fit-content
}

.mobile-bar {
    display: none
}

@media (min-width: 1500px) {
    .strength-copy {
        height: auto;
        min-height: 230px
    }
}

@media (max-width: 1100px) {
    .header {
        gap:18px
    }

    .nav {
        gap:15px
    }

    .header-actions {
        gap:10px
    }

    .nav a {
        font-size:.875rem
    }

    .header-cta {
        padding:10px 14px
    }

    .strength-grid {
        gap:18px
    }

    .strength-copy {
        min-height: 275px;
        height:auto
    }

    .strength h2 {
        font-size:1.2rem
    }

    .food-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .cuisine-heading {
        gap:30px
    }

    .cuisine-lead-photo {
        height:390px
    }

    .support-layout {
        gap:30px
    }

    .goods-image-frame {
        height: 300px
    }
}

@media (max-width: 820px) {
    .nav {
        display:none
    }

    .header-actions {
        margin-left:auto
    }

    .audience-banner {
        display: block;
        text-align:center
    }

    .audience-banner > span {
        display:block
    }

    .audience-banner > span:last-child {
        margin-top:6px
    }

    .strength-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:28px 24px
    }

    .strength-copy {
        min-height:225px
    }

    .strength h2 {
        font-size:1.35rem
    }

    .hero {
        min-height:610px
    }

    .cuisine-heading {
        grid-template-columns: 1fr;
        gap:28px
    }

    .cuisine-introduction {
        max-width:650px
    }

    .cuisine-lead-photo {
        height: auto;
        aspect-ratio:1.6
    }

    .cuisine-introduction p br {
        display:none
    }

    .cuisine-introduction p {
        max-width:580px
    }

    .feature-benefits {
        gap:20px
    }

    .offer-photo {
        height:250px
    }

    .offer-content {
        padding:24px
    }

    .offer-content h3 {
        font-size:1.5rem
    }

    .custom-compact {
        gap:28px
    }

    .custom-compact h3 {
        font-size:1.45rem
    }

    .support-layout {
        grid-template-columns:1fr
    }

    .support-image {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        align-items:center
    }

    .support-image > img {
        height:250px
    }

    .support-image figcaption {
        padding:0
    }

    .planning-detail dl {
        gap:20px
    }

    .takeout-band {
        gap:25px
    }

    .souvenir-feature {
        gap:25px
    }

    .more-goods {
        gap:25px
    }

    .access-map-grid {
        gap:25px
    }

    .destination-grid article > img {
        height:260px
    }

    footer {
        flex-wrap:wrap
    }

    .footer-information {
        gap:15px
    }

    .reel-heading {
        flex-wrap: wrap;
        gap:5px 20px
    }

    .reel-heading > .eyebrow {
        width:100%
    }

    .reel-group img {
        width: 300px;
        height: 210px
    }
}

@media (max-width: 600px) {
    html {
        scroll-padding-top:88px
    }

    body {
        padding-bottom:64px
    }

    .header {
        padding: 8px 18px;
        min-height:79px
    }

    .brand img {
        width: 49px;
        height:60px
    }

    .header-actions {
        gap:11px
    }

    .language select {
        max-width: 83px;
        font-size:.875rem
    }

    .header-cta {
        font-size: .875rem;
        padding:11px 12px
    }

    .audience-banner {
        padding:17px 20px
    }

    .audience-banner > span:first-child {
        font-size:1.13rem
    }

    .audience-banner > span:last-child {
        font-size: .875rem;
        line-height:1.85
    }

    .section {
        padding:55px 22px
    }

    .eyebrow {
        font-size: .75rem;
        margin-bottom: 12px;
        letter-spacing:.14em
    }

    .section-heading, .compact-heading {
        margin-bottom:28px
    }

    h2 {
        font-size: 1.8rem;
        line-height:1.7
    }

    h3 {
        font-size:1.3rem
    }

    .section-description {
        font-size: 1rem;
        line-height:1.85
    }

    .benefits-overview {
        padding:32px 18px 40px
    }

    .overview-heading {
        margin-bottom:24px
    }

    .overview-heading h1 {
        font-size: 1.55rem;
        letter-spacing:0
    }

    .overview-heading h1 > .phrase:first-child {
        display:block
    }

    .overview-heading > p:last-child {
        font-size: .9375rem;
        margin-top: 12px;
        max-width:290px
    }

    .strength-grid {
        gap:24px 16px
    }

    .strength-photo {
        aspect-ratio:1.05
    }

    .strength-number {
        font-size: 2.5rem;
        left: 9px;
        bottom:3px
    }

    .strength-copy {
        height: auto;
        min-height: 268px;
        padding-top: 12px;
        padding-bottom:32px
    }

    .strength h2 {
        font-size: 1.04rem;
        line-height: 1.85;
        letter-spacing:-.025em
    }

    .strength p {
        font-size: 1rem;
        line-height: 1.8;
        margin-top:10px
    }

    .strength-more {
        bottom:5px
    }

    .hero {
        min-height:580px
    }

    .hero-content {
        padding:50px 24px 92px
    }

    .hero-kicker {
        font-size: .875rem;
        margin-bottom: 23px;
        line-height:1.9
    }

    .hero-title {
        font-size: clamp(1.18rem, 5.1vw, 1.75rem);
        line-height: 2.05;
        letter-spacing:0
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.95;
        margin:24px 0
    }

    .hero .button {
        font-size: .9375rem;
        padding: 15px 18px;
        min-height:54px
    }

    .hero-photo.slide {
        object-position:60% 50%
    }

    .hero-shade {
        background:linear-gradient(90deg, #111b15b8, #111b1555), linear-gradient(0deg, #111b1544, transparent)
    }

    .hero-side {
        right: 9px;
        top: 25px;
        font-size: .75rem;
        letter-spacing:.1em
    }

    .slide-controls {
        left: 18px;
        right: 18px;
        bottom: 18px;
        justify-content: center;
        gap:2px
    }

    .cuisine-heading {
        gap: 25px;
        margin-bottom:28px
    }

    .cuisine-introduction h2 {
        font-size:2rem
    }

    .cuisine-introduction p:last-child {
        margin-top: 16px;
        font-size:1rem
    }

    .cuisine-lead-photo {
        aspect-ratio: 1.25;
        width: calc(100% + 44px);
        max-width: none;
        margin-left:-22px
    }

    .food-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:23px 15px
    }

    .food-title {
        display: block;
        padding: 10px 0;
        min-height:55px
    }

    .food-title h3 {
        font-size: 1rem;
        line-height:1.7
    }

    .food-title > span {
        display:none
    }

    .menu-note {
        display: block;
        margin-top:26px
    }

    .menu-note > .text-link {
        margin-top: 12px;
        font-size:.9375rem
    }

    .reel-heading {
        padding:0 22px 20px
    }

    .reel-heading > p:nth-child(2) {
        font-size: 1rem;
        max-width:255px
    }

    .reel-group img {
        width: 240px;
        height:180px
    }

    .feature-benefits {
        grid-template-columns: 1fr;
        gap:24px
    }

    .offer-photo {
        height: auto;
        aspect-ratio:1.4
    }

    .offer-content {
        padding:24px
    }

    .feature-threshold b {
        font-size:3.6rem
    }

    .feature-threshold span {
        font-size:1.13rem
    }

    .offer-content h3 {
        font-size:1.55rem
    }

    .offer-content > p:not(.feature-threshold) {
        margin-top:12px
    }

    .offer-three {
        display:block
    }

    .offer-three .offer-photo {
        min-height: 0;
        height: 255px;
        aspect-ratio:auto
    }

    .compact-booking {
        display: block;
        padding:25px 0
    }

    .compact-booking > div > strong {
        font-size:1.2rem
    }

    .compact-booking p {
        font-size:1rem
    }

    .compact-booking > a {
        margin-top: 20px;
        text-align: left;
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
        white-space:normal
    }

    .compact-booking > a > strong {
        font-size:1.15rem
    }

    .custom-compact {
        display: block;
        margin-top:32px
    }

    .custom-compact > img {
        height:230px
    }

    .custom-compact > div {
        padding-top:22px
    }

    .custom-compact h3 {
        font-size:1.6rem
    }

    .custom-compact h3 br {
        display:none
    }

    .support-image {
        display:block
    }

    .support-image > img {
        height: auto;
        aspect-ratio:1.25
    }

    .support-image figcaption {
        padding:20px 0 0
    }

    .support-image h3 {
        font-size:1.3rem
    }

    .service-list dt {
        font-size:1.08rem
    }

    .planning-detail {
        margin-top: 32px;
        padding-top:28px
    }

    .planning-heading {
        padding:20px
    }

    .planning-heading h3 {
        font-size:1.2rem
    }

    .planning-detail dl {
        grid-template-columns: 1fr;
        gap: 21px;
        padding:24px 0
    }

    .planning-detail dt {
        font-size: 1.08rem;
        margin-bottom:4px
    }

    .takeout-band {
        display: block;
        padding-top:28px
    }

    .takeout-band figure {
        margin-bottom:20px
    }

    .takeout-band figure > img {
        height: auto;
        aspect-ratio:1.5
    }

    .takeout-band h3 {
        font-size:1.4rem
    }

    .local-drinks-grid {
        gap: 20px 14px;
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .local-drinks-grid h3 {
        font-size:1.05rem
    }

    .local-drinks-grid p {
        font-size: 1rem;
        line-height:1.85
    }

    .local-drinks > .button {
        font-size: .9375rem;
        padding:16px 17px
    }

    .souvenir-feature {
        grid-template-columns: 1fr;
        gap:25px
    }

    .thermos figcaption {
        padding-bottom:0
    }

    .thermos h3 {
        font-size:1.2rem
    }

    .more-goods {
        gap: 20px;
        grid-template-columns:1fr
    }

    .goods-image-frame {
        height: auto;
        aspect-ratio:1.15
    }

    .more-goods figcaption {
        font-size:1rem
    }

    .keychain-examples {
        display: block;
        margin-top: 26px;
        padding-top:26px
    }

    .keychain-gallery {
        margin-top:20px
    }

    .keychain-gallery img {
        max-height:none
    }

    .keychain-examples > .footnote {
        margin-top:15px
    }

    .destination-grid {
        grid-template-columns: 1fr;
        gap:22px
    }

    .destination-grid article > img {
        height: auto;
        aspect-ratio:1.5
    }

    .destination-grid article > div {
        padding:19px 0 0
    }

    .destination-grid h3 {
        font-size:1.4rem
    }

    .access-map-grid {
        grid-template-columns:1fr
    }

    .access-store-photo {
        height: auto;
        aspect-ratio:1.4
    }

    .access-map-grid dl > div {
        grid-template-columns: 74px 1fr;
        gap: 10px;
        font-size:1rem
    }

    .access-map-grid iframe {
        height: 300px;
        min-height:0
    }

    .compact-signature {
        font-size: 1.55rem;
        letter-spacing: 0;
        margin-bottom: 35px;
        line-height:1.9
    }

    .contact h2 {
        font-size:1.55rem
    }

    .contact > p[data-i18n=contactText] br {
        display:none
    }

    .instagram-contact {
        padding: 27px 20px;
        margin-top:27px
    }

    .instagram-contact p {
        font-size: 1rem;
        line-height:1.9
    }

    .instagram-contact p br {
        display:none
    }

    .instagram-contact h3 > strong {
        font-size:1.3rem
    }

    .instagram-contact .button {
        font-size: .9375rem;
        padding: 16px 12px;
        gap:12px
    }

    .phone {
        font-size:2rem
    }

    .contact-links {
        margin-top:20px
    }

    footer {
        padding: 30px 22px;
        gap: 22px;
        font-size:.875rem
    }

    .footer-information {
        width: 100%;
        gap: 12px;
        flex-wrap:wrap
    }

    .footer-brand img {
        width:52px
    }

    .photo-credits {
        padding:10px 22px 25px
    }

    .mobile-bar {
        display: grid;
        grid-template-columns: 1fr 1.6fr;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 40;
        min-height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--ink);
        box-shadow:0 -1px 0 #fff4
    }

    .mobile-bar > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px;
        font-size: .875rem;
        line-height: 1.6;
        color: white;
        min-height:64px
    }

    .mobile-phone {
        border-right:1px solid #8a8b7a
    }

    .mobile-instagram {
        background: #eeebe0 !important;
        color:var(--ink) !important
    }

    .mobile-instagram b {
        font-weight:500
    }

    .mobile-instagram img {
        width: 23px;
        height: 23px
    }
}

@media (max-width: 360px) {
    .header {
        padding-left: 12px;
        padding-right:12px
    }

    .header-cta {
        padding: 10px 8px;
        font-size:.8125rem
    }

    .header-actions {
        gap:5px
    }

    .strength-grid {
        gap:20px 12px
    }

    .strength h2 {
        font-size:1rem
    }

    .strength-copy {
        min-height:300px
    }

    .strength p {
        font-size:1rem
    }

    .overview-heading h1 {
        font-size:1.4rem
    }

    .hero-content {
        padding-left: 19px;
        padding-right:19px
    }

    .hero-title {
        font-size:1.13rem
    }

    .section {
        padding-left: 18px;
        padding-right:18px
    }

    .cuisine-lead-photo {
        margin-left: -18px;
        width: calc(100% + 36px)
    }
}

html:not([lang=ja]) .strength h2 {
    font-size: 1.25rem;
    line-height:1.65
}

html:not([lang=ja]) .strength-copy {
    height: auto;
    min-height:280px
}

html:not([lang=ja]) .hero-title {
    line-height:1.65
}

html:not([lang=ja]) .hero-title > span, html:not([lang=ja]) .hero-title > strong {
    margin-bottom:12px
}

html:not([lang=ja]) .hero-story-card {
    max-width:880px
}

@media (max-width: 600px) {
    html:not([lang=ja]) .strength h2 {
        font-size:1.05rem
    }

    html:not([lang=ja]) .strength-copy {
        min-height:315px
    }

    html:not([lang=ja]) .hero-title {
        font-size:1.6rem
    }

    html:not([lang=ja]) .audience-banner > span:first-child {
        font-size:1rem
    }

    html:not([lang=ja]) .header-cta {
        font-size: .8125rem;
        white-space: normal;
        max-width: 120px;
        line-height:1.5
    }

    html:not([lang=ja]) .contact h2 {
        font-size: 1.45rem
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior:auto
    }

    *, *:before, *:after {
        animation: none !important;
        transition:none !important
    }

    .reel-window {
        overflow-x:auto
    }

    .reel-track {
        width:max-content
    }

    .reel-group[aria-hidden=true] {
        display:none
    }

    .hero-photo.slide {
        transform: none
    }
}

.strength {
    display: flex;
    flex-direction:column
}

.strength-photo {
    flex-shrink:0
}

.strength-copy {
    flex: 1;
    height: auto;
    min-height:0 !important
}

.strength-grid {
    align-items:stretch
}

.offer-one .offer-photo img {
    object-position: 35% center
}

.offer-three .offer-photo img {
    object-fit: cover;
    object-position: center top
}