/*
Theme Name: skypc
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: skypc
Author URI: https://www.skypc.jp
Description: TOWA Partners
*/

/*******************************************************************************/
/* 定数 */
/*******************************************************************************/
:root {
	/* サイトの基本色 */
	--site_base_color: #0085a3;

	/* 表示領域の最大幅 */
	--content_inner_max_width: 1000px;
	/* 表示領域の最大幅 (狭) */
	--content_inner_max_width_narrow: 800px;

	/* 表示領域の背景色 */
	--content_bgcolor: #faf5eb;
	--content_bgcolor_rgb: 250 245 235;
	/* 表示領域の交互の背景色 */
	--content_alternate_bgcolor: #fff;

	/* mobile ナビゲーション */
	--mobile_nav_bgccolor: var(--site_base_color);
	--mobile_nav_bgccolor_rgb: 0 133 163;

	/* フッタ */
	--footer_bgcolor: #3e3e3e;
	--footer_color: #fff;
	--footer_title_color: #bce2fb;

	/* お問い合わせ */
	--contact_bgcolor: #ffdfb2;

	/* ボタン */
	--button_bgcolor: #d4eefb;

	/* ボックス番号 */
	--box_number_color: #ffdfb2;

	/* 背景色 (灰色) */
	--bgcolor_gray: #f9f9f9;

/*******************************************************************************/
/* body */
/*******************************************************************************/
body {
	background: var(--content_bgcolor);
}

/*******************************************************************************/
/* レイアウト */
/*******************************************************************************/
/*---------------------------------------------------------*/
/* page */
/*---------------------------------------------------------*/
.page {
	width: 100%;
	overflow: hidden;
}
/*---------------------------------------------------------*/
/* header */
/*---------------------------------------------------------*/
.site_header {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100px;
	background: transparent;
	z-index: 1000;

	@media (width < 1020px) {
		height: 80px;
	}

	/* 見出しを表示しない */
	& h2 {
		display: none;
	}
}
/*---------------------------------------------------------*/
/* footer */
/*---------------------------------------------------------*/
.site_footer {
	width: 100%;

	/* 見出しを表示しない */
	& h2 {
		display: none;
	}
}
/*---------------------------------------------------------*/
/* main contents */
/*---------------------------------------------------------*/
.site_main {
	width: 100%;
	padding-top: 100px;

	@media (width < 1020px) {
		padding-top: 80px;
	}
}

/*******************************************************************************/
/* ヘッダ */
/*******************************************************************************/
.header_container {
	position: relative;
	width: 100%;
	padding: 14px 70px 20px;
	z-index: 1000;

	@media (width < 1020px) {
		padding: 7px 40px 10px;
	}
	@media (width < 768px) {
		padding: 9px 20px;
	}

	/* ヘッダの法人ロゴ */
	& h1 * {
		display: inline-block;
		text-align: center;
	}
	& h1 span {
		display: block;
	}
	/* 法人種類 */
	& h1 span.company_type {
		font-size: 55%;
		font-weight: 600;
	}
}

/*******************************************************************************/
/* ナビゲーション (PC) */
/*******************************************************************************/
.site_nav {
	position: absolute;
	inset: auto 1em 35px auto;

	@media (width < 1020px) {
		display: none;
	}

	/* メニューリスト */
	& > ul {
		& > li {
			display: inline-block;

			@media (width < 1020px) {
				margin-right: 10px;
			}
		}
		& > li > a {
			position: relative;
			color: inherit;
			padding: 5px 12px;
		}
	}
	/* hover している要素に下線を引く */
	@media (any-hover: hover) {
		& .site_nav_item:hover > a {
			border-bottom: 1px solid var(--site_base_color);
		}
	}
	/* お問い合わせ (Contact) */
	& .site_nav_item_contact a {
		background: var(--contact_bgcolor);
		border-radius: 20px;
		padding: 7px 20px;

		@media (any-hover: hover) {
			&:hover {
				background: var(--contact_bgcolor);
				border-bottom: none;
			}
		}
		/* アイコン */
		& i {
			color: #333;
			margin-right: 5px;
		}
	}
}

/*******************************************************************************/
/* ナビゲーション (mobile) */
/*******************************************************************************/
/*---------------------------------------------------------*/
/* mobile メニューボタン */
/*---------------------------------------------------------*/
.menu_button {
	display: none;
	position: absolute;
	inset: 25px 2em auto auto;
	width: 36px;
	min-width: 36px;
	height: 24px;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	z-index: 1100;

	@media (width < 1020px) {
		display: block;
	}
}
/* メニューボタンのマーク (3本線) */
.menu_button_bar {
	display: block;
	content: "";
	width: 100%;
	height: 1px;
	background: #333333;

	&::before,
	&::after {
		display: block;
		position: absolute;
		content: "";
		width: 100%;
		height: 1px;
		background: #333333;
		transition: 0.3s ease;
	}
	&::before {
		top: 0;
	}
	&::after {
		bottom: 0;
	}
}
/* メニューが開いている時はボタンを「Ｘ」にする */
.menu_button.is-active .menu_button_bar {
	height: 0;

	&::before {
		background: #fff;
		opacity: 1;
		top: 50%;
		transform: rotate(45deg) translateY(-50%);
		transition: 0.3s ease;
	}
	&::after {
		background: #fff;
		opacity: 1;
		top: 50%;
		transform: rotate(-45deg) translateY(-50%);
		transition: 0.3s ease;
	}
}

/*---------------------------------------------------------*/
/* mobile メニュー */
/*---------------------------------------------------------*/
.menu_container {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	inset: 0;
	transition: 0.3s ease;
	z-index: 1000;

	/* メニューが開いている時 */
	&.is-active {
		opacity: 1;
		visibility: visible;
		width: 100%;
		height: 100vh;
		transition: 0.5s ease;
	}
}
/* メニューのオーバーレイ */
.menu_overlay {
	position: fixed;
	inset: 0;
	z-index: 800;
	width: 100vw;
	height: 100vh;
	background: rgb(124 124 124 / 0.233);
}
/* メニューリスト */
.menu_list {
	position: relative;
	z-index: 2000;
	height: 100vh;
	height: 100dvh;
	background: rgb(var(--mobile_nav_bgccolor_rgb) / 0.95);
	padding-top: 50px;
	padding-bottom: 50px;
	overflow: scroll;

	& ul {
		list-style-type: none;
	}
	& li {
		width: 100%;
		text-align: left;
	}
	& li a,
	& li a > span {
		color: #fff;
	}

	/* 第1階層 */
	& > ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;

		& > li {
			padding: 0 15%;
		}
		& > li:before {
			content: "▶";
			font-size: 70%;
			color: #fff;
			margin-right: 10px;
		}
		& > li > a {
			font-size: 2.0rem;
		}
		& > li > a > span {
			display: inline-block;
			font-size: 1.2rem;
			margin-left: 1em;
		}
	}
}

