@charset "utf-8";
html,
body{
width:100%;
height:100%;
padding:0;
border:none;
}
body{
background-color: #fff;
overflow-wrap: break-word;
}
article
,header {
background-color: #fff;
width:100%;
max-width:100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
z-index: 2;
}

:root {
--red:#BD7259;
--black:#000;
--brown:#544431;
--darkbrown:#4F4235;
--middlebrown:#7A573A;
--lightbrown:#A88761;
--brown30:#E5DBCF;
--brown10:#F6F3EF;
}


/* COMMON */
.bg_white {background: #FFF;}
.bg_beigue {background: #F1E9E4;}
.bg_brown10 {background: var(--brown10);}

/* text */
.en {font-family: var(--font-family-en);}
.min {
font-family: var(--font-family-min);
font-weight: 500;
}
.tblack {color: var(--black);}
.tred {color: var(--red);}
.tbrown{color: var(--lightbrown);}
.t18 {font-size: min(3.2vw,var(--18px));}
.t20 {font-size: min(3.6vw,var(--20px));}
.t22 {font-size: min(4vw,var(--22px));}
.medium {font-weight: 500;}


.anchor {
display: block;
padding-top: 40px;
margin-top: -40px;
}

.underline{
border-bottom: var(--brown) dotted 1px;
display: inline-block;
}

/* title */
.title_24_min {
font-family: var(--font-family-min);
font-size: min(4vw,var(--24px));
}
.title_26_min {
font-family: var(--font-family-min);
font-size: min(5vw,26px);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 1.6;
}
.title_30_min {
font-family: var(--font-family-min);
font-size: min(5.2vw,30px);
font-weight: 700;
line-height: 1.5;
}
.title_40_min {
padding-top: min(6vw,40px);
border-top: 4px double #CBB69F;
text-align: center;
font-family: var(--font-family-min);
font-size: min(8vw,40px);
font-weight: 500;
line-height: 1.5;
}
.title_40_min > small {
display: block;
text-align: center;
font-size: 60%;
}

.title_en {
text-align: center;
font-size: min(3.6vw,var(--22px));
letter-spacing: 0.4em;
}
.title_en > .en {
display: block;
text-align: center;
color: var(--lightbrown);
font-size: 180%;
font-weight: 600;
letter-spacing: 0.04em;
}


/* parts */
.container {
position: relative;
padding: min(6vw,60px) 0;
}
hr { /* reset */
height: 0;
margin: 0;
padding: 0;
border: 0;
display: block;
width: 100%;
}
hr.period {
margin:min(5vw,30px) 0;
border-top: 1px solid var(--brown30);
height: 1px;
}
.wrapper > hr {
margin:min(5vw,30px) auto;
width: calc(100% - 40px);
}
hr.double {
margin:min(5vw,30px) 0;
height: 4px;
border-top: 1px solid var(--brown30);
border-bottom: 1px solid var(--brown30);
}

video {
display: block;
top:0;
width: 100%;
max-width: 100%;
height: auto;
}
.basic_list li {
position: relative;
padding: 2px 0 2px 1rem;
}
.basic_list li:before {
content: "・";
position: absolute;
top:2px;
left: 0;
}
.photo-plus-deep-lift .all {
background: url(../images/fv_bg.jpg) no-repeat center top;
background-size: cover;
}
.photo-plus-deep-lift .all > article {
position: relative;
background: #FFF;
max-width: 660px;
margin: 0 auto;
}
.movie_iframe {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.movie_iframe > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* link */
.other:after {
content: "";
display: inline-block;
margin-left: 10px;
width: 16px;
height: 12px;
background: url(../images/icon_other.svg) no-repeat center center;
background-size: 100%;
}
.link_underline {
text-decoration: underline;
}

.caption > .flex > em {
display: block;
width: min(6.8vw,30px);
}
.caption > .flex > span {
width: calc(100% - 30px);
}


@media screen and (min-width:660px) {
.photo-plus-deep-lift .all {
background-attachment: fixed;
}
.photo-plus-deep-lift article {
box-shadow: 0px 5px 20px 10px rgba(128, 95, 72, 0.2);
}
.title_border {
margin-bottom: 2rem;
padding: 10px 0;
}
.text-center-pc  {
text-align: center;
}
.wrapper > hr {
width: calc(100% - 60px);
}

}/* min-width:660px */





/* fv */
.fv .head {
padding:0 min(12vw,80px);
background: url(../images/fv_head_bg.jpg) no-repeat center center;
background-size: cover;
text-align: center;
}
.fv .main {
position: relative;
}
.fv .main > .fv_logo {
position: absolute;
top: 20px;
left:30px;
width: min(25vw,182px);
}
.fv .main > h1 {
position: absolute;
top:min(16vw,105px);
left:50%;
translate: -50%;
width: min(75.7vw,500px);
}
.fv .bottom {
position: relative;
background: linear-gradient(0deg, #544431 0%, #735D43 100%);
color: #fff;
padding-bottom: 20px;
}
.fv .bottom .care {
text-align: center;
}


/* TROUBLE */
#trouble {
background: #ECEDEE url(../images/trouble_bg.jpg) no-repeat left top;
background-size: 100%;
}

/* ANSWER */
#answer {
background: #ECEDEE;
}

/* LIFTACARE */
#liftcare {
position: relative;
background: #DBD1C1 url(../images/liftcare_bg.jpg) no-repeat center top;
background-size: 100%;
z-index: 1;
}
#liftcare:after {
position: absolute;
bottom: 0;
left:50%;
translate: -50%;
content: "";
display: block;
width: min(96%,635px);
height: min(20vw,110px);
background: url(../images/liftcare_bottom-text.svg) no-repeat center bottom -1px;
background-size: 100%;
z-index: -1;
}
h2.head_yaman {
margin-bottom: min(6vw,40px);
font-family: var(--font-family-min);
font-weight: 500;
font-size: min(8.6vw,52px);
letter-spacing: -0.06em;
line-height: 1.4;
}
#liftcare h2.head_yaman .sup {
display: inline-block;
margin: 0 5px 0 2px;
font-size: min(3vw,16px);
translate: 0 -10px;
margin-bottom: -10px;
}
#liftcare h3.title_26_min + .min {
margin-top: 2rem;
font-size: min(3.2vw,19px);
line-height: 1.9;
letter-spacing: -0.02em;
}
#liftcare .title_24_min {
margin-bottom: .5rem;
font-size: min(3.7vw,var(--24px));
letter-spacing: normal;
}
#liftcare .title_24_min > .en {
display: inline-block;
padding-right: min(2vw,20px);
color: var(--lightbrown);
font-size: min(7vw,38px);
translate: 0 3px;
}
#liftcare .t22 {
font-size: min(3.6vw,var(--22px));
}

