@charset "utf-8";

.pg-sub {
    .address {
        font-size: 15px; line-height: 28px;
        > span{white-space: nowrap; margin-right: 24px;}
        .label{display: inline-block; width: 20px; font-weight: bold; color: #bbb;}
    }
}
/* ==========================================================================
   Brand
   ========================================================================== */
.brand-container {
    .txt-set {
        .txt01 {font-size: 22px; font-weight: bold; margin-bottom: 8px;}
        p{font-size: 17px; line-height: 26px;}
        p:not(:last-child){margin-bottom: 26px;}
    }
    .value-list {
        > ul{display: flex; gap: var(--main-gap);}
        .value-box {
            position: relative; flex: 1; overflow: hidden;
            border: 1px solid var(--basic-color); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.24);
            text-align: center; padding: 14px 20px 64px; background-color: #fff;
            .txt-en{font-size: 12px; font-weight: bold; color: #bbb; text-transform: uppercase; margin-bottom: 41px;}
            .box-title{font-size: 28px; font-weight: bold;}
            .scroll-bounce{margin: 12px 0 9px;}
            .scroll-bounce .stick .bar{animation: none; bottom: 0; height: 10px;}
            .txt01{font-size: 18px; font-weight: bold; line-height: 26px;}
            &::before{content: ""; display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transition: .3s ease-out;}
            p{font-size: 15px; color: #777; line-height: 24px; margin-top: 7px;}
            &:hover {
                .txt-en{color: #666;}
                .box-title,
                .txt01{color: #fff;}
                .scroll-bounce .stick{background-color: rgba(234,233,233,.2)}
                .scroll-bounce .stick .bar{background-color: #fff;}
                p{color: #bbb;}
                &::before{scale: 1.2;}
                &:nth-child(1)::before{background: url('/assets/site/img/contents/tex-overlay0101.jpg') no-repeat center / cover;}
                &:nth-child(2)::before{background: url('/assets/site/img/contents/tex-overlay0102.jpg') no-repeat center / cover;}
                &:nth-child(3)::before{background: url('/assets/site/img/contents/tex-overlay0103.jpg') no-repeat center / cover;}
                &:nth-child(4)::before{background: url('/assets/site/img/contents/tex-overlay0104.jpg') no-repeat center / cover;}
                &:nth-child(5)::before{background: url('/assets/site/img/contents/tex-overlay0105.jpg') no-repeat center / cover;}
            }
        }
    }
    .split-grid.dv01{grid-template-columns: 40.425% 1fr;}
    .tit-sec{font-weight: 800; line-height: 1}
    .tit-sec .num{font-size: 14px;}
    .tit-sec .title{font-size: 24px; margin-top: 15px;}
    .history {
        .history-item{display: flex; gap: 28px;}
        .history-item:not(:last-child){margin-bottom: 31px;}
        .year{width: 70px; font-size: 28px; font-weight: bold; line-height: 1;}
        .stick{position: relative; top: 12px; width: 52px; height: 1px; background-color: var(--border-color01);}
        .stick::after{content: ""; position: absolute; right: 0; display: block; width: 10px; height: 100%; background-color: var(--basic-color);}
        .history-cont p{font-size: 18px; line-height: 26px;}
        .history-cont .refer{font-size: 16px; color: #666; line-height: 32px;}
    }
    .brand-about {
        margin-top: -77px;
        .left-area {display: flex; flex-direction: column; justify-content: flex-end; padding-right: 100px;}
        .txt-set{margin-top: 31px;}
    }
    .brand-value {
        padding: 192px 0 200px;
        .tit-sec{padding-top: 7px;}
        .value-list{margin-top: 57px;}
    }
    .brand-distribution {
        .left-area {padding-right: 100px;}
        .txt-set{margin-top: 31px;}
    }
    .brand-history {padding: 200px 0 60px;}
    @media (width <= 1420px) {
        .brand-about {margin-top: 0;}
        .value-list .value-box {
            padding: 14px 20px 14px;
            .txt-en{margin-bottom: 20px;}
            .scroll-bounce{margin: 8px 0 5px;}
            .scroll-bounce.short .stick{height: 30px;}
            .box-title{font-size: 24px;}
            .txt01{font-size: 17px;}
        }
    }
    @media (width <= 1280px) {
        .brand-about .left-area,
        .brand-distribution .left-area{padding-right: 40px;}
        .txt-set p{font-size: 16px; line-height: 25px;}
        .history .stick{width: 40px;}
        .history .history-cont p{font-size: 17px; line-height: 25px;}
        .brand-value{padding: 140px 0}
        .brand-history {padding: 140px 0 80px;}
    }
    @media (width <= 1200px) {
        .txt-set .txt01{font-size: 20px; margin-bottom: 6px;}
        .value-list {
            > ul{flex-wrap: wrap; justify-content: center}
            .value-box {flex: 0 1 240px; padding: 26px 18px;}
        }
        .history .history-item{gap: 24px;}
        .history .year{font-size: 26px;}
        .history .history-cont p{font-size: 16px;}
        .brand-about {
            padding-top: 20px;
            .left-area{justify-content: flex-start;}
            .right-area{align-self: flex-end;}
        }
        .brand-value{padding: 100px 0}
        .brand-history {padding: 100px 0 60px;}

    }
    @media (width <= 1024px) {
        .split-grid,
        .split-grid.dv01{grid-template-columns: 1fr;}
        .split-grid.dv01{gap: 30px;}
        .brand-about .left-area,
        .brand-distribution .left-area{padding-right: 0;}
        .brand-about {
            padding-top: 0;
            .left-area{order: 2; margin-top: 30px;}
            .right-area{order: 1;}
        }
        .brand-distribution .left-area{margin-bottom: 30px;}
        .brand-value{padding: 80px 0}
        .brand-history {padding: 80px 0 60px;}

    }
    @media (width <= 860px) {
        .txt-set .txt01{font-size: 19px;}
        .value-list .value-box {flex: 1 0 240px;}
        .brand-about .txt-set{margin-top: 25px;}
        .brand-value {
            padding: 60px 0;
            .split-grid.dv01{gap: 20px;}
            .value-list{margin-top: 40px;}
        }
        .brand-history {padding: 60px 0;}
    }
    @media (width <= 640px) {
        .tit-sec .title{font-size: 22px; margin-top: 10px;}
        .txt-set .txt01{font-size: 18px;}
        .txt-set p{font-size: 15px; line-height: 24px;}
        .txt-set p:not(:last-child){margin-bottom: 24px;}
        .brand-about .txt-set{margin-top: 20px;}
        .history {
            margin-top: 20px;
            .history-item{flex-direction: column; gap: 10px;}
            .year{width: auto; font-size: 24px;}
            .stick{display: none}
            .history-cont p{font-size: 15px;}
            .history-cont .refer{font-size: 14px;}
        }
        .brand-value .value-list{margin-top: 30px;}
        .brand-distribution .txt-set{margin-top: 24px;}
    }
}

/* ==========================================================================
   Visit us
   ========================================================================== */
.visit-container {
    .img-area {
        .image{position: relative; width: 100%; aspect-ratio: 960 / 590;}
        .image iframe{width: 100%; height: 100%; filter: grayscale(90%);}
        .image iframe .gm-style .place-card div{display: none}
    }
    .txt-area {display: flex; padding: 54px 60px;}
    .txt-set{
        .big-text {font-size: 54px; font-weight: bold; color: #ddd; line-height: 1;}
        p{font-size: 17px; line-height: 26px; margin-top: 18px;}
        .address {margin-top: 15px; }
        .address > span{white-space: wrap;}

    }
    .visit-about .txt-area{align-items: flex-end;}
    .visit-contact .txt-area{align-items: flex-start;}
    @media (width <= 1280px) {
        .txt-area {padding: 34px 40px;}
        .txt-set .big-text{font-size: 48px;}
    }
    @media (width <= 1200px) {
        .img-area .image{aspect-ratio: auto; height: 340px;}
        .txt-set{
            .big-text {font-size: 47px;}
            p{font-size: 16px; line-height: 25px; margin-top: 16px;}
            .address {margin-top: 13px;}
        }
    }
    @media (width <= 1024px) {
        .txt-area {padding: 24px 30px;}
        .txt-set {
            .big-text {font-size: 42px;}
            p{font-size: 15px; line-height: 24px; margin-top: 14px;}
            .address {margin-top: 11px;}
            .address > span:first-child .label{display: none;}
        }
    }
    @media (width <= 860px) {
        .split-grid{grid-template-columns: 1fr;}
        .img-area  .image{height: auto; aspect-ratio: 960 / 590;}
        .txt-area {padding: 40px var(--main-gap);}
        .visit-contact .txt-area{order: 2}
        .txt-set .big-text {font-size: 36px;}
    }
    @media (width <= 640px) {
        .txt-area {padding: 32px var(--main-gap);}
        .txt-set {
            .big-text {font-size: 32px;}
            p{margin-top: 10px;}
            .address{margin-top: 7px;}
        }
    }
}
/* ==========================================================================
   Contact
   ========================================================================== */
.request {
    position: relative; padding-top: 27px;
    fieldset{padding: 0}
    &::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #e8e8e8;}
    .dot::after{content: ""; position: absolute; top: 10px; right: 10px; display: block; width: 7px; height: 7px; background-color: var(--form-dot); border-radius: 50%; vertical-align: text-top; margin-left: 6px;}
    .form-ip{border-color: #f7f6f6; background-color: #f7f6f6;}
    .wrap-form{position: relative; display: flex; flex-direction: column; gap: var(--input-gap);}
    .wrap-form > li{display: flex; flex-wrap: wrap; gap: var(--input-gap);}
    .wrap-form .form-item{position: relative}
    .wrap-form .form-item.inactive .form-ip{border-color: #e8e8e8; background-color: #e8e8e8}
    .wrap-form .form-item{position: relative; flex: 1;}
    .wrap-form .form-item.col-small{flex: 0 1 calc(25% - 11px)}
    .form-chk01 .btn-term .dot::after{top: -3px; right: -15px}
    .refer1{font-size: 13px; color: #999; margin-top: 12px; }
    .terms{display: flex; justify-content: space-between; align-items: center; margin-top: 20px}
    .separate{width: 100%; height: 1px; background-color: #dedede;}
    .sep01{margin: 27px 0 12px;}
    .sep02{margin: 20px 0 0;}
    .btn-container{display: flex; padding-top: 20px; border-top: 1px solid #dedede; margin-top: 20px;}
    .btn-container button{height: calc(var(--input-height) + 10px);}
    @media (width <= 640px) {
        padding-top: 20px;
        .wrap-form .form-item{flex: 1 1 100%;}
        .wrap-form .form-item.col-small{flex: 1}
        .sep01{margin: 12px 0 15px}
        .attachment > label span{font-size: 14px}
        .refer1{font-size: 12px;}
        .terms{margin-top: 22px;}
        .terms .form-chk01{width: 100%}
        .btn-container button{font-size: 16px;}
    }
}

.contact-container {
    padding-top: 114px;
    padding-bottom: 40px;
    .split-flex{justify-content: space-between; gap: 60px;}
    .tit-area {
        flex: 0 1 430px;
        .page-title{padding: 0;}
        .address{margin-top: 20px;}
    }
    .contact-area {flex: 0 1 854px;}
    @media (width <= 1420px) {
        .tit-area {flex: 0 1 430px;}
        .contact-area {flex: 1;}
    }
    @media (width <= 1280px) {
        .split-flex{gap: 40px;}
    }
    @media (width <= 1200px) {
        .split-flex{flex-direction: column;}
        .tit-area {flex: 1;}
    }
    @media (width <= 860px) {
        padding-top: 80px;
    }
    @media (width <= 640px) {
        .split-flex{gap: 20px;}
        .tit-area .address > span{white-space: wrap;}
        .tit-area .address > span:first-child .label{display: none;}
    }
}