@charset "shift_jis";

/* TOP */
.t_main_wrap {
	position: relative;
	padding-right: clamp(90px, 7vw, 160px);
	width: 100%;
	box-sizing: border-box;
	margin-top: 93px;
	& .main_img {
		width: 100%;
    height: calc(100vh - 80px);
    position: relative;
    box-sizing: border-box;
		background-image: url(../img/top/main_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
		z-index: 10;
		& .main_te {
			position: absolute;
			right: 2vw;
			bottom: 5vw;
			@media (min-width: 800px) and (max-width: 1580px) {
				right: 1vw;
				bottom: 3vw;
			}
			& h2 {
				/* font-size: 70px; */
				font-size: clamp(45px, 5vw, 70px);
				color: #fff;
				line-height: clamp(60px, 7vw, 90px);
				font-weight: 400;
				letter-spacing: 0.05em;
				margin-bottom: 20px;
				text-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2);
        @media (min-width: 800px) and (max-width: 1580px) {
          font-size: clamp(32px, 4.2vw, 56px);
					line-height: clamp(24px, 6.2vw, 70px);
        }
			}
			& p {
				font-size: clamp(14px, 4vw, 20px);
				color: #fff;
				font-weight: 400;
				text-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2);
				@media (min-width: 800px) and (max-width: 1580px) {
					font-size: clamp(12px, 3.5vw, 16px);
				}
			}
		}
	}
	& .scroll_bar {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 5;
		height: 63vh;
		width: clamp(90px, 7vw, 160px);
		text-align: center;
		display: flex;
		align-items: end;
		justify-content: center;
		&::before {
			content: url(../img/top/scroll_bar.webp);
			position: absolute;
			bottom: -90px;
			padding: 0 0 0 8px;
		}
	}
}

@media (min-width: 500px) and (max-width: 1300px) {
.t_main_wrap {
	position: relative;
	padding-right: clamp(90px, 7vw, 160px);
	width: 100%;
	box-sizing: border-box;
	margin-top: 93px;
	& .main_img {
		width: 100%;
		height: 52vw;
    position: relative;
    box-sizing: border-box;
		background-image: url(../img/top/main_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
		z-index: 10;
		& .main_te {
			position: absolute;
			right: 2vw;
			bottom: 5vw;
			@media (min-width: 800px) and (max-width: 1580px) {
				right: 1vw;
				bottom: 3vw;
			}
			& h2 {
				/* font-size: 70px; */
				font-size: clamp(50px, 6vw, 70px);
				color: #fff;
				line-height: clamp(60px, 7vw, 90px);
				font-weight: 400;
				letter-spacing: 0.05em;
				margin-bottom: 20px;
				text-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2);
        @media (min-width: 800px) and (max-width: 1580px) {
          font-size: clamp(32px, 4.2vw, 56px);
					line-height: clamp(24px, 6.2vw, 70px);
        }
			}
			& p {
				font-size: clamp(14px, 4vw, 20px);
				color: #fff;
				font-weight: 400;
				text-shadow: 3px 3px 5px rgb(0, 0, 0, 0.2);
				@media (min-width: 800px) and (max-width: 1580px) {
					font-size: clamp(12px, 3.5vw, 16px);
				}
			}
		}
	}
	& .scroll_bar {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 5;
		height: 63vh;
		width: clamp(90px, 7vw, 160px);
		text-align: center;
		display: flex;
		align-items: end;
		justify-content: center;
		&::before {
			content: url(../img/top/scroll_bar.webp);
			position: absolute;
			bottom: -90px;
			padding: 0 0 0 8px;
		}
	}
}
}

