@charset "utf-8";

/* ================

ベースCSS

================ */

/* フォント */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");


/* 背景色 */
.bg-ivory {
	background-color: #f4f0e9;
}

.bg-whitesmoke {
	background-color: #f5f5f5;
}

.bg-white {
	background-color: #fff;
}

.bg-grey {
	background-color: #a5a5a5;
}

.bg-lightgrey {
	background-color: #cacaca;
}

.bg-darkgrey {
	background-color: #4c4a4a;
}

.bg-lightgreen {
	background-color: lightgreen;
}

.bg-blue {
	background-color: #2632d9;
}

.bg-green {
	background-color: #eeffde;
}

.bg-red {
	background-color: #fff0e5;
}

.bg-yellow {
	background-color: #feffcd;
}

/* 文字色 */
.color-red {
	color: #ff0000;
}

.color-black {
	color: #1f1f1f;
}

.color-text {
	color: #302c2c;
}

.color-blue {
	color: #2632d9;
}

.color-grey {
	color: #a5a5a5;
}

.color-lightgrey {
	color: #cacaca;
}

.color-darkgrey {
	color: #4c4a4a;
}

/* パディングを挿入するクラス */
.padding-small {
	padding: 16px;
}

/* パディングを削除するクラス */
.no-padding {
	padding: 0 !important;
}

/* マージン（下）を挿入するクラス */
.mb-20px {
	margin-bottom: 20px !important;
}

/* マージン（上）を挿入するクラス */
.mt-20px {
	margin-top: 20px !important;
}

/* 区切り */
hr {
	margin: 0;
	padding-block: 40px;
	border-width: 0;
}

/*  */
.show-md,
.show-sm {
	display: none !important
}

@media screen and (max-width: 840px) {
	.hide-md {
		display: none !important
	}

	.show-md {
		display: block !important
	}

	.mx-md-4 {
		margin-left: 4%;
		margin-right: 4%;
	}

	.px-md-4 {
		padding-left: 4%;
		padding-right: 4%;
	}
}

@media screen and (max-width: 600px) {
	.hide-sm {
		display: none !important
	}

	.show-sm {
		display: block !important
	}
}

/* 配置先に合わせたサイズにする */
.fill {
	width: 100%;
	height: 100%;
}

