/* IMPORT CSS */
  :root {
    --content-max: 1240px;
    --color-text: #303030;
    --color-shop-title: #35383a;
    --color-button-bg: #918264;
    --color-button-bg-hover: #7c6d51;
    --color-shop-bg: #f5f5f5;
    --color-footer-bg: #f3f0ea;
    --color-footer-text: #666666;
    --font-serif: 'Noto Serif JP', serif;
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-button: 'Zen Antique Soft', serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: #ffffff;
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
  }

  img { max-width: 100%; display: block; }
  a { color: inherit; }

  .wrap {
    max-width: calc(var(--content-max) + 48px);
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Hero ---------- */
  .hero-wrap {
    margin-top: 150px;
  }

  .hero-photo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1240 / 470;
    overflow: hidden;
  }

  .hero-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-caption {
    position: absolute;
    top: 0;
    left: 45.5%;
    display: flex;
    gap: 16px;
    height: 100%;
  }

  .hero-caption .plaque {
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(15px, 2.6vw, 30px);
    letter-spacing: 0.08em;
    color: var(--color-text);
  }

  .hero-caption .plaque.tall  { height: 55.3%; }
  .hero-caption .plaque.short { height: 41.5%; }

  /* ---------- Section title ---------- */
  h2.section-title {
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin: 120px 0 40px;
  }

  /* ---------- Book grid ---------- */
  .book-grid {
    width: 930px;
    margin: 90px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 90px;
    row-gap: 90px;
  }

  .book-card {
    width: 280px;
    max-width: 100%;
    text-align: center;
  }

  .book-cover img {
    width: 100%;
    height: auto;
    /* box-shadow: 0 10px 30px rgba(43, 33, 23, 0.18); */
  }

  .book-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.03em;
    margin: 24px 0 0;
  }

  .book-subtitle {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.05em;
    margin: 8px 0 0;
  }

  .book-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }

  .btn {
    width: 156px;
    max-width: 100%;
    height: 40px;
    border-radius: 20px;
    background: var(--color-button-bg);
    color: #fdfdfb;
    font-family: var(--font-button);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .btn:hover,
  .btn:focus-visible {
    background: var(--color-button-bg-hover);
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  /* ---------- Shop / mail-order section ---------- */
  .shop-grid {
    width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .shop-card {
    background: var(--color-shop-bg);
    padding: 30px 24px 30px;
  }

  .shop-card h3 {
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-shop-title);
    letter-spacing: 0.04em;
    margin: 0 0 20px;
  }

  .shop-card p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: #000000;
    line-height: 1.9;
    margin: 0;
  }

  .shop-card.align-center p {
    text-align: center;
  }

  main { padding-bottom: 100px; }

  /* ---------- Footer ---------- */
  footer {
        width: 100%;
    background-color: #F3F0EA;
    padding: 5px 0px;
    text-align: center;
    font-size: 12px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
     .book-grid,
     .shop-grid {
        width: 100%;
    }
  }
  @media (max-width: 760px) {
    .hero-wrap { margin-top: 72px; }
    .hero-photo-frame { aspect-ratio: 4 / 3; }

    h2.section-title { margin: 72px 0 32px; font-size: 1.5rem; }

    .book-grid {
        margin-top: 56px;
        row-gap: 56px;
    }

    .shop-grid { grid-template-columns: 1fr; }
    .shop-card { padding: 32px 24px; }

    main { padding-bottom: 64px; }
  }