@charset "UTF-8";

:root {
  --main-blue: #0078c5;
  --sub-blue: #D9EBF7;
  --sub-blue-40: rgba(217, 235, 247, 0.4); 
  --mk-blue: #123556;
  --text-color: #333333;
  --base-color: #FAFAFA;
  --step-color01: #83CCFE;
  --step-color02: #65BBF6;
  --step-color03: #49ACEF;
  --step-color04: #2D9CE7;
  --step-color05: #178CD7;
  --step-color06: #0E83CE;
  --step-color07: #0078c5;
  --white: #ffffff;
}

/* ==================================
 * 共通のページヘッダー
 * ================================== */
 .page-header-area {
    min-height: 300px;
    /* padding-top: 100px; */
    position: relative; 
    overflow: hidden;
    /* margin-top: 100px; */
}
.page-title {
    position: absolute; 
    z-index: 3;
    top: 50%;
    left: 0;
    width: 100%;
    /* transform: translateY(-10%); */
    transform: translateY(-50%);
    margin-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;
    background-image: none !important; 
    background-size: initial;
}
.page-header-area::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 120, 197, 0.4);
    z-index: 2;
}
.parent-title,
.current-title{
    position: relative;
    z-index: 3;
    color: #fff;
}

.current-title{
    font-size: 1.3rem;
}
.page-title.product-page-title > .title-inner > .current-title:only-child,
.page-title.product-page-title > .title-inner > .parent-title{
    font-size: clamp(26px,4vw,32px); 
}
@media (max-width: 768px) {
    .page-header-area{
        height: 150px;
        min-height: unset;
        padding-top: 0;
        /* margin-top: 50px; */
    }
}
/*各ページタイトル背景*/

/*製品・サービス紹介*/
.page-header-product,
.page-header-partition-curtain,
.page-header-partition-booth,
.page-header-tent-warehouse,
.page-header-awning,
.page-header-sliding-roof-tent,
.page-header-rolling-tent,
.page-header-shutter-net,
.page-header-event-tent,
.page-header-cargo-protection,
.page-header-options-custom{
    background-image: url(../images/images/title-products.jpg);
    background-position: center center;
}
/*業務内容*/
.page-header-service{
    background-image: url(../images/images/title-service.jpg);
    background-position: center center;
    background-size: cover;
}
/*施工実績*/
.page-header-works{
    background-image: url(../images/images/title-works.jpg);
    background-size: cover;
}
/*製品カタログ*/
.page-header-catalog{
    background-image: url(../images/images/title-catalog.jpg);
    background-size: cover;
}

/*採用情報*/
.page-header-recruit{
    background-image: url(../images/images/title-recruit.jpg);
    background-size: cover;
}
.page-header-recruit::before{
    display: none;
}
/*スタッフインタビュー*/
.page-header-interview{
    background-image: url(../images/images/title-recruit-iv.jpg);
    background-size: cover;
}
/*よくある質問*/
.page-header-faq{
    background-image: url(../images/images/title-faq.jpg);
    background-size: cover;
    background-position: center right;
}
.page-header-faq::before{
    display: none;
}
/*プライバシーポリシー*/
.page-header-privacy-policy{
    background-image: url(../images/images/title-privacy.jpg);
    background-size: cover;
}
/*企業情報*/
.page-header-company{
    background-image: url(../images/images/title-company2.jpg);
    background-size: cover;
}
/*お問い合わせ*/
.page-header-contact{
    background-image: url(../images/images/title-contact.jpg);
    background-size: cover;
}



.privacy-policy #main .wp-block-group:last-child{
    margin-bottom: 3rem;
}
.privacy-link{
    font-weight: bold;
    color: var(--main-blue);
    text-decoration: underline dotted var(--main-blue) 2px;
}
.privacy-link:hover{
    text-decoration: underline solid var(--main-blue) 2px;
}
.privacy-contact ul li span:first-child::before{
    content: "【";
}
.privacy-contact ul li span:first-child::after{
    content: "】";
    margin-right: 0.5rem;
}
.privacy-contact ul li {
    display: flex;
    margin-bottom: 0.5em;
}

.privacy-contact ul li span {
    width: 6em;
    text-align: left; 
}
.privacy-contact ul li span.space{
    width: 0.5rem;
}
.privacy-policy #main ul li{
    list-style-type: disc;
}
.privacy-policy #main ul li ul li{
    list-style-type: none;
}
.privacy-policy #main ul li ul li:before{
    content: "-";
    margin-right: 0.5rem;
}

/*パンくずリスト*/
.breadcrumb {
    text-align: left; 
    max-width: 1200; 
    margin: 10px auto 0;
    border-top: none!important;
    border-bottom: none!important;
}
.breadcrumb .bcn_delimiter {
    padding-left: 0.5em; 
    padding-right: 0.5em;
}
.breadcrumb .bcn_list li,
.breadcrumb a,
.breadcrumb span {
    margin-right: 0.3em; 
}

/*【共通】ページ内リンクボタン*/
.page-sec-linklist{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto 5rem;
    column-gap: 15px;
    padding-left: 0;
}
.page-sec-linklist .common-btn{
    padding: 5px 0;
    width: 200px;
    text-align: center;
}
.page-sec-linklist.faq-list .common-btn{
    width: 300px;
}
.page-sec-linklist.iv-list .common-btn{
    width: 300px;
}

/* @media (max-width: 781){
    .page-sec-linklist.service-list{
        outline: 1px solid red;
    }
} */
@media (max-width: 450px){
    .page-sec-linklist .common-btn{
        width: 150px;
    }
}



