@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#main {
	height: 100vh;
}
	.main--inner {
		width: 100%;
		height: 100%;
	}
		.swiper-container {
			width: 100%;
			height: 100%;
		}
			.slide-image {
				width: 100%;
				height: 100%;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
			}
			.slide-image01 {
				background-image: url(../image/index/main-image01.jpg);
			}
			.slide-image02 {
				background-image: url(../image/index/main-image02.jpg);				
			}
			.slide-image03 {
				background-image: url(../image/index/main-image03.jpg);
			}
			.slide-image04 {
				background-image: url(../image/index/main-image04.jpg);
			}
			.slide-image05 {
				background-image: url(../image/index/main-image05.jpg);
			}

#about {

}
	.about--inner {
		width: 90%;
		max-width: 900px;
		padding: 60px 0px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.about-txt {
			width: auto;
			font-size: 15px;
			line-height: 2.0;
			letter-spacing: 0.1em;
		}
		.about-image {
			width: 320px;
		}
			.about-image img {
				width: 100%;
				height: auto;
			}

#shop {

}
	.shop--inner {
		width: 90%;
		max-width: 900px;
		padding: 0px 0px 100px;
		margin: auto auto;
	}
		.top-shop-list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.top-shop-list:before {
			content: '';
			display: block;
			width: 210px;
			order: 1;
		}
		.top-shop-list:after {
			content: '';
			display: block;
			width: 210px;
		}
			.top-shop-item {
				width: 210px;
				height: 210px;
				margin-bottom: 30px;
				border-radius: 50%;
				overflow: hidden;
			}
			.top-shop-item:nth-last-of-type(-n+4) {
				margin-bottom: 0px;
			}
				.top-shop-item a {
					width: 100%;
					height: 100%;
					padding-top: 5px;
					padding-left: 0.15em;
					border-radius: 50%;
					font-size: 16px;
					line-height: 1.5;
					text-align: center;
					transition: .3s;
					-webkit-transition: .3s;
					color: #231815;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 2;
				}
				.top-shop-item a:hover {
					letter-spacing: 0.15em;
					color: #ffffff;
				}
					.top-shop-item a:before {
						content: '';
						display: block;
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						position: absolute;
						top: 0;
						left: 0;
						transition: .3s;
						-webkit-transition: .3s;
						opacity: .5;
						z-index: -2;
						pointer-events: none;
					}
					.top-shop-item a:hover:before {
						opacity: 1;
					}
					.succulents-cacti:before {
						background-image: url(../image/index/taniku.png);
					}
					.bromelia:before {
						background-image: url(../image/index/buromeria.png);
					}
					.aussie_plants-trees:before {
						background-image: url(../image/index/jumoku.png);
					}
					.rose:before {
						background-image: url(../image/index/bara.png);
					}
					.perennial:before {
						background-image: url(../image/index/tanen.png);
					}
					.foliage_plant:before {
						background-image: url(../image/index/kanyo.png);
					}
					.pots-goods:before {
						background-image: url(../image/index/zakka.png);
					}
					.bulbs:before {
						background-image: url(../image/index/kyukon.png);
					}
					.top-shop-item a:after {
						content: '';
						width: 100%;
						height: 100%;
						background-color: #811A39;
						opacity: .0;
						position: absolute;
						top: 0;
						left: 0;
						transition: .3s;
						-webkit-transition: .3s;
						z-index: -1;
						pointer-events: none;
					}
					.top-shop-item a:hover:after {
						opacity: .4;
					}