#liftcare .bg_shine {
position: relative;
z-index: 0;
}
#liftcare .bg_shine:after {
position: absolute;
top:-10vw;
left:50%;
translate: -50%;
content: "";
display: block;
width: 100%;
height: min(60vw,400px);
background: radial-gradient(circle at center, #FFF 0, #FFF 20%, transparent 52%, transparent 100%);
z-index: -1;
}


@media screen and (min-width: 660px) {
#liftcare .bg_shine:after {
top:-55px;
}
}



/* BASECARE */
#basecare .title_40_min {
border-top: none;
padding: 1rem 0;
font-size: min(6.8vw,40px);
}
#basecare .title_26_min.tred {
margin-bottom: .6rem;
font-size: min(4.5vw,26px);
font-weight: 700;
}

#basecare .title_26_min.tred > .box {
display: inline-block;
margin-bottom: .5rem;
padding: min(3.6vw,7.8px) min(7vw,14px);
background: var(--red);
font-family: var(--font-family);
font-weight: 600;
color: #FFF;
line-height: 1;
letter-spacing: 0.05em;
font-size: min(3.6vw,19px);
border-radius: 4px;
}
#basecare .box_title {
display: inline-block;
padding: 5px 10px;
background: #bb7357;
color: #FFF;
font-size: min(3.6vw,var(--20px));
font-weight: 500;
line-height: 1;
}
#basecare .box_red {
display: inline-block;
padding: 3px 5px;
background: var(--red);
line-height: 1.2;
color: #FFF;
font-weight: 700;
}
#basecare .basecare_conclution {
background: url(../images/basecare_bg-drop.jpg) no-repeat center bottom;
background-size: 100%;
}
#basecare .basecare_conclution .title_26_min {
font-weight: 500;
}
#basecare .basecare_conclution .title_26_min .tred {
background:linear-gradient(transparent 60%, #F3CDCD 60%);
}
#basecare .basecare_conclution p.title_26_min {
margin: min(10vw,40px) 0 min(14vw,80px);
}






