@charset "shift_jis";

/*---------------------------------------------------------
Common
---------------------------------------------------------*/
#container {
	min-width: 1200px;
	text-align: justify;
}
.section {
	/*width: 1200px;
	margin: 0 auto;*/
}
.inner {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
.bg_pattern {
	background: url(/brand/hairla/img/top_pattern_bg.gif) repeat 0 0;
}
.bg_color {
	background-color: #fefdf4;
}

ul.list {
	font-size: 0;
}
ul.list li {
	display: inline-block;
	vertical-align: top;
}
ul.list li:first-child {
	margin-left: 0 !important;
}
.top a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity= 80 )";
}

.top h2 {
	text-align: center;
}
#top_mov h2, #top_pnt h2, #top_clr h2, #top_vce h2 {
	width: 100%;
	height: 320px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#top_mov h2 {
	background: url(/brand/hairla/img/top_mov_title.png) no-repeat center 0;
}
#top_pnt h2 {
	background: url(/brand/hairla/img/top_pnt_title.png) no-repeat center 0;
}
#top_clr h2 {
	background: url(/brand/hairla/img/top_clr_title.png) no-repeat center 0;
}
#top_vce h2 {
	background: url(/brand/hairla/img/top_vce_title.png) no-repeat center 0;
	height: 390px;
}


/*---------------------------------------------------------
header
---------------------------------------------------------*/
#top_header {
	position: relative;
	height: 106px;
	background: url(/brand/hairla/img/top_head_bg.jpg) repeat-x 0 0;
}
.top h1 {
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: -90px;
	padding: 0;
	float: none;
}
#logo_kobayashi {
	position: absolute;
	top: 37px;
	left: 0;
}
#head_btn {
	position: absolute;
	top: 38px;
	right: 0;
}
#head_btn li {
	margin-left: 8px;
}

/*---------------------------------------------------------
navigation
---------------------------------------------------------*/
#top_nav {
	position: relative;
	background-color: #eaab00;
	background: #eaab00 url(/brand/hairla/img/top_nav_bg.jpg) no-repeat center 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
#top_nav:before,
#top_nav:after {
	position: absolute;
	display: block;
	content: " ";
	background-color: #f1c15c;
	width: 100%;
	height: 1px;
	left: 0px;
}
#top_nav:before {
	top: -2px;
}
#top_nav:after {
	bottom: -2px;
	left: 0px;
}
#top_nav li {
	margin-left: 2px;
}
#top_nav li {
	margin-left: 2px;
}
#top_nav li.sub{
    position: relative;
		-webkit-transition: all .4s ease;
		-o-transition: all .4s ease;
		transition: all .4s ease;
}
#top_nav li.sub > a > img{
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}
#top_nav li.sub.active{
	background:url(/brand/hairla/img/top_nav_5_on.png);
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
#top_nav li.sub.active > a > img{
	opacity:0;
}
#top_nav li.sub .subnav{
  display: none;
  position: absolute;
  top:70px;
  right:-1px;
	border-right:1px solid #f1d693;
	border-left:1px solid #f1d693;
	border-bottom:1px solid #f1d693;
  background:rgba(255,255,255,.9);
  z-index: 500;
}

#top_nav li.sub .subnav li{
  height: 58px;
  width:214px;
  margin: 0 auto;
}

#top_nav li.sub .subnav li a{
  display: table;
  text-align: center;
	width: 92%;
	margin: 0 auto;
  height: 100%;
}
#top_nav li.sub .subnav li a .subnav-Item{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#top_nav li.sub .subnav li.even a{
	border-top:#f1d693 1px solid;
}


/*---------------------------------------------------------
side button
---------------------------------------------------------*/
#top_sidebtn {
	position: fixed;
	right: 0;
	top: 50%;
	margin-top: -215px;
	z-index: 99;
}
#top_sidebtn ul li {
	margin-top: 7px;
}


/*---------------------------------------------------------
main visual
---------------------------------------------------------*/
#top_mv {
	border-top: 1px solid #fff;
	height: 620px;
	background: #fddcdc url(/brand/hairla/img/top_mv_bg.png) no-repeat center 0;
}
#top_mv h2,
#top_mv p {
	position: absolute;
}
#top_mv h2 {
	top: 19px;
	left: 0;
}
#top_mv_item {
	top: 299px;
	left: 0;
}
#top_mv_image {
	top: 18px;
    left: 582px;
}
#top_mv_btn_eq {
	top: 523px;
	left: 506px;
}

