@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
		/*ヘッダーの余白調整*/
	  	.header div.header-in {
								min-height!important: auto!important;
								height: 55vw!important;
						  		}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/***********************************************************************************************************************************************
** PC・スマホ共通
/************************************************************************************************************************************************/
/*------------------------------------------------------------------------------------------------------*/
/* 全体の編集 */
/*------------------------------------------------------------------------------------------------------*/
			:root{
				--nomal-color:#fff; /*白*/
				--carousel-color:#fff;
				--head-color:#F4F5F7; /*追加#135389*/
				--head-a-color:#2E2E2E;  /*追加#fff*/
			}

	/* 背景色を白にする（不要なら削除） */
		body {
			background-color:var(--nomal-color)!important; /* 背景色を白に指定 #e8e6db*/
			}
		main#main {
			background-color:var(--nomal-color);
		}

		/* カルーセルの背景色を統一 -------------------------------*/
		body,
		#carousel,
		#carousel-in,
		body.home .carousel-content,
		body.home .slick-list,
		body.home .slick-track {
		background-color: var(--carousel-color) !important;
		}

		/* slick-list の左右の余白をなくす */
		body.home .slick-list {
			padding: 0 !important;
		}

		/* カード同士の余白をなくす（必要なら） */
		body.home .slick-slide {
			margin: 0 !important;
		}

		/* 通常のカード背景 */
		body.home .carousel-entry-card-wrap {
			background-color: var(--carousel-color);
			transition: background-color 0.3s ease; /* なめらかに色変化 */
		}

		/* カーソルを合わせたとき */
/*		.new-entry-cards .post:hover,
		.popular-entry-cards .post:hover,
		.section-wrap.cate .post:hover,
		.entry-card-wrap:hover,
		.carousel-entry-card-wrap:hover {
			background-color: #b5b5ae; /* 好きな色に変更 */
/*		}*/

/*-----------------------------------------------------------------------------------------------------*/
/* 個別ページの編集 */
/*------------------------------------------------------------------------------------------------------*/

body.single article.article {
  background-color: #ffffff; /* 白色 */
  padding: 20px;
  border-radius: 8px;
}

/*-----------------------------------------------------------------------------------------------------*/
/* メニューの編集 */
/*------------------------------------------------------------------------------------------------------*/

	 /*ヘッダー（全体）*/
		#header,#header-container,#site-header.fixed,nav#navi,.menu-header .sub-menu {
							background-color:var(--head-color)!important;							
							}		

	 /*ヘッダー（ロゴ）*/
		#header {
							/*border-bottom: 1px solid #3498db !important;*/
							/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;*/
							}
		#header .logo .site-name-text{
							color:var(--head-a-color)!important;  /* 文字色を白に変更 */
					  		vertical-align: top;
							font-size:28px;
							font-weight: 700;     /* 太さを変更（700が標準の太字） */
							margin-top: 10px;   /* 上の余白 */
							padding-bottom: 5px; /* 下の余白 */
							}

	 /*ヘッダー（下スクロールなし）*/
		#header-container {
							border-bottom: 1px solid #fff/*#135389;/*--head-color*/
							box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
							background-color: rgba(255, 255, 255, 0.9); /* 白色、透明度90% */
							}

		#header-container .navi {
							/*background-color: transparent;*/
							background-color: rgba(255, 255, 255, 0.9); /* 白色、透明度90% */
							}

	 /*ヘッダー（下スクロール時）*/
		#site-header.fixed{
							border-bottom: 1px solid #fff/*#135389;  /* 枠線の色と太さを指定 */
							box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* メニューの下に影を追加 */
							}
/*------------------------------------------------------------------------------------------------------*/
/* 固定メニューの編集 */
/*------------------------------------------------------------------------------------------------------*/
	 /*固定メニュー*/
		nav#navi{
							/*border-bottom:1px solid;*/
							/*border-top:1px solid;*/
							}
		nav#navi .item-label{
							color: var(--head-a-color)!important;  /* 文字色を白に変更 */
							}

	 /*固定メニューのサブメニュー*/
		.menu-header .sub-menu{
							border-top: 1px solid var(--head-color);  /* 枠線の色と太さを指定 */
							border-bottom: 1px solid var(--head-color);  /* 枠線の色と太さを指定 */
							box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* メニューの下に影を追加 */
							}

/*------------------------------------------------------------------------------------------------------*/
/* フッターの編集 */
/*------------------------------------------------------------------------------------------------------*/

		#footer,#footer-container,.footer {
							background-color: var(--head-color) !important;
							color:var(--head-a-color) !important;           /* 文字色 */
							border-top: 1px solid var(--head-color);/* 枠線の色と太さを指定 */
							box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);  /* メニューの下に影を追加 */
							}

		#footer a,#footer-container a,.footer a {
							color: var(--head-a-color) !important;
							}
