@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Zen+Kaku+Gothic+New&display=swap');

/*------ICO------*/
.item-case .item-title::before,
ul.cp-nav > li::after,
.benefit-list li::before,
.cp-line { width: 12px; height: 180px; background-color: var(--main-green-dark); transition: all .5s 0s ease; transform: rotate(30deg) skewY(-30deg); position: absolute; }
.questrial{font-family: "Questrial", sans-serif;  font-weight: 400;  font-style: normal;}

/*------HEADER------*/
#header.wrp-cp_header{padding: 0;}
#header .cp_header{width: 100%; padding: 0; position: static; top: 0; left: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start;}
.head-cp_l,.head-cp_r{position: fixed; z-index: 999; top: 0;}
.head-cp_l{padding: 50px; left: 0;}
.head-cp_l .header-logo{margin-bottom: 60px;}
.head-cp_l .logo-a{margin: 0;}
.head-cp_r{right: 0;}
ul.cp-nav > li{position: relative; margin-bottom: 20px; height: 43px; display: flex; align-items: center;}
ul.cp-nav > li:first-child{margin-bottom: 30px;}
ul.cp-nav > li > a{position: relative; height: 100%; width: 100%; left: 0; font-size: 16px; font-weight: bold; color: var(--main-black); padding: 0; display: flex; align-items: center;}
ul.cp-nav > li > a:hover{opacity: 1; color: var(--main-green-dark); left: 15px;}
ul.cp-nav > li::after{content: ""; position: absolute; bottom: 0; left: -12px; height: 45px; width: 7px; opacity: 0;}
ul.cp-nav > li:hover::after{opacity: 1;}