/*******************************************************************************/
/* フッタ */
/*******************************************************************************/
.site_footer {
	width: 100%;
	background: var(--footer_bgcolor);
	overflow: hidden;
}
/*---------------------------------------------------------*/
/* フッタ 主領域 */
/*---------------------------------------------------------*/
.footer_container {
	width: 100%;
	max-width: var(--content_inner_max_width);
	color: #fff;
	padding: 20px 0 0;
	margin-inline: auto;

	display: grid;
	grid-template-columns: 18em 1fr;
	gap: 30px;

	@media (width < 768px) {
		display: block;
		margin-bottom: 10px;
	}

	/* フッタ内の全要素 */
	& * {
		color: var(--footer_color);
	}

	/* フッタの法人ロゴ */
	& .footer_company_name {
		text-align: center;

		@media (width < 768px) {
			margin-top: 10px;
			margin-bottom: 20px;
		}

		/* 共通 */
		& span {
			display: block;
			font-family: "Zen Maru Gothic", sans-serif;
			font-weight: 800;
			font-style: normal;
		}
		/* 法人種類 */
		& span.company_type {
			font-size: 90%;
		}
		/* 法人名 */
		& span.company_name {
			font-size: 150%;

			@media (width < 768px) {
			}
		}
	}
	/* 住所 */
	& .footer_company_address {

		& p {
			@media (width < 768px) {
				text-align: center;
				font-size: 90%;
			}
		}
	}
}
/*---------------------------------------------------------*/
/* コピーライト */
/*---------------------------------------------------------*/
.footer_copyright {
	background: var(--footer_bgcolor);
	padding: 10px 0 10px;

	& small {
		display: block;
		text-align: center;
		font-size: 75%;
		color: #fff;
	}
}

/*******************************************************************************/
/* 【共通】ページヘッダ */
/*******************************************************************************/
.page_header {
	position: relative;
	width: 100%;
	z-index: 10;
}

/*******************************************************************************/
/* 【共通】パンくずリスト */
/*******************************************************************************/
.breadcrumbs {
	width: 100%;
	text-align: left;
	margin: 0 0 20px;

	@media (width < 1020px) {
		margin: 10px 10px 10px;
	}
}

/*******************************************************************************/
/* 【共通】コンテンツ */
/*******************************************************************************/
.content_container {
	width: 100%;
	padding: 40px 3% 50px;
	margin-inline: auto;
	scroll-margin-top: 180px;

	@media (width < 768px) {
		padding: 30px 4% 30px;
		scroll-margin-top: 160px;
	}
}
.content_inside_container {
	max-width: var(--content_inner_max_width);
	text-align: center;
	margin-inline: auto;
}

/*******************************************************************************/
/* 【共通】見出し (英字付き) */
/*******************************************************************************/
.content_container h3.title_with_eng {
	text-align: left;
	margin-bottom: 40px;

	& span {
		display: inline-block;
	}
	/* 英字表記部分 */
	& span.title_eng {
		font-size: 1.7rem;
		letter-spacing: 0.05em;
		color: var(--site_base_color);
		margin-left: 1em;
	}
}

/*******************************************************************************/
/*【共通】番号付きフロー */
/*******************************************************************************/
.number_flow {
	width: 100%;
	padding: 10px;

	counter-reset: flow_number;
}
/* 行 */
.number_flow .number_flow_row {
	position: relative;
	width: 100%;
	margin: 0 0 1.5em;

	/* 最終要素にマージンを設定しない */
	&:last-child {
		margin: 0;
	}
}

