/*=============================================================
  common.css
---------------------------------------------------------------

01. common layout
02. header
03. footer
04. home
05. pages
06. hair menu
07. eyelash
08. media query
09. mobile
10. helper

===============================================================
01. common layout
=============================================================*/

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

#loading-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #fff;
    transition: all ease 1200ms;
    transition-delay: 100ms;
}

.loaded #loading-layer {
    opacity: 0;
    visibility: hidden;
}

.pc,
.pc-alt {
	display: inline-block;
}

.sp,
.sp-alt {
	display: none;
}

.central {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX( -50% ) translateY( -50% );
    -moz-transform: translateX( -50% ) translateY( -50% );
    -ms-transform: translateX( -50% ) translateY( -50% );
    transform: translateX( -50% ) translateY( -50% );
}

.central-y {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    -webkit-transform: translateY( -50% );
    -moz-transform: translateY( -50% );
    -ms-transform: translateY( -50% );
    transform: translateY( -50% );
}

#bg {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#contents {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
}

.mass {
    padding-bottom: 75px;
}

.mass.pt-plus {
    padding-top: 60px;
}

.mass.pt-plus-more {
    padding-top: 70px;
}

.mass.pb-plus {
    padding-bottom: 85px;
}

.mass.pb-plus-more {
    padding-bottom: 95px;
}

.mass.mb-plus {
    margin-bottom: 70px;
}

.base-white {
    background: #fff;
}

.inner {
    width: 84%;
    margin: 0 auto;
}

.inner-divi {
    width: 92%;
    margin-left: 8%;
}

.inner-divi-alt {
    width: 92%;
}

.inner-divi-alt.img-right {
    margin-left: 8%;
}

.inner-divi-alt.mb-plus {
    margin-bottom: 70px;
}

.tit-01-img,
.tit-01-text {
    text-align: center;
}

.tit-01-img {
    margin-bottom: 50px;
}

.tit-01-img.mb-minus {
    margin-bottom: 40px;
}

.tit-01-img.mb-minus-more {
    margin-bottom: 30px;
}

.tit-01-img.mb-minus-more-more {
    margin-bottom: 20px;
}

.tit-01-img.mb-0 {
    margin-bottom: 0;
}

.tit-01-img img {
    width: auto;
    height: 60px;
}

.tit-01-text {
    font-size: 26px;
    line-height: 1.5;
    margin-bottom: 17px;
}

.tit-01-text.mb-minus {
    margin-bottom: 7px;
}

.tit-01-text.ta-l {
    text-align: left;
}

p {
    margin-bottom: 15px;
}

p:last-of-type {
    margin-bottom: 0;
}

p.mb-default {
    margin-bottom: 15px;
}

p.mb-plus {
    margin-bottom: 20px;
}

p.mb-plus-more {
    margin-bottom: 25px;
}

p.mb-plus-super {
    margin-bottom: 50px;
}

p.mini {
    font-size: 13px;
    margin-bottom: 5px;
}

p.mini.mb-plus {
    margin-bottom: 10px;
}

p.mini.mb-plus-more {
    margin-bottom: 15px;
}

.ta-c-pc {
    text-align: center;
}

.text-big {
    font-size: 130%;
}

.text-small {
    font-size: 14px;
}

.btn-01 {
    display: inline-block;
    width: 40%;
    min-width: 400px;
    padding: 20px 0 22px;
    -webkit-border-radius: 500px;
    border-radius: 500px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    border: solid 1px #333;
    text-align: center;
    text-decoration: none;
    transition: all ease 600ms;
}

.btn-01:hover {
    background: #333;
    color: #fff;
}

.btn-01.green {
    background: #d4f8d4;
    border: solid 1px #c4eac4;
}

.btn-01.green:hover {
    color: #85c885;
    border: solid 1px #a7d6a7;
    background: #fff;
}

.btn-01.pink {
    background: #f7dee5;
    border: solid 1px #f2ced8;
}

.btn-01.pink:hover {
    color: #e5adbd;
    border: solid 1px #e5adbd;
    background: #fff;
}

.text-link-01 {
    color: #333;
    text-decoration: underline;
}

.box-img {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.illust-wrapper {
    margin-bottom: 35px;
    text-align: center;
}

.illust-wrapper img {
    width: 35%;
    max-width: 360px;
}

dl.list-01 {
    padding-top: 17px;
    border-top: solid 1px rgba( 0,0,0,0.1 );
}

dl.list-01 dt {
    font-size: 110%;
}

dl.list-01 dd {
    padding-bottom: 17px;
    border-bottom: solid 1px rgba( 0,0,0,0.1 );
    margin-bottom: 15px;
}

dl.list-01 dd:last-of-type {
    margin-bottom: 0;
}

/*
 * frame
 */

body::before,
body::after,
#bottom-line,
#wrapper::before,
#wrapper::after {
    display: block;
    background: #fff;
    position: fixed;
    z-index: 30;
}

body::before,
body::after,
#wrapper::before,
#wrapper::after {
    content: "";
}

body::before,
body::after,
#bottom-line {
    width: 100%;
    height: 7px;
    left: 0;
}

