@font-face {
  font-family: "CopperplateGothic";
  src: url("fonts/copperplategothic_bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ShipporiMinchoRegular";
  src: url("fonts/ShipporiMincho-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --main-color: #2e3c4a;
  --sub-color: #919ba4;
  --accent-color: #ffffff;
  --text-color: #1e3042;
  --background: #f3f1e5;
  --champagne: #ebe5c4;
  --font-gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-gothic: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
  --ff-copperplate: 'CopperplateGothic', sans-serif;
  --ff-shippori: 'ShipporiMinchoRegular', sans-serif;
  --ls-01: 0.1em;
  --site-width: 1200px;
  --site-width-m: 1024px;
}

* {
  font-family: var(--font-gothic);
  box-sizing: border-box;
  color: var(--text-color);
  font-size: 14px;
}

html,body{width:100%;margin:0;padding:0;overflow-x:hidden;}
body{-webkit-text-size-adjust:100%;padding:0;margin:0;}
a{text-decoration:none;cursor:pointer;width:100%;height:100%;display:block;}
a:hover{text-decoration:none;}
ul{list-style:none;padding:0;margin:0;}
img {width:100%;height:auto;object-fit:cover;}

.main-color {color: var(--main-color);}
.sub-color {color: var(--sub-color);}
.accent-color {color: var(--accent-color);}
.color-w {color: #ffffff;}
.ls-01 {letter-spacing: 0.1em;}
.ls-02 {letter-spacing: 0.2em;}
.max-width-600,.max-width-700,.max-width-800,.max-width-1000 {
  margin: 0 auto;
  display: block;
}
.max-width-600 {max-width: 600px;}.max-width-700 {max-width: 700px;}.max-width-800 {max-width: 800px;}.max-width-1000 {max-width: 1000px;}
.pd-0 {padding: 0!important;}.pd-3{padding: 3px;}.pd-5{padding: 5px;}.pd-8{padding: 8px;}.pd-10 {padding: 10px;}.pd-12 {padding: 12px;}.pd-15 {padding: 15px;}.pd-16 {padding: 16px;}.pd-20 {padding: 20px;}.pd-24 {padding: 24px;}.pd-25 {padding: 25px;}.pd-30 {padding: 30px;}.pd-32 {padding: 32px;}
.plr-0 {padding-left: 0!important;padding-right: 0!important;}.plr-3 {padding-left: 3px;padding-right: 3px;}.plr-5 {padding-left: 5px;padding-right: 5px;}.plr-8 {padding-left: 8px;padding-right: 8px;}.plr-10 {padding-left: 10px;padding-right: 10px;}.plr-12 {padding-left: 12px;padding-right: 12px;}.plr-15 {padding-left: 15px;padding-right: 15px;}.plr-16 {padding-left: 16px;padding-right: 16px;}.plr-20 {padding-left: 20px;padding-right: 20px;}.plr-24 {padding-left: 24px;padding-right: 24px;}.plr-25 {padding-left: 25px;padding-right: 25px;}.plr-30 {padding-left: 30px;padding-right: 30px;}.plr-32 {padding-left: 32px;padding-right: 32px;}
.ptb-0 {padding-top: 0!important;padding-bottom: 0!important;}.ptb-3 {padding-top: 3px;padding-bottom: 3px;}.ptb-5 {padding-top: 5px;padding-bottom: 5px;}.ptb-8 {padding-top: 8px;padding-bottom: 8px;}.ptb-10 {padding-top: 10px;padding-bottom: 10px;}.ptb-12 {padding-top: 12px;padding-bottom: 12px;}.ptb-15 {padding-top: 15px;padding-bottom: 15px;}.ptb-16 {padding-top: 16px;padding-bottom: 16px;}.ptb-20 {padding-top: 20px;padding-bottom: 20px;}.ptb-24 {padding-top: 24px;padding-bottom: 24px;}.ptb-25 {padding-top: 25px;padding-bottom: 25px;}.ptb-30 {padding-top: 30px;padding-bottom: 30px;}.ptb-32 {padding-top: 32px;padding-bottom: 32px;}
.pl-0 {padding-left: 0!important;}.pl-3 {padding-left: 3px;}.pl-5 {padding-left: 5px;}.pl-8 {padding-left: 8px;}.pl-10 {padding-left: 10px;}.pl-12 {padding-left: 12px;}.pl-15 {padding-left: 15px;}.pl-16 {padding-left: 16px;}.pl-20 {padding-left: 20px;}.pl-24 {padding-left: 24px;}.pl-25 {padding-left: 25px;}.pl-30 {padding-left: 30px;}.pl-32 {padding-left: 32px;}
.pr-0 {padding-right: 0!important;}.pr-3 {padding-right: 3px;}.pr-5 {padding-right: 5px;}.pr-8 {padding-right: 8px;}.pr-10 {padding-right: 10px;}.pr-12 {padding-right: 12px;}.pr-15 {padding-right: 15px;}.pr-16 {padding-right: 16px;}.pr-20 {padding-right: 20px;}.pr-24 {padding-right: 24px;}.pr-25 {padding-right: 25px;}.pr-30 {padding-right: 30px;}.pr-32 {padding-right: 32px;}
.pt-0 {padding-top: 0!important;}.pt-3 {padding-top: 3px;}.pt-5 {padding-top: 5px;}.pt-8 {padding-top: 8px;}.pt-10 {padding-top: 10px;}.pt-12 {padding-top: 12px;}.pt-15 {padding-top: 15px;}.pt-16 {padding-top: 16px;}.pt-20 {padding-top: 20px;}.pt-24 {padding-top: 24px;}.pt-25 {padding-top: 25px;}.pt-30 {padding-top: 30px;}.pt-32 {padding-top: 32px;}
.pb-0 {padding-bottom: 0!important;}.pb-3 {padding-bottom: 3px;}.pb-5 {padding-bottom: 5px;}.pb-8 {padding-bottom: 8px;}.pb-10 {padding-bottom: 10px;}.pb-12 {padding-bottom: 12px;}.pb-15 {padding-bottom: 15px;}.pb-16 {padding-bottom: 16px;}.pb-20 {padding-bottom: 20px;}.pb-24 {padding-bottom: 24px;}.pb-25 {padding-bottom: 25px;}.pb-30 {padding-bottom: 30px;}.pb-32 {padding-bottom: 32px;}
.mg-0 {margin: 0!important;}.mg-3{margin: 3px;}.mg-5{margin: 5px;}.mg-8{margin: 8px;}.mg-10 {margin: 10px;}.mg-12 {margin: 12px;}.mg-15 {margin: 15px;}.mg-16 {margin: 16px;}.mg-20 {margin: 20px;}.mg-24 {margin: 24px;}.mg-25 {margin: 25px;}.mg-30 {margin: 30px;}.mg-32 {margin: 32px;}
.mlr-0 {margin-left: 0!important;margin-right: 0!important;}.mlr-3 {margin-left: 3px;margin-right: 3px;}.mlr-5 {margin-left: 5px;margin-right: 5px;}.mlr-8 {margin-left: 8px;margin-right: 8px;}.mlr-10 {margin-left: 10px;margin-right: 10px;}.mlr-12 {margin-left: 12px;margin-right: 12px;}.mlr-15 {margin-left: 15px;margin-right: 15px;}.mlr-16 {margin-left: 16px;margin-right: 16px;}.mlr-20 {margin-left: 20px;margin-right: 20px;}.mlr-24 {margin-left: 24px;margin-right: 24px;}.mlr-25 {margin-left: 25px;margin-right: 25px;}.mlr-30 {margin-left: 30px;margin-right: 30px;}.mlr-32 {margin-left: 32px;margin-right: 32px;}
.mtb-0 {margin-top: 0!important;margin-bottom: 0!important;}.mtb-3 {margin-top: 3px;margin-bottom: 3px;}.mtb-5 {margin-top: 5px;margin-bottom: 5px;}.mtb-8 {margin-top: 8px;margin-bottom: 8px;}.mtb-10 {margin-top: 10px;margin-bottom: 10px;}.mtb-12 {margin-top: 12px;margin-bottom: 12px;}.mtb-15 {margin-top: 15px;margin-bottom: 15px;}.mtb-16 {margin-top: 16px;margin-bottom: 16px;}.mtb-20 {margin-top: 20px;margin-bottom: 20px;}.mtb-24 {margin-top: 24px;margin-bottom: 24px;}.mtb-25 {margin-top: 25px;margin-bottom: 25px;}.mtb-30 {margin-top: 30px;margin-bottom: 30px;}.mtb-32 {margin-top: 32px;margin-bottom: 32px;}
.ml-0 {margin-left: 0!important;}.ml-3 {margin-left: 3px;}.ml-5 {margin-left: 5px;}.ml-8 {margin-left: 8px;}.ml-10 {margin-left: 10px;}.ml-12 {margin-left: 12px;}.ml-15 {margin-left: 15px;}.ml-16 {margin-left: 16px;}.ml-20 {margin-left: 20px;}.ml-24 {margin-left: 24px;}.ml-25 {margin-left: 25px;}.ml-30 {margin-left: 30px;}.ml-32 {margin-left: 32px;}
.mr-0 {margin-right: 0!important;}.mr-3 {margin-right: 3px;}.mr-5 {margin-right: 5px;}.mr-8 {margin-right: 8px;}.mr-10 {margin-right: 10px;}.mr-12 {margin-right: 12px;}.mr-15 {margin-right: 15px;}.mr-16 {margin-right: 16px;}.mr-20 {margin-right: 20px;}.mr-24 {margin-right: 24px;}.mr-25 {margin-right: 25px;}.mr-30 {margin-right: 30px;}.mr-32 {margin-right: 32px;}
.mt-0 {margin-top: 0!important;}.mt-3 {margin-top: 3px;}.mt-5 {margin-top: 5px;}.mt-8 {margin-top: 8px;}.mt-10 {margin-top: 10px;}.mt-12 {margin-top: 12px;}.mt-15 {margin-top: 15px;}.mt-16 {margin-top: 16px;}.mt-20 {margin-top: 20px;}.mt-24 {margin-top: 24px;}.mt-25 {margin-top: 25px;}.mt-30 {margin-top: 30px;}.mt-32 {margin-top: 32px;}
.mb-0 {margin-bottom: 0!important;}.mb-3 {margin-bottom: 3px;}.mb-5 {margin-bottom: 5px;}.mb-8 {margin-bottom: 8px;}.mb-10 {margin-bottom: 10px;}.mb-12 {margin-bottom: 12px;}.mb-15 {margin-bottom: 15px;}.mb-16 {margin-bottom: 16px;}.mb-20 {margin-bottom: 20px;}.mb-24 {margin-bottom: 24px;}.mb-25 {margin-bottom: 25px;}.mb-30 {margin-bottom: 30px;}.mb-32 {margin-bottom: 32px;}
.fw-b {font-weight: bold;}
.ta-l {text-align: left;}.ta-c {text-align: center;}.ta-r {text-align: right;}
.d-block {display: block;}.d-inline-block {display: inline-block;}.d-inline {display: inline;}.d-none {display: none;}
.p-relative {position: relative;}.p-absolute {position: absolute;}
.d-flex {display: flex;}.d-iflex {display: inline-flex;}.fd-c {flex-direction: column;}.fd-cr {flex-direction:column-reverse;}.fd-r {flex-direction: row;}.fd-rr {flex-direction:row-reverse;}.fw-w {flex-wrap: wrap;}.fw-n {flex-wrap: nowrap;}.jc-fs {justify-content: flex-start;}.jc-fe {justify-content: flex-end;}.jc-c {justify-content: center;}.jc-sb {justify-content: space-between;}.jc-sa {justify-content: space-around;}.ai-c {align-items: center;}.ai-fs {align-items: flex-start;}.ai-fe {align-items: flex-end;}.flex-1 {flex: 1;}
.gap-3{gap: 3px;}.gap-5 {gap: 5px;}.gap-8 {gap: 8px;}.gap-10 {gap: 10px;}.gap-12 {gap: 12px;}.gap-15 {gap: 15px;}.gap-16 {gap: 16px;}.gap-20 {gap: 20px;}.gap-24 {gap: 24px;}.gap-25 {gap: 25px;}.gap-30 {gap: 30px;}.gap-32 {gap: 32px;}
.fs-8 {font-size: 8px;}.fs-10 {font-size: 10px;}.fs-12 {font-size: 12px;}.fs-14 {font-size: 14px;}.fs-16 {font-size: 16px;}.fs-18 {font-size: 18px;}.fs-20 {font-size: 20px;}.fs-24 {font-size: 24px;}.fs-28 {font-size: 28px;}.fs-30 {font-size: 30px;}.fs-32 {font-size: 32px;}.fs-36 {font-size: 36px;}.fs-48 {font-size: 48px;}.fs-60 {font-size: 60px;}
.w-100 {width: 100%;}
.h-100 {height: 100%;}
.obj-contain {object-fit: contain;}

.ff-copperplate {
  font-family: var(--ff-copperplate);
}

.less-than-768 {
  display: none;
}

.greater-than-768 {
  display: inline-block;
}

.greater-than-550 {
  display: inline-block;
}

.less-than-600 {
  display: none;
}
@media (max-width: 550px) {
  .greater-than-550 {
    display: none;
  }
}

@media (max-width: 600px) {
  .less-than-600 {
    display: inline-block;
  }
}

@media (max-width: 768px) {
  .less-than-768 {
    display: inline-block;
  }
  .greater-than-768 {
    display: none;
  }
}


#page {
  position: relative;
}

/* ----------------------------------------------- */
/* header */
/* ----------------------------------------------- */

.site-header {
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
  z-index: 100;
  position: relative;
}

.header-container {
  max-width: var(--site-width-m);
  margin: 0 auto;
  height: 100px;
}

.site-header .header-logo {
  height: 90px;
  width: auto;
}

.site-header * {
  font-family: var(--ff-copperplate);
  color: var(--main-color);
}

.contact-menu {
}

.contact-menu li {
  width: 100px;
}

.contact-menu li.social-link {
  width: 36px;
}

.contact-menu li.social-link img {
  transition: all 0.3s ease-in-out;
}

.contact-menu li:hover.social-link img {
  transform: scale(1.1);
}

.contact-menu li:not(.social-link):not(.hamburger-menu) a > div {
  line-height: 1;
}

.contact-menu li:not(.social-link):not(.hamburger-menu) a > div > span:first-child {
  display: block;
  position: relative;
  opacity: 0;
  top: 0;
  transition: all 0.3s ease-in-out;
}

.contact-menu li:not(.social-link):not(.hamburger-menu) a:hover > div > span:first-child {
  opacity: 1;
  top: -8px;
}

.contact-menu li:not(.social-link):not(.hamburger-menu) a > div > span {
  transition: all 0.3s ease-in-out;
  font-size: 12px;
}

.contact-menu li:not(.social-link):not(.hamburger-menu) a > div > span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact-menu li:not(.social-link):hover a > div > span:nth-child(2) {
  top: 8px;
  color: var(--sub-color);
}

.global-menu {
  height: 36px;
}

.global-menu li {
  width: 100px;
}

.global-menu li img {
  display: none;
  object-fit: contain;
  width: 20px;
  height: 20px;
  object-position: center;
  transition: all 0.3s ease-in-out;
}

.header-menu-container li a > div {
  font-size: 12px;
  letter-spacing: var(--ls-01);
  position: relative;
}

.global-menu li a > div > span:first-child {
  transition: all 0.3s ease-in-out;
  font-size: 12px;
  position: relative;
}

.global-menu li:hover a > div > span:first-child {
  color: var(--sub-color);
}

.global-menu li a > div > span:nth-child(2) {
  display: block;
  opacity: 0;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
  font-size: 12px;
}

.global-menu li:hover a > div > span:nth-child(2) {
  opacity: 1;
  top: -22px;
}

.global-menu li:hover a img {
  transform: scale(.6);
  opacity: .5;
}

.header-right-wrapper {
  display: inline-block;
  width: initial;
  top: 10px;
  right: 10px;
}

@media (max-width: 800px){
  .contact-menu {
    margin-right: 52px;
  }
  .site-header {
    background-color: transparent;
    box-shadow: none;
  }
  .site-header .header-container {
    height: 60px;
  }
  .site-header .header-logo {
    width: 175px;
    height: 60px;
  }
  .site-header .global-menu,
  .contact-menu li:not(.social-link) {
    display: none;
  }
  .site-header .header-logo .logo-sp {
    display: block;
    width: 175px;
    height: 60px;
  }
  .contact-menu li.social-link {
    width: 30px;
  }
}

/* ----------------------------------------------- */
/* sidemenu */
/* ----------------------------------------------- */

#blind {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0;
  transition: all .8s ease-in-out;
}

#page.menu-visible #blind {
  z-index: 450;
  opacity: 1;
}

