@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&subset=japanese");@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap");
/*
Typography
*/


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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-delay: 0s !important;
            animation-delay: 0s !important;
    -webkit-animation-duration: 1ms !important;
            animation-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
  }
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

audio, embed, img, object {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  width: auto;
}

img, picture {
  display: block;
  max-width: 100%;
}

button {
  -webkit-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-transform: none;
}

button, input, select, textarea {
  -webkit-appearance: none;
          appearance: none;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, [type=button], [type=reset], [type=submit], label[for], select,
summary, [role=tab], [role=button] {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
  display: block;
  height: auto;
  max-width: 100%;
}

ol, ul {
  list-style-type: "";
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}

svg {
  vertical-align: bottom;
}

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

td, th {
  padding: 0;
  text-align: left;
}

textarea {
  field-sizing: content;
}

a, area, button, input, label, select, summary, textarea, [tabindex] {
  touch-action: manipulation;
}

a {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*:focus:not(:focus-visible),
*::before:focus:not(:focus-visible),
*::after:focus:not(:focus-visible) {
  outline: none;
}

button::-moz-focus-inner {
  border: 0;
}

* {
  -webkit-touch-callout: none;
}

input[type=text], select, textarea {
  font-size: 1rem;
}

input[type=text], input[type=tel], input[type=email], textarea {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  appearance: none;
}

input[type=submit] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}

#map-canvas img {
  max-width: none;
}

