@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   page-guests.css — お客様の声（ハブ /guests/ と 各月 /guests/{YYYY_MM}/）
   下層ページの器（.page:not(.ska-flush)）が上余白・中央寄せ・本文幅を持つ。
   色は theme.css の変数。白基調・明朝で整える。
   ══════════════════════════════════════════════════════════════════════ */

.guests-hub,.guests-item{width:100%}

/* ── 導入文 ── */
.gv-intro,.voice-intro{margin:clamp(18px,2.4vw,28px) 0 0;padding:0 clamp(20px,3.4vw,52px);max-width:46em;
 font-family:var(--f-body);font-size:14px;line-height:2.1;letter-spacing:.04em;color:var(--moji)}
.gv-intro small,.voice-intro small{font-size:12px;color:var(--moji-2)}

/* ══ ハブ ══════════════════════════════════════════════════════════════ */
/* 最新月（大きく） */
.gv-feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;
 margin:clamp(30px,4vw,52px) 0 0;padding:0 clamp(20px,3.4vw,52px) clamp(30px,3.6vw,44px);
 border-bottom:1px solid var(--keisen);text-decoration:none;color:inherit}
.gv-feat-img{margin:0;overflow:hidden;background:var(--ji-2);aspect-ratio:4/3}
.gv-feat-img img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:var(--shashin);transition:transform 3s var(--ease)}
.gv-feat:hover .gv-feat-img img{transform:scale(1.04)}
.gv-feat-img--none{aspect-ratio:4/3;background:var(--ji-2)}
.gv-feat-b{display:flex;flex-direction:column;gap:8px}
.gv-feat-tag{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--enji)}
.gv-feat-ttl{font-family:var(--f-disp);font-weight:600;font-size:clamp(22px,3vw,34px);letter-spacing:.05em;line-height:1.4;color:var(--midashi)}
.gv-feat-sub{display:inline-flex;align-items:center;gap:.5em;font-size:13px;letter-spacing:.06em;color:var(--kogane-moji)}
.gv-feat-sub i{font-style:normal;color:var(--kogane);transition:transform .34s var(--ease)}
.gv-feat:hover .gv-feat-sub i{transform:translateX(5px)}

/* 当年のグリッド */
.gv-grid{margin:clamp(28px,3.6vw,44px) 0 0;padding:0 clamp(20px,3.4vw,52px);
 display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(18px,2.4vw,30px)}
.gv-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.gv-shot{margin:0;overflow:hidden;background:var(--ji-2);aspect-ratio:3/2}
.gv-shot img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:var(--shashin);transition:transform 3s var(--ease)}
.gv-card:hover .gv-shot img{transform:scale(1.045)}
.gv-shot--none{aspect-ratio:3/2;background:var(--ji-2)}
.gv-nm{display:flex;align-items:center;gap:.4em;margin-top:11px;
 font-family:var(--f-disp);font-weight:600;font-size:clamp(14px,1.6vw,16px);letter-spacing:.04em;color:var(--midashi)}
.gv-nm i{font-style:normal;font-size:.85em;color:var(--kogane);transition:transform .34s var(--ease)}
.gv-card:hover .gv-nm i{transform:translateX(4px)}

/* これまでの月（テキスト一覧） */
.gv-past{margin:clamp(40px,5vw,66px) 0 0;padding:clamp(30px,3.6vw,44px) clamp(20px,3.4vw,52px) 0;border-top:1px solid var(--keisen)}
.gv-past-h{margin:0;font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,1.9vw,20px);letter-spacing:.05em;color:var(--midashi)}
.gv-past-note{margin:10px 0 0;font-size:12px;line-height:1.9;color:var(--moji-2)}
.gv-past-list{margin:clamp(16px,2vw,22px) 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px clamp(14px,2vw,26px)}
.gv-past-item{font-family:var(--f-disp);font-size:13.5px;letter-spacing:.04em;color:var(--moji);text-decoration:none;
 padding:5px 0 5px 15px;position:relative;transition:color .3s var(--ease)}
.gv-past-item::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--kogane)}
.gv-past-item:hover{color:var(--enji)}

.gv-end{margin:clamp(40px,5.4vw,70px) 0 0;padding:0 clamp(20px,3.4vw,52px);display:flex}

@media (max-width:640px){
	.gv-feat{grid-template-columns:1fr;gap:16px}
	.gv-grid{grid-template-columns:1fr 1fr}
}

/* ══ 各月（写真集・masonry）══════════════════════════════════════════════ */
.voice-masonry{margin:clamp(26px,3.4vw,42px) 0 0;padding:0 clamp(20px,3.4vw,52px);
 columns:4 230px;column-gap:clamp(14px,1.8vw,22px)}
.voice-card{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,22px);
 border:1px solid var(--keisen);background:var(--ji);overflow:hidden}
/* 画像は元の縦横比のまま（横長は横長のまま／カットしない）。ただし height:auto だけだと、
   遅延読み込みで高さが後から決まり、CSS の段組み（columns）では並びが入れ替わって見える。
   そこで JS 対応時は各カードを固定の列へ一度だけ振り分け（下の --js）、列内でしか動かない
   ようにして並び替えを防ぐ（心花雫と同じ方式）。JS 非対応時は columns にフォールバック。 */
.voice-card img{display:block;width:100%;height:auto;filter:var(--shashin);cursor:zoom-in;background:var(--ji-2)}
/* JS対応時：カードを固定列へ振り分ける flex メイソンリー。 */
.voice-masonry--js{columns:initial;column-count:initial;display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start}
.voice-masonry--js .voice-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.voice-masonry--js .voice-card{margin:0}
.voice-card figcaption{padding:11px 13px 13px;font-family:var(--f-body);font-size:12.5px;line-height:1.95;letter-spacing:.02em;color:var(--moji)}

/* 貼り付け式（本文）の月 */
.voice-body{margin:clamp(26px,3.4vw,42px) 0 0;padding:0 clamp(20px,3.4vw,52px)}
.voice-body p{margin:0 0 1em}
.voice-body img{max-width:100%;height:auto}

.voice-back{margin:clamp(40px,5.4vw,70px) 0 0;padding:0 clamp(20px,3.4vw,52px);display:flex}

@media (max-width:520px){
	.voice-masonry{columns:2 150px;column-gap:12px}
	.voice-card{margin-bottom:12px}
	.voice-card figcaption{font-size:12px;padding:10px 11px}
}