@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;
  }
}
//ブレイクポイントを指定------ここまで


//カラー指定
$main-color:#0068b7;
html{
	scroll-padding-top: 130px;
	scroll-behavior: smooth;
}
body{
	letter-spacing: 0.05em;
}
html,body{
	overflow-x: clip;
}
.container{
	padding-right: 5%;
    padding-left: 5%;
}
//工事中の表示　アップしたら消す-------------------------------------
#maintenance{
	display: grid;
	place-content: center;
	height: 100vh;
	text-align: center;
	img{
		width: 200px;
		margin: 0 auto;
		margin-bottom: 3rem;
	}
	.title{
		font-size: 24px;
		font-size: 2.4rem;
		font-weight: 600;
		color: $main-color;
	}
	#copyright{
		margin-top: 3rem;
	}
}

.scroll-fade {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	transition-delay: 0.2s; /* ←ここ増やすと遅れる */
}
.scroll-fade.is-show {
	opacity: 1;
	transform: translateY(0);
}

//ヘッダー-------------------------------------
#site-header {
	background-color: #ffffff;
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 15px 0 20px 0;
	.header-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 40px;
		@include xs{
			gap: 30px;
		}
		.logo-section {
			display: flex;
			flex-direction: column;
			gap: 0x;
			.site-logo {
				margin: 0;
				a{display: block;}
				img {
					display: block;
					width: 280px;
					height: auto;
					@include xs{
						width: 240px;
					}
				}
			}
			.company-location {
				padding-left: 6rem;
				font-size: 14px;
				font-weight: 400;
				margin: 0;
				@include xs{
					padding-left: 5rem;
					font-size: 12px;
					font-size: 1.2rem;
				}
			}
		}
		.nav-contact-wrapper {
			display: flex;
			align-items: end;
			gap: 30px;
			z-index: 1000;
			.main-nav{
				.nav-list {
					display: flex;
					list-style: none;
					gap: 40px;
					margin: 0;
					padding: 0;
					.nav-item {
						margin: 0;
						.nav-link {
							text-decoration: none;
							color: #333;
							font-weight: 400;
							font-size: 16px;
							padding: 0;
							transition: all 0.3s ease;
							border-bottom: 4px solid transparent;
							display: block;
							letter-spacing: 0.1em;
							i{
								margin-left: 1rem;
								color: $main-color;
							}
							&:hover,
							&:focus {
								border-bottom-color: #ffff00;
								outline: none;
							}
						}
					}
				}
			}
			.contact-info {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				.phone-number {
					text-decoration: none;
					color: #333;
					font-weight: 500;
					font-size: 18px;
					transition: color 0.3s ease;
					line-height: 2.8rem;
					margin-bottom: 0.5rem;
					.phone-text {
						letter-spacing: 0.05em;
						color: $main-color; 
						font-size: 28px;
						font-size: 2.8rem;
						margin-left: 0.5rem;
					}
				}
				.contact-button {
					display: inline-block;
					padding: 2px 25px;
					background: $main-color;
					color: white;
					text-decoration: none;
					border: 1px solid $main-color;
					border-radius: 999px;
					font-weight: 400;
					font-size: 15px;
					transition: all 0.3s ease;
					white-space: nowrap;
					i{
						margin-right: 1rem;
					}
					&:hover,
					&:focus {
						background: #fff;
						color: $main-color;
						outline: none;
					}
				}
			}
		}
	}
}

