@charset "UTF-8";
@import url('common.css');

/* CSS Document */

@media (min-width:1400px) {
	#subnavi {
		width: auto;
		display: flex;
		margin: 0 0;
		padding: 0px;
		flex-flow: row wrap;
		align-content: center;
		justify-content: center;

		ul {
			width: auto;
			display: flex;
			list-style-type: none;
			margin: 0 0;
			height: 40px;

			li {
				padding: 5px 15px;
				position: relative;

				a {
					width: 100%;
					/* font-family: "Zen Kaku Gothic Antique", sans-serif; */
					font-family: "Zen Old Mincho", serif;
					text-decoration: none;
					color: #000000;
					position: relative;
					margin-left: 10px;
					margin-right: 10px;
				}

				/*  下記nakamura追加  */
				a:hover {
					transition: transform .25s ease, color .25s ease;
					color: #5f6f95;
					opacity: 0.9;
				}

				/* 	a:hover {
				color: #333333;
			}
			a::before {
				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
				background-color: rgba(0, 0, 0, 0.2);
				content: '';
				width: 100%;
				height: 6px;
				position: absolute;
				left: 0;
				bottom: 0;
				transform-origin: right top;
				transform: scale(0, 1);
				transition: transform .3s;
			}
			a:hover::before {
				transform-origin: left top;
				transform: scale(1, 1);
			} */
			}

			li::after {
				content: "";
				width: 1px;
				height: 1.5em;
				background: #aaaaaa;
				position: absolute;
				right: 0;
				top: .25em
			}

			li:last-child::after {
				content: none;
			}
		}
	}

	#main {
		width: 1200px;
		margin-left: auto;
		margin-right: auto;
		position: relative;

		h3 {
			text-align: center;
			font-size: 24px;
		}


		#logo {
			width: 100%;
			height: auto;
			display: flex;
			flex-flow: row wrap;
			margin-top: 30px;

			.logo_image {
				width: 550px;
				height: 400px;
				display: flex;
				align-items: center;
				justify-content: center;
				img {
					width: 350px;
				}
			}

			.logo_text {
				line-height: 3em;
				width: 610px;
				height: auto;
				display: flex;
				align-items: center;
				font-size: 14px;
				letter-spacing: .1em;
			}
		}

		#overview {
			width: 560px;
			height: auto;
			margin: 0 auto;

			.ov_title {
				width: 100%;
				text-align: center;
				font-size: 32px;
				line-height: 32px;
				display: block;
				margin-top: 40px;
				margin-bottom: 40px;
				letter-spacing: .2em;
			}

			.ov_line {
				width: 100%;
				min-height: 48px;
				padding: 10px 0;
				border-bottom: 1px dotted #000000;
				display: flex;
				font-size: 14px;
				line-height: 28px;

				.title {
					width: 150px;
					display: inline-block;
					letter-spacing: .1em;
				}

				.naiyo {
					display: inline-block;
					letter-spacing: .1em;
				}
			}
		}

		#access {
			width: 100%;
			height: auto;
			margin-bottom: 150px;

			.ac_title {
				width: 100%;
				text-align: center;
				font-size: 32px;
				line-height: 32px;
				display: block;
				margin-top: 110px;
				margin-bottom: 40px;
				letter-spacing: .2em;
			}

			#map2 {
				width: 1100px;
				height: 480px;
				margin: 0 auto;
			}
		}

		#philosophy {
			width: 1200px;
			height: auto;
			margin-bottom: 150px;

			.wrap {
				width: 1000px;
				height: 400px;
				display: flex;
				flex-flow: row wrap;
				position: relative;

				.ph_title {
					width: 50px;
					text-align: center;
					font-size: 32px;
					line-height: 32px;
					display: flex;
					align-items: center;
					letter-spacing: .2em;
					border-right: 2px solid #b5b5b5;
					-webkit-writing-mode: vertical-rl;
					/* Safari用 */
					writing-mode: vertical-rl;
					/* 基本の縦書き指定 */
				}

				.ph_text {
					width: 570px;
					margin-left: 30px;
					margin-right: 50px;
					margin-top: 0;
					margin-bottom: 0;

					.ph_text1 {
						width: 100%;
						font-size: 24px;
						line-height: 1.5em;
						display: block;
						margin-bottom: 30px;
						letter-spacing: .1em;
					}

					.ph_text2 {
						width: 100%;
						font-size: 14px;
						line-height: 2em;
						display: block;
						letter-spacing: .1em;
					}
				}

				.ph_image {
					width: 300px;
					height: 400px;
					background-image: url('../img/ph_img.jpg');
					background-position: 35% 50%;
					background-repeat: no-repeat;
					background-size: auto 150%;
				}
			}



		}

		#message {
			width: 100%;
			margin: 30px 0;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;

			.wrap {
				width: 800px;
				height: auto;
				background-color: #ffffff;
				padding: 40px 40px;
				text-align: center;
				box-shadow: 2px 2px 5px #dddddd;
				position: relative;

				.mes-title {
					display: inline-block;
					margin-top: 30px;
					padding: 10px 70px;
					font-size: 20px;
					line-height: 20px;
					border-bottom: 1px solid #333333;
					margin-bottom: 30px;
					letter-spacing: .2em;
				}

				.mes-text {
					font-size: 14px;
					line-height: 2em;
					letter-spacing: .1em;
				}

				.signature {
					width: 100%;
					margin-top: 60px;
					margin-bottom: 20px;
					display: flex;
					justify-content: flex-end;

					.sign-wrap {
						width: auto;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						/* 	width: 220px;
					display: flex;
					flex-flow: column wrap;
					justify-content: flex-start; */

						.sign-post {
							font-size: 14px;
							line-height: 14px;
							text-align: left;
							/* margin-bottom: 15px; */
							text-align: center;
						}

						.sign-image {
							width: 180px;
							height: auto;

							img {
								width: 70%;
								display: flex;
								justify-content: center;
								/* 横中央 */
								align-items: center;
								/* 縦中央 */
								margin-left: 15px;
							}
						}
					}
				}

				.corner-top {
					width: 50px;
					height: 50px;
					position: absolute;
					top: -10px;
					left: -10px;

					img {
						width: 50px;
						height: 50px;
					}
				}

				.corner-bottom {
					width: 50px;
					height: 50px;
					position: absolute;
					bottom: -10px;
					right: -10px;
					transform: rotate(180deg);

					.img {
						width: 50px;
						height: 50px;
					}
				}
			}
		}
	}

	#history {
		width: 100%;

		.ht_title {
			width: 100%;
			text-align: center;
			font-size: 32px;
			line-height: 32px;
			display: block;
			/* margin-top: 80px; */
			margin-top: 110px;
			margin-bottom: 25px;
			letter-spacing: .2em;
		}
	}
	.cr {
		display: none;
	}
}

