@charset "UTF-8";

/* 以下共通設定 */
* {
	font-size: inherit;
	box-sizing: border-box;
	--box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px, rgba(0, 0, 0, 0.24) 0 1px 3px;

	--transition-time: 300ms;
	--zkai-color: #043491;
	--zkai-color-light: #8199c8;
	--white: #fff;
	--black: #333;
	--gray: #ccc;
	--lightgray: #eee;
	--bg-color-01: #f0f3f8;
	--bg-color-02: #f5f5f5;
	--link-color: #003b83;
	--red: #ff4b00;
	--mincho: "ヒラギノ明朝 W2 JIS2004", "Hiragino Mincho W2 JIS2004", serif;
	--gothic: "ヒラギノ角ゴ W2 JIS2004",
	"Hiragino Kaku Gothic W2 JIS2004" sans-serif;
	--bold-gothic: "ヒラギノ角ゴ W3 JIS2004",
	"Hiragino Kaku Gothic W3 JIS2004" sans-serif;
	--kyokashotai: "UDDigiKyoLatin Regular", "UDDigiKyoLatin-Regular",
	"UDデジタル教科書体 R", "UDDigiKyokasho R", sans-serif;
	--kyokashotai-bold: "UDDigiKyoLatin Bold", "UDDigiKyoLatin-Bold",
	"UDデジタル教科書体 B", "UDDigiKyokasho B", sans-serif;
}

/* 教科カラー */
* {
	--japanese-color: #e8465a;
	--japanese-color-80: #ed6b7b;
	--japanese-color-60: #f1909c;
	--japanese-color-40: #f6b5bd;
	--japanese-color-30: #f8c7cd;
	--japanese-color-20: #fadade;
	--japanese-color-15: #fce3e6;
	--japanese-color-10: #fdecee;
	--math-color: #00a5e3;
	--math-color-80: #33b7e9;
	--math-color-60: #66c9ee;
	--math-color-40: #99dbf4;
	--math-color-30: #b2e4f7;
	--math-color-20: #ccedf9;
	--math-color-15: #d9f1fb;
	--math-color-10: #e5f6fc;
	--science-color: #43b149;
	--science-color-80: #69c16d;
	--science-color-60: #8ed092;
	--science-color-40: #b4e0b6;
	--science-color-30: #c7e8c8;
	--science-color-20: #d9efdb;
	--science-color-15: #e3f3e4;
	--science-color-10: #ecf7ed;
	--social-color: #f5a200;
	--social-color-80: #f7b533;
	--social-color-60: #f9c766;
	--social-color-40: #fbda99;
	--social-color-30: #fce3b2;
	--social-color-20: #fdeccc;
	--social-color-15: #fdf1d9;
	--social-color-10: #fef6e5;
	--english-color: #6e60a8;
	--english-color-80: #8b80b9;
	--english-color-60: #a8a0cb;
	--english-color-40: #c5bfdc;
	--english-color-30: #d3cfe5;
	--english-color-20: #e2dfee;
	--english-color-15: #e9e7f2;
	--english-color-10: #f0eff6;
	--multi-color: #00609d;
	--multi-color-80: #3380b1;
	--multi-color-60: #66a0c4;
	--multi-color-40: #99bfd8;
	--multi-color-30: #b2cfe2;
	--multi-color-20: #ccdfeb;
	--multi-color-15: #d9e7f0;
	--multi-color-10: #e5eff5;
	--essayexam-color: #c9393b;
	--essayexam-color-80: #d46162;
	--essayexam-color-60: #df8889;
	--essayexam-color-40: #e9b0b1;
	--essayexam-color-30: #efc4c4;
	--essayexam-color-20: #f4d7d8;
	--essayexam-color-15: #f7e1e2;
	--essayexam-color-10: #faebeb;
	--experience-color: #c3d83f;
	--experience-color-80: #cfe065;
	--experience-color-60: #dbe88c;
	--experience-color-40: #e7efb2;
	--experience-color-30: #edf3c5;
	--experience-color-20: #f3f7d9;
	--experience-color-15: #f6f9e2;
	--experience-color-10: #f9fbec;
}

body {
	font-size: 16px;
	line-height: 150%;
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding-bottom: 120px;
	color: var(--black);
	background-color: var(--bg-color-02);
}

main {
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 1em;
}

section {
	width: 100%;
	margin: 2em 0;
	padding: 1em;
	border: 1px solid var(--black);
	background-color: var(--white);
	box-shadow: var(--box-shadow);
}

/* アキの設定　マージンの設定 */
.block-center {
	margin-right: auto !important;
	margin-left: auto !important;
}

.block-right {
	margin-right: 0 !important;
	margin-left: auto !important;
}

