/* HIYORI 片貝プライベート花火 (ja) — transcribed verbatim from the Claude Design export */
body{margin:0;background:#0f1317}
a{color:#e8e4dc;text-decoration:none}a:hover{color:#ffffff}
.kf{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;color:#e8e4dc;background:#0f1317;overflow-x:clip;position:relative}
.kfm{container-type:inline-size;container-name:kfm}
.lat{font-family:'Cormorant Garamond','Times New Roman',serif}
.vt{writing-mode:vertical-rl;text-orientation:mixed}
.kf img{display:block}
.kf-label{font-size:12px;letter-spacing:.34em;line-height:1;color:rgba(232,228,220,.5)}
.kf-light .kf-label{color:rgba(26,29,32,.5)}
.kf-light{color:#1a1d20}
.kf-light a{color:#1a1d20}
/* ---- shared header pieces, the same as the TOP page ---- */
.nav a{font-size:12px;letter-spacing:.12em;color:rgba(232,228,220,.78)}
.nav>a,.nav>div{position:relative;z-index:6}
.burger{outline:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.burger:focus{outline:none;box-shadow:none}
.burger:focus-visible span{background:#fff}
.burger span{transition:transform 1s cubic-bezier(.16,1,.3,1),background-color .3s ease;transform-origin:50% 50%;will-change:transform}
.burger[data-tone="light"]:not(.open) span{background-color:#242424!important}
.burger.open span:first-child{transform:translateY(4px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{transform:translateX(100%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.menu.open{transform:none}
.menu a:hover{color:#fff}
.menu-veil{opacity:0;pointer-events:none;transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.menu-veil.open{opacity:1;pointer-events:auto}
.ul{position:relative;display:inline-block;padding-bottom:6px}
.ul:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5}
/* ---- quiet entrance: each block fades in as it reaches the window ---- */
[data-js][data-fs] .f{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1.6s ease,transform 2s cubic-bezier(.16,.5,.2,1)}
[data-js][data-fs] .f2{transition-delay:.25s}
[data-js][data-fs] .f3{transition-delay:.5s}
[data-js][data-fs].on .f{opacity:1;transform:none}
/* THE EXPERIENCE: photo, words and heading appear together, softly, once the section is well in view */
[data-js][data-fs-late] .fl{opacity:0;transform:translate3d(0,24px,0);transition:opacity 2s ease,transform 2.4s cubic-bezier(.16,.5,.2,1)}
[data-js][data-fs-late][data-on] .fl{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-js][data-fs] .f,[data-js][data-fs-late] .fl{opacity:1;transform:none;transition:none}}

/* ---- 01 HERO: a cinematic opening — a dark sky and the words; a single trail rises, the burst opens across the screen, the night carries on into THE EXPERIENCE ---- */
.kh{position:relative;height:254vh;background:#05070a}
.kh-stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;background:#05070a}
.kh-photo{position:absolute;inset:0;transform-origin:50% 40%;will-change:transform;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0px,rgba(0,0,0,.04) 60px);mask-image:radial-gradient(circle at 50% 40%,#000 0px,rgba(0,0,0,.04) 60px)}
.kh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85) brightness(.84)}
.kh-dim{position:absolute;inset:0;background:#05070a;opacity:.35;pointer-events:none}
.kh-trail{position:absolute;left:50%;top:40%;bottom:0;width:1px;margin-left:-.5px;background:linear-gradient(0deg,rgba(255,236,214,0) 0%,rgba(255,232,204,.35) 60%,rgba(255,240,224,.85) 100%);transform:scaleY(0);transform-origin:50% 100%;pointer-events:none}
.kh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,10,.6) 0%,rgba(5,7,10,0) 24%,rgba(5,7,10,0) 70%,rgba(5,7,10,.5) 100%)}
.kh-end{position:absolute;inset:0;background:#0f1317;opacity:0;pointer-events:none;z-index:4}
.kh-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(15,19,23,0) 0%,#0f1317 100%);opacity:0;pointer-events:none;z-index:3}
.kh-copy{position:absolute;top:168px;right:max(48px,13%);display:flex;flex-direction:row-reverse;align-items:flex-start;gap:34px;z-index:2;will-change:transform,opacity}
.kh-h1{margin:0;white-space:nowrap;font-weight:500;font-size:40px;line-height:2;letter-spacing:.18em;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.kh-sub{margin:112px 0 0;white-space:nowrap;font-size:14px;line-height:2;letter-spacing:.32em;color:rgba(242,238,230,.86);text-shadow:0 1px 24px rgba(0,0,0,.5)}
.kh-foot{position:absolute;left:48px;right:48px;bottom:44px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;z-index:2}
.kh-crumb{font-size:12px;letter-spacing:.16em;color:rgba(232,228,220,.62);display:flex;gap:12px;align-items:center}
.kh-crumb a{color:rgba(232,228,220,.62)}
.kh-crumb a:hover{color:#fff}
.kh-hint{position:absolute;left:50%;bottom:0;width:1px;height:64px;margin-left:-.5px;overflow:hidden;z-index:2;pointer-events:none}
.kh-hint i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,228,220,0),rgba(232,228,220,.55));transform-origin:50% 0;animation:khHint 3.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes khHint{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.kh-h1,.kh-sub{animation:khIn 2.6s ease both}
.kh-h1{animation-delay:.3s}
.kh-sub{animation-delay:1.1s}
@keyframes khIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .kh-h1,.kh-sub{animation:none}
  .kfm .kh{height:auto}
  .kh{height:auto}.kh-stage{position:relative}
  .kh-trail,.kh-hint{display:none}
}

/* ---- 02 THE EXPERIENCE: one photograph, lit little by little as the words are read; a single line of light carries on from the hero's trail ---- */
.kxp{position:relative;background:#0f1317;color:#e8e4dc}
.kxp-in{max-width:1320px;margin:0 auto;box-sizing:border-box;padding:0 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-rows:auto 1fr;grid-template-areas:"media head" "media lines";column-gap:clamp(48px,7vw,120px)}
.kxp-media{grid-area:media;align-self:start;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;z-index:2}
.kxp-fig{position:relative;margin:0;height:min(78vh,780px);aspect-ratio:4/5;max-width:100%;overflow:hidden;background:#07090c}
.kxp-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;transform:scale(1.06);will-change:transform}
.kxp-shade{position:absolute;inset:0;background:#07090c;opacity:.8;pointer-events:none}
.kxp-head{grid-area:head;display:flex;flex-direction:column;align-items:flex-end;padding-top:24vh}
.kxp-h2{margin:30px 0 0;font-size:38px;font-weight:500;line-height:2;letter-spacing:.18em;color:#f4f1eb}
.kxp-lines{grid-area:lines;align-self:start;position:relative;margin:20vh 0 0;padding:0 0 42vh 40px}
.kxp-list{list-style:none;margin:0;padding:0}
.kxp-rail{position:absolute;left:0;top:10px;bottom:42vh;width:1px;background:rgba(232,228,220,.1)}
.kxp-rail i{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,232,204,.15),rgba(255,236,214,.75));transform:scaleY(0);transform-origin:50% 0}
.kxp-lines li{margin:0 0 32vh;font-size:19px;line-height:2.1;letter-spacing:.12em;color:#f1eee8}
.kxp-lines li:last-child{margin-bottom:0;font-size:22px;line-height:2;letter-spacing:.08em;color:#fff}
[data-js] .kxp-lines li{opacity:0;transform:translate3d(0,14px,0);transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.16,.5,.2,1)}
[data-js] .kxp-lines li[data-st="now"]{opacity:1;transform:none}
[data-js] .kxp-lines li[data-st="past"]{opacity:.24;transform:none}
@media (prefers-reduced-motion:reduce){[data-js] .kxp-lines li{opacity:1!important;transform:none!important;transition:none}}

/* ---- 02b THE EXPERIENCE, occasions (unchanged) ---- */
.kx{position:relative;background:#f1efea}
.kx-fade{height:160px;background:linear-gradient(180deg,#0f1317 0%,#f1efea 100%)}
.kx-occ{max-width:1200px;margin:0 auto;box-sizing:border-box;padding:96px 48px 120px}
.kx-occ h3{margin:0;font-size:20px;font-weight:500;letter-spacing:.14em;line-height:1.8;color:#1a1d20}
.kx-list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px;row-gap:36px}
.kx-list li{border-top:1px solid rgba(26,29,32,.22);padding-top:26px;position:relative}
/* the four wishes: once the list is in view they rise in from left to right, 0.15s apart, and stay */
[data-js].kx-list .oc{opacity:0;transform:translate3d(0,10px,0);transition:opacity 1s ease-out,transform 1s ease-out}
[data-js].kx-list .oc:nth-child(2){transition-delay:.3s}
[data-js].kx-list .oc:nth-child(3){transition-delay:.6s}
[data-js].kx-list .oc:nth-child(4){transition-delay:.9s}
[data-js].kx-list[data-shown] .oc{opacity:1;transform:none}
/* hover (mouse only): a slightly darker line draws over the pale one, left to right */
.kx-list li:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(26,29,32,.55);transform:scaleX(0);transform-origin:left center;transition:transform .4s cubic-bezier(.22,.61,.36,1);pointer-events:none}
@media (hover:hover) and (pointer:fine){.kx-list li:hover:before{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){[data-js].kx-list .oc{opacity:1;transform:none;transition:none}.kx-list li:before{transition:none}}
.kx-list b{display:block;font-size:16px;font-weight:500;letter-spacing:.14em;color:#1a1d20}
.kx-list span{display:block;margin-top:14px;font-size:13px;line-height:2.1;letter-spacing:.06em;color:rgba(26,29,32,.7)}

/* ---- 03 YOUR JOURNEY: one day per block, words and photo on the left, the day's timeline on the right ---- */
.kj{position:relative;background:#f2f0e8;color:#20352f}
.kj-stage{max-width:1160px;margin:0 auto;box-sizing:border-box;padding:120px 48px 110px}
.kj-head h2{margin:26px 0 0;font-size:32px;font-weight:500;line-height:1.7;letter-spacing:.14em;color:#20352f}
.kj-sans{font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif}
.kj-day{margin-top:84px;display:grid;grid-template-columns:minmax(0,640px) minmax(0,420px);grid-template-areas:"head ." "left tl";justify-content:space-between;column-gap:64px}
.kj-day+.kj-day{margin-top:104px}
.kj-dhead{grid-area:head}
.kj-left{grid-area:left}
.kj-label{font-size:13px;font-weight:500;letter-spacing:.16em;color:#9c8152}
.kj-h3{margin:22px 0 0;font-size:36px;font-weight:500;line-height:1.6;letter-spacing:.06em;color:#20352f}
.kj-lead{margin:27px 0 0;font-size:14.5px;line-height:2;letter-spacing:.06em;color:rgba(32,53,47,.72)}
.kj-fig{margin:30px 0 0}
.kj-fig img{width:100%;aspect-ratio:1396/871;height:auto;object-fit:cover}
.kj-fig figcaption{margin-top:14px;font-size:12px;letter-spacing:.1em;color:rgba(32,53,47,.55)}
.kj-right{grid-area:tl;padding-top:53px}
.kj-tl{list-style:none;margin:0;padding:0;border-top:1px solid #dbd0bc}
.kj-tl li{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;min-height:62px;padding:0 6px;box-sizing:border-box;border-bottom:1px solid #dbd0bc}
.kj-t{font-size:13px;font-weight:500;letter-spacing:.06em;color:#9c8152}
.kj-c{font-size:16.5px;line-height:1.7;letter-spacing:.1em;color:#2b3a35;padding:14px 0}
.kj-tl li.hl{background:#ece8dc}
.kj-note{margin:80px 0 0;font-size:13.5px;line-height:2;letter-spacing:.04em;color:rgba(32,53,47,.62)}

/* ---- 04 MEMORIES ---- */
.km{position:relative;background:#ece8e0}
.km-stage{max-width:1240px;margin:0 auto;box-sizing:border-box;padding:170px 48px 170px}
.km-head h2{margin:26px 0 0;font-size:32px;font-weight:500;line-height:1.7;letter-spacing:.14em;color:#1a1d20}
.km-grid{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:72px;align-items:center}
.km-obj{margin:0}
.km-paper{position:relative;aspect-ratio:1491/1055;background:#f7f3ea;box-shadow:0 40px 70px -40px rgba(40,30,20,.45),0 2px 6px rgba(40,30,20,.08)}
.km-paper img{display:block;width:100%;height:100%;object-fit:cover}
/* hover (mouse only): the banzuke tilts a little and lifts a little, as if picked up */
@media (hover:hover) and (pointer:fine){
  .km-paper{transition:transform .9s cubic-bezier(.22,.61,.36,1),box-shadow .9s cubic-bezier(.22,.61,.36,1)}
  .km-paper:hover{transform:rotate(-1.5deg) scale(1.03);box-shadow:0 50px 80px -40px rgba(40,30,20,.5),0 4px 10px rgba(40,30,20,.1)}
}
@media (prefers-reduced-motion:reduce){.km-paper,.km-paper:hover{transform:none!important;transition:none!important}}
.km-paper i{position:absolute;display:block}
.km-frame{inset:18px;border:1px solid rgba(26,29,32,.42)}
.km-frame2{inset:23px;border:1px solid rgba(26,29,32,.18)}
.km-cols{left:12%;right:12%;top:16%;bottom:20%;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(26,29,32,.1) 38px 39px)}
.km-title{left:50%;top:7%;width:22%;height:4%;margin-left:-11%;background:rgba(26,29,32,.16)}
.km-seal{right:9%;bottom:9%;width:28px;height:28px;background:#b8402f;opacity:.85}
.km-tag{position:absolute;left:34px;bottom:30px;font-size:10px;letter-spacing:.18em;color:rgba(26,29,32,.55);font-family:'Cormorant Garamond',serif}
.km-side{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:44px}
.km-key{margin:0;font-size:21px;font-weight:500;line-height:2.1;letter-spacing:.2em;color:#1a1d20;flex:none}
.km-text{min-width:0}
.km-text p{margin:0 0 22px;word-break:auto-phrase;text-wrap:pretty;font-size:14px;line-height:2.4;letter-spacing:.08em;color:rgba(26,29,32,.82)}
.km-dl{margin:12px 0 0;padding:0}
.km-dl div{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;padding:14px 0;border-top:1px solid rgba(26,29,32,.18)}
.km-dl div:last-child{border-bottom:1px solid rgba(26,29,32,.18)}
.km-dl dt{font-size:12px;letter-spacing:.16em;color:rgba(26,29,32,.55)}
.km-dl dd{margin:0;font-size:13px;line-height:1.9;letter-spacing:.06em;color:#1a1d20}
.km-note{margin:20px 0 0!important;font-size:11px!important;line-height:2!important;color:rgba(26,29,32,.55)!important}

/* ---- 05 PLAN & RESERVATION ---- */
.kp{position:relative;background:#0f1317}
.kp-stage{max-width:1200px;margin:0 auto;box-sizing:border-box;padding:170px 48px 150px}
.kp-head h2{margin:26px 0 0;font-size:36px;font-weight:500;line-height:1.7;letter-spacing:.16em;color:#fff}
.kp-grid{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:80px;align-items:start}
.kp-ph{aspect-ratio:3/2;overflow:hidden;background:#1a2026}
.kp-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85)}
.kp-meta{margin-top:40px;font-size:14px;letter-spacing:.2em;color:rgba(232,228,220,.75)}
.kp-amt{margin-top:12px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.kp-amt .lat{font-size:58px;line-height:1.1;letter-spacing:.04em;color:#f4f1eb}
.kp-amt span:last-child{font-size:15px;letter-spacing:.1em;color:rgba(232,228,220,.82)}
.kp-spec{margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(232,228,220,.2);border-bottom:1px solid rgba(232,228,220,.2)}
.kp-spec div{padding:18px 0}
.kp-spec div+div{padding-left:22px;border-left:1px solid rgba(232,228,220,.14)}
.kp-spec dt{font-size:11px;letter-spacing:.2em;color:rgba(232,228,220,.55)}
.kp-spec dd{margin:8px 0 0;font-size:14px;letter-spacing:.12em;color:#f1eee8}
.kp-note{margin:22px 0 0;font-size:11px;line-height:2;letter-spacing:.06em;color:rgba(232,228,220,.55)}
.kp-inc h3,.kp-flow h3{margin:0;font-size:18px;font-weight:500;letter-spacing:.16em;line-height:1.8;color:#f1eee8}
.kp-inc ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid rgba(232,228,220,.28)}
.kp-inc li{padding:15px 0 15px 22px;position:relative;font-size:14px;line-height:1.8;letter-spacing:.08em;color:rgba(232,228,220,.88);border-bottom:1px solid rgba(232,228,220,.12)}
.kp-inc li:before{content:"";position:absolute;left:2px;top:50%;width:8px;height:1px;background:rgba(232,228,220,.6)}
.kp-flow{margin-top:130px}
.kp-flow ol{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px;row-gap:32px}
.kp-flow li{border-top:1px solid rgba(232,228,220,.28);padding-top:20px}
.kp-num{display:block;font-size:20px;letter-spacing:.08em;color:#f4f1eb}
.kp-en{display:block;margin-top:6px;font-size:11px;letter-spacing:.22em;color:rgba(232,228,220,.55)}
.kp-flow p{margin:14px 0 0;font-size:12.5px;line-height:2;letter-spacing:.06em;color:rgba(232,228,220,.8)}
.kp-cta{margin-top:120px;display:flex;flex-direction:column;align-items:center;text-align:center}
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:72px;padding:0 48px;box-sizing:border-box;border:1px solid rgba(232,228,220,.55);color:#fff!important;font-size:16px;letter-spacing:.26em;transition:background-color .4s ease,border-color .4s ease}
.kp-btn:hover{background:rgba(232,228,220,.06);border-color:rgba(232,228,220,.85)}
.kp-btn i{display:block;flex:none;width:65px;height:1px;background:currentColor;opacity:.7;transition:width .4s ease-out}
.kp-btn:hover i,.kp-btn:focus-visible i{width:110px}
@media (hover:none){.kp-btn i,.kp-btn:hover i{width:65px;transition:none}}
.kp-cta p{margin:26px 0 0;font-size:11px;letter-spacing:.06em;color:rgba(232,228,220,.5)}

/* ---- FOOTER (same as TOP) ---- */
.ft-top{padding:52px 120px 36px}
.ft-tag{margin-top:26px}
.ft-loc{margin-top:28px}
.ft-bot{padding:0 120px 30px}

/* ---- tablet ---- */
@container kfm (max-width:1099px){
  .kx-occ{padding:84px 48px 100px}
  .kx-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .km-grid{grid-template-columns:minmax(0,1fr);row-gap:64px}
  .km-side{max-width:640px;margin:0 auto;justify-content:center}
  .kp-grid{grid-template-columns:minmax(0,1fr);row-gap:72px}
  .kp-flow ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container kfm (max-width:860px){
  /* THE EXPERIENCE stacks from here down: heading, then the photograph held at the top while the words pass beneath it */
  .kxp-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"head" "stack";padding:0}
  .kxp-head{align-items:flex-start;padding:120px 48px 48px}
  .kxp-h2{writing-mode:horizontal-tb;margin-top:22px;font-size:32px;line-height:1.8;letter-spacing:.12em}
  .kxp-media{grid-area:stack;height:56vh;background:#0f1317;padding:0 48px;box-sizing:border-box}
  .kxp-fig{width:100%;height:100%;aspect-ratio:auto}
  .kxp-lines{grid-area:stack;margin:0;padding:calc(56vh + 18vh) 48px 30vh 88px}
  .kxp-rail{left:48px;top:calc(56vh + 18vh + 10px);bottom:30vh}
  .kxp-lines li{margin-bottom:26vh}
  .kj-day{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "left" "tl"}
  .kj-right{padding-top:48px;max-width:640px}
  .kj-note{margin-top:48px}
}
/* ---- phone ---- */
@container kfm (max-width:767px){
  .kh-copy{top:136px;right:28px;gap:22px}
  .kh-h1{font-size:30px}
  .kh-sub{margin-top:84px;font-size:13px;letter-spacing:.26em}
  .kh-foot{left:24px;right:24px;bottom:32px;flex-direction:column;align-items:flex-start;gap:12px}
  .kh{height:221vh}
  .kh-img{object-position:42% 40%}
  .kxp-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"head" "stack";padding:0}
  .kxp-head{align-items:flex-start;padding:104px 24px 44px}
  .kxp-h2{writing-mode:horizontal-tb;margin-top:22px;font-size:min(26px, calc((100cqw - 48px) / 11.5));line-height:1.8;letter-spacing:.12em}
  .kxp-media{grid-area:stack;height:56vh;background:#0f1317;padding:0 24px;box-sizing:border-box}
  .kxp-fig{width:100%;height:100%;aspect-ratio:auto}
  .kxp-lines{grid-area:stack;margin:0;padding:calc(56vh + 18vh) 24px 30vh 52px}
  .kxp-rail{left:24px;top:calc(56vh + 18vh + 10px);bottom:30vh}
  .kxp-lines li{margin-bottom:24vh;font-size:16px;letter-spacing:.08em;word-break:auto-phrase}
  .kxp-lines li:last-child{font-size:19px;letter-spacing:.1em}
  .kx-occ{padding:72px 24px 80px}
  .kx-occ h3{font-size:min(18px, calc((100cqw - 48px) / 17.5))}
  .kp-flow h3{font-size:min(18px, calc((100cqw - 48px) / 19))}
  .kx-list{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .kj-stage{padding:88px 24px 80px}
  .kj-head h2{font-size:min(26px, calc((100cqw - 48px) / 13))}
  .kj-day{margin-top:56px}
  .kj-day+.kj-day{margin-top:68px}
  .kj-h3{font-size:min(28px, calc((100cqw - 48px) / 8.5))}
  .kj-lead{margin-top:20px;font-size:14px;word-break:auto-phrase}
  .kj-fig{margin-top:24px}
  .kj-right{padding-top:36px}
  .kj-tl li{grid-template-columns:84px minmax(0,1fr);min-height:56px;padding:0 4px}
  .kj-c{font-size:15px;letter-spacing:.06em;padding:12px 0}
  .kj-note{margin-top:36px;font-size:12.5px}
  .km-stage{padding:110px 24px 110px}
  .km-head h2{font-size:min(26px, calc((100cqw - 48px) / 15.5))}
  .km-grid{margin-top:48px;row-gap:48px}
  .km-paper i.km-frame{inset:10px}.km-paper i.km-frame2{inset:14px}
  .km-tag{left:20px;bottom:18px}
  .km-side{flex-direction:column;gap:30px}
  .km-key{writing-mode:horizontal-tb;font-size:19px;line-height:1.9;letter-spacing:.12em}
  .kp-stage{padding:110px 24px 100px}
  .kp-head h2{font-size:min(28px, calc((100cqw - 48px) / 11))}
  .kp-grid{margin-top:44px;row-gap:64px}
  .kp-amt .lat{font-size:46px}
  .kp-spec{grid-template-columns:minmax(0,1fr)}
  .kp-spec div,.kp-spec div+div{padding:14px 0;border-left:0;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline}
  .kp-spec div+div{border-top:1px solid rgba(232,228,220,.12)}
  .kp-spec dd{margin:0}
  .kp-flow{margin-top:100px}
  .kp-flow ol{grid-template-columns:minmax(0,1fr);row-gap:0}
  .kp-flow li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px;padding:18px 0}
  .kp-flow li p{grid-column:2;margin-top:6px}
  .kp-num{grid-row:1 / span 2}
  .kp-en{margin-top:0;align-self:center}
  .kp-cta{margin-top:90px}
  .kp-btn{width:100%;padding:16px 20px;gap:16px;font-size:15px;letter-spacing:.2em}
  /* phone: the words always sit on two lines (この旅について / 相談する); their box is a fixed 7.5 characters wide, so the drawn line can never push them onto a third */
  .kp .kp-btn span{flex:none;width:9em;text-align:left;line-height:1.9;white-space:normal}
  .kp .kp-btn i{width:40px;margin-right:24px;transition:width .4s ease-out,margin-right .4s ease-out}
  .kp .kp-btn:hover i,.kp .kp-btn:focus-visible i{width:64px;margin-right:0}
  .ft-top{flex-direction:column;gap:36px;padding:48px 24px 32px}
  .ft-nav{column-gap:32px!important}
  .ft-bot{padding:0 24px 32px;gap:16px}
}
/* language switch: two links in the place of the old label, at its exact size and colour; the language not shown sits a little quieter */
.hy-lang{color:rgba(232,228,220,.78);white-space:nowrap}.nav .hy-lang a{font-size:inherit;letter-spacing:inherit;color:rgba(232,228,220,.78);transition:opacity .3s ease,color .3s ease}.nav .hy-lang a:not([aria-current]){opacity:.6}.nav .hy-lang a:hover,.nav .hy-lang a:focus-visible{opacity:1;color:#fff}