/*------------------------------------------------------------------------------------------------------*/
/* ヘッダーモバイルボタンの編集 */
/*------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 834px) {

		.menu-drawer::before {
			content: "MENU";
			font-size: 1.1em; /* メニュー項目と同じにする */
			display: block;
			width: 100%;                 /* ← 右端まで背景を伸ばす */
			background-color: #3d6b99;
			color: #fff;
			padding: 8px 16px;          /* 左右に余白 */
			font-weight: bold;
			letter-spacing: 1px;
			text-align: left;            /* ← 文字は左寄せ */
			box-sizing: border-box;      /* padding込みで100% */
			margin: 0;              /* ← 余計な余白を消す */
		  }
	
		/*ヘッダーモバイルボタンの文字色と背景色を変更*/
		.search-menu-button.menu-button,
		.navi-menu-button.menu-button{
							background:var(--head-color);
							color: var(--head-a-color);
							height: 60px;
							}

		.logo-menu-button.menu-button{
							background:var(--head-color);
								height: 60px;
							}

		.mobile-menu-buttons{
							background:var(--head-color);
							height: 60px;
							}

		/*ヘッダーの文字色と背景色を変える追加CSS*/
		.menu-button-in{
							background-color:var(--head-color)!important;
							color: var(--head-a-color)!important;
							  font-size: 28px;   /* 好きなサイズに変更 */
						  font-weight: bold; /* 太字にする場合 */
							}

		/*スライドインメニューをカスタマイズ*/
		.navi-menu-content{
							left: auto;
							right: 0;
							background-color: rgba(244, 245, 247,0.9);
							transform: translateX(101%);
							}

		.menu-drawer a{
							font-size: 1.0em;/*文字の大きさ*/
							color: var(--head-a-color);/*文字の色*/
							font-weight: bold;
							height: 2em;/*行の高さ*/
			   				padding-left: 16px; /* MENU と同じにする */
							padding-right: 16px;
    						display: block;      /* 文字をブロックにして padding が効くように */
							border-bottom: 1px solid #ccc; /* 下線（薄いグレー） */
							}

		.sub-menu a {
							font-size: 1.0em;
							color: var(--head-a-color);/*文字の色*/
							font-weight: bold;
							height: 2em;/*行の高さ*/
							}

		.menu-drawer a:hover{
							color: rgba(0,0,0,0.7);
							background-color: rgba(232,230,219,0.9);
							}

}
/*------------------------------------------------------------------------------------------------------*/
/* ページ内見出しの編集 */
/*------------------------------------------------------------------------------------------------------*/

		/* カルーセル上の余白を広げる */
		.section-wrap .new-entry-cards,
		.section-wrap .carousel-content {
							margin-top: 30px;  /* 上の余白を30pxに設定 */
							}

