@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap");

:root{
  --white:#ffffff;
  --ink:#37322e;
  --muted:#817972;
  --beige:#c6b39d;
  --beige-dark:#9f8870;
  --beige-pale:#f3eee8;
  --line:#e9e4de;
  --serif:"Hiragino Mincho ProN","Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",serif;
  --sans:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--serif);line-height:2;letter-spacing:.055em}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit}
.wrap{width:min(1120px,calc(100% - 40px));margin:auto}
.narrow{max-width:760px}
.site-header{position:fixed;z-index:80;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 28px;pointer-events:none}
.site-logo,.header-actions{pointer-events:auto}
.site-logo{font-size:24px;letter-spacing:.13em}
.site-logo small,.drawer-logo small{display:block;font:8px Georgia,serif;letter-spacing:.18em;margin-top:-6px;color:inherit}
.header-actions{display:flex;align-items:center;gap:12px}
.header-reserve,.btn-fill{background:var(--beige);color:white}
.header-reserve{padding:10px 16px;border-radius:999px;font-size:10px;letter-spacing:.1em}
.menu-button{width:45px;height:45px;border:0;border-radius:50%;background:var(--beige);display:grid;place-content:center;gap:5px;cursor:pointer}
.menu-button span{display:block;width:18px;height:1px;background:white}
.drawer{position:fixed;z-index:100;top:0;right:0;width:min(440px,92vw);height:100dvh;background:white;padding:30px;transform:translateX(100%);transition:.35s ease;overflow:auto}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.drawer-logo{font-size:22px;letter-spacing:.12em}
.drawer-close{border:0;background:none;font-size:30px;cursor:pointer;color:var(--ink)}
.drawer-nav>a,.drawer-sub a{display:block;border-bottom:1px solid var(--line);padding:13px 0;font-size:13px}
.drawer-sub{padding-left:18px}
.drawer-sub a{font-size:11px;color:var(--muted)}
.drawer-cta-wrap{display:grid;gap:10px;margin-top:28px}
.drawer-backdrop{position:fixed;z-index:90;inset:0;background:rgba(40,35,30,.15);opacity:0;visibility:hidden;transition:.25s}
.drawer-backdrop.show{opacity:1;visibility:visible}
.section{padding:125px 0}
.section-label{font:10px Georgia,serif;letter-spacing:.25em;text-transform:uppercase;color:var(--beige-dark)}
.section-heading{margin-bottom:55px}
.section-heading h2,.gallery-head h2,.subpage h1,.subpage h2{font-weight:400;letter-spacing:.055em}
.section-heading h2{font-size:36px;margin:8px 0}
.section-heading p{font-size:12px;color:var(--muted);margin:0}
.hero-minimal{position:relative;height:100svh;min-height:680px;display:flex;align-items:center;background:white}
.hero-wordmark{width:min(1160px,calc(100% - 40px));margin:auto}
.hero-wordmark h1{font-size:clamp(52px,7vw,100px);font-weight:400;letter-spacing:.02em;line-height:1.45;margin:18px 0}
.eyebrow{font:10px Georgia,serif;letter-spacing:.3em;color:var(--beige-dark)}
.hero-about-link{position:absolute;right:32px;bottom:36px;font-size:11px;border-bottom:1px solid var(--beige);padding-bottom:4px}
.hero-scroll{position:absolute;left:28px;bottom:36px;font:9px Georgia,serif;letter-spacing:.25em;color:#aaa}
.section-grid{display:grid;align-items:center}
.image-frame{overflow:hidden;background:var(--beige-pale)}
.image-frame-tall{aspect-ratio:4/5}
.profile-summary h2{font-size:42px;font-weight:400;margin:8px 0 18px}
.profile-lead{font-size:15px;margin-bottom:30px}
.profile-facts{border-top:1px solid var(--line)}
.profile-facts div{display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--line);padding:12px 0}
.profile-facts dt{font:10px Georgia,serif;color:var(--beige-dark);letter-spacing:.12em}
.profile-facts dd{margin:0;font-size:12px}
.text-link{display:inline-block;margin-top:28px;font-size:12px;border-bottom:1px solid var(--beige);padding-bottom:4px}
.plan-grid{display:grid;gap:18px}
.plan-card{display:block}
.plan-card figure{margin:0;overflow:hidden;background:var(--beige-pale)}
.plan-card figure img{transition:transform .8s ease}
.plan-card:hover figure img{transform:scale(1.025)}
.plan-card-meta{display:grid;grid-template-columns:45px 1fr auto;align-items:end;padding:16px 2px 24px;border-bottom:1px solid var(--line)}
.plan-card-meta span{font:10px Georgia,serif;color:var(--beige-dark)}
.plan-card-meta h3{font-size:22px;font-weight:400;margin:0}
.plan-card-meta small{font:8px Georgia,serif;letter-spacing:.16em;color:var(--muted)}
.flow-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.flow-list li{display:grid;grid-template-columns:80px 1fr;padding:23px 0;border-bottom:1px solid var(--line)}
.flow-list li>span{font:10px Georgia,serif;color:var(--beige-dark)}
.flow-list h3{font-size:17px;font-weight:400;margin:0}
.flow-list p{font-size:11px;color:var(--muted);margin:3px 0 0}
.faq-list details{border-top:1px solid var(--line);padding:20px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;font-size:14px;list-style:none;position:relative;padding-right:30px}
.faq-list summary:after{content:"＋";position:absolute;right:4px;color:var(--beige-dark)}
.faq-list details[open] summary:after{content:"−"}
.faq-list p{font-size:12px;color:var(--muted);max-width:760px}
.gallery-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:45px}
.gallery-head h2{font-size:38px;line-height:1.6;margin:8px 0 0}
.gallery-editorial{display:grid;gap:15px}
.gallery-editorial figure{margin:0;overflow:hidden;background:var(--beige-pale)}
.contact-box{text-align:center;background:var(--beige-pale);padding:75px 30px}
.contact-box h2{font-size:32px;font-weight:400;margin:8px 0}
.contact-box p{font-size:12px;color:var(--muted)}
.contact-actions{display:flex;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;padding:12px 22px;border-radius:999px;font-size:11px;letter-spacing:.08em;border:1px solid var(--beige)}
.btn-outline{background:white;color:var(--beige-dark)}
.site-footer{border-top:1px solid var(--line);padding:45px 28px 25px;background:white}
.footer-inner{display:flex;justify-content:space-between;gap:30px}
.footer-logo{font-size:23px;letter-spacing:.12em}
.footer-sub{font:8px Georgia,serif;color:var(--muted);letter-spacing:.18em}
.footer-links{display:flex;gap:18px;font-size:10px;color:var(--muted)}
.copyright{text-align:center;margin-top:35px;font:9px Georgia,serif;color:#aaa}
.subpage{padding-top:90px}
.sub-hero{padding:120px 0 100px}
.sub-hero h1,.plan-hero h1{font-size:clamp(42px,6vw,76px);line-height:1.45;margin:15px 0}
.story-section,.profile-story,.plan-detail-section,.plan-info{padding:80px 0 120px}
.story-layout{display:grid;align-items:center;gap:7vw;margin-bottom:130px}
.story-copy h2{font-size:34px;line-height:1.7}
.story-copy p{font-size:14px;color:#665f59}
.story-copy.center{max-width:760px;text-align:center;margin:90px auto}
.story-image{margin:0;aspect-ratio:4/3;overflow:hidden}
.story-image-small{aspect-ratio:1/1}
.sub-cta{padding:80px 0 120px;text-align:center}
.profile-story-main{max-width:700px;aspect-ratio:4/5;margin:0 auto 90px;overflow:hidden}
.profile-story-grid{display:grid;gap:7vw;align-items:center;margin:100px 0}
.profile-story-grid figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.profile-facts-large{max-width:760px;margin:80px auto 0}
.plan-hero{padding:100px 0}
.plan-hero-grid{display:grid;align-items:center;gap:7vw}
.plan-hero-copy p{font-size:14px;color:var(--muted);max-width:520px}
.plan-hero-image{margin:0;aspect-ratio:4/5;overflow:hidden}
.price-grid{display:grid;gap:16px}
.price-card{border-top:1px solid var(--line);padding:25px 0}
.price-card span{font:10px Georgia,serif;color:var(--beige-dark)}
.price-card h3{font-size:23px;font-weight:400;margin:8px 0}
.price-card p{font-size:12px;color:var(--muted)}
.price-card strong{display:block;font-size:24px;font-weight:400}
.price-card small{font-size:10px;color:var(--muted)}
.price-note{text-align:center;font-size:11px;color:var(--muted);margin-top:25px}
.two-column-info{display:grid;gap:18px}
.info-block{background:var(--beige-pale);padding:38px}
.info-block h2{font-size:27px}
.info-block p{font-size:12px;color:var(--muted)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.sp-only{display:none}


/* ===== restored photo first view ===== */
.hero-photo{position:relative;height:100svh;min-height:650px;overflow:hidden;background:#eee}
.hero-slides,.hero-slide{position:absolute;inset:0}
.hero-slide{opacity:0;transition:opacity 1.8s ease}
.hero-slide.active{opacity:1}
.hero-slide picture,.hero-slide img{display:block;width:100%;height:100%}
.hero-slide img{object-fit:cover}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,20,16,.28),rgba(25,20,16,0) 45%);pointer-events:none}
.hero-photo-copy{position:absolute;z-index:3;left:6vw;bottom:8vh;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.hero-photo-copy h1{margin:0;font-size:clamp(31px,4.1vw,58px);font-weight:400;letter-spacing:.015em;line-height:1.4;white-space:nowrap}
.hero-photo-copy p{margin:8px 0 0;padding-left:1.5em;font-size:11px;letter-spacing:.12em}
.hero-dots{position:absolute;z-index:4;left:50%;bottom:25px;transform:translateX(-50%);display:flex;gap:9px}
.hero-dot{width:7px;height:7px;border-radius:50%;border:1px solid rgba(255,255,255,.85);padding:0;background:transparent;cursor:pointer}
.hero-dot.active{background:#fff}
.concept-intro{position:relative;background:#fff;min-height:72vh;display:flex;align-items:center;justify-content:center;padding:110px 24px}
.concept-intro-inner{text-align:center;width:100%;position:relative}
.concept-intro h2{font-weight:400;font-size:clamp(28px,4vw,54px);line-height:1.4;letter-spacing:.015em;margin:0;white-space:nowrap}
.concept-intro .hero-about-link{position:absolute;right:1vw;top:calc(100% + 90px);bottom:auto}


/* ===== v3 concept statement ===== */
.concept-intro{
  min-height:92vh;
  padding:180px 24px;
}
.concept-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.concept-ja{
  font-weight:400;
  font-size:clamp(27px,3.55vw,50px);
  line-height:1.45;
  letter-spacing:.01em;
  margin:0;
  white-space:nowrap;
}
.concept-en{
  margin:22px 0 0;
  font:11px Georgia,"Times New Roman",serif;
  letter-spacing:.15em;
  color:#8d857e;
  white-space:nowrap;
}
.concept-char{
  display:inline-block;
  opacity:0;
  transform:translateY(1.05em);
  filter:blur(5px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s ease;
  transition-delay:calc(var(--i) * 38ms);
}
.concept-copy.is-visible .concept-char{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.concept-en .concept-char{
  transition-delay:calc(500ms + var(--i) * 24ms);
}
.concept-intro .hero-about-link{
  top:calc(100% + 125px);
}

/* ===== v3 classic photo gallery ===== */
.gallery-section{
  background:#f7f3ed;
}
.gallery-wrap{
  width:min(1320px,calc(100% - 28px));
}
.gallery-title{
  text-align:center;
  margin-bottom:55px;
}
.gallery-title .section-label{
  margin-bottom:20px;
}
.gallery-title h2{
  font-weight:400;
  font-size:clamp(34px,4.1vw,57px);
  line-height:1.45;
  letter-spacing:.035em;
  margin:0;
}
.gallery-title p{
  margin:20px 0 0;
  font-size:11px;
  color:#9b9289;
  letter-spacing:.12em;
}
.gallery-classic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.gallery-classic figure{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#ece5dc;
}
.gallery-classic img{
  transition:transform .8s ease;
}
.gallery-classic figure:hover img{
  transform:scale(1.025);
}
.gallery-instagram{
  text-align:right;
  margin-top:24px;
}


/* =========================================================
   v3.1 — reference-inspired typography / section positioning
   ========================================================= */

/* Logo image */
.logo-image-link{
  display:block;
  width:auto;
  line-height:0;
}
.site-logo-image{
  display:block;
  width:104px;
  height:auto;
  max-height:78px;
  object-fit:contain;
  object-position:left center;
}
.drawer-logo-image{
  display:block;
  width:135px;
  height:auto;
  max-height:100px;
  object-fit:contain;
  object-position:left center;
}

/* Concept copy sizing */
.concept-ja{
  font-size:clamp(24px,3vw,42px);
  letter-spacing:.005em;
}
.concept-en{
  margin-top:20px;
  font-size:clamp(15px,1.55vw,23px);
  line-height:1.45;
  letter-spacing:.045em;
  color:#776f69;
}
.concept-about-link{
  display:inline-block;
  margin-top:38px;
  padding-bottom:4px;
  border-bottom:1px solid var(--beige);
  font-size:11px;
  color:#756c65;
  letter-spacing:.08em;
}
.concept-about-link span{
  margin-left:6px;
}

/* All English section titles sit at the upper-left */
.section-title-top{
  text-align:left;
  margin-bottom:52px;
}
.section-heading{
  text-align:left;
}
.section-label{
  display:block;
  font:20px Georgia,"Times New Roman",serif;
  letter-spacing:.13em;
  line-height:1.2;
  color:#7e746b;
  text-transform:none;
  margin-bottom:18px;
}
.section-heading .section-label{
  margin-bottom:18px;
}

/* Supporting Japanese titles */
.section-heading h2{
  font-size:clamp(28px,3vw,42px);
  margin:0 0 10px;
}
.section-heading p{
  max-width:620px;
}

/* Photographer */
.photographer{
  padding-top:145px;
}
.section-grid-profile{
  align-items:start;
}
.profile-summary h2{
  margin-top:0;
}
.profile-visual{
  max-width:340px;
  justify-self:center;
}
.image-frame-tall{
  aspect-ratio:4/5;
}

/* Gallery heading should also be left aligned */
.gallery-title{
  text-align:left;
  margin-bottom:52px;
}
.gallery-title .section-label{
  margin-bottom:20px;
}
.gallery-title h2{
  margin-left:0;
  margin-right:0;
}

/* Contact */
.contact-box{
  margin-top:0;
}


/* =========================================================
   v3.2 — title hierarchy / spacing / logo visibility
   ========================================================= */

/* ① logo visibility: beige backing plate */
.site-header .logo-image-link{
  background:#d7c3aa;
  padding:8px 12px;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(85,70,55,.08);
}
.site-logo-image{
  width:104px;
}

/* ② More space after first view */
.concept-intro{
  margin-top:90px;
  min-height:98vh;
  padding-top:220px;
  padding-bottom:220px;
}

/* ③ More space between English line and About link */
.concept-about-link{
  margin-top:68px;
}

/* ④〜⑦ Common section title treatment */
.section-title-top,
.section-heading.section-title-top{
  position:relative;
  padding-top:34px;
  margin-bottom:58px;
}

/* diagonal slash marker like the supplied reference */
.section-mark{
  position:absolute;
  left:2px;
  top:0;
  width:34px;
  height:2px;
  background:#9fc5db;
  transform:rotate(-52deg);
  transform-origin:left center;
}

/* English headings larger */
.section-label{
  font:32px Georgia,"Times New Roman",serif;
  letter-spacing:.11em;
  line-height:1.18;
  color:#2f2a26;
  margin-bottom:18px;
}

/* Japanese subtitle directly below, same visual size */
.section-subtitle,
.section-heading h2,
.gallery-title h2{
  font-size:32px;
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;
  margin:0;
  color:#2f2a26;
}

/* keep descriptive copy separate */
.section-heading p,
.gallery-title p{
  margin-top:16px;
}

/* Photographer photo a little smaller again */
.profile-visual{
  max-width:295px;
}

/* Photographer main name should not fight the section title */
.profile-summary h2{
  font-size:34px;
}


/* =========================================================
   v3.3
   ① user-provided logo placeholder
   ② translucent fixed header row
   ③ section marker position
   ④ reference-style plan layout
   ========================================================= */

/* ① User will replace assets/atoha-logo.png */
.site-logo-image{
  width:120px;
  height:52px;
  object-fit:contain;
  object-position:left center;
}
.drawer-logo-image{
  width:140px;
  height:70px;
  object-fit:contain;
  object-position:left center;
}

/* ② Fixed translucent white header row.
   Hero begins BELOW this header, not behind it. */
:root{
  --site-header-height:82px;
}
.site-header{
  height:var(--site-header-height);
  padding:12px 26px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(220,214,207,.55);
  box-shadow:0 3px 14px rgba(70,60,50,.04);
}
.site-header .logo-image-link{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.hero-photo{
  margin-top:var(--site-header-height);
  height:calc(100svh - var(--site-header-height));
  min-height:568px;
}

/* ③ Section marker to the upper-left OF the title block, not above it */
.section-title-top,
.section-heading.section-title-top{
  padding-top:0;
  padding-left:46px;
}
.section-mark{
  left:3px;
  top:8px;
  width:34px;
  height:2px;
  transform:rotate(-53deg);
  transform-origin:left center;
}

/* ④ Plan — reference-inspired 2x2 image blocks */
.plan-reference{
  background:#fff;
  padding-top:130px;
  padding-bottom:150px;
}
.plan-reference-wrap{
  width:min(1220px,calc(100% - 44px));
}
.plan-reference-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:120px;
  row-gap:118px;
  padding:20px 8px 20px;
}
.plan-reference-item{
  position:relative;
  min-height:360px;
}
.plan-reference-photo{
  position:relative;
  display:block;
  width:78%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#eee9e2;
}
.plan-reference-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
.plan-reference-item:hover .plan-reference-photo img{
  transform:scale(1.025);
}
.plan-reference-vertical{
  position:absolute;
  left:2px;
  top:8px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font:clamp(44px,5vw,72px) Georgia,"Times New Roman",serif;
  line-height:1;
  color:rgba(255,255,255,.76);
  letter-spacing:.025em;
  pointer-events:none;
}
.plan-reference-label{
  position:absolute;
  right:0;
  bottom:5%;
  width:58%;
  min-height:118px;
  padding:28px 24px 20px 30px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.plan-reference-label h3{
  margin:0 0 18px;
  font-size:26px;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.4;
}
.plan-reference-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  background:#aebdca;
  color:#fff;
  font-size:10px;
  letter-spacing:.15em;
  line-height:1;
}
.plan-reference-item:nth-child(2n){
  transform:translateY(-6px);
}
.plan-reference-item:nth-child(3),
.plan-reference-item:nth-child(4){
  margin-top:20px;
}


/* =========================================================
   v3.4 adjustments
   ========================================================= */

/* ① Concept copy smaller like supplied reference */
.concept-ja{
  font-size:clamp(20px,2.15vw,31px) !important;
  letter-spacing:.02em;
}
.concept-en{
  font-size:clamp(11px,1.1vw,16px) !important;
  letter-spacing:.11em;
  color:#5f5751;
}

/* ② Explanatory/body text heavier site-wide */
p,
dd,
.faq-list p,
.flow-list p,
.profile-lead,
.profile-facts dd,
.section-heading p,
.gallery-title p,
.contact-box p,
.story-copy p,
.plan-hero-copy p,
.price-card p,
.price-card small,
.info-block p{
  font-weight:600;
}

/* Keep headings elegant rather than bold */
h1,h2,h3,
.section-label,
.section-subtitle,
.section-heading h2,
.gallery-title h2{
  font-weight:400;
}

/* ③ Plan photos smaller; remove left vertical text */
.plan-reference-item{
  min-height:315px;
}
.plan-reference-photo{
  width:66% !important;
}
.plan-reference-vertical{
  display:none !important;
}
.plan-reference-label{
  width:56%;
  bottom:3%;
}

/* ④ Gallery background white */
.gallery-section{
  background:#fff !important;
}

/* ⑤ Gallery images clickable */
.gallery-classic figure a{
  display:block;
  width:100%;
  height:100%;
}
.gallery-classic figure a img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ⑥ Plan detail buttons beige */
.plan-reference-btn{
  background:var(--beige) !important;
  color:#fff !important;
}

/* ⑧ Subtitle one size smaller than English heading */
.section-subtitle,
.section-heading h2,
.gallery-title h2{
  font-size:24px !important;
}
.section-label{
  font-size:32px !important;
}


/* =========================================================
   v3.5 — scroll-direction header
   ========================================================= */
.site-header{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  transform:translateY(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  will-change:transform;
}
.site-header.header-hidden{
  transform:translateY(-115%);
}
.site-header.header-visible{
  transform:translateY(0);
}

/* Hero returns underneath the floating header */
.hero-photo{
  margin-top:0 !important;
  height:100svh !important;
  min-height:650px;
}

/* ③ Subtitles another size smaller */
.section-subtitle,
.section-heading h2,
.gallery-title h2{
  font-size:20px !important;
}


/* =========================================================
   v3.6 contact updates
   ========================================================= */
.email-fallback{
  margin-top:20px;
  font-size:11px;
  line-height:1.8;
  color:#6f665f;
  font-weight:600;
}
.email-fallback a{
  display:inline-block;
  margin-top:4px;
  padding-bottom:2px;
  border-bottom:1px solid var(--beige);
  word-break:break-all;
}
.contact-email-fallback{
  text-align:center;
}


/* =========================================================
   v3.7
   ========================================================= */

/* Header Contact button can be a button element */
button.header-reserve{
  border:0;
  cursor:pointer;
  font-family:inherit;
}

/* Contact modal */
.contact-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
}
.contact-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.contact-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(43,38,34,.32);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.contact-modal-panel{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  max-height:calc(100dvh - 44px);
  overflow:auto;
  background:#fff;
  padding:48px 44px 40px;
  box-shadow:0 24px 70px rgba(48,40,34,.16);
}
.contact-modal-close{
  position:absolute;
  top:15px;
  right:18px;
  border:0;
  background:transparent;
  color:#423b36;
  font-size:28px;
  cursor:pointer;
}
.contact-modal-label{
  font:22px Georgia,"Times New Roman",serif;
  letter-spacing:.12em;
  margin-bottom:12px;
}
.contact-modal-panel h2{
  margin:0;
  font-size:20px;
  font-weight:400;
}
.contact-modal-lead{
  margin:20px 0 32px;
  font-size:12px;
  font-weight:600;
  color:#716861;
}
.contact-modal-options{
  border-top:1px solid var(--line);
}
.contact-modal-option{
  display:grid;
  grid-template-columns:42px 1fr 24px;
  gap:12px;
  align-items:center;
  padding:19px 0;
  border-bottom:1px solid var(--line);
}
.contact-modal-num{
  font:9px Georgia,"Times New Roman",serif;
  color:var(--beige-dark);
}
.contact-modal-option strong{
  display:block;
  font-size:13px;
  font-weight:600;
}
.contact-modal-option small{
  display:block;
  margin-top:3px;
  font-size:10px;
  font-weight:600;
  color:#8b8179;
}
.contact-modal-option b{
  justify-self:end;
  font-weight:400;
}
.contact-modal-email{
  margin:22px 0 0;
  text-align:right;
  font-size:10px;
  font-weight:600;
  color:#766c65;
}
body.modal-open{
  overflow:hidden;
}

/* Business email address: simple standalone line below button */
.business-email-address{
  margin:18px 0 0;
  text-align:center;
  font-size:12px;
  font-weight:600;
}
.business-email-address a{
  border-bottom:1px solid var(--beige);
  padding-bottom:2px;
}

/* ⑤ About page title: roughly 3 sizes smaller */
body .subpage .sub-hero .about-title-small{
  font-size:clamp(25px,3vw,40px);
}

/* Direct page-specific targeting */
body .subpage .sub-hero h1.about-page-title{
  font-size:clamp(25px,3vw,40px);
}

/* ⑥ Profile page title: compact, one-line on PC */
body .subpage .sub-hero h1.profile-page-title{
  font-size:clamp(24px,2.8vw,38px);
  white-space:nowrap;
}


/* =========================================================
   v3.8 — modal fix support / subpage title spacing
   ========================================================= */

/* ③④ More breathing room between English section name and main title */
.subpage-title-block .section-label{
  margin-bottom:42px !important;
}

.about-title-block .about-page-title,
.profile-title-block .profile-page-title{
  margin-top:0 !important;
}

/* About page no longer has final CTA, give story ending enough bottom space */
.pages-about-end-spacer{
  padding-bottom:100px;
}


/* =========================================================
   v3.9 — subpage spacing refinements
   ========================================================= */

/* About/Profile: increase space between English label and headline */
.about-title-block .section-label,
.profile-title-block .section-label{
  margin-bottom:64px !important;
}

/* Profile only: reduce space after "ありちゃんって、こんな人。" */
.profile-title-block{
  margin-bottom:24px !important;
}
.profile-title-block .profile-page-title{
  margin-bottom:0 !important;
}

/* v3.10 illustration marker comparison */
.section-mark.section-mark-illust{background:none!important;transform:none!important;width:62px!important;height:62px!important;left:-18px!important;top:-25px!important;opacity:.92;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;pointer-events:none}
.section-mark-girl{background-image:url("../assets/section-illust-girl.png")!important}
.section-mark-sitting{background-image:url("../assets/section-illust-sitting.png")!important}
.section-mark-flowers{background-image:url("../assets/section-illust-flowers.png")!important}


/* =========================================================
   v3.10.1 — illustration visibility fix
   Use real IMG elements instead of CSS background images.
   ========================================================= */
.section-mark.section-mark-illust{
  display:block !important;
  position:absolute !important;
  width:74px !important;
  height:74px !important;
  left:-10px !important;
  top:-29px !important;
  background:transparent !important;
  transform:none !important;
  overflow:visible !important;
  opacity:1 !important;
  z-index:2;
}
.section-mark.section-mark-illust img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
}
.section-title-top,
.section-heading.section-title-top{
  overflow:visible !important;
}


/* v3.10.2 — move section illustration left to avoid heading overlap */
.section-mark.section-mark-illust{
  left:-38px !important;
}

/* v3.11 */
.header-reserve{min-width:112px;text-align:center;justify-content:center}
.drawer-cta-two{grid-template-columns:1fr 1fr;gap:10px}.drawer-cta-two .btn{min-width:0;width:100%}
.drawer-reserve-trigger{border:1px solid var(--beige);font-family:inherit;cursor:pointer}
.menu-sep{color:#b9aea4;padding:0 3px}
.section-mark.section-mark-illust{width:64px!important;height:64px!important;left:-34px!important;top:-25px!important}
.section-mark.section-mark-illust img{width:100%!important;height:100%!important;object-fit:contain!important}
.profile-story-main.profile-story-main-small{max-width:440px!important;width:52%!important;margin-left:auto!important;margin-right:auto!important}
.contact-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.contact-modal-line{font-size:11px;font-weight:600;color:var(--beige-dark);border-bottom:1px solid var(--beige);padding-bottom:3px}
.contact-modal-mail{font-size:10px;font-weight:600;color:#766c65}


/* =========================================================
   v3.12
   ========================================================= */

/* ② LINE style drawer button */
.drawer-line-btn{
  display:grid !important;
  grid-template-columns:34px 1fr 20px;
  align-items:center;
  gap:10px;
  background:#fff !important;
  color:#4b4540 !important;
  border:1px solid #a9a39d !important;
  border-radius:6px !important;
  padding:10px 14px !important;
}
.line-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:#06c755;
  color:#fff;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:-.03em;
}
.drawer-line-btn > span:nth-child(2){
  font-size:13px;
  font-weight:600;
  text-align:left;
}
.drawer-btn-arrow{
  justify-self:end;
  font-size:18px;
  color:#777;
}

/* ③ Plan-page English/Japanese hero titles smaller */
.plan-hero .section-label{
  font-size:18px !important;
  letter-spacing:.12em;
}
.plan-hero h1{
  font-size:clamp(28px,3.4vw,46px) !important;
  line-height:1.35 !important;
}

/* ④ Location / Styling subtitles smaller than titles */
.plan-info .info-block .section-label{
  font-size:20px !important;
}
.plan-info .info-block h2{
  font-size:16px !important;
  margin-top:6px;
}

/* ④ Shichigosan options */
.option-section{
  padding:40px 0 90px;
}
.option-list{
  border-top:1px solid var(--line);
  max-width:760px;
}
.option-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.option-row h3{
  margin:0;
  font-size:15px;
  font-weight:400;
}
.option-row p{
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted);
}
.option-price{
  font-size:14px;
  white-space:nowrap;
}

/* v3.13 */
.line-icon-img{display:block;width:30px;height:30px;object-fit:contain}
.contact-modal-footer{border-top:0!important;margin-top:0!important;padding-top:18px!important}
.contact-modal-option:last-child{border-bottom:1px solid var(--line)}
.contact-modal-line{display:inline-flex;align-items:center;gap:10px}
.contact-modal-line img{width:28px;height:28px;object-fit:contain}
.drawer-cta-wrap.drawer-cta-two{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
.drawer-bottom-btn{width:100%;min-height:58px;padding:10px 16px;border:1px solid var(--beige);border-radius:7px;background:var(--beige);color:#fff;display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.drawer-bottom-btn img{width:30px;height:30px;object-fit:contain}.drawer-bottom-btn span{text-align:left}.drawer-bottom-btn b{justify-self:end;font-size:18px;font-weight:400}.drawer-bottom-reserve{grid-template-columns:1fr 20px}.drawer-bottom-reserve span{padding-left:6px}
.faq-list p{max-width:none!important}
.option-form-note{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.option-form-note p{margin:0 0 14px;font-size:11px;color:var(--muted)}


/* =========================================================
   v3.14 — Shichigosan options / rental props
   ========================================================= */
.option-section{
  padding-top:70px;
}
.option-section .section-heading p{
  margin-top:10px;
}

.option-list{
  max-width:860px;
}

.option-row{
  grid-template-columns:minmax(0,1fr) auto;
  padding:20px 0;
}

.option-row h3{
  font-size:14px;
  line-height:1.7;
}

.option-row p{
  margin-top:3px;
  font-size:10px;
}

.option-price{
  font-size:14px;
}

.rental-props-section{
  padding:80px 0 110px;
  background:#fff;
}

.rental-props-card{
  max-width:860px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:34px 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:end;
}

.rental-props-copy h3{
  margin:0 0 10px;
  font-size:17px;
  font-weight:400;
}

.rental-props-copy p{
  margin:0 0 22px;
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}

.rental-props-note{
  display:flex;
  align-items:center;
  gap:12px;
  font:10px Georgia,"Times New Roman",serif;
  letter-spacing:.12em;
  color:var(--beige-dark);
}

.rental-props-note b{
  font-size:16px;
  font-weight:400;
}


/* =========================================================
   v3.15
   ========================================================= */

/* ① Drawer inquiry: text -> LINE icon -> arrow */
.drawer-bottom-line{
  grid-template-columns:1fr 34px 20px !important;
}
.drawer-bottom-line span{
  text-align:left;
}
.drawer-bottom-line img{
  justify-self:end;
  width:28px;
  height:28px;
  object-fit:contain;
}

/* ② Detail page title marker */
.plan-hero-copy{
  position:relative;
}
.detail-title-marker{
  position:absolute;
  width:62px;
  height:62px;
  left:-42px;
  top:-34px;
  pointer-events:none;
}
.detail-title-marker img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ③ Option note: no extra divider/button */
.option-form-note{
  border-top:0 !important;
  padding-top:18px !important;
}
.option-list{
  border-bottom:0 !important;
}
.option-row:last-child{
  border-bottom:0 !important;
}

/* ④ Rental props with replaceable photo on right */
.rental-props-card{
  grid-template-columns:minmax(0,1fr) 220px !important;
  align-items:center !important;
}
.rental-props-photo{
  margin:0;
  width:220px;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f2eee8;
}
.rental-props-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ⑤ LINE icon on the right side of all official LINE buttons */
a[href="https://lin.ee/6SOziVg"]:not(.drawer-bottom-line):not(.contact-modal-line){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.line-link-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  flex:0 0 auto;
}


/* =========================================================
   v3.16
   ========================================================= */

/* ① Detail marker further left */
.detail-title-marker{
  left:-68px !important;
}

/* ② Official LINE buttons: white background, outline, icon on right */
.btn-line{
  background:#fff !important;
  color:var(--beige-dark) !important;
  border:1px solid var(--beige) !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn-line .line-link-icon{
  width:22px;
  height:22px;
}

/* Drawer LINE icon closer to text */
.drawer-bottom-line{
  grid-template-columns:auto 28px 20px !important;
  justify-content:start;
  column-gap:8px !important;
}
.drawer-bottom-line span{
  justify-self:start;
}
.drawer-bottom-line img{
  justify-self:start !important;
}

/* ③ Rental props image beside heading */
.rental-props-heading-row{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:30px;
  align-items:start;
  max-width:860px;
  margin-bottom:28px;
}
.rental-props-heading-row .section-heading{
  margin-bottom:0;
}
.rental-props-heading-photo{
  margin:0;
  width:180px;
  aspect-ratio:4/3;
  overflow:hidden;
}
.rental-props-heading-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rental-props-card{
  grid-template-columns:1fr !important;
}

/* ④ divider under last option + note immediately below */
.option-row:last-child{
  border-bottom:1px solid var(--line) !important;
}
.option-form-note{
  margin-top:0 !important;
  padding-top:14px !important;
}
.option-form-note p{
  margin-top:0 !important;
}

/* ⑤ Detail-page drawer inherits same layout as top */


/* =========================================================
   v3.17 — Drawer bottom CTA design only
   Reference: filled left button + outlined LINE right button
   Wording/order/links remain unchanged.
   ========================================================= */
.drawer-cta-wrap.drawer-cta-two{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  align-items:center;
}

/* Left: お問い合わせ */
.drawer-bottom-line{
  min-height:50px !important;
  border-radius:999px !important;
  background:var(--beige) !important;
  border:1px solid var(--beige) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:8px 16px !important;
}
.drawer-bottom-line span{
  text-align:center !important;
}
.drawer-bottom-line img{
  width:21px !important;
  height:21px !important;
  margin:0 !important;
  justify-self:auto !important;
}
.drawer-bottom-line b{
  display:none !important;
}

/* Right: webかんたん予約 */
.drawer-bottom-reserve{
  min-height:50px !important;
  border-radius:999px !important;
  background:#fff !important;
  border:1px solid var(--beige) !important;
  color:var(--beige-dark) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 16px !important;
}
.drawer-bottom-reserve span{
  padding-left:0 !important;
  text-align:center !important;
}
.drawer-bottom-reserve b{
  display:none !important;
}


/* =========================================================
   v3.18 — Drawer CTA colors reversed
   ========================================================= */

/* お問い合わせ：白背景＋ベージュ枠 */
.drawer-bottom-line{
  background:#fff !important;
  border:1px solid var(--beige) !important;
  color:var(--beige-dark) !important;
}

/* webかんたん予約：ベージュ背景 */
.drawer-bottom-reserve{
  background:var(--beige) !important;
  border:1px solid var(--beige) !important;
  color:#fff !important;
}


/* =========================================================
   v3.20 requested refinements
   ========================================================= */
/* ② Footer logo image */
.footer-logo-image-link{display:block;line-height:0;}
.footer-logo-image{display:block;width:105px;height:auto;object-fit:contain;object-position:left center;}

/* ⑤ More breathing room between gallery images */
.gallery-classic{gap:26px !important;}

/* ⑧ Final profile section label */
.profile-final-label{
  max-width:760px;
  margin:72px auto 18px;
  text-align:left;
  font:20px Georgia,"Times New Roman",serif;
  letter-spacing:.12em;
  color:var(--ink);
}

/* ⑨ Shichigosan CTA follows drawer visual order: LINE white, reservation beige */
.shichigosan-contact-actions .btn-line{order:1;}
.shichigosan-contact-actions .btn-fill{order:2;}


/* =========================================================
   v3.21 — requested refinements only
   ========================================================= */

/* ② Profile label and facts: reduce the empty gap */
.profile-final-label + .profile-facts-large{
  margin-top:10px !important;
}

/* ④ TOP section headings: use the same left edge */
#photographer > .wrap.section-title-top,
#plan .plan-reference-wrap > .section-title-top,
#flow .wrap > .section-title-top,
#faq .wrap > .section-title-top,
#gallery .gallery-wrap > .section-title-top,
#contact .wrap > .section-title-top{
  box-sizing:border-box;
}


/* =========================================================
   v3.22 — seven plan categories / standard plan pages
   ========================================================= */
.baby-types{
  margin-top:28px;
  display:grid;
  gap:10px;
}
.baby-types > div{
  padding:14px 0;
  border-top:1px solid var(--line);
}
.baby-types > div:last-child{
  border-bottom:1px solid var(--line);
}
.baby-types strong{
  display:block;
  font-size:14px;
  font-weight:600;
}
.baby-types span{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}
.option-box{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.option-box h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:400;
}
.option-box p{
  margin:4px 0;
  font-size:11px;
}


/* =========================================================
   v3.24 — standard plan price divider
   ========================================================= */
body.standard-plan-page .plan-detail-section .price-card:last-child{
  border-bottom:1px solid var(--line) !important;
}


/* =========================================================
   v3.30 — opening intro animation
   5 first-view photos -> message -> TOP
   ========================================================= */
.opening-intro{
  position:fixed;
  inset:0;
  z-index:1000;
  background:#fff;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  transition:opacity .95s cubic-bezier(.22,1,.36,1), visibility .95s ease;
}
.opening-intro.is-finished{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.opening-intro-photos,
.opening-intro-photo,
.opening-intro-photo picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.opening-intro-photo{
  opacity:0;
  transform:scale(1.025);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform 1.8s cubic-bezier(.22,1,.36,1);
}
.opening-intro-photo.is-active{
  opacity:1;
  transform:scale(1);
}
.opening-intro-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.opening-intro-photos.is-hidden{
  opacity:0;
  transition:opacity .85s cubic-bezier(.22,1,.36,1);
}
.opening-intro-message{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:#fff;
  opacity:0;
  visibility:hidden;
  transition:opacity .8s cubic-bezier(.22,1,.36,1), visibility .8s ease;
}
.opening-intro-message.is-visible{
  opacity:1;
  visibility:visible;
}
.opening-intro-message p{
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(24px,3.1vw,44px);
  font-weight:400;
  letter-spacing:.045em;
  line-height:1.6;
  opacity:0;
  transform:translateY(18px);
  filter:blur(4px);
}
.opening-intro-message.is-visible p{
  animation:openingMessageIn 1.15s cubic-bezier(.22,1,.36,1) .18s forwards;
}
@keyframes openingMessageIn{
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
body.opening-intro-running{
  overflow:hidden;
}
@media (prefers-reduced-motion:reduce){
  .opening-intro-photo,
  .opening-intro,
  .opening-intro-photos,
  .opening-intro-message{
    transition:none !important;
  }
  .opening-intro-message p{
    animation:none !important;
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* =========================================================
   v3.31 — opening splash layout/animation refinement
   Reference-inspired: white canvas + centered framed photography
   ========================================================= */
.opening-intro{
  background:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.opening-intro-photos{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

.opening-intro-photo{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity:0 !important;
  transform:none !important;
  transition:none !important;
}

.opening-intro-photo picture{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:min(46vw,720px) !important;
  height:min(66vh,720px) !important;
  overflow:hidden !important;
  background:#f4f1ed;
  opacity:0;
  transform:scale(1.035);
  clip-path:inset(0 100% 0 0);
  will-change:opacity,transform,clip-path;
}

.opening-intro-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.04);
  will-change:transform;
}

.opening-intro-photo.is-active{
  opacity:1 !important;
  z-index:2;
}

.opening-intro-photo.is-active picture{
  animation:
    openingFrameReveal .82s cubic-bezier(.76,0,.24,1) forwards,
    openingFrameHold 1.58s linear forwards;
}

.opening-intro-photo.is-active img{
  animation:openingImageDrift 1.58s cubic-bezier(.22,1,.36,1) forwards;
}

.opening-intro-photo.is-leaving{
  opacity:1 !important;
  z-index:1;
}
.opening-intro-photo.is-leaving picture{
  opacity:1;
  clip-path:inset(0 0 0 0);
  animation:openingFrameLeave .52s cubic-bezier(.76,0,.24,1) forwards;
}

@keyframes openingFrameReveal{
  0%{
    opacity:1;
    clip-path:inset(0 100% 0 0);
    transform:scale(1.035);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:scale(1);
  }
}
@keyframes openingFrameHold{
  0%,82%{opacity:1}
  100%{opacity:1}
}
@keyframes openingImageDrift{
  from{transform:scale(1.04)}
  to{transform:scale(1)}
}
@keyframes openingFrameLeave{
  from{
    opacity:1;
    clip-path:inset(0 0 0 0);
  }
  to{
    opacity:0;
    clip-path:inset(0 0 0 100%);
  }
}

/* Slight position/ratio variation for a more editorial splash */
.opening-intro-photo:nth-child(1) picture{
  width:min(43vw,660px) !important;
  height:min(68vh,740px) !important;
}
.opening-intro-photo:nth-child(2) picture{
  width:min(50vw,780px) !important;
  height:min(58vh,620px) !important;
}
.opening-intro-photo:nth-child(3) picture{
  width:min(40vw,630px) !important;
  height:min(70vh,760px) !important;
}
.opening-intro-photo:nth-child(4) picture{
  width:min(52vw,810px) !important;
  height:min(60vh,650px) !important;
}
.opening-intro-photo:nth-child(5) picture{
  width:min(44vw,690px) !important;
  height:min(66vh,720px) !important;
}

.opening-intro-message{
  background:#fff !important;
}
.opening-intro-message p{
  font-size:clamp(25px,2.5vw,38px) !important;
  letter-spacing:.08em !important;
  transform:none !important;
  filter:none !important;
}
.opening-intro-message.is-visible p{
  animation:openingMessageRefined 1.15s cubic-bezier(.22,1,.36,1) .05s forwards !important;
}
@keyframes openingMessageRefined{
  from{
    opacity:0;
    letter-spacing:.16em;
  }
  to{
    opacity:1;
    letter-spacing:.08em;
  }
}


/* =========================================================
   v3.32 — center-out opening reveal / smaller image frames
   ========================================================= */
.opening-intro-photo picture{
  width:min(15vw,240px) !important;
  height:min(22vh,240px) !important;
  opacity:0;
  transform:scale(.94);
  clip-path:inset(0 50% 0 50%);
}

.opening-intro-photo img{
  transform:scale(1.05);
}

.opening-intro-photo.is-active picture{
  animation:
    openingCenterReveal .95s cubic-bezier(.22,1,.36,1) forwards,
    openingCenterHold 1.58s linear forwards;
}

.opening-intro-photo.is-active img{
  animation:openingCenterImageDrift 1.58s cubic-bezier(.22,1,.36,1) forwards;
}

.opening-intro-photo.is-leaving picture{
  opacity:1;
  clip-path:inset(0 0 0 0);
  animation:openingCenterLeave .52s cubic-bezier(.76,0,.24,1) forwards;
}

@keyframes openingCenterReveal{
  0%{
    opacity:0;
    clip-path:inset(0 50% 0 50%);
    transform:scale(.94);
  }
  45%{
    opacity:1;
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:scale(1);
  }
}

@keyframes openingCenterHold{
  0%,82%{opacity:1}
  100%{opacity:1}
}

@keyframes openingCenterImageDrift{
  from{transform:scale(1.05)}
  to{transform:scale(1)}
}

@keyframes openingCenterLeave{
  from{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:scale(1);
  }
  to{
    opacity:0;
    clip-path:inset(0 50% 0 50%);
    transform:scale(.96);
  }
}

/* Keep small size consistent across all five frames */
.opening-intro-photo:nth-child(1) picture,
.opening-intro-photo:nth-child(2) picture,
.opening-intro-photo:nth-child(3) picture,
.opening-intro-photo:nth-child(4) picture,
.opening-intro-photo:nth-child(5) picture{
  width:min(15vw,240px) !important;
  height:min(22vh,240px) !important;
}


/* =========================================================
   v3.33 — smoother gradual center-out splash animation
   ========================================================= */

/* Keep v3.32 frame size, but soften every stage of the reveal */
.opening-intro-photo picture{
  opacity:0 !important;
  transform:scale(.975) !important;
  clip-path:inset(0 49.5% 0 49.5%) !important;
  filter:blur(2px);
  will-change:clip-path, opacity, transform, filter;
}

.opening-intro-photo.is-active picture{
  animation:openingSoftCenterReveal 1.72s cubic-bezier(.19,.78,.23,1) forwards !important;
}

.opening-intro-photo.is-active img{
  animation:openingSoftImageDrift 2.25s cubic-bezier(.18,.76,.25,1) forwards !important;
}

.opening-intro-photo.is-leaving picture{
  opacity:1 !important;
  clip-path:inset(0 0 0 0) !important;
  filter:blur(0);
  animation:openingSoftLeave .82s cubic-bezier(.45,0,.55,1) forwards !important;
}

/*
  Instead of jumping from a thin center strip to full width,
  pass through several intermediate widths. This makes the image
  appear to gradually bloom outward from its center.
*/
@keyframes openingSoftCenterReveal{
  0%{
    opacity:0;
    clip-path:inset(0 49.5% 0 49.5%);
    transform:scale(.975);
    filter:blur(2px);
  }
  12%{
    opacity:.20;
    clip-path:inset(0 46% 0 46%);
    transform:scale(.979);
    filter:blur(1.7px);
  }
  28%{
    opacity:.52;
    clip-path:inset(0 38% 0 38%);
    transform:scale(.984);
    filter:blur(1.2px);
  }
  48%{
    opacity:.78;
    clip-path:inset(0 26% 0 26%);
    transform:scale(.989);
    filter:blur(.7px);
  }
  68%{
    opacity:.93;
    clip-path:inset(0 13% 0 13%);
    transform:scale(.995);
    filter:blur(.25px);
  }
  84%{
    opacity:1;
    clip-path:inset(0 4% 0 4%);
    transform:scale(.999);
    filter:blur(0);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:scale(1);
    filter:blur(0);
  }
}

@keyframes openingSoftImageDrift{
  0%{ transform:scale(1.055); }
  40%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}

@keyframes openingSoftLeave{
  0%{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:scale(1);
    filter:blur(0);
  }
  35%{
    opacity:.84;
    clip-path:inset(0 6% 0 6%);
    transform:scale(.997);
  }
  70%{
    opacity:.42;
    clip-path:inset(0 23% 0 23%);
    transform:scale(.988);
    filter:blur(.8px);
  }
  100%{
    opacity:0;
    clip-path:inset(0 49.5% 0 49.5%);
    transform:scale(.978);
    filter:blur(2px);
  }
}


/* =========================================================
   v3.34 — recording-based amorétto-style dissolve
   ========================================================= */
.opening-intro-photo,
.opening-intro-photo.is-active,
.opening-intro-photo.is-leaving{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

.opening-intro-photo picture,
.opening-intro-photo.is-active picture,
.opening-intro-photo.is-leaving picture{
  width:min(15vw,240px) !important;
  height:min(22vh,240px) !important;
  opacity:0 !important;
  clip-path:none !important;
  transform:scale(1.015) !important;
  filter:blur(1.1px) !important;
  animation:none !important;
  transition:
    opacity 1.28s cubic-bezier(.37,0,.63,1),
    transform 1.65s cubic-bezier(.37,0,.63,1),
    filter 1.28s cubic-bezier(.37,0,.63,1) !important;
}

.opening-intro-photo.is-active picture{
  opacity:1 !important;
  transform:scale(1) !important;
  filter:blur(0) !important;
}

.opening-intro-photo.is-leaving picture{
  opacity:0 !important;
  transform:scale(.995) !important;
  filter:blur(.8px) !important;
}

/* The image itself stays calm; the dissolve happens on the frame. */
.opening-intro-photo img,
.opening-intro-photo.is-active img,
.opening-intro-photo.is-leaving img{
  transform:scale(1.01) !important;
  animation:none !important;
  transition:transform 2.8s cubic-bezier(.37,0,.63,1) !important;
}
.opening-intro-photo.is-active img{
  transform:scale(1) !important;
}

.opening-intro-photos.is-hidden{
  opacity:1 !important;
}

/* Copy appears with the same quiet dissolve after the fifth image. */
.opening-intro-message{
  opacity:0 !important;
  visibility:visible !important;
  transition:opacity 1.35s cubic-bezier(.37,0,.63,1) !important;
}
.opening-intro-message.is-visible{
  opacity:1 !important;
}
.opening-intro-message p,
.opening-intro-message.is-visible p{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
  font-size:clamp(25px,2.5vw,38px) !important;
  letter-spacing:.08em !important;
}

/* Final transition to the existing TOP is also a dissolve. */
.opening-intro{
  transition:opacity 1.25s cubic-bezier(.37,0,.63,1), visibility 1.25s ease !important;
}


/* =========================================================
   v3.35 — recording-tuned, jank-free opening
   ========================================================= */

/* ① Photo transitions use opacity only: no blur/scale/clip-path during playback. */
.opening-intro-photo,
.opening-intro-photo.is-active,
.opening-intro-photo.is-leaving{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

.opening-intro-photo picture,
.opening-intro-photo.is-active picture,
.opening-intro-photo.is-leaving picture{
  opacity:0 !important;
  clip-path:none !important;
  filter:none !important;
  transform:translateZ(0) !important;
  animation:none !important;
  transition:opacity .92s cubic-bezier(.42,0,.58,1) !important;
  backface-visibility:hidden;
  will-change:opacity;
}

.opening-intro-photo.is-active picture{
  opacity:1 !important;
}

.opening-intro-photo.is-leaving picture{
  opacity:0 !important;
}

.opening-intro-photo img,
.opening-intro-photo.is-active img,
.opening-intro-photo.is-leaving img{
  animation:none !important;
  transition:none !important;
  transform:none !important;
  filter:none !important;
  backface-visibility:hidden;
}

/* ② Initial state is pure white until JS explicitly starts photo 01. */
.opening-intro-photos{
  opacity:1 !important;
  background:#fff;
}

/* ④ Opening message reuses the exact TOP character animation. */
.opening-intro-message{
  opacity:0 !important;
  visibility:visible !important;
  background:#fff !important;
  transition:opacity .35s ease !important;
}
.opening-intro-message.is-visible{
  opacity:1 !important;
}
.opening-intro-copy{
  display:flex;
  align-items:center;
  justify-content:center;
}
.opening-intro-copy .concept-ja{
  margin:0;
  font-size:clamp(20px,2.15vw,31px) !important;
}

/* Neutralize the v3.34 paragraph animation because the copy is now an h2. */
.opening-intro-message p{
  animation:none !important;
}

/* Smooth final dissolve into the existing TOP page. */
.opening-intro{
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:opacity 1.05s cubic-bezier(.42,0,.58,1), visibility 1.05s ease !important;
}


/* =========================================================
   v3.36 — preserve each opening photo's native aspect ratio
   ========================================================= */
/*
  v3.35 forced every opening frame into one common box.
  v3.36 lets each image keep its own proportions and scales
  the rendered image to roughly one third of its intrinsic size.
*/
.opening-intro-photo picture,
.opening-intro-photo.is-active picture,
.opening-intro-photo.is-leaving picture{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
}

.opening-intro-photo img,
.opening-intro-photo.is-active img,
.opening-intro-photo.is-leaving img{
  width:auto !important;
  height:auto !important;
  max-width:min(34vw, 420px) !important;
  max-height:42vh !important;
  object-fit:contain !important;
}


/* =========================================================
   v3.38 — faster opening photo cadence
   ========================================================= */
.opening-intro-photo picture,
.opening-intro-photo.is-active picture,
.opening-intro-photo.is-leaving picture{
  transition:opacity .70s cubic-bezier(.42,0,.58,1) !important;
}


/* =========================================================
   v3.40 — individual sakura petals during opening message
   ========================================================= */
.opening-intro-message{
  overflow:hidden;
}

.opening-petals{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.opening-petal{
  position:absolute;
  top:-12vh;
  right:-8vw;
  width:14px;
  height:10px;
  opacity:0;
  border-radius:70% 30% 70% 30% / 60% 40% 60% 40%;
  background:
    radial-gradient(circle at 68% 30%, rgba(255,255,255,.9) 0 13%, transparent 14%),
    linear-gradient(145deg, rgba(255,236,241,.98), rgba(245,168,188,.92));
  box-shadow:inset -1px -1px 2px rgba(205,109,134,.14);
  transform-origin:center;
  will-change:transform, opacity;
}

.opening-intro-message.is-visible .opening-petal{
  animation-name:openingPetalFall;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

@keyframes openingPetalFall{
  0%{
    opacity:0;
    transform:
      translate3d(0,0,0)
      rotate(var(--rot-start))
      scale(var(--scale));
  }
  10%{
    opacity:var(--opacity);
  }
  30%{
    transform:
      translate3d(calc(-28vw + var(--sway-a)), 28vh, 0)
      rotate(calc(var(--rot-start) + 140deg))
      scale(var(--scale));
  }
  55%{
    transform:
      translate3d(calc(-58vw + var(--sway-b)), 56vh, 0)
      rotate(calc(var(--rot-start) + 290deg))
      scale(var(--scale));
  }
  80%{
    opacity:var(--opacity);
    transform:
      translate3d(calc(-90vw + var(--sway-c)), 84vh, 0)
      rotate(calc(var(--rot-start) + 470deg))
      scale(var(--scale));
  }
  100%{
    opacity:0;
    transform:
      translate3d(calc(-122vw + var(--sway-d)), 118vh, 0)
      rotate(calc(var(--rot-start) + 650deg))
      scale(var(--scale));
  }
}

/* Keep the text above the petals. */
.opening-intro-copy{
  position:relative;
  z-index:2;
}

@media (prefers-reduced-motion:reduce){
  .opening-petals{display:none !important;}
}


/* =========================================================
   v3.41 — 3-photo faster opening + realistic sakura petals
   ========================================================= */

/* Photo fade speed: roughly twice as fast as v3.40 */
.opening-intro-photo picture,
.opening-intro-photo.is-active picture,
.opening-intro-photo.is-leaving picture{
  transition:opacity .35s cubic-bezier(.42,0,.58,1) !important;
}

/* Replace the generic rounded shape with actual sakura-petal silhouettes. */
.opening-petal{
  width:18px !important;
  height:24px !important;
  border-radius:0 !important;
  background-color:transparent !important;
  box-shadow:none !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  filter:drop-shadow(0 1px 1px rgba(178,104,124,.10));
}

/* Four petal variants with a small notch, pink gradient and central vein. */
.opening-petal.petal-a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 58'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff8fb'/%3E%3Cstop offset='.58' stop-color='%23f7c6d3'/%3E%3Cstop offset='1' stop-color='%23e99bb0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M22 56C8 47 1 34 4 21 6 11 14 4 21 3c2 4 3 6 4 9 2-3 5-6 8-8 8 5 12 14 10 24-2 13-11 23-21 28Z' fill='url(%23g)'/%3E%3Cpath d='M22 52c-2-15-1-29 2-40' stroke='%23d9819a' stroke-width='1.2' opacity='.55' fill='none'/%3E%3C/svg%3E") !important;
}
.opening-petal.petal-b{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%23fffafb'/%3E%3Cstop offset='.52' stop-color='%23f5b7c8'/%3E%3Cstop offset='1' stop-color='%23e58da7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M48 24C45 10 35 3 25 4c-1 4-1 7-1 10-3-3-7-5-11-6-7 7-10 17-6 27 5 11 17 16 30 13 7-5 11-14 11-24Z' fill='url(%23g)'/%3E%3Cpath d='M42 26C30 25 20 28 11 37' stroke='%23cf728e' stroke-width='1.2' opacity='.5' fill='none'/%3E%3C/svg%3E") !important;
}
.opening-petal.petal-c{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.1' y1='.1' x2='.9' y2='.9'%3E%3Cstop offset='0' stop-color='%23fff7fa'/%3E%3Cstop offset='.62' stop-color='%23f6c4d0'/%3E%3Cstop offset='1' stop-color='%23e79aad'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M21 58C10 49 5 39 6 30 7 19 15 10 22 5 3 8 0 20 3 31c3 13 11 22 18 27Zm2-53c7 6 14 15 15 26 1 10-4 20-15 27 7-5 15-14 18-27 3-11 0-23-18-26Z' fill='url(%23g)'/%3E%3Cpath d='M22 53V13' stroke='%23d17d94' stroke-width='1' opacity='.45'/%3E%3C/svg%3E") !important;
}
.opening-petal.petal-d{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='.3' x2='1' y2='.7'%3E%3Cstop offset='0' stop-color='%23fff9fb'/%3E%3Cstop offset='.55' stop-color='%23f3b4c5'/%3E%3Cstop offset='1' stop-color='%23e58fa7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M55 21C47 9 36 4 26 7c-2 4-2 7-2 10-4-2-8-3-12-3-7 8-8 18-2 25 7 7 18 7 30 1 9-4 14-11 15-19Z' fill='url(%23g)'/%3E%3Cpath d='M49 22C35 20 24 23 13 33' stroke='%23d07891' stroke-width='1.2' opacity='.5' fill='none'/%3E%3C/svg%3E") !important;
}

/* More dimensional flutter, still moving upper-right -> lower-left. */
@keyframes openingPetalFall{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) rotate(var(--rot-start)) rotateY(0deg) scale(var(--scale));
  }
  10%{ opacity:var(--opacity); }
  24%{
    transform:translate3d(calc(-24vw + var(--sway-a)), 24vh, 0)
      rotate(calc(var(--rot-start) + 95deg)) rotateY(75deg) scale(var(--scale));
  }
  46%{
    transform:translate3d(calc(-50vw + var(--sway-b)), 48vh, 0)
      rotate(calc(var(--rot-start) + 210deg)) rotateY(155deg) scale(var(--scale));
  }
  68%{
    transform:translate3d(calc(-76vw + var(--sway-c)), 70vh, 0)
      rotate(calc(var(--rot-start) + 340deg)) rotateY(235deg) scale(var(--scale));
  }
  86%{
    opacity:var(--opacity);
    transform:translate3d(calc(-99vw + var(--sway-d)), 91vh, 0)
      rotate(calc(var(--rot-start) + 455deg)) rotateY(315deg) scale(var(--scale));
  }
  100%{
    opacity:0;
    transform:translate3d(-124vw, 116vh, 0)
      rotate(calc(var(--rot-start) + 590deg)) rotateY(390deg) scale(var(--scale));
  }
}


/* =========================================================
   v3.42 — slower photo fade-out / gentler sakura fall
   ========================================================= */

/* Keep the quick fade-in, but let the photo dissolve more slowly. */
.opening-intro-photo picture{
  transition:opacity .35s cubic-bezier(.42,0,.58,1) !important;
}
.opening-intro-photo.is-active picture{
  transition:opacity .35s cubic-bezier(.42,0,.58,1) !important;
}
.opening-intro-photo.is-leaving picture{
  transition:opacity .62s cubic-bezier(.37,0,.63,1) !important;
}

/*
  Sakura motion tuned to the uploaded reference video:
  - more vertical fall
  - slower overall travel
  - gentle left/right floating
  - softer 3D turn instead of fast spinning
*/
@keyframes openingPetalFall{
  0%{
    opacity:0;
    transform:
      translate3d(0, -4vh, 0)
      rotate(var(--rot-start))
      rotateY(0deg)
      scale(var(--scale));
  }
  8%{
    opacity:var(--opacity);
  }
  20%{
    transform:
      translate3d(calc(-8vw + var(--sway-a)), 18vh, 0)
      rotate(calc(var(--rot-start) + 35deg))
      rotateY(38deg)
      scale(var(--scale));
  }
  38%{
    transform:
      translate3d(calc(-15vw + var(--sway-b)), 38vh, 0)
      rotate(calc(var(--rot-start) + 78deg))
      rotateY(88deg)
      scale(var(--scale));
  }
  58%{
    transform:
      translate3d(calc(-24vw + var(--sway-c)), 61vh, 0)
      rotate(calc(var(--rot-start) + 128deg))
      rotateY(145deg)
      scale(var(--scale));
  }
  78%{
    opacity:var(--opacity);
    transform:
      translate3d(calc(-32vw + var(--sway-d)), 84vh, 0)
      rotate(calc(var(--rot-start) + 178deg))
      rotateY(208deg)
      scale(var(--scale));
  }
  100%{
    opacity:0;
    transform:
      translate3d(calc(-40vw + var(--sway-a)), 116vh, 0)
      rotate(calc(var(--rot-start) + 230deg))
      rotateY(270deg)
      scale(var(--scale));
  }
}


/* =========================================================
   v3.43 — matched fades + refined translucent sakura petals
   ========================================================= */

/* Fade-in and fade-out use exactly the same duration/easing. */
.opening-intro-photo picture,
.opening-intro-photo.is-active picture,
.opening-intro-photo.is-leaving picture{
  transition:opacity .62s cubic-bezier(.37,0,.63,1) !important;
}

/* More delicate petal rendering: translucent, irregular, soft-edged. */
.opening-petal{
  width:20px !important;
  height:26px !important;
  opacity:0;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  filter:drop-shadow(0 .6px .7px rgba(151,89,105,.08));
}

/* Petals modeled as thin, slightly irregular cherry petals rather than icons. */
.opening-petal.petal-a{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 68'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.18' y1='.05' x2='.82' y2='.95'%3E%3Cstop stop-color='%23fffdfd' stop-opacity='.82'/%3E%3Cstop offset='.46' stop-color='%23f9dce3' stop-opacity='.82'/%3E%3Cstop offset='1' stop-color='%23eeb6c5' stop-opacity='.88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M27 65C17 58 8 48 6 37 3 24 9 11 20 5c3 4 5 8 7 13 2-5 5-9 9-13 10 7 15 19 12 31-3 13-11 23-21 29Z' fill='url(%23a)'/%3E%3Cpath d='M27 60c-1-13-1-27 0-41' fill='none' stroke='%23d99aaa' stroke-opacity='.28' stroke-width='.9'/%3E%3C/svg%3E") !important;
}
.opening-petal.petal-b{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 52'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='.05' y1='.2' x2='.95' y2='.8'%3E%3Cstop stop-color='%23fffefe' stop-opacity='.8'/%3E%3Cstop offset='.5' stop-color='%23f7d5de' stop-opacity='.84'/%3E%3Cstop offset='1' stop-color='%23eca9bc' stop-opacity='.88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M62 24C56 12 45 5 33 6c-5 0-9 2-13 5-4-1-8-1-12 0-5 10-3 22 5 30 9 8 23 8 34 2 9-5 14-11 15-19Z' fill='url(%23b)'/%3E%3Cpath d='M55 25C41 23 27 27 15 37' fill='none' stroke='%23d48fa2' stroke-opacity='.27' stroke-width='.9'/%3E%3C/svg%3E") !important;
}
.opening-petal.petal-c{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 70'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='.2' y1='.05' x2='.75' y2='.95'%3E%3Cstop stop-color='%23fffefe' stop-opacity='.78'/%3E%3Cstop offset='.55' stop-color='%23f8d9e1' stop-opacity='.83'/%3E%3Cstop offset='1' stop-color='%23efb3c3' stop-opacity='.88'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M24 67C12 59 5 48 5 36 5 22 13 10 22 4c2 5 3 9 3 14 3-5 6-9 10-12 8 8 11 21 7 33-4 13-10 21-18 28Z' fill='url(%23c)'/%3E%3Cpath d='M24 62c0-15 0-29 1-43' fill='none' stroke='%23d798a9' stroke-opacity='.25' stroke-width='.85'/%3E%3C/svg%3E") !important;
}
.opening-petal.petal-d{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 54'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='.08' y1='.1' x2='.9' y2='.9'%3E%3Cstop stop-color='%23fffdfd' stop-opacity='.8'/%3E%3Cstop offset='.52' stop-color='%23f8d8e0' stop-opacity='.82'/%3E%3Cstop offset='1' stop-color='%23ecafc0' stop-opacity='.87'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M58 22C51 10 39 5 28 7c-5 1-8 3-11 6-4 0-8 1-11 3-2 11 3 22 13 28 10 6 23 3 32-5 7-6 9-11 7-17Z' fill='url(%23d)'/%3E%3Cpath d='M52 23C39 23 27 28 16 39' fill='none' stroke='%23d18b9f' stroke-opacity='.25' stroke-width='.9'/%3E%3C/svg%3E") !important;
}

/* Perspective makes the slow Y rotation read as a thin petal flipping in air. */
.opening-petals{
  perspective:700px;
}


/* =========================================================
   v3.46 — based on v3.43
   Sakura: earlier start + stronger drift to lower-left
   ========================================================= */

/* Keep v3.43 petal artwork; only alter motion path. */
@keyframes openingPetalFall{
  0%{
    opacity:0;
    transform:
      translate3d(0,-4vh,0)
      rotate(var(--rot-start))
      rotateY(0deg)
      scale(var(--scale));
  }
  8%{
    opacity:var(--opacity);
  }
  20%{
    transform:
      translate3d(calc(-12vw + var(--sway-a)), 17vh, 0)
      rotate(calc(var(--rot-start) + 34deg))
      rotateY(34deg)
      scale(var(--scale));
  }
  38%{
    transform:
      translate3d(calc(-24vw + var(--sway-b)), 37vh, 0)
      rotate(calc(var(--rot-start) + 74deg))
      rotateY(82deg)
      scale(var(--scale));
  }
  58%{
    transform:
      translate3d(calc(-40vw + var(--sway-c)), 60vh, 0)
      rotate(calc(var(--rot-start) + 120deg))
      rotateY(137deg)
      scale(var(--scale));
  }
  78%{
    opacity:var(--opacity);
    transform:
      translate3d(calc(-58vw + var(--sway-d)), 83vh, 0)
      rotate(calc(var(--rot-start) + 168deg))
      rotateY(198deg)
      scale(var(--scale));
  }
  100%{
    opacity:0;
    transform:
      translate3d(calc(-78vw + var(--sway-a)), 116vh, 0)
      rotate(calc(var(--rot-start) + 218deg))
      rotateY(258deg)
      scale(var(--scale));
  }
}

/* Allow sakura to begin before the copy itself becomes visible. */
.opening-intro-message.is-petal-prestart .opening-petal,
.opening-intro-message.is-visible .opening-petal{
  animation-name:openingPetalFall;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}


/* =========================================================
   v3.47 — slower photo fade-out / faster, more dimensional sakura
   ========================================================= */

/* Keep fade-in as v3.46, extend only fade-out. */
.opening-intro-photo picture,
.opening-intro-photo.is-active picture{
  transition:opacity .62s cubic-bezier(.37,0,.63,1) !important;
}
.opening-intro-photo.is-leaving picture{
  transition:opacity .82s cubic-bezier(.37,0,.63,1) !important;
}

/* Add more depth without changing the v3.43 petal base artwork. */
.opening-petals{
  perspective:1200px !important;
  transform-style:preserve-3d;
}

.opening-petal{
  transform-style:preserve-3d;
  backface-visibility:visible;
  filter:
    drop-shadow(0 1px 1.2px rgba(130,75,92,.10))
    drop-shadow(0 3px 5px rgba(175,112,132,.06)) !important;
}

/* Faster travel, with clearer 3D flips and depth changes. */
@keyframes openingPetalFall{
  0%{
    opacity:0;
    transform:
      translate3d(0,-5vh,var(--depth))
      rotateZ(var(--rot-start))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      scale(var(--scale));
  }
  7%{
    opacity:var(--opacity);
  }
  20%{
    transform:
      translate3d(calc(-14vw + var(--sway-a)), 19vh, calc(var(--depth) * .82))
      rotateZ(calc(var(--rot-start) + 42deg))
      rotateX(calc(var(--tilt-x) + 42deg))
      rotateY(calc(var(--tilt-y) + 58deg))
      scale(var(--scale));
  }
  40%{
    transform:
      translate3d(calc(-30vw + var(--sway-b)), 43vh, calc(var(--depth) * .55))
      rotateZ(calc(var(--rot-start) + 88deg))
      rotateX(calc(var(--tilt-x) + 92deg))
      rotateY(calc(var(--tilt-y) + 128deg))
      scale(var(--scale));
  }
  61%{
    transform:
      translate3d(calc(-48vw + var(--sway-c)), 68vh, calc(var(--depth) * .28))
      rotateZ(calc(var(--rot-start) + 138deg))
      rotateX(calc(var(--tilt-x) + 148deg))
      rotateY(calc(var(--tilt-y) + 202deg))
      scale(var(--scale));
  }
  81%{
    opacity:var(--opacity);
    transform:
      translate3d(calc(-65vw + var(--sway-d)), 92vh, 0)
      rotateZ(calc(var(--rot-start) + 188deg))
      rotateX(calc(var(--tilt-x) + 208deg))
      rotateY(calc(var(--tilt-y) + 282deg))
      scale(var(--scale));
  }
  100%{
    opacity:0;
    transform:
      translate3d(calc(-84vw + var(--sway-a)), 118vh, -40px)
      rotateZ(calc(var(--rot-start) + 238deg))
      rotateX(calc(var(--tilt-x) + 268deg))
      rotateY(calc(var(--tilt-y) + 362deg))
      scale(var(--scale));
  }
}


/* =========================================================
   v3.49 — TOP reveal during sakura + smoother petal path
   ========================================================= */

/* The TOP page already exists underneath the fixed intro layer.
   Gradually make the white intro background transparent midway through the sakura animation. */
.opening-intro{
  background-color:rgba(255,255,255,1) !important;
  transition:
    background-color 1.9s cubic-bezier(.22,1,.36,1),
    opacity 1.05s cubic-bezier(.42,0,.58,1),
    visibility 1.05s ease !important;
}

.opening-intro-message{
  background:transparent !important;
}

.opening-intro.is-revealing-top{
  background-color:rgba(255,255,255,0) !important;
}

/* Fade the slogan away while TOP appears, but let sakura remain on top. */
.opening-intro.is-revealing-top .opening-intro-copy{
  opacity:0;
  transition:opacity 1.15s cubic-bezier(.22,1,.36,1);
}

.opening-intro.is-revealing-top .opening-petals{
  opacity:1 !important;
}

/* Performance / smoothness */
.opening-petal{
  will-change:transform, opacity;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}

/* Extra interpolation points for a softer arc and less visible stepping. */
@keyframes openingPetalFall{
  0%{
    opacity:0;
    transform:
      translate3d(0,-5vh,var(--depth))
      rotateZ(var(--rot-start))
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      scale(var(--scale));
  }
  6%{ opacity:var(--opacity); }

  14%{
    transform:
      translate3d(calc(-8vw + var(--sway-a)), 11vh, calc(var(--depth) * .92))
      rotateZ(calc(var(--rot-start) + 24deg))
      rotateX(calc(var(--tilt-x) + 22deg))
      rotateY(calc(var(--tilt-y) + 31deg))
      scale(var(--scale));
  }
  24%{
    transform:
      translate3d(calc(-16vw + var(--sway-b)), 23vh, calc(var(--depth) * .80))
      rotateZ(calc(var(--rot-start) + 49deg))
      rotateX(calc(var(--tilt-x) + 45deg))
      rotateY(calc(var(--tilt-y) + 65deg))
      scale(var(--scale));
  }
  35%{
    transform:
      translate3d(calc(-25vw + var(--sway-c)), 36vh, calc(var(--depth) * .66))
      rotateZ(calc(var(--rot-start) + 76deg))
      rotateX(calc(var(--tilt-x) + 72deg))
      rotateY(calc(var(--tilt-y) + 103deg))
      scale(var(--scale));
  }
  46%{
    transform:
      translate3d(calc(-34vw + var(--sway-d)), 49vh, calc(var(--depth) * .50))
      rotateZ(calc(var(--rot-start) + 105deg))
      rotateX(calc(var(--tilt-x) + 101deg))
      rotateY(calc(var(--tilt-y) + 145deg))
      scale(var(--scale));
  }
  58%{
    transform:
      translate3d(calc(-44vw + var(--sway-b)), 63vh, calc(var(--depth) * .34))
      rotateZ(calc(var(--rot-start) + 136deg))
      rotateX(calc(var(--tilt-x) + 133deg))
      rotateY(calc(var(--tilt-y) + 190deg))
      scale(var(--scale));
  }
  70%{
    transform:
      translate3d(calc(-54vw + var(--sway-c)), 77vh, calc(var(--depth) * .20))
      rotateZ(calc(var(--rot-start) + 167deg))
      rotateX(calc(var(--tilt-x) + 166deg))
      rotateY(calc(var(--tilt-y) + 238deg))
      scale(var(--scale));
  }
  82%{
    opacity:var(--opacity);
    transform:
      translate3d(calc(-64vw + var(--sway-a)), 91vh, calc(var(--depth) * .08))
      rotateZ(calc(var(--rot-start) + 198deg))
      rotateX(calc(var(--tilt-x) + 201deg))
      rotateY(calc(var(--tilt-y) + 289deg))
      scale(var(--scale));
  }
  92%{
    opacity:calc(var(--opacity) * .62);
    transform:
      translate3d(calc(-74vw + var(--sway-d)), 104vh, 0)
      rotateZ(calc(var(--rot-start) + 224deg))
      rotateX(calc(var(--tilt-x) + 230deg))
      rotateY(calc(var(--tilt-y) + 333deg))
      scale(var(--scale));
  }
  100%{
    opacity:0;
    transform:
      translate3d(calc(-84vw + var(--sway-b)), 118vh, -30px)
      rotateZ(calc(var(--rot-start) + 246deg))
      rotateX(calc(var(--tilt-x) + 255deg))
      rotateY(calc(var(--tilt-y) + 371deg))
      scale(var(--scale));
  }
}


/* =========================================================
   v3.50 — smoother sakura motion / hero slideshow hold
   ========================================================= */

/* The petals are animated with Web Animations API.
   Avoid competing CSS animations that can cause visible speed changes. */
.opening-intro-message.is-petal-prestart .opening-petal,
.opening-intro-message.is-visible .opening-petal,
.opening-petal{
  animation:none !important;
}

/* Fixed local origin; all travel happens via compositor-friendly transform. */
.opening-petal{
  top:0 !important;
  left:0 !important;
  right:auto !important;
  opacity:0;
  will-change:transform, opacity;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  contain:layout paint style;
}


/* =========================================================
   v3.51 — prevent vortex-like synchronized CSS motion
   ========================================================= */
.opening-petal{
  animation:none !important;
}


/* =========================================================
   v3.52 — earlier TOP reveal / synchronized slogan+sakura fade
   ========================================================= */

/* Fade slogan and sakura out together when TOP begins to reveal. */
.opening-intro.is-revealing-top .opening-intro-copy{
  opacity:0 !important;
  transition:opacity .9s cubic-bezier(.22,1,.36,1) !important;
}

.opening-intro.is-revealing-top .opening-petals{
  opacity:0 !important;
  transition:opacity .9s cubic-bezier(.22,1,.36,1) !important;
}

/* Reveal the TOP a little faster. */
.opening-intro{
  transition:
    background-color 1.25s cubic-bezier(.22,1,.36,1),
    opacity .85s cubic-bezier(.42,0,.58,1),
    visibility .85s ease !important;
}


/* =========================================================
   v3.53 — longer sakura fade-out
   ========================================================= */
.opening-intro.is-revealing-top .opening-petals{
  opacity:0 !important;
  transition:opacity 2.9s cubic-bezier(.22,1,.36,1) !important;
}


/* =========================================================
   v3.54 — sakura fade-out +1 second
   ========================================================= */
.opening-intro.is-revealing-top .opening-petals{
  opacity:0 !important;
  transition:opacity 3.9s cubic-bezier(.22,1,.36,1) !important;
}


/* =========================================================
   v3.55 — sakura fade-out +1 second
   ========================================================= */
.opening-intro.is-revealing-top .opening-petals{
  opacity:0 !important;
  transition:opacity 4.9s cubic-bezier(.22,1,.36,1) !important;
}


/* =========================================================
   v3.56 — faster handoff after sakura finishes
   ========================================================= */
.opening-intro.is-finished{
  transition:
    opacity .32s ease,
    visibility .32s ease !important;
}


/* =========================================================
   v3.57 — eliminate lingering white screen
   ========================================================= */

/* TOP should become visible quickly once the handoff starts. */
.opening-intro.is-revealing-top{
  background-color:rgba(255,255,255,0) !important;
  transition:background-color .75s cubic-bezier(.22,1,.36,1) !important;
}

/* Final overlay cleanup should not create another white pause. */
.opening-intro.is-finished{
  opacity:0 !important;
  visibility:hidden !important;
  background:transparent !important;
  transition:opacity .12s linear, visibility .12s linear !important;
}


/* =========================================================
   v3.59 — gradual slogan fade-out like opening photos
   ========================================================= */

/* Match the slogan fade-out to the photo dissolve feel. */
.opening-intro-copy{
  opacity:1;
  transition:opacity .82s cubic-bezier(.37,0,.63,1) !important;
}

.opening-intro.is-revealing-top .opening-intro-copy{
  opacity:0 !important;
  transition:opacity .82s cubic-bezier(.37,0,.63,1) !important;
}


/* =========================================================
   v3.60 — slower opening slogan fade-in
   ========================================================= */

/* Keep the current fade-out, but make the initial appearance gentler/slower. */
.opening-intro-copy{
  transition:opacity 1.35s cubic-bezier(.22,1,.36,1) !important;
}

/* Preserve v3.59's photo-like fade-out speed. */
.opening-intro.is-revealing-top .opening-intro-copy{
  transition:opacity .82s cubic-bezier(.37,0,.63,1) !important;
}


/* =========================================================
   v3.63 — parallax depth polish
   ========================================================= */
.opening-petals{
  perspective:1200px;
  transform-style:preserve-3d;
}
.opening-petal{
  transform-style:preserve-3d;
}


/* =========================================================
   v3.65 — actual TOP page slides in from above
   ========================================================= */

.site-stage{
  position:relative;
  z-index:0;
  transform:translate3d(0,0,0);
  opacity:1;
}

/* While the opening is running, keep the real page one viewport above. */
body.opening-intro-running .site-stage{
  transform:translate3d(0,-100vh,0);
  opacity:1;
  will-change:transform;
}

/* At the handoff, move the real TOP page itself downward into place. */
body.opening-intro-running.top-page-enter .site-stage{
  transform:translate3d(0,0,0);
  transition:transform 1.35s cubic-bezier(.22,1,.36,1);
}

/* Make the opening background transparent during the slide-in,
   while keeping petals/copy available above it. */
.opening-intro.is-revealing-top{
  background-color:rgba(255,255,255,0) !important;
  transition:background-color .28s ease !important;
}

.opening-intro.is-revealing-top .opening-intro-copy{
  opacity:0 !important;
}

.opening-intro.is-revealing-top .opening-petals{
  opacity:0 !important;
}


/* =========================================================
   v3.66 — white curtain peels away from top to bottom
   ========================================================= */

/* Cancel v3.65 TOP-page slide behavior. */
.site-stage{
  transform:none !important;
  opacity:1 !important;
}
body.opening-intro-running .site-stage,
body.opening-intro-running.top-page-enter .site-stage{
  transform:none !important;
  transition:none !important;
}

/* The opening overlay itself is transparent.
   A separate white curtain controls the final handoff. */
.opening-intro{
  background:transparent !important;
}

.opening-white-curtain{
  position:absolute;
  inset:0;
  z-index:0;
  background:#fff;
  transform:scaleY(1);
  transform-origin:center bottom;
  will-change:transform;
  pointer-events:none;
}

/* Keep the intro photos and message above the curtain. */
.opening-intro-photos{
  z-index:1;
}
.opening-intro-message{
  z-index:2;
}

/*
  Shrinking from the bottom origin clears the TOP of the screen first,
  so the real TOP page is revealed progressively from top -> bottom.
*/
.opening-intro.is-peeling-white .opening-white-curtain{
  transform:scaleY(0);
  transition:transform 1.65s cubic-bezier(.22,1,.36,1);
}

/* Fade copy/petals out before the white curtain begins to peel. */
.opening-intro.is-preparing-peel .opening-intro-copy,
.opening-intro.is-preparing-peel .opening-petals{
  opacity:0 !important;
  transition:opacity .9s cubic-bezier(.37,0,.63,1) !important;
}

/* Final cleanup only; don't reintroduce another white fade. */
.opening-intro.is-finished{
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .15s linear, visibility .15s linear !important;
}


/* =========================================================
   v3.67 — make the white-curtain peel actually visible
   ========================================================= */

/*
  v3.66 still had a full-screen white background on
  .opening-intro-message from older versions.
  That white layer sat ABOVE the curtain, so the curtain could
  shrink without the user seeing the reveal underneath.
*/
.opening-intro-message{
  background:transparent !important;
}

/* The curtain is now the ONLY full-screen white layer during
   the slogan/sakura phase and final handoff. */
.opening-white-curtain{
  z-index:0 !important;
}

/* Photos and message stay above the curtain until they fade. */
.opening-intro-photos{
  z-index:1 !important;
}
.opening-intro-message{
  z-index:2 !important;
}

/* Make sure no inherited intro background hides the TOP page. */
.opening-intro,
.opening-intro.is-preparing-peel,
.opening-intro.is-peeling-white{
  background:transparent !important;
}

/* During the peel, the content above the curtain must no longer
   form an opaque layer. */
.opening-intro.is-peeling-white .opening-intro-message,
.opening-intro.is-peeling-white .opening-intro-photos{
  background:transparent !important;
}

/*
  Clear visual peel:
  white remains full screen, then its TOP edge moves downward
  over 1.65s, progressively exposing the actual TOP page.
*/
.opening-intro.is-peeling-white .opening-white-curtain{
  transform:scaleY(0) !important;
  transform-origin:center bottom !important;
  transition:transform 1.65s cubic-bezier(.22,1,.36,1) !important;
}


/* =========================================================
   v3.68 — prevent scrollbar layout shift after opening
   ========================================================= */

/*
  Keep the vertical scrollbar gutter reserved from the very beginning.
  On Windows, the scrollbar appearing only after the opening ended
  caused the page width to change for one frame.
*/
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
}

/* During the opening, lock only BODY scrolling.
   The HTML scrollbar gutter stays reserved, so the viewport width
   does not jump when normal scrolling is restored. */
body.opening-intro-running{
  overflow:hidden;
}

/* Avoid accidental horizontal movement from 100vw-based effects. */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}


/* =========================================================
   v3.70 — top-to-bottom translucent white fade reveal
   based directly on v3.68
   ========================================================= */

/*
  Instead of "peeling" or hard clipping, the final white screen
  fades away progressively from the TOP toward the BOTTOM.

  The solid white panel moves downward.
  A soft translucent gradient follows its upper edge, so the TOP
  page gradually becomes visible rather than appearing abruptly.
*/
.opening-intro{
  background:transparent !important;
}

.opening-white-curtain{
  position:absolute;
  inset:0;
  z-index:0;
  background:transparent !important;
  overflow:visible;
  pointer-events:none;
}

/* Solid white area that still hides the page below. */
.opening-white-curtain::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(100% + 180px);
  background:#fff;
  transform:translate3d(0,0,0);
  will-change:transform;
}

/*
  Soft fade band attached above the white area.
  As it travels downward, the TOP page becomes increasingly visible
  through this band: transparent -> translucent -> white.
*/
.opening-white-curtain::after{
  content:"";
  position:absolute;
  left:0;
  top:-180px;
  width:100%;
  height:180px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 18%,
    rgba(255,255,255,.32) 42%,
    rgba(255,255,255,.66) 70%,
    rgba(255,255,255,1) 100%
  );
  transform:translate3d(0,0,0);
  will-change:transform;
}

/* Keep photos/message above the curtain until they finish. */
.opening-intro-photos{
  z-index:1 !important;
}
.opening-intro-message{
  z-index:2 !important;
  background:transparent !important;
}

/*
  Reveal starts at the very top and moves to the bottom.
  Both the solid white panel and the soft gradient band travel together.
*/
.opening-intro.is-peeling-white .opening-white-curtain::before,
.opening-intro.is-peeling-white .opening-white-curtain::after{
  transform:translate3d(0,calc(100vh + 180px),0);
  transition:transform 1.75s cubic-bezier(.22,1,.36,1);
}

/* No extra hard fade after the progressive reveal finishes. */
.opening-intro.is-finished{
  opacity:0 !important;
  visibility:hidden !important;
  background:transparent !important;
  transition:opacity .12s linear, visibility .12s linear !important;
}

@media(max-width:800px){
  .opening-white-curtain::before{
    height:calc(100% + 140px);
  }

  .opening-white-curtain::after{
    top:-140px;
    height:140px;
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 20%,
      rgba(255,255,255,.34) 46%,
      rgba(255,255,255,.70) 74%,
      rgba(255,255,255,1) 100%
    );
  }

  .opening-intro.is-peeling-white .opening-white-curtain::before,
  .opening-intro.is-peeling-white .opening-white-curtain::after{
    transform:translate3d(0,calc(100vh + 140px),0);
  }
}


/* =========================================================
   v3.71 — sunlight / overexposure fade into TOP
   ========================================================= */

/* Disable the v3.70 top-to-bottom reveal mechanism. */
.opening-white-curtain::before,
.opening-white-curtain::after{
  transform:none !important;
  transition:none !important;
}

/*
  White screen fades like an overexposed photograph:
  first a soft sunlight bloom appears, then the whole white veil
  gradually loses opacity and the TOP page comes through.
*/
.opening-white-curtain{
  position:absolute;
  inset:0;
  z-index:0;
  background:#fff !important;
  opacity:1;
  overflow:hidden;
  pointer-events:none;
  will-change:opacity, filter;
}

/* Main sunlight bloom */
.opening-white-curtain::before{
  content:"";
  position:absolute;
  inset:-30%;
  width:auto !important;
  height:auto !important;
  background:
    radial-gradient(
      circle at 28% 18%,
      rgba(255,255,255,1) 0%,
      rgba(255,252,243,.98) 13%,
      rgba(255,246,223,.72) 27%,
      rgba(255,248,235,.28) 46%,
      rgba(255,255,255,0) 68%
    ) !important;
  opacity:0;
  filter:blur(10px);
  transform:scale(.72) !important;
  transform-origin:28% 18%;
  will-change:opacity, transform, filter;
}

/* A second, broader haze for a natural backlit-photo feel */
.opening-white-curtain::after{
  content:"";
  position:absolute;
  inset:-22%;
  width:auto !important;
  height:auto !important;
  background:
    radial-gradient(
      ellipse at 36% 30%,
      rgba(255,255,255,.88) 0%,
      rgba(255,248,230,.50) 30%,
      rgba(255,255,255,.10) 58%,
      rgba(255,255,255,0) 78%
    ) !important;
  opacity:0;
  filter:blur(22px);
  transform:scale(.82) !important;
  transform-origin:36% 30%;
  will-change:opacity, transform, filter;
}

.opening-intro.is-peeling-white .opening-white-curtain{
  animation:sunlitCurtainFade 2.15s cubic-bezier(.22,1,.36,1) forwards;
}

.opening-intro.is-peeling-white .opening-white-curtain::before{
  animation:sunlightBloom 2.15s cubic-bezier(.22,1,.36,1) forwards;
}

.opening-intro.is-peeling-white .opening-white-curtain::after{
  animation:sunlightHaze 2.15s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes sunlitCurtainFade{
  0%{
    opacity:1;
    filter:brightness(1);
  }
  20%{
    opacity:.98;
    filter:brightness(1.05);
  }
  46%{
    opacity:.82;
    filter:brightness(1.10);
  }
  70%{
    opacity:.46;
    filter:brightness(1.05);
  }
  88%{
    opacity:.16;
    filter:brightness(1.01);
  }
  100%{
    opacity:0;
    filter:brightness(1);
  }
}

@keyframes sunlightBloom{
  0%{
    opacity:0;
    transform:scale(.72) !important;
    filter:blur(14px);
  }
  18%{
    opacity:.24;
  }
  42%{
    opacity:.72;
    transform:scale(1.02) !important;
    filter:blur(9px);
  }
  66%{
    opacity:.92;
    transform:scale(1.38) !important;
    filter:blur(7px);
  }
  84%{
    opacity:.42;
    transform:scale(1.68) !important;
    filter:blur(10px);
  }
  100%{
    opacity:0;
    transform:scale(1.92) !important;
    filter:blur(14px);
  }
}

@keyframes sunlightHaze{
  0%{
    opacity:0;
    transform:scale(.82) !important;
  }
  28%{
    opacity:.18;
  }
  56%{
    opacity:.56;
    transform:scale(1.12) !important;
  }
  78%{
    opacity:.28;
    transform:scale(1.34) !important;
  }
  100%{
    opacity:0;
    transform:scale(1.48) !important;
  }
}

/* No directional wipe; TOP simply emerges through the light. */
.opening-intro.is-peeling-white{
  background:transparent !important;
}

@media(max-width:800px){
  .opening-white-curtain::before{
    background:
      radial-gradient(
        circle at 32% 16%,
        rgba(255,255,255,1) 0%,
        rgba(255,251,241,.97) 15%,
        rgba(255,245,220,.66) 30%,
        rgba(255,251,241,.22) 49%,
        rgba(255,255,255,0) 70%
      ) !important;
    transform-origin:32% 16%;
  }

  .opening-white-curtain::after{
    transform-origin:38% 28%;
  }
}


/* =========================================================
   v3.72 — fix leftover directional peel from older versions
   ========================================================= */

/*
  v3.71 still inherited older v3.66/v3.70 rules such as
  transform: scaleY(0) / translateY(...), which were more specific
  and therefore made the white layer disappear from the top.
  Completely neutralize those directional transforms here.
*/
.opening-intro.is-peeling-white .opening-white-curtain{
  transform:none !important;
  transform-origin:center center !important;
  transition:none !important;
  animation:sunlitCurtainFade 2.15s cubic-bezier(.22,1,.36,1) forwards !important;
}

.opening-intro.is-peeling-white .opening-white-curtain::before{
  transform:scale(.72) !important;
  transition:none !important;
  animation:sunlightBloom 2.15s cubic-bezier(.22,1,.36,1) forwards !important;
}

.opening-intro.is-peeling-white .opening-white-curtain::after{
  transform:scale(.82) !important;
  transition:none !important;
  animation:sunlightHaze 2.15s cubic-bezier(.22,1,.36,1) forwards !important;
}

/* Whole-screen light fade only: no top/bottom directional mask. */
.opening-white-curtain{
  clip-path:none !important;
  -webkit-clip-path:none !important;
}


/* =========================================================
   v3.73 — smoother sunlight fade / compositor-friendly
   ========================================================= */

/*
  The previous version animated filter + scale + opacity on multiple
  full-screen layers. On some PCs this can drop frames.
  v3.73 keeps the sunlight look but animates opacity only.
*/

.opening-white-curtain,
.opening-white-curtain::before,
.opening-white-curtain::after{
  will-change:opacity;
  transform:translateZ(0) !important;
  backface-visibility:hidden;
  filter:none !important;
}

/* Keep the light graphics static and let only opacity change. */
.opening-white-curtain::before{
  opacity:0;
  transform:translateZ(0) scale(1.18) !important;
}
.opening-white-curtain::after{
  opacity:0;
  transform:translateZ(0) scale(1.10) !important;
}

/* Whole white veil fades smoothly without brightness/filter animation. */
.opening-intro.is-peeling-white .opening-white-curtain{
  animation:sunlitCurtainFadeSmooth 2.25s cubic-bezier(.37,0,.63,1) forwards !important;
}

/* Sun glow softly blooms by opacity only. */
.opening-intro.is-peeling-white .opening-white-curtain::before{
  animation:sunlightBloomSmooth 2.25s cubic-bezier(.37,0,.63,1) forwards !important;
}

/* Secondary haze follows on the same timeline. */
.opening-intro.is-peeling-white .opening-white-curtain::after{
  animation:sunlightHazeSmooth 2.25s cubic-bezier(.37,0,.63,1) forwards !important;
}

@keyframes sunlitCurtainFadeSmooth{
  0%{ opacity:1; }
  12%{ opacity:.99; }
  28%{ opacity:.94; }
  44%{ opacity:.80; }
  60%{ opacity:.59; }
  76%{ opacity:.34; }
  90%{ opacity:.13; }
  100%{ opacity:0; }
}

@keyframes sunlightBloomSmooth{
  0%{ opacity:0; }
  16%{ opacity:.08; }
  32%{ opacity:.30; }
  48%{ opacity:.58; }
  64%{ opacity:.72; }
  78%{ opacity:.48; }
  90%{ opacity:.20; }
  100%{ opacity:0; }
}

@keyframes sunlightHazeSmooth{
  0%{ opacity:0; }
  22%{ opacity:.05; }
  40%{ opacity:.18; }
  56%{ opacity:.34; }
  72%{ opacity:.29; }
  88%{ opacity:.10; }
  100%{ opacity:0; }
}

/* Prevent any older transform/brightness animation from taking over. */
.opening-intro.is-peeling-white .opening-white-curtain,
.opening-intro.is-peeling-white .opening-white-curtain::before,
.opening-intro.is-peeling-white .opening-white-curtain::after{
  transition:none !important;
  filter:none !important;
}


/* =========================================================
   v3.74 — earlier + shorter sunlight fade for smoother handoff
   ========================================================= */

/* Simplify the final transition even further: quick opacity-only dissolve. */
.opening-intro.is-peeling-white .opening-white-curtain{
  animation:sunlitCurtainFadeFast 1.15s cubic-bezier(.4,0,.2,1) forwards !important;
}

.opening-intro.is-peeling-white .opening-white-curtain::before{
  animation:sunlightBloomFast 1.15s cubic-bezier(.4,0,.2,1) forwards !important;
}

.opening-intro.is-peeling-white .opening-white-curtain::after{
  animation:sunlightHazeFast 1.15s cubic-bezier(.4,0,.2,1) forwards !important;
}

@keyframes sunlitCurtainFadeFast{
  0%{ opacity:1; }
  18%{ opacity:.96; }
  42%{ opacity:.76; }
  68%{ opacity:.40; }
  88%{ opacity:.12; }
  100%{ opacity:0; }
}

@keyframes sunlightBloomFast{
  0%{ opacity:0; }
  22%{ opacity:.16; }
  48%{ opacity:.54; }
  70%{ opacity:.62; }
  88%{ opacity:.20; }
  100%{ opacity:0; }
}

@keyframes sunlightHazeFast{
  0%{ opacity:0; }
  30%{ opacity:.08; }
  56%{ opacity:.24; }
  78%{ opacity:.16; }
  100%{ opacity:0; }
}


/* =========================================================
   v3.75 — ultra-smooth single-layer sunlight fade
   ========================================================= */

/*
  v3.74 still animated three full-screen layers independently.
  That can look like a "step" or hitch even when each layer is opacity-only.
  v3.75 collapses the final handoff into ONE composited layer.
*/

/* Turn off the two auxiliary pseudo-element animations completely. */
.opening-intro.is-peeling-white .opening-white-curtain::before,
.opening-intro.is-peeling-white .opening-white-curtain::after{
  animation:none !important;
  transition:none !important;
  opacity:0 !important;
  display:none !important;
}

/* The sunlight feeling is baked into one static background. */
.opening-white-curtain{
  background:
    radial-gradient(
      circle at 29% 18%,
      rgba(255,255,255,1) 0%,
      rgba(255,253,247,.995) 22%,
      rgba(255,249,235,.985) 42%,
      rgba(255,255,255,.99) 66%,
      rgba(255,255,255,1) 100%
    ) !important;

  opacity:1;
  transform:translate3d(0,0,0) !important;
  filter:none !important;
  will-change:opacity;
  backface-visibility:hidden;
  contain:paint;
}

/*
  One linear compositor transition = fewer chances for dropped frames.
  Timing stays the same as v3.74: about 1.15 seconds.
*/
.opening-intro.is-peeling-white .opening-white-curtain{
  animation:none !important;
  opacity:0 !important;
  transition:opacity 1.15s linear !important;
  transform:translate3d(0,0,0) !important;
  filter:none !important;
}

/* Avoid any final secondary fade fighting the curtain fade. */
.opening-intro.is-finished{
  opacity:0 !important;
  visibility:hidden !important;
  transition:none !important;
}


/* =========================================================
   v3.77 — refined header based on approved generated design
   ========================================================= */
.site-header{
  padding:18px 24px;
}
.site-logo-image{
  width:118px !important;
  height:auto !important;
  filter:drop-shadow(0 1px 1px rgba(75,57,42,.08));
}
.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-reserve.header-reserve-art{
  min-width:190px;
  height:48px;
  padding:0 20px 0 18px;
  border:1px solid rgba(124,100,75,.10);
  border-radius:999px;
  background:rgba(255,253,248,.92);
  color:#79634d;
  box-shadow:0 6px 22px rgba(92,71,49,.06);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  letter-spacing:.12em;
  font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",serif;
  font-size:12px;
  transition:transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.header-reserve.header-reserve-art:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.98);
  box-shadow:0 9px 28px rgba(92,71,49,.10);
}
.reserve-sprig{
  width:15px;
  height:26px;
  font-size:0;
  position:relative;
  opacity:.8;
}
.reserve-sprig::before{
  content:"";
  position:absolute;
  left:7px; top:1px;
  width:1px; height:24px;
  background:#806b53;
  transform:rotate(-12deg);
}
.reserve-sprig::after{
  content:"";
  position:absolute;
  left:2px; top:5px;
  width:11px; height:16px;
  background:
    radial-gradient(ellipse at 25% 20%,#806b53 0 22%,transparent 25%),
    radial-gradient(ellipse at 78% 43%,#806b53 0 21%,transparent 24%),
    radial-gradient(ellipse at 22% 69%,#806b53 0 20%,transparent 23%);
}
.reserve-arrow{
  font-family:serif;
  font-size:19px;
  line-height:1;
  margin-left:2px;
}
.menu-button{
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  border:1px solid rgba(124,100,75,.10) !important;
  background:rgba(255,253,248,.92) !important;
  box-shadow:0 6px 22px rgba(92,71,49,.06);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.menu-button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 9px 28px rgba(92,71,49,.10);
}
.menu-button span{
  display:block;
  width:18px !important;
  height:1px !important;
  margin:0 !important;
  background:#79634d !important;
  border-radius:999px;
}
@media(max-width:800px){
  .site-header{padding:14px 14px;}
  .site-logo-image{width:92px !important;}
  .header-actions{gap:9px;}
  .header-reserve.header-reserve-art{
    min-width:142px;
    height:42px;
    padding:0 14px;
    gap:8px;
    font-size:10px;
    letter-spacing:.08em;
  }
  .reserve-sprig{display:none;}
  .reserve-arrow{font-size:15px;}
  .menu-button{
    width:42px !important;
    height:42px !important;
  }
  .menu-button span{width:16px !important;}
}


/* =========================================================
   v3.78 — floral motif based on selected upper-right design
   ========================================================= */

/* Replace the old simple sprig with a eucalyptus + tiny white flowers + pink ribbon motif. */
.reserve-sprig{
  display:none !important;
}

.reserve-floral{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  margin-left:-4px;
}

.reserve-stem{
  position:absolute;
  left:16px;
  bottom:5px;
  width:1px;
  background:#85765f;
  transform-origin:bottom center;
  opacity:.72;
}
.reserve-stem-a{
  height:27px;
  transform:rotate(-22deg);
}
.reserve-stem-b{
  height:24px;
  left:18px;
  transform:rotate(18deg);
}

.reserve-leaf{
  position:absolute;
  width:9px;
  height:5px;
  background:rgba(153,163,137,.78);
  border-radius:80% 20% 80% 20% / 65% 35% 65% 35%;
  box-shadow:inset 0 0 0 1px rgba(119,126,107,.10);
}
.reserve-leaf-1{
  left:7px; top:11px; transform:rotate(-32deg);
}
.reserve-leaf-2{
  left:14px; top:7px; transform:rotate(22deg);
}
.reserve-leaf-3{
  left:20px; top:14px; transform:rotate(42deg);
}
.reserve-leaf-4{
  left:9px; top:19px; transform:rotate(-10deg);
}

.reserve-flower{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #d8bf86 0 18%, #fffdf8 20% 68%, rgba(255,255,255,0) 70%);
  box-shadow:
    3px 0 0 -1px rgba(255,253,248,.95),
    -3px 0 0 -1px rgba(255,253,248,.95),
    0 3px 0 -1px rgba(255,253,248,.95),
    0 -3px 0 -1px rgba(255,253,248,.95);
}
.reserve-flower-1{ left:12px; top:1px; }
.reserve-flower-2{ left:22px; top:5px; transform:scale(.9); }
.reserve-flower-3{ left:5px; top:5px; transform:scale(.76); }

.reserve-ribbon{
  position:absolute;
  bottom:1px;
  width:10px;
  height:6px;
  background:rgba(232,180,181,.86);
  border-radius:70% 30% 65% 35%;
}
.reserve-ribbon-left{
  left:8px;
  transform:rotate(28deg);
}
.reserve-ribbon-right{
  left:16px;
  transform:rotate(-28deg) scaleX(.95);
}
.reserve-floral::after{
  content:"";
  position:absolute;
  left:14px;
  bottom:0;
  width:5px;
  height:7px;
  background:rgba(232,180,181,.84);
  clip-path:polygon(0 0,100% 0,74% 100%,48% 72%,24% 100%);
}

/* Slightly adjust CTA proportions so the motif feels integrated rather than cramped. */
.header-reserve.header-reserve-art{
  min-width:204px;
  padding-left:14px;
  gap:12px;
}

@media(max-width:800px){
  .reserve-floral{
    width:29px;
    height:29px;
    flex-basis:29px;
    transform:scale(.88);
    transform-origin:center;
    margin-left:-5px;
    margin-right:-3px;
  }

  .header-reserve.header-reserve-art{
    min-width:154px;
    padding-left:10px;
    padding-right:12px;
    gap:6px;
  }
}


/* =========================================================
   v3.79 — real watercolor image embedded in reservation button
   ========================================================= */

/* Retire the CSS-drawn floral motif from v3.78. */
.reserve-floral,
.reserve-sprig{
  display:none !important;
}

.reserve-floral-image{
  display:block;
  width:44px;
  height:44px;
  object-fit:contain;
  flex:0 0 44px;
  margin-left:-8px;
  margin-right:-4px;
  filter:drop-shadow(0 1px 1px rgba(89,72,55,.04));
  pointer-events:none;
  user-select:none;
}

.header-reserve.header-reserve-art{
  min-width:210px;
  padding-left:12px;
  gap:10px;
}

@media(max-width:800px){
  .reserve-floral-image{
    width:34px;
    height:34px;
    flex-basis:34px;
    margin-left:-6px;
    margin-right:-3px;
  }

  .header-reserve.header-reserve-art{
    min-width:158px;
    padding-left:8px;
    padding-right:12px;
    gap:6px;
  }
}


/* =========================================================
   v3.100 — clean baseline rebuilt from v3.79
   ========================================================= */
.opening-petals,
.opening-petal{
  display:none !important;
}


/* =========================================================
   2026-09-10 v3.101 — header entrance animation
   ========================================================= */
body.header-intro-pending .site-header{
  opacity:0 !important;
  transform:translate3d(0,-115%,0) !important;
  pointer-events:none;
  transition:none !important;
}

body.header-intro-reveal .site-header{
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  pointer-events:auto;
  transition:
    transform 2s cubic-bezier(.22,1,.36,1),
    opacity 1.35s ease !important;
}


/* =========================================================
   2026-09-10 v3.102 — typography + Flow links
   ========================================================= */

/* Site-wide typography requested: Hiragino Mincho Pro, weight 500. */
html,
body,
button,
input,
select,
textarea{
  font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",serif !important;
  font-weight:500;
}

/* Keep inherited controls consistent. */
a,
p,
li,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
span{
  font-family:inherit;
}

.flow-detail-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}

.flow-detail-row p{
  margin:0;
}

.flow-inline-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
  font:inherit;
  font-size:.92em;
  letter-spacing:.03em;
  text-decoration:none;
  background:none;
  border:0;
  border-bottom:1px solid currentColor;
  padding:2px 0 3px;
  cursor:pointer;
  opacity:.82;
  transition:opacity .22s ease;
}

.flow-inline-link:hover{
  opacity:.58;
}

.flow-inline-link span{
  display:inline-block;
  transition:transform .22s ease;
}

.flow-inline-link:hover span{
  transform:translateX(4px);
}

@media(max-width:800px){
  .flow-detail-row{
    gap:10px;
  }

  .flow-inline-link{
    font-size:.88em;
  }
}


/* =========================================================
   2026-09-10 v3.103 — Flow right links + About Atoha redesign
   ========================================================= */

/* Flow: keep description at left and action link on the far right. */
.flow-row-with-link > div{
  width:100%;
}

.flow-row-with-link .flow-detail-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
}

.flow-row-with-link .flow-detail-row .flow-inline-link{
  margin-left:auto;
  flex:0 0 auto;
}

/* About Atoha. */
.about-redesign{
  text-align:center;
}

.about-redesign-hero{
  padding-bottom:0;
}

.about-redesign .about-title-block{
  text-align:center;
}

/* Large breathing room under "About Atoha." similar to the FV concept area. */
.about-redesign-content{
  padding:clamp(150px, 19vw, 280px) 24px 140px;
}

.about-redesign-inner{
  margin:0 auto;
  text-align:center;
}

.about-redesign-title{
  margin:0 auto;
  color:inherit;
  font-family:inherit;
  font-size:clamp(28px, 4vw, 48px);
  font-weight:500;
  line-height:1.75;
  letter-spacing:.08em;
}

.about-redesign-image{
  margin-left:auto;
  margin-right:auto;
}

.about-redesign-image-first{
  width:min(720px, 88vw);
  margin-top:56px;
}

.about-redesign-image-second{
  width:min(660px, 84vw);
  margin-top:48px;
}

.about-redesign-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.about-redesign-copy{
  max-width:760px;
  margin:84px auto 0;
  text-align:center;
}

.about-redesign-copy p{
  margin:0 0 48px;
  font-size:clamp(16px, 2vw, 21px);
  font-weight:500;
  line-height:2.2;
  letter-spacing:.075em;
}

.about-redesign-copy p:last-child{
  margin-bottom:0;
}

.about-redesign-time-heading{
  margin:110px auto 0;
  font-size:clamp(27px, 3.5vw, 43px);
  font-weight:500;
  line-height:1.8;
  letter-spacing:.08em;
}

.about-redesign-copy-last{
  margin-top:76px;
}

@media(max-width:800px){
  .flow-row-with-link .flow-detail-row{
    gap:12px;
  }

  .flow-row-with-link .flow-detail-row .flow-inline-link{
    margin-left:auto;
  }

  .about-redesign-content{
    padding:120px 18px 90px;
  }

  .about-redesign-title{
    font-size:29px;
    line-height:1.8;
  }

  .about-redesign-image-first{
    width:92vw;
    margin-top:42px;
  }

  .about-redesign-copy{
    margin-top:64px;
  }

  .about-redesign-copy p{
    margin-bottom:40px;
    font-size:16px;
    line-height:2.15;
  }

  .about-redesign-time-heading{
    margin-top:86px;
    font-size:27px;
  }

  .about-redesign-image-second{
    width:90vw;
    margin-top:38px;
  }

  .about-redesign-copy-last{
    margin-top:58px;
  }
}


/* =========================================================
   2026-09-10 v3.104
   Detail-page typography / unified drawer / restored header
   ========================================================= */

/* About Atoha. — restrained editorial scale, inspired by okuru-design.com/about */
.about-redesign .section-label{
  font-size:10px;
}
.about-redesign-title{
  font-size:clamp(30px,3.15vw,43px);
  line-height:1.72;
}
.about-redesign-copy p{
  font-size:clamp(14px,1.15vw,16px);
  line-height:2.15;
  letter-spacing:.055em;
}
.about-redesign-time-heading{
  font-size:clamp(27px,2.65vw,37px);
  line-height:1.75;
}

/* Photographer detail page — About Atoha. style character animation */
.profile-page-title.js-concept-copy,
.profile-story .story-copy h2.js-concept-copy,
.profile-story .profile-work-heading.js-concept-copy,
.profile-story .profile-now-heading.js-concept-copy{
  display:block !important;
}
.profile-page-title.js-concept-copy .concept-ja,
.profile-story .story-copy h2.js-concept-copy .concept-ja,
.profile-story .profile-work-heading.js-concept-copy .concept-ja,
.profile-story .profile-now-heading.js-concept-copy .concept-ja{
  white-space:normal !important;
}
.profile-page-title.js-concept-copy .concept-char,
.profile-story .story-copy h2.js-concept-copy .concept-char,
.profile-story .profile-work-heading.js-concept-copy .concept-char,
.profile-story .profile-now-heading.js-concept-copy .concept-char{
  display:inline-block;
  opacity:0;
  transform:translateY(1.05em);
  filter:blur(5px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s ease;
  transition-delay:calc(var(--i) * 38ms);
}
.profile-page-title.js-concept-copy.is-visible .concept-char,
.profile-story .story-copy h2.js-concept-copy.is-visible .concept-char,
.profile-story .profile-work-heading.js-concept-copy.is-visible .concept-char,
.profile-story .profile-now-heading.js-concept-copy.is-visible .concept-char{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Remove the visual blank lines between the profile story paragraphs. */
.profile-story .story-copy.center p{
  margin-top:0;
  margin-bottom:0;
}

/* Photographer detail page — same restrained hierarchy */
.profile-title-block .section-label{
  font-size:10px;
}
.profile-page-title{
  font-size:clamp(30px,3.15vw,43px) !important;
  line-height:1.65 !important;
}
.profile-story .story-copy h2,
.profile-work-heading,
.profile-now-heading{
  font-size:clamp(24px,2.2vw,32px) !important;
  line-height:1.75 !important;
}
.profile-story .story-copy p{
  font-size:clamp(14px,1.15vw,16px) !important;
  line-height:2.15 !important;
  letter-spacing:.045em;
}

/* Restore the earlier v3.100 header look.
   The global Mincho setting remains for the site body,
   but the header controls return to their earlier sizing/spacing. */
.site-header{
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 28px;
  pointer-events:none;
}
.site-logo,
.header-actions{
  pointer-events:auto;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.header-reserve{
  padding:10px 16px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.1em;
}
.menu-button{
  width:45px;
  height:45px;
  border:0;
  border-radius:50%;
  background:var(--beige);
  display:grid;
  place-content:center;
  gap:5px;
  cursor:pointer;
}
.menu-button span{
  display:block;
  width:18px;
  height:1px;
  background:white;
}

/* Keep the earlier header typography feel despite the site-wide Mincho change. */
.site-header .header-reserve,
.site-header .menu-button{
  font-family:Arial,"Helvetica Neue",sans-serif !important;
  font-weight:400 !important;
}

@media(max-width:800px){
  .about-redesign-title{
    font-size:27px;
  }
  .about-redesign-copy p{
    font-size:14px;
    line-height:2.05;
  }
  .about-redesign-time-heading{
    font-size:25px;
  }
  .profile-page-title{
    font-size:28px !important;
  }
  .profile-story .story-copy h2,
  .profile-work-heading,
  .profile-now-heading{
    font-size:23px !important;
  }
  .profile-story .story-copy p{
    font-size:14px !important;
    line-height:2.05 !important;
  }
}


/* =========================================================
   2026-09-11 v3.105 — requested header + About concept rhythm
   ========================================================= */

/* Header restored to the attached reference:
   beige filled reservation pill + beige filled circular menu. */
.site-header{
  padding:10px 16px !important;
}

.site-header .header-reserve.header-reserve-art{
  min-width:0 !important;
  width:auto !important;
  height:44px !important;
  padding:0 22px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#bda783 !important;
  color:#fff !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  gap:0 !important;
  font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.08em !important;
}

.site-header .header-reserve.header-reserve-art:hover{
  transform:none !important;
  background:#b49d78 !important;
  box-shadow:none !important;
}

.site-header .reserve-floral-image,
.site-header .reserve-arrow{
  display:none !important;
}

.site-header .menu-button{
  width:44px !important;
  height:44px !important;
  border:0 !important;
  border-radius:50% !important;
  background:#bda783 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  display:grid !important;
  place-content:center !important;
  gap:5px !important;
}

.site-header .menu-button span{
  width:18px !important;
  height:1px !important;
  background:#fff !important;
}

/* About concept headings:
   exact same type scale as TOP "「大好き」を、もっとずっと。" */
.about-redesign-title,
.about-redesign-time-heading{
  font-weight:400 !important;
  font-size:clamp(27px,3.55vw,50px) !important;
  line-height:1.45 !important;
  letter-spacing:.01em !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Make both title blocks breathe like the TOP concept message. */
.about-redesign-title{
  margin-top:0 !important;
  margin-bottom:clamp(90px,10vw,145px) !important;
}

.about-redesign-time-heading{
  margin-top:clamp(90px,10vw,145px) !important;
  margin-bottom:clamp(90px,10vw,145px) !important;
}

/* These headings now use the same .concept-char entrance animation as TOP. */
.about-redesign-title .concept-ja,
.about-redesign-time-heading .concept-ja{
  white-space:normal !important;
}

/* Requested: both About photos at half their previous width. */
.about-redesign-image-first{
  width:min(360px,44vw) !important;
  margin-top:0 !important;
}
.about-redesign-image-second{
  width:min(330px,42vw) !important;
  margin-top:0 !important;
}

@media(max-width:800px){
  .site-header{
    padding:9px 12px !important;
  }
  .site-header .header-reserve.header-reserve-art{
    height:42px !important;
    padding:0 18px !important;
    font-size:10px !important;
  }
  .site-header .menu-button{
    width:42px !important;
    height:42px !important;
  }

  .about-redesign-title,
  .about-redesign-time-heading{
    font-size:27px !important;
    line-height:1.45 !important;
  }

  .about-redesign-title{
    margin-bottom:90px !important;
  }
  .about-redesign-time-heading{
    margin-top:90px !important;
    margin-bottom:90px !important;
  }

  .about-redesign-image-first{
    width:46vw !important;
  }
  .about-redesign-image-second{
    width:45vw !important;
  }
}


/* =========================================================
   2026-09-11 v3.106 — About heading spacing + trigger timing
   ========================================================= */

/* Use the same vertical rhythm above and below both concept headings. */
.about-redesign-title{
  margin-top:clamp(90px,10vw,145px) !important;
  margin-bottom:clamp(90px,10vw,145px) !important;
}

.about-redesign-time-heading{
  margin-top:clamp(90px,10vw,145px) !important;
  margin-bottom:clamp(90px,10vw,145px) !important;
}

@media(max-width:800px){
  .about-redesign-title,
  .about-redesign-time-heading{
    margin-top:90px !important;
    margin-bottom:90px !important;
  }
}


/* =========================================================
   2026-09-11 v3.108 — intro scroll lock + About spacing
   ========================================================= */

/* Prevent any scrolling until the intro has completely handed over to TOP. */
html.intro-scroll-lock,
body.intro-scroll-lock{
  overflow:hidden !important;
  overscroll-behavior:none;
  touch-action:none;
}

/* About Atoha.:
   gap from "About Atoha." to first message = 2/3 of v3.107 */
.about-redesign-content{
  padding-top:clamp(100px,12.7vw,187px) !important;
}

/* First heading -> first photo gap = 2x previous value */
.about-redesign-title{
  margin-bottom:clamp(180px,20vw,290px) !important;
}

/* Second concept heading: double both top and bottom spacing */
.about-redesign-time-heading{
  margin-top:clamp(180px,20vw,290px) !important;
  margin-bottom:clamp(180px,20vw,290px) !important;
}

@media(max-width:800px){
  .about-redesign-content{
    padding-top:80px !important;
  }

  .about-redesign-title{
    margin-bottom:180px !important;
  }

  .about-redesign-time-heading{
    margin-top:180px !important;
    margin-bottom:180px !important;
  }
}


/* =========================================================
   2026-09-11 v3.109
   Flow / Q&A width, title illustration, About spacing, Plans
   ========================================================= */

/* Flow and Q&A: substantially widen the content area.
   On large screens this expands toward roughly twice the previous
   visually occupied width while still respecting the viewport. */
.flow-section > .wrap,
.faq-section > .wrap{
  width:min(1800px,calc(100% - 56px)) !important;
  max-width:none !important;
}

/* Put each section illustration directly to the LEFT of its title block,
   vertically centered instead of sitting at the upper-left corner. */
.section-title-top,
.section-heading.section-title-top{
  position:relative;
}

.section-title-top > .section-mark.section-mark-illust,
.section-heading.section-title-top > .section-mark.section-mark-illust{
  width:64px !important;
  height:64px !important;
  left:-82px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

/* About Atoha.:
   make the gap above the first main message equal to the gap below it. */
.about-redesign-content{
  padding-top:clamp(180px,20vw,290px) !important;
}

.about-redesign-title{
  margin-bottom:clamp(180px,20vw,290px) !important;
}

/* Plans: halve the center gap between the two columns. */
.plan-reference-grid{
  column-gap:60px !important;
}

@media(max-width:800px){
  .flow-section > .wrap,
  .faq-section > .wrap{
    width:calc(100% - 28px) !important;
  }

  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    width:48px !important;
    height:48px !important;
    left:-54px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }

  .about-redesign-content{
    padding-top:180px !important;
  }

  .about-redesign-title{
    margin-bottom:180px !important;
  }

  .plan-reference-grid{
    column-gap:30px !important;
  }
}


/* =========================================================
   2026-09-11 v3.110
   Revert Flow/Q&A width + About spacing + Plan column gap
   ========================================================= */

/* Revert v3.109 Flow / Q&A width expansion. */
.flow-section > .wrap,
.faq-section > .wrap{
  width:min(1120px,calc(100% - 40px)) !important;
  max-width:none !important;
}

/* Remove the extra blank space directly under the About Atoha. heading area. */
.about-redesign-content{
  padding-top:0 !important;
}

/* Halve the current plan center gap again: 60px -> 30px. */
.plan-reference-grid{
  column-gap:30px !important;
}

@media(max-width:800px){
  .flow-section > .wrap,
  .faq-section > .wrap{
    width:min(1120px,calc(100% - 40px)) !important;
  }

  .about-redesign-content{
    padding-top:0 !important;
  }

  .plan-reference-grid{
    column-gap:15px !important;
  }
}


/* =========================================================
   2026-09-11 v3.111
   Restore PC Flow/Q&A reference layout
   Align title illustrations beside English titles
   Normalize Plan two-column photo alignment
   ========================================================= */

@media(min-width:801px){

  /* FLOW / Q&A — restore the spacious former PC composition
     shown in the supplied reference images. */
  .flow-section > .wrap,
  .faq-section > .wrap{
    width:min(1180px,calc(100% - 80px)) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .flow-section .section-heading,
  .faq-section .section-heading{
    margin-bottom:58px !important;
  }

  .flow-list li{
    grid-template-columns:76px 1fr !important;
    padding:29px 0 !important;
  }

  .faq-list details{
    padding:25px 0 !important;
  }

  /* The illustration belongs directly to the LEFT of the English
     section title (Plan / Flow / Q&A / Photographer / Gallery etc.),
     not to the left of the entire multi-line title block. */
  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    width:64px !important;
    height:64px !important;
    left:-72px !important;
    top:16px !important;
    transform:translateY(-50%) !important;
  }

  /* Plan: keep both cards in each row on the exact same top line. */
  .plan-reference-grid{
    align-items:start !important;
  }

  .plan-reference-item,
  .plan-reference-item:nth-child(2n),
  .plan-reference-item:nth-child(3),
  .plan-reference-item:nth-child(4){
    transform:none !important;
    margin-top:0 !important;
  }

  .plan-reference-photo{
    aspect-ratio:1 / 1 !important;
    height:auto !important;
  }
}

/* Mobile: keep the illustration beside the English heading as well. */
@media(max-width:800px){
  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    width:48px !important;
    height:48px !important;
    left:-52px !important;
    top:13px !important;
    transform:translateY(-50%) !important;
  }

  .plan-reference-item,
  .plan-reference-item:nth-child(2n),
  .plan-reference-item:nth-child(3),
  .plan-reference-item:nth-child(4){
    transform:none !important;
    margin-top:0 !important;
  }

  .plan-reference-photo{
    aspect-ratio:1 / 1 !important;
    height:auto !important;
  }
}


/* =========================================================
   2026-09-11 v3.112
   Flow/Q&A full width + unified heading x-position
   ========================================================= */

@media(min-width:801px){

  /* Restore Flow and Q&A rules/content to the full former PC width.
     This explicitly overrides the legacy 50% rule in pc.css. */
  #flow .flow-list,
  #faq .faq-list{
    width:100% !important;
    max-width:none !important;
  }

  #flow > .wrap,
  #faq > .wrap{
    width:min(1120px,calc(100% - 40px)) !important;
    max-width:1120px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Make the English-title starting x-position identical for every
     main TOP section requested by the user. */
  #photographer > .section-title-top,
  #plan .plan-reference-wrap > .section-title-top,
  #flow .wrap > .section-title-top,
  #faq .wrap > .section-title-top,
  #gallery .gallery-wrap > .section-title-top,
  #contact .wrap > .section-title-top{
    width:min(1120px,calc(100vw - 40px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  /* Move illustrations right / closer to the English title. */
  #photographer .section-title-top > .section-mark.section-mark-illust,
  #plan .section-title-top > .section-mark.section-mark-illust,
  #flow .section-title-top > .section-mark.section-mark-illust,
  #faq .section-title-top > .section-mark.section-mark-illust,
  #gallery .section-title-top > .section-mark.section-mark-illust,
  #contact .section-title-top > .section-mark.section-mark-illust{
    width:54px !important;
    height:54px !important;
    left:-58px !important;
    top:16px !important;
    transform:translateY(-50%) !important;
  }
}


/* =========================================================
   2026-09-11 v3.113
   Bring title illustrations closer + halve plan column gap
   ========================================================= */

@media(min-width:801px){
  /* Keep the English-title x-position fixed; move only the illustration
     toward it, based on the supplied screenshots. */
  #photographer .section-title-top > .section-mark.section-mark-illust,
  #plan .section-title-top > .section-mark.section-mark-illust,
  #flow .section-title-top > .section-mark.section-mark-illust,
  #faq .section-title-top > .section-mark.section-mark-illust,
  #gallery .section-title-top > .section-mark.section-mark-illust,
  #contact .section-title-top > .section-mark.section-mark-illust{
    left:-45px !important;
  }

  /* Halve the current 30px gap between the two plan columns. */
  .plan-reference-grid{
    column-gap:15px !important;
  }
}

@media(max-width:800px){
  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    left:-42px !important;
  }

  /* Keep the same halving principle on smaller layouts if two columns apply. */
  .plan-reference-grid{
    column-gap:7.5px !important;
  }
}


/* =========================================================
   2026-09-11 v3.114
   Detail return intro skip / plan gap / concept trigger / About rhythm
   ========================================================= */

/* Remove the central whitespace between the two Plan columns. */
.plan-reference-grid{
  column-gap:0 !important;
}

/* About Atoha. — make the first message's actual visual spacing
   match the second message's 180–290px rhythm.
   The hero's legacy bottom padding is removed so it does not get
   added on top of the first heading's own margin. */
.about-redesign-hero{
  padding-bottom:0 !important;
}

.about-redesign-content{
  padding-top:0 !important;
  display:flow-root;
}

.about-redesign-title{
  margin-top:clamp(180px,20vw,290px) !important;
  margin-bottom:clamp(180px,20vw,290px) !important;
}

.about-redesign-time-heading{
  margin-top:clamp(180px,20vw,290px) !important;
  margin-bottom:clamp(180px,20vw,290px) !important;
}

@media(max-width:800px){
  .plan-reference-grid{
    column-gap:0 !important;
  }

  .about-redesign-hero{
    padding-bottom:0 !important;
  }

  .about-redesign-title,
  .about-redesign-time-heading{
    margin-top:180px !important;
    margin-bottom:180px !important;
  }
}


/* =========================================================
   2026-09-11 v3.117
   Center Plan cards + reduce drawer logo vertical whitespace
   ========================================================= */

/* TOP Plan: center each plan card within its grid column. */
.plan-reference-item{
  justify-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Drawer/menu Atoha. logo: halve the vertical whitespace around it. */
.drawer-logo,
.drawer .drawer-logo{
  margin-top:8px !important;
  margin-bottom:8px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.drawer-logo-image-link,
.drawer .drawer-logo-image-link{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

@media(max-width:800px){
  .plan-reference-item{
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .drawer-logo,
  .drawer .drawer-logo{
    margin-top:6px !important;
    margin-bottom:6px !important;
  }
}


/* =========================================================
   2026-09-11 v3.119 — authoritative intro/header state rules
   ========================================================= */
body.header-intro-pending .site-header{
  opacity:0 !important;
  transform:translate3d(0,-115%,0) !important;
  pointer-events:none !important;
  transition:none !important;
}

body.header-intro-reveal .site-header{
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  pointer-events:auto !important;
  transition:
    transform 2s cubic-bezier(.22,1,.36,1),
    opacity 1.35s ease !important;
}

html.intro-scroll-lock,
body.intro-scroll-lock{
  overflow:hidden !important;
  overscroll-behavior:none !important;
  touch-action:none !important;
}


/* =========================================================
   2026-09-11 v3.120
   Drawer compactness / title-marker alignment / Profile title rhythm
   ========================================================= */

/* Drawer: reduce Atoha. logo vertical area and make the full menu fit
   without needing its own scrollbar on normal PC heights. */
.drawer{
  padding-top:15px !important;
  padding-bottom:15px !important;
  overflow-y:hidden !important;
}

.drawer-top{
  margin-bottom:10px !important;
  min-height:48px !important;
}

.drawer-logo,
.drawer .drawer-logo{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:0 !important;
}

.drawer-logo-image{
  width:118px !important;
  height:48px !important;
  max-height:48px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.drawer-nav>a{
  padding-top:9px !important;
  padding-bottom:9px !important;
}

.drawer-sub a{
  padding-top:6px !important;
  padding-bottom:6px !important;
}

.drawer-cta-wrap{
  margin-top:12px !important;
  gap:7px !important;
}

/* TOP: move each decorative title illustration a little farther right,
   while preserving the aligned English-title starting position. */
@media(min-width:801px){
  #photographer .section-title-top > .section-mark.section-mark-illust,
  #plan .section-title-top > .section-mark.section-mark-illust,
  #flow .section-title-top > .section-mark.section-mark-illust,
  #faq .section-title-top > .section-mark.section-mark-illust,
  #gallery .section-title-top > .section-mark.section-mark-illust,
  #contact .section-title-top > .section-mark.section-mark-illust{
    left:-37px !important;
  }

  /* Plan detail pages: use the same visual distance between illustration
     and English title as the TOP section headings. */
  .plan-hero-copy .detail-title-marker{
    width:54px !important;
    height:54px !important;
    left:-37px !important;
    top:-25px !important;
  }
}

/* Photographer detail:
   match "ありちゃんって、こんな人。" to the animated About Atoha.
   headline scale and the same large top/bottom breathing room. */
.profile-title-block{
  margin-bottom:0 !important;
}

.profile-title-block .section-label{
  margin-bottom:0 !important;
}

.profile-title-block .profile-page-title{
  font-size:clamp(27px,2.65vw,37px) !important;
  line-height:1.75 !important;
  font-weight:400 !important;
  margin-top:clamp(180px,20vw,290px) !important;
  margin-bottom:clamp(180px,20vw,290px) !important;
}

@media(max-width:800px){
  .drawer{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .drawer-top{
    margin-bottom:8px !important;
  }

  .drawer-logo-image{
    width:105px !important;
    height:42px !important;
    max-height:42px !important;
  }

  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    left:-35px !important;
  }

  .plan-hero-copy .detail-title-marker{
    left:-35px !important;
  }

  .profile-title-block .profile-page-title{
    font-size:25px !important;
    line-height:1.75 !important;
    margin-top:180px !important;
    margin-bottom:180px !important;
  }
}


/* =========================================================
   2026-09-11 v3.121
   Plan detail title marker aligned to TOP title marker spacing
   ========================================================= */

@media(min-width:801px){
  /* TOP reference spacing: illustration sits just left of English title.
     Apply the same distance/size to every plan detail page. */
  .plan-hero-copy{
    position:relative !important;
  }

  .plan-hero-copy .detail-title-marker{
    position:absolute !important;
    width:54px !important;
    height:54px !important;
    left:-37px !important;
    top:16px !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }

  .plan-hero-copy .detail-title-marker img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}

@media(max-width:800px){
  .plan-hero-copy{
    position:relative !important;
  }

  .plan-hero-copy .detail-title-marker{
    position:absolute !important;
    width:48px !important;
    height:48px !important;
    left:-35px !important;
    top:13px !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }
}


/* =========================================================
   2026-09-11 v3.122
   Correct detail-page marker spacing to match TOP exactly
   ========================================================= */

/*
  TOP headings have 46px left padding before the English title.
  Their marker is positioned at left:-37px from the heading container.
  Therefore the marker is effectively 83px left of the English text.
  Detail headings have no 46px padding, so using -37px there caused overlap.
  Use the same effective text-to-marker spacing instead.
*/
@media(min-width:801px){
  .plan-hero-copy .detail-title-marker{
    position:absolute !important;
    width:54px !important;
    height:54px !important;
    left:-83px !important;
    top:16px !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }
}

@media(max-width:800px){
  .plan-hero-copy .detail-title-marker{
    position:absolute !important;
    width:48px !important;
    height:48px !important;
    left:-81px !important;
    top:13px !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }
}


/* =========================================================
   2026-09-11 v3.123
   Halve illustration-to-title whitespace everywhere
   ========================================================= */

@media(min-width:801px){
  /* TOP headings:
     English title starts after 46px left padding.
     marker left -22px => effective text-to-marker offset 68px.
     With 54px marker width, visible gap is ~14px (about half of v3.122). */
  #photographer .section-title-top > .section-mark.section-mark-illust,
  #plan .section-title-top > .section-mark.section-mark-illust,
  #flow .section-title-top > .section-mark.section-mark-illust,
  #faq .section-title-top > .section-mark.section-mark-illust,
  #gallery .section-title-top > .section-mark.section-mark-illust,
  #contact .section-title-top > .section-mark.section-mark-illust{
    left:-22px !important;
  }

  /* Plan detail headings: no title padding, so use the same effective
     68px text-to-marker offset directly. */
  .plan-hero-copy .detail-title-marker{
    left:-68px !important;
  }
}

@media(max-width:800px){
  /* Mobile uses the same principle with the existing 48px marker. */
  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    left:-20px !important;
  }

  .plan-hero-copy .detail-title-marker{
    left:-66px !important;
  }
}


/* =========================================================
   2026-09-11 v3.124
   Match header button fill to the site's standard beige buttons
   ========================================================= */

.site-header .header-reserve,
.site-header .menu-toggle{
  background:#d2bca3 !important;
}

/* Keep the same fill on interactive states instead of shifting shade. */
.site-header .header-reserve:hover,
.site-header .header-reserve:focus-visible,
.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus-visible{
  background:#d2bca3 !important;
}


/* =========================================================
   2026-09-11 v3.125
   Header beige corrected from actual rendered button color
   ========================================================= */

.site-header .header-reserve,
.site-header .menu-toggle{
  background-color:#c8b49f !important;
  background:#c8b49f !important;
}

.site-header .header-reserve:hover,
.site-header .header-reserve:focus,
.site-header .header-reserve:focus-visible,
.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus,
.site-header .menu-toggle:focus-visible{
  background-color:#c8b49f !important;
  background:#c8b49f !important;
}


/* =========================================================
   2026-09-11 v3.126
   Correct header selectors and unify with actual site button beige
   ========================================================= */

/*
  The round header menu is .menu-button (not .menu-toggle).
  Target the exact header elements so both controls use the same
  #c8b49f fill as Mail / web reservation / rental buttons.
*/
.site-header .header-reserve.header-reserve-art,
.site-header .menu-button{
  background:#c8b49f !important;
  background-color:#c8b49f !important;
  border-color:#c8b49f !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.site-header .header-reserve.header-reserve-art:hover,
.site-header .header-reserve.header-reserve-art:focus,
.site-header .header-reserve.header-reserve-art:focus-visible,
.site-header .menu-button:hover,
.site-header .menu-button:focus,
.site-header .menu-button:focus-visible{
  background:#c8b49f !important;
  background-color:#c8b49f !important;
  border-color:#c8b49f !important;
}

/* Filled header controls use white foreground, matching the other fill buttons. */
.site-header .header-reserve.header-reserve-art{
  color:#fff !important;
}
.site-header .menu-button span{
  background:#fff !important;
}


/* =========================================================
   2026-09-11 v3.127
   Exact rendered header color match
   ========================================================= */

.site-header .header-reserve.header-reserve-art,
.site-header .menu-button{
  background:#c8b49f !important;
  background-color:#c8b49f !important;
  border-color:#c8b49f !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.site-header .header-reserve.header-reserve-art::before,
.site-header .header-reserve.header-reserve-art::after,
.site-header .menu-button::before,
.site-header .menu-button::after{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.site-header .header-reserve.header-reserve-art:hover,
.site-header .header-reserve.header-reserve-art:focus,
.site-header .header-reserve.header-reserve-art:focus-visible,
.site-header .menu-button:hover,
.site-header .menu-button:focus,
.site-header .menu-button:focus-visible{
  background:#c8b49f !important;
  background-color:#c8b49f !important;
  border-color:#c8b49f !important;
  opacity:1 !important;
  filter:none !important;
}


/* =========================================================
   2026-09-11 v3.128
   Mobile alignment / centered plans / header color / compact drawer
   ========================================================= */

@media(max-width:800px){

  /* 1) Put illustrations directly to the left of the English headings. */
  .section-title-top,
  .section-heading.section-title-top{
    position:relative !important;
    padding-left:42px !important;
  }

  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    width:42px !important;
    height:42px !important;
    left:0 !important;
    top:13px !important;
    transform:translateY(-50%) !important;
  }

  /* Plan detail pages: same spacing logic as TOP headings. */
  .plan-hero-copy{
    position:relative !important;
    padding-left:42px !important;
  }

  .plan-hero-copy .detail-title-marker{
    width:42px !important;
    height:42px !important;
    left:0 !important;
    top:13px !important;
    transform:translateY(-50%) !important;
  }

  /* 2) Center every TOP plan item on mobile. */
  .plan-reference-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
    row-gap:72px !important;
  }

  .plan-reference-item{
    width:min(88vw,520px) !important;
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .plan-reference-photo{
    width:78% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .plan-reference-label{
    right:8% !important;
  }

  /* 3) Mobile header: force exactly the same fill color as PC/site buttons. */
  .site-header .header-reserve.header-reserve-art,
  .site-header .menu-button{
    background:#c8b49f !important;
    background-color:#c8b49f !important;
    border-color:#c8b49f !important;
    opacity:1 !important;
    filter:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .site-header .header-reserve.header-reserve-art:hover,
  .site-header .header-reserve.header-reserve-art:focus,
  .site-header .header-reserve.header-reserve-art:focus-visible,
  .site-header .menu-button:hover,
  .site-header .menu-button:focus,
  .site-header .menu-button:focus-visible{
    background:#c8b49f !important;
    background-color:#c8b49f !important;
    border-color:#c8b49f !important;
  }

  /* 4) Compact mobile drawer so no scrolling is needed on common phone heights. */
  .drawer{
    height:100dvh !important;
    padding:8px 18px 10px !important;
    overflow:hidden !important;
  }

  .drawer-top{
    min-height:40px !important;
    margin-bottom:4px !important;
  }

  .drawer-logo-image{
    width:92px !important;
    height:36px !important;
    max-height:36px !important;
  }

  .drawer-close{
    width:34px !important;
    height:34px !important;
  }

  .drawer-nav{
    font-size:12px !important;
  }

  .drawer-nav > a{
    padding:7px 0 !important;
    line-height:1.2 !important;
  }

  .drawer-sub{
    margin:2px 0 4px !important;
    padding-left:12px !important;
  }

  .drawer-sub a{
    padding:4px 0 !important;
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .drawer-bottom,
  .drawer-cta-wrap{
    margin-top:8px !important;
    gap:6px !important;
  }

  .drawer-bottom-btn,
  .drawer-cta-two .btn{
    min-height:38px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
    font-size:10px !important;
  }
}


/* =========================================================
   2026-09-11 v3.129
   Mobile title-marker alignment unified by grid
   + drawer spacing rebalanced
   ========================================================= */

@media(max-width:800px){

  /* -------------------------------------------------------
     TOP section headings
     Make marker + English title share one real grid row.
     This removes the accumulated absolute-position differences.
     ------------------------------------------------------- */
  .section-title-top,
  .section-heading.section-title-top{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:10px !important;
    align-items:center !important;
    padding-left:0 !important;
  }

  .section-title-top > .section-mark.section-mark-illust,
  .section-heading.section-title-top > .section-mark.section-mark-illust{
    position:static !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    transform:none !important;
    align-self:center !important;
    justify-self:end !important;
  }

  .section-title-top > .section-label,
  .section-heading.section-title-top > .section-label{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:center !important;
    margin:0 !important;
  }

  .section-title-top > .section-subtitle,
  .section-title-top > h2,
  .section-title-top > p,
  .section-heading.section-title-top > .section-subtitle,
  .section-heading.section-title-top > h2,
  .section-heading.section-title-top > p{
    grid-column:2 !important;
  }

  /* -------------------------------------------------------
     Plan detail headings
     Use exactly the same 42px + 10px structure as TOP.
     ------------------------------------------------------- */
  .plan-hero-copy{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:10px !important;
    align-items:center !important;
    padding-left:0 !important;
  }

  .plan-hero-copy .detail-title-marker{
    position:static !important;
    grid-column:1 !important;
    grid-row:1 !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
    transform:none !important;
    align-self:center !important;
    justify-self:end !important;
  }

  .plan-hero-copy > .section-label{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:0 !important;
    align-self:center !important;
  }

  .plan-hero-copy > h1,
  .plan-hero-copy > p{
    grid-column:2 !important;
  }

  /* -------------------------------------------------------
     Drawer
     Put back a little breathing room while remaining compact
     enough for a normal phone viewport without internal scroll.
     ------------------------------------------------------- */
  .drawer{
    height:100dvh !important;
    padding:12px 18px 14px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .drawer-top{
    min-height:44px !important;
    margin-bottom:9px !important;
  }

  .drawer-logo-image{
    width:98px !important;
    height:40px !important;
    max-height:40px !important;
  }

  .drawer-close{
    width:36px !important;
    height:36px !important;
  }

  .drawer-nav{
    font-size:12px !important;
  }

  .drawer-nav > a{
    padding:8px 0 !important;
    line-height:1.28 !important;
  }

  .drawer-sub{
    margin:4px 0 6px !important;
    padding-left:14px !important;
  }

  .drawer-sub a{
    padding:4.5px 0 !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  .drawer-bottom,
  .drawer-cta-wrap{
    margin-top:10px !important;
    gap:7px !important;
  }

  .drawer-bottom-btn,
  .drawer-cta-two .btn{
    min-height:40px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    font-size:10px !important;
  }
}


/* =========================================================
   2026-09-11 v3.130
   Mobile-first refinements
   ========================================================= */

@media(max-width:800px){

  /* -------------------------------------------------------
     Drawer/menu:
     restore comfortable vertical rhythm while still fitting
     within one phone viewport without internal scrolling.
     ------------------------------------------------------- */
  .drawer{
    height:100dvh !important;
    padding:14px 18px 16px !important;
    overflow:hidden !important;
  }

  .drawer-top{
    min-height:46px !important;
    margin-bottom:12px !important;
  }

  .drawer-logo-image{
    width:102px !important;
    height:42px !important;
    max-height:42px !important;
  }

  .drawer-nav{
    font-size:12.5px !important;
  }

  .drawer-nav > a{
    padding:10px 0 !important;
    line-height:1.32 !important;
  }

  .drawer-sub{
    margin:6px 0 8px !important;
    padding-left:16px !important;
  }

  .drawer-sub a{
    padding:6px 0 !important;
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  .drawer-bottom,
  .drawer-cta-wrap{
    margin-top:12px !important;
    gap:8px !important;
  }

  .drawer-bottom-btn,
  .drawer-cta-two .btn{
    min-height:42px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
    font-size:10.5px !important;
  }

  /* -------------------------------------------------------
     TOP section headings:
     move the whole marker/title block farther left while
     keeping every section on the same vertical x-line.
     ------------------------------------------------------- */
  #photographer > .section-title-top,
  #plan .plan-reference-wrap > .section-title-top,
  #flow .wrap > .section-title-top,
  #faq .wrap > .section-title-top,
  #gallery .gallery-wrap > .section-title-top,
  #contact .wrap > .section-title-top{
    width:calc(100% - 36px) !important;
    max-width:none !important;
    margin-left:18px !important;
    margin-right:18px !important;
  }

  /* Keep icon + English label aligned consistently. */
  #photographer .section-title-top,
  #plan .section-title-top,
  #flow .section-title-top,
  #faq .section-title-top,
  #gallery .section-title-top,
  #contact .section-title-top{
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:10px !important;
  }

  /* -------------------------------------------------------
     TOP plan cards:
     keep each item centered, and move the lower-right label
     farther outside the photo so it overlaps less.
     ------------------------------------------------------- */
  .plan-reference-grid{
    justify-items:center !important;
  }

  .plan-reference-item{
    justify-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .plan-reference-label{
    right:1% !important;
    bottom:-7% !important;
  }
}


/* =========================================================
   2026-09-11 v3.131
   Mobile section heading / plan labels / About images
   ========================================================= */

@media(max-width:800px){

  /* -------------------------------------------------------
     TOP section headings:
     pull the full marker + title block farther left.
     Keep every section on exactly the same x-axis.
     ------------------------------------------------------- */
  #photographer > .section-title-top,
  #plan .plan-reference-wrap > .section-title-top,
  #flow .wrap > .section-title-top,
  #faq .wrap > .section-title-top,
  #gallery .gallery-wrap > .section-title-top,
  #contact .wrap > .section-title-top{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin-left:10px !important;
    margin-right:10px !important;
  }

  /* Keep marker + English title relationship unchanged. */
  #photographer .section-title-top,
  #plan .section-title-top,
  #flow .section-title-top,
  #faq .section-title-top,
  #gallery .section-title-top,
  #contact .section-title-top{
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:10px !important;
  }

  /* -------------------------------------------------------
     Plan labels:
     use one fixed anchor for every card.
     This makes the label's top-left point identical regardless
     of the title length (e.g. 日常 / ウェディング).
     ------------------------------------------------------- */
  .plan-reference-item{
    position:relative !important;
  }

  .plan-reference-label{
    position:absolute !important;
    left:58% !important;
    top:72% !important;
    right:auto !important;
    bottom:auto !important;
    width:38% !important;
    min-height:128px !important;
    box-sizing:border-box !important;
  }

  .plan-reference-label h3{
    margin-top:0 !important;
  }

  /* -------------------------------------------------------
     About Atoha. photos: enlarge both by 1.2x.
     v3.130 values were about 46vw / 45vw on mobile.
     ------------------------------------------------------- */
  .about-redesign-image-first{
    width:55.2vw !important;
    max-width:none !important;
  }

  .about-redesign-image-second{
    width:54vw !important;
    max-width:none !important;
  }
}


/* =========================================================
   2026-09-11 v3.132 — mobile corrections
   ========================================================= */
@media(max-width:800px){

  /* About: guarantee the requested 3-line headline. */
  .about-redesign .concept-ja > span{
    display:block !important;
    white-space:nowrap !important;
  }

  /* TOP headings:
     Previous selector moved the container, but its own centering rules
     still kept the visual block near the middle. Override both container
     and heading row and anchor them from the left edge. */
  #photographer > .section-title-top,
  #plan .plan-reference-wrap > .section-title-top,
  #flow .wrap > .section-title-top,
  #faq .wrap > .section-title-top,
  #gallery .gallery-wrap > .section-title-top,
  #contact .wrap > .section-title-top{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-left:16px !important;
    margin-right:16px !important;
    transform:none !important;
    justify-content:start !important;
    justify-items:start !important;
  }

  #photographer .section-title-top,
  #plan .section-title-top,
  #flow .section-title-top,
  #faq .section-title-top,
  #gallery .section-title-top,
  #contact .section-title-top{
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:10px !important;
    justify-content:start !important;
    justify-items:start !important;
    text-align:left !important;
  }

  #photographer .section-title-copy,
  #plan .section-title-copy,
  #flow .section-title-copy,
  #faq .section-title-copy,
  #gallery .section-title-copy,
  #contact .section-title-copy{
    justify-self:start !important;
    text-align:left !important;
  }

  /* Plan labels:
     move the common anchor farther upper-left and give the text more width.
     The top-left anchor remains identical on every card. */
  .plan-reference-label{
    left:52% !important;
    top:68% !important;
    width:44% !important;
    min-height:128px !important;
  }
}


/* =========================================================
   2026-09-11 v3.133 — mobile fixes after v3.132
   ========================================================= */

@media(max-width:800px){

  /* Atoha. detail headline:
     force horizontal writing and preserve the requested 3 lines. */
  .about-redesign-title,
  .about-redesign-title .concept-ja,
  .about-redesign-title .concept-char{
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:normal !important;
  }

  .about-redesign-title .concept-ja{
    display:block !important;
    width:auto !important;
    max-width:92vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* TOP section title blocks:
     the wrappers themselves were still inheriting centered layout.
     Anchor them explicitly to the left side of the viewport. */
  #photographer > .section-title-top,
  #plan .plan-reference-wrap > .section-title-top,
  #flow .wrap > .section-title-top,
  #faq .wrap > .section-title-top,
  #gallery .gallery-wrap > .section-title-top,
  #contact .wrap > .section-title-top{
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    margin-left:12px !important;
    margin-right:0 !important;
    transform:none !important;
    justify-self:start !important;
    justify-content:start !important;
    justify-items:start !important;
    text-align:left !important;
  }

  #photographer .section-title-top,
  #plan .section-title-top,
  #flow .section-title-top,
  #faq .section-title-top,
  #gallery .section-title-top,
  #contact .section-title-top{
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:8px !important;
    justify-content:start !important;
    justify-items:start !important;
    text-align:left !important;
  }

  #photographer .section-title-top > *,
  #plan .section-title-top > *,
  #flow .section-title-top > *,
  #faq .section-title-top > *,
  #gallery .section-title-top > *,
  #contact .section-title-top > *{
    justify-self:start !important;
    text-align:left !important;
  }

  /* Plan labels: keep common anchor but move them further upward. */
  .plan-reference-label{
    left:52% !important;
    top:63% !important;
    width:44% !important;
    min-height:128px !important;
  }
}


/* =========================================================
   2026-09-16 v3.138
   Keep v3.136 changes smartphone-only
   ========================================================= */
@media (min-width:801px){
  /* v3.136 inserted this BR into shared HTML for the mobile modal.
     Hide only that BR on desktop so the original one-line PC copy returns. */
  .contact-modal-lead br{
    display:none !important;
  }
}

/* v3.139 — navigation, text-only intro, editorial section typography */
.site-header.header-hidden{transform:translate3d(0,0,0) !important;opacity:1 !important;pointer-events:auto !important;}
.opening-intro-photos{display:none !important;}
.opening-intro,.opening-intro-message{background:#fff !important;}
.drawer-nav>a{font-size:clamp(16px,1.15vw,19px) !important;padding:17px 0 !important;line-height:1.55 !important;}
.drawer-sub a{font-size:clamp(14px,1vw,16px) !important;padding:11px 0 !important;line-height:1.5 !important;}
.concept-about-link{font-size:12px !important;}
/* Section title: wider editorial block with English-led hierarchy. */
.section-heading.section-title-top{max-width:1100px !important;width:min(1100px,calc(100% - 80px)) !important;}
.section-heading.section-title-top > .section-label,
.section-title-top > .section-label{font-family:"Cormorant Garamond", Georgia, serif !important;font-size:clamp(46px,5.2vw,76px) !important;font-weight:400 !important;line-height:1.18 !important;letter-spacing:.105em !important;text-transform:none !important;color:#C6B39D !important;}
.section-heading.section-title-top > h2,
.section-heading.section-title-top > .section-subtitle,
.section-title-top > h2,.section-title-top > .section-subtitle{font-size:clamp(23px,2.6vw,38px) !important;line-height:1.55 !important;color:#333333 !important;}
.section-heading.section-title-top > p,.section-title-top > p{color:#333333 !important;}
@media(max-width:800px){
 .drawer-nav>a{font-size:16px !important;padding:14px 0 !important;line-height:1.45 !important;}
 .drawer-sub a{font-size:14px !important;padding:10px 0 !important;line-height:1.4 !important;}
 .section-heading.section-title-top,.section-title-top{width:calc(100vw - 24px) !important;max-width:none !important;}
 .section-heading.section-title-top > .section-label,.section-title-top > .section-label{font-size:clamp(31px,8.3vw,48px) !important;letter-spacing:.045em !important;overflow-wrap:anywhere;}
 .section-heading.section-title-top > h2,.section-heading.section-title-top > .section-subtitle,.section-title-top > h2,.section-title-top > .section-subtitle{font-size:clamp(16px,4.1vw,24px) !important;}
}

/* v3.140 — refined editorial headings, original description styling */
/* Keep the descriptive paragraphs in their original muted typography. */
.section-heading.section-title-top > p, .section-title-top > p,
body #plan .section-title-top > p, body #flow .section-title-top > p{
  color:var(--muted) !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:2 !important;
  letter-spacing:normal !important;
}
/* English first, Japanese discreet beneath; all six homepage sections. */
body #photographer .section-title-top > .section-label,
body #plan .section-title-top > .section-label,
body #flow .section-title-top > .section-label,
body #faq .section-title-top > .section-label,
body #gallery .section-title-top > .section-label,
body #contact .section-title-top > .section-label{
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-size:clamp(39px,4.25vw,60px) !important;
  font-weight:400 !important;
  line-height:1.22 !important;
  letter-spacing:.115em !important;
  color:#C6B39D !important;
  margin-bottom:14px !important;
  overflow-wrap:normal !important;
}
body #photographer .section-title-top > .section-subtitle,
body #plan .section-title-top > h2,
body #flow .section-title-top > h2,
body #faq .section-title-top > h2,
body #gallery .section-title-top > h2,
body #contact .section-title-top > h2,
body #gallery .section-title-top > .section-subtitle,
body #contact .section-title-top > .section-subtitle{
  font-size:clamp(14px,1.3vw,18px) !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  letter-spacing:.07em !important;
  color:#333333 !important;
}
body #contact .contact-box > h2{font-size:clamp(21px,2.1vw,27px) !important;line-height:1.65 !important;}
@media(max-width:800px){
 body #photographer .section-title-top > .section-label,
 body #plan .section-title-top > .section-label,
 body #flow .section-title-top > .section-label,
 body #faq .section-title-top > .section-label,
 body #gallery .section-title-top > .section-label,
 body #contact .section-title-top > .section-label{font-size:clamp(33px,8vw,43px) !important;letter-spacing:.065em !important;}
 body #photographer .section-title-top > .section-subtitle,
 body #plan .section-title-top > h2,body #flow .section-title-top > h2,
 body #faq .section-title-top > h2,body #gallery .section-title-top > h2,
 body #contact .section-title-top > h2,body #gallery .section-title-top > .section-subtitle,
 body #contact .section-title-top > .section-subtitle{font-size:14px !important;}
 body #contact .contact-box > h2{font-size:21px !important;}
}

/* v3.141: business inquiry email client alternatives */
.business-mail-choices{width:100%;text-align:center}
.business-mail-choices>summary{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;min-height:44px}
.business-mail-choices>summary::-webkit-details-marker{display:none}
.business-mail-options{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:20px auto 0}
.business-mail-options .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 18px;text-decoration:none}
.business-mail-note{font-size:12px;line-height:1.8;margin:14px auto 0;max-width:520px}

/* v3.142: single mail button and compact help text */
.business-mail-choices{width:100%;text-align:center}
.business-mail-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}
.business-mail-note{margin:12px auto 0;max-width:580px;font-size:12px;line-height:1.8;color:var(--muted);font-weight:400}

/* v3.143: intro slogan must start hidden until the JS entrance runs. */
#openingIntro .opening-intro-copy .concept-ja{visibility:visible;}
#openingIntro .opening-intro-copy:not(.is-visible) .concept-char{opacity:0 !important;transform:translateY(1.05em) !important;filter:blur(5px) !important;}
#openingIntro .opening-intro-copy.is-visible .concept-ja{visibility:visible !important;}

#openingIntro .intro-unbuilt .concept-ja{opacity:0 !important;}

/* v3.144: Flow — editorial five-step layout inspired by the supplied reference */
.atoha-flow-section{background:#f8f7f4;padding:110px 0 105px}
.atoha-flow-section .section-heading{margin-bottom:65px}
.atoha-flow-section .section-heading .section-label{font-size:12px;letter-spacing:.38em;color:#c6b39d}
.atoha-flow-section .section-heading h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(43px,5vw,69px);font-weight:400;letter-spacing:.15em;line-height:1.2;color:#333;margin:16px 0 20px}
.atoha-flow-section .section-heading .atoha-flow-subtitle{font-size:14px;color:#777;letter-spacing:.12em}
.atoha-flow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0;position:relative;gap:18px;text-align:center}
.atoha-flow-steps:before{content:"";position:absolute;left:8%;right:8%;top:27px;height:1px;background:#dddcd7}
.atoha-flow-step{position:relative;min-width:0}
.atoha-flow-number{display:flex;width:54px;height:54px;border-radius:50%;background:#64977c;color:white;align-items:center;justify-content:center;margin:0 auto 23px;font:15px Georgia,serif;position:relative;z-index:1}
.atoha-flow-step h3{font-size:15px;font-weight:400;letter-spacing:.08em;color:#333;margin:0 0 14px}
.atoha-flow-step p{font-size:12px;line-height:2;color:#888;margin:0 auto;max-width:190px}
.atoha-flow-more{text-align:left;margin-top:65px}
.atoha-flow-more a{display:inline-flex;gap:18px;align-items:center;color:#64977c;letter-spacing:.18em;font-size:13px;text-decoration:none;padding:10px 0;border-bottom:1px solid transparent}
.atoha-flow-more a:hover{border-bottom-color:currentColor}
.at-flow-page{background:#fbfaf7;color:#333}
.at-flow-hero{padding:150px 0 100px;background:#f5f4f0;text-align:center}
.at-flow-eyebrow{display:block;font:12px Georgia,serif;letter-spacing:.4em;color:#b9a68c}
.at-flow-hero h1{font:400 clamp(46px,6vw,82px)/1.3 Georgia,'Times New Roman',serif;letter-spacing:.12em;margin:20px 0;color:#333}
.at-flow-ja{font-size:16px;letter-spacing:.2em;color:#555;margin:0}
.at-flow-lead{font-size:14px;line-height:2.3;color:#777;margin:35px auto 0}
.at-flow-content{padding:90px 0 110px}.at-flow-narrow{max-width:880px}
.at-flow-item{border-bottom:1px solid #e5e2dc;padding:55px 20px 65px}.at-flow-item:first-child{border-top:1px solid #e5e2dc}
.at-flow-item-head{display:flex;align-items:center;gap:35px;margin-bottom:25px}
.at-flow-item-number{font:400 57px Georgia,serif;color:#c6b39d;line-height:1}
.at-flow-item-en{font:12px Georgia,serif;letter-spacing:.18em;color:#9caa9c}
.at-flow-item h2{font-size:26px;font-weight:400;letter-spacing:.08em;margin:10px 0 0}
.at-flow-item>p{font-size:14px;line-height:2.3;color:#666;margin:0 0 0 96px;max-width:660px}
.at-flow-action{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:14px 24px;background:#c8b49f;color:white;text-decoration:none;border-radius:40px;font-size:13px;letter-spacing:.08em;margin:25px 0 0 96px;min-height:48px}
.at-flow-action:hover{opacity:.82}
.at-flow-end{text-align:center;background:#f3f1eb;padding:95px 20px 110px}.at-flow-end h2{font-size:clamp(23px,3vw,34px);font-weight:400;line-height:1.8;letter-spacing:.12em;margin:25px 0}.at-flow-end p{font-size:13px;color:#777;line-height:2}.at-flow-end .at-flow-action{margin:28px auto 0}
@media(max-width:800px){.atoha-flow-section{padding:75px 0}.atoha-flow-section .section-heading{margin-bottom:40px}.atoha-flow-section .section-heading h2{font-size:clamp(37px,9vw,52px);letter-spacing:.1em}.atoha-flow-steps{display:block;text-align:left;margin:0 auto;max-width:460px}.atoha-flow-steps:before{left:25px;right:auto;top:24px;bottom:20px;width:1px;height:auto}.atoha-flow-step{display:grid;grid-template-columns:52px 1fr;column-gap:20px;align-items:start;margin-bottom:26px}.atoha-flow-number{grid-row:1/3;width:50px;height:50px;margin:0}.atoha-flow-step h3{margin:2px 0 5px;font-size:16px}.atoha-flow-step p{max-width:none;margin:0;font-size:12px}.atoha-flow-more{margin-top:40px}.at-flow-hero{padding:115px 18px 65px}.at-flow-hero h1{font-size:clamp(39px,10vw,58px)}.at-flow-lead{font-size:12px}.at-flow-content{padding:55px 0 70px}.at-flow-item{padding:38px 0 45px}.at-flow-item-head{gap:17px}.at-flow-item-number{font-size:46px}.at-flow-item h2{font-size:21px}.at-flow-item>p{margin-left:0;font-size:13px}.at-flow-action{margin-left:0}.at-flow-end{padding:70px 20px 85px}}

/* v3.145: match the profile detail link in the Flow section */
.atoha-flow-more a.text-link{display:inline-block;margin-top:28px;font-size:12px;letter-spacing:normal;color:inherit;border-bottom:1px solid var(--beige);padding:0 0 4px;text-decoration:none;line-height:inherit}
.atoha-flow-more a.text-link:hover{border-bottom-color:var(--beige)}

/* v3.146: English section headings use Cormorant Garamond across all pages.
   Keep Japanese headings, body copy, navigation and buttons unchanged. */
.section-label,
.section-title-top > .section-label,
.section-heading.section-title-top > .section-label,
body #photographer .section-title-top > .section-label,
body #plan .section-title-top > .section-label,
body #flow .section-title-top > .section-label,
body #faq .section-title-top > .section-label,
body #gallery .section-title-top > .section-label,
body #contact .section-title-top > .section-label,
.atoha-flow-section .section-heading h2 {
  font-family:"Cormorant Garamond", Georgia, serif !important;
}

/* v3.147: English headings on detail pages and flow page. */
.subpage-title-block > .section-label, .plan-hero .section-label, .at-flow-hero h1, .atoha-flow-section .section-heading h2, .profile-final-label {font-family:"Cormorant Garamond", Georgia, serif !important;}

/* v3.148 — transparent header over the first view; soft white after it */
.site-header{background:transparent !important;transition:background-color .3s ease,transform 2s cubic-bezier(.22,1,.36,1),opacity 1.35s ease !important;}
body.past-first-view .site-header{background:rgba(255,255,255,.82) !important;}
/* Flow step numbers: muted brown */
.atoha-flow-number{background:#A88C73 !important;}

/* v3.150: header controls, restored compact drawer, unified subtitle, Flow interactions */
.site-header .header-reserve.header-reserve-art,.site-header .menu-button{
 box-shadow:0 5px 12px rgba(84,59,39,.21),inset 0 1px 0 rgba(255,255,255,.48) !important;
 border:1px solid rgba(255,255,255,.72) !important;
 transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease !important;
 will-change:transform;
}
.site-header .header-reserve.header-reserve-art:hover,.site-header .menu-button:hover{
 transform:translateY(-2px) !important;box-shadow:0 9px 18px rgba(84,59,39,.25),inset 0 1px 0 rgba(255,255,255,.5) !important;
}
.site-header .header-reserve.header-reserve-art:active,.site-header .menu-button:active{
 transform:translateY(1px) !important;box-shadow:0 2px 5px rgba(84,59,39,.18) !important;
}
/* The v3.138 drawer used compact type and spacing. Keep Contact removed in HTML. */
.drawer-nav > a{font-size:13px !important;padding:13px 0 !important;line-height:1.35 !important;}
.drawer-sub a{font-size:11px !important;padding:7px 0 !important;line-height:1.3 !important;}
@media(max-width:800px){
 .drawer-nav{font-size:12.5px !important;}
 .drawer-nav > a{font-size:12.5px !important;padding:10px 0 !important;line-height:1.32 !important;}
 .drawer-sub{margin:6px 0 8px !important;padding-left:16px !important;}
 .drawer-sub a{font-size:11.5px !important;padding:6px 0 !important;line-height:1.25 !important;}
}
/* Match the original Flow subtitle rather than the larger v3.149 subtitle rule. */
body #photographer .section-title-top > .section-subtitle,
body #plan .section-title-top > h2,
body #flow .section-title-top > .atoha-flow-subtitle,
body #faq .section-title-top > h2,
body #gallery .section-title-top > h2,
body #gallery .section-title-top > .section-subtitle,
body #contact .section-title-top > h2,
body #contact .section-title-top > .section-subtitle{
 font-size:14px !important;font-weight:400 !important;line-height:1.65 !important;
 letter-spacing:.12em !important;color:#777 !important;
}
@media(max-width:800px){
 body #photographer .section-title-top > .section-subtitle,body #plan .section-title-top > h2,
 body #flow .section-title-top > .atoha-flow-subtitle,body #faq .section-title-top > h2,
 body #gallery .section-title-top > h2,body #gallery .section-title-top > .section-subtitle,
 body #contact .section-title-top > h2,body #contact .section-title-top > .section-subtitle{font-size:14px !important;}
}
/* Five columns get the full content width; avoid a third line in step 02. */
@media(min-width:801px){
 .atoha-flow-section .wrap{max-width:1320px;width:calc(100% - 64px);}
 .atoha-flow-steps{gap:10px;}
 .atoha-flow-step p{max-width:none;width:100%;font-size:clamp(11px,.94vw,13px);letter-spacing:0;line-height:1.85;}
 .atoha-flow-step p br{display:block;}
 .atoha-flow-step:nth-child(2) p{white-space:nowrap;}
}
/* Flow markers are decorative, so hover animates without implying a click. */
.atoha-flow-number{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background-color .3s ease;}
.atoha-flow-step:hover .atoha-flow-number{transform:translateY(-4px) scale(1.09);box-shadow:0 8px 18px rgba(105,77,54,.25);background-color:#96775e !important;}
/* Match the hover motion of the site's other editorial text links. */
.concept-about-link{display:inline-flex;align-items:center;gap:.4em;transition:color .3s ease,transform .3s ease,border-color .3s ease;}
.concept-about-link span{display:inline-block;transition:transform .3s ease;}
.concept-about-link:hover,.concept-about-link:focus-visible{transform:translateY(-2px);color:#a88c73;}
.concept-about-link:hover span,.concept-about-link:focus-visible span{transform:translate(3px,-3px);}
@media(prefers-reduced-motion:reduce){.site-header .header-reserve.header-reserve-art,.site-header .menu-button,.atoha-flow-number,.concept-about-link,.concept-about-link span{transition:none !important;}}

/* v3.151: accessible plan navigation and balanced two-choice reservation modal */
.drawer-sub a{min-height:32px;display:flex !important;align-items:center;padding:10px 0 !important;line-height:1.4 !important;}
@media(max-width:800px){.drawer-sub a{min-height:35px;padding:11px 0 !important;line-height:1.45 !important;}.drawer{overflow-y:auto;overscroll-behavior:contain;}}
.contact-modal-options{border-top:1px solid var(--line);}
.contact-modal-option{min-height:94px;grid-template-columns:42px minmax(0,1fr) 24px;padding:22px 0;}
.contact-modal-option:last-child{border-bottom:1px solid var(--line);}
.contact-modal-panel{max-width:580px;}
.contact-modal-footer{margin-top:22px;}
/* Detail-page English headings: explicitly override older, more specific font rules. */
body .subpage .sub-hero .subpage-title-block > .section-label,
body .subpage .about-title-block > .section-label,
body .subpage .profile-title-block > .section-label,
body .subpage .plan-hero .plan-hero-copy > .section-label,
body .subpage .plan-hero .section-label,
body .subpage .at-flow-hero h1{font-family:"Cormorant Garamond",Georgia,serif !important;}
body .subpage .at-flow-hero h1{font-size:clamp(72px,9vw,116px) !important;line-height:1.05 !important;letter-spacing:.08em !important;margin:12px 0 24px !important;}
@media(max-width:800px){body .subpage .at-flow-hero h1{font-size:clamp(64px,16vw,90px) !important;}}


/* v3.152 — restrained tactile interactions and deep-link section spacing */
.drawer-nav > a,.drawer-sub a{transition:color .22s ease,background-color .22s ease,padding-left .22s ease,border-color .22s ease !important;}
.drawer-nav > a:hover,.drawer-nav > a:focus-visible,.drawer-sub a:hover,.drawer-sub a:focus-visible{color:#96775e !important;background:rgba(198,179,157,.10);padding-left:9px !important;border-bottom-color:#c6b39d;}
.contact-modal-line{display:inline-flex;align-items:center;gap:7px;transition:transform .24s ease,color .24s ease,box-shadow .24s ease,border-color .24s ease !important;}
.contact-modal-line img{transition:transform .24s ease !important;}
.contact-modal-line:hover,.contact-modal-line:focus-visible{transform:translateY(-2px);color:#96775e !important;box-shadow:0 5px 12px rgba(95,72,53,.10);border-color:#a88c73 !important;}
.contact-modal-line:hover img,.contact-modal-line:focus-visible img{transform:translate(2px,-2px) scale(1.06);}
/* Keep the existing beige fills and wording, replace the heavy raised styling. */
.site-header .header-reserve.header-reserve-art,.site-header .menu-button{
 border:1px solid rgba(255,255,255,.58) !important;
 box-shadow:0 3px 8px rgba(74,52,36,.13),0 1px 2px rgba(74,52,36,.10),inset 0 1px 0 rgba(255,255,255,.26) !important;
 transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,filter .24s ease !important;
}
.site-header .header-reserve.header-reserve-art:hover,.site-header .menu-button:hover{
 transform:translateY(-2px) !important;filter:brightness(1.045);
 box-shadow:0 7px 16px rgba(74,52,36,.19),0 2px 4px rgba(74,52,36,.10),inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.site-header .header-reserve.header-reserve-art:active,.site-header .menu-button:active{
 transform:translateY(1px) scale(.97) !important;filter:brightness(.98);
 box-shadow:0 1px 3px rgba(74,52,36,.16),inset 0 2px 4px rgba(74,52,36,.09) !important;
}
.site-header .header-reserve.header-reserve-art:focus-visible,.site-header .menu-button:focus-visible{outline:2px solid #8d735d;outline-offset:3px;}
.at-flow-item>p .at-flow-sentence-break{display:block;content:"";}
#plan{scroll-margin-top:90px;}
@media(prefers-reduced-motion:reduce){.drawer-nav>a,.drawer-sub a,.contact-modal-line,.contact-modal-line img,.site-header .header-reserve.header-reserve-art,.site-header .menu-button{transition:none !important;}}

/* v3.154 — FAQ hover/focus feedback; preserve the accordion behavior */
#faq .faq-list details{transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease;}
#faq .faq-list summary{transition:color .25s ease,padding-left .25s ease;}
#faq .faq-list summary::after{transition:transform .25s ease,color .25s ease;}
@media (hover:hover){
  #faq .faq-list details:hover{background-color:rgba(198,179,157,.085);box-shadow:inset 3px 0 0 rgba(168,140,115,.65);}
  #faq .faq-list details:hover summary{color:#96775e;padding-left:10px;}
  #faq .faq-list details:hover summary::after{transform:rotate(90deg);color:#96775e;}
}
#faq .faq-list details:focus-within{background-color:rgba(198,179,157,.085);}
#faq .faq-list summary:focus-visible{outline:2px solid #a88c73;outline-offset:4px;}
@media (prefers-reduced-motion:reduce){#faq .faq-list details,#faq .faq-list summary,#faq .faq-list summary::after{transition:none !important;}}

/* v3.155: quiet, unified footer */
.site-footer{border-top:1px solid #e9e0d8;background:#faf7f3;padding:48px max(24px,calc((100vw - 1160px)/2)) 22px}
.site-footer .footer-inner{align-items:center;gap:28px;flex-wrap:wrap}
.site-footer .footer-logo-image{width:120px}
.site-footer .footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px 25px;font-size:12px;letter-spacing:.07em}
.site-footer .footer-links a{transition:color .25s ease,transform .25s ease;display:inline-block}
@media(hover:hover){.site-footer .footer-links a:hover{color:#967b65;transform:translateY(-2px)}}
.site-footer .copyright{margin-top:28px;padding-top:16px;border-top:1px solid #e9e0d8;text-align:center;font-size:10px;letter-spacing:.1em}
@media(max-width:800px){.site-footer{padding:36px 24px 20px}.site-footer .footer-inner{align-items:flex-start;gap:24px}.site-footer .footer-links{gap:14px 22px}}


/* v3.159: translucent header controls; preserve fully opaque labels/icons.
   Override older solid-fill declarations for both desktop and mobile. */
.site-header .header-reserve.header-reserve-art,
.site-header .menu-button,
.site-header .header-reserve.header-reserve-art:hover,
.site-header .header-reserve.header-reserve-art:focus,
.site-header .header-reserve.header-reserve-art:focus-visible,
.site-header .menu-button:hover,
.site-header .menu-button:focus,
.site-header .menu-button:focus-visible {
  background:rgba(176,148,126,.76) !important;
  background-color:rgba(176,148,126,.76) !important;
  border-color:rgba(255,255,255,.94) !important;
  opacity:1 !important;
  -webkit-backdrop-filter:blur(7px) !important;
  backdrop-filter:blur(7px) !important;
}
.site-header .menu-button,
.site-header .menu-button:hover,
.site-header .menu-button:focus,
.site-header .menu-button:focus-visible {
  border-color:rgba(255,255,255,.28) !important;
}


/* v3.162: Noren Ange-inspired editorial footer */
.site-footer{
  border-top:1px solid #e7dfd6;
  background:#faf7f3;
  padding:78px max(28px,calc((100vw - 1180px)/2)) 24px;
  color:#3f3832;
}
.site-footer .footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,1.1fr) minmax(560px,1.7fr);
  gap:90px;
  align-items:start;
}
.site-footer .footer-brand{
  padding-top:2px;
}
.site-footer .footer-logo-image-link{
  display:inline-block;
  line-height:0;
  transition:opacity .25s ease,transform .25s ease;
}
.site-footer .footer-logo-image{
  display:block;
  width:190px;
  height:auto;
  object-fit:contain;
}
@media(hover:hover){
  .site-footer .footer-logo-image-link:hover{opacity:.78;transform:translateY(-2px)}
}
.site-footer .footer-brand-copy{
  margin:24px 0 0;
  font-size:11px;
  letter-spacing:.12em;
  color:#746a62;
}
.site-footer .footer-brand-tagline{
  margin:10px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:16px;
  letter-spacing:.1em;
  color:#927b68;
}
.site-footer .footer-socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:30px;
}
.site-footer .footer-socials a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#4d443d;
  font-size:11px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:color .25s ease,transform .25s ease;
}
.site-footer .footer-socials a span{
  font-size:12px;
  transition:transform .25s ease;
}
@media(hover:hover){
  .site-footer .footer-socials a:hover{color:#927b68;transform:translateY(-2px)}
  .site-footer .footer-socials a:hover span{transform:translate(2px,-2px)}
}
.site-footer .footer-nav{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:42px;
  padding-top:4px;
}
.site-footer .footer-nav-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
.site-footer .footer-nav-title{
  margin:0 0 7px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:16px;
  line-height:1;
  letter-spacing:.16em;
  color:#9a806a;
}
.site-footer .footer-nav-group a{
  display:inline-block;
  color:#4d443d;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.07em;
  text-decoration:none;
  transition:color .25s ease,transform .25s ease;
}
@media(hover:hover){
  .site-footer .footer-nav-group a:hover{color:#927b68;transform:translateX(3px)}
}
.site-footer .footer-bottom{
  max-width:1180px;
  margin:70px auto 0;
  padding-top:18px;
  border-top:1px solid #e7dfd6;
  text-align:left;
}
.site-footer .footer-copyright{
  margin:0;
  font-size:9px;
  letter-spacing:.13em;
  color:#948a81;
}
@media(max-width:900px){
  .site-footer{padding:60px 24px 22px}
  .site-footer .footer-inner{grid-template-columns:1fr;gap:52px}
  .site-footer .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .site-footer .footer-bottom{margin-top:52px}
}
@media(max-width:620px){
  .site-footer{padding:48px 22px 20px}
  .site-footer .footer-logo-image{width:165px}
  .site-footer .footer-brand-copy{margin-top:20px;font-size:10px}
  .site-footer .footer-socials{margin-top:25px;gap:12px 20px}
  .site-footer .footer-nav{grid-template-columns:1fr 1fr;gap:38px 26px}
  .site-footer .footer-nav-group:last-child{grid-column:1 / -1}
  .site-footer .footer-nav-group{gap:11px}
  .site-footer .footer-nav-title{font-size:15px;margin-bottom:6px}
  .site-footer .footer-nav-group a{font-size:11px}
  .site-footer .footer-bottom{margin-top:42px}
}

/* v3.163: footer SNS links changed to icon-only buttons */
.site-footer .footer-socials{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}
.site-footer .footer-socials .footer-social-icon{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  color:inherit;
  text-decoration:none;
  transform:none;
  transition:opacity .25s ease, transform .25s ease;
}
.site-footer .footer-socials .footer-social-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none;
  transition:transform .25s ease, opacity .25s ease;
}
/* v3.164: normalize the visible size of LINE and Instagram icons.
   The LINE source image contains transparent padding, so its image box
   is enlarged inside the same 32px/30px button to match Instagram visually. */
.site-footer .footer-socials .footer-line img{
  width:133.333%;
  height:133.333%;
  max-width:none;
  max-height:none;
}
.site-footer .footer-socials .footer-instagram img{
  border-radius:8px;
}
@media(hover:hover){
  .site-footer .footer-socials .footer-social-icon:hover,
  .site-footer .footer-socials .footer-social-icon:focus-visible{
    opacity:.78;
    transform:translateY(-2px);
    outline:none;
  }
  .site-footer .footer-socials .footer-social-icon:hover img,
  .site-footer .footer-socials .footer-social-icon:focus-visible img{
    transform:scale(1.04);
  }
}
@media(max-width:800px){
  .site-footer .footer-socials{margin-top:24px;gap:13px;}
  .site-footer .footer-socials .footer-social-icon{width:30px;height:30px;}
}


/* v3.165: header controls restored to solid button styling */
.site-header .header-reserve.header-reserve-art,
.site-header .menu-button,
.site-header .header-reserve.header-reserve-art:hover,
.site-header .header-reserve.header-reserve-art:focus,
.site-header .header-reserve.header-reserve-art:focus-visible,
.site-header .menu-button:hover,
.site-header .menu-button:focus,
.site-header .menu-button:focus-visible{
  background:#c8b49f !important;
  background-color:#c8b49f !important;
  background-image:none !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* =========================================================
   v3.167 — Photographer section redesign
   ========================================================= */
#photographer .photographer-profile-redesign{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:54px;
}

#photographer .photographer-name{
  position:relative;
  z-index:2;
  margin-bottom:-16px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(28px,3vw,40px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.08em;
  color:#2f2a26;
}

#photographer .photographer-portrait-oval{
  width:min(330px,68vw);
  aspect-ratio:3 / 4.25;
  margin:0;
  overflow:hidden;
  border-radius:50%;
  background:#eee8e1;
}

#photographer .photographer-portrait-oval img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

#photographer .photographer-intro{
  margin:28px auto 0;
  max-width:620px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:14px;
  font-weight:400;
  line-height:2;
  letter-spacing:.08em;
  color:#333;
}

#photographer .photographer-profile-link{
  margin:28px auto 0;
}

@media (max-width:800px){
  #photographer .photographer-profile-redesign{
    margin-top:42px;
  }
  #photographer .photographer-name{
    margin-bottom:-11px;
    font-size:30px;
  }
  #photographer .photographer-portrait-oval{
    width:min(270px,72vw);
    aspect-ratio:3 / 4.35;
  }
  #photographer .photographer-intro{
    margin-top:24px;
    font-size:12px;
    line-height:2;
    letter-spacing:.05em;
  }
  #photographer .photographer-profile-link{
    margin-top:24px;
  }
}

/* =========================================================
   v3.168 — Photographer portrait / typography / link alignment refinement
   ========================================================= */
#photographer .photographer-profile-redesign{
  align-items:center;
}

#photographer .photographer-name{
  margin-bottom:12px;
}

#photographer .photographer-portrait-oval{
  aspect-ratio:4 / 5;
  margin:0;
  border-radius:50%;
}

/* Match the Photographer description to the Plan description typography. */
#photographer .photographer-intro{
  font-size:12px;
  font-weight:400;
  line-height:2;
  letter-spacing:normal;
}

/* Keep the detail link on the right edge of the same text column. */
#photographer .photographer-profile-link{
  width:max-content;
  max-width:100%;
  margin:28px 0 0 auto;
  text-align:right;
}

@media(max-width:800px){
  #photographer .photographer-name{
    margin-bottom:10px;
  }

  #photographer .photographer-portrait-oval{
    aspect-ratio:4 / 5;
  }

  #photographer .photographer-intro{
    font-size:12px;
    line-height:2;
    letter-spacing:normal;
  }

  #photographer .photographer-profile-link{
    width:max-content;
    max-width:100%;
    margin:24px 0 0 auto;
    text-align:right;
  }
}


/* =========================================================
   v3.171 — header control sizing / Photographer portrait refinement
   ========================================================= */
.site-header .header-reserve.header-reserve-art{
  height:40px !important;
  padding:0 18px !important;
  border:0 !important;
  border-color:transparent !important;
  font-size:10px !important;
}

.site-header .header-reserve.header-reserve-art:hover,
.site-header .header-reserve.header-reserve-art:focus,
.site-header .header-reserve.header-reserve-art:focus-visible{
  border:0 !important;
  border-color:transparent !important;
}

.site-header .menu-button,
.site-header .menu-button:hover,
.site-header .menu-button:focus,
.site-header .menu-button:focus-visible{
  width:40px !important;
  height:40px !important;
  border:0 !important;
  border-color:transparent !important;
}

.site-header .menu-button span{
  width:16px !important;
}

#photographer .photographer-portrait-oval{
  aspect-ratio:1 / 1 !important;
  border-radius:0 !important;
}

@media(max-width:800px){
  .site-header .header-reserve.header-reserve-art{
    height:38px !important;
    padding:0 15px !important;
  }

  .site-header .menu-button,
  .site-header .menu-button:hover,
  .site-header .menu-button:focus,
  .site-header .menu-button:focus-visible{
    width:38px !important;
    height:38px !important;
  }

  .site-header .menu-button span{
    width:15px !important;
  }

  #photographer .photographer-portrait-oval{
    aspect-ratio:1 / 1 !important;
    border-radius:0 !important;
  }
}

/* v3.172 — Photographer portrait: slightly narrower square */
#photographer .photographer-portrait-oval{
  width:280px !important;
  max-width:62vw !important;
}

@media(max-width:800px){
  #photographer .photographer-portrait-oval{
    width:220px !important;
    max-width:62vw !important;
  }
}


/* v3.173 — PC menu rhythm + Photographer profile refinements */
@media(min-width:801px){
  /* Give the PC drawer a more generous vertical rhythm so the lower-right
     area feels intentional rather than leaving a large dead zone. */
  .drawer{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }
  .drawer-top{
    margin-bottom:22px !important;
  }
  .drawer-nav > a{
    padding-top:19px !important;
    padding-bottom:19px !important;
    line-height:1.5 !important;
  }
  .drawer-sub{
    margin:7px 0 11px !important;
  }
  .drawer-sub a{
    padding-top:12px !important;
    padding-bottom:12px !important;
    line-height:1.45 !important;
  }
  .drawer-cta-wrap{
    margin-top:22px !important;
    gap:9px !important;
  }
}

/* Photographer detail title: centered with about 2/3 of the former vertical spacing. */
.profile-title-block .profile-page-title{
  text-align:center !important;
  margin-top:clamp(120px,13.35vw,193px) !important;
  margin-bottom:clamp(120px,13.35vw,193px) !important;
}

/* Profile now sits directly below the first portrait. */
.profile-after-first-photo{
  max-width:760px;
  margin:0 auto 72px;
}
.profile-after-first-photo .profile-final-label{
  margin:0 0 18px !important;
}
.profile-after-first-photo .profile-facts-large{
  margin:0 auto !important;
}

@media(max-width:800px){
  .profile-title-block .profile-page-title{
    text-align:center !important;
    margin-top:120px !important;
    margin-bottom:120px !important;
  }
  .profile-after-first-photo{
    margin-bottom:56px;
  }
}

/* v3.174 — Photographer detail spacing refinements */
@media (min-width:801px){
  /* Reduce the gap between the first heading and the first photo to about half. */
  .profile-title-block .profile-page-title{
    margin-bottom:clamp(60px,6.675vw,96.5px) !important;
  }

  /* Increase the gap between Profile and the following concept heading. */
  .profile-after-first-photo{
    margin-bottom:112px !important;
  }

  /* Increase the gap between the first story text and the second photo. */
  .profile-story-grid{
    margin-top:140px !important;
  }

  /* Increase the gap between the second photo and the following concept heading. */
  .profile-story-grid{
    margin-bottom:140px !important;
  }
}

@media (max-width:800px){
  /* Keep the mobile layout unchanged except for the requested spacing refinements. */
  .profile-after-first-photo{
    margin-bottom:82px !important;
  }
  .profile-story-grid{
    margin-top:120px !important;
    margin-bottom:120px !important;
  }
}

/* v3.176 — Photographer detail body copy reduced to match About Atoha visual size */
.profile-story .story-copy p{
  font-family:var(--serif) !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:2.05 !important;
  letter-spacing:.055em !important;
}


/* v3.177 — Match homepage Photographer description to homepage Flow description */
@media (min-width:801px){
  #photographer .photographer-intro{
    font-family:inherit !important;
    font-size:clamp(11px,.94vw,13px) !important;
    font-weight:400 !important;
    line-height:1.85 !important;
    letter-spacing:0 !important;
  }
}
@media (max-width:800px){
  #photographer .photographer-intro{
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:2 !important;
    letter-spacing:0 !important;
  }
}


/* v3.179 — Photographer detail story copy centered */
.profile-story .story-copy,
.profile-story .story-copy p,
.profile-story .story-copy h2{
  text-align:center !important;
}

/* Smartphone-only line breaks: hidden on desktop, enabled by sp.css on small screens. */
.sp-break { display: none; }


/* v3.184 — remove artificial white top highlight from buttons site-wide */
.header-reserve,
.header-reserve-art,
.btn,
.drawer-bottom-btn,
.contact-modal-option,
.at-flow-action,
.plan-reference-btn,
.btn-line,
.btn-fill{
  box-shadow:0 5px 13px rgba(75,51,33,.14) !important;
}
.site-header .header-reserve.header-reserve-art,
.site-header .header-reserve.header-reserve-art:hover,
.site-header .header-reserve.header-reserve-art:active,
.site-header .menu-button,
.site-header .menu-button:hover,
.site-header .menu-button:active{
  box-shadow:0 5px 13px rgba(75,51,33,.14) !important;
  border:0 !important;
}
.site-header .header-reserve.header-reserve-art::before,
.site-header .header-reserve.header-reserve-art::after,
.site-header .menu-button::before,
.site-header .menu-button::after,
.btn::before,
.btn::after,
.btn-fill::before,
.btn-fill::after,
.btn-line::before,
.btn-line::after{
  box-shadow:none !important;
  background-image:none !important;
}