/* Roomie v5 - Book9.xlsx (2026-10-13)
   Scoped to the three instruction pages. This file is loaded after the approved
   v3/v4 stylesheet; prior files and unrelated pages are not modified. */

/* CASE 1: keep actual H1/source/title/schema text for SEO; render short label only. */
html body#case main #top_info .u-tt-ja[data-display-title]{font-size:0!important;line-height:1.5!important;}
html body#case main #top_info .u-tt-ja[data-display-title]::after{
 content:attr(data-display-title)!important;display:inline-block!important;
 font-size:48px!important;line-height:1.5!important;font-weight:900!important;
 font-family:var(--font-ZenAntique),sans-serif!important;letter-spacing:0!important;
}
/* CASE 3: let the intro use the full text column without forced container clipping. */
html body#case .case-book8-intro__copy{flex:1 1 auto!important;min-width:0!important;max-width:100%!important;}
html body#case .case-book8-intro__copy>p{max-width:none!important;width:100%!important;}
/* CASE 4/5: preserve two-line headers in desktop; regular natural mobile wrap. */
html body#case #case_ttl_01 .u_box_tt2{line-height:1.55!important;}
html body#case #case_ttl_02>h2{line-height:1.45!important;}
/* CASE 6: remove ONLY the beige textured backdrop behind five stories;
   the story cards themselves stay white, framed and readable. */
html body#case .case-stories-texture{
 background:transparent!important;background-image:none!important;
}
/* CASE 7: reduce excess vertical whitespace in the comparison panel without
   fixing a height or clipping its detailed content. */
html body#case #case_ttl_02 .box_under{margin-top:16px!important;margin-bottom:20px!important;align-items:stretch!important;}
html body#case #case_ttl_02 .box_under .frame01,
html body#case #case_ttl_02 .box_under .frame02{min-height:0!important;padding-top:18px!important;padding-bottom:18px!important;}
html body#case #case_ttl_02 .case-compare-list li{margin-bottom:8px!important;}
/* CASE 8: keep the right comparison title on a single line at normal PC widths. */
@media(min-width:1100px){
 html body#case #case_ttl_02 .box_right .frame02 h3{white-space:nowrap!important;letter-spacing:-.03em!important;font-size:clamp(19px,1.65vw,26px)!important;}
}
/* CASE 9: trailing mascot speech panel shrinks to the actual length of text. */
html body#case main>div#content .inner>section:last-of-type .frame_pick2{
 display:flex!important;align-items:center!important;width:fit-content!important;max-width:100%!important;gap:12px!important;
}
html body#case main>div#content .inner>section:last-of-type .frame_pick2 .txt_pick2{
 flex:0 1 auto!important;width:fit-content!important;max-width:min(100%,72ch)!important;min-width:0!important;
}

/* STRENGTH 1: intro lead matches the requested text scale/centering. */
html body#strength main #strength_add_akiya>.roomie-add__lead{
 font-size:21px!important;line-height:1.7!important;text-align:center!important;
 width:100%!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;
}
/* STRENGTH 2: widen intro text area, avoid author-forced breaks; retain wrap on smaller displays. */
html body#strength main #strength_add_akiya{width:100%!important;max-width:100%!important;}
html body#strength main #strength_add_akiya>.roomie-add__lead{box-sizing:border-box!important;}
/* STRENGTH 3-7: five property-label captions +3px over 18px paragraph scale. */
html body#strength main #strength_add_akiya .strength-targets__item>span:last-child{
 font-size:21px!important;line-height:1.5!important;overflow-wrap:anywhere;
}
/* STRENGTH 8,11,12,13: four mascot balloons fit their sentences. */
html body#strength main .roomie-voice-note:not(.roomie-supervisor-voice){
 display:flex!important;align-items:center!important;gap:12px!important;width:fit-content!important;max-width:100%!important;
}
html body#strength main .roomie-voice-note:not(.roomie-supervisor-voice) .txt_pick2{
 box-sizing:border-box!important;flex:0 1 auto!important;width:fit-content!important;
 max-width:min(100%,76ch)!important;min-width:0!important;
}
/* STRENGTH 9,10: photos for strengths 1 and 2 on the RIGHT; copy on left. */
@media(min-width:769px){
 html body#strength main .strength-reason--1 .strength-reason__media,
 html body#strength main .strength-reason--2 .strength-reason__media{
  display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)!important;
  grid-template-areas:'copy photo'!important;column-gap:32px!important;align-items:center!important;
 }
 html body#strength main .strength-reason--1 .strength-reason__copy,
 html body#strength main .strength-reason--2 .strength-reason__copy{grid-area:copy!important;}
 html body#strength main .strength-reason--1 .strength-reason__photo,
 html body#strength main .strength-reason--2 .strength-reason__photo{grid-area:photo!important;}
}
/* STRENGTH 14: six consultation options are arranged three across on PC. */
html body#strength main #strength_add_consultation .roomie-chip-list{
 display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:20px!important;row-gap:8px!important;
}