#blog {

}
	.blog--inner {
		width: 90%;
		max-width: 900px;
		padding: 0px 0px 100px;
		margin: auto auto;
	}
		.blog-link {
			width: 100%;
			height: 300px;
		}
			.blog-link a {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				position: relative;
			}
			.blog-link a:before {
				content: 'Blog';
				width: 100%;
				position: absolute;
				top: 50%;
				transform: translate(0%,-50%);
				-webkit-transform: translate(0%,-50%);
				font-size: 24px;
				font-weight: 700;
				line-height: 1.0;
				color: #ffffff;
				text-align: center;
				transition: .5s .0s;
				-webkit-transition: .5s .0s;
				opacity: 0;
				z-index: 2;
				pointer-events: none;
			}
			.blog-link a:after {
				content: '';
				width: 100%;
				height: 100%;
				background-color: #811A39;
				opacity: .0;
				position: absolute;
				top: 0;
				left: 0;
				transition: .5s;
				-webkit-transition: .5s;
				z-index: 1;
				pointer-events: none;
			}
			.blog-link a:hover:before {
				opacity: 1;
				letter-spacing: .2em;
				transition: .5s .2s;
				-webkit-transition: .5s .2s;
			}
			.blog-link a:hover:after {
				opacity: .2;
			}
				.blog-link a img {
					width: 100%;
					height: auto;
					transition: .5s;
					-webkit-transition: .5s;
				}
				.blog-link a:hover img {
					transform: scale(1.03,1.03);
					-webkit-transform: scale(1.03,1.03);
				}

#address {

}
	.address--inner {
		width: 90%;
		max-width: 900px;
		padding: 0px 0px;
		margin: auto auto;
	}
		.address-contents {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
		}
			.address-map {
				width: 53%;
				height: auto;
			}
				.address-map iframe {
					width: 100%;
					height: 100%;
				}

			.address-details {
				width: auto;
			}
				.address-logo {
					width: 115px;
					height: auto;
					margin-bottom: 15px;
				}
					.address-logo img {
						width: 100%;
						height: auto;
					}
				.address-tel {
					width: auto;
					margin-bottom: 15px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
					.address-tel_heading {
						margin-right: 10px;
						font-size: 10px;
						line-height: 1.2;
					}
					.address-tel_number {
						font-size: 28px;
						font-weight: 600;
						line-height: 1.0;
						letter-spacing: 0.1em;
					}
				.address-details-txt {
					margin-bottom: 10px;
					font-size: 14px;
					line-height: 1.6;
				}
					.address-details-txt small {
						font-size: 12px;
					}
				.address-details-image {
					width: 325px;
					height: auto;
				}
					.address-details-image img {
						width: 100%;
						height: auto;
					}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
#main {
	height: 360px;
}
	.main--inner {
		width: 100%;
		height: 100%;
	}
		.swiper-container {
			width: 100%;
			height: 100%;
		}
			.slide-image {
				width: 100%;
				height: 100%;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
			}
			.slide-image01 {
				background-image: url(../image/index/main-image01.jpg);
			}
			.slide-image02 {
				background-image: url(../image/index/main-image02.jpg);				
			}
			.slide-image03 {
				background-image: url(../image/index/main-image03.jpg);
			}
			.slide-image04 {
				background-image: url(../image/index/main-image04.jpg);
			}
			.slide-image05 {
				background-image: url(../image/index/main-image05.jpg);
			}

#about {

}
	.about--inner {
		width: 90%;
		padding: 40px 0px;
		margin: auto auto;
	}
		.about-txt {
			width: auto;
			font-size: 15px;
			line-height: 2.0;
			letter-spacing: 0.08em;
			font-feature-settings : "palt";
		}
		.about-image {
			display: none;
		}

