@charset "utf-8";
/*
 * ================================================
 *
 * [qa]
 *
 * ================================================
 */
/*-----------------------------------------
  common
-----------------------------------------*/
#content{
	padding-top: 65px;
}
article img{
	max-width: 100%;
}
.contVox {
	width: 1000px;
	margin: 0 auto 60px auto;
}
	.contVox .header {
		text-align: center;
		margin-bottom: 50px;
	}
.popupWrapper {}
	.popupWrapper .content {
		position: relative;
		padding-top: 56.25%;
		background: transparent;
	}
		.popupWrapper .content iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
.note { font-size: 85%; }
.sup {
	font-size: 60%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}

.answer a{
	text-decoration: underline;
}


.answer a:hover{
	text-decoration: none;
}
/*-----------------------------------------
  mainVisual
-----------------------------------------*/


#mainVisual {
	font-size: 1.4rem;
	text-align: left;
	min-width: 1200px;
	height: 500px;
	width: 100%;
	margin: 0 auto 70px auto;
	background: url(../images/qa/main_photo.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}

	#mainVisual .inner {
		width: 1000px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -500px;
	}
	#mainVisual .content {
		position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
	}

		#mainVisual .content p {
			line-height: 2.5;
			margin-bottom: 20px;
		}
		#mainVisual .content .detailBtn { margin-top: 10px; }
			#mainVisual .content .detailBtn a {
				display: block;
				color: #656464;
				font-weight: bold;
				letter-spacing: 0.05em;
				text-decoration: none;
				line-height: 1;
				width: 260px;
				padding: 8px 10px;
				background: url(../images/content/content/ico_arrow.png) no-repeat 97% center;
				border: 1px solid #777;
				border-radius: 4px;
				-webkit-transition: 0.2s;
				    -ms-transition: 0.2s;
				        transition: 0.2s;
			}
			#mainVisual .content .detailBtn a:hover {
				color: #fff;
				background-image: url(../images/content/content/ico_arrow2.png);
				background-color: #717071;
			}
/*-----------------------------------------
  movie
-----------------------------------------*/
#movie {}
	#movie .inner {
		overflow: hidden;
    display: table;
    margin: 0 auto;
	}
	#movie .movieVox {
		width: 247px;
		float: left;
		margin-right: 30px;
		margin-bottom: 30px;
		cursor: pointer;
	}
	#movie .movieVox:nth-of-type(3n) { margin-right: 0; }
