@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: -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 {
  animation-iteration-count: infinite;
  animation-duration: var(--animation-duration, 1s);
  animation-timing-function: ease-in-out;
}

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

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

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

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

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

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

/* 波紋 */
@keyframes ring {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  90% {
    opacity: 0.1;
  }
  to {
    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);
  box-shadow: 0 0 var(--ring-thickness, 50px) var(--ring-color, rgba(53, 250, 148, 0.53)) inset;
  animation-name: ring;
}

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

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

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

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

/* shiny */
@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    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%));
  animation-name: shiny;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.layer--5 {
  top: 86%;
}

/* ==========================================
 Button
============================================*/
.btn-answer {
  width: var(--sz-508);
  margin-bottom: var(--sz-40);
}

/* ==========================================
 Answer
============================================*/
.answer {
  padding: var(--sz-50) var(--sz-40);
  display: flex;
  flex-direction: column;
  gap: var(--sz-5);
}
.answer .form-check {
  background-color: #d6d8cb;
  border-radius: 100vh;
  padding: var(--sz-20) var(--sz-50) var(--sz-20) var(--sz-100);
  font-size: var(--sz-27);
  font-weight: bold;
  line-height: 1.4;
  color: #1f2500;
}
.answer .form-check .form-check-input {
  border: 1px solid #1f2500;
  margin-top: 0.2em;
  width: 1.1em;
  height: 1.1em;
  margin-left: -1.6em;
  border-radius: 0.25em;
}
.answer .form-check .form-check-input:checked {
  background-color: #639649;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

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

.footer__menu {
  flex-direction: column;
  align-items: center;
}

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

/* ==========================================
 Floating
============================================*/
.follow--type1 {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s, visibility 0.3s;
}

.follow--type1.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================
 Animation
============================================*/
.activeAnimation {
  position: relative;
}

.activeAnimation::before {
  display: block;
  content: "";
  position: fixed;
  z-index: 998;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  transform: scaleX(0);
  background-color: rgb(255, 255, 255);
  animation-name: page-switch-base;
  animation-duration: 2.6s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.activeAnimation::after {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  transform: scaleX(0);
  background-color: #fada7e;
  animation-name: page-switch;
  animation-duration: 1.3s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes page-switch-base {
  0% {
    transform: scaleX(1);
    transform-origin: right center;
    opacity: 1;
  }
  99% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}
@keyframes page-switch {
  0% {
    transform-origin: right center;
    transform: scaleX(0);
    background-color: #639649;
  }
  50% {
    transform-origin: right center;
    transform: scaleX(1);
    background-color: #639649;
  }
  51% {
    transform-origin: left center;
  }
  100% {
    transform-origin: left center;
    transform: scaleX(0);
  }
}