@charset "UTF-8";

/* -------------------------
      タブ切り替え
--------------------------*/
.tab-group{
    display: flex;
    justify-content: center;
    margin: auto;
}
.tab{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F2EEE1;
    flex-grow: 1;
    width: 30%;
    margin: 0 5px;
    padding: 20px 0 22px 0;
    list-style:none;
    text-align:center;
    cursor:pointer;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -3px 7px rgba(64, 48, 11, 0.2);
}
.panel{
    display:none;
}
.tab.is-active{
    background:#FAFAFA;
    box-shadow: none;
    transition: all 0.2s ease-out;
}
.panel.is-show{
    display:block;
}
.tab__headline--img {
    width: 27%;
}
@media (max-width: 788px) {
    .tab-group {
        width: 100%;
    }
    .tab {
        padding: 20px 0;
    }
    .tab__headline--img {
        width: 60%;
    }
}

/* -------------------------
      タブ中身
--------------------------*/
.panel__product {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 86%;
    margin: 0 0 0 auto;
    padding: 80px 0;
}
.panel__works {
    padding-bottom: 120px;
}
.panel__product-info {
    width: 36%;
}
.product-info-img {
    width: 60%;
}
.panel__product-info--headline {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 34px;
    margin: 50px 0 36px 0;
}
.panel__product-info--text {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 26px;
    text-align: justify;
    margin-top: 54px;
}
.panel__product-img {
    width: 54%;
}
@media (max-width: 788px) {
    .panel__product {
        flex-direction: column-reverse;
        width: 100%;
        padding: 30px 0 60px 0;
    }
    .panel__product-info {
        width: 90%;
        margin-top: 40px;
    }
    .product-info-img {
        display: block;
        margin: auto;
    }
    .panel__product-info--img {
        width: 84%;
        margin: auto;
    }
    .panel__product-info--headline {
        margin: 40px auto;
        text-align: center;
    }
    .panel__product-img {
        width: 93.5%;
        min-height: auto;
        margin: 0 0 0 auto;
    }
}

/* -------------------------
      開発実績
--------------------------*/
.panel__works-common {
    /* background-image: url(../img/products__works--approach.png); */
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%,contain;
    margin-top: 24px;
}
.panel__works-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: auto;
}
.panel__works-block--list {
    width: 30%;
    margin-bottom: 30px;
    margin-right: 3%;
}
.panel__works-block--img {
    margin-bottom: 10px;
    max-height: 192px;
}
.panel__works-block--title {
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
}
.product-more__btn {
    display: flex;
    justify-content: center;
    padding: 30px 0 50px 0;
}
.work-slide-wrapper{
    display: flex;
    flex-wrap: wrap;
}
.products-section-title{
    margin: unset;
    padding: 0 13.5%;
}
.panel__works-block--list-wrapper{
    display: flex;
    background-image: url(http://localhost:10014/wp-content/themes/theme_2023/img/products__works--approach.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 100% 55%, contain;
    background-position: bottom;
    padding: 0 13.5%;
}
.panel__works-block--list-wrapper:nth-child(n + 2){
    margin-top: 30px;
}
.panel__works-block.container.pc-only{
    display: flex;
}
.panel__works-block.sp-only{
    display: none;
}
.bg-beige-img{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: url(../img/products__works--approach.png);
    background-size: 100vw 60%,contain;
    background-position: bottom;
    background-repeat: no-repeat;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}
.bg-beige-img:nth-child(n + 2){
    margin-top: 25px;
}
.work-message{
    font-size: 18px;
}
.one-child.bg-beige-img{
    width: 100vw;
}
@media (max-width: 1250px){
    .panel__works-block--img{
        max-height: 196px;
    }
}
@media (max-width: 1150px){
    .panel__works-block--img{
        max-height: 180px;
    }
}
@media (max-width: 1050px){
    .panel__works-block--img{
        max-height: 164px;
    }
}
@media (max-width: 950px){
    .panel__works-block--img{
        max-height: 148px;
    }
}
@media (max-width: 850px){
    .panel__works-block--img{
        max-height: 132px;
    }
}
@media (max-width: 789px){
    .panel__works-block--img{
        max-height: 123px;
    }
}

@media (max-width: 788px) {
    .panel__works{
        padding-bottom: 10.2%;
    }
    .products-container {
        width: 80%;
    }

    .panel__works-block--title{
        width: 80%;
        margin: 15px auto 30px auto;
    }
    .panel__works-block--list{
        width: 100%;
        margin:auto;
    }
    .panel__works-block{
        margin:auto;
        display: block;
    }
    .panel__works-block.container.pc-only{
        display: none;
    } 
    .panel__works-block.sp-only{
        display: block;
    } 
    .panel__works-block--img{
        width: 80vw;
        flex-wrap:unset;
        margin: auto;
        max-height: 425px;
    }
    .work-slide-wrapper{
        justify-content: flex-start;
        align-items: center;
        background: url(../img/products__works--approach.png);
        background-size: 100vw 60%,contain;
        background-position: bottom;
        background-repeat: no-repeat;    
    }
    .work-slide-wrapper img{
        width: 100%;
    }
    .hover__zoom .hover__zoom-img{
        transition: none;
        display: block;
    }
    .slick-prev,.slick-next{
        width:56px;
        height: 56px;
        background:white;
        border-radius: 50%;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
        z-index: 1000;
        text-align: center;
    }
    .slick-next{
        right: 0;
        transform: translate(0%, -100%);
        top: 50%;        
    }
    .slick-prev{
        left: 0;
        top: 50%;
        transform: translate(0%, -100%);
    }
    .slick-prev:hover,.slick-next:hover{
        background:white;
    }
    .slick-prev:before,.slick-next:before{
        font-family: inherit;
        font-size: 30px;
        color: #40400B;
        line-height: 56px;
    }
    .slick-prev:before{
        content:'→';
    }
    .slick-prev:before{
        content:'←';
    }
    .work-slide-wrapper:not(:has(button)) {
        background: none;
        width: 80%;
        margin: auto;
    }
    .work-message{
        font-size: 15px;
    }
}
@media(max-width: 680px){
    .panel__works-block--img{
        max-height: 385px;
    }
}
@media(max-width: 585px){
    .panel__works-block--img{
        max-height: 335px;
    }
}
@media(max-width: 500px){
    .panel__works-block--img{
        max-height: 270px;
    }
}
@media(max-width: 450px){
    .panel__works-block--img{
        max-height: 225px;
    }
}