.block-left {
	margin-right: auto !important;
	margin-left: 0 !important;
}

.mt1 {
	margin-top: 24px !important;
}

.mt2 {
	margin-top: 48px !important;
}

.mt3 {
	margin-top: 72px !important;
}

.mb1 {
	margin-bottom: 24px !important;
}

.mb2 {
	margin-bottom: 48px !important;
}

.mb3 {
	margin-bottom: 72px !important;
}

/* 囲み */
.border-area {
	width: 100%;
	margin: 0.5em auto;
	padding: 0.5em;
	border: 1px solid var(--black);
}

.border-area__0padding {
	width: 100%;
	margin: 0.5em auto;
	border: 1px solid var(--black);
}

.border-area__0padding > *:first-child {
	margin: 0;
}

.padding-area {
	padding: 0.5em;
}

/* 文字色の設定 */
.text-color-main {
	color: var(--zkai-color) !important;
}

.text-color-white {
	color: var(--white) !important;
}

.text-color-red {
	color: var(--red) !important;
}

.text-color-gray {
	color: var(--gray) !important;
}

/* 背景色の設定 */
.bg-color-main {
	color: var(--white) !important;
	background-color: var(--zkai-color) !important;
}

.bg-color-01 {
	background-color: var(--bg-color-01) !important;
}

.bg-color-02 {
	background-color: var(--bg-color-02) !important;
}

/* 教科カラーの設定 */
/* 国語 */
.jpn-color {
	color: var(--japanese-color);
}

.bg-jpn-color {
	color: var(--white);
	background-color: var(--japanese-color);
}

.jpn-color-80 {
	color: var(--japanese-color-80);
}

.bg-jpn-color-80 {
	color: var(--white);
	background-color: var(--japanese-color-80);
}

.jpn-color-60 {
	color: var(--japanese-color-60);
}

.bg-jpn-color-60 {
	color: var(--black);
	background-color: var(--japanese-color-60);
}

.jpn-color-40 {
	color: var(--japanese-color-40);
}

.bg-jpn-color-40 {
	color: var(--black);
	background-color: var(--japanese-color-40);
}

.jpn-color-30 {
	color: var(--japanese-color-30);
}

.bg-jpn-color-30 {
	color: var(--black);
	background-color: var(--japanese-color-30);
}

.jpn-color-20 {
	color: var(--japanese-color-20);
}

.bg-jpn-color-20 {
	color: var(--black);
	background-color: var(--japanese-color-20);
}

.jpn-color-15 {
	color: var(--japanese-color-15);
}

.bg-jpn-color-15 {
	color: var(--black);
	background-color: var(--japanese-color-15);
}

.jpn-color-10 {
	color: var(--japanese-color-10);
}

.bg-jpn-color-10 {
	color: var(--black);
	background-color: var(--japanese-color-10);
}

/* 数学 */
.mat-color {
	color: var(--math-color);
}

.bg-mat-color {
	color: var(--white);
	background-color: var(--math-color);
}

.mat-color-80 {
	color: var(--math-color-80);
}

.bg-mat-color-80 {
	color: var(--white);
	background-color: var(--math-color-80);
}

.mat-color-60 {
	color: var(--math-color-60);
}

.bg-mat-color-60 {
	color: var(--black);
	background-color: var(--math-color-60);
}

.mat-color-40 {
	color: var(--math-color-40);
}

.bg-mat-color-40 {
	color: var(--black);
	background-color: var(--math-color-40);
}

.mat-color-30 {
	color: var(--math-color-30);
}

.bg-mat-color-30 {
	color: var(--black);
	background-color: var(--math-color-30);
}

.mat-color-20 {
	color: var(--math-color-20);
}

.bg-mat-color-20 {
	color: var(--black);
	background-color: var(--math-color-20);
}

.mat-color-15 {
	color: var(--math-color-15);
}

.bg-mat-color-15 {
	color: var(--black);
	background-color: var(--math-color-15);
}

.mat-color-10 {
	color: var(--math-color-10);
}

.bg-mat-color-10 {
	color: var(--black);
	background-color: var(--math-color-10);
}

/* 理科 */
.sci-color {
	color: var(--science-color);
}

.bg-sci-color {
	color: var(--white);
	background-color: var(--science-color);
}

.sci-color-80 {
	color: var(--science-color-80);
}

.bg-sci-color-80 {
	color: var(--white);
	background-color: var(--science-color-80);
}

.sci-color-60 {
	color: var(--science-color-60);
}

.bg-sci-color-60 {
	color: var(--black);
	background-color: var(--science-color-60);
}

.sci-color-40 {
	color: var(--science-color-40);
}

.bg-sci-color-40 {
	color: var(--black);
	background-color: var(--science-color-40);
}

