@charset "UTF-8";
/* ===========
   a221007
=========== */


.inBlock *[class*="inBlock"],
.inBlock_XL *[class*="inBlock"],
.inBlock_L *[class*="inBlock"],
.inBlock_M *[class*="inBlock"],
.inBlock_S *[class*="inBlock"],
.inBlock_XS *[class*="inBlock"] {
   padding-right: 0;
   padding-left: 0;
   max-width: 20.75em;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 501px) {
   .inBlock, .inBlock_XL, .inBlock_L, .inBlock_M, .inBlock_S, .inBlock_XS {
      padding-right: 28px;
      padding-left: 28px;
   }
}


#main {
   color: #2D2D2D;
   position: relative;
}
#bg-wrap {
   width: 0;
   height: 0;
   top: 0;
   position: fixed;
}
#bg-wrap.over {
   position: absolute;
   left: 0;
   bottom: 0;
   top: auto;
}
#bg-wrap .bg-inner {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}
#bg-wrap.over .bg-inner {
   transform: translateY(-100%);
}
#bg-wrap .bg-inner .bg {
   width: 100vw;
   height: 100%;
}
#bg-wrap .bg-inner .bg img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
@media (min-width: 769px) {
   #bg-wrap .bg-inner {
      width: calc(100vw - 185px - 83px);
   }
   #bg-wrap .bg-inner .bg {
      margin-left: -185px;
      margin-right: -83px;
   }
}

#magazine {
   background: #FFF;
   position: relative;
}
@media (min-width: 769px){
   #magazine {
      max-width: 560px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;

      font-size: 20px !important;
   }
}
@media (min-width: 829px){
   #magazine {
      font-size: 22px !important;
   }
}


iframe {
   vertical-align: bottom;
}

/* --------------------
   margin
-------------------- */
.articleHeader {
  margin-bottom: 0;
}

/* --------------------
  etc
-------------------- */
#intro {
  color: #764E2F;
}
#cont1 .card {
   margin-top: -4em;
}
#cont3 .toc {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0;
   padding-top: 75.3%;
   position: relative;
   background: url(../img/3__toc.jpg) no-repeat center center / contain;
}
#cont3 .toc li {
   width: 30%;
   position: absolute;
}
#cont3 .toc li:nth-of-type(1) {
   bottom: 55%;
}
#cont3 .toc li:nth-of-type(2) {
   top: 45%;
   right: 50%;
}
#cont3 .toc li:nth-of-type(3) {
   top: 45%;
   left: 50%;
}
#cont3 .toc a {
   display: block;
   padding-top: 100%;
}
#cont3 .toc + .card .card_header{
  padding-top: 5em;
}
#cont3 .toc + .card .card_header .imgBox {
   width: 40%;
}
#cont3 [id*="point"] {
   position: relative;
}
#cont3 .point1 .card,
#cont3 .point3 .card{
  position: absolute;
  top: 68%;
  right: 0;
  left: 0;
}
#cont3 .point3 .card{
  top: 72.5%;
}
#cont3 .point2 .card{
   margin-top: 2%;
  margin-bottom: 6%;
}

#cont4 {
   background: #E98C18;
   overflow: hidden;
}
#cont4 .card {
   margin: -12% auto 1.5em;
}

/* --------------------
   .card
-------------------- */
.card {
  width: 88%;
  max-width: 88%;
  padding-top: 4%;
}
.card .card_body > * {
  margin-right: 6%;
  margin-left: 6%;
}
.card .card_body > .btnBox {
  margin-top: 1em;
  margin-right: auto;
  margin-left: auto;
}

.card .txtBox {
  margin-top: 0;
}
.card .priceBox .off {
   flex-direction: column;
}
.card .priceBox .off small {
   display: block;
   font-size: .6em;
   margin-top: .5em;
}

.subscription {
  text-align: center;
  color: #00a33d;
  font-weight: 500;
  margin-top: .5em;
}

@media(min-width:829px){
  .btnBox .cartBtn {
    width: 11.5em;
  }
}