@charset "UTF-8";
/* ============================================================ //
// @ 店舗詳細
// ============================================================ */
/*doc
---
title: 店舗外観
name: 店舗外観
category: shop_single
---

<h3 class="sg-pattern-title"> sectionTitle </h3>

```html_example

<figure class="shop-photo">
  <img src="images/shop_honten.jpg"  alt="アパマンショップ北九州本店 外観写真"/>
</figure>

```

*/
.shop-photo {
  text-align: center;
  margin: 0 0 10px;
}

.shop-photo img {
  width: 100%;
  vertical-align: bottom;
}

/*doc
---
title: 来店予約ボタン
name: 来店予約ボタン
category: shop_single
---

<h3 class="sg-pattern-title"> sectionTitle </h3>

```html_example

<form id="reserveForm" class="shop-reserve-btn" action="../contact/reserve.php-id=1.html" method="get">
  <input type="hidden" name="id" value="1"/>
  <input type="button" class="general-btn"  value="問い合わせ・来店予約はこちら"/>
</form>

```

*/
.shop-reserve-btn {
  text-align: center;
}

.shop-reserve-btn a {
  display: block;
}

/* @ 以下タグ指定をリセット*/
#SideNavi #reserveForm {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background-color: transparent !important;
}

/*doc
---
title: 店舗詳細GoogleMap
name: 店舗詳細GoogleMap
category: shop_single
---

```html_example

<object id="gmap" class="shop-gmap" type="text/html" data="gmap/map.php-id=1.html">iframe を利用して表示しております。iframe
  に対応していないブラウザでは表示することができません。
</object>

```

*/
#gmap.shop-gmap {
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin: 0 auto 18px;
  display: table;
}

@media screen and (max-width: 767px) {
  #gmap.shop-gmap {
    width: 100%;
    max-width: 100%;
  }
}

/*doc
---
title: 店舗の重要なお知らせ
name: 店舗の重要なお知らせ
category: shop_single
---

```html_example

<div class="shop-important-unit">
  <p class="shop-important-lead">アパマンショップ小倉店2017年12月1日に移転オープンしました！</p>
</div>

```

*/
.shop-important-unit {
  margin: 20px 0 20px;
  background-color: #FFe100;
  padding: 10px;
  border: 1px solid #013b96;
  box-sizing: border-box;
  position: relative;
}

.shop-important-lead {
  color: #013b96;
  line-height: 1.5;
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .shop-important-unit {
    margin: 15px 0;
  }
}

/*doc
---
title: 店舗タイトル
name: 店舗タイトル
category: shop_single
---

```html_example

<div class="shop-title-unit">
  <h3 class="shop-title">スタッフの紹介<span class="shop-title-name">アパマンショップ北九州本店</span></h3>
  <p class="shop-title-lead">私達が自分達の持ち味をいかしてあなたのお部屋探しをお手伝いします！</p>
</div>

```

*/
.shop-title-unit {
  margin: 33px auto 20px;
  background-color: #40a4d7;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  line-height: 1.5;
}

.shop-title-name {
  font-size: 1.2rem;
  white-space: nowrap;
  color: #ffffff;
  font-weight: bold;
  margin: 0;
  vertical-align: bottom;
  padding-left: 1em;
}

@media screen and (max-width: 767px) {
  .shop-title-name {
    font-size: .8rem;
    display: block;
    padding-left: 0;
    padding-top: 0.5em;
  }
}

.shop-title {
  margin-bottom: .5em;
  font-size: 30px;
  color: #fff;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .shop-title {
    font-size: 24px;
  }
}

.shop-title-lead {
  background-color: #dcf3ff;
  margin: 0;
  font-size: 1.28rem;
  margin-top: 0.5em;
  border-radius: 6px;
  color: #04679a;
  padding: 10px 15px;
  font-weight: bold;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .shop-title-lead {
    font-size: 1rem;
  }
}

