@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;600&display=swap');

:root {
	--content-width: 1080px;
	font-size: 9px;

	@media screen and (min-width: 1080px) {
		font-size: 10px;
	}
}

/**
 * reset
 */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
	position: relative;
	font-size: 1.9rem;
	line-height: 4.1rem;
	color: #000000;
	overflow-x: hidden;

	@media screen and (min-width: 1080px) {
		letter-spacing: 1px;
	}
}

h1, h2, h3, p, ul, ol, dl, dt, dd, p {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

br.lg {
	display: none;
}
@media screen and (min-width: 1080px) {
	br.sm {
		display: none;
	}
	br.lg {
		display: inline;
	}
}

/**
 * common
 */
header {
	background-color: #ffffff;
	position: relative;
	z-index: 10;
	height: 100%;

	@media screen and (min-width: 1080px) {
		width: 200px;
		position: fixed;
		left: 0;
		top: 0;
		text-align: center;
	}

	h1 {
		padding-top: 3.0rem;

		img {
			max-width: 15rem;

			&:nth-of-type(2) {
				margin: 1.5rem 0;
			}
		}
	}

	> div {
		font-size: 1.6rem;
		line-height: 2.2rem;
		margin-bottom: 4.0rem;

		p.tel {
			color: #ffb652;
			font-size: 2.3rem;
			line-height: 2.8rem;
			font-weight: 800;
		}
	}

	nav {
		ul {
			font-size: 1.5rem;
			line-height: 2.0rem;
			text-align: left;
			padding: 0 25px;

			li {
				padding: 10px 0;
				border-bottom: 1px dashed #000000;

				a {
					display: block;

					&::before {
						content: "■ ";
					}
				}
			}
		}
	}
}
main {
	@media screen and (min-width: 1080px) {
		margin-left: 200px;
	}

	> section,
	nav {
		padding: 90px 100px;

		&.news {
			background-color: #e5ecef;
		}
	}
}
footer {
	background-color: #ffebca;
	padding: 80px 100px;

	@media screen and (min-width: 1080px) {
		margin-left: 200px;
	}

	> div {
		display: flex;
		margin-top: 5.0rem;

		p {
			flex-basis: 280px;
		}
	}
	address {
		font-size: 1.6rem;
		line-height: 2.6rem;
		margin-left: 4.0rem;
		font-style: normal;
		padding-top: 1.0rem;
	}
	ul {
		margin-left: 65px;
		font-size: 1.5rem;
		line-height: 2.8rem;
		padding-top: 3.2rem;
	}
}

p.button {
	position: relative;
		display: inline-block;
	a {
		position: relative;
		z-index: 5;
		display: inline-block;
		max-height: 80px;
		background-color: #ffffff;
		border: 1px solid #000000;
		border-radius: 40px;
		font-size: 2.0rem;
		font-weight: 600;
		line-height: 1;
		padding: 2.5rem 10.0rem 2.5rem 5.0rem;
		background-image: url(../img/icon-button.webp);
		background-position: right 30px center;
		background-repeat: no-repeat;
	}
	&::after {
		position: absolute;
		left: 0;
		bottom: -7px;
		display: inline-block;
		width: 100%;
		height: 100%;
		content: "";
		z-index: 4;
		background-color: #ccc7c3;
		border-radius: 40px;
	}
}

/**
 * sections
 */
div.visual {
	background-image: url(../img/visual.png);
	background-size: 100% auto;
	background-position: top right;
	background-repeat: no-repeat;
	width: calc(100vw - 200px);
	height: calc((100vw - 200px) * 0.625);
	position: relative;

	p {
		writing-mode: vertical-rl;
		font-size: 4.4rem;
		line-height: 6.9rem;
		font-weight: 500;
		padding: 100px 0 0 80px;
		letter-spacing: 10px;
	}
}
section.about {
	h2 {
		font-size: 3.4rem;
		line-height: 5.8rem;
		font-weight: 600;
		margin-bottom: 5.0rem;
		letter-spacing: 5px;
	}

	> div {
		display: flex;

		> div {
			flex-basis: 45.0rem;
			padding-top: 40px;

			p {
				line-height: 4.4rem;
			}
		}
		> p {
			flex-basis: calc(100% - 45.0rem);

			img {
				max-width: 620px;
			}
		}
	}

	> ul {
		margin-top: 9.0rem;
		margin-bottom: 5.0rem;
		font-size: 2.4rem;
		line-height: 5.8rem;
		font-weight: 600;

		li {
			background-color: #ffebca;
			margin-bottom: 2.0rem;
			position: relative;
			padding-left: 90px;
			width: 76.0rem;
			position: relative;

			&::after {
				background-color: #ffffff;
				content: "";
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				width: 2.0rem;
				height: 100%;
				clip-path: polygon(100% 0, 0 100%, 100% 100%);
			}

			img {
				position: absolute;
			}

			&:nth-of-type(1) {
				img {
					left: -5px;
					top: -20px;
					width: 75px;
				}
			}
			&:nth-of-type(2) {
				img {
					left: 10px;
					top: -10px;
					width: 58px;
				}
			}
			&:nth-of-type(3) {
				img {
					left: 10px;
					top: -8px;
					width: 50px;
				}
			}
		}
	}
	p.description {
		line-height: 4.4rem;
		margin-bottom: 3.5rem;
	}
	p.button {
		margin-top: 8.0rem;
		margin-bottom: 6.0rem;
		a {
			padding-left: 9.0rem;
		}
	}
}
section.news {
	h2 {
		color: #ffb652;
		font-size: 2.0rem;
		line-height: 1.0;
		font-weight: 500;
		margin-bottom: 7.0rem;

		span {
			font-size: 3.8rem;
			font-weight: 600;
			line-height: 5.8rem;
			color: #000000;
			display: block;
			letter-spacing: 5px;
		}
	}
	div.article {
		display: flex;
		margin-bottom: 10.0rem;
		max-width: 1000px;

		> p {
			flex-basis: 22.0rem;
		}
		> div {
			flex-basis: calc(100% - 22.0rem);
			padding-left: 4.0rem;
			display: flex;
			flex-wrap: wrap;

			p.date {
				flex-basis: 12.0rem;
				font-size: 2.0rem;
				line-height: 3.4rem;
				font-weight: 600;
			}
			p.title {
				flex-basis: calc(100% - 12.0rem);
				font-size: 2.1rem;
				font-weight: 600;
				line-height: 3.4rem;
			}
			p.description {
				flex-basis: 100%;
				font-size: 1.8rem;
				line-height: 3.6rem;
				margin-top: 3.0rem;
			}
		}
	}
}
nav.navigation {
	ul {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;

		li {
			border: 1px solid #000000;
			border-radius: 2.5rem;
			text-align: center;
			font-size: 2.3rem;
			line-height: 3.4rem;
			font-weight: 600;

			&:nth-of-type(2) {
				margin: 0 3.0rem 5.0rem;
			}
			&:nth-of-type(4) {
				margin-right: 5.0rem;
			}

			&:nth-of-type(1),
			&:nth-of-type(2),
			&:nth-of-type(3) {
				margin-bottom: 5.0rem;
				flex-basis: calc((100% - 6.0rem) / 3);

				a {
					display: block;
					padding-bottom: 3.0rem;

					p {
						position: relative;

						&.image {
							z-index: 4;

							img {
								border-radius: 2.5rem 2.5rem 0 0;
							}
						}
						&.icon {
							position: relative;
							z-index: 2;
							top: -60px;
							flex-basis: 100%;
							min-height: 85px;
							background-image: url(../img/nav-06.webp);
							background-position: center top;
							background-repeat: repeat-x;
							padding-top: 2.0rem;
							margin-bottom: -60px;
							z-index: 5;

							img {
								max-width: 60px;
							}
						}
						&.title {
							z-index: 6;
						}
					}
				}
			}

			&:nth-of-type(4),
			&:nth-of-type(5) {
				flex-basis: calc((100% - 5.0rem) / 2);

				a {
					display: block;
					height: 100%;

					p {
						&.image {
							float: right;
							padding: 10px 10px 0 0;

							img {
								max-width: 290px;
								max-height: 174px;
								vertical-align: bottom;
							}
						}
						&.icon {
							padding-left: 2.0rem;
							padding-top: 4.0rem;
							margin-bottom: 1.0rem;

							img {
								max-width: 60px;
							}
						}
						&.title {
							padding-left: 2.0rem;
						}
					}
				}
			}
		}
	}
}
section.contact {
	max-width: 1000px;

	h2 {
		color: #ffb652;
		font-size: 2.0rem;
		line-height: 1.0;
		font-weight: 500;
		margin-bottom: 3.0rem;

		span {
			font-size: 3.8rem;
			font-weight: 600;
			line-height: 5.8rem;
			color: #000000;
			display: block;
			letter-spacing: 5px;
		}
	}
	p {
		line-height: 4.1rem;
	}
	ul {
		display: flex;
		margin-top: 3.0rem;

		li {
			flex-basis: calc((100% - 5.0rem) / 2);
			line-height: 3.5rem;
			text-align: center;
			position: relative;

			&.tel {
				font-size: 3.5rem;
				font-weight: 800;
				margin-right: 5.0rem;

				img {
					max-width: 50px;
					left: -20px;
				}
			}
			&.form {
				font-size: 2.4rem;
				font-weight: 600;

				img {
					max-width: 70px;
				}
			}

			&::after {
				position: absolute;
				left: 0;
				bottom: -8px;
				display: inline-block;
				width: 100%;
				height: 100%;
				content: "";
				z-index: 4;
				background-color: #ccc7c3;
				border-radius: 1.5rem;
			}

			a {
				position: relative;
				z-index: 5;
				display: block;
				background-color: #ffffff;
				border: 1px solid #000000;
				border-radius: 1.5rem;
				padding: 35px 0;
				max-height: 110px;

				img {
					vertical-align: middle;
					position: relative;
				}
			}
		}
	}
}