/* =========================================
   Global – Google/Apple風ミニマル + Noto Sans
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #111;
  background: #fafafa;
  line-height: 1.75;
  scroll-behavior: smooth;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
}

h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

/* =========================================
   Header – 固定 + シャドウ + Fade
========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  padding: 20px 40px;  /* 右の余白を強める */
  border-bottom: 1px solid #eee;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  transition: box-shadow .3s ease, background .3s ease, padding .3s ease;
  z-index: 1000;
}

.site-header.scrolled {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  padding: 14px 40px;  /* 右の余白をスクロール時も維持 */
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
}

.logo {
  margin-right: auto;
}

.nav-links {
  margin-left: auto; /* keep this */
  padding-right: 0;
  display: flex;
  align-items: center;
}

.nav-links a {
  margin-left: 40px;
}

.nav-links a {
  color: #111;
  text-decoration: none;
  font-weight: 500;
  transition: opacity .25s ease, color .25s ease;
}

.nav-links a:hover {
  opacity: 0.6;
}

/* Underline animation */
.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--jks-green);
  transition: width .3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Logo */
.logo {
  font-size: 26px;
  font-weight: 700;
  color: #009a53;
  letter-spacing: -0.04em;
  margin-left: 0;
}

/* =========================================
   Layout
========================================= */

.section {
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(0,0,0,0.06);
  padding: 40px 32px;
  margin-bottom: 80px;
}
.content {
  max-width: 960px;
  margin: 160px auto 120px auto;
  padding: 0 32px;
  border-radius: 28px;
  background:#fff;
}

/* Container helper */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* =========================================
   Colors – JKS GREEN
========================================= */
:root {
  --jks-green: #009a53;
  --jks-darkgreen: #008546;
}

a {
  color: var(--jks-green);
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

/* =========================================
   Hero Section – Apple/Googleスタイル
========================================= */
.hero {
  max-width: 900px;
  margin: 80px auto 100px auto;
  text-align: left;
  padding: 20px 0;
}

.hero-eyebrow {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 44px;
  line-height: 1.28;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-text {
  font-size: 17px;
  color: #444;
  max-width: 600px;
  margin-bottom: 28px;
}

.hero-button {
  margin-top: 8px;
}

/* =========================================
   Cards – GAFA style
========================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 32px;
}

.card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.08);
}


.card .card-title {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--jks-green) !important;
}

.card-text {
  font-size: 15px;
  color: #555;
  line-height: 1.72;
  margin-bottom: 20px;
}

.card-cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--jks-green);
  transition: opacity .2s ease;
}

.card-cta:hover {
  opacity: .7;
}

/* =========================================
   CTA Section
========================================= */
.section-cta {
  text-align: center;
  padding: 60px 32px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(0,154,83,0.08), rgba(0,0,0,0.02));
}

.section-text {
  max-width: 520px;
  margin: 0 auto 28px auto;
  color: #444;
  font-size: 16px;
}

/* =========================================
   Section Title Animation (line grows)
========================================= */
.section-title {
  position: relative;
  margin-bottom: 38px;
  padding-left: 18px;
  font-size: 30px;
}

/*
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0;
  height: 2px;
  background: var(--jks-green);
  transition: width .6s cubic-bezier(0.16,1,0.3,1);
}
*/

.fade-in.show .section-title::before {
  width: 42px;
}

/* =========================================
   Fade-in Animation – ふわっと表示
========================================= */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1),
              transform .9s cubic-bezier(0.16,1,0.3,1);
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  filter: blur(4px);
}

.fade-in.show {
  filter: blur(0px);
}

/* =========================================
   Buttons – Google Material Lite風
========================================= */
.button {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 10px;
  background: var(--jks-green);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, opacity .2s ease;
}

.button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

/* =========================================
   Footer
========================================= */
.site-footer {
  text-align: center;
  padding: 48px;
  color: #666;
  font-size: 14px;
  border-top: 1px solid #eee;
  margin-top: 140px;
}

/* =========================================
   Responsive
========================================= */
@media (max-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================
   HERO SECTION – Apple風 上→下グラデ背景
========================================= */
.hero-section {
  position: relative;
  width: 100%;
  padding: 140px 32px 180px;
  border-radius: 32px;
  overflow: hidden;
}

.hero-section .hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,154,83,0.00) 0%,
    rgba(0,154,83,0.12) 45%,
    rgba(0,154,83,0.00) 100%
  );
  z-index: -1;
}

