/* ===============================
   LP STARTER CSS
================================ */

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

:root {
	--container: 1120px;
	--gap: 24px;
	--section-y: 40px;
	--black: #353C43;
	--white: #fff;
	--purple: #4804A6;
	--purple-light: #6812DF;
	--purple-dark: #3F0097;
	--yellow: #E8FF3D;
}

html {
	scroll-behavior: smooth;
}

/* 横スクロール事故防止 */
html,
body {
	overflow-x: hidden;
	font-family: Noto Sans JP;
}

/* -----------------------
   Container
----------------------- */

.container {
	width: min(100% - 2rem, var(--container));
	margin-inline: auto;
}

/* -----------------------
   Section（LP最重要）
----------------------- */

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

.section-sm {
	padding-block: 20px;
}

.section-lg {
	padding-block: 60px;
}

/*フルブリード */
.full-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

@media (max-width:768px) {

	.section {
	padding-block: calc(var(--section-y) / 2);
}

}

/* -----------------------
   Grid（万能）
----------------------- */

.grid {
	display: grid;
	gap: var(--gap);
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* SP自動1列 */
@media (max-width:768px) {

	.grid-2,
	.grid-3 {
		grid-template-columns: 1fr;
	}

	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* -----------------------
   Flex Utility
----------------------- */

.flex {
	display: flex;
	gap: var(--gap);
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* SP縦並び */
@media (max-width:768px) {

	.flex-sp-col {
		flex-direction: column;
	}

}

/* -----------------------
   Image
----------------------- */

.img-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-contain {
	object-fit: contain;
}

/* -----------------------
   h1.h2
----------------------- */

h1 .visually-hidden,
h2 .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

h1,
h2 {
	text-align: center;
}

/* -----------------------
   Button（CTA用）
----------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding-inline: 3em;
	background: var(--yellow);
	color: var(--black);
	border-radius: 9999px;
	transition: .25s;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
}

.btn:hover {
	transform: translateY(7px);
}

.btn.triangle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 2em;
	width: 12px;
	height: 14px;
	background: var(--purple);
	transform: translateY(-50%);
	clip-path: polygon(0 0,
			100% 50%,
			0 100%);
}

.btn.mail {
	height: 37px;
	font-size: 16px;
	padding-inline: 3em 1em;
}

.btn.mail::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 1.5em;
	width: 20px;
	height: 16px;
	background: url("../img/mail_icon.svg") no-repeat center / contain;
}

@media (max-width:768px) {

	.btn {
		font-size: 14px;
		height: 25px;
	}

	.btn.triangle::before {
		width: 10px;
		height: 12px;
	}
}

/* -----------------------
   bg
----------------------- */
.bg-grad {
	background:
		linear-gradient(270deg, #8500ea, #2da8ff),
		url(../img/bg_hexagon.svg);
	background-repeat: no-repeat, repeat;
	background-size: auto, 1920px 503px;
	background-blend-mode: overlay;
}

/* -----------------------
   font
----------------------- */
.russo-one {
	font-family: "Russo One", "Noto Sans JP", sans-serif;
}

/* -----------------------
   animetion
----------------------- */
[data-anim] {
	opacity: 0;
	transition: .6s ease;
}

/* fade */
[data-anim="fade"].is-show {
	opacity: 1;
}

/* 上から */
[data-anim="up"] {
	transform: translateY(-40px);
}

[data-anim="up"].is-show {
	opacity: 1;
	transform: none;
}

/* 下から */
[data-anim="down"] {
	transform: translateY(40px);
}

[data-anim="down"].is-show {
	opacity: 1;
	transform: none;
}

/* 左から */
[data-anim="left"] {
	transform: translateX(-40px);
}

[data-anim="left"].is-show {
	opacity: 1;
	transform: none;
}

/* 右から */
[data-anim="right"] {
	transform: translateX(40px);
}

[data-anim="right"].is-show {
	opacity: 1;
	transform: none;
}

[data-anim="zoomin"] {
    transform: scale(0.8);
    opacity: 0;
  }
[data-anim="zoomin"].is-show {
    transform: scale(1);
    opacity: 1;
  }
/* -----------------------
   Space Utility
----------------------- */

.mt {
	margin-top: 30px;
}

.mb {
	margin-bottom: 30px;
}

.m-auto {
	margin: auto;
}

.center {
	text-align: center;
}

.h-100 {
	height: 100%;
}

.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

@media (max-width:768px) {

	.mt {
		margin-top: 20px;
	}

	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}