@charset 'UTF-8';
.pc-appear,article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{
display:block
}
#footer .btn-pagetop a:hover,
#footer .store-list li:hover,
#sns ul li a:hover{
opacity:.5
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
border:0
}
ol,ul{
list-style:none
}
blockquote,q{
quotes:none
}
blockquote:after,
blockquote:before,
q:after,
q:before{
content:'';
content:none
}
table{
border-spacing:0;
border-collapse:collapse
}
.clearfix{
min-height:1px
}
.clearfix:after{
display:block;
visibility:hidden;
clear:both;
height:0;
content:'.'
}
body{
font-family:'Helvetica LT W10 Bold1489458',Avenir,'Helvetica Neue',Verdana,Helvetica,Arial,Roboto,YuGothic,'Meiryo UI',メイリオ,Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
position:relative;
background:#fff;
-webkit-font-feature-settings:'palt';
font-feature-settings:'palt';
-webkit-text-size-adjust:none;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
*{
box-sizing:border-box;
outline:0
}
a{
color:#000
}
.sp-appear{
display:none
}



@media screen and (max-width:767px){
.pc-appear{
display:none
}
.sp-appear{
display:block
}
}



#header{
width:100%;
margin:auto;
padding:35px 0 30px;
border-bottom:#000 1px solid
}
#header .logo{
width:191px;
margin:auto
}
#header .logo img{
display:block;
width:100%
}



@media screen and (max-width:767px){
#header{
padding:20px 0 12px
}
#header .logo{
width:96px
}
}



#sns{
padding:50px 0
}
#sns ul{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
#sns ul li{
width:30px;
margin:0 20px
}
#sns ul li a{
-webkit-transition:opacity .2s;
transition:opacity .2s
}
#sns ul li img{
width:100%
}



@media screen and (max-width:767px){
#sns{
padding:35px 0
}
#sns ul li{
width:25px;
margin:0 16px
}
}



#footer{
padding:100px 0 40px;
text-align:center;
color:#fff;
background:#000
}
#footer .container{
position:relative;
width:100%;
max-width:1000px;
margin:auto
}
#footer .section-title{
margin-bottom:90px
}
#footer .section-title img{
width:750spx
}
#footer .store-name{
margin-bottom:70px
}
#footer .store-name .main{
margin-bottom:5px
}
#footer .store-name .main img{
width:192px
}
#footer .store-name .sub img{
width:272px
}
#footer .store-list{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
margin-bottom:150px
}
#footer .store-list li{
font-size:21px;
font-size:1.3125rem;
line-height:1.5;
position:relative;
padding-bottom:15px;
-webkit-transition:opacity .3s;
transition:opacity .3s;
letter-spacing:.05em;
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1
}
#footer .store-list li::after{
position:absolute;
bottom:0;
left:50%;
width:60px;
height:3px;
content:'';
-webkit-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
transform:translate(-50%,0);
background:#fff
}
#footer .store-list li:nth-child(1) img{
width:122px
}
#footer .store-list li:nth-child(2) img{
width:111px
}
#footer .store-list li:nth-child(3) img{
width:80px
}
#footer .copyright{
font-size:13px;
font-size:.8125rem;
line-height:1.5;
padding-bottom:5px;
text-align:left
}
#footer .btn-pagetop{
position:absolute;
right:0;
bottom:0;
width:40px;
height:26px
}
#footer .btn-pagetop a{
position:relative;
display:block;
width:100%;
height:100%;
-webkit-transition:opacity .2s;
transition:opacity .2s;
text-indent:-9999px
}
#footer .btn-pagetop a::after{
position:absolute;
top:50%;
left:50%;
width:26px;
height:26px;
content:'';
-webkit-transform:rotate(-45deg) translate(-50%,-50%);
-ms-transform:rotate(-45deg) translate(-50%,-50%);
transform:rotate(-45deg) translate(-50%,-50%);
-webkit-transform-origin:left top;
-ms-transform-origin:left top;
transform-origin:left top;
border-top:#fff solid 3px;
border-right:#fff solid 3px
}



