@charset "utf-8";
/*------------------------------------------------------------------------------------------
*
*
    look_book_pc.css
*
*
------------------------------------------------------------------------------------------ */

.c_anim{ opacity: 0; transform: translateY(30px);}
.c_anim.c_on{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#wrap{ height: 100vh; overflow: hidden;}
.on #wrap{ height: auto; overflow: auto;}

.kv_wrap{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    opacity: 0;
    transform: scale(1.03);
    position: fixed;
    top: 0;
    left: 0;
}
.on .kv_wrap{ opacity: 1; transform: scale(1); transition: opacity 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) .25s, transform 2.5s ease-out .25s;}

.kv_wrap .title{ opacity: 0; transform: translateY(-15px);}
.kv_wrap .desc{ opacity: 0; transform: translateY(15px);}
.on .kv_wrap .title{ opacity: 1; transform: translateY(0); transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) .8s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) .8s;}
.on .kv_wrap .desc{ opacity: 1; transform: translateY(0); transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s, transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s;}

.kv_wrap .title img{ position: relative;}
.kv_wrap .desc img{ position: relative;}


#kv{ transition: opacity .8s cubic-bezier(0.165, 0.84, 0.44, 1), transform .8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;}
#kv h1{ transition: transform .8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;}
#kv .title{ transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;}
#kv .desc{ transition: transform .45s cubic-bezier(0.165, 0.84, 0.44, 1) !important;}

body.isIE{ height: auto !important;}
.isIE #wrap_sc{ position: inherit !important; height: auto !important;}
.isIE #kv,
.isIE #kv h1,
.isIE #kv .title,
.isIE #kv .desc{ transition: inherit !important; transition-duration: 0s !important; transition-delay: 0s !important;}

body.isEdge{ height: auto !important;}
.isEdge #wrap_sc{ position: inherit !important; height: auto !important;}
.isEdge #kv,
.isEdge #kv h1,
.isEdge #kv .title,
.isEdge #kv .desc{ transition: inherit !important; transition-duration: 0s !important; transition-delay: 0s !important;}

.isFirefox #wrap_sc{ transition-duration: .4s !important;}
.is_pc #wrap_sc{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: transform .75s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: 0s !important;
}
.is_pc #wrap{ overflow: hidden !important;}
body.is_sp{ height: auto !important;}


#look li a{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

#look li a{
    transition: opacity .15s ease;
}

#look li a:hover{
    opacity: .7;
}


@media screen and (min-width : 641px){ 
/*------------------------------------------------------------------------------------------
*
*
    min-width : 641px
*
*
------------------------------------------------------------------------------------------ */
body{
    min-width: 1000px;
}


/* --------------------------------------------------
*
    #kv
*
-------------------------------------------------- */
#kv{
    width: 100%;
    height: 100vh;
    min-height: 480px;
    line-height: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

#kv h1{
    width: 100vw;
    height: 100vh;
    min-height: 480px;
    background-image:url(../images/look_book_pajama/pc/pic_mv.jpg);
    background-position: center;
    background-size: contain ;
    background-repeat: no-repeat;
    position: absolute;
}

.haramaki #kv h1{ background-image:url(../images/look_book_haramaki/pc/pic_mv.jpg);}

#kv h1 img{ display: none;}

#kv .title{
    text-align: right;
    position: absolute;
    top: 50px;
    right: 10%;
    z-index: 2;
}

#kv .title img{
    width: auto;
    height: 80vh;
    max-height: 600px;
    min-height: 420px;
}

.haramaki #kv .title{
    top: 50%;
    left: 50%;
}

.haramaki #kv .title img{
    width: 80vw;
    max-width: calc(1628px / 2);
    height: auto;
    max-height: inherit;
    min-height: inherit;
    transform: translateX(-50%) translateY(-50%);
}

#kv .desc{
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 35px;
    z-index: 2;
}

/* --------------------------------------------------
*
    #look
*
-------------------------------------------------- */
#look{
    min-width: 1000px;
    margin-top: calc(100vh);
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 1;
}

#look .notes{
    width: 100%;
    padding: 25px 0 60px 0;
    text-align: center;
}
	
#look li:first-child{
    display: inline-block;
}
	
#look li{
    display: block;
    margin: 0 0 60px 0;
    position: relative;
}

#look li:last-child{ margin-bottom: 0;}
#look.haramaki li{ margin-bottom: 100px;}
#look.haramaki li:last-child{ margin-bottom: 20px;}
#look.haramaki li .pic img{ width: 960px;}

.btn_detail{
    top: 665px;
    right: 0;
    position: absolute;
}

.btn_detail img{
    width: calc(400px / 2);
    transition: opacity .1s ease;
}

.is_pc .btn_detail a:hover img,
.is_sp .btn_detail a.touch img{
    opacity: .7;
    transition: opacity .15s ease;
}


.btn_back{
    width: 300px;
    display: table;
    text-align: center;
    margin: 100px auto 60px auto;
}

.btn_back a{
    width: 300px;
    height: 43px;
    background-color: #e0e0e0;
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
    border: 1px solid #000;
    border-radius: 45px;
    box-sizing: border-box;
    transition: opacity .1s ease;
}

.is_pc .btn_back a:hover,
.is_sp .btn_back a.touch{
    opacity: .7;
    transition: opacity .15s ease;
}


} /* ----- min-width : 641px ----- */