﻿@charset "utf-8";
/* CSS Document */

.delivery .pane-main{
  border: solid 5px #300206;
  outline: solid 5px #300206;
  outline-offset: 5px;
  margin: 15px;
  width: calc(100% - 30px);
  overflow: hidden;
}

.delivery .block-main{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.delivery .block-main .inner{
  display: flex;
  flex-wrap: wrap;
  max-width:80%;
  margin:auto;
}

.delivery .block-main .kv{
  width: 40%;
  margin: 0 5%;
  padding: 60px 0;
  text-align: center;
}

.delivery .block-main .kv > article{
  display: inline-block;
  background-color:#300206;
  border-radius:30px;
  color:#fff;
  font-size:20px;
  font-weight:600;
  padding: 10px 20px;
  margin: 0 auto 10px;
}

.delivery .block-main .lead_box{
  width:50%;
  margin:0 auto;
  padding:20px 20px;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.delivery .block-main .lead_box h1{
  font-weight:600;
  text-align:center;
  margin:20px 0;
  font-size:clamp(1.375rem, 1.284rem + 0.45vw, 1.625rem);/*33px*/
}

.lead_box_texts{
  padding:10px 10px;
  text-align:center;
}

.lead_box_texts p{
  font-size:clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  text-align: left;
  display: inline-block;
}

@media screen and (min-width:768px) and ( max-width:1400px) {
  .delivery .block-main .kv > article{
  font-size:16px;
  padding: 10px 10px;
}
}

@media (max-width: 767px) {

.delivery .block-main .kv{
  width: 100%;
  margin: 0 auto;
  padding: 20px 30px 0;
}

.delivery .block-main .lead_box{
  width:100%;
  margin:0 auto;
  padding:0px 20px 40px;
}

  .delivery .block-main .kv > article{
  font-size:16px;
  padding: 10px 20px;
}
}

@media (max-width: 768px) {
.delivery .block-main .inner{
  display: flex;
  flex-wrap: wrap;
  max-width:100%;
  margin:auto;
}
}

.delivery .service{
  background-color: #f5efe4;
   padding: 20px 10px 0px;
}

.delivery .service .service_inner{
  max-width: 768px;
  margin: 0 auto 0;
  padding: 10px 0px 20px;
}

.service h2{
  font-size: 26px;
  font-weight:600;
  text-align:center;
  margin:20px 0;
}

.service_area{
  border: dotted 2px #d5af4a;
  padding: 0 30px 20px;
  margin-bottom:40px;
  background-color:#fff;
  text-align:center;
}

.service_area a.underline{
  text-decoration:underline;
}

.service_area h3{
  font-size: 20px;
  font-weight: 600;
  padding: 8px;
  text-align: center;
  background: #300206;
  display: inline-block;
  margin: -30px 0 10px;
  color: #fff;
  border-radius: 6px;
  min-width: 225px;
}

.service_area h4{
  font-size: 16px;
  font-weight:400;
  padding: 10px 0 20px;
  text-align:left;
}

.service_area dl{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  text-align:left;
  padding-top: 20px;
  border-top: 1px solid #ccc;
}

.service_area dl.kaigyo{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: unset;
  text-align:left;
}

.service_area dt {
  width: 25%;
  padding-bottom: 20px;
  margin-bottom: 10px;
  font-size:20px;
  font-weight: 600;
}

.service_area dd {
  width: 75%;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

@media screen and (max-width:540px) {
  .service_area{
  padding: 0 30px 20px;
}

  .service_area dt {
  width: 100%;
  padding-bottom: 5px;
  margin-bottom: 0px;
  font-size:18px;
}

.service_area dd {
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
}

.service_area p{
  padding-top:10px;
}

.service_area p.notice{
  padding-top:10px;
  font-size:14px;
}

.btn_area{
  max-width:360px; margin:10px auto;
}

.btn_area .btn_arrow_light {
  display: block;
  background: #cf152d;
  color: #fff;
  padding: 1em 2em 1em 1em;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 15px 0 0;
  border-radius: 6px;
  position: relative;
}

.btn_area .btn_arrow_light::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: transparent transparent #FFF #FFF;
    transform: rotate(-135deg);
    transition: .3s;
}
.btn_area .btn_arrow_light:hover::after{
    right: 10px;
}

@media screen and (max-width:390px) {
  .btn_area .btn_arrow_light {
  font-size: 16px;
}
  }


.recomend{
  padding: 20px 0px 30px;
}

.recomend h2{
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  margin: 20px 0;
}

/*--------------------------------------------------------------
 終了時
--------------------------------------------------------------*/
.cp_end{
  position:relative;
  z-index:1;
}

.cp_end h4.end{
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index:5;
  color:#fff;
  font-weight:600;
  font-size:22px;
  text-align:center;
  width: 100%;
}


.end-filter{
  filter: brightness(40%);
}



/*-----------------
カスタマイズ
-----------------*/

/* VD WD 2025 */

.WD2025.delivery .pane-main{
  border: none;
  margin: 0px;
  width: 100%;
  overflow: hidden;
}

.WD2025.delivery .block-main .lead_box h1 {
    background: rgba(221, 228, 247, 0);
}

.WD2025 .lead_box_texts {
    padding: 10px 10px;
    text-align: center;
    background: rgba(221, 228, 247, 0);
}

.WD2025 .block-main {
    background: url(/whiteday/img/bg_left_campaign_2025wd.webp) top left / 20% no-repeat,
    url(/whiteday/img/bg_right_campaign_2025wd.webp) top right / 20% no-repeat,
    #dde4f7;
    border: solid 2px #C6A877;
    outline: solid 4px #C6A877;
    outline-offset: 5px;
    margin: 15px;
    width: calc(100% - 30px);
    overflow: hidden;
}

@media (max-width: 767px) {
    .WD2025 .block-main {
      background: url(/whiteday/img/bg_left_campaign_2025wd_2.webp) bottom left / 35% no-repeat,
      url(/whiteday/img/bg_right_campaign_2025wd.webp) top right / 35% no-repeat,
      #dde4f7;
    }
}

/*.WD2025.delivery .service{
  background-color: #f9e3dc;
}*/


.WD2025.delivery .recomend{
  background-color: #fff9d1;
}/**/


/* vd2025 */
.vd2025.delivery .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
}

.vd2025.delivery .block-main .lead_box h1 {
    background: rgba(255, 229, 222, 0.6);
}

.vd2025 .lead_box_texts {
    padding: 10px 10px;
    text-align: center;
    background: rgba(255, 229, 222, 0.8);
}

.vd2025 .block-main {
    background: url(/campaign/img/bg_left_gwp_2025vd.webp) left / 20% no-repeat,
    url(/campaign/img/bg_right_gwp_2025vd.webp) right / 20% no-repeat,
    #ffe5de;
}

@media (max-width: 767px) {
    .vd2025 .block-main {
      background: url(/campaign/img/bg_left_gwp_2025vd.webp) bottom left / 50% no-repeat,
      url(/campaign/img/bg_right_gwp_2025vd.webp) bottom right / 50% no-repeat,
      #ffe5de;
    }
}


/* shippingfree_2025sp */
.shippingfree_2025sp.delivery .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
  background: url(/spring/img/waku_sakura2.webp) top center no-repeat,
    rgba(249, 210, 235, 0.6);
    background-size: cover;
}

.shippingfree_2025sp.delivery .service {
    background-color: transparent;
    padding: 0px 10px 0px;
}

.shippingfree_2025sp.delivery .service h2 {
    font-size: 26px;
    font-weight: 600;
    text-align: center;
    margin: 0px 0 20px;
}

.shippingfree_2025sp.delivery .block-main .lead_box h1 {
}

.shippingfree_2025sp .lead_box_texts {
    padding: 10px 10px;
    text-align: center;
}

.shippingfree_2025sp .block-main {
    
}

@media (max-width: 539px) {

.shippingfree_2025sp.delivery .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
  background:rgba(249, 210, 235, 0.6);
}

.shippingfree_2025sp .block-main {
     background: url(/spring/img/waku_sakura.webp) top center  no-repeat,
    rgba(249, 210, 235, 0);
    background-size: contain;
}

.shippingfree_2025sp.delivery .service h2 {
    margin: 20px 0 20px;
}
}


