@charset "utf-8";

/*共通スタイル設定の追加*/
.container{
	max-width: 100%;
}
#main table{
	max-width: 100%!important;
	margin: 0;
}
#side #sidecomp p.heading{
	background-repeat: repeat-x;
}

#footer{
font-family: "Meiryo UI", メイリオ, Meiryo, sans-serif;
color: #333;
}
#footer #footermenu > ul,
#footer #footermenu > ul > li > ul,
#footer #footermenu > ul li a,
#footer #footermenu > ul > li > ul li a{
color: #333;
}

/*エディターで設定するクラスのスタイル*/

.aligncenter {
	display: block;
	margin: 0 auto;
}
.alignright{float: right;}
.alignleft{float: left;}
img[class*="wp-image-"],
img[class*="attachment-"]{
	height: auto;
	max-width: 100%;
}


/*
===========================================================
smartphone_menubutton
===========================================================
*/

@media screen and (max-width: 680px){
	#smartphone_overlay{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.7);
		/*wpの管理バー(9999)より下に表示*/
		z-index: 9998;
	}
	#smartphone_overlay.show{
		display: block;
	}
	#smartphone_menubutton{
		display: block;
		position: fixed;
		right: 9px;
		/*top: 49px;*/
		top: 4px;
		width: 36px;
		height: 36px;
		background-color: #3E569D;
		/*wpの管理バー(9999)より上に表示*/
		z-index: 100000;
	}
	#smartphone_menubutton span{
		display: block;
		position: absolute;
		width: 26px;
		height: 1px;
		left: 5px;
		top: 18px;
		background-color: #fff;
	}
	#smartphone_menubutton span.b1{
		transform: translateY(-7px);
	}
	#smartphone_menubutton span.b3{
		transform: translateY(7px);
	}
	#smartphone_menubutton.show{
		background-color: #d00;
	}
	#smartphone_menubutton.show span.b1{
		transform: rotate(225deg);
		height:2px;
	}
	#smartphone_menubutton.show span.b2{
		transform: rotateY(90deg);
	}
	#smartphone_menubutton.show span.b3{
		transform: rotate(-225deg);
		height:2px;
	}

}

/*
===========================================================
header(and webmenu)
===========================================================
*/
@media screen and (max-width: 970px){
	#header{
		width: auto;
	}
}
/*
@media screen and (max-width: 880px){
	#header{
		padding-right: 40px;
	}
}
*/
@media screen and (max-width: 680px){
	#header{
		padding-top: 44px;
		height: auto;
	}
	#header.webmenushow{
		padding-top: 0;
		z-index: 100000;
	}
	#header #webmenu{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		text-align: left;
		padding: 44px 0 0 0;
		background-color: #eee;
		font-size: 1em;
		display: none;
		z-index:100001;
	}
	#header #webmenu.show{
		display: block;
	}
	#header #webmenu ul li{
		display:block;
		padding: 0;
		background: none;
	}
	#header #webmenu ul li a{
		display:block;
		text-align: center;
		border-top: 1px dotted #999;
		padding: 22px 0;
	}
	#header #webmenu ul li a:hover{
		background-color: #ddd;
	}
}

/*
===========================================================
gnav1
===========================================================
*/

/*
@media screen and (max-width: 1065px){
	#gnav1{
		font-size: 0.85em;
	}
	#gnav1 ul{
		width: auto;
		margin: 0 53px;
	}
	#gnav1 ul li{
		width: 20%;
	}
	#gnav1 ul li a{
		width: auto;
	}
}
@media screen and (max-width: 880px){
	#gnav1{
		background-color: #fff;
		background-image: none;
		height: auto;
		position: fixed;
		top: 0;
		z-index: 100000;
		width: 100%;
		display: none;
	}
	#gnav1.show{
		display: block;
	}
	#gnav1 ul{
		height: auto;
		margin: 0;
	}
	#gnav1 ul li{
		float: none;
		width: auto;
	}
	#gnav1 ul li a:hover{
		background-color: #eee;
	}
}
@media screen and (max-width: 680px){
	#gnav1{
		top: 80px;
	}
}
*/

@media screen and (max-width: 980px){
	#gnav1{
		height: auto;
		background: #ddd;;
	}
	#gnav1:after{
		content: "";
		display:block;
		clear: both;
	}
	#gnav1 ul{
		width: 99%;
		height: auto;
		background: url(gnav1-bg2.png) repeat-x left bottom #fff;
	}
	#gnav1 li{
		width: 33.33%;
		background: url(gnav1-bg2.png) repeat-x left bottom #fff;
	}
	#gnav1 li a{
		width: auto;
		height: 30px;
		padding-top: 14px;
		border-left: none;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	#gnav1 li:nth-child(3) a{
		border-right: none;
	}
}
@media screen and (max-width: 540px){
	#gnav1{
		font-size: 0.6875em;
	}
	#gnav1 li a{
		padding-top: 18px;
	}
}
@media screen and (max-width: 360px){
	#gnav1{
		font-size: 0.625em;
	}
	#gnav1 li a{
		height: 25px;
		padding-top: 16px;
	}
}


