/* ゆる時短ごはん：サイト共通スタイル
   ピン画像と同じ配色（クリーム＋オレンジ）。フォントは端末標準＋Google Fontsの見出し */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700;900&display=swap');

:root{
  --bg:#FFF8F0; --card:#FFFFFF; --ink:#3D3128; --muted:#7A6A5C;
  --accent:#E0703C; --accent-weak:#FFF1E2; --line:#E4D5C4; --ok:#5C8374;
  --wrap:760px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); line-height:1.85;
  font-family:'Hiragino Sans','Yu Gothic UI','Meiryo',system-ui,sans-serif;
  font-size:17px; -webkit-text-size-adjust:100%;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ヘッダー */
header{background:var(--card); border-bottom:3px solid var(--line); padding:16px 0}
header .bar{display:flex; align-items:center; justify-content:space-between; gap:16px}
header .logo{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:21px;
  color:var(--ink); text-decoration:none; line-height:1.3}
header .logo span{color:var(--accent)}
header nav{display:flex; gap:18px; flex-wrap:wrap}
header nav a{color:var(--muted); text-decoration:none; font-size:15px; font-weight:700}
header nav a:hover{color:var(--accent)}

/* 見出し */
h1,h2,h3{font-family:'Zen Maru Gothic',sans-serif; line-height:1.4}
h1{font-size:31px; font-weight:900; margin:28px 0 12px}
h2{font-size:24px; font-weight:900; margin:40px 0 14px; padding-left:14px;
   border-left:7px solid var(--accent)}
h3{font-size:20px; font-weight:700; margin:28px 0 10px}
p{margin:14px 0}
a{color:#B4541F}

/* 記事 */
.meta{color:var(--muted); font-size:14px; margin-bottom:8px}
.lead{background:var(--accent-weak); border-radius:16px; padding:18px 20px; margin:20px 0;
  font-weight:700}
article ul,article ol{margin:14px 0 14px 22px}
article li{margin:7px 0}

/* PR表記 */
.pr{display:inline-block; background:var(--muted); color:#fff; border-radius:999px;
  font-size:12px; font-weight:700; padding:3px 12px; letter-spacing:.04em}
.pr-note{color:var(--muted); font-size:13px; margin:10px 0 0}

/* 表 */
.table-wrap{overflow-x:auto; margin:20px 0; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:520px; background:var(--card);
  border-radius:14px; overflow:hidden; font-size:15px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
th{background:var(--accent-weak); font-weight:700; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num{text-align:right; white-space:nowrap}

/* 比較表：どの画面幅でもカード型にする（横スクロールをなくす）。
   スマホは1列、広い画面は2列に項目を並べる */
.cmp-wrap{overflow:visible}
table.cmp{min-width:0; background:transparent; border-radius:0; display:block}
table.cmp thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
table.cmp tbody{display:block}
table.cmp tbody tr{
  display:block; background:var(--card); border-radius:18px; padding:6px 18px 12px;
  margin-bottom:14px; box-shadow:0 4px 0 var(--line);
}
table.cmp td{
  display:block; padding:10px 0; border-bottom:1px dashed var(--line);
  text-align:left; font-size:16px; line-height:1.6;
}
table.cmp td::before{
  content:attr(data-label); display:block; margin-bottom:2px;
  font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.02em;
}
table.cmp td:last-child{border-bottom:none}
table.cmp td.num{text-align:left; white-space:normal}
table.cmp td.svc{
  font-family:'Zen Maru Gothic',sans-serif; font-size:21px; font-weight:900;
  color:var(--ink); border-bottom:3px solid var(--accent-weak); padding:10px 0 8px;
}
table.cmp td.svc::before{content:none}
table.cmp td br{display:none}
table.cmp td .sub{display:inline; font-size:14px; color:var(--muted)}

@media(min-width:620px){
  table.cmp tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:0 28px; padding:6px 22px 14px;
  }
  table.cmp td.svc{grid-column:1 / -1}
}

/* 図解画像（Pinterestに保存される縦長画像） */
figure.pin{margin:26px 0; text-align:center}
figure.pin img{width:100%; max-width:440px; height:auto; border-radius:18px;
  box-shadow:0 5px 0 var(--line)}
figure.pin figcaption{margin-top:10px; font-size:14px; color:var(--muted)}

/* カード・ボタン */
.card{background:var(--card); border-radius:20px; padding:22px; margin:18px 0;
  box-shadow:0 4px 0 var(--line)}
.btn{display:inline-block; background:var(--accent); color:#fff !important; font-weight:700;
  text-decoration:none; border-radius:999px; padding:13px 30px; margin:6px 0}
.btn:hover{filter:brightness(1.07)}
.btn.sub{background:var(--ok)}

/* 記事一覧 */
.posts{display:grid; gap:16px; margin:22px 0}
.post{background:var(--card); border-radius:20px; padding:20px; text-decoration:none;
  color:var(--ink); display:block; box-shadow:0 4px 0 var(--line)}
.post:hover{transform:translateY(-2px); transition:.15s}
.post .t{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:19px}
.post .d{color:var(--muted); font-size:14px; margin-top:6px}

footer{margin-top:56px; background:var(--card); border-top:3px solid var(--line);
  padding:26px 0 34px; color:var(--muted); font-size:14px}
footer a{color:var(--muted); margin-right:16px}

@media(max-width:560px){
  body{font-size:16px}
  h1{font-size:26px} h2{font-size:21px}
  header .bar{flex-direction:column; align-items:flex-start; gap:8px}
}