/* ==========================================================
   宝塚市 墓地・霊園めぐり
   親デザイン：03_pattern_B（構図・写真の見せ方・巡る体験はそのまま）
   変更点：配色を宝塚用（生成り＋えんじ＋控えめな植物色）に再設計、
           見出しの書体、文字のコントラスト、前後セクションとの接続、PC/SP調整
   - すべて .rb 配下にスコープ
   - イラストは写真の「外側（余白・縁）」にだけ置き、写真の中身には重ねない
========================================================== */

.rb{
  --rb-cream:var(--kinari-2,#f5eee2);
  --rb-paper:#fffdf9;
  --rb-ink:#4b1420;       /* 見出し */
  --rb-line:#5b2a34;      /* イラストの線 */
  --rb-wine:#6e1f2e;
  --rb-text:#3b2f2c;
  --rb-sub:#6a5d57;
  --rb-leaf:#aab795;
  --rb-leaf-2:#7f9272;
  --rb-moss:#eef6e4;      /* 写真の足元の「地面」：明るい若草 */
  --rb-sage:#f7f0e1;      /* 地面：やわらかな砂色（宝塚霊園・米谷墓地） */
  --rb-blush:#f3e2df;     /* 番号・タグなど小さな桜色 */
  --rb-pink:#e9b3bb;
  --rb-sand:#e3c99c;
  --rb-g:16px;
  --rb-bounce:cubic-bezier(.34,1.56,.64,1);
  --rb-ease:cubic-bezier(.22,1,.36,1);
  --rb-font:var(--sans);

  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:0 var(--rb-g) 0;
  background:var(--rb-cream);
  color:var(--rb-text);
  font-family:var(--rb-font);
}
.rb *,.rb *::before,.rb *::after{box-sizing:border-box}
:where(.rb) img{display:block;max-width:100%}
:where(.rb) figure{margin:0}
.rb button{font:inherit;color:inherit}
.rb-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* 写真ボタン共通 */
.rb-media{
  position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;
  background:#e9e1d4;cursor:zoom-in;-webkit-tap-highlight-color:transparent;
}
.rb-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--rb-ease)}
.rb-media:focus-visible{outline:3px solid var(--rb-wine);outline-offset:3px}
@media (hover:hover){.rb-media:hover img{transform:scale(1.04)}}

/* ==========================================================
   イントロ
========================================================== */
.rb-intro{position:relative;z-index:1;text-align:center}
.rb-intro__copy{position:relative;z-index:2;padding:6px 0 0}
/* 景色は画面の端から端まで。下端は地の色へ溶け、水平な切れ目を作らない */
.rb-scene{position:relative;z-index:1;width:100vw;height:clamp(210px,58vw,330px);margin:8px 0 0 calc(50% - 50vw)}
.rb-scene__svg{display:block;width:100%;height:100%}
.rb-scene__trail{stroke:var(--rb-sand);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.5 10}
.rb-kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;
  font-family:var(--maru);font-size:12.5px;font-weight:700;letter-spacing:.24em;color:var(--rb-wine);
}
.rb-kicker span{width:9px;height:9px;border-radius:80% 10% 80% 30%;background:var(--rb-pink);transform:rotate(-20deg)}
.rb-title{margin:0;font-family:var(--mincho);font-size:clamp(28px,8vw,42px);line-height:1.5;font-weight:600;color:var(--rb-ink);letter-spacing:.08em}
.rb-lead{margin:16px auto 0;max-width:32em;font-size:14.5px;line-height:2;color:var(--rb-sub);text-align:left}
.rb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.rb-chips a{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 7px;border-radius:999px;
  background:var(--rb-paper);border:1px solid rgba(110,31,46,.14);
  color:var(--rb-ink);text-decoration:none;font-family:var(--maru);font-size:13px;font-weight:700;
  transition:transform .4s var(--rb-bounce),box-shadow .3s;
}
.rb-chips b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--rb-blush);color:var(--rb-wine);font-size:11px}
.rb-chips a:hover{transform:translateY(-3px);box-shadow:0 8px 16px -10px rgba(75,20,32,.5)}

