@charset "UTF-8";
/*
Theme Name: JIN:R Child - シーアクト法律事務所（コーポレート）
Theme URI:
Description: シーアクト法律事務所コーポレートサイト用の JIN:R 子テーマ。7サイトを統合した構成に対応し、旧テーマの記法を引き受ける互換層を含みます。交通事故サイト用の子テーマとは別系統です。
Author: 船橋シーアクト法律事務所
Template: jinr
Version: 1.0.0
Requires at least: 5.9.1
Requires PHP: 8.0
*/

/* ============================================================
   カラー定義
   ============================================================

   参考サイトから抽出した実際の値を使用しています。
   色を変更する場合は、ここだけを書き換えてください。
   ============================================================ */

:root {
	/* 文字サイズの下限。これより小さい指定はしない（可読性の確保） */
	--ceact-font-min: 1.3rem;

	/*
	   主要色

	   既定はコーポレート。旧サイトの配色をそのまま使う。

	   　#0071A5  主色。旧サイトで最も多く使われていた水色
	   　#169CB1  ターコイズ。図版・アイコンの補助に使う
	   　#66B2E7  淡青。背景の帯に使う

	   ターコイズと水色は、白抜き文字の比率が 3.3 前後しかない。
	   ボタンや帯の地には使えないため、補助色として扱う。
	   旧サイトでも同じ使い分けだった。

	   交通事故サイト（#2E5299）も青だが、あちらは藍寄り、
	   こちらは水色寄り。差し色も赤と橙で分かれる。

	   分野ページでは、この3つと背景3つを差し替える。
	   差し替えは下の「分野ごとの配色」で行う。
	*/
	--ceact-main:    #0071A5;
	--ceact-main-dark: #005981;  /* 帯のグラデーションの右端 */
	--ceact-sub:     #169CB1;  /* 補助・図版（ターコイズ） */
	--ceact-hover:   #005A85;  /* ホバー・フッター */

	/*
	   ヘッダーの色

	   地は白。文字だけ分野の色にする。

	   　ヘッダーやページ全体に色を敷くと、画面が暗く重くなる。
	   　船橋の競合2社（アディーレ・ベリーベスト）も、
	   　ヘッダーと本文は白で、濃い色は差し色にしか使っていない。

	   分野の違いは、セクションの帯（--ceact-bg01 / bg03）で見せる。
	   淡い色の帯が交互に入るので、画面は明るいまま区別がつく。
	*/
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #0071A5;

	/* 強調色 */
	/*
	   差し色

	   旧サイトのCTAボタン（#FD9535）の系統。
	   ただし元の明るさでは白抜き文字が 2.20 しかなく、
	   ボタンの文字が読めないため濃さを落としている。

	   　#A85F00 … 白抜き文字 4.88
	*/
	--ceact-orange:  #A85F00;  /* CTA・ラベル */
	--ceact-orange-tx: #8A4E00;  /* 淡い地の上に置く文字 */
	--ceact-red:     #C0392B;  /* 数値の強調 */
	--ceact-yellow:  #FFDD59;  /* マーカー・注意 */

	/* 背景 */
	--ceact-bg01:    #E6F2F8;  /* セクション背景・濃いめ */
	--ceact-bg02:    #C9E5F1;  /* 罫線・枠。旧サイトの淡青 #66B2E7 を薄めたもの */
	--ceact-bg03:    #F1F8FC;  /* セクション背景・淡い */
	--ceact-deco01:  #FDF0DF;  /* 装飾・淡橙 */
	--ceact-deco02:  #FFF7D5;  /* 装飾・淡黄 */

	/* 基本 */
	--ceact-text:    #474747;  /* 本文 */
	--ceact-gray:    #737679;  /* 補足テキスト */
	--ceact-border:  #C7C8C9;  /* 罫線 */
	--ceact-line:    #06C755;  /* LINE */

	/* CTAのグラデーション */
	--ceact-cv: linear-gradient(to right, #0071A5 0%, #0E7E92 100%);
}



/* ============================================================
   分野ごとの配色
   ============================================================

   分野ページでは、見出し・ボタン・背景・ヘッダーの色を変える。
   同じドメインの中でも、その分野の専門サイトとして見せるため。

   　クラスは inc/section-nav.php が body に付ける。
   　URLの先頭が /rikon/ なら .ceact-sec-rikon が付く。

   旧サイトの主色を土台にしている。ただし、そのままでは
   白抜き文字が読みにくいものがあったため、明るさを落としてある。

   　旧サイトの色      調整後      白文字の見え方
   　#CE323A 慰謝料    #B02A34     6.51
   　#CC5A78 離婚      #B34A66     5.14
   　#F76A2B 相続      #C1500F     4.75

   相続の橙は、元の色だと白文字が 2.98 しかなく、
   ボタンの文字が読めなかった。

   労災・養育費・顧問弁護士には旧サイトが無いため、
   隣の分野と混ざらない色を選んでいる。

   差し色（--ceact-orange）は、コーポレートと分野で共通の橙。
   押す場所の色が分野ごとに変わると、
   サイト内を移動したときに探し直すことになる。
   ============================================================ */

/* 不倫慰謝料 */
.ceact-sec-furinisyaryou {
	--ceact-main:   #B02A34;
	--ceact-main-dark: #93232B;  /* 帯のグラデーションの右端 */
	--ceact-sub:    #D9737A;
	--ceact-hover:  #8E2029;
	--ceact-bg01:   #FBEEEF;
	--ceact-bg02:   #F3D6D8;
	--ceact-bg03:   #FDF6F6;
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #B02A34;
	--ceact-cv: linear-gradient(to right, #B02A34 0%, #C13B45 100%);
}

/* 離婚 */
.ceact-sec-rikon {
	--ceact-main:   #B34A66;
	--ceact-main-dark: #9A4058;  /* 帯のグラデーションの右端 */
	--ceact-sub:    #D48CA0;
	--ceact-hover:  #93384F;
	--ceact-bg01:   #FAEDF1;
	--ceact-bg02:   #F0D5DD;
	--ceact-bg03:   #FDF6F8;
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #B34A66;
	--ceact-cv: linear-gradient(to right, #B34A66 0%, #C4496B 100%);
}

/* 遺産相続 */
.ceact-sec-souzoku {
	--ceact-main:   #C1500F;
	--ceact-main-dark: #A0420C;  /* 帯のグラデーションの右端 */
	--ceact-sub:    #E8935A;
	--ceact-hover:  #9C400B;
	--ceact-bg01:   #FBEFE7;
	--ceact-bg02:   #F5D9C6;
	--ceact-bg03:   #FDF7F2;
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #C1500F;
	--ceact-cv: linear-gradient(to right, #C1500F 0%, #B9591C 100%);
}

/* 養育費請求 */
.ceact-sec-yoikuhi {
	--ceact-main:   #2E7D5B;
	--ceact-main-dark: #246348;  /* 帯のグラデーションの右端 */
	--ceact-sub:    #6FBE96;
	--ceact-hover:  #236247;
	--ceact-bg01:   #E9F4EE;
	--ceact-bg02:   #CFE7DA;
	--ceact-bg03:   #F3F9F5;
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #2E7D5B;
	--ceact-cv: linear-gradient(to right, #2E7D5B 0%, #388260 100%);
}

/* 労働災害 */
.ceact-sec-rousai {
	--ceact-main:   #17667A;
	--ceact-main-dark: #114D5C;  /* 帯のグラデーションの右端 */
	--ceact-sub:    #5EA9BB;
	--ceact-hover:  #10505F;
	--ceact-bg01:   #E7F2F5;
	--ceact-bg02:   #C9E2E8;
	--ceact-bg03:   #F2F8FA;
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #17667A;
	--ceact-cv: linear-gradient(to right, #17667A 0%, #1F7A90 100%);
}

/*
   企業法務・顧問弁護士

   フッターと同じ濃紺（#22327A）。企業向けのページなので、
   落ち着いた色にする。

   　一度は紫にしていたが、法人向けの印象と合わなかった。

   コーポレートの主色（#0071A5）は水色寄りの明るい青なので、
   並べても取り違えない。
   白抜き文字の比率が十分にあるため、ボタンや帯の地に使える。
*/
.ceact-sec-komonbengoshi {
	--ceact-main:   #22327A;
	--ceact-main-dark: #1A275E;  /* 帯のグラデーションの右端 */
	--ceact-sub:    #5B6BA8;
	--ceact-hover:  #1A2760;
	--ceact-bg01:   #ECEFF7;
	--ceact-bg02:   #D6DCEC;
	--ceact-bg03:   #F4F6FB;
	--ceact-header-bg: #FFFFFF;
	--ceact-header-tx: #22327A;
	--ceact-cv: linear-gradient(to right, #22327A 0%, #2E4394 100%);
}

/* ============================================================
   本文の基本設定
   ============================================================ */

body {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	color: var(--ceact-text);
	line-height: 2;
	letter-spacing: .1em;
}


/* ============================================================
   レイアウト崩れの防止
   ============================================================

   日本語は単語の途中で折り返せないため、長い語がグリッドや
   フレックスの子要素に入ると、幅指定を無視して要素が広がり、
   横スクロールが発生します。min-width: 0 がその対策です。
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}


/* ============================================================
   パンくず
   ============================================================

   スマホで折り返せるようにします（JIN:R 既定は横スクロール）。
   ============================================================ */

@media screen and (max-width: 767px) {
	#breadCrumbInner {
		height: auto;
		overflow-x: visible;
		white-space: normal;
		line-height: 1.9;
	}
}


/* ============================================================
   ここから下は、必要に応じて追記してください
   ============================================================ */