//---------ハンバーガーのとき---------//
@include md{
	#site-header{
		.overlay{
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,0.4);
			opacity: 0;
			visibility: hidden;
			transition: 0.3s;
			z-index: 900;
		}
		.overlay.is-open{
			display: block;
			opacity: 1;
			visibility: visible;
		}
		.header-container{
			.hamburger{
				all: unset;
				display: none;
				cursor: pointer;
				position: relative;
				width: 30px;
				height: 22px;
				-webkit-tap-highlight-color: transparent;
				@include md{
					display: block;
					z-index: 1001;
				}
				span{
					position: absolute;
					left: 0;
					width: 100%;
					height: 2px;
					background: #333;
					transition: 0.3s;
					&:nth-child(1){ top: 0; }
					&:nth-child(2){ top: 10px; }
					&:nth-child(3){ bottom: 0; }
				}
			}
			//バツになるアニメーション
			.hamburger.is-open span:nth-child(1){
				transform: translateY(10px) rotate(45deg);
			}
			.hamburger.is-open span:nth-child(2){
				opacity: 0;
			}
			.hamburger.is-open span:nth-child(3){
				transform: translateY(-10px) rotate(-45deg);
			}
			.nav-contact-wrapper{
				flex-direction: column;
				align-items: start;
				position: fixed;
				top: 0;
				right: -100%;
				width: 40%;
				min-width: 270px;
				height: 100vh;
				background: #fff;
				transition: 0.4s;
				padding: 12rem 3rem 0;
				&.is-open{
					right: 0;
				}
				.main-nav{
					.nav-list{
						flex-direction: column;
						gap: 20px;
						.nav-item{
							.nav-link{
								font-size: 20px;
								font-size: 2rem;
							}
						}
					}
				}
				.contact-info{
					align-items: start;
					gap: 0.5rem;
					.phone-number{
						.phone-text{
							font-size: 22px;
							font-size: 2.2rem;
						}
					}
					.contact-button{
						padding: 5px 15px;
						font-size: 14px;
						font-size: 1.4rem;
						letter-spacing: inherit;
					}
				}
			}
		}
	}
}




//ヒーローイメージ-------------------------------------
#hero {
	padding: 20px 0 80px 0;
	.hero-inner {
		position: relative;
		.hero-text {
			position: absolute;
			left: 5rem;
			top: 7rem;
			z-index: 2;
			@include xs{
				left: 3rem;
				top: 2rem;	
			}
			h2{
				font-size: 36px;
				font-size: 3.6rem;
				font-weight: 600; 
				letter-spacing: 0.15em;
				line-height: 1.6em;
				@include xs{
					font-size: 28px;
					font-size: 2.8rem;
				}
				span{
				  background: #fff;
				  padding: 0.2em 0.4em;
				  box-decoration-break: clone;
				  -webkit-box-decoration-break: clone;
				}
			}
		}
		.hero-visual {
			width: 60%;
			margin: 0 0 0 auto;
			position: relative;
			@include md{
				width: 80%;
			}
			@include xs{
				width: 90%;
			}
			.swiper-img {
				position: relative;
				max-width: 100%;
				height: 500px;
				background-position: center;
				background-size: cover;
				border-top-left-radius: 50px;
    			border-bottom-left-radius: 50px;
				@include xs{
					height: 400px;
				}
				&::before{
				  content: "";
				  position: absolute;
				  inset: 0;
				  pointer-events: none;
				}
			}
			.img1 {
				background-image: url("../img/hero-main.jpg");
			}
			.img2 {
				background-image: url("../img/hero-main2.jpg");
			}
			.img3 {
				background-image: url("../img/hero-main3.jpg");
			}
			.hero-sub-image {
				position: absolute;
				left: -250px;
				bottom: -135px;
				width: 350px;
				z-index: 1;
				filter: drop-shadow(7px 7px 7px rgba(89, 87, 87, 0.3)); 
				@include md{
					left: -90px;
					width: 300px;
				}
				@include xs{
					left: -30px;
					bottom: -120px;
					width: 270px;
				}
				img {
					width: 100%;
					border-radius: 40px;
				}
			}
		}
	}
}

