@charset "utf-8";

/*===============================================
  共通
===============================================*/
/*------------------------------
	モバイルメニュー
------------------------------*/
#header .menubtn {
	display: none;
}


#warp {
	z-index: 1;
}
.slidemenu {
	top: 25px;
	right: 0;
	width: 240px;
	position: fixed;
	visibility: hidden;
	z-index: -1;
}
.slidemenu .slidemenu-header {
	position: relative;
}
.slidemenu .slidemenu-body {
	height: 100%;
	overflow: hidden;
	position: relative;
}
.slidemenu .slidemenu-content {
	position: relative;
	padding: 0 10px 40px;
}
.slidemenu .slidemenu-content li {
	font-size: 1.6rem;
}
.slidemenu .slidemenu-content li a {
	font-weight: normal;
	display: block;
	padding: 10px 0 6px;
	text-decoration: none;
}
.slidemenu .slidemenu-content li a:hover {
	text-decoration: underline;
}
.slidemenu .cat ul {
	margin-top: 30px;
}
.slidemenu .cat ul li.top {
	border-bottom: 1px solid #DBD5D0;
	font-weight: bold;
}
.slidemenu .cat ul li a {
	background: url(../image/icon01.jpg) left center no-repeat;
	padding-left: 15px;
}
#wrap .mb {
	display: none;
}


