/* ===========================
   さきほこる - style.css（共通）
   =========================== */

:root {
  --color-bg:        #FAF8F3;
  --color-surface:   #FFFFFF;
  --color-forest:    #2A4D1A;
  --color-sage:      #5E8C4A;
  --color-mint:      #A8C89A;
  --color-cream:     #F5EFE0;
  --color-coral:     #E07A5F;
  --color-sun:       #F4C36B;
  --color-dark:      #1A2110;
  --color-mid:       #4A5E3A;
  --color-light-txt: #7A8F6A;
  --color-white:     #FFFFFF;
  --font-serif:      'Shippori Mincho', serif;
  --font-sans:       'Noto Sans JP', sans-serif;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  32px;
  --radius-xl:  60px;
  --shadow-soft: 0 4px 24px rgba(42,77,26,.10);
  --shadow-card: 0 8px 40px rgba(42,77,26,.14);
  --transition:  .35s cubic-bezier(.25,.8,.25,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); font-size:16px; line-height:1.8; color:var(--color-dark); background:var(--color-bg); overflow-x:hidden; max-width:100vw; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }

.container { max-width:1060px; margin:0 auto; padding:0 24px; }

/* --- Buttons --- */
.btn {
  display:inline-block; font-family:var(--font-sans); font-weight:700;
  font-size:.95rem; letter-spacing:.04em; padding:14px 36px;
  border-radius:var(--radius-xl); transition:var(--transition);
  cursor:pointer; border:2px solid transparent;
}
.btn--primary { background:var(--color-forest); color:var(--color-white); border-color:var(--color-forest); }
.btn--primary:hover { background:var(--color-sage); border-color:var(--color-sage); transform:translateY(-2px); box-shadow:0 8px 24px rgba(42,77,26,.25); }
.btn--ghost   { background:transparent; color:var(--color-forest); border-color:var(--color-forest); }
.btn--ghost:hover { background:var(--color-forest); color:var(--color-white); transform:translateY(-2px); }
.btn--large   { font-size:1.1rem; padding:18px 52px; }

/* --- Section Labels --- */
.section-label { font-size:.7rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--color-sage); margin-bottom:12px; }
.section-label--light { color:var(--color-mint); }
.section-title { font-family:var(--font-serif); font-size:clamp(1.8rem,4vw,3rem); font-weight:800; line-height:1.3; color:var(--color-forest); margin-bottom:48px; }
.section-title--light { color:var(--color-white); }

