@charset "UTF-8";

/* 各セクションのCSS */

@media screen and (max-width: 768px) {
  /*----------------------------------------
  #result
  ----------------------------------------*/
  #result h3 {
    padding: 7% 7% 4% 7%;
    background: url(../images/result-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #result .text {
    padding: 3rem;
    background: #fff;
  }
  #result .text p {
    color: #000;
  }
  /*----------------------------------------
  #merit
  ----------------------------------------*/
  #merit h3 {
    padding: 3% 3% 3% 3%;
    background: url(../images/merit-background.jpg) no-repeat center top;
    background-size: cover;
    overflow: hidden;
    position: relative;
    z-index: 8;
  }
  #merit h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 9;
  }
  #merit h3 img {
    position: relative;
    z-index: 10;
  }
  #merit dt {
    padding: 4% 4% 4% 4%;
    background: url(../images/merit-background.jpg) repeat center top;
    background-size: cover;
  }
  #merit dd {
    padding: 3rem;
    background: #fff;
  }
  #merit dd p {
    color: #000;
  }
  /*----------------------------------------
  #reason
  ----------------------------------------*/
  #reason h3 {
    padding: 10% 30% 8% 5%;
    background: url(../images/reason-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #reason .text {
    padding: 3rem;
    background: #1d1308;
  }
  #reason .text p {
    color: #fff;
  }
  /*----------------------------------------
  #summary
  ----------------------------------------*/
  #summary h3 {
    padding: 3% 7% 3% 7%;
    background: url(../images/summary-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #summary .text {
    padding: 3rem;
    background: #fcf1ed;
  }
  #summary .text p {
    color: #000;
  }
  /*----------------------------------------
  #logic
  ----------------------------------------*/
  #logic h3 {
    padding: 5% 8% 0% 8%;
    background: url(../images/logic-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #logic .text {
    padding: 3rem;
    background: #0e151c;
  }
  #logic .text p {
    color: #fff;
  }
  /*----------------------------------------
  #tool
  ----------------------------------------*/
  #tool h3 {
    padding: 13% 38% 13% 3%;
    background: url(../images/tool-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #tool .text {
    padding: 3rem;
    background: #e3edfa;
  }
  #tool .text p {
    color: #000;
  }
  /*----------------------------------------
  #step
  ----------------------------------------*/
  #step h3 {
    padding: 5% 5% 0% 5%;
    background: url(../images/step-background.jpg) no-repeat center top;
    background-size: cover;
    overflow: hidden;
    position: relative;
    z-index: 8;
  }
  #step h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,1);
    z-index: 9;
  }
  #step h3 img {
    position: relative;
    z-index: 10;
  }
  #step dt {
    padding: 1% 0% 0% 0%;
    /* background: url(../images/step-background.jpg) repeat center top;
    background-size: cover; */
  }
  #step dd {
    padding: 3rem;
    background: #fff;
  }
  #step dd p {
    color: #000;
  }
  /*----------------------------------------
  #filter
  ----------------------------------------*/
  #filter h3 {
    padding: 6% 6% 6% 6%;
    background: url(../images/filter-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #filter .text {
    padding: 3rem;
    background: #081025;
  }
  #filter .text p {
    color: #fff;
  }
  /*----------------------------------------
  #benefit
  ----------------------------------------*/
  #benefit h3 {
    padding: 10% 29% 10% 5%;
    background: url(../images/benefit-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #benefit .text {
    padding: 3rem;
    background: #fff;
  }
  #benefit .text p {
    color: #000;
  }
  /*----------------------------------------
  #contents
  ----------------------------------------*/
  #contents h4 {
    padding: 5% 8% 5% 8%;
    background: url(../images/contents-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #contents .text {
    padding: 3rem;
    background: #fff;
  }
  #contents .text p {
    color: #000;
  }
  /*----------------------------------------
  #bonus
  ----------------------------------------*/
  #bonus h4 {
    padding: 3% 3% 3% 3%;
    background: url(../images/bonus-background.jpg) no-repeat center top;
    background-size: cover;
    overflow: hidden;
    position: relative;
    z-index: 8;
  }
  #bonus h4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(218 196 137);
    z-index: 9;
  }
  #bonus h4 img {
    position: relative;
    z-index: 10;
  }
  #bonus dt {
    padding: 6% 6% 6% 6%;
    background: url(../images/bonus-background.jpg) repeat center top;
    background-size: cover;
  }
  #bonus dd {
    padding: 3rem;
    background: #1f1203;
  }
  #bonus dd p {
    color: #fff;
  }
  /*----------------------------------------
  #price
  ----------------------------------------*/
  #price h3 {
    padding: 10% 3% 10% 30%;
    background: url(../images/price-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #price .text {
    padding: 3rem;
    background: #0d2439;
  }
  #price .text p {
    color: #fff;
  }
  /*----------------------------------------
  #limited
  ----------------------------------------*/
  #limited h3 {
    padding: 8% 4% 2% 4%;
    background: url(../images/limited-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #limited .text {
    padding: 3rem;
    background: #000;
  }
  #limited .text p {
    color: #fff;
  }
  /*----------------------------------------
  .product
  ----------------------------------------*/
