@charset "utf-8";

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

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

/* -------------------------------------------------------
powder.html
------------------------------------------------------- */
   
#HF.pwdPg #cont01 p { padding:20px 22px 26px 20px; line-height:200%; }
#HF.pwdPg #cont01 p b { color:#ec6c79; }

#HF.pwdPg #cont02 ul { padding:20px 0 20px 22px; border-bottom:1px solid #dfdfdf; }
#HF.pwdPg #cont02 ul li { float:left; margin-right:16px; }
#HF.pwdPg #cont02 ul li img { width:160px; }
#HF.pwdPg #cont02 .wrp01 { padding:28px 20px 20px 20px; }
#HF.pwdPg #cont02 .wrp01 h4 span { display:block; font-size:15px; }
#HF.pwdPg #cont02 .wrp01 section { display:inline-block; width:338px; border:1px solid #ddd; padding:12px 5px 14px 5px; text-align:center; margin:30px 0 15px 0; }
#HF.pwdPg #cont02 .wrp01 section.frst { margin-right:12px; }
#HF.pwdPg #cont02 .wrp01 section h5 { color:#439ad1; font-size:15px; font-weight:bold; }
#HF.pwdPg #cont02 .wrp01 section p img { height:122px; margin-top:10px; }
#HF.pwdPg #cont02 .wrp01 .lnkBtn01 { height:54px; line-height:54px; margin:10px 0 0 0; text-align:center; }
#HF.pwdPg #cont02 .wrp01 .lnkBtn01 a { padding:0 30px 0 19px; }
#HF.pwdPg #cont02 .wrp01 .lnkBtn01 a span { font-weight:bold; }
#HF.pwdPg #cont02 .wrp01 p.sale { border:2px solid #ec6c79; width:300px; margin:8px auto 0 auto; padding:10px 0; background:; color:#ec6c79; font-size:19px; font-weight:bold; text-align:center; }

#HF.pwdPg #cont03 ul { padding:8px 11px 20px 11px; }
#HF.pwdPg #cont03 ul li { float:left; width:338px; margin:12px 7px 0 7px; border:1px solid #7dbce3; border-radius:4px; }
#HF.pwdPg #cont03 ul li h4 { height:34px; line-height:34px; background:#7dbce3; color:#fff; font-size:16px; font-weight:bold; text-align:center; }
#HF.pwdPg #cont03 ul li p { padding:10px; }


/* -------------------------------------------------------
sculp.html
------------------------------------------------------- */

#HF.sclpPg #cont01 .cmnPgTtl { font-size:23px; }
#HF.sclpPg #cont01 h3 { color:#ec6c79; font-weight:bold; font-size:22px; line-height:150%; margin-bottom:15px; letter-spacing:0; }
#HF.sclpPg #cont01 figure { padding:0 0 0 15px; }
#HF.sclpPg #cont01 figure img { width:170px; }

#HF.sclpPg #cont02 { line-height:200%; }
#HF.sclpPg #cont02 .cntBox01 { border-bottom:1px solid #dfdfdf;  }
#HF.sclpPg #cont02 .cntBox01.last { border-bottom:none; }
#HF.sclpPg #cont02 .TxtBox01 { text-align:center; }
#HF.sclpPg #cont02 .TxtBox01 p { margin-top:25px; text-align:left; }
#HF.sclpPg #cont02 .TxtBox02 { display:table; width:100%; padding:15px 0 0 0; } 
#HF.sclpPg #cont02 .TxtBox02 p { display:table-cell; vertical-align:top; }
#HF.sclpPg #cont02 .TxtBox02 figure { display:table-cell; padding:0 10px 0 20px; }

#HF.sclpPg #cont03 .cntBox01 { text-align:center; }

#HF.sclpPg #cont04 .cntBox01 > p { margin-top:20px; line-height:200%; }
#HF.sclpPg #cont04 .cntBox01 > p img { float:right; padding:0 10px 10px 25px; }
#HF.sclpPg #cont04 .cntBox01 > p.name { text-align:right; margin-top:10px; }

#HF.sclpPg .htCnt01 { background:url(../img/sculp/img06.gif) top right no-repeat; background-position:95% 0%; padding-right:180px; }
#HF.sclpPg .htCnt01 section { margin-top:24px; }
#HF.sclpPg .htCnt01 section h4 { font-size:16px; font-weight:bold; color:#5ca7d6; padding-left:37px; text-indent:-37px; }
#HF.sclpPg .htCnt01 section h4 span { display:inline-block; width:25px; height:25px; line-height:25px; margin-right:12px; text-align:center; background:#96c7e5; text-indent:0px; border-radius: 2px; color:#fff; }
#HF.sclpPg .htCnt01 section p { padding:10px 0 0 38px; }
#HF.sclpPg .htCnt01 section p.idt01 { padding-left:1em; text-indent:-1em; }
#HF.sclpPg .htCnt01 section p span { color:#ec6c79; }

