﻿@charset "UTF-8";
/*-----------------------------------------------------	*/
/*	cs-survey				*/
/*-----------------------------------------------------	*/
/* ============================================ */
.l_cs_top {
 background: #F7F7F7;
 padding: 80px 0;
}
.l_cs_top_inner {
 width: 1000px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.l_cs_top_inner:after {
 content: "";
 display: block;
 width: 310px; /* .boxに指定したwidthと同じ幅を指定する */
 height: 0;
}
.m_cs_top {
 width: 310px;
 background: #fff;
 padding: 25px;
 text-align: left;
 box-sizing: border-box;
 margin-bottom: 35px;
 border: #ECECEC 1px solid;
}
.m_cs_top a {
 display: block;
 background: url("../images/cs-survey/cursor.svg") no-repeat 96% 96%;
}
.m_cs_top a:hover {
 opacity: 0.6;
}
.m_cs_top_name {
 display: flex;
 justify-content: space-between;
 margin-bottom: 20px;
 align-items: center;
}
.m_cs_top_name figure {
 width: 70px;
	height: 70px;
}
.cs_usericon{
	width: 69px;
	height: 69px;
	display: block;
}
.cs_usericon1{
	background: url("../images/cs-survey/ic_men_1.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon2{
	background: url("../images/cs-survey/ic_men_2.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon3{
	background: url("../images/cs-survey/ic_men_3.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon4{
	background: url("../images/cs-survey/ic_men_4.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon5{
	background: url("../images/cs-survey/ic_women_1.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon6{
	background: url("../images/cs-survey/ic_women_2.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon7{
	background: url("../images/cs-survey/ic_women_3.svg") no-repeat 0 0;
	background-size: 69px auto;
}
.cs_usericon8{
	background: url("../images/cs-survey/ic_women_4.svg") no-repeat 0 0;
	background-size: 69px auto;
}











.m_cs_top_name p {
 width: 165px;
 font-size: 26px;
 font-weight: 700;
 color: #8F8A68;
 text-align: left;
}
.m_cs_ttl{
 font-size: 16px;
 line-height: 1.8;
 margin-bottom: 15px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 制限したい行数が3の場合 */
 overflow: hidden;
}
.m_cs_txt {
 font-size: 16px;
 line-height: 1.8;
 margin-bottom: 30px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 4; /* 制限したい行数が3の場合 */
 overflow: hidden;
}
.m_cs_cat {
 background: #000;
 color: #fff;
 padding: 7px 10px 8px 10px;
 font-size: 15px;
 font-weight: 700;
 display: inline-block;
 line-height: 1;
}
.l_qa_list_cat .q-cat:after {
 width: 24%;
 content: "";
 display: block;
 height: 0;
}
.l_qa_list_cat .q-cat:before {
 width: 24%;
 content: "";
 display: block;
 height: 0;
 order: 1;
}
@media screen and (max-width: 767px) {
 .l_cs_top {
  background: #F7F7F7;
  padding: 50px 0;
 }
 .l_cs_top_inner {
  width: auto;
  margin: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 }
 .l_cs_top_inner:after {
  content: "";
  display: block;
  width: 44vw; /* .boxに指定したwidthと同じ幅を指定する */
  height: 0;
 }
 .m_cs_top {
  width: 44vw;
  background: #fff;
  padding: 4vw 4vw 3vw 4vw;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 4vw;
  border: #ECECEC 1px solid;
 }
 .m_cs_top a {
  padding-bottom: 10vw;
  display: block;
  background: url("../images/cs-survey/cursor.svg") no-repeat center 96%;
  text-align: center;
 }
 .m_cs_top a:hover {
  opacity: 1;
 }
 .m_cs_top_name {
  display: block;
  ;
  margin-bottom: 20px;
 }
 .m_cs_top_name figure {
  width: 70px;
		height: 70px;
  margin: 0 auto;
  margin-bottom: 15px;
 }
 .m_cs_top_name p {
  width: auto;
  text-align: center;
  font-size: 5vw;
  font-weight: 700;
  color: #8F8A68;
 }
	.m_cs_ttl{
 font-size: 16px;
 line-height: 1.8;
 margin-bottom: 15px;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 制限したい行数が3の場合 */
 overflow: hidden;
}
 .m_cs_txt {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 制限したい行数が3の場合 */
  overflow: hidden;
 }
 .m_cs_cat {
  background: #000;
  color: #fff;
  padding: 7px 10px 8px 10px;
  font-size: 10px;
  font-weight: 700;
  display: inline-block;
  line-height: 1;
 }
}
/*詳細*/
.l_cs_detail {
 background: #f5f5f5;
 padding: 80px 0;
}
.l_cs_detail_inner {
 width: 1000px;
 margin: 0 auto;
}
.m_cs_detail {
 background: #fff;
 padding: 25px;
 text-align: left;
 box-sizing: border-box;
 border: #ECECEC 1px solid;
}
.m_cs_detail .m_cs_cat {
 margin-bottom: 25px;
}
.m_cs_detail_name {
 display: flex;
 justify-content: center;
 margin-bottom: 20px;
 align-items: center;
}
.m_cs_detail_name figure {
 width: 70px;
 margin-right: 25px;
}
.m_cs_detail_name p {
 font-size: 26px;
 font-weight: 700;
 color: #8F8A68;
 text-align: left;
}
.m_cs_detail .m_cs_txt {
 margin-bottom: 0px;
}
.l_qa_list_cat {
  margin-bottom: 0px;
}
	.link_detail_outer{padding: 50px 0 0 0;}
@media screen and (max-width: 767px) {
 .l_cs_detail {
  background: #f5f5f5;
  padding: 50px 0;
 }
 .l_cs_detail_inner {
  width: auto;
  margin: 0 20px;
 }
 .m_cs_detail {
  background: #fff;
  padding: 25px;
  text-align: center;
  box-sizing: border-box;
  border: #ECECEC 1px solid;
 }
 .m_cs_detail .m_cs_cat {
		font-size: 15px;
  margin: 0 auto 20px auto;
 }
 .m_cs_detail_name {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  align-items: center;
 }
 .m_cs_detail_name figure {
  width: 70px;
  margin-right: 25px;
 }
 .m_cs_detail_name p {
  font-size: 26px;
  font-weight: 700;
  color: #8F8A68;
  text-align: left;
 }
 .m_cs_detail .m_cs_txt {
  margin-bottom: 0px;
 }
	.l_qa_list_cat {
		margin-bottom: 0;
	}
	.link_detail_outer{padding: 0 20px;
	margin-bottom: 5vw}
}
.pagenavi {
 overflow: hidden;
}
.pagenavi a {
 padding: 50px 0;
 width: 100px;
 display: block;
 text-align: center;
 font-size: 18px;
}
.pagenavi a:hover {
 background: #f5f5f5;
}
.pagenavi a.fa-chevron-right {
 float: right;
}
.pagenavi a.fa-chevron-left {
 float: left;
}
.fa-chevron-left::before {
 padding-right: 10px;
}
.fa-chevron-right::before {
 content: "";
}
.fa-chevron-right::after {
 content: "\f054";
 padding-left: 10px;
}
.fa-chevron-right::before {
 content: none !important;
}
@media screen and (max-width: 767px) {
 .pagenavi a {
  padding: 10vw 0;
  width: 30vw;
  display: block;
  text-align: center;
  font-size: 4vw;
 }
}

.cattit {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .cattit {
    text-align: center;
    font-size: 6vw;
    font-weight: bold;
    margin-bottom: 9vw;
  }
}



.wp-pagenavi {
  clear: both;
  text-align: center;
	padding: 50px 0;
}


.wp-pagenavi a, .wp-pagenavi span {
  color: #777;
  background-color: #fff;
  border-color: #fff;
  font-weight: bold;
}

.wp-pagenavi span.current {
	color: #fff;
  background-color: #1C181A;
  border: 1px solid #1C181A;
  padding: 8px 15px;
  margin: 0 2px;
  white-space: nowrap;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
	.wp-pagenavi {
		margin-bottom: 70px;
}

}

