@charset "UTF-8";

/*
========================================
  parts.css
  tmpl_ 汎用パーツ（下層ページ共通）
  ★ 使うパーツが出てきたら順番に追記する
  ★ プロジェクトファイルに登録済みの parts.css（完成版）を参照しながら
     必要な部分だけコピーする
========================================
*/


/* ============================================
   テンプレート共通セクション（tmpl_block）
============================================ */
.sec_tmpl_block {
	padding: 120px 0;
	font-size: 1.125rem;
}

/* ★ グレー背景 */
.sec_tmpl_bg {
	background: #f5f6f7;
}

/* ★ 黒背景の色は案件に合わせて変更する */
.sec_tmpl_dark {
	background: #1a1a1a;
	color: #fff;
}

/* ★ 本案件のtmpl_innerは1000px */
.sec_tmpl_block .tmpl_inner {
	margin: 0 auto;
	max-width: 1000px;
}

.sec_tmpl_block .tmpl_inner100per {
	margin: 0 auto;
	max-width: 100%;
}

.sec_tmpl_block .tmpl_inner + .tmpl_inner {
	margin-top: 80px;
}

@media screen and (max-width: 1040px) {
	.sec_tmpl_block .tmpl_inner {
		max-width: 90%;
	}
}

@media screen and (max-width: 768px) {
	.sec_tmpl_block {
		padding: 60px 0 70px;
		font-size: 3.8vw;
	}
}


/* ============================================
   リード文セクション（tmpl_lead_section）
   ページタイトル直下・オリジナルブロック
   インナーは1200px固定
============================================ */
.tmpl_lead_section {
	background: #fff;
	padding: 80px 20px 0;
}

.tmpl_lead_inner {
	max-width: 1200px;
	margin: 0 auto;
}

@media screen and (max-width: 1200px) {
	.tmpl_lead_inner {
		max-width: 90%;
	}
}

.tmpl_lead_box {
	background: #edf0fa;
	padding: 60px 40px;
	text-align: center;
}

.tmpl_lead_text {
	font-size: 1.25rem;
	color: #0d1f3c;
	line-height: 1.9;
}

@media screen and (max-width: 768px) {
	.tmpl_lead_section {
		padding: 50px 5%;
	}

	.tmpl_lead_box {
		padding: 40px 24px;
	}

	.tmpl_lead_text {
		font-size: 4.5vw;
	}
}


/* ============================================
   本文テキスト
============================================ */
.tmpl_text {
	font-size: 1.125rem;
	color: #333;
	line-height: 2;
	margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
	.tmpl_text {
		font-size: 4vw;
		margin-bottom: 25px;
	}
}


/* ============================================
   下層ページタイトルエリア（tmpl_page_header）
============================================ */
.tmpl_page_header {
	position: relative;
	background: url(../images/page_hero_bg.jpg) no-repeat center center;
	background-size: cover;
	padding: 40px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
}

.tmpl_page_header_inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	padding: 0 20px;
}

/* 英字サブタイトル（PAGE TITLE） */
.tmpl_page_en {
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #56ace1;
	letter-spacing: 0.2em;
	margin-bottom: 14px;
}

/* h1ページタイトル */
.tmpl_page_title {
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.4;
	letter-spacing: 0.05em;
	margin-bottom: 60px;
}

/* パンくずナビ */
.tmpl_breadcrumb {
	position: relative;
	z-index: 1;
	padding: 0 0 20px;
}

.tmpl_breadcrumb_list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.tmpl_breadcrumb_item {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.tmpl_breadcrumb_item + .tmpl_breadcrumb_item::before {
	content: '•';
	margin: 0 10px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.75rem;
	line-height: 1;
}

.tmpl_breadcrumb_item a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.3s;
}

.tmpl_breadcrumb_item a:hover {
	color: #fff;
}

