@charset "UTF-8";

/* ===============================
	base style
=============================== */

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);
	background-color: var(--gray-100);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

a,
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: -0.25em;
}

sup {
	color: var(--nawa-green);
	top: -0.5em;
}

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

caption {
	text-align: left;
}

img {
	inline-size: 100%;
	block-size: auto;
	vertical-align: middle
}

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

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

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

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

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

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

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

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

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

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

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

/* リスト（・） */
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;
}

/* フェードイン */
.fade-in {
	opacity: 0;
}

/* フレックスコンテナ */
.flex {
	display: flex;
}

/* ========================================
	マウスポインタ専用
======================================== */
@media (hover:hover) and (pointer: fine) {

	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

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

	body {
		font-size: var(--font-size-base-sp);
		line-height: 1.8;
	}

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

}

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

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

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

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

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

	.sp {
		display: none;
	}

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

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

}

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

	.pc,
	.notab {
		display: none;
	}

}

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

	.tab,
	.nopc {
		display: none;
	}

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

}

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

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

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

}

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

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

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

}

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

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

}

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

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

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

	.hover-fade button,
	button.hover-fade {
		transition: opacity 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;
		}
	}

}