@charset "UTF-8";
@import url("./cmn.css");

/*
このCSSでは、基本的に表示上のレイアウトだけを指定すること
2007.05.21 花王ヘッダ変更に伴い、このCSSは花王専用となりました。
*/
hr
{
	display: none;
}

/* 共通ヘッダ */
#top
{
	margin: 0px;
	padding: 0px;
	height: 76px;	/*61⇒72へ変更*/
	/*border-bottom: solid 1px #dcdcdc;		2009/10/29コメント*/
}

#HEADER
{
	margin: 0px;
	padding: 0px;
	width: 965px;
}

#HEADER h1, #HEADER h2, #HEADER li
{
	margin: 0px;
	padding: 0px;
	display:inline;
	float: left;
}

#HEADER h1	/*2009/10/29 追加*/
{
	padding-left: 15px;
}

#HEADER h2
{
	/*width: 462px;  2009/10/29コメント*/
	/*2009/10/29追加*/
	width: 352px;	
	padding-top: 22px;
	font-weight: normal;
	/*2009/10/29追加end*/
}

#HEADER ul
{
	display:inline;
	list-style: none;
	/* IF8の時、header004のズレが生じるのを防ぐ為にpadding-leftを設定する  2009.03.30 okube */
	padding-left:0em;
}

/*#HEADER #header001   /2009/10/29コメント/
{
	width: 72px;
}

#HEADER #header002
{
	width: 74px;
}

#HEADER #header003
{
	width: 67px;
}

/* 何故かheader004が抜けていたので追加  2009.03.30 okube 
#HEADER #header004
{
	width: 70px;
}


#HEADER ul li
{
	padding-top: 21px;
}
/* ここまで共通ヘッダ */

/*2009/10/05 追加*/
#HEADER #header001pic
{
	width: 9px;	/*72px;*/
}

#HEADER #header001	/*会社情報*/
{
	width: 60px; /*74px;*/
}

#HEADER #header002pic
{
	width: 9px; /*74px;*/
}

#HEADER #header002	/*製品情報*/
{
	width: 84px; /*74px;*/
}

#HEADER #header003	/*製品Ｑ＆Ａ*/
{
	width: 64px; /*67px;*/
}

#HEADER #header004pic
{
	width: 11px; 
}

#HEADER #header004	/*お問い合わせ*/
{
	width: 84px; 
}

#HEADER #header005pic
{
	width: 15px; 
}

#HEADER ul li
{
	padding-top: 13px;	/*21px*/
}
/* ここまで共通ヘッダ */

/* アンケートの本体が入っている */
#enquetebody
{
	clear :both;
	width: 740px;
}

