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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

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

abbr[title] {
  text-decoration: underline dotted;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

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

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

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

th {
  text-align: left;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

a {
  user-select: none;
}

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

html {
  scroll-behavior: smooth;
  font-size: 2.5641025641vw;
}
@media (min-width: 540px) {
  html {
    font-size: 10px;
  }
}

body {
  font-family: "YakuHanJP", "Noto Sans JP", "Zen Kaku Gothic New", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: max(1.376rem, 1.0582010582vw);
  line-height: 1.6;
  letter-spacing: 0.03em;
  font-feature-settings: "palt";
  vertical-align: baseline;
  word-break: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-break: strict;
  text-align: justify;
  -webkit-text-size-adjust: 100%;
}

dl, dt, th, dd, label {
  font-weight: 400;
}

.block {
  display: block;
}

@media (min-width: 1024px) {
  .under-pc {
    display: none;
  }
}

@media (min-width: 768px) {
  .under-tab_over-pc {
    display: none;
  }
}
@media (min-width: 1024px) {
  .under-tab_over-pc {
    display: block;
  }
}

@media (min-width: 768px) {
  .under-tab {
    display: none;
  }
}

@media (min-width: 540px) {
  .under-sp_over-tab {
    display: none;
  }
}
@media (min-width: 768px) {
  .under-sp_over-tab {
    display: block;
  }
}

@media (min-width: 540px) {
  .under-sp_in-tab {
    display: none;
  }
}
@media (min-width: 768px) {
  .under-sp_in-tab {
    display: block;
  }
}
@media (min-width: 1024px) {
  .under-sp_in-tab {
    display: none;
  }
}

@media (min-width: 540px) {
  .under-sp_in-tabml {
    display: none;
  }
}
@media (min-width: 768px) {
  .under-sp_in-tabml {
    display: block;
  }
}
@media (min-width: 920px) {
  .under-sp_in-tabml {
    display: none;
  }
}

@media (min-width: 540px) {
  .under-sp_in-mlpc {
    display: none;
  }
}
@media (min-width: 920px) {
  .under-sp_in-mlpc {
    display: block;
  }
}
@media (min-width: 1024px) {
  .under-sp_in-mlpc {
    display: none;
  }
}

@media (min-width: 540px) {
  .under-sp_over-pc {
    display: none;
  }
}
@media (min-width: 1024px) {
  .under-sp_over-pc {
    display: block;
  }
}

@media (min-width: 540px) {
  .under-sp {
    display: none;
  }
}

.over-sp {
  display: none;
}
@media (min-width: 540px) {
  .over-sp {
    display: block;
  }
}

.in-sp_in-tab {
  display: none;
}
@media (min-width: 540px) {
  .in-sp_in-tab {
    display: block;
  }
}
@media (min-width: 1024px) {
  .in-sp_in-tab {
    display: none;
  }
}

.in-sp_over-pc {
  display: none;
}
@media (min-width: 540px) {
  .in-sp_over-pc {
    display: block;
  }
}
@media (min-width: 768px) {
  .in-sp_over-pc {
    display: none;
  }
}
@media (min-width: 1024px) {
  .in-sp_over-pc {
    display: block;
  }
}

.in-sp_over-ml {
  display: none;
}
@media (min-width: 540px) {
  .in-sp_over-ml {
    display: block;
  }
}
@media (min-width: 768px) {
  .in-sp_over-ml {
    display: none;
  }
}
@media (min-width: 920px) {
  .in-sp_over-ml {
    display: block;
  }
}

.in-sp {
  display: none;
}
@media (min-width: 540px) {
  .in-sp {
    display: block;
  }
}
@media (min-width: 768px) {
  .in-sp {
    display: none;
  }
}

.over-tab {
  display: none;
}
@media (min-width: 768px) {
  .over-tab {
    display: block;
  }
}

.in-tab {
  display: none;
}
@media (min-width: 768px) {
  .in-tab {
    display: block;
  }
}
@media (min-width: 1024px) {
  .in-tab {
    display: none;
  }
}

.over-pc {
  display: none;
}
@media (min-width: 1024px) {
  .over-pc {
    display: block;
  }
}

.over-ml {
  display: none;
}
@media (min-width: 920px) {
  .over-ml {
    display: block;
  }
}

.scroll_top {
  position: fixed;
  right: max(1.47rem, 0.9920634921vw);
  bottom: max(1.47rem, 0.9920634921vw);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(5.292rem, 3.5714285714vw);
  height: max(5.292rem, 3.5714285714vw);
  border-radius: 50%;
  overflow: hidden;
  font-size: max(1.96rem, 1.3227513228vw);
  line-height: max(5.292rem, 3.5714285714vw);
  text-align: center;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  opacity: 0;
}
.scroll_top svg circle {
  fill: #ffffff;
  transition: all 0.3s ease-in-out;
}
.scroll_top:hover svg circle {
  fill: #FFE55F;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(19.6rem, 13.2275132275vw);
  padding: max(1.568rem, 1.0582010582vw) max(4.704rem, 3.1746031746vw);
  border: 1px solid #EEEBE9;
  border-radius: max(0.392rem, 0.2645502646vw);
  font-size: max(1.764rem, 1.1904761905vw);
  color: #533833;
  background: #ffffff;
  transition: 0.3s;
}
.button:hover {
  background: #F5F5F5;
}
.button:disabled {
  background: #CBC3BE;
  color: #ffffff;
}

.pageTitle {
  padding-block: max(6.344rem, 6.8783068783vw);
  color: #533833;
  margin-top: max(5.586rem, 3.7698412698vw);
}
@media (min-width: 850px) {
  .pageTitle {
    margin-top: max(7.154rem, 4.828042328vw);
  }
}
.pageTitle h1 {
  font-size: max(3.066rem, 2.7777777778vw);
  font-weight: 700;
}
.pageTitle .titleS {
  margin-top: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  font-size: max(1.548rem, 1.1904761905vw);
}

@keyframes line01 {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 100%;
  }
}
@keyframes loupe {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes slide {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes fadeUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(-100%) scaleX(0.9) scaleY(1.2);
  }
  98% {
    opacity: 1;
    transform: translateY(0) scaleX(1.1) scaleY(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}
@keyframes playbutton {
  0% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  6.25% {
    transform: translateY(-10px) scaleX(0.9) scaleY(1.1);
  }
  10% {
    transform: translateY(2px) scaleX(1.1) scaleY(0.9);
  }
  12.5% {
    transform: translateY(-3px) scaleX(0.9) scaleY(1.1);
  }
  15% {
    transform: translateY(1px) scaleX(1.1) scaleY(0.9);
  }
  18.75% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}
@keyframes turn {
  0% {
    transform: rotateY(1turn);
  }
}
@keyframes parallaxA {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(160px);
  }
}
@keyframes parallaxPen {
  from {
    transform: translateX(0) translateY(0) rotate(0);
  }
  to {
    transform: translateX(80px) translateY(40px) rotate(40deg);
  }
}
@keyframes parallaxSolution {
  from {
    transform: translateX(200%) translateY(100%);
  }
  to {
    transform: translateX(250%) translateY(-400%);
  }
}
@keyframes bgClip {
  0% {
    transform: translateX(256%) translateY(80%) rotate(0);
  }
  50% {
    transform: translateX(200%) translateY(80%) rotate(1turn);
  }
  100% {
    transform: translateX(256%) translateY(80%) rotate(0);
  }
}
@keyframes bgCamera {
  0% {
    transform: translateX(263%) translateY(73%) scale(1);
  }
  40% {
    transform: translateX(263%) translateY(73%) scale(1);
  }
  50% {
    transform: translateX(263%) translateY(73%) scale(1.2);
  }
  60% {
    transform: translateX(263%) translateY(73%) scale(1);
  }
  100% {
    transform: translateX(263%) translateY(73%) scale(1);
  }
}
@keyframes bgPen {
  0% {
    transform: translateX(100%) translateY(49%) rotate(0);
  }
  33% {
    transform: translateX(200%) translateY(49%) rotate(15deg);
  }
  66% {
    transform: translateX(200%) translateY(49%) rotate(-15deg);
  }
  100% {
    transform: translateX(100%) translateY(49%) rotate(0);
  }
}
@keyframes bgZoom {
  0% {
    transform: translateY(-50%) scale(1);
  }
  20% {
    transform: translateY(-50%) scale(1);
  }
  50% {
    transform: translateY(-50%) scale(0.5);
  }
  80% {
    transform: translateY(-50%) scale(1);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}
.flyer_pagesSelect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(8rem, 5.291005291vw, 8rem), 1fr));
  gap: clamp(1.6rem, 1.0582010582vw, 1.6rem);
  width: 100%;
}
@media (min-width: 540px) {
  .flyer_pagesSelect {
    grid-template-columns: repeat(auto-fit, minmax(clamp(9rem, 5.9523809524vw, 9rem), 1fr));
  }
}
@media (min-width: 768px) {
  .flyer_pagesSelect {
    grid-template-columns: repeat(auto-fit, minmax(clamp(11rem, 7.2751322751vw, 11rem), 1fr));
  }
}
.flyer_pagesSelect:has(*:user-invalid) {
  border: 2px solid #D5272F;
}
.flyer_pagesSelect img {
  width: clamp(6.86rem, 4.6296296296vw, 7rem);
  height: clamp(6.566rem, 4.4312169312vw, 6.7rem);
  object-fit: contain;
}

.web_pagesSelect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(110px, 7.2751322751vw), 1fr));
  gap: max(16px, 1.0582010582vw);
  width: 100%;
}
.web_pagesSelect:has(*:user-invalid) {
  border: 2px solid #D5272F;
}

.anim_deviceSelect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(11rem, 7.2751322751vw, 11rem), 1fr));
  gap: clamp(1.6rem, 1.0582010582vw, 1.6rem);
  width: 100%;
}
.anim_deviceSelect:has(*:user-invalid) {
  border: 2px solid #D5272F;
}

.selecer_radio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.selecer_radio input[type=radio] {
  width: 0;
  height: 0;
}
.selecer_radio img {
  width: clamp(9.8rem, 6.6137566138vw, 10rem);
  height: clamp(9.408rem, 6.3492063492vw, 9.6rem);
  object-fit: scale-down;
}
.selecer_radio:has(input[type=radio]:checked) img {
  background: #F1815C;
}
.selecer_radio span {
  white-space: nowrap;
  font-size: clamp(1.372rem, 0.9259259259vw, 1.4rem);
  line-height: 1.3;
}
.selecer_radio span.small {
  font-size: clamp(1.176rem, 0.7936507937vw, 1.2rem);
}

