/* main.css - RS-SYSTEM Corporate Site (Modern / Modular)
   - Sidebar + "mobile-like" content column on desktop
   - Section background colors
   - Scroll scene background (handled by assets/js/main.js)
*/

:root{
  /* Layout */
  --sidebar-w: 320px;
  /* PCでもスマホ表示のまま：メインコンテンツは常にモバイル幅（1カラム） */
  --content-w: 520px;
  --max: 520px;
  --pad: 20px;

  /* Radius（高校生ノリ：丸め強め） */
  --radius: 22px;
  --radius-xl: 34px;

  /* Colors（Pop & Bright） */
  --text: #0b1020;
  --muted: #334155;
  --line: rgba(11, 16, 32, 0.10);

  --brand: #7c3aed;   /* violet */
  --brand-2: #ec4899; /* pink */
  --brand-3: #22d3ee; /* cyan */
  --brand-4: #fbbf24; /* yellow */
  --ok: #22c55e;

  --surface: rgba(255,255,255,0.90);
  --surface-2: rgba(255,255,255,0.78);
  --surface-solid: #ffffff;

  /* Shadows（軽く・ポップに） */
  --shadow-lg: 0 28px 90px rgba(11, 16, 32, 0.22);
  --shadow: 0 18px 52px rgba(11, 16, 32, 0.16);
  --shadow-sm: 0 12px 30px rgba(11, 16, 32, 0.12);

  /* Pop pattern (inline SVG / repeat) */
  --pop-pattern: url("data:image/svg+xml,%3Csvg%20xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%22180%22%20height=%22180%22%20viewBox=%220%200%20180%20180%22%3E%20%3Cg%20opacity=%220.22%22%3E%20%3Cg%20transform=%22translate(14%2010)%20rotate(-18)%22%3E%20%3Crect%20x=%220%22%20y=%2244%22%20width=%2286%22%20height=%2212%22%20rx=%226%22%20fill=%22%2393c5fd%22%2F%3E%20%3Crect%20x=%2210%22%20y=%2247%22%20width=%2212%22%20height=%226%22%20rx=%223%22%20fill=%22%23ffffff%22%20opacity=%220.65%22%2F%3E%20%3Cpolygon%20points=%2298.0,38.0%2095.1,46.0%2086.6,46.3%2093.2,51.5%2090.9,59.7%2098.0,55.0%20105.1,59.7%20102.8,51.5%20109.4,46.3%20100.9,46.0%22%20fill=%22%23fbbf24%22%2F%3E%20%3Ccircle%20cx=%2298%22%20cy=%2250%22%20r=%223.2%22%20fill=%22%23ffffff%22%20opacity=%220.55%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform=%22translate(92%20108)%20rotate(22)%22%3E%20%3Crect%20x=%220%22%20y=%2244%22%20width=%2286%22%20height=%2212%22%20rx=%226%22%20fill=%22%23a7f3d0%22%2F%3E%20%3Crect%20x=%2224%22%20y=%2247%22%20width=%2212%22%20height=%226%22%20rx=%223%22%20fill=%22%23ffffff%22%20opacity=%220.62%22%2F%3E%20%3Cpolygon%20points=%2298.0,38.0%2095.1,46.0%2086.6,46.3%2093.2,51.5%2090.9,59.7%2098.0,55.0%20105.1,59.7%20102.8,51.5%20109.4,46.3%20100.9,46.0%22%20fill=%22%23f472b6%22%2F%3E%20%3Ccircle%20cx=%2298%22%20cy=%2250%22%20r=%223.2%22%20fill=%22%23ffffff%22%20opacity=%220.55%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform=%22translate(130%2026)%20scale(0.18)%22%3E%20%3Cpath%20d=%22M10,30%20A20,20%200%200,1%2050,30%20A20,20%200%200,1%2090,30%20Q90,60%2050,90%20Q10,60%2010,30%20Z%22%20fill=%22%23ec4899%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform=%22translate(26%20132)%20scale(0.16)%20rotate(-10)%22%3E%20%3Cpath%20d=%22M10,30%20A20,20%200%200,1%2050,30%20A20,20%200%200,1%2090,30%20Q90,60%2050,90%20Q10,60%2010,30%20Z%22%20fill=%22%237c3aed%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform=%22translate(42%2036)%22%3E%20%3Cpath%20d=%22M12%200%20L15%209%20L24%2012%20L15%2015%20L12%2024%20L9%2015%20L0%2012%20L9%209%20Z%22%20fill=%22%2322d3ee%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform=%22translate(112%2064)%22%3E%20%3Cpath%20d=%22M10%200%20L13%208%20L21%2010%20L13%2012%20L10%2020%20L8%2012%20L0%2010%20L8%208%20Z%22%20fill=%22%23fbbf24%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform=%22translate(70%20142)%22%3E%20%3Crect%20x=%228%22%20y=%220%22%20width=%226%22%20height=%2222%22%20rx=%223%22%20fill=%22%2322c55e%22%2F%3E%20%3Crect%20x=%220%22%20y=%228%22%20width=%2222%22%20height=%226%22%20rx=%223%22%20fill=%22%2322c55e%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx=%2224%22%20cy=%2286%22%20r=%226%22%20fill=%22%2322d3ee%22%2F%3E%20%3Ccircle%20cx=%22154%22%20cy=%22146%22%20r=%226%22%20fill=%22%23fbbf24%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  --pop-pattern-size: 220px;

}


*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  line-height:1.7;
  background:#f7f8ff; /* fallback */
  letter-spacing:.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; }
