@charset "UTF-8";
@use "variables" as *;

#about-greeting {
	.title-level02 {
		margin-bottom: 45px;
	}

	.greeting-box {
		position: relative;

		.image-box {
			flex-shrink: 0;
			box-sizing: border-box;
			line-height: 1;
		}

		.sign-box {
			flex-grow: 1;
			font-size: 1.6rem;
			line-height: 1.8;
			color: var(--color-body);
			position: absolute;
			top: 95px;
			left: 30px;

			em {
				font-size: 3.6rem;
				font-weight: bold;
				color: #fff;
				margin-right: 10px;
				text-shadow: 0 0 7px #232222, 0 0 3px #232222, 0 0 1px #232222;
				letter-spacing: 0.04em;
				line-height: 1.45;
			}

			.name {
				font-size: 1.8rem;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 0 7px #232222, 0 0 3px #232222, 0 0 1px #232222;
				display: block;
				padding-left: 4.6em;

				span {
					font-size: 2.8rem;
					margin-left: 20px;

				}
			}

			.name-en {
				font-size: 17.4rem;
				font-family: var(--font-bona);
				color: var(--color-primary);
				line-height: 1;
				width: 930px;
				bottom: -215px;
				display: block;
				position: absolute;
				letter-spacing: -0.06em;
				opacity: 0.3;
			}
		}
	}

	.text-box {
		p {
			&:not(:last-child) {
				margin-bottom: 32px;
			}
		}
	}
}

#about-history {
	dt {
		float: left;
		clear: left;
		width: 125px;
		padding: 5px 10px;
		box-sizing: border-box;
	}

	dd {
		padding-left: 125px;
		padding: 5px 10px;
		box-sizing: border-box;

		&::nth-of-type(odd) {
			background: #f5f7fa;
		}
	}

	dd:nth-of-type(odd) {
		background: var(--color-accent);
	}
}

/* STAFF  */
.staff-list {
	>li {
		&:not(:last-child) {
			margin-bottom: 90px;
		}
	}

	.staff-inner {
		display: flex;
		gap: 25px;
		margin-bottom: 20px;

		.image {
			width: 220px;
			line-height: 0;
			text-align: center;
		}

		.editlink {
			position: absolute;
		}
	}

	&.lay02 {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 50px;

		>li {
			gap: 24px;
			width: 47.3%;

			.image {
				width: 180px;
				margin-bottom: 0;
			}

			.name-en {
				display: block;
				margin: 0;
				margin-top: 5px;
			}

		}

		.propertylist {
			>dd:not(:last-child) {
				margin-bottom: 10px;
			}

		}
	}

	&:not(.lay02) {
		margin-bottom: 95px;

		.staff-inner {
			gap: 55px;
		}

		.propertybox {
			width: 750px;
		}

		.propertylist {

			display: flex;
			flex-wrap: wrap;
			gap: 20px 15px;

			>dt {
				width: 95px;
			}

			>dd {
				width: calc(100% - 115px);
			}
		}
	}

	.name-box {
		margin-bottom: 22px;

		.status {
			margin-bottom: 5px;
			line-height: 1;
		}

		.name-ja {
			margin-bottom: 5px;
			font-size: 2.2rem;
			font-weight: bold;
			line-height: 1.5;
			color: var(--color-primary);
		}

		.name-en {
			margin-bottom: 0;
			font-weight: 400;
			line-height: 1.0;
			margin-left: 20px;
			color: var(--color-secondary);
		}

		.name-box {
			margin-bottom: 25px;
		}

		.property-list:not(:last-child) {
			margin-bottom: 20px;
		}
	}

	.propertylist {
		dd {
			strong {
				font-weight: bold;
			}

			p:not(:last-child) {
				margin-bottom: 15px;
			}
		}

		.inner {
			display: inline-block;
			min-width: 95px;
			box-sizing: border-box;
			font-weight: bold;
			color: var(--color-secondary);

			&.lsplus {
				letter-spacing: 0.75em;
				text-indent: 0.75em;
			}
		}

		.textbox {
			line-height: 1.6875;
			overflow: hidden;

			li {
				line-height: 1.9;
			}

			&:not(:last-of-type) {
				margin-bottom: 18px;
			}


			p:last-child,
			ul:last-child,
			ol:last-child,
			dl:last-child,
			table:last-child {
				margin-bottom: 0;
			}
		}

		.message-box {
			padding: 15px 20px;
			line-height: 1.5625;
			border: 1px solid #eb6e46;
			overflow: hidden;

			p:last-child,
			ul:last-child,
			ol:last-child,
			dl:last-child,
			table:last-child {
				margin-bottom: 0;
			}
		}

		.catch {
			margin-bottom: 25px;
			color: #eb6e46;
			font-size: 112.5%;

			/* 18px */
			font-weight: bold;
			line-height: 1.78;
		}

		.editlink {
			position: absolute;
			top: 0;
			right: 0;
		}

		&:has(.editlink) {
			position: relative;
		}
	}

}

@media all and (min-width: 751px) {

	body.about #title {
		background-image: url(../images/about/title-bg.jpg);
	}

	/* INDEX */

	/* STAFF */
	body.staff #title {
		background-image: url(../images/about/staff/title-bg.jpg);
	}

}

@media only screen and (max-width: 750px) {

	body.about #title {
		background-image: url(../images/about/title-bg.jpg);
	}

	/* STAFF */
	body.staff #title {
		background-image: url(../images/about/staff/title-bg.jpg);
	}

	/* INDEX */
	#about-greeting {
		.greeting-box {
			margin: 0 -20px;

			.image-box {
				margin-bottom: 10px;
			}

			.sign-box {
				top: 50%;
				transform: translateY(-50%);

				em {
					font-size: min(2.5rem, 5vw);
				}

				.name {
					font-size: 1.8rem;
					font-weight: bold;
					color: #fff;
					text-shadow: 0 0 7px #232222, 0 0 3px #232222, 0 0 1px #232222;
					display: block;
					padding-left: 0em;

					span {
						font-size: min(2.0rem, 6vw);

					}
				}

				.name-en {
					font-size: min(7rem, 5vw);
					width: auto;
					bottom: 0px;
				}
			}
		}

		.text-box {
			p {
				&:not(:last-child) {
					margin-bottom: 20px;
				}
			}
		}
	}

	#about-history {
		dt {
			width: 100%
		}

		dd {
			padding: 5px 10px;
		}
	}

	/* STAFF  */
	.staff-list {
		>li {
			&:not(:last-child) {
				margin-bottom: 75px;
			}
		}

		.staff-inner {
			flex-direction: column;
			gap: 25px;
			margin-bottom: 20px;

		}

		&.lay02 {

			>li {
				width: 100%
			}

			.propertylist {
				>dd:not(:last-child) {
					margin-bottom: 10px;
				}

			}
		}

		&:not(.lay02) {
			margin-bottom: 75px;

			.staff-inner {
				gap: 15px;
			}

			.propertybox {
				width: auto;
			}

			.propertylist {
				flex-direction: column;
				gap: 0;

				>dt {
					width: 100%;
				}

				>dd {
					width: 100%;

					&:not(:last-child) {
						margin-bottom: 10px;
					}
				}
			}
		}
	}

}