@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");

:root {
	--maincolor: #17b2cb;
	--accentcolor: #1983d4;
	--fontcolor: #2b2b2b;
	--fontredcolor: #e81e1e;
	--bgblue: #dff8fc;
	--bggreen: #dffce6;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	font-style: normal;
	font-size: 16px;
	position: relative;
	width: 100%;
	overflow-x: hidden;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.25rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.125rem;
}

h5 {
	font-size: 1rem;
}

p {
	font-size: 1rem;
}

a {
	text-decoration: none;
	color: var(--fontcolor);
	transition: all 0.3s;
}

a:hover {
	opacity: 0.7;
}

ul {
	list-style: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
select,
textarea {
	border: 1px solid #d6d6d6;
	padding: 4px 8px;
	border-radius: 8px;
	background-color: #fff;
	width: 100%;
}

/* 見出し横のアイコンの余白 */
i.fa-solid.fa-diamond {
	padding-right: 1rem;
}

/* 見出し下のライン */
.page-content-title-line {
	width: 100%;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--maincolor) 50%,
		var(--accentcolor) 50%
	);
}

/* セクションの見出し */
.section-heading {
	text-align: center;
}

/* 共通ボタン */
.page-btn {
	width: 100%;
	max-width: 1200px;
	display: block;
	margin-inline: auto;
}

.page-btn__link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 45px;
	color: #fff;
	background-color: var(--maincolor);
	border-radius: 8px;
	margin-top: 60px;
	margin-inline: auto;
}

.page-btn__link:hover {
	background-color: #50d5eb;
	opacity: 1;
}

.page-btn__arrow {
	width: 2rem;
	height: 1px;
	background-color: #fff;
	margin-left: 1rem;
	position: relative;
	top: 2px;
	transition: all 0.3s;
}

.page-btn__arrow::after {
	content: "";
	width: 0.5rem;
	height: 1px;
	background-color: #fff;
	position: absolute;
	top: -3px;
	right: -1px;
	transform: rotate(45deg);
}

.page-btn__link:hover .page-btn__arrow {
	width: 3rem;
}

/* 固定ページ共通 */
.page-wrapper.about {
	width: 100%;
}

.page-inner {
	width: calc(100% - 40px);
	max-width: 1200px;
	margin-inline: auto;
}

.page-group {
	padding-block: 60px;
}

.page-content-text {
	margin-top: 20px;
}

.page-infomation {
	padding-block: 60px;
	max-width: fit-content;
	margin-inline: auto;
}

.page-list {
	margin-top: 20px;
}

.page-list-item {
	margin-top: 0.5rem;
	position: relative;
}

.page-list-item::before {
	content: "●";
	color: var(--maincolor);
	padding-right: 0.5rem;
}

/* ハンバーガーメニューを開いている間はスクロールできなくする */
body.lock {
	overflow: hidden;
}

/* レスポンシブ時の改行　通常はdisplay:none; */
.br__res-767 {
	display: none;
}

@media screen and (max-width: 1440px) {
	/* 共通ボタン */
}

@media screen and (max-width: 767px) {
	h2 {
		font-size: 2rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	/* レスポンシブ時の改行 */
	.br__res-767 {
		display: block;
	}

	/* 共通ボタン */
	.page-btn__link {
		width: 75%;
		margin-top: 45px;
	}

	/* 固定ページ共通 */
	.page-inner {
		width: calc(100% - 20px);
	}

	.page-content-title {
		display: flex;
		align-items: baseline;
	}

	.page-group {
		padding-block: 45px;
	}

	.page-content-text {
		margin-top: 15px;
	}

	.page-list {
		margin-top: 15px;
	}

	.page-list-item {
		display: flex;
		align-items: baseline;
	}

	.page-infomation {
		padding-block: 45px;
	}
}

@media screen and (max-width: 480px) {
	h2 {
		font-size: 1.25rem;
	}

	h3 {
		font-size: 1.1rem;
	}
	/* 見出し横のアイコンの余白 */
	i.fa-solid.fa-diamond {
		padding-right: 0.5rem;
	}

	/* 共通ボタン */
	.page-btn__link {
		margin-top: 30px;
	}

	/* 固定ページ共通 */
	.page-group {
		padding-block: 30px;
	}

	.page-content-text {
		margin-top: 10px;
	}

	.page-infomation {
		padding-block: 30px;
	}

	.page-list {
		margin-top: 10px;
	}
}