@media (max-width:1399px) and (min-width:601px) {
	#subnavi {
		width: auto;
		display: flex;
		margin: 0 0;
		padding: 0px;
		flex-flow: row wrap;
		align-content: center;
		justify-content: center;

		ul {
			width: auto;
			display: flex;
			list-style-type: none;
			margin: 0 0;
			height: 40px;

			li {
				padding: 5px 15px;
				position: relative;

				a {
					width: 100%;
					/* font-family: "Zen Kaku Gothic Antique", sans-serif; */
					font-family: "Zen Old Mincho", serif;
					text-decoration: none;
					color: #000000;
					position: relative;
					margin-left: 10px;
					margin-right: 10px;
				}

				/*  下記nakamura追加  */
				a:hover {
					transition: transform .25s ease, color .25s ease;
					color: #5f6f95;
					opacity: 0.9;
				}


				/* a:hover {
				color: #333333;
			}
			a::before {
				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
				background-color: rgba(0, 0, 0, 0.2);
				content: '';
				width: 100%;
				height: 6px;
				position: absolute;
				left: 0;
				bottom: 0;
				transform-origin: right top;
				transform: scale(0, 1);
				transition: transform .3s;
			}
			a:hover::before {
				transform-origin: left top;
				transform: scale(1, 1);
			} */
			}

			li::after {
				content: "";
				width: 1px;
				height: 1.5em;
				background: #aaaaaa;
				position: absolute;
				right: 0;
				top: .25em
			}

			li:last-child::after {
				content: none;
			}
		}
	}

	#main {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 100px;
		position: relative;

		h3 {
			text-align: center;
			font-size: 24px;
		}


		#logo {
			width: 100%;
			height: auto;
			display: flex;
			flex-flow: row wrap;
			margin-top: 30px;
			margin-bottom: 50px;
			justify-content: center;

			.logo_image {
				width: 40vw;
				height: 30vw;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 30vw;
				}
			}

			.logo_text {
				width: 40vw;
				height: auto;
				display: flex;
				align-items: center;
				/* 			font-size: 1.8vw; */
				font-size: clamp(12px, 1.8vw, 14px);
				letter-spacing: 0.1em;
				line-height: 2.5em;
				text-align: justify;
			}

				.logo_text br {
		display: none;
	}
		}

		#overview {
			width: 560px;
			height: auto;
			margin: 0 auto;

			.ov_title {
				width: 100%;
				text-align: center;
				font-size: 3vw;
				line-height: 1em;
				display: block;
				margin-top: 40px;
				margin-bottom: 40px;
				letter-spacing: .2em;
			}

			.ov_line {
				width: 100%;
				min-height: 48px;
				padding: 10px 0;
				border-bottom: 1px dotted #000000;
				display: flex;
				font-size: 14px;
				line-height: 28px;

				.title {
					width: 150px;
					display: inline-block;
					letter-spacing: .1em;
				}

				.naiyo {
					display: inline-block;
					letter-spacing: .1em;
				}
			}
		}

		#access {
			width: 100%;
			height: auto;
			margin-bottom: 150px;

			.ac_title {
				width: 100%;
				text-align: center;
				font-size: 3vw;
				line-height: 1em;
				display: block;
				margin-top: 40px;
				margin-bottom: 40px;
				letter-spacing: .2em;
			}

			#map2 {
				width: 100%;
				height: 480px;
				margin: 0 auto;
			}
		}

		#philosophy {
			width: 100%;
			height: auto;
			margin-bottom: 150px;

			.wrap {
				width: 100%;
				min-height: 35vw;
				display: flex;
				flex-flow: row wrap;
				justify-content: center;
				position: relative;
				padding: 0 20px;

				.ph_title {
					width: 5vw;
					text-align: center;
					font-size: 3vw;
					line-height: 1em;
					display: flex;
					align-items: center;
					letter-spacing: .2em;
					border-right: 2px solid #b5b5b5;
					-webkit-writing-mode: vertical-rl;
					/* Safari用 */
					writing-mode: vertical-rl;
					/* 基本の縦書き指定 */
				}

				.ph_text {
					width: 50vw;
					margin-left: 20px;
					margin-right: 30px;
					margin-top: 0;
					margin-bottom: 0;

					.ph_text1 {
						width: 100%;
						font-size: 2.5vw;
						line-height: 1.5em;
						display: block;
						margin-bottom: 30px;
						letter-spacing: .1em;
					}

					.ph_text2 {
						width: 100%;
						font-size: 1.1vw;
						line-height: 2em;
						display: block;
						letter-spacing: .1em;
					}
				}

				.ph_image {
					width: 25vw;
					height: 35vw;
					background-image: url('../img/ph_img.jpg');
					background-position: 35% 50%;
					background-repeat: no-repeat;
					background-size: auto 150%;
				}
			}



		}

		#message {
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;

			.wrap {
				width: 70%;
				height: auto;
				background-color: #ffffff;
				padding: 20px 20px;
				text-align: center;
				box-shadow: 2px 2px 5px #dddddd;
				position: relative;

				.mes-title {
					display: inline-block;
					margin-top: 7vw;
					padding: 10px 70px;
					font-size: 2vw;
					line-height: 20px;
					border-bottom: 1px solid #333333;
					margin-bottom: 30px;
					letter-spacing: .2em;
				}

				.mes-text {
					font-size: 1.4vw;
					line-height: 2em;
					letter-spacing: .1em;
				}

				.signature {
					width: 100%;
					margin-top: 7vw;
					margin-bottom: 7vw;
					display: flex;
					justify-content: flex-end;

					.sign-wrap {
						width: auto;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						/* 	width: 20vw;
						display: flex;
						flex-flow: column wrap;
						justify-content: flex-start; */

						.sign-post {
							font-size: 1.4vw;
							line-height: 1em;
							text-align: left;
							/* margin-bottom: 15px; */
							text-align: center;
						}

						.sign-image {
							width: 17vw;

							img {
								width: 70%;
										display: flex;
								justify-content: center;
								/* 横中央 */
								align-items: center;
								/* 縦中央 */
								margin-left: 15px;
							}
						}
					}
				}

				.corner-top {
					width: 5vw;
					height: 5vw;
					position: absolute;
					top: -10px;
					left: -10px;

					img {
						width: 5vw;
						height: 5vw;
					}
				}

				.corner-bottom {
					width: 5vw;
					height: 5vw;
					position: absolute;
					bottom: -10px;
					right: -10px;
					transform: rotate(180deg);

					.img {
						width: 5vw;
						height: 5vw;
					}
				}
			}
		}

	}

	#history {
		width: 100%;

		.ht_title {
			width: 100%;
			text-align: center;
			font-size: 3vw;
			line-height: 32px;
			display: block;
			margin-top: 80px;
			/*  nakamura追加  */
			letter-spacing: .2em;
			margin-bottom: 40px;
			/*  nakamura追加  */
		}
	}
	.cr {
		display: none;
	}
}

