﻿/*
Theme Name: jmc.or.jp's Theme
Theme URI: 
Description: 地図センターのテーマです。
Version: 0.9
Author: cosmo
*/
@import "reset.css";

html{
	overflow-y:scroll;
}

html,body,#wrap {
	height:100%;
}

body > #wrap{
	height:auto;
	min-height:100%;
}
body {
	width:100%;
	height:100%;
	line-height: 1.8;
	background: #FFF url(images/body_bg.jpg) no-repeat scroll center top;
}

#wrap{
	margin:0 auto;
}
html,body,#wrap {
	height:100%;
}

body > #wrap{
	height:auto;
	min-height:100%;
}

/*----------------------------------------------

	header

----------------------------------------------*/
#header {
	width: 100%;
	height: 95px;
}

#header_wrap {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#logo {
	position: absolute;
	left: 0px;
	top: 15px;
	margin: 0;
	padding: 0;
}

#header_right {
	position: absolute;
	right: 10px;
	top: 15px;
	width: 450;
	height: auto;
}

/* Googleカスタム検索 */
#header_right .gsc-control-cse {
padding-top: 0px;
}
#header_right .gs-title {
padding-bottom: 5px;
}
#header_right #search {
	width: 440px;
	margin-left: 80px;
}
#header_right #header_nav {
	text-align: right;
	margin-bottom: 10px;
	color: #2781DC;
}
#header_right #header_nav a {
	line-height: 16px;
	height: 16px;
	font-size: 11px;
	color: #2783DC;
	padding: 0 5px;
	text-decoration:none;
}

/*----------------------------------------------

	nav

----------------------------------------------*/
#nav {
	width: 100%;
	height: 40px;
	background: #2C86EA;
}
#nav_wrap {
	list-style: none outside;
	margin: 0px auto;
	width: 960px;
}
#nav ul li {
	float: left;
	width: 137px;
}
#nav .nav_top {
	width: 138px;
	margin-left: 274px;
}
#nav .nav_sub_top {
	width: 138px;
}
#nav a:hover   {
    filter:alpha(opacity=50);
    -moz-opacity:.5;
    opacity:.5;	
	text-decoration: none;
}
/*----------------------------------------------

	top_contents

----------------------------------------------*/
#contents_wrap{
	width: 960px;
	margin: 0 auto;
	background: #FFF;
	height: 100%;
	padding-bottom: 100px;
	font-size: 12px;
}
#topics{
	margin: 30px auto 0;
}
#top_catch{
	margin-bottom: 50px;
}
#top_img{
	position: relative;
	list-style: none outside;
	width:960px;
	height:330px;
	padding:0px;
	margin: 0 auto;
	background: url(images/bg_main_img.jpg) no-repeat scroll center top;
}
#top_img ul .mainmenu{
	float: left;
	width:215px;
	min-height: 160px;
	margin-top: 45px;
	margin-left: 20px;
	border-top: 4px solid #2E82DF;
	background: #FFF;
 	text-align: center;
	box-shadow: 1px 1px 2px #555;
	-moz-box-shadow: 1px 1px 2px #555; /* Firefox用 */
	-webkit-box-shadow: 1px 1px 2px #555; /* Safari,Google Chrome用 */
	z-index: 100;
}
#top_img ul .icon{
	padding-top: 48px;
	padding-bottom: 48px;
}
#top_img ul .mainmenu a:hover{
	background: #BADBFF;
	cursor: pointer;
}
	
/*----------------------------------------------

	footer

----------------------------------------------*/
#footer {
	clear: both;
	width: 100%;
	margin-top:-100px;
	background: #2C86EA;
}
#footer_wrap {
	width: 960px;
	padding-top: 10px;
	margin: 0 auto;
	position: relative;
}
#footer_wrap img {
	float: left;
	margin-right: 10px;
}
#footer_wrap p {
	color: #FFFFFF;
	line-height: 1.8em;
}
#footer_wrap .left {
	float: left;
	width: 484px;
	height: 40px;
	padding: 10px 0;
	border-right: 1px solid #95C3F4;
}
#footer_wrap .right {
	float: right;
	width: 460px;
	padding: 5px 0;
}
#footer_wrap .right p {
	font-size: 10px;
}
#footer_wrap .copy {
	clear: both;
	margin: 10px auto 0;
	text-align: center;
}

