@charset "UTF-8";
/* CSS Document */

@import url("bootstrap-10px.css");
@import url("fonts.css");
@import url("hnm_nucleus.css");

html, body { overflow-x: hidden;} 

/* グローバルナビ */
.navbar-inverse { background-color: rgba(44,55,68,0.9); border: none; }
#navbar .catnabi > li a{
	color: #f2f2f2;
	font-weight: bold;
	transition: background-color 0.6s;
}
#navbar .catnabi > li a:hover,
#navbar .catnabi > li a:focus{
	background-color: rgba(164, 179, 197, 0.9);
	color: #fff;
}

/* サムネール */
.thumbnail {
	position: relative;
	overflow: hidden;
	padding: 0.5rem;
	/*line-height: 1.5rem;*/
}
.thumbnail > a{
	display: block;
	overflow: hidden;
}
.thumbnail > a img{ width: 100%; }
.thumbnail dl {
	position: relative;
	padding: 0;
	margin: 0;
	background-color: rgba(255,255,255,1);
}
.thumbnail dt {
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 2em;
	border:none;
	width: 100%;
	height: 2rem;
}
.thumbnail dt a {
	padding: 0;
	color: #454545;
	font-size: 1rem;
	font-weight: bold;
}
.thumbnail dt a:hover{
	text-decoration: none;
	color: #000;
}
.thumbnail dd { padding: 0; }
.thumbnail dd p:nth-child(1){
	overflow: hidden;
	color: #454545;
	font-size: 1rem;
	line-height: 1.25em;
}

/* サムネボックス */
.hnm_boxes .thumbnail {
	border-radius: 4px;
	margin-bottom: 2rem;
}
.hnm_boxes .thumbnail > a{ height: 12rem; }
.hnm_boxes .thumbnail > a img{}
.hnm_boxes .thumbnail dl {
	margin: -5rem 0 0;
	background-color: rgba(255,255,255,0.6);
}
.hnm_boxes .thumbnail dt {}
.hnm_boxes .thumbnail dt a { padding: 0 0.1rem; }
.hnm_boxes .thumbnail dd { padding: 0 0 0 0.5rem; }
.hnm_boxes .thumbnail dd p:nth-child(1){
	height: 2.5rem;
	margin-bottom: 0.3rem;
}

/* サムネアイテム */
.hnm_items .thumbnail {
	border-radius: 0;
	border-width: 0 0 1px 0;
	margin-bottom: 1rem;
}
.hnm_items .thumbnail > a{
	width: 38%;
	height: 7rem;
	float: left;
}
.hnm_items .thumbnail > a img{}
.hnm_items .thumbnail dl,
.hnm_items .thumbnail > dd {
	width: 60%;
	float: right;
}
.hnm_items .thumbnail dt {
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.5rem;
}
.hnm_items .thumbnail dt a { padding: 0 0.1rem; }
.hnm_items .thumbnail dd { padding: 0 0 0 0.5rem; }
.hnm_items .thumbnail dd p:nth-child(1){
	height: 3.75rem;
	margin-bottom: 0.3rem;
}

/* サムネリスト */
.hnm_lists .thumbnail {
	margin-bottom: 2rem;
	border-radius: 0;
	border-width: 0 0 1px 0;
}
.hnm_lists .thumbnail > a{
	width: 28%;
	height: 10rem;
	float: left;
}
.hnm_lists .thumbnail > a img{}
.hnm_lists .thumbnail dt {
	border-bottom: 1px solid #ccc;
	margin-bottom: 0.5rem;
}
.hnm_lists .thumbnail dt a {
	font-size: 1.4rem;
	padding: 0 0.5rem;
}
.hnm_lists .thumbnail dt .small { color: #777; }
.hnm_lists .thumbnail dd {
	width: 70%;
	float: right;
	padding: 0 0 0 0.5rem;
}
.hnm_lists .thumbnail dd .hnm_date{
	color: #777;
	margin-bottom: 1rem;
}
.hnm_lists .thumbnail dd p:nth-child(1){
	height: 4.5em;
	line-height: 1.5em;
	margin-bottom: 0.3rem;
}

/* サイドナビ */
.list-group > li a{
	position: relative;
	display: block;
	padding: 10px 15px;
	border: 1px solid #ddd;

	border-radius: 4px;
	margin-bottom: 0.2rem;
	background-color: #576d87;
	color: #f2f2f2;
	font-weight: bold;
	transition: background-color 0.6s;
}
.list-group > li a:hover,
.list-group > li a:focus{
	text-decoration: none;
	background-color: #4c5f76;
	color: #fff;
}

#hnm_greeting{
	background-color: rgba(187, 218, 244, 0.3);
	border-radius: 4px;
	padding: 0.5rem 0;
	margin-bottom: 1rem;
	text-align: center;
}
#hnm_greeting img.photo{ max-width: 90%; margin-bottom: 1rem; }
#hnm_greeting dl{ text-align: left; font-size: 1rem; }
#hnm_greeting dt{ padding-left: 2rem; color: #c1272d; }
#hnm_greeting dd{ padding:0 1rem; font-size: 0.9rem; }
#hnm_greeting dd.name{ text-align: right; padding: 0.5rem 2rem 0 0;}