.submitCheckWrap {
  padding-bottom: max(2.44rem, 2.6455026455vw);
  padding-inline: max(2.44rem, 2.6455026455vw);
  background: #EEEBE9;
  border-radius: 0 0 max(2.744rem, 1.8518518519vw) max(2.744rem, 1.8518518519vw);
}
.submitCheckWrap .privacypolicyCheck {
  margin-inline: auto;
}
.submitCheckWrap .privacypolicyCheck p {
  text-align: center;
}
.submitCheckWrap .privacypolicyCheck > div {
  margin-top: max(0.688rem, 0.5291005291vw);
}
.submitCheckWrap .privacypolicyCheck .privacypolicyButton {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  color: #1A0DAB;
  cursor: pointer;
  font-size: max(1.376rem, 1.0582010582vw);
}
.submitCheckWrap .privacypolicyCheck .privacypolicyButton img {
  margin-left: max(0.392rem, 0.2645502646vw);
  width: max(1.032rem, 0.7936507937vw);
  filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(1848%) hue-rotate(322deg) brightness(96%) contrast(85%);
  vertical-align: baseline;
  transition: all 0.3s ease-in-out;
}
.submitCheckWrap .privacypolicyCheck label {
  margin-top: max(0.488rem, 0.5291005291vw);
  display: flex;
  justify-content: center;
  gap: max(0.244rem, 0.2645502646vw);
  text-align: left;
  line-height: 1.2;
}
.submitCheckWrap .privacypolicyCheck input[type=checkbox] {
  flex-shrink: 0;
  margin-top: max(0.244rem, 0.2645502646vw);
  width: 1em;
  height: 1em;
  border: 2px solid #533833;
  border-radius: 2px;
  appearance: none;
  background: #ffffff;
  position: relative;
}
.submitCheckWrap .privacypolicyCheck input[type=checkbox]:checked::after {
  position: absolute;
  top: -2px;
  left: -2px;
  color: #533833;
  border-radius: 2px;
  background: #F1815C no-repeat url("../img/icons/icons/icon_check.svg") center 60%;
  background-size: 0.8em 0.61em;
  display: block;
  content: "";
  width: 1em;
  height: 1em;
}
.submitCheckWrap .submitButton {
  margin: max(1.464rem, 1.5873015873vw) auto;
  display: flex;
  padding: max(1.568rem, 1.0582010582vw) max(4.704rem, 3.1746031746vw);
  justify-content: center;
  align-items: center;
  border-radius: max(0.392rem, 0.2645502646vw);
  background: #A5A4A4;
  color: #ffffff;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}
.submitCheckWrap:has(input[type=checkbox]:checked) .submitButton {
  background: #533833;
  pointer-events: auto;
}
.submitCheckWrap:has(input[type=checkbox]:checked) .submitButton:hover {
  background: #A0CE4C;
}

.c_wrap {
  width: max(4.891rem, 4.4312169312vw);
  height: max(4.964rem, 4.4973544974vw);
  position: relative;
  transform-origin: left bottom;
  animation: wrap 1.6s ease-out infinite;
}
.c_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c_wrap .c_body {
  width: max(4.38rem, 3.9682539683vw);
  height: max(3.942rem, 3.5714285714vw);
  position: absolute;
  top: 0;
  right: max(0.146rem, 0.1322751323vw);
  z-index: 2;
  transform-origin: center bottom;
  animation: body 1.6s infinite;
}
.c_wrap .c_rightarm {
  width: max(1.679rem, 1.5211640212vw);
  height: max(1.095rem, 0.9920634921vw);
  position: absolute;
  left: calc(max(0.146rem, 0.1322751323vw) * -1);
  top: max(1.22rem, 1.3227513228vw);
  z-index: 3;
  transform-origin: right top;
  animation: rightarm 1.6s infinite;
}
.c_wrap .c_leftarm {
  width: max(1.46rem, 1.3227513228vw);
  height: max(1.387rem, 1.2566137566vw);
  position: absolute;
  right: 0;
  top: max(0.073rem, 0.0661375661vw);
  z-index: 1;
  transform-origin: left top;
  animation: leftarm 1.6s infinite;
}
.c_wrap .c_rightfoot {
  width: max(1.898rem, 1.7195767196vw);
  height: max(2.409rem, 2.1825396825vw);
  position: absolute;
  bottom: calc(max(0.219rem, 0.1984126984vw) * -1);
  left: max(1.095rem, 0.9920634921vw);
  transform-origin: right top;
  animation: rightarm 1.6s infinite;
}
.c_wrap .c_leftfoot {
  width: max(2.117rem, 1.917989418vw);
  height: max(1.533rem, 1.3888888889vw);
  position: absolute;
  right: calc(max(0.438rem, 0.3968253968vw) * -1);
  top: max(1.525rem, 1.6534391534vw);
  transform-origin: left top;
  animation: leftfoot 1.6s infinite;
}

@keyframes wrap {
  0% {
    transform: rotate(7.5deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(7.5deg);
  }
}
@keyframes body {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.98) scaleX(1.02);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes rightarm {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-5deg);
  }
}
@keyframes leftarm {
  0% {
    transform: rotate(7deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(7deg);
  }
}
@keyframes rightfoot {
  0% {
    transform: rotate(0) skew(1);
  }
  50% {
    transform: rotate(-5deg) skew(1.1);
  }
  100% {
    transform: rotate(0) skew(1);
  }
}
@keyframes leftfoot {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}
.wrapper {
  min-height: 100vh;
  width: 100%;
  color: #533833;
  position: relative;
  background: #533833;
}

main.ly_main {
  min-height: 100%;
  width: 100%;
  padding-top: max(5.84rem, 5.291005291vw);
}

.wrappedlayout {
  margin-top: calc(-1 * max(2.92rem, 2.6455026455vw));
  background: #533833;
  padding-right: max(1.568rem, 1.0582010582vw);
  padding-left: max(1.568rem, 1.0582010582vw);
}
@media (min-width: 768px) {
  .wrappedlayout {
    padding-left: max(7.592rem, 6.8783068783vw);
    padding-right: max(2.92rem, 2.6455026455vw);
  }
}

.container {
  margin-inline: auto;
  padding-inline: max(2.352rem, 1.5873015873vw);
}
@media (min-width: 768px) {
  .container {
    padding-inline: max(9.344rem, 8.4656084656vw);
  }
}

.container16 {
  margin-inline: auto;
  padding-inline: max(1.568rem, 1.0582010582vw);
}
@media (min-width: 768px) {
  .container16 {
    padding-inline: max(9.344rem, 8.4656084656vw);
  }
}

.ly_gridModal {
  display: grid;
  grid-template-rows: min-content auto;
}

.ly_gridCalcArea {
  display: grid;
  grid-template-rows: min-content auto;
  height: 100%;
}
.ly_gridCalcArea .gridTop {
  height: auto;
  width: 100%;
}
.ly_gridCalcArea .gridMiddle {
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: #81CAEE transparent;
}

a {
  display: inline-block;
  color: #1A0DAB;
}
a:hover {
  opacity: 0.6;
}

footer {
  padding-block: max(6.344rem, 6.8783068783vw);
  background: #533833;
  color: #ffffff;
  position: sticky;
  top: 100vh;
}
footer a {
  color: #ffffff;
}
footer a:hover {
  color: #F1815C;
}
footer .designOfficeName {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(0.292rem, 0.2645502646vw);
  flex-wrap: wrap;
  font-size: max(1.376rem, 1.0582010582vw);
  line-height: 1;
}
footer .designOfficeName .name {
  font-size: max(1.752rem, 1.5873015873vw);
}
footer address {
  margin-top: max(1.752rem, 1.5873015873vw);
  font-size: max(1.376rem, 1.0582010582vw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 1em;
}
footer address .fax {
  margin-left: max(0.584rem, 0.5291005291vw);
}
footer .officialSiteURL {
  margin-block: max(3.904rem, 4.2328042328vw);
  margin-inline: auto;
  font-size: max(1.376rem, 1.0582010582vw);
  display: flex;
  gap: max(2.44rem, 2.6455026455vw);
  flex-direction: column;
  width: max(19.6rem, 13.2275132275vw);
}
@media (min-width: 540px) {
  footer .officialSiteURL {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
footer .officialSiteURL a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: max(0.784rem, 0.5291005291vw);
  height: max(3.136rem, 2.1164021164vw);
  padding: max(0.784rem, 0.5291005291vw) max(2.352rem, 1.5873015873vw) max(0.784rem, 0.5291005291vw) max(1.568rem, 1.0582010582vw);
  border-radius: max(2.352rem, 1.5873015873vw);
  background: #ffffff;
  color: #533833;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(1.568rem, 1.0582010582vw);
  font-weight: 800;
  line-height: 0.9;
  white-space: nowrap;
}
@media (min-width: 540px) {
  footer .officialSiteURL a {
    padding: max(0.784rem, 0.5291005291vw) max(2.352rem, 1.5873015873vw);
    justify-content: center;
    height: auto;
  }
}
footer .officialSiteURL a.contact {
  letter-spacing: 0.08em;
}
@media (min-width: 540px) {
  footer .officialSiteURL a.contact {
    letter-spacing: 0.03em;
  }
}
footer .officialSiteURL a img {
  width: max(2.352rem, 1.5873015873vw);
  height: max(2.352rem, 1.5873015873vw);
  object-fit: contain;
  flex-shrink: 0;
}
footer small {
  margin: auto;
  width: fit-content;
  display: block;
  text-align: left;
  font-weight: 300;
  font-size: max(0.876rem, 0.7936507937vw);
  text-align: center;
}

.verticalLogo {
  position: fixed;
  top: max(5.84rem, 5.291005291vw);
  z-index: 7500;
  height: 100vh;
  width: max(2.44rem, 2.6455026455vw);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media (min-width: 768px) {
  .verticalLogo {
    width: max(7.592rem, 6.8783068783vw);
  }
}
.verticalLogo img {
  display: none;
}
@media (min-width: 768px) {
  .verticalLogo img {
    display: block;
    margin-top: max(0.584rem, 0.5291005291vw);
    width: auto;
    height: auto;
    max-width: max(2.628rem, 2.380952381vw);
    max-height: calc(100svh - max(6.424rem, 5.8201058201vw) - max(0.584rem, 0.5291005291vw));
    object-fit: contain;
    filter: brightness(0) invert(100);
  }
}

.verticalLeft {
  position: sticky;
  top: max(5.84rem, 5.291005291vw);
  z-index: 7400;
  height: 100vh;
  width: max(2.44rem, 2.6455026455vw);
  background: #533833;
}
@media (min-width: 768px) {
  .verticalLeft {
    width: max(7.592rem, 6.8783068783vw);
  }
}

.verticalRight {
  position: sticky;
  top: max(5.84rem, 5.291005291vw);
  right: 0;
  z-index: 7500;
  height: 100vh;
  width: max(2.44rem, 2.6455026455vw);
  background: #533833;
  pointer-events: none;
}
@media (min-width: 768px) {
  .verticalRight {
    width: max(2.92rem, 2.6455026455vw);
  }
}

header {
  position: fixed;
  top: 0;
  z-index: 7500;
  width: 100%;
  display: grid;
  grid-template-columns: auto min-content;
  align-items: center;
  height: max(5.84rem, 5.291005291vw);
  background: #533833;
  padding-right: max(2.44rem, 2.6455026455vw);
  overscroll-behavior: contain;
}
@media (min-width: 768px) {
  header {
    padding-right: max(2.92rem, 2.6455026455vw);
  }
}
header .mark {
  margin-left: max(2.44rem, 2.6455026455vw);
  width: max(4.015rem, 3.6375661376vw);
  height: max(4.015rem, 3.6375661376vw);
  filter: brightness(0) invert(100);
}
@media (min-width: 768px) {
  header .mark {
    margin-left: max(1.606rem, 1.455026455vw);
  }
}

.corner {
  position: sticky;
  top: max(5.84rem, 5.291005291vw);
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.corner > div {
  width: max(2.92rem, 2.6455026455vw);
  height: max(2.92rem, 2.6455026455vw);
}
.corner .left {
  background: radial-gradient(circle farthest-side at 100% 100%, transparent 97.5%, #533833 100%);
}
.corner .right {
  background: radial-gradient(circle farthest-side at 0% 100%, transparent 97.5%, #533833 100%);
}

.corner_bottom {
  margin-top: calc(-1 * max(2.92rem, 2.6455026455vw));
  background: #EEEBE9;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.corner_bottom.white {
  background: #ffffff;
}
.corner_bottom > div {
  width: max(2.92rem, 2.6455026455vw);
  height: max(2.92rem, 2.6455026455vw);
}
.corner_bottom .left {
  background: radial-gradient(circle farthest-side at 100% 0%, transparent 97.5%, #533833 100%);
}
.corner_bottom .right {
  background: radial-gradient(circle farthest-side at 0% 0%, transparent 97.5%, #533833 100%);
}

.menuMask {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #533833;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  overscroll-behavior: contain;
}
.menuMask.activeNavi {
  opacity: 0;
  visibility: visible;
  pointer-events: all;
}
@media (min-width: 768px) {
  .menuMask {
    display: none;
  }
}

.menuButton {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 7005;
  height: max(3.136rem, 2.1164021164vw);
  padding: max(0.392rem, 0.2645502646vw) max(2.352rem, 1.5873015873vw);
  border-radius: max(1.568rem, 1.0582010582vw);
  background: #ffffff;
  color: #533833;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(1.568rem, 1.0582010582vw);
  font-weight: 800;
  line-height: 0.9;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
@media (min-width: 768px) {
  .menuButton {
    display: none;
  }
}
.menuButton.activeNavi {
  background: #533833;
  color: #ffffff;
  padding: max(0.392rem, 0.2645502646vw) max(1.96rem, 1.3227513228vw);
  margin-right: max(0.784rem, 0.5291005291vw);
}
.menuButton:hover {
  opacity: 1;
}

.headermenu {
  display: flex;
  justify-content: flex-end;
}
.headermenu nav {
  display: flex;
  gap: max(3.44rem, 2.6455026455vw) max(6.272rem, 4.2328042328vw);
  flex-direction: column;
  position: fixed;
  z-index: 7004;
  top: max(0.784rem, 0.5291005291vw);
  right: max(2.44rem, 2.6455026455vw);
  padding: max(5.84rem, 5.291005291vw) max(2.352rem, 1.5873015873vw) max(3.92rem, 2.6455026455vw) max(2.352rem, 1.5873015873vw);
  width: max(21.07rem, 14.2195767196vw);
  border-radius: max(1.568rem, 1.0582010582vw);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  transform-origin: 90% 10%;
}
.headermenu nav.activeNavi {
  transform: scale(1);
  height: auto;
  align-items: center;
  justify-content: center;
  opacity: 1;
  box-shadow: -4px 4px 0 0 #533833;
}
@media (min-width: 768px) {
  .headermenu nav {
    transform: scale(1);
    height: auto;
    width: auto;
    position: static;
    flex-direction: row;
    align-items: stretch;
    border-radius: 0;
    opacity: 1;
    padding: 0;
    background: #533833;
  }
}
.headermenu ul {
  display: flex;
  gap: max(2.352rem, 1.5873015873vw);
  width: 100%;
}
@media (min-width: 768px) {
  .headermenu ul {
    width: fit-content;
    gap: max(1.568rem, 1.0582010582vw);
  }
}
.headermenu .calcLink {
  flex-direction: column;
}
@media (min-width: 768px) {
  .headermenu .calcLink {
    flex-direction: row;
  }
}
.headermenu .calcLink a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: max(0.784rem, 0.5291005291vw);
  height: max(3.136rem, 2.1164021164vw);
  width: fit-content;
  padding: max(0.392rem, 0.2645502646vw) max(2.352rem, 1.5873015873vw) max(0.392rem, 0.2645502646vw) max(1.568rem, 1.0582010582vw);
  border-radius: max(1.568rem, 1.0582010582vw);
  background: #ffffff;
  color: #533833;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(1.568rem, 1.0582010582vw);
  font-weight: 800;
  line-height: 0.9;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .headermenu .calcLink a {
    justify-content: center;
    height: auto;
  }
}
.headermenu .calcLink a img {
  width: max(2.352rem, 1.5873015873vw);
  height: max(2.352rem, 1.5873015873vw);
  object-fit: contain;
  flex-shrink: 0;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 768px) {
  .headermenu .calcLink a img {
    width: 0;
    height: max(2.352rem, 1.5873015873vw);
  }
}
.headermenu .calcLink a:hover {
  opacity: 1;
}
.headermenu .calcLink a:hover img {
  width: max(2.352rem, 1.5873015873vw);
}
.headermenu .calcLink a > span {
  padding-bottom: 0.15em;
}
.headermenu .iconLink {
  justify-content: center;
  align-items: center;
}
.headermenu .iconLink a {
  height: max(3.136rem, 2.1164021164vw);
  width: max(3.136rem, 2.1164021164vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.headermenu .iconLink a.home {
  background: #EEEBE9;
  padding-inline: max(0.098rem, 0.0661375661vw);
}
.headermenu .iconLink a.home img {
  width: max(1.96rem, 1.3227513228vw);
  height: auto;
}
.headermenu .iconLink a.contact {
  background: #A0CE4C;
  padding-right: max(0.196rem, 0.1322751323vw);
  padding-top: max(0.196rem, 0.1322751323vw);
}
.headermenu .iconLink a.contact img {
  width: max(2.352rem, 1.5873015873vw);
  height: auto;
}
.headermenu .iconLink a img {
  display: block;
  object-fit: contain;
}

.content_wrap {
  padding-block: clamp(3.904rem, 4.2328042328vw, 6.4rem);
  padding-inline: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3.904rem, 4.2328042328vw, 6.4rem);
  align-items: center;
  background: #ffffff;
  container: content/inline-size;
}
@media (min-width: 540px) {
  .content_wrap {
    padding-inline: clamp(3.904rem, 4.2328042328vw, 6.4rem);
  }
}

.calc_leadtitle {
  font-size: clamp(2.701rem, 2.4470899471vw, 3.7rem);
  line-height: 1.2;
  font-weight: 700;
  font-family: "YakuHanJP", "M PLUS 1";
  letter-spacing: 0;
}
@media (min-width: 540px) {
  .calc_leadtitle {
    text-align: center;
  }
}
.calc_leadtitle span {
  font-size: clamp(3.577rem, 3.2407407407vw, 4.9rem);
  line-height: 1.4;
  font-family: "YakuHanJP", "Zen Kaku Gothic New";
}
.calc_leadtitle.flyer span {
  color: #A0CE4C;
}
.calc_leadtitle.web span {
  color: #81CAEE;
}
.calc_leadtitle.animation span {
  color: #F1815C;
}

@container content (650px < width) {
  br {
    display: none;
  }
}
.calc_leadtext {
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: clamp(1.752rem, 1.5873015873vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0;
  padding-inline: clamp(2.352rem, 1.5873015873vw, 2.4rem);
}
@media (min-width: 540px) {
  .calc_leadtext {
    padding: 0;
    text-align: center;
  }
}

.YouTubeLink {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.464rem, 1.5873015873vw, 2.4rem) clamp(3.904rem, 4.2328042328vw, 6.4rem);
  align-items: center;
  justify-content: center;
}
.YouTubeLink a {
  font-size: clamp(1.764rem, 1.1904761905vw, 1.8rem);
  font-weight: 600;
  color: #533833;
}
.YouTubeLink a img {
  width: clamp(1.96rem, 1.3227513228vw, 2rem);
  height: clamp(1.96rem, 1.3227513228vw, 2rem);
  margin-left: clamp(1.568rem, 1.0582010582vw, 1.6rem);
  vertical-align: middle;
}

.formwrap {
  height: 100%;
  width: 100%;
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem);
  max-width: clamp(115.542rem, 77.9761904762vw, 117.9rem);
  margin-inline: auto;
  font-size: clamp(1.376rem, 1.0582010582vw, 1.6rem);
}

form {
  height: 100%;
  width: 100%;
}

.calcform_wrap {
  width: 100%;
}

.titleContainer {
  position: sticky;
  top: max(5.84rem, 5.291005291vw);
  z-index: 1;
  background: #ffffff;
  padding-top: clamp(0.688rem, 0.5291005291vw, 0.8rem);
}
.titleContainer.flyer {
  container: titlecontainer/inline-size;
}
.titleContainer.web {
  container: titlecontainer/inline-size;
}
.titleContainer.animation {
  container: titlecontainerA/inline-size;
}
.titleContainer.animation .title {
  flex-direction: column;
}
.titleContainer .titleWrap {
  padding: clamp(1.568rem, 1.0582010582vw, 1.6rem) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem) clamp(2.744rem, 1.8518518519vw, 2.8rem) 0 0;
  color: #ffffff;
  background: #533833;
}
@media (min-width: 768px) {
  .titleContainer .titleWrap {
    padding: clamp(1.568rem, 1.0582010582vw, 1.6rem) clamp(3.92rem, 2.6455026455vw, 4rem);
  }
}
.titleContainer .title {
  align-self: center;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.titleContainer .title > div:nth-of-type(1) {
  font-size: clamp(2.064rem, 1.5873015873vw, 2.4rem);
}
.titleContainer .title > div.webtitle {
  font-size: clamp(3.096rem, 2.380952381vw, 3.6rem);
}
.titleContainer .title > div:nth-of-type(2) {
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
  margin-top: clamp(0.784rem, 0.5291005291vw, 0.8rem);
}
.titleContainer .totalOuter {
  display: flex;
  overflow: hidden;
  gap: clamp(0.344rem, 0.2645502646vw, 0.4rem);
}
.titleContainer .totalOuter.total {
  font-size: clamp(5.504rem, 4.2328042328vw, 6.4rem);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.16em;
}
.titleContainer .totalOuter.tax {
  font-size: clamp(2.752rem, 2.1164021164vw, 3.2rem);
  align-items: flex-end;
  justify-content: end;
  padding-top: 0.3em;
  width: 8em;
}
.titleContainer .totalInner,
.titleContainer .totalTax {
  transform: translateY(105%);
  font-family: "Barlow";
}
.titleContainer .totalInner > span:nth-last-of-type(3n+1)::after,
.titleContainer .totalTax > span:nth-last-of-type(3n+1)::after {
  display: inline-block;
  content: ",";
}
.titleContainer .totalInner > span:last-of-type::after,
.titleContainer .totalTax > span:last-of-type::after {
  display: none;
}
.titleContainer .totalInner.display {
  animation: total 0.3s forwards;
  font-size: clamp(5.504rem, 4.2328042328vw, 6.4rem);
  font-weight: 600;
  line-height: 1;
}
.titleContainer .totalTax {
  margin-left: auto;
  line-height: 1;
}
.titleContainer .totalTax.display {
  animation: total 0.3s forwards 0.15s;
  font-size: clamp(2.752rem, 2.1164021164vw, 3.2rem);
  font-weight: 600;
}
@keyframes total {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.titleContainer .totalMark {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.titleContainer .totalMark span:nth-of-type(1) {
  font-size: clamp(2.752rem, 2.1164021164vw, 3.2rem);
  line-height: 1;
  font-weight: 700;
}
.titleContainer .totalMark span:nth-of-type(2) {
  font-size: clamp(1.204rem, 0.9259259259vw, 1.4rem);
}
.titleContainer .outerMark {
  font-size: clamp(1.806rem, 1.3888888889vw, 2.1rem);
  line-height: 1;
  padding-bottom: 0.2em;
}
.titleContainer .optionmsg {
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(1.204rem, 0.9259259259vw, 1.4rem);
  width: 17.5em;
}
.titleContainer .optionmsg.show {
  height: 100%;
  background: #ffffff;
  color: #533833;
  line-height: 1;
  padding: clamp(0.392rem, 0.2645502646vw, 0.4rem) clamp(0.784rem, 0.5291005291vw, 0.8rem);
}
.titleContainer .errormsg {
  display: none;
}
.titleContainer .errormsg.show {
  display: block;
  text-align: center;
  background: #533833;
  color: #F1815C;
  padding-bottom: clamp(0.784rem, 0.5291005291vw, 0.8rem);
}

@container titlecontainer (816px < width) {
  .titleContainer .titleWrap {
    flex-direction: row;
    align-items: flex-end;
  }
  .titleContainer .title {
    flex-direction: column;
  }
  .titleContainer .totalOuter.total {
    justify-content: end;
    align-items: flex-end;
    width: 6em;
  }
}
@container titlecontainerA (412px < width < 815px) {
  .titleContainer.animation .title {
    flex-direction: row;
  }
}
@container titlecontainerA (816px < width) {
  .titleContainer .titleWrap {
    flex-direction: row;
    align-items: flex-end;
  }
  .titleContainer.animation .title {
    flex-direction: column;
  }
  .titleContainer .totalOuter.total {
    justify-content: end;
    width: 6em;
  }
}
.form_calc {
  width: 100%;
  height: 100%;
}

.flyercalculator .estimateContents {
  background: #DEF5B2;
}

.webcalculator .estimateContents {
  background: #D0F0FF;
}

.animationcalculator .estimateContents {
  background: #F8DAD0;
}

h4 {
  padding: clamp(0.976rem, 1.0582010582vw, 1.6rem) clamp(1.464rem, 1.5873015873vw, 2.4rem);
  color: #533833;
  font-family: "YakuHanJP", "M PLUS 1";
  text-align: center;
  font-size: clamp(2.064rem, 1.5873015873vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  background: #ffffff;
  border: 2px solid #533833;
  border-radius: clamp(0.784rem, 0.5291005291vw, 0.8rem);
}

.formContent_msg {
  font-weight: 700;
  line-height: 1.8;
  padding-inline: 1.0582010582vw;
  margin-top: max(16px, 1.0582010582vw);
}
.formContent_msg span {
  display: inline;
}
@media (min-width: 540px) {
  .formContent_msg {
    text-align: center;
  }
  .formContent_msg span {
    display: inline-block;
  }
}

.formContent {
  padding: clamp(2.44rem, 2.6455026455vw, 4rem) clamp(1.568rem, 1.0582010582vw, 1.6rem);
}
@media (min-width: 540px) {
  .formContent {
    padding: clamp(2.44rem, 2.6455026455vw, 4rem);
  }
}

.formContent_inner {
  padding-inline: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  gap: clamp(0.392rem, 0.2645502646vw, 0.4rem) clamp(1.568rem, 1.0582010582vw, 1.6rem);
  align-items: center;
}
.formContent_inner.inner-white {
  background: #ffffff;
  margin-top: clamp(0.8rem, 0.5291005291vw, 0.8rem);
  padding-block: clamp(0.8rem, 0.5291005291vw, 0.8rem);
}
@media (min-width: 540px) {
  .formContent_inner.inner-white {
    margin-top: clamp(1.6rem, 1.0582010582vw, 1.6rem);
    padding-block: clamp(1.6rem, 1.0582010582vw, 1.6rem);
  }
}
@media (min-width: 768px) {
  .formContent_inner.inner-white {
    grid-template-columns: minmax(140px, 9.2592592593vw) 1fr;
  }
}
.formContent_inner.caution {
  padding-inline: 0;
}
.formContent_inner span.bold {
  font-weight: 900;
  letter-spacing: 0;
}
.formContent_inner span.underline {
  text-decoration: underline;
}
.formContent_inner .formContent_body {
  width: 100%;
}
.formContent_inner .formContent_title {
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
}
@media (min-width: 768px) {
  .formContent_inner .formContent_title {
    grid-area: 1/1/2/2;
    width: max(140px, 9.2592592593vw);
    line-height: 1.4;
  }
}
.formContent_inner .formContent_title.wide {
  min-height: clamp(3.92rem, 2.6455026455vw, 4rem);
  align-self: start;
  display: flex;
  align-items: center;
}
.formContent_inner .formContent_title p {
  display: flex;
}
.formContent_inner .formContent_body {
  width: 100%;
}
.formContent_inner .formContent_body.select {
  background: no-repeat url(../img/icons/icons/icon_squarearrow.svg) right top;
  background-size: clamp(3.92rem, 2.6455026455vw, 4rem) clamp(3.92rem, 2.6455026455vw, 4rem);
}
.formContent_inner .formContent_body select {
  width: 100%;
  border: 2px solid #533833;
  border-radius: 2px;
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
  padding-inline: 1.0582010582vw;
  min-height: clamp(3.92rem, 2.6455026455vw, 4rem);
  font-weight: 800;
}
.formContent_inner .formContent_body select:user-invalid {
  border: 2px solid #D5272F;
  font-weight: 400;
}
.formContent_inner .formContent_body select:invalid {
  font-weight: 400;
}
.formContent_inner .formContent_extra_title {
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-top: clamp(2.064rem, 1.5873015873vw, 2.4rem);
}
@media (min-width: 768px) {
  .formContent_inner .formContent_extra_title {
    grid-column: 2/3;
  }
}
.formContent_inner .formContent_extra_wrap {
  margin-top: clamp(0.688rem, 0.5291005291vw, 0.8rem);
  display: grid;
  grid-template-columns: auto;
  gap: clamp(1.6rem, 1.0582010582vw, 1.6rem);
}
@media (min-width: 540px) {
  .formContent_inner .formContent_extra_wrap {
    grid-template-columns: clamp(22.876rem, 17.5925925926vw, 26.6rem) auto;
  }
}
@media (min-width: 768px) {
  .formContent_inner .formContent_extra_wrap {
    grid-column: 2/3;
  }
}
.formContent_inner .formContent_extra_wrap .sample {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.formContent_inner .formContent_extra_wrap .sample .samplebutton {
  flex-shrink: 0;
  cursor: pointer;
  padding: clamp(0.392rem, 0.2645502646vw, 0.4rem) clamp(0.784rem, 0.5291005291vw, 0.8rem);
}
.formContent_inner .formContent_extra_wrap .sample .samplebutton:hover {
  opacity: 0.6;
  animation: turn 0.5s;
}
.formContent_inner .formContent_extra_wrap .sample .samplebutton img {
  width: clamp(2rem, 1.3227513228vw, 2rem);
  height: clamp(2rem, 1.3227513228vw, 2rem);
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(61%) sepia(96%) saturate(935%) hue-rotate(320deg) brightness(97%) contrast(94%);
}
.formContent_inner .formContent_extra {
  margin-top: 0.5291005291vw;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (min-width: 540px) {
  .formContent_inner .formContent_extra {
    grid-column: span 2;
    grid-template-columns: subgrid;
  }
}
.formContent_inner .formContent_extra div:has(input) {
  margin-left: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  display: flex;
  align-items: center;
  gap: clamp(0.392rem, 0.2645502646vw, 0.4rem);
}
.formContent_inner .formContent_extra input[type=number] {
  height: clamp(4.704rem, 3.1746031746vw, 4.8rem);
  width: clamp(6.272rem, 4.2328042328vw, 6.4rem);
  border: 2px solid #533833;
  border-radius: 2px;
  padding-inline: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  text-align: right;
}
.formContent_inner .formContent_extra .sample {
  margin-top: clamp(0.392rem, 0.2645502646vw, 0.4rem);
  grid-column: span 2;
  font-size: clamp(1.204rem, 0.9259259259vw, 1.4rem);
  container: samplecontainer/inline-size;
}
.formContent_inner .formContent_caution {
  width: 100%;
  margin-top: max(16px, 1.0582010582vw);
}
@media (min-width: 768px) {
  .formContent_inner .formContent_caution {
    grid-column: 2/3;
  }
}
.formContent_inner .formContent_caution p {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.2em;
  line-height: 1.2;
}
.formContent_inner .formContent_caution p + p {
  margin-top: max(4px, 0.2645502646vw);
}
.formContent_inner .formContent_caution p > span {
  flex-shrink: 0;
}
.formContent_inner .invalidmsg {
  display: none;
  font-size: clamp(1.204rem, 0.9259259259vw, 1.4rem);
  color: #D5272F;
  min-height: auto;
  width: 100%;
  font-weight: 700;
}
@media (min-width: 768px) {
  .formContent_inner .invalidmsg {
    grid-column: 1/3;
  }
}
.formContent_inner:has(*:user-invalid) .invalidmsg {
  display: block;
}

@container samplecontainer (480px < width) {
  .formContent_extra_wrap .sample span {
    display: block;
  }
}
.form_checklist {
  margin-top: max(24px, 1.5873015873vw);
  padding: 2.6455026455vw;
}
.form_checklist .checklistContainer,
.form_checklist .add_checklistContainer {
  margin-top: clamp(1.6rem, 1.0582010582vw, 1.6rem);
  padding: clamp(1.6rem, 1.0582010582vw, 1.6rem);
  background: #ffffff;
  display: grid;
  gap: clamp(0.784rem, 0.5291005291vw, 0.8rem);
}
@media (min-width: 540px) {
  .form_checklist .checklistContainer,
  .form_checklist .add_checklistContainer {
    grid-template-columns: minmax(140px, 9.2592592593vw) 1fr;
  }
}
.form_checklist .checklistContainer p,
.form_checklist .add_checklistContainer p {
  width: 100%;
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: clamp(0.976rem, 1.0582010582vw, 1.6rem);
}
@media (min-width: 540px) {
  .form_checklist .checklistContainer p,
  .form_checklist .add_checklistContainer p {
    margin-bottom: clamp(0.344rem, 0.2645502646vw, 0.4rem);
  }
}
.form_checklist .checklistContainer .checkcaution,
.form_checklist .add_checklistContainer .checkcaution {
  width: 100%;
  font-weight: 500;
  font-size: clamp(1.376rem, 1.0582010582vw, 1.6rem);
  margin-bottom: clamp(0.344rem, 0.2645502646vw, 0.4rem);
}
@media (min-width: 540px) {
  .form_checklist .checklistContainer .checkcaution,
  .form_checklist .add_checklistContainer .checkcaution {
    grid-column: 2/3;
  }
}
.form_checklist .checklistContainer ul,
.form_checklist .add_checklistContainer ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: clamp(0.976rem, 1.0582010582vw, 1.6rem) clamp(4rem, 2.6455026455vw, 4rem);
}
@media (min-width: 540px) {
  .form_checklist .checklistContainer ul,
  .form_checklist .add_checklistContainer ul {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 540px) {
  .form_checklist .checklistContainer ul,
  .form_checklist .add_checklistContainer ul {
    grid-column: 2/3;
  }
}
.form_checklist .checklistContainer ul li, .form_checklist .checklistContainer ul label,
.form_checklist .add_checklistContainer ul li,
.form_checklist .add_checklistContainer ul label {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: clamp(0.392rem, 0.2645502646vw, 0.4rem);
  font-weight: 700;
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
}
.form_checklist .checklistContainer ul li > div > span, .form_checklist .checklistContainer ul label > div > span,
.form_checklist .add_checklistContainer ul li > div > span,
.form_checklist .add_checklistContainer ul label > div > span {
  display: inline-block;
}
.form_checklist .checklistContainer ul li input[type=checkbox], .form_checklist .checklistContainer ul label input[type=checkbox],
.form_checklist .add_checklistContainer ul li input[type=checkbox],
.form_checklist .add_checklistContainer ul label input[type=checkbox] {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  border: 2px solid #533833;
  border-radius: 2px;
  appearance: none;
  background: #ffffff;
  position: relative;
}
.form_checklist .checklistContainer ul li input[type=checkbox]:checked::after, .form_checklist .checklistContainer ul label input[type=checkbox]:checked::after,
.form_checklist .add_checklistContainer ul li input[type=checkbox]:checked::after,
.form_checklist .add_checklistContainer ul label input[type=checkbox]:checked::after {
  position: absolute;
  top: -2px;
  left: -2px;
  color: #533833;
  border-radius: 2px;
  background: #F1815C no-repeat url("../img/icons/icons/icon_check.svg") center 60%;
  background-size: 0.8em 0.61em;
  display: block;
  content: "";
  width: 1em;
  height: 1em;
}
.form_checklist .samplebutton {
  cursor: pointer;
}
.form_checklist .samplebutton:hover {
  opacity: 0.6;
  animation: turn 0.5s;
}
.form_checklist .samplebutton img {
  width: clamp(2rem, 1.3227513228vw, 2rem);
  height: clamp(2rem, 1.3227513228vw, 2rem);
  vertical-align: middle;
}
.form_checklist .samplebutton.flyerSamplebutton img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(64%) saturate(372%) hue-rotate(40deg) brightness(97%) contrast(92%);
}
.form_checklist .samplebutton.webSamplebutton img {
  filter: brightness(0) saturate(100%) invert(77%) sepia(13%) saturate(1337%) hue-rotate(165deg) brightness(98%) contrast(90%);
}
.form_checklist .formContent_extraOption {
  width: 100%;
  padding-inline: 2.6455026455vw;
  margin-top: clamp(0.8rem, 0.5291005291vw, 0.8rem);
}
.form_checklist .formContent_extraOption p {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.25em;
  line-height: 1.2;
  font-size: clamp(1.372rem, 0.9259259259vw, 1.4rem);
}
.form_checklist .formContent_extraOption p + p {
  margin-top: clamp(0.4rem, 0.2645502646vw, 0.4rem);
}

.totalinput,
.optioninput {
  display: none;
}

.sampleContainer {
  position: fixed;
  top: 100vh;
  left: 0;
  z-index: 8000;
  width: 100svw;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.sampleContainer.show {
  top: 0;
  opacity: 1;
  height: 100svh;
}

.sampleBack {
  background: #533833;
  width: 100svw;
  height: 100svh;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0.75;
}

.sampleInner {
  width: 85svw;
  height: 85svh;
  background: #EEEBE9;
  border-radius: 1.8518518519vw;
  display: grid;
  grid-template-rows: min-content auto min-content;
  justify-items: center;
  align-items: center;
  padding: 2.6455026455vw;
  position: relative;
}
.sampleInner .sampleclose {
  position: absolute;
  top: 1.0582010582vw;
  right: 1.0582010582vw;
}
.sampleInner .sampleclose img {
  max-width: 100%;
  max-height: 100%;
  width: max(4.902rem, 3.7698412698vw);
  height: max(4.902rem, 3.7698412698vw);
  filter: brightness(0) saturate(100%) invert(13%) sepia(5%) saturate(6268%) hue-rotate(321deg) brightness(108%) contrast(72%);
}
.sampleInner .sampleTitle {
  font-weight: 700;
  font-size: max(2.752rem, 2.1164021164vw);
  margin-block: 1.0582010582vw;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: max(0.784rem, 0.5291005291vw) max(1.568rem, 1.0582010582vw);
}
.sampleInner .samplemove {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.sampleInner .samplemove .videoWrap {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sampleInner .samplemove video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
}
.sampleInner .sampleImgwrap {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: min-content min-content;
  grid-template-rows: repeat(4, 1fr);
  gap: max(8px, 0.5291005291vw);
  justify-content: center;
}
.sampleInner .sampleImgwrap:has(.button01:checked) .sampleShow img.img01 {
  opacity: 1;
}
.sampleInner .sampleImgwrap:has(.button02:checked) .sampleShow img.img02 {
  opacity: 1;
}
.sampleInner .sampleImgwrap:has(.button03:checked) .sampleShow img.img03 {
  opacity: 1;
}
.sampleInner .sampleImgwrap:has(.button04:checked) .sampleShow img.img04 {
  opacity: 1;
}
@media (orientation: portrait) {
  .sampleInner .sampleImgwrap {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: min-content min-content;
    align-content: center;
  }
}
.sampleInner .sampleShow {
  height: 100%;
  width: fit-content;
  max-width: 65vw;
  aspect-ratio: 1/1;
  position: relative;
  grid-row: span 4;
  grid-column: span 1;
  background: #f7f6f4;
}
.sampleInner .sampleShow img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: scale-down;
  opacity: 0;
  transition: 0.3s;
}
.sampleInner .sampleShow img.webp {
  padding: max(16px, 1.0582010582vw);
}
@media (orientation: portrait) {
  .sampleInner .sampleShow {
    grid-column: span 4;
    grid-row: span 1;
    width: 100%;
    max-width: none;
    height: fit-content;
    max-height: 40vh;
  }
}
.sampleInner label {
  aspect-ratio: 1/1;
  display: block;
  border: 2px solid #EEEBE9;
  border-radius: 2px;
  background: #f7f6f4;
}
.sampleInner label:has(input:checked) {
  border: 2px solid #533833;
}
.sampleInner label input {
  display: none;
}
.sampleInner label img {
  object-fit: scale-down;
}
.sampleInner label img.webp {
  padding: max(8px, 0.5291005291vw);
}
.sampleInner .moreLinkWrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: max(8px, 0.5291005291vw);
}
.sampleInner .moreLinkWrap a {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: max(0.392rem, 0.2645502646vw);
  font-weight: 700;
  font-size: max(1.372rem, 0.9259259259vw);
  color: #533833;
}
.sampleInner .moreLinkWrap a::after {
  content: "";
  display: block;
  width: max(1.96rem, 1.3227513228vw);
  height: max(1.96rem, 1.3227513228vw);
  background: no-repeat url(../img/icons/icons/icon_view_brown.svg) center center;
}
.sampleInner .moreLinkWrap a:hover {
  opacity: 0.75;
}
@media (orientation: portrait) {
  .sampleInner {
    grid-template-rows: auto auto min-content;
    gap: max(1.376rem, 1.0582010582vw);
    align-items: center;
  }
  .sampleInner .sampleTitle {
    align-self: end;
  }
  .sampleInner .samplemove,
  .sampleInner .sampleImgwrap {
    align-self: start;
  }
  .sampleInner .samplemove .videoWrap,
  .sampleInner .sampleImgwrap .videoWrap {
    align-items: start;
  }
}

.informationContents {
  padding: clamp(3.904rem, 4.2328042328vw, 6.4rem) clamp(2.44rem, 2.6455026455vw, 4rem) clamp(1.464rem, 1.5873015873vw, 2.4rem) clamp(2.44rem, 2.6455026455vw, 4rem);
  background: #EEEBE9;
  font-size: clamp(1.376rem, 1.0582010582vw, 1.6rem);
}
.informationContents ul {
  max-width: clamp(115.542rem, 77.9761904762vw, 117.9rem);
  margin-inline: auto;
  margin-top: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  display: grid;
  row-gap: clamp(1.464rem, 1.5873015873vw, 2.4rem);
  grid-template-columns: auto;
}
@media (min-width: 768px) {
  .informationContents ul {
    grid-template-columns: max-content max-content auto;
  }
}
@media (min-width: 768px) {
  .informationContents li {
    grid-column: span 3;
    align-items: center;
    display: grid;
    grid-template-columns: subgrid;
  }
}
.informationContents li:has(textarea) {
  align-items: start;
}
.informationContents label {
  grid-column: 1/2;
  color: #533833;
  font-weight: 500;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .informationContents label {
    display: block;
    justify-self: self-end;
  }
  .informationContents label.hastext {
    margin-top: clamp(1.568rem, 1.0582010582vw, 1.6rem);
  }
}
.informationContents label .small {
  font-size: 80%;
}
.informationContents .required {
  grid-column: 2/3;
  display: inline-block;
  margin-left: clamp(0.244rem, 0.2645502646vw, 0.4rem);
  padding: clamp(0.196rem, 0.1322751323vw, 0.2rem) clamp(0.392rem, 0.2645502646vw, 0.4rem);
  border-radius: clamp(0.392rem, 0.2645502646vw, 0.4rem);
  background: #F1815C;
  color: #ffffff;
  font-size: clamp(0.86rem, 0.6613756614vw, 1rem);
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  height: fit-content;
}
@media (min-width: 768px) {
  .informationContents .required.hastext {
    margin-top: calc(clamp(1.568rem, 1.0582010582vw, 1.6rem) + clamp(0.387rem, 0.2976190476vw, 0.45rem));
  }
}
.informationContents .inputWrap {
  grid-column: 3/4;
}
@media (min-width: 768px) {
  .informationContents .inputWrap {
    margin-left: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  }
}
.informationContents .inputWrap input,
.informationContents .inputWrap textarea {
  padding: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  border-radius: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  border: 2px solid #EEEBE9;
  background: #ffffff;
  width: 100%;
}
.informationContents .inputWrap input:user-invalid,
.informationContents .inputWrap textarea:user-invalid {
  border: 2px solid #D5272F;
}
.informationContents .inputWrap input::placeholder,
.informationContents .inputWrap textarea::placeholder {
  color: #A5A4A4;
}
.informationContents .inputWrap textarea {
  height: clamp(18.3rem, 19.8412698413vw, 30rem);
  resize: vertical;
}
.informationContents .inputWrap .invalidmsg {
  display: none;
  font-size: clamp(1.204rem, 0.9259259259vw, 1.4rem);
  color: #D5272F;
}
.informationContents .inputWrap:has(*:user-invalid) .invalidmsg {
  display: block;
}

.line {
  display: none;
}

.form_contact {
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem);
  overflow: hidden;
}

.radioLabel, .radioRequired {
  align-self: center;
}

.radioWrap {
  margin-top: clamp(1.464rem, 1.5873015873vw, 2.4rem);
  padding: clamp(1.098rem, 1.1904761905vw, 1.8rem) clamp(0.976rem, 1.0582010582vw, 1.6rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  text-align: left;
  border-radius: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  background: #ffffff;
}
@media (min-width: 768px) {
  .radioWrap {
    margin-left: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  }
}
.radioWrap .radioItems {
  display: flex;
  align-items: center;
  width: 100%;
  margin-right: 0;
  text-align: left;
}
@media (min-width: 540px) {
  .radioWrap {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .radioWrap {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .radioWrap .radioItems {
    width: auto;
  }
}
.radioWrap input[type=radio] {
  width: clamp(2.058rem, 1.3888888889vw, 2.1rem);
  height: clamp(2.058rem, 1.3888888889vw, 2.1rem);
  border-radius: 50%;
  margin-right: clamp(0.392rem, 0.2645502646vw, 0.4rem);
  border: 1px solid #533833;
  position: relative;
}
.radioWrap input[type=radio]:checked {
  background: #F8DAD0;
  border: 1px solid #F1815C;
}
.radioWrap input[type=radio]:checked::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: clamp(0.392rem, 0.2645502646vw, 0.4rem) solid #F1815C;
}

.form_confirm {
  width: 100%;
  height: 100%;
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem) clamp(2.744rem, 1.8518518519vw, 2.8rem);
  background: #EEEBE9;
  max-width: clamp(115.542rem, 77.9761904762vw, 117.9rem);
}

.confirmTitle {
  padding: clamp(1.568rem, 1.0582010582vw, 1.6rem) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem) clamp(2.744rem, 1.8518518519vw, 2.8rem) 0 0;
  color: #ffffff;
  background: #533833;
}
@media (min-width: 768px) {
  .confirmTitle {
    padding: clamp(1.568rem, 1.0582010582vw, 1.6rem) clamp(3.92rem, 2.6455026455vw, 4rem);
  }
}
.confirmTitle .title {
  align-self: center;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}
.confirmTitle .title > div:nth-of-type(1) {
  font-size: clamp(2.064rem, 1.5873015873vw, 2.4rem);
}
.confirmTitle .title > div.webtitle {
  font-size: clamp(3.096rem, 2.380952381vw, 3.6rem);
}
.confirmTitle .title > div:nth-of-type(2) {
  font-size: clamp(1.548rem, 1.1904761905vw, 1.8rem);
  margin-top: clamp(0.784rem, 0.5291005291vw, 0.8rem);
}

.formConfirmList {
  display: flex;
  flex-direction: column;
  gap: clamp(1.464rem, 1.5873015873vw, 2.4rem);
}
.formConfirmList li label {
  color: #533833;
  font-weight: 500;
  line-height: 1;
}
.formConfirmList li .inputWrap {
  padding: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  border-radius: clamp(0.784rem, 0.5291005291vw, 0.8rem);
  border: 2px solid #EEEBE9;
  background: #ffffff;
  width: 100%;
}
.formConfirmList li:has(input[value="--------------------"]) {
  padding: clamp(0.976rem, 1.0582010582vw, 1.6rem) clamp(1.464rem, 1.5873015873vw, 2.4rem);
  color: #533833;
  text-align: center;
  font-size: clamp(2.064rem, 1.5873015873vw, 2.4rem);
  background: #ffffff;
  border: 2px solid #533833;
  border-radius: clamp(0.784rem, 0.5291005291vw, 0.8rem);
}
.formConfirmList li:has(input[value="--------------------"]) label {
  font-weight: 700;
  line-height: 1.4;
}
.formConfirmList li:has(input[value="--------------------"]) > div {
  display: none;
}

.confirmButtonwrap {
  margin-top: clamp(2.44rem, 2.6455026455vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.6455026455vw;
}
.confirmButtonwrap .submitButton {
  display: flex;
  padding: clamp(1.568rem, 1.0582010582vw, 1.6rem) calc(clamp(4.704rem, 3.1746031746vw, 4.8rem) + 1em);
  justify-content: center;
  align-items: center;
  border-radius: clamp(0.392rem, 0.2645502646vw, 0.4rem);
  background: #533833;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
.confirmButtonwrap .submitButton:hover {
  background: #A0CE4C;
}
.confirmButtonwrap .backButton {
  display: flex;
  padding: clamp(1.568rem, 1.0582010582vw, 1.6rem) clamp(4.704rem, 3.1746031746vw, 4.8rem);
  justify-content: center;
  align-items: center;
  border-radius: clamp(0.392rem, 0.2645502646vw, 0.4rem);
  background: #A5A4A4;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}
.confirmButtonwrap .backButton:hover {
  opacity: 0.7;
}

.thanksContainer {
  padding-block: clamp(3.904rem, 4.2328042328vw, 6.4rem);
  padding-inline: clamp(3.904rem, 4.2328042328vw, 6.4rem);
  margin: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: clamp(1.176rem, 0.7936507937vw, 1.2rem);
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem) clamp(2.744rem, 1.8518518519vw, 2.8rem);
  background: #EEEBE9;
}
@media (min-width: 540px) {
  .thanksContainer {
    align-items: center;
  }
}
.thanksContainer p {
  font-size: clamp(1.764rem, 1.1904761905vw, 1.8rem);
  font-weight: 500;
}
@media (min-width: 540px) {
  .thanksContainer p {
    text-align: center;
  }
  .thanksContainer p span {
    display: inline-block;
  }
}
.thanksContainer .links {
  margin: clamp(2.44rem, 2.6455026455vw, 4rem) auto 0 auto;
  font-size: clamp(1.376rem, 1.0582010582vw, 1.6rem);
  display: flex;
  gap: clamp(1.464rem, 1.5873015873vw, 2.4rem);
  flex-direction: column;
  width: clamp(19.6rem, 13.2275132275vw, 20rem);
}
@media (min-width: 768px) {
  .thanksContainer .links {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
.thanksContainer .links a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.688rem, 0.5291005291vw, 0.8rem);
  height: clamp(2.752rem, 2.1164021164vw, 3.2rem);
  padding: clamp(0.688rem, 0.5291005291vw, 0.8rem) clamp(2.064rem, 1.5873015873vw, 2.4rem) clamp(0.688rem, 0.5291005291vw, 0.8rem) clamp(1.376rem, 1.0582010582vw, 1.6rem);
  border-radius: clamp(2.064rem, 1.5873015873vw, 2.4rem);
  background: #ffffff;
  color: #533833;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: clamp(1.376rem, 1.0582010582vw, 1.6rem);
  font-weight: 800;
  line-height: 0.9;
  white-space: nowrap;
}
@media (min-width: 540px) {
  .thanksContainer .links a {
    padding: clamp(0.688rem, 0.5291005291vw, 0.8rem) clamp(2.064rem, 1.5873015873vw, 2.4rem);
    justify-content: center;
    height: auto;
  }
}
.thanksContainer .links a.home {
  letter-spacing: 0.08em;
}
@media (min-width: 540px) {
  .thanksContainer .links a.home {
    letter-spacing: 0.03em;
  }
}
.thanksContainer .links a.contact {
  letter-spacing: 0.08em;
}
@media (min-width: 540px) {
  .thanksContainer .links a.contact {
    letter-spacing: 0.03em;
  }
}
.thanksContainer .links a img {
  width: clamp(2.064rem, 1.5873015873vw, 2.4rem);
  height: clamp(2.064rem, 1.5873015873vw, 2.4rem);
  object-fit: contain;
  flex-shrink: 0;
}

.privacypolicyWrap {
  position: fixed;
  z-index: 8000;
  overflow: hidden;
  top: 100vh;
  left: 0;
  height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
.privacypolicyWrap.commonshow {
  top: 0;
  height: 100svh;
  border: 1px solid #CBC3BE;
}
.privacypolicyWrap.commonshow .privacypolicyBody {
  height: 75svh;
}
.privacypolicyWrap .privacypolicyBack {
  background: rgba(0, 0, 0, 0.4);
  width: 100svw;
  height: 0;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
}
.privacypolicyWrap .privacypolicyBack.commonshow {
  height: 100svh;
}
.privacypolicyWrap .privacypolicyBody {
  border-radius: clamp(2.744rem, 1.8518518519vw, 2.8rem);
  width: 75svw;
  max-width: max(78.4rem, 52.9100529101vw);
  height: 0;
  background: #ffffff;
  overflow: hidden;
  display: grid;
  grid-template-rows: min-content auto;
}
.privacypolicyWrap .privacypolicytitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.752rem, 1.5873015873vw, 2.4rem) clamp(2.92rem, 2.6455026455vw, 4rem);
  font-size: clamp(1.752rem, 1.5873015873vw, 2.4rem);
  font-weight: 700;
  background: #EEEBE9;
}
.privacypolicyWrap .privacypolicytitle img {
  width: max(4.902rem, 3.7698412698vw);
  height: max(4.902rem, 3.7698412698vw);
  filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(1848%) hue-rotate(322deg) brightness(96%) contrast(85%);
}
.privacypolicyWrap .privacypolicyContent {
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior: none;
  padding-inline: clamp(2.92rem, 2.6455026455vw, 4rem);
  font-size: clamp(1.168rem, 1.0582010582vw, 1.6rem);
  padding-bottom: clamp(2.92rem, 2.6455026455vw, 4rem);
}
.privacypolicyWrap .privacypolicySection {
  margin-top: clamp(2.92rem, 2.6455026455vw, 4rem);
}
.privacypolicyWrap .privacypolicySection .privacypolicy_heading {
  font-size: clamp(1.168rem, 1.0582010582vw, 1.6rem);
  font-weight: 700;
}
.privacypolicyWrap .privacypolicySection .privacypolicy_subheading {
  margin-top: clamp(1.168rem, 1.0582010582vw, 1.6rem);
  font-size: clamp(1.168rem, 1.0582010582vw, 1.6rem);
  font-weight: 700;
}

.loading {
  position: fixed;
  z-index: 8000;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.loading.active {
  height: 100vh;
  background: #ffffff;
  opacity: 1;
}
.loading.active .logoWrap {
  animation: logoAppear 1s forwards;
}

.loading.loaded {
  animation: disAppear 1s 0.8s forwards;
}
.loading.loaded .logoWrap {
  animation: logoDisAppear 1s forwards;
}

.logoWrap {
  display: flex;
  align-items: flex-start;
}

.logo {
  width: 183.11px;
  height: 103.55px;
}

.leaf {
  height: 51px;
  transform-origin: 0% 100%;
  animation: leaf 1080ms 1.5s forwards;
}
.leaf img {
  width: auto;
  height: 100%;
  object-fit: scale-down;
}

.test1 {
  margin-top: clamp(6.2rem, 6.8783068783vw, 10.4rem);
  font-size: clamp(3.136rem, 2.1164021164vw, 3.2rem);
  background: #eee;
  font-size: clamp(7.592rem, 6.8783068783vw, 10.4rem);
}

.test2 {
  margin-top: clamp(3.904rem, 4.2328042328vw, 6.4rem);
  font-size: clamp(3.136rem, 2.1164021164vw, 3.2rem);
  background: #eee;
}

.test3 {
  margin-top: clamp(2.44rem, 2.6455026455vw, 4rem);
  font-size: clamp(2.752rem, 2.1164021164vw, 3.2rem);
  background: #eee;
}

.test4 {
  margin-top: clamp(1.464rem, 1.5873015873vw, 2.4rem);
  font-size: clamp(2.336rem, 2.1164021164vw, 3.2rem);
  background: #eee;
}

.test5 {
  margin-top: clamp(0.976rem, 1.0582010582vw, 1.6rem);
  font-size: clamp(1.952rem, 2.1164021164vw, 3.2rem);
  background: #eee;
}

.test6 {
  margin-top: clamp(0.488rem, 0.5291005291vw, 0.8rem);
  font-size: clamp(1.568rem, 1.0582010582vw, 1.6rem);
  background: #eee;
}

.test7 {
  margin-top: clamp(0.244rem, 0.2645502646vw, 0.4rem);
  font-size: clamp(1.568rem, 1.0582010582vw, 1.6rem);
  background: #eee;
}

.test8 {
  font-size: clamp(1.568rem, 1.0582010582vw, 1.6rem);
  border: 1px solid #333;
  background: #eee;
  padding-block: clamp(2.44rem, 2.6455026455vw, 4rem);
}

/*base*/
.backgroundWrap,
.box-between {
  height: 120svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.backgroundWrap .box-background,
.box-between .box-background {
  position: absolute;
  top: 0;
  height: 0;
  height: 120svh;
}
.backgroundWrap p,
.box-between p {
  font-size: 30px;
}

.backgroundspace {
  background: #eee;
  color: #000;
  transition: 0.5s ease-in;
}
.backgroundspace:has(.box1.active) {
  background: #eea;
  color: #00e;
}
.backgroundspace:has(.box2.active) {
  background: #00e;
  color: #fff;
}
.backgroundspace:has(.box3.active) {
  background: #eae;
  color: #f00;
}

.siderollWrap {
  border: 1px solid #999;
  width: 100svw;
  height: 100svw;
}
.siderollWrap .siderollimgWrap {
  width: 100svw;
  height: fit-content;
  position: sticky;
  left: 0;
  top: clamp(9.8378378378rem, 7.027027027vw, 12.48rem);
}
.siderollWrap img {
  width: 100svw;
  height: auto;
}

.calculator {
  background: #EEEBE9;
  padding-top: max(3.904rem, 4.2328042328vw);
  padding-bottom: max(6.344rem, 6.8783068783vw);
  padding-inline: max(2.352rem, 1.5873015873vw);
}
@media (min-width: 768px) {
  .calculator {
    padding-inline: 8.4656084656vw;
  }
}

.calculator_inner {
  container: calculator_inner/inline-size;
}
.calculator_inner .calculator_inner_heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  row-gap: max(1.548rem, 1.1904761905vw);
}
.calculator_inner .calculator_inner_heading .titleWrap {
  grid-area: 2/1/3/3;
  width: 100%;
  align-self: center;
  justify-self: center;
  container: titleWrap/inline-size;
}
.calculator_inner .calculator_inner_heading .title {
  text-align: center;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(2.989rem, 3.2407407407vw);
  line-height: 1.2;
}
.calculator_inner .calculator_inner_heading .title span {
  display: inline-block;
}
.calculator_inner .calculator_inner_heading .title .main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: max(0.688rem, 0.5291005291vw);
}
.calculator_inner .calculator_inner_heading .title .small {
  font-weight: 600;
}
.calculator_inner .calculator_inner_heading .title .large {
  font-weight: 800;
  width: max(19.6rem, 13.2275132275vw);
}
.calculator_inner .calculator_inner_heading .title .titleLine {
  height: 100%;
}
.calculator_inner .calculator_inner_heading .title img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.calculator_inner .characterWrap01 {
  grid-area: 1/1/2/2;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.calculator_inner .characterWrap01 .balloon {
  grid-column: 1/3;
  transform: rotate(-10deg);
}
.calculator_inner .characterWrap01 .balloon img {
  width: max(19.71rem, 17.8571428571vw);
  height: max(12.41rem, 11.2433862434vw);
  object-fit: contain;
  transform: scale(0);
  transform-origin: 60% 100%;
}
.calculator_inner .characterWrap01 .balloon.active img {
  animation: balloon 0.3s cubic-bezier(0.57, 0.25, 0.46, 1.62) forwards;
}
.calculator_inner .characterWrap01 .character1 {
  grid-column: 1/2;
  justify-self: end;
  transform-origin: center bottom;
  animation: typeselecter_chara2 4s ease-in-out infinite;
}
.calculator_inner .characterWrap01 .character1 img {
  width: max(4.818rem, 4.3650793651vw);
  height: max(4.818rem, 4.3650793651vw);
  object-fit: contain;
}
.calculator_inner .characterWrap02 {
  grid-area: 1/2/2/3;
  justify-self: center;
  align-self: end;
  transform-origin: 80% 60%;
  animation: typeselecter_chara2 4s ease-in-out infinite;
}
.calculator_inner .characterWrap02 img {
  width: max(12.629rem, 11.4417989418vw);
  height: max(10.731rem, 9.7222222222vw);
  object-fit: contain;
  opacity: 0;
}
.calculator_inner .characterWrap02.active img {
  animation: fall 0.5s cubic-bezier(0.76, 0.01, 0.79, 1.89) forwards;
}
.calculator_inner .calculator_text {
  margin-top: max(2.44rem, 2.6455026455vw);
  margin-inline: auto;
  font-size: max(1.806rem, 1.3888888889vw);
  font-weight: 700;
  line-height: 1.8;
  align-items: center;
  width: fit-content;
  text-align: center;
}
.calculator_inner .calculator_text span {
  display: inline-block;
}
.calculator_inner .calculator_attention {
  margin-top: max(1.464rem, 1.5873015873vw);
  grid-column: span 2;
  justify-self: center;
  font-size: max(1.204rem, 0.9259259259vw);
  font-weight: 500;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: max(0.392rem, 0.2645502646vw);
  align-items: baseline;
}
.calculator_inner .calculator_attention .attentionheading {
  font-weight: 700;
  font-size: max(1.548rem, 1.1904761905vw);
  white-space: nowrap;
}

@container calculator_inner (min-width: 718px) {
  .calculator_inner .calculator_inner_heading {
    grid-template-columns: max(17.08rem, 18.5185185185vw) 1fr max(17.08rem, 18.5185185185vw);
  }
  .calculator_inner .calculator_inner_heading .titleWrap {
    grid-area: 1/2/2/3;
  }
  .calculator_inner .calculator_inner_heading .characterWrap01 {
    grid-area: 1/1/2/2;
  }
  .calculator_inner .calculator_inner_heading .characterWrap01 .character1 {
    grid-column: 2/3;
    justify-self: center;
    margin-top: calc(-1 * max(1.022rem, 0.9259259259vw));
  }
  .calculator_inner .calculator_inner_heading .characterWrap02 {
    grid-area: 1/3/2/4;
    justify-self: start;
    align-self: center;
  }
}
@container titleWrap (min-width: 403px) {
  @media (min-width: 540px) {
    .calculator_inner .calculator_inner_heading .titleWrap .main {
      height: max(4.453rem, 4.828042328vw);
    }
    .calculator_inner .calculator_inner_heading .titleWrap .main .large {
      width: auto;
    }
  }
}
.typeselecterContainer {
  margin-top: max(3.904rem, 4.2328042328vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: max(1.464rem, 1.5873015873vw);
  flex-wrap: wrap;
  container: typeselecterContainer/inline-size;
}
.typeselecterContainer a {
  opacity: 0;
}
.typeselecterContainer.active a {
  animation: fadeUp 0.3s ease-in forwards;
}
.typeselecterContainer.active a:nth-of-type(1) {
  animation-delay: calc(1s * 0.2);
}
.typeselecterContainer.active a:nth-of-type(2) {
  animation-delay: calc(2s * 0.2);
}
.typeselecterContainer.active a:nth-of-type(3) {
  animation-delay: calc(3s * 0.2);
}

.typeselecter {
  cursor: pointer;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(2.257rem, 2.4470899471vw);
  font-weight: 700;
  line-height: 1.2;
  background: #ffffff;
  padding: max(0.688rem, 0.5291005291vw) max(1.032rem, 0.7936507937vw) max(1.032rem, 0.7936507937vw) max(0.688rem, 0.5291005291vw);
  border-radius: max(2.236rem, 1.7195767196vw);
  transition: all 0.3s ease-in-out;
  color: #533833;
}
.typeselecter:hover {
  background: #533833;
  padding: max(0.86rem, 0.6613756614vw);
  opacity: 1;
}
.typeselecter .typeselecter_dotline {
  padding: max(1.752rem, 1.5873015873vw);
  background: #ffffff;
  border-radius: max(1.72rem, 1.3227513228vw);
  border: 1px dashed #533833;
  box-shadow: max(0.344rem, 0.2645502646vw) max(0.344rem, 0.2645502646vw) 0px 0px rgba(83, 56, 51, 0.2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(1.464rem, 1.5873015873vw);
  flex-direction: column;
  text-align: center;
}
.typeselecter .typeselecter_dotline span {
  color: #F1815C;
  font-size: max(2.989rem, 3.2407407407vw);
  line-height: 1.4;
  display: inline-block;
}
.typeselecter img {
  width: max(11.712rem, 12.6984126984vw);
  height: max(9.15rem, 9.9206349206vw);
}
.typeselecter .typeselecter_dotline {
  border-width: clamp(0.4rem, 0.2645502646vw, 0.4rem);
  border-style: dashed;
}
.typeselecter .typeselecter_dotline.small {
  border-width: 1px;
}
.typeselecter.typeselecter_flyer .typeselecter_dotline {
  border-color: #A0CE4C;
}
.typeselecter.typeselecter_flyer .typeselecter_dotline span {
  color: #A0CE4C;
}
.typeselecter.typeselecter_web .typeselecter_dotline {
  border-color: #81CAEE;
}
.typeselecter.typeselecter_web .typeselecter_dotline span {
  color: #81CAEE;
}
.typeselecter.typeselecter_anime .typeselecter_dotline {
  border-color: #F1815C;
}
.typeselecter.typeselecter_anime .typeselecter_dotline span {
  color: #F1815C;
}

.calculator .typeselecter_dotline span {
  animation: playbutton 4s cubic-bezier(0.76, 0.01, 0.79, 1.89) infinite;
}
.calculator .typeselecter_dotline span.delay1 {
  animation-delay: 0.3s;
}
.calculator .typeselecter_dotline span.delay2 {
  animation-delay: 0.6s;
}

@container typeselecterContainer (min-width : 562px) {
  .typeselecter .typeselecter_dotline {
    flex-direction: row;
    text-align: justify;
  }
}
@keyframes typeselecter_chara {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes typeselecter_chara2 {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.top {
  background: #EEEBE9;
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  padding-bottom: max(2.44rem, 2.6455026455vw);
}
.top .top_content {
  width: 100%;
}
.top .top_imgArea {
  margin-top: max(2.92rem, 2.6455026455vw);
}
.top .top_imgArea .imgWrap {
  margin-top: max(1.176rem, 1.8518518519vw);
  margin-inline: auto;
  width: max(23.1rem, 36.3756613757vw);
  aspect-ratio: 1/1;
}
.top .top_imgArea .text {
  position: relative;
  width: max(28.121rem, 30.4894179894vw);
  margin-right: max(2.44rem, 2.6455026455vw);
  margin-left: max(3.024rem, 4.7619047619vw);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.top .top_imgArea .text img {
  width: max(28.121rem, 30.4894179894vw);
  height: auto;
}
.top .top_imgArea .msg {
  position: absolute;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: all 0.3s ease-in-out;
  width: fit-content;
  height: fit-content;
  margin: auto;
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(1.464rem, 1.5873015873vw);
  letter-spacing: 0.1em;
  font-weight: 800;
  line-height: 1.3;
}
.top .top_imgArea .msg.showmsg {
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0);
}
@media (min-width: 920px) {
  .top {
    grid-template-columns: auto max(23.1rem, 36.3756613757vw);
  }
  .top .top_content {
    grid-column: span 2;
    width: 100%;
    padding-right: max(26.46rem, 41.6666666667vw);
  }
  .top .top_content.firstview {
    grid-area: 1/1/2/3;
  }
  .top .top_imgArea {
    grid-area: 1/2/3/3;
    position: sticky;
    z-index: 1;
    width: max(23.1rem, 36.3756613757vw);
    top: max(8.76rem, 7.9365079365vw);
    right: max(2.44rem, 2.6455026455vw);
    align-content: end;
    height: calc(100dvh - max(8.76rem, 7.9365079365vw));
  }
}
@media (min-width: 1024px) {
  .top {
    grid-template-columns: auto max(23.1rem, 36.3756613757vw);
  }
  .top .top_content {
    padding-right: max(26.46rem, 41.6666666667vw);
  }
  .top .top_imgArea {
    width: max(23.1rem, 36.3756613757vw);
  }
}

@media (orientation: landscape) and (919px < width) {
  .top .top_imgArea {
    height: calc(100dvh - max(8.76rem, 7.9365079365vw));
  }
}
.achievement_backgroungSpace {
  width: 100%;
  position: relative;
}
@media (min-width: 920px) {
  .achievement_backgroungSpace {
    grid-column: span 2;
  }
}
.achievement_backgroungSpace img {
  width: 100%;
}
.achievement_backgroungSpace .zoom {
  width: max(15.111rem, 13.6904761905vw);
  height: max(14.381rem, 13.0291005291vw);
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  left: max(2.92rem, 2.6455026455vw);
  animation: bgZoom linear;
  animation-timeline: view();
}

.issue {
  position: relative;
  z-index: 1;
}
.issue .issueBg {
  position: absolute;
  z-index: -1;
  top: max(2.352rem, 1.5873015873vw);
  right: max(1.568rem, 1.0582010582vw);
  width: max(13.054rem, 14.1534391534vw);
  height: max(13.054rem, 14.1534391534vw);
  animation: parallaxA linear;
  animation-timeline: view();
}
@media (min-width: 540px) {
  .issue .issueBg {
    top: max(6.278rem, 5.6878306878vw);
  }
}
@media (min-width: 640px) {
  .issue .issueBg {
    right: auto;
    left: max(40.87rem, 44.3121693122vw);
  }
}
@media (min-width: 920px) {
  .issue .issueBg {
    left: auto;
    right: max(26.46rem, 41.6666666667vw);
  }
}

.solutionBgPen {
  position: absolute;
  top: calc(max(2.336rem, 2.1164021164vw) * -1);
  left: max(2.336rem, 2.1164021164vw);
  width: max(9.271rem, 8.3994708995vw);
  height: max(7.665rem, 6.9444444444vw);
  animation: parallaxPen linear;
  animation-timeline: view();
}

.firstview {
  background: #EEEBE9;
}

@media (orientation: landscape) and (919px < width) {
  .firstview,
  .firstview_inner {
    height: 100%;
    min-height: calc(100dvh - max(4.88rem, 5.291005291vw));
  }
}
@media (min-width: 920px) {
  .firstview,
  .firstview_inner {
    height: 100%;
    min-height: calc(100dvh - max(4.88rem, 5.291005291vw));
  }
}
.firstview_inner {
  padding-bottom: max(3.904rem, 4.2328042328vw);
  display: grid;
  grid-template-rows: auto min-content;
  justify-items: center;
  container: firstview/inline-size;
}
@media (min-width: 920px) {
  .firstview_inner {
    padding-left: max(4.819rem, 5.2248677249vw);
    justify-items: start;
  }
}
.firstview_inner .content {
  align-self: center;
  margin-bottom: max(2.352rem, 1.5873015873vw);
  text-align: center;
}
@media (min-width: 920px) {
  .firstview_inner .content {
    text-align: justify;
  }
}
.firstview_inner .content .line01 {
  display: flex;
  align-items: center;
  font-family: "YakuHanJP", "M PLUS 1";
  font-weight: 800;
  line-height: 1.3;
  font-size: max(1.792rem, 1.8518518519vw);
  position: relative;
  width: fit-content;
  margin-inline: auto;
  overflow: hidden;
}
.firstview_inner .content .line01::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #EEEBE9;
  animation: line01 0.6s cubic-bezier(0.76, 0.01, 0.79, 1.89) forwards;
}
@media (min-width: 920px) {
  .firstview_inner .content .line01 {
    margin-inline: 0;
  }
}
.firstview_inner .content .loupe {
  width: max(4.736rem, 4.8941798942vw);
  margin-top: max(0.768rem, 0.7936507937vw);
  margin-right: calc(-1 * max(0.512rem, 0.5291005291vw));
  transform: scale(0);
  animation: loupe 0.3s cubic-bezier(0.76, 0.01, 0.79, 1.89) 0.8s forwards;
}
@media (min-width: 540px) {
  .firstview_inner .content .loupe {
    width: max(3.84rem, 3.9682539683vw);
  }
}
@media (min-width: 768px) {
  .firstview_inner .content .loupe {
    width: max(3.84rem, 3.9682539683vw);
  }
}
.firstview_inner .content .line02 {
  font-size: max(1.776rem, 2.4470899471vw);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  width: 100%;
}
@media (min-width: 920px) {
  .firstview_inner .content .line02 {
    width: fit-content;
  }
}
.firstview_inner .content .line02 > div {
  width: 0;
  overflow: hidden;
  animation: slide 0.8s ease-in-out forwards;
}
.firstview_inner .content .line02 > div:nth-of-type(1) {
  animation-delay: 1.8s;
}
.firstview_inner .content .line02 > div:nth-of-type(2) {
  animation-delay: 2.7s;
}
.firstview_inner .content .line02 span {
  font-size: max(3.552rem, 4.8941798942vw);
  font-weight: 900;
}
.firstview_inner .content .line03 {
  margin-top: max(1.672rem, 1.455026455vw);
  font-weight: 900;
  line-height: 1.5;
  font-size: max(1.596rem, 1.3888888889vw);
  opacity: 0;
  animation: fadeUp 0.3s cubic-bezier(0.76, 0.01, 0.79, 1.89) 3.6s forwards;
}

.boardArea {
  max-width: calc(100% - max(2.352rem, 1.5873015873vw));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: max(1.96rem, 1.3227513228vw) max(1.6rem, 2.6455026455vw);
}
@media (min-width: 540px) {
  .boardArea {
    max-width: calc(100% - max(4.819rem, 5.2248677249vw));
  }
}
@media (min-width: 768px) {
  @container firstview (510px < width) {
    .boardArea {
      justify-content: flex-start;
    }
  }
}
@media (min-width: 920px) {
  @container firstview (510px < width) {
    .boardArea {
      justify-content: space-between;
    }
  }
}
@media (min-width: 1024px) {
  .boardArea {
    width: 100%;
    max-width: 100%;
  }
}
.boardArea .board_calc {
  width: max(28.64rem, 23.6772486772vw);
}
.boardArea .board_calc .board {
  width: max(28.64rem, 23.6772486772vw);
}
.boardArea .board_calc svg {
  width: max(28.64rem, 23.6772486772vw);
}
.boardArea .board_calc .text img {
  height: max(2.72rem, 2.2486772487vw);
}
.boardArea .board_contact {
  width: max(18.64rem, 15.4100529101vw);
}
.boardArea .board_contact .board {
  width: max(18.64rem, 15.4100529101vw);
}
.boardArea .board_contact svg {
  width: max(18.64rem, 15.4100529101vw);
}
.boardArea .board_contact .text img {
  height: max(3.2rem, 2.6455026455vw);
}
.boardArea .boardWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.boardArea .boardWrap:hover {
  opacity: 1;
}
.boardArea .board {
  position: relative;
  width: 100%;
}
.boardArea .board .white {
  fill: #ffffff;
  transition: all 0.3s ease-in-out;
}
.boardArea .board:hover .white {
  fill: #FFE55F;
}
.boardArea .board .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(6.4rem, 5.291005291vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(0.64rem, 0.5291005291vw);
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(1.68rem, 1.3888888889vw);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: #533833;
}
.boardArea .board .text > img {
  object-fit: contain;
  width: auto;
}
.boardArea .shadow {
  width: max(5.76rem, 4.7619047619vw);
  height: max(2.48rem, 2.0502645503vw);
  margin-top: calc(-1 * max(1.2rem, 0.9920634921vw));
  position: relative;
  z-index: -1;
}

.board_calc {
  transform-origin: center bottom;
  animation: 6.2s boardswing cubic-bezier(0.76, 0.01, 0.79, 1.89) infinite alternate;
}

@keyframes boardswing {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(2.94deg);
  }
  10% {
    transform: rotate(-2.06deg);
  }
  15% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.issue_inner {
  padding: max(6.344rem, 6.8783068783vw) max(2.352rem, 1.5873015873vw) 0 max(2.352rem, 1.5873015873vw);
}
@media (min-width: 1024px) {
  .issue_inner {
    padding-left: max(3.904rem, 4.2328042328vw);
    padding-right: 0;
  }
}

.issue_leader {
  container: issueinner/inline-size;
}
.issue_leader .lead01 {
  font-size: max(1.708rem, 1.8518518519vw);
  font-weight: 600;
  line-height: 1.6;
}
.issue_leader .lead02 {
  margin-top: max(1.464rem, 1.5873015873vw);
  font-size: max(2.701rem, 2.4470899471vw);
  font-weight: 800;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media (min-width: 540px) {
  .issue_leader .lead02 {
    line-height: 1.6;
  }
}
.issue_leader .lead02 span {
  display: inline-block;
  font-size: max(2.989rem, 3.2407407407vw);
  position: relative;
}
.issue_leader .lead02 span::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: max(2.379rem, 2.5793650794vw);
  height: max(1.464rem, 1.5873015873vw);
  background: no-repeat url(../img/top/issue/sweat.svg) center center/contain;
}

@container issueinner (min-width : 452px) {
  .under-sp2 {
    display: none;
  }
}
.issue_items {
  margin-top: max(3.904rem, 4.2328042328vw);
  display: grid;
  grid-template-columns: auto;
  justify-items: center;
  column-gap: max(1.83rem, 1.9841269841vw);
  padding-inline: max(2.646rem, 1.7857142857vw);
}
@media (min-width: 540px) {
  .issue_items {
    grid-template-columns: 1fr 1fr;
    padding-inline: 0;
  }
}
.issue_items li {
  width: 100%;
  position: relative;
  max-width: max(29.4rem, 19.8412698413vw);
  container: issueItem/inline-size;
}
.issue_items li .balloonWrap {
  opacity: 0;
  transform: scale(0);
}
.issue_items li .balloon {
  width: 100%;
}
.issue_items li .text {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 144/119;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7cqw;
  font-weight: 700;
  line-height: 1.6;
}
.issue_items li .chara {
  position: absolute;
  bottom: 0;
}
.issue_items li.active .balloonWrap {
  animation: balloon 0.3s cubic-bezier(0.57, 0.25, 0.46, 1.62) forwards;
}
.issue_items li.active .chara {
  animation: charaswing 3s cubic-bezier(0.57, 0.25, 0.46, 1.62) infinite alternate;
}
.issue_items li.item1 .balloonWrap {
  transform-origin: left bottom;
  animation-delay: 0;
}
.issue_items li.item1 .chara {
  width: 21.3cqw;
  transform-origin: left bottom;
}
.issue_items li.item2 .balloonWrap {
  transform-origin: left bottom;
}
@media (min-width: 540px) {
  .issue_items li.item2 .balloonWrap {
    animation-delay: 0.3s;
  }
}
.issue_items li.item2 .chara {
  width: 21.3cqw;
  transform-origin: center bottom;
  animation-delay: 0.2s;
}
@media (min-width: 540px) {
  .issue_items li.item2 .chara {
    animation-delay: 0.5s;
  }
}
.issue_items li.item3 .balloonWrap {
  transform-origin: right bottom;
}
.issue_items li.item3 .chara {
  width: 19.3cqw;
  right: 0;
  transform-origin: right bottom;
}
.issue_items li.item4 .balloonWrap {
  transform-origin: right bottom;
}
@media (min-width: 540px) {
  .issue_items li.item4 .balloonWrap {
    animation-delay: 0.3s;
  }
}
.issue_items li.item4 .text {
  aspect-ratio: 14/11;
}
.issue_items li.item4 .chara {
  width: 23cqw;
  right: 0;
  transform-origin: center bottom;
  animation-delay: 0.2s;
}
@media (min-width: 540px) {
  .issue_items li.item4 .chara {
    animation-delay: 0.5s;
  }
}

@keyframes charaswing {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes balloon {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.top_content.solution {
  background: no-repeat url(../img/top/background/white.svg) 100% 100%;
  background-size: contain;
  position: relative;
}

.solution_inner {
  padding-top: max(10.248rem, 11.1111111111vw);
  padding-bottom: max(5.194rem, 3.5052910053vw);
  container: solution/inline-size;
}

.solution_heading {
  padding: max(1.464rem, 1.5873015873vw) max(3.904rem, 4.2328042328vw);
  width: fit-content;
  border-radius: 0 max(7.081rem, 6.4153439153vw) max(7.081rem, 6.4153439153vw) 0;
  background: #533833;
  color: #ffffff;
  font-size: max(1.952rem, 2.1164021164vw);
  font-weight: 800;
  line-height: 1.8;
}
.solution_heading span {
  font-size: max(2.562rem, 2.7777777778vw);
  width: fit-content;
  position: relative;
  z-index: 1;
}
.solution_heading span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(to top, #A0CE4C 11px, transparent 11px);
  transition: 0.3s ease-out;
}
.solution_heading.active span::after {
  width: 100%;
}

.solution_contents {
  padding-block: max(5.504rem, 4.2328042328vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(5.504rem, 4.2328042328vw);
  padding-left: max(2.352rem, 1.5873015873vw);
  padding-right: max(2.352rem, 1.5873015873vw);
}
@media (min-width: 1024px) {
  .solution_contents {
    padding-left: max(3.904rem, 4.2328042328vw);
    padding-right: 0;
  }
}
.solution_contents li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: max(2.064rem, 1.5873015873vw);
  position: relative;
}
@media (min-width: 540px) {
  .solution_contents li:nth-of-type(even) {
    flex-direction: row;
  }
}
@media (min-width: 540px) {
  .solution_contents li:nth-of-type(odd) {
    flex-direction: row-reverse;
  }
}
.solution_contents li.active .imgWrap {
  animation: solutionImg 0.3s cubic-bezier(0.57, 0.25, 0.46, 1.62) forwards;
}
.solution_contents li .background {
  position: absolute;
  right: 0;
  bottom: 0;
  display: none;
}
@media (min-width: 920px) {
  .solution_contents li .background {
    display: block;
    width: max(4.38rem, 3.9682539683vw);
    height: max(6.862rem, 6.2169312169vw);
    transform: translateX(200%) translateY(100%);
    animation: parallaxSolution linear;
    animation-timeline: view();
  }
}
.solution_contents .imgWrap {
  flex-shrink: 0;
  width: max(156px, 10.3174603175vw);
  height: max(156px, 10.3174603175vw);
  aspect-ratio: 1/1;
  opacity: 0;
}
.solution_contents .imgWrap.sl4 {
  background: #ffffff;
  border-radius: 50%;
}
.solution_contents .textWrap {
  flex-grow: 1;
}
.solution_contents .textWrap .title {
  font-weight: 800;
  line-height: 1.3;
  font-size: max(2.044rem, 1.8518518519vw);
}
.solution_contents .textWrap .title > span {
  display: inline-block;
}
.solution_contents .textWrap .text {
  margin-top: max(1.376rem, 1.0582010582vw);
  font-weight: 500;
  line-height: 1.6;
  font-size: max(1.548rem, 1.1904761905vw);
}
.solution_contents .textWrap .text a {
  text-decoration: underline;
}

.padding {
  padding-left: max(2.352rem, 1.5873015873vw);
  padding-right: max(2.352rem, 1.5873015873vw);
}
@media (min-width: 1024px) {
  .padding {
    padding-left: max(3.904rem, 4.2328042328vw);
    padding-right: 0;
  }
}

.solution_inner .boardArea {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  gap: max(1.96rem, 1.3227513228vw) max(1.6rem, 2.6455026455vw);
}
@media (min-width: 768px) {
  @container solution (510px < width) {
    .solution_inner .boardArea {
      justify-content: flex-start;
    }
  }
}
@media (min-width: 920px) {
  @container solution (510px < width) {
    .solution_inner .boardArea {
      justify-content: space-between;
    }
  }
}
@media (min-width: 1024px) {
  .solution_inner .boardArea {
    width: 100%;
    max-width: 100%;
  }
}
.solution_inner .boardArea .board_calc {
  width: max(28.64rem, 23.6772486772vw);
}
.solution_inner .boardArea .board_calc .board {
  width: max(28.64rem, 23.6772486772vw);
}
.solution_inner .boardArea .board_calc svg {
  width: max(28.64rem, 23.6772486772vw);
}
.solution_inner .boardArea .board_calc .text img {
  height: max(2.72rem, 2.2486772487vw);
}
.solution_inner .boardArea .board_contact {
  width: max(18.64rem, 15.4100529101vw);
}
.solution_inner .boardArea .board_contact .board {
  width: max(18.64rem, 15.4100529101vw);
}
.solution_inner .boardArea .board_contact svg {
  width: max(18.64rem, 15.4100529101vw);
}
.solution_inner .boardArea .board_contact .text img {
  height: max(3.2rem, 2.6455026455vw);
}
.solution_inner .boardArea .boardWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.solution_inner .boardArea .boardWrap:hover {
  opacity: 1;
}
.solution_inner .boardArea .board {
  position: relative;
  width: 100%;
}
.solution_inner .boardArea .board .white {
  fill: #ffffff;
}
.solution_inner .boardArea .board:hover .white {
  fill: #FFE55F;
}
.solution_inner .boardArea .board .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(6.4rem, 5.291005291vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(0.64rem, 0.5291005291vw);
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(1.68rem, 1.3888888889vw);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: #533833;
}
.solution_inner .boardArea .board .text > img {
  object-fit: contain;
  width: auto;
}
.solution_inner .boardArea .shadow {
  width: max(5.76rem, 4.7619047619vw);
  height: max(2.48rem, 2.0502645503vw);
  margin-top: calc(-1 * max(1.2rem, 0.9920634921vw));
  position: relative;
  z-index: -1;
}

@keyframes solutionImg {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.top_content.points {
  background: #ffffff;
  overflow: clip;
}

.points_inner {
  padding: 0 max(2.352rem, 1.5873015873vw) max(6.344rem, 6.8783068783vw) max(2.352rem, 1.5873015873vw);
  position: relative;
  container: pointinner/inline-size;
}
@media (min-width: 1024px) {
  .points_inner {
    padding-left: max(3.904rem, 4.2328042328vw);
    padding-right: 0;
  }
}

.points_heading {
  font-size: max(2.701rem, 2.4470899471vw);
  font-weight: 700;
  line-height: 1.6;
  padding-top: max(6.344rem, 6.8783068783vw);
  padding-bottom: max(3.904rem, 4.2328042328vw);
  background: no-repeat url(../img/top/background/itemBrush.svg);
  background-position: bottom 0 right max(1.568rem, 1.0582010582vw);
  background-size: max(21.243rem, 19.246031746vw) max(18.396rem, 16.6666666667vw);
}
@media (min-width: 540px) {
  .points_heading {
    width: fit-content;
    background-position: top 0 right 0;
  }
}
.points_heading span {
  opacity: 0;
}
.points_heading.active span {
  animation: fadeUp 0.3s cubic-bezier(0.76, 0.01, 0.79, 1.89) forwards;
}

.points_character {
  width: fit-content;
  margin: calc(-1 * max(3.904rem, 4.2328042328vw)) 0 max(3.904rem, 4.2328042328vw) auto;
  text-align: right;
  animation: point_chara 4s ease-in-out infinite alternate;
}
.points_character img {
  width: max(9.455rem, 10.2513227513vw);
  height: max(8.54rem, 9.2592592593vw);
  object-fit: contain;
  opacity: 0;
}
.points_character.active img {
  animation: fall 0.6s cubic-bezier(0.76, 0.01, 0.79, 1.89) forwards;
}

@media (max-width: 919px) {
  @container pointinner (min-width: 460px) {
    .points_character {
      margin: calc(-1 * max(1.22rem, 1.3227513228vw)) 0 0 0;
      position: absolute;
      top: max(11.102rem, 12.037037037vw);
      right: max(2.352rem, 1.5873015873vw);
    }
  }
}
@media (min-width: 920px) {
  @container pointinner (min-width: 470px) {
    .points_character {
      margin: calc(-1 * max(1.22rem, 1.3227513228vw)) 0 0 0;
      position: absolute;
      top: max(11.102rem, 12.037037037vw);
      right: 0;
    }
  }
}
.pointWrap {
  position: relative;
}
.pointWrap .pointBg {
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
}
@media (min-width: 920px) {
  .pointWrap .pointBg {
    display: block;
  }
}
.pointWrap .pointBg img {
  object-fit: contain;
}
.pointWrap .bg1 {
  width: max(8.249rem, 7.4735449735vw);
  height: max(9.125rem, 8.2671957672vw);
  transform: translateX(256%) translateY(80%);
  animation: bgClip linear;
  animation-timeline: view(block 100px);
}
.pointWrap .bg2 {
  width: max(17.374rem, 15.7407407407vw);
  height: max(11.315rem, 10.2513227513vw);
  transform: translateX(263%) translateY(73%);
  animation: bgCamera linear;
  animation-timeline: view(block 200px);
}
.pointWrap .bg3 {
  width: max(8.03rem, 7.2751322751vw);
  height: max(13.651rem, 12.3677248677vw);
  transform: translateX(100%) translateY(49%);
  animation: bgPen linear;
  animation-timeline: view(block 100px);
}

.pointWrap + .pointWrap {
  margin-top: max(3.904rem, 4.2328042328vw);
}

.point_tab {
  padding: max(0.688rem, 0.5291005291vw) max(3.612rem, 2.7777777778vw);
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(1.376rem, 1.0582010582vw);
  border-radius: max(1.568rem, 1.0582010582vw) max(1.568rem, 1.0582010582vw) 0 0;
  font-size: max(2.408rem, 1.8518518519vw);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin: auto;
  text-transform: uppercase;
}
.point_tab span {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(4.214rem, 3.2407407407vw);
  height: max(4.214rem, 3.2407407407vw);
  aspect-ratio: 1/1;
}
.point_tab.point1 {
  background: #A0CE4C;
}
.point_tab.point1 span {
  color: #A0CE4C;
  border-radius: 50%;
}
.point_tab.point2 {
  background: #7FC697;
}
.point_tab.point2 span {
  color: #7FC697;
  border-radius: 50%;
}
.point_tab.point3 {
  background: #F1815C;
}
.point_tab.point3 span {
  color: #F1815C;
  border-radius: 50%;
}

.point_inner {
  padding: max(2.56rem, 4.2328042328vw);
  border-radius: max(1.568rem, 1.0582010582vw);
}
.point_inner.point1 {
  border: max(4px, 0.2645502646vw) solid #A0CE4C;
}
.point_inner.point2 {
  border: max(4px, 0.2645502646vw) solid #7FC697;
}
.point_inner.point3 {
  border: max(4px, 0.2645502646vw) solid #F1815C;
}
.point_inner.active .moveWrap {
  animation: fadeUp 0.3s cubic-bezier(0.76, 0.01, 0.79, 1.89) forwards;
}
.point_inner.active .title {
  animation: fadeUp 0.3s cubic-bezier(0.76, 0.01, 0.79, 1.89) 0.4s forwards;
}
.point_inner.active .textWrap {
  animation: fadeUp 0.3s cubic-bezier(0.76, 0.01, 0.79, 1.89) 0.8s forwards;
}
.point_inner .moveWrap {
  width: 100%;
  opacity: 0;
}
.point_inner .moveWrap .videoBox {
  width: 100%;
  aspect-ratio: 134/85;
}
.point_inner .title {
  font-size: max(2.408rem, 1.8518518519vw);
  font-weight: 700;
  line-height: 1.3;
  margin-top: max(1.6rem, 2.6455026455vw);
  opacity: 0;
}
.point_inner .textWrap {
  margin-top: max(1.376rem, 1.0582010582vw);
  font-size: max(1.548rem, 1.1904761905vw);
  font-weight: 400;
  line-height: 1.8;
  opacity: 0;
}

@keyframes point_chara {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}
.achievement_inner {
  padding: max(6.344rem, 6.8783068783vw) max(2.352rem, 1.5873015873vw) max(6.344rem, 6.8783068783vw) max(2.352rem, 1.5873015873vw);
  position: relative;
}
@media (min-width: 1024px) {
  .achievement_inner {
    padding-left: max(3.904rem, 4.2328042328vw);
    padding-right: 0;
  }
}
.achievement_inner .layoutfigure {
  width: max(52.268rem, 47.3544973545vw);
  height: max(42.705rem, 38.6904761905vw);
  position: absolute;
  top: -4%;
  display: none;
  opacity: 0;
}
@media (min-width: 768px) {
  .achievement_inner .layoutfigure {
    display: block;
    right: 0;
  }
}
@media (min-width: 920px) {
  .achievement_inner .layoutfigure {
    right: -56.5%;
  }
}
.achievement_inner .layoutfigure.active {
  opacity: 1;
}

.achievement_character {
  position: absolute;
  top: 0;
  right: max(2.352rem, 1.5873015873vw);
  width: max(9.577rem, 10.3835978836vw);
  height: max(8.54rem, 9.2592592593vw);
  transform-origin: center bottom;
  animation: achievement_chara 4s ease-in-out infinite;
}
@media (min-width: 540px) {
  .achievement_character {
    top: max(2.745rem, 2.9761904762vw);
  }
}
@media (min-width: 1440px) {
  .achievement_character {
    right: max(4.88rem, 5.291005291vw);
  }
}
.achievement_character img {
  object-fit: contain;
  opacity: 0;
}
.achievement_character.active img {
  animation: fall 0.6s cubic-bezier(0.76, 0.01, 0.79, 1.89) forwards;
}

.achievementWrap {
  position: relative;
}
.achievementWrap .title {
  font-size: max(1.806rem, 1.3888888889vw);
  font-weight: 700;
  line-height: 1.3;
}
.achievementWrap ul,
.achievementWrap dl {
  margin-top: max(0.688rem, 0.5291005291vw);
  font-size: max(1.204rem, 0.9259259259vw);
  font-weight: 400;
  line-height: 1.8;
}
.achievementWrap dl div {
  display: grid;
  grid-template-columns: max(3.784rem, 2.9100529101vw) auto;
  align-items: center;
  justify-content: start;
  gap: max(0.688rem, 0.5291005291vw);
}
.achievementWrap dl div dt {
  display: flex;
  justify-content: space-between;
}
.achievementWrap dl div.long {
  grid-template-columns: max(7.396rem, 5.6878306878vw) auto;
}
.achievementWrap .movieArea {
  margin-top: max(2.064rem, 1.5873015873vw);
  display: flex;
  flex-wrap: wrap;
  gap: max(2.064rem, 1.5873015873vw);
}
.achievementWrap .achievementMoveWrap {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: max(31.609rem, 28.6375661376vw);
  height: auto;
  overflow: hidden;
}
.achievementWrap .achievementMoveWrap .movieButton {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.achievementWrap .achievementMoveWrap .movieButton img {
  object-fit: cover;
}
.achievementWrap .achievementMoveWrap .playIcon {
  position: absolute;
  z-index: 1;
  width: max(4.672rem, 4.2328042328vw);
  height: max(4.672rem, 4.2328042328vw);
  animation: playbutton 4s cubic-bezier(0.76, 0.01, 0.79, 1.89) infinite;
}
.achievementWrap .achievementMoveWrap .playIcon.icon2 {
  animation-delay: 0.3s;
}
.achievementWrap .achievementMoveWrap .moviebox {
  position: fixed;
  top: 100vh;
  left: 0;
  z-index: 8000;
  width: 100svw;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.achievementWrap .achievementMoveWrap .moviebox.show {
  top: 0;
  opacity: 1;
  height: 100svh;
}
.achievementWrap .achievementMoveWrap .movieBackground {
  background: #533833;
  width: 100svw;
  height: 100svh;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0.75;
}
.achievementWrap .achievementMoveWrap .closeButton {
  position: absolute;
  top: 2.6455026455vw;
  right: 2.6455026455vw;
}
.achievementWrap .achievementMoveWrap .closeButton img {
  max-width: 100%;
  max-height: 100%;
  width: max(4.902rem, 3.7698412698vw);
  height: max(4.902rem, 3.7698412698vw);
}
.achievementWrap .youtubeWrap {
  width: 75vw;
}
.achievementWrap .youtubeWrap iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.achievementWrap + .achievementWrap {
  margin-top: max(2.064rem, 1.5873015873vw);
}

.serviceWrap {
  margin-top: max(2.064rem, 1.5873015873vw);
}
.serviceWrap .title {
  font-size: max(1.376rem, 1.0582010582vw);
  font-weight: 700;
  line-height: 1.3;
}
.serviceWrap .subtitle {
  margin-top: max(0.688rem, 0.5291005291vw);
  font-size: max(1.204rem, 0.9259259259vw);
  font-weight: 700;
  line-height: 1.2;
}
.serviceWrap div {
  margin-top: max(0.344rem, 0.2645502646vw);
  font-size: max(1.204rem, 0.9259259259vw);
  font-weight: 400;
  line-height: 1.8;
}

.calcmenu {
  margin-top: max(3.612rem, 2.7777777778vw);
  padding: max(1.376rem, 1.0582010582vw);
  container: calcmenu/inline-size;
}
.calcmenu .lead {
  font-size: max(1.752rem, 1.5873015873vw);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.calcmenu .linksWrap {
  margin-top: max(0.688rem, 0.5291005291vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: max(0.688rem, 0.5291005291vw);
}
.calcmenu .linksWrap a {
  opacity: 0;
}
.calcmenu .linksWrap.active a {
  animation: fadeUp 0.3s ease-in forwards;
}
.calcmenu .linksWrap.active a:nth-of-type(1) {
  animation-delay: calc(1s * 0.2);
}
.calcmenu .linksWrap.active a:nth-of-type(2) {
  animation-delay: calc(2s * 0.2);
}
.calcmenu .linksWrap.active a:nth-of-type(3) {
  animation-delay: calc(3s * 0.2);
}
.calcmenu .typeselecter {
  flex-shrink: 0;
  padding: max(0.344rem, 0.2645502646vw) max(0.516rem, 0.3968253968vw) max(0.588rem, 0.3968253968vw) max(0.344rem, 0.2645502646vw);
  font-size: max(1.376rem, 1.0582010582vw);
}
.calcmenu .typeselecter:hover {
  padding: max(0.43rem, 0.3306878307vw);
}
.calcmenu .typeselecter_dotline {
  padding: max(1.533rem, 1.3888888889vw) max(0.584rem, 0.5291005291vw);
  box-shadow: max(0.172rem, 0.1322751323vw) max(0.172rem, 0.1322751323vw) 0px 0px rgba(83, 56, 51, 0.2);
  text-align: center;
}
.calcmenu .typeselecter_dotline span {
  font-size: max(1.533rem, 1.3888888889vw);
}

@container calcmenu (min-width: 550px) {
  .calcmenu .linksWrap {
    flex-direction: row;
  }
  .calcmenu .in_lead {
    display: none;
  }
}
@container calcmenu ( 400px < width < 550px ) {
  .in_type {
    display: none;
  }
}
@keyframes achievement_chara {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}
.howto_inner {
  padding-bottom: max(3.904rem, 4.2328042328vw);
  container: howto/inline-size;
}

.howto_heading {
  padding: max(0.61rem, 0.6613756614vw) max(3.904rem, 4.2328042328vw);
  width: fit-content;
  border-radius: 0 max(2.336rem, 2.1164021164vw) max(2.336rem, 2.1164021164vw) 0;
  background: #533833;
  color: #ffffff;
  font-size: max(1.952rem, 2.1164021164vw);
  font-weight: 700;
  line-height: 1.3;
}

.howto_contentsWrap {
  padding-top: max(1.752rem, 1.5873015873vw);
  padding-left: max(2.352rem, 1.5873015873vw);
  padding-right: max(2.352rem, 1.5873015873vw);
}
@media (min-width: 1024px) {
  .howto_contentsWrap {
    padding-left: max(3.904rem, 4.2328042328vw);
    padding-right: 0;
  }
}

.howto_contents {
  display: grid;
  grid-template-columns: max(4.816rem, 3.7037037037vw) 1fr;
  gap: max(1.752rem, 1.5873015873vw) max(1.168rem, 1.0582010582vw);
}
.howto_contents li {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  justify-content: start;
  gap: max(0.392rem, 0.2645502646vw) max(0.688rem, 0.5291005291vw);
  opacity: 0;
}
.howto_contents li .number {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: max(0.258rem, 0.1984126984vw);
  width: max(4.816rem, 3.7037037037vw);
  height: max(4.816rem, 3.7037037037vw);
  background: #533833;
  color: #ffffff;
  font-size: max(2.752rem, 2.1164021164vw);
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}
.howto_contents li .title {
  font-size: max(2.064rem, 1.5873015873vw);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}
.howto_contents li .title > span {
  display: inline-block;
}
.howto_contents li .title span.small {
  font-size: max(1.548rem, 1.1904761905vw);
}
@media (min-width: 540px) {
  .howto_contents li .title span.small {
    vertical-align: middle;
  }
}
.howto_contents li .text {
  grid-area: 2/2/3/3;
  font-size: max(1.376rem, 1.0582010582vw);
  line-height: 1.6;
  font-weight: 500;
}
.howto_contents.active li {
  animation: fadeUp 0.3s ease-in forwards;
}
.howto_contents.active li:nth-of-type(1) {
  animation-delay: calc(1s * 0.2);
}
.howto_contents.active li:nth-of-type(2) {
  animation-delay: calc(2s * 0.2);
}
.howto_contents.active li:nth-of-type(3) {
  animation-delay: calc(3s * 0.2);
}
.howto_contents.active li:nth-of-type(4) {
  animation-delay: calc(4s * 0.2);
}
.howto_contents.active li:nth-of-type(5) {
  animation-delay: calc(5s * 0.2);
}
.howto_contents.active li:nth-of-type(6) {
  animation-delay: calc(6s * 0.2);
}

.top_brown {
  background: #533833;
  padding-block: max(3.904rem, 4.2328042328vw);
}

.top_brown_inner {
  text-align: center;
  color: #ffffff;
}
.top_brown_inner .heading {
  font-family: "YakuHanJP", "M PLUS 1";
  font-size: max(2.336rem, 2.1164021164vw);
  font-weight: 500;
  line-height: 1.2;
}
.top_brown_inner .heading > span {
  display: inline-block;
}
.top_brown_inner .text {
  margin-top: max(1.376rem, 1.0582010582vw);
  font-size: max(1.376rem, 1.0582010582vw);
  font-weight: 700;
  line-height: 1.6;
}

.brownArrow {
  width: 100%;
  background: #EEEBE9;
}
.brownArrow::after {
  content: "";
  display: block;
  margin-inline: auto;
  width: max(11.27rem, 7.6058201058vw);
  height: max(5.194rem, 3.5052910053vw);
  background: #533833;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

/***************************************************
 * Generated by SVG Artista on 2/23/2026, 1:27:07 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 93.5961761475px;
    stroke-dasharray: 93.5961761475px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.5961761475px;
  }
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 93.5961761475px;
    stroke-dasharray: 93.5961761475px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.5961761475px;
  }
}
.active .svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s both;
  animation: animate-svg-stroke-1 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 93.6114578247px;
    stroke-dasharray: 93.6114578247px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6114578247px;
  }
}
@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 93.6114578247px;
    stroke-dasharray: 93.6114578247px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6114578247px;
  }
}
.active .svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.1s both;
  animation: animate-svg-stroke-2 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.1s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 93.6020812988px;
    stroke-dasharray: 93.6020812988px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6020812988px;
  }
}
@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 93.6020812988px;
    stroke-dasharray: 93.6020812988px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6020812988px;
  }
}
.active .svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
  animation: animate-svg-stroke-3 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 93.6114654541px;
    stroke-dasharray: 93.6114654541px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6114654541px;
  }
}
@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 93.6114654541px;
    stroke-dasharray: 93.6114654541px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6114654541px;
  }
}
.active .svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.3s both;
  animation: animate-svg-stroke-4 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.3s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 93.6115112305px;
    stroke-dasharray: 93.6115112305px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6115112305px;
  }
}
@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 93.6115112305px;
    stroke-dasharray: 93.6115112305px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6115112305px;
  }
}
.active .svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s both;
  animation: animate-svg-stroke-5 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 93.6021118164px;
    stroke-dasharray: 93.6021118164px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6021118164px;
  }
}
@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 93.6021118164px;
    stroke-dasharray: 93.6021118164px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6021118164px;
  }
}
.active .svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.5s both;
  animation: animate-svg-stroke-6 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.5s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 93.6021347046px;
    stroke-dasharray: 93.6021347046px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6021347046px;
  }
}
@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 93.6021347046px;
    stroke-dasharray: 93.6021347046px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6021347046px;
  }
}
.active .svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.6s both;
  animation: animate-svg-stroke-7 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.6s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 93.6020431519px;
    stroke-dasharray: 93.6020431519px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6020431519px;
  }
}
@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 93.6020431519px;
    stroke-dasharray: 93.6020431519px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 93.6020431519px;
  }
}
.active .svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.7s both;
  animation: animate-svg-stroke-8 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.7s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 38.9238128662px;
    stroke-dasharray: 38.9238128662px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.9238128662px;
  }
}
@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 38.9238128662px;
    stroke-dasharray: 38.9238128662px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.9238128662px;
  }
}
.active .svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.8s both;
  animation: animate-svg-stroke-9 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 112.799697876px;
    stroke-dasharray: 112.799697876px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.799697876px;
  }
}
@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 112.799697876px;
    stroke-dasharray: 112.799697876px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.799697876px;
  }
}
.active .svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.9s both;
  animation: animate-svg-stroke-10 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 38.9425849915px;
    stroke-dasharray: 38.9425849915px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.9425849915px;
  }
}
@keyframes animate-svg-stroke-11 {
  0% {
    stroke-dashoffset: 38.9425849915px;
    stroke-dasharray: 38.9425849915px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.9425849915px;
  }
}
.active .svg-elem-11 {
  -webkit-animation: animate-svg-stroke-11 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1s both;
  animation: animate-svg-stroke-11 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1s both;
}

@-webkit-keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 112.8090133667px;
    stroke-dasharray: 112.8090133667px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.8090133667px;
  }
}
@keyframes animate-svg-stroke-12 {
  0% {
    stroke-dashoffset: 112.8090133667px;
    stroke-dasharray: 112.8090133667px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.8090133667px;
  }
}
.active .svg-elem-12 {
  -webkit-animation: animate-svg-stroke-12 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.1s both;
  animation: animate-svg-stroke-12 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 112.8124465942px;
    stroke-dasharray: 112.8124465942px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.8124465942px;
  }
}
@keyframes animate-svg-stroke-13 {
  0% {
    stroke-dashoffset: 112.8124465942px;
    stroke-dasharray: 112.8124465942px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.8124465942px;
  }
}
.active .svg-elem-13 {
  -webkit-animation: animate-svg-stroke-13 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.2s both;
  animation: animate-svg-stroke-13 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.2s both;
}

@-webkit-keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 38.9331245422px;
    stroke-dasharray: 38.9331245422px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.9331245422px;
  }
}
@keyframes animate-svg-stroke-14 {
  0% {
    stroke-dashoffset: 38.9331245422px;
    stroke-dasharray: 38.9331245422px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.9331245422px;
  }
}
.active .svg-elem-14 {
  -webkit-animation: animate-svg-stroke-14 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.3s both;
  animation: animate-svg-stroke-14 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 112.8124389648px;
    stroke-dasharray: 112.8124389648px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.8124389648px;
  }
}
@keyframes animate-svg-stroke-15 {
  0% {
    stroke-dashoffset: 112.8124389648px;
    stroke-dasharray: 112.8124389648px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 112.8124389648px;
  }
}
.active .svg-elem-15 {
  -webkit-animation: animate-svg-stroke-15 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.4s both;
  animation: animate-svg-stroke-15 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.4s both;
}

@-webkit-keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 38.929775238px;
    stroke-dasharray: 38.929775238px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.929775238px;
  }
}
@keyframes animate-svg-stroke-16 {
  0% {
    stroke-dashoffset: 38.929775238px;
    stroke-dasharray: 38.929775238px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 38.929775238px;
  }
}
.active .svg-elem-16 {
  -webkit-animation: animate-svg-stroke-16 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.5s both;
  animation: animate-svg-stroke-16 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.5s both;
}

@-webkit-keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 1681.0592041016px;
    stroke-dasharray: 1681.0592041016px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1681.0592041016px;
  }
}
@keyframes animate-svg-stroke-17 {
  0% {
    stroke-dashoffset: 1681.0592041016px;
    stroke-dasharray: 1681.0592041016px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1681.0592041016px;
  }
}
.active .svg-elem-17 {
  -webkit-animation: animate-svg-stroke-17 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.6s both;
  animation: animate-svg-stroke-17 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 311.0030212402px;
    stroke-dasharray: 311.0030212402px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 311.0030212402px;
  }
}
@keyframes animate-svg-stroke-18 {
  0% {
    stroke-dashoffset: 311.0030212402px;
    stroke-dasharray: 311.0030212402px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 311.0030212402px;
  }
}
.active .svg-elem-18 {
  -webkit-animation: animate-svg-stroke-18 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.7s both;
  animation: animate-svg-stroke-18 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.7s both;
}

@-webkit-keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 774.8003540039px;
    stroke-dasharray: 774.8003540039px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 774.8003540039px;
  }
}
@keyframes animate-svg-stroke-19 {
  0% {
    stroke-dashoffset: 774.8003540039px;
    stroke-dasharray: 774.8003540039px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 774.8003540039px;
  }
}
.active .svg-elem-19 {
  -webkit-animation: animate-svg-stroke-19 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.8s both;
  animation: animate-svg-stroke-19 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.8s both;
}

@-webkit-keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 397.7998962402px;
    stroke-dasharray: 397.7998962402px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 397.7998962402px;
  }
}
@keyframes animate-svg-stroke-20 {
  0% {
    stroke-dashoffset: 397.7998962402px;
    stroke-dasharray: 397.7998962402px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 397.7998962402px;
  }
}
.active .svg-elem-20 {
  -webkit-animation: animate-svg-stroke-20 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.9s both;
  animation: animate-svg-stroke-20 0.8s cubic-bezier(0.19, 1, 0.22, 1) 1.9s both;
}

@-webkit-keyframes animate-svg-stroke-21 {
  0% {
    stroke-dashoffset: 481.6192932129px;
    stroke-dasharray: 481.6192932129px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 481.6192932129px;
  }
}
@keyframes animate-svg-stroke-21 {
  0% {
    stroke-dashoffset: 481.6192932129px;
    stroke-dasharray: 481.6192932129px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 481.6192932129px;
  }
}
.active .svg-elem-21 {
  -webkit-animation: animate-svg-stroke-21 0.8s cubic-bezier(0.19, 1, 0.22, 1) 2s both;
  animation: animate-svg-stroke-21 0.8s cubic-bezier(0.19, 1, 0.22, 1) 2s both;
}

@-webkit-keyframes animate-svg-stroke-22 {
  0% {
    stroke-dashoffset: 2604.2600097656px;
    stroke-dasharray: 2604.2600097656px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2604.2600097656px;
  }
}
@keyframes animate-svg-stroke-22 {
  0% {
    stroke-dashoffset: 2604.2600097656px;
    stroke-dasharray: 2604.2600097656px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2604.2600097656px;
  }
}
.active .svg-elem-22 {
  -webkit-animation: animate-svg-stroke-22 0.8s cubic-bezier(0.19, 1, 0.22, 1) 2.1s both;
  animation: animate-svg-stroke-22 0.8s cubic-bezier(0.19, 1, 0.22, 1) 2.1s both;
}

/*# sourceMappingURL=styles.css.map */