@charset "utf-8";
/*------------------------  delivery.css  ------------------------*/



/*-----  module  -----*/
.contents { position: relative; margin: 0 auto; padding: 0 3% 70px; max-width: 1180px; }
.c-box { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.1); }
.btn { display: flex; align-items: center; height: 54px; position: relative; padding: 0 32px 0 26px; background: #22150e; font-weight: 800; font-size: 16px; line-height: 1.3; color: #fff; border-radius: 9999px; }
.btn::after { content: ''; position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; background: url(/images/ico_arrow01.svg) no-repeat; background-size: contain; transform: translate(0, -50%); }

@media screen and (max-width: 800px) {
 .contents { padding: 0 3% 30px; }
 .btn { justify-content: center; height: 50px; padding: 0 30px; font-size: 15px; }
 .btn::after { right: 12px; width: 14px; height: 14px; }
}



/*-----  main-visual  -----*/
.main-visual { margin: 0 0 50px; }

@media screen and (max-width: 800px) {
 .main-visual { margin: 0 0 30px; }
}



/*-----  del-nav  -----*/
.del-nav { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -7px 60px; }
.del-nav .nav { flex-basis: 28%; padding: 0 7px; }
.del-nav .nav .link { display: flex; align-items: center; padding: 0 12px; height: 82px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.1); }
.del-nav .nav .link .ico { width: 60px; height: 60px; }
.del-nav .nav .link .label { padding-left: 14px; font-weight: 800; font-size: 16px; line-height: 1.3; letter-spacing: 0; }


@media screen and (max-width: 800px) {
 .del-nav {  margin: 0 -5px 30px; }
 .del-nav .nav { flex-basis: calc(100%/2); padding: 0 5px 10px; }
 .del-nav .nav .link { padding: 0 8px; height: 58px; }
 .del-nav .nav .link .ico { width: 42px; height: 42px; }
 .del-nav .nav .link .label { padding-left: 9px; font-size: 14px; }
}



/*-----  del-block  -----*/
.del-block { padding: 0 0 60px; }
.del-block .del-block-inner { padding: 0; }

.del-head { position: relative; }
.del-head::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 160px; }
.del-head::after { content: ''; position: absolute; top: 30px; left: 50%; width: 260px; height: 260px; background: #fff; border-radius: 9999px; transform: translate(-50%, 0); }
.del-head .del-title { position: relative; margin: 0 auto; padding: 94px 0 24px; max-width: 260px; z-index: 2; }
.del-head .del-title::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 40px; height: 2px; transform: translate(-50%, 0); }
.del-head .del-title .ico { margin: 0 auto; width: 104px; }
.del-head .del-title .title { padding: 18px 0 0; font-weight: 800; font-size: 26px; line-height: 1.3; text-align: center; }