/*-----------------------------------------
  question
-----------------------------------------*/
#question {}
	#question h2.header{
		width: 174px;
		margin: 0 auto 30px;
	}
	#question .questionVox {
		border-bottom: 1px solid #c5c6c6;
	}
		#question .questionVox .title {cursor: pointer;}
			#question .questionVox .title div {
				display: block;
				color: #4C4948;
				font-size: 16px;
				font-weight: bold;
				text-decoration: none;
				min-height: 82px;
				padding: 25px 50px 25px 45px;
				background: url(../images/qa/ico_question.png) no-repeat left center;
				-webkit-background-size: 32px auto;
				        background-size: 32px auto;
				position: relative;
		    text-align: left;
		    box-sizing: border-box;
			}
			#question .questionVox .title div::before,
			#question .questionVox .title div::after {
				display: block;
				content: "";
				background: #4C4948;
				position: absolute;
				transition: .2s;
			}
			#question .questionVox .title div::before {
				width: 18px;
				height: 4px;
				right: 0;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
			#question .questionVox .title div::after {
				width: 4px;
				height: 18px;
				right: 14px;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
			#question .questionVox.active .title div::after { display: none; }
		#question .questionVox .answer { display: none; }
			#question .questionVox .answer .cInner {
				min-height: 32px;
				margin-left: 45px;
				padding: 0 45px 25px 45px;
				background: url(../images/qa/ico_answer.png) no-repeat left top;
				-webkit-background-size: 32px auto;
				        background-size: 32px auto;
				text-align: left;
				font-size: 14px;
		    font-weight: 400;
			}
				#question .questionVox .answer figure { text-align: center; }
					#question .questionVox .answer .img01 img { width: 345px; }
					#question .questionVox .answer .img02 img { width: 396px; }
				#question .questionVox .answer .tableStyle01 {
					width: 100%;
					border-collapse: collapse;
				}
					#question .questionVox .answer .tableStyle01 th,
					#question .questionVox .answer .tableStyle01 td {
						font-weight: normal;
						padding: 5px 10px;
						border: 1px solid #808080;
					}
					#question .questionVox .answer .tableStyle01 thead th {
						color: #fff;
						font-weight: bold;
						line-height: 1.3;
						text-align: center;
						background:  #c5c6c6;
					}
					#question .questionVox .answer .tableStyle01 tbody th {
						white-space: nowrap;
						text-align: left;
						background: #fff;
					}
					#question .questionVox .answer .tableStyle01 tbody .alignCenter { text-align: center !important; }
					#question .questionVox .answer .tableStyle01 tbody td { background: #fff; }
					#question .questionVox .answer .color {
						display: inline-block;
						margin-right: 10px;
					}
					#question .questionVox .answer .color::before {
						display: inline-block;
						content: "";
						width: 11px;
						height: 11px;
						margin-right: 5px;
					}
					#question .questionVox .answer .color.white::before {
						background: #fff;
						border: 1px solid #808080;
					}
					#question .questionVox .answer .color.gray::before			{ background: #444a54; }
					#question .questionVox .answer .color.lightgray::before		{ background: #ccdbe6; }
					#question .questionVox .answer .color.navy::before			{ background: #2c607d; }
					#question .questionVox .answer .color.khaki::before			{ background: #6a7454; }
					#question .questionVox .answer .color.salmonpink::before	{ background: #f7bab9; }
					#question .questionVox .answer .color.lavender::before		{ background: #cfd0e9; }
					#question .questionVox .answer .color.babypink::before		{ background: #f4daf0; }
					#question .questionVox .answer .color.softbeige::before		{ background: #e1cfc7; }
					#question .questionVox .answer .color.blue::before			{ background: #009aec; }
					#question .questionVox .answer .color.yellowgreen::before	{ background: #77dc59; }
					#question .questionVox .answer .color.pink::before			{ background: #ff9cc1; }
					#question .questionVox .answer .color.yellow::before		{ background: #f5e02f; }
					#question .questionVox .answer .color.saxeblue::before		{ background: #72cdf5; }
/**
 * alphaBg & popupWrapper
 */
#alphaBg {
	height: 100%;
	left: 0;
	top: 0;
	z-index: 200;
	opacity: 0;
}
/**
 * alphaBg
 */
#alphaBg {
	width: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 50;
	background: #000000;
	display: none;
	min-height: 100%;
}
.popupWrapper {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	/*display: none;*/
	z-index: 2100;
	visibility: hidden;
}
	.popupWrapper .closeVox {
		height: 30px;
	}
	.popupWrapper .popupCloseBt {
		position: absolute;
		top: 5px;
		right: 0;
		width: 20px;
		height: 20px;
	}
		.popupWrapper .popupCloseBt span {
			width: 20px;
			height: 2px;
			background: #FFFFFF;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -1px 0 0 -10px;
		}
		.popupWrapper .popupCloseBt span:nth-child(1) {
			-webkit-transform: rotate(-45deg);
		      -ms-transform: rotate(-45deg);
		          transform: rotate(-45deg);
		}
		.popupWrapper .popupCloseBt span:nth-child(2) {
			-webkit-transform: rotate(45deg);
		      -ms-transform: rotate(45deg);
		          transform: rotate(45deg);
		}
	.popupWrapper .contentWrapper {}
	.popupWrapper .content {
		background: #FFFFFF;
	}
/**
 * transition series
 */
.trOp02s {
	-webkit-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}
.trOp02s:hover {
	opacity: 0.6;
}



.popupWrapper {
	display: none;
	color: #fff;
	text-align: center;
	width: 800px;
	margin-left: -400px;
	visibility: visible;
}
	.popupWrapper .closeVox {
		height: 50px;
	}
	.popupWrapper .popupCloseBt {
		position: absolute;
		top: 0;
		width: 50px;
		height: 50px;
	}
		.popupWrapper .popupCloseBt span {
			display: block;
			width: 50px;
			background: #fff;
			margin: -5px 0 0 -25px;
		}