/* ==========================================================
   小道（ルート）
========================================================== */
.rb-route{position:absolute;inset:0;z-index:0;pointer-events:none}
.rb-route__svg{position:absolute;left:0;top:0;overflow:visible}
.rb-route__base{stroke:var(--rb-sand);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.5 10}
.rb-route__done{stroke:#a24558;stroke-width:4;stroke-linecap:round;stroke-dasharray:.5 10}
.rb-route__walker{transition:opacity .4s}
.rb-route__walker circle:last-child{animation:rb-pulse 2.8s ease-in-out infinite}
@keyframes rb-pulse{50%{opacity:.45}}

/* ==========================================================
   各スポット
========================================================== */
.rb-stop{position:relative;z-index:1;padding-top:76px;scroll-margin-top:calc(var(--hd,58px) + 16px)}
.rb-stop__head{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.rb-pin{
  flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--rb-paper);border:1.5px solid var(--rb-wine);box-shadow:3px 3px 0 #ead3d4;
  font-family:var(--mincho);font-size:17px;font-weight:600;color:var(--rb-wine);
  transition:background .5s,color .5s,transform .5s var(--rb-bounce);
}
.rb-pin.is-visited{background:var(--rb-wine);color:#fff;transform:rotate(-8deg)}
.rb-stop__kana{margin:0 0 2px;font-family:var(--maru);font-size:11px;letter-spacing:.22em;color:#9a7f80}
.rb-stop__name{margin:0;font-family:var(--mincho);font-size:clamp(24px,6.8vw,32px);font-weight:600;color:var(--rb-ink);letter-spacing:.08em;line-height:1.35}

/* ---------- 写真ステージ ---------- */
.rb-stage{position:relative;isolation:isolate}
.rb-stage::before{ /* 写真の足元に敷く「地面」 */
  content:"";position:absolute;z-index:-1;left:-5%;right:-5%;bottom:-8%;height:58%;
  background:var(--rb-moss);
  border-radius:46% 54% 40% 60% / 58% 52% 48% 42%;
  filter:blur(1.5px);
}
.rb-stop--02 .rb-stage::before,.rb-stop--04 .rb-stage::before{background:var(--rb-sage)}
.rb-photo{position:relative;z-index:1}
.rb-photo .rb-media{box-shadow:0 0 0 6px var(--rb-paper),0 22px 34px -20px rgba(63,26,34,.55)}
.rb-photo figcaption{margin-top:10px;font-family:var(--maru);font-size:11.5px;font-weight:700;color:var(--rb-sub);text-align:center;letter-spacing:.06em}

.rb-photo--arch{width:84%;margin-left:3%}
.rb-photo--arch .rb-media{aspect-ratio:4/4.7;border-radius:999px 999px 26px 26px}
.rb-photo--narrow{width:72%;margin:0 4% 0 auto}

.rb-photo--round{position:absolute;z-index:2;width:44%}
.rb-photo--round .rb-media{aspect-ratio:1/1;border-radius:50%}
.rb-pos-br{right:0;bottom:-9%}
.rb-pos-bl{left:0;bottom:-12%}

.rb-photo--window .rb-media{aspect-ratio:4/3.2;border-radius:30px}
.rb-stop--02 .rb-stage{padding-bottom:26%}
.rb-photo--pebble{position:relative}
.rb-photo--pebble .rb-media{aspect-ratio:1/1;border-radius:58% 42% 52% 48% / 50% 56% 44% 50%}
.rb-stop--02 .rb-photo--pebble{position:absolute;z-index:2;width:44%}

.rb-photo--window-alt .rb-media{border-radius:30px 30px 30px 100px}
.rb-stop--04 .rb-stage{padding-bottom:18%}
.rb-photo--jizo{width:46%;bottom:-16%}
.rb-photo--jizo .rb-media{border-radius:46% 54% 50% 50% / 52% 48% 52% 48%}
/* ラベルは写真に重ねず、丸い写真の左下の外側（上の大きな写真より下の余白）に添える */
.rb-photo--jizo figcaption{
  position:absolute;right:calc(100% + 4px);bottom:14%;width:max-content;max-width:9em;
  padding:6px 10px;border-radius:12px 12px 2px 12px;background:var(--rb-paper);
  box-shadow:0 8px 16px -10px rgba(63,26,34,.45);font-size:11px;line-height:1.5;text-align:left;
}

/* 米谷：写真が少ない墓地は、帯にせず1枚を絵はがきのように添える */
.rb-photo--postcard{width:62%;margin:34px 2% 0 auto;padding:7px 7px 0;background:var(--rb-paper);border-radius:6px;box-shadow:0 16px 26px -18px rgba(63,26,34,.55);transform:rotate(2.2deg)}
.rb-photo--postcard .rb-media{aspect-ratio:16/8;border-radius:3px;box-shadow:none}
.rb-photo--postcard figcaption{margin:0;padding:8px 4px 10px;font-size:11px}

/* 03：アーチ＋小石3つ */
.rb-trio{position:relative;z-index:2;display:flex;gap:10px;margin-top:-46px;padding:0 2px}
.rb-trio .rb-photo{flex:1;min-width:0}
.rb-trio .rb-media{box-shadow:0 0 0 5px var(--rb-paper),0 16px 26px -18px rgba(63,26,34,.55)}
.rb-photo--pebble-b{transform:translateY(22px)}
.rb-photo--pebble-b .rb-media{border-radius:46% 54% 42% 58% / 56% 44% 56% 44%}
.rb-photo--pebble-c{transform:translateY(4px)}
.rb-photo--pebble-c .rb-media{border-radius:52% 48% 60% 40% / 44% 58% 42% 56%}
.rb-stage--trio{padding-bottom:28px}

/* 05：アーチ＋テープで留めた2枚 */
.rb-pair{position:relative;z-index:2;display:flex;justify-content:flex-end;gap:20px;margin-top:-14px;padding:0 6px}
.rb-photo--snap{width:42%}
.rb-photo--snap .rb-media{aspect-ratio:4/3.3;border-radius:10px;box-shadow:0 0 0 5px var(--rb-paper),0 16px 26px -16px rgba(63,26,34,.55)}
.rb-photo--snap{transform:rotate(-2deg)}
.rb-photo--snap-b{transform:rotate(2.4deg) translateY(16px)}
.rb-photo--snap::before{ /* テープ */
  content:"";position:absolute;z-index:3;left:50%;top:-12px;width:54px;height:18px;
  transform:translateX(-50%) rotate(-4deg);
  background:rgba(233,179,187,.6);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 3px,#000 3.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 3px,#000 3.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent 3px,#000 3.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 3px,#000 3.5px) right/51% 100% no-repeat;
}
.rb-photo--snap-b::before{background:rgba(188,198,164,.75);transform:translateX(-50%) rotate(5deg)}
.rb-stage--pinned{padding-bottom:30px}

/* ---------- イラスト ---------- */
.rb-deco{position:absolute;z-index:3;display:block;width:var(--w);height:auto;overflow:visible;pointer-events:none}
.rb-t-round{aspect-ratio:64/92}
.rb-t-tall{aspect-ratio:40/98}
.rb-t-tier{aspect-ratio:58/92}
.rb-t-bush{aspect-ratio:92/42}
.rb-t-flower,.rb-t-sun{aspect-ratio:1/1}
.rb-t-sprig{aspect-ratio:30/62}
.rb-t-cloud{aspect-ratio:92/40}
.rb-t-bird{aspect-ratio:48/30}
.rb-t-grass{aspect-ratio:2/1}
/* 木・雲・太陽は写真の「後ろ」から顔を出す */
.rb-t-round,.rb-t-tall,.rb-t-tier,.rb-t-cloud,.rb-t-sun,.rb-t-bird{z-index:0}
.rb-card .rb-deco{z-index:0}

/* ---------- テキストカード ---------- */
.rb-card{
  position:relative;margin-top:46px;padding:22px 20px 20px;
  background:var(--rb-paper);border-radius:24px;border:1px solid rgba(110,31,46,.1);
  box-shadow:0 18px 32px -26px rgba(63,26,34,.5);
}
.rb-card p{position:relative;z-index:1;margin:0;font-size:15px;line-height:2;letter-spacing:.02em}
.rb-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0;padding:0;list-style:none}
.rb-tags li{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  background:#f7ecea;color:#7a2e3c;font-family:var(--maru);font-size:12px;font-weight:700;
}
.rb-tags li::before{content:"";width:8px;height:8px;border-radius:80% 10% 80% 30%;background:#d99aa5;transform:rotate(-20deg)}

/* ---------- 流れる写真帯 ---------- */
.rb-strip{position:relative;margin:40px calc(var(--rb-g) * -1) 0}
.rb-strip__label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 var(--rb-g) 12px;font-family:var(--maru);font-size:13px;font-weight:700;color:var(--rb-ink)}
.rb-strip__label span{display:inline-flex;align-items:center;gap:8px}
.rb-strip__label span::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--rb-wine);opacity:.6}
.rb-strip__label small{font-size:11px;color:var(--rb-sub);font-weight:500}
.rb-strip__viewport{overflow-x:auto;scrollbar-width:none;padding:6px 0 16px}
.rb-strip__viewport::-webkit-scrollbar{display:none}
.rb-strip__track{display:flex;gap:14px;width:max-content;padding:0 var(--rb-g)}
.rb-strip__track button{
  flex:none;width:clamp(140px,40vw,200px);aspect-ratio:4/3;padding:0;border:0;overflow:hidden;cursor:zoom-in;
  border-radius:16px;background:#e9e1d4;box-shadow:0 0 0 4px var(--rb-paper),0 12px 20px -14px rgba(63,26,34,.6);
}
.rb-strip__track img{width:100%;height:100%;object-fit:cover}
.rb-hedge{position:relative;z-index:2;display:block;width:100%;height:36px;margin-top:-22px}
.rb-js .rb-strip__viewport{overflow:hidden}
.rb-js .rb-strip__track{animation:rb-marquee var(--dur,60s) linear infinite}
.rb-strip.is-paused .rb-strip__track{animation-play-state:paused}
@media (hover:hover){.rb-strip__viewport:hover .rb-strip__track{animation-play-state:paused}}
@keyframes rb-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- はがき風スワイプ ---------- */
.rb-cards{margin:40px calc(var(--rb-g) * -1) 0}
.rb-cards__viewport{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:14px var(--rb-g) 22px;scroll-padding:0 var(--rb-g);overscroll-behavior-x:contain;
}
.rb-cards__viewport::-webkit-scrollbar{display:none}
.rb-cards__viewport:focus-visible{outline:3px solid var(--rb-wine);outline-offset:-3px}
.rb-cards__viewport button{
  flex:none;width:min(66vw,280px);padding:7px 7px 26px;border:0;border-radius:10px;cursor:zoom-in;
  background:var(--rb-paper);scroll-snap-align:start;
  box-shadow:0 14px 24px -16px rgba(63,26,34,.55);
  transform:rotate(var(--rot,0deg));transition:transform .5s var(--rb-bounce);
}
.rb-cards__viewport button.is-active{transform:translateY(-3px)}
.rb-cards__viewport img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.rb-dots{display:flex;justify-content:center;gap:6px}
.rb-dots i{width:6px;height:6px;border-radius:50%;background:#e2d6cb;transition:width .4s var(--rb-ease),background .3s}
.rb-dots i.is-on{width:18px;border-radius:6px;background:var(--rb-wine)}

/* ---------- 締め：掲載以外の墓地も ---------- */
.rb-end{position:relative;z-index:1;margin-top:56px}
.rb-end__scene{width:100vw;height:clamp(120px,30vw,200px);margin-left:calc(50% - 50vw)}
.rb-end__scene svg{display:block;width:100%;height:100%}
.rb-more{position:relative;margin-top:-34px;padding:26px 22px 24px;background:var(--rb-paper);border:1px solid rgba(110,31,46,.22);border-radius:26px 26px 26px 6px;box-shadow:0 20px 34px -28px rgba(63,26,34,.55)}
.rb-more__kicker{display:inline-block;margin-bottom:6px;padding:2px 12px;border-radius:999px;background:var(--rb-blush);color:var(--rb-wine);font-family:var(--maru);font-size:12px;font-weight:700;letter-spacing:.08em}
/* スマホでは「宝塚市内のその他の墓地・霊園も／ご相談ください」の2行に収まる大きさ（固定の改行は使わない） */
.rb-more__title{margin:0 0 10px;font-family:var(--mincho);font-weight:600;font-size:clamp(17px,4.85vw,21px);line-height:1.6;letter-spacing:.03em;color:var(--rb-ink)}
.rb-more > p:not(.rb-more__kicker){font-size:14.5px;line-height:1.95;color:var(--rb-text)}
.rb-more__link{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:10px 18px 10px 12px;border-radius:999px;border:1px solid rgba(110,31,46,.3);background:var(--rb-paper);color:var(--rb-wine);font-size:13.5px;font-weight:700;text-decoration:none;transition:background .3s,gap .4s var(--rb-ease)}
.rb-more__link:hover{background:#f8eeee;gap:14px}
.rb-more__link .arrow{font-family:var(--mincho)}
.rb-note{margin:0;padding:18px 2px 44px;font-size:12px;line-height:1.9;color:var(--rb-sub)}

/* ==========================================================
   イラストの動き（ゆっくり・小さく）
========================================================== */
@keyframes rb-sway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes rb-sway-s{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes rb-drift{from{transform:translateX(0)}to{transform:translateX(18px)}}
@keyframes rb-fly{0%{transform:translate(0,0)}50%{transform:translate(6px,-5px)}100%{transform:translate(12px,0)}}
@keyframes rb-spin{to{transform:rotate(360deg)}}
.rb-sway{transform-origin:50% 100%;animation:rb-sway 5.6s ease-in-out infinite alternate}
.rb-sway--b{animation-duration:7s;animation-delay:-2.4s}
.rb-sway-g{transform-box:fill-box;transform-origin:50% 100%;animation:rb-sway-s 6s ease-in-out infinite alternate}
.rb-sway-g--b{animation-duration:7.4s;animation-delay:-3s}
.rb-drift{animation:rb-drift 16s ease-in-out infinite alternate}
.rb-drift--slow{animation-duration:22s;animation-delay:-6s}
.rb-fly{animation:rb-fly 6s ease-in-out infinite alternate}
.rb-spin{transform-box:fill-box;transform-origin:50% 50%;animation:rb-spin 80s linear infinite}
.rb-spin-slow{animation:rb-spin 90s linear infinite}

/* ==========================================================
   スクロールで現れる動き（JS有効時のみ）
========================================================== */
.rb-js .rb-stage .rb-photo{opacity:0;transform:translateY(34px) scale(.96);transition:opacity .9s ease,transform 1.1s var(--rb-ease)}
.rb-js .rb-stage .rb-photo:nth-of-type(2),.rb-js .rb-stage .rb-trio .rb-photo:nth-child(1){transition-delay:.18s}
.rb-js .rb-stage .rb-trio .rb-photo:nth-child(2),.rb-js .rb-stage .rb-pair .rb-photo:nth-child(1){transition-delay:.3s}
.rb-js .rb-stage .rb-trio .rb-photo:nth-child(3),.rb-js .rb-stage .rb-pair .rb-photo:nth-child(2){transition-delay:.42s}
.rb-js .rb-stage.is-in .rb-photo{opacity:1;transform:none}
.rb-js .rb-stage.is-in .rb-photo--pebble-b{transform:translateY(22px)}
.rb-js .rb-stage.is-in .rb-photo--pebble-c{transform:translateY(4px)}
.rb-js .rb-stage.is-in .rb-photo--snap{transform:rotate(-2deg)}
.rb-js .rb-stage.is-in .rb-photo--snap-b{transform:rotate(2.4deg) translateY(16px)}
.rb-js .rb-stage::before{transform:scale(.6);opacity:0;transition:transform 1.2s var(--rb-ease),opacity .8s}
.rb-js .rb-stage.is-in::before{transform:none;opacity:1}

.rb-js .rb-pop{transform:scale(0);transform-origin:50% 100%;transition:transform .8s var(--rb-bounce) calc(.5s + var(--d,0s))}
.rb-js [data-reveal].is-in .rb-pop{transform:scale(1)}

.rb-js .rb-card,.rb-js .rb-photo--postcard{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform 1s var(--rb-ease)}
.rb-js .rb-card.is-in{opacity:1;transform:none}
.rb-js .rb-photo--postcard.is-in{opacity:1;transform:rotate(2.2deg)}
.rb-js .rb-strip,.rb-js .rb-cards{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform 1s var(--rb-ease)}
.rb-js .rb-strip.is-in,.rb-js .rb-cards.is-in{opacity:1;transform:none}

/* ==========================================================
   ライトボックス
========================================================== */
.rb-lb{
  width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;
  background:rgba(247,242,232,.97);color:var(--rb-ink);font-family:var(--rb-font);
  display:none;flex-direction:column;
}
.rb-lb[open]{display:flex;animation:rb-lb-in .4s var(--rb-ease)}
.rb-lb::backdrop{background:rgba(63,26,34,.3)}
@keyframes rb-lb-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.rb-lb__top{display:flex;align-items:center;gap:12px;padding:14px var(--rb-g)}
.rb-lb__title{margin:0;font-family:var(--mincho);font-size:17px;font-weight:600}
.rb-lb__count{margin:0;font-size:12px;color:var(--rb-sub)}
.rb-lb__close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1.5px solid var(--rb-wine);border-radius:50%;background:var(--rb-paper);cursor:pointer}
.rb-lb svg{width:20px;height:20px;fill:none;stroke:var(--rb-wine);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rb-lb__figure{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:0 var(--rb-g);touch-action:pan-y}
.rb-lb__figure img{width:100%;max-height:calc(100% - 44px);object-fit:contain;border-radius:14px;transition:none}
.rb-lb__figure figcaption{margin-top:12px;font-size:13px;line-height:1.7;color:var(--rb-sub);text-align:center}
.rb-lb__nav{display:flex;justify-content:center;gap:14px;padding:14px 0 calc(18px + env(safe-area-inset-bottom))}
.rb-lb__nav button{width:52px;height:52px;display:grid;place-items:center;padding:0;border:1.5px solid var(--rb-wine);border-radius:50%;background:var(--rb-paper);cursor:pointer;box-shadow:3px 3px 0 #ead3d4}

/* ==========================================================
   PC / タブレット
========================================================== */
@media (min-width:600px){
  .rb{--rb-g:32px}
  .rb-lead{text-align:center}
  .rb-more{max-width:720px;margin-left:auto;margin-right:auto;padding:34px 40px 32px}
  .rb-note{text-align:center}
}
@media (min-width:600px) and (max-width:899px){
  /* タブレット縦：写真が大きくなりすぎないよう、巡る列を少し細く */
  .rb-stop{max-width:620px;margin-left:auto;margin-right:auto}
  .rb-photo--jizo figcaption{bottom:22%}
}
@media (min-width:900px){
  .rb{--rb-g:40px}
  .rb-stop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:60px;align-items:center;padding-top:110px}
  .rb-stop__head{grid-column:1 / -1}
  .rb-stage{grid-column:1}
  .rb-card{grid-column:2;margin-top:0}
  .rb-stop:nth-of-type(even) .rb-stage{grid-column:2;grid-row:2}
  .rb-stop:nth-of-type(even) .rb-card{grid-column:1;grid-row:2}
  .rb-stop:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .rb-stop:nth-of-type(even) .rb-stop__head{justify-content:flex-end;text-align:right}
  .rb-stop:nth-of-type(even) .rb-stop__head .rb-pin{order:2}
  .rb-strip,.rb-cards{grid-column:1 / -1;margin-top:60px}
  .rb-photo--arch .rb-media{aspect-ratio:4/4.1}
  .rb-cards__viewport button{width:300px}
  .rb-strip__track button{width:230px}
  .rb-photo--postcard{grid-column:1;grid-row:3;width:52%;margin:30px 0 0 8%}
  .rb-card p{font-size:15.5px}
  .rb-title{font-size:44px}
  .rb-more{max-width:760px}
  .rb-more__title{font-size:25px}
}
@media (min-width:1160px){
  .rb-strip,.rb-cards{margin-left:0;margin-right:0}
  .rb-strip__label{margin-left:0;margin-right:0}
  .rb-cards__viewport{padding-left:0;padding-right:0;scroll-padding:0}
  .rb-strip__track{padding:0}
  /* 横長画面では、帯の左右を地の色へ溶かす */
  .rb-strip__viewport{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}

/* ==========================================================
   動きを減らす設定
========================================================== */
@media (prefers-reduced-motion:reduce){
  .rb *,.rb *::before,.rb *::after{animation:none !important;transition:none !important}
  .rb-js .rb-strip__viewport{overflow-x:auto}
  .rb-js .rb-stage .rb-photo,.rb-js .rb-card,.rb-js .rb-strip,.rb-js .rb-cards{opacity:1;transform:none}
  .rb-js .rb-photo--postcard{opacity:1;transform:rotate(2.2deg)}
  .rb-js .rb-pop,.rb-js .rb-stage::before{transform:none;opacity:1}
}

/* Desktop navigation for postcard photo rows; touch-phone layout is unchanged. */
.rb-cards .rb-strip__label .rb-cards__controls{display:none}
.rb-cards .rb-strip__label .rb-cards__controls::before{content:none}
@media(min-width:768px){
  .rb-cards .rb-strip__label{align-items:center}
  .rb-cards .rb-cards__swipe-hint{display:none}
  .rb-cards .rb-strip__label .rb-cards__controls{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
  .rb-cards__controls small{margin-right:4px}
  .rb-cards__arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(110,31,46,.3);border-radius:50%;background:#fff;color:var(--rb-wine);cursor:pointer;transition:background .2s,opacity .2s}
  .rb-cards__arrow svg{width:20px;height:20px}
  .rb-cards__arrow:hover:not(:disabled){background:#fbf1f2}
  .rb-cards__arrow:focus-visible{outline:2px solid var(--rb-wine);outline-offset:3px}
  .rb-cards__arrow:disabled{opacity:.3;cursor:default}
}