@font-face {
  font-display: block;
  font-family: 'FA-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../../assets/fonts/webfonts/fa-regular-400.woff2) format("woff2"),
  url(/assets/fonts/webfonts/fa-regular-400.ttf) format("truetype");
}

@font-face {
  font-display: block;
  font-family: 'FA-Solid9';
  font-style: normal;
  font-weight: 900;
  src: url(../../assets/fonts/webfonts/fa-solid-900.woff2) format("woff2"),
  url(/assets/fonts/webfonts/fa-solid-900.ttf) format("truetype");
}

:root {
  --main-color: #2F6CF9;
  --main-color2: #EE5B26;
  --main-color3: #00c755;
  --main-color4: rgb(0,161,233);
  --text-color: #17055a;
  --text-color-gray: #989898;
  --background: #FFFFFF;
  --theme-dark: #2B1B02;
  --theme-darker: rgb(202, 168, 124);
  --theme-lighter: rgb(196, 171, 112);
  --font-poppins: 'Poppins', sans-serif;
  --font-gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-mincho: 'Noto Serif JP', serif;
  --font-english: sans-serif;
  --shadow: 3px 3px 8px -2px rgb(0 0 0 / 15%), 0px 2px 2px 0px rgb(0 0 0 / 10%), 0px 1px 5px 0px rgb(0 0 0 / 8%);
  --shadow-light: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
  --gradient: linear-gradient(135deg, #009948 0%, var(--main-color3) 100%);
  --theme-gold2: linear-gradient(225deg, var(--theme-darker) 0%, var(--theme-lighter) 45%, #e1ca98 70%, var(--theme-lighter) 85%, var(--theme-darker) 90% 100%);
  --mc-gradient: linear-gradient(135deg, var(--main-color) 0%, #ff6975 100%);
  --theme-gold: linear-gradient(135deg, var(--theme-darker) 0%, var(--theme-lighter) 45%, #e1ca98 70%, var(--theme-lighter) 85%, var(--theme-darker) 90% 100%);

  --exclusive-height: 112px;
}

* {
  font-family: var(--font-gothic);
  box-sizing: border-box;
  color: #2B1B02;
  font-size: 15px;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
button,
/* select, */
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

strong {
  color: inherit;
  font-size: inherit;
}


img {
  object-fit: cover;
}

div, span, p, h1, h2, h3, h4 {
  color: var(--text-color);
  letter-spacing: .05em;
}

html, body, .container {
  background-color: var(--background);
  /* overflow-x: hidden; */
  width: 100%;
  position: relative;
}

html, body {
  position: initial;
}

body {
  -webkit-text-size-adjust:100%;
  background-color: var(--background);
}

.content-area {
  padding-bottom: 0;
}

.container {
  padding: 0;
  padding-top: 0px;
}

section {
  width: 100%;
  overflow-x: hidden;
  padding-top: 90px;
}

.p-container {
  padding: 0 20px;
}

figure.wp-block-image {
  margin-bottom: 0;
}

.main-color {color: var(--main-color);}
.main-color2 {color: var(--main-color2);}
.main-color3 {color: var(--main-color3);}

.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-3 {padding: 3px;}.pd-5 {padding: 5px;}.pd-10 {padding: 10px;}.pd-15 {padding: 15px;}.pd-20 {padding: 20px;}.pd-25 {padding: 25px;}.pd-30 {padding: 30px;}
.md-3 {margin: 3px;}.md-5 {margin: 5px;}.md-10 {margin: 10px;}.md-15 {margin: 15px;}.md-20 {margin: 20px;}.md-25 {margin: 25px;}.md-30 {margin: 30px;}

.plr-10 {padding-left: 10px;padding-right: 10px;}
.mtb-3 {margin-top: 3px;margin-bottom: 3px;}.mtb-5 {margin-top: 5px;margin-bottom: 5px;}.mtb-10 {margin-top: 10px;margin-bottom: 10px;}.mtb-15 {margin-top: 15px;margin-bottom: 15px;}.mtb-20 {margin-top: 20px;margin-bottom: 20px;}.mtb-25 {margin-top: 25px;margin-bottom: 25px;}.mtb-30 {margin-top: 30px;margin-bottom: 30px;}
.ptb-3 {padding-top: 3px;padding-bottom: 3px;}.ptb-5 {padding-top: 5px;padding-bottom: 5px;}.ptb-10 {padding-top: 10px;padding-bottom: 10px;}.ptb-15 {padding-top: 15px;padding-bottom: 15px;}.ptb-20 {padding-top: 20px;padding-bottom: 20px;}.ptb-25 {padding-top: 25px;padding-bottom: 25px;}.ptb-30 {padding-top: 30px;padding-bottom: 30px;}
.mlr-3 {margin-left: 3px;margin-right: 3px;}.mlr-5 {margin-left: 5px;margin-right: 5px;}.mlr-10 {margin-left: 10px;margin-right: 10px;}.mlr-15 {margin-left: 15px;margin-right: 15px;}.mlr-20 {margin-left: 20px;margin-right: 20px;}.mlr-25 {margin-left: 25px;margin-right: 25px;}.mlr-30 {margin-left: 30px;margin-right: 30px;}
.plr-3 {padding-left: 3px;padding-right: 3px;}.plr-5 {padding-left: 5px;padding-right: 5px;}.plr-10 {padding-left: 10px;padding-right: 10px;}.plr-15 {padding-left: 15px;padding-right: 15px;}.plr-20 {padding-left: 20px;padding-right: 20px;}.plr-25 {padding-left: 25px;padding-right: 25px;}.plr-30 {padding-left: 30px;padding-right: 30px;}
.pl-3 {padding-left: 3px;}.pl-5 {padding-left: 5px;}.pl-10 {padding-left: 10px;}.pl-15 {padding-left: 15px;}.pl-20 {padding-left: 20px;}
.pr-3 {padding-right: 3px;}.pr-5 {padding-right: 5px;}.pr-10 {padding-right: 10px;}.pr-15 {padding-right: 15px;}.pr-20 {padding-right: 20px;}
.ml-3 {margin-left: 3px;}.ml-5 {margin-left: 5px;}.ml-10 {margin-left: 10px;}.ml-15 {margin-left: 15px;}.ml-20 {margin-left: 20px;}
.mr-3 {margin-right: 3px;}.mr-5 {margin-right: 5px;}.mr-10 {margin-right: 10px;}.mr-15 {margin-right: 15px;}.mr-20 {margin-right: 20px;}
.pt-0 {padding-top: 0!important;}.pt-10 {padding-top: 10px;}.pt-15 {padding-top: 15px;}.pt-20 {padding-top: 20px;}.pt-25 {padding-top: 25px;}.pt-30 {padding-top: 30px;}
.pb-0 {padding-bottom: 0!important;}.pb-10 {padding-bottom: 10px;}.pb-15 {padding-bottom: 15px;}.pb-20 {padding-bottom: 20px;}.pb-25 {padding-bottom: 25px;}.pb-30 {padding-bottom: 30px;}
.mt-0 {margin-top: 0!important;}.mt-10 {margin-top: 10px;}.mt-15 {margin-top: 15px;}.mt-20 {margin-top: 20px;}.mt-25 {margin-top: 25px;}.mt-30 {margin-top: 30px;}
.mb-0 {margin-bottom: 0!important;}.mb-10 {margin-bottom: 10px;}.mb-15 {margin-bottom: 15px;}.mb-20 {margin-bottom: 20px;}.mb-25 {margin-bottom: 25px;}.mb-30 {margin-bottom: 30px;}
.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-22 {font-size: 22px;}.fs-24 {font-size: 24px;}.fs-26 {font-size: 26px;}.fs-28 {font-size: 28px;}.fs-30 {font-size: 30px;}
.fw-b {font-weight: bold;}.fw-n {font-weight: normal;}.ta-c {text-align: center;}.ta-l {text-align: left;}.ta-r {text-align: right;}
.flex {display: flex;flex-wrap: nowrap;}
.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;}

/* ----------------------------- loading wall ----------------------------- */

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


.site-header {
  height: 80px;
  position: fixed;
  background: linear-gradient(30deg, #FFFFFF 0%, var(--main-color) 60%);
  background: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  box-shadow: var(--shadow-light);
  padding: 5px 10px;
  display: flex;
  display: none;
  align-items: center;
}

@media(min-width: 600px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

@media(min-width: 783px) {
  body.admin-bar .site-header {
    top: 32px;
  }
}

.site-header.visible {
  background-color: rgba(249,245,241,1);
}

.site-header .site-branding {
  height: 70px;
  padding-left: 0;
  position: static;
  transform: initial;
  width: initial;
  margin-left: 10px;
}

.site-branding > a {
  display: block;
  width: 100%;
  height: 100%;
}

.site-branding > a img {
  height: 70px;
  object-fit: contain;
}

.site-header.visible .site-branding {
  opacity: 1;
  transition: .5s ease-in-out;
}

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

#primary {
  padding-top: calc(100vh - var(--exclusive-height));
}

#top-view {
  /* display: none; */
  height: calc(100vh - var(--exclusive-height));
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  z-index: 1000;
}

#top-view .hamburger-menu {
  opacity: 0;
  position: absolute;
  right : 30px;
  top: 20px;
  width: 30px;
  height: 30px;
  z-index: 1000;
  transition: opacity .6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}
#top-view .hamburger-menu > span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-color);
  margin: 6px 0;
  border-radius: 2px;
  transition-duration: .3s;
}

.first-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  opacity: 1;
}

.hero-logo {
  position: relative;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  margin: 0 auto;
}

.shooting-arrow {
  position: absolute;
  z-index: 900;
  width: 100%;
  height: calc(100vh - var(--exclusive-height));
}

.shooting-arrow-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
}