//チェックリスト-------------------------------------
#checklist{
	background: url("../img/hero-bg.jpg")center/cover no-repeat;
	height: 250px;
	width: 100%;
}
.list-content{
	width: 90%;
	max-width: 700px;
	margin: -12rem auto 12rem;
	background-color: #f5f4f0;
	display: flex; 
	justify-content: center;
	position: relative;
	@include md{
		width: 90%;
		max-width: 650px;
	}
	@include sm{
		margin: -16rem auto 12rem;
		width: 55%;
		min-width: 360px;
	}
	@include xs{min-width: 330px;}
	.list{
		display: inline-grid;
		column-gap: 5rem;
		row-gap: 1rem;
		grid-template-columns: repeat(2, 1fr);
		list-style: none;
		margin: 0;
		padding: 4rem 0;
		@include md{
			column-gap: 3rem;
		}
		@include sm{
			grid-template-columns: 1fr;
		}
		.list-item{
			position: relative;
			padding-left: 2.5rem;
			&::before{
				content: "\f00c"; /* チェック */
				font-family: "Font Awesome 6 Free";
				font-weight: 900; /* solid 用 */
				color: $main-color; 
				position: absolute;
				left: 0;
				top: 0.2em;
			}
		}
	}
	//下矢印----------------
	&::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -60px;
		width: 30px;
		height: 30px;
		border-right: 3px solid $main-color;
		border-bottom: 3px solid $main-color;
		transform: translateX(-50%) rotate(45deg);
		animation: arrowMove 2s infinite;
		@include md{
			bottom: -50px;
		}
	}
}
@keyframes arrowMove {
  0% {
    transform: translate(-50%, -10px) rotate(45deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 20px) rotate(45deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

//タイトル部分-------------------------------------
#service,#works,#about,#contact{
	h2{
		font-size: 24px;
		font-size: 2.4rem;
		font-weight: 400;
		letter-spacing: 0.05em;
		margin-bottom: 4rem;
		span{
			color: $main-color; 
			margin-left: 1rem;
		}
	}
}

//大きいキャッチ部分-------------------------------------
#service,#works,#contact{
	h3{
		font-size: 36px;
		font-size: 3.6rem;
		font-weight: 600;
		line-height: 1.5em;
		letter-spacing: 0.1em;
		text-align: center;
		margin-bottom: 5rem;
		@include sm{
			font-size: 32px;
			font-size: 3.2rem;
		}
		@include xs{
			font-size: 28px;
			font-size: 2.8rem;
		}
		span{
			color: $main-color; 
		}
	}
}

//特徴セクション-------------------------------------
#service{
	.features-grid{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 60px;
		margin-bottom: 10rem;
		@include md{
			gap: 40px;
		}
		@include sm{
			grid-template-columns: 1fr;
		}
		.feature-item{
			@include sm{
				display: flex;
				align-items: center;
				gap: 30px;
			}
			@include xs{
				flex-direction: column;
				gap: 20px;
			}
			.feature-icon{
				margin-bottom: 2.5rem;
				@include sm{
					width: 35%;
					margin-bottom: 0;
				}
				@include xs{width: 50%;}
			}
			.feature-text{
				margin: 0 auto;
				@include sm{width: 65%;}
				@include xs{width: 100%;}
				.feature-title{
					text-align: center;
					font-size: 22px;
					font-size: 2.2rem;
					font-weight: 400;
					margin-bottom: 2rem;
					@include md{
						margin-bottom: 1.5rem;
					}
					@include sm{
						text-align: justify;
					}
					@include xs{
						text-align: center;
						font-size: 22px;
						font-size: 2.2rem;
						margin-bottom: 0.75rem;
					}
				}
			}
		}
	}
	.service-container{
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 6rem;
		margin-bottom: 15rem;
		@include md{gap: 7rem;}
		@include sm{
			gap: 4rem;
			margin-bottom: 10rem;
		}
		@include xs{
			margin-bottom: 7rem;
		}
		.service-item{
			position: relative;
			&::after {
				content: "";
				position: absolute;
				bottom: -40px;
				width: 250px;
				height: 300px;
				pointer-events: none;
				z-index: -1;
				@include md{
					bottom: -30px;
					width: 180px;
					height: 210px;
				}
				@include sm{
					bottom: -20px;
					width: 160px;
					height: 180px;
				}
			}
			// 木の装飾：1番目と3番目（奇数）
			&:nth-child(odd)::after {
				background: url("../img/bg-wood-r.jpg") no-repeat center / contain;
				right: -150px;
				@include sm{right: -80px;}
				@include xs{right: -50px;}
			}
			// 木の装飾：2番目（偶数）
			&:nth-child(even)::after {
				background: url("../img/bg-wood-l.jpg") no-repeat center / contain;
				left: -150px;
				@include sm{left: -80px;}
				@include xs{left: -50px;}
			}
			.service-content{
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;
				@include sm{
					display: block;
				}
				.service-image{
					position: relative;
					@include sm{margin-bottom: 2rem;}
					&::after {
						content: "";
						position: absolute;
						bottom: -4rem;
						width: 200px;
						height: 140px;
						background-size: contain;
						background-repeat: no-repeat;
						z-index: 2;
						-webkit-filter: drop-shadow(7px 7px 7px rgba(89, 87, 87, 0.3)); /* SafariなどのWebkitブラウザ用 */
						filter: drop-shadow(7px 7px 7px rgba(89, 87, 87, 0.3)); 
						@include lg{
							width: 150px;
							height: 110px;
						}
						@include md{
							bottom: -3rem;
							width: 130px;
							height: 90px;
						}
					}
					img{
						border-radius: 50px;
						@include md{border-radius: 30px;}
					}
				}
				.icon-left-bottom::after {
					left: -4rem;
					@include sm{
						left: inherit;
						right: -4rem;
					}
				}
				.icon-right-bottom::after {
					right: -4rem;
				}
				.icon-new::after {
					background-image: url("../img/business-new-icon.svg");
				}
				.icon-reform::after {
					background-image: url("../img/business-reform-icon.svg");
				}
				.icon-design::after {
					background-image: url("../img/business-design-icon.svg");
				}
				.service-text{
					padding-left: 7rem;
					@include md{padding-left: 5rem;}
					@include sm{padding-left: 0;}
					.service-title{
						font-size: 36px;
						font-size: 3.6rem;
						font-weight: 600;
						letter-spacing: 0.1em;
						margin-bottom: 2rem;
						color: $main-color; 
						@include md{
							font-size: 32px;
							font-size: 3.2rem;
						}
						@include sm{
							font-size: 30px;
							font-size: 3rem;
							margin-bottom: 1rem;
						}
					}
				}
			}
		}
		.service-reverse {
			.service-content {
				grid-template-columns: 1fr 1fr;
				.service-image {
					order: 2;
				}
				.service-text {
					order: 1;
					padding-left: 0;
					padding-right: 7rem;
					@include sm{padding-right: 0;}
				}
			}
		}
	}
}

