@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#location {
	width: 100%;
	height: auto;
	padding: 330px 0px 0px;
	background-color: #FAF9F2;
}
	.location--inner {
		width: 100%;
		margin: auto auto;
	}
		.location-main {
			width: 90%;
			margin: auto auto 55px;
		}
			.location-txt {
				width: 620px;
				height: auto;
				margin: auto auto -115px;
				position: relative;
				z-index: 2;
				transition-delay: 0.8s !important;
				-webkit-transition-delay: 0.8s !important;
			}
				.location-txt img {
					width: 100%;
					height: auto;
					margin: auto auto 40px;
				}
				.location-txt p {
					width: 100%;
					font-size: 16px;
					text-align: center;
					line-height: 2.0;
				}
			.location-image {
				width: 100%;
				max-width: 1500px;
				height: auto;
				margin: auto auto;
			}
				.location-image img {
					width: 100%;
					height: auto;
				}

		.location-access {
			width: 100%;
			max-width: 1200px;
			margin: auto auto 110px;
		}
			.location-access_txt {
				width: 100%;
				margin: auto auto 40px;
			}
				.location-access_txt p {
					width: 100%;
					margin: auto auto 50px;
					font-size: 16px;
					text-align: center;
				}
					.location-access_txt p span {
						font-size: 24px;
						color: #7B5700;
						letter-spacing: 0.2em;
					}
				.location-access_txt img {
					width: 90%;
					height: auto;
					margin: 0 auto;
				}
			.location-access_station {
				width: 100%;
			}
				.location-access_station-image {
					width: 100%;
					margin: auto auto 15px;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-wrap: wrap;
				}
					.access-tenjin {
						width: 48.5%;
						height: auto;
						margin-bottom: 45px;
					}
					.access-hakata {
						width: 48.5%;
						height: auto;
						margin-bottom: 45px;
					}
					.access-tofuro {
						width: 32%;
						height: auto;
					}
					.access-root {
						width: 65%;
						height: auto;
					}
						.location-access_station-image div img {
							width: 100%;
							height: auto;
						}
				.location-access_station-note {
					width: 100%;
					font-size: 12px;
					font-feature-settings: "palt";
				}

		.location-spot {
			width: 100%;
			padding: 110px 0px 70px;
			background-color: #F0EEE1;
			position: relative;
		}
		.location-spot:before {
			content: '';
			width: 90%;
			max-width: 1200px;
			height: 0;
			border-top: dotted 1px #7B5700;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
		}
			.location-spot_inner {
				width: 90%;
				max-width: 1200px;
				margin: auto auto;
			}
				.tab-group {
					width: 100%;
					margin-bottom: 60px !important;
					border-bottom: solid 1px #604C3F;
					display: flex;
					justify-content: space-between;
				}
					.tab {
						width: 24.6%;
						height: 65px;
						background-color: #ffffff;
						font-size: 16px;
						line-height: 65px;
						letter-spacing: 0.12em;
						text-align: center;
						cursor: pointer;
						position: relative;
						z-index: auto;
					}
					.tab.is-active {
						transition: all 0.2s;
						-webkit-transition: all 0.2s;
					}
					.tab.education {
						color: #A62714;
					}
					.tab.education.is-active {
						color: #ffffff;
						background-color: #A62714;
					}
					.tab.shopping {
						color: #795648;
					}
					.tab.shopping.is-active {
						color: #ffffff;
						background-color: #795648;
					}
					.tab.hospital {
						color: #FBC02C;
					}
					.tab.hospital.is-active {
						color: #ffffff;
						background-color: #FBC02C;
					}
					.tab.public {
						color: #7CB342;
					}
					.tab.public.is-active {
						color: #ffffff;
						background-color: #7CB342;
					}

				.panel-group {
					width: 100%;
				}
					.panel {
						display: none;
					}
					.panel.is-showpanel {
						display: block;
					}
						.location-map {
							width: 100%;
							max-width: 1200px;
							height: 530px;
							margin: 0 auto 75px;
						}
						.is-showpanel .location-map {
							opacity: 1;
							animation: .8s ease-in 0s panelfade;
						}
						@keyframes panelfade {
							from {
								opacity: 0;
								transform: translate(0, 5px);
								-webkit-transform: translate(0, 5px);
							}
							to   {
								opacity: 1;
								transform: translate(0, 0px);
								-webkit-transform: translate(0, 0px);
							}
						}
							.location-map iframe {
								width: 100%;
								height: 100%;
								border: none;
							}

						.location-spot_wrapper {
							width: 100%;
							opacity: 0;
							counter-reset: number 0;
						}
						.is-showpanel .location-spot_wrapper {
							opacity: 1;
							animation: .6s ease-in 0s panelfade;
						}
							.location-list_contaier {
								width: 100%;
								margin-bottom: 80px;
							}
							.location-list_contaier:last-of-type {
								margin-bottom: 0px;
							}
								.location-list_heading {
									width: 100%;
									margin: auto auto 50px;
									font-size: 24px;
									font-weight: 600;
									letter-spacing: 0.0em;
									text-align: center;
									line-height: 1.0;
									display: flex;
									justify-content: space-between;
									align-items: center;
								}
									.location-list_heading:before,
									.location-list_heading:after {
										content: '';
										display: block;
										width: 40%;
										height: 1px;
										background-color: #707070;
									}

								.location-list {
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
									flex-wrap: wrap;
								}
								.location-list:before{
									content: '';
									display: block;
									width: 23.3%;
									order: 1;
								}
								.location-list:after{
									content: '';
									display: block;
									width: 23.3%;
								}
									.location-item {
										width: 23.3%;
										height: auto;
										margin-bottom: 20px;
										position: relative;
									}
									.location-item:nth-last-of-type(-n+4) {
										margin-bottom: 0px;
									}
									.location-item:before {
										counter-increment: number 1;
										content: counter(number);
										display: block;
										width: 30px;
										height: 26px;
										font-size: 14px;
										line-height: 26px;
										text-align: center;
										color: #ffffff;
										position: absolute;
										top: 0;
										left: 0;
									}
									.panel.education .location-item:before {
										background-color: #A62714;
									}
									.panel.shopping .location-item:before {
										background-color: #795648;
									}
									.panel.hospital .location-item:before {
										background-color: #FBC02C;
									}
									.panel.public .location-item:before {
										background-color: #7CB342;
									}
										.location-item_image {
											width: 100%;
											height: auto;
										}
											.location-item_image img {
												width: 100%;
												height: auto;
											}
										.location-details {
											width: 100%;
											padding: 15px 0px 20px;
										}
											.location-item_name {
												width: 100%;
												margin-bottom: 10px;
												font-size: 14px;
												font-weight: 600;
												line-height: 1.0;
												letter-spacing: 0.1em;
												text-align: center;
											}
											.location-item_name.longname {
												letter-spacing: -0.06em;
											}
											.location-item_distance {
												width: 100%;
												font-size: 12px;
												line-height: 1.0;
												letter-spacing: 0.1em;
												text-align: center;
											}
