@charset "UTF-8";

/* ===================================================================

 file name  :  lookbook.css

=================================================================== */
 /* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none !important;

  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none !important;

  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */
*::-webkit-media-controls-start-playback-button {
  display: none !important;

  -webkit-appearance: none;
}

.ani {opacity: 0;}
.fadein {
    animation: fadein 1.2s ease forwards;
}
@keyframes fadein {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

article{ position: relative; margin: 0 auto; padding: 205px 0 60px; line-height: 1;}
/*article header{ position: relative; margin: 0 auto; width: 1100px; height: auto; letter-spacing: .1rem; font-family: "Noto Serif JP", serif;}
article header nav{ position: absolute; top: 50%; right: 0; font-weight: 700; font-size: 13px; transform: translate(0,-50%);}*/
article header{ display: flex; padding: 0 60px; height: auto; letter-spacing: .1em; font-family: "Noto Serif JP", serif; justify-content: space-between; align-items: center;}
article header .ttl{ display: flex; flex-direction: column;}
article header .ttl .en{ color: #b48e3a; letter-spacing: .12em; font-size: 28px;}
article header .ttl h1{ display: block; margin: 1em 0 0; color: #000; font-size: 13px;}
article header .ttl2{ display: block; width: 25vw;}
article header .ttl2 img{ width: 100%;}
article header .ttl3{ display: flex; width: 100%; justify-content: center;}
article header .ttl3 img{ width: auto; height: 105px;}
article header nav ul{ display: flex; border-left: 1px solid #e9e1d1; font-size: 14px;}
article header nav ul > li{ padding: 20px 40px; border-right: 1px solid #e9e1d1;}
article header nav a{ display: inline; padding: 0 0 5px;}
article header nav .current a{ border-bottom: 1px solid; color: #b48e3a;}

article > .lead{ margin: 60px 0 0; padding: 0 60px; letter-spacing: .1em; font-size: 14px; font-family: "Noto Serif JP", serif; line-height: 2.14;}

.list-archive{ display: flex; padding: 45px 0 0; width: 100%; border-bottom: 1px solid #e9e1d1; justify-content: center;}
.list-archive > li{ padding: 0 5px;}
.list-archive a{ display: block; padding: 15px 30px; border: 1px solid #e9e1d1; border-bottom: none; border-radius: 5px 5px 0 0; letter-spacing: .1rem; font-size: 13px; font-family: "Noto Serif JP", serif;}
.list-archive .current a{ background: #e9e1d1;}

.list-look{ padding: 0 0 120px;}
.list-look > li{ padding: 120px 0 0; text-align: left;}
.list-look > li:first-child{ padding: 60px 0 0;}
.list-look > li.right{ text-align: right;}
.list-look > li.center{ text-align: center;}
.list-look > li.pl{ padding: 120px 0 0 10%;}
.list-look > li.pr{ padding: 120px 10% 0 0;}

.list-look video,
.list-look img{ width: auto; height: 80vh;}
.list-look a{ position: relative; display: inline-block; cursor: pointer;}
.list-look .caption{ position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; text-align: center; font-size: 14px; line-height: 1.8; opacity: 0; transition: all .5s ease; align-items: center; justify-content: center;}
.list-look a:hover .caption{ opacity: 1;}

.list-look2{ display: flex; padding: 30px 45px 120px; flex-wrap: wrap;}
.list-look2 > li{ padding: 30px 15px 0; width: 25%;}
.list-look2 img{ width: 100%;}
.list-look2 a{ position: relative; display: inline-block; cursor: pointer;}
.list-look2 .caption{ position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; text-align: center; letter-spacing: .1em; font-size: 12px; font-family: "Noto Serif JP", serif; line-height: 1.5; opacity: 0; transition: all .5s ease; align-items: center; justify-content: center;}
.list-look2 .caption small{ font-size: 12px;}
.list-look2 .caption em{ color: #fff; font-size: 18px;}
.list-look2 .caption span{ margin: 1em 0 0; font-family: 'Noto Sans JP', sans-serif;}
.list-look2 a:hover .caption{ opacity: 1;}

.list-sort{ display: flex; margin: 20px 0 0; justify-content: center;}
.list-sort > li{ padding: 0 5px;}
.list-sort .sort{ position: relative; display: block; padding: 10px 0; width: 300px; border: 1px solid #e9e1d1; text-align: center; line-height: 1; cursor: pointer;}
.list-sort .sort:before,
.list-sort .sort:after{ position: absolute; top: 50%; right: 10px; width: 10px; height: 1px; background: #333; content: ""; transition: .3s all; transform: translate(0,-50%) rotate(0deg);}
.list-sort .sort:after{ transform: translate(0,-50%) rotate(90deg);}
.list-sort .sort.open:after{ transform: translate(0,-50%) rotate(0);}
.list-sort fieldset{ margin: 0; padding: 0; border: none; background: none;}
.list-sort .control{ display: block; padding: 10px 0; width: 300px; border: 1px solid #e9e1d1; background: none; text-align: center; line-height: 1; cursor: pointer;}
.list-sort .control.mixitup-control-active{ background: #e9e1d1;}

.cnt{ display: none; margin: 0 auto; width: 1100px;}
.cnt fieldset{ display: flex; padding: 10px 0; border: none; border-bottom: 1px solid #e9e1d1; line-height: 2; align-items: center;}
.cnt fieldset .control-group-label{ padding: 0 0 0 15px; width: 90px; border-right: 1px solid #e9e1d1;}
.cnt fieldset > ul{ display: flex; padding: 0 0 0 1em;}
.cnt fieldset > ul > li{ padding: 0 0 0 1em;}
.cnt fieldset > ul button{ display: inline-block; padding: 10px 0; width: 160px; border: 1px solid #e9e1d1; background: none; text-align: center; line-height: 1;}
.cnt fieldset > ul button.control-mix{ width: 80px;}
.cnt fieldset > ul button.mixitup-control-active{ background: #e9e1d1;}
.cnt fieldset .checkbox-label{ display: inline; padding: 0 0 0 1em;}
.cnt button[type="reset"]{ display: block; margin: 20px auto 0; padding: 10px 0; width: 300px; border: none; background: #e9e1d1; text-align: center; line-height: 1;}

.cnt .control-group2{ justify-content: center;}
.cnt .control-group2 > ul{ padding: 0; justify-content: center;}
.cnt .control-group2 > ul > li{ padding: 0;}
.cnt .control-group2 > ul button{ width: 300px;}

.count{ margin: 20px 0 0; padding: 0 60px; letter-spacing: .1em; font-size: 14px; font-family: "Noto Serif JP", serif;}

.sort-wrap{ display: flex; padding: 0 45px 60px; flex-wrap: wrap;}
.sort-wrap > div{ padding: 30px 15px 0; width: 25%;}
.sort-wrap img{ width: 100%;}
.sort-wrap a{ position: relative; display: inline-block; overflow: hidden; cursor: pointer;}
.sort-wrap .caption{ position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; text-align: center; letter-spacing: .1em; font-size: 12px; font-family: "Noto Serif JP", serif; line-height: 1.5; opacity: 0; transition: all .5s ease; align-items: center; justify-content: center;}
.sort-wrap .caption small{ font-size: 12px;}
.sort-wrap .caption em{ color: #fff; font-size: 18px;}
.sort-wrap .caption span{ margin: 1em 0 0; font-family: 'Noto Sans JP', sans-serif;}
.sort-wrap .caption .cs2{display: flex;  margin: 2em 0 0; padding: .75em 1.5em; border: 1px solid; color: #ccc; font-size: 10px; font-family: 'Noto Sans JP', sans-serif;line-height: 1; align-items: center; justify-content: center;}
.sort-wrap a:hover .caption{ opacity: 1;}
.sort-wrap .new:before{ position: absolute; top: 6px; left: -16%; z-index: 10; padding: .5em 0; width: 50%; height: auto; background: #b48e3a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); color: #fff; content: "NEW"; text-align: center; letter-spacing: .1em; font-family: "Noto Serif JP", serif; line-height: 1; transform: rotate(-30deg);}

.product{ display: flex; flex-direction: column; margin: 0 auto; padding: 0 0 120px; width: 1100px; text-align: center; font-size: 14px; line-height: 1.75; align-items: center;}
.product figure li{ padding: 120px 0 0;}
.product .left{ text-align: left;}
.product .right{ text-align: right;}
.product figure a{ position: relative; display: inline-block;}
.product figure img,
.product figure video{ width: auto; height: 75vh;}
.product figure .caption{ position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: all .5s ease; align-items: center; justify-content: center;}
.product figure a:hover .caption{ opacity: 1;}
.product .line1{ margin: 90px 0 0; padding: 10px 20px; border-top: 3px double; border-bottom: 3px double; color: #b38d41; letter-spacing: .1em; font-family: "Noto Serif JP", serif; line-height: 2;}
.product > .lead{ margin: 45px 0 0;}
.product .line1 + .lead{ margin: 30px 0 0;}
.product > .lead .sp2{ display: none;}
.product figure + .lead{ margin: 90px 0 30px;}
.product > .lead span{ display: none;}
.product dl{ display: flex; margin: 1em 0 0; width: 100%; justify-content: center;}
.product dl + dl{ margin: 0;}
.product dt{ padding: 0 20px 0 0;}
.product dd span{ display: inline-block; margin: 0 0 0 10px;}
.product .lead2{ margin: 45px 0 0;}
.product .cap{ margin: 1em 0 0; padding: 1em; background: #e9e1d1; font-size: 13px; line-height: 1;}
.product .cs{ display: flex; margin: 30px 0 0; padding: 0; width: 160px; height: 40px; border: 1px solid; color: #999; text-align: center; letter-spacing: .05em; line-height: 1; justify-content: center; align-items: center;}
.product .option{ margin: 30px 0 0;}
.product .btn{ margin: 60px 0 0;}
.product .btn a{ display: flex; margin: 0 auto; width: 220px; height: 45px; background: #b38d41; color: #fff; letter-spacing: .1em; font-size: 13px; justify-content: center; align-items: center;}
.product .btn a:hover{ background: #fff; color: #b38d41;}

.product .backindex{ padding: 90px 0 0; text-align: center;}
.product .backindex a{ display: flex; margin: 0 auto; width: 220px; height: 45px; border: 1px solid #e9e1d1; color: #333; font-size: 14px; justify-content: center; align-items: center;}
.product .backindex a:hover{ background: #b38d41; color: #f6f4f0;}
.accessory .flex{ display: flex; box-sizing: border-box; margin: 50px 0 0; justify-content: space-between; align-items: center;}

.footwear{ display: flex; box-sizing: border-box; margin: 50px auto 0; padding: 0 0 100px; width: 1100px; justify-content: space-between; align-items: center;}
.footwear img{ width: 100%;}
.footwear > figure{ width: 50%;}
.footwear > figure ul{ display: flex; margin: -4px -2px 0; flex-wrap: wrap;}
.footwear > figure ul > li{ padding: 4px 2px 0; width: 50%;}
.footwear .detail{ padding: 0 0 0 50px; width: 50%;}
.footwear .detail p{ font-size: 14px; line-height: 1.75;}
.footwear .detail p + p{ margin: 1.5em 0 0;}

.topics-wrap{ margin: 45px 0 0; padding: 108px 45px 100px; background: url("/img/blt.gif") no-repeat top center;}
header + .topics-wrap{ margin: 90px auto 0;}
.topics-wrap > h2{ color: #b48e3a; text-align: center; letter-spacing: .15em; font-size: 24px; font-family: "Noto Serif JP", serif;}
.list-topics{ display: flex; flex-wrap: wrap;}
.list-topics > li{ padding: 50px 15px 0; width: 20%;}
.list-topics a{ display: flex; flex-direction: column;}
.list-topics figure{ position: relative; overflow: hidden; margin: 0; padding: 0; padding-top: 100%; height: 0;}
.list-topics figure img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.list-topics .detail{ margin: 1em 0 0; padding: 0 15px; line-height: 1.75;}
.list-topics time{ letter-spacing: .01em; font-size: 11px;}
.list-topics .tl{ font-size: 13px;}
.more{ margin: 60px 0 0;}
.more a{ display: flex; margin: 0 auto; width: 140px; height: 35px; border: 1px solid #b38d41; color: #b38d41; letter-spacing: .1em; font-family: "Noto Sans JP", serif; align-items: center; justify-content: center;}
.more a:hover{ background: #b38d41; color: #f6f4f0;}

.pagination-container{ margin: 60px 0 0;}
.pagination{ display: flex; font-size: 14px; line-height: 1; justify-content: center;}
.pagination > li{ padding: .75em 1em; border-left: 1px solid #e9e1d1;}
.pagination > li:first-child{ border: none;}
.pagination .active a{ color: #b38d41;}
.pagination a{ color: #000;}
.pagination a:hover{ color: #b38d41;}

.topics{ display: flex; margin: 90px auto 0; padding: 0 0 100px; width: 1100px; font-size: 14px; justify-content: center;}
.topics > .entry{ width: 750px;}
.topics > .entry h2{ font-size: 24px; line-height: 1.5;}
.topics > .entry time{ display: block; margin: 1em 0 0; font-size: 12px; line-height: 1.5;}
.topics > .entry .detail{ margin: 15px 0 0; padding: 75px 0; border-top: 1px solid #e9e1d1; border-bottom: 1px solid #e9e1d1; text-align: justify; text-justify: inter-ideograph; line-height: 1.8;}
.topics > .entry .detail p{ margin: 1.5em 0 0;}
.topics > .entry .detail img{ max-width: 100%; width: auto; height: auto}
.topics > aside{ padding: 0 0 0 60px; width: calc(100% - 750px);}
.topics > aside h2{ font-size: 18px;}
.topics > aside .list-topics{ flex-direction: column;}
.topics > aside .list-topics > li{ padding: 25px 0 0; width: 100%;}
.topics > aside .list-topics a{ display: flex; flex-direction: row;}
.topics > aside .list-topics figure{ padding-top: 80px; width: 80px;}
.topics > aside .list-topics .detail{ margin: 0; padding: 0 0 0 15px; width: calc(100% - 80px); line-height: 1.75;}
.topics > aside .list-topics time{ font-size: 12px;}
.topics > aside .list-topics .tl{ font-size: 12px;}

.tab-wrap{ margin: 0 auto; width: 1100px;}
.list-tab{ position: relative; display: flex; padding: 45px 0 0; border-bottom: 1px solid #e9e1d1; justify-content: center;}
.list-tab > li{ margin: 0 5px; padding: 15px 30px; border: 1px solid #e9e1d1; border-bottom: none; border-radius: 5px 5px 0 0; letter-spacing: .1em; font-size: 13px; font-family: "Noto Serif JP", serif; cursor: pointer;}
.list-tab > li.current{ background: #e9e1d1;}
.tab-content{ display: none; text-align: center;}
.tab-content.current{ display: block;}