@charset "UTF-8";
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local("YoGothic-Bold"), local("Yu Gothic");
  /* Chrome用 */
}
/* 自然素材の木の家 HUCK 用 */
/* スムホーム 2018 リニューアル前 CSS
このCSSは、旧コンテンツも新デザインに適用させるためのもの。
本来は scss で作成していないが、今後はずっと更新していく。
なお、本 CSS は同じフォルダの style.css より前に組み込むものとする。
そのため、style.css との重複設定に注意すること。
*/
/* 共通設定 
------------------------------------------------ */
/* フォント */
body {
  color: #333333;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 13px;
}

h1, h2, h3, h4, h5, h6, #footer .heading {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

h1 small {
  font-size: 24px;
}

h2 small {
  font-size: 20px;
}

h3 small {
  font-size: 18px;
}

h4 small {
  font-size: 14px;
}

/* 行間マージン調整 */
h1, h2, h3, h4, h5, h6, #footer .heading {
  margin-bottom: 10px;
  /* ヘッダ見出しやタイトルの下 */
}

.header-top {
  margin-bottom: 10px;
  /* ロゴ下 */
}

#slider {
  padding: 0;
  /* スライダー上下 */
}

/* 強調文字 */
.caution {
  font-weight: bold;
  color: #cc0000;
}

/* ベースカラー $theme_color をスムホームカラーの赤 $theme_color に置換 */
li.current {
  background-color: #cc0000;
  border-color: #cc0000 !important;
}

.flex-direction-nav .flex-prev:hover,
.flex-direction-nav .flex-next:hover {
  background-color: #cc0000;
}

.flex-control-paging li a:hover {
  background: #cc0000;
}

.flex-control-paging li a.flex-active {
  background: #cc0000;
}

.accordion-heading:hover {
  background-color: #cc0000;
}

#footer a:hover {
  color: #cc0000;
}

#footer-menu a:hover {
  color: #cc0000;
}

.portfolio h4 a {
  color: #cc0000;
}

.featured-blocks .thumbnails > li:hover {
  color: #cc0000 !important;
}

.featured-blocks .thumbnails > li:hover p, .featured-blocks .thumbnails > li:hover h3 {
  color: #cc0000 !important;
}

.pricing .featured .pricing-plan {
  background-color: #cc0000;
}

.post-meta-month {
  background-color: #cc0000;
}

#toTopHover {
  background-color: #cc0000;
}

.hero-unit {
  border-left: 4px solid #cc0000;
}

.hero-unit h3,
.hero-unit h4 {
  font-weight: bold;
}

.btn-welcome {
  background: #cc0000;
}

.highlights div:hover .highlights-content {
  background: #cc0000;
}

.bg-color-orange-dark {
  background-color: #cc0000 !important;
}

blockquote {
  border-color: #cc0000;
}

/* ベースカラー置換ここまで */
/* レイアウトブロック */
.block {
  margin-bottom: 10px;
}

.separator {
  border-bottom: dotted 1px #CCCCCC;
}

/* メディアクエリー
--------------------------------- */
/* スマホ（xs） */
/* タブレット（sm） */
/* PCパソコン（md） */
/* ラージ（lg） */
/* トップページ
---------------------------- */
/* トップページの .title の行間が狭いので */
h1, h2, h3, h4, h5, h6 {
  line-height: 140%;
}

/* アイテムのタイトル h4 */
h4.title {
  font-size: 17.5px;
  border-left: solid 6px #cc0000;
  padding: 10px;
}

/* スライダーの prev, next ボタンの位置調整 */
.flex-direction-nav {
  xxx_bottom: 55%;
  /* FlexSlider 導入でおかしくなったので現在無効化 */
}

/* ポートフォリオの中のテキストを小さく */
.portfolio .inner-text p {
  font-size: 13px;
}

/* アコーディオンのデフォルト色変更 */
.accordion-heading {
  background-color: #FF9900;
}

/* ヘッダ
---------------------------- */
/* トップの黒いバーを赤 $theme_color に */
#top-menu {
  background-color: #cc0000;
  margin-bottom: 10px;
}

/* ロゴ下の文字の調整 */
.tagline {
  color: #7E7E7E;
  display: inline-block;
  font-size: 12px;
  margin: 6px 0 0 0;
}

/* フッタ
---------------------------- */
/* フッタの再定義
---------------------------- */
#footer {
  background-color: #cc0000;
  border-top: 1px solid #DBDBDB;
  color: #FFFFFF;
  font-size: 14px;
  padding-bottom: 30px;
  position: relative;
}

#footer p {
  color: #FFF;
  opacity: 0.6;
}

#footer a {
  color: #FFF;
  opacity: 0.6;
}

