@charset "UTF-8";

/* =========================================
   灯り珈琲店 LP（自主制作・架空サイト）
   スマートフォン幅を先に組み、768px以上で広げる
   ========================================= */

:root {
  --bg: #f7f3ec;
  --bg-tint: #efe7db;
  --ink: #2f2a24;
  --ink-soft: #6b6157;
  --line: #d8cdbc;
  --accent: #8c5a2b;
  --accent-dark: #6d4520;
  --white: #fffdf9;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

p, ul, dl, table { margin: 0; }
ul { list-style: none; padding: 0; }

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.site-header__logo {
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  letter-spacing: .18em;
}

.site-header__note {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .08em;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 48px 20px 56px;
  background:
    radial-gradient(120% 80% at 80% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f2eadd 0%, var(--bg) 100%);
  background-color: var(--bg);
  overflow: hidden;
}

.hero__inner { position: relative; z-index: 1; }

.hero__lead {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.hero__title {
  font-size: 30px;
  letter-spacing: .06em;
  margin-bottom: 20px;
}

.hero__text {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.hero__hours {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink-soft);
}

.hero__deco {
  position: absolute;
  right: -46px;
  bottom: -30px;
  width: 200px;
  color: var(--accent);
  opacity: .13;
  z-index: 0;
  pointer-events: none;
}

.hero__deco svg { display: block; width: 100%; height: auto; }

/* ---------- button ---------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--white);
  border: 1px solid var(--accent);
}

.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--ghost {
  background: transparent;
  color: var(--accent-dark);
  border: 1px solid var(--accent);
}

.btn--ghost:hover { background: rgba(140, 90, 43, .08); }

/* ---------- section ---------- */

.section { padding: 52px 20px; }

.section--tint {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__label {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--accent);
  margin-bottom: 10px;
}

.section__title {
  font-size: 23px;
  letter-spacing: .05em;
  margin-bottom: 16px;
}

.section__text {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

/* ---------- features ---------- */

.features { display: grid; gap: 16px; }

.features__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
}

.features__icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  color: var(--accent);
  margin-bottom: 10px;
}

.features__icon svg { width: 100%; height: 100%; }

.features__title {
  font-size: 17px;
  margin-bottom: 6px;
}

.features__text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------- menu ---------- */

.menu-group { margin-bottom: 28px; }

.menu-group__title {
  font-size: 16px;
  letter-spacing: .12em;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.menu-list__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: 15px;
}

.menu-list__name { flex: 0 1 auto; }

.menu-list__dots {
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}

.menu-list__price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* ---------- hours / access ---------- */

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 15px;
}

.table__caption {
  text-align: left;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  padding-bottom: 8px;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  text-align: left;
  font-weight: 400;
}

.table th { width: 42%; color: var(--ink-soft); }

.access { margin-bottom: 20px; }

.access__term {
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--accent);
  margin-top: 16px;
}

.access__desc {
  margin: 4px 0 0;
  font-size: 15px;
}

/* ---------- cta ---------- */

.cta {
  padding: 52px 20px 56px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
}

.cta__title {
  font-size: 22px;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

.cta__text {
  font-size: 15px;
  opacity: .82;
  margin-bottom: 26px;
}

.cta__actions {
  display: grid;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto 18px;
}

.cta .btn--ghost {
  color: var(--bg);
  border-color: rgba(247, 243, 236, .5);
}

.cta .btn--ghost:hover { background: rgba(247, 243, 236, .1); }

.cta__note {
  font-size: 12px;
  opacity: .6;
}

/* ---------- footer ---------- */

.site-footer {
  padding: 28px 20px 40px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.site-footer__name {
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.site-footer__disclaimer {
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 auto 10px;
}

.site-footer__meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .06em;
}

/* =========================================
   768px 以上
   ========================================= */

@media (min-width: 768px) {

  body { font-size: 17px; }

  .site-header { padding: 20px 40px; }

  .hero {
    padding: 96px 40px 104px;
  }

  .hero__inner { max-width: 640px; }

  .hero__title { font-size: 46px; }

  .hero__text { font-size: 17px; }

  .hero__deco {
    right: 6%;
    bottom: 50%;
    transform: translateY(50%);
    width: 300px;
    opacity: .16;
  }

  .section { padding: 88px 40px; }

  .section__title { font-size: 30px; }

  .features { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .menu-group { max-width: 620px; }

  .table, .access { max-width: 620px; }

  .cta { padding: 88px 40px; }

  .cta__title { font-size: 28px; }

  .cta__actions {
    display: flex;
    justify-content: center;
    max-width: none;
  }
}

/* 背景は全幅のまま、中身だけを中央に寄せる */
@media (min-width: 1080px) {

  .site-header,
  .hero,
  .section,
  .cta,
  .site-footer { padding-inline: calc((100% - 880px) / 2); }

  .hero__inner { max-width: 620px; }

  .hero__deco { right: calc((100% - 880px) / 2); width: 260px; }
}