/* ==========================================================================
  Foundation
========================================================================== */
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

html {
  font-size: 10px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: #fff;
}

picture,
img {
  display: block;
  width: 100%;
  height: auto;
}
picture:not(a picture,
a img),
img:not(a picture,
a img) {
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

picture img {
  height: 100%;
}

img {
  -o-object-fit: cover;
  object-fit: cover;
}

main {
  margin: 0 auto;
}

.container {
  margin: 0 auto;
  width: min(1000px, 90.9090909091vw);
  background-color: #fff;
  box-shadow: 0px min(4px, 0.3636363636vw) min(17.43px, 1.5845454545vw) min(3.57px, 0.3245454545vw) rgba(0, 0, 0, 0.04);
}
@media screen and (min-width: 2000px) {
  .container {
    width: 50vw;
    box-shadow: 0px 0.2vw 0.8715vw 0.1785vw rgba(0, 0, 0, 0.04);
  }
}

.section-wrapper {
  position: relative;
  overflow: hidden;
}

.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
}
@media screen and (max-width: 750px) {
  .bg {
    background-attachment: scroll;
    background-position: top center;
  }
}

.xl {
  font-size: min(56px, 5.0909090909vw);
}
@media screen and (min-width: 2000px) {
  .xl {
    font-size: 2.8vw;
  }
}

