@charset "utf-8";

/* -----------------------------------------------------------
    intro-area
-------------------------------------------------------------- */
.intro-area {
    padding: 0 0 100px;
}

.intro-area .inner {
    display: flex;
    gap: 100px;
    align-items: center;
}

.intro-area .figure-wrap {
    width: 500px;
}

.intro-area .txt-wrap {
    width: calc( 100% - 600px );
}

.intro-area .txt-wrap .sec-catch {
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.7;
    margin: 0 0 30px;
}

.intro-area .txt-wrap .sec-catch .txt-bg {
    background: var(--orange);
    padding: 2px 10px 7px;
    color: #fff;
    margin-right: 5px;
}

@media screen and (max-width: 768px) {
    .intro-area {
        padding: 40px 0;
    }
    
    .intro-area .inner {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }
    
    .intro-area .figure-wrap {
        width: 80%;
    }
    
    .intro-area .txt-wrap {
        width: 100%;
    }
    
    .intro-area .txt-wrap .sec-catch {
        font-size: 2.7rem;
        margin: 0 0 10px;
        line-height: 1.8;
    }
}

/* -----------------------------------------------------------
    bg-block
-------------------------------------------------------------- */
.bg-block {
    background: url("../img/planning-bg.webp") center/cover,no-repeat;
    width: 100%;
    height: 36vw;
    min-height: 500px;
    border-radius: 10vw 0 0 0;
    position: relative;
    z-index: -1;
}

.bg-block::after {
    content: "HOKUTO";
    font-family: var(--en);
    font-size: 18.0rem;
    font-weight: bold;
    color: #fff;
    line-height: 0.7;
    display: block;
    position: absolute;
    bottom: 10vw;
    right: 5%;
    letter-spacing: 1rem;
}

@media screen and (max-width: 768px) {
    .bg-block {
        height: 60vw;
        min-height: initial;
        border-radius: 6vw 0 0 0;
    }
    
    .bg-block::after {
        font-size: 7.0rem;
        bottom: 10vw;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        letter-spacing: .5rem;
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------
    feature-area
-------------------------------------------------------------- */
.feature-area {
    padding: 120px 0;
    background: #F8F6F2;
    border-radius: 0 10vw 0 0;
    margin-top: -10vw;
    position: relative;
    z-index: 1;
}

.feature-area::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/deco-color-chart.webp") center/cover, no-repeat;
    aspect-ratio: 1/1;
    width: 141px;
    height: initial;
}

.feature-area::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 10%;
    left: -7%;
    background: url("../img/deco-circle-grad01.webp") center/cover, no-repeat;
    aspect-ratio: 1/1;
    width: 750px;
    height: initial;
    z-index: -1;
}

.feature-area .inner {
    width: 80%;
    min-width: 1200px;
}

.feature-area .ttl-l {
    /*width: 1200px;*/
    margin: 0 auto 0 calc( ( 100% - 1200px ) / 2 );
    display: inline-block;
}

.feature-area .feature-block-wrap {
    margin: 80px 0 0;
}

.feature-area .feature-block {
    display: flex;
}

.feature-area .feature-block + .feature-block {
    margin: 80px 0 0;
}

.feature-area .feature-block .img-box {
    border-radius: 60px 30px 30px 0;
    overflow: hidden;
    /*width: 700px;*/
    width: 47%;
    position: relative;
    z-index: 1;
    min-height: 540px;
}

.feature-area .feature-block .img-box img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.feature-area .feature-block .txt-box {
    /*width: 800px;*/
    width: 53%;
    /*padding: 200px 200px 100px 0;*/
    padding: max(3vw,60px) max(5vw,60px) max(3vw,60px) 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
}

.feature-area .feature-block .txt-box .feature-num {
    font-size: 2.1rem;
    font-weight: bold;
    color: var(--orange);
    margin: 0 0 10px;
    display: block;
    font-family: var(--en);
    width: 100%;
}

.feature-area .feature-block .txt-box .feature-catch {
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 20px;
}

