@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@400;700&display=swap");
/*********************************
 *
 * COMMON
 *
 *********************************/
body {
  overflow-x: hidden;
  background: #b9e5fe;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500; }
  @media screen and (max-width: 768px) {
    body {
      font-size: 2.1vw; }
      body .pc {
        display: none !important; } }
  @media screen and (min-width: 769px) {
    body {
      font-size: 0.8vw; }
      body a {
        transition: 0.3s; }
        body a:hover {
          opacity: 0.8; }
      body .sp {
        display: none !important; } }
  body a {
    text-decoration: none; }
  body img {
    width: 100%;
    height: auto; }
  @media screen and (min-width: 1540px) {
    body {
      font-size: 10px; } }

.slider {
  opacity: 0;
  transition: opacity 0.3s linear; }

.slider.slick-initialized {
  opacity: 1; }

/*********************************
 *
 * MV
 *
 *********************************/
#mv {
  width: 42%;
  margin: 0 auto;
  background: #dcf5ff; }
  @media screen and (max-width: 768px) {
    #mv {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #mv {
      max-width: 500px; } }
  #mv p {
    width: 88%;
    margin: 0 auto;
    padding: 0.5em 0 2.5em 0; }

/*********************************
 *
 * PRODUCT
 *
 *********************************/
#product {
  width: 42%;
  margin: 0 auto;
  background: #dcf5ff; }
  @media screen and (max-width: 768px) {
    #product {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #product {
      max-width: 500px; } }
  #product .product_bg {
    width: 88%;
    margin: 0 auto;
    padding: 3em 0 0 0;
    background: #fff; }
    #product .product_bg .product_inner {
      width: 97%;
      margin: 0 auto; }
    #product .product_bg h2 {
      width: 109%;
      margin-left: -4.5%; }
    #product .product_bg .slider {
      position: relative;
      width: 100%;
      margin: 1em 0 0 0; }
    #product .product_bg .slide_item {
      position: relative; }
      #product .product_bg .slide_item .btn {
        position: absolute;
        width: 88%;
        left: 8%;
        bottom: 3%; }
    #product .product_bg .prev-arrow {
      position: absolute;
      width: 5.8em;
      height: 5.8em;
      top: 42%;
      left: 6%;
      z-index: +1; }
      #product .product_bg .prev-arrow span {
        display: block;
        width: 100%;
        height: 100%;
        background: url("../images/arw01.svg") center center no-repeat;
        background-size: contain;
        cursor: pointer; }
    #product .product_bg .next-arrow {
      position: absolute;
      width: 5.8em;
      height: 5.8em;
      top: 42%;
      right: 3.5%;
      cursor: pointer;
      transform: scale(-1, 1);
      z-index: +1; }
      #product .product_bg .next-arrow span {
        display: block;
        width: 100%;
        height: 100%;
        background: url("../images/arw01.svg") center center no-repeat;
        background-size: contain;
        cursor: pointer; }

/*********************************
 *
 * smarttouch
 *
 *********************************/
#smarttouch {
  width: 42%;
  margin: 0 auto;
  background: #dcf5ff;
  background: linear-gradient(to bottom, #dcf5ff 0%, #dcf5ff 90%, #f0f9ed 100%); }
  @media screen and (max-width: 768px) {
    #smarttouch {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #smarttouch {
      max-width: 500px; } }
  #smarttouch .smarttouch_bg {
    width: 88%;
    margin: 0 auto;
    padding: 5em 0 3em 0;
    background: #fff; }
    #smarttouch .smarttouch_bg .smarttouch_inner {
      margin: 0 auto; }

/*********************************
 *
 * menicoin
 *
 *********************************/