#footer a:hover {
  color: #FFF;
  opacity: 1;
}

#footer .heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  opacity: 0.8;
  font-size: 16px;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
}

/* インフォメーション
---------------------------------------- */
.info_date {
  color: #cc0000;
  margin-right: 6px;
}

ul.info {
  list-style: none;
  margin-left: 10px;
}

ul.info li {
  line-height: 150%;
  border-bottom: dotted 1px #CCCCCC;
  padding: 4px 0;
}

/* hero-unit 内のリンク色 */
a {
  color: #cc0000;
}

/* タイトルの文字が細いので太く */
h4.title {
  font-weight: bold;
}

/* bxSlider の上書き */
.bx-wrapper .bx-viewport {
  box-shadow: none;
  border: none;
  left: 0;
}

ul.bxslider {
  margin: 0 0 10px 0;
}

/* ナビゲーションが2px長いのを修正 */
.header-nav .span12 {
  xxx_width: 938px;
  /* レスポンシブに悪影響だったので現在無効化 */
}

/* モーダルウィンドウ内にあるソーシャルボタンの消去 */
.pp_social {
  display: none;
}

/* FlexSlider の左右ナビゲーションの不具合修正 */
.flex-direction-nav .flex-next {
  text-align: left;
}

/* FlexSlider の下マージン調整 */
.flexslider {
  margin-bottom: 0;
}

footer h3 {
  margin-top: 0;
}

/* 水平線のマージン調整 */
#container hr {
  margin: 10px 0;
}

hr {
  margin: 10px 0;
  border-top: 2px solid #DDD;
}

/* 太鼓判のカルーセルのマージン調整 */
.carousel {
  margin-bottom: 0;
}

/* ToTop の幅調整 */
#toTop,
#toTopHover {
  width: 50px;
}

/* トップ3の調整 */
.thumbnails .caption {
  padding-top: 10px;
}

/* ページヘッダのフォント */
.page-header h1 {
  xxx_font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 28px;
  line-height: 1.5;
  margin-bottom: 5px;
  xxx_color: #cc0000;
  border-left: solid 6px #cc0000;
  padding-left: 10px;
}

.page-header h1 small {
  font-family: "Lato", sans-serif;
}

/* アイテムタイトルに下線をつける */
.item_title {
  font-weight: bold;
  border-bottom: dotted 1px #CCCCCC;
}

/* アイテムタイトルに下線をつける */
.item {
  border-bottom: dotted 1px #CCCCCC;
}

/* インデント */
.indent {
  padding-left: 20px;
  padding-right: 20px;
}

/* 資料請求等ボタンのマージンの調整 */
.btn-block {
  margin-bottom: 10px;
}

/* 家づくりの5つのステップ */
.step {
  background-color: #cc0000;
  color: #FFFFFF;
  font-size: 20px;
  padding: 20px 10px;
}

/* 画像左寄せ＆テキストの間隔 */
img.alignleft,
img.alignright {
  margin-right: 10px;
}

/* 画像左寄せした時、画像上辺とテキストを合わせるため */
.alignleft + *,
.alignright + * {
  margin-top: 0;
}

/* 要素の下に強制的にマージンを入れたいとき */
.margin_bottom_10px {
  margin-bottom: 10px;
}

/* 見出しの small が改行した時、line-height が大きいので別にクラスを用意 */
h2.sub_title {
  font-size: 18px;
  line-height: 120%;
  color: #999999;
}

h2 + h2.sub_title {
  margin-top: -10px;
}

/* 送信フォーム 
------------------------------------------------*/
/* 必須入力の前にアスタリスクをつける */
.form_require:before {
  color: #cc0000;
  content: "*";
}

.form_require {
  color: #cc0000;
}

/* 記述例 */
.form_example {
  padding-left: 1em;
  color: #666666;
}

/* フォームの注記 */
.form_chuki {
  color: #666666;
}

/* コメント欄が狭いので */
textarea {
  width: 300px;
}

/* 確認画面の調整 */
.kakunin .form-horizontal .controls {
  font-size: 16px;
  margin-top: 5px;
}

/* 入力画面のラベルと入力欄が左右揃わないので */
.initial .form-horizontal .control-label {
  padding-top: 5px;
}

/* 確認画面のラベルとデータが左右揃わないので */
@media (min-width: 768px) {
  .kakunin .form-horizontal .control-label {
    padding-top: 0;
  }
}
/* スマホの時、input="date" 欄にカレンダーアイコンが標示されないため、説明を表示させない */
@media (max-width: 767px) {
  .sumaho_hidden {
    display: none;
  }
}
/* 資料請求ボタン、お問い合せボタンの調整 */
.btn_request p {
  font-size: 14px;
  color: #D1F0FF;
  margin-top: 10px;
}