a{ color:var(--brand); text-decoration:none; font-weight:900; }
a:hover{ text-decoration:underline; }

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  z-index:9999;
}
.skip-link:focus{ left:10px; }

/* Background stage (fixed) */
.bg-stage{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}
.bg-layer{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(1200px 900px at 18% 18%, rgba(236,72,153,0.32), transparent 62%),
    radial-gradient(1100px 850px at 85% 22%, rgba(124,58,237,0.26), transparent 62%),
    radial-gradient(900px 700px at 28% 88%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(900px 700px at 82% 92%, rgba(251,191,36,0.18), transparent 60%),
    linear-gradient(180deg, #f8fbff, #eef2ff);
  opacity:0;
  transition: opacity 700ms ease;
  filter:saturate(150%);
}

.bg-layer.is-active{ opacity:1; }
.bg-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 700px at 25% 0%, rgba(255,255,255,0.70), transparent 70%),
    radial-gradient(900px 700px at 90% 10%, rgba(255,255,255,0.55), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.22) 0 1.6px, transparent 1.7px),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.26));
  background-size: auto, auto, 18px 18px, auto;
}


/* App shell */
.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
  align-items:start;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:
    radial-gradient(600px 420px at 15% 0%, rgba(236,72,153,0.18), transparent 70%),
    radial-gradient(600px 420px at 85% 10%, rgba(34,211,238,0.16), transparent 72%),
    rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(160%);
  border-right: 1px solid rgba(124,58,237,0.14);
}


.main-area{
  padding:26px;
}
.main-card{
  max-width: var(--content-w);
  margin:0 auto;
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(124,58,237,0.14);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.main-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--pop-pattern) 0 0 / 360px 360px repeat;
  opacity:0.04;
  pointer-events:none;
  z-index:0;
}
.main-card > *{ position:relative; z-index:1; }

.page-content{
  /* sections control their own padding */
}

/* Top notice (top.html) */
.topbar{ padding:0; }
.topbar-inner{
  background: linear-gradient(135deg, rgba(124,58,237,0.16), rgba(236,72,153,0.12));
  border: 1px solid rgba(124,58,237,0.20);
  border-radius: 20px;
  padding:12px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow: 0 14px 28px rgba(236,72,153,0.10);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:999px;
  background: rgba(255,255,255,0.55);
  color: rgba(11,16,32,0.78);
  font-size:13px;
  font-weight:950;
}

.badge strong{ color:var(--text); font-weight:900; }
.topbar-link{
  font-size:13px;
  font-weight:950;
  color:var(--brand);
}
.topbar-link:hover{ color: var(--brand-2); text-decoration:none; }

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{ text-decoration:none; }
.brand .logo{
  width:40px;
  height:40px;
  border-radius:16px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.98), rgba(255,255,255,0.0) 55%),
    linear-gradient(135deg, var(--brand), var(--brand-2), var(--brand-3));
  box-shadow: 0 14px 30px rgba(236,72,153,0.24);
  display:inline-block;
}

.brand .brand-text{ display:flex; flex-direction:column; line-height:1.22; }
.brand .brand-name{ font-weight:950; letter-spacing:.2px; }
.brand .brand-tagline{ font-size:12px; color: rgba(11,16,32,0.72); }

