@charset "utf-8";
/* CSS Document */

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


/*---------------------------
common
---------------------------*/

#main {
 margin: 0 auto;
 width: 1000px;
 color: #351101;
 font-size: 18px;
 line-height: 30px;
 -webkit-text-size-adjust: none;/* iPhoneでの文字サイズ自動修正を使わない*/
 font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "Osaka", sans-serif;
}
#main img {
 border: 0;
}
#main a:hover {
 filter: alpha(opacity=50);
 -moz-opacity: 0.50;
 opacity: 0.50;
}
/*---------------------------
title
---------------------------*/
#main h1 {
 margin:0; 
}

/*---------------------------
btn
---------------------------*/
.hmp_btn_back {
 background:url(../images/hmp_men3.gif);
 height:253px;
 position:relative;
}
.hmp_btn1 {
 position: absolute;
 top: 10px;
 left: 46px;
  animation: rotation 1s ease-in-out infinite alternate;
}
.hmp_btn2 {
 position: absolute;
 top: 130px;
 left: 46px;
  animation: rotation 1s ease-in-out infinite alternate;
}
.hmp_btn_back1 {
 background:url(../images/hmp_men4.gif);
 height:103px;
}
.hmp_btn_back_teiki {
 background:url(../images/hmp_men4_teiki.gif);
 height:50px;
}
.hmp_btn_text1 {
 margin:0 0 10px 40px;
 font-weight:bold;
}
.hmp_btn_text2 {
 text-align:center;
 font-weight:bold;
}
@keyframes rotation {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}

/*---------------------------
movie
---------------------------*/
.hmp_men_movie_back {
 background:url(../images/hmp_men6.gif);
 height:391px;
}
.hmp_men_movie {
 width:560px;
 margin:0 auto;
}
.hmp_men_movie1 {
 width:800px;
 margin:0 auto;
}
/*---------------------------
point
---------------------------*/

.hmp_men_point {
 background:url(../images/hmp_men20.gif);
}
.hmp_men_point1 {
 background:url(../images/hmp_men18.jpg);
 height:276px;
 position:relative;
}
.hmp_men_point1_text {
 width:528px;
 position:absolute;
 left:20px;
}
.hmp_men_point2_text {
 margin:0 20px;
 padding:0 0 50px 0;
}
.hmp_men_point2_3d {
 background:url(../images/hmp_men22.jpg);
 height:367px;
 position:relative;
 font-size:16px;
}
.hmp_men_point2_3d1 {
 position: absolute;
 left: 48px;
 top: 299px;
 text-align: center;
 width: 276px;
}
.hmp_men_point2_3d2 {
 position: absolute;
 left: 362px;
 top: 299px;
 text-align: center;
 width: 276px;
}
.hmp_men_point2_3d3 {
 position: absolute;
 width: 280px;
 left: 665px;
 top: 263px;
}
.hmp_men_point2_3d_box_back {
 background:url(../images/hmp_men23.gif);
}
.hmp_men_point2_3d_box {
 border:3px #d8d7d3 solid;
 background:#f9f7f6;
 padding:20px;
 width:864px;
 margin:0 auto 20px auto;
}
.hmp_men_point2_3d_title {
 border-bottom:1px #351101 solid;
 font-weight: bold;
 font-size:24px;
 margin:0 0 5px 0;
}
.hmp_men_point2_3d_voice {
 background:url(../images/hmp_men25.gif);
 padding:0 60px;
}
.hmp_men_point_text {
 padding:0 20px 30px 20px;
}
.hmp_men_point4_pickup {
 background:url(../images/hmp_men31.jpg);
 height:357px;
 position:relative;
}
.hmp_men_point4_pickup_text {
 width: 406px;
 top: 175px;
 left: 306px;
 position: absolute;
}
.hmp_men_point5_text {
 background:url(../images/hmp_men32.gif);
 height:215px;
 padding:0 330px 0 20px;
}
.hmp_men_point6_text {
 background:url(../images/hmp_men34.jpg);
 height:580px;
 padding:0 20px 0 350px;
}
.hmp_men_point6_text_teiki {
 background:url(../images/hmp_men34_teiki.jpg);
 height:580px;
 padding:0 20px 0 350px;
}

