@charset "utf-8";
/* ============================================================
   ボビオ 餃子ランディングページ  スタイルシート
   保存場所： /bobio/css/style.css
   ------------------------------------------------------------
   ・このファイルは見た目だけを担当します。
   ・文章を直すときは index.html 側だけを触ってください。
   ・末尾に「追加調整」としてまとめたブロックがあります。
     見出しサイズ、ロゴ位置、折り返しなどの調整はそこです。
   ============================================================ */

:root {
      --bg: #fbf7ef;
      --bg-soft: #fffdf8;
      --card: #fffaf2;
      --ink: #171717;
      --ink-soft: #3a3835;
      --muted: #6c675f;

      --purple: #8c63ff;
      --purple-deep: #6f45e8;
      --lime: #d4ef48;
      --coral: #ff7d57;
      --sky: #6ecdf8;
      --orange: #ffb24d;
      --mint: #74ddb7;

      --content: 720px;
      --wide: 1040px;
      --radius: 24px;
      --radius-lg: 34px;
      --shadow: 0 10px 0 var(--ink);
      --shadow-soft: 0 6px 0 var(--ink);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      margin: 0;
      min-width: 0;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 6%, rgba(212,239,72,.22), transparent 18rem),
        radial-gradient(circle at 92% 9%, rgba(140,99,255,.17), transparent 18rem),
        radial-gradient(circle at 85% 48%, rgba(110,205,248,.12), transparent 18rem),
        radial-gradient(circle at 10% 88%, rgba(255,125,87,.12), transparent 16rem),
        var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
        "Yu Gothic", "Meiryo", sans-serif;
      font-size: 16px;
      line-height: 1.9;
      letter-spacing: .015em;
      text-rendering: optimizeLegibility;
    }

    img, iframe, svg, video {
      display: block;
      max-width: 100%;
    }

    main img {
      width: 100%;
      height: auto;
      border: 3px solid var(--ink);
      border-radius: 24px;
      box-shadow: var(--shadow-soft);
    }

    a {
      color: inherit;
      text-decoration-thickness: 1px;
      text-underline-offset: .22em;
    }

    p, li, dd, dt, h1, h2, h3 {
      min-width: 0;
      overflow-wrap: break-word;
      line-break: strict;
    }

    .wrap {
      width: min(calc(100% - 40px), var(--content));
      margin-inline: auto;
      min-width: 0;
    }

    .wrap-wide {
      width: min(calc(100% - 40px), var(--wide));
      margin-inline: auto;
      min-width: 0;
    }

    .section {
      position: relative;
      padding: 82px 0;
      background: transparent;
    }

    .section--soft { background: transparent; }
    .section--quiet { padding-block: 72px; }

    .eyebrow,
    .section-kicker {
      margin: 0 0 14px;
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 6px 12px 5px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--card);
      color: var(--ink);
      font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 800;
      box-shadow: 0 4px 0 var(--ink);
    }

    h1 {
      margin: 0;
      max-width: 28em;
      font-size: clamp(17px, 4.4vw, 22px);
      line-height: 1.55;
      letter-spacing: .015em;
      font-weight: 700;
    }

    h2, h3, .concept {
      margin-top: 0;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
        "MS PMincho", serif;
      font-weight: 700;
      letter-spacing: -.02em;
      text-wrap: balance;
    }

    h2 {
      position: relative;
      margin-bottom: 0;
      padding-top: 0;
      font-size: clamp(30px, 8vw, 48px);
      line-height: 1.24;
    }

    h2::before {
      content: "";
      display: none;
    }

    h3 {
      margin: 52px 0 22px;
      font-size: clamp(22px, 6vw, 30px);
      line-height: 1.45;
    }

    p { margin: 0 0 1.28em; }
    .nowrap { white-space: nowrap; }

    /* HERO */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 30px 0 82px;
      background:
        radial-gradient(circle at 90% 17%, rgba(140,99,255,.18), transparent 14rem),
        radial-gradient(circle at 7% 70%, rgba(212,239,72,.25), transparent 10rem),
        var(--bg);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .hero::before {
      right: -46px;
      top: 78px;
      width: clamp(180px, 34vw, 340px);
      aspect-ratio: 1;
      border: clamp(14px, 2.4vw, 24px) solid var(--purple);
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      transform: rotate(12deg);
      opacity: .56;
    }

    .hero::after {
      left: -36px;
      bottom: 30px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 42% 42%, var(--lime) 0 44%, transparent 45%),
        radial-gradient(circle at 65% 65%, var(--coral) 0 12%, transparent 13%),
        transparent;
      opacity: .78;
    }

    .brand {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: min(280px, 76vw);
      min-height: 92px;
      margin: 28px 0 24px;
      padding: 16px 28px 18px;
      border: 3px solid var(--ink);
      border-radius: 999px;
      color: var(--ink);
      background: linear-gradient(135deg, var(--card), #fff5d9);
      font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
      font-size: clamp(42px, 13vw, 74px);
      line-height: .95;
      letter-spacing: .06em;
      font-weight: 900;
      box-shadow: 0 9px 0 var(--ink);
    }

    .hero h1 {
      display: inline-block;
      max-width: 34em;
      margin: 0 0 30px;
      padding: 10px 14px 9px;
      border: 2px solid var(--ink);
      border-radius: 18px;
      background: rgba(255,255,255,.74);
      box-shadow: 0 5px 0 var(--ink);
    }

    .concept {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 0 30px;
      color: var(--ink);
      font-size: clamp(39px, 10.7vw, 78px);
      line-height: 1.18;
      letter-spacing: -.05em;
    }

    .hero-lead {
      max-width: 39em;
      margin: 0;
      padding: 18px 20px;
      border: 3px solid var(--ink);
      border-radius: 22px;
      background: rgba(255,255,255,.7);
      font-size: 17px;
      font-weight: 650;
      box-shadow: 0 6px 0 var(--ink);
    }

    .rule { display: none; }

    /* Shared visual system */
    .section-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 28px;
    }

    .section-head h2 {
      flex: 1 1 auto;
      min-width: 0;
    }

    .section-icon {
      flex: 0 0 auto;
      width: 58px;
      height: 58px;
      border: 3px solid var(--ink);
      border-radius: 18px;
      background: linear-gradient(135deg, var(--card), #fff2cf);
      box-shadow: 0 6px 0 var(--ink);
      display: grid;
      place-items: center;
      transform: rotate(-6deg);
    }

    .section-icon svg {
      width: 30px;
      height: 30px;
      stroke: var(--ink);
      fill: none;
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .section-icon--filled svg .fill-accent {
      fill: var(--lime);
      stroke: var(--ink);
    }

    .section-icon--purple {
      background: linear-gradient(135deg, var(--purple), #9d7cff);
      border-color: var(--ink);
    }

    .section-icon--purple svg,
    .section-icon--purple svg * {
      stroke: var(--bg-soft);
    }

    .section-icon--purple svg .fill-accent {
      fill: var(--lime);
      stroke: var(--bg-soft);
    }

    /* Hero badges */
    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 24px 0 0;
    }

    .hero-badge {
      min-height: 42px;
      padding: 10px 14px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--card);
      box-shadow: 0 5px 0 var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 800;
      transform: rotate(-1.2deg);
    }

    .hero-badge:nth-child(2) { background: #f2edff; transform: rotate(1deg); }
    .hero-badge:nth-child(3) { background: #effbc7; transform: rotate(-2deg); }

    .hero-badge svg {
      width: 18px;
      height: 18px;
      stroke: var(--ink);
      fill: none;
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    /* Placeholder images */
    .image-placeholder {
      position: relative;
      aspect-ratio: 16 / 9;
      width: calc(100% - 8px);
      margin: 42px 8px 8px 0;
      overflow: hidden;
      border: 3px solid var(--ink);
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 18%, rgba(110,205,248,.18) 0 9%, transparent 10%),
        radial-gradient(circle at 82% 22%, rgba(140,99,255,.13) 0 10%, transparent 11%),
        radial-gradient(circle at 18% 82%, rgba(212,239,72,.15) 0 9%, transparent 10%),
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,246,226,.96)),
        var(--card);
      box-shadow: 0 8px 0 var(--ink);
      display: grid;
      place-items: center;
      padding: 24px;
      text-align: center;
    }

    .image-placeholder::before,
    .image-placeholder::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .image-placeholder::before {
      top: 0;
      left: 0;
      width: 58px;
      height: 12px;
      background: var(--lime);
      border-right: 3px solid var(--ink);
      border-bottom: 3px solid var(--ink);
      border-bottom-right-radius: 12px;
    }

    .image-placeholder::after {
      right: 12px;
      bottom: 12px;
      width: 34px;
      height: 34px;
      border: 3px solid var(--ink);
      border-radius: 50%;
      background: var(--coral);
    }

    .image-placeholder strong {
      display: block;
      margin-bottom: 8px;
      color: var(--ink);
      font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
      font-size: 15px;
      letter-spacing: .06em;
    }

    .image-placeholder span {
      display: block;
      max-width: 42em;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .intro {
      max-width: 42em;
      font-size: 17px;
      font-weight: 600;
    }

    /* Small POP cards */
    .spark-grid {
      display: grid;
      gap: 12px;
      margin: 28px 0 0;
    }

    .spark-card {
      border: 2px solid var(--ink);
      border-radius: 20px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 5px 0 var(--ink);
      padding: 12px 14px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .spark-card__icon {
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 14px;
      background: var(--lime);
    }

    .spark-card__icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--ink);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .spark-card strong {
      display: block;
      margin-bottom: 2px;
      font-size: 14px;
      line-height: 1.5;
    }

    .spark-card span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .first-timer-grid {
      margin-top: 50px;
    }

    .first-timer-grid > div { min-width: 0; }

    .first-timer-grid h3 {
      position: relative;
      padding: 18px 18px 16px;
      border: 3px solid var(--ink);
      border-radius: 24px;
      color: var(--ink);
      background: linear-gradient(135deg, #fffef8, #f3efff);
      box-shadow: 0 7px 0 var(--ink);
    }

    .first-timer-grid > div:nth-child(2) h3 {
      background: linear-gradient(135deg, #fffef8, #f5ffd9);
    }

    .menu-card {
      margin-top: 24px;
      border: 3px solid var(--ink);
      border-radius: 24px;
      background: var(--card);
      box-shadow: 0 7px 0 var(--ink);
      overflow: hidden;
    }

    .menu-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 14px;
      align-items: baseline;
      padding: 16px 15px;
      border-bottom: 2px solid var(--ink);
    }

    .menu-row:last-child { border-bottom: 0; }

    .menu-row__name {
      min-width: 0;
      font-weight: 800;
    }

    .menu-row__price {
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-weight: 900;
    }

    .menu-row__desc {
      grid-column: 1 / -1;
      margin-top: -2px;
      color: var(--muted);
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 15px;
      line-height: 1.7;
    }

    .recommend-note {
      margin: 27px 0 0;
      padding: 16px 18px;
      border: 3px solid var(--ink);
      border-radius: 20px;
      background: var(--lime);
      box-shadow: 0 6px 0 var(--ink);
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 18px;
      line-height: 1.65;
      font-weight: 700;
      transform: rotate(-.35deg);
    }

    .reservation-line {
      min-height: 48px;
      margin: 30px 0 0;
      border: 3px solid var(--ink);
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 9px 14px;
      color: var(--ink);
      background: rgba(255,255,255,.64);
      font-size: 15px;
      font-weight: 800;
      box-shadow: 0 5px 0 var(--ink);
    }

    .reservation-line:focus-within,
    .tap-link:focus-visible {
      outline: 3px solid var(--purple);
      outline-offset: 3px;
    }

    .copy-block {
      margin-top: 58px;
      padding-top: 0;
    }

    .copy-block + .copy-block {
      position: relative;
      padding-top: 48px;
    }

    .copy-block + .copy-block::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 92px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--purple), var(--sky), var(--lime));
    }

    .copy-block h3 {
      display: inline;
      padding: 2px 4px;
      background:
        linear-gradient(transparent 60%, rgba(212,239,72,.76) 60% 100%);
    }

    .price-lines {
      margin: 27px 0;
      padding: 20px;
      border: 3px solid var(--ink);
      border-radius: 24px;
      background: linear-gradient(135deg, var(--card), #ffffff);
      box-shadow: 0 6px 0 var(--ink);
      font-variant-numeric: tabular-nums;
    }

    .price-lines p {
      margin: 0;
      white-space: pre-wrap;
    }

    .mini-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 18px;
      padding: 9px 12px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--lime);
      box-shadow: 0 4px 0 var(--ink);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 800;
      transform: rotate(-1deg);
    }

    .mini-note svg {
      width: 16px;
      height: 16px;
      stroke: var(--ink);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    /* WORLD section */
    .world {
      position: relative;
      overflow: hidden;
      padding: 100px 0 108px;
      color: var(--bg-soft);
      background:
        radial-gradient(circle at 14% 8%, rgba(110,205,248,.26), transparent 16rem),
        radial-gradient(circle at 90% 10%, rgba(255,125,87,.22), transparent 16rem),
        linear-gradient(135deg, #1b1632 0%, #231c43 42%, #171717 100%);
      border-radius: 42px;
      margin: 12px auto;
      width: min(calc(100% - 18px), 1320px);
    }

    .world::before,
    .world::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .world::before {
      top: 24px;
      left: 26px;
      width: 130px;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--lime), var(--sky), var(--purple));
      box-shadow: 0 0 0 3px rgba(255,255,255,.12);
      opacity: .95;
    }

    .world::after {
      right: -46px;
      bottom: -36px;
      width: clamp(210px, 34vw, 360px);
      aspect-ratio: 1;
      border: clamp(16px, 3vw, 28px) solid rgba(212,239,72,.18);
      border-top-color: rgba(110,205,248,.26);
      border-left-color: transparent;
      border-radius: 50%;
      transform: rotate(-18deg);
    }

    .world .wrap {
      position: relative;
      z-index: 1;
    }

    .world .section-head {
      margin-bottom: 32px;
    }

    .world .section-kicker {
      color: var(--ink);
      background: var(--lime);
      border-color: var(--bg-soft);
      box-shadow: 0 4px 0 var(--bg-soft);
    }

    .world h2 {
      color: var(--bg-soft);
      font-size: clamp(38px, 10vw, 64px);
      line-height: 1.16;
    }

    .world p {
      max-width: 42em;
    }

    .world .section-icon {
      background: linear-gradient(135deg, var(--purple), #a98cff);
      border-color: var(--bg-soft);
      box-shadow: 0 6px 0 var(--bg-soft);
    }

    .world .image-placeholder {
      border-color: var(--bg-soft);
      background:
        radial-gradient(circle at 18% 18%, rgba(110,205,248,.14) 0 10%, transparent 11%),
        radial-gradient(circle at 82% 22%, rgba(212,239,72,.12) 0 10%, transparent 11%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        rgba(255,255,255,.03);
      box-shadow: 0 8px 0 var(--bg-soft);
    }

    .world .image-placeholder::before {
      background: var(--lime);
      border-color: var(--bg-soft);
    }

    .world .image-placeholder::after {
      border-color: var(--bg-soft);
      background: var(--coral);
    }

    .world .image-placeholder strong { color: var(--bg-soft); }
    .world .image-placeholder span { color: rgba(255,255,255,.72); }

    .world-sparks {
      display: grid;
      gap: 12px;
      margin: 24px 0 0;
    }

    .world-spark {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 13px 14px;
      border: 2px solid rgba(255,255,255,.85);
      border-radius: 22px;
      background: rgba(255,255,255,.06);
      box-shadow: 0 4px 0 rgba(255,255,255,.42);
    }

    .world-spark__icon {
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--lime);
      border: 2px solid var(--bg-soft);
      border-radius: 14px;
    }

    .world-spark__icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--ink);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .world-spark strong {
      display: block;
      margin-bottom: 2px;
      font-size: 14px;
      line-height: 1.5;
    }

    .world-spark span {
      display: block;
      color: rgba(255,255,255,.76);
      font-size: 13px;
      line-height: 1.6;
    }

    .world-category {
      margin: 38px 0 12px;
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 7px 14px 6px;
      border: 2px solid var(--bg-soft);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      font-size: 13px;
      line-height: 1.4;
      font-weight: 800;
      letter-spacing: .05em;
    }

    .world-list {
      margin: 10px 0 28px;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      border: 0;
      background: transparent;
    }

    .world-item {
      --band: var(--purple);
      position: relative;
      display: grid;
      grid-template-columns: 14px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 60px;
      padding: 0 12px 0 0;
      border: 2px solid rgba(255,255,255,.86);
      border-radius: 22px;
      background: rgba(255,255,255,.06);
      font-weight: 800;
    }

    .world-item::before {
      content: "";
      width: 14px;
      align-self: stretch;
      border-radius: 18px 0 0 18px;
      background: var(--band);
    }

    .world-item .price {
      white-space: nowrap;
      padding: 6px 8px;
      color: var(--ink);
      border-radius: 999px;
      background: var(--lime);
      font-variant-numeric: tabular-nums;
      font-weight: 900;
    }

    .world-item--child {
      padding-left: 16px;
      font-size: 15px;
      font-weight: 600;
    }

    .world-item--salsa { --band: #ef6a43; }
    .world-item--arrabbiata { --band: #d5444a; }
    .world-item--gorgonzola { --band: #8093c5; }
    .world-item--taiwan { --band: #e4b845; }
    .world-item--mala { --band: #ed4d2f; }
    .world-item--tomyum { --band: #ff8a3d; }

    .low-density {
      max-width: 41em;
    }

    .decision-list {
      margin: 32px 0 0;
      display: grid;
      gap: 16px;
    }

    .decision {
      padding: 20px;
      border: 3px solid var(--ink);
      border-radius: 24px;
      background: var(--card);
      box-shadow: 0 6px 0 var(--ink);
    }

    .decision:nth-child(2) { background: #f5ffd7; }
    .decision:nth-child(3) { background: #f2edff; }

    .decision strong {
      display: block;
      margin-bottom: 7px;
      color: var(--ink);
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 20px;
      line-height: 1.55;
    }

    .decision p:last-child { margin-bottom: 0; }

    .faq {
      display: grid;
      gap: 12px;
      border-top: 0;
    }

    details {
      border: 3px solid var(--ink);
      border-radius: 22px;
      background: rgba(255,255,255,.68);
      box-shadow: 0 5px 0 var(--ink);
      overflow: hidden;
    }

    summary {
      min-height: 58px;
      cursor: pointer;
      list-style: none;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 28px;
      gap: 10px;
      align-items: center;
      padding: 14px 14px 14px 14px;
      font-weight: 800;
    }

    summary::-webkit-details-marker { display: none; }

    summary::before {
      content: "Q";
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--lime);
      border: 2px solid var(--ink);
      border-radius: 999px;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 14px;
      line-height: 1;
    }

    summary::after {
      content: "+";
      color: var(--purple-deep);
      font-size: 25px;
      line-height: 1;
      font-weight: 900;
      transition: transform .2s ease;
    }

    details[open] summary::after { transform: rotate(45deg); }

    .faq-answer {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      padding: 0 14px 20px 14px;
      color: var(--ink-soft);
    }

    .faq-answer::before {
      content: "A";
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--sky);
      border: 2px solid var(--ink);
      border-radius: 999px;
      font-family: "Arial Black", Arial, sans-serif;
      font-size: 14px;
      line-height: 1;
      font-weight: 900;
    }

    .info-list {
      margin: 0;
      display: grid;
      gap: 12px;
      border: 0;
      background: transparent;
    }

    .info-row {
      display: grid;
      grid-template-columns: 7em minmax(0, 1fr);
      gap: 15px;
      padding: 16px;
      border: 3px solid var(--ink);
      border-radius: 20px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 5px 0 var(--ink);
    }

    .info-row:nth-child(odd) { background: #fffaf2; }

    .info-row dt {
      color: var(--ink);
      font-weight: 900;
    }

    .info-row dd {
      margin: 0;
      min-width: 0;
    }

    .tap-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      color: var(--ink);
      font-weight: 850;
    }

    .map-placeholder {
      position: relative;
      aspect-ratio: 16 / 10;
      margin-top: 34px;
      border: 3px solid var(--ink);
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 18%, rgba(110,205,248,.18) 0 10%, transparent 11%),
        radial-gradient(circle at 82% 22%, rgba(255,125,87,.15) 0 10%, transparent 11%),
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,246,226,.96)),
        var(--card);
      display: grid;
      place-items: center;
      padding: 24px;
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      box-shadow: 0 6px 0 var(--ink);
    }

    footer {
      padding: 38px 20px 50px;
      color: var(--bg-soft);
      background: linear-gradient(135deg, #221a3f, #171717);
      text-align: center;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 16px;
      line-height: 1.7;
      font-weight: 700;
    }


    .showcase-grid {
      display: grid;
      gap: 18px;
      margin: 34px 0 8px;
    }

    .showcase-card {
      overflow: hidden;
      border: 3px solid var(--ink);
      border-radius: 26px;
      background: rgba(255,255,255,.74);
      box-shadow: 0 7px 0 var(--ink);
    }

    .showcase-card .image-placeholder {
      width: 100%;
      margin: 0;
      border: 0;
      border-bottom: 3px solid var(--ink);
      border-radius: 0;
      box-shadow: none;
    }

    .showcase-card__body {
      padding: 16px 16px 18px;
    }

    .showcase-card__kicker {
      margin: 0 0 6px;
      color: var(--purple-deep);
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: .08em;
      font-weight: 800;
    }

    .showcase-card__title {
      margin: 0 0 6px;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 22px;
      line-height: 1.4;
      font-weight: 700;
    }

    .showcase-card__text {
      margin: 0;
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.7;
    }

    .feature-split {
      display: grid;
      gap: 18px;
      margin: 32px 0 0;
    }

    .feature-panel {
      border: 3px solid var(--ink);
      border-radius: 26px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 7px 0 var(--ink);
      padding: 18px 18px 20px;
    }

    .feature-panel h3,
    .feature-panel h4 {
      margin: 0 0 10px;
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
      font-size: 22px;
      line-height: 1.45;
      font-weight: 700;
    }

    .feature-panel p:last-child {
      margin-bottom: 0;
    }

    .photo-stack {
      display: grid;
      gap: 16px;
    }

    .photo-stack--three {
      grid-template-columns: 1fr;
    }

    .world-gallery-note {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      margin: 18px 0 6px;
      padding: 7px 12px 6px;
      border: 2px solid rgba(255,255,255,.9);
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      color: var(--bg-soft);
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: .05em;
      font-weight: 800;
    }

    .section-divider-note {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      margin: 12px 0 8px;
      padding: 7px 12px 6px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: #fff5d9;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: .05em;
      font-weight: 800;
    }

    @media (min-width: 760px) {
      .showcase-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .feature-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: start;
      }

      .photo-stack--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }


    @media (min-width: 760px) {
      .wrap { width: min(calc(100% - 64px), var(--content)); }
      .wrap-wide { width: min(calc(100% - 64px), var(--wide)); }

      .section { padding-block: 110px; }
      .section--quiet { padding-block: 88px; }

      .first-timer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px;
        align-items: start;
      }

      .first-timer-grid h3 { margin-top: 0; }

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

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

      .info-row {
        grid-template-columns: 9em minmax(0, 1fr);
      }
    }

    @media (max-width: 430px) {
      .wrap,
      .wrap-wide {
        width: min(calc(100% - 32px), var(--content));
      }

      .hero {
        padding-top: 26px;
        padding-bottom: 72px;
      }

      .hero::before {
        top: 130px;
        right: -72px;
        width: 200px;
        opacity: .34;
      }

      .hero::after {
        left: -24px;
        bottom: 12px;
        width: 88px;
        height: 88px;
      }

      .brand {
        min-width: 220px;
        min-height: 82px;
        margin-top: 26px;
        padding-inline: 22px;
        font-size: 48px;
      }

      .concept {
        font-size: clamp(36px, 10.6vw, 47px);
      }

      .hero-lead {
        padding-inline: 15px;
      }

      .section { padding-block: 72px; }
      .section--quiet { padding-block: 64px; }

      h2 {
        font-size: clamp(29px, 8.4vw, 38px);
      }

      h3 {
        font-size: clamp(21px, 6vw, 27px);
      }

      .section-head {
        gap: 12px;
        margin-bottom: 24px;
      }

      .section-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
      }

      .section-icon svg {
        width: 25px;
        height: 25px;
      }

      .hero-badges {
        gap: 10px;
      }

      .hero-badge {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 12px;
      }

      .menu-row {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-inline: 12px;
      }

      .menu-row__name,
      .menu-row__price {
        font-size: 15px;
      }

      .reservation-line {
        display: block;
        padding-block: 10px;
      }

      .reservation-line > span {
        display: block;
      }

      .reservation-line > span + span {
        margin-top: 2px;
      }

      .world {
        width: min(calc(100% - 12px), 1320px);
        padding-block: 90px;
        border-radius: 28px;
      }

      .world h2 {
        font-size: clamp(35px, 10vw, 46px);
      }

      .world-item {
        grid-template-columns: 12px minmax(0, 1fr) auto;
        gap: 9px;
        padding-right: 10px;
        min-height: 58px;
        font-size: 14px;
      }

      .world-item::before {
        width: 12px;
      }

      .world-item .price {
        padding-inline: 5px;
        font-size: 14px;
      }

      .world-item--child {
        padding-left: 10px;
        font-size: 13px;
      }

      .info-row {
        grid-template-columns: 1fr;
        gap: 3px;
      }
    }

    

/* --- Image-led first view ----------------------------------- */
.hero{
  overflow: hidden;
  padding-top: 0;
}

.hero .wrap-wide{
  width: 100%;
  max-width: none;
}

.hero .eyebrow,
.hero .brand,
.hero h1,
.hero .concept,
.hero .hero-lead,
.hero .hero-badges{
  width: min(calc(100% - 40px), var(--wide));
  margin-left: auto;
  margin-right: auto;
}

.hero .eyebrow{
  margin-top: 32px;
}

.hero-media{
  width: 100%;
  margin: 0 0 28px;
}

.hero-media img{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
}

.hero .brand{
  margin-top: 0;
  margin-bottom: 22px;
}

.hero h1{
  margin-bottom: 22px;
}

.hero .concept{
  margin-bottom: 18px;
}

.hero .hero-lead{
  margin-bottom: 22px;
}

.hero .hero-badges{
  margin-top: 0;
}

@media (min-width: 760px){
  .hero-media{
    margin-bottom: 36px;
  }

  .hero-media img{
    height: min(72svh, 760px);
  }
}

@media (max-width: 430px){
  .hero{
    padding-bottom: 72px;
  }

  .hero .eyebrow,
  .hero .brand,
  .hero h1,
  .hero .concept,
  .hero .hero-lead,
  .hero .hero-badges{
    width: min(calc(100% - 32px), var(--wide));
  }

  .hero .eyebrow{
    margin-top: 22px;
  }

  .hero-media{
    margin-bottom: 22px;
  }

  .hero-media img{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-position: 38% center;
  }

  .hero .brand{
    margin-bottom: 16px;
  }

  .hero h1{
    margin-bottom: 16px;
  }

  .hero .concept{
    margin-bottom: 14px;
    font-size: clamp(31px, 8.8vw, 42px);
  }

  .hero .hero-lead{
    margin-bottom: 16px;
  }

  .hero .hero-badges{
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


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

      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }
  

/* ---- Photo-dense collage system ---- */
.photo-collage{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  margin:34px 0 14px;
  align-items:start;
}
.photo-tile{
  --ratio:16/9;
  --tilt:0deg;
  --tile-accent:var(--lime);
  position:relative;
  min-width:0;
  overflow:hidden;
  border:3px solid var(--ink);
  border-radius:24px;
  background:
    radial-gradient(circle at 15% 20%,rgba(110,205,248,.14),transparent 20%),
    radial-gradient(circle at 80% 18%,rgba(140,99,255,.12),transparent 20%),
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,246,226,.96));
  box-shadow:0 7px 0 var(--ink);
  transform:rotate(var(--tilt));
}
.photo-tile::before{
  content:"";
  position:absolute;
  z-index:1;
  top:10px;
  left:10px;
  width:34px;
  height:8px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--tile-accent);
}
.photo-tile__media{
  display:grid;
  place-items:center;
  min-height:180px;
  aspect-ratio:var(--ratio);
  padding:24px 18px 18px;
  text-align:center;
}
.photo-tile__media strong{
  display:block;
  margin-bottom:7px;
  font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  letter-spacing:.04em;
}
.photo-tile__media span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.photo-tile--wide{grid-column:span 8}
.photo-tile--half{grid-column:span 6}
.photo-tile--third{grid-column:span 4}
.photo-tile--small{grid-column:span 3}
.photo-tile--tall{--ratio:16/9}
.photo-tile--square{--ratio:16/9}
.photo-tile--cinema{--ratio:16/9}
.photo-tile--a{--tilt:-1.2deg;--tile-accent:var(--lime)}
.photo-tile--b{--tilt:1.3deg;--tile-accent:var(--purple)}
.photo-tile--c{--tilt:-.8deg;--tile-accent:var(--coral)}
.photo-tile--d{--tilt:1deg;--tile-accent:var(--sky)}
.photo-tile--e{--tilt:-1.6deg;--tile-accent:var(--orange)}
.photo-tile--f{--tilt:.7deg;--tile-accent:var(--mint)}
.photo-caption{
  padding:0 14px 14px;
  color:var(--ink-soft);
  font-size:12px;
  line-height:1.55;
}
.photo-cluster-title{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  margin:28px 0 5px;
  padding:7px 12px 6px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  font-size:12px;
  line-height:1.4;
  font-weight:800;
  box-shadow:0 4px 0 var(--ink);
}
.world .photo-tile{
  border-color:var(--bg-soft);
  background:
    radial-gradient(circle at 20% 20%,rgba(110,205,248,.12),transparent 22%),
    radial-gradient(circle at 80% 15%,rgba(212,239,72,.09),transparent 20%),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:0 7px 0 var(--bg-soft);
  color:var(--bg-soft);
}
.world .photo-tile::before{border-color:var(--bg-soft)}
.world .photo-tile__media span,
.world .photo-caption{color:rgba(255,255,255,.72)}
.world .photo-cluster-title{
  border-color:var(--bg-soft);
  background:rgba(255,255,255,.08);
  color:var(--bg-soft);
  box-shadow:0 4px 0 var(--bg-soft);
}
.photo-ribbon{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:28px 0 10px;
}
.photo-ribbon .photo-tile{grid-column:auto}
@media(max-width:759px){
  .photo-collage{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .photo-tile--wide,.photo-tile--half{grid-column:span 6}
  .photo-tile--third,.photo-tile--small{grid-column:span 3}
  .photo-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-tile__media{min-height:130px}
}
@media(max-width:430px){
  .photo-collage{gap:10px;margin-top:28px}
  .photo-tile{border-radius:18px;box-shadow:0 5px 0 var(--ink)}
  .world .photo-tile{box-shadow:0 5px 0 var(--bg-soft)}
  .photo-tile__media{min-height:112px;padding:22px 10px 14px}
  .photo-tile__media strong{font-size:12px}
  .photo-tile__media span{font-size:11px}
  .photo-caption{padding:0 10px 10px;font-size:11px}
}

.image-placeholder,
.photo-tile__media { padding: 0 !important; }
.image-placeholder img,
.photo-tile__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.image-placeholder::before,
.image-placeholder::after {
  pointer-events: none;
}


/* ============================================================
   BOBIO refined direction
   "ちゃんとしている × 堅苦しくない"
   Photos stay lively; UI becomes calm and editorial.
   ============================================================ */

:root{
  --bg:#f4efe6;
  --bg-soft:#fbf8f2;
  --card:#fbf8f2;
  --ink:#1b1b19;
  --ink-soft:#46423d;
  --muted:#777067;

  /* BOBIO accents, intentionally desaturated */
  --purple:#74617d;
  --purple-deep:#5d4a67;
  --lime:#b9c985;
  --coral:#b96854;
  --sky:#7d9aa8;
  --orange:#bd8858;
  --mint:#7fa898;

  --line:rgba(27,27,25,.24);
  --line-strong:rgba(27,27,25,.5);
  --radius:12px;
  --radius-lg:18px;
  --shadow:none;
  --shadow-soft:none;
}

body{
  background:
    radial-gradient(circle at 92% 8%,rgba(116,97,125,.07),transparent 18rem),
    radial-gradient(circle at 4% 65%,rgba(185,201,133,.08),transparent 16rem),
    var(--bg);
  color:var(--ink);
  line-height:1.92;
}

.section{
  padding-block:96px;
}

.section--quiet{
  padding-block:82px;
}

/* ----- Typography ----- */

.eyebrow,
.section-kicker{
  min-height:auto;
  margin:0 0 18px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.16em;
}

h1{
  font-size:clamp(16px,4vw,20px);
  font-weight:600;
  color:var(--ink-soft);
}

h2{
  font-size:clamp(31px,7.4vw,47px);
  line-height:1.28;
}

h3{
  font-size:clamp(22px,5.5vw,29px);
}

.concept{
  max-width:830px;
  font-size:clamp(39px,10vw,76px);
  line-height:1.19;
  letter-spacing:-.045em;
}

/* ----- Hero ----- */

.hero{
  padding:44px 0 92px;
  background:
    radial-gradient(circle at 91% 20%,rgba(116,97,125,.08),transparent 15rem),
    var(--bg);
}

.hero::before,
.hero::after{
  opacity:.16;
}

.brand{
  display:block;
  min-width:0;
  min-height:0;
  width:auto;
  margin:34px 0 30px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(48px,12vw,82px);
  line-height:1;
  letter-spacing:.04em;
  text-align:left;
}

.hero h1{
  display:block;
  max-width:35em;
  margin:0 0 34px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.hero-lead{
  max-width:39em;
  margin:0;
  padding:0 0 0 18px;
  border:0;
  border-left:1px solid var(--line-strong);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:16px;
  font-weight:500;
}

.hero-badges{
  gap:0;
  margin-top:26px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.hero-badge{
  min-height:40px;
  margin:0;
  padding:9px 16px 8px 0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  transform:none !important;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:600;
}

.hero-badge + .hero-badge::before{
  content:"/";
  margin-right:16px;
  color:var(--muted);
  font-weight:400;
}

/* ----- Section heading icons: line icon only ----- */

.section-head{
  gap:12px;
  margin-bottom:32px;
  align-items:center;
}

.section-icon{
  width:30px;
  height:30px;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  transform:none;
}

.section-icon svg{
  width:25px;
  height:25px;
  stroke:var(--purple-deep) !important;
  stroke-width:1.5;
}

.section-icon svg *{
  stroke:var(--purple-deep) !important;
  fill:none !important;
}

/* ----- Photos stay expressive, UI around them gets quiet ----- */

main img{
  border:0;
  border-radius:10px;
  box-shadow:none;
}

.image-placeholder{
  width:100%;
  margin:42px 0 0;
  border:0;
  border-radius:12px;
  box-shadow:none;
  background:var(--bg-soft);
}

.image-placeholder::before,
.image-placeholder::after{
  display:none;
}

.showcase-grid{
  gap:16px;
  margin-top:32px;
}

.showcase-card{
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
}

.showcase-card .image-placeholder{
  border:0;
  border-radius:12px;
}

.photo-tile{
  border:0;
  border-radius:10px;
  box-shadow:none;
  transform:rotate(var(--tilt,0deg));
  background:var(--bg-soft);
}

.photo-tile::before{
  display:none;
}

.photo-tile--a{--tilt:-.28deg}
.photo-tile--b{--tilt:.24deg}
.photo-tile--c{--tilt:-.18deg}
.photo-tile--d{--tilt:.2deg}
.photo-tile--e{--tilt:-.26deg}
.photo-tile--f{--tilt:.16deg}

.photo-collage{
  gap:12px;
  margin-top:36px;
}

.photo-ribbon{
  gap:12px;
}

.photo-caption{
  padding:8px 2px 0;
  color:var(--muted);
}

/* ----- Menus / cards ----- */

.first-timer-grid{
  margin-top:58px;
}

.first-timer-grid h3{
  padding:0 0 12px;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
}

.menu-card{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(251,248,242,.58);
  box-shadow:none;
}

.menu-row{
  border-bottom:1px solid var(--line);
}

.menu-row__name{
  font-weight:650;
}

.menu-row__price{
  font-weight:650;
}

.menu-row__desc{
  color:var(--muted);
}

.recommend-note{
  margin-top:26px;
  padding:14px 0 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  font-size:17px;
}

/* Reservation is a quiet link, not a CTA button */
.reservation-line{
  min-height:48px;
  margin-top:30px;
  padding:10px 0;
  border:0;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  font-size:14px;
  font-weight:600;
}

.reservation-line a{
  text-decoration:none;
  border-bottom:1px solid currentColor;
}

/* ----- Long-form text ----- */

.copy-block + .copy-block::before{
  width:48px;
  height:1px;
  border-radius:0;
  background:var(--line-strong);
}

.copy-block h3{
  padding:0;
  background:none;
}

.price-lines{
  margin:28px 0;
  padding:18px 0;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* ----- World gyoza: playful via photo/color, not UI chrome ----- */

.world{
  width:min(calc(100% - 16px),1320px);
  margin:18px auto;
  padding:108px 0 112px;
  border-radius:24px;
  background:
    radial-gradient(circle at 12% 10%,rgba(125,154,168,.12),transparent 18rem),
    radial-gradient(circle at 90% 12%,rgba(185,104,84,.10),transparent 18rem),
    linear-gradient(135deg,#28232d 0%,#211f22 100%);
}

.world::before{
  width:68px;
  height:1px;
  left:28px;
  top:34px;
  border-radius:0;
  background:rgba(255,255,255,.5);
  box-shadow:none;
}

.world::after{
  opacity:.35;
}

.world .section-kicker{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:rgba(255,255,255,.62);
}

.world .section-icon{
  background:transparent !important;
  border:0;
  box-shadow:none;
}

.world .section-icon svg,
.world .section-icon svg *{
  stroke:rgba(255,255,255,.72) !important;
}

.world .image-placeholder,
.world .photo-tile{
  border:0;
  border-radius:10px;
  box-shadow:none;
}

.world-category{
  margin:40px 0 12px;
  min-height:auto;
  padding:0 0 8px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.35);
  border-radius:0;
  background:transparent;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
}

.world-list{
  gap:0;
  margin-top:0;
}

.world-item{
  grid-template-columns:5px minmax(0,1fr) auto;
  min-height:58px;
  padding-right:0;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.16);
  border-radius:0;
  background:transparent;
  font-weight:600;
}

.world-item::before{
  width:5px;
  margin-right:5px;
  border-radius:999px;
}

.world-item .price{
  padding:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-weight:600;
}

.world-item--child{
  padding-left:14px;
}

/* ----- Decisions / FAQ / info ----- */

.decision-list{
  gap:0;
  border-top:1px solid var(--line);
}

.decision{
  padding:22px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
}

.decision strong{
  font-size:19px;
  font-weight:650;
}

.faq{
  gap:0;
  border-top:1px solid var(--line-strong);
}

details{
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

summary{
  padding:16px 0;
}

summary::before,
.faq-answer::before{
  width:22px;
  height:22px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--purple-deep);
  font-family:Georgia,serif;
  font-size:16px;
}

summary::after{
  color:var(--muted);
  font-weight:400;
}

.faq-answer{
  padding:0 0 22px;
}

.info-list{
  gap:0;
  border-top:1px solid var(--line-strong);
}

.info-row{
  padding:16px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
}

.info-row dt{
  color:var(--muted);
  font-weight:600;
}

.map-placeholder{
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:none;
  background:var(--bg-soft);
}

footer{
  background:#1d1c1a;
  color:rgba(255,255,255,.88);
}

/* ----- Desktop spacing ----- */

@media(min-width:760px){
  .section{
    padding-block:118px;
  }
  .section--quiet{
    padding-block:94px;
  }
  .hero{
    padding-top:54px;
    padding-bottom:112px;
  }
}

/* ----- Mobile ----- */

@media(max-width:430px){
  .hero{
    padding-top:30px;
    padding-bottom:78px;
  }
  .brand{
    font-size:50px;
  }
  .hero-badges{
    display:block;
    padding-block:7px;
  }
  .hero-badge{
    display:inline-flex;
    min-height:34px;
    padding:5px 10px 5px 0;
  }
  .section-icon{
    width:26px;
    height:26px;
  }
  .section-icon svg{
    width:22px;
    height:22px;
  }
  .world{
    width:calc(100% - 10px);
    border-radius:16px;
  }
}


/* Optional side-story section: Vintage Caps ------------------ */
.caps-side-story{
  position:relative;
  padding:96px 0 104px;
  background:#ece7de;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.caps-side-story::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(calc(100% - 40px),720px);
  height:1px;
  background:var(--line-strong);
  transform:translateX(-50%);
}

.caps-eyebrow{
  margin:0 0 17px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
}

.caps-side-story h2{
  max-width:13em;
  margin-bottom:28px;
}

.caps-intro{
  max-width:39em;
  font-size:17px;
}

.caps-bridge{
  margin:30px 0 0;
  padding-left:18px;
  border-left:1px solid var(--line-strong);
  color:var(--ink-soft);
}

.caps-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:38px 0 0;
}

.cap-card{
  margin:0;
  min-width:0;
}

.cap-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:8px;
}

.cap-card figcaption{
  padding-top:9px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.caps-foot{
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.caps-tagline{
  margin:0 0 13px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:18px;
  line-height:1.5;
  font-weight:650;
}

.caps-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
}

.caps-link::after{
  content:"↗";
  color:var(--muted);
  font-size:13px;
}

@media(min-width:760px){
  .caps-side-story{
    padding-block:112px;
  }

  .caps-gallery{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
  }

  .caps-gallery .cap-card:nth-child(2){
    margin-top:38px;
  }

  .caps-gallery .cap-card:nth-child(4){
    margin-top:26px;
  }
}

@media(max-width:430px){
  .caps-side-story{
    padding-block:78px;
  }

  .caps-gallery{
    gap:10px;
  }

  .cap-card figcaption{
    font-size:10px;
  }
}





/* --- Hero text alignment fix -------------------------------- */
.hero .eyebrow{
  display: flex;
  box-sizing: border-box;
}

.hero .brand,
.hero h1,
.hero .concept,
.hero .hero-lead,
.hero .hero-badges{
  box-sizing: border-box;
}

@media (max-width: 430px){
  .hero .eyebrow,
  .hero .brand,
  .hero h1,
  .hero .concept,
  .hero .hero-lead,
  .hero .hero-badges{
    width: calc(100% - 32px);
    max-width: none;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* Keep full-bleed media independent from text gutters */
.hero-media{
  margin-left: 0;
  margin-right: 0;
}


/* --- Official BOBIO icon centered in the first-view image --- */
.hero-media{
  position: relative;
}

.hero-center-logo{
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: clamp(112px, 20vw, 188px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.3vw, 22px);
  border-radius: 50%;
  background: rgba(247, 243, 235, .92);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  pointer-events: none;
}

.hero-center-logo__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 430px){
  .hero-center-logo{
    width: 118px;
    padding: 15px;
  }
}


/* ============================================================
   MARCO-inspired text balance
   Photo-first / calm typography / no empty mobile grid cells
   ============================================================ */

body{
  font-size:16px;
  line-height:1.9;
  letter-spacing:.01em;
}

/* Hero: image stays dominant, copy becomes quieter */
.hero .eyebrow{
  font-size:11px;
  letter-spacing:.14em;
  margin-top:20px;
  margin-bottom:18px;
}

.hero .brand{
  font-size:clamp(42px,10vw,66px);
  line-height:1;
  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(15px,3.8vw,18px);
  line-height:1.65;
  font-weight:600;
  margin-bottom:20px;
}

.hero .concept{
  max-width:760px;
  font-size:clamp(34px,7.6vw,54px);
  line-height:1.28;
  letter-spacing:-.035em;
  margin-bottom:18px;
}

.hero .hero-lead{
  max-width:40em;
  font-size:16px;
  line-height:1.9;
  font-weight:400;
  margin-bottom:18px;
}

.hero .hero-badges{
  margin-top:0;
}

.hero-badge{
  font-size:12px;
  font-weight:500;
}

/* Section hierarchy */
.section{
  padding-block:84px;
}

.section--quiet{
  padding-block:76px;
}

.section-head{
  margin-bottom:28px;
}

h2{
  font-size:clamp(28px,6.4vw,40px);
  line-height:1.35;
  letter-spacing:-.02em;
  font-weight:600;
}

h3{
  margin-top:46px;
  margin-bottom:18px;
  font-size:clamp(21px,4.8vw,27px);
  line-height:1.5;
  font-weight:600;
}

.intro{
  font-size:16px;
  line-height:1.95;
  font-weight:400;
}

p{
  margin-bottom:1.15em;
}

.menu-row__name,
.menu-row__price{
  font-weight:600;
}

.menu-row__desc{
  font-size:15px;
  line-height:1.75;
}

.recommend-note{
  font-size:16px;
  line-height:1.8;
  font-weight:500;
}

/* World section should feel special, but not oversized */
.world h2{
  font-size:clamp(32px,7vw,48px);
  line-height:1.28;
}

.world p{
  line-height:1.95;
}

/* Info / FAQ quieter */
.decision strong,
.info-row dt{
  font-weight:600;
}

summary{
  font-size:16px;
  font-weight:600;
}

/* Remove obsolete hero icon CSS effects, even if old rules remain earlier. */
.hero-center-logo,
.hero-center-logo__img{
  display:none !important;
}

/* ------------------------------------------------------------
   Mobile photo layout:
   Avoid half-empty rows entirely at smartphone widths.
   MARCO-like approach: let photos breathe at full width.
   ------------------------------------------------------------ */
@media (max-width:430px){
  .section{
    padding-block:68px;
  }

  .section--quiet{
    padding-block:62px;
  }

  .hero .brand{
    font-size:43px;
  }

  .hero h1{
    font-size:15px;
    line-height:1.65;
  }

  .hero .concept{
    font-size:clamp(31px,8.2vw,37px);
    line-height:1.3;
  }

  h2{
    font-size:clamp(27px,7.4vw,32px);
  }

  h3{
    font-size:21px;
  }

  /* Every collage becomes one full-width stream on phones.
     This guarantees no blank half-column when item counts are odd. */
  .photo-collage{
    grid-template-columns:1fr !important;
    gap:14px;
  }

  .photo-collage > .photo-tile,
  .photo-collage > .photo-tile--wide,
  .photo-collage > .photo-tile--half,
  .photo-collage > .photo-tile--third,
  .photo-collage > .photo-tile--small{
    grid-column:1 / -1 !important;
  }

  /* Ribbons may remain paired only where the set is even. */
  .photo-ribbon{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .showcase-grid{
    grid-template-columns:1fr;
  }
}

/* Keep tablet grids tidy too: last item fills width if a 2-col layout ends alone. */
@media (min-width:431px) and (max-width:759px){
  .photo-collage{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .photo-collage > .photo-tile--wide,
  .photo-collage > .photo-tile--half{
    grid-column:1 / -1;
  }

  .photo-collage > .photo-tile--third,
  .photo-collage > .photo-tile--small{
    grid-column:span 1;
  }

  .photo-collage > .photo-tile:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}


/* ============================================================
   FINAL WHITE / MARCO-INSPIRED BALANCE
   Design principle:
   - white canvas
   - image first
   - quiet typography
   - no decorative UI chrome
   - long Japanese headings sized individually
   ============================================================ */

html,
body{
  background:#fff !important;
}

body{
  color:#1d1d1b;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.005em;
}

/* Remove decorative background effects everywhere */
.hero,
.section,
.section--soft,
.section--quiet,
.caps-side-story{
  background:#fff !important;
}

/* HERO ------------------------------------------------------- */
.hero{
  padding:0 0 88px !important;
}

.hero .wrap-wide{
  width:100% !important;
  max-width:none !important;
}

.hero-media{
  width:100%;
  margin:0 0 34px !important;
}

.hero-media img{
  width:100%;
  height:auto;
  max-width:none;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center center;
  border-radius:0 !important;
}

.hero .eyebrow,
.hero .brand,
.hero h1,
.hero .concept,
.hero .hero-lead,
.hero .hero-badges{
  width:min(calc(100% - 40px), 760px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero .eyebrow{
  margin-top:0 !important;
  margin-bottom:14px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#77726c !important;
  font-size:10px !important;
  line-height:1.4;
  letter-spacing:.15em;
  box-shadow:none !important;
}

.hero .brand{
  margin-top:0 !important;
  margin-bottom:14px !important;
  font-size:clamp(40px,7vw,58px) !important;
  font-weight:600 !important;
  letter-spacing:.035em;
}

.hero h1{
  margin-bottom:24px !important;
  color:#5e5a55;
  font-size:clamp(14px,2.8vw,17px) !important;
  line-height:1.65;
  font-weight:500 !important;
}

.hero .concept{
  max-width:720px !important;
  margin-bottom:20px !important;
  font-size:clamp(30px,5.5vw,44px) !important;
  line-height:1.32 !important;
  letter-spacing:-.025em !important;
  font-weight:600 !important;
}

.hero .hero-lead{
  max-width:650px !important;
  margin-bottom:20px !important;
  padding-left:14px !important;
  border-left:1px solid #aaa49d !important;
  color:#47433f;
  font-size:15px !important;
  line-height:1.9;
  font-weight:400 !important;
}

.hero .hero-badges{
  border-top:1px solid #ddd9d3 !important;
  border-bottom:1px solid #ddd9d3 !important;
}

.hero-badge{
  font-size:11px !important;
  font-weight:500 !important;
  color:#5f5a55;
}

/* SECTION RHYTHM -------------------------------------------- */
.section,
.section--quiet,
.caps-side-story{
  padding-block:96px !important;
}

.section--soft{
  border:0 !important;
}

.wrap,
.low-density{
  max-width:720px;
}

.section-head{
  display:block !important;
  margin-bottom:30px !important;
}

.section-label{
  margin:0 0 10px;
  color:#8a847d;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.16em;
  font-weight:600;
}

.section-head h2,
.caps-side-story h2{
  margin:0 !important;
}

h2{
  font-size:clamp(29px,5.2vw,38px) !important;
  line-height:1.38 !important;
  letter-spacing:-.018em !important;
  font-weight:600 !important;
  text-wrap:balance;
}

/* Long Japanese headings get deliberately quieter.
   This is preferable to forcing awkward 3-line wraps. */
h2.heading-long{
  font-size:clamp(27px,4.6vw,34px) !important;
  line-height:1.4 !important;
}

h2.heading-xlong{
  font-size:clamp(25px,4.2vw,31px) !important;
  line-height:1.42 !important;
}

h3{
  margin-top:44px !important;
  margin-bottom:16px !important;
  font-size:clamp(20px,3.6vw,25px) !important;
  line-height:1.5 !important;
  font-weight:600 !important;
  letter-spacing:-.01em;
}

.intro{
  font-size:16px !important;
  line-height:1.95;
  font-weight:400 !important;
}

p{
  color:#3f3c38;
}

/* Photos ----------------------------------------------------- */
main img{
  border-radius:0 !important;
}

.image-placeholder,
.photo-tile,
.showcase-card{
  border-radius:0 !important;
}

.photo-collage{
  gap:10px !important;
  margin-top:34px;
  margin-bottom:18px;
}

.showcase-grid{
  gap:10px !important;
}

.photo-ribbon{
  gap:10px !important;
}

/* Menu / recommendation ------------------------------------- */
.first-timer-grid{
  margin-top:48px !important;
}

.first-timer-grid h3{
  padding-bottom:10px !important;
  border-bottom:1px solid #ccc7c0 !important;
}

.menu-card{
  border:1px solid #d8d4ce !important;
  border-radius:0 !important;
  background:#fff !important;
}

.menu-row{
  border-bottom:1px solid #e4e0db !important;
}

.menu-row__name,
.menu-row__price{
  font-weight:600 !important;
}

.menu-row__desc{
  color:#77716b !important;
}

.recommend-note{
  border-top:1px solid #d8d4ce !important;
  font-size:16px !important;
}

/* Reservation: understated, like a text navigation element */
.reservation-line{
  border-top:1px solid #aaa49d !important;
  border-bottom:1px solid #aaa49d !important;
  font-size:13px !important;
  font-weight:500 !important;
}

/* WORLD GYOZA ------------------------------------------------
   Keep it the strongest content block via imagery and spacing,
   not a different background color.
*/
.world{
  width:100% !important;
  margin:0 !important;
  padding:108px 0 !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#1d1d1b !important;
}

.world::before,
.world::after{
  display:none !important;
}

.world .wrap{
  width:min(calc(100% - 40px),720px);
}

.world .section-kicker{
  display:none !important;
}

.world .section-label{
  color:#8a847d !important;
}

.world h2,
.world p,
.world .world-category,
.world .world-item,
.world .world-item .price{
  color:#1d1d1b !important;
}

.world h2{
  font-size:clamp(27px,4.7vw,35px) !important;
}

.world .photo-tile,
.world .image-placeholder{
  border-radius:0 !important;
}

.world-category{
  margin-top:42px !important;
  padding-bottom:8px !important;
  border-bottom:1px solid #bcb6af !important;
  font-size:11px !important;
  letter-spacing:.12em;
}

.world-item{
  border-bottom:1px solid #e2ded8 !important;
  background:transparent !important;
}

.world-item .price{
  background:transparent !important;
}

/* CAPS ------------------------------------------------------- */
.caps-side-story{
  color:#1d1d1b !important;
}

.caps-side-story p,
.caps-side-story h2{
  color:#1d1d1b !important;
}

/* FAQ / INFO ------------------------------------------------- */
details,
.info-row,
.decision{
  background:#fff !important;
}

details{
  border-bottom:1px solid #dedad4 !important;
}

.info-row{
  border-bottom:1px solid #dedad4 !important;
}

.decision{
  border-bottom:1px solid #dedad4 !important;
}

/* MOBILE ----------------------------------------------------- */
@media(max-width:430px){
  .hero{
    padding-bottom:68px !important;
  }

  .hero-media{
    margin-bottom:26px !important;
  }

  .hero-media img{
    aspect-ratio:1 / 1 !important;
    object-position:38% center !important;
  }

  .hero .eyebrow,
  .hero .brand,
  .hero h1,
  .hero .concept,
  .hero .hero-lead,
  .hero .hero-badges{
    width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
  }

  .hero .brand{
    font-size:39px !important;
  }

  .hero h1{
    font-size:14px !important;
  }

  .hero .concept{
    font-size:29px !important;
    line-height:1.34 !important;
  }

  .section,
  .section--quiet,
  .caps-side-story{
    padding-block:72px !important;
  }

  .wrap,
  .world .wrap,
  .caps-side-story .wrap{
    width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
  }

  h2{
    font-size:29px !important;
    line-height:1.4 !important;
  }

  h2.heading-long{
    font-size:26px !important;
    line-height:1.42 !important;
  }

  h2.heading-xlong{
    font-size:24px !important;
    line-height:1.45 !important;
  }

  h3{
    font-size:20px !important;
    line-height:1.5 !important;
  }

  /* No partial rows / no visually empty columns on phones. */
  .photo-collage,
  .showcase-grid{
    grid-template-columns:1fr !important;
  }

  .photo-collage > *,
  .showcase-grid > *{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  .photo-ribbon{
    grid-template-columns:1fr !important;
  }

  .photo-ribbon > *{
    width:100% !important;
  }
}

/* TABLET: if a 2-column sequence ends on one photo,
   the last photo expands instead of leaving a blank half-row. */
@media(min-width:431px) and (max-width:759px){
  .photo-collage{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .photo-collage > *:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }
}


/* ============================================================
   BOBIO FINAL REFINEMENT
   - Japanese Gothic typography throughout
   - World Gyoza gets a dark atmospheric block
   - Section spacing no longer doubles
   - Production photo-spec labels shown on provisional photos
   ============================================================ */

:root{
  --bobio-black:#1d1d1b;
  --bobio-charcoal:#252225;
  --bobio-white:#ffffff;
  --bobio-line:#dedbd6;
  --bobio-muted:#77716b;
  --bobio-accent:#9482a0;
}

/* 1. GOTHIC TYPOGRAPHY -------------------------------------- */
html,
body,
button,
input,
textarea,
select{
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.concept,
.menu-row__desc,
.recommend-note,
.decision strong,
.caps-tagline,
.caps-side-story h2,
footer{
  font-family:inherit !important;
}

.brand{
  font-weight:700 !important;
  letter-spacing:.02em !important;
}

.concept{
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

h2{
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

h3{
  font-weight:700 !important;
}

/* 2. SECTION SPACING ----------------------------------------
   White sections use only top padding.
   This prevents bottom+top padding from doubling the gap.
*/
.hero{
  padding-bottom:30px !important;
}

.hero + .section{
  padding-top:42px !important;
}

.section,
.section--quiet,
.caps-side-story{
  padding-top:64px !important;
  padding-bottom:0 !important;
}

main > section:last-of-type{
  padding-bottom:72px !important;
}

.section-head{
  margin-bottom:24px !important;
}

.first-timer-grid{
  margin-top:34px !important;
}

.photo-collage,
.showcase-grid{
  margin-top:28px !important;
  margin-bottom:12px !important;
}

.copy-block{
  margin-top:46px !important;
}

.copy-block + .copy-block{
  padding-top:38px !important;
}

.caps-gallery{
  margin-top:28px !important;
}

.caps-foot{
  margin-top:24px !important;
}

/* 3. WORLD GYOZA ATMOSPHERE -------------------------------- */
.world{
  width:100% !important;
  margin:72px 0 0 !important;
  padding:82px 0 86px !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(148,130,160,.16), transparent 18rem),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,.05), transparent 16rem),
    var(--bobio-charcoal) !important;
  color:#fff !important;
}

.world .wrap{
  width:min(calc(100% - 40px),720px) !important;
}

.world .section-label{
  color:rgba(255,255,255,.56) !important;
}

.world h2,
.world h3,
.world p,
.world .intro,
.world .world-category,
.world .world-item,
.world .world-item .price{
  color:#fff !important;
}

.world p{
  color:rgba(255,255,255,.84) !important;
}

.world-category{
  border-bottom:1px solid rgba(255,255,255,.34) !important;
}

.world-item{
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

.world-item .price{
  color:rgba(255,255,255,.9) !important;
}

.world + .caps-side-story{
  padding-top:68px !important;
}

/* 4. PHOTO SPEC OVERLAYS ------------------------------------ */
.image-placeholder,
.photo-tile__media,
.cap-card{
  position:relative !important;
}

.photo-spec{
  position:absolute;
  z-index:8;
  top:8px;
  left:8px;
  right:8px;
  width:auto;
  max-width:calc(100% - 16px);
  padding:7px 9px 6px;
  background:rgba(255,255,255,.92);
  color:#222;
  border:1px solid rgba(0,0,0,.14);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    Meiryo,
    sans-serif !important;
  font-size:10px;
  line-height:1.45;
  letter-spacing:0;
  font-weight:600;
  text-align:left;
  pointer-events:none;
  backdrop-filter:blur(5px);
}

.world .photo-spec{
  background:rgba(255,255,255,.94);
  color:#222 !important;
}

/* Make actual photos fill their intended crop area cleanly */
.image-placeholder img,
.photo-tile__media img{
  object-fit:cover !important;
}

.cap-card img{
  object-fit:cover !important;
}

/* Optional: add class "hide-photo-specs" to <body> before publish */
body.hide-photo-specs .photo-spec{
  display:none !important;
}

/* 5. RESPONSIVE HEADING JUDGMENT ---------------------------- */
@media(max-width:430px){
  .hero{
    padding-bottom:24px !important;
  }

  .hero + .section{
    padding-top:34px !important;
  }

  .section,
  .section--quiet,
  .caps-side-story{
    padding-top:52px !important;
    padding-bottom:0 !important;
  }

  main > section:last-of-type{
    padding-bottom:56px !important;
  }

  .world{
    margin-top:56px !important;
    padding:66px 0 70px !important;
  }

  .world + .caps-side-story{
    padding-top:54px !important;
  }

  h2{
    font-size:28px !important;
    line-height:1.36 !important;
  }

  h2.heading-long{
    font-size:25px !important;
    line-height:1.4 !important;
  }

  h2.heading-xlong{
    font-size:23px !important;
    line-height:1.43 !important;
  }

  .world h2{
    font-size:25px !important;
    line-height:1.4 !important;
  }

  .photo-spec{
    top:6px;
    left:6px;
    right:6px;
    max-width:calc(100% - 12px);
    padding:6px 7px 5px;
    font-size:9px;
    line-height:1.4;
  }

  /* Keep all provisional images full width on phones.
     No half-row / empty-column artifacts. */
  .photo-collage,
  .showcase-grid,
  .photo-ribbon{
    grid-template-columns:1fr !important;
  }

  .photo-collage > *,
  .showcase-grid > *,
  .photo-ribbon > *{
    grid-column:1 / -1 !important;
    width:100% !important;
  }
}

@media(min-width:431px) and (max-width:759px){
  .photo-collage{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .photo-collage > *:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }
}


/* ============================================================
   Section heading icons
   ============================================================ */
.section-head h2,
.caps-side-story h2{
  display:flex !important;
  align-items:flex-start;
  gap:14px;
}

.heading-icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(1px);
}

.heading-icon-svg{
  width:44px;
  height:44px;
  display:block;
}

.heading-text{
  display:block;
  min-width:0;
}

.world h2,
.world .section-head h2{
  color:#fff !important;
}

@media (max-width:430px){
  .section-head h2,
  .caps-side-story h2{
    gap:11px;
  }
  .heading-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
  }
  .heading-icon-svg{
    width:38px;
    height:38px;
  }
}


/* ============================================================
   Ensure WORLD GYOZA keeps the dark atmospheric background
   ============================================================ */
.world{
  background:
    radial-gradient(circle at 12% 12%, rgba(148,130,160,.16), transparent 18rem),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,.05), transparent 16rem),
    #252225 !important;
}


/* ============================================================
   Heading line control / numeral update
   ============================================================ */
.section-head h2,
.caps-side-story h2{
  min-width:0;
}

.heading-text{
  white-space:nowrap;
}

.h2-one-line .heading-text{
  white-space:nowrap;
}

.mobile-heading-break{
  display:none;
}

/* Slightly tighter only where needed; maintains visual hierarchy. */
h2.h2-compact{
  font-size:clamp(25px,4.4vw,32px) !important;
  letter-spacing:-.035em !important;
}

@media(max-width:430px){
  h2.h2-one-line{
    font-size:27px !important;
    line-height:1.34 !important;
  }

  h2.h2-compact{
    font-size:22px !important;
    line-height:1.34 !important;
    letter-spacing:-.04em !important;
  }

  /* Longest heading: two lines only, with a meaningful break. */
  h2.h2-semantic-break{
    font-size:23px !important;
    line-height:1.38 !important;
  }

  h2.h2-semantic-break .heading-text{
    white-space:normal;
  }

  .mobile-heading-break{
    display:block;
  }
}

@media(min-width:431px){
  h2.h2-semantic-break .heading-text{
    white-space:nowrap;
  }
}


/* ============================================================
   BALANCED GALLERY LAYOUT
   Goal:
   - Mobile: always one column, 100% width
   - Tablet: tidy 2 columns, no orphan blank column
   - Desktop: tidy 3-column rhythm, with last row automatically filled
   ============================================================ */

/* Base: neutralize older experimental spans */
.balanced-gallery{
  display:grid !important;
  align-items:stretch !important;
}

.balanced-gallery > .balanced-gallery-item{
  min-width:0 !important;
  width:100% !important;
  grid-column:auto !important;
  transform:none !important;
}

/* Images should fill the box, never generate accidental whitespace. */
.balanced-gallery .photo-tile,
.balanced-gallery .showcase-card,
.balanced-gallery .image-placeholder{
  height:100%;
}

.balanced-gallery .photo-tile__media,
.balanced-gallery .showcase-card .image-placeholder,
.balanced-gallery > .image-placeholder{
  height:100%;
}

/* Desktop ---------------------------------------------------- */
@media (min-width:760px){
  .balanced-gallery{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  /* Default: three equal items per row */
  .balanced-gallery > .balanced-gallery-item{
    grid-column:span 2 !important;
  }

  /* If the last row contains exactly 1 item, let it fill the row. */
  .balanced-gallery.balance-rem-1 > .balanced-gallery-item:last-child{
    grid-column:1 / -1 !important;
  }

  /* If the last row contains 2 items, make them equal halves. */
  .balanced-gallery.balance-rem-2 > .balanced-gallery-item:nth-last-child(2),
  .balanced-gallery.balance-rem-2 > .balanced-gallery-item:last-child{
    grid-column:span 3 !important;
  }

  /* Avoid mixed natural ratios creating staircase gaps.
     Desktop uses a stable crop; original files remain untouched. */
  .balanced-gallery .photo-tile__media,
  .balanced-gallery .showcase-card .image-placeholder,
  .balanced-gallery > .image-placeholder{
    aspect-ratio:16 / 9 !important;
    min-height:0 !important;
  }

  .balanced-gallery .photo-tile__media img,
  .balanced-gallery .showcase-card img,
  .balanced-gallery > .image-placeholder img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* A single image should not become absurdly tall. */
  .balanced-gallery.balance-count-1{
    grid-template-columns:1fr !important;
  }

  .balanced-gallery.balance-count-1 > .balanced-gallery-item{
    grid-column:1 / -1 !important;
  }

  .balanced-gallery.balance-count-1 .photo-tile__media,
  .balanced-gallery.balance-count-1 > .image-placeholder{
    aspect-ratio:16 / 9 !important;
  }
}

/* Tablet ----------------------------------------------------- */
@media (min-width:431px) and (max-width:759px){
  .balanced-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .balanced-gallery > .balanced-gallery-item{
    grid-column:span 1 !important;
  }

  /* Odd last item fills the final row. */
  .balanced-gallery.balance-count-1 > .balanced-gallery-item,
  .balanced-gallery > .balanced-gallery-item:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }

  .balanced-gallery .photo-tile__media,
  .balanced-gallery .showcase-card .image-placeholder,
  .balanced-gallery > .image-placeholder{
    aspect-ratio:16 / 9 !important;
    min-height:0 !important;
  }
}

/* Mobile ----------------------------------------------------- */
@media (max-width:430px){
  .balanced-gallery{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .balanced-gallery > .balanced-gallery-item{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  /* Keep mobile photo proportions natural to the intended slot.
     Crucially: no two-column composition, therefore no blank side. */
  .balanced-gallery .photo-tile__media,
  .balanced-gallery .showcase-card .image-placeholder,
  .balanced-gallery > .image-placeholder{
    width:100% !important;
    min-height:0 !important;
  }

  /* Production labels remain readable but less intrusive. */
  .photo-spec{
    font-size:8.5px !important;
    line-height:1.35 !important;
  }
}

/* Section rhythm: make the transition from galleries to the next text block
   intentional rather than leaving visually accidental large gaps. */
.balanced-gallery + h3,
.balanced-gallery + .copy-block,
.balanced-gallery + .first-timer-grid,
.balanced-gallery + .world-category{
  margin-top:34px !important;
}

@media(max-width:430px){
  .balanced-gallery + h3,
  .balanced-gallery + .copy-block,
  .balanced-gallery + .first-timer-grid,
  .balanced-gallery + .world-category{
    margin-top:28px !important;
  }
}


/* ============================================================
   FINAL HERO HEIGHT LOCK
   Must stay last so gallery rules cannot override it.
   ============================================================ */

.hero-media{
  width:100% !important;
  max-width:none !important;
  overflow:hidden !important;
}

.hero-media img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  border-radius:0 !important;
  object-fit:cover !important;
}

/* PC / tablet landscape:
   full browser width, but capped height so copy remains visible */
@media (min-width:760px){
  .hero-media{
    height:clamp(420px, 52vh, 600px) !important;
  }

  .hero-media img{
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}

/* Smartphone:
   requested square hero, still full width */
@media (max-width:759px){
  .hero-media{
    height:auto !important;
  }

  .hero-media img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    object-fit:cover !important;
    object-position:38% center !important;
  }
}


/* ============================================================
   CAPS SIDE STORY — intentionally secondary
   ============================================================ */
.caps-side-story--subtle{
  padding-top:44px !important;
  padding-bottom:0 !important;
  border-top:1px solid #e5e1db;
}

.caps-side-story--subtle .section-label,
.caps-side-story--subtle .caps-eyebrow{
  margin-bottom:8px !important;
  color:#99938c !important;
  font-size:9px !important;
  letter-spacing:.14em !important;
}

.caps-side-story--subtle h2{
  font-size:22px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  margin-bottom:14px !important;
}

.caps-side-story--subtle .heading-icon{
  width:32px !important;
  height:32px !important;
  flex-basis:32px !important;
}

.caps-side-story--subtle .heading-icon-svg{
  width:32px !important;
  height:32px !important;
}

.caps-side-story--subtle .caps-intro{
  max-width:34em;
  margin-bottom:20px !important;
  color:#68635d !important;
  font-size:14px !important;
  line-height:1.8 !important;
}

.caps-side-story--subtle .caps-gallery{
  margin-top:20px !important;
}

.caps-side-story--subtle .caps-foot{
  margin-top:16px !important;
}

.caps-side-story--subtle .caps-tagline{
  font-size:12px !important;
  letter-spacing:.08em !important;
  font-weight:600 !important;
  color:#6f6963 !important;
}

.caps-side-story--subtle .caps-link{
  font-size:12px !important;
}

@media(max-width:430px){
  .caps-side-story--subtle{
    padding-top:38px !important;
  }

  .caps-side-story--subtle h2{
    font-size:20px !important;
  }

  .caps-side-story--subtle .heading-icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
  }

  .caps-side-story--subtle .heading-icon-svg{
    width:28px !important;
    height:28px !important;
  }

  .caps-side-story--subtle .caps-intro{
    font-size:13px !important;
  }
}

/* Real BoB Vintage Caps product photography */
.cap-image-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.cap-image-link img{
  display:block;
  width:100%;
  height:auto;
}

/* --- 画面右下に固定するブランドマーク（予約へ移動） ---------- */
.float-mark{
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 60;

  display: grid;
  place-items: center;
  width: clamp(58px, 7vw, 74px);
  height: clamp(58px, 7vw, 74px);
  border-radius: 50%;

  background: rgba(251, 247, 239, .94);
  border: 1px solid rgba(42, 38, 35, .10);
  box-shadow: 0 6px 20px rgba(30, 24, 18, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.float-mark img{
  display: block;
  width: auto;
  height: 62%;
  max-width: 62%;
  object-fit: contain;
  animation: hero-mark-sway 6.5s ease-in-out infinite;
  transform-origin: 50% 12%;
  will-change: transform;
}

.float-mark:hover,
.float-mark:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(30, 24, 18, .24);
}

/* 提灯のように、ゆっくり左右に揺れる */
@keyframes hero-mark-sway{
  0%   { transform: rotate(-6deg) translateX(-4px) translateY(0); }
  25%  { transform: rotate(0deg)  translateX(0)    translateY(-2px); }
  50%  { transform: rotate(6deg)  translateX(4px)  translateY(0); }
  75%  { transform: rotate(0deg)  translateX(0)    translateY(-2px); }
  100% { transform: rotate(-6deg) translateX(-4px) translateY(0); }
}

/* 移動先が画面の一番上に貼りつかないように余白を確保 */
#reservation{
  scroll-margin-top: clamp(24px, 12vh, 120px);
}

/* 動きを減らす設定の端末では、揺れとスクロールの動きを止める */
@media (prefers-reduced-motion: reduce){
  .float-mark img{
    animation: none !important;
    transform: none !important;
  }
  .float-mark{
    transition: none !important;
  }
}

/* --- ファーストビュー：眉とブランドロゴを中央揃えに ---------- */
.hero .eyebrow,
.hero .brand,
.hero h1,
.hero .hero-lead{
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 中央揃えにしたので、リード左側の罫線と字下げを解除 */
.hero .hero-lead{
  border-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero .brand img.brand-logo{
  display: inline-block !important;
  width: auto !important;
  height: clamp(46px, 8.5vw, 74px) !important;
  max-width: 78% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  vertical-align: middle;
}

@media (max-width: 430px){
  .hero .brand img.brand-logo{
    height: clamp(42px, 13vw, 60px) !important;
  }
}

/* --- 見出しサイズの調整（本文とのコントラストを弱める） ------- */
h2,
.section-head h2,
.caps-side-story h2,
.world h2,
.world .section-head h2{
  font-size: clamp(21px, 3.4vw, 27px) !important;
  line-height: 1.5 !important;
  letter-spacing: -.01em !important;
  font-weight: 600 !important;
}

h3,
.first-timer-grid h3,
.copy-block h3{
  font-size: clamp(17px, 2.4vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  margin-top: 38px !important;
  margin-bottom: 14px !important;
}

/* 見出しが小さくなるぶん、隣のアイコンも合わせて縮める */
.section-head .heading-icon,
.caps-side-story .heading-icon{
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
}

.section-head .heading-icon-svg,
.caps-side-story .heading-icon-svg{
  width: 30px !important;
  height: 30px !important;
}

.section-head h2,
.caps-side-story h2{
  gap: 9px !important;
}

@media (max-width: 430px){
  h2,
  .section-head h2,
  .caps-side-story h2,
  .world h2,
  .world .section-head h2{
    font-size: 21px !important;
    line-height: 1.5 !important;
  }

  h3,
  .first-timer-grid h3,
  .copy-block h3{
    font-size: 17px !important;
  }

  .section-head .heading-icon,
  .caps-side-story .heading-icon{
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
  }

  .section-head .heading-icon-svg,
  .caps-side-story .heading-icon-svg{
    width: 26px !important;
    height: 26px !important;
  }
}

/* --- 日本語の折り返しを文節単位にする ---------------------- */
body,
h1, h2, h3,
p, li, dd, dt, summary,
.hero-lead, .intro, .body-copy, .faq-answer{
  line-break: strict;
  word-break: auto-phrase;   /* 対応ブラウザでは「、」「。」や文節で折り返す */
  overflow-wrap: break-word;
}

@supports (text-wrap: pretty){
  h1, h2, h3, p, li, dd, .hero-lead, .intro, .body-copy, .faq-answer{
    text-wrap: pretty;       /* 行末に1文字だけ残るのを防ぐ */
  }
}

/* スマホでだけ効く改行。PC・タブレットでは無効 */
.sp-br{ display: none; }

@media (max-width: 430px){
  .sp-br{ display: inline; }
}

/* --- 小見出し（h3）のアイコン：h2の角丸四角に対して丸で対比 --- */
h3.h3-icon{
  display: flex !important;
  align-items: center;
  gap: 9px;
}

.heading-icon--sub{
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
}

.heading-icon--sub .heading-icon-svg{
  width: 25px !important;
  height: 25px !important;
}

@media (max-width: 430px){
  h3.h3-icon{ gap: 8px; }

  .heading-icon--sub{
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
  }

  .heading-icon--sub .heading-icon-svg{
    width: 22px !important;
    height: 22px !important;
  }
}

/* --- Googleマップ埋め込み（幅いっぱい・16:10） ---------------- */
.map-embed{
  margin-top: clamp(24px, 5vw, 36px);
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #efece6;
}

.map-embed iframe{
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

@media (max-width: 430px){
  .map-embed{
    aspect-ratio: 4 / 3;
  }
}

/* --- FAQの回答が複数段落のときの崩れを防ぐ ------------------ */
/*  .faq-answer は「A」印＋本文の2列グリッドです。
    本文の段落が2つ以上あると、2つ目以降が左の細い列に流れ込み、
    1文字ずつ縦に折り返されてしまうため、列を固定します。          */
.faq-answer::before{
  grid-column: 1;
  grid-row: 1;
}

.faq-answer > *{
  grid-column: 2;
}

.faq-answer > * + *{
  margin-top: .9em;
}

/* --- ご予約ブロック（②はじめての方へ）---------------------- */
/*  設計の根拠
    ・タップ領域は最小44px（Apple HIG）。ここでは高さ60px前後を確保。
    ・色に頼らず「塗り／線」で主従をつける。濃色ベタはページ内で
      ここだけなので、色覚に関係なく浮き上がる（コントラスト約16:1）。
    ・上下に大きな余白を取り、周囲から視覚的に切り離す。
    ・押した瞬間（200ms以内）に見た目が変わるよう :active を用意。   */

.reserve-block{
  margin: 44px 0 8px !important;
}

.reserve-block__label{
  margin: 0 0 14px !important;
  max-width: 460px;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  color: var(--muted) !important;
  text-align: center !important;
}

.reserve-btn{
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 460px;
  min-height: 62px;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

.reserve-btn + .reserve-btn{
  margin-top: 12px;
}

.reserve-btn__main{
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}

.reserve-btn__sub{
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  opacity: .78;
}

/* 主：ネット予約（塗り） */
.reserve-btn--primary{
  background: var(--ink);
  color: #fbf8f2 !important;
}

.reserve-btn--primary:hover{
  background: #33312d;
}

/* 副：電話（線） */
.reserve-btn--secondary{
  background: transparent;
  color: var(--ink) !important;
}

.reserve-btn--secondary:hover{
  background: rgba(27,27,25,.06);
}

/* 押した瞬間の反応（INP対策） */
.reserve-btn:active{
  transform: translateY(1px);
}

.reserve-btn--primary:active{
  background: #46433d;
}

.reserve-btn--secondary:active{
  background: rgba(27,27,25,.12);
}

.reserve-btn:focus-visible{
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

/* 右下のボタンから飛んだとき、上に余白を残す */
#reserve{
  scroll-margin-top: clamp(24px, 14vh, 130px);
}

@media (max-width: 430px){
  .reserve-block{ margin-top: 38px !important; }
  .reserve-btn{ min-height: 58px; }
  .reserve-btn__main{ font-size: 16px; }
  .reserve-btn__sub{ font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .reserve-btn{ transition: none !important; }
  .reserve-btn:active{ transform: none !important; }
}