@charset "UTF-8";

footer{
	height: auto;

	#pcSide{
		top: 23%;
	}
}
.mainSite{
	border-bottom: 1px solid var(--colorL);
	margin: 0 0 3%;
	padding: 0 0 5%;
}

main {
	width: 100%;
	height: 320px;
	margin: 0 auto 3%;
	padding: 58px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;

	.inner{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		.title{
			color: var(--colorW);
			line-height: 1.8em;
			text-align: center;
			padding: 0 20px 0 0;

			h2{
				border-bottom: 1px solid var(--colorW);
				font-size: var(--font24-27);
				margin: 30px 0 10px;
				padding: 0 0 10px;
			}
			h3{
				font-family: var(--font02);
				font-size: var(--font18-22);
			}
		}
	}
}
.contents{
	.title{
		position: relative;

		h2{
			background: var(--colorBack);
			font-family: var(--font02);
			font-size: var(--font24-27);
			width: fit-content;
			margin: 0 auto;
			padding: 10px 50px;
			position: relative;
			z-index: 1;
		}

		&:before{
			content: "";
			background: var(--colorB);
			height: 1px;
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0,-50%);
		}
	}
	.inner_flex{
		display: flex;
		flex-wrap: wrap;
		max-width: var(--width01);
		width: 95%;
		margin: 0 auto;
	}
	.linksbutton{
		background: #F0DBB8;
		background: linear-gradient(120deg, rgba(240, 219, 184, 1) 0%, rgba(174, 134, 49, 1) 100%);
		box-shadow: 2px 2px 8px 0 #ccc;
		border-radius: 6px;
		color: #fff;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180px;
		height: 40px;

		&:hover{
			background: #F0DBB8;
			background: linear-gradient(120deg, rgba(240, 219, 184, 1) 0%, rgba(96, 56, 19, 1) 100%);
		}
	}
}
#contents01{
	padding: 0;

	.whitebox{
		background: var(--colorW);
		border: 2px solid var(--colorB);
		border-radius: 6px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin: 0 auto 2%;
		padding: 10px 20px;
	}
}
#access{
	main{
		background: url(/images/low/main-access.jpg);
		background-size: cover;
		background-position: center;
		margin: 0 auto 6%;
	}
	#contents01{
		.box,.map{
			max-width: var(--width01);
			width: 95%;
			margin: 0 auto 30px;

			h3{
				background: var(--color02);
				color: var(--colorW);
				width: 100%;
				margin: 0 auto 10px;
				padding: 5px 10px;
			}

			.wrap{
				background: var(--color05);
				font-size: var(--font-menu);
				line-height: 1.6em;
				width: 100%;
				margin: 20px auto;
				padding: 10px;
			}
		}
		.map{
			p{
				margin: 0 auto 3%;
			}
			iframe{
				width: 100%;
				height: 480px;
				margin: 0 auto;
			}
		}
	}
}
#privacy,#sitemap{
	main{
		background: url(/images/low/main-privacy.jpg);
		background-size: cover;
		background-position: center;
		margin: 0 auto 6%;
	}
	#contents01{
		.box,.map{
			max-width: var(--width01);
			width: 95%;
			margin: 0 auto 30px;

			h3{
				background: var(--color02);
				color: var(--colorW);
				width: 100%;
				margin: 0 auto 10px;
				padding: 5px 10px;
			}
			p.caption{
				margin: 0 auto 2%;
			}
			dl{
				dt{
					border-bottom: 1px solid var(--color02);
					margin: 0 0 10px;
					padding: 0 0 10px;
				}
				dd{
					margin: 0 0 20px;

					ol{
						text-indent: -1rem;
						width: 95%;
						margin: 10px auto 0;
						padding: 0 0 0 1rem;
					}
				}
			}
		}
	}
}
#sitemap{
	main{
		background: url(/images/low/main-sitemap.jpg);
		background-size: cover;
		background-position: center;
		margin: 0 auto 6%;
	}
	#contents01{
		.box,.map{
			h3{
				margin: 0 auto 20px;
			}
			dl{
				dt{
					border-bottom: none;
					margin: 0 0 5px;
					padding: 0;

					a{
						display: block;
						padding: 0 0 0 30px;
						position: relative;

						&:before{
							content: "";
							border-top: 5px solid transparent;
							border-right:none;
							border-bottom: 5px solid transparent;
							border-left: 8px solid var(--color02);
							width: 0;
							height: 0;
							position: absolute;
							top: 50%;
							left: 0;
							transform: translate(0,-50%);
						}

						&:hover{
							color: var(--color02);
						}
					}
				}
				dd{
					border-bottom: 1px solid var(--color02);
					margin: 0 0 20px;
					padding: 0 0 10px 30px;
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	main{
		height: 23dvh;
		overflow: hidden;

		.inner{
			.title{
				padding: 0;

				h2{
					margin: 20px 0 10px;
					padding: 0 0 10px;
				}
			}
		}
	}
	.contents{
		.title{
			margin: 0 auto 30px;
		}
	}
	#access{
		#contents01{
			.map{
				iframe{
					height: 320px;
				}
			}
		}
	}
}