body::before {
    top: 0;
}

body::after,
#bottom-line {
    bottom: 0;
}

#wrapper::before,
#wrapper::after {
    width: 7px;
    height: 100%;
    top: 0;
}

#wrapper::before {
    left: 0;
}

#wrapper::after {
    right: 0;
}

/*
 * #visual
 */

#visual-wrapper,
#visual {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#visual {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#visual #icon-scroll-wrapper {
    width: 64px;
    padding-right: 7px;
    position: absolute;
    bottom: 0;
    /* left: 7px; */
    left: 1.8%;
    z-index: 1;
    text-align: center;
    /* background: #fff; */
}

#visual #icon-scroll-wrapper img {
    width: 21px;
    padding: 22px 0 12px;
}

#visual #icon-scroll-wrapper #scroll-bar-wrapper {
    width: 100%;
    height: 100px;
}


#visual #icon-scroll-wrapper #scroll-bar-wrapper #scroll-bar-inner {
    display: inline-block;
    width: 1px;
    height: 100px;
    overflow: hidden;
    background: rgba( 0,0,0,0.3 );
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#visual #icon-scroll-wrapper #scroll-bar-wrapper #scroll-bar-inner::before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 40px;
    background: rgba( 0,0,0,0.99999 );
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 1;
}

.loaded #visual #icon-scroll-wrapper #scroll-bar-wrapper #scroll-bar-inner::before {
    animation: scroll-bar-motion ease infinite 4000ms;
}

@keyframes scroll-bar-motion {
    0%{ top: -50px; opacity: 0; }
    1%{ top: -50px; opacity: 1; }
    90%{ top: 170px; opacity: 1; }
    91%{ top: 170px; opacity: 0; }
    100%{ top: -50px; opacity: 0; }
}

/*
 * scrolled elem
 */

.scrolled-elem {
    transition: all ease 800ms;
    overflow: hidden;
    opacity: 0;
}

.scrolled .scrolled-elem {
    opacity: 0.99999;
}

/*
 * basic motion
 */

.elem-00,
.elem-01,
.elem-02,
.elem-03,
.elem-04,
.elem-05,
.elem-06,
.elem-07,
.elem-08,
.elem-09,
.elem-10 {
    transition: all ease 800ms;
    transform: translateY( 20px ) scale( 0.9999999 );
    opacity: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.elem-00 {
    transition-delay: 10ms;
}

.elem-01 {
    transition-delay: 200ms;
}

.elem-02 {
    transition-delay: 400ms;
}

.elem-03 {
    transition-delay: 600ms;
}

.elem-04 {
    transition-delay: 800ms;
}

.elem-05 {
    transition-delay: 1000ms;
}

.elem-06 {
    transition-delay: 1200ms;
}

.elem-07 {
    transition-delay: 1400ms;
}

.elem-08 {
    transition-delay: 1600ms;
}

.elem-09 {
    transition-delay: 1800ms;
}

.elem-10 {
    transition-delay: 2000ms;
}

.active .elem-00,
.active .elem-01,
.active .elem-02,
.active .elem-03,
.active .elem-04,
.active .elem-05,
.active .elem-06,
.active .elem-07,
.active .elem-08,
.active .elem-09,
.active .elem-10 {
    transform: translateY( 0 ) scale( 0.9999999 );
    opacity: 0.99999;
}

/*
 * .with-divi-bg
 */

.mass.with-divi-bg {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.mass.with-divi-bg .divi-bg {
    width: 100%;
    height: calc( 100% - 200px );
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

/*
 * .row
 */

.row {
    margin-bottom: 60px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.row:last-of-type {
    margin-bottom: 0;
}

.row.half .box-img,
.row.half .box-text {
    width: 48%;
}

.row.half .box-img {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.row.half.img-left .box-img {
    left: 0;
}

.row.half.img-left .box-text {
    margin-left: 52%;
}

.row.half.img-right .box-img {
    right: 0;
}

/*
 * .row.divi
 */

.row.divi {

}

.row.divi .box-img-wrapper {
    margin-bottom: 40px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.row.divi .box-img-wrapper .illust {
    width: 48%;
    position: absolute;
    bottom: 6%;
    left: 0;
    z-index: 1;
}

.row.divi .box-img {
    width: 80%;
    padding-top: 40%;
    margin-left: 20%;
}

.row.divi .box-text {
    width: 74%;
}

/*
 * #part-reservation
 */

#part-reservation ul {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 40px;
    text-align: center;
}

#part-reservation ul li {
    width: 49%;
    display: inline-block;
}

#part-reservation ul li:nth-of-type( 1 ) {
    margin-right: 1%;
}

#part-reservation ul li:nth-of-type( 2 ) {
    margin-left: 1%;
}

#part-reservation ul li .btn-01 {
    width: 100%;
}

#part-reservation .slash {
    display: inline-block;
    width: 2em;
    text-align: center;
}

#part-reservation .icon-in-p {
    width: 1.4em;
    vertical-align: text-bottom;
}

/*=============================================================
02. header
=============================================================*/

