:root{--ink:#121212;--muted:#68707a;--line:#e7e9ec;--soft:#f7f8fa;--red:#ff3b00;--orange:#ff8c00;--yellow:#ffd400;--blue:#0867ee;--green:#46b95f;--purple:#7b55ef;--cyan:#23a8f5;--shadow:0 12px 34px rgba(20,25,33,.08);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",sans-serif;color:var(--ink);background:#fff;line-height:1.72}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{color:inherit}.container{width:min(1180px,calc(100% - 30px));margin:0 auto}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:11px;border:0;background:none;padding:0;cursor:pointer}.brand img{width:46px;height:46px;border-radius:50%;object-fit:cover}.brand strong{display:block;font-size:20px;line-height:1.1;text-align:left}.brand small{display:block;font-size:10px;color:var(--muted);text-align:left}.links{display:flex;gap:16px;align-items:center;font-size:13px;font-weight:750}.links button{border:0;background:none;cursor:pointer;font-weight:inherit}.links .contact{background:#111;color:#fff;padding:10px 15px;border-radius:999px}.mobile-menu{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:4px}.mobile-menu i{width:18px;height:2px;background:#111;display:block}.mobile-panel{display:none;position:fixed;z-index:59;top:72px;left:12px;right:12px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:10px}.mobile-panel.open{display:grid}.mobile-panel button{border:0;background:#fff;text-align:left;padding:12px 14px;border-radius:12px;font-weight:750}
.view{display:none}.view.active{display:block}.hero{position:relative;overflow:hidden;padding:58px 0 42px;background:linear-gradient(120deg,rgba(255,70,0,.065),transparent 36%),linear-gradient(300deg,rgba(0,102,255,.075),transparent 42%),#fff}.hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:24px;align-items:center;min-height:550px}.eyebrow,.kicker{font-size:11px;letter-spacing:.15em;font-weight:900;color:#68717b}.hero h1{font-size:clamp(46px,5.4vw,68px);line-height:1.07;letter-spacing:-.055em;margin:16px 0 20px}.gradient{background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:17px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:850;cursor:pointer}.btn.dark{background:#111;color:#fff}.btn.outline{background:#fff;border-color:#ccd2d8}.btn.orange{background:linear-gradient(90deg,var(--red),var(--orange));color:#fff}.hero-visual{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center}.hero-visual:before{content:"";display:none;position:absolute;inset:10% 3% 3%;border:1px solid #eef0f2;border-radius:38px;background:radial-gradient(circle at 18% 32%,rgba(255,75,0,.16),transparent 25%),radial-gradient(circle at 84% 58%,rgba(0,102,255,.13),transparent 28%),linear-gradient(145deg,#fafafa,#fff)}.hero-team{position:relative;z-index:1;width:96%;border-radius:28px;box-shadow:0 16px 36px rgba(20,25,33,.12)}
.quick{margin-top:-12px;position:relative;z-index:2}.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:13px;box-shadow:var(--shadow)}.quick-card{border:0;background:#fff;border-radius:17px;padding:15px 7px;text-align:center;cursor:pointer}.quick-card:hover{background:var(--soft)}.quick-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:var(--tint);font-size:24px}.quick-card b{display:block;font-size:13px}.quick-card small{display:block;font-size:10px;color:var(--muted)}
.section{padding:76px 0}.alt{background:var(--soft)}.section h2{font-size:clamp(34px,4vw,52px);line-height:1.16;letter-spacing:-.04em;margin:7px 0 12px}.section-intro{max-width:800px;color:var(--muted);margin:0 0 28px}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px;box-shadow:0 6px 22px rgba(0,0,0,.035)}.card p{color:var(--muted)}.link-btn{border:0;background:none;padding:0;font-weight:900;cursor:pointer;border-bottom:1px solid #b9bec4}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{position:relative;text-align:left;border:1px solid var(--line);background:#fff;border-radius:24px;padding:24px;min-height:240px;cursor:pointer;overflow:hidden}.service-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}.service-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--tint);font-size:27px;margin-bottom:18px}.service-card h3{font-size:21px;margin:0 0 8px}.service-card p{font-size:14px;color:var(--muted);margin:0 0 25px}.more{position:absolute;bottom:18px;left:24px;font-size:12px;font-weight:900}.more span{color:var(--accent)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value{border:1px solid var(--line);background:#fff;border-radius:24px;padding:25px}.value b{display:block;font-size:19px;margin-bottom:7px}.value p{font-size:14px;color:var(--muted);margin:0}
.message-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:24px;align-items:start}.message-side{border-radius:26px;background:#111;color:#fff;padding:28px}.message-side img{width:88px;height:88px;border-radius:50%;margin-bottom:18px}.message-side h3{font-size:24px;margin:0 0 4px}.message-side small{color:#bfc4cb}.quote{font-size:20px;font-weight:850;line-height:1.5;margin:20px 0 0}.message-main{font-size:16px;color:#555d66}.message-main p{margin-top:0;margin-bottom:18px}
.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.person{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}.person-visual{aspect-ratio:16/9;background:linear-gradient(180deg,#fafafa,#f3f4f6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.person-visual img{width:100%;height:100%;object-fit:cover}.person:nth-child(4) .person-visual img{transform:scale(1.2);transform-origin:center 8%}.person-body{padding:18px}.person-role{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--accent)}.person h3{font-size:21px;margin:4px 0 6px}.person p{font-size:13px;color:var(--muted);margin:0}.person button{margin-top:14px;border:0;background:none;padding:0;text-align:left;font-weight:900;cursor:pointer}
.interviews{display:grid;gap:18px}.interview{display:grid;grid-template-columns:220px 1fr;gap:24px;border:1px solid var(--line);background:#fff;border-radius:26px;padding:18px}.interview img{width:100%;height:260px;object-fit:cover;border-radius:18px;background:#f5f6f7}.interview .tag{font-size:11px;font-weight:900;color:var(--accent);letter-spacing:.1em}.interview h3{font-size:27px;margin:5px 0 12px}.qa{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;border-top:1px solid var(--line);padding-top:13px;margin-top:13px}.qa b{font-size:12px}.qa span{font-size:13px;color:var(--muted)}.voice{font-weight:850;font-size:17px;margin:12px 0 0}
.recruit-callout{border-radius:30px;padding:32px;background:linear-gradient(135deg,#111,#292929);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}.recruit-callout h2{margin-top:0;color:#fff}.recruit-callout p{color:#d6d9dd}.recruit-callout .btn{background:#fff;color:#111}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.blog-card{border:1px solid var(--line);background:#fff;border-radius:22px;padding:22px}.blog-card b{font-size:11px;letter-spacing:.1em}.blog-card h3{font-size:18px;margin:8px 0}.blog-card p{font-size:13px;color:var(--muted);margin:0}.blog-note{font-size:13px;color:var(--muted);margin-top:14px}
.company-table{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff}.row{display:grid;grid-template-columns:145px 1fr;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row dt{font-weight:800}.row dd{margin:0;color:var(--muted)}
.contact-box{border:1px solid var(--line);background:#fff;border-radius:28px;padding:26px;box-shadow:var(--shadow)}.contact-box label{display:grid;gap:6px;margin-bottom:14px}.contact-box span{font-size:13px;font-weight:800}.contact-box input,.contact-box textarea{width:100%;padding:13px;border:1px solid #d9dde2;border-radius:12px;background:#fafbfc}.contact-box small{display:block;color:var(--muted);margin-top:10px}.privacy-note{font-size:11px;color:var(--muted);background:#f7f8fa;border-radius:14px;padding:13px;margin-top:14px}.privacy-note h3{margin:0 0 8px;font-size:13px;color:var(--ink)}.privacy-note p{margin:0 0 8px}.privacy-note p:last-child{margin-bottom:0}.privacy-note a{text-decoration:underline}
.form-check{display:flex;align-items:flex-start;gap:10px;margin:16px 0}.form-check input{flex:0 0 auto;width:16px;height:16px;margin:3px 0 0;padding:0;border:1px solid #d9dde2;border-radius:4px;background:#fff}.form-check label{display:block;font-size:13px;color:var(--muted);font-weight:600;flex:1;min-width:0}
.form-tip{font-size:12px;color:var(--muted);margin:8px 0 0}.form-status{font-size:13px;font-weight:800;margin:10px 0 0;min-height:1em}
.mail-preview{margin-top:18px;border:1px solid var(--line);border-radius:18px;padding:18px;background:var(--soft)}.mail-preview pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:10px 0}.mail-preview .small{font-size:12px;color:var(--muted);margin:8px 0 0}.mail-preview-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.column-list{display:grid;gap:14px}.column-card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:22px}.column-eyebrow{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--accent);margin:0 0 8px}.column-card summary{cursor:pointer;font-size:18px;font-weight:800;list-style:none}.column-card summary::-webkit-details-marker{display:none}.column-card summary:after{content:"+";float:right;font-weight:900;color:var(--accent)}.column-card details[open] summary:after{content:"–"}.column-body{margin-top:14px;color:var(--muted);font-size:14px}.column-body h3{color:var(--ink);font-size:16px;margin:16px 0 6px}
.foot-social{display:flex;gap:14px;font-size:12px}.foot-social a{color:inherit}
footer{border-top:1px solid var(--line);padding:24px 0 32px;background:#fff}.foot{display:flex;justify-content:space-between;align-items:center;gap:16px}.foot-links{display:flex;gap:16px;font-size:12px;color:var(--muted)}.foot-links button{border:0;background:none;cursor:pointer;color:inherit}
.page-hero{padding:52px 0 32px;background:linear-gradient(120deg,rgba(255,80,0,.045),transparent 35%),linear-gradient(300deg,rgba(0,102,255,.05),transparent 40%),#fff;border-bottom:1px solid var(--line)}.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:17px}.breadcrumb button{border:0;background:none;padding:0;color:inherit;cursor:pointer}.page-kicker{font-size:11px;font-weight:900;letter-spacing:.17em;color:var(--accent)}.page-title{font-size:clamp(38px,5vw,62px);line-height:1.1;letter-spacing:-.045em;margin:7px 0 14px}.page-lead{font-size:18px;color:#555c64;max-width:850px}.page-content{padding:48px 0 78px}.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.content-card{border:1px solid var(--line);border-radius:22px;padding:22px;background:#fff}.content-card h3{margin:0 0 9px;font-size:18px}.content-card p,.content-card li{font-size:14px;color:var(--muted)}.content-card p{margin:0}.flow-title{font-size:22px;margin:40px 0 14px}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.step{border:1px solid var(--line);border-radius:18px;padding:17px}.step b{display:block;color:var(--accent);font-size:11px;margin-bottom:5px}.step span{font-size:13px}.cta{margin-top:42px;border-radius:28px;padding:27px;background:#111;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.cta h3{font-size:24px;margin:0 0 5px}.cta p{margin:0;color:#c6cbd1}.cta .btn{background:#fff;color:#111;flex:0 0 auto}.job{border:1px solid var(--line);border-radius:24px;padding:24px;background:#fff;margin-top:18px}.job h3{font-size:25px;margin:8px 0 4px}.badge{display:inline-block;background:#fff0e9;color:#e54a00;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.meta span{background:#f3f4f6;border-radius:999px;padding:7px 10px;font-size:12px}.job dl{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line);margin-top:18px}.job dt,.job dd{padding:12px 0;border-bottom:1px solid var(--line)}.job dt{font-weight:800}.job dd{margin:0;color:var(--muted)}.career{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.career-card{border:1px solid var(--line);border-radius:19px;padding:18px}.career-card b{display:block;color:var(--orange);font-size:11px}.career-card h4{margin:7px 0 5px}.career-card p{font-size:13px;color:var(--muted);margin:0}.timeline{display:grid;gap:0;max-width:820px}.time-row{display:grid;grid-template-columns:90px 1fr;gap:18px;border-bottom:1px solid var(--line);padding:14px 0}.time-row b{font-size:14px}.time-row span{color:var(--muted);font-size:14px}
.cookie{position:fixed;z-index:100;left:14px;right:14px;bottom:14px;background:#111;color:#fff;border-radius:20px;padding:17px;box-shadow:0 18px 50px rgba(0,0,0,.28);display:none}.cookie.show{display:flex;align-items:center;justify-content:space-between;gap:16px}.cookie p{font-size:12px;color:#d7d9dc;margin:0;max-width:800px}.cookie-actions{display:flex;gap:8px;flex:0 0 auto}.cookie button{border:1px solid #555;background:#222;color:#fff;padding:9px 13px;border-radius:999px;font-weight:800;cursor:pointer}.cookie .accept{background:#fff;color:#111;border-color:#fff}
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){.links{display:none}.mobile-menu{display:flex}.hero-grid,.split,.message-grid,.recruit-callout{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(3,1fr)}.service-grid,.values,.content-grid,.blog-grid{grid-template-columns:1fr 1fr}.people-grid{grid-template-columns:repeat(2,1fr)}.interview{grid-template-columns:180px 1fr}.hero-visual{min-height:390px}.career{grid-template-columns:1fr 1fr}}
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){.container{width:min(100% - 22px,1180px)}.nav{height:66px}.mobile-panel{top:66px}.brand img{width:42px;height:42px}.brand strong{font-size:18px}.hero{padding:30px 0 34px}.hero h1{font-size:43px}.lead{font-size:15px}.actions{display:grid}.actions .btn{width:100%}.hero-visual{min-height:300px}.quick{margin-top:-5px}.quick-grid{grid-template-columns:repeat(2,1fr);padding:9px}.service-grid,.values,.content-grid,.blog-grid,.people-grid{grid-template-columns:1fr}.section{padding:58px 0}.interview{grid-template-columns:1fr}.interview img{height:320px}.qa{grid-template-columns:1fr;gap:3px}.row{grid-template-columns:1fr;gap:3px}.flow,.career{grid-template-columns:1fr}.cta{display:grid}.cta .btn{width:100%}.job dl{grid-template-columns:1fr}.job dt{padding-bottom:0;border-bottom:0}.job dd{padding-top:3px}.foot{align-items:flex-start;flex-direction:column}.foot-links{flex-wrap:wrap}.foot-social{flex-wrap:wrap}.cookie.show{display:grid}.cookie-actions{width:100%}.cookie button{flex:1}}
/* Keep Japanese headings and paragraphs from ending in short fragments. */
h1,h2,h3,h4{text-wrap:balance}p{ text-wrap:pretty }

/* Let narrow screens wrap Japanese copy at the available width. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 br.desktop-break{display:none}
 .hero h1{font-size:clamp(34px,10vw,43px);line-height:1.16;letter-spacing:-.045em}
 .section h2{font-size:clamp(28px,8vw,36px);line-height:1.25;letter-spacing:-.035em}
 .page-title{font-size:clamp(31px,8.8vw,40px);line-height:1.24;letter-spacing:-.035em}
 .page-lead{font-size:16px;line-height:1.8;max-width:100%}
 .hero .lead,.section-intro,.content-card p,.recruit-callout p{line-height:1.8}
 .page-title,.page-lead,.content-card p,.blog-strip h2,.recruit-callout h2{overflow-wrap:anywhere}
}

/* Keep the two-line hero and short terms intact at phone widths. */
.hero h1{font-size:clamp(40px,4.2vw,60px)}
.hero-title-line{display:block;white-space:nowrap}
.hero-title-next{text-align:right}
.no-break{white-space:nowrap}
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 .hero h1{font-size:clamp(34px,10vw,43px);line-height:1.16;letter-spacing:-.045em}
 .section h2.business-heading{font-size:clamp(27px,7.5vw,34px)}
 .mobile-line{display:block}
}

/* Make official social accounts easy to find on every screen. */
.social-shortcuts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:-6px}
.social-shortcuts>span{font-size:11px;font-weight:850;letter-spacing:.08em;color:var(--muted);margin-right:3px}
.social-shortcuts a,.social-cta-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border:1px solid #d8dde3;border-radius:999px;background:#fff;font-size:13px;font-weight:800;white-space:nowrap}
.social-shortcuts a:hover,.social-cta-links a:hover{border-color:#111;box-shadow:0 6px 16px rgba(0,0,0,.07)}
.mobile-social{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 4px 2px;border-top:1px solid var(--line)}
.mobile-social a{display:flex;justify-content:center;align-items:center;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:13px;font-weight:800}
.social-cta{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 24px;margin:22px 0;border:1px solid var(--line);border-radius:22px;background:var(--soft)}
.social-cta h3{font-size:19px;margin:0 0 4px}.social-cta p{font-size:13px;color:var(--muted);margin:0}.social-cta-links{display:flex;gap:9px;flex-wrap:wrap}
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 .social-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
 .social-shortcuts>span{grid-column:1/-1}
 .social-shortcuts a{padding:9px 6px;font-size:12px}
 .social-cta{display:block;padding:20px}
 .social-cta-links{display:grid;grid-template-columns:1fr 1fr;margin-top:16px}
 .social-cta-links a{padding:9px 6px;font-size:12px}
}

.lead-line{display:block}

.section h2.about-heading{font-size:clamp(34px,4vw,52px);line-height:1.16;letter-spacing:-.04em}
.about-heading-line{display:block;white-space:nowrap}.about-heading-line--indent{text-align:right}
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){.section h2.about-heading{font-size:clamp(27px,7.5vw,34px);line-height:1.25;letter-spacing:-.035em}}


/* Preserve the reference paragraph breaks and use the full text width. */
.about-copy{min-width:0}
.about-copy p{text-wrap:wrap;max-width:none}

/* Keep the value sentence larger and darker than the supporting copy. */
.about-copy{container-type:inline-size}
.about-copy p{width:100%;font-size:min(14px,3.85cqw);line-height:1.85}
.about-copy .about-value{display:block;white-space:nowrap;font-size:min(15px,4.1cqw);letter-spacing:normal;font-weight:900;color:var(--ink);margin-top:.3em}
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){.about-copy{padding:22px 14px}.about-copy .link-btn{font-size:14px}}

.about-copy .about-challenge{font-size:min(15px,4.1cqw);letter-spacing:normal;font-weight:900;color:var(--ink);white-space:normal}

.about-name-break{display:none}
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){.about-name-break{display:block}}

/* Match the About heading's two-line alignment. */
.business-heading-line{display:block;white-space:nowrap}
.business-heading-line--indent{text-align:right}

.quote-line{display:block;text-align:left}
.quote-line--right{text-align:right}

/* Representative illustration with readable HTML labels. */
.message-side--illustrated{padding:0;overflow:hidden;container-type:inline-size}
.message-art{position:relative;aspect-ratio:3/2}
.message-side .message-art img{display:block;width:100%;height:100%;border-radius:0;margin:0;object-fit:contain}
.message-art-labels{position:absolute;left:9.5%;top:54%;width:43%}
.message-art-labels .kicker{font-size:clamp(10px,3cqw,16px);margin-bottom:10px;color:#ffbc96}
.message-side .message-art-labels h3{font-size:clamp(20px,6cqw,32px);line-height:1.3;margin:0 0 12px}
.message-art-labels small{font-size:clamp(12px,3.8cqw,18px)}
.message-side--illustrated .quote{margin:0;padding:20px 24px 26px}

/* Use the full message column while preserving explicit paragraph breaks. */
.message-main{min-width:0;width:100%}
.message-main p{width:100%;max-width:none;text-wrap:wrap;line-height:1.85;overflow-wrap:break-word}

/* Center the representative message and avoid a trailing empty gap. */
.message-grid{align-items:center}
.message-main p{text-align:left}
.message-main p:last-child{margin-bottom:0}

.message-main{container-type:inline-size}
.message-closing{display:block;white-space:nowrap;font-size:min(1em,3.5cqw)}

/* Move the message down by two body-text lines within its existing space. */
.message-main{position:relative;top:3.7em}

/* Keep the heading one body-text line above the shifted message. */
.message-main>h2{position:relative;top:-29.6px}

/* Fit this 26-character sentence by spacing, keeping the inherited font size. */
.message-one-line{display:inline-block;white-space:nowrap;letter-spacing:min(0px,calc((100cqw - 26em)/26))}


/* Use the privacy notice width with natural line wrapping. */
.privacy-note p{width:100%;max-width:none;line-height:1.85;text-wrap:wrap;overflow-wrap:break-word;margin-bottom:12px}.privacy-note p:last-child{margin-bottom:0}

/* Keep the representative body consistent and the short statement on one line. */
.message-main p{font-size:min(14px,3.9cqw)}
.message-keep-line{white-space:nowrap}

/* Desktop homepage typography. Phone and tablet rules remain unchanged. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .section h2{font-size:clamp(32px,3.2vw,44px);line-height:1.3;text-wrap:wrap}
 #homeView .lead{font-size:18px;line-height:1.85}
 #homeView .section-intro{font-size:17px;line-height:1.85;text-wrap:wrap}
 #homeView .about-copy{padding:30px}
 #homeView .about-copy p{font-size:17px;line-height:1.9;margin:0 0 24px}
 #homeView .about-copy .about-value,
 #homeView .about-copy .about-challenge{font-size:19px;line-height:1.75;white-space:normal}
 #homeView .about-copy .link-btn{font-size:16px}
 /* Join short mobile lines while keeping the value and name explanations distinct. */
 #homeView .about-copy p:nth-child(1)>br:first-of-type,
 #homeView .about-copy p:nth-child(3)>br:nth-of-type(2),
 #homeView .about-copy p:nth-child(3)>br:nth-of-type(3),
 #homeView .about-copy p:nth-child(3)>br:nth-of-type(5),
 #homeView .about-copy p:nth-child(4)>br{display:none}
 #homeView .business-heading{max-width:780px}
 #homeView .service-card{display:flex;flex-direction:column;min-height:300px;padding:28px}
 #homeView .service-card p{font-size:16px;line-height:1.85;text-wrap:wrap;margin-bottom:22px}
 #homeView .service-card .more{position:static;margin-top:auto;font-size:14px}
 #homeView .service-card p br,
 #homeView .value p br{display:none}
 #homeView .value p{font-size:16px;line-height:1.85;text-wrap:wrap}
 #homeView .value b{font-size:20px;line-height:1.55}
 #homeView .message-grid{align-items:start;gap:36px}
 #homeView .message-main{position:static;top:auto}
 #homeView .message-main>h2{position:static;top:auto;margin-bottom:28px}
 #homeView .message-main p{font-size:17px;line-height:1.9;margin-bottom:24px}
 #homeView .message-main p:last-child{margin-bottom:0}
 #homeView .message-keep-line{white-space:normal}
 #homeView .message-main p:nth-of-type(6){text-wrap:balance}
 #homeView .message-main p:nth-of-type(6)>br:first-of-type,
 #homeView .message-main p:nth-of-type(7)>br{display:none}
 #homeView .people-feature-copy p{font-size:17px;line-height:1.85;text-wrap:wrap}
 #homeView .people-feature-copy p br{display:none}
 #homeView .recruit-callout{grid-template-columns:minmax(0,1fr) auto;gap:40px;padding:40px}
 #homeView .recruit-callout h2{max-width:640px}
 #homeView .recruit-callout p{font-size:18px;line-height:1.85;text-wrap:wrap}
 #homeView .recruit-callout p br:nth-of-type(3),
 #homeView .recruit-callout p br:nth-of-type(7){display:none}
 #homeView .blog-strip h2{max-width:640px}
 #homeView .blog-strip p{font-size:18px;line-height:1.85}
 #homeView .blog-strip p br:nth-of-type(2){display:none}
 #homeView .privacy-note{font-size:14px;padding:18px}
 #homeView .privacy-note h3{font-size:16px}
 #homeView .privacy-note p{line-height:1.85}
 #homeView .privacy-note p br{display:initial}
}

/* Keep desktop two-line titles together, matching the About title's inset. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .business-heading-line--indent,
 #homeView .message-main>h2>span:last-child,
 #homeView .recruit-callout h2>span:last-child,
 #homeView .blog-strip h2>span:last-child{
  text-align:left !important;
  padding-left:2.5em;
 }
}

/* Use the desktop callout width with larger, readable text. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .recruit-callout h2,
 #homeView .blog-strip h2{
  font-size:clamp(44px,4.2vw,58px);
  max-width:100%;
  line-height:1.3;
 }
 #homeView .recruit-callout p,
 #homeView .blog-strip p{
  font-size:clamp(20px,1.8vw,24px);
  line-height:1.85;
  max-width:none;
  text-wrap:pretty;
 }
 #homeView .recruit-callout .kicker,
 #homeView .blog-strip .kicker{font-size:13px}
 #homeView .blog-tags span{font-size:12px;padding:7px 12px}
}

/* Balance the desktop callouts: title on the left, copy and action on the right. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .recruit-callout,
 #homeView .blog-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:22px 44px;
  align-items:start;
  padding:40px;
 }
 #homeView .recruit-callout>div:first-child,
 #homeView .blog-strip>div:first-child{display:contents}
 #homeView .recruit-callout .kicker,
 #homeView .blog-strip .kicker{grid-column:1;grid-row:1;margin:0}
 #homeView .recruit-callout h2,
 #homeView .blog-strip h2{
  grid-column:1;
  grid-row:2 / span 3;
  font-size:clamp(32px,3.2vw,44px);
  margin:0;
 }
 #homeView .recruit-callout p,
 #homeView .blog-strip p{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
  text-wrap:balance;
 }
 #homeView .recruit-callout>div:last-child{
  grid-column:2;
  grid-row:3;
  justify-self:end;
 }
 #homeView .blog-strip .blog-tags{
  grid-column:2;
  grid-row:3;
  margin:0;
 }
 #homeView .blog-strip>strong{
  grid-column:2;
  grid-row:4;
  justify-self:end;
 }
}

/* Keep complete phrases together in the narrower desktop copy column. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .recruit-callout p br:nth-of-type(3),
 #homeView .recruit-callout p br:nth-of-type(7),
 #homeView .blog-strip p br:nth-of-type(2){display:initial}
}

/* Give the desktop representative message a readable scale across its column. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .message-main p{
  font-size:clamp(18px,1.65vw,22px);
  line-height:1.85;
  width:100%;
  max-width:none;
  margin-bottom:24px;
 }
 #homeView .message-main p:last-child{margin-bottom:0}
}

/* Keep the desktop message together with a modest inset and a shared left edge. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .message-main{padding-left:24px}
 #homeView .message-main p{text-align:left}
}

/* Refine desktop message rhythm and emphasis without changing mobile copy. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .message-main{padding-left:16px}
 #homeView .message-main>h2{color:#111;margin-bottom:24px}
 #homeView .message-main p{line-height:1.75;margin-bottom:20px}
 #homeView .message-main p:nth-of-type(3){font-weight:700;color:#222}
 #homeView .message-main p:last-child{margin-bottom:0}
}

/* A single-line desktop message title leaves room for larger body text. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .message-main>h2{
  font-size:min(40px,5.3cqw);
  line-height:1.35;
  white-space:nowrap;
  margin-bottom:26px;
 }
 #homeView .message-main>h2>span{
  display:inline !important;
  padding-left:0 !important;
  text-align:left !important;
 }
 #homeView .message-main p{
  font-size:clamp(20px,1.8vw,24px);
  line-height:1.75;
 }
}

/* Align the desktop message block with the requested inset beside the portrait. */
@media (min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .message-main{padding-left:clamp(32px,4.4vw,60px)}
}

/* Separate the mobile recruitment heading from the desktop wording. */
.recruit-title-mobile{display:none}
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 .recruit-title-desktop{display:none}
 .recruit-title-mobile,.recruit-title-mobile>span{display:block}
}

/* Match the staggered two-line heading alignment on the mobile recruit page. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 .recruit-title-mobile>span:first-child{text-align:left}
 .recruit-title-mobile>span:last-child{text-align:right}
}

.recruit-lead-mobile{display:none}
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 .recruit-lead-desktop{display:none}
 .recruit-lead-mobile{display:inline}
}

/* Mobile recruit privacy notice: use the card width and separate topics. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 .recruit-privacy{padding:20px}
 .recruit-privacy p{width:100%;max-width:none;font-size:15px;text-align:left;line-height:1.8;text-wrap:wrap;overflow-wrap:break-word;margin:0 0 16px}
 .recruit-privacy p:last-child{margin-bottom:0}
 .recruit-privacy h3{margin-top:0;margin-bottom:16px}
}

/* Recruit detail page: desktop only; completed mobile layout remains intact. */
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #pageView[data-page="recruit"] .page-hero{padding:60px 0 40px}
 #pageView[data-page="recruit"] .page-title{font-size:clamp(44px,4.4vw,58px);line-height:1.22;letter-spacing:-.035em;max-width:850px;margin-bottom:26px}
 #pageView[data-page="recruit"] .recruit-title-desktop{display:block;width:100%;max-width:100%;white-space:nowrap}
 #pageView[data-page="recruit"] .recruit-title-desktop>span{display:block}
 #pageView[data-page="recruit"] .recruit-title-desktop>span:last-child{text-align:right}
 #pageView[data-page="recruit"] .page-lead{font-size:22px;line-height:1.8;max-width:none}
 #pageView[data-page="recruit"] .content-grid{gap:24px}
 #pageView[data-page="recruit"] .content-card{padding:28px}
 #pageView[data-page="recruit"] .content-card h3{font-size:24px;margin-bottom:14px}
 #pageView[data-page="recruit"] .content-card p{font-size:18px;line-height:1.8;text-wrap:wrap}
 #pageView[data-page="recruit"] .flow-title{font-size:28px;margin:48px 0 20px;line-height:1.4}
 #pageView[data-page="recruit"] .job{padding:32px}
 #pageView[data-page="recruit"] .job h3{font-size:30px}
 #pageView[data-page="recruit"] .job dl{grid-template-columns:170px minmax(0,1fr);font-size:18px;line-height:1.8}
 #pageView[data-page="recruit"] .job dt,#pageView[data-page="recruit"] .job dd{padding:18px 0}
 #pageView[data-page="recruit"] .meta span{font-size:15px;padding:8px 14px}
 #pageView[data-page="recruit"] .career{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 #pageView[data-page="recruit"] .career-card{padding:26px}
 #pageView[data-page="recruit"] .career-card b{font-size:15px}
 #pageView[data-page="recruit"] .career-card h4{font-size:23px;margin:8px 0 12px}
 #pageView[data-page="recruit"] .career-card p{font-size:18px;line-height:1.8}
 #pageView[data-page="recruit"] .timeline{max-width:none}
 #pageView[data-page="recruit"] .time-row{grid-template-columns:130px minmax(0,1fr);padding:20px 0;gap:24px}
 #pageView[data-page="recruit"] .time-row b,#pageView[data-page="recruit"] .time-row span{font-size:18px;line-height:1.8}
 #pageView[data-page="recruit"] .recruit-privacy{padding:28px 32px}
 #pageView[data-page="recruit"] .recruit-privacy h3{font-size:23px;margin:0 0 18px}
 #pageView[data-page="recruit"] .recruit-privacy p{font-size:16px;line-height:1.85;max-width:none;margin:0 0 18px;text-wrap:wrap}
 #pageView[data-page="recruit"] .recruit-privacy p:last-child{margin-bottom:0}
 #pageView[data-page="recruit"] .cta p{font-size:18px}
}

@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="recruit"] .recruit-future-card{padding-left:14px;padding-right:14px}
 #pageView[data-page="recruit"] .recruit-future-card p{width:100%;max-width:none;text-wrap:wrap;text-align:left}
}

