@charset "utf-8";
/* 家庭学習記事専用CSS。common.cssと他のページには影響しません。 */
.tips-main { color:#343434; }
.tips-main * { box-sizing:border-box; }
.tips-inner { max-width:1010px; margin:0 auto; padding-left:24px; padding-right:24px; }
.tips-hero { position:relative; overflow:hidden; background:linear-gradient(145deg,#fff8e1,#fffdfa 70%); border-bottom:1px solid #efe6ce; }
.tips-hero .tips-inner { position:relative; padding-top:30px; padding-bottom:76px; }
.tips-breadcrumb { display:flex; align-items:center; gap:12px; font-size:12px; color:#7a6b4a; margin-bottom:56px; }
.tips-breadcrumb a { text-decoration:underline; text-underline-offset:3px; }
.tips-eyebrow { font-family:Montserrat,sans-serif; font-size:13px; letter-spacing:.1em; font-weight:700; color:#8e741c; margin:0 0 15px; }
.tips-eyebrow span { background:#f4dd64; padding:4px 8px; border-radius:8px; margin-left:7px; color:#343434; }
.tips-hero h1 { font-size:clamp(27px,4.1vw,43px); line-height:1.48; letter-spacing:.025em; margin:0 0 24px; max-width:740px; }
.tips-hero-lead { font-size:16px; line-height:2; margin:0; color:#5d584c; max-width:630px; }
.tips-hero-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.tips-hero-chips span { border:1px solid #e8d99f; padding:8px 14px; border-radius:999px; font-size:12px; background:#fff; }
.tips-hero-figure { display:flex; align-items:center; justify-content:center; gap:10px; position:absolute; right:30px; bottom:38px; transform:rotate(-9deg); opacity:.7; }
.tips-hero-figure span { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#f4dd64; font:700 22px Montserrat,sans-serif; }
.tips-hero-figure b { font-size:20px; }
.tips-layout { padding-top:60px; padding-bottom:90px; }
.tips-article { max-width:790px; margin:0 auto; }
.tips-article h2 { font-size:clamp(21px,2.5vw,26px); line-height:1.6; }
.tips-article p { line-height:2.1; font-size:15px; color:#444; }
.tips-article strong { color:#463909; }
.tips-intro { padding:0 0 35px; }
.tips-intro h2 { margin:0 0 24px; }
.tips-intro p { margin:0 0 17px; }
.tips-toc { background:#fffaf0; border:1px solid #ede1c5; border-radius:18px; padding:26px 32px; margin:18px 0 68px; }
.tips-toc > p { margin:0 0 12px; font-size:15px; font-weight:700; color:#554a2b; }
.tips-toc ol { margin:0; padding-left:1.4em; }
.tips-toc li { font-size:14px; line-height:2.1; padding:3px 0; }
.tips-toc a { text-decoration:underline; text-decoration-color:#c8aa41; text-underline-offset:4px; }
.tips-section { margin-bottom:72px; scroll-margin-top:30px; }
.tips-step { font:700 13px Montserrat,sans-serif !important; color:#9a7c1c !important; letter-spacing:.12em; margin:0 0 12px !important; }
.tips-section h2 { padding:0 0 13px; margin:0 0 25px; border-bottom:3px solid #f4dd64; }
.tips-section > p { margin:0 0 19px; }
.tips-example { border-left:5px solid #f4dd64; background:#fff9e8; padding:23px 25px; border-radius:0 12px 12px 0; margin:26px 0; }
.tips-example-label { display:block; font-size:12px; color:#806715; font-weight:700; margin-bottom:9px; }
.tips-example p { font-size:16px; font-weight:700; margin:0; }
.tips-math { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; background:#fffaf0; border:1px solid #efe3bc; border-radius:16px; padding:28px 12px; margin:24px 0; }
.tips-math > div { min-width:65px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.tips-math > b { font-size:20px; color:#a58221; }
.tips-math small { font-size:12px; color:#695c40; }
.tips-math-dots { display:block; max-width:86px; text-align:center; color:#ba8f1a; font-size:21px; line-height:1.5; letter-spacing:1px; }
.tips-math strong { font:700 27px Montserrat,sans-serif; }
.tips-note { border-radius:16px; background:#f7f7f7; padding:25px 30px; margin:25px 0; }
.tips-note h3 { font-size:17px; margin:0 0 11px; }
.tips-note ul { padding-left:1.3em; margin:0; }
.tips-note li { line-height:2; font-size:14px; }
.tips-three { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:25px 0; }
.tips-three > div { border:1px solid #ede3cf; background:#fffdfa; padding:24px 18px 20px; border-radius:14px; }
.tips-three span { font:700 17px Montserrat,sans-serif; color:#a58a2c; }
.tips-three h3 { font-size:16px; line-height:1.55; margin:10px 0; }
.tips-three p { font-size:13px; line-height:1.9; margin:0; }
.tips-summary { background:#fff9e7; border-radius:20px; padding:35px; margin:40px 0 56px; }
.tips-summary h2 { margin:0 0 19px; }
.tips-summary p:last-child { margin-bottom:0; }
.tips-product { border:2px solid #edd574; border-radius:20px; padding:36px; margin-bottom:45px; }
.tips-product h2 { margin:0 0 22px; }
.tips-product p { margin:0 0 18px; }
.tips-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.tips-button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:12px 22px; font-size:14px; font-weight:700; line-height:1.5; text-align:center; }
.tips-button-main { background:#f4dd64; }
.tips-button-sub { border:1px solid #dfc35d; background:#fff; }
.tips-button:hover { filter:brightness(.96); }
.tips-bottom-links { padding:22px 0 0; border-top:1px solid #e5e5e5; display:flex; flex-direction:column; gap:11px; }
.tips-bottom-links p { font-size:15px; font-weight:700; margin:0 0 3px; }
.tips-bottom-links a { width:fit-content; font-size:14px; line-height:1.6; text-decoration:underline; text-underline-offset:3px; }
.tips-main a:focus-visible { outline:3px solid #a98824; outline-offset:3px; }
@media (max-width:800px) {
 .tips-inner { padding-left:18px; padding-right:18px; }
 .tips-hero .tips-inner { padding-top:20px; padding-bottom:52px; }
 .tips-breadcrumb { margin-bottom:40px; }
 .tips-hero h1 { margin-bottom:16px; }
 .tips-hero-lead { font-size:14px; }
 .tips-hero-figure { display:none; }
 .tips-hero-chips { margin-top:23px; }
 .tips-layout { padding-top:42px; padding-bottom:68px; }
 .tips-article p { font-size:14px; line-height:2; }
 .tips-toc { padding:22px 20px; margin:12px 0 54px; }
 .tips-toc li { font-size:13px; }
 .tips-section { margin-bottom:55px; }
 .tips-example { padding:20px 18px; }
 .tips-example p { font-size:14px; }
 .tips-math { gap:7px; }
 .tips-math > div { min-width:51px; }
 .tips-math-dots { font-size:16px; }
 .tips-three { grid-template-columns:1fr; }
 .tips-three > div { padding:20px; }
 .tips-note { padding:22px 20px; }
 .tips-summary { padding:26px 21px; }
 .tips-product { padding:27px 21px; }
 .tips-actions { flex-direction:column; }
 .tips-button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .tips-main * { scroll-behavior:auto !important; transition:none !important; } }

/* STEP 12: 先取り学習の記事専用の追加パーツ */
.tips-note-warm { background:#fffaf0; border:1px solid #efe3bc; }
.tips-note-warm h3:not(:first-child) { margin-top:22px; }
.tips-note-warm p { margin:0; font-size:14px; line-height:1.95; }
.tips-checklist { display:grid; gap:14px; margin:24px 0; }
.tips-checklist > div { display:flex; align-items:flex-start; gap:16px; border:1px solid #e9dfc4; padding:20px 22px; border-radius:14px; background:#fffdfa; }
.tips-checklist > div > span { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f4dd64; font-weight:700; }
.tips-checklist p { font-size:14px; margin:0; line-height:1.9; }
.tips-mini-summary { border-left:5px solid #e7c959; border-radius:0 12px 12px 0; padding:18px 23px; background:#fffaf0; margin:26px 0; }
.tips-mini-summary strong { font-size:14px; }
.tips-mini-summary p { font-size:14px; margin:7px 0 0; line-height:1.9; }
@media(max-width:800px) { .tips-checklist > div { padding:17px 16px; gap:12px; } .tips-checklist p, .tips-note-warm p { font-size:13px; } .tips-mini-summary { padding:17px 18px; } }