@charset "UTF-8";

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}

/* size set */
html {
  font-size: calc(0.434vw + 7.6667px);
}

@media screen and (max-width: 768px) {
  html {
    font-size: 4.2667vw;
  }
}

body {
  --s95: calc(4.7743vw + 3.3333px);
  --s40: calc(40 / 16 * 1rem);
  --s36: calc(36 / 16 * 1rem);
  --s33: calc(33 / 16 * 1rem);
  --s30: calc(30 / 16 * 1rem);
  --s22: calc(22 / 16 * 1rem);
  --s18: calc(18 / 16 * 1rem);
}
@media screen and (max-width: 768px) {
  body {
    --s95: calc(33 / 16 * 1rem);
    --s40: calc(22 / 16 * 1rem);
    --s36: calc(18 / 16 * 1rem);
    --s33: calc(20 / 16 * 1rem);
    --s30: calc(15 / 16 * 1rem);
    --s22: calc(15.5 / 16 * 1rem);
    --s18: calc(12 / 16 * 1rem);

    --s25: calc(25 / 16 * 1rem);
  }
}

._s95 { font-size: var(--s95); }
._s40 { font-size: var(--s40); }
._s33 { font-size: var(--s33); line-height: 1.2;}
._s30 { font-size: var(--s30);}
._s22 { font-size: var(--s22); line-height: 1.5;}
._s18 { font-size: var(--s18);}
._s18px { font-size: 18px;}
._s16px { font-size: 16px;}
._s12px { font-size: 12px;}

@media screen and (max-width: 768px) {
  ._s40 { line-height: 1.5; }
  ._s33 { line-height: 1.5;}
  ._s22 { line-height: 1.5714;}
  ._s18px { font-size: calc(18 / 16 * 1rem);}
  ._s16px { font-size: 1rem;}
  ._s12px { font-size: .75rem;}
}

img {
  width: 100%;
  height: auto;
}

/* color set */
body {
  --color-gold: #D9B43D;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-washi: #fafaf8;
  --color-gray: #333333;
  --color-border: #4D4D4D;
  --color-headerbg: rgba(38,38,38,1.0);
  --color-headerbg-op: rgba(38, 38, 38, 0.3);
  --color-headerbg-op: rgba(38, 38, 38, 0.3);
  --color-headerbg-sp: rgba(0, 0, 0, 0.3);
  --color-spmenu: #7F7F7F;
}

body {
  background-color: var(--color-washi);
  color: var(--color-black);
}
._txt_black {
  color: var(--color-black);
}
._bg_washi {
  background-color: var(--color-washi);
  color: var(--color-black);
}
._bg_black {
  background-color: var(--color-black);
  color: var(--color-white);
}

.header a, .footer a {
  transition: all .3s ease-in-out;
}
.header a:hover, .footer a:hover {
  color: var(--color-gold);
}



/* font set */
body {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
._w_bold { font-weight: 700; }
._w_semibold { font-weight: 600; }
._w_medium { font-weight: 500; }

.noto_san {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
  "wdth" 100;
}

/* layout */
.sec_header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec_header .ttl {
  position: relative;
  padding: 0 1rem .7rem;
}
.sec_header .ttl::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: calc(4 / 1920 * 100vw);
  background-color: var(--color-gold);
  transition: width .4s .8s ease-in-out;
}
.sec_header .ttl._start::after {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .sec_header .ttl {
    padding: 0 .75rem .375rem;
  }
  .sec_header .ttl::after {
    height: calc(2 / 16 * 1rem);
  }
}

._bg {
  background-repeat: no-repeat;
  background-size: contain;
}
.text_center {
  text-align: center;
}
.lum-lightbox {
  z-index: 300;
}

