@charset "utf-8";
/* 全体の調整 */
#crosstalk .pc{
	display: block;
}
#crosstalk .sp{
	display: none;
}
@media print, screen and (max-width: 768px) {
	#crosstalk .pc{
		display: none;
	}
	#crosstalk .sp{
		display: block;
	}
}

/* 見出し */
#crosstalk .headline-text {
	width: 90%;
	margin: 90px auto 50px;
}
#crosstalk .headline-text p:nth-child(1){
	font-size: 35px;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 40px;
}
@media print, screen and (max-width: 768px) {
	#crosstalk .headline-text {
		margin: 15% auto 7%;
	}
	#crosstalk .headline-text p:nth-child(1){
		font-size: 6vw;
		margin-bottom: 7%;
	}
}

/* タブ切り替え部分 */
#crosstalk .tab {
	width: 100%;
	margin: 0 auto 50px;
	text-align: center;
}
#crosstalk .tab ul li:nth-child(1){
	border-right: 1px solid #ccc;
}
#crosstalk .tab ul{
	width: 100%;
}
#crosstalk .tab ul li{
	width: 30%;
	display: inline-block;
	text-align: center;
	font-size: 113%;
	font-weight: bold;
}
#crosstalk .tab ul li a{
	color: #333;
}
#crosstalk .tab ul li a.stay{
	color: #8bc56f;
	padding: 15px 30px;
	text-decoration: none;
	background: url("../img/img_crosstalk.png") no-repeat bottom center;
}
@media print, screen and (max-width: 768px) {
	#crosstalk .tab {
		margin: 0 auto 15%;
	}
	#crosstalk .tab ul li{
		width: 48%;
	}
	#crosstalk .tab ul li a.stay{
		padding: 15px 45px;
	}
}

/* 社長×従業員座談会～大阪編～ */
#crosstalk #crosstalk_oosaka,
#crosstalk #crosstalk_tokyo{
	background-color: #fff;
	padding: 50px 40px;
}
@media print, screen and (max-width: 768px) {
	#crosstalk section.grey,
	#crosstalk section.grey{
		background-color: #f3f1f1;
	}
	#crosstalk #crosstalk_oosaka,
	#crosstalk #crosstalk_tokyo{
		background-color: #fff;
		padding: 10% 5%;
	}
}

/* メンバー一覧 */
#crosstalk #crosstalk_oosaka .profile,
#crosstalk #crosstalk_tokyo .profile{
	display: flex;
	flex-wrap: wrap;
	margin-top: 60px;
	justify-content: space-between;
}
#crosstalk #crosstalk_oosaka .profile .member,
#crosstalk #crosstalk_tokyo .profile .member{
	display: flex;
	flex-basis: 28%;
	margin: 0 20px 60px;
}
#crosstalk #crosstalk_oosaka .profile .member img,
#crosstalk #crosstalk_tokyo .profile .member img{
	width: 50%;
    height: fit-content;
	margin-right: 20px;
}
#crosstalk #crosstalk_oosaka .profile .member .detail p:nth-child(1),
#crosstalk #crosstalk_tokyo .profile .member .detail p:nth-child(1){
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
}
#crosstalk #crosstalk_oosaka .profile .member .detail p,
#crosstalk #crosstalk_tokyo .profile .member .detail p,
#crosstalk #crosstalk_oosaka .profile .member .detail p:nth-child(1) span,
#crosstalk #crosstalk_tokyo .profile .member .detail p:nth-child(1) span{
	font-size: 16px;
	display: inline-block;
	margin: 5px 0;
}
#crosstalk #crosstalk_oosaka .profile .member .detail p:nth-child(2) ,
#crosstalk #crosstalk_tokyo .profile .member .detail p:nth-child(2){
	margin-top: 10px;
}