.tmpl_breadcrumb_item:last-child {
	color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 768px) {
	.tmpl_page_header {
		min-height: 200px;
		padding: 60px 0 0;
	}

	.tmpl_page_en {
		font-size: 3.2vw;
		margin-bottom: 10px;
	}

	.tmpl_page_title {
		font-size: 6vw;
		margin-bottom: 40px;
	}

	.tmpl_breadcrumb_item {
		font-size: 3vw;
	}
}


/* ============================================
   h2エリア（tmpl_h2_wrap）
============================================ */
.tmpl_h2_wrap {
	margin-top: 100px;
	margin-bottom: 60px;
}

.sec_tmpl_block .tmpl_inner > .tmpl_h2_wrap:first-child {
	margin-top: 0;
}

.tmpl_h2_wrap--center {
	text-align: center;
}

.tmpl_h2 {
	font-size: 2rem;
	font-weight: 400;
	color: #1a2353;
	line-height: 1.4;
	margin-bottom: 16px;
	letter-spacing: 0.03em;
}

@media screen and (max-width: 768px) {
	.tmpl_h2_wrap {
		margin-bottom: 40px;
	}

	.tmpl_h2 {
		font-size: 5.5vw;
	}
}


/* ============================================
   見出し・リスト類（h3 / h4 / ul / ol）
============================================ */

/* h3：24px・グラデーション下線 */
.tmpl_h3 {
	font-size: 1.5rem;
	font-weight: 400;
	color: #1a1a1a;
	padding-bottom: 12px;
	margin-bottom: 20px;
	margin-top: 60px;
	border-bottom: 2px solid #dddee1;
	position: relative;
}

.tmpl_h3::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 8em;
	height: 2px;
	background: #9bc6e2;
}

.tmpl_h3:first-child {
	margin-top: 0;
}

/* h4：20px・青テキスト */
.tmpl_h4 {
	font-size: 1.25rem;
	font-weight: 500;
	color: #56ace1;
	margin-bottom: 10px;
	margin-top: 40px;
}

.tmpl_h4:first-child {
	margin-top: 0;
}

/* ul ドットリスト */
.tmpl_list_ul {
	margin-bottom: 32px;
	padding-left: 0;
}

.tmpl_list_ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 1.125rem;
	color: #333;
	line-height: 1.8;
	margin-bottom: 8px;
}

.tmpl_list_ul li::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #56ace1;
	margin-top: 0.6em;
}

/* ol 番号付きリスト（「1.」形式） */
.tmpl_list_ol {
	counter-reset: tmpl-ol;
	margin-bottom: 32px;
	padding-left: 0;
}

.tmpl_list_ol li {
	counter-increment: tmpl-ol;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1.125rem;
	color: #333;
	line-height: 1.8;
	margin-bottom: 8px;
}

.tmpl_list_ol li::before {
	content: counter(tmpl-ol) '.';
	color: #56ace1;
	font-weight: 700;
	flex-shrink: 0;
	min-width: 1.5em;
}

@media screen and (max-width: 768px) {
	.tmpl_h3 {
		font-size: 5vw;
		margin-top: 40px;
	}

	.tmpl_h3::after {
		width: 5em;
	}

	.tmpl_h4 {
		font-size: 4.5vw;
		margin-top: 28px;
	}

	.tmpl_list_ul li,
	.tmpl_list_ol li {
		font-size: 3.8vw;
	}
}


/* ============================================
   テキスト類（small / note）
============================================ */
.tmpl_small {
	font-size: 1rem;
	color: #666;
	line-height: 1.9;
	margin-bottom: 24px;
}

.tmpl_note {
	font-size: 0.875rem;
	color: #666;
	font-style: italic;
	line-height: 1.8;
}

@media screen and (max-width: 768px) {
	.tmpl_small {
		font-size: 3.8vw;
	}

	.tmpl_note {
		font-size: 3.4vw;
	}
}