#map-canvas label {
  display: inline;
  width: auto;
}

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}
/*
Basic style
*/
:root {
  --primary: #5db6e7;
  --secondary: #fff251;
  --attesa: #1b68a8;
  --xc: #e281c2;
  --collection: #e8b136;
  --black: #000;
  --white: #FFF;
  --white-rgb: 255,255,255;
  --tertiary: #c9dfea;
  --gray: #F2F2F2;
  --border: #EFEFEF;
  --leading-trim: calc((1em - 1lh) / 2);
  --leading-trim-en: calc((1cap - 1lh) / 2);
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: "Poppins", "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

a {
  text-decoration: none;
}

b,
strong,
.-bold {
  font-weight: 700;
}

sup {
  display: inline-block;
  -webkit-transform: scale(0.8) translateX(-0.2em);
  margin-right: -0.2em;
          transform: scale(0.8) translateX(-0.2em);
}

.svg-spacer {
  fill: transparent;
}

@media (750px <= width) {
  .-sm {
    display: none !important;
  }
}

@media (1120px <= width) {
  .-smd {
    display: none !important;
  }
}

@media (width < 750px) {
  .-md {
    display: none !important;
  }
}

@media (width < 1120px) {
  .-lg {
    display: none !important;
  }
}

@media (width < 1200px) {
  .-xl {
    display: none !important;
  }
}

/*
loader
*/
@media (scripting: none) {
  .loader {
    display: none;
  }
}
.loader {
  background-color: var(--primary);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  transition: height 0.3s ease-in-out 0.1s;
  width: 100vw;
  z-index: calc(infinity);
}
.loader.is-loaded {
  height: 0;
}

.loader::after {
  background-color: var(--primary);
  bottom: 0;
  content: "";
  display: block;
  height: 0;
  left: 0;
  position: absolute;
  transition: height 0.3s ease-in-out;
  width: 100vw;
}
.loader.is-active {
  background-color: transparent;
  bottom: 0;
  height: 100vh;
  top: auto;
}
.loader.is-active::after {
  height: 100vh;
}

/*
header
*/
.is-fixed {
  position: fixed;
  width: 100%;
}

.header {
  align-items: center;
  background-color: var(--white);
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding-inline: 16px;
  position: relative;
  top: 0;
  transition: top 0.4s;
  width: 100%;
  z-index: 2;
}
@media (750px <= width) {
  .header {
    height: 60px;
    padding-inline: 40px;
  }
}
.header__newlife {
  width: 191px;
}
@media (750px <= width) {
  .header__newlife {
    width: 258px;
  }
}
.header__citizen {
  width: 64px;
}
@media (750px <= width) {
  .header__citizen {
    width: 85px;
  }
}

/*
footer
*/
.footer {
  border-top: 1px solid var(--black);
  padding-block: 10.1333333333vw 16vw;
  position: relative;
}
@media (750px <= width) {
  .footer {
    padding-block: 58px;
  }
}
@media (1120px <= width) {
  .footer__inner {
    align-items: flex-start;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding-inline: 110px;
    grid-column-gap: 10px;
    grid-row-gap: 8px;
  }
  .footer__inner .footer__sns {
    grid-area: 1/2/3/3;
  }
  .footer__inner .footer__links {
    grid-area: 1/1/2/2;
  }
  .footer__inner .footer__copyright {
    grid-area: 2/1/3/2;
  }
}
.footer__sns {
  align-items: center;
  display: flex;
  gap: 7.4666666667vw;
  justify-content: center;
  margin-bottom: 4.8vw;
}
@media (750px <= width) {
  .footer__sns {
    gap: 56px;
    margin-bottom: 36px;
  }
}
@media (1120px <= width) {
  .footer__sns {
    gap: 28px;
    justify-content: flex-end;
    margin-bottom: 0;
  }
}
.footer__sns a {
  width: min(6.6666666667vw, 50px);
}
@media (1120px <= width) {
  .footer__sns a {
    width: 18px;
  }
}
.footer__sns a.-yt {
  width: min(9.0666666667vw, 68px);
}
@media (1120px <= width) {
  .footer__sns a.-yt {
    width: 20px;
  }
}
.footer__sns a:focus-visible {
  opacity: 0.8;
}
@media (any-hover: hover) {
  .footer__sns a:hover {
    opacity: 0.8;
  }
}
.footer__links {
  align-items: center;
  display: flex;
  gap: 2.6666666667vw;
  justify-content: center;
  margin-bottom: 8.5333333333vw;
}
@media (750px <= width) {
  .footer__links {
    gap: 10px;
    margin-bottom: 64px;
  }
}
@media (1120px <= width) {
  .footer__links {
    justify-content: flex-start;
    margin-bottom: 0;
  }
}
.footer__links a {
  color: var(--black);
  font-size: 2.6666666667vw;
}
@media (750px <= width) {
  .footer__links a {
    font-size: 20px;
  }
}
@media (1120px <= width) {
  .footer__links a {
    font-size: 12px;
  }
}
.footer__links a:focus-visible {
  text-decoration: underline;
}
@media (any-hover: hover) {
  .footer__links a:hover {
    text-decoration: underline;
  }
}
.footer__copyright {
  color: var(--black);
  font-size: 3.2vw;
  text-align: center;
}
@media (750px <= width) {
  .footer__copyright {
    font-size: 24px;
  }
}
@media (1120px <= width) {
  .footer__copyright {
    font-size: 10px;
    text-align: left;
  }
}

.pagetop {
  align-items: center;
  border: 1px solid var(--black);
  border-radius: 100vmax;
  display: flex;
  height: 37.5px;
  justify-content: center;
  position: absolute;
  right: 12.5px;
  top: -62.5px;
  transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  width: 37.5px;
}
@media (750px <= width) {
  .pagetop {
    height: 37.5px;
    right: 25px;
    top: -75px;
    width: 37.5px;
  }
}
.pagetop:focus-visible {
  opacity: 0.8;
}
@media (any-hover: hover) {
  .pagetop:hover {
    opacity: 0.8;
  }
}
.pagetop::after {
  -webkit-border-before: 1px solid var(--black);
          border-block-start: 1px solid var(--black);
  -webkit-border-end: 1px solid var(--black);
          border-inline-end: 1px solid var(--black);
  content: "";
  display: block;
  height: 8.3333333333px;
  rotate: -45deg;
  translate: 0 2.0833333333px;
  width: 8.3333333333px;
}
@media (750px <= width) {
  .pagetop::after {
    height: 8.3333333333px;
    translate: 0 2.0833333333px;
    width: 8.3333333333px;
  }
}

@-webkit-keyframes splide-loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes splide-loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  -webkit-animation: splide-loading 1s linear infinite;
          animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.js-slider .splide__track {
  margin-inline: auto;
  width: min(60vw, 352px);
}

.js-slider {
  overflow-x: clip;
}
.js-slider .splide__track {
  overflow: visible;
}

.js-slider .splide__slide {
  color: var(--black);
  opacity: 0.5;
  transition: opacity 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.js-slider .splide__slide.is-active {
  opacity: 1;
}
.js-slider .splide__slide:focus-visible {
  opacity: 0.8;
}
@media (any-hover: hover) {
  .js-slider .splide__slide:hover {
    opacity: 0.8;
  }
}

@media (width > 920px) {
  .js-slider .splide__list {
    display: flex !important;
    gap: 120px;
    justify-content: center;
  }
  .js-slider .splide__slide {
    opacity: 1;
  }
}

.js-slider .splide__pagination {
  bottom: -8vw;
  display: flex;
  gap: 0 2.6666666667vw;
  justify-content: center;
  position: absolute;
  width: 100%;
}
@media (750px <= width) {
  .js-slider .splide__pagination {
    bottom: -30px;
    gap: 0 10px;
  }
}
.js-slider .splide__pagination__page {
  border: 1px solid var(--primary);
  border-radius: 100vmax;
  height: 2.4vw;
  width: 2.4vw;
}
@media (750px <= width) {
  .js-slider .splide__pagination__page {
    height: 9px;
    width: 9px;
  }
}
.js-slider .splide__pagination__page.is-active {
  background-color: var(--primary);
}

.product.-attesa .splide__pagination__page {
  border-color: var(--attesa);
}
.product.-attesa .splide__pagination__page.is-active {
  background-color: var(--attesa);
}

.product.-xc .splide__pagination__page {
  border-color: var(--xc);
}
.product.-xc .splide__pagination__page.is-active {
  background-color: var(--xc);
}

.product.-collection .splide__pagination__page {
  border-color: var(--collection);
}
.product.-collection .splide__pagination__page.is-active {
  background-color: var(--collection);
}

/*
cp
*/
@media (750px <= width) {
  .cp {
    background-color: var(--primary);
  }
}
.cp__inner {
  background-color: var(--primary);
  padding-block: 10.6666666667vw 26.6666666667vw;
}
@media (750px <= width) {
  .cp__inner {
    margin-inline: auto;
    padding-block: 80px 120px;
    width: 750px;
  }
}
@media (1120px <= width) {
  .cp__inner {
    width: 1120px;
  }
}
.cp__inner {
  display: grid;
  row-gap: 8.5333333333vw;
}
@media (750px <= width) {
  .cp__inner {
    row-gap: 64px;
  }
}
@media (1120px <= width) {
  .cp__inner {
    grid-template-columns: 403px 598px;
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 119px;
    grid-row-gap: 60px;
  }
  .cp__inner .cp__a {
    grid-area: 1/1/2/2;
  }
  .cp__inner .cp__b {
    grid-area: 1/2/2/3;
  }
  .cp__inner .cp__wrap {
    grid-area: 2/1/3/3;
  }
  .cp__inner .cp-step {
    grid-area: 3/1/4/3;
  }
  .cp__inner .cp__btns {
    grid-area: 4/1/5/3;
  }
}
.cp__a, .cp__b, .cp__c {
  display: block;
  margin-inline: auto;
  position: relative;
  width: min(100vw, 750px);
}
@media (1120px <= width) {
  .cp__a, .cp__b, .cp__c {
    margin-inline: 0;
  }
}
.cp__b, .cp__c {
  padding-top: 6.2666666667vw;
}
@media (750px <= width) {
  .cp__b, .cp__c {
    padding-top: 47px;
  }
}
@media (1120px <= width) {
  .cp__b, .cp__c {
    padding-top: 0;
  }
}
.cp__b::before, .cp__c::before {
  background-image: url(../img/dot.svg);
  background-position: left;
  background-repeat: repeat-x;
  background-size: contain;
  content: "";
  height: 1.8666666667vw;
  left: 7.2vw;
  position: absolute;
  top: -0.9333333333vw;
  width: calc(100% - 14.6666666667vw);
}
@media (750px <= width) {
  .cp__b::before, .cp__c::before {
    height: 14px;
    left: 0;
    top: -7px;
    width: 750px;
  }
}
@media (1120px <= width) {
  .cp__a {
    left: 14px;
    width: 403px;
  }
}
.cp__b {
  padding-bottom: 10.6666666667vw;
  position: relative;
}
@media (750px <= width) {
  .cp__b {
    padding-bottom: 80px;
  }
}
@media (1120px <= width) {
  .cp__b {
    padding-bottom: 0;
    right: 14px;
    width: 598px;
  }
  .cp__b::before {
    background-repeat: repeat-y;
    height: 384px;
    left: -52px;
    top: 0;
    width: 14px;
  }
}
.cp__b::after {
  bottom: -1.3333333333vw;
  color: var(--white);
  content: "※賞品のカラーは、画像と同一となります。";
  display: block;
  font-size: 2.9333333333vw;
  left: 8vw;
  position: absolute;
}
@media (750px <= width) {
  .cp__b::after {
    bottom: -10px;
    font-size: 22px;
    left: 5px;
  }
}
@media (1120px <= width) {
  .cp__b::after {
    bottom: -40px;
    font-size: 12px;
    left: auto;
    right: -10px;
  }
}
@media (1120px <= width) {
  .cp__c {
    left: 14px;
    width: 538px;
  }
  .cp__c::before {
    left: -14px;
    top: -42px;
    width: 1120px;
  }
}
@media (1120px <= width) {
  .cp__wrap {
    align-items: center;
    display: flex;
    padding-top: 34px;
  }
}
.cp__btns {
  display: grid;
  gap: 4.2666666667vw;
  padding-top: 2.1333333333vw;
}
@media (750px <= width) {
  .cp__btns {
    gap: 24px;
    padding-top: 0;
  }
}
.cp__btn {
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 100vmax;
  color: var(--primary);
  display: grid;
  font-size: min(4vw, 18px);
  font-weight: 700;
  height: min(13.8666666667vw, 72px);
  letter-spacing: 0.05em;
  margin-inline: auto;
  place-content: center;
  position: relative;
  width: min(74.4vw, 633px);
}
.cp__btn::after {
  align-self: center;
  border-right: 2px solid var(--primary);
  border-top: 2px solid var(--primary);
  content: "";
  height: 0.6em;
  position: absolute;
  right: 1.5em;
  rotate: 45deg;
  width: 0.6em;
}
.cp__btn {
  cursor: pointer;
}
.cp__btn:focus-visible {
  overflow: hidden;
}
.cp__btn:focus-visible::before {
  background-color: var(--white);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -100px;
  transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  width: 100%;
}
.cp__btn:focus-visible:hover::before {
  -webkit-animation: hover 0.5s linear;
          animation: hover 0.5s linear;
}
@media (any-hover: hover) {
  .cp__btn:hover {
    overflow: hidden;
  }
  .cp__btn:hover::before {
    background-color: var(--white);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -100px;
    transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    width: 100%;
  }
  .cp__btn:hover:hover::before {
    -webkit-animation: hover 0.5s linear;
            animation: hover 0.5s linear;
  }
}
@-webkit-keyframes hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(45deg);
            transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: 0.6;
    -webkit-transform: scale(20) rotate(45deg);
            transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: scale(30) rotate(45deg);
            transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: 0.2;
    -webkit-transform: scale(45) rotate(45deg);
            transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
  }
}
@keyframes hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(45deg);
            transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: 0.6;
    -webkit-transform: scale(20) rotate(45deg);
            transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: scale(30) rotate(45deg);
            transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: 0.2;
    -webkit-transform: scale(45) rotate(45deg);
            transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
  }
}
.cp__btn2 {
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 100vmax;
  color: var(--primary);
  display: grid;
  font-size: min(4vw, 18px);
  font-weight: 700;
  height: min(13.8666666667vw, 72px);
  letter-spacing: 0.05em;
  margin-inline: auto;
  place-content: center;
  position: relative;
  width: min(74.4vw, 633px);
}
.cp__btn2::after {
  align-self: center;
  border-right: 2px solid var(--primary);
  border-top: 2px solid var(--primary);
  content: "";
  height: 0.6em;
  position: absolute;
  right: 1.5em;
  rotate: 45deg;
  width: 0.6em;
}
.cp__btn2 {
  cursor: pointer;
}
.cp__btn2:focus-visible {
  overflow: hidden;
}
.cp__btn2:focus-visible::before {
  background-color: var(--white);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -100px;
  transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  width: 100%;
}
.cp__btn2:focus-visible:hover::before {
  -webkit-animation: hover 0.5s linear;
          animation: hover 0.5s linear;
}
@media (any-hover: hover) {
  .cp__btn2:hover {
    overflow: hidden;
  }
  .cp__btn2:hover::before {
    background-color: var(--white);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -100px;
    transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    width: 100%;
  }
  .cp__btn2:hover:hover::before {
    -webkit-animation: hover 0.5s linear;
            animation: hover 0.5s linear;
  }
}
@keyframes hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(45deg);
            transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: 0.6;
    -webkit-transform: scale(20) rotate(45deg);
            transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: scale(30) rotate(45deg);
            transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: 0.2;
    -webkit-transform: scale(45) rotate(45deg);
            transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
  }
}
.cp__btn2 {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}
.cp__btn2::after {
  border-color: var(--white);
}