/* mo2025 */
.mo2025.delivery .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
}


.mo2025.delivery .block-main .kv {
    width: 40%;
    margin: 0 0 0 8%;
    padding: 60px 0;
    text-align: center;
}

.mo2025.delivery .block-main .lead_box {
    width: 50%;
    margin: 0 auto 0 0;
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mo2025.delivery .block-main .lead_box h1 {
    background: rgba(255, 255, 255, 0);/*rgba(244, 217, 225, 0.6)*/
}

.mo2025 .lead_box_texts {
    padding: 10px 0px;
    text-align: center;
    background: rgba(255, 255, 255, 0);
}

.mo2025 .block-main {
    background: url(/campaign/img/bg_left_2025mo.webp) left / 20% no-repeat,
    url(/campaign/img/bg_right_2025mo.webp) right / 20% no-repeat,
    #f4d9e1;
}

@media (max-width: 767px) {
    .mo2025 .block-main {
      background: url(/campaign/img/bg_left_2025mo.webp) bottom left / 50% no-repeat,
      url(/campaign/img/bg_right_2025mo.webp) bottom right / 50% no-repeat,
      #f4d9e1;
    }

    .mo2025.delivery .block-main .kv {
        width: 100%;
        margin: 0 auto;
        padding: 20px 30px 0;
    }

    .mo2025.delivery .block-main .lead_box {
        width: 80%;
        margin: 0 auto 40px;
        padding: 0px 10px 10px;
        background: #fff;
        border: solid 2px #C6A877;
    }
}

.mo2025.delivery .service {
    background-color: rgba(244, 217, 225, 0.6);
    padding: 20px 10px 0px;
}

/* fa2025 */
.fa2025 .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
}
.fa2025 .block-main{
  background-color: #cdd8e4;
  padding: 40px 40px 0;
}

