@charset "UTF-8";

/*====================================================================================================
/sph/css2018/site.css
サイト全体共通のcss

====================================================================================================*/

html,
body{height:100%;}
body{font-family:'新ゴR', 'Droid Sans','HiraKakuProN-W3', Arial, Helvetica, sans-serif;font-size:100%;line-height:normal;}
input{padding:1px;}
#wrap {margin:0;padding:0;background-color:#FFF;}

/*==================================================
#header
==========*/
#header_wrap{width:100%;height:64px;}
#header{border-top:4px solid #303030/*--------------color--------------*/;padding:10px 0 0;}
#header #logo{line-height:1px;text-align:left;height:40px;margin:0 0 0 10px;}
#header #logo img{width: auto; height:40px;}
#header ul{position:absolute;text-align:right;top:9px;right:10px;}
#header li{line-height:1px;width:40px;text-align:center;margin:0 0 0 8px;float:right;}
#header li a{text-decoration:none;color:#FFF;display:block;height:40px;position:relative;background:#303030/*--------------color--------------*/ url(/sph/images/hd_btn_back.png) 0 0 no-repeat;
background-size:40px 40px;}
#header li a img{width: auto;height:20px;padding:4px 0 0;}
#header li a span{display:block;}
#header li a span img{padding:2px 0 0;width: auto;height:11px;}

/*ヘッダー固定パターン01【bh1】-通常デザイン
<div id="wrap" class="bh1">
<!--#include virtual="/sph/compo/header.html" -->
-----------------------------------------*/
.bh1 #header_wrap{position:static;top:0;left:0;background:rgba(255,255,255,1);z-index:200 !important;}
.bh1 #contents_{margin:0;position:relative;z-index:100 !important;}

/*ヘッダー固定パターン02【bh2】-2段デザイン
<div id="wrap" class="bh2">
<!--#include virtual="/sph/compo/header2.html" -->
-----------------------------------------*/
.bh2 #header_wrap{height:auto;}
.bh2 #header{height:48px;width:100%;top:0;left:0;padding:0;background:#303030/*--------------color--------------*/;border-top:none;z-index:99999;box-shadow:0 1px 0 #999;position: fixed!important;}
.bh2 #header ul{top:4px;right:4px;}
.bh2 #header li{margin:0 0 0 4px;}
.bh2 #header li a{background:#FFF;box-shadow:0 -1px 0 #999 inset;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
/*.bh2 #header li a#navi_btn1{-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;}*/
.bh2 #header .home{position:absolute;top:4px;left:10px;display:block;background: #ffffff;border-radius:3px;width: 40px;height: 40px;overflow: hidden;margin: 0;padding: 0;display: none;}
.bh2 #header .home img{width: auto;height:40px;}
.bh2 #header_wrap #header2{text-align:center;padding:10px 0;margin: 48px 0 0 ;}
.bh2 #header_wrap #header2 h1,
.bh2 #header_wrap #header2 #logo{text-align:center;margin:0 10px;line-height:1px;}
.bh2 #header_wrap #header2 h1 img,
.bh2 #header_wrap #header2 #logo img{width: auto;height: 30px;}
.bh2 #contents_{position:relative;}

/*==================================================
コンテンツ部分
==========*/
#contents_ .guide{text-align:center;background:#6d84a2;background: -moz-linear-gradient(top,  rgba(176,188,205,1) 0%, rgba(109,132,162,1) 100%);background: -webkit-linear-gradient(top,  rgba(176,188,205,1) 0%,rgba(109,132,162,1) 100%);background: linear-gradient(to bottom,  rgba(176,188,205,1) 0%,rgba(109,132,162,1) 100%);height:40px;padding:0 4px 0 60px;overflow:hidden;position:relative;box-sizing:border-box;border-bottom: 1px solid #2d3642;border-top: 1px solid #cdd5df;}
body #contents_ .guide .title,
body #contents_ .guide .asp_page_title,
body #contents_ .guide h1.asp_page_title,
body #contents_ .guide h2.asp_page_title{font-size:16px;line-height:40px;font-weight:700;color:#FFF;text-align:center;text-shadow:rgba(0, 0, 0, 0.6) 0 -1px 0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#contents_ .guide span{background:url(/lib/images/asp_sp/common_images/back_btn.png) left center no-repeat;height:30px;width:50px;padding: 0 0 0 8px;box-sizing:border-box;position:absolute;left:4px;top:4px;}
#contents_ .guide span a {font-size:12px;line-height:30px;text-decoration:none;color:#FFF;text-shadow:rgba(0, 0, 0, 0.6) 0 -1px 0;}
/*トップページ用背景画像*/
body.toppage {padding: 0;margin: 0;}
body.toppage #wrap_ {padding: 0 0 80px;margin: 0;}
body #wrap_ {padding: 0 0 45px;margin: 0;}