#menicoin {
  width: 42%;
  margin: 0 auto;
  padding: 1.5em 0 5em 0;
  background: #dcf5ff;
  background: linear-gradient(to bottom, #f0f9ed 0%, #f0f9ed 90%, #fffac6 100%); }
  @media screen and (max-width: 768px) {
    #menicoin {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #menicoin {
      max-width: 500px; } }
  #menicoin .menicoin_bg {
    width: 88%;
    margin: 0 auto;
    padding: 1.8em 0 1em 0;
    background: #fff;
    border: 1em solid #fbd300; }
    #menicoin .menicoin_bg .menicoin_inner {
      width: 82%;
      margin: 0 auto; }
    #menicoin .menicoin_bg .ac_arw {
      display: none;
      text-align: center;
      margin: 0.8em 0 0 0;
      cursor: pointer;
      line-height: 1; }
      #menicoin .menicoin_bg .ac_arw img {
        width: 2.4em;
        height: auto;
        vertical-align: baseline; }
      #menicoin .menicoin_bg .ac_arw.close {
        transform: rotate(180deg); }
      #menicoin .menicoin_bg .ac_arw.active {
        display: block; }
    #menicoin .menicoin_bg h2 {
      width: 96%;
      margin: 0 auto; }
    #menicoin .menicoin_bg .ac_box {
      display: none; }
    #menicoin .menicoin_bg .note {
      padding: 2em 0;
      font-size: 140%; }
    #menicoin .menicoin_bg .ac_btn {
      width: 103.5%;
      margin: 3.5em 0 0 -1%; }
    #menicoin .menicoin_bg .ac_img2 {
      padding: 5em 0 3em 0; }
    #menicoin .menicoin_bg .notice {
      padding: 0 0 1em 0;
      font-size: 88%;
      line-height: 1.8; }

/*********************************
 *
 * reason
 *
 *********************************/
#reason {
  width: 42%;
  margin: 0 auto;
  padding: 6em 0 3em 0;
  background: linear-gradient(to bottom, #fffac6 0%, #fffac6 95%, #f0f9ed 100%); }
  @media screen and (max-width: 768px) {
    #reason {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #reason {
      max-width: 500px; } }
  #reason .reason_inner {
    width: 88%;
    margin: 0 auto; }
  #reason ul.reason_nav {
    display: flex;
    justify-content: space-between; }
    #reason ul.reason_nav li {
      width: 48%;
      cursor: pointer; }
    #reason ul.reason_nav #tab1_nav {
      position: relative;
      background: url("../images/reason_nav1-off.png") no-repeat;
      background-size: cover; }
      #reason ul.reason_nav #tab1_nav span {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: url("../images/reason_nav1-on.png") no-repeat;
        background-size: cover;
        z-index: 2;
        opacity: 0; }
      #reason ul.reason_nav #tab1_nav.active span {
        opacity: 1; }
    #reason ul.reason_nav #tab2_nav {
      position: relative;
      background: url("../images/reason_nav2-off.png") no-repeat;
      background-size: cover; }
      #reason ul.reason_nav #tab2_nav span {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: url("../images/reason_nav2-on.png") no-repeat;
        background-size: cover;
        z-index: 2;
        opacity: 0; }
      #reason ul.reason_nav #tab2_nav.active span {
        opacity: 1; }
  #reason #tab1 {
    display: none; }
    #reason #tab1.open {
      display: block; }
    #reason #tab1 .img1 {
      position: relative;
      margin: 2.2em 0 0 0; }
      #reason #tab1 .img1 .note {
        position: absolute;
        width: 87%;
        top: 36.5%;
        left: 6.5%;
        font-size: 155%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img1 .note {
            font-size: 145%; } }
    #reason #tab1 .img2 {
      position: relative;
      margin: 2em 0 0 0; }
      #reason #tab1 .img2 .note {
        position: absolute;
        width: 87%;
        bottom: 13%;
        left: 6.5%;
        font-size: 155%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img2 .note {
            font-size: 145%; } }
      #reason #tab1 .img2 .notice {
        position: absolute;
        width: 87%;
        bottom: 7%;
        left: 6.5%;
        line-height: 1.6;
        text-align: center; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img2 .notice {
            font-size: 95%; } }
    #reason #tab1 .img3 {
      position: relative;
      margin: 2em 0 0 0; }
      #reason #tab1 .img3 .note {
        position: absolute;
        width: 87%;
        top: 69%;
        left: 6.5%;
        font-size: 155%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img3 .note {
            font-size: 145%; } }
      #reason #tab1 .img3 .notice {
        position: absolute;
        width: 86%;
        bottom: 7%;
        left: 7%;
        line-height: 1.6;
        text-align: center; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img3 .notice {
            font-size: 95%; } }
    #reason #tab1 .img4 {
      position: relative;
      margin: 2em 0 0 0; }
      #reason #tab1 .img4 .note {
        position: absolute;
        width: 87%;
        top: 66%;
        left: 6.5%;
        font-size: 155%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img4 .note {
            font-size: 145%; } }
      #reason #tab1 .img4 .notice {
        position: absolute;
        width: 92%;
        bottom: 7%;
        left: 4%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img4 .notice {
            font-size: 95%; } }
    #reason #tab1 .img5 {
      position: relative;
      margin: 2em 0 0 0; }
      #reason #tab1 .img5 .note {
        position: absolute;
        width: 87%;
        top: 69%;
        left: 6.5%;
        font-size: 155%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img5 .note {
            font-size: 145%; } }
      #reason #tab1 .img5 .notice {
        position: absolute;
        width: 87%;
        bottom: 7%;
        left: 6.5%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab1 .img5 .notice {
            font-size: 95%; } }
  #reason #tab2 {
    display: none; }
    #reason #tab2 .img6 {
      position: relative;
      width: 102%;
      margin: -3.5em 0 0 -2%; }
      #reason #tab2 .img6 .note {
        position: absolute;
        width: 82%;
        top: 27%;
        left: 11%;
        font-size: 155%;
        line-height: 1.6; }
        @media screen and (max-width: 768px) {
          #reason #tab2 .img6 .note {
            font-size: 145%; } }
      #reason #tab2 .img6 .notice {
        position: absolute;
        width: 87%;
        bottom: 5%;
        left: 6.5%;
        line-height: 1.6;
        text-align: center; }
    #reason #tab2 .img7 {
      position: relative;
      width: 102%;
      margin: -1em 0 0 -2%; }
      #reason #tab2 .img7 .note {
        position: absolute;
        width: 86%;
        bottom: 7%;
        left: 9%;
        font-size: 155%;
        line-height: 1.6; }
    #reason #tab2 .img8 {
      position: relative;
      width: 102%;
      margin: -1em 0 0 -2%; }
      #reason #tab2 .img8 .notice {
        position: absolute;
        width: 87%;
        bottom: 3.5%;
        left: 6.5%;
        line-height: 1.5;
        text-align: center; }
        #reason #tab2 .img8 .notice span {
          display: inline-block;
          text-align: left; }