@media print, screen and (max-width: 1400px) {
	#crosstalk #crosstalk_oosaka .profile .member,
	#crosstalk #crosstalk_tokyo .profile .member{
		flex-basis: 43%;
	}
}
@media print, screen and (max-width: 768px) {
	#crosstalk #crosstalk_oosaka .profile,
	#crosstalk #crosstalk_tokyo .profile{
		margin-top: 0;
	}
	#crosstalk #crosstalk_oosaka .profile .member,
	#crosstalk #crosstalk_tokyo .profile .member{
		display: flex;
		flex-basis: 100%;
		margin: 0 0 10%;
	}
	#crosstalk #crosstalk_oosaka .profile .member img,
	#crosstalk #crosstalk_tokyo .profile .member img{
		width: 35%;
		margin-right: 3%;
	}
	#crosstalk #crosstalk_oosaka .profile .member .detail p:nth-child(1),
	#crosstalk #crosstalk_tokyo .profile .member .detail p:nth-child(1){
		font-size: 4vw;
	}
	#crosstalk #crosstalk_oosaka .profile .member .detail p,
	#crosstalk #crosstalk_tokyo .profile .member .detail p,
	#crosstalk #crosstalk_oosaka .profile .member .detail p:nth-child(1) span,
	#crosstalk #crosstalk_tokyo .profile .member .detail p:nth-child(1) span{
		font-size: 3.5vw;
	}
}

/* 画像調整 */
#crosstalk #crosstalk_oosaka .imgArea img,
#crosstalk #crosstalk_tokyo .imgArea img{
	width: 90%;
}
#crosstalk #crosstalk_oosaka .imgArea img.wid100,
#crosstalk #crosstalk_tokyo .imgArea img.wid100{
	width: 100%;
}
#crosstalk #crosstalk_oosaka .imgArea.right,
#crosstalk #crosstalk_tokyo .imgArea.right{
	text-align: right;
}
#crosstalk #crosstalk_oosaka .imgArea.center,
#crosstalk #crosstalk_tokyo .imgArea.center{
	text-align: center;
}
#crosstalk #crosstalk_oosaka .imgArea.mb,
#crosstalk #crosstalk_tokyo .imgArea.mb{
	margin-bottom: 40px;
}
@media print, screen and (max-width: 768px) {
	#crosstalk #crosstalk_oosaka .imgArea img,
	#crosstalk #crosstalk_tokyo .imgArea img{
		width: 95%;
	}
	#crosstalk #crosstalk_oosaka .imgArea.mb,
	#crosstalk #crosstalk_tokyo .imgArea.mb{
		margin-bottom: 5%;
	}
}

