@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap');
body{ text-align: left;}
.pc{ display:block;}
.sp{ display:none;}
.tr{-webkit-transition: 0.7s;-moz-transition: 0.7s;-o-transition: 0.7s;transition: 0.7s;}
.tr04{-webkit-transition: 0.4s;-moz-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;}
.cl:after { content: "";clear: both;display: block;}
a {cursor: pointer;}
a:link {text-decoration: none; color:inherit; font-size:inherit; font-weight:inherit; }
a:visited {text-decoration: none; color:inherit;}
a:hover {text-decoration: none; color: inherit;}
a:active {text-decoration: none; color:inherit;}
a,a:hover {-webkit-transition: 0.3s;-moz-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.rn_index img {width: 100%; line-height: 0;}
.contentsArea {margin:10px auto 0 auto;max-width: 1040px;}
#contentsArea p {margin-bottom: auto;}
.in{margin: auto;max-width: 1040px;}
.in2{margin: auto;max-width: 1200px;}
.ma2{border-radius: 2px; -webkit-border-radius:2px;-moz-border-radius: 2px;}
.shdimg{-webkit-filter: drop-shadow(0 0 15px rgba(33, 74, 124, 1));}
.shdtx{text-shadow: 0 0 10px rgba(33, 74, 124, 0.8);}
.mainImage.typeWide2 {background-position: right 80%;}
.main_ttl{padding: calc(15px + 4%) 15px 0 15px; font-size: 3.4rem; line-height: 1.5em;letter-spacing: 0.04em;}
.mainHead_1{ text-align: center; line-height: 1.4em;margin: 30px 0 45px 0 !important; font-size:3rem !important; letter-spacing: 0.04em;  }
.sec_h_bb{ border-bottom: 1px solid #c8c8c9; padding: 0 0 10px 0;}
.sec_hdnav{ margin: 0 0 40px 0;}
.sec_hdnav li{ width: 24.625%; margin: 0 0.5% 0 0; float: left;}
.sec_hdnav li:last-child{ margin: 0;}
.sec_hdnav li a,.sec_hdnav li p{height: 60px; line-height: 60px; text-align: center !important;font-weight: 600; color: #fff;border-radius: 5px 5px 0 0;}
.sec_hdnav li a{ background: #c8c8c9; display: block; font-size: 1.9rem; }
.sec_hdnav li a:hover{ background: #595858;}
.sec_hdnav li p{background: #595858;font-size: 1.9rem;}
.sec_h_feature{font-size: 2.8rem; margin: 0 30px 40px 30px;}
#contentsArea {margin:10px auto 0 auto;max-width: 1040px;}
.sec {border-bottom: none; margin: 0 0 calc(50px + 5%) 0; width: 100%; max-width: 1040px;}
#feat1,#feat2,#feat3,#feat4{ padding: calc(45px + 7vh) 0 0 0; margin: calc(-45px - 7vh) 0 calc(50px + 5%) 0;}
#feat1,.fi2{animation-duration: 1.8s;animation-name: mv_1;}
@keyframes mv_1 {
    0% {opacity: 0;transform : translate(-50px, 0);}
    50% {opacity: 0; transform : translate(-50px, 0);}
    100% {opacity: 1;transform : translate(0, 0);}
}
@keyframes mv_0 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}
.tr1{animation: tr1 6s;}
.top_main_head{text-align:center; font-style:italic; margin:0 0 60px 0; font-family:din;}
@keyframes tr1{
  0%{transform: scale(1.1) ;left: 0; opacity: 0;}
  40%{left: 0; opacity: 1;}
  100%{transform: scale(1.0) ; left: 0; opacity: 1;}
}
.main_img{ height: 420px; position: relative; width: 100%; overflow: hidden; margin: 0 !important; padding: 0;}
.main_img_bg{ width: 100%; height: 100%; background-size: cover; background-position: right 80%;}
.main_img_in1{ position: absolute; top:0; left: 0; width: 100%; }
.feature_logolink{max-width: 380px; padding: calc(5px + 3%) 0 0 0;}
.feature_logolink li{width: 49%; float: left; margin: 0 2% 2% 0; border: 1px solid #c8c8c9; text-align: center; background: url(../images/arrow.webp) 95% center/6px no-repeat;}
.feature_logolink li img{width: 100%; max-width: 130px; margin: 0 auto; line-height: 1em; display: block; padding: 15px 0;}
.feature_logolink li:nth-child(even){margin: 0 0 1% 0;}
.btnList{ padding: calc(5px + 3%) 0 0 0;}
.btnList > li span {min-width: 190px; text-align: center;}
.btn > span {background: url("../img/ic_arrow.webp") left center no-repeat; background-size: 18px auto; display: block; padding-left: 26px; !important}

.column {display: block; overflow: hidden;}
.feat_box1{ width: 48% ; float: left; margin: 0!important; }
.feat_box2{ width: 48% ; float: right; margin: 0 !important;}
p{text-align: justify;text-justify: inter-ideograph;text-justify: inter-character;}
/*環境ページ*/
.kn_main_btnw{ position: absolute; bottom: 30px; width: 100%;}
.kn_main_btn{background: #379f56 url(../images/kn_arrow.webp) 95% center/9px no-repeat; border-radius: 50px; height: 50px; line-height: 50px; font-size: 1.8rem; font-weight: 600; color: #fff; display: table;}
.kn_main_btn:hover{background: #448f42 url(../images/kn_arrow.webp) 95% center/9px no-repeat; }
.kn_main_btn a{display: block; padding: 0 38px 0 30px; }
.kn_bx_ttl{ font-size: 2.5rem; line-height: 1.1em; font-weight: 600; background: #f2f1f1; padding: 18px 20px;}
.kn_bxin2{ width: calc(100% - 50px); padding:20px 0; box-sizing: border-box; margin: auto;}
.kn_bxin2_bb{border-bottom: 1px solid #878788; margin: 0 auto 30px auto;}
.kn_bxin2_mb{margin: 0 auto calc(4% + 40px) auto;}
.kn_bxin2_l{ width: calc(100% - 450px); float: left;}
.kn_bxin2_r{ width: 400px; float: right;}
.kn_bxin2 img{ width: 100%; height: auto; line-height: 0;}
.kn_logo_cl{ max-width: 480px; width: 92%;padding: 0 0 7px 0; line-height: 0;}
.kn_bxp{ font-size: 1.7rem; line-height: 1.6em; font-weight: 600; padding: 0 0 25px 0; margin: 0;}
.kn_btn{ background: #f4f3f1; display: table; border-radius: 0 !important;}
.kn_btn a{display: table; font-size: 1.3rem; line-height: 1em;padding: 13px 22px; background: url(../images/kn_arrow_b.webp) 94% center/6px no-repeat; border: none; border-radius: 0 !important;}
.kn_logo_cbpc{ max-width: 860px; width: 98%;padding: 0 0 18px 0; line-height: 0;}
.kn_cbpc_li{ width: 100%;}
.kn_cbpc_li li{ border: 1px solid #379f56; border-radius: 5px; padding: 20px; box-sizing: border-box; float: left;color: #379f56;position: relative;}
.kn_cbpc_li li:nth-child(1){ width: 28.5%; margin: 0 4.5% 0 0}
.kn_cbpc_li li:nth-child(2){ width: 32%; margin: 0 4.5% 0 0;}
.kn_cbpc_li li:nth-child(3){width: 30.5%;}
.kn_cbpc_littl{ font-size: 2rem; line-height: 1.2em; margin: 0 0 8px 0; text-align: center;}
.kn_cbpc_lip{ font-size: 1.35rem; line-height: 1.5em; padding: 0 0 10px 0;}
.kn_cbpc_liimg{ text-align: center;}
.kn_cbpc_liimg1 img{ max-width: 147px;}
.kn_cbpc_liimg2 img{ max-width: 170px;}
.kn_cbpc_liimg3 img{ max-width: 135px;}
.kn_cbpc_li_sankaku{ position: absolute; top: 46%; width: 1.8vw; right: calc(-25px - 0.6vw); max-width: 24px }
.kn_bxin2_l2{ width: 45%; float: left; padding: 10px 0 0 0;}
.kn_bxin2_r2{ width: 45%; float: right; padding: 10px 0 0 0;}
.kn_grptx{ font-size: 1.4rem; padding: 0 0 10px 0;}
.navi_fst{ width: 100% !important;}
sub{font-size: 0.7em;position: relative;}
.fi {opacity : 0;transform : translate(-50px, 0);transition : all 1s;}
.fi.scrollin {opacity : 1;transform : translate(0, 0);}
@media screen and (max-width: 767px) {
    .pc{ display:none;}
    .sp{ display:block;}
    .in{ padding: 0 15px;}
    .main_ttl{font-size: 1.7rem; }
    .mainHead_1{ margin:25px 0 !important; padding: 0 15px; font-size:1.5rem !important;  }
    .sec_hdnav{padding: 0 15px; margin: 0;}
    .sec_hdnav li{ width: 49.5%; margin: 0 1% 1% 0;}
    .sec_hdnav li:nth-child(even){ margin: 0 0 1% 0;}
    .sec_hdnav li a,.sec_hdnav li p{height: 42px; line-height: 42px;}
    .sec_hdnav li a{ background: #c8c8c9; display: block; font-size: 1.4rem; }
    .sec_hdnav li p{background: #595858;font-size: 1.4rem;}
    .sec_h_feature{font-size: 1.7rem; margin: 0 15px 15px 15px;}
    .feature_img{ padding:0 15px;}
    .feature_logolink{ padding: 10px 0 0 0;}
    .feature_logolink li img{padding: 9px 0;}
    #feat1,#feat2,#feat3,#feat4{ padding: 10px 0 0 0; margin: -10px 0 calc(50px + 5%) 0;}
    .feat_box1,.feat_box2{ width: 100% ; float: none;}
    .feature_logolink{ width: 100%; max-width: 100%;}
    .feature_logolink li{border-radius:5px;}
    .main_img{ height:250px;}
    
    /*環境ページ*/
    .kn_main_btn{ height: 30px; line-height: 30px; left: 15px; bottom: 18px;  font-size: 1.3rem;background: #71af42 url(../images/kn_arrow.webp) 95% center/7px no-repeat;}
    .kn_main_btn a{display: block; padding: 0 23px 0 25px; }
    .kn_main_btn:hover{background: #448f42 url(../images/kn_arrow.webp) 95% center/7px no-repeat; }
    .kn_bx_ttl{ font-size: 1.75rem;padding: 12px 18px;}
    .kn_bxin2{ width: calc(100% - 30px); padding:10px 0; box-sizing: border-box; margin: auto;}
    .kn_bxin2_bb{margin: 0 auto 10px auto;}
    .kn_bxin2_l{ width: 100%; float: none; margin: 0 0 20px 0;}
    .kn_bxin2_r{ width:100%; float: none;}
    .kn_bxp{ font-size: 1.36rem; padding: 0 0 10px 0; margin: 0;}
    .kn_logo_cl{ max-width: 320px; padding: 0 0 10px 0;}
    .kn_cbpc_li li{  padding: 15px; float: none;width: 100% !important; margin: 0 0 40px 0 !important;}
    .kn_cbpc_littl{ font-size: 2rem; line-height: 1.2em; margin: 0 0 15px 0; text-align: center;}
    .kn_cbpc_lip{ padding: 0; width: 51%; float: left;}
    .kn_cbpc_liimg{ width: 45%; float: right;}
    .kn_cbpc_liimg1 img{ max-width: 130px; width: 84%;}
    .kn_cbpc_liimg2 img{ max-width: 136px; width: 100%;}
    .kn_cbpc_liimg3 img{ max-width: 126px; width: 80%;}
    .kn_cbpc_li_sankaku{ position: absolute; top: calc(100% - 5px); width: 24px; right:calc(50% - 10px); transform: rotate(90deg);}
    .kn_bxin2_l2{ width: 100%; float: none; padding: 10px 0 20px 0;}
    .kn_bxin2_r2{ width: 100%; float: none; padding: 10px 0 0 0;}
    .kn_grptx{ font-size: 1.4rem; padding: 0 0 5px 0;}
}