/* 1行分のボックス */
.number_flow .number_flow_row .number_flow_box {
	width: 100%;
	display:grid;
	grid-template-columns: 2.8em 1fr;
	place-items: center;

	/* 丸数字 */
	& .number_flow_circle {
		display: inline-block;
		content: "";
		width: 2.5em;
		height: 2.5em;
		text-align: center;
		line-height: 1;
		background: #a5dffb;
		border-radius: 50%;

		counter-increment: flow_number;

		& span {
			position: relative;
			display: inline-block;
			top: 0.5em;
			line-height: 1.5em;
		}
		& span:before {
			content: counter(flow_number, decimal-leading-zero);
		}
	}
	/* 文章 */
	& .number_flow_content_box {
		width: 100%;
		padding: 0 20px;

		@media (width < 1020px) {
			padding: 0 10px;
		}
	}
}

/* 番号をつなぐ線 */
.number_flow .number_flow_row .number_flow_line {
	position: absolute;
	inset: 2.3em auto auto 1.25em;
	width: 3px;
	height: 100%;
	background: #a5dffb;
}
/* 番号をつなぐ線 - 最終要素に線を引かない */
.number_flow_row:last-of-type .number_flow_line:last-of-type {
	display: none;
}

/*******************************************************************************/
/* 【共通】お知らせ一覧 */
/*******************************************************************************/
/* お知らせの一覧部分 */
.news_list_container {
	& dl {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		@media (width < 768px) {
			display: block;
		}
	}
	& dt,
	& dd {
		margin-bottom: 1em;
	}
	& dt {
		width: 7em;

		@media (width < 768px) {
			margin-bottom: 0;
		}
	}
	& dd {
		width: calc(100% - 7em);

		@media (width < 768px) {
			width: 100%;
			border-bottom: 1px dotted #ccc;
			padding: 0.5em 0.5em;
		}
	}
}
/*******************************************************************************/
/* 【共通】ページ送り */
/*******************************************************************************/
.pagination_container {
	width: 100%;
	margin-top: 40px;
	text-align: center;

	/* ページ番号 */
	& .page-numbers {
		display: inline-block;
		min-width: 3em;
		background: var(--button_bgcolor);
		padding: 5px 10px;
		margin-right: 5px;
	}
	/* 現在ページ */
	& .current {
		font-weight: 600;
		color: inherit;
		background: transparent;

		&:hover,
		&:active {
			background: transparent;
		}
	}
	/* 次へ／前へ */
	& .next,
	& .prev {
	}
}

/*******************************************************************************/
/* 【共通】ページ下部のお問い合わせ */
/*******************************************************************************/
.content_contact_container {
	background: var(--bgcolor_gray);
	padding-bottom: 80px;
	margin-top: 100px;

	/* 見出し */
	& h3.title_with_eng {
		text-align: center;
		margin-bottom: 30px;
	}
}
.contact_box_container {
	width: min(var(--content_inner_max_width_narrow),85%);
	 margin-inline: auto;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;

	@media (width < 768px) {
		display: block;
		width: 100%;
	}
}

