:root{
  --bg:#fafafa; --txt:#1f2937; --muted:#6b7280;
  --main:#355D4A; --accent:#A3C9A8; --hi:#E9F5EF; --soft:#F2F7F4;
  --white:#fff; --border:#e5e7eb; --accent-back: #6b72800a;
  --r:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
}

html,body{background:var(--bg);color:var(--txt)}
*{box-sizing:border-box}
a{color:var(--main);text-decoration:none}
a.link{text-decoration:underline;text-underline-offset:2px}

.lp{padding-top:60px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px;overflow: hidden;}
.h{font-size:clamp(1.4rem,3vw,1.8rem);margin:.1rem 0 .6rem}
.lead{font-size:clamp(1rem,2.4vw,1.15rem);color:#233}

/* HERO */
.hero2{position:relative;min-height:64vh;display:grid;align-items:center}
.hero2__inner{padding:clamp(24px,5vw,48px) 16px;z-index:2}
.eyebrow{font-weight:800;letter-spacing:.06em;color:#2f4; color:#1f3a2e; opacity:.75}
.display{font-weight:800;line-height:1.25;font-size:28px;margin:.3rem 0 1rem}
.display-span{color: var(--main);padding: 1px;font-weight: bold;}
.hero2__cta{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.7rem 1rem;font-weight:800;border:1px solid transparent;cursor:pointer}
.hero2__art{position:absolute;inset:0;z-index:1;margin:0;}
.hero2__art img{width:100%;height:100%;object-fit:cover;filter:contrast(.95) saturate(.98) brightness(.95)}
.hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(250,250,250,.9), rgba(250,250,250,.6), transparent);z-index:1}

/* STORY */
/* ===== Story v2 ===== */
.story.v2{
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 80px) 0;
  background: linear-gradient(180deg, #f6faf7 0%, var(--bg, #fafafa) 100%);
  border-radius: 24px;
  margin-top: 24px;
}

.story.v2::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(163,201,168,.18), transparent 70%);
  pointer-events: none;
}

.story.v2::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,234,223,.22), transparent 70%);
  pointer-events: none;
}

.story.v2 .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 1; }