#sidemenu {
  position: fixed;
  opacity: 0;
  right: 0;
  top: 0;
  z-index: -1;
  width: 80vw;
  max-width: 400px;
  height: 100dvh;
  background-color: #FFFFFF;
  padding-top: 80px;
  border-radius: 30px 0px 0px 30px;
  transition: border-radius .8s ease-in-out;
}

#page.menu-visible #sidemenu {
  animation: reveal .8s ease-in-out forwards;
  border-radius: 0;
}
#page.menu-invisible #sidemenu {
  animation: hide .8s ease-in-out forwards;
}

@keyframes reveal {
  0% {
    z-index: 490;
    opacity: 0;
  }
  100% {
    z-index: 490;
    opacity: 1;
  }
}
@keyframes hide {
  0% {
    z-index: 490;
    opacity: 1;
  }
  99% {
    z-index: 490;
    opacity: 0.01;
  }
  100% {
    z-index: -1;
    opacity: 0;
  }
}

#sidemenu .menu-title {
  font-family: var(--ff-copperplate);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: right;
  margin-right: 6px;
  transform: translateX(40px);
  transition: transform .6s ease-in-out, opacity 1s ease-in-out;
  opacity: 0;
}

#sidemenu .sns-wrapper {
  width: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #FFFFFF;
  transform: translateX(40px);
  transition: transform .6s ease-in-out, opacity 1s ease-in-out;
  opacity: 0;
}

