@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;

.site-header {
	background-color: #fff!important;
}

#header{
	background: #efcd99 url("../img/header-service.jpg") center / cover;
}

#wrapper{
	overflow: hidden;
}



#lifestyle{
	position: relative;
	padding-bottom: 15rem;
	background:$pale-yellow; 
	@include md{padding-bottom: 12rem;}
	@include sm{padding-bottom: 10rem;}
	@include xs{padding-bottom: 7rem;}

	&::after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 100%;
		height: 5.7vw;
		background-image: url("../../img/wave-white-top.svg");
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	img{
		border-radius: 20px;
		@include sm{margin-top: 2rem;}
	}
}

#room,#event{
	.grid{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		gap: 2vw;
		margin-bottom: 4rem;
		@include sm{grid-template-columns: repeat(2, 1fr);}
		img{
			border-radius: 20px;
			margin-bottom: 0.75rem;
		}
		figcaption{
			font-size: 18px;
			font-size: 1.8rem;
			font-weight: 700;
			text-align: center;
		}
	}
}

#room{
	position: relative;
	padding-bottom: 15rem;
	@include sm{padding-bottom: 25rem;}
	@include xs{padding-bottom: 23rem;}
	.link-box{
		text-align: center;
	}
	&::after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 100%;
		height: 5.7vw;
		background-image: url("../../img/wave-yellow-top.svg");
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
}

#flow{
	position: relative;
	padding-bottom: 15rem;
	background:$pale-yellow; 
	@include md{padding-top: 2rem;}
	@include sm{
		padding-top: 6rem;
		padding-bottom: 10rem;
	}
	@include xs{padding-bottom: 7rem;}

	&::before{
		content: "";
		position: absolute;
		top: -180px;
		right: 10%;
		width: 230px;
		height: 230px;
		background-image: url("../img/service-dogs.png");
		background-size: contain;
		background-repeat: no-repeat;
		@include lg{right: 5%;}
		@include md{
			right: 3%;
			width: 200px;
			height: 210px;
		}
		@include sm{
			right: 0;
			left: 0;
			margin: 0 auto;
			
		}
	}
	.flow-text{
		display: flex;
		flex-wrap: wrap;
		column-gap: 4rem;
		margin-bottom: 5rem;
		@include sm{
			flex-direction: column;
			flex-wrap: nowrap;
			margin-bottom: 3rem;
		}
		.time{
			position: relative;
			width: 15%;
			border-radius: 10px;
			display: grid;
			place-items: center;
			font-size: 30px;
			font-size: 3rem;
			font-weight: 700;
			@include sm{
				width: 100%;
				font-size: 25px;
				font-size: 2.5rem;
				padding: 1rem;
				margin-bottom: 2rem;
			}
			p{margin-bottom: 0;}
		}
		.todo{
			flex: 1;
			table{
				width: 100%;
				tr{
					border-top: $color-main 1px solid;
					border-bottom: $color-main 1px solid;
					th{
						vertical-align: top;
						font-weight: 400;
						width: 20%;
						@include xs{width: 28%;}
					}
					th,td{
						padding: 1.5rem 0;
						line-height: 1.75em;
						@include sm{padding: 1rem 0;}
					}
				}
			}
		}
	}
	.row{
		@include xs{gap: 1rem;}
	}
	//	朝と昼の下のマージン
	.morning, .noon{
		margin-bottom: 7rem;
	}
	//	朝のタイトル部分
	.morning .time{
		background: #ffa217;
		&::before{
			content: "";
			position: absolute;
			top: -20px;
			left: -20px;
			width: 57px;
			height: 36px;
			background-image: url("../img/service-timeline-morning.svg");
			background-size: contain;
			background-repeat: no-repeat;
			filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
			@include sm{
				top: -10px;
				left: -10px;
			}
		}
	}
	//	昼のタイトル部分
	.noon .time{
		background: #faee45;
		&::before{
			content: "";
			position: absolute;
			top: -20px;
			left: -20px;
			width: 52px;
			height: 52px;
			background-image: url("../img/service-timeline-noon.svg");
			background-size: contain;
			background-repeat: no-repeat;
			filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
			@include sm{
				top: -10px;
				left: -10px;
			}
		}
	}
	//	夕のタイトル部分
	.night .time{
		background: #5a6190;
		color: #fff;
		&::before{
			content: "";
			position: absolute;
			top: -20px;
			left: -20px;
			width: 54px;
			height: 39px;
			background-image: url("../img/service-timeline-night.svg");
			background-size: contain;
			background-repeat: no-repeat;
			filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
			@include sm{
				top: -10px;
				left: -10px;
			}
		}
	}
	&::after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 100%;
		height: 5.7vw;
		background-image: url("../../img/wave-white-top.svg");
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	img{border-radius: 20px;}
}

#event{
	@include md{padding-top: 2rem;}
	@include sm{padding-bottom: 0;}
}

#slide-show{
	position: relative;
	&::after{
		content: "";
		position: absolute;
		bottom: 5%;
		right: 20%;
		width: 90px;
		height: 90px;
		background-image: url("../img/onpu-white.svg");
		background-size: contain;
		background-repeat: no-repeat;
		@include md{
			bottom: 0;
			width: 80px;
			height: 80px;
		}
		@include sm{
			width: 70px;
			height: 70px;
		}
		@include xs{display: none;}
	}
	.scroll-infinity{
		position: relative;
		&::before{
			content: "";
			position: absolute;
			top: -10px;
			width: 100%;
			height: 5.7vw;
			background-image: url("../../img/wave-white-bottom.svg");
			background-size: contain;
			background-repeat: no-repeat;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
		}
		&::after{
			content: "";
			position: absolute;
			bottom: -2px;
			width: 100%;
			height: 5.7vw;
			background-image: url("../../img/wave-orange-top.svg");
			background-size: contain;
			background-repeat: no-repeat;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	
}