﻿/* セカンドメニューユニーク部分 */

/* 全体設定 */

/* 基礎部分 */
div#main {
	width: 800px;
	margin-left: 100px;
	margin-right: 100px;
	}

/* サードメニュー部分 */
div.thirdmenu { width: 100%; margin: 1em auto 1.5em; padding: 0.2em 0em 0.2em 0em; border: #ccc solid; border-width: 4px 0px 4px 0px; text-align: center;}
div.thirdmenu:after { height: 0; visibility: hidden; content: "."; display: block; clear:both; } /* 親ボックスの高さ検出用 */
div.thirdmenu a:link,
div.thirdmenu a:visited { color: #666; text-decoration: none;}
div.thirdmenu a:hover { color: #F33; text-decoration: underline;}
div.thirdmenu ul { color: #666; margin: 0em 0em 0.5em; padding: 0em 1em; white-space: nowrap; vertical-align: top; list-style-type: square;}
div.thirdmenu li { margin: 0em; padding: 0em;}
div.thirdmenu div.menulistbox { float: left; text-align: left; margin: 0em auto; padding: 0em 60px; }

/* 成分リスト共通部分 */
/* 成分リスト基本設定 */
table.skincarelist, 
table.herblist { width:776px; margin: 1em auto; text-align: center;}
table.skincarelist th, 
table.herblist th { background-color: #D0FFC0;}
table th.category { background-color: #8ea;}
table.skincarelist td, 
table.herblist td  { background-color: #F0FFE0;}
table th.item1, table th.item2 { width: 1em;}
table th.item1, table td.item1 { background-color: #C0F0B0;}
table th.item2, table td.item2 { background-color: #D0FFC0;}
table td.return, table td.return2 { background-color: #fff;}
table td.notes { background-color: #fff;}

/* 成分リストボーダー設定 */
table.skincarelist, 
table.herblist { border-collapse: collapse; border-style: solid; border-width: 0px; border-color: #396;}
table.skincarelist th, 
table.herblist th { border-collapse: collapse; border-style: solid; border-width: 1px; border-color: #396;}
table.skincarelist td, 
table.herblist td { border-collapse: collapse; border-style: solid; border-width: 1px 1px; border-color: #396;}
table th.category { border-collapse: collapse; border-top-width: 4px; border-bottom-width: 4px; border-color: #396;}
table td.return { border-collapse: collapse; border-style: solid; border-width: 1px 0px 0px 0px; border-color: #396;}
table td.return2 { border-collapse: collapse; border-style: solid; border-width: 0px 0px 0px 0px; border-color: #396;}
table td.notes { border-collapse: collapse; border-style: solid; border-width: 1px 0px 0px 0px; border-color: #396;}

/* 成分リストテキスト部分設定 */
table.skincarelist, 
table.herblist { text-align: center; color: #666;}

table.skincarelist th, 
table.herblist th { padding: 3px; font-weight: normal;}

table th.category { text-align: center; font-size: 123.1%;}
table th.category a { font-weight: bold; color: #333;}

table th.itemname { text-align: center; white-space: nowrap;}
table th.item1, table th.item2 { text-align: center; padding: 0px; }
table th.item1 div.item, table th.item2 div.item { writing-mode: tb-rl; font-size: 77%; font-family: "ＭＳ ゴシック", "Osaka－等幅", "monospace"; margin: 0em auto; padding: 0px; width: 14px; height: 145px;}
table td.item1, table td.item2 { text-align: center; font-size: x-small; padding: 0px 0px 0px 2px;}

table td.name, table td.part { padding: 0.5em 4px;}
table th.explain { padding-left: 8px;}
table td.explain { padding: 0.5em 8px; text-align: left; line-height: 130%;}
table td.return, table td.return2 { text-align: right; padding: 0.5em 1em 2em;}
div.return { text-align: right; margin: 0em 0em 1.5em; padding: 0em 1em 0em 0em; }

/* 成分リスト但し書き */
p.notes { width: 20em; text-align: left; text-indent: -1em;  padding-left: 1em; }
table td.explain2 { text-align: center; padding: 16px;}
table td.explain2 p { width: 32em; text-align: left; margin-right: auto; margin-left: auto;}
table td.notes { text-align: right; }
table td.notes p { width: 75%; text-indent: -2em;  padding-left: 2em; text-align: left; margin-right: 1em; margin-left: auto;}

/* 成分リスト種類別設定 */
/* スキンケアシリーズ */
table.skincarelist td.name { width: 20%;}
table.skincarelist td.part { width: 17%;}

/* ハービアンシリーズ */
table.herblist td.name { width: 20%;}
table.herblist td.part { width: 20%;}
table.herblist td.explain { width: 50%;}

