* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;color: #333;line-height: 1.6;font-size: 16px;}
img{vertical-align:bottom;max-width:100%;}
ul,li{margin:0;padding:0;list-style:none;}
a{text-decoration: none;color: #333;}
p{line-height: 1.8;}
.slashes:before{font-family: Helvetica,Arial;content:'\\ ';}
.slashes:after{font-family:Helvetica,Arial;content:' /';}
.container {max-width:100%;width: 980px;margin: 0 auto;padding: 0 20px;}
.wider .container {width: 1140px;}
/* Header */
header {background: #fff;padding: 10px 0;border-bottom: 1px solid #eee;letter-spacing: 1px;}
.header_content {display: flex;justify-content: space-between;align-items: center;padding: 0 40px;}
.logo {font-size: 24px;font-weight: bold;color: #3FC515;}
.header_nav a,.header_nav  {font-weight: bold;cursor: pointer;}
.header_nav a.active,.header_nav a:hover{color: #83D827;}
.header_nav a.active{cursor: default;}
.header_nav span strong:hover{opacity: .7;}
/* Hero */
.hero {background:url(images/bgfv.png) center center / auto 100%  no-repeat;padding: 0;text-align: center;position: relative;}
.hero_image{margin-top: 10px}
/* Section */
section {padding: 80px 0;}
.section_title {text-align: center;font-size: clamp(24px,2.6vw,36px);margin-bottom:clamp(30px,3vw,60px);}
/* Intro */
.intro {background: url(images/bgintro.png) center center / 1140px auto no-repeat;padding-top: 40px;}
.intro_content {text-align: center;max-width: 800px;margin: 0 auto;}
.intro h2 {font-size: clamp(24px,3vw,32px);color: #3FC515;margin-bottom: 20px;}
h2 span{display: block;color: #333;font-size: clamp(19px,2.7vw,28px);}
.intro_text {font-size: clamp(0,0,18px);font-weight: bold;max-width: 500px;margin: 0 auto 40px}
.intro_text p{margin: clamp(25px,1.2vw,50px) 0;}
.app_badges {display: flex;justify-content: center;gap: 60px;margin-top: 30px;}
.app_badges img {height: 50px;}
.marker{ background: linear-gradient(transparent 50%, #fffb8f 50%);}
.life .marker{ background: linear-gradient(transparent 50%, #fff833 50%);}
/* Features */
.features {background: #;padding-bottom: 40px}
.feature_item {display: flex;align-items: center;gap: 90px;}
.feature_item.reverse {flex-direction: row-reverse;}
.feature_image {flex: 1;}
.feature_image img {width: 100%;height: auto;}
.feature_content {flex: 1;}
.feature_content h3 {font-size: clamp(19px,2vw,36px);margin-bottom: 20px;color: #333;}
/* Life */
.maru{background: url(images/maru.svg) center 280px /cover no-repeat;}
.life{text-align: center;background: url(images/bglife.png) center top / 100% auto no-repeat;padding-top:390px;max-width: 1440px;margin: 0 auto;color: #111;}
.life h2 {font-size:clamp(24px,2.6vw,40px);margin-bottom: 30px;letter-spacing: 2px;line-height: 1.8}
.life p {font-size: clamp(15px,1.2vw,18px);margin-bottom: 40px;font-weight: bold;letter-spacing: 2px;}
/* User Voice */
.user_voice {background: url(images/bgvoice.png) center bottom / 80% auto no-repeat;padding-bottom: clamp(100px,12vw,230px);}
.voice_grid_wrap{padding: 30px clamp(10px,2vw,20px) 20px;}
.slick-track > div.voice_grid_wrap:nth-child(2n+1){padding-top: 50px}
.voice_card {background: #fff;padding: clamp(8px,5vw,30px);border-radius: 10px;position: relative;}
.voice_card::after{content:'';position: absolute;top:-35px;right:-35px;display: block;width: clamp(50px,15vw,70px);height:  clamp(50px,15vw,70px);background: url(images/voice_corner.svg) center center / 100% auto no-repeat;}
.voice_card h4 {font-size: clamp(14px,4.5vw,20px);background: linear-gradient(transparent 70%, #FFE073  50%);width: fit-content;}
.voice_card h4 + div{font-size: 12px;margin: 5px 0 8px}
.voice_card p {background: #EEF9E4;padding: 15px;font-size: 14px;border-radius: 5px;}
.voice_card:before {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -15px;
   border: 15px solid transparent;
   border-top: 15px solid #fff;
}
/* Steps */
.steps {background: url(images/bgstep.png) #f9f9f9 top center / 100% auto no-repeat;}
.stephead{text-align: center;color: #3FC515;font-size: clamp(18px,2vw,24px);font-weight: bold;}
.steps-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap:clamp(10px,5vw,80px); ;margin-top: 60px;}
.step_card {text-align: center;padding: 40px 35px 30px;background:#fff ;border-radius: 5px;box-sizing:border-box; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);position: relative;font-size: 14px;}
.step_number {position: absolute;top:-40px;left: 5px;}
.step_card h4 {font-size: 20px;margin: 15px 0;color: #333;}
.step_card p {text-align: left;}
/* FAQ */
.faq {background: #fff;}
.faq_list {max-width: ;margin: 0 auto;}
.faq_item {background: #fff;padding: 30px;margin-bottom: 20px;border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);}
.faq_question {font-size: 18px;font-weight: bold;margin-bottom: 15px;color: #333;display: flex;gap:10px;}
.faq_question:before{content:'Q.';color: #3FC515;}
.faq_answer {line-height: 1.8;color: #666;display: flex;gap:10px;}
.faq_answer:before{content:'A.';color: #FF7200;font-size: 18px;font-weight: bold;}
/* CTA */
.cta {background: linear-gradient(135deg, #3FC515 0%, #9CCC65 100%);color: #fff;padding: 0;}
.cta h2 {font-size:clamp(24px,3vw,36px);margin-top: clamp(10px,2.8vw,50px);margin-bottom: 10px;line-height: 1.3;letter-spacing: 2px;}
.cta p {font-size: clamp(14px,1.7vw,18px);margin-bottom:clamp(10px,1vw,30px); letter-spacing: 2px;font-weight: bold;}
.qr_wrap{width: clamp(250px,29vw,307px);text-align: center;font-weight: bold;}
.qr_codes{display: grid;grid-template-columns: 1fr 1fr;gap:clamp(40px,1.8vw,60px);margin-top: 10px;}
.qr_codes img{margin-bottom: 10px;}
/* Footer */
footer{padding: 20px 40px;color:#9fa19c;background: #fff;border-top: 1px solid #eee;}
footer a{color: #3A3A3A;font-size: .8rem;}
footer .sociales a{margin-right: 20px;}
footer .icons{margin-bottom: 13px;display:block;}
.copy{text-align: right;font-size: .7rem;}
@media screen and (min-width: 769px) {
   .fv{display: grid;grid-template-columns: 1fr 1.3fr;grid-gap: 30px;width: clamp(400px,75vw,960px);margin: 0 auto;}
   .fv > div:first-child{display: flex;align-items: center;margin-top: -120px;}
   .header_nav > div{display: flex;gap: clamp(10px,2vw,30px);align-items: center;font-size: clamp(10px,1.3vw,14px);}
   .faq_list{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 40px;}
   .feature_content p {width: 85%;}
   .feature_item{margin:0 0 80px}
   .life_images{margin-top: 80px;}
   .cta_grid{display: grid;grid-template-columns: 1.1fr 1fr;}
   .btwn{display: flex;justify-content: space-between;width: 100%;}
   .cta_grid > div:last-child{display: flex;align-items: end;}
   .copy{display: flex;align-items: center;}
   .articlelinks{display: none;position: absolute;background: #fff;left:-190px;width: 320px;padding: 20px 0 0}
   .header_nav span{position: relative;}
   .header_nav span:hover .articlelinks{display:block;z-index: 1;}
   .articlelinks a{font-weight: normal;display: block;border-bottom: 1px solid #f5f5f5;padding: 20px 20px}

   .sp{display: none}
}
@media (max-width: 1439px) {
   .steps-grid{grid-gap: 20px}
   .maru{background-position: center clamp(10px,5vw,150px);}
   .life{padding-top: clamp(150px,17vw,300px);padding-bottom: 20px !important}
}
@media (max-width: 768px) {
   section{padding: 40px 0 60px}
   .fv img{margin-bottom: 5px}
   .hero{background: url(images/bgfv_sp.png) center top / auto 100%;padding-top: 30px;}
   .intro{background: url(images/bgintro_sp.png) center top / 100% auto no-repeat;margin-top: 70px}
   .life{background: url(images/bglife_sp.png) center top / 100% auto no-repeat;padding-top: clamp(290px,80vw,590px);}
   .maru{background: url(images/maru_sp.svg) center clamp(270px,70vw,550px) / cover no-repeat}
   .user_voice {background: url(images/bgvoice_sp.png) center bottom / 100% auto no-repeat;padding-bottom: clamp(100px,22vw,150px);}
   .hero_image img.sp{margin-bottom: -70px;}
   .intro h2 {margin-top: 60px;}
   .feature_grid {grid-template-columns: 1fr;    gap: 40px;}
   .feature_item,
   .feature_item.reverse {flex-direction: column;}
   .feature_item{gap: 10px;margin:0 0 40px}
   .feature_content h3{text-align: center;}
   .feature_image{text-align: center;}
   .feature_image img{width: 80%;}
   .steps-grid {grid-template-columns: 1fr; gap: 60px;}
   .life_images {flex-direction: column;    align-items: center;}
   .qr_codes {flex-direction: column;    align-items: center;}
   .app_badges {gap:20px;}
   .faq{padding-bottom: 40px;}
   .step_number img{width: 90%}
   .header_content{padding: 0 20px;}
   .cta{text-align: center;padding-top: 40px;}
   .qr_wrap{margin: 0 auto;}
   footer{padding: 20px 20px}
   footer a{display: block;}
   .copy{text-align: center;margin: 20px 0 0}
   .hamburger {
      position: absolute;
      right: 0px;
      top: -2px;
      width: 50px;
      height: 50px;
      z-index: 300;
   }
   .hamburger-line {
      position: absolute;
      left: 0;
      width: 25px;
      height: 2px;
      background-color: #111;
      transition: all .6s;
   }
   .hamburger-line-1 {
      top: 26px;
   }
   .hamburger-line-2 {
      top: 34px;
   }
   .hamburger-line-3 {
      top: 42px;
   }
   .nav-open .hamburger-line-1 {
      transform: rotate(45deg);
      top: 30px;
   }
   .nav-open .hamburger-line-2 {
      width: 0;
      left: 50%;
   }
   .nav-open .hamburger-line-3 {
      transform: rotate(-45deg);
      top: 30px;
   }
   .header_nav-sp {
      position: fixed;
      right: 0;
      top: 61px;
      bottom: 0;
      width: 100%;
      height:100vh;
      background-color: #fff;
      transition: all .5s;
      z-index: 200;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      height: 0;
      overflow:hidden;
   }
   .nav-open .header_nav-sp{
      height: calc(100vh - 61px);
   }
   header{position: fixed;top:0;left:0;width: 100%;z-index: 9}
   .hero{margin-top: 61px;z-index: 1;position: relative;}
   .header_nav-sp > a,.header_nav-sp > span{display: block;padding: 13px 20px;border-bottom: 1px solid #ddd;color: #666}
   .header_nav-sp strong{display: block;position: relative;}
   ul.articlelinks{display: none;margin-top: 10px;}
   .header_nav-sp li a{padding: 13px 0px;border-top: 1px solid #ddd;display: block;color: #666}
   .header_nav-sp strong:after {
      font-family: "Font Awesome 5 Free";
      content: "\f054";
      position: absolute;
      right: 0px;
      top: 2px;
      font-weight: 900;
      transform: rotate(90deg);
      /* transition: all .1s ease; */
   }
   .header_nav-sp strong.on:after{transform: rotate(270deg);top: 0px;}
   .pc{display: none;}
}