/*-----------------
製品・サービス紹介
-----------------*/
/*一覧ページ*/
.product-smb.w1100{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}
.product-smb-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-left: 0;
    gap: 20px;
}
.product-smb-list li{
    width: 31%;
    height: 300px;
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.4s ease-out;
}
 
.product-smb-list li a{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    align-items: center;
    /* background-color: var(--main-blue); */
    color: #fff;

}

.product-smb-list li a::before{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 80%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.5s ease-in-out;
}
.product-smb-list li a:hover::before{
    transition: all 0.5s ease-in-out;
    transform: scale(1.08);
}
.product-smb-list li:nth-child(1) a::before{
    background-image: url(../images/images/curtain-smb.webp);
}
.product-smb-list li:nth-child(2) a::before{
    background-image: url(../images/images/booth-smb.webp);
}
.product-smb-list li:nth-child(3) a::before{
    background-image: url(../images/images/tentsouko-smb.webp);
}
.product-smb-list li:nth-child(4) a::before{
    background-image: url(../images/images/hiyoketent-smb.webp);
}
.product-smb-list li:nth-child(5) a::before{
    background-image: url(../images/images/kaihei-smb.webp);
}
.product-smb-list li:nth-child(6) a::before{
    background-image: url(../images/images/idoushiki-smb.webp);
}
.product-smb-list li:nth-child(7) a::before{
    background-image: url(../images/images/shuaaer-smb.webp);
    background-position: center center;
}
.product-smb-list li:nth-child(8) a::before{
    background-image: url(../images/images/event-smb.webp);
}
.product-smb-list li:nth-child(9) a::before{
    background-image: url(../images/images/nimotuhogo-smb.webp);
}
.product-smb-list li a .product-smb-text{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 20%;
    line-height: calc(320px * 0.2); 
    background-color: var(--main-blue);
    bottom: 0;
}
.product-smb-btn {
    border-radius: 20px;
    overflow: hidden;
}
.product-smb-btn p {
    padding-bottom: 1.5rem;
}
@media (max-width: 768px) {
    .product-smb-list li{
        width: 47%;
        height: 150px;
        border-radius: 10px;
    }
}
@media (max-width: 781px) {
    .product-smb-list li a .product-smb-text{
        line-height: calc(150px * 0.2); 
    }
}

/*キャラリーcss*/
.wp-block-gallery.product-gallery{
    margin: 1.5rem 0;
}
/*オプションボタンカスタマイズ*/
.common-btn.product-op-btn{
    margin: 1rem auto 0 0;
    padding: 0.2rem 1rem;
    border: 2px solid var(--main-blue);
    font-weight: normal;
}
body .main-inner .product-inner-wrap{
    margin-bottom: clamp(20px,4vw,80px);
}

/*間仕切りカーテン*/

.pro-ct-rollup-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0;
}
.pro-ct-rollup-list li {
    width: 45%;
}
#pro-ct-accordion h3,
#pro-ct-noren h4{
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 0;
}
#pro-ct-accordion .product-gallery,
#pro-ct-noren .product-gallery{
    margin-top: 0.5rem;
} 
#pro-ct-noren .w1100 .mb40,
#pro-ct-rollup-screen .w1100 .mb40{
    margin-bottom: clamp(20px,4vw,40px);
}
#pro-ct-fortcurtain .product-gallery{
    margin-bottom: 0;
}
#pro-ct-fortcurtain{
    margin-bottom: 5rem;
}
@media (max-width: 599px){
    .product-gallery .wp-block-image:last-of-type  {
        max-width: 49.3%!important;
    }
    .curtain-jabara {
        padding: 1rem;
    }
    #pro-ct-fortcurtain{
        margin-bottom: 0;
    }
    #pro-ct-curtain .curtain-jabara {
        margin-bottom: clamp(20px,4vw,40px);
    }
}
/*間仕切りブース*/
@media (min-width: 600px) {
    body #pro-booth-idou .product-gallery {
        display: flex;
        justify-content: flex-start;
        gap: var(--wp--style--block-gap, 1em);
        flex-wrap: nowrap;
    }
    body #pro-booth-idou .product-gallery figure.wp-block-image {
        width: calc(100% / 3)!important;
        flex-grow: 0 ;
        flex-shrink: 0;
    }
    body .wp-block-gallery.has-nested-images.columns-default #pro-booth-idou .product-gallery figure.wp-block-image:first-child:nth-last-child(2),
    body .wp-block-gallery.has-nested-images.columns-default #pro-booth-idou .product-gallery figure.wp-block-image:first-child:nth-last-child(2) ~ figure.wp-block-image {
        width: calc(100% / 3) !important;
    }
}
/*テント倉庫*/
#tent-warehouse-top .common-btn{
    width: 310px;
}
#tent-warehouse-top .common-btn span{
    font-size: 0.8rem;
}
@media (max-width: 781px){
    #pro-tent-warehouse .w1000{
        padding: 5%;
        margin-bottom: 40px;
    }
}
/*庇・日除けテント*/
#pro-hiyoke-hisasi #pro-hisashi-place .product-gallery,
#pro-hiyoke-kaidan .product-gallery,
#pro-hiyoke-awning .product-gallery{
    margin-top: 0.2rem;
}
#pro-hiyoke-hisasi #pro-hisashi-place .product-gallery{
    margin-bottom: 0;
}
@media (max-width: 781px){
    #pro-hiyoke-hisasi #pro-hisashi-place > div {
        padding: 5%;
        margin-bottom: 40px;
    }
}
/*伸縮式テント*/
#pro-sinshiku-custum .product-gallery{
    margin-bottom: 0;
}
#pro-rollingtent-kotei .product-gallery{
    margin-top: 0.2rem;
}
@media (max-width: 781px){
    #pro-rollingtent-sinsyuku .w1000 {
        padding: 5%;
        margin-bottom: 40px;
    }
}
/*シャッター*/
#pro-shutter .product-gallery{
    margin-top: 0.2rem;
}
#pro-shutter #pro-shutter-sheet .product-gallery{
    margin-bottom: 0;
}
@media (max-width: 781px){
    #pro-shutter .w1000 {
        padding: 5%;
        margin-bottom: 40px;
    }
}

