@charset "UTF-8";
:root{
  --green-950:#0a3318;
  --green-900:#0c3d20;
  --green-800:#0f4d28;
  --green-700:#155f31;
  --green-600:#1c7a3c;
  --green-500:#268a44;
  --green-100:#ddefe1;
  --green-50:#eff7f0;
  --green-line:#bfe2c6;
  --orange:#ef7d22;
  --orange-600:#df6c12;
  --ink:#15211b;
  --slate:#000;
  --line:#e0e8e1;
  --cream:#f4f8f3;
  --jp:'Zen Kaku Gothic New', sans-serif;
  --body:'Noto Sans JP', sans-serif;
  --num:'Outfit', sans-serif;

  --wide:1240px;   /* main content width */
  --pad:40px;      /* gutter */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:17px;}
body{font-family:var(--body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6;}
a{color:var(--green-600);text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--wide);margin:0 auto;padding:0 var(--pad);}
.section{padding:clamp(88px,11vw,150px) 0;}
.section--tint{background:var(--cream);}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--jp);font-weight:700;font-size:16px;letter-spacing:.16em;color:var(--green-600);}
.eyebrow::before{content:"";width:30px;height:4px;border-radius:4px;background:var(--orange);}
h2{font-family:var(--jp);font-weight:900;font-size:clamp(30px,4vw,48px);line-height:1.45;margin-top:22px;letter-spacing:.01em;}
.accent{color:var(--green-500);}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--slate);line-height:1.9;margin-top:22px;max-width:44em;}

