/* =====================================================================
   スグやるゾウ ホームページ  css/gallery.css
   旅の記録・3Dプリンター作品ページ用（style.css のあとに読み込みます）
   ===================================================================== */

/* ページごとの色（旅＝ピーチ、3D＝ブルー） */
body[data-gallery="travel"]{--g-accent:var(--sy-peach);--g-tint:#FBEDE3}
body[data-gallery="3dprint"]{--g-accent:var(--sy-blue);--g-tint:#E6EEF3}

/* ページ上部 */
.g-hero{background:var(--g-accent);border-bottom:2px solid var(--sy-ink);padding:24px 0 40px}
.g-hero h1{font-weight:900;font-size:clamp(32px,5vw,56px);line-height:1.2;margin:6px 0 12px}
.g-hero .lead-txt{max-width:640px;font-size:clamp(14px,1.6vw,16px);line-height:1.9;margin:0}
.crumb{font-size:13px;font-weight:700;color:var(--sy-muted);margin-bottom:10px}
.crumb a{color:var(--sy-ink)}
.home-btn{flex:none;text-decoration:none}

/* ギャラリー見出し・矢印 */
.g-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.g-nav{display:flex;align-items:center;gap:10px;flex:none}
.g-nav[hidden]{display:none}
.g-counter{font-family:var(--sy-en);font-weight:700;min-width:62px;text-align:right}
.g-arrow{width:48px;height:48px;border-radius:50%;border:2px solid var(--sy-ink);background:var(--g-accent);color:var(--sy-ink);display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:3px 3px 0 var(--sy-ink);transition:transform .2s,box-shadow .2s,opacity .2s}
.g-arrow:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--sy-ink)}
.g-arrow:disabled{opacity:.35;cursor:default}
@media (max-width:575.98px){.g-arrow{width:44px;height:44px}}

