@charset "UTF-8";
/* CSS Document */


/*
=========================================
Original Layout
=========================================
*/

.header.bg-color--01{
	background-color: #f0ebe1;
}
.header.bg-color--02{
	background-color: var(--color-drawer-hover);
}
main.bg-color--01{
	background-color: #f0ebe1;
}
main.bg-color--02{
	background-color: var(--color-drawer-hover);
}
.page-heading{
	z-index: 1;
}
.page-heading::before{
	background-color: var(--color-drawer-bg);
}

section.magazine{
	letter-spacing: 0.03em;
}

/*
=========================================
Magazine - Lead
=========================================
*/
.magazine__lead{
	margin-bottom: 3.8rem;
}
.magazine__lead h3{
	text-align: center;
	margin-bottom: 1.0rem;
}
.magazine__lead img{
	max-width: 23.6rem;
	height: auto;
	margin: auto;
	margin-bottom: 3.0rem;
}
@media (max-width: 767px){
	.magazine__lead img{
		width: 60%;
	}
}
.magazine__lead p{
	max-width: 70.0rem;
	margin-inline: auto;
	text-align: justify;
	letter-spacing: 0.04em;
	line-height: 1.9;
}


/*
=========================================
Magazine --single all
=========================================
*/
.magazine__article{
	max-width: 90.0rem;
	margin-inline: auto;
}

/* article pagination */

.magazine__article-pagination{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: 1.8rem;
	font-size: 1.8rem;
	margin-bottom: 2.0rem;
	color: #644600;
}
.magazine__article-pagination.pagination--prev{
	justify-content: flex-start;
}
@media (max-width: 767px){
	.magazine__article-pagination{
		font-size: 1.4rem;
		column-gap: 1.4rem;
	}
}
.magazine__article-pagination .circle-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9.5rem;
	height: 9.5rem;
	border-radius: 50%;
	background-color: #f0ebe1;
	transition: background 0.3s;
}
.magazine__article-pagination.pagination--prev .circle-btn{
	background-color: var(--color-drawer-bg);
}
@media (max-width: 767px){
	.magazine__article-pagination .circle-btn{
		width: 5.5rem;
		height: 5.5rem;
	}
}
.magazine__article-pagination .circle-btn:hover{
	background-color: #644600;
}
.magazine__article-pagination .circle-btn .circle-btn__arrow{
	display: inline-block;
	width: 2.2rem;
	height: 2.2rem;
	border-right: 6px solid #644600;
	border-bottom: 6px solid #644600;
	transform: rotate(-45deg) translateX(-3px) translateY(-1px);
	transition: border-color 0.3s;
}
@media (max-width: 767px){
	.magazine__article-pagination .circle-btn .circle-btn__arrow{
		width: 1.4rem;
		height: 1.4rem;
		border-right: 4px solid #644600;
		border-bottom: 4px solid #644600;
	}
}
.magazine__article-pagination .circle-btn:hover .circle-btn__arrow{
	border-color: #f0ebe1;
}

/*
=========================================
Magazine - article headline
=========================================
*/
.magazine__article-headline{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 3.5rem;
	margin-bottom: 3.0rem;
}
@media (max-width: 899px){
	.magazine__article-headline{
		flex-direction: column-reverse;
	}
}
.magazine__article-headline img{
	width: 100%;
	max-width: 46.9rem;
	height: auto;
	flex-shrink: 0;
}
.magazine__article-headline .article-title{
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-feature-settings: "palt";
}
@media (max-width: 899px){
	.magazine__article-headline .article-title{
		align-self: auto;
		gap: 1.6rem;
	}
}
.magazine__article-headline .article-title h3{
	font-size: clamp(2.7rem, calc(27px + (30 - 27) * ((100vw - 900px) / (1440 - 900))), 3.0rem);
	font-weight: 500;
}
@media (max-width: 899px){
	.magazine__article-headline .article-title h3{
		font-size: clamp(2.0rem, calc(20px + (26 - 20) * ((100vw - 375px) / (899 - 375))), 2.6rem);
		font-weight: 500;
	}
}
.magazine__article-headline .article-title h3 span{
	font-size: clamp(1.6rem, calc(16px + (23 - 16) * ((100vw - 375px) / (1440 - 375))), 2.3rem);
}
.magazine__article-headline .article-title .article-date{
	font-family: "DotGothic16", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.0rem;
	text-align: right;
}
.magazine__article-headline .article-credit{
	font-family: "Barlow Condensed", sans-serif;
	font-weight: bold;
	font-style: normal;
}