/* ============================================
   ボタン（tmpl_btn_primary / tmpl_btn_secondary）
============================================ */
.tmpl_btn_group {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.tmpl_btn_primary,
.tmpl_btn_secondary {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 500;
	padding: 16px 28px;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
	min-width: 200px;
}

/* プライマリ：枠線あり・背景透明 */
.tmpl_btn_primary {
	border: 1px solid #1a2353;
	background: transparent;
	color: #1a2353;
}

.tmpl_btn_primary:hover {
	background: #1a2353;
	color: #fff;
}

.tmpl_btn_primary:hover .tmpl_btn_arrow img {
	filter: invert(1) brightness(10);
}

/* セカンダリ：枠線なし・薄青背景 */
.tmpl_btn_secondary {
	border: 1px solid transparent;
	background: #edf0fa;
	color: #1a2353;
}

.tmpl_btn_secondary:hover {
	background: #1a2353;
	color: #fff;
}

.tmpl_btn_secondary:hover .tmpl_btn_arrow img {
	filter: invert(1) brightness(10);
}

/* 青ドット */
.tmpl_btn_dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #56ace1;
	flex-shrink: 0;
}

/* 矢印 */
.tmpl_btn_arrow {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
}

.tmpl_btn_arrow img {
	width: 20px;
	height: auto;
}

@media screen and (max-width: 768px) {
	.tmpl_btn_group {
		flex-direction: column;
		gap: 14px;
	}

	.tmpl_btn_primary,
	.tmpl_btn_secondary {
		font-size: 4vw;
		padding: 14px 24px;
		min-width: 0;
		width: 100%;
	}
}


/* ============================================
   テーブル共通
============================================ */
.tmpl_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	margin-bottom: 0;
}

.tmpl_table th,
.tmpl_table td {
	font-size: 1rem;
	line-height: 1.7;
	vertical-align: middle;
}


/* --------------------------------------------
   基本テーブル：下ボーダーのみ
   tmpl_table--basic
--------------------------------------------- */
.tmpl_table--basic {
	margin-bottom: 0;
}

.tmpl_table--basic tr {
	border-bottom: 2px solid #e2e3e5;
}

.tmpl_table--basic tr:first-child {
	border-top: 2px solid #e2e3e5;
}

.tmpl_table--basic th {
	width: 160px;
	padding: 26px 28px;
	font-weight: 400;
	color: #1a2353;
	text-align: left;
	white-space: nowrap;
}

.tmpl_table--basic td {
	padding: 26px 28px;
	color: #333;
}


/* --------------------------------------------
   スペックテーブル：外枠＋左TH背景色
   tmpl_table--spec
--------------------------------------------- */
.tmpl_table--spec {
	border: 1px solid #0d1f3c;
}

.tmpl_table--spec tr + tr {
	border-top: 2px solid #f0f1f2;
}

.tmpl_table--spec th {
	width: 220px;
	padding: 26px 28px;
	background: #323b6a;
	color: #fff;
	font-weight: 400;
	text-align: left;
	border-right: 1px solid #c6c7cb;
}

.tmpl_table--spec td {
	padding: 26px 28px;
	color: #333;
	background: #fff;
}


/* --------------------------------------------
   横スクロールテーブル
   tmpl_table--scroll
--------------------------------------------- */
.tmpl_table_scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tmpl_table--scroll {
	min-width: 640px;
	border: 1px solid #0d1f3c;
}

.tmpl_table--scroll thead tr {
	background: #323b6a;
	border-bottom: 2px solid #f0f1f2;
}

.tmpl_table--scroll thead th {
	padding: 20px 24px;
	color: #fff;
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,0.15);
}

.tmpl_table--scroll thead th:last-child {
	border-right: none;
}

.tmpl_table--scroll tbody tr {
	border-top: 2px solid #f0f1f2;
}

.tmpl_table--scroll tbody tr:first-child {
	border-top: none;
}

.tmpl_table--scroll tbody td {
	padding: 20px 24px;
	color: #333;
	border-right: 1px solid #e2e3e5;
}

.tmpl_table--scroll tbody td:last-child {
	border-right: none;
}

