@charset "utf-8";

section {
    overflow-x: hidden;
}

.fv {
    width: 100%;
    height: fit-content;
    aspect-ratio: 398 / 768;
    background: url(../../img/brand/sp/goeswell.jpg),url(../../img/brand/sp/sector.jpg);
    background-size: 100%, 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: top, bottom;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 63.38px;
    gap: 165px;
}

.content-ttl {
    width: calc(100% - 34px);
    margin: 0 auto;
}

.content-ttl .goeswell,
.content-ttl .sector {
    display: block;
    color: #FFF;
    font-size: 30px;
    width: 100%;
}

.content-ttl .goeswell {
    text-align: right;
}

.content-ttl .sector {
    text-align: left;
}

.content-ttl hgroup {
    color: #FFF;
    text-align: center;

    h2 {
        font-size: 71px;
    }

    h3 {
        font-size: 14px;
    }
}

.scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll b {
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 4.8px;
}

.scroll .arrow span {
    display: block;
    width: 13px;
    height: 13px;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    transform: rotate(45deg);
    line-height: 0;
}

.info-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.goeswell-info,
.sector-info {
    padding: 130px 17px 140px;
    position: relative;
}

.sector-info {
    background: #000000;
}

.goeswell-info::after {
    content: 'the goeswell hair';
    font-family: 'Bodoni', serif;
    color: #DBDBDB;
    position: absolute;
    z-index: 1;
    font-size: 110px;
    line-height: 1;
    top: 370px;
}

.sector-info::after {
    content: 'the sector';
    font-family: 'Bodoni', serif;
    color: #272727;
    position: absolute;
    z-index: 1;
    font-size: 120px;
    line-height: 1;
    top: 450px;
    text-align: right;
    padding-right: 17px;
}

.goeswell-info img,
.sector-info img {
    width: 100%;
    margin: 0 auto 75px;
}

.goeswell-info p,
.sector-info p {
    color: #2B2B2B;
    font-size: 14px;
    line-height: 32px;
    position: relative;
    z-index: 2;
}

.sector-info p {
    color: #FFFFFF;
}

.middle-shop-img {
    height: fit-content;
    aspect-ratio: 390 / 800;
    background: url(../../img/brand/sp/sector-left.jpg), url(../../img/brand/sp/goeswell-right.jpg);
    background-size: 50%, 50%;
    background-repeat: no-repeat, no-repeat;
    background-position: left, right;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 45px 0 0;
}

.middle-shop-img h2 {
    color: #FFF;
    font-size: 50px;
    line-height: 1.2;
}

.middle-shop-img h2:nth-of-type(1) {
    text-align: right;
    padding-right: 16px;
}

.middle-shop-img h2:nth-of-type(2) {
    text-align: left;
    padding-left: 8px;
}

.goeswell-address {
    padding: 100px 17px 150px;
    position: relative;
}

.sector-address {
    padding: 100px 17px 150px;
    background: #000000;
    position: relative;
}

.goeswell-address address,
.goeswell-address p,
.sector-address address,
.sector-address p {
    font-size: 14px;
    line-height: 32px;
    position: relative;
    z-index: 2;
}

.sector-address address,
.sector-address p {
    color: #FFF;
}

.goeswell-address address,
.sector-address address {
    margin: 0 0 50px;
}

.goeswell-address p,
.sector-address p {
    margin: 0 ;
}

.goeswell-address::after {
    content: 'the goeswell hair';
    font-family: 'Bodoni', serif;
    color: #DBDBDB;
    position: absolute;
    z-index: 1;
    font-size: 110px;
    line-height: 1;
    top: 230px;
}

.sector-address::after {
    content: 'the sector';
    font-family: 'Bodoni', serif;
    color: #272727;
    position: absolute;
    z-index: 1;
    font-size: 120px;
    line-height: 1;
    top: 210px;
    text-align: right;
    padding-right: 17px;
}

.return-top {
    background: #000000;
}

.return-top a {
    color: #FFF;
    border: 1px solid #FFF;
}