/*------------------------------------------------------------------------------------------------------*/
/* トップページ内見出しの編集 */
/*------------------------------------------------------------------------------------------------------*/

			:root{
				--new-color:#fff;/*#8fa9b9;*/
				--cate-color:#f9f9f9;/*#EAE6E1;/*#b3c1c7;*/
				--pop-color:#fff;/*#a1b5c0;*/
			}

			/* 新着 見出し部分-------------------------------------------------*/

			body.home .section-wrap.new .heading {
			  background-color:var(--new-color); /* 好きな色 */
			  color: #000;              /* 文字色 */
			  padding: 10px 15px;       /* 余白を調整 */
			  border-radius: 0;   /* 角丸はなしにする場合 */
			  display: block;     /* 横幅いっぱいに広げる */
			  /*width: 100%;        /* 100%幅で背景色を広げる */
			  width: 100vw;               /* 画面幅いっぱい */
			  margin-left: calc(-50vw + 50%); /* コンテナ中央寄せ解除 */  
			  box-sizing: border-box;
			}

			body.home .section-wrap.new {
			  background-color: var(--new-color); /* グレー系の背景 */
			  display: block;     /* 横幅いっぱいに広げる */
			  width: 100vw;               /* 画面幅いっぱい */
			  margin-left: calc(-50vw + 50%); /* コンテナ中央寄せ解除 */  				
			}

			body.home .section-wrap.new .new-entry-cards {
			  background-color: var(--new-color); /* 好きな色 */
			  padding: 20px; /* 中身と背景の間に余白を追加（任意） */
			  border-radius: 8px; /* 角を丸くする（お好み） */
			}

			/* カテゴリー 見出し部分 -------------------------------------------*/
			body.home .section-wrap.cate .heading {
			  background-color: var(--cate-color); /* 好きな色 */
			  color: #000;              /* 文字色 */
			  padding: 10px 15px;       /* 余白を調整 */
			  border-radius: 0;   /* 角丸はなしにする場合 */
			  display: block;     /* 横幅いっぱいに広げる */
			  /*width: 100%;        /* 100%幅で背景色を広げる */
			  width: 100vw;               /* 画面幅いっぱい */
			  margin-left: calc(-50vw + 50%); /* コンテナ中央寄せ解除 */	
			  box-sizing: border-box;
			}

			body.home .section-wrap.cate {
			  background-color: var(--cate-color); /* グレー系の背景 */
			  display: block;     /* 横幅いっぱいに広げる */
			  width: 100vw;               /* 画面幅いっぱい */
			  margin-left: calc(-50vw + 50%); /* コンテナ中央寄せ解除 */  				
			}

			body.home .section-wrap.cate .new-entry-cards {
			  background-color: var(--cate-color); /* 好きな色 */
			  padding: 20px; /* 中身と背景の間に余白を追加（任意） */
			  border-radius: 8px; /* 角を丸くする（お好み） */
			}

			/* 人気記事 見出し部分 --------------------------------------------*/
			body.home .section-wrap.pop .heading{
			  background-color: var(--pop-color); /* 好きな色 */
			  color: #000;              /* 文字色 */
			  padding: 10px 15px;       /* 余白を調整 */
			  border-radius: 0;   /* 角丸はなしにする場合 */
			  display: block;     /* 横幅いっぱいに広げる */
			  /*width: 100%;        /* 100%幅で背景色を広げる */
			  width: 100vw;               /* 画面幅いっぱい */
			  margin-left: calc(-50vw + 50%); /* コンテナ中央寄せ解除 */	
			  box-sizing: border-box;
			}

			body.home .section-wrap.pop {
			  background-color: var(--pop-color); /* グレー系の背景 */
			  display: block;     /* 横幅いっぱいに広げる */
			  width: 100vw;               /* 画面幅いっぱい */
			  margin-left: calc(-50vw + 50%); /* コンテナ中央寄せ解除 */  				
			}

			body.home .section-wrap.pop .popular-entry-cards {
			  background-color: var(--pop-color); /* 好きな色 */
			  padding: 20px; /* 中身と背景の間に余白を追加（任意） */
			  border-radius: 8px; /* 角を丸くする（お好み） */
			}

			/*-----------------------------------------------------------------*/

			/* カード全体に背景色をつけたい場合 */
			body.home .section-wrap.new .new-entry-card,
			body.home .section-wrap.cate .new-entry-card,
			body.home .section-wrap.pop .popular-entry-card{
			  background-color: transparent; /* 白を消して親の色を反映 */
			  box-shadow: none;              /* 影が不要なら消す */
			}

			/* すべてのカードの背景色を統一 */
			body.home .new-entry-cards .post,
			body.home .popular-entry-cards .post,
			body.home .section-wrap.cate .post {
			  background-color: #fff; /* 全カードを同じ色に */
			  border-radius: 8px;        /* 角を丸くしたい場合 */
			  padding: 15px;             /* 内側の余白 */
			  box-sizing: border-box;    /* 幅計算にパディングを含める */
			}

			/* さらにカードの角丸を親に合わせる場合 */
			body.home .section-wrap.new .new-entry-card,
			body.home .section-wrap.new .new-entry-card-content,
			body.home .section-wrap.cate .new-entry-card,
			body.home .section-wrap.cate .new-entry-card-content,
			body.home .section-wrap.pop .popular-entry-card,
			body.home .section-wrap.pop .popular-entry-card-content{
			  border-radius: 8px;
			}
			/*------------------------------------------------------------------*/

			/* セクション全体の上の余白を詰める */
			body.home .section-wrap {
				margin-top: 1px;    /* 上の余白を小さく */
				padding-top: 1px;   /* 内側の余白も小さく */
			}

			/* 見出し自体の余白も調整 */
			body.home .section-wrap .heading {
				margin-top: 1px;     /* 見出し上の余白をさらに詰める */
			}

			/* 見出し上下の背景色を広げる */
			body.home .section-wrap .heading:has(+ .new-entry-cards),
			body.home .section-wrap .heading:has(+ .popular-entry-cards),
			body.home .section-wrap.cate .heading {
				padding-top: 25px;    /* 上の余白を広げる */
				padding-bottom: 35px!important; /* 下の余白を広げる */
				position: relative;    /* 下線位置調整用にrelativeに */
			}

			/* 下線の位置を文字の真下に固定 */
			body.home .section-wrap .heading::after {
				bottom: 15px;  /* 下線を文字下に固定（文字サイズや好みに合わせて調整） */
			}

/*------------------------------------------------------------------------------------------------------*/
/* トップページ外見出しの編集 */
/*------------------------------------------------------------------------------------------------------*/
			/* 全ページ共通の見出し下線調整 */
			.section-wrap .heading {
				position: relative; /* 下線を絶対配置するため */
				padding-bottom: 15px; /* 下線と文字の間隔 */
			}

			.section-wrap .heading::after {
				content: "";
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 5px; /* 文字下に少し余白を空ける */
				width: 2.5rem;
				height: 1px;
				border-radius: 10px;
				background-color: #000;
			}

