/* Theme Name: CURE Child （しがき先生クリニック） Theme URI: https://tcd-theme.com/tcd082 Description: TCD「CURE」用の子テーマ。しがき先生クリニックのブランド（黄色/金/クリーム、明朝体）を適用します。親テーマのアップデートに影響されず、カスタムを安全に保持するための器です。 Author: レン Template: cure_tcd082 Version: 1.0.0 Text Domain: cure-child */ /* 親テーマ(CURE)のCSSを読み込む（この1行が無いとデザインが外れます） */ @import url("../cure_tcd082/style.css"); /* 明朝はmacOS/端末標準（ヒラギノ明朝・游明朝）を使用。外部フォント依存なし */ /* ========================================================= しがき先生クリニック ブランドトークン （Figmaから抽出した実際の配色。色の“適用”の多くは WP管理画面 → テーマオプション/カスタマイザーでも設定できます。 ここでは主にフォントを上書きし、色は変数として用意しています） ========================================================= */ :root{ --sc-yellow: #ffe357; /* ヘッダー黄 */ --sc-gold: #c9a44c; /* 金アクセント・ボタン */ --sc-gold-dark:#a5813a; /* 金（濃）ホバー等 */ --sc-cream: #fbf8f4; /* 背景クリーム */ --sc-beige: #faefe4; /* 薄ベージュ（カード内など） */ --sc-border: #e4d8c1; /* 枠線ベージュ（白カードの金枠） */ --sc-text: #5b4f3f; /* 本文の茶 */ --sc-text-deep:#3d3527; /* 見出しの濃茶 */ --sc-footer: #5a4526; /* フッター濃茶帯 */ --sc-mincho: "Shippori Mincho", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif; } /* --------------------------------------------------------- 1. フォント：全体を明朝に（デザインの世界観の要） --------------------------------------------------------- */ body, input, button, textarea, select, h1, h2, h3, h4, h5, .rich_font, .rich_font_1, .rich_font_2, .rich_font_3, #header_slider .catch, #header_logo, #global_menu{ font-family: var(--sc-mincho); } /* --------------------------------------------------------- 2. 色の微調整（低リスクなものだけ有効化） ※大枠の配色はテーマオプションで設定します。 ※活性化後に実機を見ながら、下のブロックを段階的に開放します。 --------------------------------------------------------- */ /* 本文の基調色を、デザインの茶系に寄せる */ body{ color: var(--sc-text); } /* ========================================================= ブランド寄せ（第1パス）※実画面を見ながら継続調整 ========================================================= */ /* ヘッダー：黄色帯（トップも下層も。トップは元“透明・重なり”を帯に変更） */ #header{ background:var(--sc-yellow); border-bottom:none; } body.home #header{ background:var(--sc-yellow); position:relative; margin:0; } /* グローバルナビ：濃茶の明朝（トップの白文字を確実に上書き）＋間隔・サイズ */ body.home #global_menu > ul > li > a, #global_menu > ul > li > a{ color:var(--sc-text-deep)!important; font-size:16px!important; letter-spacing:.04em; } #global_menu > ul > li > a:hover{ color:var(--sc-gold-dark)!important; } #global_menu > ul > li{ margin:0 6px; } /* ロゴ：マーク＋クリニック名を程よい大きさに */ #header_logo img{ max-height:54px!important; width:auto!important; } /* ヒーローのキャッチ：左寄せ・濃茶（Figma準拠。既定は中央白） */ body.home #header_slider .catch{ left:7%; top:50%; right:auto; -webkit-transform:translateY(-50%); transform:translateY(-50%); text-align:left; width:auto; max-width:48%; color:var(--sc-text-deep); } /* 追従ボタン：金（テーマオプションに加えCSSでも固定） */ #side_button a{ background:var(--sc-gold); } #side_button a:hover{ background:var(--sc-gold-dark); } /* トップ3ボックス：見出しバー金／リンク帯クリーム */ #index_box_content .title{ background:var(--sc-gold); } #index_box_content .link{ background:var(--sc-beige); color:var(--sc-text); } #index_box_content .link:hover{ background:var(--sc-border); color:var(--sc-text-deep); } /* 下層ページの角ラベル：ティール→金 */ #page_header .sub_title{ background:var(--sc-gold); } /* 本文リンク：金 */ .post a, .entry-content a, .entry_content a{ color:var(--sc-gold-dark); } /* ========================================================= 第2パス：セクション見出し／カード／ボタン／配色 （CUREの動的CSSは末尾に出るため !important で上書き） ========================================================= */ /* --- ボタン・追従ボタンを金で統一 --- */ /* 追従ボタン（Figma準拠：黄色い箱／アイコン上・ラベル下／常時表示） ※CUREは初期 opacity:0＋JSでleftを動かす仕様のため固定する */ #side_button{ opacity:1!important; right:0!important; left:auto!important; visibility:visible!important; } #side_button .item{ background:var(--sc-yellow)!important; width:78px!important; text-align:center!important; padding:13px 4px 11px!important; box-sizing:border-box!important; border-bottom:1px solid rgba(255,255,255,.75)!important; position:relative!important; } #side_button .item:last-child{ border-bottom:none!important; } #side_button .item:hover{ background:#ffd93a!important; } #side_button .item:before{ position:static!important; display:block!important; width:auto!important; height:auto!important; line-height:1!important; margin:0 auto 5px!important; color:var(--sc-text-deep)!important; font-size:22px!important; text-align:center!important; } #side_button a{ display:block!important; width:auto!important; height:auto!important; line-height:1.3!important; padding:0!important; text-align:center!important; font-size:11px!important; background:transparent!important; color:var(--sc-text-deep)!important; border:none!important; } .link_button a, .cb_contents .link_button a, .more_link a, a.more_button, .contact_button a, .index_message .link_button a{ background:var(--sc-gold)!important; color:#fff!important; border:none!important; } .link_button a:hover{ background:var(--sc-gold-dark)!important; } #index_box_content .title{ background:var(--sc-gold)!important; color:#fff!important; } /* --- セクション見出し：英語ラベル＋明朝大見出し＋金の下線 --- */ .cb_headline{ color:var(--sc-gold-dark)!important; letter-spacing:.22em; font-weight:600; } .cb_catch{ font-family:var(--sc-mincho)!important; color:var(--sc-text-deep)!important; position:relative; padding-bottom:22px; } .cb_catch:after{ content:""; position:absolute; left:50%; bottom:0; width:44px; height:2px; margin-left:-22px; background:var(--sc-gold); } /* --- セクション背景：クリーム基調（デモのグレー等を除去） --- */ .index_service_list{ background:var(--sc-cream)!important; } .index_message{ background:#ffffff!important; } .index_content_slider{ background:#ffffff!important; } /* --- 診療内容カード：白＋金枠＋明朝タイトル --- */ .index_service_list .item, .index_service_list .service_list .item, .index_service_list article{ background:#fff!important; border:1px solid var(--sc-border)!important; } .index_service_list .title, .index_service_list .item .title{ font-family:var(--sc-mincho)!important; color:var(--sc-text-deep)!important; } /* --- 院長メッセージ：明朝・茶 --- */ .index_message .message_catch, .index_message .title, .index_message .desc{ font-family:var(--sc-mincho)!important; color:var(--sc-text)!important; } .index_message .message_catch{ color:var(--sc-text-deep)!important; } /* --- 下層ページ見出しラベル：金 --- */ #page_header .sub_title{ background:var(--sc-gold)!important; } #page_header .title{ font-family:var(--sc-mincho)!important; } /* --- メガメニュー無効化（Figmaのナビはシンプルなドロップダウン無し）--- */ #header .megamenu, #header [id^="js-megamenu"], .megamenu_blog_list, .megamenu_service_list{ display:none!important; } /* --- フッター：コピーライト帯を濃茶に --- */ #copyright, .copyright, #footer #copyright{ background:var(--sc-footer)!important; color:#fff!important; } /* --- 診療カード：デモ背景除去・症状リスト・詳しく見る --- */ .index_service_list .bg_image{ display:none!important; } .index_service_list .service_list .item .desc{ white-space:pre-line; text-align:left; color:var(--sc-text)!important; line-height:1.9; } .index_service_list .item > a{ display:block; position:relative; padding:34px 26px 52px; } .index_service_list .item > a:after{ content:"詳しく見る →"; position:absolute; right:24px; bottom:18px; color:var(--sc-gold-dark); font-size:13px; } .index_service_list .item .title{ margin-bottom:14px; } /* --- ヒーローのキャッチを常時表示（JSアニメ非依存） --- */ #header_slider .catch span{ opacity:1!important; } /* --- ブログのカテゴリタグ：ティール→金 --- */ .index_post_slider .category a, .index_post_slider .category{ background:var(--sc-gold)!important; color:#fff!important; } /* --- フッターCTA：診察時間テーブル＆連絡ボタンを金に --- */ #footer_schedule th{ background:var(--sc-gold)!important; color:#fff!important; } #footer_schedule th, #footer_schedule td{ border-color:#e4d8c1!important; color:var(--sc-text)!important; } .contact_button a, #footer .contact_button a, #footer_contact .button a{ background:var(--sc-gold)!important; color:#fff!important; } #footer_banner{ display:none!important; } /* デモの黒バナーを隠す */ /* --- 院長メッセージのキャッチ：ティール→濃茶（保険でCSSも） --- */ .index_message .message_catch{ color:var(--sc-text-deep)!important; } /* ========================================================= SP（〜767px）Figma SP版準拠：ヘッダー／ハンバーガー／追従ボタン ========================================================= */ #sc-spmenu{ display:none; } @media screen and (max-width:767px){ /* SPレイアウトの土台リセット（横はみ出し・上部余白の解消） ※CUREはSPでヘッダー固定用に body{padding-top:60px} を入れるが、 当テーマはヘッダーを固定にしていないため余白だけが残る → 解除 */ html, body{ overflow-x:hidden!important; min-width:0!important; } body{ padding-top:0!important; } /* CUREはヘッダーメッセージ非表示時に空の#containerを出力し、その余白だけが残るため消す （メッセージ機能を使う場合はこの行を外すこと） */ #container{ display:none!important; } #header_message{ display:none!important; height:0!important; } #fh-main, .fh-page{ overflow-x:hidden; } #header, body.home #header{ height:58px!important; background:var(--sc-yellow)!important; position:relative!important; top:0!important; left:0!important; margin:0!important; padding:0!important; border:none!important; } #header_logo{ position:absolute!important; left:12px; top:50%; transform:translateY(-50%); text-align:left; margin:0; } #header_logo img{ max-height:28px!important; width:auto!important; margin:0!important; } /* ハンバーガーボタン（CUREは白文字→黄ヘッダーで見えないので濃茶に） */ #menu_button, body.home #menu_button{ display:block!important; opacity:1!important; visibility:visible!important; position:absolute!important; right:6px!important; top:0!important; left:auto!important; width:52px!important; height:58px!important; z-index:400; } #menu_button span, body.home #menu_button span, body.home #header.active #menu_button span{ display:block!important; position:absolute!important; left:12px!important; width:28px!important; height:2px!important; background:var(--sc-text-deep)!important; } #menu_button span:nth-child(1){ top:21px!important; } #menu_button span:nth-child(2){ top:28px!important; } #menu_button span:nth-child(3){ top:35px!important; } #global_menu{ display:none!important; } /* CUREのメガメニュー／モバイルドロワーはSPで使わない（自作メニューを使用） ＝ヘッダー内に1000px幅の隠し要素が残り横はみ出しの原因になるため除去 */ #header [id^="js-megamenu"], #header .megamenu, #header .megamenu_blog_list, #header .megamenu_service_list, #drawer_menu, #mobile_menu, #header .simplebar-wrapper{ display:none!important; } #header{ overflow:hidden!important; } /* 追従ボタン：SPはトップのヒーロー内のみ表示（Figma SP準拠。下層は非表示） */ #side_button{ display:block!important; position:absolute!important; right:0!important; left:auto!important; top:250px!important; z-index:300!important; opacity:1!important; } body:not(.home) #side_button{ display:none!important; } /* 黄色い箱は .item 側に（CUREはアイコンが .item:before、ラベルが のため） */ #side_button .item{ background:var(--sc-yellow)!important; width:64px!important; text-align:center!important; padding:9px 2px 7px!important; box-sizing:border-box!important; border-bottom:1px solid rgba(255,255,255,.75)!important; position:relative!important; } #side_button .item:last-child{ border-bottom:none!important; } #side_button .item:hover{ background:#ffd93a!important; } #side_button .item:before{ position:static!important; display:block!important; width:auto!important; height:auto!important; line-height:1!important; margin:0 auto 4px!important; color:var(--sc-text-deep)!important; font-size:19px!important; text-align:center!important; } #side_button a{ display:block!important; width:auto!important; height:auto!important; line-height:1.25!important; padding:0!important; text-align:center!important; font-size:10px!important; background:transparent!important; color:var(--sc-text-deep)!important; border:none!important; } /* SPメニュー本体（フルスクリーン） */ #sc-spmenu{ display:block; position:fixed; inset:0; background:#fff; z-index:9999; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; overflow-y:auto; padding:70px 28px 44px; } #sc-spmenu.is-open{ opacity:1; visibility:visible; } #sc-spmenu-close{ position:absolute; right:14px; top:12px; width:42px; height:42px; background:none; border:0; padding:0; cursor:pointer; } #sc-spmenu-close span{ position:absolute; left:9px; top:20px; width:24px; height:2px; background:var(--sc-text-deep); } #sc-spmenu-close span:nth-child(1){ transform:rotate(45deg); } #sc-spmenu-close span:nth-child(2){ transform:rotate(-45deg); } .sc-spmenu__list{ list-style:none; margin:0; padding:0; } .sc-spmenu__list li{ border-bottom:1px solid var(--sc-border); } .sc-spmenu__list a{ display:block; padding:17px 4px; font-family:var(--sc-mincho); font-size:18px; color:var(--sc-gold-dark); text-decoration:none; letter-spacing:.06em; } .sc-spmenu__btn{ display:block; margin:30px auto 0; max-width:300px; text-align:center; padding:17px 10px; color:#fff!important; text-decoration:none; font-family:var(--sc-mincho); font-size:19px; background:linear-gradient(180deg,#d4ab55,#b58c33); } .sc-spmenu__btn small{ display:block; font-size:11px; margin-top:4px; } }