/* =====================================================================
 * 美容しよ～っと：韓国風のポップな見た目（2026-11-13 カツ「デザインを大阪閉校ノートにして、尚且つ、美容系の機器・商品のイラストなどを掲載 見た目をポップな、韓国風にして」）
 *   形は大阪閉校ノート（k-tokens・k-editorial・k-base・k-qj＝写し）。ここで色・書体・飾りだけを入れ替える。
 *   色＝パステル（ピンク・ラベンダー・ミント・バター）＋濃いプラムの字。書体＝Zen Maru Gothic（丸ゴシック）・英字は Fredoka。
 *   飾り＝チェックの地・ハートときらめきのシール・丸い札・ずらした影。文章のまとまりは箱にしない（[875]）＝箱はカードと絵だけ
 * ===================================================================== */
:root {
  --k-ink: #3b2a3a; --k-sub: #6e5a6b;
  --k-pink: #ff8fb3; --k-pink-d: #e85b8f; --k-pink-s: #ffe3ec;
  --k-lilac: #b9a2ff; --k-lilac-s: #efe9ff;
  --k-mint: #8fe3c8; --k-mint-s: #defaef;
  --k-butter: #ffe37a; --k-cream: #fffafc;
  --qj-ink: var(--k-ink); --qj-blue: var(--k-pink-d); --qj-pink: var(--k-pink-d); --qj-yellow: var(--k-butter); --qj-sub: var(--k-sub); --paper: var(--k-cream);
  --accent: var(--k-pink-d); --ink: var(--k-ink); --ink-2: var(--k-sub);
  --band-1: var(--k-lilac-s); --band-2: var(--k-mint-s);
  --font-ja: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN", sans-serif;
  --font-en: "Fredoka", "Zen Maru Gothic", sans-serif;
  --font-serif: "Fredoka", "Zen Maru Gothic", sans-serif;
}
body { font-family: var(--font-ja); color: var(--k-ink); background-color: var(--k-cream);
  background-image: linear-gradient(45deg, rgba(255, 143, 179, .07) 25%, transparent 25%, transparent 75%, rgba(255, 143, 179, .07) 75%),
                    linear-gradient(45deg, rgba(255, 143, 179, .07) 25%, transparent 25%, transparent 75%, rgba(255, 143, 179, .07) 75%);
  background-size: 36px 36px; background-position: 0 0, 18px 18px; }
.qj-en, .qj-h, .qj-tag, .qj-more, .sec-head h2, .sec-head .more, .qj-new, .serif-i, .a-initial, .board-head, .sec-head .ja, .site-head .gnav a { font-style: normal; }
.qj-tag, .qj-more, .sec-head h2, .sec-head .more, .qj-new, .serif-i, .a-initial { font-family: var(--font-en); }
.board-head, .sec-head .ja, .site-head .gnav a, .klee { font-family: var(--font-ja); font-weight: 700; }

