@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;
}

/* @SP */
@media all and (max-width: 767px) {
  .u_pc{
    display: none;
  }
  .u_sp{
    display: block;
  }
  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{
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

/* インデント
-----------------------------------------------------------------*/
.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;
	color: #FFF;
	font-size: 12px;
	text-align: center;
}
.u_ico._cate01{
	background: #EA6B61;
}
.u_ico._cate02{
	background: #8EA7DB;
}
.u_ico._cate03{
	background: #F380B3;
}
.u_ico._cate04{
	background: #EACB61;
}

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