#shop {

}
	.shop--inner {
		width: 90%;
		padding: 0px 0px 60px;
		margin: auto auto;
	}
		.top-shop-list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.top-shop-list:before {
			content: '';
			display: block;
			width: 23.5%;
			order: 1;
		}
		.top-shop-list:after {
			content: '';
			display: block;
			width: 23.5%;
		}
			.top-shop-item {
				width: 23.5%;
				margin-bottom: 10px;
				position: relative;
				border-radius: 50%;
				overflow: hidden;
			}
			.top-shop-item:before {
				content: '';
				display: block;
				width: 100%;
				padding-top: 100%;
			}
			.top-shop-item:nth-last-of-type(-n+4) {
				margin-bottom: 0px;
			}
				.top-shop-item a {
					width: 100%;
					height: 100%;
					padding-top: 5px;
					padding-left: 0.15em;
					border-radius: 50%;
					font-size: 16px;
					line-height: 1.5;
					text-align: center;
					transition: .3s;
					-webkit-transition: .3s;
					color: #231815;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}
					.top-shop-item a:before {
						content: '';
						display: block;
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						position: absolute;
						top: 0;
						left: 0;
						transition: .3s;
						-webkit-transition: .3s;
						opacity: .5;
						z-index: -1;
						pointer-events: none;
					}
					.succulents-cacti:before {
						background-image: url(../image/index/taniku.png);
					}
					.bromelia:before {
						background-image: url(../image/index/buromeria.png);
					}
					.aussie_plants-trees:before {
						background-image: url(../image/index/jumoku.png);
					}
					.rose:before {
						background-image: url(../image/index/bara.png);
					}
					.perennial:before {
						background-image: url(../image/index/tanen.png);
					}
					.foliage_plant:before {
						background-image: url(../image/index/kanyo.png);
					}
					.pots-goods:before {
						background-image: url(../image/index/zakka.png);
					}
					.bulbs:before {
						background-image: url(../image/index/kyukon.png);
					}

#blog {

}
	.blog--inner {
		width: 90%;
		padding: 0px 0px 60px;
		margin: auto auto;
	}
		.blog-link {
			width: 100%;
			height: auto;
		}
			.blog-link a {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}
				.blog-link a img {
					width: 120%;
					height: auto;
				}

#address {

}
	.address--inner {
		width: 90%;
		padding: 0px 0px;
		margin: auto auto;
	}
		.address-contents {
			width: 100%;
			display: flex;
			flex-direction: column-reverse;
			justify-content: flex-start;
			align-items: flex-start;
		}
			.address-details {
				width: 100%;
				margin: auto auto 20px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}
				.address-details-image {
					width: 100%;
					height: auto;
					margin: auto auto 20px;
					order: 1;
				}
					.address-details-image img {
						width: 100%;
						height: auto;
					}
				.address-logo {
					width: 115px;
					height: auto;
					margin-bottom: 15px;
					order: 2;
				}
					.address-logo img {
						width: 100%;
						height: auto;
					}
				.address-tel {
					width: auto;
					margin-bottom: 15px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					order: 2;
				}
					.address-tel_heading {
						margin-right: 10px;
						font-size: 10px;
						line-height: 1.2;
					}
					.address-tel_number {
						font-size: 28px;
						font-weight: 600;
						line-height: 1.0;
						letter-spacing: 0.1em;
					}
				.address-details-txt {
					font-size: 14px;
					line-height: 1.6;
					order: 2;
				}
					.address-details-txt small {
						font-size: 12px;
					}

			.address-map {
				width: 100%;
				height: 250px;
			}
				.address-map iframe {
					width: 100%;
					height: 100%;
				}
}

/* SP ================================================== */
@media all and (max-width:559px){
#main {
	height: 360px;
}
	.main--inner {
		width: 100%;
		height: 100%;
	}
		.swiper-container {
			width: 100%;
			height: 100%;
		}
			.slide-image {
				width: 100%;
				height: 100%;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
			}
			.slide-image01 {
				background-image: url(../image/index/main-image01.jpg);
			}
			.slide-image02 {
				background-image: url(../image/index/main-image02.jpg);				
			}
			.slide-image03 {
				background-image: url(../image/index/main-image03.jpg);
			}
			.slide-image04 {
				background-image: url(../image/index/main-image04.jpg);
			}
			.slide-image05 {
				background-image: url(../image/index/main-image05.jpg);
			}