/* HOWTO */
#howto .bg_brown10 {
padding-bottom: min(6vw,60px);
}
.howto_head {
margin-top: min(6vw,60px);
background: var(--lightbrown);
color: #FFF;
}
.howto_head > .en {
display: block;
padding: 3px;
background: var(--darkbrown);
text-align: center;
}
.howto_head > .en > img {
display: inline-block;
width: min(35vw,170px);
}
.howto_head h3 {
padding: min(3vw,20px);
text-align: center;
font-size: min(4vw,22px);
letter-spacing: 0.2em;
line-height: 1.4;
}
.howto_head h3 > strong.min {
font-size: min(8vw,42px);
letter-spacing: -0.1em;
}

#howto .box_cosme dl {
display: flex;
margin-top: 2rem;
}
#howto .box_cosme dt,
#howto .box_cosme dd {
padding:min(3vw,20px);
box-sizing: border-box;
align-content: center;
}
#howto .box_cosme dt {
background:var(--lightbrown);
text-align: center;
width: 25%;
}
#howto .box_cosme dd {
padding:min(2vw,20px) min(1.5vw,20px);
display: flex;
align-items: center;
justify-content: center;
width: 75%;
background: #FFF;
}
#howto .box_cosme dd > figure {
width: min(28%,125px);
}
#howto .box_cosme dd > .min {
letter-spacing: -0.05em;
padding-left: min(1.5vw,15px);
font-size: min(4vw,var(--24px));
line-height: 1.5;
}
#howto .box_cosme .trigger {
display: flex;
justify-content: center;
align-items: center;
padding: 3px;
background: var(--middlebrown);
color: #FFF;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#howto .box_cosme .trigger:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
rotate: 45deg;
translate: 5px -2px;
}
#howto .box_cosme .trigger.current:after {
rotate:-135deg;
translate: 8px 2px;
}
#howto .box_cosme .open_content {
display: none;
background: #FFF;
}
#howto .box_cosme .open_content a {
position: relative;
display: flex;
align-items: center;
align-content: center;
gap: 10px;
width: 100%;
padding: min(3vw,30px);
box-sizing: border-box;
}
#howto .box_cosme .open_content a:after {
position: absolute;
top:50%;
translate: 0 -50%;
right:min(3vw,20px);
content: "";
display: block;
width: min(5vw,30px);
height: min(5vw,30px);;
border-top: 2px solid var(--brown30);
border-right: 2px solid var(--brown30);
rotate:45deg;
}
#howto .box_cosme .open_content a > figure {
width: min(20%,90px);
}
#howto .box_cosme .open_content a > div {
width:calc(80% - 5px);
}
#howto .box_cosme .open_content h3 + p {
margin-top: min(1vw,8px);
margin-right: 22px;
font-size: min(2.8vw,var(--16px));
}
#howto .box_cosme .open_content a + a {
border-top: 1px solid var(--brown30);
}
#howto .box_cosme h3 > .box {
display: inline-block;
margin-left: min(1vw,8px);
padding: .4rem .8rem;
border:1px solid var(--darkbrown);
font-size: 70%;
line-height: 1;
}
#howto .box_cosme .tag {
display: inline-block;
margin:0 3px 5px 0;
padding: min(1.5vw,4px) min(2vw,8px);
background: var(--brown10);
color: var(--middlebrown);
font-size: min(2.4vw,12px);
font-weight: 500;
line-height: 1.2;
border-radius: 30px;
}
#howto .care_num {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: min(3vw,30px) 0 min(2vw,20px);
background: var(--brown30);
color: var(--middlebrown);
border-radius: 30px;
}
#howto .care_num .en {
position: relative;
display: block;
padding-right:min(3vw,20px);
font-size:min(3vw,14px);
font-weight: 600;
line-height: 1;
}
#howto .care_num .en:after {
position: absolute;
top:50%;
translate: 0 -50%;
right:0;
content: "";
display: block;
width: 1px;
height: calc(100% - 5px);
background: var(--middlebrown);
}
#howto .care_num .en > strong {
display: inline-block;
vertical-align: middle;
padding-left: 8px;
font-size: 214%;
}
#howto .care_num .en > small {
display: inline-block;
position: relative;
translate: 0 2px;
}
#howto .care_num > span {
display: block;
padding-left: min(3vw,20px);
font-size: min(5vw,var(--22px));
font-weight: 500;
}






