@charset "UTF-8";

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;scrollbar-width: 0px;-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 80px;}
body{
    background: #fff;
    color: #505050;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 1.4rem;
    font-family: "Yu Gothic Pr6N M";
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}
body.active{ overflow-y: hidden;}
img{ max-width: 100%; vertical-align: bottom;}
video{ max-width: 100%; vertical-align: bottom;}
a{ color: #000; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}
#wrap{ overflow: hidden;}
.modal-content .close{ display: none;}

@media screen and (max-width: 768px){
    html{ scroll-padding-top: 64px;}
    body{ font-size: 1.2rem;}
    .pc{ display: none;}
    .sp{ display: block;}
    
    .modal-wrapper{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; padding: 10.666vw; text-align: center;}
    .modal-button{ cursor: pointer;}
    .modal-wrapper:not(:target){ visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s;}
    .modal-wrapper:target{ visibility: visible; opacity: 1; transition: opacity .4s, visibility .4s;}
    .modal-wrapper:after{ display: inline-block; margin-left: -.05em; height: 100%; content: ""; vertical-align: middle;}
    .modal-window{ position: relative; z-index: 20; display: inline-block; width: 100%; vertical-align: middle;}
    .modal-content{ position: relative; overflow-y: auto; padding: 5.333vw; height: calc(100vh - 21.333vw); background: #fff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16); text-align: left;}
    .modal-overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .2);}
    .modal-content .close{ display: block; margin: 30px 0 0; padding: 30px 0 10px; border-top: 1px dotted #05092F; text-align: center;}
    .modal-content .close a{ display: inline-block; width: 11.733vw;}
    
    .scroll{ overflow-x: scroll; padding: 0 0 20px;}
    .scroll::-webkit-scrollbar{ height: 3px;}
    .scroll::-webkit-scrollbar-track{ background: #F5F5F5;}
    .scroll::-webkit-scrollbar-thumb{ background: #05092F;}
    .scroll ul{ display: block; margin: 0; width: 560px;}
    .scroll ul:after{ display: block; clear: both; content: "";}
    .scroll ul > li{ float: left; margin: 0 0 0 10px; width: 180px;}
    .scroll ul > li:first-child{ margin: 0;}
}


/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: fixed; top: 0; left: 0; z-index: 200; display: flex; padding: 0 2.604vw; width: 100%; height: 80px; background: rgba(255,255,255,.8); text-align: center; align-items: center; justify-content: center;}
.header .logo{ text-align: center; letter-spacing: .15em; font-size: 2rem; font-family: "century-gothic", sans-serif;}
.header .switch{ position: absolute; top: 50%; right: 2.604vw; transform: translate(0,-50%);}

.top .header{ position: relative; top: auto; left: auto; visibility: hidden; height: 0; opacity: 0; transition: opacity .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.top .header.sticky{ position: fixed; top: 0; left: 0; visibility: visible; height: 80px; opacity: 1; transition: opacity .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}

@media screen and (max-width: 768px){
    .header{ padding: 0 6.666vw; height: 64px;}
    .header .logo{ font-size: 1.6rem;}
    .top .header.sticky{ height: 64px;}
}

.drawer-hamburger{ position: relative; display: flex; width: 38px; height: 50px; outline: 0; border: 0; background: transparent; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate3d(0, 0, 0); align-items: center; justify-content: center;}
.drawer-hamburger:hover{ background: transparent; cursor: pointer;}
.drawer-hamburger:before,
.drawer-hamburger:after{ position: absolute; left: 50%; width: 36px; height: 2px; background: #000; content: ""; transform: translate(-50%,-50%);}
.drawer-hamburger:before{ top: 0;}
.drawer-hamburger:after{ bottom: -1px;}

@media screen and (max-width: 768px){
    .drawer-hamburger{ width: 26px; height: 35px;}
    .drawer-hamburger:before,
    .drawer-hamburger:after{ width: 26px; height: 1px;}
}

.drawer-hamburger-icon{ position: relative; width: 36px; height: 36px; border: 2px solid #000; border-radius: 100%; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after{ position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: none; content: ""; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: rotate(0);}
.drawer-hamburger-icon:after{ right: 50%;}

@media screen and (max-width: 768px){
    .drawer-hamburger-icon{ width: 26px; height: 26px; border: 1px solid #000;}
}

.drawer-hamburger.open .drawer-hamburger-icon { height: 40px; border: none;}
.drawer-hamburger.open .drawer-hamburger-icon:before,
.drawer-hamburger.open .drawer-hamburger-icon:after{ background: #000; transform: rotate(-30deg);}
.drawer-hamburger.open .drawer-hamburger-icon:after { transform: rotate(30deg);}

@media screen and (max-width: 768px){
    .drawer-hamburger.open .drawer-hamburger-icon { height: 32px;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
.page{ padding: 80px 0 0;}

@media screen and (max-width: 768px){
    .page{ padding: 64px 0 0;}
}

.cart a{ display: flex; flex-direction: column; width: 70px; height: 70px; border: 1.5px solid #fff; border-radius: 100%; background: #05092f; color: #fff; text-align: center; font-size: 1.2rem; font-family: "Yu Gothic Pr6N B"; line-height: 1; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16)); align-items: center; justify-content: center;}
.cart a i{ width: 26px;}
.cart a span{ display: none;}
.cart a:hover i{ display: none;}
.cart a:hover:before{ padding: .2em 0; content: "もっと";}
.cart a:hover:after{ padding: .2em 0; content: "詳しく";}

@media screen and (max-width: 768px){
    .cart a{ width: 16vw; height: 16vw; font-size: 2.4vw;}
    .cart a i{ margin: 0 0 0 .5em; width: 5.786vw;}
    .cart a span{ display: block; padding: 1.6vw 0 0; letter-spacing: .1em;}
    .cart a:hover i{ display: block;}
    .cart a:hover:before{ content: none;}
    .cart a:hover:after{ content: none;}
}

.btn-top{ position: absolute;}
.btn-top a{ display: inline-block; width: 70px; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));}

@media screen and (max-width: 768px){
    .btn-top a{ width: 16vw;}
}

/* top
--------------------------------------------------- */
.hero{ position: relative; overflow: hidden; padding-top: 56.25%; width: 100%;}
.hero video{ position: absolute; top: 0; left: 50%; max-width: none; width: 103%; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .hero{ padding-top: 100%;}
}

.sec1{ position: relative; padding: 150px 0; color: #000;}
.sec1 h1{ text-align: center;}
.sec1 h1 img{ width: 300px;}
.sec1 p{ margin: 70px 0 0; text-align: center; letter-spacing: .08em; font-size: 1.8rem; line-height: 1.66;}
.sec1 nav{ margin: 100px auto 0; width: 1090px;}
.sec1 nav h2{ position: relative; text-align: center;}
.sec1 nav h2:after{ position: absolute; top: 50%; left: 0; z-index: -1; width: 100%; height: 1px; border-top: 1px dotted #000; content: ""; transform: translate(0,-50%);}
.sec1 nav h2 span{ position: relative; display: inline-block; padding: 0 1.5em; background: #fff; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.sec1 nav ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec1 nav ul > li{ padding: 50px 0 0; width: 20%;}
.sec1 nav figure img{ display: block; margin: 0 auto; width: 129px;}
.sec1 nav figcaption{ display: flex; margin: 15px 0 0; height: 40px; text-align: center; letter-spacing: normal; font-size: 1.6rem; line-height: 24px; align-items: center; justify-content: center;}

@media screen and (max-width: 768px){
    .sec1{ padding: 100px 10.666vw;}
    .sec1 h1 img{ width: 56vw;}
    .sec1 p{ margin: 30px 0 0; width: 100%; text-align: justify; letter-spacing: .05em; font-size: 1.4rem; line-height: 1.64;}
    .sec1 nav{ margin: 35px 0 0; width: 100%;}
    .sec1 nav h2 span{ padding: 0 1.5em; font-size: 1rem;}
    .sec1 nav ul > li{ padding: 30px 0 0; width: 50%;}
    .sec1 nav figure img{ width: 25.6vw;}
    .sec1 nav figcaption{ margin: 5px 0 0; height: 8vw; font-size: 3.2vw; line-height: 18px;}
}

.top main{ display: flex; flex-wrap: wrap;}
section{ position: relative; padding: 300px 0 150px; width: 100%;}

@media screen and (max-width: 768px){
    .top main{ flex-direction: column;}
    section{ padding: 70px 0;}
}

.sec2{ background: #678FAD; color: #000;}
.sec3{ padding: 300px 1.5625vw 150px; background: #B1B2B7;}
.sec4:before{ position: absolute; top: 0; left: 0; z-index: -1; width: 50%; height: 100%; background: #F5F5F5; content: "";}
.sec4:after{ position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 100%; background: #F0EFE2; content: "";}
.sec5{ background: #5B645F; color: #D1D1BD;}
.sec6{ padding: 150px 0; width: 62.5%; background: #D1D1BD;}
.sec7{ padding: 150px 0; width: 37.5%; background: #B27751; color: #000;}
.sec8{ padding: 0 50% 100px 0;}
.sec8:after{ position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 100%; background: url("../images/pt_buyer2.jpg") no-repeat top center / cover; content: "";}
.sec9{ background: #DEBFBF;}
.sec10{ padding: 100px 0 150px; width: 50%; background: #F5F5F5;}
.sec11{ padding: 100px 0 150px; width: 50%;}

@media screen and (max-width: 1600px){
    .sec6{ width: 100%;}
    .sec7{ width: 100%;}
}

@media screen and (max-width: 768px){
    .sec2{ padding: 70px 10.666vw;}
    .sec3{ padding: 70px 0;}
    .sec5{ padding: 70px 10.666vw;}
    .sec6{ padding: 70px 10.666vw; width: 100%;}
    .sec7{ padding: 70px 10.666vw; width: 100%;}
    .sec8{ padding: 70px 0;}
    .sec8:after{ content: none;}
    .sec9{ padding: 70px 10.666vw;}
    .sec10{ padding: 70px 10.666vw; width: 100%;}
    .sec11{ padding: 70px 10.666vw; width: 100%;}
}

.tl-set{ position: absolute; top: 0; left: 50%; display: flex; padding: 40px 0 0; color: #000; transform: translate(-50%,0); align-items: center; justify-content: center;}
.sec2 .tl-set{ padding: 30px 0 0;}
.sec4 .tl-set{ padding: 70px 0 0;}
.sec5 .tl-set{ padding: 30px 0 0; color: #D1D1BD;}
.sec6 .tl-set{ position: relative; top: auto; left: auto; padding: 0; transform: none;}
.sec8 .tl-set{ position: relative; top: auto; left: auto; transform: none;}
.tl-set > div{ display: flex; white-space: nowrap; align-items: center;}
.tl-set em{ position: relative; padding: 0 40px; white-space: nowrap; letter-spacing: .15em; font-style: normal; font-size: 1.6rem; font-family: "century-gothic", sans-serif;}
.tl-set em:after{ position: absolute; top: 50%; right: 0; width: 7px; height: 36px; background: url("../images/blt1.png") no-repeat center / contain; content: ""; transform: translate(0,-50%);}
.sec5 .tl-set em:after{ background: url("../images/blt1_yellow.png") no-repeat center / contain;}
.tl-set span{ padding: 0 0 0 30px; white-space: nowrap; letter-spacing: .05em; font-size: 2.8rem;}

@media screen and (max-width: 768px){
    .tl-set{ position: relative; top: auto; left: auto; flex-direction: column; padding: 0; text-align: center; transform: none;}
    .sec2 .tl-set{ padding: 0;}
    .sec4 .tl-set{ padding: 0;}
    .sec5 .tl-set{ padding: 0; color: #D1D1BD;}
    .sec6 .tl-set{ position: relative; top: auto; left: auto; padding: 0; justify-content: center;}
    .tl-set > div{ flex-direction: column-reverse; align-items: center;}
    .tl-set em{ padding: 0 0 10px; letter-spacing: .1em; line-height: 1.1875;}
    .tl-set em:after{ content: none;}
    .sec5 .tl-set em:after{ content: none;}
    .tl-set span{ position: relative; padding: 40px 0 0; font-size: 2.2rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.59;}
    .tl-set span:before{ position: absolute; top: 15px; left: 50%; width: 30.133vw; height: 1.866vw; background: url("../images/blt1_sp.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
    .sec5 .tl-set span:before{ background: url("../images/blt1_yellow_sp.png") no-repeat center / contain;}
}

.sec2 .tl-set i{ width: 150px;}
.sec3 .tl-set i{ width: 98px;}
.sec4 .tl-set i{ width: 130px;}
.sec5 .tl-set i{ width: 135px;}
.sec6 .tl-set i{ width: 140px;}
.sec8 .tl-set i{ width: 130px;}
.sec9 .tl-set i{ width: 111px;}

@media screen and (max-width: 768px){
    .sec2 .tl-set i{ width: 28.266vw;}
    .sec3 .tl-set i{ width: 19.2vw;}
    .sec4 .tl-set i{ width: 26.666vw;}
    .sec5 .tl-set i{ width: 26.133vw;}
    .sec6 .tl-set i{ width: 27.466vw;}
    .sec8 .tl-set i{ width: 27.466vw;}
    .sec9 .tl-set i{ width: 22.133vw;}
}

.tl-set2{ display: flex; flex-direction: column; color: #000; text-align: center; align-items: center;}
.tl-set2 > div{ display: flex; flex-direction: column; align-items: center;}
.tl-set2 i img{ width: auto; height: 133px;}
.tl-set2 em{ position: relative; padding: 20px 0 30px; letter-spacing: .1em; font-style: normal; font-size: 2.1rem; font-family: "century-gothic", sans-serif; line-height: 1.19;}
.tl-set2 em:after{ position: absolute; bottom: 0; left: 50%; width: 150px; height: 10px; background: url("../images/blt2.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.tl-set2 em small{ display: block; margin: 10px 0 0; font-size: 1.3rem;}
.tl-set2 span{ position: relative; margin: 30px 0 0; letter-spacing: .05em; font-size: 2.8rem;}
.tl-set2 span small{ position: absolute; top: -50px; right: 0; display: inline-block; padding: 6px; border-radius: 5px; background: #fff; letter-spacing: .05em; font-size: 1.8rem; transform: rotate(-15deg);}
.sec10 .tl-set2 span small{ background: #DEBFBF;}
.sec11 .tl-set2 span small{ background: #EAE176;}

@media screen and (max-width: 768px){
    .tl-set2 > div{ flex-direction: column-reverse;}
    .tl-set2 i img{ height: 20.533vw;}
    .tl-set2 em{ padding: 0 0 10px; font-size: 1.6rem; line-height: 1.1875;}
    .tl-set2 em:after{ content: none;}
    .tl-set2 em small{ display: block; margin: 10px 0 0; font-size: 1.3rem;}
    .tl-set2 span{ margin: 0; padding: 40px 0 0; font-size: 2.2rem; font-family: "Yu Gothic Pr6N B";}
    .tl-set2 span:before{ position: absolute; top: 15px; left: 50%; width: 30.133vw; height: 1.866vw; background: url("../images/blt1_sp.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
    .tl-set2 span small{ position: relative; top: auto; right: auto; display: block; padding: 10px 0 0; border-radius: 0; background: none; text-align: center; font-size: 2.2rem; transform: none;}
    .sec10 .tl-set2 span small{ background: none;}
    .sec11 .tl-set2 span small{ background: none;}
}

.detail h3{ letter-spacing: .1em; font-size: 2.4rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.562;}
.detail h3 span{ display: block; margin: 0 0 10px; font-size: 1.6rem;}
.detail h3 + p{ margin: 20px 0 0; letter-spacing: .1em; line-height: 1.57;}

@media screen and (max-width: 768px){
    .detail h3{ letter-spacing: .05em; font-size: 1.8rem; line-height: 1.562;}
    .detail h3 span{ margin: 0 0 10px; letter-spacing: .1em; font-size: 1.2rem;}
    .detail h3 + p{ margin: 30px 0 0; line-height: 1.83;}
    .sec2 .detail h3 + p{ margin: 30px 0 0; text-align: left;}
}

.more a{ display: inline-block; padding: 7px 10px; border-radius: 0 5px 5px 5px; background: #000; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); color: #fff; letter-spacing: .1em; font-size: 1.2rem;}
.detail .more{ margin: 25px 0 0;}

@media screen and (max-width: 768px){
    .more a{ font-size: 1rem;}
    .detail .more{ margin: 35px 0 0;}
}

.btn{ margin: 100px 0 0; text-align: center;}
.btn a{ position: relative; display: flex; margin: 0 auto; width: 450px; height: 50px; border: 1px solid #000; border-radius: 10px; background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); color: #505050; letter-spacing: .05em; font-size: 1.5rem; align-items: center; justify-content: center;}
.btn a:before{ position: absolute; left: 20px; content: "CATEGORY"; font-size: 1rem; font-family: "century-gothic", sans-serif;}
.btn a:after{ position: absolute; right: 20px; content: "一覧";}

@media screen and (max-width: 768px){
    .btn{ margin: 50px 0 0;}
    .btn a{ padding: 0 0 0 4vw; width: 66.666vw; height: 40px; font-size: 1.2rem; justify-content: flex-start;}
    .btn a:before{ content: none;}
    .btn a:after{ right: 4vw;}
}

.slider-wrap{ margin: 0 auto; width: 1000px;}
.slider-wrap .detail{ padding: 50px 0; text-align: center;}

@media screen and (max-width: 768px){
    .slider-wrap{ margin: 40px 0 0; width: 100%;}
    .slider-wrap .detail{ padding: 30px 0;}
}

.list-row3{ display: flex;}
.list-row3 > li{ width: calc(100% / 3); text-align: center;}
.list-row3 h3{ margin: 70px 0 0;}

@media screen and (max-width: 768px){
    .list-row3{ flex-direction: column;}
    .list-row3 > li{ padding: 70px 6.666vw 0 0; width: 100%; text-align: left;}
    .list-row3 > li:nth-child(even){ padding: 70px 0 0 6.666vw; text-align: right;}
    .list-row3 h3{ margin: 30px 0 0;}
    .list-row3 .detail{ padding: 0 0 0 10.666vw;}
    .list-row3 > li:nth-child(even) .detail{ padding: 0 10.666vw 0 0;}
}

.combi{ display: flex; justify-content: space-around;}
.combi > div{ width: 600px;}
.list-combi{ position: relative; display: flex; justify-content: center;}
.list-combi:after{ position: absolute; top: 95px; left: 50%; width: 41px; height: 41px; background: url("../images/img_best.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.combi .list-combi{ margin: -30px 0 0;}
.list-combi > li{ padding: 0 30px; text-align: center;}
.list-combi figure{ width: 230px; height: 230px; border-radius: 100%; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));}
.list-combi h3{ margin: 30px 0 0; letter-spacing: .1em; font-size: 1.6rem; line-height: 1.5625;}
.list-combi + p{ margin: 30px 0 0; text-align: center; letter-spacing: .1em; line-height: 1.571;}

@media screen and (max-width: 768px){
    .combi{ display: block; padding: 50px 8vw 0;}
    .combi > div{ width: 100%;}
    .combi .slick-prev,
    .combi .slick-next { top: auto; bottom: 0; width: 8.533vw; height: 1.866vw;}
    .combi .slick-prev:before,
    .combi .slick-next:before { width: 8.533vw; height: 1.866vw; background: url("../images/arrow2.png") no-repeat center / contain;}
    .combi .slick-prev { left: calc(50% - 16vw);}
    .combi .slick-next { right: calc(50% - 16vw);}
    .combi .slick-dots{ width: calc(100% - 16vw);}
    .combi .slick-slide{ padding: 6px 6px 50px;}
    .combi .slick-slide > figure{ display: none;}
    .list-combi:after{ top: 15vw; width: 6.666vw; height: 6.666vw;}
    .combi .list-combi{ margin: 0; justify-content: space-between;}
    .list-combi > li{ padding: 0;}
    .list-combi figure{ width: 37.333vw; height: 37.333vw;}
    .list-combi h3{ margin: 15px 0 0; font-size: 1rem;}
}

.list-row4{ display: flex; margin: 0 auto; width: 1000px; justify-content: space-between;}
.list-row4 > li{ width: calc(25% - 35px);}
.list-row4 h3{ margin: 30px 0 0; letter-spacing: .1em; font-size: 1.6rem; line-height: 1.8;}
.list-row4 h3 span{ display: block; margin: 0; letter-spacing: .05em;}
.sec9 .list-row4 h3{ min-height: 87px;}
.list-row4 p{ margin: 30px 0 0; letter-spacing: .04em; line-height: 1.64;}
.list-row4 .more{ text-align: center;}
.list-row4 .r40{ overflow: hidden; border-radius: 40px; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));}

@media screen and (max-width: 768px){
    .list-row4{ width: 100%; flex-wrap: wrap;}
    .list-row4 > li{ padding: 70px 0 0; width: calc(50% - 2.666vw);}
    .list-row4 h3{ margin: 20px 0 0; font-size: 1rem; line-height: 1.5;}
    .list-row4 h3 span{ letter-spacing: .1em; font-size: 1.2rem;}
    .list-row4 p{ margin: 20px 0 0; letter-spacing: .04em; line-height: 1.5;}
    .sec5 .list-row4 p{ min-height: 19.2vw;}
    .list-row4 .more{ margin: 20px 0 0; text-align: center;}
    .list-row4 .r40{ border-radius: 15px;}
    .sec9 .list-row4{ flex-direction: column; padding: 5px 0 0;}
    .sec9 .list-row4 > li{ display: flex; padding: 25px 0 0; width: 100%; justify-content: space-between; align-items: center;}
    .sec9 .list-row4 figure{ width: 21.333vw;}
    .sec9 .list-row4 .detail{ width: 53.333vw;}
    .sec9 .list-row4 h3{ margin: 0; min-height: 0;}
    .sec9 .list-row4 h3 span{ margin: 0 0 5px;}
    .sec9 .list-row4 p{ margin: 5px 0 0; letter-spacing: .05em; font-size: 1rem; line-height: 1.8;}
    .sec9 .list-row4 .more{ display: none;}
}

.list-row2{ display: flex; margin: -30px auto 0; width: 1000px; flex-wrap: wrap; justify-content: space-between;}
.list-row2 > li{ padding: 100px 0 0; width: calc(50% - 20px);}
.list-row2 h3{ margin: 30px 0 0; letter-spacing: .1em; font-size: 1.4rem; line-height: 1;}
.list-row2 h3 span{ display: inline-block; margin: 0 1em 0 0; padding: 0 1em 0 0; border-right: 1px solid; font-size: 1.6rem; font-family: "Yu Gothic Pr6N B";}
.list-row2 h3 + p{ margin: 10px 0 0;}
.sec6 .list-row2 .more{ display: none;}

@media screen and (max-width: 768px){
    .list-row2{ margin: 0; width: 100%;}
    .list-row2 > li{ padding: 50px 0 0; width: calc(50% - 2.666vw);}
    .list-row2 h3{ margin: 20px 0 0; font-size: 1.2rem; line-height: 1.5;}
    .sec6 .list-row2 h3{ display: none;}
    .list-row2 h3 span{ display: block; margin: 0; padding: 0; border-right: none; font-size: 1rem;}
    .list-row2 p{ margin: 20px 0 0;}
    .sec6 .list-row2 p{ min-height: 22vw; line-height: 1.5;}
    .sec6 .list-row2 .more{ display: block; margin: 0; text-align: center;}
}

.list-column{ margin: 0 auto; padding: 80px 0 0; width: 470px;}
.list-column > li{ display: flex; padding: 20px 0; border-top: 1px solid #E6E6E6; align-items: center;}
.list-column > li:first-child{ border: none;}
.list-column figure{ position: relative; overflow: hidden; width: 160px; border-radius: 100%;}
.list-column figure a{ display: block;}
.list-column .detail{ padding: 0 0 0 20px; width: calc(100% - 160px);}
.list-column h3{ white-space: nowrap; letter-spacing: .1em; font-size: 1.6rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.8;}
.list-column .more{ display: none;}

.sec7 .list-column{ padding: 30px 0 0; width: 450px; color: #000;}
.sec7 .list-column > li{ padding: 45px 30px 45px 0; border-top: 1px solid #000;}
.sec7 .list-column > li:first-child{ border: none;}
.sec7 .list-column figure{ width: 180px;}
.sec7 .list-column .detail{ padding: 0 0 0 40px; width: calc(100% - 180px);}

@media screen and (max-width: 768px){
    .list-column{ display: flex; margin: -20px 0 0; padding: 0; width: 100%; flex-wrap: wrap; justify-content: space-between;}
    .list-column > li{ flex-direction: column; padding: 50px 0 0; width: calc(50% - 2.666vw); border-top: none;}
    .list-column figure{ width: 100%;}
    .list-column .detail{ padding: 0; width: 100%;}
    .list-column h3{ display: none;}
    .list-column h3 + p{ margin: 10px 0 0; min-height: 20vw; letter-spacing: .07em; font-size: 1rem; line-height: 1.8;}
    .list-column .more{ display: block; margin: 10px 0 0; text-align: center;}

    .sec7 .list-column{ flex-direction: column; margin: 20px 0 0; padding: 0; width: 100%;}
    .sec7 .list-column > li{ flex-direction: row; padding: 20px 0; width: 100%; border-top: 1px solid #000; justify-content: space-between; align-items: center;}
    .sec7 .list-column > li:first-child{ border: none;}
    .sec7 .list-column figure{ width: 26.666vw;}
    .sec7 .list-column .detail{ padding: 0; width: 48vw;}
    .sec7 .list-column h3{ display: block; font-size: 1rem; line-height: 1.8;}
    .sec7 .list-column h3 + p{ min-height: 0;}
}

.choice{ margin: 0 auto; padding: 280px 0 0; width: 560px; text-align: center;}
.choice > div:nth-child(n+2){ display: none;}
.choice .comment{ margin: 60px 0 0; text-align: center;}
.choice .comment img{ width: 300px;}
.choice .detail{ margin: 30px 0 0;}
.choice h3{ letter-spacing: .1em; font-size: 2rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.75;}
.choice h3 span{ display: block; margin: 0; font-size: 1.6rem;}

@media screen and (max-width: 768px){
    .choice{ margin: 30px 0 0; padding: 0; width: 100%;}
    .choice > div:nth-child(n+2){ display: block;}
    .choice .slick-slide .pc{ display: none;}
    .choice .comment{ margin: 20px 0 0; padding: 0 6.666vw; text-align: center;}
    .choice .comment img{ width: 100%;}
    .choice .detail{ margin: 30px 0 0; padding: 0 0 30px;}
    .choice h3{ font-size: 1.8rem;}
    .choice h3 span{ font-size: 1.2rem;}
}

.note{ display: flex; letter-spacing: .1em; font-size: 1.6rem; font-family: "Yu Gothic Pr6N D"; align-items: center; justify-content: center;}
.note span{ width: 10px; height: 10px; border-radius: 100%; background: #FF0000;}
.note i{ margin: 0 14px; width: 30px;}

@media screen and (max-width: 768px){
    .note{ font-size: 1rem;}
    .note span{ width: 8px; height: 8px;}
    .note i{ margin: 0 6px 0 12px; width: 19px;}
}

/* only one, the standard
--------------------------------------------------- */
.type1 header{ padding: 120px 0 0; background: #678FAD; color: #000;}
.ts header{ background: #B1B2B7;}
.tl-set3{ display: flex; flex-direction: column; align-items: center;}
.tl-set3 div{ display: flex; flex-direction: column; align-items: center;}
.tl-set3 em{ letter-spacing: .05em; font-style: normal; font-size: 5rem; font-family: "century-gothic", sans-serif;}
.tl-set3 i{ padding: 55px 0 0;}
.tl-set3 span{ position: relative; padding: 65px 0 35px; letter-spacing: .05em; font-size: 2.4rem; font-family: "Yu Gothic Pr6N B";}
.tl-set3 span:after{ position: absolute; bottom: 0; left: 50%; width: 70px; height: 2px; background: #000; content: ""; transform: translate(-50%,0);}
.type1 header p{ margin: 40px 0 0; text-align: center; letter-spacing: .06em; font-size: 1.8rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.77;}

@media screen and (max-width: 768px){
    .type1 header{ padding: 80px 0 0;}
    .tl-set3 em{ font-size: 3rem;}
    .tl-set3 i{ padding: 30px 0 0;}
    .ts .tl-set3 span{ padding: 35px 0;}
    .tl-set3 span:after{ width: 18.666vw;}
    .type1 header p{ padding: 0 10.666vw; text-align: left; letter-spacing: normal; font-size: 1.5rem; line-height: 1.73;}
}

.type1 .snav{ padding: 45px 0 120px; background: #678FAD; color: #000;}
.ts .snav{ background: #B1B2B7;}
.list-number{ display: flex; justify-content: center;}
.list-number > li{ padding: 0 15px;}
.list-number a{ position: relative; display: flex; width: 40px; height: 40px; border-radius: 100%; background: #DEBFBF; font-size: 1.6rem; font-family: "Yu Gothic Pr6N B"; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.3)); align-items: center; justify-content: center;}
.ts .list-number a{ background: #D1D1BD;}
.list-number .new a:after{ position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 100%; background: #FF0000; content: "";}
.type1 .note{ margin: 45px 0 0;}

@media screen and (max-width: 768px){
    .type1 .snav{ padding: 50px 10.666vw 60px;}
    .list-number{ margin: -5.333vw 0 0; justify-content: flex-start; flex-wrap: wrap;}
    .list-number > li{ padding: 5.333vw 2.666vw 0; width: 20%;}
    .list-number a{ margin: 0 auto; width: 8vw; height: 8vw; font-size: 1.2rem;}
    .list-number .new a:after{ top: -4px; right: -4px; width: 8px; height: 8px;}
    .type1 .note{ margin: 35px 0 0;}
}

.type1 .content{ position: relative; padding: 0 0 315px;}
.type1 .sec{ margin: 200px 0 0; padding: 0; text-align: center;}
.type1 .btn-top{ bottom: 70px; left: 50%; width: 800px; text-align: right; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .type1 .content{ padding: 0 0 150px;}
    .type1 .sec{ position: relative; margin: 150px 0 0; padding: 100px 10.666vw 0;}
    .type1 .sec:before{ position: absolute; top: 0; left: 50%; width: calc(100% - 4.26vw); height: 1px; background: #707070; content: ""; transform: translate(-50%,0);}
    .type1 .content > .sec:first-child{ margin: 0;}
    .type1 .content > .sec:first-child:before{ content: none;}
    .type1 .btn-top{ bottom: 60px; padding: 0 10.666vw; width: 100%;}
}

.oo .sec h2{ font-size: 5.4rem;}
.oo .lead{ margin: 45px 0 0; letter-spacing: .09em; font-size: 2.2rem; line-height: 1.81;}
.oo .row{ display: flex; margin: 60px auto 0; width: 800px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.oo .row > figure{ padding: 0 0 30px; width: 485px;}
.oo .row > .exp{ width: 275px;}
.oo .slider{ padding: 0 0 30px;}
.oo .slick-prev,
.oo .slick-next { top: auto; bottom: 1px; z-index: 10; width: 25px; height: 6px;}
.oo .slick-prev:before,
.oo .slick-next:before { width: 25px; height: 6px; background: url("../images/arrow3.png") no-repeat center / contain;}
.oo .slick-prev { left: 0;}
.oo .slick-next { right: 0;}
.oo .slick-dots{ z-index: 1;}
.oo .slick-dots li button:hover:before,
.oo .slick-dots li button:focus:before { background: #6C9BBE;}
.oo .slick-dots li.slick-active button:before { background: #6C9BBE;}
.oo .exp p{ text-align: left; letter-spacing: .025em; font-size: 1.6rem; line-height: 2.125;}
.oo .row > .point{ display: flex; flex-direction: column; margin: 15px 0 0; width: 485px; align-items: center;}
.oo .point dt{ position: relative; padding: 0 0 20px; color: #6C9BBE; letter-spacing: .2em; font-weight: 700; font-size: 2.1rem; font-family: "century-gothic", sans-serif;}
.oo .point dt:after{ position: absolute; bottom: 0; left: 50%; width: 162px; height: 10px; background: url("../only_one/images/blt.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.oo .point dd{ padding: 15px 0 0; white-space: nowrap; font-size: 1.8rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.66;}
.oo .point figure{ margin: 20px 0 0; width: 133px;}
.oo .point7 figure{ width: 343px;}
.oo .point8 figure{ width: 241px;}
.type1 .info{ position: relative; padding: 30px 0 80px; border-top: 1px dotted #707070; border-bottom: 1px dotted #707070; text-align: left; letter-spacing: .05em;}
.oo .row > .info{ margin: 15px 0 0; width: 275px;}
.type1 .info h3{ letter-spacing: .1em; font-family: "Yu Gothic Pr6N B"; line-height: 1.85;}
.type1 .info p{ margin: 15px 0 0; line-height: 1.57;}
.type1 .info .price{ margin: 30px 0 0;}
.type1 .info .cart{ position: absolute; right: 0; bottom: 30px;}
.oo .cart a{ background: #6C9BBE;}
.oo .cart a:hover{ background: #B27751;}

@media screen and (max-width: 768px){
    .oo .sec h2{ font-size: 3rem;}
    .oo .lead{ margin: 40px 0 0; text-align: left; letter-spacing: normal; font-size: 2.2rem; line-height: 1.45;}
    .oo .row{ flex-direction: column; margin: 30px 0 0; width: 100%;}
    .oo .row > figure{ padding: 0 0 30px; width: 100%;}
    .oo .row > .exp{ padding: 40px 0 0; width: 100%;}
    .oo .exp p{ letter-spacing: normal; font-size: 1.4rem; line-height: 1.64;}
    .oo .row > .point{ margin: 30px 0 0; padding: 0 0 70px; width: 100%;}
    .oo .point dt{ padding: 0 0 15px; font-size: 1.4rem;}
    .oo .point dt:after{ width: 30.133vw; height: 1.866vw;}
    .oo .point dd{ font-size: 1.6rem; line-height: 1.4375;}
    .oo .point dd img{ margin: 0 auto; width: 53.333vw;}
    .oo .point figure{ margin: 20px auto 0; width: 27.4666vw;}
    .oo .point7 figure{ width: 71.501vw;}
    .oo .point8 figure{ width: 64.266vw;}
    .type1 .info{ padding: 35px 0; width: 100%;}
    .oo .row > .info{ margin: 0; width: 100%;}
    .type1 .info p{ margin: 20px 0 0; line-height: 1.66;}
    .type1 .info .price{ margin: 20px 0 0; font-size: 1.6rem;}
    .type1 .info .cart{ top: 35px; bottom: auto;}
    .oo .slick-prev,
    .oo .slick-next { width: 6.666vw; height: 1.445vw;}
    .oo .slick-prev:before,
    .oo .slick-next:before { width: 6.666vw; height: 1.445vw;}
}

.ts .sec .mark img{ width: 96px;}
.ts .sec > figure{ margin: 35px auto 0; width: 614px;}
.ts .slick-prev,
.ts .slick-next { top: 50%; z-index: 10; width: 50px; height: 50px; transform: translate(0,-50%);}
.ts .slick-prev.slick-disabled:before,
.ts .slick-next.slick-disabled:before { opacity: 1;}
.ts .slick-prev:before,
.ts .slick-next:before { width: 50px; height: 50px; background: url("../the_standard/images/arrow.png") no-repeat center / contain;}
.ts .slick-prev:before{ transform: rotate(180deg);}
.ts .slick-prev { left: -95px;}
.ts .slick-next { right: -95px;}
.ts .lead{ margin: 45px 0 0; letter-spacing: .09em; font-weight: 500; font-size: 2.2rem; font-family: "TBUDMincho M"; line-height: 1.9;}
.ts .item{ display: flex; flex-direction: column; margin: 25px 0 0; align-items: center;}
.ts .item h2{ letter-spacing: .1em; font-size: 2.6rem; font-family: "Yu Gothic Pr6N B"; line-height: 2.19;}
.ts .item h2 span{ display: block; font-size: 1.3rem; line-height: 1;}
.ts .item figure{ margin: 0 0 15px;}
.ts .item .item1{ width: 86px;}
.ts .item .item2{ width: 94px;}
.ts .item .item3{ width: 94px;}
.ts .item .item4{ width: 92px;}
.ts .item .item5{ width: 92px;}
.ts .item .item6{ width: 88px;}
.ts .row{ display: flex; margin: 30px auto 0; width: 800px; text-align: left; justify-content: space-between; align-items: flex-start;}
.ts .row > .exp{ width: 467px;}
.ts .row > .exp p{ letter-spacing: .02em; font-weight: 500; font-size: 1.6rem; font-family: "TBUDMincho M"; line-height: 2.125;}
.ts .row > .info{ width: 300px;}
.ts .cart a{ background: #B27751;}
.ts .cart a:hover{ background: #B1B2B7;}

@media screen and (max-width: 768px){
    .ts .sec .mark img{ width: 18.666vw;}
    .ts .sec > figure{ margin: 50px -10.666vw 0; width: 100vw;}
    .ts .lead{ margin: 20px 0 0; text-align: left; letter-spacing: normal; line-height: 1.36;}
    .ts .item{ display: flex; margin: 60px 0 0;}
    .ts .item h2{ margin: 15px 0 0; font-size: 1.8rem;}
    .ts .item h2 span{ font-size: 1rem;}
    .ts .item .item1{ width: 31.466vw;}
    .ts .item .item2{ width: 37.6vw;}
    .ts .item .item3{ width: 37.6vw;}
    .ts .item .item4{ width: 37.866vw;}
    .ts .item .item5{ width: 40.8vw;}
    .ts .item .item6{ width: 34.133vw;}
    .ts .row{ flex-direction: column; margin: 30px 0 0; width: 100%;}
    .ts .row > .exp{ width: 100%;}
    .ts .row > .exp p{ letter-spacing: normal; font-size: 1.4rem; line-height: 1.64;}
    .ts .row > .info{ margin: 50px 0 0; width: 100%; border-top: 1px dotted #707070;}
    .ts .slick-slide{ padding: 0 7px; width: 80vw; height: auto;}
    .ts .slick-slide img{ width: 100%; height: auto;}
}

/* best combination
--------------------------------------------------- */
.bc{ position: relative;}
.bc:before{ position: absolute; top: 0; left: 0; z-index: -1; width: 50%; height: 100%; background: #F5F5F5; content: "";}
.bc:after{ position: absolute; top: 0; right: 0; z-index: -1; width: 50%; height: 100%; background: #F0EFE2; content: "";}

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

.bc h1{ position: absolute; top: 120px; left: 3.645vw; z-index: 10; width: 3.125vw; color: #000; text-align: center;}
.bc header{ padding: 120px 0 0; color: #000; text-align: center;}
.bc .lg img{ width: 270px;}

@media screen and (max-width: 768px){
    .bc h1{ top: auto; bottom: 40px; left: 4.8vw; width: 2.4vw;}
    .bc header{ position: relative; padding: 150px 0 170px;}
    .bc .lg img{ width: 58.666vw;}
    .bc header h2{ margin: 120px auto 0; width: 44vw; text-align: justify; white-space: nowrap; letter-spacing: .2em; font-size: 2rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.75;}
    .bc header p{ margin: 30px 0 0; padding: 0 10.666vw; text-align: left; font-size: 1.4rem; line-height: 1.64;}
}

.bc .content{ position: relative; padding: 0 0 260px; color: #000; text-align: center;}
.bc .sec{ margin: 200px 0 0; padding: 200px 0 0; border-top: 1px dashed;}
.bc .content > .sec:first-of-type{ margin: 120px 0 0; padding: 0; border: none;}
.bc .btn-top{ bottom: 70px; left: 50%; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .bc .content{ padding: 0 0 170px; text-align: left;}
    .bc .sec{ margin: 150px 0 0; padding: 0 10.666vw; border-top: none;}
    .bc .content > .sec:first-of-type{ margin: 0; padding: 0 10.666vw;}
    .bc .btn-top{ right: 10.666vw; bottom: 60px; left: auto; transform: none;}
}

.bc .sec > figure{ margin: 0 auto; width: 1000px;}
.bc .sec h2{ margin: 100px 0 0; font-size: 2.8rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.6;}
.bc .sec > p{ margin: 40px auto 0; font-size: 1.6rem; line-height: 1.75;}

@media screen and (max-width: 768px){
    .bc .sec > figure{ margin: 0 -10.666vw; width: 100vw;}
    .bc .sec h2{ margin: 50px 0 0; font-size: 2.2rem; font-family: "Yu Gothic Pr6N M"; line-height: 1.45;}
    .bc .sec > p{ margin: 30px 0 0; font-size: 1.4rem; line-height: 1.64;}
}

.bc .list-combi{ margin: 80px 0 0;}
.bc .list-combi:after{ top: 90px; width: 60px; height: 60px;}
.bc .list-combi > li{ padding: 0 75px;}
.bc .list-combi h3{ margin: 30px 0 0; font-size: 1rem; font-family: "Yu Gothic Pr6N B"; line-height: 2;}

@media screen and (max-width: 768px){
    .bc .list-combi{ margin: 50px -2.666vw 0; justify-content: space-between;}
    .bc .list-combi:after{ top: 15.2vw; width: 6.666vw; height: 6.666vw;}
    .bc .list-combi > li{ padding: 0;}
    .bc .list-combi h3{ margin: 20px 0 0;}
    .bc .list-combi figure{ position: relative;}
    .bc .list-combi .modal-button{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%;}
}

.bc .row{ display: flex; margin: 100px 0 0; justify-content: space-around;}
.bc .info{ position: relative; padding: 150px 8.854vw; width: 43.75vw; background: #fff; text-align: left; line-height: 1.75;}
.bc .info ul{ display: flex; justify-content: space-between;}
.bc .info ul > li{ width: calc(100% / 3 - 5px);}
.bc .info p{ margin: 40px 0 0; color: #707070; font-size: 1.6rem;}
.bc .info .set{ position: relative;}
.bc .info h4{ margin: 40px 0 0; color: #000; letter-spacing: .05em;}
.bc .info h4 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.bc .info .price{ letter-spacing: .05em;}
.bc .info .cart{ position: absolute; right: 0; bottom: 0;}
.bc .cart a{ background: #B27751;}
.bc .cart a:hover{ background: #B1B2B7;}

@media screen and (max-width: 768px){
    .bc .row{ display: block; margin: 0;}
    .bc .info{ padding: 0; width: 100%; background: none; line-height: 1.64;}
    .bc .modal-content{ background: #F5F5F5;}
    .bc .row > .info:nth-child(even) .modal-content{ background: #F0EFE2;}
    .bc .info .scroll::-webkit-scrollbar-track{ background: #fff;}
    .bc .info .scroll::-webkit-scrollbar-thumb{ background: #B1B2B7;}
    .bc .info .scroll ul > li{ width: 180px;}
    .bc .info p{ margin: 20px 0 0; font-size: 1.4rem;}
    .bc .info .set{ padding: 70px 0 0;}
    .bc .info h4{ margin: 0;}
    .bc .info h4 span{ font-size: 1rem;}
    .bc .info .price{ padding: 10px 0 0; font-size: 1.6rem;}
}

/* masterpiece lighting
--------------------------------------------------- */
.ml{ background: #5B645F;}

.ml header{ padding: 50px 2.604vw 0; color: #D1D1BD;}
.ml header .row{ display: flex; justify-content: space-between;}
.ml header h1{ letter-spacing: .05em; font-size: 4rem;}
.ml header p{ text-align: right; font-size: 2.2rem; line-height: 1.81;}

@media screen and (max-width: 768px){
    .ml header{ display: flex; flex-direction: column-reverse; padding: 120px 10.666vw 0;}
    .ml header .row{ flex-direction: column;}
    .ml header h1{ padding: 120px 0 0; text-align: center; font-size: 3rem; line-height: 1.33;}
    .ml header p{ margin: 50px 0 0; text-align: center; font-size: 1.4rem; line-height: 1.64;}
}

.ml header .lg{ display: flex; flex-direction: column; margin: 50px 0 0; color: #000; font-weight: 700; font-family: "century-gothic", sans-serif; align-items: center; justify-content: center;}
.ml header .lg i{ width: 230px;}
.ml header .lg em{ position: relative; margin: 40px 0 0; padding: 0 0 60px; text-align: center; letter-spacing: .1em; font-style: normal; font-size: 2rem; line-height: 1.75;}
.ml header .lg em:after{ position: absolute; bottom: 0; left: 50%; width: 80px; height: 3px; background: #000; content: ""; transform: translate(-50%,0);}
.ml header .lg p{ margin: 60px 0 0; letter-spacing: .1em; font-size: 1.2rem; line-height: 2;}

@media screen and (max-width: 768px){
    .ml header .lg{ margin: 0; color: #D1D1BD;}
    .ml header .lg i{ width: 51.2vw;}
    .ml header .lg em{ margin: 30px 0 0; padding: 0 0 115px; font-size: 1.5rem; line-height: 2;}
    .ml header .lg em:after{ width: 21.333vw;}
    .ml header .lg p{ display: none;}
}

.ml .snav{ margin: 135px 0 0; color: #D1D1BD;}
.ml .slider .slick-slide{ padding: 0 25px; height: 180px;}
.ml .slider .slick-slide img{ width: auto; height: 100%;}
.ml .slider a{ display: block; overflow: hidden; height: 100%; border-radius: 25px; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));}

@media screen and (max-width: 768px){
    .ml .snav{ position: relative; margin: 0; padding: 70px 6.666vw 0;}
    .ml .slider{ display: flex; flex-wrap: wrap; justify-content: space-between;}
    .ml .slider > li{ padding: 30px 4vw 0; width: calc(100% / 3);}
    .ml .slider > li a{ width: 100%; border-radius: 15px;}
}

.ml .content{ position: relative; padding: 0 0 210px; color: #D1D1BD;}
.ml .btn-top{ bottom: 70px; left: 50%; width: 1000px; text-align: right; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .ml .content{ padding: 0 0 170px;}
    .ml .btn-top{ bottom: 60px; left: 0; padding: 0 10.666vw 0 0; width: 100%; transform: none;}
}

.ml .list-item{ position: relative; display: flex; margin: 0 auto; padding: 50px 0 0; width: 1100px; line-height: 1.75; flex-wrap: wrap;}
.ml .list-item > li{ position: relative; margin: 200px 0 0; padding: 0 50px; width: 50%;}
.ml .list-item figure{ overflow: hidden; border-radius: 40px;}
.ml .list-item h2{ margin: 70px 0 0; font-size: 2.2rem;}
.ml .list-item p{ margin: 45px 0 0; font-size: 1.6rem;}
.ml .list-item .set{ position: relative;}
.ml .list-item h3{ margin: 70px 0 0; letter-spacing: .05em;}
.ml .list-item h3 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.ml .list-item .price{ padding: 0 0 60px; border-bottom: 1px dotted; letter-spacing: .05em;}
.ml .list-item .cart{ position: absolute; right: 0; bottom: 60px;}
.ml .cart a:hover{ background: #EAE176; color: #05092F;}

@media screen and (max-width: 768px){
    .ml .list-item{ flex-direction: column; margin: 0; padding: 0; width: 100%; line-height: 1.64;}
    .ml .list-item > li{ position: relative; margin: 150px 0 0; padding: 150px 10.666vw 0; width: 100%;}
    .ml .list-item > li:before{ position: absolute; top: 0; left: 50%; width: 21.333vw; height: .8vw; background: url("../masterpiece_lighting/images/blt1.png") no-repeat top center / contain; content: ""; transform: translate(-50%,0);}
    .ml .list-item > li:nth-child(2):before{ background-image: url("../masterpiece_lighting/images/blt2.png");}
    .ml .list-item > li:nth-child(3):before{ background-image: url("../masterpiece_lighting/images/blt3.png");}
    .ml .list-item > li:nth-child(4):before{ background-image: url("../masterpiece_lighting/images/blt4.png");}
    .ml .list-item > li:nth-child(5):before{ background-image: url("../masterpiece_lighting/images/blt5.png");}
    .ml .list-item > li:nth-child(6):before{ background-image: url("../masterpiece_lighting/images/blt6.png");}
    .ml .list-item figure{ margin: 40px 0 0;}
    .ml .list-item .row{ display: flex; flex-direction: column-reverse;}
    .ml .list-item h2{ margin: 0; line-height: 1.45;}
    .ml .list-item p{ margin: 40px 0 0; font-size: 1.4rem;}
    .ml .list-item h3{ margin: 40px 0 0;}
    .ml .list-item .price{ padding: 20px 0 40px;}
    .ml .list-item .cart{ top: 0; bottom: auto;}
    .ml .cart a{ background: #D1D1BD; color: #5B645F;}
}

/* daily dining
--------------------------------------------------- */
.dd{ background: #D1D1BD;}
.dd header{ position: relative; padding: 190px 0 0; color: #000; text-align: center;}
.dd header h1{ position: absolute; top: 4.166vw; right: 4.166vw; width: 10.416vw;}
.dd header figure img{ width: 254px;}
.dd header figcaption{ margin: 40px 0 0; letter-spacing: .1em; font-size: 2.4rem; font-family: "century-gothic", sans-serif;}
.dd header figcaption span{ color: #fff;}
.dd header p{ margin: 60px 0 0; font-weight: 500; font-size: 2.5rem; font-family: "TBUDMincho M"; line-height: 1.6;}

@media screen and (max-width: 768px){
    .dd header{ padding: 100px 10.666vw 0;}
    .dd header h1{ position: relative; top: auto; right: auto; margin: 0 auto; width: 40vw;}
    .dd header figure{ margin: 45px 0 0;}
    .dd header figure img{ width: 47.2vw;}
    .dd header figcaption{ margin: 25px 0 0; font-size: 2rem;}
    .dd header p{ margin: 70px 0 0; padding: 20px 0; border-top: 1px dotted #05092F; border-bottom: 1px dotted #05092F; text-align: justify; font-size: 1.4rem; line-height: 1.64;}
}

.dd .content{ position: relative; padding: 0 0 310px;}
.dd .sec{ display: flex; margin: 200px 0 0; padding: 0 1.562vw 0 0; justify-content: space-between;}
.dd .content > .sec:nth-child(even){ flex-direction: row-reverse; padding: 0 0 0 1.562vw;}
.dd .sec > figure{ width: 50%;}
.dd .sec > .info{ position: relative; padding: 70px 7.812vw 0; width: calc(50% - 1.562vw); border-top: 1px dashed #05092F; line-height: 1.75;}
.dd .sec h2{ margin: 0 -7.812vw; text-align: center; font-weight: 500; font-size: 2.2rem; font-family: "TBUDMincho M"; line-height: 1.81;}
.dd .sec .more{ display: none;}
.dd .sec ul{ display: flex; margin: 70px 0 0; justify-content: space-between;}
.dd .sec ul > li{ width: calc(100% / 3 - 5px);}
.dd .sec p{ margin: 50px 0 0; font-size: 1.6rem;}
.dd .sec .set{ position: relative;}
.dd .sec h3{ margin: 75px 0 0; color: #000; letter-spacing: .05em;}
.dd .sec h3 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.dd .sec .price{ padding: 0 0 50px; border-bottom: 1px dotted #707070; color: #000; letter-spacing: .05em;}
.dd .sec .cart{ position: absolute; right: 0; bottom: 50px;}
.dd .cart a:hover{ background: #EAE176; color: #05092F;}
.dd .btn-top{ bottom: 70px; left: 0; padding: 0 7.812vw; width: 100%; text-align: right;}

@media screen and (max-width: 768px){
    .dd .content{ padding: 0 0 200px;}
    .dd .sec{ flex-direction: column; margin: 100px 0 0; padding: 0 10.666vw 0 0;}
    .dd .content > .sec:nth-child(even){ flex-direction: column; padding: 0 0 0 10.666vw;}
    .dd .sec > figure{ width: 100%;}
    .dd .sec > .info{ padding: 40px 0 0 10.666vw; width: 100%; border-top: none; line-height: 1.64;}
    .dd .content > .sec:nth-child(even) > .info{ padding: 40px 10.666vw 0 0;}
    .dd .sec h2{ margin: 0; text-align: left; font-size: 1.4rem; line-height: 2;}
    .dd .sec h2 br{ display: none;}
    .dd .sec .more{ display: block; margin: 40px 0 0; text-align: center;}
    .dd .sec .more a{ line-height: 1;}
    .dd .sec .modal-content{ border-radius: 10px;}
    .dd .sec ul{ display: block; margin: 0;}
    .dd .sec ul > li{ width: 180px;}
    .dd .sec p{ margin: 10px 0 0; font-size: 1.4rem;}
    .dd .sec .set{ padding: 70px 0 0;}
    .dd .sec h3{ margin: 0;}
    .dd .sec .price{ padding: 10px 0 0; border: none; font-size: 1.6rem;}
    .dd .sec .cart{ bottom: 0;}
    .dd .btn-top{ bottom: 60px; padding: 0 10.666vw;}
}

/* home cafe
--------------------------------------------------- */
.hc{ background: #B27751;}
.hc header{ display: flex; flex-direction: column; padding: 70px 0 0; color: #000; text-align: center; align-items: center;}
.hc header .lg{ width: 296px;}
.hc header em{ margin: 80px 0 0; letter-spacing: .1em; font-style: normal; font-size: 1.2rem; font-family: "century-gothic", sans-serif; line-height: 2;}
.hc header figure{ margin: 40px 0 0; width: 103px;}
.hc header h1{ margin: 30px 0 0; letter-spacing: .05em; font-size: 2rem; font-family: "Yu Gothic Pr6N B";}

@media screen and (max-width: 768px){
    .hc header{ padding: 40px 10.666vw 0;}
    .hc header .lg{ width: 100%;}
    .hc header figure{ margin: 30px 0 0; width: 27.466vw;}
}

.hc .snav{ padding: 120px 0;}
.hc .slider .slick-slide{ padding: 0 5px; height: 257px;}
.hc .slider .slick-slide img{ width: auto; height: 100%;}

@media screen and (max-width: 768px){
    .hc .snav{ padding: 50px 5px 0;}
    .hc .snav ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
    .hc .snav ul > li{ padding: 5px 0 0; width: calc(50% - 2.5px);}
    .hc .snav ul > li:nth-child(3){ width: 100%;}
    .hc .snav ul > li:nth-child(4),
    .hc .snav ul > li:nth-child(5),
    .hc .snav ul > li:nth-child(6){ width: calc(100% / 3 - 2.5px);}
}

.hc .content{ position: relative; padding: 50px 2.604vw 190px; color: #000;}
.hc .sec{ display: flex; flex-direction: column; margin: 50px 0 0; padding: 100px 0; background: #fff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16); text-align: center; align-items: center;}
.hc .sec > i{ width: 100px;}
.hc .sec h2{ margin: 30px 0 0; font-size: 2.2rem; line-height: 1.45;}
.hc .sec .row{ display: flex; margin: 50px 0 0; width: 1000px; justify-content: space-between;}
.hc .sec .row > figure{ width: 500px;}
.hc .sec .row > .info{ position: relative; width: 450px; text-align: left; line-height: 1.75;}
.hc .sec .info p{ color: #707070; font-size: 1.6rem;}
.hc .sec .info .set{ position: relative;}
.hc .sec .info h3{ margin: 30px 0 0; color: #000; letter-spacing: .05em;}
.hc .sec .info h3 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.hc .sec .info .price{ left: .05em; color: #000;}
.hc .sec .info .cart{ position: absolute; right: 0; bottom: 0;}
.hc .cart a:hover{ background: #EAE176; color: #05092F;}
.hc .btn-top{ bottom: 50px; left: 0; width: 100%; text-align: center;}

@media screen and (max-width: 768px){
    .hc .content{ padding: 0 0 200px;}
    .hc .sec{ margin: 0; padding: 0; box-shadow: none;}
    .hc .sec > i{ display: none;}
    .hc .sec h2{ margin: 20px 0 0;}
    .hc .sec .row{ display: block; margin: 0; width: 100%;}
    .hc .sec .row > figure{ width: 100%;}
    .hc .sec .row > .info{ width: 100%; line-height: 1.64;}
    .hc .sec .info p{ margin: 20px 0 0; font-size: 1.4rem;}
    .hc .sec .info h3{ margin: 40px 0 0;}
    .hc .sec .info .price{ padding: 10px 0 0; font-size: 1.6rem;}
    .hc .modal-wrapper{ padding: 5.333vw;}
    .hc .modal-content{ height: calc(100vh - 10.666vw);}
    .hc .btn-top{ bottom: 70px;}
}

/* buyer's choice
--------------------------------------------------- */
.bsc header{ display: flex; padding: 130px 0 145px; background: #05092F; color: #B27751; justify-content: center; flex-wrap: wrap; align-items: flex-end;}
.bsc header .lg{ padding: 0 0 80px; width: 100%; text-align: center;}
.bsc header .lg img{ width: 355px;}
.bsc header h1{ padding: 0 50px 0 0; color: #B27751; letter-spacing: .05em; font-size: 4rem; line-height: 1.4;}
.bsc header h1 span{ display: block; margin: 20px 0 0; color: #B1B2B7; letter-spacing: .1em; font-size: 1.6rem; font-family: "century-gothic", sans-serif;}
.bsc header p{ width: 380px; letter-spacing: .05em; font-size: 1.9rem; line-height: 1.84;}

@media screen and (max-width: 768px){
    .bsc header{ flex-direction: column; padding: 130px 10.666vw 80px; align-items: flex-start;}
    .bsc header .lg{ padding: 0;}
    .bsc header .lg img{ width: 72vw;}
    .bsc header h1{ padding: 80px 0 0; font-size: 2.4rem;}
    .bsc header h1 span{ font-size: 1rem;}
    .bsc header p{ margin: 30px 0 0; width: 100%; letter-spacing: normal; font-size: 1.4rem; line-height: 1.64;}
}

.bsc .content{ position: relative; padding: 0 0 340px;}
.bsc .sec{ display: flex; margin: 220px auto 0; padding: 0; width: 1000px; justify-content: space-between; align-items: flex-end;}
.bsc .content > .sec:first-child{ margin: 110px auto 0;}
.bsc .content > .sec:nth-child(even){ flex-direction: row-reverse;}
.bsc .sec > figure{ width: 570px;}
.bsc .sec > .info{ position: relative; padding: 0 0 30px; width: 375px; border-bottom: 1px solid #000; line-height: 1.75;}
.bsc .sec .info > i{ display: block;}
.bsc .sec .info h2{ position: relative; margin: 25px 0 0;}
.bsc .sec .info h2:before{ position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #000000; content: "";}
.bsc .sec .info h2 span{ position: relative; display: inline-block; padding: 0 1em 0 0; background: #fff; letter-spacing: .05em; font-size: 2rem; font-family: "Yu Gothic Pr6N B";}
.bsc .sec .info p{ margin: 20px 0 0; font-size: 1.6rem; line-height: 2.215;}
.bsc .sec .info ul{ display: flex; margin: 40px 0 0; justify-content: space-between;}
.bsc .sec .info ul > li{ width: calc(100% / 3 - 5px);}
.bsc .sec .info h3{ margin: 40px 0 0; color: #000; letter-spacing: .05em;}
.bsc .sec .info h3 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.bsc .sec .info .price{ color: #000;}
.bsc .sec .info .cart{ position: absolute; right: 0; bottom: 30px;}
.bsc .cart a:hover{ background: #EAE176; color: #05092F;}
.bsc .btn-top{ bottom: 70px; left: 50%; width: 1000px; text-align: right; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .bsc .content{ padding: 0 0 100px;}
    .bsc .sec{flex-direction: column;  margin: 0; padding: 0 0 150px; width: 100%; align-items: center;}
    .bsc .content > .sec:first-child{ margin: 0;}
    .bsc .content > .sec:nth-child(even){ flex-direction: column;}
    .bsc .sec > figure{ width: 100%;}
    .bsc .sec > .info{ padding: 40px 10.666vw 0; width: 100%; border-bottom: none; line-height: 1.64;}
    .bsc .sec .info h2{ margin: 30px 0 0;}
    .bsc .sec .info h2 span{ letter-spacing: .1em; font-size: 1.2rem;}
    .bsc .sec .info p{ margin: 30px 0 0; font-size: 1.4rem; line-height: 1.64;}
    .bsc .sec .info .scroll{ margin: 30px 0 0;}
    .bsc .sec .info h3{ margin: 50px 0 0;}
    .bsc .sec .info .price{ margin: 10px 0 0; padding: 0 0 30px; border-bottom: 1px solid #000; font-size: 1.6rem;}
    .bsc .sec .info .cart{ right: 10.666vw; bottom: 30px;}
    .bsc .btn-top{ bottom: 60px; left: 0; padding: 0 10.666vw; width: 100%; text-align: right; transform: none;}
}

/* special gift
--------------------------------------------------- */
.sg header{ position: relative; padding: 190px 0; background: #DEBFBF; color: #678FAD; text-align: center;}
.sg header .lg{ position: absolute; top: 50%; left: 3.906vw; width: 8.906vw; transform: translate(0,-50%);}
.sg header h1 img{ width: 261px;}
.sg header p{ margin: 80px 0 0; font-size: 2.5rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.6;}

@media screen and (max-width: 768px){
    .sg header{ padding: 100px 10.666vw 80px;}
    .sg header .lg{ position: relative; top: auto; left: auto; width: 100%; transform: none;}
    .sg header .lg img{ margin: 0 auto; width: 49.333vw;}
    .sg header h1{ display: none;}
    .sg header p{ text-align: left; font-size: 1.4rem; line-height: 1.64;}
}

.sg .content{ position: relative; padding: 0 0 140px;}
.sg .sec{ display: flex; margin: 200px 0 0; padding: 0 1.562vw 0 0; border-top: 1px solid #707070; justify-content: space-between;}
.sg .content > .sec:first-child{ margin: 0; border: none;}
.sg .content > .sec:nth-child(even){ flex-direction: row-reverse; padding: 0 0 0 1.5635vw;}
.sg .btn-top{ bottom: 70px; left: 0; padding: 0 7.8125vw; width: 100%; text-align: right;}

@media screen and (max-width: 768px){
    .sg .content{ padding: 0 0 180px;}
    .sg .sec{ flex-direction: column; margin: 100px 0 0; padding: 0; border-top: none;}
    .sg .content > .sec:first-child{ margin: 0; border: none;}
    .sg .content > .sec:nth-child(even){ flex-direction: column; padding: 0;}
    .sg .btn-top{ bottom: 60px; padding: 0 10.666vw;}
}

.sg .sec > figure{ width: 50%;}
.sg .sec > .info{ position: relative; padding: 65px 7.8125vw 0; width: calc(50% - 3.124vw); line-height: 1.75;}
.sg .sec .info h2{ margin: 0 -7.8125vw; text-align: center; white-space: nowrap; letter-spacing: .05em; font-size: 2.2rem; font-family: "Shuei NijimiMGo B"; line-height: 1.81;}
.sg .sec .info .more{ display: none;}
.sg .sec .info figure{ margin: 50px 0 0; text-align: center;}
.sg .sec .info figure img{ width: 15.625vw;}
.sg .sec .info p{ margin: 50px 0 0; color: #707070; font-size: 1.6rem;}
.sg .sec .info .set{ position: relative;}
.sg .sec .info h3{ margin: 70px 0 0; color: #000; letter-spacing: .05em;}
.sg .sec .info h3 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.sg .sec .info .price{ padding: 0 0 50px; border-bottom: 1px dotted #707070; color: #000; letter-spacing: .05em;}
.sg .sec .info .cart{ position: absolute; right: 0; bottom: 50px;}
.sg .cart a{ background: #678FAD;}
.sg .cart a:hover{ background: #B27751;}

@media screen and (max-width: 768px){
    .sg .sec > figure{ width: 100%;}
    .sg .sec > .info{ padding: 40px 10.666vw 0; width: 100%; line-height: 1.64;}
    .sg .sec .info h2{ margin: 0; text-align: left; white-space: normal; font-size: 1.4rem; line-height: 2;}
    .sg .sec .info .more{ display: block; margin: 30px 0 0; text-align: center; line-height: 1;}
    .sg .sec .info figure{ margin: 0;}
    .sg .sec .info figure img{ width: 100%;}
    .sg .sec .info p{ margin: 20px 0 0; font-size: 1.4rem;}
    .sg .sec .info h3{ margin: 20px 0 0;}
    .sg .sec .info .price{ padding: 10px 0 0; border-bottom: none; font-size: 1.6rem;}
    .sg .sec .info .cart{ bottom: 0;}
    .sg .cart a{ background: #fff; color: #B27751;}
    .sg .modal-wrapper{ padding: 10.666vw 0 10.666vw 10.666vw;}
    .sg .modal-content{ border-radius: 30px 0 0 30px; background: #DEBFBF;}
}

/* staff buy my self
--------------------------------------------------- */
.sbms header{ position: relative; display: flex; padding: 120px 0 170px; justify-content: center;}
.sbms header h1{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sbms header h1 i{ width: 375px;}
.sbms header h1 span{ display: flex; margin: 30px 0 0; width: 155px; height: 39px; border-radius: 5px; background: #DEBFBF; color: #000; letter-spacing: .15em; font-size: 2.4rem; font-family: "Yu Gothic Pr6N B"; align-items: center; justify-content: center;}
.sbms2 header h1 span{ background: #EAE176;}
.sbms header p{ position: absolute; bottom: 2.604vw; left: 2.604vw; font-size: 2.5rem; line-height: 1.6;}

@media screen and (max-width: 768px){
    .sbms header{flex-direction: column;  padding: 50px 0 75px; align-items: center;}
    .sbms header h1 i{ width: 65.866vw;}
    .sbms header h1 span{ display: none;}
    .sbms header p{ position: relative; bottom: auto; left: auto; margin: 35px auto 0; text-align: center; font-size: 1.5rem; line-height: 1.73;}
    .sbms header .sp{ display: flex; flex-direction: column; align-items: center;}
    .sbms header span{ display: flex; margin: 30px 0 0; width: 26.666vw; height: 6.666vw; border-radius: 5px; background: #DEBFBF; color: #000; letter-spacing: .15em; font-size: 1.6rem; font-family: "Yu Gothic Pr6N B"; align-items: center; justify-content: center;}
    .sbms2 header span{ background: #EAE176;}
    .sbms header .arrow{ margin: 40px 0 0; width: 9.333vw;}
}

.sbms .snav{ padding: 70px 0; background: #DEBFBF; color: #707070;}
.sbms2 .snav{ background: #EAE176;}
.sbms .slider .slick-slide{ padding: 0 25px;}
.sbms .snav ul a{ display: block; color: #707070; text-align: center;}
.sbms .snav ul figure{ width: 180px;}
.sbms .snav dl{ margin: 20px 0 0; font-size: 1.5rem; font-family: "Yu Gothic Pr6N B"; line-height: 1.53;}
.sbms .snav dd{ margin: 15px 0 0; padding: 15px 0 0; border-top: 1px dotted #000;}

@media screen and (max-width: 768px){
    .sbms .snav{ padding: 0 10.666vw 50px;}
    .sbms .snav ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
    .sbms .snav ul > li{ padding: 50px 0 0; width: calc(50% - 10px);}
    .sbms .snav ul figure{ width: 100%;}
    .sbms .snav dl{ margin: 15px 0 0; font-size: 1.2rem; line-height: 1;}
    .sbms .snav dd{ margin: 10px 0 0; padding: 10px 0 0;}
}

.sbms .content{ padding: 0 0 100px; color: #707070;}
.sbms .list-item{ display: flex; margin: 0 auto; width: 1100px; flex-wrap: wrap;}
.sbms .list-item > li{ position: relative; margin: 200px 0 0; padding: 0 50px; width: 50%; line-height: 1.75;}
.sbms .list-item h2{ margin: 70px 0 0; text-align: center; letter-spacing: .05em; font-weight: 500; font-size: 1.8rem; font-family: "TBUDMincho M"; line-height: 1.88;}
.sbms .list-item p{ margin: 45px 0 0; font-size: 1.6rem;}
.sbms .list-item .set{ position: relative;}
.sbms .list-item h3{ margin: 70px 0 0; color: #000; letter-spacing: .05em;}
.sbms .list-item h3 span{ display: block; letter-spacing: .1em; font-family: "Yu Gothic Pr6N B";}
.sbms .list-item .price{ padding: 0 0 120px; border-bottom: 1px dotted #707070; color: #000; letter-spacing: .05em;}
.sbms .list-item .cart{ position: absolute; right: 0; bottom: 50px;}
.sbms .cart a{ background: #DEBFBF;}
.sbms .cart a:hover{ background: #678FAD;}
.sbms2 .cart a{ background: #EAE176;}
.sbms2 .cart a:hover{ background: #B27751;}
.sbms .btn-top{ position: relative; margin: 60px auto 0; width: 1000px; text-align: right;}
.sbms .bn{ margin: 60px auto 0; width: 1000px;}
.sbms .bn a{ display: flex; height: 180px; border-top: 1px solid #707070; border-bottom: 1px solid #707070; color: #000; letter-spacing: .05em; font-family: "Yu Gothic Pr6N B"; align-items: center; justify-content: center;}
.sbms .bn a > i{ margin: 0 25px 0 0; width: 395px;}
.sbms .bn a > div{ display: flex; align-items: center;}
.sbms .bn a > div span{ display: flex; margin: 0 .5em; width: 134px; height: 33px; border-radius: 5px; background: #EAE176; letter-spacing: .15em; font-size: 2rem; font-family: "Yu Gothic Pr6N B"; justify-content: center; align-items: center;}
.sbms2 .bn a > div span{ background: #DEBFBF;}
.sbms .bn a > div i{ margin: 0 0 0 .5em; width: 10px;}

@media screen and (max-width: 768px){
    .sbms .content{ padding: 0;}
    .sbms .list-item{ flex-direction: column; width: 100%;}
    .sbms .list-item > li{ margin: 0; padding: 0 10.666vw 150px; width: 100%; line-height: 1.64;}
    .sbms .list-item figure{ margin: 0 -10.666vw;}
    .sbms .list-item h2{ margin: 45px 0 0; text-align: left; letter-spacing: normal; font-size: 2.2rem; line-height: 1.45;}
    .sbms .list-item p{ margin: 30px 0 0; font-size: 1.4rem;}
    .sbms .list-item h3{ margin: 55px 0 0;}
    .sbms .list-item h3 span{ margin: 0 0 10px;}
    .sbms .list-item .price{ margin: 10px 0 0; padding: 0 0 35px; font-size: 1.6rem;}
    .sbms .list-item .cart{ top: 0; bottom: auto;}
    .sbms .btn-top{ margin: 60px auto 0; padding: 0 10.666vw; width: 100%;}
    .sbms .bn{ margin: 60px auto 0; width: calc(100% - 5.332vw); border-top: 1px solid #707070;}
    .sbms .bn a{ display: flex; padding: 30px 0; height: auto; border-top: none; border-bottom: none; justify-content: center;}
    .sbms .bn a > i{ margin: 0; width: 80vw;}
    .sbms .bn a > div{ display: none;}
}

/* common
--------------------------------------------------- */
.gnav{ padding: 65px 0 0; width: 100%; background: #505050; text-align: center;}
.gnav .lg{ display: flex; flex-direction: column; align-items: center;}
.gnav .lg i{ width: 58px;}
.gnav .lg em{ padding: 30px 0 0; color: #fff; letter-spacing: .15em; font-weight: 700; font-style: normal; font-size: 1.5rem; font-family: "century-gothic", sans-serif;}
.gnav h2{ position: relative; margin: 60px 0 0; padding: 0 0 48px; color: #fff; text-align: center; letter-spacing: .15em; font-weight: 700; font-size: 3rem; font-family: "century-gothic", sans-serif;}
.gnav h2:after{ position: absolute; bottom: 0; left: 50%; width: 236px; height: 15px; background: url("../images/blt3_white.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.gnav .note{ padding: 30px 0; border-top: 2px dotted #707070; background: #fff;}

@media screen and (max-width: 768px){
    .gnav{ padding: 35px 10.666vw 70px;}
    .gnav .lg{ padding: 0 0 25px; border-bottom: 1px dotted #fff;}
    .gnav .lg i{ width: 10.133vw;}
    .gnav .lg em{ padding: 20px 0 0; letter-spacing: .2em; font-size: .9rem; line-height: 1.77;}
    .gnav h2{ margin: 80px 0 0; padding: 0 0 25px; font-size: 1.2rem;}
    .gnav h2:after{ width: 30.133vw; height: 1.866vw; background: url("../images/blt3_white_sp.png") no-repeat center / contain;}
    .gnav .note{ padding: 20px 0; border-top: 1px dotted #707070;}
}

.list-cat{ display: flex; margin: 65px 0 0; padding: 0 0 20px; background: #E6E6E6; flex-wrap: wrap;}
.drawer-nav .list-cat{ margin: 80px 0 0;}
.list-cat > li{ position: relative; margin: 20px 0 0; padding: 20px 20px 10px; width: 20%; border-right: 2px dotted #707070;}
.list-cat > li:nth-child(5n){ border: none;}
.list-cat > li:nth-child(n+6):after{ position: absolute; top: -10px; left: 50%; width: calc(100% - 20px); height: 2px; border-bottom:  2px dotted #707070; content: ""; transform: translate(-50%,0);}
.list-cat > li.new:before{ position: absolute; top: 7px; left: 15px; width: 10px; height: 10px; border-radius: 100%; background: #FF0000; content: "";}
.list-cat div{ min-height: 3em; font-size: 1.25vw; font-family: "Yu Gothic Pr6N B"; line-height: 1.5;}
.list-cat div span{ display: block;}
.list-cat h3{ letter-spacing: .1em; font-size: 1.041vw; font-family: "century-gothic", sans-serif; line-height: 1.9;}
.list-cat h3 small{ display: block; font-size: 0.885vw;}
.list-cat figure{ display: flex; margin: 0 auto; min-height: 11.458vw; justify-content: center; align-items: center;}

.list-cat > li:first-child figure{ width: 7.447vw;}
.list-cat > li:nth-child(2) figure{ width: 10.885vw;}
.list-cat > li:nth-child(3) figure{ width: 9.687vw;}
.list-cat > li:nth-child(4) figure{ width: 10.052vw;}
.list-cat > li:nth-child(5) figure{ width: 10.468vw;}
.list-cat > li:nth-child(6) figure{ width: 6.406vw;}
.list-cat > li:nth-child(7) figure{ width: 10.572vw;}
.list-cat > li:nth-child(8) figure{ width: 8.541vw;}
.list-cat > li:nth-child(9) figure{ width: 7.812vw;}
.list-cat > li:nth-child(10) figure{ width: 8.125vw;}

@media screen and (max-width: 768px){
    main .list-cat{ flex-direction: column; margin: 35px 0 0; padding: 0; background: none;}
    main .list-cat > li{ margin: 20px 0 0; padding: 0; width: 100%; border-right: none;}
    main .list-cat > li:nth-child(5n){ border: none;}
    main .list-cat > li:nth-child(n+6):after{ content: none;}
    .list-cat > li.new:before{ top: 5px; left: 10px; width: 8px; height: 8px;}
    main .list-cat > li.new:before{ content: none;}
    main .list-cat a{ position: relative; display: flex; flex-direction: column-reverse; padding: 0 0 0 8vw; color: #B4B4B4; align-items: flex-start;}
    main .list-cat a:before{ position: absolute; top: -5px; left: 0; width: 5.333vw; height: 5.333vw; background: url("../images/arrow1_gray.png") no-repeat center / contain; content: "";}
    main .list-cat .current a{ color: #fff;}
    main .list-cat .current a:before{ background: url("../images/arrow1_white.png") no-repeat center / contain;}
    main .list-cat div{ padding: 10px 0 0; min-height: 0; color: #C8C8C8; letter-spacing: .1em; font-size: 1rem; line-height: 1;}
    main .list-cat div br{ display: none;}
    main .list-cat div span{ display: inline-block;}
    main .list-cat div span:before{ padding: 0 .5em; content: "／"}
    main .list-cat h3{ letter-spacing: .07em; font-weight: 700; font-size: 1.5rem; line-height: 1;}
    main .list-cat h3 small{ display: block; font-size: 0.885vw;}
    main .list-cat > li.new h3:after{ margin: 0 0 0 .5em; display: inline-block; width: 8px; height: 8px; border-radius: 100%; background: #FF0000; content: "";}
    main .list-cat figure{ display: none;}
    
    .drawer-nav .list-cat{ margin: 0; padding: 0 0 5px;}
    .drawer-nav .list-cat > li{ margin: 10px 0 5px; padding: 0 5px; width: 50%; border-right: 1px dotted #707070;}
    .drawer-nav .list-cat > li:nth-child(5n){ border-right: 1px dotted #707070;}
    .drawer-nav .list-cat > li:nth-child(even){ border-right: none;}
    .drawer-nav .list-cat > li:nth-child(n+3):after{ position: absolute; top: -10px; left: 50%; width: calc(100% - 10px); height: 2px; border-bottom:  1px dotted #707070; content: ""; transform: translate(-50%,0);}
    .drawer-nav .list-cat > li a{ display: block; padding: 5.333vw 0;}
    .drawer-nav .list-cat div{ min-height: 3em; font-size: 3.2vw;}
    .drawer-nav .list-cat div span{ display: block;}
    .drawer-nav .list-cat h3{ font-size: 2.666vw;}
    .drawer-nav .list-cat h3 small{ display: block; font-size: 0.885vw;}
    .drawer-nav .list-cat figure{ min-height: 26.666vw;}
    
    .drawer-nav .list-cat > li:first-child figure{ width: 17.6vw;}
    .drawer-nav .list-cat > li:nth-child(2) figure{ width: 24.8vw;}
    .drawer-nav .list-cat > li:nth-child(3) figure{ width: 23.2vw;}
    .drawer-nav .list-cat > li:nth-child(4) figure{ width: 24vw;}
    .drawer-nav .list-cat > li:nth-child(5) figure{ width: 24vw;}
    .drawer-nav .list-cat > li:nth-child(6) figure{ width: 14.666vw;}
    .drawer-nav .list-cat > li:nth-child(7) figure{ width: 24.266vw;}
    .drawer-nav .list-cat > li:nth-child(8) figure{ width: 19.2vw;}
    .drawer-nav .list-cat > li:nth-child(9) figure{ width: 18.933vw;}
    .drawer-nav .list-cat > li:nth-child(10) figure{ width: 19.733vw;}
}

.gnav2{ padding: 0 0 150px; width: 100%; background: #F5F5F5;}
.gnav2 h2{ position: relative; margin: 100px 0 0; padding: 100px 0 45px; border-top: 2px dotted #707070; text-align: center; letter-spacing: .05em; font-size: 2.5rem;}
.gnav2 h2:first-child{ margin: 0;}
.drawer-nav .gnav2 h2:first-child{ border: none;}
.gnav2 h2:after{ position: absolute; bottom: 0; left: 50%; width: 236px; height: 15px; background: url("../images/blt3.png") no-repeat center / contain; content: ""; transform: translate(-50%,0);}
.gnav2 figure{ margin: 50px 0 0; text-align: center;}
.gnav2 figure a{ display: inline-block; width: 272px;}
.gnav2 figcaption{ margin: 45px 0 0; letter-spacing: normal; font-size: 1.6rem; font-family: "Yu Gothic Pr6N R";}

@media screen and (max-width: 768px){
    .gnav2{ padding: 0 10.666vw 70px;}
    .gnav2 h2{ margin: 0; padding: 70px 0 25px; border-top: none; font-size: 1.2rem;}
    .gnav2 h2:after{ width: 30.133vw; height: 1.866vw; background: url("../images/blt3_sp.png") no-repeat center / contain;}
    .gnav2 figure{ margin: 45px 0 0; padding: 0 0 20px; border-bottom: 1px dotted #000;}
    .gnav2 figure a{ display: inline-block; width: 34.666vw;}
    .gnav2 figcaption{ margin: 45px 0 0; font-size: 1.2rem;}
}

.dl-shop{ margin: 60px auto 0; width: 800px; border-bottom: 2px dotted #707070; letter-spacing: .2em; font-size: 1.6rem;}
.dl-shop dt{ position: relative; padding: 40px 20px; border-top: 2px dotted #707070; cursor: pointer;}
.dl-shop dt:after{ position: absolute; top: 50%; right: 20px; width: 42px; height: 9px; background: url("../images/arrow3.png") no-repeat center / contain; content: ""; transition: transform .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate(0,-50%);}
.dl-shop dt.active:after{ transform: translate(0,-50%) rotate(90deg);}
.dl-shop dd{ display: none; padding: 0 20px 20px; font-size: 1.4rem;}
.dl-shop ul + h4{ margin: 30px 0 0;}
.dl-shop ul > li{ padding: 10px 0 0;}
.dl-shop ul > li:before{ padding: 0 10px 0 0; content: "▶︎"; font-size: 1rem;}
.dl-shop + p{ margin: 55px auto 0; width: 800px; letter-spacing: .05em; font-size: 1.6rem; font-family: "Yu Gothic Pr6N R"; line-height: 1.625;}

@media screen and (max-width: 1024px){
    .dl-shop{ margin: 30px 0 0; width: 100%; border-bottom: 1px solid #B4B4B4; font-size: 1.2rem;}
    .dl-shop dt{ padding: 10px 0 10px 5px; border-top: 1px solid #B4B4B4;}
    .dl-shop dt:after{ right: 10px; width: 26px; height: 4px;}
    .dl-shop dd{ padding: 0 0 10px 5px; letter-spacing: .05em; font-size: 1rem;}
    .dl-shop h4{ margin: 10px 0 0;}
    .dl-shop ul{ padding: 5px 0 0;}
    .dl-shop ul > li{ padding: 5px 0;}
    .dl-shop ul > li:before{ padding: 0 5px 0 0;}
    .dl-shop + p{ margin: 50px 0 0; width: 100%; letter-spacing: normal; font-size: 1.2rem; line-height: 1.66;}
}

.drawer-nav{ position: fixed; top: 0; left: -100vw; z-index: 100; display: block; visibility: hidden; overflow: auto; -webkit-overflow-scrolling: touch; width: 100vw; height: 100%; background: #F5F5F5; opacity: 0; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.drawer-nav.open{ left: 0; visibility: visible; opacity: 1; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.drawer-nav .gnav{ padding: 0; background: none;}
.drawer-overlay{ position: fixed; top: 0; left: 0; z-index: 90; display: none; overflow: hidden; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0);}
.drawer-overlay.open{ display: block;}

@media screen and (max-width: 768px){
    .drawer-nav{ padding: 65px 0 0;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer aside{ display: flex; padding: 50px 0; background: #B4B4B4; color: #000; justify-content: center; align-items: center;}
.footer aside .logo{ width: 94px;}
.footer aside dl{ display: flex; padding: 0 0 0 50px; justify-content: center; align-items: center;}
.footer aside dt{ white-space: nowrap; letter-spacing: .15em; font-family: "century-gothic", sans-serif;}
.footer aside dd ul{ display: flex; justify-content: flex-start; align-items: center;}
.footer aside dd ul > li{ padding: 0 0 0 20px;}
.footer aside dd ul i{ font-size: 4rem;}
.footer aside dd ul img{ width: auto; height: 45px;}

@media screen and (max-width: 1024px){
    .footer aside{ flex-direction: column; margin: 0; padding: 50px 0; align-items: center; justify-content: center;}
    .footer aside .logo{ width: 19.733vw;}
    .footer aside dl{ display: block; padding: 30px 0 0; text-align: center;}
    .footer aside dt{ font-size: 1.2em;}
    .footer aside dd{ padding: 15px 0 0;}
    .footer aside dd ul{ justify-content: center;}
    .footer aside dd ul > li{ padding: 0 2.133vw;}
    .footer aside dd ul i{ font-size: 3rem;}
    .footer aside dd ul > li.lg{ display: none;}
    .footer aside dd ul > li > a > img{ height: 8vw;}
}

.footer small{ display: block; padding: 20px 0; background: #4C4948; color: #EFEFEF; text-align: center; letter-spacing: .05em; font-size: 1.4rem;}
.footer small a{ color: #EFEFEF;}

@media screen and (max-width: 1024px){
    .footer small{ font-size: 1rem;}
}