@charset "utf-8";
/* 自前HTML移行で足した指定（BiNDup外のもの） */
.sscs-mapwrap{position:relative}
.sscs-map{position:relative;z-index:0}
.sscs-mapcard{z-index:2}
.sscs-map{display:block;width:100%;height:650px;border:0}
iframe.sscs-map{filter:grayscale(1)}
.sscs-mapcard{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:300px;box-sizing:border-box;background:#fff;border-radius:16px;padding:25px;box-shadow:1px 1px 10px rgba(0,0,0,.02);text-align:center}
.sscs-mapcard .c-img img{padding-bottom:15px}
.sscs-mapcard .c-img{margin:0 auto}
.sscs-mapcard .c-body{font-size:12px;text-align:center}
.sscs-mapcard img[width="5000"]{width:28px;height:auto}
@media (max-width:640px){.sscs-map{height:420px}.sscs-mapcard{position:static;transform:none;width:auto;margin:16px 4% 0}}
.sscs-blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0 4%}
@media (max-width:640px){.sscs-blog-list{grid-template-columns:1fr;gap:40px}}
.sscs-card a{color:inherit;text-decoration:none}
.sscs-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:12px}
.sscs-card .c-lead{margin:0 0 4px}
.sscs-card .c-note{margin:4px 0 8px}
.sscs-more{text-align:center;margin:40px 0 0}
.sscs-more a{display:inline-block;padding:10px 32px;border:1px solid currentColor;text-decoration:none;color:inherit;letter-spacing:.1em}
.sscs-article{max-width:760px;margin:0 auto;padding:60px 6% 80px}
.sscs-article .c-title{margin:.2em 0 .8em}
.sscs-article .sscs-hero{width:100%;height:auto;display:block;margin:0 0 32px}
.sscs-article .c-body p{margin:0 0 1.6em;line-height:2}
.sscs-article .sscs-body img{max-width:100%;height:auto;display:block;margin:1em 0}
.sscs-pager{display:flex;justify-content:space-between;gap:16px;margin-top:48px;font-size:14px}
.sscs-pager a{color:inherit}
.sscs-blog-empty{text-align:center;padding:40px 0;opacity:.7}
.sscs-page-title{padding:120px 6% 0;text-align:center}
/* ブログ記事の「完売いたしました」の四角囲み（2026-09-30） */
.sscs-soldout{display:inline-block;border:1px solid currentColor;padding:.35em 1.2em;letter-spacing:.08em;line-height:1.6}

/* COFFEE WAREの縦書きの文章：1行を長く（2026-09-30）。
   見出し「COFFEE WARE ONLINE」と文章を上に詰め、文章の1行の長さを400px→540pxに。
   左の大きな「COFFEE WARE」と重ならない画面幅（1200px以上）だけに適用 */
