@charset "utf-8";
@import url("/css/pages.css");
/* photogallery.css */
/*PC first*/
/*##### PC #####*/
.content_title .content_title_img{
	background: url(/shared/content_title/photogallery_img.jpg) no-repeat left top;
}

/*トップページ*/
/*カテゴリ選択*/
.category_box{
	margin-bottom:35px;
	background:#f1f1f1;
	padding:15px 0 5px 0;
}

.is-fixed{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}

/*
	.category_box > .box_header{
		width:914px;
		margin:0 auto 14px auto;
		padding-left:26px;
	}
*/
	
	.category_box > .box_inner{
		display:flex;
		justify-content:space-between;
		width:960px;
		margin:0 auto;
	}
	
	.btn_part_oc_wrapper{
		width:146px;
	}
	
		.btn_part_oc_wrapper .btn_part_oc{
			text-align:center;
			cursor:pointer;
			position:relative;
			transition:.5s all ease;
		}
		
		.btn_part_oc_wrapper .btn_part_oc:hover{
			transform:translateY(5px);
		}
		
		.btn_part_oc_wrapper .btn_part_oc.open{
			transform:translateY(50px);
		}
		
		.btn_part_oc_wrapper .btn_part_oc:before{
			content:"";
			position:absolute;
			top:0;
			left:0;
			display:block;
			z-index:0;
			width:146px;
			height:100%;
			transition:.5s all ease;
			opacity:0;
			border-radius:4px;
		}
		
		
		.btn_part_oc_wrapper .btn_part_oc.open:before{
			opacity:1;
		}
		
		.btn_part_oc_wrapper .btn_part_oc span.lbl_heyabasho{
			display:block;
			height:22px;
			padding-top:10px;
			position:relative;
			z-index:1;
		}
		
		.btn_part_oc_wrapper .btn_part_oc span.icon_heyabasho{
			display:block;
			transition:.5s all ease;
			position:relative;
			z-index:1;
		}
		
			.btn_part_oc_wrapper .btn_part_oc span.lbl_heyabasho .sp,
			.btn_part_oc_wrapper .btn_part_oc span.icon_heyabasho .sp{
				display:none;
			}
		
		.btn_part_oc_wrapper .btn_part_oc.open span.icon_heyabasho{
			transform:rotate(180deg);
		}
	
	.category_nav_wrapper{
		width:780px;
	}
	
	.category_nav_wrapper .house_type{
		display:flex;
		justify-content:space-between;
	}
	
	.category_nav_wrapper .house_type li{
		width:146px;
		height:40px;
	}
	
	.category_nav_wrapper .house_type li span,
	.category_nav_wrapper .house_type li a{
		display:block;
		height:36px;
		line-height:32px;
		text-align:center;
		font-size:1.1em;
		font-weight:bold;
		background:#9e9e9e;
		border-radius:20px;
		color:#fff;
		cursor:pointer;
		box-sizing:border-box;
		border:3px solid #9e9e9e;
	}
	
	.category_nav_wrapper .house_type li.active a{
		border:3px solid #A02814;
		background:#fff;
		color:#A02814;
	}
	
	
	.category_nav_wrapper .house_part{
		letter-spacing:-0.4em;
		display:none;
		width:650px;
		padding:15px 15px 0 15px;
	}
	
	.category_nav_wrapper .house_part.open{
		display:block;
	}
	
	.category_nav_wrapper .house_part li{
		display:inline-block;
		letter-spacing:0;
		position:relative;
		padding:0 30px 0 10px;
		margin-bottom:10px;
	}
	
	.category_nav_wrapper .house_part li:before{
		content:"";
		display:block;
		width:4px;
		height:4px;
		background:#a02810;
		position:absolute;
		top:4px;
		left:0;
	}
	
	.category_nav_wrapper .house_part li a{
		color:#1a1a1a;
	}
	
	.category_nav_wrapper .house_part li a:hover{
		text-decoration:underline;
	}
	
	.category_nav_wrapper .house_part li.active a{
		color:#9D0733;
		font-weight:bold;
	}
	
	/*-----grid_container-----*/
	.grid_container{
		max-width:1025px;
		width:100%;
		margin:0 auto 50px auto;
	}
	
		.grid_container ul {
			position:relative;
		}
		
		.grid_container ul li{
			position:absolute;
			margin-bottom:0;
			opacity:0;
		}
		
		.grid_container ul li.x1{
			width:200px;
			height:130px;
			overflow:hidden;
		}
		
		.grid_container ul li.x2{
			width:405px;
			height:265px;
			overflow:hidden;
		}
		
		/*バナーは絶対小サイズ*/
		.grid_container ul li.x1.bn,
		.grid_container ul li.x2.bn{
			width:200px;
			height:130px;
		}
		
		.grid_container ul li a{
			display:block;
			position:relative;
			height:100%;
		}
		
		.grid_container ul li a img{
			max-width:100%;
			height:auto;
			position:relative;
			z-index:0;
		}
		
		/*バナー画像は点滅*/
		.grid_container ul li.x1.bn a img,
		.grid_container ul li.x2.bn a img{
			animation: bnBlink 1s infinite;
		}
			/*アニメーション*/
			@keyframes bnBlink{
				50%{
					opacity:0.7;
				}
			}

		
		.grid_container ul li a .house_name{
			display:block;
			color:#fff;
			position:absolute;
			z-index:2;
			bottom:0;
			left:0;
			width:100%;
			box-sizing:border-box;
			padding:5px;
			background:rgba(0,0,0,0.5);
			opacity:0;
			transition:.5s all ease;
		}
		
		.grid_container ul li a:hover .house_name{
			opacity:1;
		}
		
		.grid_container ul li a:before{
			content:"";
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:1;
			background:#000;
			opacity:0;
			transition:.5s all ease;
		}
		
		.grid_container ul li a:hover:before{
			opacity:0.4;
		}

	
    /* --- contactBox --- */
    .contents .contactBox{
        width: 960px;
		/*
        display: -webkit-flex;
        -js-display: flex;
        display: -ms-flexbox;
        display: flex;
        flex-wrap:wrap;
		*/
		margin:0 auto;
		border-top:1px solid #9E9E9E;
		padding-top:50px;
    }
        .contents .contactBox h3{
            width: 100%;
            text-align: center;
            padding-bottom: 50px;
        }
		
        .contents .contactBox > .box_inner{
            display: -webkit-flex;
            -js-display: flex;
            display: -ms-flexbox;
            display: flex;
            flex-wrap:wrap;
			justify-content:space-between;
			width:920px;
			margin:0 auto;
        }
		
        .contents .contactBox > .box_inner .contactPhoneBox{
			width:560px;
		}
		
	        .contents .contactBox > .box_inner .contactPhoneBox p{
				font-size:1.3em;
				margin-bottom:20px;
			}
			
	        .contents .contactBox > .box_inner .contactPhoneBox > ul{}
			
	        .contents .contactBox > .box_inner .contactPhoneBox > ul > li{
				margin-bottom:28px;
			}
			
	        .contents .contactBox > .box_inner .contactPhoneBox > ul > li:last-child{
				margin-bottom:0;
			}
			
				.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul{}
				
				.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul > li{
					display:inline-block;
				}
				
				.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul > li:last-child{
					margin-left:20px;
				}
		
        .contents .contactBox ul.contactLinkBox{
            /* width: 40%; */
            width: 300px;
        }
            .contents .contactBox ul.contactLinkBox li{
                padding-bottom: 14px;
            }
            .contents .contactBox ul.contactLinkBox li:last-child{
                padding-bottom: 0;
            }
            .contents .contactBox ul.contactLinkBox li a:hover{
                filter:alpha(opacity=70);
                -moz-opacity: 0.7;
                opacity: 0.7;
            }
    /* --- //contactBox --- */