/*
===========================================================
mainvisual
===========================================================
*/
#mainvisual,
#mainvisual_sp{
	width: 100%!important;
}
#mainvisual img,
#mainvisual_sp img{
	max-width: 100%!important;
	height: auto;
}

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

#mainvisual{
display: none;
}
#mainvisual_sp{
display: block;
}

}

/*
===========================================================
gnav2
===========================================================
*/
/*
@media screen and (max-width: 980px){
	#gnav2{
		height: auto;
		width: auto;
	}
	#gnav2 ul{
		width: 100%;
	}
	#gnav2 ul:after{
		content: "";
		display: block;
		width: 100%;
		clear: both;
	}
	#gnav2 ul li{
		height: auto;
		width: 31%;
		-float:none;
		margin: 10px 1%!important;
	}
	#gnav2 ul li a{
		width: 100%;
		padding: 0;
	}
	#gnav2 ul li img{
		max-width: 100%;
	}
}
@media screen and (max-width: 580px){
	#gnav2{
		padding: 0;
	}
	#gnav2 ul{
		background-color: #eee;
		padding: 20px 0;
	}
	#gnav2 ul li{
		height: auto;
		width: 50%;
		min-width: 300px;
		float: none;
		display: block;
		margin: 10px auto 0!important;
		background-color: white;
	}
	#gnav2 ul li:first-child{
		margin-top: 0!important;
	}
	#gnav2 ul li a{
		outline: 1px solid #ccc;
	}
	#gnav2 ul li a em{
		padding: 10px 1em 10px 2em;
		background-position: 1em center;
	}
}
*/



/*
===========================================================
gnav2
===========================================================
*/
@media screen and (max-width: 980px){
	#gnav2{
		height: auto;
		width: auto;
	}
	#gnav2 ul{
		width: 100%;
	}
	#gnav2 ul:after{
		content: "";
		display: block;
		width: 100%;
		clear: both;
	}
	#gnav2 ul li{
		height: auto;
		width: 31.33%;
		margin: 10px 1%!important;
	}
	#gnav2 ul li a{
		width: 100%;
		padding: 0;
	}
	#gnav2 ul li img{
		max-width: 100%;
	}
	#gnav2 ul li .en{
		font-size: 1.1em;
		padding-top: 17px;
	}
}
@media screen and (max-width: 740px){
	#gnav2 ul li .en{
		font-size: 0.85em;
		padding-top: 20px;
	}
}
@media screen and (max-width: 580px){
	#gnav2{
		padding: 0;
	}
	#gnav2 ul{
		background-color: #eee;
		padding: 20px 0;
	}
	#gnav2 ul li{
		height: auto;
		width: auto;
/*		min-width: 300px;*/
		float: none;
		display: block;
		margin: 10px auto 0!important;
		/*background-color: white;*/
	}
	#gnav2 ul li:first-child{
		margin-top: 0!important;
	}
	#gnav2 ul li a{
		outline: 1px solid #ccc;
	}
	#gnav2 ul li a em{
		padding: 10px 1em 10px 2em;
		background-position: 1em center;
	}
	#gnav2 ul li .en{
		font-size: 1.3em;
		padding-top: 16px;
	}

}


/*
===========================================================
content / contentbody
===========================================================
*/

@media screen and (max-width: 980px){
	#content #contentbody .container{
		width: auto;
		margin: 0;
	}
	#content #contentbody .container #main{
		width: auto;
		float: none;
	}
	#content #contentbody .container #side{
		width: auto;
		float: none;
	}

	body.sub #content #contentbody .container{
		margin: 0 20px;
	}
/*
	body.sub #content #contentbody .container #side{
		margin: 0 20px;
	}
*/
	body.sub #content #contentbody .container .breadcrumbs{
		font-size: x-small!important;
		line-height: 1.6;
	}
	body.sub #content #contentbody .container .breadcrumbs a{
		color: currentColor;
	}
/*2018-02-07
	#main table.noborder{
		width: 90%!important;
	}
*/
	#main img{
		max-width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 800px){
	#main p{
		margin: 0 0 20px;
	}
}
@media screen and (max-width: 590px){


	#main h2 em{
		display: block;
		position: static!important;
	}
	#main h2 em:before{content: "（";}
	#main h2 em:after{content: "）";}

/*	
	#main table{
		table-layout: fixed;
	}
	#main table tr td{
		width: auto!important;
		height: auto!important;
	}
*/


/*
	#main table tr td br{
		display: none;
	}
*/