/* お問い合わせのボックスの共通部分 */
.contact_box {
	background: #fff;
	border-radius: 50px;
	padding: 15px 15px;

	display: grid;
	place-items: center;

	/* 全要素 */
	& * {
		color: inherit;
	}
	/* 文章 */
	& p {
		text-align: center;
		font-weight: bold;
	}
	/* アイコン */
	& i {
		font-size: 130%;
	}
}
/* 電話でのお問い合わせ */
.contact_box_tel {
	background: var(--contact_bgcolor);

	display: grid;
	grid-template-columns: 0.35fr 1fr;
	gap: 1.5em;

	@media (width < 768px) {
		grid-template-columns: 0.6fr 1fr;
		margin-bottom: 20px;
	}
	@media (width < 600px) {
		grid-template-columns: 0.5fr 1fr;
	}
	@media (width < 500px) {
		grid-template-columns: 0.4fr 1fr;
	}

	/* アイコンのボックス */
	& .contact_box_tel_icon {
		width: 100%;
		text-align: right;
		font-size: 140%;
	}
	/* 文章のボックス */
	& .contact_box_tel_link {
		width: 100%;
		text-align: left;

		/* 文章 */
		& p {
			text-align: left;
		}
		/* 電話番号 */
		& .contact_tel_no {
			font-size: 150%;

			@media (width < 768px) {
				font-size: 140%;
			}
		}
	}
}
/* フォームでのお問い合わせ */
.contact_box_form {
	color: inherit;
	background: var(--button_bgcolor);

	@media (width < 768px) {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	/* 文章 */
	& p {
		font-size: 130%;
		display: flex;
		justify-content: center;
		align-items: center;

		@media (width < 768px) {
			font-size: 120%;
		}
	}
	/* アイコン */
	& i {
		font-size: 140%;
		margin: 0;
		margin-right: 0.5em;
	}
}

/*******************************************************************************/
/* 【共通】電話番号リンク */
/*******************************************************************************/
.tel_no_link {
	color: inherit;
	cursor: default;
	pointer-events: none;

	@media (width < 1000px) {
		cursor: pointer;
		pointer-events: unset;
	}

	@media (any-hover: hover) {
		&:hover {
			opacity: 1;
		}
	}
}

/*******************************************************************************/
/* 【共通】改行 */
/*******************************************************************************/
.line_break{
	display: block;
}

/*******************************************************************************/
/* 【共通】404ページ */
/*******************************************************************************/
.page404_container {
	padding-top: 200px;

	& p {
		text-align: center;
		margin-top: 40px;
	}
}

/*******************************************************************************/
/* 【共通】reCAPTCHA */
/*******************************************************************************/
.grecaptcha-badge {
	visibility: hidden;
}
.recaptcha_caption_box {
	margin-top: 40px;

	& p,
	& p span {
		font-size: 90%;
	}
	& p {
		text-align: center;
	}
	& p span {
		display: inline-block;
	}
}

/*******************************************************************************/
/* フロントページ */
/*******************************************************************************/
/*---------------------------------------------------------*/
/* フロントページ ヘッダ */
/*---------------------------------------------------------*/
.front_header {
	height: 400px;
	background: linear-gradient(to right, #fff 70%, rgb(255 255 255 / 0.3));
	overflow: hidden;

	@media (width < 1020px) {
		height: 350px;
		background: linear-gradient(to right, #fff 70%, rgb(255 255 255 / 0.4));
	}
	@media (width < 768px) {
		height: 300px;
		background: #fff;
	}
	@media (width < 500px) {
		height: 200px;
	}

	/* 画像のコンテナ */
	& .front_header_image {
		display: inline-block;
		position: relative;

		/* 画像の右端をぼかす */
		&:after {
			position: absolute;
			inset: 0;
			display: block;
			content: "";
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, rgb(255 255 255 / 0) 95%, #fff 100%);

			@media (width < 600px) {
				display: none;
			}
		}
		/* 画像 */
		& img {
			width: 100%;
			height: 400px;
			object-fit: contain;
			object-position:left top;
			margin: 0;
		}
	}

	/* 説明文 */
	& .front_header_caption {
		position: absolute;
		inset: 35% auto auto 52%;
		padding: 10px 20px;

		@media (width < 1200px) {
			inset: 35% auto auto 60%;
		}
		@media (width < 1020px) {
			inset: 35% 0 auto auto;
			background: rgb(255 255 255 / 0.6);
			backdrop-filter:blur(5px);
		}
		@media (width < 500px) {
			top: 30%;
		}

		& span {
			display: block;
			font-size: 3rem;

			@media (width < 1200px) {
				font-size: 2.6rem;
			}
			@media (width < 768px) {
				font-size: 2.4rem;
			}
			@media (width < 500px) {
				font-size: 2.0rem;
			}
		}
	}
}
/*---------------------------------------------------------*/
/* フロントページ コンテンツ */
/*---------------------------------------------------------*/
.front_content_container {
	padding-top: 40px;
	padding-bottom: 80px;

	@media (width < 768px) {
		padding-bottom: 50px;
	}
}
/*---------------------------------------------------------*/
/* フロントページ 関連サービス ロゴ */
/*---------------------------------------------------------*/
.front_content_logo_container {
	background: url("img/front_bg_1.png") top -80px left -130px no-repeat;
}
.front_logo_container {
	display: flex;
	justify-content: center;
	gap: 20px;

	@media (width < 768px) {
		gap: 15px;
	}

	/* 画像 */
	& img {
		width: min(160px,28%);
		height: auto;
	}
}
/*---------------------------------------------------------*/
/* フロントページ サービス内容 */
/*---------------------------------------------------------*/
.front_content_service_container {
	background: url("img/front_bg_2.png") top 0px right -50px no-repeat;
}
/* サービス内容のコンテナ */
.front_service_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 15px;
}
/* サービス内容の個別のボックス */
.front_service_box {
	background: var(--button_bgcolor);
	border-radius: 30px;
	padding: 30px 10px 20px;

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 15px;

	@media (width < 768px) {
		padding: 25px 10px 15px;
		gap: 10px;
	}

	/* 見出し */
	& h4 {
		text-align: center;
		color: #333;
	}
	/* 画像 */
	& .front_service_image {
		width: max(110px,80%);
		 margin-inline: auto;
	}
	& img {
		width: 100%;
		height: auto;
	}
	/* 文章 */
	& p span {
		display: block;
		text-align: center;
		font-size: 90%;
		color: #333;
	}
}
/*---------------------------------------------------------*/
/* フロントページ 選ばれる理由 */
/*---------------------------------------------------------*/
/* 選ばれる理由のコンテナ */
.front_features_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 30px;
	counter-reset: number 0;

	@media (width < 768px) {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}
/* 選ばれる理由の個別のボックス */
.front_features_box {
	position: relative;
	background: #fff;
	border-radius: 30px;
	padding: 40px 30px 30px;

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 30px 10px;

	@media (width < 768px) {
		padding: 30px 20px 20px;
		gap: 15px 10px;
	}

	/* ボックスの連番 */
	&:before {
		position: absolute;
		inset: 5px auto auto 20px;
		counter-increment: number 1;
		content: counter(number, decimal-leading-zero);
		font-family: "Noto Serif JP", serif;
		font-size: 4rem;
		color: var(--box_number_color);
	}
	/* 画像 */
	& .front_feature_image {
		width: min(200px,80%);
		margin-inline: auto;
	}
	& img {
		width: 100%;
		height: auto;
	}
	/* 見出し */
	& h4 {
		text-align: center;
	}
	/* 説明文 */
	& p {
		text-align: center;

		& span {
			display: block;
		}
	}
	/* 詳しく見る リンク */
	& .front_features_to_detail {

		@media (width < 768px) {
			margin-top: 10px;
		}

		& a {
			display: inline-block;
			color: inherit;
			background: var(--button_bgcolor);
			border-radius: 20px;
			padding: 10px 40px
		}
	}
}
/*---------------------------------------------------------*/
/* フロントページ 会社案内 */
/*---------------------------------------------------------*/
.front_content_company_container {
	background: url("img/front_bg_3.png") top -00px left -100px no-repeat;
}
/* 会社案内のコンテナ */
.front_company_container {
	max-width: var(--content_inner_max_width_narrow);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 30px 50px;

	@media (width < 700px) {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px 30px;
	}
	@media (width < 500px) {
		max-width: 80%;
	}

	/* リンク (個別のボックス) */
	& a {
		display: block;
		font-size: 2.2rem;
		letter-spacing: 0.1em;
		color: inherit;
		background: var(--button_bgcolor);
		border-radius: 30px;
		padding: 25px 50px;

		display: grid;
		place-items: center;
		grid-template-columns: 60px 1fr;
		gap: 10px;

		@media (width < 768px) {
			font-size: 2.0rem;
			padding: 20px 30px;
			gap: 0px;
		}
		@media (width < 500px) {
			grid-template-columns: 80px 1fr;
		}

		/* アイコン */
		& img {
			width: 60px;
			height: auto;

			@media (width < 768px) {
				width: 50px;
			}
		}
	}
}

/*---------------------------------------------------------*/
/* フロントページ お知らせ */
/*---------------------------------------------------------*/
.front_content_news_container {
	background: url("img/front_bg_4.png") top 0px right -60px no-repeat;
}
/* トップページのお知らせ一覧のコンテナ */
.front_newslist_container {
	max-width: var(--content_inner_max_width_narrow);
	background: #fff;
	border-radius: 30px;
	padding: 30px 50px;
	margin-inline: auto;

	@media (width < 768px) {
		padding: 30px 30px;
	}

	/* 見出し */
	& h3.title_with_eng {
		text-align: center;
		margin-bottom: 30px;
	}
}
/* [一覧へ]ボタン */
.front_news_to_archive {
	margin-top: 30px;

	& a {
		color: inherit;
		background: var(--button_bgcolor);
		border-radius: 20px;
		padding: 10px 40px
	}
}

/*******************************************************************************/
/* 【共通】個別ページ */
/*******************************************************************************/
/*---------------------------------------------------------*/
/* 個別ページ ヘッダ */
/*---------------------------------------------------------*/
.pages_content_header_container {
	padding-top: 80px;
	padding-bottom: 80px;

	@media (width < 768px) {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	& h2 {
		text-align: center;
	}
}
/*---------------------------------------------------------*/
/* 個別ページ コンテンツ */
/*---------------------------------------------------------*/
.pages_content_container .content_inside_container {
	background: #fff;
	padding: 0 30px 30px;
}

/*******************************************************************************/
/* サービス案内 */
/*******************************************************************************/
.pages_content_service_container .service_inside_container {
	padding: 0 0 0;

	/* 見出し */
	& h3 {
		text-align: center;
		background: #d4eefb;
		padding: 30px 30px;

		& span {
			display: inline-block;
		}
	}
	& h4 {
		text-align: left;
		color: var(--site_base_color);
		margin-bottom: 15px;
	}
	& h5 {
		text-align: left;
		color: #c47301;
		margin-bottom: 10px;
	}
}
.service_container {
	padding: 0 min(20px,3%) 20px;
}
/*---------------------------------------------------------*/
/* 説明文 */
/*---------------------------------------------------------*/
.service_caption_box {
	border-bottom: 1px solid #eee;
	padding: 30px 10px;

	& p {
		text-align: center;
	}
	& p span {
		@media (width < 768px) {
			display: block;
		}
	}
	& p.service_caption_title {
		font-size: 2.0rem;
		font-weight: bold;
		margin-bottom: 20px;
	}
}
/*---------------------------------------------------------*/
/* コンテンツ */
/*---------------------------------------------------------*/
.service_content_box {
	padding: 30px 10px;
}
.service_content_box .strong_sentence {
	font-size: 105%;
	color: #ff8c00;
}
/*---------------------------------------------------------*/
/* コンテンツ - 画像 ボックス */
/*---------------------------------------------------------*/
.service_content_caption_image {
	display: grid;
	grid-template-columns: 1fr 0.6fr;
	gap: 30px;
	place-items: center;

	@media (width < 768px) {
		grid-template-columns: repeat(1,auto);
		gap: 20px;
	}
	/* コンテンツ */
	& .service_content_content {
		width: 100%;
	}
	/* 画像 */
	& .service_content_image {
		width: 100%;

		& img {
			width: 80%;
			height: auto;
			margin-inline: auto;

			@media (width < 768px) {
				width: max(200px,40%);
			}
		}
	}
}
/* 左右反転 */
.service_content_caption_image_reverse {
	grid-template-columns: 0.6fr 1fr;

	@media (width < 768px) {
		grid-template-columns: repeat(1,auto);
	}

	/* コンテンツ */
	& .service_content_content {
		order: 2;

		@media (width < 768px) {
			order: 1;
		}
	}
	/* 画像 */
	& .service_content_image {
		order: 1;

		@media (width < 768px) {
			order: 2;
		}
	}
}
/*---------------------------------------------------------*/
/* 背景グレーのリストのボックス */
/*---------------------------------------------------------*/
.service_content_list_box {
	background: var(--bgcolor_gray);
	padding: 20px;
	margin: 20px auto;

	/* リスト */
	& ul,
	& ol {
		margin: 0 0.6em;
	}
}
/*---------------------------------------------------------*/
/* 横幅いっぱいの画像ボックス */
/*---------------------------------------------------------*/
.service_image_box img {
	width: 100%;
	height: auto;
}
/*---------------------------------------------------------*/
/* 定義リスト (定義の先頭に「・」があるリスト) */
/*---------------------------------------------------------*/
dl.service_unordered_list {
	margin-top: 10px;

	& dt {
		font-weight: bold;
		margin-top: 20px;
		margin-bottom: 10px;
		display: grid;
		grid-template-columns: 1.2em 1fr;
	}
	& dt span {
		display: block;
		font-size: 110%;
		color: var(--site_base_color);
	}
	& dd {
		padding: 0 20px;
	}
}
/*---------------------------------------------------------*/
/* 定義リスト (通常の定義リスト) */
/*---------------------------------------------------------*/
dl.service_definition_list {
	padding: 0 1em;
	margin-top: 20px;

	& dt {
		font-size: 105%;
		font-weight: bold;
		margin-top: 15px;
		margin-bottom: 10px;
	}
	& dd {
		padding: 0 1em;
	}
}
/*---------------------------------------------------------*/
/* (番号 | マーク) 付きリスト */
/*---------------------------------------------------------*/
.service_content_box ol li,
.service_content_box ul li {
	line-height: 2;
}
/*---------------------------------------------------------*/
/* 強調 */
/*---------------------------------------------------------*/
.service_strong {
	color: #c47301;
	font-size: 110%;
}
.service_strong2 {
	width: fit-content;
	background: #f9eddb;
	border-radius: 20px;
	padding: 5px 20px;
}

/*******************************************************************************/
/* 選ばれる理由 */
/*******************************************************************************/
.pages_features_header_container {
	counter-reset: number 0;
}
/*---------------------------------------------------------*/
/* 個別のボックス */
/*---------------------------------------------------------*/
.pages_content_features_container .features_inside_container {
	padding: 50px 30px 40px;

	@media (width < 768px) {
		padding: 70px 30px 40px;
	}
}
.features_inside_container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 0.75fr;
	gap: 30px;

	@media (width < 768px) {
		grid-template-columns: repeat(1,auto);
	}

	/* 見出し */
	& h3 {
		text-align: left;
		font-weight: normal;
		color: var(--site_base_color);
		margin-bottom: 40px;

		@media (width < 768px) {
			margin-bottom: 20px;
		}

		& span {
			display: inline-block;
			color: var(--site_base_color);
		}
	}
	/* 文章 */
	& p {
		padding-right: 30px;
	}
}
/* 左右反転 */
.pages_content_features_container:nth-child(odd) .features_inside_container {
	grid-template-columns: 0.75fr 1fr;

	@media (width < 768px) {
		grid-template-columns: repeat(1,auto);
	}
}
/*---------------------------------------------------------*/
/* 枠ごとの番号 */
/*---------------------------------------------------------*/
.features_inside_container:before {
	position: absolute;
	inset: 5px 40px auto auto;
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero);
	font-family: "Noto Serif JP", serif;
	font-size: 5rem;
	color: var(--box_number_color);

	@media (width < 768px) {
		font-size: 4rem;
		inset: 5px auto auto 25px;
	}
}
/* 左右反転 */
.pages_content_features_container:nth-child(odd) .features_inside_container:before {
	inset: 5px auto auto 40px;

	@media (width < 768px) {
		inset: 5px auto auto 25px;
/*
		left: 25px;
*/
	}
}
/*---------------------------------------------------------*/
/* 説明文ボックス */
/*---------------------------------------------------------*/
.features_content_box {
	order: 1;
}
/* 左右反転 */
.pages_content_features_container:nth-child(odd) .features_content_box {
	order: 2;

	@media (width < 768px) {
		order: 1;
	}
}
/*---------------------------------------------------------*/
/* 画像ボックス */
/*---------------------------------------------------------*/
.features_image_box {
	order: 2;
	display: grid;
	place-items: center;

	& img {
		width: max(230px,60%);
		height: auto;
		margin-inline: auto;

		@media (width < 768px) {
			width: max(200px,40%);
		}
	}
}
/* 左右反転 */
.pages_content_features_container:nth-child(odd) .features_image_box {
	order: 1;

	@media (width < 768px) {
		order: 2;
	}
}
/*---------------------------------------------------------*/
/* 主なサポート内容 */
/*---------------------------------------------------------*/
.features_support_box {
	background: var(--bgcolor_gray);
	padding: 20px 30px;
	margin: 20px auto;

	/* 見出し */
	& h4 {
		text-align: left;
		color: #c47301;
	}
	/* リスト */
	& ul {
		margin-top: 15px;
	}
}

/*******************************************************************************/
/* お知らせ一覧 */
/*******************************************************************************/
.archive_post_container .content_inside_container {
	padding: 40px 5% 30px;

	@media (width < 768px) {
		padding: 30px 5% 20px;
	}
}
/*******************************************************************************/
/* お知らせ 記事ページ */
/*******************************************************************************/
.single_post_container .content_inside_container {
	padding: 40px 3%;
}
/*---------------------------------------------------------*/
/* 見出しボックス */
/*---------------------------------------------------------*/
.single_title_box {
	border-bottom: 2px solid #ccc;
	padding: 0 0 20px;

	/* 見出し */
	& h3 {
		text-align: left;
	}
	/* 文章 */
	& p {
		text-align: left;
		margin-bottom: 10px;
	}
}
/*---------------------------------------------------------*/
/* コンテンツ */
/*---------------------------------------------------------*/
.single_article_box {
	text-align: left;
	border-bottom: 2px solid #ccc;
	padding: 30px 15px;
}
/*---------------------------------------------------------*/
/* ページ送り */
/*---------------------------------------------------------*/
.single_page_navi {
	width: 100%;
	margin-top: 30px;

	& dd {
		padding-left: 1em;
		margin-bottom: 15px;
	}
}

/*******************************************************************************/
/* お問い合わせ */
/*******************************************************************************/
.pages_content_contact_container .content_inside_container {
	padding: 30px 30px 40px;
}
/*---------------------------------------------------------*/
/* 説明文 */
/*---------------------------------------------------------*/
.contact_caption_box {
	margin-bottom: 20px;
}
/*---------------------------------------------------------*/
/* コンタクトフォーム */
/*---------------------------------------------------------*/
.contact_form_container {

	/* テーブル */
	& table {
		width: 100%;
		margin-top: 30px;

		@media (width < 768px) {
			border-top: 2px solid #ccc;
		}

		/* 列定義 ※モバイルでは表組みを崩す */
		& th,
		& td {
			@media (width < 768px) {
				display: block;
				background: transparent;
				border: none;
			}
		}
		& th {
			width: 15em;

			@media (width < 768px) {
				font-weight: bold;
				padding: 10px 10px 5px;
			}
		}
		& td {
			@media (width < 768px) {
				padding: 0 1em;
				margin-bottom: 15px;
			}
		}
	}
	/* 必須チップ */
	& .tip_require {
		font-size: 90%;
		color: #f00;
		margin-left: 5px;
	}
	/* チェックボックス */
	& .wpcf7-list-item {
		display: block;
		line-height: 1.6;

		@media (width < 768px) {
			line-height: 2.4;
		}
	}
	& .wpcf7-checkbox .wpcf7-list-item:has(input:checked) label {
		background: #ffe4e1;
	}
	/* テキストボックス */
	& .wpcf7-text,
	& .wpcf7-textarea {
		width: 100%;
	}
	/* 個人情報取り扱いのチェック */
	& .contact_confirm {
		margin-top: 30px;

		@media (width < 768px) {
			border-top: 2px solid #ccc;
			padding-top: 30px;
		}

		/* チェックボックスと文章のラベル */
		& .wpcf7-list-item > label {
			display: flex;
			align-items: flex-start;
			gap: 20px;
		}
		/* チェックボックス */
		& input[type=checkbox] {
			transform: scale(1.8);
			accent-color: #4169e1;
			margin-top: 8px;
		}
		/* 文章 */
		& span.wpcf7-list-item-label span {
			display: inline-block;
		}
	}
	/* [送信する]ボタン */
	& .contact_button_box {
		margin-top: 40px;

		& p {
			text-align: center;
		}
		& input[type="submit"] {
			font-size: 110%;
			background: var(--button_bgcolor);
			border: none;
			border-radius: 20px;
			padding: 10px 50px;

			&:disabled {
				color: #999;
				background: #ddd;
			}

			@media (any-hover: hover) {
				&:hover {
					cursor: pointer;
					opacity: 0.8;
					transition: 0.4s;
				}
				&:disabled:hover {
					cursor: not-allowed;
				}
			}
		}
	}
	/* 送信時のスピナー */
	& .wpcf7-spinner {
		display: block;
		text-align: center;
		margin: 10px auto;
	}
	/* エラー表示のチップ */
	& .wpcf7-not-valid-tip {
		width: fit-content;
		color: #fff;
		background: #f00;
		padding: 1px 5px;
		margin-top: 2px;
	}
}
/* メッセージ */
.wpcf7 form .wpcf7-response-output {
	font-size: 1.8rem;
	background: #fffafa;
	border-color: #f00;
	padding: 10px;
	margin-top: 20px;
}

/*******************************************************************************/
/* 会社案内 */
/*******************************************************************************/
.pages_content_company_container .content_inside_container {
	padding: 50px 30px 40px;

	@media (width < 768px) {
		padding: 60px 5% 40px;
	}
}
.section-title {
	display: inline-block;
	width: auto;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.1em;
	background: #d4eef8;
	border-radius: 30px;
	padding: 10px 60px;
	margin: 0 auto 50px;
}

/*---------------------------------------------------------*/
/* 代表挨拶 */
/*---------------------------------------------------------*/
.greeting {
	margin-inline: auto;
	background-color: #FFFFFF;
	padding: 0 min(40px,3%);

	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 50px;
}
.photo {
	width: 330px;
	max-width: 100%;
	display:flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}
.photo img {
	width: 100%;
	height: auto;
}
.message {
	width: 100%;
}
.president {
	text-align: right;
	font-size: 110%;
	font-weight: bold;
	padding: 0 2em;
	margin-top: 30px;
}

@media screen and (max-width: 1000px) {
	.greeting {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	.president {
		padding: 0 1em;
	}
}

/*---------------------------------------------------------*/
/* 会社概要 */
/*---------------------------------------------------------*/
.company_info {
	width: 90%;
	border-collapse: collapse;
	margin: 0 auto 40px;

	@media (width < 768px) {
		width: 100%;
	}

	& th,
	& td {
		border: 1px solid #999;
		padding: 15px 20px;

		@media screen and (width < 768px) {
			padding: 10px 10px;
		}
	}
	& th {
		width: 10em;
		background: #e3f6ff;

		@media (width < 768px) {
			width: 9em;
		}
	}
	& td {
		background: #f9f9f9;
	}
	& span {
		display: inline-block;
		margin-right: 1em;
	}
}

/*---------------------------------------------------------*/
/* 関連組織 */
/*---------------------------------------------------------*/
.related {
	width: 90%;
	margin: 20px auto;
}

.box {
	background: #f9f9f9;
	padding: 20px;
	margin-bottom: 30px;
}
.box h4 {
	color: var(--site_base_color);
	text-align: left;
	margin-top: 20px;
	margin-bottom: 15px;
}
/*
.box h4.sub-title {
	color: #c47301;
	padding: 0 0.6em;
	margin-top: 30px;
}

.box h5 {
	margin-top: 15px;
	margin-bottom: 10px;
	margin-left: 0.7em;
	font-weight: bold;
	text-align: left;
}

.box h6 {
	margin-top: 15px;
	margin-bottom: 5px;
	font-weight: bold;
}
*/
.box p {
	margin-bottom: 5px;
	margin-left: 30px;
}

.office {
	width: 100%;
	background: #f9f9f9;
	padding: 20px;
	margin-top: 20px;
}
.office h4 {
	margin-top: 0;
	margin-bottom: 15px;
	text-align: left;
}

/*
p.range-text {
	font-size: 1.8rem;
	padding-bottom: 10px;
	border-bottom: 1px dotted #999;
	margin-bottom: 0;
	margin-left: 0.5em;
}

.range-table {
	width: 90%;
	border-collapse: collapse;
	margin: 0;
	margin-left: 30px;
}
.range-table th,
.range-table td {
	text-align: left;
	background: transparent;
	border: none;
	border-bottom: 1px dotted #999;
	padding: 18px 0;
}
.range-table th {
	width: 58%;
}
.range-table td {
	width: 42%;
}

@media (width < 768px) {
	.range-table th,
	.range-table td {
		display: block;
		width: 100%;
		border: none;
	}
	.range-table th {
		font-weight: bold;
		padding: 10px 0 5px;
	}
	.range-table td {
		padding: 5px 1em;
	}
}
*/

/*---------------------------------------------------------*/
/* アクセス */
/*---------------------------------------------------------*/
.map {
	width: 90%;
	max-width: 900px;
	margin-inline: auto;

	@media (width < 768px) {
		width: 100%;
	}

	& iframe {
		width: 100%;
		height: 450px;
		border: 0;

		@media (width < 768px) {
			height: 300px;
		}
	}
}

/*******************************************************************************/
/* 【共通】余白 */
/*******************************************************************************/
.mt_0 {
	margin-top: 0;
}
.mt_10 {
	margin-top: 10px;
}
.mt_20 {
	margin-top: 20px;
}
.mt_30 {
	margin-top: 30px;
}

.mb_0 {
	margin-bottom: 0;
}
.mb_10 {
	margin-bottom: 10px;
}
.mb_20 {
	margin-bottom: 20px;
}
.mb_30 {
	margin-bottom: 30px;
}

.pt_0 {
	padding-top: 0;
}
.pt_10 {
	padding-top: 10px;
}
.pt_20 {
	padding-top: 20px;
}
.pt_30 {
	padding-top: 30px;
}

.pb_0 {
	padding-bottom: 0;
}
.pb_10 {
	padding-bottom: 10px;
}
.pb_20 {
	padding-bottom: 20px;
}
.pb_30 {
	padding-bottom: 30px;
}