@charset "UTF-8";
#message .bg-bl{

	background: url(../images/message/bottom-pas.svg)no-repeat,#B3CFE5;
	background-position: bottom -1px center;
	background-size: 100%;

}
@media (max-width: 768px) {
	#message .bg-bl{
		padding-bottom: 80px
	}
}
/* =========================================================
 * #firstView (KV)
 * ========================================================= */
#message #firstView {
	position: relative;
background: url(../images/message/top-pas.svg)no-repeat;
	background-position: top center;
	background-size: 100%;
	padding-top: 100px
}
#message #firstView .mv{
	width: min(1300px,100%);
	margin: 0 auto
}
#message #firstView .mv img {
	display: block;
	width: 100%;
	height: auto;
}
#message #firstView .mv img.pc {
	display: block;
}
#message #firstView .mv img.sp {
	display: none;
}
@media (max-width: 768px) {
	#message #firstView{
		background: #deecf7;
		padding-top: 40px
	}
	#message #firstView .mv img.pc {
		display: none;
	}
	#message #firstView .mv img.sp {
		display: block;
	}
}

/* =========================================================
 * KV直下のマーキー(無限横スクロールテロップ)
 * ========================================================= */
#message .kv-marquee {
	width: 100%;
	overflow: hidden;
	padding: 30px 0;
}

#message .kv-marquee__track {
	display: flex;
	width: max-content;
	gap: 60px;
	animation: kv-marquee-scroll 40s linear infinite;
	will-change: transform;
}

#message .kv-marquee__item {
	font-size: 9rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.42);
	letter-spacing: 0.04em;
	white-space: nowrap;
	line-height: 1;
}

@keyframes kv-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {
	#message .kv-marquee {
		padding: 18px 0;
		background: #b3cfe5;
	}
	#message .kv-marquee__track {
		gap: 32px;
		animation-duration: 30s;
	}
	#message .kv-marquee__item {
		font-size: 4rem;
	}
}

/* マーキーをホバーで一時停止(任意) */
#message .kv-marquee:hover .kv-marquee__track {
	animation-play-state: paused;
}

/* =========================================================
 * スクロール連動フェードイン
 * JS(message.js)が対象要素に .js-fade を付与し、
 * IntersectionObserverでviewport入った時に .is-shown を追加する
 * ========================================================= */
.js-fade {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.js-fade.is-shown {
	opacity: 1;
	transform: none;
}

/* KV系は少し遅延でリッチに */
#message #firstView.js-fade { transition-delay: 0.1s; }
#message #firstView .kv-marquee.js-fade { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
	.js-fade {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =========================================================
 * #messageArea > .messageBloc
 *   - default: 写真左 / 内容右 (内容白背景・写真と重ねる)
 *   - .messageBloc--reverse: 写真右 / 内容左 (左右逆)
 * ========================================================= */
#message #messageArea {
	padding: 80px 0 100px;
}
#message .messageBloc {
	display: flex;
	align-items: flex-start;
/*	max-width: 1300px;*/
	margin: 0 auto 100px;
	position: relative;
}
#message .messageBloc:last-child {
	margin-bottom: 0;
}
#message .messageBloc{
	padding-left: 70px
}
#message .messageBloc.messageBloc--reverse{
	padding-right: 70px;
	padding-left: 0;
}
#message .messageBloc{
	padding-left: 70px
}
#message .messageBloc--reverse {
	flex-direction: row-reverse;
}

#message .messageBloc__photo {
	flex: 0 0 38%;
	position: relative;
	z-index: 2;
}
#message .messageBloc__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 内容ボックス: 白背景 + 写真と重なる(margin-leftで食い込む)
   ※ z-indexは指定しない(stacking context を作らない) → 写真より下に表示される */
#message .messageBloc__content {
	flex: 1;
	min-width: 0;
	background: #fff;
	padding: 75px 120px 50px 15vw;
	margin-left: -10%;
	margin-top: 100px;
	position: relative;
}
#message .messageBloc--reverse .messageBloc__content {
	margin-left: 0;
	margin-right: -10%;
	padding: 75px 15vw 50px 120px;
}

