/* Approved photo direction: concrete neutrals, natural warmth and green.
   Loaded last, keeping the earlier object and demo studies independent. */
:root{
  --ink:#2B302C; --ink-2:#565C56; --ink-3:#697168;
  --paper-2:#F2F3F0; --paper-3:#E8EBE6;
  --line:#DADFD8; --line-2:#E9ECE6;
  --green:#F26B21; --green-deep:#A94B20; --green-soft:#F9EAE0;
  --forest:#34443B; --wood-wash:#F7F3EC; --concrete:#ECEEEA;
}

/* Keep the Japanese service name on one line in every brand placement. */
.logo-word{font-family:"Noto Sans JP",system-ui,sans-serif;white-space:nowrap;flex-shrink:0;letter-spacing:-.04em}
.method-hitokoto-web h3{font-family:"Noto Sans JP",system-ui,sans-serif;letter-spacing:-.04em}

/* Sentence breaks remain visible at every responsive breakpoint. */
body br.sentence-break{display:initial}
.story-reply p,#storyStatus,.form-status{white-space:pre-line}

/* Broader actions: the label carries the button. */
.btn{min-width:240px;max-width:100%;padding-inline:34px;border-radius:7px}
.nav .cta{min-width:184px;justify-content:center;padding-inline:28px;border-radius:7px}
.nav .cta::after,.btn .ar::after,.wc-body h3::after{content:none}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-green:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.nav{background:rgba(255,255,255,.96);border-color:var(--line-2)}

