@charset "utf-8";

/* ===============================
page 03  search-category (商品カテゴリーから探した場合)  Start
=============================== */

.cate-search-container{
    position: relative;
}
.cate-txt{
    position: absolute;
    font-size:1.6rem;
    line-height:1.8;
    top:7%;
    left:50%;
    max-width: 704px;
    padding:0px 20px;
    width: 100%;
    transform: translate(-50%,-0%);
}

.recommend-container{
    max-width:1045px;
    padding:0px 20px;
    margin:0 auto;
}

.recommend-container a:hover{
    opacity:1;
}

.onechair-img{
    width:344px;
    height: 326.58px;
    margin:0 auto;
    transition:0.3s;
    padding:0px 13px;
    left:auto;
    position: relative;
    z-index: -1;
}

.onechair-num{
    font-size:3.9rem;
    font-family: Montserrat;
    padding-top:6px;
    font-weight:400;
    padding-left:9px;
}

.onechair-head{
    font-size:1.7rem;
    font-weight:700;
    line-height:1.5;
    margin-bottom: 5px;
    position: relative;
}

.onechair-para{
    font-size:1.2rem;
    line-height:1.5;
    max-width:367px;
    width:85%;
    position: relative;
    margin-top:-2px;
}

.twochair-card.searching .onechair-para {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 367px;
    width:82%;
    position: relative;
    top: 0%;
}
.onechair-card{
    background: #E3E8E4;
    padding:8px 0px 14px 26px;
    color:#5F5F5F;
    position: relative;
}

.card-twochair{
    display: flex;
    gap:16px;
    justify-content: center;
    margin-top:45px;
}

.card-onechair{
    /* width: calc((100% - 16px)/2); */
    width:100%;
    border-left: 3px solid #E3E8E4;
    cursor: pointer;
}

.onechair-card::after{
    content:"";
    background:url(../img/common/search-circle.png) no-repeat;
    width:51px;
    position: absolute;
    display: block;
    right:24px;
    top:37%;
    height:51px;
    background-size:100%;
}

.cate-img{
    font-weight:400;
}

.cate-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width:1000px) {
    .onechair-para {
        width:80%;
        max-width:100%;
    }

    .onechair-card::after {
        right: 14px;
}
}



@media screen and (max-width:768px) {
    .card-twochair{
        flex-direction:column;
    }

    

    .card-onechair{
        max-width:100%;
        width:100%;
    }

    .onechair-img{
        width: 224px;
        height: 212.66px;
        margin: 0 auto;
    }

    .onechair-num{
        font-size:1.8rem;
    }

    .onechair-head{
        font-size:1.3rem;
        max-width: 227px;
    }

    .onechair-card::after{
        width:37px;
        height:37px;
    }

    .onechair-card::after{
        right:16px;
    }

    .card-twochair{
        gap:20px;
        margin-top:32px;
    }

    .cate-txt{
        font-size:1.2rem;
        top:4%;
        padding:3px 36px 0px;
    }

    .cate-img{
        height:431px;
    }
}

@media screen and (min-width:769px) {
    .card-onechair:hover .onechair-img{
        transition:0.3s;
        scale:1.15;
        transform-origin:77% 47%; 
        position: relative;
    }

    .card-onechair:hover .onechair-card{
        background:#3B4043;
    }

    .card-onechair:hover .onechair-head,.card-onechair:hover .onechair-para{
        color:#fff;
    }

    .card-onechair:hover{
        border-left:3px solid #3B4043;
        transition:0s;
    }
    .card-onechair:hover .onechair-card::after{
        background: url(../img/common/footer_arr_green.png) no-repeat;
        width:51px;
        height:51px;
        background-size:100%;
    }
}

@media screen and (max-width:400px) {
    .onechair-head{
        font-size: 1.2rem;
    }
}

.card-fourchair{
    display:grid;
    gap:16px;
    grid-template-columns: auto auto auto auto;
    padding-bottom:69px;
}

.onechair-num.two{
    font-size:2.4rem;
}

.twochair-img{
    max-width:155px;
    width:63%;
    height:155px;
    margin-left:auto;
    padding-bottom:10px;
}

.twochair-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.twochair-head{
    font-size:1.4rem;
    font-weight:700;
    width:170px;
    line-height:1.5;
    padding-bottom: 5px;
}

.twochair-card::after {
    content: "";
    background: url(../img/common/search-circle.png) no-repeat;
    width: 51px;
    position: absolute;
    display: block;
    right: 24px;
    top: 37%;
    height: 51px;
    background-size: 100%;
}

.twochair-card {
    background: #E3E8E4;
    padding: 14px 10px 14px 21px;
    color: #5F5F5F;
    position: relative;
    padding-top:12px;
}
.twochair-card.searching{
    padding:14px 10px 11px 21px;
}


.twochair-card.searching::after {
    content: "";
    background: url(../img/common/twochair_arr_pc.png) no-repeat;
    width: 31px;
    position: absolute;
    display: block;
    right: 11px;
    top: auto;
    bottom:12px;
    height: 31px;
    background-size: 100%
}

.twochair-img{
    transition:0.3s;
}

@media screen and (min-width:769px) {
    .card-onechair:hover .twochair-img{
        transition:0.3s;
        scale:1.15;
        transform-origin:77% 47%; 
        position: relative;
    }
    
    .card-onechair:hover .twochair-card{
        background: #3B4043;
    }
    
    .card-onechair:hover .twochair-card.searching::after{
        background: url(../img/common/footer_arr_green.png) no-repeat;
        width: 31px;
        height: 31px;
        background-size: 100%;
    }

    .card-onechair:hover .twochair-head, .card-onechair:hover .onechair-para {
        color: #fff;
    }
}


@media screen and (max-width: 1060px) {
    .card-fourchair{
        grid-template-columns:auto auto auto;
    }
}




@media screen and (max-width:768px) {
    .recommend-container{
        padding:0px 36px;
    }
    .onechair-card::after{
        background:url(../img/common/no_border_sp.png);
        width:37px;
        height:37px;
        background-size:100%;
    }
    .card-fourchair{
        grid-template-columns:auto auto;
        gap:10px;
    }

    .card-fourchair .onechair-para{
        padding-right:0px;
    }
    .onechair-para{
        width:100%;
        padding-right:65px;
        max-width:100%;
    }
    .twochair-card.searching .onechair-para{
        max-width: 100%;
        position: relative;
        top: 0%;
        width: 100%;
        padding-bottom:10px;
    }

    .twochair-head{
        width:100%;
        padding-bottom: 8px;
    }

    .twochair-card.searching::after{
        content: "";
        background: url(../img/common/twochair_arr_sp.png) no-repeat;
        width: 18px;
        position: relative;
        display: block;
        left: 50%;
        transform: translateX(-50%);
        top: 0%;
        height: 18px;
        background-size: 100%;
        padding:10px 0px;
        bottom:0px;
    }

    .twochair-img{
        max-width:130px;
        width:84%;
        height: 135px;
        margin:0 auto;
        padding-bottom:0px;
    }

    .twochair-card.searching{
        padding:8px;
    }

    .onechair-card{
        padding:13px;
    }

    .onechair-num.two{
        font-size:1.8rem;
    }

    .twochair-head{
        font-size:1.2rem;
    }
}


.choose-txt{
    position: relative;
    font-size:1.8rem;
    font-weight:700;
    line-height:1.5;
    height:154px;
}

.choose-txt::before{
    content:"";
    width:154px;
    height:154px;
    display:block;
    background: #E3E8E4;
    position: absolute;
    z-index:-1;
}

