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

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

 file name  :  collection.css

=================================================================== */
article{ position: relative; margin: 0 auto; padding: 205px 0 0; width: 1100px; line-height: 1;}

article header{ position: relative; margin: 0 auto; width: 1100px; height: auto; letter-spacing: .1rem;}
article header h1{ display: block; padding: 0; color: #b48e3a; letter-spacing: .12em; font-weight: 400; font-size: 28px; font-family: "Noto Serif JP", serif;}
article header nav{ position: absolute; top: 50%; right: 0; font-size: 13px; font-family: "Noto Serif JP", serif; transform: translate(0,-50%);}
article header nav ul{ display: flex; border-left: 1px solid #e9e1d1;}
article header nav ul > li{ padding: 20px; 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;}
.original header{ text-align: center;}

.formal header{ display: flex; margin: 0 auto; width: 1100px; height: auto; letter-spacing: .1em; font-family: "Noto Serif JP", serif; justify-content: space-between; align-items: center;}
.formal header .ttl{ display: flex; flex-direction: column;}
.formal header .ttl .en{ color: #b48e3a; letter-spacing: .12em; font-size: 28px;}
.formal header .ttl h1{ display: block; margin: 1em 0 0; color: #000; font-size: 13px;}
.formal header nav ul{ display: flex; border-left: 1px solid #e9e1d1; font-size: 14px;}
.formal header nav ul > li{ padding: 20px 40px; border-right: 1px solid #e9e1d1;}
.formal header nav a{ display: inline; padding: 0 0 5px;}
.formal header nav .current a{ border-bottom: 1px solid; color: #b48e3a;}

.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-weight: 700; font-size: 13px; font-family: "Noto Serif JP", serif;}
.list-archive .current a{ background: #e9e1d1;}

section{ margin: 50px 0 0; padding: 68px 0 0; background: url("/img/blt.gif") no-repeat top center / 1100px 18px;}
section:first-of-type{ margin: 50px 0 0; padding: 0; background: none;}
section.item{display: flex;  padding: 0 0 100px; justify-content: space-between;}
.item figure{ width: 61.8%;}
.item figure img{ padding: 0 50px 0 0; width: 100%;}
.item .detail{ width: 38.2%; font-size: 14px;}
.item .detail .number{ color: #b3b3b3; font-size: 12px;}
.item .detail .cat{ letter-spacing: .12em; font-family: "Noto Serif JP", serif;}
.item .detail h2{ display: flex; flex-direction: column; color: #b48e3a; letter-spacing: .1em; font-size: 28px; font-family: "Noto Serif JP", serif; line-height: 1.5; align-items: flex-start;}
.item .detail h2 span{ font-size: 14px;}
.item .detail .list-category{ margin: 25px 0 0;}
.item .detail .list-category li{ margin: 5px 0 0;}
.item .detail .list-category li:first-child{ margin: 0;}
.item .detail .list-category li span{ display: inline-block; padding: 8px; background: #e9e1d1; font-size: 12px;}
.item .detail .price{ margin: 2em 0 0;}
.item .detail p{ margin: 1em 0 0; line-height: 1.75;}
.item .detail dl{ display: inline-block; margin: 25px 0 0; padding: 8px; background: #fff; color: #c49b4c; font-size: 12px;}
.item .detail dt{ display: inline-block; margin: 0 16px 0 0;}
.item .detail dd{ display: inline-block;}
.item .detail .price span{ display: inline-block; padding: 0 0 0 8px; font-size: 24px;}
.item .detail .item-thumb{ display: flex; box-sizing: border-box; margin: 25px -2px 0; flex-wrap: wrap;}
.item .detail .item-thumb li{ box-sizing: border-box; padding: 4px 2px 0; min-height: 181px; width: 33.33333%;}
.item .detail .item-thumb img{ width: 100%;}
.item .detail .item-thumb-none{ display: none;}
.item .detail .item-thumb .mv{ position: relative;}
.item .detail .item-thumb .mv a{ position: relative; display: block; overflow: hidden; height: 100%; cursor: pointer;}
.item .detail .item-thumb .mv img{ position: absolute; top: 0; left: 50%; width: auto; height: 100%; transform: translate(-50%,0);}
.item .detail .item-thumb .mv .play{ position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%,-50%);}
.item .detail .item-thumb .mv .play img{ position: relative; top: auto; left: auto; width: 100%; height: auto; transform: none;}
.item .detail .sns{ margin: 50px 0 0;}

section .vintage-detail h2{ margin: 0;}
section .accessory-detail h2{ margin: 0;}
section .accessory-detail .price{ line-height: 1.8;}
section .other-detail h2{ margin: 0; padding: 5px 0 0; color: #555; font-size: 14px; line-height: 1;}
section .other-detail h3{ margin: 15px 0 0; color: #c49b4c; font-size: 22px;}

.lead{ margin: 50px 0 0; text-align: center; font-size: 14px; line-height: 2;}
.count{ margin: 50px 0 0; letter-spacing: .1em; font-size: 14px; font-family: "Noto Serif JP", serif;}

.list-item{ display: flex; box-sizing: border-box; margin: 50px -2px 0; padding: 0 0 116px; flex-wrap: wrap;}
.list-item li{ display: none; box-sizing: border-box; margin: 4px 0 0; padding: 0 2px; width: 25%; vertical-align: top; font-size: 14px;}
.list-item .wide{ width: 50%}
.list-item img{ width: 100%;}
.list-item a{ position: relative; display: block;}
.list-item .new{ position: absolute; top: 0; left: 0; z-index: 999; display: inline-block; padding: 5px 15px; background: #b28e30; color: #fff; font-size: 11px;}
/*.list-item .cat{ position: absolute; right: 0; bottom: 10px; z-index: 999; display: inline-block; padding: 5px 0; width: 120px; border-bottom: 1px solid; color: #b28e30; font-size: 12px;}*/
.list-item figure{ position: relative; overflow: hidden;}
.list-item figure img{ -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: scale(1); transform: scale(1);}
.list-item figcaption{ position: absolute; top: 0; left: 0; z-index: 999; display: table; width: 100%; height: 100%; background: rgba(255,255,255,.8); text-align: center; opacity: 0; -webkit-transition: .5s; transition: .5s;}
.list-item .mv{ position: relative;}
.list-item .mv .play{ position: absolute; right: 10px; bottom: 10px; width: 30px;}
.list-item .mv .play img{ position: relative; top: auto; left: auto; width: 100%; height: auto; transform: none;}
.list-item .inner{ display: table-cell; padding: 0; width: 272px; height: 408px; vertical-align: middle; text-align: center;}
.list-item h2{ color: #b28e30; letter-spacing: 2px; font-weight: normal; font-size: 20px; font-family: "Noto Serif JP", serif; line-height: 1.4;}
.list-item h3{ margin: 25px 0 0; color: #555;}
.list-item p{ margin: 10px 0 0; color: #555; font-size: 14px; line-height: 1.5;}
.list-item dl{ margin: 10px 0 0; line-height: 1.5;}
.list-item .btn{ display: inline-block; margin: 25px 0 0; width: 120px; height: 35px; background: #b28c39; color: #fff; text-align: center; line-height: 35px;}
.list-item a:hover figure img{ transform: scale(1.1);}
.list-item a:hover .mv .play img{ transform:  none;}
.list-item a:hover figcaption{ opacity: 1;}
.accessory h2{ letter-spacing: 0; font-family: "Noto Serif JP", serif;}
.other h2{ font-family: "Noto Serif JP", serif;}
.other h3{ font-size: 14px;}

.list-item.other{ margin: 25px 0 0; align-items: flex-end;}
.list-item.other a{ position: relative; display: block; overflow: hidden; cursor: pointer;}
.list-item.other .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-item.other .cat{}
.list-item.other .caption h2{ color: #fff; font-size: 18px;}
.list-item.other .caption .price{ margin: 1em 0 0; font-family: 'Noto Sans JP', sans-serif;}
.list-item.other a:hover .caption{ opacity: 1;}

.accessory section{ margin: 50px 0 0; padding: 68px 0 100px; background: url("/img/blt.gif") no-repeat top left;}
.accessory section h2{ color: #b48e3a; text-align: center; letter-spacing: .15em;  font-size: 24px; font-family: "Noto Serif JP", serif;}
.accessory .list-item2 figure{ width: 100%;}
.accessory .list-item3 figure{ width: 100%;}

.list-item2 .item{ display: table; margin: 50px 0 0; width: 100%;}
.list-item2 img{ width: 100%;}
.list-item2 ul{ display: table-cell; margin: 0 -2px; width: 67%; vertical-align: middle; text-align: left; font-size: 0;}
.list-item2 ul li{ display: inline-block; box-sizing: border-box; padding: 0 2px; width: 50%; font-size: 12px;}
.list-item2 figcaption{ display: table-cell; box-sizing: border-box; padding: 0 0 0 25px; width: 33%; vertical-align: top; line-height: 1.8;}
.list-item2 figcaption p{ font-size: 14px;}
.list-item2 figcaption p + p{ margin: 1em 0 0;}
.list-item2 .price{ margin: 25px 0 0; font-size: 14px;}
.list-item2 .price span{ display: inline-block; font-size: 24px;}

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

.list-item3{ display: flex; box-sizing: border-box; margin: 50px -2px 0; flex-wrap: wrap;}
.list-item3 li{ box-sizing: border-box; margin: 4px 0 0; padding: 0 2px; width: 25%;}
.list-item3 figcaption{ display: none;}
.list-item3 img{ width: 100%;}

.original{ width: 100%;}
.original header{ position: relative; margin: 0 auto; width: 1100px;}
.original section{ margin: 50px auto 0; padding: 0 0 100px; width: 1100px;}
.original section h2{ margin: 50px 0 0; padding: 68px 0 0; background: url("/img/blt.gif") no-repeat top left; color: #b28c39; text-align: center; letter-spacing: .15rem; font-size: 24px; font-family: "Noto Serif JP", serif;}
.original section figure{ float: none; width: 100%;}
.original section figcaption{ margin: 20px 0 0; line-height: 1.8;}
.original section figcaption h3{ color: #b28c39; font-size: 14px;}
.original section figcaption h3 span{ letter-spacing: .1rem; font-style: italic; font-size: 28px; font-family: "Times New Roman", Georgia, Serif;}
.original section figcaption p + p{ margin: 10px 0 0;}
.original .cat{ display: inline-block; margin: 10px auto 0; padding: 8px; background: #fff; color: #b28c39; font-size: 12px; line-height: 1;}

.original2{ color: #101010;}
.original2 header{ display: flex; flex-direction: column; align-items: center;}
.original2 header h1{ text-align: center;}
.original2 header h1 img{ width: auto; height: 90px;}
.original2 header h1.logo_resort img{ height: 140px;}
.original2 header figure{ overflow: hidden; margin: 50px 0 0; width: 100%; border-radius: 6px;}
.original2 header figure img{ width: 100%;}
.original2 .lead{ font-size: 16px; font-family: "Noto Serif JP", serif;}
.original2 .lead p + p{ margin: 2em 0 0;}
.original2 section{ margin: 50px auto 0; padding: 0 0 100px; width: 1100px;}
.original2 section h2{ margin: 50px 0 0; padding: 68px 0 0; background: url("/img/blt.gif") no-repeat top left; color: #b28c39; text-align: center; letter-spacing: .15rem; font-size: 24px; font-family: "Noto Serif JP", serif;}
.original2 .list-original2{ display: flex; justify-content: center; flex-wrap: wrap;}
.original2 .list-original2 > li{ padding: 60px 30px 0; width: 50%;}
.original2 .list-original2 a{ position: relative; display: block; overflow: hidden; border-radius: 6px;}
.original2 .list-original2 img{ width: 100%;}
.original2 .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;}
.original2 .caption small{ font-size: 12px;}
.original2 .caption em{ color: #fff; font-size: 18px;}
.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: 50px 0 0;}
.original2 .slide{ opacity: 0; transition: opacity 1.2s ease;}
.original2 .slide.slick-initialized{ opacity: 1;}
.original2 .slick-slide{ padding: 0 15px; width: 300px; height: auto !important; backface-visibility: hidden; transform-style: preserve-3d;}
.original2 .slide a{ position: relative; display: block; overflow: hidden; border-radius: 6px;}
.original2 .slide img{ width: 100%;}
.original2 nav{ margin: 50px 0 0; padding: 68px 0 0; background: url("/img/blt.gif") no-repeat top left;}
.original2 nav ul{ display: flex; justify-content: center;}
.original2 nav ul > li{ padding: 15px 0; min-width: 240px; border-left: 1px solid #e9e1d1; text-align: center;}
.original2 nav ul > li:first-child{ border: none;}
.original2 nav a{ letter-spacing: .1em; font-size: 16px; font-family: "Noto Serif JP", serif;}
.original2 .concept h2{ display: flex; flex-direction: column; color: #101010; letter-spacing: .02em; font-size: 16px; align-items: center;}
.original2 .concept h2 em{ margin: 0 0 1em; color: #101010; letter-spacing: .12em;font-size: 24px;}
.original2 .concept figure{ position: relative; margin: 40px auto 0; width: 805px; height: 353px;}
.original2 .concept figure img{ max-width: 100%;}
.original2 .concept figure .img1{ position: relative; z-index: 3; width: 352px;}
.original2 .concept figure .img2{ position: absolute; bottom: 0; left: 256px; z-index: 2; width: 352px;}
.original2 .concept figure .img3{ position: absolute; top: 0; right: 0; z-index: 1; width: 232px;}
.original2 .more{ margin: 90px 0 0;}
.original2 .more 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;}
.original2 .more a:hover{ background: #b38d41; color: #f6f4f0;}
.original2 .appeal{ margin: 50px auto 0; padding: 68px 0 100px; width: 1100px; background: url("/img/blt.gif") no-repeat top left;}
.original2 .appeal ul > li{ display: flex; margin: 100px 0 0; align-items: center; justify-content: center;}
.original2 .appeal ul > li:nth-child(odd){ flex-direction: row-reverse;}
.original2 .appeal ul figure{ padding: 0 80px 0 0;}
.original2 .appeal ul > li:nth-child(odd) figure{ padding: 0 0 0 80px;}
.original2 .appeal ul figure img{ margin: 0 auto; width: auto; height: 350px;}
.original2 .appeal ul dl{ width: calc(50% - 50px); text-align: center; font-family: "Noto Serif JP", serif;}
.original2 .appeal ul dl dt{ color: #b38d41; letter-spacing: .2em; font-size: 32px;}
.original2 .appeal ul dl dd{ margin: 2em 0 0; letter-spacing: .1em; font-size: 16px; line-height: 2;}

.original .detail{ margin: 0 auto; padding: 50px 0; width: 50%;}
.original .detail h2{ color: #b28c39; text-align: center; font-size: 14px;}
.original .detail h2 span{ padding: 0 .5em 0 0; letter-spacing: .1rem; font-style: italic; font-size: 28px; font-family: "Times New Roman", Georgia, Serif;}
.original .detail figure{ margin: 0 auto; padding: 25px 0; width: 510px; text-align: center;}
.original .detail figure img{ width: 100%;}
.original .detail p{ margin: 25px 0 0; text-align: center; line-height: 1.8;}
.original .detail .lead2{ margin: 25px 0 0; text-align: center; line-height: 1.8;}
.original .detail dl{ display: flex; width: 100%; line-height: 1.8; justify-content: center;}
.original .detail p + dl{ margin: 25px 0 0;}
.original .detail dt{ padding: 0 20px 0 0;}
.original .detail dd span{ display: inline-block; margin: 0 0 0 10px;}

.original .video{ overflow: hidden; width: 100vw; height: 35vw;}
.original .video a{ position: relative; display: block; height: 35vw; cursor: pointer;}
.original .video a:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.35); content: "";}
.original .video a:after{ position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; background: url("/collection/img/play.svg") no-repeat center / contain; content: ""; opacity: 1; transform: translate(-50%,-50%);}
.original .video a:hover:after{ opacity: .5;}
.original .video video{ width: 100%;}

.list-original{ display: flex; box-sizing: border-box; margin: 40px 0 0; padding: 0 40px;}
.list-original li{ box-sizing: border-box; padding: 0 40px; width: 50%; text-align: center; font-size: 14px;}
.list-original a{ position: relative; display: block;}
.list-original .cap{ position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; line-height: 1.8; opacity: 0; transition: all .5s ease; justify-content: center; align-items: center;}
.list-original a:hover .cap{ opacity: 1;}
.list-original img{ width: 100%;}
.list-original h3{ font-size: 14px;}
.list-original h3 span{ padding: 0 .5em 0 0; letter-spacing: .1rem; font-style: italic; font-size: 28px; font-family: "Times New Roman", Georgia, Serif;}
.list-original p{ margin: 10px 0 0;}
.list-original h4{ margin: 25px 0 0;}
.list-original p{ margin: 10px 0 0; font-size: 12px;}

.content{ padding: 0 0 75px;}
.content h2{ margin: 0 0 50px;}
.content .table{ height: 120px; border-bottom: 1px dotted #e0c898;}
.content .first{ border-top: 1px dotted #e0c898;}
.content .table-left{ display: table-cell; padding: 0 0 0 55px; width: 315px; vertical-align: middle;}
.content .table-right{ display: table-cell; padding: 0 55px 0 0; width: 675px; vertical-align: middle; font-size: 13px; line-height: 1.8;}

.list-look{ padding: 0 0 120px;}
.list-look > li{ padding: 120px 0 0; text-align: left;}
.list-look > li.right{ text-align: right;}
.list-look > li.center{ text-align: center;}
.list-look > li.pl10{ padding: 120px 0 0 10%;}
.list-look > li.pl5{ padding: 120px 0 0 5%;}
.list-look > li.pr10{ padding: 120px 10% 0 0;}
.list-look > li.pr5{ padding: 120px 5% 0 0;}

.list-look video,
.list-look img{ width: 100%;}
.list-look a{ display: inline-block;}

.list-look .w90{ width: 90%;}
.list-look .w80{ width: 80%;}
.list-look .w60{ width: 60%;}
.list-look .w50{ width: 50%;}
.list-look .w40{ width: 40%;}
.list-look .w30{ width: 30%;}


.ani {opacity: 0;}
.fadein {
    animation-name: fadein;
    animation-duration: 3s;
    animation-timing-function: ease;

    animation-fill-mode: forwards;
}
@keyframes fadein {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

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

.product{ padding: 0 0 120px;}
.product figure ul{ margin: -120px 0 0;}
.product figure ul > li:nth-child(odd){ padding: 120px 0 0 20%; text-align: left;}
.product figure ul > li:nth-child(even){ padding: 120px 20% 0 0; text-align: right;}
.product figure ul > li.center{ padding: 120px 0 0; text-align: center;}
.product figure img{ height: 75vh;}
.product .lead{ margin: 90px 0 30px;}
.product dl{ display: flex; width: 100%; font-size: 14px; line-height: 1.8; justify-content: center;}
.product dt{ width: 150px;}
.product dd span{ display: inline-block; width: 120px; text-align: right;}

.exp{ position: relative; margin: 50px 0 0; width: 100%; background: no-repeat top center / cover;}
.exp.bg-morning{ height: 350px; background-image: url("/collection/img/morning/bg_morning.jpg");}
.exp.bg-tomesode1{ height: 350px; background-image: url("/collection/img/tomesode/bg_tomesode.jpg");}
.exp dl{ text-align: center; letter-spacing: .2em; font-family: "Noto Serif JP", serif; line-height: 2;}
.exp.bg-morning dl{ position: absolute; top: 50%; left: 10%; transform: translate(0,-50%);}
.exp.bg-tomesode1 dl{ position: absolute; top: 50%; right: 5%; transform: translate(0,-50%);}
.exp dt{ font-size: 30px;}
.exp dd{ margin: 1em 0 0; font-size: 15px;}

.resort{ padding: 132px 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; margin: 0 calc(50% - 50vw);}
.resort .mv .lead{ position: absolute; top: 50%; left: 50%; display: flex; width: 1100px; color: #fff; text-align: center; font-size: 1.302083333vw; 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: 75px 0 0; text-align: center; align-items: center;}
.resort header h1{ width: 50%;}
.resort p{ margin: 2em 0 0; text-align: center; font-size: 16px; line-height: 2;}
.resort h1 + p,
.resort h2 + p{ margin: 4em 0 0;}
.resort header figure{display: flex; flex-direction: column; margin: 75px 0 0; padding: 0; align-items: center;}
.resort header .video-wrap{ width: 960px;}
.remodal{ width: 60vw;}
.remodal video{ width: 100%;}
.resort .more{display: flex;  margin: 50px 0 0; justify-content: center;}
.resort .more a{ display: flex; margin: 0 auto; padding: 0 2em; height: 45px; background: #e9e1d1; color: #3e3a39; font-size: 12px; cursor: pointer; justify-content: center; align-items: center;}
.resort section{ margin: 125px 0 0;}
.resort h2{ color: #3e3a39; text-align: center; font-size: 24px;}
.resort aside{ margin: 125px auto 0; padding: 0 0 100px;}
.resort aside h2{ padding: 68px 0 0; background: url("/img/blt.gif") no-repeat top left;}
.resort .list-aside{ display: flex; padding: 25px 0 0; text-align: center; flex-wrap: wrap; justify-content: space-between;}
.resort .list-aside > li{ margin: 50px 0 0; width: 25%;}
.resort .list-aside > li:first-child{ width: 100%;}
.resort .list-aside img{ width: auto; height: 250px;}
.resort .list-aside .cap{ margin: 1em 0 0; font-size: 16px;}

.resort .list-items-wrap{ margin: 0 calc(50% - 50vw); width: 100vw;}
.resort .list-items{ position: relative; margin: 0 auto; width: 83.85416667vw; height: 93.75vw;}
.resort .list-items > li{ position: absolute;}
.resort .list-items .item1{ top: 0; left: 0; height: 23.125vw;}
.resort .list-items .item2{ top: 4.53125vw; right: 11.45833333vw; height: 25.3125vw;}
.resort .list-items .item3{ top: 14.21875vw; left: 26.30208333vw; height: 27.08333333vw;}
.resort .list-items .item4{ top: 29.79166667vw; left: 0; height: 22.91666667vw;}
.resort .list-items .item5{ top: 38.38541667vw; right: 23.69791667vw; height: 21.875vw;}
.resort .list-items .item6{ top: 48.85416667vw; left: 12.91666667vw; height: 28.125vw;}
.resort .list-items .item7{ top: 52.76041667vw; right: 0; height: 24.21875vw;}
.resort .list-items .item8{ bottom: 0; left: 36.09375vw; height: 21.35416667vw;}
.resort .list-items a{ position: relative; display: block; height: 100%;}
.resort .list-items a > img{ visibility: visible; width: auto; height: 100%; height: 100%; opacity: 1; transition: all .5s ease;}
.resort .list-items a:hover > img{ visibility: hidden; opacity: 0;}
.resort .list-items a .off{ position: absolute; top: 0; left: 50%; visibility: hidden; height: 100%; opacity: 0; transition: all .5s ease; transform: translate(-50%,0);}
.resort .list-items a .off img{ width: auto; height: 100%;}
.resort .list-items a:hover .off{ visibility: visible; opacity: 1;}
.resort .list-items h3{ position: absolute;}
.resort .list-items .item1 h3{ right: -2.8125vw; bottom: 7.604166667vw; width: 9.86246875vw;}
.resort .list-items .item2 h3{ right: -7.135416667vw; bottom: 5.46875vw; width: 7.45109375vw;}
.resort .list-items .item3 h3{ right: -9.583333333vw; bottom: 6.145833333vw; width: 9.595385417vw;}
.resort .list-items .item4 h3{ right: -12.86458333vw; bottom: 6.354166667vw; width: 12.7453125vw;}
.resort .list-items .item5 h3{ bottom: 4.114583333vw; left: -3.333333333vw; width: 5.018359375vw;}
.resort .list-items .item6 h3{ bottom: 6.458333333vw; left: -7.083333333vw; width: 9.698588542vw;}
.resort .list-items .item7 h3{ right: 2.135416667vw; bottom: 7.135416667vw; width: 10.41763542vw;}
.resort .list-items .item8 h3{ right: -5.625vw; bottom: 5.572916667vw; width: 11.634875vw;}