@charset "utf-8";
/* 社会への取り組み事例 */

/*大カプコン展
----------------------------------------*/
/*メインビジュアル*/
.social_ini .cr_mainvs{
	position: relative;
}
.social_ini .cr_mainvs img.mv_image{
	width:100%;
}
.social_ini .cr_mainvs .titleBox{
	/*position:absolute;
	top:300px;
	left:430px;*/
	margin-top:-120px;
}

.social_ini .cr_mainvs .titleBox h2 {
	font-size: 2rem;
	font-weight: bold;
}
.social_ini .cr_mainvs .titleBox h2 span {
	font-size: 3.1rem;
	font-weight: bold;
}
.social_ini .cr_mainvs.c-wysiwyg.lead{
	/*position: absolute;
	top: 450px;
	left:10px;*/
	margin: 15px 0  25px 
}

@media screen and (max-width: 767px) {
.social_ini .cr_mainvs .titleBox{
position:static;
width:100%;
margin-top:-20px;
/*text-align: center;*/
	}
.social_ini .cr_mainvs .titleBox h2{
font-size:1.5rem;
}
	.social_ini .cr_mainvs .titleBox h2 span{
font-size:2.5rem;
	}
/*	.social_ini .cr_mainvs .c-wysiwyg.lead{
		position:static;
		padding:25px 15px;
		margin-bottom:15px;
	}*/
}

/*本文------------- */
.social_ini .cr_contents{
	background-image:url("../images/sustainability/img_social_creation_bg001.png");
	padding:15px;
}

/*写真とコメント*/
.social_ini .cr_contents ul.comment{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
	margin-top:20px;
}

.social_ini .cr_contents ul.comment li.photo{
	width: 40%;
}
.social_ini .cr_contents ul.comment li.message{
	width:58%;
}
.social_ini .cr_contents ul.comment li.message .box{
	background-color: #f2c82c;
	border-radius: 10px;
	padding: 16px 24px;
}
.social_ini .cr_contents ul.comment li.message .box.tp40{
	margin-top:40px;	
}
.social_ini .cr_contents ul.comment li.message .box.tp60{
	margin-top:60px;	
}
.social_ini .cr_contents ul.comment li.message .box.tp90{
	margin-top:90px;	
}
.social_ini .cr_contents ul.comment li.message .box p.title{
	font-size: 1.8rem;
	font-weight:bold;
}
.social_ini .cr_contents ul.comment li.message .box p.cont{
	font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
.social_ini .cr_contents ul.comment{
	display:block;
	margin-top:20px;
}
.social_ini .cr_contents ul.comment li.photo{
		width: 95%;
		margin:15px 10px;
		text-align: center;
	}
.social_ini .cr_contents ul.comment li.photo img{
	width:80%;
	}
.social_ini .cr_contents ul.comment li.message{
		width:100%;
		margin-top:0;
	}
.social_ini .cr_contents ul.comment li.photo img,
.social_ini .cr_contents ul.comment li.message box{
		margin:auto ;
	}
.social_ini .cr_contents ul.comment li.message .box.tp40,
.social_ini .cr_contents ul.comment li.message .box.tp60,
.social_ini .cr_contents ul.comment li.message .box.tp90{
		margin-top:0;
	}
.social_ini .cr_contents ul.comment li.message .box p.cont{
	font-size: 1.4rem;
}
}

/*担当者コメント*/
.social_ini .cr_contents .comment02{
	background-color:#cbe1ef;
	width:80%;
	padding: 16px 35px;
	margin:auto;
	border-radius:12px;
}
.social_ini .cr_contents .comment02 h3.smltitle{
	font-weight: bold;
	color: #0c4da2;
	text-decoration: underline;
}
.social_ini .cr_contents .comment02 .manage_prof{
	margin:auto; 
}
.social_ini .cr_contents .comment02  .manage_prof img.photo{
	float: right;
	width:22%;
}
.social_ini .cr_contents .comment02 p.title{
	font-weight:bold;
	font-size:2rem;
	line-height:1.4;
	padding-top:20px;
}
.social_ini .cr_contents .comment02 p.position_t{

}
.social_ini .cr_contents .comment02 p.name{
	font-weight:bold;
	font-size:2rem;
}
	
@media screen and (max-width: 767px) {
	.social_ini .cr_contents .comment02 h3.smltitle{
	font-size:1.4rem;
	}
.social_ini .cr_contents .comment02  .manage_prof img.photo{
	width:28%;
}
}

/*万博_モンスターハンター ブリッジ
----------------------------------------------------*/