/* 見出し(Message + Ryuji Nakatake)は写真の上にも被せる
   ※ contentが stacking context を作らないので、headingのz-indexはphotoと同じレベルで効く */
#message .messageBloc__heading {
	position: relative;
	z-index: 10;
	margin-bottom: 60px;
	margin-left: -13vw;
}
#message .messageBloc--reverse .messageBloc__heading {
	margin-left: 0;
	margin-right: -13vw;
	text-align: right;
	    margin-top: -200px;
}

#message .messageBloc__label {
	display: block;
	height: 235px;
	width: auto;
	margin: -170px 0 -18px 0;
	position: relative;
	z-index: 1;
}
#message .messageBloc--reverse .messageBloc__label {
	margin: 0 80px -18px auto;
}
#message .messageBloc__name {
	font-family: "Noto Serif JP", "Yu Mincho", YuMincho, "ヒラギノ明朝Pro W3", "Hiragino Mincho Pro", serif;
	font-size: clamp(34px, 10.761px + 6.197vw, 100px);
	color: #001A6F;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 2;
}

#message .messageBloc__body {
	font-size: 2rem;
	line-height: 1.78;
	color: #082073;
	margin-bottom: 50px;
	font-weight: 500;
}
#message .messageBloc__body p {
	margin: 0 0 1.2em;
}
#message .messageBloc__body p:last-child {
	margin-bottom: 0;
}

#message .messageBloc__profile {
	background: rgba(255, 255, 255, 0.5);
	display: flex;
}
#message .messageBloc__profileTop {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-bottom: 18px;
	margin-right: 50px
}
#message .messageBloc__profileLabel {
	font-family: "Noto Serif JP", serif;
	font-size: 3rem;
	color: #001A6F;
	border-bottom: 1px solid #001A6F;
	padding-bottom: 4px;
	font-weight: 600;
	margin: 0;
	flex-shrink: 0;
	letter-spacing: 0.08em;
}
#message .messageBloc__profileMeta {
	flex: 1;
}
#message .messageBloc__profileTitle {
	display: inline-block;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.04em;
}
#message .messageBloc__profileName {
	font-size: 2.6rem;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 16px
}
#message .messageBloc__profileName .en {
	font-size: 2rem;
	font-weight: 400;
	margin-left: 8px;
}
#message .messageBloc__profileText {
	font-size: 1.6rem;
	line-height: 1.81;
	color: #333;
	margin: 0 0 18px;
}
#message .messageBloc__more {
	display: flex;
    align-items: center;
    background: #001A6F;
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    float: right;
    padding: 6px 0 6px 6px;
    letter-spacing: 0.08em;
    justify-content: flex-end;
    width: 216px;
    gap: 10px;
}
#message .messageBloc__more::after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 1px;
	background: #fff;
}
#message .messageBloc__profile::after {
	content: '';
	display: block;
	clear: both;
}

@media (max-width: 768px) {
	#message #messageArea {
		padding: 50px 20px 60px;
	}
	#message .messageBloc{
		    padding-left: 0;
	}
	#message .messageBloc,
	#message .messageBloc--reverse {
		flex-direction: column;
		gap: 0;
		margin-bottom: 60px;
	}
	#message .messageBloc__photo {
		flex: 1;
		width: 100%;
	}
	#message .messageBloc__content,
	#message .messageBloc--reverse .messageBloc__content {
		        margin: -160px calc(50% - 50vw) 0;
        padding: 140px 20px 30px;
        width: 100vw;
	}
	#message .messageBloc__heading{
		margin-bottom: 30px
	}
	#message .messageBloc__heading,
	#message .messageBloc--reverse .messageBloc__heading {
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}
	#message .messageBloc__label,
	#message .messageBloc--reverse .messageBloc__label {
		height: 95px;
		margin: -20px 0 -10px -20px;
	}
	#message .messageBloc__name {
		font-size: 3.4rem;
	}
	#message .messageBloc__body {
		font-size: 1.4rem;
		margin-bottom: 30px;
	}
	#message .messageBloc__profile {
		padding: 0;
		display: block;
	}
	#message .messageBloc__profileTop {
		flex-direction: column;
		gap: 14px;
	}
	#message .messageBloc__more {
		float: none;
		display: flex;
		justify-content: flex-end;
	}
	#message .messageBloc__profileName{
		font-size: 2rem;
	}
	#message .messageBloc__profileName .en{
		font-size: 1.2rem
	}
	#message .messageBloc__profileText{
		font-size: 1.3rem
	}
	#message .messageBloc.messageBloc--reverse{
		padding-right: 0
	}
	#message .messageBloc--reverse .messageBloc__heading{
		margin-top: 0
	}
}
/* =========================================================
 * #interviewArea
 * ========================================================= */