.shooting-arrow-inner svg {
  width: 2300px;
  transition: transform 1s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  transform: translateX(-1500px);
}

.logo-text {
  position: absolute;
  display: inline-block;
  width: 90.5%;
  opacity: 0;
  top: 47%;
  right: 0;
}

.tagline {
  position: absolute;
  text-align: center;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.tagline > div {
  overflow: hidden;
  position: relative;
}

.tagline > div > span {
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  color: #FFFFFF;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75) 0s;
}

.tagline > div:last-child > span {
  transition: transform 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75) .1s;
}

.tap-to-start {
  position: absolute;
  bottom: 0;
  right: 25px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.scroll-line {
  width: 2px;
  height: 80px;
  background: rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tap-to-start:before {
  content: "GET SET, GO!";
  top: -135px;
  writing-mode: vertical-rl;
  font-family: var(--font-poppins);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  color: var(--text-color);
}

.scroll-line-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: var(--text-color);
  border-radius: 2px;
  animation: scrollLineMove 2s ease-in-out infinite;
}

@keyframes scrollLineMove {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(400%);
    opacity: 0;
  }
}

@media(max-width: 389px) {
  .scroll-line {
    height: 80px;
  }
  .scroll-line-inner {
    height: 20px;
  }
  
}



canvas {
  margin: 0 auto;
  width: 100px;
  height: auto;
  aspect-ratio: 212.16 / 280.58;
  display: block;
  /* filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); */
}