#sidemenu .sns-wrapper > li {
  margin: 0 8px;
}

#sidemenu .sns-wrapper > li > a {
  width: 30px;
  height: 30px;
}

#sidemenu .sns-wrapper > li > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#sidemenu .menu-wrapper {
  padding: 12px;
}

#sidemenu .menu-wrapper > img {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 30px;
  width: auto;
  margin-top: 5px;
}

#sidemenu .worldest-menu {
  padding: 0px;
}

#page.menu-visible #sidemenu .worldest-menu > li:first-child {
  margin-top: 10px;
}

#page.menu-visible #sidemenu .worldest-menu > li,
#page.menu-visible #sidemenu .sns-wrapper,
#page.menu-visible #sidemenu .menu-title {
  transform: translateX(0);
  opacity: 1;
  text-align: right;
}

#sidemenu .worldest-menu > li {
  float: none;
  margin: 0 8px;
  margin-top: 12px;
  transform: translateX(40px);
  opacity: 0;
  transition: .6s ease-in-out;
}

#sidemenu .worldest-menu a {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  padding: 0;
  padding-left: 3px;
  border-bottom: .5px solid var(--main-color);
  font-family: var(--ff-copperplate);
}

#sidemenu .worldest-menu a img {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  object-fit: contain;
}

.hamburger-menu {
  /* opacity: 0; */
  transition: opacity .3s ease-in-out;
  position: fixed;
  z-index: 500;
  top: 10px;
  right: 12px;
  width: 50px;
  height: 60px;
  cursor: pointer;
}

