﻿
/*　-----doby-------------------------------------------------------*/
body {
	font-family: Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%
}

@media screen and (min-width: 0px) and (max-device-width: 920px) {
	body {
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer */
		-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
		-webkit-user-select: none; /* Chrome, Safari, and Opera */
		-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
	}
}

button {
	cursor: pointer;
}

/*　-----ページフッタ--------------------------------------------------------*/
#footer {
	text-align: center;
	width: 100%;
	border: 1px solid #e7e7e7;
	background-color: #f8f8f8;
	color: #777;
	font-size: 0.8em;
	padding: 10px 0
}
/*　-----汎用クラス--------------------------------------------------------*/
.defaultBackColor {
	background-color: #f8f8f8;
}

.defaultBorder {
	border: 1px solid #d0f0c3;
}

.defaultFontColor {
	color: #777;
}

.siteBackColor {
	/*background-color: #f8f8f8;*/
	background-color: #3a3a3a;
}

.siteFontColor {
	/*color:#777 !important;*/
	color: #FFF !important;
}

.linkFontColor {
	color: #337ab7;
	cursor: pointer;
}

.text-rightEx {
	text-align: right !important;
}

.white-space-normal {
	white-space: normal !important;
}

.display-none {
	display: none;
}

.cursor-pointer {
	cursor: pointer;
}

/*　-----テーブル・タブレットでスクロールバーを表示---------------------------*/
.table-scroll::-webkit-scrollbar {
	width: 17px;
}

.table-scroll::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 0;
}

.table-scroll::-webkit-scrollbar-track-piece:start {
	background: #f1f1f1;
}

.table-scroll::-webkit-scrollbar-track-piece:end {
	background: #fff;
}
/* マウスオーバー時にセルの背景色を変えます */
.table-mouseover tr:hover {
	background-color: #FFCC99 !important;
}

/*　-----「ページ先頭へ戻る」スタイル定義------------------------------------*/
#page-top {
	position: fixed;
	bottom: 0px;
	right: 10px;
	font-size: 0.8em;
}

	#page-top a {
		display: inline-block;
		padding: 20px 20px;
		border: solid 2px #fff;
		border-radius: 3px;
		background: rgba(0,0,0,0.2);
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-family: Helvetica, Arial, sans-serif;
	}

		#page-top a:hover {
			text-decoration: none;
			background: #3CA4EE;
		}

/*　-----検索項目統一CSS-----------------------------------------------------*/
.searchItem {
	float: left;
	margin-right: 0.1em;
}
	/*.searchItem .head {
background-repeat: repeat-x;
    border-color: #28a4c9;
    background-image: linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);
    padding:0.2em;
    font-size:0.9em;
    color:#fff;
}*/
	.searchItem .head {
		background-repeat: repeat-x;
		border-color: #28a4c9;
		background-image: linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);
		padding: 0.2em;
		font-size: 0.9em;
		color: #fff;
	}

	.searchItem .body {
		font-size: 0.9em;
	}

/*　-----GridView列幅CSS---------------------------------------------------*/
.gvCW25 {
	max-width: 25px;
	min-width: 25px;
	width: 25px;
}

.gvCW30 {
	max-width: 30px;
	min-width: 30px;
	width: 30px;
}

.gvCW35 {
	max-width: 35px;
	min-width: 35px;
	width: 35px;
}

.gvCW40 {
	max-width: 40px;
	min-width: 40px;
	width: 40px;
}

.gvCW45 {
	max-width: 45px;
	min-width: 45px;
	width: 45px;
}

.gvCW50 {
	max-width: 50px;
	min-width: 50px;
	width: 50px;
}

.gvCW55 {
	max-width: 55px;
	min-width: 55px;
	width: 55px;
}

.gvCW65 {
	max-width: 65px;
	min-width: 65px;
	width: 65px;
}

.gvCW75 {
	max-width: 75px;
	min-width: 75px;
	width: 75px;
}

.gvCW80 {
	max-width: 80px;
	min-width: 80px;
	width: 80px;
}

.gvCW85 {
	max-width: 85px;
	min-width: 85px;
	width: 85px;
}

