@charset "utf-8";

/* FAQ */
#precautions {
  position: relative;
  margin: 0 auto;
  padding: 0 0 100px 0;
}
#precautions .precautionWrap{
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
}
#precautions .precautionWrap .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: polygon(0 120px, 100% 0, 100% calc(100% - 120px), 0 100%);
	background: rgba(69,30,96,0.65);
}
#precautions .precautionWrap.faqlist{margin:-30px auto 0 auto;padding-top: 60px; padding-bottom: 100px;}
#precautions .precautionWrap.limitlist{margin: -80px auto 0 auto;}
#precautions .faqWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
}
#precautions .CatTtl{
	position: relative;
	margin: 0 auto;
	padding: 3px 10px;
	width: calc(100% - 45px);
	max-width: 800px;
	background-color: #23d7f3;
	text-align: center;
	font-size: 102%;
	font-weight: 700;
	color: #000000;
}
#precautions .CatTtl.marginTop{margin: 20px auto 0 auto;}
#precautions  #limitlist .CatTtl{margin: 30px auto 0 auto;}
#precautions  #limitlist .CatTtl.margin{margin: 30px auto 10px auto;}
#precautions .faqWrap dl{position: relative;}
#precautions .faqWrap dl dd{padding: 15px 0;}
#precautions #faq.faqWrap dl dd{padding: 5px 0 0 0;}
#precautions .faqWrap dl dd p, #precautions .faqWrap dl dd div{
	position: relative;
	width: calc(100% - 45px);
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: .8em;
	text-align: left;
	line-height: 1.5em;
}
#precautions .faqWrap dl dd .title{
	position: relative;
	width: calc(100% - 50px);
	margin: 5px auto 0 auto;
	text-align: left;
	font-weight: bold;
}
#precautions #cautionlist.faqWrap dl dd p, #precautions #faq.faqWrap dl dt p, #precautions #faq.faqWrap dl dd p, #precautions #limitlist dd p, #precautions .attWrap p{padding-left: 1.2em;}
#precautions #faq.faqWrap dl dt p{
	position: relative;
	color: #23d7f3;
	font-weight: 700;
	text-align: left;
	margin: 0 auto;
	width: calc(100% - 45px);
	max-width: 800px;
	line-height: 1.6em;
}
#precautions #cautionlist.faqWrap dl dd p::before, #precautions #faq.faqWrap dl dt p::before, #precautions #faq.faqWrap dl dd p::before, #precautions #limitlist dd p::before, #precautions .attWrap p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#precautions #faq.faqWrap dl dt p::before{content: 'Q.';}
#precautions #faq.faqWrap dl dd p::before{content: 'A.';}
#precautions .attWrap{margin: 0 auto 10px auto; width: calc(100% - 1.5em) !important;transform: translateX(.5em);}
#precautions .attWrap p::before{content: '※' !important;}
#precautions .attWrap p{font-size: 88% !important;padding-bottom: .2em !important;}

#precautions #limitlist .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
}
#precautions  #limitlist dl{margin: 0 auto;width: calc(100% - 20px);}


/* ----- pc ----- */
@media screen and (min-width: 641px) {

	/* FAQ */
	#precautions {
	  margin:0 auto;
	  padding: 60px 0 200px 0;
	}
	#precautions .precautionWrap{margin: 0 auto 35px auto;}
	#precautions .precautionWrap .bg{clip-path: polygon(0 150px, 100% 0, 100% calc(100% - 150px), 0 100%);}

	#precautions .CatTtl.marginTop{margin: 40px auto 0 auto;}
	#precautions  #limitlist .CatTtl{margin: 40px auto 0 auto;}
	#precautions  #limitlist .CatTtl.margin{margin: 30px auto 10px auto;}
	#precautions .attWrap p{padding-left: 0;}
	#precautions .attWrap{transform: translateX(-.3em);}
	#precautions .precautionWrap.faqlist{margin:80px auto 0 auto;padding-top: 20px; padding-bottom: 220px;}
	#precautions .precautionWrap.limitlist{margin: -150px auto 0 auto;}
	#precautions #faq.faqWrap dl dd{padding-bottom: 1em;}

}