.hamburger-menu button {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  background: none;
  z-index: 500;
  transition: .5s ease-in-out;
}

.hamburger-menu button > div:first-child {
  position: relative;
  width: calc(100% - 20px);
  height: 28px;
  padding: 0 10px;
}

.hamburger-menu button > .glass-clinking {
  position: absolute;
  transform: translate(4px, 12px) rotate(10deg);
  top: -7px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transition: none;
}

.menu-visible .hamburger-menu button > .glass-clinking {
  opacity: 1;
  transition: all 0s linear;
  transition-delay: 0.3s;
}

.hamburger-menu button > .glass-clinking > span {
  display: block;
  transform-origin: bottom;
  width: 2px;
  height: 6px;
  background: var(--main-color);
  border-radius: 1px;
}

.hamburger-menu button > .glass-clinking > span:first-child {
  transform: rotate(-12deg);
  height: 5px;
}

.hamburger-menu button > .glass-clinking > span:last-child {
  transform: translateY(1px) rotate(12deg);
  height: 4px;
}

.hamburger-menu button img {
  width: 8px;
  height: auto;
  position: absolute;
  bottom: 0;
  transition: all 0.3s linear;
  transform-origin: bottom;
}

.hamburger-menu button img:first-child {
  left: 2px;
}

.hamburger-menu button img:nth-child(2) {
  right: 2px;
}

.menu-visible .hamburger-menu button img:first-child {
  transform: translate(2px, -5px) rotate(10deg);
}

.menu-visible .hamburger-menu button img:nth-child(2) {
  transform: translate(-2px, -1px) rotate(-8deg);
}

/* ----------------------------------------------- */
/* first view */
/* ----------------------------------------------- */

.first-view {
  display: block;
  width: 100%;
  height: 100dvh;
  position: fixed;
  z-index: 400;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 2.5s ease-in-out, filter 3s ease-in-out;
  padding: 20px;
  background-color: #FFFFFF;
}

.first-view > .first-view-content {
  width: calc(100%);
  height: calc(100%);
  border-radius: 0;
  position: absolute;
  z-index: 1000;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  /* background: rgba(255, 255, 255, 1); */
  transition: all 1s ease-in-out;
}

.first-view > .first-view-content > canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /* background-color: var(--background); */
}

.bubble-container-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1.5s ease-in-out;
  background: linear-gradient(180deg, #ffffff, #ebe5c499);
  opacity: 0;
}

@supports (height: 100dvh) {
  .first-view {
    height: 100dvh;
  }
}

.first-view .scroll-indicator {
  z-index: 1000;
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  position: absolute;
  left: 50%;
  bottom: 75px;
  transform: translate(-50%, -10px);
  width: 28px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
}


/* ----------------------------------------------- */
/* common parts */
/* ----------------------------------------------- */

section {
  padding-top: 48px;
  padding-bottom: 48px;
  /* margin-bottom: 48px; */
  background-color: #FFFFFF;
  position: relative;
  text-align: center;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.section-title > div {
  font-size: 24px;
}

.section-title img {
  width: 36px;
}

.wines .section-title img,
.vineyard .section-title img,
.gallery .section-title img,
.stores .section-title img,
.inquiry .section-title img {
  width: 50px;
}

.button-common-design {
  font-size: 14px;
  letter-spacing: var(--ls-01);
  font-family: var(--ff-copperplate);
  color: var(--main-color);
  padding: 10px 20px;
  background: linear-gradient(225deg, #f3f1e575, #ebe5c499);
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  padding-bottom: 13px;
  min-width: 270px;
  cursor: pointer;
  font-family: var(--ff-copperplate);
  border-bottom: 1px solid var(--main-color);
  border-right: 1px solid var(--main-color);
  border-radius: 5px 0 8px 0;
}

.button-common-design::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--main-color);
  border-radius: 8px 5px 5px 5px;
}