/* 画像を配置先に合わせたサイズにして切り抜く */
.img-fill {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*  */
img {
	vertical-align: middle;
}

figure,
figcaption {
	display: block
}

.figure {
	margin: 0 auto 20px;
}

.figure .figure-caption {
	color: var(--color-grey);
	margin-top: .4rem;
}

.figure.width-lg {
	max-width: 976px;
}

.figure.width-md {
	max-width: 856px;
}

.figure.width-sm {
	max-width: 616px;
}

/* 角丸にする */
.img-radius {
	border-radius: 10px;
}

/* レスポンシブ画像 */
.img-responsive {
	width: 100%;
}

/* 画像の影 */
.img-shadow {
	box-shadow: 0px 0px 3px 2px var(--color-grey);
}

/* */
.obj-responsive {
	display: block;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%
}

.obj-responsive::before {
	content: "";
	display: block;
	padding-bottom: 56.25%
}

.obj-responsive embed,
.obj-responsive iframe,
.obj-responsive object {
	border: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%
}

video.obj-responsive {
	height: auto;
	max-width: 100%
}

video.obj-responsive::before {
	content: none
}

.obj-responsive-4-3::before {
	padding-bottom: 75%
}

.obj-responsive-1-1::before {
	padding-bottom: 100%
}

/* マーカー */
.marker {
	background: linear-gradient(transparent 50%, #45C7C3 90%);
}

/* コードのスタイル */
pre {
	overflow-x: auto;
	padding: 16px;
	font-size: 85%;
	line-height: 1.45;
	color: white;
	background-color: #222;
	border-radius: 6px;
}

/* ===========================
 * テキスト
 * =========================== */

 .text-center {
 	text-align: center !important;
 }

 .text-right {
 	text-align: right !important;
 }

 .text-left {
 	text-align: left !important;
 }

 .text-bold {
 	font-weight: 600 !important;
 }

 .text-small {
 	font-size: 1.35rem !important;
 }

 .text-tiny {
 	font-size: 1.15rem !important;
 }

 .text-center-sm {
 	text-align: left !important;
 }

 @media screen and (max-width: 840px) {
 	.text-center-sm {
 		text-align: center;
 	}
 }


/* ===========================
 * アイコン
 * =========================== */



/* ===========================
 * フォーム
 * =========================== */

[type="text"],
[type="email"],
[type="url"],
[type="tel"],
[type="search"],
[type="password"],
select,
textarea {
	padding: 12px;
	background-color: white;
	background-image: none;
	border: solid 1px #888;
	border-radius: 4px;
}

[type="submit"],
[type="reset"] {
	padding: 12px;
	border-radius: 4px;
}

::placeholder {
	color: #999;
}

:where(input, select, textarea, button):focus-visible {
	outline: 2px solid black;
}



/* ===========================
 * ヘッダー関連
 * =========================== */

/* ロゴ */


/* サイト名 */



/* ===========================
 * ボタン
 * =========================== */

 .button-container {
 	margin: 0 auto 20px;
 }

 .button-container.width-lg {
 	max-width: 976px;
 }

 .button-container.width-md {
 	max-width: 856px;
 }

 .button-container.width-sm {
 	max-width: 616px;
 }

 .button-container.width-xs {
 	max-width: 496px;
 }

 .button-container a {
 	text-decoration: none;
 }

 .button {
 	width: 100%;
 	display: inline-block;
 	font-size: 18px;
 	font-weight: bold;
 	position: relative;
 	transition: all 0.3s;
 	padding: 12px 20px 12px 20px;
 }

 .button00 {
 	background: #a5a5a5;
 	color: #fff;
 	border-radius: 30px;
 }

 .button01 {
 	/* background: linear-gradient(90deg,
 			var(--color-key) 0%,
 			var(--color-key2) 100%); */
	background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
	/* background: linear-gradient(135deg, var(--accent-color), var(--secondary-color)); */
 	color: #fff;
 	border-radius: 30px;
 	box-shadow: 0px 0px 15px -5px #777;
 }

 .button01:hover {
 	box-shadow: 0px 0px 15px -3px #333;
 	/* transform: scale(1.01, 1.01); */
 }

 .button-sup {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: 10px;
 	line-height: 1.3;
 }

 .button-sup .square {
 	background: var(--color-key);
 	color: var(--color-key-text);
 	font-size: 1.6rem;
 	padding: 10px 16px;
 	text-align: center;
 }

 .button-sup dd {
 	font-size: 1.6rem;
 	font-weight: 500;
 	/* color: var(--color-key); */
 	overflow-wrap: anywhere;
 }

 .button-sup dd li:last-child {
 	margin: 0;
 }

 /* ===========================
 * テーブル
 * =========================== */

 .table {
 	border-spacing: 0;
 	text-align: left;
 	width: 100%;
 	margin: 0 0 20px 0;
 }

 .table:last-child {
 	margin: 0;
 }

 .table.table-striped tbody tr:nth-of-type(odd) {
 	background: #f7f8f9;
 }

 .table tbody tr.active,
 .table.table-striped tbody tr.active {
 	background: #eef0f3;
 }

 .table.table-hover tbody tr:hover {
 	background: #eef0f3;
 }

 .table.table-scroll {
 	display: block;
 	overflow-x: auto;
 	padding-bottom: .75rem;
 	white-space: nowrap;
 }

 .table td,
 .table th {
 	border-bottom: .1rem solid #cbced2;
 	padding: 2rem .8rem;
 }

 .table th {
 	background: #fff;
 	text-align: center;
 	width: 200px;
 }

 .table tr:last-child td,
 .table tr:last-child th {
 	border-bottom: none;
 }

 @media screen and (max-width: 600px) {
 	.table th {
 		width: 120px;
 	}
 }

 @media screen and (max-width: 480px) {
	.table th,
	.table td {
		display: inline-block;
		width: 100%;
		float: left;
	}

	.table td {
		padding: 1rem .8rem;
	}

	.table th {
		padding: 1.4rem .8rem 0;
		border-bottom: none;
	}
 }

 /* ===========================
 * タブ
 * =========================== */

 .tab-wrap {
 	display: flex;
 	flex-wrap: wrap;
 	margin: 20px 0;
 }

 .tab-wrap:after {
 	content: '';
 	width: 100%;
 	height: 3px;
 	background: #325A8C;
 	display: block;
 	order: -1;
 }

 .tab-label {
 	color: #fff;
 	background: #cacaca;
 	font-weight: bold;
 	white-space: nowrap;
 	text-align: center;
 	padding: 10px .5em;
 	order: -1;
 	position: relative;
 	z-index: 1;
 	cursor: pointer;
 	border-radius: 5px 5px 0 0;
 	flex: 1;
 }

 .tab-label:not(:last-of-type) {
 	margin-right: 5px;
 }

 .tab-content {
 	width: 100%;
 	height: 0;
 	overflow: hidden;
 	opacity: 0;
 }

 .tab-switch:checked+.tab-label {
 	/* background: rgb(48, 73, 167); */
	background: var(--secondary-color);
 }

 .tab-switch:checked+.tab-label+.tab-content {
 	height: auto;
 	overflow: auto;
 	padding: 15px;
 	opacity: 1;
 	transition: .5s opacity;
 	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
 }

 .tab-switch {
 	display: none;
 }