/*イベントテント（こんな場所にリスト）*/
.event-list {
    display: flex;
    flex-wrap: wrap;
}
.event-list li{
    position: relative;
    padding-left: 1rem;
}
.event-list li:not(:last-child){
    margin-right: 1rem;
}
.event-list li::before{
    content: "■";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}
.event-list-title{
    width: fit-content;
    display: inline-block;
    margin-left: 0;
    padding: 0.4rem 1.1rem;
    background-color: var(--sub-blue);
    border-radius: 10px;
    font-weight: bold;
}
/*荷物保護*/
body .main-inner #pro-hogo-palet .w1100 ul{
    margin-left: 1rem;
}
#pro-hogo-palet ul li{
    list-style-type: disc;
    margin-left: 1rem;
}
.video-p-keep iframe{
    margin-bottom: 0;;
}
@media (min-width: 600px) {
    body #pro-hogo-palet .product-gallery {
        display: flex;
        justify-content: flex-start;
        gap: var(--wp--style--block-gap, 1em);
        flex-wrap: nowrap;
        margin-top: 0.2rem;
    }
    body #pro-hogo-palet .product-gallery figure.wp-block-image {
        width: calc(100% / 3)!important;
        flex-grow: 0 ;
        flex-shrink: 0;
    }
    body .wp-block-gallery.has-nested-images.columns-default #pro-hogo-palet .product-gallery figure.wp-block-image:first-child:nth-last-child(2),
    body .wp-block-gallery.has-nested-images.columns-default #pro-hogo-palet .product-gallery figure.wp-block-image:first-child:nth-last-child(2) ~ figure.wp-block-image {
        width: calc(100% / 3) !important;
    }
}
@media (max-width: 1000px) {
    .wp-block-embed-youtube {
        margin-bottom: 0.8rem !important; 
    }
}
/*オプション*/
.page-sec-linklist.op-list .common-btn{
    width: 300px;
}
.page-sec-linklist.op-list .common-btn span{
    font-size: 0.8rem!important;
}
.op-curtain-side{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#option .w1100 .w1000 >div.wp-block-group h4{
    margin-bottom: 0.3rem!important;
}

#option .w1100 .w1000 >div.wp-block-group:not(:first-child) h4 {
    margin-top: 0.8rem;;
 }
#option .w1100 .product-gallery{
    margin: 0;
}
@media (max-width: 781px){
    #option .w1100 h3{
        margin-top: 1rem;
        font-size: 1.3rem;
    }
    #op-curtain .w1100 .w1000,
    #op-booth .w1100 .w1000,
    #op-tentwarehouse .w1100 .w1000,
    #op-uwaya .w1100 .w1000,
    #option .w1100 .w1000 {
        padding: 5%;
        margin-bottom: 40px;
    }
    #option .w1100 .w1000 >div.wp-block-group .wp-block-columns{
        gap: 12px;
    }
}

/*-----------------
業務内容
-----------------*/

.page-header-service + .breadcrumb + #main .alignfull.service01-wrap,
.page-header-service + .breadcrumb + #main .alignfull.service02-wrap,
.page-header-service + .breadcrumb + #main .alignfull.service03-wrap {
    width: 100vw !important; 
    max-width: 100vw !important; 
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important; 
    padding-right: 0 !important; 
    position: relative;
    min-height: auto; 
    overflow: hidden;
    padding-top: 4rem; 
    padding-bottom: 4rem;
}

