/* ========================================================== ピーキュア 上書きCSS（style.css の後に読み込む） ・見出し h2〜h4 をピンクに（C-01）／本文16px（C-03）／お問い合わせフォームの横並び／著者ボックス・CTA ・見出し以外の既存の配色（リンク・メニュー・表・ボタン・フッター等）は変更しない ※見出しの色は :root の変数だけで変更できる。ピンクの正式コード確定後はここだけ書き換える（暫定値） ========================================================== */ :root{ --pc-brand:#D9457A; /* 文字色・強調（小さい文字でも読める濃さ） */ --pc-head:#EE5A8F; /* 見出し帯・ボタン・枠線（白文字が載る面。やわらかめ） */ --pc-head-deep:#E04683; /* 見出し帯グラデーションの濃い側 */ --pc-brand-strong:#C2336A; /* リンク・ホバー */ --pc-soft:#FBE0EA; /* メニューバーなどの淡い面 */ --pc-cream:#FFF4F7; /* ホバー・淡い背景 */ --pc-line:#EBD9DF; /* 罫線 */ --pc-accent:#F2A7C3; /* 区切り・装飾線 */ --pc-heading-ink:#6B3A4B; /* h3・h4の文字色 */ } /* ---------- C-03 本文 14px → 16px（%指定の要素は相対的に拡大される） ---------- */ body{font-size:16px} /* ---------- グローバルメニュー ---------- 配色は既存のまま。項目が8つ（プロフィール追加）・本文16pxでも1段に収まるよう、PCの左右余白だけ詰める */ @media only screen and (min-width:1025px){ #mainNav > .inner > .panel > ul > li{padding:0 10px} #mainNav li a{padding:0 10px} /* PCのメニューを中央寄せ（ヘッダーの他の要素と同じく中心に） */ #mainNav > .inner > .panel{float:none;display:flex!important;justify-content:center} #mainNav > .inner > .panel > ul{display:flex;justify-content:center;background:none} #mainNav > .inner > .panel > ul > li{flex:none;white-space:nowrap} #mainNav > .inner > .panel:after{display:none} } /* 見出し系クラス（旧ブラウン→ピンク） */ .h2title_new{background:linear-gradient(-225deg,var(--pc-head-deep),var(--pc-head))} .h3title_new{background:linear-gradient(-225deg,var(--pc-head),var(--pc-head-deep))} .heading{border-left-color:var(--pc-brand);color:var(--pc-brand-strong)} /* ---------- 見出し h2〜h4（カイロの subpage-redesign.css をピンクに移植） ---------- */ /* h2：ピンクの帯＋左の白い縦線 */ #content h2.title, #content .post h2, #content .articleBox h2{ position:relative;box-sizing:border-box; margin:34px 0 20px;padding:14px 18px 14px 28px; border:0;border-radius:5px; background:var(--pc-head);color:#fff; font-size:22px;font-weight:700;line-height:1.5;text-shadow:none; } #content h2.title.first{margin-top:0} #content h2.title span{color:#fff} #content h2.title:after, #content .post h2:after, #content .articleBox h2:after{ content:"";position:absolute;top:20%;left:12px; width:5px;height:60%;background:#fff; } #content h2.title a,#content .post h2 a,#content .articleBox h2 a{color:#fff} #content .articleBox h2 span{color:#fff} /* h3：左にピンクの太線 */ #content h3.title, #content .post h3, #content .articleBox h3, #content h1.pcure-post-title, #content h2.pcure-list-title{ margin:30px 0 16px;padding:5px 0 5px 14px; border:0;border-left:5px solid var(--pc-head); background:transparent;color:var(--pc-heading-ink); font-size:20px;font-weight:700;line-height:1.5; } #content h3.title.first{margin-top:0} .h3Title{border-bottom:1px solid var(--pc-line);color:var(--pc-heading-ink)} /* h4：下に細い罫線＋左端だけピンクの太線 */ #content h4, #content .post h4, #content .articleBox h4{ position:relative;margin:24px 0 12px;padding:0 0 7px; border-bottom:1px solid var(--pc-line); color:var(--pc-heading-ink);font-size:18px;font-weight:700;line-height:1.5; } #content h4:after, #content .post h4:after, #content .articleBox h4:after{ content:"";position:absolute;bottom:-1px;left:0; width:72px;height:3px;background:var(--pc-head); } @media screen and (max-width:600px){ #content h2.title,#content .post h2,#content .articleBox h2{margin-top:26px;padding:12px 14px 12px 24px;font-size:18px} #content h2.title:after,#content .post h2:after,#content .articleBox h2:after{left:10px;width:4px} #content h3.title,#content .post h3,#content .articleBox h3{font-size:17px} } /* ---------- お問い合わせフォーム：予約希望日（カレンダー＋時間）を横並び ---------- */ .formTable .dtRow{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .formTable .dtRow .wpcf7-form-control-wrap{display:inline-block;width:auto} .formTable .dtRow input[type="date"], .formTable .dtRow select{ width:auto;margin:0;padding:8px 10px;height:auto; border:1px solid #d4d4d7;border-radius:3px; font-size:100%;line-height:1.5;color:#000;background:#fff; } /* ---------- お問い合わせフォーム：メニュー(チェックボックス)を1項目1行・文字クリックで選択 ---------- */ /* フォーム側で [checkbox menu use_label_element ...] を指定して、文字を