/*タグ一覧*/
.photogalleryTagListBox{
	width:920px;
	margin:0 auto;
}

	.photogalleryTagListBox > .box_header{
		font-size:1.4em;
		margin-bottom:30px;
	}
	
	.photogalleryTagListBox > .box_inner{
		width:920px;
		margin:0 auto;
	}

	.photogalleryTagListBox ul{
		display:flex;
		flex-wrap:wrap;
	}
	
	.photogalleryTagListBox ul li{
		padding:0 40px 40px 0;
		transition: .8s;
		transform: translate(0,60px); 
		-webkit-transform: translate(0,60px); 
		opacity:0;
	}
	
	.photogalleryTagListBox ul li.show{
		transform: translate(0,0); 
		-webkit-transform: translate(0,0);
		opacity:1;
	}

	.photogalleryTagListBox ul li:nth-child(4n){
		padding:0 0 40px 0;
	}
	
		.photogalleryTagListBox ul li a{
			display:block;
			position:relative;
		}
		
		.photogalleryTagListBox ul li a:before{
			content:"";
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:1;
			background:#000;
			opacity:0;
			transition:.5s all ease;
		}
		
		.photogalleryTagListBox ul li a:hover:before{
			opacity:0.4;
		}
		
			.photogalleryTagListBox ul li img{
				width:200px;
			}
			
	.mfp-content{
		text-align:center !important;
	}
			
	.large_img_box{
		background:#fff;
		display:inline-block;
		padding:10px;
		max-width:80%;
	}
	
		.large_img_box > .box_inner img{
			max-width:100%;
		}
	
		.large_img_box > .box_footer{
			margin-top:8px;
		}
		
			.large_img_box > .box_footer a{
				color:#111;
			}
			
			.large_img_box > .box_footer a:hover{
				text-decoration:underline;
			}
	
