@media (max-width:800px){
  .wrap{width:min(100% - 28px,620px)}
  .site-header{padding:16px 14px}
  .site-logo{font-size:20px}
  .header-actions{gap:7px}
  .header-reserve{font-size:8px;padding:9px 11px}
  .menu-button{width:42px;height:42px}
  .hero-minimal{min-height:620px}
  .hero-wordmark h1{font-size:clamp(43px,13vw,66px);line-height:1.55}
  .hero-about-link{right:18px;bottom:28px}
  .hero-scroll{left:18px;bottom:28px}
  .sp-only{display:block}
  .section{padding:90px 0}
  .section-heading{margin-bottom:36px}
  .section-heading h2{font-size:29px}
  .profile-visual{width:78%;margin:0 auto 40px}
  .profile-summary h2{font-size:34px}
  .plan-grid{grid-template-columns:1fr}
  .plan-card figure{aspect-ratio:4/3}
  .plan-card-meta{grid-template-columns:36px 1fr;gap:0}
  .plan-card-meta small{grid-column:2}
  .flow-list li{grid-template-columns:55px 1fr}
  .gallery-head{align-items:flex-start;flex-direction:column;gap:12px}
  .gallery-head h2{font-size:30px}
  .gallery-editorial{grid-template-columns:1fr 1fr;grid-template-rows:270px 170px 170px}
  .gallery-a{grid-column:1/3}
  .gallery-b{grid-column:1/3}
  .contact-box{padding:55px 20px}
  .contact-actions{flex-direction:column}
  .btn{width:100%}
  .footer-inner{flex-direction:column}
  .footer-links{flex-wrap:wrap}
  .subpage{padding-top:74px}
  .sub-hero{padding:85px 0 60px}
  .sub-hero h1,.plan-hero h1{font-size:42px}
  .story-section,.profile-story,.plan-detail-section,.plan-info{padding:55px 0 85px}
  .story-layout,.profile-story-grid,.plan-hero-grid,.two-column-info{grid-template-columns:1fr;gap:34px}
  .story-layout{margin-bottom:85px}
  .story-layout.reverse .story-image{order:2}
  .story-copy.center{text-align:left;margin:60px auto}
  .profile-story-main{width:85%;margin-bottom:65px}
  .price-grid{grid-template-columns:1fr}
  .info-block{padding:28px 22px}
}

@media (max-width:800px){
  .hero-photo-copy{left:20px;right:14px;bottom:8vh}
  .hero-photo-copy h1{font-size:clamp(22px,7.2vw,34px);white-space:nowrap;letter-spacing:-.015em}
  .hero-photo-copy p{font-size:9px;padding-left:.7em}
  .concept-intro{min-height:62vh;padding:90px 14px 130px}
  .concept-intro h2{font-size:clamp(21px,7vw,30px);white-space:nowrap;letter-spacing:-.025em}
  .concept-intro .hero-about-link{right:4px;top:calc(100% + 72px)}
}