.button-common-design.bottles-list {
  margin-top: 32px;
}

.button-common-design a {
  position: relative;
  display: block;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-common-design img {
  height: 28px;
  width: auto;
  margin-right: 10px;
}

.bottle-description .button-common-design img {
  transform: rotate(10deg);
}

.button-common-design span {
  display: block;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* ----------------------------------------------- */
/* top */
/* ----------------------------------------------- */

.top-image {
  height: 600px;
  width: 100%;
}

.top-image img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* ----------------------------------------------- */
/* news */
/* ----------------------------------------------- */

section.news {
  background:  #ffffff;
  position: relative;
}

.news-slider {
  max-width: 1000px;
  margin: 0 auto;
}

.news-slider-window {
  overflow: hidden;
  width: 100%;
}

.news-slider-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(0);
  transition: transform 0.5s ease;
  will-change: transform;
}

.news-slider-list .news-item {
  box-sizing: border-box;
  flex: 0 0 calc(100% / 3);
  padding: 0 12px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  &:hover .news-image > img, &:hover .news-image-default > img {
    transform: scale(1.05);
  }
}

.news-slider-list .news-item * {
  color: var(--text-color);
  border-radius: 10px;
}

.news-item .news-image,
.news-item .news-image-default {
  width: 100%;
  margin-bottom: 8px;
}

.news-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.controls > button {
  width: 40px;
  padding: 0;
  border: 1px solid #ccc;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  border: none;
  outline: none;
}

.next-btn > img {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .news-slider-list .news-item {
    flex: 0 0 50%;
  }
}

@media (max-width: 450px) {
  .news-slider-list .news-item {
    flex: 0 0 100%;
  }
}

.news-image, .news-image-default {
  width: 100%;
  aspect-ratio: 16/9;
  margin-bottom: 10px;
  overflow: hidden;
}

.news-image-default  {
  border: 1px solid var(--main-color);
}

.news-image > img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.news-image-default > img,
.news-image > img {
  transition: all 0.3s ease-in-out;
}

.news-image-default > img {
  width: 80%;
  margin: 0 auto;
}

/* ----------------------------------------------- */
/* concept section */
/* ----------------------------------------------- */

section.concept {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0px;
  position: relative;
  background-color: transparent;
}

section.concept .section-title {
  margin-bottom: 0px;
}

.concept-container {
  position: absolute;
  width: 550px;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  z-index: 1;
  padding: 0 24px;
}

.concept-title {
  position: relative;
  transition: opacity 1s ease-in-out, bottom 1s ease-in-out;
  width: 75%;
  margin: 0 auto;
  margin: 20px auto;
  color: var(--main-color);
  font-size: 24px;
  display: flex;
  position: relative;
}

.concept-title::before, .concept-title::after {
  font-family: Times New Roman, Times, serif;
  display: block;
  color: white;
  position: absolute;
  top: -5px;
  width: 10px;
}

.concept-title::before {
  content: '“';
  left: 0;
}

.concept-title::after {
  content: '”';
  right: 0;
}

.concept-title img {
  width: calc(100% - 30px);
  margin: 0 auto;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.concept-text {
  position: relative;
  transition: opacity 1s ease-in-out, bottom 1s ease-in-out;
  text-align: center;
  font-size: 14px;
  letter-spacing: .2em;
  line-height: 45px;
  color: white;
  padding: 0 8px;
  font-family: var(--ff-shippori);
}

.author {
  position: relative;
  transition: opacity 1s ease-in-out, bottom 1s ease-in-out;
  margin: 20px auto;
}

.author img {
  width: 200px;
}

#bubbles { 
  position:absolute;
  z-index: 0;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.concept-container.animated .concept-title,
.concept-container.animated .concept-text,
.concept-container.animated .author {
  opacity: 1!important;
  bottom: 0!important;
}

.concept-container.animated .concept-title {
  transition-delay: .25s;
}

.concept-container.animated .concept-text-1 {
  transition-delay: .75s;
}
.concept-container.animated .concept-text-2 {
  transition-delay: 1.25s;
}
.concept-container.animated .author {
  transition-delay: 2.25s;
}


@media (max-width: 450px) {
  .concept-container {
    padding: 0 12px;
  }  
}

/* ----------------------------------------------- */
/* bottles section */
/* ----------------------------------------------- */

.wines-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 12px;
  gap: 24px;
  max-width: var(--site-width-m);
  margin: 0 auto;
  align-items: stretch;
}

.wines-container .wines-item {
  list-style: none;
  width: calc(25% - 18px);
  position: relative;
  display: flex;
  flex-direction: column;
}

.wines-container .wines-item a:not(.bottle-detail) img {
  border-radius: 10px;
}

.wines-item-new {
  width: 40px;
  position: absolute;
  left: -5px;
  top: -5px;
  transform: rotate(-10deg);
}

.wines-item-title {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

h1.wines-item-title {
  font-size: 20px;
  margin: 0;
}

.wines-item-title >  span {
  display: inline-block;
  color: var(--main-color);
  font-size: inherit;
}

.wines-item-title >  span:first-child {
  font-size: 1.2em;
  font-weight: bold;
}

.wines-item-title >  span:nth-child(2) {
  width: 15px;
  height: 1px;
  margin: 0 4px;
  background-color: var(--main-color);
}

.wines-item-vintage {
  font-size: 14px;
}

.wines-item-vintage .greater-than-768 {
  margin: 0 10px;
}

.button-common-design.bottle-detail {
  min-width: initial;
  width: calc(100% - 10px);
  margin-top: 0px;
  background: transparent;
  border: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
}

.button-common-design.bottle-detail > img {
  transform: rotate(5deg);
}

.button-common-design.bottle-detail > span {
  font-size: 12px;
}

.button-common-design.bottle-detail:after {
  display: none;
}

section.wines {
  position: relative;
  overflow: hidden;
  margin-bottom: 0px;
  background: #ffffff;
}

/* ----------------------------------------------- */
/* story section */
/* ----------------------------------------------- */

section.story {
  position: relative;
  overflow: hidden;
  background: linear-gradient(225deg, #f3f1e575, #ebe5c499);
}

.story-container,
.vineyard-container {
  max-width: var(--site-width-m);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.story-flex-container,
.vineyard-flex-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  max-width: var(--site-width-m);
  margin: 0 auto;
  position: relative;
}

.story-flex-container > .story-image,
.vineyard-flex-container > .vineyard-image {
  width: calc(45% - 40px);
  z-index: 0;
  overflow: hidden;
}

.story-flex-container > .story-image img,
.vineyard-flex-container > .vineyard-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.story-flex-container > .story-text,
.vineyard-flex-container > .vineyard-text {
  text-align: justify;
  font-size: 14px;
  letter-spacing: .15em;
  line-height: 40px;
  max-width: 700px;
  width: 60%;
  margin: 0 auto;
  padding: 0 12px;
}

.story-flex-container > .story-text span,
.vineyard-flex-container > .vineyard-text span {
  display: block;
  padding-bottom: 10px;
  line-height: 45px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--sub-color);
  text-decoration-thickness: 3px;
  text-underline-offset: 12px;
}

.moja-container {
  width: 180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: absolute;
  left: calc(22.5% - 20px);
  transform: translateX(-50%);
  bottom: 0;
}

.moja-container > .moja-item:last-child {
  /* animation: yurayura 5s ease-in-out forwards infinite;
  transform-origin: bottom; */
}
@keyframes yurayura {
  0% {
    transform: rotate(6deg);
  }
  50% {
    transform: rotate(-6deg);
  }
  100% {
    transform: rotate(6deg);
  }
}

.moja-container > .moja-item:first-child img {
  margin-top: 15px;
  width: 95%;
}

.background-logo {
  position: absolute;
  opacity: 0.1;
  bottom: -100px;
  right: -150px;
  width: 500px;
  height: auto;
  z-index: -1;
}

/* ----------------------------------------------- */
/* vineyard section */
/* ----------------------------------------------- */

section.vineyard {
  position: relative;
  overflow: hidden;
}

.vineyard-flex-container > .vineyard-image {
  z-index: 0;
}

.vineyard-flex-container > .vineyard-text {
  z-index: 3;
}

section.vineyard .tsuru {
  position: absolute;
  opacity: 0.05;
  transform: rotate(-15deg);
  transform-origin: bottom;
  bottom: -70px;
  left: 45px;
  width: 300px;
  height: auto;
  z-index: 2;
}

section.vineyard .tsuru.white {
  opacity: .4;
  bottom: -65px;
  left: 40px;
  z-index: 1;
}

@media (max-width: 1200px) {
  .top-image {
    padding-left: 12px;
  }
  .top-image img {
    border-radius: 10px 0px 0px 10px;
  }
  .moja-container {
    bottom: calc((100% - (45vw - 40px) * 11 / 16) / 2);
    transform: translate(-50%, 50%);
  }
}

@media (max-width: 1024px) {
  .concept-container {
    right: 0;
    width: 500px;
  }
  .concept-title {
    width: 375px;
  }
  .story-flex-container > .story-image img {
    border-radius: 0 10px 10px 0;
  }
  .vineyard-flex-container > .vineyard-image img {
    border-radius: 10px 0px 0px 10px;
  }
  .story-flex-container > .story-text {
    padding-right: 40px;
  }
  .vineyard-flex-container > .vineyard-text {
    padding-left: 40px;
  }
  .moja-container {
    width: 220px;
  }
}

@media (max-width: 768px){

  .concept-container {
    width: 400px;
  }
  .concept-title {
    width: 300px;
  }

  .story-flex-container,
  .vineyard-flex-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .vineyard-flex-container {
    flex-direction: column-reverse;
  }
  .story-flex-container > .story-image,
  .story-flex-container > .story-text,
  .vineyard-flex-container > .vineyard-image,
  .vineyard-flex-container > .vineyard-text {
    width: 100%;
  }
  .story-flex-container > .story-image,
  .vineyard-flex-container > .vineyard-image {
    max-width: 500px;
    margin: 0 auto;
  }

  .story-flex-container > .story-text {
    padding-right: 12px;
  }
  .vineyard-flex-container > .vineyard-text {
    padding-left: 12px;
  }

  .story-flex-container > .story-image img {
    border-radius: 10px;
  }
  .vineyard-flex-container > .vineyard-image img {
    border-radius: 10px;
  }

  .moja-container {
    position: relative;
    bottom: initial;
    left: 0;
    transform: initial;
    margin-top: 20px;
  }

  .wines-container {
    gap: 12px;
  }

  .wines-container .wines-item {
    width: calc(50% - 6px);
  }


}

@media (max-width: 650px) {

  .top-image {
    height: 750px;
  }

  .concept-container {
    width: 100%;
    top: 12%;
    transform: initial;
    right: initial;
  }
  .concept-title {
    max-width: 400px;
  }
  .author {
    margin-top: 42px;
    margin-bottom: 0;
  }
  section.vineyard .tsuru {
    bottom: -50px;
    left: 70px;
  }
  section.vineyard .tsuru.white {
    bottom: -45px;
    left: 65px;
  }
}

@media (max-width: 500px) {

  .story-flex-container > .story-image {
    padding-right: 12px;
  }
  .vineyard-flex-container > .vineyard-image {
    padding-left: 12px;
  }
  .story-flex-container > .story-image img {
    border-radius: 0px 10px 10px 0px;
  }
  .vineyard-flex-container > .vineyard-image img {
    border-radius: 10px 0px 0px 10px;
  }

  section.vineyard .tsuru {
    bottom: -70px;
    left: 70px;
    width: 320px;
  }
  section.vineyard .tsuru.white {
    bottom: -65px;
    left: 65px;
  }

}

@media (max-width: 450px){
  .section-title > div {
    font-size: 18px;
  }
  .story-text {
    width: 100%;
    line-height: 36px;
    text-underline-offset: 8px;
    padding: 0 12px;
  }
  
}

@media (max-height: 700px) {
  .top-image {
    height: 650px;
  }
  .concept-container {
    top: 8%;
  }
}


/* ----------------------------------------------- */
/* instagram section */
/* ----------------------------------------------- */



.circle {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--main-color);
  border-radius: 50%;
  margin: 20px auto;
  animation: spin .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  position: relative;
}

.circle:before {
  content: "";
  display: none;
}

.circle:after {
  content: "";
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#instagram-list{
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  justify-content: center;
  max-width: var(--site-width-m);
  margin: 0 auto;
}

#instagram-list > .instagram-item:nth-child(11),
#instagram-list > .instagram-item:nth-child(12) {
  display: none;
}