/*建物一覧*/
.photogalleryBldListBox{
	width:900px;
	margin:0 auto;
}

	.photogalleryBldListBox > .box_header{
		font-size:1.4em;
		border-bottom:1px dotted #aaa;
		padding:0 0 10px 10px;
		margin-bottom:30px;
	}
	
	.photogalleryBldListBox > .box_inner{
		width:880px;
		margin:0 auto;
	}

	.photogalleryBldListBox ul{
		display:flex;
		flex-wrap:wrap;
	}
	
	.photogalleryBldListBox ul li{
		padding:0 20px 20px 0;
	}
	
	/*
	.photogalleryBldListBox ul li:nth-child(4n){
		padding:0 0 20px 0;
	}
	*/
	
		.photogalleryBldListBox ul li a{
			display:block;
			background:#fff;
			width:180px;
			padding:10px;
			position:relative;
		}
		
		.photogalleryBldListBox ul li a::after,
		.photogalleryBldListBox ul li a::before{
			content: '';
			display: block;
			position: absolute;
			width: 20%;
			height: 20%;
			border: 2px solid;
			border-radius: 2px;
			transition: all 0.5s ease;
		}
		
		.photogalleryBldListBox ul li a img{
			transition: all 0.5s ease;
		}
		
		.photogalleryBldListBox ul li a::after{
			bottom: 0;
			right: 0;
			border-top-color: transparent;
			border-left-color: transparent;
			border-bottom-color: rgba(0,0,0,0.3);
			border-right-color: rgba(0,0,0,0.3);
		}

		.photogalleryBldListBox ul li a::before{
			top: 0;
			left: 0;
			border-bottom-color: transparent;
			border-right-color: transparent;
			border-top-color: rgba(0,0,0,0.3);
			border-left-color: rgba(0,0,0,0.3);
		}
		
			.photogalleryBldListBox ul li a:hover img{
				opacity:0.7;
			}

			.photogalleryBldListBox ul li a:hover:after,
			.photogalleryBldListBox ul li a:hover:before{
				width: 100%;
				height: 100%;
			}
			
			.photogalleryBldListBox ul li a:hover:after{
				border-bottom-color: rgba(166,37,15,0.5);
				border-right-color: rgba(166,37,15,0.5);
			}
			
			.photogalleryBldListBox ul li a:hover:before{
				border-top-color: rgba(166,37,15,0.5);
				border-left-color: rgba(166,37,15,0.5);
			}
		
		.photogalleryBldListBox ul li .bld_img{
			display:block;
			position:relative;
			z-index:0;
		}
		
		.photogalleryBldListBox ul li .bld_img img{
			width:180px;
		}
		
		.photogalleryBldListBox ul li .bld_name{
			display:block;
			color:#111;
			position:absolute;
			z-index:0;
			bottom:10px;
			left:10px;
			background:rgba(255,255,255,0.7);
			width:172px;
			padding:4px;
		}