@media (max-width:800px){
  .concept-intro{
    min-height:82vh;
    padding:150px 10px 180px;
  }
  .concept-ja{
    font-size:clamp(20px,6.65vw,29px);
    letter-spacing:-.025em;
  }
  .concept-en{
    font-size:8px;
    letter-spacing:.09em;
    margin-top:17px;
  }
  .concept-intro .hero-about-link{
    top:calc(100% + 110px);
  }

  .gallery-section{
    padding:95px 0;
  }
  .gallery-wrap{
    width:calc(100% - 20px);
  }
  .gallery-title{
    margin-bottom:38px;
  }
  .gallery-title h2{
    font-size:30px;
  }
  .gallery-title p{
    font-size:9px;
    margin-top:13px;
  }
  .gallery-classic{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .gallery-classic figure{
    aspect-ratio:4/5;
  }
}

@media (max-width:800px){
  .site-logo-image{
    width:84px;
    max-height:62px;
  }
  .drawer-logo-image{
    width:112px;
    max-height:84px;
  }

  .concept-ja{
    font-size:clamp(19px,5.9vw,27px);
    white-space:nowrap;
  }
  .concept-en{
    font-size:clamp(12px,3.8vw,16px);
    line-height:1.45;
    letter-spacing:.015em;
    white-space:nowrap;
  }
  .concept-about-link{
    margin-top:30px;
    font-size:10px;
  }

  .section-title-top{
    margin-bottom:34px;
  }
  .section-label{
    font-size:17px;
    margin-bottom:14px;
  }

  .photographer{
    padding-top:100px;
  }
  .profile-visual{
    width:62%;
    max-width:260px;
    margin:0 auto 36px;
  }

  .gallery-title{
    margin-bottom:36px;
  }
}

@media (max-width:800px){
  .site-header .logo-image-link{
    padding:6px 9px;
    border-radius:8px;
  }
  .site-logo-image{
    width:76px;
  }

  .concept-intro{
    margin-top:64px;
    min-height:92vh;
    padding-top:175px;
    padding-bottom:185px;
  }

  .concept-about-link{
    margin-top:54px;
  }

  .section-title-top,
  .section-heading.section-title-top{
    padding-top:30px;
    margin-bottom:40px;
  }

  .section-mark{
    width:28px;
    height:2px;
    left:1px;
  }

  .section-label{
    font-size:24px;
    margin-bottom:13px;
  }

  .section-subtitle,
  .section-heading h2,
  .gallery-title h2{
    font-size:24px;
    line-height:1.45;
  }

  .profile-visual{
    width:54%;
    max-width:220px;
  }

  .profile-summary h2{
    font-size:30px;
  }
}

@media (max-width:800px){
  :root{
    --site-header-height:68px;
  }

  .site-header{
    height:var(--site-header-height);
    padding:8px 12px;
  }

  .site-logo-image{
    width:88px;
    height:44px;
  }

  .hero-photo{
    margin-top:var(--site-header-height);
    height:calc(100svh - var(--site-header-height));
    min-height:540px;
  }

  .section-title-top,
  .section-heading.section-title-top{
    padding-left:36px;
  }

  .section-mark{
    left:1px;
    top:7px;
    width:27px;
  }

  .plan-reference{
    padding-top:95px;
    padding-bottom:110px;
  }

  .plan-reference-wrap{
    width:calc(100% - 24px);
  }

  .plan-reference-grid{
    grid-template-columns:1fr;
    gap:78px;
    padding:0;
  }

  .plan-reference-item{
    min-height:320px;
  }

  .plan-reference-photo{
    width:80%;
  }

  .plan-reference-vertical{
    font-size:clamp(38px,13vw,58px);
  }

  .plan-reference-label{
    width:56%;
    min-height:108px;
    bottom:4%;
    padding:22px 18px 18px 22px;
  }

  .plan-reference-label h3{
    font-size:21px;
    margin-bottom:15px;
  }

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

@media (max-width:800px){
  .concept-ja{
    font-size:clamp(18px,5.1vw,23px) !important;
  }
  .concept-en{
    font-size:clamp(9px,2.8vw,12px) !important;
  }

  .section-label{
    font-size:24px !important;
  }
  .section-subtitle,
  .section-heading h2,
  .gallery-title h2{
    font-size:19px !important;
  }

  .plan-reference-photo{
    width:72% !important;
  }
  .plan-reference-item{
    min-height:290px;
  }
  .plan-reference-label{
    width:54%;
  }
}

@media (max-width:800px){
  .section-subtitle,
  .section-heading h2,
  .gallery-title h2{
    font-size:16px !important;
  }
}

@media (max-width:800px){
  .contact-modal-panel{
    padding:42px 22px 30px;
  }
  .contact-modal-label{
    font-size:19px;
  }
  .contact-modal-panel h2{
    font-size:17px;
  }
  .contact-modal-option{
    grid-template-columns:34px 1fr 20px;
  }

  body .subpage .sub-hero h1.about-page-title{
    font-size:24px;
    line-height:1.7;
  }

  body .subpage .sub-hero h1.profile-page-title{
    font-size:22px;
    white-space:nowrap;
  }
}

@media (max-width:800px){
  .subpage-title-block .section-label{
    margin-bottom:30px !important;
  }
}

@media (max-width:800px){
  .about-title-block .section-label,
  .profile-title-block .section-label{
    margin-bottom:46px !important;
  }

  .profile-title-block{
    margin-bottom:18px !important;
  }
}

@media(max-width:800px){.section-mark.section-mark-illust{width:48px!important;height:48px!important;left:-8px!important;top:-18px!important}}

@media (max-width:800px){
  .section-mark.section-mark-illust{
    width:56px !important;
    height:56px !important;
    left:-4px !important;
    top:-21px !important;
  }
}

@media (max-width:800px){
  .section-mark.section-mark-illust{
    left:-26px !important;
  }
}

@media(max-width:800px){
.header-reserve{min-width:86px}
.section-mark.section-mark-illust{width:48px!important;height:48px!important;left:-2px!important;top:-18px!important}
.section-title-top,.section-heading.section-title-top{padding-left:46px!important}
.drawer-cta-two{grid-template-columns:1fr 1fr}
.profile-story-main.profile-story-main-small{width:58%!important;max-width:260px!important}
.contact-modal-footer{flex-direction:column;align-items:flex-start;gap:12px}
}

@media (max-width:800px){
  .plan-hero .section-label{
    font-size:15px !important;
  }
  .plan-hero h1{
    font-size:26px !important;
  }

  .plan-info .info-block .section-label{
    font-size:17px !important;
  }
  .plan-info .info-block h2{
    font-size:14px !important;
  }

  .option-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .option-price{
    justify-self:start;
  }
}
\n@media (max-width:800px){.drawer-bottom-btn{min-height:56px}.contact-modal-line img{width:26px;height:26px}}\n
@media (max-width:800px){
  .option-row{
    grid-template-columns:1fr auto;
    gap:14px;
  }

  .rental-props-card{
    grid-template-columns:1fr;
    gap:20px;
  }

  .rental-props-note{
    justify-content:flex-end;
  }
}

@media (max-width:800px){
  .detail-title-marker{
    width:48px;
    height:48px;
    left:-6px;
    top:-26px;
  }

  .plan-hero-copy{
    padding-left:42px;
  }

  .rental-props-card{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .rental-props-photo{
    width:min(70%,240px);
    justify-self:end;
  }
}

@media (max-width:800px){
  .detail-title-marker{
    left:-18px !important;
  }

  .rental-props-heading-row{
    grid-template-columns:1fr 110px;
    gap:14px;
  }
  .rental-props-heading-photo{
    width:110px;
  }

  .drawer-bottom-line{
    grid-template-columns:auto 26px 18px !important;
  }
}

@media (max-width:800px){
  .drawer-cta-wrap.drawer-cta-two{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .drawer-bottom-line,
  .drawer-bottom-reserve{
    min-height:46px !important;
    padding:7px 10px !important;
    font-size:11px !important;
  }
  .drawer-bottom-line img{
    width:19px !important;
    height:19px !important;
  }
}


/* v3.19 — requested smartphone-only refinements */
@media (max-width:800px){
  /* ⑥ Modal footer: right aligned */
  .contact-modal-footer{align-items:flex-end !important;text-align:right !important;}
  .contact-modal-line,.contact-modal-mail{align-self:flex-end !important;text-align:right !important;}

  /* ⑦ About heading: one size smaller */
  .about-time-heading{font-size:20px !important;line-height:1.7 !important;}

  /* ⑧ Section illustration: vertically beside the title, not upper-left */
  .section-title-top{position:relative;}
  .section-title-top .section-mark.section-mark-illust{
    width:42px !important;height:42px !important;left:0 !important;top:4px !important;
  }

  /* ⑨ Profile headings: two sizes smaller */
  .profile-work-heading,.profile-now-heading{font-size:18px !important;line-height:1.75 !important;}

  /* ⑩ Shichigosan price subtitle smaller + rule under 03 */
  .plan-detail-section .section-heading h2{font-size:14px !important;}
  .plan-detail-section .price-card:last-child{border-bottom:1px solid var(--line) !important;}
}


@media (max-width:800px){
  /* ④ Contact buttons in one horizontal row */
  #contact .contact-actions{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  #contact .contact-actions .btn{
    width:auto !important;
    min-width:0 !important;
    flex:1 1 0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  #contact .contact-box h2{
    line-height:1.35 !important;
  }

  /* ⑤ Gallery gap larger on smartphone too */
  .gallery-classic{gap:14px !important;}

  /* ⑥ Photographer detail link right aligned on smartphone */
  #photographer .profile-summary .text-link{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:0 !important;
    text-align:right !important;
  }

  /* ⑦ About title: remove forced line break on smartphone */
  .about-page-title br{display:none !important;}
  .about-page-title{white-space:nowrap !important;font-size:17px !important;letter-spacing:.01em !important;}

  /* ⑧ final Profile label */
  .profile-final-label{margin-top:56px;font-size:18px;}

  /* ⑨ Shichigosan CTA remains a single row like menu bar */
  .shichigosan-contact-actions{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  .shichigosan-contact-actions .btn{
    width:auto !important;
    min-width:0 !important;
    flex:1 1 0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}


/* =========================================================
   v3.21 — smartphone only
   ========================================================= */
@media (max-width:800px){
  /* ① PC-only break should not force a break on smartphone */
  .profile-now-heading .pc-break{
    display:inline;
  }

  /* ⑤ Restore natural wrapping for About title */
  .about-page-title{
    white-space:normal !important;
    font-size:20px !important;
    line-height:1.75 !important;
  }
  .about-page-title br{
    display:block !important;
  }

  /* ⑥ Photographer lead: fit on one line */
  #photographer .profile-lead{
    font-size:11px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }

  /* ⑦ Shichigosan detail-plan descriptions: fit each on one line */
  .plan-detail-section .price-card p{
    font-size:10px !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
  }
}

/* v3.23: standard plan pages — keep one trailing price rule on smartphone */
@media (max-width:800px){
  body.standard-plan-page .plan-detail-section .price-card:last-child{
    border-bottom:1px solid var(--line) !important;
  }
}

@media (max-width:800px){
  .opening-intro-message{
    padding:22px 14px;
  }
  .opening-intro-message p{
    font-size:clamp(20px,6.2vw,28px);
    letter-spacing:.015em;
    white-space:nowrap;
  }
}


@media (max-width:800px){
  .opening-intro-photo picture{
    width:78vw !important;
    height:58vh !important;
    max-height:560px !important;
  }
  .opening-intro-photo:nth-child(1) picture{
    width:76vw !important;
    height:61vh !important;
  }
  .opening-intro-photo:nth-child(2) picture{
    width:84vw !important;
    height:52vh !important;
  }
  .opening-intro-photo:nth-child(3) picture{
    width:72vw !important;
    height:63vh !important;
  }
  .opening-intro-photo:nth-child(4) picture{
    width:86vw !important;
    height:54vh !important;
  }
  .opening-intro-photo:nth-child(5) picture{
    width:78vw !important;
    height:60vh !important;
  }

  .opening-intro-message p{
    font-size:clamp(19px,5.2vw,25px) !important;
    letter-spacing:.045em !important;
    white-space:nowrap !important;
  }
  @keyframes openingMessageRefined{
    from{
      opacity:0;
      letter-spacing:.1em;
    }
    to{
      opacity:1;
      letter-spacing:.045em;
    }
  }
}

@media (max-width:800px){
  .opening-intro-photo picture,
  .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:34vw !important;
    height:25vh !important;
    max-width:180px !important;
    max-height:220px !important;
  }
}

@media (max-width:800px){
  .opening-intro-photo picture,
  .opening-intro-photo.is-active picture,
  .opening-intro-photo.is-leaving picture{
    width:34vw !important;
    height:25vh !important;
    max-width:180px !important;
    max-height:220px !important;
  }
  .opening-intro-message p,
  .opening-intro-message.is-visible p{
    font-size:clamp(19px,5.2vw,25px) !important;
    letter-spacing:.045em !important;
  }
}

@media (max-width:800px){
  .opening-intro-copy .concept-ja{
    font-size:clamp(18px,5.1vw,23px) !important;
    white-space:nowrap;
  }
}

@media (max-width:800px){
  .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:52vw !important;
    max-height:34vh !important;
    object-fit:contain !important;
  }
}

@media(max-width:800px){
  .opening-petal{
    width:11px;
    height:8px;
  }
}

@media(max-width:800px){
  .opening-petal{
    width:14px !important;
    height:19px !important;
  }
}

@media(max-width:800px){
  .opening-petal{
    width:15px !important;
    height:20px !important;
  }
}

@media(max-width:800px){
  .opening-petals{
    transform:translateX(-6vw);
  }
}


/* =========================================================
   2026-09-11 v3.134 — final mobile overrides
   ========================================================= */

@media (max-width:800px){

  /* ---- TOP section headings: truly left aligned ---- */
  body #photographer > .section-title-top,
  body #plan .plan-reference-wrap > .section-title-top,
  body #flow .wrap > .section-title-top,
  body #faq .wrap > .section-title-top,
  body #gallery .gallery-wrap > .section-title-top,
  body #contact .wrap > .section-title-top{
    box-sizing:border-box !important;
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    margin-left:12px !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:10px !important;
    justify-content:start !important;
    justify-items:start !important;
    text-align:left !important;
  }

  body #photographer .section-title-top > .section-mark.section-mark-illust,
  body #plan .section-title-top > .section-mark.section-mark-illust,
  body #flow .section-title-top > .section-mark.section-mark-illust,
  body #faq .section-title-top > .section-mark.section-mark-illust,
  body #gallery .section-title-top > .section-mark.section-mark-illust,
  body #contact .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;
    justify-self:start !important;
    align-self:center !important;
  }

  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{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:0 !important;
    justify-self:start !important;
    align-self:center !important;
    text-align:left !important;
  }

  body #photographer .section-title-top > .section-subtitle,
  body #plan .section-title-top > h2,
  body #plan .section-title-top > p,
  body #flow .section-title-top > h2,
  body #flow .section-title-top > p,
  body #faq .section-title-top > h2,
  body #gallery .section-title-top > h2,
  body #contact .section-title-top > h2{
    grid-column:2 !important;
    justify-self:start !important;
    text-align:left !important;
  }

  /* ---- Plan labels: allow box to extend beyond photo/card edge ---- */
  body .plan-reference-item{
    position:relative !important;
    overflow:visible !important;
  }

  body .plan-reference-photo{
    overflow:visible !important;
  }

  body .plan-reference-label{
    position:absolute !important;
    left:46% !important;
    top:60% !important;
    right:auto !important;
    bottom:auto !important;
    width:58% !important;
    min-height:126px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    padding:18px 14px 16px 18px !important;
  }

  body .plan-reference-label h3{
    font-size:20px !important;
    line-height:1.55 !important;
    margin:0 0 14px !important;
  }

  /* Wedding should stay on one line. */
  body .plan-reference-item:nth-child(5) .plan-reference-label h3{
    white-space:nowrap !important;
  }

  /* Business can wrap naturally, but gets enough horizontal room. */
  body .plan-reference-item:nth-child(6) .plan-reference-label h3{
    white-space:normal !important;
  }

  /* ---- About headline: horizontal + exact 3 lines ---- */
  body .about-redesign-title,
  body .about-redesign-title .concept-ja,
  body .about-redesign-title .concept-char{
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
  }

  body .about-redesign-title{
    width:100% !important;
    max-width:none !important;
    text-align:center !important;
  }

  body .about-redesign-title .concept-ja{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body .about-redesign-title .concept-char{
    display:inline-block !important;
    white-space:pre !important;
  }
}


