@charset "utf-8";



/* 全体設定
----------------------------- */
body {
	color: #666;	/* 文字色 */
	font-family: 'Yu Gothic', Meiryo, sans-serif;	/* フォント指定 游ゴシック,メイリオ優先 */
	font-size: 0.9em;	/* 文字サイズ */
	background: url("../img/menu/dotbg2.png") fixed,
				url("../img/menu/bg.jpg") top center fixed;	/* 背景画像 */
	background-size: auto, cover;	/* 背景画像サイズ指定 */
}

a:link, a:visited {	/* リンク文字に下線つけない */
	text-decoration: none;
}


/* リンクホバーアニメーション
----------------------------- */
a {
	-moz-transition: background .2s ease-out;
	-webkit-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	transition: background .2s ease-out;
}

a img {	/* リンク画像にマウスあわせると白くなるやつ */
	opacity: 1;
	-moz-transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;
	-ms-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
}
a img:hover {
	opacity: 0.8;
}
#header_banner img:hover {	/* 最上部メインメニュー画像は白くしない */
	opacity: 1;
}



/* webfont
----------------------------- */
h1,h2,h3,h4,h5,h6 {	/* bootstrapフォント再指定 */
	font-family: 'Yu Gothic', Meiryo, sans-serif;
}
.navbar .nav>li>a, .nonactive, #head_wrap, .menu_title_m, .navbar .nav-collapse .nav li>a, footer {	/* メインメニュー, メインメニュー非アクティブ, indexのデスクトップ用メニュー, モバイル用メニュータイトル, モバイル用メインメニューリンク */
	font-family: 'Overlock SC', 'Yu Gothic', Meiryo, sans-serif;
}
h2 {	/* product年代とかの文字 */
	font-family: 'Antic Didone', 'Yu Gothic', Meiryo, serif;
}
.menu_ruby, .h2_ruby {	/* ルビはメイリオ */
	font-family: 'Yu Gothic', Meiryo, sans-serif;
}