/*詳細ページ*/
.photogalleryBox{
	width:920px;
	margin:0 auto 40px auto;
}

	.photogalleryBox > .box_header{
		margin-bottom:40px;
		display:flex;
	}
	
		.photogalleryBox > .box_header > .detail_title_txt{
			width:440px;
			margin-right:40px;
			position:relative;
		}
		
			.photogalleryBox > .box_header > .detail_title_txt h3{
				color:#9D0733;
				margin-bottom:30px;
				font-size:1.6em;
				position:relative;
			}
			
			.photogalleryBox > .box_header > .detail_title_txt ul{
				display:flex;
				font-size:1.3em;
				position:relative;
			}
			
			.photogalleryBox > .box_header > .detail_title_txt ul li{
				border-right:1px solid #555;
				padding:5px 15px;
			}
			
			.photogalleryBox > .box_header > .detail_title_txt ul li:last-child{
				border-right:none;
			}
			
			.photogalleryBox > .box_header > .detail_title_txt p{
				width:100%;
				position:absolute;
				left:0;
				bottom:0;
				padding:18px 0;
				text-align:center;
				border-top:1px dotted #000;
				border-bottom:1px dotted #000;
			}
		
		.photogalleryBox > .box_header > .detail_title_img{
			width:440px;
		}
	
	.photogalleryBox > .box_inner{}

	.photogalleryBox > .box_inner ul{
		display:flex;
		flex-wrap:wrap;
		width:860px;
		margin:0 auto;
	}
	
	.photogalleryBox > .box_inner ul li{
		padding:0 20px 20px 0;
	}
	
	.photogalleryBox > .box_inner ul li:nth-child(4n){
		padding:0 0 20px 0;
	}
	
	.photogalleryBox > .box_inner ul li a{
		display:block;
		position:relative;
	}
	
	.photogalleryBox > .box_inner ul li img{
		/*width:200px;*/
		max-height: 133px;
		position:relative;
		z-index:0;
	}
	
	.photogalleryBox > .box_inner ul li a:before{
		font-family: FontAwesome;
		content:"\f00e　拡大する";
		display:block;
		width:0;
		height:0;
		background:rgba(0,0,0,0.3);
		opacity:0;
		color:#fff;
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		transition:.5s all ease;
		text-align:center;
		box-sizing:border-box;
	}
	
	.photogalleryBox > .box_inner ul li a:hover:before{
		width:100%;
		height:100%;
		padding-top:33%;
		vertical-align:middle;
		line-height:100%;
		opacity:1;
	}
	
	.photogalleryBox > .box_footer ul{
		display:flex;
	}
	
		.photogalleryBox > .box_footer ul li{
			width:33%;
		}
		
		.photogalleryBox > .box_footer ul li a{
			display:block;
		}
		
		.photogalleryBox > .box_footer ul li.goto_prev a:before,
		.photogalleryBox > .box_footer ul li.goto_next a:before{
			font-size:2em;
			color:#BFBFBF;
		}
		
		.photogalleryBox > .box_footer ul li.goto_prev a:before{
			font-family: FontAwesome;
			content:"\f104";
		}
		
		.photogalleryBox > .box_footer ul li.goto_home{
			text-align:center;
			padding-top:0.5em;
		}
		
		.photogalleryBox > .box_footer ul li.goto_home a{
			color:#808080;
		}
		
		.photogalleryBox > .box_footer ul li.goto_next{
			text-align:right;
		}
		
		.photogalleryBox > .box_footer ul li.goto_next a:before{
			font-family: FontAwesome;
			content:"\f105";
		}
		
@media screen and (max-width: 1024px){
/*##### ipad #####*/
	.grid_container{
		width:815px;
	}
}


