@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$color-main:#009d42;
$bright-green:#4cba7b;
$soft-green:#bde2c9;
$orange:#f3ac00;
$soft-orange:#e8b86d;
$light-yellow:#fff8a1;
$pale-yellow:#f8f9e0;

#wrapper{
	overflow: hidden;
}
//mainimage
#hero-img{
	background-image: url("../img/bg-yellow.png");
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	&::after{
		content: "";
		position: absolute;
		background-image: url("../img/wave-green-top.svg");
		bottom: -2px;
		width: 102%;
		height: 7.7vw;
		background-size: cover;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	#mainimage {
		height: 750px;
		position: relative;
		padding-top: 15rem;
		@include md{height: 630px;}
		@include sm{height: 580px;}
		@include xs{
			padding-top: 22rem;
			height: 530px;
		}
		&::before{
			content: "";
			position: absolute;
			top: 20rem;
			left: 10rem;
			width: 300px;
			height: 250px;
			background-image: url("../img/top-copy-1.svg");
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 2;
			@include lg{left: 0;}
			@include md{
				width: 230px;
				height: 200px;
			}
			@include sm{
				top: 15rem;
				width: 200px;
				height: 170px;
			}
			@include xs{
				background-image: url("../img/top-copy-1-xs.svg");
				top: 12rem;
				left: 4rem;
				width: 260px;
				height: 70px;
				z-index: 100;
				-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1)); /* SafariなどのWebkitブラウザ用 */
				filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1)); 
			}
		}
		&::after{
			content: "";
			position: absolute;
			bottom: 0;
			left: 10rem;
			width: 500px;
			height: 450px;
			background-image: url("../img/hero-img.svg");
			background-size: contain;
			background-repeat: no-repeat;
			z-index: 1;
			@include lg{left: 0;}
			@include md{
				width: 430px;
				height: 400px;
			}
			@include sm{
				width: 370px;
				height: 330px;
			}
			@include xs{
				display: none;
			}
		}
		.swiper-container{
			height: 100%;
			z-index: 5;
			.swiper-wrapper{
				.swiper-img {
					position: absolute;
					right: 0;
					width: 600px;
					height: 600px;
					border-radius: 50%; 
					border: 15px solid white; 
					background-position: center;
					box-shadow: 0 0 10px rgba(0,0,0,0.1);
					@include md{
						right: -140px;
						width: 500px;
						height: 500px;
					}
					@include sm{
						width: 450px;
						height: 450px;
					}

					@include xs{
						width: 340px;
						height: 340px;
						left: 50%;
						transform: translateX(-50%);
						right: auto; // ←念のためrightを無効化！
					}
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
						display: block;
					}
				}
			}
		}
		.img1 {
			background-image: url("../img/hero-slide-1.jpg");
			background-size: cover;
		}
		.img2 {
			background-image: url("../img/hero-slide-2.jpg");
			background-size: cover;
		}
		.img3 {
			background-image: url("../img/hero-slide-3.jpg");
			background-size: cover;
		}
	}
}


#intro{
	padding: 5rem 0;
	background:$soft-green;
	
	p{
		margin-bottom: 3rem;
		span{
			color:$color-main;
			font-weight: 800;
		}
	}
	.term{
		background: $light-yellow;
		padding: 3rem;
    	border-radius: 15px;
		box-shadow: 0 4px 0 $orange;
		@include md{margin-top: 5rem;}
		@include xs{
			width: 95%;
        	margin: 5rem auto 0;
		}
		h3{
			font-weight: 600;
			color: $orange;
			font-size: 30px;
			font-size: 3rem;
		}
		ul{
			list-style: none;
			padding: 0;
			li{margin-left: 18px;}
			li::before{
				content: "";
				display: inline-block;
				width: 13px;
				height: 13px;
				background-color: $orange;
				border-radius: 50%;
				margin-right: 0.5rem;
				margin-left: -18px;
			}
		}
	}
}

#features{
	padding: 15rem 0 8rem;
	background:$pale-yellow;
	position: relative;
	@include md{padding: 10rem 0 5rem;}
	@include xs{padding: 7rem 0 3rem;}
	&::before{
		content: "";
		position: absolute;
		background-image: url("../img/wave-green-bottom.svg");
		top: -2px;
		width: 100%;
		height: 5.7vw;
		background-size: cover;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	.insta{
		margin-bottom: 5rem;
		@include xs{margin-bottom: 3rem;}
		a{display: block;}
		img{
			margin: 0 auto;
			width: 80%;
			border-radius: 10px;
			transition: 0.2s ease-in-out;
			&:hover{opacity: 0.6;}
			@include sm{width: 100%;}
		}
	}
	.features{
		.feature-item{
			display: flex;
			gap: 2rem;
			align-items: center;
			background: #fff;
			border-radius: 10px;
			margin-bottom: 3rem;
			padding: 2rem;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
			@include sm{
				flex-direction: column;
				padding: 3rem 2rem 2rem;
			}
			@include xs{margin-bottom: 2rem;}
			.feature-text , .feature-image {flex: 1;}
			.feature-text{
				padding: 0 4rem;
				@include sm{padding: 0;}
				h3{
					font-size: 26px;
					font-size: 2.6rem;
					color: $color-main;
					font-weight: 600;
					line-height: 1.5em;
					margin-bottom: 1.5rem;
					@include sm{margin-bottom: 0.5rem;}
				}
			}
			.feature-image{
				height: 250px;
				overflow: hidden;
				img {
					border-radius: 10px;
					width: 100%;
				    height: 100%;
					object-fit: cover;
					mask-image: linear-gradient(to left, black 0%, black 70%, transparent 100%);
					-webkit-mask-image: linear-gradient(to left, black 0%, black 70%, transparent 100%);
					@include sm{
						mask-image: none;
					-webkit-mask-image: none;
					}
				}
			}
			
		}
		.feature-item.reverse{
			flex-direction: row-reverse;
			@include sm{
				flex-direction: column;
				gap: 1rem;
			}
			.feature-image img {
				mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
				-webkit-mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
				@include sm{
					mask-image: none;
				-webkit-mask-image: none;
				}
			}
		}
	}
}

