@charset "utf-8";
/* =========================================================
   swipe-book.css
   横スワイプ型マガジン記事の共通スタイル（全記事で共有）
   ・記事側は <div id="ish-lp"> で全体を囲むこと
   ・すべて #ish-lp 配下に限定しているため、common.css 等と干渉しません
   ========================================================= */
/* ===== common.css など既存スタイルの打ち消し =====
   LP全体を #ish-lp で囲み、その内側は既存CSS（common.css 等）の指定を
   すべてブラウザ初期値に戻してから、このLP専用の指定だけを当てています。
   （SVGの描画属性は保持するため svg 内は対象外） */
#ish-lp :where(*:not(svg, svg *)),
#ish-lp :where(*:not(svg, svg *))::before,
#ish-lp :where(*:not(svg, svg *))::after{all:revert}
#ish-lp{all:revert;display:block}

#ish-lp{
  --paper:#f4efe4;
  --paper-2:#e9e2d2;
  --ink:#1f2620;
  --ink-soft:#525a52;
  --moss:#4f6b3c;
  --rust:#b0532a;
  --line:rgba(31,38,32,.18);
  --head-h:46px;
  --nav-h:58px;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --latin:"Cormorant Garamond",Georgia,serif;
  --vh:100vh;
}
@supports (height:100dvh){ #ish-lp{ --vh:100dvh; } }

#ish-lp,#ish-lp *,#ish-lp *::before,#ish-lp *::after{box-sizing:border-box;margin:0;padding:0}
html:has(#ish-lp),html:has(#ish-lp) body{height:100%;background:#f4efe4;color:#1f2620;overflow:hidden;overscroll-behavior:none;min-width:0;margin:0;padding:0;font-size:16px}
#ish-lp{font-family:var(--serif);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
#ish-lp img{display:block;max-width:100%}
#ish-lp a{color:inherit}

/* ===== 固定ヘッダー ===== */
#ish-lp .runhead{
  position:fixed;inset:0 0 auto 0;z-index:20;height:calc(var(--head-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);
  background:rgba(244,239,228,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);transition:background .4s,color .4s,border-color .4s;
}
#ish-lp .runhead b{font-family:var(--latin);font-size:17px;letter-spacing:.08em;color:var(--ink);font-weight:500;transition:color .4s}
#ish-lp .runhead.on-cover{background:transparent;border-color:transparent;color:rgba(255,255,255,.85);backdrop-filter:none;-webkit-backdrop-filter:none}
#ish-lp .runhead.on-cover b{color:#fff}

/* ===== ブック本体（横スワイプ） ===== */
#ish-lp .book{
  position:fixed;inset:0;height:var(--vh);
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
#ish-lp .book::-webkit-scrollbar{display:none}
#ish-lp .page{
  position:relative;flex:0 0 100%;width:100%;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  background:var(--paper);
}

/* 見開き：ヘッダーとナビの間に配置。
   横向き（PC・タブレット横）＝ 画像枠 3:4 固定 ＋ 本文
   画像を同じ比率で用意すれば、どの画面でも切れません */
#ish-lp .spread{
  display:flex;height:100%;
  padding:calc(var(--head-h) + env(safe-area-inset-top)) 0 calc(var(--nav-h) + env(safe-area-inset-bottom));
}
#ish-lp .spread.reverse{flex-direction:row-reverse}

#ish-lp .fig{position:relative;overflow:hidden;background:var(--paper-2);flex:none;height:100%;aspect-ratio:3/4;max-width:60%}
#ish-lp .fig picture{display:block;width:100%;height:100%}
#ish-lp .fig img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
#ish-lp .fig.contain{display:flex;align-items:center;justify-content:center;padding:28px 6%}
#ish-lp .fig.contain img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  /* 透過PNGの形に沿って影を付ける（box-shadow だと透明部分ごと四角い影になる） */
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.2))}

