@charset "UTF-8";
/* index -- login page */

/* ------------------- index only common ------------------- */

.index{
	text-align:center;
	& h1,h2,h3,h4,h5{
		font-weight:bold;
	}
}

.index-common__button{
	display:flex;
	justify-content: center;
	align-items: center;
	margin:0 auto;
	background: var(--gradient-main);
	width:90%;
	max-width:650px;
	border-radius: 6rem;
	padding:1rem;
	text-decoration: none;
	& div span{
		color: var(--color-accent);
		font-size: 1.4rem;
		font-weight: normal;
		-webkit-text-stroke: 0.04rem;
	}
	& div p{
		color: var(--color-text-inverse);
		font-size:1.8rem;
	}
	& > span{
		background: var(--color-inverse);
		color: var(--color-main);
		padding: 0.3rem 0.8rem;
		border-radius: 0.3rem;
		margin-left:1rem;
	}
}
.index-common__plus{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	&::after{
		content: "";
		display: inline-block;
		width: 3.6rem;
		height: 3.6rem;
		background: url(../image/index_plus.png) no-repeat center / contain;
		flex-shrink: 0;
	}
}

.index-common__course-foot{
	font-weight:bold;
	& p{
		font-size:2rem;
		background: var(--color-inverse);
		padding:1rem;
		display:inline-block;
		line-height:1;
		margin-top:1rem;
		&:first-child{
			margin-top:0;
		}
		&:has(.has-price){
			padding-top:0;
		}
	}
	& span{
		color: var(--color-main);
		font-size:2.4rem;
	}
	& .has-dot{
		padding-right:0.3rem;
		& span{
			position: relative;
			color: var(--color-text-primary);
		}
		& span::after {
			content: "";
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -0.3rem;
			width: 0.4rem;
			height: 0.4rem;
			background: var(--color-accent);
			border-radius: 50%;
		}
	}
	& .has-price{
		font-size:4.8rem;
		box-shadow: inset 0 -3px 0 var(--color-accent);
		margin:0 1.2rem;
	}
}

/* ------------------- index contents ------------------- */

.index__fv{
	margin-bottom:4rem;
	& h2{
		font-size: clamp(3rem, calc(1.2rem + 2vw), 4.2rem);
		margin-top: clamp(3rem, calc(1.2rem + 2vw), 4.2rem);
		@media (max-width: 320px) {
			font-size: 2.5rem;
		}
	}
	& h3{
		font-size: 1.6rem;
		-webkit-text-stroke: 0.03rem;
		margin-top: 2rem;
		margin-bottom:3rem;
		& span{
			font-weight:bold;
			color: var(--color-main);
			-webkit-text-stroke: 0;
		}
	}
}

.index__sample{
	overflow: hidden;
	width:100%;
	margin-bottom:3rem;
	background: var(--gradient-sub);
	padding:2.5rem 0;
	line-height: 1;
	& ul{
		display: flex;
		width: max-content;
		flex-wrap: nowrap;
		animation: scroll 20s linear infinite;
	}
	& li img{
		background: var(--color-main-100);
		width:10rem;
		margin-left:2rem;
		box-shadow: 0 0 12px rgba(152,162,226,.3);
	}
}
@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.index__content{
	margin:5rem auto;
	& h3{
		font-size: 2.5rem;
	}
	& img{
		margin-top:3rem;
		display:inline-block;
		width:90%;
	}
}

.index__monthly{
	--overlay-bg-opacity: 0.3;
	padding:3rem;
	& h3{
		background: var(--color-inverse);
		color: var(--color-main);
		padding:0.2rem 1rem;
		font-size: 2.2rem;
		margin:0 auto 3rem auto;
		display:inline-block;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap:1.5rem;
		line-height: 1;
	}
	& li img{
		width:100%;
		background: var(--color-main-100);
		box-shadow: 0 0 12px rgba(152,162,226,.3);
	}
	& p{
		text-align:left;
		color: var(--color-text-inverse);
		font-size: var(--font-xs);
		margin-top:2rem;
	}
}

.index__coupon{
	margin-top:3rem;
	font-weight: bold;
	& h3{
		color: var(--color-main);
		font-size: 2.8rem;
	}
	& p:first-of-type {
		font-size: 1.6rem;	
		margin: 2rem auto;
	}
	& p:last-of-type{
		font-size: 2rem;	
	}
	& h4{
		color: var(--color-main);
		font-size: 3.6rem;
		margin: 2rem auto;
	}
	& img{
		width: 40%;
		display: block;
		margin:0 auto;
	}
}

