@charset "UTF-8";
/* 基準カラー
--------------------------------- */
/* テーマカラー
--------------------------------- */
/* テキストカラー
--------------------------------- */
/* ボーダーカラー
--------------------------------- */
/* フォント
--------------------------------- */
/* 共通設定
--------------------------------- */
body {
  color: #333333;
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  background-image: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* テキスト基本カラー */
.default_txt_color {
  color: #333333;
}

/* テーマの強調カラー */
.theme_txt_color {
  color: #BC8E29;
}

.theme_bg_color {
  background-color: #FF8000;
  color: #FFF;
}

/* 反転カラー */
.alert_txt_color {
  color: #CE4E3A;
}

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

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

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

h2 {
  font-size: 20px;
}

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: #00468C;
  text-decoration: none;
}

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

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

/* ボタンフォーカス時の再設定 */
.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;
}

/* table のボーダーは top じゃなくて bottom に引く */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  border-top: none;
  border-bottom: 1px solid #ddd;
}

/* ボタンのフォーカス時のカラー */
.btn:focus,
.btn-showup:hover,
.btn-showup:focus {
  background-color: #ccc;
}

.navbar-fixed-top {
  background-color: #FFF;
}

/* タイポグラフィ 
--------------------------*/
/* 行間調整 */
.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;
  padding: 2px 0;
}

h1.title {
  color: #BC8E29;
  padding: 4px 0;
}

/* リード部分 */
h2.title {
  color: #BC8E29;
  border-bottom: solid 1px #BC8E29;
  margin-bottom: 10px;
  padding: 4px 0;
}

/* 項目名 */
.item {
  border-left: solid 5px #BC8E29;
  color: #BC8E29;
  padding-left: 5px;
  margin-bottom: 16px;
}

.item_sub {
  border-bottom: dotted 1px #CCC;
  color: #333333;
  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;
}

