@charset "UTF-8";

:root
{
	--brown-a: #F7F3EE;
	--brown-b: #E8DBCA;
	--brown-c: #C3AD8F;
	--brown-d: #795624;
	--green: #7EB581;
	--gold: #AA895A;
	--red: #F85353
}

hgroup
{
	text-align: left;
	margin: 0 auto;
}

hgroup p
{
	margin-bottom: 0;
}

.check
{
	margin: 20px auto 50px;
	width: 872px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 2;
}

.check h2
{
	position: relative;
	display: block;
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
	color: var(--bl);
	margin: 0 auto;
	padding-bottom: 1em
}

@media screen and (max-width:999px)
{
	.check
	{
		width: 90%;
		text-align: left;
		line-height: 1.8;
		margin: 20px auto 20px;
	}

	.check h2
	{
		font-size: 1.7rem;
	}

}

.list
{
	background: var(--lbl);
	padding: 80px 0 40px;
}

.list p.intro
{
	text-align: center;
	font-size: 1.7rem;
	font-weight: 600
}

.list h2
{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	margin: 40px 0;
	font-size: 2rem;
	font-weight: 600
}

.list h2 img
{
	width: 39px;
	padding-bottom: 0;
	margin: 0 20px
}

.list ul
{
	display: flex;
	flex-wrap: wrap
}

.list ul li
{
	position: relative;
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 40px;
	padding: 17px 2% 15px;
	background: #fff;
}

.list ul li:nth-child(3n)
{
	margin-right: 0;
}

.list .number
{
	position: absolute;
	top: 5px;
	right: 5px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	font-weight: 600;
	color: #fff
}

.list img
{
	padding-bottom: 10px;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.list figcaption
{
	color: var(--bl);
	font-size: 1.4rem;
	line-height: 1.4;
}

.list figcaption span
{
	font-size: 1.4rem;
	font-weight: 600;
	display: block;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px dotted var(--bl);
}

@media screen and (max-width:999px)
{
	.list
	{
		margin-bottom: 0;
		padding: 40px 0;
	}

	.list p.intro
	{
		font-size: 1.5rem;
		text-align: left
	}

	.list h2
	{
		font-size: 2rem;
		margin: 20px 0
	}

	.list ul li
	{
		padding: 10px 3%;
		width: 100%;
		margin-bottom: 15px;
		margin-right: 0;
	}

	.list ul li::after,
	.list ul li::before
	{
		display: none
	}

	.list .number
	{
		display: none
	}

	.list figure
	{
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse
	}

	.list figure img
	{
		width: 80px;
		height: 80px;
		object-fit: cover;
		padding-bottom: 0
	}

	.list figcaption
	{
		width: calc(100% - 90px)
	}

	.list figcaption
	{
		font-size: 1.3rem;
		line-height: 1.3
	}

	.list figcaption span
	{
		font-size: 1.5rem
	}
}

.case
{
	max-width: 85%;
	width: 850px;
	margin: 48px auto 100px
}

.case p.title_en
{
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--gold);
	padding-bottom: 10px;
	text-align: center
}

.case hgroup h1
{
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
	padding-bottom: 45px
}

.case .anotation
{
	position: relative;
	background: var(--lbl);
	padding: 26px 0;
	text-align: center;
	color: var(--bl);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.8;
	margin-bottom: 30px
}

.case .anotation::before
{
	position: absolute;
	content: '';
	width: 17px;
	height: 11.92px;
	top: -8px;
	left: 0;
	background-image: url(../img/interview/anotation.svg);
	background-size: contain
}

.case .anotation::after
{
	position: absolute;
	content: '';
	width: 17px;
	height: 11.92px;
	bottom: -8px;
	right: 0;
	background-image: url(../img/interview/anotation.svg);
	background-size: contain;
	transform: rotate(180deg)
}

.case .q_voice
{
	display: flex;
	align-items: center;
	margin-top: 30px
}

.case .q_voice dt
{
	width: 28px;
	margin-right: 1em
}

.case .q_voice dd
{
	font-size: 1.8rem;
	font-weight: 600;
	width: calc(100% - 55px)
}

.case .a_voice
{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-bottom: 50px
}

.case .a_voice.first
{
	margin-bottom: 10px
}

.case .a_voice dd
{
	position: relative;
	padding-top: 52px;
	font-size: 1.55rem;
	line-height: 1.75
}

.case .a_voice dd::after
{
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background: #000;
	left: 0;
	top: 20px
}