/* tool */
.bgt {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.for_sp { display: none; }
@media screen and (max-width: 768px) {
  .for_sp { display: block; }
  .for_pc { display: none; }
}

/* === header ===*/
.header {
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: min(calc(113 / 1920 * 100vw), 113px);
  background-color: var(--color-headerbg);
  transition: background-color .4s ease-in-out;
}
.header._sc { background-color: var(--color-headerbg-op); }
.header._sc:hover { background-color: var(--color-headerbg); }
.header .logo {
  display: flex;
  width: calc(328 / 1920 * 100%);
}
.header .logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 328px;
}
.header .logo a > span {
  width: calc(208 / 328 * 100%);
  height: 0;
  padding-top: calc(72 / 328 * 100%);
  background-image: url(../images/logo.webp);
}
.header_navi {
  display: flex;
}
.header_navi .nav_list {
  display: flex;
  align-items: center;
  gap: 0.3334rem;
}
.header_navi .nav_list .nav_item {
  display: flex;
  align-items: center;
  height: 100%;
}
.header_navi .nav_list .nav_item:nth-child(n+2)::before {
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  background-color: #555555;
}
.header_navi .nav_list .nav_item > a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 1.5rem;
}
.header_navi .nav_list .nav_item:nth-child(n+2) > a {
  margin-left: 0.3334rem;
}
.header_navi .nav_list .nav_item > a .icon_lang {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-image: url(../images/icon_lang.svg);
}
@media screen and (max-width: 768px) {
  .header {
    height: 53px;
    background-color: var(--color-black);
  }
  .header._sc { background-color: var(--color-headerbg-sp); }
  .header._sc:hover { background-color: var(--color-headerbg-sp); }
  .header._sp_menu_touch { background-color: var(--color-black) !important; }
  .header .logo {
    width: 100px;
    margin-left: 12px;
  }
  .header_navi .btn_box {
    display: flex;
    align-items: center;
  }
  .header .logo a > span {
    width: 100%;
    padding-top: calc(72 / 208 * 100%);
  }
  .btn_sp_menu {
    position: relative;
    width: 50px;
    height: 50px;
  }
  .btn_sp_menu > span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 40%;
  }
  .btn_sp_menu > span > span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 2px;
    background-color: var(--color-spmenu);
    opacity: 1;
    transition: opacity .25s ease-in-out;
  }
  ._sp_menu_open .btn_sp_menu > span > span {
    opacity: 0;
  }
  .btn_sp_menu > span::before,
  .btn_sp_menu > span::after {
    content: '';
    display: block;
    position: absolute;
    transform: rotate(0deg);
    width: 100%;
    height: 2px;
    background-color: var(--color-spmenu);
    transition: 
      transform .3s ease-in-out,
      top .3s ease-in-out,
      bottom .3s ease-in-out;
  }
  .btn_sp_menu > span::before {
    left: 0;
    top: 0;
  }
  .btn_sp_menu > span::after {
    right: 0;
    bottom: 0;
  }
  ._sp_menu_open .btn_sp_menu > span::before {
    top: 9px;
    transform: rotate(225deg);
  }
  ._sp_menu_open .btn_sp_menu > span::after {
    bottom: 9px;
    transform: rotate(-225deg);
  }
  .header_navi .nav_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    position: absolute;
    top: 52px;
    right: -100%;
    width: 100%;
    height: calc(100dvh - 52px);
    padding-top: 5vh;
    padding-bottom: 20vh;
    background-color: var(--color-black);
    font-size: calc(24 / 16 * 1rem);
    opacity: 0;
    transition:
      right .4s ease-in-out,
      opacity .3s .1s ease-in-out;
  }
  ._sp_menu_open .header_navi .nav_list {
    right: 0;
    opacity: 1;
  }
  .header_navi .nav_list .nav_item {
    height: calc((75vh - 3.25rem) / 6);
  }
  .header_navi .nav_list .nav_item:nth-child(n+2)::before {
    display: none;
  }
  .header_navi .nav_list .nav_item:nth-child(n+2) > a {
    margin-left: 0;
  }
  .header_navi .nav_list .nav_item > a .icon_lang {
    display: block;
    width: calc(28 / 16 * 1rem);
    height: calc(28 / 16 * 1rem);
    margin-top: calc(4 / 16 * 1rem);
    margin-right: calc(8 / 16 * 1rem);
    background-image: url(../images/icon_lang.svg);
  }
  .header_navi .nav_list .lower_links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: calc((75vh - 3.25rem) / 6);
  }
  .header_navi .nav_list .lower_links > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }
  .header_navi .nav_list .lower_links .lower_link {
    padding-top: 1rem;
  }
}


