@charset "UTF-8";
/* CSS Document */
.page_delivery{}
.mv{
  overflow: hidden;
  position: relative;
  text-align: center;min-width: 1200px;margin: auto
}
.mv img{;border-radius: 0  0 50px 50px;}
.mv h2{position: absolute;left: 0;right: 0;margin: auto;top: 50%;z-index: 10; font-weight: bold; font-size: 3.1rem;letter-spacing: 0.1em;text-indent: 0.1em; line-height: 1;color: #fff;text-shadow: 2px 2px 3px rgba(0,0,0,0.5);}
.mv h2 span{font-size: 1.3rem}

@media screen and (max-width: 1200px) {/*小さい画面*/
.mv{ min-width: 100%;}
.mv .inner--base{width: 100%}
.mv img{height: 40vh!important;min-height: 300px; object-fit: cover;border-radius: 0  0 30px 30px}
.mv h2{font-size: calc(0.25vw + 1.5rem);}
}
.page_sec h3{font-weight: bold; font-size: 3.6rem;letter-spacing: 0.1em;text-indent: 0.1em;line-height: 1;}
.page_sec h3 span{font-size: 1.2rem}
@media screen and (max-width: 1200px) {/*小さい画面*/
.page_sec h3{font-size: calc(0.25vw + 2.5rem);line-height: 1.5;}
.page_sec h3 span{font-size: calc(0.25vw + 1rem);}
}


.about{margin-top: 80px;text-align: center}
.about h2{font-weight: bold; font-size: 3.6rem;letter-spacing: 0.1em;text-indent: 0.1em;}
.about .box{background:#f5f2ec;padding:30px;margin-top: 80px; border-radius: 50px;position: relative}
.about .box h3{width: 60%; background: #f6a700;color: #fff;margin: -50px auto 30px;padding: 8px;border-radius: 30px;font-size: 2.4rem;letter-spacing: 0.1em;text-indent: 0.1em;}
.about .box .col3{width: 26%}
.about .box .col3_2{width: 32%;border-left:1px solid #595757;border-right:1px solid #595757;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;padding: 0 20px;}
.about .box .col3_3{width: 34%}
.about .box h4{margin-top: 20px; font-weight: bold; font-size: 2.4rem;letter-spacing: 0.1em;text-indent: 0.1em;}
.about .box h4 span{background: linear-gradient(transparent 50%, #ffe65f 50%);}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.about h2{font-size: calc(0.25vw + 2.5rem);line-height: 1.5;}
.about .box h3{width: 80%; margin: -50px auto 30px;font-size: 2rem;}
.about .box .col3{width: 100%}
.about .box .col3_2{width: 100%;border:none;border-top:1px solid #595757; border-bottom:1px solid #595757; box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;padding: 20px  0px;margin: 20px auto}
.about .box .col3_3{width: 100%}
}



.bnt{margin-top: 60px;border-top: none!important}

.point{background: #f6a700;padding: 12px 0; margin-top: 80px;color: #fff;}
.point ul::after{position: absolute;  content: "";  width: 1px;  height: 100%;  background-color: #fff;  top: 0;  bottom: 0;  left: 0; right: 0; margin: auto;}
.point ul{border-left: 1px solid #fff;border-right: 1px solid #fff;padding: 20px;position: relative}
.point .icon{text-align: center;margin-top: -60px}
.kiyaku .bt{width: 450px;margin: 50px auto 0}
.kiyaku .bt a{text-align: center;border: 1px solid #f6a700;border-radius: 12px;color: #f6a700}
.kiyaku .bt a:after {    content: "";    position: absolute;    left: 90%;top: 50%; width: 13px;height: 13px;transform: translateY(-50%);	background: url("../shopping/images/delivery/arrow.svg")}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.point{margin-top: 50px;}
.point .icon{margin-top: -40px}
.point ul{border:none;padding: 20px 0;position: relative}
.kiyaku .bt{width: 90%;}
}



.pay{margin-top: 80px;text-align: center}
.pay h2{font-weight: bold; font-size: 3.6rem;letter-spacing: 0.1em;text-indent: 0.1em;}
.pay .box{background:#f5f2ec;padding:50px;margin-top: 50px; border-radius: 50px;position: relative}
.pay .box dl{text-align: left}
.pay .box dt{font-size: 2.4rem;width: 18%;text-align: center;}
.pay .box dd{width: 78%;margin-left: 3%;padding-left: 3%; border-left: 1px solid #595757;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;position: relative}
.pay .box dd .icon{text-align: right}
.pay .box h3{font-weight: bold; font-size: 1.9rem;letter-spacing: 0.1em;margin-bottom: 12px}

.pay .suppot{border: 1px solid #ed7e8c;background: #fff; padding:80px 50px 50px;margin-top: 80px; border-radius: 30px;position: relative}
.pay .suppot::after{position: absolute;  content: "";  width: 1px;  height: 70%;  background-color: #aba09a;  top: 0;  bottom: 0;  left: 66%;margin: auto;}
.pay .suppot::before{position: absolute;  content: "";  width: 1px;  height: 70%;  background-color: #aba09a;  top: 0;  bottom: 0;  left: 33%;margin: auto;}

.pay .suppot h4{background: #ed7e8c;color: #fff;width: 60%; margin: -110px auto 30px;padding: 8px;border-radius: 30px;font-size: 2.4rem;letter-spacing: 0.1em;text-indent: 0.1em;}
.pay .toiawase{margin-top: 40px;}
.pay .toiawase li:nth-child(1){background: #ed7e8c;color: #fff;padding: 4px 30px;border-radius: 30px;font-size: 1.6rem;letter-spacing: 0.1em;text-indent: 0.1em;margin-right: 20px;}

@media screen and (max-width: 768px) {/*スマホのスタイル*/
.pay h2{font-size: calc(0.25vw + 2.5rem);line-height: 1.5;}
.pay .box{padding:20px;margin-top: 30px; border-radius:30px;position: relative}
.pay .box dt{font-size: 2.4rem;width: 100%;text-align:left;}
.pay .box dd{width: 100%;margin-left: 0%;padding-left: 0%; border-top: 1px solid #595757;border-left: none;padding: 20px 0}
.pay .box dd .icon{margin-bottom: 20px;}
.pay .suppot{padding:50px 20px 20px;margin-top: 50px; border-radius: 20px;position: relative}
.pay .suppot::after,
.pay .suppot::before{background: none}
.pay .suppot .col3{width: 100%}
.pay .suppot .col3:nth-child(2){border-bottom: 1px solid #595757;border-top: 1px solid #595757;padding: 20px 0;margin: 20px 0}
.pay .suppot h4{width: 80%; margin: -80px auto 30px;font-size: 2rem;}
.pay .toiawase li:nth-child(1){margin-right: 0px;}
.pay .toiawase li:nth-child(2) a{font-size: 2rem}
}


.qa{margin-top: 120px;text-align: center}
.qa dl{text-align: left;margin-top: 30px;background: #f5f2ec;padding: 30px;border-radius: 30px;}
.qa dt{font-size: 2.2rem;letter-spacing: 0.1em;color: #f6a700;font-weight: bold;margin-bottom: 12px}
.qa dt span{display: inline-block;background: #f8b94a;width: 40px;height: 40px;line-height: 40px; text-align: center;color: #fff;border-radius: 50%;font-size: 1.6rem;letter-spacing: 0.1em;text-indent: 0.1em;margin-right: 20px;}
.qa dd{margin-left: 60px;}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.qa{margin-top: 80px;}
.qa dt span{font-size: 1.4rem;margin-right: 14px;}
.qa dt{font-size: 2rem;}
.qa dd{margin-left: 0px;}
}

ul.takuhai .copy{margin-top: 30px;letter-spacing: 0.1em;text-indent: 0.1em;text-align: center;font-size: 3rem}
ul.takuhai{margin: 50px 0;display: flex;  flex-wrap: wrap;  gap: 0px;  width: 100%;border-radius: 80px;overflow: hidden;transition: transform 0.3s ease-out;}
ul.takuhai:hover{  transform: scale(1.1);   z-index: 10;}
.takuhai li{align-items: center;  background-color: #ccc;  display: flex; }
.takuhai li:nth-child(1){width: 55%;}
.takuhai li:nth-child(2){width: 45%;background: #f5a61a;color: #fff;align-items: center;justify-content: center;}
.takuhai .bt{margin: 30px auto 0}
.takuhai .bt a{text-align: center}
@media screen and (max-width: 1200px) {/*スマホのスタイル*/
.takuhai li:nth-child(1){width: 40%;}
.takuhai li:nth-child(2){width: 60%;padding: 30px 0}
.takuhai li img{object-fit:cover;height: 100%}
ul.takuhai .copy{font-size: calc(0.25vw + 2rem);line-height: 1.5;margin-top: 0px;}
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
ul.takuhai{margin: 50px 0;border-radius: 50px;}
.takuhai li:nth-child(1){width: 100%;}
.takuhai li:nth-child(2){width: 100%;}
}