/* =============================================================
   p.css ── 提案ページ本体（「社長の机に置く1冊の提案書」・README §11-1）
   色は提案する側（OKOME合同会社）＝紺＋白＋青1色。案のページ（御社の色）と色で分ける。
   ============================================================= */
:root {
  --ink: #1B2533; --mute: #4D5868; --line: #DCE2EA; --soft: #F3F6FA;
  --navy: #13243D; --blue: #1D5FBF; --blue-dark: #164A96;
  --ok: #1B7A4B; --font-en: "Jost", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans JP", sans-serif; color: var(--ink); background: #FFFFFF; line-height: 1.85; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.inner { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }

.p-top { border-bottom: 1px solid var(--line); }
.p-top .inner { display: flex; justify-content: space-between; align-items: center; min-height: 60px; padding-block: 8px; gap: 16px; }
.p-top .brand { font-weight: 700; font-size: 16px; letter-spacing: 1px; }  /* 名義が和文（OKOME合同会社）になったので英字の書体をやめる */
.p-top .doc { font-size: 13px; color: var(--mute); }
.p-top .brand small { font-size: 12px; font-weight: 500; color: var(--mute); margin-left: 10px; letter-spacing: 0; }  /* 看板＝bakuDESIGN+・運営会社は添え書き（D459） */

/* 表紙 */
.p-cover { background: var(--navy); color: #FFFFFF; padding: 88px 0 80px; }
.p-cover .to { font-size: 18px; font-weight: 700; color: #FFFFFF; }
.p-cover h1 { font-size: 44px; font-weight: 700; line-height: 1.45; margin-top: 18px; }  /* 1行は12字までに書く（build.py の検査）。balance は日本語を語の途中で折るので使わない */
.p-head h2, .p-contact h2, .p-fact h3, .p-plan h3, .p-cover h1 { word-break: auto-phrase; }  /* balance と組み合わせて日本語を文節で折る（「なっ／た」のような語の途中を避ける。Chrome 119〜・他は通常の折り返し） */
.p-head h2, .p-contact h2 { text-wrap: balance; }
.p-cover .sum { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p-cover .sum div { border-top: 2px solid #FFFFFF; padding-top: 14px; }
.p-cover .sum .k { font-size: 13px; color: #FFFFFF; font-weight: 700; letter-spacing: 1px; }
.p-cover .sum .v { font-size: 16px; margin-top: 6px; color: #FFFFFF; }
.p-cover .meta { font-size: 14px; margin-top: 36px; color: #FFFFFF; }

/* 章 */
.p-sec { padding: 96px 0; }
.p-sec.alt { background: var(--soft); }
.p-head .no { font-family: var(--font-en); font-weight: 600; font-size: 14px; letter-spacing: 3px; color: var(--blue); }
.p-head h2 { font-size: 30px; font-weight: 700; line-height: 1.5; margin-top: 8px; }
.p-head p { font-size: 16px; color: var(--mute); margin-top: 12px; max-width: 46em; }

/* 01 今のホームページの事実（3枚） */
.p-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.p-fact { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #FFFFFF; display: flex; flex-direction: column; }
.p-fact .shot { aspect-ratio: 4 / 3; background: var(--soft); border-bottom: 1px solid var(--line); overflow: hidden; }
.p-fact .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.p-fact .body { padding: 22px 22px 26px; }
.p-fact .n { font-family: var(--font-en); font-weight: 600; color: var(--blue); font-size: 14px; letter-spacing: 2px; }
.p-fact h3 { font-size: 18px; font-weight: 700; line-height: 1.55; margin-top: 6px; text-wrap: balance; }  /* 最後の1字だけ落ちない（監査 batch2 W3） */
.p-fact p { font-size: 14px; color: var(--mute); margin-top: 10px; }
.p-fact .src { font-size: 12px; color: var(--mute); margin-top: 12px; }

/* 02 同業との差（表） */
.p-table-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #FFFFFF; border-radius: 14px; overflow: hidden; }  /* 列幅を揃える（監査 R1 W4） */
.p-table th:first-child { width: 32%; }
.p-table th, .p-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; text-align: center; vertical-align: middle; }
.p-table th { background: var(--navy); color: #FFFFFF; font-weight: 700; font-size: 13px; }
.p-table th:first-child, .p-table td:first-child { text-align: left; }
.p-table td:first-child { font-weight: 700; }
.p-table td.us { background: #FFF6E5; }
.p-table td { word-break: keep-all; }  /* 値は3字以内にそろえてあるので、語の途中で折らない（監査 batch2 W4） */
.p-table .y { color: var(--ok); font-weight: 700; }
.p-table .n { color: var(--mute); }
.p-note { font-size: 13px; color: var(--mute); margin-top: 14px; }

/* 03 3つの案 */
.p-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.p-plan { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #FFFFFF; display: flex; flex-direction: column; }
.p-plan .thumb { display: block; aspect-ratio: 16 / 11; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--soft); }
.p-plan .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.p-plan .body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.p-plan .tag { font-family: var(--font-en); font-weight: 600; font-size: 14px; letter-spacing: 2px; color: var(--blue); }
.p-plan h3 { font-size: 19px; font-weight: 700; margin-top: 4px; text-wrap: balance; }
.p-plan .for { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 10px; }
.p-plan .desc { font-size: 14px; color: var(--mute); margin-top: 8px; flex: 1; }  /* flex:1 は説明文だけ（p 全体に当てると説明の短い案で札の高さが伸びた） */
.p-plan a.go {
  margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 999px; border: 2px solid var(--blue); color: var(--blue);
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.p-plan a.go:hover, .p-plan:has(.thumb:hover) a.go { background: var(--blue); color: #FFFFFF; }  /* サムネに乗ってもボタンが反応する＝押せることが分かる（監査 R2 W13） */
.p-plan .thumb:hover img { opacity: 0.92; }
.p-plan a.go svg { width: 16px; height: 16px; }

/* 04 松竹梅 */
.p-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.p-tier { border: 1px solid var(--line); border-radius: 14px; background: #FFFFFF; padding: 30px 26px; display: flex; flex-direction: column; }
.p-tier.rec { border: 2px solid var(--blue); padding: 29px 25px; }  /* 枠が1px太いぶん内側を詰めて、3列の見出しの高さを揃える */
.p-tier .rk { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 1px; min-height: 22px; }
.p-tier h3 { font-size: 22px; font-weight: 700; margin-top: 6px; }
.p-tier .who { font-size: 14px; color: var(--mute); margin-top: 6px; }
.p-tier .yen { font-family: var(--font-en); font-size: 36px; font-weight: 600; margin-top: 18px; line-height: 1.2; }
.p-tier .yen small { font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; color: var(--mute); margin-left: 4px; }
.p-tier .mo { font-size: 14px; color: var(--ink); margin-top: 6px; font-weight: 700; }
.p-tier ul { list-style: none; margin-top: 20px; border-top: 1px solid var(--line); flex: 1; }
.p-tier li { font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.p-tier li svg { width: 16px; height: 16px; stroke: var(--ok); flex: none; margin-top: 4px; }
.p-terms { margin-top: 28px; font-size: 14px; color: var(--mute); }
.p-terms li { margin-left: 1.2em; }

/* 05 進め方 */
.p-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.p-step { border-top: 3px solid var(--blue); padding-top: 18px; }
.p-step .n { font-family: var(--font-en); font-weight: 600; font-size: 28px; color: var(--blue); line-height: 1; }
.p-step h3 { font-size: 18px; font-weight: 700; margin-top: 12px; }
.p-step p { font-size: 14px; color: var(--mute); margin-top: 8px; }

/* 04 作る人（2026-10-29・左＝人と経歴／右＝これまでに作ったもの） */
.p-maker { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; margin-top: 44px; }
.p-maker > div { background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; }
.p-maker .role { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 1px; }
.p-maker .name { font-size: 26px; font-weight: 700; margin-top: 4px; letter-spacing: 2px; }
.p-maker dl { margin-top: 20px; border-top: 1px solid var(--line); }
.p-maker dl div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.p-maker dt { font-size: 15px; font-weight: 700; }
.p-maker dd, .p-maker li span, .p-q summary, .p-q p, .p-five, .p-cover .v, .p-cover .to, .p-step p, .p-contact p, .p-maker .cap, .p-maker .corp, .p-maker a.go, .p-tier li span, .p-tier .who, .p-terms li, .p-head p, .p-fact p, .p-plan .desc, .p-foot span, .p-company dd { word-break: auto-phrase; text-wrap: pretty; }  /* 短い文で1字だけ次の行に落ちない（監査 batch2 R2 W9・web v1 W2） */  /* 文節で折る＝1字だけ次の行に落ちにくくする */
.p-maker dd { font-size: 14px; color: var(--mute); margin-top: 2px; }
.p-maker .corp { font-size: 13px; color: var(--mute); margin-top: 16px; }
.p-maker .corp a { color: var(--blue); font-weight: 700; }
.p-maker .cap { font-size: 14px; font-weight: 700; }
.p-maker ul { list-style: none; margin-top: 12px; border-top: 1px solid var(--line); }
.p-maker li { font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.p-maker li svg { width: 16px; height: 16px; stroke: var(--ok); flex: none; margin-top: 4px; }
.p-maker a.go { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--blue); min-height: 44px; }
.p-maker a.go svg { width: 16px; height: 16px; flex: none; }
.p-maker a.go:hover { color: var(--blue-dark); }

/* 07 よくあるご質問（開閉。開くと答えが出る） */
.p-faq { margin-top: 36px; border-top: 1px solid var(--line); max-width: 820px; }
.p-q { border-bottom: 1px solid var(--line); }
.p-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font-size: 16px; font-weight: 700; min-height: 48px; }
.p-q summary::-webkit-details-marker { display: none; }
.p-q summary::after { content: "+"; flex: none; font-family: var(--font-en); font-size: 22px; font-weight: 500; color: var(--blue); line-height: 1; }
.p-q[open] summary::after { content: "−"; }
.p-q summary:hover { color: var(--blue); }
.p-q p { font-size: 15px; color: var(--mute); padding: 0 4px 22px; }

/* 相談 */
.p-contact { background: var(--navy); color: #FFFFFF; padding: 88px 0; }
.p-contact h2 { font-size: 30px; font-weight: 700; line-height: 1.5; }
.p-contact p { font-size: 16px; margin-top: 12px; color: #FFFFFF; max-width: 40em; }
.p-contact .btn {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 32px;
  background: #FFFFFF; color: var(--navy); border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none;
}
.p-contact .btn:hover { background: #E6EBF2; }
.p-contact .picks { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.p-contact .picks .btn { margin-top: 0; }
.p-contact .pick { padding-top: 8px; padding-bottom: 8px; }  /* 案の名前を2行目に＝1行に詰めると「い」だけ次の行に落ちた（7px 掃引） */
.p-contact .pick .t { display: flex; flex-direction: column; line-height: 1.4; text-align: left; }
.p-contact .pick small { font-size: 13px; font-weight: 500; }
.p-contact .how { font-size: 15px; margin-top: 14px; }
.p-five { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--ink); background: #FFFFFF; border-left: 3px solid var(--blue); padding: 12px 16px; }
.p-contact .btn svg { width: 18px; height: 18px; }
.p-contact .addr { font-size: 16px; margin-top: 16px; color: #FFFFFF; }
.p-contact .addr a { font-weight: 700; color: #FFFFFF; white-space: nowrap; }  /* アドレスを途中で割らない（監査 R2 W11） */
.p-contact .small { font-size: 14px; margin-top: 24px; color: #FFFFFF; }

.p-foot { padding: 36px 0 48px; font-size: 13px; color: var(--mute); }
.p-foot .inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .inner { width: calc(100% - 32px); }
  .p-top .doc { display: none; }
  .p-top .brand small { display: block; margin-left: 0; line-height: 1.4; }  /* スマホは2段＝1行だと343px に収まらない */
  .p-cover { padding: 56px 0 52px; }
  .p-cover h1 { font-size: 28px; }
  .p-cover .sum { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .p-sec { padding: 60px 0; }
  .p-head h2 { font-size: 23px; }
  .p-head p { font-size: 15px; }
  .p-facts, .p-plans, .p-price, .p-steps, .p-maker { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .p-maker > div { padding: 24px 20px; }
  .p-q summary { font-size: 15px; padding: 16px 2px; }
  /* 比較表はスマホでも5列を1画面に収める（横スクロールだと同業の列があることに気づけない） */
  .p-table th, .p-table td { padding: 10px 4px; font-size: 12px; line-height: 1.5; }
  .p-table th:first-child, .p-table td:first-child { padding-left: 10px; }
  .p-tier .rk:empty { display: none; }
  /* スマホでは案のスマホ画面を縦長（3:4）で見せる（横長に切ると見出しが入らない）。
     絵の幅は 360px まで＝601〜900px で画面いっぱいに伸びない・原寸（600px）を超えて拡大しない（監査 R2 W9） */
  .p-plan .thumb { aspect-ratio: auto; }
  .p-plan .thumb picture { display: block; }
  .p-plan .thumb img { width: 100%; max-width: 360px; height: auto; aspect-ratio: 3 / 4; margin: 0 auto; }
  .p-table th { word-break: keep-all; }  /* 見出しを語の途中で折らない（監査 R2 W10） */  /* 1列では揃える相手がいないので空の札の高さを消す（監査 R1 W8） */
  .p-contact { padding: 60px 0; }
  .p-contact h2 { font-size: 23px; }
  .p-contact .btn { width: 100%; justify-content: center; }
  .p-contact .picks { gap: 10px; margin-top: 24px; }
}
/* 481〜900px は1列だとカードが画面の7〜8割を超える（スマホの 480px 以下は縦長の画面を読める大きさで見せるのを優先）＝サムネを左・説明を右の横長にする（監査 R2 W9） */
@media (min-width: 481px) and (max-width: 900px) {
  .p-plan { flex-direction: row; }
  .p-plan .thumb { flex: none; width: 240px; border-bottom: 0; border-right: 1px solid var(--line); }
  .p-plan .thumb img { max-width: none; }
}
@media (max-width: 360px) {
  .p-contact h2 { font-size: 21px; }  /* 1字だけ次の行に落ちない大きさ（監査 R2 W11） */
}

/* okome-agent.com/web だけ：会社概要の表 */
.p-company { margin-top: 36px; border-top: 1px solid var(--line); max-width: 820px; }
.p-company div { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.p-company dt { font-size: 15px; font-weight: 700; }
.p-company dd { font-size: 15px; color: var(--mute); overflow-wrap: anywhere; }
.p-company dd a { color: var(--blue); font-weight: 700; }
@media (max-width: 900px) { .p-company div { grid-template-columns: 1fr; gap: 2px; } }

/* 上の帯の右の相談の入口（監査 web v1 W1＝相談のボタンが最後にしか無かった） */
.p-top .top-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--blue); color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.p-top .top-cta:hover { background: var(--blue-dark); }
.p-top .top-cta svg { width: 16px; height: 16px; flex: none; }
.p-top .brand { white-space: nowrap; }  /* 320px で「OKOME合同／会社」と社名の途中で折れた */
@media (max-width: 400px) { .p-top .top-cta .l { display: none; } .p-top .top-cta { padding: 0 14px; } }