@charset "utf-8";

/* -----------------------------------------------------------
TOPページ
-------------------------------------------------------------- */

/* -------------------------------------------------------------
    h1-area
-------------------------------------------------------------- */

#top .top-section-ttl .en {
    font-size: 6.0rem;
}

#top .top-section-ttl .ja {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 10px 0 0;
    /*color: var(--orange);*/
}

@media screen and (max-width: 768px) {
    #top .top-section-ttl .en {
        font-size: 4.0rem;
    }

    #top .top-section-ttl .ja {
        font-size: 1.6rem;
        margin: 0;
    }
}

/* -------------------------------------------------------------
    h1-area
-------------------------------------------------------------- */
.h1-area {
    left: initial;
    top: 840px;
    right: 20px;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .h1-area {
        top: 440px;
        right: 20px;
        color: #fff;
        background: transparent;
        padding: 0;
        width: calc(100% - 40px);
    }
}

/* -------------------------------------------------------------
    mv-area
-------------------------------------------------------------- */
.mv-area {
    margin-top: 120px;
    height: 1100px;
    position: relative;
}

.mv-area::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 750px;
    background: url("../img/bg-paper.webp") center/cover, #756141;
    z-index: -2;
}

.mv-area .mv-bg-wrapper {
    position: absolute;
    width: 80%;
    height: 700px;
    top: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: 50px 0 0 50px;
}

.mv-area .mv-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50px 0 0 50px;
    /* opacity: 0;
    will-change: opacity, transform;
    animation-name: mv-fade-zoom;
    animation-duration: 15s;
    animation-iteration-count: infinite; */
}

.mv-area .mv-bg1 {
    background-image: url("../img/top-mv-bg.webp");
    /* animation: mv-fade-zoom 15s ease-in-out 0s infinite; */
}

.mv-area .mv-bg2 {
    background-image: url("../img/top-mv-bg2.webp");
    animation-delay: 5s;
}

.mv-area .mv-bg3 {
    background-image: url("../img/top-mv-bg3.webp");
    animation-delay: 10s;
}

@keyframes mv-fade-zoom {
    0% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    33.33% {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale(1.1);

    }

    100% {
        opacity: 0;
    }
}

.mv-area .bg-circle {
    position: absolute;
    z-index: -2;
    width: 35%;
    top: 0;
    height: initial;
    aspect-ratio: 813/659;
    background: url("../img/deco-logo-shape.webp") center/cover;
    background-blend-mode: screen;
}

.mv-area .circle01 {
    top: 120px;
    left: 0;
}

/*.mv-area .circle01::before {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: initial;
    background: url("../img/deco-logo.svg") center/cover;
    aspect-ratio: 132/150;
    z-index: 1;
    opacity: .1;
}*/

/*.mv-area .circle01::after {
    content: "";
    background: url("../img/bg-paper.webp") center/cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}*/

/*.mv-area .circle02 {
    bottom: -120px;
    right: -15%;
}*/

.mv-area .mv-txt-wrap {
    position: absolute;
    top: 42%;
    left: 5%;
    color: #fff;
}

.mv-area .mv-txt-wrap .mv-sub-catch {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.6;
    font-feature-settings: "palt";
    text-shadow: 0 0 10px #5a4729;
    letter-spacing: .2rem;
    margin: 0 0 10px;
}

.mv-area .mv-txt-wrap .mv-sub-catch .large {
    font-size: 150%;
}

.mv-area .mv-txt-wrap .mv-catch {
    font-size: 5.8rem;
    font-weight: bold;
    line-height: 1.4;
    font-feature-settings: "palt";
    text-shadow: 0 0 10px #5a4729;
    letter-spacing: .6rem;
}

.mv-area .mv-txt-wrap .mv-txt {
    margin: 40px 0 0;
    line-height: 1.8;
}

.mv-area .mv-txt-wrap .mv-catch .large {
    font-size: 140%;
}

