/* ===== 景色の絵（入口・出口・ページ最後）：ChatGPTの横長の絵を切り出したもの（make-osaka-art-gpt3.py）と、上で動くもの ===== */
/* PC：3枚とも、画面の横いっぱいに */
.rb-scene--art{--art-ratio:2000 / 386;--road-x:50%}
.rb-end__scene--art{--art-ratio:2000 / 430}
.ft__scene--art{--art-ratio:1536 / 465}
.rb-scene--art,.rb-end__scene--art{width:66vw;max-width:none;margin-left:calc(50% - 33vw)}
/* スマホ：入口・出口は絵のまん中を切り出した画像。動くものの層も同じだけずらす */
@media (max-width:599px){
  .rb-scene--art{--art-ratio:1120 / 386;--road-x:50%;width:100vw;margin:22px 0 0 calc(50% - 50vw)}
  .rb-end__scene--art{--art-ratio:1040 / 430;width:100vw;margin-left:calc(50% - 50vw)}
  .ft__scene--art{--art-ratio:1536 / 465}
  .rb-scene--art,.rb-end__scene--art{overflow:hidden}
  .oa-layer--meguri-intro{left:-32.14%!important;width:178.57%;right:auto!important}
  .oa-layer--meguri-end{left:-50%!important;width:192.31%;right:auto!important}
}
.rb-scene--art .rb-art__image{-webkit-mask-image:none;mask-image:none}
/* 入口・出口：左右のはしは白く切り落とし（--cut）、その内側をふんわりぼかす（--fade）。絵も、上で動くものも、いっしょに */
.rb-scene--art,.rb-end__scene--art{--cut:6%;--fade:12%;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent var(--cut),rgba(0,0,0,.45) calc(var(--cut) + var(--fade) * .5),#000 calc(var(--cut) + var(--fade)),#000 calc(100% - var(--cut) - var(--fade)),rgba(0,0,0,.45) calc(100% - var(--cut) - var(--fade) * .5),transparent calc(100% - var(--cut)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,transparent var(--cut),rgba(0,0,0,.45) calc(var(--cut) + var(--fade) * .5),#000 calc(var(--cut) + var(--fade)),#000 calc(100% - var(--cut) - var(--fade)),rgba(0,0,0,.45) calc(100% - var(--cut) - var(--fade) * .5),transparent calc(100% - var(--cut)),transparent 100%)}
@media (max-width:599px){.rb-scene--art,.rb-end__scene--art{--cut:4%;--fade:10%}}
.oa-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
@keyframes oa-meguri-intro-1{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,53.44%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,86.46%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,86.46%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,53.44%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,0%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,-53.44%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,-86.46%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,-86.46%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,-53.44%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-intro-2{0%{transform:translate(0%,76.5%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,90.76%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,70.35%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,23.08%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,-33.02%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,-76.5%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,-90.76%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,-70.35%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,-23.08%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,33.02%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,76.5%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-intro-3{0%{transform:translate(0%,82.66%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,44.64%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,-10.44%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,-61.52%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,-89.11%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,-82.66%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,-44.64%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,10.44%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,61.52%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,89.11%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,82.66%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-intro-4{0%{transform:translate(0%,0%) scale(1) rotate(2.32deg);opacity:0}4%{transform:translate(-30.24%,-7.74%) scale(1) rotate(2.32deg);opacity:1}55%{transform:translate(-418.35%,-129.03%) scale(1) rotate(2.32deg);opacity:1}60%{transform:translate(-458.67%,-129.03%) scale(1) rotate(2.32deg);opacity:0}100%{transform:translate(-458.67%,-129.03%) scale(1) rotate(2.32deg);opacity:0}}
@keyframes oa-meguri-intro-5{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(43.1%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(793.1%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(862.07%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(862.07%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-intro-6{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(273.11%,-15.87%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-intro-7{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}3%{transform:translate(14.49%,0%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(615.94%,9.8%) scale(1) rotate(0deg);opacity:1}96%{transform:translate(670.29%,9.8%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(670.29%,9.8%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-intro-11{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(70%,5.33%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(1288%,98.13%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(1400%,106.67%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(1400%,106.67%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-intro-12{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(76.36%,18.18%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(1405.09%,334.55%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(1527.27%,363.64%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(1527.27%,363.64%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-intro-13{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(-88.33%,4.08%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(-1625.33%,75.13%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(-1766.67%,81.67%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-1766.67%,81.67%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-intro-14{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oa-meguri-intro-15{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oa-meguri-intro-16{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oa-meguri-end-1{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,53.44%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,86.46%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,86.46%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,53.44%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,0%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,-53.44%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,-86.46%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,-86.46%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,-53.44%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-end-2{0%{transform:translate(0%,76.5%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,90.76%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,70.35%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,23.08%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,-33.02%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,-76.5%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,-90.76%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,-70.35%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,-23.08%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,33.02%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,76.5%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-end-3{0%{transform:translate(0%,82.66%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,44.64%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,-10.44%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,-61.52%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,-89.11%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,-82.66%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,-44.64%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,10.44%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,61.52%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,89.11%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,82.66%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-end-4{0%{transform:translate(0%,12.83%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(588.89%,-42.52%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1177.78%,-81.63%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1766.67%,-89.56%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2355.56%,-63.28%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2944.44%,-12.83%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3533.33%,42.52%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4122.22%,81.63%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4711.11%,89.56%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5300%,63.28%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5888.89%,12.83%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-end-5{0%{transform:translate(0%,0%) scale(1) rotate(2.82deg);opacity:0}4%{transform:translate(-37.5%,-9%) scale(1) rotate(2.82deg);opacity:1}55%{transform:translate(-406.25%,-150%) scale(1) rotate(2.82deg);opacity:1}60%{transform:translate(-456.25%,-150%) scale(1) rotate(2.82deg);opacity:0}100%{transform:translate(-456.25%,-150%) scale(1) rotate(2.82deg);opacity:0}}
@keyframes oa-meguri-end-6{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}6%{transform:translate(0%,39.47%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(-301.72%,1184.21%) scale(1.9) rotate(0deg);opacity:1}88%{transform:translate(-344.83%,1315.79%) scale(2) rotate(0deg);opacity:0}100%{transform:translate(-344.83%,1315.79%) scale(2) rotate(0deg);opacity:0}}
@keyframes oa-meguri-end-7{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(60.55%,-0.38%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(1114.06%,-6.97%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(1210.94%,-7.58%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(1210.94%,-7.58%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-end-8{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(-40.97%,0.9%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(-753.85%,16.65%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(-819.4%,18.1%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-819.4%,18.1%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-end-9{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(588.24%,20.2%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-meguri-end-10{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(-33.05%,1.17%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(-608.05%,21.52%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(-660.92%,23.39%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-660.92%,23.39%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-meguri-end-11{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oa-meguri-end-12{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oa-footer-1{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(517.5%,60.11%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1035%,97.27%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1552.5%,97.27%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2070%,60.11%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2587.5%,0%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3105%,-60.11%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(3622.5%,-97.27%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4140%,-97.27%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(4657.5%,-60.11%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5175%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-footer-2{0%{transform:translate(0%,86.06%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(517.5%,102.1%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1035%,79.15%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1552.5%,25.96%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2070%,-37.14%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2587.5%,-86.06%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3105%,-102.1%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(3622.5%,-79.15%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4140%,-25.96%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(4657.5%,37.14%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5175%,86.06%) scale(1) rotate(0deg);opacity:1}}
@keyframes oa-footer-3{0%{transform:translate(0%,0%) scale(1) rotate(3.74deg);opacity:0}4%{transform:translate(-25%,-14.4%) scale(1) rotate(3.74deg);opacity:1}55%{transform:translate(-475%,-240%) scale(1) rotate(3.74deg);opacity:1}60%{transform:translate(-508.33%,-240%) scale(1) rotate(3.74deg);opacity:0}100%{transform:translate(-508.33%,-240%) scale(1) rotate(3.74deg);opacity:0}}
@keyframes oa-footer-4{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(43.82%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(806.32%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(876.44%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(876.44%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-van{0%{transform:translate(0%,-43.56%)}3%{transform:translate(47.22%,-42.96%)}6%{transform:translate(94.44%,-41.18%)}9%{transform:translate(141.67%,-38.77%)}12%{transform:translate(188.89%,-35.54%)}15%{transform:translate(236.11%,-30.88%)}18%{transform:translate(283.33%,-24.59%)}21%{transform:translate(330.56%,-18.07%)}24%{transform:translate(377.78%,-12.17%)}27%{transform:translate(425%,-9.37%)}30%{transform:translate(472.22%,-7.33%)}33%{transform:translate(519.44%,-5.89%)}36%{transform:translate(566.67%,-4.68%)}60%{transform:translate(566.67%,-4.68%)}65%{transform:translate(648.83%,0%)}70%{transform:translate(731%,0%)}75%{transform:translate(813.17%,0%)}80%{transform:translate(895.33%,0%)}85%{transform:translate(977.5%,0%)}90%{transform:translate(1059.67%,0%)}95%{transform:translate(1141.83%,0%)}100%{transform:translate(1224%,0%)}}
@keyframes oa-footer-5{0%{transform:translate(0%,-57.33%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(276%,-55.88%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(552%,-52.83%) scale(1) rotate(0deg);opacity:1}15%{transform:translate(828%,-48.52%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1104%,-41.46%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(1380%,-31.98%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1656%,-21.92%) scale(1) rotate(0deg);opacity:1}35%{transform:translate(1932%,-14.6%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2208%,-10.75%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(2484%,-8.1%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2760%,-6.67%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3312%,0%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(3864%,0%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4416%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(5078.4%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(5520%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(5520%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-6{0%{transform:translate(0%,-57.52%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(276%,-56.47%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(552%,-53.59%) scale(1) rotate(0deg);opacity:1}15%{transform:translate(828%,-49.41%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1104%,-42.93%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(1380%,-34.05%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1656%,-23.98%) scale(1) rotate(0deg);opacity:1}35%{transform:translate(1932%,-15.49%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2208%,-11.34%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(2484%,-8.47%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2760%,-6.96%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3312%,0%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(3864%,0%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4416%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(5078.4%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(5520%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(5520%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-7{0%{transform:translate(0%,-88.74%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(376.36%,-87.32%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(752.73%,-83.19%) scale(1) rotate(0deg);opacity:1}15%{transform:translate(1129.09%,-77.13%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1505.45%,-67.92%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(1881.82%,-54.99%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(2258.18%,-39.51%) scale(1) rotate(0deg);opacity:1}35%{transform:translate(2634.55%,-24.95%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(3010.91%,-18.32%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(3387.27%,-13.77%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(3763.64%,-11.08%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(4516.36%,0%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(5269.09%,0%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(6021.82%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(6925.09%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(7527.27%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(7527.27%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-8{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(-272.67%,0%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(-545.33%,0%) scale(1) rotate(0deg);opacity:1}15%{transform:translate(-818%,0%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(-1090.67%,0%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(-1363.33%,0%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(-1636%,0%) scale(1) rotate(0deg);opacity:1}35%{transform:translate(-1908.67%,0%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(-2181.33%,0%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(-2454%,-1.68%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-2726.67%,-6.84%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(-3272%,-11.03%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(-3817.33%,-22.65%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(-4362.67%,-41.81%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(-5017.07%,-54.21%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(-5453.33%,-57.33%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-5453.33%,-57.33%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-9{0%{transform:translate(0%,-60.58%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(297.54%,-59.47%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(595.09%,-56.37%) scale(1) rotate(0deg);opacity:1}15%{transform:translate(892.63%,-51.84%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1190.18%,-44.74%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(1487.72%,-34.94%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1785.26%,-24.09%) scale(1) rotate(0deg);opacity:1}35%{transform:translate(2082.81%,-15.7%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2380.35%,-11.46%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(2677.89%,-8.57%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2975.44%,-7.02%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3570.53%,0%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4165.61%,0%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4760.7%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(5474.81%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(5950.88%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(5950.88%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-10{0%{transform:translate(0%,-214.83%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(339.2%,-208.75%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(678.4%,-196.56%) scale(1) rotate(0deg);opacity:1}15%{transform:translate(1017.6%,-179.17%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1356.8%,-151.56%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(1696%,-113.54%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(2035.2%,-74.9%) scale(1) rotate(0deg);opacity:1}35%{transform:translate(2374.4%,-51.25%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2713.6%,-37.71%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(3052.8%,-28.96%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(3392%,-18.75%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(4070.4%,0%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4748.8%,0%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(5427.2%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(6241.28%,0%) scale(1) rotate(0deg);opacity:1}97%{transform:translate(6784%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(6784%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oa-footer-11{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oa-footer-12{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(132.58%,48.22%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(132.58%,-92.41%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-132.58%,48.22%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-187.5%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-132.58%,-92.41%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
/* ===================== ヒーロー：淀川の河川敷のイラスト ===================== */
/* 絵の上に重ねる「動く部品」の置き場。スマホは縦長の絵と同じ大きさ、PCは写真と同じ「はみ出して全体を覆う」置き方 */
.oh-stage{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;container-type:inline-size}
.hero__photo .oh-stage{display:none}
.oh-veil{display:none}
@media (min-width:960px){
  /* PC：横長の絵を画面の幅いっぱいに置き、下にそろえる。上が余るときは、絵の空と同じ色でつなぐ。
     下のふちは草地の丘のようにゆるく波打たせ、左の文字のまわりだけ、白くもやっとさせる（.oh-veil） */
  .hero .hero__photo{container-type:size;inset:0;width:auto;height:auto;overflow:hidden;background:rgb(95,206,253);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V93C93 97 86 91 77 94.5C67 98.5 58 92.5 47 96C37 99 28 93 18 96C10 98.5 5 94.5 0 96Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V93C93 97 86 91 77 94.5C67 98.5 58 92.5 47 96C37 99 28 93 18 96C10 98.5 5 94.5 0 96Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .hero .hero__photo::after,.hero .hero__edge,.hero__photo .oh-logo{display:none}
  .hero .hero__photo{--iw:max(100cqw,calc(100cqh * 1.5))}   /* 画面が縦に長めのときは、絵を少し大きくして右にそろえる */
  .hero .hero__photo picture{position:absolute;right:0;bottom:0;width:var(--iw);height:auto;-webkit-mask:linear-gradient(180deg,transparent 0,#000 6%);mask:linear-gradient(180deg,transparent 0,#000 6%)}
  .hero .hero__photo picture img{height:auto;aspect-ratio:1774 / 887;object-fit:cover}
  .hero__photo .oh-s img{height:auto;aspect-ratio:auto;object-fit:fill}
  .hero__photo .oh-stage{display:block;inset:auto;overflow:visible;width:var(--iw);aspect-ratio:1774 / 887;left:auto;right:0;bottom:0;top:auto}
  .oh-clip{position:absolute;inset:0;overflow:hidden}
  /* 見出しのまわりだけ、うすく白くもやっとさせる（タグ・ボタンの下にはつけない） */
  /* 見出しの箱を文字の幅ぴったりにして（.hero__heading の width:max-content）、その後ろに白いもや。
     「大阪市の」のまわりを少し濃く、下の行ほどうすく */
  html:not([data-hv]) .hero__heading{width:max-content;max-width:none}
  /* 白いもやは、いったんやめる（2026-10-14 試し） */
  .hero__heading::after{display:none}
  .hero__heading::before{content:none}
  /*  .hero__heading::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-40px -70px -36px -70px;filter:blur(10px);
    background:radial-gradient(ellipse 58% 62% at 44% 54%,rgba(255,255,255,.84) 0%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.34) 84%,rgba(255,255,255,0) 100%)} */
  .hero__heading{z-index:0}
}
.oh-clip{pointer-events:none}
.oh-s{position:absolute;left:0;top:0}
.oh-s svg,.oh-s img{display:block;width:100%;height:auto;overflow:visible}
.oh-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ロゴ：空にうかぶ、淀川の色のロゴ */
.oh-logo{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.9cqw;transform:translateX(-50%)}
.oh-logo i{display:block;width:100%;aspect-ratio:646 / 279;background:#fff;-webkit-mask:url(../_shared/img/brand/logo2.webp) center/contain no-repeat;mask:url(../_shared/img/brand/logo2.webp) center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(30,80,130,.35)) drop-shadow(0 0 18px rgba(40,110,170,.25))}
.oh-logo b{display:flex;align-items:center;gap:1.4cqw;font-family:var(--maru);font-weight:700;font-size:max(10px,2.5cqw);letter-spacing:.32em;padding-left:.32em;color:#fff;white-space:nowrap;text-shadow:0 1px 6px rgba(30,80,130,.45),0 0 2px rgba(30,80,130,.3)}
.oh-logo b::before,.oh-logo b::after{content:"";width:3.4cqw;height:2px;border-radius:2px;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(30,80,130,.3)}
.hero__photo .oh-logo b{font-size:max(11px,1.5cqw)}

/* 細かい動き（部品の中） */
.oh-swing{animation:oh-swing .48s ease-in-out infinite alternate}
.oh-swing--b{animation-delay:-.48s}
@keyframes oh-swing{from{transform:rotate(-34deg)}to{transform:rotate(30deg)}}
.oh-bob{animation:oh-bob .24s ease-in-out infinite alternate}
@keyframes oh-bob{to{transform:translateY(-2.4px)}}
.oh-tail{animation:oh-tail .48s ease-in-out infinite alternate}
@keyframes oh-tail{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.oh-spin{animation:oh-spin .6s linear infinite}
@keyframes oh-spin{to{transform:rotate(-360deg)}}
.oh-pedal{animation:oh-pedal .6s ease-in-out infinite alternate}
.oh-pedal--b{animation-delay:-.6s}
@keyframes oh-pedal{from{transform:rotate(-26deg)}to{transform:rotate(16deg)}}
.oh-walk{animation:oh-walk .62s ease-in-out infinite alternate}
.oh-walk--b{animation-delay:-.62s}
@keyframes oh-walk{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.oh-trot{animation:oh-trot .31s linear infinite alternate}
.oh-trot--b{animation-delay:-.31s}
@keyframes oh-trot{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
.oh-wag{animation:oh-wag .22s ease-in-out infinite alternate}
@keyframes oh-wag{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
.oh-dog{animation:oh-bob .31s ease-in-out infinite alternate}
/* 結心堂の人：ときどき、ぺこりとおじぎ */
.oh-bow{animation:oh-bow 7s ease-in-out infinite}
@keyframes oh-bow{0%,62%,90%,100%{transform:none}70%,80%{transform:translateY(3px) scaleY(.88)}}
/* 野球（6.4秒で1回：投げる→打つ→取る→投げ返す） */
.oh-bat{animation:oh-bat 6.4s linear infinite}
@keyframes oh-bat{0%,21.5%{transform:rotate(0)}25%{transform:rotate(200deg)}38%{transform:rotate(215deg)}50%,100%{transform:rotate(0)}}
.oh-pitcher .oh-throw{animation:oh-pitch 6.4s ease-in-out infinite}
@keyframes oh-pitch{0%,6%{transform:rotate(0)}13%{transform:rotate(170deg)}16.5%{transform:rotate(30deg)}22%,100%{transform:rotate(0)}}
.oh-of .oh-throw{animation:oh-ofthrow 6.4s ease-in-out infinite}
@keyframes oh-ofthrow{0%,58%{transform:rotate(0)}63%{transform:rotate(160deg)}65.5%{transform:rotate(20deg)}70%,100%{transform:rotate(0)}}
/* 鳥・虫・船 */
.oh-wing{animation:oh-flapw .42s ease-in-out infinite alternate}
@keyframes oh-flapw{from{transform:scaleY(1)}to{transform:scaleY(-.5)}}
.oh-flap{animation:oh-flapb .3s ease-in-out infinite alternate}
@keyframes oh-flapb{from{transform:scaleX(1)}to{transform:scaleX(.2)}}
.oh-dwing{animation:oh-dwing .05s linear infinite alternate}
@keyframes oh-dwing{from{opacity:1}to{opacity:.6}}
.oh-row{animation:oh-row 1.8s ease-in-out infinite alternate}
@keyframes oh-row{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.oh-wake{animation:oh-wake 1.2s ease-in-out infinite alternate}
@keyframes oh-wake{from{opacity:.5}to{opacity:1}}
.oh-boat svg,.oh-row svg{animation:oh-float 2.6s ease-in-out infinite alternate}
@keyframes oh-float{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(4%) rotate(1.2deg)}}
.oh-peck{animation:oh-peck 3.2s ease-in-out infinite}
@keyframes oh-peck{0%,40%,56%,70%,86%,100%{transform:none}46%,50%,76%,80%{transform:rotate(28deg)}}
.oh-lean{animation:oh-lean 6s ease-in-out infinite}
@keyframes oh-lean{0%,30%,100%{transform:none}45%,80%{transform:rotate(8deg)}}
.oh-nod{animation:oh-nod 4.2s ease-in-out infinite}
.oh-nod--slow{animation-duration:7.4s}
@keyframes oh-nod{0%,40%,100%{transform:none}50%,60%{transform:rotate(-4deg) translateY(1px)}}
.oh-kid svg{animation:oh-hop 2.6s ease-in-out infinite}
@keyframes oh-hop{0%,70%,100%{transform:none}80%{transform:translateY(-6%)}90%{transform:none}}

/* 画面から外れている間・動きを減らす設定のときは止める */
.hero.is-calm .oh-stage *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.oh-stage *{animation:none!important}}

/* 絵の上に大きなロゴがあるので、画面左上の小さなロゴは絵の上にいる間だけ隠す（スマホ） */
@media (max-width:959px){
  body:not(.menu-open) .hd.is-onhero .hd__logo{opacity:0;pointer-events:none}
  .hd__logo{transition:opacity .4s}
}
/* 見出しは、絵に合わせて丸みのある文字に */
.hero__title,.hero__eyebrow{font-family:var(--maru)}
.hero__title{font-weight:700;letter-spacing:.04em}

/* 凧のリボン */
.oh-ribbon{transform-origin:0 26px;animation:oh-ribbon 1.4s ease-in-out infinite alternate}
@keyframes oh-ribbon{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
.oh-van img{animation:oh-vanbob .5s ease-in-out infinite alternate}
@keyframes oh-vanbob{to{transform:translateY(1.5%)}}

/* ===== 登場人物の動き（関節ごとに回す） ===== */
.ck{--T:1.1s}
.ck *{transform-box:view-box}
.ck-bob{animation:ck-bob calc(var(--T) / 2) ease-in-out infinite}
@keyframes ck-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.ck--walk .ck-th{animation:ck-walk-th var(--T) linear infinite}
.ck--walk .ck-sh{animation:ck-walk-sh var(--T) linear infinite}
.ck--walk .ck-ua{animation:ck-walk-ua var(--T) ease-in-out infinite}
.ck--walk .ck-fa{transform:rotate(-16deg)}
@keyframes ck-walk-th{0%{transform:rotate(-20deg)}58%{transform:rotate(17deg)}68%{transform:rotate(12deg)}84%{transform:rotate(-12deg)}100%{transform:rotate(-20deg)}}
@keyframes ck-walk-sh{0%{transform:rotate(3deg)}30%{transform:rotate(2deg)}50%{transform:rotate(12deg)}66%{transform:rotate(52deg)}80%{transform:rotate(34deg)}92%{transform:rotate(6deg)}100%{transform:rotate(3deg)}}
@keyframes ck-walk-ua{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
.ck--run{--T:.62s}
.ck--run .ck-th{animation:ck-run-th var(--T) ease-in-out infinite}
.ck--run .ck-sh{animation:ck-run-sh var(--T) linear infinite}
.ck--run .ck-ua{animation:ck-run-ua var(--T) ease-in-out infinite}
.ck--run .ck-fa{transform:rotate(-95deg)}
@keyframes ck-run-th{0%,100%{transform:rotate(-42deg)}50%{transform:rotate(30deg)}}
@keyframes ck-run-sh{0%,100%{transform:rotate(14deg)}35%{transform:rotate(18deg)}60%{transform:rotate(96deg)}85%{transform:rotate(50deg)}}
@keyframes ck-run-ua{0%,100%{transform:rotate(40deg)}50%{transform:rotate(-46deg)}}
.ck-th--b,.ck-sh--b,.ck-ua--a{animation-delay:calc(var(--T) / -2)!important}
.ck-ua--up{animation:none!important;transform:rotate(-150deg)}
.ck-ua--up .ck-fa,.ck-ua--up + * .ck-fa{transform:rotate(10deg)!important}
.ck-tail{animation:ck-tail calc(var(--T) / 2) ease-in-out infinite alternate}
@keyframes ck-tail{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}
/* 手を合わせる：上腕を前へ、前腕を顔の前へ。上半身ごと、ゆっくりおじぎ */
.ck-pua{transform:rotate(-28deg)}
.ck-pfa{transform:rotate(-132deg)}
.ck-bow{animation:ck-bow 8s ease-in-out infinite}
@keyframes ck-bow{0%,30%,100%{transform:rotate(0)}42%,62%{transform:rotate(12deg)}74%{transform:rotate(0)}}
/* その場で足ぶみ（止まって糸を引く人など） */
.ck--still .ck-th,.ck--still .ck-sh,.ck--still .ck-ua{animation:none}
/* 犬 */
.ck-dleg{animation:ck-dleg .32s linear infinite alternate}
.ck-dleg--b{animation-delay:-.32s}
@keyframes ck-dleg{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
.ck-wag{animation:ck-wag .22s ease-in-out infinite alternate}
@keyframes ck-wag{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.ck-dog{animation:ck-bob .32s ease-in-out infinite}
/* 手をふる */
.ck-wave{animation:ck-wave 1.6s ease-in-out infinite}
@keyframes ck-wave{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
/* 野球（6.4秒で1回：投げる→打つ→取る→投げ返す） */
.ck-bat{animation:ck-bat 6.4s linear infinite}
@keyframes ck-bat{0%,21.5%{transform:rotate(0)}25%{transform:rotate(-200deg)}38%{transform:rotate(-215deg)}50%,100%{transform:rotate(0)}}
.ck-throw{animation:ck-throw 6.4s ease-in-out infinite}
@keyframes ck-throw{0%,6%{transform:rotate(0)}13%{transform:rotate(-170deg)}16.5%{transform:rotate(-30deg)}22%,100%{transform:rotate(0)}}
.ck-throw2{animation:ck-throw2 6.4s ease-in-out infinite}
@keyframes ck-throw2{0%,58%{transform:rotate(0)}63%{transform:rotate(-160deg)}65.5%{transform:rotate(-20deg)}70%,100%{transform:rotate(0)}}
/* 舟・カヤック・鳥 */
.ck-paddle{animation:ck-paddle 1.4s ease-in-out infinite alternate}
@keyframes ck-paddle{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.ck-oar{animation:ck-oar 1.8s ease-in-out infinite alternate}
@keyframes ck-oar{from{transform:scaleX(.7)}to{transform:scaleX(1.05)}}
.ck-ewing{animation:ck-ewing .9s ease-in-out infinite alternate}
@keyframes ck-ewing{from{transform:scaleY(1)}to{transform:scaleY(-.4)}}

/* 動く部品の道すじ（絵の座標から作ったもの） */
@keyframes oh-sp-1{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(630.5%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-2{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(787.33%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-3{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(587.73%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-4{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(713.53%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-5{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(235.26%,59.37%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(470.51%,96.07%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(705.77%,96.07%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(941.03%,59.37%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(1176.28%,0%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(1411.54%,-59.37%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(1646.79%,-96.07%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(1882.05%,-96.07%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(2117.31%,-59.37%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(2352.56%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-6{0%{transform:translate(0%,102%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(282.31%,121.01%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(564.62%,93.8%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(846.92%,30.77%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(1129.23%,-44.02%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(1411.54%,-102%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(1693.85%,-121.01%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(1976.15%,-93.8%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(2258.46%,-30.77%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(2540.77%,44.02%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(2823.08%,102%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-7{0%{transform:translate(0%,118.09%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(302.47%,63.77%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(604.95%,-14.91%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(907.42%,-87.89%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(1209.89%,-127.3%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(1512.36%,-118.09%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(1814.84%,-63.77%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(2117.31%,14.91%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(2419.78%,87.89%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(2722.25%,127.3%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(3024.73%,118.09%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-8{0%{transform:translate(0%,0%) scale(1) rotate(-6deg);opacity:0}4%{transform:translate(16.67%,-15.15%) scale(1) rotate(-6deg);opacity:1}90%{transform:translate(425.42%,-416.67%) scale(1) rotate(-6deg);opacity:1}96%{transform:translate(458.75%,-454.55%) scale(1) rotate(-6deg);opacity:0}100%{transform:translate(458.75%,-454.55%) scale(1) rotate(-6deg);opacity:0}}
@keyframes oh-sp-9{0%{transform:translate(0%,0%) scale(1) rotate(-2.4deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(2.4deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(-2.4deg);opacity:1}}
@keyframes oh-sp-11{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}3%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(-1298.7%,-206.89%) scale(1) rotate(0deg);opacity:1}71%{transform:translate(-1298.7%,-206.89%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-1298.7%,-206.89%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-sp-12{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}72%{transform:translate(-1000%,-441.26%) scale(1) rotate(0deg);opacity:1}73%{transform:translate(-1000%,-441.26%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-1000%,-441.26%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-sp-13{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(25.86%,0%) scale(1) rotate(0deg);opacity:1}86%{transform:translate(456.9%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(474.14%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(474.14%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-sp-14{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(114.38%,12.35%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-15{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(24.15%,0%) scale(1) rotate(0deg);opacity:1}88%{transform:translate(676.33%,0%) scale(1) rotate(0deg);opacity:1}94%{transform:translate(700.48%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(700.48%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-sp-16{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}12.5%{transform:translate(-236.23%,28.51%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(-472.47%,33.06%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(-708.7%,3.72%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-944.93%,-49.59%) scale(1) rotate(0deg);opacity:1}62.5%{transform:translate(-1181.16%,-102.89%) scale(1) rotate(0deg);opacity:1}75%{transform:translate(-1417.4%,-132.23%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-1653.63%,-127.68%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-1889.86%,-99.17%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-17{0%{transform:translate(0%,0%) scale(1) rotate(17.61deg);opacity:1}3.83%{transform:translate(-23.36%,-50.46%) scale(0.96) rotate(17.61deg);opacity:1}7.67%{transform:translate(-46.73%,-100.93%) scale(0.92) rotate(17.61deg);opacity:1}11.5%{transform:translate(-70.09%,-151.39%) scale(0.88) rotate(17.61deg);opacity:1}15.33%{transform:translate(-93.45%,-201.86%) scale(0.83) rotate(17.61deg);opacity:1}19.17%{transform:translate(-116.82%,-252.32%) scale(0.79) rotate(17.61deg);opacity:1}23%{transform:translate(-140.18%,-302.79%) scale(0.75) rotate(17.61deg);opacity:1}26.83%{transform:translate(-163.54%,-353.25%) scale(0.71) rotate(17.61deg);opacity:1}30.67%{transform:translate(-186.9%,-403.71%) scale(0.67) rotate(17.61deg);opacity:1}34.5%{transform:translate(-210.27%,-454.18%) scale(0.63) rotate(17.61deg);opacity:1}38.33%{transform:translate(-233.63%,-504.64%) scale(0.58) rotate(17.61deg);opacity:1}42.17%{transform:translate(-256.99%,-555.11%) scale(0.54) rotate(17.61deg);opacity:1}46%{transform:translate(-280.36%,-605.57%) scale(0.5) rotate(17.61deg);opacity:1}47%{transform:translate(-280.36%,-605.57%) scale(0.5) rotate(17.61deg);opacity:0}100%{transform:translate(-280.36%,-605.57%) scale(0.5) rotate(17.61deg);opacity:0}}
@keyframes oh-sp-20{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(21.37%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-21{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-21.37%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-22{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(21.37%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-23{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-21.37%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-25{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}26%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}52%{transform:translate(228.94%,-41.36%) scale(1.03) rotate(0deg);opacity:1}72%{transform:translate(228.94%,-41.36%) scale(1.03) rotate(0deg);opacity:1}96%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-26{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}15%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}16%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}17.75%{transform:translate(-17.55%,-159.1%) scale(0.97) rotate(0deg);opacity:1}19.5%{transform:translate(-35.1%,-288.2%) scale(0.95) rotate(0deg);opacity:1}21.25%{transform:translate(-52.65%,-387.3%) scale(0.93) rotate(0deg);opacity:1}23%{transform:translate(-70.2%,-456.4%) scale(0.9) rotate(0deg);opacity:1}23.5%{transform:translate(-70.2%,-456.4%) scale(0.9) rotate(0deg);opacity:1}25.28%{transform:translate(-73.2%,-856.59%) scale(0.94) rotate(0deg);opacity:1}27.06%{transform:translate(-76.2%,-1191.15%) scale(0.97) rotate(0deg);opacity:1}28.84%{transform:translate(-79.2%,-1460.09%) scale(1.01) rotate(0deg);opacity:1}30.63%{transform:translate(-82.2%,-1663.4%) scale(1.05) rotate(0deg);opacity:1}32.41%{transform:translate(-85.2%,-1801.09%) scale(1.09) rotate(0deg);opacity:1}34.19%{transform:translate(-88.2%,-1873.15%) scale(1.13) rotate(0deg);opacity:1}35.97%{transform:translate(-91.2%,-1879.59%) scale(1.16) rotate(0deg);opacity:1}37.75%{transform:translate(-94.2%,-1820.4%) scale(1.2) rotate(0deg);opacity:1}39.53%{transform:translate(-97.2%,-1695.59%) scale(1.24) rotate(0deg);opacity:1}41.31%{transform:translate(-100.2%,-1505.15%) scale(1.27) rotate(0deg);opacity:1}43.09%{transform:translate(-103.2%,-1249.09%) scale(1.31) rotate(0deg);opacity:1}44.88%{transform:translate(-106.2%,-927.4%) scale(1.35) rotate(0deg);opacity:1}46.66%{transform:translate(-109.2%,-540.09%) scale(1.39) rotate(0deg);opacity:1}48.44%{transform:translate(-112.2%,-87.15%) scale(1.43) rotate(0deg);opacity:1}50.22%{transform:translate(-115.2%,431.41%) scale(1.46) rotate(0deg);opacity:1}52%{transform:translate(-118.2%,1015.6%) scale(1.5) rotate(0deg);opacity:1}60%{transform:translate(-118.2%,1015.6%) scale(1.5) rotate(0deg);opacity:1}64%{transform:translate(-118.2%,1015.6%) scale(1.5) rotate(0deg);opacity:1}64.5%{transform:translate(-118.2%,1015.6%) scale(1.5) rotate(0deg);opacity:1}65.94%{transform:translate(-103.42%,669.9%) scale(1.44) rotate(0deg);opacity:1}67.38%{transform:translate(-88.65%,386.7%) scale(1.38) rotate(0deg);opacity:1}68.81%{transform:translate(-73.87%,166%) scale(1.31) rotate(0deg);opacity:1}70.25%{transform:translate(-59.1%,7.8%) scale(1.25) rotate(0deg);opacity:1}71.69%{transform:translate(-44.33%,-87.9%) scale(1.19) rotate(0deg);opacity:1}73.13%{transform:translate(-29.55%,-121.1%) scale(1.13) rotate(0deg);opacity:1}74.56%{transform:translate(-14.78%,-91.8%) scale(1.06) rotate(0deg);opacity:1}76%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}77%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-sp-34{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(2572.98%,23.16%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-35{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(2708.4%,24.38%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-36{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(3508.62%,35.63%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-37{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-2485.84%,-22.37%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-38{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-2542.34%,-22.88%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-39{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(2908.88%,26.18%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-40{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(3123.22%,87.84%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-sp-van{0%{transform:translate(0,0)}38%{transform:translate(429.41%,14.64%)}62%{transform:translate(429.41%,14.64%)}100%{transform:translate(753.53%,25.69%)}}
@keyframes oh-sp-41{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(159.1%,59.15%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(225%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(159.1%,-103.35%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-159.1%,59.15%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-225%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-159.1%,-103.35%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oh-sp-42{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(159.1%,59.15%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(225%,-31.25%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(159.1%,-103.35%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-159.1%,59.15%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-225%,-31.25%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-159.1%,-103.35%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oh-pc-1{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(1047%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-2{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(1342.67%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-3{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(899.17%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-4{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(1145.56%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-5{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(488.38%,70.17%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(976.77%,113.53%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1465.15%,113.53%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(1953.54%,70.17%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2441.92%,0%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(2930.3%,-70.17%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(3418.69%,-113.53%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(3907.07%,-113.53%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(4395.45%,-70.17%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(4883.84%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-6{0%{transform:translate(0%,120.54%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(586.06%,143.01%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1172.12%,110.86%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1758.18%,36.36%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2344.24%,-52.03%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(2930.3%,-120.54%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3516.36%,-143.01%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4102.42%,-110.86%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(4688.48%,-36.36%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5274.55%,52.03%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5860.61%,120.54%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-7{0%{transform:translate(0%,139.56%) scale(1) rotate(0deg);opacity:1}10%{transform:translate(627.92%,75.37%) scale(1) rotate(0deg);opacity:1}20%{transform:translate(1255.84%,-17.62%) scale(1) rotate(0deg);opacity:1}30%{transform:translate(1883.77%,-103.87%) scale(1) rotate(0deg);opacity:1}40%{transform:translate(2511.69%,-150.45%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(3139.61%,-139.56%) scale(1) rotate(0deg);opacity:1}60%{transform:translate(3767.53%,-75.37%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(4395.45%,17.62%) scale(1) rotate(0deg);opacity:1}80%{transform:translate(5023.38%,103.87%) scale(1) rotate(0deg);opacity:1}90%{transform:translate(5651.3%,150.45%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(6279.22%,139.56%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-8{0%{transform:translate(0%,0%) scale(1) rotate(-6deg);opacity:0}4%{transform:translate(18.18%,-16.53%) scale(1) rotate(-6deg);opacity:1}90%{transform:translate(842.73%,-454.55%) scale(1) rotate(-6deg);opacity:1}96%{transform:translate(879.09%,-495.87%) scale(1) rotate(-6deg);opacity:0}100%{transform:translate(879.09%,-495.87%) scale(1) rotate(-6deg);opacity:0}}
@keyframes oh-pc-9{0%{transform:translate(0%,0%) scale(1) rotate(-2.4deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(2.4deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(-2.4deg);opacity:1}}
@keyframes oh-pc-11{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}3%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}9.32%{transform:translate(-277.5%,10.96%) scale(1) rotate(0deg);opacity:1}15.65%{transform:translate(-555%,23.48%) scale(1) rotate(0deg);opacity:1}21.97%{transform:translate(-832.5%,31.31%) scale(1) rotate(0deg);opacity:1}28.3%{transform:translate(-1110%,45.4%) scale(1) rotate(0deg);opacity:1}34.62%{transform:translate(-1387.5%,53.22%) scale(1) rotate(0deg);opacity:1}40.93%{transform:translate(-1665%,54.79%) scale(1) rotate(0deg);opacity:1}47.24%{transform:translate(-1942.5%,51.66%) scale(1) rotate(0deg);opacity:1}53.56%{transform:translate(-2220%,42.27%) scale(1) rotate(0deg);opacity:1}59.89%{transform:translate(-2497.5%,31.31%) scale(1) rotate(0deg);opacity:1}66.21%{transform:translate(-2775%,20.35%) scale(1) rotate(0deg);opacity:1}70%{transform:translate(-2941.5%,15.65%) scale(1) rotate(0deg);opacity:1}71%{transform:translate(-2941.5%,15.65%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-2941.5%,15.65%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-pc-12{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}11.32%{transform:translate(-213.68%,23.37%) scale(1) rotate(0deg);opacity:1}17.65%{transform:translate(-427.35%,50.08%) scale(1) rotate(0deg);opacity:1}23.97%{transform:translate(-641.03%,66.77%) scale(1) rotate(0deg);opacity:1}30.3%{transform:translate(-854.7%,96.82%) scale(1) rotate(0deg);opacity:1}36.62%{transform:translate(-1068.38%,113.51%) scale(1) rotate(0deg);opacity:1}42.93%{transform:translate(-1282.05%,116.85%) scale(1) rotate(0deg);opacity:1}49.24%{transform:translate(-1495.73%,110.18%) scale(1) rotate(0deg);opacity:1}55.56%{transform:translate(-1709.4%,90.14%) scale(1) rotate(0deg);opacity:1}61.89%{transform:translate(-1923.08%,66.77%) scale(1) rotate(0deg);opacity:1}68.21%{transform:translate(-2136.75%,43.4%) scale(1) rotate(0deg);opacity:1}72%{transform:translate(-2264.96%,33.39%) scale(1) rotate(0deg);opacity:1}73%{transform:translate(-2264.96%,33.39%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(-2264.96%,33.39%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-pc-13{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(28.74%,0%) scale(1) rotate(0deg);opacity:1}86%{transform:translate(1484.67%,0%) scale(1) rotate(0deg);opacity:1}92%{transform:translate(1503.83%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(1503.83%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-pc-14{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(114.38%,12.35%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-15{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}5%{transform:translate(24.15%,0%) scale(1) rotate(0deg);opacity:1}88%{transform:translate(2004.83%,0%) scale(1) rotate(0deg);opacity:1}94%{transform:translate(2028.99%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(2028.99%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-pc-16{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}12.5%{transform:translate(-418.27%,28.51%) scale(1) rotate(0deg);opacity:1}25%{transform:translate(-836.54%,33.06%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(-1254.81%,3.72%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-1673.08%,-49.59%) scale(1) rotate(0deg);opacity:1}62.5%{transform:translate(-2091.35%,-102.89%) scale(1) rotate(0deg);opacity:1}75%{transform:translate(-2509.62%,-132.23%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-2927.88%,-127.68%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-3346.15%,-99.17%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-17{0%{transform:translate(0%,0%) scale(1) rotate(11.43deg);opacity:1}3.83%{transform:translate(-25.5%,-37.53%) scale(0.96) rotate(11.43deg);opacity:1}7.67%{transform:translate(-50.99%,-75.06%) scale(0.92) rotate(11.43deg);opacity:1}11.5%{transform:translate(-76.49%,-112.59%) scale(0.88) rotate(11.43deg);opacity:1}15.33%{transform:translate(-101.98%,-150.12%) scale(0.83) rotate(11.43deg);opacity:1}19.17%{transform:translate(-127.48%,-187.65%) scale(0.79) rotate(11.43deg);opacity:1}23%{transform:translate(-152.98%,-225.18%) scale(0.75) rotate(11.43deg);opacity:1}26.83%{transform:translate(-178.47%,-262.71%) scale(0.71) rotate(11.43deg);opacity:1}30.67%{transform:translate(-203.97%,-300.24%) scale(0.67) rotate(11.43deg);opacity:1}34.5%{transform:translate(-229.46%,-337.77%) scale(0.63) rotate(11.43deg);opacity:1}38.33%{transform:translate(-254.96%,-375.3%) scale(0.58) rotate(11.43deg);opacity:1}42.17%{transform:translate(-280.46%,-412.83%) scale(0.54) rotate(11.43deg);opacity:1}46%{transform:translate(-305.95%,-450.36%) scale(0.5) rotate(11.43deg);opacity:1}47%{transform:translate(-305.95%,-450.36%) scale(0.5) rotate(11.43deg);opacity:0}100%{transform:translate(-305.95%,-450.36%) scale(0.5) rotate(11.43deg);opacity:0}}
@keyframes oh-pc-20{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(20.83%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-21{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-20.83%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-22{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(20.83%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-23{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}50%{transform:translate(-20.83%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-25{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}26%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}52%{transform:translate(182.63%,-14.66%) scale(1.03) rotate(0deg);opacity:1}72%{transform:translate(182.63%,-14.66%) scale(1.03) rotate(0deg);opacity:1}96%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-26{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}15%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}16%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}17.75%{transform:translate(-22.78%,-159.44%) scale(0.97) rotate(0deg);opacity:1}19.5%{transform:translate(-45.56%,-285.56%) scale(0.95) rotate(0deg);opacity:1}21.25%{transform:translate(-68.33%,-378.33%) scale(0.93) rotate(0deg);opacity:1}23%{transform:translate(-91.11%,-437.78%) scale(0.9) rotate(0deg);opacity:1}23.5%{transform:translate(-91.11%,-437.78%) scale(0.9) rotate(0deg);opacity:1}25.28%{transform:translate(-75.14%,-751.32%) scale(0.94) rotate(0deg);opacity:1}27.06%{transform:translate(-59.17%,-1012.78%) scale(0.97) rotate(0deg);opacity:1}28.84%{transform:translate(-43.19%,-1222.15%) scale(1.01) rotate(0deg);opacity:1}30.63%{transform:translate(-27.22%,-1379.44%) scale(1.05) rotate(0deg);opacity:1}32.41%{transform:translate(-11.25%,-1484.65%) scale(1.09) rotate(0deg);opacity:1}34.19%{transform:translate(4.72%,-1537.78%) scale(1.13) rotate(0deg);opacity:1}35.97%{transform:translate(20.69%,-1538.82%) scale(1.16) rotate(0deg);opacity:1}37.75%{transform:translate(36.67%,-1487.78%) scale(1.2) rotate(0deg);opacity:1}39.53%{transform:translate(52.64%,-1384.65%) scale(1.24) rotate(0deg);opacity:1}41.31%{transform:translate(68.61%,-1229.44%) scale(1.27) rotate(0deg);opacity:1}43.09%{transform:translate(84.58%,-1022.15%) scale(1.31) rotate(0deg);opacity:1}44.88%{transform:translate(100.56%,-762.78%) scale(1.35) rotate(0deg);opacity:1}46.66%{transform:translate(116.53%,-451.32%) scale(1.39) rotate(0deg);opacity:1}48.44%{transform:translate(132.5%,-87.78%) scale(1.43) rotate(0deg);opacity:1}50.22%{transform:translate(148.47%,327.85%) scale(1.46) rotate(0deg);opacity:1}52%{transform:translate(164.44%,795.56%) scale(1.5) rotate(0deg);opacity:1}60%{transform:translate(164.44%,795.56%) scale(1.5) rotate(0deg);opacity:1}64%{transform:translate(164.44%,795.56%) scale(1.5) rotate(0deg);opacity:1}64.5%{transform:translate(164.44%,795.56%) scale(1.5) rotate(0deg);opacity:1}65.94%{transform:translate(143.89%,453.06%) scale(1.44) rotate(0deg);opacity:1}67.38%{transform:translate(123.33%,180%) scale(1.38) rotate(0deg);opacity:1}68.81%{transform:translate(102.78%,-23.61%) scale(1.31) rotate(0deg);opacity:1}70.25%{transform:translate(82.22%,-157.78%) scale(1.25) rotate(0deg);opacity:1}71.69%{transform:translate(61.67%,-222.5%) scale(1.19) rotate(0deg);opacity:1}73.13%{transform:translate(41.11%,-217.78%) scale(1.13) rotate(0deg);opacity:1}74.56%{transform:translate(20.56%,-143.61%) scale(1.06) rotate(0deg);opacity:1}76%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}77%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}100%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:0}}
@keyframes oh-pc-34{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(3925.93%,23.56%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-35{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(4132.55%,24.8%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-36{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(5353.54%,36.24%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-37{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-3847.95%,-23.09%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-38{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(-3935.41%,-23.61%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-39{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(4321.98%,25.93%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-40{0%{transform:translate(0%,0%) scale(1) rotate(0deg);opacity:1}100%{transform:translate(4640.44%,87.01%) scale(1) rotate(0deg);opacity:1}}
@keyframes oh-pc-van{0%{transform:translate(0,0)}38%{transform:translate(721.05%,16.39%)}62%{transform:translate(721.05%,16.39%)}100%{transform:translate(1133.68%,25.77%)}}
@keyframes oh-pc-41{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(198.87%,73.94%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(281.25%,-39.06%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(198.87%,-129.18%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-198.87%,73.94%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-281.25%,-39.06%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-198.87%,-129.18%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}
@keyframes oh-pc-42{0%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}12.5%{transform:translate(198.87%,73.94%) scale(1) rotate(9.9deg);opacity:1}25%{transform:translate(281.25%,-39.06%) scale(1) rotate(0deg);opacity:1}37.5%{transform:translate(198.87%,-129.18%) scale(1) rotate(-9.9deg);opacity:1}50%{transform:translate(0%,0%) scale(1) rotate(-14deg);opacity:1}62.5%{transform:translate(-198.87%,73.94%) scale(1) rotate(-9.9deg);opacity:1}75%{transform:translate(-281.25%,-39.06%) scale(1) rotate(0deg);opacity:1}87.5%{transform:translate(-198.87%,-129.18%) scale(1) rotate(9.9deg);opacity:1}100%{transform:translate(0%,0%) scale(1) rotate(14deg);opacity:1}}

/* ===================== 墓地・霊園めぐり：淀川を下る ===================== */
/* PC：左に「淀川くだりマップ」を固定し、スクロールに合わせて小舟が川を下る
   スマホ：5か所をつなぐ点線が「川」になり、その上を小舟が下る */
.om-tour{position:relative}
.om-map{display:none}
.om-map__card{position:relative;padding:16px 14px 12px;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)}
.om-map__title{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:2px 0 6px;font-family:var(--maru);font-size:16px;font-weight:700;letter-spacing:.1em;color:var(--wine-deep)}
.om-map__title span{font-family:var(--mincho);font-size:10px;font-weight:600;letter-spacing:.28em;color:var(--gold)}
.om-map__svg{display:block;width:100%;height:auto;overflow:hidden;border-radius:18px}
.om-map__note{margin:6px 6px 0;font-size:11px;line-height:1.7;color:var(--muted);text-align:center}
.om-ward{font-family:var(--maru);font-weight:700;font-size:21px;letter-spacing:.14em;fill:hsl(var(--th) 25% 40% / .5)}
.om-label{font-family:var(--maru);font-weight:700;fill:#6d6250;font-size:17px;paint-order:stroke;stroke:#fffdf6;stroke-width:6px;stroke-linejoin:round}
.om-label--tiny{font-size:13px;fill:#8a7f6c}
.om-label--water{font-size:19px;fill:#5d93b0;letter-spacing:.22em}
.om-credit{font-size:11px;fill:#a59c8b;font-family:var(--sans)}
.om-sign__text{font-family:var(--maru);font-weight:700;font-size:16px;letter-spacing:2px;fill:#5c3d22}
.om-route{stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 9;opacity:.7}
.om-route-done{stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:0 99999;opacity:.75}
.om-pin__pier{stroke:#c9a46a;stroke-width:2.4;stroke-dasharray:1 6;stroke-linecap:round}
.om-pin__drop{fill:#fffdf9;stroke:var(--wine);stroke-width:2.6;transition:fill .4s}
.om-pin__shadow{fill:hsl(var(--th) 30% 20% / .16)}
.om-pin__no{font-family:var(--mincho);font-size:16px;font-weight:700;fill:var(--wine);pointer-events:none;transition:fill .4s}
.om-pin__name{font-size:16px;fill:var(--wine-deep);opacity:.8;transition:opacity .4s}
.om-pin a{cursor:pointer;transition:transform .45s var(--ease)}
.om-pin.is-on a{transform:scale(1.22)}
.om-pin a:focus-visible .om-pin__drop{stroke-width:4.5}
.om-pin.is-done .om-pin__drop{fill:#f3ead8;stroke:#c9a46a}
.om-pin.is-done .om-pin__no{fill:#a58350}
.om-pin.is-on .om-pin__drop{fill:var(--wine)}
.om-pin.is-on .om-pin__no{fill:#fff}
.om-pin.is-on .om-pin__name{opacity:1}
.om-start rect{fill:var(--gold)}
.om-start text{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;fill:#fff}
.om-house{filter:drop-shadow(0 2px 0 rgba(120,100,70,.12))}
/* 小舟：進む向きに合わせて左右を変え、ゆらゆら浮かぶ */
.om-boat__body{transition:transform .35s var(--ease)}
.om-boat.is-left .om-boat__body,.rb-route__walker.is-left .om-boat__body{transform:scaleX(-1)}
.om-boat__bob{animation:om-bob 1.8s ease-in-out infinite alternate}
@keyframes om-bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-2px) rotate(2deg)}}
/* 地図の電車：橋の上を行ったり来たり */
.om-train{animation:om-train 10s linear infinite}
@keyframes om-train{0%{transform:translateX(-30px);opacity:0}8%{opacity:1}46%{transform:translateX(80px);opacity:1}54%,100%{transform:translateX(100px);opacity:0}}

/* スマホ：墓地をつなぐ線は、宝塚・伊丹と同じ点線（少しうすめ） */
@media (max-width:959px){
  .rb-route__base,.rb-route__done{opacity:.6}
  .rb-route__walker > circle{display:none}
  .om-walkboat{transform:scale(.78)}
}

@media (min-width:960px){
  .rb-route{display:none}
  .om-map{display:block}
  .om-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;padding:0 var(--rb-g)}
  .om-map{grid-column:1;grid-row:1 / span 5;position:sticky;top:calc(var(--hd) + 18px);align-self:start;padding-top:60px}
  .om-map__svg{max-height:calc(100vh - var(--hd) - 150px);width:auto;max-width:100%;margin:0 auto}
  .om-tour .rb-stop{grid-column:2;display:block;max-width:600px;padding-top:96px}
  .om-tour .rb-stop:first-of-type{padding-top:70px}
  .om-tour .rb-card{margin-top:40px}
  .om-tour .rb-stop:nth-of-type(even) .rb-stop__head{justify-content:flex-start;text-align:left}
  .om-tour .rb-stop:nth-of-type(even) .rb-stop__head .rb-pin{order:0}
  .om-tour .rb-stop:nth-of-type(n) .rb-stage,.om-tour .rb-stop:nth-of-type(n) .rb-card{grid-column:auto;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .om-boat__bob,.om-train{animation:none}
  .om-boat__body{transition:none}
}

/* 墓地めぐりの小さな飾りの絵（木・花・鳥・生け垣など、平たいタッチのもの）は、景色の絵のタッチと合わないので出さない */
.rb .rb-deco,.rb .rb-hedge,.rb .rb-card__bloom{display:none}

/* 地図の絵には余白がないので、カードの中いっぱいに */
.om-map__svg{border-radius:16px}
.om-ward{paint-order:stroke;stroke:#fffdf6;stroke-width:5px;stroke-linejoin:round;fill:hsl(var(--th) 28% 34% / .85)}


/* ===================== PCのヒーロー：文字の見せ方の試作（?hv=1〜5 で切り替え） =====================
   1 空のタイトル（絵本の表紙のように、空のまん中に大きく）
   2 木の看板（「淀川」の看板と同じ、木の立て看板に）
   3 雲のふきだし（空にうかぶ大きな雲の中に）
   4 飛行機の垂れ幕（飛行機が引っぱる布に、題名）
   5 縦書きの短冊（和紙の短冊に、縦書きで）
   どれも、文字は空の部分（建物より上）に収め、人や車とは重ならないようにする */
@media (min-width:960px){
  html[data-hv] .hero{align-items:flex-start}
  html[data-hv] .hero__heading::after,html[data-hv] .hero__city::after{display:none}
  html[data-hv] .hero__panel{position:absolute;z-index:4;margin:0;padding:0;width:auto}
  html[data-hv] .hero__title{margin-top:0;text-shadow:none}
  html[data-hv] .hero__tags{gap:8px}
  html[data-hv] .hero__tags li{background:rgba(255,255,255,.92);box-shadow:0 6px 14px -10px rgba(20,60,100,.5)}

  /* ---------- 1 空のタイトル ---------- */
  html[data-hv="1"] .hero__panel{top:calc(var(--hd) + 12px);left:50%;transform:translateX(-50%);width:min(980px,86vw);align-items:center;text-align:center}
  html[data-hv="1"] .hero__heading{display:flex;flex-direction:column;align-items:center}
  html[data-hv="1"] .hero__eyebrow{color:#fff;letter-spacing:.5em;text-shadow:0 1px 6px rgba(20,70,120,.5)}
  html[data-hv="1"] .hero__eyebrow::before,html[data-hv="1"] .hero__eyebrow::after{background:rgba(255,255,255,.85)}
  html[data-hv="1"] .hero__title{display:flex;flex-direction:column;align-items:center;color:#fff;margin-top:6px;
    text-shadow:0 3px 0 #2b6f9e,0 -2px 0 #2b6f9e,3px 0 0 #2b6f9e,-3px 0 0 #2b6f9e,2px 2px 0 #2b6f9e,-2px 2px 0 #2b6f9e,2px -2px 0 #2b6f9e,-2px -2px 0 #2b6f9e,0 10px 18px rgba(20,60,110,.35)}
  html[data-hv="1"] .hero__cityLine{justify-content:center;align-items:baseline}
  html[data-hv="1"] .hero__city{font-size:clamp(64px,6vw,92px);letter-spacing:.08em}
  html[data-hv="1"] .hero__no{font-size:34px;color:#fff}
  html[data-hv="1"] .hero__mid{font-size:clamp(34px,3.2vw,48px);margin-top:4px}
  html[data-hv="1"] .hero__small{justify-content:center;margin-top:12px;font-size:16px;color:#2b5f86;text-shadow:none;background:rgba(255,255,255,.9);padding:5px 18px;border-radius:99px}
  html[data-hv="1"] .hero__small::before{display:none}
  html[data-hv="1"] .hero__act{padding-top:16px;max-width:none;display:flex;flex-direction:column;align-items:center;gap:14px}
  html[data-hv="1"] .hero__tags{justify-content:center;flex-wrap:nowrap}
  html[data-hv="1"] .hero__tags li{font-size:12px}
  html[data-hv="1"] .hero__cta{justify-content:center;margin:0}

  /* ---------- 2 木の看板 ---------- */
  html[data-hv="2"] .hero__panel{top:calc(var(--hd) + 20px);left:var(--heroL);width:min(620px,46vw)}
  html[data-hv="2"] .hero__heading{position:relative;padding:22px 38px 24px;border-radius:16px;
    background:repeating-linear-gradient(176deg,rgba(255,255,255,.06) 0 3px,rgba(0,0,0,0) 3px 11px),linear-gradient(180deg,#d6a46c 0%,#c48f57 55%,#b27b45 100%);
    border:4px solid #8f6237;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.08),0 18px 26px -18px rgba(60,35,10,.6)}
  html[data-hv="2"] .hero__heading::before{content:"";display:block;position:absolute;z-index:-1;left:16%;right:16%;bottom:-62px;height:66px;
    background:linear-gradient(90deg,#8f6237 0 14px,transparent 14px calc(100% - 14px),#8f6237 calc(100% - 14px));border-radius:3px}
  html[data-hv="2"] .hero__eyebrow{color:#fbe9cf}
  html[data-hv="2"] .hero__eyebrow::after{background:#fbe9cf}
  html[data-hv="2"] .hero__title{color:#4a2c14;text-shadow:0 1px 0 rgba(255,235,200,.55)}
  html[data-hv="2"] .hero__city{font-size:clamp(56px,5vw,74px)}
  html[data-hv="2"] .hero__mid{font-size:clamp(30px,2.7vw,40px);margin-top:4px}
  html[data-hv="2"] .hero__small{color:#5c3a1c;font-size:18px}
  html[data-hv="2"] .hero__small::before{background:#5c3a1c}
  html[data-hv="2"] .hero__act{padding-top:74px;max-width:none}
  html[data-hv="2"] .hero__tags{flex-wrap:nowrap}
  html[data-hv="2"] .hero__tags li{font-size:11.5px}

  /* ---------- 3 雲のふきだし ---------- */
  html[data-hv="3"] .hero__panel{top:calc(var(--hd) - 4px);left:calc(var(--heroL) - 30px);width:min(700px,52vw)}
  html[data-hv="3"] .hero__heading{position:relative;padding:58px 70px 50px 74px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 230' preserveAspectRatio='none'%3E%3Cpath d='M58 196C24 198 6 176 12 150C18 126 40 116 58 120C52 90 70 64 100 66C112 36 150 22 180 38C200 14 246 10 270 34C296 18 338 28 346 60C378 62 398 92 390 122C400 150 384 182 352 186C344 210 306 222 280 206C258 226 216 228 196 210C170 226 128 224 112 206C94 214 70 210 58 196Z' fill='%23ffffff'/%3E%3Cpath d='M58 196C70 210 94 214 112 206C128 224 170 226 196 210C216 228 258 226 280 206C306 222 344 210 352 186C330 196 304 198 284 190C260 204 220 206 198 194C174 206 134 206 112 192C92 200 72 200 58 196Z' fill='%23e4f0f8'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    filter:drop-shadow(0 18px 22px rgba(30,90,140,.25))}
  html[data-hv="3"] .hero__title{color:#24476b}
  html[data-hv="3"] .hero__eyebrow{color:#5c8fb5}
  html[data-hv="3"] .hero__city{font-size:clamp(56px,5vw,76px)}
  html[data-hv="3"] .hero__city::after{display:block!important;background:#ffe27a;opacity:.7}
  html[data-hv="3"] .hero__mid{font-size:clamp(30px,2.7vw,40px)}
  html[data-hv="3"] .hero__small{color:#3b6b8f}
  html[data-hv="3"] .hero__act{padding:6px 0 0 54px;max-width:none}
  html[data-hv="3"] .hero__tags li{border-radius:18px 18px 18px 6px}

  /* ---------- 4 飛行機の垂れ幕 ---------- */
  html[data-hv="4"] .hero__panel{top:calc(var(--hd) + 26px);left:var(--heroL);width:calc(100vw - var(--heroL) * 2)}
  html[data-hv="4"] .hero__heading{display:flex;flex-direction:column;align-items:flex-start}
  html[data-hv="4"] .hero__eyebrow{color:#fff;text-shadow:0 1px 6px rgba(20,70,120,.5);margin-left:12px}
  html[data-hv="4"] .hero__eyebrow::after{background:#fff}
  html[data-hv="4"] .hero__title{position:relative;display:flex;align-items:baseline;gap:18px;margin-top:10px;padding:16px 44px 18px 34px;color:#c2453a;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 8Q100 0 200 8T400 6V92Q300 100 200 92T0 94Z' fill='%23fffaf0'/%3E%3Cpath d='M0 80Q100 72 200 80T400 78V92Q300 100 200 92T0 94Z' fill='%23f3e6cf'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    filter:drop-shadow(0 14px 16px rgba(20,60,110,.25));animation:hv-wave 4s ease-in-out infinite;transform-origin:100% 50%}
  @keyframes hv-wave{0%,100%{transform:rotate(-.6deg) translateY(0)}50%{transform:rotate(.6deg) translateY(-4px)}}
  html[data-hv="4"] .hero__title::after{content:"";position:absolute;right:-150px;top:50%;width:150px;height:60px;margin-top:-34px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 60'%3E%3Cpath d='M0 20L58 30M0 46L58 32' stroke='%238e6a45' stroke-width='1.4'/%3E%3Cpath d='M62 28H128Q146 28 146 34Q146 40 128 40H62Z' fill='%23fff'/%3E%3Cpath d='M98 34L84 56H92L114 36Z' fill='%23e9eef2'/%3E%3Cpath d='M98 30L88 12H94L110 30Z' fill='%23e9eef2'/%3E%3Cpath d='M64 28L58 16H64L74 28Z' fill='%233f7fc4'/%3E%3Ccircle cx='132' cy='32' r='2.4' fill='%236f9fd0'/%3E%3Cpath d='M68 34H124' stroke='%233f7fc4' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
  html[data-hv="4"] .hero__cityLine{display:flex;align-items:baseline}
  html[data-hv="4"] .hero__city{font-family:"Yusei Magic",var(--maru);font-size:clamp(46px,4.2vw,64px);color:#c2453a}
  html[data-hv="4"] .hero__no{color:#c2453a}
  html[data-hv="4"] .hero__mid{font-family:"Yusei Magic",var(--maru);font-size:clamp(34px,3vw,46px);margin:0;color:#24476b}
  html[data-hv="4"] .hero__small{margin:14px 0 0 12px;color:#fff;text-shadow:0 1px 6px rgba(20,70,120,.6)}
  html[data-hv="4"] .hero__small::before{background:#fff}
  html[data-hv="4"] .hero__title .hero__small{position:absolute;left:0;top:100%}
  html[data-hv="4"] .hero__act{padding-top:58px;max-width:none;display:flex;align-items:center;gap:22px}
  html[data-hv="4"] .hero__tags{flex-wrap:wrap;max-width:520px}
  html[data-hv="4"] .hero__tags li{font-size:11.5px}
  html[data-hv="4"] .hero__cta{margin:0;flex:none}

  /* ---------- 5 縦書きの短冊 ---------- */
  html[data-hv="5"] .hero__panel{top:calc(var(--hd) - 10px);left:var(--heroL);display:flex;flex-direction:row;align-items:flex-start;gap:34px}
  html[data-hv="5"] .hero__heading{position:relative;writing-mode:vertical-rl;padding:34px 24px 40px;min-height:430px;
    background:radial-gradient(120% 80% at 30% 20%,#fffdf6,#f8f1e1);border-radius:4px;box-shadow:0 22px 30px -20px rgba(60,40,10,.55),inset 0 0 0 1px rgba(160,130,90,.15)}
  html[data-hv="5"] .hero__heading::before{content:"";display:block;position:absolute;left:50%;top:-26px;width:2px;height:28px;background:#9b7550;writing-mode:horizontal-tb}
  html[data-hv="5"] .hero__eyebrow{writing-mode:vertical-rl;font-size:11px;color:#b48a55;letter-spacing:.4em}
  html[data-hv="5"] .hero__eyebrow::after{width:1px;height:28px}
  html[data-hv="5"] .hero__title{font-family:"Klee One",var(--mincho);color:#23364d;margin:0 14px 0 0;display:flex;flex-direction:column}
  html[data-hv="5"] .hero__cityLine{flex-direction:column;align-items:center}
  html[data-hv="5"] .hero__city{font-family:"Klee One",var(--mincho);font-size:clamp(54px,4.6vw,70px);font-weight:600;letter-spacing:.06em}
  html[data-hv="5"] .hero__no{font-size:28px;margin-top:4px}
  html[data-hv="5"] .hero__mid{font-family:"Klee One",var(--mincho);font-weight:600;font-size:clamp(30px,2.6vw,38px);margin:0 18px 0 0;letter-spacing:.1em}
  html[data-hv="5"] .hero__small{margin:0 16px 0 0;font-size:17px;color:#7a5a36;font-family:"Klee One",var(--mincho);letter-spacing:.2em}
  html[data-hv="5"] .hero__small::before{width:1px;height:24px}
  html[data-hv="5"] .hero__act{padding-top:24px;max-width:430px}
  html[data-hv="5"] .hero__tags li{font-size:12px}
  html[data-hv="5"] .hero__cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px}
}
@media (min-width:960px){
  html[data-hv] .hero__tags li{white-space:nowrap}
  html[data-hv="1"] .hero__title .hero__city,html[data-hv="1"] .hero__title .hero__no,html[data-hv="1"] .hero__title .hero__mid{color:#fff}
  html[data-hv="2"] .hero__tags{flex-wrap:wrap}
  html[data-hv="4"] .hero__act{flex-direction:column;align-items:flex-start;gap:16px;padding-top:56px}
  html[data-hv="5"] .hero__heading::before{display:none}
  html[data-hv="5"] .hero__act{max-width:380px}
}

/* ===================== PCのヒーロー：見出しを読みやすくする工夫の試作（?ht=1・2） =====================
   1 文字に白いふちどり（絵本の題字のように）
   2 紙のテープ（行ごとに、クリーム色の紙テープを少しななめに貼り、その上に文字） */
@media (min-width:960px){
  /* ---------- 1 白いふちどり ---------- */
  html[data-ht="1"] .hero__eyebrow,html[data-ht="1"] .hero__city,html[data-ht="1"] .hero__no,html[data-ht="1"] .hero__mid,html[data-ht="1"] .hero__small{
    -webkit-text-stroke:7px #fff;paint-order:stroke fill;text-shadow:0 4px 10px rgba(30,80,120,.22)}
  html[data-ht="1"] .hero__city{-webkit-text-stroke:10px #fff}
  html[data-ht="1"] .hero__eyebrow{-webkit-text-stroke:5px #fff}
  html[data-ht="1"] .hero__city::after{display:none}
  html[data-ht="1"] .hero__small::before,html[data-ht="1"] .hero__eyebrow::after{box-shadow:0 0 0 2px #fff}

  /* ---------- 2 紙のテープ ---------- */
  html[data-ht="2"] .hero__city::after{display:none}
  html[data-ht="2"] .hero__eyebrow,html[data-ht="2"] .hero__cityLine,html[data-ht="2"] .hero__mid,html[data-ht="2"] .hero__small{position:relative;isolation:isolate;width:max-content}
  html[data-ht="2"] .hero__eyebrow::before,html[data-ht="2"] .hero__cityLine::before,html[data-ht="2"] .hero__mid::before,html[data-ht="2"] .hero__small::after{
    content:"";position:absolute;z-index:-1;inset:-6px -22px -4px -18px;background:#fffaf0;
    box-shadow:0 6px 12px -8px rgba(60,40,10,.45);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 2L7 0L11 3L15 1L198 2L196 6L200 10L197 14L199 18L196 22L200 26L197 30L199 34L196 38L190 40L4 39L0 35L3 31L0 27L3 23L0 19L3 15L0 11L3 7Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 2L7 0L11 3L15 1L198 2L196 6L200 10L197 14L199 18L196 22L200 26L197 30L199 34L196 38L190 40L4 39L0 35L3 31L0 27L3 23L0 19L3 15L0 11L3 7Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  html[data-ht="2"] .hero__cityLine::before{transform:rotate(-1.6deg);inset:-2px -26px 2px -22px;background:#fffaf0}
  html[data-ht="2"] .hero__mid{margin-top:22px}
  html[data-ht="2"] .hero__mid::before{transform:rotate(1.1deg);background:#fdf3d8}
  html[data-ht="2"] .hero__small{margin-top:20px;padding-right:6px}
  html[data-ht="2"] .hero__small::after{transform:rotate(-.8deg);background:#eef7f2;inset:-5px -14px -5px -14px}
  html[data-ht="2"] .hero__eyebrow{padding-right:8px}
  html[data-ht="2"] .hero__eyebrow::before{transform:rotate(-1deg);inset:-5px -12px -5px -12px;background:#fff}
  /* テープを留めるマスキングテープ（「大阪市の」の左上） */
  html[data-ht="2"] .hero__cityLine::after{content:"";position:absolute;left:-34px;top:-14px;width:62px;height:20px;background:rgba(242,178,72,.75);transform:rotate(-32deg);z-index:1}
}

/* ===================== PCのヒーロー：文字の位置の試作（?hp=1〜3。?ht= と組み合わせられる） =====================
   1 上の空へ：文字のかたまりを上に寄せ、街や川と重ならないようにする（ボタンは下のまま）
   2 空のまん中：題名を画面のまん中・上に大きく。タグとボタンは左下にまとめる
   3 小さく左上：題名を小さめにして左上へ。絵を広く見せる */
@media (min-width:960px){
  html[data-hp] .hero{align-items:stretch}
  html[data-hp] .hero__panel{padding-top:calc(var(--hd) + 8px);padding-bottom:40px;min-height:100%}
  html[data-hp] .hero__act{margin-top:auto}

  html[data-hp="1"] .hero__panel{padding-top:calc(var(--hd) - 4px)}
  html[data-hp="1"] .hero__act{margin-top:auto;padding-top:0}

  html[data-hp="2"] .hero__panel{position:absolute;inset:0;width:auto;margin:0;padding:calc(var(--hd) + 4px) var(--heroL) 40px;align-items:flex-start}
  html[data-hp="2"] .hero__heading{align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center}
  html[data-hp="2"] .hero__title{display:flex;flex-direction:column;align-items:center}
  html[data-hp="2"] .hero__cityLine{justify-content:center}
  html[data-hp="2"] .hero__city{font-size:clamp(66px,6.2vw,96px)}
  html[data-hp="2"] .hero__small{justify-content:center}
  html[data-hp="2"] .hero__act{margin-top:auto;max-width:620px}

  html[data-hp="3"] .hero__panel{padding-top:calc(var(--hd) - 8px)}
  html[data-hp="3"] .hero__city{font-size:clamp(44px,3.8vw,56px)}
  html[data-hp="3"] .hero__no{font-size:22px}
  html[data-hp="3"] .hero__mid{font-size:clamp(24px,2.1vw,30px);margin-top:4px}
  html[data-hp="3"] .hero__small{font-size:15px;margin-top:6px}
  html[data-hp="3"] .hero__title{margin-top:10px}
  html[data-hp="3"] .hero__act{margin-top:auto}
}
/* 位置の試作：タグとボタンは、題名のすぐ下（空の中）にまとめる。下の道の人や車と重ねない */
@media (min-width:960px){
  html[data-hp] .hero__act{margin-top:0!important;padding-top:22px!important}
  html[data-hp="2"] .hero__act{align-self:center;display:flex;flex-direction:column;align-items:center}
  html[data-hp="2"] .hero__tags,html[data-hp="2"] .hero__cta{justify-content:center}
  html[data-hp="2"] .hero__tags{flex-wrap:wrap;max-width:720px}
  html[data-hp] .hero__tags li{white-space:nowrap}
  html[data-hp="3"] .hero__tags li{font-size:11.5px}
}

/* ===================== PCのヒーロー：文字を「かたまり」で動かさず、ひとつずつ自由に置く試作（?hl=1〜5） =====================
   入れるのは「大阪市の お墓参り代行・清掃」「西淀川・淀川・此花・福島」と、LINE・電話のボタンだけ（タグはなし）
   1 空に一行      ：題名を空いっぱいに一行で。地区名とボタンはその下のまん中
   2 道しるべ      ：題名は左上。地区名は川べりに立つ木の道しるべに
   3 対角に散らす  ：「大阪市の」を左上に大きく、「お墓参り代行・清掃」と地区名を右上へ。ボタンは左下の菜の花の上
   4 ロゴだけ      ：スマホと同じく、空のまん中に大きな白いロゴ。その下に一行で小さく題名と地区名
   5 縦書き        ：左の空に、縦書きで題名と地区名 */
@media (min-width:960px){
  html[data-hl] .hero__panel,html[data-hl] .hero__copy,html[data-hl] .hero__heading,html[data-hl] .hero__act{display:contents}
  html[data-hl] .hero__tags,html[data-hl] .floral-wreath,html[data-hl] .hero__city::after{display:none}
  html[data-hl] .hero__eyebrow,html[data-hl] .hero__title,html[data-hl] .hero__cityLine,html[data-hl] .hero__mid,html[data-hl] .hero__small,html[data-hl] .hero__cta{z-index:4}
  html[data-hl] .hero__title{margin:0;text-shadow:none}
  html[data-hl] .hero__cta{margin:0}
  html[data-hl]:not([data-hl="4"]) :is(.hero__eyebrow,.hero__city,.hero__no,.hero__mid,.hero__small){-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 4px 10px rgba(30,80,120,.2)}
  html[data-hl]:not([data-hl="4"]) .hero__city{-webkit-text-stroke:9px #fff}
  html[data-hl]:not([data-hl="4"]) .hero__eyebrow{-webkit-text-stroke:4px #fff}

  /* ---------- 1 空に一行 ---------- */
  html[data-hl="1"] .hero__eyebrow{position:absolute;left:50%;top:13%;transform:translateX(-50%)}
  html[data-hl="1"] .hero__title{position:absolute;left:50%;top:17%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;width:max-content;max-width:94vw}
  html[data-hl="1"] .hero__city{font-size:clamp(56px,5vw,80px)}
  html[data-hl="1"] .hero__no{font-size:clamp(30px,2.6vw,40px);margin-right:10px}
  html[data-hl="1"] .hero__mid{font-size:clamp(46px,4.1vw,66px);margin:0}
  html[data-hl="1"] .hero__small{flex-basis:100%;justify-content:center;margin-top:12px;font-size:20px}
  html[data-hl="1"] .hero__cta{position:absolute;left:50%;top:39%;transform:translateX(-50%);width:max-content}

  /* ---------- 2 道しるべ ---------- */
  html[data-hl="2"] .hero__title{display:contents}
  html[data-hl="2"] .hero__eyebrow{position:absolute;left:var(--heroL);top:12%}
  html[data-hl="2"] .hero__cityLine{position:absolute;left:var(--heroL);top:15.5%}
  html[data-hl="2"] .hero__city{font-size:clamp(64px,5.8vw,88px)}
  html[data-hl="2"] .hero__mid{position:absolute;left:var(--heroL);top:29%;margin:0;font-size:clamp(36px,3.2vw,50px)}
  html[data-hl="2"] .hero__cta{position:absolute;left:var(--heroL);top:40%;width:max-content}
  html[data-hl="2"] .hero__small{position:absolute;left:4%;top:66%;margin:0;padding:10px 20px 10px 18px;transform:rotate(-3deg);font-size:19px;color:#4a2c14;-webkit-text-stroke:0!important;text-shadow:0 1px 0 rgba(255,235,200,.6)!important;
    background:repeating-linear-gradient(178deg,rgba(255,255,255,.07) 0 3px,transparent 3px 10px),linear-gradient(180deg,#d6a46c,#bd8650);border:3px solid #8f6237;border-radius:6px 2px 2px 6px;box-shadow:0 10px 16px -10px rgba(60,35,10,.6);}
  html[data-hl="2"] .hero__small::before{display:none}
  html[data-hl="2"] .hero__small::after{content:"";position:absolute;z-index:-1;left:28px;top:calc(100% + 3px);width:9px;height:70px;background:linear-gradient(90deg,#9b7046,#7a5531);border-radius:2px}
  html[data-hl="2"] .hero__small{overflow:visible}

  /* ---------- 3 対角に散らす ---------- */
  html[data-hl="3"] .hero__title{display:contents}
  html[data-hl="3"] .hero__eyebrow{position:absolute;left:var(--heroL);top:11%}
  html[data-hl="3"] .hero__cityLine{position:absolute;left:var(--heroL);top:14%}
  html[data-hl="3"] .hero__city{font-size:clamp(84px,7.6vw,118px)}
  html[data-hl="3"] .hero__no{font-size:40px}
  html[data-hl="3"] .hero__mid{position:absolute;right:9%;top:16%;margin:0;font-size:clamp(40px,3.6vw,56px)}
  html[data-hl="3"] .hero__small{position:absolute;right:9%;top:27%;margin:0;font-size:20px}
  html[data-hl="3"] .hero__cta{position:absolute;left:var(--heroL);bottom:6%;width:max-content}

  /* ---------- 4 ロゴだけ ---------- */
  html[data-hl="4"] .hero__photo .oh-logo{display:flex;left:50%!important;top:-11%!important;width:21%!important}
  html[data-hl="4"] .hero__eyebrow{display:none}
  html[data-hl="4"] .hero__title{position:absolute;left:50%;top:31%;transform:translateX(-50%);display:flex;align-items:baseline;gap:4px;width:max-content;color:#fff;text-shadow:0 1px 8px rgba(20,70,120,.55),0 0 2px rgba(20,70,120,.4)}
  html[data-hl="4"] :is(.hero__city,.hero__no,.hero__mid,.hero__small){color:#fff;font-size:24px;margin:0;letter-spacing:.12em}
  html[data-hl="4"] .hero__small{margin-left:18px}
  html[data-hl="4"] .hero__small::before{background:#fff}
  html[data-hl="4"] .hero__cta{position:absolute;left:50%;top:38%;transform:translateX(-50%);width:max-content}

  /* ---------- 5 縦書き ---------- */
  html[data-hl="5"] .hero__eyebrow{display:none}
  html[data-hl="5"] .hero__title{position:absolute;left:var(--heroL);top:10%;writing-mode:vertical-rl;display:block;font-family:"Klee One",var(--mincho)}
  html[data-hl="5"] .hero__cityLine{align-items:center}
  html[data-hl="5"] .hero__city{font-family:"Klee One",var(--mincho);font-weight:600;font-size:clamp(60px,5.2vw,78px)}
  html[data-hl="5"] .hero__no{font-family:"Klee One",var(--mincho);font-size:30px;margin-top:6px}
  html[data-hl="5"] .hero__mid{font-family:"Klee One",var(--mincho);font-weight:600;font-size:clamp(40px,3.4vw,52px);margin:0 16px 0 0}
  html[data-hl="5"] .hero__small{font-family:"Klee One",var(--mincho);font-size:19px;margin:0 14px 0 0}
  html[data-hl="5"] .hero__small::before{width:1px;height:22px}
  html[data-hl="5"] .hero__cta{position:absolute;left:calc(var(--heroL) + 290px);top:14%;display:flex;flex-direction:column;gap:14px;width:max-content}
}

/* ===================== PCのヒーロー：案内板（data-hl="9"：ふだんはこれ） ===================== */
.oh-sign,.oh-sign__tags,.oh-front{display:none}
html:not([data-hl="9"]) .oh-front__box > img{display:none}
@media (min-width:960px){
  html[data-hl="9"] .hero{--bw:clamp(470px,37vw,620px);--bh:calc(var(--bw) * 1113 / 1223);--bl:var(--heroL);--bt:calc(var(--hd) + 22px)}
  html[data-hl="9"] .oh-sign{display:block;position:absolute;z-index:3;left:var(--bl);top:var(--bt);width:var(--bw);pointer-events:none;filter:drop-shadow(0 18px 18px rgba(40,70,40,.18))}
  html[data-hl="9"] .oh-sign__board{display:block;width:100%;height:auto}
  /* 小鳥：板の左上のふちにとまる */
  html[data-hl="9"] .oh-sign__bird{position:absolute;left:18%;top:9.6%;width:13%;transform:translate(-50%,-100%)}
  html[data-hl="9"] .oh-sign__bird svg{display:block;width:100%;overflow:visible}
  .sg-bird__head{animation:sg-head 5s ease-in-out infinite}
  @keyframes sg-head{0%,40%,100%{transform:rotate(0)}48%,60%{transform:rotate(-16deg)}70%,78%{transform:rotate(10deg)}}
  .sg-bird__hop{animation:sg-hop 7s ease-in-out infinite}
  @keyframes sg-hop{0%,84%,100%{transform:translate(0,0)}88%{transform:translate(4px,-9px)}92%{transform:translate(8px,0)}95%{transform:translate(8px,-3px)}98%{transform:translate(4px,0)}}

  /* 文字：板の上に置く（見出しはページの文字のまま） */
  html[data-hl="9"] :is(.hero__panel,.hero__copy,.hero__heading,.hero__act){display:contents}
  html[data-hl="9"] :is(.hero__tags,.floral-wreath,.hero-spring){display:none!important}
  html[data-hl="9"] :is(.hero__eyebrow,.hero__title,.hero__cta){z-index:4}
  html[data-hl="9"] .hero__eyebrow{position:absolute;left:calc(var(--bl) + var(--bw) * .5);top:calc(var(--bt) + var(--bh) * .085);transform:translateX(-50%);
    font-size:calc(var(--bw) * .026);letter-spacing:.32em;color:#3f7a54;white-space:nowrap}
  html[data-hl="9"] .hero__eyebrow::after{display:none}
  html[data-hl="9"] .hero__title{position:absolute;left:calc(var(--bl) + var(--bw) * .505);top:calc(var(--bt) + var(--bh) * .195);transform:translateX(-50%);
    width:calc(var(--bw) * .84);margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:none}
  html[data-hl="9"] .hero__cityLine{justify-content:center;align-items:baseline}
  html[data-hl="9"] .hero__city{font-size:calc(var(--bw) * .145);line-height:1.15;color:#22344d;letter-spacing:.06em}
  html[data-hl="9"] .hero__city::after{display:block!important;left:4%;right:2%;bottom:.12em;height:.16em;background:#bfe09a;opacity:.9;border-radius:99px}
  html[data-hl="9"] .hero__no{font-size:calc(var(--bw) * .05);color:#22344d}
  html[data-hl="9"] .hero__mid{font-size:calc(var(--bw) * .071);margin-top:calc(var(--bw) * .012);color:#24584a;letter-spacing:.04em;white-space:nowrap}
  html[data-hl="9"] .hero__small{justify-content:center;margin-top:calc(var(--bw) * .02);font-size:calc(var(--bw) * .031);color:#3a4a5c;gap:12px}
  html[data-hl="9"] .hero__small::before,html[data-hl="9"] .hero__small::after{content:"";display:block;width:calc(var(--bw) * .06);height:1.5px;background:#7a8a6a;opacity:.6}

  /* 木札：板の下にぶら下がって、風で少しゆれる */
  html[data-hl="9"] .oh-sign__tags{display:flex;position:absolute;z-index:4;margin:0;padding:0;list-style:none;gap:calc(var(--bw) * .03);justify-content:center;
    left:calc(var(--bl) + var(--bw) * .155);width:calc(var(--bw) * .69);top:calc(var(--bt) + var(--bh) * .605)}
  html[data-hl="9"] .oh-sign__tags li{flex:1;aspect-ratio:589 / 406;background:url(img/hero/tag1.webp) center/100% 100% no-repeat;transform-origin:50% 2%;animation:sg-swing 4.6s ease-in-out infinite;animation-delay:var(--d);display:flex;align-items:flex-end;justify-content:center}
  html[data-hl="9"] .oh-sign__tags li:nth-child(2){background-image:url(img/hero/tag2.webp)}
  html[data-hl="9"] .oh-sign__tags li:nth-child(3){background-image:url(img/hero/tag3.webp)}
  html[data-hl="9"] .oh-sign__tags span{display:block;width:100%;height:62%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6%;
    font-family:var(--maru);font-weight:700;font-size:calc(var(--bw) * .026);line-height:1.3;color:#5a3d22}
  @keyframes sg-swing{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}

  /* 看板の柱より手前にある植え込み・木（絵から切り抜いたもの）。絵と同じ位置・大きさで、看板の上に重ねる */
  html[data-hl="9"] .oh-front{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;container-type:size}
  .oh-front__box{position:absolute;right:0;bottom:0;width:max(100cqw,calc(100cqh * 1.5));aspect-ratio:1774 / 887}
  html[data-hl="9"] .oh-front__box > img{display:block;width:100%;height:auto}
  /* 案内板がないとき（ほかの試作）も、道の人と車は見せる */
  html:not([data-hl="9"]) .oh-front{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;container-type:size}
  /* LINE・電話のボタンは出さない（右の固定ボタンがあるため） */
  html[data-hl="9"] .hero__cta{display:none!important}
  /* LINE・電話：柱のあいだ、木札の下（いまは使わない） */
  html[data-hl="9"] .hero__cta{position:absolute;left:calc(var(--bl) + var(--bw) * .5);top:calc(var(--bt) + var(--bh) * .82);transform:translateX(-50%);margin:0;width:max-content;gap:14px}
  html[data-hl="9"] .hero__cta .btn{box-shadow:0 10px 18px -10px rgba(20,60,40,.5)}
}
@media (prefers-reduced-motion:reduce){.sg-bird__head,.sg-bird__hop,.oh-sign__tags li{animation:none!important}}

/* ===================== 墓地めぐりの入口・出口の見せ方の試作（?ra=1〜5。PC） =====================
   1 左右の角から：絵の左はしと右はしだけを、画面のはしにぴったりつけて置く（まん中は空ける。作業内容の上の草むらと同じ見せ方）
   2 絵を見出しの上に：絵を「写真でめぐる」の上に置く（ぼかしなし）
   3 木の看板と木札：見出しを案内板に書き、5か所の名前を木札にしてぶら下げる（入口の絵はなし）
   4 入口なし：入口の絵を出さない（出口だけ）
   5 端までぴったり・低く：画面の横いっぱいに、上下を切って低い帯にする（ぼかしなし） */
@media (min-width:960px){
  html[data-ra] .rb-scene--art,html[data-ra] .rb-end__scene--art{-webkit-mask-image:none!important;mask-image:none!important}

  /* ---------- 1 左右の角から ---------- */
  html[data-ra="1"] .rb-scene--art,html[data-ra="1"] .rb-end__scene--art{width:100vw;margin-left:calc(50% - 50vw);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 24%,transparent 34%,transparent 66%,#000 76%,#000 100%)!important;
            mask-image:linear-gradient(90deg,#000 0,#000 24%,transparent 34%,transparent 66%,#000 76%,#000 100%)!important}
  html[data-ra="1"] .rb-scene--art{margin-top:-40px}
  html[data-ra="1"] .rb-intro__copy{z-index:3}

  /* ---------- 2 絵を見出しの上に：絵 → 「写真でめぐる」→ 見出し の順（絵は少し小さめ、ぼかしなし・左右は白く残す） ---------- */
  html[data-ra="2"] .rb-intro{display:flex;flex-direction:column}
  html[data-ra="2"] .rb-scene--art{order:-1;width:min(76vw,1100px);margin:0 auto 18px}
  /* ---------- 3 木の看板と木札 ---------- */
  html[data-ra="3"] .rb-scene--art{display:none}
  html[data-ra="3"] .rb-intro__copy{position:relative;padding-top:0}
  html[data-ra="3"] .rb-intro__copy::before{content:"";position:absolute;z-index:0;left:50%;top:0;transform:translateX(-50%);width:540px;aspect-ratio:1223 / 790;
    background:url(img/hero/board.webp) top center/100% auto no-repeat;filter:drop-shadow(0 14px 16px rgba(40,70,40,.15))}
  html[data-ra="3"] .rb-kicker,html[data-ra="3"] .rb-title{position:relative;z-index:1}
  html[data-ra="3"] .rb-kicker{margin:44px 0 0;color:#3f7a54}
  html[data-ra="3"] .rb-title{margin-top:44px;font-family:var(--maru);font-weight:700;font-size:40px;line-height:1.45;color:#22344d}
  html[data-ra="3"] .rb-lead{position:relative;margin-top:150px}
  html[data-ra="3"] .rb-chips{gap:14px;margin-top:28px}
  html[data-ra="3"] .rb-chips li{animation:sg-swing 4.6s ease-in-out infinite;transform-origin:50% 0}
  html[data-ra="3"] .rb-chips li:nth-child(2n){animation-delay:-1.6s}
  html[data-ra="3"] .rb-chips li:nth-child(3n){animation-delay:-3s}
  html[data-ra="3"] .rb-chips a{width:150px;aspect-ratio:589 / 406;padding:30% 0 0;border:0;border-radius:0;justify-content:center;background:url(img/hero/tag1.webp) center/100% 100% no-repeat;color:#5a3d22;font-size:15px;box-shadow:none}
  html[data-ra="3"] .rb-chips li:nth-child(2n) a{background-image:url(img/hero/tag2.webp)}
  html[data-ra="3"] .rb-chips li:nth-child(3n) a{background-image:url(img/hero/tag3.webp)}
  html[data-ra="3"] .rb-chips b{background:#f3e3c4;color:#8a5a2c}
  @keyframes sg-swing{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}

  /* ---------- 4 入口なし ---------- */
  html[data-ra="4"] .rb-scene--art{display:none}

  /* ---------- 5 端までぴったり・低く ---------- */
  html[data-ra="5"] .rb-scene--art,html[data-ra="5"] .rb-end__scene--art{width:100vw;margin-left:calc(50% - 50vw);height:150px;overflow:hidden}
  html[data-ra="5"] :is(.rb-scene--art,.rb-end__scene--art) .rb-art__picture{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
}
/* ---------- 6 元の「島」の形：ChatGPTが描いた自然なはしの形のまま（左右を描き足す前の絵）。小さめ・ぼかしなし ---------- */
@media (min-width:960px){
  html[data-ra="6"] .rb-scene--art{--art-ratio:1400 / 588;width:min(62vw,900px);margin-left:auto;margin-right:auto}
  html[data-ra="6"] .rb-scene--art .rb-art__image{content:url(img/art/meguri-intro-island.webp)}
  html[data-ra="6"] .rb-end__scene--art{--art-ratio:1400 / 557;width:min(62vw,900px);margin-left:auto;margin-right:auto}
  html[data-ra="6"] .rb-end__scene--art .rb-art__image{content:url(img/art/meguri-end-island.webp)}
  html[data-ra="6"] .oa-layer--meguri-intro,html[data-ra="6"] .oa-layer--meguri-end{display:none}
}

/* ===== 墓地めぐりの出口：川べりにつながれた小舟（ChatGPTの絵） ===== */
.op-goal{position:relative;width:min(100%,560px);margin:0 auto 4px;height:auto}
.op-goal__img{display:block;width:100%;height:auto}
/* 点線の着く所：小舟 */
.rb--art .op-goal__arrive{position:absolute!important;left:50%!important;top:62%!important;width:0;height:0;margin:0;border:0;opacity:0}
@media (min-width:960px){.op-goal{width:620px;margin-top:40px}}

/* ===== スマホの墓地めぐり：入口・出口の絵の上の小さな生き物 ===== */
.cr-layer{position:absolute;inset:0;pointer-events:none;z-index:2}
.cr{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-100%)}
.cr svg{display:block;width:100%;height:auto;overflow:visible}
@media (min-width:960px){.rb-scene .cr-layer{display:none}.cr--turtle{display:none}}
/* 蝶（PCの出口だけ）：花の上をひらひら */
.cr--bfly{display:none}
@media (min-width:960px){.cr--bfly{display:block;transform:translate(-50%,-50%)}}
.cr--bfly1{animation:cr-bf1 14s ease-in-out infinite}
.cr--bfly2{animation:cr-bf2 17s ease-in-out infinite}
@keyframes cr-bf1{0%,100%{left:22%;top:62%}25%{left:30%;top:52%}50%{left:38%;top:66%}75%{left:28%;top:74%}}
@keyframes cr-bf2{0%,100%{left:82%;top:66%}30%{left:74%;top:56%}55%{left:66%;top:70%}80%{left:78%;top:76%}}
.cr-flap{transform-origin:0 0;animation:cr-flap .3s ease-in-out infinite alternate}
@keyframes cr-flap{from{transform:scaleX(1)}to{transform:scaleX(.4)}}
/* ウサギ：右へ3回ぴょん→止まって耳をぴくっ→向きを変えて戻る */
.cr--rabbit{animation:cr-rabbit-x 12s linear infinite}
.cr--rabbit svg{animation:cr-rabbit-y 12s linear infinite,cr-face 12s step-end infinite}
@keyframes cr-rabbit-x{0%,8%{left:20%}14%{left:23%}20%{left:26%}26%,50%{left:29%}56%{left:26%}62%{left:23%}68%,100%{left:20%}}
@keyframes cr-rabbit-y{0%,8%,14%,20%,26%,50%,56%,62%,68%,100%{transform:translateY(0)}11%,17%,23%,53%,59%,65%{transform:translateY(-38%)}}
@keyframes cr-face{0%{scale:1 1}48%{scale:-1 1}98%{scale:1 1}}
.cr-ear{animation:cr-ear 3s ease-in-out infinite}
@keyframes cr-ear{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-14deg)}92%{transform:rotate(6deg)}}
/* カエル：石の上で のどをふくらませ、ときどき向こうの石へジャンプして戻る */
.cr--frog{animation:cr-frog-x 9s ease-in-out infinite}
.cr--frog svg{animation:cr-frog-y 9s ease-in-out infinite}
@keyframes cr-frog-x{0%,30%{left:46.6%;top:88.4%}40%,70%{left:60%;top:77%}80%,100%{left:46.6%;top:88.4%}}
@keyframes cr-frog-y{0%,30%,40%,70%,80%,100%{transform:translateY(0)}35%,75%{transform:translateY(-90%)}}
.cr-throat{transform-origin:0 -4.4px;animation:cr-throat 1.4s ease-in-out infinite}
@keyframes cr-throat{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}
/* カルガモの親子：小舟の右から左へ、ゆっくり泳いで戻る */
.cr--duck,.cr--duckling{animation:cr-duck 26s ease-in-out infinite}
.cr--duckling{animation-name:cr-duckling}
@keyframes cr-duckling{0%{left:43.4%}46%{left:38.4%}50%{left:38.4%}96%{left:43.4%}100%{left:43.4%}}
.cr--duck svg,.cr--duckling svg{animation:cr-duckface 26s step-end infinite}
/* カモは右向きの絵。左へ進むあいだは左を向き、右へ進むあいだは右を向く */
@keyframes cr-duckface{0%{scale:-1 1}48%{scale:1 1}98%{scale:-1 1}}
@keyframes cr-duck{0%{left:40%}46%{left:35%}50%{left:35%}96%{left:40%}100%{left:40%}}
.cr-bob{animation:cr-bob 1.6s ease-in-out infinite alternate}
@keyframes cr-bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(6%) rotate(2deg)}}
/* カメ：草の上をのんびり歩いて、ときどき首をひっこめる */
.cr--turtle{animation:cr-turtle 40s linear infinite}
.cr--turtle svg{animation:cr-face 40s step-end infinite}
@keyframes cr-turtle{0%{left:24%}48%{left:36%}50%{left:36%}98%{left:24%}100%{left:24%}}
.cr-legs{animation:cr-legs .9s ease-in-out infinite alternate}
@keyframes cr-legs{from{transform:translateX(-.6px)}to{transform:translateX(.6px)}}
.cr-head{animation:cr-head 7s ease-in-out infinite}
@keyframes cr-head{0%,70%,100%{transform:translateX(0)}76%,86%{transform:translateX(-4px)}}
@media (prefers-reduced-motion:reduce){.cr,.cr *{animation:none!important}}

/* ヒーロー下の草地：色を合わせた絵なので、うすくしない */
.hero-spring__ground{opacity:1}

/* ヒーロー：背景の絵が出るまで、上に重ねる人・車・看板・手前の木を出さない（osaka.js が .oh-ready を付ける）。JSが動かないときも5秒後には出す */
.hero .oh-stage,.hero .oh-sign,.hero .oh-front{transition:opacity .6s ease}
.hero:not(.oh-ready) .oh-stage,.hero:not(.oh-ready) .oh-sign,.hero:not(.oh-ready) .oh-front{opacity:0;animation:oh-late-show 0s 5s forwards}
@keyframes oh-late-show{to{opacity:1}}
@media (min-width:960px){.hero .hero__panel{transition:opacity .6s ease}.hero:not(.oh-ready) .hero__panel{opacity:0;animation:oh-late-show 0s 5s forwards}}

/* 名前の長い墓地の見出し：地名の切れ目で折り返す */
.rb-stop__name.rb-stop__name--long{font-size:clamp(19px,5.2vw,26px);letter-spacing:.04em}
.rb-stop__name--long span{display:inline-block}

/* 墓地めぐりの入口（スマホ）：小川の流れる川べりの小さな絵 */
.rb-scene--art.rb-scene--start{--art-ratio:1508 / 633!important;--road-x:58.5%!important;width:min(100%,560px)!important;margin:22px auto 0!important;-webkit-mask-image:none!important;mask-image:none!important;overflow:visible!important}

/* PC：墓地めぐりの入口・出口の景色の絵は出さない（スマホだけ） */
@media (min-width:960px){html:not([data-ra]) .rb-scene--art,html:not([data-ra]) .rb-end__scene--art{display:none}}

/* ===================== 写真の見せ方（共通） ===================== */
.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}
}