@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : layout.css
 Author     : ヒューマンフローラ
 Style Info : レイアウトCSS設定
=================================================================== */

/* -------------------------------------------------------
	index.html
   ------------------------------------------------------- */
#HF.skincare .cntWrp01 .txtBox01 { display:table; width:100%; }
#HF.skincare .cntWrp01 .txtBox01 div { display:table-cell; line-height:190%; vertical-align:top; }
#HF.skincare .cntWrp01 .txtBox01 div span { color:#ec6c79; }
#HF.skincare .cntWrp01 .txtBox01 figure { display:table-cell; width:160px; vertical-align:middle; text-align:center; }

#HF.skincare #cont02.cntWrp01 .txtBox01 div { padding-right:15px; }

#HF.skincare .cntWrp01 .txtBox01.tB02 { display:block !important; }
#HF.skincare .cntWrp01 .txtBox01.tB02 div { display:block !important; }
#HF.skincare .cntWrp01 .txtBox01.tB02 figure { display:block !important; width:auto !important; margin:20px auto 0 auto; }


/* -------------------------------------------------------
	basic.html
   ------------------------------------------------------- */
#HF.basicPg .cntWrp01 .txtBox01 { display:table; width:100%; }
#HF.basicPg .cntWrp01 .txtBox01 div { display:table-cell; line-height:190%; vertical-align:top; }
#HF.basicPg .cntWrp01 .txtBox01 div span { color:#ec6c79; }
#HF.basicPg .cntWrp01 .txtBox01 figure { display:table-cell; width:160px; vertical-align:middle; text-align:center; }

#HF.basicPg #cont01 .cntBox01 { text-align:center; line-height:2.0; position:relative; margin-top:-20px; }
#HF.basicPg #cont01 .cntBox01 span { color:#398ec3; }

#HF.basicPg #cont02 { width:100%; }
#HF.basicPg #cont02 .box01 { float:left; width:33.3%; border-right:1px solid #dfdfdf; padding:25px 14px; min-height:910px; }
#HF.basicPg #cont02 .box01.last { border-right:none; }
#HF.basicPg #cont02 .box01 section { text-align:center; }
#HF.basicPg #cont02 .box01 section h4 { font-size:22px; border-bottom:3px solid #ff9d9f; padding-bottom:10px; }
#HF.basicPg #cont02 .box01 section p { color:#ec6c79; margin:8px 0 15px 0; }
#HF.basicPg #cont02 .box01 figure { text-align:center; border:1px solid #7dbce3; margin-top:20px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; }
#HF.basicPg #cont02 .box01 figure figcaption { color:#fff; font-weight:bold; background:#7dbce3; height:30px; line-height:30px; }
#HF.basicPg #cont02 .box01 figure img { padding:10px 0; }
#HF.basicPg #cont02 .box01 ul {  }
#HF.basicPg #cont02 .box01 ul li { margin-top:30px; }
#HF.basicPg #cont02 .box01 ul li h4 { color:#5ca7d6; font-weight:bold; background:url(../img/basic/arw01.gif) no-repeat left center; padding-left:20px; line-height:1.4; }
#HF.basicPg #cont02 .box01 ul li p { font-size:13px; margin-top:8px; padding-left:20px; }

#HF.basicPg #cont03 .feature { width:650px; margin:0 auto; padding:30px 0 7px 0; }
#HF.basicPg #cont03 .feature li { float:left; margin:0 13px 18px 18px; }
#HF.basicPg #cont03 .cntBox01 { border-top:1px solid #dfdfdf; }
#HF.basicPg #cont03 .txtBox01 h4 { padding:8px 0 10px 0; margin-bottom:15px; font-size:19px; line-height:135%; background:url(../../img/cmn/ttlBdr01.gif) no-repeat bottom center; }
#HF.basicPg #cont03 .attn01 { display:table; width:100%; border:1px solid #ff9d9f; padding:20px; margin-top:20px; line-height:190%; }
#HF.basicPg #cont03 .attn01 h4 { display:table-cell; vertical-align:middle; color:#ec6c79; font-size:15px; font-weight:bold; }
#HF.basicPg #cont03 .attn01 .lnkBtn01 { display:table-cell; text-align:right; vertical-align:middle; }
#HF.basicPg #cont03 .attn01 .lnkBtn01 a { /*width:354px;*/ height:54px; line-height:54px; font-size:15px; font-weight:bold; text-align:center; }


/* -------------------------------------------------------
	usage.html
   ------------------------------------------------------- */
#HF.usagePg #cont01 .cmnTtl01,#HF.usagePg #cont02 .cmnTtl01 { margin-bottom:10px; }
#HF.usagePg .cmnPageLnk01.cmnGryBtn01 a { width:224px; margin-right:12px; }
/*#HF.usagePg .cmnPageLnk01.cmnGryBtn01 a { width:132px; margin-right:10px; }*/

#HF.usagePg .subTtl01 { background:#ff9d9f; height:48px; line-height:48px; padding:0 20px; color:#fff; font-size:16px; font-weight:bold; }

#HF.usagePg .txtBox { display:table; width:100%; }
#HF.usagePg .txtBox li { display:table-cell; width:25%; padding:15px 14px; border-right:1px solid #dfdfdf; }
#HF.usagePg .txtBox li.last { border:none; }
#HF.usagePg .txtBox li.txtNn { vertical-align:middle; }
#HF.usagePg .txtBox li > h4 { background:no-repeat left top; min-height:25px; padding-left:32px; font-size:16px; font-weight:bold; color:#5ca7d6; letter-spacing:0.05em; line-height:1.4; }
#HF.usagePg .txtBox li > .n01 { background-image:url(../img/usage/no01.gif) !important; }
#HF.usagePg .txtBox li > .n02 { background-image:url(../img/usage/no02.gif) !important; }
#HF.usagePg .txtBox li > .n03 { background-image:url(../img/usage/no03.gif) !important; }
#HF.usagePg .txtBox li > .n04 { background-image:url(../img/usage/no04.gif) !important; }
#HF.usagePg .txtBox li > .n05 { background-image:url(../img/usage/no05.gif) !important; }
#HF.usagePg .txtBox li > .n06 { background-image:url(../img/usage/no06.gif) !important; }
#HF.usagePg .txtBox li > .n07 { background-image:url(../img/usage/no07.gif) !important; }
#HF.usagePg .txtBox li figure { margin-top:18px; text-align:center; }
#HF.usagePg .txtBox li figure figcaption { margin-top:10px; font-size:11px; letter-spacing:0; color:#6e6561; line-height:1.4; }
#HF.usagePg .txtBox li > p { margin-top:12px; font-size:12px; font-weight:bold; color:#ec6c79; line-height:1.4; text-indent:-1em; padding-left:1em; }
#HF.usagePg .txtBox li > div { border-top:2px dotted #c1c1c1; padding-top:10px; margin-top:15px; }
#HF.usagePg .txtBox li > div span { font-size:12px; letter-spacing:normal; line-height:1.2; } 
#HF.usagePg .txtBox li > div span.blue { font-size:13px; color:#5ca7d6; }
#HF.usagePg .txtBox li > div span.pnk { font-size:14px; color:#ec6c79; }
#HF.usagePg .txtBox.bdrNn li > div { border:none; padding-top:0; }
#HF.usagePg .txtBox.ttlNn li figure { background:no-repeat left top; min-height:25px; margin-top:0; }
#HF.usagePg .txtBox.last { border-top:1px solid #dfdfdf; }
#HF.usagePg .txtBox.last li.last { width:50%; } 

#HF.usagePg #cont05 .txtBox li.frst { width:50%; }