/* スクロール演出の対象を、小さい画面でも欠けずに読めるようにする。 */
.introduction, .service, .feature { scroll-margin-top: 28px; }
.feature { overflow: clip; }
.service .title .visual .thumb { flex: 1; min-width: 0; overflow: hidden; }
.service .title .visual .thumb img { display: block; }
.service .container { margin-right: auto; margin-left: auto; }
.service .container .box-wrapper .box .en-back { max-width: 100%; overflow: hidden; white-space: nowrap; pointer-events: none; }

@media (max-width: 1500px) {
    .introduction .container { gap: 40px; }
    .introduction .container .visual { flex: 0 0 48%; width: 48%; height: auto; aspect-ratio: 75 / 65; z-index: 10; }
    .introduction .container .visual .rotate-line { width: 72%; height: auto; aspect-ratio: 1; }
    .introduction .container .visual .row-wrapper { padding: 0 5%; }
    .introduction .container .visual .row-wrapper .row .mark { flex: 0 0 29%; width: 29%; height: auto; aspect-ratio: 1; }
    .introduction .container .visual .row-wrapper .row.third { gap: 12%; }
    .introduction .container .visual .row-wrapper .row .mark .letter .main { font-size: clamp(15px, 1.65vw, 20px); letter-spacing: .03em; }
    .introduction .container .visual .row-wrapper .row .mark .letter .sub { font-size: 12px; letter-spacing: 0; }
    .introduction .container .visual .logo { width: 16%; height: auto; aspect-ratio: 1; }
    .introduction .container .text { flex: 1; min-width: 0; width: auto; padding: 0; }
    .introduction .container .text .semi { margin-bottom: 24px; }
    .introduction .container .text .semi .catch { line-height: 1.6; }
    .introduction .container .text h2 { margin-bottom: 32px; }
    .introduction .container .text h2 .catch { font-size: 38px; }
    .introduction .container .text .sentence p { font-size: 16px; line-height: 2; letter-spacing: .04em; }
    .introduction .container .text .sentence br { display: none; }
    .service .title .text { width: 100%; gap: 32px; }
    .service .title .text .left { min-width: 0; }
    .service .title .text .right { flex: 0 0 35%; }
    .service .title .text .en-copy .catch { font-size: clamp(50px, 8vw, 120px); }
    .service .title .text h2 .catch { font-size: clamp(26px, 3.2vw, 44px); }
    .service .title .text h2::before { width: 5rem; }
    .service .title .text .right .sentence p { font-size: 16px; line-height: 2; }
    .service .container .box-wrapper .box .text { padding: 24px 22px 24px 14px; }
    .service .container .box-wrapper .box:nth-child(2n) .text { padding: 24px 14px 24px 22px; }
    .service .container .box-wrapper .box .text h3 .catch { font-size: 28px; }
    .service .container .box-wrapper .box .text .sentence p { font-size: 16px; line-height: 1.9; }
    .feature .box-wrapper .box { padding: 80px 6%; }
    .feature .box-wrapper .box .thumb { max-width: 80%; }
    .feature .box-wrapper .box .text h4 { font-size: clamp(23px, 2.6vw, 35px); }
}

