@charset "utf-8";
/* -----------------------------------------------------------------
	toppage css Document
	@subpackage aircycle_tmpl
	株式会社仙台エアサイクル住建 様　toppage.css
 ----------------------------------------------------------------- */

/* スライダーエリア（slick.js 使用）
----------------------------------------------------------------- */
.slider-images-area {
	margin-top:1.5%;
	position:relative;
}
.slider-imagesbox {
	position:relative;
	text-align:center;
}
.slider-imagesbox img {
	width:100%;
	height:auto;
}
.slider-images .slick-slide:not(.slick-center):before {
	background: url(images/frame-bg.png);
	position:absolute;
	margin:0;
    content:" ";
    display:inline-block;
    background-size:contain;
	top: 0;
	right: 0;
	bottom:0;
	left:0;
}
/* スライド部分 キャッチコピー画像 */
.slider-images-area .catch img {
	width: 70%;
	margin:auto;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
}

/* トップバナーエリア
----------------------------------------------------------------- */
ul.top-banner-box {
	margin:0 0 6% 0;
	padding:0;
	list-style:none;
	display:flex;
}
ul.top-banner-box li.first,
ul.top-banner-box li.third {
	margin:0;
	padding:0;
	width:37.5%;
}
ul.top-banner-box li.second {
	margin:0 1.5625%;
	width:21.875%;
}
/* トップバナーエリア内 スライド */
.top-banner-slider img {
	border-radius:10px;
}

