@charset "UTF-8";
:root {
  --color-bg: #fff;
  --color-bg-rgb: 255, 255, 255;
  --color-gray: #F5F5F5;
  --color-footer-bg: #3788DE;
  --text-black:#101820;
  --main-gray-color:#E5E5E5;
  --color-primary:#3788DE;
  --color-secondary:#FFAB1A;
  --color-danger:#ff0000;
  --font-langJa:"Noto Sans JP",sans-serif;
  --font-langEn: "Poppins", sans-serif;
  --font-langNum: "Poppins", sans-serif;
  --pc-width:1400;
  --contents-width:1300;
  --contents-width-px:calc(var(--contents-width) * 1px);
  --radius-xs: 8px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
}

html {
  width: 100%;
  min-height: 100%;
  height: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-size: 62.5%;
}

body {
  width: 100%;
  min-height: 100%;
  height: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--text-black);
  background-color: #FFD900;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 767px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
img, svg {
  max-width: 100%;
  height: auto;
}

:where(:focus-visible) {
  outline: 3px solid Highlight;
  outline-offset: 2px;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}
.l-inner {
  margin: 0 auto;
  width: 92%;
  max-width: var(--contents-width-px);
}
@media (max-width: 767px) {
  .l-inner {
    width: 89.3333333333%;
  }
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

main {
  position: relative;
  overflow: hidden;
}

.u-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.u-link:hover, .u-link:active, .u-link:focus {
  text-decoration: none;
}

/*************************************
* ヘッダーロゴ
***************************************/
.teaser-title {
  position: fixed;
  z-index: 1000;
  top: 2%;
  left: 1.5%;
  width: calc(878 / 1400 * 100%);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: ease-in-out opacity 0.3s;
}
.teaser-title.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

@media (max-width: 767px) {
  .teaser-title {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 1.5%;
    width: calc(175 / 375 * 100%);
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .teaser-title {
    width: calc(100 / 375 * 100%);
  }
}
/*************************************
* タイトル部分
***************************************/
.tree {
  position: absolute;
  top: 0.5%;
  right: 2.75%;
  aspect-ratio: 302/288;
  width: calc(302 / 1400 * 100%);
  z-index: 3;
}

.tree-lerch img {
  display: block;
  width: 100%;
  height: auto;
}

.main-title-wrap {
  position: relative;
  z-index: 5;
  margin: 0 auto 0;
  width: calc(1000 / 1400 * 100%);
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: auto;
  grid-template-rows: auto;
  gap: 0px 0px;
  align-items: end;
}
.main-title-wrap .g01 {
  grid-area: 1/1/2/2;
}
.main-title-wrap .g02 {
  grid-area: 1/1/2/2;
}

.main-title {
  position: relative;
  padding-left: 4%;
  z-index: 2;
  width: 100%;
}
.main-title img {
  width: 100%;
  height: auto;
  display: block;
}

.jump-lerch {
  position: relative;
  padding-bottom: 2.5%;
  z-index: 1;
  margin: 0 auto;
  width: calc(238 / 826 * 100%);
}
.jump-lerch img {
  width: 100%;
  height: auto;
}

.jump-lerch-fukidashi {
  position: absolute;
  right: -26%;
  top: -15%;
  width: calc(166 / 238* 100%);
  transform: scale(0);
  opacity: 0;
}

.sub-title-wrap {
  margin-top: 0;
}

.sub-title {
  margin: 0 auto;
  width: calc(740 / 1400 * 100%);
}
.sub-title img {
  width: 100%;
  height: auto;
}

.big-lerch-shadow {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1400/863;
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
}
.big-lerch-shadow::after {
  position: absolute;
  bottom: -4%;
  right: -20%;
  display: block;
  width: calc(825 / 1400 * 100%);
  aspect-ratio: 825/68;
  opacity: 0;
  content: "";
  border-radius: 825.237px;
  opacity: 0.18;
  background: radial-gradient(50% 50% at 50% 50%, #000 45.19%, #FFF 100%);
  mix-blend-mode: multiply;
  filter: blur(1.198682785px);
}

.big-lerch {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1400/863;
  z-index: 2000;
  transform: translateY(-200%) translateX(0) scale(1);
}

.big-lerch-fukidashi {
  position: absolute;
  right: 36%;
  top: 31%;
  width: calc(388 / 1400 * 100%);
  z-index: 2002;
  opacity: 0;
}
.big-lerch-fukidashi img {
  width: 100%;
  height: auto;
}

.big-lerch-chara {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2001;
  width: calc(760 / 1400 * 100%);
  aspect-ratio: 760/863;
}
.big-lerch-chara img {
  width: 100%;
  height: auto;
}

/* アニメーション */
.is-loaded .jump-lerch {
  -webkit-animation: moveA 8s forwards linear 0.6s;
          animation: moveA 8s forwards linear 0.6s;
}
.is-loaded .jump-lerch-fukidashi {
  -webkit-animation: popC 1s forwards 8s;
          animation: popC 1s forwards 8s;
}
.is-loaded .big-lerch {
  -webkit-animation: moveB 3s forwards 3s;
          animation: moveB 3s forwards 3s;
}
.is-loaded .big-lerch-fukidashi {
  -webkit-animation: popC 1s forwards 4s;
          animation: popC 1s forwards 4s;
}
.is-loaded .big-lerch-shadow {
  -webkit-animation: shadowFrame 3s forwards 3s;
          animation: shadowFrame 3s forwards 3s;
}
.is-loaded .big-lerch-shadow::after {
  -webkit-animation: shadow 4s forwards 2s;
          animation: shadow 4s forwards 2s;
}

/* ジャンプレルヒ：上に移動 → 待機 → 戻る */
@-webkit-keyframes moveA {
  0% {
    transform: translateY(0) scale(1);
  }
  2% {
    transform: translateY(3%) scale(1);
  }
  7% {
    transform: translateY(-200%) scale(1.5);
  }
  8.33% {
    transform: translateY(-200%) scale(2);
  }
  86.66% {
    transform: translateY(-200%) scale(2);
  }
  96% {
    transform: translateY(-200%) scale(1.5);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes moveA {
  0% {
    transform: translateY(0) scale(1);
  }
  2% {
    transform: translateY(3%) scale(1);
  }
  7% {
    transform: translateY(-200%) scale(1.5);
  }
  8.33% {
    transform: translateY(-200%) scale(2);
  }
  86.66% {
    transform: translateY(-200%) scale(2);
  }
  96% {
    transform: translateY(-200%) scale(1.5);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
/* アップレルヒ：遅れて表示 → 3秒表示 → 右に消える */
@-webkit-keyframes moveB {
  0% {
    transform: translateY(-200%) translateX(0);
  }
  32% {
    transform: translateY(-200%) translateX(0);
  }
  40% {
    transform: translateY(0%) translateX(0);
  }
  41% {
    transform: translateY(2%) translateX(0);
  }
  42% {
    transform: translateY(-2%) translateX(0);
  }
  43% {
    transform: translateY(1%) translateX(0);
  }
  44% {
    transform: translateY(-3%) translateX(0);
  }
  45% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(0) translateX(0);
  }
  60% {
    transform: translateY(0) translateX(0);
  }
  89.9% {
    transform: translateY(0) translateX(0);
  }
  91% {
    transform: translateY(0) translateX(0);
  }
  93% {
    transform: translateY(0) translateX(13%);
    opacity: 1;
  }
  94% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(0) translateX(100%);
  }
}
@keyframes moveB {
  0% {
    transform: translateY(-200%) translateX(0);
  }
  32% {
    transform: translateY(-200%) translateX(0);
  }
  40% {
    transform: translateY(0%) translateX(0);
  }
  41% {
    transform: translateY(2%) translateX(0);
  }
  42% {
    transform: translateY(-2%) translateX(0);
  }
  43% {
    transform: translateY(1%) translateX(0);
  }
  44% {
    transform: translateY(-3%) translateX(0);
  }
  45% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(0) translateX(0);
  }
  60% {
    transform: translateY(0) translateX(0);
  }
  89.9% {
    transform: translateY(0) translateX(0);
  }
  91% {
    transform: translateY(0) translateX(0);
  }
  93% {
    transform: translateY(0) translateX(13%);
    opacity: 1;
  }
  94% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(0) translateX(100%);
  }
}
/* レルヒさんの影枠 */
@-webkit-keyframes shadowFrame {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(0);
  }
  94% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
    opacity: 1;
  }
}
@keyframes shadowFrame {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(0);
  }
  94% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
    opacity: 1;
  }
}
@-webkit-keyframes shadow {
  0%, 32% {
    opacity: 0.18;
    transform: scale(0);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes shadow {
  0%, 32% {
    opacity: 0.18;
    transform: scale(0);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
/* プロフィールボタン：ポンっと表示 */
@-webkit-keyframes popC {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 0;
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
    opacity: 0;
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
    opacity: 0;
  }
  60% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
    opacity: 1;
  }
  70% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
    opacity: 1;
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes popC {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 0;
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
    opacity: 0;
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
    opacity: 0;
  }
  60% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
    opacity: 1;
  }
  70% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
    opacity: 1;
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
    opacity: 1;
  }
}
/* スクロール */
.scroll-down {
  position: absolute;
  top: calc(100svh - 15em);
  left: calc(53 / 1400 * 100%);
  width: calc(32 / 1400 * 100%);
}

@media (max-width: 767px) {
  .scroll-down {
    display: none;
  }
}
/*************************************
* スクロール
***************************************/
/*************************************
* news slider
***************************************/
.news-wrap {
  position: relative;
  margin-top: 2%;
  max-width: 92%;
  border: 1px solid #000;
  padding: 8px;
  width: calc(52.1428571429%);
}
.news-wrap::before {
  content: "";
  position: absolute;
  left: -5%;
  top: -30%;
  display: block;
  width: calc(20.5479452055%);
  aspect-ratio: 150/30;
  transform: rotate(-5deg);
  background: url(../img/teaser/lbl_lerch_news.svg) no-repeat left top/contain;
  z-index: 50;
}

.news-swipe {
  position: relative;
  background-color: #fff;
}

.news-list {
  font-size: 1.21vw;
}
.news-list li a {
  position: relative;
  padding: 1em 2em 1em 1em;
  display: flex;
  gap: 0 2em;
}
.news-list li a::after {
  content: "";
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25em;
  height: 1.25em;
  background: url(../img/teaser/icon_arrow.svg) no-repeat center/contain;
}
.news-list li .date {
  display: block;
  color: #918683;
  font-size: 18px;
  font-size: 1.28vw;
  width: 4em;
}
.news-list li .title {
  color: #231815;
  font-size: 17px;
  font-size: 1.21vw;
  font-weight: 700;
  width: calc(100% - 4em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

@media (max-width: 767px) {
  .news-list li .title {
    -webkit-line-clamp: 2;
  }
}
/*************************************
* コンテンツ部分
***************************************/
.a-wrap {
  margin: 0 auto 0;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  background: url(../img/teaser/bg_header.webp) no-repeat top center/100%;
}
.a-wrap .g01 {
  grid-area: 1/1/2/2;
}
.a-wrap .g02 {
  grid-area: 1/1/2/2;
}
.a-wrap .g03 {
  grid-area: 1/1/2/2;
}

.bg-contents {
  position: relative;
  z-index: 1;
}
.bg-contents::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1400/450;
  pointer-events: none;
}

.path-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

body:not(.is-loaded) .character {
  opacity: 0;
}

.character {
  width: calc(150 / 1400 * 100%);
  height: auto;
  position: absolute;
  z-index: 2;
  transition: ease-in-out 0.3s opacity;
}
.character img {
  width: 100%;
  height: auto;
}
.character.is-hidden {
  display: none;
}
.character::before {
  content: "";
  position: absolute;
  right: 2%;
  top: -27%;
  width: 42%;
  aspect-ratio: 64/141;
  display: block;
  background: url(../img/teaser/ski_lerch_serif.svg) no-repeat center/contain;
  transition: ease-in-out 0.3s opacity;
  pointer-events: none;
  opacity: 1;
}
.character.is-hidden-text::before, .character.is-hidden-text::after {
  opacity: 0;
}

.skiline {
  position: absolute;
  width: 100%;
  height: 95%;
  z-index: 1;
  background: url(../img/teaser/skiline.svg) no-repeat top left/contain;
}

#motionPath {
  stroke: transparent;
  fill: none;
  stroke-width: 1;
}