.hero-inner {
  max-width: 960px;
  margin: 0 auto;
}

.hero-title {
  font-size: 52px;
  line-height: 1.22;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}

.hero-text {
  font-size: 18px;
  color: #333;
  line-height: 1.72;
  margin-bottom: 32px;
}

/* =========================================
   ABOUT HERO – 大型ミニマル Apple/Google風
========================================= */
.about-hero {
  position: relative;
  width: 100%;
  padding: 160px 32px 140px;
  border-radius: 32px;
  max-width: 1120px;
  margin: 0 auto 80px auto;
}

.about-hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.about-hero-text {
  font-size: 18px;
  color: #444;
  max-width: 640px;
  line-height: 1.85;
  margin-bottom: 32px;
}

.hero-bg-accent {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    135deg,
    rgba(0,154,83,0.10),
    rgba(255,255,255,1) 60%
  );
  border-radius: 0 0 48px 48px;
  transform: translateY(-20px);
}

/* Responsive */
@media (max-width: 780px) {
  .about-hero-title {
    font-size: 36px;
  }
  .about-hero {
    padding: 120px 24px 120px;
  }
}

/* =========================================
   Mission Section – 左右スプリット
========================================= */
.mission-section {
  margin-top: 80px;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.mission-left .section-title {
  margin-top: 8px;
}

.mission-right p {
  font-size: 17px;
  color: #444;
  line-height: 1.8;
}

/* =========================================
   About Highlight – 写真 × テキスト
========================================= */
.about-highlight {
  margin-top: 100px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-photo {
  width: 100%;
  height: 320px;
  border-radius: 24px;
  background: linear-gradient(
      135deg,
      rgba(0,154,83,0.15),
      rgba(0,0,0,0.05)
    );
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}

/* =========================================
   CTA – 緑 × 白 グラデ × 角丸28px
========================================= */
.cta-section {
  margin-top: 120px;
  padding: 80px 32px;
  text-align: center;
  border-radius: 32px;
  background: linear-gradient(
    135deg,
    rgba(0,154,83,0.12),
    rgba(255,255,255,1) 70%
  );
}

.cta-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 18px;
}

.cta-text {
  font-size: 17px;
  color: #444;
  margin: 0 auto 32px;
  max-width: 520px;
}

.cta-button {
  padding: 16px 38px;
  border-radius: 12px;
  font-size: 16px;
}

/* =========================================
   Additional Responsive Tweaks
========================================= */
@media (max-width: 900px) {
  .mission-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-section {
    padding: 120px 24px 160px;
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 32px;
  }

  .content {
    margin-top: 140px;
    padding: 0 20px;
  }
}
.hero {
  margin-top: 160px; /* ← 追加 */
}

/* =========================================
   VALUE SECTION – Aboutページの4カード
========================================= */
.value-section {
  margin-top: 120px;
  padding: 20px 0 40px;
}

.value-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1100px;
  width: 100%;
}

.value-card-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.value-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 26px 36px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.12);
}

.value-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}

.value-card p {
  font-size: 15px;
  color: #444;
  line-height: 1.72;
}

/* =========================================
   RESPONSIVE for VALUE CARDS
========================================= */
@media (max-width: 1080px) {
  .value-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .value-card-grid {
    grid-template-columns: 1fr;
  }
  .value-card {
    padding: 26px 22px 30px;
  }
}

/* =========================================
   ABOUT PAGE – 強化デザインブロック
========================================= */

.about-section {
  margin-top: 120px;
  margin-bottom: 80px;
}

.about-box-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.about-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 12px 36px rgba(0,0,0,0.07);
  transition: transform .25s ease, box-shadow .25s ease;
}

.about-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(0,0,0,0.12);
}

.about-box h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.about-box p {
  font-size: 15px;
  color: #444;
  line-height: 1.75;
}

/* シンプル区切り帯 */
.section-divider {
  margin: 100px 0;
  height: 1px;
  background: linear-gradient(to right, rgba(0,154,83,0.15), rgba(0,0,0,0));
}