/* 画像によって埋められる 都合、こいつは #enquetebody #enquetetitle と同義 */
#enquetetitle, #enqueteimage
{
	margin: 0px;
	padding: 0px;
	font-size: 9pt;
	text-indent: -1000px;
	width: 740px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

#enquetetitle
{
	height: 45px;
}

#enqueteimage
{
	height: 185px;
}

/* ここが入力のための本体。都合、これは#enquetebody #MAIN と同義 */
#MAIN
{
	margin: 0px;
	padding: 0px;
	margin-left: 70px;
	width : 600px;
}

/* 入力を促すためのメッセージが入る部分。都合、これは #MAIN #enquetemessage と同義 */
#enquetemessage
{
	margin: 1em 0em;
}

/* 個人に対する質問のセクション */
#KOJIN
{
	border-bottom: dashed 1px #7f7f7f;
}

/* 質問の１つの固まり */
#KOJIN .inputsection, #KOJIN .confirmationsection
{
	padding: 0em;
	position: relative;
	border-top: dashed 1px #7f7f7f;
	overflow : hidden;
}

/* タイトルになるところ */
#KOJIN h4
{
	position: absolute;
	top : 0px;
	left: 0px;
	font-weight: normal;
	margin: 0px;
	padding: 0.6em 0em 0em 0em;
	width: 30%;
}

#KOJIN_Email h4
{
	padding: 0.4em 0em 0em 0em;
}

/* IEのばかちんがfont-sizeがおかしいので \*/
* html #KOJIN h4
{
	font-size: 1em;
}
/* */

/* 上書きしておかないと */
#KOJIN h4, #KOJIN h4 label
{
	color : #006699;
}

/* 質問の入力されるところ */
#KOJIN .inputfield, #KOJIN .confirmationfield
{
	margin-left: 30%;
	padding: 0.5em 0em;
	list-style: none;
}

/* これはちょっと特殊なので */
#KOJIN #KOJIN_Email .inputfield
{
	padding: 0.5em 0em 0.8em 0em;
}

/* checkboxとradioはlistでマークアップする */
#KOJIN .inputfield ul
{
	margin: 0em;
	padding: 0em;
}

#KOJIN .inputfield li
{
	display: inline;
	margin: 0em 1em 0em 0em;
	padding: 0em;
}

/* 設問はKOJINとほとんど同じ */
#QUESTION .inputsection, #QUESTION .confirmationsection
{
	margin: 3em 0em;
}

#QUESTION h4
{
	margin: 0px;
	font-weight: normal;
	line-height: 1.4em;
	padding: 7px;
	background: #efefef;
}

/* 上書きしておかないと */
#QUESTION h4, #QUESTION h4 label
{
	color: #000;
}

/* IEのばかちんがfont-sizeがおかしいので \*/
* html #QUESTION h4
{
	font-size: 1em;
}
/* */

#QUESTION .inputfield, #QUESTION .confirmationfield
{
	margin: 0.6em 0em 0em 0em;
	padding: 1em 0.7em;
	border: solid 1px #ccc;
	list-style: none;
}

#QUESTION .inputfield ul
{
	margin: 0em;
	padding: 0em;
}

#QUESTION .inputfield li
{
	margin: 0.3em 0em;
	padding: 0em;
}

/* #QUESTION .inputfield>input だとIEが反応しないので */
#QUESTION .inputfield .simpletext, #QUESTION .inputfield .multitext
{
	width: 90%; 
	ime-mode: active;
}

/* 装飾 */

/* 必須入力はstrongでマークされている */
.mustinput
{
	margin-left: 0.1em;
}

/* 入力例 */
.inputexample
{
	margin-left: 0.3em;
}

/* 設問のNumber */
.qnumber
{
	margin-right: 0.5em;
}

/* 答えのNumber */
.anumber
{
}

/* 日本語入力される世界 */
form .doublebytetext
{
	ime-mode: active;
}

/* 日本語されない世界 */
form .singlebytetext
{
	ime-mode: disabled;
}

/* NOTES */
#NOTES ul
{
	margin: 1em 0em;
}

#NOTES li
{
	color: #c71435;
}

/* 送信部 */
#SUBMITBUTTON
{
	margin: 2.5em 0em 0em 4em;
	text-align: center;
}
#SUBMITBUTTON input
{
	padding: 0.5em 1.3em;
}

#SUBMITBUTTON #backButton
{
	margin-left: 2em;
}

/* フッタ */
#FOOTER
{
	clear: both;
	border-top: solid 1px #c0c0c0;	
	width: 965px;
	height: 60px;				/*50px; 2013/10/8変更,  39px; 2009/10/29変更*/
}

#FOOTER div
{
	margin-bottom: 10px;
	padding: 0px;
	width: 965px;
}

#FOOTER ul
{
	margin: 0px;
	padding: 10px 0px 0px 0px;
	list-style: none;
}

#FOOTER li
{
	display: inline;
	float: left;
}

#FOOTER #footer001
{
	/*margin-left: 15px;
	padding-top: 2px;
	width: 691px;　　　　2009/10/29変更*/
	margin-left: 12px;
	width: 344px;	
}

/*　2009/10/29コメント
#FOOTER #footer002
{
	width: 95px;
}

#FOOTER #footer003
{
	width: 73px;
}

#FOOTER #footer004
{
	width: 91px;
}
*/

/*2009/10/29追加*/
#FOOTER #footer002pic,#footer003pic,#footer004pic
{
	width: 14px;
}

#FOOTER #footer002
{
	width: 73px;
}

#FOOTER #footer003
{
	width: 124px;
}

#FOOTER #footer005h
{	
	width: 965px;
}

#FOOTER #footer005
{	
	width: 965px;
	padding-top: 15px;
}

/*2009/10/29追加end*/

/* エラーページ用 */
#errorpage
{
	margin: 5em 8em;
}

#errorpage h2
{
	margin: 3em 0em;
	font-size: 1.5em;
	font-weight: normal;
	color: #f00;
}


/* thanks */
/* アフェリエイトタグ用 2008/01/21 okube add */
#affi
{
	display: none;
}

#thanksmessage
{
	margin-top: 3em;
}

#thanksmessage p, #thanksmessage div
{
	text-align: center;
}

/*文章が長い場合、左寄せにする設定（滅多に使用しないけど） 2008.12.22 okube */
#thanksmessage #alignleft p
{
	text-align: left;
}

#thanksmessage p
{
	color: #069;
	font-size: 1.2em;
}

#leftsection, #rightsection
{
	margin: 0em;
	padding: 0em;
}

#leftsection
{
	width: 400px;
	float: left;
}

#rightsection
{
	width: 160px;
	float: right;
}

#thanksbody .area, #mailnews
{
	margin: 1.2em 0em 0em 0em;
}

#thanksbody .area h3, #mailnews h3
{
	margin: 0px;
	padding: 0px;
	font-size: 9px;
	text-indent: -10000px;
	height: 0px;
}

#leftsection .area
{
	background-image: url("../img/thanks_frame04.gif");
	background-position: 0% 100%;
	background-repeat: no-repeat;
}

#leftsection .area h3
{
	background-image: url("../img/thanks_frame01.gif");
	background-position: 0px 0px;
	background-repeat: no-repeat;
	height: 16px;
}

#leftsection .area div
{
	padding: 0px 14px;
	border-right: solid 1px #c8c8c8;
	border-left: solid 1px #c8c8c8;
}

#relationsites
{
	border: solid 1px #c5c5c5;
	border-top-width: 4px;
}

#rightsection #relationsites h3
{
	width: 158px;
	height: 47px;
	background-image: url("../../img/thanks/thanks_link.gif");
	background-position: 0% 0%;
	background-repeat: no-repeat;
}

#relationsites ul
{
	margin: 0 19px 8px 18px;
	padding: 0px;
	list-style: none;
}

#relationsites li.arrow
{
	margin: 0.5em 0em;
	background-image: url("../../img/thanks/thanks_link_arrow.gif");
	background-position: 0px 0.1em;
	background-repeat: no-repeat;
	padding-left: 20px;
}

#rightsection #present div
{
	padding-bottom: 10px;
	background-image: url("../img/thanks_frame06.gif");
	background-position: 0% 100%;
	background-repeat: no-repeat;
}

#rightsection #present h3
{
	height: 6px;
	background-image: url("../img/thanks_frame05.gif");
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-color: #eee;
}

#rightsection #present div
{
	padding-left: 10px;
	background-color: #eee;
}