/*
	#main table:not(.noborder){
		display: block;
		width: auto!important;
	}
	#main table:not(.noborder) tbody{
		display: block;
	}
	#main table:not(.noborder) tbody tr{
		display: block;
	}
	#main table:not(.noborder) tbody tr th{
		display: block;
		width: auto!important;
		margin-bottom: 0;
	}
	#main table:not(.noborder) tbody tr td{
		display: block;
		width: auto!important;
		margin-bottom: 0;
	}
*/



/*
縦ならびにするもの
.outlineonly
.noborder→？

*/

	#main table{
		width: 100%;
		height: auto!important;
		display: block;
		white-space: nowrap;
		overflow-y: hidden;
		border: none;
/*
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-overflow-scrolling: touch;
*/
		overflow-x: auto;
	}
	#main table tbody {
		border: 2px solid #b4bfc8;
		display: table;
	}
/*
	#main .default table tbody tr th,
	#main .default table tbody tr td {
		font-size: 0.75rem;
		letter-spacing: 0.04rem;
		line-height: 1.46;
		padding: 7px 12px;
	}
*/
/*
	#main table tbody tr th {
		min-width: 100px;
		height: auto!important;
	}
	#main table tbody tr td {
		min-width: 150px;
		height: auto!important;
	}
*/
	#main table tbody tr th img,
	#main table tbody tr td img {
/*		max-width: none!important;*/
		min-width: 150px;
	}





	#main table.outlineonly,
	#main table.noborder{
		display: block;
		width: auto!important;
		height: auto!important;
		border: none;
		white-space: normal;
	}
	#main table.outlineonly tbody,
	#main table.noborder tbody{
		display: block;
		border: none;
	}
	#main table.outlineonly tbody tr,
	#main table.noborder tbody tr{
		display: block;
	}
	#main table.outlineonly tbody tr th,
	#main table.noborder tbody tr th{
		display: block;
		width: auto!important;
		height: auto!important;
		margin-bottom: 10px;
	}
	#main table.outlineonly tbody tr td,
	#main table.noborder tbody tr td{
		display: block;
		width: auto!important;
		height: auto!important;
		margin-bottom: 10px;
		border: none;
	}




}


/*
===========================================================
商品個別ページ
===========================================================
*/
@media screen and (max-width: 980px){
	#main .products-detail-photo img{
		max-width: 100%!important;
	}
}

/*
===========================================================
side
===========================================================
*/

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

	#content #contentbody .container #side{
		width: 100%;
		max-width: 640px;
		margin: auto;
	}
	#side{
		padding-top: 0;
	}
	#side #sidebanner{
		text-align: center;
	}
	#side #sidebanner p{
		display: inline-block;
		margin-right: 20px;
	}

	#side #sideitemsearch{
		width: auto;
		-max-width: 280px;
		margin: 0 0 26px;
		-text-align: center;
	}
	#side #sideitemsearch #itemsearchresult ul li{
		background-position: 5px center;
		border-bottom: 1px solid #ddd;
	}
	#side #sideitemsearch #itemsearchresult ul li a{
		display: block;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	#side .sidelinklist p.heading{
		background-position: 10px 15px;
	}
	#side .sidelinklist p.heading a{
		display: block;
		padding:10px;
	}
	#side .sidelinklist ul{
		background-repeat: repeat-x;
		padding-top: 5px;
	}
	#side .sidelinklist ul li{
		display: block;
		background-position: 10px 15px;
		margin: 0;
		border-bottom: 1px solid #ddd;
		padding-left: 15px;
	}
	#side .sidelinklist ul li a{
		display: block;
		padding:10px;
	}
	#side .sidelinklist li ul{
		padding: 0;
	}
	#side .sidelinklist li ul li{
		border-bottom: none;
	}
	#side .sidelinklist li ul li.active{
		margin-left: 0;
		padding: 0 0 0 20px;
		background-position: 10px 15px;
	}
	#side #sideaboutrentalbtn{
		padding: 15px 20px;
		font-size:0.875em;
	}

	#side #sidecomp{
		border: 1px solid #ccc;
		padding: 20px 20px 0;
	}
}


@media screen and (max-width: 600px){
	#side #sidebanner p{
		display: block;
		margin-right: 0;
	}
}

/*
===========================================================
footermenu
===========================================================
*/

@media screen and (max-width: 980px){
	#footer .container{
		width: auto;
		margin: 0 20px;
	}
	#footermenu{
		font-size: 1.2em;
	}
	#footer #footermenu ul{
		line-height: 1.3;
	}
	#footer #footermenu > ul{
		width: 28%;
		margin: 0 2.5% 20px!important;
	}
	#footer #footermenu > ul > li > ul > li{
		margin-bottom: 0;
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid #ddd;
	}
}

@media screen and (max-width: 600px){
	#footer #footermenu > ul{
		width: 45%;
		margin: 0 2.5% 20px!important;
	}
}

@media screen and (max-width: 380px){
	#footer #footermenu > ul{
		float: none;
		width: 100%;
		margin: 0 0 20px!important;
	}
}