@charset "utf-8";
/* ========================================================================== 
   topics-lexton.css | 2026–2027 忘新年会プラン
   topics-base.css と併用。記事本文 .lexton 内だけに適用する。
   ========================================================================== */

.lexton {
  --lx-ink: #242b2a;
  --lx-muted: #63706b;
  --lx-accent: #8b4939;
  --lx-gold: #b39a6a;
  --lx-line: #e6e5df;
  --lx-soft: #f5f5f1;
  --lx-white: #fff;
  color: var(--lx-ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.85;
  text-align: left;
  overflow-wrap: anywhere;
  min-width: 0;
}
.lexton, .lexton * { box-sizing: border-box; }
.lexton :where(h2, h3, h4, p, ul, dl, dt, dd) { margin-top: 0; }
.lexton :where(img) { max-width: 100%; }
.lexton :where(a) { text-decoration-skip-ink: auto; }
.lexton :where(a:focus-visible) { outline: 3px solid #bf805a; outline-offset: 4px; }
.lexton .lexton-section-en { margin: 0 0 5px; color: var(--lx-accent); font: 600 11px/1.4 Georgia, serif; letter-spacing: .17em; }

/* Hero — visual emphasis through typography, not flyer text in images */
.lexton .lexton-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(42px, 7vw, 82px) clamp(18px, 6vw, 70px) 42px;
  margin: 0 0 50px;
  background: #f3f1eb;
  text-align: center;
  overflow: hidden;
}
.lexton .lexton-hero::before,
.lexton .lexton-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.lexton .lexton-hero::before { width: 240px; height: 240px; border: 1px solid #d5ccbd; border-radius: 50%; top: -125px; right: -95px; }
.lexton .lexton-hero::after { width: 180px; height: 180px; border: 1px solid #d5ccbd; border-radius: 50%; left: -105px; bottom: 30px; }
.lexton .lexton-hero-eyebrow { margin: 0 0 22px; color: #756d5e; font: 600 11px/1.6 Georgia, serif; letter-spacing: .19em; }
.lexton .lexton-hero-label { margin: 0 0 8px; color: #756d5e; font-size: 14px; letter-spacing: .13em; }
.lexton .lexton-hero-title { margin: 0; font-size: clamp(31px, 5.3vw, 56px); font-weight: 700; line-height: 1.5; letter-spacing: .09em; color: #242b2a; }
.lexton .lexton-hero-title span { color: var(--lx-accent); }
.lexton .lexton-hero-lead { max-width: 650px; margin: 24px auto 28px; font-size: 15px; line-height: 2.05; }
.lexton .lexton-period { display: inline-block; max-width: 100%; padding: 16px 28px; background: #fff; border: 1px solid #e4dfd4; }
.lexton .lexton-period-label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: #76674f; }
.lexton .lexton-period p { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0; font-size: clamp(17px, 2.7vw, 23px); font-weight: 700; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.lexton .lexton-period-separator { color: #b2a998; }
.lexton .lexton-period small { display: block; margin-top: 3px; color: #685e51; font-size: 12px; }

/* Facility index */
.lexton .lexton-index { max-width: 980px; margin: 0 auto 70px; }
.lexton .lexton-index-heading { margin-bottom: 17px; text-align: center; }
.lexton .lexton-index-heading h2 { margin: 0; font-size: 23px; line-height: 1.5; }
.lexton .lexton-index-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.lexton .lexton-index-list li { min-width: 0; margin: 0; }
.lexton .lexton-index-list a { display: flex; min-height: 90px; flex-direction: column; justify-content: space-between; gap: 5px; padding: 13px 14px; border: 1px solid #d9d9d2; color: #303937; background: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s; }
.lexton .lexton-index-list a:hover { background: #f6f4ed; border-color: var(--lx-gold); transform: translateY(-2px); }
.lexton .lexton-index-number { color: var(--lx-accent); font: 700 12px/1 Georgia, serif; }
.lexton .lexton-index-arrow { align-self: flex-end; color: #8a8172; font-size: 18px; line-height: 1; }

/* Venue chapters */
.lexton .lexton-venue { max-width: 1080px; margin: 0 auto 80px; scroll-margin-top: 95px; }
.lexton .lexton-venue + .lexton-venue { padding-top: 54px; border-top: 1px solid var(--lx-line); }
.lexton .lexton-venue-heading { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 27px; }
.lexton .lexton-venue-number { color: #c8c0b2; font: 400 clamp(45px, 6vw, 72px)/1 Georgia, serif; letter-spacing: -.07em; }
.lexton .lexton-venue-heading-body { min-width: 0; }
.lexton .lexton-venue-heading h2 { margin: 0 0 8px; color: #222b28; font-size: clamp(23px, 3vw, 30px); line-height: 1.4; letter-spacing: .045em; }
.lexton .lexton-venue-description { margin: 0; color: #5c6560; font-size: 14px; line-height: 1.9; }

/* Dish cards */
.lexton .lexton-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lexton .lexton-menu-card { min-width: 0; margin: 0; background: #fff; border: 1px solid #e4e4dd; overflow: hidden; }
.lexton .lexton-menu-photo { aspect-ratio: 4 / 3; background: #f2f0e9; overflow: hidden; }
.lexton .lexton-menu-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lexton .lexton-menu-info { padding: 16px 15px 18px; }
.lexton .lexton-menu-info h3 { min-height: 3em; margin: 0 0 14px; color: #26302d; font-size: 16px; font-weight: 700; line-height: 1.5; }
.lexton .lexton-menu-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; border-top: 1px solid #efeee8; padding-top: 10px; }
.lexton .lexton-menu-price strong { color: var(--lx-accent); font-size: clamp(23px, 2.7vw, 30px); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lexton .lexton-menu-price strong span { font-size: 15px; }
.lexton .lexton-menu-price small { color: #69706c; font-size: 12px; }

/* A/B drink comparison */
.lexton .lexton-drink { margin-top: 22px; padding: 23px 25px 25px; background: var(--lx-soft); }
.lexton .lexton-drink-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lexton .lexton-drink-heading h3 { margin: 0; font-size: 18px; line-height: 1.5; }
.lexton .lexton-drink-duration { flex: none; padding: 5px 11px; border-radius: 30px; background: #fff; color: #555e58; font-size: 12px; font-weight: 700; }
.lexton .lexton-drink-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lexton .lexton-drink-option { min-width: 0; padding: 16px 17px; border: 1px solid #e3e2dc; background: #fff; }
.lexton .lexton-drink-option-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.lexton .lexton-drink-option h4 { margin: 0; font-size: 15px; }
.lexton .lexton-drink-option h4 span { margin-right: 3px; color: var(--lx-accent); font-size: 21px; }
.lexton .lexton-drink-option-top p { margin: 0; color: var(--lx-accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.lexton .lexton-drink-option-top strong { font-size: 21px; }
.lexton .lexton-drink-option-top small { color: #6b716d; font-size: 11px; }
.lexton .lexton-drink-description { margin: 0; color: #515c56; font-size: 13px; line-height: 1.85; }
.lexton .lexton-photo-note { margin: 11px 0 0; color: #757b76; font-size: 12px; line-height: 1.7; }

/* Premium teppanyaki */
.lexton .lexton-venue-premium { border-top: 1px solid var(--lx-line); padding-top: 54px; }
.lexton .lexton-premium-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #26312d; color: #fff; }
.lexton .lexton-premium-photo { min-height: 280px; }
.lexton .lexton-premium-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.lexton .lexton-premium-info { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 42px); }
.lexton .lexton-premium-tag { align-self: flex-start; margin-bottom: 13px; padding: 3px 10px; border: 1px solid #c6b796; color: #f0dfb7; font-size: 12px; }
.lexton .lexton-premium-info h3 { margin: 0 0 7px; font-size: clamp(21px, 2.6vw, 29px); line-height: 1.5; }
.lexton .lexton-premium-subtitle { margin: 0 0 18px; color: #d9d9d2; font-size: 13px; }
.lexton .lexton-premium-price { margin: 0 0 17px; padding-top: 15px; border-top: 1px solid #637069; }
.lexton .lexton-premium-price strong { display: block; color: #f1d6aa; font-size: clamp(30px, 4vw, 40px); line-height: 1.25; font-variant-numeric: tabular-nums; }
.lexton .lexton-premium-price strong span { font-size: 17px; }
.lexton .lexton-premium-price small { display: block; margin-top: 3px; color: #e1e1da; font-size: 12px; }
.lexton .lexton-premium-conditions { margin: 0; color: #f0ece1; font-size: 13px; font-weight: 700; }
.lexton .lexton-premium-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 0 0; }
.lexton .lexton-premium-detail { min-width: 0; }
.lexton .lexton-premium-detail h4 { margin: 0 0 8px; padding-bottom: 9px; border-bottom: 1px solid #dedfd8; color: var(--lx-accent); font: 700 12px/1.5 Georgia, serif; letter-spacing: .08em; }
.lexton .lexton-premium-detail h4 span { margin-left: 8px; color: #333c37; font: 700 15px/1.5 "Noto Sans JP", sans-serif; letter-spacing: 0; }
.lexton .lexton-premium-detail p { margin: 0; color: #545e58; font-size: 14px; line-height: 1.95; }

/* Campaign offer */
.lexton .lexton-benefit { max-width: 1080px; margin: 0 auto 70px; padding: clamp(27px, 5vw, 49px); background: #f2eee5; border-top: 3px solid #a78c5e; text-align: center; }
.lexton .lexton-benefit-kicker { margin: 0 0 7px; color: #61543f; font-size: 14px; font-weight: 700; }
.lexton .lexton-benefit h2 { margin: 0 0 24px; font-size: clamp(22px, 3vw, 28px); line-height: 1.5; }
.lexton .lexton-benefit h2 span { display: inline-block; margin-left: 6px; color: #6b6254; font-size: 13px; font-weight: 400; }
.lexton .lexton-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; }
.lexton .lexton-benefit-item { min-width: 0; padding: 23px; background: #fff; }
.lexton .lexton-benefit-number { color: #a98e64; font: 700 12px/1 Georgia, serif; }
.lexton .lexton-benefit-item h3 { margin: 9px 0 10px; font-size: 20px; line-height: 1.5; }
.lexton .lexton-benefit-item p { margin: 0; font-size: 14px; line-height: 1.9; }
.lexton .lexton-benefit-item strong { color: var(--lx-accent); }
.lexton .lexton-benefit-note { margin: 17px 0 0; color: #615e54; font-size: 12px; }

/* Contact */
.lexton .lexton-contact { max-width: 1080px; margin: 0 auto 34px; padding: 38px 20px; border: 1px solid #dedfd9; text-align: center; }
.lexton .lexton-contact h2 { margin: 0 0 8px; font-size: 24px; }
.lexton .lexton-contact > p:not(.lexton-section-en) { margin-bottom: 12px; font-size: 14px; }
.lexton .lexton-contact .lexton-contact-hotel { margin: 22px 0 4px; font-weight: 700; }
.lexton .lexton-contact-link { display: inline-block; padding: 3px 0; color: var(--lx-accent); font-size: clamp(24px, 4vw, 32px); font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.lexton .lexton-contact-link:hover { text-decoration: underline; }
.lexton .lexton-contact .lexton-contact-note { margin: 8px 0 0; color: #68726b; font-size: 12px; }

/* Tablet */
@media (max-width: 900px) {
  .lexton .lexton-index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lexton .lexton-index-list a { min-height: 78px; }
  .lexton .lexton-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lexton .lexton-venue-heading { grid-template-columns: 64px minmax(0, 1fr); }
}

/* Smartphone: single-column editorial rhythm, no tiny two-column cards */
@media (max-width: 600px) {
  .lexton { font-size: 14px; }
  .lexton .lexton-hero { margin: 0 -12px 38px; padding: 36px 18px 30px; }
  .lexton .lexton-hero-eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: .12em; }
  .lexton .lexton-hero-label { font-size: 12px; }
  .lexton .lexton-hero-title { font-size: clamp(28px, 8vw, 39px); letter-spacing: .04em; }
  .lexton .lexton-hero-lead { margin: 17px auto 22px; font-size: 13px; line-height: 1.95; }
  .lexton .lexton-hero-lead br { display: none; }
  .lexton .lexton-period { display: block; padding: 14px 8px; }
  .lexton .lexton-period p { gap: 6px; font-size: clamp(15px, 4.3vw, 20px); }
  .lexton .lexton-period small { font-size: 11px; }
  .lexton .lexton-index { margin-bottom: 46px; }
  .lexton .lexton-index-heading h2 { font-size: 20px; }
  .lexton .lexton-index-list { gap: 8px; }
  .lexton .lexton-index-list a { min-height: 82px; padding: 11px; font-size: 13px; }
  .lexton .lexton-venue { margin-bottom: 55px; scroll-margin-top: 65px; }
  .lexton .lexton-venue + .lexton-venue, .lexton .lexton-venue-premium { padding-top: 38px; }
  .lexton .lexton-venue-heading { grid-template-columns: 45px minmax(0, 1fr); gap: 9px; margin-bottom: 18px; }
  .lexton .lexton-venue-number { font-size: 44px; }
  .lexton .lexton-venue-heading h2 { font-size: 23px; }
  .lexton .lexton-venue-description { font-size: 13px; line-height: 1.85; }
  .lexton .lexton-menu-grid { grid-template-columns: 1fr; gap: 13px; }
  .lexton .lexton-menu-card { display: grid; grid-template-columns: minmax(0, 43%) minmax(0, 57%); align-items: stretch; }
  .lexton .lexton-menu-photo { height: 100%; min-height: 145px; aspect-ratio: auto; }
  .lexton .lexton-menu-photo img { height: 100%; aspect-ratio: auto; }
  .lexton .lexton-menu-info { display: flex; flex-direction: column; justify-content: center; padding: 12px 12px 12px 13px; }
  .lexton .lexton-menu-info h3 { min-height: 0; margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
  .lexton .lexton-menu-price { gap: 3px; padding-top: 9px; }
  .lexton .lexton-menu-price strong { font-size: clamp(22px, 6vw, 29px); }
  .lexton .lexton-menu-price strong span { font-size: 13px; }
  .lexton .lexton-menu-price small { font-size: 11px; line-height: 1.6; }
  .lexton .lexton-drink { margin-top: 15px; padding: 18px 13px; }
  .lexton .lexton-drink-heading { align-items: flex-start; gap: 8px; }
  .lexton .lexton-drink-heading h3 { font-size: 16px; }
  .lexton .lexton-drink-duration { padding: 4px 8px; font-size: 11px; }
  .lexton .lexton-drink-options { grid-template-columns: 1fr; gap: 9px; }
  .lexton .lexton-drink-option { padding: 12px 13px; }
  .lexton .lexton-drink-description { font-size: 12px; }
  .lexton .lexton-premium-layout { grid-template-columns: 1fr; }
  .lexton .lexton-premium-photo { min-height: 0; }
  .lexton .lexton-premium-photo img { aspect-ratio: 4 / 3; }
  .lexton .lexton-premium-info { padding: 22px; }
  .lexton .lexton-premium-info h3 { font-size: 23px; }
  .lexton .lexton-premium-details { grid-template-columns: 1fr; gap: 22px; }
  .lexton .lexton-benefit { margin-bottom: 45px; padding: 26px 15px; }
  .lexton .lexton-benefit h2 { font-size: 22px; }
  .lexton .lexton-benefit h2 span { display: block; margin: 3px 0 0; }
  .lexton .lexton-benefit-grid { grid-template-columns: 1fr; gap: 9px; }
  .lexton .lexton-benefit-item { padding: 17px 19px; }
  .lexton .lexton-benefit-item h3 { font-size: 18px; }
  .lexton .lexton-contact { padding: 30px 13px; }
  .lexton .lexton-contact h2 { font-size: 22px; }
}

/* Very narrow phones: prevent overflow and maintain tappable targets */
@media (max-width: 360px) {
  .lexton .lexton-index-list { grid-template-columns: 1fr; }
  .lexton .lexton-index-list a { min-height: 58px; flex-direction: row; align-items: center; }
  .lexton .lexton-menu-card { grid-template-columns: 40% minmax(0, 60%); }
  .lexton .lexton-menu-info { padding: 10px; }
  .lexton .lexton-menu-info h3 { font-size: 14px; }
  .lexton .lexton-menu-price strong { font-size: 21px; }
  .lexton .lexton-drink-heading { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .lexton .lexton-index-list a { transition: none; }
}


/* ============================================================
   料理写真：右下の「写真はイメージです」表記
   ============================================================ */

.lexton-menu-photo,
.lexton-premium-photo {
    position: relative;
    overflow: hidden;
}

.lexton-photo-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 5px 9px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
    .lexton-photo-caption {
        padding: 4px 6px;
        font-size: 10px;
        letter-spacing: 0;
    }
}

/* ============================================================
   施設別のご予約・お問い合わせ（topics-lexton.css 末尾に追加）
   ============================================================ */

.lexton .lexton-venue-contact {
    margin-top: 20px;
    padding: 16px 20px;
    border: 1px solid var(--lx-line);
    background: #fff;
    text-align: center;
}

.lexton .lexton-venue-contact-label {
    margin: 0 0 4px;
    color: var(--lx-muted);
    font-size: 13px;
    font-weight: 700;
}

.lexton .lexton-venue-contact-link {
    display: inline-block;
    color: var(--lx-accent);
    font-size: clamp(22px, 3vw, 27px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.lexton .lexton-venue-contact-link:hover {
    text-decoration: underline;
}

.lexton .lexton-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 800px;
    margin: 24px auto 16px;
    text-align: center;
}

.lexton .lexton-contact-item {
    min-width: 0;
    padding: 18px 12px;
    border: 1px solid var(--lx-line);
    background: var(--lx-soft);
}

.lexton .lexton-contact-item .lexton-contact-hotel {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
}

.lexton .lexton-contact-item .lexton-contact-link {
    font-size: clamp(20px, 2.5vw, 26px);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .lexton .lexton-venue-contact {
        padding: 14px 12px;
    }

    .lexton .lexton-contact-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .lexton .lexton-contact-item {
        padding: 14px 10px;
    }
}

/* ============================================================
   WEB予約導線：皇’・宴会場・竹千代（薩摩は電話のみ）
   既存の topics-lexton.css と連絡先追加CSSの末尾に追記
   ============================================================ */
.lexton .lexton-online-booking {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--lx-line);
}
.lexton .lexton-online-booking-label {
    margin: 0 0 10px;
    color: var(--lx-muted);
    font-size: 13px;
    font-weight: 700;
}
.lexton .lexton-online-booking-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--lx-accent);
    background: var(--lx-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}
.lexton .lexton-online-booking-link:hover {
    background: #743c2f;
    color: #fff;
}
.lexton .lexton-online-booking-qr {
    display: block;
    width: 150px;
    height: 150px;
    flex: none;
    object-fit: contain;
    background: #fff;
    padding: 4px;
}
@media (max-width: 600px) {
    .lexton .lexton-online-booking-link {
        display: flex;
        width: 100%;
        padding: 13px 10px;
        font-size: 13px;
    }
    .lexton .lexton-online-booking-qr { display: none; }
}