/* ============================================
   カントンの思い出 RAON — 店舗紹介ページ固有スタイル
   （土台は style.css。このファイルは about.html 専用）
   ============================================ */

/* 特徴の交互レイアウト */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feat+.feat{margin-top:56px}
.feat.rev .fpic{order:2}
.fpic .img{aspect-ratio:4/3;border:1px solid var(--line)}
.ftxt .kr{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);letter-spacing:.1em}
.ftxt h3{font-size:25px;font-weight:600;margin:6px 0 18px;color:var(--gold-l)}
.ftxt p{color:var(--muted);font-size:15px;margin-bottom:20px}
.ftxt ul{list-style:none}
.ftxt li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15px}
.ftxt li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}

/* 店内ギャラリー */
.gmain{position:relative;aspect-ratio:21/9;border:1px solid var(--line);margin-bottom:20px}
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gcell{position:relative;aspect-ratio:4/3;border:1px solid var(--line)}
/* 実写真を入れたメイン枠 */
.gmain.has-img{aspect-ratio:16/9}
.gmain img,.gcell img{width:100%;height:100%;object-fit:cover;display:block}

/* プレースホルダ（店舗写真ご提供待ち）※style.css の .ph を上書き */
.ph{background:linear-gradient(140deg,#16120d,#0b0908);position:relative}
.ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);font-size:13px;letter-spacing:.14em;text-align:center;padding:12px}
.ph::before{content:"";position:absolute;inset:10px;border:1px dashed var(--line)}
.gnote{margin-top:26px;color:var(--muted);font-size:14px;line-height:2;border-left:2px solid var(--gold);padding-left:20px}

/* リード／締めの言葉 */
.intro-copy{max-width:860px;margin:0 auto;color:#d3cbba;font-size:16px;line-height:2.1;text-align:center}
.closing{max-width:820px;margin:36px auto 0;text-align:center;color:var(--ink);font-size:15px;line-height:2}
.closing .sign{margin-top:14px;color:var(--gold-l);font-family:"Cormorant Garamond",serif;font-style:italic;letter-spacing:.06em}

/* レスポンシブ（固有分） */
@media(max-width:900px){
  .feat{grid-template-columns:1fr;gap:28px}
  .feat.rev .fpic{order:0}
  .ggrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ggrid{grid-template-columns:1fr}
  .gmain{aspect-ratio:16/10}
}