.service01-wrap::before,  
.service02-wrap::before,
.service03-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    width: clamp(300px,60vw,50vw);
    height: 100%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    opacity: 0.8;
    z-index: 1;
}
.service02-wrap::before{
    background-position: center right;
}
.service01-wrap .w1000,
.service02-wrap .w1000,
.service03-wrap .w1000 {
    width: min(100%, 1200px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    height: auto; 
    min-height: unset; 
    padding: 0 20px;
    position: relative;
    z-index: 5;
    outline: none;
}

.service01-wrap .service01-text,
.service02-wrap .service02-text,
.service03-wrap .service03-text {
    width: 70%;
    max-width: 880px;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: white;
    text-align: left; 
    position: static;
    transform: none;
}
.service01-wrap .service01-text h2,
.service02-wrap .service02-text h2,
.service03-wrap .service03-text h2{
    position: relative;
    font-size: clamp(20px,4vw,24px);
}
.service01-wrap .service01-text h2::after,
.service02-wrap .service02-text h2::after,
.service03-wrap .service03-text h2::after{
    position: absolute;
    content: "";
    display: block;
    margin-top: 0.3rem;
    width: 150px;
    height: 4px;
    background-color: var(--main-blue);
}
.service01-wrap .service01-text p,
.service02-wrap .service02-text p,
.service03-wrap .service03-text p{
    line-height: 2rem;
}

.service01-wrap::before {
    left: 0;
    border-radius: 0 20px 20px 0;
    background-image: url('../images/images/service-kikaku.webp');
}
.service03-wrap::before {
    left: 0;
    border-radius: 0 20px 20px 0;
    background-image: url('../images/images/service-kanri.webp');
}

.service01-wrap .service01-text,
.service03-wrap .service03-text {
    margin-left: auto;
    margin-right: 0 !important;
}

.service02-wrap::before {
    right: 0;
    left: auto;
    background-position: center right;
    border-radius: 20px 0 0 20px;
    background-image: url('../images/images/service-sekou.webp');
}

.service02-wrap .service02-text {
    margin-left: 0 !important;
    margin-right: auto;
}


@media (min-width: 769px){
    .service01-wrap .service01-text figure,
    .service02-wrap .service02-text figure,
    .service03-wrap .service03-text figure{
        display: none;
    }
}
@media (max-width: 768px) {
    .page-header-service + .breadcrumb + #main .alignfull.service01-wrap,
    .page-header-service + .breadcrumb + #main .alignfull.service02-wrap,
    .page-header-service + .breadcrumb + #main .alignfull.service03-wrap{
        padding-top: 0;
        padding-bottom: 0;
    }

    .service01-wrap .w1000,
    .service02-wrap .w1000,
    .service03-wrap .w1000 {
        display: block;
        padding: 0 10px;
    }
    .service01-wrap .service01-text,
    .service02-wrap .service02-text,
    .service03-wrap .service03-text {
        width: 100%; 
        max-width: none;
        margin-left: auto !important; 
        margin-right: auto !important; 
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 1rem;
    }
    
    .service01-wrap::before,
    .service02-wrap::before,
    .service03-wrap::before {
        display: none;
    }
    #ijikanri .common-btn{
        padding: 5px 1.5rem;
    }
}
/*施工の流れ*/
.flow-section .flow-section-list .flow-inner{
    display: flex;
    width: 100%;
}

.flow-section .flow-section-list .flow-inner h3{
    margin-bottom: 0;
}
.flow-section .flow-section-list{
    padding-left: 0;
}

.flow-inner {
    display: flex;
    align-items: flex-start;
    background-color: #e6f3fa;
    padding-left: 20px; 
    padding-right: 20px; 
    padding-bottom: 20px; 
    position: relative; 
    overflow: visible; 
    margin-bottom: 10px;
}

.flow-arrow {
    position: absolute; 
    left: 20px; 
    top: 0; 
    bottom: -20px; 
    width: 110px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-weight: bold;
    z-index: 10;
}
.flow-arrow p {
    margin: 0;
    line-height: 1.2;
    font-size: 1rem;
    z-index: 11;
    margin-top: -20px;
}
.flow-arrow p .step-num {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}
.flow-arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5ab6e6;
    z-index: 1;
    clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0 75%, 0 0)
}
/* STEP 1*/
.flow-section-list li:nth-child(1) .flow-arrow::before {
    background-color: #83CCFE;
}
/* STEP 2*/
.flow-section-list li:nth-child(2) .flow-arrow::before {
    background-color: #65BBF6;
}
/* STEP 3*/
.flow-section-list li:nth-child(3) .flow-arrow::before {
    background-color: #49ACEF;
}
/* STEP 4*/
.flow-section-list li:nth-child(4) .flow-arrow::before {
    background-color: #2D9CE7;
}
/* STEP 5*/
.flow-section-list li:nth-child(5) .flow-arrow::before {
    background-color: #178CDB;
}
/* STEP 6*/
.flow-section-list li:nth-child(6) .flow-arrow::before {
    background-color: #0E83CE;
}
/* STEP 7*/
.flow-section-list li:nth-child(7) .flow-arrow::before {
    background-color: #0078C5;
}

 .flow-text {
    margin-left: 130px;
    padding: 10px 0 10px 20px;
    flex-grow: 1;
}
ol > li:last-child .flow-arrow {
    bottom: 0;
    height: auto;
    max-height: 100%;
}

ol > li:last-child .flow-arrow::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.flow-text h3, .flow-text p {
    margin: 0;
}
.flow-text h3{
    font-weight: bold;
}
@media (max-width: 991px){
    .flow-arrow {
        width: 100px;
        height: 100%;
    }
    .flow-arrow::before{
     clip-path:initial;    
    }
    .flow-text{
        margin-left: 100px;
    }
    .flow-section-list li:not(:last-child)::after {
    content: "";
    background-image: url(../images/images/blue-arrow.webp);
    width: 30px;
    height: 25px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
  }
}
@media (max-width: 781px){
    .flow-inner{
        padding-right: 2%;
        padding-left: 2%;
    }
    .flow-arrow {
        left: 2%;
        width: 12%;
        height: 100%;
    }
    .flow-text{
        margin-left: 10%;
    }
    .flow-text h3{
        font-size: 1.2rem;
    }

}

.care-section .care-hosho p:first-of-type{
    font-size: 1.5rem;
    font-weight: bold;
}
.care-section .care-mente h3 span{
    font-size: 1rem;
}
.care-section ul.care-mente-list01{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    padding-left: 0;
    gap: 20px;
}
.care-section ul.care-mente-list01 li{
    width: 150px;
    height: 150px; 
    border-radius: 50%;
    border: 2px solid var(--mk-blue);
    background-color: var(--sub-blue);
    color: var(--mk-blue); 
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
@media (max-width: 991px){
    .care-section ul.care-mente-list01 li{
        width: 100px;
        height: 100px;
        font-size: 1rem;
        border-radius: 30px;
    }
}
@media (max-width: 781px){
    .care-hosho .w1000 > div figure,
    .care-mente .w1000 > div figure{
        text-align: center;
    }
    .care-hosho .w1000 > div figure img{
        width: 150px!important;
    }
    .care-mente .w1000 >div figure img{
        width: 200px!important;
    }
}
@media (max-width: 480px){
    .care-section ul.care-mente-list01{
        gap: 10px;
    }
    .care-section ul.care-mente-list01 li{
    width: 90px;
    height: 90px;
    }
}
/*-----------------
施工実績
-----------------*/
/*一覧ページ*/

/* --- 施工実績グリッド --- */

/* グリッドコンテナの設定 */
.work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}