.cho-txt {
    position: relative;
    max-width: 239px;
    margin-left: auto;
    top: 86.5%;
    transform: translateY(-86.5%);
    width: 100%;
    border-bottom: 1px solid #3B4043;
}
.choose-container{
    display: grid;
    grid-template-columns:3.24fr 2.4fr 3.27fr;
    margin-top:75px;
    max-width:919px;
    gap:20px;
    border-bottom:1px solid #E3E8E4;
    padding-bottom:26px;
}



.choose-img{
    max-width:239px;
    width:100%;
    margin:0 auto;
}


.choose-para{
    font-size:1.4rem;
    line-height:1.57;
    font-weight:400;
}

.choose-btn{
    padding:15.5px 39px 15.5px 18px;
    border:1px solid #3B4043;
    width:fit-content;
    border-radius: 26px;
    position: relative;
    margin-top:60px;
    margin-left:auto;
    cursor: pointer;
    font-size:1.2rem;
}

.choose-btn::after{
    content: "";
    position: absolute;
    background: url(../img/common/arrow.png) no-repeat;
    width: 8.13px;
    height: 6.7px;
    right: 21px;
    top: 50%;
    transform: translate(-5%, -50%);
    background-size: 100%;
}

.main-choose-container{
    max-width: 1045px;
    padding: 0px 20px;
    margin: 0 auto;
}

.main-choose-container:last-child{
        padding-bottom:130px;
    }

@media screen and (min-width:769px) {
    .choose-btn:hover{
        background-color: #3B4043;
        color:#fff;
    }

    .choose-btn:hover::after{
        background:url(../img/common/arrow_white.png) no-repeat;
        width: 8.13px;
        height: 6.7px;
        right: 21px;
        top: 50%;
        transform: translate(-5%, -50%);
        background-size: 100%;
    }
}

@media screen and (max-width:768px) {
    .choose-container{
        grid-template-areas:"a b d" "c c c" ;
        grid-template-columns:none;
        position: relative;
        gap:0px;
        margin-top:0px;
        padding-bottom:0px;
        border:none;
    }

    .main-choose-container{
        padding:0px 36px;
    }

    .main-choose-container:last-child{
        padding-bottom:69px;
    }

    .main-choose-container:last-child .choose-container:last-child{
        border-bottom:1px solid #3B4043;
    }

    .choose-txt{
        background: linear-gradient(to right, #E3E8E4 41px, rgba(255, 255, 255, 0) 41px);
        grid-area:a;
        height:100%;
    }

    .cho-txt{
        left:12px;
        font-size:1.4rem;
        border-bottom:none;
        top:50%;
        transform:translateY(-50%);
    }

    .choose-img{
        grid-area:b;
        width:91px;
        height:91px;
    }

    .according-container{
        position: relative;
        grid-area:d;
    }

    .according-icon{
        grid-area: d;
        top: 50%;
        position: absolute;
        cursor: pointer;
        transform: translateY(-50%);
        width:20px;
        height:20px;
        right:10px;
    }

    .according-icon::after{
        content: "";
        position: absolute;
        width: 20px;
        height: 1px;
        background-color: #36CBDA;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition:0.3s;
    }

    .according-icon::before{
        content: "";
        position: absolute;
        width: 1px;
        height: 20px;
        background-color: #36CBDA;
        top: 50%;
        left: 50%;
        transition:0.3s;
        transform: translate(-50%, -50%);
        transition:0.3s;
    }

    .according-icon.animation-plus::before{
        top: 3%;
        transform: rotate(90deg);
        transition:0.3s;
    }

    .according-icon.animation-plus::after{
        display:none;
        transition:0.3s;
    }

    .choose-para{
        grid-area:c;
        font-size:1.2rem;
        height:0px;
        opacity:0;
        transition:height 0.3s ease;
    }

    .choose-para.expanded{
        opacity:1;
        padding-top: 8px;
        margin-bottom: 28px;
        border-top: 1px solid #E3E8E4;
        transition: all 0.3s ease;
    }

    .choose-para.expanded .choose-btn{
        margin: 24px auto 0;
    }

    .choose-txt::before{
        display:none;
    }

    .choose-container{
        border-top:1px solid #3B4043;
    }

    .cho-txt::after {
        display:none;
    }

    .choose-btn{
        margin:24px auto ;
        padding:11px 32px 12px 18px;
    }
}

@media screen and (max-width:585px) {
    .choose-container{
        grid-template-areas:"a a a a b d" "c c c c c c" ;
        grid-template-columns:none;
        position: relative;
        gap:0px;
        margin-top:0px;
    }

    .cho-txt{
        margin-left:0px;
    }
}

@media screen and (max-width: 360px) {
    .cho-txt {
        left: 12px;
        font-size: 1.1rem;
    }

    .choose-container{
        grid-template-areas:
        "a a a a a b d"
        "c c c c c c c";
    }
}

.choose-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
}

.choose-grid .choose-container{
    grid-template-columns:1fr;
    position: relative;
}

.choose-grid .cho-txt{
    bottom:33px;
}

.choose-grid .choose-para{
    position: relative;
    padding-bottom:78px;
}

.choose-grid .choose-btn{
    bottom:0px;
    position: absolute;
   right:0px;
}

@media screen and (max-width:1024px) {
    .choose-grid .cho-txt{
        max-width:189px;
    }
}

@media screen and (max-width:768px) {
    .choose-grid {
        grid-template-columns: 1fr;
        gap:0px;
      }

      .choose-grid .cho-txt{
        max-width:100%;
      }
      
      .choose-grid .choose-container{
          grid-template-columns: none;
      }

      .choose-grid .choose-btn {
        bottom: auto;
        position: relative;
        right: 0px;
    }

    .choose-grid .choose-para{
        padding-bottom:0px;
    }
}

.item-container.category{
    gap:16px;
}

.item-container.category .item-card{
    width: calc((100% - 32px) / 3);
}

.category-head{
    font-size:2.4rem;
    font-weight:700;
    line-height:1.5;
    padding-top:20px;
    border-top:1px solid #707070;
    text-align: center;
}

@media screen and (max-width:1000px) {
    .item-container.category .item-card{
        width:calc((100% - 16px) / 2);
    }
    .item-container.category{
        justify-content: start;
        margin:0 auto;
    }
}

@media screen and (max-width:768px) {
    .item-container.category{
        gap: 20px;
        padding-top:0px;
    }

    .item-container.category .item-card img{
        height:120px;
    }

    .item-container.category .item-card{
        width:100%;
    }

    .item-container.category .item-card-one::before {
        white-space: pre-line;
        position: relative;
        background-color: rgba(0, 0, 0, 0.64);
        max-width: 123px;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 4px;
        display: flex;
        justify-content: start;
        padding-left: 14px;
        align-items: center;
        transition: 0.3s;
        color: #ffffff;
        line-height: 1.5;
        font-weight: 700;
    }

    .item-container.category .item-card-one::after {
        content: "";
        position: absolute;
        display: block;
        background: url(../img/product/item_btn.png);
        width: 37px;
        top: 50%;
        transform: translateY(-50%);
        background-size: 100%;
        height: 37px;
        right: 11px;
        left:auto;
    }

    .item-container.category .item-card-one{
        max-width:100%;
    }

    .category-head{
     font-size:1.4rem;
     padding-top:6px;
     padding-bottom:27px;
    }
}

