@charset "utf-8";

video{ width:100%; height:auto; display:block; }
.under-tit{ position:fixed; left:0; top:0; height: 100vh; width:40%; text-align:center; font-family: "EB Garamond", serif; font-weight:400; font-size:75%; }
.under-tit.stop{ position:absolute;  }
.under-tit > div{ position:absolute; top:50%; left: 50%; transform:translate(-50%,-50%); width:100%;  }
.under-tit h1{ font-size:350%; font-weight:500; position:relative; margin-bottom:.8em; line-height:1.2; padding-bottom:.5em; }
.under-tit h1 span{ display:block; font-size:45%; }
.under-tit h1:before{ content:""; position: absolute; width:4em; height:1px; left:calc(50% - 2em); bottom:-.3em; background-color:#554440; }
.under-tit p{ font-size:240%; letter-spacing:0.01em; }
.under-tit p span{ font-size:50%; display:block; }

#right-cont .under-tit.sp + .txt-area{ width:80%; }

#under{ display:flex; justify-content:right; max-width:1920px; margin:0 auto; }
.platinum #under{ background-color:#d0d0d6; margin-bottom:10em; }
#right-cont{ width:60%; max-width: 1200px; }
#right-cont > section{ margin:14em auto; }
#right-cont .main-ph{ overflow:hidden; }
#right-cont .main-ph img{ opacity:0; transition:1s .5s cubic-bezier(0.215, 0.61, 0.355, 1); transform:scale(1.3); filter:blur(1em); }
#right-cont .main-ph.play img{ opacity:1; transform:scale(1); filter:blur(0); }
#right-cont .txt-area{ width:70%; margin:4em auto; text-align:center; }
#right-cont .txt-area h3{ font-weight:400; margin-bottom: 1em; font-size:150%; }
#right-cont .txt-area h4{ font-weight:500; margin-bottom:1em; font-size:110%; }
#right-cont .txt-area p{ font-size:95%; line-height:2; margin-bottom:3em; }
#right-cont ul.price{ display:flex; justify-content:center; align-items: flex-end; text-align: left; flex-wrap: wrap; gap:2em; font-size:80%; letter-spacing:0.05em; }
#right-cont ul.price li{ font-size:110%; }
#right-cont ul.price span{ display:inline-block; margin-left:1em; }
#right-cont ul.price a{ display:inline-block; padding:.4em .1em; position:relative; }
#right-cont ul.price a:before{ content:""; position:absolute; left:50%; bottom:0; width:0; height:1px; background:#554440; transition:.5s cubic-bezier(0.215, 0.61, 0.355, 1); }
#right-cont ul.price a:hover:before{ width:100%; left:0; }
#right-cont ul.price span.sub{ display:block; font-size:90%; margin-left:0; }
#right-cont .ph{ width:70%; margin:4em auto; overflow:hidden; }
#right-cont .ph-fl{ display:flex; gap:1em; justify-content:space-between; }
#right-cont .ph-fl figure{ overflow:hidden; }
#right-cont .ph-fl figure.type2{ margin-top:8em; }
#right-cont .ph img,#right-cont .ph video,#right-cont .ph-fl img{ opacity:0; transition:1s cubic-bezier(0.215, 0.61, 0.355, 1); transform:scale(1.2); filter:blur(1em); }
#right-cont .ph-fl figure:last-child img{ transition-delay:.3s; }
#right-cont .ph.play img,#right-cont .ph.play video,#right-cont .ph-fl.play img{ opacity:1; transform:scale(1); filter:blur(0); }
#right-cont h2{ text-align:center; font-size: 250%; font-family: "EB Garamond", serif; font-weight:400; }

#local-nav{ margin:6em auto; font-family: "EB Garamond", serif; max-width:1000px; width:90%; }
#local-nav h2{ text-align:center; margin-bottom: 1em; font-weight:400; }
#local-nav h2 b{ font-size:250%; display:block; font-weight:400; color:#5a5756; letter-spacing:0.1em; }
#local-nav h2 span{  display:block; color:#a67762; font-size:150%;  }
#local-nav ul{ display:flex; justify-content:space-between; padding:50px; font-size:85%; gap:2%; letter-spacing: 0; text-align:center; flex-wrap:wrap;  }
#local-nav ul li{ width:32%; margin-bottom:8%; }
#local-nav ul p{ padding-top: 1em; font-size:150%; }
#local-nav ul span{  display:block; }
#local-nav ul b{ font-size:170%; display:block; font-weight:400; line-height:1.3; }
#local-nav ul figure{ overflow:hidden; }
#local-nav ul img{ transition:.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
#local-nav ul a:hover figure{ animation: fadeimg .6s ease forwards; }
#local-nav ul a:hover img{ transform:scale(1.1); }

#local-nav ul li.wid{ width:100%; }
#local-nav ul li.wid a{ display:block; position:relative; }
#local-nav ul li.wid p{ position:absolute; left:6%; top:50%; transform:translateY(-50%); text-align:left; font-size:200%; }

@keyframes fadeimg {
  0% { opacity:1; }
  1% {opacity:.6;}
  100% {opacity:1; }
}


@media screen and (max-width: 1440px) {
  .under-tit{ font-size:85%; }
  #right-cont{ font-size:105%; }
  #local-nav ul{ padding:25px; }
}
@media screen and (max-width: 1200px) {
  #local-nav{ font-size:120%; }
}

@media screen and (max-width: 810px) {
  .under-tit{ width:100%; height: auto; position: static !important; padding:7em 0 3em; }
  .platinum .under-tit{ background-color:#d0d0d6; }
  .under-tit > div{ position: static !important; transform:translate(0); }
  #right-cont{ width:100%; }
  #right-cont .txt-area{ font-size:110%; }
  #right-cont .ph-fl{ width:90%; margin: 0 auto; }

  #local-nav{ margin:2em auto 0; font-size:100%; width:100%; }
  #local-nav ul{ padding:5%; }
  #local-nav ul li.wid p{ top:45%; font-size:170%;}
}

@media screen and (max-width: 600px) {
  #right-cont .txt-area{ width: 90% !important; }
  #right-cont .txt-area h3{ font-size:140%; }
  #right-cont .txt-area p{ font-size:100%; }
  #right-cont{ font-size:130%; }
  #right-cont ul.price{ display:block; font-size:80%; text-align:center; }
  #right-cont ul.price a:before{ display:none; }
  #right-cont ul.price span.sub{ padding-bottom:.4em; }

}