@charset "utf-8";
/*------------------------------------------------------------
	cross-talk
------------------------------------------------------------*/
#container {
	background: linear-gradient(to bottom,#0d0907 0%, #9aa9b9 18%, #fff 35%,#9aa9b9 45%,#0d0907 55%,#9aa9b9 62%,#fff 75%,#fff 82%);
}
.comMainVisual .mainImg img {
	opacity: 0.65;
}
.comTopBox .head {
	margin: -0.5rem auto 1.8rem;
	font-size: 4.8rem;
	background: linear-gradient(90deg,#73c4a9 0%, #fff 100%);
}
.comTopBox p {
	margin-bottom: 5.3rem;
	font-family: "Shippori Mincho", serif;
	font-size: 2.4rem;
	line-height: 1.67;
	text-align: center;
	letter-spacing: 0;
}
#main .talkMember {
	margin: 0 auto;
	max-width: 120rem;
	position: relative;
}
#main .talkMember .head01 {
	margin-bottom: 9.5rem;
	font-family: "Forum", serif;
	font-weight: normal;
	font-size: 10.4rem;
	text-align: center;
	color: #fff;
	opacity: 0.2;
}
#main .memberList li {
	margin-bottom: 2.7rem;
	padding: 1px 2.4rem 2.4rem;
	position: relative;
	color: #0D0907;
	border-radius: 10px;
	background: #e2eaee;
	box-shadow: 0 0 2rem rgba(150, 150, 150, 0.1);
}
#main .memberList .image {
	width: 15rem;
	margin: -7.5rem auto 0.2rem;
	aspect-ratio: 1;
	border-radius: 100%;
	overflow: hidden;
	box-shadow: 0 0 2rem rgba(150, 150, 150, 0.1);
}
#main .memberList .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .memberList p {
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: 0;
}
#main .memberList .number {
	text-align: center;
	font-size: 2.4rem;
	font-family: "Forum", serif;
	line-height: 1.5;
}
#main .memberList .textBox {
	margin-bottom: 1rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px dotted #707070;;
}
#main .memberList .name {
	text-align: center;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 1.31;
	text-align: center;
}
#main .memberList .name span {
	display: block;
	font-size: 3.6rem;
	font-family: "Forum", serif;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
