/* ===== ブログ一覧（home.php）専用：エディトリアル風＋サイドバー ===== */

/* --- 土台（定期的な光源で背景の単調さ回避） --- */
.blog-wrap{padding:120px 0 60px;background-color:var(--void);background-image:
  radial-gradient(700px 700px at 92% 16%, rgba(232,32,144,.18), transparent 58%),
  radial-gradient(640px 640px at 4% 44%, rgba(30,200,222,.15), transparent 58%),
  radial-gradient(700px 700px at 94% 72%, rgba(245,133,42,.14), transparent 58%),
  radial-gradient(640px 640px at 6% 96%, rgba(122,52,192,.22), transparent 60%)}
.blog-wrap .mw{max-width:1180px}
.blog-wrap::before{display:none!important}

/* --- パンくず --- */
.blog-wrap .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 20px;font-size:.76rem}
.blog-wrap .crumbs li{color:var(--soft-2)}
.blog-wrap .crumbs li:not(:last-child)::after{content:"\203a";margin-left:8px;color:var(--mut)}
.blog-wrap .crumbs a{color:var(--pink)}
.blog-wrap .crumbs a:hover{color:#fff}

/* --- 見出し --- */
.blog-head{margin-bottom:30px}
.blog-head .eng{display:block;color:var(--pink);margin-bottom:8px}
.blog-disp{font-family:var(--cor);font-style:italic;color:var(--gold);font-size:1.15rem;margin-bottom:2px}
.blog-h1{font-family:var(--min);font-weight:800;color:#fff;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:.1em}

/* --- 2カラム（本文＋サイドバー） --- */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.blog-main{min-width:0}

/* --- 一覧グリッド（特集は横断で全幅） --- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* 特集カード（最新1件・画像＋発光パネルの2分割） */
.blog-feature{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr .9fr;border-radius:18px;overflow:hidden;background:var(--panel);min-height:320px;border:1px solid rgba(198,168,222,.16);transition:border-color .4s,box-shadow .4s}
.blog-feature:hover{border-color:rgba(255,98,166,.5);box-shadow:0 20px 44px rgba(232,32,144,.26)}
.bf-img{min-height:240px;overflow:hidden;position:relative}
.bf-img-in{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s}
.blog-feature:hover .bf-img-in{transform:scale(1.04)}
.bf-body{position:relative;padding:38px 40px;display:flex;flex-direction:column;justify-content:center;gap:11px;background:linear-gradient(135deg,rgba(122,52,192,.5) 0%,rgba(232,32,144,.34) 100%)}
.bf-eng{font-family:var(--jp);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.bf-cat{align-self:flex-start;font-size:.66rem;letter-spacing:.06em;padding:5px 12px;border-radius:20px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff}
.bf-title{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.5;letter-spacing:.04em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bf-date{font-family:var(--cor);font-style:italic;color:rgba(255,255,255,.85);font-size:.85rem}
.bf-ex{color:rgba(255,255,255,.9);font-size:.84rem;line-height:1.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bf-more{font-family:var(--jp);font-size:.72rem;letter-spacing:.14em;color:#fff;font-weight:700;margin-top:4px}
.blog-feature:hover .bf-more{letter-spacing:.18em}

/* 通常カード */
.bcard{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(198,168,222,.16);transition:transform .4s,border-color .4s,box-shadow .4s}
.bcard:hover{transform:translateY(-5px);border-color:rgba(255,98,166,.5);box-shadow:0 16px 34px rgba(232,32,144,.24)}
.bcard-img{position:relative;display:block;aspect-ratio:16/11;overflow:hidden}
.bcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bcard:hover .bcard-img img{transform:scale(1.06)}
.bcard-cat{position:absolute;top:12px;left:12px;font-size:.6rem;letter-spacing:.06em;padding:4px 11px;border-radius:20px;background:rgba(20,8,32,.68);color:#fff;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bcard-b{padding:15px 17px 18px;display:flex;flex-direction:column;gap:6px}
.bcard-date{font-family:var(--cor);font-style:italic;color:var(--pink);font-size:.8rem}
.bcard-title{font-family:var(--min);color:#fff;font-size:.94rem;line-height:1.55;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.arch-empty{color:var(--soft-2);font-size:.92rem;line-height:1.95;padding:20px 0}

/* --- サイドバー --- */
.blog-side{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px}
.side-box{background:rgba(255,255,255,.04);border:1px solid rgba(198,168,222,.16);border-radius:12px;padding:20px 20px 22px}
.side-cocoblog{background:linear-gradient(150deg,rgba(122,52,192,.24),rgba(232,32,144,.16));border-color:rgba(255,98,166,.32)}
.side-h{font-family:var(--min);color:#fff;font-size:1rem;font-weight:600;letter-spacing:.06em;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid rgba(198,168,222,.16)}
.side-note{color:var(--soft-2);font-size:.8rem;line-height:1.85;margin-bottom:14px}
.side-link{display:inline-flex;align-items:center;gap:5px;color:var(--pink);font-size:.82rem;letter-spacing:.03em;font-weight:600;line-height:1.6;transition:color .25s}
.side-link:hover{color:#fff}
.side-search{display:flex;gap:8px}
.side-search input{flex:1;min-width:0;background:rgba(0,0,0,.28);border:1px solid rgba(198,168,222,.3);border-radius:30px;padding:10px 16px;color:#fff;font-family:var(--jp);font-size:.82rem}
.side-search input::placeholder{color:var(--mut)}
.side-search input:focus{outline:none;border-color:var(--pink)}
.side-search button{flex:none;width:42px;height:42px;border:none;border-radius:50%;background:var(--hot);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .25s}
.side-search button:hover{filter:brightness(1.08)}
.side-list{list-style:none;margin:0;padding:0}
.side-list li{margin:0;border-bottom:1px solid rgba(198,168,222,.1)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:block;padding:9px 4px;color:var(--soft-2);font-size:.84rem;transition:color .25s,padding .25s}
.side-list a:hover{color:var(--pink);padding-left:9px}
.side-cat li{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--mut);font-size:.74rem}
.side-cat li a{flex:1;padding:9px 0;border:0}
.side-cat li a:hover{padding-left:6px}

/* --- ページャー --- */
.pager{margin-top:40px;text-align:center}
.pager .page-numbers.current{background:var(--hot);border-color:transparent;color:#fff}
.pager a.page-numbers:hover{border-color:var(--pink);color:#fff}

/* --- CTA（共通の予約バナー） --- */
.hubcta{position:relative;text-align:center;padding:0;background:#2A1150 url('../img/flower-shizuku.jpg') center/cover}
.hubcta::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(106,44,176,.74) 0%,rgba(232,32,144,.6) 40%,rgba(47,182,230,.56) 68%,rgba(245,133,42,.66) 100%)}
.hubcta .mw{position:relative;z-index:1;padding:78px 40px}
.hubcta .eng{color:rgba(255,255,255,.9);display:block;margin-bottom:14px}
.hubcta h2{font-family:var(--min);font-weight:700;color:#fff;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.7;letter-spacing:.06em;margin:0 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hubcta p{color:rgba(255,255,255,.92);font-size:.82rem;margin-bottom:28px;letter-spacing:.04em}
.hubcta .book{background:#fff;color:#8A1E5A}
.hubcta .book:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.34)}

/* --- レスポンシブ --- */
@media(max-width:980px){
  .blog-layout{grid-template-columns:1fr;gap:44px}
  .blog-side{position:static;top:auto}
}
@media(max-width:760px){
  .blog-wrap{padding:96px 0 52px}
  .blog-grid{grid-template-columns:1fr}
  .blog-feature{grid-template-columns:1fr}
  .bf-img{min-height:210px;aspect-ratio:16/9}
  .bf-body{padding:30px 26px}
  .hubcta .mw{padding:62px 24px}
}

/* --- スマホ横はみ出し対策：長い英単語/URLの折り返し＋サイドバーの最小幅 --- */
.blog-side{min-width:0}
.blog-grid,.blog-main,.bf-body{min-width:0}
.bf-title,.bf-ex,.bcard-title,.blog-disp,.side-link,.side-list a,.side-note{overflow-wrap:anywhere}

/* 特集カード：スマホでの配置を明確化（本文＝左揃え・全幅／No Image＝中央／右パディング内に収める） */
.bf-body{text-align:left;align-items:stretch}
.bf-eng,.bf-cat,.bf-title,.bf-date,.bf-ex,.bf-more{max-width:100%}
.bf-img--ni{text-align:center;justify-content:center;align-items:center}

/* 特集カード：スマホは明示的に縦積み（グリッド起因のズレを排除）＋No Imageも本文と同じ左位置へ */
@media(max-width:760px){
  .blog-feature{display:flex;flex-direction:column}
  .bf-img,.bf-img--ni{width:100%}
  .bf-img--ni{justify-content:flex-start;align-items:center}
  .bf-img--ni::after{padding-left:26px}
  .bf-body{text-align:left}
  .bf-eng,.bf-title,.bf-date,.bf-ex,.bf-more{align-self:stretch;text-align:left}
}