@media screen and (max-width:767px){
#footer{
padding:63px 0 20px
}
#footer .section-title{
margin-bottom:45px
}
#footer .section-title img{
width:214px
}
#footer .store-name{
margin-bottom:40px
}
#footer .store-name .main img{
display:block;
width:110px;
margin:auto
}
#footer .store-name .sub img{
display:block;
width:185px;
margin:auto
}
#footer .store-list{
display:block;
margin-bottom:18px
}
#footer .store-list li{
font-size:12px;
font-size:.75rem;
margin-bottom:50px;
padding-bottom:5px;
-webkit-box-flex:1;
-webkit-flex-grow:1;
-ms-flex-positive:1;
flex-grow:1
}
#footer .store-list li::after{
width:30px;
height:2px
}
#footer .store-list li:nth-child(1) img{
width:61px
}
#footer .store-list li:nth-child(2) img{
width:56px
}
#footer .store-list li:nth-child(3) img{
width:40px
}
#footer .copyright{
width:176px;
height:6px;
margin:auto;
text-indent:-9999px;
background:url(../img/txt-copyright.svg) no-repeat;
background-size:contain
}

#footer .btn-pagetop{
position:relative;
right:auto;
bottom:auto;
width:20px;
height:13px;
margin:0 15px 23px auto
}
#footer .btn-pagetop a::after{
width:13px;
height:13px;
border-top-width:2px;
border-right-width:2px
}
}


/*
.top-menu{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
width:100%;
max-width:770px;
margin:0 auto 180px;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between
}

.top-menu .item{
width:49.35%;
margin-bottom:10px;
}

.top-menu .item figure{
position:relative;
}

.top-menu .item figure .thumb{
display:block;
width:100%;
-webkit-transition:opacity .3s;
transition:opacity .3s
}

.top-menu .item figure figcaption{
position:relative;
display:block;
width:100%;
height:60px;
-webkit-transition:background .3s;
transition:background .3s;
background:#000
}

.top-menu .item figure figcaption img{
position:absolute;
top:50%;
right:23px;
-webkit-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
transform:translate(0,-50%)
}

.top-menu .item figure figcaption img.off{
display:none
}

.top-menu .item a figure figcaption img.off,
.top-menu .item figure figcaption img.on,
.top-menu .item figure.disable figcaption img.off{
display:block
}

.top-menu .item figure.disable::after{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:'';
background:center center no-repeat rgba(0,0,0,.65)
}

.top-menu .item a figure figcaption,
.top-menu .item figure.disable figcaption{
background:#fff
}

.top-menu .item a figure figcaption::after,
.top-menu .item figure.disable figcaption::after{
position:absolute;
top:50%;
right:20px;
width:17px;
height:17px;
content:'';
-webkit-transition:border .3s;
transition:border .3s;
-webkit-transform:rotate(45deg) translate(0,-50%);
-ms-transform:rotate(45deg) translate(0,-50%);
transform:rotate(45deg) translate(0,-50%);
border-top:1px solid #000;
border-right:1px solid #000
}

.top-menu .item figure figcaption img,
.top-menu .item figure.disable figcaption img{
right:140px;
}

.top-menu .item a figure figcaption::after,
.top-menu .item a figure figcaption img.on,
.top-menu .item a.current figure figcaption img.off,
.top-menu .item a:hover figure figcaption img.off,
.top-menu .item figure.disable figcaption img.on{
display:none
}

.top-menu .item a.current figure figcaption,
.top-menu .item a:hover figure figcaption{
background:#000
}

.top-menu .item a.current figure figcaption::after,
.top-menu .item a:hover figure figcaption::after{
border-top-color:#fff;
border-right-color:#fff
}

.top-menu .item a.current figure figcaption img.on,
.top-menu .item a:hover figure figcaption img.on{
display:block
}

.top-menu .item a.current figure .thumb{
opacity:1
}

.top-menu .item.item1 figure figcaption img{
width:102px
}

.top-menu .item.item2 figure figcaption img{
width:102px
}

.top-menu .item.item2 figure.disable::after{
background-image:url(../img/txt-menu-2-release.svg);
background-size:102px auto
}

.top-menu .item.item3 figure figcaption img{
width:204px
}

.top-menu .item.item3 figure.disable::after{
background-image:url(../img/txt-menu-3-release.svg);
background-size:102px auto
}

.top-menu .item.item4 figure figcaption img{
width:206px
}

.top-menu .item.item4 figure.disable::after{
background-image:url(../img/txt-menu-4-release.svg);
background-size:102px auto
}
*/



