@charset "utf-8";

/* interview-music
---------------------------------------------------------------------------*/
:root {
	--color-txt: #402916;
	--color-orange: #F0974F;
	--color-orange-btn: #F6AD64;
	--font-gothic-jp: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Sans', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'メイリオ', Meiryo, sans-serif;
	--font-gothic-jp-title: "Noto Sans JP", '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}

/*#btnDoorRomper {
	display: none;
}*/
body:has( .interview1) {
	background-image: none !important;
	padding-bottom: 0;
}

body:has( .interview1) #bottomWrap {
	display: none !important;
}

#mainContents {
	font-feature-settings: 'palt' 1;
	min-width: 1200px;
	padding-top: 45px;
}

figure {
	margin: 0;
	font-size: 0;
}

.fade-wrap {
	color: var(--color-txt);
	font-family: var(--font-gothic-jp);
	/*opacity: 0;*/
}

.fade-wrap * {
	box-sizing: border-box;
}

.fade-wrap p:last-of-type {
	margin-bottom: 0 !important;
}

.fade-wrap a {
	transition: .15s ease-out;
}

.fade-wrap a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.btn-btm {
	width: 100%;
	margin-top: 50px;
}

.btn-btm a {
	display: block;
	background: var(--color-orange-btn) url(../img/interview-music/btn-arrow-orange-white.svg) no-repeat right 26px center / 20px auto;
	border-radius: 4px;
	padding: 20px 20px 22px;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.15em;
	text-align: center;
	text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.img-btm {
	width: 90%;
	max-width: 1174px;
	margin: 100px auto 0;
}

.img-btm img {
	width: 100%;
}

/* .interview-title
------------------------------------*/
.interview-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1060px;
	margin: 0 auto 160px;
}

.interview-title .title {
	margin-bottom: 45px;
	text-align: center;
}

.interview-title .title nav {
	margin: -42px auto 0;
}

.interview-title .title nav li {
	display: inline-block;
}

.interview-title .title nav li span,
.interview-title .title nav li a {
	display: block;
	position: relative;
	padding: 10px;
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.2em;
}

.interview-title .title nav li:first-of-type span,
.interview-title .title nav li:first-of-type a {
	padding-left: 35px;
}

.interview-title .title nav li:last-of-type span,
.interview-title .title nav li:last-of-type a {
	padding-right: 31px;
}

.interview-title .title nav li a:before {
	display: block;
	content: '';
	position: absolute;
	bottom: 8px;
	background-color: #402916;
	height: 1px;
}

.interview-title .title nav li:first-of-type a:before { right: 13px; width: calc(100% - 48px); }
.interview-title .title nav li:last-of-type a:before { left: 10px; width: calc(100% - 45px); }

.interview-title .title nav li span:after,
.interview-title .title nav li a:after {
	display: block;
	content: '';
	position: absolute;
	top: 6px;
	background: url(../img/interview-music/btn-arrow-orange.svg) no-repeat left top / 24px auto;
	width: 24px;
	height: 24px;
}

.interview-title .title nav li:first-of-type span:after,
.interview-title .title nav li:first-of-type a:after {
	left: 0;
	transform: scaleX(-1);
}

.interview-title .title nav li:last-of-type span:after,
.interview-title .title nav li:last-of-type a:after {
	right: 0;
}

.interview-title .title nav li span {
	opacity: 0.4;
}

.interview-title .profile h2 {
	margin: 0 0 16px -2px;
	color: #8CC11E;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.interview-title .profile ul {
	background: url(../img/interview-music/bg-line.svg) repeat left top / 1px 22px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
	padding: 8px 15px 9px;
}

.interview-title .profile li {
	display: flex;
	align-items: center;
}

.interview-title .profile figure {
	width: 72px;
	min-width: 72px;
	margin-right: 12px;
}

.interview-title .profile h3 {
	margin-bottom: 5px;
	letter-spacing: 0.08em;
}

.interview-title .profile h3 em {
	font-weight: 600;
	font-size: 11px;
}

.interview-title .profile h3 strong {
	display: block;
	margin-top: 9px;
	font-weight: 600;
	font-size: 17px;
}

.interview-title .profile h3 strong em {
	padding-left: 2px;
}

/* .interview-lead
------------------------------------*/
.interview-lead {
	position: relative;
	width: 975px;
	margin: -20px auto 150px;
	padding: 65px 0 0 228px;
}

.interview-lead .pic {
	display: block;
	position: absolute;
	top: -95px;
	right: -3px;
}

.interview-lead .title {
	position: absolute;
	top: -5px;
	left: 35px;
}

.interview-lead h2 {
	color: var(--color-orange);
	font-family: var(--font-gothic-jp-title);
	font-weight: 500;
	font-size: 25px;
	line-height: 1.95;
	letter-spacing: 0.25em;
	font-feature-settings: 'palt' 0;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	white-space: nowrap;
}