.sci-color-30 {
	color: var(--science-color-30);
}

.bg-sci-color-30 {
	color: var(--black);
	background-color: var(--science-color-30);
}

.sci-color-20 {
	color: var(--science-color-20);
}

.bg-sci-color-20 {
	color: var(--black);
	background-color: var(--science-color-20);
}

.sci-color-15 {
	color: var(--science-color-15);
}

.bg-sci-color-15 {
	color: var(--black);
	background-color: var(--science-color-15);
}

.sci-color-10 {
	color: var(--science-color-10);
}

.bg-sci-color-10 {
	color: var(--black);
	background-color: var(--science-color-10);
}

/* 社会／地歴 */
.soc-color {
	color: var(--social-color);
}

.bg-soc-color {
	color: var(--white);
	background-color: var(--social-color);
}

.soc-color-80 {
	color: var(--social-color-80);
}

.bg-soc-color-80 {
	color: var(--white);
	background-color: var(--social-color-80);
}

.soc-color-60 {
	color: var(--social-color-60);
}

.bg-soc-color-60 {
	color: var(--black);
	background-color: var(--social-color-60);
}

.soc-color-40 {
	color: var(--social-color-40);
}

.bg-soc-color-40 {
	color: var(--black);
	background-color: var(--social-color-40);
}

.soc-color-30 {
	color: var(--social-color-30);
}

.bg-soc-color-30 {
	color: var(--black);
	background-color: var(--social-color-30);
}

.soc-color-20 {
	color: var(--social-color-20);
}

.bg-soc-color-20 {
	color: var(--black);
	background-color: var(--social-color-20);
}

.soc-color-15 {
	color: var(--social-color-15);
}

.bg-soc-color-15 {
	color: var(--black);
	background-color: var(--social-color-15);
}

.soc-color-10 {
	color: var(--social-color-10);
}

.bg-soc-color-10 {
	color: var(--black);
	background-color: var(--social-color-10);
}

/* 英語 */
.eng-color {
	color: var(--english-color);
}

.bg-eng-color {
	color: var(--white);
	background-color: var(--english-color);
}

.eng-color-80 {
	color: var(--english-color-80);
}

.bg-eng-color-80 {
	color: var(--white);
	background-color: var(--english-color-80);
}

.eng-color-60 {
	color: var(--english-color-60);
}

.bg-eng-color-60 {
	color: var(--black);
	background-color: var(--english-color-60);
}

.eng-color-40 {
	color: var(--english-color-40);
}

.bg-eng-color-40 {
	color: var(--black);
	background-color: var(--english-color-40);
}

.eng-color-30 {
	color: var(--english-color-30);
}

.bg-eng-color-30 {
	color: var(--black);
	background-color: var(--english-color-30);
}

.eng-color-20 {
	color: var(--english-color-20);
}

.bg-eng-color-20 {
	color: var(--black);
	background-color: var(--english-color-20);
}

.eng-color-15 {
	color: var(--english-color-15);
}

.bg-eng-color-15 {
	color: var(--black);
	background-color: var(--english-color-15);
}

.eng-color-10 {
	color: var(--english-color-10);
}

.bg-eng-color-10 {
	color: var(--black);
	background-color: var(--english-color-10);
}

/* 教科横断 */
.mul-color {
	color: var(--multi-color);
}

.bg-mul-color {
	color: var(--white);
	background-color: var(--multi-color);
}

.mul-color-80 {
	color: var(--multi-color-80);
}

.bg-mul-color-80 {
	color: var(--white);
	background-color: var(--multi-color-80);
}

.mul-color-60 {
	color: var(--multi-color-60);
}

.bg-mul-color-60 {
	color: var(--black);
	background-color: var(--multi-color-60);
}

.mul-color-40 {
	color: var(--multi-color-40);
}

.bg-mul-color-40 {
	color: var(--black);
	background-color: var(--multi-color-40);
}

.mul-color-30 {
	color: var(--multi-color-30);
}

.bg-mul-color-30 {
	color: var(--black);
	background-color: var(--multi-color-30);
}

.mul-color-20 {
	color: var(--multi-color-20);
}

.bg-mul-color-20 {
	color: var(--black);
	background-color: var(--multi-color-20);
}

.mul-color-15 {
	color: var(--multi-color-15);
}

.bg-mul-color-15 {
	color: var(--black);
	background-color: var(--multi-color-15);
}

.mul-color-10 {
	color: var(--multi-color-10);
}

.bg-mul-color-10 {
	color: var(--black);
	background-color: var(--multi-color-10);
}

/* 小論文／総合型選抜 */
.ese-color {
	color: var(--essayexam-color);
}

