:root{
  --cream:#FDF8EC;
  --cream-deep:#F5EBD3;
  --white:#FFFFFF;
  --ink:#453A2E;
  --ink-sub:#8C7C6A;
  --teal:#57A79C;
  --teal-deep:#3F887D;
  --mint:#D9EBE4;
  --mint-deep:#C4E0D6;
  --red:#E05E4E;
  --red-deep:#C74B3C;
  --yellow:#F5C84C;
  --yellow-pale:#FBEBC2;
  --line:#E9DCC1;
  --font-round:"M PLUS Rounded 1c",sans-serif;
  --font-body:"Noto Sans JP",sans-serif;
  --font-latin:"Quicksand",sans-serif;
  --font-script:"Caveat",cursive;
  --wrap:1100px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--cream);
  line-height:1.9;font-size:15px;overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;}
.deco{position:absolute;pointer-events:none;z-index:0;}
img.deco{height:auto;}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;}
.rv.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ============ header ============ */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(253,248,236,.95);backdrop-filter:blur(10px);
}
.header-in{
  max-width:1220px;margin:0 auto;padding:6px 28px;
  display:flex;align-items:center;gap:22px;
}
.header-logo img{height:52px;width:auto;display:block;}
.header-nav{display:flex;gap:6px;margin-left:auto;align-items:center;}
.header-nav a{
  font-family:var(--font-latin);font-weight:700;font-size:13px;letter-spacing:.16em;
  padding:9px 18px;border-radius:999px;transition:background .2s,color .2s;
}
.header-nav a.is-active,.header-nav a:hover{background:var(--teal);color:#fff;}
.header-nav-cta{background:var(--red) !important;color:#fff !important;font-weight:700;position:relative;overflow:visible;}
.header-nav-cta:hover{background:var(--red-deep) !important;}
.header-nav-cta .sparkle{position:absolute;color:var(--yellow);opacity:0;pointer-events:none;filter:drop-shadow(0 0 3px rgba(245,200,76,.9));}
.header-nav-cta:hover .sparkle{opacity:1;animation:kirakira 1.1s ease-in-out infinite;}
.header-nav-cta .sp1{top:-7px;left:14%;animation-delay:0s;}
.header-nav-cta .sp2{bottom:-6px;right:20%;animation-delay:.35s;}
.header-nav-cta .sp3{top:22%;right:-7px;animation-delay:.65s;}
@keyframes kirakira{
  0%,100%{opacity:0;transform:scale(.3) rotate(0deg);}
  50%{opacity:1;transform:scale(1.15) rotate(20deg);}
}
.header-insta{padding:9px 10px !important;border-radius:50% !important;}
.header-insta svg{width:21px;height:21px;stroke:var(--ink);display:block;}
.header-insta:hover svg{stroke:#fff;}
.header-burger{
  display:none;margin-left:auto;background:none;border:none;padding:8px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;width:42px;height:42px;
}
.header-burger .bar{
  display:block;width:24px;height:2.4px;border-radius:2px;background:var(--ink);
  transition:transform .3s ease,opacity .2s ease;
}
/* 開いたら上下の線がXに、真ん中の線は消える */
.header-burger.is-open .bar:nth-child(1){transform:translateY(8.4px) rotate(45deg);}
.header-burger.is-open .bar:nth-child(2){opacity:0;}
.header-burger.is-open .bar:nth-child(3){transform:translateY(-8.4px) rotate(-45deg);}
@media(max-width:860px){
  /* スマホはロゴ＋ハンバーガーのみ。予約ボタン・Instagramは非表示、各リンクはハンバーガーの中に */
  .header-nav-cta,.header-insta{display:none;}
  .header-burger{display:flex;}
  .header-nav{
    display:flex;position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--white);padding:14px 22px 20px;border-bottom:1px solid var(--line);
    box-shadow:0 14px 26px rgba(90,60,30,.12);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
  }
  .header-nav.is-open{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity .25s ease,transform .25s ease;
  }
  .header-nav a{padding:12px 6px;border-radius:10px;}
}

/* ============ FV ============ */
.fv{position:relative;padding:48px 0 30px;overflow:hidden;}
.fv-corner-tl{top:-90px;left:-110px;width:300px;opacity:.55;}
.fv-corner-bl{bottom:110px;left:-50px;width:170px;transform:rotate(-16deg);}
.fv-leaf-r{top:330px;right:-36px;width:160px;transform:scaleX(-1) rotate(10deg);}
.fv-in{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:0 28px;text-align:center;}
.fv h1{
  font-family:var(--font-round);font-weight:800;
  font-size:clamp(21px,3vw,37px);line-height:1.8;letter-spacing:.05em;
}
.fv h1{position:relative;z-index:3;}
.fv h1 span{white-space:nowrap;}
.fv-stage{
  position:relative;margin:20px auto 0;max-width:1020px;min-height:430px;
  display:flex;align-items:center;justify-content:center;
}
/* 世界地図（水彩） */
.fv-map{position:absolute;inset:30px 0 0;display:flex;align-items:center;justify-content:center;}
.fv-map img{width:96%;max-width:960px;height:auto;opacity:.55;}
/* 点線ルート（生成画像） */
.fv-route-a{position:absolute;left:13%;top:8%;width:250px;height:auto;transform:scaleY(-1) rotate(6deg);opacity:.9;}
.fv-route-b{position:absolute;right:12%;bottom:12%;width:250px;height:auto;transform:scaleX(-1) rotate(-4deg);opacity:.9;}
/* センター写真：実物の木製フォトフレーム画像（ユーザー提供素材）を写真の上に重ねて実在感を出す＋和紙テープ */
.fv-photo{
  position:relative;z-index:3;width:min(500px,58vw);
  aspect-ratio:3/2;filter:drop-shadow(0 10px 18px rgba(120,90,40,.16)) drop-shadow(0 26px 46px rgba(120,90,40,.22));
  transform:rotate(-1.2deg);
}
.ph-photo{position:absolute;inset:10% 8%;width:84%;height:80%;object-fit:cover;display:block;}
.ph-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;}
.frame-tape{position:absolute;z-index:6;pointer-events:none;height:auto;filter:drop-shadow(0 4px 6px rgba(70,45,20,.16));}
.fv-photo .frame-tape{width:24%;left:50%;top:-14px;transform:translateX(-50%) rotate(-5deg);}
/* 右のドリンク切り抜き風（縦長のフォトフレーム） */
.fv-drink{
  position:absolute;right:2%;top:50%;transform:translateY(-52%) rotate(3deg);z-index:4;
  width:min(118px,12vw);aspect-ratio:720/1080;
  filter:drop-shadow(0 8px 14px rgba(120,90,40,.16)) drop-shadow(0 18px 32px rgba(120,90,40,.2));
}
.fv-drink .ph-photo{position:absolute;inset:13% 14%;width:72%;height:74%;object-fit:cover;object-position:50% 35%;display:block;}
.fv-drink .frame-tape{width:52%;left:50%;top:-10px;transform:translateX(-50%) rotate(7deg);}
/* 左下の正方形フォトフレーム */
.fv-bento{
  position:absolute;left:3%;bottom:4%;z-index:4;
  width:min(150px,15.5vw);aspect-ratio:1/1;
  filter:drop-shadow(0 8px 12px rgba(120,90,40,.14)) drop-shadow(0 16px 28px rgba(120,90,40,.18));transform:rotate(-4deg);
}
.fv-bento .ph-photo{position:absolute;inset:14%;width:72%;height:72%;object-fit:cover;display:block;}
.fv-bento .frame-tape{width:46%;left:8%;top:-8px;transform:rotate(-14deg);}
/* ピンカード */
.pin{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;gap:5px;}
.pin .tag{
  background:var(--white);border-radius:14px;padding:8px 16px 7px;text-align:center;line-height:1.35;
  box-shadow:0 6px 16px rgba(90,70,40,.16);display:flex;align-items:center;gap:9px;
}
.pin .tag .ico{width:26px;height:26px;color:var(--teal-deep);flex-shrink:0;}
.pin .tag small{
  display:block;font-family:var(--font-latin);font-weight:700;font-size:8.5px;
  letter-spacing:.18em;color:var(--red);text-align:left;
}
.pin .tag b{font-family:var(--font-round);font-weight:800;font-size:14.5px;display:block;text-align:left;}
.pin > svg{width:22px;height:22px;color:var(--red);filter:drop-shadow(0 3px 4px rgba(0,0,0,.15));}
.pin.p1{left:6%;top:6%;}
.pin.p2{right:8%;top:2%;}
.pin.p3{left:1%;top:44%;}
.pin.p4{right:3%;bottom:14%;}
/* 今月のBOX */
.fv-month{position:relative;z-index:2;max-width:560px;margin:26px auto 0;}
.fv-month .band{
  display:inline-block;background:var(--teal);color:#fff;
  font-family:var(--font-round);font-weight:700;font-size:13px;letter-spacing:.16em;
  border-radius:999px;padding:6px 24px;
}
.fv-month h2{font-family:var(--font-round);font-weight:800;font-size:clamp(19px,2.4vw,25px);margin:14px 0 6px;letter-spacing:.06em;}
.fv-month p{font-size:13.5px;color:var(--ink-sub);margin-bottom:18px;line-height:2;}
.btn-outline-red{
  display:inline-block;border:1.6px solid var(--red);color:var(--red);background:var(--white);
  font-family:var(--font-round);font-weight:700;font-size:14px;letter-spacing:.1em;
  padding:11px 36px;border-radius:999px;transition:background .2s,color .2s;
}
.btn-outline-red:hover{background:var(--red);color:#fff;}
@media(max-width:860px){
  /* SPでは水彩の飾り（ブロブ・葉っぱ）は画面が狭く煩雑になるため非表示。世界地図だけ残す */
  .deco{display:none;}
  /* SPでは写真がステージ幅いっぱいになり世界地図が完全に隠れてしまうため、
     写真を少し小さくし、地図を画面幅より広く（全幅ブリード）配置して背面に見せる */
  .fv-stage{min-height:0;flex-direction:column;padding:34px 0 28px;}
  .fv-drink,.fv-bento{display:none;}
  .fv-photo{width:min(84%,420px);}
  .fv-map{
    inset:0 auto auto 50%;height:100%;
    width:122vw;max-width:none;transform:translateX(-50%);
  }
  .fv-map img{width:100%;max-width:none;opacity:.62;}
  .pin{position:static;transform:none !important;margin:3px;}
  .pin > svg{display:none;}
  .pin .tag{padding:6px 11px;gap:7px;}
  .pin .tag .ico{width:20px;height:20px;}
  .pin .tag small{font-size:7.5px;}
  .pin .tag b{font-size:12px;}
  .fv-pins-sp{display:flex;flex-wrap:wrap;justify-content:center;margin-top:14px;}
  .fv-route-a,.fv-route-b{display:none;}
}
@media(min-width:861px){.fv-pins-sp{display:contents;}}

/* ============ phone scrub ============ */
.pickup-scrub{position:relative;margin-inline:calc(-50vw + 50%);width:100vw;}
.pickup-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-deep) 100%);
}
.pickup-bg{position:absolute;inset:0;}
.pickup-bg img{position:absolute;height:auto;}
.pickup-bg .leaf1{left:-44px;top:8%;width:190px;transform:rotate(18deg);}
.pickup-bg .leaf2{left:5%;bottom:7%;width:130px;transform:scaleX(-1) rotate(-24deg);}
.pickup-bg .imm{right:4%;top:13%;width:250px;opacity:.5;transform:rotate(6deg);}
.pickup-bg .stamp29{right:9%;bottom:10%;width:130px;opacity:.4;transform:rotate(-10deg);}
.pickup-bg .blobtl{right:-140px;top:-160px;width:420px;opacity:.4;}
.pickup-inner{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:clamp(24px,6vw,110px);width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;
}
.pickup-head{max-width:min(430px,42vw);}
.pickup-head h2{
  font-family:var(--font-round);font-weight:800;
  font-size:clamp(23px,3vw,34px);line-height:1.65;margin-bottom:14px;letter-spacing:.04em;
}
.pickup-head p{font-size:14px;color:var(--ink-sub);margin-bottom:22px;line-height:2.1;}
.phone-col{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,18px);}
.phone-stage{position:relative;width:min(300px,38vh);flex-shrink:0;}
.phone-frame{width:100%;height:auto;display:block;position:relative;z-index:3;pointer-events:none;}
.home-cover{
  position:absolute;z-index:4;left:32.8%;width:34.8%;top:94.45%;height:1.6%;
  background:var(--white);border-radius:99px;pointer-events:none;
}
.phone-screen{
  position:absolute;left:5.53%;top:6.74%;width:89.21%;height:90.69%;z-index:2;
  overflow:hidden;background:var(--white);border-radius:7%/4%;
  display:flex;flex-direction:column;
}
.app-bar{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:4.5% 7% 3.5%;border-bottom:1px solid #F1E9D6;
}
.app-bar img{width:44%;}
.app-bar .burger{width:16%;color:var(--red);}
.app-title{
  flex-shrink:0;text-align:center;
  font-family:var(--font-round);font-weight:800;font-size:clamp(10px,1.3vw,13px);
  letter-spacing:.18em;padding:3.5% 0 2.5%;
}
.app-vp{position:relative;flex:1;min-height:0;overflow:hidden;}
.phone-rail{display:flex;height:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
.pk-card{flex:0 0 100%;display:flex;flex-direction:column;color:inherit;background:var(--white);}
.pk-thumb{width:100%;aspect-ratio:10/6.2;overflow:hidden;background:var(--mint);flex-shrink:0;position:relative;}
.pk-thumb img{width:100%;height:100%;object-fit:cover;}
.pk-flag{
  position:absolute;top:6%;left:5%;
  background:rgba(255,255,255,.94);border-radius:999px;padding:1% 6%;
  font-family:var(--font-latin);font-weight:700;font-size:clamp(8px,1vw,10px);
  letter-spacing:.14em;color:var(--teal-deep);
}
.pk-body{padding:5% 7% 6.5%;display:flex;flex-direction:column;gap:2.5%;flex:1;min-height:0;}
.pk-name,.pk-desc,.pk-tags{flex-shrink:0;}
.pk-name{
  font-family:var(--font-round);font-weight:800;font-size:clamp(12.5px,1.65vw,17px);line-height:1.45;
  display:flex;align-items:center;gap:6px;
}
.pk-name svg{width:clamp(11px,1.3vw,14px);height:auto;color:var(--red);flex-shrink:0;}
.pk-desc{
  font-size:clamp(8.5px,1.05vw,11px);color:var(--ink-sub);line-height:1.65;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.pk-tags{display:flex;flex-wrap:wrap;gap:4px;}
.pk-tags span{
  font-size:clamp(7.5px,.9vw,9.5px);font-weight:700;color:var(--teal-deep);
  background:var(--mint);border-radius:999px;padding:1.5px 8px;white-space:nowrap;
}
.pk-more{
  margin-top:auto;text-align:center;background:var(--red);color:#fff;border-radius:999px;
  font-family:var(--font-round);font-weight:700;font-size:clamp(9px,1.05vw,11.5px);
  letter-spacing:.12em;padding:5.5% 0;
}
.app-nav{flex-shrink:0;display:flex;border-top:1px solid #F1E9D6;background:var(--white);}
.app-nav span{
  flex:1;text-align:center;padding:3.5% 0 4.5%;
  font-size:clamp(7px,.85vw,9px);font-weight:700;letter-spacing:.08em;color:#CBBDA5;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.app-nav span svg{width:clamp(13px,1.6vw,17px);height:clamp(13px,1.6vw,17px);}
.app-nav span.on{color:var(--red);}
.phone-dots{display:flex;justify-content:center;gap:9px;}
.phone-dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background .2s,transform .2s;
}
.phone-dots button.is-on{background:var(--teal);transform:scale(1.35);}
.phone-hint{text-align:center;font-size:12px;color:var(--ink-sub);}
@media(max-width:860px){
  .fv{padding-bottom:64px;} /* 「今月のMENUを見る」ボタンと次のスマホ演出セクションの境目が分かりづらかったので余白を追加 */
  .pickup-inner{flex-direction:column;gap:14px;padding-top:14px;}
  .pickup-head{max-width:100%;text-align:center;order:1;} /* 見出し→本文→スマホ の順にする */
  .phone-col{order:2;}
  .phone-stage{width:min(62vw,250px,33vh);}
  .pickup-bg .imm,.pickup-bg .stamp29{display:none;}
  .pickup-bg .leaf1{display:none;} /* 見出し/本文の順が上に来たため、上部のリーフが文字と重なって読みにくくなっていたのを非表示に */
}

/* ============ section common ============ */
.sec{padding:88px 0;position:relative;}
.sec-head{text-align:center;margin-bottom:10px;position:relative;z-index:1;}
.sec-head .en{
  font-family:var(--font-latin);font-weight:700;letter-spacing:.34em;
  font-size:clamp(25px,3vw,35px);display:block;
}
.sec-head .ja{font-size:13.5px;color:var(--ink-sub);display:block;margin-top:6px;}

/* ============ menu ============ */
.sec-menu .leafL{left:-40px;top:14%;width:150px;transform:rotate(-24deg);}
.sec-menu .leafR{right:-46px;bottom:4%;width:170px;transform:scaleX(-1) rotate(12deg);}
.menu-row{
  position:relative;margin-top:60px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:22px;
}
.menu-row .path{
  position:absolute;left:0;right:0;top:52%;height:70px;color:var(--teal);z-index:0;
}
.menu-item{position:relative;z-index:1;text-align:center;}
.menu-item b{
  display:block;font-family:var(--font-round);font-weight:800;font-size:15.5px;
  letter-spacing:.14em;margin-bottom:16px;
}
.menu-item .ph{
  width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:6px solid var(--white);box-shadow:0 14px 28px rgba(120,90,40,.18);
}
.menu-item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s;}
.menu-item:hover .ph img{transform:scale(1.09);}
.menu-item .pin-ico{width:20px;height:20px;color:var(--red);margin:14px auto 0;}
.menu-item.rv:nth-of-type(1){transition-delay:0s;}
.menu-item.rv:nth-of-type(2){transition-delay:.1s;}
.menu-item.rv:nth-of-type(3){transition-delay:.2s;}
.menu-item.rv:nth-of-type(4){transition-delay:.3s;}
.menu-item.rv:nth-of-type(5){transition-delay:.4s;}
@media(max-width:860px){
  .menu-row{grid-template-columns:repeat(2,1fr);gap:28px 20px;}
  .menu-row .path{display:none;}
  .menu-row .menu-item:last-child{grid-column:span 2;max-width:52%;margin:0 auto;}
}

/* ============ concept ============ */
.sec-concept{background:var(--white);}
.sec-concept .dotpatch{
  right:4%;top:10%;width:150px;height:100px;
  background-image:radial-gradient(var(--yellow) 2.2px,transparent 2.2px);background-size:16px 16px;opacity:.5;
}
.concept-in{
  display:grid;grid-template-columns:44fr 56fr;grid-template-areas:"head grid" "body grid";
  gap:54px;align-items:center;position:relative;z-index:1;
}
.concept-head{grid-area:head;}
.concept-body{grid-area:body;}
.concept-txt .en{
  font-family:var(--font-latin);font-weight:700;letter-spacing:.34em;font-size:14px;color:var(--teal);
}
.concept-txt h2{
  font-family:var(--font-round);font-weight:800;
  font-size:clamp(24px,3vw,33px);line-height:1.7;margin:10px 0 20px;letter-spacing:.04em;
}
.concept-txt p{font-size:14.5px;margin-bottom:1.2em;}
.concept-plane{width:64px;height:auto;margin-top:6px;}
.concept-grid{grid-area:grid;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.concept-grid .g{
  border-radius:18px;overflow:hidden;aspect-ratio:10/7.2;
  box-shadow:0 10px 24px rgba(120,90,40,.14);
}
.concept-grid .g:nth-child(1){grid-column:span 2;aspect-ratio:10/4.6;}
.concept-grid .g img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.concept-grid .g:hover img{transform:scale(1.04);}
@media(max-width:860px){
  /* スマホでは 見出し→写真→本文 の順に並べ替える(desktopは左カラムに見出し+本文、右に写真) */
  .concept-in{grid-template-columns:1fr;grid-template-areas:"head" "grid" "body";}
}

/* ============ features ============ */
.sec-features .blobL{left:-120px;top:-60px;width:300px;opacity:.45;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:52px;position:relative;z-index:1;}
.feature{text-align:center;}
.feature .icon{width:120px;height:120px;margin:0 auto 14px;}
.feature .icon img{width:100%;height:100%;object-fit:contain;}
.feature h3{
  font-family:var(--font-round);font-weight:800;font-size:17.5px;letter-spacing:.14em;margin-bottom:6px;
}
.feature .under{width:120px;height:10px;color:var(--yellow);margin:0 auto 12px;}
.feature p{font-size:13.5px;color:var(--ink-sub);line-height:2.1;}
@media(max-width:860px){.features-grid{grid-template-columns:1fr;gap:30px;}}

/* ============ order ============ */
.sec-order{background:var(--white);}
.order-steps{
  margin-top:52px;display:grid;grid-template-columns:repeat(9,auto);
  align-items:stretch;justify-content:center;gap:6px;
}
.step{
  width:158px;background:var(--cream);border-radius:18px;padding:26px 16px 20px;text-align:center;
  border:1.5px solid var(--line);
}
.step .icon{width:46px;height:46px;margin:0 auto 14px;color:var(--ink);}
.step .icon img{width:100%;height:100%;object-fit:contain;display:block;}
.step b{
  display:block;font-family:var(--font-round);font-weight:800;font-size:13.5px;
  letter-spacing:.04em;margin-bottom:8px;
}
.step p{font-size:11.5px;color:var(--ink-sub);line-height:1.8;}
.step-arrow{color:var(--teal);align-self:center;font-family:var(--font-latin);font-weight:700;font-size:22px;}
.order-steps>.rv:nth-child(1){transition-delay:0s;}
.order-steps>.rv:nth-child(2){transition-delay:.06s;}
.order-steps>.rv:nth-child(3){transition-delay:.12s;}
.order-steps>.rv:nth-child(4){transition-delay:.18s;}
.order-steps>.rv:nth-child(5){transition-delay:.24s;}
.order-steps>.rv:nth-child(6){transition-delay:.3s;}
.order-steps>.rv:nth-child(7){transition-delay:.36s;}
.order-steps>.rv:nth-child(8){transition-delay:.42s;}
.order-steps>.rv:nth-child(9){transition-delay:.48s;}
.order-note{
  text-align:center;margin-top:38px;font-size:13px;color:var(--ink-sub);
}
.order-note b{color:var(--red);font-weight:700;}
.br-sp{display:none;}
@media(max-width:960px){.br-sp{display:inline;}}
@media(max-width:960px){
  .order-steps{grid-template-columns:1fr;gap:10px;}
  .step{width:100%;max-width:330px;margin:0 auto;}
  /* 矢印の箱が横長のまま回転すると縦に間延びして隣のカードと重なるので、正方形の小さい箱にしてから回す */
  /* transform:rotate()だと.rv.is-in{transform:none}(フェードイン完了後のスタイル)と同じtransformプロパティ同士がぶつかり、
     詳細度で上回るはずのis-in側が実際には反映されず回転が戻ってしまう不具合があったため、
     transformとは独立したrotateプロパティを使って干渉を避ける */
  .step-arrow{width:22px;height:22px;line-height:22px;margin:0 auto;text-align:center;rotate:90deg;}
}

/* ============ gallery ============ */
.gallery-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gallery-grid .g{
  position:relative;aspect-ratio:1/1;
  filter:drop-shadow(0 10px 20px rgba(120,90,40,.16));
}
.gallery-grid .g .ph-photo{position:absolute;inset:14%;width:72%;height:72%;object-fit:cover;transition:transform .5s;display:block;}
.gallery-grid .g .ph-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;}
.gallery-grid .g:hover .ph-photo{transform:scale(1.06);}
.gallery-more{text-align:center;margin-top:40px;}
.btn-outline-teal{
  display:inline-block;border:1.6px solid var(--teal);color:var(--teal-deep);background:var(--white);
  font-family:var(--font-round);font-weight:700;font-size:14px;letter-spacing:.12em;
  padding:12px 48px;border-radius:999px;transition:background .2s,color .2s;
}
.btn-outline-teal:hover{background:var(--teal);color:#fff;}
@media(max-width:680px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* ============ access ============ */
.access-in{
  display:grid;grid-template-columns:36fr 64fr;grid-template-areas:"head map" "list map";
  gap:48px;align-items:start;position:relative;z-index:1;
}
.access-head{grid-area:head;}
.access-list-wrap{grid-area:list;}
.access-list dt{
  font-family:var(--font-round);font-weight:800;font-size:12.5px;color:var(--teal-deep);
  letter-spacing:.18em;margin-top:18px;
}
.access-list dd{font-size:14px;border-bottom:1px solid var(--line);padding-bottom:13px;}
.access-map{
  grid-area:map;position:relative;aspect-ratio:3/2;
  filter:drop-shadow(0 10px 18px rgba(120,90,40,.14)) drop-shadow(0 26px 46px rgba(120,90,40,.18));
}
.access-map iframe{position:absolute;top:10%;left:8%;width:84%;height:80%;border:0;filter:saturate(.9);}
.access-map .ph-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;}
@media(max-width:860px){
  /* スマホでは 見出し→マップ→内容 の順にする */
  .access-in{grid-template-columns:1fr;grid-template-areas:"head" "map" "list";}
}

/* ============ cta ============ */
/* ACCESSの白背景を下に延長し、CTAの赤の下に潜り込ませる（波の高さ調整に頼らず隙間を物理的に無くす） */
#access{position:relative;}
#access::after{content:"";position:absolute;left:0;right:0;bottom:-120px;height:120px;background:var(--white);z-index:0;pointer-events:none;}
.cta{position:relative;z-index:1;background:var(--red);color:#fff;padding:78px 0 70px;margin-top:80px;}
.cta-wave{position:absolute;left:0;right:0;top:-96px;height:96px;color:var(--red);}
.cta-wave svg{width:100%;height:100%;display:block;}
.cta-in{
  position:relative;max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
}
.cta-cat{
  width:150px;aspect-ratio:1/1;background:var(--white);
  border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;
  display:flex;align-items:center;justify-content:center;padding:20px;
  box-shadow:0 12px 26px rgba(0,0,0,.16);transform:rotate(-4deg);
}
.cta-cat img{width:100%;}
.cta-copy h2{
  font-family:var(--font-round);font-weight:800;font-size:clamp(24px,3.2vw,36px);letter-spacing:.14em;
}
.cta-copy p{font-size:13.5px;opacity:.94;margin-top:10px;}
.cta-btns{display:flex;flex-direction:column;gap:14px;min-width:300px;}
.btn-yellow{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--yellow);color:var(--ink);
  font-family:var(--font-round);font-weight:800;font-size:15.5px;letter-spacing:.06em;
  padding:16px 24px;border-radius:14px;box-shadow:0 5px 0 rgba(0,0,0,.16);
  transition:transform .15s,box-shadow .15s;
}
.btn-white{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;color:var(--ink);
  font-family:var(--font-round);font-weight:700;font-size:14px;
  padding:14px 24px;border-radius:14px;box-shadow:0 5px 0 rgba(0,0,0,.16);
  transition:transform .15s,box-shadow .15s;
}
.btn-yellow:hover,.btn-white:hover{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.16);}
@media(max-width:860px){
  .cta-in{grid-template-columns:1fr;text-align:center;}
  .cta-cat{margin:0 auto;}
  .cta-btns{margin:0 auto;min-width:0;width:100%;max-width:340px;}
}

/* ============ footer ============ */
.footer{background:var(--cream);padding:42px 0 24px;}
.footer-in{
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;
}
.footer-logo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.footer-logo .fname{font-family:var(--font-script);font-size:24px;color:var(--red-deep);line-height:1;}
.footer-logo .fsub{font-size:10.5px;color:var(--ink-sub);letter-spacing:.24em;}
.footer-nav{display:flex;gap:30px;margin-left:auto;align-items:center;}
.footer-nav a{font-family:var(--font-latin);font-weight:700;font-size:12.5px;letter-spacing:.16em;}
.footer-nav a:hover{color:var(--teal-deep);}
.footer-nav .ig svg{width:20px;height:20px;stroke:var(--ink);display:block;}
.footer-copy{text-align:center;font-size:11px;color:var(--ink-sub);margin-top:28px;}
@media(max-width:640px){
  /* 画面が狭いとnavが折り返せず右端が見切れていたのを、中央寄せ＋折り返し可に修正 */
  .footer-in{justify-content:center;text-align:center;}
  .footer-logo{justify-content:center;width:100%;}
  .footer-nav{flex-wrap:wrap;justify-content:center;margin-left:0;width:100%;row-gap:10px;}
}

/* ============ スマホ用 追従CTAバー ============ */
.sp-cta-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:0 -6px 18px rgba(90,60,30,.18);
}
.sp-cta-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  height:56px;color:#fff;font-family:var(--font-round);font-weight:800;font-size:14px;letter-spacing:.05em;
}
.sp-cta-bar a svg{width:18px;height:18px;flex-shrink:0;}
.sp-cta-bar .tel{background:var(--red);}
.sp-cta-bar .line{background:var(--teal-deep);}
@media(max-width:860px){
  .sp-cta-bar{display:flex;}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0));}
}