.fa2025 .block-main .inner{
  background-color:#fff;
  border: solid 2px #cd9d3e;
  max-width: 100%;
  position: relative;
}

.fa2025 .block-main .kv {
    margin: 0 0% 0 10%;
}

.fa2025 .block-main .inner .designR{
  position: absolute;
  right: -3%;
  top: -10%;
  width: 25%;
}

.fa2025 .block-main .inner .designL{
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: 25%;
  transform: rotate(180deg);
}

.fa2025 .service {
    background-color: #cdd8e4;
    padding: 20px 10px 0px;
}

@media (max-width: 767px) {
  .fa2025 .block-main{
  padding: 20px 20px 0;
}

.fa2025 .block-main .kv {
    margin: 0 auto;
}

.fa2025 .block-main .inner .designR{
  right: -10%;
  top: -7%;
  width: 55%;
}

.fa2025 .block-main .inner .designL{
  position: absolute;
  left: -10%;
  bottom: -7%;
  width: 55%;
  transform: rotate(180deg);
}

}


/* ho2025 */
.ho2025 .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
  background: url(/campaign/img/bg_HL25_600.webp);
}

.ho2025 .block-main{
  padding: 40px 40px 0;
}

.ho2025 .block-main .inner{
  background: rgba(255, 255, 255, 1);
  border: solid 2px #cd9d3e;
  max-width: 100%;
  position: relative;
}

.ho2025 .block-main .inner .designR{
  position: absolute;
  right: -3%;
  top: -10%;
  width: 15%;
}

.ho2025 .block-main .inner .designL{
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: 15%;
}

.ho2025 .block-main .kv {
    margin: 0 0% 0 10%;
}

.ho2025.delivery .block-main .lead_box {
    padding: 20px 0px;
}

.ho2025 .service {
    background-color: transparent;
    padding: 0px 10px 0px;
}

.ho2025 .recomend {
    padding: 20px 10px 30px;
}

@media (max-width: 767px) {
  .ho2025 .block-main{
  padding: 20px;
}


.ho2025 .block-main .kv {
    margin: 0 5% 0 5%;
}

.ho2025.delivery .block-main .lead_box{
    padding: 0px 20px 40px;
}
}



