@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100..900&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");

:root {
	--color-ris: #00AFEC;
	--color-ris50: #beeeff;
	--color-ris20: #eff5f9;
	--color-bun: #f18904;
}
* {
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #333;
}
a:hover, button:hover {
	opacity: .9;
}

/* ****************************** */
/* ヘッダ */
/* ****************************** */
header {
	width: 100%;
	height: 60px;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(0, 0, 0, .6));
	border-top: 10px solid var(--color-ris);
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	background-color: #fff;
	z-index: 100;
}
.sub-top-logo-area {
	padding-left: 15px;
	min-width: 130px;
}
.sub-top-logo-area img {
	padding-bottom: 3px;
	height: 45px;
}
.sub-header-nav-area {
	width: auto;
	padding-right: 10px;
}
.sub-header-nav-area .header-nav {
	display: flex;
}
.sub-header-nav-area li {
	padding: 0 10px;
	font-weight: 500;
	color: #fff;
	border-left: 1px solid #fff;
}

/* ****************************** */
/* パンくずリスト */
/* ****************************** */
#sub-breadcrumb-area {
	height: 38px;
	padding: 10px;
	background-color: #f5f5f5;
	position: sticky;
	top: 60px;
	z-index: 100;
}
#sub-breadcrumb-area .sub-breadcrumbs {
	display: flex;
}
#sub-breadcrumb-area li {
	color: #666;
}
#sub-breadcrumb-area li::before {
	padding: 0 0.25rem;
	font: var(--fa-font-solid);
	content: "\f0da";
	color: var(--color-ris);
}
#sub-breadcrumb-area .breadcrumb-Top a {
	font-weight: 600;
}
#sub-breadcrumb-area .breadcrumb-Top::before {
	content: "";
}

/* ****************************** */
/* 下部「トップへ戻る」
/* ****************************** */
.sub-bottom-toTop0 {
	margin: 0 auto;
	width: 100%;
	padding: 10px;
	border-top: 1px solid var(--color-ris50);
	background-color: #fff;
}
.sub-bottom-toTop0 a {
	display: inline-block;
	width: 100%;
	text-align: center;
}
.sub-bottom-toTop0 a::before {
	font: var(--fa-font-solid);
	content: "\f015";
	color: var(--color-ris);
	padding-right: 0.25rem;
	font-size: 0.8rem;
}
.sub-bottom-toTop {
	margin: 0 auto;
	padding-block: 30px;
	width: 100%;
	background-color: #fff;
}
.sub-bottom-toTop a {
	border: 1px solid #ccc;
	padding: 15px 30px;
}
.sub-bottom-toTop a::before {
	font: var(--fa-font-solid);
	content: "\f060";
	color: var(--color-ris);
	padding-right: 1rem;
	font-size: 1rem;
}

/* ****************************** */
/* メイン */
/* ****************************** */
/* flexで左右にarea分け */
main {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 1200px;
	display: flex;
}
/* flex 左 = このページのメインエリア */
#main-contents-area {
	flex: 1;
	min-width: 0;
	padding: 0 25px 20px 25px;
	line-height: 1.75;
}
/* flex 右 = サイドメニューエリア */
#side-menu-area {
	flex: 0 0 auto;
	padding: 10px 15px;
	margin-bottom: 20px;
}

/* ****************************** */
/* メインコンテンツ 汎用 */
/* ****************************** */
/* 見出 */
h1 {
	position: relative;
	border-top: 2px solid #ddd;
	margin: 40px 0 10px 0;
	padding: 10px 0;
	font-weight: 600;
	font-size: 1.75rem;
}
h1:before {
	position: absolute;
	left: 0;
	top: -2px;
	width: 10%;
	height: 2px;
	content: '';
	background: var(--color-ris);
}
h2 {
	margin: 10px 0;
	font-weight: 600;
	font-size: 1.25rem;
}

/* リンク */
#main-contents-area a {
	text-decoration: underline;
	color: var(--color-ris)
}
#main-contents-area a::after {
	display: inline-block;
	content: "";
	background: url("./img/icon_linkto.svg") no-repeat center / contain;
	width: 0.8rem;
	height: 0.8rem;
	position: relative;
	top: 1px;
	margin-left: 0.5rem;
}

/* 表（table） */
#main-contents-area table {
	margin: 0.5em 0;
	width: 100%;
}
#main-contents-area th, #main-contents-area td{
	border: 1px solid #bbb !important;
	padding: 0.15em 0.5em;
}
#main-contents-area th {
	background-color: var(--color-ris50);
}

/* 揃え */
.align-right {
	text-align: right;
}
.align-center {
	text-align: center;
}

/* 番号付きリスト */
ol {
	padding-left: 1rem;
}

/* メモ */
.memo {
	font-size: 0.9em;
	color: #555;
}

/* ****************************** */
/* セレクトタブ */
/* ****************************** */
.select-tabs {
	display: flex;
}
.select-tabs button {
	margin: 0 2px;
	border: 1px solid #ccc;
	padding: 6px 4px;
	line-height: 1;
	color: #fff;
	background-color: #efefef;
	color: var(--color-ris);
	border-radius: 3px;
	white-space: nowrap;
}
.select-current {
	border: 1px solid var(--color-ris) !important;
	background-color: var(--color-ris) !important;
	color: #fff !important;
}

/* ****************************** */
/* タイトル */
/* ****************************** */
#main-title-area {
	width:100%;
	margin: 15px auto;
	height: calc(100vw * 0.2);
	max-height: 150px;
	background-image: url("./img/sub-title-mark.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	padding: 0 0 0 40px;
	/* font-size: clamp(30px, 3vw, 70px); */
	font-size: clamp(30px, 3vw, 50px);
	font-weight: 500;
	line-height: 1.25;
}

/* ****************************** */
/* サイドメニュー */
/* ****************************** */
.side-menu-area {
	min-width: 210px;
	position: sticky;
	top: 110px;
}
.side-menu-area .side-menu-header {
	font-size: 1.15rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
}
.side-menu {
	border: 1px solid var(--color-ris);
	padding: 10px;
}
.side-menu-area ul {
	margin: 6px 0 12px 0;
	font-weight: 500;
}
.side-menu-area li {
	padding: 0.3rem 1rem;
	color: #666;
	font-size: 1rem;
}
.side-menu-area a::before {
	font: var(--fa-font-solid);
	content: "\f138";
	color: var(--color-ris);
	padding-right: 0.25rem;
	font-size: 0.8rem;
}
.side-menu-area a:hover {
	color: var(--color-ris);
}
.side-menu-toTop {
	display: block;
	padding: 6px 0;
	border-top: 1px solid var(--color-ris50);
}
.side-menu-toTop::before {
	content: "\f060" !important;
}
.side-menu-sns-links-area {
	border-top: 1px solid var(--color-ris50);
}
.side-menu-sns-links {
	margin-top: 10px;
	border-top: 1px solid #000;
	text-align: center;
	border: none;
}
.side-menu-sns-links i {
	font-size: 1.25rem;
}
.side-menu-sns-links a::before{
	content: "";
	border: none;
}
.select-senko-button {
	white-space: nowrap;
}

/* ****************************** */
/* メディアクエリ */
/* ****************************** */
/* 768px以下のとき */
@media screen and (max-width: 768px) {
main {
	flex-direction: column;
}
#side-menu-area {
	margin-top: 0px;
	padding: 0 25px;
}
}
/* 480px以下のとき */
@media screen and (max-width: 480px) {
.sub-header-nav-area li {
	font-size: 0.8rem;
	padding-right: 0;
}
}