.feature-area .feature-block .txt-box::before {
    content: "";
    display: block;
    position: absolute;
    left: min(-5vw,-60px);
    bottom: 0;
    height: 100%;
    width: calc( 100% + max(5vw,60px));
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,.8);
    z-index: -1;
    border-radius: 30px;
}

/*PCのみ*/
@media screen and (min-width: 769px) {
    .feature-area .feature-block:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .feature-area .feature-block:nth-child(even) .txt-box {
        /*width: 800px;
        padding: 200px 0 100px 200px;
        position: relative;
        z-index: 2;*/
        padding: max(3vw,60px) 0 max(3vw,60px) max(5vw,60px);
    }
    
    .feature-area .feature-block:nth-child(even) .txt-box::before {
        left: initial;
        right: min(-5vw,-60px);
    }
    
}

@media screen and (max-width: 768px) {
    .feature-area {
        padding: 40px 0;
        border-radius: 0 6vw 0 0;
    }
    
    .feature-area::before {
        width: 80px;
    }
    
    .feature-area::after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: initial;
        left: 20vw;
        top: 100vw;
        background: url("../img/deco-circle-grad01.webp") center/cover, no-repeat;
        aspect-ratio: 1/1;
        width: 100vw;
        height: initial;
    }
    
    .feature-area .inner {
        width: 100%;
        min-width: initial;
    }
    
    .feature-area .ttl-l {
        width: 100%;
        margin: 0;
        position: relative;
        z-index: 1;
    }
    
    .feature-area .feature-block-wrap {
        margin: 40px 0 0;
    }
    
    .feature-area .feature-block {
        flex-wrap: wrap;
    }
    
    .feature-area .feature-block + .feature-block {
        margin: 30px 0 0;
    }
    
    .feature-area .feature-block .img-box {
        border-radius: 30px 10px 10px 0;
        width: 100%;
        height: 50vw;
        z-index: 3;
        min-height: initial;
    }
    
    .feature-area .feature-block .txt-box {
        width: 100%;
        padding: 40px 0;
        position: relative;
        z-index: 1;
    }
    
    .feature-area .feature-block .txt-box::before {
        left: -20px;
        top: -40px;
        bottom: initial;
        height: calc( 100% + 40px );
        width: 100vw;
        border-radius: 0;
        background: rgba(255,255,255,.6);
        z-index: -1;
    }
    
    .feature-area .feature-block .txt-box .feature-num {
        font-size: 1.6rem;
        margin: 0 0 5px;
    }
    
    .feature-area .feature-block .txt-box .feature-catch {
        font-size: 2.4rem;
        margin: 0 0 10px;
    }
}

/* -----------------------------------------------------------
    service-area
-------------------------------------------------------------- */
.service-area {
    padding: 100px 0;
}

.service-area .service-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    /*margin: 60px 0 0;*/
}

.service-area .service-list .service-item {
    background: #F8F6F2;
    border-radius: 0 20px 20px 20px;
    padding: 40px 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc( ( 100% - 60px ) / 4 );
    gap: 20px;
}

.service-area .service-list .icon-wrap {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-area .service-list .icon-wrap img {
    max-height: 75px;
    max-width: 70px;
    object-fit: cover;
}

.service-area .service-list .list-name {
    text-align: center;
    font-size: 2.0rem;
    font-weight: bold;
    margin: 0 0 15px;
}

.service-area .service-list .list-txt {
    line-height: 1.8;
}

@media screen and (max-width: 768px) {
    .service-area {
        padding: 40px 0;
    }
    
    .service-area .service-list {
        gap: 20px;
        /*margin: 30px 0 0;*/
    }
    
    .service-area .service-list .service-item {
        border-radius: 0 20px 20px 20px;
        padding: 20px;
        width: 100%;
        gap: 20px;
    }
}


/* -----------------------------------------------------------
    
-------------------------------------------------------------- */

@media screen and (max-width: 768px) {
}