@media screen and (max-width: 768px) {
    .mv-area {
        margin-top: 60px;
        height: 540px;
    }

    .mv-area::before {
        height: 430px;
        /*border-radius: 20px 0 0 20px;*/
    }

    .mv-area .mv-bg-wrapper {
        width: 86%;
        height: 370px;
    }

    .mv-area .mv-bg {
        border-radius: 40px 0 0 40px;
    }

    .mv-area .mv-bg1 {
        background: url("../img/top-mv-bg-sp.webp") left/cover no-repeat;
    }

    .mv-area .mv-bg2 {
        background-image: url("../img/top-mv-bg2-sp.webp");
    }

    .mv-area .mv-bg3 {
        background-image: url("../img/top-mv-bg3-sp.webp");
    }

    .mv-area .bg-circle {
        width: 96vw;
        min-width: initial;
    }

    .mv-area .circle01 {
        top: 58vw;
        left: -10vw;
    }

    /*.mv-area .circle01::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -32vw;
        right: initial;
        left: 5vw;
        width: 90vw;
        top: initial;
        min-width: initial;
    }*/

    .mv-area .circle02 {
        display: none;
    }

    .mv-area .mv-txt-wrap {
        top: 48%;
    }

    .mv-area .mv-txt-wrap .mv-catch {
        font-size: min(7cqw, 2.4rem);
        font-feature-settings: "palt";
        letter-spacing: .2rem;
        line-height: 1.4;
        text-shadow: 0 0 10px #5a4729, 0 0 10px #5a4729;
    }

    .mv-area .mv-txt-wrap .mv-catch .large {
        /* font-size: min(11.0cqw,4.2rem);*/
        font-size: 140%;
    }

    .mv-area .mv-txt-wrap .mv-sub-catch {
        font-size: min(4.5cqw, 2.0rem);
    }

    .mv-area .mv-txt-wrap .mv-txt {
        display: none;
    }
}

/* -------------------------------------------------------------
    btn-area
-------------------------------------------------------------- */
.btn-area {
    position: relative;
    margin-top: -340px;
}

.btn-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    min-width: 1400px;
    border-radius: 50px;
    background: var(--beige3);
    z-index: -1;
}

.btn-area .btn-block {
    padding: 100px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.btn-area .btn-block .btn-box {
    width: calc((100% - 40px) / 3);
    box-shadow: 0 3px 30px rgba(57, 38, 10, .1);
    background: #fff;
    border-radius: 20px;
    padding: 20px 20px 40px;
    position: relative;
}

.btn-area .btn-block .btn-box.min {
    width: calc((100% - 60px) / 4);
    border-radius: 10px;
}

.btn-area .btn-block .btn-box img {
    border-radius: 10px;
    width: 100%;
}

.btn-area .btn-block .btn-box .btn-ttl {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    margin: 30px 0 0;
    transition: all .3s;
}

.btn-area .btn-block .btn-box .btn-ttl .min {
    font-size: 1.8rem;
}

.btn-area .btn-block .btn-box .btn-txt {
    margin-top: 15px;
    transition: all .3s;
}

.btn-area .btn-block .btn-box .arrow {
    position: absolute;
    display: inline-block;
    background: url("../img/icon-arrow-orange.svg") no-repeat center/contain;
    width: 8px;
    height: initial;
    aspect-ratio: 8 / 13;
    bottom: 20px;
    right: 20px;
    transition: all .3s;
}

/*PCのみ*/
@media screen and (min-width: 769px) {

    /*PC　小さいボタン*/
    .btn-area .btn-block .btn-box.min {
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .btn-area .btn-block .btn-box.min .btn-ttl {
        font-size: 1.6rem;
        margin: 0;
        text-align: left;
    }

    .btn-area .btn-block .btn-box.min .btn-ttl .min {
        font-size: 93%;
    }

    .btn-area .btn-block .btn-box.min .arrow {
        bottom: initial;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
    }

    .btn-area .btn-block .btn-box.min picture {
        width: 30%;
        height: initial;
        aspect-ratio: 1/1;
    }

    .btn-area .btn-block .btn-box.min img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .btn-area .btn-block .btn-box.min .txt-wrap {
        width: calc(70% - 15px);
    }

}

@media (hover: hover) and (pointer: fine) {
    .btn-area .btn-block .btn-box:hover {
        transform: translateY(-5px);
    }

    .btn-area .btn-block .btn-box:hover .btn-ttl,
    .btn-area .btn-block .btn-box:hover .btn-txt {
        color: var(--orange);
    }

    .btn-area .btn-block .btn-box:hover .arrow {
        transform: translateX(3px);
    }

    .btn-area .btn-block .btn-box.min:hover .arrow {
        transform: translate(3px, -50%);
    }

}

@media screen and (max-width: 768px) {
    .btn-area {
        margin-top: -110px;
    }

    .btn-area::before {
        display: none;
    }

    .btn-area .btn-area-ttl {
        font-size: 1.8rem;
        font-weight: bold;
        line-height: 1.6;
        display: flex;
        align-items: center;
        color: #fff;
        margin-left: 20px;
    }

    .btn-area .btn-area-ttl::after {
        content: "";
        height: 1px;
        background: #fff;
        margin-left: 10px;
        flex-grow: 1;
    }

    .btn-area .btn-block {
        padding: 0 2vw;
        gap: 20px 10px;
        margin: 20px 0 0;
    }

    .btn-area .btn-block .btn-box {
        width: calc((100% - 20px) / 3);
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        padding: 0;
    }

    .btn-area .btn-block .btn-box.min {
        width: calc((100% - 30px) / 4);
    }

    .btn-area .btn-block .btn-box img {
        border-radius: 8px;
        width: 100%;
    }

    .btn-area .btn-block .btn-box.min img {
        border-radius: 5px;
    }

    .btn-area .btn-block .btn-box .btn-ttl {
        font-size: 4cqw;
        margin: 10px 0 0;
        font-feature-settings: "palt";
    }

    .btn-area .btn-block .btn-box.min .btn-ttl {
        font-size: 3.2cqw;
        line-height: 1.3;
    }

    .btn-area .btn-block .btn-box .btn-ttl .min {
        display: none;
    }

    .btn-area .btn-block .btn-box.min .btn-ttl .min {
        display: inline;
        font-size: 100%;
    }

    .btn-area .btn-block .btn-box .btn-txt {
        display: none;
    }

    .btn-area .btn-block .btn-box .arrow {
        display: none;
    }
}



/* -------------------------------------------------------------
    news-area   標準仕様
-------------------------------------------------------------- */
#top .ninews-area {
    margin: 100px 0 0 0;
    padding: 100px 0 0;
    position: relative;
}

#top .ninews-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 300px;
    background: linear-gradient(-90deg, #F3EEE6 0%, #FFFFFF 100%);
    z-index: -1;
    border-radius: 0 50px 0 0;
}

#top .ninews-area::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 300px;
    background: linear-gradient(90deg, #F3EEE6 0%, #FFFFFF 100%);
    z-index: -1;
    border-radius: 0 0 0 50px;
}

#top .ninews-area .ninews-inner {
    gap: 20px;
}

