@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

.header[data-header-theme="light"].c-active,

.header[data-header-theme="dark"] {

  background: transparent;

}

.main-area {

  display: block;

  padding-top: 0;

}

.main-area.lp {

  margin-bottom: 0px;

}

#main-container {

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 450;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

}



@media (min-width: 1401px) {

  #main-container {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}



@media (min-width: 768px) and (max-width: 1400px) {

  #main-container {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}



@media (max-width: 767px) {

  #main-container {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#main-container img {

  display: block;

  width: 100%;

  height: auto;

}



#main-container h2,

#main-container h3,

#main-container p,

#main-container li {

  margin-block: calc((1em - 1lh) / 2);

}



#main-container .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* --- 抽出されたCSS（上から順） --- */



#main-container {

  position: relative;

  display: flex;

  min-width: 100%;

  --red: #b5001f;

  --navy: #171c61;

  --white: #ffffff;

  --shadow-color: #999999;

  --font-medium: 500;

  --font-eng: "neue-haas-grotesk-display", sans-serif;

  --font-jpn: dnp-shuei-gothic-kin-std, sans-serif;

  font-feature-settings: "palt";

  overflow-x: clip;

}



#main-container .lp-mv-img-01,

#main-container .sec2-img-01,

#main-container .sec3-img-04,

#main-container .sec3-img-05,

#main-container .sec3-img-06,

#main-container .sec3-img-08,

#main-container .sec3-img-10 {

  background: #ffffff;

}



#main-container [class*="__inner--vertical"] {

  display: flex;

  flex-direction: column;

  align-items: end;

  gap: calc(14 * var(--formula));

}



#main-container .left-area {

  flex: 1;

  position: sticky;

  top: 0;

  height: 100vh;

  background-image: url(../img/lp-bg-01.jpg);

  background-size: contain;

}

#main-container .main-area {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  background-image: url(../img/lp-bg-01.jpg);

  background-size: contain;

}



#main-container .lp-pc-txt-01 {

  width: calc(441 * var(--formula_pc));

  position: absolute;

  top: calc(180 * var(--formula_pc));

  left: calc(41 * var(--formula_pc));

}



#main-container .lp-pc-txt-02 {

  width: calc(449 * var(--formula_pc));

  bottom: calc(44 * var(--formula_pc));

  position: absolute;

  left: calc(40 * var(--formula_pc));

}



#main-container .mv-sec {

  width: 100%;

  height: 100vh;

  display: flex;

  justify-content: end;

}



#main-container .sec-set {

  width: calc(450 * var(--formula_pc));

  display: flex;

  flex-direction: column;

  align-items: center;

}



#main-container .lp-mv-img-01 {

  width: 100%;

  height: 100%;

}

#main-container .lp-mv-img-01 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

#main-container .lp-mv-txt-01 {

  display: none;

}



#main-container .sec1 {

  margin: calc(103 * var(--formula)) 0 calc(158 * var(--formula)) 0;

}



#main-container .sec1-txt-01 {

  width: calc(289 * 2 * var(--formula));

}



#main-container .sec1-img-01 {

  width: calc(428 * var(--formula));

  margin: calc(56 * var(--formula)) 0 calc(50 * var(--formula)) 0;

}



#main-container .sec1__txt {

  font-family: var(--font-jpn);

  color: var(--navy);

  font-size: calc(26 * var(--formula));

  line-height: calc(24 / 13);

  letter-spacing: 0.04em;

  text-align: center;

  font-weight: var(--font-medium);

  font-feature-settings: "pwid" 1;

  padding: 0 0 calc(73 * var(--formula)) calc(29 * var(--formula));

}



#main-container .box-shadow {

  position: relative;

  background: var(--white);

  border-radius: calc(9.654 * 2 * var(--formula));

  z-index: auto;

  width: calc(660 * var(--formula));

  z-index: 1;

  transform-style: preserve-3d;

  backface-visibility: hidden;

}