/*------------------------------------------------------------------------------------------------------*/
/* 全体の編集（優先度低）*/
/*------------------------------------------------------------------------------------------------------*/
/* トップページのコンテンツを3カラムのグリッドレイアウトに */
.main-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3カラム */
    gap: 30px;  /* 各カラムの間隔 */
    margin-top: 30px;
}

.main-content .post {
    background-color: #000000;  /* コンテンツカードの背景色 #f4f4f4*/
    border-radius: 8px;  /* カードの角を丸く */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 軽いシャドウ */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-content .post:hover {
    transform: translateY(-10px);  /* ホバー時に少し浮かせる */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);  /* シャドウを強く */
}

/*------------------------------------------------------------------------------------------------------*/
/* フォーム：お問い合わせ　contact form7*/
/*------------------------------------------------------------------------------------------------------*/
.haveto{
font-size:9px;
padding:2px 5px;
background:#90C31F;/*必須 色の変更はこちら*/
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
#formbtn{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border:none;
border-radius:50px;
margin:25px auto 0;
transition:0.3s;
}
#formbtn:hover{
background:#90C31F;/*送信 色の変更はこちら*/
color:#fff;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
.wpcf7 p{
margin-bottom: 0em;
}

/*------------------------------------------------------------------------------------------------------*/
/* トップページカスタマイズ*/
/*------------------------------------------------------------------------------------------------------*/
/*https://turicco.com/cocoon-toppage/*/
/*------------------------------------------------------------------------------------------------------*/


/* トップページヘッダー・フッター非表示 */
.home .article-header,
.home .article-footer {
	display: none; /* トップページのヘッダーとフッターを非表示に */
}

/* セクションの余白と枠調整 */
.section-wrap {
	padding-top: 0em;/*1em; /* 上部の内側余白を5em */
	padding-bottom: 1em; /* 下部の内側余白を5em */
	margin-top:0;
	margin-bottom: 0; /* 下部の外側余白を0 */
}

/* 見出し ------------------------------------------------------------ */
.heading {
	text-align: center; /* 見出しを中央揃え */
	font-size: 5rem; /* 見出しの文字サイズ */
	color: #30343A; /* 見出しの色を設定 #b5b5ae　#a1a199,#4f4f4a*/
	letter-spacing: 2px; /* 文字間隔を2px */
	line-height: 1.6; /* 行の高さを1.6倍 */
	font-weight: bold; /* 太字に設定 */
	position: relative; /* 基準点を設定 */
	padding-top:0rem;
	padding-bottom: 1rem; /* 下部の内側余白を1rem */
	margin-top:0;
	margin-bottom: 3rem; /* 下部の外側余白を3rem */
}

/*480px以下*/
@media screen and (max-width: 480px){
	.heading {
	font-size: 3rem; /* 見出しの文字サイズ */
	}
}

.heading span {
	display: block; /* サブ見出しをブロック要素化 */
	font-size: .9rem; /* サブ見出しの文字サイズ */
	font-weight: normal; /* サブ見出しを通常の太さに設定 */
}

/* 見出し下の線 */
.heading::after {
	display: block; /* 擬似要素をブロック要素に */
	content: ""; /* 内容を空に */
	width: 2.5rem; /* 線の幅を2.5rem */
	height: 1px; /* 線の高さを1px */
	border-radius: 10px; /* 線に丸みを追加 */
	background-color: #000000; /* 線の色を設定 #b5b5ae*/
	position: absolute; /* 位置を絶対配置に */
	bottom: 0; /* 下部の位置を基準に */
	left: 50%; /* 左から50%で中央揃え */
	transform: translateX(-50%); /* 中央寄せを調整 */
}

/* リンクボタン---------------------------------------------- */

/* ボタンの配置 */
.link-btn {
	display: block; /* ボタンをブロック要素に */
	text-align: center; /* ボタン内のテキストを中央揃え */
}

/* ボタンのスタイル */
.link-btn a {
	display: inline-block; /* インラインブロック要素 */
	border: 1px solid #000000; /* ボタンの枠線（色はグレー#b5b5ae） */
	color: var(--cocoon-text-color); /* 文字色 */
	min-width: fit-content; /* ボタンの最小幅を自動調整 */
	width: auto; /* ボタンの幅を自動調整 */
	padding: .7em 5em; /* 内側余白を上下0.7em, 左右5em */
	text-decoration: none; /* 下線を削除 */
	border-radius: 0; /* 角の丸みを0 */
	transition: .3s all; /* 変化をスムーズに */
	position: relative; /* 起点設定 */
}

/* 834px以下のボタン幅調整 */
@media screen and (max-width: 834px) {
	.link-btn a {
					min-width: 80%; /* モバイルでの最小幅を80%に */
					margin-bottom: 20px; /* ←ここで余白の大きさを調整 */
	}
}