/*---------------------------
howto
---------------------------*/
.hmp_men_howto {
 background:url(../images/hmp_men36.gif);
 height:851px;
 position:relative;
}
.hmp_men_howto_t {
 font-size:24px;
 font-weight:bold;
 color:#2b7da2;
}
.hmp_men_howto1 {
 position: absolute;
 left: 191px;
 top: 82px;
 width:570px;
}
.hmp_men_howto2 {
 position: absolute;
 left: 191px;
 top: 323px;
 width:570px;
}
.hmp_men_howto3 {
 position: absolute;
 left: 191px;
 top: 582px;
 width:570px;
}


/*---------------------------
voice
---------------------------*/
.hmp_men_voice {
 background:#351101;
 color:#fff;
 padding:20px;
}
.hmp_men_voice_box {
 overflow: hidden;
 zoom: 1;
 width:900px;
 margin:0 auto;
}
.hmp_men_voice_box_l {
 float:left;
 width:450px;
}
.hmp_men_voice_box_r {
 float:right;
 width:440px;
}
.hmp_text_y {
 background:#FFFF00;
}
/*---------------------------
qa
---------------------------*/
#hair_qa {
 background:#f4e8d8;
}
.hair_qa_box {
 margin:0 0 20px 40px;
}
.hair_qa_q {
 font-size:30px;
 overflow: hidden;
 zoom: 1;
 margin:0 0 5px 0;
}
.hair_qa_q_l {
 float:left;
 width:66px;
}
.hair_qa_q_r {
 float:left;
 line-height:56px;
}
.hair_qa_a_box {
 width:804px;
 background:#FFFFFF;
 border:1px solid #351101;
 padding:20px;
 margin:0 0 0 38px;
 overflow: hidden;
 zoom: 1;
}
.hair_qa_a_l {
 float:left;
 width:66px;
}
.hair_qa_a_r {
 float:left;
 width:735px;
}
.hair_qa_a_n {
 font-size:14px;
 margin:15px 0 5px 0 ;
 line-height:20px;
}
#hair_qa_a_p1 {
 width:597px;
 margin:0 auto;
 overflow: hidden;
 zoom: 1;
}
#hair_qa_a_p1_text1 {
 float:left;
 width:240px;
 text-align:center;
}
#hair_qa_a_p1_text2 {
 float:right;
 width:240px;
 text-align:center;
}
/*---------------------------
btn
---------------------------*/
.hair_moment_btn {
 background:url(../images/hair_moment_back.jpg) no-repeat;
 height:660px;
 position:relative;
}
#coupon {
 position: absolute;
 left: 550px;
 top: 370px;
 color: #AE2024;
 font-size: 200%;
 font-weight: bold;
}
#teiki {
 position: absolute;
 left: 250px;
 top: 590px;
 color: #330900;
 font-size: 100%;
}
#teiki a {
 color: #330900;
 text-decoration: underline;
}
#btn01_btn {
 position: absolute;
 left: 40px;
 top: 340px;
}
#btn02_btn {
 position: absolute;
 left: 40px;
 top: 460px;
}
#btn03_btn {
 position: absolute;
 left: 40px;
 top: 340px;
}
#btn04_btn {
 position: absolute;
 left: 40px;
 top: 460px;
}
#btn05_btn {
 position: absolute;
 left: 40px;
 top: 340px;
}
#btn06_btn {
 position: absolute;
 left: 40px;
 top: 460px;
}
#btn07_btn {
 position: absolute;
 left: 40px;
 top: 340px;
}
#btn08_btn {
 position: absolute;
 left: 40px;
 top: 460px;
}
#btn09_btn {
 position: absolute;
 left: 40px;
 top: 340px;
}
#btn10_btn {
 position: absolute;
 left: 40px;
 top: 460px;
}


/*---------------------------
note
---------------------------*/
#bottom_area {
 background:#f5ede1;
}
#note {
 background:url(../images/hmp_men46.gif);
 padding: 20px 50px;
}
.note_box {
 margin:0 0 20px 0;
 font-size:14px;
 line-height:25px;
}
.note_m {
 font-size:16px;
}