#top .ninews-area .ninews-head {
    /*
	width: 145px;
*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#top .ninews-area .ninews-head-link {
    border: 1px solid var(--cmnblack);
    color: var(--cmnblack);
    gap: 5px;
    font-size: 1.5rem;
    padding: 8px 30px 10px 16px;
    margin: 35px 0 0;
    position: relative;
    border-radius: 20px;
}

#top .ninews-area .ninews-head-link:hover {
    background: var(--link);
    border-color: var(--link);
    color: #fff;
}

#top .ninews-area .ninews-head-link::before {
    /*content: "\f03a";
	font: 900 1.2rem/1 var(--webicon);
	padding: 3px 0 0;*/
    content: "";
    display: inline-block;
    position: absolute;
    background: url("../img/icon-arrow-orange.svg") no-repeat center/contain;
    width: 6px;
    height: initial;
    aspect-ratio: 8/13;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}

/*
#top .ninews-area .ninews-list {
	width: calc(100% - 145px - 20px);
}
*/

#top .ninews-area .ninews-date {
    color: var(--cmnblack);
    font: 500 1.2rem /1 var(--en);
    letter-spacing: .05em;
    font-weight: bold;
}

#top .ninews-area .ninews-cate-wrap .ninews-cate:nth-child(3n) {
    display: none;
}

#top .ninews-area .ninews-title {
    color: var(--cmnblack);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .07em;
    line-height: 1.7;
}

@media screen and (max-width: 768px) {
    #top .ninews-area {
        margin: 40px 0 0;
        padding: 40px 0 0;
    }

    #top .ninews-area::before {
        width: 80%;
        height: 200px;
        border-radius: 0 30px 0 0;
    }

    #top .ninews-area::after {
        display: none;
    }

    #top .ninews-area .ninews-head {
        margin: 0 0 20px;
        width: 100%;
    }

    #top .ninews-area .top-section-ttl .en {
        font-size: 3rem;
    }

    #top .ninews-area .top-section-ttl .ja {
        font-size: 1.4rem;
        margin: 0;
    }

    #top .ninews-area .ninews-head-link {
        font-size: 1.4rem;
        margin: 0;
        gap: 5px;
        padding: 8px 26px 10px 16px;
    }

    #top .ninews-area .ninews-list {
        width: 100%;
    }

    #top .ninews-area .ninews-date {
        font-size: 1.3rem;
    }

    #top .ninews-area .ninews-title {
        font-size: 1.5rem;
    }
}


/* -------------------------------------------------------------
    news-area   ninews-have-thumb サムネイルあり
-------------------------------------------------------------- */
#top .ninews-have-thumb.ninews-list {
    gap: 35px;
    padding: 40px 0 100px;
}

#top .ninews-have-thumb .ninews-item {
    width: calc((100% - 105px) / 4);
}

