:root{
  --bg: #f6f8fa;
  --header-bg: rgb(254, 215, 229);
  --footer-bg: rgb(253, 203, 219);
  --surface:#ffffff;
  --elevated:#ffffff;
  --text:#1e2028;
  --muted:#6a737d;
  --accent:#ff3aa9;
  --accent6:#e52f98;
  --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1);
}

@keyframes moveGradient {
  0% { transform: translate(-10%, -10%) rotate(0deg) scale(1.2); }
  50% { transform: translate(10%, 10%) rotate(180deg) scale(1.3); }
  100% { transform: translate(-10%, -10%) rotate(360deg) scale(1.2); }
}

html, body {
  height: 100%;
  overflow-x: hidden; /* 横スクロールを禁止 */
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -50vmin;
  z-index: -1;
  filter: blur(100px);
}

body::before {
  background: radial-gradient(circle at top right, rgba(255, 175, 220, 0.7), transparent 40%),
              radial-gradient(circle at bottom left, rgba(210, 190, 255, 0.7), transparent 50%);
  animation: moveGradient 40s ease-in-out infinite;
}

body::after {
  background: radial-gradient(circle at top left, rgba(180, 210, 255, 0.7), transparent 40%);
  animation: moveGradient 35s ease-in-out -10s infinite alternate;
}

/* Reset-ish */
*{box-sizing:border-box}

body{
  margin:0;
  padding-top: 64px;
  background-color: var(--bg);
  position: relative;
  isolation: isolate;
  color:var(--text);
  font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Hirago Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}

a{color:inherit;text-decoration:none}

.site-content-wrapper {
  flex: 1 0 auto;
  width: 100%; /* 幅を100%に指定 */
  overflow-x: hidden; /* この要素でも横スクロールを禁止 */
}

/* Layout utilities */
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.pt-80{padding-top:80px}
.mt-8{margin-top:8px}.mt-24{margin-top:24px}
.narrow{max-width:800px;margin:0 auto}
.row{display:flex;align-items:center}.gap-12{gap:12px}.stack-24{display:flex;flex-direction:column;gap:24px}
.grid{display:grid;gap:24px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.cards-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 980px) {
  .three, .cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .two, .three, .cards-4 {
    grid-template-columns: 1fr;
  }
}

/* Type */
.h1{font-size:40px;letter-spacing:-.01em;font-weight:800}
.h2{font-size:28px;font-weight:800;letter-spacing: -0.02em;}
.h3{font-size:22px;font-weight:700}
.h4{font-size:18px;font-weight:700}
.small{font-size:12px}.muted{color:var(--muted)}.accent{color:var(--accent)}
.prose { line-height: 1.8; color: var(--muted); }

/* General Sections */
.section{padding:80px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;border-left: 3px solid var(--accent); padding-left: 12px;}
.underline{position:relative;color:var(--muted)}
.underline:hover{color:var(--text)}
.underline::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .4s var(--ease-out-cubic)}
.underline:hover::after{width:100%}

/* Animations & Transitions */
[data-reveal] {
  transition: transform 0.8s var(--ease-out-cubic), opacity 0.8s var(--ease-out-cubic);
}
[data-reveal].is-visible {
  transform: none;
  opacity: 1;
}
[data-reveal="fade-in-right"] {
  transform: translateX(30px);
  opacity: 0;
}
[data-reveal="zoom-in"] {
  transform: scale(0.95);
  opacity: 0;
}

#app.fade-out{opacity:.0;transition:opacity .24s ease}
#app.fade-in{opacity:1;transition:opacity .24s ease}
@media (prefers-reduced-motion: reduce){[data-reveal], #app{transition:none!important}}

/* ▼▼▼ レスポンシブ対応を追加 ▼▼▼ */
@media (max-width: 768px) {
  /* スマートフォン用の文字サイズ調整 */
  .h1 { font-size: 32px; }
  .h2 { font-size: 24px; }
  .h3 { font-size: 20px; }
  .h4 { font-size: 18px; }

  /* スマートフォン用の余白調整 */
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 24px; }
}