/* テキスト列：はみ出しはページ内で縦スクロール */
#ish-lp .text{
  position:relative;flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(24px,5vh,56px) clamp(22px,5vw,72px) 36px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
#ish-lp .text-inner{max-width:34em;margin:0 auto}
#ish-lp .text p{font-size:clamp(14.5px,1.12vw + 6px,17px);line-height:2;letter-spacing:.03em;text-align:justify}
#ish-lp .text p + p{margin-top:1.1em}
#ish-lp .q{font-family:var(--sans);font-weight:500;color:var(--moss);font-size:clamp(13.5px,1vw + 5px,15.5px)!important;line-height:1.9!important;margin-top:1.9em!important}
#ish-lp .q:first-child{margin-top:0!important}
#ish-lp .lead{font-size:clamp(14px,1vw + 6px,16px)!important;color:var(--ink-soft);padding-bottom:1.6em;margin-bottom:1.6em;border-bottom:1px solid var(--line)}
#ish-lp .lead::first-letter{float:left;font-size:3.3em;line-height:1;margin:.06em .12em 0 0;color:var(--rust);font-weight:700}
#ish-lp .note{font-family:var(--sans);font-size:12.5px!important;line-height:1.85!important;color:var(--ink-soft);background:var(--paper-2);padding:14px 16px;margin-top:1.8em!important;border-left:3px solid var(--moss)}

#ish-lp .sec-label{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--rust)}
#ish-lp .sec-label span{font-family:var(--latin);font-size:34px;letter-spacing:0;line-height:1}
#ish-lp h2{font-weight:700;font-size:clamp(21px,1.6vw + 10px,30px);line-height:1.5;letter-spacing:.04em;margin-bottom:1.3em;padding-bottom:.7em;border-bottom:2px solid var(--ink)}

/* 縦スクロールの合図：画面右下（ナビの上）に1つだけ。半透明のガラス風 */
#ish-lp .scroll-hint{
  position:fixed;z-index:19;
  right:max(16px,env(safe-area-inset-right));
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
  display:flex;align-items:center;gap:12px;
  padding:10px 14px 10px 18px;border:0;border-radius:0;cursor:pointer;
  font-family:var(--latin);font-style:italic;font-size:15px;letter-spacing:.28em;color:var(--ink);
  /* すりガラス：ほぼ透明＋強めのぼかし。縁取り・角丸・影なし */
  background:rgba(244,239,228,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:none;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease,background .3s,color .3s,border-color .3s;
}
#ish-lp .scroll-hint.show{opacity:1;transform:none;pointer-events:auto}
#ish-lp .scroll-hint:hover{background:rgba(244,239,228,.3)}
#ish-lp .scroll-hint.dark{color:var(--paper);background:rgba(31,38,32,.16)}
#ish-lp .scroll-hint.dark:hover{background:rgba(31,38,32,.3)}
/* 細いトラックの中を光が流れ落ちるライン */
#ish-lp .scroll-hint i{position:relative;display:block;width:1px;height:30px;overflow:hidden;background:currentColor;opacity:.25}
#ish-lp .scroll-hint b{position:absolute;left:0;top:0;width:1px;height:30px;overflow:hidden}
#ish-lp .scroll-hint b::after{content:"";position:absolute;left:0;top:-14px;width:1px;height:14px;background:var(--rust);animation:drip 1.8s cubic-bezier(.6,0,.3,1) infinite}
#ish-lp .scroll-hint.dark b::after{background:#d3b98f}
#ish-lp .scroll-hint .line{position:relative;width:1px;height:30px}
@keyframes drip{0%{transform:translateY(0)}70%,100%{transform:translateY(44px)}}

/* 引用文は1行ずつ改行（行の途中では折り返さない） */
#ish-lp .ln{display:block;white-space:nowrap}
#ish-lp .tcy{text-combine-upright:all;-webkit-text-combine:horizontal}

