/* =========================================================
		common
========================================================= */

body{font-family:'Poppins', "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, メイリオ, sans-serif; font-size:16px;line-height:1.6; margin:0;padding:0;min-width:100%;letter-spacing:1.5px;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative; color: #444; font-feature-settings: 'palt' 1; font-weight: 500;}
a{text-decoration: none; color: #1b0000; transition: all .3s;}
.pc-none{display:none !important;}
.sp-none{display:block;}
img{width:100%;} .clear{clear:both;} select::-ms-expand{display:none;}
button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none;}
.blue{color:#26a7e1;}
.navy{color: #164a8c;}
.marker{background: linear-gradient(transparent 70%, #f7ee68 0%);}
.font_s{font-size: 0.8em; font-weight: 400;}
.font_b{font-size: 1.15em; line-height: 1.6;}
.font_b2{font-size: 1.4em; line-height: 1.4;}
.flex_l{flex-direction: row-reverse;}

/* =========================================================
		KV
========================================================= */
.kv_area_base{position: relative; background: url("../img/fv_bg.webp") top center; background-size: cover;}
.kv_area{padding:0 0 0; max-width: 980px; width: 92%; margin: 0 auto; height: 485px;}
.kv_area .kv_logo{width: 395px; padding: 82px 0 32px 0;}
.kv__main__txt1 {font-size: 29px; line-height: 1.6; padding-left: 0.5%; letter-spacing: 2px; color: #164a8c;}
.kv__main__txt1 span{color: #e31e23; font-size: 1.05em; font-weight: 600;}
.kv_icon{position: absolute; width: 200px; right: 2%; top: 3%;}
/* =========================================================
		common
========================================================= */
.contents{width: 92%; max-width: 940px; margin: 0 auto; padding: 55px 0 60px;}
.section_m_copy{font-size: 26px; text-align: center; padding-bottom: 35px; line-height: 1.55;}
.section_m_copy span{font-size: 1.1em;}

.wp_m_ttl{background: #164a8c; position: relative; height: 100px;}
.wp_m_ttl .ttl_en{letter-spacing: 0; font-size: 70px; color: #365d96; font-weight: 700; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);}
.wp_m_ttl h2{font-size: 30px; text-align: center; color: #fff; padding:36px 0 0; position: relative;}
.triangle1 {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 22px solid #164a8c;
    margin: 0 auto -22px;
	z-index: 2;
    position: relative;
}
/* =========================================================
		about
========================================================= */
#about .main_copy{font-size: 28px; line-height: 1.7; text-align:center; margin:60px auto 45px;}
#about .main_copy span{font-size: 1.15em; font-weight: 600;}
.about_hp_image{width: 90%; max-width: 1100px; margin: 0 auto 70px;}
.about_hp_image ul{display: flex; justify-content: space-between;}
.about_hp_image ul li{width: 31.5%;}

#about_point{background: #e6f0f8;}
.about_point_area ul{display: flex; justify-content: space-between;}
.about_point_area ul li{width: 30.8%; background: #fff; border-radius: 25px; border: 1px solid #95caf2;}
.about_point_area ul li dl{padding: 5% 6% 7%;}
.about_point_area ul li dt{width: 62%; padding: 30px 0 20px; margin: 0 auto;}
.about_point_area ul li dd h3{padding-bottom: 12px; font-size: 17px; color: #164a8c; text-align: center; line-height: 1.5;}
.about_point_area ul li dd p{font-size: 15px; text-align: center; line-height: 1.7;}

.about_point_area ul .point1 dd h3{text-align: left; padding-left: 6%;}
.about_point_area ul .point2 dt{width: 40%; padding: 23px 0 20px;}
.about_point_area ul .point3 dt{width: 24%; padding: 23px 0 20px;}
/* =========================================================
		production
========================================================= */
.production_con{background: #e6f0f8; padding: 0 0 0; margin-top: 0;}
.production_con .contents{padding: 45px 0 20px; max-width: 940px;}
.pro_point_area{background: #fff; padding: 35px 30px 30px 63px; display: flex; align-items: center; position: relative; border-radius: 25px; margin-bottom: 45px;}
.pro_point_area .point_detail{width: 44%; margin-right: 2%;}
.pro_point_area .point_detail h3{font-size: 24px; padding: 0 0 4%; line-height: 1.7;}
.pro_point_area .point_detail p{font-size: 16px; line-height: 1.8;}
.pro_point_area .kv_pic{width: 52%;}
.pro_point_area .pro_icon1{position: absolute; top: -15px; left: 0; width: 190px;}

.pro_point_area2 .point_detail{width: 50%; margin-right: 3%;}
.pro_point_area2 .kv_pic{width: 44%;}

/* =========================================================
		smart_image
========================================================= */
#smart_image:before, #package:before{
content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    background-image: linear-gradient(#f7f7f7 1px, transparent 1px), linear-gradient(to right, #f7f7f7 1px, #ffffff 1px);
    background-size: 20px 20px;}
#smart_image{position: relative;}
#smart_image .contents{display: flex; position: relative; justify-content: space-between; align-items: center; max-width: 940px; padding: 60px 0 66px;}
#smart_image .smart_pic{width: 41%;}
#smart_image .smart_detail{width: 53%; padding-bottom: 15px;}
.smart_detail .subcopy{width: 370px;}
.smart_detail h3{font-size: 24px; padding: 10px 0 20px;}
.smart_detail p{font-size: 16px; line-height: 1.8;}
.smart_illust{width: 125px; position: absolute; right: -5px; bottom: 40px;}
/* =========================================================
		maintenance
========================================================= */
.mainte_con{background: #e8f8ff; padding: 0 0 0; margin-top: 0;}
.mainte_con .contents{padding: 45px 0 70px; max-width: 820px;}
.mainte_point ul{display: flex; justify-content: space-between; position: relative;}
.mainte_point li{width: 47.5%; background: #fff; border: 1px solid #95caf2; border-radius: 25px;}
.mainte_point li dl{padding: 35px 0 35px;}
.mainte_point li dl dt{width: 34%; margin: 0 auto 23px;}
.mainte_point li:nth-child(3) dl dt{width: 38%; margin: 36px auto 35px;}
.mainte_point li dl dd p{text-align: center; line-height: 1.5; padding: 0 0 4px;}
.mainte_point li dl dd h3{font-size: 22px; text-align: center;}
.mainte_point .update_icon{width: 13%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: none;}

.point_copy_area{margin: 30px auto 50px; display: flex; justify-content: center; align-items: center;}
.point_copy_area .icon{width: 58px; margin-right: 25px;}
.point_copy_area .copy1{font-size: 17px; text-align: left; font-weight: 600; line-height: 1.7;}

.mainte_comment{position: relative; width: 100%; margin-bottom: 70px;}
.mainte_comment .comment1{width: 530px; margin: 0 auto;}
.mainte_comment .illust1{width: 155px;
    position: absolute;
    bottom: -70px;
    right: 50px;}

.mainte_copy_box{display: flex; justify-content: center; align-items: center;}
.mainte_copy_box .illust2{width: 130px; margin-right: 35px;}
.mainte_copy_box h4{font-size: 32px; line-height: 1.7;}

/* =========================================================
		feature
========================================================= */
#package{position: relative;}
#package .contents{padding: 70px 0 35px; max-width: 880px;}
.package_con .pack_point{background: #fff; background: #eff7fb; border-radius: 25px; position: relative; margin-bottom: 40px;} 
.package_con .pack_point dl{padding: 38px 45px 32px 50px; display: flex; justify-content: space-between; align-items: center;}
.package_con .pack_point dl dt{width: 16%; text-align: center;}
.package_con .pack_point dl dt img{width: 82%; margin: 0 auto;}
.package_con .pack_point dl dd{width: 80%;}
.package_con .pack_point dl .pack_img2 img{width: 64%;}
.package_con .pack_point dl h3{font-size: 20px; padding-bottom: 8px; color: #26a7e1; }
.package_con .pack_point dl .copy1{font-size: 16px; text-align: left; padding-bottom: 5px; line-height: 1.8;}
.package_con .pack_point dl .att1{font-size: 12px;}
.package_con .feature1 {
    position: absolute;
    top: -10px;
    left: 0;
    width: 160px;
}

/* =========================================================
		flow
========================================================= */
#flow .contents{max-width: 1000px; padding: 55px 0 70px;}
.flow_sub_ttl{display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 1;
font-size: 20px;}
.flow_sub_ttl::before,.flow_sub_ttl::after {
  width: 1px;
  height: 22px;
  content: "";
  background-color: #444;
}

.flow_sub_ttl::before {
  margin-right: 0.9em;
  transform: rotate(-30deg);
}

.flow_sub_ttl::after {
  margin-left: 0.9em;
  transform: rotate(30deg);
}
.flow_ttl{font-size: 28px; text-align: center; color: #114786; padding:8px 0 50px;}
.flow_ttl span{border-bottom: 2px solid #114786;}


  .sec-intro__list01 {
    max-width: 100%;
    padding: 0 50px 0 0;
    display: flex;
  }

.sec-intro__step {
  position: relative;
  padding: 50px 6.25% 20px 63px;
}

  .sec-intro__step {
    flex: 1;
    padding: 50px 0 40px 70px;
  }



  .sec-intro__step::before {
    font-size: clamp(1px, 3.07vw, 42px);
    top: -0.5em;
    left: 45px;
  }

.sec-intro__step::after {
  content: "";
  width: 100%;
  height: 30px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}


  .sec-intro__step::after {
    width: 50px;
    height: 100%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 0;
    left: 100%;
  }

.sec-intro__step:nth-child(1) {
        padding-left: 40px;
    }
.sec-intro__step .head {
  font-weight: 700;
  line-height: 1.6;
	    padding-bottom: 15px;
	font-size: 18px;
}
.sec-intro__step .number{
	font-weight: 500;
    color: #26a7e1;
    position: absolute;
    top: -25px;
    left: 42px;
    font-size: 40px;
}

.sec-intro__step .txt01{font-size:15px; line-height: 1.7;}
.sec-intro__step:nth-child(1) {
  background: #eff7fb;
}

.sec-intro__step:nth-child(2) {
  background: #dceff8;
}

.sec-intro__step:nth-child(3) {
  background: #c6e5f3;
}

.sec-intro__step:nth-child(4) {
  background: #b0dbee;
}
.flow_copy{font-size: 22px; text-align: center; margin: 36px auto 0;}




/* =========================================================
		price
========================================================= */

.price_area{background: #f3f3f3;}
.price_area .contents{padding: 65px 0 70px; max-width: 860px;}
.price_flex{display: flex; justify-content: space-around;}
.price_box{width: 46%;
    background: #fff;
    border-radius: 25px;}
.price_box_inner{padding: 40px 35px 40px; text-align: center;}
.price_box_inner h3{text-align: center; font-size: 20px; padding: 0 0 15px; color: #164a8c;}
.price_box_inner .price{text-align: center; font-size: 16px; border-bottom: 1px solid #999; padding-bottom: 5px; margin-bottom: 20px;display: inline-block;}
.price_box_inner .price span{font-weight: 600; font-size: 2.5em; letter-spacing: -1px; line-height: 1;}
.price_box_inner .price_copy{font-size: 15px; padding-bottom: 10px;}
.price_box_inner .price_att{font-size: 11px;}

.price_box_inner .price2{text-align: center; font-size: 16px; padding:8px 0 3px;}
.price_box_inner .price2 span{font-weight: 600; font-size: 2em; letter-spacing: -1px; line-height: 1;}

.price_mcopy{font-size: 22px; font-weight: 500; text-align: center; padding: 35px 0 0;}
.price_mcopy span{font-weight: 600; color: #164a8c; font-size: 1.15em;}
/* =========================================================
		contact
========================================================= */
#contact{text-align: center; padding-bottom: 30px;}
#contact h2{font-size: 28px; text-align: center; padding-bottom: 45px; color: #114786;}
#contact h2 span {border-bottom: 2px solid #114786;}

.contact_txt1{font-size: 19px; font-weight: 600; padding-bottom:10px}
.contact_txt2{font-size: 16px; padding-bottom:10px}
.contact_link, .faq_link{margin: 0 auto 30px;}
.btn1{border-bottom: 4px solid rgba(0,0,0,0.2);
    display: block;
    padding: 28px 0;
    width: 460px;
    text-align: center;
    background: #e31e23;
    color: #FFF;
    text-decoration: none;
	font-size: 20px;
	border-radius: 4em;
	margin: 0 auto;
	font-weight: 600;
	line-height: 1;
	transition: all .3s;
	position: relative;
    }
.contact_link .btn1:after{
	    content: "";
    width: 8px;
    height: 8px;
    border-bottom-style: initial;
    border-left-style: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 7%;
    margin-top: -5px;
    border-width: 2px 2px 0px 0px;
    border-image: initial;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.btn1:hover{transform: scale(1.03,1.03); filter: brightness(1.10); }

.faq_link a{display: block;
    padding: 18px 0 18px 28px;;
    width: 170px;
    text-align: center;
    background: #333;
    color: #FFF;
    text-decoration: none;
	font-size: 22px;
	border-radius: 4em;
	margin: 0 auto;
	font-weight: 600;
	line-height: 1;
	transition: all .3s;
	position: relative;}

.faq_link a:before{
	    background-image: url(../img/faq_icon.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 23px;
    left: 53px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
	
}
.faq_link a:hover{filter: brightness(1.6);}
.ibj_link a{background: #164a8c; border-bottom: 4px solid rgba(0,0,0,0.5); padding-left: 60px; width: 400px;}
.ibj_link a:before{
	    background-image: url("../img/ibj_logo_w.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 43px;
    left: 80px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 65px;
	
}
.preparation{font-size: 45px; text-align: center; margin: 120px auto 100px;}
.preparation_link a{width: 300px; margin-bottom: 200px; padding: 20px 0;}
.preparation_link a:before{display: none;}
/*========- footer ================*/
footer{background: #333; padding: 40px 0 45px; color: #fff;}
.footer_inner{max-width: 940px; width: 90%; margin: 0 auto; display: flex; justify-content: space-between;}
.footer_txt{font-size: 12px; line-height: 1.4;}
.footer_inner .f_logo{width: 120px;}

.copyr{font-size: 12px; text-align: center; letter-spacing: 0; padding-top: 45px;}