@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');

* {
    margin: 0;
    padding: 0;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
strong {
font-weight: bold;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*, *:before, *:after {
	box-sizing: border-box;
}

.clearfix:before, .clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

/*base*/
html {
	/*font-size: 62.5%;*/
	font-size: 10px;
	position: relative;
	min-width: 1240px;
}
body {
	background: #ffffff;
	text-align: center;
	color: #333;
	font-size: 1.5rem;
	font-family: 'Roboto', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Roboto, Arial,"Droid Sans", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	line-height: 180%;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-width: 1240px;
	font-weight: normal;
}

a {
	color: #333;
	text-decoration: none !important;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
}
img {
	box-shadow: #000 0 0 0;
	vertical-align:middle;
	max-width:100%;
}
a:hover {
	color: #a40035;
}
a img{
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;}


.left{
	float: left;
}
.right{
	float: right;
}
div,div p{
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}

.vsp {
	display: none;
}

.container{
	width: 1200px;
	margin: 0 auto;
	padding:0;
	text-align: left;
	position:relative;
}

#header{}

#header h1{
	float:left;
	font-size:1.4rem;
	font-weight:bold;
	color:#000;
	padding:32px 0 0 60px;
}
#header h1 a{
	color:#000;
}
#header h1 p{
font-family: 'Noto Sans JP', sans-serif;
	font-size:2.3rem;
	line-height:1;
	}
#header h1 span{
letter-spacing:-0.4em;
}

#headnavi{
	float:right;
	padding:0 60px 10px 0;
}

#headnavi .chumon{
	float:right;
	padding-bottom:13px;
    position: relative;
    text-align: right;
}
#headnavi .chumon a.inner, #headnavi .chumon a.flyer{
	display:inline-block;
	width:300px;
	padding:10px 0;
	background-color:#a40035;
	color:#fff;
	font-weight:bold;
	font-size:1.6rem;
	text-align:center;
	border-radius:0px 0px 6px 6px;
	position:relative;
	cursor:pointer;
    margin-left: 10px;
}
#headnavi .chumon a.flyer img{
    width: 20px;
}
#headnavi .chumon .caption{
display:none;
position:absolute;
	width:300px;
	z-index: 5;
    right: 0;
}
#headnavi .chumon .caption p{
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px 0 5px 0;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
#headnavi .chumon .caption a{
background-color:#000;
color:#fff;
display:inline-block;
width:50%;
text-align:center;
padding:10px 0;
border:1px solid #fff;
    border-top-style:dashed;
	border-radius:0px 0px 6px 6px;
}
#headnavi .chumon a:hover{
	background-color:#555;
}

#headnavi ul{
	clear:both;
}
#headnavi li{
	display:inline-block;
	font-weight:bold;
	font-size:1.3rem;
	padding-left:15px;
	vertical-align:middle;
}
#headnavi li img{
	vertical-align:text-bottom
}
#headnavi li.head_tel{
	font-size:2.4rem;
}
#headnavi li.head_tel img{
	vertical-align:middle;
}
#headnavi .searchhead{
	border:1px solid #a1aac7;
	padding:5px;
}
#headnavi .searchhead input{
	border:0;
	width:145px;
	height:27px;
}
#headnavi .searchhead input::-moz-placeholder {
    color:#bbb;
    opacity:1
}
#headnavi .searchhead input:-ms-input-placeholder {
    color:#bbb
}
#headnavi .searchhead input::-webkit-input-placeholder {
    color:#bbb
}
#headnavi .searchhead button{
	border:0;
	background-color:#FFFFFF;
	background-image:url(../img/head_sarch.png);
	background-repeat:no-repeat;
	background-position:50%;
	text-indent:-9999px;
	width:25px;
}

#cate_image{
	min-height:533px;
	background-position:50%;
	background-size:cover;
