@charset "UTF-8";

/* =================================

    @ Parts 

==================================== */

.wc__btn{
    background: var(--primary);
    border-radius: 40px;
    color: #fff;
}
.wc__btn:hover{
    background:#fff;
    color:var(--primary);
}

/* ---------------------------
    @ SP
-------------------------------- */  
@media screen and (max-width:768px){
    .wc__btn {
        display:block;
        font-size: 16px;
        width: 100px;
        text-align: center;
        padding: 12px 0;
    }
}
/* ---------------------------
    @ PC
-------------------------------- */  
@media screen and (min-width:768px){
    .wc__btn{
        border: 2px solid var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size:var(--fs18);
        padding: var(--fs14) 0;
        transition: .3s;
        cursor: pointer;
        width: 100%;
        max-width: 15vw;
    }
    .wc__btn span {
        text-align: center;
        width: 80%;
        margin: 0 auto;
        display: grid;
        padding: 0;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    /* .wc__btn span::after {
        margin-left: auto;
        color: #fff;
        content: url(/wp-content/themes/windncalm/img/icon/ar_w.svg);
        width: 1.3vw;
        height: 1.3vw;
    }
    .wc__btn:hover span::after {
        content: url(/wp-content/themes/windncalm/img/icon/ar-p.svg);
        width: 1.3vw;
        height: 1.3vw;
    } */
}

/* =================================

    @ Hero 

==================================== */

/* [ here-image ] ---------*/  
.wc__hero-img{
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
}
.wc__hero-ttl > span{
    color: var(--primary);
    font-weight: 700;
}
.wc__hero-ttl > b {
    font-weight: 900;
}
.wc__hero-txt{
    line-height: 1.8;
}

/* [ News ] ---------*/  
.wc__news-inr{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
}
.wc__news-txt > time{
    color: var(--gray);
}

.wc__hero-ttl > *,
.wc__hero-txt > *{
    display: block;
}
.wc__news-txt {
    display: block;
    line-height: 1.5;
}
.wc__news-txt > *{
    display: block;
}

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

/* [ Hero ] ---------*/ 
    .wc__hero-ibox {
        width: 100%;
        height: 445px;
        position: relative;
    }
    .wc__hero-ibox::after{
        content:"";
        background:url(/wp-content/themes/windncalm/img/top/sp_wave2.svg) no-repeat;
        display: block;
        width: 100%;
        height: 100px;
        position: absolute;
        bottom: -16%;
    }
    .wc__hero-ibox img{
        border-radius:0;
    }
    .wc__hero-ttl{
        padding: 0 24px;
        text-align: center;
        line-height: 1.3;
    }
    .wc__hero-txt{
        text-align: center;
        font-size: 14px;
        padding: 0 24px;
    }
    .wc__hero-ttl > b {
        font-size: 30px;
    }
    .wc__hero-tbox{
        padding: 40px 40px 120px;
        width: 100%;
        position: relative;
    }
    .wc__hero-txt > b{
        margin:16px 0 0;
    }
/* [ News ] ---------*/ 
    .wc__news {
        position: absolute;
        top: -38%;
        width: calc(100% - 32px);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        background: var(--bg);
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 40px;
        padding: 16px 24px;
    }
    .wc__news-txt > b{
        font-size:14px;
    }
    .wc__news-txt > time {
        font-size: 14px;
    }
}

/* ---------------------------
    @ PC
-------------------------------- */  
@media screen and (min-width:768px){

/* [ Hero ] ---------*/ 
    .wc__hero {
        display: grid;
        grid-template-columns: [img-area] 60% [text-area] 40%;
        grid-template-rows: 580px auto;
        gap:0;
        max-width: var(--pc-width);
        width: var(--pc-mw);
        margin:0 auto;
    }
    .wc__hero-ttl > span{
        font-size: clamp(16px, 2vw, 22px);
    }
    .wc__hero-ttl > b {
        font-size: clamp(20px, 4vw, 55px);
    }
    .wc__hero-txt{
        font-size:var(--fs16);
        padding:var(--fs16) 0;
    }
    .wc__hero-txt > b {
        font-size:var(--fs20);
        margin-bottom:var(--fs16);
    }    
    .wc__hero-ibox {
        width: 58%;
        height: 580px;
        grid-column: 1;
        grid-row: 1;
        position: absolute;
        left: 0;
    }
    .wc__hero-img{
        border-radius: 0 0 80px;
    }
    .wc__hero-tbox {
        grid-column: 2;
        grid-row: 1;
        width: calc(100% - 3.3333333333333335vw);
        margin-left: auto;
        margin-top:6.333333333333332vw;
    }

/* [ News ] ---------*/ 
    .wc__news {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-width: var(--pc-width);
    }
    .wc__news-inr{
        background: var(--bg);
        border-radius: 16px;
        padding: var(--fs16);
    }
    .wc__news-btn{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top:32px;
    }
    .wc__news-btn .wc__btn{
        margin-left:auto;
    }
    .wc__news-btn::before {
        content: "";
        width: var(--w100);
        height: 1px;
        display: block;
        margin:0 5vw 0 16px;
        background-color: var(--gray);
    }
    .wc__news-txt{
        width: 100%;
    }
    .wc__news-txt > time{
        font-size: var(--fs14);
    }
    .wc__news-txt > b{
        transition: .3s;
        font-size: var(--fs16);
    }
    .wc__news-txt:hover b{
        opacity:.7;
        letter-spacing: 0.05em;
    }

}


/* =================================

    @ Contents 

==================================== */

