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

/*
casestudy.html
#machipano
#ecpano
#streetview
#case
*/



/*================================================================================
	Case Study 活用方法
================================================================================*/
body { background:#fff; }

/* section
--------------------------------------------------------------------------------*/
section {
	padding-top:20px;
	padding-bottom:30px;
}
.area_streetview { margin-bottom:40px; }
.area_streetview iframe { width:100%; }
section h4 { margin-bottom:25px; }
section h5 {
	margin-bottom:30px;
	color:#fff;
	font-size:18px;
}
section p {
	padding-bottom:20px;
	color:#fff;
}
.link_box { margin-bottom:100px; }
.link_box a { background-color:#f25935; }


/* case
--------------------------------------------------------------------------------*/
#case { padding:0; }
#case ul {
	margin-bottom:40px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	width:100%;
}
#case li {
	margin-bottom:20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
#case li img { width:100%; height:auto; }
#case p {
	width:100%;
	color:#0ca0d0;
	font-size:24px;
	font-weight:bold;
	text-align:center;
}
#case .link_box { margin-bottom:0; }
#case .link_box a { background-color:#0ca0d0; }


/*================================================================================
	Media screen : PC 640px
================================================================================*/
@media screen and (min-width: 640px) {

.area_streetview iframe { height:540px; }
section h4 {
	width:450px;
	height:0;
	padding-top:35px;
	overflow:hidden;
}
section h5 { width:450px; }
section p { width:450px; }
section h5 span { display:block; }


/* machipano
--------------------------------------------------------------------------------*/
#machipano { background:#83ba0d url(../img/casestudy/bg_machipano.png) no-repeat 95% 95%; }
#machipano h4 { background:url(../img/casestudy/title_machipano.png) no-repeat 0 0; }

/* ecpano
--------------------------------------------------------------------------------*/
#ecpano { background-color:#f25935; padding-bottom:50px; }
#ecpano .wrap { background:url(../img/casestudy/img_ecpano.png) no-repeat 100% 100%; }
#ecpano h4 { background:url(../img/casestudy/title_ecpano.png) no-repeat 0 0; }

/* streetview
--------------------------------------------------------------------------------*/
#streetview { background-color:#f25935; padding-top:0; padding-bottom:50px; margin-bottom:30px; }
#streetview .wrap { background:url(../img/casestudy/img_streetview.png) no-repeat 100% 100%; }
#streetview h4 { background:url(../img/casestudy/title_streetview.png) no-repeat 0 0; }

/* case
--------------------------------------------------------------------------------*/
#case ul { padding:0 10px; }
#case li {
	padding:0 10px;
	width:50%;
	float:left;
}

}

/*================================================================================
	Media screen : 横幅100%時の背景色ヌケ防止
================================================================================*/
@media screen and (min-width: 641px) and (max-width: 939px) {

#machipano,
#ecpano,
#streetview,
#case { width:980px;/*940px*/ }
footer { width:980px;/*940px*/ }
.wrap { padding:0 20px; }

}

/*================================================================================
	Media screen : SP 640px
================================================================================*/
@media screen and (max-width: 640px) {

section { padding-bottom:0; }
.area_streetview iframe { height:270px; }
section h5 { margin-bottom:20px; }
section img { width:100%; height:auto; }
section .disp_sp img { margin-bottom:20px; }

.link_box {
	margin-top:20px;
	padding:0 20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

/* machipano
--------------------------------------------------------------------------------*/
#machipano { background-color:#83ba0d; }

/* ecpano
--------------------------------------------------------------------------------*/
#ecpano { background-color:#f25935; }

/* streetview
--------------------------------------------------------------------------------*/
#streetview { background-color:#f25935; }

/* case
--------------------------------------------------------------------------------*/
#case h3 { font-size:22px; margin-bottom:30px; padding:0 20px 30px; }
#case .link_box { margin-top:0; }
#case ul { margin-bottom:40px; padding:0 20px; }
#case li { margin-bottom:10px; }
#case p {
	font-size:18px;
	padding:0 20px 10px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

}


/*================================================================================
	clearfix
================================================================================*/
#case ul:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* clearfix for ie7 */
#case ul {
	display: inline-block;
}
#case ul {
	display: block;
}