.case .a_voice .yellow
{
	background: linear-gradient(transparent 60%, #FFFF69 0)
}

.case .a_voice img
{
	width: 52px
}

.case .interview_img
{
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap
}

.case .interview_img img
{
	width: 60%;
	margin-bottom: 42px
}

.case .interview_img.right img
{
	margin-left: 40%
}

.case .interview_img .caption
{
	position: relative;
	display: inline-block;
	width: 36%;
	background: var(--lbl);
	color: var(--bl);
	padding: 1.1em;
	margin-top: 30px;
	font-size: 1.55rem;
	font-weight: 600
}

.case .interview_img .caption.right:before
{
	position: absolute;
	content: '';
	bottom: -14.51px;
	left: 22px;
	width: 20.24px;
	height: 14.51px;
	background-image: url(../img/interview/caption-arrow.svg);
	background-size: contain
}

.case .interview_img .caption.left:before
{
	position: absolute;
	content: '';
	bottom: -14.51px;
	right: 22px;
	width: 20.24px;
	height: 14.51px;
	transform: rotateY(180deg);
	background-image: url(../img/interview/caption-arrow.svg);
	background-size: contain
}

.case #main_img.interview_img
{
	display: block
}

.case #main_img.interview_img img
{
	width: 100%;
	height: 490px;
	object-fit: cover;
}

.case .gallery
{
	margin-top: 70px
}

.case .gallery hgroup p
{
	color: #000
}

.case .gallery ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 15px
}

.case .gallery ul li
{
	width: 32%;
	margin-bottom: 20px
}

.case .article_navi
{
	display: flex;
	justify-content: center;
	margin-top: 60px;
	font-size: 1.8rem;
	text-decoration: underline
}

.case .article_navi .previous_link
{
	margin-right: 40px
}

.case .article_navi .next_link
{
	margin-right: 40px
}

.case .article_navi .category_link a
{
	color: var(--bl);
}

.case .article_navi .previous_link a,
.case .article_navi .next_link a
{
	color: var(--gold);
	display: flex
}

.case .article_navi .previous_link a img,
.case .article_navi .next_link a img
{
	width: 16px;
	margin-left: 8px
}

@media screen and (max-width:600px)
{
	.case
	{
		margin-top: 28px;
		margin-bottom: 50px;
	}

	.case p.title_en
	{
		font-size: 1.5rem;
		padding-bottom: 5px;
		text-align: center
	}

	.case hgroup h1
	{
		font-size: 2rem;
		padding-bottom: 25px
	}

	.case .anotation
	{
		font-size: 1.5rem;
		padding: 10px;
		margin-bottom: 20px
	}

	.case .q_voice dd
	{
		font-size: 1.6rem;
		width: calc(100% - 30px)
	}

	.case .a_voice dd
	{
		position: relative;
		margin-left: 0;
		width: 100%;
		font-size: 1.45rem
	}

	.case .a_voice dd::before
	{
		right: 30px
	}

	.case .a_voice dt
	{
		position: absolute;
		background: #fff;
		z-index: 2
	}

	.case .a_voice img
	{
		width: 45px;
		height: 45px
	}

	.case .a_voice
	{
		margin-bottom: 30px
	}

	.case .interview_img
	{
		margin-bottom: 40px
	}

	.case .interview_img img
	{
		width: 100%;
		margin-bottom: 15px
	}

	.case .interview_img.right img
	{
		margin-left: 0
	}

	.case .interview_img .caption
	{
		margin-top: 0;
		width: 100%;
		font-size: 1.4rem;
		margin-left: 0
	}

	.case .interview_img .caption.right:before
	{
		bottom: auto;
		top: -14.51px;
		transform: rotatex(180deg)
	}

	.case .interview_img .caption.left:before
	{
		transform: rotateY(355deg);
		right: 30%
	}

	.case .gallery
	{
		margin-top: 40px
	}

	.case .gallery ul
	{
		margin-top: 5px
	}

	.case .gallery ul li
	{
		width: 48%
	}

	.case .article_navi
	{
		font-size: 1.4rem;
		display: block;
		text-align: center;
		margin-top: 30px;
	}

	.case .article_navi .category_link
	{
		margin-right: 0;
		margin-bottom: 1em
	}

	.case .article_navi .previous_link a,
	.case .article_navi .next_link a
	{
		justify-content: center;
		margin-bottom: 1em;
	}
}