#interviewArea{
	background: #f7fbff;
	padding: 100px 0
}
.interviewArea__inner{
	width: min(1300px,100%);
	margin: 0 auto;
	padding: 0 40px;
}

/* タイトル "Interview" + 共同代表対談 */
#message #interviewArea h2 {
	font-family: "Noto Serif JP", "Yu Mincho", serif;
	font-size: 5.6rem;
	font-weight: 600;
	color: #001A6F;
	text-align: center;
	line-height: 1.1;
	margin: 0 0 60px;
	letter-spacing: 0.04em;
}
#message #interviewArea h2 span {
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
	color: #001A6F;
	margin-top: 16px;
	letter-spacing: 0.18em;
	font-family: inherit;
}

/* インタビューKV(ランドスケープ写真) */
#message #interviewArea .interview_kv {
	margin: 0 0 60px;
}
#message #interviewArea .interview_kv img {
	width: 100%;
	height: auto;
	display: block;
}

/* セクション直下h3: マーカーハイライト */
#message #interviewArea > .interviewArea__inner > h3 {
	font-size: clamp(20px, 13.932px + 1.618vw, 45px);
	font-weight: 700;
	color: #fff;
	line-height: 1.85;
	margin: 0 0 30px;
	text-decoration: underline 1.7em #001A6F;
    text-underline-offset: -1.2em;
	text-decoration-skip-ink: none;
	letter-spacing: 0.04em;
}

/* リード文 */
#message #interviewArea .read {
	margin: 30px 0 80px;
	font-size: 2rem;
	line-height: 2;
}
#message #interviewArea .read p {
	margin: 0;
}

/* =========================================================
 * .interviewBloc (使い回し可能)
 * ========================================================= */
#message .interviewBloc {
	margin-bottom: 120px;
}
#message .interviewBloc:last-child {
	margin-bottom: 0;
	padding-bottom: 100px
}
#message .interviewTxt__Bloc{
	    width: min(970px, 100%);
    margin: 0 auto;
}
#message .interviewTxt__Bloc.mb100{
	margin-bottom: 100px
}
#message .interviewBloc__img {
	margin: 0 0 40px;
}
#message .interviewBloc__img img {
	width: 100%;
	height: auto;
/*	display: block;*/
}
#message .interviewBloc__img.img_70{
	position: relative;
	margin: 0 auto 180px 0;
}
#message .interviewBloc__img.img_70 img{
	width: 70%;
	position: relative;
    z-index: 1;
}
#message .interviewBloc__img.img_70:before{
	    width: 70%;
    height: 100%;
    background: #DEECF7;
    content: '';
    top: 100px;
    right: 0;
    display: block;
    position: absolute;
    z-index: 0;
}
#message .interviewBloc__img.img_70.reverse{
	margin: 0 0 180px auto;
	text-align: right
}
#message .interviewBloc__img.img_70.reverse:before{
	left: 0;
	right: auto;
}
.interviewBloc__img.column2{
	display: flex;
	column-gap: 60px
}
.interviewBloc__img.column2 div:last-child{
	margin-top: 200px
}

/* h4 タイトル(マーカー) */