.gvCW95 {
	max-width: 95px;
	min-width: 95px;
	width: 95px;
}

.gvCW115 {
	max-width: 115px;
	min-width: 115px;
	width: 115px;
}

.gvBorderLineNoLeft {
	border-left-style: none !important;
}

.gvBorderLineNoRight {
	border-right-style: none !important;
}

/*　-----ページャーCSS---------------------------------------------------*/
.pager {
	/*display: inline-block;*/
	padding-left: 0;
	margin: 20px 0;
	border-radius: 4px;
}

	.pager > td {
		border-left: none !important;
		border-top: none !important;
		border-bottom: none !important;
		text-align: right !important;
	}

	.pager:after, .pager:before {
		content: "" !important;
		content: none !important;
	}

	.pager table > tbody > tr > td {
		display: inline;
		border: none;
	}

		.pager table > tbody > tr > td > a,
		.pager table > tbody > tr > td > span {
			position: relative;
			float: left;
			padding: 8px 12px;
			line-height: 1.42857143;
			text-decoration: none;
			color: #337ab7;
			background-color: #ffffff;
			border: 1px solid #dddddd;
			margin-left: -1px;
		}

		.pager table > tbody > tr > td > span {
			position: relative;
			float: left;
			padding: 8px 12px;
			line-height: 1.42857143;
			text-decoration: none;
			margin-left: -1px;
			z-index: 2;
			color: #337ab7;
			background-color: #f5f5f5;
			border-color: #dddddd;
			cursor: default;
		}

		.pager table > tbody > tr > td:first-child > a,
		.pager table > tbody > tr > td:first-child > span {
			margin-left: 0;
			border-bottom-left-radius: 4px;
			border-top-left-radius: 4px;
		}

		.pager table > tbody > tr > td:last-child > a,
		.pager table > tbody > tr > td:last-child > span {
			border-bottom-right-radius: 4px;
			border-top-right-radius: 4px;
		}

		.pager table > tbody > tr > td > a:hover,
		.pager table > tbody > tr > td > span:hover,
		.pager table > tbody > tr > td > a:focus,
		.pager table > tbody > tr > td > span:focus {
			color: #97310e;
			background-color: #eeeeee;
			border-color: #dddddd;
		}

.repeaterPager > tbody > tr > td:first-child > a {
	margin-left: 0;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}

