@charset "utf-8";

body * {
	font-weight: 400;
}
.lang {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 10px;
	z-index: 1000;
	img {
		width: 20px;
		display: inline-block;
		vertical-align: middle;
		margin-right: 5px;
	}
	span {
		display: inline-block;
		vertical-align: middle;
		font-size: 12px;
		font-family: 'Cormorant', serif;
		margin-top: 1px;
	}
}
/* -------------------------------------
	main
----------------------------------------*/
main {
	text-align: center;
	padding: 100px 0;
	.detail {
		padding-bottom: 0;
	}
}
main h1 {
	display: inline-block;
	width: 80%;
	font-family: 'Cormorant', serif;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-bottom: 70px;
}
main h1 span {
	display: block;
	font-family: 'Cormorant', serif;
	font-weight: 500;
	line-height: 1.5;
	padding-top: 1em;
}
main h2,
main .read {
	width: 90%;
	line-height: 1.8;
	font-family: 'Cormorant', serif;
	font-size: 12px;
	letter-spacing: 0.01em;
	margin: auto;
	padding-bottom: 100px;
}
@media screen and (min-width: 768px) {
	main {
		padding: 180px 0;
	}
	main h1 {
		width: 50%;
		font-size: 50px;
	}
	main h2,
	main .read {
		width: 100%;
		font-size: 15px;
		text-align: center;
	}
}
/* -------------------------------------
detail
----------------------------------------*/
.detail {
	padding-bottom: 80px;
	&.pb0 {
		padding-bottom: 0;
	}
}
.detail>div,
.detail>div+div {
	position: relative;
	width: 90%;
	margin: auto;
}
.detail>div+div {
	padding: 100px 0;
}
.detailImage>div {
	width: 49%;
	display: inline-block;
	text-align: right;
}
.detailImage>div img {
	vertical-align: middle;
}
.detail p,
.content-box p {
	line-height: 2;
	padding-bottom: 2em;
}
@media screen and (min-width: 768px) {
	.detail {
		padding-bottom: 150px;
	}
	.detail>div {
		width: 80%;
	}
	.detail>div+div {
		width: 60%;
		padding: 200px 0;
	}
	.detailImage>div img {
		width: 90%;
	}
	.detail>div+div p {
		font-size: 14px;
	}
}

/* -------------------------------------
.content-box
----------------------------------------*/
.content-box {
	width: 90%;
	text-align: center;
	margin: auto;
	padding-bottom: 80px;
	div {
		text-align: left;
	}
}
.content-box h3,
.content-box .content-title {
	font-family: 'Cormorant', serif;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-bottom: 2em;
	.sub-title {
		display: block;
		font-size: 16px;
		padding-top: 2em;
	}
}
.content-box h4,
.content-box .read {
	font-family: 'Cormorant', serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding-bottom: 1em;
	&.space-type {
		padding-bottom: 2em;
	}
}
.content-box dl {
	text-align: left;
}
.content-box dt,
.content-box dd {
	line-height: 2;
}
.content-box dt {
	font-size: 16px;
	font-weight: 500;
}
.definition {
	dt {
		font-size: 16px;
		line-height: 1.5;
		font-weight: 500;
		letter-spacing: 0.01em;
		padding-bottom: .5em;
		&.space-type {
			padding-bottom: 2em;
		}
	}
}
.content-box .note {
	text-align: left;
	padding-top: 1em;
}
@media screen and (min-width: 768px) {
	.content-box {
		padding-bottom: 150px;
	}
	.content-box>div p {
		font-size: 14px;
	}
	.content-box h3,
	.content-box .content-title  {
		font-size: 40px;
		padding-bottom: 2em;
	}
	.content-box h4,
	.content-box .read {
		font-size: 18px;
		&.space-type {
			padding-bottom: 4em;
		}
	}
	.content-box dl {
		text-align: left;
		display: table;
		width: 100%;
	}
	.content-box dt {
		display: table-cell;
		width: 28%;
	}
	.definition {
		display: block;
		dt {
			display: block;
			width: 100%;
			font-size: 18px;
			padding-bottom: 1em;
			&.space-type {
				padding-bottom: 4em;
			}
		}
	}
}
@media screen and (min-width: 1200px) {
	.content-box {
		.inner-content {
			width: 60%;
			margin: auto;
		}
	}
}

.inner-box {
	padding-bottom: 30px;
	@media screen and (min-width: 768px) {
		padding-bottom: 60px;
	}
}

.inner-block {
	p {
		padding-bottom: 0;
		&+p {
			padding-top: 1em;
		}
	}
	&+.inner-block {
		padding-top: 20px;
		margin-top: 20px;
		border-top: 1px solid #eee;
	}
	@media screen and (min-width: 768px) {
		&+.inner-block {
			padding-top: 25px;
			margin-top: 25px;
		}
	}
}
/* b2b.css の末尾に */

#contentNav {
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

header.open #contentNav {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	>div {
		width: 100%;
		&+div {
			margin-top: 20px;
		}
	}
	.image-container {
		text-align: center;
		img {
			width: 80%;
		}
		>div {
			text-align: center;
			&+div {
				margin-top: 20px;
			}
		}
	}
	@media screen and (min-width: 768px) {
		>div {
			width: calc((100% - 50px) / 2);
			&+div {
				margin-top: 0;
			}
		}
		.image-container {
			text-align: center;
			img {
				width: 100%;
			}
			>div {
				&+div {
					margin-top: 50px;
				}
			}
		}
	}
}