/* mobile.css — for screens up to ~640px */ @media (min-width: 641px){ body { max-width: 560px; margin: 0 auto; } } * { box-sizing: border-box; } html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; } body { background-color:#f1f8e9; color:#333; line-height:1.8; } header { background:#558b2f; color:#fff; padding:18px 16px; text-align:center; } header h1 { font-size:1.25rem; margin:0 0 4px; } header p { margin:0; font-size:.9rem; opacity:.95; } main { padding:16px; } h2 { color:#33691e; font-size:1.1rem; margin:0 0 .5rem; } p, li { font-size:1rem; } ul { padding-left:1.1rem; } .card { background:#fff; border:1px solid #c5e1a5; border-radius:12px; padding:16px; margin:12px 0; } .hero-img { width:100%; height:auto; border-radius:10px; display:block; } .notice { color:#33691e; font-weight:600; margin-top:.4rem; } footer { background:#33691e; color:#fff; text-align:center; padding:14px; font-size:.9rem; } .navbar { position:sticky; bottom:0; width:100%; background:#ffffff; border-top:1px solid #c5e1a5; display:flex; } .navbar a { flex:1; text-align:center; padding:12px 4px; text-decoration:none; color:#33691e; font-weight:700; font-size:.95rem; } .navbar a:active { background:#e6f2d6; } a.tel, a.mail { display:inline-block; padding:8px 10px; border:1px solid #c5e1a5; border-radius:8px; text-decoration:none; color:#33691e; font-weight:700; } .mono { font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; } .small { font-size:.92rem; color:#445; } .center { text-align:center; } /* 画像は枠内で縮む */ img { max-width: 100%; height: auto; } /* PC/タブレット向けの拡張（幅768px以上） */ @media (min-width: 768px) { /* セクション幅を広げる（内部CSSの max-width:800px を上書き） */ section { max-width: 960px; } /* 画像ブロックは中央寄せ＋余白 */ .image-block { max-width: 960px; margin: 0 auto; padding: 20px; } /* 画像ははみ出さない */ .image-block img, img { max-width: 100%; height: auto; } }