#service-intro{
	background:$pale-yellow;
	text-align: center;
	padding-bottom: 4rem;
	
	.container{
		.copy-2{
			max-width: 430px;
			margin-bottom: 2rem;
			@include sm{max-width: 350px;}
		}
		p{margin-bottom: 3rem;}
	}	
}

#slide-show{
	position: relative;
	&::before{
		content: "";
		position: absolute;
		background-image: url("../img/wave-yellow-bottom.svg");
		top: -2vw;
		width: 102%;
		height: 7.7vw;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 10;
		left: 50%;
		transform: translateX(-50%);
	}
	&::after{
		content: "";
		position: absolute;
		background-image: url("../img/wave-green-top.svg");
		bottom: -2px;
		width: 102%;
		height: 7.7vw;
		background-size: cover;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	.scroll-infinity{
		position: relative;
		&::before{
			content: url("../img/hiyoko.svg");
			display: block;
			width: 80px;
			background-size: cover;
			position: absolute;
			bottom: 0;
			right: 25%;
			z-index: 2;
			animation: hop 2s infinite ease-in;
			@keyframes hop {
			  0%   { transform: translateY(0); }
			  10%  { transform: translateY(-20px); }
			  20%  { transform: translateY(0); }
			  30%  { transform: translateY(-10px); }
			  40%  { transform: translateY(0); }
			}
			@include md{
				width: 70px;
				bottom: -10px;
				right: 10%;
			}
			@include xs{bottom: -20px;}
		}
		ul{margin-bottom: 0;}
	}
}



#guide-intro{
	background: $soft-green;
	padding: 3rem 0;
	position: relative;
	.row{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		gap: 50px; 
		position: relative;
		@include md{gap: 30px;}
		&::after{
			content: "";
			position: absolute;
			top: 0;
			left: 5rem;
			width: 90px;
			height: 70px;
			background-image: url("../img/onpu1.svg");
			background-size: contain;
			background-repeat: no-repeat;
			@include md{
				width: 80px;
				left: 15rem;
			}
			@include sm{left: 5rem;}
			@include xs{
				width: 70px;
				left: 5%;
			}
		}
		.guide-intro-image{
			width: 500px;
			height: auto;
			border-radius: 50%; 
			border: 10px solid white; 
			box-shadow: 0 0 10px rgba(0,0,0,0.1);
			overflow: hidden;
			@include xs{width: 90%;}
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}
		.guide-intro-text{
			position: relative;
			&::after{
				content: "";
				position: absolute;
				bottom: 0;
				right: -8rem;
				width: 50px;
				height: 100px;
				background-image: url("../img/onpu2.svg");
				background-size: contain;
				background-repeat: no-repeat;
				@include sm{
					right: -10rem;
					width: 42px;
					height: 75px;
				}
				@include xs{display: none;}
			}
			.copy-3{margin-bottom: 3rem;}
			h3,p{
				font-size: 20px;
				font-size: 2rem;
				font-weight: 600;
			}
			h3{margin-bottom: 1rem;}
			p span{
				font-size: 33px;
				font-size: 3.3rem;
				color: $color-main;
				line-height: 1em;
				a{
					color: $color-main;
  					text-decoration: none;
				}
			}
			dl{
				padding-top: 3rem;
				line-height: 1.75em;
				dd{
					font-size: 14px;
					font-size: 1.4rem;
				}
			}
		}
	}
	
	&::after{
		content: "";
		position: absolute;
		background-image: url("../img/wave-green-bottom.svg");
		bottom: -5vw;
		width: 102%;
		height: 5.7vw;
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
}

#entry-intro{
	padding: 18rem 0 10rem;
	background-image: url("../img/bg-yellow.png");
	background-size: cover;
	background-repeat: no-repeat;
	@include lg{padding: 15rem 0 8rem;}
	@include md{padding: 13rem 0 7rem;}
	@include xs{padding: 10rem 0 7rem;}
	.entry-container{
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		display: flex;
		gap: 2rem;
		align-items: center;
		padding: 2rem;
		position: relative;
		@include sm{
			padding: 2rem 2rem 4rem;
			flex-direction: column;
		}
		.ribbon{
			position: absolute;
			display: block;
			width: 400px;
			height: 85px;
			top: -5rem;
			left: 0;
			right: 0;
			margin: 0 auto;
			filter: drop-shadow(0 0 10px rgba(0,0,0,0.1));
			z-index: 2;
			@include lg{width: 350px;}
			@include md{
				width: 300px;
			}
		}
		.entry-image img {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 10px;
			mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
			-webkit-mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
		}
		.entry-text{
			p{margin-bottom: 2rem;}
			.link-box{
				@include sm{
					text-align: center;
				}
			}
		}
	}
}