/*
#top .ninews-have-thumb .ninews-item a {
	gap: 20px;
}
*/

#top .ninews-thumb__img {
    width: 274px;
    height: 274px;
    margin: 0 0 20px;
}

#top .ninews-thumb__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

#top .ninews-have-thumb a:hover img {
    transform: scale(1.15);
}

/*
#top .ninews-thumb__elements {
	gap: 10px;
	width: calc(100% - 240px - 20px);
}
*/

#top .ninews-have-thumb .ninews-title {
    -webkit-line-clamp: 3;
    max-height: 80px;
    margin-top: 10px;
}

#top .ninews-have-thumb .ninews-elements {
    gap: 12px;
}

@media screen and (max-width: 768px) {
    #top .ninews-have-thumb .ninews-item {
        width: 100%;
    }

    #top .ninews-have-thumb .ninews-item a {
        gap: 15px;
        display: flex;
    }

    #top .ninews-thumb__img {
        width: 30%;
        height: auto;
        aspect-ratio: 1/1;
        margin: 0;
    }

    #top .ninews-thumb__elements {
        gap: 5px;
        width: calc(30% - 15px);
    }

    #top .ninews-have-thumb .ninews-elements {
        gap: 8px 10px;
    }

    #top .ninews-have-thumb .ninews-title {
        margin-top: 5px;
        font-size: 1.5rem;
    }

    #top .ninews-have-thumb.ninews-list {
        gap: 20px;
        padding: 0;
    }

    #top .ninews-have-thumb.ninews-list li:nth-child(n+3) {
        display: none;
    }
}


/* -------------------------------------------------------------
    about-area
-------------------------------------------------------------- */
.about-area {
    padding: 100px 0;
    position: relative;
}

.about-area .bg-wrap {
    position: absolute;
    top: 0;
    left: -10%;
    background: url("../img/top-about-bg.webp") center/contain, no-repeat;
    width: 70%;
    min-width: 1000px;
    height: initial;
    aspect-ratio: 1612/900;
}

.about-area .txt-wrap {
    margin: 130px calc((100% - 1200px) / 2) 0 auto;
    width: 560px;
    background: rgba(255, 255, 255, .9);
    z-index: 1;
    position: relative;
    padding: 80px 0 0 80px;
    border-radius: 20px 0 0 0;
}

.about-area .sec-catch {
    margin: 30px 0 0;
}

.about-area .basic-txt {
    margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
    .about-area {
        margin: 50px 0 0;
        padding: 0;
    }

    .about-area .bg-wrap {
        left: -16vw;
        background: url("../img/top-about-bg.webp") center/cover, no-repeat;
        width: 113vw;
        min-width: initial;
    }

    .about-area .txt-wrap {
        margin: 0;
        width: 100%;
        background: transparent;
        padding: 65vw 20px 0;
        border-radius: 0;
    }

    .about-area .sec-catch {
        margin: 20px 0 0;
    }

    .about-area .basic-txt {
        margin: 15px 0 0;
    }
}

/* -------------------------------------------------------------
    planning-area
-------------------------------------------------------------- */
.planning-area {
    margin: 120px 0 0;
    padding: 120px 0 180px;
    /*background: var(--beige);*/
    border-radius: 0 300px 0 0;
    position: relative;
    background-color: var(--beige);
    background-image:
        /*url("../img/deco-color-chart.webp"),*/
        url("../img/deco-circle-grad01.webp");
    background-repeat:
        /*no-repeat,*/
        no-repeat;
    background-position:
        /*left 10px top 10px,*/
        left -20% bottom -40%;
}

.planning-area .bg-wrap {
    position: absolute;
    top: -60px;
    right: -60px;
    border-radius: max(20vw, 350px);
    width: 40vw;
    min-width: 700px;
    height: initial;
    aspect-ratio: 1/1;
    background: url("../img/top-planning-bg.webp") center/cover, no-repeat;
}

.planning-area .en {
    font-size: 1.6rem;
    color: var(--orange);
    margin: 0 0 30px;
}

.planning-area .deco {
    font-size: 16.0rem;
    font-family: var(--en);
    line-height: 1.3;
    font-weight: bold;
    color: var(--beige);
    top: -16.0rem;
    left: 2%;
    position: absolute;
}

.planning-area .inner>.sec-catch {
    font-size: 3.6rem;
    line-height: 1.7;
}

.planning-area .planning-block {
    padding: 80px;
    border-radius: 20px;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, .5);
    margin: 80px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.planning-area .planning-block .txt-wrap {
    width: calc(100% - 560px);
}

.planning-area .planning-block .en {
    font-size: 1.4rem;
    margin: 0 0 20px;
}

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