/* =========================================================
   2026-09-11 v3.135 — mobile About second headline + Plan label
   ========================================================= */
@media (max-width:800px){

  /* About second animated headline: horizontal writing, two fixed lines. */
  body .about-redesign-time-heading,
  body .about-redesign-time-heading .concept-ja,
  body .about-redesign-time-heading .concept-char{
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
  }

  body .about-redesign-time-heading{
    width:100% !important;
    max-width:none !important;
    text-align:center !important;
  }

  body .about-redesign-time-heading .concept-ja{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body .about-redesign-time-heading .concept-char{
    display:inline-block !important;
    white-space:pre !important;
  }

  /* Plan labels: shift slightly right and tighten vertical spacing. */
  body .plan-reference-label{
    left:50% !important;
    top:58% !important;
    width:56% !important;
    min-height:116px !important;
    padding:12px 14px 12px 16px !important;
  }

  body .plan-reference-label h3{
    margin:0 0 8px !important;
    line-height:1.45 !important;
  }

  body .plan-reference-btn{
    margin-top:0 !important;
  }
}


/* =========================================================
   2026-09-11 v3.136 — mobile modal copy + concept spacing
   ========================================================= */
@media (max-width:800px){

  /* Reservation modal intro: explicit two-line copy. */
  .contact-modal-panel > p,
  .contact-modal-panel .contact-modal-intro{
    line-height:1.9 !important;
  }

  /*
    Reduce the large blank space around the TOP concept block to
    roughly 2/3 of the current amount, and make the whitespace
    above and below the concept section visually consistent.
  */
  .concept-intro{
    margin-top:42px !important;
    min-height:auto !important;
    padding-top:116px !important;
    padding-bottom:116px !important;
  }

  .concept-about-link{
    margin-top:36px !important;
  }

  /* Remove additional spacing before Photographer so the lower gap
     matches the newly reduced concept spacing instead of stacking. */
  #photographer.section{
    padding-top:60px !important;
  }
}