/* sm2025 */
.sm2025 .pane-main{
  border: solid 2px #C6A877;
  outline: solid 4px #C6A877;
}
.sm2025 .block-main{
  background: linear-gradient(180deg, #5fbee5 0%, #5fbee5 45%, #6ac6cf 55%, #6ac6cf 100%);
  /*background-color: #6ac6cf;*/
  padding: 40px 40px 0;
}

.sm2025 .block-main .inner{
  background-color:#fff;
  border: solid 2px #cd9d3e;
  max-width: 100%;
  position: relative;
}

.sm2025 .block-main .inner .designR{
  position: absolute;
  right: -3%;
  top: -10%;
  width: 15%;
}

.sm2025 .block-main .inner .designL{
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: 15%;
}

.sm2025 .block-main .kv {
    margin: 0 0% 0 10%;
}

.sm2025.delivery .block-main .lead_box {
    padding: 20px 0px;
}

.sm2025 .service {
    background-color: #6ac6cf;
    padding: 20px 10px 0px;
}

@media (max-width: 767px) {
  .sm2025 .block-main{
  padding: 20px;
}

.sm2025 .block-main .inner .designR{
  right: -9%;
  top: -4.5%;
  width: 28%;
}

.sm2025 .block-main .inner .designL{
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: 33%;
}

.sm2025 .block-main .kv {
    margin: 0 5% 0 5%;
}

.sm2025.delivery .block-main .lead_box{
    padding: 0px 20px 40px;
}
}


/* wpoint */
.wpoint h1 span{
  font-size: 180%;
}

.wpoint.delivery .pane-main {
  border: none;
  outline: none;
  outline-offset: unset;
  margin: 0px;
  width: 100%;
}

.wpoint.delivery .block-main .lead_box{
  width:50%;
  margin:0 auto;
  padding:0px 20px;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.wpoint.delivery .block-main{
  background-color: #F7EDD8;
}

.wpoint.delivery .block-main .inner {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto;
}

.wpoint.delivery .block-main .kv {
    width: 50%;
    margin: 0 0;
    padding: 0px 0;
    text-align: center;
}

.wpoint.delivery .block-main .lead_box {
    background-color: #EFCF8D;
}

.wpoint.delivery .block-main .lead_box h1 {
    font-weight: 600;
    text-align: center;
    margin: 0px 0;
    font-size: clamp(1.875rem, 1.739rem + 0.68vw, 2.25rem);
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.wpoint.delivery .block-main .lead_box h1 img{
  width:60%;
}

.wpoint.delivery .service {
    background-color: #F7EDD8;
    padding: 20px 10px 0px;
}

.wpoint .service_area dl:first-child{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  text-align:left;
  padding-top: 20px;
  border-top: none;
}

.express-delivery_area h2 {
    background: #EFCF8D;
    padding: 0.5em 0 0.3em;
    margin: 0;
    text-align: center;
    position: relative;
    font-size: 26px;
}

h3.express-delivery {
    position: relative;
    padding: 0.5em 0 0.3em;
    text-align: center;
    font-size: 22px;
    margin: 0 0 20px;
    line-height: 1.4;
    background-color: #f8e198;
}

@media screen and (min-width:768px) and ( max-width:824px) {
  .wpoint.lead_box_texts {
    padding: 0px 10px;
    text-align: center;
}
.wpoint.delivery .block-main .lead_box h1 {
    font-size: clamp(1.375rem, 1.057rem + 1.59vw, 2.25rem);
    line-height: 1.2;
}

}

@media (max-width: 767px) {
  .wpoint.delivery .block-main .kv {
    width: 100%;
}

.wpoint.delivery .block-main .lead_box {
    width: 100%; 
    padding: 30px 20px 20px;
}

.wpoint.delivery .block-main .lead_box h1 img{
  width:90%;
}
}

@media screen and (max-width: 541px) {
    .express-delivery_area h2 {
        font-size: 24px;
        line-height: 1.4;
    }
    h3.express-delivery {
        font-size: 22px;
    }
}


/* カテゴリー リンクボタン */
.btn_arrow_line_mini {
    display: block;
    border: solid 1px #9B851B;
    background-color: #f0e5c5;
    color: #000;
    padding: 0.5em 2em 0.5em 1em;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 20px auto 60px;
    border-radius: 60px;
    position: relative;
    max-width: 300px;
}

.btn_arrow_line_mini::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 3px);
    right: 20px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: transparent transparent #000 #000;
    transform: rotate(-135deg);
    transition: .3s;
}

a.btn_arrow_line_mini{
    text-decoration:none;
}

a.btn_arrow_line_mini:hover{
    text-decoration:none;
}

.btn_arrow_line_mini:hover::after{
    right: 10px;
}
