@charset "utf-8";
/* CSS Document */

div.difference-contents-box { width: 99%; max-width: 1000px; position: relative; overflow: hidden; background-color: #FFFFFF; margin: 20px auto; font-size: 1.1em; line-height: 1.5em;}
.difference-contents-box img{ border:none; width: 100%; }
.difference-contents-box a img{	border:none; filter:alpha(opacity=100); -moz-opacity: 1.0; }
.difference-contents-box a:hover img { opacity: 0.6; filter: alpha(opacity=60);}
.difference-contents-box a { text-decoration: none; }
.difference-contents-box p{	margin-bottom: 2em; }
.difference-contents-box .check-point { position: relative;	background-color: #fff;	padding: 10px; margin: 30px auto; border: 2px solid #333333; color: #333; font-weight:bold;	border-radius: 7px; }
.difference-contents-box .check-point::before,
.difference-contents-box .check-point::after { content: '';	position: absolute;	border: 10px solid transparent;	top: 100%;	left: 5%; }
.difference-contents-box .check-point::before {	border-top: 12px solid #333333; }
.difference-contents-box .check-point::after { margin-top: -4px; border-top: 12px solid #fff;}
.item-logo{ width:50%; margin: 2.5rem auto;}
.difference-contents-box h1 { width: 96%; font-size: 140%; padding: 0.4em 0.5em; border-left: solid 10px #330000; box-shadow: 2px 2px 6px gray; margin-top: 1em; }
.difference-contents-box h2,h3{ position: relative; text-align: center; }
.difference-contents-box h2 { font-size: 130%; padding: 10px 0;	margin: 2.5em 0;}
.difference-contents-box h2:before { content: ""; position: absolute; border-radius: 50%; border: 5px solid #f5deb3; border-left-color: transparent; border-right-color: transparent;-webkit-transform: translateX(-50%); transform: translateX(-50%);}
.difference-contents-box h3{ color: white; font-size: 120%; padding: 0.5rem 0; background: #330000; border:none !important; clear: both; border-radius: 7px; }
.difference-contents-box h4{ border-bottom: double 2px #cccccc; padding: 0.5em; margin: 1.5em 0 1em;	font-size: 120%; letter-spacing: 0.2em; background-color: #fffaf0;}
.sleep-check{ border: solid 1px #999999; border-radius: 7px; padding: 1rem 0.5rem; margin: 20px 0; list-style: none; }
.sleep-check li{ position: relative; padding: 0px 0px 3px 40px;	margin-bottom: 15px; border-bottom: dotted 1px #cccccc; }
.sleep-check li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
}
.difference-contents-box > dl{ margin: 1.5rem auto 4rem; width: 100%; clear:both; }
.difference-contents-box > dl > dt{	font-weight:bold; border-bottom: solid 2px #f6f6f6; }
.difference-contents-box > dl > dt:before{ font-family: "Font Awesome 5 Free"; content: "\f152"; color: #330000; padding: 0 0 10px 6px; }
.difference-contents-box > dl > dd{	margin-left: 0rem; }

/*説明文の協調部分*/
.text-point{ background: linear-gradient(transparent 40%, #ffe4b5 0%); }

/*リンクボタン用*/
.link-btn{ text-align: center; }
.link-btn a{ display: block; width:80%; margin: 1rem auto 1.5rem; padding: 7px 0; border: 1px solid #333; border-radius: 0; -webkit-box-shadow: 4px 4px 0 #333; box-shadow: 4px 4px 0 #333; color:#333;}
.link-btn a:hover{ color:#333; }
.link-btn a:visited{ color:#333; }
.link-blank{ margin-bottom: 5rem;}
.fa-angle-right{ margin-left: 0.5rem;}

/* pc */ /*768px*/
@media screen and (min-width: 751px) {
.sp_only{ display: none;}
.difference-contents-box h2:before { top: -15px; left: 50%; width: 30%; height: 150%;}
.difference-contents-box > dl > dt{	margin: 0 0 1rem 0; font-size: 130%; }
}
/*ここからスマホ用*/
@media screen and (max-width: 750px){
.difference-contents-box {width: 94% !important; padding: 2.5em 3% 0;}	
.difference-contents-box h1 {width: 90% !important;}
.difference-contents-box h2:before {top: -20px; left: 50%; width: 30%; height: 130%;}
.difference-contents-box h4{font-size:1.2em;}
.difference-contents-box h4:after{ font-size: 0.7em !important;}
.difference-contents-box h3{font-size:1.1em;clear: both;}
.link-btn a{ width:88%; }
.difference-contents-box > dl > dt{	margin: 0 0 1rem 0; font-size: 110%; }
}