.planning-area .planning-block .figure-wrap img {
    width: 100%;
}

.planning-area .planning-block .sec-ttl {
    font-size: 3.6rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 30px;
}

.planning-area .planning-block .sec-catch {
    font-size: 2.4rem;
    margin: 0 0 20px;
}

@media screen and (max-width: 768px) {
    .planning-area {
        margin: 80px 0 0;
        padding: 0 0 80px;
        /* background: var(--beige); */
        border-radius: 0;
        background-color: var(--beige);
        background-image: none;
    }

    .planning-area::before {
        content: "";
        display: block;
        position: absolute;
        top: 50vw;
        right: 0;
        background: url("../img/deco-color-chart.webp") center/cover, no-repeat;
        width: 15vw;
        height: 15vw;
        transform: scale(-1, 1);
    }

    .planning-area .bg-wrap {
        position: relative;
        top: initial;
        right: initial;
        width: 100%;
        height: 50vw;
        border-radius: 0;
        min-width: initial;
        aspect-ratio: initial;
        background: url("../img/top-planning-bg-sp.webp") center/cover, no-repeat;
    }

    .planning-area .deco {
        font-size: 7.8rem;
        top: -6rem;
        left: -3vw;
        white-space: nowrap;
        letter-spacing: 1.0rem;
    }

    .planning-area .inner {
        margin: 40px 0 0;
    }

    .planning-area .en {
        font-size: 1.4rem;
        margin: 0 0 20px;
    }

    .planning-area .inner>.sec-catch {
        font-size: 2.4rem;
        line-height: 1.7;
    }

    .planning-area .planning-block {
        padding: 30px 20px;
        margin: 30px 0 0;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        backdrop-filter: none;
        background: #fff;
    }

    .planning-area .planning-block .txt-wrap {
        width: 100%;
        margin: 20px 0 0;
    }

    .planning-area .planning-block .figure-wrap {
        width: 100%;
    }

    .planning-area .planning-block .en {
        display: none;
    }

    .planning-area .planning-block .sec-ttl {
        font-size: 2.4rem;
        margin: 0 0 15px;
    }

    .planning-area .planning-block .sec-catch {
        font-size: 1.8rem;
        margin: 0 0 20px;
        font-feature-settings: "palt";
    }

    .planning-area .planning-block .basic-txt {
        display: none;
    }
}

/* -------------------------------------------------------------
    service-area
-------------------------------------------------------------- */
.service-area {
    padding: 120px 0 350px;
    margin: -60px 0 0;
    background: #F3EEE6;
    border-radius: 80px 80px 0 0;
    position: relative;
    z-index: 1;
}

.service-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: initial;
    aspect-ratio: 1600 / 1066;
    background: url("../img/bg-beige-grad.webp") center/cover, no-repeat;
    border-radius: 80px 80px 0 0;
}

.service-area::after {
    content: "";
    display: block;
    position: absolute;
    top: 45%;
    right: -10vw;
    width: 50vw;
    height: initial;
    aspect-ratio: 1/1;
    background: url("../img/deco-circle-grad01.webp") center/cover, no-repeat;
    transform: scale(-1, 1);

}

.service-area .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 200px;
    position: relative;
    z-index: 1;
}

.service-area .top-section-ttl {
    flex-shrink: 0;
}

.service-area .catch-wrap {
    width: 600px;
}

.service-area .inner>.catch-wrap .sec-catch {
    margin: 0 0 15px;
}

.service-area .service-block-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 30px;
    margin: 50px 0 0;
}

.service-area .service-block {
    background: #fff;
    border-radius: 20px;
    display: flex;
    box-shadow: 0 5px 50px rgba(57, 38, 10, .1);
    width: 100%;
}

.service-area .service-block .txt-wrap {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 580px);
}

.service-area .service-block .img-wrap {
    border-radius: 60px 20px 20px 0;
    width: 580px;
    overflow: hidden;
}

.service-area .service-block .en {
    font-size: 1.4rem;
    color: var(--orange);
    margin: 0 0 10px;
}

.service-area .service-block .service-ttl {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 20px;
}

.service-area .service-block .service-ttl .large {
    font-size: 3.6rem;
}

.service-area .service-block .sec-catch {
    font-size: 2.4rem;
    margin: 0 0 20px;
}

/*----- service-block.min -----*/
.service-area .service-block.min {
    padding: 25px;
    /*flex-direction: column;*/
    width: calc((100% - 30px) / 2);
    position: relative;
    gap: 5%;
}

.service-area .service-block.min .txt-wrap {
    padding: 0;
    width: 60%;
    display: flex;
    align-items: flex-start;
}

