/*
  Skin Name: 保育の寺子屋サイトデザインスキン
  Description: スリーアローズが制作する保育の寺子屋のサイトデザインです。
  Author: 株式会社スリーアローズ
  Author URI:https://3-arrows.co.jp/ 
  Version: 1.0.0
  Priority: 10
*/
/*以下にスタイルシートを記入してください*/

/**************************************************
** 公開サイトカスタマイズ
**************************************************/
:root {
	--main-color: #FF9494;				/* サイトメインカラー（ピンク） */
	--base-color1: #FFE3E1;			/* ベースカラー（薄い） */
	--base-color2: #FFD1D1;			/* ベースカラー（濃い） */
	--accent-color1: deeppink;			/* アクセントカラー（濃いピンク） */
	--gray-color: dimgray;				/* 灰色アクセント */
	--textbase-color: #333333;			/* 基本文字色 */
	--accent-color2: mediumseagreen;	/* アクセントカラー（グリーン） */
	--white-color: #ffffff;
}

/**************************************************
** 全体
**************************************************/

/* 更新 24.07.03 */
/* 目次クリック時のスクロールをゆっくりにする */
html {
	scroll-behavior: smooth;
}
/* 目次クリック先の上余白調整 */
:target {
	scroll-margin-top: 16px;
}

/************************
* Google Font クレー
・ロゴのテキスト(.logo-text, .logo-menu-button)
・アピールエリア(.appeal-title)
・詳細ページのタイトル(.entry-title)
・詳細ページの関連記事のタイトル(.elated-entry-card-title)
・一覧ページのリストタイトル(.list-title)
・一覧ページのカードタイトル(.entry-title)
・一覧ページのページネーション(.pagination .page-numbers)
・見出しh2、h3、h4、h5、h6
・ウィジェットのh2(.widget h2)
・ウィジェットタイトル(.widget-title)
・フッタータイトル(.footer-title)
・グローバルナビ（.navi-in a）
・関連記事タイトル（.related-entry-card-title）
・次の記事タイトル（.next-post-title）
・前の記事タイトル（.prev-post-title）
・新着記事タイトル（.new-entry-card-title）
・アーカイブタイトル（.archive-title）
・カテゴリ名リンク（.cat-item a）
・フッターナビリンク（.footer-in .footer-widgets a）
・アピールエリアメッセージ（.appeal-message）
・フッターSNSフォローメッセージ（.footer .sns-follow-message）
・保育防災ハンドブック特徴
・キャッチフレーズ（.header-container-in.hlt-top-menu .tagline）
************************/
.logo-text, .logo-menu-button, .appeal-title, .entry-title, .list-title, .entry-card-title, .pagination .page-numbers, .article h2, .article h3, .article h4, .article h5, .article h6, .widget h2, .widget-title, .related-entry-main-heading, .comment-title, .footer-title, .navi-in a, .related-entry-card-title, .next-post-title, .prev-post-title, .new-entry-card-title, .archive-title, .cat-item a, .footer-in .footer-widgets a, .appeal-message, .footer .sns-follow-message, .my-tokutyou-list p:first-child, .header-container-in.hlt-top-menu .tagline {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
/* 固定ページのタイトル */
.page .entry-title {
	border-bottom: 4px solid var(--main-color);
	padding-top: 2rem;
	padding-bottom: 0.8rem;	
	margin-bottom: 3rem;
}
/* 大見出しデザイン */
.article h2 {
	background-color: var(--base-color1);
}
/* 小見出しデザイン */
.article h3 {
	border-left-color: var(--base-color2);
}
/* 固定ページの投稿日を消す */
.page .date-tags {
	display: none;
}
/* カテゴリーページのアイキャッチを消す */
.category .eye-catch-wrap {
	display: none;
}

/**************************************************
** テーブルカスタマイズ
**************************************************/

/* テーブルの見た目調整 */
main figure.wp-block-table table {
    min-width: 80%;
}
/* テーブル見出しは折り返しなし */
main figure.wp-block-table table tr > td:first-child {
	white-space: nowrap;
}

/**************************************************
** ヘッダーカスタマイズ
**************************************************/

/* ヘッダーの見た目調整 */
.header .header-in {
	min-height: 90px;
}

/**************************************************
** グローバルメニューカスタマイズ
**************************************************/

/* グローバルメニューデザイン */
#navi .navi-in a {
	font-weight: bold;		/* 太字 */
}
/* グローバルメニューマウスオーバーで下線表示 */
#navi .navi-in a:hover {
	background-color: transparent;
}
#navi .navi-in a:after{
	position: absolute;
	content: "";
	left: 5%;
	bottom: 6px;
	height: 20px;
	width: 90%;
	background: rgba( 238,135,180,0.5 );
	transform: scale(0,1);
	transition: 0.3s;		/*線が0→100%になるまでの秒数*/
}
#navi .navi-in a:hover:after{
	transform: scale(1);	/*マウスオーバー後、線を100%出す*/
}