.product {
    /* padding-bottom: 5%; */
    background: url(../images/product-background.jpg) repeat-y center top;
    background-size: 300%;
}
.product h3 {
    margin-bottom: 2rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.95);
}
.product .menu li {
    margin-bottom: .5rem;
}
.product .menu .product-contents {
    padding: 1.5rem;
    background: none;
}
  .product .product-contents ul, .product .product-bonus ul {
    display: flex;
    justify-content: center!important;
    flex-wrap: wrap;
}
.product .menu .product-contents ul:after {
    content: "";
    display: none;
}
.product .menu .product-contents li {
    width: 33%;
}
.product .menu .product-bonus {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: none;
}
.product .menu .product-bonus li {
    margin-bottom: .5rem;
    width: 33%;
}
.product .menu .product-price {
    margin-bottom: 5rem;
}
  /*----------------------------------------
  #faq
  ----------------------------------------*/
  #faq h3 {
    padding: 10% 32% 10% 5%;
    background: url(../images/faq-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #faq dl {
    width: 100%;
  }
  #faq dt {
    padding: 3rem;
    color: #fff;
    line-height: 160%;
    background: #f15a24;
  }
  #faq dt p {
    font-size: 12px;
    font-size: 3.2vw;
    color: #fff;
  }
  #faq dd {
    padding: 3rem;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #f15a24;
  }
  #faq dd p {
    font-size: 12px;
    font-size: 3.2vw;
  }
  /*----------------------------------------
  #add
  ----------------------------------------*/
  #add h3 {
    padding: 7% 3% 7% 3%;
    background: url(../images/add-background.jpg) no-repeat center top;
    background-size: cover;
  }
  #add .text {
    padding: 3rem;
    background: #fff;
    border: 2rem solid #151418;
    position: relative;
  }
  #add .text::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: -2rem;
    width: calc(100% + 4rem);
    height: calc(100% + 4rem);
    border: 1px solid #aeac92;
  }
  #add .text p {
    color: #000;
  }
}










@media screen and (min-width: 769px) {
  /*----------------------------------------
  #result
  ----------------------------------------*/
  #result {
    padding: 10% 0 5%;
    background: url(../images/result-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #result h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #result .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  #result .inner {
    margin: 0 auto 10%;
    width: 60%;
  }
/* テキストが右側 */
  /* #result .inner {
    margin: 0 8% 10% 40%;
  } */

  #result .text {
    padding: 10%;
    background: #fff;
  }
  #result .text p {
    color: #000;
  }
  /*----------------------------------------
  #merit
  ----------------------------------------*/
  #merit {
    padding: 10% 0 5%;
    background: url(../images/merit-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #merit .inner {
    margin: 0 auto;
    width: 60%;
  }
  #merit h3 {
    margin: 0 auto 2%;
    width: 100%;
  }
  #merit dl {
    margin-bottom: 10%;
  }
  #merit dt {
    margin-bottom: 2%;
  }
  #merit dd {
    padding: 10%;
    background: #fff;
  }
  #merit dd p {
    color: #000;
  }
  /*----------------------------------------
  #reason
  ----------------------------------------*/
  #reason {
    padding: 10% 0 5%;
    background: url(../images/reason-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #reason h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  #reason .inner {
    margin: 0 40% 10% 8%;
  }
/* テキストが真ん中 */
  /* #reason .inner {
    margin: 0 auto 10%;
    width: 60%;
  } */