#main-header > h1 {
    width: 150px;
    position: absolute;
    top: 15px;
    left: 18px;
    z-index: 2;
}

#main-header > h1 a {
    display: block;
}

#main-header > h1 a img {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#main-header #icons-wrapper {
    position: fixed;
    top: 17px;
    right: 15px;
    z-index: 4;
}

#main-header #icons-wrapper li {
    display: inline-block;
    padding: 0 4px;
    cursor: pointer;
}

#main-header #icons-wrapper li img {
    width: auto;
    height: 54px;
}

/*
* global nav
*/

#main-header #nav-wrapper,
#main-header #nav-wrapper #nav-bg,
#main-header #nav-wrapper .close-layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#main-header #nav-wrapper {
    position: fixed;
    z-index: 5;
    transition: all ease 1000ms;
    opacity: 0;
    visibility: hidden;
}

.nav-open #main-header #nav-wrapper {
    opacity: 0.99999;
    visibility: visible;
}

#main-header #nav-wrapper #nav-bg,
#main-header #nav-wrapper .close-layer {
    position: absolute;
    z-index: 1;
}

#main-header #nav-wrapper #nav-bg {
    background-image: url( /common/img/shared/nav-bg.jpg?v01 );
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#main-header #nav-wrapper #icon-close {
    width: auto;
    height: 58px;
    position: absolute;
    top: 15px;
    right: 17px;
    z-index: 1;
    cursor: pointer;
}

#main-header #nav-outer {
    width: 70%;
    padding: 5% 0;
}

#main-header #nav-outer::after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transform: rotate( 8deg );
}

#main-header #nav-inner {
    padding: 7% 5%;
    border: solid 3px #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#main-header #nav-inner a {
    display: block;
}

#main-header #nav-inner #box-left,
#main-header #nav-inner #box-right {
    width: 49%;
    overflow: hidden;
}

#main-header #nav-inner #box-left a img {
    padding: 11% 17% 13% 7%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#main-header #nav-inner #box-right {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#main-header #nav-inner #box-right #nav-asset {
    width: 48%;
}

#main-header #nav-inner #box-right nav ul li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#main-header #nav-inner #box-right nav ul li a {
    padding: 4% 0;
}

#main-header #nav-inner #box-right #nav-home {
    padding-right: 49%;

}

#main-header #nav-inner #box-right #nav-eyelash {
    padding-right: 20%;
}

#main-header #nav-inner #box-right #nav-eyelash a {
    padding-top: 1%;
}

/*=============================================================
03. footer
=============================================================*/

#main-footer #footer-bottom {
    padding-bottom: 110px;
}

#main-footer #footer-bottom img {
    vertical-align: top;
}

#main-footer #footer-bottom .inner-divi {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#main-footer #footer-bottom .inner-divi div {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#main-footer #footer-bottom .inner-divi div:nth-of-type( 1 ) {
    width: 300px;
    padding-right: 50px;
}

#main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) {
    width: 410px;
    opacity: 0.3;
}

#main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) img {
    position: relative;
    top: 43px;
    left: 0;
    z-index: 1;
}

#main-footer #footer-bottom .inner-divi div:nth-of-type( 3 ) {
    width: calc( 100% - 755px );
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#main-footer #footer-bottom .inner-divi div:nth-of-type( 3 )::before {
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background: rgba( 0,0,0,0.2 );
    position: absolute;
    top: 65%;
    left: 0;
    z-index: 1;
}

#main-footer #side-left,
#main-footer #side-right {
    position: fixed;
    z-index: 3;
}

#main-footer #side-left {
    width: 32px;
    left: 10px;
}

#main-footer #side-left p img {
    padding: 0 5px 0 8px;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#main-footer #side-left .dash {
    width: 100%;
    margin-bottom: 7px;
    line-height: 0;
}

#main-footer #side-left .dash::before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 30px;
    background: #000;
    position: relative;
    top: 0;
    left: 15px;
    z-index: 1;
}

#main-footer #side-left ul li {
    margin-bottom: 2px;
    line-height: 0;
}

#main-footer #side-left ul li:last-of-type {
    margin-bottom: 0;
}

#main-footer #side-left ul li a {
    display: block;
}

#main-footer #side-left ul li a img {
    padding: 5px;
    border: solid 1px #ddd;
    -webkit-border-radius: 500px;
    border-radius: 500px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    transition: all ease 600ms;
}

#main-footer #side-left ul li a:hover img {
    border: solid 1px #000;
}

#main-footer #side-right {
    width: 19px;
    left: auto;
    right: 16px;
}

/*=============================================================
04. home
=============================================================*/

#home #main-header > h1 {
    display: none;
}

#home #bg {
    background-image: url( /common/img/shared/bg-01.jpg );
}

#home #visual,
#home #visual-wrapper {
    background: #fff;
}

#home #visual-wrapper #box-logo {
    width: 52%;
    top: 39%;
    left: 3%;
}

#home #visual-wrapper #box-logo h1 {
    width: 50%;
    margin-bottom: 4%;
}