/**************************************************
** フッターカスタマイズ
**************************************************/

/* フッターデザイン */
#footer {
	border-top: double 6px var(--main-color);
}
/* SNSフォローボタン */
.footer .sns-follow-buttons {
  justify-content: center;	/*ボタンを中央寄せにする*/
}
.footer .sns-follow {
  margin: 0 0 24px 0;
}
.footer .sns-follow-buttons a {
  border-radius: 50%;
  width: 40px;				/*ボタンの横の大きさ*/
  height: 40px;				/*ボタンの縦の大きさ*/
  font-size: 20px;			/*アイコンのサイズ*/
  margin: 0 6px;			/*ボタン同士の間隔*/
  color: white;
}
.footer .sns-buttons a:hover {
	color: white;
}
/* インスタグラムのみ色をグラデーションに変更 */
.footer .instagram-button {
	background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat !important;
}
/* SNSフォローメッセージ */
.footer .sns-follow-message {
	letter-spacing: 0.1em;
	color: var(--accent-color1);
	font-weight: bold;
}
/* フッター余白調整 */
#footer .footer-left .widget_text {
	margin-bottom: 0;
}

/**************************************************
** 新・アピールエリア関連 add 2025.05
**************************************************/

/* アピールエリア全体 */
.appeal {
	background-position: top center;
	background-size: auto 100%;
}
/* アピールエリアコンテンツ内部 */
#appeal-in {
	position: relative;
	background-image: url('/wp-content/uploads/2025/07/hb-appeal-bg3.png');
	background-size: cover;
}
/* アピールメッセージエリア */
#appeal-in .appeal-content {
	position: absolute;		/* 右半分エリアに表示 */
	right: 25%;
	top: 50%;
	transform: translate(50%, -50%);
}
/* アピールメッセージデザイン */
.appeal-message {
	font-weight: bold;
	font-size: 2rem;
	color: var(--gray-color);
	margin-bottom: 0;
}
/* アピールメッセージ本文 */
.appeal-message .appeal-my-message {
	display: block;
	font-size: small;
}
/* アピールメッセージポイント */
.appeal-message .appeal-point1,
.appeal-message .appeal-point2 {
	padding: 15px;
	margin: 0 10px;
	position: relative;
	display: inline-block;
}
/* アピールメッセージポイント装飾(1) */
.appeal-message .appeal-point1::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	background-color: pink;	/* 半透明オレンジ */
	border-radius: 50%;
	filter: blur(20px);			/* ぼやけた効果を追加 */
	transform: translate(-50%, -50%);
	z-index: -1;
}
/* アピールメッセージポイント装飾(2) */
.appeal-message .appeal-point2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 80%;
	background-color: palegreen;	/* 半透明オレンジ */
	border-radius: 50%;
	filter: blur(20px);				/* ぼやけた効果を追加 */
	transform: translate(-50%, -50%);
	z-index: -1;
}

/**************************************************
** キャッチフレーズ関連
**************************************************/

/*.header-container-in.hlt-top-menu .header-in {
	flex-direction: row-reverse;
	margin-top: 20px;
}
.header-container-in.hlt-top-menu .tagline {
	display: block;
	font-size: small;
	color: grey;
}*/

/**************************************************
** お問い合わせページカスタマイズ
**************************************************/