.btn_contact p {
  font-size: 14px;
  color: #F8DCDB;
  margin-top: 10px;
}

.btn_request h4,
.btn_contact h4 {
  color: #FFF;
  font-size: 20px;
}

/* リニューアルでボタンを非表示（別に用意してある */
.btn_request, .btn_contact {
  display: none;
}

.btn_zeh {
  color: #333;
  font-size: 10px;
  border: solid 1px #FF9900;
}

.btn_zeh p {
  font-size: 14px;
}

a.btn_zeh:hover {
  color: #333;
}

/* .btn で a タグでないのにクリックできそうな表示になるので修正 */
div.btn:hover, div.btn:active, div.btn.active, div.btn.disabled, div.btn[disabled] {
  cursor: auto;
  color: #333333;
  background-color: #F5F5F5;
}

/* div.btn を作るとマージンが変わるのを防ぐ */
.btn-block + div.btn-block {
  margin-top: 0;
}

/* ポートフォリオはスマホで見るとき画像サイズが小さいと背景が黒になる 
でも、背景消しても onmouse で背景がつくので実施しない */
.portfolio article {
  background-color: transparent;
  margin-bottom: 20px;
}

.portfolio article:hover {
  background: transparent !important;
}

/* 上記の代わりに 画像をセンタリングすると背景が黒でも不自然さが緩和 */
.inner-image img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

/* バッヂの上位階層のボックス
-------------------------------------------------------- */
.inner-image {
  background-color: #FFFFFF;
  xxx_margin: 10px;
  position: relative;
  /* リボン（バッヂ）をつけるために必要 */
}

/* バッヂ
-------------------------------------------------------- */
[class^="ribon-"],
[class*=" ribon-"] {
  display: inline-block;
  width: 180px;
  height: 30px;
  /*	background-image: url('../images/ribon_kansei.png');*/
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 6px;
  left: 0px;
}

/* 上下二段に表示する場合の上の方にずらすバッヂには upper を付ける */
[class^="ribon-"][class*="upper"],
[class*=" ribon-"][class*="upper"] {
  bottom: 36px;
  left: 0px;
}

.ribon-kansei {
  background-image: url("../images/ribon_kansei.png");
  /* 完成現場 */
}

.ribon-honegumi {
  background-image: url("../images/ribon_honegumi.png");
  /* 骨組み現場 */
}

.ribon-zosei {
  background-image: url("../images/ribon_zosei.png");
  /* 造成中 */
}

.ribon-yotei {
  background-image: url("../images/ribon_yotei.png");
  /* 着工予定 */
}

.ribon-kenchiku {
  background-image: url("../images/ribon_kenchiku.png");
  /* 建築中 */
}

.ribon-kanryo {
  background-image: url("../images/ribon_kanryo.png");
  /* 完了 */
}

.ribon-shuryo {
  background-image: url("../images/ribon_shuryo.png");
  /* 見学会終了 */
}

.ribon-shinchiku {
  background-image: url("../images/ribon_shinchiku.png");
  /* 新築 */
}

.ribon-tateuri {
  background-image: url("../images/ribon_tateuri.png");
  /* 建売 */
}

.ribon-reform {
  background-image: url("../images/ribon_reform.png");
  /* リフォーム */
}

.ribon-baiyaku {
  background-image: url("../images/ribon_baiyaku.png");
  /* 売約済み */
}

.ribon-seiyaku {
  background-image: url("../images/ribon_seiyaku.png");
  /* ご成約済 */
}

.ribon-sonota {
  background-image: url("../images/ribon_sonota.png");
  /* その他 */
}

.ribon-before {
  background-image: url("../images/ribon_before.png");
  /* ビフォー */
}

.ribon-after {
  background-image: url("../images/ribon_after.png");
  /* アフター */
}

.ribon-event {
  background-image: url("../images/ribon_event.png");
  /* イベント */
}

.ribon-model {
  background-image: url("../images/ribon_model.png");
  /* モデルハウス */
}

.ribon-model.togitsu {
  background-image: url("../images/ribon_model_togitsu.png");
  /* 時津モデルハウス */
}

.ribon-model.hoyodai {
  background-image: url("../images/ribon_model_hoyodai.png");
  /* 豊洋台モデルハウス */
}

.ribon-model.hoyodai_hiraya {
  background-image: url("../images/ribon_model_hoyodai_hiraya.png");
  /* 豊洋台モデルハウス（平屋バージョン） */
}

[class^="badge-"], [class*=" badge-"] {
  display: inline-block;
  width: 113px;
  height: 114px;
  /*	background-image: url('../images/ribon_kaisaichu.png');*/
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 5px;
  left: 5px;
}