/* プルクオート（画像上）：枠の高さから文字サイズを自動計算し、意図しない折り返しを防ぐ */
#ish-lp .pull{
  position:absolute;z-index:2;color:#fff;font-weight:700;letter-spacing:.06em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
#ish-lp .fig.has-pull::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.25) 100%);pointer-events:none}
#ish-lp .pull.vertical{
  top:28px;right:clamp(18px,3vw,44px);
  writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:upright;
  /* 最長行15文字が画像の高さに収まるサイズ */
  font-size:min(calc((var(--vh) - var(--head-h) - var(--nav-h) - 60px) / 16.6), 32px);
  line-height:1.8;
}

/* ===== 表紙 ===== */
#ish-lp .cover{color:#fff}
#ish-lp .cover .bg{position:absolute;inset:0}
#ish-lp .cover .bg picture,#ish-lp .quote-page .bg picture{display:block;width:100%;height:100%}
#ish-lp .cover .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
#ish-lp .cover .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,12,.72) 0%,rgba(10,18,12,.35) 48%,rgba(10,18,12,.05) 75%),linear-gradient(0deg,rgba(10,18,12,.5) 0%,rgba(10,18,12,0) 40%)}
/* 横向き：文字ブロックを画面中央まで広げる */
#ish-lp .cover .copy{
  position:absolute;z-index:2;left:clamp(22px,6vw,96px);right:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + clamp(28px,8vh,90px));
}
/* 日本語を文節（.ph）単位でだけ折り返す */
#ish-lp .cover .copy .ph{display:inline-block}
#ish-lp .cover .copy{word-break:keep-all;overflow-wrap:anywhere}
#ish-lp .kicker{font-family:var(--sans);font-size:12px;letter-spacing:.14em;opacity:.9;margin-bottom:22px;display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.55)}
#ish-lp .cover .si{font-family:var(--latin);font-style:italic;font-size:clamp(18px,1.6vw + 8px,26px);letter-spacing:.12em;opacity:.95}
#ish-lp .cover .sub{font-size:clamp(14px,1vw + 8px,18px);letter-spacing:.1em;margin:.4em 0 .5em}
/* 「低山ハイキングと」(約8.5文字分) が左端〜画面中央の幅に収まるサイズ */
#ish-lp .cover h1{font-size:clamp(28px,calc((50vw - 6vw) / 8.8),88px);line-height:1.3;letter-spacing:.06em;font-weight:700}
/* 「」などの約物の余白を詰める（プロポーショナル字形） */
#ish-lp .cover h1,#ish-lp .cover .sub,#ish-lp .kicker{font-feature-settings:"palt" 1}
#ish-lp .cover h1 em{font-style:normal;color:#f2c88d}
#ish-lp .swipe-hint{margin-top:28px;font-family:var(--sans);font-size:12px;letter-spacing:.2em;display:flex;align-items:center;gap:10px;opacity:.9}
#ish-lp .swipe-hint i{display:block;width:44px;height:1px;background:#fff;position:relative;animation:hint 1.8s ease-in-out infinite}
#ish-lp .swipe-hint i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)}
@keyframes hint{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}

/* ===== 見開き引用ページ ===== */
#ish-lp .quote-page .bg{position:absolute;inset:0}
#ish-lp .quote-page .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
#ish-lp .quote-page .bg::after{content:"";position:absolute;inset:0;background:rgba(10,18,12,.42)}
#ish-lp .quote-page blockquote{
  /* 横向き：画面の左半分の中央に配置（右側の人物と重ならない） */
  position:absolute;z-index:2;inset:calc(var(--head-h) + 24px) 50% calc(var(--nav-h) + 24px) 24px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
#ish-lp .quote-page blockquote p{
  writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:upright;
  /* 最長行17文字が画面の高さに、4行が画面の幅に収まるサイズを自動計算 */
  font-size:min(calc((var(--vh) - var(--head-h) - var(--nav-h) - 110px) / 18.9), calc((50vw - 64px) / 9), 40px);
  line-height:2;letter-spacing:.08em;font-weight:600;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
