@charset "utf-8";

iframe{display: none;}
/*-- Reset ---------------------------------------------------*/

input[type="submit"],
button{
	-webkit-appearance: none;
	padding-block: 0;
	padding-inline: 0;
}

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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
ul,ol {list-style:none;}
li{list-style: none;}
blockquote, q {quotes:none;}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {text-decoration: line-through;}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}

.select_none{
	color: rgba(0,0,0,0);
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


/*-- initialize -------------------------------------------*/

body {
	color: var(--mainTextColor);
	font-size: 14px;
	font-family: YuGothic, 'Yu Gothic', 'Yu Gothic Medium', 'Meiryo', sans-serif;
	font-weight: 500;
	line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
select, input, button, textarea {
	font-size: 99%;
	font-family: YuGothic, 'Yu Gothic', 'Yu Gothic Medium', 'Meiryo', sans-serif;
}
strong {font-weight: bold;}
abbr, acronym {
	border: 0;
	font-variant: normal;
}

.main_container{
	width: 100%;
	background-color: var(--mainBackColor);
	box-sizing: border-box;
	padding: 40px 0 60px;
}
.general_h2{
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	border-bottom: solid 2px var(--separateBorder);
	padding-bottom: 11px;
	margin-bottom: 15px;
}
.general_input{
	box-sizing: border-box;
	border: solid 2px #ababab;
	border-radius: 4px;
	line-height: 1;
	padding: 4px 10px 5px;
	
	&.wMax{
		width: 100%;
	}
}
textarea.general_input{
	resize: vertical;
	padding-top: 12px;
	height: 2.4rem;
}
[name="suggest_select"]{
	margin-bottom: 5px;
}
.general_button{
	font-weight: bold;
	color: var(--mainTextColor);
	border: solid 2px #ababab;
	background-color: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 5px 25px 6px;
	cursor: pointer;
}
.button_mr{
	margin-right: 15px;
}
.flash_message{
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	z-index: 10;
	width: 600px;
	background-color: var(--blackBar);
	border-radius: 3px;
	box-sizing: border-box;
	color: var(--blackBarText);
	text-align: center;
	word-break: break-all;
	padding: 12px 24px 11px;
	margin: 0 auto;
	cursor: pointer;
	transition: top 0.3s ease;
}
.flash_message.success{
	background-color: var(--listView);
}
.flash_message.error{
	background-color: var(--listDelete);
}
.flash_message.hidden{
	top: -100vh;
}

.general_width{
	width: 95%;
	max-width: 1280px;
	margin-inline: auto;
}
.loading_cover{
	position: fixed;
	z-index: 500;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.2);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 36px;
	font-weight: bold;
	color: #515151;
}

.top_paginate{
	display: flex;
	flex-wrap: wrap;
	font-size: 17px;
}
.top_paginate li{
	margin-right: 15px;
}
.top_paginate .page_limit_li{
	margin-right: 30px;
}
.top_paginate select{
	border: solid 1px #7d7d7d;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 90%;
	cursor: pointer;
	line-height: 1;
	padding: 2px 3px 2px 6px;
}
.total_data strong{
	color: #f00;
}
.paginate_span{
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
}
.page_button{
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
	padding: 4px 6px 2px;
	border-bottom: solid 1px var(--mainTextColor);
	color: var(--mainTextColor);
	font-size: 94%;
}

.main_inner{
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 10;
}
.main_inner_left{
	position: sticky;
	z-index: 10;
	top: 25px;
	left: 0;
	width: 200px;
	align-self: start;
}
.main_inner_right{
	width: calc(100% - 240px);
}
.main_inner_left_sticky{

}
.left_box_search_div{
	margin-bottom: 15px;
	
	& label{
		display: block;
		background-color: #e4edff;
		font-weight: bold;
		line-height: 1;
		padding: 7px 9px 5px;
		margin-bottom: 4px;
	}
}
.search_error{

}
.left_box_search_button{
	width: 85%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	
	& button,
	& span{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 80px;
		height: 40px;
		background-color: #fff;
		border-radius: 4px;
		box-sizing: border-box;
		border: solid 2px var(--mainButtonColor);
		color: var(--mainButtonColor);
		cursor: pointer;
		font-weight: bold;
	}
	& button{
		background-color: var(--mainButtonColor);
		color: #fff;
		
		&:hover{
			background-color: var(--mainButtonColorH);
		}
	}
}

/*-- header -------------------------------------------*/

.head_container{
	border-bottom: solid 2px #aaa;
	padding: 20px 0 15px;
}
.head_container_h1{
	font-size: 16px;
}
.head_title_space{
	display: inline-block;
	vertical-align: bottom;
	font-weight: bold;
	font-size: 300%;
	color: var(--mainBlueColor);
	letter-spacing: -2px;
	line-height: 1;
}
.head_title_sec{
	display: inline-block;
	vertical-align: bottom;
	font-weight: bold;
	color: var(--mainTextColor);
}

.foot_container{
	width: 100%;
	box-sizing: border-box;
	z-index: 10;
	bottom: 0;
	left: 0;
	background-color: var(--footerBack);
	color: var(--mainTextColor);
	line-height: 1;
	font-size: 13px;
	font-weight: bold;
	text-align: right;
	padding: 10px 19px 9px;
}

/*-- list -------------------------------------------*/

.product_sort{
	padding-top: 16px;
	
	& span,
	& a{
		display: inline-block;
		vertical-align: middle;
		margin-right: 7px;
		color: #333;
	}
	& a{
		font-weight: bold;
		text-decoration: underline;
		text-underline-offset: 3px;
		
		&:hover{
			text-decoration: none;
		}
	}
}

.product_list{
	padding-top: 40px;
}
.product_list_li{
	position: relative;
	z-index: 10;
	margin-bottom: 50px;
	padding-bottom: 25px;
	
	/*
	&::after{
		content: "";
		display: block;
		position: absolute;
		z-index: 10;
		bottom: 0;
		left: 0;
		right: 0;
		width: 80%;
		border-bottom: dashed 1px #898989;
		margin: auto;
	}
	*/
}
.product_list_h3{
	margin-bottom: 2px;
	& a{
		font-size: 22px;
		color: var(--mainTextColor);
		font-weight: bold;
		
		&:hover{
			color: #ff4545;
		}
	}
}
.prdocut_title_bar{
	height: 7px;
	background-image: linear-gradient(90deg, #cfcfcf 0%, #c1c1c1 20%, transparent 100%);
}
.product_main_inner{
	display: flex;
	justify-content: space-between;
	padding-top: 14px;
}
.product_main_left{
	width: 27%;
	
	& a{
		border: solid 1px #e5e5e5;
		display: block;
		text-align: center;
	}
	& img{
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 240px;
		vertical-align: middle;
	}
}
.product_main_right{
	width: 70%;
}
.list_variation_head,
.list_variation_li{
	display: flex;
	border-bottom: solid 1px #333;

	& > div{
		border-right: solid 1px #333;
		box-sizing: border-box;
		padding: 5px 13px 2px;
		word-break: break-all;
		
		&:first-of-type{
			border-left: solid 1px #333;
		}
	}
}
.list_variation_li:nth-of-type(even){
	background-color: #f2f4ff;
}
.list_variation_head{
	border-top: solid 1px #333;
	background-color: #c1d6ff;
	text-align: center;
	font-weight: bold;
}


/*-- view -------------------------------------------*/

.product_view_h3{
	font-size: 30px;
	font-weight: bold;
}
.product_view_container{
	padding-top: 33px;
}
.product_view_variation{
	width: 700px;
}
.product_view_inner{
	display: flex;
	justify-content: space-between;
	padding-top: 50px;
}
.product_view_left{
	width: 35%;
}
.product_view_image{
	position: relative;
	z-index: 10;
	border: solid 1px #c9c9c9;
	border-radius: 3px;
	margin-bottom: 15px;
	
	&::after{
		content: "";
		display: block;
		padding-top: 75%;
	}
	
	& img{
		position: absolute;
		z-index: 10;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}
}
.product_view_subs{

}
.product_view_right{
	width: 62%;

}
.product_view_variation_item{
	padding-bottom: 33px;
}
.product_view_product_item{
}
.product_view_right_h3{
	font-size: 17px;
	font-weight: bold;
	border-bottom: solid 1px #c9c8c8;
	width: 140px;
	margin-bottom: 10px;
}
.variation_table{
	width: 100%;
	border-top: dashed 1px #aaa;
	
	& tr{
		border-bottom: dashed 1px #aaa;
		&:hover{
			background-color: #f6f6f6;
		}
	}
	& th{
		background-color: #f1f1f1;
	}
	& th,
	& td{
		padding: 6px 14px 3px;
		border-right: dashed 1px #aaa;
		line-height: 1.5;
		
		&:last-of-type{
			border-right: none;
		}
	}
}
.product_view_dl{
	display: flex;
	border-inline: solid 1px #aaa;
	border-top: solid 1px #aaa;
	
	&:last-of-type{
		border-bottom: solid 1px #aaa;
	}
	
	& dt{
		width: 25%;
		background-color: #f3f3f3;
		font-weight: bold;
		border-right: solid 1px #aaa;
	}
	& dd{
		width: 75%;
		background-color: #fff;
	}
	& dt,
	& dd{
		box-sizing: border-box;
		padding: 9px 13px 4px;
		word-break: break-all;
	}
}
.product_view_backbtn{
	padding-top: 60px;
	
	& a{
		display: inline-block;
		background-color: #fff;
		border: solid 2px #e76767;
		border-radius: 3px;
		color: #d14444;
		font-weight: bold;
		padding: 8px 20px 5px;
		
		&:hover{
			background-color: #fff9f9;
		}
	}
}

/*-- END -------------------------------------------*/

.mobile{display: none;}

/*-- media query -----------------------------------*/

@media only screen and (max-width: 767px){

	.desktop{display: none;}
	.mobile{display: block;}
	br.mobile{display: inline-block;}

}