/*
inc-home.css
=================================================================
トップページの設定を表記
*/

@charset "utf-8";


/*
サイトの大枠フレーム設定（領域）
=================================================================
サイトを以下の大きく３ブロックに分割

* .main_visual
* .site_info
* .video
* .guide_banner
* goods_info
*/


/*
メインビジュアルの範囲設定 / .main_visual
=================================================================
*/

.main_visual {
	width: 940px;
	margin: 0 auto;
}

.main_visual img{
	width: 940px;
	margin: 0 auto;
	margin-bottom: 15px;
}


/*
イベントビジュアルの範囲設定 / .event_visual
=================================================================
*/

.event_visual {
	width: 940px;
	margin: 0 auto 15px auto;
}
.event_visual:after {
	content: ""; 
	display: block; 
	clear: both;
	zoom:1;
}
.event_visual .bnr_area_L {
	float: left;
}
.event_visual .bnr_area_R {
	float: right;
}
.event_visual a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";	
}


/*
大きいボックスの範囲設定 / .site_info
=================================================================
ボックスの中に含まれる子ボックスの内容
* 無料サービス８項目 /.box_freeservice
* お問い合わせから完成までの流れ /.box_workflow
* ごあいさつ /.box_message
*/

.site_info {
	width: 940px;
	height: 280px;
	margin: 0 auto;
	padding:0;
	margin-bottom: 18px;
	overflow: hidden;
}




/*子ボックスそれぞれの範囲設定 / .info_box
---------------------------------------------------------
*/
.info_box {
	width: 298px;
	height: 278px;
	float: left;
	margin-right: 20px;
	border: solid 1px #333;
	position: relative;
}

.info_box > a {
	display: block;
	position: relative;
	height: 278px;
}
.info_box a:hover {
	text-decoration: none;
}

.info_box dl dt {
	height: 28px;
	border-bottom: solid 1px #000;
	display: flex;
	justify-content: space-between;
	padding: 6px 4px 4px 10px;
	background: rgb(255,237,194);
	background: linear-gradient(0deg, rgba(255,237,194,1) 0%, rgba(255,249,225,1) 35%, rgba(255,252,240,1) 100%);
}

.info_box .btn_link {
	position: absolute;
	bottom: -1px;
	right: -1px;
}