/*----------------------------------------------

	汎用スタイル

----------------------------------------------*/
.section {
	margin-bottom: 3em;
	clear: both;
}
.back_top {
	clear: both;
	margin: 40px auto 10px;
	width: 960px;
	text-align: right;
}
.path {
	margin: 1em 0 2em;
	clear: both;
}

.section .page_title {
	padding-left: 45px;
	margin-bottom: 1em;	
	color: #2C86EA;
	border-bottom: 1px dotted #2C86EA;
	font-size: 26px;
	font-weight: normal;
}
.section .page_title.buy {
	background: url(images/head_page_title_buy.png) no-repeat scroll left center;
	-moz-background-size:36px 28px;
	background-size:36px 28px;
}

.section .page_title.watch {
	background: url(images/head_page_title_watch.png) no-repeat scroll left center;
	-moz-background-size:32px 33px;
	background-size:32px 33px;
}

.section .page_title.learn {
	background: url(images/head_page_title_learn.png) no-repeat scroll left center;
	-moz-background-size:28px 34px;
	background-size:28px 34px;
}

.section .page_title.examine {
	background: url(images/head_page_title_examine.png) no-repeat scroll left center;
	-moz-background-size:32px 32px;
	background-size:32px 32px;
}
/*----------------------------------------------

	トップページ

----------------------------------------------*/

/* タブメニュー */
#topics_list_nav {
}
#topics_list_nav li {
	float: left;
	display: inline-block;
	width: 230px;
	line-height: 40px;
	color: #666;
	font-size: 16px;
	cursor: pointer;
	background: #CFCFCF url(./images/bg_list_tab.png) no-repeat scroll left top;
	text-align: center;
}
#topics_list_nav li.selected {
	color: #FFF;
	background: #338AEB url(./images/bg_list_tab.png) 0 -40px;

}
#topics_list_area {
	border: 2px solid #2c86ea;
	padding: 20px;
	width: 646px;
	min-height: 260px;
}
.topics_article table {
	width: 100%;
	border-collapse: collapse;
}
.topics_article th, .topics_article td {
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: dotted 1px #CCC;
	font-size: 14px;
}
.topics_article th {
	padding-right: 45px;
	width: 60px;
	padding-left: 15px;
}

.topics_article table span {
	color: #FFF;
	background: #E99929;
	padding: 1px 6px;
	font-size: 12px;
	border-radius: 3px;
	float:left;
}
.topics_article p {
	overflow: hidden;
	padding-left: 10px;
}

/* ブログ */
#other_topics {
	display: inline;
	float: right;
	width: 580px;
}
#other_topics p {
	font-size: 14px;
	text-indent: -1em;
	padding: 1em 1em;
	border-bottom: 1px dotted #C4C4C4;
}
.topic_bn a {
	margin-top: 5px;
	float: right;
	display: inline-block;
}

/* スライダー */
#bunner_area {
	width: 960px;
	margin: 30px auto 50px;
	display: inline;
}
#bunner_area .bn_zenrin {
	float: left;
	display: inline-block;
}
#slider {
	width: 605px;
	float: right;
}
#ViewArea{
	height:90px;
	overflow:hidden;
	float:left;
	z-index:1;	
}
#ScrollArea{
	width:auto;
	height:90px;
	position:relative;
	z-index:2;
	background-color:#E5E5E5;
}
#ScrollArea li{
	float:left;
	width:120px;
	height:70px;
	position:relative;
	padding:10px 10px;
	text-align:center;
	list-style:none;
}
#ScrollArea p{
	font-size:12px;
	padding:2px 0px 0px 0px;
}
#Leftbtn{
	width:20px;
	height:90px;
	overflow:hidden;
	float:left;
	z-index:1;
	background-image:url(./images/btn_l.jpg);
	background-repeat:no-repeat;		
}
#Leftbtn:hover{
	background-image:url(./images/btn_l_over.jpg);
	background-repeat:no-repeat;
	cursor: pointer;		
}
#Rightbtn{
	width:20px;
	height:90px;
	overflow:hidden;
	float:left;
	z-index:1;
	background-image:url(./images/btn_r.jpg);
	background-repeat:no-repeat;					
}
#Rightbtn:hover{
	z-index:1;
	background-image:url(./images/btn_r_over.jpg);
	background-repeat:no-repeat;
	cursor: pointer;				
}