.pro-cate-header{
    font-size:1.6rem;
    font-weight:700;
    line-height:1.5;
    text-align: start;
    color:#707F89;
}

.pro-cate{
    border-top:1px solid #707070;
    padding-top:8px;
}


.cate-grid{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top:5px;
}

.cate-grid a{
    font-size:1.2rem;
    color:#707F89;
    padding-bottom:2px;
    width:fit-content;
    /* border-bottom:1px solid #707F89; */
    font-weight:500;
    text-decoration: underline;
    text-underline-offset: 1px;
}

.cate-grid a:hover {
    color:#5A5FED;
}

.cate-contain{
    padding-top:31px;
}

.cate-contain.first{
    padding-top:16px;
}
@media screen and (max-width:768px) {
    .pro-cate-header{
        font-size:1.3rem;
        font-weight:700;
        line-height:1.4;
        text-align: start;
        color:#3B4043;
    }
    .cate-grid{
       grid-template-columns: repeat(2, 1fr); 
       margin-top:15px;
       gap:16px;
    }

    .cate-grid a{
        margin-left:23px;
        color: #3B4043;
    }

    .cate-contain{
        padding-top:24px;
    }
    .cate-contain.first{
        padding-top:22px;
    }

    .pro-cate{
        padding-top:12px;
    }
}

@media screen and (max-width:353px) {
    .cate-grid a{
        font-size:1rem;
    }
}

@media screen and (max-width:330px) {
    .bread-crumb-link{
        font-size:1.1rem;
    }
}

/* ===============================
page 03  search-category (商品カテゴリーから探した場合)  End
=============================== */

/* ================================
page 10 news-detail (新着情報_ 詳細記事) start
================================== */
.news-detail-container {
    max-width: 834px;
    margin: 0 auto;
    padding: 85px 0 152px;
}

.ndetail-date-cate {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 23px;
}

.ndetail-date {
    font-family: "Montserrat", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #98A6B5;
}

.ndetail-cate {
    font-size: 1.2rem;
    color: #5F5F5F;
    padding: 2px 22px;
    border: 1px solid #707070;
}

.news-detail {
    color: #3B4043;
    margin-bottom: 152px;
}

.news-detail h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 13px;
}

.news-detail p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    margin: 13px 0 57px;
}

.news-detail .img-two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.news-detail img {
    width: 100%;
    max-width: 409px;
    margin: 20px auto;
}

.news-detail .img-two-column img {
    width: calc((100% - 16px)/2);
    margin: 0 auto;
    max-height: 235px;
    object-fit: contain;
}

.return-detail-btn {
    width: 420px;
    height: 73px;
    border-radius: 8px;
    background: #5F5F5F;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.return-detail-btn::after {
    content: "";
    background: url(/assets/img/common/circle-arrow.png) no-repeat;
    background-size: contain;
    width: 51px;
    height: 51px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;
}

@media screen and (max-width: 768px) {
    .news-detail-container {
        padding: 50px 0 100px;
    }

    .news-detail {
        margin-bottom: 100px;
    }

    .news-detail h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .news-detail p {
        font-size: 1.4rem;
        margin: 20px 0 30px;
    }

    .news-detail .img-two-column {
        flex-direction: column;
        gap: 20px;
    }

    .news-detail .img-two-column img {
        width: 100%;
        max-width: 409px;
    }

    .return-detail-btn {
        font-size: 1.6rem;
        width: 100%;
        max-width: 301px;
        justify-content: start;
        padding-left: 46px;
    }

    .return-detail-btn::after {
        right: 15px;
    }
}

@media screen and (max-width: 370px) {
    .return-detail-btn {
        padding-left: 25px;
    }
}
/* ================================
page 10 news-detail (新着情報_ 詳細記事) end
================================== */


/* ================================
page 16 feature (特集一覧) start
================================== */

.feature-mv-container{
    width: 100%;
}

.feature-mv-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-container{
    padding: 100px 0px 135px;
}

.news-header{
    width: 100%;
    height: 45px;
    border-radius: 4px;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    background-color: #3B4043;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 44px;
}

.news-boxes{
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    gap: 43px;
}

.news-box{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
    border-right: 5px solid #ACACAC;
    position: relative;
    padding-right: 96px;
}

.news-box::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 18px;
    width: 51px;
    height: 51px;
    background: url(../img/common/card_design_four_arrow.png) no-repeat;
    background-position: center;
    background-size: contain;
}

.news-img-box{
    width: 409px;
    max-height: 230px;
}

.news-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-content-box{
    display: grid;
    grid-template-columns: auto;
}

.news-content-header{
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 700;
    color: #3B4043;
}

.news-content-text-box{
    font-size: 1.6rem;
    line-height: 1.875;
    margin: 15px 0px 24px;
    color: #3B4043;
}

.news-date{
    display: flex;
    gap: 19px;
    justify-content: start;
    align-items: center;
}

.news-date-text{
    font-size: 1.2rem;
    font-weight: 400;
    color: #5F5F5F;
    margin-top: 3px;
}

.news-time{
    font-size: 1.8rem;
    font-weight: 700;
    color: #98A6B5;
    font-family: "Montserrat", sans-serif;
}

.back-number-container{
    border: 1px solid #3B4043;
    border-radius: 4px;
    margin-bottom: 165px;
}

.bn-header{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: #3B4043;
    line-height: 1.5;
    border-bottom: 1px solid #707070;
    padding: 4px 0px 4px;
}

.bn-boxes{
    height: 591px;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 48px;
    row-gap: 59px;
    padding: 49px 47px 0px;
    overflow-y: auto;
}

.bn-boxes::-webkit-scrollbar {
    width: 10px;
}

.bn-boxes::-webkit-scrollbar-track {
    background: #E3E3E3;
    border-radius: 6px;
}

.bn-boxes::-webkit-scrollbar-thumb {
    background-color: #707070;
    border-radius: 4px;
}

.bn-content-header{
    font-size: 1.6rem;
    line-height: 1.375;
}

.bn-img{
    width: 193px;
    max-height: 115px;
}

.bn-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bn-box{
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
}

.feature-footer-cards{
    margin-top: 57px;
    margin-bottom: 108px;
}

@media screen and (max-width: 1000px) {
    .news-box{
        padding-right: 85px;
    }

    .news-img-box{
        width: 350px;
    }

    .bn-boxes{
        padding: 49px 20px 0px;
        column-gap: 20px;
    }

    .bn-img{
        width: 100%;
    }

    .bn-content{
        width: 160px;
    }
    
}

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

    .news-container{
        padding: 50px 0px 74px;
    }

    .news-boxes{
        gap: 60px;
    }

    .news-box{
        grid-template-columns: auto;
        border-right: none;
        border-bottom: 5px solid #ACACAC;
        padding-right: 0;
        padding-bottom: 86px;
        gap: 26px;
    }

    .news-header{
        margin-bottom: 25px;
        font-size: 1.8rem;
    }

    .news-box::after{
        top: unset;
        right: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }

    .news-img-box{
        width: 100%;
        max-width: 100%;
        max-height: unset;
    }

    .news-content-header{
        padding-right: 0;
        font-size: 1.6rem;
    }

    .news-content-text-box{
        font-size: 1.4rem;
        margin: 13px 0px 16px;
    }

    .back-number-container{
        margin-bottom: 92px;
    }

    .feature-footer-cards{
        margin-top: 12px;
        margin-bottom: 100px;
    }

    .bn-header{
        font-size: 1.8rem;
    }

    .bn-boxes{
        grid-template-columns: auto;
        padding: 24px 42px 0px;
        gap: 30px;
    }

    .bn-box{
        grid-template-columns: auto;
    }

    .bn-img{
        width: 100%;
        max-width: 100%;
        max-height: unset;
    }

    .bn-content-header{
        margin-bottom: 17px;
    }

    .bn-content{
        width: 100%;
    }
    
}

