@charset "UTF-8";


/*================================================
 *  CSSリセット
================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0;word-wrap: break-word;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
================================================*/
body {
	font-size:16px;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height:1.8;
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}

.errColor{ color: red; }

.clear {clear:both;}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}

.clearfix:after {
	clear:both;
}

.tx_center{text-align:center;}
.tx_right{text-align:right;}

.pt50{ padding-top:50px;}

.mt20{ margin-top: 20px; }

.mb10{ margin-bottom:10px; }
.mb30{ margin-bottom:30px; }
.mb60{ margin-bottom:60px; }
.mb100{ margin-bottom:100px; }

.rad{ margin-right: 20px; }
.rad2{ margin-right: 20px; }
.rad3{ margin-left: 20px; }

.contents {
	width:1100px;
	margin:0 auto;
}

.contents2 { margin-bottom: 20px; }
.contents3 { padding:0; }
.contents3_t { margin-bottom: 100px; }

a {
	color:#f5b300;
	text-decoration:underline;
}
	a:hover {
		color:#000;
		text-decoration:none;
	}
	
		a:hover img {
			opacity:0.6;
			filter:alpha(opacity=60);
			-ms-filter: "alpha( opacity=60 )";
		}

ruby { position: relative; }

	ruby rt {
		position: relative;
		top: 0.3ex;
		font-size:11px;
	}


h1 { font-size:28px; }

h2 {
	font-size:40px;
	color:#000;
	text-align:center;
}

	h2 span{
		display: block;
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
		font-size: 20px;
	}

h3 { font-size:20px; }

h4 {
	font-family: 'aozora';
	font-size:22px;
	margin: 30px 0 10px;
}

img { vertical-align:bottom; }

em { font-weight:bold; }

strong {
	font-weight:bold;
	color:#ff0000;
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}

/*button*/
.btn { padding:0 15px;  }

/*================================================
 *  ヘッダー
================================================*/
header {
	margin: 20px auto;
	width: 1100px;
	display: flex;
	align-items: center;
}

#footer{
	height: 20px;
	display: block;
	width: 100%;
	background-color:#3f4096;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-top:auto;
}

.imgThumbnail{ width:60%; }