/* On narrow screens, the photo sits between the headline and description. */
.shop-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:720px;padding:70px max(40px,calc((100vw - 1200px)/2));background:#343936;color:#fff;overflow:hidden}
.shop-visual{position:absolute;inset:0;z-index:-2}
.shop-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.shop-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,28,27,.66),rgba(24,28,27,.38) 34%,rgba(24,28,27,.06) 60%,transparent 80%)}
.shop-copy{position:relative;z-index:2;width:49%;max-width:650px}
.shop-kicker{display:flex;align-items:center;gap:10px;color:#F8EADB;font-size:14px;font-weight:500;line-height:1.8;margin-bottom:24px}
.shop-kicker::before{content:'';width:7px;height:7px;background:var(--green);border-radius:2px;flex:none}
.shop-copy h1{font-size:clamp(43px,4.8vw,70px);font-weight:700;line-height:1.37;letter-spacing:-.045em}
.shop-copy h1 em{font-style:normal;color:#FFD0A6}
.shop-description{font-size:16px;line-height:2.05;margin-top:26px;color:#FAF7EF;max-width:31em}
.shop-actions{display:flex;gap:18px 26px;align-items:center;flex-wrap:wrap;margin-top:32px}
.shop-actions .btn{min-height:59px}
.shop-actions .text-link{padding-block:10px;border-bottom:1px solid #ABB19E;font-weight:400;color:#fff}
.shop-actions .text-link:hover{color:#FFD0A6;border-color:#FFD0A6}
.shop-note{position:absolute;right:5.5%;bottom:8%;width:340px;max-width:40%;z-index:2;padding:20px 23px;background:#FFFDF6;color:#373D2E;border:1px solid #E4DBCA;border-radius:11px;box-shadow:0 18px 40px #101A1833}
.shop-note>span{display:flex;align-items:center;gap:8px;font-size:14px;color:#A95928}
.shop-note>span::before{content:'';width:7px;height:7px;background:var(--green);border-radius:50%}
.shop-note>p{font-size:17px;font-weight:500;line-height:1.85;margin:7px 0 12px}
.shop-note small{display:block;font-size:14px;line-height:1.7;color:#687656;border-top:1px solid #E1E7D7;padding-top:12px}

/* Continue the shop's materials through the remaining sections. */
.sec--mist{background:var(--paper-2)}
.section-heading>div{flex-shrink:0}
.section-heading>p{max-width:48%}
.problem-icon{color:#718075}
.s-card{border-top-color:#CCD4CB}
.svc-grid{gap:44px}
.svc-card .object-art{max-width:224px;margin-bottom:20px}
.svc-card .num{border-top:1px solid var(--line);padding-top:22px}
.svc-card h3{font-size:22px}
.work-card{border-radius:8px;border-color:#DADED7;box-shadow:0 4px 14px #25362905}
.work-card:hover{border-color:#C2CDC2;box-shadow:0 12px 28px #2536290D;transform:translateY(-3px)}
.wc-bar{background:#F9FAF7}
.wc-body{background:#fff}
.story-stage{background:var(--paper-2);border-color:var(--line);border-radius:12px}
.story-topline,.story-footer{background:var(--concrete);border-color:var(--line)}
.story-browser{box-shadow:0 14px 32px #243C2910}
.cta-band{background:var(--forest);border-radius:10px;padding:42px 46px}
.cta-band h3 span{color:#F2D2B5}
.cta-band .eyebrow{color:#EDD8C4}
.cta-band .right{gap:14px}
.cta-band .btn{min-width:256px}
.cta-band .btn-ghost:hover{background:#46594D}
#how{background:var(--wood-wash)}
.process-studio{background:#FFFDF9;border-color:#E1DED5;border-radius:12px;box-shadow:0 10px 30px #3D392406}
.journey-scene{background-image:none}
.process-caption{border-color:#E4E1D9}
.scene-bubble{box-shadow:0 9px 22px #7442220D}
.start-flow{border-color:#DEDCD4}
.method-hitokoto-web{background:var(--forest);border-radius:10px;box-shadow:0 18px 36px #263D2617}
.method-hitokoto-web .method-role{background:#FFFFFF0B;border-color:#FFFFFF21}
.method-hitokoto-web .method-intro,.method-hitokoto-web dd{color:#E8EDE5}
.method-link{justify-content:center;min-height:48px;border:1px solid #829486;border-radius:6px;padding:11px 20px}
.method-link:hover{background:#FFFFFF10}
.price-card{border-radius:10px;border-color:#D5DCD2}
.price-card.best{background:#FFFCF6;border-color:#CF9A71}
.price-card .ribbon{background:var(--forest);border-radius:4px}
.price-card .btn{width:100%;min-width:0;padding-inline:16px}
.price-card.best .btn{background:var(--forest);border-color:var(--forest)}
.qa-item[open]{background:#FAFBF8}
.final,.final-left{background:var(--concrete)}
.final-left>.object-art{width:160px;margin-bottom:16px}
.form{border-radius:10px;box-shadow:0 12px 36px #263A2807}
.form-field input,.form-field textarea,.form-field select{background:#FAFBF8;border-color:#D7DED4}
.form .submit{min-width:240px;max-width:100%;padding-inline:34px;background:var(--forest);border-radius:7px}
.footer{background:#2D3B33}

@media(min-width:981px) and (max-width:1200px){
  .nav{gap:18px;padding-inline:28px}
  .nav .links{gap:20px;margin-left:0}
  .nav .links a .en{display:none}
  .section-heading>p{font-size:15px}
}
@media(max-width:1100px){
  .shop-hero{min-height:680px;padding:58px 40px}
  .shop-copy{width:50%}
  .shop-copy h1{font-size:53px}
  .shop-description{font-size:15px}
  .shop-description br{display:none}
  .shop-note{width:300px;padding:17px 20px}
  .shop-note>p{font-size:16px}
}
@media(max-width:980px){
  .shop-hero{padding-inline:28px}
  .shop-copy{width:55%}
  .shop-copy h1{font-size:clamp(42px,5.4vw,53px)}
  .shop-photo{object-position:60% center}
  .shop-hero::after{background:linear-gradient(90deg,rgba(24,28,27,.72),rgba(24,28,27,.36) 48%,transparent 100%)}
  .shop-note{right:4%;bottom:5%;width:280px;max-width:none;padding:15px 18px}
  .svc-grid{gap:26px}
  .svc-card h3{font-size:20px}
  .cta-band{padding:34px 30px}
}
@media(max-width:700px){
  .nav .cta{min-width:0;padding-inline:22px}
  .shop-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:28px 24px 36px}
  .shop-copy{display:contents}
  .shop-kicker{order:1;margin-bottom:19px;font-size:14px}
  .shop-copy h1{order:2;font-size:clamp(36px,8.8vw,48px);line-height:1.35;margin-bottom:20px}
  .shop-visual{position:relative;inset:auto;order:3;width:calc(100% + 48px);margin:0 -24px;aspect-ratio:16/15;z-index:0;overflow:hidden}
  .shop-photo{width:166.6667%;height:auto;max-width:none;left:-66.6667%;top:0;bottom:auto;object-fit:contain}
  .shop-hero::after{content:none}
  .shop-description{order:4;margin-top:25px;font-size:15px;line-height:1.95;max-width:none}
  .shop-actions{order:5;margin-top:24px;gap:15px 24px}
  .shop-actions .btn{min-width:256px;min-height:56px}
  .shop-note{left:16px;right:16px;bottom:14px;width:auto;max-width:none;padding:14px 17px}
  .shop-note>p{font-size:15px;margin:5px 0 8px}
  .shop-note small{font-size:14px;padding-top:8px}
  .section-heading>p{max-width:none}
  .svc-grid{gap:36px}
  .svc-card .object-art{width:200px;margin-bottom:14px}
  .svc-card .num{padding-top:18px}
  .svc-card h3{font-size:22px}
  .cta-band{padding:30px 24px}
  .cta-band .btn{min-width:0;width:100%;padding-inline:20px}
  .final-left>.object-art{width:150px}
  .form .submit{min-width:0;width:100%}
}
@media(max-width:420px){
  .shop-actions{flex-direction:column;align-items:stretch;gap:10px}
  .shop-actions .btn{min-width:0;width:100%}
  .shop-actions .text-link{align-self:center}
  .price-card .btn{padding-inline:10px}
}