/* 570design.jp 共通（ヘッダー hp_top・フッター 570footer・ページの器）
 *
 * 実測（本番 https://570design.jp/ ・2026-10-05・Chrome・innerWidth 1230 と 390（ページ幅の偽装）。measured/shared.md）:
 *   色（Bubble の色変数）: primary rgb(0,100,154) / text #000 / background #fff / surface rgb(230,239,244)
 *     / primary_contrast rgb(26,138,198) / コピーライト rgb(164,193,215)
 *   書体: Noto Sans JP（Google Fonts）。本文はほぼ 500。タグだけ 600。アイコンは Ionicons v2 を SVG の <text> で
 *   ヘッダー（固定・白地）: 中身は max 1080 の中央・左右 20 → 1230 幅で 95〜1135。上 50・下 40・段の高さ 36
 *     → 高さ 126（index の本文は margin-top 126 で始まる）
 *     ナビ文字 13px/1.4 字間 3px・下 padding 3 → 高さ 21（下線が付くと 22）。並びは space-between（1230 幅で間 61）
 *     WORKS の箱は幅 68 固定（single_width）。SERVICE の下に空の 10px の段（ux/app/ad では小さな見出し）
 *     ホバーで WORKS の下 5px に ALL/PRINTING/WEB/SNS（10px・字間 1px・未選択は primary の 0.3）。LOGO は本番で非表示
 *     右の絵: メール 25x17（縦中央）・Facebook 30x30・間 15。幅 500 未満は ロゴ と 絵＋三本線 だけ
 *   SERVICE のパネル: 地 surface・padding 20・最小 200・全幅（works だけ 1080）。閉じる 30x30 右上
 *     文 13px/2・上 60 / 箱 300x108（枠 1px primary・角 5・padding 30）を max 1080 に space-between＋右 50、上下 50
 *   スマホのメニュー: 地 primary・padding 20・最小 700。段は左右 20・高さ 30・下線 1px 白、小項目は左 40・間 50
 *   フッター（570footer）: 最小 200・縦中央。© 10px/2 色 rgb(164,193,215)・上下 60・左右 20
 *
 * 幅の帯: 本番の条件は「Current Page Width < 500」→ @media (max-width: 499.98px)
 *
 * ページ専用の CSS は static/css/<page>.css に置き、テンプレートの {% block head %} で読む。
 * 色は下の変数を使う。
 */
:root {
  --c-primary: rgb(0, 100, 154);
  --c-primary-30: rgba(0, 100, 154, 0.3);
  --c-text: #000;
  --c-bg: #fff;
  --c-surface: rgb(230, 239, 244);
  --c-primary-contrast: rgb(26, 138, 198);
  --c-copy: rgb(164, 193, 215);
  --f-jp: "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-jp); font-weight: 500; color: var(--c-text); background: var(--c-bg);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* 本番（Bubble）はサイト全体で antialiased。無いと Mac で文字が太く出る（ad の採寸で判明） */
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
p { margin: 0; }
[hidden] { display: none !important; }
.pg { display: block; }
/* 本番のページ min_height 600 は**ページ全体**（ヘッダー・本文・フッター込み）。本文に付けると作品の少ない
   ?w=2・?w=4 でフッターが 75〜130px 下がっていた（2026-10-06 最終確認で発見） */
body { min-height: 600px; }

/* ------------------------------------------------------------ ヘッダー（hp_top） */
.hp-float { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--c-bg); }
.hp-top { display: flex; flex-direction: column; width: 100%; margin: 0 auto; }
.hp-max1080 .hp-top { max-width: 1080px; }
.hp-n { width: 100%; max-width: 1080px; margin: 0 auto; }
.hp-b {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  margin: 50px 20px 40px; min-height: 30px;   /* Bubble の行は折り返す（本番 614 幅で右の絵が2段目へ） */
}
.hp-logo { flex: 0 0 160px; }
.hp-logo img { width: 160px; height: 20.51px; }   /* 312x40 の比 */
.hp-menu {
  display: block; flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  font-size: 13px; line-height: 1.4; letter-spacing: 3px; text-align: center; color: var(--c-primary);
  padding: 0 0 3px;
}
.hp-menu.is-current { border-bottom: 1px solid var(--c-primary); }
/* 本番: パネルが開くと WORKS（index）・ABOUT・PRICE の下線が消える。works ページの WORKS は消えない */
.hp-top.svc-open:not([data-page="works"]) .hp-menu.is-current { border-bottom: 0; }
.hp-top.svc-open .hp-svc .hp-menu { border-bottom: 1px solid var(--c-primary); }
.hp-top.svc-open .hp-svc-sub { visibility: hidden; }   /* 本番: パネルが開いている間は小さな見出しが空 */