input.infoInput {
	height: 25px;
	margin: 0;
	padding: 5px;
	border: #CCCCCC 1px solid;
	font-size: 15px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.infosizeB{ width:100%; }
.infosize{ width:95%; }
.infosize2{ width:70%; }
.infosize3{ width:80%; }
.infosize4{ width:30%; }
.infosize5{ width:500px; }
.infosize6{ width:150px; }
.infosize7{ width:750px; }

.infoselect{
	height: 35px;
	padding: 5px;
	border: #CCCCCC 1px solid;
	font-size: 15px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

textarea.infocomment {
	margin: 0;
	padding: 5px;
	border: #CCCCCC 1px solid;
	font-size: 15px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing: border-box;
	white-space: pre-wrap;
}

.formBtn{
	display: flex;
	justify-content: center;
	margin: 30px 0;
}

/* ログインボタン */
.formBtn_l{
	text-align:center;
	margin-top: 20px;
}

.baseBtn {
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	box-sizing: border-box;
	border-radius: 5px;
}

/* ログインボタン */
/* 新規登録ボタン */
.formBtnT{
	width: 150px;
	height: 40px;
	background: #3f4096;
}

	.formBtnT:hover{
		color: #fff;
		background:rgba(63,65,150,.7);
	}

/* 削除ボタン */
.formBtnC{
	width: 150px;
	height: 40px;
	background: #C44744;
	font-family: 'aozora';
	margin-left:20px;
}

	.formBtnC:hover{
		color: #fff;
		background:rgba(196,71,68,.7);
	}

/* 検索ボタン */
.formBtnK{
	width: 100px;
	height: 40px;
	background: #848484;
}

	.formBtnK:hover{
		color: #fff;
		background:rgba(132,132,132,.7);
	}

/* 一覧に戻るボタン */
.formBtnR{
	width: 100px;
	height: 30px;
	background: #848484;
	font-size: 16px;
	font-weight: normal;
}

	.formBtnR:hover{
		color: #fff;
		background:rgba(132,132,132,.7);
	}

/* ログアウトボタン */
.formBtnL{
	width: 150px;
	height: 40px;
	background: #C44744;
}

	.formBtnL:hover{
		color: #fff;
		background:rgba(196,71,68,.7);
	}

/* 登録ボタン */
.formBtn1{
	width: 150px;
	height: 40px;
	background: #3f4096;
}

	.formBtn1:hover{
		color: #fff;
		background:rgba(63,65,150,.7);
	}

.detl_base{
	color:#fff;
	font-size:16px;
	border-radius: 5px;
	height:30px;
}

.detl{
	width:50px;
	background:#3f4096;
}
	.detl:hover{ background:rgba(63,65,150,.7); }

.detl2{
	width:65px;
	background:#1f8ecb;
}
	.detl2:hover{ background: rgba(31,142,203, .7); }

.detl3{
	width:110px;
	background:#70AD47; 
}
	.detl3:hover{ background: rgba(112,173,71, .7); }

input[type="submit"],
input[type="button"] {
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	cursor: pointer;
	border: none;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

.tb dl {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	border: #ccc 1px solid;
	margin:20px 0; 
}

	.tb dl dt {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background:#F7F7F7;
		width: 30%;
		padding: 10px;
		border-bottom: 1px solid #ccc;
		color: #000;
		box-sizing: border-box;	
	}

	.tb dl dd {
		padding:10px;
		width: 70%;
		background: #fff;
		border-bottom: 1px solid #ccc;
		box-sizing: border-box;
	}

		.tb dl dd.m{ width: 100%; }

		.tb dl dd::after {
			content: '';
			display: block;
			clear: both;
		}

		.tb dl dt:nth-last-child(2){ border-bottom:none; }
		.tb dl dd:last-child{ border-bottom: none; }

.tb2 dl {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	border: #ccc 1px solid;
	margin:20px auto; 
	width: 50%;
}

.tb2 dl dt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:#F7F7F7;
	width: 30%;
	padding: 10px;
	border-bottom: 1px solid #ccc;
	color: #000;
	box-sizing: border-box;	
	text-align: center;
}

.tb2 dl dd {
	padding:10px;
	width: 70%;
	background: #fff;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
}

.tb2 dl dd::after {
	content: '';
	display: block;
	clear: both;
}

.tb2 dl dt:nth-last-child(2){ border-bottom:none; }

.tb2 dl dd:last-child{ border-bottom: none; }

.thumb img{
	max-width: 200px;
	max-height: 150px;
	margin: 10px 0;
}

/*商品データ一覧*/
.item_li table {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
	table-layout: fixed;
	font-size: 16px;
}

	.item_li table th{
		padding: 8px 5px 8px 5px;
		border-right: 1px solid #ccc;
		text-align: center;
	}
	.item_li table th:nth-child(1){ width: 240px; }
	.item_li table th:nth-child(2){ width: 15%; }
	.item_li table th:nth-child(3){ width: 70px; }
	.item_li table th:nth-child(4){ width: 25%; }
	
	.item_li table thead tr{ background-color: #F7F7F7; }
	
	.item_li table tr {
		background-color: #fff;
		border: 1px solid #ccc;
		padding: .35em;
	}
	
	.item_li table td {
		padding: 8px 5px 8px 5px;
		border-right: 1px solid #ccc;
		text-align: left;
		vertical-align: top;
	}

	.item_li table td:nth-child(1) { text-align: center; }
	.item_li table td:nth-child(2) { text-align: center; }
	.item_li table td:nth-child(3) { text-align: center; }

/*ラジオボタンを全て消す*/
input[name="tab_item"] { display: none; }
input[name="tab_item2"] { display: none; }
input[name="tab_item3"] { display: none; }

/*ページ送り*/
.page{
	margin: 30px auto 0;
	height:30px;
}

	.page ul{
		display: flex;
		justify-content: flex-end;
	}

	
		.page ul li {
			display:inline-block;
			text-align:center;
			margin-right:7px;
			width:30px;
		}

			.page ul li:last-child{ margin-right:0; }

			.page ul li a,
			.page ul li.active a{
				padding-top: 2px;
				padding-bottom:19px;
				display: block;
				color: #ffffff;
				height: 9px;
				background:#3f4096;
				text-decoration: none;
			}

				.page ul li a:hover{
					background:rgba(63,64,150,.6);
					text-decoration: none;
					color: #fff;
				}

					.page ul li.active a{ color: #000; }

.active_pg{
	background:#ffffff !important;
	color: #000;
	border: #3f4096 1px solid;
	box-sizing: border-box;
	height: 25px;
	padding-top: 1px;
	padding-bottom:27px;
}


/*================================================
 *  タブレット向けデザイン
================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:1024px) {

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
}

footer { width:100%; }
header { width: 98%; }

h1{
	width: 310px;
	margin-top: 12px;
}

	h1 img{ width: 100%; }

h2 {
	margin-top: 20px;
	font-size: 36px; 
}
	
h3.sh {
	margin: 0 10px 15px ;
	padding-left: 0;
}
	
.p_none{ display: block; }
.pa_none{ display: none; }

.contents {
	box-sizing:border-box;
	width:100%;
	margin-top: 80px;
}

.contents2 {
	box-sizing:border-box;
	width:100%;
	padding:0 10px;
}

.contents3 {
	box-sizing:border-box;
	width:100%;
	padding:0 10px;
}
.contents3_t {
	box-sizing:border-box;
	width:100%;
	padding:0 10px;
}

input.infoInput {
	height: 25px;
	padding: 5px;
	border: #CCCCCC 1px solid;
	font-size: 15px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.infosize{ width:96%; }

.iziModal{ max-width: 90%!important; }
	.iziModal .tb { width: 95%; }
	.iziModal table{ width: 95%; }

}

/*================================================
 *  スマートフォン向けデザイン
================================================*/
@media screen and (max-width:640px) {
	
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
}
	
.lock { overflow:hidden; }

.p_none{ display: block; }
.s_none{ display: none; }

h1{
	width: 150px;
	text-align: left;
	margin-bottom: 0;
	margin-top: 6px;
	margin-left: 0;
}
	h1 img{ width: 98%; }

.contents {
	box-sizing:border-box;
	width:100%;
	margin-top: 20px;
}
	
.contents3 {
	box-sizing:border-box;
	width:100%;
}

h2 {
	margin-top: 50px;
	font-size: 28px;
}

input.infoInput {
	height: 25px;
	margin: 0 0 0 0;
	padding: 5px;
	border: #CCCCCC 1px solid;
	font-size: 15px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.infosize3{
	width:96%;
	margin-bottom: 10px!important;
}
.infosize4{ width:50%; }

.iziModal { max-width: 90%!important; }
	
	.iziModal table {
		border: 0;
		width:100%
	}
		.iziModal table th{
			background-color: #eee;
			display: block;
			border-right: none;
			font-weight: bold;
		}
			.iziModal table thead {
				border: none;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}
	
		.iziModal table tr {
			display: block;
			margin-bottom: .625em;
		}
	
		.iziModal table td {
			border-bottom: 1px solid #bbb;
			display: block;
			text-align: right;
			position: relative;
			border-right: none;
		}
	
			.iziModal table td::before {
				content: attr(data-label);
				position: absolute;
				left: 10px;
			}
	
			.iziModal table td:last-child { border-bottom: 0; }
			.iziModal .tb { width: 100%; }

.tb{ width:100%; }

	.tb dl {
		display: block;
		margin: 20px auto 0;
	}

		.tb dl dt {
			float: none;
			width: 100%;
			border-bottom: none;
		}
			
		.tb dl dd {
			display: block;
			margin-bottom: 10px;
			margin-left: 0;
			width: 100%;
			border-bottom: none;
		}
		
			.tb dl dd.m{
				border-top: #ccc 1px solid;
				margin-bottom: 0;
			}

				.tb dl dd.m ul li{
					width: 100%;
					margin-bottom: 10px;
				}

.tb2 dl {
	display: block;
	margin: 20px auto 0;
	width:100%;
}

	.tb2 dl dt {
		float: none;
		width: 100%;
		border-bottom: none;
		text-align: left;
	}
	
	.tb2 dl dd {
		display: block;
		margin-bottom: 10px;
		margin-left: 0;
		width: 100%;
		border-bottom: none;
	}
	
.item_li table {
	border: 0;
	width:100%;
}
	
	.item_li table th{
		background-color: #eee;
		display: block;
		border-right: none;
		font-weight: bold;
		border-bottom: 1px solid #bbb;
	}
		
	.item_li table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	
		.item_li table tr {
			display: block;
			margin-bottom: .625em;
		}
			
		.item_li table td {
			border-bottom: 1px solid #bbb;
			display: block;
			text-align: right;
			position: relative;
			border-right: none;
		}
		
		.item_li table td:nth-child(2) { text-align: center; }
		.item_li table td:nth-child(3) { text-align: right; }
		.item_li table td:nth-child(4) { text-align: right; }
		.item_li table td:last-child {
			border-bottom: 0;
			text-align: right;
		}

		.item_li table td::before {
			content: attr(data-label);
			position: absolute;
			left: 10px;
		}

.detl {
	width: 20%;
	height: 40px;
}
.detl2 {
	width: calc(35% - 6px);
	height: 40px;
}
.detl3 {
	width: calc(45% - 6px);
	height: 40px;
}

.imgThumbnail { width: 50%; }


}