.sidebar-head{ padding:4px 4px 0; }
.sidebar-body{ padding:0 4px; }
.sidebar-foot{
  margin-top:auto;
  padding:0 4px;
  display:grid;
  gap:10px;
}

/* Navigation (menu.html) */
.site-nav{ display:block; }
.nav-toggle{
  display:none;
  appearance:none;
  width:100%;
  border:1px solid rgba(124,58,237,0.18);
  background: rgba(255,255,255,0.78);
  border-radius:18px;
  padding:11px 12px;
  font-weight:950;
  box-shadow: 0 12px 24px rgba(11,16,32,0.10);
}

.nav-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.nav-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:18px;
  color:var(--text);
  font-weight:900;
  font-size:14px;
  border:1px solid rgba(124,58,237,0.10);
  background: rgba(255,255,255,0.55);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.nav-list a::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgba(236,72,153,0.18);
  flex:0 0 auto;
}

.nav-list a:hover{
  text-decoration:none;
  background: rgba(255,255,255,0.75);
  border-color: rgba(124,58,237,0.18);
  box-shadow: 0 14px 28px rgba(11,16,32,0.10);
  transform: translateY(-1px);
}
.nav-list a.is-active{
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(236,72,153,0.14));
  border-color: rgba(124,58,237,0.28);
}
.nav-list a.is-active::before{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); }


/* Buttons（ポップで押したくなる感じ） */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(124,58,237,0.22);
  background: rgba(255,255,255,0.92);
  color:var(--text);
  font-weight:950;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(11,16,32,0.10);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(11,16,32,0.16);
}
.btn:active{
  transform: translateY(0);
  filter: brightness(0.98);
}
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent;
  color:#fff;
  box-shadow: 0 18px 46px rgba(236,72,153,0.28);
}
.btn.primary:hover{ box-shadow: 0 22px 56px rgba(236,72,153,0.34); }
.btn.small{ padding:10px 14px; border-radius:999px; font-size:14px; }
.btn.wide{ padding-left:20px; padding-right:20px; }

/* Focus ring（スマホでも見やすく） */
.btn:focus-visible,
.nav-list a:focus-visible,
.nav-toggle:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible{
  outline: 3px solid rgba(34,211,238,0.55);
  outline-offset: 2px;
}

/* Typography helpers */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: rgba(11,16,32,0.78);
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.60);
  border:1px solid rgba(124,58,237,0.12);
}
.kicker .dot{ width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 20px rgba(236,72,153,0.18); }
.small{ font-size:13px; color: rgba(11,16,32,0.70); }

/* Sections (inside main-card) */
.section{
  padding:40px 0;
  position:relative;
}
.section + .section{ border-top: 1px dashed rgba(124,58,237,0.14); }

.section--hero{
  padding:54px 0 28px;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(236,72,153,0.20), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(124,58,237,0.18), transparent 60%),
    linear-gradient(180deg, rgba(34,211,238,0.10), rgba(255,255,255,0));
}
.section--alt{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
    radial-gradient(900px 560px at 18% 0%, rgba(236,72,153,0.14), transparent 62%),
    radial-gradient(900px 560px at 92% 18%, rgba(34,211,238,0.12), transparent 64%),
    rgba(124,58,237,0.05);
}

.section--tone-blue{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
radial-gradient(900px 560px at 18% 0%, rgba(34,211,238,0.18), transparent 62%),
    radial-gradient(900px 560px at 90% 18%, rgba(124,58,237,0.12), transparent 64%),
    rgba(34,211,238,0.06);
}
.section--tone-green{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
radial-gradient(900px 560px at 18% 0%, rgba(34,197,94,0.18), transparent 62%),
    radial-gradient(900px 560px at 90% 18%, rgba(251,191,36,0.14), transparent 64%),
    rgba(34,197,94,0.05);
}
.section--tone-violet{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
radial-gradient(900px 560px at 18% 0%, rgba(124,58,237,0.18), transparent 62%),
    radial-gradient(900px 560px at 92% 18%, rgba(236,72,153,0.14), transparent 64%),
    rgba(124,58,237,0.06);
}
.section--tone-amber{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
radial-gradient(900px 560px at 18% 0%, rgba(251,191,36,0.20), transparent 62%),
    radial-gradient(900px 560px at 92% 18%, rgba(236,72,153,0.12), transparent 64%),
    rgba(251,191,36,0.05);
}
.section--tone-slate{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
radial-gradient(900px 560px at 18% 0%, rgba(148,163,184,0.18), transparent 62%),
    radial-gradient(900px 560px at 92% 18%, rgba(34,211,238,0.12), transparent 64%),
    rgba(148,163,184,0.06);
}

