:root{
  --paper:#fff; --ink:#111; --sub:#555; --mute:#8e8e8e; --line:#e3e3e3; --tint:#f4f4f2;
  --accent:#9c7b45; --gold:#c9a96e;
  --mincho:"Shippori Mincho B1",serif; --gothic:"Noto Sans JP",sans-serif; --num:"EB Garamond",serif;
  --pad:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:14px;line-height:1.75;letter-spacing:.01em}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* header */
.hd{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:10px;height:56px;padding:0 var(--pad)}
.hd__logo img{width:120px;height:auto}
.hd__area{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--accent);border:1px solid var(--accent);padding:2px 8px}
.hd__menu{margin-left:auto;width:28px;height:28px;background:none;border:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.hd__menu span{display:block;height:1.5px;background:var(--ink)}
.gnav{border-top:1px solid var(--line);background:var(--paper)}
.gnav a{display:block;padding:14px var(--pad);border-bottom:1px solid var(--line);font-size:13px}

/* breadcrumb */
.bc{font-size:10px;color:var(--mute);letter-spacing:.06em}
.bc__in{padding:12px var(--pad);overflow-x:auto;white-space:nowrap}
.bc span{margin:0 6px}

/* section */
.sec{padding:48px var(--pad)}
.sec--tint{background:var(--tint)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--tight{padding-top:24px;padding-bottom:24px}
.sh{margin:0 0 16px}
.sh__rule{display:block;width:24px;height:1px;background:var(--accent);margin-bottom:8px}
.sh__en{display:block;font-size:10px;letter-spacing:.16em;color:var(--mute);font-weight:500}
.sh__ttl{display:block;font-family:var(--mincho);font-weight:600;font-size:24px;line-height:1.45;margin-top:6px}
.sec--ink .sh__en{color:var(--gold)}
.sec--ink .sh__ttl{color:var(--paper)}
.lead{color:var(--sub);margin:0 0 16px}
.sec--ink .lead{color:var(--line)}

/* hero */
.hero{background:var(--ink);color:var(--paper);padding:44px var(--pad) 40px}
.hero__rule{width:32px;height:1px;background:var(--gold);margin-bottom:14px}
.hero__en{font-size:10px;letter-spacing:.14em;color:var(--gold);margin:0 0 12px}
.hero__ttl{font-family:var(--mincho);font-weight:600;font-size:28px;line-height:1.45;margin:0 0 12px}
.hero__lead{color:var(--line);margin:0 0 14px}

/* update badge */
.upd{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--accent);padding:9px 14px}
.upd__label{font-size:10px;letter-spacing:.14em;color:var(--accent);font-weight:500}
.upd__date{font-family:var(--num);font-size:22px;line-height:1}
.upd__sep{width:1px;height:18px;background:var(--line)}
.upd__next{font-size:12px;color:var(--sub)}
.sec--ink .upd__date,.hero .upd__date{color:var(--paper)}
.hero .upd__next{color:var(--line)}

/* text link */
.tlink{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;letter-spacing:.04em}
.tlink svg{width:16px;height:16px;flex:none}
.sec--ink .tlink{color:var(--paper)}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tile{background:var(--paper);padding:16px 14px}
.tile__label{font-size:12px;color:var(--sub);margin:0 0 6px}
.tile__val{display:flex;align-items:baseline;gap:4px}
.tile__num{font-family:var(--num);font-size:34px;line-height:1}
.tile__num--sm{font-size:22px}
.tile__unit{font-size:12px;color:var(--mute)}
.tile__bar{height:2px;background:var(--line);margin-top:8px}
.tile__bar i{display:block;height:2px;background:var(--accent)}

/* bars */
.bars{background:var(--paper);padding:18px 16px}
.bars__ttl{font-size:12px;font-weight:500;margin:0 0 16px}
.bar+.bar{margin-top:16px}
.bar__top{display:flex;justify-content:space-between;align-items:baseline}
.bar__label{font-size:12px}
.bar__n{font-family:var(--num);font-size:20px}
.bar__track{height:6px;background:var(--line);margin-top:6px}
.bar__track i{display:block;height:6px;background:var(--accent)}

/* shop row */
.row{display:block;padding:20px var(--pad);border-bottom:1px solid var(--line)}
.row__main{display:flex;gap:14px;align-items:flex-start}
.row__rank{display:block;font-family:var(--num);font-size:30px;line-height:1.2;width:26px;text-align:center;flex:none}
.row--top .row__rank{color:var(--accent)}
.row__photo{width:100px;height:125px;object-fit:cover;background:var(--tint);flex:none}
.row__info{display:block;flex:1;min-width:0}
.row__name{display:block;font-family:var(--mincho);font-weight:600;font-size:16px;line-height:1.45;margin:0 0 6px}
.row__meta{display:block;font-size:12px;line-height:1.7;color:var(--sub)}
.row__rate{display:block;margin-top:8px;font-size:11px;letter-spacing:.04em;color:var(--mute)}
.row__score{font-family:var(--num);font-size:15px;color:var(--ink)}
.row__trend{font-size:10px;letter-spacing:.04em;color:var(--accent);flex:none}
.row__acts{display:flex;gap:8px;margin-top:16px;padding-left:40px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;flex:1;font-size:12px;font-weight:500;letter-spacing:.04em;border:1px solid var(--ink)}
.btn--tel{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn--lg{height:46px;font-size:13px}
.btn--primary{background:var(--ink);border-color:var(--gold);color:var(--gold);width:100%;height:52px}
.btn--dark{border-color:var(--gold);color:var(--paper)}
.btn svg{width:14px;height:14px;flex:none}

/* host cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px 13px}
.card{display:block}
.card__ph{display:block;position:relative;aspect-ratio:3/4;background:var(--tint)}
.card__ph img{width:100%;height:100%;object-fit:cover}
.card__rank{position:absolute;left:0;top:0;width:30px;height:30px;background:var(--ink);color:var(--gold);font-family:var(--num);font-size:18px;display:grid;place-items:center}
.card__name{display:block;font-family:var(--mincho);font-weight:600;font-size:15px;line-height:1.5;margin:10px 0 0}
.card__shop{display:block;font-size:11px;line-height:1.6;color:var(--mute);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__rate{display:block;margin-top:4px;font-size:11px;color:var(--mute)}
.card__score{font-family:var(--num);font-size:15px;color:var(--ink)}
.scroller{display:flex;gap:13px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroller>*{flex:0 0 165px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--sub);background:none}
.chip--on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* table */
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:12px}
.tbl th{background:var(--ink);color:var(--gold);font-size:10px;letter-spacing:.08em;font-weight:500;text-align:left;padding:11px 10px;white-space:nowrap}
.tbl td{padding:11px 10px;color:var(--sub);border-top:1px solid var(--line)}
.tbl td:first-child{color:var(--ink)}
.tbl tbody tr:nth-child(even) td{background:var(--tint)}
.note{font-size:12px;color:var(--mute);margin:12px 0 0}

/* score band */
.score{display:flex;align-items:center;gap:16px}
.score__num{font-family:var(--num);font-size:60px;line-height:1;color:var(--gold)}
.score__label{font-size:10px;letter-spacing:.12em;color:var(--gold);margin:0 0 8px}
.stars{display:flex;gap:3px}
.stars svg{width:14px;height:14px}
.score__cnt{font-size:12px;color:var(--line);margin:8px 0 0}

/* rating tiles */
.rtile{background:var(--tint);padding:16px 14px}
.sec--tint .rtile{background:var(--paper)}

/* meter */
.meter+.meter{margin-top:24px}
.meter__ttl{font-size:12px;font-weight:500;margin:0 0 10px}
.meter__track{position:relative;height:14px}
.meter__track::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--sub);opacity:.35}
.meter__dot{position:absolute;top:0;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.meter__ends{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:10px}
.pct{display:flex;align-items:center;gap:14px;background:var(--paper);padding:16px}
.pct__num{font-family:var(--num);font-size:40px;line-height:1;color:var(--accent)}
.pct__txt{font-size:12px;margin:0}

/* campaign */
.cmp{display:flex;background:var(--paper)}
.cmp+.cmp{margin-top:14px}
.cmp__bar{width:3px;background:var(--accent);flex:none}
.cmp__body{padding:16px}
.cmp__tag{display:inline-block;background:var(--ink);color:var(--gold);font-size:10px;letter-spacing:.06em;padding:3px 8px;margin-bottom:8px}
.cmp__ttl{font-family:var(--mincho);font-weight:600;font-size:18px;margin:0 0 8px}
.cmp__period{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.cmp__period b{font-family:var(--num);font-weight:500;font-size:15px}
.cmp__period span{font-size:10px;color:var(--mute)}
.cmp__note{font-size:12px;color:var(--sub);margin:0}

/* voice */
.voice{background:var(--tint);padding:16px}
.sec--tint .voice{background:var(--paper)}
.voice+.voice{margin-top:12px}
.voice__top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.voice__nick{font-family:var(--mincho);font-weight:600;font-size:15px}
.voice__meta{font-size:10px;color:var(--mute);margin-left:8px}
.voice__score{font-family:var(--num);font-size:15px}
.voice__detail{font-size:12px;color:var(--sub);margin:8px 0 0}

/* info list */
.dl{border-top:1px solid var(--line)}
.dl__row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl__k{width:76px;flex:none;font-size:12px;color:var(--mute)}
.dl__v{font-size:12px;margin:0}

/* faq */
.faq__item{padding:18px 0;border-bottom:1px solid var(--line)}
.faq__q,.faq__a{display:flex;gap:10px}
.faq__q b{font-family:var(--num);font-weight:500;font-size:18px;color:var(--accent);line-height:1.4}
.faq__a b{font-family:var(--num);font-weight:500;font-size:18px;color:var(--mute);line-height:1.6}
.faq__q p{font-family:var(--mincho);font-weight:600;font-size:15px;margin:0}
.faq__a p{font-size:12px;color:var(--sub);margin:0}

/* about */
.about p{margin:0 0 14px}
.about__sign{font-size:10px;letter-spacing:.08em;color:var(--gold)}

/* photo grid */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pgrid img{aspect-ratio:1;object-fit:cover;background:var(--tint);width:100%}

/* area list (top) */
.arealist a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.arealist b{font-family:var(--mincho);font-size:18px;font-weight:600}
.arealist span{font-size:12px;color:var(--mute)}

/* footer */
.ft{background:var(--ink);color:var(--line)}
.ft__in{padding:40px var(--pad)}
.ft__logo{width:152px;margin-bottom:20px}
.ft__nav{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.ft__nav a{font-size:12px;color:var(--mute)}
.ft__note{font-size:12px;color:var(--mute);margin:0}

/* article */
.article h2{font-family:var(--mincho);font-size:20px;margin:32px 0 12px}
.article h3{font-family:var(--mincho);font-size:16px;margin:24px 0 8px}
.article p{margin:0 0 14px;color:var(--sub)}
.article ul{margin:0 0 14px;padding-left:1.2em;color:var(--sub);font-size:13px}

@media (min-width:768px){
  :root{--pad:24px}
  body{font-size:15px}
  .hd__in,.bc__in,.sec,.hero,.ft__in,.row{max-width:720px;margin-inline:auto}
  .cards{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:repeat(4,1fr)}
}

/* 行間とリンクの間隔の調整 */
.lead{line-height:1.9}
.sh__ttl{line-height:1.5}
.note{line-height:1.8}
.chips{gap:10px}
.chip{padding:8px 14px;line-height:1.6}
a.chip:active{background:var(--tint)}
.tlink{padding:6px 0;line-height:1.6}
.faq__item{padding:22px 0}
.faq__a{margin-top:10px}
.faq__q p{line-height:1.6}
.faq__a p{line-height:1.9}
.dl__row{padding:16px 0}
.dl__v{line-height:1.8}
.article h2{line-height:1.5}
.article h3{line-height:1.6;margin-bottom:10px}
.article p{line-height:1.9}
.article ul{line-height:1.9}
.article li+li{margin-top:6px}
.article a{text-decoration:underline;text-underline-offset:3px}
.gnav a{padding:16px var(--pad);line-height:1.6}
.ft__nav{gap:16px}
.ft__nav a{line-height:1.6}
.ft__note{line-height:1.9}
.arealist a{padding:20px 0}
.voice__detail{line-height:1.8}
.scroller .card__name{font-size:14px}
.bars__ttl{line-height:1.6}
.bar__label{line-height:1.6}

.tlink{white-space:nowrap}
.chip svg,.card svg{flex:none}