position:relative;
}
#cate_image .container{
position:absolute;
left:0;
right:0;
margin:0 auto;
top:53%;
  -ms-transform: translateY(-50%);
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}
#cate_image h2{
	padding:50px 0 20px 0;
	font-size:3rem;
}
#cate_image h2.calend_h2{
	padding:0 0 20px 0;
}
#cate_image h2 span{
	font-size:1.6rem;
}
#cate_image p{
	font-size:1.6rem;
	line-height:1.8;
}
#cate_image .tumb_image{
padding-top:20px;
}

#pankuzu{
	background-color:#313131;
	color:#fff;
	font-size:1.4rem;
	padding:12px 0;
}
#pankuzu a{color:#fff;}
#pankuzu p a:after{
	content:" > ";
}
#pankuzu p a:last-child:after{
	content:"";
}
/*#pankuzu li{ display:none;}
#pankuzu li:nth-child(2){ display:inline;}*/

#contents_main{
	float:right;
	width:880px;
	padding:63px 0 90px 0;
}
#contents_main .cate_title{
	font-size:2.4rem;
	padding:20px 0 28px 0;
}
#contents_main .cate_title a:after{
	content:" / ";
}
#contents_main .cate_title a:last-child:after{
	content:"";
}
#narabi{
	background-color:#ebebeb;
	margin-bottom:55px;
	padding:9px 20px;
}
#narabi ul{
	text-align:right;
}
#narabi li{
	display:inline-block;
}
#narabi button{
	background-color:#fff;
	font-size:1.5rem;
	border:1px solid #cccccc;
	text-align:center;
	padding:5px;
}

#list{}
#list ul{
	letter-spacing:-.4em;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
	margin:0 -27px;}
#list li{
	display:inline-block;
	letter-spacing:normal;
	vertical-align:top;
	width:257px;
	padding-bottom:55px;
	margin:0 27px;
	text-align:center;
}
#list li img{
	border:1px solid #e7e7e7;
	margin:0 auto 25px auto;
	max-height:257px;
}
#list li p{
	text-align:center;
	padding-bottom:15px;
	line-height:1.5;
}
#list li p.productname{
	font-size:1.5rem;
	font-weight:bold;
}
#list li p.productread{ font-size:1.4rem;}
#list li p.producttxt{ font-size:1.3rem;
	padding-bottom:0;}
#list li p.producttxt2{ font-size:1.3rem; font-weight:bold; color:#3366CC;}

.ticonlist{}
#list li .ticonlist img{ height:14px; margin-right:5px; margin-bottom:0; border:none;}

#list ul #infscr-loading{
	letter-spacing:normal;
	text-align:center;}
	#list ul #infscr-loading div{
	text-align:center;}


#product_image{ padding:0 0 60px 0;}
#product_image img{
	border:1px solid #ccc;
	margin: 0 auto;
}
.slider-for{
	background-color:#e6e6e6;
	margin-bottom:20px;
}
.slider-for img{ max-height:578px;}
.slider-for div{ text-align:center;}
.slider-nav div.thumb{ padding:0 5px; text-align:center; cursor:pointer;}
.slider-nav .thumb img{ max-height:116px;}


.ticon{ padding-bottom:5px;}
.ticon img{ margin-right:5px;}

#product_detail{}
#product_detail .left{ width:345px;}
#product_detail .right{ width:440px;}

.product_no{ font-weight:bold; font-size:1.6rem;}
.product_name{ font-weight:bold; font-size:2.2rem; padding-bottom:6px; text-align:left;}
#product_detail .price span{ font-size:1.3rem;}
.product_point{
	font-weight:bold;
	padding:30px 0 13px 0;
}
.product_txt{}
.product_txt_free{ padding-top:20px; color:#CC0033;}
.product_txt_free2{ padding-top:20px;}
#product_detail h4,
#product_pricelist h4{
	border-left:5px solid #000;
	font-weight:bold;
	padding-left:8px;
	margin-bottom:30px;
	line-height:1;
}

#product_detail .right table{ width:100%;}
#product_detail .right td{
	border-bottom:1px solid #d7d7d7;
	padding:5px;
}
#product_detail .right td:nth-of-type(1) {
white-space:nowrap;
	}