/* ===========================  HEADER  =========================== */
.header { position:fixed; top:0; left:0; width:100%; z-index:100; padding:20px 0; transition:var(--transition); }
.header.is-scrolled { background:rgba(250,248,243,.96); backdrop-filter:blur(12px); box-shadow:0 2px 20px rgba(42,77,26,.08); padding:13px 0; }
.nav { max-width:1060px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; position:relative; }
.logo { font-family:var(--font-serif); font-size:1.4rem; font-weight:800; color:var(--color-forest); letter-spacing:.05em; }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a { font-size:.88rem; font-weight:500; color:var(--color-mid); letter-spacing:.05em; transition:color var(--transition); }
.nav-links a:hover { color:var(--color-forest); }
.nav-cta { background:var(--color-forest) !important; color:var(--color-white) !important; padding:10px 24px; border-radius:var(--radius-xl); }
.nav-cta:hover { background:var(--color-sage) !important; transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; position:relative; z-index:300; }
.hamburger span { display:block; width:24px; height:2px; background:var(--color-forest); border-radius:2px; transition:var(--transition); }
.hamburger.is-active { position:relative; z-index:300; }
.hamburger.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===========================  HERO  =========================== */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--color-bg); padding-top:80px; }
.hero-bg-circle { position:absolute; border-radius:50%; filter:blur(60px); opacity:.45; pointer-events:none; }
.hero-bg-circle--1 { width:520px; height:520px; background:var(--color-mint); top:-100px; right:-120px; animation:float1 9s ease-in-out infinite; }
.hero-bg-circle--2 { width:320px; height:320px; background:var(--color-sun); bottom:60px; right:200px; opacity:.3; animation:float2 11s ease-in-out infinite; }
.hero-bg-circle--3 { width:240px; height:240px; background:var(--color-coral); bottom:-60px; left:10%; opacity:.2; animation:float3 13s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.05)} }
@keyframes float2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(20px)} }
@keyframes float3 { 0%,100%{transform:translateX(0)} 50%{transform:translateX(18px)} }
.hero-inner { position:relative; z-index:2; max-width:1060px; margin:0 auto; padding:0 24px; }
.hero-eyebrow { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--color-sage); border:1.5px solid var(--color-sage); border-radius:var(--radius-xl); padding:6px 18px; margin-bottom:28px; animation:fadeUp .8s ease both; }
.hero-title { font-family:var(--font-serif); font-size:clamp(2.8rem,7vw,5.5rem); font-weight:800; line-height:1.2; color:var(--color-forest); margin-bottom:28px; animation:fadeUp .9s .15s ease both; }
.hero-title em { font-style:normal; color:var(--color-coral); position:relative; }
.hero-title em::after { content:''; position:absolute; bottom:4px; left:0; width:100%; height:6px; background:var(--color-sun); border-radius:3px; z-index:-1; opacity:.65; }
.hero-sub { font-size:1rem; color:var(--color-mid); line-height:1.9; margin-bottom:44px; max-width:500px; animation:fadeUp 1s .3s ease both; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; animation:fadeUp 1s .45s ease both; }
.hero-scroll { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; animation:fadeIn 1.5s 1s ease both; }
.hero-scroll span { font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--color-light-txt); }
.hero-scroll-line { width:1px; height:48px; background:linear-gradient(to bottom,var(--color-sage),transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes fadeUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ===========================  CATCHPHRASE  =========================== */
.catchphrase { padding:100px 0; background:var(--color-forest); overflow:hidden; position:relative; }
.catch-inner { max-width:780px; opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.catch-inner.is-visible { opacity:1; transform:translateY(0); }
.catch-label { font-size:.7rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--color-mint); margin-bottom:20px; }
.catch-main { font-family:var(--font-serif); font-size:clamp(2rem,5vw,3.8rem); font-weight:800; line-height:1.25; color:var(--color-white); margin-bottom:44px; }
.catch-main em { font-style:normal; color:var(--color-sun); }
.catch-subs { display:flex; flex-direction:column; gap:14px; margin-bottom:44px; padding-left:20px; border-left:3px solid var(--color-coral); }
.catch-subs li { font-family:var(--font-serif); font-size:clamp(1rem,2vw,1.2rem); color:rgba(255,255,255,.85); letter-spacing:.04em; }
.catch-desc { font-size:.95rem; color:rgba(255,255,255,.65); line-height:1.95; max-width:560px; }

/* ===========================  ABOUT  =========================== */
.about { padding:120px 0; background:var(--color-surface); }
.about-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start; }
.about-text p { font-size:1rem; color:var(--color-mid); margin-bottom:20px; }
.about-text strong { color:var(--color-forest); font-weight:700; }
.about-cards { display:flex; flex-direction:column; gap:20px; }
.about-card { background:var(--color-bg); border-radius:var(--radius-md); padding:24px 28px; display:flex; align-items:flex-start; gap:18px; box-shadow:var(--shadow-soft); opacity:0; transform:translateX(20px); transition:opacity .5s ease, transform .5s ease, box-shadow var(--transition); }
.about-card.is-visible { opacity:1; transform:translateX(0); }
.about-card--2 { transition-delay:.12s; }
.about-card--3 { transition-delay:.24s; }
.about-card:hover { box-shadow:var(--shadow-card); transform:translateX(4px); }
.about-card-emoji { font-size:2rem; line-height:1; flex-shrink:0; }
.about-card h3 { font-family:var(--font-serif); font-size:1.05rem; font-weight:600; color:var(--color-forest); margin-bottom:6px; }
.about-card p  { font-size:.88rem; color:var(--color-mid); line-height:1.7; }

/* ===========================  WHY  =========================== */
.why { position:relative; padding:120px 0; background:var(--color-forest); overflow:hidden; }
.why-deco-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-serif); font-size:clamp(4rem,12vw,10rem); font-weight:800; color:rgba(255,255,255,.04); white-space:nowrap; pointer-events:none; letter-spacing:.08em; user-select:none; }
.why-content { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.why-quote { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.why-quote.is-visible { opacity:1; transform:translateY(0); }
.why-quote blockquote { font-family:var(--font-serif); font-size:clamp(1.1rem,2.2vw,1.5rem); font-weight:600; line-height:1.8; color:var(--color-white); border-left:3px solid var(--color-coral); padding-left:24px; margin-bottom:20px; }
.why-quote blockquote em { font-style:normal; color:var(--color-sun); }
.why-quote-source { font-size:.82rem; color:var(--color-mint); letter-spacing:.05em; padding-left:24px; }
.why-body { opacity:0; transform:translateY(24px); transition:opacity .6s .15s ease, transform .6s .15s ease; }
.why-body.is-visible { opacity:1; transform:translateY(0); }
.why-body p { color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.9; margin-bottom:18px; }

/* ===========================  PROGRAM  =========================== */
.program { padding:120px 0; background:var(--color-cream); }
.program-lead { font-size:1rem; color:var(--color-mid); margin-top:-32px; margin-bottom:64px; }
.steps { display:flex; flex-direction:column; }
.step { display:grid; grid-template-columns:80px 1fr 60px; align-items:center; gap:28px; background:var(--color-surface); border-radius:var(--radius-md); padding:32px 36px; box-shadow:var(--shadow-soft); opacity:0; transform:translateX(-20px); transition:opacity .5s ease, transform .5s ease, box-shadow var(--transition); }
.step.is-visible { opacity:1; transform:translateX(0); }
.step:nth-child(3) { transition-delay:.10s; }
.step:nth-child(5) { transition-delay:.20s; }
.step:nth-child(7) { transition-delay:.30s; }
.step:hover { box-shadow:var(--shadow-card); transform:translateX(4px); }
.step-connector { width:2px; height:28px; background:linear-gradient(to bottom,var(--color-mint),var(--color-sage)); margin-left:39px; }
.step-number { font-family:var(--font-serif); font-size:2.2rem; font-weight:800; color:var(--color-mint); line-height:1; }
.step-body h3 { font-family:var(--font-serif); font-size:1.15rem; font-weight:600; color:var(--color-forest); margin-bottom:8px; }
.step-body p  { font-size:.9rem; color:var(--color-mid); line-height:1.7; }
.step-icon { font-size:2rem; text-align:right; }

/* ===========================  TARGET  =========================== */
.target { padding:120px 0; background:var(--color-surface); }
.target-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.target-card { background:var(--color-bg); border-radius:var(--radius-lg); padding:44px 32px; text-align:center; box-shadow:var(--shadow-soft); opacity:0; transform:translateY(24px); transition:opacity .5s ease, transform .5s ease, box-shadow var(--transition); }
.target-card.is-visible { opacity:1; transform:translateY(0); }
.target-card:nth-child(2) { transition-delay:.12s; }
.target-card:nth-child(3) { transition-delay:.24s; }
.target-card:hover { box-shadow:var(--shadow-card); transform:translateY(-4px); }
.target-icon { font-size:2.8rem; margin-bottom:20px; }
.target-card h3 { font-family:var(--font-serif); font-size:1.15rem; font-weight:600; color:var(--color-forest); margin-bottom:14px; }
.target-card p  { font-size:.88rem; color:var(--color-mid); line-height:1.8; }

/* ===========================  CTA  =========================== */
.cta { position:relative; padding:130px 0; background:var(--color-cream); text-align:center; overflow:hidden; }
.cta-bg-circle { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.cta-bg-circle--1 { width:400px; height:400px; background:var(--color-mint); top:-100px; left:-80px; opacity:.33; }
.cta-bg-circle--2 { width:300px; height:300px; background:var(--color-sun); bottom:-80px; right:-60px; opacity:.28; }
.cta .container { position:relative; z-index:2; }
.cta-eyebrow { font-size:3rem; margin-bottom:20px; }
.cta-title { font-family:var(--font-serif); font-size:clamp(1.8rem,4vw,3rem); font-weight:800; color:var(--color-forest); margin-bottom:24px; line-height:1.35; }
.cta-body  { font-size:1rem; color:var(--color-mid); line-height:2; margin-bottom:44px; }
.cta-note  { font-size:.78rem; color:var(--color-light-txt); margin-top:20px; }

/* ===========================  FOOTER  =========================== */
.footer { padding:56px 0; background:var(--color-forest); text-align:center; }
.footer-logo    { font-family:var(--font-serif); font-size:1.6rem; font-weight:800; color:var(--color-white); letter-spacing:.05em; margin-bottom:10px; }
.footer-tagline { font-size:.85rem; color:var(--color-mint); margin-bottom:24px; }
.footer-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px; margin-bottom:28px; }
.footer-nav a { font-size:.82rem; color:rgba(255,255,255,.6); transition:color var(--transition); }
.footer-nav a:hover { color:var(--color-white); }
.footer-copy { font-size:.75rem; color:rgba(255,255,255,.3); }

/* ===========================  RESPONSIVE  =========================== */
@media (max-width:768px) {
  .hamburger { display:flex; }
  .nav-links { display:none; position:fixed; top:0; right:0; width:75vw; height:100svh; background:var(--color-surface); flex-direction:column; justify-content:center; align-items:center; gap:40px; box-shadow:-8px 0 40px rgba(0,0,0,.15); z-index:200; }
  .nav-links.is-open { display:flex; z-index:250; }
  .nav-links a { font-size:1.1rem; }
  .about-grid  { grid-template-columns:1fr; gap:40px; }
  .why-content { grid-template-columns:1fr; gap:44px; }
  .step { grid-template-columns:56px 1fr 40px; padding:24px 18px; gap:14px; }
  .step-number { font-size:1.7rem; }
  .step-icon   { font-size:1.4rem; }
  .step-connector { margin-left:27px; }
  .target-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .hero-sub br, .cta-body br { display:none; }
  .about, .why, .program, .target, .cta, .catchphrase { padding:80px 0; }
  .section-title { margin-bottom:36px; }
}
@media (max-width:480px) {
  .hero-actions { flex-direction:column; gap:12px; }
  .btn { text-align:center; }
}

/* ===========================  TEAM PREVIEW (index)  =========================== */
.team-preview {
  padding: 120px 0;
  background: var(--color-forest);
}

.team-preview .section-label { color: var(--color-mint); }
.team-preview .section-title  { color: var(--color-white); }

.team-preview-lead {
  font-size: 1rem;
  color: rgba(255,255,255,.7);
  margin-top: -32px;
  margin-bottom: 56px;
}

.team-preview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.team-preview-inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.team-preview-photo-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.team-preview-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.team-preview-avatars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.team-avatar-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.team-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.team-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid rgba(255,255,255,.2);
  display: block;
}

.team-avatar span {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--color-mint);
  white-space: nowrap;
}

