@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════
   blog.css — ブログの記事ページ・一覧・脇の柱

   トップページの調子を受け継ぐため、次を守っています。
     ・箱で囲わず、罫線（--kobicha）と余白で区切る
     ・強調は黄金（--kogane）の細い線と小さな字で置く
     ・地色を持つのは予約への導線だけ（葡萄茶／臙脂）
     ・英字は小さく字間を広く、日本語を主役にする
   ══════════════════════════════════════════════════════════════════════ */

.bl{padding-top:var(--topH)}
/* 記事個別（.single）は body 側（.single:not(.ska-flush)）が既に上余白を持つので、
   ここで足すと二重になり、他のHEROなしページより広くなる。個別では 0 にして揃える。 */
.single .bl{padding-top:0}

/* ── ここまでの道すじ ────────────────────────────────────────────── */
.crumb{max-width:var(--mw);margin-inline:auto;padding:clamp(26px,4vw,44px) clamp(20px,3.4vw,52px) 0;
 font-size:11.5px;letter-spacing:.1em;color:var(--moji-2);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumb a{color:var(--moji-2);transition:color .5s var(--ease)}
.crumb a:hover{color:var(--kogane)}
.crumb span{color:var(--kobicha)}
.crumb em{font-style:normal;color:var(--hai)}

/* ── 二段組み ────────────────────────────────────────────────────
   本文と脇の柱。脇の柱は上辺の帯に潜らないよう sticky の位置を下げる。
   ────────────────────────────────────────────────────────────── */
.bl-row{max-width:var(--mw);margin-inline:auto;padding:clamp(20px,3vw,34px) clamp(20px,3.4vw,52px) clamp(70px,9vw,120px);
 display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,23vw,300px);gap:clamp(30px,4.6vw,72px);align-items:start}
.bl-solo .bl-row{grid-template-columns:minmax(0,1fr);max-width:calc(var(--mw) * .78)}
@media (max-width:900px){.bl-row{grid-template-columns:1fr;gap:52px}}

/* ══ 記事ページ ══════════════════════════════════════════════════ */
.bl-head{padding-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--kobicha)}
.bl-meta{display:flex;align-items:center;gap:16px;margin:0 0 14px;font-size:11.5px;letter-spacing:.16em;color:var(--hai)}
.bl-cat{padding:5px 12px;border:1px solid var(--kobicha);color:var(--kogane);letter-spacing:.14em;font-size:11px}
.bl-title{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(21px,2.6vw,33px);line-height:1.62;letter-spacing:.03em}

.bl-hero{margin:clamp(26px,3.6vw,44px) 0 0}
.bl-hero img{width:100%;height:auto;display:block}

/* 本文。theme.css の .prose を受け継ぎ、二段組みの幅に合わせる */
.bl-prose{padding:0;max-width:none;margin-top:clamp(30px,4vw,50px)}

/* 記事の分類札 */
.bl-tags{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(30px,4vw,46px) 0 0}
.bl-tags a{padding:7px 14px;border:1px solid var(--kobicha);font-size:11.5px;letter-spacing:.12em;color:var(--hai);
 transition:border-color .5s var(--ease),color .5s var(--ease)}
.bl-tags a:hover{border-color:var(--kogane);color:var(--kogane)}

/* ── 記事の終わりの導線。ここだけ地色を持たせる ─────────────────── */
.bl-cta{margin:clamp(46px,6vw,76px) 0 0;padding:clamp(28px,3.6vw,44px);background:var(--kogecha);
 border:1px solid var(--kobicha);border-top:1px solid var(--kogane)}
.bl-cta-t{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(17px,1.9vw,23px);line-height:1.72;letter-spacing:.04em;color:var(--zouge)}
.bl-cta-s{margin:14px 0 0;font-size:13px;line-height:2.05;color:var(--hai)}
.bl-cta-b{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin:clamp(20px,2.6vw,30px) 0 0}
.bl-cta-go{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;background:var(--ebicha);
 border:1px solid rgba(var(--han-rgb),.24);font-size:13px;letter-spacing:.18em;color:var(--shironeri);
 transition:background .6s var(--ease),border-color .6s var(--ease)}
.bl-cta-go:hover{background:var(--enji);border-color:var(--kogane)}
.bl-cta-go i{font-style:normal;font-size:12px;color:var(--kogane);transition:transform .34s var(--ease)}
.bl-cta-go:hover i{transform:translateX(4px)}
.bl-cta-b .u{font-size:12.5px;letter-spacing:.14em;color:var(--kogane)}
.bl-cta-b .ar{color:var(--kogane)}