/*メインビジュアル*/
.social_ini .expo_bridge{
background-image: linear-gradient(#097e91, #4a6dc3 0%, #0a7d91 0%, #709a6d 50%, #d5c02d);
}
.social_ini .expo_bridge .mainvs{
	position: relative;
	overflow:hidden;
}
.social_ini .expo_bridge .mainvs img.mv{
	width:100%;
}
.social_ini .expo_bridge div.titleBox{
	margin: -35px 25px 30px;
}
.social_ini .expo_bridge .titleBox h2{
	font-size: 2rem;
	font-weight: bold;
	color:#fff;
}
.social_ini .expo_bridge .titleBox h2 span {
	font-size: 3.1rem;
	font-weight: bold;
}
.social_ini .expo_bridge .titleBox .c-wysiwyg.lead{
	margin:0 20px;
}
.social_ini .expo_bridge .titleBox .c-wysiwyg.lead p.sbtitle{
	font-size: 1.6rem;
	font-weight: bold;
	color:#fff;
	margin-bottom:5px;
}
.social_ini .expo_bridge .titleBox .c-wysiwyg.lead p.leadcont{
	color:#fff;
}
@media screen and (max-width: 767px) {
.social_ini .expo_bridge div.titleBox{
	margin: -10px 25px 30px;
}
.social_ini .expo_bridge .titleBox h2 {
    font-size: 1.8rem;
}
.social_ini .expo_bridge .titleBox h2 span {
    font-size: 2.4rem;
}
}

/*本文*/
.social_ini .expo_bridge .bgarea{
background: url("/ir/assets/images/sustainability/img_social_bridge_001_bg.png") no-repeat ;
	background-position:bottom;
	}
.social_ini .expo_bridge .bridge_comment{
	margin: 35px 25px;	
	position:relative;
}
.social_ini .expo_bridge .bridge_comment h3.comment_title{
	font-size:2.3rem;
	color: #fff;
}
.social_ini .expo_bridge .bridge_comment img.mitsumushi{
	position:absolute;
	top: 18%;
	width:140px;
} 

/*写真とコメント*/
.social_ini .expo_bridge .bridge_comment ul.comment{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
	margin-top:20px;
}
.social_ini .expo_bridge .bridge_comment ul.comment.mT_60{
	margin-top:-60px;
}
.social_ini .expo_bridge .bridge_comment li.photo{
	width: 40%;
}
.social_ini .expo_bridge .bridge_comment li.photo img{
	width: 100%;
}
.social_ini .expo_bridge .bridge_comment li.message{
	width:58%;
}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box{
	background-image: url("../images/sustainability/img_social_bridge_bg001.png");
	border-radius: 10px;
	padding: 16px 24px;
}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box.tp40{
	margin-top:40px;	
}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box.tp60{
	margin-top:60px;	
}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box.tp90{
	margin-top:90px;	
}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box p.title{
	font-size: 1.8rem;
	font-weight:bold;
}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box p.cont{
	font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
	
	.social_ini .expo_bridge .bridge_comment img.mitsumushi{
	position:absolute;
top: 22%;
	width:140px;
} 
.social_ini .expo_bridge .bridge_comment ul.comment{
	/*display:block;*/
	flex-direction: column-reverse;
	margin-top:20px;
}
.social_ini .expo_bridge .bridge_comment ul.comment.mT_60{
	margin-top:10px;
}
.social_ini .expo_bridge .bridge_comment ul.comment li.photo{
		width: 95%;
		margin:15px 10px;
		text-align: center;
	}
.social_ini .expo_bridge .bridge_comment ul.comment li.photo img{
	width:80%;
	}
.social_ini .expo_bridge .bridge_comment ul.comment li.message{
		width:100%;
		margin-top:0;
	}
.social_ini .expo_bridge .bridge_comment ul.comment li.photo img,
.social_ini .expo_bridge .bridge_comment ul.comment li.message box{
		margin:auto ;
	}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box.tp40,
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box.tp60,
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box.tp90{
		margin-top:0;
	}
.social_ini .expo_bridge .bridge_comment ul.comment li.message .box p.cont{
	font-size: 1.4rem;
}
}

/*担当者コメント*/
.social_ini .expo_bridge .comment02{
	position:relative;
	padding: 0px 25px;
	margin:-120px 0 40px;
		padding-bottom:55px;
}
.social_ini .expo_bridge .comment02 img.airou{
	position:absolute;
	width:200px;
	top:0;
	left:70px;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02{
	display: flex;
flex-wrap: wrap;
padding-top: 146px;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div.box{
	background-color:#fff;
	border-radius:10px;
	padding:18px 25px;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div .box p.sbtitle{
	color:#937c29;
	font-weight:bold;
	text-decoration: underline;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div .box p.title{
	color:#208391;
	font-size:16px;
	font-weight:bold;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02  div.box p.name span{
    font-weight: bold;
    font-size: 2rem;
}

.social_ini .expo_bridge .comment02 div.bridgecomment02 div.pmenber{
	width:100%;
}

.social_ini .expo_bridge .comment02 div.bridgecomment02 div.plusbox{
	width:100%;
	vertical-align: middle;
}
/*知事コメント*/
.social_ini .expo_bridge .comment02 div.bridgecomment02 div.chiji{
	width: 100%;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div.chiji ul.titleBox{
	display: flex;
	flex-wrap: wrap;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div.chiji ul.titleBox li.photo{
		width: 25%;
	text-align: center;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div.chiji ul.titleBox li.photo img{
		width: 110px;
	margin: 0 10px;
}
.social_ini .expo_bridge .comment02 div.bridgecomment02 div.chiji ul.titleBox li.title{
	width:75%;
}

.social_ini .expo_bridge .comment02 div.bridgecomment02 div.plusbox{
		text-align:center;
	font-size:6rem;
	line-height:1;
	color:#fff;
	font-weight:bold;
	
}
@media screen and (max-width: 767px) {
	.social_ini .expo_bridge .comment02{
		margin:-50px 0 40px;
	}
}