@charset "utf-8";
/* CSS Document */
/* =====================================================================
   TOKENS / RESET
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --green-main:#00C08B;
  --green-accent:#00C08B;
  --green-accent-light:#E8F5E8;
  --green-accent-light2:#F1F8E9;
  --text-main:#333;
  --text-sub:#666;
  --radius-pill:50px;
  --radius-card:15px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.1);
  --shadow-card:0 5px 20px rgba(0,0,0,.08);
  --shadow-card-hover:0 10px 30px rgba(0,0,0,.15);
}
body{
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.6;
  color:var(--text-main);
  background:#fff;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;display:block;}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:2;
}

/* =====================================================================
   HEADER
   ===================================================================== */
header{
  position:fixed;
  inset:0 0 auto 0;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  padding:10px 0;
  box-shadow:var(--shadow-sm);
  z-index:1000;
}
.header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.header-cta{
  background:var(--green-main);
  color:#fff;
  padding:12px 24px;
  border-radius:30px;
  font-weight:500;
  transition:background .3s,transform .3s;
}
.header-cta:hover{
  background:#009970;
  transform:translateY(-2px);
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--green-accent-light),var(--green-accent-light2));
  padding:140px 0 80px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23f1f8e9"/><circle cx="100" cy="100" r="2" fill="%2300C08B" opacity="0.1"/><circle cx="300" cy="200" r="2" fill="%2300C08B" opacity="0.1"/><circle cx="600" cy="150" r="2" fill="%2300C08B" opacity="0.1"/><circle cx="900" cy="250" r="2" fill="%2300C08B" opacity="0.1"/><circle cx="1100" cy="180" r="2" fill="%2300C08B" opacity="0.1"/></svg>');
}
.hero-inner{position:relative;}
.hero-text{max-width:600px;text-align:left;}
.hero-text h1{
  font-size:48px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:20px;
}
.hero-text .highlight{
  color:var(--green-main);
  background:#fff;
  padding:4px 8px;
  border-radius:8px;
  display:inline-block;
}
.hero-text p{
  font-size:20px;
  color:var(--text-sub);
  margin-bottom:30px;
}
.hero-text .cta-button{
  display:inline-block;
  background:var(--green-accent);
  color:#fff;
  padding:18px 36px;
  border-radius:var(--radius-pill);
  font-weight:500;
  font-size:18px;
  box-shadow:0 4px 15px rgba(0,192,139,.3);
  transition:background .3s,transform .3s,box-shadow .3s;
}
.hero-text .cta-button:hover{
  background:#009970;
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,192,139,.4);
}
.hero-visuals{position:relative;width:100%;margin-top:20px;text-align:right;overflow:visible;}
.hero-visuals picture,.hero-visuals img{width:100%;height:auto;object-fit:contain;object-position:right top;}

/* =====================================================================
   GENERIC SECTION
   ===================================================================== */
.section{padding:80px 0;}
.section h2{
  text-align:center;
  font-size:36px;
  font-weight:700;
  margin-bottom:50px;
  color:var(--text-main);
  position:relative;
}
.section h2::after{
  content:"";
  display:block;
  width:60px;
  height:4px;
  margin:20px auto 0;
  background:var(--green-accent);
}

/* =====================================================================
   VALUES
   ===================================================================== */
.section-values .container{max-width:1340px;}
.solution-section {
  background: var(--green-accent-light2); /* #F1F8E9 */
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
  margin-top:60px;
}
.value-card{
  background:#fff;
  padding:40px 30px;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  text-align:center;
  transition:border-color .3s,transform .3s,box-shadow .3s;
  border:2px solid transparent;
}
.value-card:hover{
  transform:translateY(-5px);
  border-color:var(--green-accent);
  box-shadow:var(--shadow-card-hover);
}
.value-icon{
  width:80px;height:80px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  font-size:32px;
}
.value-card h3{
  font-size:24px;
  font-weight:600;
  margin-bottom:15px;
}
.value-card p{color:var(--text-sub);line-height:1.8;}

/* =====================================================================
   FEATURES
   ===================================================================== */