/* コース一括紹介 */
.index__course{
	& > div:first-child {
		padding: 4.5rem 0;
	}
	& .index__course-contents{
		& img{
			width:100%;
			display: block;
			margin:0 auto;
		}
		& h3{
			font-size:1.8rem;
			background: var(--color-main);
			color: var(--color-text-inverse);
			line-height: 1;
			padding: 0.5rem 0;
		}
	}
	& .index__course-contents--recipe{
		padding: 4rem 0;
		font-weight: bold;
		& p{
			font-size:var(--font-base);
		}
		& h4{
			font-size: 2.2rem;
			margin: 1rem auto;
		}
		& h4 span{
			color: var(--color-main);
		}
	}
	& .index__course-contents--warranty{
		padding: 4rem 0 0;
		font-weight: bold;
		& p:first-child{
			font-size: 1.7rem;
			padding:0.2rem 1rem;
			color: var(--color-text-inverse);
			background: var(--color-main);
			display:inline-block;
		}
		& img{
			width:92%;
			display: block;
			margin:2.5rem auto;
		}
		& h4{
			font-size: 2rem;
			margin: 0.5rem auto 1rem auto;
		}
		& h4 span{
			color: var(--color-main);
		}
		& h5{
			font-size: 2.4rem;
		}
		& h5 span{
			font-size: 3.4rem;
			margin: 0 0.3rem;
		}
		& a{
			color: var(--color-main-500)
		}
	}
	& .index__course-contents--service{
		width:90%;
		margin:4rem auto;
	} 
	& .index__course-foot{
		padding: 5rem 0;
	}
	@media screen and (max-width:340px) {
		& .index__course-contents--service{
			padding:2rem 1.5rem;
			& li h5 span{
				font-size:2.5rem;
			}
			& li h5 span span{
				font-size:2rem;
			}
		}
	}
}
/* --- */

/* コースごと：付帯特典 */
.index__warranty{
	padding:3rem 0;
	font-weight:bold;
	color: var(--color-text-inverse);
	& > div:first-child{
		margin-bottom:2rem;
	}
	& p{
		margin:3rem auto;
	}
	& p span{
		font-size: 2rem;
	}
	& p span span{
		color: var(--color-accent);
	}
	& img{
		width:90%;
		display:inline-block;
	}
	& > h4{
		font-size: 3.6rem;
		margin-top: -2rem;
	}
	& > h4::after{
		background: url(../image/index_plus_inverse.png) no-repeat center / contain;
	}
	& > h5{
		font-size: 2.4rem;
		margin: 3rem auto;
	}
	& > h5 span{
		color: var(--color-accent);
	}
	& > h5 span span{
		font-size: 3.2rem;
	}
	& a{
		background: var(--color-inverse);
		color: var(--color-main);
		border-radius: 3rem;
		padding: 1rem 3rem;
		text-decoration: none;
		display:inline-block;
		margin-bottom: 1rem;
	}
	& aside{
		font-size: 1.2rem;
		font-weight:normal;
	}
}
/* コースごと：レシピ */
.index__recipe{
	font-weight: bold;
	padding-top: 3rem;
	& p{
		margin:2rem auto;
	}
	& h3{
		font-size: 2rem;
	}
	& h4{
		font-size: 3.6rem;
		color: var(--color-main);
		margin-top: 1rem;
	}
	& img{ 
		margin-top: 4rem;
		display:block;
	}
}
/* コースごと：サービス紹介 */
.index__service{
	padding:5rem 2rem;
	& > div:first-child {
		margin-bottom:4rem;
	}
}

.index__last{
	padding: 4rem 0;
	font-weight:bold;
	position: relative;
    z-index: 0;
	overflow: hidden;
	& > p{
		font-size: 2rem;
	}
	& > p span{
		font-size: 2.4rem;
		color: var(--color-main);
	}
	& h3{
		position:relative;
		z-index:2;
		font-size: 3.2rem;
		margin: 3rem auto;
	}
	& h3::before{
		content:'';
		position:absolute;
		z-index:-1;
		left: 35%;
		top: 0;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		background: var(--gradient-main);
		filter: blur(100px);
	}
	& h3 span span{
		color: var(--color-main);
	}
}

/* --------------- anime fade -------------- */
.index__fade {
  	opacity: 0;
  	transition: opacity 1.5s ease;
	&.is-visible {
		opacity: 1;
	}
}

/* --------------- index foot -------------- */
.index__foot {
    width: 100%;
    max-width: 840px;
    position: fixed;
    z-index: 3;
    bottom: 0px;
    text-align: center;
    left: 50%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	&.is-show {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
    	transform: translateX(-50%) translateY(0);
	}
	& a{
		background: var(--color-main);
		color: var(--color-text-inverse);
		font-weight: bold;
		font-size: var(--font-l);
		display:block;
		text-decoration: none;
		padding: 1.5rem 0;
	}
}