@charset "UTF-8"; /* Template: swell Theme Name: SWELL CHILD Theme URI: https://swell-theme.com/ Description: SWELLの子テーマ Version: 1.0.0 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ============================================================ SOKURAKU-DOCTOR.COM 移管デザイン (第1周2026-08-05 → 第2周/第3周2026-08-06) 参照: 01_research/design_tokens.md（実測データ） / design_plan.md（方針） 01_research/design_round2_log.md（第2周ログ） / design_round3_log.md（第3周ログ） 前提: 元サイト(Wix)の商用フォント(Rodin Demi Bold / 游明朝Pr6N / Matisse等)は ライセンス上そのまま使えないため、無料Google Fontsで「印象」を再現する。 Playfair Displayのみ元サイトと同一フォントがそのまま使える。 構成: 1. ベース配色・書体（メインサイト系＝開業支援・トップ・ブログ。既定値） ★第3周でオレンジ#ed6c27主体に訂正（旧#1D6EB5青は実測面積0で誤りと判明） 2. サロンde医療スコープ（body.sokuraku-salon＝固定ページ315と配下 全9ページ） ※ 判定は functions.php の body_class フィルターで付与 3. ヘッダー（完全透過・全ページ共通。★第2周で黒→透過に訂正） 4. フッター（本体#333333＋コピーライト帯#101B2Bの2層。★第3周で単色→2層に訂正） 5. サイト幅 980px（--container_size 経由。SWELL標準の1200pxから変更） 6. パンくずリスト非表示 ============================================================ */ /* ---- 1. ベース配色・書体（メインサイト系） ---- */ :root { /* メインサイト系(開業支援/トップ/ブログ) ★2026-08-06 第3周で再訂正: 第1周の「青#1D6EB5+グレー#333333」はHTML中の hex文字列の出現"回数"を数えただけで、実際に画面に描かれている面積を見ていな かった。実サイトを面積400px²以上の要素で面積集計した結果、#1D6EB5は実測面積 0（1px²も使われていない）。実際の主色は**オレンジ#ed6c27**（CTAボタン等・ ロゴの配色とも一致）。詳細: design_tokens.md 1-1-補 */ --color_main: #ed6c27; --color_main_dark: #c9541a; --color_main_thin: rgba(237, 108, 39, .08); --color_text: #333333; --color_link: #ed6c27; --color_htag: #ed6c27; /* ヘッダー/フッターは全ページ共通（サブブランドでの出し分けなし・実測確認済） ★2026-08-06 第2周で再実測・修正: 第1周の値(黒ヘッダー/濃紺フッター)は design_tokens.md記載の「--bg-overlay-color:rgb(0,0,0)」という"定義されている だけの未使用CSS変数"を実際の見た目と誤認したもので、実サイトの表示とは異なっていた。 実ブラウザのcomputedStyleで再実測(getComputedStyle)した結果: ヘッダー: 背景は透過（#SITE_HEADERからbodyまで全てrgba(0,0,0,0)。 白いページ地の上に乗っているだけ）／ナビ文字は #333333 フッター: 背景は #333333（濃紺ではなく、本文テキストと同じニュートラルな ダークグレー）／文字・アイコンは白のまま */ --color_header_bg: transparent; --color_header_text: #333333; --color_footer_bg: #333333; --color_footer_text: #F2F2F2; /* サイトコンテナ幅（元サイト実測 980px。SWELL標準1200pxから変更） */ --container_size: 980px; /* 本文/見出しの基本書体＝Rodin Demi Bold(和文太字ゴシック)の代替 */ --swl-font_family: "Zen Kaku Gothic New", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* サロンde医療スコープ内、および今後(Phase2)のLPページ組み用に定義だけ先行 */ --sokuraku-font-mincho: "Shippori Mincho", "游明朝", "Yu Mincho", YuMincho, serif; --sokuraku-font-en-serif: "Playfair Display", serif; --sokuraku-font-en-sans: "Poppins", sans-serif; --sokuraku-gold: #AC9367; --sokuraku-navy: #0B2F5B; } /* ---- 2. サロンde医療スコープ（/medical-aesthetic 配下 全9ページ） ---- 実測(design_tokens.md 1-2): ゴールド#AC9367 × 濃紺#0B2F5B + 游明朝 ヘッダー/フッターの色（1で定義済）はここでは上書きしない＝共通のまま 注意: SWELLは body_class() を ではなく #body_wrap に出力するため セレクタは #body_wrap.sokuraku-salon（body.sokuraku-salon ではない） */ #body_wrap.sokuraku-salon { --color_main: var(--sokuraku-gold); --color_main_dark: var(--sokuraku-navy); --color_main_thin: rgba(172, 147, 103, .08); --color_text: #212121; --color_link: var(--sokuraku-gold); --color_htag: var(--sokuraku-navy); --swl-font_family: var(--sokuraku-font-mincho); /* 実測で判明(2026-08-06): SWELLは body{font-family / color} のように #body_wrap の親()でこれらのプロパティを既に解決してから 継承させているため、CSS変数の上書きだけでは font-family / 本文色に 反映されない（a色やh2背景等、要素自身がvar()を直接参照するものは 問題なく効く）。#body_wrap 自身にも明示的に再宣言して継承を作り直す。 */ font-family: var(--swl-font_family); color: var(--color_text); } /* サロンde医療スコープ内の見出し・強調は游明朝寄りに少し文字間を広げる */ #body_wrap.sokuraku-salon .post_content h1, #body_wrap.sokuraku-salon .post_content h2, #body_wrap.sokuraku-salon .post_content h3, #body_wrap.sokuraku-salon .post_content h4 { letter-spacing: .04em; } /* ---- 3. ヘッダー（黒・全ページ共通。実測 rgb(0,0,0) sticky） ---- SWELLは .l-header{background:var(--color_header_bg)} を持つが、 .l-header__bar（RSS/検索の細帯）は --color_main を使う設計のため、 ここだけは黒で明示的に揃える（青/ゴールドが帯として出るのを防止） */ .l-header, .l-header__bar, #fix_header.l-fixHeader { background-color: var(--color_header_bg) !important; } .l-header__inner, .l-fixHeader__inner, .l-header .c-headLogo__link, .l-header .c-gnav > li > a, .l-header .c-iconList__link, .l-fixHeader .c-headLogo__link, .l-fixHeader .c-gnav > li > a { color: var(--color_header_text) !important; } .l-header .c-gnav .sub-menu { background: #fff; color: #333; } /* ---- 4. フッター（全ページ共通） ---- SWELL本体は .l-footer の背景色をCSS変数経由で適用しないため直接指定する （main.css実測確認済＝--color_footer_bg は定義のみで未使用） ★2026-08-06 第3周で訂正: フッターは単一色ではなく2層構造だった。 本体（SNSアイコン＋ナビ） = #333333（--color_footer_bg のまま） 最下部コピーライト帯（© ...） = #101B2B（濃紺。ここだけ別背景） 第1周(濃紺一色)・第2周(#333333一色)はどちらも片方しか見ておらず誤り。 詳細: design_tokens.md 4-2-補 */ .l-footer, .l-footer__foot { background-color: var(--color_footer_bg) !important; } .l-footer { color: var(--color_footer_text); } .l-footer a, .l-footer .copyright, .l-footer .c-iconList__link { color: var(--color_footer_text) !important; } .l-footer a:hover { opacity: .7; } .l-footer .c-widget__title { color: var(--color_footer_text); } /* ---- 8. フッター実測差分の是正（2026-08-06 第4周） ---- 元サイトを getComputedStyle で再実測し、ステージングと数値比較して見つかった差分。 詳細: 01_research/design_round4_log.md - ナビ文字: 実測 15px/font-weight 700 対 ステージング 13px/500 （書体は元サイトが商用フォントmadefor-display-extraboldのため、 design_plan.md §1のとおりGoogle Fonts代替のまま。太さ・サイズのみ実測に寄せる） - SNSアイコン: 実測 39×39px 対 ステージング 24×24px */ .l-footer .l-footer__nav a { font-size: 15px; font-weight: 700; } .l-footer .c-iconList__link { font-size: 32px; } /* コピーライト帯だけ濃紺の別レイヤーにする。 SWELLのテンプレート(parts/footer/footer_contents.php)は .l-footer__foot の中に「アイコン+ナビ+コピーライト」を一括出力するため、 .copyright 要素自体を100vw+左右マイナスマージンで画面幅いっぱいに広げ、 独自の背景色を持たせることで2層を再現する（bodyのoverflow-xはclipのため 横スクロールは発生しない。実測確認済）。 */ .l-footer__foot { padding-bottom: 0; } .l-footer__foot .copyright { display: block; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 16px; padding: 14px 0; background-color: #101B2B; color: #F2F2F2 !important; text-align: center; } /* ---- 5. サイト幅 980px ---- --container_size (上記1) を980pxに設定済。.l-container が参照するため ヘッダー/フッター/本文コンテンツ幅すべてに一括反映される。追加CSS不要。 */ /* ---- 6. パンくずリスト非表示（2026-08-06 第2周） ---- 元サイト(Wix)にはパンくずリストが存在しない（実測・全ページ確認）。 SWELLにはパンくず自体のON/OFFトグルが無い（位置=上/下と背景演出のみ設定可）ため、 #breadcrumb をCSSで非表示にする方式で忠実再現する。 （テンプレート側の出力ロジックには触れない＝親テーマ改変なし） */ #breadcrumb { display: none !important; } /* ---- 7. ヘッダー実測差分の是正（2026-08-06 第4周） ---- 元サイトを getComputedStyle で再実測し、ステージングと数値比較して見つかった差分。 詳細: 01_research/design_round4_log.md - ヘッダー高さ: 実測 73px 対 ステージング114px（ロゴのラッパー .l-header__logo の 上下padding=16pxがSWELL既定のまま。実測ではロゴ65px+上下わずかな余白で73pxに収まる） - ナビの字間: 実測 letter-spacing 0.7px 対 ステージング normal - ナビの太さ: 実測 font-weight 400 対 ステージング 500（SWELL既定の.ttl相当） */ .l-header__logo, .l-fixHeader__logo, .-series .l-header__logo { padding-top: 4px !important; padding-bottom: 4px !important; } .l-header .c-gnav > li > a .ttl, .l-fixHeader .c-gnav > li > a .ttl { letter-spacing: .7px; font-weight: 400; } /* ============================================================ SOKURAKU Phase 1（2026-08-16） ローカルナビ / 記事末尾の関連サービス / 統合フォーム ------------------------------------------------------------ グローバルナビはフラットに保つ方針（BRIEF §5）のため、 サロンde医療の配下ページへの回遊はローカルナビが担う。 ============================================================ */ /* 記事末尾の関連サービス 引き継ぎページのトンマナを壊さないよう、囲み枠や独自色は持たせない。 区切り線と余白だけで、色・書体はそのページのものを継承させる。 */ .sokuraku-related { margin: 3.5em 0 0; padding-top: 1.5em; border-top: 1px solid currentColor; } .sokuraku-related__title { margin: 0 0 .9em; font-weight: 700; } .sokuraku-related__list { margin: 0; padding: 0; list-style: none; } .sokuraku-related__item { margin: 0 0 .9em; } .sokuraku-related__link { font-weight: 700; } .sokuraku-related__desc { display: block; font-size: .9em; } .sokuraku-related__cta { margin: 0; } /* 統合お問い合わせフォーム（BRIEF §6） */ .sokuraku-form fieldset { margin: 0 0 1.25em; padding: .75em 1em; border: 1px solid rgba(0, 0, 0, .15); border-radius: 6px; } .sokuraku-form legend { padding: 0 .4em; font-weight: 700; } .sokuraku-form .wpcf7-list-item { display: block; margin: 0 0 .4em; } .sokuraku-field-group { margin: 0 0 1.25em; padding: 1em; border-left: 3px solid rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .02); } .sokuraku-field-group__note { margin: 0 0 1em; font-size: .9em; opacity: .8; } .sokuraku-form input[type="text"], .sokuraku-form input[type="email"], .sokuraku-form input[type="tel"], .sokuraku-form select, .sokuraku-form textarea { width: 100%; } /* トップの事業カード */ .sokuraku-lead { font-size: 1.05em; } .sokuraku-card-for { font-size: .9em; opacity: .85; } /* ============================================================ SOKURAKU Phase 2（2026-08-17） /oem・/oem/* ・/esthe-kaigyo の見せ方 ------------------------------------------------------------ SWELL既定のままだと見出しと段落が並ぶだけで、 「何をしている会社か」がページから伝わらなかったため、 分岐カード・商材カード・手順の3種類だけを足す。 色はSWELLのテーマカラー（--color_main）を使い、独自の配色は増やさない。 ============================================================ */ /* ---- 5分岐カード（/oem）---- */ .sokuraku-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1em; margin: 0 0 2em; padding: 0; list-style: none; } .sokuraku-branch__item { position: relative; margin: 0; padding: 1.4em 1.2em 1.2em; border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; background: #fff; } .sokuraku-branch__item.is-primary { border-color: var(--color_main); box-shadow: 0 0 0 1px var(--color_main) inset; } .sokuraku-branch__num { display: block; margin-bottom: .3em; font-family: sans-serif; font-size: 1.5em; font-weight: 700; line-height: 1; color: var(--color_main); opacity: .5; } .sokuraku-branch__ttl { margin: 0 0 .5em; font-size: 1.05em; line-height: 1.4; } .sokuraku-branch__body { margin: 0; font-size: .92em; } .sokuraku-branch__note { margin: .8em 0 0; padding-top: .6em; border-top: 1px dashed rgba(0, 0, 0, .15); font-size: .85em; font-weight: 700; color: var(--color_main); } /* ---- 商材カード（/oem → /oem/*）---- */ .sokuraku-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8em; margin: 0 0 1.5em; padding: 0; list-style: none; } .sokuraku-products__item { margin: 0; } .sokuraku-products__link { display: block; height: 100%; padding: 1.1em 1.2em; border: 1px solid rgba(0, 0, 0, .12); border-radius: 8px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .sokuraku-products__link:hover { border-color: var(--color_main); transform: translateY(-2px); } .sokuraku-products__name { display: block; margin-bottom: .35em; font-size: 1.1em; font-weight: 700; } .sokuraku-products__name::after { content: " →"; color: var(--color_main); } .sokuraku-products__desc { display: block; font-size: .88em; line-height: 1.6; opacity: .85; } /* ---- 手順（/oem・/esthe-kaigyo）---- */ .sokuraku-steps { counter-reset: sokuraku-step; margin: 0 0 2em; padding: 0; list-style: none; } .sokuraku-steps__item { counter-increment: sokuraku-step; position: relative; margin: 0; padding: 0 0 1.6em 3.2em; border-left: 2px solid rgba(0, 0, 0, .12); } .sokuraku-steps__item:last-child { border-left-color: transparent; padding-bottom: 0; } .sokuraku-steps__item::before { content: counter(sokuraku-step); position: absolute; left: -1.05em; top: 0; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--color_main); color: #fff; font-family: sans-serif; font-weight: 700; font-size: .9em; line-height: 2.1em; text-align: center; } .sokuraku-steps__ttl { margin: 0 0 .4em; font-size: 1.05em; } .sokuraku-steps__item p { margin: 0; font-size: .92em; } /* ---- カード内の見出しと色の調整 ---- SWELLは .post_content h3 に下線などの装飾を付けるため、 カードの中で使うと重く見える。カード内の見出しだけ素の見た目に戻す。 商材カードはリンク全体が なので、放っておくと説明文までリンク色になる。 */ .post_content .sokuraku-branch__ttl, .post_content .sokuraku-steps__ttl { padding: 0; border: none; background: none; } .post_content .sokuraku-branch__ttl::before, .post_content .sokuraku-branch__ttl::after, .post_content .sokuraku-steps__ttl::before, .post_content .sokuraku-steps__ttl::after { content: none; } .sokuraku-products__link { color: inherit; } .sokuraku-products__name { color: var(--color_main); } .sokuraku-products__desc { color: inherit; }