.t_main_menu {
	display: flex;
	margin-top: -110px;
	& .main_menu_buy {
		width: 50vw;
		& a {
			display: flex;
			background: #287b44;
			justify-content: end;
			padding: 170px 0 60px 0;
			position: relative;
			& .buy_in {
				width: 360px;
				text-align: center;
				margin: 0 clamp(0px, 5vw, 90px) 0 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				& p {
					font-size: 40px;
					font-weight: 400;
					color: #fff;
				}
				& span {
					font-size: 18px;
					color: #fff;
					padding: 10px 0 25px 0;
					opacity: 0.5;
				}
				& img {
					transition: .5s;
				}
			}
			&::before {
				content: url(../img/top/buy_image.webp);
				position: absolute;
				top: 150px;
				right: clamp(0px, 23vw, 480px);
			}
			&:hover img {
				transform: translateY(10px);
			}
			&:hover {
				background: #104a24;
			}
		}
	} 
	& .main_menu_sale {
		width: 50vw;
		& a {
			display: flex;
			background: #165f2e;
			justify-content: start;
			padding: 170px 0 60px 0;
			position: relative;
			& .sale_in {
				width: 360px;
				text-align: center;
				margin: 0 0px 0 clamp(50px, 5vw, 90px);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				& p {
					font-size: 40px;
					font-weight: 400;
					color: #fff;
				}
				& span {
					font-size: 18px;
					color: #fff;
					padding: 10px 0 25px 0;
					opacity: 0.5;
				}
				& img {
					transition: .5s;
				}
			}
			&::before {
				content: url(../img/top/sale_image.webp);
				position: absolute;
				top: 140px;
				left: clamp(0px, 23vw, 480px);
			}
			&:hover img {
				transform: translateY(10px);
			}
			&:hover {
				background: #104a24;
			}
		}
	} 
}
.t_all_ti {
	text-align: center;
	& h2 {
		font-size: 45px;
		letter-spacing: 0.05em;
		font-weight: 400;
		position: relative;
		padding: 30px 0 60px 0;
		line-height: 1;
		&::before {
			content: "";
			width: 45px;
			height: 3px;
			background: #287b44;
			position: absolute;
			top: 0px;
			right: 0;
			left: 0;
			margin: 0 auto;
		}
	}
}
.more_btn a {
	width: 270px;
	height: 50px;
	background: #287b44;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	margin: 0 auto;
	color: #fff;
	transition: .3s;
	position: relative;
	&::before {
		content: url(../img/top/more_btn.webp);
		position: absolute;
		right: 18px;
		top: 15px;
	}
	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	}
}

.t_map_wrap {
	width: 100%;
	padding-top: 80px;
    margin-top: -80px;
	position: relative;
	&::before {
		content: "";
    display: block;
    width: calc(100% - 6%);
    height: 1000px;
    background-image: url(../img/top/map_bg.webp);
    position: absolute;
    right: 0;
    top: 0px;
    z-index: -1;
		height:860px;
	}
	& .map_in {
		width: 1200px;
		margin: 0 auto;
		padding: 80px 0 70px 0;
		& .map_con {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: relative;
			overflow: hidden;
			& .map_le {
				width: 231px;
				background: #287b44;
				box-sizing: border-box;
				padding: 50px 0 0 30px;
				height: 495px;
				& p {
					font-size: 20px;
					color: #fff;
					margin: 0 0 20px 0;
					line-height: 1;
				}
				& ul li {
					display: flex;
					align-items: center;
					width: 201px;
					height: 75px;
					background: #176531;
					font-size: 16px;
					font-weight: 600;
					color: #fff;
					margin-bottom: 20px;
					border-radius: 5px 0px 0 5px;
					cursor: pointer;
					& img {
						margin: 0 8px 0 12px;
					}
			}
			& ul li.is-active-tab {
				background: #fff;
				color: #287b44;
			}
		}
			& .map_ri {
				& .map_ri_img.panel{
					display: none;
					transition: .3s;
				}
				& .map_ri_img.panel.is-show{
					display: block;
				}
		}
		& .map_count {
			width: 450px;
			background: #fffccb;
			box-sizing: border-box;
			padding: 15px 20px;
			position: absolute;
			right: 30px;
			bottom: 30px;
			& p {
				font-size: 14px;
				& span {
					font-size: 22px;
					background: linear-gradient(transparent 85%, #ffeb5a 85%);
					color: #9a1616;
					margin: 0 75px 0 0;
					line-height: 1;
				}
			}
			&:hover {
				background: #ffd14b;
			}
			& table {
				/* 1. すべての要素に枠線（ボーダー）を指定 */
				border: 2px solid #b7ac82; 
				border-collapse: collapse;
				margin: 20px 0 0 0;
				text-align: center;
				width: 100%;
				& th, td {
					border: 1px solid #b7ac82;
					padding: 10px 0;
				}
				& th {
					font-size: 15px;
					font-weight: 600;
					color: #333;
				}
				& .red {
					color: #9a1616;
				}
				& td {
					font-size: 25px;
					font-weight: 600;
					color: #333;
					& span {
						font-size: 16px;
					}
				}
			}
		}
	}
}
}
#view_today {
	display: inline-block;
    margin: 0;
    font-size: 14px;
    color: #333;
    background: none;
}
#view_today_login {
	display: inline-block;
    margin: 0;
    font-size: 14px;
    color: #333;
    background: none;
}

