/* 伊丹市ページ【テスト版】：地図でめぐる墓地・霊園めぐり と 写真の見せ方3種 */

/* 元の「くねくねの点線」は、スマホでは背景にうっすら残す（PCは左の地図があるので隠す） */
.rb-route{opacity:.32}
.rb-route__walker{display:none}

/* ===================== 地図 ===================== */
.im-tour{position:relative;padding:0 var(--rb-g)}
.im-map__card{position:relative;margin:26px auto 0;max-width:620px;padding:18px 14px 14px;border-radius:28px;background:
  radial-gradient(120% 90% at 20% 0%,#fffef8 0%,#fbf8ee 60%,#f6f1e2 100%);box-shadow:0 22px 40px -30px hsl(var(--th) 40% 20% / .55),0 0 0 1px hsl(var(--th) 30% 40% / .08)}
.im-map__title{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:2px 0 4px;font-family:var(--mincho);font-size:16px;font-weight:600;letter-spacing:.12em;color:var(--wine-deep)}
.im-map__title span{font-family:var(--mincho);font-size:10px;letter-spacing:.28em;color:var(--gold)}
.im-map__svg{display:block;width:100%;height:auto;overflow:visible}
.im-map__note{margin:6px 6px 0;font-size:11px;line-height:1.7;color:var(--muted);text-align:center}
.im-label{font-family:var(--maru);font-weight:700;fill:#6d6250;font-size:34px;paint-order:stroke;stroke:#fffdf6;stroke-width:8px;stroke-linejoin:round}
.im-label--small{font-size:30px;fill:#7b705e}
.im-label--tiny{font-size:26px;fill:#7b705e}
.im-label--water{font-size:26px;fill:#6e9db8;letter-spacing:.2em}
.im-label--city{font-family:var(--mincho);font-size:44px;font-weight:600;letter-spacing:.24em;fill:hsl(var(--th) 40% 30% / .55);stroke-width:0}
.im-credit{font-size:13px;fill:#a59c8b;font-family:var(--sans)}
.im-route{stroke:#d9c49a;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 15}
.im-route-done{stroke:#c9a46a;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 99999}
.im-pin__drop{fill:#fffdf9;stroke:var(--wine);stroke-width:3;transition:fill .4s,transform .45s var(--ease)}
.im-pin__shadow{fill:hsl(var(--th) 30% 20% / .16)}
.im-pin__no{font-family:var(--mincho);font-size:20px;font-weight:700;fill:var(--wine);pointer-events:none;transition:fill .4s}
.im-pin__name{font-size:36px;fill:var(--wine-deep);opacity:.8;transition:opacity .4s}
.im-pin a{transform:scale(1.7);transition:transform .45s var(--ease)}
.im-pin.is-on a{transform:scale(2)}
.im-pin a{cursor:pointer}
.im-pin a:focus-visible .im-pin__drop{stroke-width:5}
.im-pin.is-done .im-pin__drop{fill:#f3ead8;stroke:#c9a46a}
.im-pin.is-done .im-pin__no{fill:#a58350}
.im-pin.is-on .im-pin__drop{fill:var(--wine)}
.im-pin.is-on .im-pin__no{fill:#fff}
.im-pin.is-on .im-pin__name{opacity:1}
.im-start rect{fill:var(--gold)}
.im-start text{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.12em;fill:#fff}
.im-van__body{transition:transform .35s var(--ease)}
.im-van.is-left .im-van__body{transform:scaleX(-1)}
.im-van__body image{animation:im-van-bob 1.1s ease-in-out infinite alternate}
.im-compass circle{fill:#fffdf6;stroke:#e4dccb;stroke-width:2}
.im-compass path{fill:var(--wine)}
.im-compass text{font-family:var(--mincho);font-size:16px;font-weight:700;fill:var(--wine)}
.im-kura,.im-house{filter:drop-shadow(0 3px 0 rgba(120,100,70,.12))}
@keyframes im-van-bob{from{transform:translateY(0)}to{transform:translateY(-2px)}}

/* スマホ：各墓地の見出しの上の地図（前の墓地からここまで車が進む） */
.im-map{display:none}
.im-stopmap{position:relative;z-index:2;margin:0 calc(-1 * var(--rb-g) + 6px) 26px;padding:12px 6px 6px;border-radius:24px;
  background:radial-gradient(120% 90% at 20% 0%,#fffef8 0%,#fbf8ee 60%,#f6f1e2 100%);box-shadow:0 18px 34px -28px hsl(var(--th) 40% 20% / .55),0 0 0 1px hsl(var(--th) 30% 40% / .08)}
.im-stopmap__title{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 2px;font-family:var(--mincho);font-size:16px;font-weight:600;letter-spacing:.08em;color:var(--wine-deep)}
.im-stopmap__title b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;border:1.5px solid #c9a46a;color:#a58350;font-size:13px;letter-spacing:0}
.im-stopmap__title b:last-of-type{background:var(--wine);border-color:var(--wine);color:#fff}
.im-stopmap__arrow{width:22px;height:2px;margin:0 -2px;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 7px);position:relative}
.im-stopmap__arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--gold);border-right:0}
.im-stopmap .im-pin:not(.is-on) .im-pin__name{opacity:.45}
.im-stopmap .im-credit{font-size:18px}
.rb-stop .im-stopmap + .rb-stop__head{margin-top:4px}

@media (min-width:960px){
  .rb-route,.im-stopmap{display:none}
  .im-map{display:block}
  .im-tour{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(36px,4.5vw,72px);max-width:1220px;margin:0 auto}
  .im-map{grid-column:1;grid-row:1 / span 5;position:sticky;top:calc(var(--hd) + 26px);align-self:start;padding-top:70px}
  .im-map__card{margin:0;max-width:none}
  .im-label{font-size:28px}.im-label--small{font-size:25px}.im-label--tiny{font-size:22px}.im-label--water{font-size:22px}
  .im-pin__name{font-size:30px}
  .im-pin a{transform:scale(1.35)}
  .im-pin.is-on a{transform:scale(1.6)}
  .im-tour .rb-stop{grid-column:2;display:block;max-width:600px;padding-top:96px}
  .im-tour .rb-stop:first-of-type{padding-top:70px}
  .im-tour .rb-card{margin-top:40px}
  .im-tour .rb-stop:nth-of-type(even) .rb-stop__head{justify-content:flex-start;text-align:left}
  .im-tour .rb-stop:nth-of-type(even) .rb-stop__head .rb-pin{order:0}
  .im-tour .rb-stop:nth-of-type(n) .rb-stage,.im-tour .rb-stop:nth-of-type(n) .rb-card{grid-column:auto;grid-row:auto}
}

/* ===================== 写真の見せ方（共通） ===================== */
.tg{margin-top:36px}
.tg .rb-strip__label{margin-bottom:12px}
.tg-count{font-family:var(--mincho);font-size:11px;letter-spacing:.06em;color:var(--sub)}
.tg-count b{font-size:14px;color:var(--wine);font-weight:600}
.tg-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid hsl(var(--th) 40% 30% / .25);border-radius:50%;background:rgba(255,255,255,.92);color:var(--wine);cursor:pointer;transition:background .25s,transform .25s}
.tg-arrow::before{content:"";width:9px;height:9px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:translateX(-2px) rotate(45deg)}
.tg-arrow--prev::before{transform:translateX(2px) rotate(-135deg)}
.tg-arrow:hover{background:#fff;transform:scale(1.06)}
.tg-arrow:focus-visible{outline:2px solid var(--wine);outline-offset:3px}

/* 1. スライドショー */
.tg-show__frame{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#e9eef2;box-shadow:0 22px 36px -26px hsl(var(--th) 40% 18% / .7)}
.tg-show__slide{position:absolute;inset:0;padding:0;border:0;background:none;opacity:0;transition:opacity 1.2s ease;cursor:zoom-in}
.tg-show__slide.is-on{opacity:1;z-index:1}
.tg-show__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 7s linear}
.tg-show__slide.is-on img{transform:scale(1.12)}
.tg-show__frame .tg-count{position:absolute;z-index:2;right:10px;bottom:10px;margin:0;padding:1px 9px;border-radius:9px;background:rgba(255,253,249,.82)}
.tg-show__timer{position:absolute;z-index:2;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.4)}
.tg-show__timer i{display:block;height:100%;width:0;background:var(--wine)}
.tg-show.is-running .tg-show__timer i{animation:tg-timer var(--tg-wait,4.2s) linear}
@keyframes tg-timer{from{width:0}to{width:100%}}
.tg-show__frame .tg-arrow{position:absolute;z-index:3;top:50%;margin-top:-22px;opacity:0;transition:opacity .3s}
.tg-show__frame .tg-arrow--prev{left:10px}.tg-show__frame .tg-arrow--next{right:10px}
.tg-show__frame:hover .tg-arrow,.tg-show__frame:focus-within .tg-arrow{opacity:1}
@media (hover:none){.tg-show__frame .tg-arrow{opacity:.85;width:38px;height:38px;margin-top:-19px}}
.tg-show__thumbs{display:flex;gap:8px;margin-top:10px;padding:4px 2px 8px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x mandatory}
.tg-show__thumb{flex:none;width:68px;height:51px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#eee;cursor:pointer;opacity:.55;transition:opacity .3s,border-color .3s,transform .3s;scroll-snap-align:start}
.tg-show__thumb img{width:100%;height:100%;object-fit:cover}
.tg-show__thumb.is-on{opacity:1;border-color:var(--wine);transform:translateY(-2px)}

/* 2. モザイク */
.tg-mosaic__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;aspect-ratio:1/1}
.tg-mosaic__tile{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;background:#e9eef2;cursor:zoom-in;box-shadow:0 12px 22px -18px hsl(var(--th) 40% 18% / .7)}
.tg-mosaic__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tg-mosaic__tile:hover img{transform:scale(1.04)}
.tg-mosaic__tile--1{grid-column:1 / span 2;grid-row:1 / span 2;border-radius:22px 16px 16px 16px}
.tg-mosaic__tile--4{grid-column:1;grid-row:3}
.tg-mosaic__tile--5{grid-column:2 / span 2;grid-row:3}
.tg-mosaic__tile .tg-in{opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 1.6s var(--ease)}
.tg-mosaic__tile .tg-in.is-shown{opacity:1;transform:none}

/* 3. 写真の束（Swiper のカード） */
.tg-deck__stack{width:min(80%,380px);margin:8px auto 0;overflow:visible}
.tg-deck__card{padding:9px 9px 26px;border-radius:6px;background:#fff;box-shadow:0 14px 26px -18px rgba(40,30,20,.55),0 0 0 1px rgba(0,0,0,.04)}
.tg-deck__card button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.tg-deck__card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.tg-deck__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.tg-deck__nav .tg-count{margin:0;min-width:56px;text-align:center}
.tg-deck__nav .tg-arrow{width:38px;height:38px}
.tg-deck__nav .tg-arrow:disabled{opacity:.3;cursor:default}

@media (prefers-reduced-motion:reduce){
  .tg-show__slide,.tg-show__slide img,.tg-mosaic__tile .tg-in,.im-van__body{transition:none!important}
  .tg-show__slide.is-on img{transform:scale(1.02)}
  .im-van__body image{animation:none}
  .tg-show__timer{display:none}
}

/* ===================== ヒーロー：ロゴ・小鳥の色・花のまわりの生き物 ===================== */
.ih-logo{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.ih-logo img{display:block;width:100%;height:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(20,50,90,.35))}
.ih-logo span{font-family:var(--mincho);font-size:11px;letter-spacing:.5em;padding-left:.5em;color:#fff;text-shadow:0 1px 6px rgba(20,50,90,.45);display:flex;align-items:center;gap:10px}
.ih-logo span::before,.ih-logo span::after{content:"";width:22px;height:1px;background:rgba(255,255,255,.8)}
.hero-scene .ih-logo{left:50%;top:17%;width:46%;transform:translateX(-50%)}
.hero__photo .ih-logo{display:none}
@media (min-width:960px){
  .hero__photo .ih-logo{display:flex;left:62%;top:27%;width:min(220px,16vw);transform:translateX(-50%)}
  .hero__photo .ih-logo span{font-size:12px}
}
@media (max-width:959px){
  /* 写真の上に大きなロゴがあるので、画面左上の小さなロゴは写真の上にいる間だけ隠す */
  body:not(.menu-open) .hd.is-onhero .hd__logo{opacity:0;pointer-events:none}
  .hd__logo{transition:opacity .4s}
}
/* 小鳥：青ではなく、ジョウビタキのような茶色とだいだい色 */
.fx-bird path[fill="#3a7cc4"]{fill:#7a6455}
.fx-bird path[fill="#24589a"],.fx-bird path[fill="#2f6db5"]{fill:#4b3b31}
.fx-bird path[fill="#2a5fa3"]{fill:#5c4639}
.fx-bird path[fill="#5a9bdb"]{fill:#a39d96}
.fx-bird path[fill="#7ab3ea"]{fill:#f5f1ea}
.fx-bird path[fill="#fbf5ec"]{fill:#ee9a5a}
.fx-bird path[fill="#f4d2a8"]{fill:#de7a3a}
.fx-bird path[fill="#f0a034"]{fill:#3d332c}
/* 花のまわりの生き物（動きは test.js） */
.ih-life{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero__photo .ih-life{display:none}
@media (min-width:960px){.hero__photo .ih-life{display:block}}
.ih-c{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);will-change:transform}
.ih-c svg{display:block;width:100%;height:100%;overflow:visible}
.ih-c--bee svg{filter:drop-shadow(0 1px 1px rgba(60,40,0,.25))}
.ih-wing{transform-box:fill-box;transform-origin:50% 100%;animation:ih-buzz .06s linear infinite alternate}
@keyframes ih-buzz{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.ih-bfly__w{transform-box:fill-box;animation:ih-flap .32s ease-in-out infinite alternate}
.ih-bfly__w--l{transform-origin:100% 50%}.ih-bfly__w--r{transform-origin:0 50%}
@keyframes ih-flap{from{transform:scaleX(1)}to{transform:scaleX(.18)}}
.ih-c--bfly.is-rest .ih-bfly__w{animation-duration:1.6s}
.ih-dfly__w{transform-box:fill-box;transform-origin:50% 50%;animation:ih-dwing .045s linear infinite alternate}
@keyframes ih-dwing{from{opacity:1;transform:scaleY(1)}to{opacity:.7;transform:scaleY(.82)}}
.ih-bug__legs{transform-box:fill-box;transform-origin:50% 50%;animation:ih-legs .3s ease-in-out infinite alternate}
.ih-c--bug.is-rest .ih-bug__legs{animation:none}
@keyframes ih-legs{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.hero.is-calm .ih-c *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ih-c *{animation:none!important}}

/* 花びら：写真の黄色い花（先が3つに割れた細長い花びら）。桜の花びらと同じ動きで舞い、草地に少し積もって消える */
.fx-petal{width:calc(var(--s) * 1.6);height:calc(var(--s) * .7);filter:drop-shadow(0 1px 1px rgba(150,100,0,.28))}
.fx-petal i{border-radius:0;background:linear-gradient(90deg,#c98a0c 0%,#eeb21c 26%,#ffd43a 70%,#ffe476 100%);
  clip-path:polygon(0% 44%,30% 20%,66% 4%,80% 0%,86% 26%,100% 42%,100% 58%,86% 74%,80% 100%,66% 96%,30% 80%,0% 56%);box-shadow:none}


/* 小鳥が葉っぱの後ろを通るように：写真から葉っぱだけを切り抜いた画像を、小鳥の上に重ねる */
.hero-scene .ih-leaves{z-index:2;pointer-events:none}              /* スマホ：小鳥（1）の上、ロゴ（3）の下 */
.ih-leafcopy{display:none}
@media (min-width:960px){
  .ih-leafcopy{display:block;z-index:4;pointer-events:none}        /* PC：小鳥の層（3）の上 */
  .ih-leafcopy::after{display:none}
}
/* 小鳥の飛ぶ道を、左から右へゆるく下げる（左上の葉っぱの後ろ → 右の葉っぱの後ろを通る） */
.hero-scene > .hero-fx__birds{transform:rotate(6deg);transform-origin:0 0}
@media (min-width:960px){.hero-fx__birds{transform:rotate(4deg);transform-origin:0 0}}

/* ===================== オープニング「しずく」（?op=1〜3 は写真へ変わる向きのちがい） =====================
   ①真っ白な画面の上から、しずくが一粒落ちる（ロゴの真ん中へ）
   ②水面のように波紋が広がり、紺のロゴと「ITAMI」がゆっくり浮かび上がる
   ③白い画面の上で少し止まる → ④紺のまま、写真の上のロゴの位置へすっと上がる
   ⑤白い画面が一方向から写真へ変わる。ロゴの紺も、同じ線で白へ変わる（全体が一度に変わらない）
   現れ方は時計どおりに進むCSSアニメーション。端末が忙しくても時間がずれない */
@property --ih-wp{syntax:'<percentage>';inherits:false;initial-value:-25%}
.ih-op{display:none}
html.ih-opening .ih-op{display:block;position:fixed;inset:0;z-index:100000;cursor:pointer}
html.ih-opening .hd,html.ih-opening .dock,html.ih-opening .side{opacity:0}
.hd,.dock,.side{transition:opacity .9s ease}
/* オープニングの間、写真の上の本物のロゴは隠す（最後に入れ替える。同じ場所・同じ大きさなので動きはない） */
html.ih-opening .ih-logo{visibility:hidden}
/* 写真は少し寄った状態から、ゆっくり落ち着く */
html.ih-opening .hero__photo img,html.ih-opening .hero-scene__img{transform:scale(1.06)}
.hero__photo img,.hero-scene__img{transition:transform 3s cubic-bezier(.22,1,.36,1)}
html.ih-op-exit .hero__photo img,html.ih-op-exit .hero-scene__img{transform:none}

/* 写真へ変わる向き：右下から左上（白い画面とロゴの紺は、同じ向き・同じ時間で消える）。?op=1〜3 は背景の色のちがい */
.ih-op{--dir:to top left}
.ih-op__bg,.ih-oplogo__layer--navy{
  -webkit-mask-image:linear-gradient(var(--dir),transparent var(--ih-wp),#000 calc(var(--ih-wp) + 22%));mask-image:linear-gradient(var(--dir),transparent var(--ih-wp),#000 calc(var(--ih-wp) + 22%));
  transition:--ih-wp 1.9s cubic-bezier(.55,0,.35,1)}
.ih-op.is-wipe .ih-op__bg,.ih-op.is-wipe .ih-oplogo__layer--navy{--ih-wp:100%}
.ih-op__bg{position:absolute;inset:0;background:#fff}
/* ロゴの紺の層は、画面全体と同じ大きさの「型」で消す（白い画面と同じ線で変わるように） */
.ih-oplogo__layer--navy{-webkit-mask-size:var(--vw) var(--vh);mask-size:var(--vw) var(--vh);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:calc(-1 * var(--lx)) calc(-1 * var(--ly));mask-position:calc(-1 * var(--lx)) calc(-1 * var(--ly))}
.ih-op__fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* しずく：上から一粒、ロゴの真ん中へ */
.ih-drop{position:absolute;width:12px;height:17px;margin:-17px 0 0 -6px;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 34% 68%,#fff 0 16%,#cfdfeb 38%,#8eabc1 80%,#6f8fa8 100%);
  box-shadow:0 2px 4px rgba(60,90,120,.18);opacity:0;animation:ih-fall 1s cubic-bezier(.5,0,.85,.55) .35s both}
@keyframes ih-fall{0%{transform:translateY(-60vh) scaleY(1.35);opacity:0}12%{opacity:1}94%{transform:translateY(0) scaleY(1.2);opacity:1}100%{transform:translateY(0) scale(2,.3);opacity:0}}
/* 落ちた瞬間の小さなはね */
.ih-splash{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0) 30%,rgba(150,180,205,.35) 46%,rgba(255,255,255,0) 62%);opacity:0;animation:ih-splash .7s ease-out 1.33s both}
@keyframes ih-splash{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
/* 波紋：水面を真上から見たように、同じ中心から輪が重なって広がる（明るい筋と、うすい影の筋） */
.ih-ring{position:absolute;width:var(--w);height:var(--w);margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);border-radius:50%;
  background:radial-gradient(circle,transparent 62%,rgba(120,152,180,.16) 67%,rgba(255,255,255,.95) 70%,rgba(120,152,180,.22) 73%,transparent 79%);
  opacity:0;transform:scale(.02);animation:ih-ring var(--d) cubic-bezier(.1,.55,.25,1) var(--at) both}
@keyframes ih-ring{0%{transform:scale(.02);opacity:0}6%{opacity:1}100%{transform:scale(1);opacity:0}}

/* ロゴ（写真の上のロゴと同じ形・同じ場所・同じ大きさ。最初だけ画面の中央へずらしておく） */
.ih-oplogo{position:fixed;margin:0;z-index:2;transform-origin:50% 50%;transition:transform 1.7s cubic-bezier(.6,0,.25,1)}
.ih-oplogo__layer{display:flex;flex-direction:column;align-items:center;width:100%}
.ih-oplogo__layer--navy{position:relative;z-index:1}               /* 紺が上 */
.ih-oplogo__layer--white{position:absolute;inset:0;z-index:0}     /* 白は下。紺が消えたところだけ見える */
.ih-oplogo__layer img{display:block;width:100%;height:auto}
.ih-oplogo__layer--white img{filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(20,50,90,.35))}
.ih-oplogo__layer--navy img{filter:brightness(0) saturate(100%) invert(24%) sepia(21%) saturate(2053%) hue-rotate(168deg) brightness(94%) contrast(88%)}
.ih-oplogo__area{display:flex;align-items:center;font-family:var(--mincho);letter-spacing:.5em;padding-left:.5em}
.ih-oplogo__area::before,.ih-oplogo__area::after{content:"";width:var(--ln,22px);height:1px}
.ih-oplogo__layer--navy .ih-oplogo__area{color:#1f3b56}
.ih-oplogo__layer--navy .ih-oplogo__area::before,.ih-oplogo__layer--navy .ih-oplogo__area::after{background:#c5a059}
.ih-oplogo__layer--white .ih-oplogo__area{color:#fff;text-shadow:0 1px 6px rgba(20,50,90,.45)}
.ih-oplogo__layer--white .ih-oplogo__area::before,.ih-oplogo__layer--white .ih-oplogo__area::after{background:rgba(255,255,255,.8)}
/* 白いロゴは写真に変わり始めるまで見せない（白い画面の上では見えないが、念のため） */
.ih-oplogo__layer--white{opacity:0}
.ih-op.is-wipe .ih-oplogo__layer--white{opacity:1}
/* 浮かび上がり：波紋に合わせて、水面がゆれて落ち着くように */
.ih-oplogo__rise{opacity:0}
.ih-op.is-css .ih-oplogo__rise{animation:ih-rise 2.6s cubic-bezier(.22,1,.36,1) 1.45s both}   /* WebGLが使えない端末用 */
.ih-op.is-gl .ih-oplogo__rise{transition:opacity .35s ease}
.ih-op.is-gl.is-swap .ih-oplogo__rise{opacity:1}
@keyframes ih-rise{
  0%{opacity:0;filter:blur(9px);transform:scale(.96,.9)}
  25%{opacity:.6;filter:blur(4px);transform:scale(1.02,1.04)}
  50%{opacity:.9;filter:blur(1.5px);transform:scale(.99,.985)}
  75%{opacity:1;filter:blur(.3px);transform:scale(1.004,1.006)}
  100%{opacity:1;filter:blur(0);transform:none}}
/* 水面（WebGL）・しずく・落ちた瞬間の光 */
.ih-water{position:absolute;inset:0;width:100%;height:100%;display:block}
.ih-gdrop{position:absolute;left:50%;top:0;width:19px;height:42px;margin-left:-9.5px;opacity:0;pointer-events:none;will-change:transform;filter:drop-shadow(1px 5px 4px rgba(16,50,70,.25))}
.ih-gdrop svg{display:block;width:100%;height:100%}
@media (max-width:640px){.ih-gdrop{width:16px;height:35px;margin-left:-8px}}
.ih-ghalo{position:absolute;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(234,250,255,.9) 0,rgba(255,255,255,.2) 18%,transparent 65%)}
@media (prefers-reduced-motion:reduce){.ih-op{display:none!important}}
/* 白いロゴ（とその影）は、写真に変わったところだけに見せる（紺の層と逆の型。同じ線・同じ時間） */
.ih-oplogo__layer--white{
  -webkit-mask-image:linear-gradient(var(--dir),#000 var(--ih-wp),transparent calc(var(--ih-wp) + 22%));mask-image:linear-gradient(var(--dir),#000 var(--ih-wp),transparent calc(var(--ih-wp) + 22%));
  -webkit-mask-size:var(--vw) var(--vh);mask-size:var(--vw) var(--vh);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:calc(-1 * var(--lx)) calc(-1 * var(--ly));mask-position:calc(-1 * var(--lx)) calc(-1 * var(--ly));
  transition:--ih-wp 1.9s cubic-bezier(.55,0,.35,1)}
.ih-op.is-wipe .ih-oplogo__layer--white{--ih-wp:100%}