.md {
  font-size: min(50px, 4.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .md {
    font-size: 2.5vw;
  }
}

.xs {
  font-size: min(45px, 4.0909090909vw);
}
@media screen and (min-width: 2000px) {
  .xs {
    font-size: 2.25vw;
  }
}

.red {
  color: #c40406;
}

.yellow {
  color: #fefd00;
}

.w-600 {
  font-weight: 600;
}

.underline {
  text-underline-offset: min(11.52px, 1.0472727273vw);
  text-decoration: underline;
  text-decoration-thickness: min(4px, 0.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .underline {
    text-underline-offset: 0.576vw;
    text-decoration-thickness: 0.2vw;
  }
}
.underline--black {
  text-decoration-color: #161616;
}
.underline--red {
  text-decoration-color: #c40406;
}

.marker {
  background-color: #fff600;
}

.block {
  display: block;
  margin-block: 0.2em;
}
.f-52 {
  font-size: min(52px, 4.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .f-52 {
    font-size: 2.6vw;
  }
}

h2,
h3,
p,
div,
span {
  margin-block: calc((1em - 1lh) / 2);
}

span {
  display: inline-block;
}

p {
  color: #161616;
  font-size: min(45px, 4.0909090909vw);
  line-height: 1.7;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  white-space: nowrap;
}
@media screen and (min-width: 2000px) {
  p {
    font-size: 2.25vw;
  }
}
p .border-left {
  position: relative;
  translate: 5% 0;
  padding-left: min(10px, 0.9090909091vw);
}
@media screen and (min-width: 2000px) {
  p .border-left {
    padding-left: 0.5vw;
  }
}
p .border-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  translate: -150% 0;
  width: min(13px, 1.1818181818vw);
  height: 100%;
  background-color: #c40406;
}

/* ==========================================================================
  Layout
========================================================================== */
main .message__head, main .price__condition, main .contents__head, main .contents__item-list, main .contents__desc, main .reason__head, main .template__head, main .template__flow, main .template__list, main .meme__head, main .genre__head, main .genre__list, main .obstacles__head, main .why__head, main .why__list, main .aoh__head, main .aoh__list, main .aoh__merit, main .cta, main .fv__head, main .fv__cta {
  --base-width: 1100;
}
main .message__head > picture, main .price__condition > picture, main .contents__head > picture, main .contents__item-list > picture, main .contents__desc > picture, main .reason__head > picture, main .template__head > picture, main .template__flow > picture, main .template__list > picture, main .meme__head > picture, main .genre__head > picture, main .genre__list > picture, main .obstacles__head > picture, main .why__head > picture, main .why__list > picture, main .aoh__head > picture, main .aoh__list > picture, main .aoh__merit > picture, main .cta > picture, main .fv__head > picture, main .fv__cta > picture,
main .message__head > img,
main .price__condition > img,
main .contents__head > img,
main .contents__item-list > img,
main .contents__desc > img,
main .reason__head > img,
main .template__head > img,
main .template__flow > img,
main .template__list > img,
main .meme__head > img,
main .genre__head > img,
main .genre__list > img,
main .obstacles__head > img,
main .why__head > img,
main .why__list > img,
main .aoh__head > img,
main .aoh__list > img,
main .aoh__merit > img,
main .cta > img,
main .fv__head > img,
main .fv__cta > img {
  height: calc(var(--h) * 1px);
}
@media screen and (max-width: 1100px) {
  main .message__head > picture, main .price__condition > picture, main .contents__head > picture, main .contents__item-list > picture, main .contents__desc > picture, main .reason__head > picture, main .template__head > picture, main .template__flow > picture, main .template__list > picture, main .meme__head > picture, main .genre__head > picture, main .genre__list > picture, main .obstacles__head > picture, main .why__head > picture, main .why__list > picture, main .aoh__head > picture, main .aoh__list > picture, main .aoh__merit > picture, main .cta > picture, main .fv__head > picture, main .fv__cta > picture,
  main .message__head > img,
  main .price__condition > img,
  main .contents__head > img,
  main .contents__item-list > img,
  main .contents__desc > img,
  main .reason__head > img,
  main .template__head > img,
  main .template__flow > img,
  main .template__list > img,
  main .meme__head > img,
  main .genre__head > img,
  main .genre__list > img,
  main .obstacles__head > img,
  main .why__head > img,
  main .why__list > img,
  main .aoh__head > img,
  main .aoh__list > img,
  main .aoh__merit > img,
  main .cta > img,
  main .fv__head > img,
  main .fv__cta > img {
    height: calc(var(--h) / 1100 * 100vw);
  }
}
@media screen and (min-width: 2000px) {
  main .message__head > picture, main .price__condition > picture, main .contents__head > picture, main .contents__item-list > picture, main .contents__desc > picture, main .reason__head > picture, main .template__head > picture, main .template__flow > picture, main .template__list > picture, main .meme__head > picture, main .genre__head > picture, main .genre__list > picture, main .obstacles__head > picture, main .why__head > picture, main .why__list > picture, main .aoh__head > picture, main .aoh__list > picture, main .aoh__merit > picture, main .cta > picture, main .fv__head > picture, main .fv__cta > picture,
  main .message__head > img,
  main .price__condition > img,
  main .contents__head > img,
  main .contents__item-list > img,
  main .contents__desc > img,
  main .reason__head > img,
  main .template__head > img,
  main .template__flow > img,
  main .template__list > img,
  main .meme__head > img,
  main .genre__head > img,
  main .genre__list > img,
  main .obstacles__head > img,
  main .why__head > img,
  main .why__list > img,
  main .aoh__head > img,
  main .aoh__list > img,
  main .aoh__merit > img,
  main .cta > img,
  main .fv__head > img,
  main .fv__cta > img {
    height: auto;
  }
}
main .message__head > picture:not(:first-of-type), main .price__condition > picture:not(:first-of-type), main .contents__head > picture:not(:first-of-type), main .contents__item-list > picture:not(:first-of-type), main .contents__desc > picture:not(:first-of-type), main .reason__head > picture:not(:first-of-type), main .template__head > picture:not(:first-of-type), main .template__flow > picture:not(:first-of-type), main .template__list > picture:not(:first-of-type), main .meme__head > picture:not(:first-of-type), main .genre__head > picture:not(:first-of-type), main .genre__list > picture:not(:first-of-type), main .obstacles__head > picture:not(:first-of-type), main .why__head > picture:not(:first-of-type), main .why__list > picture:not(:first-of-type), main .aoh__head > picture:not(:first-of-type), main .aoh__list > picture:not(:first-of-type), main .aoh__merit > picture:not(:first-of-type), main .cta > picture:not(:first-of-type), main .fv__head > picture:not(:first-of-type), main .fv__cta > picture:not(:first-of-type),
main .message__head > img:not(:first-of-type),
main .price__condition > img:not(:first-of-type),
main .contents__head > img:not(:first-of-type),
main .contents__item-list > img:not(:first-of-type),
main .contents__desc > img:not(:first-of-type),
main .reason__head > img:not(:first-of-type),
main .template__head > img:not(:first-of-type),
main .template__flow > img:not(:first-of-type),
main .template__list > img:not(:first-of-type),
main .meme__head > img:not(:first-of-type),
main .genre__head > img:not(:first-of-type),
main .genre__list > img:not(:first-of-type),
main .obstacles__head > img:not(:first-of-type),
main .why__head > img:not(:first-of-type),
main .why__list > img:not(:first-of-type),
main .aoh__head > img:not(:first-of-type),
main .aoh__list > img:not(:first-of-type),
main .aoh__merit > img:not(:first-of-type),
main .cta > img:not(:first-of-type),
main .fv__head > img:not(:first-of-type),
main .fv__cta > img:not(:first-of-type) {
  --stack-value: -5;
}
@media screen and (min-width: 2000px) {
  main .message__head > picture:not(:first-of-type), main .price__condition > picture:not(:first-of-type), main .contents__head > picture:not(:first-of-type), main .contents__item-list > picture:not(:first-of-type), main .contents__desc > picture:not(:first-of-type), main .reason__head > picture:not(:first-of-type), main .template__head > picture:not(:first-of-type), main .template__flow > picture:not(:first-of-type), main .template__list > picture:not(:first-of-type), main .meme__head > picture:not(:first-of-type), main .genre__head > picture:not(:first-of-type), main .genre__list > picture:not(:first-of-type), main .obstacles__head > picture:not(:first-of-type), main .why__head > picture:not(:first-of-type), main .why__list > picture:not(:first-of-type), main .aoh__head > picture:not(:first-of-type), main .aoh__list > picture:not(:first-of-type), main .aoh__merit > picture:not(:first-of-type), main .cta > picture:not(:first-of-type), main .fv__head > picture:not(:first-of-type), main .fv__cta > picture:not(:first-of-type),
  main .message__head > img:not(:first-of-type),
  main .price__condition > img:not(:first-of-type),
  main .contents__head > img:not(:first-of-type),
  main .contents__item-list > img:not(:first-of-type),
  main .contents__desc > img:not(:first-of-type),
  main .reason__head > img:not(:first-of-type),
  main .template__head > img:not(:first-of-type),
  main .template__flow > img:not(:first-of-type),
  main .template__list > img:not(:first-of-type),
  main .meme__head > img:not(:first-of-type),
  main .genre__head > img:not(:first-of-type),
  main .genre__list > img:not(:first-of-type),
  main .obstacles__head > img:not(:first-of-type),
  main .why__head > img:not(:first-of-type),
  main .why__list > img:not(:first-of-type),
  main .aoh__head > img:not(:first-of-type),
  main .aoh__list > img:not(:first-of-type),
  main .aoh__merit > img:not(:first-of-type),
  main .cta > img:not(:first-of-type),
  main .fv__head > img:not(:first-of-type),
  main .fv__cta > img:not(:first-of-type) {
    margin-top: -0.25vw;
  }
}
@media screen and (min-width: 1100px) and (max-width: 1999px) {
  main .message__head > picture:not(:first-of-type), main .price__condition > picture:not(:first-of-type), main .contents__head > picture:not(:first-of-type), main .contents__item-list > picture:not(:first-of-type), main .contents__desc > picture:not(:first-of-type), main .reason__head > picture:not(:first-of-type), main .template__head > picture:not(:first-of-type), main .template__flow > picture:not(:first-of-type), main .template__list > picture:not(:first-of-type), main .meme__head > picture:not(:first-of-type), main .genre__head > picture:not(:first-of-type), main .genre__list > picture:not(:first-of-type), main .obstacles__head > picture:not(:first-of-type), main .why__head > picture:not(:first-of-type), main .why__list > picture:not(:first-of-type), main .aoh__head > picture:not(:first-of-type), main .aoh__list > picture:not(:first-of-type), main .aoh__merit > picture:not(:first-of-type), main .cta > picture:not(:first-of-type), main .fv__head > picture:not(:first-of-type), main .fv__cta > picture:not(:first-of-type),
  main .message__head > img:not(:first-of-type),
  main .price__condition > img:not(:first-of-type),
  main .contents__head > img:not(:first-of-type),
  main .contents__item-list > img:not(:first-of-type),
  main .contents__desc > img:not(:first-of-type),
  main .reason__head > img:not(:first-of-type),
  main .template__head > img:not(:first-of-type),
  main .template__flow > img:not(:first-of-type),
  main .template__list > img:not(:first-of-type),
  main .meme__head > img:not(:first-of-type),
  main .genre__head > img:not(:first-of-type),
  main .genre__list > img:not(:first-of-type),
  main .obstacles__head > img:not(:first-of-type),
  main .why__head > img:not(:first-of-type),
  main .why__list > img:not(:first-of-type),
  main .aoh__head > img:not(:first-of-type),
  main .aoh__list > img:not(:first-of-type),
  main .aoh__merit > img:not(:first-of-type),
  main .cta > img:not(:first-of-type),
  main .fv__head > img:not(:first-of-type),
  main .fv__cta > img:not(:first-of-type) {
    margin-top: max(-5px, -0.4545454545vw);
  }
}
@media screen and (max-width: 1099px) {
  main .message__head > picture:not(:first-of-type), main .price__condition > picture:not(:first-of-type), main .contents__head > picture:not(:first-of-type), main .contents__item-list > picture:not(:first-of-type), main .contents__desc > picture:not(:first-of-type), main .reason__head > picture:not(:first-of-type), main .template__head > picture:not(:first-of-type), main .template__flow > picture:not(:first-of-type), main .template__list > picture:not(:first-of-type), main .meme__head > picture:not(:first-of-type), main .genre__head > picture:not(:first-of-type), main .genre__list > picture:not(:first-of-type), main .obstacles__head > picture:not(:first-of-type), main .why__head > picture:not(:first-of-type), main .why__list > picture:not(:first-of-type), main .aoh__head > picture:not(:first-of-type), main .aoh__list > picture:not(:first-of-type), main .aoh__merit > picture:not(:first-of-type), main .cta > picture:not(:first-of-type), main .fv__head > picture:not(:first-of-type), main .fv__cta > picture:not(:first-of-type),
  main .message__head > img:not(:first-of-type),
  main .price__condition > img:not(:first-of-type),
  main .contents__head > img:not(:first-of-type),
  main .contents__item-list > img:not(:first-of-type),
  main .contents__desc > img:not(:first-of-type),
  main .reason__head > img:not(:first-of-type),
  main .template__head > img:not(:first-of-type),
  main .template__flow > img:not(:first-of-type),
  main .template__list > img:not(:first-of-type),
  main .meme__head > img:not(:first-of-type),
  main .genre__head > img:not(:first-of-type),
  main .genre__list > img:not(:first-of-type),
  main .obstacles__head > img:not(:first-of-type),
  main .why__head > img:not(:first-of-type),
  main .why__list > img:not(:first-of-type),
  main .aoh__head > img:not(:first-of-type),
  main .aoh__list > img:not(:first-of-type),
  main .aoh__merit > img:not(:first-of-type),
  main .cta > img:not(:first-of-type),
  main .fv__head > img:not(:first-of-type),
  main .fv__cta > img:not(:first-of-type) {
    margin-top: max(-5px, -0.4545454545vw);
  }
}

/* ==========================================================================
  Object
========================================================================== */
/* ==========================================================================
  Foundation
========================================================================== */
/* ==========================================================================
  Foundation
========================================================================== */
.fv {
  position: relative;
}
.fv__btn {
  position: absolute;
  left: 50%;
  bottom: min(106px, 9.6363636364vw);
  translate: -50% 0;
  width: min(926px, 84.1818181818vw);
  border-radius: min(37px, 3.3636363636vw);
  filter: drop-shadow(0px min(14px, 1.2727272727vw) min(10px, 0.9090909091vw) rgba(0, 0, 0, 0.76));
}
@media screen and (min-width: 2000px) {
  .fv__btn {
    bottom: 5.3vw;
    width: 46.3vw;
    border-radius: 1.85vw;
    filter: drop-shadow(0px 0.7vw 0.5vw rgba(0, 0, 0, 0.76));
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.intro {
  position: relative;
  z-index: 1;
  padding-top: min(103px, 9.3636363636vw);
  overflow: hidden;
}
@media screen and (min-width: 2000px) {
  .intro {
    padding-top: 5.15vw;
  }
}
.intro__bg {
  background-image: url("../images/intro/bg.webp");
}
.intro__container {
  display: grid;
  row-gap: min(106px, 9.6363636364vw);
  padding-top: min(110px, 10vw);
  padding-inline: min(33px, 3vw);
  padding-bottom: min(209px, 19vw);
}
@media screen and (min-width: 2000px) {
  .intro__container {
    row-gap: 5.3vw;
    padding-top: 5.5vw;
    padding-inline: 1.65vw;
    padding-bottom: 10.45vw;
  }
}
.intro__container img {
  margin-inline: auto;
  width: min(900px, 81.8181818182vw);
}
@media screen and (min-width: 2000px) {
  .intro__container img {
    width: 45vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.aoh {
  position: relative;
  z-index: 1;
  padding-bottom: min(185px, 16.8181818182vw);
}
@media screen and (min-width: 2000px) {
  .aoh {
    padding-bottom: 9.25vw;
  }
}
.aoh__head {
  position: relative;
  box-shadow: 0px min(6px, 0.5454545455vw) min(27.26px, 2.4781818182vw) min(1.74px, 0.1581818182vw) rgba(0, 0, 0, 0.42);
}
.aoh__head-group {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  row-gap: min(44px, 4vw);
  width: -moz-max-content;
  width: max-content;
}
.aoh__head-label {
  padding: min(27px, 2.4545454545vw) min(45px, 4.0909090909vw);
  color: #c40406;
  font-size: min(63.06px, 5.7327272727vw);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  background-color: #fff;
  box-shadow: 0px min(6px, 0.5454545455vw) min(27.26px, 2.4781818182vw) min(1.74px, 0.1581818182vw) rgba(0, 0, 0, 0.42);
}
@media screen and (min-width: 2000px) {
  .aoh__head-label {
    padding: 1.35vw 2.25vw;
    font-size: 3.153vw;
    box-shadow: 0px 0.3vw 1.363vw 0.087vw rgba(0, 0, 0, 0.42);
  }
}
.aoh__head-label span {
  font-size: min(48.35px, 4.3954545455vw);
}
@media screen and (min-width: 2000px) {
  .aoh__head-label span {
    font-size: 2.4175vw;
  }
}
.aoh__head-body {
  display: grid;
  row-gap: min(44px, 4vw);
  color: #fff;
  font-size: min(97px, 8.8181818182vw);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  font-feature-settings: "palt";
  text-shadow: 0px min(6px, 0.5454545455vw) min(27.26px, 2.4781818182vw) rgba(0, 0, 0, 0.42);
}
@media screen and (min-width: 2000px) {
  .aoh__head-body {
    row-gap: 2.2vw;
    font-size: 4.85vw;
    text-shadow: 0px 0.3vw 1.363vw rgba(0, 0, 0, 0.42);
  }
}
.aoh__head-body span {
  line-height: 1;
}
.aoh__head-body span:first-of-type {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: min(114px, 10.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .aoh__head-body span:first-of-type {
    font-size: 5.7vw;
  }
}
.aoh__head-body span:last-of-type {
  font-size: min(73px, 6.6363636364vw);
}
@media screen and (min-width: 2000px) {
  .aoh__head-body span:last-of-type {
    font-size: 3.65vw;
  }
}
.aoh__bg {
  background-image: url("../images/aoh/bg.webp");
}
.aoh__container {
  display: grid;
  row-gap: min(104px, 9.4545454545vw);
  padding-top: min(120px, 10.9090909091vw);
  padding-inline: min(38px, 3.4545454545vw);
  padding-bottom: min(84px, 7.6363636364vw);
}
@media screen and (min-width: 2000px) {
  .aoh__container {
    row-gap: 5.2vw;
    padding-top: 6vw;
    padding-inline: 1.9vw;
    padding-bottom: 4.2vw;
  }
}
.aoh__container > img {
  margin: 0 auto;
}
.aoh__merits {
  display: grid;
  row-gap: min(103.5px, 9.4090909091vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merits {
    row-gap: 5.175vw;
  }
}
.aoh__merit {
  position: relative;
  z-index: 1;
  padding: min(82px, 7.4545454545vw) min(47px, 4.2727272727vw) min(81.3px, 7.3909090909vw);
  margin: 0 max(-6.5px, -0.5909090909vw);
  width: min(937px, 85.1818181818vw);
  box-shadow: min(5px, 0.4545454545vw) min(4px, 0.3636363636vw) min(14.72px, 1.3381818182vw) min(1.28px, 0.1163636364vw) rgba(0, 0, 0, 0.14);
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
}
@media screen and (min-width: 2000px) {
  .aoh__merit {
    padding: 4.1vw 2.35vw 4.065vw;
    margin: 0 -0.325vw;
    width: 46.85vw;
    box-shadow: 0.25vw 0.2vw 0.736vw 0.064vw rgba(0, 0, 0, 0.14);
  }
}
.aoh__merit-bg {
  position: absolute;
  inset: min(8px, 0.7272727273vw);
  z-index: -1;
  background-color: #fff;
}
@media screen and (min-width: 2000px) {
  .aoh__merit-bg {
    inset: 0.4vw;
  }
}
.aoh__merit-bg::before {
  content: "";
  position: absolute;
  inset: min(10px, 0.9090909091vw);
  z-index: -1;
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-bg::before {
    inset: 0.5vw;
  }
}
.aoh__merit-bg::after {
  content: "";
  position: absolute;
  inset: min(15px, 1.3636363636vw);
  z-index: -1;
  background-color: #fff;
}
@media screen and (min-width: 2000px) {
  .aoh__merit-bg::after {
    inset: 0.75vw;
  }
}
.aoh__merit-head {
  display: grid;
  font-family: "Noto Serif JP", sans-serif;
  font-size: min(55px, 5vw);
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 2000px) {
  .aoh__merit-head {
    font-size: 2.75vw;
  }
}
.aoh__merit-head > div {
  white-space: nowrap;
}
.aoh__merit-head--1 {
  grid-template-columns: min(136px, 12.3636363636vw) 1fr;
  align-items: flex-end;
  margin-bottom: min(28px, 2.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-head--1 {
    grid-template-columns: 6.8vw 1fr;
    margin-bottom: 1.4vw;
  }
}
.aoh__merit-head--1 > div {
  translate: 0 -30%;
}
.aoh__merit-head--2 {
  grid-template-columns: min(151px, 13.7272727273vw) 1fr;
  -moz-column-gap: min(22px, 2vw);
  column-gap: min(22px, 2vw);
  margin-bottom: min(52px, 4.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-head--2 {
    grid-template-columns: 7.55vw 1fr;
    -moz-column-gap: 1.1vw;
    column-gap: 1.1vw;
    margin-bottom: 2.6vw;
  }
}
.aoh__merit-head--2 > div {
  margin-top: min(20px, 1.8181818182vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-head--2 > div {
    margin-top: 1vw;
  }
}
.aoh__merit-head--3 {
  grid-template-columns: min(136px, 12.3636363636vw) 1fr;
  -moz-column-gap: min(34px, 3.0909090909vw);
  column-gap: min(34px, 3.0909090909vw);
  margin-bottom: min(54px, 4.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-head--3 {
    grid-template-columns: 6.8vw 1fr;
    -moz-column-gap: 1.7vw;
    column-gap: 1.7vw;
    margin-bottom: 2.7vw;
  }
}
.aoh__merit-head--3 > div {
  margin-top: min(25px, 2.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-head--3 > div {
    margin-top: 1.25vw;
  }
}
.aoh__merit-thumb {
  margin-bottom: min(69px, 6.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .aoh__merit-thumb {
    margin-bottom: 3.45vw;
  }
}
.aoh__list {
  width: min(946px, 86vw);
  margin-inline: max(-11px, -1vw);
  box-shadow: min(7px, 0.6363636364vw) min(6px, 0.5454545455vw) min(14.87px, 1.3518181818vw) min(1.12px, 0.1018181818vw) rgba(0, 0, 0, 0.09);
}
@media screen and (min-width: 2000px) {
  .aoh__list {
    width: 47.3vw;
    box-shadow: 0.35vw 0.3vw 0.7435vw 0.056vw rgba(0, 0, 0, 0.09);
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.why {
  position: relative;
  z-index: 1;
  padding-bottom: min(106px, 9.6363636364vw);
}
@media screen and (min-width: 2000px) {
  .why {
    padding-bottom: 5.3vw;
  }
}
.why__bg {
  background-image: url("../images/why/bg.webp");
}
.why__head {
  margin: 0 auto;
  translate: 0 max(-88px, -8vw);
  width: min(929px, 84.4545454545vw);
}
@media screen and (min-width: 2000px) {
  .why__head {
    translate: 0 -4.4vw;
    width: 46.45vw;
  }
}
.why__container {
  position: relative;
  z-index: 1;
  display: grid;
  row-gap: min(103px, 9.3636363636vw);
  padding-top: min(69px, 6.2727272727vw);
  padding-inline: min(30px, 2.7272727273vw);
  padding-bottom: min(108px, 9.8181818182vw);
  width: min(915px, 83.1818181818vw);
  margin-top: min(15px, 1.3636363636vw);
  overflow: hidden;
}
@media screen and (min-width: 2000px) {
  .why__container {
    row-gap: 5.15vw;
    padding-top: 3.45vw;
    padding-inline: 1.5vw;
    padding-bottom: 5.4vw;
    margin-top: 0.75vw;
    width: 45.75vw;
  }
}
.why__container > img {
  margin: 0 auto;
}
.why__container > img:first-of-type {
  position: absolute;
  right: max(-13px, -1.1818181818vw);
  bottom: min(2623px, 238.4545454545vw);
  width: min(697px, 63.3636363636vw);
  z-index: -1;
}
@media screen and (min-width: 2000px) {
  .why__container > img:first-of-type {
    right: -0.65vw;
    bottom: 131.15vw;
    width: 34.85vw;
  }
}
.why__list--1 {
  margin: 0 max(-4.5px, -0.4090909091vw);
  width: min(864px, 78.5454545455vw);
  box-shadow: min(5px, 0.4545454545vw) min(4px, 0.3636363636vw) min(14.72px, 1.3381818182vw) min(1.28px, 0.1163636364vw) rgba(0, 0, 0, 0.14);
}
@media screen and (min-width: 2000px) {
  .why__list--1 {
    margin: 0 -0.225vw;
    width: 43.2vw;
    box-shadow: 0.25vw 0.2vw 0.736vw 0.064vw rgba(0, 0, 0, 0.14);
  }
}
.why__list--2 {
  width: min(789px, 71.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .why__list--2 {
    width: 39.45vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.obstacles {
  position: relative;
  z-index: 1;
  padding-bottom: min(194px, 17.6363636364vw);
}
@media screen and (min-width: 2000px) {
  .obstacles {
    padding-bottom: 9.7vw;
  }
}
.obstacles__bg {
  background-image: url("../images/obstacles/bg.webp");
}
.obstacles__head {
  filter: drop-shadow(min(9px, 0.8181818182vw) min(8px, 0.7272727273vw) min(24.84px, 2.2581818182vw) rgba(19, 19, 19, 0.35));
}
@media screen and (min-width: 2000px) {
  .obstacles__head {
    filter: drop-shadow(0.45vw 0.4vw 1.242vw rgba(19, 19, 19, 0.35));
  }
}
.obstacles__container {
  padding-top: min(187px, 17vw);
  padding-inline: min(38px, 3.4545454545vw);
  padding-bottom: min(126px, 11.4545454545vw);
  margin-top: max(-78px, -7.0909090909vw);
  background-color: #e5e5e5;
}
@media screen and (min-width: 2000px) {
  .obstacles__container {
    padding-top: 9.35vw;
    padding-inline: 1.9vw;
    padding-bottom: 6.3vw;
    margin-top: -3.9vw;
  }
}
.obstacles__container > img {
  margin: 0 auto;
  width: min(901px, 81.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .obstacles__container > img {
    width: 45.05vw;
  }
}
.obstacles__list {
  display: grid;
  row-gap: min(146.5px, 13.3181818182vw);
  margin-top: min(146px, 13.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .obstacles__list {
    row-gap: 7.325vw;
    margin-top: 7.3vw;
  }
}
.obstacles__item {
  position: relative;
  display: grid;
  row-gap: min(66px, 6vw);
  padding-top: min(132px, 12vw);
  padding-bottom: min(126px, 11.4545454545vw);
  margin: 0 max(-6.5px, -0.5909090909vw);
  width: min(937px, 85.1818181818vw);
  background-color: #222222;
  box-shadow: min(5px, 0.4545454545vw) min(4px, 0.3636363636vw) min(14.72px, 1.3381818182vw) min(1.28px, 0.1163636364vw) rgba(0, 0, 0, 0.14);
  z-index: 1;
}
@media screen and (min-width: 2000px) {
  .obstacles__item {
    row-gap: 3.3vw;
    padding-top: 6.6vw;
    padding-bottom: 6.3vw;
    margin: 0 -0.325vw;
    width: 46.85vw;
    box-shadow: 0.25vw 0.2vw 0.736vw 0.064vw rgba(0, 0, 0, 0.14);
  }
}
.obstacles__item::before {
  content: "";
  position: absolute;
  inset: min(10px, 0.9090909091vw);
  border: min(3px, 0.2727272727vw) solid #fff;
  z-index: -1;
}
.obstacles__item > div:first-of-type {
  position: absolute;
  top: max(-38px, -3.4545454545vw);
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: min(229px, 20.8181818182vw);
  height: min(105px, 9.5454545455vw);
  color: #161616;
  font-size: min(55px, 5vw);
  font-weight: 600;
}
@media screen and (min-width: 2000px) {
  .obstacles__item > div:first-of-type {
    top: -1.9vw;
    width: 11.45vw;
    height: 5.25vw;
    font-size: 2.75vw;
  }
}
.obstacles__item > div:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  z-index: -1;
  transform: skew(-15deg);
  filter: drop-shadow(min(9px, 0.8181818182vw) min(8px, 0.7272727273vw) min(14.72px, 1.3381818182vw) rgba(19, 19, 19, 0.61));
}
.obstacles__item-title {
  font-family: "Noto Serif JP", serif;
  color: #fff;
  font-size: min(60px, 5.4545454545vw);
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
@media screen and (min-width: 2000px) {
  .obstacles__item-title {
    font-size: 3vw;
  }
}
.obstacles__item-title span {
  white-space: nowrap;
}
.obstacles__item-title span:first-of-type {
  font-size: min(55px, 5vw);
}
@media screen and (min-width: 2000px) {
  .obstacles__item-title span:first-of-type {
    font-size: 2.75vw;
  }
}
.obstacles__item-body {
  display: grid;
  row-gap: min(66px, 6vw);
  padding-inline: min(44px, 4vw);
}
@media screen and (min-width: 2000px) {
  .obstacles__item-body {
    row-gap: 3.3vw;
    padding-inline: 2.2vw;
  }
}
.obstacles__item-thumb {
  margin: 0 auto;
  width: min(842px, 76.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .obstacles__item-thumb {
    width: 42.1vw;
  }
}
.obstacles__item p {
  color: #fff;
  white-space: nowrap;
}
.obstacles__bottom {
  display: grid;
  row-gap: min(111.25px, 10.1136363636vw);
  margin-top: min(109px, 9.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .obstacles__bottom {
    row-gap: 5.5625vw;
    margin-top: 5.45vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.genre {
  position: relative;
  z-index: 1;
  padding-bottom: min(103px, 9.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .genre {
    padding-bottom: 5.15vw;
  }
}
.genre__bg {
  background-image: url("../images/genre/bg.webp");
}
.genre__bubble {
  position: absolute;
  top: max(-88px, -8vw);
  left: 50%;
  translate: -50% 0;
  width: min(201px, 18.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .genre__bubble {
    top: -4.4vw;
    width: 10.05vw;
  }
}
.genre__head {
  position: relative;
  z-index: 1;
  translate: 0 max(-88px, -8vw);
}
@media screen and (min-width: 2000px) {
  .genre__head {
    translate: 0 -4.4vw;
  }
}
.genre__head::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: 0;
  box-shadow: 0px min(16px, 1.4545454545vw) min(27.26px, 2.4781818182vw) min(1.74px, 0.1581818182vw) rgba(0, 0, 0, 0.42);
  z-index: -1;
}
@media screen and (min-width: 2000px) {
  .genre__head::before {
    box-shadow: 0px 0.8vw 1.363vw 0.087vw rgba(0, 0, 0, 0.42);
  }
}
.genre__container {
  display: grid;
  row-gap: min(100px, 9.0909090909vw);
  padding-top: min(98px, 8.9090909091vw);
  padding-inline: min(36px, 3.2727272727vw);
  padding-bottom: min(117px, 10.6363636364vw);
  margin-top: max(-88px, -8vw);
}
@media screen and (min-width: 2000px) {
  .genre__container {
    row-gap: 5vw;
    padding-top: 4.9vw;
    padding-inline: 1.8vw;
    padding-bottom: 5.85vw;
    margin-top: -4.4vw;
  }
}
.genre__container > img:first-of-type {
  translate: max(-18.5px, -1.6818181818vw);
  width: min(963px, 87.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .genre__container > img:first-of-type {
    translate: max(-18.5px, -0.925vw);
    width: 48.15vw;
  }
}
.genre__container > img:last-of-type {
  width: min(926px, 84.1818181818vw);
}
@media screen and (min-width: 2000px) {
  .genre__container > img:last-of-type {
    width: 46.3vw;
  }
}
.genre__item {
  position: relative;
  z-index: 1;
  padding-top: min(75px, 6.8181818182vw);
  padding-inline: min(47.5px, 4.3181818182vw);
  padding-bottom: min(127px, 11.5454545455vw);
  margin: 0 max(-4.5px, -0.4090909091vw);
  width: min(937px, 85.1818181818vw);
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
  box-shadow: min(5px, 0.4545454545vw) min(4px, 0.3636363636vw) min(14.72px, 1.3381818182vw) min(1.28px, 0.1163636364vw) rgba(19, 19, 19, 0.14);
}
@media screen and (min-width: 2000px) {
  .genre__item {
    padding-top: 3.75vw;
    padding-inline: 2.375vw;
    padding-bottom: 6.35vw;
    margin: 0 -0.225vw;
    width: 46.85vw;
    box-shadow: 0.25vw 0.2vw 0.736vw 0.064vw rgba(19, 19, 19, 0.14);
  }
}
.genre__item::before {
  content: "";
  position: absolute;
  inset: min(8px, 0.7272727273vw);
  z-index: -1;
  background-color: #ffffee;
}
@media screen and (min-width: 2000px) {
  .genre__item::before {
    inset: 0.4vw;
  }
}
.genre__item-title {
  display: grid;
  font-family: "Noto Serif JP", serif;
  font-size: min(57px, 5.1818181818vw);
  line-height: 1.4;
  font-weight: bold;
  color: #161616;
  white-space: nowrap;
}
@media screen and (min-width: 2000px) {
  .genre__item-title {
    font-size: 2.85vw;
  }
}
.genre__item-title span {
  color: #ac6f02;
}
.genre__item-title--1 {
  grid-template-columns: min(116px, 10.5454545455vw) 1fr;
  -moz-column-gap: min(23px, 2.0909090909vw);
  column-gap: min(23px, 2.0909090909vw);
  align-items: flex-end;
}
@media screen and (min-width: 2000px) {
  .genre__item-title--1 {
    grid-template-columns: 5.8vw 1fr;
    -moz-column-gap: 1.15vw;
    column-gap: 1.15vw;
  }
}
.genre__item-title--2 {
  grid-template-columns: min(127px, 11.5454545455vw) 1fr;
  -moz-column-gap: min(9px, 0.8181818182vw);
  column-gap: min(9px, 0.8181818182vw);
  align-items: flex-start;
}
@media screen and (min-width: 2000px) {
  .genre__item-title--2 {
    grid-template-columns: 6.35vw 1fr;
    -moz-column-gap: 0.45vw;
    column-gap: 0.45vw;
  }
}
.genre__item-title--3 {
  grid-template-columns: min(124px, 11.2727272727vw) 1fr;
  -moz-column-gap: min(21px, 1.9090909091vw);
  column-gap: min(21px, 1.9090909091vw);
  align-items: flex-start;
}
@media screen and (min-width: 2000px) {
  .genre__item-title--3 {
    grid-template-columns: 6.2vw 1fr;
    -moz-column-gap: 1.05vw;
    column-gap: 1.05vw;
  }
}
.genre__item > img {
  margin-top: min(59px, 5.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .genre__item > img {
    margin-top: 2.95vw;
  }
}
.genre__item > p {
  margin-top: min(65px, 5.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .genre__item > p {
    margin-top: 3.25vw;
  }
}
.genre__list--1 {
  margin: 0 max(-17.5px, -1.5909090909vw);
  width: min(963px, 87.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .genre__list--1 {
    margin: 0 -0.875vw;
    width: 48.15vw;
  }
}
.genre__list--2 {
  margin: 0 auto;
  width: min(925px, 84.0909090909vw);
}
@media screen and (min-width: 2000px) {
  .genre__list--2 {
    width: 46.25vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.meme {
  position: relative;
  padding-top: min(119px, 10.8181818182vw);
  padding-bottom: min(141px, 12.8181818182vw);
}
@media screen and (min-width: 2000px) {
  .meme {
    padding-top: 5.95vw;
    padding-bottom: 7.05vw;
  }
}
.meme__bg {
  background-image: url("../images/meme/bg.webp");
}
.meme__head {
  margin: 0 auto;
  translate: min(5px, 0.4545454545vw) min(5px, 0.4545454545vw);
  width: min(943px, 85.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .meme__head {
    translate: 0.25vw 0.25vw;
    width: 47.15vw;
  }
}
.meme__container {
  margin-top: min(107px, 9.7272727273vw);
  padding-top: min(98px, 8.9090909091vw);
  padding-inline: min(36.5px, 3.3181818182vw);
  padding-bottom: min(147px, 13.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .meme__container {
    padding-top: 4.9vw;
    padding-inline: 1.825vw;
    padding-bottom: 7.35vw;
    margin-top: 5.35vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.template {
  position: relative;
  padding-bottom: min(142px, 12.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .template {
    padding-bottom: 7.1vw;
  }
}
.template__bg {
  background-image: url("../images/template/bg.webp");
}
.template__head {
  position: relative;
  filter: drop-shadow(0px min(12px, 1.0909090909vw) min(16.56px, 1.5054545455vw) rgba(0, 0, 0, 0.45));
}
@media screen and (min-width: 2000px) {
  .template__head {
    filter: drop-shadow(0px 0.6vw 0.828vw rgba(0, 0, 0, 0.45));
  }
}
.template__container {
  display: grid;
  row-gap: min(100px, 9.0909090909vw);
  padding-top: min(205px, 18.6363636364vw);
  padding-inline: min(44px, 4vw);
  padding-bottom: min(113px, 10.2727272727vw);
  margin-top: max(-212px, -19.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .template__container {
    row-gap: 5vw;
    padding-top: 10.25vw;
    padding-inline: 2.2vw;
    padding-bottom: 5.65vw;
    margin-top: -10.6vw;
  }
}
.template__container > img:first-of-type, .template__container > img:nth-of-type(2) {
  margin: 0 auto;
  width: min(799px, 72.6363636364vw);
}
@media screen and (min-width: 2000px) {
  .template__container > img:first-of-type, .template__container > img:nth-of-type(2) {
    width: 39.95vw;
  }
}
.template__container > img:nth-of-type(3) {
  width: min(817px, 74.2727272727vw);
}
.template__flow {
  margin: 0 auto;
  width: min(799px, 72.6363636364vw);
}
@media screen and (min-width: 2000px) {
  .template__flow {
    width: 39.95vw;
  }
}
.template__list {
  width: min(817px, 74.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .template__list {
    width: 40.85vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.reason {
  position: relative;
  padding-top: min(77px, 7vw);
  padding-bottom: min(109px, 9.9090909091vw);
  overflow: hidden;
}
@media screen and (min-width: 2000px) {
  .reason {
    padding-top: 3.85vw;
    padding-bottom: 5.45vw;
  }
}
.reason__bg {
  background-image: url("../images/reason/bg.webp");
}
@media screen and (max-width: 750px) {
  .reason__bg {
    background-image: url("../images/reason/bg_sp.webp");
  }
}
.reason__head {
  margin: 0 auto;
  width: min(1002px, 91.0909090909vw);
  translate: min(3px, 0.2727272727vw) min(3px, 0.2727272727vw);
}
@media screen and (min-width: 2000px) {
  .reason__head {
    width: 50.1vw;
    translate: 0.15vw 0.15vw;
  }
}
.reason__container {
  display: grid;
  row-gap: min(107px, 9.7272727273vw);
  padding-top: min(106px, 9.6363636364vw);
  padding-inline: min(31.5px, 2.8636363636vw);
  padding-bottom: min(143px, 13vw);
  margin-top: min(104px, 9.4545454545vw);
}
@media screen and (min-width: 2000px) {
  .reason__container {
    row-gap: 5.35vw;
    padding-top: 5.3vw;
    padding-bottom: 7.15vw;
    margin-top: 5.2vw;
  }
}
.reason__list {
  display: grid;
  row-gap: min(226px, 20.5454545455vw);
  margin-top: min(217px, 19.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .reason__list {
    row-gap: 11.3vw;
    margin-top: 10.85vw;
  }
}
.reason__item {
  position: relative;
  box-shadow: min(5px, 0.4545454545vw) min(4px, 0.3636363636vw) min(14.72px, 1.3381818182vw) min(1.28px, 0.1163636364vw) rgba(19, 19, 19, 0.14);
}
@media screen and (min-width: 2000px) {
  .reason__item {
    box-shadow: 0.25vw 0.2vw 0.736vw 0.064vw rgba(19, 19, 19, 0.14);
  }
}
.reason__item-num {
  position: absolute;
  top: 0;
  left: 0;
  translate: 0 -100%;
  width: min(321px, 29.1818181818vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-num {
    width: 16.05vw;
  }
}
.reason__item-head {
  display: grid;
  row-gap: min(29px, 2.6363636364vw);
  padding-top: min(75px, 6.8181818182vw);
  padding-bottom: min(75px, 6.8181818182vw);
  color: #fff;
  font-weight: 600;
  text-align: center;
  background-color: #c40406;
}
@media screen and (min-width: 2000px) {
  .reason__item-head {
    row-gap: 1.45vw;
    padding-top: 3.75vw;
    padding-bottom: 3.75vw;
  }
}
.reason__item-head div:first-of-type {
  font-size: min(55px, 5vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-head div:first-of-type {
    font-size: 2.75vw;
  }
}
.reason__item-head div:first-of-type span:not([class]) {
  font-size: min(50px, 4.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-head div:first-of-type span:not([class]) {
    font-size: 2.5vw;
  }
}
.reason__item-head div:nth-of-type(2) {
  font-size: min(60px, 5.4545454545vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-head div:nth-of-type(2) {
    font-size: 3vw;
  }
}
.reason__item-head div:nth-of-type(2) span:not([class]) {
  font-size: min(55px, 5vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-head div:nth-of-type(2) span:not([class]) {
    font-size: 2.75vw;
  }
}
.reason__item-head div:nth-of-type(3) {
  font-size: min(60px, 5.4545454545vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-head div:nth-of-type(3) {
    font-size: 3vw;
  }
}
.reason__item-body {
  display: grid;
  row-gap: min(98px, 8.9090909091vw);
  padding: min(107px, 9.7272727273vw) min(35px, 3.1818181818vw) min(110px, 10vw);
  background-color: #ffffee;
}
@media screen and (min-width: 2000px) {
  .reason__item-body {
    row-gap: 4.9vw;
    padding: 5.35vw 1.75vw 5.5vw;
  }
}
.reason__item-thumb {
  margin: 0 auto;
  width: min(842px, 76.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .reason__item-thumb {
    width: 42.1vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.release {
  padding-top: min(106px, 9.6363636364vw);
  padding-bottom: min(102px, 9.2727272727vw);
  background-image: url("../images/release/bg.webp");
  background-position: top center;
  background-size: cover;
}
@media screen and (min-width: 2000px) {
  .release {
    padding-top: 5.3vw;
    padding-bottom: 5.1vw;
  }
}
.release__container {
  padding-inline: min(68px, 6.1818181818vw);
  padding-bottom: min(101px, 9.1818181818vw);
}
@media screen and (min-width: 2000px) {
  .release__container {
    padding-inline: 3.4vw;
    padding-bottom: 5.05vw;
  }
}
.release__head {
  margin: 0 max(-68px, -6.1818181818vw);
  width: min(1000px, 90.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .release__head {
    margin: 0 -3.4vw;
    width: 50vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.contents {
  position: relative;
  padding-bottom: min(107px, 9.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .contents {
    padding-bottom: 5.35vw;
  }
}
.contents__bg {
  background-image: url("../images/contents/bg.webp");
}
.contents__head {
  filter: drop-shadow(0px min(12px, 1.0909090909vw) min(16.56px, 1.5054545455vw) rgba(0, 0, 0, 0.45));
}
@media screen and (min-width: 2000px) {
  .contents__head {
    filter: drop-shadow(0px 0.6vw 0.828vw rgba(0, 0, 0, 0.45));
  }
}
.contents__container {
  padding-top: min(776px, 70.5454545455vw);
  padding-inline: min(31px, 2.8181818182vw);
  padding-bottom: min(106px, 9.6363636364vw);
  margin-top: max(-716px, -65.0909090909vw);
}
@media screen and (min-width: 2000px) {
  .contents__container {
    padding-top: 38.8vw;
    padding-inline: 1.55vw;
    padding-bottom: 5.3vw;
    margin-top: -35.8vw;
  }
}
.contents__container p {
  translate: max(-10px, -0.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .contents__container p {
    translate: -0.5vw;
  }
}
.contents__list {
  display: grid;
  row-gap: min(108px, 9.8181818182vw);
  margin-top: min(103px, 9.3636363636vw);
  margin-bottom: min(111px, 10.0909090909vw);
}
@media screen and (min-width: 2000px) {
  .contents__list {
    row-gap: 5.4vw;
    margin-top: 5.15vw;
    margin-bottom: 5.55vw;
  }
}
.contents__item {
  position: relative;
  z-index: 1;
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
  box-shadow: min(5px, 0.4545454545vw) min(4px, 0.3636363636vw) min(14.72px, 1.3381818182vw) min(1.28px, 0.1163636364vw) rgba(19, 19, 19, 0.14);
}
@media screen and (min-width: 2000px) {
  .contents__item {
    box-shadow: 0.25vw 0.2vw 0.736vw 0.064vw rgba(19, 19, 19, 0.14);
  }
}
.contents__item-bg {
  position: absolute;
  inset: min(8px, 0.7272727273vw);
  z-index: -1;
  background-color: #fff;
}
@media screen and (min-width: 2000px) {
  .contents__item-bg {
    inset: 0.4vw;
  }
}
.contents__item-bg::before {
  content: "";
  position: absolute;
  inset: min(10px, 0.9090909091vw);
  z-index: -1;
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
}
@media screen and (min-width: 2000px) {
  .contents__item-bg::before {
    inset: 0.5vw;
  }
}
.contents__item-bg::after {
  content: "";
  position: absolute;
  inset: min(15px, 1.3636363636vw);
  z-index: -1;
  background-color: #fff;
}
@media screen and (min-width: 2000px) {
  .contents__item-bg::after {
    inset: 0.75vw;
  }
}
.contents__item-body {
  display: grid;
  row-gap: min(64px, 5.8181818182vw);
  padding: min(63px, 5.7272727273vw) min(51px, 4.6363636364vw) min(131px, 11.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .contents__item-body {
    row-gap: 3.2vw;
    padding: 3.15vw 2.55vw 6.55vw;
  }
}
.contents__item-thumb {
  margin: 0 max(-3px, -0.2727272727vw);
  width: min(842px, 76.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .contents__item-thumb {
    margin: 0 -0.15vw;
    width: 42.1vw;
  }
}
.contents__item-list {
  width: min(789px, 71.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .contents__item-list {
    width: 39.45vw;
  }
}
.contents__desc {
  margin-top: min(107px, 9.7272727273vw);
  margin-bottom: min(108px, 9.8181818182vw);
  translate: 3% 0;
  width: min(789px, 71.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .contents__desc {
    margin-top: 5.35vw;
    margin-bottom: 5.4vw;
    width: 39.45vw;
  }
}
.contents__service {
  display: grid;
  row-gap: min(94px, 8.5454545455vw);
  margin: min(97px, 8.8181818182vw) max(-17px, -1.5454545455vw) min(101px, 9.1818181818vw);
  width: min(972px, 88.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .contents__service {
    row-gap: 4.7vw;
    margin: 4.85vw -0.85vw 5.05vw;
    width: 48.6vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.price {
  position: relative;
  padding-bottom: min(111px, 10.0909090909vw);
  overflow: hidden;
}
@media screen and (min-width: 2000px) {
  .price {
    padding-bottom: 5.55vw;
  }
}
.price__bg {
  background-image: url("../images/price/bg.webp");
}
@media screen and (max-width: 750px) {
  .price__bg {
    background-image: url("../images/price/bg_sp.webp");
    background-position: 0 8%;
    background-color: #000;
  }
}
.price__head {
  overflow: hidden;
}
.price__head img {
  margin: 0 auto;
  width: min(1069px, 97.1818181818vw);
  translate: min(3px, 0.2727272727vw) 0;
}
@media screen and (min-width: 2000px) {
  .price__head img {
    width: 53.45vw;
    translate: 0.15vw 0;
  }
}
@media screen and (max-width: 1078px) {
  .price__head img {
    width: 100%;
  }
}
.price__container {
  display: grid;
  row-gap: min(94px, 8.5454545455vw);
  margin-top: min(68px, 6.1818181818vw);
  padding-top: min(104px, 9.4545454545vw);
  padding-inline: min(42.5px, 3.8636363636vw);
  padding-bottom: min(110px, 10vw);
}
@media screen and (min-width: 2000px) {
  .price__container {
    row-gap: 4.7vw;
    margin-top: 3.4vw;
    padding-bottom: 5.5vw;
    padding-inline: 2.125vw;
    padding-top: 5.2vw;
  }
}
.price__detail .red {
  font-family: "Oswald", sans-serif;
  font-size: min(156px, 14.1818181818vw);
}
.price__detail .red span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(75px, 6.8181818182vw);
}
.price__detail > span:last-of-type {
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(54px, 4.9090909091vw);
}
.price__condition {
  margin: 0 max(-7.5px, -0.6818181818vw);
  width: min(930px, 84.5454545455vw);
}
@media screen and (min-width: 2000px) {
  .price__condition {
    margin: 0 max(-7.5px, -0.375vw);
    width: 46.5vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.message {
  background-image: url("../images/message/bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
.message__head {
  filter: drop-shadow(0px min(8px, 0.7272727273vw) min(26.68px, 2.4254545455vw) rgba(0, 0, 0, 0.45));
}
@media screen and (min-width: 2000px) {
  .message__head {
    filter: drop-shadow(0px 8px 26.68px rgba(0, 0, 0, 0.45));
  }
}
.message__container {
  padding-top: min(233px, 21.1818181818vw);
  padding-inline: min(48px, 4.3636363636vw);
  padding-bottom: min(110px, 10vw);
  margin-top: max(-146px, -13.2727272727vw);
  background-color: transparent;
  box-shadow: none;
}
@media screen and (min-width: 2000px) {
  .message__container {
    padding-top: 11.65vw;
    padding-inline: 2.4vw;
    padding-bottom: 5.5vw;
    margin-top: -7.3vw;
  }
}

/* ==========================================================================
  Foundation
========================================================================== */
.cta {
  padding-top: min(102px, 9.2727272727vw);
  padding-bottom: min(109px, 9.9090909091vw);
  background-image: url("../images/cta/bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (min-width: 2000px) {
  .cta {
    padding-top: 5.1vw;
    padding-bottom: 5.45vw;
  }
}
.cta__head {
  margin: 0 auto;
  width: min(991px, 90.0909090909vw);
  translate: min(8px, 0.7272727273vw) 0;
}
@media screen and (min-width: 2000px) {
  .cta__head {
    width: 49.55vw;
    translate: 0.4vw 0;
  }
}
@media screen and (max-width: 1078px) {
  .cta__head {
    translate: none;
  }
}
.cta__price {
  position: relative;
  z-index: 1;
  padding: min(92.5px, 8.4090909091vw) min(119.5px, 10.8636363636vw);
  margin: min(81px, 7.3636363636vw) auto 0;
  width: min(915px, 83.1818181818vw);
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
}
@media screen and (min-width: 2000px) {
  .cta__price {
    padding: 4.625vw 5.975vw;
    margin-top: 4.05vw;
    width: 45.75vw;
  }
}
.cta__price-bg {
  position: absolute;
  inset: min(8px, 0.7272727273vw);
  z-index: -1;
  background-color: #fff;
}
@media screen and (min-width: 2000px) {
  .cta__price-bg {
    inset: 0.4vw;
  }
}
.cta__price-bg::before {
  content: "";
  position: absolute;
  inset: min(10px, 0.9090909091vw);
  z-index: -1;
  background-image: linear-gradient(to bottom, #cb9d39 0%, #f6f39e 25%, #bb8a17 44%, #f6f39e 66%, #bb8a17 100%);
}
@media screen and (min-width: 2000px) {
  .cta__price-bg::before {
    inset: 0.5vw;
  }
}
.cta__price-bg::after {
  content: "";
  position: absolute;
  inset: min(15px, 1.3636363636vw);
  z-index: -1;
  background-color: #fff;
}
@media screen and (min-width: 2000px) {
  .cta__price-bg::after {
    inset: 0.75vw;
  }
}
.cta__price-head {
  position: relative;
  padding-bottom: min(26px, 2.3636363636vw);
  color: #161616;
  font-size: min(70px, 6.3636363636vw);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (min-width: 2000px) {
  .cta__price-head {
    padding-bottom: 1.3vw;
    font-size: 3.5vw;
  }
}
.cta__price-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: min(9px, 0.8181818182vw);
  background-color: #c40406;
}
.cta__price > div p {
  text-align: center;
}
.cta__price > div:nth-of-type(2) p:first-of-type {
  margin-top: min(37px, 3.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .cta__price > div:nth-of-type(2) p:first-of-type {
    margin-top: 1.85vw;
  }
}
.cta__price > div:nth-of-type(2) p:first-of-type span {
  font-family: "Oswald", sans-serif;
  font-size: min(78px, 7.0909090909vw);
}
@media screen and (min-width: 2000px) {
  .cta__price > div:nth-of-type(2) p:first-of-type span {
    font-size: 3.9vw;
  }
}
.cta__price > div:nth-of-type(2) p:last-of-type {
  margin-top: min(27px, 2.4545454545vw);
}
@media screen and (min-width: 2000px) {
  .cta__price > div:nth-of-type(2) p:last-of-type {
    margin-top: 1.35vw;
  }
}
.cta__price > div:nth-of-type(3) {
  margin-top: min(66px, 6vw);
}
@media screen and (min-width: 2000px) {
  .cta__price > div:nth-of-type(3) {
    margin-top: 3.3vw;
  }
}
.cta__price > div:nth-of-type(3) p {
  margin-top: min(37px, 3.3636363636vw);
}
@media screen and (min-width: 2000px) {
  .cta__price > div:nth-of-type(3) p {
    margin-top: 1.85vw;
  }
}
.cta > p {
  margin-top: min(105px, 9.5454545455vw);
  color: #fff;
  font-size: min(93px, 8.4545454545vw);
  font-weight: 600;
  text-align: center;
}
@media screen and (min-width: 2000px) {
  .cta > p {
    margin-top: 5.25vw;
    font-size: 4.65vw;
  }
}
.cta > p span {
  font-size: min(65px, 5.9090909091vw);
}
@media screen and (min-width: 2000px) {
  .cta > p span {
    font-size: 3.25vw;
  }
}
.cta > p + div {
  display: flex;
  justify-content: center;
  -moz-column-gap: min(53px, 4.8181818182vw);
  column-gap: min(53px, 4.8181818182vw);
  margin-top: min(68px, 6.1818181818vw);
  margin-bottom: min(74px, 6.7272727273vw);
}
@media screen and (min-width: 2000px) {
  .cta > p + div {
    -moz-column-gap: 2.65vw;
    column-gap: 2.65vw;
    margin-top: 3.4vw;
    margin-bottom: 3.7vw;
  }
}
.cta > p + div span {
  display: block;
  width: min(94px, 8.5454545455vw);
  height: min(43px, 3.9090909091vw);
  background-color: #c40406;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}
@media screen and (min-width: 2000px) {
  .cta > p + div span {
    width: 4.7vw;
    height: 2.15vw;
  }
}
.cta__btn {
  display: block;
  margin: 0 auto;
  width: min(925px, 84.0909090909vw);
  filter: drop-shadow(0px min(14px, 1.2727272727vw) min(10px, 0.9090909091vw) rgba(0, 0, 0, 0.76));
}
@media screen and (min-width: 2000px) {
  .cta__btn {
    width: 46.25vw;
    filter: drop-shadow(0px 0.7vw 0.5vw rgba(0, 0, 0, 0.76));
  }
}
.cta__btn:nth-of-type(2) {
  margin-top: min(75px, 6.8181818182vw);
}
@media screen and (min-width: 2000px) {
  .cta__btn:nth-of-type(2) {
    margin-top: 3.75vw;
  }
}
.cta__btn:nth-of-type(3) {
  margin-top: min(77px, 7vw);
}
@media screen and (min-width: 2000px) {
  .cta__btn:nth-of-type(3) {
    margin-top: 3.85vw;
  }
}

.u-relative {
  position: relative;
}
.u-absolute {
  position: absolute;
}

.u-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    scale: 0.9;
  }
  50% {
    scale: 1.05;
  }
  100% {
    scale: 0.9;
  }
}

#footer {  
	background-color: #B81C22;