.del-info { padding: 35px 8% 18px; }
.del-info .lead { font-weight: 800; font-size: 26px; line-height: 1.5; text-align: center; }
.del-info .table { padding: 45px 0 0; }
.del-info .table .box { display: flex; padding: 0 0 35px; }
.del-info .table .box .item { display: flex; justify-content: center; align-items: center; width: 190px; height: 46px; color: #fff; font-weight: 800; font-size: 19px; line-height: 1.3; border-radius: 9999px; }
.del-info .table .box .data { flex: 1; display: block; padding: 0 0 0 25px; }
.del-info .table .box .data .txt { padding: 0 0 4px; font-weight: 800; font-size: 19px; line-height: 1.5; }
.del-info .table .box .data .notes { position: relative; padding: 5px 0 0 1.2em; font-size: 16px; line-height: 1.5; }
.del-info .table .box .data .notes::before { content: '※'; position: absolute; top: 5px; left: 0; }
.del-info .table .box .data .step { display: flex; align-items: center; margin: 0 0 12px; overflow: hidden; border-radius: 9999px; }
.del-info .table .box .data .step .step-name { flex-basis: 100px; padding: 12px 0 12px 4px; height: 100%; font-family: 'Kanit', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.3; text-align: center; }
.del-info .table .box .data .step .step-txt { flex: 1; padding: 0 16px; font-weight: 800; font-size: 18px; line-height: 1.3; }
.del-info .table .box .data .step .step-txt .att { margin: 0 0 0 12px; font-weight: 600; font-size: 14px; }

.del-app { padding: 40px 8% 55px; }
.del-app .cap { padding: 0 0 20px; font-weight: 800; font-size: 22px; line-height: 1.5; text-align: center; }
.del-app .banner-set { display: flex; margin: 0 auto; max-width: 480px; }
.del-app .banner-set .banner { flex-basis: calc(100%/2); }
.del-app .banner-set .banner .link { display: block; margin: 0 auto; max-width: 208px; }


/*  ウーバーイーツ  */
#ubereats .del-head::before { background: #06c167; }
#ubereats .del-head .del-title::after { background: #06c167; }
#ubereats .del-info { border-bottom: 1px solid #06c167; }
#ubereats .del-info .table .box .item { background: #06c167; }
#ubereats .del-info .table .box .data .step { border: 2px solid #06c167; }
#ubereats .del-info .table .box .data .step .step-name { border-right: 1px solid #06c167; color: #06c167; }

/*  出前館  */
#demaecan .del-head::before { background: #f52900; }
#demaecan .del-head .del-title::after { background: #f52900; }
#demaecan .del-info { border-bottom: 1px solid #f52900; }
#demaecan .del-info .table .box .item { background: #f52900; }
#demaecan .del-info .table .box .data .step { border: 2px solid #f52900; }
#demaecan .del-info .table .box .data .step .step-name { border-right: 1px solid #f52900; color: #f52900; }

/*  menu  */
#menu .del-head::before { background: #e61e0a; }
#menu .del-head .del-title::after { background: #e61e0a; }
#menu .del-info { border-bottom: 1px solid #e61e0a; }
#menu .del-info .table .box .item { background: #e61e0a; }
#menu .del-info .table .box .data .step { border: 2px solid #e61e0a; }
#menu .del-info .table .box .data .step .step-name { border-right: 1px solid #e61e0a; color: #e61e0a; }



@media screen and (max-width: 800px) {
 .del-block { padding: 0 0 40px; }

 .del-head::before { height: 100px; }
 .del-head::after { top: 20px; left: 50%; width: 170px; height: 170px; }
 .del-head .del-title { padding: 60px 0 18px; max-width: 200px; }
 .del-head .del-title::after { width: 30px; }
 .del-head .del-title .ico { width: 72px; }
 .del-head .del-title .title { padding: 14px 0 0; font-size: 20px; }

 .del-info { padding: 22px 5% 6px; }
 .del-info .lead { font-size: 19px; }
 .del-info .table { padding: 25px 0 0; }
 .del-info .table .box { display: block; padding: 0 0 25px; }
 .del-info .table .box .item { justify-content: start; padding: 0 14px; width: 100%; height: 38px; font-size: 16px; }
 .del-info .table .box .data { display: block; padding: 14px 0 0; }
 .del-info .table .box .data .txt { font-size: 17px; }
 .del-info .table .box .data .notes { font-size: 14px; }
 .del-info .table .box .data .step { margin: 7px 0 10px; }
 .del-info .table .box .data .step .step-name { flex-basis: 78px; padding: 15px 0 15px 3px; font-size: 18px; }
 .del-info .table .box .data .step .step-txt { padding: 0 12px; font-size: 15px; }
 .del-info .table .box .data .step .step-txt .att { display: block; margin: 3px 0 0; font-size: 13px; }

 .del-app { padding: 28px 5% 35px; }
 .del-app .cap { padding: 0 0 12px; font-size: 17px; }

}

@media screen and (max-width: 480px) {
 .del-app .banner-set { margin: 0 -5px; }
 .del-app .banner-set .banner { margin: 0 5px; }
}