.story__head{ text-align:center; margin-bottom: clamp(22px, 4vw, 32px); }
.story__divider{ margin-bottom: 16px; }
.story .eyebrow{ font-weight:800; letter-spacing:.1em; color:var(--accent, #A3C9A8); opacity:.9; text-transform: uppercase; font-size: 13px; }
.story .display{
  font-weight: 800; line-height:1.35;
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  margin:.2rem 0 .8rem;
  color: var(--main, #355D4A);
}
.story .display .accent{
  color: var(--accent, #A3C9A8);
}
.story .lead{ color:#374151; font-size: clamp(.95rem, 2.2vw, 1.05rem); line-height: 1.8; }

.story__phase-note{
  display:grid;
  gap:8px;
  max-width:720px;
  margin:20px auto 0;
  padding:16px 18px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(163,201,168,.42);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(76,107,92,.08);
  text-align:left;
  backdrop-filter: blur(8px);
}
.story__phase-note p{
  margin:0;
  color:#374151;
  line-height:1.8;
  font-size:.94rem;
}
.story__phase-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(163,201,168,.28), rgba(214,234,223,.8));
  color:var(--main, #355D4A);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.pillars{
  display:grid; gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 860px){
  .pillars{ grid-template-columns: 1fr; }
}

.pillar{
  position:relative;
  background:#fff; border:1px solid #e8f0e6; border-radius:18px;
  padding: clamp(18px, 2.4vw, 24px);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.pillar:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
  border-color: #cfe3d7;
}
.pillar h3{ margin:.3rem 0 .4rem; font-size: 1.05rem; color: var(--main, #355D4A); }
.pillar p{ color:#374151; margin:0; line-height:1.75; font-size: .95rem; }

.pillar__icon{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background: #f2f7f4; color:#2a3e35; margin-bottom: .5rem;
  border: 1px solid #e8f0e6;
}

/* --- CYCLE ILLUSTRATION --- */
.cycle {
  max-width: 520px;
  margin: 48px auto 0;
  text-align: center;
}

.cycle__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--main, #355D4A);
  margin: 0 0 28px;
  letter-spacing: .05em;
}

.cycle__diagram {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.cycle__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ノードは全て中心基準で配置 */
.cycle__node {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 120px;
}

.cycle__node--top {
  transform: translate(-50%, -50%) translateY(-155px);
}
.cycle__node--right {
  transform: translate(-50%, -50%) translateX(155px);
}
.cycle__node--bottom {
  transform: translate(-50%, -50%) translateY(155px);
}
.cycle__node--left {
  transform: translate(-50%, -50%) translateX(-155px);
}

.cycle__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d6eadf;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(76,107,92,.1);
  flex-shrink: 0;
}

.cycle__label {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  line-height: 1.5;
}

.cycle__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8dece 0%, #7aab8a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(76,107,92,.2);
}

.cycle__center span {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.cycle__caption {
  margin-top: 28px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .cycle__diagram {
    max-width: 300px;
  }
  .cycle__node {
    width: 100px;
  }
  .cycle__node--top    { transform: translate(-50%, -50%) translateY(-122px); }
  .cycle__node--right  { transform: translate(-50%, -50%) translateX(122px); }
  .cycle__node--bottom { transform: translate(-50%, -50%) translateY(122px); }
  .cycle__node--left   { transform: translate(-50%, -50%) translateX(-122px); }
  .cycle__icon {
    width: 48px;
    height: 48px;
  }
  .cycle__icon svg {
    width: 26px;
    height: 26px;
  }
  .cycle__label {
    font-size: 11px;
  }
  .cycle__center {
    width: 68px;
    height: 68px;
  }
  .cycle__center span {
    font-size: 12px;
  }
}

/* CTA */
.story__cta{
  margin-top: clamp(16px, 3vw, 22px);
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
  height: fit-content;
}
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.65rem 1rem; border-radius:999px; cursor:pointer; font-weight:800; }
.btn--primary{ background:#4C6B5C; color:#fff; border:1px solid transparent; }
.btn--primary:hover{ filter:brightness(.95); }
.btn--ghost{ background:#fff; border:1px solid #e5e7eb; color:#123; }
.btn--ghost:hover{ border-color:#cfd3da; }

.teaser-phase-note{
  margin:14px 0 0;
  padding:12px 14px;
  border-left:4px solid var(--accent);
  border-radius:14px;
  background:#f3f8f4;
  color:#3b4a43;
  line-height:1.8;
  font-size:.92rem;
}

/* BUSINESS */
.business{padding:10px 0 28px}
.biz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.biz-grid{display:grid;gap:.8rem;margin-top:.6rem}
.biz-card{display:grid;grid-template-columns: 1.1fr 1.4fr;background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.biz-card:hover{transform:translateY(-2px)}
.biz-card img{width:100%;height:100%;object-fit:cover}
.biz-body{padding:1rem}
.biz-body .desc{color:#374151}
.biz-card--soon{opacity:.75}

/* CAMPAIGNS */
.campaigns{padding:12px 0 8px}
.sec-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 .4rem}
.rail{display:flex;gap:.7rem;overflow-x:auto;padding:.4rem 0 .8rem;scroll-snap-type:x mandatory}
.banner{flex:0 0 auto;width:320px;height:160px;border-radius:14px;overflow:hidden;position:relative;color:#fff;box-shadow:var(--shadow);scroll-snap-align:start}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.banner .b-body{position:absolute;left:.8rem;bottom:.6rem}
.banner h3{margin:.2rem 0 0;font-size:1.05rem}

/* TEASER PRODUCTS */
.padding-none {
    padding: 0;
}
.sec-head-products{
    margin: 0 10% .4rem 0;
    padding: 25px 1rem 50px 1rem;
    position: relative;
}
.sec-head-products::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 120%;
    background-color: var(--accent-back);
    content: "";
}
.sec-head-products h2 {
    font-size: 32px;
}
.sec-head-products h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 25px;
}
.teaser{padding:50px 0}
.cards{list-style:none;padding:0;margin:25px;display:flex;gap:1.5rem;overflow-x: scroll;}
.card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s;min-width: 200px;}
.card:hover{transform:translateY(-2px)}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card__body{padding:.7rem .8rem}
.card .name{margin:0 0 .2rem;font-size:.98rem}
.card .meta{display:flex;align-items:center;gap:.6rem;color:#374151}

/* JOURNAL */
.journal{padding:8px 0 20px}
.posts{display:grid;gap:.8rem}
.post{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns: 1.2fr 1.8fr}
.post .thumb img{width:100%;height:160px;object-fit:cover;display:block}
.post .body{padding:.7rem .9rem}
.post .title{margin:.2rem 0 .2rem;font-size:1.05rem}
.post .date{color:var(--muted);font-size:.9rem}

/* CTA */
.ab-cta{background:var(--soft);margin:6px auto 24px auto}
.ab-cta h2{font-size: 18px;}
.ab-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 0}

.teaser-link {
  position: relative;
  z-index: 99;
}

/* responsive */
@media(min-width:720px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .posts{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
  .cards{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:720px){
  .sp{display:inline}
  .ab-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    gap: 0;
  }
}
@media(min-width:721px){
  .sp{display:none}
}