/*!
Theme Name: WD child
Description: WD（ワンダフルドア）の子テーマです。
Version: 1.0.0
Template: wd
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Noto+Sans+JP:wght@100..900&display=swap');


:root {
    --color-white: #fff;
    --color-lightgray: #f0f0f0;
    --color-darkgray: #888;
    --color-gray: #AAABAE;
    --color-black: #3D4047;
    --color-blue: #007aff;
    --color-yellow: #ffdc00;
    --color-red: #e8383d;
    --size-xs: 16px;
    --size-sm: 32px;
    --size-md: 64px;
    --size-lg: 128px;
    --size-xl: 256px;
}

/*====================================================================
overwrite css
====================================================================*/
body {
    background: rgba(255, 255, 255, 0.3);
    /* -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px); */
    color: var(--color-black);
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
}
footer {
    position: relative;
}
footer .footer-logo img {
    max-width: 320px;
}
footer .menu-item .gnav-link,
.footer-01 .footer-contents .footer-menu .footer-nav .menu-item:before {
    color: var(--color-white);
}

header.gnav-fix {
    background: transparent!important;
    /* background: rgba(255, 255, 255, 0.8)!important; */
    /* -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px); */
}

@media screen and (max-width: 991px) {
    header .header-logo img {
        max-width: 240px;
    }
}

.layout-type01 .layout-type02 {
    padding: 0;
}


.wp-block-group.alignfull {
    padding-block: 64px;
}
@media screen and (min-width: 1181px) {
    .wp-block-group.alignfull {
        padding-block: 64px;
    }
}


.is-style-btn-type01 .wp-block-button__link {
    font-size: 1.6rem;
    min-height: 48px;
}

.wp-block-buttons .is-style-btn-type01 .wp-block-button__link:hover {
    border: none!important;
    outline: 1px solid #1fa539;
}

.is-style-fill .wp-block-button__link {
    padding: 10px!important;
    height: 88px;
    line-height: 1.35;
}


/*====================================================================
add css
====================================================================*/
.en {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
    /* line-height: 1; */
    letter-spacing: 0.1em;
}


.lh-no {
    line-height: 1;
}
.lh-sm {
    line-height: 1.35;
}

.box-shadow {
    box-shadow: 2px 2px 24px rgba(170, 171, 174, 0.2);
}

.num-01 {
    display: flex;
    align-items: center;
    gap: 16px;
}
.num-01::after {
    content: '';
    border-top: 1px solid var(--color-gray);
    opacity: 0.4;
    flex: 1;
}

.bg-blur {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    z-index: 1;
}

.img-blur::before {
    content: '';
    position: absolute;
    background: rgba(170, 171, 174, 0.5);
    /* -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(6px); */
    width: 100%;
    height: 100%;
    z-index: 1;
}
.img-blur > div {
    z-index: 2;
}


.step-list {
    position: relative;
    z-index: 1;
}
.step-list::before {
    content: '';
    background: var(--color-gray);
    position: absolute;
    top: 0;
    left: 120px;
    height: 100%;
    width: 1px;
    opacity: 0.4;
    z-index: -1;
}

.step-list-img {
    position: relative;
    border-radius: 50%;
    margin: 0 auto;
    max-width: 240px;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .step-list::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.cat-01 {
    display: inline-block;
    background: #1fa539;
    color: #fff;
    font-size: 1.2rem;
    padding: 5px 16px;
}


/* section title */
.sec-ttl-main {
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 12px;
    line-height: 1;
}
.sec-ttl-main::before {
    content: '';
    background: url(../wd-child/_assets/images/icon_leaf.svg) no-repeat center center/contain;
    display: block;
    aspect-ratio: 42 / 41;
    min-width: 14px;
    width: 0.5em;
}

.sec-ttl-main--col {
    flex-direction: column;
}
.sec-ttl-main--white::before {
    background: url(../wd-child/_assets/images/icon_leaf-white.svg) no-repeat center center/contain;
}
.sec-ttl-sub {
    line-height: 1.35;
    font-weight: 400;
}


.ttl-01 {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: 500;
    gap: 16px;
    line-height: 1.25;
    padding-left: 24px;
}

.ttl-01::before {
    content: '';
    position: absolute;
    top: 0.45em;
    left: 0;
    background: #1fa539;
    border-radius: 50%;
    display: block;
    aspect-ratio: 1;
    min-width: 8px;
}

.ttl-01::after {
    content: '';
    position: absolute;
    top: 0.6em;
    right: 0;
    /* background: #1fa539; */
    background-image: linear-gradient(90deg, rgba(31, 165, 57, 0.6) 0%, rgba(168, 206, 72, 0.6) 100%);
    margin-left: auto;
    width: calc(100% - 240px);
    height: 2px;
}

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

    .ttl-01::after {
        position: static;
        flex: 1;
        /* width: 100%; */
    }
}

