/* 書体はサイトの中に置く。別のCSSから読むと読み込みが1段増えるので、ここに直接書く */
@font-face{font-family:"HG Shippori";src:url(/fonts/shippori-b1-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"HG Zen Kaku";src:url(/fonts/zen-kaku-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HG Zen Kaku";src:url(/fonts/zen-kaku-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --night-1:#131b98;   /* 絵の空のいちばん上 */
  --night-2:#2135b9;
  --night-3:#3363dc;
  --ink:#1c2560;       /* 文字（夜の紺） */
  --accent:#3461aa;    /* 小見出し */
  --cloud:#edecf6;     /* 雲のいちばん明るい所 */
  --moon:#f4efcf;      /* 月明かりのクリーム（ボタン・星） */
  --line:rgba(28,37,96,.16);
  --serif:"HG Shippori",serif;
  /* 書体が届く前の代わりは、かなが全角の幅の書体にする（Windows の画面用の書体はかなが狭く、届いたときに行の数が変わって下がずれるため） */
  --sans:"HG Zen Kaku","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,"Noto Sans JP",sans-serif;
  --system:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--cloud);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.9;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--moon);outline-offset:3px}
.sec :focus-visible,.foot :focus-visible{outline-color:var(--accent)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--moon);color:var(--ink);padding:8px 14px;z-index:20}
.skip:focus{left:8px}
/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ヘッダー */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:22px 48px;color:#fff}
.logo{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.logo-en{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.16em}
.logo-ja{font-size:11px;opacity:.85}
nav{display:flex;gap:28px;font-size:14px}
nav a{text-decoration:none;white-space:nowrap}
nav a:hover{text-decoration:underline;text-underline-offset:6px}
.nav-cta{border-bottom:1px solid #fff;padding-bottom:2px}

/* ファーストビュー：手描きの空を横いっぱいに */
.hero{position:relative;height:calc(100vw * 755 / 884);min-height:620px;color:#fff;overflow:hidden;
  background:var(--night-2) url(/assets/sky.webp) center top/100% auto no-repeat}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(to bottom,rgba(237,236,246,0),var(--cloud));pointer-events:none}
.hero-art{position:absolute;inset:0}
.sys{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sys .ln{stroke:rgba(255,255,255,.62);stroke-width:1.2}
.sys .loop{fill:none;stroke:rgba(244,239,207,.6);stroke-width:1.2;stroke-dasharray:5 6}
.sys .dot{fill:var(--moon);filter:drop-shadow(0 0 5px var(--moon))}
.sys .lb{fill:#fff;font-family:var(--serif);font-weight:700;font-size:12px;paint-order:stroke;stroke:rgba(20,28,90,.55);stroke-width:2.6px;stroke-linejoin:round}
.sys .moonlb{font-size:13px}
.sys-sp{display:none}
.hero h1{position:absolute;left:72.5%;top:128px;z-index:2;writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:46px;letter-spacing:.18em;line-height:1.7;text-shadow:0 2px 16px rgba(10,20,90,.45)}
.hero-sub{position:absolute;left:64px;top:57%;z-index:2}
/* 空に埋もれないよう、文字の後ろにうっすら暗い地を敷く（空の絵そのものは変えない） */
.hero-sub::before{content:"";position:absolute;inset:-34px -44px -34px -40px;z-index:-1;background:rgba(14,20,88,.5);border-radius:48px;filter:blur(24px);pointer-events:none}
/* トップの文は言葉の途中で改行しない：言葉の切れ目の <wbr> は build.py が入れ、keep-all でそこだけで改行する
   （ブラウザーに文節を探させる word-break の指定は、スマホで重いため使わない）。入力欄の中は、ふつうの改行 */
.hero-sub p,.sec{word-break:keep-all;overflow-wrap:anywhere}
.sec input,.sec textarea{word-break:normal}
.hero-sub p{font-size:17px;max-width:480px;margin-bottom:24px;text-shadow:0 1px 10px rgba(10,20,90,.75)}
.hero .btn{background:var(--moon);color:var(--ink);font-size:17px;padding:17px 38px}
/* 空の絵の右下：イラストのクレジット。明るい雲の上なので紺の文字に淡い光 */
.hero-credit{position:absolute;right:48px;bottom:calc(14% + 12px);z-index:2;font-size:12px;letter-spacing:.06em;color:var(--ink);text-shadow:0 0 6px rgba(244,243,252,.95),0 0 2px rgba(244,243,252,.95)}

.btn{display:inline-block;text-decoration:none;font-family:var(--sans);font-size:15px;font-weight:700;padding:14px 30px;border:0;cursor:pointer;background:var(--ink);color:var(--moon);transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

/* 本文 */
.sec{padding:112px 48px;max-width:1120px;margin:0 auto}
.sec h2{font-family:var(--serif);font-weight:700;font-size:36px;letter-spacing:.12em;margin-bottom:48px}
/* できること：左に項目名、右の列に1行の説明 → 実物の画面（右の列の幅いっぱい） */
.can dl>div{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;padding:40px 0;border-top:1px solid var(--line)}
.can dl>div:last-child{border-bottom:1px solid var(--line)}
.can dt{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.5;color:var(--accent)}
.can dd{display:grid;gap:20px;justify-items:start;min-width:0}
.can dd>p{font-size:18px;font-weight:700;line-height:1.7}
.more-link{font-size:16px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.more-link::after{content:" →"}
.more-link:hover{color:var(--accent)}
/* できることの実物の画面。上の部分だけを見せ（自動化装置は横長16:10、推し早見表は縦長4:5を2枚）、押すとモーダルで全体を大きく見る */
.shots{display:grid;gap:12px;width:100%}
.shots-two{grid-template-columns:1fr 1fr}
.shots figcaption{grid-column:1/-1;font-size:15px;line-height:1.8}
.shot{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 1px 2px rgba(28,37,96,.06),0 10px 28px rgba(28,37,96,.08);transition:transform .15s ease}
.shot:hover{transform:translateY(-1px)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shots-two .shot img{aspect-ratio:4/5}
.shot::after{content:"大きく見る";position:absolute;right:8px;bottom:8px;padding:2px 10px;background:var(--ink);color:var(--moon);font-family:var(--sans);font-size:12px;font-weight:700;line-height:1.8}
.shot-modal{width:min(1000px,94vw);max-width:none;max-height:92vh;margin:auto;padding:0;border:0;background:var(--cloud);color:var(--ink);overflow:auto;box-shadow:0 20px 60px rgba(10,16,70,.45)}
.shot-modal::backdrop{background:rgba(14,20,88,.62)}
.shot-modal-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;background:var(--cloud);border-bottom:1px solid var(--line)}
.shot-modal-bar p{font-size:14px;line-height:1.7}
.shot-close{flex:none;padding:8px 20px;border:0;background:var(--ink);color:var(--moon);font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer}
.shot-modal img{display:block;max-width:100%;height:auto;margin:0 auto}

/* 作例（ビフォー・アフター）：横いっぱいの夜の帯。文字は白、名前・タブ・リンクは月明かり、スマホの形の枠は夜の中で光る窓 */
.night{background:linear-gradient(180deg,var(--night-1),var(--ink));color:#fff}
.night .sec :focus-visible{outline-color:var(--moon)}
.case-head,.maker-en,.show-name{font-family:var(--serif);font-weight:700;font-size:22px}
.case-lead{margin:12px 0 40px}
.case-panes{display:flex;justify-content:center;gap:64px}
.case-pane[hidden]{display:none}
.pane-label{margin-bottom:14px;font-family:var(--serif);font-weight:700;font-size:19px;text-align:center;color:var(--moon)}
.phone{width:394px;max-width:100%;border:2px solid rgba(244,239,207,.72);border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(244,239,207,.14),0 0 40px rgba(244,239,207,.24),0 30px 60px rgba(4,8,40,.7)}
.phone iframe{display:block;width:100%;height:720px;border:0}
.case-tabs{display:flex;width:max-content;margin-bottom:20px;border:1px solid var(--moon)}
.case-tabs[hidden]{display:none}
.case-tabs button{padding:10px 26px;border:0;background:transparent;color:var(--moon);font-family:var(--sans);font-size:16px;font-weight:700;cursor:pointer}
.case-tabs [aria-selected="true"]{background:var(--moon);color:var(--ink)}
/* 枠の下：見本のページを全画面（新しいタブ）で開く */
.pane-open{margin-top:14px;text-align:center}
.pane-open a{display:inline-block;min-height:44px;padding:10px 4px;font-size:16px;font-weight:700;text-decoration:none;color:var(--moon);border-bottom:1px solid currentColor;line-height:1.6}
.pane-open a::after{content:" ↗"}
.pane-open a:hover{color:#fff}
.case-note{margin-top:16px;font-size:14px;text-align:center;color:rgba(255,255,255,.78)}
.case-note+.case-note{margin-top:4px}

/* 運営している番組：3匹の姿（制作者の手描き）は、このコーナーだけに置く */
.cast{margin:28px 0 48px}
.cast ul{list-style:none;display:flex;flex-wrap:wrap;gap:24px 48px}
.cast li{display:flex;flex-direction:column;align-items:center;gap:8px}
.cast img{display:block;width:170px;height:auto;aspect-ratio:3/2;object-fit:contain}
.cast li span{font-family:var(--serif);font-weight:700;font-size:17px}
.cast figcaption{margin-top:16px;font-size:12px;opacity:.75}
.work{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.links{display:flex;flex-wrap:wrap;gap:24px;margin-top:22px;font-size:15px;font-weight:700}
.pipeline{list-style:none;position:relative;padding-left:28px}
.pipeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;border-left:1px dashed rgba(28,37,96,.35)}
.pipeline li{position:relative;padding:8px 0;font-size:16px}
.pipeline li::before{content:"";position:absolute;left:-27px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--moon);box-shadow:0 0 0 1px rgba(28,37,96,.35)}

/* つくる人 */
.maker-body{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.maker-name{display:flex;flex-direction:column;gap:2px}
.maker-en{letter-spacing:.16em;color:var(--accent)}
.maker-ja{font-size:12px;opacity:.75}
.maker-text p+p{margin-top:10px}

.flow ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.flow li{counter-increment:s;display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:2px solid var(--ink)}
.flow li::before{content:counter(s);font-family:var(--serif);font-weight:700;font-size:28px;line-height:1}
.flow b{font-size:18px}
.flow span{font-size:15px;line-height:1.8}

.form-lead{margin:-24px 0 36px}
.form form{display:grid;gap:22px;max-width:640px}
.form label{display:grid;gap:8px;font-size:15px;font-weight:700}
.form .lt{display:block}
.req{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--accent);padding:0 6px;line-height:1.7;vertical-align:1px}
.form input,.form textarea{font-family:var(--system);font-size:16px;font-weight:400;padding:12px 14px;border:1px solid rgba(28,37,96,.28);background:#fff;color:var(--ink);border-radius:0}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.form [aria-invalid="true"]{border-color:#b3261e}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* 頼みたいもの・足した質問：fieldset と legend でまとめ、選ぶ所は指で押せる大きさ（高さ48px） */
.form fieldset{border:0;min-width:0;display:grid;gap:12px}
.form fieldset[hidden]{display:none}
.form legend{padding:0;margin-bottom:10px;font-size:15px;font-weight:700}
.form fieldset.more{gap:20px;padding:20px 22px 22px;border-left:3px solid var(--accent);background:rgba(255,255,255,.55)}
.form fieldset.more>legend{float:left;width:100%;margin-bottom:0;font-family:var(--serif);font-size:17px}
.form fieldset.sub legend{margin-bottom:8px}
.opt{display:inline-block;margin-left:8px;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent);border:1px solid var(--accent);padding:0 6px;line-height:1.6;vertical-align:1px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.form .choice{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid rgba(28,37,96,.28);background:#fff;font-size:15px;font-weight:700;cursor:pointer}
.form .choice input{flex:none;width:20px;height:20px;margin:0;padding:0;accent-color:var(--accent)}
.form .choice:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#f3f5fc}
.form .choice input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.purpose{font-size:14px;line-height:1.8;opacity:.85}
.form .btn{justify-self:start}
.status{font-size:14px;font-weight:700;min-height:1.8em}
.status.err{color:#b3261e}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:32px 48px;font-size:13px;border-top:1px solid var(--line);max-width:1120px;margin:0 auto}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}

/* プライバシーポリシーなど、ふつうのページ */
.page-head{background:linear-gradient(180deg,var(--night-1),var(--night-3));color:#fff;padding:120px 48px 56px}
.page-head h1{font-family:var(--serif);font-weight:700;font-size:32px;letter-spacing:.1em;max-width:1120px;margin:0 auto}
.doc{max-width:760px;margin:0 auto;padding:64px 48px 96px}
.doc h2{font-family:var(--serif);font-weight:700;font-size:20px;margin:40px 0 12px}
.doc p,.doc li{font-size:15px}
.doc ul{padding-left:1.4em}
.doc .date{margin-top:48px;font-size:13px;opacity:.75}

/* タブレット */
@media (max-width:1024px){
  .top{padding:20px 32px}
  .hero h1{font-size:32px;top:104px}
  .hero-sub{left:32px}
  .hero-credit{right:32px}
  .can dl>div{grid-template-columns:220px minmax(0,1fr)}
  .sec{padding:96px 32px}
}

/* タブレットの縦・スマホ：作例の枠は2つ並べず、タブで切り替える。上の案内は間を詰める */
@media (max-width:880px){
  nav{gap:18px}
  .logo-ja{display:none}
  .case-panes{display:block}
  .phone iframe{height:70vh}
  .has-tabs .pane-label{display:none}
  .case-pane+.case-pane{margin-top:32px}
  .case-note{text-align:left}
}

/* スマホ：空の絵を縦長に切り取り、雲の上に文字を置く */
@media (max-width:720px){
  .top{padding:16px 20px}
  nav a:not(.nav-cta){display:none}
  .logo-ja{display:none}
  .hero{height:230vw;min-height:0;background-size:cover;background-position:left top}
  .sys-pc{display:none}
  .sys-sp{display:block}
  .sys .lb{font-size:11px;stroke-width:2.4px}
  .sys .moonlb{font-size:12px}
  .hero h1{left:20px;right:20px;top:61%;writing-mode:horizontal-tb;font-size:29px;letter-spacing:.08em;line-height:1.6;color:var(--ink);text-shadow:0 0 16px rgba(240,240,250,.95)}
  .hero-sub{left:20px;right:20px;top:calc(61% + 104px)}
  .hero-sub::before{inset:-16px -12px;background:rgba(240,240,250,.55);filter:blur(14px)}
  .hero-sub p{max-width:none;font-size:15.5px;font-weight:700;line-height:1.8;margin-bottom:20px;color:var(--ink);text-shadow:0 0 14px rgba(240,240,250,.95)}
  .hero .btn{background:var(--ink);color:var(--moon);font-size:16px;padding:16px 34px}
  .hero-credit{right:20px;bottom:40px;font-size:11px}
  .hero::after{height:70px}
  body{font-size:16px}
  .sec{padding:80px 20px}
  .sec h2{font-size:28px;margin-bottom:36px}
  .can dl>div{grid-template-columns:1fr;gap:12px;padding:32px 0}
  .can dd{gap:16px}
  .can dd>p{font-size:17px}
  .cast ul{gap:16px;justify-content:space-between}
  .cast li{flex:1 1 0}
  .cast img{width:100%;max-width:120px}
  .cast li span{font-size:15px}
  /* スマホのモーダル：画面を元の大きさに近い幅（--full）で出し、縦にも横にもスクロールして字を読む */
  .shot-modal{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh}
  .shot-modal-bar{left:0;width:100vw}
  .shot-modal img{width:var(--full,100%);max-width:none;margin:0}
  .work{grid-template-columns:1fr;gap:28px}
  .maker-body{grid-template-columns:1fr;gap:12px}
  .form fieldset.more{padding:16px 16px 18px}
  .choices{grid-template-columns:1fr 1fr}
  .flow ol{grid-template-columns:1fr 1fr}
  .form .row{grid-template-columns:1fr}
  .foot{padding:24px 20px}
  .page-head{padding:96px 20px 40px}
  .page-head h1{font-size:26px}
  .doc{padding:48px 20px 80px}
}
.doc .back{margin-top:24px}