/* 施工実績カードのスタイル */
.work-card {
    background-color: #fff;
    border: 1px solid var(--sub-blue);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* カードのリンク全体をブロック化 */
.work-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* サムネイルエリア */
.work-card-thumbnail {
    position: relative;
    height: 0;
    overflow: hidden;
    width: 100%;
    padding-bottom: 75%;
    background-color: #999;
}

.work-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カテゴリバッジ */
.work-category-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    z-index: 10;
}

/* カードのコンテンツ（タイトル、場所、概要） */
.work-card-content {
    padding: 15px;
    flex-grow: 1;
}
.work-card-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #333;
    border-top: none;
    border-bottom: none;
}

.work-card-location {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.work-card-excerpt {
    font-size: 14px;
    color: #333;
}


/* --- レスポンシブ対応 (タブレット、スマートフォン) --- */

@media (max-width: 1024px) {
    /* タブレット: 3列 */
    .work-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 767px) {
    /* スマートフォン: 2列 */
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .work-card-content {
        padding: 10px;
    }
    
    .work-card-title {
        font-size: 14px;
    }
}

.post-type-archive-works .work-archive {
    max-width: 1200px;
    margin: 0 auto;
}

.post-type-archive-works .page-header {
    margin-bottom: 40px;
}

.post-type-archive-works .page-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.post-type-archive-works .archive-description {
    color: var(--text-color);
    line-height: 1.6;
    margin-block: 50px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .post-type-archive-works .archive-description{
        margin-block: 30px;
    }
}
@media screen and (max-width: 485px) {
    
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 10px;
    }
}
@media screen and (max-width: 375px){
    .work-item-wrapper{
        max-width: 150px;
        min-width: 100px;
    }
}

.work-card {
    margin: 0;
}
.work-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.work-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.work-category-tag {
    color: var(--text-color);
    font-size: clamp(9px,4vw,13px);
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--sub-blue);
    padding: 0.2rem 0.5rem;
}

.work-pagination {
    margin-top: 40px;
    text-align: center;
}

.no-works {
    text-align: center;
    padding: 40px;
    color: #666;
}


/* ページネーションの余白調整 */
.work-archive a.page-numbers, 
.work-archive span.page-numbers {
    margin-right: 5px; 
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: var(--main-blue);
    color: #fff;
    border-color: var(--main-blue);
}
.work-archive span.page-numbers{
    background-color: var(--sub-blue);
    color: var(--main-blue);
}






/*個別ページ*/
.work-detail {
    max-width: 1200px;
    margin: 0 auto;
    /* padding: 20px; */
}

.work-category-label {
    margin-bottom: 0.8rem;
}

