@charset "utf-8";

/*
================
voices.css
================
*/

/* -------------
■ 汎用
------------- */
.lh0 {
	line-height: 0; }

.spEle {
	display: none; }


/* -------------
■ 全体
------------- */
.voicesWrapper { 
	padding-bottom: 20px;
	background-color: #f4eee7; }

img[src*="https://secure."] {
	display: none!important; }

/* -------------
■ タイトル
------------- */
.titleWrapper {
	padding: 60px 0 0;
	text-align:  center; }

.titleWrapper .text {
	margin-top: 30px;
	color: #595757;
	font-size: 18px;
	font-weight: bold;
	line-height: 32px; }

.titleWrapper .kome {
	margin-top: 10px;
	color: #595757;
	font-size: 12px;
	line-height: 16px; }

/* -------------
■ リスト
------------- */
.listWrapper {
	width: 1080px;
	margin: 50px auto 0; }

.listWrapper li {
	position: relative;
	overflow:  hidden;
	top: 100px;
	float: left;
	width: 340px;
	height: 340px;
	margin: 0 10px 20px;
	line-height: 0;
	cursor: pointer;
	opacity: 0; }
/*
.listWrapper li .listInner {
	transition: all .4s; }

.listWrapper li .listInner:hover {
	opacity: .6; }
*/
.listWrapper li.action {
	top: 0;
	opacity: 1; }

.listWrapper li:nth-child(3n+1) {
	transition: opacity 1.5s, top .4s cubic-bezier(0.165, 0.84, 0.44, 1); }

.listWrapper li:nth-child(3n+2) {
	transition: opacity 1.5s, top .8s cubic-bezier(0.165, 0.84, 0.44, 1); }

.listWrapper li:nth-child(3n) {
	transition: opacity 1.5s, top 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); }

.listWrapper li h2 {
	margin-top: 10px;
	font-size: 22px;
	line-height: 26px;
	text-align:  center; }

.listWrapper li .cover {
	position: absolute;
	top: 0;
	left:  0;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 0;
	transition: all .4s;
	background-color: rgba(0,0,0,0.6); }

.listWrapper li .cover span {
	display: block;
	position: relative;
	top: 60%;
	margin-top: -10px;
	color: #fff;
	font-size: 14px;
	font-style: italic;
	line-height: 20px;
	letter-spacing: 3px;
	transition: all .4s; }

.listWrapper li:hover .cover {
	opacity: 1; }

.listWrapper li:hover .cover span {
	top: 50%; }

