html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#illustration-container {
  height: 400vh; /* 繝薙Η繝ｼ繝昴�繝医�鬮倥＆ */
  width: 100%;
  position: relative;
}

#layer-container {
  position: fixed; /* 繝ｬ繧､繝､繝ｼ繧貞崋螳夊｡ｨ遉ｺ */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 繝ｬ繧､繝､繝ｼ縺後せ繧ｯ繝ｭ繝ｼ繝ｫ繧帝が鬲斐＠縺ｪ縺�ｈ縺�↓ */
}
/* 蜈ｱ騾壹�繧ｹ繧ｿ繧､繝ｫ */
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.layer.visible {
  opacity: 1;
}

/* 蛻晄悄迥ｶ諷九〒荳｡譁ｹ髱櫁｡ｨ遉ｺ */
#layer-container-sp,
#layer-container-pc {
  display: none;
}

/* 繧ｹ繝槭�繝医ヵ繧ｩ繝ｳ逕ｨ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
@media screen and (max-width: 767px) {
  #layer-container-sp {
      display: block;
  }
}

/* PC逕ｨ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
@media screen and (min-width: 768px) {
  #layer-container-pc {
      display: block;
  }
}

/* 繝ｬ繧､繝､繝ｼ繧ｳ繝ｳ繝�リ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
#layer-container-sp,
#layer-container-pc {
  position: fixed; /* fixed 縺九ｉ absolute 縺ｫ螟画峩 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 隕ｪ繧ｳ繝ｳ繝�リ縺ｮ荳ｭ螟ｮ縺ｫ驟咲ｽｮ */
  pointer-events: none; /* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ謫堺ｽ懊ｒ螯ｨ縺偵↑縺� */
}

/* 蝓ｺ譛ｬ逧�↑繧ｿ繝��繧ｨ繝ｪ繧｢縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.tap-icon {
  cursor: pointer;
  z-index: 50;
  position: absolute;
  -webkit-tap-highlight-color: transparent;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.486);
  background: radial-gradient(circle at 30% 30%, rgba(195, 255, 255, 1), rgba(195, 255, 255, 0.8));
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease-in-out;
  opacity: 0;
}
@media screen and (min-width: 767px) {
  .tap-icon {
    width: 21px;
    height: 21px;
    padding: 5px;
  }
}
/* 繧ｿ繝��繧｢繧､繧ｳ繝ｳ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ繧定ｿｽ蜉� */
@keyframes pulse-icon {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  }
}
.tap-icon.visible {
  opacity: 1;
  pointer-events: auto;
  animation: pulse-icon 3s infinite;
  animation-delay: 0.5s; /* transition縺ｮ邯咏ｶ壽凾髢薙→荳€閾ｴ縺輔○繧� */
}

.tap-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.tap-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 荳贋ｸ九い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ繧ｭ繝ｼ繝輔Ξ繝ｼ繝�繧貞ｮ夂ｾｩ */
@keyframes up-down {
  0% {
      transform: translate(-50%, -100%) translateY(0);
  }
  50% {
      transform: translate(-50%, -100%) translateY(-10px); /* 荳翫↓10px遘ｻ蜍� */
  }
  100% {
      transform: translate(-50%, -100%) translateY(0);
  }
}

/* 繝�ャ繧ｰ逕ｨ繧ｰ繝ｪ繝�ラ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.grid-line {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1); /* 阮�＞邱� */
  pointer-events: none; /* 繧ｯ繝ｪ繝�け繧堤┌隕� */
  z-index: 300;
}

.grid-label {
  position: absolute;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5); /* 阮�＞譁�ｭ苓牡 */
  pointer-events: none;
}

/* 繝昴ャ繝励い繝��縺ｮ繧ｹ繧ｿ繧､繝ｫ */
#popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}

#popup.visible {
  opacity: 1;
  visibility: visible;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 蜊企€乗�縺ｮ鮟定レ譎ｯ */
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 荳ｭ螟ｮ驟咲ｽｮ */
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 20px;
  width: 80%;
  max-width: 400px;
  box-sizing: border-box;
}

#popup-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.5em;
  color: #333;
}

#popup-content {
  color: #555;
  white-space: pre-wrap;
}