.bg-ese-color {
	color: var(--white);
	background-color: var(--essayexam-color);
}

.ese-color-80 {
	color: var(--essayexam-color-80);
}

.bg-ese-color-80 {
	color: var(--white);
	background-color: var(--essayexam-color-80);
}

.ese-color-60 {
	color: var(--essayexam-color-60);
}

.bg-ese-color-60 {
	color: var(--black);
	background-color: var(--essayexam-color-60);
}

.ese-color-40 {
	color: var(--essayexam-color-40);
}

.bg-ese-color-40 {
	color: var(--black);
	background-color: var(--essayexam-color-40);
}

.ese-color-30 {
	color: var(--essayexam-color-30);
}

.bg-ese-color-30 {
	color: var(--black);
	background-color: var(--essayexam-color-30);
}

.ese-color-20 {
	color: var(--essayexam-color-20);
}

.bg-ese-color-20 {
	color: var(--black);
	background-color: var(--essayexam-color-20);
}

.ese-color-15 {
	color: var(--essayexam-color-15);
}

.bg-ese-color-15 {
	color: var(--black);
	background-color: var(--essayexam-color-15);
}

.ese-color-10 {
	color: var(--essayexam-color-10);
}

.bg-ese-color-10 {
	color: var(--black);
	background-color: var(--essayexam-color-10);
}

/* けいけん／未来探求 */
.exp-color {
	color: var(--experience-color);
}

.bg-exp-color {
	color: var(--black);
	background-color: var(--experience-color);
}

.exp-color-80 {
	color: var(--experience-color-80);
}

.bg-exp-color-80 {
	color: var(--black);
	background-color: var(--experience-color-80);
}

.exp-color-60 {
	color: var(--experience-color-60);
}

.bg-exp-color-60 {
	color: var(--black);
	background-color: var(--experience-color-60);
}

.exp-color-40 {
	color: var(--experience-color-40);
}

.bg-exp-color-40 {
	color: var(--black);
	background-color: var(--experience-color-40);
}

.exp-color-30 {
	color: var(--experience-color-30);
}

.bg-exp-color-30 {
	color: var(--black);
	background-color: var(--experience-color-30);
}

.exp-color-20 {
	color: var(--experience-color-20);
}

.bg-exp-color-20 {
	color: var(--black);
	background-color: var(--experience-color-20);
}

.exp-color-15 {
	color: var(--experience-color-15);
}

.bg-exp-color-15 {
	color: var(--black);
	background-color: var(--experience-color-15);
}

.exp-color-10 {
	color: var(--experience-color-10);
}

.bg-exp-color-10 {
	color: var(--black);
	background-color: var(--experience-color-10);
}

/* フォントの設定 */
h1 {
	font-family: var(--mincho);
	font-size: 28px;
	line-height: 120%;
	letter-spacing: 0.04em;
}

h2 {
	font-family: var(--mincho);
	font-size: 24px;
	line-height: 125%;
	letter-spacing: 0.04em;
}

h3 {
	font-family: var(--mincho);
	font-size: 20px;
	line-height: 125%;
	letter-spacing: 0.04em;
}

h4 {
	font-family: var(--mincho);
	font-size: 18px;
	line-height: 150%;
	letter-spacing: 0.04em;
}

@media screen and (max-width: 540px) {
	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 22px;
	}
}

p {
	font-family: var(--gothic);
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.04em;
}

p b {
	font-family: var(--bold-gothic);
}

.study-content * {
	font-family: var(--kyokashotai) !important;
}

.study-content b {
	font-family: var(--kyokashotai-bold) !important;
}

/* 見出しの設定 */
.heading-style-a {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.25em 0.5em;
	color: var(--white);
	background-color: var(--zkai-color);
}

.heading-style-b {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 0.5em;
	color: var(--zkai-color);
	border-left: 6px solid var(--zkai-color);
}

.heading-style-c {
	position: relative;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-left: 1em;
	color: var(--zkai-color);
}

.heading-style-c::before {
	position: absolute;
	top: 50%;
	left: 0;
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	content: "";
	transform: translateY(-50%);
	background-color: var(--zkai-color);
}

.heading-style-d {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.1em 0.5em;
	color: var(--zkai-color);
	border-bottom: 2px solid var(--zkai-color);
}

.heading-style-e {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.1em 0.5em;
	color: var(--zkai-color);
	border: 1px solid var(--zkai-color);
}

.heading-style-f {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.1em 0.5em;
	color: var(--zkai-color);
	border-left: 4px solid var(--zkai-color);
	background-color: var(--bg-color-01);
	box-shadow: var(--box-shadow);
}

/* 以上共通設定 */

