@charset "UTF-8";

ul,ol { list-style: none; }

* { margin:0; padding:0; border:0; }

html {
	margin:0;
	padding:0;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;}

body{
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin:0px;
	padding:0px;
	font-size:16px;	
	line-height:1;
	text-align:left;
	
}

a{
	color:#000;
	text-decoration: none;
}

a img {
	border:none;
}

.clearboth { padding: 0; clear:both; }

.float-left{float:left;}
.float-right{float:right;}

.t12{font-size: 12px;}
/*==========================================================*/

#blue-line{
	height: 10px;
	width:100%;
	background-color: #2866D2;
}

#header{
	max-width:1300px;
	margin: 0 auto;
}

#header-left{
	float: left;
}

#header-left img{
	width:92vw;
	max-width:760px;
	min-width:300px;
	padding: 16px;
}

#header-right{
	float: right;
	margin: 0 16px 0 0;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #2866D2;
	text-align: center;
	padding: 4px 10px;
	white-space: nowrap;
}

.resize{

	}
	
@media only screen and (max-width: 640px){
	#header-right{
	font-size: 9px;
	}
	.resize{
	width: 100%;
	}
}

.cont-width{
	width:90vw;
	max-width:1200px;
	margin: 0 auto;
}

/* top ================*/

#photo0123 {
	text-align: center;
	width:100%;
	max-width: 760px;
	margin: 0 auto;
}


/* evaluation ================*/

#evaluation {
	line-height: 1.6;
}

#evaluation h2{
	font-size: 40px;
	font-weight: normal;
	line-height: 1.2;
	margin-bottom: 20px;
}

#evaluation h3{
	display: inline-block;
	font-weight: normal;
	background-color: #4B4B4B;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	margin:20px 0 4px 0;
	padding: 0px 10px;
	line-height: 1.6;
}

#evaluation .eva-left p{
	margin: 10px;
	line-height: 1;
}

#evaluation .eva-left{
	margin: 60px 10px;
	padding: 30px;
	border-radius: 20px;
}

#evaluation .c1{color: #AE181A;}
#evaluation .l1 h3{background-color: #AE181A;}
#evaluation .l1{background-color: #FEE1E2;}
#evaluation .c2{color: #DE920D;}
#evaluation .l2 h3{background-color: #DE920D;}
#evaluation .l2{background-color:  #F9F0E0;}
#evaluation .c3{color: #B5BA06;}
#evaluation .l3 h3{background-color: #B5BA06;}
#evaluation .l3{background-color:  #F6FCD5;}
#evaluation .c4{color: #69AC00;}
#evaluation .l4 h3{background-color: #69AC00;}
#evaluation .l4{background-color:  #EAF7D5;}


@media only screen and (min-width: 700px){
	.sp-n{display: none;}
	#evaluation .eva-right{
	float: right;
	width: 400px;
	margin-left: 30px;
	}
}

#evaluation .eva-right{
	margin: 0 auto;
}

#evaluation .eva-right .pict{
	float: left;
	width:190px;
	height:170px;
	font-size: 10px;
	line-height: 1.2;
	padding-left: 10px;
	padding-bottom: 10px;
}

#evaluation .eva-right .pict img{
	width:190px;
 }
 
@media only screen and (max-width: 550px){
	#evaluation .eva-right .pict{
	width:90%;
	height:auto;
	}
	#evaluation .eva-right .pict img{
	width:90%;
 }
}



/* voice ================*/

#voice .title, #evaluation .title{
	font-size: 24px;
	border-bottom: 1px solid #2866D2;
	padding: 10px;
	margin: 16px 0 30px 0;
}

#voice .link-box{
	border: 1px solid #B1C2ED;
	width:90%;
	margin: 0px auto 30px auto;
	line-height: 0;
	text-align: center;
	background-color: #D7E1F6;
	overflow: hidden;
}

#voice .link-box:hover{
	filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
	transition: opacity 0.8s;
}

@media only screen and (max-width: 640px){
	#voice .link-box{
	max-width: 400px;
	}
}

#voice .link-box .left{
	padding: 20px;
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}



@media only screen and (min-width: 770px){
	#voice .link-box .left{
	float: left;
	width : -webkit-calc(100% - 450px) ;
	width : calc(100% - 450px);
	}
	#voice .link-box img{
	float: left;
	}
}