/* Twitter / ブログ / ピックアップ */
#contents_list {
	width: 960px;
	margin: 30px auto 50px;
	display: inline;
	float: left;
}

#twitter {
	width: 350px;
	display: inline;
	float: left;
}

#blog {
	float: left;
	width: 275px;
}
#pickup {
	float: right;
	width: 275px;
}
.sec_title {
	border-bottom: 2px solid #2C86EA;
}
.sec_title h3 {
	font-size: 16px;
	font-weight: bold;
	color: #2C86EA;
	margin-bottom: 4px;
	padding-left: 10px;
	border-left: 10px solid #C4C4C4;
}

/*----------------------------------------------

	カテゴリー一覧ページ

----------------------------------------------*/
.menu_list {
	margin-left: -30px;
}
.menu_list li {
	position:relative;
	float: left;
	border-left: 3px solid #2E82DF;
	width: 430px;
	margin-left: 38px;
	margin-bottom: 40px;
	padding: 10px;
	box-shadow: 1px 1px 8px #AAAAAA;
	-moz-box-shadow: 1px 1px 8px #AAAAAA; /* Firefox用 */
	-webkit-box-shadow: 1px 1px 8px #AAAAAA; /* Safari,Google Chrome用 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
}
.menu_list li a {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left: 0;
	top: 0;
	color: #2C86EA;
	text-indent: -9999px;
}
.menu_list li a:hover {
	background: #FFE077;
	box-shadow: 0px 0px 5px #CFA96E inset;
}
.menu_list li .menu_img {
	float: left;
	margin-right: 20px;
	width: 120px;
	height: 120px;
}
.menu_list li .menu_title {
	font-size: 16px;
	color: #2E82DF;
	margin-bottom: .5em;
	text-decoration: underline;
}
.menu_list li .menu_info {
	font-size: 14px;
	line-height: 1.6em;
}

/*----------------------------------------------

	商品一覧ページ

----------------------------------------------*/
/* アイコンについて */
#icon_info{
	margin-left: -20px;
}
#icon_info li{
	float: left;
	margin-left: 25px;
	color: #2C86EA;
}
#icon_info .icon img{
	margin-right: .5em;
	margin-bottom: .5em;
}

/* 中分類タブメニュー */
#item_list{
	margin: 40px auto 0;
}
#item_list_nav a {
	text-decoration: none;
	color: #666666;
}
#item_list_nav li {
	display: inline-block;
	width: 156px;
	line-height: 40px;
	color: #666;
	font-size: 12px;
	cursor: pointer;
	background: url(./images/bg_item_list_tab.png) no-repeat scroll left top;
	text-align: center;
}
#item_list_nav li.selected {
	color: #FFF;
	background: url(./images/bg_item_list_tab.png) 0 -40px;

}
#item_list_nav li.selected a {
	color: #FFF;
}
#item_list_area {
	padding: 30px 0 0;
	width: 960px;
	min-height: 260px;
	background: url(./images/bg_item_list.gif) no-repeat scroll left top;
}

/* 商品詳細 */
.item_article {
	width: 940px;
	margin: 0 auto;
}
.item_article li.item_box {
	clear: both;
	border-top: 3px solid #2E82DF;
	margin-bottom: 50px;
	padding: 15px;
	box-shadow: 1px 1px 8px #AAAAAA;
	-moz-box-shadow: 1px 1px 8px #AAAAAA; /* Firefox用 */
	-webkit-box-shadow: 1px 1px 8px #AAAAAA; /* Safari,Google Chrome用 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
}
.item_article li.item_box:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.item_article li.item_box .item_img {
	float: left;
	margin-right: 20px;
	width: 120px;
	height: 120px;
	position: relative;
	background: #F3F3F3;
}
.item_article li.item_box .item_img p {
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 0 .5em;
	color: #FFFFFF;
	background-color: #333333;
	z-index: 999;
	line-height: 1.8em;
}
.item_article li.item_box .item_detail {
	position: relative;
	float: right;
	width: 767px;
}
.item_article li.item_box .item_detail .item_name {
	color: #2C86EA;
	font-size: 16px;
	border-bottom: 1px dotted #2C86EA;
	margin-bottom: 5px;
}
.item_article li.item_box .item_detail .item_name h4 {
	width: 420px;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}