@media screen and (max-width: 768px) {
	.tmpl_table--basic th {
		width: 100px;
		padding: 18px 16px;
		font-size: 3.8vw;
	}

	.tmpl_table--basic td {
		padding: 18px 16px;
		font-size: 3.8vw;
	}

	.tmpl_table--spec th {
		width: 130px;
		padding: 18px 16px;
		font-size: 3.8vw;
	}

	.tmpl_table--spec td {
		padding: 18px 16px;
		font-size: 3.8vw;
	}

	.tmpl_table--scroll thead th,
	.tmpl_table--scroll tbody td {
		padding: 16px 18px;
		font-size: 3.8vw;
	}
}


/* ============================================
   2カラム レイアウト（画像＋テキスト）
   tmpl_col_img_text（画像＋テキスト2カラム）
   ※ WPブロックエディタでカラム幅を数値指定すると
      style="flex-basis: XX%" がインラインで出力され
      CSSのデフォルト値を自然に上書きできる
============================================ */
.tmpl_col_img_text {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	margin-top: 80px;
}

/* 左右逆バージョン */
.tmpl_col_reverse {
	flex-direction: row-reverse;
}

/* 画像カラム：デフォルト55%
   WPエディタで flex-basis を上書き可能 */
.tmpl_col_img_text .tmpl_col_img {
	flex: 0 0 55%;
}

.tmpl_col_img_text .tmpl_col_img img {
	width: 100%;
	display: block;
	border-radius: 15px;
}

/* テキストカラム：残り全幅 */
.tmpl_col_img_text .tmpl_col_body {
	flex: 1;
	min-width: 0;
}

@media screen and (max-width: 768px) {
	.tmpl_col_img_text {
		flex-direction: column;
		gap: 28px;
		margin-top: 50px;
	}

	.tmpl_col_reverse {
		flex-direction: column;
	}

	.tmpl_col_img_text .tmpl_col_img {
		flex: none;
		width: 100%;
	}
}


/* ============================================
   カード（tmpl_card）
   3カラム・全体リンク・角丸・影
============================================ */
.tmpl_cards_wrap {
	display: flex;
	gap: 20px;
}

.tmpl_card {
	flex: 1;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.3s;
}

.tmpl_card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
	color: inherit;
}

/* 画像エリア */
.tmpl_card_img img {
	width: 100%;
	display: block;
}

/* テキストエリア */
.tmpl_card_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 24px 24px;
}

/* カテゴリ */
.tmpl_card_cat {
	font-size: 1rem;
	color: #56ace1;
	margin-bottom: 8px;
	line-height: 1.4;
}

/* カードタイトル */
.tmpl_card_title {
	font-size: 1.25rem;
	font-weight: 500;
	color: #1a2353;
	line-height: 1.5;
	margin-bottom: 12px;
}

/* 区切り線：h3と同じ2色グラデーション */
.tmpl_card_hr {
	border: none;
	height: 2px;
	background: linear-gradient(to right, #9bc6e2 8em, #dddee1 8em);
	margin-bottom: 16px;
}

/* 本文 */
.tmpl_card_text {
	font-size: 1rem;
	color: #333;
	line-height: 1.8;
	margin-bottom: 0;
}

/* 材質ラベル */
.tmpl_card_label {
	font-size: 1rem;
	color: #555;
	margin-top: 20px;
	margin-bottom: 4px;
	line-height: 1.4;
}

/* 材質スペック値 */
.tmpl_card_spec {
	font-size: 1.25rem;
	font-weight: 500;
	color: #56ace1;
	line-height: 1.4;
	margin-bottom: 20px;
}

/* 詳しく見る */
.tmpl_card_link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	font-size: 0.9375rem;
	color: #333;
	margin-top: auto;
}

.tmpl_card:hover .tmpl_card_link {
	color: #56ace1;
}

.tmpl_card_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f0f0f0;
	flex-shrink: 0;
}