.section--plain{
  background: transparent;
}
.section--contact{
  background:
    var(--pop-pattern) 0 0 / var(--pop-pattern-size) var(--pop-pattern-size) repeat,
radial-gradient(900px 520px at 15% 0%, rgba(34,197,94,0.16), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(34,211,238,0.12), transparent 62%),
    linear-gradient(180deg, rgba(236,72,153,0.06), rgba(255,255,255,0));
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

/* Section head button: keep label in one line */
.section-head > .btn.small{
  white-space: nowrap;
  flex: 0 0 auto;
}


.section h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.2px;
  display:inline-block;
  position:relative;
  z-index:0;
  padding:0 2px;
}
.section h2::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:2px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(124,58,237,0.38), rgba(236,72,153,0.34), rgba(34,211,238,0.28));
  z-index:-1;
}

.section .sub{ margin:6px 0 0; color: rgba(11,16,32,0.70); font-size:14px; }

/* Hero */
.hero h1{
  margin:0 0 12px;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing:-.3px;
  line-height:1.18;
  color: var(--text);
  text-shadow: 0 10px 30px rgba(124,58,237,0.10);
}

/* 文字にグラデーション（対応ブラウザのみ） */
@supports (-webkit-background-clip: text){
  .hero h1{
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
  }
}

.hero p.lead{
  margin:0 0 18px;
  color: rgba(11,16,32,0.72);
  font-size:16px;
  max-width:64ch;
}
.hero .hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.hero .hero-note{ margin-top:14px; font-size:13px; color: rgba(11,16,32,0.70); }

/* Home KV (index top image) */
.hero-kv{
  display:block;
  width:100%;
  height:auto;
  margin: 0 0 18px;
  border-radius: var(--radius-xl);
  background-color: rgba(2,6,23,0.06);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: var(--shadow-sm);
}

/*
  Home (index)
  - "PC/スマホ"で分けず、常にスマホと同じ見え方（= 画面いっぱいのTOP画像）にする
  - data-page="home" を付けている index.html のみに適用
*/
body[data-page="home"] .main-area{ padding:0; }
body[data-page="home"] .main-card{
  border-radius:0;
  border:0;
  box-shadow:none;
}
body[data-page="home"] .section--hero{ padding:0; }
body[data-page="home"] .section--hero .container{ padding-bottom:28px; }
body[data-page="home"] .hero-kv{
  /* cancel the container side padding and go edge-to-edge */
  width: calc(100% + (var(--pad) * 2));
  /*
    NOTE:
    Global rule `img{ max-width:100%; }` would clamp this image back to the
    container content width, which results in a visible gap on the right when
    we use negative margins. Disable the clamp for this KV only.
  */
  max-width: none;
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  margin-bottom:0;

  border-radius:0;
  border:0;
  box-shadow:none;
}
body[data-page="home"] .hero-kv + .kicker{ margin-top:18px; }

/* Grid / Cards */
.grid{
  display:grid;
  /* 常に1カラム（スマホ表示のまま） */
  grid-template-columns: 1fr;
  gap:16px;
}
.card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82));
  border:1px solid rgba(124,58,237,0.12);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 12px 28px rgba(11,16,32,0.10);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--pop-pattern) 0 0 / 260px 260px repeat;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}
.card > *{ position:relative; z-index:1; }
.card.soft::before{ opacity:0.04; }
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(11,16,32,0.14);
}
.card.soft{
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.72));
}
.card h3{ margin:0 0 8px; font-size:16px; }
.card p{ margin:0 0 10px; color: rgba(11,16,32,0.72); font-size:14px; }
.card ul{ margin:10px 0 0; padding-left:18px; color: rgba(11,16,32,0.72); font-size:14px; }
.card ul li::marker{ color: var(--brand-2); font-weight:950; }
.card ol li::marker{ color: var(--brand); font-weight:950; }
.card .card-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.col-4,
.col-6,
.col-8,
.col-12{ grid-column: 1 / -1; }

/* Split layout */
.split{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
  border:1px solid rgba(15,23,42,0.10);
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,0.75);
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(15,23,42,0.08);
  font-size:14px;
  text-align:left;
}
.table th{
  width:28%;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(34,211,238,0.06));
  color: rgba(11,16,32,0.70);
  font-weight:950;
}
.table tr:last-child th, .table tr:last-child td{ border-bottom:none; }