//実績と会社概要にかかる背景-------------------------------------
.work-about-bg{
	position: relative;
	&::before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		// ↑隠してるところ表示することになったら150pxに戻す
		width: 100%;
		height: 100%;
		// ↑隠してるところ表示することになったらcalc(100% - 150px)に戻す
		background: url("../img/about-bg.jpg") no-repeat center bottom / cover;
		z-index: 0;
//		@include md{
//			top: 100px;
//			height: calc(100% - 100px);
//		}										
//		@include sm{
//			top: 70px;
//			height: calc(100% - 70px);
//		}
// ↑隠してるところ表示することになったら表示する
	}
	#works-inner,#about{
		position: relative;
		z-index: 1;
	}
}

//実績セクション-------------------------------------
#works-inner{
	margin-bottom: 10rem;
	.works-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 90px;
		@include md{gap: 40px;}
		@include sm{grid-template-columns: 1fr;}
		.works-item{
			position: relative;
			.works-img {
				position: relative;
				border-radius: 50px;
				overflow: hidden;
				cursor: pointer;
				@include md{border-radius: 30px;}
				&::before {
					content: "";
					position: absolute;
					inset: 0;
					background: rgba(0, 104, 183, 0.55); 
					opacity: 0;
					transition: opacity 0.3s ease;
					z-index: 1;
				}
				&::after {
					content: "VIEW MORE";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
					font-size: 1.6rem;
					letter-spacing: 0.15em;
					font-weight: 500;
					opacity: 0;
					transition: opacity 0.3s ease;
					z-index: 2;
				}
				&:hover::before,
				&:hover::after {
					opacity: 1;
					pointer-events: none;
				}
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform 0.4s ease;
				}
				&:hover img {
					transform: scale(1.05);
				}
			}
			.works-text{
				width: 90%;
				background: #fff;
				padding: 3rem 4rem;
				margin: -6rem auto 0;
				position: relative;
				z-index: 2;
				@include md{
					padding: 2rem 3rem;
					margin: -4rem auto 0;
				}
				.works-title{
					text-align: center;
					font-size: 24px;
					font-size: 2.4rem;
					font-weight: 400;
					margin-bottom: 2rem;
					@include md{
						margin-bottom: 1.5rem;
						font-size: 22px;
						font-size: 2.2rem;
					}
					&::after{
						content: "";
						display: block;
						width: 120px;      // 短めが上品
						height: 1px;
						background-color: $main-color;
						margin: 2rem auto 0;
						@include md{margin: 1.5rem auto 0;}
					}
				}
				.works-description{margin-bottom: 0;}
			}
		}
	}
}