.category-badge {
    display: inline-block;
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.category-badge:not(:last-child){
    margin-right: 0.5rem;
}

/* Two-column layout: gallery on left, info on right */
.work-content-wrapper {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.work-media-section {
    flex: 1;
    min-width: 0;
}

.work-info-section {
    max-width: 450px;
    flex-shrink: 0;
}

/* Gallery styles */
.work-main-image-gallery{
    display: flex;
    position: relative;
}
.gallery-container {
    position: relative;
}

.main-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    z-index: 10;
}

.gallery-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.gallery-nav-btn.gallery-prev {
    left: 15px;
}

.gallery-nav-btn.gallery-next {
    right: 15px;
}

.thumbnail-grid {
    display: grid;
    max-width: 500px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.thumbnail-item {
    aspect-ratio: 4/3;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color 0.3s;
}

.thumbnail-item:hover {
    border-color: #ccc;
}

.thumbnail-item.active {
    border-color: #1976d2;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Blue header box styling for title */
.work-title-box {
    background-color: #1976d2;
    color: white;
    padding: 0.8rem;
    border-radius: 8px;
    margin-bottom: 20px;
}

.work-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* Info blocks styling */
.work-content-title{
    margin-left: 0.8rem;
    font-size: clamp(16px,4vw,21px);
    font-weight: bold;
    color: var(--white);
    background-color: var(--main-blue);
    padding: 0.8rem;
    border-radius: 10px;
}
.work-info-block {
    margin-bottom: 25px;
    padding-bottom: 25px;
    margin-left: 0.8rem;
}

.work-info-block:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--mk-blue);
    margin: 0 0 10px 0;
    padding: 0.5rem 0 0.5rem 0.5rem;
    background-color: var(--sub-blue);
}

.info-content {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-left: 1rem;
}

/* Navigation */
.works-bottom-nav{
    margin-bottom: clamp(80px,8vw,120px);
}
/* Responsive */
@media (max-width: 768px) {
    .work-content-wrapper {
        flex-direction: column;
    }
    
    .work-info-section {
        width: 100%;
    }
    
    .thumbnail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*-----------------
カタログDL
-----------------*/


/* カタログアーカイブページ全体 */
.catalog-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ページヘッダー */
.catalog-archive .page-header {
    margin-bottom: 40px;
}

.catalog-archive .page-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

/* カテゴリセクション */
.catalog-section {
    margin-bottom: 60px;
}

.catalog-section-title {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    padding: 1rem 1.1rem;
    font-size: clamp(1.2rem,4vw,1.5rem);
    font-weight: bold;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.catalog-section-description {
    margin-bottom: 20px;
    color: #666;
    line-height: 1.6;
}

/* カタロググリッド (4カラム) */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
/*メーカー非表示*/
.catalog-maker{
    display: none;
}

/* タブレット (3カラム) */
@media (max-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* スマホ (2カラム) */
@media (max-width: 768px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 小さいスマホ (1カラム) */
@media (max-width: 480px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .catalog-grid .catalog-item{
        padding-inline: 0.4rem;
    }
    .catalog-grid .catalog-info{
        padding-top: 0.3rem;
    }
    .catalog-grid .catalog-title{
        margin: 0;
    }
    .catalog-grid .catalog-maker{
        margin: 0 0 0.2rem 0;
    }
    .catalog-grid .catalog-size{
        margin: 0.3rem 0;
    }
}

/* カタログアイテム */
.catalog-item {
    background: var(--sub-blue);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding-inline: 1.5rem;
}

.catalog-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.catalog-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* サムネイル画像 */
.catalog-thumbnail {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.catalog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* カタログ情報 */
.catalog-info {
    display: flex;
    flex-direction: column; 
    justify-content: flex-start;
    align-items: center;
    /* min-height: 5.5rem; ←メーカー表示の際に使用*/
    padding-top: 15px;
    text-align: center;
}
.catalog-title {
    height: 2.4rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 2;  */
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--main-blue);
    margin: 0 0 0.2rem 0;
    padding: 0;
    line-height: 1.2rem;
}
.catalog-title span{
    font-size: 0.9rem;
}
.catalog-maker {
    font-size: 0.85rem;
    color: var(--text-color);
    margin: 0 0 0.8rem 0;
}
.catalog-size {
    font-size: 0.8rem;
    color: var(--text-color);
    margin: 0.3rem 0 0.6rem;
    text-align: center;
}

/* カタログがない場合のメッセージ */
.no-catalogs {
    color: var(--text-color);
    font-style: italic;
    padding: 20px;
    text-align: center;
}



/*-----------------
採用情報
-----------------*/

/*採用情報*/
.recruit-sec1{
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: clamp(50px,4vw,100px);
}
.recruit-sec1 h2{
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-weight: bold;
    font-size: 2.3rem;
}
.recruit-btn{
    position: relative;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
}
 .recruit-iv-btn{
    background-image: url(../images/images/recruit-staff-smb.jpg);
    margin-top: clamp(100px,4vw,200px);
}
 .recruit-bosyu-btn{
    background-image: url(../images/images/recruit-bosyu-btn.jpg);
    margin-top: clamp(100px,4vw,200px);
}
.recruit-iv-btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 53, 86, 0.45);
    z-index: 2;
    transition: all 0.4s;
}
.recruit-iv-btn:hover::before{
    background-color: rgba(18, 53, 86, 0.8);
    transition: all 0.4s;

}
.recruit-btn a{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    width: 100%;
    height: 100%;
    font-size: clamp(22px,4vw,30px);
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    z-index: 3;
    top: 0;
    left: 0;
}
.recruit-btn a:hover{
    color: #fff;
}
.recruit-btn a::after{
    content: "";
    width: 50px;
    height: 50px;
    background-image: url(../images/images/recruit-arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    margin-top: 2rem;
    z-index: 4;
}
.recruit-p-content::before{
    content: "※";
}
#recruit .mk-kankyou h2{
    margin-bottom: 0;
}

@media (max-width: 781px){
    #recruit .recruit-sec1 h2{
        font-size: 2rem;
        margin-bottom: 1rem;
        padding: 0;
    }
    #recruit .recruit-btn,
    .recruit-bosyu-btn {
        height: 80px;
    }
    .recruit-btn a::after{
        width: 30px;
        height: 30px;
        margin-top: 5px;
    }
    .recruit-btn a{
        font-size: 1.3rem;
        text-shadow: 1px 1px 2px rgba(18, 53, 86, 0.7);
    }
    #recruit .mk-kankyou h2{
        font-size: 1.5rem;
    }
    .interview-main figure.sp{
        width: 230px;
    }
}

/*インタビューページ*/
.page-sec-linklist.iv-list .common-btn{
    position: relative;
    padding-block: 1.2rem;
    background-color: var(--sub-blue);
}
.page-sec-linklist.iv-list .common-btn:hover{
    background-color: var(--main-blue);
}
.page-sec-linklist.iv-list .common-btn::before{
    content: "";
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    margin: auto 0;
}
.page-sec-linklist.iv-list .common-btn.staff01::before{
    background-image: url(../images/images/recruit-staff-am-c.png);
}
.page-sec-linklist.iv-list .common-btn.staff02::before{
    background-image: url(../images/images/recruit-staff-rk-c.png);
}
.page-sec-linklist.iv-list .common-btn.staff03::before{
    background-image: url(../images/images/recruit-staff-rt-c.png);
}
.page-sec-linklist.iv-list .common-btn.staff04::before{
    background-image: url(../images/images/recruit-staff-na-c.png);
}
.interview-main .common-heading02{
    color: var(--main-blue);
}
.interview-main .common-heading02 .sub-heading-en{
    border-top: 3px solid var(--main-blue);
}

.interview-img-wrap div:first-of-type{
    max-width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.page-sec-linklist.iv-list.line-style::after{
    position: unset;
    transform: translateX(0);
}
.interview-main .interview-text h3{
    font-weight: bold;
}
.interview-main .interview-text h3.has-background{
    padding: 0.7rem 1.3rem;
}
.interview-main h3{
    font-size: 1.2rem;
}
.interview-main .interview-text p{
    padding-left: 3rem;
}
.interview-main .interview-text ul{
    padding-left: 4rem;
}
.interview-main .interview-text ul li{
    list-style-type: disc;
}
.recruit-cat-am{
    transform: rotate(20deg);
}
.recruit-iv-message{
    position: relative;
}
.recruit-iv-message::after{
    position: absolute;
    content: "";
    top: -20px;
    right: 1rem;
    width: clamp(90px,10vw,180px);
    height: clamp(80px,10vw,150px);
    background-size: contain;
    background-repeat: no-repeat;
}
.recruit-iv-message.am::after{
    background-image: url(../images/images/recruit-staff-am-c.png);
    transform: rotate(20deg);
}
.recruit-iv-message.rk::after{
    background-image: url(../images/images/recruit-staff-rk-c.png);
    transform: rotate(20deg);
}
.recruit-iv-message.rt::after{
    background-image: url(../images/images/recruit-staff-rt-c.png);
    transform: rotate(10deg);
}
.recruit-iv-message.na::after{
    background-image: url(../images/images/recruit-staff-na-c.png);
    /* transform: rotate(10deg); */
}
.recruit-iv-message.na p{
    width: 70%;
    margin:0 auto 0 0!important;
}
@media (max-width: 781px){
    .recruit-iv-message.na p{
        width: 100%;
    }
    .interview-main h3{
        font-size: 1.1rem;
    }
    .interview-main .interview-text h3.has-background{
        padding: 0.3rem 1rem;
    }
    .interview-main .interview-text p{
    padding-left: 1.5rem;
    }
    .interview-main .interview-text ul{
    padding-left: 3rem;
    }
    .recruit-iv-message::after{
           top: -30px; 
    }
}
/*よくある質問*/
h3.ea-header{
    padding-bottom: 0;
}
h3.ea-header a {
    font-size: 1.5rem
}
@media (max-width: 781px){
    .sp-easy-accordion .sp-ea-single h3.ea-header a{
        font-size: 1.1rem;
    }
}
/*-----------------
企業情報
-----------------*/
#company .page-sec-linklist{
    max-width: 800px;
}
#company .common-heading01{
    margin-bottom: clamp(40px,4vw,80px);
}
.company-main p {
    line-height: 2rem;
}
.vision p:first-of-type{
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif !important;
    font-weight: bold;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}