.fade-area {
  filter: blur(10px);
  transition: filter 1.5s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  padding-left: 0;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
.fade-list {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

.fade-list > img{
  vertical-align: bottom;
  height: calc(100vh - var(--exclusive-height));
  width: 110vw;
  max-width: none;
  object-fit: cover;
  transform: scale(1.05);
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin : 500px 0%;
  object-position: center center;
}

.fade-area > .fade-list:first-child > img {
  object-position: -150px center;
}

@keyframes loop {
    0% { transform-origin : 0 0%;}
  100% { transform-origin : 1000px 0%;}
}

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

.section-title {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 15px;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.section-title.animated {
  opacity: 1;
}

.section-title-e {
  position: relative;
  margin-bottom: 10px;
}

.section-title-e > div {
  text-align: left;
  position: relative;
}

.section-title-e > div img {
  width: auto;
  height: 30px;
  object-fit: contain;
}

.section-title-e > div:first-child {
  z-index: 2;
}

.section-title-e > div:first-child img {
  height: 29px;
}

.section-title-e > div:last-child {
  position: absolute;
  transition: all .6s cubic-bezier(0.87, 0.11, 0.26, 0.75), left 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  top: -4px;
  left: -4px;

}

.section-title.animated .section-title-e > div:last-child {
  top: 2px;
  left: 2px;
}

.section-line {
  width: 0%;
  height: 1px;
  background: var(--main-color2);
  position: relative;
  transition: width 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.section-title.animated .section-line {
  width: 100%;
}

.section-line span {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  padding-right: 6px;
  width: 0px;
  transition: width 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75) .4s;
  height: 4px;
  background: #FFFFFF;
  z-index: 1;
}

.section-title.animated .section-line span {
  width: 100px;
}

.section-line span:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: var(--main-color2);
}


.section-title-j {
  margin-top: 6px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--text-color);
  text-align: right;
  transform: translateX(20px);
  transition: transform 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.section-title.animated .section-title-j {
  transform: translateX(0px);
}

section#dummy {
  display: none;
  width: 100%;
  background: #FFFFEE;
  height: 100vh;
}

section#under-construction {
  width: 100%;
  height: 800vh;
  padding: 15px;
  padding-bottom: 0;
}
section#under-construction * {
  font-size: 24px;
  font-weight: bold;
  background: rgb(248, 248, 255);
  width: 100%;
  height: 100%;
  padding-top: 100px;
  text-align: center;
  color: var(--text-color);
  font-style: italic;
}