.top_mv_btn{
	position:absolute;
	top: 454px;
    left: 502px;
	border:1px solid #f1d693;
	width:459px;
	height:140px;
	text-align: center;
	background:#FFF;
}
.top_mv_btn .top_mv_btn_in{
z-index: 400;
    position: relative;
	}
.top_mv_btn .ttl{
	position: static!important;
	margin-top: 4px;
}

.top_mv_btn:after{
	position:absolute;
	top:3px;
	left:3px;
	display: block;
	height: 132px;
	width:451px;
	border:1px solid #f1d693;
	z-index: 10;
	content:"";
}
.top_mv_btn .btnArea{
	width: 429px;
    margin: 0 auto;
		border-top:1px solid #f1d693;
}
.top_mv_btn li{
	display: inline-block;
}
.top_mv_btn li:last-child{
	border-left:1px solid #f1d693;
}

/*---------------------------------------------------------
konnatoki
---------------------------------------------------------*/
#top_knt {
	padding-bottom: 50px;
}
#top_knt h2 {
	text-align: center;
	padding-top: 26px;
}
#top_knt ul {
	margin-top: 20px;
	padding: 0 27px;
}
#top_knt li {
	width: 286px;
	margin-left: 24px;
	margin-bottom: 23px;
}
#top_knt li:first-child {
	margin-left: 0;
}
#top_knt_copy {
	text-align: center;
	margin-top: 17px;
}

#btn_eq {
	padding-top:25px;
	margin: 0 auto 0;
	text-align: center;
}

/*---------------------------------------------------------
movie
---------------------------------------------------------*/
#top_mov {
	padding-bottom: 70px;
}
#top_mov_mov {
	margin-top: -120px;
}
#top_mov_mov li {
	width: 456px;
	margin-bottom: 20px;
}
#top_mov_mov li.even {
	margin-left: 48px;
}
#top_mov_mov li iframe {
	padding: 10px 11px;
	width: 100% !important;
	height: 342px !important;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-box-shadow: 2px 2px 2px #e1e1e1;
	        box-shadow: 2px 2px 2px #e1e1e1;
}

#top_mov_container {
	width: 1200px;
	height: 434px;
	background: url(/brand/hairla/img/top_mov_bg.png) no-repeat right 0;
	margin-left: -120px;
}
#top_mov_container p {
	margin-left: 118px;
}
#top_mov_container p#top_mov_catch {
	padding-top: 40px;
}
#top_mov_container p#top_mov_copy {
	margin-top: 22px;
}

#top_mov_tp {
	border: 1px solid #f1d693;
	background-color: #fff;
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.04);
	        box-shadow: 2px 2px 2px rgba(0,0,0,0.04);
}
#top_mov_tp_inner {
	border: 1px solid #f9eccc;
	margin: 5px;
	padding: 30px 27px;
}
#top_mov_tp h3,
#top_mov_tp #top_mov_tp_lead {
	text-align: center;
}
#top_mov_tp #top_mov_tp_lead {
	margin: 25px 0 20px;
}

#top_mov_tp .list li {
	width: 288px;
	margin-left: 14px;
}
#top_mov_tp .list li h4 {
	margin: 8px 0;
}
#top_mov_tp .list li p {
	font-size: 14px;
	line-height: 24px;
	font-family: "・ｽE・ｽq・ｽE・ｽ・ｽE・ｽ・ｽE・ｽM・ｽE・ｽm・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ ProN", "HiraMinProN", "HG・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ・ｽE・ｽE", "・ｽE・ｽl・ｽE・ｽr ・ｽE・ｽo・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ", "MS PMincho", "MS ・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ・ｽE・ｽ", serif;
	margin: 0 8px;
}

/*---------------------------------------------------------
point
---------------------------------------------------------*/
#top_pnt {
	padding-bottom: 70px;
}
#top_pnt .inner {
	margin-top: -166px;
}
#top_pnt li {
	margin-top: 46px;
}
#top_pnt li.even {
	background: url(/brand/hairla/img/top_pnt_line.png) no-repeat 42px center;
	padding-left: 100px;
}

/*---------------------------------------------------------
color
---------------------------------------------------------*/
#top_clr {
	padding-bottom: 70px;
}
#top_clr_item {
	margin: -120px 0 20px;
	padding-left: 7px;
}
#top_clr_item li {
	margin-left: 23px;
}
#top_clr_image {
	padding-left: 7px;
}
#top_clr_copy {
	padding: 24px 0 20px 8px;
}
#top_clr_btn {
	padding-left: 10px;
	text-align: center;
}
#top_clr_btn li {
	margin-top: 17px;
}
#top_clr_btn li.even {
	margin-left: 18px;
}