/* Contact */
.contact-band{ /* acts like a section; background is on section--contact */ }
.contact-band .contact-inner{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  align-items:start;
}
.form{ display:grid; gap:12px; }
.field label{ font-size:13px; font-weight:900; color:var(--text); }
.field input, .field textarea, .field select{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,0.12);
  border-radius:16px;
  background: rgba(255,255,255,0.85);
  font: inherit;
}
.field textarea{ min-height:120px; resize:vertical; }
.form .form-row{ display:grid; grid-template-columns:1fr; gap:12px; }
.form .help{ font-size:12px; color: rgba(15,23,42,0.60); }
.form .actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Footer */
.site-footer{
  padding:28px 0;
  background: linear-gradient(180deg, rgba(124,58,237,0.05), rgba(236,72,153,0.04));
  border-top: 1px solid rgba(124,58,237,0.12);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  align-items:start;
}
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-links a{ color: rgba(11,16,32,0.70); font-weight:900; }
.footer-links a:hover{ color: var(--text); text-decoration:none; }

hr.sep{
  border:0;
  height:2px;
  background: linear-gradient(90deg,
    rgba(124,58,237,0.35),
    rgba(236,72,153,0.35),
    rgba(34,211,238,0.30),
    rgba(251,191,36,0.32)
  );
  border-radius:999px;
  margin:18px 0;
  opacity:0.9;
}

.notice{
  border-left:6px solid var(--brand-2);
  padding:12px 12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(236,72,153,0.06));
  border-radius:18px;
  color: rgba(11,16,32,0.75);
  font-size:14px;
}

/* Responsive */
@media (max-width: 980px){
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{
    position:sticky;
    top:0;
    height:auto;
    border-right:none;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    padding:12px;
  }
  .sidebar-foot{ display:none; }
  .sidebar-body{ padding:0; }

  .nav-toggle{ display:inline-flex; }
  .nav-list{ display:none; margin-top:10px; }
  .nav-list.is-open{ display:grid; }

  .main-area{ padding:14px; }
  .main-card{ border-radius: 22px; }

  .split{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .contact-band .contact-inner{ grid-template-columns:1fr; }
  .form .form-row{ grid-template-columns:1fr; }

  .col-4, .col-6, .col-8, .col-12{ grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce){
  .bg-layer{ transition: none; }
  .btn:hover{ box-shadow: none; }
}
/* =========================================================
  Home / Services posters (indexの「事業紹介」だけ)
  - 画像は index.html と同じ階層の /img/ フォルダに置く想定
    例）img/influencer.jpg / img/sns.jpg / img/web.jpg / img/interpretation.jpg
========================================================= */
body[data-page="home"] #services .svc-posters{
  display:grid;
  gap:18px;
  margin-top:16px;
}

body[data-page="home"] #services .svc-poster{
  /* theme vars（デフォルト） */
  --bg1: #ffd1ea;
  --bg2: #ff87cf;
  --tint1: rgba(236,72,153,0.55);
  --tint2: rgba(124,58,237,0.35);
  --ink: #081226;

  /* CTA */
  --btn: #26284f; /* スクショっぽい濃紺 */
  --btn-ring: rgba(255,255,255,0.55);

  position:relative;
  overflow:hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  border: 2px solid rgba(255,255,255,0.72);
  box-shadow: 0 26px 66px rgba(11,16,32,0.16);
  transform: translateZ(0);
  isolation:isolate;
}

body[data-page="home"] #services .svc-poster__media,
body[data-page="home"] #services .svc-poster__body{
  position:relative;
  z-index: 1;
}

/* カード下側にも薄い円（スクショっぽい味付け） */
body[data-page="home"] #services .svc-poster::before{
  content:"";
  position:absolute;
  left:-28px;
  bottom: 74px;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.55);
  opacity: 0.80;
  pointer-events:none;
  z-index:0;
}
body[data-page="home"] #services .svc-poster::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom: -34px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.55);
  opacity: 0.75;
  pointer-events:none;
  z-index:0;
}