#main-container .box-shadow::after {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  border-radius: calc(9.654 * 2 * var(--formula));

  background: var(--shadow-color);

  filter: blur(calc(8 * var(--formula)));

  mix-blend-mode: multiply;

  opacity: 0.29;

  pointer-events: none;

  transform: translateZ(-1px);

}

@supports (-moz-appearance: none) {

  #main-container .box-shadow::after {

    mix-blend-mode: normal;

    opacity: 0.4;

  }

}



#main-container .js-accordion-trigger {

  display: flex;

  justify-content: center;

  width: 100%;

  padding: calc(37 * var(--formula)) 0 calc(32 * var(--formula));

  background: none;

  border: none;

  cursor: pointer;

  font-family: inherit;

  position: relative;

}



#main-container .trigger-label {

  font-family: var(--font-eng);

  font-size: calc(29 * var(--formula));

  line-height: 1;

  letter-spacing: 0em;

  text-align: center;

  font-weight: var(--font-medium);

  font-feature-settings:

    "calt" 1,

    "liga" 1;

  font-kerning: normal;

  text-decoration-line: underline;

  text-decoration-style: solid;

  text-decoration-thickness: calc(2 * var(--formula));

  color: var(--red);

  text-transform: uppercase;

}



#main-container .icon {

  position: absolute;

  width: calc(40 * var(--formula));

  height: calc(40 * var(--formula));

  top: calc(27 * var(--formula));

  right: calc(33 * var(--formula));

}



#main-container .icon::before,

#main-container .icon::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: calc(2 * var(--formula));

  background-color: var(--red);

  transform: translate(-50%, -50%);

  transition: transform 0.3s ease;

}



#main-container .icon::after {

  transform: translate(-50%, -50%) rotate(90deg);

}



#main-container .js-accordion-trigger[aria-expanded="true"] .icon::after {

  transform: translate(-50%, -50%) rotate(0deg);

}

#main-container .js-accordion-content {

  text-align: justify;

  overflow: hidden;

  max-height: 0;

  transition: max-height 0.3s ease-out;

}

#main-container .js-accordion-content p {

  padding: calc(117 * var(--formula)) calc(68 * var(--formula))

    calc(52 * var(--formula));

  font-family: var(--font-jpn);

  color: var(--navy);

  font-size: calc(24 * var(--formula));

  line-height: calc(23 / 12);

  letter-spacing: 0.05em;

  text-align: justify;

  font-weight: var(--font-medium);

  font-feature-settings: "palt" 1;

}



#main-container .sec2-txt-01 {

  width: calc(660 * var(--formula));

}



#main-container .sec2-txt-02 {

  width: calc(510 * var(--formula));

}



#main-container .sec2__schedule-inner {

  margin: calc(96 * var(--formula)) 0 calc(158 * var(--formula))

    calc(-7 * var(--formula));

  display: flex;

  flex-direction: column;

  align-items: center;

}

#main-container .sec2__schedule-inner li:nth-last-child(2) {

  margin: calc(19 * var(--formula)) 0 calc(14 * var(--formula)) 0;

}

#main-container .sec2-txt-03 {

  width: calc(511 * var(--formula));

}



#main-container .sec2-txt-04 {

  width: calc(511 * var(--formula));

}



#main-container .sec2__inner--absolute {

  position: relative;

}



#main-container .sec2-img-01 {

  width: calc(750 * var(--formula));

  z-index: 1;

  position: relative;

}



#main-container .sec2__link-cont {

  z-index: 5;

  position: absolute;

  bottom: calc(43 * var(--formula));

  left: calc(45 * var(--formula));

}

#main-container .sec2__link-cont a {

  display: block;

  position: relative;

}

#main-container .sec2-txt-05 {

  width: calc(228 * var(--formula));

}