/* 事業紹介カード（大きめ） */
.business-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 36px 40px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 16px 42px rgba(0,0,0,0.08);
  margin-bottom: 40px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.business-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.12);
}

.business-card h3 {
  font-size: 22px;
  margin-bottom: 14px;
}

/* ABOUT CTA 強化 */
.about-cta-large {
  margin-top: 120px;
  padding: 80px 40px;
  border-radius: 36px;
  background: linear-gradient(
    135deg,
    rgba(0,154,83,0.14),
    rgba(255,255,255,1) 70%
  );
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

.about-cta-large h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 18px;
}

.about-cta-large p {
  font-size: 17px;
  color: #333;
  max-width: 580px;
  margin: 0 auto 32px;
}

/* Responsive */
@media (max-width: 880px) {
  .about-box-grid {
    grid-template-columns: 1fr;
  }
  .business-card {
    padding: 28px 28px;
  }
  .about-cta-large {
    padding: 60px 24px;
  }
}

/* ============================
   MISSION BOX（大枠デザイン）
============================= */
.mission-box {
  background: #ffffff;
  padding: 60px 50px;
  margin: 80px auto;
  border-radius: 32px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

/* グリッドレイアウト */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.mission-lead {
  font-size: 18px;
  line-height: 1.9;
  color: #333;
}

/* スマホ向け */
@media (max-width: 900px) {
  .mission-grid {
    grid-template-columns: 1fr;
  }
  .mission-box {
    padding: 40px 24px;
  }
}

/* =========================================
   FEATURE CARDS – Appleサイト風 3カード
========================================= */
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.feature-card {
  background: #fff;
  padding: 36px 32px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.10);
}

.feature-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.feature-card p {
  font-size: 16px;
  color: #444;
  line-height: 1.75;
}

/* Responsive */
@media (max-width: 900px) {
  .feature-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   WORK HIGHLIGHT – 左右写真付き行
========================================= */
.work-item-large {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.work-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.work-row.reverse {
  direction: rtl;
}

.work-row.reverse .work-text {
  direction: ltr;
}

.work-photo {
  width: 100%;
  height: 260px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0,154,83,0.12), rgba(0,0,0,0.05));
  box-shadow: 0 16px 42px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 900px) {
  .work-row {
    grid-template-columns: 1fr;
  }
  .work-row.reverse {
    direction: ltr;
  }
}

/* =========================================
   COMPANY PROFILE – Apple風テーブル
========================================= */
.company-profile-table {
  margin-top: 40px;
  border-radius: 20px;
  background: #fff;
  padding: 20px 0;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 38px rgba(0,0,0,0.08);
}

.profile-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-row span:first-child {
  font-weight: 600;
  color: #222;
}

.profile-row span:last-child {
  color: #444;
}

@media (max-width: 640px) {
  .profile-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* =========================================
   ABOUT GLOBAL FIX – 下部をプレーンに見せない
========================================= */
.about-page p {
  font-size: 16px;
  color: #444;
  line-height: 1.85;
  margin-bottom: 18px;
}

.about-page h3 {
  margin-top: 32px;
  font-size: 22px;
  font-weight: 700;
}

/* ============================
   GLOBAL TEXT ACCENTS
============================= */

/* 見出しを深めの緑黒に */
.section-title,
.about-page h2,
.about-page h3 {
  color: #0f2f23;
  font-weight: 700;
}

/* 本文の読みやすさUP */
.about-page p {
  line-height: 1.95;
}

/* 強調キーワード */
.accent {
  color: var(--jks-green);
  font-weight: 600;
}

/* 見出し下のアクセントライン */
.section-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: rgba(0,154,83,0.3);
  margin-top: 10px;
}

/* サブタイトル(LINE左) */
.subtle-title {
  padding-left: 12px;
  border-left: 3px solid rgba(0,154,83,0.35);
  font-weight: 600;
  color: #222;
  margin-bottom: 14px;
}

/* =========================================
   ULTRA APPLE ENHANCEMENT PACK
   – 立体感 / グラデ / シームレス / 影 / 動き
========================================= */

/* ---------------------------
   1. Apple式 立体浮遊シャドウ
--------------------------- */
.card, .value-card, .feature-card, .about-box, .business-card, .mission-box, .work-photo {
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover,
.value-card:hover,
.feature-card:hover,
.about-box:hover,
.business-card:hover,
.mission-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 75px rgba(0,0,0,0.13);
}