/* buttons */
.btn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:44px;}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;font-family:var(--jp);font-weight:700;text-decoration:none;border-radius:100px;transition:transform .25s ease,background .25s ease,box-shadow .25s ease;}
.btn::after{content:"";position:absolute;top:-80%;left:-45%;width:28%;height:260%;background:rgba(255,255,255,.28);transform:rotate(18deg) translateX(-240%);transition:transform .65s ease;pointer-events:none;}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(10,51,24,.55);}
.btn:hover::after{transform:rotate(18deg) translateX(650%);}
.btn-sm{font-size:18px;padding:20px 42px;}
.btn-lg{font-size:22px;padding:27px 58px;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-600);}
.btn-secondary{background:#fff;color:var(--green-600);border:1.5px solid var(--green-600);}
.btn-secondary:hover{background:var(--green-50);}
.btn-outline-dark{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(4px);}
.btn-outline-dark:hover{background:rgba(255,255,255,.16);}

/* HERO */
.hero{position:relative;overflow:hidden;background:linear-gradient(155deg,#11592f 0%,var(--green-900) 60%,var(--green-950) 100%);}
.hero::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'><path d='M30 1.7 89.7 1.7 119.5 53.3 89.7 104.9 30 104.9 0.2 53.3Z' fill='none' stroke='%23ffffff' stroke-width='1.4'/></svg>");
  background-size:150px 130px;animation:pattern-drift 24s linear infinite;}
.hero__photo{position:absolute;right:0;top:0;width:56%;height:100%;object-fit:cover;object-position:top center;opacity:.10;}
.hero__fade-x{position:absolute;inset:0;background:linear-gradient(90deg,var(--green-900) 32%,rgba(12,61,32,.88) 50%,rgba(12,61,32,.35) 68%,transparent 88%);}
.hero__fade-y{position:absolute;inset:0;background:linear-gradient(0deg,var(--green-950) 0%,transparent 30%);}
.hero__inner{position:relative;max-width:var(--wide);margin:0 auto;padding:clamp(72px,9vw,120px) var(--pad) clamp(96px,12vw,160px);display:flex;flex-direction:column;gap:34px;}
.hero__logo{display:inline-flex;align-self:flex-start;background:#fff;border-radius:14px;padding:16px 26px;box-shadow:0 14px 34px rgba(0,0,0,.28);}
.hero__logo img{width:210px;height:auto;}
.hero h1{font-family:var(--jp);font-weight:900;color:#fff;font-size:clamp(46px,7vw,92px);line-height:1.22;max-width:12em;letter-spacing:.01em;}
.hero h1 em{font-style:normal;color:#7fe0a0;}
.hero p{font-size:clamp(18px,1.9vw,23px);color:rgba(255,255,255,.85);font-weight:500;line-height:1.9;max-width:36em;}
.hero .btn-row{justify-content:flex-start;margin-top:10px;}
.btn-lg.btn-primary{box-shadow:0 24px 48px -16px rgba(239,125,34,.75);}
.hero__stats{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;padding-top:36px;border-top:1px solid rgba(255,255,255,.18);max-width:760px;}
.hero__stats div{flex:1 1 160px;}
.hero__stats div + div{border-left:1px solid rgba(255,255,255,.18);padding-left:32px;}
.hero__stats b{font-family:var(--num);font-weight:800;font-size:50px;color:#fff;line-height:1;}
.hero__stats small{font-size:15px;color:rgba(255,255,255,.6);margin-left:8px;}

/* first-view motion */
.motion-ready .hero__logo,.motion-ready .hero h1,.motion-ready .hero p,.motion-ready .hero .btn-row,.motion-ready .hero__stats{
  opacity:0;transform:translateY(24px);animation:hero-enter .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.motion-ready .hero h1{animation-delay:.12s;}
.motion-ready .hero p{animation-delay:.24s;}
.motion-ready .hero .btn-row{animation-delay:.36s;}
.motion-ready .hero__stats{animation-delay:.5s;}
.motion-ready .hero__photo{animation:hero-photo 1.4s cubic-bezier(.2,.7,.2,1) both;}

/* ABOUT */
.about-grid{display:flex;flex-wrap:wrap;gap:64px;margin-top:44px;align-items:center;}
.about-grid .text{flex:1 1 440px;min-width:0;}
.about-grid .text p{font-size:18px;line-height:2;color:var(--slate);}
.about-grid .text mark{background:linear-gradient(transparent 58%, #ffe0bf 58%);color:inherit;padding:0 .05em;}
.about-note{margin-top:28px;background:var(--green-50);border:1px solid var(--green-line);border-radius:14px;padding:24px 28px;font-size:15px;color:var(--green-700);line-height:1.85;}
.about-note .warn{color:#c0392b;}
.about-grid .shot{position:relative;flex:1 1 440px;min-width:0;/*border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(12,61,32,.4);border:1px solid var(--line);*/}
.about-grid .shot img{width:100%;height:auto;object-fit:cover;object-position:top center;}


/* ISSUES */
.issue-grid{display:flex;flex-wrap:wrap;gap:26px;margin-top:48px;}
.issue-card{flex:1 1 300px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 34px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.issue-card:hover{transform:translateY(-7px);border-color:var(--green-line);box-shadow:0 24px 44px -30px rgba(12,61,32,.45);}
.issue-card .num{font-family:var(--num);font-weight:700;font-size:15px;color:var(--orange);letter-spacing:.12em;}
.issue-card h3{font-family:var(--jp);font-weight:700;font-size:22px;margin:14px 0 12px;line-height:1.45;}
.issue-card p{font-size:16px;color:var(--slate);line-height:1.8;}
.issue-band{margin-top:32px;background:var(--green-600);border-radius:18px;padding:36px 44px;display:flex;flex-wrap:wrap;align-items:center;gap:24px;color:#fff;}
.issue-band .tag{font-family:var(--jp);font-weight:700;font-size:16px;background:var(--orange);padding:11px 24px;border-radius:100px;flex:none;}
.issue-band p{font-family:var(--jp);font-weight:700;font-size:clamp(19px,2.1vw,25px);line-height:1.55;}
.issue-band em{font-style:normal;color:#9be7b3;}

/* REASONS / list-row cards (used by reasons, mechanism, flow) */
.row-list{display:flex;flex-direction:column;gap:24px;margin-top:44px;}
.row-card{display:flex;flex-wrap:wrap;gap:30px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 42px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.row-card:hover{transform:translateX(8px);border-color:var(--green-line);box-shadow:0 20px 40px -32px rgba(12,61,32,.5);}
.row-card .badge{flex:none;width:58px;height:58px;border-radius:50%;background:var(--green-50);color:var(--green-600);display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:24px;}
.row-card .content{flex:1 1 360px;min-width:0;}
.row-card h3{font-family:var(--jp);font-weight:700;font-size:23px;margin-bottom:12px;line-height:1.45;}
.row-card p{font-size:16px;color:var(--slate);line-height:1.85;}

.step-row{display:flex;flex-wrap:wrap;gap:26px;align-items:center;border-radius:18px;padding:30px 36px;}
.step-row.plain{background:var(--cream);}
.step-row.bordered{background:#fff;border:1px solid var(--line);}
.step-row.final{background:var(--green-50);border:1px solid var(--green-600);}
.step-row .badge-sm{flex:none;width:50px;height:50px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:20px;background:var(--green-600);}
.step-row.final .badge-sm{background:var(--orange);}
.step-row .content{flex:1 1 320px;min-width:0;}
.step-row h4{font-family:var(--jp);font-weight:700;font-size:19px;margin-bottom:8px;}
.step-row p{font-size:16px;color:var(--slate);line-height:1.75;}

/* REACH */
.stat-grid{display:flex;flex-wrap:wrap;gap:26px;margin-top:44px;}
.stat-card{flex:1 1 260px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 38px;transition:transform .3s ease,box-shadow .3s ease;}
.stat-card:hover{transform:translateY(-6px);box-shadow:0 22px 42px -32px rgba(12,61,32,.48);}
.stat-card .big{font-family:var(--num);font-weight:800;font-size:52px;color:var(--green-600);line-height:1;}
.stat-card .lbl{font-size:16px;color:var(--slate);margin-top:12px;}
.chart-card{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px 46px;}
.chart-card .head{display:flex;justify-content:space-between;align-items:baseline;}
.chart-card .head b{font-family:var(--jp);font-weight:700;font-size:19px;}
.chart-card .head span{font-size:15px;color:var(--slate);}
.chart-wrap{position:relative;height:220px;margin-top:18px;}
.chart-wrap svg{position:absolute;inset:0;width:100%;height:100%;}
.chart-foot{display:flex;justify-content:space-between;font-family:var(--num);font-size:15px;color:var(--slate);margin-top:10px;}

/* CHANNELS */
.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:24px;margin-top:44px;}
.channel-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 36px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;}
.channel-card:hover{transform:translateY(-6px);border-color:var(--green-line);box-shadow:0 22px 42px -32px rgba(12,61,32,.48);}
.channel-card h4{font-family:var(--jp);font-weight:700;font-size:20px;margin-bottom:12px;color:var(--green-700);}
.channel-card p{font-size:16px;color:var(--slate);line-height:1.85;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:18px;margin-top:44px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 36px;}
.faq-item .q-row{display:flex;gap:18px;align-items:flex-start;}
.faq-item .q-badge{flex:none;width:36px;height:36px;border-radius:10px;background:var(--green-600);color:#fff;display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:18px;}
.faq-item h4{font-family:var(--jp);font-weight:700;font-size:19px;margin-top:4px;line-height:1.5;}
.faq-item p{font-size:16px;color:var(--slate);line-height:1.85;margin:16px 0 0 54px;}
.faq-more{margin-top:32px;text-align:right;}
.faq-more a{font-family:var(--jp);font-weight:700;font-size:16px;border-bottom:2px solid var(--green-600);}
.faq-more a:hover{color:var(--orange);border-color:var(--orange);}

/* COMPANY */
.company-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:center;}
.company-table{flex:1.3 1 440px;min-width:0;}
.company-table .row{display:flex;border-top:1px solid var(--line);padding:22px 6px;}
.company-table .row:last-child{border-bottom:1px solid var(--line);}
.company-table dt{flex:none;width:160px;font-family:var(--jp);font-weight:700;font-size:16px;color:var(--green-700);}
.company-table dd{flex:1;font-size:17px;}
.company-card{flex:1 1 320px;min-width:0;background:var(--green-800);border-radius:22px;padding:48px 44px;color:#fff;display:flex;flex-direction:column;gap:34px;}
.company-card .big{font-family:var(--num);font-weight:800;line-height:1;}
.company-card .num-l{font-size:60px;}
.company-card .num-m{font-size:50px;}
.company-card span{font-size:16px;color:#9be7b3;display:block;margin-top:6px;}

/* CTA */
.cta{position:relative;overflow:hidden;background:linear-gradient(155deg,#11592f 0%,var(--green-900) 70%,var(--green-950) 100%);}
.cta::before{content:"";position:absolute;inset:0;opacity:.1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'><path d='M30 1.7 89.7 1.7 119.5 53.3 89.7 104.9 30 104.9 0.2 53.3Z' fill='none' stroke='%23ffffff' stroke-width='1.4'/></svg>");
  background-size:150px 130px;animation:pattern-drift 24s linear infinite;}
.cta__inner{position:relative;max-width:900px;margin:0 auto;padding:clamp(96px,12vw,150px) var(--pad);text-align:center;}
.cta h2{color:#fff;margin-top:0;font-size:clamp(32px,4.4vw,54px);}
.cta h2 em{font-style:normal;color:#7fe0a0;}
.cta > .cta__inner > p{font-size:clamp(17px,1.6vw,20px);color:rgba(255,255,255,.8);margin-top:24px;line-height:1.9;}
.cta .btn-row{margin-top:48px;}
.cta__contacts{margin-top:56px;padding-top:34px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;justify-content:center;gap:36px;font-family:var(--num);font-size:16px;color:rgba(255,255,255,.65);}

footer{text-align:center;padding:32px;font-size:14px;color:rgba(255,255,255,.42);background:var(--green-950);}

/* motion / a11y */
.motion-ready .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0);}

@keyframes hero-enter{
  to{opacity:1;transform:translateY(0);}
}
@keyframes hero-photo{
  from{opacity:0;transform:scale(1.08);}
  to{opacity:.10;transform:scale(1);}
}
@keyframes pattern-drift{
  to{background-position:150px 130px;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* mobile tuning */
@media (max-width:640px){
  :root{--pad:22px;}
  html{font-size:16px;}
  .hero__stats div + div{border-left:none;padding-left:0;}
  .hero__stats div{flex:1 1 50%;margin-bottom:20px;}
  .about-grid .shot img{height:300px;}
  .channel-card{padding:26px 24px;}
  /* スマホでは見出しとメインビジュアルのロゴが大きすぎて読みづらいため縮小 */
  .hero h1{font-size:28px;}
  .hero__logo{padding:10px 16px;}
  .hero__logo img{width:130px;}
}
