/*
 * ユアブックス デザイン部品（2026-09 リニューアル）
 * 使い方・使う場面は DESIGN_NOTES.md「デザイン部品カタログ」を参照。
 * 各ページの <style> に古い吹き出しなどの定義が残っていても、
 * ここの定義が優先されるよう、必要なものは先頭に html を付けて強さを上げている。
 */

/* ===== 色（Tailwind の brand-* と同じ値） =====
   navy  #0c3553  締め色（紺）
   sky   #0ea5e9  メイン（空色）
   pink  #ff6b81  アクセント・ボタン
   lightBlue #f0f9ff 薄い青の背景 */

/* ===== 囲み：枠線＋ずらした影 ===== */
.box-line      { border: 2px solid #0c3553; box-shadow: 6px 6px 0 #0c3553; }
.box-line-sky  { border: 2px solid #0c3553; box-shadow: 6px 6px 0 #0ea5e9; }
.box-line-pink { border: 2px solid #0c3553; box-shadow: 6px 6px 0 #ff6b81; }
.box-line-thin { border: 2px solid #0c3553; }
.box-dash-pink { border: 2px dashed #ff6b81; }

/* ===== 背景：ドット柄 ===== */
.bg-dots      { background-color: #f0f9ff; background-image: radial-gradient(#bae6fd 1.6px, transparent 1.6px); background-size: 20px 20px; }
.bg-dots-navy { background-color: #0c3553; background-image: radial-gradient(rgba(255,255,255,.09) 1.6px, transparent 1.6px); background-size: 20px 20px; }

/* ===== 強調：文字に重ならない下線・マーカー ===== */
.marker-yellow { background: linear-gradient(transparent 70%, #fde68a 70%); padding: 0 .1em; }
.line-sky   { text-decoration: underline; text-decoration-color: #0ea5e9; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.line-pink  { text-decoration: underline; text-decoration-color: #ff6b81; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.line-white { text-decoration: underline; text-decoration-color: #fff;    text-decoration-thickness: 2px; text-underline-offset: 10px; }

/* ===== タグ：値札形（ボタンの丸い形と区別する） ===== */
.tag-point { display: inline-block; border-radius: 4px 0 0 4px; padding: .4rem 1.4rem .4rem .9rem; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }

/* ===== 切り替え：下向きの三角（親に position:relative） ===== */
.band-arrow { position: absolute; top: 0; left: 50%; width: 0; height: 0; margin-left: -28px; border-left: 28px solid transparent; border-right: 28px solid transparent; border-top: 22px solid var(--arrow, #f0f9ff); }

/* ===== 切り替え：波線（HTMLは DESIGN_NOTES.md のひな形を使う） ===== */
.wave { display: block; width: 100%; height: 2rem; }
@media (min-width: 768px) { .wave { height: 3.5rem; } }

/* ===== スクロールを促す矢印 ===== */
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.scroll-cue { animation: cueBounce 1.6s ease-in-out infinite; }

/* ===== 考え中の吹き出し（ふわふわ揺れる） ===== */
@keyframes floatBubble2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-8px) rotate(-1.2deg); } 75% { transform: translateY(-4px) rotate(1.2deg); } }
html .thought-bubble { animation: floatBubble2 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue, html .thought-bubble { animation: none; }
}

/* ===== 会話の吹き出し（輪郭つき・尻尾も輪郭つき） =====
   .speech-box / .speech-ng : お客さん・読者（グレー）
   .speech-box-reply        : ユアブックス（白＋空色の輪郭）
   尻尾：スマホ・タブレットは上の左寄り、PC（1024px〜）は横 */
html .speech-box, html .speech-ng, html .speech-box-reply { position: relative; border-radius: 1.25rem; padding: 1.25rem 1.5rem; border: 2px solid; box-shadow: none; }
html .speech-box, html .speech-ng { background: #f1f5f9; border-color: #94a3b8; }
html .speech-box-reply { background: #fff; border-color: #0ea5e9; }
html .speech-box::before, html .speech-box::after,
html .speech-ng::before, html .speech-ng::after,
html .speech-box-reply::before, html .speech-box-reply::after { content: ''; position: absolute; border-style: solid; z-index: 1; }
html .speech-box::before, html .speech-ng::before, html .speech-box-reply::before { top: -14px; left: 26px; right: auto; border-width: 0 10px 13px 10px; }
html .speech-box::after,  html .speech-ng::after,  html .speech-box-reply::after  { top: -10px; left: 28px; right: auto; border-width: 0 8px 11px 8px; z-index: 2; }
html .speech-box::before, html .speech-ng::before { border-color: transparent transparent #94a3b8 transparent; }
html .speech-box::after,  html .speech-ng::after  { border-color: transparent transparent #f1f5f9 transparent; }
html .speech-box-reply::before { border-color: transparent transparent #0ea5e9 transparent; }
html .speech-box-reply::after  { border-color: transparent transparent #fff transparent; }
@media (min-width: 1024px) {
  html .speech-box::before, html .speech-ng::before { top: 18px; left: -14px; border-width: 10px 13px 10px 0; border-color: transparent #94a3b8 transparent transparent; }
  html .speech-box::after,  html .speech-ng::after  { top: 20px; left: -10px; border-width: 8px 11px 8px 0;  border-color: transparent #f1f5f9 transparent transparent; }
  html .speech-box-reply::before { top: 18px; left: auto; right: -14px; border-width: 10px 0 10px 13px; border-color: transparent transparent transparent #0ea5e9; }
  html .speech-box-reply::after  { top: 20px; left: auto; right: -10px; border-width: 8px 0 8px 11px;  border-color: transparent transparent transparent #fff; }
}

/* ===== フォームの選択肢（料金シミュレーターなど） ===== */
html .form-label-group { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-radius: 12px; border: 2px solid #cbd5e1; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
html .form-label-group:hover { border-color: #0ea5e9; background: #fff; }
html .form-label-group:has(input:checked) { border-color: #0ea5e9; background: #f0f9ff; box-shadow: 3px 3px 0 #0ea5e9; }
html .form-label-group input[type="radio"], html .form-label-group input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; flex-shrink: 0; border: 2px solid #64748b; background: #fff; display: inline-grid; place-content: center; cursor: pointer; transform: none; transition: border-color .15s, background-color .15s; }
html .form-label-group input[type="radio"] { border-radius: 50%; }
html .form-label-group input[type="radio"]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #0ea5e9; transform: scale(0); transition: transform .15s; }
html .form-label-group input[type="radio"]:checked { border-color: #0ea5e9; }
html .form-label-group input[type="radio"]:checked::before { transform: scale(1); }
html .form-label-group input[type="checkbox"] { border-radius: 5px; }
html .form-label-group input[type="checkbox"]::before { content: ''; width: 12px; height: 12px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform .15s; }
html .form-label-group input[type="checkbox"]:checked { background: #0ea5e9; border-color: #0ea5e9; }
html .form-label-group input[type="checkbox"]:checked::before { transform: scale(1); }
html .form-label-group input:focus-visible { outline: 3px solid #bae6fd; outline-offset: 2px; }

/* ===== スマホ下部の固定ボタン分の余白 ===== */
@media (max-width: 1023px) { body.has-sticky-cta { padding-bottom: 76px; } }

/* ===== コラム記事の見出し（h2）：紺の太線＋薄い青の帯 ===== */
.article-h2 { background: #f0f9ff; border-left: 6px solid #0c3553; padding: .55rem 1rem; border-radius: 0 12px 12px 0; }

/* ===== 見出しの吹き出し：白地＋紺の枠、下の中央に尻尾 ===== */
.head-bubble { position: relative; display: inline-block; background: #fff; border: 2px solid #0c3553; border-radius: 1rem; padding: .7rem 1.4rem; margin-bottom: 14px; }
@media (min-width: 768px) { .head-bubble { padding: .9rem 2.4rem; } }
.head-bubble::before, .head-bubble::after { content: ''; position: absolute; left: 50%; border-style: solid; }
.head-bubble::before { bottom: -15px; margin-left: -13px; border-width: 15px 13px 0 13px; border-color: #0c3553 transparent transparent transparent; }
.head-bubble::after  { bottom: -11px; margin-left: -10px; border-width: 12px 10px 0 10px; border-color: #fff transparent transparent transparent; }

/* ===== コラム本文の読みやすさ（.article-body の中だけに効く） ===== */
.article-body section > p, .article-body > p { line-height: 2; margin-bottom: 1.5rem; }
.article-body section > h3 { margin-top: 2.5rem; }
/* 本文の中にそのまま置かれた箇条書きは、薄い水色のカードに載せる */
.article-body section > ul, .article-body section > ol { background: #f0f9ff; border: 2px solid #bae6fd; border-radius: 1rem; padding: 1.25rem 1.25rem .5rem; margin: 1.5rem 0 2rem; }
@media (min-width: 768px) { .article-body section > ul, .article-body section > ol { padding: 1.5rem 1.75rem .75rem; } }
.article-body section > ul > li, .article-body section > ol > li { margin-bottom: .9rem; line-height: 1.8; }

/* ===== 横向きの吹き出し（左に人物、右に吹き出し。尻尾は常に左） ===== */
.bubble-left { position: relative; background: #fff; border: 2px solid #94a3b8; border-radius: 1rem; padding: .9rem 1.1rem; }
.bubble-left::before, .bubble-left::after { content: ''; position: absolute; top: 50%; border-style: solid; }
.bubble-left::before { left: -13px; margin-top: -10px; border-width: 10px 13px 10px 0; border-color: transparent #94a3b8 transparent transparent; }
.bubble-left::after  { left: -9px;  margin-top: -8px;  border-width: 8px 10px 8px 0;  border-color: transparent #fff transparent transparent; }

/* 波線と隣のセクションの境目に、スマホで1pxのすき間（白い線）が出ないよう1px重ねる */
svg.wave { margin-bottom: -1px; position: relative; z-index: 1; }
svg.wave[style*="scaleY(-1)"] { margin-bottom: 0; margin-top: -1px; }

/* ===== 横ずれ防止：iPhoneで勢いよくスクロールしたとき横に揺れるのを防ぐ =====
   overflow-x: hidden だと iOS Safari では横にも動ける箱として扱われるため、
   対応ブラウザでは clip（切り取り）にする。各ページの <style> より優先されるよう :root を付けている */
@supports (overflow-x: clip) {
  html:root, html:root body { overflow-x: clip; }
}