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

/*
streetview.html
#panorama
#gallery
#price
#flow
#etc
*/



/*================================================================================
	Google ストリートビュー
================================================================================*/
body { background:#fff; }

/* section
--------------------------------------------------------------------------------*/
section { padding:0; }
section h3 {
	color:#fff;
	background:url(../img/common/h3_line_w.png) no-repeat 50% 100%;
}
section h4 {
	color:#fff;
	text-align:center;
	line-height:160%;
}
section p {
	margin-bottom:50px;
	color:#fff;
	font-size:18px;
	text-align:center;
}
.area_panorama { margin-bottom:80px; }
/*.area_panorama iframe { width:100%; }*/
.area_panorama#street { width:100%; }


/* panorama
--------------------------------------------------------------------------------*/
#panorama { background-color:#0ca0d0; }
#panorama h4 { font-size:32px; margin-bottom:35px; }
#panorama li { color:#fff; text-align:center; }
#panorama p {
	width:100%;
	height:0;
	padding-top:280px;
	overflow:hidden;
	background:url(../img/streetview/img_streetview.png) no-repeat 50% 0;
	background-size:contain;
	position:absolute;
	top:340px;
	left:0;
}

/* gallery
--------------------------------------------------------------------------------*/
#gallery { background-color:#46b7db; }
#gallery li img { width:100%; height:auto; }

/* price
--------------------------------------------------------------------------------*/
#price { background-color:#0ca0d0; }
#price h4 { font-size:24px; margin-bottom:30px; }
#price p strong { font-size:36px; vertical-align:-20%; }
.box_price ul {
	margin-bottom:10px;
	padding-left:1em;
	list-style:outside;
	color:#fff;
}
.box_price h5 { color:#fff; font-size:16px; margin-bottom:20px; }
.box_price p { font-size:16px; font-weight:bold; }
.box_price p span { font-weight:normal; }
.box_price p strong { font-size:30px; }

/* flow
--------------------------------------------------------------------------------*/
#flow { background-color:#46b7db; }
#flow ol { margin-bottom:80px; }
#flow li {
	width:160px;
	height:0;
	padding-top:135px;
	overflow:hidden;
	float:left;
}
#flow li:nth-child(1) { background:url(../img/streetview/img_flow_01.png) no-repeat 0 0; }
#flow li:nth-child(2) { background:url(../img/streetview/img_flow_02.png) no-repeat 0 0; }
#flow li:nth-child(3) { background:url(../img/streetview/img_flow_03.png) no-repeat 0 0; }
#flow li:nth-child(4) { background:url(../img/streetview/img_flow_04.png) no-repeat 0 0; }
#flow li:nth-child(5) { background:url(../img/streetview/img_flow_05.png) no-repeat 0 0; }
#flow li:nth-child(6) { background:url(../img/streetview/img_flow_06.png) no-repeat 0 0; width:140px; }
#flow .link_box a {
	color:#0ca0d0;
	font-size:32px;
	letter-spacing:5px;
	background:#fff url(../img/common/icon_arrow_right.png) no-repeat 95% 50%;
}

/* etc
--------------------------------------------------------------------------------*/
#etc h4 {
	color:#333;
	font-size:24px;
	line-height:180%;
	margin-bottom:50px;
}
#etc img { margin:0 auto 40px; }
#etc img:nth-child(1) { margin-bottom:10px; }
#etc p {
	margin-bottom:40px;
	color:#0ca0d0;
	font-size:24px;
	font-weight:bold;
	line-height:180%;
}




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

/*.area_panorama iframe { height:710px; }*/
.area_panorama#street { height:710px; }
section { padding-top:80px; }

/* panorama
--------------------------------------------------------------------------------*/
#panorama { padding:130px 0 80px; }
#panorama li {
	margin-right:20px;
	padding-top:180px;
	width:300px;
	float:left;
}
#panorama li:nth-child(1) { background:url(../img/streetview/icon_search.png) no-repeat 50% 10px; }
#panorama li:nth-child(2) { background:url(../img/streetview/icon_web.png) no-repeat 50% 10px; }
#panorama li:nth-child(3) { background:url(../img/streetview/icon_mobile.png) no-repeat 50% 0; margin-right:0; }

/* gallery
--------------------------------------------------------------------------------*/
#gallery ul { width:100%; }
#gallery li { width:25%; float:left; }

/* price
--------------------------------------------------------------------------------*/
#price { padding-bottom:80px; }
#price p span {
	margin-right:30px;
	padding:10px 20px 7px;
	font-weight:bold;
	border:2px solid #fff;
}
#price p strong { vertical-align:-20%; }
#price img { display:none; }
.box_price { background:url(../img/streetview/img_snapshot.png) no-repeat 100% 100%; min-height:272px; }
.box_price li span { display:block; }
.box_price p { text-align:left; line-height:260%; }

/* flow
--------------------------------------------------------------------------------*/
#flow { padding-bottom:80px; }
#flow img { display:none; }
#flow .link_box { width:780px; }

/* etc
--------------------------------------------------------------------------------*/
#etc { padding-bottom:5px; }

}

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

#panorama,
#gallery,
#price,
#flow,
#etc { width:940px; }

}

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

/*.area_panorama iframe { height:780px; }*/
.area_panorama#street { height:700px; }
section { padding-top:50px; }
section p { margin-bottom:30px; }

/* panorama
--------------------------------------------------------------------------------*/
#panorama { padding:80px 0 40px; }
#panorama h4 { font-size:24px; }
#panorama h4 span { display:block; }
#panorama li { padding-top:160px; margin-bottom:40px; }
#panorama li:nth-child(1) { background:url(../img/streetview/icon_search_sp.png) no-repeat 50% 0; background-size:140px 140px; }
#panorama li:nth-child(2) { background:url(../img/streetview/icon_web_sp.png) no-repeat 50% 0; background-size:140px 140px; }
#panorama li:nth-child(3) { background:url(../img/streetview/icon_mobile_sp.png) no-repeat 50% 0; background-size:100px 170px; padding-top:190px; margin-bottom:0; }
#panorama p {
	padding-top:730px;
	background:url(../img/streetview/img_streetview_sp.png) no-repeat 50% 0;
	background-size:contain;
	top:200px;
}

/* gallery
--------------------------------------------------------------------------------*/
#gallery p { margin:0 20px 30px; }

/* price
--------------------------------------------------------------------------------*/
#price { padding-bottom:50px; }
#price h4 { font-size:24px; }
#price p { padding:20px 0; border:2px solid #fff; background-color:rgba(255,255,255,0.2); }
#price p strong { display:block; }
#price img { width:100%; height:auto; margin-bottom:20px; }
.box_price ul { padding-left:20px; }

/* flow
--------------------------------------------------------------------------------*/
#flow { padding-bottom:50px; }
#flow img { width:100%; height:auto; margin-bottom:40px; }
#flow .link_box a {
	font-size:20px;
	background:#fff url(../img/common/icon_arrow_right.png) no-repeat 95% 50%;
	background-size:10px 20px;
}
#flow .link_box a span { display:block; }

/* etc
--------------------------------------------------------------------------------*/
#etc h4 { margin-bottom:20px; font-size:18px; }
#etc p { font-size:16px; }
#etc img { width:100%; height:auto; }
#etc img:nth-child(3) { margin-bottom:30px; }

}


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


@media screen and (min-width: 640px) {

#gallery ul:nth-child(3) { display:none; }

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

#gallery ul:nth-child(4) { display:none; }
#flow ol { display:none; }

}