.top-menu{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
width:100%;
max-width:770px;
margin:0 auto 180px;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between
}

.top-menu .item{
width:49.35%;
margin-bottom:10px
}

.top-menu .item figure{
position:relative
}

.top-menu .item figure .thumb{
display:block;
width:100%;
-webkit-transition:opacity .3s;
transition:opacity .3s
}

.top-menu .item figure figcaption{
position:relative;
display:block;
width:100%;
height:60px;
-webkit-transition:background .3s;
transition:background .3s;
background:#000
}

.top-menu .item figure figcaption img{
position:absolute;
top:50%;
right:23px;
-webkit-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
transform:translate(0,-50%)
}

.top-menu .item figure figcaption img.off{
display:none
}

.top-menu .item a figure figcaption img.off,
.top-menu .item figure figcaption img.on,
.top-menu .item figure.disable figcaption img.off{
display:block
}

.top-menu .item figure.disable::after{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:'';
background:center center no-repeat rgba(0,0,0,.65)
}

.top-menu .item a figure figcaption,
.top-menu .item figure.disable figcaption{
background:#fff
}

.top-menu .item a figure.another figcaption::after,
.top-menu .item figure.disable figcaption::after{
position:absolute;
top:50%;
right:20px;
width:17px;
height:17px;
content:'';
-webkit-transition:border .3s;
transition:border .3s;
-webkit-transform:rotate(45deg) translate(0,-50%);
-ms-transform:rotate(45deg) translate(0,-50%);
transform:rotate(45deg) translate(0,-50%);
border-top:1px solid #000;
border-right:1px solid #000
}

.top-menu .item a figure figcaption img,
.top-menu .item figure.disable figcaption img{
right:133px
}

.top-menu .item a figure figcaption img.on,
.top-menu .item a.current figure figcaption img.off,
.top-menu .item a:hover figure figcaption img.off,
.top-menu .item figure.disable figcaption img.on{
display:none
}

.top-menu .item a.current figure figcaption,
.top-menu .item a:hover figure figcaption{
background:#000
}

.top-menu .item a.current figure figcaption::after,
.top-menu .item a:hover figure figcaption::after{
border-top-color:#fff;
border-right-color:#fff
}

.top-menu .item a.current figure figcaption img.on,
.top-menu .item a:hover figure figcaption img.on{
display:block
}

.top-menu .item a.current figure .thumb{
opacity:1
}

.top-menu .item.item1 figure figcaption img{
width:102px
}

.top-menu .item.item2 figure figcaption img{
width:102px
}

.top-menu .item.item2 figure.disable::after{
background-image:url(../img/txt-menu-2-release.svg);
background-size:102px auto
}

.spacer{
margin:180px 0 0}