.service-area .service-block.min picture {
    width: 35%;
}

.service-area .service-block.min img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.service-area .service-block.min .en {
    font-size: 1.2rem;
    margin: 0 0 5px;
}

.service-area .service-block.min .service-ttl {
    font-size: 2.4rem;
    margin: 0 0 10px;
    text-align: left;
}

.service-area .service-block.min .sec-catch {
    font-size: 1.8rem;
    margin: 0 0 15px;
    text-align: left;
}

.service-area .service-block.min .basic-txt {
    line-height: 1.7;
}

.service-area .service-block.min .arrow {
    position: absolute;
    display: inline-block;
    background: url("../img/icon-arrow-orange.svg") no-repeat center/contain;
    width: 8px;
    height: initial;
    aspect-ratio: 8 / 13;
    bottom: 20px;
    right: 20px;
    transition: all .3s;
}

@media (hover: hover) and (pointer: fine) {
    .service-area .service-block.min:hover {
        transform: translateY(-8px);
    }

    .service-area .service-block.min:hover .btn-ttl,
    .service-area .service-block.min:hover .btn-txt {
        color: var(--orange);
    }

    .service-area .service-block.min:hover .arrow {
        transform: translateX(3px);
    }

}

@media screen and (max-width: 768px) {
    .service-area {
        padding: 30px 0 80px;
        margin: -40px 0 0;
        border-radius: 30px 30px 0 0;
    }

    .service-area::before {
        aspect-ratio: 375 / 377;
        background: url("../img/bg-beige-grad-sp.webp") center/cover, no-repeat;
        border-radius: 30px 30px 0 0;
    }

    .service-area::after {
        display: none;
    }

    .service-area .catch-wrap {
        width: 100%;
        margin: 20px 0 0;
    }

    .service-area .basic-txt {
        display: none;
    }

    .service-area .service-block-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px 0 0;
    }

    .service-area .service-block {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        border-radius: 10px;
        width: 100%;
    }

    .service-area .service-block .en {
        font-size: 1.2rem;
        margin: 0 0 5px;
    }

    .service-area .service-block .service-ttl {
        font-size: 1.8rem;
        margin: 0 0 15px;
    }

    .service-area .service-block .service-ttl .large {
        font-size: 2.8rem;
    }

    .service-area .service-block .sec-catch {
        font-size: 1.8rem;
        margin: 0;
    }

    .service-area .service-block .txt-wrap {
        padding: 20px 20px 30px;
        width: 100%;
    }

    .service-area .service-block .img-wrap {
        border-radius: 10px 10px 0 0;
        width: 100%;
        height: 50vw;
    }

    .service-area .service-block.min {
        padding: 10px;
        flex-direction: row;
        width: 100%;
    }

    .service-area .service-block.min picture {
        width: 30vw;
        height: 20vw;
    }

    .service-area .service-block.min img {
        /*width: 30vw;
        height: 20vw;*/
        border-radius: 5px;
    }

    .service-area .service-block.min .txt-wrap {
        width: calc(100% - (30vw + 5%));
        margin: 0;
        align-items: flex-start;
    }

    .service-area .service-block.min .en {
        display: none;
    }

    .service-area .service-block.min .sec-catch {
        display: none;
    }

    .service-area .service-block.min .service-ttl {
        font-size: 1.7rem;
        margin: 0;
    }

    .service-area .service-block.min .arrow {
        bottom: initial;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
    }
}


/* -------------------------------------------------------------
    solution-area
-------------------------------------------------------------- */
.solution-area {
    position: relative;
    z-index: 2;
    margin-top: -250px;
    padding: 100px 0;
}

.solution-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    min-width: 1400px;
    height: 100%;
    border-radius: 50px;
    background: #F8F6F2;
    z-index: -1;
}

.solution-area .top-section-ttl {
    text-align: center;
}

.solution-area .solution-list {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 60px 0 0;
}

.solution-area .solution-list li {
    width: calc((100% - 160px) / 5);
    text-align: center;
}

.solution-area .solution-list li a {
    display: block;
}

.solution-area .solution-list .ill-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 200px;
    height: 201px;
    z-index: 1;
}

.solution-area .solution-list .ill-wrap::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: initial;
    background: url("../img/bg-solution-ill.webp") center/cover, no-repeat;
    z-index: -1;
    aspect-ratio: 200 / 201;
}

.solution-area .solution-list .ill-wrap::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: initial;
    background: url("../img/bg-solution-ill-line.svg") center/cover, no-repeat;
    z-index: -1;
    aspect-ratio: 200 / 201;
    transition: all .4s;
}

