/* --------------------
   /19-1/
   SP
----------------------- */
@media screen and (max-width:768px) {

/* ---- header ---- */
header{
  width: 100%;
  height: auto;
  padding: 0 0 1.866vw;
  background: url(/image/parts/wrap_main_bg.png) 0 bottom repeat-x;
  background-size: auto 1.866vw;
  display: block;
  position: fixed;
  z-index: 9999;

  /* wrap */
  .header__wrap{
    width: 100%;
    display: block;
    padding: 4.266vw 5.333vw 3.2vw;
    background: #ffffff;
    
  }

  .header__logo{
    width: 44.533vw;
    height: auto;
    margin: 0 0 2.4vw;
      img{
        width: 100%;
        height: auto;
        display: block;
      }
  }
  .header__cont{
    text-align: left;
  }
  .header__ge{
    width: 69.333vw;
    font-size: 3.2vw;
    line-height: 1.2;
  }

  /* header__menu */
  .header__menu{
    position: absolute;
    top: 2.666vw;
    right: 5.333vw;
  }
  /* openbtn */
  .openbtn {
    position: relative;
    z-index: 9999;
    height: 12.8vw;
    width: 12.8vw;
    border-radius: 2.666vw;
    background: var(--color-orange01);
    cursor: pointer;
  }
  .openbtn span {
    position: absolute;
    z-index: 9999;
    display: inline-block;
    width: 6.4vw;
    height: 0.8vw;
    background: #ffffff;
    transition: all 0.5s;
  }
  .openbtn span:nth-of-type(1) {
    top: 4vw;
    left: 3.2vw;
  }
  .openbtn span:nth-of-type(2) {
    top: 6.133vw;
    left: 3.2vw;
  }
  .openbtn span:nth-of-type(3) {
    top: 8.266vw;
    left: 3.2vw;
  }
  .openbtn.active span:nth-of-type(1) {
    top: 5.866vw;
    left: 3.2vw;
    transform: rotate(-45deg);
  }
  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  .openbtn.active span:nth-of-type(3) {
    top: 5.866vw;
    left: 3.2vw;
    transform: rotate(45deg);
  }

  .openbtn__txt{
    font-size: 2.666vw;
    color: var(--color-orange01);
    text-align: center;
    margin-top: 2px;
  }
    .openbtn__txt .openbtn__txt--open{
      display: block;
    }
    .openbtn__txt .openbtn__txt--close{
      display: none;
    }
    .openbtn__txt.active .openbtn__txt--open{
      display: none;
    }
    .openbtn__txt.active .openbtn__txt--close{
      display: block;
    }
}


/* ---- footer ---- */
footer{
  width: 100%;
  padding: 8.533vw 5.866vw;
  display: block;
}

.footer__nav{
  /* width: 60vw; */
  margin: 0 auto 8vw;
  display: flex;
  justify-content: center;

    li{
      padding-right: 4.266vw;
      font-size: 3.466vw;
    }
    li:last-child{
      padding-right: 0;
    }
    li::after{
      content: '｜';
      margin-left: 4.266vw;
    }
    li:last-child:after{
      content: none;
    }

    a{
      text-decoration: none;
    }
    a:hover{
      opacity: 0.7;
    }
}

.footer__txt{
  margin-bottom: 6.4vw;
  font-size: 3.2vw;
  color: var(--color-gray01);
  line-height: 1.6;
}

.footer__wrap{
  width: 100%;
  height: 19vw;
  margin-bottom: 4.266vw;
  font-size: 3.2vw;
  position: relative;
}

.footer__update{
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3.2vw;
  color: var(--color-gray01);
}

.footer__jp{
  position: absolute;
  top: 8vw;
  left: 0;
  
  img{
    width: 38.4vw;
  }
}

.copyright{
  position: absolute;
  top: 15vw;
  left: 0;
  font-size: 3.2vw;
}

.footer__logo{
  padding-top: 4.8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;

  img{
    width: 59.199vw;
    height: auto;
    }
}


/* ---- main__menu ---- */


/* navArea */
.navArea{
  width: 100%;
  padding: 0 2.666vw;

  .nav__list{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
    .nav__list li{
      position: relative;
    }

    .nav__list li a{
      display: block;
      width: 45.866vw;
      height: 25.95vw;
      padding: 14.933vw 0 1.333vw;
      background: var(--color-orange01);
      color: #ffffff;
      font-size: 3.733vw;
      font-weight: 700;
      text-align: center;
      margin-bottom: 2.666vw;
      border-radius: 3.2vw;
      box-shadow: 0 2.133vw 3.2vw rgba(0, 0, 0, 0.1);
    }
    .nav__list li.nav__list--egfr a{
      font-size: 3.1vw;
    }
    .nav__list li.nav__list--support-dl a{
      background: var(--color-ex19-1_01);
      color: #ffffff;
    }
    .nav__list li.nav__list--egfr a::before,
    .nav__list li.nav__list--about a::before,
    .nav__list li.nav__list--flow a::before,
    .nav__list li.nav__list--side-effect a::before,
    .nav__list li.nav__list--attention a::before,
    .nav__list li.nav__list--selfcare a::before,
    .nav__list li.nav__list--aboselfcareut a::before,
    .nav__list li.nav__list--med-expenses a::before,
    .nav__list li.nav__list--support-dl a::before{
      display: block;
      content: "";
      position: absolute;
      width: 10.133vw;
      height: 10.133vw;
      top: 3.2vw;
      left: calc(50% - 5.066vw);
    }
    .nav__list li.nav__list--egfr a::before{
      background: url(/ex19-2/image/parts/icon_egfr.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--about a::before{
      background: url(/ex19-2/image/parts/icon_about.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--flow a::before{
      background: url(/ex19-2/image/parts/icon_flow.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--side-effect a::before{
      background: url(/ex19-2/image/parts/icon_side_effect.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--attention a::before{
      background: url(/ex19-2/image/parts/icon_attention.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--selfcare a::before{
      background: url(/ex19-2/image/parts/icon_selfcare.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--med-expenses a::before{
      background: url(/ex19-2/image/parts/icon_med_expenses.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--support-dl a::before{
      background: url(/ex19-2/image/parts/icon_support_dl.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }

    /* comingsoon */
    li.comingsoon a{
      padding-top: 13.33vw;
      padding-bottom: 1.3vw;
      background: #A2A2A2;
      font-size: 3.46vw;
      line-height: 1.1;
      color: #ffffff;
    }
    li.comingsoon a span{
      font-size: 3.2vw;
    }

    .nav__list li.nav__list--support-dl.comingsoon a{
      background: #A2A2A2;
      /* color: #ffffff; */
    }

    .nav__list li.nav__list--med-expenses.comingsoon a::before{
      background: url(/ex19-2/image/parts/icon_med_expenses_cs.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    .nav__list li.nav__list--support-dl.comingsoon a::before{
      background: url(/image/parts/icon_support_dl_cs.png) 0 0 no-repeat;
      background-size: 10.133vw auto;
    }
    /* comingsoon */
}



/* ---- pagetop --- */
#scroll-top{
  width: 13.333vw;
  height: 13.333vw;
  position: fixed;
  bottom: 5.333vw;
  right: 5.333vw;
  cursor: pointer;
  z-index: 2;
}
  .is-stop{
    position: absolute !important;
    bottom: 224vw !important;
  }


/* --------------------
   modal parts
----------------------- */
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}


/* ---- modalArea ---- */
.modalArea{
  width: 94.666vw;
  background-color: #fff;
  border-radius: 3.2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .modal__wrap{
    position: relative;
  }

  .modal__btn--close{
    position: absolute;
    top: -12.8vw;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
    .modal__btn--close img{
      margin-bottom: 0;
      margin-left: 4px;
    }
    .modal__btn--close a{
      color: var(--color-green01);
      text-decoration: none;
    }
    .modal__btn--close span{
      font-size: 3.2vw;
      color: #ffffff;
    }
}



.modal-block {
  display: none;
}


/* ---- disclaimer ---- */
.modalArea .disclaimer {
  width: 100%;
  padding: 5.333vw;
  background-color: #fff;
  border-radius: 3.2vw;

  dl.disclaimer__cont{
    margin-bottom: 7.466vw;

    dt{
      font-size: 5.333vw;
      line-height: 1.6;
      text-align: left;
      color: var(--color-orange01);
    }
    dd{
      margin-top: 3.733vw;
      padding-top: 5.333vw;
      border-top: 1px solid var(--color-orange01);
      font-size: 4.8vw;
      line-height: 1.56;
    }
    dd:last-child{
      border-top: none;
      padding-top: 0;
      margin-top: 3.733vw;
    }
  }

  ul.disclaimer__btn{
    width: 100%;
    margin: 0 auto;
    display: block;

    li a,
    li span{
      display: block;
      width: 100%;
      height: 19.733vw;
      padding: 7.199vw 0;
      margin-bottom: 5.333vw;
      border-radius: 3.2vw;
      background: var(--color-green01);
      box-shadow: 0 2.133vw 3.2vw rgba(0, 0, 0, 0.1);
      color: #ffffff;
      font-size: 5.333vw;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
    }
  }
}


/* ---- modal-movie ---- */
.modal-movie {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  overflow-y: auto;

  .modal__bg{
    width: 94.666vw;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3.2vw;
    padding: 5.333vw 8vw;
  }
  
  .modal__btn--close{
    position: absolute;
    top: -10.666vw;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
    .modal__btn--close img{
      width: 8.799vw;
      height: 8.799vw;
      margin-bottom: 0;
      margin-left: 4px;
    }
    .modal__btn--close a{
      color: var(--color-green01);
    }
    .modal__btn--close span{
      font-size: 3.2vw;
      color: #ffffff;
    }
}


@media (orientation: landscape){
  .modal-movie {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    overflow-y: auto;
  
    .modal__bg{
      width: 94.666vw;
      background: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 3.2vw;
      padding: 5.333vw 8vw;
    }
    
    .modal__btn--close{
      position: absolute;
      top: 1.066vw;
      right: 1.066vw;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
      .modal__btn--close img{
        width: 5.333vw;
        height: 5.333vw;
        margin-bottom: 0;
        margin-left: 0;
      }
      .modal__btn--close a{
        color: var(--color-green01);
      }
      .modal__btn--close span{
        font-size: 2.133vw;
        color: #000000;
      }
  }
}

/* ---- modal-download ---- */
.modal-download {
  overflow-y: auto;

  .modal__bg {
    width: 94.666vw;
    background: #ffffff;
    position: absolute;
    top: 18vw;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 3.2vw;
  }
  
  .modal__wrap{
    padding: 5.333vw;
    position: relative;
  }

  .modal__btn--close{
    position: absolute;
    top: -10.666vw;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
    .modal__btn--close img{
      width: 8.799vw;
      height: 8.799vw;
      margin-bottom: 0;
      margin-left: 4px;
    }
    .modal__btn--close a{
      color: var(--color-green01);
    }
    .modal__btn--close span{
      font-size: 3.2vw;
      color: #ffffff;
    }

    
    dl.modal__cont dt{
      padding: 0 0 0 12.8vw;
      font-size: 5.333vw;
      line-height: 1.6;
      background: url(/image/parts/icon_tool_dl.png) 0 2.133vw no-repeat;
      background-size: 8.799vw auto;
    }
    dl.modal__cont dd{
      margin-top: 3.733vw;
      padding-top: 5.333vw;
    }

  .modal__scroll{
    height: auto;
    overflow-y: hidden;  
  }

  .modal__box{
    width: 100%;
    height: auto;
    margin-bottom: 5.333vw;
    padding-bottom: 5.333vw;
    background: url(/image/parts/line_dotted.png) 0 bottom repeat-x;
    background-size: auto 1px;

    .modal__box--wrap{
      display: flex;
      justify-content: space-between;
      margin-bottom: 4.266vw;
    }

    .modal__box--img{
      width: 26.666vw;
      position: unset;
    }

    .modal__box--cont{
      width: 53.333vw;
      position: unset;
    }
      .ttl{
        width: 100%;
        margin-bottom: 2.666vw;
        font-size: 4.266vw;
      }

      .txt{
        width: 100%;
        font-size: 3.733vw;
      }

    .modal__box--btn{
      ul{
        width: 100%;
        margin-bottom: 2.666vw;
        position: unset;
        /* bottom: 6vw; */
        /* left: 0; */
      }
      li a{
        display: block;
        width: 100%;
        padding: 4.8vw 0;
        border-radius: 3.2vw;
        font-size: 4.266vw;
        font-weight: 700;
        text-align: center;
        position: relative;
        box-shadow: 0 2.133vw 3.2vw rgba(0, 0, 0, 0.1);
      }
      li a::after{
        display: inline-block;
        content: '';
        width: 4vw;
        height: 4.266vw;
        margin-left: 0;
        background: url(/image/parts/icon_dl.png) 0 0 no-repeat;
        background-size: 100% auto;
        position: absolute;
        top: 50%;
        right: 2.666vw;
        transform: translate(0, -50%);
      }

      p{
        position: unset;
        font-size: 3.2vw;
        text-align: center;
      }
    }

  } /* /.modal__box */

  .modal__box.box2{
    height: auto;
  }
}/* /.modall-download */


/* ---- modal-outlink ---- */
.modal-outlink {

  .modal__content {
    width: 89.333vw;
    padding: 9.066vw 5.333vw;
    font-size: 4.8vw;
    border-radius: 3.2vw;
  }

  ul.btn{
    width: 100%;
    display: block;

    li{
      margin-bottom: 4.8vw;
    }
    li:last-child{
      margin-bottom: 0;
    }
    
    li a{
      display: block;
      width: 100%;
      padding: 7.199vw 0;
      border-radius: 3.2vw;
      font-size: 5.333vw;
      line-height: 1.6;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
    }
    li.ok a{
      background: var(--color-green01);
      color: #ffffff;
    }
    li.back a{
      background: #ffffff;
      color: var(--color-green01);
      border: 1px solid #C7C7C7;
      box-shadow: 0 2.133vw 3.2vw rgba(0, 0, 0, 0.1);
    }
  }
}





/* ---- scroll-hint ---- */
.scroll-hint{
  margin: 0 -5.333vw 0 0;
}
  .scroll-hint img{
    padding-right: 5.333vw;
  }

.scroll-hint-icon{
  top: calc(50% - 26.666vw) !important;
  left: calc(50% - 26.666vw) !important;
  width: 54.133vw !important;
  height: 54.133vw !important;
  background: url(/image/parts/icon_hint_slide.png) 0 0 no-repeat !important;
  background-size: 54.133vw auto !important;
  padding: 0 !important;
  /* animation: scroll-hint-animation 2s infinite ease;
  animation-iteration-count:3; */
}
.scroll-hint-icon:before,
.scroll-hint-icon:after{
  display: none !important;
}

/* @keyframes scroll-hint-animation {
  0% {
    transform: translateX(calc(50% - 26.666vw));
  }
  25% {
    transform: translateX(calc(20% - 26.666vw));
  }
  50% {
    transform: translateX(calc(80% - 26.666vw));
  }
  75% {
    transform: translateX(calc(20% - 26.666vw));
  }
  100% {
    transform: translateX(calc(50% - 26.666vw));
  }
} */


/* /SP */
}



/* --------------------
   ex20配下共通
   SP iphone SE以下
----------------------- */
@media screen and (max-width:375px) {

  /* ---- disclaimer ---- */
  .modalArea .disclaimer {
  
    dl.disclaimer__cont{
  
      dt{
        font-size: 4.8vw;
        line-height: 1.5;
      }
      dd{
        font-size: 4.266vw;
        line-height: 1.4;
      }
    }
  
    ul.disclaimer__btn{
  
      li span,
      li a{
        padding: 6.666vw 0 !important;
        font-size: 4.8vw !important;
      }
    }
  
  }

/* /SP iphone SE以下 */
}

/* --------------------
   /ex19-1/index.html
   SP
----------------------- */
@media screen and (max-width:768px) {

/* wrap */
.wrap-main{
  width: 100%;
  padding-top: 1.866vw;
  padding-bottom: 6.4vw;
  /* border-bottom: 1px solid #D5D5D5; */
}

/* mvArea */
.mvArea{
  width: 94.666vw;
  height: 76.533vw;
  background: url(/ex19-1/image/top/mv_bg_19-1_sp.png) 0 0 no-repeat;
  background-size: 100% auto;
  margin: 25.066vw auto 8vw;
  padding: 6vw 0 0 2.666vw;

  .mv__lead{
    padding: 0 1.4vw;
    margin-bottom: 1.6vw;
    display: table;
    background: rgba(255 255 255 / 0.9);
    font-size: 4.533vw;
    color: var(--color-orange03);
    font-weight: 700;
    line-height: 1.8;
  }

  .mv__lead--small{
    font-size: 2.9vw;
  }
}


}/* .SP */