@charset "utf-8";

/* ===================================================================
CSS information
 file name  :  /rjet/voice.css
=================================================================== */

@media screen and (min-width: 769px) {
/***** PC用のスタイル記述 *****/

/*** top_area ***/
#top_area{
	padding:0 0 10px;
}

#top_area h3{
	font-size:48px;
	color:#00ABE1;
	padding:15px 0 0 30px;
	line-height:1.2;
}

#top_area h3 b{
	font-size:27px;
	color:#333;
	vertical-align:middle;
}


/*** content_area ***/
#content_area{
	padding:5px 0 0 0;
	margin:0 0 20px;
	overflow:hidden;
	border-bottom:1px solid #c8cacb;
	
}

#content_area .inner{
	width:920px;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	display:table;
	border-top:1px solid #d7d5cf;
}

#content_area .profile{
	background-color:rgba(87,137,163,0.2);
	width:34%;
	padding:20px 0 0;
	display:table-cell;
}

#content_area .profile h3{
	position: relative;
	display: inline-block;
	padding: 0 10px;
	width: auto;
	min-width: 95px;
	height: 46px;
	color: #FFF;
	line-height: 52px;
	text-align: center;
	background: #5789a3;
	border-radius: 60%;
	font-size:16px;
	font-weight:bold;
	margin:0 0 10px 15px;
}
#content_area .profile h3:before {
	content: "";
	position: absolute;
	bottom: -10px; left: 60px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #5789a3;
	border-radius: 0 30px 0 30px;
	z-index: -1;
}
#content_area .profile h3:after {
	content: "";
	position: absolute;
	bottom: -5px; left: 70px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 0 30px 0 30px;
	z-index: -1;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}

#content_area .profile .img{
	padding:5px 0;
	background:#FFF;
	box-shadow:1px 1px 5px #333;
	text-align:center;
	line-height:0;
	width:305px;
	margin:0 0 25px 25px;
	-webkit-transform: rotate(-5deg);
	   -moz-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	     -o-transform: rotate(-5deg);
	        transform: rotate(-5deg);
}

#content_area .profile ul{
	margin:0 15px;
	border-top:1px solid #FFF;
}


#content_area .profile ul li{
	font-size:14px;
	font-weight:bold;
	border-bottom:1px solid #FFF;
	padding:5px 0 5px 10px;
}



#content_area .text{
	display:table-cell;
	padding:20px 0 0 35px;
	vertical-align:top;
}

#content_area .text h3{
	font-size:14px;
	font-weight:bold;
	color:#000;
	border-left:4px solid #5789a3;
	padding:0 0 0 5px;
	line-height:1.3;
	margin:0 0 10px;
}

#content_area .text p{
	font-size:14px;
	line-height:1.6;
	margin:0 0 25px;
}

	
#content_area .text .page{
	margin:50px 0;
}

#content_area .text .page ul{
	text-align:center;
	width:100%;
}

#content_area .text .page ul li{
	display:inline-block;
	margin:0 5px;
}

#content_area .text .page ul li a{
	display:block;
	font-size:16px;
	text-align:center;
	color:#FFF;
	width:135px;
	padding:6px 0 3px;
	background:#5789a3;
	border-radius:5px;
	position:relative;
}


@font-face {
    font-family: 'icon_arrow_back';
    src:    url('../../fonts/icon_arrow_back.eot?8ivirp');
    src:    url('../../fonts/icon_arrow_back.eot?8ivirp#iefix') format('embedded-opentype'),
        url('../../fonts/icon_arrow_back.ttf?8ivirp') format('truetype'),
        url('../../fonts/icon_arrow_back.woff?8ivirp') format('woff'),
        url('../../fonts/icon_arrow_back.svg?8ivirp#icon_arrow_back') format('svg');
    font-weight: normal;
    font-style: normal;
}

#content_area .text .page ul li.back a:before {
	content: "\b900";
    font-family: 'icon_arrow_back' !important;
	color:#FFF;
	left:10px;
	top:5px;
}

@font-face {
    font-family: 'icon_arrow';
    src:    url('../../fonts/icon_arrow.eot?h800c4');
    src:    url('../../fonts/icon_arrow.eot?h800c4#iefix') format('embedded-opentype'),
        url('../../fonts/icon_arrow.ttf?h800c4') format('truetype'),
        url('../../fonts/icon_arrow.woff?h800c4') format('woff'),
        url('../../fonts/icon_arrow.svg?h800c4#icon_arrow') format('svg');
    font-weight: normal;
    font-style: normal;
}