/* ---------------------------
   2. シームレスな背景グラデーション
--------------------------- */
.section-seamless {
  background: linear-gradient(
    180deg,
    rgba(0,154,83,0.06) 0%,
    rgba(255,255,255,1) 40%
  );
  padding: 140px 0;
  margin: 120px 0;
  border-radius: 48px; /* ← 追加：GAFA/Appleっぽい大きめ角丸 */
}

/* ---------------------------
   3. Apple式 アニメ・フェード（細かい動き）
--------------------------- */
.fade-lift {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(6px);
  transition: all .9s cubic-bezier(0.16,1,0.3,1);
}

.fade-lift.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 遅延付き表示 */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all .8s cubic-bezier(0.16,1,0.3,1);
}

.stagger.show > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger.show > *:nth-child(1) { transition-delay: .05s; }
.stagger.show > *:nth-child(2) { transition-delay: .15s; }
.stagger.show > *:nth-child(3) { transition-delay: .25s; }
.stagger.show > *:nth-child(4) { transition-delay: .35s; }
.stagger.show > *:nth-child(5) { transition-delay: .45s; }

/* ---------------------------
   4. Appleのフローティングライン
--------------------------- */
.subtle-divider {
  width: 100%;
  height: 1px;
  margin: 80px 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,154,83,0.22),
    rgba(0,0,0,0)
  );
}

/* ---------------------------
   5. Apple式サブヘッド（淡い色・余白）
--------------------------- */
.subhead {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

/* ---------------------------
   6. Apple式 ガラス風カード
--------------------------- */
.glass-card {
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 22px;
  padding: 42px 36px;
  box-shadow: 0 25px 65px rgba(0,0,0,0.08);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 85px rgba(0,0,0,0.12);
}

/* ---------------------------
   7. Apple式 アイコン丸背景
--------------------------- */
.icon-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(0,154,83,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
  color: var(--jks-green);
}

/* ---------------------------
   8. 大型 Apple CTA（浮遊式）
--------------------------- */
.apple-cta {
  padding: 100px 40px;
  background: radial-gradient(circle at top, rgba(0,154,83,0.18), rgba(255,255,255,1) 60%);
  border-radius: 40px;
  text-align: center;
  box-shadow: 0 25px 70px rgba(0,0,0,0.08);
}

.apple-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 18px;
}

.apple-cta p {
  font-size: 18px;
  color: #333;
  max-width: 580px;
  margin: 0 auto 32px;
}

/* ---------------------------
   9. Apple式 ページ全体の立体感
--------------------------- */
body {
  background: linear-gradient(
    180deg,
    #fafafa 0%,
    #ffffff 100%
  );
}

/* ---------------------------
   10. トップに戻る（Apple浮遊型）
--------------------------- */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0,154,83,0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: all .35s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* =========================================
   ABOUT PAGE FIX – 強制表示（一時対応）
========================================= */
.about-page .fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0) !important;
}

.about-page {
  min-height: 100vh;
}

/* ============================
   GLOBAL TEXT ACCENTS
============================= */

.section-title,
.about-page h2,
.about-page h3 {
  color: #0f2f23;
  font-weight: 700;
}

.about-page p {
  line-height: 1.95;
}

/* 強調キーワード */
.accent {
  color: var(--jks-green);
  font-weight: 600;
}

/* 見出し下のアクセントライン */
.section-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: rgba(0,154,83,0.3);
  margin-top: 10px;
}

/* サブタイトル */
.subtle-title {
  padding-left: 12px;
  border-left: 3px solid rgba(0,154,83,0.35);
  font-weight: 600;
  color: #222;
  margin-bottom: 14px;
}

/* =========================================
   ULTRA APPLE ENHANCEMENT PACK
========================================= */

/* 1. Apple風シャドウ */
.card, .value-card, .feature-card, .about-box, .business-card, .mission-box, .work-photo {
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover,
.value-card:hover,
.feature-card:hover,
.about-box:hover,
.business-card:hover,
.mission-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 75px rgba(0,0,0,0.13);
}