/* jumbotron */
.container .jumbotron{ background-color: #fff; padding: 0; }
.container .jumbotron img { width: 100%; height: auto; }

/* container */
section{ line-height: 2em; }

/* breadcrumb */
section .breadcrumb {
	padding: 0;
	margin:0 0 2rem;
	background-color: transparent;
}
section .breadcrumb>li+li:before {
	padding: 0 0.3em;
	content: ">\00a0";
	color: #d9d9d9;
}

/* sns-link */
section .sns-link{
	position: relative;
	height: 22px;
	text-align: right;
	margin-bottom: 1rem;
}
section .sns-link a, section .sns-link span{ vertical-align: top; }
section .sns-link .fb_iframe_widget{ top:-9px; }

section h2{
	height: 2rem;
	margin-bottom: 1rem;
	overflow: hidden;
	color: #364454;
	font-size: 1.5rem;
	font-weight: bold;
	background-color: transparent;
	border:none;
	border-bottom: 1px solid #b3b3b3;
}
section h2.title_line{
	background-color: rgba(187, 218, 244, 0.3);
	border:none;
	padding: 0.1rem 0 0.1rem 0.5rem;
}
section h2.title_line span{
	border-left: 3px solid #4c5f76;
	padding-left: 0.5rem;
	font-weight: bold;
	font-size: 1rem;
}

/*DLリスト*/
.hnm_dl_lists dl{
	padding-bottom: 0;
	margin-bottom: 2rem;
	border-bottom: 1px dotted #666;
}

/*お知らせリスト*/
.whats_new_list li{ margin-left: 1rem; text-indent: -1rem;}
.whats_new_list li a{ color: #333;}
.whats_new_list li a span{color: #337ab7;}
.whats_new_list .list_time{display: none;}

/*お知らせリスト*/
.aboutus_list li{ padding-left: 1rem; border-bottom: 1px #666 dotted;}
.aboutus_list li a{ color: #333;}
.aboutus_list li .midasi{color: #000; font-weight: bold;}
.aboutus_list .list_time{display: none;}

/* コンテンツ */
.container img{ max-width: 100%; }

/* ページャー */
.pager {
	padding-left: 0;
	margin: 22px 0 55px;
	list-style: none;
	text-align: center;
}
.pager:before, .pager:after {
	content: " ";
	display: table;
}
.pager:after {
	clear: both;
}
.pager li {
	display: inline;
}
.pager li > a,
.pager li > span {
	display: inline-block;
	width: 30%;
	padding: 10px 0;
	background-color: #d9d9d9;
	border: 1px solid #b3b3b3;
	border-radius: 30px;
}
.pager li > a:hover,
.pager li > a:focus {
	text-decoration: none;
	background-color: #cfd6e0;
}
.pager .next > a,
.pager .next > span {
	float: right;
}
.pager .previous > a,
.pager .previous > span {
	float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
	color: #b3b3b3;
	background-color: #d9d9d9;
	cursor: not-allowed;
}

/*製品情報*/
.product_main{
	margin-bottom: 2rem;
}
.product_spec{
	margin-bottom: 2rem;
}
.product_form{
	margin-bottom: 2rem;
}

.product_main h2:nth-child(1), .product_form h2{
	border: none;
	border-radius: 4px;
	background-color: #576d87;
	color: #f2f2f2;
	line-height: 1em;
	padding: 0.9rem 0 0.7rem 1rem;
	height: 3rem;
}
.product_main h2.title_line, .product_form h2.title_line{
	line-height: 1em;
	height: 2rem;
}
a.color-fff{
	color: #f2f2f2;
}
a.color-fff:hover, a.color-fff:focus{
	color: #fff;
}
.product_main h3, .product_spec h3, .product_form h3{
	height: 2rem;
	/*line-height: 1.5em;*/
	font-weight: bold;
	font-size: 1.2rem;
}
.product_spec dl{
	border-bottom: 1px dotted #666;
}
.product_spec dl dt{
	font-size: 1rem;
}

/*footer*/
footer {
	padding: 3rem 0;
	background-color: #f2f2f2;
	color: #949494;
	text-align: center;
	border-top: 2px solid rgba(145,145,145, 0.1);
	font-family: serif;
}

/*トップボタン*/
button#btn_top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	background: none;
	border: none;
	padding: 0;
	text-align: center;
	opacity: 0.6;
}
button#btn_top:hover { opacity: 1; }
button#btn_top .glyphicon:before {
	font-size: 3rem;
	text-align: left;
	color: #364454;
}

@media (max-width: 767px){
	body{ padding-top: 50px; }
	/* navbar */
	.xs-navbar-fixed-top{ position: fixed; top: 0; right: 0; left: 0; z-index: 1030; border-width: 0 0 1px; }
	#navbar .catnabi > li a{ letter-spacing: 0.2rem; }
	.navbar-inverse .navbar-brand { padding:0 0 0 2rem; font-weight: bold; font-size: 1.2rem; }
	.navbar-inverse .navbar-brand a{ color: rgba(256,256,256, 0.7); }
	.navbar-inverse .navbar-brand a:hover{ color: rgba(256,256,256, 1); }
	.navbar-inverse .navbar-brand .small{ font-weight: normal; font-size: 0.6em; }
	.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header{ border-color: rgba(0, 0, 0, 0.5); }

	.navbar-inverse .navbar-toggle { background-color: transparent; border-color: #e2e2e2; }
	.navbar-inverse .navbar-toggle:hover,
	.navbar-inverse .navbar-toggle:focus{ background-color: rgba(164, 179, 197, 0.9); }
	.navbar-inverse .navbar-toggle .icon-bar { background-color: #f2f2f2; }

	/* opt_menu */
	#opt_menu{
		margin-bottom: 1rem;
		text-align: center;
	}
	#opt_menu a.opt_menu_but,
	#opt_menu a.offcanvas_list{
		display: inline-block;
		width: 48%;
		height: 3rem;
		padding: 1rem 0;
		margin: 0;
		text-align: center;
		background-color: #576d87;
		color: #fff;
		line-height: 1em;
		text-decoration: none;
	}
	#opt_menu a.opt_menu_but:hover,
	#opt_menu a.opt_menu_but:focus{
		background-color: #4c5f76;
	}
	#opt_menu a.offcanvas_list{
		background-color: #337ab7;
	}
	#opt_menu a.offcanvas_list:hover,
	#opt_menu a.offcanvas_list:focus{
		background-color: #286090;
	}

	/* Off Canvas */
	.row-offcanvas {
		position: relative;
		-webkit-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
		transition: all .25s ease-out;
	}
	.row-offcanvas-right { right: 0; }
	.row-offcanvas-left { left: 0; }
	.row-offcanvas-right .sidebar-offcanvas { right: -50%; } /* 6 columns */
	.row-offcanvas-left .sidebar-offcanvas { left: -50%; } /* 6 columns */
	.row-offcanvas-right.active { right: 50%; } /* 6 columns */
	.row-offcanvas-left.active { left: 50%; } /* 6 columns */
	.sidebar-offcanvas { position: absolute; top: 0; width: 50%; } /* 6 columns */

	.fb-like-box{ text-align: center; }
}

@media (min-width: 768px){
	body { padding-top: 0; }
	/* opt_menu */
	#opt_menu{
		float:right;
		text-align:right;
		padding-right: 15px;
	}
	#opt_menu a.opt_menu_but{
		display: inline-block;
		width: 110px;
		height: 30px;
		padding: 10px 0;
		margin: 0;
		text-align: center;
		background-color: #576d87;
		color: #fff;
		line-height: 10px;
		border-bottom-left-radius: 4px; 
		border-bottom-right-radius: 4px; 
		-webkit-border-bottom-left-radius: 4px; 
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-bottomleft: 4px;
		-moz-border-radius-bottomright: 4px;
	}
	#opt_menu a.opt_menu_but:hover{
		text-decoration: none;
		background-color: #4c5f76;
	}
	#opt_menu a.opt_menu_but:focus{
		background-color: #c1272d;
	}

	/*KANBAN*/
	.head_logo{
		padding:0 0 0 2rem;
		margin: 0;
		font-weight: bold;
	}

	/* navbar */
	.navbar { border-radius: 0; }
	#navbar .catnabi{ width: 100%; padding: 0; }
	#navbar .catnabi > li{ width: 25%; border-right: 2px solid #fff;}
	#navbar .catnabi > li:nth-child(1){ border-left: 2px solid #fff;}
	#navbar .catnabi > li a{ display: table; letter-spacing: 0; width: 100%; text-align: center; font-size: 1.2rem; line-height: 2rem; }

	.navbar-form .form-group { width: 80%; }
	.navbar-form .form-control { width: 90%; }

	.fb-like-box{ text-align: right; }
}
@media (min-width: 992px){
	#navbar .catnabi > li a{ letter-spacing: 0.2rem; }
}
@media (min-width: 1200px){
}

/*============================
IE10以降用のフォント指定
==============================*/
@media (-ms-high-contrast:none) {
	.thumbnail dt a { font-size: 14px; }
	.thumbnail dd p:nth-child(1){ font-size: 14px; }
	.hnm_lists .thumbnail dt a { font-size: 20px; }
	#hnm_greeting dl{ font-size: 14px; }
	#hnm_greeting dd{ font-size: 12px; }
	section h2{ font-size: 21px; }
	section h2.title_line span{ font-size: 14px; }
	.product_main h3, .product_spec h3, .product_form h3{ font-size: 17px; }
	.product_spec dl dt{ font-size: 14px; }
	button#btn_top .glyphicon:before { font-size: 42px; }
}
@media (-ms-high-contrast:none) and (max-width: 767px){
	.navbar-inverse .navbar-brand { font-size: 17px; }
}
@media (-ms-high-contrast:none) and (min-width: 768px){
	#navbar .catnabi > li a{ font-size: 17px; }
}
@media (-ms-high-contrast:none) and (min-width: 992px){}
@media (-ms-high-contrast:none) and (min-width: 1200px){}