#main-container .sec2-txt-06 {

  width: calc(26 * var(--formula));

  position: absolute;

  right: calc(3 * var(--formula));

  top: calc(-3 * var(--formula));

}



#main-container .sec3 {

  margin: calc(164 * var(--formula)) 0 calc(355 * var(--formula)) 0;

}



#main-container .sec3-txt-01 {

  width: calc(660 * var(--formula));

}

#main-container .sec3__flavor {

  display: flex;

  flex-direction: column;

  margin: calc(86 * var(--formula)) 0 calc(196 * var(--formula))

    calc(15 * var(--formula));

  gap: calc(20 * var(--formula));

}

#main-container .sec3-flavor-01 {

  width: calc(534 * var(--formula));

}

#main-container .sec3-flavor-02 {

  width: calc(548 * var(--formula));

}

#main-container .sec3-flavor-03 {

  width: calc(676 * var(--formula));

  margin: calc(-30 * var(--formula)) 0 0 0;

}

#main-container .sec3-img-01 {

  width: calc(676 * var(--formula));

  margin: calc(87 * var(--formula)) 0 calc(196 * var(--formula))

    calc(15 * var(--formula));

}



#main-container .sec3-img-02 {

  width: calc(632 * var(--formula));

}



#main-container .sec3-img-03 {

  width: calc(410 * var(--formula));

  margin: calc(197 * var(--formula)) 0 calc(228 * var(--formula)) 0;

}



#main-container .sec3__inner--vertical1 {

  display: flex;

  flex-direction: column;

  align-items: end;

  gap: calc(13 * var(--formula));

}



#main-container .sec3-img-04 {

  width: calc(750 * var(--formula));

}



#main-container .link-txt {

  font-family: var(--font-jpn);

  color: var(--navy);

  font-size: calc(20 * var(--formula));

  line-height: calc(24 / 13);

  letter-spacing: -0.016em;

  text-align: center;

  font-weight: var(--font-medium);

  font-feature-settings: "pwid" 1;

  margin: 0 calc(36 * var(--formula)) 0 0;

  text-decoration-color: var(--navy);

  text-decoration-style: solid;

  text-decoration-thickness: calc(2 * var(--formula));

  text-decoration-line: underline;

  text-underline-offset: calc(2 * var(--formula));

  text-decoration-skip-ink: none;

}



#main-container .sec3__inner--vertical2 {

  margin: calc(223 * var(--formula)) 0 0 0;

  align-self: end;

  gap: calc(13 * var(--formula));

}



#main-container .sec3-img-05 {

  width: calc(600 * var(--formula));

}



#main-container .sec3__inner--vertical3 {

  margin: calc(303 * var(--formula)) 0 0 0;

  gap: calc(15 * var(--formula));

}



#main-container .sec3__credit3 {

  margin: 0;

}



#main-container .sec3__inner--vertical4 {

  gap: calc(13 * var(--formula));

}



#main-container .sec3-img-06 {

  width: calc(660 * var(--formula));

}



#main-container .sec3-img-07 {

  width: calc(460 * var(--formula));

  margin: calc(277 * var(--formula)) 0 calc(295 * var(--formula)) 0;

}

#main-container .sec4-txt-05 {

  width: calc(660 * var(--formula));

}



#main-container .sec3-img-08 {

  width: calc(750 * var(--formula));

}

#main-container .sec3__link-cont4 {

  display: flex;

  flex-direction: column;

  align-items: start;

  gap: calc(5 * var(--formula));

}

#main-container .sec3__credit5 {

  margin: 0;

}



#main-container .sec3-img-09 {

  width: calc(480 * var(--formula));

  margin: calc(233 * var(--formula)) 0 calc(257 * var(--formula))

    calc(45 * var(--formula));

  align-self: start;

}



#main-container .sec3-img-10 {

  width: calc(660 * var(--formula));

}