/* 2. シームレス背景 */
.section-seamless {
  background: linear-gradient(
    180deg,
    rgba(0,154,83,0.06) 0%,
    rgba(255,255,255,1) 40%
  );
  padding: 140px 0;
  margin: 120px 0;
}

/* 3. Appleフェード */
.fade-lift {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(6px);
  transition: all .9s cubic-bezier(0.16,1,0.3,1);
}

.fade-lift.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 4. Appleフローティングライン */
.subtle-divider {
  width: 100%;
  height: 1px;
  margin: 80px 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,154,83,0.22),
    rgba(0,0,0,0)
  );
}

/* 5. サブヘッド */
.subhead {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

/* 6. Apple ガラスカード */
.glass-card {
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 22px;
  padding: 42px 36px;
  box-shadow: 0 25px 65px rgba(0,0,0,0.08);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.glass-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 85px rgba(0,0,0,0.12);
}

/* 7. アイコン背景丸 */
.icon-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(0,154,83,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
  color: var(--jks-green);
}

/* 8. 大型 CTA */
.apple-cta {
  padding: 100px 40px;
  background: radial-gradient(circle at top, rgba(0,154,83,0.18), rgba(255,255,255,1) 60%);
  border-radius: 40px;
  text-align: center;
  box-shadow: 0 25px 70px rgba(0,0,0,0.08);
}

.apple-cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 18px;
}

.apple-cta p {
  font-size: 18px;
  color: #333;
  max-width: 580px;
  margin: 0 auto 32px;
}

/* 9. 立体感 */
body {
  background: linear-gradient(
    180deg,
    #fafafa 0%,
    #ffffff 100%
  );
}

/* 10. トップへ戻る */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0,154,83,0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: all .35s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Global elevated container for depth + rounding */
.elevated {
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 48px 40px;
}

/* Apply elevation to all major sections */
.hero-section,
.about-hero,
.value-section,
.mission-section,
.features-section,
.work-highlight,
.company-section,
.cta-section {
  border-radius: 40px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.08);
  background: #fff;
}

/* END — 構文エラーなし・安全版 */

/* =========================================
   CONTACT PAGE — GAFA / Google / Apple style
========================================= */

/* Form container (large floating card) */
.contact-wrapper {
  max-width: 860px;
  margin: 160px auto 120px;
  padding: 60px 72px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

/* Section heading */
.contact-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact-lead {
  font-size: 17px;
  color: #444;
  margin-bottom: 40px;
}

/* Label */
.contact-form label {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  display: block;
  margin-bottom: 6px;
}

/* Inputs */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fafafa;
  font-size: 16px;
  transition: all .25s ease;
  outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--jks-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,154,83,0.12);
}

/* Select arrow */
.contact-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23009a53' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

