/* 本体サイトに合わせたヒーロー・相談エリア（2026-09-11 採用） */
/* 曲線と写真を同じ要素に置き、SVGの下端へ赤い面を直接合わせる。 */
.brand-home { --motif-width:323px; --motif-height:calc(var(--motif-width) * 336 / 323); }
.brand-home .masthead__bar { z-index:3; }
.brand-home .hero--single { padding:48px 0 0 64px; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:48px; align-items:start; }
.brand-home .hero__copy { position:relative; z-index:2; padding-top:0; }
.brand-home .hero__visual { position:relative; z-index:1; margin:180px 0 0; padding:24px 32px 22px; background:var(--red); border-radius:40px 0 0 40px; }
.brand-home .hero__visual::before { content:""; position:absolute; top:49%; right:0; left:0; height:12px; background:#fff; }
.brand-home .hero__visual > img:not(.hero__motif) { position:relative; max-width:460px; margin:0 auto; border-radius:24px; }
.brand-home .hero__visual > .hero__motif { position:absolute; right:0; bottom:100%; width:var(--motif-width); height:var(--motif-height); max-width:none; margin:0; border-radius:0; pointer-events:none; }
.brand-home .hero__visual figcaption { position:relative; color:#fff; max-width:460px; margin:12px auto 0; text-align:left; }
.brand-home .cta, .brand-sub .cta { padding:80px 0 0; }
.brand-home .cta__inner, .brand-sub .cta__inner { border-radius:40px 40px 0 0; background:#000; box-shadow:none; padding:76px 64px; }
.brand-home .cta__inner::after, .brand-sub .cta__inner::after { display:none; }
.brand-home .cta__inner::before, .brand-sub .cta__inner::before { content:""; position:absolute; inset:0 0 0 auto; width:720px; max-width:100%; background:url("img/brand/links-consult.svg") right center/cover no-repeat; }
.brand-home .cta__body, .brand-sub .cta__body { max-width:760px; }
.brand-home .cta__title, .brand-sub .cta__title { color:#fff; }
.brand-home .cta__text, .brand-sub .cta__text { color:#fff; }
.brand-home .cta__body .link-under, .brand-sub .cta__body .link-under { color:#fff; border-color:#fff; }
.brand-home .cta__body .btn, .brand-sub .cta__body .btn { color:#000; background:#fff; min-width:300px; justify-content:space-between; padding:22px 32px; }
.brand-home .cta__body .btn::after, .brand-sub .cta__body .btn::after { background:#000; }
@media(max-width:1100px) {
 .brand-home .hero--single { padding-left:32px; gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .brand-home .hero__visual { padding:24px; }
}
@media(max-width:1024px) {
 .brand-home { --motif-width:clamp(180px,26vw,240px); }
 .brand-home .hero__visual { margin-top:calc(var(--motif-height) - 156px); }
}
@media(max-width:768px) {
 .brand-home .hero__visual { margin-top:calc(var(--motif-height) - 133px); }
 .brand-home .cta, .brand-sub .cta { padding-top:48px; }
 .brand-home .cta__inner, .brand-sub .cta__inner { padding:52px 24px; border-radius:28px 28px 0 0; }
 .brand-home .cta__inner::before, .brand-sub .cta__inner::before { background-position:center; }
 .brand-home .cta__body .btn, .brand-sub .cta__body .btn { width:100%; min-width:0; padding:18px 24px; }
}
@media(max-width:700px) {
 .brand-home { --motif-width:112px; }
 .brand-home .hero--single { padding:30px 20px 0; gap:28px; grid-template-columns:1fr; }
 .brand-home .hero__visual { margin:calc(var(--motif-width) - 40px) -20px 0; width:calc(100% + 40px); padding:24px 20px; border-radius:32px 0 0 32px; }
 /* 元SVGの切れた辺を画面右端へ向け、曲線を写真に接続する。 */
 .brand-home .hero__visual > .hero__motif { bottom:calc(100% - 40px); transform-origin:top right; transform:translateY(var(--motif-height)) rotate(90deg); }
 /* 写真の右余白を一定にし、回転したSVGの白線の終端を写真の下へ隠す。 */
 .brand-home .hero__visual > img:not(.hero__motif) { max-width:none; border-radius:20px; }
 .brand-home .hero__visual::before { height:8px; }
 .brand-home .hero__visual figcaption { margin:12px 0 0; }
}