@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);



/* ===================================================
	difference_common
=================================================== */

h1 span{
	display:none;
}
h2 {
	background-color: #04AFCD;
	border-top: #fff 1px solid;
	border-bottom: #fff 1px solid;
	outline: #04AFCD 1px solid;
	position: relative;
	padding: 10px 10px 10px 1.8em;
	color: #fff;
	font-size: 1.4rem;
}
h2:before {
	position: absolute;
	top: 10px;
	left: 0.5em;
	content:"\f10c";
	height:32px;
	text-align:center;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
}
h3{
	border-left: 10px #04afcd solid;
	padding: 3px 5px 0px 10px;
	line-height: 1.6;
	margin:20px 0 15px 0;
	font-size: 1.4rem;
}
section{
	margin-bottom: 12%;
}

@media screen and (min-width: 640px) {
	h2{
		font-size: 2rem
	}
	h3{
		font-size: 2rem
	}
	section{
		margin-bottom: 80px;
	}

}





/* ===================================================
	difference_merit
=================================================== */
.merit-list{
	margin:5% 0 0 0;
}
.merit-list dt p{
	position: relative;
	display: inline-block;
	padding: 0px 5px 0px 5px;
	margin:0 0 5px 0;
	color: #fff;
	text-align: center;
	background: #04AFCD;
	z-index: 0;
}
.merit-list dt p:after {
	content: "";
	position: absolute;
	bottom: -8px;
	margin-left: 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 8px 0;
	border-color: transparent #04AFCD transparent transparent;
	z-index: -1;
}
.merit-list dd p:first-of-type{
	font-weight: 700;
}
.merit-list .wave{
	background: url(../img/wave.png) left bottom -0.5px repeat-x;
	background-size: 14px;
	font-size: 1.2rem;
	color: #04AFCD;
}
.merit-summary{
	background: #F2F1EE;
	padding: 20px;
	margin-top: 20px;
}
.merit-summary p span{
	background: linear-gradient(transparent 70%, #04AFCD 70%);
	line-height: 1.0;
	font-size: 1.4rem;
}
.merit-summary ul li{
	position: relative;
	list-style: none;
	padding-left: 1.2em;
	margin-left: 1em;

}
.merit-summary ul li:before{
	position: absolute;
	top: 0px;
	left: 0px;
	content:"\f046";
	text-align:center;
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	color: #04AFCD;
}
.message{

}
.message dl{
}
.message dl dt{
	display: table;
	margin: 0 auto 10px auto;
	text-align: center;
	width: 40%;
}
.message dl dd{
	position: relative;
	padding: 10px;
	width: auto;
	background: #F2F1EE;
	z-index: 0;
}
.message dl dd:after {
	content: "";
	position: absolute;
	top: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #F2F1EE transparent;
}
.img-difference{
	width: 50%;
}



@media screen and (min-width: 640px) {
	.merit-list{
		display: table;
	}
	.merit-list dt{
		display: table-cell;
		width: 20%;
		vertical-align: middle;
	}
	.merit-list dt p{
		position: relative;
		display: inline-block;
		padding: 10px 15px;
		width: auto;
		min-width: 115px;
		min-height: auto;
		color: #fff;
		text-align: center;
		background: #04AFCD;
		z-index: 0;
		line-height: 1.2;
		letter-spacing: 3px;
	}
	.merit-list dt p:after{
		content: "";
		position: absolute;
		bottom: 0;
		top: 50%;
		right: -10px;
		margin-top: -10px;
		display: block;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #04AFCD;
	}
	.merit-list dt p span{
		display: block;
		font-size: 2.0rem;
		letter-spacing: normal;
	}
	.merit-list dd{
		display: table-cell;
		padding-left: 20px;
	}
	.merit-list dd p:first-of-type{
		font-size: 1.4rem;
	}
	.merit-list dd p:first-of-type span{
		font-size: 2.0rem;
	}
	.message dl{
		background: #F2F1EE;
		padding: 10px;
	}
	.message dl dt{
		display: table-cell;
		vertical-align: middle;
		width: 20%;
	}
	.message dl dd{
		display: table-cell;
	}
	.img-difference{
		width: 30%;
	}
}



/* ===================================================
	difference_case
=================================================== */
.case-title{
	display: table;
	color: #04AFCD;
	margin-top:6%; 
}
.case-title dt{
	display: table-cell;
	border:3px solid #04AFCD;
	white-space: nowrap;
	padding: 0px;
	vertical-align: middle;
	text-align: center;
	width: auto;
	line-height: 1.2;
	width: 4.5em;
	height: 4.5em;
	font-size: 1.2rem;
	font-weight: 700;
}
.case-title dt br{
	display: block;
}
.case-title dt span{
	font-size: 2.0rem;
}
.case-title dd{
	display: table-cell;
	font-size: 1.2rem;
	line-height: 1.5;
	padding-left: 3%;
}
.case-range{
	padding: 5%;
	border-radius: 12px;
	border: 3px solid #ddd;
	background-color: #fff;
}
.case-range h4{
	margin-bottom: 10px;
	padding: 0px 0px 0px 10px;
	border-left: 5px solid #04AFCD;
	color: #04AFCD;
	font-weight: 700;
}
.case-img-people{
	float: left;
	width: 30%;
	margin: 0 2% 2% 0;
	display: block;
	padding: .25rem;
	line-height: 1.7;
	border: 1px solid #ddd;
	border-radius: 20px;
	-webkit-transition: border .2s ease-in-out;
	transition: border .2s ease-in-out;
}
.case-report dt img{
	width: 100%;
}
.bnr-text li{
	list-style: none;
}
.bnr-text li a{
	border-top: 1px solid #04AFCD;
	border-left: 1px solid #04AFCD;
	border-right: 1px solid #04AFCD;
	border-bottom: 1px solid #04AFCD;
	border-radius: 7px;
	background: #fff;
	box-shadow: #999 0 0 2px;
	font-weight: 700;
	list-style: none;
	color: #04AFCD;
	position: relative;
	display: block;
	padding: 8px 20px 8px 10px;
	text-decoration: none;
	border-radius: 7px;
	line-height: 1.2;
}
.bnr-text li:first-of-type{
	margin-bottom: 10px;
}
.bnr-text li a:after{
	position: absolute;
	top: 1.2em;
	right: 5px;
	margin-left: 0.5em;
	content: '\f08e';
	font-family: FontAwesome;
	font-weight: normal;
	width: 1.2857142857142858em;
	text-align: center;
}

@media screen and (min-width: 640px) {
	.case-title{
		width: 100%;
	}
	.case-title dt{
		width: 6em;
		height: auto;
	}
	.case-title dd{
		display: table-cell;
		font-size: 1.2rem;
		line-height: 1.5;
		padding-left: 1%;
	}
	.case-title dt br{
		display: none;
	}
	.case-title dt span{
	font-size: 1.2rem;
	}
	.case-img-people{
		width: 10%;
		margin: 0 2% 0 0;
	}
	.case-baloon{
		position: relative;
		padding: 15px;
		background: #fff;
		border: 3px solid #ccc;
		z-index: 0;
		margin-left: 105px;
		min-height: 7em;
	}
	.case-baloon:before {
		content: "";
		position: absolute;
		top: 20%; left: -8px;
		margin-top: -9px;
		display: block;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 9px 9px 9px 0;
		border-color: transparent #fff transparent transparent;
		z-index: 0;
	}
	.case-baloon:after {
		content: "";
		position: absolute;
		top: 20%; left: -12px;
		margin-top: -10px;
		display: block;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 10px 10px 10px 0;
		border-color: transparent #ccc transparent transparent;
		z-index: -1;
	}
	.case-report{
		display: table;
	}
	.case-report dt{
		display: table-cell;
		vertical-align: top;
		padding: 0 20px 0 0;
		width: 30%;
	}
	.case-report dd{
		display: table-cell;
		vertical-align: top;
	}
	.bnr-text{
		display: table;
	}
	.bnr-text li{
		display: table-cell;
		padding: 0 10px 0 10px;
	}
}


/* ===================================================
	difference_faq
=================================================== */


dl.accordion{
	margin-bottom: 15px;
	display:table;
	border-top:1px solid #ccc;
	border-right: none;
	border-bottom: none;
	border-left: none;
	width: 100%;
}
dl.accordion > dt{
	position: relative;
	width: 100%;
	min-height:2em;
	padding: 12px 25px 12px 15px;
	border-top: 1px solid #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: url(../img/icon-q.png) no-repeat,-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background: url(../img/icon-q.png) no-repeat,-webkit-linear-gradient(top, #fff, #eee);
	background: url(../img/icon-q.png) no-repeat,linear-gradient(top, #fff, #eee);
	line-height: 1.5;
	cursor: pointer;
	display:table;
	height: 6em;
}
dl.accordion dt span{
	display:table-cell;
	vertical-align:middle;
}
dl.accordion > dt::after{
	position: absolute;
	top: 50%;
	right: 8px;
	margin-top: -0.5em;
	content: '\f067';
	font-family: FontAwesome;
	color: #999999;
}
dl.accordion dt.active {
	background: url(../img/icon-q.png) no-repeat,-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
	background: url(../img/icon-q.png) no-repeat,-webkit-linear-gradient(top, #fff, #eee);
	background: url(../img/icon-q.png) no-repeat,linear-gradient(top, #fff, #eee);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
dl.accordion dt.active::after {
	content: '\f068';
}
dl.accordion > dd{
	background: url(../img/icon-a.png) no-repeat;
	padding: 12px;
	background-color: #fff;
	border-top: 1px solid #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}