@charset "utf-8";

/* title */

.shipping-campaign__title{
  font-size:2.1rem;
  margin:2rem 4vw;
}
@media screen and (min-width:520px){
  .shipping-campaign__title{
    font-size:3.6rem;
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__title{
    font-size:2.8rem;
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__title{
    font-size:3.2rem;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__title{
    width:calc(1184px - 8vw);
    margin:2rem auto;
  }
}

/* content */

.shipping-campaign__content{
  position:relative;
}

.shipping-campaign__inner{
  max-width:1374px;
  position:relative;
  margin:0 auto;
  padding:12.26vw 4vw;
}
@media screen and (min-width:520px){
  .shipping-campaign__inner{
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__inner{
    padding:5.71vw 4vw;
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__inner{
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__inner{
      width:1184px;
      padding:80px 0;
  }
}

/* box */

.shipping-campaign__box{
  position:relative;
  border-radius:14px;
  box-shadow:0 3px 10px 0 rgba(125,195,227,.5);
  background:#fff;
  margin:8vw 0;
  padding:0 8vw 8vw 8vw;
}
.shipping-campaign__box-title{
  position:relative;
  text-align:center;
  border-radius:14px 14px 0 0;
  background:#3fd4ef;
  margin:0 -8vw 8vw -8vw;
  padding:4.26vw 0;
}
.shipping-campaign__box-title:after{
  width:20px;
  height:20px;
  content:"";
  display:block;
  position:absolute;
  bottom:-10px;
  left:calc(50% - 10px);
  transform:rotate(-45deg);
  background:#3fd4ef;
}
.shipping-campaign__box-title-images{
  text-align:center;
}
.shipping-campaign__box-title-image{
  height:11.73vw;
}
.shipping-campaign__box-title-image--3line{/* only smartphone */
  height:18.13vw;
}
@media screen and (min-width:768px){
  .shipping-campaign__box{
    border-radius:20px;
    margin:2.85vw 0;
    padding:0 2.85vw 2.85vw 2.85vw;
  }
  .shipping-campaign__box-title{
    margin:0 -2.85vw 2.85vw -2.85vw;
    padding:1.57vw 0;
  }
  .shipping-campaign__box-title-image{
    height:1.71vw;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__box{
    margin:40px 0;
    padding:0 40px 40px 40px;
  }
  .shipping-campaign__box-title{
    margin:0 -40px 40px -40px;
    padding:22px 0;
  }
  .shipping-campaign__box-title-image{
    height:24px;
  }
}

/* button */

.shipping-campaign__button{
  width:100%;
  display:inline-block;
  font-size:1.75rem;
  color:#fff !important;/* style.css reset */
  text-align:center;
  border-radius:calc(infinity * 1px);
  background:#0089ff;
  padding:3.6vw 0;
}
.shipping-campaign__button:hover{
  background:#32a1fa;
}
@media (min-width:520px) and (max-width:767px){/* style.css reset */
  .shipping-campaign__button{
    font-size:2.75rem;
    padding:2.6vw 0;
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__button{
    font-size:1.75rem;
    padding:1vw 0;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__button{
    font-size:1.75rem;
    padding:15px 0;
  }
}

/* main-graphic */
.shipping-campaign__main-graphic{
  background:url(../images/bg_main-graphic_sp.png),linear-gradient(180deg,#d5f2fe 0%,#6ccffc 100%);
  padding:1px 0;
}
.shipping-campaign__main-graphic .shipping-campaign__inner{
  padding:3vw 0 57.06vw 0;
}
.shipping-campaign__main-graphic .shipping-campaign__inner:after{
  width:96vw;
  height:49.33vw;
  content:"";
  display:block;
  position:absolute;
  bottom:13.16vw;
  left:2.13vw;
  background:url(../images/il_main-graphic.svg) no-repeat 0 0 / 96vw 49.33vw;
}
.shipping-campaign__main-graphic-images{
  display:block;
  position:relative;
}
.shipping-campaign__main-graphic-image{
  width:100%;
}
@media screen and (min-width:768px){
  .shipping-campaign__main-graphic .shipping-campaign__inner{
    padding:2.14vw 4vw;
  }
  .shipping-campaign__main-graphic .shipping-campaign__inner:after{
    width:35.86vw;
    height:18.36vw;
    left:auto;
    bottom:auto;
    top:3.86vw;
    right:.5vw;
    background-size:35.86vw 18.36vw;
  }
  .shipping-campaign__main-graphic-image{
    width:calc(59.43vw + 8vw);
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__main-graphic{
    background:url(../images/bg_main-graphic_pc.png),linear-gradient(180deg,#d5f2fe 0%,#6ccffc 100%);
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__main-graphic .shipping-campaign__inner{
    padding:32px 0;
  }
  .shipping-campaign__main-graphic .shipping-campaign__inner:after{
    width:501px;
    height:256px;
    top:54px;
    right:-34px;
    background-size:501px 256px;
  }
  .shipping-campaign__main-graphic-image{
    width:832px;
  }
}

/* example */
.shipping-campaign__example{
  background:repeating-linear-gradient(-45deg, #d6f2ff, #d6f2ff 18px, #def4ff 18px, #def4ff 36px);
  padding:1px 0;
}
.shipping-campaign__example-title{
  position:relative;
  text-align:center;
  background:no-repeat;
  background-image:url(../images/il_example_1.svg),url(../images/il_example_2.svg);
  background-position:0 100%,100% 100%;
  background-size:21.33vw 19.73vw,18.4vw 20.53vw;
  padding:0 12.8vw 16vw 12.8vw;
}
.shipping-campaign__example-title-image{
  height:17.06vw;
}
.shipping-campaign__example-title:before, .shipping-campaign__example-title:after{
  width:8.8vw;
  height:11.2vw;
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:url(../images/il_example_star.svg) no-repeat 0 0 / 8.8vw 11.2vw;
}
.shipping-campaign__example-title:after{
  left:auto;
  right:0;
  transform:scale(-1,1);
}
.shipping-campaign__example-goods{
  display:block;
  text-align:center;
}
.shipping-campaign__example-goods-image{
  width:100%;
}
@media screen and (min-width:768px){
  .shipping-campaign__example-title{
    background-position:3.3vw 0,calc(100% - 4.42vw) 0;
    background-size:9.57vw 8.85vw,8.07vw 8.93vw;
    margin:0 6.78vw;
    padding:0 13vw 1.65vw 13vw;
  }
  .shipping-campaign__example-title:before, .shipping-campaign__example-title:after{
    width:4.28vw;
    height:5.57vw;
    top:2.85vw;
    left:0;
    background-size:4.28vw 5.57vw;
  }
  .shipping-campaign__example-title:after{
    left:auto;
    right:0;
  }
  .shipping-campaign__example-title-image{
    height:9.74vw;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__example-title{
    background-position:42px 0,636px 0;
    background-size:134px 124px,113px 125px;
    margin:0 186px;
    padding:0 180px 14px 180px;
  }
  .shipping-campaign__example-title:before, .shipping-campaign__example-title:after{
    width:60px;
    height:78px;
    top:40px;
    left:0;
  }
  .shipping-campaign__example-title:after{
    left:auto;
    right:0;
  }
  .shipping-campaign__example-title-image{
    height:110px;
    margin:20px 0 0 0;
  }
}

/* attention */

.shipping-campaign__attention{
  position:relative;
  border:1px solid #000;
  background:rgba(255,255,255,.5);
  margin:12.26vw 0 0 0;
  padding:8vw 4vw;
}
.shipping-campaign__attention-title{
  font-size:2rem;
  text-align:center;
  margin:0 0 6vw 0;
}
.shipping-campaign__attention-title:before, .shipping-campaign__attention-title:after{
  width:2.5em;
  content:"";
  display:inline-block;
  vertical-align:middle;
  border-top:1px solid #000;
  margin:0 .5em;
}
.shipping-campaign__attention-item{
  text-indent:-1em;
  padding:0 0 0 1em;
}
.shipping-campaign__attention-item:before{
  content:"・";
}
@media screen and (min-width:520px){
  .shipping-campaign__attention{
    font-size:2.4rem;
    margin:5.2vw 4vw 0 4vw;
    padding:7.5vw 4vw;
  }
  .shipping-campaign__attention-title{
    font-size:3.2rem;
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__attention{
    font-size:1.8rem;
    margin:5.2vw 4vw 0 4vw;
    padding:5.5vw 4vw;
  }
  .shipping-campaign__attention-title{
    font-size:2.4rem;
    margin:0 0 4.5vw 0;
  }
  .shipping-campaign__attention-title:before, .shipping-campaign__attention-title:after{
    width:6em;
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__attention{
    font-size:1.6rem;
    margin:5.2vw 8vw 0 8vw;
    padding:4.5vw 4vw;
  }
  .shipping-campaign__attention-title{
    font-size:3.4rem;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__attention{
    width:calc(1184px - 16vw);
    margin:5.2vw auto 0 auto;
  }
}

/* search */
.shipping-campaign__search{
  border-top:1px solid #a2e7ff;
  border-bottom:1px solid #a2e7ff;
  background:#c3f0ff 50% 0;
  background-image:linear-gradient(transparent calc(100% - 1px),#a2e7ff calc(100% - 1px)),linear-gradient(90deg,transparent calc(100% - 1px), #a2e7ff calc(100% - 1px));
  background-size:28px 28px;
  padding:1px 0;
}
.shipping-campaign__search .shipping-campaign__box{
  box-shadow:none;
  background-color:rgba(255,255,255,.8);
  margin:0;
  padding:10.13vw 7.46vw 4vw 7.46vw;
}
.shipping-campaign__search-title{
  position:relative;
  text-align:center;
  background:url(../images/bg_search_title.svg) no-repeat 50% 100% / 28.8vw 5.6vw;
  margin:0 0 6.66vw 0;
  padding:0 2.66vw 10.66vw 2.66vw;
}
.shipping-campaign__search-title-image{
  width:100%;
}
.shipping-campaign__search-title:before, .shipping-campaign__search-title:after{
  width:11.73vw;
  height:11.73vw;
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:url(../images/icon_poke-ball.svg) no-repeat 0 0 / 11.73vw 11.73vw;
}
.shipping-campaign__search-title:after{
  left:auto;
  right:0;
  transform:scale(-1,1);
}
.shipping-campaign__search-lead{
  text-align:center;
  margin:6.66vw 0;
}
.shipping-campaign__search-item{
  margin:6.66vw 0;
}
.shipping-campaign__search-button{
  display:block;
  font-size:0;
  text-align:center;
  border:4px solid #00a7ff;
  border-radius:calc(infinity * 1px);
  background:linear-gradient(180deg,#d2efff 0%,#00a7ff 100%) #00a7ff;
  padding:4.8vw 0;
}
.shipping-campaign__search-button:hover{
  background:#00a7ff;
}
.shipping-campaign__search-button-image{
  height:4.8vw;
  
}
@media screen and (min-width:520px){
  .shipping-campaign__search-lead{
    font-size:4rem;
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__search-title{
    background-size:15.43vw 3vw;
    margin:0 0 2.14vw 0;
    padding:0 calc(22.28vw - 7.46vw) 6.86vw calc(22.28vw - 7.46vw);
  }
  .shipping-campaign__search-title:before, .shipping-campaign__search-title:after{
    width:6.85vw;
    height:6.85vw;
    background-size:6.85vw 6.85vw;
  }
  .shipping-campaign__search-title:before{
    left:calc(12.85vw - 7.46vw);
  }
  .shipping-campaign__search-title:after{
    right:calc(12.85vw - 7.46vw);
  }
  .shipping-campaign__search-lead{
    font-size:2.6rem;
    margin:2.14vw 0;
  }
  .shipping-campaign__search-lead-break{
    display:none;
  }
  .shipping-campaign__search-items{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    align-items:flex-start;
  }
  .shipping-campaign__search-item{
    width:calc(50% - .86vw * 2);
    margin:1.14vw .86vw;
  }
  .shipping-campaign__search-button{
    padding:1.78vw 0;
  }
  .shipping-campaign__search-button-image{
    height:1.71vw;
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__search .shipping-campaign__box{
    padding:4.85vw 7.46vw 3.43vw 7.46vw;
  }
  .shipping-campaign__search{
    background-size:50px 50px;
  }
  .shipping-campaign__search-lead{
    font-size:2rem;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__search-title{
    background-size:108px 21px;
    margin:0 0 30px 0;
    padding:0 310px 48px 310px;
  }
  .shipping-campaign__search-title-image{
    height:108px;
  }
  .shipping-campaign__search-title:before, .shipping-campaign__search-title:after{
    width:96px;
    height:96px;
    background-size:96px 96px;
  }
  .shipping-campaign__search-title:before{
    left:180px;
  }
  .shipping-campaign__search-title:after{
    right:180px;
  }
  .shipping-campaign__search .shipping-campaign__box{
    padding:68px 30px 48px 30px;
  }
  .shipping-campaign__search-item{
    width:calc(33.33% - 12px * 2);
    margin:16px 12px;
  }
  .shipping-campaign__search-button{
    padding:24px 0;
  }
  .shipping-campaign__search-button-image{
    height:22px;
  }
}

/* original-box */
.shipping-campaign__original-box{
  background:url(../images/bg_original-box.png),linear-gradient(180deg,#79d3fc 0%,#00a7ff 100%);
}
.shipping-campaign__original-box .shipping-campaign__inner:after{
  width:91.46vw;
  height:54.93vw;
  content:"";
  display:block;
  position:absolute;
  bottom:11.73vw;
  left:4.26vw;
  background:url(../images/il_original-box.png) no-repeat 0 0 / 91.46vw 54.93vw;
}
.shipping-campaign__original-box-title{
  text-align:center;
}
.shipping-campaign__original-box-title-image{
  width:100%;
}
.shipping-campaign__original-box-look{
  text-align:center;
  padding:9.6vw 0 62.4vw 0;
}
.shipping-campaign__original-box-look-title{
  margin:0 calc(21.33vw - 4vw);
}
.shipping-campaign__original-box-look-title-image{
  width:100%;
}
.shipping-campaign__original-box-look-button{
  width:100%;
  display:inline-block;
  font-size:0;
  text-align:center;
  box-shadow:0 3px 6px 0 rgba(47,121,155,.5);
  border-radius:calc(infinity * 1px);
  background:linear-gradient(180deg,#fffef7 0%,#fff577 100%) #fff577;
  margin:5.33vw 0;
  padding:6.93vw 0;
}
.shipping-campaign__original-box-look-button:hover{
  background:#fff577;
}
.shipping-campaign__original-box-look-button-image{
  height:4.8vw;
  vertical-align:middle;
}
.shipping-campaign__original-box-note{
  font-size:1.1rem;
  color:#fff;
  text-align:center;
}
@media screen and (min-width:520px){
  .shipping-campaign__original-box-note{
    font-size:2.8rem;
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__original-box .shipping-campaign__inner{
    padding:5.14vw 4vw;
  }
  .shipping-campaign__original-box .shipping-campaign__inner:after{
    width:38.57vw;
    height:23.28vw;
    bottom:5.7vw;
    left:auto;
    right:5.71vw;
    background-size:38.57vw 23.28vw;
  }
  .shipping-campaign__original-box-title{
    margin:0 19.86vw 2.57vw 19.86vw;
  }
  .shipping-campaign__original-box-look{
    text-align:left;
    padding:0 46.28vw 0 3.93vw;
  }
  .shipping-campaign__original-box-look-title{
    margin:0 5.57vw;
  }
  .shipping-campaign__original-box-look-button{
    margin:1.86vw 0;
    padding:2.86vw 0;
  }
  .shipping-campaign__original-box-look-button-image{
    height:1.86vw;
  }
  .shipping-campaign__original-box-note{
    font-size:1.4rem;
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__original-box-title{
    margin:0 22.02vw 3.22vw 22.02vw;
  }
  .shipping-campaign__original-box-note{
    font-size:1.2rem;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__original-box .shipping-campaign__inner{
    padding:72px 0 112px 0;
  }
  .shipping-campaign__original-box .shipping-campaign__inner:after{
    width:541px;
    height:325px;
    bottom:80px;
    left:auto;
    right:80px;
    background-size:541px 325px;
  }
  .shipping-campaign__original-box-title{
    margin:0 280px 46px 280px;
  }
  .shipping-campaign__original-box-look{
    padding:0 650px 0 54px;
  }
  .shipping-campaign__original-box-look-title{
    margin:0 75px;
  }
  .shipping-campaign__original-box-look-button{
    margin:25px 0;
    padding:38px 0;
  }
  .shipping-campaign__original-box-look-button-image{
    height:26px;
  }
}

/* navigation */

.shipping-campaign__navigation{
  background:#f7f7f8;
  padding:4.25vw 4vw;
}
.shipping-campaign__navigation-items{
  text-align:center;
}
.shipping-campaign__navigation-item{
  margin:10vw 0;
}
@media screen and (min-width:520px){
  .shipping-campaign__navigation-item{
    margin:8.5vw 3.2vw;
  }
}
@media screen and (min-width:768px){
  .shipping-campaign__navigation{
    padding:3.75vw 4vw;
  }
  .shipping-campaign__navigation-items{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:flex-start;
  }
  .shipping-campaign__navigation-item{
    width:30vw;
    margin:2vw 3vw;
  }
}
@media screen and (min-width:1040px){
  .shipping-campaign__navigation-item{
    width:24.5vw;
    margin:2vw 4.2vw;
  }
}
@media screen and (min-width:1278px){
  .shipping-campaign__navigation-item{
    width:340px;
    margin:30px 60px;
  }
}

/* memo */
/*
under 520px (default)
520px
768px
1040px
1278px
*/