/* テキストが右側 */
  /* #reason .inner {
    margin: 0 8% 10% 40%;
  } */

  #reason .text {
    padding: 10%;
    background: #130901f2;
  }
  #reason .text p {
    color: #fff;
  }
  #reason .text:not(:last-child) {
    margin-bottom: 10%;
  }
  /*----------------------------------------
  #summary
  ----------------------------------------*/
  #summary {
    padding: 10% 0 5%;
    background: url(../images/summary-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #summary h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #summary .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  #summary .inner {
    margin: 0 auto 10%;
    width: 60%;
  }
/* テキストが右側 */
  /* #summary .inner {
    margin: 0 8% 10% 40%;
  } */

  #summary .text {
    padding: 10%;
    background: #fff;
  }
  #summary .text p {
    color: #000;
  }
  /*----------------------------------------
  #logic
  ----------------------------------------*/
  #logic {
    padding: 10% 0 5%;
    background: url(../images/logic-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #logic h3 {
    margin-bottom: 0%;
  }

/* テキストが左側 */
  /* #logic .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  #logic .inner {
    margin: 0 auto 10%;
    width: 60%;
  }
/* テキストが右側 */
  /* #logic .inner {
    margin: 0 8% 10% 40%;
  } */

  #logic .text {
    padding: 10%;
    background: #000910f2;
  }
  #logic .text p {
    color: #fff;
  }
  #logic .text:not(:last-child) {
    margin-bottom: 10%;
  }
  /*----------------------------------------
  #tool
  ----------------------------------------*/
  #tool {
    padding: 10% 0 5%;
    background: url(../images/tool-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #tool h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  #tool .inner {
    margin: 0 40% 10% 8%;
  }
/* テキストが真ん中 */
  /* #tool .inner {
    margin: 0 auto 10%;
    width: 60%;
  } */
/* テキストが右側 */
  /* #tool .inner {
    margin: 0 8% 10% 40%;
  } */

  #tool .text {
    padding: 10%;
    background: #fff;
  }
  #tool .text p {
    color: #000;
  }
  #tool .text .tool-box {
    background: #bee3ff;
    border-radius: 20px;
    padding: 5%;
  }
  #tool .text .tool-box p {
    color: #000;
    font-weight: bold;
  }
  /*----------------------------------------
  #step
  ----------------------------------------*/
  #step {
    padding: 10% 0 5%;
    background: url(../images/step-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  /* #step .inner {
    margin: 0 auto;
    width: 60%;
  } */
/* テキストが右側 */
  #step .inner {
    margin: 0 8% 10% 40%;
  }
  #step h3 {
    margin: 0 auto 2%;
    width: 100%;
  }
  #step dl {
    margin-bottom: 10%;
  }
  #step dt {
    margin-bottom: 0%;
  }
  #step dd {
    padding: 5% 10% 5%;
    background: #fff;
  }
  #step dd p {
    color: #000;
  }
  /*----------------------------------------
  #filter
  ----------------------------------------*/
  #filter {
    padding: 10% 0 5%;
    background: url(../images/filter-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #filter h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #filter .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  #filter .inner {
    margin: 0 auto 10%;
    width: 60%;
  }
/* テキストが右側 */
  /* #filter .inner {
    margin: 0 8% 10% 40%;
  } */

  #filter .text {
    padding: 10%;
    background: #021226fa;
    border: 2px #ce9d09 solid;
  }
  #filter .text p {
    color: #fff;
  }
  /*----------------------------------------
  #benefit
  ----------------------------------------*/
  #benefit {
    padding: 10% 0 5%;
    background: url(../images/benefit-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #benefit h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  #benefit .inner {
    margin: 0 40% 10% 8%;
  }
/* テキストが真ん中 */
  /* #benefit .inner {
    margin: 0 auto 10%;
    width: 60%;
  } */