.tmpl_card_btn img {
	width: 12px;
	height: auto;
}

@media screen and (max-width: 768px) {
	.tmpl_cards {
		flex-direction: column;
		gap: 20px;
	}

	.tmpl_card_cat {
		font-size: 3.8vw;
	}

	.tmpl_card_title {
		font-size: 4.5vw;
	}

	.tmpl_card_text {
		font-size: 3.8vw;
	}

	.tmpl_card_label {
		font-size: 3.8vw;
	}

	.tmpl_card_spec {
		font-size: 4.5vw;
	}
}


/* ============================================
   引用（tmpl_blockquote）
============================================ */
.tmpl_blockquote {
	position: relative;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	padding: 60px 72px;
	margin-bottom: 24px;
	overflow: hidden;
}

/* 左上の " */
.tmpl_blockquote::before {
	content: '\201C';
	position: absolute;
	top: 12px;
	left: 20px;
	font-size: 6rem;
	line-height: 1;
	color: #ecf0fa;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
}

/* 右下の " */
.tmpl_blockquote::after {
	content: '\201D';
	position: absolute;
	bottom: -16px;
	right: 20px;
	font-size: 6rem;
	line-height: 1;
	color: #ecf0fa;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
}

.tmpl_blockquote_text {
	font-size: 1.125rem;
	color: #333;
	line-height: 2;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}

.tmpl_blockquote_cite {
	display: block;
	font-size: 0.9375rem;
	color: #666;
	font-style: normal;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.tmpl_blockquote {
		padding: 56px 28px;
	}

	.tmpl_blockquote::before {
		font-size: 4.5rem;
		top: 8px;
		left: 14px;
	}

	.tmpl_blockquote::after {
		font-size: 4.5rem;
		bottom: -20px;
		right: 14px;
	}

	.tmpl_blockquote_text {
		font-size: 3.8vw;
	}

	.tmpl_blockquote_cite {
		font-size: 3.4vw;
	}
}


/* ============================================
   ボックス（tmpl_box）
============================================ */
.tmpl_box {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	padding: 32px 40px;
	margin-bottom: 24px;
}

.tmpl_box_title {
	font-size: 1.125rem;
	font-weight: 500;
	color: #1a2353;
	margin-bottom: 12px;
}

.tmpl_box_text {
	font-size: 1rem;
	color: #333;
	line-height: 1.9;
}

@media screen and (max-width: 768px) {
	.tmpl_box {
		padding: 28px 24px;
	}

	.tmpl_box_title {
		font-size: 4vw;
	}

	.tmpl_box_text {
		font-size: 3.8vw;
	}
}


/* ============================================
   FAQ（tmpl_faq）
============================================ */
.tmpl_faq {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}

.tmpl_faq_item {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

/* Q行 */
.tmpl_faq_q {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 28px 36px;
}

/* Q・A間の区切り線（内側に余白） */
.tmpl_faq_divider {
	height: 1px;
	background: #e8eaef;
	margin: 0 40px;
}

/* A行 */
.tmpl_faq_a {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 24px 36px 32px;
}

/* Q. / A. ラベル */
.tmpl_faq_label {
	font-size: 1.125rem;
	font-weight: 700;
	flex-shrink: 0;
	width: 1.5em;
}

.tmpl_faq_label--q {
	color: #56ace1;
}

.tmpl_faq_label--a {
	color: #1a2353;
}

/* テキスト */
.tmpl_faq_text {
	font-size: 1rem;
	color: #333;
	line-height: 1.8;
}

@media screen and (max-width: 768px) {
	.tmpl_faq_q {
		padding: 20px 24px;
	}

	.tmpl_faq_divider {
		margin: 0 24px;
	}

	.tmpl_faq_a {
		padding: 20px 24px 28px;
	}

	.tmpl_faq_label {
		font-size: 4vw;
	}

	.tmpl_faq_text {
		font-size: 3.8vw;
	}
}


/* ============================================
   フォーム（tmpl_form）
============================================ */

/* ラッパー：白背景・角丸・最大1200px */
.tmpl_form_wrap {
	max-width: 1200px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	padding: 80px 100px;
}

@media screen and (max-width: 1240px) {
	.tmpl_form_wrap {
		max-width: 90%;
	}
}

/* 項目リスト */
.tmpl_form_rows {
	border-top: 2px solid #e3e3e6;
}

/* 1行 */
.tmpl_form_row {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 30px 15px;
	border-bottom: 2px solid #e3e3e6;
}

/* ラベルエリア */
.tmpl_form_label_wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 200px;
	padding-top: 10px;
}

