@charset "UTF-8";
@import "reset.css";

/* font set */
body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 3.8647vw;
}
._san {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
._txt_j {
  font-family: "Noto Serif JP", serif;
  font-size: 95%;
}
._txt_ns {
  font-family: "Noto Serif Display", serif;
  font-weight: 400;
}
html[lang="zh-Hans"] body {
  font-family: "Noto Serif SC", "Noto Serif JP", serif;
}
html[lang="zh-Hans"] ._san {
  font-family: "Noto Sans SC", "Noto Sans JP", sans-serif;
}
html[lang="zh-Hant"] body {
  font-family: "Noto Serif TC", "Noto Serif JP", serif;
}
html[lang="zh-Hant"] ._san {
  font-family: "Noto Sans TC", "Noto Sans JP", sans-serif;
}
html[lang="ko"] body {
  font-family: "Noto Serif KR", "Noto Serif JP", serif;
}
html[lang="ko"] ._san {
  font-family: "Noto Sans KR", "Noto Sans JP", sans-serif;
}
._wt_l { font-weight: 300; }
._wt_r { font-weight: 400; }

/* color set */
body {
  --color-bg: rgb(136,138,119);
  --color-bg2: rgb(30,30,25);
  --color-bg3: rgb(154,155,137);
  --color-bg-btn: rgba(63,68,48,.5);
  --color-bg-menu: rgb(73,73,64);
  --color-bg-slider: rgb(137,139,119);
  --color-black: rgb(14,14,8);
  --color-yellow: rgb(235,255,89);
  --color-white: rgb(255,255,255);
}
._f60 { font-size: calc(60 / 32 * 100%);}
._f45 { font-size: calc(45 / 32 * 100%);}
._f40 { font-size: calc(40 / 32 * 100%);}
._f34 { font-size: calc(34 / 32 * 100%);}
._f26 { font-size: calc(26 / 32 * 100%);}
._f24 { font-size: calc(24 / 32 * 100%);}

/* tool */
.bgt {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

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

/* layout */
body {
  --mt120: calc(120 / 700 * 100%);
  --mt70: calc(70 / 700 * 100%);
  --mt40: calc(40 / 700 * 100%);
  --radius-48: 5.7971vw;
  --gap-32: 3.8647vw;

  background-color: var(--color-bg2);
  color: var(--color-black);
  line-height: 1.8;
}
.sp_wrap {
  position: relative;
  background-color: var(--color-bg);
  overflow: hidden;
  z-index: 100;
}
.sp_wrap .loading {
  display: none;
}
.sp_wrap._loading {
  height: 100dvh;
}
.sp_wrap._loading .loading {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  padding-top: 30dvh;
  background-color: var(--color-bg2);
  opacity: 1;
  transition: opacity .5s .6s;
}
.sp_wrap._loading .loading._start {
  opacity: 0;
}
.pc_wrap {
  display: none;
}

@media screen and (min-width: 1600px) {
  body {
    font-size: 1.4vw;
  }
  .sp_wrap {
    width: calc(580 / 1600 * 100%);
    margin-right: calc(153 / 1600 * 100%);
    margin-left: auto;
  }
  .pc_wrap .pc_logo {
    top: 14.375vw;
    left: 6.25vw;
    width: 40vw;
  }
  .pc_wrap .nav_lang {
    left: calc(93 / 1000 * 100%);
  }
  .pc_wrap .slider_box {
    width: 9.5625vw;
  }
}
@media screen and (min-width: 769px) {
  body {
    --gap-32: 1.375vw;

    font-size: calc(0.9495vw + 7.2077px);
  }
  .sp_wrap {
    width: calc(31.25vw + 80px);
    margin-right: calc(10.3125vw - 12px);
    margin-left: auto;
  }
  .sp_wrap._loading {
    height: calc(100dvh + 1px);
  }
  .pc_wrap {
    display: block;
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    /* 背景はグラデで描く */
    background: repeating-linear-gradient(-185.12deg,
          var(--color-bg2) 0%,
          var(--color-bg2) 77.3%,
          var(--color-bg3) 77.4%,
          var(--color-bg3) 100%);
  }
  .pc_wrap .pc_logo {
    position: absolute;
    top: 23%;
    left: 6.25vw;
    width: 40vw;
    height: 48%;
    background-size: contain;
    background-position: center center;
    background-image:
      url(../images/pc_logo1.svg),
      url(../images/pc_logo2.webp);
  }
  .pc_wrap .nav_lang {
    position: absolute;
    bottom: calc(40 / 1000 * 100%);
    left: calc(7.3317vw - 24.3077px);
    font-size: 1.25vw;
    color: var(--color-white);
  }
  .pc_wrap .nav_lang ul {
    display: flex;
    gap: 3.125vw;
  }
  .pc_wrap .nav_lang ul li a {
    display: block;
  }
  .pc_wrap .nav_lang ul li a span {
    line-height: 1.9;
  }
  .pc_wrap .slider_box {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(10.3125vw - 12px);
    height: 100dvh;
  }
  .pc_wrap .slider_box .slider {
    position: absolute;
    top: 27.4%;
    left: calc(48 / 154 * 100%);
    width: 5px;
    height: 64%;
    border-radius: 3px;
    background-color: var(--color-bg-slider);
  }
  .pc_wrap .slider_box .slider .slider_handle {
    display: block;
    position: absolute;
    top: 0;
    left: -5px;
    width: 15px;
    height: calc(56.8 / 640 * 100%);
    cursor: pointer;
  }
  .pc_wrap .slider_box .slider .slider_handle .slider_v {
    position: absolute;
    top: 0;
    left: 5px;
    width: 5px;
    height: 100%;
    border-radius: 3px;
    background-color: var(--color-yellow);
  }
}






/* header*/
.header {
  position: relative;
  width: 100%;
  height: 100dvh;
  background-color: var(--color-bg2);
}
.header::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url(../images/mv.webp);
}
.header .title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(700 / 828 * 100%);
  aspect-ratio: 7/5;
}
.header .title ._txt1 {
  position: absolute;
  top: 0;
  left: calc(268 / 700 * 100%);
  width: calc(400 / 700 * 100%);
  aspect-ratio: 4/1;
  background-image: url(../images/title_txt1.svg);
  z-index: 20;
}
.header .title ._txt2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(380 / 500 * 100%);
  z-index: 10;
}
.header .title ._txt2 > span {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.header .title ._txt2 > span:nth-child(1)  { z-index: 160; top: 0; left: 0; }
.header .title ._txt2 > span:nth-child(2)  { z-index: 150; top: 0; left: calc(100 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(3)  { z-index: 140; top: 0; left: calc(180 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(4)  { z-index: 130; top: 0; left: calc(268 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(5)  { z-index: 120; top: 0; left: calc(344 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(6)  { z-index: 110; top: 0; left: calc(426 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(7)  { z-index: 100; top: 0; left: calc(508 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(8)  { z-index: 90;  top: 0; left: calc(572 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(9)  { z-index: 80; bottom: 0; left: 0; }
.header .title ._txt2 > span:nth-child(10) { z-index: 70; bottom: 0; left: calc(160 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(11) { z-index: 60; bottom: 0; left: calc(210 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(12) { z-index: 50; bottom: 0; left: calc(296 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(13) { z-index: 40; bottom: 0; left: calc(384 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(14) { z-index: 30; bottom: 0; left: calc(466 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(15) { z-index: 20; bottom: 0; left: calc(534 / 700 * 100%); }
.header .title ._txt2 > span:nth-child(16) { z-index: 10; bottom: 0; left: calc(588 / 700 * 100%); }

.header .title ._txt2 > span:nth-child(1)  { width: calc(124 / 700 * 100%); height: calc(196 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(2)  { width: calc(80 / 700 * 100%); height: calc(196 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(3)  { width: calc(88 / 700 * 100%); height: calc(232 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(4)  { width: calc(76 / 700 * 100%); height: calc(196 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(5)  { width: calc(82 / 700 * 100%); height: calc(196 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(6)  { width: calc(82 / 700 * 100%); height: calc(196 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(7)  { width: calc(64 / 700 * 100%); height: calc(196 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(8)  { width: calc(128 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(9)  { width: calc(160 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(10) { width: calc(60 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(11) { width: calc(86 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(12) { width: calc(88 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(13) { width: calc(82 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(14) { width: calc(82 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(15) { width: calc(84 / 700 * 100%); height: calc(184 / 380 * 100%); }
.header .title ._txt2 > span:nth-child(16) { width: calc(112 / 700 * 100%); height: calc(184 / 380 * 100%); }

.header .title ._txt2 > span:nth-child(1)  { background-image: url(../images/title_txt2_j1.png);}
.header .title ._txt2 > span:nth-child(2)  { background-image: url(../images/title_txt2_a1.png);}
.header .title ._txt2 > span:nth-child(3)  { background-image: url(../images/title_txt2_p1.png);}
.header .title ._txt2 > span:nth-child(4)  { background-image: url(../images/title_txt2_a2.png);}
.header .title ._txt2 > span:nth-child(5)  { background-image: url(../images/title_txt2_n.png);}
.header .title ._txt2 > span:nth-child(6)  { background-image: url(../images/title_txt2_e1.png);}
.header .title ._txt2 > span:nth-child(7)  { background-image: url(../images/title_txt2_s1.png);}
.header .title ._txt2 > span:nth-child(8)  { background-image: url(../images/title_txt2_e2.png);}
.header .title ._txt2 > span:nth-child(9)  { background-image: url(../images/title_txt2_p2.png);}
.header .title ._txt2 > span:nth-child(10) { background-image: url(../images/title_txt2_r.png);}
.header .title ._txt2 > span:nth-child(11) { background-image: url(../images/title_txt2_o.png);}
.header .title ._txt2 > span:nth-child(12) { background-image: url(../images/title_txt2_d.png);}
.header .title ._txt2 > span:nth-child(13) { background-image: url(../images/title_txt2_u.png);}
.header .title ._txt2 > span:nth-child(14) { background-image: url(../images/title_txt2_c.png);}
.header .title ._txt2 > span:nth-child(15) { background-image: url(../images/title_txt2_t.png);}
.header .title ._txt2 > span:nth-child(16) { background-image: url(../images/title_txt2_s2.png);}

.header > .text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(700 / 828 * 100%);
  aspect-ratio: 70/6;
  background-image: url(../images/header_text.svg);
}

.header_nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  color: var(--color-white);
  z-index: 300;
}
@media screen and (min-width: 1600px) {
  .header_nav {
    width: calc(580 / 1600 * 100%);
    right: calc(153 / 1600 * 100%);
  }
}
@media screen and (min-width: 769px) {
  .header_nav {
    width: calc(31.25vw + 80px);
    right: calc(10.3125vw - 12px);
  }
}
.header_nav .btn_nav_lang {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100 / 828 * 100%);
  aspect-ratio: 1/1;
  cursor: pointer;
  z-index: 320;
}
/*
@media screen and (min-width: 1600px) {
  .header_nav .btn_nav_lang {
    width: calc(70 / 1600 * 100%);
    right: calc(153 / 1600 * 100%);
  }
}
@media screen and (min-width: 769px) {
  .header_nav .btn_nav_lang {
    width: calc(2.9688vw + 22.5px);
    right: calc(10.3125vw - 12px);
  }
}
*/
.header_nav .btn_nav_lang::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/icon_lang.svg);
  transition: right .2s;
}
.header_nav._open .btn_nav_lang::before {
  right: calc(100vw - 100%);
}
@media screen and (min-width: 1600px) {
  .header_nav._open .btn_nav_lang::before {
    right: calc(36.25vw - 100%);
  }
}
@media screen and (min-width: 769px) {
  .header_nav._open .btn_nav_lang::before {
    right: calc((31.25vw + 80px) - 100%);
  }
}
.header_nav .btn_nav_lang span {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}
.header_nav .btn_nav_lang span::before,
.header_nav .btn_nav_lang span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: calc(72 / 100 * 100%);
  height: 2px;
  background-color: var(--color-white);
  opacity: 0;
  transition: all .5s;
}
.header_nav._open .btn_nav_lang span::before {
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 1;
}
.header_nav._open .btn_nav_lang span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 1;
}

.header_nav .nav_inner {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100dvh;
  background-color: var(--color-bg-menu);
  transition: left .2s;
}
.header_nav._open .nav_inner {
  left: 0%;
}
@media screen and (min-width: 1600px) {
  .header_nav .nav_inner {
    width: 36.25vw;
  }
}
@media screen and (min-width: 769px) {
  .header_nav .nav_inner_wrap {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100dvh;
    overflow: hidden;
    transition: all .2s;
  }
  .header_nav._open .nav_inner_wrap {
    left: 0%;
    width: 100%;
  }
  .header_nav .nav_inner {
    width: calc(31.25vw + 80px);
  }
}
.header_nav .nav_title {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 828/100;
  letter-spacing: 0.2em;
}
.header_nav .nav_lang ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(72 / 828 * 100%);
}
.header_nav .nav_lang ul > li {
  margin-bottom: calc(60 / 828 * 100%);
}
.nav_lang ul > li > a {
  display: block;
  position: relative;
  transition: color .2s;
}
.nav_lang ul > li > a:hover,
.nav_lang ._act > a {
  color: var(--color-yellow);
}
.nav_lang ._act > a {
  pointer-events: none;
}
.nav_lang ul > li > a::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0;
  height: 1px;
  background-color: var(--color-yellow);
  transition: width .2s;
}
.nav_lang ul > li > a:hover::before,
.nav_lang ._act > a::before {
  width: 100%;
}

/* footer*/
.footer {
  margin-top: calc(120 / 828 * 100%);
  padding-top: calc(120 / 828 * 100%);
  background-color: var(--color-white);
}
.footer .l-container {
  padding: 0 1.6rem;
}
.footer .siteFooter__upper {
  display: flex;
  flex-direction: column-reverse;
}
.footer .siteFooter__brandHeader {
  margin-bottom: 1.5rem;
  font-family: "Jost",sans-serif;
  font-size: calc(14 / 16 * 100%);
  font-weight: 500;
  text-align: center;
}
.footer .siteFooter__brandList {
  display: flex;
  gap: 1.5rem;
}
.footer .siteFooter__logowrap {
  margin: 2.5rem 0 0;
  width: 100%;
  text-align: center;
  padding: 1.5rem 0 0;
  border-top: 0.1rem solid #E3E3E3;
}
.footer .siteFooter__logolink {
  display: block;
  margin: 0 auto;
  max-width: 235px;
}
.footer .siteFooter__companyInfo {
  margin-top: 1rem;
  font-size: calc(12 / 16 * 100%);
}
.footer .siteFooter__copyright {
  margin-top: 2.5rem;
  padding: 0.8rem 0;
  background-color: #000;
  color: #fff;
  font-size: calc(12 / 16 * 100%);
  line-height: 1.5;
  text-align: center;
}

/* main */
.main {
  margin-top: calc(120 / 828 * 100%);
  padding: 0 calc(64 / 828 * 100%);
}
.main .lead {
  text-align: center;
  line-height: 2;
}
.main .note {
  margin-top: var(--mt120);
}
.main .note ul li {
  text-indent: -1.25em;
  padding-left: 1.25em;
}

/* nav_box */
.main .nav_box {
  margin-top: var(--mt120);
}
.main .nav_box > ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-32);
}
.main .nav_box .btn_page_nav {
  font-weight: 400;
  color: var(--color-yellow);
}
.main .nav_box .btn_page_nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  aspect-ratio: 700/95;
  border-radius: var(--radius-48);
  border: 2px var(--color-yellow) solid;
  letter-spacing: .2em;
  transition: letter-spacing .2s ease-out;
}
.main .nav_box .btn_page_nav a:hover {
  letter-spacing: .3em;
}
.main .nav_box .btn_page_nav a::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: calc(100 / 700 * 100%);
  width: calc(50 / 700 * 100%);
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/icon_arrow1.svg);
}
.main .nav_box .btn_page_nav._arrow_up a::before {
  background-image: url(../images/icon_arrow4.svg);
}

/* section */
.sec_header {
  margin-top: var(--mt120);
  text-align: center;
}
.sec_header .title {
  color: var(--color-yellow);
}

/* shop_info_box */
.shop_info_box {
  margin-top: var(--mt120);
}
.shop_images {
  position: relative;
  width: 100%;
  aspect-ratio: 70/49;
}
.shop_images .swiper-pagination {
  top: 100%;
  bottom: auto;
  text-align: right;
  line-height: 1;
}
.shop_images .swiper-pagination-bullet {
  width: 5px;
  height: auto;
  aspect-ratio: 1/1;
  background-color: rgba(14,14,8,.4);
}
.shop_images .swiper-pagination-bullet-active {
  background-color: rgba(14, 14, 8, 1);
}
.shop_images .swiper-button-next,
.shop_images .swiper-button-prev {
  width: calc(60 / 700 * 100%);
  height: calc(80 / 490 * 100%);
  border-radius: 50%;
  border: 1px var(--color-yellow) solid;
  background-color: var(--color-bg-btn);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/icon_arrow2.svg);
}
.shop_images .swiper-button-next {
  right: 0;
  transform: translate(50%, 0);
  transition: transform .2s ease-out;
}
.shop_images .swiper-button-next:hover {
  transform: translate(75%, 0);
}
.shop_images .swiper-button-prev {
  left: 0;
  transform: translate(-50%, 0) scale(-1, 1);
  transition: transform .2s ease-out;
}
.shop_images .swiper-button-prev:hover {
  transform: translate(-75%, 0) scale(-1, 1);
}
.shop_images .swiper-button-next svg,
.shop_images .swiper-button-prev svg {
  display: none;
}

.shop_name_box {
  margin-top: var(--mt40);
  text-align: center;
}
.shop_name_box::before {
  content: '';
  display: block;
  padding-top: 1.5em;
  color: var(--color-yellow);
  font-size: calc(29 / 32 * 100%);
}
.shop_name_box .shop_name {
  letter-spacing: .15em;
}
.shop_name_box .shop_place {
  display: inline-block;
  /* width: calc(240 / 700 * 100%); */
  margin-top: var(--mt40);
  font-size: calc(37 / 32 * 100%);
  letter-spacing: .1em;
  line-height: 1.2;
}
.shop_info_box .text {
  margin-top: var(--mt70);
}
.shop_info_box .btn {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  aspect-ratio: 700/95;
  margin-top: var(--mt70);
  border-radius: var(--radius-48);
  border: 1px var(--color-yellow) solid;
  padding-right: calc(94 / 700 * 100%);
  background-color: var(--color-bg-btn);
  letter-spacing: .2em;
  color: var(--color-yellow);
  font-size: calc(34 / 32 * 100%);
}
.shop_info_box .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: calc(120 / 700 * 100%);
  width: calc(100 / 700 * 100%);
  aspect-ratio: 2/1;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/icon_arrow3.svg);
  transition: right .2s ease-out;
}
.shop_info_box .btn:hover::before {
  right: calc(80/700 * 100%);
}
html[lang="en"] .shop_info_box .btn {
  font-size: calc(24 / 32 * 100%);
  line-height: 1.45;
}
html[lang="en"] .shop_info_box .btn::before {
  right: calc(110 / 700 * 100%);
}
html[lang="en"] .shop_info_box .btn:hover::before {
  right: calc(70 / 700 * 100%);
}

html[lang="ko"] .shop_info_box .btn {
  font-size: calc(29 / 32 * 100%);
}
html[lang="ko"] .shop_info_box .btn::before {
  right: calc(90 / 700 * 100%);
}
html[lang="ko"] .shop_info_box .btn:hover::before {
  right: calc(50 / 700 * 100%);
}

/* parts */
/* btn_page_top */
.btn_page_top {
  display: block;
  position: fixed;
  bottom: 12px;
  right: 6px;
  opacity: 0;
  transition: opacity .5s ease-out;
  z-index: 100;
}
.btn_page_top._show {
  opacity: 1;
}
.btn_page_top .btn {
  display: block;
  width: 46px;
  aspect-ratio: 1/1;
  border: 1px var(--color-yellow) solid;
  border-radius: 50%;
  background-color: var(--color-bg-btn);
  background-image: url(../images/icon_arrow5.svg);
}
@media screen and (min-width: 1600px) {
  .btn_page_top {
    right: calc(6px + (153 / 1600 * 100%));
  }
}
@media screen and (min-width: 769px) {
  .btn_page_top {
    right: calc(6px + (10.3125vw - 12px));
  }
}




/*********************************
 Cookie banner
**********************************/
.cookie__banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99;
  background: #fff;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #b3d99c;
  transition: all 0.8s ease;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
  .cookie__banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin: auto;
  }
}

.cookie__banner.is-active {
  transition: all 0.8s ease;
  opacity: 1;
  visibility: visible;
  z-index: 100;
}

.cookie__inner {
  padding: 22px 19px;
}
@media only screen and (max-width: 768px) {
  .cookie__inner {
    padding: 20px 15px 25px;
  }
}

.cookie__text {
  line-height: 1.75;
  letter-spacing: 0;
}
@media only screen and (max-width: 768px) {
  .cookie__text {
    font-size: 12px;
    line-height: 1.45;
  }
}

.cookie__link {
  color: #000;
  text-decoration: underline;
}
@media only screen and (min-width: 769px) {
  .cookie__link:hover {
    text-decoration: none;
  }
}

.cookie__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
@media only screen and (max-width: 768px) {
  .cookie__btns {
    gap: 20px;
  }
}

.cookie__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 184px;
  width: 100%;
  height: 46px;
  text-decoration: underline;
  border-radius: 23px;
  border: 1px solid transparent;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.5s ease;
}
@media only screen and (min-width: 769px) {
  .cookie__btn:hover {
    border: 1px solid #b3d99c;
    background: linear-gradient(90deg, #fd0 0%, #b3d99c 100%);
    text-decoration: none;
    transition: all 0.5s ease;
  }
}

@media only screen and (max-width: 768px) {
  .cookie__btn.cookie__btn-agree {
    border: 1px solid #b3d99c;
    text-decoration: none;
  }
}




/*
 -- Animations --
*/
._f_in_bt {
  position: relative;
  top: 15dvh;
  opacity: 0;
  transition:
    top .8s,
    opacity 1.2s;
}
._f_in_bt._start {
  opacity: 1;
  top: 0;
}
._s_in_tb {
  position: relative;
}
._s_in_tb::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  transition: height 1.5s;
}
._s_in_tb._start::after {
  height: 0;
}

.header::before {
  opacity: 0;
  transition: opacity 2s 2.6s ease-out;
}
._st .header::before {
  opacity: 1;
}
.header .title ._txt1 {
  filter: blur(10px);
  opacity: 0;
  transition:
    filter .5s .2s,
    opacity .5s;
}
._st .header .title ._txt1 {
  filter: blur(0px);
  opacity: 1;
}
.header .title ._txt2 > span {
  filter: blur(20px);
  opacity: 0;
}
._st .header .title ._txt2>span {
  filter: blur(0px);
  opacity: 1;
}
.header .title ._txt2 > span:nth-child(1)  { transition: filter .5s .9s, opacity .5s .9s; }
.header .title ._txt2 > span:nth-child(2)  { transition: filter .5s 1s, opacity .5s 1s; }
.header .title ._txt2 > span:nth-child(3)  { transition: filter .5s 1.1s, opacity .5s 1.1s; }
.header .title ._txt2 > span:nth-child(4)  { transition: filter .5s 1.2s, opacity .5s 1.2s; }
.header .title ._txt2 > span:nth-child(5)  { transition: filter .5s 1.3s, opacity .5s 1.3s; }
.header .title ._txt2 > span:nth-child(6)  { transition: filter .5s 1.4s, opacity .5s 1.4s; }
.header .title ._txt2 > span:nth-child(7)  { transition: filter .5s 1.5s, opacity .5s 1.5s; }
.header .title ._txt2 > span:nth-child(8)  { transition: filter .5s 1.6s, opacity .5s 1.6s; }
.header .title ._txt2 > span:nth-child(9)  { transition: filter .5s 1.7s, opacity .5s 1.7s; }
.header .title ._txt2 > span:nth-child(10) { transition: filter .5s 1.8s, opacity .5s 1.8s; }
.header .title ._txt2 > span:nth-child(11) { transition: filter .5s 1.9s, opacity .5s 1.9s; }
.header .title ._txt2 > span:nth-child(12) { transition: filter .5s 2.0s, opacity .5s 2.0s; }
.header .title ._txt2 > span:nth-child(13) { transition: filter .5s 2.1s, opacity .5s 2.1s; }
.header .title ._txt2 > span:nth-child(14) { transition: filter .5s 2.2s, opacity .5s 2.2s; }
.header .title ._txt2 > span:nth-child(15) { transition: filter .5s 2.3s, opacity .5s 2.3s; }
.header .title ._txt2 > span:nth-child(16) { transition: filter .5s 2.4s, opacity .5s 2.4s; }

.header > .text {
  filter: blur(10px);
  opacity: 0;
  transition:
    filter .5s 3.6s,
    opacity .5s 3.6s;
}
._st .header > .text {
  filter: blur(0px);
  opacity: 1;
}

.pc_wrap .pc_logo {
  filter: blur(10px);
  opacity: 0;
  transition:
    opacity .8s 4.4s,
    filter .8s 4.4s;
}
.pc_wrap._st .pc_logo {
  filter: blur(0px);
  opacity: 1;
}

.loader,
.loader:before,
.loader:after {
  background: var(--color-yellow);
  animation: load1 1s infinite ease-in-out;
  width: .5em;
  height: 4em;
}
.loader {
  color: var(--color-yellow);
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  transform: translateZ(0);
  animation-delay: -0.16s;
  opacity: 1;
  transition: opacity .2s;
}
.loading._start .loader {
  opacity: 0;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.2em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.2em;
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}