@media only screen and (min-width:1200px){
  .sscs-top #bk8513 .c-large_headline,.sscs-top #bk8513 .c-body{margin-top:-190px}
  .sscs-top #bk8513 .c-body{height:540px}}

/* COFFEE WAREの高さを、トップのCOFFEE Blogエリア（見出し＋記事3件）の高さにそろえる（パソコン・タブレットのみ。2026-09-30）。
   高さは assets/site.js が表示時と画面サイズ変更時に計算して入れる */
@media only screen and (min-width:642px){
  .sscs-top #bk8513.sscs-eqh{box-sizing:border-box;overflow:hidden}
  .sscs-top #bk8513.sscs-eqh>div{padding-bottom:0!important}}

/* COFFEE WAREの背景写真：繰り返さず1枚で表示（2026-09-30）。
   BiNDupは2ブロック分（COFFEE WARE＋地図）にまたがる背景を敷いて写真を繰り返していたので、
   その背景は消し、COFFEE WAREのブロック自体に写真を1枚（cover）で敷く。スマホは元どおり別の写真 */
.sscs-top #multi-bk_bg8513{display:none!important}
.sscs-top.bd-webp #bk8513{background:url(../_src/4925/img20240117121455656482.webp) center center/cover no-repeat}
.sscs-top.bd-no-webp #bk8513{background:url(../_src/4925/img20240117121455656482.jpg) center center/cover no-repeat}
@media only screen and (max-width:641px){
  .sscs-top.bd-webp #bk8513{background-image:url(../_src/4991/img20240117120656110821.webp)}
  .sscs-top.bd-no-webp #bk8513{background-image:url(../_src/4991/img20240117120656110821.jpg)}}

/* COFFEE WARE欄の「ネットショップ」リンク：マーカー風の背景（ブランドのターコイズ）と右下に小さな指マーク（2026-09-30） */
#bk8513 .c-body a[href*="square.site"]{position:relative;display:inline-block;color:#fff;text-decoration:none;
  background:rgba(0,160,220,.88);padding:.12em .06em;padding-inline:1em;margin-inline:.5em;border-radius:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
#bk8513 .c-body a[href*="square.site"]::after{content:"";position:absolute;right:-.45em;bottom:-.4em;width:1.1em;height:1.1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23333' stroke-width='.6' d='M9 11.24V7.5a2.5 2.5 0 0 1 5 0v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z'/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
#bk8513 .c-body a[href*="square.site"]:hover{background:rgba(0,160,220,1)}

/* トップのビルボード：白い筆記体をコーヒーの中央に固定し、ロゴをコーヒーの上へ（2026-09-30）
   背景写真のコーヒーは画像の中央・直径は画像の高さの約37.8%。背景はcover・中央配置なので、
   コーヒーの直径 D = max(幅×1441/2560, ビルボードの高さ) × 0.378 */
.sscs-top #a-billboard{position:relative!important;padding:0!important;
  --H:max(100svh,600px);--nav:72px;
  --D:calc(max(56.29vw, var(--H)) * 0.378);
  --free:calc((var(--H) - var(--D)) / 2);
  height:var(--H)!important;min-height:0!important;overflow:hidden}
@media (max-width:640px){.sscs-top #a-billboard{--nav:96px}}
.sscs-top #a-billboard .site_frame,.sscs-top #a-billboard section{position:static!important;height:auto!important;margin:0!important;padding:0!important;top:auto!important}
.sscs-top #bk8267,.sscs-top #bk8491,.sscs-top #bk8511{position:absolute!important;margin:0!important;padding:0!important;z-index:1}
.sscs-top #bk8267 .column,.sscs-top #bk8491 .column,.sscs-top #bk8511 .column,
.sscs-top #bk8267 .c-img,.sscs-top #bk8491 .c-img,.sscs-top #bk8511 .c-img,
.sscs-top #bk8267 h1{margin:0!important;padding:0!important;width:100%}
.sscs-top #bk8267 img,.sscs-top #bk8491 img,.sscs-top #bk8511 img{display:block;width:100%!important;height:auto!important;max-width:none!important}
/* ロゴ：ナビの下からコーヒーの上端までの間の中央 */
.sscs-top #bk8267{--lh:clamp(56px, calc(var(--free) - var(--nav) - 32px), 234px);
  width:calc(var(--lh) * 240 / 234);left:calc(50% - var(--lh) * 120 / 234);
  top:calc(var(--nav) + (var(--free) - var(--nav) - var(--lh)) / 2)}
/* 白い筆記体：コーヒーの中心に固定（幅はコーヒーの直径の1.61倍、画面幅の94%まで） */
.sscs-top #bk8491{--cw:min(calc(var(--D) * 1.61), 94vw);
  width:var(--cw);left:calc(50% - var(--cw) / 2);top:calc(50% - var(--cw) * 156 / 718)}
/* 営業案内：コーヒーの下端から下の余白の中央 */
.sscs-top #bk8511{--ew:min(640px, 92vw, calc((var(--free) - 24px) * 640 / 241));
  width:var(--ew);left:calc(50% - var(--ew) / 2);
  top:calc(50% + var(--D) / 2 + (var(--free) - var(--ew) * 241 / 640) / 2)}