/* Textarea */
.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Submit button */
.contact-submit {
  margin-top: 24px;
  padding: 16px 38px;
  background: var(--jks-green);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

.contact-submit:hover {
  opacity: .9;
  transform: translateY(-2px);
}

.contact-submit:active {
  transform: translateY(0);
}

/* Additional contact methods block */
.contact-extra {
  max-width: 860px;
  margin: 40px auto 120px;
  padding: 40px 60px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(0,154,83,0.05), #fff 70%);
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 18px 50px rgba(0,0,0,0.06);
}

.contact-extra h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.contact-extra p {
  font-size: 16px;
  margin-bottom: 8px;
}

/* Mobile */
@media (max-width: 720px) {
  .contact-wrapper {
    padding: 40px 28px;
  }
  .contact-title {
    font-size: 30px;
  }
}

/* =========================================
   PAGE SPACER — for header offset
========================================= */
.page-spacer {
  height: 160px;
}

@media (max-width: 900px) {
  .page-spacer {
    height: 130px;
  }
}

@media (max-width: 600px) {
  .page-spacer {
    height: 110px;
  }
}

/* =========================================
   THREE COLUMN UTILITY LAYOUT
========================================= */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .three-col {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   DETAIL ACCENT – 写真なしの装飾ブロック
   Apple/Google風の抽象グラデ + 立体影
================================*/
.detail-accent {
  width: 100%;
  min-height: 260px;
  border-radius: 24px;
  background: linear-gradient(135deg,
    rgba(0,154,83,0.18),
    rgba(255,255,255,0.6) 60%,
    rgba(0,0,0,0.05)
  );
  box-shadow: 0 20px 45px rgba(0,0,0,0.10);
  backdrop-filter: blur(12px);
  transition: transform .35s cubic-bezier(0.22,1,0.36,1),
              box-shadow .45s cubic-bezier(0.22,1,0.36,1);
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-accent:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 70px rgba(0,0,0,0.14);
}

/* スマホ向け */
@media (max-width: 900px) {
  .detail-accent {
    min-height: 200px;
  }
}

/* ===============================
   FLAT OVERRIDE – 立体感を弱める
   (既存の強いシャドウをすべて上書き)
=============================== */

/* 全カードをフラット寄りに統一 */
.card,
.value-card,
.feature-card,
.about-box,
.business-card,
.mission-box {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* 写真ブロックも軽量化 */
.work-photo {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* セクション全体（シームレス + Apple系）も弱める */
.hero-section,
.about-hero,
.value-section,
.mission-section,
.features-section,
.work-highlight,
.company-section,
.cta-section {
  box-shadow: 0 6px 18px rgba(0,0,0,0.04) !important;
  border-radius: 28px !important;
}

/* ディテールブロックも軽量版 */
.detail-accent {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
}

/* elevated はフラット寄りに */
.elevated {
  box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important;
  border-radius: 24px !important;
}

/* --- Word FX Base --- */
.fx {
  position: relative;
  display: inline-block;

  color: #111;
  font-weight: 400;
  letter-spacing: -0.03em;
  transform: translateY(6px);

  transition:
    color .9s cubic-bezier(0.16,1,0.3,1),
    font-weight .9s cubic-bezier(0.16,1,0.3,1),
    text-shadow .9s cubic-bezier(0.16,1,0.3,1),
    letter-spacing .7s cubic-bezier(0.16,1,0.3,1),
    transform .9s cubic-bezier(0.16,1,0.3,1),
    opacity .8s ease;

  /* 個別遅延 */
  transition-delay: var(--delay, 0s);
}

/* --- Light Gradient Glow --- */
.fx::before {
  content: "";
  position: absolute;
  inset: -10px -18px;
  background: radial-gradient(
    circle at center,
    rgba(0,154,83,0.20),
    rgba(0,154,83,0.0) 60%
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1);
  z-index: -1;
}

/* --- Activated when parent.fade-in.show --- */
.fade-in.show .fx {
  color: var(--jks-green);
  font-weight: 700;
  text-shadow: 0 4px 12px rgba(0,154,83,0.35);
  transform: translateY(0);
  letter-spacing: -0.015em;
}

.fade-in.show .fx::before {
  opacity: 1;
}

/* ======================================================
   文字アニメーション "全部入り" セット
   - カラー変化
   - 太字
   - 発光
   - 浮遊
   - ラインSVG
   - パーティクル
   - 遅延
   - Apple Air感
====================================================== */

.fx-word {
  display: inline-block;
  position: relative;
  margin: 0 6px;
  padding: 6px 4px;
  cursor: default;
  transform-style: preserve-3d;
}

/* 文字本体 */
.fx-text {
  font-weight: 400;
  color: #111;
  display: inline-block;
  transition:
    color .9s ease,
    font-weight .9s ease,
    text-shadow .9s ease,
    transform .9s cubic-bezier(0.16,1,0.3,1);
}

/* 発光 + 浮遊 */
.fx-word.show .fx-text {
  color: var(--jks-green);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(0,154,83,0.45);
  transform: translateY(-4px) scale(1.04);
}

/* SVGライン */
.fx-outline {
  position: absolute;
  inset: -8px;
  width: 100%;
  height: 100%;
  stroke: var(--jks-green);
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  opacity: 0;
  transition:
    opacity .6s ease,
    stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1);
}

.fx-word.show .fx-outline {
  stroke-dashoffset: 0;
  opacity: .35;
}

/* パーティクル */
.fx-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-particles::before,
.fx-particles::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--jks-green);
  border-radius: 50%;
  opacity: 0;
  animation: floatParticle 4s infinite ease-in-out;
}

.fx-particles::after {
  animation-delay: 1s;
}

@keyframes floatParticle {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  20%  { transform: translate(8px,-12px) scale(1); opacity: .85; }
  40%  { transform: translate(-6px,-20px) scale(.6); opacity: .6; }
  60%  { transform: translate(10px,-30px) scale(.8); opacity: .4; }
  100% { transform: translate(0,-40px) scale(0); opacity: 0; }
}

/* ホバーで吸い寄せ */
.fx-word:hover .fx-text {
  transform: translateY(-6px) scale(1.07);
  text-shadow: 0 0 18px rgba(0,154,83,0.6);
}

/* ぼんやり波紋背景（Apple感） */
.mega-animate {
  position: relative;
}

.mega-animate::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(
    circle,
    rgba(0,154,83,0.18),
    rgba(255,255,255,0)
  );
  opacity: 0;
  filter: blur(30px);
  transition: opacity 1.4s ease;
}