/* カラーバリエーション */
body[data-page="home"] #services .svc-poster--pink{
  --bg1: #ffd1ea;
  --bg2: #ff7fc9;
  --tint1: rgba(236,72,153,0.58);
  --tint2: rgba(124,58,237,0.35);
}
body[data-page="home"] #services .svc-poster--cyan{
  --bg1: #bff4ff;
  --bg2: #14d8ff;
  --tint1: rgba(34,211,238,0.62);
  --tint2: rgba(251,191,36,0.26);
}
body[data-page="home"] #services .svc-poster--green{
  --bg1: #bfffd0;
  --bg2: #3ef666; /* スクショ近似 */
  --tint1: rgba(62,246,102,0.62);
  --tint2: rgba(34,211,238,0.22);
}
body[data-page="home"] #services .svc-poster--violet{
  --bg1: #e6caff;
  --bg2: #c98be3; /* スクショ近似 */
  --tint1: rgba(206,131,238,0.62);
  --tint2: rgba(124,58,237,0.30);
}

/* 上の画像枠 */
body[data-page="home"] #services .svc-poster__media{
  position:relative;
  height: 250px;
  overflow:hidden;
  border-radius: 34px 34px 0 0;
  /* 画像が無い時もピンクが透けないように、背景は“濃いめの中立色”に固定 */
  background:
    radial-gradient(900px 520px at 10% 12%, rgba(255,255,255,0.22), transparent 62%),
    linear-gradient(135deg, rgba(15,23,42,0.70), rgba(15,23,42,0.18)),
    #0b1020;
  isolation: isolate; /* z-index を安定させる */
}

/* プレースホルダ（画像の“下”に置く） */
body[data-page="home"] #services .svc-poster__mediaPlaceholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  z-index: 0; /* ← 重要：画像より下 */
  color: rgba(255,255,255,0.94);
  font-weight: 950;
  letter-spacing: .10em;
  text-shadow: 0 12px 26px rgba(0,0,0,0.22);
}
body[data-page="home"] #services .svc-poster__mediaLabel{
  display:inline-block;
  padding:10px 16px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,0.75);
  background: rgba(2,6,23,0.18);
  backdrop-filter: blur(8px);
}
body[data-page="home"] #services .svc-poster__mediaNote{
  display:block;
  margin-top:10px;
  font-size: 12px;
  font-weight: 900;
  opacity: 0.95;
}

/* 画像が読み込めたらプレースホルダは消す */
body[data-page="home"] #services .svc-poster__media.has-img .svc-poster__mediaPlaceholder{
  opacity: 0;
  transition: opacity 220ms ease;
}


/* 画像（img/ から表示） */
body[data-page="home"] #services .svc-poster__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index: 1;
}

/* 画像の上に色をベタ被せしない（写真をそのまま見せる） */
body[data-page="home"] #services .svc-poster__media::before{ content: none; }

/* 白い線（← 画像の上にかぶさる） */
body[data-page="home"] #services .svc-poster__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0.78)) 0 72%/100% 2px no-repeat,
    linear-gradient(to right, rgba(255,255,255,0.78), rgba(255,255,255,0.78)) 24% 0/2px 100% no-repeat;
  opacity: 0.78;
  pointer-events:none;
  z-index: 3;
}

/* 装飾：四角＆円（画像の上） */
body[data-page="home"] #services .svc-poster__deco{
  position:absolute;
  pointer-events:none;
  z-index: 4;
  opacity: 0.9;
}
body[data-page="home"] #services .svc-poster__deco--square{
  left: 18px;
  top: 118px;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 18px;
}
body[data-page="home"] #services .svc-poster__deco--square::before{
  content:"";
  position:absolute;
  left: -16px;
  top: 26px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 6px;
}
body[data-page="home"] #services .svc-poster__deco--circle{
  right: -26px;
  top: 142px;
  width: 118px;
  height: 118px;
  border: 2px solid rgba(255,255,255,0.80);
  border-radius: 999px;
}
body[data-page="home"] #services .svc-poster__deco--circle::before{
  content:"";
  position:absolute;
  right: 18px;
  bottom: -26px;
  width: 74px;
  height: 74px;
  border: 2px solid rgba(255,255,255,0.70);
  border-radius: 999px;
}

/* テキストエリア */
body[data-page="home"] #services .svc-poster__body{
  padding: 18px 18px 20px;
  color: var(--ink);
  border-top: 2px solid rgba(255,255,255,0.72); /* 画像と本文の仕切り */
}