/*===============================================
  画面の横幅が680px以下に適用
===============================================*/
@media screen and (max-width: 680px){
	/*--------------------------------------
		common
	--------------------------------------*/
	html {
		font-size: 62.5%;
	}
	/* box-sizing（padding、borderを含んだ幅、高さにする） */
	*, *:before, *:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	img {
		max-width: 100%;
		max-height: 100%;
	}
	body,
	#wrap,
	#header .header,
	#footer .footer {
		width: auto;
		min-width: 320px;
	}
	/* LSEARCH */
	div.sbox-cen h1.stext {
		font-weight: normal;
	}
	div.sbox-cen p.summary {
		display: none;
	}
	/* h1 */
	body h1.seotext {
		padding-bottom: 0;
		font-size: 1.0rem;
	}
	body h1.seotext span {
		display: none;
	}
	#wrap {
		background: #FFFFFF;
		font-size: 1.2rem;
	}
	#main {
		float: none;
		width: 94%;
		padding: 15px 0;
		margin: 0 auto;
	}
	/* .panz */
	#content .panz {
		font-size:1.2rem;
		line-height: 1.2;
	}
	#content .panz li {
		display: inline-block;
		/display: inline;
	}
	/* #pagetop 角丸 */
	#main #pagetop {
		padding: 0;
		margin: 0;
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 9999;
		display: none;
	}
	#main #pagetop a {
		background: rgba(0,0,0,0.7);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		display:block;
	}
	#main #pagetop a img {
		display: none;
	}
	#main #pagetop a:after {
		content: "";
		position: absolute;
		top: 40%;
		left: 30%;
		display: block;
		width: 15px;
		height: 15px;
		border-right: #FFF 1px solid;
		border-bottom: #FFF 1px solid;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}

	/*--------------------------------------
		#header
	--------------------------------------*/
	#header {
		position: relative;
		width: 100%;
		height: 75px;
	}
	#header .header {
		padding: 8px 10px;
		width: auto;
		height: 100%;
	}
	#header .header .logo {
		width: auto;
		height: 100%;
		padding: 0;
	}
	#header .header .logo img {
		max-height: 100%;
	}
	#header .header .info {
		display: none;
	}
	/* .menubtn */
	#header .header .menubtn {
		float: right;
		width: 36px;
		height: 36px;
		display: block;
		position: absolute;
		top: 12px;
		right: 15px;
	}

	/*--------------------------------------
		#nav
	--------------------------------------*/
	#nav {
		display: none;
	}

	/*--------------------------------------
		#side
	--------------------------------------*/
	#side {
		float: none;
		width: 100%;
	}
	#side p.top,
	#side .nav,
	#side .infobar,
	#side .info,
	#side .catbar,
	#side .catlist {
		display: none;
	}
	#side .contact {
		overflow: hidden;
	}
	#side .contact li {
		float: left;
	}
	#side .banner {
		margin-bottom: 10px;
		text-align: center;
		overflow: hidden;
		/zoom: 1;
	}
	#side .banner li {
		text-align: center;
	}
	#side .banner li:nth-child(2n) {
		margin: 0;
	}
	#side .guide {
		text-align: center;
	}

	/*--------------------------------------
		#fnav
	--------------------------------------*/
	#fnav {
		width: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#fnav ul {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#fnav ul li {
		position: relative;
		float: left;
		border-bottom: #EEE 1px solid;
		border-right: none;
		width: 100%;
	}
	#fnav ul li.mb {
		display: inline-block;
	}
	#fnav ul li a {
		padding: 12px 10px 10px;
		font-size: 1.6rem;
		font-weight: normal;
		text-align: left;
		text-decoration: none;
		display: block;
	}
	#fnav ul li a:after {
		position: absolute;
		top: 50%;
		right: 18px;
		border-right: #FFFFFF 1px solid;
		border-bottom: #FFFFFF 1px solid;
		width: 12px;
		height: 12px;
		margin-top: -7px;
		display: block;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		content: "";
	}
	
	/*--------------------------------------
		#footer
	--------------------------------------*/
	#footer .footer {
		padding: 15px 10px 55px;
	}
	#footer .footer p {
		line-height: 1.6;
		text-align: center;
	}
	#footer .footer address {
		text-align: center;
	}

	/*--------------------------------------
		#content
	--------------------------------------*/
	#content {
		float: none;
		width: auto;
		padding: 0 0 20px;
		font-size: 1.4rem;
		line-height: 1.5;
	}
	#content h3 {
		width: auto;
		padding: 6px 10px 4px;
		margin-bottom: 1.0em;
		font-size: 1.6rem;
		line-height: 1.4;
	}
	#content .aside {
		display: none;
	}
	#content .aside dl,
	#content .aside li {
		width: 48.5%;
		margin: 0 3% 30px 0;
	}
	#content .aside dl:nth-child(even),
	#content .aside li:nth-child(even) {
		margin-right: 0;
	}
	#content .likebox iframe {
		display: none;
		width: 100% !important;
	}
	
	/* table */
	/* table */
	#content table {
		border-bottom: 1px solid #DCD5CD;

	}
	#content table th,
	#content table td {
		border-bottom: none;
		width: 100%;
		display: block;
		padding: 10px 30px 5px 20px;
	}

	/* .imgleft, .imgright */
	#content .imgleft ul.image,
	#content .imgright ul.image {
		width: 110px;
	}
	#content .imgleft ul.image {
		margin-right: 10px;
	}
	#content .imgright ul.image {
		margin-left: 10px;
	}
	#content .imgleft ul.image li,
	#content .imgright ul.image li {
		margin-bottom: 10px;
		width: auto;
	}
	#content .imgleft ul.image li a,
	#content .imgright ul.image li a,
	#content .imgleft ul.image li span,
	#content .imgright ul.image li span {
		width: 110px;
		height: 110px;
		padding: 0;
	}
	#content .imgleft ul.image li a img,
	#content .imgright ul.image li a img,
	#content .imgleft ul.image li span img,
	#content .imgright ul.image li span img {
		max-width: 106px;
		max-height: 106px;
	}
	#content div.imgleft .text,
	#content div.imgright .text {
		width: 100%;
		margin: 0 0 20px;
	}
	#content .section .box ul.image {
		width: 100px;
	}
	#content .section .imgleft p,
	#content .section .imgright p {
		width: 100%;
		margin: 0 0 20px;
		overflow: visible;
	}
	#content p.contact {
		margin-bottom: 0;
	}

	/* pagebute */
	#content ul.page li a.link_page,
	#content ul.page li span.current_page {
		border-radius: 4px;
		width: 28px;
		height: 28px;
		padding: 8px 0;
		margin-bottom: 10px;
	}

	/* youtube */
	.movie {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		padding-top: 30px;
		margin-bottom: 5px;
		overflow: hidden;
	}
	.movie iframe,
	.movie object,
	.movie embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/*--------------------------------------
		index
	--------------------------------------*/
	#wrap .index .mb {
		display: block;
	}
	.index ul.mb {
		margin-bottom: 50px;
	}
	.index ul.mb li {
		margin-bottom: 10px;
	}
	#search {
		width: 448px;
		margin: 0 auto 20px auto;
	}
	#search dl {
		width: 132px;
	}
	#search dl.none {
		margin: 0 17px 25px 0;
	}
	#search dl dd.image a img {
		max-width: 100%;
	}
	#topics {
		border: 1px solid #CCCCCC;
		height: auto;
		margin-bottom: 30px;
		overflow: hidden;
	}
	#topics dl {
		padding: 5px 10px;
	}
	#topics dl:last-child {
		border: none;
	}
	
	#info #map {
		float: none;
		margin-bottom: 15px
	}
	#info dl {
		float: none;
		margin: 0;
		text-align: center;
	}
	#info dl dd p {
		text-align: center;
	}

	/*--------------------------------------
		type
	--------------------------------------*/
	#content .type .image a {
		height: 400px;
	}

	/*--------------------------------------
		voice
	--------------------------------------*/
	#content #voice .imgleft ul.image {
		float: none;
		margin: 0 auto 10px;
	}
	#content #voice .imgleft ul.image li {
		margin: 0 0 10px 0;
	}
	#content #voice .imgleft ul.image li.last {
		margin: 0;
	}

	/*--------------------------------------
		#product（一覧）
	--------------------------------------*/
	#product {
		margin-bottom: 20px;
	}
	#product dl,
	#product dl.none {
		float: none;
		width: 100%;
		margin: 0 0 15px;
		overflow: hidden;
		/zoom: 1;
	}
	#product dl dd.image {
		float: left;
		margin-right: 10px;
		margin-left: 0;
	}
	#product dl dd.image a {
		width: 110px;
		height: 110px;
	}
	#product dl dd.image a img {
		max-width: 100px;
		max-height: 100px;
	}
	#product dl dt {
		margin-top: 0;
		padding-top: 0;
		margin-left: 120px;
		font-size: 1.6rem;
	}
	#product dl dd {
		margin-left: 120px;
	}

	/*--------------------------------------
		#product（詳細）
	--------------------------------------*/
	#detail .box .imgbox,
	#detail .box .cart {
		float: none;
		width: auto;
	}
	#detail .box .imgbox ul.imgbig li a,
	#detail .box .imgbox ul.imgbig li span {
		height: 300px;
	}
	#detail .box .imgbox ul.imglist li a,
	#detail .box .imgbox ul.imglist li span {
		height: 60px;
	}
	#detail .box .imgbox ul.imglist li.none {
		margin: 10px 10px 0 0;
	}
	#detail .box .cart form#newdat {
		text-align: center;
		margin-bottom: 20px;
	}

	/*--------------------------------------
		.imgbox（画像リスト）
	--------------------------------------*/
	#content .imgbox {
		margin: 0 0 15px;
	}
	#content .imgbox ul.imgbig {
		float: none;
		margin: 0 0 10px;
		text-align: center;
	}
	#content .imgbox ul.imgbig li {
		width: 300px;
		height: 300px;
		padding: 0;
		margin: 0 auto 10px;
	}
	#content .imgbox ul.imgbig li a,
	#content .imgbox ul.imgbig li span {
		width: 300px;
		height: 300px;
		padding: 0;
	}
	#content .imgbox ul.imgbig li a img,
	#content .imgbox ul.imgbig li span img {
		max-width: 290px;
		max-height: 290px;
	}
	#content .imgbox ul.imglist {
		float: none;
		width: 100%;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	    letter-spacing: -0.4em;
		text-align: center;
		line-height: 0;
	}
	#content .imgbox ul.imglist li {
		float: none;
		width: 60px;
		height: 60px;
		padding: 0;
		margin: 0 5px 10px;
		text-align: center;
    	letter-spacing: normal;
		display: inline-block;
		/display: inline;
	}
	#content .imgbox ul.imglist li a,
	#content .imgbox ul.imglist li span {
		width: 60px;
		height: 60px;
	}
	#content .imgbox ul.imglist li a img,
	#content .imgbox ul.imglist li span img {
		max-width: 50px;
		max-height: 50px;
	}

	/*--------------------------------------
		#map
	--------------------------------------*/
	#content #map,
	#content #map01,
	#content #map02 {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}

	/*--------------------------------------
		contact
	--------------------------------------*/
	#content p.contact_tel {
		background: none;
		padding: 0;
	}

	#content .mailform table th {
		font-size: 1.6rem;
	}
	#content .mailform table th,
	#content .mailform table td {
		width: 100%;
		padding: 8px 20px 8px 20px;
		display: block;
	}
	#content .mailform table input[type="text"] {
		border-radius: 5px;
		width: 100%;
		height: 2.5em;
	}
	#content .mailform table td input.postage {
		width: 150px;
	}
	#content .mailform table textarea {
		border-radius: 5px;
		width: 100% !important;
		height: 120px !important;
		margin: 2px 0;
		padding: 5px;
	}

	/* datepicker */
	/* カレンダー自体を大きく */
	#ui-datepicker-div {
		margin-top: -100px !important;
	}
	.ui-datepicker {
		width: 80%;
		height: 380px;
		margin: auto;
		overflow: hidden;
		background: #fff;
		border: 6px solid #ccc;
		border-radius: 12px;
		box-shadow: 18px 18px 0 0 rgba(0,0,0,0.1);
	}

	/* タイトルと矢印 */
	.ui-datepicker .ui-datepicker-header {
		padding: 6px;
		font-size: 18px;
		border-radius: 6px 6px 0 0;
	}

	/* 矢印 */
	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		top: auto;
	}
	.ui-widget-header .ui-icon {
		background-image: none !important;
	}


	.ui-datepicker-prev::after,
	.ui-datepicker-next::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: block;
		width: 12px;
		height: 12px;
		border: 2px solid;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.ui-datepicker-prev::after {
		border-color: transparent transparent #000 #000;
	}
	.ui-datepicker-next::after {
		border-color: #000 #000 transparent transparent;
	}

	/* 曜日 */
	.ui-datepicker th {
		padding: 6px 6px;
	
		font-size: 18px;
		font-weight: normal;
		text-align: center;
	
		color: #000;
		border-bottom: 1px solid #000;
	}

	/* 日付の文字と余白を大きく */
	.ui-datepicker td span,
	.ui-datepicker td a {
		padding: 6px 6px;
	
		font-size: 18px;
		text-align: center;
	
		color: #333;
		border-radius: 4px;
	}

	/* 選択中 */
	.ui-datepicker td a.ui-state-active {
		color: #fff;
		background: #3366FF;
		box-shadow: inset 0 0 0 1px #fff;
	}

	/* 今日 */
	.ui-datepicker td a.ui-state-highlight {
		border: 2px solid #3366FF;
	}

	/* ボタンパネル */
	/*
	.ui-datepicker .ui-datepicker-buttonpane {
		position: absolute;
		left: 3px;
		right: 3px;
		bottom: 3px;
		padding: 0;
		border-top: 1px solid #000;
	}
	*/
	.ui-datepicker .ui-datepicker-buttonpane button {
		-webkit-appearance: none;
		min-width: 60px;
		margin: 3px 0 0;
		padding: 6px;
		font-size: 14px;
	/*
		color: #fff;
		background: #000;
		border: 0 none;
		border-radius: 6px;
	*/
	}
	div#mfp_overlay_inner {
		width: 98%;
	}

}


