@charset "UTF-8";
/* instagram バナー */
@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用 */ }
/* バージョン5 */
/* 共通設定
--------------------------------- */
body {
  color: #222222;
  /*font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
  font-size: 16px;
  background-image: none;
  padding-bottom: 0; }

/* 基本色 */
.base_txt_color {
  color: #E33900; }

.base_bg_color {
  background-color: #E33900;
  color: #FFFFFF; }

.alert_txt_color {
  color: #CE4E3A; }

.alert_bg_color {
  background-color: #CE4E3A;
  color: #FFFFFF; }

/* メディアクエリー
--------------------------------- */
/* スマホ（xs） */
/* タブレット（sm） */
/* PCパソコン（md） */
/* ラージ（lg） */
/* オーバーライト（再定義用） 
--------------------------*/
/* 個別設定のフォントを無効化 */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.navbar-brand,
.popover-title,
.shop-product h5 {
  font-family: inherit;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 10px; }

/* フォントサイズ */
h1 {
  font-size: 20px; }

h2 {
  font-size: 18px; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 16px; }

h6 {
  font-size: 14px; }

h1 .small {
  font-size: 18px; }

h2 .small {
  font-size: 16px; }

h3 .small {
  font-size: 16px; }

h4 .small {
  font-size: 14px; }

/* 引用の文字サイズが大きいので */
blockquote {
  font-size: inherit; }

/* リンクカラー */
a,
a:hover,
a:focus {
  color: #E33900;
  text-decoration: none; }

/* リンクした画像は hover時 半透明 */
a:hover img {
  opacity: 0.7; }

/* リンクを無効にする */
a.disabled {
  pointer-events: none;
  /*リンクを非リンクに変える*/
  cursor: default;
  /*マウスカーソルを矢印のまま変えない*/
  text-decoration: none;
  /*下線を消す*/
  color: #222222;
  /*非リンクの文字色と同じにする*/ }

/* ボタンフォーカス時の再設定 */
.btn:focus,
.btn-showup:hover,
.btn-showup:focus {
  background-color: #337AB7;
  border-color: #ADADAD; }

/* リスト左マージンが多すぎるので */
ul {
  padding-left: 30px; }

/* 印刷時にリンク先が表示されるので */
@media print {
  a[href]:after {
    content: "" !important; }

  abbr[title]:after {
    content: "" !important; } }
/* bootstrap の再定義用 
--------------------------*/
/* bootstrap のカラムのネストが左右にはみ出る対処 */
.nest_container {
  margin: 0 10px; }

/* bootstrap が色を変えてるので */
footer .small {
  color: inherit; }

/* bootstrapのスタータテンプレート用 */
.starter-template {
  padding: 40px 15px;
  text-align: center; }

/* ラベルが日本語だけなら padding 調整 */
.label.lang_jp {
  padding: .3em .6em .3em; }

/* タイポグラフィ 
--------------------------*/
/* 行間調整 */
.gyokan_00 {
  margin-bottom: 0; }

.gyokan_10 {
  margin-bottom: 10px; }

.gyokan_20 {
  margin-bottom: 20px; }

.gyokan_30 {
  margin-bottom: 30px; }

.gyokan_40 {
  margin-bottom: 40px; }

/* タイトル */
.title {
  font-weight: 700;
  /* noto 700 */
  padding: 2px 6px; }

p.title {
  border-bottom: dotted 1px #CCC;
  margin-bottom: 4px; }

/* 項目名 */
.item {
  border-bottom: solid 1px #E33900;
  color: #E33900;
  margin-bottom: 16px; }

.item_sub {
  border-bottom: dotted 1px #CCC;
  color: #222222;
  font-weight: bold;
  margin-bottom: 10px; }

/* 英字 */
.english {
  color: #ccc;
  margin-left: 10px; }

/* エラーメッセージ用 */
.txt_error,
.errors {
  color: #cc0000; }

/* インデント（マージン調整版） */
.indent {
  margin-left: 20px; }

.indent2 {
  margin-left: 40px; }

.indent3 {
  margin-left: 60px; }

/* ドロップダウンのセクション名（クリック出来ない部分） */
.section_title {
  color: #CCC; }

/* font awesome 右マージン調整 */
.fa {
  margin-right: 6px; }

/* レイアウト 
--------------------------*/
/* レイアウトブロック */
.block {
  margin-bottom: 30px; }

/* インラインブロック */
.inline_block {
  display: inline-block; }

/* セパレータ */
.separator {
  border-bottom: dashed 1px #CCC;
  margin-top: 10px;
  margin-bottom: 20px; }

/* メディアの下にマージンを入れればスマホでいい感じ */
.media-left {
  margin-bottom: 10px; }

/* トップかわら版の背景色（フォトフレーム） */
.kawara {
  padding: 10px;
  background-color: #EEE; }

/* ペーパーシャドウ（マテリアルデザイン） */
header,
.paper_shadow {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  position: relative; }

/* フッタの上方へのシャドウ */
footer,
.paper_shadow_up {
  -webkit-box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16), 0 -2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16), 0 -2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.16), 0 -2px 10px 0 rgba(0, 0, 0, 0.12);
  position: relative; }

/* バナーなどの上下左右シャドウ */
.box_shadow,
.link_banners li a {
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
  position: relative; }

/* バナーなどの上下左右シャドウ（hover時） */
.box_shadow a:hover,
a.box_shadow:hover,
.link_banners li a:hover {
  -webkit-box-shadow: 0px 0px 8px 1px rgba(255, 77, 20, 0.4);
  -moz-box-shadow: 0px 0px 8px 1px rgba(255, 77, 20, 0.4);
  box-shadow: 0px 0px 8px 1px rgba(255, 77, 20, 0.4); }

/* ヘッダ
--------------------------------- */
.masthead {
  background-color: #E33900;
  height: 10px; }

/* ヘッダ上下の padding */
header {
  padding: 20px 0; }

/* ナビ下のボーダーを削除 */
.navbar-default {
  border-bottom: none; }

/* ブランド名（社名） */
.brand_name * {
  margin-bottom: 0; }

.brand_name .sub_top {
  font-size: 14px; }

.brand_name .title {
  font-size: 28px;
  background-color: transparent; }

.brand_name .sub_bottom {
  color: #CCC;
  font-size: 12px; }

/* ブランドロゴとブランド名の間のマージン調整 */
.brand_logo {
  margin-right: 10px; }

/* ブランド名は明朝体 */
.brand_name .title.logo_type {
  font-family: "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 700; }

.brand_name .title.logo_type a {
  color: #222222; }

/* ブランド名の株式会社の調整 */
.brand_name .title .small {
  vertical-align: middle; }

/* スマホ時の下マージン調整 */
@media (max-width: 767px) {
  .brand_logo {
    margin-bottom: 20px; } }
/* 電話番号下のマージン調整 */
.logo_right p {
  margin-bottom: 0; }

.logo_right .sub_top {
  font-size: 14px; }

.phone {
  font-size: 28px;
  font-weight: 700; }

.logo_right .sub_bottom {
  font-size: 12px;
  background-color: #CE4E3A;
  display: inline-block;
  padding: 2px 6px; }

/* メインナビ
--------------------------------- */
/* ナビゲーションの背景色 */
.navbar.navbar-default.navbar-static-top {
  background-color: #E33900; }

/* ナビゲーションとスライダーの間の調整 */
.navbar-static-top {
  margin-bottom: 0; }

/* ナビゲーションのリンク色 */
.navbar-default .navbar-nav > li > a {
  color: #FFFFFF; }

/* ナビゲーションの hover */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #222222;
  background-color: rgba(255, 255, 255, 0.5); }

/* スマホ時のナビボタン背景 */
.navbar-default button {
  background-color: #FFFFFF; }

/* スマホ時のドロップダウンメニュー */
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    background-color: #FFFFFF; }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #222222;
    background-color: #EEE; } }
/* スライダー
--------------------------------- */
/* スライダー背景 */
.slider {
  background-color: #EEE;
  padding: 10px 0; }

/* スライダーのボーダー消去・白背景削除 */
.flexslider {
  margin: 0;
  border: none;
  background-color: transparent; }

/* スライダー下の丸いコントロール消去 */
.flex-control-paging {
  display: none; }

/* スライダー左右のコントロール下が切れるので */
.flex-direction-nav a {
  height: 50px; }

/* ページタイトル ＆ パンくずリスト
--------------------------------- */
.topic_pass {
  background-color: #EEE;
  padding: 20px 0; }

.topic_pass h1 {
  margin-bottom: 0;
  color: #222222; }

.breadcrumb {
  padding: 0;
  margin-bottom: 0;
  list-style: none;
  background-color: transparent;
  border-radius: 0; }

/* トピックス
--------------------------------- */
.topics {
  display: block;
  padding: 15px;
  text-align: center;
  border: solid 1px #CCC; }

.topics h2 {
  color: #222222;
  font-size: 24px;
  margin-bottom: 0; }

/* 業務内容（カテゴリ）
--------------------------------- */
#category .thumbnail .caption h3 {
  margin-bottom: 0;
  text-align: center;
  color: #222222; }

#category a.thumbnail:hover,
#category a.thumbnail:focus,
#category a.thumbnail.active {
  border: solid 1px #CCC; }

/* 施工事例（フォトギャラリー）
--------------------------------- */
/* 下マージンの調整 */
#case > div {
  margin-bottom: 20px; }

/* マウスオーバーでキャプション表示 */
figure {
  position: relative;
  overflow: hidden; }

figcaption {
  position: absolute;
  bottom: -60px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: .3s;
  transition: .3s;
  padding: 4px 6px; }

figure:hover figcaption {
  bottom: 0; }

/* キャプション内は下マージンなし */
figcaption > * {
  margin-bottom: 0;
  color: #FFFFFF; }

/* baguetteBox の場合、上記 figcaption の表示位置がずれるので調整 */
#baguetteBox-overlay .full-image figure {
  position: static; }

#baguetteBox-overlay .full-image figcaption {
  height: auto; }

/* お知らせ
--------------------------------- */
.info {
  margin-bottom: 20px; }

.info ul li {
  border-bottom: dotted 1px #CCC;
  margin-bottom: 6px; }

.info ul li a {
  color: #222222; }

.info ul li a:hover {
  color: #E33900; }

.infodate {
  color: #E33900;
  margin-bottom: 0; }

/* 日付先頭に FontAwesome アイコン付与 */
.infodate:before {
  content: "\f054";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em; }

.infotext {
  margin-left: 1.2em;
  margin-bottom: 6px; }

/* ブログ
--------------------------------- */
/* 白だと見えないので */
#blog h4 a:visited {
  color: #551A8B; }

/* ブログ一覧のマージン調整 */
#blog .blog_entry {
  margin-bottom: 10px;
  border-bottom: dotted 1px #CCC; }

#blog .blog_entry h4 {
  margin-bottom: 4px; }

/* ブログのサムネイルのマージン調整 */
#blog .thumb.pull-left {
  margin-right: 10px; }

#blog .thumb.pull-right {
  margin-left: 10px; }

/* フッタ
--------------------------------- */
footer {
  background-color: #E33900;
  color: #FFF4F0;
  padding: 20px 0;
  font-weight: 200; }

/* フッタのリンク */
footer a,
footer a:hover,
footer a:focus {
  color: #FFF4F0; }

footer a:hover {
  color: #FFFFFF; }

/* 会社名 */
.corporate {
  font-size: 20px;
  font-family: "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 700;
  color: #FFFFFF; }

/* コピーライト */
.copyright {
  background-color: #c11700;
  color: #FFF4F0;
  padding: 2px 0 4px; }

/* フットナビ */
.footnavi li {
  margin: 0 4px 6px 5px;
  padding: 0;
  line-height: 1.4; }

.footnavi li a {
  border-left: solid 1px #C43100;
  padding: 2px 6px;
  font-size: 16px;
  /* スマホでは大きめに */ }

@media (min-width: 768px) {
  .footnavi li a {
    font-size: 14px;
    /* 大きさを戻す */ } }
.footnavi li a:hover {
  background-color: rgba(0, 0, 0, 0.2); }

/* 会社概要ページ
--------------------------------- */
img.pull-left {
  margin-right: 10px;
  amrgin-bottom: 10px; }

/* 施工実績の詳細ページ
--------------------------------- */
/* タグの文字は太字解除、改行してもマージン空ける */
.tags .label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 4px;
  padding: 6px 10px; }

/* 概要の文章間をちょっと空ける */
.summary p {
  margin-bottom: 20px; }

/* ここがポイント */
p.this_point {
  margin-bottom: 6px; }

p.this_point span {
  padding: 4px 10px;
  display: inline-block; }

/* 文字の先頭に FontAwesome アイコン付与 */
p.this_point span:before {
  content: "\f06a";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em; }

/* リボン・バッヂ
-------------------------------------------------------- */
[class^="ribbon-"], [class*=" ribbon-"] {
  display: inline-block;
  width: 62px;
  height: 62px;
  background-image: url("../images/ribbons/ribbon_ready.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  left: 0px; }

.ribbon-open {
  background-image: url("../images/ribbons/ribbon_open.png"); }

.ribbon-close {
  background-image: url("../images/ribbons/ribbon_close.png"); }

.ribbon-ready {
  background-image: url("../images/ribbons/ribbon_ready.png"); }

.ribbon-new {
  background-image: url("../images/ribbons/ribbon_new.png"); }

/* カテゴリ
-------------------------------------------------------- */
[class^="category-"], [class*=" category-"] {
  display: inline-block;
  width: 105px;
  height: 31px;
  background-image: url("../images/categories/category_sonota.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 6px;
  left: 8px; }

.category-order {
  background-image: url("../images/categories/category_order.png"); }

.category-reform {
  background-image: url("../images/categories/category_reform.png"); }

.category-tenant {
  background-image: url("../images/categories/category_tenant.png"); }

.category-public {
  background-image: url("../images/categories/category_public.png"); }

.category-sonota {
  background-image: url("../images/categories/category_sonota.png"); }

/* リフォームのビフォーアフター
-------------------------------------------------------- */
[class^="overlay-"], [class*=" overlay-"] {
  display: inline-block;
  width: 105px;
  height: 31px;
  background-image: url("../images/overlays/overlay_before.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  top: 8px;
  left: -2px; }

.overlay-before {
  background-image: url("../images/overlays/overlay_before.png"); }

.overlay-after {
  background-image: url("../images/overlays/overlay_after.png"); }

/* オーバーレイの外枠 */
.overlay_frame {
  position: relative; }

/* 送信フォーム 
------------------------------------------------*/
/* 必須入力の前にアスタリスクをつける */
.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; }

/* 資料請求ボタン、お問い合せボタンの調整 */
.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 {
  font-size: 20px; }

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

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

/* ボタンが上の項目と近いので離す */
.form-actions {
  margin-top: 10px; }