@charset "utf-8";
.pagetitle { width: 100%; height: 500px; background-image: url("../../img/top_title_img.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top center; overflow: hidden;}
h1 {font-size: 60px; text-align: center; font-family: var(--mintyo); font-weight: var(--font7); line-height: 80px; margin: 70px 0 0;}
.pagetitle_img { width: 100%; text-align: center; margin: -290px 0 0;}
.pagetitle2 { font-size: 45px; font-family: var(--mintyo); color: var(--colorOr); font-weight: var(--font6); line-height: 120%; text-align: center; padding: 45px 0 40px; font-feature-settings: "palt";}


.q_a_container { display: flex;  flex-wrap: wrap;}
.q_a_img { width: 300px;}

/*QandA本体*/
.q_a_area { width: 760px; margin-left: 40px;}
.q_a_area dl { display: flex; flex-wrap: wrap; padding: 15px 20px; border-radius: 15px; margin-bottom: 20px; }
.q_a_area dl:last-child { margin-bottom: 0;}
.q_a_area dl:nth-child(odd) { background: var(--backcolorOr);}
.q_a_area dl:nth-child(even) { background: var(--backcolorBl);}
.q_a_area dt { width: 100%; font-size: 24px; font-weight: var(--font7); line-height: 25px;  text-indent: -44px; margin-left: 44px;}
.q_a_area dt::before { background: url("../img/question.svg"); background-size: contain; content: ""; display: inline-block;; width: 25px; height: 25px; margin: 0px 12px 0 0; vertical-align: bottom;}
.q_a_area dd { font-family: var(--mintyo); font-weight: var(--font6); line-height: 25px; text-indent: -40px; margin-left: 40px; margin-top: 10px;}
.q_a_area dd::before { background: url("../img/answer.svg"); background-size: contain; content: ""; display: inline-block;; width: 25px; height: 25px; margin: 0px 10px 0 0; vertical-align: top;}


.puzzle { width: 1200px; height: 300px; text-align: center; margin: 50px auto 0 auto;}
.puzzle img { width: 400px; height: auto;}

@media screen and (max-width: 768px) {
	.pagetitle { height: 200px;}
	h1 { font-size: 40px; line-height: 120%; }
	.pagetitle_img { width: 100%; text-align: center; margin: 0 0 0 ;} 
	.pagetitle_img img { width: 100%; height: auto;}
	.pagetitle2 { font-size: 40px;  padding: 45px 20px 40px; }
	.pagetitle2 span { display: inline-block;}

	
	.q_a_container { flex-direction: column; align-items: center;}
	.q_a_img { max-width: 300px; width: 100%;}
	.q_a_img  img { width: 100%; height: auto;}
	/*QandA本体*/
	.q_a_area { width: 100%; margin-left: 0; margin-top: 30px}
	.q_a_area dl { display: flex; flex-wrap: wrap; padding: 15px 20px; border-radius: 15px; margin-bottom: 20px; }
	.q_a_area dt { font-size: 20px; text-indent: -37px; margin-left: 37px;}
	.q_a_area dt::before { margin: 0px 12px 0 0; vertical-align: bottom;}
	.q_a_area dd { text-indent: -37px; margin-left: 37px; margin-top: 10px;}
	.q_a_area dd::before { margin: 0px 8px 0 0; vertical-align: top;}

	.puzzle { width: 100%; height: auto; text-align: center; margin: 30px 0;}
	.puzzle img { width: 300px; height: auto;}


}