#home #visual-wrapper #box-logo h1 img {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#home #visual-wrapper #box-logo p {
    padding-left: 1%;
    margin-bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#home #visual-wrapper #box-logo p img {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#home #visual-wrapper .slide-wrapper-01,
#home #visual-wrapper .slide-wrapper-01 .box-img,
#home #visual-wrapper .slide-wrapper-02,
#home #visual-wrapper .slide-wrapper-02 .box-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#home #visual-wrapper .slide-wrapper-01 .box-img,
#home #visual-wrapper .slide-wrapper-02 .box-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#home #visual-wrapper .slide-wrapper-01 {
    width: 100%;
    /* height: 90%; */
    height: calc( 100% - 70px );
}

#home #visual-wrapper .slide-wrapper-01 .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/home/visual-01.jpg?v02 );
}

#home #visual-wrapper .slide-wrapper-01 .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/home/visual-02.jpg?v02 );
}

#home #visual-wrapper .slide-wrapper-01 .box-img:nth-of-type( 3 ) {
    background-image: url( /common/img/home/visual-03.jpg?v02 );
}

#home #visual-wrapper .slide-wrapper-02 {
    width: 49%;
    height: 55%;
    /* padding-top: 38%; */
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    background: #eee;
}

#home #visual-wrapper .slide-wrapper-02 .box-img:nth-of-type( 1 ) {
    background-image: url( /common/img/home/visual-img-01.jpg?v03 );
}

#home #visual-wrapper .slide-wrapper-02 .box-img:nth-of-type( 2 ) {
    background-image: url( /common/img/home/visual-img-02.jpg?v02 );
}

#home #visual-wrapper .slide-wrapper-02 .box-img:nth-of-type( 3 ) {
    background-image: url( /common/img/home/visual-img-03.jpg?v02 );
}

/*
* slide animation
*/

.loaded .slide-wrapper-01 div:nth-of-type(1),
.loaded .slide-wrapper-02 div:nth-of-type(1) {
    animation: slide-motion-01 linear infinite 18000ms;
}

.loaded .slide-wrapper-01 div:nth-of-type(2),
.loaded .slide-wrapper-02 div:nth-of-type(2) {
    opacity: 0;
    animation: slide-motion-02 linear infinite 18000ms;
}

.loaded .slide-wrapper-01 div:nth-of-type(3),
.loaded .slide-wrapper-02 div:nth-of-type(3) {
    opacity: 0;
    animation: slide-motion-03 linear infinite 18000ms;
}

@keyframes slide-motion-01 {
    0% { transform: scale( 1.2 ) translateY( 6.2% ) }
    33% { transform: scale( 1.2 ) translateY( -2% ) }
    36% { transform: scale( 1.2 ) translateY( -2% ); }
    96% { transform: scale( 1.2 ) translateY( 7% ); }
    100% { transform: scale( 1.2 ) translateY( 6.2% ); }
}

@keyframes slide-motion-02 {
    0% { opacity: 0; transform: scale( 1.2 ) translateY( 7% ); }
    29% { opacity: 0; transform: scale( 1.2 ) translateY( 7% ); }
    33% { opacity: 1; transform: scale( 1.2 ) translateY( 6.2% ); }
    63% { opacity: 1; transform: scale( 1.2 ) translateY( -2% ); }
    66% { opacity: 0; transform: scale( 1.2 ) translateY( -2% ); }
    100% { opacity: 0; transform: scale( 1.2 ) translateY( -2% ); }
}

@keyframes slide-motion-03 {
    0% { opacity: 0; transform: scale( 1.2 ) translateY( 7% ); }
    60% { opacity: 0; transform: scale( 1.2 ) translateY( 7% ); }
    63% { opacity: 1; transform: scale( 1.2 ) translateY( 6.2% ); }
    97% { opacity: 1; transform: scale( 1.2 ) translateY( -2% ); }
    100% { opacity: 0; transform: scale( 1.2 ) translateY( -2% ); }
}

#home #part-info time {
    color: #aaa;
    font-size: 14px;
}

#home #part-info .time-wrapper {
    margin-bottom: 12px;
}

#home #part-info img.adjust {
    display: block;
    width: 65%;
    margin: 0 auto;
    padding: 0 0 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#home #part-info .row:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/home/img-info-01.jpg );
}

#home #part-info .row:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/home/img-info-02.jpg );
}

#home #part-about .divi-bg {
    background-image: url( /common/img/home/bg-sky.jpg );
}

#home #part-about .box-img {
    background-image: url( /common/img/home/img-01.jpg );
}

#home #part-menu ul {
    margin-bottom: 20px;
    text-align: center;
}

#home #part-menu ul li {
    width: 38%;
    display: inline-block;
    vertical-align: top;
}

#home #part-menu ul li img {
    width: auto;
    height: 46px;
}

#home #part-menu ul li a > div {
    padding-top: 140%;
    margin-bottom: 20px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#home #part-menu .box-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all ease 600ms;
    transform: scale( 1.00001 );
}

#home #part-menu ul li a:hover .box-img {
    transform: scale( 1.1 );
}

