/* ヒトリキカク ワンページ版 専用スタイル（site.css の上に重ねて使う） */

:root{
  --brick:#AF5544;
  --sc-line:#F6F7F6;
  --sc-yellow:#F5D442;
  --sc-orange:#E8842B;
}

html{ scroll-padding-top:84px; }
.op-section{ scroll-margin-top:84px; }

/* ---------- ナビ：現在地の強調 ---------- */
#siteNav a.is-current{ color:var(--moss); border-bottom-color:var(--moss); }

/* ---------- イラストのシーン（イントロ・ヒーロー共通） ---------- */
.scene{ width:100%; height:auto; display:block; overflow:visible; }
.scene *{ fill:none; stroke:var(--sc-line); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.scene .sc-glow{ fill:var(--sc-yellow); stroke:none; opacity:.0; filter:blur(14px); }
.scene .sc-star{ fill:var(--sc-line); stroke:none; }
.scene .sc-book, .scene .sc-bookl, .scene .sc-bulb, .scene .sc-bulb2, .scene .sc-moon{ stroke:var(--sc-yellow); }
.scene .sc-cup, .scene .sc-handle{ stroke:var(--sc-orange); }
.scene .sc-steam{ stroke:rgba(246,247,246,.85); stroke-width:2.5; }
.scene .sc-rays line{ stroke:var(--sc-yellow); stroke-width:2.5; }
.scene .sc-head{ fill:var(--moss-deep); }

/* 常時（ヒーロー側）の穏やかな動き */
.scene.is-idle .sc-glow{ opacity:.18; animation:scGlow 4.2s ease-in-out infinite; }
.scene.is-idle .sc-rays{ animation:scRays 4.2s ease-in-out infinite; }
.scene.is-idle .sc-steam{ animation:scSteam 3.6s ease-in-out infinite; }
.scene.is-idle .sc-steam.s2{ animation-delay:1.2s; }
.scene.is-idle .sc-steam.s3{ animation-delay:2.4s; }
.scene.is-idle .sc-star{ animation:scTwinkle 3.4s ease-in-out infinite; }
.scene.is-idle .sc-star:nth-child(2n){ animation-delay:1.1s; }
.scene.is-idle .sc-star:nth-child(3n){ animation-delay:2.2s; }

/* イントロ（線を描いていく） */
.scene.is-intro .sc-draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:scDraw .7s ease forwards; animation-delay:var(--d,0s); }
.scene.is-intro .sc-pop{ transform-box:fill-box; transform-origin:center; transform:scale(0); animation:scPop .5s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay:var(--d,0s); }
.scene.is-intro .sc-glow{ animation:scGlowIn 1.1s ease forwards; animation-delay:var(--d,0s); }
.scene.is-intro .sc-rays{ opacity:0; animation:scRaysIn .8s ease forwards; animation-delay:var(--d,0s); }
.scene.is-intro .sc-steam{ opacity:0; animation:scSteam 3.2s ease-in-out infinite; animation-delay:var(--d,0s); }
.scene.is-intro .sc-star{ opacity:0; animation:scTwinkle 3s ease-in-out infinite; animation-delay:var(--d,0s); }

@keyframes scDraw{ to{ stroke-dashoffset:0; } }
@keyframes scPop{ to{ transform:scale(1); } }
@keyframes scGlowIn{ from{ opacity:0; } to{ opacity:.2; } }
@keyframes scRaysIn{ to{ opacity:1; } }
@keyframes scGlow{ 0%,100%{ opacity:.12; } 50%{ opacity:.26; } }
@keyframes scRays{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes scSteam{
  0%{ opacity:0; transform:translateY(10px); }
  35%{ opacity:.9; }
  100%{ opacity:0; transform:translateY(-16px); }
}
@keyframes scTwinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }

/* ---------- イントロ全画面 ---------- */
.intro-scene{
  position:fixed; inset:0; z-index:999;
  background:var(--moss-deep);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
.intro-scene.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-scene .scene{ width:min(520px, 86vw); }
.intro-scene .intro-skip{ opacity:0; animation:introFadeIn .6s ease forwards 1s; }
@keyframes introFadeIn{ to{ opacity:1; } }

/* ---------- ヒーロー ---------- */
.op-hero{ padding:72px 0 56px; }
.op-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.op-hero h1{ font-size:clamp(2rem, calc(5.2vw * var(--step)), 3.2rem); line-height:1.35; margin:14px 0 18px; }
.op-hero h1 em{ font-style:normal; color:var(--moss); background:linear-gradient(transparent 68%, rgba(201,138,46,.28) 68%); }
.op-hero .lead{ max-width:46ch; }
.op-hero .lead + .lead{ margin-top:12px; }
.op-hero .cta-row{ margin-top:26px; }
.op-hero-scene{
  background:var(--moss-deep); border-radius:24px; padding:26px 22px 14px;
  box-shadow:var(--shadow);
}

/* ---------- 3列：学ぶ・考える・休む ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; }
.pillar{
  --accent:var(--moss);
  background:var(--white); border:1px solid var(--line); border-top:4px solid var(--accent);
  border-radius:var(--radius); padding:28px 24px 26px; display:flex; flex-direction:column;
  scroll-margin-top:96px;
}
.pillar.think{ --accent:var(--amber); }
.pillar.rest{ --accent:var(--brick); }
.pillar-icon{
  width:64px; height:64px; border-radius:50%; background:var(--paper-deep);
  display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:16px;
}
.pillar-icon svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pillar .p-tag{ font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--accent); display:block; margin-bottom:6px; }
.pillar h3{ font-size:1.4rem; margin-bottom:4px; font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; }
.pillar .p-lead{ font-size:.86rem; color:var(--ink-soft); margin-bottom:18px; min-height:2.8em; }
.p-items{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.p-item{
  display:block; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--white); transition:border-color .2s, box-shadow .2s, transform .2s;
}
a.p-item:hover{ border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px); }
.p-item .p-name{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; color:var(--ink); }
.p-item .p-desc{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:3px; }
.p-badge{
  font-size:.62rem; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:999px;
  background:var(--paper-deep); color:var(--ink-soft); flex-shrink:0;
}
.p-badge.app{ background:#0071E3; color:#fff; }
.p-badge.yt{ background:#FF0000; color:#fff; }
.p-badge.game{ background:var(--moss); color:#fff; }
.p-badge.note{ background:var(--ink); color:#fff; }
.p-item.soon{ border-style:dashed; background:var(--paper-deep); }
.p-item.soon .p-name{ color:var(--ink-soft); }

/* ---------- 汎用 ---------- */
.op-note{ margin-top:22px; font-size:.88rem; color:var(--ink-soft); text-align:center; }
.op-note a{ color:var(--moss); border-bottom:1px solid var(--moss); }
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.op-services{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.op-services .chip{ cursor:default; }

/* つくったもの：折りたたみ */
.works-group{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white); margin-top:12px; }
.works-group > summary{
  list-style:none; cursor:pointer; padding:16px 20px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.works-group > summary::-webkit-details-marker{ display:none; }
.works-group > summary .cnt{ font-size:.74rem; color:var(--ink-soft); font-weight:500; }
.works-group > summary::after{ content:"＋"; color:var(--moss); font-weight:700; margin-left:auto; padding-left:12px; }
.works-group[open] > summary::after{ content:"−"; }
.works-body{ padding:4px 20px 20px; }

/* FAQ：折りたたみ */
.faq-acc details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq-acc details:first-child{ border-top:1px solid var(--line); }
.faq-acc summary{
  list-style:none; cursor:pointer; padding:16px 0; font-weight:700; display:flex; gap:12px; align-items:baseline;
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; font-size:1rem;
}
.faq-acc summary::-webkit-details-marker{ display:none; }
.faq-acc summary::before{ content:"Q"; color:var(--amber); font-weight:700; }
.faq-acc summary::after{ content:"＋"; margin-left:auto; color:var(--moss); }
.faq-acc details[open] summary::after{ content:"−"; }
.faq-acc .faq-a2{ padding:0 0 18px 28px; color:var(--ink-soft); font-size:.92rem; }
.faq-acc .faq-a2 a{ color:var(--moss); border-bottom:1px solid var(--moss); }

/* ---------- レスポンシブ ---------- */
@media (max-width:960px){
  .op-hero-grid{ grid-template-columns:1fr; gap:32px; }
  .op-hero-scene{ max-width:520px; }
  .pillars{ grid-template-columns:1fr; }
  .pillar .p-lead{ min-height:0; }
}
@media (max-width:560px){
  .op-hero{ padding:48px 0 40px; }
}

@media (prefers-reduced-motion:reduce){
  .intro-scene{ display:none; }
  .scene.is-idle *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

.op-section .section-head h2{ text-wrap:balance; }