#ish-lp .quote-page cite{position:absolute;left:0;bottom:0;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.18em;opacity:.85}

/* ===== 最終ページ ===== */
#ish-lp .colophon{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper)}
#ish-lp .colophon .text{width:100%;height:100%;padding-top:calc(var(--head-h) + env(safe-area-inset-top) + clamp(24px,5vh,56px));padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 36px)}
#ish-lp .colophon .text-inner{max-width:38em}
#ish-lp .colophon .name{font-size:clamp(24px,2vw + 10px,34px);font-weight:700;letter-spacing:.1em}
#ish-lp .colophon .name small{display:block;font-family:var(--latin);font-size:.5em;letter-spacing:.24em;font-weight:500;opacity:.75;margin-top:.2em}
#ish-lp .colophon .role{font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:#d3b98f;margin:20px 0 8px}
#ish-lp .colophon p{color:rgba(244,239,228,.9)}
#ish-lp .books,#ish-lp .credit{margin-top:26px;padding-top:20px;border-top:1px solid rgba(244,239,228,.25);font-family:var(--sans);font-size:13px;line-height:1.9;color:rgba(244,239,228,.8)}
#ish-lp .books dt,#ish-lp .credit dt{letter-spacing:.16em;font-size:11px;color:#d3b98f;margin-bottom:6px}
#ish-lp .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
#ish-lp .btn{
  font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-decoration:none;cursor:pointer;
  padding:13px 22px;border:1px solid rgba(244,239,228,.6);background:transparent;color:var(--paper);transition:background .2s,color .2s
}
#ish-lp .btn:hover{background:var(--paper);color:var(--ink)}
#ish-lp .btn.solid{background:#d3b98f;border-color:#d3b98f;color:var(--ink)}
#ish-lp .btn.solid:hover{background:var(--paper);border-color:var(--paper)}
#ish-lp .colophon .text-inner{max-width:56em}
#ish-lp .profile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
#ish-lp .profile-photo{width:clamp(160px,min(34vh,28vw),360px);aspect-ratio:1/1;overflow:hidden;background:#2c352d}
#ish-lp .profile-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}

/* ===== ナビゲーション ===== */
#ish-lp .nav{
  position:fixed;inset:auto 0 0 0;z-index:20;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding:0 max(10px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:14px;
  background:rgba(244,239,228,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);
  font-family:var(--sans);transition:background .4s,border-color .4s,color .4s;
}
#ish-lp .nav.dark{background:rgba(31,38,32,.7);border-color:transparent;color:var(--paper)}
#ish-lp .nav button{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;
  display:grid;place-items:center;cursor:pointer;transition:opacity .2s,background .2s;-webkit-tap-highlight-color:transparent
}
#ish-lp .nav button:hover:not(:disabled){background:rgba(127,127,127,.15)}
#ish-lp .nav button:disabled{opacity:.25;cursor:default}
#ish-lp .nav button svg{width:16px;height:16px}
#ish-lp .progress{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
#ish-lp .counter{font-family:var(--latin);font-size:18px;letter-spacing:.06em;white-space:nowrap}
#ish-lp .counter small{font-size:.75em;opacity:.6}
#ish-lp .bar{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
#ish-lp .nav.dark .bar{background:rgba(244,239,228,.25)}
#ish-lp .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--rust);transition:width .35s ease}
#ish-lp .dots{display:flex;gap:6px}
#ish-lp .dots button{width:8px;height:8px;border:0;border-radius:50%;background:currentColor;opacity:.25;padding:0}
#ish-lp .dots button[aria-current="true"]{opacity:1;background:var(--rust)}
#ish-lp .nav.dark .dots button[aria-current="true"]{background:#d3b98f}

/* ===== 縦向き（スマホ・タブレット縦）＝ 画像が上・本文が下 =====
   ※ <picture> の出し分け条件と同じ境界にしています */