#voice .link-box h2{
	font-size: 24px;
	margin-bottom: 10px;
	font-weight: normal;
}

/*footer ================*/

#footer{
	height: 212px;
	background-image: url(image/bg01.png);
	background-repeat: no-repeat;
	background-position: calc(70% + 22vw) 0px;
}

#footer-link{
	font-size: 12px;
	padding-top: 20px;
	line-height: 1.6;
}

@media only screen and (max-width: 770px){
#footer a{
	background: #fff;
	background: rgba(255,255,255,0.6);
}
}

#footer a:hover{
	background: #fff;
	background: rgba(255,255,255,0.9);
	transition: background-color 0.8s;
}

/* voice-meeting ================*/

#voice-meeting h1{
	font-size: 24px;
	padding: 10px;
	margin: 16px 0 10px 0;
	font-weight: normal;
	line-height: 1.6;
}

#voice-meeting .what{
	margin: 0px auto 130px auto;
	text-align: center;
	background-color: #2866D2;
	border-radius: 20px;
	padding: 20px;
}

@media only screen and (max-width: 640px){
	#voice-meeting .what{
	max-width: 400px;
	}
}

#voice-meeting #text{
	text-align: left;
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
}
	
@media only screen and (min-width: 770px){
	#voice-meeting #text{
	float: left;
	width : -webkit-calc(100% - 410px) ;
	width : calc(100% - 410px);
	}
	#voice-meeting .what img{
	float: right;
	}
}

#voice-meeting h2{
	font-size: 24px;
	font-weight: normal;
}

#voice-meeting .comment{
	background-color: #E0EECB;
	border-radius: 30px;
	color: #152803;
	line-height: 1.8;
	font-size: 16px;
	margin: 30px 10px 100px 20px;
	padding-bottom: 30px;
}

#voice-meeting .comment img{
	margin: -22px 0 0 -15px;
}

#voice-meeting .comment-inner{
	margin: -100px 70px 0px 70px;
}

@media only screen and (max-width: 770px){
	#voice-meeting .comment-inner{
	margin: -100px 20px 0px 30px;
	}
}

#voice-meeting p{
	margin-bottom: 16px;
}


/* voice-succeed ================*/

#voice-succeed h1{
	font-size: 24px;
	padding: 10px;
	margin: 16px 0 20px 0;
	font-weight: normal;
}

#voice-succeed #sidebar{
	float: right;
	width: 170px;
	line-height: 1.6;
	border: 1px solid #999;
	background-color: #eee;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	padding-bottom: 10px;
	margin-top: 30px;
}

#voice-succeed #sidebar img{
	margin: -40px 0 10px 0;
}

#voice-succeed .comment{
	background-color: #CDFFFF;
	border-radius: 30px;
	color: #152803;
	line-height: 1.8;
	font-size: 16px;
	margin: 60px 0 100px 0px;
	padding-bottom: 30px;
}

#voice-succeed .comment img{
	margin: -42px 0 0 -15px;
}

#voice-succeed .comment-inner{
	margin: -30px 40px 0px 40px;
}

@media only screen and (max-width: 870px){
	#voice-succeed .comment-inner{
	margin: -30px 10px 0px 10px;
	}
}

#voice-succeed .comment-inner img{
	float:right;
	margin: 20px 0 20px 20px;
}

#voice-succeed .name-e{
	font-size: 12px;
}

#voice-succeed .name{
	font-size: 24px;
	margin-bottom: 20px;
}

#voice-succeed h2{
	display: inline-block;
	font-weight: normal;
	background-color: #01a1c7;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	margin:20px 0 4px 0;
	padding: 0px 10px;
	line-height: 1.6;
}

#voice-succeed #left{
	float: right;
	width: calc(100% - 200px);
	margin-right: 20px;
}

@media only screen and (max-width: 770px){
	#voice-succeed #sidebar-wrap{
	display: contents;
	}
	#voice-succeed #sidebar{
	float: none;
	margin-top: 60px;
	width:100%;
	}
	#voice-succeed #left{
	float: none;
	width: 100%;
	}
}

#voice-succeed p{
	margin: 10px 0;
}