/* 入力フォーム各種 */
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select, input[type="submit"] {
	border: 3px solid rgba( 221, 221, 221, .7 );
	border-radius: 10px;
	background-color: rgba( 240, 240, 232, .3 );
	margin-top: 0.5em;
}
/* 検索フォーム */
.search-submit {
	margin-top: 0.2em;
}
/* フォームの必須マーク */
.form-required {
	background: red;
	padding: 4px 4px;
	font-size: 12px;
	color: white;
	margin-right: 10px;
	border-radius: 3px;
	font-weight: bold;
}

/* 更新 23.06.06 */
/**************************************************
** お問い合わせフォーム：ご依頼追加対応
**************************************************/

/* 項目名を太字に */
.wpcf7 p > label {
	font-weight: bold;
}
/* 「その他」選択時の入力フォーム */
.wpcf7-list-item.last.has-free-text {
	display: flex;
	align-items: center;
}
.wpcf7-list-item.last.has-free-text > label {
	flex-shrink: 0;
	margin-right: 10px;
}
/* 横幅Mフォーム */
.wpcf7 .shortfm {
	width: 15rem;
	max-width: 100%;
	margin-right: 0.5em;
}
/* 横幅Sフォーム */
.wpcf7 .shortfmEx {
	width: 4rem;
	max-width: 100%;	
	margin-right: 0.5em;
}
/* フォームの任意マーク */
.form-optional {
	background: grey;
	padding: 4px 4px;
	font-size: 12px;
	color: white;
	margin-right: 10px;
	border-radius: 3px;
	font-weight: bold;
}
/* デザイン調整 */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio {
	display: inline-block;
	margin-top: 0.5em;
}
.wpcf7 .sub-items {
	display: inline-block;
	margin-top: 0.8em;
}
.wpcf7 .my-time-group {
	display: inline-block;
	margin-left: 1em;
}
/* お問い合わせ注意書き 2024.6.19追加*/
.wpcf7 small {
	margin-left: 1rem;
	font-weight: normal;
	font-size: 75%;
}
/* モバイル以外では改行なし */
.mobile-only {
	display: none;
}

/**************************************************
** 保育防災ハンドブックページカスタマイズ
**************************************************/

/* 記入例 */
.my-entry-example.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
	height: 150px;
}
.my-entry-example.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
  object-fit: cover;
	object-position: top left;
}
.my-entry-example.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.6) 70%,transparent);
	padding: 20px 6px 16px 6px;
	font-weight: bold;
}
/* 保護者向け */
.article p.my-handbook-hogosya-title {
	margin-bottom: 0.8em;
}
.blank-box.my-handbook-style {
	padding: 0;
}
.iconlist-box.my-handbook-style li {
	margin-bottom: 0.2em;
}
/* ハンドブック特徴デザイン */
.my-tokutyou-group {
	counter-reset: list 0;
}
.my-tokutyou-group div.my-tokutyou-list {
	counter-increment: rank;
}
.my-tokutyou-list p:first-child {
	position: relative;
	color: var(--textbase-color);
	background: honeydew;
	line-height: 1.4;
	padding: 0.25em 0.5em;
	margin: 2em 0 0.5em;
	font-weight: bold;
	border-top: solid 2px var(--accent-color2);
	border-bottom: solid 2px var(--accent-color2);
}
.my-tokutyou-list p:first-child:after {
	position: absolute;
	content: '特徴'counter(rank);
	background: var(--accent-color2);
	color: var(--white-color);
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 4px 7px 4px;
	line-height: 1;
	letter-spacing: 0.05em;
}

/**************************************************
** 法人概要ページカスタマイズ
**************************************************/

/* アイコンリストデザイン調整（法人概要プロフィール欄※class=my-license-style） */
.iconlist-box.my-license-style {
	padding: 0;
}
.iconlist-box.my-license-style li {
	font-size: 0.75em;
	margin-bottom: 0.2em;
}
.iconlist-box.my-license-style li::before {
	margin-left: -1.2em;
}
.iconlist-box.my-license-style ul {
	display:flex;
	flex-wrap:wrap;
	gap: 0 1.2em;
	padding-left: 30px;
}
.article .iconlist-box.my-license-style ul li {
	width: 45%;
}
.article .iconlist-box.my-license-style .iconlist-title {
	background-color: #f7c6bd;
	margin-bottom: 1em;
}
/* 画像のキャプション */
.wp-block-image figcaption {
	margin-top: 0.2em;
}

