:root {
	/* カラーパレット
	----------------------------------------------- */
	--c-base: #fff;
	--c-primary: #07569f;
	--c-secondary: #fcdd00;
	--c-white: #fff;
	--c-black: #292b2c;

	/* フォントカラー
	----------------------------------------------- */
	--font-base: #292b2c;
	--font-primary: #07569f;
	--font-secondary: #fcdd00;
	--font-white: #fff;
	--font-black: #292b2c;

	/* 背景色
	----------------------------------------------- */
	--bg-base: #fff;
	--bg-primary: #07569f;
	--bg-secondary: #fcdd00;
	--bg-beige: #f9f9f9;
	--bg-gray: #f3f6f9;

	/* font-family
	----------------------------------------------- */
	/* 欧文-セリフ */
	--ff-en-serif: "Cormorant", serif;
	/* 和文-明朝 */
	--ff-ja-serif: "Zen Old Mincho", serif;
}

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	line-height: 1.5;
	font-family: "Roboto", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	color: var(--font-base);
}

a {
	color: var(--font-color);
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

button {
	font: inherit;
	padding: 0;
	background-color: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
}

/* // **************************************************************************************************** */
/* // COMPONENT
/* // **************************************************************************************************** */
/* // responsive_displayNone
----------------------------------------------- */
.spNone {
	display: inline-block;
}
.pcNone {
	display: none;
}
@media screen and (max-width: 767px) {
	.spNone {
		display: none;
	}
	.pcNone {
		display: block;
	}
}

/* // background-color
----------------------------------------------- */
.bgcl-grey {
	background-color: var(--bg-gray);
}
.bgcl-beige {
	background-color: var(--bg-beige);
}

/* // Container
----------------------------------------------- */
.container {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1200px;
	padding-top: 120px;
	padding-bottom: 120px;
	margin: 0 auto;
}
.container900 {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	max-width: 900px;
}
/* ________TA________ */
@media screen and (max-width: 1240px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.container900 {
		padding-left: 20px;
		padding-right: 20px;
	}
}
/* ________SP________ */
@media screen and (max-width: 767px) {
	.container {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/* // responsive_displayNone
----------------------------------------------- */
.spNone {
	display: inline-block;
}
.pcNone {
	display: none;
}
@media screen and (max-width: 767px) {
	.spNone {
		display: none;
	}
	.pcNone {
		display: block;
	}
}

/* // sectionTitle
----------------------------------------------- */
.sectionTitle {
	margin-bottom: 80px;
}
.sectionTitle__en {
	color: #e6ebf2;
	font-family: var(--ff-en-serif);
	line-height: 1;
	font-weight: bold;
	text-transform: uppercase;
	font-size: clamp(4rem, 120 / 1500 * 100vw, 12rem);
}
.sectionTitle__ja {
	color: var(--font-base);
	font-family: var(--ff-ja-serif);
	line-height: 1.3;
	font-size: clamp(2.4rem, 36 / 1500 * 100vw, 3.6rem);
	margin-top: -1em;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 747px) {
	.sectionTitle {
		margin-bottom: 40px;
	}
	.sectionTitle__ja {
		margin-top: -0.8em;
	}
}

/* // **************************************************************************************************** */
/* // btn
/* // **************************************************************************************************** */
/* // btn__A / header primary color
----------------------------------------------- */
.btn__A {
	position: relative;
	background: var(--bg-primary);
	border: 1px solid transparent;
	color: #fff;
	font-size: 1.3rem;
	width: 160px;
	display: grid;
	place-items: center;
	height: 100%;
}
/* ________SP________ */
@media screen and (max-width: 767px) {
	.btn__A {
		width: 90px;
		font-size: 1.1rem;
	}
}
/* // btn__B / header secondary color
----------------------------------------------- */
.btn__B {
	position: relative;
	background: var(--bg-secondary);
	border: 1px solid transparent;
	color: var(--font-base);
	font-size: 1.3rem;
	text-align: center;
	width: 160px;
	display: grid;
	place-items: center;
	height: 100%;
}
/* ________SP________ */
@media screen and (max-width: 767px) {
	.btn__B {
		width: 90px;
		font-size: 1.1rem;
	}
}
/* // btn__C / mv primary color
----------------------------------------------- */
.btn__C {
	position: relative;
	background: var(--bg-primary);
	border: 1px solid transparent;
	color: #fff;
	font-size: 1.6rem;
	width: min(100%, 240px);
	padding-top: 17px;
	padding-bottom: 17px;
	display: grid;
	place-items: center;
	height: 100%;
}
/* ________SP________ */
@media screen and (max-width: 767px) {
	.btn__C {
		width: 100%;
	}
}
/* // btn__D / mv secondary color
----------------------------------------------- */
.btn__D {
	position: relative;
	background: var(--bg-secondary);
	border: 1px solid transparent;
	color: var(--font-base);
	font-size: 1.6rem;
	width: min(100%, 240px);
	padding-top: 17px;
	padding-bottom: 17px;
	display: grid;
	place-items: center;
	height: 100%;
}
/* ________SP________ */
@media screen and (max-width: 767px) {
	.btn__D {
		width: 100%;
	}
}