.wc__cbox > a {
    display: grid;
}
.wc__cbox-img {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 1px var(--gray);
}
.wc__cbox-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.wc__cbox-txt {

}
.wc__cbox-info {
    line-height: 1.8;
}
.wc__cbox-info-txt > *{
    display: block;
}

/* ---------------------------
    @ SP
-------------------------------- */  
@media screen and (max-width:768px){
    .wc__contents{
        background: var(--bg);
        position: relative;
    } 
    .wc__contents::before{
        content:"";
        background:url(/wp-content/themes/windncalm/img/top/sp_wave.svg) no-repeat;
        display: block;
        width: 100%;
        height: 100px;
        position: absolute;
        top: -15%;
    }
    .wc__contents::after{
        content:"";
        background:url(/wp-content/themes/windncalm/img/top/sp_wave.svg) no-repeat;
        display: block;
        width: 100%;
        height: 100px;
        position: absolute;
        bottom: -15%;
        transform: rotate(180deg);
    }
    .wc__cbox > a{
        grid-template-columns: minmax(0, 1fr) 50%;
        gap:32px;
        margin-bottom:32px;
    }
    .wc__contents-inr{
        max-width: var(--sp-width);
        padding:28px 0;
        margin:0 auto;
    }
    .wc__cbox-info {
        margin-bottom: 16px;
    }
    .wc__cbox-info-txt > b{font-size: 20px;}
    .wc__cbox-info-txt > span{
        font-size: var(--fs14);
    }
}

/* ---------------------------
    @ PC
-------------------------------- */  
@media screen and (min-width:768px){
    .wc__contents{
        max-width: var(--pc-width);
        width: var(--pc-mw);
        margin: 48px auto;
    }
    .wc__cbox > a {
        grid-template-columns: 30vw auto;
        gap: 5.166666666666667vw;
        margin-bottom: 3.3333333333333335vw;
    }
    .wc__cbox-img {
        height: 250px;
    }
    .wc__cbox-txt {
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .wc__cbox-info {
        width: calc(100% - 15vw);
        display: flex;
        align-items: center;
    }
    .wc__cbox-info::after {
        content: "";
        width: var(--w100);
        height: 1px;
        display: block;
        margin:0 80px;
        background-color:var(--gray);
    }
    .wc__cbox-info-txt > b{
        font-size:var(--fs35);
    }
    .wc__cbox-info-txt > span{
        font-size: var(--fs14);
    }
}

/* =================================

    @ BLOG 

==================================== */

.wcBlog__img {
    overflow: hidden;
    width: 100%;
}
.wcBlog__img img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 25dvh;
}
.wcBlog__txt{
    padding:24px 0;
}
.wcBlog__cat {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
}
.wcBlog__cat > *{
    display: inline-block;
}
.wcBlog__cat span {
    background: var(--tertiary);
    padding: 4px 8px;
    max-width: 140px;
    text-align: center;
    border-radius: 4px;
    margin-right: 8px;
}
.wcBlog__cat time{
    color: var(--gray);
}
.splide__pb {
    margin-top: 40px;
    display: flex;
    justify-content:right;
    position: relative;
}
.wcBlog .splide__arrow svg{
    height: .8em;
    width: .8em;
}
.wcBlog .splide__pagination {
    right: inherit;
    bottom: inherit;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.wcBlog .splide__arrow--next {
    right: inherit;
}
.wcBlog button.is-active{
    opacity: 1;
    background-color: var(--primary);
}
.wcBlog .splide__arrow {
    border: 2px solid var(--primary);
    background: #fff;
    opacity: 1;
}
.wcBlog .splide__arrow > svg{fill:var(--primary);}

/* ---------------------------
    @ SP
-------------------------------- */  
@media screen and (max-width:768px){
    .wcBlog{
        max-width: var(--sp-width);
        padding: 100px 0 28px;
        margin:0 auto;
    }
    .wcBlog .splide__pagination {
        left:10%;
    }
    .wcBlog .splide__arrow--next {
        left: 146px;
    }
    .wcBlog .splide__arrow--prev {
        left: 0;
    }
    .wcBlog__img{
        height: 200px;
    }
    .wcBlog__txt >h3 {
        font-size: 16px;
    }
    .wcBlog .splide__arrow {
        width: 35px;
        height: 35px;
    }
    .wcBlog .splide__arrow svg{
        height: .8em;
        width: .8em;
    }
}

/* ---------------------------
    @ PC
-------------------------------- */  
@media screen and (min-width:768px){
    .wcBlog{
        max-width: var(--pc-width);
        width: var(--pc-mw);
        margin: 48px auto;
    }
    .wcBlog__txt >h3 {
        font-size:var(--fs20);
    }
    .wcBlog .wc__btn::before{
        content: "";
        width: var(--w100);
        height: 1px;
        display: block;
        background-color:var(--gray);
        position: absolute;
        right: 280px;
    }   
    .wcBlog__img{
        height: 250px;
    } 
    .wc__cbox-info-txt {
        width: 40%;
    }
    .wcBlog .splide__arrow--prev {
        left: 0;
    }
    .wcBlog .splide__arrow--next {
        left: 232px;
    }
    .wcBlog .splide__pagination {
        margin-left: 80px;
        left: 0%;
    }
    .wcBlog .splide__arrow {
        width: 40px;
        height: 40px;
    }

/* [ Animation ] ---------*/ 
    .wcBlog__img{
        position: relative;
    }
    .wcBlog__card img{
        transition: .4s;
    }
    .wcBlog__card:hover img{
        filter: blur(0px) brightness(45%);
        transform: scale(1.2);
    }
}