@charset "utf-8";
/* -------------------------------------------------------------------------
 Colors
---------------------------------------------------------------------------- */
/* 文字 */
.sg-font--1 .sg-color-swatch {background: #333;}
/* ボタン */
.sg-border--1 .sg-color-swatch {background: #cac8c8;}
.sg-btn--1 .sg-color-swatch {background: #2e323d;}
.sg-btn--2 .sg-color-swatch {background: #e6e6e7;}
/* 背景 */
.blue-bg--1 .sg-color-swatch {background: #6c92b5;}
.gray-bg--1 .sg-color-swatch {background: #efeff0;}
.gray-bg--2 .sg-color-swatch {background: #faf9f9;}
.green-bg--1 .sg-color-swatch { background-color: #5ea03a;}
.orange-bg--1 .sg-color-swatch { background-color: #e6a13f;}
.shop-bg--1 .sg-color-swatch { background-color: #f2322c;}
.join-bg--1 .sg-color-swatch { background-color: #f2322c;}
.link-bg--1 .sg-color-swatch { background-color: #f2322c;}
.jimo-bg--1 .sg-color-swatch { background-color: #f2322c;}
.life-bg--1 .sg-color-swatch { background-color: #f2322c;}
/* カテゴリカラー */
.shop-color--1 .sg-color-swatch {background: #e71f19;}
.shop-color--2 .sg-color-swatch {background: #ed3535;}
.join-color--1 .sg-color-swatch {background: #86b670;}
.join-color--2 .sg-color-swatch { background: #4d9a1f;}
.link-color--1 .sg-color-swatch {background: #ecb82b;}
.jimo-color--1 .sg-color-swatch {background: #13b988;}
.life-color--1 .sg-color-swatch {background: #8a8dc1;}

/* -------------------------------------------------------------------------
 Fonts
---------------------------------------------------------------------------- */
.sg-font {
	font-size: 14px;
	margin: 0 0 10px 0;
}
.sg-font-primary {font-family : YuGothic, '游ゴシック', sans-serif;}

.sg-font-secondary {font-family: "Hiragino Kaku Gothic ProN";}

.sg-font-thirdry {font-family: Meiryo;}

/* -------------------------------------------------------------------------
 Alerts
---------------------------------------------------------------------------- */
/**
 * Alert styles. Your patterns/styles will vary. 
 * You should link your main stylesheet up with Style Guide Boilerplate for 
 * best results. When you update your site's styles, your style guide will
 * update as well.
 */

.alert-warning {
  background-color: #fcf8e3;
  border-color: #fbeed5;
  color: #c09853;
}

.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}

/* -------------------------------------------------------------------------
 Breadcrumbs
---------------------------------------------------------------------------- */
/**
 * Breadcrumb styles for first pattern. Your patterns/styles will vary. 
 * You should link your main stylesheet up with Style Guide Boilerplate for 
 * best results. When you update your site's styles, your style guide will
 * update as well.
 */
.breadcrumb {
   background-color: #eee;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  list-style: none;
  margin: 0 0 20px;
  padding: 8px 15px;
}

.breadcrumb li {
  display: inline-block;
  *display: inline;
  text-shadow: 0 1px 0 #fff;
  *zoom: 1;
}

.breadcrumb li a {
  color: #007f96;
  text-decoration: none;
}

.breadcrumb li a:hover {
  color: #004068;
}

.breadcrumb li .divider {  
  color: #aaa;
  padding: 0 5px;
}

.breadcrumb .active {
  color: #555;
}