/* 矢印のスタイル */
.link-btn a:after {
	content: ''; /* 擬似要素の内容を空に */
	border-bottom: 1px solid var(--cocoon-text-color); /* 下矢印の線 */
	border-right: 1px solid var(--cocoon-text-color); /* 右矢印の線 */
	width: 15px; /* 矢印の幅 */
	height: 3px; /* 矢印の高さ */
	transform: skewX(45deg); /* 45度傾斜 */
	position: absolute; /* 位置を絶対配置に */
	right: 20px; /* 右から20pxに配置 */
	bottom: 50%; /* 下から50%の位置 */
	transition: .3s all; /* 変化をスムーズに */
}

/* ホバー時の変化 */
.link-btn a:hover {
	--link-btn-color: #b5b5ae; /* ホバー時のボタン色 */
	background-color: var(--link-btn-color); /* 背景色を変化 */
	border-color: var(--link-btn-color); /* 枠線色を変化 */
	color: var(--cocoon-white-color); /* 文字色を白に */
}

/* 矢印のホバー効果 */
.link-btn a:hover:after {
	border-color: var(--cocoon-white-color); /* 矢印色を白に */
	right: 15px; /* 矢印の位置を左へ少し移動 */
}

/* 記事カードの最大幅設定 --------------------------------------------- */
.widget-entry-cards.card-large-image .a-wrap {
	max-width: 600px; /* 最大幅を600pxに制限 */
	width: 100%;/*カード幅を揃える*/
}

/* サムネイル（大）記事を横並びにする(grid)------------------------------------------ */
.widget-entry-cards.large-thumb {
	display: grid; /* グリッドレイアウトを適用 */
	justify-items: center; /* アイテムを中央揃え */
	gap: 16px; /* アイテム間の隙間を16pxに */
}

/*ウィジェット記事の投稿日、更新日を表示させる*/
.widget-entry-card-date {
	display:block;
	text-align: right;/*右寄せ*/
}

/*日付にアイコン追加*/
.widget-entry-card-post-date::before,
.widget-entry-card-update-date::before{
	font-family: "Font Awesome 5 Free";
	font-weight:800; 
	padding-right: 3px; /*右余白*/
	font-size:10px;
}

/*投稿日アイコン*/
.widget-entry-card-post-date::before{ 
	content: "\f017"; /*fa fa-clock-oアイコン*/
}

/*更新日アイコン*/
.widget-entry-card-update-date::before{ 
	content: "\f1da"; /*fa-historyアイコン*/
}

/* 新着記事サムネイルのグリッド */
.new-entry-cards.large-thumb {
	display: grid!important; /* グリッドレイアウトを適用 */	
	grid-template-columns: repeat(2, 1fr)!important; /* 2列で均等に分配 */
	gap: 16px!important; /* アイテム間の隙間をつけたいなら */
}

/* 人気記事サムネイルのグリッド */
.popular-entry-cards.large-thumb {
	grid-template-columns: repeat(3, 1fr); /* 3列で均等に分配 */
}

/* 834px以下のグリッド設定 */
@media screen and (max-width: 834px) {
	.new-entry-cards.large-thumb {
		grid-template-columns: 2fr; /* 2列に配置 */
		gap: 0; /* 隙間を0に */
	}
	.cate .new-entry-cards.large-thumb,
	.popular-entry-cards.large-thumb {
		grid-template-columns: repeat(2, 1fr); /* 2列に分配 */
		gap: 0; /* 隙間を0に */
	}
	/* 人気記事を常に1列表示に変更 */
	.popular-entry-cards.large-thumb {
  	grid-template-columns: 1fr !important;
	}
}

/* モバイルでのタイトル文字サイズ調整 */
@media screen and (max-width: 834px) {
	.cate .large-thumb .new-entry-card-title,
	.popular-entry-card-title {
		font-size: 14px !important; /* タイトル文字を小さく */
	}
}

/*------------------------------------------------------------------------------------------------------*/
/* カテゴリータブの編集 */
/*------------------------------------------------------------------------------------------------------*/
			/* PCは通常表示 */
			.pc-only {
			  display: inline;
			}
			.sp-only {
			  display: none;
			}

			/* スマホは改行バージョンを表示 */
			@media screen and (max-width: 768px) {
			  .pc-only {
				display: none;
			  }
			  .sp-only {
				display: inline;
			  }
			}

/* タブコンテナの設定 */
.tab-switch {
	--active-tab-color: #b5b5ae; /* 選択タブの色 */
	display: flex; /* タブを横並びに */
	flex-wrap: wrap; /* 幅に応じて折り返し */
	max-width: 100%; /* コンテナの最大幅 */
	margin: auto; /* 中央寄せ */
	justify-content: center; /* 中央揃え */
	gap: 10px 5px; /* タブ間の隙間 */
}