/* LINEUP */
#lineup {
background: var(--brown);
color: #FFF;
}
#lineup h2.title_40_min {
margin-bottom: min(4vw,30px);
padding-top: 0;
border-top: none;
font-weight: 600;
font-size: min(6.2vw,40px);
}
#lineup h2.title_40_min > strong {
background:linear-gradient(transparent 60%, var(--lightbrown) 60%);
}
.btn_purchase .addcart,
.btn_buy {
display: block;
width: 100%;
height: min(20vw,135px);
box-sizing: border-box;
text-align: center;
background: url(../images/btn_purchase.svg) no-repeat center center;
background-size: auto 100%;
border-radius: 10px;
line-height: 1;
box-shadow: 0 6px 0 rgba(0,0,0,.1);
cursor: pointer;
transition: opacity .2s;
text-indent: -9999px;
}
.btn_purchase .addcart:hover,
.btn_buy :hover  {
opacity: .8;
}
.btn_purchase.thin .addcart,
.btn_buy {
height: min(18vw,120px);
}
.btn_other {
display: block;
padding: min(3vw,15px);
background: #FFF;
border-radius: 10px;
color: #6B322F;
font-weight: 600;
font-size: var(--20px);
text-align: center;
}
.btn_other:after {
content: "";
display: inline-block;
vertical-align: middle;
margin-left: 10px;
width: min(5vw,25px);
height: 22px;
background: url(../images/icon_other.svg) no-repeat center center;
background-size: 100%;
}
.btn_buy.gold {
    background-image: url(../images/btn_purchase_gold.png);
    box-shadow: none;
    height: min(18vw,122px);
}
.product_info {
font-family: var(--font-family-min);
}
.product_info .border_head {
padding: .7rem 0;
font-size: min(4vw,var(--22px));
border-top: 1px solid var(--lightbrown);
border-bottom: 1px solid var(--lightbrown);
}
.product_info .title_30_min {
margin: 1rem 0 min(3vw,20px);
font-size: min(4.8vw,30px);
font-weight: 600;
letter-spacing: -0.05em;
}
.product_info .title_30_min > .box {
display: inline-block;
margin-left: min(1vw, 8px);
padding: .4rem .8rem;
border: 1px solid #FFF;
font-size: 70%;
line-height: 1;
}
.product_info .price {
color: #CBB7A0;
font-size: min(6vw,40px);
line-height: 1;
}
.product_info .price > span {
display: inline-block;
font-size: 50%;
}