.tmpl_form_label {
	font-size: 1rem;
	color: #1a2353;
	font-weight: 400;
}

/* 必須・任意バッジ */
.tmpl_form_required {
	font-size: 0.75rem;
	font-weight: 700;
	color: #e05050;
	white-space: nowrap;
}

.tmpl_form_optional {
	font-size: 0.75rem;
	color: #888;
	white-space: nowrap;
}

/* フィールドエリア */
.tmpl_form_field {
	flex: 1;
	min-width: 0;
}

/* テキスト入力 */
.tmpl_form_input {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	color: #333;
	background: #f5f6f7;
	border: none;
	border-radius: 6px;
	outline: none;
	font-family: inherit;
	transition: background 0.2s;
}

.tmpl_form_input:focus {
	background: #edf0fa;
}

/* セレクト */
.tmpl_form_select_wrap {
	position: relative;
	display: inline-block;
}

.tmpl_form_select_wrap::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 10px;
	height: 6px;
	background: url(../images/home_services_arrow.png) no-repeat center center;
	background-size: contain;
	pointer-events: none;
}

.tmpl_form_select {
	padding: 12px 44px 12px 16px;
	font-size: 1rem;
	color: #333;
	background: #f5f6f7;
	border: none;
	border-radius: 6px;
	outline: none;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	min-width: 240px;
}

.tmpl_form_select:focus {
	background: #edf0fa;
}

/* ラジオボタン */
.tmpl_form_radio_group {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.tmpl_form_radio_label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	color: #333;
	cursor: pointer;
}

.tmpl_form_radio_label input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: #56ace1;
	cursor: pointer;
	flex-shrink: 0;
}

/* チェックボックス */
.tmpl_form_check_group {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.tmpl_form_check_label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	color: #333;
	cursor: pointer;
}

.tmpl_form_check_label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #56ace1;
	cursor: pointer;
	flex-shrink: 0;
}

/* テキストエリア */
.tmpl_form_textarea {
	width: 100%;
	padding: 14px 16px;
	font-size: 1rem;
	color: #333;
	background: #f5f6f7;
	border: none;
	border-radius: 6px;
	outline: none;
	font-family: inherit;
	resize: vertical;
	min-height: 160px;
	line-height: 1.8;
	transition: background 0.2s;
}

.tmpl_form_textarea:focus {
	background: #edf0fa;
}

/* フッター区切り線 */
.tmpl_form_footer_divider {
	height: 2px;
	background: #e3e3e6;
	margin: 0 15px;
}

/* 注記テキスト */
.tmpl_form_note {
	font-size: 0.9375rem;
	color: #666;
	text-align: center;
	margin: 32px 0 28px;
	line-height: 1.8;
}

/* 送信ボタンエリア */
.tmpl_form_submit_wrap {
	display: flex;
	justify-content: center;
}

/* 送信ボタン */
.tmpl_form_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: #edf0fa;
	border: none;
	border-radius: 50px;
	padding: 20px 60px;
	font-size: 1.125rem;
	font-weight: 500;
	color: #1a2353;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.05em;
	transition: background 0.3s, color 0.3s;
	min-width: 280px;
}

.tmpl_form_submit:hover {
	background: #1a2353;
	color: #fff;
}

.tmpl_form_submit:hover .tmpl_form_submit_arrow img {
	filter: invert(1) brightness(10);
}

