@charset "utf-8";

/*
	* Name: responsive.css
	* License: MIT License
	  - http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license
	* Author URI: http://www.3050grafix.com/
	* Author E-mail: hiro@3050grafix.com
*/


/* Stylesheet Document */

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

	/* ========================================
	   * 領域設定 - Header -
	======================================== */

	header > div.container {
		width: 92%;
	}


	/* ========================================
	   * 領域設定 - Contents -
	======================================== */

	#contents > div.title {
		width: 92%;
	}

	#contents > div.container {
		width: 92%;
	}


	/* ========================================
	   * 領域設定 - Nav.breadcrumbs -
	======================================== */

	nav.breadcrumbs > div.container {
		width: 92%;
	}

	footer div.contact {
		width: 92%;
	}

	footer nav.footer > div.container {
		width: 92%;
	}

	footer div#copyright {
		width: 92%;
	}

}


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

	/* ========================================
	   * 領域設定 - Header -
	======================================== */

	header {
		border-bottom: none;
		padding-top: 20px;
	}

	header > div.container {
		width: 100%;
	}

	header > div.container > div#logo {
		float: none;
		margin-bottom: 20px;
		position: static;
		text-align: center;
		width: 100%;
	}

	header > div.container nav.global {
		float: none;
		width: 100%;
	}


	/* ========================================
	   * 領域設定 - Nav.global -
	======================================== */

	nav.global > ul > li > a {
	}

	nav.global > ul > li:first-child > a {
		border-left: none;
	}

	nav.global > ul > li:last-child > a {
		border-right: none;
		text-decoration: none;
	}

	nav.global > ul > li > a > span.link {
		padding-bottom: 0;
		padding-top: 0;
	}

	nav.global > ul > li > a > span.link > span.border {
		border-top: 1px solid #e7e7e7;
		padding-bottom: 18px;
		padding-top: 18px;
	}

	nav.global > ul > li > a > span.link > span.border > img {
		margin-bottom: 6px;
	}


	/* ========================================
	   * 個別設定 - トップ -
	======================================== */

	body.top #topimage {
		width: auto;
	}

	body.top #topimage > div.slider  > div.sliderContents > ul > li {
		max-width: none;
	}

	body.top #topimage > nav.topimage > ul {
		margin-left: auto;
		margin-right: auto;
		width: 96%;
	}

	body.top #topimage > div.slider  > div.sliderContents > ul > li {
		margin-left: 0;
		margin-right: 0;
	}

	body.top #topimage > div.slider  > div.sliderContents > ul > li > a {
		border-radius: 0;
	}

}


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

	/* ========================================
	   * 領域設定 - Contents -
	======================================== */

	#contents > div.separate > #main,
		#contents > div.separate > #sidebar {
			float: none;
	}

	#contents > div.separate > #main {
		margin-bottom: 6%;
		margin-right: 0;
		width: 100%;
	}

	#contents > div.separate > #sidebar {
		width: 100%;
	}

}


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

	/* ========================================
	   * 領域設定 - Header -
	======================================== */

	header {
		margin-bottom: 24px;
	}


	/* ========================================
	   * 領域設定 - Nav.global -
	======================================== */

	nav.global > ul > li {
		width: 50%;
	}


	/* ========================================
	   * 領域設定 - Contents -
	======================================== */

	#contents > div.title {
		margin-bottom: 24px;
	}

	#contents > div.container {
		margin-bottom: 30px;
	}


	/* ========================================
	   * 領域設定 - Nav.breadcrumbs -
	======================================== */

	nav.breadcrumbs {
		margin-bottom: 26px;
	}


	/* ========================================
	   * 領域設定 - Main -
	======================================== */

	#main h3 {
		padding-bottom: 14px;
		padding-top: 14px;
		margin-bottom: 14px;
	}

	#main h4 {
		margin-bottom: 12px;
	}

	#main h5 {
		margin-bottom: 8px;
	}

	#main h5.center {
		margin-bottom: 14px;
	}

	#main p {
		margin-bottom: 14px;
	}

	#main p > br {
		display: none;
	}

	#main div.topimage {
		margin-bottom: 20px;
	}

	#main div.separate {
		margin-bottom: 30px;
	}

	#main div.paragraph {
		margin-bottom: 30px;
	}

	#main div.partition {
		margin-bottom: 20px !important;
		padding-bottom: 20px;
	}

	#main div.overflow {
		position: relative;
		overflow: auto;
	}

	#main div.overflow > table {
		width: 120% !important;
	}

	#main nav.tab > ul > li {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	#main nav.tab > ul > li > a {
		border: none;
		border-bottom: 1px solid #e4e3df;
		font-size: 100%;
		padding: 0;
		text-align: left;
	}

	#main nav.tab > ul > li:first-child > a {
		border-top: 1px solid #e4e3df;
	}

	#main nav.tab > ul > li:last-child > a {
		border-bottom: none;
	}

	#main nav.tab > ul > li > a > span {
		padding: 10px 14px 10px 14px;
	}

	#main ul.photolist > li {
		width: 46% !important;
	}

	#main ul.photolist > li > h6 {
		margin-bottom: 8px;
	}

	#main ul.photolist > li > h6 + p {
		margin-top: 0;
	}

	#main ul.photolist > li > h6 + p.message {
		padding-top: 10px;
	}

	#main ul.linklist {
		margin-bottom: 30px;
	}

	#main div.shopinfo {
		margin-bottom: 20px;
	}

	#main ul.shoplist {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	#main ul.shoplist:not(.slider) > li {
		float: none;
		height: auto !important;
		margin-bottom: 6%;
		margin-left: 0;
		margin-right: 0;
		width: 100% !important;
	}

	#main ul.shoplist > li:last-child {
		margin-bottom: 0;
	}

	#main ul.shoplist > li > a > span.photo,
		#main ul.shoplist > li > a > span.photo > span.photo,
			#main ul.shoplist > li > a > span.photo > span.title,
				#main ul.shoplist > li > a > span.message > span.note {
					margin-bottom: 8px;
	}

	#main dl.newslist {
		margin-bottom: 30px;
	}

	#main dl.newslist > dt,
		#main dl.newslist > dd {
			position: static;
	}

	#main dl.newslist > dt {
		float: none;
		margin-bottom: 2px;
		padding-bottom: 0;
		padding-top: 12px;
	}

	#main dl.newslist > dd {
		padding-bottom: 12px;
		padding-left: 12px !important;
		padding-top: 0;
	}

	#main dl.newslist > dd > span.label {
		margin-right: 10px;
	}

	#main dl.newslist > dd > a:hover {
		text-decoration: none;
	}

	#main table {
		margin-bottom: 20px;
	}

	#main table tr th,
		#main table tr td {
			padding: 10px 12px 10px 12px;
	}

	#main table.responsive tr th,
		#main table.responsive tr td {
			border-left: none;
			box-sizing: border-box;
			display: block;
			padding: 10px 14px 10px 14px;
			width: auto;
	}

	#main table.responsive tr th {
		border-right: none;
		width: 100% !important;
	}

	#main table.responsive thead {
		display: none;
	}

	#main table.responsive tbody tr td {
		text-align: left;
	}

	#main table.responsive tbody tr td > span.title {
		display: inline;
		font-weight: bold;
	}


	/* ========================================
	   * 領域設定 - Footer -
	======================================== */

	footer div.contact {
		width: 100%;
	}

	footer div.contact > ul > li {
		float: none;
		width: 100%;
	}

	footer div.contact > ul > li > div.container {
		border-bottom: 1px solid #e6e6e6;
		padding: 16px 4% 16px 4% !important;
	}

	footer div.contact > ul > li:first-child > div.container {
		border-right: none;
	}

	footer div.contact > ul > li:last-child > div.container {
		border-bottom: none;
	}

	footer div.contact > ul > li:nth-child(even) > div.container {
		padding-left: 0;
	}

	footer div.contact > ul > li:nth-child(odd) > div.container {
		padding-right: 0;
	}

	footer nav.footer > div.container {
		padding-bottom: 0;
		padding-top: 0;
		width: 100%;
	}

	footer nav.footer > div.container > ul > li {
		border-bottom: 1px solid #e6e6e6;
		border-right: none;
		display: block;
		margin-right: 0;
	}

	footer nav.footer > div.container > ul > li > a {
		margin-right: 0;
		padding: 2% 4% 2% 4%;
	}


	/* ========================================
	   * 個別設定 - 記事詳細 -
	======================================== */

	body.article #main ol.menulist > li {
		margin-bottom: 14px;
		padding-bottom: 14px;
	}

	body.article #main ol.menulist > li > div.photo,
		body.article #main ol.menulist > li > div.information {
			float: none;
	}

	body.article #main ol.menulist > li > div.photo {
		margin-right: 0;
		width: 100%;
	}

	body.article #main ol.menulist > li > div.information {
		width: 100%;
	}


	/* ========================================
	   * 個別設定 - トップ -
	======================================== */

	body.top #topimage {
		margin-bottom: 22px;
	}

	body.top #main ul.shoplist > li {
		width: 46%;
	}


	/* ========================================
	   * 個別設定 - トップ -
	======================================== */

	body.product #main > div.container {
		margin-bottom: 30px;
	}

	body.product #main > div.container.gray > div.wrapper {
		padding-bottom: 30px;
		padding-top: 30px;
	}

	body.product #main > div.container.title {
		padding-bottom: 30px;
	}

	body.product #main > div.container.title > p {
		margin-bottom: 0;
	}

	body.product #main > div.container.introduction > h4 {
		color: #0291d5;
		font-size: 152%;
		margin-bottom: 36px
	}

	body.product #main > div.container.introduction > h4 {
		margin-bottom: 18px
	}

	body.product #main > div.container.introduction > div.separate > div.information {
		margin-right: 0;
		width: 100%;
	}

	body.product #main > div.container.introduction > div.separate > div.photo {
		width: 100%
	}

	body.product #main > div.container.introduction > div.separate > div.photo > div.yamaguchi {
		margin-bottom: 16px
	}

	body.product #main > div.container.introduction > div.separate > div.photo > ul.double > li {
		margin-bottom: 2px;
		width: calc(50% - 2px);
	}

	body.product #main > div.container > div.wrapper > ol.productlist > li {
		height: auto !important;
		margin-bottom: 2% !important;
		margin-left: 0;
		margin-right: 0;
		width: 100% !important;
	}

	body.product #main > div.container > div.wrapper > ol.productlist > li:last-child {
		margin-bottom: 0 !important;
	}

	body.product #main > div.container > div.wrapper > ol.productlist > li > div.container {
		height: auto !important;
	}

	body.product #main > div.container > div.wrapper > ol.productlist > li > div.container > div.photo {
		height: auto !important;
		margin-bottom: 14px;
	}

	body.product #main > div.container > div.wrapper > ol.productlist > li > div.container > div.photo:not(.w100p) {
		padding-bottom: 0;
		padding-top: 20px;
	}

	body.product #main > div.container > div.wrapper > ol.productlist > li > div.container > div.information > div.container {
		height: auto !important;
	}

}


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