@media (orientation:portrait){
  #ish-lp .spread,#ish-lp .spread.reverse{flex-direction:column}
  #ish-lp .fig{width:100%;height:auto;max-width:none;aspect-ratio:4/3}  /* スマホ：4:3 */
  #ish-lp .spread .text{padding-top:clamp(20px,3.5vh,36px)}
  #ish-lp .fig.contain{padding:14px 10%}
  #ish-lp .pull.vertical{
    writing-mode:horizontal-tb;-webkit-writing-mode:horizontal-tb;
    top:auto;right:18px;left:18px;bottom:14px;
    font-size:min(calc((100vw - 40px) / 16.2), 30px);line-height:1.6;
  }
  #ish-lp .cover .copy{right:22px}
  #ish-lp .cover h1{font-size:min(calc((94vw - 22px) / 8.8), 72px)}
  #ish-lp .profile{grid-template-columns:1fr;justify-items:start}
  #ish-lp .profile{justify-items:stretch}
  #ish-lp .profile-photo{width:100%}
  /* 6ページ目：スマホ・タブレット縦は左上に小さめに（顔と重ならない） */
  /* 6ページ目（縦向き）：引用文は画面の下側に横書き。上半分の顔にかからない */
  #ish-lp .quote-page .bg::after{background:linear-gradient(0deg,rgba(10,18,12,.82) 0%,rgba(10,18,12,.55) 30%,rgba(10,18,12,.08) 62%,rgba(10,18,12,.18) 100%)}
  #ish-lp .quote-page blockquote{
    inset:auto 22px calc(var(--nav-h) + env(safe-area-inset-bottom) + 22px) 22px;
    display:block;
  }
  #ish-lp .quote-page blockquote p{
    writing-mode:horizontal-tb;-webkit-writing-mode:horizontal-tb;
    /* 最長行17文字が画面幅に収まるサイズ */
    font-size:min(calc((100vw - 44px) / 18.4), 28px);line-height:1.75;letter-spacing:.06em;
  }
  #ish-lp .quote-page cite{position:static;display:block;margin-top:16px}
  #ish-lp .fig.has-pull::after{background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 60%)}
  #ish-lp .cover .bg::after{background:linear-gradient(0deg,rgba(10,18,12,.82) 0%,rgba(10,18,12,.35) 55%,rgba(10,18,12,.15) 100%)}
  #ish-lp .dots{display:none}
}
/* タブレット縦：3:2 */
@media (orientation:portrait) and (min-width:600px){
  #ish-lp .fig{aspect-ratio:3/2}
}

/* ===== 横長の画像枠（.fig.wide）：全端末 4:3 固定 =====
   横構図の写真用。横向きは画面高さに収まる幅で上下中央に配置、縦向きは画面幅いっぱい */
#ish-lp .fig.wide{
  aspect-ratio:4/3;height:auto;align-self:center;max-width:none;
  width:min(58%, calc((var(--vh) - var(--head-h) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3));
}
@media (orientation:portrait){
  #ish-lp .fig.wide{width:100%;align-self:auto}
}
/* 横長の枠に載る縦書き引用文：枠の高さ（100cqh）から文字サイズを決める（最長行15文字が収まる） */
#ish-lp .fig.wide{container-type:size}
@media (orientation:landscape){
  #ish-lp .fig.wide .pull.vertical{font-size:min(calc((100cqh - 56px) / 16.6), 32px)}
}
/* 背の低い横画面（スマホ横持ちなど） */
@media (orientation:landscape) and (max-height:520px){
  #ish-lp{--head-h:38px;--nav-h:48px}
  #ish-lp .nav button{width:36px;height:36px}
  #ish-lp .cover h1{font-size:min(calc((50vw - 6vw) / 8.8), 40px)}
  #ish-lp .kicker{margin-bottom:10px}
  #ish-lp .swipe-hint{margin-top:14px}
  #ish-lp .quote-page blockquote p{
    writing-mode:horizontal-tb;-webkit-writing-mode:horizontal-tb;line-height:1.7;
    font-size:min(calc((50vw - 48px) / 18.4), calc((var(--vh) - var(--head-h) - var(--nav-h) - 90px) / 7.4), 28px);
  }
  #ish-lp .dots{display:none}
}
@media (max-width:420px){
  #ish-lp .runhead .r{display:none}
  #ish-lp .kicker{font-size:10.5px;letter-spacing:.06em;padding:5px 9px}
}
@media (prefers-reduced-motion:reduce){
  #ish-lp .swipe-hint i,#ish-lp .scroll-hint b::after{animation:none}
  #ish-lp .book{scroll-behavior:auto}
}