.ttl-02 {
    font-weight: 500;
    line-height: 1.45;
}


/* top style */
.top-fv > div {
    padding: 64px 16px!important;
}
.top-fv img {
    position: fixed!important;
    left: auto!important;
    right: 0!important;
    /* margin: 0 auto; */
    height: 100vh!important;
}

.top-fv-txt {
    display: inline-block;
    inline-size: fit-content;
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-weight: 500;
    line-height: 1;
    padding: 16px 8px;
}

@media screen and (min-width: 992px) {
    .top-fv > div {
        padding: 64px 32px!important;
    }
}
@media screen and (max-width: 991px) {
    .top-fv-txt.has-3-exlarge-font-size {
        font-size: 2.4rem!important;
    }
}

.top-recruit > div {
    padding: 0!important;
    width: 100%!important;
}
.top-recruit img {
    height: auto!important;
    /* width: 80%!important; */
    top: auto!important;
    left: auto!important;
    bottom: 0!important;
    object-fit: contain!important;
    height: 100%!important;
}

@media screen and (max-width: 991px) {
    .top-recruit img {
        height: auto!important;
    }
}



/* top style */
.top-service-box {
    position: relative;
    z-index: 1;
}
.top-service-box::before {
    content: '';
    position: absolute;
    top: 0;
    left:  calc(50% - 50vw);
    background: #F7FAEF;
    /* background: #fff; */
    height: 100%;
    width: calc(50vw + 100px);
    z-index: -1;
}


/* Overview Style */
.overview-archive-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media screen and (min-width: 992px) {
    .overview-archive-list{
        grid-template-columns: repeat(2, 1fr);
    }
}

.overview-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media screen and (min-width: 992px) {
    .overview-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.overview-card {
    display: block;
    color: var(--color-black);
    /* border: 1px solid var(--color-gray); */
    box-shadow: 2px 2px 24px rgba(170, 171, 174, 0.2);
}

.overview-card-thumb {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.overview-card-thumb img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: .25s ease-in-out;
}

.overview-card-body {
    padding: 24px 16px;
}
.overview-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px!important;
}
.overview-card-cats .cat {
    background: #1fa539;
    color: #fff;
    font-size: 1.2rem;
    padding: 4px 16px;
}
.overview-card-ttl {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.overview-card:hover .overview-card-thumb img {
    transform:scale(1.1,1.1);
}

.overview-imgs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin-left: calc((100% - 100vw) / 2) !important;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100vw;
}

.overview-img {
    display: flex;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .overview-img {
        aspect-ratio: 4 / 3;
        width: calc(100% / 3 - ((40px * 2) / 3));
    }
}

.overview-img figure {
    margin: 0;
    height: 100%;
    width: 100%;
}

.overview-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}



/* list style */
.desc-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 40px;
    margin: 0;
}
.desc-list-item {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.6rem;
    gap: 16px 24px;
    border-bottom: 1px solid rgba(170, 171, 174, 0.4);
    padding-bottom: 24px;
}
.desc-list-item dt {
    color: #888;
    margin: 0;
    width: 100%;
}
.desc-list-item dd {
    margin: 0;
}

@media screen and (min-width: 992px) {
    .desc-list {
        gap: 24px 40px;
    }
    .desc-list-item {
        padding-bottom: 40px;
    }
    .desc-list-item dt {
        width: 128px;
    }
    .desc-list-item dd {
        flex: 1;
    }

}



/* header button */
.header-right {
    flex: 1;
}
.header-btn {
    border-radius: 4px;
    background: linear-gradient(135deg, rgb(168, 206, 72) 0%, rgb(31, 165, 57) 98%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    height: 48px;
    margin-inline: auto;
    max-width: 180px;
    width: 100%;
    transform: .25s ease-in-out;
}
.header-btn svg {
    fill: #fff;
    transform: .25s ease-in-out;
}
.header-btn:hover {
    background: #fff;
    color: #1FA539;
    outline: 1px solid #1FA539;
}
.header-btn:hover svg {
    fill: #1FA539;
}

@media screen and (min-width: 1181px) {
    .header-btn {
        margin-left: 32px;
    }
}