@media screen and (max-width: 375px){
    .bn-boxes{
        padding: 24px 20px 0px;
    }
}

/* ================================
page 16 feature (特集一覧) end
================================== */

/* ================================
page 17 feature details (特集_ 詳細記事) start
================================== */

.features-detail-container {
    max-width: 834px;
    margin: 0 auto;
    padding: 85px 0 152px;
}

.feature-date-cate {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 23px;
}

.feature-date {
    font-family: "Montserrat", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #98A6B5;
}

.feature-cate {
    font-size: 1.2rem;
    color: #5F5F5F;
    padding: 2px 22px;
    border: 1px solid #707070;
}

.features-detail {
    color: #3B4043;
    margin-bottom: 152px;
}

.features-detail h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 13px;
}

.features-detail p {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    margin: 13px 0 57px;
}

.features-detail h3{
    margin-top: 57px;
    background-color: #E3E8E4;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
    padding: 12px 15px 10px;
}

.features-detail .img-two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.features-detail img {
    width: 100%;
    max-width: 409px;
    margin: 20px auto;
}

.features-detail .img-two-column img {
    width: calc((100% - 16px)/2);
    margin: 0 auto;
}

.feature-detail-btn {
    width: 420px;
    height: 73px;
    border-radius: 8px;
    background: #5F5F5F;
    color: #FFFFFF;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.feature-detail-btn::after {
    content: "";
    background: url(/assets/img/common/circle-arrow.png) no-repeat;
    background-size: contain;
    width: 51px;
    height: 51px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;
}

.img-one-column{
    display: flex;
    gap: 16px;
    margin: 16px 0 65px;
}

.img-one-column img{
    width: 100%;
    max-width: 324px;
    margin: 0;
}

.img-one-column p{
    width: 100%;
    max-width: 494px;
    font-size: 1.6rem;
    color: #3B4043;
    line-height: 1.875;
    margin: 0;
}

.img-one-box{
    width: 324px;
    height: 189px;
}

.img-one-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .features-detail-container {
        padding: 50px 0 100px;
    }

    .features-detail {
        margin-bottom: 100px;
    }

    .features-detail h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .features-detail h3 {
        margin-top: 67px;
        font-size: 1.6rem;
    }


    .features-detail p {
        font-size: 1.4rem;
        margin: 20px 0 30px;
    }

    .features-detail .img-two-column {
        flex-direction: column;
        gap: 20px;
    }

    .features-detail .img-two-column img {
        width: 100%;
        max-width: 409px;
    }

    .feature-detail-btn {
        font-size: 1.6rem;
        width: 100%;
        max-width: 301px;
        justify-content: start;
        padding-left: 46px;
    }

    .feature-detail-btn::after {
        right: 15px;
    }

    .img-one-column{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0px;
        margin: 16px 0 93px;
    }

    .img-one-box img{
        margin: 0 auto;
    }

    .img-one-box{
        width: 100%;
    }

    .img-one-column p{
        margin: 0;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 370px) {
    .feature-detail-btn {
        padding-left: 25px;
    }
}

/* ================================
page 17 feature details (特集_ 詳細記事) end
================================== */

/* ================================
page 05 search-shape-function (形状・機能から探した場合) start
================================== */

.shape-main{
    display:grid;
    margin-top:27px;
    gap:40px;
    grid-template-areas: 
    "shape-left shape-right"
    "shape-select shape-right";
}

.shape-select{
    grid-area: shape-select;
}

.shape-select-ttl{
    position: relative;
    padding-left: 23px;
    font-size: 1.8rem;
}