.solution-area .solution-list .ill-wrap img {
    max-width: 200px;
    max-height: 120px;
    transition: all .4s;
}

.solution-area .solution-list .arrow {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--green);
    display: inline-block;
    margin: -12px auto 0;
    position: relative;
    z-index: 1;
}

.solution-area .solution-list .arrow::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../img/icon-arrow-white.svg") center/cover, no-repeat;
    width: 7px;
    height: initial;
    aspect-ratio: 8 / 13;
}

.solution-area .solution-list .txt-wrap {
    text-align: center;
}

.solution-area .solution-list .txt-wrap .list-name {
    font-size: 2.0rem;
    font-weight: bold;
    margin: 20px 0 0;
    transition: all .4s;
}

.solution-area .solution-list .txt-wrap .list-txt {
    font-size: 1.4rem;
    margin: 10px 0 0;
    letter-spacing: 0;
    font-feature-settings: "palt";
}

/*イラスト背景　角度指定　*/
.solution-area .solution-list li:first-child .ill-wrap::after {
    transform: rotate(11deg);
}

.solution-area .solution-list li:nth-child(2) .ill-wrap::before {
    transform: rotate(11deg);
}

.solution-area .solution-list li:nth-child(3) .ill-wrap::before {
    transform: rotate(-30deg);
}

.solution-area .solution-list li:nth-child(3) .ill-wrap::after {
    transform: rotate(11deg);
}

.solution-area .solution-list li:nth-child(4) .ill-wrap::before {
    transform: rotate(7deg);
}

.solution-area .solution-list li:nth-child(4) .ill-wrap::after {
    transform: rotate(17deg);
}

.solution-area .solution-list li:nth-child(5) .ill-wrap::before {
    transform: rotate(-10deg);
}

.solution-area .solution-list li:nth-child(5) .ill-wrap::after {
    transform: rotate(9deg);
}

@media (hover: hover) and (pointer: fine) {
    .solution-area .solution-list li a:hover .ill-wrap img {
        transform: rotateY(180deg);
    }

    .solution-area .solution-list li a:hover .ill-wrap::after {
        transform: rotate(30deg);
    }

    .solution-area .solution-list li a:hover .list-name {
        color: var(--orange2);
    }
}


@media screen and (max-width: 768px) {
    .solution-area {
        margin-top: -40px;
        padding: 30px 0 40px;
        background: #F8F6F2;
        border-radius: 30px 30px 0 0;
    }

    .solution-area::before {
        display: none;
    }

    .solution-area .solution-list {
        gap: 20px;
        margin: 30px 0 0;
        flex-wrap: wrap;
    }

    .solution-area .solution-list li {
        width: calc((100% - 20px) / 2);
    }

    .solution-area .solution-list .ill-wrap {
        width: 100%;
        height: initial;
        aspect-ratio: 200 / 201;
    }

    .solution-area .solution-list .ill-wrap img {
        max-width: 160px;
        max-height: 100px;
    }

    .solution-area .solution-list .txt-wrap .list-name {
        font-size: 1.6rem;
        margin: 10px 0 0;
    }

    .solution-area .solution-list .txt-wrap .list-txt {
        display: none;
    }

}

/* -------------------------------------------------------------
    equipment-area
-------------------------------------------------------------- */
.equipment-area {
    position: relative;
    margin: 100px 0 0;
}