/*doc
---
title: 店舗外観グループ
name: 店舗外観グループ
category: shop_single
---

```html_example

<div class="shop-photo-group">
  <div class="shop-photo-item"><a href="https://www.google.co.jp/maps/@33.864844,130.87959,3a,90y,270h,90t/data=!3m5!1e1!3m3!1s_LTLQtj9E2w-hkSfE0B_Zg!2e0!3e2!6m1!1e1" target="_blank" onclick="_gaq.push(['_trackEvent','indoorview','click','honten']);"><img src="images/indor_veiw_ban.jpg" alt="インドアビュー"/></a></div>
  <div class="shop-photo-item"><img src="images/20150727/honten01.jpg" width="191" height="131" alt=""/></div>
  <div class="shop-photo-item"><img src="images/20150727/honten02.jpg" width="191" height="131" alt=""/></div>
</div>

```

*/
.shop-photo-group {
  display: -webkit-box;
  display: flex;
  -js-display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  margin-bottom: 20px;
}

/*@media screen and (min-width: 944px) {
  .shop-photo-item {
    width: 32%;
    margin-right: 2%;
  }

  .shop-photo-item:nth-child(3n) {
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) { */
  .shop-photo-item {
    width: 49%;
    margin-right: 2%;
  }

  .shop-photo-item:nth-child(2n) {
    margin-right: 0;
  }
/* } */

.shop-photo-item img {
  width: 100%;
  max-width: 100%;
  vertical-align: bottom;
}

/*doc
---
title: スタッフ一覧アイテム
name: スタッフ一覧アイテム
category: shop_single
---

```html_example

<ul class="shop-staff-group">
  <li class="shop-staff-item">
    <dl class="shop-staff-item-box">
      <dt class="shop-staff-item-thumb">
        <img class="png" src="images/staff_yoshiyama.png" width="96" height="112" alt="北九州本店 吉山店長"/><span class="pl3">北九州本店<br/>吉山店長</span>
      </dt>
      <dd class="shop-staff-item-content">こんにちは。本店の吉山です。<br/>
        弊社は、北九州では、40年を超える実績のある会社です。<br/>
        今までたくさんのお客様にお世話になりました。<br/>
        更には今でも当社と長くお付き合い頂いているお客様もいます。<br/>
        そんなお客様のお気持ちに全力でお応え出来るように日々、情熱をもって対応していきたいと思います。<br/>
        どんな事でも構いませんので、気軽にご相談下さい。
      </dd>
    </dl>
  </li>
</ul>

```

*/
.shop-staff-group {
  display: -webkit-box;
  display: flex;
  -js-display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

.shop-staff-item {
  width: 49%;
  border-bottom: solid 1px #eaeaea;
  margin-right: 2%;
}

.shop-staff-item:nth-child(2n) {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .shop-staff-item {
    width: 100%;
    margin-right: 0;
  }
}

.shop-staff-item-box {
  display: -webkit-box;
  display: flex;
  -js-display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
}

.shop-staff-item-thumb {
  width: 30%;
  font-size: 77%;
}

.shop-staff-item-thumb img {
  width: 100%;
  max-width: 100%;
  vertical-align: bottom;
}

.shop-staff-item-content {
  width: 65%;
  margin: 0;
  padding: 0;
  font-size: 85%;
  padding-left: 10px;
  box-sizing: border-box;
}

.shop-staff-item-content-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*doc
---
title: 店舗取扱物件リスト
name: 店舗取扱物件リスト
category: shop-single
---

```html_example

<aside class="aside-shop-service">
  <h3 class="heading02">取り扱い物件一覧</h3>
  <ul class="shop-service-list">
    <li><a href="../item/itemlist.php-r=1&amp;kareacode=1.html">小倉北区の賃貸物件一覧</a></li>
    <li><a href="../item/itemlist.php-r=1&amp;kareacode=2.html">小倉南区の賃貸物件一覧</a></li>
  </ul>
  <br class="clear"/>
<aside>

```

*/
.aside-shop-service {
  margin: 0 0 80px;
}

@media screen and (max-width: 767px) {
  .aside-shop-service {
    margin: 0;
  }
}

.shop-service-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-service-list li {
  margin-left: 1em;
  position: relative;
  padding-left: 1em;
}

.shop-service-list li:before {
  display: inline-block;
  position: absolute;
  content: '';
  width: 3px;
  height: 3px;
  border-top: solid 1px #258bbf;
  border-right: solid 1px #258bbf;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0%, -50%) rotate(45deg);
  transform: translate(0%, -50%) rotate(45deg);
}

.shop-service-list li a {
  padding: .25em 0;
  display: block;
}

/*# sourceMappingURL=shop_single.css.map */