@charset "utf-8";

/*
body.architect, body.case{
	background-color:#e6e6e6;
}*/


/* Gutenberg */

.wp-block-image{
	margin:0 !important;
}


.architect header img, .case header img{
	padding-left:15px;
}


.architect .articleFrame .outerFrame, .case .articleFrame .outerFrame{
	background-color:#fafafa;
	border-top:#d2d921 5px solid;
	border-radius:3px;
	box-shadow:0 3px 10px rgba(0,0,0,0.5);
}



/*バナー*/
.architect .submenuFrame img, .case .submenuFrame img{
	transition:.5s;
}

.architect .submenuFrame img:hover, .case .submenuFrame img:hover{
	opacity:0.5;
}



/* ブログリンク */

.detail .passedBlog{
	margin:20px auto;
}

.detail .passedBlog img{
	border:1px #333 solid;
}

/*ランキング

.architect .lanking, .case .lanking{
	width:450px;
	margin:0 auto;
	padding:15px 0;
}

.architect .lanking a, .case .lanking a{
	display:block;
	text-decoration:none;
}

.architect .lanking a > div, .case .lanking a > div{
	display:table;
}

.architect .lanking a > div > div, .architect .lanking a > div > p{
	display:table-cell;
	vertical-align:middle;
}

.case .lanking a > div > div, .case .lanking a > div > p{
	display:table-cell;
	vertical-align:middle;
}

.architect .lanking a > div > p, .case .lanking a > div > p{
	text-decoration:underline;
	color:#e95a24;
	line-height:1.4em;
	padding-left:15px;
	font-size:12px;
}

.architect .lanking a .clickbtn, .case .lanking a .clickbtn{
	text-align:center;
	width:100px;
	margin:0 auto;
}

.architect .lanking div.clickbtn .face, .case .lanking div.clickbtn .face{
	display:inline-block;
	width:100px;
	padding:10px 0;
	text-align:center;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	border-radius:2px;
	font-family:Century Gothic;
	letter-spacing:2px;
	position:relative;
	z-index:2;
	transition:0.5s;
}

.architect .lanking div.clickbtn .depth, .case .lanking div.clickbtn .depth{
	width:100px;
	height:12px;
	border-radius:2px;
	position:relative;top:-3px;	
	z-index:1;
	transition:0.5s;
}

.architect .lanking a .clickbtn p, .case .lanking a .clickbtn p{
	font-family:Century Gothic;
	font-size:9px;
	font-weight:bold;
	text-decoration:none;
	color:#000;
}
*/

.architect .lanking, .case .lanking{
	width:450px;
	margin:0 auto;
	padding:15px 0;
}

.architect .lanking a, .case .lanking a{
	display:block;
	text-decoration:none;
}

/*.architect .lanking a > div, .case .lanking a > div{
	display:table;
}

.architect .lanking a > div > div, .architect .lanking a > div > p{
	display:table-cell;
	vertical-align:middle;
}

.case .lanking a > div > div, .case .lanking a > div > p{
	display:table-cell;
	vertical-align:middle;
}*/

.architect .lanking a > div > div, .architect .lanking a > div > p{
	margin-top:15px;
}

.case .lanking a > div > div, .case .lanking a > div > p{
	margin-top:15px;
}

.architect .lanking a > div > p, .case .lanking a > div > p{
	text-decoration:underline;
	color:#e95a24;
	line-height:1.4em;
	padding-left:15px;
	font-size:12px;
}

.architect .lanking a .clickbtn, .case .lanking a .clickbtn{
	text-align:center;
	width:400px;
	margin:0 auto;
}

.architect .lanking div.clickbtn .face, .case .lanking div.clickbtn .face{
	display:inline-block;
	width:400px;
	padding:10px 0;
	text-align:center;
	color:#fff;
	font-size:18px;
	font-weight:bold;
	border-radius:2px;
	font-family:Century Gothic;
	letter-spacing:2px;
	position:relative;
	z-index:2;
	transition:0.5s;
}

.architect .lanking div.clickbtn .depth, .case .lanking div.clickbtn .depth{
	width:400px;
	height:12px;
	border-radius:2px;
	position:relative;top:-3px;	
	z-index:1;
	transition:0.5s;
}

.architect .lanking a .clickbtn p, .case .lanking a .clickbtn p{
	font-family:Century Gothic;
	font-size:9px;
	font-weight:bold;
	text-decoration:none;
	color:#000;
}




/* 設計士ブログの色 */

.architect .lanking div.clickbtn .face{
	background-color:#d1d821;
}