.shape-select-ttl::before{
    content: "";
    width: 18px;
    height: 18px;
    background: url(../img/product/size_before.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.shape-select-box{
    display: flex;
    row-gap: 10px;
    column-gap: 5px;
    padding-top: 10px;
    max-width: 500px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.shape-table-sp{
  display: none;
}

.shape-select-inner{
  max-width: 120px;
  width: 100%;
  padding : 7px 10px;
  border: 1px solid #3B4043;
  color: #3B4043;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.shape-select-inner:hover{
  color: #fff;
  background-color: #3B4043;
}


.shape-head{
    font-size:3rem;
    line-height:1.6;
    font-family: "Noto Sans JP", sans-serif;
    font-weight:700;
}

.shape-para{
    font-size:1.6rem;
    line-height:1.8;
    margin-top:26px;
   
}

.shape-left{
    grid-area: shape-left;
    max-width:100%;
    width:100%;
}

.shape-right{
    grid-area: shape-right;
    width: 100%;
    max-width: 439px;
    height: 364px;

}

.shape-right img{
    width:100%;
    object-fit: contain;
    height:100%;
}

.shape-btn{
    padding:22px 104px 25px;
    font-weight:700;
    font-size:1.8rem;
    border-radius:8px;
    background-color: #5F5F5F;
    color:#ffffff;
    width: fit-content;
    cursor: pointer;
    position: relative;
    margin-bottom:67px;
}


.shape-btn::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 51px;
    height: 51px;
    background: url(../img/common/footer_arr.png) no-repeat;
    background-size: 100% 100%;
    
}

.shape-btn.choice-btn:hover{
    width: 352px;
    padding: 22px 20px 25px;
}

@media screen and (max-width:768px) {
    .shape-main{
      gap:15px;
      grid-template-areas: 
        "shape-left "
        "shape-right"
        "shape-select";
    }

    .shape-select-ttl{
      font-size: 1.3rem;
      padding-left: 16px;
    }


    .shape-select-box{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 0;
      max-width: 100%;
      margin-bottom: 0;
      border: 1px solid #3B4043;
      border-bottom: unset;
      border-right: unset;
      padding: 0;
      margin-top: 10px;
    }

    .shape-select-ttl::before{
      width: 13px;
      height: 13px;
    }

    .shape-select-inner{
      max-width: 100%;
      font-size: 1.1rem;
      padding: 5px;
      position: relative;
      border-left: unset;
      border-top: unset;
    }

    .shape-select-inner::before{
      content: "";
      width: 5px;
      height: 10px;
      background: url(../img/product/size_arrow.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%);
    }
  
    .shape-left {
    width: 100%;
    }

    .shape-right{
        width:100%;
        margin-top:-4px;
        max-width: 262px;
        height: 262px;
        margin:0 auto;
    }

    .shape-right img {
    width: 100%;
}

.shape-btn{
    margin: 20px auto 40.5px;
    font-size:1.3rem;
    padding:18.209px 99px;
}

.shape-btn::after{
    width:37px;
    height:37px;
}
.shape-head{
    font-size: 1.8rem;
    text-align: center;
    margin-top:14.5px;
}
.shape-para{
    font-size:1.2rem;
    margin-top: 12px;
}
}

@media screen and (max-width:374px) {
    .shape-btn{
        padding:18.209px 70px 18.209px 49px;
    }

    .shape-select-inner{
      font-size: 1rem;
    }
}

@media screen and (max-width:350px) {
  .shape-select-box{
              grid-template-columns: repeat(2, 1fr);
    }
}

.feature-fun{
    font-size:2.4rem;
    font-weight:700;
    line-height:1.5;
    padding-bottom:5px;
    border-bottom:1px solid #707070;
}

.feature-fun-container{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom: 60px;
}

.funcad-title{
    font-size:1.8rem;
    font-weight:700;
    line-height:1.5;
    margin-top:12px;
}

.funcad-para{
    font-size:1.4rem;
    line-height:1.5;
    margin-top:7px;
}

.function-cad{
    width:calc((100% - 16px)/2);
}

@media screen and (max-width:768px) {
    .feature-fun{
        font-size:1.4rem;
        font-weight:700;
        line-height:1.5;
    }

    .function-cad{
     width:100%;
    }

    .funcad-title{
        font-size:1.3rem;
        margin-top:16px;
        margin-bottom:10px;
    }

    .funcad-para{
        font-size:1.2rem;
        margin-top:0px;
    }

    .feature-fun-container{
        gap:37px;
    }

}

.card-fourchair.three{
    grid-template-columns:auto auto auto;
}

.other-recommed{
    font-size:2.4rem;
    line-height:1.5;
    font-weight:700;
    padding-top:16px;
    padding-bottom:49px;
}

.other-card-contain{
    background: #E3E8E4;
    padding-bottom:90px;
}

.recommend-container.search-shape .twochair-head{
    width:246px;
}

.recommend-container.search-shape .twochair-img{
   margin:0 auto;
}

@media screen and (max-width: 920px) {
    .card-fourchair.three{
        grid-template-columns:auto auto ;
    }
}

@media screen and (max-width:768px) {
    .card-fourchair.three{
        grid-template-columns:auto auto ;
    }
    .recommend-container.search-shape .twochair-head{
        max-width:100%;
        width:100%;
    }

    .recommend-container.search-shape .twochair-head{
        max-width:100%;
        width:100%;
    }

    .other-recommed{
        font-size:1.4rem;
        padding-top: 23px;
        padding-bottom:46px;
    }
}

/* ================================
page 05 search-shape-function (形状・機能から探した場合) end
================================== */

/* ================================
page 07 product detail(商品詳細) start
================================== */

.model-grid-container{
    display: grid;
    grid-template-areas: 
    "model-grid-ttl model-grid-ttl model-grid-three"
    "model-grid-one model-grid-two model-grid-three"
    "model-grid-four model-grid-two model-grid-five";
    column-gap: 16px;
    margin: 20px 0;
}
.model-grid-one{
    width: 324px;
    grid-area: model-grid-one;
}
.pipe-chair-ttl{
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    grid-area: model-grid-ttl;
}
.model-num{
    display: block;
    width: 100%;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    border-bottom: 1px solid #fff;
    padding-bottom: 17px;
    margin-bottom: 2px;
}
.model-num-div{
    max-width: 324px;
    width: 100%;
    padding: 21px 12px 4px;
    background-color: #3B4043;
    margin-top: -7px;
}
.model-price{
    font-size: 1.4rem;
    line-height: 1.7;
    color: #fff;
}
.tax{
    font-size: 1rem;
}
.model-para{
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 17px 0 20px;
}
.model-detail-link-div{
    max-width: 324px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    border-bottom: 1px solid #707070;
    padding-bottom: 20px;
    margin-bottom: 8px;
}
.model-detail-link{
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #3B4043;
    background-color: #E3E8E4;
    padding: 3px 0 4px;
    max-width: 154px;
    width: 100%;
    text-align: center;
}
.model-size{
    font-size: 1.4rem;
    line-height: 1.6;
    margin-left: 6px;
}
.model-grid-two{
    width: 409px;
    height: 409px;
    grid-area: model-grid-two;
    margin-top: 55px;
}
.model-grid-two img{
    width: 100%;
    height: 100%;
}
.model-detail-container{
    max-width: 240px;
    width: 100%;
}
.detail-chair-sm-div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 11px;
    row-gap: 12px;
    margin-bottom: 20px;
}
.model-grid-three{
    width: 240px;
    grid-area: model-grid-three;
    margin-top: 54px;
}
.model-grid-four{
    grid-area: model-grid-four;
}
.model-grid-five{
    grid-area: model-grid-five;
    margin-top: -90px;
}
.detail-chair-sm{
    width: 114px;
    height: 114px;
    border: 1px solid #707070;
    margin-bottom: 0 !important;
}
.detail-chair-sm img{
    width: 100%;
    height: 100%;
}
.catalog-txt{
    font-size: 1.4rem;
    line-height: 1.6;
}
.catalog-page-txt{
    font-size: 1.6rem;
    line-height: 1.6;
    border-bottom: 1px solid #38CADA;
    margin-bottom: 20px;
    width: fit-content;
    padding-bottom: 3px;
}
.model-btn,.model-btn-blue{
    max-width: 240px;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background-color: #36CBDA;
    border-radius: 24px;
    padding: 14px 18px;
    position: relative;
}
.model-btn-blue{
    background-color: #5A5FED;
    margin-top: 17px;
}
.model-btn::after,.model-btn-blue::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: url(../img/common/circle-arrow.png) no-repeat;
    background-size: 100% 100%;
}
.model-tel,.model-fax{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    font-family: "Montserrat", sans-serif;
    border-bottom: 1px solid #3B4043;
    padding-bottom: 3px;
    width: fit-content;
    letter-spacing: 0.8px;
}
.model-fax{
    border-bottom: unset;
    padding-top: 5px;
}
.model-tel-num,.model-fax-num{
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.2;
    margin-left: 17px;
}

.main-swiper {
  height: 409px;
}

.thumbs-swiper {
  height: 240px;
  overflow: hidden;
 transform: none !important;
}

.thumbs-swiper,
.swiper-wrapper {
    transform: none !important;
}


.main-swiper img,
.thumbs-swiper img {
  width: 100%;
  height: auto;
}

.thumbs-swiper img{
  height: 100%;
  cursor: pointer;
}

.detail-img-h{
  height: 113px !important;
}

.other-pro-details-container{
  background-color: #E3E8E4;
  padding: 16px 0 20px;
}