/**************************************************
** プライバシーポリシー・利用規約ページカスタマイズ
**************************************************/

/* リストカスタマイズ */
.article ol li, .article ul li {
	margin-bottom: 0.8em;
}
/* リスト入れ子 */
ol li > ol.my-nest-style {
	margin-left: 0.8em;
	margin-bottom: 0;
}
ol li > ol.my-nest-style li {
	list-style-type: none;
	counter-increment: cnt;
	position: relative;
}
ol li > ol.my-nest-style li:before {
	content: "(" counter(cnt) ")";
	display: inline-block;
	margin-left: -3.5em; 
	width: 3em;
	text-align: right;
	position: absolute;
	top: 0;
	left: 0;
}
/* プライバシーポリシー・利用規約ページはモバイルボタンなし */
.page-id-109 .mobile-menu-buttons,
.page-id-3 .mobile-menu-buttons {
	display: none;
}

/**************************************************
** 保育防災ハンドブック（アプリ版）ページカスタマイズ
**************************************************/

/* アプリリンク */
.download_btn {
	margin-top: -1em;
}

/* 更新 23.05.08 */
/**************************************************
** 保育防災スペシャリスト講座ページカスタマイズ
**************************************************/

/* メリット説明の見出し */
.wp-block-columns.my-specialist-style .wp-block-column {
	padding: 20px 10px;
}
.article .wp-block-columns.my-specialist-style .wp-block-column h4 {
	 text-align: center;
	 border-top: none;
	 border-bottom: double 5px var(--main-color);
	}
.wp-block-button__link:hover {
	color: var(--base-color1);	
}

/* 更新 24.07.03 */
/**************************************************
** 目次カスタマイズ
**************************************************/

/* リストアイコン付与 */
.toc-title:before {
	font-family: "Font Awesome 5 Free";
    content: "\f03a";
	font-weight: 900;
    margin-right: .5em;
    padding: .3em;
}
/* 目次リンクカラーカスタマイズ */
.toc a:hover {
    text-decoration: none;
    background-color: var(--base-color1);
}
/* h2目次は太字にする */
ol.toc-list > li > a {
	font-weight: bold;
}

/* 更新 24.07.03 */
/**************************************************
** フロントページカスタマイズ
**************************************************/

/* フロントページのタイトルを非表示にする */
.home.page .entry-title {
	display: none;
}
/* フロントページの見出しデザイン */
.home.page .article h2 {
	background-color: transparent;
	margin: 2em 0 0;
	padding-bottom: 0;
}
.list-title-in {
	padding: 0 32px;
}
.list-title-in:before, .list-title-in:after {
	width: 24px;
}
/* ピックアップ記事（先頭）のみ見出しの上余白なし */
.home.page .article .my-pickup-block h2 {
	margin-top: 0;
}
/* ピックアップ記事（先頭）下余白をパディングに変更 */
.home.page .article .my-pickup-block {
	margin-bottom: 0;
	padding-bottom: 1.8em;
}
/* ピックアップ記事横並び */
.home div.my-pickup-list {
	display: flex;
	flex-direction: row;
	margin-bottom: 0;
	margin-top: 20px;
}
/* 新着記事リストの下余白なし */
.home.page div.info-list-box {
	margin-bottom: 0;
}
.home.page div.info-list-box div.info-list {
	padding-bottom: 0;
}
/* カテゴリごと投稿一覧ブロック余白 */
.home div.my-category-list ul {
	padding: 20px 20px 0 20px;
	margin-bottom: 0;
}
/* カテゴリごと投稿一覧に下線をひく */
.home div.my-category-list ul li {
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px dashed #ccc;
}
.home div.my-category-list ul li:last-child {
	border-bottom-style: none;
}
/* カテゴリごと投稿一覧の日付デザイン */
.home div.my-category-list time.wp-block-latest-posts__post-date {
	font-size: 12px;
	opacity: 0.6;
}
/* 新着情報（投稿一覧）のリンクデザイン */
.home div.my-category-list a {
	color: var(--textbase-color);
	text-decoration: none;
}
.home div.info-list-box a:hover,
.home div.my-category-list a:hover {
	text-decoration: underline;
	color: var(--accent-color1);
}
/* もっと見るボタンデザイン */
.home div.my-category-list a.list-more-button:hover {
	color: var(--textbase-color);
	text-decoration: none;
}

