/* 紹介ページ：支給参考の01〜03、交互写真、連続する淡い背景。 */
.about-page .page-hero{padding-left:6%;padding-bottom:70px}
.about-page .page-hero:after{right:1%;width:185px;height:240px;top:45px}
.about-page .page-hero h1{font-size:clamp(34px,3.6vw,52px);line-height:1.5}
.about-story{position:relative;isolation:isolate;overflow-x:clip;padding:50px 0 65px}
.about-story-inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:80px}
.about-story-photo{position:relative;isolation:isolate;margin:0;min-width:0}
.about-story-photo img{display:block;width:100%;height:auto;aspect-ratio:1.62;object-fit:cover;border-radius:18px 95px 75px 30px}
.about-story-photo:before{content:"";position:absolute;z-index:-1;left:-12%;top:14%;width:98%;height:82%;border-radius:48% 52% 45% 55%;background:#ffedf1;transform:rotate(-16deg);pointer-events:none}
.about-story-copy{min-width:0}
.about-story-label{display:flex;align-items:center;gap:25px;margin-bottom:20px}
.about-story-number{font-family:var(--serif);font-size:64px;line-height:1;color:#df738c;display:flex;align-items:center;gap:25px;flex-shrink:0}
.about-story-number:after{content:"";width:50px;height:1px;background:#dc94a4}
.about-story-label .eyebrow{margin:0;white-space:normal;line-height:1.6;padding:4px 12px}
.about-page .about-story h2{font-size:clamp(28px,2.65vw,40px);font-weight:500;line-height:1.55;letter-spacing:.045em;margin-bottom:26px}
.about-story-copy>p{font-size:18px;line-height:1.9;letter-spacing:.02em}
.about-story-copy>p+p{margin-top:22px}
.about-story-copy>.text-link{margin-top:26px}
.about-story-02{padding-block:90px}
.about-story-02:before{content:"";position:absolute;inset:-35px 0 -30px;z-index:-2;background:url('./assets/about-story-flow.svg') center/100% 100% no-repeat;pointer-events:none}
.about-story-02 .about-story-inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.about-story-02 .about-story-copy{grid-column:1;grid-row:1}
.about-story-02 .about-story-photo{grid-column:2;grid-row:1}
.about-story-02 .about-story-photo img{aspect-ratio:1.4;border-radius:90px 35px 85px 24px;object-position:44% center}
.about-story-02 .about-story-photo:before{left:-8%;top:18%;width:110%;height:75%;background:#ffdde680}
.about-story-02 .about-story-photo:after,.about-story-03 .about-story-photo:after{content:"";position:absolute;right:-50px;bottom:-35px;width:100px;height:180px;background:url('./assets/leaf-sprig.svg') center/contain no-repeat;transform:rotate(20deg);pointer-events:none}
.about-story-03{padding-top:65px;padding-bottom:50px}
.about-story-03 .about-story-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.about-story-03 .about-story-photo img{border-radius:95px 25px 70px 18px;aspect-ratio:1.6;object-position:30% center}
.about-story-03 .about-story-photo:before{left:-10%;top:25%;width:120%;height:70%;transform:rotate(12deg)}
.about-story-03 .about-story-photo:after{left:-45px;right:auto;bottom:-35px;transform:rotate(-25deg)}
.about-page .comparison-section{padding-top:90px}
@media(max-width:1180px){
 .about-story-inner{gap:45px}.about-story-label,.about-story-number{gap:16px}.about-story-number{font-size:54px}.about-story-number:after{width:32px}
 .about-story-02 .about-story-photo:after{right:-25px}
 .about-story-03 .about-story-photo:after{left:-25px}
}
@media(max-width:800px){
 .about-page .page-hero{padding:35px 0 50px}.about-page .page-hero h1{font-size:32px}.about-page .page-hero:after{width:90px;height:135px;top:10px}
 .about-story{padding-block:35px 50px}
 .about-story-inner,.about-story-02 .about-story-inner,.about-story-03 .about-story-inner{grid-template-columns:1fr;gap:30px}
 .about-story-02 .about-story-copy,.about-story-02 .about-story-photo{grid-column:auto;grid-row:auto}
 .about-story-photo{width:calc(100% - 12px);margin-inline:auto}
 .about-story-photo img{border-radius:18px 65px 55px 25px}
 .about-story-02{padding-block:65px}
 .about-story-02:before{inset:-15px 0 -15px}
 .about-story-02 .about-story-photo img{border-radius:65px 25px 65px 18px;aspect-ratio:1.5}
 .about-story-03 .about-story-photo img{border-radius:65px 20px 50px 18px}
 .about-story-photo:before{left:-5%;width:104%}
 .about-story-03 .about-story-photo:before{left:-4%;width:108%}
 .about-story-02 .about-story-photo:after{right:-10px;bottom:-22px;width:65px;height:125px}
 .about-story-03 .about-story-photo:after{left:-10px;bottom:-22px;width:65px;height:125px}
 .about-story-label{gap:12px;margin-bottom:18px}.about-story-number{font-size:46px;gap:12px}.about-story-number:after{width:24px}
 .about-story-label .eyebrow{padding:4px 8px;font-size:16px}
 .about-page .about-story h2{font-size:28px;margin-bottom:22px}
 .about-story-copy>p{letter-spacing:0}
 .about-page .comparison-section{padding-top:55px}
}
@media(max-width:370px){.about-page .page-hero h1{font-size:29px}.about-story-number{font-size:40px}.about-story-number:after{width:16px}.about-story-label,.about-story-number{gap:9px}}

/* 比較の要約画像と既存の詳細表を併設。画像内文字を縮めず横スクロール。 */
.comparison-visual{margin:38px 0 55px}
.comparison-visual-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #efd7de;border-radius:22px;background:#fff8f7;scrollbar-color:#df8ca3 #fff0f3;scrollbar-width:thin}
.comparison-visual-scroll:focus-visible{outline:3px solid #c4385a;outline-offset:5px}
.comparison-visual-scroll a{display:block;min-width:900px;text-decoration:none}
.comparison-visual-scroll img{width:100%;height:auto;display:block}
.comparison-visual figcaption{font-size:16px;line-height:1.8;margin-top:16px}
.comparison-visual figcaption a{color:#a72948;text-underline-offset:5px}
.comparison-visual-hint{display:none}
@media(max-width:1000px){.comparison-visual-hint{display:block;margin-bottom:8px}.comparison-visual{margin-block:28px 40px}.comparison-visual-scroll{border-radius:16px}}

/* 画像版比較をテキストの表として再現 */
.comparison-overview{margin:40px 0 60px;padding:32px 0 0}.comparison-overview>h3{font-size:clamp(28px,3.2vw,44px);text-align:center;line-height:1.6;margin:0 20px 16px}.comparison-overview-lead{text-align:center;font-size:20px;margin:0 20px}.comparison-legend{list-style:none;padding:16px 24px;margin:28px auto;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 36px;border:1px solid #efa1b3;border-radius:16px;width:fit-content;max-width:calc(100% - 32px)}.comparison-legend li{display:flex;align-items:center;gap:12px;font-size:16px}.comparison-legend span{font-size:36px;font-weight:600;color:#d63a66;line-height:1}.comparison-overview-scroll{overflow-x:auto;max-width:100%;margin-top:28px;border:1px solid #eadfe0;border-radius:16px;scrollbar-color:#e96387 #fbe7eb}.comparison-overview-scroll:focus-visible{outline:3px solid #c4385a;outline-offset:4px}.comparison-summary{border-collapse:separate;border-spacing:0;width:100%;min-width:800px;table-layout:fixed}.comparison-summary th,.comparison-summary td{border-right:1px solid #eadfe0;border-bottom:1px solid #eadfe0;padding:26px 24px;text-align:left;vertical-align:middle;font-size:16px;line-height:1.9;background:#fffdfc}.comparison-summary tr>*:first-child{background:#f7f3f2;font-weight:600}.comparison-summary tr>*:last-child{border-right:0}.comparison-summary tbody tr:last-child>*{border-bottom:0}.comparison-summary thead th{background:#eee8e5;font-size:20px;text-align:center;padding-block:24px}.comparison-summary thead th:first-child{background:#eee8e5;font-size:16px}.comparison-summary thead th span{display:block;font-size:16px;margin-top:8px}.comparison-row-heading{width:19%}.comparison-summary .comparison-featured{background:#fff0f3}.comparison-summary thead .comparison-featured{background:#d83f69;color:#fff}.comparison-symbol{display:block;font-size:56px;line-height:1.2;color:#777;margin-bottom:16px}.comparison-featured .comparison-symbol{color:#d63a66}.comparison-summary p{font-size:16px;line-height:1.9;margin:0}.comparison-summary .comparison-confirm{margin-top:12px}.comparison-overview-note{font-size:16px;text-align:left;line-height:1.8;margin:20px 0 0}.comparison-scroll-hint{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:800px){.comparison-overview{margin-block:32px;padding-block:24px}.comparison-overview-lead{font-size:16px}.comparison-scroll-hint{display:block;font-size:16px;margin:20px 0 12px}.comparison-overview-scroll{margin-top:12px;border-radius:12px}.comparison-summary{min-width:800px}.comparison-summary th,.comparison-summary td{padding:20px 16px}.comparison-summary tr>*:first-child{position:sticky;left:0;z-index:1;box-shadow:4px 0 8px #2b24240c}.comparison-legend{padding:16px;justify-content:flex-start}.comparison-overview-note{text-align:left}}