/*
cp-kv
*/
.cp-kv {
  position: relative;
}
.cp-kv__bg {
  position: relative;
}
.cp-kv__bg .-img01 {
  clip-path: inset(0 0 0 0);
  position: relative;
}
.cp-kv__bg .-img02,
.cp-kv__bg .-img03,
.cp-kv__bg .-img04 {
  clip-path: inset(0 0 0 0);
  inset: 0;
  position: absolute;
}
.cp-kv__title {
  clip-path: inset(0 0 0 0);
  position: absolute;
  top: 0.2666666667vw;
}

/*
cp-step
*/
.cp-step {
  background-color: var(--white);
  border-radius: 2.6666666667vw;
  margin-inline: auto;
  padding-block: 7.4666666667vw;
  width: 85.3333333333vw;
}
@media (750px <= width) {
  .cp-step {
    border-radius: 10px;
    padding-block: 56px;
    width: 750px;
  }
}
@media (1120px <= width) {
  .cp-step {
    padding: 50px 55px;
    width: 1120px;
  }
}
.cp-step {
  display: grid;
  row-gap: 8.5333333333vw;
}
@media (750px <= width) {
  .cp-step {
    row-gap: 64px;
  }
}
@media (1120px <= width) {
  .cp-step {
    grid-template-columns: repeat(3, 274px);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 94px;
    grid-row-gap: 24px;
  }
  .cp-step .-step1 {
    grid-area: 1/1/2/2;
  }
  .cp-step .-step2 {
    grid-area: 1/2/2/3;
  }
  .cp-step .-step3 {
    grid-area: 1/3/2/4;
  }
  .cp-step .cp-step__list {
    grid-area: 2/1/3/4;
  }
}
.cp-step__item.-step2, .cp-step__item.-step3 {
  padding-top: 8.5333333333vw;
  position: relative;
}
@media (750px <= width) {
  .cp-step__item.-step2, .cp-step__item.-step3 {
    padding-top: 64px;
  }
}
@media (1120px <= width) {
  .cp-step__item.-step2, .cp-step__item.-step3 {
    padding-top: 0;
  }
}
.cp-step__item.-step2::before, .cp-step__item.-step3::before {
  background: url(../img/next_sm.png) center no-repeat;
  background-size: cover;
  content: "";
  height: 5.3333333333vw;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media (750px <= width) {
  .cp-step__item.-step2::before, .cp-step__item.-step3::before {
    background-size: contain;
    height: 40px;
  }
}
@media (1120px <= width) {
  .cp-step__item.-step2::before, .cp-step__item.-step3::before {
    background: url(../img/next.png) center no-repeat;
    background-size: cover;
    height: 165px;
    left: -64px;
    width: 12px;
  }
}
.cp-step__item dt {
  align-items: center;
  display: flex;
  font-size: 3.7333333333vw;
  gap: 0.6em;
  margin-bottom: 4.2666666667vw;
}
@media (750px <= width) {
  .cp-step__item dt {
    font-size: 28px;
    margin-bottom: 32px;
  }
}
@media (1120px <= width) {
  .cp-step__item dt {
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
    font-size: 14px;
    margin-bottom: 16px;
  }
}
.cp-step__item dt img {
  height: 9.0666666667vw;
}
@media (750px <= width) {
  .cp-step__item dt img {
    height: 68px;
  }
}
@media (1120px <= width) {
  .cp-step__item dt img {
    height: 33px;
  }
}
.cp-step__item dd img {
  margin-inline: auto;
  width: 64vw;
}
@media (750px <= width) {
  .cp-step__item dd img {
    width: 480px;
  }
}
@media (1120px <= width) {
  .cp-step__item dd img {
    margin-right: 0;
    width: 235px;
  }
}
.cp-step__list {
  padding-inline: 1em;
}
@media (750px <= width) {
  .cp-step__list {
    padding-inline: 2em;
  }
}
@media (1120px <= width) {
  .cp-step__list {
    padding-inline: 0;
  }
}
.cp-step__list li {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: 3.2vw;
  list-style-position: outside;
  list-style-type: decimal;
  margin-block: var(--leading-trim);
  margin-bottom: 5.3333333333vw;
  margin-left: 1em;
}
@media (750px <= width) {
  .cp-step__list li {
    font-size: 24px;
    margin-bottom: 40px;
  }
}
@media (1120px <= width) {
  .cp-step__list li {
    font-size: 12px;
    margin-bottom: 0.75lh;
  }
}
.cp-step__list li:last-child {
  margin-bottom: 0;
}

/*
about
*/
.about {
  padding-block: 26.6666666667vw;
  position: relative;
}
@media (750px <= width) {
  .about {
    padding-block: 120px;
  }
}
@media (1120px <= width) {
  .about {
    margin-bottom: -12px;
    margin-inline: auto;
    padding-bottom: 0;
    width: 1098px;
  }
}
.about__catch {
  clip-path: inset(0 0 0 0);
  display: block;
  width: min(100%, 750px);
}
@media (1120px <= width) {
  .about__catch {
    width: 836px;
  }
}
.about__text {
  font-size: 3.7333333333vw;
  letter-spacing: 0.05em;
  line-height: 2;
  padding-left: 10.6666666667vw;
  padding-top: 6.9333333333vw;
}
@media (750px <= width) {
  .about__text {
    font-size: 28px;
    padding-left: 80px;
    padding-top: 40px;
  }
}
@media (1120px <= width) {
  .about__text {
    font-size: 22px;
    margin-inline: auto;
    padding-left: 297px;
    padding-top: 30px;
    width: 1098px;
  }
}
.about__img {
  clip-path: inset(0 0 0 0);
  display: block;
  margin-inline: auto;
  margin-top: -11.2vw;
  width: min(100%, 750px);
}
@media (750px <= width) {
  .about__img {
    margin-top: -84px;
  }
}
@media (1120px <= width) {
  .about__img {
    margin-top: -254px;
    width: 1098px;
  }
}

/*
nav-sm
*/
.nav-sm {
  bottom: -85.3333333333vw;
  position: fixed;
  transition: bottom 0.4s ease-out;
  z-index: 1;
}
.nav-sm.is-show {
  bottom: -30.6666666667vw;
}
.nav-sm.is-stop {
  bottom: 0;
}
.nav-sm__inner {
  display: flex;
  margin-inline: auto;
  width: 100%;
}
@media (1120px <= width) {
  .nav-sm {
    display: none;
  }
}

/*
nav-lg
*/
.nav-lg {
  display: none;
}
@media (1120px <= width) {
  .nav-lg {
    background: url(../img/nav_bg.svg) center no-repeat;
    background-size: cover;
    clip-path: inset(0 0 0 0);
    display: block;
    height: 468px;
    margin-bottom: 55px;
    margin-inline: auto;
    max-width: 1920px;
    width: 100%;
  }
}
.nav-lg__inner {
  display: flex;
  margin-inline: auto;
  width: 1098px;
}
.nav-lg__link {
  height: 180px;
  transition: translate 0.2s cubic-bezier(0.19, 1, 0.22, 1);
  width: 366px;
}
.nav-lg__link:focus-visible {
  translate: 0 4px;
}
@media (any-hover: hover) {
  .nav-lg__link:hover {
    translate: 0 4px;
  }
}
.nav-lg__link.-attesa {
  margin-top: 132px;
}
.nav-lg__link.-xc {
  margin-top: 65px;
}
.nav-lg__link.-collection {
  margin-top: 2px;
}

/*
product
*/
.product {
  margin-bottom: 3.2vw;
  padding-block: 26.6666666667vw;
}
@media (750px <= width) {
  .product {
    margin-bottom: 21px;
    padding-block: 120px;
  }
}
.product.-attesa {
  background-color: #eff7ff;
}
.product.-xc {
  background-color: #fff4ff;
}
.product.-collection {
  background-color: #fff6e6;
}
.product__wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8vw;
  margin-bottom: 9.0666666667vw;
}
@media (750px <= width) {
  .product__wrap {
    gap: 60px;
    margin-bottom: 62px;
  }
}
@media (1120px <= width) {
  .product__wrap {
    align-items: start;
    flex-direction: row;
    justify-content: center;
  }
}
.product__logo {
  border-bottom: 2px solid var(--black);
  border-top: 2px solid var(--black);
  position: relative;
}
.product__logo.-attesa {
  padding-block: 3.7333333333vw;
  width: min(50.9333333333vw, 267px);
}
@media (750px <= width) {
  .product__logo.-attesa {
    padding-block: 19px;
  }
}
.product__logo.-xc {
  padding-block: 2.9333333333vw;
  padding-inline: 4.5333333333vw;
  width: min(19.2vw, 100px);
}
@media (750px <= width) {
  .product__logo.-xc {
    padding-block: 19px;
    padding-inline: 24px;
  }
}
.product__logo.-collection {
  padding-block: 3.2vw;
  width: min(52.5333333333vw, 275px);
}
@media (750px <= width) {
  .product__logo.-collection {
    padding-block: 16px;
  }
}
.product__text {
  font-size: 4.2666666667vw;
  text-align: center;
}
@media (750px <= width) {
  .product__text {
    font-size: 32px;
  }
}
@media (1120px <= width) {
  .product__text {
    font-size: 20px;
    line-height: 2;
    text-align: left;
  }
}
.product__imgs {
  color: var(--black);
  display: block;
  margin-bottom: 8.5333333333vw;
}
@media (750px <= width) {
  .product__imgs {
    margin-bottom: 40px;
    margin-inline: auto;
    width: 750px;
  }
}
@media (1120px <= width) {
  .product__imgs {
    align-items: center;
    display: flex;
    width: 956px;
  }
  .product__imgs.-r {
    flex-direction: row-reverse;
  }
  .product__imgs.-r figcaption {
    text-align: left;
  }
}
.product__img {
  display: block;
  transition: 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.product__img:focus-visible {
  opacity: 0.8 !important;
}
@media (any-hover: hover) {
  .product__img:hover {
    opacity: 0.8 !important;
  }
}
.product__img.-l {
  width: min(88vw, 536px);
}
.product__img.-s {
  margin-left: auto;
  margin-right: 0;
  width: min(68.8vw, 420px);
}
@media (1120px <= width) {
  .product__img.-s {
    margin-top: 40px;
  }
}
.product figcaption {
  display: block;
  font-size: 3.2vw;
  letter-spacing: 0.07em;
  line-height: 2.5;
  margin-left: auto;
  margin-right: 0;
  width: min(68.8vw, 420px);
}
@media (750px <= width) {
  .product figcaption {
    font-size: 24px;
  }
}
@media (1120px <= width) {
  .product figcaption {
    font-size: 14px;
    text-align: right;
  }
}
.product__model {
  display: block;
  padding-block: 5.3333333333vw 6.4vw;
  width: min(60vw, 315px);
}
@media (750px <= width) {
  .product__model {
    margin-inline: auto;
    padding-block: 56px 24px;
  }
}
.product__btn {
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 100vmax;
  color: var(--primary);
  display: grid;
  font-size: min(4vw, 18px);
  font-weight: 700;
  height: min(13.8666666667vw, 72px);
  letter-spacing: 0.05em;
  margin-inline: auto;
  place-content: center;
  position: relative;
  width: min(74.4vw, 633px);
}
.product__btn::after {
  align-self: center;
  border-right: 2px solid var(--primary);
  border-top: 2px solid var(--primary);
  content: "";
  height: 0.6em;
  position: absolute;
  right: 1.5em;
  rotate: 45deg;
  width: 0.6em;
}
.product__btn {
  cursor: pointer;
}
.product__btn:focus-visible {
  overflow: hidden;
}
.product__btn:focus-visible::before {
  background-color: var(--white);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -100px;
  transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  width: 100%;
}
.product__btn:focus-visible:hover::before {
  -webkit-animation: hover 0.5s linear;
          animation: hover 0.5s linear;
}
@media (any-hover: hover) {
  .product__btn:hover {
    overflow: hidden;
  }
  .product__btn:hover::before {
    background-color: var(--white);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -100px;
    transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    width: 100%;
  }
  .product__btn:hover:hover::before {
    -webkit-animation: hover 0.5s linear;
            animation: hover 0.5s linear;
  }
}
@keyframes hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(45deg);
            transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: 0.6;
    -webkit-transform: scale(20) rotate(45deg);
            transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: scale(30) rotate(45deg);
            transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: 0.2;
    -webkit-transform: scale(45) rotate(45deg);
            transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
  }
}
.product__btn {
  background-color: transparent;
}
@media (750px <= width) {
  .product__btn {
    width: 392px;
  }
}
.product.-attesa .product__btn {
  border-color: var(--attesa);
  color: var(--attesa);
}
.product.-attesa .product__btn::after {
  border-color: var(--attesa);
}
.product.-xc .product__btn {
  border-color: var(--xc);
  color: var(--xc);
}
.product.-xc .product__btn::after {
  border-color: var(--xc);
}
.product.-collection .product__btn {
  border-color: var(--collection);
  color: var(--collection);
}
.product.-collection .product__btn::after {
  border-color: var(--collection);
}
.product.-xc .product-slide__btn {
  background-color: var(--xc);
}
.product.-collection .product-slide__btn {
  background-color: var(--collection);
}