/* 横スライド（スマホは指でスワイプ、PCは矢印ボタン） */
.g-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 6px 14px;margin:20px -6px 0;scrollbar-width:none;overscroll-behavior-x:contain}
.g-track::-webkit-scrollbar{display:none}
.g-card{flex:0 0 340px;scroll-snap-align:start;border:2px solid var(--sy-ink);border-radius:18px;overflow:hidden;background:var(--g-tint);display:flex;flex-direction:column}
@media (max-width:575.98px){.g-track{gap:16px}.g-card{flex-basis:80%}}
.g-cover{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;border-bottom:2px solid var(--sy-ink);padding:0;background:var(--sy-mint);cursor:pointer;overflow:hidden}
.g-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.g-cover:hover img{transform:scale(1.04)}
.g-no{position:absolute;top:10px;left:12px;font-family:var(--sy-en);line-height:1;color:var(--sy-ink);text-align:left;background:rgba(250,250,246,.85);border-radius:10px;padding:6px 8px}
.g-no small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em}
.g-no b{font-size:28px}
.g-count{position:absolute;right:10px;bottom:10px;background:var(--sy-ink);color:var(--sy-paper);font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px}
.g-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex-grow:1}
.g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:700}
.g-meta time{font-family:var(--sy-en);color:var(--sy-muted)}
.g-tag{background:var(--sy-paper);border:1.5px solid var(--sy-ink);border-radius:12px;padding:1px 10px}
.g-title{font-size:17px;font-weight:900;line-height:1.5;margin:0}
.g-text{font-size:13px;line-height:1.8;color:var(--sy-muted);margin:0;flex-grow:1}
.g-open{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--sy-ink);border-radius:22px;background:var(--sy-paper);color:var(--sy-ink);font-weight:700;font-size:13px;transition:background .2s}
.g-open:hover{background:#fff}
.g-progress{flex-grow:1;height:4px;background:var(--sy-line);border-radius:2px;overflow:hidden}
.g-progress span{display:block;height:100%;width:0;background:var(--sy-ink);border-radius:2px;transition:width .3s}
.g-empty{border:2px dashed #8E9693;border-radius:18px;padding:40px 20px;text-align:center;color:var(--sy-muted);margin-top:20px}

/* 写真が無いときの枠 */
.g-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;color:var(--sy-muted)}
.g-ph svg{width:34px;height:34px}

/* ポップアップ（写真ギャラリー） */
html.g-lock{overflow:hidden}
.g-dialog{width:min(1100px,calc(100% - 20px));max-height:calc(100dvh - 20px);padding:0;border:2px solid var(--sy-ink);border-radius:20px;background:var(--sy-paper);color:var(--sy-ink);box-shadow:8px 8px 0 var(--g-accent);overflow:auto}
.g-dialog::backdrop{background:rgba(43,45,47,.62)}
.g-dialog[open]{animation:gPop .25s ease}
@keyframes gPop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.g-dlg-in{padding:16px;display:flex;flex-direction:column;gap:14px}
@media (min-width:768px){.g-dlg-in{padding:28px 32px 32px}}
.g-dlg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:var(--sy-muted)}
.g-close{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:2px solid var(--sy-ink);border-radius:22px;background:var(--sy-paper);color:var(--sy-ink);font-weight:700;font-size:13px}
.g-dlg-grid{display:grid;gap:16px}
.g-dlg-grid>*{min-width:0}
@media (min-width:992px){.g-dlg-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}}
.g-main{position:relative;aspect-ratio:4/3;border:2px solid var(--sy-ink);border-radius:14px;overflow:hidden;background:var(--sy-mint);touch-action:pan-y}
.g-main img{width:100%;height:100%;object-fit:contain;background:#1F2123}
.g-main .g-arrow{position:absolute;top:50%;transform:translateY(-50%);background:var(--sy-paper);box-shadow:none}
.g-main .g-arrow:hover{transform:translateY(-50%)}
.g-main .prev{left:10px}.g-main .next{right:10px}
.g-pcount{position:absolute;right:10px;bottom:10px;background:var(--sy-ink);color:var(--sy-paper);font-family:var(--sy-en);font-weight:700;font-size:13px;padding:3px 12px;border-radius:12px}
.g-cap{font-size:13px;line-height:1.7;color:var(--sy-muted);margin:8px 0 0;min-height:1.7em}
.g-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
@media (min-width:992px){.g-thumbs{flex-wrap:wrap;overflow:visible}}
.g-thumb{flex:0 0 76px;height:57px;border-radius:8px;border:2px solid var(--sy-line);padding:0;overflow:hidden;background:var(--sy-mint);opacity:.7;transition:opacity .2s,border-color .2s}
.g-thumb img{width:100%;height:100%;object-fit:cover}
.g-thumb .g-ph{font-family:var(--sy-en);font-size:13px;color:var(--sy-ink)}
.g-thumb .g-ph svg,.g-thumb .g-ph-l{display:none}
.g-ph em{font-style:normal}
.g-thumb[aria-current="true"]{opacity:1;border:3px solid var(--sy-ink)}
.g-info{display:flex;flex-direction:column;gap:12px}
.g-info .g-no{position:static;background:none;padding:0}
.g-info h2{font-size:clamp(20px,2.2vw,24px);font-weight:900;line-height:1.45;margin:0}
.g-info p{margin:0;font-size:14px;line-height:1.9}

/* 下の段（関連リンク） */
.g-links{display:grid;gap:20px}
@media (min-width:992px){.g-links{grid-template-columns:2fr 1fr 1fr}}
.g-box{border:2px solid var(--sy-ink);border-radius:18px;background:var(--sy-paper);padding:24px 28px;box-shadow:5px 5px 0 var(--sy-mint)}
.g-other{border:2px dashed var(--sy-muted);border-radius:18px;padding:20px 24px;text-decoration:none;color:var(--sy-ink);display:flex;flex-direction:column;justify-content:center;gap:4px;transition:background .2s}
.g-other:hover{background:#fff;color:var(--sy-ink)}
.g-home{border:2px solid var(--sy-ink);border-radius:18px;background:var(--sy-mint);padding:16px 24px;text-decoration:none;color:var(--sy-ink);font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .25s,box-shadow .25s}
.g-home:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--sy-ink);color:var(--sy-ink)}