@media screen and (min-width:660px) {
.btn_purchase .addcart,
.btn_buy {
border-radius: 15px;
}
.product_info .title_30_min {
letter-spacing: normal;
}

}/* min-width:660px */





/* QA */
#qa dl + dl {
margin-top: 2rem;
}
#qa dt {
position: relative;
padding: 10px 30px 10px 40px;
box-sizing: border-box;
border: 1px solid var(--brown30);
font-size: min(4vw,var(--20px));
color: var(--darkbrown);
line-height: 1.5;
cursor: pointer;
transition: opacity .2s;
}
#qa dt:hover {
opacity: .8;
}
#qa dt:before {
position: absolute;
top: 12px;
left: 10px;
content: "Q";
font-family: var(--font-family-en);
font-size: var(--22px);
color: var(--lightbrown);
font-weight: 600;
line-height: 1;
}
#qa dt:after {
position: absolute;
top:45%;
right:15px;
content: "";
display: block;
width: 10px;
height: 10px;
border-right:2px solid var(--brown30);
border-bottom:2px solid var(--brown30);
transform: rotate(45deg) translateY(-50%);
}
#qa dt.close:after {
top:55%;
border:none;
border-left:2px solid var(--brown30);
border-top:2px solid var(--brown30);
}
#qa dd + dt {
margin-top: 10px;
}
#qa dd {
display: none;
padding: 10px 0;
font-size: min(3.6vw,var(--18px));
color: var(--darkbrown);
line-height: 1.6;
}
#qa dt strong,#qa dd strong {
font-weight: 700;
}



@media screen and (min-width: 660px) {
#qa dt {
padding: 12px 45px;
}
#qa dt:before {
top:14px;
}
#qa dt:after {
width: 13px;
height: 13px;
right:20px;
}
#qa dd + dt {
margin-top: 15px;
}
#qa dd {
padding: 20px 0;
}

}/*qa min-width:660px */




/* SPEC */
.list_spec {
display: flex;
flex-wrap: wrap;
border-top: 1px solid var(--brown30);
width: 100%;
}
.list_spec dt,
.list_spec dd {
padding: .6rem 0;
border-bottom: 1px solid var(--brown30);
font-size:min(3.4vw,19px);
}
.list_spec dt {
width: 25%;
font-weight: 500;
}
.list_spec dd {
width: 75%;
}

@media screen and (min-width:660px) {
.list_spec dt {
width: 18%;
}
.list_spec dd {
width: 82%;
}

}/* min-width:660px */




/* footer */
.footer {
font-size: min(2.8vw,var(--16px));
}
.footer .footer_menu {
padding: 10px 0;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
text-align: center;
}
.footer .footer_menu a {
display: inline-block;
padding: 3px 0;
vertical-align: middle;
color: #333;
}
.footer .footer_menu a:after {
content: "";
display: inline-block;
margin: 0 5px;
width: 1px;
height: 12px;
background: var(--font-color);
transform: translateY(2px);
}
.footer .footer_menu a:last-child:after {
display: none;
}
.footer .copyright {
padding-bottom: 60px;
font-size: 90%;
}

@media screen and (min-width:660px) {
.footer .footer_menu {
padding: 15px 0;
}
.footer .footer_menu a {
font-size: var(--14px);
}
.footer .footer_menu a:after {
margin: 0 10px 0 15px;
transform: none;
}
.footer .copyright {
padding: 0;
font-size:80%;
}

}/* min-width:660px */





/* fixed btn */
.fixed_btn {
display: none;
position: fixed;
bottom: 0;
left:0;
width: 100%;
z-index: 100;
}

