@charset "UTF-8";

/*-------------------- Bootstrapのガター幅を調整するための汎用CSS --------------------*/
.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >*{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >*{ padding-right:5px;  padding-left:5px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >*{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >*{ padding-right:15px;  padding-left:15px}
.row-40{ margin-left:-20px;  margin-right:-20px}
.row-40 >*{ padding-right:20px;  padding-left:20px}
.row-50{ margin-left:-25px;  margin-right:-25px}
.row-50 >*{ padding-right:25px;  padding-left:25px}

/*-------------------- 一般設定 --------------------*/
*{

}
body{
	background: #eee url(../img/background.gif) repeat;
  font-size:14px;
  color:#444444;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Open Sans", "Helvetica Neue", Helvetica, "Arial", sans-serif;
  line-height:1.5;
}

a					{text-decoration:underline;}
a:link		{color:#0066aa;}
a:visited	{color:#770077;}
a:hover		{background:#e5f2ff;}
a:active	{text-decoration:none;}

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	line-height: 1.5;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration:none;
}
/*-------------------- 個別指定 --------------------*/
img{
}
p{
}

div{
}

form{
}

h1{
	font-size:200%;
	font-weight: 700;
	
	padding-left:60px;
	background: url(../img/h1-icon1-25px.png) no-repeat left center;
}
h1 a:link   {color:#444;}
h1 a:visited{color:#444;}

h2{
  font-size:100%;
  color:#666666;
}
h3{
  font-size:170%;
	font-weight: 600;
	margin: 0 0 1em;
}
h4{
  font-size:125%;
	font-weight: 600;
	margin: 0 0 0.25em;
	padding-left: 0.75em;
	border-left:3px solid #39c;
	border-bottom:2px solid #e0e0e0;
}
h5{
  font-size:125%;
	margin: 0 0 0.25em;
	padding-left: 1em;
	border-left:3px solid #33cc88;
	border-bottom:2px solid #e0e0e0;
}
h6{
}

/*トップページ h3*/
.top h3{
	font-size:150%;
	margin-bottom: 0.5em;
}
/*共通 h3*/
h3{
	background:#f5f8f8;
	background:-webkit-linear-gradient(to bottom, #fafdfd, #f0f8f8);
	background:linear-gradient(to bottom, #fafdfd, #f0f8f8);
	border-bottom:2px solid #00a3af;
}
h3 .heading {
  margin: 0;
  position: relative;
  padding-left: 32px;
}
h3 .heading:before,
h3 .heading:after{
  content: "□";
  position: absolute;
  width:4px;
  height: 4px;
  color:#39c;
}
h3 .heading:before {
  left:0;
  top:-4px;
}
h3 .heading:after {
  left: 5.5px;
  top: 2.5px;
}

/*ラベルリンク*/
a.a-label{
	color:inherit;
  font-size: 1.1em;
  display: inline-block;
  padding: 0.25em 0.5em;
	margin-bottom: 0.85em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 0.2em;
	text-decoration: none !important;
	box-shadow: 2px 2px 2px #eee;
}
.a-label:hover{
	background:#eee;
}

/*ボタン*/
.btn{
	box-shadow: 3px 3px 3px #ccc;
}

/*矢印リンク*/
.arrow{
  position: relative;
  padding-left: 1.1em;
	background: url(data:image/gif;base64,R0lGODlhCAAFAJEAAAAAAP///wB3zP///yH5BAEAAAMALAAAAAAIAAUAAAIKlDaGebzqoJKtAAA7) left center no-repeat;
}
.arrow:hover{
	background: #e5f2ff url(data:image/gif;base64,R0lGODlhCAAFAJEAAAAAAP///9MZGf///yH5BAEAAAMALAAAAAAIAAUAAAIKlDaGebzqoJKtAAA7) left center no-repeat;
}

/*インデント用BOX*/
div.indent-box{
	/*padding:0.5em 0 1.5em 2em;*/
	padding:0.5em 0 1.5em 0;
}
/*インデント用BOX p*/
div.indent-box p{
	margin: 0 0 0.75em;
}

/*半文字分の縦余白を作る用*/
.half-space{
	display:block;
	margin:0 !important;
	padding:0 !important;
	height:0.5em;
}

/*箱の中の余白作る用BOX*/
div.boxinbox{
	padding:1em;
}

/*フォームグループ*/
.form-group *{
	font-size:14px;
}

/*フォーム ラベル*/
label.form-control-label{
	margin:0;
}

/*商品フォーム select/inputの高さを揃える*/
select.form-control-sm,
input.form-control-sm{
	height: 2em !important;
	padding-top:2px;
	padding-bottom:2px;
}
/*複数選択フォームの高さは自動にする*/
select[multiple]{
	height:auto !important;
}

/*フォーム 登録ボタン*/
.new button,
.edit button{
	display:block;
	margin:0 auto;
}

/*各ページ説明文*/
div.description{
	margin-bottom:1em;
	padding:1em;
	border:3px double #eee;
}

/*トップページの管理者用メニューリスト*/
div.top-menu-list{
	margin-top:2em;
}

/*検索フォーム フォーム*/
.search-form form{
	margin: 0.5em 0 0.75em;
}
/*検索フォーム 入力欄*/
.search-form input{
	height: 2.5em;
	box-shadow: 0 0 4px #ddd inset;
}
.search-form input:focus{
	box-shadow: 0 0 4px #66afe9  inset;
	
}
/*検索フォーム ボタン*/
.search-form button{
	height: 2.5em;
	box-shadow: none;
}

/*クローズボタン*/
.close{
	font-size:2em;
	width:1em;
}

/*テーブル内のフォーム*/
td form{
	display:inline-block;
}

/*テーブル内の編集・削除ボタン*/
td form button.close{
	font-size:1em;
	float:none;
}

/*最終更新日*/
div.updated-at{
	margin-top:2em;
	color:gray;
}

/*テーブル上のページ情報（表示件数とか）*/
p.page-info{
	margin-bottom:0;
}

/*テーブル*/
.table{
	table-layout:fixed; /*1行目でテーブルの各幅を決定させる*/
	width: auto;
	margin-top: 0.5em;
	border-collapse: collapse;
	border: 1px;
	overflow-y: hidden;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
}

/*テーブル ヘッダ 背景*/
.table thead{
	background: #e3ecfb url(../img/table-header-back.jpg) repeat !important;
}
/*テーブル ボディ 背景*/
.table tbody{
	background: #ffffff url(../img/table-body-back.jpg) repeat !important;
}
/*テーブル ヘッダ*/
.table thead th{
	/*background-color: #dae8fc;*/
	border-collapse: collapse;
	border: 1px solid #bfd2eb;
	border: 1px solid #fff;
	text-align:center;
	vertical-align:middle;
}

/*テーブル ヘッダ（強調）*/
.table thead th.em-th{
	background-color: #f0dafc;
	background-color: rgba(251,197,255,0.4);
}

/*テーブル ボディ（強調）*/
.table tbody td.em-td{
	background-color: #fbf0ff;
	background-color: rgba(251,197,255,0.3);
}

/*テーブル ヘッダ（縦書き部分）*/
.table thead th.vertical{
	/*width:1em;*/
	line-height:1;
	vertical-align:top;
}

/*テーブル ヘッダ（効能名、効能、成分量、類似度）*/
.table thead th.efficacy,
.table tbody td.amount,
.table thead th.efficacy-name,
.table tbody td.similarity,
.table tbody td.price-a-day{
	line-height:1;
	font-size: 90%;
	padding: 2px;
	text-align: center;
	vertical-align: middle;
}

/*テーブル ストライプ*/
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
	background-color: rgba(200,200,200,0.1);
}
.table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff;
	background-color: rgba(0,0,0,0);
}

/*テーブル ホバー時の色*/
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #e6f1ff;
	background-color: rgba(150,200,255,0.1);
}

/*テーブル ソーター用の背景・アイコン設定 通常時*/
.sorter .header,
.sorter .tablesorter-header {
/* black (unsorted) double arrow */
background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
background-repeat: no-repeat;
background-position: center center;
padding: 0.7em;
cursor: pointer;
}
/*テーブル ソーター用の背景・アイコン設定 昇順時*/
.sorter .headerSortUp,
.sorter .tablesorter-headerSortUp,
.sorter .tablesorter-headerAsc {
background-color: #9fbfdf;
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
/*テーブル ソーター用の背景・アイコン設定 降順時*/
.sorter .headerSortDown,
.sorter .tablesorter-headerSortDown,
.sorter .tablesorter-headerDesc {
background-color: #8cb3d9;
background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
/*テーブル ソーター ソート対象外ヘッダ*/
.sorter thead .sorter-false {
background-image: none;
cursor: auto;
padding: 4px;
}

/*テーブル　商品数、優先度*/
.table td.num-item,
.table td.priority{
	text-align:right;
}

/*テーブル スマホはテーブルの文字を小さめにする*/
@media (max-width: 768px) {
	.table{
		font-size:80%;
		padding:2px;
	}
}

/*各種一覧ページのテーブル*/
.table-series,
.table-maker,
.table-ingredient{
	min-width:200px;
}

/*似た商品を探すボタン*/
.btn-similar{
	/*改行を許す（スマホ対策）*/
	white-space: normal;
	font-size:1.1em;
}

/*ラインナップ 枠*/
.lineup{
	padding: 10px 0;
}
/*ラインナップ タイトル*/
.lineup h5{
	text-align: left;
}
/*ラインナップ 個別ボックス*/
.lineup .lineup-box{
	font-size:12px;
}
/*ラインナップ アフィ種別枠*/
.lineup .type{
	text-align: right;
}
/*ラインナップ アフィ種別枠 文字*/
.lineup .type span{
	padding: 0 3px;
	border-radius: 0.5em;
	color:#fff;
	font-size:10px;
}
/*ラインナップ アフィ種別枠 文字 Amazon*/
.lineup .type span.amazon{
	background-color:#f90;
}
/*ラインナップ アフィ種別枠 文字 楽天*/
.lineup .type span.rakuten{
	background-color:#c00;
}

/*テーブル凡例*/
div.legend{
	font-size:90%;
	margin: 0.75em 0 1em;
}
/*サイドメニュー*/
.side-menu{
	margin:0 0 1.5em;
}
/*サイドメニュー　リスト*/
.side-menu ul li{
	font-size: 1.2em;
	margin-bottom: -1px;
	border-radius: 0 !important;
}
/*サイドメニュー　タイトル*/
.side-menu ul li.title{
	padding: 0.2em 1em;
	border: 1px solid #ddd;
	background: #e9e9e9;
	background: -webkit-linear-gradient(to bottom, #f3f3f3, #e9e9e9);
	background: linear-gradient(to bottom, #f3f3f3, #e9e9e9);
	text-shadow:1px 1px 0px rgb(255, 255, 255);
	
}
/*サイドメニュー　個別要素*/
.side-menu ul li.item{
	cursor:pointer;
	padding:0;
}
.side-menu ul li.item:hover{
	color:white;
}
/*サイドメニュー　要素1*/
.side-menu ul li.item1{
	border: 1px solid #b4d2e1;
}
.side-menu ul li.item1:hover{
	background: #0075b0;
}
/*サイドメニュー　要素2*/
.side-menu ul li.item2{
	border: 1px solid #b4dae1;
}
.side-menu ul li.item2:hover{
	background: #0093b0;
}
/*サイドメニュー　要素3*/
.side-menu ul li.item3{
	border: 1px solid #b4e1e1;
}
.side-menu ul li.item3:hover{
	background: #00b0b0;
}
/*サイドメニュー　要素4*/
.side-menu ul li.item4{
	border: 1px solid #b4e1da;
}
.side-menu ul li.item4:hover{
	background: #00b093;
}
/*サイドメニュー　要素5*/
.side-menu ul li.item5{
	border: 1px solid #b4e1d2;
}
.side-menu ul li.item5:hover{
	background: #00b075;
}
/*サイドメニュー　要素6*/
.side-menu ul li.item6{
	border: 1px solid #b4e1ca;
}
.side-menu ul li.item6:hover{
	background: #00b058;
}
/*サイドメニュー　リスト内のaタグ*/
.side-menu ul li.item a{
	display:block;
	padding:0.4em 1em;
	height:100%;
	width:100%;
	color:inherit;
	text-decoration:none;
}
.side-menu ul li.item a:hover{
	background:inherit;
	text-decoration:none;
}

/*記事下adsense*/
.ad{
	margin:1.5em 0;
}
.ad,
.ad div{
	min-height:280px;
}
.ad1{
}
.ad2{
}

/*お知らせ（更新履歴） 外枠*/
.change-log{
	margin-top: 1em;
}

/*お知らせ（更新履歴） タイトル*/
.change-log h6{
	font-size:120%;
	font-weight: 600;
	margin:0;
	padding:0.4em 0.5em 0.4em 1em;
	border:none;	
	background: #d6f5da;
	background: repeating-linear-gradient(135deg, #fff, #fff 1px, #d6f5da 1px, #d6f5da 4px);
}
/*お知らせ（更新履歴） ボックス*/
div.change-log{
	border: 1px solid #eee;
}
/*お知らせ（更新履歴） スクロール領域*/
div.change-log .scroll{
	white-space: pre;
	height: 7.5em;
	overflow-y: auto;
}

/*メールフォーム タイトル*/
.mail h6{
	font-size:120%;
	font-weight: 600;
	margin:0;
	padding:0.4em 0.5em 0.4em 1em;
	border:none;	
	background: #dbe8fb;
	background: repeating-linear-gradient(135deg, #fff, #fff 1px, #dbe8fb 1px, #dbe8fb 4px);
}
/*メールフォーム ボックス*/
div.mail{
	margin : 1em 0 1em;
	border: 1px solid #eee;
}
/*メールフォーム ボタン*/
div.mail button{
}

/*注意事項 タイトル*/
.notice h6{
	font-size:120%;
	font-weight: 600;
	margin:0;
	padding:0.4em 0.5em 0.4em 1em;
	border:none;	
	background: #fdf0b1;
	background: repeating-linear-gradient(135deg, #fff, #fff 1px, #fdf0b1 1px, #fdf0b1 4px);
}
/*注意事項 ボックス*/
div.notice{
	border: 1px solid #eee;
}
/*注意事項のリスト*/
div.notice ul{
	margin: 0 0 0 0.5em;
	padding: 0.5em 0.5em 0.5em 2em;
	list-style-image:url(data:image/gif;base64,R0lGODlhBgAJAJkAAP///2aqAGaAAAAAACH5BAAAAAAALAAAAAAGAAkAAAINhA+BpqeCVIPNQLdWAQA7);
}

/*フッター 何のユーザーで入っているかを表示する領域*/
footer .mode{
	text-align:right;
}

/*フッター ログインリンク*/
footer .login{
	text-align:right;
}

/*フッター コピーライト*/
footer .copyright{
	text-align:center;
}
/*-------------------- インライン属性 --------------------*/


/*-------------------- 外枠 --------------------*/
div.outline {
	background:#fff;
	box-shadow: 0 0 5px #aaa, 0 0 5px #aaa;
}
/*-------------------- ヘッダー --------------------*/
header.header{
	padding:15px 0 10px 0;
	box-shadow: 0 5px 10px -3px #ddd;
}
/*large以上で右下に背景画像表示*/
@media (min-width: 992px) {
	header.header{
		background: url(../img/header-back.jpg) no-repeat bottom right;
	}
}

/*-------------------- コンテンツ --------------------*/
div.content>div{
	padding-top: 25px;
	padding-bottom: 15px;
}

/*-------------------- メイン --------------------*/
div.main{
	min-height:300px;
}

/*-------------------- サブ --------------------*/
/*div.sub,*/
div.sub .ad{
	/*min-height: 600px;*/
	min-height: 300px;
}
/*large未満はサイドバーが下に落ちるから、高さを下げる*/
/*
@media (max-width: 992px) {
	div.sub,
	div.sub .ad{
		min-height: 300px;
	}
}
*/

/*-------------------- フッター --------------------*/
footer.footer{
	padding:15px 0 10px;
}