@charset "utf-8";
/*
FUNCTION
================================================ */
:root {
	--white: #fff;
	--black: #000;
	--mark: #B4C65B;
}
body {
	width: 100%;
	margin: 0 auto;
	position: relative;
	background: url('../img/background.webp') top center / cover repeat;
	font-family: "Yu Gothic", "游ゴシック", "游ゴシック体", "YuGothic", sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--white);
	box-sizing: border-box;
}
img {
	width: 100%;
	height: auto;
	-o-object-fit: contain;
	object-fit: contain;
	vertical-align: middle;
}
a {
	color: var(--white);
	text-decoration: none;
}
li {
	list-style: none;
}
.PC-none {
	display: none;
}
.SP-none {
	display: flex;
}
/*
MAIN
================================================ */

.wrapper {
	width: 100%;
	max-width: 72.75rem;
	margin: 0 auto;
	padding: 13.125rem 2rem 6.25rem;
	overflow: hidden;
	overflow-wrap: break-word;
}
.contents-heading {
	margin-bottom: 13.125rem;
	font-family: 'Gill Sans', 'Gill Sans MT', "Nunito Sans", 'Trebuchet MS', sans-serif;
	font-size: clamp(5rem, 3.4305rem + 3.0075vw, 6.25rem);
	font-weight: 700;
	font-style: normal;
}
body.windows .contents-heading, body.android .contents-heading {
	font-weight: 900;
}
.container {
	width: 100%;
	max-width: 72.75rem;
	margin: 6.25rem auto 0;
	padding: 0 2rem;
}
/* 共通ボタン */

.under {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 23rem;
	height: 5.125rem;
	background-color: var(--white);
	-webkit-clip-path: polygon(0 0, 90% 0%, 100% 40%, 100% 100%, 10% 100%, 0% 60%);
	clip-path: polygon(0 0, 90% 0%, 100% 40%, 100% 100%, 10% 100%, 0% 60%);
	transition: background-color 0.4s ease-in-out;
}
.under .common-button {
	display: flex;
	align-items: center;
	width: 22.8125rem;
	height: 4.9375rem;
	background-color: var(--black);
	-webkit-clip-path: polygon(0 0, 90% 0%, 100% 40%, 100% 100%, 10% 100%, 0% 60%);
	clip-path: polygon(0 0, 90% 0%, 100% 40%, 100% 100%, 10% 100%, 0% 60%);
	transition: background-color 0.4s ease-in-out;
}
.under .submit-text {
	font-weight: 700;
	transition: color 0.3s ease-in-out;
	text-decoration: underline;
}
.under .arrow {
	width: 18px;
	height: 2px;
	margin: 2.9px;
	position: relative;
	display: inline-block;
	border-radius: 9999px;
	background-color: var(--white);
	transition: background-color 0.4s ease-in-out;
}
.under .arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--white);
	transition: border-left-color 0.4s ease-in-out;
}
/* ホバー時のスタイル
.under:hover {
  background-color: var(--black);
}
.under:hover .common-button {
  background-color: #A0A0A0;
}
.under:hover .submit-text {
  color: var(--black);
}
.under:hover .arrow {
  background-color: var(--black);
}
.under:hover .arrow::after {
  border-left-color: var(--black);
}　*/

/* ページトップへ戻るボタン */

.pagetop-btn {
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 4.375rem;
	right: clamp(0.1rem, -1.9718rem + 3.5vw, 1.25rem);
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	cursor: pointer;
	gap: 5rem;
	z-index: 999;
}
.pagetop-border {
	width: 2px;
	height: 20rem;
	background: linear-gradient(to bottom, #fff 0%, #A6A8AC 50%, #4C5058 100%);
}
.pagetop-btn p {
	position: relative;
	font-weight: 300;
}
.pagetop-btn p::before {
	content: "";
	position: absolute;
	right: .7rem;
	top: -50%;
	transform: translateY(-50%) rotate(45deg);
	width: 4px;
	height: 4px;
	background-color: white;
}
@media(max-width:834px) {
	body {
		background: url('../img/background.webp') top center / 400% repeat, linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000) bottom no-repeat;
		font-size: clamp(0.875rem, 0.7218rem + 0.6536vw, 1.0625rem);
		letter-spacing: .5px;
	}
	.PC-none {
		display: flex;
	}
	.SP-none {
		display: none;
	}
	.wrapper {
		padding: 4.375rem 1.8rem 2.5rem;
	}
	.contents-heading {
		margin-bottom: 4.375rem;
		font-size: clamp(3.125rem, 2.1038rem + 4.3573vw, 4.375rem);
		text-align: center;
	}
	.container {
		margin: clamp(2.5rem, -0.5637rem + 13.0719vw, 6.25rem) auto 0;
		padding: 0 1.5rem;
	}
	/* 共通ボタン */
	.under {
		width: 15.4375rem;
		height: 3.625rem;
	}
	.under .common-button {
		width: 15.3125rem;
		height: 3.5rem;
	}
	.under .submit-text {
		font-size: 0.875rem;
	}
	.under .arrow {
		width: 20px;
		height: 1.2px;
	}
	.under .arrow::after {
		right: -5px;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 6px solid var(--white);
	}
	/* ページトップへ戻るボタン */
	.pagetop-btn {
		bottom: 3.75rem;
		right: 3px;
		gap: 4.0625rem;
	}
	.pagetop-border {
		width: 1px;
		height: 6.25rem;
	}
	.pagetop-btn p {
		font-size: 0.8125rem;
	}
	.pagetop-btn p::before {
		right: .5rem;
	}
}