@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Noto+Serif+JP&display=swap');

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

 file name  :  collection.css

=================================================================== */
article header .ttl2{ text-align: center;}
article header .ttl2 img{ width: 75vw;}
article .main .lead{ margin: 0 0 30px; padding: 0 15px; line-height: 1.8;}
article .main .list-item{ display: flex; margin: 0 -1px; flex-wrap: wrap;}
article .main .list-item li{ display: none; padding: 2px 1px 0; width: 50%;}
article .main .list-item.accessory li{ width: 33.3333%;}
article .main .list-item a{ position: relative; display: block;}
article .main .list-item .new{ position: absolute; top: 0; left: 0; z-index: 9999; display: inline-block; padding: 5px 15px; background: #b28e30; color: #fff; font-size: 12px;}
article .main .list-item .play{ position: absolute; right: 10px; bottom: 10px; z-index: 99; width: 25px;}
article .main .list-item .cat{ position: absolute; right: 0; bottom: 10px; z-index: 9999; display: inline-block; padding: 0 10px 5px 0; border-bottom: 1px solid; color: #b28e30; font-size: 12px;}
article .main .list-item img{ width: 100%; height: auto;}
article .main .list-item .caption{ display: none;}
.product .cs{display: flex;  margin: 30px auto 0; padding: 0; width: 160px; height: 40px; border: 1px solid; color: #999; text-align: center; letter-spacing: .05em;font-size: 14px; line-height: 1; justify-content: center; align-items: center;}
article .main .color .new{ background-color: #ea9a8f;}
article .main .japanese .new{ background-color: #8b9ccf;}
article .main .list-item figcaption{ display: none;}
article .main .list-item img{ width: 100%;}
article .main > dl{ border-bottom: 1px solid #e9e1d1;}
article .main > dt{ padding: 30px 15px 0; border-top: 1px solid #e9e1d1; font-weight: bold;}
article .main > dt span{ color: #b38d41; font-weight: normal;}
article .main > dd{ margin: 15px 0 0; padding: 0 15px 30px; line-height: 1.8;}
article .main .detail{ padding: 30px 15px 0;}
article .main .detail .number{ color: #b3b3b3;}
article .main .list-gallery video{ width: 100%;}
article .main .list-gallery video img{ width: 100%;}
article .main .detail h2{ margin: 10px 0 0; color: #c49b4c; font-size: 20px; line-height: 1.4;}
article .main .detail ul{ margin: 15px 0 0;}
article .main .detail li{ margin: 5px 0 0;}
article .main .detail li:first-child{ margin: 0;}
article .main .detail li span{ display: inline-block; padding: 8px; background: #e9e1d1; font-size: 12px;}
article .main .detail .price{ margin: 30px 0 0;}
article .main .detail .price span{ display: inline-block; margin: 0 0 0 10px; font-size: 18px;}
article .main .detail p{ margin: 15px 0 0; line-height: 1.8;}
article .main .detail dl{ display: inline-block; margin: 15px 0 0; padding: 8px; border: none; background: #fff; color: #c49b4c; font-size: 12px;}
article .main .detail dt{ display: inline-block; margin: 0 16px 0 0; padding: 0; border: none; font-weight: normal;}
article .main .detail dd{ display: inline-block; margin: 0; padding: 0;}
article .main .detail video{ margin: 15px 0 0; width: 100%;}
article .main .detail .sns{ margin: 30px 0 0;}
article .main .vintage-detail h2{ margin: 0;}
article .main .accessory-detail h2{ margin: 0;}
article .main .accessory-detail .price{ line-height: 1.8;}
article .main .other-detail .cat{ left: .1em; font-family: "Noto Serif JP", serif; line-height: 2;}
article .main .other-detail h2{ display: flex; flex-direction: column;  margin: 0; color: #c49b4c; color: #c49b4c; letter-spacing: .1em; font-size: 20px; font-family: "Noto Serif JP", serif; line-height: 1.5;}
article .main .other-detail h2 span{ font-size: 12px;}
article .main .other-detail h3{ margin: 15px 0 0; color: #c49b4c; font-size: 20px;}
article .main .pager{ position: relative; margin: 30px 0 0; border-top: 1px solid #e9e1d1; border-bottom: 1px solid #e9e1d1; text-align: center;}
article .main .pager .index{ display: inline-block;}
article .main .pager .index a{ display: inline-block; padding: 15px;}
article .main .pager .back{ position: absolute; top: 0; left: 15px; display: inline-block;}
article .main .pager .back a{ display: inline-block; padding: 15px;}
article .main .pager .back a:after{
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    transform: rotate(135deg);
}
article .main .pager .next{ position: absolute; top: 0; right: 15px; display: inline-block;}
article .main .pager .next a{ display: inline-block; padding: 15px;}
article .main .pager .next a:after{
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    transform: rotate(-45deg);
}
article .main section + section{ margin: 45px 0 0; padding: 40px 0 0; background: url("/sp/img/blt.gif") no-repeat top center / contain;}

.list-tab{ display: flex; margin: 0; padding: 0 4px; width: 100%; border-bottom: 1px solid #e9e1d1; justify-content: center;}
.list-tab > li{ padding: 0 4px;}
.list-tab span{ position: relative; z-index: 10; display: flex; padding: 8px 16px; height: 100%; border: 1px solid #e9e1d1; border-bottom: none; border-radius: 4px 4px 0 0; text-align: center; white-space: nowrap; letter-spacing: .1em; font-size: 10px; font-family: "Noto Serif JP", serif; line-height: 1.4; align-items: center;}
.list-tab .select span{ background: #e9e1d1;}
.tab-content{ display: none; padding: 15px 15px 0;}
.tab-content.select{ display: block;}
.tab-content > figure ul{ display: flex; margin: -2px -1px 0; flex-wrap: wrap;}
.tab-content > figure ul > li{ padding: 2px 1px 0; width: 50%;}
article .main .tab-content .detail{ padding: 0;}

.list-item3{ display: flex; margin: -2px -1px 0; flex-wrap: wrap;}
.list-item3 li{ padding: 2px 1px 0; width: 50%; font-size: 14px;}
.list-item3 figcaption{ display: none;}
/*
.cat{ display: inline-block; margin: 15px 0 0; padding: 8px; border: none; background: #fff; color: #c49b4c; font-size: 12px; line-height: 1;}
*/

.original2{ padding: 75px 0 45px; color: #101010;}
.original2 header{ padding: 0 0 30px;}
.original2 header h1{ padding: 15px 0 0; text-align: center;}
.original2 header h1 img{ width: 80vw;}
.original2 header h1.logo_resort img{ width: 90vw;}
.original2 header figure{ margin: 30px 0 0;}
.original2 .lead{ font-size: 14px; font-family: "Noto Serif JP", serif;}
.original2 .lead p{ margin: 2em 0 0; text-align: center;}

.original2 section h2{ margin: 30px 0 0; padding: 40px 0 0; background: url("/sp/img/blt.gif") no-repeat top center / contain; color: #b28c39; text-align: center; letter-spacing: .15rem; font-size: 17px; font-family: "Noto Serif JP", serif; line-height: 1.5;}
.original2 .list-original2 > li{ padding: 30px 0 0;}
.original2 .list-original2 a{ display: block; text-align: center;}
.original2 .list-original2 img{ width: 65vw; border-radius: 6px;}
.original2 .caption{display: flex; flex-direction: column;  padding: 10px 0 0; text-align: center; letter-spacing: .1em; font-size: 12px; font-family: "Noto Serif JP", serif;line-height: 1.5; transition: all .5s ease; align-items: center; justify-content: center; }
.original2 .caption em{ color: #333; font-weight: 400; font-size: 16px;}
.original2 .caption span{ margin: 1em 0 0; font-family: 'Noto Sans JP', sans-serif;}
.original2 a:hover .caption{ opacity: 1;}
.original2 .slide-wrap{ margin: 0 calc(50% - 50vw); padding: 30px 0 0;}
.original2 .slide{ opacity: 0; transition: opacity 1.2s ease;}
.original2 .slide.slick-initialized{ opacity: 1;}
.original2 .slick-slide{ padding: 0 7px; width: 50vw; height: auto !important; backface-visibility: hidden; transform-style: preserve-3d;}
.original2 .slide a{ display: block;}
.original2 .slide img{ overflow: hidden; width: 100%; border-radius: 6px;}
.original2 .dnav{ margin: 30px 0 0; padding: 40px 0 0; background: url("/sp/img/blt.gif") no-repeat top center / contain;}
.original2 .dnav ul{ display: flex; justify-content: center;}
.original2 .dnav ul > li{ padding: 0 15px; border-left: 1px solid #e9e1d1; text-align: center;}
.original2 .dnav ul > li:first-child{ border: none;}
.original2 .dnav a{ letter-spacing: .1em; font-size: 12px; font-family: "Noto Serif JP", serif;}
.original2 .concept h2{ display: flex; flex-direction: column; color: #101010; letter-spacing: .02em; font-size: 16px; line-height: 1.5;align-items: center;}
.original2 .concept h2 em{ color: #101010; letter-spacing: .12em; font-size: 18px;}
.original2 .concept figure{ position: relative; margin: 25px auto 0; height: 72vw;}
.original2 .concept figure img{ max-width: 100%;}
.original2 .concept figure .img1{ position: relative; z-index: 3; width: 54.4vw;}
.original2 .concept figure .img2{ position: absolute; bottom: 0; left: 23.46666667vw; z-index: 2; width: 53.33333333vw;}
.original2 .concept figure .img3{ position: absolute; top: 0; right: 0; z-index: 1; width: 36vw;}
.original2 .more{ margin: 60px 0 0;}
.original2 .more a{ display: flex; margin: 0 auto; width: 38vw; height: 8vw; border: 1px solid #b38d41; color: #b38d41; letter-spacing: .1em; font-size: 10px; align-items: center; justify-content: center;}
.original2 .more a:hover{ background: #b38d41; color: #f6f4f0;}

.original2 .appeal ul > li{ margin: 30px 0 0; padding: 60px 0 0; background: url("/sp/img/blt.gif") no-repeat top center / contain;}
.original2 .appeal ul dl{ text-align: center; font-family: "Noto Serif JP", serif;}
.original2 .appeal ul dt{ color: #b38d41; letter-spacing: .2em; font-size: 18px;}
.original2 .appeal ul dd{ margin: 3em 0 0;}
.original2 .appeal ul p{ margin: 2em 0 0; color: #101010;letter-spacing: .1em; font-size: 14px; line-height: 2;}

.act { opacity: 0; transform: translateY(30px);}
.fadein2 { animation: fadein2 1.6s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
@keyframes fadein2 {
    0% { opacity: 0; transform: translateY(30px);}
    100% { opacity: 1; transform: translateY(0);}
}

.exp{ padding: 0 0 30px;}
.exp dl{text-align: center;letter-spacing: .1em;  font-family: "Noto Serif JP", serif; line-height: 2;}
.exp dt{ font-size: 18px;}
.exp dd{ margin: 1em 0 0; font-size: 12px;}

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

.resort{ padding: 50px 0 0; color: #3e3a39; letter-spacing: .1em; font-family: "Noto Serif JP", serif;}
.resort img,
.resort video{ max-width: none; width: 100%;}
.resort .mv{ position: relative;}
.resort .mv .lead{ position: absolute; top: 50%; left: 50%; display: flex; width: 90vw; color: #fff; text-align: center; font-size: 2.12962963vw; line-height: 2; opacity: 0; transform: translate(-50%,-50%); animation: fadeIn 1s ease-in-out .5s forwards;}

@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.resort header{ display: flex; flex-direction: column; padding: 8vw 0 0; text-align: center; align-items: center;}
.resort header h1{ width: 75%;}
.resort p{ margin: 2em 0 0; text-align: center; font-size: 3.2vw; line-height: 2;}
.resort h1 + p,
.resort h2 + p{ margin: 3em 0 0;}
.resort header figure{ display: flex; flex-direction: column; margin: 12vw 0 0; padding: 0; align-items: center;}
.resort header .video-wrap{ width: 90vw;}
.remodal{ width: 100vw;}
.remodal video{ width: 100%;}
.resort .more{display: flex;  margin: 4vw 0 0; justify-content: center;}
.resort .more a{ display: flex; margin: 0 auto; padding: 0 2em; height: 8vw; background: #e9e1d1; color: #3e3a39; font-size: 2.666666667vw; cursor: pointer; justify-content: center; align-items: center;}
.resort section{ margin: 20vw 0 0;}
.resort h2{ color: #3e3a39; text-align: center; font-size: 4.8vw;}
.resort aside{ margin: 20vw auto 0; padding: 0 0 12vw;}
.resort aside h2{ padding: 40px 0 0; background: url("/sp/img/blt.gif") no-repeat top center / contain;}
.resort .list-aside{display: flex;  margin: 0 auto; padding: 4vw 0 0; width: 90vw; text-align: center; flex-wrap: wrap; justify-content: center;}
.resort .list-aside > li{ margin: 8vw 0 0; padding: 0 0.533333333vw; width: 25%;}
.resort .list-aside > li:first-child{ padding: 0; width: 100%;}
.resort .list-aside > li img{ width: 100%;}
.resort .list-aside > li:first-child img{ width: auto; height: 21.33333333vw;}
.resort .list-aside .cap{ margin: .5em 0 0; font-size: 2.666666667vw; line-height: 1.25;}

.resort .list-items-wrap{ margin: 4.166666667vw 0 0;}
.resort .list-items{ position: relative; margin: 0 auto; width: 91.66666667vw; height: 301.3945741vw;}
.resort .list-items > li{ position: absolute;}
.resort .list-items .item1{ top: 0; left: 0; width: 43.24074074vw;}
.resort .list-items .item2{ top: 13.05555556vw; right: 9.074074074vw; width: 32.30822222vw;}
.resort .list-items .item3{ top: 62.12962963vw; left: 14.81481481vw; width: 38.91674074vw;}
.resort .list-items .item4{ top: 126.0185185vw; left: 7.222222222vw; width: 27.03703704vw;}
.resort .list-items .item5{ top: 155.0925926vw; right: 7.222222222vw; width: 31.13282407vw;}
.resort .list-items .item6{ top: 189.3518519vw; left: 3.703703704vw; width: 43.14814815vw;}
.resort .list-items .item7{ top: 229.4444444vw; right: 0; width: 42.03703704vw;}
.resort .list-items .item8{ bottom: 0; left: 23.42592593vw; width: 38.42592593vw;}
.resort .list-items a{ position: relative; display: block;}
.resort .list-items h3{ position: absolute;}
.resort .list-items .item1 h3{ right: -0.833333333vw; bottom: 22.96296296vw; width: 18.37691667vw;}
.resort .list-items .item2 h3{ right: -7.407407407vw; bottom: 17.31481481vw; width: 13.88373148vw;}
.resort .list-items .item3 h3{ right: -18.24074074vw; bottom: 12.03703704vw; width: 17.87932407vw;}
.resort .list-items .item4 h3{ right: -23.24074074vw; bottom: 17.40740741vw; width: 23.74855556vw;}
.resort .list-items .item5 h3{ bottom: 15.27777778vw; left: -0.740740741vw; width: 9.350861111vw;}
.resort .list-items .item6 h3{ bottom: 12.22222222vw; left: -6.944444444vw; width: 18.07147222vw;}
.resort .list-items .item7 h3{ right: 1.666666667vw; bottom: 15.18518519vw; width: 19.41125926vw;}
.resort .list-items .item8 h3{ right: -8.518518519vw; bottom: 12.96296296vw; width: 21.67932407vw;}