/* === footer ===*/
.footer {
  padding-right: calc(60 / 1920 * 100%);
  padding-bottom: var(--s40);
  padding-left: calc(60 / 1920 * 100%);
}
.footer .flex-col {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column-reverse;
}
.footer .flex-col .flex {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 0 calc(25 / 375 * 100%) calc(25 / 375 * 100%);
  }
  .footer .flex-col {
    flex-direction: column;
  }
  .footer .flex-col .flex {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
}

.footer .footer_navi ul {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}
.footer .footer_navi ul li {
  display: flex;
  align-items: center;
}
.footer .footer_navi ul li:nth-child(n+2)::before {
  content: '';
  display: block;
  width: 1px;
  height: 16px;
  background-color: #555555;
}
.footer .footer_navi ul li > a {
  display: flex;
  justify-content: center;
  padding: 0 0.75rem;
}
.footer .footer_navi ul li:nth-child(n+2) > a {
  margin-left: 0.3125rem;
}
@media screen and (max-width: 768px) {
  .footer .footer_navi ul {
    flex-direction: column;
    gap: unset;
    align-items: stretch;
    border-top: 1px var(--color-border) solid;
  }
  .footer .footer_navi ul li {
    align-items: stretch;
    border-bottom: 1px var(--color-border) solid;
  }
  .footer .footer_navi ul li:nth-child(n+2)::before {
    display: none;
  }
  .footer .footer_navi ul li > a {
    width: 100%;
    height: calc(56 / 16 * 1rem);
    justify-content: space-between;
    align-items: center;
  }
  .footer .footer_navi ul li > a::after {
    content: '';
    display: block;
    width: 0.75rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url(../images/arrow.svg);
  }
  .footer .footer_navi ul li:nth-child(n+2) > a {
    margin-left: 0;
  }
}