/* nav (SP only) */
.fixed_btn .fixed_nav_sp {
padding: 5px min(9vw,60px) 0;
box-sizing: border-box;
background : linear-gradient(180deg, #BD7259 0%, #A44F32 100%);
}
.fixed_btn .fixed_nav_sp > a {
display: block;
width: 100%;
text-align: center;
}

/* nav (PC only) */
.fixed_btn .fixed_nav_pc {
display: none;
position: relative;
z-index: 1;
}


@media screen and (min-width:980px) {
.fixed_btn {
display: block;
position: fixed;
bottom:0;
left:50%;
transform: translateX(-50%);
width: 100%;
max-width: 1400px;
z-index: 1;
}
.fixed_btn .fixed_nav_sp {
display: none;
}
.fixed_btn .fixed_nav_pc {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.fixed_nav_pc > div {
padding-bottom: 3rem;
box-sizing: border-box;
width: calc(50% - 350px);
max-width: 330px;
}
.fixed_nav_pc h2.en {
font-size: 20px;
margin:3rem 0 .5rem;
font-weight: 500;
}
.fixed_nav_pc > div.left_nav {
padding-left: 20px;
padding-right: min(2vw, 40px);
font-size:min(3vw,21px);
color: #FFF;
}
.fixed_nav_pc > div.left_nav a {
display: block;
padding: .8rem 1rem;
box-sizing: border-box;
background: #FFF;
font-family: var(--font-family-min);
font-weight: 600;
font-size: min(1.3vw, 22px);
color: var(--middlebrown);
}
.fixed_nav_pc > div.left_nav a + a {
margin-top: 10px;
}
.fixed_nav_pc > div.right_nav {
padding-right: 20px;
padding-left: min(2vw, 40px);
}

}/* min-width:660px */


@media screen and (min-width:1300px) {
.fixed_nav_pc > div.left_nav {
padding-bottom: 60px;
padding-right: 0;
}
.fixed_nav_pc > div.right_nav {
padding: 0 0 60px;
}

}/* min-width:1300px */

@media screen and (max-height: 600px) and (min-width: 980px) {
.fixed_nav_pc > div.left_nav {
padding-bottom: 20px;
}
.fixed_nav_pc > div.right_nav {
padding: 0 0 20px;
}
.fixed_nav_pc h2.en {
font-size: 20px;
margin:.5rem 0 .5rem;
}
}







/* Edge(EdgeHTML) */
_:-ms-lang(x)::backdrop, .index_list a > figure img {
height: auto;
}

_:lang(x)::-ms-, .index_list a > figure img {
height: auto;
}




/* guide */
#guide.container {
    padding: 40px 15px 30px;
    background: #FFF;
    color: #333;
}
#guide h2{
    font-size: min(7.7vw,var(--36px));
    text-align: center;
    line-height: 0.8;
    margin-bottom: 30px;
}
#guide h2 span{
    font-size: 16px;
    letter-spacing: 2px;
}
#guide h3{
    font-size: min(3.6vw,var(--18px));
    border: 1px solid #333;
    border-radius: 5px;
    margin-top: 15px;
    padding: 5px;
    min-height: 50px;
    line-height: 1.5;
    text-align: center;
    font-weight: 500;
    box-sizing: border-box;
    position: relative;
}
#guide h3.one-line{
    display: flex;
    align-items: center;
    justify-content: center;
}
#guide h3.link::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-48%);
    width: 20px;
    height: 20px;
    background: url(../images/external_link-icon.png);
    background-size: cover;
}
#guide h3 a{
    color: #333;
}
#guide p {
    font-size: min(3.2vw,var(--16px));
    padding: 5px 0;
}

@media screen and (min-width:660px) {
    #guide.container {
        padding: 20px 30px 30px;
    }
    #guide h3{
        min-height: 60px;
        margin-top: 20px;
    }
    #guide h3.link::after{
        width: 25px;
        height: 25px;
        right: 15px;
    }
}/* min-width:660px */


.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  place-items: center;
  z-index: 100000;
}

.popup-inner {
  position: relative;
  max-width: 440px;
  padding: 0 20px;
}

.popup-close {
  position: absolute;
  top: -40px;
  right: -20px;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
@media screen and (max-width:500px) {
  .popup-close {
    top: -40px;
    right: 20px;
  }
}

.popup-banner {
  display: block;
  text-decoration: none;
}