#home #part-menu ul li:nth-of-type( 1 ) {
    padding-right: 2%;
}

#home #part-menu ul li:nth-of-type( 2 ) {
    padding-top: 5%;
    padding-left: 2%;
}

#home #part-menu ul li:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/home/img-hair-menu.jpg?v01 );
}

#home #part-menu ul li:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/home/img-eyelash.jpg?v01 );
}

#home #part-staff .inner .row:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/home/img-staff-01.jpg?v01 );
}

#home #part-staff .inner .row:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/home/img-staff-02.jpg?v01 );
}

#home #part-salon .box-img {
    width: 60%;
    background-image: url( /common/img/home/img-salon.jpg?v01 );
    background-position: center top;
}

#home #part-salon .row {
    margin-bottom: 60px;
}

#home #part-salon .row.half.img-left .box-text {
    width: 36%;
    margin-left: 64%;
    padding: 4% 0;
}

#home #part-salon .row.half.img-left .box-text .tit-01-text {
    margin-bottom: 20px;
}

#home #part-salon .map-wrapper {
    width: 100%;
    padding-top: 45%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

#home #part-salon #map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#home #part-instagram .inner {
    width: 86%;
}

#home #part-instagram ul li {
    display: inline-block;
    width: 25%;
    padding: 0 1%;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#home #part-instagram ul li:nth-of-type( 1 ) {
    padding-top: 6%;
}

#home #part-instagram ul li:nth-of-type( 2 ) {
    padding-top: 4%;
}

#home #part-instagram ul li:nth-of-type( 3 ) {
    padding-top: 2%;
}

/*=============================================================
05. pages
=============================================================*/

.pages #visual #visual-tit {
    width: 52%;
    top: 48%;
    left: 3%;
}

.pages #visual #visual-tit h1 {
    width: 55%;
    margin-bottom: 4%;
}

.pages .inner-divi-alt .box-img {
    width: 54%;
}

.pages .inner-divi-alt .img-left .box-text {
    margin-left: 59%;
}

.pages .inner-divi-alt .box-text {
    width: 41%;
}

.pages .menu-list {
    margin-bottom: 15px;
}

.pages .menu-list:last-of-type {
    margin-bottom: 0;
}

.pages .menu-list dl {
	border-top: solid 1px rgba( 0,0,0,0.1 );
}

.pages .menu-list dl dt {
	padding: 15px 0 5px;
	float: left;
}

.pages .menu-list dl dd {
	padding: 15px 0 15px;
	border-bottom: solid 1px rgba( 0,0,0,0.1 );
	text-align: right;
}

.pages .menu-list dl dd p:last-of-type {
	margin-bottom: 4px;
}

.pages .menu-list dl .no-bb {
	padding-bottom: 0;
	border-bottom: none;
}

.pages .menu-list dl .ta-l {
	padding-top: 5px;
	text-align: left;
}

.pages .menu-list dl dd p,
.pages .menu-list p.note {
	font-size: 14px;
}

.pages .menu-list p.note {
	padding: 18px 0 18px;
	border-bottom: solid 1px rgba( 0,0,0,0.1 );
    margin-bottom: 0;
}

.pages .simple-row-wrapper {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}

/*=============================================================
06. hair menu
=============================================================*/

#hair-menu #visual {
    background-image: url( /common/img/hair-menu/visual.jpg?v01 );
}

#hair-menu #bg {
    background-image: url( /common/img/shared/bg-02.jpg );
}

#hair-menu #part-menu-list .box-text {
    padding: 4% 0;
}

#hair-menu #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/hair-menu/img-01.jpg );
    background-position: top right;
}

#hair-menu #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/hair-menu/img-02.jpg );
    background-position: top center;
}

#hair-menu #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 3 ) .box-img {
    background-image: url( /common/img/hair-menu/img-03.jpg );
    background-position: left center;
}

#hair-menu #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 4 ) .box-img {
    background-image: url( /common/img/hair-menu/img-04.jpg );
    background-position: top right;
}

/*=============================================================
07. eyelash
=============================================================*/

#eyelash .menu-list h1.tit-01-text.ta-l {
    text-align: center;
}

#eyelash #visual {
    background-image: url( /common/img/eyelash/visual.jpg?v01 );
}

#eyelash #bg {
    background-image: url( /common/img/shared/bg-03.jpg );
}

#eyelash.pages .menu-list {
    margin-bottom: 25px;
}

#eyelash.pages .menu-list:last-of-type {
    margin-bottom: 0;
}

#eyelash #part-menu-list .box-text.ptb-plus {
    padding: 4% 0;
}

#eyelash #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 1 ) .box-img {
    background-image: url( /common/img/eyelash/img-03.jpg );
}

#eyelash #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 2 ) .box-img {
    background-image: url( /common/img/eyelash/img-01.jpg );
    background-position: top center;
}

#eyelash #part-menu-list .list-asset .inner-divi-alt:nth-of-type( 3 ) .box-img {
    background-image: url( /common/img/eyelash/img-02.jpg );
    background-position: center left;
}