.vision p:last-child{
    font-size: 1.75rem;
}
.greeting.line-style{
    padding-bottom: 150px;

}
.greeting p span:first-of-type{
    font-size: 1.2rem;
    margin-right: 1rem;
}
.greeting-signature{
  font-size: 1.5rem;  
}
.greeting-signature span{
    font-size: 2rem;
}
.greeting-signature span.head-name{
    font-size: 2.5;
}

#company dl dd ul li{
    list-style-type: disc;
}
.overview dl,
.history dl{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid var(--main-blue);
}
.overview dl dt,
.history dl dt{
    width: 25%;
}
.overview dl dd,
.history dl dd{
    width: 75%;
}
.company-main .overview dl dt,
.company-main .history dl dt {
    background-color: var(--sub-blue); 
    border-bottom: 1px solid var(--main-blue);
    padding: 1.2rem;
    margin: 0;
    display: block; 
}
.company-main .overview dl dd,
.company-main .history dl dd {
    padding: 1.2rem;
    border-bottom: 1px solid var(--main-blue);
    margin: 0;
}
.company-main .overview dl dd:last-of-type,
.company-main .history dl dd:last-of-type {
    border-bottom: none;
}
.company-main .overview dl dt:last-of-type,
.company-main .history dl dt:last-of-type {
    border-bottom: none;
}
.company-main .overview dl dt span{
    font-size: 0.9rem;
}
@media (max-width: 781px){
    .vision p:first-of-type{
        font-size: 2rem;
    }
    .vision p:last-child{
        font-size: 1.2rem;
    }
    .overview dl,
    .history dl{
        display: block;
    }
    .overview dl dt,
    .overview dl dd,
    .history dl dt,
    .history dl dd{
        width: 100%;
    }
    #company .overview dl dd,
    #company .history dl dd{
        padding-left: 2rem;
    }
    .company-main .overview dl dt:last-of-type,
    .company-main .history dl dt:last-of-type {
        border-bottom: 1px solid var(--main-blue);
    }
    #company .greeting figure{
        max-width: 50%;
    }
    .greeting.line-style{
        padding-bottom: 50px;
    }   
}
/*アクセス*/
.access-text {
    margin: 0;
}
.access-text figure{
    margin: 0;
    font-size: 1.1rem;
    /* border: 1px solid #999999; */
}
.access table,
.access th,
.access td{
    border: none!important;
}
.access table{
    width: 100%;
}
.access th{
    width: 70px;
    text-align: left;
    background-color: var(--sub-blue);
}
.access td{
    width: auto;
}

