/*******************************************
*
* css for 5-56を知る > 5-56活用法
*
********************************************/
@charset "UTF-8";

#contentBody{
	width:100%;
	min-width:1100px;
}

#pageBody {
	word-break: 
	padding:45px 0 50px;
}


#pageBody h2 > strong{
	color:#d80c25;
}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	#contentBody{
		min-width:100%;
	}
}


/* ==========================================================
*
* ページインデックス
*
========================================================== */
#indexTile{
	display:block;
	overflow:hidden;
	letter-spacing:-.4em;
	margin-bottom:50px;
}

.listTile{
	display:inline-block;
	overflow:hidden;
	width:33.3%;
	min-height:280px;
	padding:30px 10px;
	letter-spacing:normal;
	vertical-align:top;
	text-align:center;

	background: #d40d24;
	background: -moz-linear-gradient(-45deg,  #d40d24 0%, #680511 100%);
	background: -webkit-linear-gradient(-45deg,  #d40d24 0%,#680511 100%);
	background: linear-gradient(135deg,  #d40d24 0%,#680511 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d40d24', endColorstr='#680511',GradientType=1 );
}

.listTile h4{
	display:block;
	overflow:hidden;
}

.listTile h4 > span{
	display:inline-block;
	overflow:hidden;
	font-size:1.4rem;
	line-height:125%;
	color:#ffffff;
	font-weight:normal;
	padding:0.5em 1em;
	border:1px solid #ffffff;
}

.listTile img{
	margin:5px;
}

.listTile ul{
	display:inline-block;
	text-align:left;
	line-height:155%;
}

.listTile ul > li{
	display:block;
	overflow:hidden;
}

.listTile ul > li > a{
	display:block;
	overflow:hidden;
	color:#ffffff;
}

.listTile ul > li > a:before{
	content:"\f0da";
	margin-right:0.25em;

}

.listTile ul > li > a:hover{
	color:#ffffff;
}


/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	.listTile{
		display:block;
		width:100%;
		min-height:auto;
		padding:20px 20px;
	}

	.listTile h4 > span{
		display:block;
	}

	.listTile > p{
		display:none;
	}

	.listTile ul{
		display:block;
		margin-top:10px;
	}

}


#pageBody h3 {
    display: block;
    overflow: hidden;
    text-align: center;
    font-size: 2.8rem;
    font-weight: normal;
    line-height: 125%;
    color:#d80c25;
    margin-bottom:25px;
    background-color:#ffffff;
    background-color:unset;
}

#pageBody h3:before{
	display:block;
	overflow:hidden;
	content:"";
    height:40px;
    line-height:100%;
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:contain;
}

#anc1 h3:before{
	background-image: url('../howto/images/h2_img01.gif');
}
#anc2 h3:before{
	background-image: url('../howto/images/h2_img02.gif');
}
#anc3 h3:before{
	background-image: url('../howto/images/h2_img03.gif');
}
#anc4 h3:before{
	background-image: url('../howto/images/h2_img04.gif');
}
#anc5 h3:before{
	background-image: url('../howto/images/h2_img05.gif');
}
#anc6 h3:before{
	background-image: url('../howto/images/h2_img06.gif');
}

/* ==========================================================
*
* Q and A リスト
*
========================================================== */
ul.qaList{
	display:block;
	overflow:hidden;
	margin-bottom:50px;
	letter-spacing:-.4em;
}

ul.qaList > li{
	display:inline-block;
	overflow:hidden;
	width:25%;
	letter-spacing:normal;
	vertical-align:top;
	font-size:1.4rem;
	line-height:155%;
	color:#ffffff;
}

ul.qaList.itm3 > li{
	width:33.3%;
}

.faq_q{
	display:block;
	overflow:hidden;
	padding:25px;

	background: #d40d24;
	background: -moz-linear-gradient(-45deg,  #d40d24 0%, #680511 100%);
	background: -webkit-linear-gradient(-45deg,  #d40d24 0%,#680511 100%);
	background: linear-gradient(135deg,  #d40d24 0%,#680511 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d40d24', endColorstr='#680511',GradientType=1 );
}

.faq_q:before{
	display:block;
	overflow:hidden;
	content:"";
	width:100%;
	height:20px;
	background: url(../howto/images/faq_q.png) no-repeat 50% 50%;
    background-size:contain;
}

.faq_a{
	display:block;
	overflow:hidden;
	padding:25px;
	position:relative;

	background: #191a1b;
	background: -moz-linear-gradient(-45deg,  #191a1b 0%, #000000 100%);
	background: -webkit-linear-gradient(-45deg,  #191a1b 0%,#000000 100%);
	background: linear-gradient(135deg,  #191a1b 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191a1b', endColorstr='#000000',GradientType=1 );
}

.faq_a:before{
	display:block;
	overflow:hidden;
	content:"";
	width:100%;
	height:20px;
	background: url(../howto/images/faq_a.png) no-repeat 50% 50%;
    background-size:contain;
}

.faq_a > p{
	margin-bottom:1em;
}

.faq_a > img{
	display:block;
	margin:0 auto;
	width:100%;
	height:auto;
	max-width:232px;
}


#anc6 .faq_q:before,
#anc6 .faq_a:before{
	display:none;
}

#anc6 .faq_a h5{
	display:block;
	overflow:hidden;
	font-weight:bold;
	font-size:1.8rem;
	line-height:155%;
	margin-bottom:1em;
	text-align:center;
}

/* for SP --------------------------*/
@media screen and ( max-width:896px) {

	ul.qaList > li{
		display:block;
		width:100%;
		margin-bottom:10px;
	}

	ul.qaList.itm3 > li{
		width:100%;
	}

}