.mega-animate.show::before {
  opacity: 1;
}

/* =========================================================
   GLOBAL BACKDROP – Apple visionOS風 “Air Layer”
========================================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,154,83,0.10), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0,154,83,0.08), transparent 65%),
    linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  filter: blur(40px);
  opacity: 0.0;
  animation: bodyGlow 3s ease-out forwards;
}

@keyframes bodyGlow {
  to { opacity: 1; }
}
/* ============================================
   GLOBAL SECTION FX – 全セクション動かす
============================================ */

.section,
.fade-in,
.fade-group {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(12px);
  transition: 
    opacity .9s cubic-bezier(0.16,1,0.3,1),
    transform .9s cubic-bezier(0.16,1,0.3,1),
    filter .9s cubic-bezier(0.16,1,0.3,1);
}

.section.show,
.fade-in.show,
.fade-group.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ============================================
   SECTION TITLES – 全タイトルに光/ライン
============================================ */

.section-title {
  position: relative;
  display: inline-block;
  overflow: visible;
  transition: color .8s ease, text-shadow .8s ease;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 0%;
  background: var(--jks-green);
  opacity: 0.4;
  transition: width 1s cubic-bezier(0.16,1,0.3,1);
}

.section-title.show {
  color: #0f2f23;
  text-shadow: 0 0 12px rgba(0,154,83,0.4);
}

.section-title.show::after {
  width: 42px;
}


/* ================================
   SERVICES PAGE – 横並びレイアウト
================================ */

.services-subtitle {
  font-size: 20px;
  line-height: 1.7;
  text-align: center;
  max-width: 960px;
  margin: 0 auto 40px auto;
  padding: 0 24px;
}

.horizontal-service-grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 40px;
}

.service-row {
  display: flex;
  justify-content: center;
  gap: 48px;
}

.service-card {
  width: 380px;
  text-align: center;
}

/* スマホ時は縦並び */
@media (max-width: 820px) {
  .horizontal-service-grid,
  .service-row {
    flex-direction: column;
    align-items: center;
  }

  .service-card {
    width: 100%;
    max-width: 420px;
  }
}

.services-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 32px 120px;
}

.services-hero .hero-inner {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.services-hero-title {
  font-size: 52px;
  margin-bottom: 20px;
}

.services-hero-text {
  font-size: 22px;
  line-height: 1.85;
  color: #444;
  margin-top: 0;
  margin-bottom: 0;
}

.mission-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.mission-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 64px rgba(0,0,0,0.12);
}

/* アイキャッチ用のシンプルアクセント */
.mission-card h2,
.mission-card h3 {
  color: #0f2f23;
  font-weight: 700;
}

.mission-card p {
  font-size: 16px;
  color: #444;
  line-height: 1.9;
}

.value-card .value-title {
  color: var(--jks-green) !important;
}
.value-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.service-card .service-title {
  color: var(--jks-green) !important;
}

/* Apple風マーカーアニメーション */
.marker-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.marker-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0%;
  height: 12px;
  border-radius: 6px;
  z-index: -1;

  /* Apple 風 “インクのにじみ” グラデ */
  background: linear-gradient(
    90deg,
    rgba(0,154,83,0.25) 0%,
    rgba(0,154,83,0.32) 40%,
    rgba(0,154,83,0.22) 100%
  );

  transform: skewX(-8deg);
  opacity: 0;
}