.tmpl_form_submit_arrow {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.tmpl_form_submit_arrow img {
	width: 18px;
	height: auto;
}

@media screen and (max-width: 768px) {
	.tmpl_form_wrap {
		padding: 48px 24px;
	}

	.tmpl_form_row {
		flex-direction: column;
		gap: 12px;
		padding: 24px 10px;
	}

	.tmpl_form_label_wrap {
		flex: none;
		padding-top: 0;
	}

	.tmpl_form_label {
		font-size: 3.8vw;
	}

	.tmpl_form_radio_group,
	.tmpl_form_check_group {
		gap: 20px;
	}

	.tmpl_form_radio_label,
	.tmpl_form_check_label {
		font-size: 3.8vw;
	}

	.tmpl_form_input,
	.tmpl_form_select,
	.tmpl_form_textarea {
		font-size: 3.8vw;
	}

	.tmpl_form_select {
		min-width: 0;
		width: 100%;
	}

	.tmpl_form_note {
		font-size: 3.4vw;
		margin: 24px 0 20px;
	}

	.tmpl_form_submit {
		font-size: 4.5vw;
		padding: 18px 40px;
		min-width: 0;
		width: 80%;
	}
}


/* ============================================
   前後ナビゲーション（tmpl_pager）
   ※ tmpl_blockを使わずオリジナルインナー
============================================ */
.sec_tmpl_pager {
	padding: 80px 20px;
}

.tmpl_pager_inner {
	max-width: 1200px;
	margin: 0 auto;
}

@media screen and (max-width: 1240px) {
	.tmpl_pager_inner {
		max-width: 90%;
	}
}

.tmpl_pager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* ボタン共通：固定幅270px */
.tmpl_pager_btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 270px;
	border: 1px solid #1a2353;
	border-radius: 50px;
	background: transparent;
	color: #1a2353;
	text-decoration: none;
	font-size: 1rem;
	padding: 16px 24px;
	transition: background 0.3s, color 0.3s;
	white-space: nowrap;
	box-sizing: border-box;
}

.tmpl_pager_btn:hover {
	background: #1a2353;
	color: #fff;
}

.tmpl_pager_btn:hover .tmpl_pager_arrow img {
	filter: invert(1) brightness(10);
}

/* 前へ：左矢印が左端・テキスト右寄せ・ドットが右端 */
.tmpl_pager_btn--prev .tmpl_pager_text {
	flex: 1;
	text-align: right;
}

/* 次へ・一覧：テキストが伸びて矢印を右端へ */
.tmpl_pager_btn--next .tmpl_pager_text,
.tmpl_pager_btn--index .tmpl_pager_text {
	flex: 1;
}

/* 青ドット */
.tmpl_pager_dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #56ace1;
	flex-shrink: 0;
}