/* bootstrap修正
----------------------------- */
.navbar-inner {	/* メインメニュー */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0054b4eb',endColorstr='#002fa4e7',GradientType=0); BORDER-LEFT: #1990d5 1px solid
	background: transparent;
	min-height: 0px;
}
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {	/* box-shadow解除 */
	-webkit-box-shadow: 0 0 0 #fff;
	-moz-box-shadow: 0 0 0 #fff;
	box-shadow: 0 0 0 #fff;
}
.navbar .nav>li>a {		/* メインメニューの各項目ボタン */
	text-shadow: 0 0 0 transparent;	/* text-shadow解除 */
	border-top: 3px solid transparent;
	text-shadow: 1px 0 2px #fff,
				-1px 0 2px #fff,
				0 1px 2px #fff,
				0 -1px 2px #fff;
				
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {	/* メインメニューのhover時カラーここ */
	background-color: transparent;
	border-top: 3px solid #CCFFFF;
	text-shadow: 2px 2px 2px #ccc;
	background: #fff;


	-moz-transition: all .2s ease-out;
	-webkit-transition: all .2s ease-out;
	-ms-transition: all .2s ease-out;
	transition: all .2s ease-out;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {	/* メインメニューのactiveページカラー */
	background-color: transparent;
	-webkit-box-shadow: 0 0 0 #fff;
	-moz-box-shadow: 0 0 0 #fff;
	box-shadow: 0 0 0 #fff;

	border-top: 3px solid #66CCFF;
}
.navbar-fixed-top {
  top: auto;
	position: static;	/* メインメニューfixed固定解除 */
}
.navbar-inner {
	background-position: left top;
	background-color: transparent;	/* メニュー背景色解除 */
	background-image: none;	/* メニュー背景色謎のグラデ解除 */
	margin-bottom: 1em;	/* メインメニュー下の影のぶんのスペース確保 */
}

/* bootstrapボタン修正
----------------------------- */
.btn {
	color: #777;
}
.btn:hover {
	color: #666;
}


/* メインメニュー設定
----------------------------- */
header {
	background:-webkit-gradient( linear, center top, center bottom, color-stop(5%, rgba(235,245,255,0.5)), color-stop(100%, #fff) );
	background:-moz-linear-gradient( center top, rgba(235,245,255,0.5) 5%, #fff 100% );
	background:-ms-linear-gradient( top, rgba(235,245,255,0.5) 5%, #fff 100% );
	background:linear-gradient(to bottom, rgba(235,245,255,0.5) 5%, #fff 100%);
	font-size: 1.3rem;
	box-shadow: 0 0 15px #ddd;
}
a#header_logo:hover {
	opacity: 1;
}
.menu_ruby {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
}

header li:before {	/* メインメニューの各ボタン横の縦点線 */
	content: "";
	display: block;
	width: 0.1em;
	height: 1.5em;
	margin-top: 1.5em;
	float: left;
	border-left: 1px dashed #999;
}
header li:first-child:before {
	border-left: 0px dashed #fff;
}

#header_logo {	/* 左上ロゴ */
	margin-left: 0;
	margin-right :0;
}
@media (max-width: 960px) {
	#header_logo { text-align: center; }
}

.menu_title_m {	/* モバイル用ページタイトル */
	font-size: 2rem;
	margin: 0em 0.25em 0;
	color: #555;
}
.navbar .nav>li {	/* メインメニュー各項目 */
	text-align: center
}



/* Sticky footer styles
-------------------------------------------------- */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -5em;
}
 
/* Set the fixed height of the footer here */
#push,
footer {
  height: 3em;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}




/* 最下部フッター
----------------------------- */
footer {
	margin: 2em 0 0;
	background: rgba(0,0,0,0.5);
	box-shadow: 0 0 1px #fff inset;
}
@media (max-width: 960px) {
	footer { overflow: auto; line-height: 1; height: 6em; }
}

footer small {	/* コピーライト部分 */
	font-size: 0.9rem;
	letter-spacing: 0.25em;
	text-align: center;
	display: block;
	color: #fff;
	margin-top: 0.6em;
}

/* SNSボタン
----------------------------- */
#socialbtn {
	overflow: hidden;
	float: right;
	width: 24em;
	margin-top: 0.7em;
}
@media (max-width: 960px) {
	#socialbtn { margin: 0.5em 0 0 0; }
	#socialbtn div { margin: 0; }
}
#socialbtn div {	/* SNSボタン個別設定 */
	float: right;
	margin: 0 5px;
}




/* 共通レイアウト
----------------------------- */
h1 {	/* 上メインメニューのブランドロゴ */
	margin: 0;
}
.ruby_title {
	font-size: 0.7rem;
	letter-spacing: 0.5rem;
	border-top: 1px dashed #fff;
}

.wrap_title {
	background: #444;
}


article {	/* productの年代別背景とかで使ってる範囲 */
	background: rgba(0,0,0,0.2);
	padding: 0 0 2em;
	margin: 3em 0 2em;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

h2 {	/* 年代別タイトル */
	text-align: center;
	font-weight: normal;
	font-size: 1.5rem;
	letter-spacing: 1em;
	color: #fff;
	border-bottom: 1px dashed #fff;
	padding: 0 0 0.3em;
	margin: 0 5% 1em;
	text-shadow: 0 0 5px #fff;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 75%);
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 75%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 75%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 75%);
}
.h2_ruby {	/* 年代別タイトルの右側サブタイ */
	font-size: 0.7rem;
	letter-spacing: 0.5rem;
	margin-left: 2em;
}
.h2_ruby:before, .h2_ruby:after {
	content: "-";
}


/* 共通コンテンツブロック
----------------------------- */
.box {	/* 基本ボックス */
	color: #555;
	margin: 1em 0;
	padding: 0.5em;
	border-radius: 5px;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 0 15px rgba(0,0,0,0.2),
				0 0 1px #99CCFF inset;
}


h3 {	/* 基本ボックスタイトル */
	font-weight: normal;
	font-size: 1.5rem;
	line-height: 1;
	margin: 0.5em 0 1em;
	padding: 0em 0.5em 0;
	letter-spacing: 0.1em;
	border-radius: 15px;
	text-align: center;
}
.title_color1 {	border-left: 1em solid #FFA9D3;	border-right: 1em solid #FFA9D3;	border-bottom: 2px solid #FFA9D3; }
.title_color2 {	border-left: 1em solid #FFD67A;	border-right: 1em solid #FFD67A;	border-bottom: 2px solid #FFD67A; }
.title_color3 {	border-left: 1em solid #B3C5FF;	border-right: 1em solid #B3C5FF;	border-bottom: 2px solid #B3C5FF; }
.title_color4 {	border-left: 1em solid #CCFF7A;	border-right: 1em solid #CCFF7A;	border-bottom: 2px solid #CCFF7A; }
.title_color5 {	border-left: 1em solid #7095e1;	border-right: 1em solid #7095e1;	border-bottom: 2px solid #7095e1; }

h4 {	/* ブロック内サブタイトル */
	font-weight: normal;
	font-size: 1.3rem;
	padding: 0 0.5em;
	margin: 0 0.5em;
}