/*********************************
 *
 * step
 *
 *********************************/
#step {
  width: 42%;
  margin: 0 auto;
  padding: 6em 0 3em 0;
  background: linear-gradient(to bottom, #f0f9ed 0%, #b9e6ff 5%, #b9e6ff 85%, #daf2ff 100%); }
  @media screen and (max-width: 768px) {
    #step {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #step {
      max-width: 500px; } }
  #step .step_inner {
    width: 88%;
    margin: 0 auto; }
    #step .step_inner h2 {
      width: 67.5%;
      margin: 0 auto; }
  #step ul.flow {
    margin: 1em 0 0 0; }
    #step ul.flow li {
      position: relative;
      margin: 0 0 4em 0; }
      #step ul.flow li .btn {
        position: absolute;
        width: 83%;
        left: 9.5%;
        bottom: 2em; }
      #step ul.flow li::after {
        position: absolute;
        display: block;
        content: "";
        width: 4.5em;
        height: 4em;
        bottom: -4.1em;
        left: calc(50% - 3em);
        background: url("../images/arw03.svg") center center no-repeat;
        background-size: contain; }
      #step ul.flow li:last-child {
        margin: 0;
        border: 0; }
        #step ul.flow li:last-child::after {
          display: none; }
  #step ul.btn_list {
    width: 103%;
    margin: 8em 0 0 -1%; }
    #step ul.btn_list li {
      margin: 0 0 1em 0; }
      #step ul.btn_list li:last-child {
        margin: 0; }
  #step .img {
    margin: 4em 0 0 0; }
  #step dl.atn {
    margin: 4em 0 0 0;
    border: 2px solid #000;
    border-radius: 1.4em; }
    #step dl.atn dt {
      position: relative;
      text-align: center; }
      #step dl.atn dt span {
        position: absolute;
        padding: 0 1.5em;
        background: #b9e6ff;
        width: 22%;
        top: -1em;
        left: 39.5%; }
        @media screen and (max-width: 768px) {
          #step dl.atn dt span {
            width: 26%;
            left: 37%; } }
    #step dl.atn dd {
      padding: 2em 2em 1.5em 2em;
      font-size: 150%; }

