@charset "utf-8";

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


/* Stylesheet Document */

@media screen {

	/* ========================================
	   * 領域設定 - レイアウト -
	======================================== */

	body.tp {
	}


	/* ========================================
	   * 領域設定 - Contents -
	======================================== */
	
	/* ペータタイトル */
	body.tp #contents > h2 {
		background-color: #D5E9E9;
	}



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

	body.tp #main {
		float: right;
		width: 696px;
	}

	body.tp #main h4 {
		color: #005689;
	}

	body.tp.sekishatp #main div.title h4 {
		background: url("../../../tp/img/icon_sekishatp.png") right center no-repeat;
		background-size: auto 46px;
	}
	body.tp.twotp #main div.title h4 {
		background: url("../../../tp/img/icon_tsuba.png") right center no-repeat;
		background-size: auto 46px;
	}
	body.tp.seitp #main div.title h4 {
		/*background: url("../../../tp/img/icon_tokutp.png") right center no-repeat;*/
		background-size: auto 46px;
	}
	body.tp.sctp #main div.title h4 {
		background: url("../../../tp/img/icon_sekiimagetp.png") right center no-repeat;
		background-size: auto 46px;
	}
	body.tp.teitp #main div.title h4 {
		background: url("../../../tp/img/icon_teitp.png") right center no-repeat;
		background-size: auto 46px;
	}

	body.tp #main div.tp ul.menulist.shadow li a {
		border: none;
		max-height: 187px;
		max-width: 187px;
		padding: 0;
	}

	body.tp #main div.other ul.menulist li a.current {
		cursor: default;
	}

	body.tp.parent #main h3 {
		border-bottom: none;
		margin-bottom: 50px;
		padding-bottom: 0;
		text-align: center;
	}

	body.tp.parent #main div.tp p,
		body.tp.parent #main div.method p {
			margin: 0 0 20px 0;
	}

	body.tp.parent #main div.tp {
		margin: 0 0 174px 0;
	}

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

	body.tp.parent #main div.tp ul.menulist li {
		margin-bottom: 0;
		margin-left: 15px;
		margin-right: 15px;
		width: 202px;
	}

	body.tp.parent #main div.tp ul.menulist li h4 {
		margin-bottom: 18px;
	}

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

	body.tp.parent #main div.other {
		border-top: 1px dashed #000000;
		padding: 34px 0 0 0;
	}

	body.tp.category #main div.title {
		border-bottom: 1px dashed #000000;
		margin-bottom: 22px;
		padding-bottom: 2px;
	}

	body.tp.category #main div.title > h3 {
		border-bottom: none;
		margin-bottom: 2px;
		padding-bottom: 0;
	}

	body.tp.category #main div.title > h4 {
		font-size: 278%;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	body.tp #main div.chart ul.icon {
		list-style-type: none;
		margin-bottom: 0;
	}

	body.tp #main div.chart ul.icon li {
		display: inline-block;
		font-size: 80%;
		margin-bottom: 8px;
		margin-right: 8px;
	}

	body.tp #main div.chart ul.icon li img {
		height: 30px;
		margin-right: 4px;
		vertical-align: middle;
		width: auto;
	}
	body.tp #main div.chart table.itemlist {
		border: none;
	}

	body.tp #main div.chart table.itemlist tr th,
		body.tp #main div.chart table.itemlist tr td {
			border-bottom: none;
			border-left: none;
			font-size: 80%;
			padding-left: 6px;
			padding-right: 6px;
	}

	body.tp #main div.chart table.itemlist thead tr th {
		background-color: rgba(233,233,233,0.7);
		padding-bottom: 16px;
		padding-top: 16px;
		text-align: center;
	}
	body.tp #main div.chart table.itemlist tbody tr:first-child > td {
		padding-top: 16px;
	}
	body.tp #main div.chart table.itemlist tbody tr {
		border-bottom: 1px solid #000000;
	}

	body.tp #main div.chart table.itemlist tbody tr:hover {
		background-color: #E9E9E9;
		transition: all 0.3s ease-in-out;
	}

	body.tp #main div.chart table.itemlist tbody tr > td:first-child {
		padding-left: 0;
	}

	body.tp #main div.chart table.itemlist tbody tr td.photo > img {
		height: 44px;
		width: auto;
	}

	body.tp #main div.chart table.itemlist tbody tr td.type > img {
		height: 24px;
		width: auto;
	}

	body.tp #main div.chart table.itemlist tbody tr td {
		cursor: pointer;
		padding-bottom: 4px;
		padding-top: 4px;
	}

	body.tp #main div.chart table.itemlist tbody tr td a {
		color: #000000;
		text-decoration: none;
	}

	body.tp #main div.chart table.itemlist tbody tr td ul.icon {
		margin-bottom: 0;
	}

	body.tp #main div.chart table.itemlist tbody tr td ul.icon li {
		margin-bottom: 4px;
		margin-right: 4px;
	}

	body.tp #main div.chart table.itemlist tbody tr td ul.icon li img {
		height: 24px;
		margin-right: 0;
	}

	body.tp.item #main table.item {
		border: none;
		border-collapse: separate;
		margin-bottom: 16px;
	}

	body.tp #main table.item tr th,
		body.tp #main table.item tr td {
			border-bottom: none;
			border-left: none;
			padding-bottom: 18px;
			padding-top: 18px;
	}

	body.tp #main table.item tr th {
		background-color: #C0C0C0;
	}

	body.tp #main table.item tr td {
		background-color: #E9E9E9;
	}

	body.tp #main ul.photolist {
		margin-left: -3px;
		margin-right: -3px;
		width: 702px;
	}

	body.tp #main ul.photolist li {
		margin-left: 5px;
		margin-right: 5px;
		width: 224px;
		height: 240px;
		margin-bottom: 0px; !important
		
	}

	body.tp #main ul.photolist li a {
		border: 3px solid #000000;
		margin-bottom: 5px; !important
	}

	body.tp #main ul.feature {
		list-style-type: none;
		margin-bottom: 150px;
		margin-left: 16px;
	}

	body.tp #main ul.feature li {
		background: url("../../img/icon_tp.png") left center no-repeat;
		background-size: auto 30px;
		font-size: 154%;
		margin-bottom: 44px;
		padding-left: 52px;
	}

	body.tp #main div.tp.other ul.menulist {
		margin-bottom: 60px;
	}

	/* 2015.9.3 minato追加 */
	body.tp #main .sys_name h3 {
		height: 30px;
		color: #006699;
		border-bottom: 1px dashed #000000;
		margin-bottom: 15px;
	}
	body.tp #main .sys_name .seitp_icon1 { background: url("../../../tp/img/icon_tokutp.png") right top no-repeat; background-size: auto 46px; }
	body.tp #main .sys_name .seitp_icon2 { background: url("../../../tp/img/icon_scaptp.png") right top no-repeat; background-size: auto 46px; }
	body.tp #main .sys_name .seitp_icon3 { background: url("../../../tp/img/icon_pcaptp.png") right top no-repeat; background-size: auto 46px; }

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

	body.tp #sidebar {
		float: left;
		margin: 0 50px 0 0;
		width: 234px;
	}
	

	/* ========================================
	   * 個別設定 - シーンから -
	======================================== */


	body.tp.scene #main div.title h4 {
		font-size: 210%;
	}

	
	/* ========================================
	   * 個別設定 - サイズから -
	======================================== */

	body.tp.kogata #main div.title {
		background: url("../../../tp/size/img/bg_kogata.png") right top no-repeat;
		box-sizing: border-box;
		min-height: 115px;
		padding-bottom: 4px;
		padding-top: 10px;
		position: relative;
	}
	
	body.tp.chugata #main div.title {
		background: url("../../../tp/size/img/bg_chugata.png") right top no-repeat;
		box-sizing: border-box;
		min-height: 115px;
		padding-bottom: 4px;
		padding-top: 10px;
		position: relative;
	}
	
	body.tp.ogata #main div.title {
		background: url("../../../tp/size/img/bg_oogata.png") right top no-repeat;
		box-sizing: border-box;
		min-height: 115px;
		padding-bottom: 4px;
		padding-top: 10px;
		position: relative;
	}
	
	body.tp.tokudai #main div.title {
		background: url("../../../tp/size/img/bg_tokudai.png") right top no-repeat;
		box-sizing: border-box;
		min-height: 115px;
		padding-bottom: 4px;
		padding-top: 10px;
		position: relative;
	}
	
	body.tp.kogata #main div.title h4,
	body.tp.chugata #main div.title h4,
	body.tp.ogata #main div.title h4,
	body.tp.tokudai #main div.title h4,{
		position: absolute;
		bottom: 4px;
	}


	/* ========================================
	   * 個別設定 - 商品仕様 -
	======================================== */

	body.tp.item #main div.paragraph {
		font-size: 80%;
	}
	
	body.tp.item #main div.title h4 {
		color: #000000;
	}

	body.tp.item #main div.title a.back {
		background: url("../../img/icon_arrow_back.png") 8px center no-repeat;
		border: 2px solid #005689;
		color: #005689;
		display: block;
		font-size: 50%;
		float: right;
		padding: 4px 8px 4px 28px;
		text-decoration: none;
	}

	body.tp.item #main div.title a.back:hover {
		background-color: #CCDCE6;
		transition: all 0.3s ease-in-out;
	}

	body.tp.item #main div.iteminfo {
		margin: 0 0 18px 0;
	}

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

	body.tp.item #main div.iteminfo div.photo {
		float: left;
		margin: 0 10px 0 0;
		width: 306px;
	}

	body.tp.item #main div.iteminfo div.photo img {
		height: auto;
		width: 100%;
	}

	body.tp.item #main div.iteminfo div.comment {
		float: left;
		font-size: 80%;
		width: 380px;
	}

	body.tp.item #main div.iteminfo div.comment ul {
		list-style-type: none;
		margin-bottom: 0;
		margin-left: 0;
	}

	body.tp.item #main div.iteminfo div.comment ul li.type {
		margin-bottom: 16px;
	}

	body.tp.item #main div.iteminfo div.comment ul li.type img {
		height: 46px;
		margin: 0 6px 0 0;
		vertical-align: middle;
		width: auto;
	}

	body.tp.item #main div.iteminfo div.comment ul li ul.icon li {
		display: inline-block;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	body.tp.item #main div.iteminfo div.comment ul li ul.icon li:first-child {
		display: block;
		margin-bottom: 16px;
	}

	body.tp.item #main div.iteminfo div.comment ul li ul.icon li img {
		height: 24px;
		margin: 0 6px 0 0;
		vertical-align: middle;
		width: auto;
	}

	body.tp.item #main h5 {
		color: #000000;
		font-weight: normal;
		font-size: 100%;
		margin-bottom: 0;
		padding-bottom: 12px;
	}

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


	/* ========================================
	   * 個別設定 - 各方式について知る -
	======================================== */

	body.tp.type #main table.chart {
		border-bottom-color: #D0D0D1;
		margin-bottom: 10px;
	}

	body.tp.type #main table.chart tr th,
		body.tp.type #main table.chart tr td {
			border-bottom-color: #D0D0D1;
			border-left-color: #D0D0D1;
			font-size: 80%;
			padding-left: 4px;
			padding-right: 4px;
	}

	body.tp.type #main table.chart tr th,
		body.tp.type #main table.chart thead tr td {
			background-color: #FFFFFF;
	}

	body.tp.type #main table.chart tr th {
		width: 14% !important;
	}

	body.tp.type #main table.chart tr td {
		background-color: #E9E9E9;
		text-align: center;
	}

	body.tp.type #main table.chart thead tr td {
		vertical-align: top;
	}

	body.tp.type #main table.chart thead tr td img {
		height: 42px;
		width: auto;
	}

	body.tp.type #main table.chart tbody tr.txt_l td {
		text-align: left;
	}
	table.chart tr td { vertical-align: top; }


	/* ========================================
	   * 個別設定 - オプション一覧 -
	======================================== */

	body.tp.option #main h3 {
		border-bottom: none;
		margin-bottom: 20px;
		padding-bottom: 0;
	}

	body.tp.option #main h5 {
		border-bottom: none;
		color: #005689;
		font-size: 126%;
		margin-bottom: 30px;
	}

	body.tp.option #main h5.line {
		border-top: 1px solid #000000;
		padding-top: 20px;
	}

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

	body.tp.option #main ul.itemlist {
		list-style-type: none;
		margin-left: -4%;
		margin-right: -4%;
		width: 108%;
	}

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

	body.tp.option #main ul.itemlist li {
		float: left;
		margin-bottom: 60px;
		margin-left: 4%;
		margin-right: 4%;
		width: 42%;
	}

	body.tp.option #main ul.itemlist li div.photo {
		margin: 0 0 30px 0;
		text-align: center;
	}

	body.tp.option #main ul.itemlist li div.photo img {
		height: auto;
		vertical-align: bottom;
		max-width: 100%;
	}


	/* ========================================
	   * 個別設定 - よくあるご質問 -
	======================================== */

	body.tp.faq #main h4 {
		color: #000000;
	}

	body.tp.faq #main dl.faq dt {
		color: #1D80B8;
		font-size: 140%;
		margin-bottom: 28px;
	}

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

	body.tp.faq #main dl.faq dd > span {
		font-family: notosans_medium;
		font-size: 140%;
		left: 0;
		position: absolute;
		top: 0;
	}

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


	/* ========================================
	   * 個別設定 - ダウンロード -
	======================================== */

	body.tp.download #main h3 {
		border-bottom: none;
		margin-bottom: 20px;
		padding-bottom: 0;
	}

	body.tp.download #main h4 {
		color: #000000;
		margin-bottom: 38px;
	}

	body.tp.download #main h5 {
		border-bottom: none;
		clear: both;
		color: #005689;
		font-size: 98%;
		margin-bottom: 20px;
	}

	body.tp.download #main ul.download {
		list-style-type: none;
		margin-left: -1%;
		margin-right: -1%;
		width: 102%;
	}

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

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

	body.tp.download #main ul.download > li ul.button li a.blue {
		box-sizing: border-box;
		width: 80% !important;
	}

	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 #main ol.example {
		list-style-type: none;
		margin-left: 0;
	}

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

	body.tp #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.tp #main ol.example li > div {
		float: left;
	}

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

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

	body.tp #main ol.example li > div.information {
		padding: 0 0 0 0;
		/*width: 652px;*/
		width: 370px;
	}

	body.tp #main ol.example li > div.information h5 {
		box-sizing: border-box;
		float: left;
		font-size: 14px;
		margin-bottom: 10px;
		padding-right: 116px;
		position: relative;
		width: 100%;
	}

	body.tp #main ol.example li > div.information h5 ul.icon {
		display: block;
		margin-bottom: 0;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	body.tp #main ol.example li > div.information h5 ul.icon li,
		body.tp #main ol.example li > div.information h5 ul.icon li img {
			margin-left: 0;
			margin-right: 0;
	}

	body.tp #main ol.example li > div.information h5 ul.icon li {
		margin-bottom: 0;
		margin-left: 6px;
		padding: 0;
	}

	body.tp #main ol.example li > div.information h5 ul.icon li.dnone {
		display: none;
	}

	body.tp #main ol.example li > div.information h5 ul.icon.news li.tp img {
		height: 28px;
	}

	body.tp #main ol.example li > div.information h5 ul.icon.news li.ds img {
		height: 26px;
	}

	body.tp #main ol.example li > div.information h5  ul.icon.news li.ps img {
		height: 32px;
	}

	body.tp #main ol.example li > div.information table {
		border: none;
		margin-bottom: 10px;
	}

	body.tp #main ol.example li > div.information table tr th,
		body.tp #main ol.example li > div.information table tr td {
			border-bottom: none;
			border-left: none;
			padding: 0;
	}

	body.tp #main ol.example li > div.information table tr th {
		background-color: inherit;
		/*width: 16%;*/
	}

	body.tp #main ol.example li > div.information p {
		border-top: 1px dashed #000000;
		font-size: 80%;
		margin-bottom: 5px;
		padding-top: 10px;
	}

	body.tp #main ol.example li > div.information p + p {
		border-top: none;
		padding-top: 0;
	}

	body.tp .zy_cap{
		font-size: 70%;
	}	
}