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

/* pageTitle
------------------------------------------------------ */
.pageTitle{
	width: 80%;
	margin: 40px auto;
}
.pageTitle h1{
	color: #B6DC1F;
	text-align: center;
}
.pageTitle:before{
	content: '';
	display: block;
	background: url(images/ttl-line-top.png) no-repeat;
	background-size: contain;
	background-position: center;
	width: 100%;
	height: 20px;
}
.pageTitle:after{
	content: '';
	display: block;
	background: url(images/ttl-line-bottom.png) no-repeat;
	background-size: contain;
	background-position: center;
	width: 100%;
	height: 20px;
}
.kpi-overview-ttl{
	background: url(images/kpi-ttl.svg) no-repeat;
	background-size: contain;
	width: 60%;
	height: 30px;
	color: #fff;
	text-align: center;
	position: absolute;
	margin: auto;
	right: 0;
	left: 0;
	top: -10px;
	line-height: 30px;
	background-position: center;
	
}
.kpi-overview-content{
	background: #E6EDFF;
	border: 1px solid #003C96;
	text-align: center;
	padding: 20px 10px 10px;
}
.kpi-overview {
  position: relative;
	width: 70%;
	margin: 30px auto;
}
.kpi-txt{
	text-align: center;
	margin: 30px auto;
}
.kpi-overview figure{
	width: 8%;
	position: absolute;
	right: 30px;
	bottom: 20px;
}


/*SP Layout
===================================*/
@media screen and (max-width: 768px) {
	.pageTitle{
		width: 90%;
		font-size: 1.2rem;
	}
	.kpi-overview{
		width: 90%;
	}
	.kpi-overview-ttl{
		width: 90%;
		font-size: 1.4rem;
	}
	.kpi-overview figure{
		display: none;
	}
	.kpi-txt{
		text-align: left;
		font-size: 1.4rem;
	}
}
/*PC Layout
===================================*/
@media screen and (min-width: 769px) {
}

/* policy
------------------------------------------------------ */
.policy h3{
	font-size: 2rem;
	font-weight: bold;
	margin-top: 30px;
}
.policy h3:before{
	content: '';
	background: url(images/policy-icon.svg) no-repeat;
	display: inline-block;
	background-size: contain;
	width: 36px;
	height: 38px;
	padding-bottom: 10px;
	vertical-align: middle;
	margin-bottom: 4px;
}
.policy01-ttl{
	border-bottom: 2px solid #B6DC1F;
}
.policy02-ttl{
	border-bottom: 2px solid #14AB94;
}
.policy03-ttl{
	border-bottom: 2px solid #F43F37;
}
.policy01-list li:before{
	content: '';
	background: url(images/policy01.svg) no-repeat;
	display: inline-block;
	background-size: contain;
	width: 18px;
	height: 18px;
	padding-bottom: 10px;
	vertical-align: middle;
	margin-right: 4px;
}
.policy02-list li:before{
	content: '';
	background: url(images/policy02.svg) no-repeat;
	display: inline-block;
	background-size: contain;
	width: 18px;
	height: 18px;
	padding-bottom: 10px;
	vertical-align: middle;
	margin-right: 4px;
}
.policy03-list li:before{
	content: '';
	background: url(images/policy03.svg) no-repeat;
	display: inline-block;
	background-size: contain;
	width: 18px;
	height: 18px;
	padding-bottom: 10px;
	vertical-align: middle;
	margin-right: 4px;
}
.policy01-list,.policy02-list,.policy03-list{
	margin: 10px 0;
}
.policy ul li span{
	color: #F43F37;
}
.nps-overview{
	margin-left: 1rem;
	margin-top: 10px;
}
.point-overview{
	margin-left: 1rem;
	color: #F43F37;
}
.check-list{
	font-size:1.8rem;
	margin-top: 40px;
	margin-bottom: 30px;
}
.check-list li:before,p.checklist-item:before{
	content: '';
	background: url(images/checkbox.svg) no-repeat;
	display: inline-block;
	background-size: contain;
	width: 20px;
	height: 20px;
	padding-bottom: 10px;
	vertical-align: middle;
}
.check-list li {
  padding-left: 8em;
  text-indent: -8.1em;
}
p.enquete-txt{
	padding: 10px 20px!important;
	margin: 0!important;
}