/* 質問 */
#crosstalk #crosstalk_oosaka .topic.pc,
#crosstalk #crosstalk_tokyo .topic.pc{
	color: #fff;
	background-color: #00812f;
	font-size: 28px;
	padding: 15px 20px 15px 50px;
	margin: 60px 0;
	font-weight: bold;
	display: inline-block;
}
#crosstalk #crosstalk_oosaka .quesArea,
#crosstalk #crosstalk_tokyo .quesArea{
	width: 90%;
	margin: 0 auto;
}
#crosstalk #crosstalk_oosaka .ques,
#crosstalk #crosstalk_tokyo .ques{
	color: #00812f;
	font-size: 28px;
	margin-bottom: 60px;
	font-weight: bold;
	display: flex;
	align-items: center;
}
#crosstalk #crosstalk_oosaka .ques span:nth-child(1),
#crosstalk #crosstalk_tokyo .ques span:nth-child(1){
	color: #fff;
	background-color: #00812f;
	border-radius: 30px;
    margin-right: 10px;
    padding: 5px 17px;
}
#crosstalk #crosstalk_oosaka .comment,
#crosstalk #crosstalk_tokyo .comment{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 60px;
}
#crosstalk #crosstalk_oosaka .comment .icon,
#crosstalk #crosstalk_tokyo .comment .icon{
	text-align: center;
	margin-right: 40px;
	flex-basis: 10%;
}
#crosstalk #crosstalk_oosaka .comment .icon img,
#crosstalk #crosstalk_tokyo .comment .icon img{
	width: 100%;
}
#crosstalk #crosstalk_oosaka .comment .icon.right,
#crosstalk #crosstalk_tokyo .comment .icon.right{
	margin-right: 0;
	margin-left: 40px;
}
#crosstalk #crosstalk_oosaka .comment .text,
#crosstalk #crosstalk_tokyo .comment .text{
	background-color: #f3f1f1;
	font-size: 16px;
	padding: 40px 35px;
	border-radius: 20px;
	align-self: self-start;
	align-content: center;
	flex-basis: 80%;
}
@media print, screen and (max-width: 930px) {
	#crosstalk #crosstalk_oosaka .comment .icon,
	#crosstalk #crosstalk_tokyo .comment .icon{
		flex-basis: 20%;
	}
}
@media print, screen and (max-width: 930px) {
	#crosstalk #crosstalk_oosaka .topic.pc,
	#crosstalk #crosstalk_tokyo .topic.pc{		
		font-size: 22px;
	}
}
@media print, screen and (max-width: 768px) {
	#crosstalk #crosstalk_oosaka .topic.pc,
	#crosstalk #crosstalk_tokyo .topic.pc{
		display: none;
	}
	#crosstalk #crosstalk_oosaka .quesArea,
	#crosstalk #crosstalk_tokyo .quesArea{
		width: 100%;
	}
	#crosstalk #crosstalk_oosaka .topic.sp,
	#crosstalk #crosstalk_tokyo .topic.sp{
		margin: 3% 0 7%;
	}
	#crosstalk #crosstalk_oosaka .topic.sp .text,
	#crosstalk #crosstalk_tokyo .topic.sp .text{
		color: #fff;
		background-color: #00812f;
		padding: 1% 3%;
		font-weight: bold;
		font-size: 4.2vw;
		display: table;
	}
	#crosstalk #crosstalk_oosaka .topic.sp .text:nth-child(1),
	#crosstalk #crosstalk_tokyo .topic.sp .text:nth-child(1){
		margin-bottom: 10px;
	}
	#crosstalk #crosstalk_oosaka .topic.sp .text:nth-child(3),
	#crosstalk #crosstalk_tokyo .topic.sp .text:nth-child(3){
		margin-top: 10px;
	}
	#crosstalk #crosstalk_oosaka .topic.sp span:nth-child(2),
	#crosstalk #crosstalk_tokyo .topic.sp span:nth-child(2){
		margin-top: 5%;
	}
	#crosstalk #crosstalk_oosaka .ques,
	#crosstalk #crosstalk_tokyo .ques{
		font-size: 4.5vw;
		margin-bottom: 5%;
	}
	#crosstalk #crosstalk_oosaka .ques span:nth-child(1),
	#crosstalk #crosstalk_tokyo .ques span:nth-child(1){
		border-radius: 60%;
		margin-right: 10px;
		padding: 2% 5%;
	}
	#crosstalk #crosstalk_oosaka .comment,
	#crosstalk #crosstalk_tokyo .comment{
		align-items: flex-start;
		margin-bottom: 10%;
	}
	#crosstalk #crosstalk_oosaka .comment .icon,
	#crosstalk #crosstalk_tokyo .comment .icon{
		margin-right: 5%;
		flex-basis: 30%;
	}
	#crosstalk #crosstalk_oosaka .comment .icon.right,
	#crosstalk #crosstalk_tokyo .comment .icon.right{
		margin-left: 5%;
	}
	#crosstalk #crosstalk_oosaka .comment .icon p,
	#crosstalk #crosstalk_tokyo .comment .icon p{
		font-size: 3.5vw;
	}
	#crosstalk #crosstalk_oosaka .comment .text,
	#crosstalk #crosstalk_tokyo .comment .text{
		padding: 5%;
		font-size: 4vw;
		flex-basis: 50%;
	}
}

/* TOPへ戻る */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
#backToTop:hover {
  opacity: 0.7;
}