@charset "utf-8";

* {	 
	padding: 0;
	margin: 0;
	text-decoration: none;
}
.q_container input,
.onoff_box input {
	display: none;
}
.onoff {
	position: fixed;
	left: 0px;
	bottom: 0px;
  	width: 50px;
  	height: 50px;
	color: #fff;
	font-size: 68%;
	font-weight: bold;
	text-align: left;
	z-index: 10001;
	cursor: pointer;
}
.onoff span.all{
	position: fixed;
	display: block;
	left: 15px;
	bottom: 25px;
}
.onoff span.ao{
	position: fixed;
	display: block;
	left: 8px;
	bottom: 12px;
}
.onoff span.ac{
	position: fixed;
	left: 5px;
	bottom: 13px;
	display: none;
}
#all01:checked + .onoff span.ao{
	display:none;
}
#all01:checked + .onoff span.ac{
	display:block;
}
.onoff:before {
  	position: absolute;
  	bottom: 8px;
  	left: 8px;
 	content: " ";
 	height: 35px;
	width: 35px;
	background: url("../jp/jj1.jpg");
	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
 	opacity: 0.5;
	z-index: -1;
}
.onoff:after {
 	position: absolute;
  	bottom: 7.8px;
  	left: 7.8px;
	content: " ";
  	height: 0px;
	width: 0px;
	border-bottom: 17.5px solid transparent;
	border-left: 17.5px solid #192f60;
	border-right: 17.5px solid #192f60;
	border-top: 17.5px solid transparent;
	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
	opacity: 0.5;
	z-index: -1;
}
label.onoff:hover:before,
label.onoff:hover:after {
	-webkit-transform: rotate(135deg);
  	transform: rotate(135deg);
	opacity: 1 ;
}
.q_box {
	width: 800px;
	margin: 0 auto;
}
.q_container {
	width: 760px;
	margin: 5px auto;
}
.q_container label {
	margin: 30px 0 0 0;  
	padding: 15px 1.1em 15px 1.3em; 
  	position: relative;
	z-index: 20;
	display: block;
 	background: url("../jp/jp21.png");
	border-top: solid 1.5px #c7b370;
	border-bottom: solid 1.5px #c7b370;
	border-radius: 0 7px 0 0;
  	font-size: 110%;
	line-height: 1.3;
	color: #fff;
	font-weight: bold;
	text-shadow: 0px 0.5px 0.5px rgba(24,46,96, 0.8);
}
.q_container label em {
	color: #c7b370;
	font-size: 110%;
	font-weight: bold;
	font-style: normal;
}
.q_container label::before {
  	position: absolute;
  	top: -16px;
  	left: -15px;
 	content: " ";
   	width: 30px;
  	height: 30px;
 	background: url("../jp/jp.png");
	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
}
.q_container label::after {
  	position: absolute;
  	top: -17px;
  	left: -10px;
 	content: "Q";
   	color: #fff;
  	font-size: 24px;
	font-family: "Georgia","Times New Roman";
	font-weight: bold; 
 	text-align: center;
}
.q_container .content {
 	background: url("../jp/jp24.png");
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	transition: 
		height 0.3s ease-in-out, 
		box-shadow 0.6s linear;
}
.q_container .content .inner {
	margin: 15px 15px 10px 3em;
}
.q_container .content p {
	color: #6b3f31;
}
.q_container .content::before {
  	position: absolute;
  	top: 10px;
  	left: 10px;
  	content: " ";
  	width: 30px;
  	height: 30px;
  	line-height: 38px;
 	background: url("../jp/jp.png");
	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
}
.q_container .content::after {
  	position: absolute;
  	top: 5px;
  	left: 10px;
  	content: "A";
  	width: 30px;
	color: #fff;
  	font-size: 24px;
	font-family: "Georgia","Times New Roman";
	font-weight: bold; 
 	text-align: center;
}
.q_container input:checked ~ .content { 
	transition: 
		height 0.5s ease-in-out, 
		box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px #eae8e1
}
.q_container input:checked ~ .content {
	height: auto;
}
.q_container label:hover {
 	background: url("../jp/jp4.png");
}
.q_container input:checked + label,
.q_container input:checked + label:hover {
	background: url("../jp/jp2.png");
}
.q_container label span:after,
.q_container label:hover span:after,
.q_container input:checked + label:hover  span:after {
	position: absolute;
    	top: 50%;
    	right: 10px;
    	margin-top: -11px;
    	content: '▶';
    	font-size: 18px;
     	-moz-transform: rotate(90deg);
    	-ms-transform: rotate(90deg);
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
    	-moz-transition: all, 0.25s, linear;
    	-o-transition: all, 0.25s, linear;
    	-webkit-transition: all, 0.25s, linear;
    	transition: all, 0.25s, linear;
}
.q_container input:checked + label  span:after,
.q_container input:checked + label:hover  span:after {
   	-moz-transform: translate(0, 50%);
    	-ms-transform: translate(0, 50%);
    	-webkit-transform: translate(0, 50%);
    	transform: translate(0, 50%);
    	-moz-transform: rotate(-90deg);
    	-ms-transform: rotate(-90deg);
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
}
				@media screen and (max-width:800px){
.q_box {
	width: 100%;
	margin: 0 auto;
}
.q_container {
	width: 95%;
	margin: 5px 0.5% 5px 4.5%;
	padding-bottom: 30px;
}
.q_container label {
	padding: 7px 1.5em 7px 1.2em; 
}
				}
				@media screen and (max-width:500px){
.q_container .content .inner {
	margin: 50px 15px 10px 15px;
}
				}