/* 頭に矢印をつける */
.arrow:before,
article .arrow:before,
.post .arrow:before {
  content: "\f138";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

.arrow {
  color: #00468C;
}

/* リンクの頭には別の矢印をつける */
a.arrow:before,
article a.arrow:before,
.post a.arrow:before {
  content: "";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

/* ご注意アイコンを付ける */
.warning:before,
article .warning:before,
.post .warning:before {
  content: "\f071";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

.warning {
  color: #CC0000;
}

/* チェックマークアイコン */
.check:before,
article .check:before,
.post .check:before {
  content: "\f00c";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

/* ビフォー・アフター */
.txt_before {
  color: #85B200;
}

.txt_after {
  color: #E75206;
}

/* タグ、ラベルの padding が小さいので大きく */
.tag li.label {
  padding: 6px;
}

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

/* ブロックの中のブロックは行間を少なく */
.block .block {
  margin-bottom: 10px;
}

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

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

/* ボックス上のアイテム */
.boxed {
  border: solid 1px #CCC;
}

/* ボックスアイテムの中のコンテンツはパディング確保 */
.boxed p {
  padding: 0 10px;
}

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

/* マストヘッド */
.masthead {
  background-color: #00742C;
  padding: 6px 0;
}

.masthead p {
  color: #FFF;
  font-size: 16px;
  margin-bottom: 0;
}

.masthead p.brand,
.masthead p.phone {
  padding: 4px 0;
}

/* ロゴマークとテキストの間のマージン */
.masthead img.logo {
  margin-right: 10px;
}

/* マストヘッド内の要素は全て下マージンなし */
.masthead * {
  margin-bottom: 0;
}

/* ペーパーシャドウ（マテリアルデザイン） */
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;
}

/* メインナビ（トップページ）
--------------------------------- */
/* ナビゲーションのアクティブ色 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  color: #333333;
  background-color: #E7F0CC;
}

/* ナビゲーションの hover */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: rgba(188, 142, 41, 0.2);
}

/* スマホ時のボタン背景色 */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #F2E8D4;
}

/* ナビが横に長くなると改行されるので */
.nav.navbar-nav {
  font-size: 14px;
}

/* ジャンボトロン
--------------------------------- */
/* 下マージン調整 */
.jumbotron {
  margin-bottom: 30px;
}

/* 横幅いっぱいに調整 */
.jumbotron img {
  width: 100%;
}

/* デバイスごとにヘッダと被らないよう調整 */
/* スマホ（xs） */
@media (max-width: 767px) {
  .jumbotron {
    padding-top: 53px;
    padding-bottom: 0;
  }
}
/* タブレット（sm） */
@media (min-width: 768px) {
  .jumbotron {
    padding-top: 104px;
    padding-bottom: 0;
  }
}
/* PCパソコン（md） */
@media (min-width: 992px) {
  .jumbotron {
    padding-top: 55px;
    padding-bottom: 0;
  }
}
/* スライダー
--------------------------------- */
/* スライダー背景 */
.slider {
  background-color: #FFF;
  /*padding: 0;*/
}

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

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

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

/* スライダーのオーバーレイ */
.slider .overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* リード
--------------------------------- */
/* リード部分 */
.lead .title {
  color: #BC8E29;
  text-align: center;
  margin-bottom: 0;
  padding: 8px 10px;
  background-image: url(../images/back_stripe_lead.png);
  background-repeat: repeat;
  border: none;
}

/* リード内のイメージの調整 */
.lead img {
  margin-bottom: 5px;
}

/* リードの文章 */
.lead p {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* キャプションの背景・角丸 */
h2.caption {
  font-size: 28px;
  padding: 10px;
  background-image: url(../images/bg_caption.png);
  background-repeat: repeat;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

h2.caption > * {
  margin-bottom: 0;
  line-height: 1;
}

h2.caption > img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 6px;
}

/* アイテムの背景 */
h3.caption {
  padding: 10px;
  background-image: url(../images/bg_item.png);
  background-repeat: repeat;
}

/* アイテム（アンダーバータイプ） */
h3.title {
  color: #BC8E29;
  border-bottom: dotted 1px #BC8E29;
  margin-bottom: 5px;
  padding: 2px 0;
}

h3.title b,
h3.title strong {
  color: #BC8E29;
  font-size: 140%;
  font-weight: 700;
}

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

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

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

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

.infotext {
  margin-bottom: 6px;
}

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

/* バナー
--------------------------------- */
/* バナー調整 */
.banner {
  background-color: #EEE;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* バナー背景（トップのみメーカー一覧用） */
.banner.makers {
  /*	background-color: #EEE;*/
  background-color: #E9EED9;
}

/* バナーのマージン調整 */
.banner .inline_block {
  margin: 10px;
}

/* バナーを上下左右に配置 */
.banner .text-center .inline_block {
  vertical-align: middle;
  text-align: center;
}

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

/* フッタのリンク */
footer a {
  color: #FFF;
}

footer a:hover {
  color: #FFF;
}

/* 会社名 */
.corporate {
  font-size: 20px;
  color: #FFF;
}

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

.footnavi li a {
  border-left: solid 2px #FFF;
  padding: 0 6px 2px;
  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);
}

/* コピーライト */
.copyright {
  background-image: url(../images/head_border_gold.png);
  background-repeat: repeat-y;
  color: #333333;
  padding: 2px 0 4px;
  font-weight: 200;
}

/* ページタイトル ＆ パンくずリスト
--------------------------------- */
.page_header {
  background-color: #F8F8F8;
  padding: 20px 10px;
  border-bottom: dotted 1px #CCC;
}

.page_header h1.title {
  margin-bottom: 0;
  padding: 0;
  color: #BC8E29;
}

/* パンくずリスト 
--------------------------*/
.topicpath {
  padding-top: 60px;
  margin-bottom: 10px;
}

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

.breadcrumb a {
  color: #BC8E29;
}

.breadcrumb a:hover {
  color: #bd8f29;
}

/* パンくずリストでリンクさせない部分 */
.breadcrumb > .disable {
  color: #999;
}

/* メッセージボード
--------------------------------- */
.message {
  margin: 100px 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;
}

/* 資料請求ボタン、お問い合せボタンの調整 */
.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: #333333;
  background-color: #F5F5F5;
}

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

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

/* 送信フォーム （postmail-utf）
------------------------------------------------*/
/* エラーメッセージ */
.msg {
  color: #CC0000;
}

/* エラ画面・確認画面のヘッダ th の背景色 */
.confirm th {
  background-color: #FFF2E5;
}

/* 詳細ページ
------------------------------------------------*/
/* 記事の前にマージンを置く */
article.post {
  margin-top: 30px;
}

/* 事例の記事の本文中の画像を img-responsive に */
article.post .case .right img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 投稿画面用（TinyMCE）
--------------------------*/
/* TinyMCE の中のDIVは点線表示 */
#editor div {
  padding: 10px;
  border: dashed 1px #CCC;
  /*clear: both;*/
}

/* インデントボックスをTinyMCE内では点線で表示させる */
#editor div.indent,
#editor div.indent2,
#editor div.indent3 {
  border: dashed 1px #CCC;
}

