@charset "utf-8";

/*　751px以上の対応
////////////////////////////////////////////////////*/
@media screen and (min-width:751px) {
	#faq #wrap{
		width: 980px;
		margin: 0 auto;
		letter-spacing: 0.06em;
	}

	
	/* 各セクション共通ヘッダーの対応（三角グレーと見出し） */
	.sections {
		position: relative;
		padding-top: 80px;
		margin-bottom: 80px;
	}
	.sections:before{
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 160px 190px 0 0;
		border-color: #fafafa transparent transparent transparent;
		z-index: -1;
	}
	.sections h2{
		font-size: 16px;
		font-size: 1.6rem;
		margin-bottom: 30px;
		font-weight: bold;
		padding-left: 50px;
		line-height: 1.5;
	}
	.sections .sections-ttl-lead{
		margin-bottom: 30px;
		padding-left: 50px;
	}


	/** ページタイトルの対応 **/
	#faq .page_info{
		margin-top: 80px;
		margin-bottom: 70px;
	}
	#faq .page_ttl p{
		margin-bottom: 15px;
		text-align: center;
		line-height: 1.0;
		width: 49px;
		margin: 0 auto 5px;
	}
	#faq .page_info h1{
		font-size: 16px;
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 50px;
	}
	#faq .page_info .page_lead{
		font-size: 15px;
		font-size: 1.5rem;
		text-align: center;
		line-height: 2;
		margin: 0 auto;
	}

	.qa_area-wrap {
		margin-bottom: 80px;
	}
	.qa_area {
		margin: 0 auto;
		position: relative;
	}
	.qa_area .section--ttl {
		text-align: center;
		margin-bottom: 50px;
	}
	.qa_area .section--ttl span {
		font-size: 16px;
		font-weight: bold;
		position: relative;
	}
	.qa_area .section--ttl span:before {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -10px;
		display: inline-block;
		width: 40px;
		height: 2px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #ffd426;
		border-radius: 2px;
	}


	/*//////////       qa_area       //////////*/
	.tab-list {
		list-style-type: none;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	.tab-list li{
		box-sizing: border-box;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	.tab-list li + li{
		border-left: 1px solid #eee;
	}
	.tab-list-item {
		text-align: center;
		width: 25%;
		background-color: #fff;
		padding: 22px 0 18px;
		font-size: 14px;
		font-weight: 600;
	}
	.tab-list-item:first-child{
		border-radius: 10px 0 0 0;
		border-left: 1px solid #eee;
	}
	.tab-list-item:last-child{
		border-radius: 0 10px 0 0;
		border-right: 1px solid #eee;
	}
	.tab-list-item:hover{
		cursor: pointer;
		text-decoration: underline;
	}
	.tab-list .tab-list-item.active {
		background-color: #000;
		color: #fff;
		text-decoration: none;
		cursor: default;
	}
	.tab-contents-item {
		display: none;
	}
	.tab-contents-item.show {
		display: block;
	}
	.qa_area .qa{
		width: 100%;
		margin-bottom: 20px;
	}
	.qa ul{
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		border-left: 1px solid #eee;
		box-sizing: border-box;
		padding: 30px;
		background: #fff;
		border-radius:0 0 10px 10px;
	}
	.qa ul li dl {
		font-size: 14px;
	}
	.qa ul li dl dt{
		position: relative;
		padding: 15px 60px 15px 60px;
		display: block;
		background: #F4F4F4;
		line-height: 1.6;
	}
	.qa ul li dl dt::before{
		position: absolute;
		content: "";
		background: url("../../support/faq/img/icon-q.png") no-repeat;
		width: 30px;
		height: 30px;
		left: 20px;
		top: 11px;
	}
	.qa ul li dl dd{
		position: relative;
		padding: 15px 60px 15px 60px;
		line-height: 1.6;
	}
	.qa ul li dl dd::before{
		position: absolute;
		content: "";
		background: url("../../support/faq/img/icon-a.png") no-repeat;
		width: 30px;
		height: 30px;
		left: 20px;
		top: 11px;
	}
	.qa ul li dl dd a{
		text-decoration: underline !important;
		color: #EA0029;
		display: inline;
	}
	.qa ul li dl dd a:hover{
		text-decoration: none !important;
	}
	.qa ul li dl dd.dd-btm-space{
		margin-bottom: 8px;
	}


	
}





/*////////////////////////////////////////////////////////////////////////////

　750px以下の対応

////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:750px) {
	#faq #wrap{
		letter-spacing: 0.06em;
	}


	/* 各セクション共通ヘッダーの対応（三角グレーと見出し） */
	.sections {
		position: relative;
		padding-top: 8%;
		margin-bottom: 80px;
	}
	.sections:before{
		position: absolute;
		top: 0;
		left: -2.5%;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 80px 100px 0 0;
		border-color: #fafafa transparent transparent transparent;
		z-index: -1;
	}
	.sections h2{
		font-size: 16px;
		font-size: 1.6rem;
		margin-bottom: 20px;
		font-weight: bold;
		line-height: 1.6;
	}
	.sections .sections-ttl-lead{
		margin-bottom: 30px;
	}

	
	/** ページタイトルの対応 **/
	#faq .page_info{
		margin-top: 50px;
   		margin-bottom: 30px;
	}
	#faq .page_ttl p{
		margin-bottom: 15px;
		text-align: center;
		line-height: 1.0;
		width: 42px;
		margin: 0 auto;
	}
	#faq .page_info h1{
		font-size: 16px;
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 20px;
	}
	#faq .page_info .page_lead{
		font-size: 14px;
		font-size: 1.4rem;
		text-align: center;
		line-height: 1.8;
	}

	/*//////////       qa_area       //////////*/
	#newContentWrap #path {
		display: flex;
		margin-bottom: 30px;
	}
	.qa_area-wrap {
		margin-bottom: 10%;
	}
	.qa_area {
		margin: 0 auto;
		position: relative;
	}
	.qa_area .section--ttl {
		text-align: center;
		margin-bottom: 5%;
	}
	.qa_area .section--ttl span {
		font-size: 16px;
		font-weight: bold;
		position: relative;
	}
	.qa_area .section--ttl span:before {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -10px;
		display: inline-block;
		width: 40px;
		height: 2px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #ffd426;
		border-radius: 2px;
	}


	.tab-list {
		list-style-type: none;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto 6%;
		border: 1px solid #eee;
		border-radius: 10px;
	}
	.tab-list li{
		box-sizing: border-box;
	}
	.tab-list-item {
		text-align: center;
		width: 50%;
		background-color: #fff;
		padding: 6% 0 5%;
		margin: 0 auto;
		font-size: 14px;
		font-weight: 600;
	}
	.tab-list-item:nth-child(1){
		border-radius: 10px 0 0 0;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	.tab-list-item:nth-child(2){
		border-radius: 0 10px 0 0;
		border-bottom: 1px solid #eee;
	}
	.tab-list-item:nth-child(3){
		border-radius: 0 0 0 10px;
		border-right: 1px solid #eee;
	}
	.tab-list-item:nth-child(4){
		border-radius: 0 0 10px 0;
	}
	.tab-list-item:hover{
		cursor: pointer;
		text-decoration: underline;
	}
	.tab-list .tab-list-item.active {
		background-color: #000;
		color: #fff;
		text-decoration: none;
		cursor: default;
	}
	.tab-contents-item {
		display: none;
	}
	.tab-contents-item.show {
		display: block;
	}
	.qa ul{
		border: 1px solid #eee;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 10px;
	}
	.qa .list dl {
		font-size: 14px;
	}
	.qa ul li dl dt{
		position: relative;
		padding: 5% 3% 5% 10%;
		display: block;
		background: #F4F4F4;
		font-size: 14px;
	}
	.qa ul li dl dt::before{
		position: absolute;
		content: "";
		background: url("../../support/faq/img/sp/icon-q.png") no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
		left: 2%;
		top:18px;
	}
	.qa ul li dl dd{
		position: relative;
		padding: 5% 3% 5% 10%;
		font-size: 14px;
	}
	.qa ul li dl dd::before{
		position: absolute;
		content: "";
		background: url("../../support/faq/img/sp/icon-a.png") no-repeat;
		background-size: contain;
		width: 20px;
		height: 20px;
		left: 2%;
		top: 18px;
	}
	.qa ul li dl dd a{
		text-decoration: underline !important;
		color: #EA0029;
		display: inline;
	}
	.qa ul li dl dd.dd-btm-space{
		margin-bottom: 2%;
	}
	
}