@charset "UTF-8";

#magazine {
   color: #2d2d2d;
}

/* --------------------
   #intro
-------------------- */
#intro {
   background: #9daed1;
   background: linear-gradient(180deg, #94bdce 0%, #9daed1 75%);
   padding-top: calc((100vw - 185px - 83px)*0.14);
   margin-top: calc((100vw - 185px - 83px)*-0.14);
}
@media (max-width: 960px) {
   #intro {
      padding-top: calc((100vw - 185px - 83px)*0.34);
      margin-top: calc((100vw - 185px - 83px)*-0.34);
   }
}
@media (max-width: 780px) {
   #intro {
      padding-top: 34vw;
      margin-top: -34vw;
   }
}

/* --------------------
   .buyBtn
-------------------- */
.btnBox .buyBtn {
   border-color: #005ab6;
   background: #005ab6;
}
.btnBox .buyBtn:hover {
   border-color: #005ab6;
   background: #FFF;
   color: #005ab6;
}

/* --------------------
   .card
-------------------- */
.card {
   background: transparent;
}
.card .card_header .imgBox.imgStatic {
   height: 12em;
}

/* --------------------
   .articleBody
-------------------- */
.articleBody {
   background: #9daed1;
}


/* --------------------
   #cont2
-------------------- */
.howto li .txtBox {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-right: -50px;
   margin-left: -50px;
}
.howto li .txtBox_l {
   width: 20%;
}
.howto li .txtBox_c {
   width: 40%;
}
.howto li .txtBox_r {
   width: 40%;
}


.howto li .txtBox_l img {
   width: 90%;
   transform: translate(-5%, -15%);
}
.howto li .txtBox_c .ttl img {
   height: 1.25em;
   margin-bottom: .5em;
}
.howto li .txtBox_c p {
   padding-right: 1.5em;
   text-align: left;
}

.howto li.step3 .txtBox_l img {
   transform: translate(-10%, -15%) scale(1.2);
}


@media (max-width: 1468px) {
   .howto li .txtBox {
      margin-right: -3.4vw;
      margin-left: -3.4vw;
   }
}
@media (max-width: 960px) {
   .howto li .txtBox {
      margin-right: 0;
      margin-left: 0;
   }
   .howto li .txtBox_l {
      width: 8em;
   }
   .howto li .txtBox_c {
      width: 15em;
   }
   .howto li .txtBox_r {
      width: 22em;
   }
   .howto li .txtBox_c p {
      padding-right: 0;
   }
   .howto li.step3 .txtBox_l img {
      transform: translate(-10%, 0) scale(1.2);
   }
}
@media (max-width: 768px) {
   .howto li .txtBox_l {
      width: 7em;
   }
   .howto li .txtBox_c {
      width: 13.5em;
   }
   .howto li .txtBox_r {
      width: 20.5em;
   }
   .howto li.step3 .txtBox_l img {
      transform: translate(-20%, 0) scale(1.3);
   }
}

/* --------------------
   #cont3
-------------------- */
#cont3 {
   background: #a7caff;
}

#cont3 .videoLink {
   display: block;
   position: relative;
}

#cont3 .thumbnail {
   width: 45%;
   padding-top: 25%;
   background: #b5b5b5;
   position: absolute;
   top: 27.5%;
}
#cont3 .thumbnail > img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}
#cont3 .thumbnail::before {
   content: '';
   display: block;
   width: 2.25em;
   height: 2.25em;
   background: url(../img/play_icon.png) no-repeat center center / contain;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   z-index: 2;
}
#cont3 .videoLink:hover .thumbnail::before {
   opacity: .5;
   transition: .2s;
}

/* --------------------
   .bnr
-------------------- */
.bnrList {
   justify-content: center;
   align-items: flex-end;
   margin-left: -1em;
   margin-right: -1em;
}
.bnrList > p {
   flex: 0 0 50%;
   padding-left: 1em;
   padding-right: 1em;
}