//会社概要セクション-------------------------------------
#about{
	padding-top: 7rem;
    margin-bottom: 7rem;
	//↑隠してるところ出すことになったらこの２行を消す
	.ceo-message{
		margin-bottom: 5rem;
		.ceo-content{
			display: flex;
			align-items: flex-start;
			gap: 6rem;
			@include md{
				flex-direction: column;
				align-items: center;
				gap: 3rem;
			}
			.ceo-image{
				flex: 0 0 50%;
				margin-left: calc(50% - 50vw);
				overflow: hidden;
				@include md{
					margin-left: 0;
				}
				img {
					width: 100%;
					height: auto;
					display: block;
					border-radius: 0 40px 40px 0;
					@include md{
						height: 320px;
  						object-fit: cover;
						border-radius: 30px;
					}
				}
			}
			.ceo-text {
				flex: 1;
				padding-right: 2rem;
				@include md{
					padding-right: 0;
				}
				.ceo-signature{
					.ceo-name{
						text-align: right;
						span{
							font-size: 20px;
							font-size: 2rem;
						}
					}
				}
			}
		}
	}
	.company-overview{
		padding-bottom: 7rem;
		@include xs{padding-bottom: 5rem;}
		.company-table-wrapper{
			.company-table{
				width: 100%;
				margin-bottom: 2rem;
				tbody{
					tr{
						th,td{
							border-bottom: 1px solid $main-color;
							padding: 1.25rem 2rem;
							line-height: 1.5em;
							@include xs{
								padding: 1.25rem 1.5rem;
							}
							&:first-of-type{
								border-top: 1px solid $main-color;
							}
						}
						th{
							color: $main-color;
							font-weight: 400;
							width: 23%;
							@include xs{width: 30%;}
						}
					}
				}
			}
		}
		.company-note{
			.note-text{
				text-align: center;
				@include md{text-align: justify;}
			}
		}
	}
}

//ギャラリーセクション-------------------------------------
#gallery{
	margin-bottom: 10rem;
	overflow: hidden;
	.gallery-container {
		width: 100%;
		overflow: hidden;
		.gallery-track {
			display: flex;
			width: max-content;
			animation: gallery-scroll 30s linear infinite;
			.gallery-item {
				flex: 0 0 auto;
				width: 300px; // 好みで調整
				@include xs{
					width: 250px;
				}
				img {
					width: 100%;
					height: 200px;
					object-fit: cover;
					display: block;
					@include xs{
						height: 170px;
					}
				}
			}
		}
	}
}
//スクロールアニメーション
@keyframes gallery-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

//お問い合わせセクション-------------------------------------
#contact{
	h3{
		@include md{margin-bottom: 3rem;}
	}
	h4,h5{
		text-align: center;
		line-height: 1.5em;
	}
	h4{
		font-size: 23px;
		font-size: 2.3rem;
		margin-bottom: 3rem;
		@include sm{
			font-size: 20px;
			font-size: 2rem;
		}
	}
	h5{
		font-size: 18px;
		font-size: 1.8rem;
		margin-bottom: 3rem;
		@include sm{
			font-size: 16px;
			font-size: 1.6rem;
		}
		span{
			color: $main-color;
		}
	}
	.contact-intro{
		.contact-intro-text{
			text-align: center;
			@include xs{text-align: justify;}
			span{
				color: $main-color;
			}
		}
	}
}



