:root {
--pink: #ff3b7f;
--pink-pale: #fff0f6;
--purple: #6c4ef6;
--purple-light: #ede9fe;
--dark: #1a1033;
--gray: #6b7280;
--gray-light: #f8f7ff;
--border: rgba(108, 78, 246, 0.12);
--radius: 20px;
--radius-sm: 12px;
/*
* 価格・数値用の書体。Barlow は header.php で太字（700）のみ読み込んでいる。
* 欧文フォントには和文がないため、混ざった和文は Noto Sans JP で表示させる。
*/
--font-num:
"Barlow Semi Condensed", "DIN Alternate", "Arial Narrow", "Noto Sans JP",
sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/*
* iOS Safari のフォント自動拡大（Text Autosizing）を止める。
*
* 既定値の auto のままだと、横に長いブロックコンテナ（記事内の
* display: block + white-space: nowrap なテーブルなど）の中身を
* 端末が勝手に拡大し、指定した font-size が無視される。
* none はピンチズーム後の再レイアウトを阻害するため 100% を使う。
*/
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: "Noto Sans JP", sans-serif;
background: #fdfcff;
color: var(--dark);
overflow-x: hidden;
line-height: 1.6;
}
/* 数字を価格用の書体で見せたい要素に付ける。例: 39,800 */
.sp {
display: none;
}
/*
* 視覚的には隠すが、検索エンジンとスクリーンリーダーには読ませる。
* display:none / visibility:hidden は読まれなくなるため使用しないこと。
*/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@media (max-width: 767px) {
.pc {
display: none;
}
.sp {
display: block;
}
}
/* ── NAV ── */
/*
* サイトヘッダーのナビ。
*
* 要素セレクタ（nav）だと、パンくず・目次・カテゴリナビ・ページャなど
* 下層ページ側の