/* ----------------------------- concept ----------------------------- */
#concept .section-content {
  text-align: center;
}

#concept .section-content > div {
  position: relative;
  display: flex;
}

#concept .section-content > div > div:first-child {
  width: 40%;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

#concept .section-content > div > div:nth-child(2) {
  flex: 1;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}

.vertical-text-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  color: var(--text-color);
  display: block;
  line-height: 1.8;
  text-align: left;
}

#concept .section-content > div > div:nth-child(2) > div {
  display: flex;
  flex-direction: column;
}

#concept .section-content > div > div:nth-child(2) > div img {
border-radius: 10px 0 0 10px;
}

#concept .section-content > div > div:nth-child(2) > div .text-wrapper {
  position: relative;
  margin-top: 20px;
  width: 120%;
  position: relative;
  left: -20%;
}

#concept .section-content > div > div:nth-child(2) > div .text-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--main-color2);
}

#concept .section-content > div > div:nth-child(2) > div p {
  padding: 3px 12px;
  margin: 0;
  text-align: justify;
}

#concept .concept-bg-logo {
  position: absolute;
  top: 50px;
  left: -40px;
  width: 200px;
  object-fit: contain;
  opacity: 0.2;
}

a.view-more {
  position: relative;
  display: inline-block;
  height: 40px;
  padding: 10px 50px;
  margin: 36px auto;
  border-radius: 20px;
  border: 1px solid var(--main-color);
  background: var(--background);
  box-shadow: var(--shadow);
  cursor: pointer;
}

a.view-more span {
  color: var(--text-color);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  font-family: var(--font-poppins);
  font-style: italic;
}

a.view-more span:first-child {
  display: inline-block;
  height: 20px;
  vertical-align: super;
}

a.view-more span:last-child {
  position: absolute;
  overflow: hidden;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 50px;
  height: 1px;
}

a.view-more span:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text-color);
  animation: lineEffect 1.2s cubic-bezier(0.87, 0.11, 0.26, 0.75) infinite;
}