/* タブボタンのスタイル */
.tab-switch > label {
	flex: 1 1 auto; /* 均等に幅をとりつつ折り返し */
	width: 200px; /* タブ幅を決め打ち（追加）*/
	/*min-width: 200px; /* 最小幅 （もともと70px）*/
	/*max-width: 300px; /* タブ幅を最大100pxに設定（もともと記載なし） */
	order: -1; /* コンテンツより上に表示 */
	position: relative; /* 起点 */
	padding: .7em 1em; /* 内側余白 */
	border-bottom: 1px solid var(--active-tab-color); /* 下ボーダー */
	color: var(--active-tab-color); /* 文字色 */
	text-align: center; /* テキスト中央揃え */
	cursor: pointer; /* ポインタ表示 */
}

@media screen and (max-width: 768px) {
	/* タブコンテナの設定 */
.tab-switch {
	--active-tab-color: #b5b5ae; /* 選択タブの色 */
	display: flex; /* タブを横並びに */
	flex-wrap: wrap; /* 幅に応じて折り返し */
	max-width: 100%; /* コンテナの最大幅 */
	margin: auto; /* 中央寄せ */
	justify-content: center; /* 中央揃え */
	gap: 10px 5px; /* タブ間の隙間 */
}
	.tab-switch > label {
	flex: 1 1 auto; /* 均等に幅をとりつつ折り返し */
	width: 30px; /* タブ幅を決め打ち（追加）*/
	/*min-width: 200px; /* 最小幅 （もともと70px）*/
	/*max-width: 300px; /* タブ幅を最大100pxに設定（もともと記載なし） */
	order: -1; /* コンテンツより上に表示 */
	position: relative; /* 起点 */
	padding: .7em 1em; /* 内側余白 */
	border-bottom: 1px solid var(--active-tab-color); /* 下ボーダー */
	color: var(--active-tab-color); /* 文字色 */
	text-align: center; /* テキスト中央揃え */
	cursor: pointer; /* ポインタ表示 */
	font-size: 11px;  /* 好きなサイズに変更（例: 14px） */
    line-height: 1.2; /* 行間を詰める */	
}
}

/* タブごとに色を指定 */
.tab-switch label.tab-life {
  background-color: #6F8896 ;/*#f4d03f; /* 黄色 */
  color: #fff!important;
}

.tab-switch label.tab-health {
  background-color:#B7CFC6;/*#58d68d; /* 緑 */
  color: #fff!important;
}

.tab-switch label.tab-money {
  background-color: #D0A885;/*#5dade2; /* 青 */
  color: #fff!important;
}

.tab-switch label.tab-career {
  background-color: #C2B8CF;/*#af7ac5; /* 紫 */
  color: #fff!important;
}

/* 選択されたタブの色を強調（チェック時） */
.tab-switch label.tab-life:has(:checked) {
  background-color: #2F4858;
  color: #fff!important;	
}
.tab-switch label.tab-health:has(:checked) {
  background-color: #6B8E7E;
  color: #fff!important;	
}
.tab-switch label.tab-money:has(:checked) {
  background-color: #8B5E3C;
  color: #fff!important;
}
.tab-switch label.tab-career:has(:checked) {
  background-color: #7A6C8D;
  color: #fff!important;
}

/* タブのホバーと選択時のスタイル */
/*.tab-switch > label:hover,
.tab-switch label:has(:checked) {
	background-color: var(--active-tab-color);
color: #fff;}*/

.tab-switch label:hover,
.tab-switch label:hover span,
.tab-switch label:active,
.tab-switch label:active span {
  color: inherit !important;
}


/* 選択タブの下三角形 */
.tab-switch label:has(:checked)::before {
	position: absolute; /* 三角形位置を絶対配置 */
	bottom: -8px; /* 下からの位置 */
	left: 50%; /* 中央寄せ */
	transform: translateX(-50%); /* 中央寄せを調整 */
	width: 18px; /* 三角形の幅 */
	height: 9px; /* 三角形の高さ */
	background-color: var(--active-tab-color); /* 三角形色 */
	content: ''; /* 内容なし */
	clip-path: polygon(0 0, 100% 0, 50% 100%);  /* 三角形の形 */
}

/* ラジオボタン非表示 */
.tab-switch input {
	display: none; /* 非表示 */
}

/* タブのコンテンツエリア */
.tab-switch > div {
	display: none; /* 初期非表示 */
	width: 100%; /* 幅設定 */
	padding: 1.5em 0; /* 内側余白 */
}

/* 選択されたタブの内容表示 */
.tab-switch label:has(:checked) + div {
	display: block; /* チェック時に表示 */
}

/* アピールエリアの編集*/
.appeal .appeal-in {
  min-height: 10px;
}
.appeal-in {
  padding: 2% 3%;
}
.appeal-content {
  padding: 8px;
}

/*------------------------------------------------------------------------------------------------------*/
/* 記事に順位表示 */
/*------------------------------------------------------------------------------------------------------*/

