@media screen and (max-width:  767px) {
body{padding: 0px; width: 100%; min-width: 100%; overflow-x: hidden; word-wrap: break-word;}
.pc-none{display: block !important;}
.sp-none{display: none !important;}
img {width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
.font_b2 {font-size: 1.3em;}
/* =========================================================
		KV
========================================================= */
.kv_area_base{position: relative; background: none;}
.kv_area{padding:0 0 0; max-width: inherit; width: 100%; margin: 0 auto; height: inherit;}
.kv_area .kv_logo{width: 100%; padding: 0;}

	
/* =========================================================
		common
========================================================= */
.contents{width: 90%; max-width: inherit; margin: 0 auto; padding: 12% 0 15%;}
.section_m_copy{font-size: 20px; text-align: center; padding-bottom: 6%; line-height: 1.7;}
.section_m_copy span{font-size: 1.15em;}

.wp_m_ttl{background: #164a8c; position: relative; height: auto;}
.wp_m_ttl .ttl_en{font-size: 46px; position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);}
.wp_m_ttl h2{font-size: 22px; padding:6% 0 3%; position: relative;}
.triangle1 {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 20px solid #164a8c;
    margin: 0 auto -20px;

}
/* =========================================================
		about
========================================================= */
#about .main_copy{font-size: 20px; line-height: 1.7; margin:10% auto 9%; width: 90%;}
#about .main_copy span{font-size: 1.2em;}

#swiper1{margin:0 auto 12%;}
.swiper-wrapper {transition-timing-function: linear !important;}

.about_point_area ul{display: block;}
.about_point_area ul li{width: 88%; margin: 0 auto 7%; border-radius: 20px;}
.about_point_area ul li:last-child{margin: 0 auto 0;}	
.about_point_area ul li dl{padding: 5% 5% 7%;}
.about_point_area ul li dt{width: 63%; padding: 30px 0 25px; margin: 0 auto;}
.about_point_area ul li dd h3{padding-bottom: 14px; font-size: 18px;}
.about_point_area ul li dd p{font-size: 15px; line-height: 1.7;}
.about_point_area ul .point1 dd h3{text-align: left; padding-left: 5%;}
.about_point_area ul .point2 dt{width: 41%; padding: 23px 0 20px;}
.about_point_area ul .point3 dt{width: 24%; padding: 23px 0 20px;}
	
	
/* =========================================================
		production
========================================================= */

.production_con .contents{padding: 10% 0 5%; max-width: inherit;}
.production_con .section_m_copy { padding-bottom: 9%;}	
.pro_point_area{padding: 7% 7% 7%; display: block; border-radius: 20px; margin-bottom: 9%;}
.pro_point_area .point_detail{width: 100%; margin-right:0;}
.pro_point_area .point_detail h3{font-size: 19px; padding: 8% 0 4%; line-height: 1.6;}
.pro_point_area .point_detail p{font-size: 15px; line-height: 1.7;}
.pro_point_area .kv_pic{width: 100%; margin: 6% auto 0;}
.pro_point_area .pro_icon1{position: absolute; top: -10px; left: 0; width: 48%;}

.pro_point_area2 .point_detail{width: 100%; margin-right: 0;}
.pro_point_area2 .kv_pic{width:96%; margin: 6% auto;}
	
/* =========================================================
		smart_image
========================================================= */

#smart_image .contents{display: block; max-width: inherit; padding: 13% 0 12%;}
#smart_image .smart_pic{width: 80%; margin: 0 auto 7%;}
#smart_image .smart_detail{width: 92%; margin: 0 auto; padding: 0;}
.smart_detail .subcopy{width: 100%;}
.smart_detail h3{font-size: 20px; padding: 6px 0 12px;}
.smart_detail p{font-size: 15px; line-height: 1.7;}
.smart_illust{width: 26%; position: absolute; right: -4%; bottom: 0;}
	
/* =========================================================
		maintenance
========================================================= */
.mainte_con .contents{padding: 10% 0 10%; max-width: inherit;}
.mainte_point ul{display: block; position: relative;}
.mainte_point li{width: 88%; margin: 0 auto 6%; order-radius: 20px;}
.mainte_point li dl{padding: 10% 5%;}
.mainte_point li dl dt{width: 40%; margin: 0 auto 18px;}
.mainte_point li:nth-child(3) dl dt{width: 43%; margin: 18px auto 25px;}
.mainte_point li dl dd p{line-height: 1.7; font-size: 15px; padding: 0 0 2px;}
.mainte_point li dl dd h3{font-size: 18px;}
.mainte_point .update_icon{width: 18%; position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%);}

.point_copy_area{margin: 4% auto 10%; display: block; width: 94%;}
.point_copy_area .icon{width: 13%; margin:0 auto 3%; display: none;}
.point_copy_area .copy1{font-size: 15px; line-height: 1.7;}

.mainte_comment{position: relative; width: 100%; margin-bottom: 30%;}
.mainte_comment .comment1{width: 100%; margin: 0 auto;}
.mainte_comment .illust1{width: 33%;
    position: absolute;
    bottom: -100px;
    right: 0;}

.mainte_copy_box{display: flex; justify-content: center; align-items: center;}
.mainte_copy_box .illust2{width: 29%;
        margin-right: 5%;
        margin-left: -3%;}
.mainte_copy_box h4{font-size: 22px; line-height: 1.8;}
	
	
/* =========================================================
		feature
========================================================= */

#package .contents{padding: 12% 0 3%; max-width: inherit;}
.package_con .pack_point{border-radius: 20px; margin-bottom: 8%; width: 90%; margin: 0 auto;} 
.package_con .pack_point dl{padding: 20% 7% 7%; display: block; margin-bottom: 11%;}
.package_con .pack_point dl dt{width: 100%; padding-bottom: 9%;}
.package_con .pack_point dl dt img{width: 35%;}
.package_con .pack_point dl dd{width: 100%;}
.package_con .pack_point dl .pack_img2 img{width: 27%;}
.package_con .pack_point dl h3{font-size: 18px; padding-bottom: 10px; text-align: center; line-height: 1.5;}
.package_con .pack_point dl .copy1{font-size: 15px; padding-bottom: 5px; line-height: 1.7;}
.package_con .pack_point dl .att1{font-size: 11px; letter-spacing: 0;}
.package_con .feature1 {
    position: absolute;
    top: -10px;
    left: 0;
    width: 48%;
}
	

/* =========================================================
		flow
========================================================= */
#flow .contents{max-width: inherit; padding: 12% 0 12%;}
.flow_sub_ttl{font-size: 17px;}

.flow_ttl{font-size: 20px; text-align: center; color: #114786; padding:8px 0 10%; letter-spacing: 0.5px;}



  .sec-intro__list01 {
    max-width: inherit;
    padding: 0 0 0 0;
    display: block;
	  width: 96%;
	  margin: 0 auto;
  }

.sec-intro__step {
  position: relative;
  padding: 55px 6.25% 17px 63px;
}




 

.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:nth-child(1) {
        padding-top: 35px;
	 padding-left: 63px;
    }



.sec-intro__step .head {
  font-weight: 700;
  line-height: 1.5;
	    padding-bottom: 10px;
	font-size: 17px;
}
.sec-intro__step .number{
	font-weight: 500;
    color: #26a7e1;
    position: absolute;
    top: 48px;
    left: 15px;
    font-size: 25px;
	letter-spacing: 0;
}
.sec-intro__step:nth-child(1) .number{ top: 28px;}	
	.sec-intro__step .txt01{font-size: 15px; line-height: 1.7;}

.flow_copy{font-size: 18px; text-align: center; margin: 16% auto 0;}




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


.price_area .contents{padding: 10% 0 12%; max-width: inherit;}
.price_flex{display: block;}
.price_box{width: 90%; border-radius: 20px; margin: 0 auto 5%;}
.price_box_inner{padding: 8% 5% 8%;}
.price_box_inner h3{font-size: 16px; padding: 0 0 5%;}
.price_box_inner .price{font-size: 15px;  padding-bottom: 5px; margin-bottom: 20px;display: inline-block;}
.price_box_inner .price span{font-size: 2.3em; letter-spacing: -1px; line-height: 1;}
.price_box_inner .price_copy{font-size: 14px; line-height: 1.7; padding-bottom: 10px;}
.price_box_inner .price_att{font-size: 11px; letter-spacing: 0;}

.price_box_inner .price2{font-size: 14px; padding:8px 0 3px;}
.price_box_inner .price2 span{font-size: 1.8em; letter-spacing: -1px; line-height: 1;}

.price_mcopy{font-size: 18px; line-height: 1.7; padding: 3% 0 0;}
.price_mcopy span{font-size: 1.15em;}

/* =========================================================
		contact
========================================================= */
#contact{padding-bottom: 2%;}
#contact h2{font-size: 22px; padding-bottom: 10%;}

.contact_txt1{font-size: 16px; padding-bottom:7px}
.contact_txt2{font-size: 15px; padding-bottom:7px}
.contact_link, .faq_link{margin: 0 auto 7%;}
.btn1{
    padding: 12px 0;
	width: 100%;
	font-size: 18px;
	line-height: 1.4;
	transition: all .3s;
	position: relative;
    }
.contact_link .btn1:after{
	    content: "";
    width: 10px;
    height: 10px;
    border-bottom-style: initial;
    border-left-style: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 9%;
    margin-top: -5px;
    border-width: 2px 2px 0px 0px;
    border-image: initial;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.faq_link a{display: block;
    padding: 18px 0 18px 28px;
    width: 54%;
    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;}


.ibj_link a{background: #164a8c; width: 100%; padding: 25px 0 25px 0}
	.ibj_link a span{padding-left: 18%;}	
.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: 35px;
    left: 14%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
	
}

.preparation{font-size: 36px; text-align: center; margin: 100px auto 60px; width: 90%;}
.preparation_link a{width: 70%; margin-bottom: 100px; font-size: 18px; padding: 18px 0;}
.preparation_link a:before{display: none;}	
/*========- footer ================*/
footer{padding: 8% 0;}
.footer_inner{max-width: inherit; width: 90%; margin: 0 auto; display: block;}
.footer_txt{font-size: 11px; line-height: 1.5;}
.footer_inner .f_logo{width: 90px; margin:20px auto 0;}

.copyr{font-size: 11px; text-align: center; letter-spacing: 0; padding-top: 20px;}
	
/*========- sp beside================*/	
@media (orientation: landscape){
.ibj_link a:before{left: 33%;}
	.faq_link a:before{ left: 34%;}
	}

	
	
	
}