@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sales"] .page-lead{width:100%;max-width:none;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
}

/* Use the mobile Business 01 task card width and separate the two sentences. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sales"] .content-grid>.content-card:first-child p{width:100%;max-width:none;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
 #pageView[data-page="sales"] .content-grid>.content-card:first-child p br.desktop-break{display:initial}
}

/* Fit the mobile style sentence using the card right-side space. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sales"] .content-card:last-child p{width:calc(100% + 14px);margin-right:-14px;container-type:inline-size;text-wrap:wrap}
 #pageView[data-page="sales"] .business01-style-line{white-space:nowrap;letter-spacing:min(0px,calc((100cqw - 24em)/23))}
}

/* Keep the mobile contact second line together within the available CTA width. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sales"] .cta>div{min-width:0;width:100%}
 #pageView[data-page="sales"] .cta p{width:100%;max-width:none;margin-right:0;text-wrap:wrap}
 #pageView[data-page="sales"] .business01-contact-line{white-space:nowrap;letter-spacing:normal}
}

/* Fill the phone CTA grid track instead of sizing it to the button contents. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sales"] .cta{grid-template-columns:minmax(0,1fr);justify-content:stretch}
}

/* Preserve the requested desktop line break in the homepage SNS card. */
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .service-card[data-page="sns"] p br{display:initial}
}

