/*
	Theme Name: diver_child_new
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */

/* カスタマイズする場合にはこれより下に追記してください  */

/* ==========================================================
   固定ヘッダー（スクロール追従）
========================================================== */
body{
	background-image: none;
	background-color:#d7e9f9;
}
#header .header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9990;
	box-shadow: 0px 0px 10px #0000001a;
	background-image: url(/kodomokai/wp-content/uploads/2026/07/kodomokai_back3.png);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
	background-color: #d7e9f9;
}
body.admin-bar #header .header-wrap {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar #header .header-wrap {
		top: 46px;
	}
}
@media screen and (max-width: 768px) {
  #logo, .logo {
    align-content: center;
  }
}
@media screen and (max-width: 768px) {
    #main-wrap {
        width: 96% !important;
        margin: 10px auto;
    }
	#page-main {
		padding: 1.2rem !important;
		padding-top:1.2rem !important;

	}
}
@media screen and (max-width: 959px) {
    #single-main, #page-main {
		padding: 1.2rem !important;
		padding-top:1.2rem !important;
    }
}
/* ==========================================================
   グローバルナビゲーション（PC）
========================================================== */
#global-nav {
	border-top: 1px solid #eee;
	/*background: #fff;*/
}
#global-nav ul#globalnavul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width:1030px;
	background-color: rgba(255,255,255,.55);
}
#global-nav li {
	position: relative;
	list-style: none;
	margin: 0;
}
#global-nav ul#globalnavul > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 55%;
	border-left: 1px dotted #f0a5bb;
}
#global-nav li a {
	display: block;
	padding: 12px 20px;
	color: #4c4948;
	font-size: 16px;
	text-decoration: none;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#global-nav li a:hover {
	color: #4a6bb5;
}
#global-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 0;
	background: #fff;
	box-shadow: 0px 0px 10px #0000001a;
	z-index: 9991;
	border-radius: 0 0 8px 8px;
}
#global-nav li:hover > .sub-menu {
	display: block;
}
#global-nav .sub-menu li a {
	padding: 10px 15px;
	font-size: 14px;
	border-top: 1px solid #f0f0f0;
}
@media screen and (max-width: 767px) {
	#global-nav {
		display: none;
	}
}

/* 下層ページのヘッダー下メニュー（onlynav）は重複するため非表示 */
#onlynav {
	display: none !important;
}

/* ==========================================================
   ヘッダーSNSアイコン（PC）
========================================================== */
.header-logo{
	max-width:1200px;
	min-width:1050px;
	height:110px;
}
.header-sns {
	display: flex;
	align-items: center;
	gap: 10px;
	float: right;
	margin: 0px 15px 0 0;
}
.header-sns a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	color: #fff;
	font-size: 26px;
	text-decoration: none;
}
.header-sns a i{
	color: #fff;
}
.sns-line,
.band-line {
	background: #06C755;
}
.sns-instagram,
.band-insta {
	background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
@media screen and (max-width: 767px) {
	.header-sns {
		display: none;
	}
	.header-logo{
		min-width:375px;
		height:65px;
	}
	#header .header-wrap{
		background-position: center bottom -20px;
	}
}
a.page-numbers, .pagination .current{
	box-shadow: 0px 0px 10px #0000001a;
}
/* ==========================================================
   ドロワーメニュー（SPハンバーガー）
========================================================== */
.drawer-nav {
	padding: 5px 0;
}
.drawer-close {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #555;
	cursor: pointer;
	z-index: 10;
}
.drawer-menu {
	/*margin-top: 40px*/;
}
.drawer-menu-list {
	margin: 0;
	padding: 0 24px;
	list-style: none;
}
.drawer-menu-list li {
	list-style: none;
	margin: 0;
}
.drawer-menu-list > li > a {
	display: block;
	padding: 12px 0;
	color: #5a6fb8;
	font-size: 16px;
	text-decoration: none;
}
.drawer-menu-list .sub-menu {
	margin: 0 0 0 1.5em;
	padding: 0;
}
.drawer-menu-list .sub-menu li a {
	display: block;
	padding: 8px 0;
	color: #4c4948;
	font-size: 14px;
	text-decoration: none;
}