/* エリアの設定 */
/* ヘッダー */
.white-header {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	border-bottom: 1px solid var(--black);
	background-color: var(--white);
	box-shadow: var(--box-shadow);
}

.white-header .header-logo {
	width: 140px;
	height: auto;
	margin: 25px;
}

.white-header h1 {
	width: calc(100% - 190px);
	margin: 10px auto;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.white-header .header-logo {
		width: 90px;
		height: auto;
		margin: 18px;
	}

	.white-header h1 {
		width: calc(100% - 126px);
		margin: 10px auto;
		text-align: center;
	}
}

.main-color-header {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	color: var(--white);
	background-color: var(--zkai-color);
	box-shadow: var(--box-shadow);
}

.main-color-header .header-logo {
	width: 140px;
	height: auto;
	margin: 25px;
}

.main-color-header h1 {
	width: calc(100% - 190px);
	margin: 10px auto;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.main-color-header .header-logo {
		width: 90px;
		height: auto;
		margin: 18px;
	}

	.main-color-header h1 {
		width: calc(100% - 126px);
		margin: 10px auto;
		text-align: center;
	}
}

/* フッター */
/* メインカラーのフッター */
.main-color-footer {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 100px;
	padding: 0 10%;
	text-align: center;
	color: var(--white);
	background-color: var(--zkai-color);
}

.main-color-footer .logo {
	display: block;
	overflow: hidden;
	width: 140px;
	height: 34px;
	white-space: nowrap;
	text-indent: 100%;
	background-image: url(../images/zkai_logo_n.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

.main-color-footer p {
	font-family: var(--gothic);
	font-size: 0.8em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	text-align: right;
	color: var(--white);
}

/* バックグラウンドカラーのフッター */
.white-color-footer {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 100px;
	padding: 0 10%;
	text-align: center;
	color: var(--black);
	background-color: var(--bg-color-01);
}

.white-color-footer .logo {
	display: block;
	overflow: hidden;
	width: 140px;
	height: 34px;
	white-space: nowrap;
	text-indent: 100%;
	background-image: url(../images/zkai_logo_p.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

.white-color-footer p {
	font-family: var(--gothic);
	font-size: 0.8em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	text-align: right;
	color: var(--black);
}

/* 要素の設定 */

/* テキストリンク */
.text-link[target="_blank"]::after {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 0.1em;
	content: "";
	vertical-align: super;
	background-image: url(../images/outer-link_p.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

.text-link {
	font-family: var(--gothic);
	cursor: pointer;
	text-decoration: underline;
	color: var(--link-color);
}

.text-link::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.1em;
	content: "";
	vertical-align: middle;
	background-image: url(../images/text-link.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

/* ボタンリンク小(S) */
.button-link-s {
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 300px;
	max-width: 100%;
	margin: auto;
	padding: 0.75em 1.5em 0.75em 1em;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--white);
	border-radius: 8px;
	background-color: var(--zkai-color);
	box-shadow: var(--box-shadow);
}

.button-link-s::before {
	position: absolute;
	top: 50%;
	right: 14px;
	display: block;
	width: 8px;
	height: 8px;
	content: "";
	transform: rotate(45deg) translateY(-50%);
	border: 2px solid transparent;
	border-top: 2px solid var(--white);
	border-right: 2px solid var(--white);
}

.button-link-s[target="_blank"]::after {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 0.1em;
	content: "";
	vertical-align: super;
	background-image: url(../images/outer-link_n.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

/* ボタンリンク大(L) */
.button-link-l {
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 540px;
	max-width: 100%;
	margin: auto;
	padding: 0.75em 1.5em 0.75em 1em;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--white);
	border-radius: 8px;
	background-color: var(--zkai-color);
	box-shadow: var(--box-shadow);
}

@media screen and (max-width: 768px) {
	.button-link-l {
		width: 300px;
	}
}

.button-link-l::before {
	position: absolute;
	top: 50%;
	right: 14px;
	display: block;
	width: 8px;
	height: 8px;
	content: "";
	transform: rotate(45deg) translateY(-50%);
	border: 2px solid transparent;
	border-top: 2px solid var(--white);
	border-right: 2px solid var(--white);
}

.button-link-l[target="_blank"]::after {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 0.1em;
	content: "";
	vertical-align: super;
	background-image: url(../images/outer-link_n.svg);
	background-repeat: no-repeat;
	background-size: 100%;
}

/* プライマリーボタン */
.primary-button-ss {
	font-size: inherit;
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 48px;
	max-width: 100%;
	height: 48px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--white);
	border: none;
	border-radius: 8px;
	background-color: var(--zkai-color);
	box-shadow: var(--box-shadow);
}

.primary-button-s {
	font-size: inherit;
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 160px;
	max-width: 100%;
	height: 48px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--white);
	border: none;
	border-radius: 8px;
	background-color: var(--zkai-color);
	box-shadow: var(--box-shadow);
}

.primary-button-l {
	font-size: inherit;
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 300px;
	max-width: 100%;
	height: 48px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--white);
	border: none;
	border-radius: 8px;
	background-color: var(--zkai-color);
	box-shadow: var(--box-shadow);
}

/* セカンダリーボタン */
.secondary-button-ss {
	font-size: inherit;
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 48px;
	max-width: 100%;
	height: 48px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--zkai-color);
	border: 1px solid var(--zkai-color);
	border-radius: 8px;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
}

.secondary-button-s {
	font-size: inherit;
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 160px;
	max-width: 100%;
	height: 48px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--zkai-color);
	border: 1px solid var(--zkai-color);
	border-radius: 8px;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
}

.secondary-button-l {
	font-size: inherit;
	font-weight: var(--gothic);
	position: relative;
	display: block;
	width: 300px;
	max-width: 100%;
	height: 48px;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: var(--zkai-color);
	border: 1px solid var(--zkai-color);
	border-radius: 8px;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
}

/* トグルボタン */
.toggle-button-area {
	display: block;
	max-width: 300px;
	margin: 0.5em auto;
}

.toggle-button-unit {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
}

.toggle-button {
	position: relative;
	width: 80px;
	height: 36px;
	margin: 0 10px;
	cursor: pointer;
	transition: linear all var(--transition-time);
	border: 1px solid var(--gray);
	border-radius: 18px;
	background-color: var(--lightgray);
}

.toggle-button::before {
	position: absolute;
	top: 50%;
	left: 3px;
	display: block;
	width: 30px;
	height: 30px;
	content: "";
	transition: linear all var(--transition-time);
	transform: translateY(-50%);
	border-radius: 15px;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
}

.toggle-button.switch-on {
	background-color: var(--zkai-color);
}

.toggle-button.switch-on::before {
	left: 45px;
}

.off-label {
	font-weight: bold;
	transition: linear all var(--transition-time);
	color: var(--black);
}

.on-label {
	font-weight: bold;
	transition: linear all var(--transition-time);
	color: var(--gray);
}

.toggle-label {
	text-align: center;
}

/* リスト */
.ul-style-a {
	width: 100%;
	margin: 0.5em auto;
	padding-left: 1em;
}

.ul-style-a li {
	padding: 0.5em 0;
	padding-left: 1em;
}

.ol-style-a {
	width: 100%;
	margin: 0.5em auto;
	padding-left: 1em;
}

.ol-style-a li {
	padding: 0.5em 0;
	padding-left: 1em;
}

/* 表（テーブル） */
table {
	max-width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
	border: 1px solid var(--black);
}

thead {
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--black);
}

tbody {
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--black);
}

