@charset "UTF-8";
/* ==========================================
 Font
============================================*/
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght&display=swap";
/* ==========================================
 外部ライブラリ
============================================*/
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";
@import "https://office-ing.github.io/css/animate_v2.min.css";
@import "https://office-ing.github.io/css/helper-sm_v3.min.css";
@import "https://office-ing.github.io/css/base-sm_v6.min.css";
/* ==========================================
 Color
============================================*/
:root {
  --color-primary: #3362cd;
}

.text-primary {
  color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
}

:root {
  --color-secondary: #ffe33f;
}

.text-secondary {
  color: var(--color-secondary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

:root {
  --color-white: #ffffff;
}

.text-white {
  color: var(--color-white);
}

.bg-white {
  background-color: var(--color-white);
}

:root {
  --color-black: #000000;
}

.text-black {
  color: var(--color-black);
}

.bg-black {
  background-color: var(--color-black);
}

:root {
  --color-dark: #051f4f;
}

.text-dark {
  color: var(--color-dark);
}

.bg-dark {
  background-color: var(--color-dark);
}

:root {
  --color-navy: #21417b;
}

.text-navy {
  color: var(--color-navy);
}

.bg-navy {
  background-color: var(--color-navy);
}

:root {
  --color-line: #67c858;
}

.text-line {
  color: var(--color-line);
}

.bg-line {
  background-color: var(--color-line);
}

:root {
  --color-gold: #a28242;
}

.text-gold {
  color: var(--color-gold);
}

.bg-gold {
  background-color: var(--color-gold);
}

:root {
  --color-light-gold: #efd93f;
}

.text-light-gold {
  color: var(--color-light-gold);
}

.bg-light-gold {
  background-color: var(--color-light-gold);
}

:root {
  --color-blue: #0718f6;
}

.text-blue {
  color: var(--color-blue);
}

.bg-blue {
  background-color: var(--color-blue);
}

:root {
  --color-water: #38d7ff;
}

.text-water {
  color: var(--color-water);
}

.bg-water {
  background-color: var(--color-water);
}

:root {
  --color-beige: #f6f4f2;
}

.text-beige {
  color: var(--color-beige);
}

.bg-beige {
  background-color: var(--color-beige);
}

:root {
  --color-red: #cd0d0d;
}

.text-red {
  color: var(--color-red);
}

.bg-red {
  background-color: var(--color-red);
}

:root {
  --color-wine: #c62837;
}

.text-wine {
  color: var(--color-wine);
}

.bg-wine {
  background-color: var(--color-wine);
}

:root {
  --color-pink: #f15b77;
}

.text-pink {
  color: var(--color-pink);
}

.bg-pink {
  background-color: var(--color-pink);
}

:root {
  --color-yellow: #ffff64;
}

.text-yellow {
  color: var(--color-yellow);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

:root {
  --color-orange: #fc871e;
}

.text-orange {
  color: var(--color-orange);
}

.bg-orange {
  background-color: var(--color-orange);
}

:root {
  --color-green: #70ad47;
}

.text-green {
  color: var(--color-green);
}

.bg-green {
  background-color: var(--color-green);
}

:root {
  --color-container-shadow: #d9e5ed; /* コンテナ（コンテンツ領域）の影の色 */
  --color-text: #333333; /* 文字色 */
  --color-bg: #ffffff; /* 背景色 */
  --color-form-control-text: #333333; /* 入力欄の文字色 */
  --color-form-control-bg: #ffffff; /* 入力欄の背景色 */
  --color-form-control-border: #000000; /* 入力欄の枠色 */
  --color-placeholder: #494949; /* 入力欄のプレースホルダの色 */
  --color-footer-text: #ffffff; /* フッターの文字色 */
  --color-footer-bg: #000; /* フッターの背景色 */
  --color-pagetop-text: #ffffff; /* ページトップボタンの文字色 */
  --color-pagetop-bg: #000; /* ページトップボタンの背景色 */
}

:root {
  --color-subpage-title: #000000; /* タイトルの文字色 */
  --color-subpage-heading: #ffffff; /* 見出しの文字色 */
  --color-subpage-heading-bg: var(--bs-light); /* 見出しの背景色 */
  --color-subpage-heading-border1: silver; /* 見出しのボーダー色（薄） */
  --color-subpage-heading-border2: #012c55; /* 見出しのボーダー色（濃） */
}

:root {
  --font-default: "Noto Sans JP", serif;
}

.font-default {
  font-family: var(--font-default);
}

/* ==========================================
 Base
============================================*/
html {
  font-size: 62.5%;
}

body {
  --font-weight: 500;
}
@media screen and (min-width: 1000px) {
  body {
    font-size: 18px;
  }
}

.main {
  overflow-x: hidden;
}

button,
.btn {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ==========================================
 Layout
============================================*/
[style*="--w"] {
  width: min(100vw * var(--w) / 750, 1px * var(--w));
}

/* ==========================================
 Animation
============================================*/
[data-aos],
[data-aos]::before,
[data-aos]::after {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: var(--animation-duration, 1s);
          animation-duration: var(--animation-duration, 1s);
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

/* フェードインUP */
[data-aos=fadeInUp] {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, var(--fadeInUp-swing, 30px), 0);
            transform: translate3d(0, var(--fadeInUp-swing, 30px), 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, var(--fadeInUp-swing, 30px), 0);
            transform: translate3d(0, var(--fadeInUp-swing, 30px), 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
/* 横揺れ */
[data-aos=shakeIntervalX] {
  -webkit-animation-name: shakeIntervalX;
          animation-name: shakeIntervalX;
}

@-webkit-keyframes shakeIntervalX {
  0% {
    -webkit-transform: translate(2px, 0px);
            transform: translate(2px, 0px);
  }
  5% {
    -webkit-transform: translate(-2px, 0px);
            transform: translate(-2px, 0px);
  }
  10% {
    -webkit-transform: translate(2px, 0px);
            transform: translate(2px, 0px);
  }
  15% {
    -webkit-transform: translate(-2px, 0px);
            transform: translate(-2px, 0px);
  }
  20% {
    -webkit-transform: translate(2px, 0px);
            transform: translate(2px, 0px);
  }
  25% {
    -webkit-transform: translate(-2px, 0px);
            transform: translate(-2px, 0px);
  }
  30% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}

@keyframes shakeIntervalX {
  0% {
    -webkit-transform: translate(2px, 0px);
            transform: translate(2px, 0px);
  }
  5% {
    -webkit-transform: translate(-2px, 0px);
            transform: translate(-2px, 0px);
  }
  10% {
    -webkit-transform: translate(2px, 0px);
            transform: translate(2px, 0px);
  }
  15% {
    -webkit-transform: translate(-2px, 0px);
            transform: translate(-2px, 0px);
  }
  20% {
    -webkit-transform: translate(2px, 0px);
            transform: translate(2px, 0px);
  }
  25% {
    -webkit-transform: translate(-2px, 0px);
            transform: translate(-2px, 0px);
  }
  30% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
/* アップダウン */
[data-aos=up-down] {
  -webkit-animation-name: up-down;
          animation-name: up-down;
}

@-webkit-keyframes up-down {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(var(--up-down-swing, 15%));
            transform: translateY(var(--up-down-swing, 15%));
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes up-down {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(var(--up-down-swing, 15%));
            transform: translateY(var(--up-down-swing, 15%));
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/* 垂直ロール */
[data-aos=vertical-roll] {
  -webkit-animation-name: vertical-roll;
          animation-name: vertical-roll;
}

@-webkit-keyframes vertical-roll {
  0% {
    opacity: 0;
    -webkit-transform: translateY(calc(-1 * var(--vertical-roll-swing, 50%)));
            transform: translateY(calc(-1 * var(--vertical-roll-swing, 50%)));
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(calc(1 * var(--vertical-roll-swing, 50%)));
            transform: translateY(calc(1 * var(--vertical-roll-swing, 50%)));
  }
}

@keyframes vertical-roll {
  0% {
    opacity: 0;
    -webkit-transform: translateY(calc(-1 * var(--vertical-roll-swing, 50%)));
            transform: translateY(calc(-1 * var(--vertical-roll-swing, 50%)));
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(calc(1 * var(--vertical-roll-swing, 50%)));
            transform: translateY(calc(1 * var(--vertical-roll-swing, 50%)));
  }
}
[data-aos=vertical-roll-lg] {
  -webkit-animation-name: vertical-roll-lg;
          animation-name: vertical-roll-lg;
}

@-webkit-keyframes vertical-roll-lg {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(calc(1 * var(--vertical-roll-lg-swing, 300%)));
            transform: translateY(calc(1 * var(--vertical-roll-lg-swing, 300%)));
  }
}

@keyframes vertical-roll-lg {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(calc(1 * var(--vertical-roll-lg-swing, 300%)));
            transform: translateY(calc(1 * var(--vertical-roll-lg-swing, 300%)));
  }
}
/* パルス */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale(var(--pulse-scale, 1.05));
            transform: scale(var(--pulse-scale, 1.05));
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale(var(--pulse-scale, 1.05));
            transform: scale(var(--pulse-scale, 1.05));
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
[data-aos=pulse] {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

/* 波紋 */
@-webkit-keyframes ring {
  0% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 1;
  }
  90% {
    opacity: 0.1;
  }
  to {
    -webkit-transform: scale(var(--ring-scale, 1.3));
            transform: scale(var(--ring-scale, 1.3));
    opacity: 0;
  }
}
@keyframes ring {
  0% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 1;
  }
  90% {
    opacity: 0.1;
  }
  to {
    -webkit-transform: scale(var(--ring-scale, 1.3));
            transform: scale(var(--ring-scale, 1.3));
    opacity: 0;
  }
}
[data-aos=ring]::before,
[data-aos=ring]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: var(--ring-border-radius, 100vh);
  -webkit-box-shadow: 0 0 var(--ring-thickness, 50px) var(--ring-color, rgba(53, 250, 148, 0.53)) inset;
          box-shadow: 0 0 var(--ring-thickness, 50px) var(--ring-color, rgba(53, 250, 148, 0.53)) inset;
  -webkit-animation-name: ring;
          animation-name: ring;
}

[data-aos=ring]::after {
  -webkit-animation-delay: var(--ring-delay, 0.4s);
          animation-delay: var(--ring-delay, 0.4s);
}

/* 点滅 */
@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
[data-aos=blink] {
  opacity: 0;
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

/* ボーダー点滅 */
@-webkit-keyframes border-blink {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: var(--blink-border-color, #000);
  }
}
@keyframes border-blink {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: var(--blink-border-color, #000);
  }
}
[data-aos=border-blink] {
  -webkit-animation-name: border-blink;
          animation-name: border-blink;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

/* Jello */
@-webkit-keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-3.5deg) skewY(-3.5deg);
            transform: skewX(-3.5deg) skewY(-3.5deg);
  }
  33.3% {
    -webkit-transform: skewX(3.25deg) skewY(3.25deg);
            transform: skewX(3.25deg) skewY(3.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
            transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
            transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
            transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-3.5deg) skewY(-3.5deg);
            transform: skewX(-3.5deg) skewY(-3.5deg);
  }
  33.3% {
    -webkit-transform: skewX(3.25deg) skewY(3.25deg);
            transform: skewX(3.25deg) skewY(3.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
            transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
            transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
            transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
[data-aos=jello] {
  -webkit-animation-name: jello;
          animation-name: jello;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

/* shiny */
@-webkit-keyframes shiny {
  0% {
    -webkit-transform: scale(0) rotate(25deg);
            transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1) rotate(25deg);
            transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(500) rotate(25deg);
            transform: scale(500) rotate(25deg);
    opacity: 0;
  }
}
@keyframes shiny {
  0% {
    -webkit-transform: scale(0) rotate(25deg);
            transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1) rotate(25deg);
            transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(500) rotate(25deg);
            transform: scale(500) rotate(25deg);
    opacity: 0;
  }
}
[data-aos=shiny]::after {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 50px;
  height: 50px;
  background-image: var(--shiny-color, linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgb(255, 255, 255) 100%, rgba(255, 255, 255, 0) 0%));
  -webkit-animation-name: shiny;
          animation-name: shiny;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

[data-aos=shiny] {
  overflow: hidden;
  position: relative;
}

/* bounce */
@-webkit-keyframes bounce {
  0%, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
            transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
            transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transform: translateZ(0) scaleY(0.95);
            transform: translateZ(0) scaleY(0.95);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
            transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  0%, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
            transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
            transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transform: translateZ(0) scaleY(0.95);
            transform: translateZ(0) scaleY(0.95);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
            transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
[data-aos=bounce] {
  -webkit-animation-name: bounce;
          animation-name: bounce;
}

/* flash */
@-webkit-keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
[data-aos=flash] {
  -webkit-animation-name: flash;
          animation-name: flash;
}

/* rubberBand */
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
[data-aos=rubberBand] {
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}

/* shakeX */
@-webkit-keyframes shakeX {
  0%, to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  0%, to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}
[data-aos=shakeX] {
  -webkit-animation-name: shakeX;
          animation-name: shakeX;
}

/* shakeY */
@-webkit-keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
}
[data-aos=shakeY] {
  -webkit-animation-name: shakeY;
          animation-name: shakeY;
}

/* headShake */
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
            transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
            transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
            transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
            transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
            transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
            transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
            transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
            transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
[data-aos=headShake] {
  -webkit-animation-name: headShake;
          animation-name: headShake;
}

/* swing */
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
[data-aos=swing] {
  -webkit-animation-name: swing;
          animation-name: swing;
}

/* tada */
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
[data-aos=tada] {
  -webkit-animation-name: tada;
          animation-name: tada;
}

/* wobble */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
            transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
            transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
            transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
            transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
            transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
            transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
            transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
            transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
            transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
            transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}
[data-aos=wobble] {
  -webkit-animation-name: wobble;
          animation-name: wobble;
}

/* heartBeat */
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
[data-aos=heartBeat] {
  -webkit-animation: heartBeat 1.3s ease-in-out infinite;
          animation: heartBeat 1.3s ease-in-out infinite;
}

/* animation duration */
[data-aos][data-aos-animation-duration="1000"] {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

[data-aos][data-aos-animation-duration="2000"] {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

[data-aos][data-aos-animation-duration="3000"] {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

[data-aos][data-aos-animation-duration="4000"] {
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}

[data-aos][data-aos-animation-duration="5000"] {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}

[data-aos][data-aos-animation-duration="6000"] {
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}

[data-aos][data-aos-animation-duration="7000"] {
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}

[data-aos][data-aos-animation-duration="8000"] {
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}

[data-aos][data-aos-animation-duration="9000"] {
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}

[data-aos][data-aos-animation-duration="10000"] {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}

/* ==========================================
 Slider Section
============================================*/
.slider-section {
  position: relative;
}

.slider-section__slider {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 1;
  margin-bottom: 5%;
}

/* ==========================================
 Layer
============================================*/
.layer--1 {
  top: 70%;
  translate: -1%;
}

.layer--2 {
  top: 69%;
  translate: -1%;
}

.layer--3 {
  top: 22%;
  translate: -1%;
}

.layer--4 {
  top: 30%;
}

/* ==========================================
 Footer
============================================*/
.footer__logo {
  width: 100px;
  margin-block: 10% 5%;
}

.footer__menu {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer__menu > a {
  padding-block: 0.3em;
}

/* ==========================================
 Movie
============================================*/
.movie {
  position: relative;
  inset: 0;
  z-index: 1;
}

.movie-content {
  position: absolute;
  inset: auto auto 10% 0;
  z-index: 1;
  margin-inline: auto;
}

.movie-video {
  max-width: 82.1333333333%;
}

.movie-label {
  position: absolute;
  inset: auto 5% -5% auto;
  z-index: 1;
  max-width: 50.5333333333%;
}