/* レイアウト 横4件並び用 BLOG
----------------------------------------------------------------- */
ul.four-blef-box-blog {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.four-blef-box-blog li {
	margin:0 1% 1%;
	padding:0;
	width:22.5%;
	border-left:solid 1px #c9caca;
	border-right:solid 1px #c9caca;
	border-bottom:solid 1px #c9caca;
	border-top:solid 5px #a84f25;
	background-color:#fff;
}

/* レイアウト 横5件並び用 BLOG
----------------------------------------------------------------- */
ul.five-blef-box {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.five-blef-box li {
	margin:0 1% 1%;
	padding:0;
	width:18%;
}

ul.five-blef-box-blog {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.five-blef-box-blog li {
	margin:0 1% 1%;
	padding:0;
	width:18%;
	border-left:solid 1px #c9caca;
	border-right:solid 1px #c9caca;
	border-bottom:solid 1px #c9caca;
	border-top:solid 5px #a84f25;
	background-color:#fff;
}

/* 更新用 Works、Project、Voice等
----------------------------------------------------------------- */
.top-entry-box {
	margin:0;
	padding:3.0% 0;
}
.top-entry-box h2 {
	margin:1% 0 .5%;
	padding:0 0;
	text-align:center;
	vertical-align:bottom;
	font-family:"Maru Folk Medium";
	font-size:170%;
	color:#696969;
}
.top-entry-box h2 br {
	display: none;
}
.top-entry-box h3 {
	margin:-3 0 0.6% 0;
	padding:0.5% 0;
	text-align:center;
	font-family:'Maru Folk Medium';
	color:#f39800;
	font-size:115%;
}
.top-photo-box {
	margin-bottom:3.0%;
}
.top-photo-box img {
	/* border-radius:10px; */
}
.top-photo-box p {
	margin:1.5% 0;
	padding:0;
	font-size:95%;
	line-height:130%;
}
.top-photo-box p span {
	font-size:85%;
}
.top-photo-box a:link,
.top-photo-box a:visited {
	color:#696969;
}
.top-photo-box a:active,
.top-photo-box a:hover {
	text-decoration:underline;
}

/* house・renovation バッジ設定
----------------------------------------------------------------- */
.house-badge:after,
.renovation-badge:after {
	position:absolute;
	left:0;
	bottom:0;
	opacity:0.7;
	background-repeat:no-repeat;
	background-size: cover;
}
.house-badge:after {
	background-image:url(images/house-badge.svg);
}
.renovation-badge:after {
	background-image:url(images/renovation-badge.svg);
}

/* 更新履歴一覧
----------------------------------------------------------------- */
.top-news-box {
	margin:0 0 2%;
	padding:3%;
	border:solid 1px #c9caca;
	/* border-radius:6px; */
}
.top-news-box-blog {
	margin:0 0 6%;
	padding:3%;
	border:solid 1px #c9caca;
	/* border-radius:6px; */
}
h2.news-title {
	font-family:'新ゴ M','Shin Go Medium','Mplus 1p';
	position: relative;
	padding: .60em 1em .80em 1.5em;
	border: 1px solid #c9caca;
	font-size: 1.2rem;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.00, #dedede));
background: -webkit-linear-gradient(#dedede, #fff);
background: -moz-linear-gradient(#dedede, #fff);
background: -o-linear-gradient(#dedede, #fff);
background: -ms-linear-gradient(#dedede, #fff);
background: linear-gradient(#dedede, #fff);
	text-align:left;
}
h2.news-title::after {
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #f39800;
}
h2.news-title span {
	float: right;
}
.top-news-box ul {
	margin:0;
	padding:0;
	list-style:none;
	height:283px;
	overflow:auto;
}
.top-news-box ul li {
	margin:0 0 1.5%;
	padding:0.5% 1%;
	line-height:135%;
	color: #bd8c66;
	border-bottom:dashed 1px #c9caca;
}
.top-news-box ul li a {
	display:block;
}
.top-news-box ul li a:link,
.top-news-box ul li a:visited {
	color: #bd8c66;
}
.top-news-box ul li a:hover,
.top-news-box ul li a:active {
	margin:-2.0% -1% -0.5% -1%;
	padding:2.0% 1% 0.5% 1%;
	
	/* background-color:#f7e1d4; */
	/*text-decoration:underline; */
}
.top-news-box ul li span {
	margin-right:0;
	font-size:85%;	
}
/*
.top-news-box ul li a br {
	display:none;
}
*/
.top-news-box ul li span.info-mark {
	margin:0;
	padding:0;
	font-weight:bold;
	text-align:center;
}
.top-news-box .info-text {
	font-weight:bold;
	color: #4c4948;
}
.top-news-box .info-text::before {
	color: #dcdddd;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "\f0da";
	padding-right:5px;
}

/* 更新履歴一覧blog用追加
----------------------------------------------------------------- */
.top-news-box-blog ul {
	margin:0;
	padding:0;
	list-style:none;
	height:283px;
	overflow:auto;
}
.top-news-box-blog ul li {
	margin:0 0 1.5%;
	padding:0.5% 1%;
	line-height:135%;
	color: #bd8c66;
	border-bottom:dashed 1px #c9caca;
}
.top-news-box-blog ul li a {
	display:block;
}
.top-news-box-blog ul li a:link,
.top-news-box-blog ul li a:visited {
	color: #bd8c66;
}
.top-news-box-blog ul li a:hover,
.top-news-box-blog ul li a:active {
	margin:-2.0% -1% -0.5% -1%;
	padding:2.0% 1% 0.5% 1%;
	
	/* background-color:#f7e1d4; */
	/*text-decoration:underline; */
}
.top-news-box-blog ul li span {
	margin-right:0;
	font-size:85%;	
}
/*
.top-news-box-blog ul li a br {
	display:none;
}
*/
.top-news-box-blog ul li span.info-mark {
	margin:0;
	padding:0;
	font-weight:bold;
	text-align:center;
}
.top-news-box-blog .info-text {
	font-weight:bold;
	color: #4c4948;
}
.top-news-box-blog .info-text::before {
	color: #dcdddd;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "\f0da";
	padding-right:5px;
}

.top-news-thumbnail,
.top-news-thumbnail-trim {
	margin:0 1.5% 1.5%;
	padding:0;
	width: 65px;
	height: 65px;
	float:left;
}
.top-news-thumbnail-trim {
	position: relative;
	overflow: hidden;
}
.top-news-thumbnail-trim img {
	max-width: none !important;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


/* 無料相談会
----------------------------------------------------------------- */
.top-consultation {
	text-align:center;
}
.top-consultation img {
	width:100%;
	height:auto;
}

/* 社長あいさつ
----------------------------------------------------------------- */
.top-greeting {
	margin-bottom:6.5%;
}


/* Media-Query タブレット以下用
------------------------------------------------------------ */
@media only screen and (max-width: 1023px){
	/* スライダーエリア
	----------------------------------------------------------------- */
	.slider-images .slick-slide:not(.slick-center):after {
		content:none;
	}
}


/* Media-Query 1024px以上用
------------------------------------------------------------ */
@media only screen and (min-width: 1024px) {
}


/* Media-Query 640px以下用
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	/* スライダーエリア
	----------------------------------------------------------------- */
	.slider-images {
		margin-top:2%;
	}
	.slider-images .slick-slide:not(.slick-center):before {
		content:none;
	}
	.slider-images-area .catch img {
	width: 100%;
	}

	/* トップバナーエリア
	----------------------------------------------------------------- */
	ul.top-banner-box {
	}
	ul.top-banner-box li.first,
	ul.top-banner-box li.third {
		width:100%;
	}
	ul.top-banner-box li.first {
		margin-right:1.5%;
	}
	ul.top-banner-box li.third {
		margin-left:1.5%;
	}
	ul.top-banner-box li.second {
		display:none;
	}
	
	h2.news-title::after {
	background-color: transparent;
	}
	/* 更新用 Works、Project、Voice等
	----------------------------------------------------------------- */
	.top-entry-box {
		margin:0;
		padding:3.0% 0;
	}
	.top-entry-box h2 {
		margin:1% 0 0.5%;
		padding:0 0;
		font-size:120%;
	}
	.top-entry-box h2 br {
		display:block;
	}
	.top-entry-box h3 {
		margin:0 0 0.6% 0;
		padding:0.5% 0;
		font-size:95%;
	}
	/* 更新履歴一覧
	----------------------------------------------------------------- */
	.top-news-box ul {
		height:120px;
	}
	.top-news-box ul li {
		font-size:85%;
	}
	
	.top-news-box-blog ul {
		height:120px;
	}
	.top-news-box-blog ul li {
		font-size:85%;
	}

	/* レイアウト 横4件並び用
	----------------------------------------------------------------- */
	ul.four-blef-box-blog li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	ul.four-blef-box-blog li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	
	/* レイアウト 横5件並び用
	----------------------------------------------------------------- */
	
	ul.five-blef-box li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	ul.five-blef-box-blog li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	/*
	.top-news-box ul li a br {
		display:block;
	}
	*/
}