@charset "utf-8";
    @import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500&display=swap');

  html {
    font-size: 62.5%
    }

  body {
    font-family:'Hiragino Maru Gothic ProN W4',sans-serif;
  	color: #273943;
    width:100%;
    font-size: 1.6em;
    font-weight:400;
    background: #fffef6;
  }

  /*
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-family: 'Noto Serif JP', serif;
  */

  .lp-wrapper {
    position: relative;
    overflow: hidden;
  }

  .lp-main {
    padding: 0;
    background-color: #fffef6;
  }

    .lp-allitems--pc {
      display: none;
    }
    .lp-pcnav {
      display: none;
    }

  #wrap{width:100%;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    }

    .br-sp {display: block; }
  @media screen and (min-width: 768px){

    .br-sp {
      display: none;
  }
    #wrap{
    border-left:1px solid #f0f0f0;
    border-right:1px solid #f0f0f0;
    width:520px;
    margin: 0 auto;
    }
  }

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

    .lp-wrapper {
      max-width: 1366px;
      margin: 0 auto;
    }
    .lp-main {
      margin-left: auto;
      margin-right: 14%;
      padding: 0;
      max-width: 38.06735%;
    }

    .lp-pcnav {
    display:block;
    position: fixed;
    z-index: 10;
    top: 50%;
    left: calc(50% - 520px);
    width: 25%;
    max-width: 400px;
    transform: translateY(-50%);
    left: 12.81113%;
  }
  .lp-pcnav ul{
  margin-top:1.5rem;
  padding-top:4rem;
  padding-bottom: 2rem;
  border-top:1px solid #0fbe97;
  border-bottom:1px solid #0fbe97;
    }
    .lp-pcnav ul li{
      font-size:1.6rem;
      margin-bottom: 1.5rem;
    }
      .lp-pcnav ul li a.current{
        opacity:1;
          position:relative;
          padding-left:18px;
      }

      .lp-pcnav ul li a{
        text-decoration: none;
        color:#0fbe97;
        font-weight: 500;
        opacity:0.6;
        transition: 0.1s ;
      }

       .lp-pcnav ul li a:hover{
        opacity:1;
        transition: 0.1s ;
      }

      

  .lp-pcnav ul li a.current:before{
   content:'';
   display:inline-block;
   position:absolute;
   left:4px;
  top:8px;
  width:7px;
  height:7px;
  border-bottom:1px solid #d3784b;
  border-right:1px solid #d3784b;
  transform:rotateZ(-45deg);
  }
  .lp-pcnav ul li a.current:after{
   content:'';
   position:absolute;
   display:inline-block;
   left:0;
   top:11px;
   width:10px;
   height:1px;
   background:#d3784b;
  }

  .lp-pcnav .copy{
    font-size:1.4rem;
    color:#bbb;
    display:block;
    padding-top:2rem;
  }
  }



  .webfont{
     font-family: 'M PLUS Rounded 1c',sans-serif;
    transform:rotateZ(0.03deg);
    transform:rotate(0.03deg);
  }
  .wrap {
  	width: 100%;
  	margin: 0 auto;
  	text-align: center;
  }


  header {
    display:block;
    width:100%;
  	background-color: #0fbe97;
    color:#fff;
  	padding:10px;
  	text-align:center;
  }

  header h1{
    font-size:1.8rem;
  line-height:1.6;
  letter-spacing: 0.1rem;
  }

  .lp-mv img{ width:100%; }

  .cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .cp_arrows {
    position: relative;
    display: flex;
    height: 30px;/*画面いっぱいにする場合100vh*/
    margin: 1rem auto -1rem;
    justify-content: center;
    align-items: center;
  }
  .cp_arrows .cp_arrow {
    position: absolute;
    top: 50%;/*着地点（サンプルは[class:cp_arrows]height300pxの50%）*/
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    opacity: 0;
    transform: translateX(-5px);
  }
  .cp_arrows .cp_arrowfirst {
    -webkit-animation: arrow-move08 1.3s ease-in-out infinite;
            animation: arrow-move08 1.3s ease-in-out infinite;
  }
  .cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 15px;
    height: 2px;
    content: '';
  }
  .cta-01 .cp_arrows .cp_arrow:before, .cta-01 .cp_arrows .cp_arrow:after {
     background: #043632;
  }

  .cp_arrows .cp_arrow:before {
    -webkit-transform: rotate(45deg) translateX(-20%);
            transform: rotate(45deg) translateX(-20%);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
  .cp_arrows .cp_arrow:after {
    -webkit-transform: rotate(-45deg) translateX(20%);
            transform: rotate(-45deg) translateX(20%);
    -webkit-transform-origin: top right;
            transform-origin: top right;
  }
  @-webkit-keyframes arrow-move08 {
    0% {
      top: 10%;/*スタート地点*/
      opacity: 0;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes arrow-move08 {
    0% {
      top: 10%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
      opacity: 0;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .cta-01{
    margin:1rem 0 0;
    padding:2rem 0.5rem;
    background:#d5f0dc;
    color:#043632;
    font-size:1.4rem;
  }
  .cta-01 p span{color:#2e938b;}
  .cta-01 p.scroll{
    margin-top:1rem;
  }

  .cta_btn{
    width:90%;
    margin:0 auto;
  }
   .cta-01 button, .cta-02 button{
margin:0;
padding:0;
background: none;
border:none;
   }
   .cta-01 .form-field, .cta-02 .form-field{
  border: 1px solid #ddd;
  border-radius: 10px;
  margin:2rem auto 1rem;
  padding: 2rem;
  width: 85%;
  background: #fff;
  font-size:1.7rem;
  line-height: 100%;
  color:#000;
     }

 .cta-01 input::placeholder,.cta-01 input::placeholder{
  color:#ccc;
 }
  #exp{
       /* background:url(../images/about_bg.png);*/
        background: repeating-linear-gradient(90deg, #e4f6ee, #e4f6ee 10px, #fffef6 10px, #fffef6 20px);
        padding:30px 0 ;
  }

  #exp .section_wrapper {
      margin:0 auto;
      width:90%;
      padding: 2rem ;
      background:#fff;
      box-shadow: 0 0 1px 1px #0fbe97;
      border-radius:2rem;
      text-align: left;
      font-size:1.6rem;
  }
  #exp h2{margin:1rem 0 2rem;}
  #exp .section_wrapper p{margin:1rem 0;
    line-height:1.6;}



  #exp .section_wrapper p strong{}
  #exp .section_wrapper p strong span{ color:#f65640; }


  #worries{
        background: #E5E5E5;
        padding:0 0 30px;
  }


  #worries h1{
    display:block;
    padding:30px 0 20px;
    margin-bottom:20px;
    background: #3a4e58;
    font-size:2.4rem;
  line-height:1.6;
  color:#fff;
  }
  #worries h1 span{color:#f2df7f;}
  #worries img.worries_img01{width:90%;margin:0 auto}

  .arrow_u {
    position: relative;
    display: inline-block;
    color: #fff;
  }
  .arrow_u:before {
    content: '';
    width: 15px;
    height: 15px;
    border: 0;
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -15px;
    transform: rotate(45deg);
  }

  #solution{
        background: #0fbe97;
        padding:0 0 20px;
        color:#fff;
  }

  #solution p{
        padding-top:10px;
  }
  #solution .cp_arrows .cp_arrow:before, #solution .cp_arrows .cp_arrow:after {
     background: #fff;
  }

  #solution02{
        background: #f2f2f2;
        padding:0 0 20px;
        text-align:left;
  }
  #solution02 .solution02_content{
    padding:2rem 2.5rem 0 2.5rem;
  }

  #solution02 .solution02_content .number{
    font-size:3rem;
    font-weight:bold;
    color:#458682;
    margin:0;
    padding-bottom:0;
  }

   
  #solution02 .solution02_content h2{
    font-size:2.2rem;
    font-weight:bold;
    line-height:1.5;
  }

   @media screen and (max-width: 768px){
#solution02 .solution02_content h2{
    letter-spacing: -1px;
  }
    }

  #solution02 .solution02_content p{
    padding:1rem 0;
    font-size:1.6rem;
  }
  #solution02 .solution02_content .solution02_img{
    width:60%;
    margin:1rem auto 0;
  }

  #enrich{
        background: #fff;
        padding:4rem 2rem;
        color:#fff;
        text-align: left;
  }
  #enrich .enrich_wrapper{
  border:4px solid #0fbe97;
  border-radius: 10px;
  padding:0;
  padding-bottom:2rem;
  background: #fff;
  color:#273943;
  }

  #enrich .enrich_wrapper h1{
  display:block;
  padding:1.8rem;
  background: #0fbe97;
  color:#fff;
  text-align: center;
  margin-bottom: 1rem;
  font-size:2rem;
  line-height: 1.6;
  }



  #enrich .enrich_wrapper p{
  padding:1rem 1.5rem;
  color:#273943;
  font-size:1.6rem;
  }
  #enrich .enrich_wrapper p strong{
  color:#0fbe97;
  font-size:1.8rem;
  font-weght:500;
  }
  #enrich .enrich_wrapper p span{
  color:#0fbe97;
  }

  @media screen and (min-width: 768px){
  #enrich .enrich_wrapper h1{
  font-size:2.2rem;
  }
  #enrich .enrich_wrapper p{
  font-size:1.5rem;
  }
  }

  #step{
        background: #3a4e58;
        padding:2rem 0;
        color:#fff;
        text-align: center;
  }
  #step img{
        width:95%;
        margin:0 auto;
  }
  .cta-02{
    margin:0;
    padding:2rem 0.5rem;
    background:#3a4e58;
    color:#fff;
    font-size:1.4rem;
  }
  .cta-02 p span{color:#f1e27e;}

  #jidai{
        background: #fff;
       background-image:url("../images/jidai_bg.jpg");
        padding:2rem 0;
        color:#000;
        text-align: left;
        font-size:1.5rem;
  }
  #jidai .txt{padding:3rem;}
  #jidai .txt p{margin:1.4rem 0;}

  #faq {
    background-color: #d8efee;
    padding-bottom: 4rem;
  }

  #faq .faq_title{
      background:#0fbe97;
      font-size:2.2rem;
      color:#fff;
      padding:2rem 0;
      font-weight: 500;
      margin-bottom: 2rem;
  }
  #faq .section_wrapper{
    text-align: left;
    padding:1rem 2rem;
  }
  #faq .faq_item {
      background-color:#fff;
      border-radius:15px;
      padding:1rem;
      font-weight: bold;
      font-size:1.6rem;
  }

  #faq .faq_item p {
      padding-left:2.5rem;text-indent:-2.5rem;
  }

   #faq .faq_item p.text_answer {
      color:#0fbe97;
      margin-top:0.4rem;
  }

  @media screen and (max-width: 768px){
   #faq .faq_item p.text_question{
    letter-spacing: -1px;
   }
     #faq .faq_item p.text_answer {
    letter-spacing: -1px;
  }

  }


  #faq .faq_item .text_s {
      font-weight:normal;
      color:#363636;
      text-indent:0!important;
      font-size:1.4rem;
      margin-top:0.6rem;
  }

