/* ===========================================================
   gourmet.css — おすすめレストラン（自動生成デモ）専用
   2026-08-07 PMO作成
   style.css の :root（モノトーン）を継承。既存CSSには手を入れない。
   =========================================================== */

.g-explain{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.g-explain__inner{max-width:860px;margin:0 auto;text-align:center;padding:8px 0}
.g-explain__eyebrow{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.92rem;letter-spacing:.04em;margin-bottom:14px}
.g-explain h2{font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.6;margin-bottom:40px}
.g-explain__note{font-size:.92rem;color:var(--muted);text-align:left;max-width:660px;margin:0 auto 32px;line-height:1.95}

.g-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 40px;text-align:left;border-top:1px solid var(--line)}
.g-flow li{padding:26px 22px 26px 0;border-right:1px solid var(--line)}
.g-flow li:last-child{border-right:none;padding-right:0}
.g-flow span{display:block;font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--accent-2);margin-bottom:10px}
.g-flow strong{display:block;font-size:1.02rem;margin-bottom:8px}
.g-flow p{font-size:.86rem;color:var(--muted);line-height:1.8}

.g-listhead{display:flex;align-items:baseline;gap:16px;padding-bottom:20px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.g-listhead h2{font-size:1.24rem;margin:0}
.g-listhead__count{font-family:var(--serif);font-style:italic;color:var(--accent-2);font-size:.9rem;margin-left:auto}

.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px}
.g-card{display:block;transition:transform .25s ease}
.g-card:hover{transform:translateY(-4px)}
.g-card__media{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--bg-soft);aspect-ratio:4/3}
.g-card__img{width:100%;height:100%;object-fit:cover}
.g-card__sample{position:absolute;left:12px;top:12px;background:rgba(20,20,20,.72);color:#fff;font-family:var(--serif);font-style:italic;font-size:.68rem;letter-spacing:.12em;padding:4px 10px;border-radius:999px}
.g-card__text{padding-top:16px}
.g-card__meta{font-size:.76rem;color:var(--accent-2);letter-spacing:.04em;margin-bottom:6px}
.g-card h3{font-size:1.12rem;margin-bottom:8px;line-height:1.5}
.g-card__lead{font-size:.88rem;color:var(--muted);line-height:1.8;margin-bottom:12px}
.g-card__time{display:inline-block;font-size:.74rem;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 12px}

.g-hero h1{line-height:1.3}
.g-article__media{max-width:900px;margin:0 auto 48px;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft)}
/* スマホで撮った写真は縦長になる。素のままだと記事の頭を占領してしまうので、
   高さを画面の8割弱で頭打ちにし、はみ出す分は letterbox で収める */
.g-article__photo{width:100%;height:auto;max-height:78vh;object-fit:contain}
.g-article__body{max-width:720px;margin:0 auto}
.g-article__body p{margin-bottom:1.6em}
.g-lead{font-size:1.06rem;line-height:2}

.g-points{background:var(--bg-soft);border-radius:var(--radius);padding:30px 34px;margin:44px 0}
.g-points h2{font-size:1.02rem;margin-bottom:14px}
.g-points ul{margin:0;padding-left:1.2em}
.g-points li{font-size:.92rem;color:var(--text);margin-bottom:9px;line-height:1.85}

/* 代表がLINEで送った原文。AIが書いた部分と明確に見分けがつくようにする */
.g-note{border-left:3px solid var(--ink);padding:4px 0 4px 24px;margin:38px 0}
.g-note__label{font-size:.74rem;letter-spacing:.1em;color:var(--ink);margin-bottom:12px !important;display:flex;align-items:center;gap:10px}
.g-note__label span{font-family:var(--serif);font-style:italic;letter-spacing:.04em;color:var(--accent-2);font-size:.76rem;font-weight:400}
.g-note__body p{font-size:1.02rem;line-height:2;margin-bottom:1em}
.g-note__body p:last-child{margin-bottom:0 !important}

.g-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:40px 0}
.g-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:10px;background:var(--bg-soft)}

.g-official{font-size:.92rem}
.g-official a{border-bottom:1px solid var(--line)}

.g-stamp{border:1px solid var(--ink);border-radius:var(--radius);padding:28px 30px;margin:48px 0;text-align:center}
.g-stamp__label{font-family:var(--serif);font-style:italic;font-size:.76rem;letter-spacing:.18em;color:var(--accent-2);margin-bottom:12px}
.g-stamp__main{font-size:1rem;line-height:1.9;margin-bottom:10px !important}
.g-stamp__main strong{font-size:1.24rem}
.g-stamp__sub{font-size:.8rem;color:var(--muted);margin-bottom:0 !important}

.g-samplenote{font-size:.8rem;color:var(--muted);background:var(--bg-soft);border-radius:10px;padding:14px 18px;line-height:1.8}
.g-back{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);font-size:.9rem}

@media (max-width:900px){
  .g-flow{grid-template-columns:repeat(2,1fr)}
  .g-flow li:nth-child(2){border-right:none;padding-right:0}
  .g-flow li:nth-child(1),.g-flow li:nth-child(2){border-bottom:1px solid var(--line)}
  .g-grid{grid-template-columns:repeat(2,1fr);gap:30px 22px}
}
@media (max-width:640px){
  .g-flow{grid-template-columns:1fr}
  .g-flow li{border-right:none;padding-right:0;border-bottom:1px solid var(--line)}
  .g-flow li:last-child{border-bottom:none}
  .g-grid{grid-template-columns:1fr;gap:34px}
  .g-stamp{padding:24px 20px}
  .g-listhead{flex-wrap:wrap;gap:4px 14px}
  .g-listhead h2{font-size:1.08rem}
  .g-listhead__count{margin-left:0;width:100%}
}