@media only screen and (min-width:992px) {
    .fv {
        width: 100%;
        height: fit-content;
        aspect-ratio: 1920 / 900;
        background: url(../../img/top/goeswell.jpg),url(../../img/top/sector.jpg);
        background-size: 50%, 50%;
        background-repeat: no-repeat, no-repeat;
        background-position: right, left;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 0;
        gap: 0;
        margin-bottom: 0;
    }

    .content-ttl {
        width: unset;
        margin: 0 0 190px;
    }

    .goeswell,
    .sector {
        display: block;
        color: #FFF;
        font-size: 75px;
        width: 50%;
    }

    .goeswell {
        text-align: left;
    }

    .sector {
        text-align: right;
    }

    .content-ttl hgroup {
        color: #FFF;
        text-align: center;

        h2 {
            font-size: 150px;
        }

        h3 {
            font-size: 18px;
        }
    }

    .scroll {
        transform: translateY(50px);
    }

    .info-flex {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .sector-info {
        background: unset;
        padding: 200px 146px 200px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 50%;
    }

    .goeswell-info {
        background: #000000;
        padding: 200px 0 0 146px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
    }

    .goeswell-info::after {
        content: 'the goeswell hair';
        font-family: 'Bodoni', serif;
        color: #272727;
        position: absolute;
        z-index: 1;
        font-size: 200px;
        line-height: 1;
        top: 330px;
        right: 260px;
        padding-left: 40px;
    }

    .sector-info::after {
        content: 'the sector';
        font-family: 'Bodoni', serif;
        color: #DBDBDB;
        position: absolute;
        z-index: 1;
        font-size: 200px;
        line-height: 1;
        top: 530px;
        text-align: right;
        left: 300px;
        padding-right: 40px;
    }

    .goeswell-info img,
    .sector-info img {
        margin: 0 0 105px;
        width: 70%;
        max-width: 536px;
        position: relative;
        z-index: 2;
    }

    .goeswell-info p,
    .sector-info p {
        width: 70%;
        max-width: 536px;
        color: #2B2B2B;
        font-size: 16px;
        line-height: 38px;
        position: relative;
        z-index: 2;
    }

    .goeswell-info  p {
        color: #FFFFFF;
    }

    .middle-shop-img {
        width: 100%;
        height: fit-content;
        aspect-ratio: 1920 / 1081;
        background: url(../../img/brand/sector.jpg), url(../../img/brand/goeswell.jpg);
        background-size: 50%, 50%;
        background-repeat: no-repeat, no-repeat;
        background-position: left, right;
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 0 0 40px;
        align-items: end;
    }

    .middle-shop-img h2 {
        color: #FFF;
        font-size: 99px;
        line-height: 1.2;
        margin: 0;
    }

    .middle-shop-img h2:nth-of-type(1) {
        text-align: right;
        padding-right: 20px;
    }

    .middle-shop-img h2:nth-of-type(2) {
        text-align: left;
        padding-left: 20px;
    }

    .goeswell-address {
        padding: 200px 0 0 146px;
        background: #000000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 50%;
        position: relative;
    }

    .sector-address {
        padding: 200px 146px 0 0;
        background: unset;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 50%;
        position: relative;
    }

    .goeswell-address address,
    .goeswell-address p,
    .sector-address address,
    .sector-address p {
        width: 70%;
        max-width: 536px;
        font-size: 16px;
        line-height: 38px;
        color: #2B2B2B;
        position: relative;
        z-index: 2;
    }

    .goeswell-address address,
    .goeswell-address p {
        color: #FFF;
    }

    .goeswell-address address,
    .sector-address address {
        margin: 0 0 40px;
    }

    .goeswell-address p,
    .sector-address p {
        margin: 0 ;
    }

    .goeswell-address::after {
        content: 'the goeswell hair';
        font-family: 'Bodoni', serif;
        color: #272727;
        position: absolute;
        z-index: 1;
        font-size: 200px;
        line-height: 1;
        top: 230px;
        right: 260px;
        padding-left: 40px;
    }

    .sector-address::after {
        content: 'the sector';
        font-family: 'Bodoni', serif;
        color: #DBDBDB;
        position: absolute;
        z-index: 1;
        font-size: 200px;
        line-height: 1;
        top: 430px;
        text-align: right;
        left: 300px;
        padding-right: 40px;
    }
}

@media only screen and (max-width:991px) {
    @media only screen and (min-height:932px) {
        .fv {
            gap: 200px;
        }
    }

    @media only screen and (min-height:1000px) {
        .fv {
            gap: 280px;
        }

        .goeswell-info::after {
            content: 'the goeswell hair';
            font-family: 'Bodoni', serif;
            color: #DBDBDB;
            position: absolute;
            z-index: 1;
            font-size: 110px;
            line-height: 1;
            top: 400px;
        }

        .sector-info::after {
            content: 'the sector';
            font-family: 'Bodoni', serif;
            color: #272727;
            position: absolute;
            z-index: 1;
            font-size: 130px;
            line-height: 1;
            top: 450px;
            text-align: right;
            padding-right: 17px;
        }

        .goeswell-address::after {
            content: 'the goeswell hair';
            font-family: 'Bodoni', serif;
            color: #DBDBDB;
            position: absolute;
            z-index: 1;
            font-size: 110px;
            line-height: 1;
            top: 220px;
        }

        .sector-address::after {
            content: 'the sector';
            font-family: 'Bodoni', serif;
            color: #272727;
            position: absolute;
            z-index: 1;
            font-size: 130px;
            line-height: 1;
            top: 150px;
            text-align: right;
            padding-right: 40px;
        }
    }
}