.tit-jp {
	padding-left: 1.75%;
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.tit-en {
	font-size: 12px;
	padding: 1.75% 5% 0 0;
	color: #333;
}



/*ごあいさつボックス /.box_message
---------------------------------------------------------
*/

/* 背景色を指定 */
.box_message dl .box_bg {
	width: 289px;
	height: 230px;
	margin: 0 auto;
	margin-top: 5px;
	background-color: #fcf5e2;
}

/* 文字色、サイズの指定 */
.box_message dl dd {
	padding: 20px;
	font-size: 13px;
	color: #000;
}




/*無料サービスボックス /.box_freeservice
---------------------------------------------------------
*/
.box_freeservice{
	margin-right: -20px;
}




/*　会社案内ビデオ / .video
---------------------------------------------------------
*/
	
.video {
	width: 460px;
	height: 260px;
	float: left;
	margin-bottom: 37px;
	background-color: #F7FB75;

}

.video p{
	width: 150px;
	height: 30px;
	margin: 0 auto;
	padding-top: 100px;
}



/* バナーボックスの範囲指定
---------------------------------------------------------
ボックスの中にはバナーを４つ、２列２段で配置
*/
.guide_banner {
	width: 460px;
	height: 260px;
	float: right;
	margin-bottom: 37px;
}

.guide_banner ul{
	list-style: none;
	padding: 0;
	width: 480px;
	margin-right: -20px;
	overflow: hiddenn;
	_zoom: 1px;
}

/* バナーを横に並べる、枠線を指定する */
.guide_banner ul li {
	font-size: 0;
	display: inline-block;
	width: 218px;
	height: 118px;
	margin-right: 13px;
	margin-bottom: 20px;
	border: solid 1px #414141;
}


/* 施工事例
---------------------------------------------------------
ボックスの中にはバナーを４つ、２列２段で配置
*/

.insta_preview {
	background: url(../images/home/insta-bg.png);
	height: 945px;
	margin-bottom: 20px;
}
.insta_preview__inner {
	width: 940px;
	margin: 0 auto;
}
.insta_preview__header {
	text-align: center;
	padding-top: 46px;
}
.insta_preview__title {
	margin-left: 70px;
}
.insta_preview__subtitle {
	padding-top: 10px;
}

.insta_preview__body {
	padding-top: 40px;
}
.insta_preview__images {
	width: 860px;
	margin: 0 auto;
}
.insta_preview__image_list {
	list-style: none;
}
.insta_preview__image_list-li {
	float: left;
	margin: 0 30px 30px 0;
	box-shadow: 10px 10px 0 rgba(201, 140, 41, 0.8);
}

.insta_preview__footer {
	clear: both;
	padding-top: 20px;
	text-align: center;
}
a.insta_preview__link-btn {
	font-size: 24px;
	text-decoration: none;
	font-family:'メイリオ', 'Meiryo', sans-serif;
	font-weight: bold;
	color: #111;
	display: inline-block;
	background-color: #FFFB90;
	height: 70px;
	line-height: 70px;
	padding: 0 60px;
	border-radius: 70px;
	box-shadow: 10px 10px 0 rgba(201, 140, 41, 0.8);
}
a.insta_preview__link-btn:hover {
	opacity: 0.8;
}


/*
各種バナー
=================================================================
*/

.line-bnr {
	width: 940px;
	margin: 0 auto 15px auto;
}

.recommend-bnr {
	width: 940px;
	margin: 0 auto 15px auto;
}


/*
スマホ
=================================================================
*/


@media screen and (max-width:600px){
	.main_visual {
		width: 100%;
	}

	.main_visual img{
		width: 100%;
	}

	.event_visual {
		width: 95%;
		margin: 0 auto 1.5%;
		padding: 0;
	}

	.event_visual img{
		margin-bottom: 5%;
		width: 100%;
	}

	.event_visual .bnr_area_L,
	.event_visual .bnr_area_R {
		float: none
	}

	.site_info {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.info_box {
		height: 100%;
		margin: 0 auto;
		float: inherit;
		border: none;
	}

	.info_box > a {
		display: block;
		position: inherit;
		height: 100%;
	}

	.info_box dl dt{
		padding: 3% 3% 3% 5%;
		color: #333;
	}

	.tit-jp{
		font-size: 1.4em;
		font-weight: bold;
	}

	.tit-en {
		font-size: 1.1em;
	}

	.info_box .btn_link {
		border: 1px solid #333;
		position: inherit;
		background-color: #FFFBEB;
		margin: 0 0px -1px -2px;
	}

	.info_box .btn_link2{
		text-decoration: none;
		display: block;	
		color: #333;
		font-size: 1.1em;
		width: 100%;
		padding: 4% 0 3.5%;
		text-align: center;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
		position: inherit;
		background-color: #FFFBEB;
		margin: 0 0px -1px -2px;
	}
	.info_box .btn_link a{
		text-decoration: none;
		display: block;	
		color: #333;
		font-size: 1.1em;
		width: 100%;
		padding: 4% 0 3.5%;
		text-align: center;
	}

	.info_box .btn_link2:after,
	.info_box .btn_link a::after{
		content: "";
		width: 10px;
  		height: 10px;
  		border-top: 2px solid #333333;
  		border-right: 2px solid #333333;
  		transform: rotate(45deg);
		float: right;
		margin: 1.5% 5% 0 0;
	}

	.box_message {
		width: 100%;
		border-top: solid 1px #333;
	}

	.box_message dl .box_bg {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.box_message dl dd {
		font-size: 1em;
		line-height: 1.6;
		padding: 6.75%;
	}

	.box_workflow {
		width: 75%;
		margin: 5% auto;
		text-align: center;
	}
	.box_workflow img {
		margin: 0 auto;
		width: 100%;
		height: 100%;
		border: solid 1px #333;
	}
	.box_freeservice{
		width: 75%;
		margin: 0 auto 6.75%;
		border: solid 1px #333;
	}

	.box_freeservice dl dt {
		background: rgb(255,237,194);
		background: linear-gradient(0deg, rgba(255,237,194,1) 0%, rgba(255,249,225,1) 35%, rgba(255,252,240,1) 100%);
	}

	.box_freeservice #slider_freeservice .item img {
		width: 100%;
		height: 100%;
	}

	.video {
		position: relative;
		padding-bottom: 56.25%;
		width: 100%;
		float: inherit;
		height: 100%;
		margin-bottom: 6.75%;
	  }
	   
	  .video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.guide_banner {
		width: 95%;
		height: 95%;
		float: inherit;
		margin: 0 auto 4%;
	}
	
	.guide_banner ul{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.guide_banner ul li {
		display: block;
		width: 48%;
		height: 100%;
		margin: 0 auto 5%;
	}

	.guide_banner ul li img{
		width: 100%;
		height: 100%;
	}
	
	.insta_preview {
		background: url(../images/home/insta-bg.png);
		background-size: cover;
		height: auto;
		padding-bottom: 10%;
		margin-bottom: 6.75%;
	}
	.insta_preview__inner {
		width: 100%;
		margin: 0 auto;
	}
	.insta_preview__header {
		text-align: center;
		padding-top: 5%;
	}
	.insta_preview__title {
		margin: 0 auto;
		padding-left: 10%;
	}
	.insta_preview__title img{
		width: 100%;
	}
	.insta_preview__subtitle {
		padding-top: 2.5%;
	}
	.insta_preview__subtitle img{
		width: 40%;
	}
	.insta_preview__body {
		padding-top: 5%;
	}
	.insta_preview__images {
		width: 90%;
		margin: 0 auto;
	}
	.insta_preview__image_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.insta_preview__image_list-li {
		float: inherit;
		margin: 0 auto 5%;
		width: 40%;
	}
	.insta_preview__image_list-li img{
		width: 100%;
		height: 100%;
	}
	
	.insta_preview__footer {
		padding-top: 2.5%;
		text-align: center;
	}
	a.insta_preview__link-btn {
		font-size: 1.2em;
		width: 80%;
		height: auto;
		line-height: 1;
		padding: 4% 0;
		border-radius: 70px;
		box-shadow: 10px 10px 0 rgba(201, 140, 41, 0.8);
	}
	

	
	.line-bnr,
	.recommend-bnr {
		width: 95%;
		margin: 0 auto 5%;
	}

	.line-bnr {
		margin-bottom: 10%;
	}
}