.instagram-item {
  margin: 0;
  border-radius: 10px;
}

.instagram-item img{
  width: calc((1200px - 24px - 60px)/6 );
  height: calc((1200px - 24px - 60px)/6 );
  object-fit: cover;
  margin: 5px;
  box-sizing: border-box;
  border-radius: 10px;
  vertical-align: bottom;
}

.view-more {
  display: inline-block;
  margin: 0 auto;
  height: 40px;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 0;
  background-color: transparent;
  font-size: 16px;
  letter-spacing: var(--ls-01);
  font-family: var(--ff-copperplate);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.view-more > span:first-child {
  font-size: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  color: var(--main-color);
  display: block;
}

.view-more > span:last-child {
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(../images/slider-arrow.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
}

@media (max-width: 1200px){
  #instagram-list > .instagram-item:nth-child(11),
  #instagram-list > .instagram-item:nth-child(12) {
    display: block;
  }
  .instagram-item img{
    width: calc((1024px - 24px - 40px)/4 );
    height: calc((1024px - 24px - 40px)/4 );
  }
}

@media (max-width: 1024px){
  .instagram-item img{
    width: calc((100vw - 24px - 40px)/4 );
    height: calc((100vw - 24px - 40px)/4 );
  }
}

@media (max-width: 768px){
  .instagram-item img {
    width: calc((100vw - 24px - 30px)/3 );
    height: calc((100vw - 24px - 30px)/3 );
  }
}

@media (max-width: 450px) {
  #instagram-list > .instagram-item:nth-child(9),
  #instagram-list > .instagram-item:nth-child(10),
  #instagram-list > .instagram-item:nth-child(11),
  #instagram-list > .instagram-item:nth-child(12) {
    display: none;
  }
  .instagram-item img {
    width: calc((100vw - 24px - 20px)/2 );
    height: calc((100vw - 24px - 20px)/2 );
  }
}

