@charset "UTF-8";

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

h1.h1_ttl{margin-right:auto;margin-left:auto;text-align:center;}
h1.h1_ttl img{width: 80%;max-width: 480px;min-width: 265px;}

.contents_commitment{padding-bottom: 50px;}
.contents_commitment > div.area_title{margin-bottom: 45px;}

.area_comodity h2.h2_ttl{text-align:center;margin: 0 auto 30px;}
.area_purchase h2.h2_ttl{position: relative;text-align:center;margin: 0 auto 50px;}

ul.list_menu{display: flex;gap: 34px;padding: 0 26.5px;max-width: 680px;margin-right: auto;margin-left: auto;margin-bottom: 67px;}
ul.list_menu li{width: 50%;}
ul.list_menu li a,.area_recommend .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: 6px solid;height: 52px;border-radius: 15px;}

ul.list_menu li:first-of-type a{background-image: url(../img/btn_comodity.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}
ul.list_menu li:nth-of-type(2) a{background-image: url(../img/btn_purchase.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}

.area_message{position: relative;background: url(../../images/bg_msg_top.svg) no-repeat left top #FFF;background-size: 100%;position: relative;padding-top: 7%;}
.area_message .wrapper{position: relative;}
.area_message h3{font-size:1.125rem;display: inline-block;color: #FFF;background: #D8A619;font-weight: bold;border-radius: 8px;line-height: 1;padding: 7px 13px 6px;letter-spacing: 0.1rem;position: absolute;left: 16px;top: -2.5vw;}
.area_message .wrapper p{font-size:1rem;padding: 35px 25px 20px;}


.area_comodity{padding-bottom: 50px;}

.list_store{display: flex;flex-wrap: wrap;gap: 40px 8%;}
.list_store li{width: calc(50% - 4%);}
.list_store li figure{position: relative;margin-bottom: 20px;}
.list_store li figure span.img{ display: block;width: 100%;height: 0;padding-top: 100%;background-repeat: no-repeat;background-size: cover;-webkit-border-radius: 100vh;border-radius: 100vh;overflow: hidden;}
.list_store li figure img{object-fit: cover;}
.list_store li figure span.title{ display: flex;align-items: center;justify-content: center;min-width: 58px;height: 28px;position: absolute;right: 0;bottom: 10px;
    background: #D8A619;color: #FFF;font-size: 1rem;font-weight: bold;letter-spacing: 0.05rem;-webkit-border-radius: 100vh;border-radius: 100vh;padding: 0 10px;
}
ul.list_store li .text{font-size: 0.9375rem;}

.area_items h3,
.area_point h3{position: relative;display: inline-block;}

.area_items h3{margin-bottom: 30px;}
.area_point h3{margin-bottom: 20px;}

.area_items h3::after,
.area_point h3::after{content: "";display: block;position: absolute;top: 0;}

.area_items h3 img{width: 134px;}
.area_items h3::after{background: url(../img/parts_comodity.png) no-repeat;width: 45px;height: 44px;background-size: contain;top: -19px;right: -60px;}

.area_point h3 img{width: 177px;}
.area_point h3::after{background: url(../img/parts_purchase.png) no-repeat;width: 38px;height: 47px;background-size: contain;top: -19px;right: -50px;}

.area_items,.area_point{position: relative;background: url(../../images/bg_msg_btm.svg) no-repeat left -6vw #F9EED2;background-size: 100%;position: relative;padding-top: 7%;}
.area_items .wrapper,.area_point .wrapper{padding-top: 50px;position: relative;}
.area_recommend{padding-top: 65px;padding-bottom: 50px;}

.area_recommend h2 {margin: 0 auto;text-align:center;}
.area_recommend h2 img{width:270px;}
.area_recommend .btn a{min-width: 190px;max-width: 380px;width: 60%;margin: 0 auto;background-image: url(../img/btn_recommend.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}

@media screen and (min-width:768px) {

    .area_comodity h2.h2_ttl img{max-width: 598px;}
    .area_purchase h2.h2_ttl img{max-width: 598px;}

    .area_recommend h2 img {width:320px;}
    .area_recommend .btn a{background-size: auto 18px;}

    ul.list_menu li:first-of-type a{background-size: auto 19px;}
    ul.list_menu li:nth-of-type(2) a{background-size: auto 17px;}
    ul.list_menu li a,.area_recommend .btn a{height: 60px;}
    ul.list_menu li a{-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
    ul.list_menu li a:hover{transform: translateY(-10px);}

    .area_message h3{font-size: 1.125rem;}
    .area_message .wrapper{padding-right: 0;padding-left: 20px;}        
    .area_message .wrapper p{font-size: 1rem;padding: 30px 0 10px;line-height: 1.7;}

    ul.list_store li .text{font-size: 0.9375rem;}
    .area_items .wrapper, .area_point .wrapper{padding-right: 25px;padding-left: 25px;}
    .area_items h3 img{width: 155px;}
    .list_store li figure span.title{font-size: 1rem;letter-spacing: 0.15rem;}
    .area_point h3 img{width: 205px;}
    .list_store li figure{max-width: 240px;margin: 0 auto 20px;}

}

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

}

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

}