/* ============================================================
   韓国美容めでぃあ 共通CSS（TOP・記事一覧・固定ページ用）
   ※記事LP（articles/ 配下の記事ファイル）はCSS内蔵の自己完結型のため、このCSSは読み込まない
   ============================================================ */
:root{
  --accent:#e0637c;         /* ピンク（イメージカラー） */
  --accent-deep:#c24360;
  --accent-soft:#f6cdd7;
  --accent-bg:#fdf3f6;
  --text:#37393b;
  --muted:#6b6e71;
  --line-color:#ece2e6;
  --bg:#f0ebed;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Noto Sans JP",sans-serif;color:var(--text);background:var(--bg);
  line-height:1.85;font-size:15px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accent-deep);}

.site{max-width:640px;margin:0 auto;background:#fff;min-height:100vh;display:flex;flex-direction:column;}
.main{flex:1;}
.pad{padding:0 20px;}
.center{text-align:center;}
.small{font-size:.82em;color:var(--muted);}
.sp-l{height:36px;}
.sp-m{height:22px;}
.sp-s{height:12px;}

/* ヘッダー・ナビ */
.site-header{text-align:center;padding:20px 16px 14px;border-bottom:1px solid var(--line-color);}
.site-header .site-name{font-size:22px;font-weight:900;letter-spacing:.06em;color:var(--accent-deep);}
.site-header .site-name a{color:var(--accent-deep);text-decoration:none;}
.site-header .site-catch{font-size:11.5px;color:var(--muted);margin-top:2px;}
.site-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;
  font-size:12.5px;font-weight:700;padding:10px 14px;
  border-bottom:1px solid var(--line-color);background:var(--accent-bg);
}
.site-nav a{color:#555;text-decoration:none;}
.site-nav a:hover,.site-nav a.current{color:var(--accent-deep);}
.breadcrumb{font-size:12px;color:var(--muted);padding:12px 20px 0;}
.breadcrumb a{color:var(--muted);text-decoration:none;}

/* 見出し */
.h2{
  font-size:19px;font-weight:900;line-height:1.5;margin:0 20px;
  padding:12px 14px;background:var(--accent-bg);
  border-left:6px solid var(--accent);border-radius:0 6px 6px 0;
}
.page-title{font-size:21px;font-weight:900;line-height:1.55;padding:18px 20px 6px;}

/* 記事カード一覧 */
.post-list{display:grid;grid-template-columns:1fr;gap:14px;padding:0 20px;}
.post-card{
  display:flex;gap:12px;text-decoration:none;color:var(--text);
  border:1.5px solid var(--accent-soft);border-radius:12px;padding:12px;background:#fff;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(224,99,124,.18);}
.post-card .thumb{
  flex-shrink:0;width:96px;height:96px;border-radius:10px;overflow:hidden;
  background:var(--accent-bg);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--accent-deep);font-weight:700;font-size:10px;line-height:1.5;
}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card.soon .thumb{
  background:repeating-linear-gradient(45deg,#fdf1f4,#fdf1f4 12px,#f9e5eb 12px,#f9e5eb 24px);
  border:2px dashed var(--accent-soft);padding:6px;
}
.post-card .body{flex:1;min-width:0;}
.post-card .cat{display:inline-block;background:var(--accent-bg);color:var(--accent-deep);font-size:10.5px;font-weight:700;border-radius:3px;padding:1px 8px;}
.post-card .title{display:block;font-size:14.5px;font-weight:900;line-height:1.5;margin:4px 0 2px;}
.post-card .meta{font-size:11px;color:var(--muted);}
.post-card .excerpt{font-size:12px;color:#555;line-height:1.6;margin-top:4px;}
.post-card.soon{opacity:.65;pointer-events:none;}

/* コラム記事ページ */
.article-meta{font-size:11.5px;color:var(--muted);padding:0 20px;}
.article-meta .cat{display:inline-block;background:var(--accent-bg);color:var(--accent-deep);font-size:10.5px;font-weight:700;border-radius:3px;padding:1px 8px;margin-right:6px;}

/* 固定ページ本文 */
.page-body{padding:0 20px;font-size:13.5px;line-height:1.9;}
.page-body h2{font-size:16px;font-weight:900;margin:26px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--accent);display:inline-block;}
.page-body p{margin-bottom:1.2em;}
.page-body ul{margin:0 0 1.2em 1.4em;}

/* フッター */
.site-footer{background:#f4f6f5;text-align:center;padding:22px 18px;font-size:11.5px;color:var(--muted);line-height:1.8;}
.site-footer a{color:var(--accent-deep);}

/* ===== はるる装飾（記事本文用） ===== */
.mk{background:linear-gradient(transparent 58%, #fff14d 58%);font-weight:700;padding:0 2px;}
.mk-p{background:linear-gradient(transparent 58%, #f9d3de 58%);font-weight:700;padding:0 2px;}
.c-pink{color:var(--accent-deep);font-weight:700;}
.c-red{color:#e2304a;font-weight:700;}
.bubble{position:relative;display:inline-block;background:var(--accent-bg);border:1.5px solid var(--accent-soft);color:var(--accent-deep);font-size:13px;font-weight:700;padding:9px 14px;border-radius:14px;line-height:1.5;}
.bubble::after{content:"";position:absolute;bottom:-8px;left:24px;border:8px solid transparent;border-top-color:var(--accent-soft);border-bottom:0;}
.bubble-chat{display:flex;flex-direction:column;gap:14px;margin:0 0 1.4em;}
.bubble-chat .bubble{margin:0;}
.bubble-chat .bubble:nth-child(odd){align-self:flex-start;margin-left:4%;}
.bubble-chat .bubble:nth-child(even){align-self:flex-end;margin-right:4%;}
.bubble-chat .bubble:nth-child(even)::after{left:auto;right:24px;}
.checkbox{border:1.5px dashed var(--accent);border-radius:12px;padding:12px 18px;background:#fff;margin:0 0 1.4em;}
.checkbox ul{list-style:none;margin:0;}
.checkbox li{padding:10px 0 10px 26px;text-indent:-26px;font-weight:700;font-size:14px;color:#444;border-bottom:1px dashed #f3dbe2;line-height:1.7;}
.checkbox li:last-child{border-bottom:0;}
.checkbox li .ck{color:var(--accent);font-size:15px;margin-right:8px;}

/* ===== TOPページ専用（2026-07-23 個人ブログ風） ===== */
/* サイト説明行（h1・ヘッダー直下の一行） */
.top-desc{font-size:11.5px;font-weight:500;color:var(--muted);text-align:center;
  padding:10px 20px 0;line-height:1.7;}

/* はるるのあいさつ（アイコン＋吹き出し） */
.welcome{display:flex;gap:12px;align-items:flex-start;padding:16px 20px 0;}
.welcome .ava{flex-shrink:0;width:74px;height:74px;border-radius:50%;
  border:3px solid var(--accent-soft);object-fit:cover;}
.welcome-bubble{position:relative;flex:1;min-width:0;background:var(--accent-bg);
  border:1.5px solid var(--accent-soft);border-radius:14px;padding:12px 14px;
  font-size:12.5px;line-height:1.85;color:#555;}
.welcome-bubble::before{content:"";position:absolute;left:-9px;top:28px;
  border:8px solid transparent;border-right-color:var(--accent-soft);border-left:0;}
.welcome-bubble b{color:var(--accent-deep);}

/* カテゴリタグ */
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px;}
.tag{display:inline-block;background:#fff;border:1.5px solid var(--accent-soft);
  border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;
  color:var(--accent-deep);text-decoration:none;}
.tag:hover{background:var(--accent-bg);border-color:var(--accent);}

/* 目的別よみかたガイド（点線ボックス） */
.guide-box{border:1.5px dashed var(--accent);border-radius:12px;background:#fff;
  padding:14px 18px 8px;margin:0 20px 14px;}
.guide-box .gb-head{font-size:14px;font-weight:900;margin-bottom:2px;}
.guide-box .gb-lead{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:4px;}
.guide-box ul{list-style:none;}
.guide-box li{border-bottom:1px dashed #f3dbe2;}
.guide-box li:last-child{border-bottom:0;}
.guide-box li a{display:block;padding:8px 2px;font-size:13px;font-weight:700;color:var(--text);text-decoration:none;}
.guide-box li a::before{content:"✓ ";color:var(--accent);}
.guide-box li a:hover{color:var(--accent-deep);}

/* 控えめな「もっと見る」テキストリンク */
.more-link{text-align:right;padding:10px 22px 0;font-size:13px;font-weight:700;}
.more-link a{color:var(--accent-deep);text-decoration:none;}
.more-link a:hover{text-decoration:underline;}

/* はるるのプロフィール */
.profile-box{margin:0 20px;background:var(--accent-bg);border-radius:14px;
  padding:16px 18px;display:flex;gap:14px;align-items:center;}
.profile-box .ava{flex-shrink:0;width:64px;height:64px;border-radius:50%;
  border:3px solid #fff;object-fit:cover;}
.profile-box .pf-body{flex:1;min-width:0;font-size:12px;line-height:1.8;color:#555;}
.profile-box .pf-name{font-size:14px;font-weight:900;color:var(--accent-deep);}

/* PR注記 */
.pr-note{font-size:10px;color:var(--muted);text-align:right;padding:0 22px;}

/* 番号つきリスト（順番や対応関係があるとき用・2026-07-28追加）
   ※✓アイコンの .checkbox とは用途を分ける。番号は CSS カウンターで振るので
     本文に ①②③ を書かないこと（✓と数字が二重になるため） */
.numlist{border:1.5px solid var(--accent-soft);border-radius:12px;
  background:var(--accent-bg);padding:14px 18px;margin:0 0 1.4em;}
.numlist ol{list-style:none;margin:0;counter-reset:numlist;}
.numlist li{position:relative;counter-increment:numlist;
  padding:10px 0 10px 40px;font-size:14px;font-weight:700;color:#444;line-height:1.7;
  border-bottom:1px dashed var(--accent-soft);}
.numlist li:last-child{border-bottom:0;}
.numlist li::before{content:counter(numlist);position:absolute;left:0;top:12px;
  width:26px;height:26px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:13px;font-weight:900;text-align:center;line-height:26px;}

/* ============================================================
   記事本文の写真と表（共通テンプレ記事用・2026-07-28追加）
   ※LP型（kizilp_01/365mc/vvly）はCSS内蔵なのでこちらは使わない
   ============================================================ */

/* 写真＋キャプション */
.page-body .figure{margin:0 0 1.4em;}
.page-body .figure img{width:100%;height:auto;border-radius:12px;}
.page-body .figure figcaption{font-size:11px;color:var(--muted);text-align:center;
  margin-top:6px;line-height:1.6;}

/* 表（2026-07-28指示：★基本は2列で、各セルは1行に収まる短さにする。
   見出しは短くキーワードを意識する。3列や長文セルは折り返してしまうので使わない）
   .table-wrap / .spec.cols3 は、どうしても3列が要るときだけの逃げ道 */
.page-body .spec{width:100%;border-collapse:collapse;background:#fff;
  font-size:13.5px;line-height:1.7;margin:0 0 1.4em;}
.page-body .spec th,.page-body .spec td{border:1px solid var(--accent-soft);
  padding:9px 10px;text-align:left;vertical-align:top;}
.page-body .spec tbody th{background:var(--accent-bg);color:var(--accent-deep);
  font-weight:700;width:34%;}
.page-body .spec thead th{background:var(--accent);color:#fff;font-weight:700;
  text-align:center;width:auto;}
/* 3列の対応表は見出し列を狭く */
.page-body .spec.cols3 tbody th{width:19%;}
.page-body .spec caption{font-size:11.5px;color:var(--muted);text-align:left;
  margin-bottom:5px;}

/* 3列の表がはみ出す端末向けの横スクロール枠 */
.page-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;}
.page-body .table-wrap .spec{margin:0;min-width:460px;}

/* ============================================================
   PR記事（広告リンクを含む通常テンプレ記事）用
   ※LP型のPR記事（kizilp_01/365mc/vvly）はCSS内蔵なのでこちらは使わない
   ============================================================ */

/* パンくず直下のPR表記（ステマ規制対応・削除禁止。PR記事共通の控えめスタイル） */
.pr-disclosure{font-size:11px;color:#999;padding:8px 20px 0;text-align:right;}

/* 記事本文内のLINE CTA（アフィリエイトリンクは rel="sponsored nofollow noopener" 必須） */
.line-cta{border:2px solid var(--accent);border-radius:16px;background:var(--accent-bg);
  padding:16px 16px 14px;margin:0 0 1.4em;text-align:center;}
.line-cta .lead{font-size:14px;font-weight:900;color:var(--accent-deep);
  line-height:1.6;margin-bottom:10px;}
.line-cta .btn{display:block;background:#06c755;color:#fff;font-size:15px;font-weight:900;
  text-decoration:none;border-radius:999px;padding:13px 16px;line-height:1.4;
  box-shadow:0 4px 0 #05a648;}
.line-cta .btn:hover{background:#05b64c;}
.line-cta .btn:active{transform:translateY(2px);box-shadow:0 2px 0 #05a648;}
.line-cta .btn .sub{display:block;font-size:11.5px;font-weight:700;margin-top:3px;}
.line-cta .note{font-size:11px;color:var(--muted);line-height:1.7;margin-top:8px;}