@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
}

*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  min-block-size: 100%;
  block-size: auto;
  -webkit-text-size-adjust: none;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}
body {
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
}

:where(img, svg, video, canvas, audio, iframe, embed, object, picture) {
  display: block;
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

:where(svg) {
  stroke: none;
  fill: currentColor;
}

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

:where(textarea) {
  resize: vertical;
}

@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

h1 {
  font-size: 2em;
}

:where(ul, ol) {
  list-style-position: inside;
}

:where(ul, ol)[role=list] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type=file]) {
  cursor: auto;
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed;
}

:where(button, input, textarea) {
  border: none;
  outline: none;
  background: none;
}

:root {
  /* Common Size */
  --width-pc: 1500px;
  --width-pc-wrap: 480px;
  --width-sp: 480px;
  --width-pc-base: 390px;
  --inline-l: var(--width-pc-wrap);
  --inline-m: 33.4rem;
  --inline-s: 29rem;
  /* Common padding-inline */
  --padding-inline: 1.2rem;
  /* Common Space */
  --space-lv1: 1rem;
  --space-lv2: 2rem;
  --space-lv3: 3rem;
  --space-lv4: 4rem;
  --space-lv5: 5rem;
  --space-lv6: 6rem;
}
@media not screen and (max-width: 480px) {
  :root {
    --inline-m: 70rem;
    --inline-s: 51rem;
    --padding-inline: 2rem;
    /* Common Space */
    --space-lv1: 2rem;
    --space-lv2: 4rem;
    --space-lv3: 6rem;
    --space-lv4: 8rem;
    --space-lv5: 10rem;
    --space-lv6: 12rem;
  }
}

:root {
  --font-family-sans: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", hiragino-kaku-gothic-pron, "Noto Sans", "He lvetica Neue", "Helvetica", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --fz-text-lv1: 1rem;
  --fz-text-lv2: max(12px, 1.2rem);
  --fz-text-lv3: max(12px, 1.4rem);
  --fz-text-lv4: max(12px, 1.6rem);
  --fz-text-lv5: max(12px, 1.8rem);
  --fz-text-lv6: max(12px, 2rem);
  --fz-text-lv7: max(12px, 2.2rem);
  --fz-h2: max(12px, 2rem);
  --fz-h3: max(12px, 1.8rem);
  --fz-body: var(--fz-text-lv4);
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --fw-normal: normal;
  --fw-bold: bold;
  --fw-regular: var(--fw-400);
  --fw-medium: var(--fw-500);
  --fw-semi-bold: var(--fw-600);
  --fw-extra-bold: var(--fw-800);
  --fw-black: var(--fw-900);
  --lh-lv1: 1;
  --lh-lv2: 1.2;
  --lh-lv3: 1.3;
  --lh-lv4: 1.4;
  --lh-lv5: 1.5;
  --lh-lv6: 1.6;
  --lh-lv7: 1.7;
  --lh-lv8: 2;
  --ls-lv1: 0;
  --ls-lv2: .02em;
  --ls-lv3: .03em;
  --ls-lv4: .04em;
  --ls-lv5: .05em;
  --ls-lv6: .1em;
}
@media not screen and (max-width: 480px) {
  :root {
    --fz-h2: 2.8rem;
    --fz-h3: 2.6rem;
  }
}

/**
//  * Vw変換
//  * @param $size - 変換するサイズ
//  * @param $viewport - ビューポートの幅
//  * @return - 変換後のサイズ(vw)
//  */
/**
//  * Hover or Touch
//  * @param $style - 設定値
//  * @return - フォント設定
//  */
:root {
  --bg-slice-size: 4rem;
}
@media not screen and (max-width: 480px) {
  :root {
    --bg-slice-size: 15.385rem;
  }
}

/* Clickable
----------------------------------------- */
:where(a):not([class]) {
  text-decoration: none;
  transition: background 0.3s;
  background: linear-gradient(currentColor 0 100%) 0 100%/var(--bg-linear-size) 1px no-repeat;
  --bg-linear-size: 100%;
}
@media (any-hover: hover) {
  :hover:where(a):not([class]) {
    --bg-linear-size: 0%;
  }
}
@media (any-hover: none) {
  :active:where(a):not([class]) {
    --bg-linear-size: 0%;
  }
}
html,
body,
#main {
  inline-size: 100%;
  block-size: 100%;
}