/* 更新 24.12.09 */
/**************************************************
** peatix埋め込みウィジェットカスタマイズ
**************************************************/
.single iframe[src*="https://peatix.com"] {
	display: block;
	margin: 0 auto;
	width: 93%;
	height: 440px;
}

/* 更新 24.12.11 */
/**************************************************
** クラウドファンディング案内
**************************************************/
.my-crowdfunding {
	display: flex;
	justify-content: center;
}

/* 更新 24.12.12 */
/**************************************************
** 新着情報 30日以内記事
**************************************************/
.hb-new-label {
	background-color: transparent;
	color: var(--accent-color1);
	font-size: 14px;
	margin-left: 4px;
}

/**************************************************
** クリック可能な画像をわかりやすく add 2025.05
**************************************************/
.hb-interactive-image:hover {
  opacity: 0.8;
  transition: 0.3s ease-in-out;
}

/**************************************************
** 新サイトロゴ対応 add 2025.07
**************************************************/
.header-container-in.hlt-top-menu .logo-header,
.header-container-in.hlt-top-menu .logo-header img {
	max-height: 80px;
}

/**************************************************
** レスポンシブデザイン用のメディアクエリ
**************************************************/

/* 1023px以下 */
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/* 834px以上 */
@media screen and (min-width: 834px) {
	/* おすすめカードデザイン */
	.recommended .widget-entry-cards.card-large-image a {
		flex: 1 1 25%; /* 各カードを等分割 */
	}
	/* おすすめカード画像サイズ */
	.recommended .widget-entry-cards.card-large-image a img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

/* 834px以下 */
@media screen and (max-width: 834px){
	/* 保育防災ハンドブック特徴 */
	.article .wp-block-columns.my-handbook-info .wp-block-column p {
		margin-bottom: 1.8em;
	}
	/* テーブルサイズを画面いっぱいに */
	main figure.wp-block-table table {
		width: 100%;
	}
}

/* スマホ */
@media screen and (max-width: 480px){
	/* アピールメッセージ */
	.appeal-message {
		font-size: 1.5rem;
	}
	/* SNSフォローメッセージ */
	.footer .sns-follow-message {
		font-size: small;
	}
	/* 保育防災ハンドブック保護者向け */
	.my-handbook-hogosya {
		padding-top: 1em;
	}
	/*法人概要資格リスト*/
	.iconlist-box.my-license-style ul {
		display: block;
	}
	.article .iconlist-box.my-license-style ul li {
		width: 95%;
	}
	/* お問い合わせ注意書き 2024.6.19追加*/
	.wpcf7 small {
		margin-left: 0;
	}
	/* モバイルのみ改行 */
	.mobile-only {
		display: inline;
	}
	/* ピックアップ記事は一つだけにする */
	.home div.my-pickup-list a:nth-child(2) {
		display: none;
	}
	/* 更新 24.12.09 */
	/**************************************************
	** peatix埋め込みウィジェットカスタマイズ
	**************************************************/
	.single iframe[src*="https://peatix.com"] {
		height: 464px;
	}

/**************************************************
** アピールエリア関連 add 2025.05
**************************************************/
	.appeal {
		margin-bottom: calc(1em + 120px);
	}
	#appeal-in {
		background-position: -16px center; /* 16px 左へ移動 */
	}
	.appeal-message {
		font-size: 1.4rem;
	}
	#appeal-in .appeal-content {
		right: auto;
		top: auto;
		bottom: -120px;
		left: 0;
		transform: translate(0%, 0%);
		width: 100%;
		padding: 0.6em;
		height: 120px;
	}

/**************************************************
** フロントページ add 2025.06
**************************************************/
	.home.page .article h2 {
		font-size: 18px;	/* レイアウトが崩れないようにフォントを小さくする */
	}
}
	
/* 600px以上 */
@media screen and (min-width: 600px) {
	/* 保育防災ハンドブック記入例 */
	.my-entry-example.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
		height: 200px;
	}
}