/* v3.139 final smartphone heading hierarchy */
@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(31px,8.3vw,48px) !important;line-height:1.2 !important;color:#C6B39D !important;font-family:"Cormorant Garamond", Georgia, serif !important;letter-spacing:.045em !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{font-size:clamp(16px,4.1vw,24px) !important;color:#333333 !important;}
 body #plan .section-title-top > p,body #flow .section-title-top > p{color:#333333 !important;}
}

/* v3.147: English headings: override legacy mobile typography without changing size or color. */
body .section-title-top > .section-label, body .section-heading.section-title-top > .section-label, body .subpage-title-block > .section-label, body .plan-hero .section-label, body .at-flow-hero h1, body .atoha-flow-section .section-heading h2 {font-family:"Cormorant Garamond", Georgia, serif !important;}

/* v3.176 — Keep Photographer detail body copy at the same restrained size */
@media(max-width:800px){
  .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.178 — smartphone homepage refinements */
@media (max-width:800px){
  /* Footer: place INFO directly under ABOUT */
  .site-footer .footer-nav-group:last-child{
    grid-column:2 !important;
  }

  /* Homepage descriptive copy that was 12px */
  #photographer .photographer-intro,
  #plan .section-title-top > p,
  #flow .atoha-flow-step p,
  #faq .faq-list p,
  #contact .contact-welcome{
    font-size:10px !important;
  }

  /* Photographer / Plan copy uses the same muted tone as Photo gallery copy */
  #photographer .photographer-intro,
  #plan .section-title-top > p{
    color:#9b9289 !important;
  }

  /* Prevent the mobile Flow guide line from extending below step 05 */
  .atoha-flow-steps:before{
    bottom:56px !important;
  }

  /* CONTACT LINE button: same compact footprint as the menu drawer LINE button */
  #contact .contact-actions .btn-line{
    flex:0 0 auto !important;
    width:calc((min(92vw,440px) - 68px) / 2) !important;
    min-width:0 !important;
    min-height:46px !important;
    padding:7px 10px !important;
  }
}