/* ── 前後の記事 ─────────────────────────────────────────────────── */
.bl-pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:clamp(40px,5vw,64px) 0 0;
 background:var(--kobicha);border-block:1px solid var(--kobicha)}
.bl-pager a{display:flex;align-items:center;gap:12px;padding:20px 18px;background:var(--kurocha);
 font-size:12.5px;line-height:1.8;color:var(--hai);transition:color .5s var(--ease),background .5s var(--ease)}
.bl-pager a:hover{color:var(--kogane);background:var(--kogecha)}
.bl-pager a:last-child{justify-content:flex-end;text-align:right}
.bl-pager i{font-style:normal;flex:0 0 auto;color:var(--kogane)}
.bl-pager span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:600px){.bl-pager{grid-template-columns:1fr}}

/* ── あわせて読みたい ───────────────────────────────────────────── */
.bl-rel{margin:clamp(50px,6.4vw,84px) 0 0}
.bl-rel-l{list-style:none;margin:clamp(18px,2.4vw,26px) 0 0;padding:0;
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:700px){.bl-rel-l{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.bl-rel-l{grid-template-columns:1fr}}
.bl-rel-l a{display:block;color:inherit}
.bl-rel-th{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--kogecha);margin-bottom:12px}
.bl-rel-th img{width:100%;height:100%;object-fit:cover;transition:transform 2.6s var(--ease)}
.bl-rel-l a:hover .bl-rel-th img{transform:scale(1.05)}
.bl-rel-l time{display:block;font-size:11px;letter-spacing:.16em;color:var(--hai);margin-bottom:6px}
.bl-rel-l b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
 font-family:var(--f-disp);font-weight:500;font-size:13.5px;line-height:1.8;letter-spacing:.03em;
 transition:color .5s var(--ease)}
.bl-rel-l a:hover b{color:var(--kogane)}

/* ══ 一覧 ════════════════════════════════════════════════════════ */
.bl-lead{padding-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--kobicha)}
.bl-lead-h{margin:9px 0 0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(21px,2.6vw,32px);line-height:1.6;letter-spacing:.03em}
.bl-lead-s{margin:14px 0 0;font-size:13px;line-height:2.1;color:var(--hai)}

/* 札を並べず、罫線で区切った横並びの帯にする */
.bl-list{list-style:none;margin:0;padding:0}
.bl-it{border-bottom:1px solid var(--kobicha)}
.bl-it > a{display:grid;grid-template-columns:clamp(120px,17vw,208px) minmax(0,1fr);gap:clamp(16px,2.4vw,30px);
 padding:clamp(20px,2.8vw,32px) 0;color:inherit;transition:opacity .5s var(--ease)}
.bl-it-th{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--kogecha)}
.bl-it-th img{width:100%;height:100%;object-fit:cover;transition:transform 2.8s var(--ease)}
.bl-it > a:hover .bl-it-th img{transform:scale(1.06)}
.bl-it-tx{display:flex;flex-direction:column;min-width:0}
.bl-it-m{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:11px;letter-spacing:.16em;color:var(--hai)}
.bl-it-h{margin:11px 0 0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(15px,1.6vw,19px);line-height:1.75;letter-spacing:.03em;transition:color .5s var(--ease)}
.bl-it > a:hover .bl-it-h{color:var(--kogane)}
.bl-it-d{margin-top:10px;font-size:12.5px;line-height:2;color:var(--hai)}
.bl-it-r{margin-top:auto;padding-top:14px;font-size:11.5px;letter-spacing:.16em;color:var(--kogane);
 display:inline-flex;align-items:center;gap:8px}
.bl-it-r i{font-style:normal;transition:transform .4s var(--ease)}
.bl-it > a:hover .bl-it-r i{transform:translateX(4px)}
@media (max-width:560px){
	.bl-it > a{grid-template-columns:1fr;gap:14px}
	.bl-it-d{display:none}
}

/* ══ 脇の柱 ══════════════════════════════════════════════════════ */
.side{position:sticky;top:calc(var(--topH) + 20px);display:flex;flex-direction:column;gap:clamp(28px,3.4vw,42px)}
@media (max-width:900px){.side{position:static}}