.bg-parallax {
  position: relative;
  z-index: 0;
}

.content {
  position: relative;
  padding-top: 4%;
  z-index: 2;
}

.content-section {
  overflow: hidden;
  padding-bottom: 48%;
}

.teaser-subtitle01 {
  font-family: "Dela Gothic One", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 52px;
  font-size: 3.64vw;
  line-height: 110%;
  color: #FF381A;
}

.teaser-subtitle01.large {
  font-size: 72px;
  font-size: 5.07vw;
  line-height: 100%;
}

.teaser-text {
  margin-top: 1em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  font-size: 1.28vw;
  line-height: 160%;
  color: #231815;
}

@media (min-width: 768px) {
  .year-block {
    position: relative;
  }
  .year-block .flag {
    width: 107px;
    aspect-ratio: 107/100;
  }
  .year-block .flag img {
    width: 100%;
    height: auto;
    display: block;
  }
  .year-block .thumb img {
    width: 100%;
    height: auto;
    display: block;
  }
  .lerch-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  .year-1910 {
    margin: calc(237 / 1400 * 100%) auto 0 calc(256 / 1400 * 100%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(583 / 1400 * 100%);
  }
  .year-1910 .text {
    order: 2;
    width: calc(456 / 583 * 100%);
  }
  .year-1910 .flag {
    order: 1;
    width: calc(107 / 583 * 100%);
  }
  .lerch1910 {
    aspect-ratio: 311/506;
    width: calc(311 / 583 * 100%);
    position: absolute;
    top: -87%;
    right: -62%;
  }
  .year-1911 {
    margin: calc(51 / 1400 * 100%) calc(201 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(289 / 673 * 100%) calc(352 / 673 * 100%);
    grid-template-rows: auto auto;
    gap: 0px 6%;
    grid-template-areas: "thumb flag" "thumb text";
    width: calc(673 / 1400 * 100%);
  }
  .year-1911 .flag {
    grid-area: flag;
  }
  .year-1911 .text {
    grid-area: text;
  }
  .year-1911 .thumb {
    grid-area: thumb;
  }
  .year-1911 .text {
    margin-top: 10%;
    align-content: center;
    padding-bottom: 8em;
  }
  .year-1911 .flag {
    align-self: flex-start;
    width: calc(107 / 352* 100%);
  }
  .lerch1911 {
    position: absolute;
    top: 15%;
    left: -60%;
    aspect-ratio: 285/499;
    width: calc(285 / 673 * 100%);
  }
  .year-2009 {
    margin: calc(187 / 1400 * 100%) auto 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(476 / 1240 * 100%) calc(715 / 1240 * 100%);
    grid-template-rows: auto auto;
    gap: 0px 3%;
    grid-template-areas: "flag thumb" "text thumb";
    width: calc(1240 / 1400 * 100%);
  }
  .year-2009 .thumb {
    grid-area: thumb;
  }
  .year-2009 .flag {
    grid-area: flag;
  }
  .year-2009 .text {
    grid-area: text;
  }
  .year-2009 .flag {
    width: calc(107 / 274 * 100%);
  }
  .year-2009 .teaser-text {
    margin-top: 1em;
  }
  .lerch2009 {
    position: absolute;
    top: 67%;
    left: -32.9218106996%;
    aspect-ratio: 240/435;
    width: calc(240 / 729 * 100%);
  }
  .year-2010a {
    position: relative;
    margin: calc(130 / 1400 * 100%) auto 0 calc(160 / 1400 * 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: calc(1240 / 1400 * 100%);
    gap: 0px 2%;
  }
  .year-2010a .thumb {
    margin-left: auto;
    order: 1;
    width: calc(272 / 1240 * 100%);
  }
  .year-2010a .text {
    order: 2;
    width: calc(347 / 1240 * 100%);
  }
  .year-2010a .flag {
    order: 3;
    width: calc(107 / 1240 * 100%);
  }
  .lerch2010a {
    width: calc(422 / 1240 * 100%);
    aspect-ratio: 422/232;
    transform: translateY(-20%);
    order: 4;
  }
  .lerch2010b {
    position: absolute;
    bottom: -111%;
    left: -8%;
    width: calc(294 / 1240 * 100%);
    aspect-ratio: 294/400;
  }
  .year-2010b {
    margin: calc(74 / 1400 * 100%) calc(81 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    grid-template-areas: "text" "thumb";
    width: calc(539 / 1400 * 100%);
  }
  .year-2010b .thumb {
    grid-area: thumb;
  }
  .year-2010b .flag {
    grid-area: flag;
  }
  .year-2010b .text {
    grid-area: text;
  }
  .year-2010b .flag {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(107 / 539 * 100%);
  }
  .year-2010b .thumb {
    margin-top: 2%;
  }
  .year-2010b .text {
    padding-bottom: 2em;
  }
  .lerch2010c {
    position: absolute;
    bottom: -9%;
    left: -58%;
    width: calc(302 / 539 * 100%);
    aspect-ratio: 244/400;
  }
  /* God lerch */
  #animation_container,
#god_canvas,
#dom_overlay_container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #dom_overlay_container {
    pointer-events: none;
    overflow: hidden;
    display: block;
  }
  .lerch2011 {
    position: absolute;
    left: -75%;
    top: -47%;
    width: calc(960 / 898 * 100%);
    aspect-ratio: 1/1;
  }
  /* 2011年 */
  .year-2011a {
    margin: calc(80 / 1400 * 100%) calc(81 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(459 / 898 * 100%) calc(391 / 898 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px 5%;
    grid-template-areas: "flag thumb" "text thumb";
    width: calc(898 / 1400 * 100%);
  }
  .year-2011a .thumb {
    grid-area: thumb;
  }
  .year-2011a .flag {
    grid-area: flag;
  }
  .year-2011a .text {
    grid-area: text;
  }
  .year-2011a .text {
    margin-top: 2.5em;
  }
  .year-2011a .flag {
    width: calc(160 / 459 * 100%);
  }
  .year-2011b {
    margin: calc(80 / 1400 * 100%) auto 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(432 / 1239 * 100%) calc(160 / 1239 * 100%) calc(519 / 1239 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px calc(48 / 1239 * 100%);
    grid-template-areas: "text flag thumb";
    width: calc(1239 / 1400 * 100%);
  }
  .year-2011b .thumb {
    grid-area: thumb;
  }
  .year-2011b .flag {
    grid-area: flag;
  }
  .year-2011b .text {
    grid-area: text;
  }
  .year-2011b .text {
    margin-top: 2.5em;
  }
  .year-2011b .flag {
    width: 100%;
  }
  .year-2011c {
    margin: calc(67 / 1400 * 100%) auto 0 calc(81 / 1400 * 100%);
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(520 / 863 * 100%) calc(311 / 863 * 100%);
    grid-template-rows: auto auto;
    gap: 0px calc(32 / 863 * 100%);
    grid-template-areas: "flag thumb" "text thumb";
    width: calc(863 / 1400 * 100%);
  }
  .year-2011c .flag {
    grid-area: flag;
  }
  .year-2011c .thumb {
    grid-area: thumb;
  }
  .year-2011c .text {
    grid-area: text;
  }
  .year-2011c .text {
    margin-top: 2%;
  }
  .year-2011c .flag {
    width: calc(107 / 520 * 100%);
  }
  .year-2012 {
    margin: calc(102 / 1400 * 100%) calc(276 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(337 / 739 * 100%) calc(369 / 739 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px calc(32 / 739 * 100%);
    grid-template-areas: "flag thumb" "text thumb";
    width: calc(739 / 1400 * 100%);
  }
  .year-2012 .thumb {
    grid-area: thumb;
  }
  .year-2012 .flag {
    grid-area: flag;
  }
  .year-2012 .text {
    grid-area: text;
  }
  .year-2012 .text {
    margin-top: 7%;
  }
  .year-2012 .flag {
    width: calc(177 / 337 * 100%);
    aspect-ratio: 177/100;
  }
  .lerch2012 {
    position: absolute;
    top: -25%;
    left: -49%;
    aspect-ratio: 284/445;
    width: calc(347 / 739 * 100%);
  }
  .year-2015 {
    margin: calc(104 / 1400 * 100%) auto 0 calc(140 / 1400 * 100%);
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(397 / 739 * 100%) calc(310 / 739 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px calc(32 / 739 * 100%);
    grid-template-areas: "thumb flag" "thumb text";
    width: calc(739 / 1400 * 100%);
  }
  .year-2015 .thumb {
    grid-area: thumb;
  }
  .year-2015 .flag {
    grid-area: flag;
  }
  .year-2015 .text {
    grid-area: text;
  }
  .year-2015 .text {
    margin-top: 8%;
  }
  .year-2015 .flag {
    width: calc(107 / 310 * 100%);
  }
  .lerch2015 {
    position: absolute;
    top: -13%;
    right: -56%;
    width: calc(444 / 739 * 100%);
    aspect-ratio: 344/400;
  }
  .section-continue {
    padding-bottom: calc(80 / 1400 * 100%);
    overflow: hidden;
  }
  .continue-outer {
    position: relative;
    transform: skewY(-5deg);
    padding-top: calc(203 / 1400 * 100%);
    overflow: hidden;
    aspect-ratio: 1400/1042;
  }
  .continue-inner {
    position: relative;
    background-color: #ff381a;
    overflow: hidden;
    aspect-ratio: 1400/842;
  }
  .continue-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/teaser/bg_continue_line.svg) no-repeat center/cover;
    overflow: hidden;
    transform: scale(2);
    transform-origin: center;
    transition: ease-in-out 0.3s transform 0.5s;
  }
  .continue-contents {
    position: relative;
    z-index: 2;
    transform: skewY(5deg);
  }
  .title-continue {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin-top: calc(103 / 1400 * 100%);
    margin-left: auto;
    margin-right: calc(275 / 1400 * 100%);
    width: calc(560 / 1400 * 100%);
    color: #fff;
    font-family: "Dela Gothic One", sans-serif;
    font-size: 200px;
    font-size: 14.28vw;
    letter-spacing: 0.03em;
    line-height: 0.9;
    opacity: 0;
    transform: scale(0.5);
  }
  .text-continue {
    position: relative;
    z-index: 2;
    margin-top: 2%;
    margin-left: auto;
    margin-right: calc(293 / 1400 * 100%);
    width: calc(480 / 1400 * 100%);
    color: #fff;
    font-size: 18px;
    font-size: 1.28vw;
    line-height: 160%;
    opacity: 0;
  }
  .lerch-continue {
    position: absolute;
    left: 9%;
    bottom: -100%;
    z-index: 1;
    aspect-ratio: 730/1033;
    width: calc(730 / 1400 * 100%);
    transition: ease-in-out bottom 0.3s 0.5s;
  }
  .lerch-continue img {
    width: 100%;
    height: auto;
  }
  .section-continue.is-show .title-continue {
    opacity: 1;
    transform: scale(1);
    transition: linear opacity 0.1s 1s, linear transform 0.1s 1s;
  }
  .section-continue.is-show .text-continue {
    opacity: 1;
    transition: linear opacity 0.1s 1s;
  }
  .section-continue.is-show .lerch-continue {
    bottom: -5%;
  }
  .section-continue.is-show .continue-inner::before {
    transform: scale(1);
  }
  .year-2019a {
    position: relative;
    z-index: 2;
    margin: calc(151 / 1400 * 100%) auto 0 calc(365 / 1400 * 100%);
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(107 / 769 * 100%) calc(643 / 769 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px 3%;
    grid-template-areas: "flag text";
    width: calc(769 / 1400 * 100%);
  }
  .year-2019a .thumb {
    grid-area: thumb;
  }
  .year-2019a .flag {
    grid-area: flag;
  }
  .year-2019a .text {
    grid-area: text;
  }
  .year-2019a .text {
    margin-top: 4%;
  }
  .year-2019a .flag {
    width: 100%;
  }
  .lerch2019a {
    position: absolute;
    z-index: -1;
    top: -150%;
    left: auto;
    right: calc(55 / 769 * -1 * 100%);
    aspect-ratio: 289/580;
    width: calc(289 / 769 * 100%);
  }
  .year-2019b {
    position: relative;
    z-index: 2;
    margin: calc(112 / 1400 * 100%) calc(74 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(160 / 753 * 100%) calc(599 / 753 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0;
    grid-template-areas: "thumb thumb" "flag text";
    width: calc(753 / 1400 * 100%);
  }
  .year-2019b .thumb {
    grid-area: thumb;
  }
  .year-2019b .flag {
    grid-area: flag;
  }
  .year-2019b .text {
    grid-area: text;
  }
  .year-2019b .thumb {
    width: calc(519 / 753 * 100%);
  }
  .year-2019b .text {
    margin-top: 6%;
  }
  .year-2019b .flag {
    position: relative;
    top: 5%;
    left: -23%;
    width: 100%;
  }
  .lerch2019b {
    position: absolute;
    top: 43%;
    left: -60%;
    aspect-ratio: 322/314;
    width: calc(322 / 753 * 100%);
  }
  .lerch-curry {
    position: absolute;
    right: -4%;
    bottom: 35%;
    width: calc(224 / 753 * 100%);
  }
  .year-2020a {
    position: relative;
    margin: calc(106 / 1400 * 100%) auto 0 calc(173 / 1400 * 100%);
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    grid-template-areas: "flag" "text";
    width: calc(548 / 1400 * 100%);
  }
  .year-2020a .thumb {
    grid-area: thumb;
  }
  .year-2020a .flag {
    grid-area: flag;
  }
  .year-2020a .text {
    grid-area: text;
  }
  .year-2020a .text {
    margin-top: 4%;
  }
  .year-2020a .flag {
    width: calc(107 / 548 * 100%);
  }
  .lerch2020a {
    position: absolute;
    top: 10%;
    left: auto;
    right: -113%;
    aspect-ratio: 325/332;
    width: calc(325 / 548 * 100%);
  }
  .year-2020b {
    margin: calc(211 / 1400 * 100%) auto 0 calc(81 / 1400 * 100%);
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(633 / 1162 * 100%) calc(489 / 1162 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px calc(40 / 1162 * 100%);
    grid-template-areas: "thumb flag" "thumb text";
    width: calc(1162 / 1400 * 100%);
  }
  .year-2020b .thumb {
    grid-area: thumb;
  }
  .year-2020b .flag {
    grid-area: flag;
  }
  .year-2020b .text {
    grid-area: text;
  }
  .year-2020b .text {
    margin-top: 4%;
  }
  .year-2020b .flag {
    width: calc(107 / 489 * 100%);
  }
  .lerch2020b {
    position: absolute;
    bottom: -47%;
    right: -7%;
    left: auto;
    aspect-ratio: 553/256;
    width: calc(553 / 1162 * 100%);
  }
  .year-2023 {
    position: relative;
    margin: calc(279 / 1400 * 100%) calc(206 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(107 / 749 * 100%) calc(624 / 749 * 100%);
    grid-template-rows: auto;
    gap: 0 calc(18 / 749 * 100%);
    grid-template-areas: "flag text";
    width: calc(749 / 1400 * 100%);
  }
  .year-2023 .thumb {
    grid-area: thumb;
  }
  .year-2023 .flag {
    grid-area: flag;
  }
  .year-2023 .text {
    grid-area: text;
  }
  .year-2023 .flag {
    width: 100%;
  }
  .lerch2023 {
    position: absolute;
    top: -369%;
    left: -48%;
    z-index: 2;
    aspect-ratio: 352/600;
    width: calc(352 / 749 * 100%);
  }
  .year-2024 {
    margin: calc(143 / 1400 * 100%) calc(220 / 1400 * 100%) 0 auto;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(160 / 949 * 100%) calc(734 / 949 * 100%);
    grid-template-rows: auto 1fr;
    gap: 0px calc(52 / 949 * 100%);
    grid-template-areas: "flag thumb" "text text";
    width: calc(954 / 1400 * 100%);
  }
  .year-2024 .thumb {
    grid-area: thumb;
  }
  .year-2024 .flag {
    grid-area: flag;
  }
  .year-2024 .text {
    grid-area: text;
  }
  .year-2024 .text {
    margin-top: 2%;
  }
  .year-2024 .flag {
    width: 100%;
  }
  .year-2024-iroiro {
    position: relative;
    margin: calc(220 / 1400 * 100%) auto 0 auto;
    aspect-ratio: 1115/872;
    width: calc(1115 / 1400 * 100%);
  }
  .year-2024-iroiro .thumb01 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(539 / 1115 * 100%);
    z-index: 2;
  }
  .year-2024-iroiro .thumb02 {
    position: absolute;
    left: 24.5%;
    bottom: 0;
    width: calc(367 / 1115 * 100%);
    z-index: 2;
  }
  .year-2024-iroiro .thumb03 {
    position: absolute;
    top: 17.5%;
    left: auto;
    right: 0;
    width: calc(387 / 1115 * 100%);
    z-index: 2;
  }
  .lerch2024a {
    position: absolute;
    top: -16.5%;
    right: 19%;
    z-index: 1;
    aspect-ratio: 410/530;
    width: calc(410 / 1115 * 100%);
  }
  .lerch2024b {
    position: absolute;
    bottom: -6%;
    right: -9%;
    z-index: 3;
    aspect-ratio: 334/480;
    width: calc(334 / 1115 * 100%);
  }
  .year-2025 {
    position: relative;
    margin: calc(71 / 1400 * 100%) calc(112 / 1400 * 100%) 0 auto;
    display: grid;
    justify-content: end;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: calc(107 / 828 * 100%) calc(274 / 828 * 100%) calc(397 / 828 * 100%);
    grid-template-rows: auto;
    gap: 0 calc(32 / 828 * 100%);
    grid-template-areas: "flag text thumb";
    width: calc(828 / 1400 * 100%);
  }
  .year-2025 .thumb {
    grid-area: thumb;
  }
  .year-2025 .flag {
    grid-area: flag;
  }
  .year-2025 .text {
    grid-area: text;
  }
  .year-2025 .flag {
    width: 100%;
  }
  .lerch2025 {
    position: absolute;
    top: -24.5%;
    left: -41.5%;
    z-index: 2;
    aspect-ratio: 270/520;
    width: calc(339 / 828 * 100%);
  }
}
.next-section {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.next-lerch {
  margin-left: auto;
  margin-right: 9%;
  width: calc(634 / 1400 * 100%);
}
.next-lerch img {
  width: 100%;
  height: auto;
  display: block;
}

.next-balloon {
  position: absolute;
  left: 12%;
  top: 38%;
  width: calc(551 / 1400 * 100%);
  padding-bottom: 6%;
}
.next-balloon img {
  width: 100%;
  height: auto;
  display: block;
}

.bottom-space {
  width: 100%;
  aspect-ratio: 1400/165;
}

.l-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1em;
  width: 100%;
  z-index: 10;
}
.l-footer a {
  text-decoration: underline;
}

.copy {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  text-align: left;
}

/*************************
* sp
**************************/
@media (max-width: 767px) {
  .a-wrap {
    margin: 0 auto 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0px 0px;
    overflow: hidden;
    background: url(../img/teaser/bg_header_sp.webp) no-repeat top center/contain;
  }
  .a-wrap .g01 {
    grid-area: 1/1/2/2;
  }
  .a-wrap .g02 {
    grid-area: 1/1/2/2;
  }
  .a-wrap .g03 {
    grid-area: 1/1/2/2;
  }
  .path-container {
    background: url(../img/teaser/skiline.svg) no-repeat top/cover;
  }
  .skiline {
    background: none;
  }
  .character {
    display: none !important;
    width: 100px;
    height: auto;
    position: absolute;
    z-index: 2;
    /* transform: rotate(-45deg); */
  }
  .character img {
    width: 100%;
    height: auto;
  }
  .content {
    position: relative;
    padding-top: 25%;
  }
  .content-section {
    padding-bottom: 0;
  }
  .main-title-wrap {
    width: 100%;
  }
  .main-title {
    margin: calc(40 / 375 * 100%) auto 0;
    padding-left: 0;
    width: 94%;
  }
  .main-title img {
    width: 100%;
    height: auto;
    display: block;
  }
  .jump-lerch-chara {
    position: relative;
    z-index: 2;
  }
  .jump-lerch-fukidashi {
    position: absolute;
    z-index: 1;
    left: -64%;
    top: -32%;
    width: calc(120 / 108 * 100%);
  }
  .sub-title-wrap {
    margin-top: 5%;
  }
  .sub-title {
    width: 90%;
  }
  .big-lerch-shadow {
    aspect-ratio: 375/425;
  }
  .big-lerch-shadow::after {
    width: 100%;
  }
  .big-lerch {
    width: 100%;
  }
  .big-lerch-fukidashi {
    width: 60%;
    top: 93%;
  }
  .big-lerch-chara {
    width: 100%;
    bottom: 20%;
  }
  .news-wrap {
    position: static;
    margin: 6.5% auto 0;
    width: 92%;
  }
  .news-list {
    width: 100%;
    font-size: 4.26vw;
  }
  .news-list li .date {
    font-size: 14px;
    font-size: 3.73vw;
  }
  .news-list li .title {
    font-size: 14px;
    font-size: 3.73vw;
  }
  .news-list li a:after {
    right: 0.25em;
  }
  .teaser-subtitle01 {
    margin-top: 4%;
    font-family: "Dela Gothic One", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    font-size: 8.53vw;
    letter-spacing: normal;
    font-feature-settings: "palt";
    line-height: 100%;
    color: #FF381A;
  }
  .teaser-subtitle01.large {
    font-size: 32px;
    font-size: 8.53vw;
  }
  .teaser-text {
    margin-top: 1em;
    font-size: 16px;
    font-size: 4.26vw;
    line-height: 150%;
  }
  .year-block {
    position: relative;
    margin: 0 auto;
    width: 92%;
  }
  .year-block .flag {
    margin-top: auto;
    width: 90%;
    aspect-ratio: 107/100;
  }
  .year-block .thumb img {
    display: block;
    width: 100%;
    height: auto;
  }
  .year-block.odd {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 25% 1fr;
    grid-template-rows: auto auto;
    gap: 0px 4%;
    grid-template-areas: "flag thumb" "text text";
  }
  .year-block.odd .thumb {
    grid-area: thumb;
  }
  .year-block.odd .flag {
    grid-area: flag;
  }
  .year-block.odd .text {
    grid-area: text;
  }
  .year-block.even {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 25%;
    grid-template-rows: auto auto;
    gap: 0px 4%;
    grid-template-areas: "thumb flag" "text text";
  }
  .year-block.even .thumb {
    grid-area: thumb;
  }
  .year-block.even .flag {
    grid-area: flag;
  }
  .year-block.even .text {
    grid-area: text;
  }
  .lerch-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  .year-1910 {
    margin: 5% auto 0;
  }
  .lerch1910 {
    position: relative;
    right: 0;
    top: 0;
    width: calc(300 / 375 * 100%);
    aspect-ratio: 311/506;
  }
  .year-1911.year-block {
    margin: 15% auto 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 25%;
    grid-template-rows: auto auto auto;
    gap: 0px 4%;
    grid-template-areas: "thumb flag" "text text" "lerch1911 lerch1911";
  }
  .year-1911.year-block .thumb {
    grid-area: thumb;
  }
  .year-1911.year-block .flag {
    grid-area: flag;
  }
  .year-1911.year-block .text {
    grid-area: text;
  }
  .year-1911.year-block .lerch1911 {
    grid-area: lerch1911;
  }
  .lerch1911 {
    margin: 4% auto 0;
    aspect-ratio: 285/499;
    width: calc(200 / 375 * 100%);
  }
  .year-2009 {
    margin: calc(10 / 375 * 100%) auto 0;
  }
  .year-2009 .thumb {
    grid-area: thumb;
  }
  .year-2009 .flag {
    grid-area: flag;
  }
  .year-2009 .text {
    grid-area: text;
  }
  .year-2010a {
    margin: calc(50 / 375 * 100%) auto 0;
  }
  .lerch2010a {
    margin-top: 20%;
    position: relative;
    left: auto;
    right: 0;
    top: 0;
    width: 150%;
    aspect-ratio: 422/232;
  }
  .year-2010b {
    margin: 6.5% auto 0;
  }
  .lerch2010b {
    position: absolute;
    bottom: -42%;
    z-index: 2;
    right: 0;
    width: calc(156 / 375 * 100%);
    aspect-ratio: 207/413;
  }
  .lerch2010c {
    position: absolute;
    bottom: -98%;
    right: -16%;
    width: calc(200 / 375 * 100%);
    aspect-ratio: 207/413;
  }
  /* God lerch */
  #animation_container,
#god_canvas,
#dom_overlay_container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #dom_overlay_container {
    pointer-events: none;
    overflow: hidden;
    display: block;
  }
  .lerch2011 {
    position: relative;
    left: -25%;
    width: 160%;
    aspect-ratio: 1/1;
  }
  .year-2011a.year-block {
    margin: calc(50 / 375 * 100%) auto 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 25%;
    grid-template-rows: auto auto auto;
    gap: 0px 4%;
    grid-template-areas: "thumb flag" "text text" "lerch2011 lerch2011";
  }
  .year-2011a.year-block .thumb {
    grid-area: thumb;
  }
  .year-2011a.year-block .flag {
    grid-area: flag;
  }
  .year-2011a.year-block .text {
    grid-area: text;
  }
  .year-2011a.year-block .lerch2011 {
    grid-area: lerch2011;
  }
  .year-2011c {
    margin: calc(50 / 375 * 100%) auto 0;
  }
  .year-2012.year-block {
    margin: calc(50 / 375 * 100%) auto 0;
    grid-template-columns: 1fr 35%;
  }
  .year-2012.year-block .thumb {
    grid-area: thumb;
  }
  .year-2012.year-block .flag {
    grid-area: flag;
  }
  .year-2012.year-block .text {
    grid-area: text;
  }
  .lerch2012 {
    position: relative;
    aspect-ratio: 284/445;
    width: calc(360 / 375 * 100%);
  }
  .year-2015.year-block {
    margin: 0 auto 0;
    grid-template-rows: auto auto auto;
    gap: 0px 4%;
    grid-template-areas: "flag thumb" "text text" "lerch2015 lerch2015";
  }
  .year-2015.year-block .lerch2015 {
    grid-area: lerch2015;
    margin-left: auto;
  }
  .lerch2015 {
    position: relative;
    width: calc(300 / 375 * 100%);
  }
  .section-continue {
    padding-bottom: calc(203 / 1400 * 100%);
    overflow: hidden;
  }
  .continue-outer {
    transform: skewY(-5deg);
    padding-top: calc(203 / 1400 * 100%);
    overflow: hidden;
    aspect-ratio: 4/10;
  }
  .continue-inner {
    position: relative;
    background-color: #ff381a;
    overflow: hidden;
    aspect-ratio: 1/3;
  }
  .continue-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/teaser/bg_continue_line_sp.svg) no-repeat center/cover;
    overflow: hidden;
    transform: scale(2);
    transform-origin: center;
    transition: ease-in-out 0.3s transform 1s;
  }
  .continue-contents {
    position: relative;
    z-index: 2;
    transform: skewY(5deg);
  }
  .title-continue {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin-top: calc(103 / 1400 * 100%);
    margin-left: auto;
    margin-right: auto;
    width: calc(560 / 750 * 100%);
    opacity: 1;
    transform: scale(1);
  }
  .text-continue {
    position: relative;
    z-index: 2;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    width: calc(650 / 750 * 100%);
    color: #fff;
    font-size: 16px;
    font-size: 4.26vw;
    line-height: 160%;
    opacity: 1;
  }
  .lerch-continue {
    position: absolute;
    bottom: -100%;
    z-index: 1;
    aspect-ratio: 730/1033;
    width: 114%;
    transition: ease-in-out bottom 0.3s 1s;
  }
  .lerch-continue img {
    width: 100%;
    height: auto;
  }
  .section-continue.is-show .lerch-continue {
    bottom: -10%;
  }
  .section-continue.is-show .continue-inner::before {
    transform: scale(1);
  }
  .year-2019a {
    margin: 0 auto 0;
  }
  .lerch2019a {
    position: relative;
    margin-top: 15.5%;
    margin-right: auto;
    margin-left: 2%;
    aspect-ratio: 322/374;
    width: calc(279 / 375 * 100%);
  }
  .year-2019b {
    margin: calc(50 / 375 * 100%) auto 0;
  }
  .lerch2019b {
    position: relative;
    top: 0;
    left: 30%;
    right: 0;
    aspect-ratio: 322/314;
    width: calc(300 / 375 * 100%);
  }
  .lerch-curry {
    position: absolute;
    right: -4%;
    top: -12%;
    width: calc( 130 / 375 * 100%);
  }
  .year-2020a {
    margin: 0 auto 0;
  }
  .year-2020a .thumb {
    grid-area: thumb;
  }
  .year-2020a .flag {
    grid-area: flag;
  }
  .year-2020a .text {
    grid-area: text;
  }
  .lerch2020a {
    position: absolute;
    top: 10%;
    left: auto;
    right: -113%;
    aspect-ratio: 325/332;
    width: calc(325 / 548 * 100%);
  }
  .year-2020b.year-block {
    margin: calc(50 / 375 * 100%) auto 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 25% 1fr;
    grid-template-rows: auto auto auto;
    gap: 0px 4%;
    grid-template-areas: "lerch2020b lerch2020b" "flag thumb" "text text";
  }
  .year-2020b.year-block .thumb {
    grid-area: thumb;
  }
  .year-2020b.year-block .flag {
    grid-area: flag;
  }
  .year-2020b.year-block .text {
    grid-area: text;
  }
  .year-2020b.year-block .lerch2020b {
    grid-area: lerch2020b;
  }
  .lerch2020b {
    margin: 0 auto;
    aspect-ratio: 553/256;
    width: calc(300 / 375 * 100%);
  }
  .year-2023 {
    margin: calc(10 / 375 * 100%) auto 0;
  }
  .year-2023 .thumb {
    grid-area: thumb;
  }
  .year-2023 .flag {
    grid-area: flag;
  }
  .year-2023 .text {
    grid-area: text;
  }
  .lerch2023 {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    aspect-ratio: 352/600;
    width: calc(352 / 375 * 100%);
  }
  .year-2024 {
    margin: calc(50 / 375 * 100%) auto 0;
  }
  .year-2024 .thumb {
    grid-area: thumb;
  }
  .year-2024 .flag {
    grid-area: flag;
  }
  .year-2024 .text {
    grid-area: text;
  }
  .year-2024-iroiro {
    position: relative;
    margin: calc(175 / 375 * 100%) auto 0 auto;
    aspect-ratio: 375/800;
    width: 92%;
  }
  .year-2024-iroiro .thumb01 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(350 / 375 * 100%);
    z-index: 2;
  }
  .year-2024-iroiro .thumb02 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(200 / 375 * 100%);
    z-index: 2;
  }
  .year-2024-iroiro .thumb03 {
    position: absolute;
    top: 33%;
    left: auto;
    right: 0;
    width: calc(250 / 375 * 100%);
    z-index: 2;
  }
  .lerch2024a {
    position: absolute;
    top: -29.5%;
    right: -16%;
    z-index: 1;
    aspect-ratio: 410/530;
    width: calc(334 / 375 * 100%);
  }
  .lerch2024b {
    position: absolute;
    bottom: -17%;
    right: -9%;
    z-index: 3;
    aspect-ratio: 334/480;
    width: calc(286 / 375 * 100%);
  }
  .year-2025 {
    margin: calc(120 / 375 * 100%) auto 0;
  }
  .lerch2025 {
    position: relative;
    z-index: 2;
    aspect-ratio: 270/520;
    width: calc(275 / 375 * 100%);
  }
  .next-section {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
  }
  .next-lerch {
    position: relative;
    right: -30%;
    width: calc(340 / 375 * 100%);
  }
  .next-lerch img {
    width: 100%;
    height: auto;
    display: block;
  }
  .next-balloon {
    position: absolute;
    left: 0;
    top: 53%;
    z-index: 2;
    width: calc(216 / 375 * 100%);
  }
  .next-balloon img {
    width: 100%;
    height: auto;
    display: block;
  }
  .bottom-space {
    margin-top: 28%;
    width: 100%;
    aspect-ratio: 1400/496;
  }
  .l-footer {
    position: static;
    padding: 0.5em;
    width: 100%;
    border-top: 1px solid var(--text-black);
  }
  .copy {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    text-align: left;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .big-lerch-shadow {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1400/863;
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
  }
  .big-lerch-shadow::after {
    position: absolute;
    bottom: -4%;
    right: -20%;
    display: block;
    width: calc(825 / 1400 * 100%);
    aspect-ratio: 825/68;
    opacity: 0;
    content: "";
    border-radius: 825.237px;
    opacity: 0.18;
    background: radial-gradient(50% 50% at 50% 50%, #000 45.19%, #FFF 100%);
    mix-blend-mode: multiply;
    filter: blur(1.198682785px);
  }
  .big-lerch {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: min(100svh, 1080px);
    aspect-ratio: 1400/863;
    z-index: 2000;
    transform: translateY(-200%) translateX(0) scale(1);
  }
  .big-lerch-fukidashi {
    position: absolute;
    right: 36%;
    top: 31%;
    width: calc(388 / 1400 * 100%);
    z-index: 2002;
    opacity: 0;
  }
  .big-lerch-fukidashi img {
    width: 100%;
    height: auto;
  }
  .big-lerch-chara {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2001;
    width: calc(760 / 1400 * 100%);
    aspect-ratio: 760/863;
  }
  .big-lerch-chara img {
    width: 100%;
    height: auto;
  }
}
/*************************************
* 追従
***************************************/
.fixed-follow {
  position: fixed;
  bottom: 40px;
  right: 0;
  width: calc(298 / 1400 * 100%);
  z-index: 999;
  visibility: hidden;
  pointer-events: none;
  transition: ease-in-out opacity 0.3s;
}
.fixed-follow.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.fixed-follow a {
  display: block;
  aspect-ratio: 298/210;
}
.fixed-follow img {
  width: 100%;
  height: auto;
}

.fixed-follow-link:hover, .fixed-follow-link:focus {
  opacity: 0.6;
}

.sns-g {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: calc(51 / 1400 * 100%);
  z-index: 999;
}
.sns-g li {
  margin-top: 20px;
  width: 52px;
}
.sns-g li img {
  width: 100%;
  height: auto;
}
.sns-g li a:hover, .sns-g li a:focus {
  opacity: 0.6;
}

@media (max-width: 767px) {
  .fixed-follow {
    width: 45%;
  }
  .sns-g {
    top: 10px;
    transform: translateY(0);
    display: flex;
    gap: 20px;
  }
  .sns-g li {
    margin: 0;
    width: 40px;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .fixed-follow {
    width: calc(100 / 375 * 100%);
  }
}
/*************************
* animation
**************************/
.js-animation[data-type=fadeIn] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=fadeIn].is-show {
  visibility: visible;
  opacity: 1;
}

.js-animation[data-type=purun] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=purun].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: purun 0.8s linear 0s infinite;
          animation: purun 0.8s linear 0s infinite;
}

@-webkit-keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

@keyframes purun {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
.js-animation[data-type=korokoro] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=korokoro].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: korokoro 1.5s linear 0s infinite;
          animation: korokoro 1.5s linear 0s infinite;
}

@-webkit-keyframes korokoro {
  0% {
    transform: translate(0%, 0%);
  }
  5% {
    transform: translate(10%, 0%) rotate(10deg);
  }
  25% {
    transform: translate(20%, 0%) rotate(20deg);
  }
  30% {
    transform: translate(-10%, 0%) rotate(-10deg);
  }
  35% {
    transform: translate(-15%, 0%) rotate(-15deg);
  }
  45% {
    transform: translate(10%, 0%) rotate(10deg);
  }
  50% {
    transform: translate(15%, 0%) rotate(15deg);
  }
  60% {
    transform: translate(-5%, 0%) rotate(-5deg);
  }
  65% {
    transform: translate(-7%, 0%) rotate(-7deg);
  }
  75% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}

@keyframes korokoro {
  0% {
    transform: translate(0%, 0%);
  }
  5% {
    transform: translate(10%, 0%) rotate(10deg);
  }
  25% {
    transform: translate(20%, 0%) rotate(20deg);
  }
  30% {
    transform: translate(-10%, 0%) rotate(-10deg);
  }
  35% {
    transform: translate(-15%, 0%) rotate(-15deg);
  }
  45% {
    transform: translate(10%, 0%) rotate(10deg);
  }
  50% {
    transform: translate(15%, 0%) rotate(15deg);
  }
  60% {
    transform: translate(-5%, 0%) rotate(-5deg);
  }
  65% {
    transform: translate(-7%, 0%) rotate(-7deg);
  }
  75% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.js-animation[data-type=poyon-bounce] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=poyon-bounce].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: poyon-bounce 1s linear 0s infinite;
          animation: poyon-bounce 1s linear 0s infinite;
}

@-webkit-keyframes poyon-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-30px) scale(1.1);
  }
  70% {
    transform: translateY(-10px) scale(0.95);
  }
  85% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes poyon-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-30px) scale(1.1);
  }
  70% {
    transform: translateY(-10px) scale(0.95);
  }
  85% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.js-animation[data-type=pukapuka] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=pukapuka].is-show {
  visibility: visible;
  opacity: 1;
  animation: pukapuka 1.8s ease-in-out 0s infinite alternate-reverse;
}