/*SP Layout
===================================*/
@media screen and (max-width: 768px) {
	.policy h3{
		font-size: 1.6rem;
	}
	.policy h3:before{
		width: 24px;
		height: 26px;
	}
	.policy ul li{
		padding-left: 1em;
    text-indent: -1.4em;
		font-size: 1.4rem;
	}
	.policy01-list li:before,.policy02-list li:before,.policy03-list li:before{
		margin-right: 2px;
	}
.check-list li {
  padding-left: 8.5em;
  text-indent: -8.5em;
}
	.nps-overview,.check-list,.point-overview{
		font-size: 1.4rem;
	}
}
/*PC Layout
===================================*/
@media screen and (min-width: 769px) {
}

/* graph
------------------------------------------------------ */
.graph h3{
	font-size: 2rem;
}
.graph h3 span{
	font-size: 3rem;
	color: #003C96;
	margin-right: 6px;
}
.graph h3{
	background:url(images/wavy.svg) bottom repeat-x;
  background-size: 50px 40px;
	padding-bottom: 20px;
	display: inline-block;
}


.blue01{
	color: #003C96;
}
.blue02{
	color: #9DC3E5;
}
.blue03{
	color: #C4D7EF;
}
.blue04{
	color: #2A75C3;
}
.blue05{
	color: #666666;
}
.score-img {
  margin-top: 20px;
	max-width: 300px;
}
/*SP Layout
===================================*/
@media screen and (max-width: 768px) {
	.graph h3{
		font-size: 1.6rem;
		padding-left: 1em;
    text-indent: -1.4em;
		margin-top: 20px;
		padding-bottom: 30px;
	}
	figure.graph-img {
    width: 40%;
    margin: 20px auto;
}
	ul.graph-answer,.graph p{
    width: 80%;
    margin: 10px auto 0;
}
	.osusume01{
		border:solid 1px black;
		width:60%;
		margin:auto;
	}
	.osusume02{
		display:flex;
		justify-content:space-around;
	}
	.osusume02 p{
		margin:0;
		text-align:center;
	}
	.osusume01 ul{
		display:flex;
		justify-content:space-around;
	}
}
/*PC Layout
===================================*/
@media screen and (min-width: 769px) {
	.graph-wrap{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40px 0;
		width: 100%;
	}
	.graph-img{
		width: 20%;
		margin-right: 60px;
	}
	.osusume01{
		border:solid 1px black;
		width:70%;
	}
	.osusume02{
		display:flex;
		justify-content:space-around;
	}
	.osusume02 p{
		margin-top:0;
	}
	.osusume01 ul{
		display:flex;
		justify-content:space-around;
	}
	.graph-answer{
		width: 60%;
	}
.score-img {
	width: 80%;
}}

/* voice
------------------------------------------------------ */
.voice h3{
	color: #003C96;
	font-size: 2rem;
	margin-bottom: 20px;
}
.voice h4{
	font-size: 1.8rem;
	color: #173E62;
	border-bottom: 3px solid #173E62;
	display: inline-block;
}
tr.table-head {
    background: #003C96;
    color: #fff;
}
td{
	border: 1px solid #333;
}
td.evaluation {
    width: 15%;
    text-align: center;
}
td.episode-ttl {
    width: 70%;
    text-align: center;
}
td.episode {
    padding: 2px 10px;
}
table{
	margin: 10px 0 30px;
	width: 100%;
}

.p-head{
	text-align:center;
	background: #003C96;
  color: #fff;
	padding:10px 0 10px 0;
}

.voice p{
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
	padding:10px 0 10px 0;
	margin:2px 0;
}

.message{
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 40px;
}


/*SP Layout
===================================*/
@media screen and (max-width: 768px) {
	.message{
		font-size: 1.4rem;
	}
	table{
		font-size: 1.4rem;
	}
	.voice h3{
		font-size: 1.8rem;
		margin-top: 20px;
	}
}
/*PC Layout
===================================*/
@media screen and (min-width: 769px) {

}


/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
	.kpi-overview figure{
		width: 8%;
	}
	
}

/* for IE 11 */
  @media all and (-ms-high-contrast:none) {
	.kpi-overview figure{
		width: 8%;
	}

  }

/* for IE 10 */
  @media all and (-ms-high-contrast:none){
    .selector {
      some-syntax: some-property; 
    }

  }