body #container_ {margin: 0;padding: 0;}
.toppage #contents_{}
.toppage #contents_ .c_title{font-size:11px;line-height:25px;height:25px;text-align:left;padding:0 0 0 5px;text-shadow:2px 2px 3px #CCC;
/*For Old*/background:#DDD;/*For Old WebKit*/background:-webkit-linear-gradient(#F1F1F1 0%,#DDD 100%);/*For Modern Browser*/background:linear-gradient(#F1F1F1 0%,#DDD 100%);}

/*==================================================
フッター
<!--#include virtual="/sph/compo/footer.html" -->
==========*/
#footer{background:url(/sph/images/ft_back01.png) 0 0 repeat;margin:0;}
#footer .menu{background:#DDD;padding:1px 1px 0 0;text-align:left;}
#footer .menu li{width:50%;padding:0 0 1px;vertical-align:top;display:inline-block;}
#footer .menu li a{font-size:12px;line-height:35px;text-decoration:none;color:#000;height:35px;display:block;margin:0 0 0 1px;padding:0 0 0 8px;
/*For Old WebKit*/background:url(/sph/images/ft_ar01.png) right center no-repeat,-webkit-linear-gradient(#FFF 0%,#FFF 50%,#F0F0F0 100%);/*For Modern Browser*/background:url(/sph/images/ft_ar01.png) right center no-repeat,linear-gradient(#FFF 0%,#FFF 50%,#F0F0F0 100%);background-size:25px 25px,auto;}

#footer .menu2{background:#DDD;padding:1px 1px 0 0;text-align:left;}
#footer .menu2 li{width:50%;padding:0 0 1px;vertical-align:top;display:inline-block;}

#footer .menu2 li a{font-size:12px;line-height:35px;text-decoration:none;color:#000;height:35px;display:block;margin:0 0 0 1px;padding:0 0 0 8px;
/*For Old WebKit*/background:url(/sph/images/ft_ar01.png) right center no-repeat,-webkit-linear-gradient(#FFF 0%,#FFF 50%,#F0F0F0 100%);/*For Modern Browser*/background:url(/sph/images/ft_ar01.png) right center no-repeat,linear-gradient(#FFF 0%,#FFF 50%,#F0F0F0 100%);background-size:25px 25px,auto;}


#footer .media{width:280px;margin:20px auto;border:1px solid #888;}
#footer .media li{font-size:10px;line-height:28px;vertical-align:top;display:inline-block;width:50%;}
#footer .media li span{color:#FFF;background:#303030/*--------------color--------------*/ url(/sph/images/ft_ch01.png) 10px center no-repeat;}
#footer .media li a{text-decoration:none;color:#000;background:#FFF url(/sph/images/ft_ch02.png) 10px center no-repeat;}
#footer .media li span,
#footer .media li a{display:block;padding:0 0 0 15px;background-size:15px 15px;}
#footer .sns{padding:20px 0 0;}
#footer .sns li{vertical-align:top;display:inline-block;width:95px;padding:0 0 5px;}
#footer .sns li a{display:block;height:30px;width:90px;margin:0 auto;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
#footer .sns li a img{width: auto;height:100%;}
#footer .sns .b1 a{background:#FF9300;}/*blog*/
#footer .sns .b2 a{background:#00C9FF;}/*twitter*/
#footer .sns .b3 a{background:#375399;}/*facebook*/
#footer .sns .b4 a{background:#FC4111;}/*youtube*/
#footer .sns .b5 a{background:#000;}/*google+*/
#footer .sns .b6 a{background:#00C826;}/*line*/
#footer .tell_inq{margin:0;padding:15px 0;background:#303030/*--------------color--------------*/;}
#footer .tell_inq .tel_main{text-decoration:inherit;display:block;width:280px;margin:0 auto;padding:15px 0;text-align:center;border:1px solid #DDD;
/*For Old*/background:#FFF;
/*For Old WebKit*/background:-webkit-linear-gradient(#FFF 0%,#FFF 50%,#DDD 100%);
/*For Modern Browser*/background:linear-gradient(#FFF 0%,#FFF 50%,#DDD 100%);
/*css3*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
/*css3*/box-shadow:0 0 2px #444;}
#footer .tell_inq .tel_main p{font-size:17px;line-height:25px;color:#303030/*--------------color--------------*/;font-weight:700;padding:5px 5px 0 40px;text-align:left;vertical-align:top;display:inline-block;background:url(/sph/images/tell_inq_ar1.png) 0 center no-repeat;background-size:40px 40px;}

/*フッター番号表示パターン（参考値-都度調整して下さい）
<!--#include virtual="/sph/compo/footer2.html" -->
#footer .tell_inq .tel_main p{font-size:20px;}
-----------------------------------------*/
#footer .tell_inq .tel_main p span{font-size:14px;}

#footer .tell_inq .tel_cap{font-size:12px;line-height:20px;color:#FFF;padding:10px 0 0;}
#footer .tell_inq .tel_cap + .tel_cap{padding:0;}
#footer .cr{font-size:10px;line-height:30px;border-top:1px solid #FFF;}
#footer .retop{padding:15px 0 0;}
#footer .retop a{font-size:10px;line-height:15px;color:#000;text-decoration:none;padding:20px 0 10px;display:block;
/*For Old WebKit*/background:url(/sph/images/ft_retop.png) center 0 no-repeat,-webkit-linear-gradient(#FFF 0%,#FFF 50%,#F0F0F0 100%);/*For Modern Browser*/background:url(/sph/images/ft_retop.png) center 0 no-repeat,linear-gradient(#FFF 0%,#FFF 50%,#F0F0F0 100%);background-size:35px 20px,auto;}

.shop_banner {background: #ffffff;padding: 5% 0 5% 5%;}
.shop_banner p {font-size: 14px;line-height: 24px; font-weight: 700;}
.shop_banner dl {width: 100%;padding: 2% 0 0;}
.shop_banner dl dt {width: 30%;display: inline-block;vertical-align: middle;margin: 0 5% 0 0;}
.shop_banner dl dt img {width: 100%;height: auto;}
.shop_banner dl dd { width: 65%;display: inline-block;vertical-align: middle;font-size: 16px;line-height: 20px;text-align: left;background-image: url(/sph/images/btn1.png)!important;background-position: right center;background-repeat: no-repeat;}
.shop_banner dl dd span {font-size: 12px;display: block;}


#ssl {padding: 10px 0;background: #ffffff;}

/*==================================================
ドロワーメニュー
==========*/
#slide_in_wrap{position:fixed;z-index:1000;width:100%;height:100%;top:0;left:0;overflow-x:hidden;display:none;}
#slide_in_body{}
#slide_in_body_inner{height:100%;position:relative;background:rgba(0, 0, 0, 0.5);text-align:right;margin: 49px 0 0;}
#slide_in_body_inner .close{position:fixed;z-index:150;right:210px;top:10px;width:40px;height:40px;text-align:center;}
#slide_in_body_inner .close a{display:block;background:url(/sph/images/snavi_btn01.png) 0 0 no-repeat;background-size:40px 40px;height:40px;margin: 49px 0 0;}
#slide_in_body_inner .close a img{width:20px;height: auto; padding:10px 0 0;}
#slide_in_content{position:relative;z-index:100;width:200px;margin:0 0 45px auto;background:#FFF;text-align:left;}
#slide_in_content .sl_contents{}
#slide_in_content .sl_contents dt{font-size:10px;line-height:15px;color:#FFF;padding:5px 5px 5px 10px;background:#303030/*--------------color--------------*/ url(/sph/images/snavi_tback.png) 0 0 repeat;}
#slide_in_content .sl_contents dd{font-size:15px;line-height:30px;border-bottom:1px solid #DDD;}
#slide_in_content .sl_contents dd a{text-decoration:none;color:#000;display:block;padding:10px;background:url(/sph/images/snavi_ar01.png) 97% center no-repeat;background-size:15px 20px;}
#slide_in_content .close2{font-size:11px;line-height:40px;color:#FFF;background:#888;}
#slide_in_content .close2 a{color:#FFF;text-decoration:none;display:block;padding:0 0 0 10px;background:url(/sph/images/snavi_btn02.png) 96% center no-repeat;background-size:20px 20px;}

/*==================================================
modal_window用
==========*/
body{position:relative;width:100%;height:100%;}
#m_window{width:100%;height:100%;text-align:center;display:none;position: fixed;top:0;z-index:100000;cursor:pointer;}
#m_window .bkg{position:absolute;top:0;left:0;	width:100%;height:100%;background-color:rgba(0,0,0,0.75);z-index:10010;cursor:pointer;}
#m_window .m_inner {width: 100%;margin:10px auto 0 auto;margin-bottom: 20px;text-align: center;position:relative;z-index:10020;}
#m_window .m_inner iframe{margin:10px auto;background-color:transparent;width:100%;height:100%;overflow:auto;border:none;}

/*==================================================
.to_pagetop
ex.  <div class="to_pagetop"><a href="">Page Top</a></div>
==========*/
.to_pagetop{top:0;right:0;position:relative;height:24px;padding:2px 0 0;}
.to_pagetop a{font-size:12px;line-height:150%;background-color:#FFF;border:1px solid #999;display:block;color:#999;text-decoration:none;margin-right:1px;margin-bottom:1px;position:absolute;top:0;right:0;padding:2px;}

/*==============================================================================================================
変更箇所
==============================================================================================================*/
/*物件一覧の会員物件用*/
#list .box_member {
line-height:0px;
}
#list .box_member img {
width:100%;height: auto;
}

.backgraund {width: 100%;margin: 0;padding:4% 0 0;background: #f5f5f5;}
.backgraund ul.icons {margin: 0 3% 0 2%;}
.backgraund ul.icons li {width: 20%;margin: 0 2% 4% 3%;display: inline-block;font-size: 10px;vertical-align: top;}

.backgraund ul.icons li .icon {width: 100%;height: auto;
border-radius: 6px 6px 6px 6px;        /* CSS3草案 */  
-webkit-border-radius: 6px 6px 6px 6px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 6px 6px 6px 6px;   /* Firefox用 */
overflow: hidden;
margin: 0 0 6%;
-webkit-box-shadow: 0 0 5px 0 #333; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 5px 0 #333; /* Firefox用 */
  box-shadow: 0 0 5px 0 #333; /* CSS3 */
  }
.backgraund ul.icons li .icon img {width: 100%;height: auto;vertical-align: bottom;}



#type_a {background-image: url(../images/type_a.jpg);
background-size: cover;
color: #ffffff;}
#type_b {background-image: url(../images/type_b.jpg);
background-size: cover;
color: #000000;}

.sns {text-align: center;}
.sns ul {
text-align: center;
}
.sns ul li {width: 18%;margin: 0 2% 2%;display: inline-block;}
.sns ul li img {width: 100%;height: auto;}

#scroll {
position: fixed;
bottom: 0;
left: 0;
display: none;width: 100%;
z-index: 999999;
}
#scroll #btnback {
width: 100%;
height: 76px;
width: 100%;
background: #ffe747;
position: relative;
}
#scroll #btnback #btnposition {height: 84px;width: 100%; position: absolute;left: 0;bottom: 0;text-align: center;display: block;}
#scroll #btnback #btnposition img {width: auto;height: 84px;}

#scroll #btnback2 {
width: 100%;
height: 45px;
width: 100%;
background: #ffe747;
position: relative;
}
#scroll #btnback2 #btnposition2 {height: 54px;width: 100%; position: absolute;left: 0;bottom: 0;text-align: center;display: block;}
#scroll #btnback2 #btnposition2 img {width: auto;height: 54px;}

#contents_ .asp_topic_path{overflow:hidden;}
#contents_ .asp_topic_path:after{content:"";display:block;background:-moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));background:linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));height:5px;width:100%;position:absolute;left:0;top:0;z-index:3;}
#contents_ .asp_topic_path ol{text-align:left;background-color:#003092/*--------------color--------------*/;margin:0;padding:0;list-style:none;-webkit-overflow-scrolling:touch;overflow:auto;white-space:nowrap;}
#contents_ .asp_topic_path ol li{font-size:11px;line-height:28px;color:#FFF;display:inline-block;vertical-align:top;height:28px;}
#contents_ .asp_topic_path ol li a{color:#FFF;display:block;padding:0 22px 0 8px;text-decoration:none;background-color:rgba(255, 255, 255, 0.2);position:relative;overflow:hidden;}
#contents_ .asp_topic_path ol li a:after {content:"";display:block;width:28px;height:28px;border-top:solid 1px rgba(255, 255, 255, 0.6);border-right:solid 1px rgba(255, 255, 255, 0.6);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;right:7px;top:0;}
#contents_ .asp_topic_path ol li:last-child{padding:0 15px 0 10px;position:relative;z-index:1;}
#contents_ .asp_topic_path ol li:last-child:before{content:"";vertical-align:top;display:block;width:0;height:0;border-top:solid 14px #003092/*--------------color--------------*/;border-right:solid 14px #003092/*--------------color--------------*/;border-bottom:solid 14px #003092/*--------------color--------------*/;border-left:solid 14px transparent;position:absolute;left:-14px;top:0;z-index:-1;}
#contents_ .asp_page_title_box{text-align:left;margin-bottom:15px;padding:13px 10px;border-bottom:1px solid #DDD;}
#contents_ .asp_page_title_box .asp_page_title{font-size:18px;line-height: 1.3;font-weight:700;vertical-align: baseline;display:inline-block;margin:0 4px 0 0;}

.measures {width: 100%;text-align: center;margin: 0;}
.measures img {width: 100%;height: auto;vertical-align: bottom;}
.transfer {width: 100%;text-align: center;margin: 0;}
.transfer img {width: 100%;height: auto;vertical-align: bottom;}

.sub_menu{width: 90%;margin: auto;padding: 5% 0 0;}
.sub_menu01,.sub_menu02,.sub_menu03 {
width: 100%;
margin: 0 0 5%;
box-sizing: border-box;
text-align: left;
position: relative;
box-sizing: border-box;
border: 1px solid #bbbcbc;
vertical-align: top;
}

.sub_menu01:before,.sub_menu02:before,.sub_menu03:before {
content: "";
position: absolute;
left: -5px;
top: -5px;
width: 64px;
height: 64px;
margin: 0;
background: url(/sph/images/sprite.png) no-repeat;}

.sub_menu dl {padding: 5%;}

.sub_menu dl dt {
position: relative;
border-bottom: 2px solid #d71d21;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
text-align: left;
width: 100%;
line-height: 50px;text-indent:55px;
height: 50px;
margin: 0 0 5%;}
.sub_menu dl dt a {color: #d71d21;text-decoration: none;}
.sub_menu dl dt a:hover {color: #d71d21;text-decoration: none;}

.sub_menu01 dl dt:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
margin: 0;
background: url(/sph/images/menu01.svg) no-repeat;}
.sub_menu02 dl dt:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
margin: 0;
background: url(/sph/images/menu02.svg) no-repeat;}
.sub_menu03 dl dt:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
margin: 0;
background: url(/sph/images/menu03.svg) no-repeat;}

.sub_menu dl dt:after{
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin: -3px 0 0 15px;
border-top: 2px solid #d71d21;
border-right: 2px solid #d71d21;
transform: rotate(45deg)!important;
vertical-align: middle;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}

.sub_menu dl dd {font-size: 12px;line-height: 1.4;}

.scroll-table table {
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

.sp_banner {width: 90%;margin: auto;padding: 5% 0 0;}
.sp_banner img {width: 100%;height: auto;vertical-align: bottom;}





.resultsmap {padding: 5% 0;}
#embed_map {
height: 960px;
max-width: 960px;
width: 90%;
display: block;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#embed_map {
height: 760px;
}
}





.spg {width: 80%;margin: auto;padding: 5% 0 0;}
.spg p{font-size: 12px;}
.spg img {width: 100%;height: auto;}