tr {
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--black);
}

th {
	padding: 0.5em;
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--black);
	background-color: var(--bg-color-01);
}

td {
	padding: 0.5em;
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	border: 1px solid var(--black);
}

/* 画像 */
img {
	display: block;
	max-width: 100%;
	margin: auto;
}

.image-large {
	width: 100%;
	max-width: 960px;
	height: auto;
}

.image-middle {
	width: 50%;
	max-width: 600px;
	height: auto;
}

.image-small {
	width: 20%;
	max-width: 320px;
	height: auto;
}

/* 音声 */
.audio-area {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0.5em 0;
}

.audio-info-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: calc(100% - 120px);
}

.audio-time-info {
	height: 1.5em;
	text-align: center;
	white-space: nowrap;
}

.seek-bar-area {
	position: relative;
	width: 100%;
	min-width: calc(100% - 120px);
	height: 45px;
	margin-right: 10px;
}

.seek-bar {
	position: relative;
	top: 50%;
	width: 100%;
	height: 8px;
	transform: translateY(-50%);
	background-color: var(--lightgray);
}

.played-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 8px;
	background-color: var(--zkai-color);
}

.seek-tab {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 1.5em;
	transform: translateY(-50%);
	background-color: var(--zkai-color);
}

.audio-button-area {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-around;
}

.audio-button {
	width: 45px;
	height: 45px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
	border: none;
	background-color: transparent;
}

.audio-button-image {
	width: 45px;
	height: 45px;
}

.audio-button.no-disp {
	display: none;
}

/* 動画 */
video {
	max-width: 100%;
}

/* アコーディオン */
.acc-area {
	width: 100%;
	margin: 1em auto;
}

.acc-header {
	position: relative;
	width: 100%;
	min-height: 2em;
	padding: 0.5em;
	border-collapse: collapse;
	border: 1px solid #333;
}

