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

body{
	color:#333;
	font-size:14px;
	line-height:150%;
	font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
}

/*見出し*/

h1 {
	color:#666;
	padding-top:12px;
	padding-bottom:8px;
	margin:0;
	font-family: ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
}

h2 {

	background-repeat:no-repeat;
	background-color:#ecdac2;
	font-size:20px;
	color:#300;
	padding:5px 0 5px 10px;
	margin:0 0 20px;
		font-family: ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
}

h3 {

	background-repeat:no-repeat;
	background-position:0 50%;
	font-size:18px;
	color:#a67815;
	padding:0 0 0 23px;
	margin-bottom:18px;
	border-bottom:1px solid #a67815;
		font-family: ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
}

h4 {
	margin:0 0 15px;
	color:#690;
	font-size:16px;
		font-family: ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif;
}


/*段落*/
p {
	padding-bottom:15px;
	margin:0;
}




/*リスト*/
ul {
	list-style:none;
	margin:0 0 10px;
	padding:0;
}

ul li {
	display:inline;
	margin:0;
}

ol {
	margin:0 0 15px 20px;
	padding:0;
}


/*テーブル*/

/*スタンダード*/
table.Legiartable {

	border:1px solid #ccc;
	border-collapse:collapse;
	margin:auto;
	width: 638px;

}
.Legiartable td {
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;

}
.Legiartable th{
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
    padding:10px;
	text-align:left;
	background-color:#F1F1F1;
	color:#657C31;
}

table.smallfonttable {
	border:1px solid #ccc;
	border-collapse:collapse;
	margin:auto;
	width: 640px;
	font-size:12px;

}

.smallfonttable th{
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
		padding:5px 0px 0px 0px;
	text-align:center;
	background-color:#F1F1F1;
	color:#657C31;

}


.smallfonttable td {
	text-align:center;
}



table.clear_table { border: 0px ; }


/*横線のみ*/
table.Legiartable_in {
	border:1px solid #ccc;
	border-collapse:collapse;
	margin:auto;
}
.Legiartable_in td {
	border-bottom:1px solid #ccc;
}


/*アドレス*/
address {
	padding:20px 20px 13px;
	background-color:#F8F1E7;
	font-style:normal;
	text-align:center;
	font-size:12px;
	margin: 0px;
}


/*強調*/
/* ★変更：赤字ではなく「黒の太字」にする（価格や重要箇所が読みやすくなる） */
strong {
	color:#000;
	font-weight:bold;
}

/*リンク*/
a:link {
	color:#3399FF;
	/*
	text-decoration:underline
	*/
}
a:visited {
	color:#393;
}
a:hover {
	color:#F60;
}
img {
	border:0;
}




/*ボックス*/
#wrap {
	width:640px;
	margin:0 auto;
	background-image:url(../images/bk.gif);
	background-repeat:no-repeat;
	background-position:right top;
}

#infobox {
	height: 5em;
	overflow: auto;
	border-top: 1px #CCCCCC solid;
	width: 38em;
	padding-top: 1em;
	padding-left: 1em;
	font-size: 12px;
}

.info_string {
	font-size: 12px;
font-weight: bolder;
}

.menubox {
	margin:0 15px 30px 15px;
	border-bottom:3px dotted #666;
	padding-bottom:20px;
}

.photobox {
	margin:5px 15px 15px 10px;
}



/*クラス*/

.photo {
	float:left;
}


.photo_Right {
	float: right;
	padding: 1px 15px 1px 1px;
}


.memo {
	clear:left;
}

.line_wide {
	line-height:230%;
}

.strong_string {
	color:#03C;
}

.strong_string_red {
	color: #C00;
	font-weight: bold;
}

.strong_string_black {
	color: #000;
	font-weight: bold;
}


/* ★変更：薄いグレー(#999)を濃くして視認性改善 */
.gray_wide{
	line-height:280%;
	color:#666;   /* #666 でまだ薄ければ #555 にしてOK */
}

.photo_Left {
	padding:5px 15px 15px 0px;
}

/* 注意書き用：gray_wide は行間が広いので、注意文は別クラスにする */
.note {
	color:#666;
	line-height:150%;
}

/* =========================================================
   追加：アピール用の囲み／ボタン風リンク（紹介ページ・購入ページで共通利用）
   既存デザインを壊さず、必要なページでだけ使えるようにしています
   ========================================================= */

/* アピールポイントを目立たせる囲み */
.feature_box {
	border: 1px solid #ccc;
	background-color: #F1F1F1;
	padding: 10px;
	margin: 0 0 15px 0;
	line-height: 160%;
	color: #333;
}

/* ボタン風リンク（購入リンクなど） */
a.cta_button:link,
a.cta_button:visited {
	display: block;
	text-align: center;
	padding: 10px;
	margin: 5px 0;
	background-color: #ecdac2;
	border: 1px solid #a67815;
	color: #300;
	font-weight: bold;
	text-decoration: none;
}

/* hover は既存の a:hover（#F60）を活かしつつ、下線を出さない */
a.cta_button:hover {
	text-decoration: none;
}

/* =========================================================
   箇条書き（"・"）の折り返し揃え（吊り下げインデント）
   - 既存CSSで ul li が inline になっているため、
     class="dot_list" のときだけ「縦並び」に上書きします
   ========================================================= */

p.list_title {
    /* 「●主な機能（計算・出力）」など、リスト見出し用 */
    margin: 0 0 6px 0;
    padding-bottom: 0;
    font-weight: bold;
    color: #000;
}

ul.dot_list {
    list-style: none;      /* ブラウザ標準の黒丸を消す */
    margin: 0 0 15px 0;
    padding: 0;
}

ul.dot_list li {
    display: block;        /* ★既存の ul li {display:inline;} を上書き */
    position: relative;
    margin: 0 0 6px 0;
    padding-left: 1.4em;   /* 「・」の分だけ左に余白 */
    line-height: 160%;
    color: #333;
}

/* 「・」をCSSで付けるので、本文の折り返しが必ず揃います */
ul.dot_list li:before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
}

/* =========================================================
   Legiartable 内の「説明セル」だけ余白を詰める（デモ説明用）
   - dot_list は通常は下に余白(15px)を持たせているが、
     テーブル内では余白が過剰になりやすいのでここで上書き
   ========================================================= */

table.Legiartable td.cell_compact {
    vertical-align: top;     /* 念のため上寄せ固定 */
}

/* テーブル内の文章は p の padding-bottom(15px) が効くと間延びするため抑止 */
table.Legiartable td.cell_compact p {
    margin: 0;
    padding-bottom: 0;
}

/* 冒頭文：下に少しだけ余白 */
table.Legiartable td.cell_compact p.cell_demo_intro {
    margin: 0 0 6px 0;
}

/* 見出し：上下を詰める（list_title はページ本文では余白があってOKだが、テーブル内では詰める） */
table.Legiartable td.cell_compact p.list_title {
    margin: 6px 0 4px 0;
}

/* dot_list の下余白をテーブル内では無くす */
table.Legiartable td.cell_compact ul.dot_list {
    margin: 0;
}

/* 行間も気持ち詰める（お好みで） */
table.Legiartable td.cell_compact ul.dot_list li {
    margin: 0 0 4px 0;
}