@media screen and (max-width:480px){
/*##### SP #####*/
	.content_title .content_title_img{
		background-size:contain;
		background-position:left center;
	}
	
	/*トップページ*/
	/*カテゴリ選択*/
	.category_box{
		margin-bottom:10px;
		padding:10px 6px;
		box-sizing:border-box;
	}
		
	.category_box > .box_inner{
		width:auto;
		flex-direction:column-reverse;
	}
	
		.btn_part_oc_wrapper{
			width:100%;
		}
		
			.btn_part_oc_wrapper .btn_part_oc span.lbl_heyabasho{
				height:auto;
			}
			
			.btn_part_oc_wrapper .btn_part_oc span.icon_heyabasho{
				font-size:1.4em;
			}
		
			.btn_part_oc_wrapper .btn_part_oc span.lbl_heyabasho .sp,
			.btn_part_oc_wrapper .btn_part_oc span.icon_heyabasho .sp{
				display:inline-block;
				color:#9D0733;
			}
			
			.btn_part_oc_wrapper .btn_part_oc span.lbl_heyabasho img,
			.btn_part_oc_wrapper .btn_part_oc span.icon_heyabasho img{
				display:none;
			}
		
		.btn_part_oc_wrapper .btn_part_oc.open{
			transform: translateY(0);
		}
		
		.category_nav_wrapper{
			width:100%;
		}
	
		.category_nav_wrapper .house_type{
			/*flex-wrap:wrap;*/
			width:auto;
			box-sizing:border-box;
		}
		
		.is-fixed .category_nav_wrapper .house_type{
			padding-right:3em;
		}
		
		.category_nav_wrapper .house_type li{
			width:20%;
			box-sizing:border-box;
			margin-bottom:0;
			padding:0 2px;
		}
		
		.category_nav_wrapper .house_type li span,
		.category_nav_wrapper .house_type li a{
			font-size:3.2vw;
		}
		
		.category_nav_wrapper .house_part{
			padding:0;
			width:auto;
			margin:10px 5px 0 5px;
		}
		
		.category_nav_wrapper .house_part li{
			padding:0 20px 0 10px;
		}
		
	/*グリッド表示*/
	.grid_container{
		width:100%;
	}
	
	.grid_container ul{
		margin:0 auto;
		/*
		display:flex;
		flex-wrap:wrap;
		*/
	}
	
	.grid_container ul li.x1{
		width:110px;
		height:70px;
	}
	
	.grid_container ul li.x2{
		width:225px;
		height:145px;
	}
	
	/*バナーは絶対小サイズ*/
	.grid_container ul li.x1.bn,
	.grid_container ul li.x2.bn{
		width:110px;
		height:70px;
	}
		
	/*contactBox*/
	.contents .contactBox{
		width:auto;
	}
	
	.contents .contactBox h3{
		padding-bottom:20px;
	}
	
	.contents .contactBox > .box_inner{
		width:auto;
	}
	
	.contents .contactBox > .box_inner .contactPhoneBox p{
		font-size:1.1em;
		line-height:1.4em;
		margin-bottom:10px;
	}
	
	.contents .contactBox > .box_inner .contactPhoneBox > ul{
		text-align:center;
	}
	
	.contents .contactBox > .box_inner .contactPhoneBox > ul > li{
		margin-bottom:20px;
	}
	
	.contents .contactBox > .box_inner .contactPhoneBox > ul > li > ul > li:last-child{
		margin:5px 0 0 0;
	}
	
	.contents .contactBox ul.contactLinkBox{
		width:100%;
		text-align:center;
		margin-top:20px;
	}

	/*タグ一覧*/
	.photogalleryTagListBox{
		width:100%;
		margin-top:20px;
	}
	
	.photogalleryTagListBox > .box_inner{
		width:100%;
	}
	
	.photogalleryTagListBox ul li{
		width:50%;
		box-sizing:border-box;
		padding:0 10px 20px 10px;
	}
	
	.photogalleryTagListBox ul li:nth-child(4n){
		padding:0 10px 10px 10px;
	}
	
	.photogalleryTagListBox ul li img{
		max-width:100%;
		height:auto;
	}
	
	/*詳細ページ*/
	.photogalleryBox{
		width:auto;
	}
	
	.photogalleryBox > .box_header{
		display:block;
	}
	
	.photogalleryBox > .box_header > .detail_title_txt{
		width:auto;
		margin:0 0 20px 0;
	}
	
		.photogalleryBox > .box_header > .detail_title_txt h3{
			margin-bottom:10px;
		}
	
		.photogalleryBox > .box_header > .detail_title_txt ul{
			font-size:1.1em;
			justify-content: center;
			margin-bottom:10px;
		}

	.photogalleryBox > .box_header > .detail_title_txt p{
		padding:8px 0;
		position:relative;
		font-size:0.9em;
		text-align:left;
	}
	
	.photogalleryBox > .box_header > .detail_title_img{
		width:auto;
	}
	
		.photogalleryBox > .box_header > .detail_title_img img{
			max-width:100%;
			height:auto;
		}
		
	.photogalleryBox > .box_inner ul{
		width:auto;
	}
		
	.photogalleryBox > .box_inner ul li {
		width:50%;
		box-sizing:border-box;
		padding:0 5px 10px 5px;
	}
	
	.photogalleryBox > .box_inner ul li:nth-child(4n){
		padding:0 5px 10px 5px;
	}
	
		.photogalleryBox > .box_inner ul li img{
			max-width:100%;
			height:auto;
		}

}