#popupContents {
	display: none;
}
/**
 ****************************************************
 *
 * screens larger than 768
 *
 ****************************************************
 */
@media only screen and (min-width: 768px) {

}	/*  @media END */
/**
 ****************************************************
 *
 * screens smaller than 767
 *
 ****************************************************
 */
@media only screen and (max-width: 767px) {

	#mainVisual {
		font-size: 1.0rem;
		width: 100%;
		min-width: 100%;
		margin: 0 auto 50px;
		background: url(../images/qa/SP_main_photo.jpg) no-repeat center center;
		background-size: cover;
		padding-top: 97%;
		height: 0;
	}
		#mainVisual .inner {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			margin-left: 0;
		}
		#mainVisual .content {
			top: 47px;
			left: 35px;
			transform: translateY(0);
		}
			#mainVisual .content .title {
				width: 221px;
			}
			#mainVisual .inner .copy {
				margin-bottom: 25px;
				width: 236px;
			}
			#mainVisual .inner p {
				line-height: 2.5;
			}
	/*-----------------------------------------
	  sectionWrapper
	-----------------------------------------*/
	#content{
		padding-top: 50px;
	}
	.contVox { width: auto; }
		.contVox .header { margin-bottom: 30px; }
			/* .contVox .header img { height: 60px; } */

	/*-----------------------------------------
	  movie
	-----------------------------------------*/
	#movie { margin-bottom: 90px;}
		#movie .inner {}
		#movie .movieVox {
			width: 275px;
			float: none;
			margin: 0 auto 40px auto;
		}
		#movie .movieVox:nth-of-type(3n) { margin-right: auto; }
		#movie .movieVox:last-of-type { margin-bottom: 0; }
	/*-----------------------------------------
	  question
	-----------------------------------------*/
	#question { padding: 0 15px; }
	#question h2.header {
    width: 108px;
    margin: 0 auto 10px;
	}
		#question .header { margin-bottom: 10px; }
		#question .questionVox {}
			#question .questionVox .title {}
				#question .questionVox .title div {
					font-size: 15px;
					line-height: 1.5;
					padding-top: 30px;
				}
				/* #question .questionVox.active .title div { padding-bottom: 10px; } */
			#question .questionVox .answer {}
				#question .questionVox .answer .cInner {
					padding-right: 0;
					margin-left: 0;
				}
					#question .questionVox .answer figure { text-align: center; }
						#question .questionVox .answer .img03 img { width: 193px; }
					#question .questionVox .answer .headStyle01 {
						color: #808080;
						font-size: 14px;
						font-weight: bold;
					}
						#question .questionVox .answer .tableStyle01 thead th { padding: 5px; }
						#question .questionVox .answer .tableStyle01 tbody th {
							color: #fff;
							font-weight: bold;
							line-height: 1.3;
							background: #c5c6c6;
						}
					#question .questionVox .answer .tableStyle01.vertical {
						display: block;
						border-bottom: 1px solid #808080;
					}
						#question .questionVox .answer .tableStyle01.vertical thead,
						#question .questionVox .answer .tableStyle01.vertical tbody,
						#question .questionVox .answer .tableStyle01.vertical tr,
						#question .questionVox .answer .tableStyle01.vertical th,
						#question .questionVox .answer .tableStyle01.vertical td { display: block; }
						#question .questionVox .answer .tableStyle01.vertical tbody td {
							border-top: none;
							border-bottom: none;
						}
	/**
	 * alphaBg & popupWrapper
	 */
	#alphaBg {}
	.popupWrapper {
		width: 93%;
		padding: 0 15px;
		margin-left: 0;
		left: 0;

	}
		.popupWrapper .closeVox { height: 30px; }
		.popupWrapper .popupCloseBt {
			width: 30px;
			height: 30px;
			right: 15px;
		}
			.popupWrapper .popupCloseBt span {
				width: 30px;
				margin: -1px 0 0 -15px;
			}

}	/*  @media END */