/*
product-slide
*/
.product-slide {
  margin-bottom: 17.0666666667vw;
  text-align: center;
}
@media (750px <= width) {
  .product-slide {
    margin-bottom: 64px;
  }
}
.product-slide img {
  height: min(67.2vw, 352px);
  margin-bottom: 5.3333333333vw;
  margin-inline: auto;
  translate: 0.5em;
}
@media (750px <= width) {
  .product-slide img {
    margin-bottom: 20px;
  }
}
.product-slide__model {
  font-size: 3.7333333333vw;
}
@media (750px <= width) {
  .product-slide__model {
    font-size: 20px;
  }
}
.product-slide__price {
  font-size: 4.2666666667vw;
}
@media (750px <= width) {
  .product-slide__price {
    font-size: 22px;
  }
}
.product-slide__notax {
  font-size: 2.6666666667vw;
  margin-bottom: 7.4666666667vw;
}
@media (750px <= width) {
  .product-slide__notax {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.product-slide__btn {
  background-color: var(--attesa);
  border-radius: 100vmax;
  color: var(--white);
  display: grid;
  font-size: min(3.2vw, 16px);
  font-weight: 700;
  height: min(10.6666666667vw, 56px);
  letter-spacing: 0.05em;
  margin-inline: auto;
  place-content: center;
  position: relative;
  width: min(37.3333333333vw, 196px);
}
.product-slide__btn::after {
  align-self: center;
  border-right: 2px solid var(--white);
  border-top: 2px solid var(--white);
  content: "";
  height: 0.6em;
  position: absolute;
  right: 1.5em;
  rotate: 45deg;
  width: 0.6em;
}
.product-slide__btn {
  cursor: pointer;
}
.product-slide__btn:focus-visible {
  overflow: hidden;
}
.product-slide__btn:focus-visible::before {
  background-color: var(--white);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -100px;
  transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  width: 100%;
}
.product-slide__btn:focus-visible:hover::before {
  -webkit-animation: hover 0.5s linear;
          animation: hover 0.5s linear;
}
@media (any-hover: hover) {
  .product-slide__btn:hover {
    overflow: hidden;
  }
  .product-slide__btn:hover::before {
    background-color: var(--white);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -100px;
    transition: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    width: 100%;
  }
  .product-slide__btn:hover:hover::before {
    -webkit-animation: hover 0.5s linear;
            animation: hover 0.5s linear;
  }
}
@keyframes hover {
  0% {
    opacity: 0;
    -webkit-transform: scale(2) rotate(45deg);
            transform: scale(2) rotate(45deg);
  }
  20% {
    opacity: 0.6;
    -webkit-transform: scale(20) rotate(45deg);
            transform: scale(20) rotate(45deg);
  }
  40% {
    opacity: 0.4;
    -webkit-transform: scale(30) rotate(45deg);
            transform: scale(30) rotate(45deg);
  }
  80% {
    opacity: 0.2;
    -webkit-transform: scale(45) rotate(45deg);
            transform: scale(45) rotate(45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
  }
}