.repeaterPager > tbody > tr > td:last-child > a {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

.repeaterPager > tbody > tr > td > a {
	position: relative;
	float: left;
	padding: 8px 12px;
	line-height: 1.42857143;
	text-decoration: none;
	color: #337ab7;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	margin-left: -1px;
}

	.repeaterPager > tbody > tr > td > a.disabled {
		position: relative;
		float: left;
		padding: 8px 12px;
		line-height: 1.42857143;
		text-decoration: none;
		margin-left: -1px;
		z-index: 2;
		color: #337ab7;
		background-color: #f5f5f5;
		border-color: #dddddd;
		cursor: default;
	}

/*ナビゲーションバー高さ*/
.navlogo {
    line-height:1.5rem  !important;
    font-size:2rem !important;
    vertical-align: middle;
    width:1.8rem !important;
    height:1.5rem !important;
    position: fixed !important;
    right:1rem !important;
    top:1.5rem !important;
}
/*オフキャンパス用*/
.offcanvas-header {
      color: white;
      background-color: #708090;
      padding-right:1rem;
}
.offcanvas-body {
    font-family: Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
	line-height: 2em;
    font-size: 1.2em;
}
.offcanvas-linktext {
    text-decoration: none !important;
    color:#000000 !important;
    line-height:1.5rem; 
    font-size:1.2rem;
}
.offcanvas-linkimg {
    vertical-align: middle;
    width:1.7rem;
    height:1.7rem;
    margin-right:0.5rem;
}
.offcanvas-backdrop{
    width:25.2%  !important; 
    padding:4% 6% 0% 5% !important;
}

/*　-----スプレッド用CSS-------------------------------------------------*/
.tableHeadBackColorForSpread {
	color: #ffffff !important;
	background-color: #eeedeb !important;
	background-image: linear-gradient(to bottom,#0098c1 0,#0098c1 100%);
	border: 1px solid #5c5c5c !important;
	vertical-align: middle;
}

/*　-----画像アイコンCSS-------------------------------------------------*/
img.imgDiscount:hover {
	cursor: pointer;
}

img.imgCamera:hover {
	cursor: pointer;
}

.banner {
	color: #fff;
	position: relative;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: 10px;
}

.bannerS {
	height: 13em !important;
}

.bannerM {
	height: 26em !important;
}

.bannerL {
	height: 39em !important;
}

.PicS {
	max-width: 100%;
	max-height: 160px;
}

.PicM {
	max-width: 100%;
	max-height: 330px;
}

.PicL {
	max-width: 100%;
	max-height: 500px;
}

.banner-o-hid {
	overflow: hidden;
	z-index: 1;
}

.banner-caption-top-left, .banner-caption-left, .banner-caption-top-right, .banner-caption-right, .banner-caption-bottom-left, .banner-caption-bottom-right, .banner-caption-center {
	z-index: 2;
	width: 50%;
	position: absolute;
}

.banner-title {
	font-size: 25px;
	display: block;
	margin: 0;
	margin-bottom: 5px;
	font-weight: 600;
	text-transform: uppercase;
}

.banner-caption-left, .banner-caption-right {
	left: 5%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


.banner-shop-now {
	margin-bottom: 0;
	letter-spacing: 1px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.banner-link {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: block;
	z-index: 3;
}

.product-sm-left {
	padding: 10px;
}

.product {
	-webkit-box-shadow: 0 3px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
	box-shadow: 0 3px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 15px;
	background: #EEE;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	position: relative;
	height: 13em;
}

th, .tableHeaderNormal {
	color: #FFFFFF;
	border: #d9edf7 solid 1px;
	border-collapse: collapse;
	background-color: #eeedeb !important;
	background-image: linear-gradient(to bottom,#0098c1 0,#0098c1 100%);
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

/*　-----ドロップダウンリストを自動で開く-------------------------------------------------*/
/*ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}*/
ul {
	list-style: none;
}

	ul.nav li.dropdown:hover > a {
		color: #2c9d65 !important;
		background-color: #e3f2dd;
	}

.bn {
	padding-top: 15px;
}


/* MARQUEE */

.marqueeRightLeft {
	max-width: 100%;
	/*padding: 0.5em 0;*/
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	text-align: left;
	/*border-top: 1px solid #6c5441;
	border-bottom: 1px solid #6c5441;*/
	/*font-weight: bold;*/
	color: #2c9d65;
	background-color: #e3f2dd;
	font-size: 1.1em;
}

	.marqueeRightLeft p:after {
		content: "";
		white-space: nowrap;
	}

	.marqueeRightLeft p {
		margin: 0;
		padding-left: 100%;
		display: inline-block;
		white-space: nowrap;
		-webkit-animation-name: marqueeRL;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 20s;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-name: marqueeRL;
		-moz-animation-timing-function: linear;
		-moz-animation-duration: 20s;
		-moz-animation-iteration-count: infinite;
		-ms-animation-name: marqueeRL;
		-ms-animation-timing-function: linear;
		-ms-animation-duration: 20s;
		-ms-animation-iteration-count: infinite;
		-o-animation-name: marqueeRL;
		-o-animation-timing-function: linear;
		-o-animation-duration: 20s;
		-o-animation-iteration-count: infinite;
		animation-name: marqueeRL;
		animation-timing-function: linear;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}

@-webkit-keyframes marqueeRL {
	from {
		-webkit-transform: translate(0);
	}

	to {
		-webkit-transform: translate(-100%);
	}
}

@-moz-keyframes marqueeRL {
	from {
		-moz-transform: translate(0);
	}

	to {
		-moz-transform: translate(-100%);
	}
}

@-ms-keyframes marqueeRL {
	from {
		-ms-transform: translate(0);
	}

	to {
		-ms-transform: translate(-100%);
	}
}
/*table { table-layout:fixed !important; }*/