.other-pro-details{
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.other-pro-details-sub{
  border-bottom: 10px solid #E3E8E4;
  margin-bottom: 112px;
}

.other-pro-details-div{
  max-width: 910px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  margin: 26px auto 32px;
}

.other-pro-d-img-div{
  margin: 0 auto;
  text-align: center;
}

.other-pro-d-img{
  width: 166px;
  height: 151px;
}

.other-pro-d-img img{
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1100px){
    .model-grid-one,.model-grid-four{
        width: 300px;
    }
    .model-grid-two{
        width: 309px;
        height: 309px;
    }
}
@media screen and (max-width: 1000px){
    .model-grid-container{
        grid-template-areas: 
        "model-grid-ttl"
        "model-grid-one"
        "model-grid-two"
        "model-grid-three"
        "model-grid-four"
        "model-grid-five";
    }
    .model-grid-one,.model-grid-three{
        width: 100%;
    }

    .model-grid-three{
      margin-top: 8px;
    }

    .pipe-chair-ttl{
        font-size: 1.8rem;
        margin: 20px 0 10px 0;
    }
    .model-num-div{
        margin-top: 2px;
        padding: 7px 7px 0px;
    }
    .model-num{
        font-size: 1.6rem;
        padding-bottom: 8px;
    }
    .model-price{
        font-size: 1.3rem;
    }
    .model-para{
        font-size: 1.2rem;
        line-height: 1.8;
        margin: 10px 0 0px;
    }
    .model-grid-two {
        width: 226px;
        height: 226px;
        margin: 0 auto;
    }
    .detail-chair-sm-div{
        max-width: 302px;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 10px;
        margin: 0 auto 20px;
    }
    .detail-chair-sm {
        width: 68px;
        height: 68px !important;
        margin-bottom: 0 !important;
    }
    .model-grid-four{
        width: 302px;
        margin: 0 auto;
    }
    .model-grid-five{
        width: 302px;
        margin: 26px auto;
    }
    .model-detail-link-div{
        column-gap: 10px;
        margin: 0 auto 10px;
        padding-bottom: 18px;
    }
    .pipe-chair-div{
        max-width: 324px;
        width: 100%;
        margin: 0 auto;
    }
    .model-size{
        margin-left: 0;
    }
    .model-btn, .model-btn-blue{
        max-width: 302px;
        width: 100%;
        margin: 0 auto;
        font-size: 1.3rem;
        text-align: center;
    }
    .model-btn-blue{
        margin-top: 17px;
    }
    .model-tel-div{
        display: flex;
    }
    .model-tel-num, .model-fax-num{
        display: block;
        margin-left: 0;
        font-size: 1.6rem;
    }
    .model-tel{
        border-bottom: unset;
        border-right: 1px solid #3B4043;
        padding-bottom: 0;
        padding-right: 31px;
    }
    .model-fax{
        padding: 0 0 0 8px;
    }
    .catalog-txt{
        letter-spacing: -0.1px;
    }
    .main-swiper,.thumbs-swiper {
    height: auto;
    }
    .other-pro-details-div{
      grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 768px){
    .model-grid-container{
      margin-top: 10px;
      margin-bottom: 16px;
    }
    .other-pro-details-container{
      padding: 12px 0 10px;
    }
    .other-pro-details-sub{
      border-bottom: 7px solid #E3E8E4;
      margin-bottom: 43px;
    }
    .other-pro-details-div {
      column-gap: 11px;
      row-gap: 25px;
      margin-bottom: 36px;
    }
    .other-pro-details{
      font-size: 1.4rem;
    }
    .other-pro-d-img {
      width: 93px;
      height: 88px;
    }
    .tax{
      font-size: 1.3rem;
    }
    .catalog-page-txt{
      margin-top: 12px;
    }
    .model-btn,.model-btn-blue{
      padding: 15px 18px;
    }
    .model-num-div{
      padding-top: 5px;
    }
    .model-num{
      padding-bottom: 7px;
    }
}

@media screen and (max-width: 374px){
  .model-grid-four,.model-grid-five{
    width: 100%;
  }
  .detail-chair-sm-div{
    column-gap: 5px;
  }
  .detail-chair-sm {
    width: 58px;
    height: 58px !important;
  }
  .model-tel{
    padding-right: 18px;
  }
  .other-pro-d-img {
        width: 73px;
        height: 77px;
  }
}
/* ================================
page 07 product detail(商品詳細) end
================================== */

/* ================================
page 14 rental flow (家具レンタルの流れ) start
================================== */
.rental-flow-mv-img{
    width: 100%;
}

.rental-flow-mv-img img{
    width: 100%;
}

.rental-flow-boxes{
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 77px;
}

.rental-flow-box{
    display: grid;
    grid-template-columns: 124px 1fr;
    align-items: center;
    gap: 31px;
}

.rf-img-box{
    width: 80px;
    height: 66px;
    margin-left: auto;
}

.rf-img-box.contactbox{
  width: 74px;
  height: 56px;
}

.rf-img-box.messagebox{
  width: 72px;
  height: 53px;
}

.rf-img-box.receivebox{
  width: 77px;
  height: 60px;
}

.rf-img-box.returnbox{
  width: 86px;
  height: 48px;
}

.rf-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rf-content-box{
    min-height: 108px;
    display: grid;
    grid-template-columns: 285px 1fr;
    align-items: center;
    gap: 16px;
    border: 1px solid #cccccc;
    border-radius: 9px;
    position: relative;
}

.rf-gray-box{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    background-color: #E3E8E4;
    border-radius: 9px 0px 0px 9px;
    padding: 14px 0px 21px;
}

.rf-content-box::before{
    content: "";
    width: 30px;
    height: 18px;
    position: absolute;
    bottom: -33px;
    left: 142px;
    transform: translateX(-50%);
    background: url(../img/rental-flow/rental_flow_polygon.png) no-repeat;
    background-size: contain;
    background-position: center;    
}

.rental-flow-box:last-child .rf-content-box::before{
    content: none;
}

.rf-white-box{
    padding: 12px 0px 16px;
}

.rf-message-box{
    width: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    border-left: 1px solid #36CCDA;
    padding: 0px 20px;
}

.rf-step{
    font-size: 2rem;
    font-weight: 700;
    color: #35CCD9;
}

.rf-label{
    color: #5F5F5F;
    font-size: 2.4rem;
    font-weight: 700;
}

.rental-flow-card-five{
    padding: 57px 0px 152px;
}

.rental-flow-card-two{
    padding-top: 90px;
}

.rental-flow-cont{
    padding: 70px 0px 90px;
}

.rental-flow-ttl{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: #3B4043;
    padding-left: 32px;
}

.rental-flow-message{
    font-size: 1.4rem;
    color: #3B4043;
    line-height: 1.57;
    font-weight: 400;
}

@media screen and (max-width:768px){
    .rental-flow-cont{
        padding: 26px 0px 106px;
    }
    .rental-flow-ttl{
        font-size: 1.6rem;
        line-height: 1.5;
        padding-left: unset;
    }

    .rental-flow-boxes{
        margin-top: 20px;
        gap: 60px;
    }

    .rental-flow-card-five{
      padding: 12px 0px 100px;
    }

    .rental-flow-box{
        grid-template-columns: 1fr;
        place-items: center;
        gap: 15px;
    }

    .rental-flow-card-two{
        padding-top: 0px;
    }

    .rf-content-box{
        width: 100%;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .rf-label{
        font-size: 1.6rem;
    }

    .rf-gray-box{
        padding: 12px 0px;
        border-radius: 9px 9px 0px 0px;
        gap: 10px;
    }

    .rf-message-box{
        border-top: 1px solid #36CCDA;
        border-left: none;
        padding: 0;
        padding-top: 15px;
        min-height: auto;
    }

    .rf-white-box{
        min-height: 129px;
        border-left: none;
        padding: 0px 20px;
    }

    .rf-content-box::before{
        left: 50%;
        transform: translateX(-50%);
    }
    
    .rf-img-box{
        margin: auto;
    }
    
}

/* ================================
page 14 rental flow (家具レンタルの流れ) end
================================== */

/* ================================
page 04 search-purpose (04_用途から探した場合) start
================================== */

.corporate-container{
    background:#3B4043;
    padding:27px 0px 50px 0px;
}

.corpor-main{
    max-width: 1280px;
    width: 100%;
    padding:0px;
    margin:0 auto;
}

.corporate_head{
    color:#ffffff;
    text-align: center;
    font-size:3.2rem;
    line-height:1.5;
}

.corporate-flex{
    display:flex;
    padding-top:29px;
    gap:16px;
    max-width:1162px;
    margin-left: auto;
}

.corporate-left{
    color: #ffffff;
    font-size:1.6rem;
    line-height:1.8;
    max-width:514px;
    width:100%;
    padding-left:20px;
    position: relative;
}
.corporate-left .corporate-other-link {
  bottom: 0;
  position: absolute;
  color: #fff;
  font-size:1.4rem;
  border-bottom: solid 1px #fff;
  line-height: 2;
  padding-right: 1.5em;
}

.corporate-left .corporate-other-link a {
    color: #fff;
}

.corporate-left .corporate-other-link a::after {
  content: "";
  background: url(../img/common/icon_external.png) no-repeat;
    background-size: auto;
  width: 18px;
  height: 18px;
  position: absolute;
  background-size: 100%;
  top: 50%;
  transform: translate(0px,-50%);
  margin-left:5px;
}

.corporate-right{
    max-width:632px;
    width:100%;
}

@media screen and (max-width:768px) {
    .corporate-flex{
        flex-direction: column;
        padding-top: 16px;
    }

    .corporate-left{
        width:100%;
        font-size:1.2rem;
        padding:0px 36px;
        margin:0 auto;
        max-width:100%;
    }
  
    .corporate-left .corporate-other-link {
        position: relative;
        font-size: 1.1rem;
        margin-top: 1em;
        width: 194px;
    }
  
    .corporate-left .corporate-other-link.scai_link {
        width: 205px;
    }
  
    .corporate-left .corporate-other-link a:after {
        width: 12px;
        height: 12px;
    }

    .corporate-right{
        max-width:100%;
        width:100%;
    }

    .corporate_head{
        font-size:1.8rem;
    }

    .corporate-container{
        padding:21px 0px 50px ;
    }
}

.corpor-tb{
    max-width:808px;
    width:100%;
    margin:32px auto 0px;
} 

.corpor-tb .th-sub div{
    color:#ffffff;
    text-align: center;
    font-size:1.4rem;
    font-weight:700;
    position: relative;
    cursor: pointer;
    
}

.corpor-tb .th-sub::after{
    content:"";
    background:url(../img/common/down_arr.png) no-repeat;
    width:10px;
    height:5px;
    position: absolute;
    background-size:100%;
    top:50%;
    right: 10px;
    transform: translate(0px,-50%)
}

.corpor-tb .th-sub{
    max-width:202px;
    border-spacing: 0;
    border: 1px solid #ffffff;
    border-collapse: collapse;
    padding: 9.5px 25px 9.5px 15px;
    position: relative;
    border-top:none;
    height: 100%;
    display:flex;
    justify-content: center;
    place-items: center;
    align-self: center;

}
.corpor-tb .th-sub:nth-of-type(n+5) {
    border-left: none;
}
.corpor-tb .th-sub:nth-of-type(-n+4) {
    border-left: none;
    border-top:1px solid #ffffff;
}

.corpor-tb .th-sub:nth-of-type(4n+1) {
    border-left: 1px solid #ffffff;
}

.tr-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);

}

@media screen and (max-width:900px) {
    .corpor-tb a {
        font-size:1.2rem;
    }
}

@media screen and (min-width:769px) {
    .corpor-tb .th-sub:hover {
    background: #ffffff;
    }

    .corpor-tb .th-sub:hover div{
    color: #3B4043;
    }

    .corpor-tb .th-sub:hover::after{
    content:"";
    background:url(../img/common/down_arr_black.png) no-repeat;
    width:10px;
    height:5px;
    position: absolute;
    background-size:100%;
    top:40%;
    right: 10px;
    transform: translate(0px,0%)
}

}

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


.corpor-tb a {
    font-size:1.4rem;
}



.corpor-tb .tr-container{
        display: table-row;
        display: grid;
         grid-template-columns: repeat(2, 1fr);
    }
    
.corpor-tb .th-sub{
        display: table-cell;
        max-width: 100%;
        width: 100%;
    }

    .corpor-tb .th-sub:nth-of-type(-n+4) {
    border-top:none;
}

    .corpor-tb .th-sub:nth-of-type(-n+2) {
    border-left: none;
    border-top: 1px solid #ffffff;
}



.corpor-tb .th-sub:nth-of-type(2n+1) {
    border-left: 1px solid #ffffff;
}


}

