@charset "UTF-8";
/* CSS Document */
/*---------------------------
	COMMON
---------------------------*/
body {
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.header {
	display: none;
}
.cta-btn {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(18.75rem, 17.33rem + 4.55vw, 21.875rem);
	height: clamp(3.75rem, 2.898rem + 2.73vw, 5.625rem);
	background-image: linear-gradient(180deg, rgba(49, 117, 199, 1), rgba(0, 24, 181, 1));
	border-radius: 10px;
	font-size: clamp(1.25rem, 0.966rem + 0.91vw, 1.875rem);
	font-weight: 600;
	color: #fff;
	position: relative;
}
.section-title {
	padding-bottom: min(9vw, 60px);
	font-size: clamp(1.875rem, 1.364rem + 1.64vw, 3rem);
	font-weight: 900;
	text-align: center;
}

.max420 {
	display: none;
}

@media screen and (max-width: 420px) {
	.max420 {
		display: block;
	}
}

/*---------------------------
	HERO
---------------------------*/
.hero {
	display: flex;
	align-items: center;
	width: 100%;
	height: min(65vw, 900px);
	max-height: 900px;
	background-color: #000525;
	position: relative;
	z-index: 0;
}
.hero::before {
	content: "";
	background-image: linear-gradient(90deg, rgba(0, 5, 37, 1), rgba(0, 5, 37, 0)50%), url("../store-genius-ai/img/bg_hero.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	width: clamp(22.25rem, -32.681rem + 125.56vw, 114.063rem);
	height: clamp(18.438rem, 1.25rem + 55vw, 56.25rem);
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
.hero-wrap {
	max-width: 1000px;
	width: 83%;
	margin: 0 auto 0 6%;
}
.hero-title {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 5%;
	font-weight: 900;
	color: #fff;
}
.hero-title-span1 {
	font-size: clamp(1.375rem, 0.182rem + 3.82vw, 4rem);
	font-weight: 600;
}
.hero-title-span1-span {
	font-size: clamp(1.375rem, 0.466rem + 2.91vw, 3.375rem);
}
.hero-title-span2 {
	font-size: clamp(2.125rem, 1.273rem + 2.73vw, 4rem);
}
.hero-lead {
	width: 100%;
	margin-bottom: 8%;
	font-weight: 500;
	font-size: clamp(1.25rem, 0.682rem + 1.82vw, 2.5rem);
	color: #fff;
}
@media screen and (max-width: 750px) {
	.hero {
		height: 650px;
		text-align: center;
	}
	.hero::before {
		width: clamp(22.258rem, 7.627rem + 62.42vw, 34.938rem);
		height: clamp(18.438rem, 6.54rem + 50.77vw, 28.75rem);
		background-image: linear-gradient(90deg, rgba(0, 5, 37, 1), rgba(0, 5, 37, 0)5%, rgba(0, 5, 37, 0)95%, rgba(0, 5, 37, 1)100%), url("../store-genius-ai/img/bg_hero_sp.webp");
		top: 50%;
		right: unset;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.hero-wrap {
		width: fit-content;
		margin: 0 auto;
		padding-top: 0;
	}
	.hero-title {
		margin-bottom: 75%;
	}
	.hero-title-span1 {
		padding-bottom: 15px;
	}
	.hero-lead {
		margin-bottom: 6%;
		line-height: 1.75;
	}
	.hero .cta-btn {
		margin: 0 auto;
	}
}

@media screen and (max-width: 480px) {
		.hero::before {
		background-image: linear-gradient(90deg, rgba(0, 5, 37, 1), rgba(0, 5, 37, 0)2%, rgba(0, 5, 37, 0)98%, rgba(0, 5, 37, 1)100%), url("../store-genius-ai/img/bg_hero_sp.webp");
	}
	.hero-title {
		margin-bottom: 90%;
	}
}

/*---------------------------
	WORRIES
---------------------------*/
.worries {
	background-color: #15234C;
	padding: min(15vw, 100px) 0;
}
.worries .section-title {
	padding-bottom: min(8vw, 90px);
	color: #fff;
}
.worries-list {
	max-width: 1180px;
	width: 93%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 2%;
}
.worries-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	grid-row-gap: 20px;
	max-width: 380px;
	width: 32%;
	height: 263px;
	background-color: #fff;
	border-radius: 10px;
}
.worries-item p {
	font-size: clamp(1.25rem, 0.909rem + 1.09vw, 2rem);
	font-weight: 500;
}
.worries-item:first-child img {
	max-width: 159px;
	width: 40%;
	max-height: 115px;
}
.worries-item:nth-child(2) img {
	max-width: 152px;
	width: 40%;
	max-height: 124px;
}
.worries-item:last-child img {
	max-width: 118px;
	width: 30%;
	max-height: 133px;
}
.worries-p {
	max-width: 550px;
	width: 90%;
	margin: min(8vw, 90px) auto 0;
	font-size: clamp(1.625rem, 1.227rem + 1.27vw, 2.5rem);
	text-align: center;
	color: #fff;
	font-weight: 600;
}
@media screen and (max-width: 768px) {
	.worries .section-title {
		color: #fff;
	}
	.worries-list {
		grid-row-gap: 20px;
	}
	.worries-item {
		width: 100%;
	}
}

@media screen and (max-width: 500px) {
	.worries-item {
		max-width: 250px;
		height: 200px;
	}
}
/*---------------------------
	ABOUT
---------------------------*/
.about {
	background-color: #030D31;
	padding: min(15vw, 100px) 0;
	color: #fff;
}
.about .section-title {
	max-width: 1220px;
	padding-bottom: 25px;
	margin: 0 auto 50px;
	position: relative;
}
.about .section-title::after {
	content: "";
	width: 100%;
	height: 2px;
	background-image: linear-gradient(90deg, rgba(3, 13, 49, 1), rgba(114, 131, 193, 1)50%, rgba(3, 13, 49, 1));
	position: absolute;
	left: 0;
	bottom: 0;
}
.about-p {
	width: 70%;
	margin: 0 auto;
	font-size: clamp(1rem, 0.886rem + 0.36vw, 1.25rem);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.about-list1 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 40px;
	grid-row-gap: 20px;
	max-width: 915px;
	width: 93%;
	margin: 50px auto;
}
.about-list1-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: 10px;
	font-size: clamp(1.125rem, 0.955rem + 0.55vw, 1.5rem);
	font-weight: 600;
}
.about-list1-item::before {
	content: "";
	background-image: url("../store-genius-ai/img/icon_about.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: clamp(1.563rem, 1.392rem + 0.55vw, 1.938rem);
	height: clamp(1.063rem, 0.949rem + 0.36vw, 1.313rem);
}
.about-wrap2 {
	margin-top: min(15vw, 100px);
}
.about-list2 {
	display: grid;
	grid-template-columns: 32% 32% 32%;
	grid-template-rows: 1fr;
	align-items: center;
	column-gap: 2%;
	max-width: 1185px;
	width: 93%;
	margin: 0 auto;
	counter-reset: number 0;
}
.about-list2-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	grid-row-gap: 20px;
	width: 100%;
	background-color: #303F6C;
	padding: 40px 0;
	border-radius: 10px;
}
.about-list2-item::before {
	counter-increment: number 1;
	content: "0"counter(number) " ";
	font-family: "Roboto", sans-serif;
	font-size: clamp(3.75rem, 2.898rem + 2.73vw, 5.625rem);
	font-weight: 900;
	color: #6184B1;
	line-height: 1;
}
.about-list2-item h3 {
	max-width: 340px;
	width: 93%;
	margin: 0 auto;
	text-align: center;
	font-size: clamp(1.25rem, 1.023rem + 0.73vw, 1.75rem);
}
.about-list2-item p {
	max-width: 315px;
	width: 93%;
	font-size: clamp(1rem, 0.943rem + 0.18vw, 1.125rem);
	font-weight: 500;
}
@media screen and (max-width: 768px) {
	.about-p {
		text-align: left;
	}
	.about-p2 {
		text-align: center;
	}
	.about-list2 {
		max-width: 600px;
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto;
		column-gap: 0;
		grid-row-gap: 20px;
	}
	.about-list2-item p {
		max-width: 400px;
	}
}
@media screen and (max-width: 500px) {
	.about-p {
		width: 90%;
	}
	.about-list1 {
		flex-direction: column;
		align-items: flex-start;
		column-gap: 0;
		max-width: 260px;
	}
}
/*---------------------------
	PRICE
---------------------------*/
.price {
	background-color: #EEEFF6;
	padding: min(15vw, 100px) 0;
}
.price .section-title {
	max-width: 1220px;
	padding-bottom: 25px;
	margin: 0 auto 50px;
	position: relative;
}
.price .section-title::after {
	content: "";
	width: 100%;
	height: 2px;
	background-image: linear-gradient(90deg, rgba(238, 239, 246, 1), rgba(114, 131, 193, 1)50%, rgba(238, 239, 246, 1));
	position: absolute;
	left: 0;
	bottom: 0;
}
.price-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1000px;
	width: 93%;
	margin: 0 auto;
	padding: 30px min(7vw, 50px);
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #D9D9D9;
	box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.25);
}
.price-item {
	display: grid;
	grid-template-columns: auto 1fr 40%;
	align-items: center;
	column-gap: 5%;
	padding: 24px 0;
}
.price-item + .price-item {
	border-top: 1px solid #D9D9D9;
}
.price-label {
	place-self: flex-end;
	font-size: clamp(1.5rem, 1.159rem + 1.09vw, 2.25rem);
	font-weight: 600;
}
.price-price {
	font-size: clamp(1.75rem, 1.523rem + 0.73vw, 2.25rem);
	font-weight: 600;
}
.price-price .unit {
	font-size: clamp(1.125rem, 1.068rem + 0.18vw, 1.25rem);
	font-weight: 500;
}
.price-desc {
	font-size: clamp(1rem, 0.886rem + 0.36vw, 1.25rem);
	font-weight: 500;
}
.options-title {
	margin: min(12vw, 70px) 0 min(7vw, 50px);
	font-size: clamp(1.625rem, 1.227rem + 1.27vw, 2.5rem);
	text-align: center;
}
.options-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1000px;
	width: 93%;
	padding: 0;
	margin: 0 auto;
}
.options-item {
	width: 100%;
	background: #fff;
	border-radius: 10px;
	padding: 30px 20px;
	border: 1px solid #D9D9D9;
	box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.25);
	text-align: center;
}
.options-label {
	margin-bottom: 15px;
	font-size: 24px;
	font-weight: 600;
}
.options-price {
	margin-bottom: 15px;
	font-size: clamp(1.5rem, 1.386rem + 0.36vw, 1.75rem);
	font-weight: 600;
}
.options-price span {
	font-size: clamp(1rem, 0.886rem + 0.36vw, 1.25rem);
	font-weight: 600;
}
.options-desc {
	font-size: clamp(1rem, 0.943rem + 0.18vw, 1.125rem);
	font-weight: 500;
}
@media screen and (max-width: 850px) {
	.price-list {
		max-width: 600px;
		padding: 2vw min(7vw, 50px);
	}
	.price-item {
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto;
		column-gap: 0;
		grid-row-gap: 15px;
		place-items: center;
	}
	.price-label {
		place-self: center;
	}
}
@media screen and (max-width: 680px) {
	.options-list {
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto;
		max-width: 600px;
		width: 85%;
	}
}
/*---------------------------
	CTA SECTION
---------------------------*/
.cta-sec {
	padding: min(12vw, 80px) 0;
	background-image: linear-gradient(125deg, rgba(3, 13, 49, 1), rgba(55, 59, 133, 1)50%, rgba(3, 13, 49, 1));
	text-align: center;
	letter-spacing: 0.05em;
}
.cta-sec .section-title {
	padding-bottom: min(5vw, 30px);
	font-size: clamp(1.375rem, 0.636rem + 2.36vw, 3rem);
	color: #fff;
}
.cta-message {
	width: 93%;
	margin: 0 auto;
	font-size: clamp(1.125rem, 0.727rem + 1.27vw, 2rem);
	color: #fff;
	font-weight: 500;
	line-height: 1.5;
}
.cta-sec .cta-btn {
	margin: 30px auto 0;
}
/*---------------------------
	SCHEDULE
---------------------------*/
.schedule {
	padding: min(15vw, 100px) 0;
}
.schedule-list {
	max-width: 800px;
	width: 90%;
	margin: 0 auto;
}
.schedule-item {
	background: #fff;
	border-radius: 10px;
	padding: 30px 60px;
	border: 1px solid #D9D9D9;
	box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.25);
}
.schedule-item + .schedule-item {
	margin-top: 20px;
}
.schedule-term {
	display: inline-block;
	background-color: #f3f4f6;
	padding: 5px 10px;
	border-radius: 5px;
	margin-bottom: 10px;
	font-size: clamp(0.875rem, 0.761rem + 0.36vw, 1.125rem);
	font-weight: 500;
}
.schedule-title {
	margin-bottom: 10px;
	font-size: clamp(1.125rem, 0.955rem + 0.55vw, 1.5rem);
	font-weight: 500;
}
.schedule-title::after {
	content: "";
	display: block;
	height: 1px;
	background-color: #e5e7eb;
	margin-top: 10px;
	font-weight: 500;
}
.schedule-desc {
	font-size: clamp(0.938rem, 0.852rem + 0.27vw, 1.125rem);
	color: #374151;
}

@media screen and (max-width: 768px) {
	.schedule-list {
	max-width: 600px;
}
}
@media screen and (max-width: 480px) {
	.schedule-item {
	padding: 30px;
}
}

/* ------------------------------
footer
------------------------------ */
@media screen and (max-width: 768px) {
	footer {
		margin-top: min(15vw, 100px);
	}
}