/* ----------------------------------------------- */
/* stores section */
/* ----------------------------------------------- */

.stores-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 24px;
}

.stores-container > .stores-item {
  width: calc((100% - 24px - 20px)/2 );
}

.stores-container > .stores-item > .stores-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.stores-container .stores-item-description {
  letter-spacing: var(--ls-01);
  font-size: 14px;
  line-height: 24px;
}

.stores-container > .stores-item > .stores-info > div:first-child {
  width: calc(100% - 50px - 30px);
}

.stores-container > .stores-item > img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
}

section.stores .button-common-design {
  width: 50px;
  min-width: 50px;
}

@media (max-width: 768px){
  .stores-container {
    flex-direction: column;
  }
  .stores-container > .stores-item {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .stores-container > .stores-item > .stores-info > div:first-child {
    width: calc(100% - 50px - 20px);
  }  
  
}

/* ----------------------------------------------- */
/* visit section */
/* ----------------------------------------------- */

section.visit {
  background: linear-gradient(225deg, #f3f1e575, #ebe5c499);
}

.visit-text {
  padding: 0 24px;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 36px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #FFFFFF;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

@media (max-width: 450px){
  .visit-text {
    padding: 0 24px;
  }
}

/* ----------------------------------------------- */
/* inquiry section */
/* ----------------------------------------------- */

section.inquiry {
  position: relative;
  bottom: -2px;
  background-color: var(--main-color);
}

form {
  padding: 0 24px;
  text-align:center;
  margin: 0 auto;
  max-width: 650px;
}

input, textarea {
  outline: none;
  border: none;
  width: 100%;
  font-size: 15px;
  margin-top: 20px;
  padding: 0;
  border-radius: 5px;
  padding: 12px;
  font-size: 14px;
  background-color: #FFFFFF;
}

input::placeholder, textarea::placeholder {
  color: var(--main-color);
  opacity: 0.5;
}

textarea {
  height: 200px;
  max-width: 100%;
  min-width: 100%;
  min-height: 100px;
}

.inquiry .button-common-design {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, 1);
  min-height: 50px;
  padding: 0;
  margin-top: 20px;
}

.inquiry .button-common-design::after {
  border-color: rgba(255, 255, 255, 1);
}

.inquiry .button-common-design button {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: #FFFFFF;
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.inquiry .button-common-design img {
  height: 18px;
}

@media (max-width: 450px){
  form {
    padding: 0 12px;
  }
}


/* ----------------------------------------------- */
/* footer */
/* ----------------------------------------------- */

.site-footer {
  background-color: var(--main-color);
  color: #fff;
}

.footer-container {
  max-width: var(--site-width-m);
  margin: 0 auto;
}

.footer-menu-container {
  padding: 20px 0;
}

.footer-menu-container ul {
  display: flex;
}

.site-footer img {
  width: 40px;
}

.site-footer .copy-right {
  display: block;
  color: #fff;
  font-size: 10px;
  text-align: right;
}

.copy-right * {
  color: #fff;
  font-size: 10px;
}


.page-top { position: fixed;
  bottom: 15px; right: 15px;display: none}

.page-top img{width: 35px;height: 35px}

.page-top a {
  text-decoration: none;
  display: block;
  border-radius: 5px;
}




@media (max-width: 450px){
  .site-footer img {
    width: 30px;
  }
}


/* =========================
   Wine Detail (Fukuyama Winery)
   ========================= */

.wine-detail {
  background:
    radial-gradient(1200px 500px at 10% 10%, rgba(250, 230, 220, .55), transparent 60%),
    radial-gradient(900px 450px at 90% 0%, rgba(240, 240, 240, .9), transparent 55%),
    linear-gradient(180deg, #fbfbfa 0%, #f6f4f1 100%);
  color: #1d1c1a;
}

.wine-detail__inner {
  max-width: var(--site-width-m);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 32px) 72px;
  padding-top: 24px;
}

/* breadcrumb */
.wine-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(29, 28, 26, .65);
  margin-bottom: 18px;
}
.wine-breadcrumb__link {
  width: initial;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 28, 26, .2);
}
.wine-breadcrumb__link:hover {
  border-bottom-color: rgba(29, 28, 26, .55);
}
.wine-breadcrumb__sep {
  opacity: .5;
}
.wine-breadcrumb__current {
  color: rgba(29, 28, 26, .85);
}

.wine-hero {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: flex-start;
  padding: clamp(18px, 3.5vw, 36px) 0;
}

@media (max-width: 768px) {
  .wine-hero {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.wine-hero__media {
  display: grid;
  place-items: center;
  padding: 10px;
}

/* bottle */
.wine-bottle {
  width: 100%;
  margin: 0;
  position: relative;
  border-radius: 10px;
}

.wine-bottle img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(-2px);
  border-radius: 10px;
}

/* hero text */
.wine-eyebrow {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 28, 26, .55);
  margin-bottom: 10px;
}

.wine-title {
  margin: 0 0 14px;
  line-height: 1.15;
}
.wine-title__jp {
  font-size: clamp(34px, 4.2vw, 54px);
  letter-spacing: .08em;
}

.wine-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}


