/* ==========================================================================
   事業案内（page-services.php）
   ========================================================================== */
.p-service {
    --navy: #06386e;
    --deep: #052e60;
    --paper: #f6f6ee;

    color: var(--navy);
    background: var(--paper) url("../images/page/paper.jpg");
    font-family: var(--font-mincho);
    line-height: 1.9;

    a {
        transition: opacity .2s;

        &:hover {
            opacity: .7;
        }

        &:focus-visible {
            outline: 3px solid #b87922;
            outline-offset: 5px;
        }
    }

    img {
        max-width: 100%;
        height: auto;
    }

    h1, h2, h3 {
        font-weight: 600;
    }

    .container {
        width: 83%;
        max-width: 1200px;
        margin-inline: auto;
    }

    .eyebrow {
        font-family: Georgia, serif;
        font-size: 13px;
        line-height: 1.5;
        letter-spacing: .08em;
        margin-bottom: 10px;

        span {
            font-size: 17px;
            margin-right: 18px;
        }
    }

    /* メインビジュアル（左五右衛門についてのページと同じ寸法。共通ヘッダーの高さ分だけ上に余白を足す） */
    .hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: calc(clamp(480px, 36vw, 640px) + var(--header-height));
        padding-top: var(--header-height);
        display: flex;
        align-items: center;
        /* 背景は青い和紙柄、写真は右側に重ねる分割構成 */
        background: #063460 url("../images/page/blue-paper.jpg") center / 700px auto;
        color: white;

        .hero-photo {
            position: absolute;
            z-index: -1;
            /* 高さはセクションに合わせ、画像の左端を基準に右側をはみ出させる */
            inset: 0 0 0 38%;
            background: url("../images/page/service-main.png") left bottom / cover no-repeat;
        }

        .container {
            width: min(calc(100% - 160px), 1200px);
        }

        /* 左下支点の波（写真の上・テキストの下に重ねる） */
        &::after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: 0;
            width: 75%;
            aspect-ratio: 2182 / 721;
            background: url("../images/services-bottom.png") left bottom / contain no-repeat;
            pointer-events: none;
        }

        .hero-content {
            margin-inline: max(8%, 40px) auto;
            padding-block: 52px 110px;
        }

        .eyebrow {
            font-size: 13px;
            letter-spacing: .24em;
            margin-bottom: 6px;
        }

        h1 {
            font-size: clamp(32px, 3.3vw, 48px);
            line-height: 1.65;
            letter-spacing: .14em;
        }
    }

    .page-navigation {
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 16px;
            padding-block: 14px;
            font-size: 11px;
        }

        .section-links {
            display: flex;
            justify-content: flex-start;
            gap: 40px;

            a {
                display: flex;
                align-items: center;
                gap: 26px;
                min-height: 44px;
                font-size: 14px;
            }
        }
    }

    /* 導入 */
    .intro {
        padding-block: 160px 220px;

        .intro-layout {
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: 90px;
            align-items: center;
        }

        h2 {
            font-size: 46px;
            line-height: 1.4;
            letter-spacing: .12em;
        }

        .intro-copy {
            border-left: 1px solid #7895b0;
            padding-left: 55px;
            font-size: 16px;
            line-height: 2;
            letter-spacing: .04em;
        }
    }

    .business-layout {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 60px;
        align-items: start;
    }

    .business-photo {
        img {
            width: 100%;
            aspect-ratio: 429 / 285;
            object-fit: cover;
        }
    }

    .business-copy {
        .section-heading {
            margin-bottom: 32px;

            h2 {
                font-size: 38px;
                line-height: 1.4;
                letter-spacing: .09em;
            }
        }

        h3 {
            font-size: 34px;
            line-height: 1.6;
            letter-spacing: .05em;
            margin-bottom: 28px;
        }

        > p {
            font-size: 16px;
            line-height: 2;
            letter-spacing: .035em;
        }
    }

    /* 仕入・卸売事業 */
    .wholesale {
        position: relative;
        isolation: isolate;
        padding-block: 20px 220px;
        overflow: hidden;

        .strengths {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            list-style: none;
            margin: 46px 0 0;
            padding: 0;

            li {
                padding: 0 35px;

                & + li {
                    border-left: 1px solid #7895b0;
                }

                .number {
                    font: 22px Georgia, serif;
                    display: block;
                    margin-bottom: 6px;
                }

                h3 {
                    font-size: 23px;
                    letter-spacing: .06em;
                    margin-bottom: 8px;
                }

                p {
                    font-size: 13px;
                    letter-spacing: .03em;
                }
            }
        }

        .consultation {
            display: flex;
            justify-content: flex-end;
            margin-top: 38px;

            a {
                border-bottom: 1px solid #8aa0b5;
                font-size: 14px;
                min-height: 44px;
                display: flex;
                align-items: center;
                gap: 24px;
            }
        }

        .corner-wave {
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: 0;
            width: 46%;
            aspect-ratio: 864 / 419;
            background: url("../images/page/message-seigaiha.png") left bottom / contain no-repeat;
            pointer-events: none;
        }
    }

    /* 小売事業 */
    .retail {
        position: relative;
        isolation: isolate;
        color: white;
        background: #063460 url("../images/page/blue-paper.jpg") center / 700px auto;
        /* 下部の波（画像比率 2160:279 で全幅表示）に本文が重ならない余白を確保 */
        padding-block: 200px calc(100vw * 279 / 2160 + 90px);
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            width: 44%;
            aspect-ratio: 648 / 296;
            background: url("../images/page/retail-pattern.png") right top / contain no-repeat;
        }

        .business-layout {
            grid-template-columns: 1fr 1.15fr;
            gap: 60px;
            align-items: center;
        }

        .business-photo {
            padding-top: 55px;
        }

        .retail-values {
            display: flex;
            list-style: none;
            margin: 28px 0 0;
            padding: 0;
            gap: 15px;
            font-size: 12px;

            li + li {
                border-left: 1px solid #aac0d0;
                padding-left: 15px;
            }
        }

        .ocean-wave {
            position: absolute;
            z-index: -1;
            left: 0;
            bottom: 0;
            width: 100%;
            aspect-ratio: 2160 / 279;
            background: url("../images/page/philosophy-wave.png") center bottom / 100% auto no-repeat;
            pointer-events: none;
        }
    }
}

