@charset "UTF-8";

/* ===============================
	変数設定
=============================== */

:root {
	/* カラー変数の設定 */
	--primary-color: #53B8E2;
	--text-base-color: #2C2C2C;
	--text-second-color: #848484;
	--primary-color-txt: #3EA9D4;
	--primary-hover-color: #7ACFF2;
	--light-beige: #F4F3F2;
	--dark-beige: #BDBBB6;
	--line-gray: #E7E5E4;
	--gradation01: linear-gradient(236deg, #ECE9E0 18.08%, #CEF2FF 81.24%);
	--gradation02: linear-gradient(236deg, #E8F7F1 18.08%, #DDF6FF 81.24%);

	/* フォント設定 */
	--font-family-jp: 'Noto Sans JP', sans-serif;
	--font-family-en: "Roboto", serif;
	--font-family-navi: "Zen Maru Gothic", serif;
	--font-size-base-pc: 1.6rem;
	--font-size-base-sp: 1.4rem;

	/* 数値 */
	--br20: 20px;
	--br12: 12px;
	--br8: 8px;
}

/* ===============================
	base style
=============================== */
*,
::before,
::after {
	background-repeat: no-repeat;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-family: var(--font-family-jp);
	font-size: var(--font-size-base-pc);
	font-weight: 500;
	font-style: normal;
	line-height: 2;
	color: var(--text-base-color);
	/* counter-reset: number 0; */
	background-color: #ffffff;
}

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
} */

a {
	text-decoration: none;
	transition: .3s;
}

a:hover {
	text-decoration: none;
}

button {
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

button:focus {
	outline: none;
}

button img {
	display: block;
}

address {
	font-style: normal;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -.25em;
}

sup {
	color: #005EAD;
	top: -.5em;
}

img {
	inline-size: 100%;
}

table {
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
}

.step {
	content: "";
	display: block;
	margin: 1em 0;
}

/* テキスト選択時 */
::selection {
	color: #ffffff;
	background: var(--text-base-color);
}

/* ===============================
	utility
=============================== */

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

/* マージン */
.ma {
	margin-inline: auto;
}

.mt0 {
	margin-top: 0 !important;
}

.mt02 {
	margin-top: 2em !important;
}

/* フォント */
.font-light {
	font-weight: 200;
}

.font-medium {
	font-weight: 500;
}

.font-bold {
	font-weight: bold;
	text-shadow: none;
}

/* 注釈 */
ul.kome {
	/* リスト（※） */
	font-size: 1.2rem;
	line-height: 1.6;
	padding-left: 1.5em;
}

ul.kome li {
	text-indent: -1.5em;
}

ul.kome li:not(:last-of-type) {
	margin-bottom: 0.3em;
}

ul.kome li:before {
	content: "\203b";
	margin-right: 0.5em;
	color: var(--primary-color);
}

/* リスト（・） */
ul.dot {
	padding-left: 1.2em;
	margin-top: 1rem;
}

ul.dot li {
	text-indent: -1.2em;
	line-height: 1.8;
}

ul.dot li:before {
	content: "・";
	margin-right: 0.2em;
}

/* flex base */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-container.sb {
	justify-content: space-between;
}

.flex-item {
	width: 100%;
}

.photo-of img {
	width: 100%;
	object-fit: cover;
}

/* フェードイン */
.fade-in {
	transform: translateY(30px);
	opacity: 0;
}

.fade-in-top {
	transform: translateY(-30px);
	opacity: 0;
}

.fade-in-left {
	transform: translateX(-30px);
	opacity: 0;
}

.fade-in-right {
	transform: translateX(30px);
	opacity: 0;
}

/* ========================================
	1024px以上専用スタイル（PC）
======================================== */
@media print,
screen and (1024px <= width) {

	.tab,
	.nopc {
		display: none;
	}

	.outer-base-width {
		padding-inline: 1.5%;
	}

	/* フレックスコンテナ：ハーフ */
	.flex-container.sb>.flex-item {
		width: 48%;
	}

}

/* ========================================
	1200px以上専用スタイル
======================================== */
@media screen and (1200px <= width) {

	.base-width {
		max-inline-size: 1200px;
		margin-inline: auto;
	}

	.base-width.small {
		max-inline-size: 1000px;
	}

}

/* ========================================
	1024px以上1300px未満専用スタイル（微調整）
======================================== */
@media screen and (1024px <= width < 1300px) {

	.base-width {
		padding-inline: 3%;
	}

}

/* ========================================
	768px以上専用スタイル（TAB & PC）
======================================== */
@media print,
screen and (768px <= width) {

	.sp {
		display: none;
	}

	/* 電話番号リンクPCは非対応に */
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}

}

/* ========================================
	1024px未満専用スタイル（TAB & SP）
======================================== */
@media screen and (width < 1024px) {

	body {
		/* min-inline-size: 320px; */
		font-size: var(--font-size-base-sp);
		line-height: 1.8;
	}

	.base-width {
		padding-inline: 5%;
	}

}

/* ========================================
	768px以上1024px未満専用スタイル（TAB）
======================================== */
@media screen and (768px <= width < 1024px) {

	.pc,
	.notab {
		display: none;
	}

	/* .outer-base-width {
		padding-inline: 5%;
	} */

	.base-width.small {
		max-inline-size: 90%;
		margin-inline: auto;
	}

}

/* ========================================
	768px未満専用スタイル（SP）
======================================== */
@media screen and (width < 768px) {

	.pc,
	.tab,
	.nosp {
		display: none;
	}

	.smallsp {
		display: none;
	}

}

/* ========================================
	580px未満専用スタイル（SP）
======================================== */

@media screen and (width < 580px) {

	.smallsp {
		display: block;
	}

}

/* ===============================
	スクリーン専用スタイル
================================== */
@media screen {

	/* マウスオーバー：フェード */
	.hover-fade a,
	a.hover-fade {
		transition: 0.5s ease 0s;
	}

	.hover-fade a.hovering,
	a.hover-fade.hovering {
		opacity: 0.6;
	}

	.hover-fade button,
	button.hover-fade {
		transition: 0.5s ease 0s;
	}

	.hover-fade button.hovering,
	button.hover-fade.hovering {
		opacity: 0.6;
	}

	@keyframes fadeIn {
		0% {
			display: none;
			opacity: 0;
		}

		1% {
			display: block;
			opacity: 0;
		}

		100% {
			display: block;
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			display: block;
			opacity: 1;
		}

		99% {
			display: block;
			opacity: 0;
		}

		100% {
			display: none;
			opacity: 0;
		}
	}
}