.features-section{background:#f8f9fa;}
.features-section .features-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
  gap:40px;
  margin-top:60px;
  align-items:stretch;
}
.features-section .feature-item{
  background:#fff;
  padding:40px;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  border-left:5px solid var(--green-accent);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.feature-number{
  display:inline-block;
  background:var(--green-accent);
  color:#fff;
  width:30px;height:30px;
  border-radius:50%;
  text-align:center;line-height:30px;
  font-weight:600;
  margin-bottom:15px;
}
.features-section .feature-item h3{
  font-size:22px;
  font-weight:600;
  margin-bottom:15px;
  color:var(--text-main);
}
.features-section .feature-item p{color:var(--text-sub);line-height:1.8;}

/* =====================================================================
   PROCESS STEPS
   ===================================================================== */
.process-steps{
  display:flex;
  justify-content:space-between;
  align-items:stretch; /* stretch to equal height */
  margin-top:60px;
  flex-wrap:wrap;
  gap:20px;
}
.process-step{
  background:#fff;
  padding:30px 20px;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  text-align:center;
  flex:1;
  min-width:180px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
}
.process-step::after{
  content:"→";
  position:absolute;
  right:-30px;
  top:50%;
  transform:translateY(-50%);
  color:var(--green-accent);
  font-size:24px;
  font-weight:bold;
}
.process-step:last-child::after{display:none;}
.step-number{
  background:var(--green-accent);
  color:#fff;
  width:40px;height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 15px;
  font-weight:600;
}
.process-step h4{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
  color:var(--text-main);
}
.process-step p{color:var(--text-sub);font-size:14px;line-height:1.6;}

/* =====================================================================
   CTA
   ===================================================================== */
.cta-section{
  background:linear-gradient(135deg,var(--green-main),var(--green-accent));
  color:#fff;
  text-align:center;
}
.cta-section h2{margin-bottom:30px;color:#fff;}
.cta-section h2::after{background:#fff;}
.cta-section p{
  font-size:18px;
  margin-bottom:30px;
  opacity:.9;
}
.cta-button-white{
  display:inline-block;
  background:#fff;
  color:var(--green-main);
  padding:18px 36px;
  border-radius:var(--radius-pill);
  font-weight:500;
  font-size:18px;
  transition:background .3s,transform .3s;
}
.cta-button-white:hover{
  background:#f8f9fa;
  transform:translateY(-2px);
}
.note{margin-top:30px;font-size:14px;opacity:.8;}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{
  background:#333;
  color:#fff;
  padding:40px 0;
  text-align:center;
}
.footer-note{
  font-size:14px;
  line-height:1.6;
  margin-bottom:20px;
  opacity:.8;
}
.footer-copyright{font-size:12px;opacity:.6;}

/* =====================================================================
   USE-CASE CAROUSEL
   ===================================================================== */
.uc-carousel{
  --uc-card-max:600px;
  --uc-nav-offset:calc((100% - min(var(--uc-card-max),90vw))/2 - 28px);
  position:relative;
  overflow-x:hidden;
  overflow-y:visible;
  padding-inline:0;
  padding-bottom:24px; /* dots + shadow */
}
.uc-track-wrapper{width:100%;overflow:hidden;}
.uc-track{
  display:flex;
  width:100%;
  transition:transform .45s cubic-bezier(.4,.15,.2,1);
  will-change:transform;
}
.uc-slide{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
  padding-block:16px; /* shadow clearance */
}
.use-case-card{
  width:clamp(320px,90%,var(--uc-card-max));
  background:#fff;
  padding:40px 40px 32px; /* bottom tighter */
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
}
.use-case-card h3{
  font-size:24px;
  margin-bottom:30px;
  color:var(--green-main);
  text-align:center;
}
.use-case-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
  padding:15px 0;
  border-bottom:1px solid #eee;
  font-size:16px;
  line-height:1.6;
}
.use-case-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.use-case-label{
  background:var(--green-accent);
  color:#fff;
  padding:8px 20px;
  border-radius:20px;
  font-size:14px;
  font-weight:500;
  min-width:80px;
  text-align:center;
  white-space:nowrap;
}
.use-case-value{color:var(--text-main);font-weight:500;}

/* nav buttons */
/* nav buttons - 背景色を薄く変更 */
.uc-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border:none;
  border-radius:50%;
  background:#007554; 
  box-shadow:0 2px 10px rgba(0,0,0,.1); 
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s,transform .2s,box-shadow .2s;
  z-index:2;
}
.uc-nav:hover{
  background:var(--green-accent); /* ホバー時の背景色をメインの緑に */
  transform:translateY(-50%) scale(1.05);
  box-shadow:0 4px 15px rgba(0,0,0,.2); /* ホバー時の影を強める */
  color:#fff; /* ホバー時に矢印の色を白に */
}
.uc-nav:disabled{opacity:.35;cursor:default;transform:translateY(-50%) scale(1);box-shadow:var(--shadow-sm);}
.uc-prev{left:var(--uc-nav-offset);}
.uc-next{right:var(--uc-nav-offset);}

/* dots */
.uc-dots{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.uc-dots button{
  width:8px;height:8px;
  padding:0;
  border-radius:50%;
  border:none;
  background:#d0d0d0;
  cursor:pointer;
  transition:transform .2s,background .2s;
}
.uc-dots button[aria-current="true"]{
  background:var(--green-main);
  transform:scale(1.3);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* <=480px ------------------------------------------------------------- */
@media (max-width:480px){
  .header-cta{padding:10px 18px;font-size:14px;}
  header{padding:10px 0;}
  header .header-content a img{height:30px;width:auto;}

  .hero-text h1{font-size:28px;}
  .hero-text p{font-size:16px;}

  .section{padding:60px 0;}
  .section h2{font-size:24px;margin-bottom:40px;}

  .value-card,.feature-item,.process-step{padding:25px 20px;}
  .value-icon{width:60px;height:60px;font-size:24px;}
  .value-card h3{font-size:20px;}

  .features-section .feature-item h3{font-size:18px;}

  .step-number{width:35px;height:35px;}
  .process-step h4{font-size:16px;}

  .cta-section h2{font-size:24px;}
  .cta-section p{font-size:16px;}

  /* process arrows change handled in 768 rule; mobile narrower inherits */

  /* use-case carousel */
  .uc-carousel{--uc-nav-offset:8px;padding-bottom:16px;}
  .use-case-card{padding:28px 20px;}
  .use-case-card h3{font-size:20px;margin-bottom:24px;}
  .use-case-row{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px;}
  .uc-nav{width:38px;height:38px;font-size:22px;}
}

/* <=768px ------------------------------------------------------------- */
@media (max-width:768px){
  .hero{padding:100px 0 0;overflow:visible;}
  .hero-text{text-align:center;margin:0 auto 20px;}
  .hero-text h1{font-size:32px;}
  .hero-text p{font-size:18px;}
  .hero-text .cta-button{padding:15px 30px;font-size:16px;}

  .section{padding:60px 0;}
  .section h2{font-size:30px;margin-bottom:40px;}

  .values-grid,.features-section .features-list{grid-template-columns:1fr;gap:30px;}

  .process-steps{flex-direction:column;gap:30px;}
  .process-step{width:100%;min-width:unset;}
  .process-step::after{
    content:"↓";
    right:auto;top:auto;
    bottom:-25px;
    left:50%;
    transform:translateX(-50%);
  }
  .process-step:last-child::after{display:none;}

  .cta-section h2{font-size:28px;}
  .cta-section p{font-size:16px;}
  .cta-button-white{padding:15px 30px;font-size:16px;}

  /* use-case spacing tighten to next section */
  .use-case-section{padding-bottom:24px;}
  .use-case-section + .section{padding-top:48px;}
}

/* 481px–999px --------------------------------------------------------- */
@media (min-width:481px) and (max-width:999px){
  .header-cta{display:none;}
  .hero{padding-bottom:0;}
  .hero-visuals{
    width:min(750px,100%);
    margin:20px 0 0 auto;
    overflow:hidden;
    text-align:right;
  }
  .hero + .section{padding-top:clamp(48px,8vw,80px);}
  .hero-text h1{font-size:40px;}
  /* values heading wraps normally below 1000px */
  .section-values .value-card h3{white-space:normal;word-break:break-word;}
}

/* >=1000px ------------------------------------------------------------- */
@media (min-width:1000px){
  .header-cta{display:inline-block;}
  .hero{padding-bottom:80px;overflow:hidden;}
  .hero-visuals{
    position:absolute;
    top:0;bottom:0;
    right:calc((100vw - 1200px)/2);
    width:auto;max-width:none;
    margin:0;
    height:100%;
    overflow:hidden;
    text-align:left;
  }
  .hero-visuals picture,.hero-visuals img{
    height:100%;width:auto;object-fit:cover;object-position:center center;
  }

  /* values heading keep-all & nowrap */
  .section-values .value-card h3{word-break:keep-all;white-space:nowrap;}

  /* features heading min-height 2 lines to align cards */
  .features-section .feature-item h3{
    line-height:1.4;
    min-height:calc(1.4em * 2);
    word-break:keep-all;
    text-wrap:balance;
  }

  /* process heading align heights */
  .process-step h4{
    line-height:1.4;
    min-height:calc(1.4em * 2);
    word-break:keep-all;
    text-wrap:balance;
  }

  /* tighten spacing to next section (desktop) */
  .use-case-section{padding-bottom:32px;}
  .use-case-section + .section{padding-top:60px;}
}