@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 (max-width: 479px) {/* スマホ用 */
   /* 表示領域が450px以下の場合に適用するスタイル */
	 
.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;
	background-size:160% auto;
	height: 130px;
	float: left;
	width: 100%;
	margin-bottom: 1em;
	}
	
.beforeafterh4-text {
	margin-bottom: 3em;
	}
.beforeafterh4-text span{
	display: block;
	}
	
.file-no-section {
	width: 100%;
	padding-right: 1em;
	padding-left: 1em;
	margin-bottom: 5em;
	display: block;
	height: 250px;
	}
.file-img {
	width: 100px;
	float: left;
	height: 150px;
	margin-right: 10px;
	}
.file-no {
	width: 60%;
!important
	}
.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: 100%;
	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;
	letter-spacing: 0.2em;
	text-indent: -0.5em;
	}
.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.8em;
	}
	/*
.file-no-div img {
	float: right;
	margin-left: 2em;
	margin-right: 1em;
	}
	*/
	
.file-no-div img:hover{
	/* 透明度を上げることで、画像の色を薄く見せる。*/
	opacity:0.5;
	/* リンクをホバーしたときのカーソルにする。*/
	cursor: pointer;
}
 
.file-no-div img:active{
	/* 要素を若干下に下げることで、押した感じを出す。*/
 
	/* 今いる位置から相対的に3px下に配置する。*/
	position: relative;
	top: 3px;
	}
	
.file-no-btn {
		display:none;
	}
.file-no-btn-m {
		margin-top: 1em;
	}
	
.results-section {
	}
.results-section h5 {
	font-size: 1em;
	font-weight: normal;
	margin-bottom: 2em;
 /*
 font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color: #191210;
*/
	}
.results-text {
 /*
 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 {
	/*
color: #191210;
*/
	text-align: left;
	font-size: 0.9em;
	padding-left: 0.5em;
	margin-bottom: 5em;
	}
.results-section img {
   max-width: 400px;
   height: auto;
	 }
#beforeafter01-01 {
	width: 580px;
	margin-bottom: 5em;
	margin-right: auto;
	margin-left: auto;
	margin-top: 3em;
	}
#beforeafter01-02 {
	float: left;
	}
#beforeafter01-03 {
	float: right;
	}
.results-img-medium {
	margin-bottom: 5em;
	width: 400px;
	background-color: #09C;
	}
.beforeafter-parallel {
	text-align: center;
	margin-right: auto;
	margin-left: 50px;
	clear: left;
	float: left;
	}
.beforeafter-parallel img {
	 max-width: 300px;
   height: auto;
	}
#beforeafter01-04 {
	width:500px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5em;
	}
#beforeafter01-04 figcaption {
	margin-left: 45px;
	}
}