img, video {
  pointer-events: none;
}

:root {
  /* Space SP */
  --space-lv1: 1rem;
  --space-lv2: 2rem;
  --space-lv3: 3rem;
  --space-lv4: 4rem;
  --space-lv5: 5rem;
  --space-lv6: 6rem;
  /* Space Gap row */
  --gap-row-lv1: var(--space-lv1);
  --gap-row-lv2: var(--space-lv2);
  --gap-row-lv3: var(--space-lv3);
  --gap-row-lv4: var(--space-lv4);
  --gap-row-lv5: var(--space-lv5);
  --gap-row-lv6: var(--space-lv6);
  /* Space Gap column */
  --gap-column-lv1: var(--space-lv1);
  --gap-column-lv2: var(--space-lv2);
  --gap-column-lv3: var(--space-lv3);
  --gap-column-lv4: var(--space-lv4);
  --gap-column-lv5: var(--space-lv5);
  --gap-column-lv6: var(--space-lv6);
}
@media not screen and (max-width: 480px) {
  :root {
    /* Space PC */
    --space-lv1: 2rem;
    --space-lv2: 4rem;
    --space-lv3: 6rem;
    --space-lv4: 8rem;
    --space-lv5: 10rem;
    --space-lv6: 12rem;
  }
}

/* Font
----------------------------------------- */
html {
  font-size: 62.5%;
}
@media screen and (max-width: 480px) {
  html {
    font-size: min(2.5641025641vw, 10px);
  }
}

body {
  font: var(--fw-regular) var(--fz-body)/var(--lh-lv8) var(--font-family-sans);
}

h1, h2, h3, h4, h5 {
  text-align: center;
  font-weight: var(--fw-extra-bold);
  line-height: var(--lh-lv5);
  word-break: auto-phrase;
}
@media not screen and (max-width: 480px) {
  h1, h2, h3, h4, h5 {
    line-height: var(--lh-lv4);
  }
}

h1 {
  font-size: var(--fz-h1);
}

h2 {
  font-size: var(--fz-h2);
  font-weight: var(--fw-extra-bold);
}

h3 {
  font-size: var(--fz-h3);
  font-weight: var(--fw-semi-bold);
  line-height: var(--lh-lv8);
}

h4 {
  font-size: var(--fz-h4);
}

h5 {
  font-size: var(--fz-h5);
}

em {
  font-style: normal;
  font-weight: var(--fw-bold);
}

strong {
  font-weight: var(--fw-extra-bold);
}

/* Base
----------------------------------------- */
:root {
  --color-main: #fff32e;
  --color-main-sub: #eae6db;
  --color-sub: #0e4664;
  --color-sub-sub: #5F5A4E;
  --white: #fff;
  --black: #111;
  --transparent: rgba(0, 0, 0, 0);
  --c-text: #424242;
  --c-blue: #426E85;
  --c-blue-dark: #004d8e;
  --c-blue-dark2: #240b80;
  --c-red: #CC3622;
  --c-red-dark: #800000;
  --c-green: #115D53;
  --c-green-light: #dbf7dc;
  --c-yellow: #EAE45A;
  --c-yellow-light: #fffbc2;
  --bg-white: var(--white);
  --bg-sand: #F7F5F1;
  --bg-blue: #084F9F;
  --bg-blue-light: #F0FDFF;
  --bg-blue-dark: #4D6A7C;
  --bg-light-blue: #ecfdff;
  --bg-green: #167d38;
  --bg-green-light: #F9FFE1;
  --bg-yellow: #F9C800;
  --bg-yellow-light: #F9FFE2;
  --bg-yellow-dark: #F1EDDC;
  --bg-red-light: #fb765c;
  --bg-orange-light: #fd9b75;
  --bg-pink: #ffc1c1;
  --bg-pink-light: #FFF0F3;
  --bg-red: var(--c-red);
  --bg-black: #474747;
  --bg-liner-yellow: #FFF504;
}

