@charset "utf-8";

/**
 *
 *  utility.css
 *
 *  単語間はハイフン-で接続
 *  共通パーツの意味分けは下記接頭辞を付与。その際、アンダーバー_で接続
 *
 *  ・utility    接頭辞 u_
 *   便利クラス。 テキストの強調、テキストの配置、余白調整など
 *  ・component  接頭辞 c_
 *   プロフィール、カテゴリindexリストなどprojectの固有パターン（再利用というより、そのためだけ！のようなもの）
 *  ・project    接頭辞 p_
 *   コメントエリア、プロフィールなど大枠パーツになるもの また、共通コンテンツ
 *
 *  component projectに関しては拡張する場合、先頭アンダーバー ._* の複数クラスで行う
 *  (例) .c_ttl-style01._type02(スタイルの拡張)
 *       .c_tbl-style._col3（テーブルの3カラムレイアウト）
 *
 *  状態を表すクラスに関しては.is-activeなど.is-*で統一。（拡張クラスの場合._is-*とする）
 *  (例) .c_btn-style01._is-active
 *
 *  なお、上記の接頭辞を使うcssは/shared/css/各名前.css に全て記述すること
 *
 */

/* --------------------------------------------------------------------------
   utility
--------------------------------------------------------------------------- */

/* デバイス切り替え
----------------------------------------------------------------- */
.u_sp {
  display: none;
}

.u_sp--important {
  display: none !important;
}

/* @SP */
@media all and (max-width: 767px) {
  .u_pc {
    display: none;
  }

  .u_sp {
    display: block;
  }

  .u_sp--important {
    display: block !important;
  }

  img.u_sp {
    display: inline;
  }
}

/* テキスト
----------------------------------------------------------------- */
.u_em-w {
  font-weight: bold;
}

.u_em-c {
  color: #f00;
}

/* 画像 SPのみ
----------------------------------------------------------------- */

/* @SP */
@media all and (max-width: 767px) {
  .u_fit-img {
    display: block;
    width: 100%;
    max-width: 375px;
    height: auto;
    margin: 0 auto;
  }

  .u_fit-img._max {
    width: 100%;
    max-width: 100%;
  }
}

/* 配置
----------------------------------------------------------------- */
.u_t-ct {
  text-align: center;
}

.u_t-lt {
  text-align: left;
}

.u_t-rt {
  text-align: right;
}

/* 余白
----------------------------------------------------------------- */
.u_gap {
  margin-top: 1em;
}

/* ホバー
----------------------------------------------------------------- */
.u_alpha a:hover img,
a.u_alpha:hover img,
img.u_alpha:hover {
  -ms-filter: 'alpha(opacity=70)';
  filter: alpha(opacity=70);
  opacity: 0.7;
}

/* インデント
----------------------------------------------------------------- */
.u_note,
ul.u_note li {
  padding-left: 1em;
  text-indent: -1em;
}

ul.u_note {
  padding-left: 0;
  text-indent: 0;
}

/* アイコン
----------------------------------------------------------------- */

/*
_cate01 : お店情報/太鼓判
_cate02 : 会社情報
_cate03 : 採用情報
_cate04 : メニュー/キッズ
*/
.u_ico {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  min-width: 96px;
  padding: 1px 5px 0;
  font-size: 12px;
  color: #fff;
  text-align: center;
}

.u_ico._cate01 {
  background: #ea6b61;
}

.u_ico._cate02 {
  background: #8ea7db;
}

.u_ico._cate03 {
  background: #f380b3;
}

.u_ico._cate04 {
  background: #eacb61;
}

.u_ico._cate05 {
  background: #aede71;
}

/* @SP */
@media all and (max-width: 767px) {
  .u_ico {
    min-width: 76px;
    padding: 1px 3px;
    font-size: 10px;
  }
}