.architect .lanking div.clickbtn:hover .face{
	top:5px;
	background-color:#d9de4c;
}

.architect .lanking div.clickbtn .depth{
	background-color:#c0c71e;
}

.architect .lanking div.clickbtn:hover .depth{
	background-color:#cbd14a;
}


/* 密着ブログの色 */

.case .lanking div.clickbtn .face{
	background-color:#f3a83b;
}

.case .lanking div.clickbtn:hover .face{
	top:5px;
	background-color:#f4b861;
}

.case .lanking div.clickbtn .depth{
	background-color:#de9936;
}

.case .lanking div.clickbtn:hover .depth{
	background-color:#e3ac5d;
}


/*施工例リンク*/
.architect .worksLink, .case .worksLink{
	width:450px;
	margin:0 auto;
	padding:30px 0;
	font-size:12px;
}

.architect .worksLink ul li, .case .worksLink ul li{
	float:left;
	width:150px;
}

.architect .worksLink a img, .case .worksLink a img{
	transition:0.5s;
}

.architect .worksLink a:hover img, .case .worksLink a:hover img{
	opacity:0.7;
}


.prof{
	background-color:#fff;
	border-radius:5px;	
	margin-top:30px;
	border:3px #ddd solid;
}

.prof .innerFrame{
	padding:20px;
}

.prof .innerFrame h2{
	padding:10px 0;
	text-align:center;
	font-weight:bold;
	border-bottom:3px #c0c0c0 solid;
	margin-bottom:10px;
}

.prof .innerFrame p{
	margin-top:15px;
}


/* 密着ブログ独自の扱い */


.case .articleFrame .outerFrame{
	border-top:#f4a93b 5px solid;
 }

.architect nav h1, .case nav h1{
	padding: 30px 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
}

.architect nav h1 a, .case nav h1 a{
	font-size:20px;
	color:#000;
	text-decoration:none;
}

.architect nav h1 small, .case nav h1 small{
	font-size:12px;
	display:block;
	margin-top:10px;
	color:#999;
}

.detail .introduction{
	margin-top:30px;
	border:3px #ddd solid;
}

.list .introduction{
	border:3px #ddd solid;
}


.case .introduction h2{
	padding:10px 0;
	text-align:center;
	font-weight:bold;
	border-bottom:3px #c0c0c0 solid;
	margin-bottom:10px;
}

.case .introduction .innerFrame{
	background-color:#fff;
	border-radius:5px;
	padding:15px 20px;
}

.case .introduction p{
	line-height:2em;
	color:#555;
}

/* visible hidden */

.visible-md{
	display:none;
	visibility:hidden;
}



@media screen and (min-width:1421px){
	.architect header img, .case header img{
		padding:0;
	}
	
}



@media screen and (max-width:1420px) and (min-width:1050px){
	.architect .articleFrame .outerFrame, .case .articleFrame .outerFrame{
		margin-right:30px;
	}

	.visible-md{
		display:block;
		visibility:visible;
	}

	.hidden-md{
		display:none;
		visibility:hidden;
	}
	
}


@media screen and (max-width:1049px) and (min-width:800px){

}

@media screen and (max-width:1049px){
.case .submenuFrame .bnr ul{
	width:100%;
}
.case .submenuFrame .bnr li{
	float:left;
	width:50%;
	text-align:center;
}
	
}


@media screen and (max-width:799px){
	.architect .articleFrame .outerFrame, .case .articleFrame .outerFrame{
		box-shadow:none;
	}
	
	.case nav h1{
		padding-left:15px;
	}

}


@media screen and (max-width:599px){
.case .submenuFrame .bnr li{
	float:none;
	width:100%;
}
}


@media screen and (max-width:499px){	

.architect .lanking, .case .lanking{
	width:100%;
}

.architect .lanking a > div, .architect .lanking a > div > div, .architect .lanking a > div > p{
	display:block;
	width:100%;
	text-align:center;
}

.case .lanking a > div, .case .lanking a > div > div, .case .lanking a > div > p{
	display:block;
	width:100%;
	text-align:center;
}


.architect .worksLink, .case .worksLink{
	width:100%;
}

.architect .worksLink ul li, .case .worksLink ul li{
	float:left;
	width:33.3333333333333%;
}

.architect .lanking a .clickbtn, .case .lanking a .clickbtn{
	width:250px;
}

.architect .lanking div.clickbtn .face, .case .lanking div.clickbtn .face{
	width:250px;
}

.architect .lanking div.clickbtn .depth, .case .lanking div.clickbtn .depth{
	width:250px;
}



}

@media screen and (max-width:430px){
	
}