@charset "utf-8";

/* title */

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

/* content */

.mail-magazine__content{
  position:relative;
  background:#ffe49f;
  background-image:radial-gradient(#ffefc5 20%,transparent 0%),radial-gradient(#ffefc5 20%,transparent 0%);
  background-size:20px 20px;
  background-position:0 0,10px 10px;
  padding:1px 0;
}
.mail-magazine__content:before,.mail-magazine__content:after{
  width:40vw;
  height:calc(40vw * .48);
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  background:url(../images/bg_garland.svg) no-repeat 0 0 / 40vw calc(40vw * .48);
}
.mail-magazine__content:after{
  left:auto;
  right:0;
  transform:scale(-1,1);
}
@media screen and (min-width:520px){
  .mail-magazine__content:before,.mail-magazine__content:after{
    width:25vw;
    height:calc(25vw * .48);
    background-size:25vw calc(25vw * .48);
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__content:before,.mail-magazine__content:after{
    width:480px;
    height:232px;
    background-size:480px 232px;
  }
}

/* box */

.mail-magazine__box{
  position:relative;
  z-index:10;
  border-radius:14px;
  box-shadow:0 10px 0 0 rgba(217,191,146,.5);
  background:#fff;
  margin:18.66vw 4vw;
  padding:0 4vw 6vw 4vw;
}
.mail-magazine__box-title{
  height:18.66vw;
  position:relative;
  z-index:9;
  text-align:center;
  border-radius:14px 14px 0 0;
  background:#ff9d00;
  background:linear-gradient(rgba(255,177,0,1) 0%, rgba(255,177,0,1) 50%, rgba(255,159,0,1) 51%, rgba(255,157,0,1) 100%);
  margin:0 -4vw;
}
.mail-magazine__box-title--2line{
  height:23.46vw;
}
.mail-magazine__box-title:before,.mail-magazine__box-title:after{
  content:"";
  display:block;
  position:absolute;
  background:no-repeat;
}
.mail-magazine__box-title-images{
  height:100%;
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  align-items:center;
}
.mail-magazine__box-title-image{
  height:8.16vw;
}
.mail-magazine__box-title-image--2line{
  height:13.86vw;
}
@media screen and (min-width:520px){
  .mail-magazine__box{
    margin:10.4vw 4vw;
  }
  .mail-magazine__box-title{
    height:12.44vw;
  }
  .mail-magazine__box-title--2line{
    height:17.59vw;
  }
  .mail-magazine__box-title-image{
    height:6.4vw;
  }
  .mail-magazine__box-title-image--2line{
    height:10.4vw;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__box{
    border-radius:20px;
    margin:5.2vw 4vw;
    padding:0 4vw 4vw 4vw;
  }
  .mail-magazine__box-title{
    width:73.14%;
    height:7.14vw;
    top:-7.14vw;
    border-radius:20px 20px 0 0;
    margin:calc(7.14vw * 2) auto -7.14vw auto;
  }
  .mail-magazine__box-title--2line{
    height:12.67vw;
    top:-12.67vw;
    margin:calc(12.67vw * 1.55) auto -12.67vw auto;
  }
  .mail-magazine__box-title-image{
    height:4.05vw;
  }
  .mail-magazine__box-title-image--2line{
    height:7.94vw;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__box{
    width:1184px;
    margin:90px auto;
    padding:0 0 60px 0;
  }
  .mail-magazine__box-title{
    height:98px;
    top:-98px;
    margin:calc(98px * 2) auto -98px auto;
  }
  .mail-magazine__box-title--2line{
    height:150px;
    top:-150px;
    margin:246px auto -150px auto;
  }
  .mail-magazine__box-title-image{
    height:52px;
  }
  .mail-magazine__box-title-image--2line{
    height:94px;
  }
}

/* button */

.mail-magazine__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;
}
.mail-magazine__button:hover{
  background:#32a1fa;
}
@media (min-width:520px) and (max-width:767px){/* style.css reset */
  .mail-magazine__button{
    font-size:2.75rem;
    padding:2.6vw 0;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__button{
    font-size:1.75rem;
    padding:1vw 0;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__button{
    font-size:1.75rem;
    padding:15px 0;
  }
}

/* main-graphic */

.mail-magazine__main-graphic{
  position:relative;
  background:url(../images/bg_main-graphic.svg) no-repeat 50% calc(100% + 83.73% + 2vw) / 83.73% 83.73%;
  margin:0 0 -8vw 0;
  padding:22.5vw 0 calc(83.73% - 4.5vw) 0;
}
.mail-magazine__main-graphic:after{
  width:93.6vw;
  height:83.46vw;
  content:"";
  display:block;
  position:absolute;
  bottom:3.75vw;
  left:calc(50% - (93.6vw / 2));
  z-index:11;
  background:url(../images/il_main-graphic.svg) no-repeat 0 0 / 93.6vw 83.46vw;
}
.mail-magazine__main-graphic .mail-magazine__box{
  display:block;
  text-align:center;
  box-shadow:0 6px 0 0 rgba(217,191,146,.5);
  background-color:#fdfaed;
  margin:0 4vw;
  padding:2.5vw 3.5vw 3.5vw 3.5vw;
}
.mail-magazine__main-graphic-image{
  width:100%;
}
@media screen and (min-width:520px){
  .mail-magazine__main-graphic{
    padding-top:14.5vw;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__main-graphic{
    background-position:4vw 50%;
    background-size:31vw 31vw;
    margin:0 4vw -4vw 4vw;
    padding:6.4vw 0 6.4vw 40.93%;
  }
  .mail-magazine__main-graphic:after{
    width:37.43vw;
    height:33.57vw;
    bottom:auto;
    top:3.15vw;
    left:0;
    background-size:37.43vw 33.57vw;
  }
  .mail-magazine__main-graphic .mail-magazine__box{
    box-shadow:0 10px 0 0 rgba(217,191,146,.5);
    margin:0;
    padding:2.5vw 7.5vw .5vw 7.5vw;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__main-graphic .mail-magazine__box{
    padding:.5vw .5vw .25vw .5vw;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__main-graphic{
    width:1184px;
    background-position:0 100%;
    background-size:430px 430px;
    margin:0 auto;
    padding:90px 0 0 484px;
  }
  .mail-magazine__main-graphic:after{
    width:527px;
    height:470px;
    top:38px;
    left:-60px;
    background-size:527px 470px;
  }
  .mail-magazine__main-graphic .mail-magazine__box{
    width:700px;
    padding:0;
  }
}

/* guidance */

.mail-magazine__guidance{
  padding:4vw;
}
.mail-magazine__guidance-items{
  text-align:center;
}
.mail-magazine__guidance-item{
  margin:10.5vw 3.2vw;
}
.mail-magazine__guidance-catchphrase{
  height:7.8vw;
  margin:0 0 4vw 0;
}
@media (min-width:520px) and (max-width:767px){
  .mail-magazine__guidance-item{
    margin:7.5vw 3.2vw;
  }
  .mail-magazine__guidance-catchphrase{
    height:5.2vw;
    margin:0 0 2.8vw 0;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__guidance{
    padding:4vw 0;
  }
  .mail-magazine__guidance-items{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:flex-start;
  }
  .mail-magazine__guidance-item{
    width:30vw;
    margin:0 3vw;
  }
  .mail-magazine__guidance-catchphrase{
    height:2.4vw;
    margin:0 0 1.8vw 0;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__guidance-item{
    width:26vw;
    margin:0 4vw;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__guidance-item{
    width:342px;
    margin:0 60px;
  }
}

/* about */

.mail-magazine__about .mail-magazine__box-title:before{
  width:18.93vw;
  height:20.8vw;
  top:-1.06vw;
  left:.6vw;
  background-image:url(../images/il_about_1.svg);
  background-size:18.93vw 20.8vw;
}
.mail-magazine__about .mail-magazine__box-title:after{
  width:17.06vw;
  height:20.8vw;
  top:-1.06vw;
  right:2.13vw;
  background-image:url(../images/il_about_2.svg);
  background-size:17.06vw 20.8vw;
}
.mail-magazine__about-lead{
  padding:10.66vw 0 5.33vw 0;
}
.mail-magazine__about-items{
  text-align:center;
}
.mail-magazine__about-item{
  margin:4vw 0;
}
@media screen and (min-width:520px){
  .mail-magazine__about .mail-magazine__box-title:before{
    width:14.2vw;
    height:15.6vw;
    top:-.76vw;
    background-size:14.2vw 15.6vw;
  }
  .mail-magazine__about .mail-magazine__box-title:after{
    width:12.3vw;
    height:15vw;
    top:-1.7vw;
    background-size:12.3vw 15vw;
  }
  .mail-magazine__about-lead{
    font-size:2.4rem;
    padding:5.33vw 0 2.66vw 0;
  }
  .mail-magazine__about-item{
    margin:3vw 0;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__about .mail-magazine__box-title:before{
    width:9.14vw;
    height:9.86vw;
    top:-1.93vw;
    left:4.86vw;
    background-size:9.14vw 9.86vw;
  }
  .mail-magazine__about .mail-magazine__box-title:after{
    width:7.71vw;
    height:9.43vw;
    top:-1.5vw;
    right:7.21vw;
    background-size:7.71vw 9.43vw;
  }
  .mail-magazine__about-lead{
    font-size:1.8rem;
  }
  .mail-magazine__about-items{
    margin:0 8vw;
  }
  .mail-magazine__about-item{
    margin:2.5vw 0;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__about-lead{
    font-size:1.6rem;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__about .mail-magazine__box-title:before{
    width:128px;
    height:138px;
    top:-27px;
    left:68px;
    background-size:128px 138px;
  }
  .mail-magazine__about .mail-magazine__box-title:after{
    width:108px;
    height:132px;
    top:-21px;
    right:101px;
    background-size:108px 132px;
  }
  .mail-magazine__about-lead{
    margin:0 120px;
    padding:60px 0 10px 0;
  }
  .mail-magazine__about-items{
    margin:0 184px;
  }
  .mail-magazine__about-item{
    margin:25px 0;
  }
}

/* present */

.mail-magazine__present .mail-magazine__box-title:before{
  width:18.4vw;
  height:22.93vw;
  top:-12.53vw;
  left:1.2vw;
  background-image:url(../images/il_present_1.svg);
  background-size:18.4vw 22.93vw;
}
.mail-magazine__present .mail-magazine__box-title:after{
  width:21.06vw;
  height:17.06vw;
  top:11.73vw;
  right:2.23vw;
  background-image:url(../images/il_present_2.svg);
  background-size:21.06vw 17.06vw;
}
.mail-magazine__present-lead{
  font-size:1.8rem;
  margin:10.66vw 0 18.66vw 0;
}
.mail-magazine__present-lead-paragraph{
  font-weight:600;
}
.mail-magazine__sample{
  border:6px solid #ffc366;
  border-radius:14px;
  background:#fff1d3;
  margin:6vw 2vw;
  padding:13.33vw 4vw 4vw 4vw;
}
.mail-magazine__sample-title{
  position:relative;
  top:-26.66vw;
  margin:0 -2.66vw -20vw -2.66vw;
}
.mail-magazine__sample-items{
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  align-items:center;
}
.mail-magazine__sample-item{
  width:calc(33.33% - 4px);
  margin:0 2px;
}
.mail-magazine__sample-caption{
  margin:6vw 0 0 0;
}
.mail-magazine__terms{
  color:#0089ff !important;/* style.css reset */
}
.mail-magazine__terms:hover{
  color:#32a1fa !important;/* style.css reset */
}
@media screen and (min-width:520px){
  .mail-magazine__present .mail-magazine__box-title:before{
    width:13.27vw;
    height:16.54vw;
    top:-7.03vw;
    background-size:13.27vw 16.54vw;
  }
  .mail-magazine__present .mail-magazine__box-title:after{
    width:15.8vw;
    height:12.8vw;
    top:7.34vw;
    background-size:15.8vw 12.8vw;
  }
  .mail-magazine__present-lead{
    font-size:3.2rem;
    margin:5.33vw 0 18.66vw 0;
  }
  .mail-magazine__sample-caption,.mail-magazine__present-message{
    font-size:2.4rem;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__present{
    text-align:center;
  }
  .mail-magazine__present .mail-magazine__box-title:before{
    width:7.93vw;
    height:9.78vw;
    top:.75vw;
    left:3.15vw;
    background-size:7.93vw 9.78vw;
  }
  .mail-magazine__present .mail-magazine__box-title:after{
    width:10.14vw;
    height:8.14vw;
    top:1.24vw;
    right:1.27vw;
    background-size:10.14vw 8.14vw;
  }
  .mail-magazine__present-lead{
    font-size:2rem;
    margin:5.33vw 0 14vw 0;
  }
  .mail-magazine__sample{
    border-width:4px;
    border-radius:20px;
    margin:0 2vw 4vw 2vw;
    padding:0 4vw 4vw 4vw;
}
  .mail-magazine__sample-title{
    top:-96px;
    margin:0 auto -60px auto;
  }
  .mail-magazine__sample-title-image{
    width:580px;
  }
  .mail-magazine__sample-wallpaper{
    width:100%;
    max-width:640px;
  }
  .mail-magazine__sample-caption,.mail-magazine__present-message{
    font-size:1.8rem;
  }
  .mail-magazine__sample-caption{
    margin:4vw 0 0 0;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__sample-items{
    margin:0 10.42vw;
  }
  .mail-magazine__sample-item{
    width:calc(33.33% - 6px);
    margin:0 3px;
  }
  .mail-magazine__sample-caption,.mail-magazine__present-message{
    font-size:1.6rem;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__present .mail-magazine__box-title:before{
    width:111px;
    height:137px;
    top:7px;
    left:61px;
    background-size:111px 137px;
  }
  .mail-magazine__present .mail-magazine__box-title:after{
    width:142px;
    height:114px;
    top:16px;
    right:29px;
    background-size:142px 114px;
  }
  .mail-magazine__present-lead{
    margin:60px 0 130px 0;
  }
  .mail-magazine__sample{
    margin:0 120px 40px 120px;
    padding:0 148px 30px 148px;
}
  .mail-magazine__sample-items{
    margin:0;
  }
  .mail-magazine__sample-caption{
    margin:30px 0 0 0;
  }
}

/* means */

.mail-magazine__means .mail-magazine__box-title:before{
  width:15.73vw;
  height:17.06vw;
  top:1.44vw;
  left:2.13vw;
  background-image:url(../images/il_means_1.svg);
  background-size:15.73vw 17.06vw;
}
.mail-magazine__means .mail-magazine__box-title:after{
  width:14.66vw;
  height:17.06vw;
  top:1.06vw;
  right:2.66vw;
  background-image:url(../images/il_means_2.svg);
  background-size:14.66vw 17.06vw;
}
.mail-magazine__means-note{
  background:radial-gradient(#fff1d3 30%,transparent 0%) repeat-x 0 100% / 8px 8px;
  margin:0 0 8vw 0;
  padding:11vw 0 calc(8vw + .25em) 0;
}
.mail-magazine__means-images{
  display:block;
  border:1px solid #ddd;
  margin:8vw 0 0 0;
}
.mail-magazine__means-image{
  width:100%;
}
.mail-magazine__means-notice{
  text-align:center;
}
.mail-magazine__means-notice-title{
  min-height:7.58vw;
  display:inline-block;
  font-size:2rem;
  line-height:1.2;
  color:#ff630d;
  background-image:url(../images/icon_means_notice.svg),url(../images/icon_means_notice.svg);
  background-repeat:no-repeat,no-repeat;
  background-position:0 50%,100% 50%;
  background-size:8.45vw 7.58vw,8.45vw 7.58vw;
  margin:0 auto 1.2em auto;
  padding:0 calc(8.45vw + 16px);
}
.mail-magazine__means-notice-text{
  text-align:left;
}
@media screen and (min-width:520px){
  .mail-magazine__means .mail-magazine__box-title:before{
    width:11.8vw;
    height:12.8vw;
    top:-.15vw;
    background-size:11.8vw 12.8vw;
  }
  .mail-magazine__means .mail-magazine__box-title:after{
    width:10.57vw;
    height:12.31vw;
    top:.15vw;
    background-size:10.57vw 12.31vw;
  }
  .mail-magazine__means-note{
    margin:0 0 4vw 0;
    padding:5.5vw 0 calc(6vw + .125em) 0;
  }
  .mail-magazine__means-text,.mail-magazine__means-notice-text{
    font-size:2.4rem;
  }
  .mail-magazine__means-images{
    margin:4vw 0 0 0;
  }
  .mail-magazine__means-notice-title{
    min-height:6.93vw;
    font-size:3.2rem;
    background-size:7.73vw 6.93vw,7.73vw 6.93vw;
    padding:0 calc(7.73vw + 16px);
  }
}
@media screen and (min-width:768px){
  .mail-magazine__means .mail-magazine__box-title:before{
    width:8.35vw;
    height:8.78vw;
    top:-1.14vw;
    left:6.28vw;
    background-size:8.35vw 8.78vw;
  }
  .mail-magazine__means .mail-magazine__box-title:after{
    width:7.43vw;
    height:8.78vw;
    top:-.78vw;
    right:6.64vw;
    background-size:7.43vw 8.78vw;
  }
  .mail-magazine__means-note{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin:0 6.28vw 3vw 6.28vw;
    padding:4.5vw 0 3vw 0;
  }
  .mail-magazine__means-text,.mail-magazine__means-notice-text{
    font-size:1.8rem;
  }
  .mail-magazine__means-text{
    width:50.85%;
  }
  .mail-magazine__means-images{
    width:44.68%;
    margin:0;
  }
  .mail-magazine__means-notice-title{
    min-height:30px;
    font-size:2.4rem;
    background-position:0 -3px,100% -3px;
    background-size:34px 30px,34px 30px;
    padding:0 calc(34px + 12px);
  }
  .mail-magazine__means-notice-title-break{
    display:none;
  }
  .mail-magazine__means-notice-text{
    margin:0 6.28vw;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__means-text,.mail-magazine__means-notice-text{
    font-size:1.6rem;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__means .mail-magazine__box-title:before{
    width:117px;
    height:123px;
    top:-16px;
    left:88px;
    background-size:117px 123px;
  }
  .mail-magazine__means .mail-magazine__box-title:after{
    width:104px;
    height:123px;
    top:-11px;
    right:93px;
    background-size:104px 123px;
  }
}

/* attention */

.mail-magazine__attention{
  position:relative;
  border:1px solid #000;
  background:rgba(255,255,255,.5);
  margin:18.66vw 4vw;
  padding:8vw 4vw;
}
.mail-magazine__attention-title{
  font-size:2.6rem;
  text-align:center;
  margin:0 0 10vw 0;
}
.mail-magazine__attention-title:before{
  width:7vw;
  content:"";
  display:block;
  border:2px solid #000;
  margin:0 auto 2vw auto;
}
.mail-magazine__attention-item{
  text-indent:-1em;
  padding:0 0 0 1em;
}
.mail-magazine__attention-item:before{
  content:"・";
}
@media screen and (min-width:520px){
  .mail-magazine__attention{
    font-size:2.4rem;
    margin:5.2vw 4vw;
    padding:7.5vw 4vw;
  }
  .mail-magazine__attention-title{
    font-size:3.2rem;
    margin:0 0 7.5vw 0;
  }
}
@media screen and (min-width:768px){
  .mail-magazine__attention{
    font-size:1.8rem;
    margin:5.2vw 4vw;
    padding:5.5vw 4vw;
  }
  .mail-magazine__attention-title{
    font-size:2.4rem;
    margin:0 0 5.5vw 0;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__attention{
    font-size:1.6rem;
    margin:5.2vw 8vw;
    padding:4.5vw 4vw;
  }
  .mail-magazine__attention-title{
    font-size:3.4rem;
    margin:0 0 4.5vw 0;
  }
  .mail-magazine__attention-title:before{
    width:2vw;
    margin:0 auto .75vw auto;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__attention{
    width:calc(1184px - 16vw);
    margin:5.2vw auto;
  }
}

/* banner */

.mail-magazine__banner{
  position:relative;
  text-align:center;
  margin:18.66vw 4vw;
}
.mail-magazine__banner-image{
  width:100%;
  max-width:343px;
}
@media screen and (min-width:520px){
  .mail-magazine__banner{
    margin:5.2vw 4vw;
  }
  .mail-magazine__banner-image{
    max-width:514px;
  }
}
@media screen and (min-width:1040px){
  .mail-magazine__banner-image{
    max-width:686px;
  }
}
@media screen and (min-width:1400px){
  .mail-magazine__banner{
    width:calc(1184px - 8vw);
    margin:60px auto;
  }
}

/* navigation */

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

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