@media screen and (max-width:767px){
.top-menu .item.item2 figure.disable::after,
.top-menu .item.item3 figure.disable::after,
.top-menu .item.item4 figure.disable::after{
background-size:43px auto
}
.top-menu{margin:0 auto 65px
}
.top-menu .item{
width:calc((100% - 1px)/ 2);
margin-bottom:5px
}
.top-menu .item figure figcaption{
height:25px
}
.top-menu .item figure figcaption img{
right:10px
}
.top-menu .item a figure figcaption::after,
.top-menu .item figure.disable figcaption::after{
right:10px;
width:5px;
height:5px
}

.top-menu .item a figure figcaption::after {
display:none;
}

.top-menu .item a figure figcaption img,
.top-menu .item figure.disable figcaption img{
right:70px
}
.top-menu .item.item1 figure figcaption img{
width:43px
}
.top-menu .item.item2 figure figcaption img{
width:43px
}
.top-menu .item.item3 figure figcaption img{
width:85px
}

.top-menu .item.item4 figure figcaption img{
width:86px
}
.spacer{
margin:60px}
}



.fadein-up{
-webkit-transform:translate3d(0,40px,0);
transform:translate3d(0,40px,0);
opacity:.05
}
.fadein-up.hidden{
visibility:hidden;
-webkit-animation:none;
animation:none
}
.fadein-up.visible{
visibility:visible;
-webkit-animation:fadeInUp 1s cubic-bezier(.25,.46,.45,.94) .2s forwards;
animation:fadeInUp 1s cubic-bezier(.25,.46,.45,.94) .2s forwards
}