#message .interviewBloc__title {
	font-size: clamp(18px, 13.631px + 1.165vw, 36px);
	font-weight: 700;
	color: #001A6F;
	line-height: 1.45;
	margin: 100px 0 80px;
	text-decoration-skip-ink: none;
	letter-spacing: 0.04em;
	position: relative
}
#message .interviewBloc__title:before{
	content: '';
	width: 90px;
	height: 2px;
	background: #4DF0D7;
	position: absolute;
	top: -30px;
	left: 0;
}
/* Q&A リスト */
#message .interviewBloc__list {
	list-style: none;
	padding: 0;
	margin: 30px 0 0;
}
#message .interviewBloc__list li {
	padding-left: 130px;
	position: relative;
	margin-bottom: 56px;
	font-size: 1.8rem;
	line-height: 1.9;
	color: #2a2a2a;
	min-height: 50px;
	font-weight: 500;
}
#message .interviewBloc__list li:last-child {
	margin-bottom: 0;
}
#message .interviewBloc__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 90px;
	height: 90px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#message .interviewBloc__list li.naka::before {
	background-image: url(../images/message/icon-nakatake.png);
}
#message .interviewBloc__list li.seta::before {
	background-image: url(../images/message/icon-seta.png);
}
#message .interviewBloc__list li::after{
	content: '';
	position: absolute;
	left: 30px;
	top: 90px;
	font-size: 14px;
	color: #001A6F
}
#message .interviewBloc__list li.naka::after{
	content: '中竹';
}
#message .interviewBloc__list li.seta::after{
	content: '瀬田';
}
#message .interviewBloc__list li strong{
	color: #000;
}
#message .interviewBloc__list .interviewBloc__btn{
	margin-top: 20px
}
#message .interviewBloc__list .interviewBloc__btn a{
	background: #fff;
	border: 1px solid #001A6F;
	border-radius: 3em;
	padding: 10px 3em 10px 2em;
	color: #001A6F;
	font-size: 13px;
	position: relative
}
#message .interviewBloc__list .interviewBloc__btn a:after{
	content: '';
	background: url(../images/message/ico-search.svg)no-repeat;
	width: 12px;
	height: 12px;
	position: absolute;
	top: calc(50% - 6px);
	right: 1em;
}
#message .interviewBloc__list .interviewBloc__btn a:hover{
background: rgba(0, 26, 111, 0.26)
}
/* SP */
@media (max-width: 768px) {
	#interviewArea {
		padding: 60px 0;
	}
	.interviewArea__inner {
		padding: 0 20px;
	}
	#message #interviewArea h2 {
		font-size: 3.6rem;
		margin-bottom: 36px;
	}
	#message #interviewArea h2 span {
		font-size: 1.3rem;
		margin-top: 10px;
	}
	#message #interviewArea .interview_kv {
		margin-bottom: 40px;
	}

	#message #interviewArea .read {
		font-size: 1.35rem;
		margin: 20px 0 50px;
	}
	#message .interviewBloc {
		margin-bottom: 50px;
	}
	#message .interviewBloc__img {
		margin-bottom: 24px;
	}
	
	#message .interviewBloc__list li {
		padding-left: 54px;
		font-size: 1.3rem;
		min-height: 40px;
		margin-bottom: 30px
	}
	#message .interviewBloc__list li::before {
		width: 40px;
		height: 40px;
	}
	#message .interviewBloc__list li::after{
		    left: 10px;
    top: 40px;
		font-size: 10px
	}
	#message .interviewBloc__title{
		margin-bottom: 40px;
		margin-top: 40px
	}
	.interviewBloc__img.column2{
		gap:8px
	}
	.interviewBloc__img.column2 div:last-child{
		margin-top: 40px
	}
	#message .interviewBloc__img.img_70:before{
		top:40px
	}
	#message .interviewBloc__img.img_70.reverse{
		margin-bottom: 110px
	}
	#message .interviewTxt__Bloc.mb100{
		margin-bottom: 40px
	}
	#message .interviewBloc:last-child{
		margin-bottom: 0;
		    padding-bottom: 0;
	}
	
}
#message #contactArea{
	margin-top: 0
}