body {
  color: var(--c-text);
  background-color: var(--white);
}

:where(a:not([class])) {
  color: currentColor;
}

/* Clickable
----------------------------------------- */
:where(a) {
  text-decoration: none;
}
/* Wrap
----------------------------------------- */
.l-wrap {
  margin-inline: auto;
  padding-inline: var(--padding-inline);
  max-inline-size: var(--width-pc-wrap);
  inline-size: 100%;
}

/* Grid
----------------------------------------- */
.l-grid {
  display: grid;
  gap: var(--gap-row-lv2) var(--gap-column-lv2);
}

/* Section
----------------------------------------- */
.l-section {
  padding-block: 6rem;
}
@media not screen and (max-width: 480px) {
  .l-section {
    padding-block: 9rem;
  }
}

/* Img
----------------------------------------- */
.l-img, .l-img-fit {
  margin-inline: auto;
}
.l-img picture, .l-img-fit picture {
  inline-size: 100%;
  block-size: auto;
}
.l-img img, .l-img-fit img {
  inline-size: 100%;
  block-size: auto;
}
.l-img-fit {
  max-inline-size: fit-content;
}
.l-img-caption {
  margin-block-start: 1.5rem;
  text-align: center;
  font-weight: var(--fw-semi-bold);
  line-height: 1;
}