@media (max-width: 1023px) {
    .introduction .container { min-height: 0; flex-direction: column; padding: 72px 5%; gap: 48px; }
    .introduction .container .visual { flex-basis: auto; width: min(100%, 570px); }
    .introduction .container .visual .row-wrapper .row .mark .letter .main { font-size: clamp(16px, 3vw, 23px); }
    .introduction .container .text { flex: auto; width: 100%; max-width: 640px; }
    .introduction .container .text .sentence p { margin-bottom: 28px; }
    .introduction .container .en-back { font-size: 56px; left: 1%; opacity: .5; }
    .service .title { min-height: 480px; height: auto; padding: 72px 0 120px; }
    .service .title .visual, .service .title .bg-grade { inset: 0; }
    .service .title .text { flex-direction: column; align-items: flex-start; gap: 24px; }
    .service .title .text .right { flex: auto; width: 100%; max-width: 600px; }
    .service .container .box-wrapper { margin-top: -64px; gap: 24px; }
    .service .container .box-wrapper .box { width: 100%; margin: 0; }
    .service .container .box-wrapper .box .thumb { height: 320px; }
    .feature .title h2 { font-size: 42px; }
    .feature .box-wrapper .box .text ul { gap: 12px; }
    .feature .box-wrapper .box .text ul li { font-size: 17px; }
    .feature .box-wrapper .box .text .sentence p { font-size: 16px; line-height: 2; }
    .feature .box-wrapper .box .text .sentence br { display: none; }
}

@media (max-width: 767px) {
    .introduction .container { padding: 64px 20px 72px; gap: 36px; }
    .introduction .container .visual { width: min(100%, 460px); }
    .introduction .container .visual .row-wrapper .row .mark .letter .main { font-size: clamp(14px, 3.5vw, 20px); }
    .introduction .container .visual .row-wrapper .row .mark .letter .sub { line-height: 1.1; }
    .introduction .container .text h2 .catch { font-size: 30px; }
    .introduction .container .text .semi .catch { font-size: 16px; }
    .introduction .container .en-back { font-size: 40px; }
    .service .title { padding: 64px 0 108px; }
    .service .title .text { padding: 0 20px; mix-blend-mode: normal; }
    .service .title .text .en-copy .catch { font-size: clamp(40px, 10vw, 64px); letter-spacing: .025em; }
    .service .title .text h2 { margin-top: 20px; }
    .service .title .text h2::before { width: 24px; margin-right: 12px; flex-shrink: 0; }
    .service .title .text h2 .catch { font-size: clamp(23px, 5.7vw, 34px); }
    .service .container { padding: 1px 20px 72px; }
    .service .container .box-wrapper { margin-top: -48px; gap: 28px; }
    .service .container .box-wrapper .box,
    .service .container .box-wrapper .box:nth-child(2n) { flex-direction: column; align-items: stretch; }
    .service .container .box-wrapper .box .thumb { width: 100%; height: clamp(220px, 60vw, 360px); }
    .service .container .box-wrapper .box .thumb { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
    .service .container .box-wrapper .box:nth-child(2n) .thumb { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
    .service .container .box-wrapper .box .text,
    .service .container .box-wrapper .box:nth-child(2n) .text { width: 100%; padding: 24px; }
    .service .container .box-wrapper .box .en-back .catch { font-size: 40px; }
    .service .container .box-wrapper .box .text .number { font-size: 16px; }
    .service .container .box-wrapper .box .text h3 { margin-top: 8px; }
    .service .container .box-wrapper .box .text .sentence { margin-top: 16px; }
    .feature { min-height: 0; }
    .feature .title { padding: 72px 20px 0; }
    .feature .title .en-back { font-size: 19px; letter-spacing: .08em; }
    .feature .title h2 { margin-top: 16px; font-size: 30px; }
    .feature .box-wrapper { padding: 0 20px 72px; }
    .feature .box-wrapper .box { margin-top: 88px; padding: 56px 24px 32px; }
    .feature .box-wrapper .box .number { top: -50px; left: 10px; font-size: 100px; }
    .feature .box-wrapper .box .thumb { width: 100%; max-width: 100%; }
    .feature .box-wrapper .box .text h3 { font-size: 30px; }
    .feature .box-wrapper .box .text h4 { font-size: 20px; line-height: 1.7; margin-top: 16px; }
    .feature .box-wrapper .box .text ul { gap: 8px; margin-top: 24px; }
    .feature .box-wrapper .box .text ul li { font-size: 14px; line-height: 1.7; padding: 5px 10px; }
    .feature .box-wrapper .box .text .sentence { margin-top: 24px; }
}