/* 髢峨§繧九�繧ｿ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px; /* 繝懊ち繝ｳ縺ｮ蟷� */
  height: 30px; /* 繝懊ち繝ｳ縺ｮ鬮倥＆ */
  background-color: rgba(0, 0, 0, 0.1); /* 閭梧勹濶ｲ�亥濠騾乗��� */
  border: none;
  border-radius: 50%; /* 蜀�ｽ｢縺ｫ縺吶ｋ */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff; /* ﾃ励€阪�濶ｲ */
  font-size: 1.2em; /* 縲古励€阪�繧ｵ繧､繧ｺ */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 繝帙ヰ繝ｼ譎ゅ�繧ｹ繧ｿ繧､繝ｫ */
.close-button:hover {
  background-color: rgba(0, 0, 0, 0.3); /* 繝帙ヰ繝ｼ譎ゅ�閭梧勹濶ｲ */
  color: #ffffff; /* 繝帙ヰ繝ｼ譎ゅ�縲古励€阪�濶ｲ */
}

/* 繝帙�繝�繝壹�繧ｸ隱伜ｰ弱Μ繝ｳ繧ｯ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
#home-link {
  position: absolute;
  top: 10px;
  right: 10px; /* 髢峨§繧九�繧ｿ繝ｳ縺ｨ驥阪↑繧峨↑縺�ｈ縺�↓隱ｿ謨ｴ */
  width: auto;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.1); /* 閭梧勹濶ｲ�亥濠騾乗��� */
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff; /* 繝�く繧ｹ繝医�濶ｲ */
  font-size: 1.2em; /* 繝�く繧ｹ繝医し繧､繧ｺ */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 蠖ｱ繧定ｿｽ蜉� */
  opacity: 0; /* 蛻晄悄縺ｯ騾乗� */
  z-index: 1201; /* 繝昴ャ繝励い繝��繧医ｊ繧ゆｸ翫↓陦ｨ遉ｺ */
  padding: 0 20px;
  pointer-events: none;
}

#home-link.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 繝帙ヰ繝ｼ譎ゅ�繧ｹ繧ｿ繧､繝ｫ */
#home-link:hover {
  background-color: rgba(0, 0, 0, 0.3); /* 繝帙ヰ繝ｼ譎ゅ�閭梧勹濶ｲ */
  color: #5f5e5e; /* 繝帙ヰ繝ｼ譎ゅ�繝�く繧ｹ繝郁牡 */
  transform: scale(1.1); /* 繝帙ヰ繝ｼ譎ゅ↓蟆代＠諡｡螟ｧ */
}

/* 繝輔ぉ繝ｼ繝峨う繝ｳ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ螳夂ｾｩ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 謖∫ｶ夂噪縺ｪ繝代Ν繧ｹ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ�医が繝励す繝ｧ繝ｳ�� */
@keyframes hp-link-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(71, 71, 71, 0.7);
  }
  70% {
      transform: scale(1.05);
      box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

/* 繝代Ν繧ｹ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ繧帝←逕ｨ縺吶ｋ蝣ｴ蜷� */
#home-link.pulse {
  animation: fadeIn 1s forwards, hp-link-pulse 2s infinite;
}

.scroll-cta {
  position: fixed; /* 蝗ｺ螳夊｡ｨ遉ｺ */
  top: 50%; /* 邵ｦ荳ｭ螟ｮ */
  left: 50%; /* 讓ｪ荳ｭ螟ｮ */
  transform: translate(-50%, -50%); /* 荳ｭ螟ｮ縺ｫ驟咲ｽｮ */
  z-index: 200; /* 莉悶�隕∫ｴ�縺ｮ荳翫↓陦ｨ遉ｺ */
  display: flex; /* 繝輔Ξ繝�け繧ｹ繝懊ャ繧ｯ繧ｹ縺ｧ驟咲ｽｮ */
  flex-direction: column;
  justify-content: center;
  opacity: 1; /* 蛻晄悄迥ｶ諷九〒陦ｨ遉ｺ */
  transition: opacity 0.5s ease; /* 繝輔ぉ繝ｼ繝峨う繝ｳ繝ｻ繧｢繧ｦ繝医�繝医Λ繝ｳ繧ｸ繧ｷ繝ｧ繝ｳ */
}