/* Desktop-only creative copy; preserve the existing mobile wording and break. */
.home-creative-desktop{display:none}
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .service-card[data-page="creative"] .home-creative-mobile{display:none}
 #homeView .service-card[data-page="creative"] .home-creative-desktop{display:inline}
 #homeView .service-card[data-page="creative"] p br{display:initial}
}

/* Preserve the requested desktop line break in the homepage DX/AI card. */
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .service-card[data-page="dx"] p br{display:initial}
}

/* Preserve the requested desktop break in the first homepage value card. */
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .values>.value:first-child p br{display:initial}
}

/* Separate desktop first-value wording from the completed mobile copy. */
.home-value-desktop{display:none}
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .values>.value:first-child .home-value-mobile{display:none}
 #homeView .values>.value:first-child .home-value-desktop{display:inline}
}

/* Desktop second-value line break; preserve mobile text flow. */
.home-value-calm-desktop{display:none}
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .values>.value:nth-child(2) .home-value-calm-mobile{display:none}
 #homeView .values>.value:nth-child(2) .home-value-calm-desktop{display:inline}
 #homeView .values>.value:nth-child(2) p br{display:initial}
}

/* Preserve the requested desktop break in the third homepage value card. */
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .values>.value:nth-child(3) p br{display:initial}
}