/* 本文側の白ライン（スクショっぽい横線＆縦線） */
body[data-page="home"] #services .svc-poster__body::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.78), rgba(255,255,255,0.78)) 88% 0/2px 100% no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0.78)) 0 62%/100% 2px no-repeat;
  opacity: 0.55;
  pointer-events:none;
  z-index:0;
}
body[data-page="home"] #services .svc-poster__body > *{
  position:relative;
  z-index:1;
}

/* タイトル */
body[data-page="home"] #services .svc-poster__title{
  margin: 2px 0 10px;
  display:flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.08;
}
body[data-page="home"] #services .svc-poster__titleMain{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: .02em;
}
body[data-page="home"] #services .svc-poster__titleSub{
  font-size: 18px;
  font-weight: 950;
  opacity: 0.9;
}

body[data-page="home"] #services .svc-poster__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 900;
  color: rgba(8,18,38,0.88);
}

/* 箇条書き（提供内容） */
body[data-page="home"] #services .svc-poster__points{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
body[data-page="home"] #services .svc-poster__points li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 900;
  color: rgba(8,18,38,0.88);
}
body[data-page="home"] #services .svc-poster__points li::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 7px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--tint1), var(--tint2));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 18px rgba(11,16,32,0.10);
}

/* ボタン（太め・押したくなる） */
body[data-page="home"] #services .svc-poster__btn{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width: 100%;
  padding: 16px 64px 16px 18px;
  border-radius: 999px;
  background: var(--btn);
  color: #fff;
  font-weight: 950;
  letter-spacing: .08em;
  text-decoration:none;
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 44px rgba(11,16,32,0.22);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
body[data-page="home"] #services .svc-poster__btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow: 0 26px 56px rgba(11,16,32,0.26);
}
body[data-page="home"] #services .svc-poster__btn:active{
  transform: translateY(0);
  filter: brightness(0.98);
}
body[data-page="home"] #services .svc-poster__btn:focus-visible{
  outline: 3px solid rgba(255,255,255,0.70);
  outline-offset: 3px;
}

body[data-page="home"] #services .svc-poster__btnLabel{
  font-size: 15px;
}

/* 右の丸い矢印 */
body[data-page="home"] #services .svc-poster__btnIcon{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 18px;
  font-weight: 950;
  color: #0b1020;
  background: linear-gradient(135deg, rgba(34,211,238,1), rgba(236,72,153,1));
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
  border: 2px solid var(--btn-ring);
}

/* Posters: Center the main texts, keep description left */
body[data-page="home"] #services .svc-poster__body{
  text-align: center;
}

/* Center the title block (it's flex) */
body[data-page="home"] #services .svc-poster__title{
  justify-content: center;
}

/* The description sentence is left-aligned (but the block itself is centered) */
body[data-page="home"] #services .svc-poster__text{
  text-align: left;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

/* Bullet list: 真ん中に置いて、文字は左揃え（ブロックはセンター） */
body[data-page="home"] #services .svc-poster__points{
  display: inline-grid; /* 内容幅に合わせて縮む → 親の text-align:center で真ん中に来る */
  justify-items: start;
  text-align: left;
  max-width: 46ch;
  margin: 12px 0 0; /* 上だけ余白（左右の auto は不要） */
}
body[data-page="home"] #services .svc-poster__points li{
  justify-content: flex-start;
}
body[data-page="home"] #services .svc-poster__pointText{
  display: inline-block;
  text-align: left;
}

/* ちょい動き（過剰にしない） */
@media (prefers-reduced-motion: no-preference){
  body[data-page="home"] #services .svc-poster__deco--circle{
    animation: svcDecoFloat 3.8s ease-in-out infinite;
  }
  body[data-page="home"] #services .svc-poster__btnIcon{
    animation: svcIconPulse 2.4s ease-in-out infinite;
  }
}
@keyframes svcDecoFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes svcIconPulse{
  0%,100%{ transform: translateY(-50%) scale(1); }
  50%{ transform: translateY(-50%) scale(1.06); }
}

/* タイトルの自動縮小（小さい画面向け） */
@media (max-width: 420px){
  body[data-page="home"] #services .svc-poster__titleMain{ font-size: 24px; }
  body[data-page="home"] #services .svc-poster__titleSub{ font-size: 16px; }
  body[data-page="home"] #services .svc-poster__media{ height: 220px; }
}

@media (max-width: 420px){
  body[data-page="home"] #services .svc-poster__points li{ font-size: 13px; }
  body[data-page="home"] #services .svc-poster__points li::before{ margin-top: 6px; }
}

