@charset "utf-8";

[sp] {
  display: none !important;
}


/*scrollarea*/

.scrollarea {
  width: 40px;
  z-index: 40;
  height: 100%;
  position: fixed;
  top: 0;
  left: 30px;
}

.sc_bar {
  position: absolute;
  top: 150px;
  left: 7px;
}

.sc_r_area {
  position: absolute;
  top: 150px;
  left: 0px;
  width: 100%;
  height: calc(100% - 300px);
  z-index: 45;
}

.sc_rose {
  position: absolute;
  top: 0;
  left: 50%;
  cursor: pointer;
  margin-top: -12px;
  margin-left: -12px;
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  /* easeOutExpo */
}

.header_bg {
  /* background-color: #fff; */
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  z-index: 99;
  height: 70px;
  width: 100%;
  top: 0;
}

.header_logo {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;

}
.header_logo a {
  width: 220px!important;
  height: 50px!important;
  margin-top: -26px!important;
}

/*menu*/

.menu_area_pc {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 80;
  height: 15px;
  vertical-align: middle;
}
.menu_area_pc a {
  display: inline-block;
  /* height: 15px; */
  line-height: 7px;
  vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
  color: #000;
  font-size: 12px;
  margin: 0 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
}
.menu_area_pc span {
  display: inline-block;
  /* height: 15px; */
  line-height: 25px;
  vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
  color: #000;
  font-size: 12px;
  margin: 0 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
}
.menu_area_pc .nllogo img {
  width: 100%!important;
  height: 26px;
}
.indexpageload .menu_area_pc {
  -webkit-transform: translate(0, -150px) rotate(10deg);
  transform: translate(0, -150px) rotate(10deg);
}
.onsable.indexpageload .menu_area_pc {
  -webkit-transform: translate(0, 0) rotate(0deg);
  transform: translate(0, 0) rotate(0deg);

  -webkit-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  /* easeOutExpo */
  transition-delay: 1s;
}

.menuSub {
  display: block; /* display: none だと transition が効かないので block にします */
  max-height: 0; /* 初期状態で高さを 0 に設定 */
  opacity: 0; /* 完全に透明 */
  overflow: hidden; /* はみ出す部分を隠す */
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff; /* 背景色 */
  transition: max-height 0.5s ease-in-out; /* スライドのアニメーション */
  max-height: 0; /* 初期状態の高さを 0 に */
  margin: 0 0 0 -10px;
  padding: 9px 0 12px 0;
  z-index: 10;
  transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease; /* アニメーションを設定 */
}

.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown-wrapper:hover .menuSub {
  max-height: 200px; /* ホバー時に表示される高さを設定 */
  opacity: 1; /* 完全に表示 */
  overflow: visible; /* コンテンツを表示 */
}
.dropdown-wrapper:hover .menuSub2 {
  max-height: 400px; /* ホバー時に表示される高さを設定 */
  opacity: 1; /* 完全に表示 */
  overflow: visible; /* コンテンツを表示 */
}

.dropdown__list {
  position: relative;
  padding: 10px;
}

.dropdown__list a {
  text-decoration: none;
  color: #000; /* テキストの色 */
  white-space: nowrap;
}



.dropdown__list.has-submenu:hover > .submenu {
  display: block; /* ホバー時にサブメニューを表示 */
  opacity: 1; /* 完全に表示 */
}

.submenu {
  display: block; /* display: none だと transition が効かないので block にします */
  position: absolute;
  top: 0;
  left: 100%; /* 親メニューの右側に配置 */
  list-style: none;
  padding: 5px 0;
  margin: 0;
  background-color: #fff;
  z-index: 14;
  opacity: 0; /* 完全に透明 */
  transition: opacity 0.5s ease; /* アニメーションを設定 */
}

.submenu li {
  padding: 13px;
}

.submenu li a {
  text-decoration: none;
  color: #000;
  display: block;
}



.menu_area {
  position: fixed;
  /* top: 33px; */
  top: 20px;
  right: 45px;
  z-index: 80;
  height: 15px;
  vertical-align: middle;
}