/* Auto text
----------------------------------------- */
.l-auto-text {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.l-inline-l {
  margin-inline: auto;
  max-inline-size: var(--inline-l);
  inline-size: 100%;
}
@media screen and (max-width: 480px) {
  .l-inline-l-sp {
    margin-inline: auto;
    max-inline-size: var(--inline-l);
    inline-size: 100%;
  }
}
@media not screen and (max-width: 480px) {
  .l-inline-l-pc {
    margin-inline: auto;
    max-inline-size: var(--inline-l);
    inline-size: 100%;
  }
}

.l-inline-m {
  margin-inline: auto;
  max-inline-size: var(--inline-m);
  inline-size: 100%;
}
@media screen and (max-width: 480px) {
  .l-inline-m-sp {
    margin-inline: auto;
    max-inline-size: var(--inline-m);
    inline-size: 100%;
  }
}
@media not screen and (max-width: 480px) {
  .l-inline-m-pc {
    margin-inline: auto;
    max-inline-size: var(--inline-m);
    inline-size: 100%;
  }
}

.l-inline-s {
  margin-inline: auto;
  max-inline-size: var(--inline-s);
  inline-size: 100%;
}
@media screen and (max-width: 480px) {
  .l-inline-s-sp {
    margin-inline: auto;
    max-inline-size: var(--inline-s);
    inline-size: 100%;
  }
}
@media not screen and (max-width: 480px) {
  .l-inline-s-pc {
    margin-inline: auto;
    max-inline-size: var(--inline-s);
    inline-size: 100%;
  }
}

.l-main {
  user-select: none;
  background: url(../images/bg.svg) 50% 50%/628px auto, #fff8cb;
}
.l-main * {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.l-main img,
.l-main picture,
.l-main video {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none !important;
}

/* Contents
----------------------------------------- */
.l-contents {
  position: relative;
  margin-inline: auto;
  max-inline-size: var(--width-pc-wrap);
  inline-size: 100%;
  block-size: 100%;
  box-shadow: 0 0 5px 4px rgba(68, 68, 68, 0.4);
}

/* Items
----------------------------------------- */
.p-items {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}
.p-items__bg {
  inline-size: 100%;
  block-size: 100%;
}
.p-items__bg video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Slides
----------------------------------------- */
.p-slides {
  position: relative;
  --padding-inline: 4rem;
}
.p-slides * {
  user-select: none;
}
@media not screen and (max-width: 390px) {
  .p-slides {
    --padding-inline: min(10.2564102564vw, 60px);
  }
}
.p-slides, .p-slides__item, .p-slides__bg {
  inline-size: 100%;
  block-size: 100%;
}
.p-slides__item {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding-inline: var(--padding-inline);
  background: #fff;
}
.p-slides__item.js-active {
  z-index: 1;
}
.p-slides__item::before, .p-slides__item::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  z-index: 100;
  translate: 0 -50%;
  aspect-ratio: 1;
  inline-size: var(--padding-inline);
  block-size: auto;
  background: 50% 50%/75% auto no-repeat;
  pointer-events: none;
}
.p-slides__item::before {
  inset-inline-start: 0;
  background-image: url("../images/arrow_l.svg");
}
.p-slides__item::after {
  inset-inline-end: 0;
  background-image: url("../images/arrow_r.svg");
}
.p-slides__item:first-child::before {
  content: none;
}
.p-slides__item:last-child::after {
  content: none;
}
.p-slides__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-slides__bg video,
.p-slides__bg picture,
.p-slides__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.p-slides__inner {
  position: relative;
  display: grid;
  align-content: center;
  row-gap: 2rem;
  z-index: 2;
  padding-block: 2rem;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
.p-slides__title picture,
.p-slides__title img {
  display: block;
  inline-size: 100%;
}
.p-slides-survey {
  --padding: 1.5rem;
  border-radius: 1.5rem;
  pointer-events: auto;
  overflow: hidden;
}
.p-slides-survey__title {
  padding: var(--padding);
  text-align: center;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.3;
  background-color: #111111;
}
.p-slides-survey__inner {
  display: grid;
  row-gap: 1rem;
  padding: var(--padding);
  background-color: #fff;
  overflow-y: scroll;
}
.p-slides-survey__button {
  padding: 1.2rem 1.5rem;
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.25;
  border-radius: 1.3rem;
  background-color: #EBEBEB;
}
.p-slides-survey__button.js-select {
  color: #fff;
  background-color: #111;
}
.p-slides__btn {
  position: absolute;
  inset: 0 50%;
  z-index: 1;
  cursor: pointer;
}
.p-slides__btn--prev {
  inset-inline-start: 0;
}
.p-slides__btn--next {
  inset-inline-end: 0;
}
.p-slides-form {
  padding-inline: 0;
}
.p-slides-form__wrap {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 3rem var(--padding-inline) 1.4rem;
  inline-size: 100%;
  block-size: 100%;
  overflow-y: scroll;
  pointer-events: none;
}
.p-slides-form__inner {
  align-self: center;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  grid-auto-columns: 100%;
  row-gap: 1rem;
  z-index: 2;
  pointer-events: auto;
}
.p-slides-form__title {
  margin-block-end: 1rem;
  inline-size: calc(100% + 2rem);
}
.p-slides-form__title picture,
.p-slides-form__title img {
  display: block;
  inline-size: 100%;
}
.p-slides-form__img {
  margin-left: var(--padding-inline);
  inline-size: calc(100% + var(--padding-inline) * 1);
}
.p-slides-form__img picture,
.p-slides-form__img img {
  display: block;
  inline-size: 100%;
}
.p-slides-form__input {
  position: relative;
  inline-size: 100%;
  pointer-events: auto;
}
.p-slides-form__input::before {
  content: "";
  position: absolute;
  inset: 50% 0 0 1.8rem;
  translate: 0 -50%;
  aspect-ratio: 97/71;
  inline-size: 4rem;
  block-size: auto;
  background: url(../images/form__icon.png) 50% 50%/contain no-repeat, #fff;
}
.p-slides-form__input input {
  display: block;
  padding-inline-start: 7rem;
  inline-size: 100%;
  block-size: 6rem;
  border: 0.15rem solid #515151;
  background: #fff;
}
.p-slides-form__button {
  pointer-events: auto;
  inline-size: calc(100% + 0.5rem);
}
.p-slides-form__footer {
  align-self: end;
  position: relative;
  display: grid;
  justify-content: center;
  justify-items: center;
  row-gap: 1em;
  z-index: 2;
  margin-inline: calc(var(--padding-inline) * 2 * -1);
  padding-inline: 1em;
  color: #463100;
  font-size: 12px;
  line-height: 1;
}
.p-slides-form__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em 1.5em;
  pointer-events: auto;
}

/* Timeline
----------------------------------------- */
.p-timeline {
  position: absolute;
  display: flex;
  inset: 2rem 0 auto;
  z-index: 10;
  column-gap: 0.5rem;
  margin: 0;
  padding: 0 2rem;
  block-size: 0.5rem;
  --item-time: 9s;
}
.p-timeline__item {
  position: relative;
  inline-size: 100%;
  background-color: #E72F00;
  overflow: hidden;
}
.p-timeline__item::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  inline-size: 100%;
  background-color: #fff;
  animation-duration: var(--item-time, 9s);
  animation-timing-function: linear;
}
.p-timeline__item.js-thisItem::before {
  animation-name: playBar;
}
.p-timeline__item.js-thisItem-replay::before {
  animation-name: rePlayBar;
}
.p-timeline__item.js-thisItem-pause::before {
  animation-play-state: paused;
}
.p-timeline__item.js-thisItem-end::before {
  inline-size: 0;
  animation-duration: 0s;
  animation-name: none;
  background-color: none;
}
@keyframes playBar {
  from {
    inline-size: 100%;
  }
  to {
    inline-size: 0%;
  }
}
@keyframes rePlayBar {
  from {
    inline-size: 100%;
  }
  to {
    inline-size: 0%;
  }
}

