/* 事例マンガの閲覧ページ。提供された画像の縦横比は変えない。
   パソコンでは画面より大きい時だけ幅に合わせて縮小し、拡大はしない（最大720px幅で表示）。
   スマホ・タブレットを縦に持ったとき（幅1024px以下・縦向き）は、端末の横幅いっぱいに表示する。横向きは拡大せず原寸で中央に表示（2026-10-22 ユーザー指示）
   配色はサイト本体と同じ白ベース＋金 */
body{margin:0;background:#faf8f3;color:#1f2633;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif}
header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#fff;border-bottom:2px solid #c4a265;font-size:14px}
header b{color:#a8844a;margin-right:8px}
header button{font:inherit;color:#fff;background:#c4a265;border:1px solid #c4a265;border-radius:20px;padding:4px 14px;cursor:pointer}
header button:hover{background:#a8844a;border-color:#a8844a}
main{text-align:center;padding:16px 0 40px}
main img{display:inline-block;width:auto;max-width:100%;height:auto;box-shadow:0 6px 18px rgba(60,45,20,.08)}
/* 古いブラウザでも画面からはみ出さないよう、min() は使わず、パソコンの広い画面でだけ上限720pxにする（2026-10-22） */
html,body{max-width:100%;overflow-x:hidden}
@media (min-width:1025px){main img{max-width:720px}}
header .logo{height:20px;width:auto;margin-right:auto}
header .t{margin-right:8px}
@media (max-width:480px){header .t{display:none}}

@media (max-width:1024px) and (orientation:portrait){main{padding:0 0 32px}main img{display:block;width:100%;max-width:none;box-shadow:none}}