@media (max-width:600px) {
	#subnavi {
		width: 100%;
		display: flex;
		margin: 0;
		padding: 0;
		flex-flow: row wrap;
		align-content: center;
		justify-content: center;

		ul {
			width: auto;
			display: flex;
			list-style-type: none;
			margin: 0;
			padding: 0;
			height: auto;

			/*  下記nakamura追加  */
			li {
				flex: 0 0 auto;
				margin: 0 6px;
			}

			/* aをボタンにする */
			li a {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10px 14px;
				font-size: 3vw;
				font-weight: 500;
				font-family: "Zen Old Mincho", serif;
				text-decoration: none;
				color: #273A8B;
				background: transparent;
				border: 1px solid #d0d3db;
				border-radius: 6px;
				transition: .15s ease;
			}

			/* タップ時 */
			li a:active {
				transform: translateY(1px);
				opacity: 0.7;
				margin: 0;
			}


			/* 
	li {
		width: 20vw;
		height: 8vw;
		position: relative;
		background-color: #D2BB61;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 10px;
		a {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: "Zen Old Mincho", serif;
			text-decoration: none;
			font-size: 2.5vw;
			line-height: 1em;
			color: #ffffff;
			position: relative;
			}
			
		} */


		}
	}

	#main {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 100px;
		position: relative;

		h3 {
			text-align: center;
			font-size: 24px;
		}


		#logo {
			width: 100%;
			height: auto;
			display: flex;
			flex-flow: column wrap;
			margin-top: 30px;
			justify-content: center;

			.logo_image {
				width: 100%;
				height: 50vw;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 50vw;
				}
			}

			.logo_text {
				width: 100%;
				padding: 0 20px;
				height: auto;
				display: flex;
				align-items: center;
				font-size: 2.7vw;
				letter-spacing: .1em;
				line-height: 2.5em;
				text-align: justify;
			}

						.logo_text br {
		display: none;
	}
		}

		#overview {
			width: 100%;
			height: auto;
			margin: 0 auto;
			padding: 0 20px;

			.ov_title {
				width: 100%;
				text-align: center;
				font-size: 4vw;
				line-height: 1em;
				display: block;
				margin-top: 3em;
				margin-bottom: 1em;
				letter-spacing: .2em;
			}

			.ov_line {
				width: 100%;
				min-height: 3em;
				padding: 10px 0;
				border-bottom: 1px dotted #000000;
				display: flex;
				font-size: 3vw;
				line-height: 1.5em;

				.title {
					width: 9em;
					min-width: 9em;
					display: inline-block;
					letter-spacing: .1em;
				}

				.naiyo {
					display: inline-block;
					letter-spacing: .1em;
				}
			}
		}

		#access {
			width: 100%;
			height: auto;
			margin-bottom: 100px;

			.ac_title {
				width: 100%;
				text-align: center;
				font-size: 4vw;
				line-height: 1em;
				display: block;
				margin-top: 3em;
				margin-bottom: 1em;
				letter-spacing: .2em;
			}

			#map2 {
				width: 100%;
				height: 80vw;
				margin: 0 auto;
			}
		}

		#philosophy {
			width: 100%;
			height: auto;
			margin-bottom: 100px;

			.wrap {
				width: 100%;
				min-height: 35vw;
				display: flex;
				flex-flow: column wrap;
				justify-content: center;
				position: relative;
				padding: 0 20px;

				.ph_title {
					width: 100%;
					text-align: center;
					font-size: 4vw;
					line-height: 1em;
					margin-top: 2em;
					margin-bottom: 1em;
					text-align: center;
					letter-spacing: .2em;
				}

				.ph_text {
					width: 100%;
					margin-top: 0;
					margin-bottom: 30px;

					.ph_text1 {
						width: 100%;
						font-size: 3.5vw;
						line-height: 1.5em;
						display: block;
						margin-bottom: 30px;
						letter-spacing: .1em;
					}

					.ph_text2 {
						width: 100%;
						font-size: 3vw;
						line-height: 2em;
						display: block;
						letter-spacing: .1em;
					}
				}

				.ph_image {
					width: 50vw;
					height: 65vw;
					background-image: url('../img/ph_img.jpg');
					background-position: 35% 50%;
					background-repeat: no-repeat;
					background-size: auto 150%;
					margin: 0 auto;
				}
			}



		}

		#message {
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			align-items: center;

			.wrap {
				width: 90%;
				height: auto;
				background-color: #ffffff;
				padding: 20px 20px;
				text-align: center;
				box-shadow: 2px 2px 5px #dddddd;
				position: relative;

				.mes-title {
					display: inline-block;
					margin-top: 7vw;
					padding: 10px 3em;
					font-size: 3.5vw;
					line-height: 20px;
					border-bottom: 1px solid #333333;
					margin-bottom: 30px;
					letter-spacing: .2em;
				}

				.mes-text {
					font-size: 2.5vw;
					line-height: 2em;
					letter-spacing: .1em;
				}

.mes-text {
  text-align: left;
  line-height: 2.2em;
}

.mes-text .kaigyouwo {
  display: inline;
}

.mes-text .kaigyouwo br {
  display: none;
}


				.signature {
					width: 100%;
					margin-top: 7vw;
					margin-bottom: 7vw;
					display: flex;
					justify-content: flex-end;

					.sign-wrap {
width: auto;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

				/* 		width: 30vw;
						display: flex;
						flex-flow: column wrap;
						justify-content: flex-start; */

						.sign-post {
							font-size: 2vw;
							line-height: 1em;
							text-align: left;
							/* margin-bottom: 15px; */
							text-align: center;
						}

						.sign-image {
							width: 30vw;

							img {
									width: 70%;
										display: flex;
								justify-content: center;
								/* 横中央 */
								align-items: center;
								/* 縦中央 */
								margin-left: 10px;
							}
						}
					}
				}

				.corner-top {
					width: 7vw;
					height: 7vw;
					position: absolute;
					top: -8px;
					left: -8px;

					img {
						width: 7vw;
						height: 7svw;
					}
				}

				.corner-bottom {
					width: 7vw;
					height: 7vw;
					position: absolute;
					bottom: -8px;
					right: -8px;
					transform: rotate(180deg);

					.img {
						width: 7vw;
						height: 7vw;
					}
				}
			}
		}

	}

	#history {
		width: 100%;

		.ht_title {
			width: 100%;
			text-align: center;
			font-size: 5vw;
			line-height: 32px;
			display: block;
			margin-top: 80px;
			letter-spacing: .2em;
		}
	}
}