.scroll-cta .scroll-cta-popup {
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 6px 16px;
  max-width: 400px;
  box-sizing: border-box;
  text-align: center;
  width: max-content;
}

.scroll-cta .arrow-background {
  width: 100px;
  height: 110px;
  background-color: rgba(0, 0, 0, 0.5);
  margin: auto;
  margin-top: 80px;
}

.scroll-cta .arrow-background .arrow-container {
  z-index: 100; /* 莉悶�隕∫ｴ�縺ｮ荳翫↓陦ｨ遉ｺ */
  display: flex; /* 繝輔Ξ繝�け繧ｹ繝懊ャ繧ｯ繧ｹ縺ｧ驟咲ｽｮ */
  flex-direction: column; /* 邵ｦ縺ｫ荳ｦ縺ｹ繧� */
  align-items: center; /* 荳ｭ螟ｮ謠�∴ */
  opacity: 1; /* 蛻晄悄迥ｶ諷九〒陦ｨ遉ｺ */
  transition: opacity 0.5s ease; /* 繝輔ぉ繝ｼ繝峨う繝ｳ繝ｻ繧｢繧ｦ繝医�繝医Λ繝ｳ繧ｸ繧ｷ繝ｧ繝ｳ */
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ蜑阪�髱櫁｡ｨ遉ｺ */
.scroll-cta.hidden {
  opacity: 0; /* 髱櫁｡ｨ遉ｺ */
  pointer-events: none; /* 繧ｯ繝ｪ繝�け繧堤┌隕� */
}
/* PC逕ｨ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@media screen and (min-width: 768px) {
  .chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    animation: move-pc 3s ease-out infinite; /* 荳雁髄縺阪い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ繧帝←逕ｨ */
  }
  
  .chevron:first-child {
    animation: move-pc 3s ease-out 1s infinite;
  }
  
  .chevron:nth-child(2) {
    animation: move-pc 3s ease-out 2s infinite;
  }
  
  .chevron:before,
  .chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
  }
  
  .chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
  }
  
  .chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg);
  }
  .text {
    display: block;
    margin-top: 75px;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .25;
    animation: pulse 2s linear alternate infinite;
  }
  }

/* 繧ｹ繝槭�繝医ヵ繧ｩ繝ｳ逕ｨ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
@media screen and (max-width: 767px) {
  .chevron {
    position: absolute;
    width: 28px;
    height: 8px;
    opacity: 0;
    transform: translateY(55px);
    animation: move-sp 3s ease-out infinite; /* 荳雁髄縺阪い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ繧帝←逕ｨ */
  }
  
  .chevron:first-child {
    animation: move-sp 3s ease-out 1s infinite;
  }
  
  .chevron:nth-child(2) {
    animation: move-sp 3s ease-out 2s infinite;
  }
  
  .chevron:before,
  .chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #fff;
  }
  
  .chevron:before {
    left: 0;
    transform: skew(0deg, 150deg);
  }
  
  .chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -150deg);
  }
  .text {
    display: block;
    margin-top: 75px;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .25;
    animation: pulse 2s linear alternate infinite;
  }
  }

  @keyframes move-pc {
    0% {
      opacity: 0;
      transform: scale3d(0.5, 0.5, 0.5);
    }
    25% {
      opacity: 1;
    }
    33% {
      opacity: 1;
      transform: translateY(30px);
    }
    67% {
      opacity: 1;
      transform: translateY(40px);
    }
    100% {
      opacity: 0;
      transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
    }
  }
  
@keyframes move-sp {
  0% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5) translateY(125px);
  }
  25% {
    opacity: 1; /* 陦ｨ遉ｺ */
  }
  33% {
    opacity: 1; /* 陦ｨ遉ｺ */
    transform: translateY(35px);
  }
  67% {
    opacity: 1; /* 陦ｨ遉ｺ */
    transform: translateY(25px);
  }
  100% {
    opacity: 0; /* 髱櫁｡ｨ遉ｺ */
    transform: translateY(10px) scale3d(0.5, 0.5, 0.5);
  }
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}