@charset "UTF-8";
/* CSS Document */

/*メインコンテンツ*/
.main{
	position:relative;
	background-color:#191919;
}

.main .inner{
	padding:54px 0 166px;
	text-align:center;
}

.main .inner_type02{
	padding:54px 0 28px;
	text-align:center;
}

.main .inner_type03{
	padding:54px 0 50px;
	text-align:center;
}

.main .title{
	margin-bottom:54px;
}

/*一覧ページ　施工事例リスト*/
.galleryList li{
	float:left;
	display:block;
	margin-right:17px;
	margin-bottom:14px;
}

.galleryList li a{
	display:block;
	position:relative;
}

.galleryList li a .addressBlock{
	position:absolute;
	top:0;
	left:0;
	background-image:url(../img/gallery/img_dot.png);
	width: 100%;
	height: 100%;
	-webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
	opacity:0;
}

.galleryList li a .addressInner{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	margin: auto;
	width: 62%;
	height: 62%;
	color: #FFF;
	font-size: 26px;
	line-height: 1.4;
}

.galleryList li a .addressInner .text{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 50%;
}

.galleryList li a:hover .addressBlock{
	opacity:1;
}

.galleryList li:nth-child(3n){
	float:right;
	margin-right:0;
}

/*一覧ページ　下の青色ブロック*/
.main .blueBlock{
	position:absolute;
	bottom:0;
	background-color:#1C2677;
	width:100%;
	height:90px;
}

/*一覧ページ　もっと見るボタン*/
.main .moreBtnBlock{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	z-index: 100;
}

.main #moreBtn{
    border: 0px;
    width:230px;
    height:98px;
    background: url(../img/gallery/btn_more.png) left top no-repeat;
}


/*詳細ページ　スライダー*/
.sliderBlock{
	position:relative;
	background-image:url(../img/gallery/img_dot02.png);
}

.sliderBlock #gallerySlide{
	margin: 0 auto;
	height: 460px;
	max-width:1000px;
}

.sliderBlock #gallerySlide img {
	max-height:100%;
	max-width:100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	bottom: 0;
}

.sliderBlock #gallerySlide li{
	position: relative;
}

.sliderBlock #gallerySlide li .imgBlock{
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

.slick-slide {
    display: none;
    float: left;
    height: 460px !important;
    min-height: 1px;
    margin: auto;
    text-align: center;
}

.slick-slide img {
    display: inline-block !important;
}

.slick-prev, .slick-next {
    width:56px !important;
    height:58px !important;
}

.slick-prev {
	content:""!important;
	background-image:url(../img/gallery/btnL_slide.png) !important;
	width:56px;
	height:58px;
	left: -10px !important;
	z-index:100;
}

.slick-next {
	content:""!important;
	background-image:url(../img/gallery/btnR_slide.png) !important;
	width:56px;
	height:58px;
	right: -10px !important;
	z-index:100;
}

.slick-dots{
	position:absolute;
	bottom:-40px !important;
	z-index: 100;
	color:#FFF;
}

/*詳細ページ　リンクテキスト１*/
.linkBlock a{
	font-size:18px;
	border-bottom: 1px solid #fff;
	padding-bottom: 2px;
}


/*詳細ページ　物件情報ブロック*/
.infoBlock{
	padding-top:75px;
	color:#FFF;
	text-align:left;
}

.infoBlock .dataBlock{
	float:left;
	width:37%;
	margin-left: 50px;
}

.infoBlock .dataBlock>.name{
	font-size: 21px;
	border: 1px solid #FFF;
	display: inline-block;
	padding: 10px 20px;
	margin-bottom:27px;
}

.infoBlock .dataBlock .address br{
	display:none;
}

.infoBlock .dataBlock .point{
	font-size:24px;
	line-height: 1.7;
	margin-bottom:80px;
}

.infoBlock .dataBlock dl{
	width:370px;
	font-size:18px;
	letter-spacing: 1px;
}

.infoBlock .dataBlock dt{
	float:left;
	margin-right:20px;
	margin-bottom:10px;
}

.infoBlock .dataBlock dd{
	margin-bottom:30px;
}

.infoBlock .dataBlock dt.price01{
	border: 1px solid #FFF;
	font-size: 16px;
	padding: 7px 4px;
}

.infoBlock .dataBlock dd.price01{
	border-bottom: 1px solid #FFF;
	padding-top: 0px;
	padding-bottom: 4px;
	font-size: 27px;
}