@-webkit-keyframes fadeInUp{
0%{
-webkit-transform:translate3d(0,80px,0);
transform:translate3d(0,80px,0);
opacity:.05
}
100%{
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes fadeInUp{
0%{
-webkit-transform:translate3d(0,80px,0);
transform:translate3d(0,80px,0);
opacity:.05
}
100%{
-webkit-transform:none;
transform:none;
opacity:1
}
}
main .title{
width:500px;
margin:135px auto 90px
}
main .title img{
width:100%
}
main .collections{
width:100%;
margin:auto
}
main .collections .category{
margin:0 0 100px;
text-align:center;
border-bottom:#000 1px solid
}
main .collections .category:last-of-type{
margin-bottom:50px;
border-bottom:none
}
main .collections .category .category-title{
margin-bottom:15px
}
main .collections .category .item{
margin-bottom:100px;
padding-bottom:150px;
border-bottom:1px solid #000;
}
main .collections .category .item:last-of-type{
border:none;
}
main .collections .category figure{
margin-top:25px;
}
main .collections .category figure a,
main .collections .category figure span{
display:block;
width:520px;
margin:0px auto;
}
main .collections .category figure a:last-of-type,
main .collections .category figure span:last-of-type{
margin-bottom:65px
}
main .collections .category figure a img,
main .collections .category figure span img{
display:block;
width:100%;
-webkit-transition:opacity .3s;
transition:opacity .3s;
}
main .collections .category figure a:hover img{
opacity:.5
}
main .collections .category figure figcaption{
font-size:16px;
font-size:1rem;
line-height:1.5;
letter-spacing:.05em;
margin:30px 0 20px 0;
}
main .collections .category figure.nidan figcaption{
font-size:16px;
font-size:1rem;
line-height:1.5;
letter-spacing:.05em;
margin:60px 0 20px 0;
}
main .collections .category .credit{
font-size:12px;
font-size:.75rem;
line-height:1.5;
margin-bottom:12px;
letter-spacing:.05em;
color:#bfbfbf;
}

main .collections .category .credit a{
text-decoration:underline;
color:#000
}
main .collections .category .credit a:hover{
text-decoration:none;
color:#ccc;
}

main .collections .category .links{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;margin-top:72px;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
}
main .collections .category .links li{
margin:0 10px;
}
main .collections .category .links li a{
position:relative;
display:inline-block;
width:180px;
height:40px;
padding:10px 0;
color:#fff;
background:#000;
}
main .collections .category .links li a::before{
position:absolute;
top:0;left:0;
width:0;
height:100%;
content:'';
background:grey
}
main .collections .category .links li a span{
position:relative;
display:block;
width:100%;
height:100%;
text-indent:-9999px
}
main .collections .category .links li a.hover::before{
width:100%
}
main .collections .category .links li.online-store a span{
background:url(../img/btn-onlinestore.svg) center center no-repeat;
background-size:112px 11px
}
main .collections .category .links li.styling-item a span{
background:url(../img/btn-stylingitem.svg) center center no-repeat;
background-size:105px 12px
}
main .collections .category .links li.collection-items a span{
background:url(../img/btn-collectionitems.svg) center center no-repeat;
background-size:149px 11px
}
main .collections .btn-allitems{
margin:0 0 105px;
}
main .collections .btn-allitems a{
position:relative;
display:block;
width:350px;
height:90px;
margin:auto;
padding:25px 0;
background:#000
}
main .collections .btn-allitems a::before{
position:absolute;
top:0;
left:0;
width:0;
height:100%;
content:'';
background:grey
}
main .collections .btn-allitems a span{
position:relative;
display:block;
width:100%;
height:100%;
text-indent:-9999px;
background:url(../img/btn-allitems.svg) center center no-repeat;
background-size:157px 21px
}
main .collections .btn-allitems a.hover::before{
width:100%
}
.bottom-menu{
margin:0 auto 25px;
width:650px;
}
.bottom-menu a:hover img{
opacity:.5
}
main .collections .category .lead{
margin-bottom:20px;
padding-bottom:60px;
width:700px;
margin-left:auto;
margin-right:auto;
}
main .collections .category .leadtext{
line-height:1.8;
margin-bottom:16px;
font-size:1rem;
letter-spacing:.05em;
text-align:left;
font-family:'Sawarabi Gothic', sans-serif;
font-size:14px;
}


@media screen and (max-width:767px){
main .title{
width:75%;
margin:60px auto 30px;
}
main .collections .category{
margin:0 0 30px;
}
main .collections .category:last-of-type{
margin-bottom:50px
}
main .collections .category .item{
margin-bottom:40px;
padding-bottom:80px;
border-bottom:1px solid #000;
}
main .collections .category .item:last-of-type{
border:none;
}

main .collections .category figure{
margin-bottom:17px
}
main .collections .category figure a,
main .collections .category figure span{
width:100%;
margin:0 auto 0px
}
main .collections .category figure a:last-of-type,
main .collections .category figure span:last-of-type{
margin-bottom:25px
}
main .collections .category figure figcaption{
font-size:11px;
font-size:.6875rem
}
main .collections .category figure.nidan figcaption{
font-size:11px;
font-size:.6875rem;
margin-top:45px;
}
main .collections .category .credit{
font-size:10px;
font-size:.625rem;
margin:0 5% 5px 5%;
width:90%;
}
main .collections .category .credit a{
text-decoration:underline
}
main .collections .category .links{
margin-top:26px
}
main .collections .category .links li{
margin:0 9px
}
main .collections .category .links li a{
width:120px;
height:26px;
padding:5px 0
}
main .collections .category .links li.online-store a span{
background-size:72.5px 7.5px
}
main .collections .category .links li.styling-item a span{
background-size:74.5px 7px
}
main .collections .category .links li.collection-items a span{
background-size:95px 7.5px
}
main .collections .btn-allitems{
margin:0 0 45px;
}
main .collections .btn-allitems a{
width:175px;height:45px;padding:15px 0
}
main .collections .btn-allitems a span{background-size:78.5px 10.5px
}
.bottom-menu{
margin:0 0 25px;
width:100%;
}
.bottom-menu img{
width:100%;
}
main .collections .category .lead{
padding-top:20px;
padding-bottom:10px;
width:80%;
}
main .collections .category .leadtext{
line-height:1.8;
margin-bottom:16px;
font-size:1rem;
letter-spacing:.05em;
text-align:left;
font-family:'Sawarabi Gothic', sans-serif;
font-size:14px;
}
}



