@charset "utf-8";

h2{
	padding: 1em 0 0.7em;
	border-top: 1px solid #1BA0B2;
	border-bottom: 1px solid #1BA0B2;
}

h6.title{
	color:#F9423A;
}

.arrowLink{
	color:#F9423A;
	text-decoration:underline;
}
.arrowLink::before{
	content:"";
	background:url(../images/understandingthecause/icon_arrow.png) no-repeat;
	background-size:100%;
	display:inline-block;
	width:1em;
	height:1em;
	position:relative;
	top:0.15em;
}

.lrBox{
	display:flex;
	align-items:flex-start;
	flex-direction:row-reverse;
}

.lrBox > div{
	flex:1;
	margin-right:5px;
}
.picImg{
	width:146px;
}
.listTitle{
	font-size:1.5rem;
	margin-bottom:0.3rem;
}
.pointList{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.pointList > li{
	width:31%;
	margin-bottom:2em;
}
.pointList dl{
	display:flex;
	flex-direction:column;
	height:100%;
}
.pointList dt{
	text-align:center;
	font-weight:bold;
	color:white;
	font-size:1.4rem;
	background:#1BA0B2;
	padding:0.2em 0;
	height:3.4em;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:0.5em;
	border-radius:4px;
}
.pointList dd{
	display:flex;
	justify-content:space-between;
	flex-direction:column;
	flex:1;
}

.pointList .annotation{
	font-size:1.2rem;
	text-align:right;
}

.pointList .shareImg{
	margin-left:-58%;
}

.pointList.large li{
	width:48%;
}

.serifList li{
	display:flex;
	justify-content:space-between;
	align-items:start;
	position:relative;
	margin-bottom:1em;
}
.serifList li > p{
	flex:1;
	background:#EEF8FB;
	border-radius:10px;
	padding:0.5em;
	position:relative;
}
.serifList li > p::after{
	content:"";
	position:absolute;
	left:0;
	top:2.2em;
	margin-left:-1em;
	border:0.5em solid transparent;
	border-right:0.5em solid #EEF8FB;
}
.serifList li img{
	width:100px;
}
.serifList li div{
	text-align:center;
}
.serifList li div > p{
	margin-top:0.3em;
	font-size:1.1rem;
}
.serifList li div > p span{
	font-weight:bold;
}
.serifList li:nth-child(2n){
	flex-direction:row-reverse;
}
.serifList li:nth-child(2n) > p::after{
	left:auto;
	right:0;
	margin-left:auto;
	margin-right:-1em;
	border:0.5em solid transparent;
	border-left:0.5em solid #EEF8FB;
}

.textRight{
	text-align:right;
}

.checkList{
	display:flex;
	gap:10px;
	margin-bottom:1em;
}


.hpserchPopupBack{
	background:black;
	opacity:0.5;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	z-index:21;
	display:none;
}
.hpserchPopupClose{
	background:url(../images/understandingthecause/popup_close.png) no-repeat;
	background-size:cover;
	position:absolute;
	right:-16px;
	top:-16px;
	width:32px;
	height:32px;
	cursor:pointer;
	z-index:23;
}
.hpserchPopup{
	position:fixed;
	width:700px;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:22;
	display:none;
}
.hpsearchLinkArea h6{
	padding-right:1em;
}
.bnrLine.popupHide{
	transition:opacity 0.5s;
	opacity:0 !important;
}
@media screen and (max-width:768px){
	.lrBox{
		display:block;
		overflow:hidden;
	}
	.lrBox > img{
		float:right;
	}
	
	.picImg{
		width:35%;
		margin-left:5%;
	}
	.pointList li{
		width:48%;
	}
	.pointList.large li{
		width:100%;
	}
	.pointList dt{
		font-size:2.7vw;
	}
	.pointList .shareImg{
		margin-left:auto;
	}
	
	.serifList li{
		display:block;
	}

	.serifList li > p::after, .serifList li:nth-child(2n) > p::after{
		left:50%;
		right:auto;
		margin-left:-1em;
		margin-right:auto;
		top:0;
		margin-top:-1.8em;
		border:1em solid transparent;
		border-bottom:1em solid #EEF8FB;
	}

	
	.checkList{
		gap:0;
		flex-wrap:wrap;
		margin-bottom:2em;
	}
	.checkList li{
		width:49%;
	}
	.checkList li:nth-child(2n){
		margin-left:2%;
	}
	
	.hpserchPopupClose{
		right:0;
		top:0;
		width:10%;
		height:0;
		padding-bottom:10%;
		margin-top:-10%;
	}
	.hpserchPopup{
		width:calc(98%);
		background:#eef8fb;
	}
	.hpserchPopup .hpsearchLinkArea{
		margin-bottom:0;
	}
	.hpserchPopup .hpsearchLinkArea::before{
		content:none;
	}
	.hpserchPopup .hpsearchLinkArea::after{
		left:58%;
	}
}