@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/


/* =========================================================
   ACLINIC コラム 子テーマ追加CSS  ―  B案：ブラッシュピンク基調
   ---------------------------------------------------------
   ・色の大半は「外観 → カスタマイズ → 色」で設定済みの前提です
     （下のB案カラーをカスタマイザーに入れた状態で使ってください）
   ・このCSSはカスタマイザーだけでは届かない「仕上げ」を担います
   ---------------------------------------------------------
   ※見出しの書体はSANGO管理画面の全体設定に任せるため、
     ここでの font-family 指定は行いません。
   ========================================================= */


/* カード本体に背景色（画像の下全体を均一に塗る／高さ違いの白帯を防ぐ） */
.c_linkto{
  background: #fdf8f8;
}

/* ---- ブランドカラーの控え（参照用・メンテしやすくするため） ---- */
:root{
  --ac-bg:         #fdf8f8; /* 背景色 */
  --ac-main:       #cf8694; /* メインカラー（くすみローズ） */
  --ac-base:       #f8e8eb; /* 薄めの下地色（淡いブラッシュ） */
  --ac-accent:     #c0a155; /* アクセント（ゴールド） */
  --ac-link:       #2f7ec4; /* リンク色（青） */
  --ac-link-hover: #235e94; /* リンクホバー（少し濃い青） */
  --ac-text:       #3a2a23; /* ロゴ／見出しのダークブラウン */
}

/* ---- リンクは青＋下線（クリックできると一目で分かるように） ----
   ※カスタマイザーの「リンク色」も #2f7ec4 に揃えると、
     本文以外のリンクも同じ青になります。
   ---------------------------------------------------------
   【重要・2026/08 追記】
   ボタン類は :not() で除外している。除外しないと、SANGOのボタン
   （コンテンツブロックのCTA等）の白抜き文字がこの青字＋下線に
   上書きされてしまう（管理画面では白いのにフロントで青くなる）。
   除外対象：
     .btn                → SANGOのボタン（sgb/btnブロックのa要素）
     .sng-btn            → SANGO独自ボタン
     .wp-block-button__link → WordPressコアのボタンブロック
   ボタンの文字色はSANGO側の指定に任せる（ここで色を固定しない）。
   新しい種類のボタンで同じ症状が出たら、そのクラスを下に追加する。 */
.entry-content a:not(.btn):not(.sng-btn):not(.wp-block-button__link){
  color:var(--ac-link);
  text-decoration:underline;
  text-underline-offset:2px;
}
.entry-content a:not(.btn):not(.sng-btn):not(.wp-block-button__link):hover{
  color:var(--ac-link-hover);
}

/* ---- ボタン（WordPressコアのボタンブロック）のホバーを少し沈める ---- */
.wp-block-button__link:hover{
  filter:brightness(.94);
}

/* =========================================================
   一覧カードのアイキャッチ比率を 40:21（＝1200:630）に統一
   ---------------------------------------------------------
   ・SANGOの記事一覧カード（.c_linkto）のサムネ枠を、
     アイキャッチ(1200×630)と同じ比率に固定します。
   ・カードに渡す画像は functions.php 側で medium_large
     （幅768px・比率そのまま／1200×630なら768×403）に差し替えています。
     画像も枠も同じ比率になるため、余白は出ずに全体が表示されます。
     ※必ず functions.php 側の変更とセットで運用してください。
   ・【2026/08 改訂】旧版では functions.php 側がインラインの
     !important スタイルを書き込んでいたため、この比率指定は
     打ち消されて機能していませんでした。functions.php 側の
     インラインスタイルを撤去し、見た目の制御はこのCSSに一本化しました。
   ・【重要】画像の収め方は object-fit:contain（＝枠に収まるように
     全体を表示）です。cover（＝枠を埋めて余りを切る）にすると、
     アイキャッチが1200×630から少しでもズレている記事で
     左右の文字・ロゴが欠けます。ここは contain のままにしてください。
     比率がぴったりの画像なら余白は出ず、見た目は同じです。
     ズレている画像は、カード背景と同じ色の細い余白が入ります。
   ・先頭の大きい横長カード（.longc_linkto）はレイアウトが別物のため、
     ここでは対象外（:not(.longc_linkto)）にしています。
   ========================================================= */
.c_linkto:not(.longc_linkto) .c_linkto_img_wrap{
  position:relative;              /* 絶対配置の画像の基準を枠に固定 */
  display:block;
  width:100% !important;          /* SANGO側の幅指定を打ち消す */
  max-width:none !important;
  aspect-ratio:40 / 21;           /* 1200:630 と同じ比率で高さを決める */
  height:auto !important;         /* SANGO側の固定高さ指定を打ち消す */
  padding:0 !important;           /* SANGO側の padding-hack 指定を打ち消す */
  overflow:hidden;
  background:var(--ac-bg);        /* 余白はカード背景と同色にして目立たせない */
}
.c_linkto:not(.longc_linkto) .c_linkto_img_wrap img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:contain !important;  /* 画像全体を表示（切らない） */
  object-position:center;
}

/* =========================================================
   以下は「任意で使える補助クラス」です。
   エディターでブロックに「追加CSSクラス」を付けると効きます。
   ========================================================= */

/* ゴールドの縦ラインを左に入れて引用・補足を上品に見せる
   → ブロックに ac-gold-line を付与 */
.ac-gold-line{
  border-left:4px solid var(--ac-accent);
  padding-left:.9em;
}

/* 下地ブラッシュの囲みボックス
   → ブロックに ac-box を付与 */
.ac-box{
  background:var(--ac-base);
  border-radius:8px;
  padding:1.2em 1.4em;
}

/* 見出し下にゴールドの細い下線（h2を強調したい場合）
   → 見出しブロックに ac-h-gold を付与 */
.ac-h-gold{
  border-bottom:2px solid var(--ac-accent);
  padding-bottom:.3em;
}

/* =========================================================
   【SANGO固有ブロックの調整・確認用メモ】
   下はバージョン依存のため、効くかどうか要確認の参考例です。
   実際のクラス名を確認してから有効化してください。
   ---------------------------------------------------------
   .sng-btn:hover { filter:brightness(.94); }            // SANGO独自ボタン
   .is-style-sango-list-check li::before{ ... }          // チェックリストの色
   .is-style-sango-list-chevron li::before{ ... }        // 矢印リストの色
   ========================================================= */