.acc-content {
	overflow: hidden;
	width: 100%;
	height: 0;
	padding: 0 0.5em;
	border-collapse: collapse;
	transition: var(--transition-time) linear all;
	border: 1px solid #333;
	border-width: 0;
	border-top: none;
}

.acc-opened ~ .acc-content {
	padding: 0.5em;
	border-width: 1px;
}

.acc-style-a {
	padding-left: 2em;
}

.acc-style-a::before {
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 0.5em;
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "＋";
	transform: translateY(-50%);
	border: 1px solid var(--black);
}

.acc-opened.acc-style-a::before {
	content: "－";
}

.acc-style-b {
	padding-right: 2em;
}

.acc-style-b::after {
	position: absolute;
	top: 60%;
	right: calc(var(--iconSize) / 2);
	display: inline-block;
	box-sizing: border-box;
	width: var(--iconSize);
	height: var(--iconSize);
	content: "";
	transform: translateY(-50%);
	border: calc(var(--iconSize) / 2) solid transparent;
	border-top: calc(var(--iconSize) / 2) solid var(--black);

	--iconSize: 1.5em;
}

.acc-opened.acc-style-b::after {
	top: 40%;
	border-top: calc(var(--iconSize) / 2) solid transparent;
	border-bottom: calc(var(--iconSize) / 2) solid var(--black);
}

/* モーダル */
#ModalBackGround {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	transition: all linear var(--transition-time);
	opacity: 0;
	background-color: transparent;
}

#ModalBackGround.shown {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	position: fixed;
	z-index: 101;
	top: 50%;
	left: 50%;
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
	width: 80vw;
	max-height: 80vh;
	padding: 1em;
	transition: all linear var(--transition-time);
	transform: translate(-50%, -50%);
	opacity: 0;
	background-color: var(--white);
}

.modal-content.shown {
	opacity: 1;
}

/* カルーセル */
.carousel-area {
	position: relative;
	display: flex;
	overflow-x: hidden;
	flex-direction: row;
	width: 80%;
	max-width: 100%;
	min-height: 60px;
	margin: 1em auto;
	padding-bottom: 30px;
}

.carousel-left-arrow {
	position: relative;
	width: 50px;
	cursor: pointer;
}

.carousel-left-arrow::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	content: "";
	transform: translate(-50%, -50%) rotate(45deg);
	border-bottom: 3px solid var(--zkai-color);
	border-left: 3px solid var(--zkai-color);
}

.carousel-right-arrow {
	position: relative;
	width: 50px;
	cursor: pointer;
}

.carousel-right-arrow::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	content: "";
	transform: translate(-50%, -50%) rotate(45deg);
	border-top: 3px solid var(--zkai-color);
	border-right: 3px solid var(--zkai-color);
}

.carousel-main-area {
	position: relative;
	overflow: hidden;
	width: calc(100% - 100px);
	min-height: 60px;
}

.element-window {
	position: relative;
	left: 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	transition: all linear var(--transition-time);
}

.carousel-element {
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
}

.carousel-indicator {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: center;
	width: 100%;
	height: 30px;
	transform: translateX(-50%);
}

.carousel-indicator-button {
	width: 20px;
	height: 20px;
	margin: 5px 10px;
	padding: 0;
	cursor: pointer;
	border: 2px solid var(--black);
	border-radius: 10px;
	background-color: var(--white);
}

.carousel-indicator-button.active {
	width: 26px;
	height: 26px;
	margin: 5px 10px;
	border: 4px solid var(--zkai-color);
	border-radius: 13px;
}

/* 注釈 */
.text-note {
	margin-left: 1.55em;
	text-indent: -1.55em;
}

.note-table,
.note-table tbody,
.note-table tr,
.note-table th,
.note-table td {
	padding: 0;
	padding-right: 0.5em;
	text-align: left;
	vertical-align: top;
	border: none;
}

/* トップに戻る */
#pagetop {
	position: fixed;
	z-index: 50;
	right: 1em;
	bottom: 1em;
	display: none;
	width: 40px;
	height: 40px;
	transition: all linear var(--transition-time);
	opacity: 0;
	border-radius: 5px;
	background-color: var(--zkai-color);
}

#pagetop::after {
	font-size: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	content: "▲";
	transform: translate(-50%, -50%);
	color: #fff;
}

/* ラジオボタン */
.radio-button-area {
	margin: 0.5em 0;
}

.radio-button {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0.5em 0;
	padding: 0.5em;
	border: 1px solid var(--gray);
	border-radius: 4px;
}

.radio-button.checked {
	border: 1px solid var(--zkai-color);
}

input[type="radio"] {
	display: none;
}

.radio-UI {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 0.5em;
	border: 2px solid var(--black);
	border-radius: 50%;
	background-color: #fff;
}