/*********************************
 *
 * support
 *
 *********************************/
#support {
  width: 42%;
  margin: 0 auto;
  padding: 5em 0 0 0;
  background: linear-gradient(to bottom, #daf2ff 0%, #fff 5%, #fff 100%); }
  @media screen and (max-width: 768px) {
    #support {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    #support {
      max-width: 500px; } }
  #support .support_inner {
    width: 92%;
    margin: 0 auto; }
  #support .bnr {
    width: 98%;
    margin: 5.5em 0 0 2%; }
    #support .bnr p {
      font-size: 220%;
      text-align: center; }

/*********************************
 *
 * l_cnt
 *
 *********************************/
#l_cnt {
  position: fixed;
  width: 25%;
  top: 50%;
  left: 50%;
  transform: translate(-195%, -50%); }
  @media screen and (min-width: 1540px) {
    #l_cnt {
      max-width: 340px;
      transform: translate(-225%, -50%); } }

/*********************************
 *
 * r_cnt
 *
 *********************************/
#r_cnt {
  position: fixed;
  width: 25%;
  top: 50%;
  right: 50%;
  transform: translate(195%, -50%); }
  @media screen and (min-width: 1540px) {
    #r_cnt {
      max-width: 340px;
      transform: translate(225%, -50%); } }
  #r_cnt ul {
    position: absolute;
    width: 82.5%;
    top: 6.2em;
    left: 7.5%; }
    @media screen and (min-width: 1540px) {
      #r_cnt ul {
        top: 66px; } }
    #r_cnt ul li {
      margin: 0 0 0.55em 0; }
      @media screen and (min-width: 1540px) {
        #r_cnt ul li {
          margin: 0 0 5.5px 0; } }
      #r_cnt ul li a {
        display: block;
        height: 3.1em;
        background: transparent; }
        @media screen and (min-width: 1540px) {
          #r_cnt ul li a {
            height: 35px; } }
        #r_cnt ul li a:hover {
          background: rgba(255, 255, 255, 0.3); }
      #r_cnt ul li span {
        display: none; }
  #r_cnt .btn {
    position: absolute;
    width: 83.5%;
    top: 28.7em;
    left: 7.5%; }
    @media screen and (min-width: 1540px) {
      #r_cnt .btn {
        top: 313px; } }
    #r_cnt .btn a {
      display: block;
      height: 4em;
      background: transparent; }
      @media screen and (min-width: 1540px) {
        #r_cnt .btn a {
          height: 44px; } }
      #r_cnt .btn a:hover {
        background: rgba(255, 255, 255, 0.4); }
    #r_cnt .btn span {
      display: none; }

/*********************************
 *
 * fix_btn
 *
 *********************************/
#fix_btn {
  position: fixed;
  width: 42%;
  bottom: 0;
  left: 0;
  z-index: 10; }
  @media screen and (max-width: 768px) {
    #fix_btn {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 769px) {
    #fix_btn {
      left: 50%;
      transform: translateX(-50%); } }
  @media screen and (min-width: 1540px) {
    #fix_btn {
      max-width: 500px; } }

/*********************************
 *
 * FOOTER
 *
 *********************************/
footer {
  width: 42%;
  margin: 0 auto;
  padding: 5em 0 11em 0;
  background: #fff; }
  @media screen and (max-width: 768px) {
    footer {
      width: 100%;
      max-width: none; } }
  @media screen and (min-width: 1540px) {
    footer {
      max-width: 500px;
      padding: 50px 0 110px 0; } }
  footer .copy {
    font-size: 190%;
    text-align: center; }