.i4ewOd-pzNkMb-haAclf {background-color: #510a0e !important;}

.kouiki-map {
	width: 900px;
	margin: 80px auto 120px;
}
	.kouiki-map img {
		width: 100%;
	}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
#location {
	width: 100%;
	height: auto;
	padding: 100px 0px 0px;
	background-color: #FAF9F2;
}
	.location--inner {
		width: 100%;
		margin: 50px auto auto;
	}
		.location-main {
			width: 90%;
			margin: auto auto 55px;
		}
			.location-txt {
				width: 100%;
				height: auto;
				margin: auto auto 40px;
				position: relative;
				z-index: 2;
			}
				.location-txt img {
					width: 80%;
					height: auto;
					margin: auto auto 20px;
				}
				.location-txt p {
					width: 100%;
					font-size: 14px;
					text-align: center;
					line-height: 2.0;
				}
			.location-image {
				width: 100%;
				height: auto;
				margin: auto auto;
				opacity: 0;
				transform: translate(0, 10px);
				-webkit-transform: translate(0, 10px);
				transition: 1.4s;
				-webkit-transition: 1.4s;
			}
			.location-image.is-show {
				transform: translate(0, 0);
				-webkit-transform: translate(0, 0);
				opacity: 1;
			}
				.location-image img {
					width: 100%;
					height: auto;
				}

		.location-access {
			width: 100%;
			margin: auto auto 70px;
		}
			.location-access_txt {
				width: 100%;
				margin: auto auto 60px;
			}
				.location-access_txt p {
					width: 100%;
					margin: auto auto 50px;
					font-size: 14px;
					text-align: center;
				}
					.location-access_txt p span {
						display: inline-block;
						margin-right: -15px;
						margin-bottom: 10px;
						font-size: 24px;
						color: #7B5700;
						letter-spacing: 0.2em;
					}
				.location-access_txt img {
					width: 50%;
					height: auto;
					margin: auto auto;
				}
			.location-access_station {
				width: 100%;
			}
				.location-access_station-image {
					width: 90%;
					margin: auto auto 20px;
				}
					.access-tenjin {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
					.access-hakata {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
					.access-tofuro {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
					.access-root {
						width: 100%;
						height: auto;
					}
						.location-access_station-image div img {
							width: 100%;
							height: auto;
						}
				.location-access_station-note {
					width: 90%;
					margin: auto auto;
					font-size: 12px;
					font-feature-settings: "palt";
				}

		.location-spot {
			width: 100%;
			padding: 60px 0px 70px;
			background-color: #F0EEE1;
			position: relative;
		}
		.location-spot:before {
			content: '';
			width: 90%;
			height: 0;
			border-top: dotted 1px #7B5700;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
		}
			.location-spot_inner {
				width: 90%;
				margin: auto auto;
			}
				.tab-group {
					width: 100%;
					margin-bottom: 30px !important;
					border-bottom: solid 1px #604C3F;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}
					.tab {
						width: 24.5%;
						height: 44px;
						background-color: #ffffff;
						font-size: 14px;
						line-height: 44px;
						letter-spacing: 0.12em;
						text-align: center;
						cursor: pointer;
					}
					.tab.is-active {
						transition: all 0.2s;
						-webkit-transition: all 0.2s;
					}
					.tab.education {
						color: #A62714;
					}
					.tab.education.is-active {
						color: #ffffff;
						background-color: #A62714;
					}
					.tab.shopping {
						color: #795648;
					}
					.tab.shopping.is-active {
						color: #ffffff;
						background-color: #795648;
					}
					.tab.hospital {
						color: #FBC02C;
					}
					.tab.hospital.is-active {
						color: #ffffff;
						background-color: #FBC02C;
					}
					.tab.public {
						color: #7CB342;
					}
					.tab.public.is-active {
						color: #ffffff;
						background-color: #7CB342;
					}

				.panel-group {
					width: 100%;
				}
					.panel {
						display:none;
					}
					.panel.is-showpanel {
						display:block;
					}
						.location-map {
							width: 90%;
							height: 350px;
							margin: 0 auto 40px;
							opacity: 1;
						}
						.is-showpanel .location-map {
							opacity: 1;
							animation: .6s ease-in 0s panelfade;
						}
						@keyframes panelfade {
							from {
								opacity: 0;
								transform: translate(0, 5px);
								-webkit-transform: translate(0, 5px);
							}
							to   {
								opacity: 1;
								transform: translate(0, 0px);
								-webkit-transform: translate(0, 0px);
							}
						}
							.location-map iframe {
								width: 100%;
								height: 100%;
								border: none
							}

						.location-spot_wrapper {
							width: 100%;
							opacity: 0;
							counter-reset: number 0;
						}
						.is-showpanel .location-spot_wrapper {
							opacity: 1;
							animation: .8s ease-in 0s panelfade;
						}
							.location-list_contaier {
								width: 100%;
								margin-bottom: 40px;
							}
							.location-list_contaier:last-of-type {
								margin-bottom: 0px;
							}
								.location-list_heading {
									width: 100%;
									margin: auto auto 30px;
									font-size: 20px;
									font-weight: 600;
									letter-spacing: 0.0em;
									text-align: center;
									line-height: 1.0;
									display: flex;
									justify-content: space-between;
									align-items: center;
								}
									.location-list_heading:before,
									.location-list_heading:after {
										content: '';
										display: block;
										width: 30%;
										height: 1px;
										background-color: #707070;
									}

								.location-list {
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
									flex-wrap: wrap;
								}
								.location-list:after{
									content: '';
									display: block;
									width: 32%;
								}
									.location-item {
										width: 32%;
										height: auto;
										margin-bottom: 15px;
										position: relative;
									}
									.location-item:nth-last-of-type(-n+3) {
										margin-bottom: 0px;
									}
									.location-item:before {
										counter-increment: number 1;
										content: counter(number);
										display: block;
										width: 30px;
										height: 26px;
										font-size: 14px;
										line-height: 26px;
										text-align: center;
										color: #ffffff;
										position: absolute;
										top: 0;
										left: 0;
									}
									.panel.education .location-item:before {
										background-color: #A62714;
									}
									.panel.shopping .location-item:before {
										background-color: #795648;
									}
									.panel.hospital .location-item:before {
										background-color: #FBC02C;
									}
									.panel.public .location-item:before {
										background-color: #7CB342;
									}
										.location-item_image {
											width: 100%;
											height: auto;
										}
											.location-item_image img {
												width: 100%;
												height: auto;
											}
										.location-details {
											width: 100%;
											padding: 13px 0px;
										}
											.location-item_name {
												width: 100%;
												margin-bottom: 7px;
												font-size: 16px;
												font-weight: 600;
												line-height: 1.2;
												text-align: center;
											}
											.location-item_name.longname {
												letter-spacing: -0.06em;
											}
											.location-item_distance {
												width: 100%;
												font-size: 16px;
												line-height: 1.0;
												text-align: center;
											}
	.kouiki-map {
		width: 90%;
		margin: 50px auto 70px;
	}
		.kouiki-map img {
			width: 100%;
		}
}

/* SP ================================================== */
@media all and (max-width:559px){
#location {
	width: 100%;
	height: auto;
	padding: 100px 0px 0px;
	background-color: #FAF9F2;
}
	.location--inner {
		width: 100%;
		margin: 20px auto auto;
	}
		.location-main {
			width: 90%;
			margin: auto auto 55px;
		}
			.location-txt {
				width: 100%;
				height: auto;
				margin: auto auto 20px;
				position: relative;
				z-index: 2;
			}
				.location-txt img {
					width: 100%;
					height: auto;
					margin: auto auto 20px;
				}
				.location-txt p {
					width: 100%;
					font-size: 12px;
					text-align: center;
					line-height: 2.0;
					letter-spacing: 0.075em;
				}
			.location-image {
				width: 100%;
				height: auto;
				margin: auto auto;
				opacity: 0;
				transform: translate(0, 10px);
				-webkit-transform: translate(0, 10px);
				transition: 1.4s;
				-webkit-transition: 1.4s;
				position: relative;
			}
			.location-image.is-show {
				transform: translate(0, 0);
				-webkit-transform: translate(0, 0);
				opacity: 1;
			}
				.location-top {
					width: 100%;
					height: auto;
				}
				.reiwa-txt {
					width: 120px;
					position: absolute;
					top:15px;
					right:15px;
				}

		.location-access {
			width: 100%;
			margin: auto auto 70px;
		}
			.location-access_txt {
				width: 100%;
				margin: auto auto 30px;
			}
				.location-access_txt p {
					width: 90%;
					margin: auto auto 20px;
					font-size: 14px;
					text-align: center;
				}
					.location-access_txt p span {
						display: inline-block;
						margin-right: -15px;
						margin-bottom: 10px;
						font-size: 16px;
						color: #7B5700;
						letter-spacing: 0.2em;
					}
				.location-access_txt img {
					width: 80%;
					height: auto;
					margin: auto auto;
				}
			.location-access_station {
				width: 100%;
			}
				.location-access_station-image {
					width: 90%;
					margin: auto auto 15px;
				}
					.access-tenjin {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
					.access-hakata {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
					.access-tofuro {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
					.access-root {
						width: 100%;
						height: auto;
					}
						.location-access_station-image div img {
							width: 100%;
							height: auto;
						}
				.location-access_station-note {
					width: 90%;
					margin: auto auto;
					font-size: 10px;
					font-feature-settings: "palt";
				}

		.location-spot {
			width: 100%;
			padding: 60px 0px 70px;
			background-color: #F0EEE1;
			position: relative;
		}
		.location-spot:before {
			content: '';
			width: 90%;
			height: 0;
			border-top: dotted 1px #7B5700;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
		}
			.location-spot_inner {
				width: 90%;
				margin: auto auto;
			}
				.tab-group {
					width: 100%;
					margin-bottom: 30px !important;
					border-bottom: solid 1px #604C3F;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}
					.tab {
						width: 49.5%;
						height: 44px;
						margin-bottom: 4px;
						background-color: #ffffff;
						font-size: 14px;
						line-height: 44px;
						letter-spacing: 0.12em;
						text-align: center;
						cursor: pointer;
					}
					.tab.is-active {
						transition: all 0.2s;
						-webkit-transition: all 0.2s;
					}
					.tab:nth-last-of-type(-n+2) {
						margin-bottom: 0px;
					}
					.tab.is-active {
						transition: all 0.2s;
						-webkit-transition: all 0.2s;
					}
					.tab.education {
						color: #A62714;
					}
					.tab.education.is-active {
						color: #ffffff;
						background-color: #A62714;
					}
					.tab.shopping {
						color: #795648;
					}
					.tab.shopping.is-active {
						color: #ffffff;
						background-color: #795648;
					}
					.tab.hospital {
						color: #FBC02C;
					}
					.tab.hospital.is-active {
						color: #ffffff;
						background-color: #FBC02C;
					}
					.tab.public {
						color: #7CB342;
					}
					.tab.public.is-active {
						color: #ffffff;
						background-color: #7CB342;
					}

				.panel-group {
					width: 100%;
				}
					.panel {
						display:none;
					}
					.panel.is-showpanel {
						display:block;
					}
						.location-map {
							width: 100%;
							max-width: 340px;
							height: 280px;
							margin: 0 auto 40px;
							opacity: 1;
						}
						.is-showpanel .location-map {
							opacity: 1;
							animation: .8s ease-in 0s panelfade;
						}
						@keyframes panelfade {
							from {
								opacity: 0;
								transform: translate(0, 5px);
								-webkit-transform: translate(0, 5px);
							}
							to   {
								opacity: 1;
								transform: translate(0, 0px);
								-webkit-transform: translate(0, 0px);
							}
						}
							.location-map iframe {
								width: 100%;
								height: 100%;
								border: none;
							}

						.location-spot_wrapper {
							width: 100%;
							opacity: 0;
							counter-reset: number 0;
						}
						.is-showpanel .location-spot_wrapper {
							opacity: 1;
							animation: .6s ease-in 0s panelfade;
						}
							.location-list_contaier {
								width: 100%;
								margin-bottom: 40px;
							}
							.location-list_contaier:last-of-type {
								margin-bottom: 0px;
							}
								.location-list_heading {
									width: 100%;
									margin: auto auto 20px;
									font-size: 18px;
									font-weight: 600;
									letter-spacing: 0.0em;
									text-align: center;
									line-height: 1.0;
									display: flex;
									justify-content: space-between;
									align-items: center;
								}
									.location-list_heading:before,
									.location-list_heading:after {
										content: '';
										display: block;
										width: 25%;
										height: 1px;
										background-color: #707070;
									}

								.location-list {
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: flex-start;
									flex-wrap: wrap;
								}
									.location-item {
										width: 49%;
										height: auto;
										margin-bottom: 10px;
										position: relative;
									}
									.location-item:nth-last-of-type(-n+2) {
										margin-bottom: 0px;
									}
									.location-item:before {
										counter-increment: number 1;
										content: counter(number);
										display: block;
										width: 30px;
										height: 26px;
										font-size: 14px;
										line-height: 26px;
										text-align: center;
										color: #ffffff;
										position: absolute;
										top: 0;
										left: 0;
									}
									.panel.education .location-item:before {
										background-color: #A62714;
									}
									.panel.shopping .location-item:before {
										background-color: #795648;
									}
									.panel.hospital .location-item:before {
										background-color: #FBC02C;
									}
									.panel.public .location-item:before {
										background-color: #7CB342;
									}
										.location-item_image {
											width: 100%;
											height: auto;
										}
											.location-item_image img {
												width: 100%;
												height: auto;
											}
										.location-details {
											width: 100%;
											padding: 9px 0px;
										}
											.location-item_name {
												width: 100%;
												margin-bottom: 7px;
												font-size: 13px;
												font-weight: 600;
												line-height: 1.2;
												text-align: center;
											}
											.location-item_name.longname {
												letter-spacing: 0.075em;
											}
											.location-item_distance {
												width: 100%;
												font-size: 11px;
												line-height: 1.0;
												text-align: center;
											}
	.kouiki-map {
		width: 90%;
		margin: 50px auto 70px;
	}
		.kouiki-map img {
			width: 100%;
		}
}