/* ///////////////////////////////////////////////// 1.common setting 	- css reset
	- font family
	- font size
	- image float -align
	- tags base setting
 2.universal class - font size
	- float clear - text align - vertical align - margin set
///////////////////////////////////////////////// */
/* common setting (ver 2.1)
==================================================*/
/* css reset
------------------------------------------------*/
body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, caption, form, fieldset, input, textarea, select, pre, address, blockquote, embed, object { margin: 0px; padding: 0px; }

/* font family
------------------------------------------------*/
body, form textarea { font-family: "hiragino kaku gothic pro", osaka, "ms p gothic", sans-serif; }

/* body
------------------------------------------------*/
body { color: #333; font-size: 62.5%; }

/* font size
------------------------------------------------*/
/*universal class > font size > ftmedium*/
h1, h2, h3, h4, h5, h6, p, dt, dd, li, caption, fieldset, input, textarea, select, pre, address, blockquote { font-size: 1.2em; line-height: 1.5em; }

/*universal class > font size > ftMedium*/
ul li ul li { font-size: 1.0em; }

table td table td { font-size: 1.0em; }

dl dd ul li { font-size: 1.0em; }

dl dd p { font-size: 1.0em; }

/* image float
------------------------------------------------*/
.imageleft { float: left; margin: 5px 10px 5px 0px; }

.imageright { float: right; margin: 5px 0px 5px 10px; }

/* align
------------------------------------------------*/
.txtalignl { text-align: left   !important; }

.txtalignc { text-align: center !important; }

.txtalignr { text-align: right  !important; }

/* tags base setting
------------------------------------------------*/
/*h*/
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

/*p*/
p { font-weight: normal; }

/*em || strong*/
em, strong { font-style: normal; font-weight: bold; }

/*ul || ol*/
ul, ol { line-height: 0px; }

ul { list-style: none; }

li { display: list-item; }

li img { vertical-align: bottom; }

/*dl*/
dl { line-height: 0px; }

dt img, dd img { vertical-align: bottom; }

/*table*/
table { border-collapse: separate; border-spacing: 0; empty-cells: show; }

/*img*/
img { border: 0px; }

/*form*/
form { font-weight: normal; }

/* link
------------------------------------------------*/
a { outline: none; }

a:link { color: #404040; }

a:visited { color: #666666; }

a:hover { color: #898989; text-decoration: none; }

a:active, a:focus { color: #898989; }

/* universal class (ver 1.5)
==================================================*/
/* font size
------------------------------------------------*/
/*common setting > font size > ftmedium*/
.ftsmallxx, table.ftsmallxx th, table.ftsmallxx td { font-size: 0.7em      !important; line-height: 1.5em !important; }

.ftsmallx, table.ftsmallx th, table.ftsmallx td { font-size: 0.8em      !important; line-height: 1.5em !important; }

.ftsmall, table.ftsmall th, table.ftsmall td { font-size: 0.9em      !important; line-height: 1.5em !important; }

.ftmedium, table.ftmedium th, table.ftmedium td { font-size: 1.0em     !important; line-height: 1.6em !important; }

.ftlarge, table.ftlarge th, table.ftlarge td { font-size: 1.1em     !important; line-height: 1.6em !important; }

.ftlargex, table.ftlargex th, table.ftlargex td { font-size: 1.2em     !important; line-height: 1.6em !important; }

.ftlargexx, table.ftlargexx th, table.ftlargexx td { font-size: 1.3em     !important; line-height: 1.6em !important; }

.ftlargexxx, table.ftlargexxx th, table.ftlargexxx td { font-size: 1.6em     !important; line-height: 1.9em !important; }

/*common setting > font size > ftmedium*/
.ft10, table.ft10 th, table.ft10 td { font-size: 1.1em      !important; line-height: 1.5em !important; }

.ft12, table.ft12 th, table.ft12 td { font-size: 1.25em      !important; line-height: 1.5em !important; }

.ft14, table.ft14 th, table.ft14 td { font-size: 1.42em     !important; line-height: 1.6em !important; }

.ft16, table.ft16 th, table.ft16 td { font-size: 1.6em     !important; line-height: 1.6em !important; }

.ft18, table.ft18 th, table.ft18 td { font-size: 1.8em     !important; line-height: 1.6em !important; }

.ft20, table.ft20 th, table.ft20 td { font-size: 2.0em     !important; line-height: 1.6em !important; }

/* align (with table)
------------------------------------------------*/
.txtalignl, table.txtalignl th, table.txtalignl td { text-align: left   !important; }

.txtalignc, table.txtalignc th, table.txtalignc td { text-align: center !important; }

.txtalignr, table.txtalignr th, table.txtalignr td { text-align: right  !important; }

/* image float
------------------------------------------------*/
.imageleft { float: left; margin: 0px 15px 15px 0px; }

.imageright { float: right; margin: 0px 0px 15px 15px; }

/* valign (table)
------------------------------------------------*/
.valignt, table.valignt th, table.valignt td { vertical-align: top    !important; }

.valignm, table.valignm th, table.valignm td { vertical-align: middle !important; }

.valignb, table.valignb th, table.valignb td { vertical-align: bottom !important; }

/* float clear
------------------------------------------------*/
br.clearfloat, img.clearfloat { clear: both; height: 0px; }

div.clearfloat { clear: both; font-size: 0px; line-height: 0px; height: 0px; width: 0px; }

/* margin set
------------------------------------------------*/
/*reset*/
.margreset { margin: 0px !important; }

/*0px*/
.margt00 { margin-top: 0px !important; }

.margr00 { margin-right: 0px !important; }

.margb00 { margin-bottom: 0px !important; }

.margl00 { margin-left: 0px !important; }

/*5px*/
.margt05 { margin-top: 5px !important; }

.margr05 { margin-right: 5px !important; }

.margb05 { margin-bottom: 5px !important; }

.margl05 { margin-left: 5px !important; }

/*10px*/
.margt10 { margin-top: 10px !important; }

.margr10 { margin-right: 10px !important; }

.margb10 { margin-bottom: 10px !important; }

.margl10 { margin-left: 10px !important; }

/*15px*/
.margt15 { margin-top: 15px !important; }

.margr15 { margin-right: 15px !important; }

.margb15 { margin-bottom: 15px !important; }

.margl15 { margin-left: 15px !important; }

/*20px*/
.margt20 { margin-top: 20px !important; }

.margr20 { margin-right: 20px !important; }

.margb20 { margin-bottom: 20px !important; }

.margl20 { margin-left: 20px !important; }

/*25px*/
.margt25 { margin-top: 25px !important; }

.margr25 { margin-right: 25px !important; }

.margb25 { margin-bottom: 25px !important; }

.margl25 { margin-left: 25px !important; }

/*30px*/
.margt30 { margin-top: 30px !important; }

.margr30 { margin-right: 30px !important; }

.margb30 { margin-bottom: 30px !important; }

.margl30 { margin-left: 30px !important; }

/*40px*/
.margt40 { margin-top: 40px !important; }

.margr40 { margin-right: 40px !important; }

.margb40 { margin-bottom: 40px !important; }

.margl40 { margin-left: 40px !important; }

/*50px*/
.margt50 { margin-top: 50px !important; }

.margr50 { margin-right: 50px !important; }

.margb50 { margin-bottom: 50px !important; }

.margl50 { margin-left: 50px !important; }

/*60px*/
.margt60 { margin-top: 60px !important; }

.margr60 { margin-right: 60px !important; }

.margb60 { margin-bottom: 60px !important; }

.margl60 { margin-left: 60px !important; }

/*65px*/
.margt65 { margin-top: 65px !important; }

.margr65 { margin-right: 65px !important; }

.margb65 { margin-bottom: 65px !important; }

.margl65 { margin-left: 65px !important; }

/* width
==========================================================*/
/*w350*/
.w350 { width: 350px; }

/*w300*/
.w300 { width: 300px; }

/*w150*/
.w150 { width: 150px; }

/* a.hover
==========================================================*/
/*a.hover*/
html { overflow: hidden; }

body { background-color: #fff; }
body.loaded { background-image: url("../../image/sky_pattern.jpg"); background-repeat: repeat; background-position: 0 0; background-size: 1600px auto; animation: bgscroll 80s linear infinite; }

@keyframes bgscroll { 0% { background-position: 0 0; }
  100% { background-position: -1599px 0; } }
html, body, #main { width: 100%; height: 100%; min-height: 875px; min-width: 1200px; position: relative; }

#main { text-align: center; }

body, div, p, dl, dt, dd, ul, ol, li { line-height: 1; }

button:focus { outline: 0; }

.zoomContainer .zoomLens { background-color: #FFF; }

[data-id], .eyecatch { display: table; height: 100%; height: 100vh; left: -100%; min-height: 875px; min-width: 1200px; position: absolute; width: 100%; width: 100vw; }

[data-id] .left-wrap, [data-id] .right-wrap { display: table-cell; vertical-align: middle; width: 50%; }
[data-id] .left-wrap { text-align: right; }
[data-id] .right-wrap { text-align: left; }
[data-id] .cell-wrap { display: table-cell; text-align: center; vertical-align: middle; width: 100%; }

[data-id="menuPalette"], [data-id="menuEyes"], [data-id="menuEyeliner"], [data-id="menuCheeks"], [data-id="menuStick"], [data-id="menuLips"], [data-id="menuGlow"], [data-id="menuGloss"], [data-id="menuNail"] { background-position-x: center; background-size: 100% 100%; }

.hover img { transition: opacity .6s; }
.hover:hover img { opacity: .6; }

#loading { background-color: #fff; display: table; width: 100%; height: 100%; opacity: 1; position: fixed; left: 0; top: 0; transition: all 1s; z-index: 50000; }
#loading p { display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; }
#loading p img { visibility: hidden; }
#loading.fadeout { opacity: 0; }

#header { left: 0; position: absolute; top: 0; transition: all 1s; width: 100%; z-index: 10; }
#header.hide { top: -100px; }
#header h1, #header .button-toggle-navigator { position: absolute; }
#header h1 { left: 25px; top: 16px; }
#header .button-toggle-navigator { right: 0; top: 0; }

#footer { bottom: 0; left: 0; position: absolute; transition: all 1s; width: 100%; z-index: 10; }
#footer.hide { bottom: -70px; }
#footer .logo-20th, #footer .copyright { position: absolute; }
#footer .logo-20th { bottom: 17px; left: 25px; }
#footer .copyright { bottom: 29px; display: flex; justify-content: space-between; right: 18px; width: 150px; }

#navigator { position: absolute; right: 0; top: 0; transition: all 1s; z-index: 80000; }
#navigator.hide { top: -100px; }
#navigator.opened { width: 100%; height: 100%; }
#navigator.opened .navContent { display: table; opacity: 1; }
#navigator .navContent { background-color: rgba(255, 255, 255, 0.9); display: none; width: 100%; height: 100%; position: absolute; z-index: 10; opacity: 0; }
#navigator .navContent > ul { display: table-cell; text-align: center; vertical-align: middle; overflow: hidden; }
#navigator .navContent .img02 { margin-top: 47px; }
#navigator .navContent .img02 dd { margin-top: 34px; }
#navigator .navContent .img02 ul { display: flex; justify-content: center; }
#navigator .navContent .img02 ul:nth-of-type(2) { margin-top: 56px; }
#navigator .navContent .img02-02 { margin-left: 34px; }
#navigator .navContent .img02-03 { margin-left: 24px; }
#navigator .navContent .img02-04 { margin-left: 32px; }
#navigator .navContent .img02-05 { margin-left: 10px; margin-right: 9px; }
#navigator .navContent .img02-07 { margin-left: 25px; }
#navigator .navContent .img02-08 { margin-left: 22px; }
#navigator .navContent .img02-09 { margin-left: 62px; }
#navigator .navContent .img03 { margin-top: 44px; }
#navigator .navContent .img04 { margin-top: 33px; }
#navigator .navContent .sns { margin-top: 54px; }
#navigator .navContent .sns ul { display: flex; justify-content: center; }
#navigator .navContent .sns ul li { margin-left: 14px; }
#navigator .navContent .sns ul li::nth-of-type(2) { margin-left: 19px; }
#navigator .toggleNavigator { background-color: #000; border: 0 none; cursor: pointer; padding: 0; position: absolute; right: 0; top: 0; z-index: 100; }

#position { margin-left: calc(50% - 100px); margin-top: 160px; position: absolute; z-index: 100; }
#position.hide { display: none; }
#position ul { display: flex; justify-content: space-between; width: 200px; }
#position li { background-color: #575757; }
#position li.current a { opacity: 0; }
#position a { background-color: #cfcfcf; display: block; height: 2px; width: 17px; transition: all .6s; }

#controller .left, #controller .right { background-color: #9fa0a0; display: block; height: 50px; opacity: 1; position: absolute; top: calc(50% - 25px); transition: all .6s; width: 40px; z-index: 10; }
#controller .left.hide, #controller .right.hide { opacity: 0; }
#controller .left.hide a, #controller .right.hide a { cursor: default; }
#controller .left a, #controller .right a { display: block; height: 50px; width: 40px; }
#controller.movie img { opacity: 0; }
#controller.movie .left { background-image: url("../../image/btn_controller_left_light.png"); }
#controller.movie .right { background-image: url("../../image/btn_controller_right_light.png"); }
#controller .left { left: 0; }
#controller .right { right: 0; }

#opening-movie { display: table; height: 100%; height: 100vh; position: relative; width: 100%; }
#opening-movie .table-cell-wrap { display: table-cell; text-align: center; vertical-align: middle; }
#opening-movie .table-cell-wrap .logo { margin-bottom: 200px; margin-top: 260px; }
#opening-movie .table-cell-wrap a { display: inline-block; }
#opening-movie video { left: 0; min-height: 100%; min-height: 100vh; min-width: 100%; min-width: 100vw; position: absolute; top: 0; z-index: -100; }

.eyecatch01, .eyecatch02 { background-position: center center; background-repeat: no-repeat; background-size: cover; }

.eyecatch01 { background-image: url("../../image/img_eyecatch01_01.jpg"); }

.eyecatch02 { background-image: url("../../image/img_eyecatch02_01.jpg"); }

[data-id="menuTop"] { background-color: #fff; }
[data-id="menuTop"] .left-wrap, [data-id="menuTop"] .right-wrap { display: table-cell; overflow: hidden; vertical-align: middle; width: 50%; }
[data-id="menuTop"] .left-wrap { text-align: right; }
[data-id="menuTop"] .right-wrap { text-align: center; }
[data-id="menuTop"] .img01 { background-image: url("../../image/img_top_01.jpg"); background-position: right 0; background-repeat: no-repeat; background-size: contain; display: inline-block; padding-top: 108.4%; width: 85%; }
[data-id="menuTop"] .img02, [data-id="menuTop"] .img03, [data-id="menuTop"] .img04 { width: 100%; }
[data-id="menuTop"] .img03 { margin-top: 50px; }
[data-id="menuTop"] .img03 span { background-image: url("../../image/img_top_03.jpg"); background-position: right 0; background-repeat: no-repeat; background-size: contain; display: inline-block; padding-top: 70.625%; width: 53.4%; }
[data-id="menuTop"] .img04 { margin-top: 20px; }

[data-id="menuConcept"] { background-color: #fff; }
[data-id="menuConcept"] .left-wrap, [data-id="menuConcept"] .right-wrap { display: table-cell; text-align: center; vertical-align: middle; width: 50%; }
[data-id="menuConcept"] .left-wrap { background-image: url("../../image/sky_pattern.jpg"); background-repeat: repeat; background-position: 0 0; background-size: 1600px auto; animation: bgscroll 80s linear infinite; }
[data-id="menuConcept"] .right-wrap { text-align: left; }
[data-id="menuConcept"] .img02, [data-id="menuConcept"] .img03 { margin-left: 60px; }
[data-id="menuConcept"] .img03 { margin-top: 53px; }

@keyframes bgscroll { 0% { background-position: 0 0; }
  100% { background-position: -1599px 0; } }
[data-id="menuPalette"] { background-image: url("../../image/bg_palette_01.png"); }
[data-id="menuPalette"] .left-wrap { padding-right: 125px; }
[data-id="menuPalette"] .right-wrap { padding-left: 9px; }
[data-id="menuPalette"] .btn-purchase { margin-top: 17px; }
[data-id="menuPalette"] .img03 { margin-top: 11px; }
[data-id="menuPalette"] .img04 { margin-top: 28px; }
[data-id="menuPalette"] .img05 { margin-top: 31px; }
[data-id="menuPalette"] .movie-lesson { margin-top: 56px; text-align: right; width: 453px; }

[data-id="menuEyes"] { background-image: url("../../image/bg_eyes_01.png"); }
[data-id="menuEyes"] .left-wrap { padding-right: 140px; }
[data-id="menuEyes"] .right-wrap { padding-left: 9px; }
[data-id="menuEyes"] .img02 { margin-top: 0px; }
[data-id="menuEyes"] .btn-purchase { margin-top: 18px; }
[data-id="menuEyes"] .img03 { margin-top: 11px; }
[data-id="menuEyes"] .img04 { margin-top: 28px; }
[data-id="menuEyes"] .img05 { margin-top: 32px; }
[data-id="menuEyes"] .movie-lesson { margin-top: 118px; text-align: right; width: 453px; }

[data-id="menuEyeliner"] { background-image: url("../../image/bg_eyeliner_01.png"); }
[data-id="menuEyeliner"] .left-wrap { padding-right: 220px; }
[data-id="menuEyeliner"] .right-wrap { padding-left: 9px; }
[data-id="menuEyeliner"] .img02 { margin-top: 0px; }
[data-id="menuEyeliner"] .btn-purchase { margin-top: 18px; }
[data-id="menuEyeliner"] .img03 { margin-top: 11px; }
[data-id="menuEyeliner"] .img04 { margin-top: 28px; }
[data-id="menuEyeliner"] .img05 { margin-top: 31px; }
[data-id="menuEyeliner"] .movie-lesson { margin-top: 88px; text-align: right; width: 453px; }

[data-id="menuCheeks"] { background-image: url("../../image/bg_cheeks_01.png"); }
[data-id="menuCheeks"] .left-wrap { padding-right: 119px; }
[data-id="menuCheeks"] .right-wrap { padding-left: 9px; }
[data-id="menuCheeks"] .img02 { margin-top: 0px; }
[data-id="menuCheeks"] .btn-purchase { margin-top: 18px; }
[data-id="menuCheeks"] .img03 { margin-top: 11px; }
[data-id="menuCheeks"] .img04 { margin-top: 28px; }
[data-id="menuCheeks"] .img05 { margin-top: 32px; }
[data-id="menuCheeks"] .movie-lesson { margin-top: 118px; text-align: right; width: 453px; }

[data-id="menuStick"] { background-image: url("../../image/bg_stick_01.png"); }
[data-id="menuStick"] .left-wrap { padding-right: 218px; }
[data-id="menuStick"] .right-wrap { padding-left: 9px; }
[data-id="menuStick"] .img02 { margin-top: 20px; }
[data-id="menuStick"] .btn-purchase { margin-top: 18px; }
[data-id="menuStick"] .img03 { margin-top: 11px; }
[data-id="menuStick"] .img04 { margin-top: 32px; }
[data-id="menuStick"] .img05 { margin-top: 33px; }
[data-id="menuStick"] .movie-lesson { margin-top: 101px; text-align: right; width: 453px; }

[data-id="menuLips"] { background-image: url("../../image/bg_lips_01.png"); }
[data-id="menuLips"] .left-wrap { padding-right: 219px; }
[data-id="menuLips"] .right-wrap { padding-left: 9px; }
[data-id="menuLips"] .img02 { margin-top: 0px; }
[data-id="menuLips"] .btn-purchase { margin-top: 19px; }
[data-id="menuLips"] .img03 { margin-top: 11px; }
[data-id="menuLips"] .img04 { margin-top: 26px; }
[data-id="menuLips"] .img05 { margin-top: 31px; }
[data-id="menuLips"] .movie-lesson { margin-top: 113px; text-align: right; width: 453px; }

[data-id="menuGlow"] { background-image: url("../../image/bg_glow_01.png"); }
[data-id="menuGlow"] .left-wrap { padding-right: 215px; }
[data-id="menuGlow"] .right-wrap { padding-left: 9px; }
[data-id="menuGlow"] .img02 { margin-top: 0px; }
[data-id="menuGlow"] .btn-purchase { margin-top: 20px; }
[data-id="menuGlow"] .img03 { margin-top: 11px; }
[data-id="menuGlow"] .img04 { margin-top: 26px; }
[data-id="menuGlow"] .img05 { margin-top: 30px; }
[data-id="menuGlow"] .movie-lesson { margin-top: 143px; text-align: right; width: 453px; }

[data-id="menuGloss"] { background-image: url("../../image/bg_gloss_01.png"); }
[data-id="menuGloss"] .left-wrap { padding-right: 102px; }
[data-id="menuGloss"] .right-wrap { padding-left: 9px; }
[data-id="menuGloss"] .img02 { margin-top: 0px; }
[data-id="menuGloss"] .img06 { margin-top: 45px; }
[data-id="menuGloss"] .btn-purchase { margin-top: 20px; }
[data-id="menuGloss"] .img03, [data-id="menuGloss"] .img07 { margin-top: 11px; }
[data-id="menuGloss"] .img04, [data-id="menuGloss"] .img08 { margin-top: 18px; }
[data-id="menuGloss"] .img05, [data-id="menuGloss"] .img09 { margin-top: 21px; }
[data-id="menuGloss"] .movie-lesson { margin-top: 14px; text-align: right; width: 453px; }

[data-id="menuNail"] { background-image: url("../../image/bg_nail_01.png"); }
[data-id="menuNail"] .left-wrap { padding-right: 211px; }
[data-id="menuNail"] .right-wrap { padding-left: 9px; }
[data-id="menuNail"] .img02 { margin-top: 0px; }
[data-id="menuNail"] .btn-purchase { margin-top: 19px; }
[data-id="menuNail"] .img03 { margin-top: 11px; }
[data-id="menuNail"] .img04 { margin-top: 25px; }
[data-id="menuNail"] .img05 { margin-top: 30px; }
[data-id="menuNail"] .movie-lesson { margin-top: 102px; text-align: right; width: 453px; }

[data-id="menuMovie"] { background-color: #fff; background-image: url("../../image/bg_movie_01.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
[data-id="menuMovie"] .img01 { margin-top: 8px; }
[data-id="menuMovie"] .img02 { margin-top: 18px; }

[data-id="menuItem"] { background-color: #fff; }
[data-id="menuItem"] .img01 { background-image: url("../../image/bg_item_01.jpg"); background-position: center center; background-size: cover; margin-top: 15px; }
[data-id="menuItem"] .img01 img { border-color: #fff; border-style: solid; border-width: 0 20px; }
[data-id="menuItem"] .img02 { margin-top: 34px; }
[data-id="menuItem"] .img02 dd { margin-top: 15px; }
[data-id="menuItem"] .img02 ul { display: table; margin: 0 auto; }
[data-id="menuItem"] .img02 li { display: table-cell; }
[data-id="menuItem"] .img02 li:nth-of-type(2) { padding-left: 11px; }
[data-id="menuItem"] .img02 li:nth-of-type(3) { padding-left: 19px; }
[data-id="menuItem"] .img02 li:nth-of-type(4) { padding-left: 19px; }
[data-id="menuItem"] .img02 li:nth-of-type(5) { padding-left: 20px; }
[data-id="menuItem"] .img02 li:nth-of-type(6) { padding-left: 18px; }
[data-id="menuItem"] .img02 li:nth-of-type(7) { padding-left: 19px; }
[data-id="menuItem"] .img02 li:nth-of-type(8) { padding-left: 19px; }

#video-content { background-color: rgba(0, 0, 0, 0.6); display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 85000; }
#video-content.show { display: table; }
#video-content div.cell-wrap { display: table-cell; text-align: center; vertical-align: middle; }
#video-content div.cell-wrap video { width: 640px; }