#about {

}
	.about--inner {
		width: 90%;
		padding: 40px 0px;
		margin: auto auto;
	}
		.about-txt {
			width: auto;
			font-size: 15px;
			line-height: 2.0;
			letter-spacing: 0.08em;
			font-feature-settings : "palt";
		}
		.about-image {
			display: none;
		}

#shop {

}
	.shop--inner {
		width: 90%;
		padding: 0px 0px 60px;
		margin: auto auto;
	}
		.top-shop-list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.top-shop-list:after {
			content: '';
			display: block;
			width: 48%;
		}
			.top-shop-item {
				width: 48%;
				margin-bottom: 10px;
				position: relative;
				border-radius: 50%;
				overflow: hidden;
			}
			.top-shop-item:before {
				content: '';
				display: block;
				width: 100%;
				padding-top: 100%;
			}
			.top-shop-item:nth-last-of-type(-n+2) {
				margin-bottom: 0px;
			}
				.top-shop-item a {
					width: 100%;
					height: 100%;
					padding-top: 5px;
					padding-left: 0.15em;
					border-radius: 50%;
					font-size: 16px;
					line-height: 1.5;
					text-align: center;
					transition: .3s;
					-webkit-transition: .3s;
					color: #231815;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}
					.top-shop-item a:before {
						content: '';
						display: block;
						width: 100%;
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						position: absolute;
						top: 0;
						left: 0;
						transition: .3s;
						-webkit-transition: .3s;
						opacity: .5;
						z-index: -1;
						pointer-events: none;
					}
					.succulents-cacti:before {
						background-image: url(../image/index/taniku.png);
					}
					.bromelia:before {
						background-image: url(../image/index/buromeria.png);
					}
					.aussie_plants-trees:before {
						background-image: url(../image/index/jumoku.png);
					}
					.rose:before {
						background-image: url(../image/index/bara.png);
					}
					.perennial:before {
						background-image: url(../image/index/tanen.png);
					}
					.foliage_plant:before {
						background-image: url(../image/index/kanyo.png);
					}
					.pots-goods:before {
						background-image: url(../image/index/zakka.png);
					}
					.bulbs:before {
						background-image: url(../image/index/kyukon.png);
					}

#blog {

}
	.blog--inner {
		width: 90%;
		padding: 0px 0px 60px;
		margin: auto auto;
	}
		.blog-link {
			width: 100%;
			height: auto;
		}
			.blog-link a {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}
				.blog-link a img {
					width: 120%;
					height: auto;
				}

#address {

}
	.address--inner {
		width: 90%;
		padding: 0px 0px;
		margin: auto auto;
	}
		.address-contents {
			width: 100%;
			display: flex;
			flex-direction: column-reverse;
			justify-content: flex-start;
			align-items: flex-start;
		}
			.address-details {
				width: 100%;
				margin: auto auto 10px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}
				.address-details-image {
					width: 100%;
					height: auto;
					margin: auto auto 15px;
					order: 1;
				}
					.address-details-image img {
						width: 100%;
						height: auto;
					}
				.address-logo {
					width: 115px;
					height: auto;
					margin-bottom: 10px;
					order: 2;
				}
					.address-logo img {
						width: 100%;
						height: auto;
					}
				.address-tel {
					width: auto;
					margin-bottom: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					order: 2;
				}
					.address-tel_heading {
						margin-right: 10px;
						font-size: 10px;
						line-height: 1.2;
					}
					.address-tel_number {
						font-size: 28px;
						font-weight: 600;
						line-height: 1.0;
						letter-spacing: 0.1em;
					}
				.address-details-txt {
					font-size: 14px;
					line-height: 1.6;
					order: 2;
				}
					.address-details-txt small {
						font-size: 12px;
					}
			.address-map {
				width: 100%;
				height: 150px;
			}
				.address-map iframe {
					width: 100%;
					height: 100%;
				}
}