@charset "utf-8";

/* 
Theme Name: original 
*/
/* 全共通 start */
.h_bar,
#beltbnr {
	display: none;
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 70px;
}
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
ul,
li {
	list-style: none;
}
/* img {
	width: 100%;
	height: auto;
	vertical-align: middle;
} */
p.par,
dt.interview-qa,
dd.interviewer,
span.c-font {
	font-size: 1.4rem;
	letter-spacing: .02em;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
}
dt.interview-qa {
	font-weight: 600;
	margin-top: 24px;
}
dd.interviewer {
	padding-top: 8px;
}
a.c-btn {
	border-radius: 1px;
	color: #333333;
	font-size: 1.4rem;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
}
a.btn {
	background: #2b3a35;
	border: 1px solid #2b3a35;
	color: #FFFFFF;
	width: 25%;
	height: 28px;
	line-height: 28px;
	text-align: center;
	transition: all .3s;
}
a.txt-btn {
	text-decoration: underline;
}
.wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.wrap-w {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-top: 6px;
}
.column {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 75px;
}
.gray {
	color: #999999;
}
.grn {
	color: #314a32;
}
.bur {
	color: #4a0712;
}

/* コンテンツ */
.pc-img {
	display: block;
}
.sp-img {
	display: none;
}
.p-article--vis__img img {
	width: 900px;
	margin: 0 auto;
}
.l-content--body {
	color: #333333;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-weight: 400;
	font-style: normal;
	overflow: hidden;
	margin: 0 auto;
}
/* リード */
article {
	width: 824px;
	margin: 0 auto;
}
.lead {
	text-align: center;
	padding-top: 74px;
	padding-bottom: 60px;
}
.anchor-area {
	width: 85%;
	margin: 0 auto;
	padding-bottom: 64px;
}
.anchor-area li {
	width: 25%;
	position: relative;
}
.anchor-area li a::after {
	background: #333333;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mix-blend-mode: multiply;
	opacity: .6;
}
.anchor-area li a p span {
	position: static;
	color: #FFFFFF;
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	z-index: 1;
}
.anchor-area li a p span,
.anchor-area li a p span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	white-space: nowrap;
}
.anchor-area li a p span::after {
	content: attr(data-label);
	font-size: 1.1rem;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-weight: 400;
	font-style: normal;
	top: 30px;
}
.anchor-area li img {
	aspect-ratio: 3/2;
}

/* カタログ */
.l-row {
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
}
.sec {
	position: relative;
	margin-top: 90px;
	margin-bottom: 90px;
}
.head {
	display: block;
	text-align: center;
}
.en-detail {
	font-size: 1.6rem;
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.head h2 {
	font-size: 1.4rem;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-weight: 900;
	font-style: normal;
	margin-top: 28px;
	margin-bottom: 20px;
	letter-spacing: .04em;
	line-height: 1.8;
	position: relative;
}
#Catalog .head h2 {
	font-size: 2.0rem;
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}
.l-container > .l-row > article:not(#Interview) .sec h2::before {
	content: "";
	width: 1px;
	height: 44px;
	background: #333333;
	position: absolute;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.l-container > .l-row > article:not(#Catalog) .sec h2::before {
	top: 44px;
}
.sec h2::after {
	content: attr(data-label);
	font-size: 1.2rem;
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	white-space: nowrap;
}
.main-item {
	width: 75%;
	margin: 0 auto;
	padding-top: 75px;
}
.img-item {
	margin-bottom: 8px;
}
.credit-item .wrap-w:not(:first-child) {
	margin-top: 4px;
	padding-top: 0;
}
.wrap-w p {
	margin-right: 8px;
}
.list-item--area {
	width: 85%;
	margin: 0 auto;
	padding-top: 32px;
}
.list-item li {
	width: 32%;
	margin-top: 20px;
}

/* インタビュー */
.img-interview + p {
	padding-top: 7px;
}
.img-interview {
	margin-top: 14px;
}
.main-interview,
dl.interview-block {
	width: 75%;
	margin: 0 auto;
}

/* トピック */
.main-topic {
	width: 44%;
}
.c-cap {
	width: 52%;
}
.img-topic + .img-topic {
	margin-top: 20px;
}
.credit-list {
	margin-top: 11px;
}
.credit-list li {
	padding-top: 17px;
}
.credit-list .wrap p {
	line-height: 1.5;
	position: relative;
}
.credit-list .wrap p::after {
	content: attr(data-label);
	color: #666666;
	font-size: 1.1rem;
	font-family: "Yu Mincho", "YuMincho", serif;
	font-weight: 400;
	font-style: normal;
	position: absolute;
	top: 42px;
	left: 0;
}

/* イベント */
.img-event {
	width: 44%;
}

/* 一覧ボタン */
.all-item {
	width: 35%;
	margin: 0 auto;
	padding-top: 72px;
	padding-bottom: 120px;
}
.all-item a {
	display: block;
	width: 100%;
	height: 56px;
	line-height: 56px;
}

/* ふわっと start */
.js-fade--in {
	opacity: 0;
}
.js-fade--in.active {
	animation:  fadeIn 1s ease forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media(min-width: 769px) {
	a.btn:hover {
		background: #FFFFFF;
		color: #2b3a35;
	}
	.anchor-area li::after:hover {
		pointer-events: all;
	}
	a:hover img {
		transition: all .3s;
	}
}

@media(max-width: 768px) {
	/* 全共通 start */
	html {
		scroll-padding-top: 0;
	}
	.column {
		display: block;
		padding-top: 52px;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* コンテンツ */
	.pc-img {
		display: none;
	}
	.sp-img {
		display: block;
	}
	.l-article--header img {
		width: 100%;
	}
	.l-article--body > article {
		padding-left: 20px;
		padding-right: 20px;
	}
	article {
		width: 100%;
	}
	.lead {
		text-align: left;
		padding-top: 34px;
		padding-bottom: 28px;
	}
	.anchor-area {
		width: 100%;
		padding-bottom: 32px;
	}
	.anchor-area li {
		width: 50%;
	}
	.sec {
		margin-top: 45px;
		margin-bottom: 45px;
	}
	.sec h2::after {
		top: 28px;
	}
	.l-container > .l-row > article:not(#Interview) .sec h2::before {
		top: 52px;
	}
	.l-container > .l-row > article:not(#Catalog) .sec h2::before {
		top: 32px;
	}
	.main-item {
		width: 100%;
		padding-top: 60px;
	}
	.credit-item {
		padding-left: 20px;
	}
	.list-item--area {
		width: 89.5%;
		padding-top: 16px;
	}
	.list-item li {
		width: 48%;
	}

	/* interview */
	#Interview .head {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cap {
		text-align: left;
	}
	.main-interview,
	dl.interview-block {
		width: 100%;
	}
	.main-interview p {
		padding-left: 20px;
	}
	dt.interview-qa,
	dd.interviewer {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Topic */
	.main-topic,
	.img-event,
	.c-cap {
		width: 100%;
	}
	.c-cap {
		padding-top: 26px;
	}


	/* 一覧ボタン */
	.all-item {
		width: 70%;
		padding-top: 36px;
		padding-bottom: 60px;
	}
	.all-item a {
		height: 40px;
		line-height: 40px;
	}
}