.hp-works { flex: 0 0 68px; width: 68px; display: flex; flex-direction: column; align-items: flex-start; min-height: 21.19px; }
.hp-works-sub { display: none; flex-direction: row; min-width: 240px; margin-top: 5px; }
.hp-works:hover .hp-works-sub { display: flex; }
.hp-sub, .hp-sub-sep {
  font-size: 10px; line-height: 1.4; padding-bottom: 3px; color: var(--c-primary-30); text-align: center; white-space: nowrap;
}
.hp-sub { letter-spacing: 1px; }
.hp-sub:first-child { margin-left: 5px; }
.hp-sub.is-on { color: var(--c-primary); }
.hp-sub-sep { flex: 0 0 15px; width: 15px; letter-spacing: 3px; }

.hp-svc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-height: 21.19px; }
.hp-svc-sub {
  margin-top: 5px; min-width: 10px; min-height: 10px; padding-bottom: 3px;
  font-size: 10px; line-height: 1.4; letter-spacing: 3px; color: var(--c-primary); text-align: center;
}

.hp-icons { flex: 0 0 auto; display: flex; flex-direction: row; gap: 15px; min-height: 30px; align-items: flex-start; }
.hp-mail { align-self: center; }
.hp-mail img { width: 25px; height: 17.35px; }   /* 49x34 の比 */
.hp-fb img { width: 30px; height: 30px; }
.hp-ion { display: block; width: 30px; height: 30px; color: var(--c-primary); align-self: center; }
.hp-ion svg { display: block; width: 100%; height: 100%; }
.hp-ion text { font-family: "Ionicons"; font-size: 50px; fill: currentColor; }
.hp-sp { display: none; }

/* スマホのメニュー（Group MENU） */
.hp-mn {
  display: flex; flex-direction: column; background: var(--c-primary); padding: 20px; min-height: 700px; width: 100%;
}
.hp-mn-row {
  display: flex; align-items: center; min-height: 30px; margin: 0 20px; border-bottom: 1px solid var(--c-bg);
}
.hp-mn-sub { display: flex; flex-direction: row; align-items: flex-start; gap: 50px; margin: 0 20px 0 40px; min-height: 30px; }
.hp-mn-sub--svc { min-width: 135px; }
.hp-mn-col { display: flex; flex-direction: column; align-items: flex-start; }
.hp-mn-col .hp-mw { margin-bottom: 20px; }
.hp-mw {
  display: block; white-space: nowrap; font-size: 13px; line-height: 1.4; letter-spacing: 3px; color: var(--c-bg);
  text-align: center; padding-bottom: 3px;
}

/* SERVICE のパネル（Group service） */
.hp-sv { display: flex; flex-direction: column; background: var(--c-surface); padding: 20px; min-height: 200px; width: 100%; }
.hp-sv-close { align-self: flex-end; }
.hp-sv-lead {
  margin-top: 60px; font-size: 13px; line-height: 2; color: var(--c-primary); text-align: center; white-space: pre-line;
}
.hp-sv-g {
  display: flex; flex-direction: row; justify-content: space-between; width: 100%; max-width: 1080px;
  margin: 50px auto;
}
.hp-sv-box {
  display: flex; flex-direction: column; align-items: center; flex: 0 1 300px; min-width: 200px; max-width: 300px;
  margin-right: 50px; padding: 30px; background: var(--c-bg); border: 1px solid var(--c-primary); border-radius: 5px;
  color: var(--c-primary); min-height: 50px;
}
.hp-sv-t { font-size: 16px; line-height: 1.4; }
.hp-sv-s { margin-top: 10px; font-size: 10px; line-height: 1.4; }

@media (max-width: 499.98px) {
  .hp-pc { display: none; }
  .hp-sp { display: block; }
}

/* ------------------------------------------------------------ フッター（570footer） */
.ft570 { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 200px; background: var(--c-bg); }
.ft570-copy {
  align-self: stretch; margin: 60px 20px; font-size: 10px; line-height: 2; color: var(--c-copy); text-align: center; white-space: pre;
}