@charset "UTF-8";

/**
 * オリジナルcss
 */

/* --------------------- */
/* ------- init -------- */
/* --------------------- */

* {
	box-sizing: border-box;
	text-decoration-skip-ink: none;
}

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}


body {
	--body-font-size: 1.8rem;

	margin: 0;
	overflow-x: hidden;
	font-family: var(--go);
	color: #353535;
	font-size: var(--body-font-size);
	letter-spacing: 0.08em;

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

section {
	scroll-margin-top: 100px;
}

p,
a,
dt,
dd,
li,
dt,
dd,
dl,
th,
td,
caption {
	letter-spacing: 0.08em;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

a,
a:hover,
a:link,
a:visited {
	font-family: inherit;
	text-decoration: none;
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	font-weight: 500;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

dd {
	margin-inline-start: 0;
}

/* --------------------- */
/* --- utility class --- */
/* --------------------- */

/* layout */

.inner {
	--inner-padding: 64px;
	--max-width-form: 600px;
	--max-width-s: 880px;
	--max-width-m: 1080px;
	--max-width-l: 1200px;

	padding-left: var(--inner-padding);
	padding-right: var(--inner-padding);
	margin-left: auto;
	margin-right: auto;

	&.inner_s {
		max-width: min(100%, calc(var(--max-width-s) + var(--inner-padding) * 2));
	}

	&.inner_m {
		max-width: min(100%, calc(var(--max-width-m) + var(--inner-padding) * 2));
	}

	&.inner_l {
		max-width: min(100%, calc(var(--max-width-l) + var(--inner-padding) * 2));
	}

	&.inner_form {
		max-width: min(100%, calc(var(--max-width-form) + var(--inner-padding) * 2));
	}

	@media screen and (max-width:768px) {
		--inner-padding: 24px;
	}

	@media screen and (max-width:480px) {
		--inner-padding: 16px;
	}
}


.view_pc {
	display: block;
}

.view_sp {
	display: none;
}

.br_sp {
	display: none;
}

.br_pc {
	display: inline;
}

/* spacing */

.mgt_8 {
	margin-top: clamp(4px, 0.68vw, 8px);
}

.mgt_16 {
	margin-top: clamp(8px, 1.36vw, 16px);
}

.mgt_24 {
	margin-top: clamp(12px, 2.04vw, 24px);
}

.mgt_32 {
	margin-top: clamp(16px, 2.72vw, 32px);
}

.mgt_40 {
	margin-top: clamp(20px, 3.4vw, 40px);
}

.mgt_48 {
	margin-top: clamp(24px, 4.08vw, 48px);
}

.mgt_64 {
	margin-top: clamp(32px, 5.45vw, 64px);
}

.mgt_80 {
	margin-top: clamp(40px, 6.82vw, 80px);
}

.mgb_40 {
	margin-bottom: clamp(20px, 3.4vw, 40px);
}

.mgb_64 {
	margin-bottom: clamp(32px, 5.45vw, 64px);
}

.mgb_80 {
	margin-bottom: clamp(40px, 6.82vw, 80px);
}

/* layout */

.alignleft {
	text-align: left;
}

.aligncenter {
	text-align: center;
}

.alignright {
	text-align: right;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.flex_container {
	display: flex;

	&.__column {
		flex-direction: column;
	}
}

.grid_container {
	display: grid;
}

/* typography */

.en {
	font-family: var(--en);
}

.clamprows_2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.clamprows_3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* text color */
.text_blue {
	color: var(--c2);
}

.text_orange {
	color: #E55544;
}

.text_white {
	color: #FFFFFF;
}

/* --------------------- */
/* ----- component ----- */
/* --------------------- */

/* link button */
.button_more {
	margin-top: clamp(40px, 5vw, 80px);
}

.button_more a {
	display: inline-block;
	background-color: #60B9E5;
	border: 1px solid var(--c2);
	border-radius: 100vw;
	color: #fff;
	min-width: 240px;
	width: fit-content;
	padding: 12px 24px;
	padding-right: 40px;
	font-size: clamp(1.6rem, 2vw, 1.8rem);
	line-height: 1.2;
	text-align: center;
	position: relative;
	transition: background-color 0.3s;

	&:hover {
		background-color: var(--c2);
	}

	&::after {
		content: "";
		display: inline-block;
		margin-left: 8px;
		width: 1.2em;
		aspect-ratio: 1;
		border-radius: 100vw;
		background-color: #fff;
		background-image: url(../images/common/button_icon_blue.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 12px;
	}
}

.button_more.__white a {
	background-color: #fff;
	color: var(--c2);
}

.button_more.__orange a {
	background-color: #E55544;
	border: 1px solid #fff;
	color: #fff;

	&:hover {
		background-color: #B91400;
	}

	&::after {
		background-image: url(../images/common/button_icon_orange.png);
	}
}

/* content header */
.top_content_header {

	.top_title {
		margin-top: 0;
		margin-bottom: 48px;
		font-size: 3.6rem;
		font-weight: bold;
		display: flex;
		gap: 12px;
		align-items: center;
		letter-spacing: 0.05em;

		&::before {
			content: "";
			display: block;
			width: 68px;
			aspect-ratio: 1;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}
	}

	.top_title_en {
		font-size: 2rem;
		font-weight: 400;
		font-style: italic;
		text-transform: uppercase;
	}

	p {
		font-size: 2rem;
	}
}

/* ----- JavaScriptフェードイン ----- */
.js-fade {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s, visibility 0.8s, transform 0.8s;
	transform: translateY(20px);
}

.js-fade.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* --- ホバーアニメ */
.hover_scale {
	transform: scale(1);
	transition: transform 0.3s;

	&:hover {
		transform: scale(1.05);
	}
}


@media screen and (max-width:768px) {

	.br_sp {
		display: inline;
	}

	.br_pc {
		display: none;
	}

	.view_pc {
		display: none;
	}

	.view_sp {
		display: block;
	}

}