@charset "UTF-8";

.l_breadcrumb ul {margin-bottom: 58px;}
.l_contents{background: #F9EED2;}

.contents_recommend h1{max-width: 566px;min-width: 283px;width: 80%;margin: 0 auto 45px;}

.contents_recommend .wrapper{padding-bottom: 60px;padding-right: 30px;padding-left: 30px;}
.contents_commitment > div.area_title{margin-bottom: 45px;}

.area_first .text{position: relative;padding: 26px 15px;margin-bottom:45px;}
.area_first .text::before,
.area_first .text::after{content: "";display: block;width: 100%;height: 3.5px;background: url(../img/line.png) repeat-x;background-size: auto 3.5px;position: absolute;left: 0;}
.area_first .text::before{top: 0;}
.area_first .text::after{bottom: 0;}
.area_first .text p{font-weight:bold;}

.area_first figure{margin-right:30px;margin-left:30px;text-align:center;}

.area_commitment{padding-top: 60px;}
.area_commitment h2 {max-width:374px;margin: 0 auto 10px;}
.area_commitment .btn a{min-width: 190px;max-width: 280px;width: 80%;margin: 0 auto;background: url(../img/btn_commitment.png) no-repeat 50% 50%;background-size: auto 18px;}

.area_contact .wrapper{padding-bottom: 223px;padding-right: 0;padding-left: 0;background: url(../../images/bg_mail.png) no-repeat 50% 100%;background-size: 191px auto;position: relative;}
.area_contact .frame{position: relative;background: #FFF;padding: 25px 15px 37px;-webkit-border-radius: 15px;border-radius: 15px;}
.area_contact .frame::after{content: "";display: block;width: 20px;height: 21.5px;background: url(../../images/parts_mail_frame.png) no-repeat 50% 50%;background-size: cover;position: absolute;bottom: -21px;left: 50%;transform: translateX(-50%);}
.area_contact .text{max-width: 340px;margin: 0 auto 20px;font-size: 0.9375rem;font-weight: bold;}
.area_contact .text span{display: block; min-width: 190px;max-width: 380px;width: 47%;}
.area_contact .text br{display:none;}
.area_commitment .btn a{display: block;text-indent: 100%;white-space: nowrap;overflow: hidden;place-content: center;position: relative;background-color: #FFF;color: #DD7C1B;border: 2px solid #DD7C1B;border-bottom: 8px solid;height: 64px;border-radius: 15px;}

@media screen and (min-width:768px) {
    h1.h1_ttl{width: 566px;height: 140px;padding-top: 0;}
    .area_commitment h2 {max-width: 423px;}
    .area_commitment .btn a{height: 60px;background-size: auto 18px;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
    .area_commitment .btn a:hover{transform: scale(1.1);}
    .area_contact .text {max-width: 580px;line-height: 2;margin: 10px auto 30px;font-size: 1rem;}
    .come_btn.contact a span{height: 18px;background-size: auto 18px;}
    .area_first .text{padding:40px 30px;}
	.area_contact .wrapper{background-position: calc(50% - 200px) 50%;padding: 40px 20px;display: flex;flex-direction: row-reverse;}
    .area_contact .text{max-width: 400px;background-position: 85% 40%;padding-left:10px;}
    .area_contact .frame{padding: 20px 20px 25px;margin:0;}
	.area_contact .frame::after{bottom: 50%;left: -11px;transform: translateX(-50%) rotate(90deg);}
    .area_contact .btn a{max-width: 400px;padding: 13px 23px 12px;}
    .area_contact .btn a img{width: 60%;margin: 0 auto;}

}

@media screen and (max-width:767px) {

}

@media screen and (max-width:480px) {

}