@media screen and (max-width:360px) {
    .corpor-tb a{
        font-size:1.1rem;
    }
}

.purpose-card{
    border:1px solid #707070;
    border-radius:6px;
}

.purpose-heading{
    font-size:2.4rem;
    font-weight:700;
    line-height:1.5;
    padding:17px 0px 17px 29px;
    background: #E3E8E4;
    position: relative;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}



.purpose-btn{
    position: absolute;
    background-size:100%;
    width:51px;
    height:51px;
    right:18px;
    top:50%;
    transform:translate(-0px, -50%);
}

.purpose-body{
    display:grid;
    grid-template-areas:
    "a b" 
    "a c";
    gap:32px;
    padding: 29px;
}


.purpose-img-folder{
    grid-area: c;
    display: flex;
    gap:27px;
    margin-top:-14px;
    max-width: 532px;
    width: 100%;
    flex-wrap: wrap;

}

.purpose-para{
    grid-area: b;
    max-width:494px;
    width:100%;
    font-size:1.4rem;
    line-height:1.5;
}

.purpose-big{
    grid-area: a;
    max-width:380px;
    width:100%;
}

.purpose-big img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.purpose-small{
    max-width:110px;
   width:100%;
}

.small-purpose-txt{
    text-align: center;
    font-size:1.2rem;
    font-weight:500;
    color:#707F89;
    text-decoration:underline;
    text-underline-offset: 2px;
}

.purpose-little{
    width:calc((100% - 81px)/4);
}

.sear-pur{
    display: flex;
    flex-direction: column;
    gap:48px;
    padding-bottom:39px;
 }

 .recommend-container.purpose .twochair-img{
    margin: 0 auto;
 }

@media screen and (max-width:768px) {
    .purpose-body{
        grid-template-areas:"b" "a" "c";
        padding:16px 10px 25px;
        gap:16px;
    }

    .sear-pur{
         gap: 20px;
         padding-bottom:20px;
    }

    .purpose-para{
        max-width:100%;
        width:100%;
        font-size:1.2rem;
    }

    .purpose-big{
        max-width:100%;
    }

    .purpose-little{
        width: calc((100% - 38px) / 2);
        margin-top: 10px;
    }

    .purpose-img-folder{
        gap:0px;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
    }

    .purpose-small{
        max-width:100%;
        width:100%;
    }

     .purpose-small img{
        max-width:100%;
        width:100%;
        margin:0 auto;
    }

    .purpose-heading{
        font-size:1.3rem;
            padding: 18px 0px 17px 18px;
    }

    .purpose-btn{
        background-size: 100%;
        width: 37px;
        height: 37px;
        right: 12px;
        top: 50%;
        transform: translate(0px, -50%);
    }

    .small-purpose-txt{
        font-size:1.1rem;
    }
}

@media screen and (max-width:380px) {
    .purpose-small img{
       width:86px;
    }
}


/* ================================
page 04 search-purpose (04_用途から探した場合) end
================================== */

/* ================================
page 23 contact form page (23_お問い合わせフォーム) start
================================== */

.contact-form-page .ttl-green-bg{
    background-color: #5F5F5F;
}

.contact-form-page{
    background-color: #E3E8E4;
}

.form-container{
    padding: 60px 85px 110px;
    margin: 0 auto 50px;
}

.contact-form-page .ttl-green-bg .ttl.company-page-mv{
    color: #fff;
}

.news_page .ttl-green-bg .ttl.company-page-mv{
    color: #3b4043;
}

.form-group{
    display: flex;
    flex-direction: column;
    margin-bottom: 59px;
}

.form-group .form-field{
    margin-top: 24px;
}