.infoBlock .dataBlock dt.price03{
	float:none;
}

.infoBlock .dataBlock dd.price03{
	font-size:15px;
}

.infoBlock .dataBlock dd.price03 .largeText01{
	border-bottom: 1px solid #FFF;
	font-size: 25px;
	padding-bottom: 7px;
	padding-right: 3px;
	margin-right: 6px;
}

.infoBlock .dataBlock dd.price03 .largeText02{
	font-size: 45px;
	padding: 0 6px;
}


/*総事業費専用ブロック*/
.infoBlock .dataBlock .totalCostBlock{
	margin-bottom:30px;
}

.infoBlock .dataBlock .totalCostBlock .name{
	float: left;
	width: 30%;
	border: 1px solid #FFF;
	box-sizing: border-box;
	text-align: center;
	font-size: 19px;
	position: relative;
	top: 14px;
	letter-spacing: 2px;
	padding: 4px;
}

.infoBlock .dataBlock .totalCostBlock .price{
	float: right;
	width: 70%;
	border-bottom: 1px solid #FFF;
	font-size: 25px;
	line-height: 1.7;
	padding: 0 15px;
	box-sizing: border-box;
}


/*詳細ページ　営業担当コメントブロック*/
.infoBlock .commentBlock {
	float: right;
	width: 53%;
	padding: 42px 30px 30px;
	margin-right: 25px;
	background-color: #FFF;
	color: #191919;
	box-sizing: border-box;
	position: relative;
	font-size: 14px;
	z-index: 1;
}

.infoBlock .commentBlock .titleBlock{
	margin-bottom: 15px;
	position: relative;
	left: -30px;
}

.infoBlock .commentBlock .name{
	font-size:15px;
	margin-bottom:30px;
}

.infoBlock .commentBlock .comment{
	line-height:2;
}

.infoBlock .commentBlock:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-right: 30px solid transparent;
	border-top: 30px solid #1CB8C5; 
}

.infoBlock .commentBlock:after {
	content: "";
	display: block;
	position: absolute;
	border:1px solid #FFF;
	width:100%;
	height:100%;
	top: 10px;
	left: 10px;
	z-index:-1;
}