.equipment-area .txt-block {
    background: rgba(255, 255, 255, .8);
    border-radius: 20px;
    padding: 80px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.equipment-area .txt-block .sec-catch {
    font-size: 2.4rem;
    margin: 30px 0 0;
}

.equipment-area .txt-block .basic-txt {
    margin: 20px 0 0;
}

.equipment-area .slider-block {
    position: relative;
    z-index: -1;
}

.equipment-area .slider-block img {
    height: initial;
    width: 530px;
    aspect-ratio: 530 / 355;
    position: relative;
    border-radius: 15px;
    margin-right: 20px;
}

.equipment-area .top-slider {
    display: flex;
    min-width: 100%;
    width: min-content;
    animation: 30s linear infinite sliderAnimation;
}

.equipment-area .bottom-slider {
    display: flex;
    flex-direction: row-reverse;
    min-width: 100%;
    width: min-content;
    animation: 30s linear infinite sliderAnimation02;
    margin: 20px 0 0;
}


@keyframes sliderAnimation {
    100% {
        transform: translateX(-50%);
    }
}

@keyframes sliderAnimation02 {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

@media screen and (max-width: 768px) {
    .equipment-area {
        margin: 10px 0 0;
        display: flex;
        flex-direction: column;
    }

    .equipment-area .slider-block {
        display: contents;
    }

    .equipment-area .slider-block img {
        width: 50vw;
        aspect-ratio: 3 / 2;
        border-radius: 10px;
        margin-right: 10px;
    }

    .equipment-area .top-slider {
        order: 1;
    }

    .equipment-area .txt-block {
        background: transparent;
        border-radius: 0;
        padding: 20px;
        position: relative;
        top: initial;
        left: initial;
        transform: none;
        order: 2;
        text-align: left;
    }

    .equipment-area .bottom-slider {
        order: 3;
    }

    .equipment-area .txt-block .sec-catch {
        font-size: 2.2rem;
    }

    .equipment-area .txt-block .basic-txt {
        display: none;
    }
}


/* -------------------------------------------------------------
    case-area
-------------------------------------------------------------- */

.case-area .top-section-ttl {
    text-align: center;
}

.case-area .sec-catch {
    text-align: center;
    margin: 40px 0 0;
}

.case-area .basic-txt {
    margin: 20px 0 0;
}

.case-area .case-list {
    margin: 60px 0 0;
}


@media screen and (min-width: 769px) {
    #top .case-list .case-box {
        width: calc((100% - 40px) / 3);
    }
}


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

    .case-area .top-section-ttl {
        text-align: left;
    }

    .case-area .sec-catch {
        text-align: left;
        margin: 20px 0;
        font-size: 2.2rem;
    }

    .case-area .basic-txt {
        display: none;
    }

}

/* -------------------------------------------------------------
    company-area
-------------------------------------------------------------- */
.company-area {
    display: flex;
    align-items: center;
    background: #F8F6F2;
    position: relative;
    height: 640px;
    margin: 0 0 100px;
}

.company-area .txt-block {
    width: 500px;
    /*margin-left: max(24vw,250px);*/
    margin-left: 24vw;
}

.company-area .txt-block .btn-flex {
    display: flex;
    gap: 30px;
}

.company-area .txt-block .sec-catch {
    margin: 20px 0 0;
}

.company-area .txt-block .basic-txt {
    margin: 20px 0 0;
}

.company-area .bg-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media screen and (min-width: 769px) {
    .company-area .bg-wrap {
        position: absolute;
        top: 20px;
        border-radius: 20px;
        height: 600px;
        width: 23vw;
        margin: 0 0 40px;
    }

    .company-area .bg01 {
        background: url("../img/top-company-img01.webp") center/cover, no-repeat;
        left: -3vw;
    }

    .company-area .bg02 {
        background: url("../img/top-company-img02.webp") center/cover, no-repeat;
        left: calc(24vw + 500px + 3vw);
    }

    .company-area .bg03 {
        background: url("../img/top-company-img03.webp") center/cover, no-repeat;
        left: calc(24vw + 500px + 3vw + 23vw + 20px);
    }
}

@media screen and (max-width: 768px) {
    .company-area {
        height: initial;
        flex-wrap: wrap;
        margin: 0 0 40px;
    }

    .company-area .txt-block {
        width: 100%;
        /* margin-left: max(24vw,250px); */
        margin-left: 0;
        padding: 30px 20px 40px;
    }

    .company-area .txt-block .sec-catch {
        font-size: min(5.6cqw, 2.8rem);
    }

    .company-area .txt-block .basic-txt {
        display: none;
    }

    .company-area .txt-block .btn-flex {
        gap: 15px;
    }

    .company-area .txt-block .btn-more {
        width: calc((100% - 15px) / 2);
    }

    .company-area .txt-block .btn-more a {
        color: #fff;
        display: inline-block;
        padding: 15px 30px;
        font-weight: bold;
        border-radius: 40px;
        min-width: initial;
        width: 100%;
    }

    .company-area .bg-block {
        position: relative;
        display: flex;
        gap: 10px;
        height: 50vw;
        margin: 10px 0 0;
    }

    .company-area .bg-wrap {
        /*position: absolute;
        top: 10px;
        border-radius: 10px;
        height: 50vw;
        width: 36vw;*/
        height: 50vw;
        width: calc((100% - 20px) / 3);
        border-radius: 10px;
    }

    /*.company-area .bg01 {
        left: -4vw;
    }
    
    .company-area .bg02 {
        left: 34vw;
    }
    
    .company-area .bg03 {
        left: 72vw;
    }*/

    .company-area .bg01 {
        background: url("../img/top-company-img01.webp") center/cover, no-repeat;
    }

    .company-area .bg02 {
        background: url("../img/top-company-img02.webp") center/cover, no-repeat;
    }

    .company-area .bg03 {
        background: url("../img/top-company-img03.webp") center/cover, no-repeat;
    }

}


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

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