@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  PC用
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	#page_title{
		background: url(../images/support/support_h1_bg.png) no-repeat center;
		background-size: cover;
	}

/* ----------------------------------------
	support_contents
---------------------------------------- */

	#support_contents{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		width:100%;	
	}	
	
	#support_contents li{
		width: 48%;
		margin-bottom: 60px;
		position: relative;
		box-sizing: border-box;
		background: rgb(255,255,255);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
		border: #cccccc 1px solid;
		border-radius: 5px;
	}

	#support_contents li a{
		display: block;
		height: 100%;
		padding: 20px;

	}

	#support_contents li:hover{
		background: #eaeaea;
		border-radius: 5px;
	}
	#support_contents li a::after{
		content: "";
		position: absolute;
		top: 30px;
		right: 25px;
		display: block;
		width: 9px;
		height: 9px;
		margin: auto;
		border-top: #000000 3px solid;
		border-right: #000000 3px solid;
		transform: rotate(45deg);
}
	
	#support_contents li a h2{
		font-size: 125%;
		text-align: center;
		border-bottom: #e83928 4px solid;
		padding: 0 0 10px;
		margin-bottom: 20px;
		position: relative;
	}
	
	#support_contents li a h2::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #e83928;
}


/* ----------------------------------------
	トラブルにあわないために
---------------------------------------- */
	#trouble li{
		margin-bottom: 60px;
	}
	
	#trouble li h2{
		font-size: 125%;
		border-bottom: #e83928 4px solid;
		padding: 0 0 10px;
		margin-bottom: 20px;
		position: relative;
	}
	
	#trouble li h2::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #e83928;
	}

	#trouble li h3{
		font-size: 112%;
		margin-bottom: 20px;
	}
	
	
	#trouble li > p{
		margin-bottom: 10px;
	}
	
	
	.info{
		border: solid 1px #ccc;
		padding: 20px;
		margin-top: 40px;
		text-align: center;
	}
	.info_title{
		font-weight: bold;
		font-size: 125%;
	}
	
	.info_tel{
		position: relative;
		
	}
	.info_tel span{
		font-size: 150%;
		font-weight: bold;
		padding-left: 35px;
	}
	
	.info_tel::before{
		content: "";
		display: inline-block;
		background: url(../images/support/icon_tel.png);
		background-size:contain;
		width:30px;
		height: 30px;
		position: absolute;
		top: 50%;
		margin-top: -18px;
		

	}
	
	.info_text{
		font-size: 87%;
	}
	
	
	
/* ----------------------------------------
	よくある質問
---------------------------------------- */
	.q_and_a{
		margin-bottom: 90px;
	}
	
	.q_and_a dt{
		border-bottom: 1px dotted #c0c0c0;
		position: relative;
		padding: 10px 20px;
	}
	.q_and_a dt:hover {
		cursor: pointer;
		color: #c00;
		transition: .8s;
	}
	.q_and_a dt.active {
		color: #c00;
	}
	
	.q_and_a dt::before{
		content: "Q";
		position: absolute;
		left: 0;
		font-family: 'Century Gothic';
		color: #333;
	}
	
	.q_and_a dt::after{
		content:"";
		position: absolute;
		right: 20px;
		top: 18px;
		width: 12px;
		height: 10px;
		background:url(../images/support/listarrow_sp_off.png) no-repeat;
		background-size: 12px auto;
		color: #333;
	
	}
	.q_and_a dt.active::after{
		content:"";
		background:url(../images/support/listarrow_sp_on.png) no-repeat;
		background-size: 12px auto;
		width: 12px;
		height: 10px;
		right: 20px;
		top: 18px;
		position: absolute;
	}
	.q_and_a dd{
		padding: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
		display: none;
		background: #fafafa;
	}
	.q_and_a dd a {color: #c00;}
	.q_and_a dd a.tel_link {
		pointer-events: none;
	}
}/* End PC */