.iconlist{ padding-top:60px;}
.iconlist ul{ padding-bottom:16px;}
.iconlist li{ display:inline-block; vertical-align:top; text-align:left;}
.iconlist li img{ margin-bottom:5px;}
.iconlist li.iconbox1 img{ margin-right:4px;}
.iconlist li.iconbox1 img:last-child{margin-right:40px;}
.iconlist li.iconbox2 img{ margin-right:9px;}
#product_tag_box svg{ width:43px; margin-bottom:5px;}

.iconbtn a{ display:block; background-color:#333; color:#fff; text-align:center; width:165px; padding:8px 0; margin-top:20px;
	border-radius:6px;
}
.iconbtn a:hover{
	background-color:#a40035;
}

#product_pricelist{
	padding:60px 0 0 0;
	clear:both;
}
#product_pricelist table{
	background-color:#eaeaea;
	width:100%;
	margin-bottom:55px;
}
#product_pricelist th,
#product_pricelist td{
	border-bottom:1px solid #d7d7d7;
	text-align:center;
	padding:5px;
	width:30%
}
#product_pricelist th{
	background-color:#868686;
	color:#fff;
	font-weight:normal;
	padding:10px;
}
#product_pricelist tr:nth-child(2n) {
	background-color: #fff;
}
#product_pricelist td:nth-of-type(2) {
	color:#ae4848;
	font-weight:bold;
	}
#product_pricelist td:nth-of-type(3) {
	color:#8c8c8c;
	text-decoration:line-through;
	display:none;
}
#product_pricelist th:nth-of-type(3){
	display:none;
}

.chumonbtn_txt{
	text-align:center;
	font-size:1.4rem;
	padding:0 0 10px 0;
}
#chumonbtn{
	text-align:center;}
#chumonbtn a{
	display:inline-block;
	width:335px;
	padding:10px 0 9px 0;
	background-color:#333;
	color:#fff;
	font-size:1.6rem;
	text-align:center;
	border-radius:6px;
	margin:0 5px;
}
#chumonbtn a:hover{
	background-color:#a40035;
}


.chumonbtn_fax{
	font-size:2.4rem;
	font-weight:bold;
	padding-top:20px;
	text-align:center;
}
.chumonbtn_fax img{
	vertical-align:middle;
}


#sidenavi{
	float:left;
	width:260px;
	font-size:1.4rem;
}
#sidenavi h3{
	padding:50px 0 30px 15px;
	font-size:2.4rem;
	font-family:Century Gothic, sans-serif;
	border-bottom:1px solid #d9d9d9;
}
.sidemenu{}
.sidemenu li{
	font-weight:bold;
	border-bottom:1px solid #d9d9d9;
	padding:10px 0 10px 15px;
}
.sidemenu li a.on{ font-weight:bold; color:#a40035;}
.sidemenu li ul{
	padding-left:5px;
	display:none;
}
.sidemenu li ul li{
	font-weight:normal;
	border-bottom:none;
	padding:2px 0;
}

.sidesub{
	padding:50px 0 50px 20px;
}
.sidesub li{
	line-height:2;
}


#footer{
	border-top:1px solid #d9d9d9;
	font-size:1.4rem;
}
.footerbox{
	float:left;
	border-right:1px solid #d9d9d9;
	padding-top:50px;
	height:450px;
	padding-left:40px;
}
.box1{ width:322px; padding-left:0;}
.box2{ width:133px;}
.box3{ width:285px;}
.box4{ width:207px;}
.box5{ border-right:none;}

.box1 p{
	padding-bottom:12px;
	line-height:1.5;
}
.box1 .companyname{
	font-weight:bold;
	font-size:1.8rem;
	padding-bottom:20px;
}


#copyright{
	background-color:#272727;
}
#copyright p{
	padding:22px 0 10px 0;
	color:#fff;
	font-size:1.2rem;
}

.container-fluid .container{
	border-left:1px solid #d9d9d9;
	background-image:url(../img/sidenavi_back.png);
	background-repeat:repeat-y;
	background-position:259px 0px;
}


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