@keyframes lineEffect {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* ----------------------------- footer ----------------------------- */

.site-footer .site-info,
.site-footer .site-info a {
  color: var(--text-color);
  opacity: 1;
}

.site-footer {
  background-color: #FFFFFF;
  padding: 5px;
  z-index: 100;
  position: relative;
  border-top: 1px solid var(--main-color);
  padding-top: 20px;
  padding-bottom: 120px;
}

.site-footer > .d-flex {
  width: 100%;
  display: block;
}

.site-footer .logo {
  text-align: center;
  justify-content: center;
  margin: 20px 0;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.site-footer .logo img {
  width: 45%;
  max-width: 250px;
  display: inline;
  object-fit: contain;
  margin: 0 10px;
}

.site-footer .logo-group {
  text-align: center;
  margin: 20px 0;
}

.site-footer .text-group {
  text-align: center;
  padding: 0 20px;
  font-size: 12px;
}

.site-footer .logo-group img {
  width: 250px;
}

.site-footer .logo .worldest-menu {
  display: none;
  max-width: 450px;
}

.site-footer .site-info {
  padding: 0;
}

.conversion-area-bottom {
  position: fixed;
  bottom: 20px;
  right: -100%;
  width: 350px;
  background: rgba(255, 255, 255, .9);
  z-index: 2000;
  border-top: 1px solid #FFFFFF;
  padding: 10px;
  padding-right: 0;
  border-radius: 30px 0 0 30px;
  border-right: none;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
  box-shadow: var(--shadow);
}

.conversion-area-bottom .appeal-text {
  position: absolute;
  top: -41px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conversion-area-bottom .appeal-text > div {
  font-size: 14px;
  font-weight: bold;
  color: var(--main-color);
}

.conversion-area-bottom .appeal-text > img{
  width: 60%;
}

.conversion-area-bottom .contact-btn {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 5px;
  height: 40px;
  width: 100%;
  border-radius: 20px 0 0 20px;
  background: var(--main-color);
  margin: 0 auto;
  margin-right: 0;
  position: relative;
  overflow: hidden;
}

.conversion-area-bottom .contact-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}

.conversion-area-bottom .contact-btn > div {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .1em;
}

@media(max-width: 500px) {
  .conversion-area-bottom {
    width: 300px;
  }

  .conversion-area-bottom .appeal-text {
    top: -37px;
  }
  
  
}

/* ----------------------------- side menu ----------------------------- */

/* ----------------------------- components ----------------------------- */

.bottom-menu-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  right: -75px;
  transition: right .6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 65px;
}


#scrollTopButton {
  padding: 10px 20px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.7);
  width: 65px;
  height: 65px;
  color: white;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: var(--shadow);
  display: none;
  background:conic-gradient(var(--main-color) 0%, var(--main-color) 39.2%, rgb(255,255,255) 38.2%, rgb(255,255,255) 100%);
}

#scrollTopButton .scroll-top-button-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  display: flex;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  z-index: 1;
}

#scrollTopButton .scroll-top-button-inner > div {
  width: 100%;
  text-align: center;
}

.km-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  font-family: var(--font-poppins);
  font-style: italic;
  position: absolute;
  bottom: 10px;
}

.km-display-container > div {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  font-family: var(--font-poppins);
  font-style: italic;
  line-height: 1.2;
  color: var(--main-color);
}

#scrollTopButton:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow);

}

#scrollTopButton::before,
#scrollTopButton::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  width: 12px;
  height: 2px;
  background: var(--main-color);
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 2;
}

#scrollTopButton::before {
  transform: translate(-50%, -50%) rotate(45deg);
  left: calc(50% + 4px);

}

#scrollTopButton::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  left: calc(50% - 4px);

}

#menuButton {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 10px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.7);
  width: 65px;
  height: 65px;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: var(--shadow);
  background: var(--main-color);
  transition: all .3s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  z-index: 10;
}
#menuButton:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow);
}

#menuButton > div {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#menuButton .hamburger-menu > span {
  display: block;
  width: 28px;
  height: 2px;
  background: white;
  margin: 6px 0;
  border-radius: 2px;
  transition-duration: .3s;
}

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

.ani-obj, .ani-obj-0, .ani-obj-250 {
  opacity: 0!important;
  transition-duration: .6s;
  transform: translateY(15px);
  filter: blur(2px);

}

.right-to-left {
  transform: translateX(30px);
}

.text-wrapper::before {
  transition: height .6s cubic-bezier(0.87, 0.11, 0.26, 0.75) .4s;
  height: 0%!important;
}

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

}

.ani-obj-opacity02.animated {
  opacity: 0.2!important;
}

.right-to-left.animated {
  transform: translateX(0);
}

.text-wrapper.animated::before {
  height: 100%!important;
}