@charset "utf-8";
/* Common */
@media (min-width: 768px){
	.mv-img{margin-bottom: 50px;}
}

@media (max-width: 767px){
	.mv-img{position: absolute; bottom: 0; right: -20px; width: 88px;}
}

/* Line */
@media (min-width: 768px){
	.lineL-yellowT{top: 117px; left: -140px;}
	.lineL-blueT{top: -100px; right: 0;}
}
@media (max-width: 767px){
	.lineL-yellowT{top: calc(45vw + 220px); left: -30px;}
	.lineL-blueT{top: -5px; right: 3%;}
	.lineL-dblueT{top: 25px; right: -85px;}	
	.lineL-purpleT{top: 62px; right: -65px;}
}

.other{margin-top: 0;}
.bot-img{position: absolute; bottom:-70px; right: 70px; z-index: 100; width: 35%; max-width: 380px; line-height: 1;}

@media (max-width: 767px){
	.bot-img{width: 164px; bottom: -40px; right: -15px;}
}

/* Main Img */
.main-img{position: relative;}
.main-img_wrap{position: relative;}
.main-img figure{overflow: hidden;}
.main-img figure img{width: 100%;}

@media (min-width: 768px){
	.main-img figure img{height: 35vw; min-height: 540px; object-fit: cover; object-position: top;}
	
	.main-img.is-right{padding-left: calc(50% - 500px);}
	.main-img.is-right figure{border-radius: 100px 0 0 0;}
	.main-img.is-left{padding-right: calc(50% - 500px);}
	.main-img.is-left figure{border-radius: 0 100px 0 0;}
}

@media (max-width: 1060px){
	.main-img.is-right{padding-left: 30px;}
	.main-img.is-left{padding-right: 30px;}
}

@media (max-width: 767px){
	.main-img.is-right figure{border-radius: 64px 0 0 0;}
	.main-img.is-left figure{border-radius: 0 64px 0 0;}
}

.main-img1 .gear{position: absolute; top: -40px; right: 15%;}
.main-img1 .line2-purple{top: 120px; left: -70px;}
.main-img1 .line2-lblue{top: -45px; right: 40%;}
.main-img1 .line2-yellow{top: -205px; right: -60px;}
.main-img1 .line2-green{top: 280px; right: -80px;}
.main-img1 .lineR-dblue{bottom: -20px; right: 16%; width: 64px; height: 64px;}

#crosstalk02 .main-img1 .line2-yellow{top: -30px; right: 6%;}
#crosstalk02 .main-img1 .line2-green:after{background: #00458d;}
#crosstalk02 .main-img1 .line2-dblue{top: 250px; right: -80px;}

@media (max-width: 767px){
	.main-img1 .gear{width: 35px; top: 40px; right: 10px;}
	.main-img1 .line2-green{top: -20px; right: 37%; width: 64px; height: 64px;}
	.main-img1 .line2-purple{top: 165px; left: -80px;}
	.main-img1 .line2-lblue{top: -20px; right: 40%; width: 65px;}
	.main-img1 .lineS-lblue{bottom: -15px; right: 53%;}
}