.interview-lead h2 span {
	display: inline-block;
	margin: -6px 0 3px;
	letter-spacing: 0.1em;
	transform: rotate(-90deg) translateY(1px);
}

.interview-lead .title .pic1 {
	display: block;
	position: absolute;
	top: -55px;
	right: -45px;
}

.interview-lead .title .pic2 {
	display: block;
	position: absolute;
	bottom: 34px;
	left: -52px;
}

.interview-lead h3 {
	position: absolute;
	top: -2px;
	right: 18px;
}

.interview-lead p {
	margin-bottom: 15px;
	font-size: 17px;
	line-height: 2.4;
	letter-spacing: 0.19em;
}

/* .interview-wrap
------------------------------------*/
.interview-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 1060px;
	margin: 0 auto;
	padding-right: 15px;
}

/* .interview-img
------------------------------------*/
.interview-img-wrap {
	overflow: hidden;
	position: sticky;
	top: -1px;
	left: 0;
	width: 370px;
	height: calc(100vh + 1px);
	margin: 0 -10px;
	padding: 0 10px;
	opacity: 0;
}

.interview-img {
	position: relative;
	overflow: hidden;
	height: 100vh;
}

.interview-img-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.interview-img:has( .interview-img-slide.active):before,
.interview2 .interview-img-wrap:after {
	display: block;
	content: '';
	position: absolute;
	left: -10px;
	background-color: #F2E1B9;
	width: calc(100% + 20px);
	height: 1px;
	z-index: 10;
}

.interview-img:has( .interview-img-slide.active):before { top: 0; }
.interview2 .interview-img-wrap:after { bottom: 0; }

.interview-img-slide figure {
	padding-bottom: 32px;
	text-align: center;
}

.interview-img-slide figure img {
	border-radius: 10px;
}

/* .interview-txt
------------------------------------*/
.interview-txt {
	width: 550px;
	padding: 65px 0 45px;
	opacity: 0;
}

.interview2 .interview-txt {
	padding-bottom: 0;
}

.interview-txt-lead {
	position: relative;
	margin-bottom: 50px;
}

.interview2 .interview-txt-lead {
	margin-bottom: 27px;
}

.interview-txt-lead .pic {
	position: absolute;
	top: -92px;
	right: -5px;
}

.interview2 .interview-txt-lead .pic {
	top: -110px;
}

.interview-txt-lead h2 {
	margin-bottom: 13px;
}

.interview-txt-lead h3 {
	margin-bottom: 19px;
	color: var(--color-orange);
	font-family: var(--font-gothic-jp-title);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.85;
	letter-spacing: 0.21em;
}

.interview-txt-lead p {
	font-size: 15px;
	line-height: 2.3;
	letter-spacing: 0.16em;
}

.interview-txt-common {
	margin-bottom: 50px;
}

.interview-txt-common .img {
	margin-bottom: 55px;
}

.interview-txt-common .img:last-child {
	margin-top: 50px;
	margin-bottom: 0;
}

.interview-txt-common .img2 {
	position: relative;
	margin-bottom: 55px;
}

.interview-txt-common .img2-2 {
	position: absolute;
	top: 67px;
	right: 0;
}

.interview-txt-common .img2-2 .pic {
	position: absolute;
	top: -83px;
	right: 6px;
}

.interview-txt-common .img2-3 {
	margin: 31px 0 0 41px;
}

.interview-txt-common .img4 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

.interview-txt-common .img4-2 {
	margin-top: 52px;
}

.interview-txt-common .img7 {
	position: relative;
	margin-bottom: 120px;
}

.interview-txt-common .img7-1 {
	position: relative;
	width: 320px;
}

.interview-txt-common .img7-1 .pic {
	display: block;
	position: absolute;
	top: -24px;
	right: -68px;
}

.interview-txt-common .img7-2 {
	position: absolute;
	top: 109px;
	right: 0;
}

.interview-txt-common .img7-3 {
	margin: 51px 0 0 28px;
}

.interview-txt-common .img7-4 {
	position: absolute;
	top: 355px;
	right: 19px;
}

.interview-txt-common .img7-4 .pic {
	display: block;
	position: absolute;
	top: -17px;
	right: 6px;
}

.interview-txt-common .img8 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

.interview-txt-common h4 {
	margin-bottom: 28px;
}

.interview-txt-common dl {
	display: flex;
	font-size: 14px;
	line-height: 2.15;
	letter-spacing: 0.05em;
}

.interview-txt-common dl:not(:last-child) {
	margin-bottom: 21px;
}

.interview-txt-common dt {
	width: 37px;
	min-width: 37px;
	font-weight: 600;
	letter-spacing: 0.2em;
	white-space: nowrap;
}

.interview-txt-common dd {
	width: 100%;
}

.interview-txt-common dd p {
	margin-bottom: 14px;
	text-align: justify;
}