/*---------------------------
footer
---------------------------*/

#footer {
 background:url(../images/hmp_men48.gif);
 width:1000px;
 margin:0 auto;
 text-align:center;
 padding:20px 0 30px 0;
 font-size:14px;
}
#footer a {
 color:#e6004f;
 text-decoration:none;
}
#foonter a:hover {
 color: #FF236F;
 text-decoration: underline;
}
#footer_copy {
 padding:10px 0 0 0;
}
/*---------------------------
bar
---------------------------*/
#f_buybox{
    position: fixed;
    bottom: 0;
    width:100%;
    background:#c1e5d1;
    text-align:center;
    z-index:300;
    clear:both;
}
#f_buybox_box{
 width:944px;
 margin:0 auto;
 overflow: hidden;
 zoom: 1;
}
    
#f_buybox_text {
 float:left;
 margin:0 30px 0 0;
}
#f_buybox_btn1 {
 float:left;
 margin:16px 17px 0 0;
}
#f_buybox_btn2 {
 float:left;
 margin:16px 0 0 0;
}
#f_buybox_btn3 {
 float:right;
 margin:16px 0 0 0;
}
#f_buybox a:hover {
 filter: alpha(opacity=50);
 -moz-opacity: 0.50;
 opacity: 0.50;
}
/*---------------------------
before_after
---------------------------*/

#hair_before {
 position:relative;
 background:url(../images/before_after_back1.jpg);
 width:1000px;
 height:1520px;
 margin:0 auto;
 line-height:25px;
}
#hair_before1 {
 position: absolute;
 width: 450px;
 left: 510px;
 top: 100px;
}
#hair_before2 {
 position: absolute;
 width: 450px;
 left: 510px;
 top: 620px;
}
#hair_before3 {
 position: absolute;
 width: 450px;
 left: 510px;
 top: 1120px;
}

/*---------------------------
teikibin
---------------------------*/
.hair_moment_btn_teiki {
 background:url(../images/hair_moment_back2.jpg) no-repeat;
 height:892px;
 position:relative;
}
#btn01_btn_teiki {
 position: absolute;
 left: 40px;
 top: 560px;
}
#btn02_btn_teiki {
 position: absolute;
 left: 40px;
 top: 700px;
}


#bw_teiki_qa {
 background:url(../images/bw_teiki_qa_bg.gif);
 margin:0 0 3% 0;
}

#bw_teiki_qa_contents {
 padding:0 54px;
}
.bw_teiki_qa_box {
 margin:10px 0 0 0;
 padding:0 0 10px 0;
 border-bottom:1px dotted #666;
}
.bw_teiki_qa_q{
 background: url(../images/bw_teiki_qa_q.png) no-repeat left;
 font-size:20px;
 line-height:130%;
 color:#4ca1b5;
 font-weight:bold;
 padding:20px 0 20px 70px;
}
.bw_teiki_qa_a{
 background: url(../images/bw_teiki_qa_a.png) no-repeat left 10px;
 font-size:16px;
 line-height:130%;
 padding:10px 0 10px 70px;
 overflow: hidden;
 zoom: 1;
}
#bw_teiki_qa_tell {
 background: url(../images/bw_teiki_qa_tell.png)  no-repeat;
 width:382px;
 height:202px;
 float:left;
 position:relative;
 margin: 0 20px 0 0;
}
#bw_teiki_qa_tell_num {
 position: absolute;
 font-size:14px;
 top: 120px;
 left: 10px;
}
#bw_teiki_qa_fax {
 background: url(../images/bw_teiki_qa_fax.png)  no-repeat;
 width:382px;
 height:202px;
 float:left;
 position:relative;
}
#bw_teiki_qa_fax_num {
 position: absolute;
 font-size:14px;
 top: 120px;
 left: 10px;
}
#bw_teiki_qa_fax a {
 color:#ea3c77; 
}
.bw_teiki_qa_pink {
 font-size:20px;
 line-height:130%;
 color:#cb616d;
 font-weight:bold;
 margin:0 0 20px 0;
}
.bw_teiki_mb {
 padding:0 0 3% 0;
}