//mail_form------------------------------------------------------------------ここから
#mail_form {
	padding-top: 2rem;
	dl {
		dt {
			margin-top: 0;
			padding-top: 0;
			font-weight: 600;
			&:first-child{
				border-top: none;
			}
			&::before {
				display : inline-block;
				font-size: 90%;
				font-weight: normal;
				line-height : 1;
				margin-right: 1rem;
				padding: 0.4rem 0.5rem;
				border-radius: 3px;
			}
		}
		dt.required::before{
			content: "必須";
			color : #fff;
			background-color: $main-color;
			border: 1px solid $main-color;
		}
		dt.optional::before{
			content: "任意";
			color: $main-color;
			background-color: #fff;
			border: 1px solid $main-color;
		}
		dd {
			margin-bottom: 4rem;
			@include sm{margin-bottom: 3rem;}
			@include xs{margin-bottom: 2rem;}
			&:nth-child(2) {
				margin-top: 0.5rem;
				margin-bottom: 3rem;
			}
			span.error_blank,
			span.error_format,
			span.error_match{
				display : block;
				color : #ff0000;
				margin-top : 3px;
			}
		}
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea {
		width : 100%;
		padding : 0.5rem 1rem;
		border : 1px solid #efefef;
		border-radius : 3px;
		background : #efefef;
		-webkit-appearance : none;
		font-size : 18px;
		font-size : 1.8rem;
		margin-top : 5px;
		&:focus {
			border : 1px solid #efefef;
			background-color: #efefef;
			outline: none;
		}
	}
	input[type="radio"],
	input[type="checkbox"]{
		margin-right : 5px;
		margin-left: 0;
		accent-color: $main-color;
	}
	label {
		margin-right: 2em;
	}
	select{
		font-size : 100%;
		margin-top : 5px;
	}
	input#postal {
		width: 30%;
		&+a {
			display : inline-block;
			padding : 5px 15px;
			margin-left: 0.5rem;
			background : #FDEFF5;
			border : 1px solid #C7000B;
			border-radius : 3px;
			color : #C7000B;
			font-family : inherit;
			text-decoration : none;
			transition: 0.3s;
			&:hover {
				cursor : pointer;
				background : #C7000B;
				color: #fff;
			}
		}
	}
	p#form_submit{
		width : 90%;
		margin : 0 auto;
		padding: 5rem 0 10rem 0;
		@include sm{padding: 3rem 0 7rem 0;}
	}
	input[type="button"]{
		font-weight: 600;
		font-size: 20px;
		font-size: 2rem;
		letter-spacing: 0.06em;
		padding : 1.75rem 6rem;
		vertical-align : middle;
		line-height : 1;
		border: 1px solid $main-color;
		background : $main-color;
		color: #fff;
		-webkit-appearance : none;
		border-radius: 6px;
		transition: 0.3s;
		@include xs {
			letter-spacing: 0;
			padding : 1.4rem 3.5rem;
		}
		&:hover {
			cursor : pointer;
			background : #fff;
			color: $main-color;
		}
	}
//	オートコンプリートの背景色
	input:-webkit-autofill {
		box-shadow: 0 0 0 1000px #efefef inset;
	}
	
	span.loading{
		width : 50px;
		height : 50px;
		border-radius : 50%;
		border-top : 5px solid rgba( 255, 255, 255, 0.2 );
		border-right : 5px solid rgba( 255, 255, 255, 0.2 );
		border-bottom : 5px solid rgba( 255, 255, 255, 0.2 );
		border-left : 5px solid #ffffff;
		-webkit-transform : translateZ( 0 );
		-ms-transform : translateZ( 0 );
		transform : translateZ( 0 );
		-webkit-animation : load-circle 1.0s linear infinite;
		animation : load-circle 1.0s linear infinite;
		position : absolute;
		top : 50%;
		left : 50%;
		margin-top : -25px;
		margin-left : -25px;
	}
	@-webkit-keyframes load-circle{
		0%{
			-webkit-transform : rotate( 0deg );
			transform : rotate( 0deg );
		}
		100%{
			-webkit-transform : rotate( 360deg );
			transform : rotate( 360deg );
		}
	}
	@keyframes load-circle{
		0%{
			-webkit-transform : rotate( 0deg );
			transform : rotate( 0deg );
		}
		100%{
			-webkit-transform : rotate( 360deg );
			transform : rotate( 360deg );
		}
	}
}
//privacy-policy----------------------------------------------
.privacy-policy{
	border: 1px solid #c3c3c3;
    padding: 2.5rem;
    margin-top: 2rem;
    background-color: #fff;
	height: 250px;
    overflow: scroll;
	@include md{height: 220px;}
	@include sm{height: 170px;}
	h4 {
		font-size: 20px;
		font-size: 2rem;
		font-weight: 600;
		margin-bottom: 2rem;
	}
	p{
		text-align: justify;
	}
}

