/* 作品ページ（ケーススタディ・記事）の共通スタイル。トップページと同じペンギンの世界観にそろえる */
:root {
  --navy: #1F2A3D; --text: #33405A; --sub: #5E6B84; --sky: #D6EAF8; --sky2: #EAF4FC; --ice: #F7FBFF;
  --line: #D3E3F1; --cobalt: #345B8D; --cobalt-dark: #28476F; --aqua: #8EC3E6;
  --round: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "M PLUS Rounded 1c", sans-serif;
  --sans: "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--ice); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.9; letter-spacing: 0.03em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--cobalt); }
img { max-width: 100%; display: block; }
p { margin: 0; }
/* 言葉の切れ目で改行するのは、見出しと短い説明だけ（本文の段落は通常の折り返し） */
h1, h2, h3, h4, .lead, .head p, .tbl th, figcaption, .chips li, .entry h3, .entry p, .go, .crumb { word-break: auto-phrase; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--round); font-weight: 800; color: var(--navy); margin: 0; line-height: 1.5; letter-spacing: 0.04em; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; position: relative; }
.narrow { max-width: 780px; }

/* ヘッダー */
header.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 20; }
header.top .bar { max-width: 1080px; margin: 0 auto; padding: 0 14px; }
header.top .in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 10px 0 12px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-radius: 999px; box-shadow: 0 6px 24px rgba(31,42,61,.08); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; background: var(--sky2); }
.brand b { font-family: var(--round); font-weight: 800; font-size: 17px; color: var(--navy); letter-spacing: 0.06em; }
.brand small { display: block; font-family: var(--round); font-size: 10px; color: var(--sub); letter-spacing: 0.12em; line-height: 1; }
header.top nav { display: flex; gap: 4px; font-family: var(--round); font-weight: 700; font-size: 13px; }
header.top nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; color: var(--navy); }
header.top nav a:hover { background: var(--sky2); color: var(--cobalt); }
header.top nav a.cta { background: var(--cobalt); color: #fff; }
header.top nav a.cta:hover { background: var(--cobalt-dark); color: #fff; }

/* ページ冒頭 */
.page-hero { position: relative; overflow: hidden; padding: 124px 0 56px; background: linear-gradient(180deg, #CFE6F7 0%, #E6F3FC 60%, var(--ice) 100%); }
.page-hero .crumb { font-family: var(--round); font-weight: 700; font-size: 12px; color: var(--sub); }
.page-hero .crumb a { color: var(--cobalt); text-decoration: none; }
.page-hero .tag { display: inline-block; margin-top: 14px; font-family: var(--round); font-weight: 800; font-size: 12px; color: #fff; background: var(--cobalt); padding: 3px 14px; border-radius: 999px; }
.page-hero h1 { font-size: clamp(24px, 3.4vw, 36px); margin-top: 12px; }
.page-hero .lead { margin-top: 14px; max-width: 46em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { font-family: var(--round); font-weight: 700; font-size: 12.5px; color: var(--cobalt); background: #fff; border: 2px solid var(--sky); padding: 3px 14px; border-radius: 999px; }
.page-hero .peng { position: absolute; right: 6%; bottom: -6px; width: 150px; }

/* セクション */
section.sec { padding: 72px 0; }
section.sec.sky { background: var(--sky2); }
.head { margin-bottom: 30px; }
.head .en { font-family: var(--round); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; color: var(--cobalt); }
.head h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 4px; }
.head p { margin-top: 8px; color: var(--sub); max-width: 46em; }
.card { background: #fff; border-radius: 24px; box-shadow: 0 10px 30px rgba(31,42,61,.07); }
h3.sub { font-size: 18px; margin: 36px 0 14px; }
h3.sub:first-child { margin-top: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--round); font-weight: 800; letter-spacing: 0.05em; text-decoration: none; border-radius: 999px; padding: 13px 24px; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.main { background: var(--cobalt); color: #fff; box-shadow: 0 8px 20px rgba(52,91,141,.22); }
.btn.main:hover { background: var(--cobalt-dark); }
.btn.sub { background: #fff; color: var(--cobalt); border: 2px solid var(--cobalt); }
.btn.sub:hover { background: var(--sky2); }

/* 表 */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(31,42,61,.06); }
.tbl th, .tbl td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: none; }
.tbl thead th { background: var(--navy); color: #fff; font-family: var(--round); font-weight: 700; font-size: 13px; }
.tbl tbody th { width: 170px; font-family: var(--round); font-weight: 700; color: var(--navy); background: #F6FAFE; }
.tbl td.num { text-align: right; white-space: nowrap; }
ul.dot { margin: 0; padding: 0; list-style: none; }
ul.dot li { position: relative; padding-left: 20px; }
ul.dot li + li { margin-top: 6px; }
ul.dot li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); }
.callout { background: #fff; border-left: 4px solid var(--aqua); border-radius: 0 16px 16px 0; padding: 16px 20px; font-size: 14px; }
.note { margin-top: 12px; font-size: 12px; color: var(--sub); }

footer { background: #F2F9FE; padding: 24px 0 34px; font-size: 12px; color: var(--sub); }
footer .wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  header.top nav a:not(.cta) { display: none; }
}
@media (max-width: 640px) {
  header.top { top: 10px; }
  header.top .in { height: 54px; }
  .brand img { width: 34px; height: 34px; }
  .page-hero { padding-top: 100px; }
  .page-hero .peng { display: none; }
  section.sec { padding: 56px 0; }
  .tbl tbody th { width: 104px; }
  .tbl th, .tbl td { padding: 11px 12px; }
}