@charset "UTF-8";
/* ----------------------------------------------------------------mainimage*/
#mainimage {
    background: url(../img/index_img/bg_mi_sp.jpg) no-repeat top center;
    background-size: cover;
}
#mainimage .container {
    height: 350px;
    position: relative;
}
#mainimage {
    text-align: center;
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 1.6em;
        z-index: 2;

        &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            background: url(../img/index_img/kumo.png) center center no-repeat;
            background-size: cover;
            width: min(120%, 1400px);
            height: auto;
            aspect-ratio: 1468/286;
            inset: 55% auto auto 50%;
            transform: translate(-50%, -50%);
        }
    }
    .header_logo {
        & > img {
            width: clamp(160px, 400vw/13.66, 400px);
            height: auto;
        }
    }
    .mi_copy2 {
        & > img {
            width: clamp(280px, 640vw/13.66, 640px);
            height: auto;
        }
    }
    .mi_copy3 {
        margin-top: clamp(16px, 32vw/13.66, 32px);
        & > img {
            width: clamp(280px, 720vw/13.66, 720px);
            height: auto;
        }
    }
}

@media print, screen and (min-width: 480px) {
    #mainimage .container {
        height:720px;
    }
}
@media print, screen and (min-width: 768px) {
    #mainimage {
        background: url(../img/index_img/bg_mi_pc.jpg) no-repeat top center;
        background-size: cover;
    }
}
@media print, screen and (min-width: 1366px) {
    #mainimage .container {
        height: calc(100vh - 46px);
        padding-bottom: 36px;
    }
}

/* ----------------------------------------------------------------about*/
#about {
    background: url(../img/index_img/bg_about1_sp.png) no-repeat top left, url(../img/index_img/bg_about2_sp.png) no-repeat bottom right;
    background-size: clamp(400px, 600vw/7.68, 600px) auto;
    /* height: 560px; */
    text-align: center;
    .container {
        padding: 80px 0;
    }

    .cts_p {
        color: #282208;
        font-weight: 700;
        font-size: clamp(1.6rem, 24vw/13.66, 2.4rem);
        line-height: 1.8;
        text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
    }

    @media (width >= 1200px) {
        background: url(../img/index_img/bg_about_pc.png) center center no-repeat;
        background-size: cover;
        .container {
            padding: 100px 0 80px;
        }
    }
}
.about_tx1 {
    margin-bottom: 2em;
    & > img {
        width: clamp(180px, 360vw/13.66, 360px);
        height: auto;
    }
}

/* ----------------------------------------------------------------quality*/
#sekisoukyo {
    background: url(../img/index_img/bg_quality.jpg) center center no-repeat;
    background-size: cover;
}

.sekisoukyo_explanation {
    display: flex;
    flex-direction: column;
    background: url(../img/index_img/sekisoukyo_bg_sp.png) top center no-repeat;
    background-size: 100% auto;

    @media (width >= 992px) {
        background: url(../img/index_img/sekisoukyo_bg_pc.png) top left no-repeat;
        background-size:auto 100%;
        flex-direction: row;
        .sekisoukyo_img_box {
            width: 40%;
        }
        .sekisoukyo_tx_box {
            width: 60%;
        }
    }
}
/*img -------*/
.sekisoukyo_img_box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0 20px;

    & > img {
        width: min(60%, 320px);
        height: auto;
    }
    @media (width >= 1200px) {
        padding-left:clamp(16px, 100vw/13.66, 100px)  ;
        & > img {
            width:clamp(320px,458vw/13.66,458px);
        }
    }
}
/*tx -------*/
.sekisoukyo_tx_box {
    padding: clamp(24px, 60vw/13.66, 60px) clamp(16px, 100vw/13.66, 100px);
    background: url(../img/index_img/kumo02.png) right bottom no-repeat;
    background-size: min(60%,700px) auto;

    .cts_p{
        line-height: 1.6;
        font-size: clamp(1.6rem,18vw/12,1.8rem);
        &+.cts_p{
            margin-top: 1em;
        }
    }

    @media (width >= 992px) {
        padding: clamp(24px, 60vw/13.66, 60px) clamp(16px, 100vw/13.66, 100px)  clamp(24px, 60vw/13.66, 60px) clamp(16px, 60vw/13.66, 60px);
    }
}
.sekisoukyo_list{
    margin-bottom: 2em;
    &>li{
        font-size: clamp(1.8rem, 24vw/13.66, 2.4rem);
        font-weight: 700;
        color: #282208;
        text-align: center;
        text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
        &+li{
            margin-top: 1em;
        }
    }
    @media (width >= 1200px) {
        &>li{
            text-align: left;
        }
    }
}

/* ----------------------------------------------------------------bn*/
#bn {
    padding: clamp(30px, 48vw/13.66, 48px) 0;
    background: url(../img/index_img/bg_bn.jpg) no-repeat center;
    background-size: cover;
    .tel_bn {
        width: min(100%, 810px);
        margin: 0 auto;

        & > a {
            transition: 0.2s;
            &:hover {
                opacity: 0.8;
            }
        }

        @media (width >= 768px) {
            & > a {
                pointer-events: none;
            }
        }
    }
}