/*=============================================================
08. media query
=============================================================*/

@media (orientation: portrait) {

    #home #visual-wrapper #box-logo {
        width: 65%;
        left: 5%;
    }

    #home #visual-wrapper .slide-wrapper-02 {
        width: 74%;
        height: 42%;
    }

    #home #part-instagram .elem-01,
    #home #part-instagram .elem-02,
    #home #part-instagram .elem-03,
    #home #part-instagram .elem-04,
    #home #part-instagram .elem-05 {
        transition: none;
        transform: translateY( 0 ) scale( 0.9999999 );
        opacity: 0.99999;
    }

    #main-header #nav-outer {
        max-width: 600px;
        padding: 0;
    }

    #main-header #nav-inner {
        padding: 11% 5% 8%;
    }

    #main-header #nav-inner #box-left,
    #main-header #nav-inner #box-right {
        width: 100%;
    }

    #main-header #nav-inner #box-left {
        padding-bottom: 11%;
        border-bottom: solid 1px #fff;
        margin-bottom: 8%;
    }

    #main-header #nav-inner #box-right {
        position: relative;
    }

    #main-header #nav-inner #box-right #nav-asset {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        transform: none;
    }
    
    #main-header #nav-outer::after {
        display: none;
    }

    #main-header #nav-inner #box-left a img {
        padding: 0 15%;
    }

    #main-header #nav-inner #box-right nav ul li {
        text-align: center;
    }

    #main-header #nav-inner #box-right nav ul li img {
        width: auto;
        height: 40px;
    }

    #main-header #nav-inner #box-right #nav-home,
    #main-header #nav-inner #box-right #nav-eyelash {
        padding: 0;
    }

    #main-header #nav-inner #box-right #nav-home a,
    #main-header #nav-inner #box-right #nav-hair-menu a,
    #main-header #nav-inner #box-right #nav-eyelash a {
        padding: 2% 0;
    }

}

@media screen and (max-width: 1680px) {

    .tit-01-img img {
        height: 52px;
    }

}

@media screen and (max-width: 1380px) {

    #main-header #nav-outer {
        width: 80%;
    }

    #visual #icon-scroll-wrapper img {
        width: 20px;
    }

    .tit-01-img img {
        height: 48px;
    }

}

@media screen and (max-width: 1280px) {

    body {
        font-size: 17px;
    }

    #visual #icon-scroll-wrapper img {
        width: 18px;
    }

    #home #visual-wrapper #box-logo h1 {
        width: 53%;
    }

}

@media screen and (max-width: 1200px) {

    .btn-01 {
        min-width: auto;
    }

}

@media screen and (max-width: 1024px) {

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 1 ) {
        width: 240px;
        padding-right: 30px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) {
        width: 325px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 3 ) {
        width: calc( 100% - 590px );
    }

    .row.divi .box-text {
        width: 92%;
    }

    #home #part-menu ul li img {
        height: 43px;
    }

}

@media screen and (max-width: 800px) {

    body {
        font-size: 16px;
    }

	.pc {
		display: none;
    }

	.sp {
		display: inline-block;
    }

    .tit-01-text {
        font-size: 23px;
    }

    .tit-01-img.tab-sp-minus {
        margin-bottom: 40px;
    }

    .tit-01-img img {
        height: 44px;
    }

    .row.half.style-clear-tab .box-img,
    .row.half.style-clear-tab .box-text {
        width: 100%;
    }

    .row.half.style-clear-tab .box-img {
        padding-top: 50%;
        margin-bottom: 30px;
        position: relative;
    }

    .row.half.style-clear-tab .box-text {
        margin-left: 0;
    }

    .row.divi .box-img {
        width: 86%;
        padding-top: 50%;
        margin-left: 13%;
    }

    .row.divi .box-img-wrapper .illust {
        width: 50%;
    }

    .illust-wrapper {
        margin-bottom: 30px;
    }

    .illust-wrapper img {
        width: 32%;
        max-width: initial;
    }

    #main-header > h1 {
        width: 110px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 1 ) {
        width: 200px;
        padding-right: 20px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) {
        width: 305px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) img {
        top: 28px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 3 ) {
        width: calc( 100% - 515px );
    }

    .pages #visual #visual-tit {
        width: 57%;
        left: 5%;
    }

    #home #visual-wrapper #box-logo {
        width: 70%;
    }

    #home #part-info .time-wrapper {
        margin-bottom: 2px;
    }

    #home #part-info img.adjust {
        width: 50%;
        display: block;
        padding-bottom: 0;
        margin: 0 auto;
    }

    #home #part-salon .row.half.img-left .box-text {
        padding: 0;
    }

    #home #part-salon .map-wrapper {
        padding-top: 65%;
    }

    #hair-menu #part-menu-list .box-text,
    #eyelash #part-menu-list .box-text.ptb-plus {
        padding: 0;
    }

    #home #part-menu ul li img {
        height: 37px;
    }

}