/* カウンターをリセット（リストの親要素に適用） */
.popular-entry-cards {
  counter-reset: rank;
}

/* 各カードにカウンターを進める */
.popular-entry-card-link {
  position: relative;
  counter-increment: rank;
}

/* バッジのデザイン */
.popular-entry-card-link::before {
  content: counter(rank); /* 自動で 1, 2, 3… と出る */
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff5c5c;  /* バッジの色（赤） */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;   /* 丸いバッジ */
  z-index: 2;
}

/* 1位 */
.popular-entry-card-link:nth-child(1)::before {
  background: gold;
  color: #000;
}
/* 2位 */
.popular-entry-card-link:nth-child(2)::before {
  background: silver;
  color: #000;
}
/* 3位 */
.popular-entry-card-link:nth-child(3)::before {
  background: #cd7f32; /* ブロンズ */
}


/*------------------------------------------------------------------------------------------------------*/
/* カテゴリー別のタブの編集 ※上記で設定されているものを上書きするため、末尾に書くこと */
/*------------------------------------------------------------------------------------------------------*/

		/* 通常時は黒 */
		.tab-switch label {
			color: #000 !important;
			border-bottom: 1px solid #000; /* 太さはお好みで調整 */
			cursor: pointer; /* ホバーで手のアイコンにしたい場合 */
		}

		/* ホバー時は白 */
		.tab-switch label:hover {
			color: #000 !important;
		}

		/* 選択中のラベルも白 */
		.tab-switch label input:checked + span,
		.tab-switch label input:checked {
			color: #fff !important;
		}

		/* 選択中のタブは白 */
		.tab-switch label input:checked + label,
		.tab-switch label:has(input:checked) {
			border-bottom: 1px solid #000;
		}

/*------------------------------------------------------------------------------------------------------*/
/* 新着記事の編集 */
/*------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 834px) {
    /* カード全体を縦1列に */
    .new-entry-cards.widget-entry-cards,
    .tab-content .new-entry-cards {
        display: block !important;
    }

    /* 各カードリンクを縦に */
    .new-entry-card-link {
        display: block !important;
        width: 100% !important;
        margin-bottom: 16px;
    }

    /* カード内部を縦に */
    .new-entry-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* サムネイルを上に、幅100% */
    .new-entry-card-thumb {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 8px;
    }

    /* 内容部分 */
    .new-entry-card-content {
        width: 100% !important;
    }
}

/******************************************************************************************************************************************
/*　以下、編集中
/******************************************************************************************************************************************
/*------------------------------------------------------------------------------------------------------*/
/* スマホ個別設定 ※上記で設定されているものを上書きするため、末尾に書くこと */
/*------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 834px) {
		/* セクション間の余白を詰める */
		body.home .section-wrap {
		  padding-bottom:1px!important;
		  margin-top: 0px;/*1px;*/
		  margin-bottom: 1px;
		}
		.tab-switch {
		  margin-top: 20px; /* 好きな値に調整 */
		}
		body.home .tab-content {
								  padding: 1px !important;
								  margin-top:1px!important;
								  margin-bottom:1px!important;
								}
	
		body.home #content-in {
		  padding: 1px; /* 必要に応じて数値を変更 */
		}
		body.home #content-in #main {
		  padding: 1px !important;
		}
		body.home #content-in .heading {
		  padding: 1px !important;
		  margin-top:1px!important;
		  margin-bottom:1px!important;
		}	
		body.home .new-entry-cards,
		body.home .popular-entry-cards,
		body.home .section-wrap.cate .new-entry-cards{
		  margin-top:1px!important;
		  margin-bottom:1px!important;
		}
		body.home .entry-content {
		margin-top: 1px;
		margin-bottom: 1px;
		}	
	body.home #content-in .heading {
		padding-top: 10px !important;
		padding-bottom: 27px !important;		
		}
	body.home .section-wrap .heading::after{
		50px!important;
		}
}
	
/************************************************************/
/* 人気記事カードの横並び表示・1列化 */
/*
@media screen and (max-width: 768px) {

	.popular-entry-cards {
  	display: flex !important;
  	flex-direction: column !important;
  	flex-wrap: nowrap !important;
  	gap: 16px !important;
  	width: 100% !important;
	}

	.popular-entry-card {
  	display: flex !important;
  	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	}

	.popular-entry-card-thumb {
  	width: 100px !important;
  	flex-shrink: 0 !important;
	}

	.popular-entry-card-thumb img {
  	width: 100% !important;
  	height: auto !important;
  	object-fit: cover !important;
  	border-radius: 4px !important;
	}

	.popular-entry-card-content {
  	flex: 1 !important;
	}

	.popular-entry-card-title {
  	font-size: 14px !important;
  	line-height: 1.5 !important;
  	font-weight: bold !important;
  	color: #333 !important;
	}
}
/************************************************************/