.badge-taikoban {
  background-image: url("../images/badge_taikoban.png");
  display: none;
}

.badge-taikoban_l {
  background-image: url("../images/badge_taikoban_l.png");
  display: none;
}

.badge-baiyakuzumi {
  background-image: url("../images/badge_baiyakuzumi.png");
}

/* お客様の声
-------------------------------------- */
.faq .item_title:first-child {
  margin-top: 0;
}

/* お客様の声の目立つフレーズを強調する */
.voice_caption {
  background-color: #FFF0B2;
  line-height: 140%;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-left: solid 6px #FFCC00;
  border-right: solid 6px #FFCC00;
}

/* タグの下マージン調整 */
.tags {
  margin-bottom: 20px;
}

/* タグクラウドの色をオレンジから赤へ変更 */
.tags a {
  display: inline-block;
  background-color: #cc0000;
  padding: 2px 6px;
  /* margin: 0 3px 5px 0; */
  color: #FFFFFF;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
}

/* タグ はリンクの修飾をしない */
.tags a:hover,
.tags a:active,
.tags a:focus {
  color: #FFFFFF;
  text-decoration: none;
  opacity: inherit;
  background-color: #aa0000;
}

/* リンクのないタグを hover させないために disabled を指定する */
.tags a.disabled:hover {
  cursor: default;
  background-color: #cc0000;
}

/* トップのお客様の声の画像サイズを小さく */
/*.portfolio li {
	width: 200px !important;
}*/
/* インナーテキストの padding を変更 */
.thumbnails .inner-text,
.thumbnails .inner-text,
.portfolio .inner-text {
  padding: 10px;
}

/* インナーテキストの上部のマージンを変更 */
.thumbnails .inner-text h5,
.thumbnails .inner-text h5,
.portfolio .inner-text h5 {
  margin-top: 0;
  margin-bottom: 5px;
}

/* 完成住宅一覧
-------------------------------------- */
/* サムネイルの幅 */
table.works td.thumb img {
  width: 80px;
  max-width: 80px;
}

table.works th {
  background: #EEEEEE;
}

/* スマホ時 */
@media (max-width: 767px) {
  /* 非表示にするカラム */
  table.works .name,
  table.works .date,
  table.works .kubun,
  table.works .tsubo {
    display: none;
  }

  /* サムネイルが小さいので */
  table.works .thumb {
    width: 60px;
  }
}
/* イベント 
--------------------------------------*/
/* フィルタの下のマージン調整 */
#filtrable {
  margin-bottom: 10px;
  padding-left: 0;
  display: none;
  /* とりあえず非表示 */
}

#filtrable a {
  background-color: #CCCCCC;
  /* グレー */
  color: #FFFFFF;
  padding: 4px 10px;
}

/* フィルターをインラインブロックに */
#filtrable li {
  display: inline-block;
}

.event .item_title:first-child {
  margin-top: 0;
}

/* 見学会の案内など目立つフレーズを強調する */
.event_caption {
  background-color: #FFDDAA;
  line-height: 140%;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-left: solid 6px #FF8000;
  border-right: solid 6px #FF8000;
}

/* 標準仕様 
--------------------------------------*/
/* 標準仕様ページのボタンのデフォルトカラーが薄いので枠を付けた */
.index .btn {
  border: solid 1px #DDDDDD;
}

/* オプション品のラベル */
.label-danger {
  background-color: #cc0000;
}

/* アイキャッチ */
.eye_catch {
  /*font-size: 120%;*/
  color: #cc0000;
}

/* 印刷用 
--------------------------------------*/
/* 印刷時だけ全体を縮小 */
@media xxx_print {
  /* 効かないから一旦無効化 */
  .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1170px;
    /* 印刷時に boorstrap の Large display を適用する感じ */
  }
}
/* トピックス
-------------------------------------- */
/* トピックスなど強調する文言 */
.info_caption {
  background-color: #FFE3B2;
  line-height: 140%;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-left: solid 6px #FF9900;
  border-right: solid 6px #FF9900;
}

/* 最上級に強調する文言 */
.caution_caption {
  background-color: #FFDDDD;
  line-height: 140%;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 10px0px;
  border-left: solid 10px #cc0000;
  border-right: solid 10px #cc0000;
}

/* 動画（YouTube埋め込み）をレスポンシブ対応に
--------------------------------- */
div.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

div.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* キャプション（強調文字） */
p.caption {
  font-weight: bold;
}

/* 完成住宅一覧
-------------------------------------- */
table.zeh th {
  background-color: #EEE;
}

table.zeh caption {
  background-color: #333;
  color: #FFF;
}

table.zeh thead th {
  text-align: center;
}

/* テーブルの数値は右寄せ */
table td.num {
  text-align: right;
}