@media screen and (max-width: 767px) {

	.pc-alt {
		display: none;
    }

	.sp-alt {
		display: inline-block;
    }
    
    .ta-c-pc {
        text-align: left;
    }

    p.mb-plus-super {
        margin-bottom: 35px;
    }

    .row.divi .box-img {
        width: 87%;
        padding-top: 82%;
        margin-left: 2%;
    }

    .mass.with-divi-bg {
        padding-bottom: 30px;
    }

    .mass.mb-plus {
        margin-bottom: 35px;
    }

    .row.half.img-left .box-text {
        margin-left: 0;
    }

    .row.divi .box-img-wrapper {
        margin-bottom: 0;
    }

    .row.divi .box-img-wrapper .illust {
        width: 92%;
        position: relative;
        top: -30px;
        left: 0;
    }

    .row.divi .box-text {
        position: relative;
        top: -10px;
        left: 0;
        z-index: 1;
    }

    .illust-wrapper {
        margin-bottom: 17px;
    }

    .illust-wrapper img {
        width: 60%;
    }

    #visual #icon-scroll-wrapper #scroll-bar-wrapper #scroll-bar-inner {
        background: rgba( 0,0,0,0.1 );
    }

    #hair-menu #visual #icon-scroll-wrapper #scroll-bar-wrapper #scroll-bar-inner {
        background: rgba( 0,0,0,0.2 );
    }

    .pages #visual #visual-tit {
        width: 66%;
    }

    .pages #visual #visual-tit h1 {
        width: 86%;
        margin-bottom: 6%;
    }

    #main-header > h1 {
        width: 86px;
    }

    #main-header #nav-inner #box-left a img {
        padding: 0 10%;
    }

    #main-header #nav-inner #box-right nav ul li img {
        height: 34px;
    }

    #main-footer {
        padding-bottom: 44px;
        margin: 0 auto;
        line-height: 0;
        text-align: center;
    }

    #main-footer #side-left,
    #main-footer #side-right {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        -webkit-transform: translateY( 0 );
        -moz-transform: translateY( 0 );
        -ms-transform: translateY( 0 );
        transform: translateY( 0 );
    }

    #main-footer #side-left .scrolled-elem,
    #main-footer #side-right .scrolled-elem {
        transition: none;
        opacity: 0.99999;
    }

    #main-footer #side-left .scrolled-elem > p,
    #main-footer #side-left .scrolled-elem .dash {
        display: none;
    }

    #main-footer #side-left {
        margin-bottom: 22px;
    }

    #main-footer #side-left ul {
        line-height: 0;
    }

    #main-footer #side-left ul li {
        display: inline-block;
        width: 48px;
        margin: 0 2px;
    }

    #main-footer #side-left ul li a img {
        padding: 11px;
        background: none;
    }

    #main-footer #side-right p img {
        width: 90%;
    }

    #main-footer .inner-divi {
        width: 100%;
        margin-left: 0;
    }

    #main-footer #footer-bottom {
        padding-bottom: 25px;
    }

    #main-footer #side-right img,
    #main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) {
        max-width: 450px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 1 ),
    #main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) {
        width: 100%;
        text-align: center;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 1 ) {
        padding-right: 0;
        margin-bottom: 25px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 1 ) img {
        width: 50%;
        max-width: 240px;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 2 ) img {
        top: 0;
    }

    #main-footer #footer-bottom .inner-divi div:nth-of-type( 3 ) {
        display: none;
    }

    #visual #icon-scroll-wrapper {
        left: 6px;
    }

    .inner,
    .inner-divi-alt,
    .inner-divi-alt.img-right,
    #main-footer {
        width: 82%;
        margin: 0 auto;
    }

    .mass,
    .row,
    .inner-divi-alt.mb-plus {
        padding-bottom: 40px;
        margin-bottom: 0;
    }

    .row:last-of-type {
        padding-bottom: 0;
    }

    .mass.pt-plus {
        padding-top: 37px;
    }
    
    .mass.pt-plus-more {
        padding-top: 37px;
    }

    .mass.pb-plus {
        padding-bottom: 38px;
    }

    .row.half .box-img,
    .pages .inner-divi-alt .box-img,
    #home #part-salon .box-img,
    .row.half .box-text,
    #home #part-salon .row.half.img-left .box-text,
    .pages .inner-divi-alt .box-text,
    .pages .inner-divi-alt .img-left .box-text {
        width: 100%;
        height: auto;
        margin-left: 0;
        position: relative;
        top: 0;
        left: 0;
        right: auto;
        z-index: 1;
    }

    .row.half .box-img,
    .pages .inner-divi-alt .box-img,
    #home #part-salon .box-img,
    .row.half.style-clear-tab .box-img {
        padding-top: 100%;
        margin-bottom: 30px;
    }

    .row.divi .box-text {
        width: 89%;
        margin-left: 2%;
    }

    .tit-01-img {
        margin-bottom: 30px;
    }

    .tit-01-img img {
        width: 78%;
        height: auto;
    }

    .tit-01-img.mb-minus-more {
        margin-bottom: 17px;
    }

    .tit-01-img.tab-sp-minus {
        margin-bottom: 25px;
    }

    dl.list-01 dt {
        font-size: 120%;
    }

    dl.list-01 dd {
        padding-bottom: 18px;
        margin-bottom: 13px;
    }

    #part-reservation ul {
        margin-bottom: 25px;
    }

    #part-reservation ul li:nth-of-type( 1 ),
    #part-reservation ul li:nth-of-type( 2 ) {
        width: 100%;
        margin: 0 0 15px;
    }

    #part-reservation ul li:last-of-type {
        margin-bottom: 0;
    }
   
    #home #visual-wrapper #box-logo {
        width: 53%;
        left: 6%;
    }

    #home #visual-wrapper #box-logo h1 {
        width: 68%;
        margin-bottom: 6%;
    }

    #home #visual-wrapper #box-logo p {
        line-height: 0;
    }

    #home #visual-wrapper .slide-wrapper-01 {
        height: calc( 100% - 56px );
    }
    
    #home #visual-wrapper .slide-wrapper-02 {
        width: calc( 100% - 98px );
        right: 25px;
    }

    #home #visual-wrapper .slide-wrapper-01 .box-img:nth-of-type( 1 ) {
        background-image: url( /common/img/home/visual-01-sp.jpg );
    }

    #home #visual-wrapper .slide-wrapper-01 .box-img:nth-of-type( 2 ) {
        background-image: url( /common/img/home/visual-02-sp.jpg );
    }

    #home #part-menu ul {
        margin-bottom: 10px;
    }

    #home #part-menu ul li:nth-of-type( 1 ),
    #home #part-menu ul li:nth-of-type( 2 ) {
        width: 100%;
        padding: 0;
        margin: 0 0 30px 0;
    }

    #home #part-menu ul li:last-of-type {
        margin-bottom: 0;
    }

    #home #part-menu ul li a > div {
        padding-top: 130%;
    }

    #home #part-menu ul li img {
        width: 70%;
        height: auto;
    }

    #home #part-staff .box-img {
        padding-top: 115%;
    }
    
    #home #part-salon .tit-01-img.tab-sp-minus {
        margin-bottom: 18px;
    }

    #home #part-salon .row {
        margin-bottom: 30px;
    }

    #home #part-salon .map-wrapper {
        padding-top: 135%;
    }
    
    #home #part-instagram .inner {
        width: 84%;
    }

    #home #part-instagram .tit-01-img.mb-minus-more {
        margin-bottom: 22px;
    }

    #home #part-instagram ul li:nth-of-type( 1 ),
    #home #part-instagram ul li:nth-of-type( 2 ),
    #home #part-instagram ul li:nth-of-type( 3 ),
    #home #part-instagram ul li:nth-of-type( 4 ) {
        width: 50%;
        padding: 1%;
    }

}