/* v3.179 — smartphone typography / footer / profile alignment refinements */
@media (max-width:800px){
  /* Keep ABOUT and INFO stacked in the right column without inheriting MENU's height. */
  .site-footer .footer-nav{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:26px !important;
    row-gap:14px !important;
    align-items:start !important;
  }
  .site-footer .footer-nav-group:nth-child(1){
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
  }
  .site-footer .footer-nav-group:nth-child(2){
    grid-column:2 !important;
    grid-row:1 !important;
  }
  .site-footer .footer-nav-group:nth-child(3){
    grid-column:2 !important;
    grid-row:2 !important;
  }

  /* Homepage descriptive copy: 10px and the same muted color as Photo gallery. */
  body #photographer .photographer-intro,
  body #plan .section-title-top > p,
  body #gallery .gallery-title > p{
    font-size:10px !important;
    color:#9b9289 !important;
  }

  /* All Photographer detail copy is centered on smartphone. */
   .profile-story .story-copy,
   .profile-story .story-copy p,
   .profile-story .story-copy h2{
    text-align:center !important;
  }
}

/* v3.180 — smartphone detail typography / plan CTA width */
@media (max-width:800px){
  /* Flow detail: reduce each step description by 2px. */
  .at-flow-item > p{
    font-size:11px !important;
  }

  /* Photographer detail: reduce each body description by 2px. */
  .profile-story .story-copy p{
    font-size:12px !important;
  }

  /* Plan detail CTA buttons: match the mobile menu drawer button widths. */
  .shichigosan-contact-actions{
    width:calc(min(92vw, 440px) - 60px) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .shichigosan-contact-actions .btn{
    width:auto !important;
    flex:1 1 0 !important;
    min-width:0 !important;
  }
}


/* v3.181 — smartphone explicit line breaks and detail-page refinements */
.sp-break{display:none;}
@media(max-width:800px){
  .sp-break{display:inline;}

  /* Photographer detail: the second photo matches the first photo's mobile width. */
  .profile-story-grid figure{
    width:58% !important;
    max-width:260px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Shichigosan: make the rental-props image vertically centered in its heading row. */
  .rental-props-heading-row{
    align-items:center !important;
  }

  /* Shichigosan option note: smaller footnote text. */
  .option-form-note p{
    font-size:9px !important;
  }

  /* All plan-detail CTA buttons: same two-column footprint as the menu drawer. */
  .shichigosan-contact-actions{
    width:calc(min(92vw, 440px) - 36px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    gap:8px !important;
  }
  .shichigosan-contact-actions .btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
  }
}

/* v3.183 — force smartphone-only manual line breaks to actually break lines */
@media (max-width:800px){
  br.sp-break{
    display:block !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
  }
}


/* v3.184 — requested smartphone refinements */
@media (max-width:800px){
  /* Photographer: requested manual line breaks only on smartphones. */
  br.sp-break{display:block !important;height:0 !important;margin:0 !important;padding:0 !important;line-height:0 !important;}

  /* Plan-detail CTA buttons: exactly the same two-column width model as the menu drawer. */
  .sub-cta .contact-actions,
  .subpage .sub-cta .contact-actions{
    width:calc(100% - 36px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }
  .sub-cta .contact-actions .btn,
  .subpage .sub-cta .contact-actions .btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  /* Baby plan: let the three type descriptions use the full available width. */
  .plan-hero-copy .baby-types{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-top:24px !important;
  }
  .plan-hero-copy .baby-types > div{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
  .plan-hero-copy .baby-types span{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
}

/* v3.186 — smartphone plan CTA widths and business inquiry sizing */
@media (max-width:800px){
  /* Plan-detail CTA: exactly match the mobile drawer CTA footprint.
     Drawer width = min(440px, 92vw), with 30px padding on each side and 10px gap. */
  .sub-cta .contact-actions,
  .subpage .sub-cta .contact-actions,
  .shichigosan-contact-actions{
    width:calc(min(440px, 92vw) - 60px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    box-sizing:border-box !important;
  }
  .sub-cta .contact-actions .btn,
  .subpage .sub-cta .contact-actions .btn,
  .shichigosan-contact-actions .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

  /* Business page */
  .business-plan-page .plan-detail-section > .wrap > h2{
    font-size:15px !important;
    line-height:1.7 !important;
  }
  .business-plan-page .plan-detail-section > .wrap > p{
    font-size:12px !important;
    line-height:1.8 !important;
  }
  .business-plan-page .business-mail-link{
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
    padding-left:28px !important;
    padding-right:28px !important;
    white-space:nowrap !important;
  }
}


/* v3.187 — match plan CTA buttons to the visible mobile menu button width */
@media (max-width:800px){
  .sub-cta .contact-actions,
  .subpage .sub-cta .contact-actions,
  .shichigosan-contact-actions{
    /* The menu drawer CTA is visually wider than the previous CTA override.
       Match its actual button footprint rather than the inner .wrap width. */
    width:calc(min(440px, 92vw) - 40px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  .sub-cta .contact-actions .btn,
  .subpage .sub-cta .contact-actions .btn,
  .shichigosan-contact-actions .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
  }

  .business-plan-page .business-mail-note{
    font-size:10px !important;
    line-height:1.8 !important;
  }
}