/* Intermediate touch widths retain the requested phone fixes without shrinking
the desktop composition into a narrow pair of columns. */
@media (min-width: 701px) and (max-width: 1000px) {
.recruit-page .rec-job-marquee {
--fold-word-size: clamp(84px, 12vw, 120px);
font-size: var(--fold-word-size);
top: calc(var(--fold-word-size) * -.5);
}
/* Keep the previously selected bridge crop on an opened foldable, too. */
.footer-photo.media-photo-frame { object-position: left bottom; }
/* The artwork sits below the title/subtitle instead of narrowing into them. */
.footer-promo .company-art { width: 180px; height: 147px; right: 12px; top: 126px; opacity: 1; }
.footer-promo .risk-art { width: 150px; height: 177px; right: 12px; top: 108px; opacity: 1; }
.footer-promo .risk-art > img:first-child { width: 195px; height: 177px; left: -22px; }
.footer-promo .risk-art .risk-shield { left: 85px; top: 75px; width: 33px; height: 42px; }
.footer-promo .recruit-art { width: 180px; height: 164px; right: 12px; top: 120px; opacity: 1; }
}
@media (min-width: 701px) and (max-width: 1000px) {
.home-features .feature-cards {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: 1fr;
align-items: stretch;
gap: 64px;
max-width: 640px;
margin: 64px auto 0;
}
.home-features .feature-card,
.home-features .feature-card:nth-child(1),
.home-features .feature-card:nth-child(2) {
top: auto;
margin-top: 0;
width: 100%;
min-height: 0;
padding: 36px 40px;
}
.home-features .feature-card h3 { font-size: 24px; }
.home-features .feature-card > p { max-width: 32em; font-size: 16px; line-height: 1.9; }
.home-features .feature-card > .feature-placeholder { width: 240px; height: 210px; object-fit: contain; margin-bottom: 32px; }
.home-features .feature-card .feature-visual--accredited {
width: min(100%, 360px);
height: 210px;
grid-template-columns: minmax(0, 1fr) 82px;
gap: 18px;
}
.home-features .feature-accreditation > img { width: 74px; }
.home-features .feature-accreditation > span { font-size: 11px; }
.about-page .about-greeting { padding: 120px 40px 110px; z-index: 1; }
.about-page .about-greeting-inner { flex-direction: column; align-items: stretch; gap: 48px; }
.about-page .about-greeting-copy { width: 100%; gap: 40px; }
.about-page .about-greeting-message { font-size: 16px; line-height: 2.1; }
.about-page .about-president { width: min(78%, 340px); margin: 0 auto !important; order: 2; }
.about-page .about-philosophy { z-index: 0; }
}
@media (min-width: 701px) and (max-width: 1000px) {
.recruit-page .rec-fitting-cards h3 > span { display: block; white-space: nowrap; }
.case-highlights .case-highlight-visual { grid-row: 1 / 3; }
.case-highlights .case-highlight-action { grid-column: 1 / -1; padding-right: 60px; }
.case-highlights .case-highlight-plus { position: absolute; right: 36px; bottom: 36px; }
}
/* 2026-09-29 The client replaced the dummy recruit message with real paragraphs.
The dummy was hand-broken with
, so the old rules kept each line on one row
(overflowing the column past 1200px) and hid the
below 1200px (merging the
client's own line breaks). Real text wraps in its column and keeps its breaks. */
.recruit-page .rec-message-paragraphs p{white-space:normal}
.recruit-page .rec-message-paragraphs br{display:inline}
/* Japanese headings were splitting inside a word (もしもの時こ|そ, サイバー攻|撃,
リライ|アンス). Break after 、・ first; break anywhere only if a phrase is wider
than its box, so nothing can overflow. */
.feature-cards>.feature-card>h3,
.guidance-card-copy>h3,
#guidance-detail-title,
.recruit-page .rec-message-copy>h3,
.feature-credentials-contact>p{word-break:keep-all;overflow-wrap:anywhere}
/* The heading's second line is one quoted phrase (「人のために動ける人」。). At 27px it
needs about 330px; the narrowest folds give it 304px, so step it down there. */
@media(max-width:380px){.recruit-page .rec-message-copy>h3{font-size:24px}}
/* 賠償責任・サイバー攻撃への備え: the second phrase needs 254px at 24px, the card title
box is 244px at 344 and exactly 260px at 360. A step down keeps it on one line. */
@media(max-width:374px){.guidance-card-copy>h3,#guidance-detail-title{font-size:22px}}
/* The closing line (まずはリライアンスにご相談ください。) is wider than the box below
~400px in Chromium. Phrase-aware breaking there avoids a lone 「。」; WebKit already
fits it and ignores this. */
@supports (word-break:auto-phrase){.feature-credentials-contact>p{word-break:auto-phrase}}
/* 2026-10-18 6大リスクの事例（お客様の原稿・実在の判例）
本文の改行・空行は pages/case-text.js で
/段落にする。金額・日付・掲載頁は .nw で途中改行しない。
小書きの仮名を行頭に置かない（line-break:strict）、見出しの最終行を1〜2文字にしない（balance）。 */
.nw{white-space:nowrap}
.risk-example-card h3,.risk-example-card h4,.case-detail-heading h3,.case-highlights .case-highlight-heading h3{line-break:strict;text-wrap:balance}
/* 分類ラベル: balance だと「完｜了」、keep-all だと最後の1文字が落ちる。行末をそろえ、文節（対応ブラウザ）で折り返す。
漢字の並びは pages/case-text.js の caseLabel で .nw にしてあるので、Safari 系でも熟語の途中では割れない */
.risk-example-tag,.case-detail-tag{line-break:strict;text-wrap:pretty}
@supports (word-break:auto-phrase){.risk-example-tag,.case-detail-tag{word-break:auto-phrase}}
.risk-example-card>p,.case-detail-description>p,.risk-example-impact p{line-break:strict;text-wrap:pretty}
.risk-example-card>p+p,.risk-dialog[data-view=case] .case-detail-description>p+p{margin-top:.9em}
.risk-example-card>p.risk-case-source,.risk-dialog[data-view=case] .case-detail-description>p.risk-case-source{font-size:.86em;line-height:1.8;color:#5b6d78;text-wrap:wrap}
/* 募集要項の下の注記を表と同じ幅・中央にそろえ、表との間をあける（.recruit-page p{margin:0} より強く） */
.recruit-page .job-conditions-note{max-width:900px;margin:20px auto 0;line-break:strict;text-wrap:pretty}
/* 画面には出さず、検索と読み上げにだけ渡す文字（英字見出しの日本語名など） */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* 事例の見出しも文節で折り返す（「か｜ら」のような助詞の途中を避ける。対応ブラウザのみ） */
@supports (word-break:auto-phrase){.risk-example-card h3,.risk-example-card h4,.case-detail-heading h3,.case-highlights .case-highlight-heading h3{word-break:auto-phrase}}