@charset "utf-8";


.container {
  margin: 0 auto;
  text-align: center;
}

a:hover {
  opacity: 0.7;
}

.bg-gradient-pk {
  background: linear-gradient(to bottom, rgba(255, 50, 123, 0.8), rgba(255, 227, 220, 0.8));
}

.bg-gradient-gr {
  background: linear-gradient(to bottom, rgba(186, 208, 0, 0.8), rgba(186, 208, 0, 0.1));
}

hr.pk-dot {
  border-top: dotted 4px #f6bdbb; 
}

@media screen and (min-width: 751px) {

/* 共通 */
  .sp {
    display: none;
  }

  .container {
    width: 1000px;
  }

  .content {
    padding: 4em 3em;
  }

  .margin-top {
    margin-top: 3em;
  }

  .margin-btm {
    margin-bottom: 3em;
  }

  p.normal {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.6em;
    text-align: left;
    word-break: break-all;
  }

  p.notes {
    font-size: 14px;
    text-align: right;
  }

  /*-------------*/
  /* 共通box指定 */
  /*------------*/

  .box {
    margin: 0 auto;
    width: 852px;
    border-radius: 8px;
    background-color: #fff;
    padding: 8px;
    position: relative;
    z-index: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 7.5);
  }

  /* box内側ライン pink */
  .box-line-pk:before {
    border: solid 1px #ffbdb6;
    content: '';
    display: block;
    position: absolute;
    border-radius: 4px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 8px;
    z-index: -1;
   }

  .inner {
    margin: 2em 3.4em;
   }


  /*--------------*/
  /* 何がわかるの？ */
  /*--------------*/
  
  .what-is-chonaihakase {
    background: linear-gradient(to bottom, #fff, #fbdde3);
  }

  .what-is-chonaihakase img {
    margin: 1em 0;
  }

  .nayami-kaimei {
    background-image: url("../img/nayami_kaimei_bg.jpg");
    background-color: #f6f6f6;
  }

  .nayami-kaimei img.text {
    margin: 5em 0;
    padding-left: 15em;
  }

  /*--------------*/
  /*   point-01   */
  /*--------------*/

  .point-01 .content {
    background-image: url("../img/point01_bg.jpg");
    background-repeat: no-repeat;
  }

  .float-area {
    overflow: hidden;
    display:flex;
    align-items:center;
  }

  .float-area img {
    float: left;
    line-height: 300px;
  }

  .float-area p {
    float: right;
    width: 66%;
    padding-left: 1.2em;
  }

  /*-------------------*/
  /* 検査キット購入エリア */
  /*-------------------*/
  .buy-cont {
      position: relative;
   }

   .add-to-cart {
      position: absolute;
      bottom: 152px;
      right: 100px;
   }

   .add-to-cart:hover {
      opacity: 0.6;
   }

  /*----------------*/
  /* point-01 KARTE */
  /*----------------*/

  .content-karte {
    background: linear-gradient(to top, rgba(186, 217, 123, 1) 50px, rgba(255, 255, 255, 0) 300px)
    ,url("../img/karte/green_a.png"), url("../img/karte/green_b.png"), url("../img/karte/green_c.png"), url("../img/karte/green_d.png"), url("../img/karte/green_e.png");
    background-repeat: no-repeat;
    background-position: /* グラデ */center bottom, /* green a~e */left top, right top 700px, left top 2000px, right bottom 2400px, left bottom 600px;
  }

  .box-karte {
    background: linear-gradient(to bottom, #f03764 50px, #eb213b 110px, #fff 0%, #fff 0%);
    position: relative;
    margin-top: 4em;
  }

  .box-karte-top {
    margin-top: 0em;
  }

  .title-box {
    margin-left: 3em;
    line-height: 95px;
    overflow: hidden;
  }

  .title-box img {
    float: left; 
    width: 75px;
    margin-right: 1.5em;
  }

  .content-karte h3 {
    font-size: 34px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    letter-spacing: 0.03em;
  }

  .content-karte h3 span {
    font-size: 52px;
  }

  .content-karte p {
    margin-bottom: 2.5em;
  }

  .content-karte .inner img {
    margin-bottom: 2em;
  }


  /*---------*/
  /*  サプリ  */
  /*---------*/

  .supple-top {
    background-color: rgba(255, 50, 123, 0.8);
  }

  .supple-btm {
    padding: 4em 0;
  }

  .catch {
    margin-top: 4em;
  }

  .content-supple .pk-arrow {
    margin-top: 2em;
  }

  .content-supple .box-supple {
    padding: 2em 0;
    box-shadow: 0 0 4px rgba(178, 0, 38, 7.5);
  }

  /*------------*/
  /*  point-02  */
  /*------------*/

  .point-02 {
    background: url("../img/point02_bg.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #edeff2;
  }

  .point-02 h3 {
    margin-bottom: 3em;
  }

/* box内側ライン gray */
  .box-line-gy:before {
    border: solid 1px #a3a3a3;
    content: '';
    display: block;
    position: absolute;
    border-radius: 4px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 8px;
    z-index: -1;
  }

  .box-line-gy:not(:last-child) {
    margin-bottom: 3em;
  }

  .point-02 h4 {
    font-size: 40px;
    line-height: 1;
    text-align: left;
    margin-bottom: .6em;
  }

  h4.text-gr {
    color: #7bcab8;
  }

  h4.text-or {
    color: #ffa952;
  }

  .point-02-content {
    overflow: hidden;
  }

  .point-02 .left-area {
    width: 70%;
    float: left;
  }

  .point-02 .right-area {
    width: 30%;
    float: right;
  }

  .point-02-content img {
    padding: 1em 0;
  }

  /*-----------------*/
  /* point-03 HOW TO */
  /*-----------------*/

  .point-03 .content {
    background: url("../img/bg_howto.jpg") no-repeat center / cover;
    background-size: cover;
  }

  .howto {
    text-align: center;
  }

  .howto img:not(:last-child) {
    margin-bottom: 1em;
  }

  /*---------*/
  /*   FAQ   */
  /*---------*/

  dl.faq-area {
    padding: 0 2em;
    text-align: left;
    margin: 0;
    counter-reset: number;
  }

  .faq hr {
    border-top: solid 2px #7ebe26; 
  }

  dt.question {
    font: bold 1.7em sans-serif;
    color: #64b100;
    margin-top: 2em;
  }

  dt.question::before {
    counter-increment:number;
    content: "Q" counter(number)".";
  }

  dd.answer {
    padding: 0 3em;
    font-size: 1.1em;
    line-height: 1.8em;
    margin-top: 1em;
   }

  dd.answer:before {
    content: "A.";
   }

    /*---------*/
    /* 注意事項 */
    /*---------*/

  .caution {
    background-color: rgba(157, 200, 21, 0.3);
    margin: 0 auto;
  }

  .caution .box-caution {
    padding: 2em 0;
    box-shadow: 0 0 4px rgba(103, 127, 0, 7.5);
  }

 /*
  .caution h2 {
    font: bold 2em sans-serif;
    color: #e82332;
    margin: 1em 0;
  }
  
  .caution p {
    font: bold 1.2em sans-serif;
    color: #fff;
    padding: .2em 0;
    margin: 0 2em;
    background-color: #e82332;
  }

  ul {
    margin: 2em 4em;
  }

  li {
    line-height: 1.6em;
    text-align: left;
  }

  li:not(:last-child) {
    margin-bottom: 1em;
  }
*/

  /*--------*/
  /* footer */
  /*--------*/
  footer {
    background: #3287D3;
    padding-top: 20px;
    padding-bottom: 30px;
    width: 100%;
  }

  footer a {
    text-decoration: none;
    color: #fff;
  }

  .foot-cont {
    width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  .foot-ul {
    display: flex;
    justify-content: center;
    font-size: 15px;
  }

  .foot-ul-1 li {
    list-style-position: inside;
    list-style-image: url(../img/sankaku.png);
    margin: 30px;
  }

  .foot-ul-2 li {
    position: relative;
    padding-right: 20px;
    padding-left: 20px;
    list-style-type: none;
  }
  
  .foot-ul-2 li:after {
    content: "|";
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
  }

  .foot_ul li:last-child:after {
    display: none;
  }

  .privacy-mark-area {
    height: 70px;
    margin: 30px 0;
    overflow: hidden;
  }

  .privacy-mark-area img {
    width: 70px;
    float: left;
  }

  .privacy-text {
    width: 800px;
    height: 70px;
    float: right;  
    position:relative;
  }

  .privacy-text p{
    font-size: 13px;
    line-height: 1.6em;
    color: #fff;
    text-align: left;
    position:absolute;
    top: 50%;
    transform: translateY(-50%); /* ズレ微調整 */
  }

  .copyright p {
    font-size: 12px;
    color: #F2F2F2;
  }

}


/*--------------------------- PC〜スマホ間調整 --------------------------*/
@media screen and (min-width:751px) and (max-width: 960px) {

  .sp {
    display: none;
  }
}

/*-------------------------------- スマホ -------------------------------*/
@media screen and (max-width: 750px) {

  /* SP共通 */
  .pc {
    display: none;
  }

  .container img {
    width: 100%;
  }

 .content {
    padding: 2em .5em;
  }

  .margin-top {
    margin-top: 2em;
  }

  .margin-btm {
    margin-bottom: 2em;
  }

  p.normal {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.6em;
    text-align: left;
    word-break: break-all;
  }

  p.notes {
    font-size: 10px;
    text-align: right;
  }

  .sub-image {
    padding: 1em;
  }


  /*-------------*/
  /* 共通box指定 */
  /*------------*/

  .box {
    margin: 0 auto;
    width: 340px;
    border-radius: 8px;
    background-color: #fff;
    padding: 8px;
    position: relative;
    z-index: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 7.5);
  }

  /* box内側ライン pink */
  .box-line-pk:before {
    border: solid 1px #ffbdb6;
    content: '';
    display: block;
    position: absolute;
    border-radius: 4px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 4px;
    z-index: -1;
   }

  .inner {
    margin: 1em;
   }


  /*--------------*/
  /* 何がわかるの？ */
  /*--------------*/
  
  .what-is-chonaihakase {
    background: linear-gradient(to bottom, #fff, #fbdde3);
  }

  .what-is-chonaihakase img {
    margin: 1em 0;
  }

  .nayami-kaimei {
    background-image: url("../img/nayami_kaimei_bg.jpg");
    background-color: #f6f6f6;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .nayami-kaimei img.text {
    width: 75%;
    margin: 1em 0;
    padding-left: 5em;
  }


  /*--------------*/
  /*   point-01   */
  /*--------------*/

  .point-01 .content {
    background-image: url("../img/point01_bg.jpg");
    background-repeat: no-repeat;
  }

  .float-area img {
    width: 50%;
    margin: 1em 0;
  }

  .catch-b {
    margin-bottom: 1em;
  }

  /*-------------------*/
  /* 検査キット購入エリア */
  /*-------------------*/
  .buy-cont {
      position: relative;
   }

   .add-to-cart {
      position: absolute;
      bottom: 16%;
      padding: 0 1.5em;
   }

   .add-to-cart:hover {
      opacity: 0.6;
   }

  /*----------------*/
  /* point-01 KARTE */
  /*----------------*/

  .content-karte {
    background: linear-gradient(to top, rgba(186, 217, 123, 1) 50px, rgba(255, 255, 255, 0) 300px)
    ,url("../img/karte/green_a.png"), url("../img/karte/green_b.png"), url("../img/karte/green_c.png"), url("../img/karte/green_d.png"), url("../img/karte/green_e.png");
    background-repeat: no-repeat;
    background-position: /* グラデ */center bottom, /* green a~e */left top, right top 350px, left top 1000px, right bottom 1200px, left bottom 300px;
    padding: 3em 0;
    background-size: contain;
  }

  .box-karte {
    background: linear-gradient(to bottom, #f03764 30px, #eb213b 64px, #fff 0%, #fff 0%);
    position: relative;
    margin-top: 2em;
  }

  .box-karte-top {
    margin-top: 0em;
  }

  .title-box {
    line-height: 50px;
    overflow: hidden;
  }

  .title-box img {
    float: left; 
    width: 35px;
    margin-right: .4em;
  }

  /* point1のみ文字サイズ変更 */
  .content-karte h3.karte1 {
    font-size: 14px;
  }

  .content-karte h3 {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    letter-spacing: 0.03em;
  }

  .content-karte h3 span {
    font-size: 25px;
  }

  .content-karte p {
    margin-bottom: 2.5em;
  }

  .content-karte .inner img {
    margin-bottom: 1.5em;
  }

  /*---------*/
  /*  サプリ  */
  /*---------*/

  .supple-top {
    background-color: rgba(255, 50, 123, 0.8);
  }

  .supple-btm {
    padding: 3em 0;
  }

  .catch {
    margin: 2em 1em 0;
  }

  .content-supple .pk-arrow {
    margin-top: 1em;
  }

  .content-supple .box-supple {
    padding: 2em 0;
    box-shadow: 0 0 4px rgba(178, 0, 38, 7.5);
  }

  /*------------*/
  /*  point-02  */
  /*------------*/

  .point-02 {
    background: url("../img/point02_bg.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #edeff2;
    background-size: contain;
  }

  .point-02 h3 {
    margin-bottom: 3em;
  }

/* box内側ライン gray */
  .box-line-gy:before {
    border: solid 1px #a3a3a3;
    content: '';
    display: block;
    position: absolute;
    border-radius: 4px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: 4px;
    z-index: -1;
  }

  .box-line-gy:not(:last-child) {
    margin-bottom: 1.5em;
  }

  .point-02 h4 {
    font-size: 24px;
    line-height: 1;
    text-align: left;
    margin-bottom: .6em;
  }

  h4.text-gr {
    color: #7bcab8;
  }

  h4.text-or {
    color: #ffa952;
  }

  .point-02-content {
    overflow: hidden;
  }

  .point-02 .left-area {
    width: 68%;
    float: left;
  }

  .point-02 .right-area {
    width: 30%;
    float: right;
  }

  .point-02-content img.triangle {
    padding: 3em 0;
  }

  .point-02-content img.round {
    padding: 1em 0;
    
  }

  /*-----------------*/
  /* point-03 HOW TO */
  /*-----------------*/

  .point-03 .content {
    background: url("../img/bg_howto.jpg") no-repeat center / cover;
    background-size: cover;
  }

  .howto {
    text-align: center;
  }

  .howto img.arrow {
    width: 30px;
  }

  .howto img:not(:last-child) {
    margin-bottom: .5em;
  }

  /*---------*/
  /*   FAQ   */
  /*---------*/

  .faq h2 {
    padding: 0 6em;
  }

  dl.faq-area {
    padding: 0 1.2em;
    text-align: left;
    margin: 0;
    counter-reset: number;
  }

  .faq hr {
    border-top: solid 2px #7ebe26; 
    margin: 1em 1em 0;
  }

  dt.question {
    font: bold 1.4em sans-serif;
    color: #64b100;
    margin-top: 1em;
  }

  dt.question::before {
    counter-increment:number;
    content: "Q" counter(number)".";
  }

  dd.answer {
    font-size: 1.1em;
    line-height: 1.8em;
    margin-top: 1em;
   }

  dd.answer:before {
    content: "A.";
   }

    /*---------*/
    /* 注意事項 */
    /*---------*/

  .caution {
    background-color: rgba(157, 200, 21, 0.3);
    margin: 0 auto;
  }

  .caution .box-caution {
    padding: 2em 0;
    box-shadow: 0 0 4px rgba(103, 127, 0, 7.5);
  }

  .caution img {
    width: 320px;
  }


/* sp-footer */
  footer {
    background: #3287D3;
    padding-bottom: 30px;
    width: 100%;
  }

  footer a {
    text-decoration: none;
    color: #fff;
    line-height: 1;
  }

  .foot-menu {
    padding: 40px 0px;
    margin: 0 16px;
    border-bottom: 1px solid #fff;
  }

  .foot-ul {
    padding: 0 10px;
    margin: 0 auto;
    overflow: hidden;
  }

  .foot-ul-1 li {
    font-size: 15px;
    list-style-position: inside;
    list-style-image: url(../img/sankaku.png);
    text-align: left;
    float: left;
    padding-right: 20px;
    margin-bottom: 30px;
  }

  .foot-ul-2 li {
    text-align: left;
    font-size: 14px;
    margin-top: 20px;
  }

  .privacy-mark-area {
    width: 340px;
    margin: 30px auto;
    text-align: center;
  }

  .privacy-mark-area img {
    width: 70px;
    padding-bottom: 20px;
  }

  .privacy-text p{
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    text-align: left;
  }

  .copyright {
    text-align: center;
  }

  .copyright p {
    font-size: 11px;
    color: #ccc;
  }

}