@charset "utf-8";

/* ============================================================
   社員インタビュー 専用スタイル
============================================================ */


/* ─────────────────────────
   下層：最下部導線
───────────────────────── */
.rec-au-foot-item.interview,
.rec-au-foot-item.crosstalk{
    display: none;
}


/* ─────────────────────────
   1. イントロ
───────────────────────── */
.intro-area .inner{
    display: flex;
    justify-content: space-between;
    gap: 0 50px;
}
.intro-area .txt{
    width: 600px;
}
.intro-area .outline-area {
}

@media screen and (max-width: 768px) {
    
    .intro-area .inner{
        display: block;
    }
    .intro-area .txt{
        width: 100%;
    }

}


/* ─────────────────────────
   社員インタビュー一覧
───────────────────────── */
.rec-interview-area {
    padding: 60px 0 80px;
}

@media screen and (max-width: 768px) {
	.rec-interview-area {
		padding: 50px 20px 30px;
	}
}


/* ─────────────────────────
   クロストーク
───────────────────────── */
.rec-crosstalk-area {
	min-height: 450px;
	position: relative;
}
.rec-crosstalk-area .block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rec-crosstalk-area .img-area {
	width: 600px;
    height: 450px;
}
.rec-crosstalk-area .img-area img {
}

.rec-crosstalk-area .txt-area {
	width: calc(100% - 660px);
}
.rec-crosstalk-area .rec-btn {
	display: flex;
	justify-content: end;
}

@media screen and (max-width: 768px) {
	.rec-crosstalk-area {
        padding: 50px 20px;
        background: var(--recbg);
	}
    .rec-crosstalk-area .block {
        display: block;
    }
	.rec-crosstalk-area .img-area {
		width: 100%;
        height: 200px;
	}

	.rec-crosstalk-area .txt-area {
		width: 100%;
		padding: 30px 0 0;
	}
	.rec-crosstalk-area .rec-btn {
		display: block;
	}
}