.sns_box {
  display: flex;
  gap: 0.75rem;
  transform: translate(0, -140%);
}
.sns_box .sns a {
  position: relative;
  display: block;
  width: calc(220 / 16 * 1rem);
  aspect-ratio: 220/58;
  background-color: var(--color-gray);
}
.sns_box .sns a::before,
.sns_box .sns a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.sns_box .sns a::before {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}
.sns_box .sns a:hover::before {
  opacity: 1;
} 
.sns_box .sns-i a::before {
  background-image: linear-gradient(72.44deg, #ff7a00 11.92%, #ff0169 51.56%, #d300c5 85.69%);
}
.sns_box .sns-f a::before {
  background-color: #0866FF;
}
.sns_box .sns a::after {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.sns_box .sns-i a::after { background-image: url(../images/sns-icon-i.svg);}
.sns_box .sns-f a::after { background-image: url(../images/sns-icon-f.svg);}

@media screen and (max-width: 768px) {
  .sns_box {
    gap: unset;
    justify-content: space-between;
    transform: translate(0, 0);
    width: 100%;
    padding: 1rem 0;
  }
  .sns_box .sns a {
    width: calc(150 / 16 * 1rem);
    height: calc(43 / 16 * 1rem);
  }
  .sns_box .sns a::after {
    inset: 0.5rem;
  }
}

.address_box {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: var(--s40);
  margin-bottom: 1rem;
}
.address_box .ttl {
  width: 170px;
  height: 58px;
  background-image: url(../images/logo_footer.webp);
}
@media screen and (max-width: 800px) {
  .address_box .ttl {
    width: 150px;
    height: 52px;
  }
}
@media screen and (max-width: 768px) {
  .address_box {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .address_box .ttl {
    width: 33vw;
    height: calc(33vw / 250 * 86);
    background-image: url(../images/logo_footer_sp.webp);
  }
}

.copyright {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  transform: translate(0, -100%);
}
@media screen and (max-width: 768px) {
  .copyright {
    transform: translate(0, 0);
  }
}


/* parax bg */
.bg-para {
  position: relative;
  overflow: hidden;
}
.bg-para > * {
  position: absolute;
}
.bg-image {
  top: 0;
  left: 0;
  width: 100%;
}


/*
 -- Animations --
*/
/* Fade IN  */
._f_in {
  opacity: 0;
  transition: opacity 1.2s;
}
._f_in._delay02 {
  transition: opacity 1.2s .2s;
}
._f_in._delay10 {
  transition: opacity 1.2s 1.0s;
}
._f_in._delay16 {
  transition: opacity 1.2s 1.6s;
}
._f_in._start {
  opacity: 1;
}

/* Fade IN Bottom to Top  */
._f_in_bt {
  position: relative;
  top: 15dvh;
  opacity: 0;
  transition:
    top .8s,
    opacity 1.2s;
}
._f_in_bt._delay02 {
  transition:
    top .8s .2s,
    opacity 1.2s .2s;
}
._f_in_bt._delay04 {
  transition:
    top .8s .4s,
    opacity 1.2s .4s;
}
._f_in_bt._delay06 {
  transition:
    top .8s .6s,
    opacity 1.2s .6s;
}
._f_in_bt._start {
  opacity: 1;
  top: 0;
}

._js-split-text > span {
  position: relative;
  opacity: 0;
  top: 10dvh;
  transition:
    top .8s calc(.2s + var(--i) * 0.01s),
    opacity 1.2s calc(.2s + var(--i) * 0.01s);
}
._js-split-text._start > span {
  opacity: 1;
  top: 0;
}


/* loading */
.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: 1;
  transition: opacity .4s ease-in-out;
}
.loading._start {
  opacity: 0;
}
.loading .logo {
  width: 208px;
  height: 72px;
  background-image: url(../images/logo.webp);
  opacity: 0;
  transition: opacity .2s .3s ease-in-out;
}
.loading .dots {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity .2s .3s ease-in-out;
}
.loading._ready .logo,
.loading._ready .dots {
  opacity: 1;
}
.loading .dots .dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: #d9b43d;
  border-radius: 50%;
  animation: dot-pulse 1.5s ease-in-out infinite;
}
.loading .dots .dot:nth-child(1) { animation-delay: 0s; }
.loading .dots .dot:nth-child(2) { animation-delay: 0.2s; } /* Fixed delays for simplicity */
.loading .dots .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.7; }
  50% { transform: scale(1); opacity: 1; }
}


/* lightbox */
.lightbox_overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10vh 5vw;
  box-sizing: border-box;
  background: rgba(0,0,0,.8);
  z-index: 9999;
  cursor: pointer;
}
.lightbox_inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.lightbox_image_box {
  position: relative;
}

.lightbox_image {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  cursor: auto;
}

.lightbox_nav,
.lightbox_close {
  position: absolute;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.lightbox_nav {
  top: 50%;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.35) url(../images/arrow.svg) no-repeat center center / 1rem auto;
  transform: translateY(-50%);
  z-index: 1;
}

.lightbox_nav-prev {
  left: -2.5rem;
  transform: translateY(-50%) rotate(180deg);
}

.lightbox_nav-next {
  right: -2.5rem;
}

.lightbox_nav._hidden {
  display: none;
}

.lightbox_close {
  top: -2.5rem;
  right: -2.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.35);
  z-index: 1;
}

.lightbox_close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 2px;
  background-color: #fff;
}

.lightbox_close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox_close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 768px) {
  .lightbox_close {
    top: -3rem;
    right: -.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .lightbox_nav {
    top: calc(100% + .5rem); 
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0,0,0,.35) url(../images/arrow.svg) no-repeat center center / .72rem auto;
    transform: translateY(0);
  }
  .lightbox_nav-prev {
    left: -.5rem;
    transform: translateY(0) rotate(180deg);
  }

  .lightbox_nav-next {
    right: -.5rem;
  }
}
