@charset "UTF-8";

#content {padding:20px 0 0;}
#content select::-ms-expand{display:none;}/* IE11 select 調整　*/
#content #main{width:860px;float:left;text-align:left;}
#content #list_side{width:200px;float:right;text-align:left;}

#main h1.main_title{font-size: 24px;line-height:1.2;font-weight: 700;text-align: left;color: #004D9E;border-bottom: solid 5px #004D9E;margin:0 0 20px;padding: 0 160px 15px 0;position: relative;}
#main h1.main_title::after{content: "";width: 140px;height: 76px;background-image: url("/images/shop/character_01@2x.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;position: absolute;bottom: -2px;right: 18px;}

#main .sub_title{font-size: 2em;font-weight: 700;line-height: 1em;color: #004D9E;margin: 40px 0 18px;padding: 16px 0 21px 16px;background-image: url("/images/shop/line_02@2x.png");-webkit-background-size: contain;background-size: contain;background-position: bottom;background-repeat: no-repeat;position: relative;}
#main .sub_title::before{content: "";width: 5px;height: 20px;background-color: #004D9E;position: absolute;top: 16px;left: 0;}
#main .sub_title::after{content: "";width: 110px;height: 62px;background-image: url("/images/shop/character_01@2x.png");-webkit-background-size: contain;background-size: contain;background-repeat: no-repeat;position: absolute;bottom: 6px;right: 0;}

.basic_com{ font-size:14px;line-height:20px;margin-bottom:20px;}

.pic_grid{ width: 860px;}
.pic_grid ul{ display: grid; display: -ms-grid;/*IE*/ gap: 0; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;/*IE*/ grid-template-rows: 130px 130px 130px; -ms-grid-rows: 130px 130px 130px;/*IE*/}
.pic_grid ul li{ overflow: hidden; width: 100%; height: 100%; position: relative; /*background-color: #e9e3d8;*/background-image: url('/images/common/loading_bar.gif');background-repeat: no-repeat;background-position: center, center;background-size: 64px 7px;background-color: rgba(233,227,216,0.75);background-blend-mode: lighten;}
.pic_grid ul li img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;display:none;}
.pic_grid ul li.pic_w img{width:100%;height:auto;}
.pic_grid ul li.pic_h img{width:auto;height:100%;}
.pic_grid ul li.pic_01{ grid-column: 1 / 2; grid-row: 1 / 3;}
.pic_grid ul li.pic_02{ grid-column: 2 / 3;}
.pic_grid ul li.pic_03{ grid-column: 3 / 4;}
.pic_grid ul li.pic_04{ grid-column: 4 / 5; grid-row: 1 / 3;}
.pic_grid ul li.pic_05{ grid-column: 5 / 6;}
.pic_grid ul li.pic_06{ grid-column: 1 / 2; grid-row: 3 / 4;}
.pic_grid ul li.pic_07{ grid-column: 2 / 4; grid-row: 2 / 4;}
.pic_grid ul li.pic_08{ grid-column: 4 / 5; grid-row: 3 / 4;}
.pic_grid ul li.pic_09{ grid-column: 5 / 6; grid-row: 2 / 4;}
.pic_grid ul li.pic_01{ -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-row-span: 2;}
.pic_grid ul li.pic_02{ -ms-grid-column: 2; -ms-grid-row: 1;}
.pic_grid ul li.pic_03{ -ms-grid-column: 3; -ms-grid-row: 1;}
.pic_grid ul li.pic_04{ -ms-grid-column: 4; -ms-grid-row: 1; -ms-grid-row-span: 2;}
.pic_grid ul li.pic_05{ -ms-grid-column: 5; -ms-grid-row: 1;}
.pic_grid ul li.pic_06{ -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-row-span: 4;}
.pic_grid ul li.pic_07{ -ms-grid-column: 2; -ms-grid-column-span: 2; -ms-grid-row: 2; -ms-grid-row-span: 4;}
.pic_grid ul li.pic_08{ -ms-grid-column: 4; -ms-grid-row: 3; -ms-grid-row-span: 4;}
.pic_grid ul li.pic_09{ -ms-grid-column: 5; -ms-grid-row: 2; -ms-grid-row-span: 4;}