@-webkit-keyframes pukapuka {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

@keyframes pukapuka {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}
.js-animation[data-type=jumpjump] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s linear;
  transition-property: opacity, visibility;
}

.js-animation[data-type=jumpjump].is-show {
  visibility: visible;
  opacity: 1;
  animation: jumpjump 0.3s ease 0s infinite alternate-reverse;
}

@-webkit-keyframes jumpjump {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-2%);
  }
  60% {
    transform: translateY(-4% px);
  }
}

@keyframes jumpjump {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-2%);
  }
  60% {
    transform: translateY(-4% px);
  }
}
.js-animation[data-type=purupuru] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=purupuru].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: purupuru 1s linear 0s infinite;
          animation: purupuru 1s linear 0s infinite;
}

@-webkit-keyframes purupuru {
  0% {
    transform: translate(0%, 0%);
  }
  20% {
    transform: translate(-5%, -4%) skew(1deg, 0deg);
  }
  50% {
    transform: translate(5%, 4%) skew(-3deg, 0deg);
  }
  65% {
    transform: translate(2%, -2%) skew(-3deg, 0deg);
  }
  80% {
    transform: translate(-2%, 2%) skew(2deg, 0deg);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

@keyframes purupuru {
  0% {
    transform: translate(0%, 0%);
  }
  20% {
    transform: translate(-5%, -4%) skew(1deg, 0deg);
  }
  50% {
    transform: translate(5%, 4%) skew(-3deg, 0deg);
  }
  65% {
    transform: translate(2%, -2%) skew(-3deg, 0deg);
  }
  80% {
    transform: translate(-2%, 2%) skew(2deg, 0deg);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
/* 神レルヒさんのアニメ　*/
@-webkit-keyframes god {
  0% {
    transform: translate(0%, 0%);
  }
  20% {
    transform: translate(-5%, -4%);
  }
  50% {
    transform: translate(5%, 4%);
  }
  65% {
    transform: translate(2%, -2%);
  }
  80% {
    transform: translate(-2%, 2%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes god {
  0% {
    transform: translate(0%, 0%);
  }
  20% {
    transform: translate(-5%, -4%);
  }
  50% {
    transform: translate(5%, 4%);
  }
  65% {
    transform: translate(2%, -2%);
  }
  80% {
    transform: translate(-2%, 2%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
.js-animation[data-type=god] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=god].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: god 10s linear 0s infinite;
          animation: god 10s linear 0s infinite;
}

/* 次回のレルヒさんのアニメ　*/
.js-animation[data-type=puyon],
.js-animation02[data-type=puyon] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=puyon].is-show,
.js-animation02[data-type=puyon].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: puyon 1s linear 0s 1;
          animation: puyon 1s linear 0s 1;
}

.js-animation[data-type=puyon-loop] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=puyon-loop].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: puyon 1s linear 0s infinite;
          animation: puyon 1s linear 0s infinite;
}

@-webkit-keyframes puyon {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  60% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  70% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

@keyframes puyon {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  60% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  70% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
/* 寝転がるレルヒさん用*/
/* 横からスライド左*/
.js-animation[data-type=slideInLeft] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease;
  transition-property: opacity, visibility;
}

.js-animation[data-type=slideInLeft].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideIn {
  0% {
    transform: translate(180px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes slideIn {
  0% {
    transform: translate(180px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* 
スコップを持ってスキーをするレルヒさん
横からスライド左*/
.js-animation[data-type=slideInLeft02] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s linear;
  transition-property: opacity, visibility;
}

.js-animation[data-type=slideInLeft02].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: slideIn02 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideIn02 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideIn02 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideIn02 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@media (max-width: 767px) {
  @-webkit-keyframes slideIn02 {
    0% {
      transform: translate(300px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes slideIn02 {
    0% {
      transform: translate(300px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
}
/* 
下から上へスライド*/
@-webkit-keyframes slideUpToTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideUpToTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.js-animation[data-type=slideUpToTop] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s linear;
  transition-property: opacity, visibility;
}

.js-animation[data-type=slideUpToTop].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: slideUpToTop 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideUpToTop 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 
くつろいでるレルヒさん
横からスライド右*/
.js-animation[data-type=slideInRight] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s linear;
  transition-property: opacity, visibility;
}

.js-animation[data-type=slideInRight].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideInRight {
  0% {
    transform: translateX(-180px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(-180px);
  }
  100% {
    transform: translateX(0);
  }
}
@media (max-width: 767px) {
  @-webkit-keyframes slideInRight {
    0% {
      transform: translate(-180px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes slideInRight {
    0% {
      transform: translate(-180px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
}
/* スキージャンプ　レルヒ */
.js-animation[data-type=slideUp] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s linear;
  transition-property: opacity, visibility;
}

.js-animation[data-type=slideUp].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: slideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideUp {
  0% {
    transform: scale(0.5);
  }
  60% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideUp {
  0% {
    transform: scale(0.5);
  }
  60% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
/* 力持ち　レルヒ */
.js-animation[data-type=power] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=power].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: slideUpToBottom 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
          animation: slideUpToBottom 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@-webkit-keyframes slideUpToBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideUpToBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.js-animation[data-type=jump-move] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=jump-move].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: jumpAndMove 0.8s linear infinite;
          animation: jumpAndMove 0.8s linear infinite;
}

@-webkit-keyframes jumpAndMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(2%) translateY(-2%);
  }
  50% {
    transform: translateX(4%) translateY(0);
  }
  75% {
    transform: translateX(2%) translateY(-2%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes jumpAndMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(2%) translateY(-2%);
  }
  50% {
    transform: translateX(4%) translateY(0);
  }
  75% {
    transform: translateX(2%) translateY(-2%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
.js-animation[data-type=sway] {
  visibility: hidden;
  opacity: 0;
  transition: 0.9s ease-out;
  transition-property: opacity, visibility;
}

.js-animation[data-type=sway].is-show {
  visibility: visible;
  opacity: 1;
  -webkit-animation: sway 6s ease-in-out infinite;
          animation: sway 6s ease-in-out infinite;
}

@-webkit-keyframes sway {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(-10px, -20px) rotate(-3deg);
  }
  40% {
    transform: translate(10px, -30px) rotate(2deg);
  }
  60% {
    transform: translate(-15px, -25px) rotate(-2deg);
  }
  80% {
    transform: translate(10px, -15px) rotate(3deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes sway {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(-10px, -20px) rotate(-3deg);
  }
  40% {
    transform: translate(10px, -30px) rotate(2deg);
  }
  60% {
    transform: translate(-15px, -25px) rotate(-2deg);
  }
  80% {
    transform: translate(10px, -15px) rotate(3deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
/*******************
* parallax
*******************/
body:not(.is-loaded) .bg-parallax .pl-mountain,
body:not(.is-loaded) .bg-parallax .pl-snow1,
body:not(.is-loaded) .bg-parallax .pl-snow2,
body:not(.is-loaded) .bg-parallax .pl-cloud1,
body:not(.is-loaded) .bg-parallax .pl-cloud2,
body:not(.is-loaded) .bg-parallax .pl-face,
body:not(.is-loaded) .bg-parallax .pl-daruma {
  opacity: 0;
}

body.is-loaded .bg-parallax .pl-mountain,
body.is-loaded .bg-parallax .pl-snow1,
body.is-loaded .bg-parallax .pl-snow2,
body.is-loaded .bg-parallax .pl-cloud1,
body.is-loaded .bg-parallax .pl-cloud2,
body.is-loaded .bg-parallax .pl-face,
body.is-loaded .bg-parallax .pl-daruma {
  opacity: 1;
}

.bg-parallax {
  padding-top: 6%;
  height: 100%;
  --bgHeight: 13184;
  --bgWidth:1400;
}
@media (max-width: 767px) {
  .bg-parallax {
    --bgWidth:750;
  }
}

.bg-parallax .pl-mountain,
.bg-parallax .pl-snow1,
.bg-parallax .pl-snow2,
.bg-parallax .pl-cloud1,
.bg-parallax .pl-cloud2,
.bg-parallax .pl-face,
.bg-parallax .pl-daruma {
  translate: unset !important;
  rotate: unset !important;
  scale: unset !important;
}

.pl-mountain {
  position: absolute;
  width: calc(282 / var(--bgWidth) * 100%);
}
.pl-mountain img {
  width: 100%;
  height: auto;
}
.pl-mountain.img01 {
  right: calc(40 / var(--bgWidth) * 100%);
  top: calc(8411 / var(--bgHeight) * 100%);
}
.pl-mountain.img02 {
  right: calc(469 / var(--bgWidth) * 100%);
  top: calc(12153 / var(--bgHeight) * 100%);
}
.pl-mountain.img03 {
  left: calc(30 / var(--bgWidth) * 100%);
  top: calc(10765 / var(--bgHeight) * 100%);
}
.pl-mountain.img04 {
  left: calc(497 / var(--bgWidth) * 100%);
  top: calc(10389 / var(--bgHeight) * 100%);
}
.pl-mountain.img05 {
  right: calc(345 / var(--bgWidth) * 100%);
  top: calc(9365 / var(--bgHeight) * 100%);
}
.pl-mountain.img06 {
  left: calc(435 / var(--bgWidth) * 100%);
  top: calc(8794 / var(--bgHeight) * 100%);
}
.pl-mountain.img07 {
  right: calc(355 / var(--bgWidth) * 100%);
  top: calc(8090 / var(--bgHeight) * 100%);
}
.pl-mountain.img08 {
  right: calc(516 / var(--bgWidth) * 100%);
  top: calc(6604 / var(--bgHeight) * 100%);
}
.pl-mountain.img09 {
  left: calc(98 / var(--bgWidth) * 100%);
  top: calc(7689 / var(--bgHeight) * 100%);
}
.pl-mountain.img10 {
  left: calc(206 / var(--bgWidth) * 100%);
  top: calc(4994 / var(--bgHeight) * 100%);
}
.pl-mountain.img11 {
  right: calc(10 / var(--bgWidth) * 100%);
  top: calc(5679 / var(--bgHeight) * 100%);
}
.pl-mountain.img12 {
  left: calc(15 / var(--bgWidth) * 100%);
  top: calc(4602 / var(--bgHeight) * 100%);
}
.pl-mountain.img13 {
  width: calc(500 / var(--bgWidth) * 100%);
  right: calc(62 / var(--bgWidth) * 100%);
  top: calc(4406 / var(--bgHeight) * 100%);
}
.pl-mountain.img14 {
  left: calc(3 / var(--bgWidth) * 100%);
  top: calc(3300 / var(--bgHeight) * 100%);
}
.pl-mountain.img15 {
  left: calc(123 / var(--bgWidth) * 100%);
  top: calc(3817 / var(--bgHeight) * 100%);
}
.pl-mountain.img16 {
  right: calc(114 / var(--bgWidth) * 100%);
  top: calc(2387 / var(--bgHeight) * 100%);
}
.pl-mountain.img17 {
  right: calc(317 / var(--bgWidth) * 100%);
  top: calc(1682 / var(--bgHeight) * 100%);
}
.pl-mountain.img18 {
  left: calc(61 / var(--bgWidth) * 100%);
  top: calc(847 / var(--bgHeight) * 100%);
}

.pl-daruma {
  position: absolute;
  width: calc(106 / var(--bgWidth) * 100%);
}
.pl-daruma img {
  width: 100%;
  height: auto;
}
.pl-daruma.img01 {
  right: calc(232 / var(--bgWidth) * 100%);
  top: calc(1899 / var(--bgHeight) * 100%);
}
.pl-daruma.img02 {
  right: calc(581 / var(--bgWidth) * 100%);
  top: calc(2299 / var(--bgHeight) * 100%);
}
.pl-daruma.img03 {
  left: calc(257 / var(--bgWidth) * 100%);
  top: calc(3007 / var(--bgHeight) * 100%);
}
.pl-daruma.img04 {
  left: calc(596 / var(--bgWidth) * 100%);
  top: calc(3791 / var(--bgHeight) * 100%);
}
.pl-daruma.img05 {
  left: calc(65 / var(--bgWidth) * 100%);
  top: calc(5733 / var(--bgHeight) * 100%);
}
.pl-daruma.img06 {
  left: calc(248 / var(--bgWidth) * 100%);
  top: calc(6721 / var(--bgHeight) * 100%);
}
.pl-daruma.img07 {
  left: calc(430 / var(--bgWidth) * 100%);
  top: calc(7826 / var(--bgHeight) * 100%);
}
.pl-daruma.img08 {
  left: calc(725 / var(--bgWidth) * 100%);
  top: calc(9974 / var(--bgHeight) * 100%);
}
.pl-daruma.img09 {
  left: calc(63 / var(--bgWidth) * 100%);
  top: calc(12585 / var(--bgHeight) * 100%);
}
.pl-daruma.img10 {
  right: calc(62 / var(--bgWidth) * 100%);
  top: calc(6226 / var(--bgHeight)* 100%);
}

.pl-cloud1 {
  position: absolute;
  width: calc(198 / var(--bgWidth) * 100%);
}
.pl-cloud1.small {
  width: calc(128 / var(--bgWidth) * 100%);
}
.pl-cloud1 img {
  width: 100%;
  height: auto;
}
.pl-cloud1.img01 {
  left: calc(569 / var(--bgWidth) * 100%);
  top: calc(1513 / var(--bgHeight) * 100%);
}
.pl-cloud1.img02 {
  left: calc(123 / var(--bgWidth) * 100%);
  top: calc(1982 / var(--bgHeight) * 100%);
}
.pl-cloud1.img03 {
  left: calc(586 / var(--bgWidth) * 100%);
  top: calc(12617 / var(--bgHeight) * 100%);
}
.pl-cloud1.img04 {
  left: calc(48 / var(--bgWidth) * 100%);
  top: calc(12141 / var(--bgHeight) * 100%);
}
.pl-cloud1.img05 {
  right: calc(346 / var(--bgWidth) * 100%);
  top: calc(11801 / var(--bgHeight) * 100%);
}
.pl-cloud1.img06 {
  left: calc(367 / var(--bgWidth) * 100%);
  top: calc(11170 / var(--bgHeight) * 100%);
}
.pl-cloud1.img07 {
  right: calc(69 / var(--bgWidth) * 100%);
  top: calc(10980 / var(--bgHeight) * 100%);
}
.pl-cloud1.img08 {
  left: calc(74 / var(--bgWidth) * 100%);
  top: calc(10420 / var(--bgHeight) * 100%);
}
.pl-cloud1.img09 {
  left: calc(270 / var(--bgWidth) * 100%);
  top: calc(9332 / var(--bgHeight) * 100%);
}
.pl-cloud1.img10 {
  right: calc(151 / var(--bgWidth) * 100%);
  top: calc(9099 / var(--bgHeight) * 100%);
}
.pl-cloud1.img11 {
  right: calc(174 / var(--bgWidth) * 100%);
  top: calc(9771 / var(--bgHeight) * 100%);
}
.pl-cloud1.img12 {
  left: calc(478 / var(--bgWidth) * 100%);
  top: calc(8505 / var(--bgHeight) * 100%);
}
.pl-cloud1.img13 {
  right: calc(531 / var(--bgWidth) * 100%);
  top: calc(7672 / var(--bgHeight) * 100%);
}
.pl-cloud1.img14 {
  right: calc(58 / var(--bgWidth) * 100%);
  top: calc(7532 / var(--bgHeight) * 100%);
}
.pl-cloud1.img15 {
  right: calc(206 / var(--bgWidth) * 100%);
  top: calc(6824 / var(--bgHeight) * 100%);
}
.pl-cloud1.img16 {
  left: calc(423 / var(--bgWidth) * 100%);
  top: calc(6322 / var(--bgHeight) * 100%);
}
.pl-cloud1.img17 {
  right: calc(448 / var(--bgWidth) * 100%);
  top: calc(4839 / var(--bgHeight) * 100%);
}
.pl-cloud1.img18 {
  right: calc(9 / var(--bgWidth) * 100%);
  top: calc(5180 / var(--bgHeight) * 100%);
}
.pl-cloud1.img19 {
  left: calc(225 / var(--bgWidth) * 100%);
  top: calc(4728 / var(--bgHeight) * 100%);
}
.pl-cloud1.img20 {
  left: calc(445 / var(--bgWidth) * 100%);
  top: calc(3664 / var(--bgHeight) * 100%);
}
.pl-cloud1.img21 {
  right: calc(370 / var(--bgWidth) * 100%);
  top: calc(2945 / var(--bgHeight) * 100%);
}
.pl-cloud1.img22 {
  left: calc(358 / var(--bgWidth) * 100%);
  top: calc(2381 / var(--bgHeight) * 100%);
}
.pl-cloud1.img23 {
  left: calc(71 / var(--bgWidth) * 100%);
  top: calc(1350 / var(--bgHeight) * 100%);
}
.pl-cloud1.img24 {
  right: calc(182 / var(--bgWidth) * 100%);
  top: calc(1209 / var(--bgHeight) * 100%);
}
.pl-cloud1.img25 {
  left: calc(363 / var(--bgWidth) * 100%);
  top: calc(1083 / var(--bgHeight) * 100%);
}
.pl-cloud1.img26 {
  right: calc(55 / var(--bgWidth) * 100%);
  top: calc(586 / var(--bgHeight) * 100%);
}
.pl-cloud1.img27 {
  left: calc(4 / var(--bgWidth) * 100%);
  top: calc(193 / var(--bgHeight) * 100%);
}

.pl-cloud2 {
  position: absolute;
  width: calc(100 / var(--bgWidth) * 100%);
}
.pl-cloud2 img {
  width: 100%;
  height: auto;
}
.pl-cloud2.img01 {
  top: calc(117 / var(--bgHeight) * 100%);
  left: calc(261 / var(--bgWidth) * 100%);
}
.pl-cloud2.img02 {
  top: calc(1230 / var(--bgHeight) * 100%);
  left: calc(640 / var(--bgWidth) * 100%);
}
.pl-cloud2.img03 {
  top: calc(12434 / var(--bgHeight) * 100%);
  right: calc(120 / var(--bgWidth) * 100%);
}
.pl-cloud2.img04 {
  top: calc(12910 / var(--bgHeight) * 100%);
  left: calc(46 / var(--bgWidth) * 100%);
}
.pl-cloud2.img05 {
  top: calc(11862 / var(--bgHeight) * 100%);
  left: calc(260 / var(--bgWidth) * 100%);
}
.pl-cloud2.img06 {
  top: calc(11472 / var(--bgHeight) * 100%);
  left: calc(81 / var(--bgWidth) * 100%);
}
.pl-cloud2.img07 {
  top: calc(10864 / var(--bgHeight) * 100%);
  right: calc(228 / var(--bgWidth) * 100%);
}
.pl-cloud2.img08 {
  top: calc(11497 / var(--bgHeight) * 100%);
  left: calc(570 / var(--bgWidth) * 100%);
}
.pl-cloud2.img09 {
  top: calc(10686 / var(--bgHeight) * 100%);
  left: calc(81 / var(--bgWidth) * 100%);
}
.pl-cloud2.img10 {
  top: calc(10232 / var(--bgHeight) * 100%);
  right: calc(481 / var(--bgWidth) * 100%);
}
.pl-cloud2.img11 {
  top: calc(10186 / var(--bgHeight) * 100%);
  right: calc(66 / var(--bgWidth) * 100%);
}
.pl-cloud2.img12 {
  top: calc(10021 / var(--bgHeight) * 100%);
  left: calc(52 / var(--bgWidth) * 100%);
}
.pl-cloud2.img13 {
  top: calc(9649 / var(--bgHeight) * 100%);
  left: calc(497 / var(--bgWidth) * 100%);
}
.pl-cloud2.img14 {
  top: calc(9023 / var(--bgHeight) * 100%);
  right: calc(451 / var(--bgWidth) * 100%);
}
.pl-cloud2.img15 {
  left: calc(52 / var(--bgWidth) * 100%);
  top: calc(8782 / var(--bgHeight) * 100%);
}
.pl-cloud2.img16 {
  left: calc(76 / var(--bgWidth) * 100%);
  top: calc(8632 / var(--bgHeight) * 100%);
}
.pl-cloud2.img17 {
  right: calc(303 / var(--bgWidth) * 100%);
  top: calc(7890 / var(--bgHeight) * 100%);
}
.pl-cloud2.img18 {
  left: calc(260 / var(--bgWidth) * 100%);
  top: calc(8252 / var(--bgHeight) * 100%);
}
.pl-cloud2.img19 {
  left: calc(293 / var(--bgWidth) * 100%);
  top: calc(8947 / var(--bgHeight) * 100%);
}
.pl-cloud2.img20 {
  left: calc(639 / var(--bgWidth) * 100%);
  top: calc(8289 / var(--bgHeight) * 100%);
}
.pl-cloud2.img21 {
  right: calc(30 / var(--bgWidth) * 100%);
  top: calc(7875 / var(--bgHeight) * 100%);
}
.pl-cloud2.img22 {
  left: calc(38 / var(--bgWidth) * 100%);
  top: calc(7617 / var(--bgHeight) * 100%);
}
.pl-cloud2.img23 {
  right: calc(141 / var(--bgWidth) * 100%);
  top: calc(7198 / var(--bgHeight) * 100%);
}
.pl-cloud2.img24 {
  right: calc(457 / var(--bgWidth) * 100%);
  top: calc(7378 / var(--bgHeight) * 100%);
}
.pl-cloud2.img25 {
  left: calc(226 / var(--bgWidth) * 100%);
  top: calc(7001 / var(--bgHeight) * 100%);
}
.pl-cloud2.img26 {
  right: calc(306 / var(--bgWidth) * 100%);
  top: calc(6409 / var(--bgHeight) * 100%);
}
.pl-cloud2.img27 {
  right: calc(636 / var(--bgWidth) * 100%);
  top: calc(5361 / var(--bgHeight) * 100%);
}
.pl-cloud2.img28 {
  right: calc(464 / var(--bgWidth) * 100%);
  top: calc(4069 / var(--bgHeight) * 100%);
}
.pl-cloud2.img29 {
  left: calc(586 / var(--bgWidth) * 100%);
  top: calc(4575 / var(--bgHeight) * 100%);
}
.pl-cloud2.img30 {
  right: calc(83 / var(--bgWidth) * 100%);
  top: calc(3367 / var(--bgHeight) * 100%);
}
.pl-cloud2.img31 {
  left: calc(49 / var(--bgWidth) * 100%);
  top: calc(2284 / var(--bgHeight) * 100%);
}
.pl-cloud2.img32 {
  right: calc(382 / var(--bgWidth) * 100%);
  top: calc(2660 / var(--bgHeight) * 100%);
}
.pl-cloud2.img33 {
  left: calc(474 / var(--bgWidth) * 100%);
  top: calc(1754 / var(--bgHeight) * 100%);
}
.pl-cloud2.img34 {
  right: calc(10 / var(--bgWidth) * 100%);
  top: calc(1336 / var(--bgHeight) * 100%);
}
.pl-cloud2.img35 {
  left: calc(553 / var(--bgWidth) * 100%);
  top: calc(928 / var(--bgHeight) * 100%);
}

/* レルヒさん顔の雲 */
.pl-face {
  position: absolute;
  width: calc(93 / var(--bgWidth) * 100%);
}
.pl-face img {
  width: 100%;
  height: auto;
}
.pl-face.img01 {
  right: calc(287 / var(--bgWidth) * 100%);
  top: calc(500 / var(--bgHeight) * 100%);
}
.pl-face.img02 {
  left: calc(242 / var(--bgWidth) * 100%);
  top: calc(2684 / var(--bgHeight) * 100%);
}
.pl-face.img03 {
  right: calc(231 / var(--bgWidth) * 100%);
  top: calc(5467 / var(--bgHeight) * 100%);
}
.pl-face.img04 {
  left: calc(30 / var(--bgWidth) * 100%);
  top: calc(9415 / var(--bgHeight) * 100%);
}

.pl-snow1 {
  position: absolute;
  width: calc(196 / var(--bgWidth) * 100%);
}
.pl-snow1.small {
  width: calc(153 / var(--bgWidth) * 100%);
}
.pl-snow1.small02 {
  width: calc(173 / var(--bgWidth) * 100%);
}
.pl-snow1 img {
  width: 100%;
  height: auto;
}
.pl-snow1.img01 {
  left: calc(64 / var(--bgWidth) * 100%);
  top: calc(2441 / var(--bgHeight) * 100%);
}
.pl-snow1.img02 {
  right: calc(128 / var(--bgWidth) * 100%);
  top: calc(4674 / var(--bgHeight) * 100%);
}
.pl-snow1.img03 {
  right: calc(38 / var(--bgWidth) * 100%);
  top: calc(1472 / var(--bgHeight) * 100%);
}
.pl-snow1.img04 {
  left: calc(320 / var(--bgWidth) * 100%);
  top: calc(2080 / var(--bgHeight) * 100%);
}
.pl-snow1.img05 {
  left: calc(397 / var(--bgWidth) * 100%);
  top: calc(1973 / var(--bgHeight) * 100%);
}
.pl-snow1.img06 {
  right: calc(488 / var(--bgWidth) * 100%);
  top: calc(5498 / var(--bgHeight) * 100%);
}
.pl-snow1.img07 {
  left: calc(405 / var(--bgWidth) * 100%);
  top: calc(4098 / var(--bgHeight) * 100%);
}
.pl-snow1.img08 {
  right: calc(97 / var(--bgWidth) * 100%);
  top: calc(12097 / var(--bgHeight) * 100%);
}
.pl-snow1.img09 {
  left: calc(493 / var(--bgWidth) * 100%);
  top: calc(12245 / var(--bgHeight) * 100%);
}
.pl-snow1.img10 {
  left: calc(193 / var(--bgWidth) * 100%);
  top: calc(11493 / var(--bgHeight) * 100%);
}
.pl-snow1.img11 {
  right: calc(290 / var(--bgWidth) * 100%);
  top: calc(11180 / var(--bgHeight) * 100%);
}
.pl-snow1.img12 {
  left: calc(306 / var(--bgWidth) * 100%);
  top: calc(10835 / var(--bgHeight) * 100%);
}
.pl-snow1.img13 {
  right: calc(3 / var(--bgWidth) * 100%);
  top: calc(10361 / var(--bgHeight) * 100%);
}
.pl-snow1.img14 {
  left: calc(206 / var(--bgWidth) * 100%);
  top: calc(9691 / var(--bgHeight) * 100%);
}
.pl-snow1.img15 {
  right: calc(320 / var(--bgWidth) * 100%);
  top: calc(8281 / var(--bgHeight) * 100%);
}
.pl-snow1.img16 {
  right: calc(28 / var(--bgWidth) * 100%);
  top: calc(9433 / var(--bgHeight) * 100%);
}
.pl-snow1.img17 {
  left: calc(446 / var(--bgWidth) * 100%);
  top: calc(8989 / var(--bgHeight) * 100%);
}
.pl-snow1.img18 {
  left: calc(383 / var(--bgWidth) * 100%);
  top: calc(7474 / var(--bgHeight) * 100%);
}
.pl-snow1.img19 {
  left: calc(26 / var(--bgWidth) * 100%);
  top: calc(7872 / var(--bgHeight) * 100%);
}
.pl-snow1.img20 {
  right: calc(134 / var(--bgWidth) * 100%);
  top: calc(5827 / var(--bgHeight) * 100%);
}
.pl-snow1.img21 {
  left: calc(262 / var(--bgWidth) * 100%);
  top: calc(5180 / var(--bgHeight) * 100%);
}
.pl-snow1.img22 {
  left: calc(35 / var(--bgWidth) * 100%);
  top: calc(6172 / var(--bgHeight) * 100%);
}
.pl-snow1.img23 {
  left: calc(178 / var(--bgWidth) * 100%);
  top: calc(3367 / var(--bgHeight) * 100%);
}
.pl-snow1.img24 {
  right: calc(7 / var(--bgWidth) * 100%);
  top: calc(2587 / var(--bgHeight) * 100%);
}
.pl-snow1.img25 {
  right: calc(71 / var(--bgWidth) * 100%);
  top: calc(3850 / var(--bgHeight) * 100%);
}
.pl-snow1.img26 {
  right: calc(339 / var(--bgWidth) * 100%);
  top: calc(3178 / var(--bgHeight) * 100%);
}
.pl-snow1.img27 {
  left: calc(474 / var(--bgWidth) * 100%);
  top: calc(2862 / var(--bgHeight) * 100%);
}
.pl-snow1.img28 {
  left: calc(24 / var(--bgWidth) * 100%);
  top: calc(1680 / var(--bgHeight) * 100%);
}
.pl-snow1.img29 {
  right: calc(523 / var(--bgWidth) * 100%);
  top: calc(1270 / var(--bgHeight) * 100%);
}
.pl-snow1.img30 {
  left: calc(228 / var(--bgWidth) * 100%);
  top: calc(525 / var(--bgHeight) * 100%);
}
.pl-snow1.img31 {
  right: calc(344 / var(--bgWidth) * 100%);
  top: calc(881 / var(--bgHeight) * 100%);
}

.pl-snow2 {
  position: absolute;
  width: calc(64 / var(--bgWidth) * 100%);
}
.pl-snow2 img {
  width: 100%;
  height: auto;
}
.pl-snow2.img01 {
  right: calc(319 / var(--bgWidth) * 100%);
  top: calc(1460 / var(--bgHeight) * 100%);
}
.pl-snow2.img02 {
  left: calc(353 / var(--bgWidth) * 100%);
  top: calc(1346 / var(--bgHeight) * 100%);
}
.pl-snow2.img03 {
  right: calc(46 / var(--bgWidth) * 100%);
  top: calc(12914 / var(--bgHeight) * 100%);
}
.pl-snow2.img04 {
  right: calc(335 / var(--bgWidth) * 100%);
  top: calc(12575 / var(--bgHeight) * 100%);
}
.pl-snow2.img05 {
  left: calc(412 / var(--bgWidth) * 100%);
  top: calc(12104 / var(--bgHeight) * 100%);
}
.pl-snow2.img06 {
  left: calc(321 / var(--bgWidth) * 100%);
  top: calc(11721 / var(--bgHeight) * 100%);
}
.pl-snow2.img07 {
  left: calc(320 / var(--bgWidth) * 100%);
  top: calc(11419 / var(--bgHeight) * 100%);
}
.pl-snow2.img08 {
  right: calc(11 / var(--bgWidth) * 100%);
  top: calc(11312 / var(--bgHeight) * 100%);
}
.pl-snow2.img09 {
  right: calc(235 / var(--bgWidth) * 100%);
  top: calc(11138 / var(--bgHeight) * 100%);
}
.pl-snow2.img10 {
  left: calc(590 / var(--bgWidth) * 100%);
  top: calc(10870 / var(--bgHeight) * 100%);
}
.pl-snow2.img11 {
  right: calc(22 / var(--bgWidth) * 100%);
  top: calc(10678 / var(--bgHeight) * 100%);
}
.pl-snow2.img12 {
  left: calc(320 / var(--bgWidth) * 100%);
  top: calc(10541 / var(--bgHeight) * 100%);
}
.pl-snow2.img13 {
  right: calc(45 / var(--bgWidth) * 100%);
  top: calc(10064 / var(--bgHeight) * 100%);
}
.pl-snow2.img14 {
  left: calc(49 / var(--bgWidth) * 100%);
  top: calc(9771 / var(--bgHeight) * 100%);
}
.pl-snow2.img15 {
  left: calc(362 / var(--bgWidth) * 100%);
  top: calc(10088 / var(--bgHeight) * 100%);
}
.pl-snow2.img16 {
  left: calc(650 / var(--bgWidth) * 100%);
  top: calc(9739 / var(--bgHeight) * 100%);
}
.pl-snow2.img17 {
  right: calc(540 / var(--bgWidth) * 100%);
  top: calc(9597 / var(--bgHeight) * 100%);
}
.pl-snow2.img18 {
  left: calc(128 / var(--bgWidth) * 100%);
  top: calc(9060 / var(--bgHeight) * 100%);
}
.pl-snow2.img19 {
  right: calc(64 / var(--bgWidth) * 100%);
  top: calc(9023 / var(--bgHeight) * 100%);
}
.pl-snow2.img20 {
  right: calc(408 / var(--bgWidth) * 100%);
  top: calc(8662 / var(--bgHeight) * 100%);
}
.pl-snow2.img21 {
  left: calc(52 / var(--bgWidth) * 100%);
  top: calc(8414 / var(--bgHeight) * 100%);
}
.pl-snow2.img22 {
  left: calc(316 / var(--bgWidth) * 100%);
  top: calc(8051 / var(--bgHeight) * 100%);
}
.pl-snow2.img23 {
  right: calc(221 / var(--bgWidth) * 100%);
  top: calc(7413 / var(--bgHeight) * 100%);
}
.pl-snow2.img24 {
  right: calc(114 / var(--bgWidth) * 100%);
  top: calc(7763 / var(--bgHeight) * 100%);
}
.pl-snow2.img25 {
  left: calc(7106 / var(--bgWidth) * 100%);
  top: calc(671 / var(--bgHeight) * 100%);
}
.pl-snow2.img26 {
  left: calc(226 / var(--bgWidth) * 100%);
  top: calc(7378 / var(--bgHeight) * 100%);
}
.pl-snow2.img27 {
  left: calc(469 / var(--bgWidth) * 100%);
  top: calc(6267 / var(--bgHeight) * 100%);
}
.pl-snow2.img28 {
  left: calc(440 / var(--bgWidth) * 100%);
  top: calc(5501 / var(--bgHeight) * 100%);
}
.pl-snow2.img29 {
  left: calc(404 / var(--bgWidth) * 100%);
  top: calc(5933 / var(--bgHeight) * 100%);
}
.pl-snow2.img30 {
  left: calc(690 / var(--bgWidth) * 100%);
  top: calc(5796 / var(--bgHeight) * 100%);
}
.pl-snow2.img31 {
  right: calc(42 / var(--bgWidth) * 100%);
  top: calc(5565 / var(--bgHeight) * 100%);
}
.pl-snow2.img32 {
  right: calc(562 / var(--bgWidth) * 100%);
  top: calc(4441 / var(--bgHeight) * 100%);
}
.pl-snow2.img33 {
  right: calc(364 / var(--bgWidth) * 100%);
  top: calc(5148 / var(--bgHeight) * 100%);
}
.pl-snow2.img34 {
  left: calc(62 / var(--bgWidth) * 100%);
  top: calc(5294 / var(--bgHeight) * 100%);
}
.pl-snow2.img35 {
  left: calc(612 / var(--bgWidth) * 100%);
  top: calc(5087 / var(--bgHeight) * 100%);
}
.pl-snow2.img36 {
  left: calc(525 / var(--bgWidth) * 100%);
  top: calc(4819 / var(--bgHeight) * 100%);
}
.pl-snow2.img37 {
  left: calc(130 / var(--bgWidth) * 100%);
  top: calc(4297 / var(--bgHeight) * 100%);
}
.pl-snow2.img38 {
  right: calc(213 / var(--bgWidth) * 100%);
  top: calc(4204 / var(--bgHeight) * 100%);
}
.pl-snow2.img39 {
  left: calc(50 / var(--bgWidth) * 100%);
  top: calc(3555 / var(--bgHeight) * 100%);
}
.pl-snow2.img40 {
  right: calc(316 / var(--bgWidth) * 100%);
  top: calc(3469 / var(--bgHeight) * 100%);
}
.pl-snow2.img41 {
  left: calc(538 / var(--bgWidth) * 100%);
  top: calc(3303 / var(--bgHeight) * 100%);
}
.pl-snow2.img42 {
  right: calc(119 / var(--bgWidth) * 100%);
  top: calc(3017 / var(--bgHeight) * 100%);
}
.pl-snow2.img43 {
  left: calc(582 / var(--bgWidth) * 100%);
  top: calc(2668 / var(--bgHeight) * 100%);
}
.pl-snow2.img44 {
  left: calc(205 / var(--bgWidth) * 100%);
  top: calc(2202 / var(--bgHeight) * 100%);
}
.pl-snow2.img45 {
  right: calc(50 / var(--bgWidth) * 100%);
  top: calc(2125 / var(--bgHeight) * 100%);
}
.pl-snow2.img46 {
  right: calc(171 / var(--bgWidth) * 100%);
  top: calc(1680 / var(--bgHeight) * 100%);
}
.pl-snow2.img47 {
  left: calc(645 / var(--bgWidth) * 100%);
  top: calc(1918 / var(--bgHeight) * 100%);
}
.pl-snow2.img48 {
  left: calc(328 / var(--bgWidth) * 100%);
  top: calc(1633 / var(--bgHeight) * 100%);
}
.pl-snow2.img49 {
  right: calc(598 / var(--bgWidth) * 100%);
  top: calc(1106 / var(--bgHeight) * 100%);
}
.pl-snow2.img50 {
  right: calc(155 / var(--bgWidth) * 100%);
  top: calc(375 / var(--bgHeight) * 100%);
}
.pl-snow2.img51 {
  right: calc(155 / var(--bgWidth) * 100%);
  top: calc(993 / var(--bgHeight) * 100%);
}
.pl-snow2.img52 {
  left: calc(101 / var(--bgWidth) * 100%);
  top: calc(1177 / var(--bgHeight) * 100%);
}
.pl-snow2.img53 {
  right: calc(601 / var(--bgWidth) * 100%);
  top: calc(736 / var(--bgHeight) * 100%);
}
.pl-snow2.img54 {
  left: calc(41 / var(--bgWidth) * 100%);
  top: calc(401 / var(--bgHeight) * 100%);
}

/*******************
* modal
*******************/
.is-modal-open {
  overflow: hidden;
}

.modal {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  justify-content: center;
  align-items: center;
}

.micromodal-slide.data-modal .modal__container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 600px;
  max-height: 50vh;
}
.micromodal-slide.data-modal .modal__content {
  padding: 0px 10px;
  background: #FFFFFF;
  box-shadow: 0px 0px 250px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  border-radius: 8px;
}
.micromodal-slide.data-modal .modal__close {
  margin: 15px auto 0;
  display: block;
  text-align: center;
  padding: 0.5em 1.5em;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 14px;
  outline: #fff;
  border: 1px solid #fff;
  border-radius: 40px;
  color: #fff;
}
.micromodal-slide.data-modal .modal__close:before {
  margin-right: 0.5em;
  content: "✕";
}
.micromodal-slide.data-modal .modal__content {
  padding: 30px 40px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: auto;
}
.micromodal-slide.data-modal .modal-text {
  height: 16em;
  overflow: auto;
}
@media only screen and (max-width: 420px) and (orientation: portrait) {
  .micromodal-slide.data-modal .modal-text {
    height: 6em;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .micromodal-slide.data-modal .modal-text {
    height: 6em;
  }
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #000;
}
.modal-title + .modal-text {
  margin-top: 1em;
}

.modal-text {
  font-size: 16px;
  line-height: 1.75;
}
.modal-text > * + * {
  margin-top: 1em;
}

.micromodal-slide.prof-modal .modal__container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 966px;
  max-height: 100svh;
}
.micromodal-slide.prof-modal .modal__content {
  padding: calc(108 / 966 * 100%) 10px;
  overflow: hidden;
}
.micromodal-slide.prof-modal .modal__close {
  margin: 15px auto 0;
  display: block;
  text-align: center;
  padding: 0.5em 1.5em;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 14px;
  outline: #fff;
  border: 1px solid #fff;
  border-radius: 40px;
  color: #fff;
}
.micromodal-slide.prof-modal .modal__close:before {
  margin-right: 0.5em;
  content: "✕";
}
.modal-prof__content {
  position: relative;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  font-weight: 700;
  line-height: 160%;
  width: 100%;
  height: 100%;
  padding: calc(96 / 966 * 100%) calc(58  / 966 * 100%);
  background: #FCF5E3;
  border-radius: 64px;
}

.modal-prof-lerch-sp {
  display: none;
}

.modal-prof-lerch {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  width: calc(458 / 966 * 100%);
}
.modal-prof-lerch img {
  width: 100%;
  height: auto;
}

.modal-prof-left {
  width: 56%;
}

.modal-prof-title {
  margin: 0 auto;
  width: calc(224 / 450 * 100%);
}
.modal-prof-title img {
  width: 100%;
  height: auto;
}

.modal-prof-text {
  margin-top: calc(40 / 450 * 100%);
  max-height: 36.5vh;
  overflow: auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.modal-prof-text::-webkit-scrollbar {
  width: 10px;
}
.modal-prof-text::-webkit-scrollbar-track {
  background-color: beige;
}
.modal-prof-text::-webkit-scrollbar-thumb {
  background: rgba(255, 217, 0, 0.5);
  border-radius: 8px;
}

.modal-prof-info {
  display: flex;
  flex-wrap: wrap;
  font-family: "Zen Kaku Gothic New";
  font-size: 18px;
  font-size: min(1.28vw, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  border-top: 1px solid rgba(35, 24, 21, 0.3);
}
.modal-prof-info dt {
  padding: 0.85em 1em;
  width: 9em;
  border-bottom: 1px solid rgba(35, 24, 21, 0.3);
}
.modal-prof-info dd {
  padding: 0.85em 1em;
  width: calc(100% - 9em);
  border-bottom: 1px solid rgba(35, 24, 21, 0.3);
}

.modal-prof-list li {
  position: relative;
  padding-left: 1.5em;
}
.modal-prof-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

@media only screen and (max-width: 420px) and (orientation: portrait) {
  .modal-prof__content {
    padding: 10px calc(58  / 966 * 100%) 86px;
    border-radius: 32px;
  }
  .modal-prof-lerch {
    display: none;
  }
  .modal-prof-lerch-sp {
    display: block;
    position: absolute;
    top: 51%;
    z-index: 2;
    right: -2%;
    width: 66%;
    aspect-ratio: 823/1873;
    pointer-events: none;
  }
  .modal-prof-lerch-sp img {
    width: 100%;
    height: auto;
  }
  .modal-prof-left {
    width: 100%;
  }
  .modal-prof-text {
    font-family: "Zen Kaku Gothic New", sans-serif;
  }
  .modal-prof-info {
    font-size: 15px;
    font-size: min(4vw, 15px);
  }
  .modal-prof-info dt, .modal-prof-info dd {
    padding: 0.5em 0.75em;
  }
  .micromodal-slide.prof-modal .modal__overlay {
    padding: 20px 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .micromodal-slide.prof-modal .modal__close {
    margin-top: 0;
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    outline: var(--text-black);
    border: 1px solid var(--text-black);
    border-radius: 40px;
    color: var(--text-black);
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .modal-prof__content {
    padding: calc(70 / 966 * 100%) calc(58  / 966 * 100%) calc(96 / 966 * 100%);
    border-radius: 32px;
  }
  .modal-prof-lerch-sp {
    display: none;
  }
  .modal-prof-lerch {
    position: absolute;
    top: auto;
    bottom: 0;
    right: -2%;
    width: 38%;
    aspect-ratio: 9/13;
  }
  .modal-prof-left {
    width: 70%;
  }
  .modal-prof-text {
    font-family: "Zen Kaku Gothic New", sans-serif;
  }
  .modal-prof-info {
    font-size: 15px;
    font-size: min(4vw, 15px);
  }
  .modal-prof-info dt, .modal-prof-info dd {
    padding: 0.5em 0.75em;
  }
  .micromodal-slide.prof-modal .modal__close {
    position: absolute;
    bottom: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    outline: var(--text-black);
    border: 1px solid var(--text-black);
    border-radius: 40px;
    color: var(--text-black);
  }
}
/**************************\
  Demo Animation Style
\**************************/
@-webkit-keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes mmslideIn {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(10%);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5%);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5%);
  }
}
.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.no-js .js-animation {
  opacity: 1 !important;
  visibility: visible !important;
}
.no-js .js-animation[data-type=puyon], .no-js .js-animation02[data-type=puyon] {
  opacity: 1 !important;
  visibility: visible !important;
}
.no-js .section-continue .title-continue {
  opacity: 1;
  transform: scale(1);
  transition: linear opacity 0.1s 1s, linear transform 0.1s 1s;
}
.no-js .section-continue .text-continue {
  opacity: 1;
  transition: linear opacity 0.1s 1s;
}
.no-js .section-continue .lerch-continue {
  bottom: -5%;
}
.no-js .section-continue .continue-inner::before {
  transform: scale(1);
}
.no-js .lerch2011.lerch-image {
  background: url(../img/teaser/god.png) no-repeat center/contain;
}
.no-js .fixed-follow {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.noscript-message {
  padding: 1em;
  text-align: center;
  background-color: #fff;
}