/* ==========================================================
   SP下部固定帯（お問合せフォーム・LINE・Instagram）
========================================================== */
#sp-fixed-band {
	display: none;
}
@media screen and (max-width: 767px) {
	#sp-fixed-band {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9980;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		background: #fff;
		padding: 8px 10px;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, .1);
	}
	/* 帯の高さ分の余白を確保し、最下部までスクロールした際に
	   copyrightが帯の上に見えるようにする */
	body {
		padding-bottom: 64px;
	}
	#sp-fixed-band .band-contact {
		display: flex;
		align-items: center;
		gap: 8px;
		background: #2fa89b;
		color: #fff;
		font-size: 14px;
		padding: 10px 18px;
		border-radius: 4px;
		text-decoration: none;
	}
	#sp-fixed-band .band-sns {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 8px;
		color: #fff;
		font-size: 26px;
		text-decoration: none;
	}
}

/* ==========================================================
   SPトップ 募集中枠の角丸をスクエア寄りに
========================================================== */
@media screen and (max-width: 767px) {
	#top-carousel .outer_area {
		border-radius: 10px !important;
	}
}

/* ==========================================================
   ページタイトルの縮小・フラッグ素材の削除
========================================================== */
h1.page_title {
	font-size: 23px !important;
}
@media screen and (max-width: 767px) {
	h1.page_title {
		font-size: 19px !important;
	}
}
#page-main {
	background-image: none !important;
	background-color: #fff;
}


/* 記事ページ上部のフラッグ素材の削除 */
#single-main {
	background-image: none !important;
	background-color: #fff;
}

/* ==========================================================
   固定ページタイトル（カラフルドット装飾）
========================================================== */
h1.page_title {
	color: #6b7ec7 !important;
	display: block !important;
	height: auto !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
}
/* package/page/style.css の h1::before/::after（旧装飾）を打ち消す */
h1.page_title::before {
	content: none !important;
	display: none !important;
}
h1.page_title::after {
	content: "" !important;
	position: static !important;
	display: block !important;
	width: 380px !important;
	max-width: 90% !important;
	height: 34px !important;
	margin: 6px auto 20px !important;
	border: none !important;
	background: url(/kodomokai/wp-content/uploads/2026/07/h1-dots.png) center center / contain no-repeat !important;
}

/* ==========================================================
   PCヘッダーの検索・お問合せ・プライバシーポリシーを非表示
========================================================== */
.header-wrap .nav_inleft {
	display: none !important;
}

/* ==========================================================
   フッターロゴ
========================================================== */
.footer_main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}
.footer_logo img {
	width: 100px;
	height: auto;
	display: block;
}
.footer_main .footer_navi {
	text-align: left;
}
.footer_main #copyright {
    text-align: left;
    background-image: url(/kodomokai/wp-content/uploads/2026/07/sakkoren.logo_.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 40px;
    padding: 12px 0 0 40px;
    height: 40px;
}
.br-sp { display: none; }
@media screen and (max-width: 767px) {
	.footer_main {
		/*flex-direction: column;*/
		gap: 10px;
	}
	.footer_main .footer_navi,
	.footer_main #copyright {
		text-align: left;
	}
	.footer_navi {
		margin: 0 auto;
	}
	 #copyright {
    line-height: 1.2;
    padding: 6px 0 0 40px !important;
	}
	.footer_logo img {
		width: 70px;

	}
	.br-sp{
		display: block;
	}
}

/* ==========================================================
   お問合せ固定ボタン（PCのみ・ページトップボタンの置き換え）
========================================================== */
#contact-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: #3fb39e;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
	z-index: 9970;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
#contact-fab i {
	font-size: 30px;
}
#contact-fab:hover {
	opacity: .85;
	color: #fff;
}
@media screen and (max-width: 767px) {
	#contact-fab {
		display: none;
	}
}

