@charset "utf-8";

/*
	* Name: responsive.css
	* License: MIT License
	  - http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license
*/


/* Stylesheet Document */

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

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

	#altogether {
		box-sizing: border-box;
		padding-left: 2%;
		padding-right: 2%;
		width: 100%;
	}


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

	header {
		margin-bottom: 20px;
		width: 100%;
	}

	header div#logo {
		margin-right: 4%;
		width: 26%;
	}

	header div#logo img {
		height: auto;
		max-width: 218px;
		width: 100%;
	}

	header div.global {
		width: 70%;
	}


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

	nav.global div.container ul li a {
		min-width: inherit !important;
		width: auto !important;
	}

	nav.global div.container ul li a > span {
		padding-left: 8%;
		padding-right: 8%;
	}

	nav.global.fixed div.container {
		width: 96%;
	}

	nav.global.fixed div.container div.logo  {
		width: 26%;
	}

	nav.global.fixed div.container div.logo img  {
		height: auto;
		max-width: 299px;
		width: 100%;
	}


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

	#contents {
		width: 100% !important;
	}


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

	#main {
		margin-bottom: 0;
	}

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

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

	#main div.img_c img {
		height: auto;
		max-width: 100%;
	}

	#main ul.menulist {
		margin-bottom: 40px;
	}

	#main ul.photolist {
		margin-bottom: 20px;
	}

	#main ul.photolist li {
		margin-bottom: 20px;
	}


	/* ========================================
	   * 領域設定 - Side Bar -
	======================================== */

	#sidebar h5 {
		margin-bottom: 14px;
	}

	#sidebar nav.submenu {
		margin-bottom: 20px;
	}

	#sidebar nav.submenu ul li {
		background: none;
		margin-bottom: 0;
		padding-left: 0;
	}

	#sidebar nav.submenu ul li a {
		background: url("../../img/icon_cross_black.png") left center no-repeat;
		display: block;
		padding-bottom: 6px;
		padding-left: 8px;
		padding-top: 6px;
	}


	/* ========================================
	   * 領域設定 - Page Top -
	======================================== */

	#pagetop {
		width: 100%;
	}

	#pagetop div.pagetop.fixed div.container {
		width: 96%;
	}


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

	footer {
		padding-top: 20px;
		width: 100%;
	}

	footer nav.footer {
		margin-bottom: 40px;
		margin-left: auto;
		margin-right: auto;
		width: 96%;
	}

	footer nav.footer > div {
		float: none;
	}

	footer nav.footer > div > h5 {
		clear: both;
		margin-bottom: 20px;
	}

	footer nav.footer > div.tp {
		margin-right: 0;
		width: auto;
	}

	footer nav.footer > div.tp > ul {
		box-sizing: border-box;
		margin-left: -1%;
		margin-right: -1%;
	}

	footer nav.footer > div.tp > ul > li {
		float: none;
		margin-bottom: 20px;
		width: 100% !important;
	}

	footer nav.footer > div.tp > ul {
		margin-left: 0;
		margin-right: 0;
	}

	footer nav.footer > div.tp > ul > li {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	footer nav.footer > div ul li h6 {
		margin-bottom: 10px;
	}

	footer nav.footer > div.tp > ul > li > ul > li {
		background: none;
		margin-bottom: 0;
		padding-bottom: 2px;
		padding-left: 0;
		padding-top: 2px;
	}

	footer nav.footer > div.tp > ul > li > ul > li > a {
		background: url("../../img/icon_cross_white.png") 8px center no-repeat;
		display: block;
		margin-bottom: 6px;
		padding-left: 28px;
	}

	footer nav.footer > div.ds {
		width: auto;
	}

	footer div#copyright {
		margin-left: auto;
		margin-right: auto;
		line-height: inherit;
		text-align: center;
		width: 96%;
	}

	footer div#copyright ul,
		footer div#copyright p {
			display: block;
	}

	footer div#copyright ul {
		border-bottom: 1px dotted #FFFFFF;
		border-top: 1px dotted #FFFFFF;
		box-sizing: border-box;
		display: block;
		margin-bottom: 20px;
		margin-left: 0;
		margin-right: 0;
		padding: 14px;
		width: 100%;
	}

	footer div#copyright ul li {
		background: none;
		margin-left: 4px;
		margin-right: 4px;
		padding-left: 0;
		padding-right: 0;
	}

	footer div#copyright ul li:last-child {
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 14px;
		width: 90%;
	}

	footer div#copyright ul li:last-child a {
		background-color: #CCCA33;
		border-radius: 4px;
		box-sizing: border-box;
		color: #000000 !important;
		display: block;
		font-size: 140%;
		overflow: inherit;
		padding: 12px;
		width: 100%;
	}

	footer div#copyright ul li.sp {
		display: inline !important;
	}

	footer div#copyright p {
		clear: both;
	}


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

	body.top header {
		margin-bottom: 20px;
	}

	body.top #topimage {
		margin-bottom: 20px;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

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

	body.top #topimage h2 img {
		height: auto;
		width: 100%;
	}

	body.top #topimage img#img_topimage {
		height: auto;
		width: 99%;
	}

	body.top #topimage div.photo {
		width: 100%;
	}

	body.top #topimage div.photo ul {
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	body.top #topimage div.photo ul li {dispaly: none;
		margin-left: 2%;
		margin-right: 2%;
		width: 29%;
	}

	body.top #topimage div.photo ul li div.icon {
		margin-bottom: 12px;
	}

	body.top #topimage div.photo ul li a {
		box-shadow: none;
		height: auto;
		width: auto;
	}

	body.top #topimage div.photo ul li h3 {
		font-size: 140%;
		margin-bottom: 16px;
	}

	body.top #topimage div.paragraph {
		margin-left: 0;
		margin-right: 0;
	}

	body.top #main ul.photolist {
		margin-left: -1%;
		margin-right: -1%;
		width: 102%;
	}

	body.top #main ul.photolist > li {
		margin-bottom: 2%;
		margin-left: 1%;
		margin-right: 1%;
		width: 23%;
	}

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

	body.top #main div.title ul.icon {
		display: none;
	}


	/* ========================================
	   * 個別設定 - タッチパネル -
	======================================== */

	body.tp #main {
		width: 66%;
	}

	body.tp #main ul.photolist {
		margin-left: auto;
		margin-right: auto;
		width: 99%;
	}

	body.tp #main ul.photolist li {
		margin-left: 1%;
		margin-right: 1%;
		width: 31%;
	}

	body.tp #main ul.feature {
		margin-bottom: 90px;
	}

	body.tp.parent #main div.tp p img,
		body.tp.parent #main div.method p img {
			height: auto;
			width: 100%;
	}

	body.tp.parent #main div.tp ul.menulist {
		margin-left: auto;
		margin-right: auto;
		width: 99%;
	}

	body.tp.parent #main div.tp ul.menulist li {
		margin-left: 2%;
		margin-right: 2%;
		width: 29%;
	}

	body.tp.parent #main div.tp ul.menulist li a {
		height: 100%;
		width: 100%;
	}

	body.tp.download #main ul.button li a.blue {
		width: auto !important;
	}

	body.tp.item #main div.iteminfo div.photo {
		margin-right: 2%;
		width: 46%;
	}

	body.tp.item #main div.iteminfo div.comment {
		width: 50%;
	}

	body.tp.item #main div.contact ul {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	body.tp.item #main div.contact ul li {
		float: none;
		margin-bottom: 10px;
		width: auto;
	}

	body.tp.item #main div.contact ul li.mail a.button {
		width: 100%;
	}

	body.tp #sidebar {
		margin-right: 4%;
		width: 30%;
	}


	/* ========================================
	   * 個別設定 - アクセス -
	======================================== */

	body.access #main > div.access {
		margin: 0 0 30px 0;
	}

	body.access #main > div.access.hq {
		border-bottom: 1px dashed #000000;
		padding-bottom: 30px;
	}

	body.access #main > div.access > div.access:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* CSS HACK: Safari */
		font-size: 0; /* CSS HACK: Firefox3 */
		visibility: hidden;
	}

	body.access #main > div.access > div.access > div {
		float: none;
	}

	body.access #main > div.access > div.access > div.map {
		margin-bottom: 12px;
		margin-right: 0;
		width: auto;
	}

	body.access #main > div.access > div.access > div.map img {
		height: auto;
		max-width: 100%;
	}


	/* ========================================
	   * 個別設定 - 導入事例 -
	======================================== */

	body.example #main ol.example {
		list-style-type: none;
		margin-left: 0;
	}

	body.example #main ol.example li {
		background-color: #E9E9E9;
		margin-bottom: 26px;
		padding: 6px;
	}

	body.example #main ol.example li:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* CSS HACK: Safari */
		font-size: 0; /* CSS HACK: Firefox3 */
		visibility: hidden;
	}

	body.example #main ol.example li > div {
		float: left;
	}

	body.example #main ol.example li > div.photo {
		margin: 0 26px 0 0;
		width: 268px;
	}

	body.example #main ol.example li > div.photo img {
		display: block;
		height: auto;
		width: 100%;
	}

	body.example #main ol.example li > div.information {
		padding: 10px 0 0 0;
		width: 652px;
	}


	/* ========================================
	   * 個別設定 - 導入事例 -
	======================================== */

	body.example #main ol.example li > div.photo {
		margin-right: 2%;
		width: 40%;
	}

	body.example #main ol.example li > div.information {
		width: 58%;
	}

}


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

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

	header {
		padding-top: 26px;
	}

	header div#logo {
		float: none;
		margin-bottom: 20px;
		margin-top: 0;
		text-align: center;
		width: 100%;
	}

	header div.global {
		float: none;
		margin-top: 0;
		width: 100%;
	}

	header div.global nav ul {
		float: none;
	}

	header div.global nav.header {
		display: none;
	}


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

	nav.global {
		padding-bottom: 0;
		padding-top: 2%;
		width: 100%;
	}

	nav.global div.container ul {
		margin-left: -1%;
		margin-right: -1%;
		width: 102%;
	}

	nav.global div.container ul li {
		float: left;
		margin-bottom: 2%;
		margin-left: 1%;
		margin-right: 1%;
		width: 48%;
	}

	nav.global.fixed div.container div.logo {
		display: none;
	}


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

	#contents.fixed {
		padding-top: auto;
	}


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

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

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

	#main div.contact ul li {
		margin-bottom: 12px;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	#main table.responsive tr td input[type="text"],
		#main table.responsive tr td input[type="email"],
			#main table.responsive tr td input[type="tel"],
				#main table.responsive tr td textarea {
					box-sizing: border-box;
					width: 90%;
	}

	#main table.responsive tr td input[name="zip1"],
		#main table.responsive tr td input[name="zip2"] {
			appearance: none;
			width: auto !important;
	}


	/* ========================================
	   * 個別設定 - タッチパネル -
	======================================== */

	body.tp.parent #main div.tp {
		margin-bottom: 40px;
	}

}


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

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

	body.tp #main h3 {
		font-size: 154%;
	}

	#main a.readmore {
		float: none;
		width: 100% !important;
	}

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

	#main dl.newslist dt,
		#main dl.newslist dd {
			float: none;
			margin-bottom: 12px;
	}

	#main dl.newslist dt {
		margin-bottom: 0;
		margin-right: 0;
		padding-bottom: 0;
		padding-top: 0;
	}

	#main dl.newslist dd {
		width: 100% !important;
	}

	#main ul.anchor {
		margin-bottom: 20px;
		margin-left: 0%;
		margin-right: 0%;
		width: 100%;
	}

	#main ul.anchor li {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	#main ul.anchor li a {
		height: auto !important;
	}

	#main table.responsive tr th,
		#main table.responsive tr td {
			display: block;
			width: auto;
	}

	#main table.responsive tr th {
		padding-bottom: 0;
	}


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

	body.top #main div.title {
		margin-bottom: 30px;
	}

	body.top #main div.title h4 {
		display: block;
		margin-bottom: 12px;
	}

	body.top #topimage div#slider {
		margin-bottom: 40px;
	}

	body.top #main ul.photolist > li {
		width: 48%;
	}


	/* ========================================
	   * 個別設定 - タッチパネル -
	======================================== */

	body.tp #main {
		float: none;
		width: 100%;
	}

	body.tp #main div.title {
		background: none !important;
		min-height: inherit !important;
		padding-top: 0 !important;
		position: static !important;
	}

	body.tp #main div.title h4 {
		position: static !important;
		bottom: 0 !important;
	}

	body.tp #main ul.photolist {
		margin-left: -1%;
		margin-right: -1%;
		width: 102%;
	}

	body.tp #main ul.photolist li {
		margin-left: 1%;
		margin-right: 1%;
		width: 48%;
	}

	body.tp.category #main div.title > h4 {
		font-size: 194%;
	}

	body.tp.option #main h5 {
		margin-bottom: 20px;
	}

	body.tp.download #main h4 {
		margin-bottom: 20px;
	}

	body.tp.download #main ul.download li h5 {
		background-color: #B9B9B9;
		color: #000000;
		display: inline-block;
		font-size: 100%;
		margin-bottom: 10px;
		padding: 6px 12px 6px 12px;
	}

	body.tp.download #main ul.download li p {
		margin-bottom: 4px;
	}

	body.tp.download #main ul.button.document li {
		margin-bottom: 20px;
	}

	body.tp.download #main ul.button.document li a {
		font-size: 120%;
	}

	body.tp.option #main ul.itemlist,
		body.tp.option #main ul.itemlist li {
			margin-bottom: 40px;
	}

	body.tp.faq #main dl.faq dt {
		margin-bottom: 16px;
	}

	body.tp.faq #main dl.faq dd {
		margin-bottom: 24px;
		margin-left: 0;
		position: relative;
	}

	body.tp.faq #main dl.faq dd p {
		margin-left: 30px;
	}

	body.tp.item #main div.iteminfo div.photo {
		float: none;
		margin-bottom: 18px;
		margin-right: 0;
		width: 100%;
	}

	body.tp.item #main div.iteminfo div.photo img {
		display: block;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		width: auto;
	}

	body.tp.item #main div.iteminfo div.comment {
		float: none;
		width: 100%;
	}

	body.tp #sidebar {
		float: none;
		width: 100%;
	}


	/* ========================================
	   * 個別設定 - デジタルサイネージ -
	======================================== */

	body.ds #main ol.layout > li div.container {
		margin-bottom: 30px;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

	body.ds #main ol.layout > li div.container div.leftside,
		body.ds #main ol.layout > li div.container div.rightside {
			float: none;
			margin-left: 0;
			margin-right: 0;
			width: 100%;
	}


	/* ========================================
	   * 個別設定 - 新着情報 -
	======================================== */

	body.news #main div.title h4 span {
		float: none;
		margin-bottom: 6px;
		position: static;
	}

	body.news #main h5 {
		margin-bottom: 30px;
	}

}



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

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

	#main img.img_l,
		#main img.img_r {
			float: none;
			display: block;
			height: auto;
			margin-left: auto;
			margin-right: auto;
			max-width: 100%;
	}


	/* ========================================
	   * 個別設定 - 導入事例 -
	======================================== */

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

	body.example #main ol.example li > div.information {
		float: none;
		width: 100%;
	}


}


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

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

	nav.global div.container ul li {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}


	/* ========================================
	   * 個別設定 - アクセス -
	======================================== */

	body.access #main > div.access > div.access > div.information > ul.button li a {
		min-width: 100%;
	}

}