@charset "UTF-8";

/*
**********************************************************************

* index.css

* site name   : yamagiwa
* description : Import need style sheets
* since       : 2018-10
* editor      : Office ThroughSky  Tominaga 

*********************************************************************
*/
#beforeafter-back {
	background-image: url(../img/beforeafter/beforeafter-back.png);
}
.beforeafterwrap {
 /*
 font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color: #191210;
*/
	}
@media screen and (min-width: 801px) {
	
.beforeafterwrap {
	width: 100%;
	text-align: center;
	}
.beforeafterwrap h3 {
	margin-top: 2em;
	margin-bottom: 3em;
	}
.beforeafterwrap h4 {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1em;
	}
.beforeafterwrap h4 img{
	display: inline;
	}
.beforeafterh4-img {
	background-attachment: scroll;
	background-image: url(../img/beforeafter/beforeafterh4-back.png);
	background-repeat: repeat-x;
	background-position: center top;
	height: 150px;
	float: left;
	width: 100%;
	margin-bottom: 6em;
	}
	
.beforeafterh4-text {
	margin-bottom: 6em;
	}
.results-section figcaption {
 /*
color: #191210;
*/
	text-align: left;
	font-size: 0.9em;
	padding-left: 0.5em;
	}
	
.file-no-section {
	/*width: 80%;*/
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5em;
	float: left;
	}
.file-img {
	width: 100px;
	float: left;
	height: 150px;
	margin-right: 10px;
	}
.file-no {
	}
.file-no h5 {
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	color: #191210;
	/**/
	width: 680px;
	font-weight: bold;
	float: left;
	font-size: 1em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	text-align: left;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	letter-spacing: 0.2em;
	text-indent: -0.5em;
	}
.file-no h5 span {
	font-size: 110%;
	}
.file-no h5 a {
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	color: #191210;
	}
.file-no h5 a:hover {
	color: #CCCCCC;
	}
.file-no-div {
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	color: #191210;
	text-align: left;
	padding-bottom: 0.5em;
	min-height: 170px;
	}
.file-no-div p {/*
	display: inline;	
	min-width :420px;
	*/
	font-size: 0.9em;
	}
.file-no-div img:hover{
	/* 透明度を上げることで、画像の色を薄く見せる。*/
	opacity:0.5;
	/* リンクをホバーしたときのカーソルにする。*/
	cursor: pointer;
}
 
.file-no-div img:active{
	/* 要素を若干下に下げることで、押した感じを出す。*/
 
	/* 今いる位置から相対的に3px下に配置する。*/
	position: relative;
	top: 3px;
	}
	
.file-no-btn {
		float: right;
		margin-left: 2em;
		margin-right: 1em;
	}
.file-no-btn-m {
		display:none;
	}
.file-no-btn-s{
		display:none;
	}
	
.results-section {
	}
.results-section h5 {
	font-size: 1em;
	font-weight: normal;
 /*
 font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color: #191210;
*/
	}
.results-text {
	font-weight: normal;
 /*
 font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color: #191210;
*/
	}
.results-img-large {
	margin-bottom: 5em;
	background-color: #F36;
	}
.results-section figcaption {
	font-weight: normal;
 /*
 font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color: #191210;
*/
	text-align: left;
	font-size: 0.9em;
	padding-left: 0.5em;
	}
.results-img-medium {
	width:750px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5em;
	}
.beforeafter-parallel {
	width:340px;
	margin-right: auto;
	/*margin-left: auto;*/
	margin-left: 10px;
	margin-bottom: 5em;
	float: left;
	}
.beforeafter-single {
	width: 580px;
	margin-bottom: 5em;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3em;
	}
.beforeafter-single figcaption {
	float: left;	/*margin-left: 80px;*/
	}
	
#beforeafter01-02 {
	width: 580px;
	margin-bottom: 5em;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3em;
	}
#beforeafter01-04 {
	width:340px;
	margin-bottom: 5em;
	float: left;
	}
#beforeafter01-05 {
	width: 580px;
	margin-bottom: 5em;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3em;
	}
#beforeafter01-05 figcaption {
	margin-left: 80px;
	}
}