.voice_total{ width: 100%; height: 70px; background-image:linear-gradient(-45deg, #ffeb82  25%, #ffe173 25%, #ffe173 50%, #ffeb82  50%, #ffeb82  75%, #ffe173 75%, #ffe173); background-size: 10px 10px; text-align: center; position: relative; margin-bottom: 20px;}
.voice_total p{ font-size: 2.4em; font-weight: 700; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.voice_total p span{ font-size: 1.4em;}

.family_question{ width: 100%; height: 245px; background-image: url(/images/shop/voice/family_illust.jpg); background-size: contain; background-repeat: no-repeat; position: relative; margin-bottom: 20px;}
.family_question ul li{ font-size: 14px; line-height: 17px; font-weight: 700; color: #004da0; text-align: center;}
.family_question ul li span{ display: block;}
.family_question ul li:nth-child(1){ position: absolute; bottom: 18px; left: 27px;}
.family_question ul li:nth-child(2){ position: absolute; bottom: 80px; left: 132px;}
.family_question ul li:nth-child(3){ position: absolute; top: 70px; left: 48px;}
.family_question ul li:nth-child(4){ position: absolute; top: 20px; left: 200px;}
.family_question ul li:nth-child(5){ position: absolute; top: 40px; right: 274px;}
.family_question ul li:nth-child(6){ position: absolute; top: 96px; right: 170px;}
.family_question ul li:nth-child(7){ position: absolute; top: 35px; right: 36px;}
.family_question ul li:nth-child(8){ position: absolute; bottom: 75px; right: 27px;}
.family_question ul li:nth-child(9){ position: absolute; bottom: 20px; right: 103px;}
.family_question ul li:last-child{ position: absolute; bottom: 0; right: 0; color: #000;}

.voice_list{ background-image: url(/images/shop/staff/hr_01@2x.png); background-repeat: no-repeat; background-position: top center; background-size: contain; padding-top: 30px;}

.voice_list .control{ margin-bottom: 30px;}
.voice_list .control .alpha{ float:left;}
.voice_list .control .alpha p.kensu{ font-size: 12px; line-height: 40px; display: inline-block; margin-right: 10px;}
.voice_list .control .alpha p.kensu span{ font-size: 18px; font-weight: 700;}
.voice_list .control .alpha .search{ display: inline-block;}
.voice_list .control .alpha .search a{ display: block; color: #004da0; border: 2px solid #004da0; text-decoration: none; font-size: 14px; padding: 10px 10px 7px; border-radius: 5px; font-weight: 700; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}
.voice_list .control .alpha .search a:hover{ color: #fff; background-color: #004da0;}
.voice_list .control .beta{ float:right;}
.voice_list .control .beta .page{}
.voice_list .control .beta .page ul {letter-spacing:-1em;margin:2px 0 0;}
.voice_list .control .beta .page ul li {display:inline-block;min-width:25px;letter-spacing:normal;font-size:16px;text-align:center;overflow:hidden;margin:0 0 0;line-height:0;vertical-align:top;border:1px solid #DDD;border-radius: 5px;box-sizing:border-box;-moz-transition:all .3s;-webkit-transition:all .3s;-ms-transition:all .3s;transition:all .3s;}
.voice_list .control .beta .page ul li + li{margin-left:3px;}
.voice_list .control .beta .page ul li.abbr{min-width:10px;font-size: 10px;font-weight: 700;line-height:1.5;border:none;padding:10px 0 8px;}
.voice_list .control .beta .page ul li span {color:#004DA0;background:#DFE8F3;font-size:12px;font-weight:700;line-height:1.1;padding:10px 4px 8px;display:block;}
.voice_list .control .beta .page ul li a {color:#000;background:#FFF;font-size:12px;font-weight:700;text-decoration:none;line-height:1.1;padding:10px 1px 8px;display:block;}
.voice_list .control .gamma{display:none;float:none;clear:both;overflow:hidden;padding:10px 0 0;}
.voice_list .control .gamma .search_list{width:100%;padding:15px 0;border-bottom:1px solid #ccc;}
.voice_list .control .gamma .search_list:last-child{padding-bottom:0;border-bottom:none;}
.voice_list .control .gamma .search_list > dl{ letter-spacing:-1em;padding:0 0 0 140px;position:relative;display:block;box-sizing:border-box;text-align:left;}
.voice_list .control .gamma .search_list > dl dt{ position:absolute;top:0;left:0;width:100px;font-size:13px;font-weight:700;line-height:32px;background:#eee;letter-spacing:normal;text-align:center;padding:0 10px;}
.voice_list .control .gamma .search_list > dl dd{ letter-spacing:normal;/*display:inline-block;width:33.33%;vertical-align:top;margin:0 0 10px;float:none;padding:8px 0 0;*/}
.voice_list .control .gamma .search_list ul {margin:0;padding: 0;}
.voice_list .control .gamma .search_list > dl dd ul li  {letter-spacing: normal;display: inline-block;width: 33.33%;vertical-align: top;margin: 0 0 10px;float: none;padding: 4px 0 0;}
.voice_list .control .gamma .search_list ul li label.check{cursor:pointer;}
.voice_list .control .gamma .search_list ul li label.check input{display:none;}
.voice_list .control .gamma .search_list ul li label.check input + span{display:inline-block;height:23px;font-size:16px;line-height:23px;letter-spacing:0.07em;vertical-align:middle;width:auto;box-sizing:border-box;margin:0 0.5em 0 0;padding:0 0 0 30px;color:#000;background:url("/images/common/common_check.png") 0 0 no-repeat;background-size:23px 46px;}
.voice_list .control .gamma .search_list ul li label.check input:checked + span{background-position: 0 -23px;}
.voice_list .control .gamma .search_list:nth-child(1) > dl dt{color:#FFF;background-color:#ffc431;}
.voice_list .control .gamma .search_list:nth-child(2) > dl dt{color:#FFF;background-color:#5fb4be;}
.voice_list .control .gamma .search_btn a{display:block;max-width:280px;font-size:16px;font-weight:700;text-align:center;text-decoration:none;box-sizing:border-box;margin:10px auto 15px;padding:15px 0;color:#FFF;background:#004da0;border-bottom:3px solid #01306c;border-radius:6px;}
.voice_list .voice_box{ margin-bottom: 30px;}
.voice_list .voice_box a{ display: flex; text-decoration: none; transition: all .3s;}
.voice_list .voice_box a:hover{ opacity: 0.6;}
.voice_list .voice_box a .photo{ width: 250px; margin-right: 25px; height: 190px; background-image:linear-gradient(-45deg, #004da0  25%, #fff 25%, #fff 50%, #004da0  50%, #004da0  75%, #fff 75%, #fff); background-size: 4px 4px; padding: 4px; box-sizing: border-box;}
.voice_list .voice_box a .photo .inner{ background-color: #fff; width: 100%; height: 100%; overflow: hidden; position: relative;}
.voice_list .voice_box a .photo .inner img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;}
.voice_list .voice_box a .data{ width: 580px;}
.voice_list .voice_box a .data .head{ margin-bottom: 15px;overflow:hidden;}
.voice_list .voice_box a .data .head p.number{ display: inline-block; font-size: 1.5em; font-weight: 700; margin-right: 5px; color: #000;}
.voice_list .voice_box a .data .head ul{ display: inline-block;}
.voice_list .voice_box a .data .head ul li{ display: inline-block; color: #fff; font-size: 1.4em; padding:7px 5px 4px; margin-right: 5px;}
.voice_list .voice_box a .data .head ul li.tag01{ background-color: #ffc431;}
.voice_list .voice_box a .data .head ul li.tag02{ background-color: #5fb4be;}
.voice_list .voice_box a .data .head ul li.type1{background:#FF87A0;}/* 新築（購入）／戸建（売却） */
.voice_list .voice_box a .data .head ul li.type2{background:#2693FF;}/* 中古戸建（購入のみ） */
.voice_list .voice_box a .data .head ul li.type3{background:#1D7500;}/* 土地 */
.voice_list .voice_box a .data .head ul li.type4{background:#FF8000;}/* マンション */
.voice_list .voice_box a .data .head ul li.type99{background:#7F655F;}/* その他 */
.voice_list .voice_box a .data .head .shop_name{float:right;width:8em;font-size:1.4em;font-weight:700;text-align:center;padding:7px 10px 4px;color:#FFF;background-color:#004d9e;}
.voice_list .voice_box a .data .title{ font-size: 1.8em; font-weight: 700; color: #004da0; margin-bottom: 15px; border-left: 4px solid #004da0; padding:5px 0 5px 10px;}
.voice_list .voice_box a .data .com{}
.voice_list .voice_box a .data .com > p{height: 7.2em; font-size: 1.4em; line-height: 1.8em; float: right; width: 100%; margin-right:-160px; padding-right: 160px; box-sizing: border-box; color: #000;}
.voice_list .voice_box a .data .com > p{display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow:hidden;}
/*IE用三点リーダー*/
@media all and (-ms-high-contrast: none) {
.voice_list .voice_box a .data .com > p{position:relative;line-height:1.5em;height:auto;max-height:6em;}
.voice_list .voice_box a .data .com > p::before,
.voice_list .voice_box a .data .com > p::after {
  content: '...';
  line-height: 1;
  position: absolute;
  right: 160px;
  bottom: 10px;
  -ms-wrap-flow: start;
}
.voice_list .voice_box a .data .com > p::after {
  background: currentColor;
  color: #FFF;
  bottom: auto;
}
}
.voice_list .voice_box a .data .com .staff_data{ width: 150px; text-align: center;}
.voice_list .voice_box a .data .com .staff_data .staff_photo{ width: 70px; height: 70px; overflow: hidden; border-radius: 50%; margin: 0 auto 5px; position: relative;border: 1px solid #BBBBBB;}
.voice_list .voice_box a .data .com .staff_data .staff_photo img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;}
.voice_list .voice_box a .data .com .staff_data p{ font-size: 1.4em; line-height: 1.7em; color: #000;}
.voice_list .voice_box a .data .com .staff_data p::before{ content: "担当：";}

.shop_list .map{ width: 860px; height: 638px; margin-bottom: 30px;}
.shop_list .map > .inner{ width: 100%; height: 100%; background-image: url("/images/shop/map_shop.jpg"); background-size: cover; border-radius: 10px; position: relative;}
.shop_list .map > .inner ul li > p{ position: absolute; font-size: 19px; background-color: #004DA0; padding: 0 10px; box-sizing: border-box; color: #fff; border-radius: 5px; font-weight: 700; text-align: center; height: 37px; line-height: 40px;}
.shop_list .map > .inner ul li > p a{ display: inline-block; color: #fff!important; text-decoration: none;}
.shop_list .map > .inner ul li > p.active{ background-color: #39A5FC;}
.shop_list .map > .inner ul li > p:hover{ cursor: pointer;}
.shop_list .map > .inner ul li .shop_data{ position: absolute; z-index: 100;}

/*========================== 各店舗名表示位置 ==========================*/
.shop_list .map > .inner ul li.asaka > p{ top: 107px; left: 270px;}
.shop_list .map > .inner ul li.kiyose > p{ top: 199px; left: 378px;}
.shop_list .map > .inner ul li.higashikurume > p{ top: 199px; left: 470px;}
.shop_list .map > .inner ul li.oizumigakuen > p{ top: 199px; left: 600px;}
.shop_list .map > .inner ul li.kumegawa > p{ top: 280px; left: 405px;}
.shop_list .map > .inner ul li.tanashi > p{ top: 280px; left: 556px;}
.shop_list .map > .inner ul li.hachioji > p{ top: 370px; left: 33px;}
.shop_list .map > .inner ul li.toyoda > p{ top: 370px; left: 150px;}
.shop_list .map > .inner ul li.tachikawa > p{ top: 370px; left: 250px;}
.shop_list .map > .inner ul li.kokubunji > p{ top: 370px; left: 394px;}
.shop_list .map > .inner ul li.mitaka > p{ top: 370px; left: 528px;}
.shop_list .map > .inner ul li.ogikubo > p{ top: 370px; left: 629px;}
.shop_list .map > .inner ul li.hino > p{ top: 470px; left: 160px;}
.shop_list .map > .inner ul li.fucyu > p{ top: 470px; left: 350px;}
.shop_list .map > .inner ul li.chofu > p{ top: 470px; left: 513px;}
.shop_list .map > .inner ul li.sengawa > p{ top: 470px; left: 635px;}
.shop_list .map > .inner ul li.nagoya > p{ top: 575px; left: 386px; width: 146px; font-size: 15px;}
.shop_list .map > .inner ul li.fukuoka > p{ top: 575px; left: 205px; width: 146px;}
.shop_list .map > .inner ul li.okinawa > p{ top: 575px; left: 24px; width: 146px;}

/*========================== マップ ==========================*/
.shop_list .map > .inner .line{ fill:none; stroke:#79A4C4; stroke-width:3.1736; stroke-miterlimit:10;}
.shop_list .map > .inner .line_name{ fill:#7AA4C4;}
.shop_list .map > .inner .line_name_text{ fill:#FFFFFF; font-size:13px;}
.shop_list .map > .inner .line_jr{ fill:none; stroke:#79A4C4; stroke-width:6.5; stroke-miterlimit:10;}
.shop_list .map > .inner .line_jr_w{ fill:none; stroke:#FFFFFF; stroke-width:3.1736; stroke-miterlimit:10; stroke-dasharray:10.5788,10.5788;}
.shop_list .map > .inner .station_name{ fill:#7AA4C4; font-size:11px; font-weight: 700;}
.shop_list .map > .inner .station_name_s{ font-size:15px; fill:#79A5C4; font-weight: 700;}
.shop_list .map > .inner .station_name_s_w{ font-size:15px; fill:none; stroke:#FFFFFF; stroke-width:4.2315; stroke-linecap:round; stroke-linejoin:round; font-weight: 700;}
.shop_list .map > .inner .station_circle{ fill:#79A4C4;}
.shop_list .map > .inner .station_circle_s{ fill:#FFFFFF; stroke:#79A4C4; stroke-width:3.1736; stroke-miterlimit:10;}
.shop_list .map > .inner .af_back{ fill:#FFFFFF;}
.shop_list .map > .inner .af_border{ fill:#79A4C4;}
.shop_list .map > .inner .af_textback{ fill:#79A4C4;}
.shop_list .map > .inner .af_text{ fill:#FFFFFF; font-size:17px;}
.shop_list .map > .inner .arrow_c{ fill:#004DA0;}
.shop_list .map > .inner .arrow_l{ fill:none; stroke:#004DA0; stroke-width:1.5868; stroke-miterlimit:10;}

/*========================== ホバー時・選択時の線路の色 ==========================*/
.shop_list .map > .inner #line_tojo.active .line{ stroke:#004098;}
.shop_list .map > .inner #line_tojo.active .line_name{ fill:#004098;}
.shop_list .map > .inner #line_ikebukuro.active .line{ stroke:#ff6600;}
.shop_list .map > .inner #line_ikebukuro.active .line_name{ fill:#ff6600;}
.shop_list .map > .inner #line_shinjyuku.active .line{ stroke:#00AAAF;}
.shop_list .map > .inner #line_shinjyuku.active .line_name{ fill:#00AAAF;}
.shop_list .map > .inner #line_cyuo.active .line_jr{ stroke:#F15A22;}
.shop_list .map > .inner #line_cyuo.active .line_name{ fill:#F15A22;}
.shop_list .map > .inner #line_keio.active .line{ stroke:#dd0077;}
.shop_list .map > .inner #line_keio.active .line_name{ fill:#dd0077;}
.shop_list .map > .inner #line_musashino.active .line_jr{ stroke:#F15A22;}
.shop_list .map > .inner #line_musashino.active .line_name{ fill:#F15A22;}

/*========================== ホバー時・選択時の駅・吹き出しの色 ==========================*/
/*JR武蔵野線*/
.shop_list .map > .inner .station_asaka.active .station_circle_s{ stroke:#F15A22;}
.shop_list .map > .inner .station_asaka.active .station_name_s{ fill:#F15A22;}
/*西武池袋線*/
.shop_list .map > .inner .station_kiyose.active .station_circle_s,
.shop_list .map > .inner .station_higashikurume.active .station_circle_s,
.shop_list .map > .inner .station_oizumigakuen.active .station_circle_s{ stroke:#ff6600;}
.shop_list .map > .inner .station_kiyose.active .station_name_s,
.shop_list .map > .inner .station_higashikurume.active .station_name_s,
.shop_list .map > .inner .station_oizumigakuen.active .station_name_s{ fill:#ff6600;}
/*西武新宿線*/
.shop_list .map > .inner .station_kumegawa.active .station_circle_s,
.shop_list .map > .inner .station_tanashi.active .station_circle_s{ stroke:#00AAAF;}
.shop_list .map > .inner .station_kumegawa.active .station_name_s,
.shop_list .map > .inner .station_tanashi.active .station_name_s{ fill:#00AAAF;}
/*JR中央線*/
.shop_list .map > .inner .station_hachioji.active .station_circle_s,
.shop_list .map > .inner .station_toyoda.active .station_circle_s,
.shop_list .map > .inner .station_tachikawa.active .station_circle_s,
.shop_list .map > .inner .station_kokubunji.active .station_circle_s,
.shop_list .map > .inner .station_mitaka.active .station_circle_s,
.shop_list .map > .inner .station_ogikubo.active .station_circle_s{ stroke:#F15A22;}
.shop_list .map > .inner .station_hachioji.active .station_name_s,
.shop_list .map > .inner .station_toyoda.active .station_name_s,
.shop_list .map > .inner .station_tachikawa.active .station_name_s,
.shop_list .map > .inner .station_kokubunji.active .station_name_s,
.shop_list .map > .inner .station_mitaka.active .station_name_s,
.shop_list .map > .inner .station_ogikubo.active .station_name_s{ fill:#F15A22;}
/*京王線*/
.shop_list .map > .inner .station_hino.active .station_circle_s,
.shop_list .map > .inner .station_fucyu.active .station_circle_s,
.shop_list .map > .inner .station_chofu.active .station_circle_s{ stroke:#dd0077;}
.shop_list .map > .inner .station_hino.active .station_name_s,
.shop_list .map > .inner .station_fucyu.active .station_name_s,
.shop_list .map > .inner .station_chofu.active .station_name_s,
.shop_list .map > .inner .station_sengawa.active .station_name_s{ fill:#dd0077;}
/*吹き出し矢印*/
.shop_list .map > .inner .active .arrow_c{ fill:#39A5FC;}
.shop_list .map > .inner .active .arrow_l{ stroke:#39A5FC;}