@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　faq
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Page{
	background:#F2F3F4;	
}


/* instruction
-----------------------------------------------------------------*/
.instruction{
	padding: 40px 0 45px;	
}
.instruction .inner{
	padding: 0 100px;	
}
.instruction-box{
	display:flex;	
}
.instruction-box .txt{
	width: 54.375%;
	padding: 50px 20px 0 60px;
	background:url(../images/faq/bg_instruction.png) no-repeat left 10px;
}
.instruction-box .txt h2{
	font-weight:normal;	
	font-size:2rem;	
}
.instruction-box .pic{
	width: 45.625%;
}
.instruction-box .pic span{
	display:block;
	padding-top: 5px;
	text-align:center;
	font-size:1.6rem;	
}

/* error-case
-----------------------------------------------------------------*/
.error-case{
	padding: 0 0 20px;	
}
.error-case .inner{
	padding: 0 100px;	
}
.error-box{
	margin-bottom: 45px;
	padding: 40px 35px 10px;
	background:#FFF;	
}
.error-box h2{
	margin-bottom: 45px;
	font-weight:normal;	
	font-size:2.8rem;
	line-height:1.4;
	text-align:center;	
}

.case-list > li{
	position: relative;
	border:5px solid #D9D8D8;
	padding: 30px 20px;
	margin-bottom: 50px;	
}
.case-list > li h3{
	position: absolute;
	top:-19px;
	left:0;
	width: 100%;
	text-align:center;	
}
.case-list li h3 img{
	width: auto;
	height: 38px;	
}
.case-box{
	display:flex;	
}
.case-box .pic{
	width: 157px;
	padding-right: 17px;
	flex-shrink:0;	
}
.case-box .txt-area{
	padding-top: 10px;	
}
.case-box .txt-area.mt{
	margin-top: 20px;	
}
.case-box .txt{
	margin-bottom: 15px;
	font-size:2.2rem;
	line-height:1.4;	
}
.case-box ul li{
	margin-bottom: 5px;
	padding-left: 33px;
	background:url(../images/faq/ico_arw.jpg) no-repeat left 8px;	
	color:#867337;
	font-size:2.2rem;
	line-height:1.4;	
}

.box-safari{
  margin-top:30px;
  padding: 30px 30px;
  background: #69b7a9;
  color:#ffffff;
}
.box-safari .ttl{
  font-size: 2.8rem;
  line-height: 1.5;
  text-align: center;
}
.box-safari .ttl span{
  font-size: 70%;
}
.box-safari .lead{
  margin-top:20px;
  font-size: 1.8rem;
  line-height: 1.5;
}
.box-safari .set{
  margin-top:30px;
}
.box-safari .set .set-ttl{
  font-size: 2.2rem;
  padding-bottom:10px;
  border-bottom:1px solid #ffffff;
  line-height: 1;
}
.box-safari .set .set-txt{
  margin-top:10px;
  font-size: 1.8rem;
  line-height: 1.5;
}
.box-safari .set ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box-safari .set ul li{
  width: 48%;
  margin-top:25px;
}
.box-safari .set.set-mac ul li{
  width: 100%;
}
.box-safari .set ul li .txt{
  margin-bottom:10px;
  font-size: 1.8rem;
  line-height: 1.4;
}







/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* instruction
-----------------------------------------------------------------*/
	.instruction{
		padding: 25px 0 30px;	
	}
	.instruction .inner{
		padding: 0 15px;	
	}
	.instruction-box{
		display:block;
		text-align:center;	
	}
	.instruction-box .txt{
		width: 100%;
		padding: 0;
		background:none;
	}
	.instruction-box .txt h2{
		margin-bottom: 15px;
		font-size:1.8rem;
		line-height:1.6;	
	}
	.instruction-box .pic{
		max-width:300px;
		width: 100%;
		margin: 0 auto;
	}
	#Page .instruction-box .pic{
		max-width:300px;	
	}
	.instruction-box .pic span{
		font-size:1.3rem;	
	}

/* error-case
-----------------------------------------------------------------*/
	.error-case{
		padding: 0 0 20px;	
	}
	.error-case .inner{
		padding: 0;	
	}
	.error-box{
		margin-bottom: 30px;
		padding: 30px 15px 1px;
		background:#FFF;	
	}
	.error-box h2{
		margin-bottom: 35px;
		font-size:1.8rem;
	}
	
	.case-list > li{
		border:3px solid #D9D8D8;
		padding: 30px 20px 15px;
		margin-bottom: 40px;	
	}
	.case-list > li h3{
		top:-15px;
	}
	#Page .case-list li h3 img{
		width: auto;
		height: 30px;	
	}
	.case-box{
		display:block;	
	}
	.case-box .pic{
		width: 100%;
		padding-right: 0;
		margin-bottom: 5px;
		text-align:center;
	}
	#Page .case-box .pic img{
		max-width:120px;
	}
	.case-box .txt{
		margin-bottom: 15px;
		font-size:1.6rem;
		line-height:1.6;	
	}
	.case-box ul li{
		margin-bottom: 5px;
		padding-left: 20px;
		background:url(../images/faq/ico_arw.jpg) no-repeat left 4px;	
		background-size:15px auto;
		font-size:1.4rem;
		line-height:1.5;	
	}
  
    .box-safari{
      margin-top:10%;
      padding: 10% 5%;
    }
    .box-safari .ttl{
      font-size: 2.0rem;
      line-height: 1.4;
    }
    .box-safari .ttl span{
      font-size: 75%;
    }
    .box-safari .lead{
      margin-top:5%;
      font-size: 1.6rem;
      line-height: 1.6;
    }
    .box-safari .set{
      margin-top:15%;
    }
    .box-safari .set .set-ttl{
      font-size: 1.8rem;
      padding-bottom:7px;
    }
    .box-safari .set .set-txt{
      margin-top:10px;
      font-size: 1.4rem;
    }
    .box-safari .set ul li{
      margin-top:6%;
      width: 100%;
    }
    .box-safari .set ul li .txt{
      margin-bottom:2%;
      line-height: 1.4;
    }

}