/*---------------------------------------------------------
voice
---------------------------------------------------------*/
#top_vce {
	margin-bottom: 70px;
}
#top_vce .list {
	position: relative;
	text-align: center;
}
#top_vce .list li {
	margin-bottom: 23px;
}
#top_vce .list li.even {
	margin-left: 24px;
}
#top_vce_note {
	position: absolute;
	bottom: 0;
	left: 730px;
	font-size: 14px;
	margin-left: 0 !important;
}
#top_vce_btn_eq {
	margin: 22px 0 50px;
	text-align: center;
}
#top_vce_qa_arrow {
	text-align: center;
}
h3#top_vce_qa_title {
	text-align: center;
	background: url(/brand/hairla/img/top_vce_qa_bg_top.png) repeat-x 0 bottom;
}
#top_vce_qa_container {
	background: #fdf5f1 url(/brand/hairla/img/top_vce_qa_bg_bottom.jpg) repeat-x 0 bottom;
}
dl#top_vce_qa {
	border: 1px solid #f4cfd2;
	background-color: #fff;
	padding: 32px 30px;
	width: 940px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.04);
	        box-shadow: 2px 2px 2px rgba(0,0,0,0.04);
}
dl#top_vce_qa dt {
	background: url(/brand/hairla/img/top_vce_qa_line.gif) no-repeat center 0;
	padding-top: 53px;
	margin-top: 40px;
}
dl#top_vce_qa dt:first-child {
	background: none;
	margin-top: 0;
	padding-top: 0;
}
dl#top_vce_qa dd {
	margin-top: 37px;
}
#top_vce_btn_shop {
	text-align: center;
	margin-top: 50px;
}

/*---------------------------------------------------------
cv button
---------------------------------------------------------*/
.cvBtn {
  width: 940px;
  margin: 50px auto 23px;
}
#top_mov .cvBtn {
	width: 960px;
	margin: 50px auto 0;
}
#top_mov .cvBtns_item + .cvBtns_item {
	margin-left: 36px;
}

#top_pnt .cvBtn {
	margin: 0 auto;
}
#top_pnt .cvBtns_subs_item {
	margin-top: 0;
}
#top_pnt .cvBtns_subs_item.himawari {
	margin-top: 13px;
}
.cvBtns_subs_item.himawari{
	margin-top: 13px;
}
#container .cvBtns_subs_item.tsuruha{
	margin-top: 13px;
	margin-left: 0;
}
#container .cvBtns_subs_item.amazon a {
	display: block;
	width: 189px;
	height: 68px;
	padding: 0 20px;
	background: url(../img/bg_cvbtn.png) no-repeat left top;
	text-align: right;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
#container .cvBtns_subs_item.amazon img {
	width: 140px;
}
#top_pnt .himawari_sub_item {
	margin-top: 0;
}

#top_pnt .himawari_sub_item {
	margin-top: 0;
}
#top_clr .cvBtn {
	width: 960px;
	margin: 20px auto 0;
	padding-left: 15px;
}
#top_clr .cvBtns_item + .cvBtns_item {
	margin-left: 17px;
}

.cvBtns::after {
	display: block;
	content: "";
  clear: both;
}
.cvBtns_item {
  position: relative;
  float: left;
}
.cvBtns_item .cvBtns_note {
  position: absolute;
  top: -16px;
	left: 0;
	font-size: 12px;
}
.cvBtns_item.web > img:hover {
  cursor: pointer;
	opacity: .8;
}
.cvBtns_item + .cvBtns_item {
  margin-left: 16px;
}
.cvBtns_item > img {
  position: relative;
  z-index: 2;
}
.cvBtns_sub {
	display: none;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  width: 417px;
  padding: 28px 12px 19px;
  background: #e56100;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.cvBtns_subs::after {
	display: block;
	content: "";
  clear: both;
}
.cvBtns_subs_item {
  float: left;
}
.cvBtns_subs_item + .cvBtns_subs_item {
  margin-left: 13px;
}
.cvBtns_subs_item img {
  vertical-align: bottom;
}
.himawari_sub {
  display: none;
}
.himawari_sub_item {
  border-bottom: 1px solid #ddd;
}