#HF.sclpPg #cont07 .feature { width:650px; margin:0 auto; padding:30px 0 7px 0; }
#HF.sclpPg #cont07 .feature li { float:left; margin:0 13px 18px 18px; }
#HF.sclpPg #cont07 > p { height:54px; text-align:center; margin-bottom:30px; }
#HF.sclpPg #cont07 > p a { height:54px; line-height:54px; }


/* -------------------------------------------------------
supplement.html
------------------------------------------------------- */
#HF.splPg #HFmainCnt_col1{
padding:30px 0 60px;
}
#HF.splPg #HFmainCnt_col1 > *{
margin:80px 60px 0;
}
#HF.splPg #HFmainCnt_col1 #cont01{
margin:0;
}
#HF.splPg #HFmainCnt_col1 #cont02{
margin-top:0;
}
#HF.splPg .btnArea{
margin-top:30px;
}
#HF.splPg h2{
margin:0;
}
#HF.splPg h3{
margin:0 0 30px;
padding:15px 0;
font-size: 30px;
font-weight: bold;
color:#004CA0;
display:flex;
align-items:center;
justify-content:center;
}
#HF.splPg h3:before,
#HF.splPg h3:after{
content:'';
width:3em;
height:1px;
background:#004CA0;
}
#HF.splPg h3:after{
margin-left:1em;
}
#HF.splPg h3:before{
margin-right:1em;
}
#HF.splPg #cont02 .spl_main{
display:table;
}
#HF.splPg #cont02 .spl_main p{
display:table-cell;
text-align:center;
vertical-align:middle;
}
#HF.splPg #cont02 .spl_nav{
margin:40px 0;
display:flex;
align-items:center;
justify-content:center;
}
#HF.splPg #cont02 .spl_nav p{
width:200px;
margin:0 10px;
}
#HF.splPg #cont02 .spl_nav p a{
width:100%;
text-align:center;
}


#HF.splPg #cont02 .cmnSetLnk01 {
border:1px #dfdfdf solid;
}
#HF.splPg #cont02 .expln{
width:calc(100% - 180px);
}
#HF.splPg #cont02 .expln dd a{
color:rgba(231,56,39,1);
text-decoration:underline;
}
#HF.splPg #cont02 .expln dd a:hover{
text-decoration:none;
}
#HF.splPg #cont02 .lnkBtn03{
width:15em;
margin-top:10px;
float:right;
}
#HF.splPg #cont02 .lnkBtn03 a{
width:100%;
text-align:center;
}


#HF.splPg #cont03 dl{
margin:0 30px;
}
#HF.splPg #cont03 dt{
margin:20px 0 0 0;
padding:4px 10px 4px 40px;
color:rgba(125,188,227,1);
font-size: 16px;
font-weight: bold;
}
#HF.splPg #cont03 dd{
margin:5px 0 0 20px;
padding:10px 15px 10px 65px;
border:1px rgba(231,56,39,1) solid;
border-radius:0.5em;
font-size: 14px;
}
#HF.splPg #cont03 dt,
#HF.splPg #cont03 dd{
position:relative;
}
#HF.splPg #cont03 dt:before,
#HF.splPg #cont03 dd:before{
position:absolute;
font-weight:bold;
}
#HF.splPg #cont03 dt:before{
content:'Q.';
top:3px;
left:0px;
color:rgba(125,188,227,1);
text-shadow: 2px 2px 0 rgba(125,188,227,0.3);
font-size:28px;
}
#HF.splPg #cont03 dd:before{
content:'A.';
top:10px;
left:20px;
color:rgba(231,56,39,1);
text-shadow: 2px 2px 0 rgba(231,56,39,0.3);
font-size:24px;
}
#HF.splPg #cont03 dd a{
color:rgba(125,188,227,1);
text-decoration:underline;
}
#HF.splPg #cont03 dd a:hover{
color:rgba(125,188,227,1);
text-decoration:none;
}
#HF.splPg #cont04 table{
margin:0 30px;
}
#HF.splPg #cont04 th,
#HF.splPg #cont04 td{
border:1px #cccccc solid;
padding:5px 10px;
}
#HF.splPg #cont04 tr:first-child th{
background:rgba(125,188,227,1);
text-shadow:none;
color: #fff;
font-size: 16px;
}
#HF.splPg #cont04 th{
background:rgba(125,188,227,0.3);
color:rgba(125,188,227,1);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
text-align: center;
}
#HF.splPg #cont04 tr th.th1{
width:3em;
}
#HF.splPg #cont04 tr th.th2{
background:rgba(125,188,227,0.3);
color:rgba(125,188,227,1);
width:25%;
}



/* -------------------------------------------------------
scalplotion.html
------------------------------------------------------- */
#HF.sclotionPg #cont01{
padding:30px 0 0;
}
#HF.sclotionPg #cont01 h2{
text-align:center;
}
#HF.sclotionPg #cont01 .nav{
margin-top:30px;
text-align:center;
}
#HF.sclotionPg #cont01 .lnkBtn03{
width:15em;
margin:-40px auto 10px;
}
#HF.sclotionPg #cont01 .lnkBtn03 a{
width:100%;
margin-left:-2em;
text-align:center;
}