@keyframes appleMarker {
  0% {
    width: 0%;
    opacity: 0;
    transform: skewX(-8deg) translateX(0px);
  }
  45% {
    width: 100%;
    opacity: 1;
    transform: skewX(-6deg) translateX(2px);
  }
  100% {
    width: 100%;
    opacity: 1;
    transform: skewX(-4deg) translateX(0px);
  }
}

@keyframes markerFill {
  0%   { width: 0%; }
  100% { width: 100%; }
}

.draw-line {
  position: relative;
  display: inline-block;
}

.draw-line svg {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 18px;
}

.draw-line path {
  stroke: var(--jks-green);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawStroke 1s ease forwards;
}

/* ============================================
   LOGO — Optimized Smooth Stroke + Motion
============================================ */

/* 1) Smooth stroke drawing */
.logo-svg path {
  stroke-width: 3; /* ← 太さを細くする */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: logoDraw 1.4s cubic-bezier(0.16,1,0.3,1) forwards;
}

.logo-svg path:nth-child(1) { animation-delay: 0s; }
.logo-svg path:nth-child(2) { animation-delay: 0.22s; }
.logo-svg path:nth-child(3) { animation-delay: 0.42s; }

@keyframes logoDraw {
  to { stroke-dashoffset: 0; }
}

/* 2) Idle Motion — Smooth + subtle */
.jks-anim-logo .j-letter {
  animation: logoJumpJ 2.6s ease-in-out forwards;
  animation-delay: 2.0s;
}

.jks-anim-logo .k-letter {
  animation: logoJumpK 2.6s ease-in-out forwards;
  animation-delay: 2.2s;
}

.jks-anim-logo .s-letter {
  animation: logoJumpS 2.6s ease-in-out forwards;
  animation-delay: 2.4s;
}

/* J jump */
@keyframes logoJumpJ {
  0%   { transform: translateY(0); }
  18%  { transform: translateY(-3px); }
  32%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* K tap */
@keyframes logoJumpK {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-4px) rotate(-1deg); }
  34%  { transform: translateY(0) rotate(0); }
  100% { transform: translateY(0); }
}

/* S bounce */
@keyframes logoJumpS {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(-3px) scale(1.015); }
  38%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0); }
}

/* 3) Gather animation */
.jks-anim-logo.logo-gather path {
  animation: logoGather 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes logoGather {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(3px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(4px); }
}

/* 4) Reset */
.jks-anim-logo.logo-reset path {
  animation: logoReset 1s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes logoReset {
  to { transform: translateX(0) translateY(0) scale(1) rotate(0); }
}

/* ===== Apple風マーカー（スクロール連動） ===== */

.scroll-marker {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  overflow: visible; /* 文字と干渉しないように */
  z-index: 1;
}

.scroll-marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;

  width: 0%;
  height: 12px;
  border-radius: 6px;
  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(0,154,83,0.25) 0%,
    rgba(0,154,83,0.34) 40%,
    rgba(0,154,83,0.22) 100%
  );

  transform: skewX(-8deg);
  opacity: 0;

  transition:
    width 1.0s cubic-bezier(0.22,1,0.36,1),
    opacity 0.6s ease;
}

/* スクロールで可視化された時に発動 */
.scroll-marker.fill::after {
  width: 100%;
  opacity: 1;
}

/* ===========================================
   Apple-style Highlight Marker (Slow / Smooth)
=========================================== */

.scroll-marker {
  position: relative;
  display: inline-block;
  z-index: 1; /* 文字を上に */
}

.scroll-marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;

  width: 0%;
  height: 14px;
  border-radius: 6px;
  z-index: -1;

  /* Appleっぽい淡いインクにじみ */
  background: linear-gradient(
    90deg,
    rgba(0,154,83,0.18) 0%,
    rgba(0,154,83,0.32) 45%,
    rgba(0,154,83,0.22) 100%
  );
  transform: skewX(-6deg);
  opacity: 0;

  transition:
    width 1.6s cubic-bezier(0.16,1,0.30,1),
    opacity 0.8s ease-out,
    transform 1.4s cubic-bezier(0.16,1,0.30,1);
}

/* スクロールで発火 */
.scroll-marker.fill::after {
  width: 100%;
  opacity: 1;
  transform: skewX(-2deg);
}