.firstview_custom {
  margin-left: auto;
  margin-right: auto;
}



/* =========================================================
   h2「ドット下線 + カラーバリエーション」
   既存の h2 グローバル指定に影響を与えない独立クラス
   （既存が color:!important のため、こちらも !important で上書き）
   ========================================================= */

.content h2.hd-dot-blue,
.content h2.hd-dot-green,
.content h2.hd-dot-red,
.content h2.hd-dot-yellow {
  position: relative;
  background: transparent;      /* 塗り箱を無効化 */
  border-radius: 0;
  text-align: left;
  font-weight: bold;
  padding: 0.5em 1em;
  margin: 1.5em 0 1em;
  border-bottom: 6px dotted currentColor !important;  /* ドット下線を文字色に追従 */
}
/* 標準見出しの疑似要素が出る場合に備えて解除 */
.content h2.hd-dot-blue::after,
.content h2.hd-dot-green::after,
.content h2.hd-dot-red::after,
.content h2.hd-dot-yellow::after { content: none; }

.content h2.hd-dot-blue   { color: #4a72c4 !important; }
.content h2.hd-dot-green  { color: #3aa876 !important; }
.content h2.hd-dot-red    { color: #d53c2b !important; }
.content h2.hd-dot-yellow { color: #e0982a !important; }


/* =========================================================
   h3 カラーバリエーション（下線見出しタイプ）
   ========================================================= */

/* Diver標準の下線見出しの形を維持しつつ色だけ切替 */
.content h3.hd-blue,
.content h3.hd-green,
.content h3.hd-red,
.content h3.hd-yellow {
  position: relative;
  font-weight: bold;
  text-align: left;
  background: transparent;
  padding: 0.3em 1em;
  margin: 1.2em 0 0.8em;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
/* 標準見出しの装飾疑似要素があれば消す */
.content h3.hd-blue::after,
.content h3.hd-green::after,
.content h3.hd-red::after,
.content h3.hd-yellow::after {
  content: none;
}

.content h3.hd-blue   { color: #4a72c4; border-bottom-color: #4a72c4; }
.content h3.hd-green  { color: #3aa876; border-bottom-color: #3aa876; }
.content h3.hd-red    { color: #d05050; border-bottom-color: #d05050; }
.content h3.hd-yellow { color: #e0982a; border-bottom-color: #f2b23e; }


/* =========================================================
   見出しカラーバリエーション（子テーマ上書き）
   h4 = 角丸の塗りつぶしバー / h5 = 左ライン
   ========================================================= */

/* ---- h4: 塗りつぶし角丸バー ---- */
/* Diver標準の斜めグラデ見出しを打ち消して単色＋角丸に上書き */
.content h4.hd-blue,
.content h4.hd-green,
.content h4.hd-red,
.content h4.hd-yellow {
  position: relative;
  color: #fff;
  text-align: left;
  font-weight: bold;
  padding: 0.2em 1em;
  margin: 0.8em 0 0.6em;
  border-radius: 8px;
  background: none;           /* 斜めグラデを解除 */
}
/* 標準見出しの右上「折り返し」疑似要素を消す */
.content h4.hd-blue::after,
.content h4.hd-green::after,
.content h4.hd-red::after,
.content h4.hd-yellow::after {
  content: none;
}

.content h4.hd-blue   { background-color: #4a72c4; }
.content h4.hd-green  { background-color: #3aa876; }
.content h4.hd-red    { background-color: #d05050; }
.content h4.hd-yellow { background-color: #f2b23e; }


/* ---- h5: 左ライン見出し（カラバリはh4と同じ） ---- */
.content h5.hd-blue,
.content h5.hd-green,
.content h5.hd-red,
.content h5.hd-yellow {
  position: relative;
  color: #333;
  font-weight: bold;
  text-align: left;
  padding: 0.1em 0 0.1em 1em;
  margin: 0.8em 0 0.6em;
  background: none;
  border: none;
  border-left: 6px solid #4a72c4;   /* 既定色。下で色ごとに上書き */
  border-bottom: 1px solid #4a72c4;   /* 既定色。下で色ごとに上書き */
  border-radius: 0;
}
.content h5.hd-blue::after,
.content h5.hd-green::after,
.content h5.hd-red::after,
.content h5.hd-yellow::after {
  content: none;
}

.content h5.hd-blue   { border-left-color: #4a72c4;border-bottom-color: #4a72c4; }
.content h5.hd-green  { border-left-color: #3aa876;border-bottom-color: #3aa876; }
.content h5.hd-red    { border-left-color: #d05050;border-bottom-color: #d05050; }
.content h5.hd-yellow { border-left-color: #f2b23e;border-bottom-color: #f2b23e; }

/* =========================================================
   ダウンロードリンク：データ形式アイコン付き
   Font Awesome 6 を利用 / 下線なし
   ========================================================= */

/* 共通：アイコンを ::before で先頭に付与、下線を消す */
a.dl-pdf,
a.dl-doc,
a.dl-xls,
a.dl-form {
  text-decoration: none;              /* アンダーバーなし */
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

a.dl-pdf::before,
a.dl-doc::before,
a.dl-xls::before,
a.dl-form::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;                   /* solid スタイル */
  display: inline-block;
  width: 1em;
  text-align: center;
  flex: 0 0 auto;
}

/* PDF（赤） */
a.dl-pdf::before  { content: "\f1c1"; color: #d0342c; }  /* fa-file-pdf */
/* Word（青） */
a.dl-doc::before  { content: "\f1c2"; color: #2b579a; }  /* fa-file-word */
/* Excel（緑） */
a.dl-xls::before  { content: "\f1c3"; color: #217346; }  /* fa-file-excel */
/* フォーム（水色） */
a.dl-form::before { content: "\f15c"; color: #4aa3df; }  /* fa-file-lines */

a.dl-pdf:hover,
a.dl-doc:hover,
a.dl-xls:hover,
a.dl-form:hover { text-decoration: underline; }

/* =========================================================
   .links-flex ボタンのカラーバリエーション
   ページごと / ボタンごとに色を切り替え
   ========================================================= */

/* ---- コンテナに付けると中のリンク全体を一括で色変え ---- */
.links-flex.lf-blue   a { background-color: #4a72c4; }
.links-flex.lf-green  a { background-color: #3aa876; }
.links-flex.lf-red    a { background-color: #d05050; }
.links-flex.lf-yellow a { background-color: #f5a53b; }

/* ---- リンク1つずつ個別に色を変えたいとき ---- */
.links-flex a.lf-blue   { background-color: #4a72c4; }
.links-flex a.lf-green  { background-color: #3aa876; }
.links-flex a.lf-red    { background-color: #d05050; }
.links-flex a.lf-yellow { background-color: #f5a53b; }

/* =========================================================
   .links-ward ボタンのカラーバリエーション
   ページごと / ボタンごとに色を切り替え
   ========================================================= */

/* ---- コンテナに付けると中のリンク全体を一括で色変え ---- */
.links-ward.lw-blue   a { background-color: #4a72c4; }
.links-ward.lw-green  a { background-color: #3aa876; }
.links-ward.lw-red    a { background-color: #d05050; }
.links-ward.lw-yellow a { background-color: #f5a53b; }

/* ---- リンク1つずつ個別に色を変えたいとき ---- */
.links-ward a.lw-blue   { background-color: #4a72c4; }
.links-ward a.lw-green  { background-color: #3aa876; }
.links-ward a.lw-red    { background-color: #d05050; }
.links-ward a.lw-yellow { background-color: #f5a53b; }

/* 任意：ホバーで少し暗くする */
.links-ward a:hover { filter: brightness(0.92); }

/* =========================================================
   強制文字位置設定
   ========================================================= */
.center{ text-align: center !important;}
.right{ text-align: right !important;}
.left{ text-align: left !important;}