/* 矢印 */
.tmpl_pager_arrow {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.tmpl_pager_arrow img {
	width: 18px;
	height: auto;
}

/* 前への左矢印：反転 */
.tmpl_pager_arrow--left img {
	transform: scaleX(-1);
}

.tmpl_pager_btn--prev:hover .tmpl_pager_arrow--left img {
	filter: invert(1) brightness(10);
	transform: scaleX(-1);
}

@media screen and (max-width: 768px) {
	.sec_tmpl_pager {
		padding: 50px 5%;
	}

	.tmpl_pager {
		justify-content: space-between;
	}

	/* 前へ・次へ：1行目に並べる */
	.tmpl_pager_btn--prev {
		order: 1;
		flex: 0 0 calc(50% - 6px);
		width: auto;
		font-size: 3.8vw;
		padding: 14px 16px;
	}

	.tmpl_pager_btn--next {
		order: 2;
		flex: 0 0 calc(50% - 6px);
		width: auto;
		font-size: 3.8vw;
		padding: 14px 16px;
	}

	/* 一覧に戻る：2行目に全幅 */
	.tmpl_pager_btn--index {
		order: 3;
		flex: 0 0 100%;
		width: auto;
		font-size: 3.8vw;
		padding: 14px 16px;
		justify-content: center;
	}
}


/* ============================================
   その他パーツ
   ★ 使う場合は追記する
============================================ */


/* ============================================
   画像セット（メイン1枚＋3カラム）
============================================ */

/* メイン画像 */
.tmpl_figure_main {
	margin-bottom: 40px;
}

.tmpl_figure_main img {
	width: 100%;
	display: block;
	border-radius: 15px;
}

/* 3カラム画像 */
.tmpl_img_cols {
	display: flex;
	gap: 20px;
}

.tmpl_figure_thumb {
	flex: 1;
}

.tmpl_figure_thumb img {
	width: 100%;
	display: block;
	border-radius: 15px;
}

/* キャプション共通 */
.tmpl_figcaption {
	font-size: 0.875rem;
	color: #666;
	margin-top: 10px;
	line-height: 1.6;
}

@media screen and (max-width: 768px) {
	.tmpl_img_cols {
		flex-direction: column;
		gap: 24px;
	}

	.tmpl_figcaption {
		font-size: 3.2vw;
	}
}/* ============================================
   FB対応 2026/04/08
============================================ */

/* --- FB1: 所有設備 加工材質ボックスのshadow強化 --- */
.sec_tmpl_block .tmpl_box {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* --- FB3: 所有設備 説明文〜スペック表の間隔を詰める --- */
.sec_tmpl_block .tmpl_table--spec {
	margin-top: 16px;
}

/* --- FB4: 会社概要テーブル 外枠線を統一（thもtdも同じ枠色） --- */
.tmpl_table--spec {
	border: 1px solid #0d1f3c;
	border-collapse: collapse;
}
.tmpl_table--spec th,
.tmpl_table--spec td {
	border: 1px solid #0d1f3c;
}

/* --- FB7: 製作実績カードのshadow強化 --- */
.tmpl_card {
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

/* --- FB10: CTAボタン色反転（お問い合わせ=塗り目立つ、FAQ=控えめ） --- */
.footer_cta_btn--primary {
	background: #0d1f3c;
	color: #fff;
	border-color: #0d1f3c;
}
.footer_cta_btn--primary:hover {
	background: #56ace1;
	border-color: #56ace1;
	color: #fff;
}
.footer_cta_btn--primary .footer_cta_btn_arrow img {
	filter: invert(1) brightness(10);
}
.footer_cta_btn--secondary {
	background: transparent;
	border: 1px solid #0d1f3c;
	color: #0d1f3c;
}
.footer_cta_btn--secondary:hover {
	background: #0d1f3c;
	color: #fff;
	border-color: #0d1f3c;
}
.footer_cta_btn--secondary .footer_cta_btn_dot {
	background: #0d1f3c;
}

/* --- FB12: アクセスマップ拡大 --- */
.tmpl_columns--2 iframe {
	min-height: 400px;
}

/* --- FB2: SP時 設備説明文の幅を画像幅に合わせる --- */
@media screen and (max-width: 768px) {
	.sec_tmpl_block .tmpl_columns--2 > .tmpl_column > div[style*="display:flex"] {
		flex-direction: column;
	}
	.sec_tmpl_block .tmpl_columns--2 > .tmpl_column > div[style*="display:flex"] > div[style*="flex:0 0 45%"] {
		flex: 0 0 100% !important;
	}
}


/* --- フッター内 採用バナー --- */
.footer_recruit {
	margin-top: 24px;
	padding: 16px 20px;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 8px;
	background: rgba(255,255,255,0.05);
}

.footer_recruit_text {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.8);
	margin-bottom: 8px;
}

.footer_recruit_link {
	font-size: 0.875rem;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.05em;
}

.footer_recruit_link:hover {
	color: #56ace1;
}


/* --- 製作実績カード画像の高さ統一 --- */
.tmpl_card_img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
}

.tmpl_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}