#main-container .sec4 {

  padding: calc(77 * var(--formula)) 0 calc(126 * var(--formula)) 0;

  background: #ebeae4;

}



#main-container #goods-slide {

  width: calc(450 * var(--formula_pc));

  margin: calc(76 * var(--formula)) 0 calc(159 * var(--formula)) 0;

}



#main-container .splide__slide {

  width: calc(447.5 * var(--formula));

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(23 * var(--formula));

}

#main-container .splide__slide img {

  mask-image: url(../img/sec4-img-02.png);

  mask-size: cover;

}

#main-container .splide__slide .link-txt {

  margin: 0;

  letter-spacing: 0;

}

#main-container .sec4__link-cont {

  width: calc(195 * 2 * var(--formula));

  position: relative;

}



#main-container .sec4-txt-01 {

  width: calc(195 * 2 * var(--formula));

}



#main-container .sec4-txt-02 {

  width: calc(17 * 2 * var(--formula));

  position: absolute;

  top: calc(-2 * var(--formula));

  right: calc(5 * var(--formula));

}



#main-container .sec4-txt-03 {

  width: calc(217 * 2 * var(--formula));

  margin: calc(41 * var(--formula)) 0 calc(69 * var(--formula)) 0;

}



#main-container .sec4-txt-04 {

  width: calc(120 * var(--formula));

}

@media (max-width: 767px) {

  #main-container .left-area {

    display: none;

  }

  #main-container .main-area {

    width: 100%;

  }

  #main-container .sec-set {

    width: 100%;

  }

  #main-container .mv-sec {

    height: auto;

    margin: calc(290 * var(--formula)) 0 0 0;

  }

  #main-container .lp-mv-img-01 {

    width: calc(630 * var(--formula));

    height: auto;

  }

  #main-container .lp-mv-img-01 img {

    height: auto;

  }

  #main-container .lp-mv-txt-01 {

    width: calc(224 * 2 * var(--formula));

    position: absolute;

    top: calc(60 * var(--formula));

    z-index: 5;

    left: calc(34 * var(--formula));

    display: block;

  }

  #main-container #goods-slide {

    width: 100%;

  }

}

/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/

#main-container .fade-in {

  opacity: 0;

  transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1);

}

#main-container .is-visible .fade-in,

#main-container .is-visible.fade-in {

  opacity: 1;

}

#main-container .delay1 {

  transition-delay: 0.3s;

}

#main-container .delay2 {

  transition-delay: 0.6s;

}

#main-container [class*="__link-cont"] a {

  display: block;

  position: relative;

}

#main-container [class*="__link-cont"] .sec4-txt-02,

#main-container [class*="__link-cont"] .sec2-txt-06 {

  border-radius: 50%;

  background-color: transparent;

  transition: background-color 0.8s ease;

}



#main-container [class*="__link-cont"] .sec4-txt-02 img,

#main-container [class*="__link-cont"] .sec2-txt-06 img {

  transition: filter 0.8s ease;

  display: block;

}



@media (hover: hover) {

  #main-container [class*="__link-cont"] a:hover .sec4-txt-02 {

    background-color: var(--navy);

  }



  #main-container [class*="__link-cont"] a:hover .sec2-txt-06 {

    background-color: var(--white);

  }



  #main-container [class*="__link-cont"] a:hover .sec4-txt-02 img,

  #main-container [class*="__link-cont"] a:hover .sec2-txt-06 img {

    filter: invert(1);

  }

}



#main-container [class*="__link-cont"] a:active .sec4-txt-02 {

  background-color: var(--navy);

  transition: all 0.3s;

}



#main-container [class*="__link-cont"] a:active .sec2-txt-06 {

  background-color: var(--white);

  transition: all 0.3s;

}



#main-container [class*="__link-cont"] a:active .sec4-txt-02 img,

#main-container [class*="__link-cont"] a:active .sec2-txt-06 img {

  filter: invert(1);

  transition: all 0.3s;

}