/*base*/
html {
	min-width: 100%;
}
body {
	font-size: 1.4rem;
	line-height: 180%;
	min-width: 100%;
}

.vsp{ display:inline;}

.container{
	width: 100%;
	padding:0 10px;
}
.container-fluid .container{
	border-left:none;
}

#header h1{
	float:none;
	font-size: 1.2rem;
padding: 10px 0 15px 10px;
}

#header h1 p{
	font-size:1.8rem;}
	
	
#headnavi,.footerbox{
	display:none;
}
#cate_image{
	min-height:auto;
	padding-top:0;
}

#cate_image .container{
position:relative;
left:auto;
right:auto;
top:auto;
  -ms-transform: translateY(0);
  -webkit-transform : translateY(0);
  transform : translateY(0);
}
#cate_image h2,#cate_image h2.calend_h2{
	padding:55px 0;
	font-size:2rem;
	margin-top:0;
}
#cate_image h2 span{
	font-size:1.4rem;
}
#cate_image p,#cate_image .tumb_image{
	display:none;
}


#pankuzu{
	font-size:1.1rem;
	padding:10px 0;
}

#contents_main{
	float:none;
	width:100%;
	padding:20px 0 50px 0;
}
#contents_main .cate_title{
	font-size:2rem;
	padding:5px 0 28px 0;
}
#narabi{
	margin-bottom:30px;
	padding:9px 5px;
	font-size:1.1rem;
}
#narabi button{
	font-size:1.2rem;
	padding:3px;
}

#list ul{
	margin:0;}
#list li{
	width:48%;
	padding-bottom:30px;
	margin:0 4% 0 0;
}
#list li:nth-child(even){
	margin:0;}
#list li img{
	margin-bottom:15px;
}
#list li p{
	padding-bottom:10px;
}

#product_image{ padding:0 0 30px 0;}
.slider-for{
	background-color:#e6e6e6;
	margin-bottom:20px;
}
.slider-for img{ max-height:250px;}
.slider-nav div.thumb{}
.slider-nav .thumb img{ max-height:85px;}


#copyright p{
	padding:10px 0;
	font-size:1.1rem;
}



#product_detail{}
#product_detail .left,#product_detail .right{ width:100%; float:none;}
#product_detail .left{ padding-bottom:50px;}

.product_no{ font-size:1.5rem;}
.product_name{ font-size:2rem;}
#product_detail h4,
#product_pricelist h4{
	margin-bottom:15px;
}

#product_detail .right table{ width:100%;}
#product_detail .right th{
}
#product_detail .right td{
	font-size:1.3rem;
}
#product_detail .right td:nth-of-type(1) {
white-space:normal;
	}
.iconlist{ padding-top:20px;}
.iconlist ul{ padding-bottom:10px;}
.iconlist li.iconbox1 img:last-child{margin-right:4px;}
.iconlist li.iconbox2 img{ margin-right:4px;}
#product_tag_box svg{ width:35px;}

#product_pricelist th,
#product_pricelist td{
	padding:5px 3px;
	font-size:1.1rem;
}#product_pricelist th{ line-height:1.3;}

#product_pricelist td:nth-of-type(2) {
	font-size:1.3rem;
	}


#chumonbtn a{
	width:100%;
	display:block;
	margin:5px 0;
	font-size:1.5rem;
}

#sidenavi{
	float:none;
	width:100%;
	border-left:none;
	border-right:none;
}
#sidenavi h3{
	padding:50px 0 15px 10px;
	font-size:2rem;
}
#drawer h3{
	padding:50px 0 15px 10px;
	font-size:2rem;
	font-family:Century Gothic, sans-serif;
	border-bottom:1px solid #d9d9d9;
}
.sidemenu{}
.sidemenu li{
	padding:10px 0 10px 15px;
}
.sidemenu li ul li{
	padding:5px 0;
}

.sidesub{
	padding:30px 0 30px 20px;
}

.container-fluid .container{
	border-left:none;
	background-image:none;
}

}