@media screen and (max-width: 834px) {
		/*カード左右の余白*/
		.widget-entry-cards {
			padding-left: 1px!important;
		  }
		.widget-entry-cards {
			padding-left: 4px!important;
			padding-right: 4px!important;
		  }

		/*タイトルサイズ（全て）*/
		.new-entry-card-title.widget-entry-card-title.card-title{
  		font-size: 16px!important;
		}
}
/* =======================================================
   記事一覧カード：縦型
   画像：上 / タイトル：下
   （全一覧・single除外）
========================================================== */
body:not(.single) .entry-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important; /* 高さ自動 */
  overflow: hidden;
}

/* サムネイル */
body:not(.single) .entry-card-thumb {
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  order: 1; /* 画像を必ず一番上に */
}

/* サムネイル画像比率維持 */
body:not(.single) .entry-card-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* タイトル・抜粋エリア */
body:not(.single) .entry-card-content {
  width: 100% !important;
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* タイトル */
body:not(.single) .entry-card-title {
  margin-bottom: 8px; /* タイトルと更新日の隙間 */
  word-break: break-word; /* 長いタイトルは折り返す */
}

/* メタ情報はタイトルの下に固定 */
body:not(.single) .entry-card-meta {
  margin-top: auto;
}

/* 管理者PV・レビューなど非表示 */
body:not(.single) .admin-pv {
  display: none !important;
}

/*タイトルがはみ出る現象を修正*/
.entry-card-title {
  margin-left: 0 !important;
  padding-left: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateX(0) !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* 記事一覧カードのリンク要素の枠を完全除去 */
.entry-card .a-wrap,
.entry-card-wrap,
.widget-entry-card .a-wrap {
  border: none !important;
  box-shadow: none !important;
}

/* カード画像上のカテゴリラベルを右上に */
.entry-card-thumb .cat-label {
  left: auto !important;
  right: 8px;   /* 好みで調整 */
  top: 8px;     /* 好みで調整 */
}

/* カルーセル内のカテゴリラベルを右上に */
.carousel .cat-label {
  left: auto !important;
  right: 8px;
  top: 8px;
}

/* エントリーカードのカテゴリラベル */
.entry-card-thumb {
    position: relative; /* カードの画像を基準にする */
}

.entry-card-category-label {
    position: absolute;
    top: 8px;    /* 上からの距離 */
    right: 8px;  /* 右からの距離 */
    background-color: rgba(0,0,0,0.7); /* 半透明の黒背景 */
    color: #fff; /* 文字色は白 */
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 10;
}

.single .cat-label {
  display: none !important;
}

/*===========================================================*/

.article-card {
  border: none;
  padding: 1.2rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/**************************/
/* 右スライドメニューをTechGALA寄りに調整（スマホのみ） */
@media screen and (max-width: 768px) {

  /* メニュー本体の幅と動き */
  .mobile-menu-buttons + #slide-in-sidebar {
    width: 200vw;                /* 画面の約9割 */
    max-width: none;
    transition: transform 0.35s ease;
  }
 .slide-in-sidebar-content {
    width: 200vw;        /* 画面の約9割 */
    max-width: none;   /* Cocoonの固定幅を解除 */
  }



  /* 右から出す位置調整 */
  #slide-in-sidebar {
    right: 0;
    left: auto;
  }

  /* 背景オーバーレイを柔らかく */
  #slide-in-sidebar-overlay {
    background: rgba(0, 0, 0, 0.35);
    transition: opacity 0.35s ease;
  }

  /* メニュー内の余白を広く */
  #slide-in-sidebar .sidebar-content {
    padding: 32px 24px;
  }

  /* メニュー項目の詰まり感を消す */
  #slide-in-sidebar li {
    margin-bottom: 20px;
  }

  #slide-in-sidebar a {
    font-size: 1.05em;
    line-height: 1.6;
  }
}
/*****************/
/* コンセプト下の説明文用 */
.site-catch .concept-text2 {
    max-width: 700px;       /* 最大幅を制限 */
    margin: 0 auto;         /* 中央寄せ */
    line-height: 1.6;       /* 行間を広めに */
    word-break: break-word;  /* 長い単語やURLで折り返し */
    padding: 30px 15px;        /* 左右に少し余白 */
    text-indent: 1em;      /* 段落の最初を1文字分下げる */
}

/* スマホ向け */
@media screen and (max-width: 834px) {
    .site-catch .concept-text2{
        max-width: 85%;     /* 画面幅の90%までに制限 */
        line-height: 1.5;   /* 行間少し狭め */
        padding: 30px 10px;    /* 横余白を少し狭く */
        text-indent: 1em;       /* 段落の最初を1文字分下げる */
	}
}

/*************************/
.section-wrap.cate .heading {
  font-size: 40px; /* 自己マネジメントのサイズ */
}

.section-wrap.cate .heading span {
  font-size: 14px; /* サブ文はそのまま、または別指定 */
}