.access .access-inner{
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}
.access .access-inner p{
    border-top: 2px dashed var(--mk-blue);
}
.access .access-inner h3{
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
}
.access .access-inner h3::before{
    content: "";
    display: inline-block;
    width: 45px;
    height: 45px;
    margin-right: 0.5rem;
    margin-bottom: 0.3rem;
    background-size: contain;
    background-repeat: no-repeat;
}
.access .access-inner h3:nth-of-type(1)::before{
    background-image: url(../images/images/access-train.png);
}
.access .access-inner h3:nth-of-type(2)::before{
    background-image: url(../images/images/access-car.png);
}
.access figure.parking{
    max-width: 500px;
}
@media screen and (max-width: 781px) {
    iframe {
        height: 250px !important;
        width: 100% !important;
    }
}
@media screen and (max-width: 575px){
    .access th,.access td{
        width: 100%;
    }
}
/*-----------------
お問い合わせ
-----------------*/
.contact-top-wrap h2{
    font-size: 1.2rem;
}
.contact-note-box{
    background-color: var(--sub-blue);
    margin-top: 30px;
    margin-bottom: 50px;
}
.contact-note-box h2{
    font-size: 1.2rem;
    color: var(--mk-blue);
    font-weight: bold;
}
.contact-top-wrap ul{
    padding-left: 0;
}
.contact-top-wrap ul li,
.contact-note-box ul li{
    list-style-type: disc;
}

#contact-note{
    padding: 1rem 1.5rem;
}
.confirm-preview{
    display: none;
}
.mw_wp_form_preview .confirm-preview{
    display: block;
    margin-bottom: 20px;
    font-size: 1.5rem;
}
.mw_wp_form_preview .only-input,
.mw_wp_form_preview .must{
    display: none;
}
.preview-text {
    color: var(--main-blue);
    font-weight: bold;
    font-size: 1.5rem;
}


.mailformDiv .mailform{
    display: flex;
    width: 100%;
    margin: 0;
}
.mailformDiv{
    border: 1px solid var(--main-blue);
}
.mailformDiv .mailform dt{
    display: flex;           /* Flexboxコンテナにする */
    align-items: center;
    width: 25%;
    padding-inline: 2rem;
    background-color: var(--sub-blue);
    margin: 0;
    border-bottom: 1px solid var(--main-blue);
}
.mailformDiv .mailform dd{
    width: 75%;
    padding: 1rem 2rem;
    margin: 0;
    border-bottom: 1px solid var(--main-blue);
}
.mailformDiv .mailform:last-of-type dt,
.mailformDiv .mailform:last-of-type dd {
    border-bottom: none;
}
#company-name,#name,#kana{
    margin-top: 0.5rem;
    width: 50%;
}
#email,#email-confirm,#details,#additional-info{
    margin-top: 0.5rem;
    width: 60%;
}
#company-name, #name, #kana, #phone, #email, #email-confirm{
    height: 2rem;
}
.mwform-tel-field input[type="text"] {
    margin-top: 0.5rem;
    height: 2rem;
}
.must{
    color: red;
}
.exam{
    color: #999999;
    font-size: 0.9rem;
}
.privacy-note{
    margin-top: 3rem;
    text-align: center
}
.contact-center-btn {
    text-align: center;
    margin: 0 auto 100px;
}
@media (max-width: 781px){
    #contact ul li{
        font-size: 0.9rem;
    }
    .mailformDiv .mailform{
        display: block;
    }
    .mailformDiv .mailform dt{
        width: 100%;
        padding-left: 1rem;
        padding-block: 0.6rem;
    }
    .mailformDiv .mailform dd{
        width: 100%;
        padding-inline: 1.5rem;
    }
        .mailformDiv .mailform:last-of-type dt {
    border-bottom: 1px solid var(--main-blue);
    }
    #company-name,#name,#kana{
        margin-top: 0.5rem;
        width: 100%;
    }
    #email,#email-confirm,#details,#additional-info{
        margin-top: 0.5rem;
        width: 100%;
    }
    .mw_wp_form_preview .confirm-preview{
    font-size: 1.1rem;
}

}
.file-up-wrap ul li{
    list-style-type: disc;
}
.file-up-wrap ul li span,
.file-up-wrap ul li span a{
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: bold;
}
@media screen and (max-width: 600px) {
    .mwform-tel-field input[type="text"] {
        width: 27% !important; 
        box-sizing: border-box !important;
    }
}
.contact-btn-wrap{
    text-align: center;
    margin-top: 30px;
}
.contact-btn-inner{
    display: flex;
    justify-content: center;
    gap: 20px;
}
.contact-btn-inner input[type=submit]{
    border: 1px solid var(--main-blue);
    background-color: var(--white);
    color: var(--main-blue);
    transition: all 0.4s ease-in-out;
}
.contact-btn-inner input[type=submit]:not(:disabled):hover{
    background-color: var(--main-blue);
    color: var(--white);
    transition: all 0.4s ease-in-out;
}

/*送信完了*/
.page-header-contact-thanks,
.post-name-contact-thanks .breadcrumb{
    display: none;
}
.kakunin-mail,
.henshin-mail{
    display: flex;
    gap: 10px;
}
.kakunin-mail::before,
.henshin-mail::before{
    content: "";
    /* display: inline-block; */
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background-color: var(--sub-blue);
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
}

.kakunin-mail::before{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDdiZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4gICAgICAgICAgICAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjE2IiB4PSIyIiB5PSI0IiByeD0iMiIvPiAgICAgICAgICAgICA8cGF0aCBkPSJtMjIgNy04Ljk3IDUuN2ExLjk0IDEuOTQgMCAwIDEtMi4wNiAwTDIgNyIvPiAgICAgICAgIDwvc3ZnPg==");
}
.henshin-mail::before{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDdiZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4gICAgICAgICAgICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz4gICAgICAgICAgICAgPHBvbHlsaW5lIHBvaW50cz0iMTIgNiAxMiAxMiAxNiAxNCIvPiAgICAgICAgIDwvc3ZnPg==");
}
.contact-thanks-bottomWrap{
    gap: 1rem;
}
/*「別のお問合せ」ボタン*/