/* =========================================================
   sema-theme page-stores.css（「運営店舗」固有）
   3店舗を「ひとつの深緑の共有面」に対等に並べた静かな案内図。
   白カード3枚・角丸カード・ランキング・タブ・アコーディオン・地図は不使用。
   トップの1面3分割（白カラム）とは別の見た目（深緑面・横罫の行）。
   共通土台（page.css）を継承。全クラス sema- プレフィックス。
   ========================================================= */

/* =========================================================
   導入領域（このページ専用）：アイボリー＋3拠点を暗示する抽象マーク
   ========================================================= */
.sema-st-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--sema-paper) 0%, var(--sema-ivory) 100%);
  border-bottom:1px solid var(--sema-line);
  padding:clamp(52px,8vw,100px) 0 clamp(30px,4vw,48px);
}
.sema-st-hero__inner{ position:relative; }
/* 3つの入口/拠点を暗示する3本の短い深緑線（対等・aria-hidden） */
.sema-st-hero__marks{ display:flex; gap:12px; margin-bottom:1.5em; }
.sema-st-hero__marks span{ width:3px; height:26px; background:var(--sema-sage-deep); opacity:.85; }
.sema-st-hero__title{
  font-family:var(--sema-serif); font-weight:700;
  font-size:clamp(1.7rem, 3.1vw, 2.3rem); line-height:1.42; letter-spacing:.1em;
  margin:0; color:var(--sema-ink); text-wrap:balance;
}

/* =========================================================
   本文：テキストは読みやすい幅・店舗の共有面は横幅を活かす（非対称）
   ========================================================= */
.sema-st-body{ max-width:none; }

.sema-st-body .sema-stores-intro{ max-width:40rem; margin:0 0 1.4em; }
.sema-st-body .sema-stores-intro p{
  font-family:var(--sema-serif); font-size:1.1rem; line-height:2; color:var(--sema-ink); margin:0;
}
.sema-st-body .sema-stores-note{ max-width:40rem; margin:0 0 clamp(28px,4vw,44px); }
.sema-st-body .sema-stores-note__title{
  font-family:var(--sema-serif); font-weight:600; font-size:1.04rem; letter-spacing:.05em;
  color:var(--sema-ink); margin:0 0 .4em;
}
.sema-st-body .sema-stores-note p{ font-size:.92rem; color:var(--sema-ink-soft); margin:0; }

/* --- 深緑の共有面：3店舗を対等な横罫の行で --- */
.sema-st-body .sema-stores{
  background:linear-gradient(165deg, var(--sema-sage-deep), var(--sema-sage));
  color:var(--sema-ivory);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 50px rgba(31,50,44,.16);
}
.sema-st-body .sema-stores__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,2vw,28px);
  padding:clamp(24px,3.2vw,36px) clamp(20px,3vw,40px);
}
.sema-st-body .sema-stores__row + .sema-stores__row{ border-top:1px solid rgba(242,236,224,.16); }
.sema-st-body .sema-stores__num{
  font-family:var(--sema-sans); font-weight:700; font-size:.72rem; letter-spacing:.18em;
  color:var(--sema-bronze-soft);
}
.sema-st-body .sema-stores__name{
  font-family:var(--sema-serif); font-weight:600;
  font-size:clamp(1.28rem, 2.4vw, 1.55rem); line-height:1.4; letter-spacing:.09em;
  color:#fff; margin:0;
}
/* 公式リンク：アイボリー文字＋細い下線（ホバーで伸びる）＋外部アイコン */
.sema-st-body .sema-stores__link{
  display:inline-flex; align-items:center; gap:.55em; justify-self:end; white-space:nowrap;
  font-family:var(--sema-sans); font-size:.9rem; letter-spacing:.05em;
  color:var(--sema-ivory); text-decoration:none;
}
.sema-st-body .sema-stores__link-label{ position:relative; }
.sema-st-body .sema-stores__link-label::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:rgba(242,236,224,.55); transition:right .25s var(--sema-ease);
}
.sema-st-body .sema-stores__link:hover .sema-stores__link-label::after{ right:-8px; }
.sema-st-body .sema-stores__ext{ flex:0 0 auto; opacity:.85; transition:transform .25s var(--sema-ease); }
.sema-st-body .sema-stores__link:hover .sema-stores__ext{ transform:translate(2px,-2px); }

/* --- 末尾「関連ページ」：静かな余韻（本文内リンクは下線） --- */
.sema-st-body .sema-stores-related{
  max-width:40rem; margin:clamp(40px,6vw,64px) 0 0; padding-top:clamp(26px,4vw,38px);
  border-top:1px solid var(--sema-line);
}
.sema-st-body .sema-stores-related__title{
  font-family:var(--sema-serif); font-weight:600; font-size:1.08rem; letter-spacing:.05em;
  color:var(--sema-ink); margin:0 0 .6em;
}
.sema-st-body .sema-stores-related p{ color:var(--sema-ink-soft); font-size:.96rem; margin:0; }
.sema-st-body .sema-stores-related a{
  color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:2px;
}
.sema-st-body .sema-stores-related a:hover{ color:var(--sema-bronze); }

/* =========================================================
   スマホ：共有面と横罫は維持。店舗名の下にリンクを置く（白カード化しない）
   ========================================================= */
@media (max-width:767px){
  .sema-st-body .sema-stores__row{
    grid-template-columns:auto 1fr; row-gap:.7em; padding:20px 18px;
  }
  .sema-st-body .sema-stores__link{ grid-column:1 / -1; justify-self:start; }
}