//thanks-box---------------------------------------------------
.thanks-box {
	padding-bottom: 10rem;
	h3 {
		font-size: 30px;
		font-size: 3rem;
		font-weight: 600;
		margin: 6rem 0;
		padding: 0;
		border: none;
	}
	p {
		margin-bottom: 5rem;
	}
	a {
		display: inline-block;
		font-weight: bold;
		padding: 1.4rem 6rem;
		vertical-align: middle;
		line-height: 1;
		border: 1px solid $main-color;
		background: $main-color;
		color: #fff;
		-webkit-appearance: none;
		transition: 0.3s;
		&:hover {
			color: $main-color;
			background-color: #fff;
		}
	}
}

#insta{
	margin-bottom: 10rem;
	@include sm{margin-bottom: 7rem;}
	@include xs{margin-bottom: 5rem;}
	.insta-banner{
		max-width: 550px;
		margin: 0 auto;
		a {
			display: block;
			transition: 0.3s;
			&:hover{
				opacity: 0.6;
			}
			img{
				width: 100%;
				max-width: 640px;
				margin: 0 auto;
				height: auto;
				display: block;
			}
		}
	}
}

#map{
	margin-bottom: 3rem;
	.gmap{
		iframe{
			width: 100%;
			height: 300px;
			@include md{height: 270px;}
			@include sm{height: 250px;}
		}
	}
}

.site-footer {
	color: #333;
	.footer-container {
		padding: 0 2rem;
		.footer-main {
			display: flex;
			justify-content: space-between;
			gap: 4rem;
			@include sm{
				flex-direction: column;
				gap: 2rem;
			}
			.footer-left {
				max-width: 60%;
				@include sm{
					max-width: inherit;
					text-align: center;
				}
				.footer-logo {
					margin-bottom: 1rem;
					img{
						@include xs{
							width: 250px;
							height: 50px;
						}
					}
				}
				.footer-nav {
					margin-bottom: 1rem;
					.footer-nav-list {
						list-style: none;
						padding-left: 0;
						display: flex;
						flex-wrap: wrap;
						@include sm{
							justify-content: center;
						}
						.footer-nav-item{
							position: relative;
							padding: 0 2rem;
							&:hover{
								color: $main-color;
							}
							&:not(:last-child)::after{
								content: "";
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
								width: 1px;
								height: 1.6rem;
								background-color: #666;
							}
							&:first-child{
								padding-left: 0;
							}
							&:last-child{
								padding-right: 0;
							}
						}
					}
				}
				.footer-address {
					font-style: normal;
					line-height: 1.6;
				}
			}
			.footer-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				text-align: right;
				gap: 2.5rem;
				@include sm{
					align-items: center;
				}
				.pagetop-button {
					padding: 2px 24px;
					background: $main-color;
					color: white;
					text-decoration: none;
					border: 1px solid $main-color;
					border-radius: 999px;
					font-weight: 400;
					font-size: 15px;
					transition: all 0.3s ease;
					white-space: nowrap;
					i{
						margin-left: 1rem;
					}
					&:hover,
					&:focus {
						background: #fff;
						color: $main-color;
						outline: none;
					}
				}
				.footer-contact-text {
					font-size: 1.3rem;
					line-height: 1.3rem;
					margin-bottom: 0;
				}
				.footer-phone {
					text-decoration: none;
					color: #333;
					font-weight: 500;
					font-size: 18px;
					transition: color 0.3s ease;
					.footer-phone-number {
						letter-spacing: 0.5px;
						color: $main-color; 
						font-size: 25px;
						font-size: 2.5rem;
						margin-left: 0.5rem;
					}
				}
			}
		}
		.footer-bottom {
			padding: 2.5rem 0 1rem;
			text-align: center;
			.copyright {
				font-size: 1.2rem;
				color: #888;
			}
		}
	}
	a {
		color: inherit;
		text-decoration: none;
		transition: 0.3s;
	}
}