#main .talkMember .notes {
	margin-bottom: 7.5rem;
	text-align: right;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	position: relative;
	z-index: 3;
}
#main .chapterAnchor {
	margin-bottom: 17.6rem;
	position: relative;
	z-index: 2;
}
#main .chapterAnchor .head02 {
	font-size: 7rem;
	font-family: "Forum", serif;
	font-weight: 400;
}
#main .chapterAnchor .head02::first-letter {
	color: #2F71B9;
}
#main .chapterAnchor .list {
	border-top: 1px dotted #fff;
}
#main .chapterAnchor .list li {
	border-bottom: 1px dotted #fff;
}
#main .chapterAnchor .list a {
	padding: 1.8rem 6.6rem;
}
#main .chapterAnchor .list a {
	padding: 1.8rem 6.6rem;
	display: flex;
	align-items: center;
}
#main .chapterAnchor .list .ttl {
	width: 16rem;
	font-size: 2.2rem;
}
#main .chapterAnchor .list .text {
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 1.75;
}
#main .chapterWrap {
	margin-bottom: 17.6rem;
	position: relative;
}
#main .chapterWrap .bigPhoto {
	margin-bottom: 7.3rem;
	box-shadow: 0 0 2rem rgba(150, 150, 150, 0.1);
	position: relative;
	z-index: 3;
}
#main .chapterWrap .bigPhoto img {
	width: 100%;
}
#main .head03 {
	margin-bottom: 6.8rem;
	text-align: center;
	font-family: "Forum", serif;
	position: relative;
	z-index: 3;
}
#main .head03 .en {
	margin-bottom: 1.6rem;
	display: block;
	font-weight: normal;
	font-size: 3.2rem;
	color: #0d0907;
	position: relative;
	letter-spacing: 0;
}
#main .head03 .en01 {
	font-size: 3.4rem;
}
#main .head03 .en::after {
	margin: 1.5rem auto 0;
	display: block;
	content: '';
	width: 2.7rem;
	height: .1rem;
	background-color: #0d0907;
}
#main .head03 .jp {
	display: inline-block;
	font-size: 2.8rem;
	line-height: 1.71;
	font-weight: normal;
	background: linear-gradient(90deg,#0d0907 0%, #2f71b9 50%, #0d0907 100%);
	color: transparent !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
}
.whiteText {
	color: #FFF !important;
}
#main .head03.whiteText .en {
	color: #FFF;
}
#main .head03.whiteText .en::after {
	background-color: #FFF;
}
#main .head03.whiteText .jp {
	background: linear-gradient(90deg,#FFF 0%, #2f71b9 50%, #FFF 100%);
}
#main .talk {
	margin-bottom: 3.5rem;
	display: flex;
	gap: 4.2rem;
	align-items: flex-start;
	position: relative;
	z-index: 3;
}
#main .talk .person {
	width: 10rem;
	text-align: center;
	font-weight: normal;
	font-size: 2rem;
	color: #0d0907;
	font-family: "Forum", serif;
}
#main .talk .person span {
	margin-top: 0.4rem;
	display: block;
}
#main .talk .text {
	padding: 3rem 4rem;
	flex: 1;
	max-width: 70.7rem;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 2.3;
	color: #0d0907;
	border-radius: 1rem;
	background: #e2eaee;
	box-shadow: 0 0 2rem rgba(150, 150, 150, 0.1);
	position: relative;
}
#main .talk .text::before {
	position: absolute;
	right: 100%;
	top: 1.5rem;
	border: 1rem solid transparent;
	border-top-width: 0.7rem;
	border-bottom-width: 0.7rem;
	border-right-color: #e2eaee;
	content: '';
}
#main .talk .text p {
	letter-spacing: 0;
}
#main .talk.right {
	flex-direction: row-reverse;
}
#main .talk.right .text {
	padding-left: 4.5rem;
}
#main .talk.right .text::before {
	left: 100%;
	right: 0;
	border-left-color: #e2eaee;
	border-right-color: transparent;
}
#main .messageWrap {
	position: relative;
	z-index: 3;
}
#main .message {
	margin-bottom: 6.5rem;
	padding: 6rem 6.4rem;
	display: flex;
	justify-content: space-between;
	gap: 6rem;
	color: #0d0907;
	border-radius: 1rem;
	background: #e1eaed;
	box-shadow: 0 0 2rem rgba(150, 150, 150, 0.1);
}
#main .message:last-child {
	margin-bottom: 0;
}
#main .message:nth-of-type(2n) {
	flex-direction: row-reverse;
}
#main .message .photo {
	width: 44rem;
}
#main .message .text {
	flex: 1;
}
#main .head04 {
	margin-bottom: 1.5rem;
	font-weight: normal;
	font-size: 2.8rem;
	line-height: 1.21;
	font-family: "Forum", serif;
}
#main .message p {
	margin-bottom: 0.4rem;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 2.33;
	letter-spacing: 0;
}
#main .message .name {
	text-align: right;
	font-size: 3rem;
	font-family: "Forum", serif;
	line-height: 1.3;
}
#main .message .name::before {
	margin-right: 1.5rem;
	display: inline-block;
	content: '';
	width: 7.2rem;
	height: .1rem;
	background: #0d0907;
	vertical-align: 1rem

}
.ribbon1 {
	position: absolute;
	width: 216rem;
	left: 50%;
	top: -34rem;
	transform: translateX(calc(-50% + 13.2rem));
}
.ribbon02 {
	width: 164rem;
	top: 2rem;
	transform: translateX(calc(-50% - 3rem)) rotate(11deg);
}
.ribbon3 {
	position: absolute;
	width: 174.5rem;
	left: 50%;
	top: 54rem;
	transform: translateX(calc(-50% + 16rem)) rotate(15deg);
}
.ribbon4 {
	position: absolute;
	width: 143rem;
	right: 7.7rem;
	top: 43rem;
}
.ribbon5 {
	position: absolute;
	width: 210rem;
	left: 50%;
	top: 47rem;
	transform: translateX(calc(-50% + 2rem)) rotate(-11deg);
}
.ribbon6 {
	position: absolute;
	width: 130.5rem;
	left: -20.5rem;
	bottom: -7rem;
}
@media all and (min-width: 897px) {
	.comMainVisual .mainImg::before {
		opacity: 0.2;
	}
	#main .memberList {
		display: flex;
		gap: 4.3rem;
	}
	#main .memberList li {
		width: calc((100% - 13rem)/4);
	}
	#main .chapterAnchor {
		display: flex;
		justify-content: space-between;
	}
	#main .chapterAnchor .list {
		width: calc(100% - 27rem);
	}
	#main .chapterAnchor .head02 {
		max-width: 27rem;
	}
	#main .chapterAnchor .list a:hover {
		opacity: 0.7;
	}
}
@media all and (max-width: 896px) {
	#container {
		background: linear-gradient(to bottom,#0d0907 0%, #9aa9b9 16%, #fff 35%,#9aa9b9 44%,#0d0907 55%,#9aa9b9 60%,#fff 70%);
	}
	.comTopBox .head {
		margin-bottom: 0.9rem;
		font-size: 3.2rem;
	}
	.comTopBox p {
		margin-bottom: 4.5rem;
		font-size: 1.6rem;
		line-height: 1.75;
	}
	#main .talkMember {
		margin: 0 2.4rem;
	}
	#main .talkMember .head01 {
		margin-bottom: 1.1rem;
		font-size: 6.3rem;
	}
	#main .memberList {
		margin: 0 0 1.5rem;
	}
	#main .memberList li {
		margin-bottom: 3.2rem;
		padding: 3.1rem 3rem;
	}
	#main .memberList li:last-child {
		margin-bottom: 0;
	}
	#main .memberList .image {
		width: 12.7rem;
		margin: 0 0 0 -1.5rem;
		float: left;
	}
	#main .memberList .textBox {
		margin: 0 0 1.7rem;
		min-height: 12.7rem;
		padding: 1.3rem 0 3.5rem 13.5rem;
	}
	#main .memberList .number {
		letter-spacing: 0.2rem;
		text-align: left;
		font-size: 1.8rem;
	}
	#main .memberList .name {
		margin-right: -2.8rem;
		text-align: left;
		font-size: 1.3rem;
		line-height: 1.5;
	}
	#main .memberList .name img {
		width: 10.8rem;
	}
	#main .memberList .name span {
		margin-bottom: 0.3rem;
		font-size: 2.4rem;
	}
	#main .talkMember .notes {
		margin: 0 0 6.7rem;
		font-size: 1.2rem;
	}
	#main .chapterAnchor {
  		margin-bottom: 7.9rem;
	}
	#main .chapterAnchor .head02 {
		margin-bottom: 0.7rem;
		font-size: 4rem;		
	}
	#main .chapterAnchor .list a {
		padding: 1.2rem 0 1.1rem;
		display: block;
	}
	#main .chapterAnchor .list .ttl {
		margin-bottom: 0.7rem;
		display: block;
		font-size: 2rem;
	}
	#main .chapterAnchor .list .text {
		margin-right: -1.3rem;
		display: block;
		font-size: 1.4rem;
		line-height: 1.71;
	}
	#main .chapterWrap .bigPhoto {
		margin-bottom: 3.6rem;
	}
	#main .head03 {
		margin-bottom: 3.4rem;
	}
	#main .head03 .en {
		margin-bottom: 0.4rem;
		font-size: 1.6rem;
	}
	#main .head03 .en::after {
		margin-top: 0.5rem;
		width: 1.2rem;
	}
	#main .head03 .jp {
		font-size: 2rem;
		line-height: 1.4;
	}
	#main .chapterWrap {
		margin-bottom: 8rem;
	}
	#main .talk {
		margin-bottom: 1.5rem;
		gap: 2.3rem;
	}
	#main .talk .person {
		width: 8rem;
	}
	#main .talk .person span {
		font-size: 1.5rem;
	}
	#main .talk .person span img {
		width: 4rem;
		vertical-align: middle;
	}
	#main .talk .text,
	#main .talk.right .text {
		padding: 1rem 1.5rem 1.1rem;
		line-height: 1.77;
	}
	#main .talk .text::before {
		border-width: 0.7rem;
		border-top-width: 0.5rem;
 		border-bottom-width: 0.5rem;
	}
	#main .message {
		margin-bottom: 4rem;
		padding: 0;
		display: block;
		overflow: hidden;
	}
	#main .message .photo {
		width: 100%;
	}
	#main .message .text {
		padding: 2rem 1.6rem 2.2rem;
	}
	#main .head04 {
		margin-bottom: 1rem;
		font-size: 2.2rem;
		line-height: 1.545;
	}
	#main .message p {
		margin-bottom: 1rem;
		line-height: 2;
		font-size: 1.3rem;
	}
	#main .message .name {
		margin: -0.2rem 0 0;
		font-size: 2.2rem;
	}
	#main .message .name img {
		width: 6rem;
	}
	#main .message .name::before {
		width: 5.6rem;
		vertical-align: 0.8rem;
	}
	.ribbon02 {
		width: 47rem;
		top: 33.5rem;
		transform: translateX(calc(-50% - -27rem)) rotate(11deg);
	}
	.ribbon3 {
		width: 47rem;
		top: 41.4rem;
  		transform: translateX(calc(-50% + 1rem)) rotate(17deg);
	}
	.ribbon4 {
		width: 38rem;
		right: 50%;
		top: 28rem;
		transform: translateX(calc(50% + -0.5rem));
	}
	.ribbon5 {
		width: 67rem;
		top: -1rem;
  		transform: translateX(calc(-50% - 6rem)) rotate(-11deg);
	}


}