@media screen and (max-width: 500px) and ( orientation: portrait ) {

    #hair-menu #visual {
        background-image: url( /common/img/hair-menu/visual-sp.jpg );
    }

    #eyelash #visual {
        background-image: url( /common/img/eyelash/visual-sp.jpg );
    }

}

@media screen and (max-width: 500px) {

    .sp-pb-minus {
        padding-bottom: 33px;
    }

    .illust-wrapper {
        width: 110%;
        margin-left: -5%;
    }

    .scrolled-short #main-header #icons-wrapper {
        background: #fff;
    }

    #main-header > h1 {
        width: 99px;
    }

    #main-header #icons-wrapper {
        padding: 12px;
        top: 5px;
        right: 3px;
        border-radius: 0 0 0 30px;
        transition: all ease 600ms;
    }

    #main-header #icons-wrapper li {
        padding: 0 3px;
    }

    #main-header #icons-wrapper li img,
    #main-header #nav-wrapper #icon-close {
        height: 45px;
    }

    #main-header #nav-inner {
        border: solid 1px #fff;
    }

    #home #visual-wrapper #box-logo {
        width: 72%;
        top: 38%;
    }

    #home #visual-wrapper .slide-wrapper-02 {
        height: 41%;
    }

    #home #part-info img.adjust {
        width: 80%;
    }

    .pages .list-asset .inner-divi-alt .box-img {
        margin-bottom: 22px;
    }

}

@media screen and (max-width: 413px) {

    #main-header #nav-inner #box-left a img {
        padding: 0 13%;
    }

    #main-header #nav-inner #box-right nav ul li img {
        height: 32px;
    }

}

/*=============================================================
09. mobile
=============================================================*/

.mobile .btn-01,
.mobile #main-footer #side-left ul li a img,
#home.mobile #part-menu .box-img {
    transition: none;
}

.mobile .btn-01:hover {
    background: none;
    color: #333;
}

.mobile #main-footer #side-left ul li a:hover img {
    border: solid 1px #ddd;
}

#home.mobile #part-menu ul li a:hover .box-img {
    transform: none;
}


/*=============================================================
10. helper
=============================================================*/

.ta-c {
    text-align: center;
}

.clr {
	clear: both;
}

/*
* clear fix
*/

.cf:before,
.cf:after {
	content:"";
	display: block;
	height: 0;
	overflow: hidden;
}

.cf:after {
	clear: both;
}