/*
=========================================
Magazine - article interviewee
=========================================
*/
.magazine__article-interviewee{
	margin-bottom: 3.5rem;
}
.magazine__article-interviewee img{
	width: 8.3rem;
	margin-bottom: 1.6rem;
}
@media (max-width: 767px){
	.magazine__article-interviewee img{
		margin-bottom: 0.8rem;
	}
}
.magazine__article-interviewee h3{
	font-size: var(--font-heading);
	font-weight: 500;
	padding-bottom: 4.2rem;
	border-bottom: 1px solid #4b4b4b;
	margin-bottom: 3.7rem;
}
@media (max-width: 767px){
	.magazine__article-interviewee h3{
		padding-bottom: 2.2rem;
		margin-bottom: 2.7rem;
	}
}
.magazine__article-interviewee p{
	font-size: 1.3rem;
	text-align: justify;
	line-height: 1.8;
}


/*
=========================================
Magazine - article body
=========================================
*/
.magazine__article-body{
	background-color: var(--color-drawer-bg);
	padding: 4.4rem 10.0rem 6.0rem;
	font-size: 1.3rem;
	color: #644600;
}
@media (max-width: 767px){
	.magazine__article-body{
		padding: 4.0rem 2.0rem;
		font-size: 1.2rem;
	}
}
.magazine__article-body h4{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3.0rem;
	font-size: var(--font-heading);
	font-weight: 500;
	margin-bottom: 4.6rem;
}
@media (max-width: 767px){
	.magazine__article-body h4{
		gap: 2.0rem;
	}
}
.magazine__article-body h4 img{
	width: 4.0rem;
	height: auto;
}
.magazine__article-body .speaker-Interviewer{
	font-weight: 700;
	margin-bottom: 3.6rem;
}
.magazine__article-body .speaker-Interviewee{
	margin-bottom: 3.6rem;
	text-align: justify;
	line-height: 2.0;
}
.magazine__article-body>img{
	margin-bottom: 5.0rem;
}
.magazine__article-body>img.img--part-01{
	margin-bottom: 2.3rem;
}


/* Profile and Information */

.magazine__article-body .profile, .magazine__article-body .information{
	max-width: 70.0rem;
	margin-inline: auto;
	margin-bottom: 3.4rem;
}
@media (max-width: 767px){
	.magazine__article-body .profile, .magazine__article-body .information{
		max-width: none;
		width: 100%;
	}
}
.magazine__article-body .profile-heading, .magazine__article-body .info-heading{
	max-width: 13.0rem;
	padding: 1.4rem;
	border: 1.3px solid #644600;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom: none;
	text-align: center;
}
.magazine__article-body .info-heading{
	max-width: 16.4rem;
}

.magazine__article-body .profile-detail, .magazine__article-body .info-detail{
	border: 1.3px solid #644600;
	padding: 2.5rem;
	line-height: 1.8;
}
.magazine__article-body .profile-detail .name, .magazine__article-body .info-detail .title{
	font-size: 1.6rem;
	font-weight: 600;
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
}
@media (max-width: 767px){
	.magazine__article-body .profile-detail .name, .magazine__article-body .info-detail .title{
		font-size: 1.5rem;
	}
}
.magazine__article-body .profile-detail .occupation{
	font-weight: 600;
	margin-bottom: 2.8rem;
}
.magazine__article-body .profile-detail .career{
	margin-bottom: 4.0rem;
}
.magazine__article-body .profile-detail a:hover, .magazine__article-body .info-detail .title a:hover{
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.magazine__article-body .info-detail .description{
	display: flex;
	gap: 2.5rem;
}
@media (max-width: 767px){
	.magazine__article-body .info-detail .description{
		flex-direction: column;
		align-items: center;
	}
}
.magazine__article-body .info-detail .description p{
	flex: 1;
}
.magazine__article-body .info-detail .description img{
	width: 11.4rem;
	flex-shrink: 0;
}
.magazine__article-body .info-detail .description a:hover{
	opacity: 0.7;
	transition: 0.3s;
}