/* 見出し。英字を冠に、日本語を主役に */
.side-h{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--kobicha);display:flex;flex-direction:column;gap:5px}
.side-en{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.28em;color:var(--kogane)}
.side-jp{font-family:var(--f-disp);font-weight:500;font-size:14.5px;letter-spacing:.1em;color:var(--zouge)}

/* スタッフブログ（ココブログ・外部リンク）。脇の柱で唯一、地色を持たせて目立たせる箱 */
.side-staff-card{padding:clamp(20px,2.2vw,26px);background:var(--kogecha);border:1px solid var(--kobicha);border-top:1px solid var(--kogane)}
.side-staff-t{margin:0 0 13px;font-family:var(--f-body);font-size:12.5px;line-height:1.95;letter-spacing:.03em;color:var(--hai)}
.side-staff-l{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:500;font-size:12.5px;
 letter-spacing:.06em;color:var(--kogane-moji);text-decoration:none;transition:color .3s var(--ease)}
.side-staff-l i{font-style:normal;font-size:11px;color:var(--kogane);transition:transform .34s var(--ease)}
.side-staff-l:hover{color:var(--enji)}
.side-staff-l:hover i{transform:translateX(4px)}

/* サイト内検索 */
.side-search{display:flex;border:1px solid var(--kobicha);background:var(--kurocha)}
.side-search:focus-within{border-color:var(--kogane)}
.side-search input{flex:1 1 auto;min-width:0;padding:11px 13px;border:0;background:transparent;
 font-family:var(--f-body);font-size:13px;letter-spacing:.02em;color:var(--zouge)}
.side-search input:focus{outline:none}
.side-search input::placeholder{color:var(--hai)}
.side-search button{flex:0 0 auto;padding:0 15px;border:0;border-left:1px solid var(--kobicha);
 background:var(--kogecha);color:var(--kogane-moji);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.side-search button:hover{background:var(--ebicha);color:var(--shironeri)}
.side-search button i{font-style:normal;font-size:12px}

/* ご予約。脇の柱で唯一、地色を持つ */
.side-go{padding:clamp(20px,2.2vw,26px);background:var(--kogecha);border:1px solid var(--kobicha);border-top:1px solid var(--kogane)}
.side-go-t{margin:0 0 16px;font-family:var(--f-disp);font-weight:500;font-size:13.5px;line-height:1.95;letter-spacing:.05em;color:var(--zouge)}
.side-go-b{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 14px;background:var(--ebicha);
 border:1px solid rgba(var(--han-rgb),.24);font-size:12.5px;letter-spacing:.14em;color:var(--shironeri);
 transition:background .6s var(--ease),border-color .6s var(--ease)}
.side-go-b:hover{background:var(--enji);border-color:var(--kogane)}
.side-go-b i{font-style:normal;font-size:11px;color:var(--kogane);transition:transform .34s var(--ease)}
.side-go-b:hover i{transform:translateX(4px)}

/* 一覧に共通する組み。罫線だけで区切る */
.side-cat,.side-new,.side-arc,.side-pl{list-style:none;margin:0;padding:0}
.side-cat li,.side-arc li,.side-pl li{border-bottom:1px solid var(--kobicha)}
.side-cat a,.side-arc a,.side-pl a{display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:11px 0;font-size:12.5px;letter-spacing:.08em;line-height:1.7;color:var(--hai);
 transition:color .5s var(--ease),padding-left .5s var(--ease)}
.side-cat a:hover,.side-arc a:hover,.side-pl a:hover{color:var(--kogane);padding-left:6px}
.side-cat i,.side-pl i{font-style:normal;flex:0 0 auto;font-size:10.5px;letter-spacing:.1em;color:var(--moji-3)}
.side-cat a:hover i,.side-pl a:hover i{color:var(--kogane)}

/* 月別。WordPress が件数を () で出すので、字を小さくして馴染ませる */
.side-arc a{justify-content:flex-start}

/* 最近の記事。小さな写真と二行組み */
.side-new li + li{margin-top:14px;padding-top:14px;border-top:1px solid var(--kobicha)}
.side-new a{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;color:inherit}
.side-th{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--kogecha)}
.side-th img{width:100%;height:100%;object-fit:cover}
.side-tx{min-width:0}
.side-tx time{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--hai);margin-bottom:5px}
.side-tx b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
 font-family:var(--f-disp);font-weight:500;font-size:12.5px;line-height:1.75;letter-spacing:.03em;
 transition:color .5s var(--ease)}
.side-new a:hover b{color:var(--kogane)}