.menu_area a {
  display: inline-block;
  /* height: 15px; */
  line-height: 7px;
  vertical-align: middle;
  font-family: 'Montserrat', sans-serif;
  color: #000;
  font-size: 12px;
  margin: 0 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.menu_area .nllogo img {
  width: 100%!important;
  height: 26px;
}

.menu_line {
  margin: 0 10px;
  display: inline-block;
  width: 1px;
  height: 15px;
  background: #e60e97;
}

.menu_area a[tolng] {
  font-size: 11px;
  cursor: pointer;
}

[tolng]+[tolng] {
  margin: 0 -10px;
}



.vplayer video {
  display: none;
}

.vp_open .vplayer video {
  display: block;
}

.vplayer {
  pointer-events: none;


  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

  opacity: 0;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 6000;
}

.vp_open .vplayer {
  opacity: 1;
  pointer-events: auto;
}

.vclose {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 7000;
  cursor: pointer;
}

.vopen {
  cursor: pointer;
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 20;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  height: 30px;
}

.vopen span {
  bottom: 10px;
  letter-spacing: 0.3em;
}

.vopen img {
  margin-right: 10px;
  width: 30px;
  height: 30px;
}

.areas {
  width: 100%;
  max-width: 85%;
  max-width: 88%;
  overflow: visible;
  margin: 0 auto;
}

.areas_wrap {
  width: 100%;
  overflow: hidden;
/*  padding-bottom: 10px; */
}



[class^="eye"],
[class*=" eye"],
[class^="one_eye"],
[class*=" one_eye"] {


  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  /* easeOutExpo */


}

[class^="eye"]:hover,
[class*=" eye"]:hover,
[class^="one_eye"]:hover,
[class*=" one_eye"]:hover {
  transform: rotate(-3deg);

}

.footer_area:before {
  content: ".";
  color: rgba(0, 0, 0, 0);
  background-color: #fff;
  position: absolute;
  bottom: 150px;
  left: 47px;
  width: 3px;
  height: 200px;
  z-index: 10;
}


.indexpageload .menu_area {
  -webkit-transform: translate(0, -150px) rotate(10deg);
  transform: translate(0, -150px) rotate(10deg);

}

.onsable.indexpageload .menu_area {

  -webkit-transform: translate(0, 0) rotate(0deg);
  transform: translate(0, 0) rotate(0deg);

  -webkit-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -moz-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -o-transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
  /* easeOutExpo */
  transition-delay: 1s;

}

/* ==================================================
201902追記
================================================== */
.t_area_9 {
  padding: 0 30px;
}
.line_brand_logo {
  width: 325px;
  height: auto;
}
.top_product5 {
  margin: 20px auto 0;
  max-width: 920px;
  background: url('../img/ol_bg.png') no-repeat center center / contain;
}

.top_product5::before {
  content: "";
  display: block;
  padding-top: 39.184783%;
}

.top_product5_icon1,
.top_product5_icon2,
.top_product5_icon3 {
  position: absolute;
  z-index: 9;
}

.top_product5_icon1 {
  top: 16%;
  left: 5%;
}

.top_product5_icon2 {
  top: 0%;
  left: 10%;
}

.top_product5_icon3 {
  top: 75%;
  left: 25%;
}

.top_product5_icon1 img {
  width: 48px;
  height: 48px;
}

.top_product5_icon2 img {
  width: 56px;
  height: 56px;
}

.top_product5_icon3 img {
  width: 40px;
  height: 40px;
}

.top_product5_img {
  position: absolute;
  left: -3%;
  top: 7%;
  width: 62.2%;
  height: auto;
}

.top_product5_box {
  position: absolute;
  top: 48%;
  right: 40px;
  width: 42%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.top_product5_ttl{

}
.top_product5_ttl .name_en+.name_en{
  margin-bottom: 0;
  margin-top: 69px;
}
.top_product5_txt {
  margin: 4% 0;
  line-height: 1.4em;
}

.top_product5_btn a {
  margin: auto;
  text-align: left;
}

@media screen and (max-width: 1050px) {
  .top_product5_box {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateY(-50%) scale(.8);
    transform: translateY(-50%) scale(.8);
  }
}

/* ==================================================
20230908追記
================================================== */
.top_product.top_product_tea .top_product5_bg {
  width: 150.5px !important;
  height: 188px !important;
}
.top_product.top_product_tea .top_product5_item {
  width: 112px !important;
  height: 133.5px !important;
}
.top_product.top_product_tea .top_product5_icon {
  margin-top: 17px;
  margin-left: 28px;
}
.top_product.top_product_tea .top_product5_icon img{
  width: 57px;
  height: 36.5px;
}

.top_product.top_product_oil .top_product4_item {
  width: 126px !important;
  height: 152.5px !important;
}
.top_product.top_product_oil .top_product4_icon {
  left: 50%;
}

.top_product_bath .top_product5_bg {
  width: 162.5px !important;
  height: 176.5px !important;
  left: -23px;
}
.top_product_bath .top_product5_item {
  /* width: 110px !important;
  height: 158px !important; */
  width: 242px !important;
  height: auto !important;
  left: -11px;
  top: 58px;
}
.top_product_bath .top_product5_icon{
  margin-left: 16px;
  top: 28px;
}
.top_product_bath .top_product5_icon img{
  width: 56.5px;
  height: 29.5px;
}

.top_product_pillow .top_product5_bg {
  width: 156.5px !important;
  height: 193px !important;
}
.top_product_pillow .top_product5_item {
  width: 116.5px !important;
  height: 151px !important;
}
.top_product_pillow .top_product5_icon{
  margin-left: 30px;
}
.top_product_pillow .top_product5_icon img{
  width: 50px;
  height: 50px;
}

/* ==================================================
201903??
================================================== */
.t_area_7+.t_area_7 {
  margin-top: -16%;
  height: 640px;
}
.t_area_7+.t_area_7 {
  margin-top: -16%;
  height: 605px;
}

.t_area_7 .top_product4 {
  width: 560px;
}

.t_area_7 .top_product4 .top_product3_info {
  width: 250px;
  top: 140px;
  left: 52%;
}

.top_product4_icon {
  left: 53%;
  top: 130px;
}

@media screen and (min-width: 769px) and (max-width: 1050px) {
  .t_area_7+.t_area_7 {
    margin-top: -28%;
    height: 580px;
  }
}





/*limited*/

.limited{
  position: absolute;
  top:-5px;
  left:-35px;
  width:80px;
  height:auto;
  z-index:10;
}

.limmited_t{
  color:#000;
  padding-bottom:20px;
  font-size:11px;
font-weight: bold;
}


/*journal*/
.eyeb2.eyeb_j{
    margin: 20px 0 0;
}

.eyeb2.eyeb_blue{
    background: #d7ebeb;
}



/*kyuso*/
x.kv_wrap {
}


.top_h1{
  top: 36px;
}

.rdm_bn.only_rdm {
    width: 305px !important;
    height: 245px !important;
    left: 90px;
    bottom: -50px;
}

.center_tr2xx{
  opacity: 0;
}

/*kyuso2*/
.kv_wrap {
  background-image:url(../img/newv_2.jpg);
}
x{
  width:calc(100% - 160px);
left:80px;
max-height:calc(100vh - 100px);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

.rdm_bn.only_rdm {
    left: 120px;
    bottom: -220px;
    width: 325px !important;
    height: 170px !important;
    bottom: -101px !important;
}
.rdm_bn_w{
  max-height:calc(100vh - 100px);

}

.at17{
  font-size: 20px;
  position: relative;
  right:0;
  top:-30px;
}

.at17x{
  margin-top:10px;
  font-size:11px;
}

.areas.kyu_areas{
  margin-top:300px;
}
body .areas.kyu_areas.video_area {
  margin-top: -35px;
}


.t_area_7_1col {
  height:385px;
  margin-top: 106px;
}

.t_pb_wrap .t_area_9_heading {
  margin-top: 107px;
}

.t_area_7_1col .top_product {
  width:209px;
  margin:0 7px;
}

.t_area_7_1col .one_eyeb {
  width:209px;
}

.t_area_7_1col .top_product2_info,
.t_area_7_1col .top_product3_info,
.t_area_7_1col .top_product4_info {
  width: 100%;
  position: absolute;
  top: 203px;
}
.t_area_7_1col .nimbus {
  text-align: left;
  margin-left: 17px;
}
.t_area_7_1col .nimbusjp {
  text-align: left;
  margin-left: 17px;
}

.top_product2_bg {
  left: -27px;
}
.top_product2_bg.top_product2_bg--toplist {
  left:30px;
}
.top_product2_item {
  top:33.8px;
  left:67px;
}
.top_product2_icon {
  margin-left: 39px;
  top:53px;
}

.top_product3_bg {
  top:-45px;
  left:-23px;
}
.top_product3_item {
  top:37px;
  left:66px;
}
.top_product3_icon {
  margin-left: 34px;
  top:70px;
}
.top_product4_bg {
  left:23px;
  top:-16px;
}
.top_product4_item {
  top:34px;
  left:61px;
}
.top_product4_icon {
  left:27%;
  top:76px;
}

.top_product5_bg {
  left:-6px;
  top:4px;
}
.top_product5_item {
  left:35px;
  top:35px;
}
.top_product5_icon {
  margin-left: 11px;
  top:56px;
}
.top_product5_btn .one_eyeb {
  width:209px;
}
.top_product6_bg {
  top:-13px;
  left:14px;
}
.top_product6_item {
  top:36px;
  left:66px;
}
.top_product6_icon {
  margin-left: 35px;
  top:74px;
}
.top_product7_bg {
  top:-13px;
  left:14px;
}
.top_product7_item {
  top:36px;
  left:66px;
}
.top_product7_icon {
  margin-left: 35px;
  top:74px;
}
.top_os {
  padding-top: 86px;
}
.top_os .content {
  top:320px;
}

.top_os_anim {
  position:absolute;
}
.top_os_anim_1 {
  top:26px;
  left:0;
}
.top_os_anim_2 {
  bottom:-243px;
  right:0;
}



.rdm_bn_w{
  max-height:calc(100vh - 100px);

}


.rdm_bn.only_rdm {
    left: 120px;
    width: 325px !important;
    height: 120px !important;
    bottom: 0 !important;
}
.rdmwrap{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: calc(100vh - 100px);
  max-height:100%;

-webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
   -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
}

/*balm 20230908追記*/


.t_area_7_bm.t_area_7_1col .top_product {
height:450px;
}

.t_area_7_bm.t_area_7 {
  margin: 100px auto 100px;
  width: 799px;
  height: 1730px;
  /* height: 1330px; */
  flex-wrap: wrap;
  justify-content: space-between;
}

.bm_phase  img{
  margin-left:-100px;
}


.bm_phase  .top_product5_item{
  margin-left: -50px;
}



.bm_phase  .top_product5_icon img{
  margin-left:50px;
  margin-top:30px;
}


.top_product_bmm .top_product5_bg{
margin-left: 20px;
}
.top_product_bmm .top_product5_item{
  margin-left: 6px;
  margin-top: 42px;
}

.bm_phase2 .top_product5_item{
  margin-top: 80px;
  margin-left: -20px;
}
.bm_phase2 .top_product5_icon{
margin-top:40px;
margin-left:20px;
}

.t_area_7_blbm .top_product img{
margin-left:-25px;
}


.t_area_7_blbmx .top_product74.top_product img{
margin-left:-30px;
}


.t_area_7_blbm .top_product{
  height: 900px;
}

.t_area_7+.t_area_7.t_area_7_blbmx {
    margin-top: -200px;
  }


/*dry shampoo*/

.top_product_drs .top_product5_bg{
margin-left: 20px;
}
.top_product_drs .top_product5_item{
margin-left: 35px;
margin-top:55px;
}


.top_product_drs .top_product5_icon{
  margin-top: 2px;
  margin-left: 39px;
}


.product_list .t_area_7.t_area_7_drys{
margin:-10px auto 0;
    justify-content: left;

    max-width: 1020px;
}


.product_list .t_area_7 .top_product {
    width: 260px;
    margin-left: 40px;
    margin-right: 40px;
    }



.bm_phase img {
margin-top:-10px;
    margin-left: -50px;
}

.drys_phase .top_product5_bg{
  margin-left:-30px;
  margin-top:20px;
}
.drys_phase .top_product5_item{
  width: 240px!important;
  height: auto!important;
  /* margin-left:45px;
  margin-top:-10px; */
  margin-left:-4px;
  margin-top:115px;
}
.drys_phase .top_product5_icon{
  margin-left:45px;
  margin-top:45px;
}

/* 20211028*/
.kv_banner {
  position:absolute;
  /* bottom:-45px; */
  bottom:-170px;
  /* left:33.5px; */
  left:70.5px;
  /* width:489px; */
  width:540px!important;
  height:180.5px;
  border-radius: 10px;
}
.kv_banner2 {
  position:absolute;
  /* bottom:-45px; */
  bottom:-30px;
  /* left:33.5px; */
  left:70.5px;
  /* width:489px; */
  width:540px!important;
  height:180.5px;
  
}
.kv_banner2 img {
  width: 100%;
  border-radius: 10px;
}
.top_product_night .top_product5_bg{
  left:4px;
}
.top_product_night .top_product5_item{
  left:63px;
  top:66px;
}
.top_product_night .top_product5_icon{
  top:56px;
  margin-left: 56px;
}


/* pillow mist */
.top_product_pm {
  
}
.top_product_pm .top_product5_item{
  width: 148px!important;
  height: auto!important;
  margin-left: 7px!important;
  margin-top: 8px;
}  
.top_product_pm .top_product5_icon{
  margin-top: -6px;
  margin-left: 47px;
}
.top_product_pm .top_product5_bg{
  /* width: 138px!important; */
  width: 174px!important;
  height: auto!important;
  /* margin-left: 27px; */
  margin-left: -6px;
  margin-top: -3px;
}

.pm_phase .top_product5_bg{
  /* margin-top: 20px;
  margin-left: -10px; */
  margin-top: 2px;
  margin-left: -48px;
}
.t_area_7_bl .pm_phase .top_product5_item{
  /* width: 273px!important;
  height: auto!important;
  margin-left: -29px;
  margin-top: 27px; */
  width: 268px!important;
  height: auto!important;
  margin-left: 0px;
  margin-top: 59px;
}
.t_area_7_bl .pm_phase .top_product5_icon{
  /* width: 64px!important;
  height: 64px!important;
  margin-left: 70px;
  margin-top: 93px; */
  width: 54px!important;
  height: 54px!important;
  margin-left: 123px;
  margin-top: 41px;
}


.summer2022_bn {
  width: 39vw;
  height: auto;
  margin: -4vw 0 0 56vw;
  transition: 0.3s;
}
.summer2022_bn img {
  width: 100%;
  height: auto;
}
.summer2022_bn:hover {
  transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
}


.top_t_area_01 .content {
  position: absolute;
  left: 13%;
  top: 273px;
}

.top_t_area_01{
height: 550px;
}

.top_t_area_1 .content {
  position: absolute;
  left: 13%;
  top: 0px;
}
.top_t_area_01 .whiteback {
  font-size: 51px;
  letter-spacing: 0.1em;
  display: inline-block;
  padding: 3px 8px;
  margin-bottom: 6px;
  overflow: hidden;
  left: -16px;
}
.top_t_area_01 .whiteback_in {
  font-weight: 600;
  z-index: 2;
  letter-spacing: 0;
  padding: 3px 8px;
  margin-bottom: 6px;
  overflow: hidden;
}
.top_t_area_01 .short .whiteback_in {
  margin-right: -35px;
}
.top_t_area_01 .whiteback_back {
  display: block;
  position: absolute;
  background: white;
  height: 60%;
  width: 100%;
  z-index: 0;
  top: 0;
  left: 0;
}

.top_t_area_1 {
  height: 400px;
}
.top_t_area_1 .content {
  position: absolute;
  left: 13%;
  top: 0px;
}
.top_p_area_1 {
  text-align: center;
  height: 500px;
  margin-bottom: 50px;
}