.trialbtn{opacity:0; transition: .2s;}

  .trial_fixed_button_2 {
      position:fixed;
      right:1px;
      bottom:1px;
      z-index:100;
      opacity:0;
  }


  .trial_fixed_button_2 {
      width:120px;
      height:auto;
  }

  .trial_fixed_button_2 img {
      max-width:100%;
  }

  .trial_fixed_button_2:hover {
      cursor:pointer;
  }

  .trial_fixed_button_2 {
      opacity:0;
      transition:opacity 350ms ease;
  }

  .trial_button_hided_2 {
      pointer-events:none;
  }

  #trial_button_2 img {
      position:relative;
  }

  #trial_button_2 a:hover {
      opacity:1;
  }

  #trial_button_2 a,#trial_button_2 img {
      z-index:100;
  }

      .anime_pulse {
          position:absolute;
          top:1px;
          left:2px;
          width:120px;
          height:120px;
          border-radius:50%;
      }
      
      .anime_pulse::before {
          width:70%;
          height:70%;
      }
      
      .anime_pulse::after{
          width:80%;
          height:80%;
      }

  .anime_pulse {
      position:absolute;
      top:0px;
      left:-1px;
      width:120px;
      height:120px;
      border-radius:50%;z-index:1;
  }

  .anime_pulse::before,.anime_pulse::after {
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
      background-color:#39B44A;
      border-radius:50%;
      box-sizing:border-box;
      pointer-events:none;
      animation:pulsate 1.5s linear infinite;
      z-index:1;
  }

  .anime_pulse::before {
      width:70%;
      height:70%;
      animation-delay: .5s;
  }

  .anime_pulse::after {
      width:80%;
      height:80%;
  }

  @keyframes pulsate { 
      0%{transform:scale(1);opacity:1;}
      100%{transform: scale(2);opacity: 0;}
  }

  .activate .anime_jiggle_inside,.activate_fd .anime_jiggle_inside,.anime_jiggle{
      animation:jiggle 2s linear infinite;
  }

  @keyframes jiggle {
      0%{transform: scale(1.0)}
      25%{transform: scale(1.015)}
      40%{transform: scale(0.94)}
      50%{transform: scale(1.015)}
      60%{transform: scale(0.97)}
      70%{transform: scale(1.01)}
      80%{transform: scale(0.98)}
      90%{transform: scale(1.015)}
      100% {transform:scale(1.0)}
  }

  footer {
    background:#3a4e58;
    padding:0.5rem 0;
    color:#fff;
  }

  footer a {
  	color: #a4c57d;
  }

  footer .copy {
  	font-size: 12px;
  	color: #bbb;
  }

.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}