@charset "utf-8";
/* CSS Document */

#contents {
	width: 560px;
	padding: 0;
	background: url(../images/line.jpg) repeat-y;
	background-position: left;
	float: right;
}

.c-contents {
	width: 555px;
}

.c-contents h2 {
	width: 555px;
	height: 30px;
	margin: 0 0 15px 0;
	background: url(../images/h2.jpg) repeat-x;
	font-size: 130%;
	color: #24019E;
	letter-spacing: 0.1em;
	line-height: 200%;
	text-indent: 15px;
}

.c-contents h3 {
	height: 30px;
	margin: 0 0 10px 0;
	background: url(../images/h3.jpg) repeat-x;
	background-position: left bottom;
	font-size: 120%;
	color: #5300A6;
	line-height: 180%;
	text-indent: 10px;
}

.c-contents h3 a {
	text-decoration: underline;
}

.c-contents h4 {
	margin: 0 0 10px 0;
	border-left: 8px solid #0000A0;
	font-size: 100%;
	color:#003399;
	line-height: 215%;
	text-indent: 8px;
	font-weight: bold;
}

.c-contents p {
	margin: 0 0 15px 0;
}

.c-contents ul {
	margin: 0 0 10px 20px;
	
}

.c-contents ul li {
	margin: 5px 0 5px 0;
	padding: 0 0 0 20px;
	background: url(../images/li.jpg) no-repeat;
	background-position: left 5px;
}

/* 商品カテゴリーレイアウト */
* html body table.item-layout {
	width: 174px;
	margin: 0 4px 0 4px;
	padding: 0;
	display:block;
	float: left;
}

* html body table.item-layout td img {
	width: 172px !important;
	height: 135px !important;
	border: 1px solid #cccccc;
}
* html body table.item-layout th img {
	width: 172px !important;
}

.item-layout {
	width: 174px;
	margin: 0 4px 10px 4px;
	padding: 0;
	display:block;
	float: left;
}

.item-layout td img {
	width: 172px !important;
	height: 135px !important;
	border: 1px solid #cccccc;
}

.item-layout td p {
	margin: 0;
	padding: 0;
}

.item-layout th img {
	width: 172px !important;
}

.item-layout td.tr-title {
	height: 45px !important;
	text-align: center;
}

.top-office-frame {
	width: 552px;
	margin: 0;
	padding: 0;
	border: 1px solid #cccccc;
}

/* 商品詳細レイアウト */
.item-main {
	margin: 0 0 10px 0;
}
.item-main img {
	width: 735px;
	height: auto !important;
}

.item-layout01 {
	width: 735px;
	margin: 5px 0 10px 0;
}

.item-layout01l {
	width: 525px;
	display:block;
	float: left;
}

.item-layout01r {
	width: 200px;
	display:block;
	float: right;
}
.item-layout01r img {
	width: 195px;
	height: auto !important;
	border: 1px solid #cccccc;
}

.item-layout02 {
	width: 735px;
	margin: 5px 0 10px 0;
}

.item-layout02l {
	width: 525px;
	display:block;
	float: right;
}

.item-layout02r {
	width: 200px;
	display:block;
	float: left;
}
.item-layout02r img {
	width: 195px;
	height: auto !important;
	border: 1px solid #cccccc;
}

.item-layout03 {
	width: 735px;
	margin: 10px 0 10px 0;
}

.item-layout03l {
	width: 525px;
	display:block;
	float: left;
}

.item-layout03l table {
	width: 100%;
	background-color: #BBBBFF;
	color: #333333;
}

.item-layout03l table th {
	margin: 1px;
	padding: 5px;
	background-color: #CECEFF;
}

.item-layout03l table td {
	margin: 1px;
	padding: 5px;
	background-color: #ffffff;
	color: #333333;
	text-align: center;
}

.item-layout03r {
	width: 200px;
	display:block;
	float: right;
}
.item-layout03r img {
	width: 195px;
	height: auto !important;
	border: 1px solid #cccccc;
}


/* お問合せフォーム
--------------------------------------------------- */
#contact-form {
	width: 530px;										/* ★全体の横幅変更 */
	margin: 0 8px 0 8px;
	padding: 5px 5px 5px 5px;
	background: url(../images/contact-back.jpg) repeat-x;
	background-position: center bottom;
	border: 1px solid #CEFFFF;
}