/* Background left
----------------------------------------- */
.p-bg-left {
  position: absolute;
  inset: 0;
  inset-inline-end: calc(50% + var(--width-pc-wrap) / 2);
}
@media screen and (max-width: 800px) {
  .p-bg-left {
    display: none !important;
  }
}
.p-bg-left__img {
  position: absolute;
  inset: auto auto 1.9% 50%;
  translate: -50% 0;
  max-inline-size: 404px;
  min-inline-size: 120px;
  inline-size: 50%;
}
.p-bg-left__img picture, .p-bg-left__img img {
  display: block;
  inline-size: 100%;
}
.p-bg-left__img img {
  block-size: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

/* Background right
----------------------------------------- */
.p-bg-right {
  position: absolute;
  inset: 0;
  inset-inline-start: calc(50% + var(--width-pc-wrap) / 2);
}
@media screen and (max-width: 800px) {
  .p-bg-right {
    display: none !important;
  }
}
.p-bg-right__img {
  position: absolute;
  inset: auto auto 0 50%;
  translate: -50% 0;
  max-inline-size: 674px;
  min-inline-size: 140px;
  inline-size: 80%;
  block-size: 100%;
}
.p-bg-right__img picture, .p-bg-right__img img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.p-bg-right__img img {
  object-fit: contain;
  object-position: 50% 100%;
}

/* Banner
----------------------------------------- */
.p-bnr {
  position: absolute;
  inset: 0;
  z-index: -1000;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: opacity 1.5s;
}
.p-bnr.js-open {
  z-index: 20;
  animation: open 1s;
}
.p-bnr.js-close {
  opacity: 0;
  pointer-events: none;
}
.p-bnr.js-close-end {
  display: none !important;
}
.p-bnr__img {
  position: absolute;
  inset: 50% 2rem auto;
  inset-block-start: 50%;
  translate: 0 -50%;
  animation: 0.2s forwards;
  cursor: pointer;
}
@media (any-hover: hover) {
  .p-bnr__img:hover {
    animation-name: bnr-hover;
  }
}
@media (any-hover: none) {
  .p-bnr__img:active {
    animation-name: bnr-hover;
  }
}
.p-bnr__close {
  position: absolute;
  inset: 0 0 auto auto;
  translate: 40% -40%;
  inline-size: 4.5rem;
  animation: 0.2s forwards;
}
@media (any-hover: hover) {
  .p-bnr__close:hover {
    animation-name: close;
  }
}
@media (any-hover: none) {
  .p-bnr__close:active {
    animation-name: close;
  }
}
@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes bnr-hover {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.1);
  }
}

@media screen and (max-width: 480px) {
  .is-pc {
    display: none !important;
  }
}

@media not screen and (max-width: 480px) {
  .is-sp {
    display: none !important;
  }
}