.infoBlock .commentBlock .imgBlock{
	display:block;
	width:187px;
	height:187px;
	overflow:hidden;
	position:absolute;
	top:-45px;
	right:-25px;
	z-index:100;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.infoBlock .commentBlock .imgBlock img{
	position: absolute;
	left: -35%;
	right: 0;
	margin: auto;
}

/*詳細ページ　リンクテキスト２*/
.linkBlock02 a{
	position:relative;
	font-size:23px;
}

.linkBlock02 a:after{
	content:"";
	background-image:url(../img/common/icon_arrow.png);
	width:26px;
	height:26px;
	position:absolute;
	right: -36px;
}

/*レスポンシブ用記述*/
/*画面サイズが1000px以下の場合*/
@media screen and (max-width: 1000px) {
	
	/*メインコンテンツ*/
	.main .inner_type03 {
		padding: 54px 10px 50px;
		box-sizing: border-box;
	}
	
	/*詳細ページ　スライダー*/
	.slick-prev, .slick-next {
		width:56px !important;
		height:58px !important;
	}
	
	.slick-prev {
		left: -21% !important;
	}
	
	.slick-next {
		right: -21% !important;
	}
	
	.sliderBlock #gallerySlide{
		width: 70%;
		margin: 0 auto;
		height: 100%;
	}
	
	.sliderBlock #gallerySlide img {
		height: auto;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: 0;
		bottom: 0;
	}
	
	.sliderBlock #gallerySlide li{
		position: relative;
	}
	
	.sliderBlock #gallerySlide li .imgBlock{
		display: table-cell;
		vertical-align: middle;
	}
	
	/*詳細ページ　物件情報ブロック*/
	.infoBlock {
		width: 90%;
		margin: 0 auto 50px;
	}

	.infoBlock .dataBlock {
		float: none;
		width: 80%;
		margin-left: 50px;
		margin: 0 auto 80px;
	}
	
	.infoBlock .dataBlock .point {
		font-size: 20px;
		width: auto;
		line-height: 1.7;
		margin-bottom: 45px;
	}
	
	.infoBlock .dataBlock dl {
		width: auto;
		font-size: 17px;
		letter-spacing: 1px;
	}

	.infoBlock .dataBlock dt.price01 {
		font-size: 17px;
		padding: 7px 4px;
	}
	
	.infoBlock .dataBlock dd.price01 {
		padding-bottom: 0px;
		font-size: 19px;
		line-height: 1.7;
	}
	
	.infoBlock .dataBlock dt {
		float: none;
		margin-right: 20px;
		margin-bottom: 10px;
	}
	
	.infoBlock .dataBlock dd {
    	margin-bottom: 30px;
	}
	
	/*総事業費専用ブロック*/
	.infoBlock .dataBlock .totalCostBlock .name {
		float:none;
		border:none;
		box-sizing: border-box;
		font-size: 20px;
		letter-spacing: 2px;
		margin-bottom: 15px;
		text-align: left;
		width:auto;
		padding:0;
	}

	.infoBlock .dataBlock .totalCostBlock .price {
		float:none;
		border:none;
		border-bottom: 1px solid #FFF;
		font-size: 25px;
		line-height: 1.7;
		display: inline-block;
		padding: 0;
		width: auto;
	}

	.infoBlock .dataBlock dd.price03 {
		font-size: 17px;
	}

	.infoBlock .dataBlock dd.price03 .largeText01 {
		font-size: 18px;
		padding-bottom: 5px;
		padding-right: 2px;
		margin-right: 2px;
}
	
	.infoBlock .dataBlock dd.price03 .largeText02 {
		font-size: 25px;
		padding: 0 3px;
	}


	/*詳細ページ　営業担当コメントブロック*/
	.infoBlock .commentBlock {
		float: none;
		width: 100%;
		padding: 42px 30px 30px;
		margin-right: 0;
		background-color: #FFF;
		color: #191919;
		box-sizing: border-box;
		position: relative;
		font-size: 14px;
		z-index: 1;
		margin: 20px;
	}
	
	.infoBlock .commentBlock .imgBlock{
		top: -10px;
		right: 10px;
	}
	
	.infoBlock .commentBlock .titleBlock{
		width: 100%;
	}
	
	
	/*一覧ページ　施工事例リスト*/
	.galleryList{
		padding: 0 10px;
		text-align:center;
	}

	.galleryList li{
		float:left;
		margin-right:2%;
		width:32%;
	}
	
	.galleryList li img{
		width:100%;
	}
	
	.galleryList li:nth-child(3n){
		margin-right:0;
	}
	
	.galleryList li a:hover .addressBlock{
		opacity:0;
	}
}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	.main .title img{
		width: 60%;
	}
	
	.slick-slide {
    	height: 260px !important;
	}
	
	.infoBlock .commentBlock .titleBlock img{
		width: 80%;
	}
	
	.slick-slide {
    	height: 260px !important;
	}
	
	/*一覧ページ　施工事例リスト*/
	.galleryList li{
		float:left;
		margin-right:2%;
		width:49%;
	}
	
	.galleryList li:nth-child(3n){
		float:left;
	}
	
	.galleryList li:nth-child(even){
		margin-right:0;
	}
	
	.galleryList li:nth-child(odd){
		float:left;
		margin-right:2%;
	}
	
	/*詳細ページ　物件情報ブロック*/
	.infoBlock .dataBlock{
		float:none;
		width:auto;
	}
	
	/*詳細ページ　営業担当コメントブロック*/
	.infoBlock .commentBlock {
		float:none;
		width:auto;
	}
	
	.infoBlock .commentBlock .imgBlock{
		position:absolute;
		top:-30px;
		right:10px;
	}
}

/*画面サイズが640px以下,320px以上の場合*/
@media screen and (max-width: 640px) and (min-width: 320px) {
	/*詳細ページ　スライダー*/
	.slick-slide {
		height: 260px !important;
	}
	
	/*詳細ページ　営業担当コメントブロック*/
	.infoBlock .commentBlock .imgBlock{
		position:absolute;
		top:-20px;
		right:5px;
		height:100px;
		width:100px;
	}
	
	.infoBlock .commentBlock .imgBlock img{
			width: 165%;
	}
	
}

/*画面サイズが320px以下の場合*/
@media screen and (max-width: 320px) {
	/*詳細ページ　スライダー*/
	.slick-slide {
		height: 200px !important;
	}
}

/*回り込み解除クラス*/
.clearfix:after {
 content: "";
 clear: both;
 display: block;
}