/* 必須事項マーカー
--------------------------------------------------- */
#contact-form span.red {
	color: #ff0000;
}

#contact-form dl {
	clear: both;
	margin: 0;
}

/* 項目枠
--------------------------------------------------------- */
#contact-form dl dt {
	width: 100px;
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	font-size: 80%;			/* ★項目の文字サイズ変更 */
}

/* 入力枠
--------------------------------------------------------- */
#contact-form dl dd {
	width: 350px;
	margin: 0 0 5px 0;
	padding: 0;
	display: block;
	float: right;
	text-align: left;
}

/* ドロップダウンリストスタイル
--------------------------------------------------------- */
#contact-form dl dd label select {
	border: 1px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	color: #333333;
}

#contact-form dl dd select:hover {
	border: 1px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	background-color: #EEF7FF;
}

/* 一行テキスト欄スタイル
--------------------------------------------------------- */
#contact-form dl dd input {
	border: 1px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	color: #333333;
}

#contact-form dl dd input:hover {
	border: 1px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	background-color: #EEF7FF;
}

/* テキストエリアスタイル
--------------------------------------------------------- */
#contact-form dl dd textarea {
	border: 1px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

#contact-form dl dd textarea:hover {
	border: 1px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	background-color: #EEF7FF;
}

/* 区切り線スタイル
--------------------------------------------------------- */
#contact-form hr {
	clear:both;
	height: 1px;
	margin: 0 0 10px 0;
	padding: 0;
	border-width: 1px 0px 0px 0px;
	border-color: #ccc;
	color: #ccc;
}

/* 確認ボタンスタイル
--------------------------------------------------------- */
.submit {
	width: 450px;
	margin: 0 auto;
	display:block;
	text-align: center;
}

.submit input {
	width: 160px;
	height: 30px;
	margin: 0 auto;
	padding: 0;
	border: none;
	background: url(../images/gotobutton.jpg) no-repeat;
	display: block;
	text-indent: -99999px;
	cursor: pointer;
}

/* 入力モード自動切り替え
--------------------------------------------------------- */
.form-active {
	ime-mode: active;
}

.form-inactive {
	ime-mode: inactive;
}


/* 会社沿革
---------------------------------------------------------- */
.profile-layout th {
	width: 110px !important;
}

.profile-layout td {
	width: 500px
}

/* 料金シミュレーター
---------------------------------------------------------- */
.calc-layout h3 {
	background: none;
	text-indent: 0;
}

.calc-01 {
	margin: 0 0 20px 0;
	padding: 5px;
}

.calc-01middle {
	padding: 0 5px 0 5px;
	background: url(../images/calc-back-middle-step1.jpg) no-repeat;
}

.calc-02a {
	width: 260px;
	height: 230px;
	background: url(../images/calc-contents-step2-01.jpg) no-repeat;
	margin: 0 0 20px 0;
	padding: 5px;
	display:block;
	float: left;
}

.calc-02a h4 {
	border: none;
	text-indent: -99999px;
}

.calc-02b {
	width: 260px;
	height: 230px;
	background: url(../images/calc-contents-step2-02.jpg) no-repeat;
	margin: 0 0 20px 0;
	padding: 5px;
}

.calc-02b h4 {
	border: none;
	text-indent: -99999px;
}

.calc-02c {
	width: 260px;
	height: 230px;
	background: url(../images/calc-contents-step2-03.jpg) no-repeat;
	margin: 0 0 20px 0;
	padding: 5px;
	display:block;
	float: left;
}

.calc-02c h4 {
	border: none;
	text-indent: -99999px;
}

.calc-02d {
	width: 260px;
	height: 230px;
	background: url(../images/calc-contents-step2-04.jpg) no-repeat;
	margin: 0 0 20px 0;
	padding: 5px;
}

.calc-02d h4 {
	border: none;
	text-indent: -99999px;
}

.calc-total input {
	border: 1px solid #cccccc;
}

.calc-total-button {
	width: 67px;
	height: 26px;
	margin: 0;
	padding: 0;
	background: url(../images/calc-total-reset.jpg) no-repeat;
	border: none !important;
	cursor: pointer;
}