/* Heading */
.heading{position: relative; text-align: center; color: #00458d;}
.heading-tit{font-size: 4.4rem; line-height: 1.45; font-weight: bold; font-family: 'Zen Kaku Gothic New', sans-serif; margin: 0 0 40px;}
.heading-wrap{position: relative; padding: 70px 0 130px;}
.heading .gear{position: absolute; left: -80px; bottom: 5px;}
.heading .women{position: absolute; right: -30px; bottom: 75px;}

.heading .lineL-purple{bottom: -60px; right: -170px;}
.heading .lineR-green{top: 80px; left: -40px;}

@media (max-width: 1023px){
	.heading .women{bottom: -20px;}
	.heading .gear{left: -25px;}
}

@media (max-width: 767px){
	.heading-wrap{padding: 25px 0 70px;}
	.heading-tit{font-size: 2.4rem; margin: 0 -30px 20px;}
	.heading-desc{text-align: left;}
	
	.heading .women{width: 72px; bottom: -30px; right: -20px; z-index: 20;}
	.heading .gear{width: 46px; bottom: 0;}
	.heading .lineR-green{top: 100px; left: -80px;}
}

/* Member */
.member{position: relative; margin: 0 0 140px;}
.member-tit{text-align: center;}
.member-wrap{background: #e6ff1d; border-radius: 100px 0 100px 0; padding: 70px 5% 50px; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; top: -10px;}
.member-item{width: 48.5%; font-family: 'Zen Kaku Gothic New', sans-serif; line-height: 1.5;}
.member-item_head{position: relative; margin: 0 0 25px; display: flex; justify-content: flex-end;}
.member-item_photo{position: absolute; bottom: 0; right: 230px; border: 2px solid #00458d; border-radius: 100%; overflow: hidden; width: 232px;}
.member-item_info{font-weight: bold; width: 220px;}
.member-item_info li:not(:last-of-type){margin-bottom: 0.9em;}
.member-item_desc{max-width: 375px; margin: 0 auto; width: 100%;}

.member .container{position: relative;}
.member .women{position: absolute; bottom: -40px; left: -90px;}
.member .line2-blue{bottom: -80px; right: -7%;}
#crosstalk02 .member .line2-blue{bottom: -115px; right: 13%;}

@media (max-width: 1023px) and (min-width: 768px){	
	.member-tit{position: relative; z-index: 20; padding: 0 15%;}
	.member-wrap{top: -30px;}
	.member-item_photo{width: 15vw;}
	.member .women{bottom: -90px; left: -20px;}
}

@media (max-width: 767px){
	.member{margin: 0 0 90px;}
	.member .container{width: 100%;}
	.member-wrap{padding: 40px 30px 50px; border-radius: 64px 0 64px 0; top: 0;}
	.member-tit{position: absolute; top: -12px; left: 0; right: 0; margin: 0 auto; width: 126px; z-index: 20;}
	.member-item{width: 100%; max-width: 480px; margin: 0 auto;}
	.member-item:nth-of-type(1){margin-bottom: 35px;}
	.member-item_head{justify-content: space-between; align-items: center; margin: 0 0 15px;}
	.member-item_photo{width: 120px; position: static;}
	.member-item_info{width: calc(100% - 130px); font-size: 1.2rem;}
	.member-item_desc{max-width: 767px;}
	
	.member .women{width: 90px; left: 10px; bottom: -60px;}
	.member .line2-blue{width: 90px; bottom: -80px; right: 10%;}
}

/* Thema */
.thema{position: relative; padding-bottom: 130px;}
.thema-inner{width: 640px; position: relative;}
.thema-photo{width: calc(50% - 180px); position: relative;}
.thema-photo figure{overflow: hidden;}
.thema-photo figure img{width: 100%;}

.thema-label{font-weight: 500; font-family: 'Jost', sans-serif; background: #00458d; color: #fff; display: inline-block; padding: 5px 5px; line-height: 1;}
.thema-tit{font-size: 4rem; line-height: 1.6; font-weight: bold; font-family: 'Zen Kaku Gothic New', sans-serif; padding-left: 44px; position: relative; color: #00458d;}
.thema-tit:before{content: ''; position: absolute; top: 0.9em; left: 0; width: 40px; height: 1px; background: #00458d; display: block;}

.thema-wrap{display: flex;}
.thema-wrap.is-left .thema-photo figure{border-radius: 0 100px 0 0;}
.thema-wrap.is-left .thema-inner{margin-left: 40px;}
.thema-wrap.is-right{justify-content: flex-end;}
.thema-wrap.is-right .thema-photo figure{border-radius: 100px 0 0 0;}
.thema-wrap.is-right .thema-inner{margin-right: 40px;}

.thema-chat{padding: 0 0 0 130px; position: relative; min-height: 130px; margin: 35px 0 0 0; z-index: 20;}

[class*="avatar"]:before,
[class*="avatar"]:after{width: 104px; position: absolute; left: 0; text-align: center;}
[class*="avatar"]:before{content: ''; height: 104px; top: 0; border: 1px solid #00458d; border-radius: 100%; overflow: hidden;}
[class*="avatar"]:after{top: 115px; line-height: 1; font-weight: bold; color: #00458d; font-family: 'Zen Kaku Gothic New', sans-serif;}

.avatar-mase:before{background: url("../img/crosstalk/01/photo-mase_akio.jpg") no-repeat top left/100% 100%;}
.avatar-mase:after{content: '間瀬';}
.avatar-hirado:before{background: url("../img/crosstalk/01/photo-hirato_motoki.jpg") no-repeat top left/100% 100%;}
.avatar-hirado:after{content: '平戸';}

.avatar-kawai:before{background: url("../img/crosstalk/02/photo-kawai_takenari.jpg") no-repeat top left/100% 100%;}
.avatar-kawai:after{content: '河合';}
.avatar-horibe:before{background: url("../img/crosstalk/02/photo-horibe_yuya.jpg") no-repeat top left/100% 100%;}
.avatar-horibe:after{content: '堀部';}

.avatar-yamasaki:before{background: url("../img/crosstalk/03/photo-yamasaki_kenta.jpg") no-repeat top left/100% 100%;}
.avatar-yamasaki:after{content: '山先';}
.avatar-tsuruoka:before{background: url("../img/crosstalk/03/photo-tsuruoka_miwa.jpg") no-repeat top left/100% 100%;}
.avatar-tsuruoka:after{content: '鶴岡';}

@media (min-width: 768px){	
	.thema-photo figure img{height: 673px; object-fit: cover; object-position: center;}
}

@media (max-width: 1060px) and (min-width: 768px){	
	.thema-photo{width: 36%;}
	.thema-inner{width: calc(64% - 60px); margin: 0 30px !important;}	
}

@media (max-width: 767px){
	.thema{padding-bottom: 90px;}
	.thema-wrap{flex-wrap: wrap;}
	.thema-photo{order: -1; width: 100%; margin: 0 0 25px;}
	.thema-photo figure img{height: 53.33vw; object-position: top;}
	.thema-label{margin: 0 0 10px; padding: 3px 5px;}
	.thema-wrap.is-left .thema-photo{padding-right: 30px;}
	.thema-wrap.is-left .thema-photo figure{border-radius: 0 64px 0 0;}
	.thema-wrap.is-right .thema-photo{padding-left: 30px;}
	.thema-wrap.is-right .thema-photo figure{border-radius: 64px 0 0 0;}
	.thema-inner{width: 100%; padding: 0 30px; margin: 0 !important;}
	
	.thema .main-img figure img{height: 53.33vw;}
	
	.thema-tit{font-size: 2.4rem; padding-left: 24px; line-height: 1.4;}
	.thema-tit:before{width: 20px;}
	
	.thema-chat{padding: 0 0 0 82px; min-height: 90px;}
	[class*="avatar"]:before,
	[class*="avatar"]:after{width: 64px;}
	[class*="avatar"]:before{height: 64px;}
	[class*="avatar"]:after{top: 76px;}	
}

.thema01 .gear{position: absolute; bottom: 100px; right: 250px;}
.thema01 .lineL-blue{top: 500px; right: -110px; width: 390px; height: 390px; opacity: .38;}
.thema01 .line2-blue{top: 650px; right: -60px;}

.thema02 .lineL-blue{bottom: 30px; left: -150px; width: 390px; height: 390px; opacity: .38;}
.thema02 .lineL-green{bottom: -80px; left: -150px;}

.thema02 .lineS-purple{top: 80px; left: 75%;}
.thema02 .lineS-dblue{top: 510px; right: -15%;}
#crosstalk02 .thema02 .lineS-dblue{top: 685px;}

.thema03{margin-top: 90px;}
.thema03-head{position: relative; margin-bottom: 45px; padding-bottom: 25px; z-index: 1;}
.thema03-head:after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 62px; background: #e6ff1d; z-index: -1;}
.thema03-head_txt{position: absolute; left: 45%; bottom: -0.5em; font-size: 4rem; line-height: 1; font-weight: 300; font-family: 'Jost', sans-serif; letter-spacing: 0.2em; color: #00458d; font-style: italic;}
.thema03-head_illus{position: absolute; bottom: 40px; right: -35px;}
.thema03-inner{position: relative; padding-top: 10px;}

.main-img2 .line2-green{bottom: -100px; left: 50%;}
.thema03-head .lineS-purple{top: -170px; left: 38%;}
#crosstalk02 .thema03-head .lineS-purple{top: -90px;}

.thema03-inner .lineS-purple{top: 360px; left: -100px;}
#crosstalk02 .thema03-inner .lineS-purple{top: 400px;}

.thema03-inner .lineS-yellow{top: 140px; right: -60px;}
.thema03-inner .line2-blue{top: 375px; right: -180px;}
#crosstalk02 .thema03-inner .line2-blue{top: 475px;}

.thema04 .thema-tit{margin-bottom: 20px;}
.thema04 .lineS-yellow{top: 30%; right: -45px;}
.thema04 .line2-blue{top: -196px; right: 6%;}
#crosstalk02 .thema04 .line2-blue{top: -166px;}

.main-img3 .lineL-yellow{bottom: -210px; left: -145px;}
.thema04-inner{position: relative;}
.thema04-inner .lineL-purple{top: 50px; right: -145px;}

@media (max-width: 1023px){
	.thema03-head_illus{bottom: 80px; right: -25px;}
}

@media (max-width: 767px){
	
	.thema01 .lineL-blue{top: 5vw; right: -140px; width: 230px; height: 230px;}
	.thema01 .line2-blue{top: 36vw; right: -60px;}
	
	.thema02 .lineL-blue{bottom: -120px; left: -160px; width: 230px; height: 230px;}
	.thema02 .lineL-green{bottom: -55px; left: -60px;}
	
	.thema02 .lineS-purple{top: -40px; left: 70%;}
	.thema02 .lineS-dblue{top: 95px; right: 5px;}
	
	.thema03{margin-top: 0;}
	.thema03-head{padding-bottom: 16px;}
	.thema03-head:after{height: 70px;}
	.thema03-head_illus{width: 143px; bottom: 54px; right: -20px;}
	.thema03 .thema-tit span{display: block; padding-left: 2em;}
	#crosstalk01 .thema03 .thema-tit span{padding-left: 3em;}
	
	.thema03-head_txt{font-size: min(8.4vw,3.2rem); left: 0; width: 100%; text-align: right;}
		
	.main-img2 .line2-green{bottom: -25px; left: 60%; width: 70px; height: 70px;}
	.thema03-head .lineS-purple{top: -45px; left: 47%;}
	.thema03-inner .lineS-purple{top: 38.5%; left: -35px;}
	#crosstalk03 .thema03-inner .lineS-purple{top: 45%;}
	
	.thema03-inner .lineS-yellow{top: 120px; right: -20px;}
	.thema03-inner .line2-blue{top: 85%; right: -53px; width: 60px; height: 60px;}
	#crosstalk03 .thema03-inner .line2-blue{top: 96%;}
	
	#crosstalk02 .thema03-inner .line2-blue{top: 74.5%;}
	
	.thema04 .main-img{margin-bottom: 25px;}
	.thema04 .thema-tit{margin-bottom: 0;}
	
	.thema04 .lineS-yellow{top: 60%; right: -15px;}
	.thema04 .line2-blue{top: -40px; right: 26%; width: 72px; height: 72px;}

	.main-img3 .lineL-yellow{bottom: -95px; left: -50px;}
	
	.thema04-inner .lineL-purple{top: 290px; right: -75px;}	
	.thema04-inner .line2-blue2{bottom: -30px; right: -40px; width: 76px; height: 76px;}
}