@charset "UTF-8";
/* ==========================================================================
   base.css : 変数・リセット・レイアウト・アニメーション
   ========================================================================== */

:root {
	--color-text: #393c41;
	--color-navy: #242146;
	--color-teal: #1e99a8;
	--color-pink: #dd4673;
	--color-green: #49ca9f;
	--color-gray-bg: #edf1f2;
	--color-footer: #777;
	--color-dark: #393c41;
	--color-border: #ddd;

	/* 本番の子テーマと同じ日本語フォント */
	--font-base: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	/* 本番の見出しは Raleway のみ指定（日本語はブラウザ既定のフォントになる）。同じ見え方にするため揃える */
	--font-heading: "Raleway";
	--font-meiryo: Meiryo, sans-serif;
	--font-mincho: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", serif;

	--container: 1140px;
	--gutter: 15px;
	--section-space: 100px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* 本番（子テーマ）と同じく 1rem = 10px */
	font-size: 62.5%;
}

body {
	margin: 0;
	background: #fff;
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 400;
	line-height: 27px;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 400;
}

p,
ul,
ol,
dl,
dd,
figure,
table {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
iframe,
video {
	max-width: 100%;
	vertical-align: bottom;
}

img {
	height: auto;
}

a {
	color: var(--color-teal);
	text-decoration: none;
	transition: color 0.3s, background-color 0.3s;
}

table {
	width: 100%;
	border-collapse: collapse;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Layout ---------- */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--section-space);
}

.section--gray {
	background: var(--color-gray-bg);
}

@media (max-width: 767px) {
	:root {
		--section-space: 40px;
	}

	.sp-hidden {
		display: none;
	}
}

@media (min-width: 768px) {
	.pc-hidden {
		display: none;
	}
}

/* ---------- スクロールで表示するアニメーション（animate.css 相当） ----------
   本番の Unyson と同じく、PCだけ動かす（SPでは最初から表示）。
   JS（main.js）が画面に入った要素へ .is-animated を付ける。 */

@media (min-width: 768px) {
	.js [data-anim] {
		opacity: 0;
	}

	.js [data-anim].is-animated {
		animation-duration: 1s;
		animation-delay: var(--anim-delay, 0ms);
		animation-fill-mode: both;
	}

	.js [data-anim="fadeIn"].is-animated {
		animation-name: fadeIn;
	}

	.js [data-anim="fadeInUp"].is-animated {
		animation-name: fadeInUp;
	}

	.js [data-anim="fadeInDown"].is-animated {
		animation-name: fadeInDown;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js [data-anim] {
		opacity: 1;
	}

	.js [data-anim].is-animated {
		animation: none;
	}
}