/* A-191: user-approved UX redline refinements only. */
.a191 .bridge-answer,
.a191 .methods-answer{
  text-wrap:balance;
}

/* Block order: deliverables now precedes the send/return experience in HTML. */

/* "で、何を送ればいいの？" = salon-side question; answer is provider-side. */
.a191 .experience .reader-voice-question{
  display:table;
  width:auto;
  max-width:92%;
  margin:6px auto 14px!important;
  padding:10px 15px 11px;
  position:relative;
  border:1px solid #ead8cf;
  border-radius:15px;
  background:#f8f3ef;
  color:#5a4742;
  font-family:"Noto Sans CJK JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  font-size:clamp(16px,4.6vw,19px);
  line-height:1.45;
  font-weight:700;
  text-align:left;
}
.a191 .experience .reader-voice-question::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:-8px;
  width:14px;
  height:14px;
  background:#f8f3ef;
  border-right:1px solid #ead8cf;
  border-bottom:1px solid #ead8cf;
  transform:rotate(45deg);
}
.a191 .experience .answer-emphasis{
  margin-bottom:22px!important;
  color:#4f4541;
  font-size:16px;
  line-height:1.45;
  font-weight:600;
}
.a191 .experience .answer-emphasis span,
.a191 .experience .answer-emphasis strong{
  display:block;
}
.a191 .experience .answer-emphasis strong{
  margin-top:4px;
  color:#0b6f60;
  font-size:clamp(21px,5.7vw,25px);
  line-height:1.35;
  font-weight:900;
}
.a191 .exchange-caption{
  margin:0 0 3px!important;
  color:#3f3633;
  font-size:15px;
  line-height:1.5;
  font-weight:900;
  text-align:center;
}
.a191 .exchange-example .example-note{
  margin:0 0 13px!important;
  color:#897a74;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}
.a191 .post-result-preview .result-teaser{
  margin:0!important;
  font-size:15px;
  line-height:1.75;
  color:#4e4743;
  font-weight:700;
}
.a191 .post-result-preview .result-delivery-note{
  display:block;
  margin-top:12px;
  padding-top:11px;
  border-top:1px dashed #b9d8cf;
  color:#0b6f60;
  font-size:12px;
  line-height:1.65;
  font-weight:900;
}

/* Method card: keep the agreed semantic line break; keep note readable. */
.a191 .branch-option-b strong{line-height:1.45}
.a191 .branch-option-b small{
  font-size:12px;
  white-space:nowrap;
}

/* Four-step approval flow: 1 → 2, then down to 3, then left to 4. */
.a191 .approval-timeline-serpentine{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important;
  grid-template-rows:auto 24px auto!important;
  gap:7px 6px!important;
  align-items:center;
  max-width:430px;
  margin:0 auto;
}
.a191 .approval-timeline-serpentine .flow-step{
  min-width:0;
  text-align:center;
  padding:12px 6px!important;
  border-bottom:2px solid #d8b9ad;
}
.a191 .approval-timeline-serpentine .step-1{grid-column:1;grid-row:1}
.a191 .approval-timeline-serpentine .arrow-12{grid-column:2;grid-row:1}
.a191 .approval-timeline-serpentine .step-2{grid-column:3;grid-row:1}
.a191 .approval-timeline-serpentine .arrow-23{grid-column:3;grid-row:2;justify-self:center}
.a191 .approval-timeline-serpentine .step-3{grid-column:3;grid-row:3}
.a191 .approval-timeline-serpentine .arrow-34{grid-column:2;grid-row:3}
.a191 .approval-timeline-serpentine .step-4{grid-column:1;grid-row:3}
.a191 .approval-timeline-serpentine .flow-arrow{
  display:block!important;
  font-style:normal;
  color:#9f8278;
  text-align:center;
  font-size:16px!important;
  line-height:1;
}
.a191 .approval-timeline-serpentine .flow-step span{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.a191 .approval-timeline-serpentine .flow-step span b{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#f4e5df;
  color:#725350;
  font-size:10px;
  line-height:1;
}
.a191 .approval-timeline-serpentine .actor-us span b{
  background:#e2f2ed;
  color:#0b6f60;
}

/* Replace browser triangle markers with visibly actionable text controls. */
.a191 .quiet-details>summary,
.a191 .faq-list details>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#0b6f60;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  cursor:pointer;
}
.a191 .quiet-details>summary::-webkit-details-marker,
.a191 .faq-list details>summary::-webkit-details-marker{display:none}
.a191 .quiet-details>summary::marker,
.a191 .faq-list details>summary::marker{content:""}
.a191 .quiet-details>summary::after,
.a191 .faq-list details>summary::after{
  content:"→";
  flex:0 0 auto;
  color:#0b6f60;
  font-size:18px;
  font-weight:900;
  text-decoration:none;
}
.a191 .quiet-details[open]>summary::after,
.a191 .faq-list details[open]>summary::after{content:"⌄"}

@media(max-width:480px){
  .a191 .approval-timeline-serpentine{
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)!important;
    grid-template-rows:auto 22px auto!important;
    gap:6px 5px!important;
  }
  .a191 .approval-timeline-serpentine .flow-step strong{font-size:13px!important}
  .a191 .approval-timeline-serpentine .flow-arrow{font-size:15px!important}
}
/* A-191 flow placement must override A-188 mobile legacy placement. */
.a191 .approval-timeline-serpentine .step-1{grid-column:1!important;grid-row:1!important}
.a191 .approval-timeline-serpentine .arrow-12{grid-column:2!important;grid-row:1!important}
.a191 .approval-timeline-serpentine .step-2{grid-column:3!important;grid-row:1!important}
.a191 .approval-timeline-serpentine .arrow-23{grid-column:3!important;grid-row:2!important}
.a191 .approval-timeline-serpentine .step-3{grid-column:3!important;grid-row:3!important}
.a191 .approval-timeline-serpentine .arrow-34{grid-column:2!important;grid-row:3!important}
.a191 .approval-timeline-serpentine .step-4{grid-column:1!important;grid-row:3!important}
.a191 .narrow-only{display:none}
.a191 .narrow-cta-break{display:none}
@media(max-width:380px){
  .a191 .narrow-only{display:block}
  .a191 .narrow-cta-break{display:inline}
}