/* spec list */
.wine-spec {
  width: 100%;
  margin: 0;
  margin-top: 24px;
  padding: 16px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--main-color);
}

.wine-spec__row {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--main-color);
}
.wine-spec__row:first-child {
  border-top: 0;
}
.wine-spec dt {
  letter-spacing: .12em;
  color: var(--main-color);
  text-transform: uppercase;
}
.wine-spec dd {
  margin: 0;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(29, 28, 26, .88);
}

.wine-section-head {
  margin-bottom: 18px;
}
.wine-section-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: .10em;
}
.wine-section-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(29, 28, 26, .62);
  letter-spacing: .06em;
}

.wine-lang {
  position: relative;
  margin-top: 24px;
}

.wine-lang__block.visible,
.wine-series__block.visible,
.wine-spec dd.visible,
.wine-spec dt.visible,
.wine-series__title.visible {
  display: block;
}
.wine-lang__block.hidden,
.wine-series__block.hidden,
.wine-spec dd.hidden,
.wine-spec dt.hidden,
.wine-series__title.hidden {
  display: none;
}

.switch-lang {
  display: flex;
  display: flex;
  width: 80px;
  color: var(--main-color);
  margin-right: 0;
  margin-left: auto;
  justify-content: center;
  margin-bottom: 12px;
}
.switch-lang__button {
  width: 50%;
  background: none;
  border: none;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--main-color);
  text-transform: uppercase;
  padding: 0 4px;
  cursor: pointer;
}

.wine-detail__inner.ja .switch-lang__button[data-lang="ja"] {
  background: var(--main-color);
  color: #fff;
}

.wine-detail__inner.en .switch-lang__button[data-lang="en"] {
  background: var(--main-color);
  color: #fff;
}


@media (max-width: 920px) {
  .wine-lang {
    grid-template-columns: 1fr;
  }
}

.wine-subtitle {
  margin-top: 0;
}


.wine-lang__title {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: .14em;
  color: rgba(29, 28, 26, .65);
  text-transform: uppercase;
}

.wine-prose {
  line-height: 2;
  letter-spacing: .1em;
  text-align: justify;
}

.wine-detail__inner.en .wine-prose,
.wine-detail__inner.en .wine-series__description {
  letter-spacing: initial;
}


section.wine-series {
  max-width: var(--site-width-m);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 36px) 0;
}
.wine-series__title {
  margin: 0;
  font-size: 20px;
  letter-spacing: .05em;
  text-align: left;
}
.wine-series__description {
  margin-top: 12px;
  font-size: 14px;
  text-align: justify;
  line-height: 2;
  letter-spacing: .1em;
}



/* ----------------------------------------------- */
/* animation */
/* ----------------------------------------------- */

.ani-obj, .ani-obj-150, .ani-obj-250 {
  opacity: 0;
  filter: blur(1px);
  transform: translateY(20px);
  transition: opacity .8s ease-in-out, filter .8s ease-in-out, transform .8s ease-in-out;
}
.ani-delay-100 {
  transition-delay: 0.1s!important;
}
.ani-delay-200 {
  transition-delay: 0.2s!important;
}
.ani-delay-300 {
  transition-delay: 0.3s!important;
}
.ani-delay-400 {
  transition-delay: 0.4s!important;
}
.ani-delay-500 {
  transition-delay: 0.5s!important;
}
.ani-delay-600 {
  transition-delay: 0.6s!important;
}
.ani-delay-700 {
  transition-delay: 0.7s!important;
}
.ani-delay-800 {
  transition-delay: 0.8s!important;
}
.ani-delay-900 {
  transition-delay: 0.9s!important;
}


.ani-obj.animated, .ani-obj-150.animated, .ani-obj-250.animated {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0px);
}