/*float*/
.liese_float {
width: 80px;
right: 0;
bottom: 55px;
margin: 0 0 0 auto;
position: fixed;
z-index: 100;
}
.liese_float .liese_float_btn {
width: 80px;
}
.liese_float .liese_float_btn img {
width: 100%;
height: auto;
}
@media only screen and (max-width: 640px) {
.liese_float ,
.liese_float .liese_float_btn {
width: 60px;
}
}

#area-BrHeader {
position: relative;
z-index: 102;
margin: 0 auto;
}

/*header*/
#liese_headmenu .menu {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 14px;
cursor: pointer;
padding: 20px;
margin: 0;
z-index: 200;
list-style: none;
}
#liese_headmenu .menu.active {
position: fixed;
}
#liese_headmenu .menu li:nth-of-type(1) {
width: 34px;
height: 1px;
background-color: #333;
position: absolute;
top: 20px;
left: 20px;
transition: transform 0.5s;
}
#liese_headmenu .menu li:nth-of-type(2) {
width: 34px;
height: 1px;
background-color: #333;
position: absolute;
top: 34px;
left: 20px;
transition: transform 0.5s;
}
#liese_headmenu .on li:nth-of-type(1){
transform: translate(0,7.0px) rotate(12deg) !important;
}
#liese_headmenu .on li:nth-of-type(2){
transform: translate(0,-7.0px) rotate(-12deg) !important;
}

#liese_header {
/*position: relative;*/
width: 100%;
z-index: 150;
}
#liese_header img {
width: 100%;
height: auto;
}
#liese_header .liese_head_logo {
position: absolute;
top: 15px;
left: 15px;
width: 50px;
height: 70px;
z-index: 10;
list-style: none;
margin: 0;
padding: 0;
}
#liese_header .liese_head_logo.active {
position: fixed;
}
#liese_header .liese_head_logo h1 {
margin: 0;
padding: 0;
}
#liese_header .liese_nav_wrap nav {
width: 100vw;
height: 100vh;
height: 100dvh;
position: relative;
background-color: #FFF;
display: flex;
}
#liese_header .liese_nav_wrap.on nav {
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap {
width: 100%;
height: 100vh;
height: 100dvh;
order: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
position: relative;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap {
display: flex;
width: 90%;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
list-style: none;
margin: 0 auto;
padding: 0;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.sns_wrap {
display: flex;
width: 100px;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
list-style: none;
position: absolute;
bottom: 20px;
right: 20px;
margin: 0;
padding: 0;
}
#liese_header .liese_nav_wrap {
display: none;
z-index: 101;
position: fixed;
top: 0;
left: 0;
filter: blur(10px) opacity(0);
transition: filter 0.25s , transform 0.25s;
}
#liese_header .liese_nav_wrap.on {
display: block;
overflow: auto;
filter: none;
}
#liese_header .liese_nav_wrap.active {
}
#liese_header .liese_nav_wrap .liese_nav_logo {
position: absolute;
top: calc(50% - 315px);
left: 5%;
width: 50px;
height: 70px;
z-index: 10;
list-style: none;
margin: 0;
padding: 0;
filter: blur(10px) opacity(0);
transition: filter 0.75s , transform 0.75s;
transition-delay: 0.1s;
}
#liese_header .liese_nav_wrap .liese_nav_logowrap.on .liese_nav_logo {
filter: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul li {
width: 100%;
font-size: 16px;
margin: 3px auto;
filter: blur(10px) opacity(0);
transform: translate(0,30px) translateZ(0);
transition: filter 0.75s , transform 0.75s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap.on ul li {
transform: translate(0,0);
filter: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul li:nth-of-type(1) {
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap.on ul.menu_wrap li:nth-of-type(1) {
transition-delay: 0.2s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap.on ul.menu_wrap li:nth-of-type(2) {
transition-delay: 0.3s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap.on ul.menu_wrap li:nth-of-type(3) {
transition-delay: 0.4s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap.on ul.menu_wrap li:nth-of-type(4) {
transition-delay: 0.5s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap.on ul.menu_wrap li:nth-of-type(5) {
transition-delay: 0.6s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li a {
font-size: 20px;
font-family: 'FuturaLTPro-Medium','FP-KoburinaGoStdN-W6', sans-serif;
color: #333;
padding: 5px 0;
display: block;
text-decoration: none;
letter-spacing: 0.1em;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 auto;
padding: 0;
border-top: 1px solid #D4D4D4;
border-bottom: 1px solid #D4D4D4;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li {
width: 50%;
margin: 3px auto 3px 0;
border-bottom: 1px solid #D4D4D4;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li.product01 a {
background: url("/content/dam/sites/kao/www-kao-co-jp/liesecolor/common/nav_img01.png") left center no-repeat;
background-size: 58px 52px;
padding-left: 58px;
height: 60px;
display: flex;
align-items: center;
text-decoration: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li.product02 a {
background: url("/content/dam/sites/kao/www-kao-co-jp/liesecolor/common/nav_img02.png") left center no-repeat;
background-size: 58px 52px;
padding-left: 58px;
height: 60px;
display: flex;
align-items: center;
text-decoration: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li.product03 a {
background: url("/content/dam/sites/kao/www-kao-co-jp/liesecolor/common/nav_img03.png") left center no-repeat;
background-size: 58px 52px;
padding-left: 58px;
height: 60px;
display: flex;
align-items: center;
text-decoration: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li.product04 a {
background: url("/content/dam/sites/kao/www-kao-co-jp/liesecolor/common/nav_img04.png") left center no-repeat;
background-size: 58px 52px;
padding-left: 58px;
height: 60px;
display: flex;
align-items: center;
text-decoration: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li.product05 a {
background: url("/content/dam/sites/kao/www-kao-co-jp/liesecolor/common/nav_img05.png") left center no-repeat;
background-size: 58px 52px;
padding-left: 58px;
height: 60px;
display: flex;
align-items: center;
text-decoration: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li:last-child {
border: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li a {
font-size: 14px;
line-height: 1.3;
font-family: 'FP-KoburinaGoStdN-W6', sans-serif;
color: #333;
padding: 5px 0;
letter-spacing: 0.1em;
}
@media only screen and (max-width: 350px) {
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li a {
font-size: 12px;
}
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.sns_wrap li {
width: 40px;
margin: 0;
transition-delay: 0.3s;
}


/*PC*/
@media only screen and (min-width: 1025px) {
#liese_header .liese_nav_wrap .liese_nav_logo {
position: absolute;
top: 50%;
left: 20%;
width: 160px;
height: 224px;
transform: translate(-50%,-50%);
filter: blur(10px) opacity(0);
transition: filter 0.75s , transform 0.75s;
transition-delay: 0.1s;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap {
align-content: center;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul li {
margin: 8px auto;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap {
width: 50%;
margin: 0 10% 0 auto;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li {
width: 33.3%;
margin: 3px 0;
border-bottom: 1px solid #D4D4D4;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.menu_wrap li ul.lineup_wrap li:nth-child(4) {
border: none;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.sns_wrap {
display: flex;
width: 50%;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
list-style: none;
position: static;
margin: 0 10% 0 auto;
padding: 0;
}
#liese_header .liese_nav_wrap .liese_nav_menuwrap ul.sns_wrap li {
width: 50px;
margin: 20px 0 0 20px;
transition-delay: 0.3s;
}
}

/*SP lamdscape*/
@media (orientation: landscape) and (max-height: 450px) {

}