/* MENU 1 & 7: intentional desktop line breaks, allow natural SP wrapping. */
html body#menu main #menu_ttl2>h2,
html body#menu main #menu_ttl5>h2{line-height:1.5!important;}
/* MENU 2-6: balance vertical padding for each of the five route cards;
   fixed card heights are intentionally avoided to prevent text clipping. */
@media(min-width:768px){
 html body#menu main #menu_ttl3 .roomie-route-card{
  grid-template-rows:auto auto!important;align-content:center!important;
  padding-top:26px!important;padding-bottom:26px!important;row-gap:12px!important;
  min-height:0!important;height:auto!important;
 }
 html body#menu main #menu_ttl3 .roomie-route-card h3{align-self:end!important;}
 html body#menu main #menu_ttl3 .roomie-route-card ul{align-self:start!important;}
}
/* MENU 8: preserve whole supplied illustration, with zero cropping. */
html body#menu main #menu_add_situation .roomie-image-slot,
html body#menu main #menu_add_situation .roomie-image-slot__inner{
 height:auto!important;min-height:0!important;max-height:none!important;
 overflow:visible!important;aspect-ratio:auto!important;
}
html body#menu main #menu_add_situation .roomie-image-slot__inner img{
 display:block!important;width:100%!important;max-width:100%!important;height:auto!important;
 max-height:none!important;object-fit:contain!important;object-position:center!important;
}

@media(max-width:1099px) and (min-width:769px){
 html body#strength main #strength_add_akiya .strength-targets__item>span:last-child{font-size:19px!important;}
 html body#strength main .strength-reason--1 .strength-reason__media,
 html body#strength main .strength-reason--2 .strength-reason__media{grid-template-columns:minmax(0,1fr) minmax(250px,.88fr)!important;column-gap:20px!important;}
}
@media(max-width:768px){
 html body#case main #top_info .u-tt-ja[data-display-title]::after{font-size:26px!important;}
 html body#case main>div#content .inner>section:last-of-type .frame_pick2 .txt_pick2{max-width:calc(100% - 100px)!important;}
 html body#strength main #strength_add_akiya>.roomie-add__lead{font-size:18px!important;text-align:center!important;}
 html body#strength main #strength_add_akiya .strength-targets__item>span:last-child{font-size:18px!important;}
 html body#strength main .roomie-voice-note:not(.roomie-supervisor-voice) .txt_pick2{max-width:calc(100% - 100px)!important;}
 html body#strength main #strength_add_consultation .roomie-chip-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
 html body#strength main .strength-reason--1 .strength-reason__media,
 html body#strength main .strength-reason--2 .strength-reason__media{
  display:flex!important;flex-direction:column!important;gap:16px!important;
 }
 html body#strength main .strength-reason--1 .strength-reason__copy,
 html body#strength main .strength-reason--2 .strength-reason__copy{order:1!important;}
 html body#strength main .strength-reason--1 .strength-reason__photo,
 html body#strength main .strength-reason--2 .strength-reason__photo{order:2!important;width:100%!important;}
}
@media(max-width:480px){
 html body#strength main #strength_add_consultation .roomie-chip-list{grid-template-columns:1fr!important;}
 html body#strength main .roomie-voice-note:not(.roomie-supervisor-voice){width:100%!important;}
}