#content_area .text .page ul li.next a:before {
	content: "\a900";
    font-family: 'icon_arrow' !important;
	color:#FFF;
	right:10px;
	top:5px;
}
/*
#content_area .text .page ul li.back a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  left: 10px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #FFF;
}
#content_area .text .page ul li.back a:after{
  display: block;
  content: "";
  position: absolute;
   -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  left: 13px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #775e6c;
}
#content_area .text .page ul li.next a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  right: 10px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #FFF;
}
#content_area .text .page ul li.next a:after{
  display: block;
  content: "";
  position: absolute;
   -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  right: 13px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #775e6c;
}
*/



}
@media screen and (max-width: 768px) {
/* タブレット用のスタイル記述 */
/* スマートフォン用のスタイル記述 */

/*** top_area ***/
#top_area{
	padding:0 0 5px;
}

#top_area h3{
	font-size:200%;
	color:#00ABE1;
	padding:15px 10px;
	line-height:1.2;
}

#top_area h3 b{
	font-size:80%;
	color:#333;
	vertical-align:middle;
}


/*** content_area ***/
#content_area{
	padding:0;
	margin:0 0 20px;
	overflow:hidden;
	border-bottom:1px solid #c8cacb;
	
}

#content_area .inner{
	margin:0 auto;
	padding:0;
	overflow:hidden;
	border-top:1px solid #d7d5cf;
}

#content_area .profile{
	background-color:rgba(87,137,163,0.2);
	padding:20px 0 10px;
}

#content_area .profile h3{
	position: relative;
	display: inline-block;
	padding: 0 10px;
	width: auto;
	min-width: 95px;
	height: 46px;
	color: #FFF;
	line-height: 52px;
	text-align: center;
	background: #5789a3;
	border-radius: 60%;
	font-size:130%;
	font-weight:bold;
	margin:0 0 10px 15px;
}
#content_area .profile h3:before {
	content: "";
	position: absolute;
	bottom: -10px; left: 60px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #5789a3;
	border-radius: 0 30px 0 30px;
	z-index: -1;
}
#content_area .profile h3:after {
	content: "";
	position: absolute;
	bottom: -5px; left: 70px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #FFF;
	border-radius: 0 30px 0 30px;
	z-index: -1;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}

#content_area .profile .img{
	padding:5px;
	background:#FFF;
	box-shadow:1px 1px 5px #333;
	text-align:center;
	line-height:0;
	width:80%;
	margin:0 0 25px 25px;
	-webkit-transform: rotate(-5deg);
	   -moz-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	     -o-transform: rotate(-5deg);
	        transform: rotate(-5deg);
}

#content_area .profile .img img{
	width:100%;
	height:inherit;
}

#content_area .profile ul{
	margin:0 15px;
	border-top:1px solid #FFF;
}


#content_area .profile ul li{
	font-size:120%;
	font-weight:bold;
	border-bottom:1px solid #FFF;
	padding:5px 0 5px 10px;
}



#content_area .text{
	padding:20px 10px 0;
	vertical-align:top;
}

#content_area .text h3{
	font-size:130%;
	font-weight:bold;
	color:#000;
	border-left:4px solid #5789a3;
	padding:0 0 0 5px;
	line-height:1.3;
	margin:0 0 10px;
}

#content_area .text p{
	font-size:120%;
	line-height:1.6;
	margin:0 0 25px;
}

	
#content_area .text .page{
	margin:50px 0;
}

#content_area .text .page ul{
	text-align:center;
	width:100%;
}

#content_area .text .page ul li{
	display:inline-block;
	margin:0 5px;
	width:40%;
}

#content_area .text .page ul li a{
	display:block;
	font-size:130%;
	text-align:center;
	color:#FFF;
	padding:6px 0 3px;
	background:#5789a3;
	border-radius:5px;
	position:relative;
}

#content_area .text .page ul li.back a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  left: 10px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #FFF;
}
#content_area .text .page ul li.back a:after{
  display: block;
  content: "";
  position: absolute;
   -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  left: 13px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #5789a3;
}

#content_area .text .page ul li.next a:before{
  display: block;
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  right: 10px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #FFF;
}
#content_area .text .page ul li.next a:after{
  display: block;
  content: "";
  position: absolute;
   -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 48%;
  right: 13px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #5789a3;
}













}