/* ===== 複数写真スライドショー（5・7ページ目） =====
   画像エリアいっぱいに1枚ずつ表示し、自動でクロスフェード。右下のサムネイル・左右タップでも切替 */
#ish-lp .gallery .g{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s;background:var(--paper-2)}
#ish-lp .gallery.show-gallery .g{opacity:1;pointer-events:auto}
#ish-lp .gallery.show-gallery > picture{visibility:hidden}
#ish-lp .gallery .g > img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--fp,50% 50%);
  opacity:0;transition:opacity 1s ease;
}
#ish-lp .gallery .g > img.is-active{opacity:1}
/* 左右タップ領域（見た目なし） */
#ish-lp .g-tap{position:absolute;top:0;bottom:0;width:30%;z-index:2;cursor:pointer;background:transparent;border:0;padding:0;-webkit-tap-highlight-color:transparent}
#ish-lp .g-tap.prev{left:0}
#ish-lp .g-tap.next{right:0}
/* サムネイル＋番号（すりガラス） */
#ish-lp .g-ui{
  position:absolute;z-index:3;left:14px;bottom:14px;
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;
  background:rgba(20,26,22,.22);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  color:#fff;
}
#ish-lp .g-count{font-family:var(--latin);font-size:15px;letter-spacing:.08em;min-width:3.6em;white-space:nowrap}
#ish-lp .g-count small{font-size:.8em;opacity:.7}
#ish-lp .g-thumbs{display:flex;gap:6px}
#ish-lp .g-thumbs button{
  position:relative;display:block;width:42px;height:42px;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:#000;opacity:.55;transition:opacity .3s;-webkit-tap-highlight-color:transparent;
}
#ish-lp .g-thumbs button img{display:block;width:100%;height:100%;object-fit:cover}
#ish-lp .g-thumbs button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#fff}
#ish-lp .g-thumbs button[aria-current="true"]{opacity:1}
#ish-lp .g-thumbs button[aria-current="true"]::after{width:100%;transition:width var(--g-dur,4.5s) linear}
#ish-lp .gallery.paused .g-thumbs button[aria-current="true"]::after{width:100%;transition:none}
#ish-lp .g-thumbs button:hover{opacity:.9}
@media (orientation:portrait){
  #ish-lp .g-ui{left:10px;bottom:10px;padding:6px 8px 6px 10px;gap:8px}
  #ish-lp .g-thumbs button{width:34px;height:34px}
  #ish-lp .g-count{font-size:13px}
}
@media (orientation:landscape) and (max-height:520px){
  #ish-lp .g-thumbs button{width:30px;height:30px}
  #ish-lp .g-ui{top:10px;bottom:auto;left:10px;padding:5px 7px 5px 9px;gap:7px}
}

/* ===== 写真クレジット（画像の右下に小さく表示） ===== */
#ish-lp .photo-credit{
  position:absolute;z-index:3;right:10px;bottom:10px;margin:0;pointer-events:none;
  padding:5px 10px;font-family:var(--sans);font-size:11px;line-height:1.4;letter-spacing:.08em;color:#fff;
  /* 番号・サムネイルの帯と同じすりガラス（明るい写真の上でも読める） */
  background:rgba(20,26,22,.34);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
}