/* ---- 頭：白・ピンクの細線・丸い検索・メニューはラベンダーの帯に丸い札 ---- */
.site-head { background: #fff; border-bottom: 3px solid var(--k-pink); }
.k-logo { display: grid; justify-items: center; line-height: 1.15; text-decoration: none; }
.k-logo small { font-size: 13px; font-weight: 700; color: var(--k-pink-d); letter-spacing: .08em; }
.k-logo b { font-family: var(--font-ja); font-weight: 900; font-size: 28px; color: var(--k-ink); letter-spacing: .02em; }
.k-logo--foot b { color: #fff; } .k-logo--foot small { color: var(--k-butter); }
.qj-search { border: 2px solid var(--k-ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--k-pink); padding-left: 6px; }
.qj-search button { background: var(--k-pink-d); }
.head-row > a.icon-btn[href="/notes/"] { display: none; grid-column: 3; justify-self: end; }
@media (max-width: 760px) { .head-row > a.icon-btn[href="/notes/"] { display: inline-grid; } }
.site-head .gnav { background: var(--k-lilac-s); border-top: 2px solid var(--k-ink); border-bottom: 2px solid var(--k-ink); }
.site-head .gnav ul { gap: 6px; padding: 8px 12px; flex-wrap: nowrap; }
.site-head .gnav a { color: var(--k-ink); font-size: 15px; padding: 6px 16px; border-radius: 999px; }
.site-head .gnav a[aria-current="page"], .site-head .gnav a:hover { color: #fff; background: var(--k-pink-d); }

/* ---- メインビジュアル：黒板 → パステルのチェックの面・白いカード・ハートのシール ---- */
.hero.k-hero { border: 0; box-shadow: none; padding: 82px 0 70px;
  background: radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .7) 0 70px, transparent 71px), radial-gradient(circle at 88% 78%, rgba(255, 255, 255, .55) 0 90px, transparent 91px),
              conic-gradient(from 0deg at 50% 50%, var(--k-pink-s) 0 25%, #fff 0 50%, var(--k-pink-s) 0 75%, #fff 0) 0 0 / 56px 56px; }
.hero.k-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(239, 233, 255, .55), rgba(255, 227, 236, .35)); pointer-events: none; }
.hero.k-hero > .slider { position: relative; z-index: 1; }
.k-hero .board-head { z-index: 2; }
.k-hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.k-hero .board-head { color: var(--k-ink); text-shadow: none; }
.k-hero .board-title { font-weight: 900; border: 0; background: #fff; border: 2px solid var(--k-ink); border-radius: 999px; padding: 4px 22px 6px; box-shadow: 4px 4px 0 var(--k-pink); font-size: clamp(18px, 2.2vw, 28px); letter-spacing: .04em; }
.k-hero .board-title i { font-style: normal; color: var(--k-pink-d); }
.k-hero .board-date { font-size: clamp(13px, 1.2vw, 16px); background: rgba(255, 255, 255, .85); border-radius: 14px; padding: 6px 12px; }
.k-hero .slide > a { border: 2px solid var(--k-ink); border-radius: 22px; overflow: hidden; box-shadow: 7px 7px 0 var(--k-lilac); }
.k-hero .slide > a::before { content: "♡"; left: 18px; top: -2px; width: auto; height: auto; background: none; box-shadow: none; color: var(--k-pink-d); font-size: 28px; border-radius: 0; z-index: 4; }
.k-hero .slide > a::after { content: "✦"; right: 18px; top: 2px; width: auto; height: auto; background: none; box-shadow: none; color: var(--k-butter); font-size: 26px; -webkit-text-stroke: 1px var(--k-ink); border-radius: 0; z-index: 4; }
.k-hero .slide-text h2 { color: var(--k-ink); font-weight: 900; }
.k-hero .slider-ctrl { border-top-color: rgba(59, 42, 58, .2); }
.k-hero .slider-ctrl .arrow { color: var(--k-ink); }
.k-hero .dots button { background: rgba(59, 42, 58, .2); border-radius: 999px; }
.k-hero .dots button[aria-current="true"] { background: var(--k-pink-d); }
.k-hero-deco i { position: absolute; font-style: normal; color: var(--k-pink); font-size: 34px; opacity: .8; pointer-events: none; }
.k-hero-deco i:nth-child(1) { left: 4%; top: 38%; } .k-hero-deco i:nth-child(2) { left: 9%; bottom: 14%; color: var(--k-lilac); }
.k-hero-deco i:nth-child(3) { right: 5%; top: 30%; color: var(--k-mint); } .k-hero-deco i:nth-child(4) { right: 9%; bottom: 18%; color: var(--k-butter); -webkit-text-stroke: 1px var(--k-ink); }
.k-soon { background: var(--k-ink) !important; }

/* ---- 札・NEW・波線・日付 ---- */
.qj-tag { background: var(--k-lilac); color: var(--k-ink); border-radius: 999px; padding: 2px 12px; font-weight: 600; font-size: 13px; }
.qj-new { width: auto; height: auto; padding: 2px 12px; border-radius: 999px; border: 2px solid var(--k-ink); background: var(--k-butter); color: var(--k-ink); font-size: 13px; transform: rotate(-4deg); }
.qj-wave { background: radial-gradient(circle at 6px -2px, transparent 5px, var(--k-pink) 5.5px, var(--k-pink) 6.8px, transparent 7.3px) 0 0 / 12px 8px repeat-x; }
.qj-more { color: var(--k-pink-d); }
.qj-date, .grid4 .card time, .grid4 .card .card-soon { font-family: var(--font-en); font-size: 15px; color: var(--k-sub); }

/* ---- 見出し：丸い英字＋ピンクの下線・帯はパステルの吹き出し ---- */
.sec-head h2 { color: var(--k-ink); font-weight: 700; text-transform: none; font-size: clamp(40px, 5vw, 60px); }
.sec-head h2::after { height: 6px; background: var(--k-pink); clip-path: none; border-radius: 99px; right: auto; width: 1.6em; bottom: -6px; }
.sec-head .ja { background: none; margin: 14px 0 0; padding: 0; text-align: left; font-size: 17px; color: var(--k-sub); border: 0; }
.sec-head .more { color: var(--k-pink-d); }
.band-1 { background: var(--k-lilac-s); } .band-2 { background: var(--k-mint-s); }
.line-lead { color: var(--k-sub); margin: -6px 0 26px; }

/* ---- カード：白・丸い角・プラムの線・パステルのずらした影（テープは外す） ---- */
.grid4 .card { background: #fff; border: 2px solid var(--k-ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--k-pink); overflow: visible; }
.grid4 .card:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--k-lilac); }
.grid4 .card:nth-child(3n+3) { box-shadow: 5px 5px 0 var(--k-mint); }
.grid4 .card::before { content: none; }
.grid4 .card .ph { border-radius: 12px; overflow: hidden; }
.grid4 .card h3 { color: var(--k-ink); font-weight: 900; }
a.card:hover { transform: translate(-2px, -2px); }
.ai-badge { background: rgba(59, 42, 58, .78); border-radius: 999px; }
.card-soon { color: var(--k-sub); }

/* ---- 機器と薬のイラスト ---- */
.k-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.k-items a { display: grid; gap: 6px; text-decoration: none; color: var(--k-ink); text-align: center; }
.k-items__ph { display: block; aspect-ratio: 1; border: 2px solid var(--k-ink); border-radius: 50%; overflow: hidden; background: var(--k-pink-s); box-shadow: 4px 4px 0 var(--k-lilac); transition: transform .2s; }
.k-items li:nth-child(even) .k-items__ph { box-shadow: 4px 4px 0 var(--k-mint); background: var(--k-mint-s); }
.k-items__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-items a:hover .k-items__ph { transform: rotate(-3deg) scale(1.03); }
.k-items__cat { justify-self: center; font-size: 13px; font-weight: 700; background: var(--k-butter); border-radius: 999px; padding: 0 10px; margin-top: 4px; }
.k-items b { font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) { .k-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .k-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* ---- 種類から探す ---- */
.k-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.k-kinds a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ph ph" "b em" "s s"; gap: 4px 10px; padding: 10px 12px 14px; background: #fff; border: 2px solid var(--k-ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--k, var(--k-pink)); text-decoration: none; color: var(--k-ink); }
.k-kinds__ph { grid-area: ph; display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.k-kinds__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-kinds b { grid-area: b; font-size: 18px; font-weight: 900; }
.k-kinds em { grid-area: em; font-style: normal; font-family: var(--font-en); font-weight: 600; color: var(--k-pink-d); align-self: center; }
.k-kinds small { grid-area: s; font-size: 14px; color: var(--k-sub); line-height: 1.6; }
@media (max-width: 760px) { .k-kinds { grid-template-columns: 1fr 1fr; gap: 12px; } .k-kinds b { font-size: 15px; } }

/* ---- 一覧：種類の丸い札・検索 ---- */
.k-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.k-pills a { padding: 5px 16px; border: 2px solid var(--k-ink); border-radius: 999px; background: #fff; color: var(--k-ink); text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 3px 3px 0 var(--k, var(--k-lilac)); }
.k-pills a[aria-current="true"] { background: var(--k-pink-d); color: #fff; }
.k-find { display: flex; gap: 8px; margin: 0 0 28px; max-width: 520px; }
.k-find input { flex: 1; min-width: 0; font: inherit; padding: 9px 16px; border: 2px solid var(--k-ink); border-radius: 999px; background: #fff; }
.k-find button { font: inherit; font-weight: 700; padding: 9px 20px; border: 2px solid var(--k-ink); border-radius: 999px; background: var(--k-pink-d); color: #fff; cursor: pointer; }

/* ---- 記事 ---- */
.a-initial { color: var(--k-pink); -webkit-text-stroke: 0; font-weight: 700; }
.a-head .cat .serif-i { color: var(--k-pink-d); }
.a-meta a { color: var(--k-pink-d); }
.a-eye img { border-radius: 18px; border: 2px solid var(--k-ink); }
.a-shop { border-color: var(--k-ink); }
.a-toc { border-color: var(--k-pink); }
.k-prose .sec { margin: 0; }
.k-prose .sec__h, .k-prose h2 { font-weight: 900; color: var(--k-ink); border-bottom: 3px solid var(--k-pink); padding-bottom: 6px; margin: 2.2em 0 .8em; font-size: clamp(20px, 2.2vw, 26px); }
.k-prose .mycomment__h { font-size: 18px; font-weight: 900; color: var(--k-pink-d); margin: 1.6em 0 .6em; }
.k-prose .sum { padding-left: 1.3em; } .k-prose .sum li { margin: .4em 0; }
.k-prose .tbl-wrap, .k-prose .cmp-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.k-prose .tbl, .k-prose .cmp { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.7; }
.k-prose .tbl th, .k-prose .tbl td, .k-prose .cmp th, .k-prose .cmp td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid #ead9e3; }
.k-prose .tbl thead th, .k-prose .cmp thead th { border-top: 3px solid var(--k-ink); border-bottom: 2px solid var(--k-ink); }
.k-prose .cmp-note, .k-prose .refs { font-size: 15px; color: var(--k-sub); }
.k-prose .ref { color: var(--k-pink-d); text-decoration: none; }
.k-prose .tag--sample { margin-left: 8px; font-size: 13px; background: var(--k-butter); border-radius: 999px; padding: 0 10px; }
@media (max-width: 760px) { .k-prose .tbl, .k-prose .cmp { min-width: 560px; } }
.src-list a { color: var(--k-pink-d); }
.k-prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.k-prevnext a { padding: 6px 16px; border: 2px solid var(--k-ink); border-radius: 999px; text-decoration: none; color: var(--k-ink); font-weight: 700; background: #fff; }
.side-h .serif-i { color: var(--k-pink-d); }
.side-rank .n { background: var(--k-pink-d); border-radius: 50%; }
.tags a { border-radius: 999px; }

/* ---- 下層（このサイト・プライバシー・問い合わせ）の古い部品 ---- */
.k-sub .nart__title, .k-sub .nart__k { display: none; }
.k-sub .btn { display: inline-block; padding: 9px 22px; border: 2px solid var(--k-ink); border-radius: 999px; background: var(--k-pink-d); color: #fff; text-decoration: none; font-weight: 700; font: inherit; cursor: pointer; }
.k-sub .btn--ghost { background: #fff; color: var(--k-ink); }
.k-sub .field { margin: 0 0 18px; display: grid; gap: 6px; }
.k-sub .field input, .k-sub .field select, .k-sub .field textarea { font: inherit; padding: 10px 14px; border: 2px solid var(--k-ink); border-radius: 14px; background: #fff; width: 100%; box-sizing: border-box; }
.k-sub .req { font-size: 13px; color: #fff; background: var(--k-pink-d); border-radius: 999px; padding: 0 8px; }
.k-sub .alert { padding: 10px 14px; border-left: 4px solid var(--k-pink-d); background: #fff; }
.k-sub .hp { position: absolute; left: -9999px; }
.k-sub .field__err { color: #b3123f; font-size: 15px; }

/* ---- 足：濃いプラム・ハートの列 ---- */
.site-foot { background: var(--k-ink); background-image: none; }
.site-foot a, .site-foot .foot-h, .site-foot p, .site-foot span, .site-foot strong { color: #fff6fb; }
.site-foot .foot-h { font-family: var(--font-en); color: var(--k-pink) !important; }
.k-foot-deco { display: flex; justify-content: center; gap: 22px; padding-top: 18px; font-size: 22px; }
.k-foot-deco span { color: var(--k-pink) !important; } .k-foot-deco span:nth-child(even) { color: var(--k-butter) !important; }
.foot-cta { background: rgba(255, 255, 255, .08); border-color: var(--k-pink); border-radius: 18px; }
.foot-cta a { background: var(--k-pink); color: var(--k-ink) !important; border-radius: 999px; border: 0; font-weight: 700; }
.totop { background: var(--k-pink-d); } .totop:hover { background: var(--k-ink); }
.crumbs a { color: var(--k-pink-d); }
@media (max-width: 760px) {
  .k-hero .board-title { font-size: 15px; padding: 3px 14px 4px; white-space: nowrap; box-shadow: 3px 3px 0 var(--k-pink); }
  .k-hero .board-date { font-size: 12px; padding: 4px 8px; line-height: 1.4; white-space: nowrap; }
  .hero.k-hero { padding-top: 70px; }
}
/* 問い合わせの入力欄（下層の枠の中） */
.k-sub .field label { font-weight: 700; }
.k-sub .form { max-width: 640px; }
.k-sub .confirm { display: grid; grid-template-columns: 8em 1fr; gap: 8px 16px; }