/*===============================================
  画面の横幅が480px以下に適用
===============================================*/
@media screen and (max-width: 480px){
	/*--------------------------------------
		#side
	--------------------------------------*/
	#side .banner li {
		width: 100%;
		margin: 0 0 10px;
	}

	/*--------------------------------------
		#fnav
	--------------------------------------*/
	#fnav ul li {
		float: left;
		border-right: none;
		width: 100%;
	}
	#fnav ul li:last-child {
		border-bottom: none;
	}

	/*--------------------------------------
		index
	--------------------------------------*/
	#search {
		width: 282px;
	}
	#search dl:nth-child(even) {
		margin-right: 0;
	}
	#topics {
		border: 1px solid #CCCCCC;
		margin-bottom: 30px;
	}
	#topics dl {
		overflow: hidden;
		/zoom: 1;
	}
	#topics dt {
		float: none;
		font-size: 0.85em;
	}
	#topics dd {
		padding: 0;
		margin-left: 10px;
	}

	#navbox {
		width: 80%;
		margin: 10% 10% 0;
	}

	/*--------------------------------------
		type
	--------------------------------------*/
	#content.type .image a {
		height: auto;
	}

	/*--------------------------------------
		free
	--------------------------------------*/
	#content .section table th,
	#content .section table td {
		width: 100%;
	}
}