@charset "UTF-8";

.single-office_container {
	padding-top: 170px;
	padding-bottom: 100px;
	background-image: url(../img/office_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 2186px 2843px;
}

.single-office_content {
	max-width: 1000px;
	width: 90%;
	margin: auto;
	padding-bottom: 30px;
	border-bottom: 2px solid #72522d;
}

.title_container {
	width: 100%;
	margin-bottom: 34px;
	padding: 0;
}

.title-en {
	color: #72522d;
	font-size: 59px !important;
}
body.font-large .title-en {
	font-size: calc(59px + 2px) !important;
}
body.font-extra-large .title-en {
	font-size: calc(59px + 6px) !important;
}

.title-ja {
	color: #ff8c05;
	font-size: 20px;
}
body.font-large .title-ja {
	font-size: calc(20px + 2px);
}
body.font-extra-large .title-ja {
	font-size: calc(20px + 6px);
}

.date-time {
	margin-bottom: 14px;
	font-size: 14px;
}
body.font-large .date-time {
	font-size: calc(14px + 2px);
}
body.font-extra-large .date-time {
	font-size: calc(14px + 6px);
}

.category-item {
	display: inline-block;
	padding: 3px 15px;
	border: 2px solid #454545;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 13px;
}
body.font-large .category-item {
	font-size: calc(13px + 2px);
}
body.font-extra-large .category-item {
	font-size: calc(13px + 6px);
}

.office-title_container {
	display: flex;
	padding-bottom: 10px;
	border-bottom: 2px solid #72522d;
	font-size: clamp(1.563rem, -0.125rem + 6vw, 2.875rem);
	letter-spacing: 0.05em;
	justify-content: space-between;
	align-items: center;
}
body.font-large .office-title_container {
	font-size: calc(clamp(1.563rem, -0.125rem + 6vw, 2.875rem) + 2px);
}
body.font-extra-large .office-title_container {
	font-size: calc(clamp(1.563rem, -0.125rem + 6vw, 2.875rem) + 6px);
}

.sns-list {
	display: flex;
	column-gap: 15px;
}

.single-office-post-content {
	max-width: 800px;
	margin: auto;
	margin-top: 30px;
}

.office-img {
	max-width: 600px;
	margin: auto;
}

.thumbnail-img {
	max-width: 600px;
	width: 100%;
	margin: auto;
}

.office-introduction {
	margin-top: 60px;
	font-size: 14px;
	line-height: 2;
}
body.font-large .office-introduction {
	font-size: calc(14px + 2px);
}
body.font-extra-large .office-introduction {
	font-size: calc(14px + 6px);
}

.introduction-img-list {
	display: flex;
	margin-top: 60px;
	flex-wrap: wrap;
	justify-content: space-between;

	row-gap: 40px;
}

.introduction-img-item {
	max-width: 380px;
	width: calc(100% / 2 - 8px);
}

.introduction-img {
	max-width: 380px;
	width: 100%;
	background-color: #ffffff;

	aspect-ratio: 380 / 285;

/* height: auto; */
	object-fit: contain;
}

.product_container {
	margin-top: 60px;
}

.content-title {
	font-size: 23px;
}
body.font-large .content-title {
	font-size: calc(23px + 2px);
}
body.font-extra-large .content-title {
	font-size: calc(23px + 6px);
}

.product-list {
	display: flex;
	margin-top: 16px;
	column-gap: 2.1%;
	flex-wrap: wrap;

	row-gap: 36px;
}

.product-item {
	max-width: 234px;
	width: 23.4%;
}

.product-img {
	max-width: 100%;
	background-color: #ffffff;

	aspect-ratio: 235/155;
	object-fit: contain;
	max-height: 129px;
}

.product-content {
	margin-top: 18px;
}

.product-category {
	padding: 3px 19px;
	border: 2px solid #454545;
	border-radius: 14px;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 11px;
}
body.font-large .product-category {
	font-size: calc(11px + 2px);
}
body.font-extra-large .product-category {
	font-size: calc(11px + 6px);
}

.product-name {
	margin-top: 10px;
	font-weight: 700;
	font-size: 17px;
}
body.font-large .product-name {
	font-size: calc(17px + 2px);
}
body.font-extra-large .product-name {
	font-size: calc(17px + 6px);
}

.product-name a {
	color: #454545;
}

.product-price {
	margin-top: 10px;
	font-size: 14px;
}
body.font-large .product-price {
	font-size: calc(14px + 2px);
}
body.font-extra-large .product-price {
	font-size: calc(14px + 6px);
}

.purchase {
	display: inline-block;
	margin-top: 18px;
	padding: 3px 19px;
	border: 2px solid #454545;
	background-color: #ffffff;
	font-weight: 700;
	font-size: 11px;
}
body.font-large .purchase {
	font-size: calc(11px + 2px);
}
body.font-extra-large .purchase {
	font-size: calc(11px + 6px);
}

.product-button_container {
	margin-top: 55px;
	text-align: center;
}

.product-button {
	padding: 19px 67px;
	border: 2px solid #72522d;
	border-radius: 30px;
	background-color: #72522d;
	color: #ffffff;
	font-size: 15px;
	transition: all 0.5s;
}
body.font-large .product-button {
	font-size: calc(15px + 2px);
}
body.font-extra-large .product-button {
	font-size: calc(15px + 6px);
}

.product-button:hover {
	background-color: #ffffff;
	color: #72522d;
}

.office-introduction_table__container {
	max-width: 800px;
	margin: auto;
	margin-top: 95px;
}

.table-top-title {
	font-size: 23px;
}
body.font-large .table-top-title {
	font-size: calc(23px + 2px);
}
body.font-extra-large .table-top-title {
	font-size: calc(23px + 6px);
}

.introduction-table {
	width: 100%;
	margin-top: 26px;
	border-top: 1px solid #b4b4b4;
	border-collapse: collapse;
}

.tr-content {
	border-bottom: 1px solid #b4b4b4;
}

.table-label , .table-textarea {
	padding: 14px 0;
}

.table-label {
	width: 110px;
	padding-left: 15px;
	text-align: left;
}

.table-textarea {
	font-weight: normal;
}

.googlemap_container {
	max-width: 800px;
	margin: auto;
	margin-top: 34px;
}

.googlemap_container iframe {
	width: 100%;
}

.single_pager-nav {
	position: relative;
	max-width: 655px;
	margin: auto;
	margin-top: 20px;
}

.single_pager-list {
	display: flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.single_back-archive {
	display: flex;
	max-width: 264px;
	margin: auto;
	padding: 20px 66px;
	border: 2px solid #72522d;
	border-radius: 30px;
	background-color: #72522d;
	color: #ffffff;
	justify-content: center;
	align-items: center;
	transition: all 0.5s;
	position: relative;
	z-index: 2;
}

.single_back-archive:hover {
	background-color: #ffffff;
	color: #72522d;
}

.single_pager-item {
	width: 132px;
	padding-bottom: 10px;
	text-align: center;
}

.single_pager-item.single_pager-prev {
	background-image: url("../img/back_arrow.png");
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: 100%;
}

.single_pager-item.single_pager-next {
	margin-left: auto;
	background-image: url("../img/next_arrow.png");
	background-repeat: no-repeat;
	background-position-y: bottom;
	background-size: 100%;
}

.single_pager-item a {
	color: #72522d;
	font-size: 15px;
}
body.font-large .single_pager-item a {
	font-size: calc(15px + 2px);
}
body.font-extra-large .single_pager-item a {
	font-size: calc(15px + 6px);
}

@media screen and (max-width: 767px) {
	.office-title_container {
		display: block;
		position: relative;
	}
	.title-en {
		font-size: 43px !important;
	}
	body.font-large .title-en {
		font-size: calc(43px + 2px) !important;
	}
	body.font-extra-large .title-en {
		font-size: calc(43px + 6px) !important;
	}
	.sns-list {
		position: absolute;
		top: -40px;
		right: 0;
	}
	.introduction-img-list {
		row-gap: 16px;
	}
	.office-introduction {
		margin-top: 22px;
	}
	.introduction-img-list {
		margin-top: 22px;
	}
	.product_container {
		margin-top: 40px;
	}
	.product-item {
		width: 100%;
	}
	.product-list {
		justify-content: center;
	}
	.introduction-table {
		margin-top: 10px;
	}
	.single_pager-nav {
		width: calc(100% - 60px);
	}
	.single_pager-list {
		position: static;
		transform: none;
	}
	.single_back-archive {
		margin-top: 16px;
	}
}

@media screen and (max-width: 560px) {
	.product-item {
		max-width: 160px;
	}
	.product-button {
		padding: 13px 36px;
		font-size: 14px;
	}
	body.font-large .product-button {
		font-size: calc(14px + 2px) !important;
	}
	body.font-extra-large .product-button {
		font-size: calc(14px + 6px) !important;
	}
	.googlemap_container iframe {
		max-height: 270px;
	}
}