.item_article li.item_box .item_detail .item_name span {
	color: #D60012;
	font-size: 70%;
	margin-right: .5em;
}
.item_article li.item_box .item_detail .item_icon {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 325px;
	height: 25px;
}
.item_article li.item_box .item_detail .item_icon .icons {
	width: 155px;
}
.item_article li.item_box .item_detail .item_icon .icons li {
	float: left;
	width: 25px;
	height: 20px;
	display: block;
	margin-left: 10px;
	margin-top: 3px;
}
.item_article li.item_box .item_detail .item_icon .icons li em {
	display: none;
}
.item_article li.item_box .item_detail .item_icon .icons li.cart {
	background: url(./images/icon_cart_s.gif) no-repeat scroll left top;	
}
.item_article li.item_box .item_detail .item_icon .icons li.tsuhan {
	background: url(./images/icon_tsuhan_s.gif) no-repeat scroll left top;	
}
.item_article li.item_box .item_detail .item_icon .icons li.calendar {
	background: url(./images/icon_calendar_s.gif) no-repeat scroll left top;	
}
.item_article li.item_box .item_detail .item_icon .icons li.shop {
	background: url(./images/icon_shop_s.gif) no-repeat scroll left top;	
}
.item_article li.item_box .item_detail .item_icon .bt {
	float: right;
	width: 170;
}
.item_article li.item_box .item_detail .item_gaiyo {
	margin-bottom: 20px;
	color: #555555;
	line-height: 1.6em;
}
.item_article li.item_box .item_detail .item_info li {
	float: left;
	margin: 0px 2em 10px 0px;
	display: inline-block;
	font-size: 13px;
	border-bottom: 1px dotted #DDDDDD;
	min-width: 340px;
}
.item_article li.item_box .item_detail .item_info strong {
	float: left;
	background-color: #96B6D6;
	border-radius: 2px;
	color: #FFFFFF;
	font-size: 11px;
	padding: 0 1em;
	margin-right: .5em;
}
.item_article li.item_box .item_detail .item_info strike {
	color: #666666;
	margin-right: .5em;
}

/* ページネーション */
.pager {
	text-align: center;
	clear: both;
}
.pager li {
	display: inline-block;
	color: #AAAAAA;
}
.pager li a {
	margin: 0 1em;
}
.pager .pager_list {
	border: 1px solid #CCCCCC;
	padding: 3px 10px;
	margin: 0 2px;
	text-decoration: none;
	font-size: 16px;
}
.pager .pager_list.on {
	background-color: #2C86EA;
	color: #FFFFFF;
}
.pager .pager_list.off {
	background-color: #EEEEEE;
	color: #666666;
}


.item_article li.item_box .item_detail .item_info li.sub_list {
	clear: both;
	border-bottom: 1px dotted #CCCCCC;
	width: 767px;
}
.item_article li.item_box .item_detail .item_info li.sub_list h5 {
	color: #2C86EA;
	padding-left: 16px;
	background: url(images/arrow_submenu.png) no-repeat scroll 2px 2px;
	font-size: 13px;
}
.item_article li.item_box .item_detail .item_info li.sub_list dt {
	padding: 3px .5em;
	background-color: #EEEEEE;
	margin-left: -1em;
	clear: both;
	border-top: 1px dotted #CCCCCC;
	width: 767px;
}
.item_article li.item_box .item_detail .item_info li.sub_list dd {
	float: left;
	margin: 3px 20px 8px 0px;
	display: inline-block;
}


/*----------------------------------------------

	float

----------------------------------------------*/
.float_l {float: left;}
.float_r {float: right;}
/*----------------------------------------------

	clearfix/clear

----------------------------------------------*/
.section:after,
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
* html .section,
* html .clearfix              { zoom: 1; } /* IE6 */
*:first-child+html .section,
*:first-child+html .clearfix  { zoom: 1; } /* IE7 */
.clear{	clear:both;}

/*----------------------------------------------

	print

----------------------------------------------*/
@media print{
#top_img{	display:none;} 
}
#topics_list {
	width: 690px;
	display: inline;
	float: left;
}
#bn_clm{
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
}