.form-group .form-field:focus{
    outline: none;
}

.form-group .form-field.error{
    border: 1px solid rgba(182, 0, 5, 0.1);
    background-color: rgba(182, 0, 5, 0.1);
}

.form-group .form-error-message{
    color: red;
    font-size: 1.4rem;
    margin-top: 10px;
}

.form-group .form-label{
    font-size: 2.1rem;
    font-weight: 700;
}

.form-group .form-field{
    padding: 14px 19px;
    border: 1px solid #CCCCCC;
    border-radius: 7px;
    font-size: 1.6rem;
}

.form-group .form-field::placeholder{
    color: #CCCCCC;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
}

.form-group textarea{
    width: 100%;
    max-width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 7px;
}

.form-group .form-label{
    font-size: 2.1rem;
    font-weight: 700;
}

.language-div .dropdown .dropbtn{
    background-color: #5F5F5F;
}

.form-label-text{
    position: relative;
}

.form-label-text::after{
    content: '必須';
    width: 46px;
    height: auto;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    background-color: #5A5FED;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    right: -58px;
    line-height: 1;
    padding: 4px 0 5.5px 0;
}

.ct-form-back-btn{
    text-align: center;
    margin: auto;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: #3B4043;
    position: relative;
    margin-bottom: 67px;
}

.ct-return-link{
    display: inline;;
    position: relative;
    line-height: 1.9;
}

.ct-return-link::before{
    content: "";
    width: 5px;
    height: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -15px;
    background: url(../img/contact-form/form_arrow.png) no-repeat;
    background-size: contain;
    background-position: center;
}

.ct-submit-btn{
    width: 270px;
    min-height: 73px;
    background-color: #5F5F5F;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    margin: auto;
    position: relative;
}

.ct-submit-btn::after{
    content: "";
    width: 51px;
    height: 51px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    background: url(../img/common/footer_arr.png) no-repeat;
    background-size: contain;
    background-position: center;
}

.check-label{
    font-size: 1.6rem;
    font-weight: 400;
    color: #3B4043;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-group.form-checkbox-group{
    margin-bottom: 66px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.form-checkbox-group .form-error-message{
    width: 100%;
    text-align: center;
}

.submit-btn-group{
    display: flex;
}

.form-checkbox{
    width: 21px;
    height: 21px;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
}

@media screen and (max-width: 768px){
    .form-container{
        padding: 33px 20px 60px;
        margin: 50px auto 40px;
        border-radius: 15px;
    }

    .form-group{
        margin-bottom: 43px;
    }

    .form-group .form-field{
        margin-top: 15px;
        font-size: 1.4rem;
        padding: 15px;
    }

    .ct-form-back-btn{
        margin-bottom: 36px;
    }

    .ct-submit-btn{
        width: 100%;
        padding-left: 0;
        padding-right: 67px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .check-label{
        width: calc(100% - 35px);
        font-size: 1.4rem;
        line-height: 1.785;
    }

    .form-checkbox-group .form-error-message{
        text-align: left;
    }

    .form-group .form-label{
        font-size: 1.8rem;
    }

    .form-group.form-checkbox-group{
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 38px;
    }
}

@media screen and (max-width: 375px){
    .form-container{
        padding: 33px 10px 70px;
    }

    .ct-submit-btn::after{
        width: 37px;
        height: 37px;
    }

    .ct-submit-btn{
        font-size: 1.4rem;
        min-height: 50px;
        
    }
}


/* ================================
page 23 contact form page (23_お問い合わせフォーム) end
================================== */

/* ================================
page 26 catalog form page (26_カタログ請求フォーム) start
================================== */
.catalog-form .form-label-sub{
    font-size: 1.2rem;
    font-weight: 400;
    color: #797979;
    line-height: 1.6;
}


.catalog-form .label-group{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 74px;
    flex-wrap: wrap;
}

.catalog-form .sub-label-group{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

@media screen and (max-width: 768px){
    .catalog-form .label-group{
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 12px;
    }

    .catalog-form .sub-label-group{
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 10px;
    }
    
}
/* ================================
page 26 catalog form page (26_カタログ請求フォーム) end
================================== */

/* ================================
page 25 entry form page (25_応募フォーム) start
================================== */

.entry-input-group {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 56px;
  
  margin-top: 28px;
}

.contact-form-page.entry-form .form-container{
  padding-bottom: 65px;
}

.entry-form .form-group{
  margin-bottom: 52px;
}

.entry-form .form-group.inquiry-group{
  margin-bottom: 76px;
}

.contact-form-page.entry-form .form-group .form-field{
  margin-top: 28px;
}

/* Hide native checkbox */
.entry-form .entry-job-check {
  position: absolute;
  opacity: 0;
}

/* Position label relative so we can add the custom box */
.entry-form .entry-job-label {
  position: relative;
  padding-left: 30px; /* space for checkbox */
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 400;
  color: #3B4043;
  display: inline-block;
}

/* Custom checkbox box */
.entry-form .entry-job-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Custom checkmark when checked */
.entry-form .entry-job-check:checked + .entry-job-label::after {
  content: '';
  position: absolute;
  background: url(../img/entry-form/checkmark.png) no-repeat;
  background-position: center;
  background-size: contain;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 17px;
  border-width: 0 2px 2px 0;
}

.entry-form .custom-upload-box {
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  padding: 6px;
  border-radius: 8px;
  gap: 16px;
}

/* Hide real file input */
.entry-form .file-input-hidden {
  display: none;
}

.entry-form .file-upload-wrapper{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Custom upload button */
.entry-form .file-button {
  background-color: #CCCCCC;
  border: none;
  color: #FFFFFF;
  padding: 8px 11px;
  border-radius: 5px;
  font-size: 1.6rem;
  cursor: pointer;
  white-space: nowrap;
}

/* File name display */
.entry-form .file-display {
  border: none;
  background: transparent;
  color: #CCCCCC;
  font-size: 1.6rem;
  flex: 1;
}

.entry-form .file-display::placeholder{
  color: #CCCCCC;
}

.entry-form .file-display:focus{
  outline: none;
}

@media screen and (max-width: 768px){
  .contact-form-page.entry-form .form-container{
     padding-top: 37px;
     padding-bottom: 69px;
     margin-bottom: 37px;
  }

  .contact-form-page.entry-form .form-group .form-field{
     margin-top: 15px;
  }
  .entry-form .form-group{
    margin-bottom: 45px;
  }

  .entry-form .form-group.inquiry-group{
     margin-bottom: 37px;
  }

  .entry-form .file-upload-wrapper{
    margin-top: 14px;
    gap: 19px;
  }

  .entry-form .entry-input-group{
    gap: 50px;
    margin-top: 15px;
  }

  .entry-form .custom-upload-box{
    flex-wrap: wrap;
    gap: 3px;
  }

  .entry-form .file-button{
    width: 100%;
  }

  .entry-form .file-display{
    padding: 10px;
  }
  
}

@media screen and (max-width: 400px){
  .entry-form .entry-file-group .form-label-text::after{
      left: 0;
      right: unset;
      top: unset;
      bottom: -44px;
  }

  .entry-form .file-upload-wrapper{
    margin-top: 51px;
    gap: 19px;
  }
  
}

@media screen and (max-width: 375px){
  .entry-form .entry-input-group{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  
}


/* ================================
page 25 entry form page (26_応募フォーム) end
================================== */

/* ================================
追加
================================== */
.item-list .ttl-green-bg .ttl.company-page-mv{
    color: #3b4043;
}