@charset "utf-8";
/*
	* 基本スタイルシート
	* CMSのパーツ、テンプレートのスタイル
	* ver1
	* Copyright (C) ●●など
	* 更新履歴
		└ 
*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////////
	CMSスタイル設定
//////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ******************************************************************************************
	テンプレート > 子ページ（内容含む）一覧テンプレート
****************************************************************************************** */
/* アコーディオンの見出しスタイル */
.bl_collapsibleTrigger {
	cursor: pointer; /* クリック可能であることを示すカーソル */
	position: relative;
	padding: 0 30px 0 0; /* アイコンのためのスペース */
	color: inherit; /* 親要素の文字色を継承 */
	display: block;
	width: 100%;
	background-color: inherit;
	border: none;
	text-align: left;
}

.bl_collapsibleTrigger:hover {
	text-decoration: underline;
	background-color: inherit;
}

/* 開閉状態を示すアイコン */
.bl_collapsibleTrigger::before {
	content: '+'; /* 閉じた状態のアイコンは常に '+' */
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%); /* 垂直方向中央揃え */
	font-weight: bold;
	font-size: 1.2em;
	transition: transform 0.2s ease-in-out; /* アニメーションを追加 */
}

/* 開いた状態のアイコン */
.bl_collapsibleTrigger.is-active::before {
	/* '+' を45度回転させて '×' のように見せる */
	transform: translateY(-50%) rotate(45deg);
}

/* アコーディオンのコンテンツ部分のスタイル */
.bl_collapsibleContent {
	/* padding: 15px;
	border-top: none;
	margin-bottom: 15px;
	background-color: #fff; */
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	テンプレート > 子ページの目次を表示する
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ======================================================================
	下線スタイルとネスト子ページスタイル
====================================================================== */
/* 第一階層 */
.st_pageList > li > a{
	border-bottom: 2px dotted #bebebe;
}
/* 第二階層以降 */
.st_pageList .children a{
	border-bottom: 1px solid #bebebe;
}
/* ネスト対策 */
.st_pageList .children{
	padding-left: 30px;
}
/* ======================================================================
	リンクスタイル
====================================================================== */
.st_pageList li > a{
	display: block;
	position: relative;
	margin: .5rem 0;
	padding: 12px calc(16px + 8px + 10px) 12px 8px;/* calc矢印領域確保→ calc(矢印アイコン領域 + 移動距離 + 余白 ) */
}
.st_pageList li > a::after{
	/* content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	border: 4px solid transparent;
	border-left: 7px solid var(--mainColor); */
	content: '';
    display: block;
    width: 16px;
    aspect-ratio: 1 / 1;
    background-image: url(../img/top/icon-arrow-right.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}
.st_pageList li > a:hover::after{
	right: 6px;
}
.st_pageList li > a:hover{
	opacity: 1;
	background-color: rgb(3 165 113 / 5%);
	text-decoration: none;
}
/* ******************************************************************************************
	パーツ > ページャー
****************************************************************************************** */
.bl_pager{
	display: flex;
	justify-content: space-between;
	margin-top: calc(1.5rem + 5rem);/* editor相殺分 + 余白 */
}
.bl_pager_prev, .bl_pager_next{
	width: calc(50% - 1rem);
}
.bl_pager_prev a, .bl_pager_next a{
	display: block;
	position: relative;
	margin: 0 auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border: 1px solid var(--black);
	border-radius: 5px;
	color: var(--black);
	text-decoration: none;
}
.bl_pager_prev a:before, .bl_pager_next a:before{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	margin: auto;
	color: var(--black);
}
.bl_pager_prev a{
	display: flex;
	align-items: center;
	height: 100%;
	padding-right: 1.25rem;
	padding-left: 2.5rem;
}
.bl_pager_next a{
	padding-right: 2.5rem;
	padding-left: 1.25rem;
}
/*左向き, 右向きの矢印*/
.bl_pager_prev a, .bl_pager_next a{
	position: relative;
}
.bl_pager_prev a:before, .bl_pager_next a:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	transition: .3s;
	width: 13px;
	height: 13px;
	margin: auto;
	border-top: 2px solid var(--black);
	border-right: 2px solid var(--black);
}
/*左向きの矢印*/
.bl_pager_prev a:before{
	right: auto;
	left: 1rem;
	transform: rotate(-135deg);
}
/*右向きの矢印*/
.bl_pager_next a:before{
	right: 1rem;
	left: auto;
	transform: rotate(45deg);
}

@media (max-width:768px){
	.bl_pager{
		display: block;
	}
	.bl_pager_prev, .bl_pager_next{
		width: 100%;
	}
	.bl_pager_prev + .bl_pager_next{
		margin-top: 1rem;
	}
}
/* ******************************************************************************************
	404ページ
****************************************************************************************** */
.st_editor .el_errorUrl{
	padding: 10px 0;
	border-bottom: 3px solid var(--mainColor);
	font-size: 1.1rem;
	letter-spacing: 2px;
}
.st_editor .el_errorUrl:before{
	content: "\f138";
	padding-right: 10px;
	color: var(--mainColor);
	font-weight: bold;
	font-size: 1rem;
	font-family: "Font Awesome 5 Free";
}
.st_editor .bl_errorList li::marker{
	color: var(--mainColor);
	font-size: 1.125rem;
}