@charset "utf-8";

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

/**
 * Reset
 */
 
#oct ul,
#oct li,
#oct p,
#oct img,
#oct td {
	margin: 0;
	padding: 0;
}


#oct table {
	border-collapse: separate;
	border-spacing: 0;
	border: none;
}

#oct td {
	border: none;
}

#oct img {
	border: 0;
}

#oct li {
	list-style: none;
}

#oct p {
	font-size: 100%;
	font-weight: normal;
}


/*Fonts*/

/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
#oct {
	font:13px/1.5 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	/* for IE6/7 */
	*font-size: small; 
	/* for IE Quirks Mode */
	*font: x-small;
	line-break: strict;
	color: #666;
}

/**
 * To help tables remember to inherit
 */
#oct table {
	font-size: inherit;
	font: 100%;
}

#oct-box-top {
	margin: 10px 0 0 0;
	padding: 0;
	width: 542px;
	height: 485px;
	background-image: url(../../img/life-oct/oct-top-title-background.jpg);
	background-repeat: no-repeat;
	background-position: center 270px;
}

#oct-box-top-button {
	padding-left: 6px;
	height: 106px;
}

.oct-box {
	margin: 30px 0 0 0;
	padding: 0;
	width: 542px;
}

.oct-box-character-top {
	margin: 0;
	padding: 162px 0 0 0;
	width: 542px;
	background-image: url(../../img/life-oct/oct-top-character-img.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

.oct-box-character-top-box {
	margin: 15px 15px 0 15px;
	padding: 0;
	width: 512px;
	background-image: url(../../img/life-oct/oct-top-character-moisten-bg.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#oct .oct-box-character-top-box p {
	margin-top: 15px;
}

#oct .oct-box-character-top-box p img {
	margin-bottom: 5px;
}

.oct-box-character {
	margin: 30px 0 0 0;
	padding: 0;
	width: 542px;
}

.oct-box-character-box {
	margin: 15px 15px 0 15px;
	padding: 0;
	width: 512px;
}

.oct-pink {
	color:#FD5E63
}

.oct-blue {
	color:#264692
}

#oct-box-deverop1 {
	margin: 0 auto;
	padding: 0 0 0 171px;
	width: 341px;
	background-image: url(../../img/life-oct/oct-top-develop-photo1.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

#oct-box-deverop2 {
	margin: 20px auto 0 auto;
	padding: 0 171px 0 0;
	width: 341px;
	background-image: url(../../img/life-oct/oct-top-develop-photo2.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

#oct-box-deverop3 {
	margin: 20px auto 0 auto;
	padding: 0;
	width: 512px;
}

#oct-box-deverop3-box1 {
	margin: 0 0 10px 0;
	padding: 0 329px 0 0;
	width: 183px;
	background-image: url(../../img/life-oct/oct-top-develop-photo3.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

#oct-box-deverop1 img,
#oct-box-deverop2 img,
#oct-box-deverop3 img {
	margin-bottom: 10px;
}

.oct-title-image {
	margin: 0;
	padding: 0;
}

#oct table.oct-item {
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 10px;
	border-top: solid 1px #dddcd4;
	border-right: solid 1px #dddcd4;
	border-left: solid 1px #dddcd4;
	border-bottom: solid 1px #dddcd4;
	width: 542px;
	background-color: #f3f3e9;
}

#oct table.oct-item td {
	padding: 20px 10px;
	border-top: solid 1px #dddcd4;
	border-right: solid 1px #dddcd4;
	border-left: solid 1px #dddcd4;
	border-bottom: solid 1px #dddcd4;
	background-color: #fff;
}

.oct-closing-left {
	float: left;
}

.oct-closing-right {
	margin: 0;
	padding: 0;
	float: right;
	width: 325px;
}

.oct-closing-right img {
	margin-left: 13px;
}

#oct .oct-closing-right ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#oct .oct-closing-right ul li.oct-name {
	margin: 0;
	padding: 0 0 10px 0;
	border-bottom: dotted 1px #dddcd4;
	font-size: 108%;
	font-weight: bold;
	color: #263992;
}

#oct .oct-closing-right ul li.oct-txt {
	margin: 0;
	padding: 10px 0;
	border-bottom: dotted 1px #dddcd4;
	font-size: 100%;
}

#oct .oct-closing-right ul li.oct-txt span {
	color: #FD5E63;
}

#oct .oct-closing-right ul li.oct-price {
	margin: 0;
	padding: 10px 0 0 0;
	font-size: 108%;
	font-weight: bold;
	color: #ff0000;
}

#oct .oct-closing-right ul li.oct-caution {
	margin: 0;
	padding: 0 0 10px 0;
	font-size: 77%;
}

#oct .oct-closing-right ul li.oct-set {
	margin: 0;
	padding: 10px 0;
	border-bottom: dotted 1px #dddcd4;
	font-size: 77%;
}

#oct .oct-closing-right ul li.oct-set span {
	font-weight: bold;
	color: #263992;
}

#oct-closing-banner {
	margin: 20px auto;
	width: 499px;
}

#oct-box-voice {
	margin: 10px 0 0 0;
	padding: 0;
	width: 542px;
}

#oct-box-check {
	margin: 15px auto;
	padding: 0;
	width: 510px;
	background-image: url(../../img/life-oct/oct-voice-check-background.gif);
	background-repeat: repeat-y;
}

.oct-box-check-question {
	margin: 0 auto;
	padding: 10px 0;
	width: 490px;
	border-top: dotted 1px #ccc;
}

#oct .oct-box-check-question p {
	margin: 0;
	padding: 0 10px;
	width: 345px;
	float: left;
}

.oct-box-check-question p span {
	font-size: 77%;
	font-weight: bold;
	color: #fd5e65;
}

.oct-box-check-graph {
	float: left;
}

#oct-box-date {
	margin: 0 auto;
	padding: 0;
	width: 390px;
	background-image: url(../../img/life-oct/oct-voice-date-background.gif);
	background-repeat: repeat-y;
}

#oct #oct-box-date p {
	padding: 0 30px;
}

#oct-voice-button {
	margin: 0 auto 8px auto;
	width: 300px;
}

#oct-voice-shampoo,
#oct-voice-conditioner {
	margin: 0;
	padding: 0;
	width: 542px;
}

#oct-voice-skin {
	margin: 12px 0 0 0;
	padding: 0;
	width: 542px;
}

.oct-voice-item-box {
	margin: 0 auto 10px auto;
	padding: 0;
	width: 522px;
}

.oct-voice-item-box img {
	float: left;
}

.oct-voice-item-box p {
	margin: 0;
	padding: 0;
	width: 433px;
	float: left;
}

#oct .oct-voice-item-box p.shampoo-txt {
	padding: 0 0 5px 0;
	font-weight: bold;
	color: #009fdc;
}

#oct .oct-voice-item-box p.skin-txt {
	padding: 0 0 5px 0;
	font-weight: bold;
	color: #6aab39;
}

#oct .oct-voice-item-box p.conditioner-txt {
	padding: 0 0 5px 0;
	font-weight: bold;
	color: #fd5e65;
}