@charset "UTF-8";

.link{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;margin-bottom: 6vw;}
.link a{padding: 4vw 2vw;background: var(--blue);width: 48%;color: #fff;text-align: center;font-weight: bold;position: relative;border-radius: 6px;}
.link a:after {content: "\f107";font-family: icon;position: absolute;right: 12px;color: #fff;}


.menu{margin-bottom: 14vw;}
.menu li{padding: 6vw 0;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;width: 100%;border-bottom: 1px solid #c2c2c2;position: relative;}
.menu li img{width: 22vw;margin: 0 9vw 0 0;}
.menu li p{width: 100%;line-height: 1;margin-bottom: 0;}
.menu li p .jp{margin-bottom: 2.5vw;font-size: 6.58vw;font-family: var(--mincho);letter-spacing: 0.04em;display: block;}
.menu li p .en{padding-left: 4vw;color: #888;font-size: 3.6vw;font-family: futura-pt;font-weight: 400;letter-spacing: 0.04em;position: relative;display: block;}
.menu li p .en:before {content: '';width: 2.5vw;height: 1px;background: #888;position: absolute;top: 50%;left: 0;-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);}

.price{margin-bottom: 14vw;}
.price li{border-bottom: 1px dashed #c2c2c2;padding-bottom: 8vw;margin-bottom: 8vw;}
.price p{margin-bottom: 5vw;line-height: 1.7;}
.price p.read{margin-bottom: 3vw;font-size: 4.6vw;line-height: 1.4;}
.price p.read span{font-size: 80%;}
.price p.read span.batch{font-size: 70%;font-weight: bold;background: var(--blue);padding: 1% 2%;color: #fff;display: table;margin-bottom: 2vw;}
.price p.sub{margin-bottom: 1vw;color: var(--blue);line-height: 1.2;font-weight: bold;border-left: 2px solid;padding-left: 2vw;line-height: 1.5;}

.price .price_in dl{display: -webkit-flex;display: flex;-webkit-justify-content: flex-end;justify-content: flex-end;-webkit-align-items: center;align-items: center;line-height: 1.4;font-family: futura-pt;font-weight: 400;margin: 0 0 3vw;}
.price .price_in dt{padding: 1.2% 4% 1%;border-radius: 30px;font-size: 3.4vw;text-align: center;margin-right: 3%;line-height: 1.5;min-width: 22vw;font-weight: bold;color: #646464;border: 1px solid #ddd;}
.price .price_in dd .off{font-weight: 400;vertical-align: super;margin-right: 2vw;}
.price .price_in dd .off:after{content: ">";margin-left: 2vw;}
.price .price_in dd .special{font-size: 6.6vw;}

.flow{position: relative;z-index: 1;margin-bottom: 14vw;}
.flow li{padding: 5%;margin-bottom: 5vw;background: #fff;position: relative;border: 1px solid #ddd;}
.flow li:after{content: "";width: 10px;height: 10vw;position: absolute;bottom: -9vw;left: 50%;-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);background: #ccd5dc;z-index: -1;}
.flow li:last-child{margin-bottom: 0;}
.flow li:last-of-type:after{content: none;}
.flow li img{width: 100%;margin-bottom: 4vw;}
.flow li .read{font-weight: bold;font-size: 4vw;margin-bottom: 2vw;line-height: 1.6;}
.flow li .read span{background: var(--bluebg);font-size: 70%;padding: 2% 5%;border-radius: 30px;margin-right: 2%;vertical-align: text-top;line-height: 1.4;font-family: futura-pt;font-weight: 600;}
.flow li p:last-child{margin-bottom: 0;}

.other{padding: 0;}
.other ul{padding: 5vw;background: var(--bluebg);}
.other li{margin-bottom: 10vw;}
.other li img{width: 50%;margin-bottom: 4vw;margin: 0 0 0 auto;border-radius: 120px;}
.other li .text{padding: 0;}
.other li .read{font-weight: bold;font-size: 4.4vw;line-height: 1.6;margin: -7vw 0 4vw;}
.other li .l02 .read{margin: -14vw 0 4vw;}
.other li p:last-child{margin-bottom: 0;}

.cart-btn{-moz-transition:all 0.3s cubic-bezier(0.05,0.05,0.31,0.97);-o-transition:all 0.3s cubic-bezier(0.05,0.05,0.31,0.97);-webkit-transition:all 0.3s cubic-bezier(0.05,0.05,0.31,0.97);transition:all 0.3s cubic-bezier(0.05,0.05,0.31,0.97);}
.cart-btn form{width:100%;display:block;}
.cart-btn input ,.cart-btn a{border:none;cursor:pointer;text-align:center;text-decoration:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;display:block;padding:4% 0;font-size:4vw;background:linear-gradient(120deg,#d3ecf5 0%,#f5f8f0 19%,#fef3e8 35%,#ffede6 50%,#ffedc4 75%,#f4c9d3 100%);border-radius:0;color:#555;font-weight:normal;}
.cart-btn:hover{opacity:0.6;}


/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {

.link{margin-bottom: 50px;}
.link a{padding: 20px;width: 49%;}
.link a:after {right: 20px;}


.menu{margin-bottom: 80px;}
.menu ul{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.menu li{padding: 0 30px;border-right: 1px solid  #ddd;border-bottom: none;}
.menu li img{width: 100px;margin: 0 20px 0 0;}
.menu li p{width: 100%;line-height: 1;margin-bottom: 0;}
.menu li p .jp{margin-bottom: 20px;font-size: 30px;}
.menu li p .en{padding-left: 22px;font-size: 15px;}
.menu li p .en:before {width: 16px;}

.price{margin-bottom: 100px;}
.price ul{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:40px;}
.price li{margin-bottom: 0;padding-bottom: 0;width: -webkit-calc((100% - 40px) / 2);width: calc((100% - 40px) / 2);border: none;border: 1px dashed #ddd;padding: 25px;position: relative;}
.price li p{margin-bottom: 20px;}
.price p{margin-bottom: 50px;line-height: 1.7;}
.price p.read{margin-bottom: 10px;font-size: 20px;}
.price p.read span{font-size: 80%;}
.price p.read span.batch{padding: 4px 10px;margin-bottom: 10px;position: absolute;top: -10px;left: -10px;}
.price p.sub{margin-bottom: 10px;padding-left: 10px;}

.price .price_in dl{margin: 0 0 10px;-webkit-flex-wrap: wrap;flex-wrap:wrap;webkit-justify-content: flex-end;justify-content: flex-end;}
.price .price_in dt{padding: 6px 10px;font-size: 14px;min-width: 120px;margin-right: 10px;}
.price .price_in dd .off{margin-right: 20px;}
.price .price_in dd .off:after{margin-left: 20px;}
.price .price_in dd .special{font-size: 34px;}

.flow{margin-bottom: 120px;}
.flow li{padding: 40px;margin-bottom: 20px;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.flow li:after{height: 200px;bottom: -40px;}
.flow li:last-child{margin-bottom: 0;}
.flow li:last-of-type:after{content: none;}

.flow li img{width: 400px;margin: 0 30px 0 0;}
.flow li .text{width: 100%;}
.flow li .read{font-size: 22px;margin-bottom: 18px;}
.flow li .read span{padding: 8px 20px;margin-right: 10px;}
.flow li p:last-child{margin-bottom: 0;}

.other{padding: 0;}
.other ul{padding: 50px 40px 40px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: flex-start;align-items: flex-start;-webkit-flex-wrap: wrap;flex-wrap: wrap;gap: 40px;}
.other li{margin-bottom: 40px;width: calc((100% - 80px) / 3);}
.other li img{width: 150px;margin: 0 auto 20px;}
.other li .text{padding: 0;}
.other li .read{font-size: 20px;margin: 0 0 14px;text-align: center;}
.other li .l02 .read{margin: 0 0 14px;}
.other li p:last-child{margin-bottom: 0;}

.cart-btn{width: 100%;}
.cart-btn input,.cart-btn a{padding:16px 0;font-size:16px;}



}