.head-cp_r{display: flex;}
.cp-btn{padding: 25px 25px; font-size: 16px; gap:10px; display: flex; align-items: center; color: #fff !important; opacity:1 !important; border-radius: 0;}
.cp-btn:hover .ico-01{left: 10px;}
.ico-01{position: relative; left: 0;}
.head-cp_r .toggle-container{position: static; background-color: #fff; flex-direction: column; gap: 5px; padding: 9px 20px 0;}
.type-g .switch-field{background-color: var(--main-green-dark);}
.type-g .switch-field label{color: #fff;}
.type-g .switch-field input:checked + label{color: var(--main-green-dark);}
.type-w_g .switch-selection{background-color: var(--main-green-dark) !important;}
.type-w_g .switch-field label{color: var(--main-green-dark);}


.cp-toggle{border-radius: 0; position: static; border: none; height: 69px;}


/*------MAIN------*/
.corp_mv {width: 100%; margin-bottom: 50px; position: relative; display: flex; gap: 20px; justify-content: flex-end;}
.corp-mv_ttl{position: absolute; gap:50px; bottom: 0; justify-content: center; right: 0; font-size: 36px; padding: 0 0 30px; z-index: 5; background-color: #fff;}
.corp-mv_ttl::before{background: url("assets/images/cp/bg-mv.png") no-repeat 0 / cover; content: ""; position: absolute; width: 100%; height: 100%; left: 0; bottom: calc(100% - 1px);}
.corp-mv_ttl .cp-line{left: -30px; bottom: -25px;}

.mvimg-l { width: 15.56%; max-width: 245px; }
.mvimg-c { width: 26.87%; max-width: 423px; }
.corp-mv_ttl,
.mvimg-r { width: 57.57%; max-width: 906px;}
.ud-title { display: inline; background: linear-gradient(transparent 60%, #a0ff96 60%); background-repeat: no-repeat; padding: 0 0 2px 0; line-break: anywhere; }
.ud-title { font-size: 2.25rem; text-align: center; font-weight: bold; margin-bottom: 40px; letter-spacing: 0.05em; z-index: 1; }

/*mv hover*/
.corp_mv .item-img { position: relative; overflow: hidden; background-color: var(--main-green-dark); /* ここで隙間から見える緑色を指定 */ }
.corp_mv .img-main { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; transform: translateX(0); z-index: 2;}
.corp_mv .img-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; transform: translateX(200%); z-index: 2;}
.corp_mv:hover .img-main { transform: translateX(-200%); }
.corp_mv:hover .img-hover { transform: translateX(0); }

/*seccp*/
.sec-pad{padding: 120px 0;}
.in_rela{position: relative; z-index: 999;}
.seccp-head{margin-bottom: 50px; text-align: center;}
.secp-ttl{font-size: 64px; font-weight: bold; color: var(--main-green-dark); margin-bottom: 10px;}
.secp-sub_ttl{font-size: 20px; color: var(--main-black);}
.seccp-label{margin-bottom: 50px; text-align: center;}

/*case*/
#case{padding-top: 50px;}
.wrp-case{display: flex; flex-wrap: wrap; gap: 50px 0; justify-content: space-between;}
.item-case{width: 49%; text-align: center;}
.item-case .item-img{margin-bottom: 10px;}
.item-case .item-title{font-size: 18px; color: var(--main-black); position: relative; display: inline-block;}
.item-case .item-title::before{content: ""; position: absolute; bottom: 0; left: -25px; height: 55px; width: 4px;}

/*contact*/
.container.ver-contact{max-width: 800px; text-align: center;}
.contact-section { text-align: center; margin-top: 80px;}
.btn.contact-btn { display: inline-flex; max-width: 600px; width: 100%; align-items: center; background-color: var(--main-green-dark); color: #fff; padding: 25px 35px; border-radius: 20px; position: relative; overflow: hidden; transition: background-color 0.3s ease; z-index: 1; }
.btn.contact-btn:hover {opacity: 1; color: #fff !important;}
.shine { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent); transition: all 0.6s ease; z-index: -1; }
.btn.contact-btn:hover .shine { right: 100%;}
.btn.contact-btn .item-inner{width: 100%;}
.btn-label { border: 1px solid #fff; border-radius: 50px; min-width: 125px; padding: 4px 15px; font-size: 0.85rem; font-weight: bold; margin-right: 30px; position: relative; z-index: 2; }
.tel-info { display: flex; align-items: baseline; font-family: 'Questrial', sans-serif; position: relative; z-index: 2; }
.tel-text { font-size: 1.2rem; margin-right: 10px; }
.tel-number { font-size: 2.2rem; font-weight: bold; letter-spacing: 0.02em; }
.contact-footer-info { margin-top: 25px; line-height: 1.8; }
.co_company-name { font-size: 1.1rem; font-weight: bold; margin: 0; }
.business-hours { font-size: 0.9rem; margin: 0; }

/*worries*/
.worriesSwiper{margin-bottom: 80px;}
.bg-sec_1{background-color: var(--bg-gray2); position: relative;}
.bg-sec_2::after,
.bg-sec_1::after,
.bg-sec_1::before{background: url("assets/images/cp/bg-sec_1.png") no-repeat 0 / cover; content: ""; position: absolute; width: 100%; height: 40px; left: 0; bottom: calc(100% - 1px);}
.bg-sec_1::after{bottom: auto; top: 100%; transform: rotate(180deg);}
.side-content { width: 250px; flex-shrink: 0; padding-top: 50px; }
.slide-card { position: relative; background: #fff; padding: 40px; box-shadow: 0 0 5px rgba(0,0,0,0.15); width: 100%; max-width: 850px;}
.wo_number { color: var(--main-green-dark); font-size: 2rem; font-weight: bold; display: block; border-left: 5px solid var(--main-green-dark); padding-left: 10px;}
.slide-card .item-inner{border-left: 3px solid var(--bg-gray2); padding:15px 0 0 20px;}
.slide-card h3 { color: var(--main-green-dark); margin-bottom: 20px; font-size: 1.25rem; }
.wo_points { padding-left: 20px; line-height: 1.8; margin-bottom: 20px; }
.solution-tag { background: var(--main-green-dark); color: #fff; padding: 5px 10px; display: inline-block; font-weight: bold; margin-top: 5px;}
.floating-img { position: absolute; right: -80px; bottom: -40px; width: 300px; z-index: 10; box-shadow: 10px 10px 20px rgba(0,0,0,0.1); }
.floating-img img { width: 100%; height: auto; display: block; }
.ico-02{width: auto !important; margin-bottom: 25px; display: block;}
.worries-nav-container { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 100px; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
.nav-btn {width: 64px; height: 40px; background-color: #fff; border: 1px solid var(--main-green-dark); border-radius: 100px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--main-green-dark); transition: 0.3s; padding: 0;}
.nav-btn svg { width: 40px; height: 40px; opacity: 1; }
.nav-btn:hover { background: var(--main-green-dark); color: #fff; }
.custom-progress { flex: 1; height: 2px; background: #fff; position: relative; }
.progress-bar { position: absolute; top: 0; left: 0; height: 2px; background: var(--main-green-dark); width: 0%; transition: width 0.4s ease; }

/*benefit*/
.benefit-list li {position: relative; padding-left: 25px; margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; }
.benefit-list li::before {width: 4px; height: 25px; left: 5px; content: "";}
.benefit-list .box-text { border: 1px solid #333; padding: 2px 8px; margin: 0 4px; font-weight: bold; font-size: 1.3em; display: inline-block; background-color: #fff;}

/*uniform*/
.bg-sec_2{position: relative;}
.bg-sec_2::after{bottom: auto; top: 100%; background-image: url("assets/images/cp/bg-sec_2.png");}
.wrp-case.ver-uni .item-case{width: 32%; position: relative;}
.wrp-case.ver-uni .item-case .item-title::before{height: 70px;}
.wrp-case.ver-uni .item-case .item-img{margin-bottom: 3px;}
.lu-label{position: absolute; left: 0; top: 0; padding: 15px; background-color: #fff;}
.wrp-case.ver-uni .item-sub{font-size: 28px;}
.wrp-case.ver-uni .item-text{margin-top: 25px;}
.wrp-uni_text{margin-top: 80px; text-align: center;}
.upper-btn_text{margin-bottom: 15px; font-size: 20px;}
.comm { display: inline-flex; align-items: center; position: relative; padding: 0 40px;}
.comm::before, .comm::after { content: ""; position: absolute; top: 52%; width: 28px; height: 1.5px; background-color: currentColor; }
.comm::before { left: 0; transform: translateY(-50%) rotate(-120deg); }
.comm::after { right: 0; transform: translateY(-50%) rotate(120deg); }

/*flow*/
.flow-section-background {
    background-image: linear-gradient(
        117deg, /* ストライプの角度（画像に合わせて調整） */
        transparent 42%, /* 開始から30%までは透明（ベースの濃い緑が見える） */
        #3F8327 42%,    /* 30%の位置でパキッと黄緑色に切り替える */
        #3F8327 55%,    /* 70%の位置まで黄緑色を維持 */
        transparent 55% /* 70%の位置でパキッと透明に戻す */
    );
}
.wrp-flow { display: flex; flex-direction: column; gap: 80px; padding:50px 0 100px;}
.item-flow { display: flex; align-items: center; position: relative; }
.item-flow .item-ico { position: relative; flex-shrink: 0; width: 160px; height: 160px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 80px; }
.item-flow .item-ico img {max-width: 100px;}
.item-flow .item-num { position: absolute; top: 0; left: 0; background: #000; color: #fff; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; z-index: 2; }
.item-flow .item-title { font-size: 28px; font-weight: bold; margin-bottom: 8px; line-height: 1.3; }
.item-flow .item-text { font-size: 16px; line-height: 1.6; opacity: 0.9; }
.item-flow::after {background: url("assets/images/cp/ico-02.png") no-repeat 0 / contain; content: ""; position: absolute; bottom: -60px; left: 50%; width: 45px; height: 36px;}
.item-flow:last-child::after { display: none; }
.bg-5 .btn.contact-btn{background-color: #000;}
.wrp-sec_video { position: relative; width: 100%; height: 800px; clip-path: inset(0); overflow: hidden; }
.bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }

/*------PC small------*/
@media only screen and (max-width: 1580px) {


}

/*------PAD pro------*/
@media only screen and (max-width: 1050px) {

}

  
/*------PAD------*/
@media only screen and (max-width: 880px) {

}

/*------Sm------*/
@media only screen and (max-width: 767px) {
    /*------HEADER------*/
    #header.wrp-cp_header{height: auto;}
    .head-nav{background-color: rgba(0,111,21,0.85);}
    #header .cp_header{background-color: #fff; height: auto; z-index: 1999; position: fixed;}
    .head-cp_l, .head-cp_r{position: relative;}
    .offcanvas-nav{z-index: 1000;}
    .head-cp_l{padding:8px 15px;}
    .head-cp_l .header-logo{margin-bottom: 0;}
    .head-cp_r{align-items: center;}
    .head-cp_r .toggle-container{display: none;}
    .cp-btn{padding: 20px 20px; font-size: 14px;}
    .ul-smnav.ver-cp{padding: 0;}
    .ul-smnav.ver-cp > li{list-style: none;}
    .ul-smnav.ver-cp > li > .nav-link{padding: 15px 30px;}
    .ul-smnav.ver-cp > li > .nav-link br{display: none;}

    /*------MAIN------*/
    .switch-corp_sm{position: relative; z-index: 5;}
    .switch-corp_sm .toggle-container {top: 0;}
    .corp_main{padding-top: 69px;}
    .corp_mv{flex-wrap: wrap;justify-content: space-between; gap: 20px 0; margin-bottom: 0;}
    .corp-mv_ttl, .mvimg-r{width: 100%; max-width: none;}
    .mvimg-l { width: 35.2%;} 
    .mvimg-c { width: 61%;}
    .mvimg-l, .mvimg-c{height: 273px; overflow: hidden;}
    .corp-mv_ttl{gap: 10px; font-size: 18px;}
    .corp-mv_ttl::before{height: 20px;}
    .corp-mv_ttl .cp-line{left: -5px; bottom: -10px; width: 5px; height: 80px;}
    .secp-ttl{font-size: 46px;}
    .sec-pad{padding: 60px 0;}

    /*case*/
    .wrp-case{flex-direction: column; margin: 0 -15px; gap: 30px;}
    .wrp-case.ver-uni .item-case,
    .item-case{width: 100%;}
    .item-case .item-title::before{height: 70px;}

    /*banner*/
    .ud-title{font-size: 1.5rem;}
    .btn.contact-btn{flex-direction: column; padding: 25px 15px;}
    .btn-label{margin: 0 0 10px 0;}
    .tel-number{font-size: 1.9rem;}
    .btn.contact-btn .item-inner{justify-content : center;}
    .tel-info{margin-right: 20px;}
    .co_company-name{font-size: 1rem;}
    .contact-section {margin-top: 40px;}

    /*worries*/
    .bg-sec_2::after, .bg-sec_1::after, .bg-sec_1::before{height: 14px;}
    .slide-card{padding:40px 20px;}
    .worriesSwiper .swiper-slide{padding-top: 50px;}
    .floating-img{width: 130px; right: 50px; bottom: auto; top: -30px;}
    .slide-card .item-inner{padding-left: 15px;}
    .worries-nav-container{padding: 0 15px; margin-top: 20px; gap: 20px;}
    .nav-btn{width: 50px; height: 35px;}

    .benefit-list li{font-size: 0.9rem;}
    .benefit-list .box-text{font-size: 1rem;}
    .wrp-case.ver-uni{margin: 0;}
    .comm{font-size: 1.1rem; padding:0 30px;}

/*flow*/
#flow{padding-top: 100px;}
.flow-section-background {
    background-image: linear-gradient(
        98deg,
        transparent 40%,
        #3F8327 40%,
        #3F8327 55%,
        transparent 55%
    );
}
.wrp-flow {gap: 40px; padding:20px 0 50px;}
.item-flow .item-ico { width: 80px; height: 80px; margin-right: 30px; }
.item-flow .item-ico img {max-width: 50px; max-height: 45px;}
.item-flow .item-num { width: 25px; height: 25px; font-size: 12px;}
.item-flow .item-title { font-size: 20px; }
.item-flow::after{width: 30px; bottom: -35px;}
.wrp-sec_video { height: 400px; }

}

/*------Sm small------*/
@media only screen and (max-width: 350px) {
    

}