/* フォトギャラリーをTinyMCE内では点線で表示させる */
#editor div.gallery {
  border: dashed 1px #CCC;
}

/* TinyMCE 標準のテキスト寄せにもbootstrapと同じスタイルを */
.justifyleft {
  text-align: left;
}

.justifyright {
  text-align: right;
}

.justifycenter {
  /* これはないが一応 */
  text-align: center;
}

/* TinyMCE の中のブロックは点線表示 */
#editor div.row {
  padding: 10px;
  border: dashed 1px #CCC;
  /*clear: both;*/
}

#editor div.row div[class*="col-"],
#editor div.row p[class*="col-"] {
  padding: 10px;
  border: dashed 1px #CCC;
}

/* ドロップダウンメニューが TinyMCE で非表示になるので */
#editor ul.dropdown-menu {
  display: block;
  position: inherit;
  float: inherit;
  padding-left: 30px;
  list-style: disc;
  font-size: inherit;
  background-color: transparent;
  border: none;
  border-radius: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#editor ul.dropdown-menu a {
  color: #0085B2;
  padding: 0;
}

#editor ul.dropdown-menu a:hover {
  background-color: transparent;
}

#editor .img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

#editor .text-danger {
  color: #a94442;
}

#editor small,
#editor .small {
  font-size: 85%;
}

/* エディタ内で row に clearfix を効かせる処置 */
#editor .row:before,
#editor .row:after {
  content: " ";
  display: table;
}

#editor .row:after {
  clear: both;
}

/* 頭に矢印をつける */
#editor .arrow:before,
#editor article .arrow:before,
#editor .post .arrow:before {
  content: "\f138";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

#editor .arrow {
  color: #00468C;
}

/* リンクの頭には別の矢印をつける */
#editor a.arrow:before,
#editor article a.arrow:before,
#editor .post a.arrow:before {
  content: "\f054";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

/* ご注意アイコンを付ける */
#editor .warning:before {
  content: "\f071";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

#editor .warning {
  color: #CC0000;
}

/* チェックマークアイコン */
#editor .check:before {
  content: "\f00c";
  font-family: FontAwesome;
  display: inline-block;
  width: 1.2em;
}

/* 付箋 */
#editor .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

#editor .alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

#editor .alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

#editor .alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

/* ビフォー・アフター */
#editor .txt_before {
  color: #85B200;
}

#editor .txt_after {
  color: #E75206;
}

/* 投稿用にチャンクで用意したスタイル 
--------------------------------------*/
/* 画像左寄せ */
.img_left {
  float: left;
  margin: 0 10px 10px 0;
  max-width: 50%;
}

/* 画像右寄せ */
.img_right {
  float: right;
  margin: 0 0 10px 10px;
  max-width: 50%;
}

/* 拡大機能付き画像 */
img.modal_photo {
  width: 25%;
  /* 元の画像の最初の表示サイズ */
  height: auto;
}

#editor img.modal_photo {
  /* TinyMCE内での表示サイズ */
  width: 25%;
  height: auto;
}

@media (max-width: 767px) {
  /* スマホ時 */
  img.modal_photo {
    width: 100%;
    /* 元の画像の最初の表示サイズ */
    height: auto;
  }
}
/* フォトギャラリー 
--------------------------------------*/
.gallery {
  padding: 20px 0;
  background-color: #e3f8d3;
}

.gallery img {
  margin: 10px 0;
}

/* 商品一覧 
--------------------------------------*/
/* 価格例 
table.price {
	margin-left: 10px;
	margin-right: 10px;
}*/
/* 商品毎にドットのアンダーラインを引く */
.product {
  border-bottom: dotted 1px #CCC;
  margin-bottom: 20px;
}

/* 商品名と価格は大きく */
.product .name,
.product .tax_in {
  font-size: 18px;
  color: #BC8E29;
  margin-bottom: 5px;
}

/* 商品のラベル間の間隔がないので */
.product.detail .label {
  margin-right: 5px;
}

/* 商品説明の各項目名の下にアンダーラインを */
.product.detail dl dt {
  border-bottom: dotted 1px #CCC;
}

/* 商品説明テーブルの調整 */
.product.detail table th {
  background-color: #EEE;
  white-space: nowrap;
  vertical-align: top;
}

/* テーブルのnowrap */
th.nowrap {
  white-space: nowrap;
}

table.header_nowrap th {
  white-space: nowrap;
}

/* カテゴリタイトル */
.category {
  background-image: url(../images/head_border_gold.png);
  background-repeat: repeat-y;
  padding: 6px 10px;
  color: #FFFFFF;
}