/* テキストが右側 */
  /* #benefit .inner {
    margin: 0 8% 10% 40%;
  } */

  #benefit .text {
    padding: 10%;
    background: #fff;
  }
  #benefit .text p {
    color: #000;
  }
    /*----------------------------------------
  #contents
    ----------------------------------------*/
  #contents {
      padding: 10% 0 5%;
      background: url(../images/contents-background.jpg) no-repeat center top fixed;
      background-size: cover;
      padding: 0 0 5%;
    }
  #contents h4 {
    margin-bottom: 0%;
  }
  #contents .inner {
    margin: 0 auto 10%;
    width: 60%;
  }
  #contents .text {
    padding: 10%;
    background: #fff;
  }
  #contents .text p {
    color: #000;
  }
  #contents .contents {
    margin: 7% auto 10%;
    width: 60%;
  }
  #contents .text:not(:last-child) {
    margin-bottom: 10%;
  }
  /*----------------------------------------
  #bonus
  ----------------------------------------*/
  #bonus {
    padding: 10% 0 5%;
    background: url(../images/bonus-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #bonus .inner {
    margin: 0 auto;
    width: 60%;
  }
  #bonus h4 {
    margin: 0 auto 2%;
    width: 65%;
  }
  #bonus dl {
    margin-bottom: 10%;
  }
  #bonus dt {
    margin-bottom: 0%;
  }
  #bonus dd {
    padding: 10%;
    background: #00141f;
    box-shadow: 0 0 5px #fff, 0 0 9px #fff, 0 0 13px #fff;
  }
  #bonus dd p {
    color: #fff;
  }
  /*----------------------------------------
  #price
  ----------------------------------------*/
  #price {
    padding: 10% 0 5%;
    background: url(../images/price-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #price h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #price .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  /* #price .inner {
    margin: 0 auto 10%;
    width: 60%;
  } */
/* テキストが右側 */
  #price .inner {
    margin: 0 8% 10% 40%;
  }

  #price .text {
    padding: 10%;
    background: #051623;
    box-shadow: 0 0 5px #000000, 0 0 9px #000000, 0 0 13px #000000;
    border: 1px solid #aeac92;
  }
  #price .text p {
    color: #fff;
  }
  #price .text:not(:last-child) {
    margin-bottom: 10%;
  }
  /*----------------------------------------
  #limited
  ----------------------------------------*/
  #limited {
    padding: 10% 0 5%;
    background: url(../images/limited-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #limited h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #limited .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  /* #limited .inner {
    margin: 0 auto 10%;
    width: 60%;
  } */
/* テキストが右側 */
  #limited .inner {
    margin: 0 8% 10% 40%;
  }

  #limited .text {
    padding: 10%;
    background: #000;
  }
  #limited .text p {
    color: #fff;
  }
  /*----------------------------------------
  .product
  ----------------------------------------*/
.product {
    padding-bottom: 5%;
    background: url(../images/product-background.jpg) no-repeat center top fixed;
    background-size: cover;
}
.product h3 {
    padding: 0;
    margin: 0 auto 5%;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
}
.product .menu {
    margin: 0 auto 5%;
    width: 60%;
    min-width: 800px;
}
.product .product-contents {
    margin-bottom: 3%;
}
.product .product-contents ul, .product .product-bonus ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.product .product-contents li {
    width: 33%;
}
.product .product-bonus {
    margin-bottom: 3%;
}
.product .product-bonus li {
    margin-bottom: 1em;
    width: 33%;
}  /*----------------------------------------
  #faq
  ----------------------------------------*/
  #faq {
    padding: 10% 0 5%;
    background: url(../images/faq-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }

/* 左側 */
  #faq .inner {
    margin: 0 40% 0 8%;
  } 
/* 右側 */
/*  #faq .inner {
    margin: 0 8% 0 40%;
  } */

  #faq h3 {
    margin-bottom: 5%;
  }
  #faq dt {
    padding: 8%;
    font-size: 16px;
    font-size: 1.6rem;
    color: #fff;
    line-height: 160%;
    background: rgba(241, 90, 36, 0.95);
  }
  #faq dt p {
    color: #fff;
    font-weight: bold;
  }
  #faq dd {
    padding: 8%;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #f15a24;
  }
  #faq dd p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 170%;
  }
  /*----------------------------------------
  #add
  ----------------------------------------*/
  #add {
    padding: 10% 0 5%;
    background: url(../images/add-background.jpg) no-repeat center top fixed;
    background-size: cover;
  }
  #add h3 {
    margin-bottom: 2%;
  }

/* テキストが左側 */
  /* #add .inner {
    margin: 0 40% 10% 8%;
  } */
/* テキストが真ん中 */
  #add .inner {
    margin: 0 auto 10%;
    width: 60%;
    background: #151418;
    padding: 3% 5% 5%;
    border: 1px solid #aeac92;
  }
/* テキストが右側 */
  /* #add .inner {
    margin: 0 8% 10% 40%;
  } */

  #add .text {
    padding: 10%;
    background: #fff;

  }
  #add .text p {
    color: #000;
  }
}