.blue h2 {
	color: #009fe8; }

.red h2 {
	color: #e6311d; }

.listWrapper .graph {
	width: 320px;
	height: 320px;
	margin: -33px auto 0; }

.number {
	font-size: 44px;
	font-family: "DIN Next W01 Regular";
	font-style: italic;
	font-weight: lighter; }

.percent {
	color: #009fe8;
	font-size: 12px; }

.listWrapper li .btn {
	position: absolute;
	bottom:  10px;
	left:  0;
	width: 100%;
	text-align:  center; }

/* -------------
■ ポップアップ　ユーザー
------------- */
.userPopupWrapper {
	display:  none;
	position:  fixed;
	top:  0;
	left:  0;
	width: 100%;
	height: 100%;
	z-index: 999; }

.userPopupWrapper .popupBg {
	position: absolute;
	top:  0;
	left:  0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); }

.userPopupBox {
	position:  absolute;
	top: 50%;
	left: 50%;
	width: 820px;
	height: 450px;
	margin: -225px 0 0 -410px;
	background-color: #fff; }

.userPopupBox li {
	position: relative;
	float: left;
	width: 820px; }

.userPopupBox .close {
	position: absolute;
	top:  8px;
	right:  10px;
	cursor:  pointer;
	transition: all .3s;
	z-index: 1; }

.userPopupBox .close:hover {
	opacity: .6; }

/* 画像　*/
.userPopupBox li .img {
	float: left;
	width: 450px; }

.userPopupBox li .img img {
	width: 100%; }

/* テキスト　*/
.userPopupBox li .textWrapper {
	position: relative;
	float: right;
	width: 370px;
	height: 450px; }

.userPopupBox .textWrapper .textInner {
	padding: 25px; }

.userPopupBox li h2 {
	padding-bottom: 15px;
	color: #231815;
	font-size: 26px;
	font-weight: normal;
	line-height: 36px;
	border-bottom: 1px solid #888888; }

.userPopupBox li .text {
	margin-top: 15px;
	color: #231815;
	font-size: 14px;
	line-height: 26px; }

.userPopupBox li .profile {
	color: #4d5269;
	font-size: 14px;
	line-height: 28px; }

/* 使用PC　*/
.userPopupBox li .pcWrapper {
	position:  absolute;
	left: 0;
	bottom: 25px;
	width: 100%;
	padding: 0 0 0 25px;
	box-sizing:  border-box; }

.userPopupBox li .pcWrapper .info {
	position:  relative;
	width: 100%; }

.userPopupBox li .pcWrapper .usetext {
	color: #717071;
	font-size: 14px;
	font-weight: bold;
	line-height: 20px; }

.userPopupBox li .pcWrapper h3 {
	display:  inline-block;
	width: 150px;
	padding-top: 5px;
	color: #717071;
	font-size: 26px;
	font-weight: normal;
	line-height: 28px;
	border-top: 1px solid #888;}

.userPopupBox li .pcWrapper h3 span {
	position:  relative;
	top:  5px;
	font-size: 20px; }

.userPopupBox li .pcWrapper h3 .model {
	display: block;
	position:  static;
	font-size: 12px;
	line-height: 18px;}

.userPopupBox li .pcWrapper .btn {
	margin-top: 5px; }

.userPopupBox li .pcWrapper .btn a {
	display:  inline-block;
	width: 150px;
	color: #231815;
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	background: url(../images/bg_detail_arrow.png) no-repeat right center; }

.userPopupBox li .pcWrapper .pc {
	position:  absolute;
	right: 15px;
	bottom: 0; }

.userPopupBox a {
	transition: all .3s; }

.userPopupBox a:hover {
	opacity: 0.6; }

.userPopupBox .prev,
.userPopupBox .next {
	display:  block;
	position: absolute;
	top: 0;
	width: 60px;
	height: 100%; }

.userPopupBox .prev span,
.userPopupBox .next span {
	display: none; }

.userPopupBox .prev {
	left: -60px;
	background: url(../images/bg_prev.png) no-repeat center center; }

.userPopupBox .next {
	right: -60px;
	background: url(../images/bg_next.png) no-repeat center center; }

/* -------------
■ ポップアップ　コメント
------------- */
.commentPopupWrapper {
	display: none;
	position:  fixed;
	top:  0;
	left:  0;
	width: 100%;
	height: 100%;
	z-index: 999; }

.commentPopupWrapper .popupBg {
	position: absolute;
	top:  0;
	left:  0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); }

.commentPopupBox {
	position:  absolute;
	top: 50%;
	left: 50%;
	width: 780px;
	height: 380px;
	margin: -190px 0 0 -380px;
	background-color: rgba(255, 255, 255, 0.8); }

.commentPopupBox h2 {
	font-size: 26px;
	line-height: 28px;
	text-align: center; }

.commentPopupBox .blue h2,
.commentPopupBox .blue .btn {
	color: #009fe8; }

.commentPopupBox .red h2,
.commentPopupBox .red .btn {
	color: #e6311d; }

.commentPopupBox .graph {
	width: 320px;
	height: 320px;
	margin: -30px auto 0;}

.commentPopupBox .btn {
	margin-top: -15px;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer; }

.commentPopupBox .commentBox {
	display: none;
	position: relative;
	margin: 30px; }

.commentPopupBox .commentBox.current {
	display: block; }

.commentPopupBox .balloon {
	position: absolute;
	margin-top: 30px;
	opacity: 0;
	padding: 10px 15px;
	border-radius: 10px;
	background-color: #fff; }

.commentPopupBox .balloon h3 {
	font-size: 18px;
	font-weight: normal;
	line-height: 22px; }
/*
.commentPopupBox .b2 h3,
.commentPopupBox .b3 h3 {
	font-size: 22px;
	line-height: 26px;}
*/
.commentPopupBox .balloon p {
	font-size: 12px;
	line-height: 20px; }

.commentPopupBox .on .balloon {
	margin-top: 0px;
	opacity: 1; }

.commentPopupBox .b0 {
	top: 60px;
	right: 507px;
	transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

.commentPopupBox .b1 {
	top: 60px;
	left: 507px;
	transition: all 1.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

.commentPopupBox .b2 {
	top: 158px;
	right: 515px;
	transition: all 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

.commentPopupBox .b3 {
	top: 158px;
	left: 515px;
	transition: all .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

.commentPopupBox .b4 {
	top: 256px;
	right: 501px;
	transition: all .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

.commentPopupBox .b5 {
	top: 256px;
	left: 475px;
	transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.commentPopupBox .balloon img {
	position: absolute;
	top: 50%;
	margin-top: -9px; }

.commentPopupBox .b0 img,
.commentPopupBox .b2 img,
.commentPopupBox .b4 img {
	right: -14px;}

.commentPopupBox .b1 img,
.commentPopupBox .b3 img,
.commentPopupBox .b5 img {
	left: -14px;}

/* -------------
■ インテル
------------- */
.intelWrapper {
	margin: 80px auto; }





/*
================
スマートフォン
================
*/

/* -------------
■ 全体
------------- */
body.sp {
	position: relative; }

.sp .pcEle {
	display: none; }

.sp .spEle {
	display: block; }


/* -------------
■ タイトル
------------- */
.sp .titleWrapper {
	padding-top: 30px; }

.sp .titleWrapper .img {
	margin: 0 15px;
	text-align:  center; }

.sp .titleWrapper .img img {
	max-width: 375px; }

.sp .titleWrapper .text {
	margin: 15px 15px 0;
	font-size: 12px;
	line-height: 20px; }

.sp .titleWrapper .kome {
	font-size: 10px; }

/* -------------
■ リスト
------------- */
.sp .listWrapper {
	width: auto;
	margin: 25px auto 0; }

.sp .listWrapper li {
	float: none;
	width: auto;
	height: auto;
	margin: 0 15px 20px; }

.sp .listWrapper li h2 {
	font-size: 16px;
	line-height: 20px; }

.sp .listWrapper .graph {
	width: 290px;
	height: 290px;
	margin: -20px auto 0; }

.sp .listWrapper li .btn {
	position:  static;
	margin-top: -40px; }

.sp .listWrapper li .btn img {
	width: auto;
	max-width: 100%; }

/* -------------
■ ポップアップ　ユーザー
------------- */
.sp .userPopupWrapper {
	position: absolute; }

.sp .userPopupBox {
	position: relative;
	top:  auto;
	left:  auto;
	width: 90.625%;
	height: auto;
	margin: 0 auto;
	z-index: 10; }

.sp .userPopupBox li {
	width: 100%; }

.sp .userPopupBox .close {
	top: -40px;
	right:  0;
	width: 40px; }


.sp .userPopupBox li .img {
	float: none;
	width: auto; }

.sp .userPopupBox li .img img {
	width: 100%; }

.sp .userPopupBox li .textWrapper {
	float: none;
	width: auto;
	height: auto; }

.sp .userPopupBox li .textWrapper .textInner {
	padding: 15px; }

.sp .userPopupBox li h2 {
	font-size: 16px;
	line-height: 20px; }

.sp .userPopupBox li h2 br {
	display: none; }

.sp .userPopupBox li .text {
	font-size: 12px;
	line-height: 20px; }

.sp .userPopupBox li .profile {
	font-size: 12px;
	line-height: 20px; }

.sp .userPopupBox li .pcWrapper {
	position: static;
	margin-top: 10px;
	padding:  0; }

.sp .userPopupBox li .pcWrapper .usetext {
	font-size: 12px; }

.sp .userPopupBox li .pcWrapper h3 {
	width: 130px;
	font-size: 18px;
	line-height: 20px; }

.sp .userPopupBox li .pcWrapper .pc {
	bottom: 10px;
	width: 130px; }

.sp .userPopupBox li .pcWrapper .btn {
	margin-top: 5px; }

.sp .userPopupBox li .pcWrapper .btn a {
	width: 130px;
	font-size: 12px;
	line-height: 20px;
	background:  url(../images/bg_detail_arrow_sp.png) no-repeat right center;
	background-size: 15px auto; }

.sp .userPopupBox .prev,
.sp .userPopupBox .next {
	width: 40px;
	height: 54%; }

.sp .userPopupBox .prev {
	left: 0;
	background: url(../images/bg_prev_sp.png) no-repeat center center;
	background-size: 20px auto; }

.sp .userPopupBox .next {
	right: 0;
	background: url(../images/bg_next_sp.png) no-repeat center center;
	background-size: 20px auto; }


/* -------------
■ ポップアップ　コメント
------------- */
.sp .commentPopupWrapper {
	position: absolute; }

.sp .commentPopupBox {
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	margin: 0;
	z-index: 1; }

.sp .commentPopupBox .commentBox {
	margin: 15px; }

.sp .commentPopupBox h2 {
	padding-top: 15px;
	font-size: 16px;
	line-height: 20px; }

.sp .commentPopupBox .graph {
	width: 290px;
	height: 290px; }

.sp .commentPopupBox .btn {
	margin-top:  0;
	padding:  15px 0;
	font-size: 12px;
	line-height: 16px; }

.sp .commentPopupBox .balloon {
	display: inline-block;
	position: static;
	width: 100%;
	margin:  10px 0 25px;
	padding: 15px 10px;
	box-sizing:  border-box; }

.sp .commentPopupBox .on .balloon {
	margin-top: -15px;}

.sp .commentPopupBox .balloon img {
	display: none; }

.sp .commentPopupBox .balloon h3 {
	font-size: 14px;
	line-height: 20px; }

.sp .commentPopupBox .balloon p {
	font-size: 10px;
	line-height: 16px; }

.sp .commentPopupBox .b0 {
	transition: all .3s;}

.sp .commentPopupBox .b1 {
	transition: all .6s;}

.sp .commentPopupBox .b2 {
	transition: all .9s;}

.sp .commentPopupBox .b3 {
	transition: all 1.2s;}

.sp .commentPopupBox .b4 {
	transition: all 1.5s;}

.sp .commentPopupBox .b5 {
	transition: all 1.8s; }

/* -----------------
■ インテル
------------------- */
.sp .intelWrapper {
	width: auto;
	margin: 30px 10px 10px; }

.sp .intelWrapper .img {
	float: none;
	width: 110px;
	margin: 0 auto 30px; }

.sp .intelWrapper .img img {
	width: auto;
	max-width: 100%; }

.sp .intelWrapper .textWrapper {
	flaot: none;
	width: auto;
	margin: 0; }

.sp .intelWrapper .textWrapper strong {
	display: block; }

.sp .intelWrapper .textWrapper p {
	margin: 0;
	font-size: 12px;
	line-height: 20px; }

.sp .intelWrapper .note2 {
	font-size: 12px;
	line-height: 20px; }