/*
  サービス紹介ページの共通スタイル。5ページとも全部これ1枚で作る。

  作りは intro/organization/（組織図）に合わせている。
  ・和文 DotGothic16 ／ 英字見出し Press Start 2P（.px）
  ・.back-link / header.hero / section / カードは #0a0a0a + 2px #333
  ・見出しは「和文を主・英字を small で下に添える」形（組織図の h2.section-title と同じ）

  色はサイト標準の 金(#ffcc4d)＋紫(#7a2fbf)。
  水色＋ピンクはトップのリストで開く説明パネル側で使う（index.html）。
  ⚠ 色は必ずここの変数を通すこと。ページ側に直書きしない。
*/
:root {
    --accent: #ffcc4d;      /* 主アクセント。サイト共通の金 */
    --accent-line: #4a3524; /* 金の沈んだ側。枠線に使う */
    --sub: #7a2fbf;         /* 副アクセント。サイト共通の紫 */
    --shadow: #3d1a63;      /* ドット影（box-shadow / text-shadow）専用 */
    --ink: #000;            /* 金の面に載せる文字色 */
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; background: #000; color: #fff;
    font-family: 'DotGothic16', sans-serif;
    overflow-x: hidden;
}
.px { font-family: 'Press Start 2P', 'DotGothic16', sans-serif; }
a { color: inherit; }

.back-link {
    position: fixed; top: 4%; left: 4%; z-index: 20;
    color: rgba(255,255,255,0.65); font-size: 0.55rem;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.4);
    padding: 6px 10px; text-decoration: none;
}
.back-link:hover { color: var(--accent); border-color: var(--accent); }

header.hero {
    text-align: center; padding: 96px 24px 60px; max-width: 760px; margin: 0 auto;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(122,47,191,0.16), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(139,94,60,0.14), transparent 60%);
}
.eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; color: var(--accent); margin-bottom: 18px; }
h1.title { font-size: clamp(1.6rem, 6vw, 2.6rem); margin: 0 0 22px; letter-spacing: 0.08em; text-shadow: 3px 3px 0 var(--shadow); }
/* 一言説明。ここだけ読めば何のサービスか分かる状態にする */
.lead { font-size: clamp(1rem, 3.4vw, 1.25rem); line-height: 1.95; margin: 0 0 14px; }
.sub { font-size: 0.72rem; line-height: 2; opacity: 0.6; margin: 0; }

/* 状態バッジ。公開中は水色、開発中はピンクの枠 */
.status { display: inline-block; font-size: 0.5rem; padding: 6px 10px; margin-bottom: 16px; letter-spacing: 0.1em; }
.status.live { color: var(--ink); background: var(--accent); }
.status.wip { color: #c9a3ff; border: 2px solid var(--sub); }

.pixel-btn {
    font-family: 'Press Start 2P', monospace; font-size: 0.7rem;
    display: inline-block; margin-top: 32px; text-decoration: none;
    color: var(--ink); background: var(--accent); border: 4px solid #fff;
    box-shadow: 4px 4px 0 var(--shadow); padding: 16px 30px; letter-spacing: 0.08em;
}
.pixel-btn:active { box-shadow: 1px 1px 0 var(--shadow); transform: translate(3px, 3px); }
/* 開発中は押させない。約束をしないための見た目 */
.pixel-btn.pending {
    color: #6b6259; background: transparent; border-color: #3a3229;
    box-shadow: none; cursor: default;
}
.pixel-btn.pending:active { transform: none; }

section { max-width: 900px; margin: 0 auto; padding: 40px 24px; }
/* 組織図と同じ形：和文が主、英字ラベルを下に小さく添える */
h2.section-title {
    font-size: 1rem; letter-spacing: 0.05em; margin: 0 0 28px; text-align: center;
    color: var(--accent);
}
h2.section-title small {
    display: block; font-size: 0.6rem; color: #888; margin-top: 8px; letter-spacing: 0.14em;
}
.section-note { text-align: center; font-size: 0.65rem; opacity: 0.5; margin: -16px 0 28px; line-height: 1.8; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.item-card { background: #0a0a0a; border: 2px solid #333; padding: 20px 24px; transition: border-color .2s, background .2s; }
.item-card:hover { border-color: var(--accent); background: #0d0618; }
.item-tag { font-size: 0.55rem; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 10px; }
.item-name { font-size: 0.85rem; margin: 0 0 12px; }
.item-desc { font-size: 0.7rem; line-height: 1.9; opacity: 0.65; }

/* こんな人に */
.who-list { display: flex; flex-direction: column; gap: 10px; }
.who-item { display: flex; align-items: center; gap: 14px; border: 2px solid rgba(127,224,192,0.3); padding: 14px 18px; }
.who-item svg { flex-shrink: 0; }
.who-item span { font-size: 0.75rem; line-height: 1.9; }

/* 画面イメージ。実物のスクリーンショットを並べる */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; border: 2px solid #333; background: #0a0a0a; }
.shot figcaption { font-size: 0.6rem; opacity: 0.5; margin-top: 8px; text-align: center; line-height: 1.8; }
.shot-grid.tall { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.cta-block { text-align: center; padding: 72px 24px; }
.cta-block p { font-size: 0.8rem; margin-bottom: 24px; line-height: 1.9; }

/* 免責。サービスごとに要否も文面も違うので、各ページ側で書く */
.disclaimer {
    max-width: 900px; margin: 0 auto; padding: 20px 24px;
    font-size: 0.6rem; line-height: 2; opacity: 0.45;
    border-top: 1px solid #222;
}
/* 商標・医療免責など、読まれないと困る注意書き。小さくしすぎない */
.disclaimer.strong {
    font-size: 0.68rem; opacity: 0.88; border: 2px solid var(--accent-line);
    background: #0d0618; margin-top: 24px; padding: 22px 24px;
}
.disclaimer.strong strong { color: var(--accent); }

footer { text-align: center; padding: 30px; opacity: 0.35; font-size: 0.55rem; border-top: 1px solid #222; margin-top: 20px; }
footer a { opacity: 1; }
footer a:hover { color: var(--accent); }
.footer-sns { color: var(--sub); }