/* =========================================================
  INDEX部分【事業紹介】画像・タイトル・説明・詳細をみるボタン
  Home / Services posters - Scroll animation (inview)
  - 画面内に入って「約1秒後」にスタート（画像も文字も）
  - 画像：もっとアップ（拡大）→ ゆっくり元サイズへ
  - タイトル：左→右に“なめらかに”出る
  - それ以外：下から“ぽわっ”と優しく浮き上がる
  ※スクロールで見えたタイミング毎に繰り返し発火（is-inview の付け外し）
========================================================= */

/* ▼▼ ここだけ触れば微調整できる（おすすめ） ▼▼ */
body[data-page="home"] #services{
  /* 画面に入ってから何ms後に開始する？（全体） */
  --svcDelay: 300ms;

  /* 画像：どれくらいアップから始める？（1.00=等倍） */
  --svcImgZoomFrom: 1.42;

  /* 画像：元のサイズに戻る速さ（大きいほど“ゆっくり”） */
  --svcImgDur: 1600ms;

  /* タイトル：左→右の速さ */
  --svcTitleDur: 3900ms;

  /* 本文/リスト/ボタン：ぽわっと出る速さ */
  --svcBodyDur: 10000ms;

  /* イージング（動きの質感） */
  --svcEase: cubic-bezier(.32,.85,.2,1);
  --svcEaseImg: cubic-bezier(.2,.75,.2,1);

  /* タイトル→本文→リスト→ボタンの“順番” */
  --svcStaggerText: 160ms;
  --svcStaggerPoints: 320ms;
  --svcStaggerBtn: 980ms;
}
/* ▲▲ ここだけ触れば微調整できる（おすすめ） ▲▲ */

@media (prefers-reduced-motion: no-preference){
  /* 画像：ズームアウト（inview時だけゆっくり戻す） */
  html.js body[data-page="home"] #services .svc-poster__img{
    transform: scale(var(--svcImgZoomFrom));
    transition: transform 0ms linear 0ms; /* 画面外に出たら即リセット */
    will-change: transform;
  }
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__img{
    transform: scale(1);
    transition: transform var(--svcImgDur) var(--svcEaseImg) var(--svcDelay);
  }

  /* タイトル：左→右の出現（クリップ + スライド） */
  html.js body[data-page="home"] #services .svc-poster__title{
    opacity: 0;
    transform: translateX(-18px);
    clip-path: inset(0 100% 0 0);
    transition:
      opacity 0ms linear 0ms,
      transform 0ms linear 0ms,
      clip-path 0ms linear 0ms; /* 画面外に出たら即リセット */
    will-change: transform, opacity, clip-path;
  }
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__title{
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    transition:
      opacity 520ms ease-out var(--svcDelay),
      transform var(--svcTitleDur) var(--svcEase) var(--svcDelay),
      clip-path var(--svcTitleDur) var(--svcEase) var(--svcDelay);
  }

  /* それ以外：下から“ぽわっ”（本文 / リスト / ボタン） */
  html.js body[data-page="home"] #services .svc-poster__text,
  html.js body[data-page="home"] #services .svc-poster__points,
  html.js body[data-page="home"] #services .svc-poster__btn{
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0ms linear 0ms,
      transform 0ms linear 0ms; /* 画面外に出たら即リセット */
    will-change: transform, opacity;
  }

  /* inview：表示状態（※動きの設定はこの後の個別ルールで） */
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__text,
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__points,
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__btn{
    opacity: 1;
    transform: translateY(0);
  }

  /* ちょい遅らせて“順番に”出る（※全部 1秒後 以降に開始） */
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__text{
    transition:
      opacity 560ms ease-out calc(var(--svcDelay) + var(--svcStaggerText)),
      transform var(--svcBodyDur) var(--svcEase) calc(var(--svcDelay) + var(--svcStaggerText));
  }
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__points{
    transition:
      opacity 560ms ease-out calc(var(--svcDelay) + var(--svcStaggerPoints)),
      transform var(--svcBodyDur) var(--svcEase) calc(var(--svcDelay) + var(--svcStaggerPoints));
  }
  html.js body[data-page="home"] #services .svc-poster.is-inview .svc-poster__btn{
    transition:
      opacity 560ms ease-out calc(var(--svcDelay) + var(--svcStaggerBtn)),
      transform var(--svcBodyDur) var(--svcEase) calc(var(--svcDelay) + var(--svcStaggerBtn));
  }
}