.t_new_wrap {
	& .new_in {
		width: 1200px;
		margin: 0 auto;
		padding: 65px 0 80px 0;
		& .new_koukai {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			& li {
				width: 370px;
				background: #f5f5f5;
				box-sizing: border-box;
				overflow: hidden;
				& a:hover img {
					transform: scale(1.1)
				}
				& .new_img_t {
					width: 100%;
					height: 220px;
					overflow: hidden;
					& img {
						width: 100%;
						height: 220px;
						object-fit: cover;
						transition: .3s;
					}
				}
				& .new_te_con {
					padding: 20px;
					& .new_ne {
						font-size: 18px;
						color: #e33b2a;
						font-weight: 600;
						display: flex;
						align-items: end;
						& .syubetu {
							color: #fff;
							background: #287b44;
							font-size: 14px;
							font-weight: 500;
							display: inline-block;
							padding: 8px 12px;
							margin-right: 15px;
						}
						& .kakaku_te {
							font-size: 26px;
						}
					}
				}
				& h3 {
					font-size: 19px;
					margin: 15px 0;
				}
				& .new_te {
					font-size: 16px;
					line-height: 24px;
				}
				& .new_me {
					padding: 15px 20px;
					background: #fff;
					margin-top: 15px;

					& p {
						font-size: 17px;
						line-height: 24px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
				
			}
		}
		& .new_kaiin {
			display: flex;
			justify-content: space-between;
			margin: 50px 0 60px 0;
			& li {
				width: 370px;
				background: #f5f5f5;
				box-sizing: border-box;
				overflow: hidden;
				& a:hover img {
					transform: scale(1.1)
				}
				& .new_img_t {
					width: 100%;
					height: 220px;
					overflow: hidden;
					& img {
						width: 100%;
						height: 220px;
						object-fit: cover;
						transition: .3s;
					}
				}
				& .new_te_con {
					padding: 20px;
					& .new_ne {
						font-size: 18px;
						color: #e33b2a;
						font-weight: 600;
						display: flex;
						align-items: end;
						& .syubetu {
							color: #fff;
							background: #287b44;
							font-size: 14px;
							font-weight: 500;
							display: inline-block;
							padding: 8px 12px;
							margin-right: 15px;
						}
						& .kakaku_te {
							font-size: 26px;
						}
					}
				}
				& h3 {
					font-size: 19px;
					margin: 15px 0;
				}
				& .new_te {
					font-size: 16px;
					line-height: 24px;
				}
				& .new_me {
					padding: 15px 20px;
					background: #fff;
					margin-top: 15px;

					& p {
						font-size: 17px;
						line-height: 24px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
				
			}
		}
		& .new_kaiin_out {
			display: flex;
			justify-content: space-between;
			margin: 50px 0 60px 0;
			& li {
				width: 370px;
				background: #f5f5f5;
				box-sizing: border-box;
				overflow: hidden;
				& img {
					width: 370px;
          object-fit: cover;
					transition: .3s;
					overflow: hidden;
				}
				& .new_te_con {
					padding: 20px;
					& .new_ne {
						font-size: 18px;
						color: #e33b2a;
						font-weight: 600;
						display: flex;
						align-items: end;
						& .syubetu {
							color: #fff;
							background: #287b44;
							font-size: 14px;
							font-weight: 500;
							display: inline-block;
							padding: 8px 12px;
							margin-right: 15px;
						}
						& .kakaku_te {
							font-size: 26px;
						}
					}
				}
				& h3 {
					font-size: 19px;
					margin: 15px 0;
				}
				& .new_te {
					font-size: 16px;
					line-height: 24px;
				}
				& .new_me {
					padding: 15px 20px;
					background: #fff;
					margin-top: 15px;

					& p {
						font-size: 17px;
						line-height: 24px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
				
			}
		}
	}
}

.t_recommend_wrap {
	& .recommend_in {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding: 0 0 90px 0;
		& .rec_con {
			width: 570px;
			& h2 {
				font-size: 45px;
				font-weight: 400;
				letter-spacing: 0.05em;
				padding: 35px 0 60px 0;
				line-height: 1;
				position: relative;
				& span {
					font-size: 20px;
					color: #287b44;
					padding: 0 0 0 30px;
					display: inline-block;
				}
				&::before {
					content: "";
					width: 45px;
					height: 3px;
					background: #287b44;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			& ul li a{
				margin-bottom: 30px;
				display: flex;
				overflow: hidden;
				&:hover img {
					transform: scale(1.1)
				}
				& .rec_img {
					width: 200px;
          object-fit: cover;
					overflow: hidden;
					& img {
						width: 200px;
						height: 170px;
						object-fit: cover;
						transition: .3s;
					}

				} 
				& .rec_te_con {
					background: #f5f5f5;
					width: 370px;
					padding: 23px 0 20px 25px;
					box-sizing: border-box;
					& .rec_ne {
						font-size: 18px;
						color: #e33b2a;
						font-weight: 600;
						display: flex;
						align-items: end;
						& .syubetu {
							color: #fff;
							background: #287b44;
							font-size: 14px;
							font-weight: 500;
							display: inline-block;
							padding: 8px 12px;
							margin-right: 15px;
						}
						& .kakaku_te {
							font-size: 26px;
						}
					}
					& h3 {
						font-size: 19px;
						margin: 15px 0;
					}
					& .rec_te {
						font-size: 16px;
						line-height: 24px;
					}
				}
			}
			& ul li:last-child {
				margin-bottom: 60px;
		}
	}
}
}

.t_search_wrap {
	position: relative;
	& .search_in {
		width: 1200px;
		margin: 0 auto 130px auto;
		display: flex;
		justify-content: space-between;
		padding: 70px 0 0 0;
		& .sea_le {
			width: 425px;
			& h2 {
				font-size: 45px;
				font-weight: 400;
				letter-spacing: 0.05em;
				padding: 35px 0 50px 0;
				line-height: 1;
				position: relative;
				&::before {
					content: "";
					width: 45px;
					height: 3px;
					background: #287b44;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			& .sea_menu_le {
				padding: 80px 0 0 0;
				& .sea_a li {
					border-bottom: solid 1px rgb(255, 255, 255, 0.3);
					position: relative;
					&::before {
						content: "";
						width: 16px;
						height: 1px;
						background: #fff;
						position: absolute;
						top: 46px;
						right: 20px;
					}
					&::after {
						content: "";
						border-left: 4px solid transparent;
						border-bottom: 6px solid #fff;
						height: 0;
						width: 0;
						transform: rotate(90deg);
						position: absolute;
						top: 42px;
						right: 20px;
					}
					& a {
						display: flex;
						align-items: center;
						padding: 15px 0 15px 0;
						gap: 0 20px;
						font-size: 19px;
						font-weight: 500;
						color: #fff;
						margin: 5px 0 0 0;
						position: relative;
						&::before {
							content: "";
							width: 100%;
							height: 2px;
							background: #fff;
							transform: scale(0.5, 1);
  transform-origin: left top;
  transition: .5s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
							position: absolute;
							bottom: -1px;
							left: 0;
						}
						&:hover {
							&::before {
								width: 425px;
								transform: scale(1, 1);
							}
						} 
					}
				}
				& .sea_b {
					padding-top: 60px;
					& p {
						font-size: 20px;
						letter-spacing: 0.02em;
						color: #fff;
						display: flex;
						align-items: center;
						& img {
							margin: 0 10px 0 0;
						}
					}
					& ul {
						margin: 20px 0 30px 0;
						display: flex;
						justify-content: space-between;
						& li a {
							width: 195px;
							height: 80px;
							box-sizing: border-box;
							background: #176531;
							color: #fff;
							display: flex;
							align-items: center;
							font-size: 19px;
							padding: 0 0 0 40px;
							transition: .3s;
							position: relative;
							&::before {
								content: url(../img/top/more_btn.webp);
								position: absolute;
								right: 18px;
								top: 28px;
							}
							&:hover {
								transform: translateY(-5px);
								box-shadow: 0 0 5px rgb(0 0 0 / 20%);
							}
						}
					}
				}
				& .sea_c {
					& p {
						font-size: 20px;
						color: #fff;
						padding: 0 0 0 21px;
						line-height: 1;
						position: relative;
						&::before {
							content: "";
							width: 14px;
							height: 14px;
							border-radius: 7px;
							background: #fff;
							position: absolute;
							top: 3px;
							left: 0;
						}
					}
					& .buy_sea_keyword {
						padding: 20px 0 0 0;
					}

					.buy_sea_keyword .search_space {
							display: flex;
							align-items: center;
							justify-content: space-between;
					}
					
					.buy_sea_keyword .search_window {
							width: 350px;
							height: 55px;
							background: #fff;
							box-sizing: border-box;
							padding: 0 20px;
							border: 1px solid #ccc;
							font-size: 17px;
							/* border-radius: 5px; */
							color: #333;
							box-shadow: inset 4px 4px 10px rgb(71 71 71 / 15%);
							margin: 0 10px 0 0;
					}
					.search_window::placeholder {
						/* プレースホルダーのテキストの色を指定 */
						color: #b6b5b5;
					}
					
					.buy_sea_keyword .free_btn {
							border: none;
							cursor: pointer;
							padding: 0;
							background: none;
					}
					
					.buy_sea_keyword .free_btn img {
							transition: .3s;
					}
					
					.buy_sea_keyword .free_btn img:hover {
							opacity: .8;
					}
				}
			}
		}
		& .sea_ri {
			width:550px;
			margin: 55px 0 0 0;
			& .sea_syu,.sea_price {
				margin-bottom: 40px;
			}
			& .sea_syu p,.sea_price p {
				font-size: 20px;
				padding: 0 0 0 21px;
				line-height: 1;
				position: relative;
				&::before {
					content: "";
					width: 14px;
					height: 14px;
					border-radius: 7px;
					background: #287b44;
					position: absolute;
					top: 3px;
					left: 0;
				}
			}
			& .sea_syu ul {
				display: flex;
				justify-content: space-between;
				margin-top: 25px;
				& li a {
					text-align: center;
					width: 100%;
					display: flex;
					flex-direction: column;
					font-size: 15px;
					font-weight: 600;
					transition: .3s;
					padding-bottom: 10px;
					& img {
						margin: 0 0 10px 0;
					}
					&:hover {
						transform: translateY(-5px);
						box-shadow: 0 0 5px rgb(0 0 0 / 20%);
					}
				}
			}
			& .sea_price ul {
				margin-top: 20px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 15px 0;
				& li a {
					width: 170px;
					height: 45px;
					background: #fff;
					border: solid 1px #ccc;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16px;
					font-weight: 500;
					transition: .3s;
					&:hover {
						transform: translateY(-5px);
						box-shadow: 0 0 5px rgb(0 0 0 / 5%);
					}
				}
			}
			& .sea_bnr a img {
				margin-bottom: 35px;
				transition: .3s;
			}
			& .sea_bnr a {
				transition: .3s;
				&:hover img {
					transform: translateY(-5px);
					box-shadow: 0 0 5px rgb(0 0 0 / 20%);
				}
			}
		}
	}
	&::before {
		content: "";
    display: block;
    width: calc(100% - 55%);
    height: 1000px;
    background-image: url(../img/top/search_le_bg.webp);
    position: absolute;
    left: 0;
    top: 200px;
    z-index: -1;
		height: 834px;
	}
	&::after {
		content: "";
    display: block;
    width: calc(100% - 30%);
    height: 1000px;
    background-image: url(../img/top/search_ri_bg.webp);
    position: absolute;
    right: 0;
    top: 0px;
    z-index: -2;
		height: 896px;
	}
}

.t_mem_wrap {
	width: 100%;
	background: linear-gradient(to right, #deece4, #eef5f1);
	& .mem_in {
		width: 1200px;
		margin: 0 auto;
		padding-top: 100px;
		position: relative;
		& h2 {
			font-size: 45px;
			font-weight: 600;
			color: #024439;
			text-align: center;
			border-bottom: solid 2px #075749;
			padding: 0 0 10px 0;
			line-height: 1;
			margin: 0px auto 0 auto;
			width: 350px;
			position: absolute;
			top: -30px;
			right: 0;
			left: 0;
		}
		& .mem_me {
			font-size: 40px;
			color: #024439;
			font-weight: 600;
			letter-spacing: 0.05em;
			display: flex; /* Flexboxを有効にする */
  		align-items: flex-end; /* 子要素（テキストなど）をコンテナの下端に揃える */
			justify-content: center;
			position: relative;
			&::before {
				content: url(../img/top/mem_te_le.webp);
				position: absolute;
				top: 0;
				left: 130px;
			}
			&::after {
				content: url(../img/top/mem_te_ri.webp);
				position: absolute;
				top: 0;
				right: 120px;
			}
			& .min {
				font-size: 30px;
			}
			& .dot {
				position: relative;
				&::before {
					content: "";
					width: 8px;
					height: 8px;
					border-radius: 4px;
					background: #024439;
					position: absolute;
					top: -10px;
					right: 19px;
				}
			}
			& img {
				margin: 0 5px;
			}
		}
		& .mem_con {
			display: flex;
			justify-content: space-between;
			padding: 90px 0;
      align-items: flex-end;
			& .mem_point {
				width: 570px;
				& li {
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 20px 25px 20px 25px;
					background: #fff;
					border-bottom: solid 1px #287b44;
					& p {
						font-size: 20px;
						font-weight: 600;
						display: flex;
						align-items: center;
						line-height: 1.3;
						& span {
							background: linear-gradient(transparent 80%, #ffeb5a 80%);
						}
						& img {
							margin-right: 15px;
						}
					}
					& div {
						display: flex;
						align-items: center;
						& p {
							display: block;
							line-height: 1.5;
						}
						& img {
							margin-right: 15px;
						}
					}
				}
			}
			& .mem_bukken {
				width: 560px;
				position: relative;
				&::before {
					content: url(../img/top/mem_irast.webp);
					position: absolute;
					top: -255px;
					right: 130px;
				}
				& .kaiin_suu {
					background: #fff;
					box-sizing: border-box;
					padding: 25px 30px;
					margin-bottom: 25px;
					& p {
						font-size: 23px;
						color: #024439;
						font-weight: 600;
						letter-spacing: 0.05em;
						text-align: center;
						& span {
							color: #9a1616;
						}
					}
					& ul {
						display: flex;
						justify-content: space-between;
						margin-top: 20px;
						& li {
							font-size: 38px;
							font-weight: 600;
							display: flex;
							align-items: flex-end;
							& .green {
								font-size: 16px;
								color: #287b44;
								letter-spacing: 0.05em;
								padding: 7px 10px;
								background: #e5f0e9;
								margin-right: 10px;
							}
							& .red {
								font-size: 16px;
								color: #9a1616;
								letter-spacing: 0.05em;
								padding: 7px 10px;
								background: rgb(154, 22, 22, 0.1);
								margin-right: 10px;
							}
							& .min {
								font-size: 22px;
								margin-left: 5px;
							}
						}
					}
				}
				& .kaiin_btn {
					display: flex;
					justify-content: space-between;
					& a {
						width: 270px;
						height: 50px;
						border-radius: 25px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16px;
						font-weight: 600;
						position: relative;
					}
					& .gr {
						background: #287b44;
						color: #fff;
						transition: .3s;
						&:hover {
							transform: translateY(-5px);
							box-shadow: 0 0 5px rgb(0 0 0 / 20%);
						}
						&::before {
							content: url(../img/top/more_btn.webp);
							position: absolute;
							right: 18px;
							top: 15px;
						}
					}
					& .wh {
						background: #fff;
						transition: .3s;
						&:hover {
							transform: translateY(-5px);
							box-shadow: 0 0 5px rgb(0 0 0 / 20%);
						}
						&::before {
							content: url(../img/top/more_btn_gray.webp);
							position: absolute;
							right: 18px;
							top: 15px;
						}
					}
				}

			}
		}
	}
}

.t_sale_wrap {
	padding-top: 80px;
    margin-top: -80px;
	& .sale_con {
		width: 100%;
		position: relative;
		& .sale_con_in {
			width: 1200px;
			margin: clamp(100px, 7vw, 165px) auto 0 auto;
			& h2 {
				font-size: 45px;
				font-weight: 400;
				letter-spacing: 0.05em;
				padding: 35px 0 50px 0;
				line-height: 1;
				position: relative;
				&::before {
					content: "";
					width: 45px;
					height: 3px;
					background: #287b44;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			& .con_te {
				width: 580px;
				& .con_mess {
					font-size: 30px;
					color: #287b44;
					line-height: 42px;
					letter-spacing: 0.05em;
				}
				& .con_text {
					font-size: 17px;
					line-height: 32px;
					font-weight: 400;
					margin: 30px 0;
				}
				& a {
					&:hover img {
							transform: translateY(-5px);
							box-shadow: 0 0 5px rgb(0 0 0 / 20%);
					}
				}
				& a img{
					transition: .3s;
				}
			}
			& ul {
				display: flex;
				justify-content: space-between;
				margin: 40px 0 0 0;
				width: 560px;
				flex-wrap: wrap;
				gap: 20px;
				& li a {
					width: 270px;
					height: 80px;
					display: flex;
					align-items: center;
					background: #fff;
					font-size: 17px;
					font-weight: 600;
					transition: .3s;
					position: relative;
					& img {
						margin: 0 15px;
					}
					&::before {
						content: "";
						width: 16px;
						height: 1px;
						background: #287b44;
						position: absolute;
						top: 40px;
						right: 20px;
					}
					&::after {
						content: "";
						border-left: 4px solid transparent;
						border-bottom: 6px solid #287b44;
						height: 0;
						width: 0;
						transform: rotate(90deg);
						position: absolute;
						top: 36px;
						right: 20px;
					}
					&:hover {
							transform: translateY(-5px);
							box-shadow: 0 0 5px rgb(0 0 0 / 20%);
					}
				}
				& li:nth-child(1) a {
					color: #fff;
					background: #287b44;
					&::before {
						content: none;
					}
				}
			}
		}
		&::before {
			content: "";
			position: absolute;
			right: 0;
			bottom: clamp(0px, 10vw, 60px);
			width: 45vw;
      max-width: 920px;
      height: 35vw;
			max-height: 560px;
			background-repeat: no-repeat;
			background-size: cover;
			background-image: url(../img/top/sale_main_img.webp);
		}
		&::after {
			content: "";
			position: absolute;
			left: 0;
			top: 50px;
			width: clamp(0px, 92vw, 1800px);
      height: 915px;
			background: #eaf2ec;
			z-index: -5;
		}
	}
	& .sale_strong {
		width: 100%;
		position: relative;
		margin: 50px 0 0 0;
		&::before {
			content: "";
			width: 40%;
			height: 425px;
			background: #fff;
			position: absolute;
			top: 0;
			right: 0;
			z-index: -1;

		}
		& .strong_in {
			width: 1200px;
			margin:  0 auto;
			display: flex;
			padding: 60px 0;
			justify-content: space-between;
			background: #fff;
			& h3 {
				width: 150px;
				display: flex;
				justify-content: center;
				align-items: center;
				writing-mode: vertical-rl;
				font-size: 40px;
				color: #287b44;
				font-weight: 400;
			}
			& ul {
				width: 1050px;
				display: flex;
				justify-content: space-between;
				& li {
					width: 305px;
					display: flex;
					flex-direction: column;
					align-items: center;
					& h4 {
						font-size: 21px;
						font-weight: 400;
						margin: 15px 0;
					}
					& p {
						font-size: 16px;
						line-height: 27px;
						letter-spacing: 0.05em;
						margin-top: 15px;
					}
				}
				& li:nth-child(3) {
					& h4 {
						font-size: 19px;
					}
			}
		}
	}
	}
	& .sale_bot {
		width: 100%;
		position: relative;
		&::before {
			content: "";
			width: 95%;
			max-width:1750px; 
			height: 567px;
			background-image: url(../img/top/sale_bg.webp);
			background-size: cover;
			background-repeat: no-repeat;
			position: absolute;
			top: -232px;
			right: 0;
			z-index: -2;
		}
		& .sale_bot_in {
			width: 1200px;
			margin: 0 auto;
			& p {
				text-align: center;
				font-size: 30px;
				letter-spacing: 0.05em;
				color: #fff;
				margin: 50px 0;
			}
			& ul {
				display: flex;
				justify-content: space-between;
				& li a {
					width: 165px;
					height: 150px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 23px;
					font-weight: 400;
					text-align: center;
					flex-direction: column;
          gap: 6px 0;
					transition: .3s;
					position: relative;
					& span {
						font-size: 14px;
						font-weight: 300;
						letter-spacing: 0.05em;
					}
					&:hover {
						transform: translateY(-5px);
						box-shadow: 0 0 5px rgb(0 0 0 / 20%);
					}
					/* &::before {
						content: url(../img/top/more_btn_green.webp);
						position: absolute;
						right: 15px;
						bottom: 15px;
					} */
				}
				& li:nth-child(1) a {
					background-image: url(../img/top/ninbai_bg.webp);
				}
				& li:nth-child(2) a {
					background-image: url(../img/top/kaitori_bg.webp);
				}
				& li:nth-child(3) a {
					background-image: url(../img/top/rikon_bg.webp);
				}
				& li:nth-child(4) a {
					background-image: url(../img/top/sumikae_bg.webp);
				}
				& li:nth-child(5) a {
					background-image: url(../img/top/akiya_bg.webp);
				}
				& li:nth-child(6) a {
					background-image: url(../img/top/souzoku_bg.webp);
				}
			}

			
		}
		
	}
}

.t_staff_wrap {
	& .staff_in {
		padding: 165px 0 70px 0;
		width: 1200px;
		max-width: 1400px;
		margin: 0 auto;
		& iframe {
			width: 100%;
			height: 330px;
			margin-bottom: 60px;
			
		}
	}
}





.t_voice_wrap {
	& .voice_in {
		width: 1200px;
		margin: 0 auto 80px auto;
		display: flex;
		& img {
			width: 628px;
		}
		& .voice_te {
			background-image: url(../img/top/voice_bg.webp);
			background-repeat: no-repeat;
			background-size: cover;
			width: 574px;
			height: 400px;
			box-sizing: border-box;
			padding: 70px 0 0 90px;
			& h2 {
				font-size: 45px;
				line-height: 1;
				font-weight: 400;
				padding: 30px 0;
				color: #fff;
				position: relative;
				&::before {
					content: "";
					width: 45px;
					height: 3px;
					background: #fff;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			& p {
				font-size: 17px;
				color: #fff;
				line-height: 32px;
				letter-spacing: 0.05em;
				margin-bottom: 30px;
			}
			& a {
				width: 270px;
				height: 50px;
				background: #fff;
				border-radius: 25px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				font-weight: 600;
				transition: .3s;
				position: relative;
				&::before {
					content: url(../img/top/more_btn_white.webp);
					position: absolute;
					right: 18px;
					top: 15px;
				}
				&:hover {
					transform: translateY(-5px);
					box-shadow: 0 0 5px rgb(0 0 0 / 20%);
				}
			}
		}
	}
}

.t_about_wrap {
	width: 100%;
	background-image: url(../img/top/about_bg.webp);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	height: 380px;
	margin-bottom: 250px;
	& .about_in {
		width: 1200px;
		padding: 150px 0 0 0;
		margin: 0 auto;
		& h2 {
			font-size: 45px;
			font-weight: 400;
			margin: 0px 0 90px 0;
			letter-spacing: 0.05em;
			line-height: 1;
			color: #fff;
			text-align: center;
			position: relative;
			&::before {
				content: "";
				width: 45px;
				height: 3px;
				background: #287b44;
				position: absolute;
				top: -50px;
				right: 0;
				left: 0;
				margin: 0 auto;
			}
		}
		& ul {
			display: flex;
			justify-content: space-between;
			& li a {
				width: 270px;
				height: 270px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30px;
				transition: .3s;
				position: relative;
				&::before {
					content: url(../img/top/more_btn_green.webp);
					position: absolute;
					right: 15px;
					bottom: 12px;
				}
				&:hover {
					transform: translateY(-5px);
					box-shadow: 0 0 5px rgb(0 0 0 / 20%);
				}
			}
			& li:nth-child(1) a {
				background-image: url(../img/top/commpany_bg.webp);
			}
			& li:nth-child(2) a {
				background-image: url(../img/top/staff_bg.webp);
			}
			& li:nth-child(3) a {
				background-image: url(../img/top/voices_bg.webp);
			}
			& li:nth-child(4) a {
				background-image: url(../img/top/access_bg.webp);
			}
		}
	}
}

.t_shop_wrap {
	width: 100%;
	position: relative;
	margin-bottom: 70px;
	&::before {
		content: "";
		position: absolute;
		right: 0;
		top: 50px;
		width: clamp(0px, 92vw, 1830px);
		height: 517px;
		background: #eaf2ec;
		z-index: -5;
	}
	& .shop_in {
		width: 1200px;
		margin: 0 auto;
		& h2 {
			font-size: 45px;
			font-weight: 400;
			letter-spacing: 0.05em;
			padding: 35px 0 100px 0;
			line-height: 1;
			position: relative;
			&::before {
				content: "";
				width: 45px;
				height: 3px;
				background: #287b44;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		& ul {
			display: flex;
			justify-content: space-between;
			& li {
				width: 570px;
				border-bottom: solid 1px #ccc;
				& div {
					display: flex;
					margin-bottom: 30px;
					align-items: center;
					& h3 {
						font-size: 35px;
						font-weight: 400;
						margin-right: 30px;
					}
					& a {
						font-size: 27px;
						letter-spacing: -0.02em;
						& img {
							margin: 0 5px 3px 0;
						}
					}
				}
				& p {
					font-size: 20px;
					line-height: 28px;
					margin-bottom: 30px;
					& img {
						margin: 0 0px 7px 5px;
					}
				}
			}
	}
	& .shop_btn {
		margin: 50px auto 0 auto;
		width: 590px;
		display: flex;
		justify-content: space-between;
		& .inq {
			width: 270px;
			height: 50px;
			box-sizing: border-box;
			border-radius: 25px;
			background: #287b44;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 600;
			transition: .3s;
			position: relative;
			&::before {
				content: url(../img/top/more_btn.webp);
        position: absolute;
        right: 18px;
        top: 15px;
			}
			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 0 5px rgb(0 0 0 / 20%);
			}
	}
	& .raiten {
		width: 270px;
		height: 50px;
		box-sizing: border-box;
		border-radius: 25px;
		border: solid 1px #287b44;
		color: #287b44;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 600;
		transition: .3s;
		position: relative;
		&::before {
			content: url(../img/top/more_btn_white.webp);
			position: absolute;
			right: 18px;
			top: 15px;
		}
		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 0 5px rgb(0 0 0 / 20%);
		}
	}
}
}
}

.t_inst_wrap {
	& .inst_in {
		width: 1200px;
		margin: 0 auto;
		& .inst_con {
			box-sizing: border-box;
			padding: 50px;
			background: #f5f5f5;
			position: relative;
			/* & iframe {
				width: 100% !important;
				height:440px !important;
			} */
			& a {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				
			}
			
		}
		& h2 {
			font-size: 45px;
			letter-spacing: 0.05em;
			line-height: 1;
			text-align: center;
			position: relative;
			font-weight: 400;
			margin: 170px 0 70px 0;
			&::before {
				content: url(../img/top/insta_icon.webp);
				position: absolute;
				top: 0px;
				right: 430px;
			}
		}
	}
}

.t_info_wrap {
	padding: 70px 0 0 0;
	& iframe {
		width: 1200px;
		margin: 0 auto;
		height: 210px;
		display: block;
	}

	& .more_btn {
		margin: 50px auto 80px auto;
	}

	
}


/* /TOP */