/* Preserve the three requested desktop lines in the homepage people introduction. */
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .people-feature-copy p br{display:initial}
}

/* Desktop contact introduction breaks; preserve the existing mobile paragraph. */
.home-contact-desktop{display:none}
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView #contact .home-contact-mobile{display:none}
 #homeView #contact .home-contact-desktop{display:inline}
}

/* Separate desktop privacy notice breaks from the existing mobile copy. */
.home-privacy-desktop{display:none}
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .privacy-note .home-privacy-mobile{display:none}
 #homeView .privacy-note .home-privacy-desktop{display:block}
}

/* Keep desktop About copy breaks independent of the mobile layout. */
.home-about-desktop{display:none}
@media(min-width:921px), (orientation:landscape) and (max-height:500px){
 #homeView .about-copy .home-about-mobile{display:none}
 #homeView .about-copy .home-about-desktop{display:block}
 #homeView .card.about-copy .home-about-desktop p>br{display:initial}
 #homeView .about-copy .home-about-desktop .about-value{display:inline;margin-top:0}
}

/* SNS detail: fit the requested final mobile line without changing desktop. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sns"] .recruit-lead-mobile{display:block;width:100%}
 #pageView[data-page="sns"] .recruit-lead-mobile{width:calc(100% + 6px);margin-right:-6px;container-type:inline-size}
 #pageView[data-page="sns"] .sns-mobile-last-line{display:inline;font-size:inherit;white-space:normal;letter-spacing:inherit}
}

/* Use the SNS phone contact card width while retaining the button size. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="sns"] .cta{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 #pageView[data-page="sns"] .cta>div{min-width:0;width:100%}
 #pageView[data-page="sns"] .cta p{width:100%;max-width:none;text-wrap:wrap}
 #pageView[data-page="sns"] .cta .recruit-lead-mobile{width:100%;margin-right:0;container-type:normal}
 #pageView[data-page="sns"] .cta .btn{width:max-content;max-width:100%;justify-self:start}
}

/* Use the creative mobile approach card text width and explicit sentence break. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="creative"] .content-card:nth-child(3) p{width:100%;max-width:none;text-wrap:wrap}
}

/* Use the creative phone contact text width without changing text size. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="creative"] .cta{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 #pageView[data-page="creative"] .cta>div{min-width:0;width:100%}
 #pageView[data-page="creative"] .cta p{width:100%;max-width:none;text-wrap:wrap}
 #pageView[data-page="creative"] .cta .btn{width:max-content;max-width:100%;justify-self:start}
}

/* Use the Web app phone contact text width. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="app"] .cta{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 #pageView[data-page="app"] .cta>div{min-width:0;width:100%}
 #pageView[data-page="app"] .cta p{width:100%;max-width:none;text-wrap:wrap}
 #pageView[data-page="app"] .cta .btn{width:max-content;max-width:100%;justify-self:start}
}

/* Use the mobile Web app future card width with the requested break. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="app"] .content-card:last-child p{width:100%;max-width:none;text-wrap:wrap}
}

/* Use the mobile qualification card text width with phrase-level breaks. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="training"] .content-card:nth-child(3) p{width:100%;max-width:none;text-wrap:wrap}
}

/* Use the training phone contact text width while retaining the button size. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="training"] .cta{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 #pageView[data-page="training"] .cta>div{min-width:0;width:100%}
 #pageView[data-page="training"] .cta p{width:100%;max-width:none;text-wrap:wrap}
 #pageView[data-page="training"] .cta .btn{width:max-content;max-width:100%;justify-self:start}
}

/* Use the available mobile training introduction width. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="training"] .page-lead{width:100%;max-width:none;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
}

/* Let the mobile DX introduction use its full container width. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="dx"] .page-lead{width:100%;max-width:none;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
}

/* Use the full mobile DX current-use card text width. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="dx"] .content-grid>.content-card:first-child p{width:100%;max-width:none;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
}

/* Use the full mobile DX future and development card text width. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="dx"] .content-grid>.content-card:nth-child(3) p,
 #pageView[data-page="dx"] .content-grid>.content-card:nth-child(4) p{width:100%;max-width:none;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
}

/* Use the mobile DX contact text width without changing its button. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="dx"] .cta{grid-template-columns:minmax(0,1fr);justify-content:stretch}
 #pageView[data-page="dx"] .cta>div{min-width:0;width:100%}
 #pageView[data-page="dx"] .cta p{width:100%;max-width:none;text-wrap:wrap}
}

/* Use all available text width on the mobile people page. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .person-body,
 #pageView[data-page="people"] .interview>div{min-width:0;width:100%}
 #pageView[data-page="people"] .page-lead,
 #pageView[data-page="people"] .person-body p,
 #pageView[data-page="people"] .interview h3,
 #pageView[data-page="people"] .qa,
 #pageView[data-page="people"] .qa>span{width:100%;max-width:none;min-width:0;text-wrap:wrap;overflow-wrap:normal;word-break:normal}
}

/* Show every member introduction and let phone cards grow with their copy. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .people-grid .person{height:auto;grid-template-rows:auto}
 #pageView[data-page="people"] .people-grid .person-body{height:auto;max-height:none}
 #pageView[data-page="people"] .people-grid .person-body>p:not(.voice){display:block}
}

/* Fit each phone member image inside its column without cropping the sides. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .people-grid .person-visual{align-items:center}
 #pageView[data-page="people"] .people-grid .person-visual img{width:240%;max-width:none;height:auto;flex:none;object-fit:contain;object-position:center;transform:none}
 #pageView[data-page="people"] .people-grid .person:nth-child(2) .person-visual img{width:205%}
 #pageView[data-page="people"] .people-grid .person:nth-child(3) .person-visual img{width:205%}
 #pageView[data-page="people"] .people-grid .person:nth-child(4) .person-visual img{width:285%}
}

/* Match mobile character heights to Kobayashi while preserving their full width. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .people-grid .person{grid-template-columns:128px minmax(0,1fr)}
 #pageView[data-page="people"] .people-grid .person:nth-child(n) .person-visual img{width:auto;height:145px;max-width:none}
 #pageView[data-page="people"] .people-grid .person:nth-child(3) .person-visual img{height:160px}
 #pageView[data-page="people"] .people-grid .person:nth-child(4) .person-visual img{height:160px}
}

/* Remove gray bands and size mobile member image frames to their illustrations. */
@media(max-width:620px) and (orientation:portrait), (max-width:620px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .people-grid .person-visual{background:#fff;height:auto;min-height:0;align-self:center}
}

/* Match mobile member introductions and the quotation at 11px. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .people-grid .person-body>p{font-size:11px}
}

/* Use regular weight for the mobile representative quotation. */
@media(max-width:920px) and (orientation:portrait), (max-width:920px) and (orientation:landscape) and (min-height:501px){
 #pageView[data-page="people"] .people-grid .person-body>.voice{font-weight:400}
}


/* On phone-sized landscape viewports, use the web layout while keeping portrait rules intact. */