.radio-button.checked .radio-UI {
	border: 2px solid var(--zkai-color);
}

.radio-button.checked .radio-UI::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	content: "";
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--zkai-color);
}

/* チェックボックス */
.checkbox-button-area {
	margin: 0.5em 0;
}

.checkbox-button {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0.5em 0;
	padding: 0.5em;
	border: 1px solid var(--gray);
	border-radius: 4px;
}

.checkbox-button.checked {
	border: 1px solid var(--zkai-color);
}

input[type="checkbox"] {
	display: none;
}

.checkbox-UI {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 0.5em;
	border: 2px solid var(--black);
	border-radius: 4px;
	background-color: #fff;
}

.checkbox-button.checked .checkbox-UI {
	border: 2px solid var(--zkai-color);
	background-color: var(--zkai-color);
}

.checkbox-button.checked .checkbox-UI::after {
	position: absolute;
	top: 37%;
	left: 50%;
	width: 11px;
	height: 7px;
	content: "";
	transform: translate(-50%, -50%) rotate(-50deg);
	border-bottom: 3px solid var(--white);
	border-left: 3px solid var(--white);
}

/* 入力欄 */
input[type="text"] {
	display: block;
	max-width: 100%;
}

input[type="text"]:focus {
	border-width: 3px;
	border-style: solid;
	border-color: var(--zkai-color);
}

/* ハンバーガーメニュー */
body.navigation {
	padding-left: 15em;
	transition: all linear var(--transition-time);
}
body.navigation.narrow-navi {
	padding-left: 3em;
}

.hamburger-navigation {
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	overflow-x: hidden;
	width: 15em;
	height: 100vh;
	padding: 0;
	padding-bottom: 100px;
	transition: all linear var(--transition-time);
	color: var(--white);
	background-color: var(--zkai-color);
}

.hamburger-icon {
	position: relative;
	width: calc(100% - 10px);
	height: 3px;
	margin: auto;
	background-color: var(--white);
}

.hamburger-button::before {
	position: absolute;
	top: 10px;
	left: 50%;
	width: calc(3em - 10px);
	height: 3px;
	content: "";
	transform: translateX(-50%);
	background-color: var(--white);
}

.hamburger-button::after {
	position: absolute;
	bottom: 10px;
	left: 50%;
	width: calc(3em - 10px);
	height: 3px;
	content: "";
	transform: translateX(-50%);
	background-color: var(--white);
}

.hamburger-navigation .hamburger-button {
	position: relative;
	width: 3em;
	margin-left: auto;
}

.hamburger-navigation > ul {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: flex-start;
}

.hamburger-navigation > ul > li {
	margin-left: auto;
}

.hamburger-navigation > ul > li:not(:first-child) {
	display: flex;
	width: 15em;
	min-width: 15em;
}

.hamburger-navigation > ul > li > button {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	width: 15em;
	height: 3em;
	margin: 0;
	padding: 0;
	cursor: pointer;
	transition: all linear calc(var(--transition-time) / 3);
	opacity: 1;
	color: var(--white);
	border: none;
	background-color: var(--zkai-color);
}

.hamburger-navigation ul li button:hover {
	background-color: var(--zkai-color-light);
}

.hamburger-navigation .menu-icon {
	width: 3em;
	height: auto;
	padding: 5px;
}

.hamburger-navigation .menu-icon img {
	width: 100%;
	height: auto;
}

.hamburger-navigation.minify {
	overflow-x: hidden;
	width: 3em;
	min-width: 3em;
}

@media screen and (max-width: 768px) {
	body.navigation {
		padding-left: 3em;
	}

	.hamburger-navigation {
		width: 3em;
		min-width: 3em;
	}

	.hamburger-navigation.minify.mobile-wide {
		width: 15em;
		min-width: 15em;
	}

	.hamburger-navigation.minify.mobile-wide .menu-text {
		display: block;
	}
}

/* タブ */
.tab-switch-area {
	width: 100%;
	margin: 0.5em auto;
}

.tab-switches {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.tab-switches div {
	width: 100%;
	margin: 0 2px;
	padding: 0.5em;
	cursor: pointer;
	text-align: center;
	border: 2px solid var(--zkai-color);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
}

.tab-switches div:first-child {
	margin-left: 0;
}

.tab-switches div:last-child {
	margin-right: 0;
}

.tab-switches div.selected {
	color: var(--white);
	background-color: var(--zkai-color);
}

.switch-target-area {
	width: 100%;
	padding: 0.5em;
	border: 2px solid var(--zkai-color);
	border-radius: 0 0 4px 4px;
}

.switch-target-area > div {
	display: none;
}

.switch-target-area div.active {
	display: block;
}