.team-preview-btn {
  margin-top: 12px;
  align-self: flex-start;
  background: transparent;
  border-color: rgba(255,255,255,.6);
  color: var(--color-white);
}

.team-preview-btn:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-forest);
}

@media (max-width: 768px) {
  .team-preview {
    padding: 80px 0;
  }

  .team-preview-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .team-avatar img {
    width: 60px;
    height: 60px;
  }

  .team-preview-btn {
    align-self: center;
  }
}

/* ===========================  LANG SWITCH（全ページ共通）=========================== */
.lang-switch {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-forest);
  border-radius: 24px;
  overflow: hidden;
  margin-left: 12px;
  flex-shrink: 0;
}

.lang-btn {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 6px 14px;
  color: var(--color-forest);
  background: transparent;
  transition: background var(--transition), color var(--transition);
  line-height: 1;
  text-decoration: none;
}

.lang-btn:hover {
  background: var(--color-forest);
  color: #fff;
}

.lang-current {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 6px 14px;
  background: var(--color-forest);
  color: #fff;
  line-height: 1;
}

@media (max-width: 768px) {
  /* スマホ：ロゴ右・ハンバーガー左に挟む形で配置 */
  .lang-switch {
    position: absolute;
    top: 50%;
    right: 60px;
    transform: translateY(-50%);
    margin-left: 0;
    /* 小さめにする */
    border-width: 1.5px;
  }

  .lang-btn,
  .lang-current {
    padding: 5px 10px;
    font-size: .65rem;
  }
}