.update-note,.mrk-stance{padding:18px 20px;border-left:4px solid #a52b1b;background:#fff8e9;line-height:1.85;margin:20px 0;color:#241f16}
.update-table{overflow-x:auto;margin:18px 0}.update-table table{border-collapse:collapse;width:100%;font-size:14px}.update-table th,.update-table td{border:1px solid #ded8ca;padding:12px;text-align:left;min-width:110px}.update-table th{background:#f5ead3}.update-primary{background:#a52b1b!important;color:#fff!important}
.hero-renewal-copy small{white-space:normal}.service-grid .service-external{white-space:normal;min-height:48px;line-height:1.6;padding:12px}.service-grid .conversion-note b{font-size:12px;letter-spacing:.08em}.service-grid .price{font-size:13px;line-height:1.8}
.legacy-site-header a,.footer-links a{overflow-wrap:anywhere}.campaign-entry strong{white-space:normal!important}
@media(max-width:760px){.hero-renewal-copy span{font-size:21px}.hero-renewal-copy small{font-size:11px}.site-header .primary-three .nav-db{max-width:106px;white-space:normal!important}.mobile-bar a{white-space:normal}.legacy-site-header a{font-size:11px}.hero-lead{line-height:1.85}.free-notes span{font-size:10px}}

/* Keep the comparison summary readable at every viewport width. */
.marquee{flex-wrap:wrap;white-space:normal;gap:10px 24px}
@media(max-width:760px){.marquee{align-items:flex-start;gap:8px;padding:16px 20px}.marquee>strong,.marquee>span{width:100%}.marquee>i{display:none}.marquee b{line-height:1.65}}

/* Separate the SNS greeting, editorial focus, and service introduction. */
.hero-lead>span{display:block}.hero-lead>span+span{margin-top:.6em}
/* Let longer Japanese copy grow instead of moving over the artwork. */
@media(max-width:760px){
  .hero{padding-top:0}
  .hero .hero-copy{position:relative;inset:auto;height:auto;min-height:0;padding:270px 18px 24px;justify-content:flex-start;background:linear-gradient(180deg,rgba(239,229,207,0) 0,rgba(239,229,207,.04) 230px,rgba(239,229,207,.9) 350px,var(--paper) 480px)}
  .hero-lead{line-height:1.85}
}
@media(max-width:760px){
  .section-pad h2.title-one-line{font-size:25px;line-height:1.45;letter-spacing:-.035em;white-space:normal}
  .section-pad h2.title-one-line .phrase{white-space:normal}
}

/* Keep multi-column fee tables legible on small screens. */
.wide-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wide-table-wrap table[data-wide-comparison]{min-width:900px!important;width:100%}
.table-scroll-hint{display:none}
@media(max-width:960px){.table-scroll-hint{display:block;font-size:12px;line-height:1.6;margin:8px 0;color:#514739}}

/* Two-line diagnosis labels describe what visitors can find. */
.diagnosis-button{gap:0!important;white-space:normal!important;text-align:center}
.diagnosis-button .diagnosis-label{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}
.diagnosis-button .diagnosis-title{display:block;font-size:18px;font-weight:800;line-height:1.3}
.diagnosis-button .diagnosis-subtitle{display:block;font-size:12px;font-weight:700;line-height:1.45;white-space:nowrap}
.site-header .diagnosis-button .diagnosis-title,.legacy-site-header .diagnosis-button .diagnosis-title{font-size:15px}
.site-header .diagnosis-button .diagnosis-subtitle,.legacy-site-header .diagnosis-button .diagnosis-subtitle{font-size:10px}
.mobile-bar .diagnosis-button{padding:5px 3px}
.mobile-bar .diagnosis-button .diagnosis-title{font-size:14px}
.mobile-bar .diagnosis-button .diagnosis-subtitle{font-size:9px}
@media(max-width:760px){
 .site-header .primary-three{gap:5px}
 .site-header .primary-three .diagnosis-button{padding:6px!important}
 .site-header .diagnosis-button .diagnosis-title{font-size:13px}
 .site-header .diagnosis-button .diagnosis-subtitle{font-size:9px;letter-spacing:-.03em}
 .legacy-site-header .diagnosis-button{padding:8px 10px}
 .legacy-site-header .diagnosis-button .diagnosis-subtitle{font-size:10px}
}
@media(max-width:380px){.site-header .primary-three{gap:4px}.site-header .primary-three a{padding:5px!important;font-size:9px!important}}
@media(min-width:351px) and (max-width:760px){
 .site-header .diagnosis-button .diagnosis-subtitle,.mobile-bar .diagnosis-button .diagnosis-subtitle{font-size:10px;letter-spacing:-.03em}
}
.agency-ad-frame{max-width:calc(100% - 4px);min-width:0}
#cardGrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))!important}

/* Let explanations, rather than fixed empty rows, determine section height. */
.section-pad{padding-top:36px;padding-bottom:36px}
.visual-side-list,.policy-visual-list{min-height:0}
.visual-panel{grid-template-rows:minmax(320px,1fr) auto}
.visual-panel>.optimized-picture{height:100%;min-height:320px}
.visual-panel>.optimized-picture>.visual-scene{height:100%;min-height:0;object-fit:cover}
.visual-quote{padding:16px 18px}
.visual-quote .scholar-id img{width:52px;height:52px;flex-basis:52px}
.fit-cards article{min-height:0;padding:22px;justify-content:flex-start}
.mistake-cards article,.quality-cards article{min-height:0;padding:18px}
.step-cards article{min-height:0;padding:22px 20px}
.policy-cards article{min-height:0;padding:18px 20px}
.side-cards p{font-size:14px;line-height:1.7}
#selection-flow .visual-panel{grid-template-rows:minmax(280px,1fr) auto}
#selection-flow .visual-panel>.optimized-picture{min-height:280px}
.flow-next{font-size:14px;line-height:1.75;margin:20px 0 12px;max-width:900px}
.service-grid article{padding:22px}
.service-grid h3{margin:14px 0}
.service-grid p{margin:8px 0}
.service-grid .price{line-height:1.7}
.hero-lead{line-height:1.75}
.update-note,.mrk-stance{line-height:1.75;margin:16px 0;padding:16px 18px}
/* Portrait focal points keep hair and faces inside the frame. */
#psychology-fit .visual-scene{object-position:50% 3%}
#selection-flow .visual-scene{object-position:50% 15%}
#mistakes .visual-scene{object-position:50% 18%}
#compatibility .visual-scene{object-position:50% 15%}
.about-grid>.optimized-picture>img{object-position:50% 18%}
@media(max-width:760px){
 .section-pad{padding-top:28px;padding-bottom:28px}
 .visual-panel,#selection-flow .visual-panel{grid-template-rows:auto auto}
 .visual-panel>.optimized-picture,#selection-flow .visual-panel>.optimized-picture{height:300px;min-height:0}
 #compatibility .visual-panel>.optimized-picture{height:auto;aspect-ratio:3/2}
 .fit-cards article,.mistake-cards article,.quality-cards article{padding:18px}
 .step-cards article{padding:18px 16px;grid-template-columns:60px minmax(0,1fr);gap:12px}
 .side-cards p{font-size:14px;line-height:1.7}
 .hero .hero-lead{line-height:1.75}
}
/* Reduce excess heading/paragraph spacing across detail and guide pages. */
body.legacy-page main p,body.legacy-page main li,body.legacy-page main dd{line-height:1.75!important}
body.legacy-page main h2{margin-top:26px!important;margin-bottom:12px!important}
body.legacy-page main h3{margin-top:20px!important;margin-bottom:10px!important}
body.legacy-page main{padding-top:28px!important;padding-bottom:40px!important}
body.legacy-page footer{margin-top:24px!important;padding-top:32px!important}
.legacy-database .db-card> :nth-child(3),.legacy-database .db-card> :nth-child(4),.legacy-database .db-card> :nth-child(5),.legacy-database .db-card> :nth-child(6){min-height:0!important}
body.legacy-database .db-card h2{margin-top:0!important}
.legacy-page-summary{line-height:1.7;margin-top:16px}
.legacy-route-mark{margin-top:18px}
.legacy-masthead-art img{object-position:50% 12%}
@media(min-width:901px){
 .legacy-masthead,.legacy-masthead--compact,.legacy-masthead--dense{height:auto;min-height:0;--legacy-masthead-min:0px}
 .legacy-masthead-copy{height:auto;min-height:440px;padding:32px clamp(30px,4vw,58px)}
 .legacy-masthead-art{height:auto;min-height:0}
}
@media(max-width:900px){
 .legacy-masthead-copy{padding:28px 20px}
 .legacy-masthead-art{height:auto;min-height:0;max-height:none;aspect-ratio:4/3}
 .legacy-masthead-art img{object-fit:cover}
 .legacy-masthead::before{display:none}
}
@media(max-width:560px){
 body.legacy-page main{padding-top:20px!important;padding-bottom:32px!important}
 .legacy-shindan .intro-card{padding:20px 17px!important}
}
/* Exclude intrinsic portrait height from the grid's content sizing. */
.visual-panel>.optimized-picture{position:relative}
.visual-panel>.optimized-picture>.visual-scene{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:760px){.hero-image{object-position:85% center}}
@media(max-width:760px){.hero-slogan{display:none}}

/* Let the approved introduction grow without clipping its heading or buttons. */
@media(min-width:761px){.hero .hero-copy{height:auto;min-height:680px}}

/* Make the SNS link recognizable within the greeting. */
.hero-greeting .hero-sns-link{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.hero-sns-link:hover{color:var(--red)}
.hero-sns-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Give the two quoted ideas equal weight in the headline. */
.hero h1>small{font-size:clamp(17px,1.7vw,25px);line-height:1.5;margin-bottom:.35em}
.hero h1 .hero-title-line{display:block;white-space:nowrap;font-size:clamp(34px,4.6vw,68px);line-height:1.2;letter-spacing:-.05em}
.hero h1 .hero-title-quote{font:inherit}
.hero h1 .hero-title-particle{font-size:.5em;margin-left:.06em}
.hero h1 .hero-title-line em{font-size:.72em;line-height:1;margin-left:.04em;text-shadow:none}
@media(max-width:760px){.hero h1 .hero-title-line{font-size:clamp(28px,10vw,44px)}}

/* Preserve the approved Mincho wordmark and its signature. */
.site-header .mrk-logo{position:relative;z-index:2;display:block;width:214px;min-width:214px;flex:none;transform:none;padding:0}
.site-header .mrk-logo img{display:block;width:100%;height:auto}
@media(max-width:760px){
 .site-header{height:76px;gap:8px;padding-inline:12px}
 .site-header .mrk-logo{width:134px;min-width:134px}
}
@media(max-width:360px){
 .site-header{gap:6px;padding-inline:10px}
 .site-header .mrk-logo{width:116px;min-width:116px}
}

/* Typeset the caption in the open side of the artwork, without a panel. */
.hero .hero-renewal-copy{box-sizing:border-box;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:14px;width:max-content;max-width:none;padding:0;background:none;border:0;box-shadow:none;color:var(--ink);text-shadow:none;text-align:left}
.hero .hero-renewal-copy>span{display:block;writing-mode:vertical-rl;text-orientation:mixed;height:14em;white-space:nowrap;font-size:clamp(26px,2.25vw,32px);font-weight:600;line-height:1.65;letter-spacing:.02em}
.hero .hero-caption-key{display:inline;color:var(--red);font-weight:inherit}
.hero .hero-renewal-copy small{display:block;writing-mode:vertical-rl;margin:0;padding-top:3px;font-size:13px;font-weight:600;line-height:1.8;letter-spacing:.08em;white-space:nowrap}
.hero .hero-renewal-copy small>span{display:block;font:inherit;letter-spacing:inherit;line-height:inherit}
.hero .hero-renewal-copy small:before{display:none}
@media(min-width:1201px){
 .hero{grid-template-rows:minmax(680px,auto) auto auto}
 .hero>.optimized-picture{height:auto;align-self:stretch}
 .hero .hero-renewal-copy{position:relative;inset:auto;grid-column:2;grid-row:1;align-self:end;justify-self:start;margin:320px 0 32px 24px}
}
@media(min-width:761px) and (max-width:1200px){
 .hero .hero-renewal-copy{display:block;width:auto;padding:24px;text-align:center;margin:0}
 .hero .hero-renewal-copy>span{writing-mode:horizontal-tb;height:auto;font-size:clamp(26px,3vw,36px);line-height:1.45}
 .hero .hero-renewal-copy small{writing-mode:horizontal-tb;padding-top:10px;font-size:14px;white-space:normal}
 .hero .hero-renewal-copy small>span{display:inline}
}
@media(max-width:760px){
 .hero .hero-renewal-copy{left:8px;right:auto;top:18px;gap:8px;margin:0;padding:0}
 .hero .hero-renewal-copy>span{font-size:17px;line-height:1.65;letter-spacing:.015em}
 .hero .hero-renewal-copy small{font-size:11px;line-height:1.7;letter-spacing:.05em}
}

/* On narrow phones, keep the complete caption ahead of the portrait. */
@media(max-width:360px){
 .hero .hero-renewal-copy{position:relative;inset:auto;display:block;width:auto;margin:0;padding:18px 16px 14px;text-align:left}
 .hero .hero-renewal-copy>span{writing-mode:horizontal-tb;height:auto;font-size:20px;line-height:1.45;letter-spacing:-.035em}
 .hero .hero-renewal-copy small{writing-mode:horizontal-tb;margin-top:8px;padding:0;font-size:11px;line-height:1.6;letter-spacing:0;white-space:normal}
 .hero .hero-renewal-copy small>span{display:inline}
 .hero>.optimized-picture>.hero-image{top:116px}
}