@media (max-width:1024px) {
    .p-service {
        .container {
            width: calc(100% - 80px);
        }

        .hero {
            min-height: calc(310px + var(--header-height));

            .hero-photo {
                left: 32%;
            }

            .container {
                width: calc(100% - 80px);
            }

            h1 {
                font-size: 36px;
            }
        }

        .intro {
            padding-block: 120px 164px;

            .intro-layout {
                gap: 30px;
            }

            h2 {
                font-size: 34px;
            }

            .intro-copy {
                padding-left: 30px;
                font-size: 14px;
            }
        }

        .business-layout {
            gap: 32px;
            grid-template-columns: 1fr 1fr;
        }

        .business-copy {
            .section-heading {
                margin-bottom: 22px;

                h2 {
                    font-size: 29px;
                }
            }

            h3 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            > p {
                font-size: 14px;
            }
        }

        .business-photo img {
            aspect-ratio: 4 / 5;
        }

        .wholesale {
            padding-bottom: 180px;

            .strengths li {
                padding-inline: 18px;

                h3 {
                    font-size: 19px;
                }
            }
        }

        .retail {
            padding-block: 150px 230px;

            .business-layout {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }

            .retail-values {
                display: block;

                li {
                    padding-block: 4px;
                }

                li + li {
                    border: 0;
                    padding-left: 0;
                }
            }

            .business-photo {
                padding-top: 0;
            }

            /* 比率を保ったまま高さを出し、左下基準で右側をはみ出させる */
            .ocean-wave {
                aspect-ratio: auto;
                height: 160px;
                background-size: auto 100%;
                background-position: left bottom;
            }

        }
    }
}

@media (max-width:767px) {
    .p-service {
        .container {
            width: calc(100% - 48px);
        }

        .eyebrow {
            font-size: 11px;
        }

        .hero {
            min-height: calc(260px + var(--header-height));
            align-items: flex-start;

            .hero-photo {
                inset: 0 0 auto;
                height: calc(260px + var(--header-height));
            }

            .container {
                width: 100%;
            }

            /* 写真エリアの下端に揃える */
            &::after {
                bottom: auto;
                top: calc(260px + var(--header-height));
                width: 80%;
                transform: translateY(-100%);
            }

            .hero-content {
                margin-inline: 0;
                padding-block: 24px 0;

                > .eyebrow,
                > h1 {
                    margin-inline: 24px;
                }
            }

            .eyebrow {
                font-size: 11px;
                margin-bottom: 4px;
            }

            h1 {
                font-size: 30px;
                line-height: 1.5;
                letter-spacing: .09em;
            }
        }

        /* 見出しが1行のため、about（2行見出し＋102px）と同じ位置に揃うよう 1行分(45px) を加算 */
        .page-navigation {
            background: var(--paper) url("../images/page/paper.jpg");
            color: var(--navy);
            padding-inline: 24px;
            margin-top: 147px;

            .breadcrumb {
                padding-block: 17px 10px;
                gap: 12px;
                font-size: 10px;
            }

            .section-links {
                justify-content: flex-start;
                gap: 40px;

                a {
                    font-size: 11px;
                    gap: 9px;
                    white-space: nowrap;
                }
            }
        }

        .intro {
            padding-block: 88px 120px;

            .intro-layout {
                display: block;
            }

            h2 {
                font-size: 32px;
            }

            .intro-copy {
                border-left: 0;
                padding: 0;
                margin-top: 22px;
                font-size: 15px;
            }

            .desktop-break {
                display: none;
            }
        }

        .business-layout {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .business-photo {
            width: 100%;

            img {
                aspect-ratio: 429 / 285;
            }
        }

        .business-copy {
            .section-heading {
                margin-bottom: 22px;

                h2 {
                    font-size: 28px;
                }
            }

            h3 {
                font-size: 25px;
                line-height: 1.7;
                margin-bottom: 20px;
                letter-spacing: .01em;
            }

            > p {
                font-size: 15px;
                line-height: 2;
            }
        }

        .wholesale {
            padding-block: 0 150px;

            .strengths {
                display: block;
                margin-top: 30px;

                li {
                    padding: 20px 0;

                    & + li {
                        border-left: 0;
                        border-top: 1px solid #9fb2c2;
                    }

                    h3 {
                        font-size: 21px;
                    }

                    p {
                        font-size: 14px;
                    }
                }
            }

            .corner-wave {
                width: 78%;
                opacity: .7;
            }

            .consultation {
                margin-top: 12px;
            }
        }

        .retail {
            padding-block: 130px 170px;

            &::before {
                width: 72%;
                opacity: .55;
            }

            .business-layout {
                display: flex;
                gap: 28px;
            }

            .ocean-wave {
                height: 110px;
            }

            .retail-values {
                margin-top: 24px;

                li {
                    font-size: 14px;
                    padding-block: 7px;
                }
            }

        }
    }
}