/*--------------------------------------------------
**************************************************
  SP用
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	#page_title{
		background: url(../images/support/support_h1_bg.png) no-repeat 70%;
		background-size: cover;
		

	}	

/* ----------------------------------------
	support_contents
---------------------------------------- */

	#support_contents{
		width:96%;
		margin: 0 auto;
	}	
	
	#support_contents li{
		margin-bottom: 20px;
		position: relative;
		box-sizing: border-box;
		background: rgb(255,255,255);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
		border: #cccccc 1px solid;
		border-radius: 5px;
	}

	#support_contents li a{
		padding: 10px;
		display: block;
		height: 100%;

	}


	
	#support_contents li a::after{
		content: "";
		position: absolute;
		top: 20px;
		right: 25px;
		display: block;
		width: 9px;
		height: 9px;
		margin: auto;
		border-top: #000000 3px solid;
		border-right: #000000 3px solid;
		transform: rotate(45deg);
}
	#support_contents li a p{
		font-size: 87%;
		}
	#support_contents li a h2{
		font-size: 115%;
		text-align: center;
		border-bottom: #e83928 4px solid;
		padding: 0 0 10px;
		margin-bottom: 20px;
		position: relative;
	}
	
	#support_contents li a h2::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #e83928;
}

	#support_contents li:nth-child(4) a::after{
		top: 40px;
	}
	
	/* ----------------------------------------
	トラブルにあわないために
---------------------------------------- */
	#trouble li{
		margin-bottom: 60px;
	}
	
	#trouble li h2{
		font-size: 125%;
		border-bottom: #e83928 4px solid;
		padding: 0 0 10px;
		margin-bottom: 20px;
		position: relative;
	}
	
	#trouble li h2::after {
		content: "";
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #e83928;
	}

	#trouble li h3{
		font-size: 112%;
		margin-bottom: 20px;
	}
	
	
	#trouble li > p{
		margin-bottom: 10px;
	}
	
	
	.info{
		border: solid 1px #ccc;
		padding: 20px;
		margin-top: 40px;
		text-align: center;
	}
	.info_title{
		font-weight: bold;
		font-size: 125%;
	}
	
	.info_tel{
		position: relative;
		
	}
	.info_tel span{
		font-size: 150%;
		font-weight: bold;
		padding-left: 35px;
	}
	
	.info_tel::before{
		content: "";
		display: inline-block;
		background: url(../images/support/icon_tel.png);
		background-size:contain;
		width:30px;
		height: 30px;
		position: absolute;
		top: 50%;
		margin-top: -18px;
		

	}
	
	.info_text{
		font-size: 87%;
	}
/* ----------------------------------------
	よくある質問
---------------------------------------- */
	.q_and_a{
		margin-bottom: 90px;
	}
	
	.q_and_a dt{
		border-bottom: 1px dotted #c0c0c0;
		position: relative;
		padding: 10px 40px 10px 20px;
	}
	.q_and_a dt.active {
		color: #c00;
	}
	
	.q_and_a dt::before{
		content: "Q";
		position: absolute;
		left: 0;
		font-family: 'Century Gothic';
		color: #333;
	}
	
	.q_and_a dt::after{
		content:"";
		position: absolute;
		right: 20px;
		top: 18px;
		width: 12px;
		height: 10px;
		background:url(../images/support/listarrow_sp_off.png) no-repeat;
		background-size: 12px auto;
		color: #333;
	
	}
	.q_and_a dt.active::after{
		content:"";
		background:url(../images/support/listarrow_sp_on.png) no-repeat;
		background-size: 12px auto;
		width: 12px;
		height: 10px;
		right: 20px;
		top: 18px;
		position: absolute;
	}
	.q_and_a dd{
		padding: 20px;
		margin-top: 10px;
		margin-bottom: 20px;
		display: none;
		background: #fafafa;
	}
	.q_and_a dd a{
		color: #c00;
		text-decoration: underline;
	}



}/* End SP */