@charset "UTF-8";

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

#Contents .main-area {

  overflow-x: visible;

}

#footer_emmi {

  margin-top: 0;

  padding-top: 0;

}

#em260401PUMA {

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 490;

  --sp-artboard-width: 750;

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

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

}

.main-area::after {

  content: "";

  height: 0px !important;

}

@media (min-width: 1401px) {

  #em260401PUMA {

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

    --variable: 1px;

  }

}



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

  #em260401PUMA {

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

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

  }

}



@media (max-width: 767px) {

  #em260401PUMA {

    --ratio: 1;

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

  }

}



#em260401PUMA img {

  display: block;

  width: 100%;

  height: auto;

}



#em260401PUMA h2,

#em260401PUMA h3,

#em260401PUMA p,

#em260401PUMA li:not(.splide) {

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

}



#em260401PUMA .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

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

  border: 0;

}



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



#em260401PUMA {

  position: relative;

  min-width: 100%;

  font-feature-settings: "palt";

  display: flex;

  --yu-gochic:

    "游ゴシック体", "游ゴシック Medium", Yu Gothic Medium, Yu Gothic, YuGothic,

    "yu-gothic-pr6n", Hiragino Kaku Gothic ProN, Meiryo, sans-serif;

  --font-credit: pragmatica, sans-serif;

  --font-light: 300;

  --font-regular: 400;

  --black: #000000;

  --beige: #f0eeea;

  --pale-brown: #e0d9d9;

  --brown: #422828;

  background: var(--beige);

  overflow-x: clip;

}



#em260401PUMA [class*="__txt"] {

  font-family: var(--yu-gochic);

  color: var(--black);

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

  line-height: 2;

  letter-spacing: 0.05em;

  text-align: center;

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

}

#em260401PUMA [class*="__credit"] {

  display: flex;

  flex-direction: column;

  align-items: start;

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

}



#em260401PUMA [class*="__credit"] li {

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

  color: var(--black);

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

  line-height: 1.909;

  letter-spacing: 0.05em;

  text-align: left;

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

  display: flex;

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

}

#em260401PUMA [class*="-img-"] {

  background: #ffffff;

}

#em260401PUMA [class*="__txt-cont"] {

  position: relative; /* 枠線の基準にするために追記 */

  display: flex;

  flex-direction: column;

  align-items: center;

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

  background: var(--pale-brown);

  border-radius: calc(6 * var(--formula));

}

#em260401PUMA [class*="sec6-txt-"]:not(.sec6-txt-02) {

  border-color: var(--brown);

  border-style: solid;

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

  background: var(--beige);

  z-index: 5;

  box-sizing: content-box;

  border-radius: calc(1000 * var(--formula));

}

#em260401PUMA [class*="__txt-cont"]::before {

  content: "";

  position: absolute;

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

  border-width: max(1px, calc(2 * var(--formula)));

  border-style: solid;

  border-color: var(--brown);

  border-radius: 0;

  pointer-events: none;

}



#em260401PUMA .lp-mv-area {

  flex: 1;

  position: sticky;

  top: 0;

  height: 100vh;

}



#em260401PUMA .lp-mv-img-01 {

  width: 100%;

  height: 100%;

  z-index: 1;

  position: relative;

}

#em260401PUMA .lp-mv-img-01 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

}



#em260401PUMA .lp-mv-txt-01 {

  position: absolute;

  width: calc(695 * (100vw / 1400));

  z-index: 5;

  top: 0;

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

  pointer-events: none;

}



#em260401PUMA .lp-main-area {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow-x: clip;

}



#em260401PUMA .sec-set {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

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

}



#em260401PUMA .teaser-sec {

  margin: calc(100 * var(--formula)) 0 calc(120 * var(--formula)) 0;

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

}



#em260401PUMA .common-btn-01 {

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

}



#em260401PUMA .sec1 {

  background: var(--pale-brown);

  padding: calc(65 * var(--formula)) 0 calc(140 * var(--formula)) 0;

}



#em260401PUMA .sec1-img-01 {

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

  align-self: end;

}



#em260401PUMA .sec1__inner-cont {

  align-self: start;

  margin: calc(20 * var(--formula)) 0 0 calc(25 * var(--formula));

}



#em260401PUMA #sec1-slider {

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

}



#em260401PUMA #sec1-slider .splide__slide {

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

}



#em260401PUMA #sec1-slider .splide__pagination {

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

  left: unset;

  right: 0;

  padding: 0;

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

}

#em260401PUMA #sec1-slider .splide__pagination__page {

  opacity: 1;

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

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

  background: rgba(66, 40, 40, 0.3);

  border-radius: 0;

  margin: 0;

}



#em260401PUMA #sec1-slider .splide__pagination__page.is-active {

  transform: scale(1);

}



#em260401PUMA #sec1-slider .splide__pagination__page::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 0;

  background-color: var(--brown);

}



#em260401PUMA #sec1-slider .splide__pagination__page.is-active::before {

  animation: splide-loading-bar 3s linear;

  width: 100%;

}



@keyframes splide-loading-bar {

  from {

    width: 0%;

  }

  to {

    width: 100%;

  }

}



#em260401PUMA .sec1__credit {

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

}



#em260401PUMA .sec2 {

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

}



#em260401PUMA .sec2-img-01 {

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

}



#em260401PUMA .sec2__sticky-cont {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0 0 0 0;

  position: sticky;

  position: -webkit-sticky;

  z-index: 0;

  top: calc(50vh - (1103 * var(--formula)));

}



#em260401PUMA .sec2-img-02 {

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

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

}



#em260401PUMA .sec2-img-03 {

  position: relative; /* 枠線を配置する基準にします */

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

  z-index: 5;

  margin-top: calc(110 * var(--formula));

  margin-bottom: calc(181 * var(--formula));

}

#em260401PUMA .sec2-img-03::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  border-width: calc(8 * var(--formula));

  border-style: solid;

  border-color: #e0d9d9;

  box-sizing: border-box;

  pointer-events: none;

  z-index: 1;

}



#em260401PUMA .sec2__credit {

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

}



#em260401PUMA .sec3 {

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

}



#em260401PUMA .sec3-img-01 {

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

}



#em260401PUMA .sec3__inner-cont {

  align-self: end;

  display: flex;

  flex-direction: column;

  align-items: end;

  margin: calc(99 * var(--formula)) calc(35 * var(--formula)) 0 0;

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

}



#em260401PUMA .sec3-img-02 {

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

  position: relative;

  z-index: 0;

}

#em260401PUMA .sec3-img-02::after {

  content: "";

  position: absolute;

  width: 100%;

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

  background: var(--brown);

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

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

  z-index: -2; /* 白い壁(-1)よりもさらに奥 */

}

#em260401PUMA .sec3-img-02::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ffffff;

  z-index: -1; /* 画像のすぐ後ろ */

}

#em260401PUMA .sec3__credit {

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

}



#em260401PUMA .sec4 {

  background: var(--pale-brown);

  padding: calc(65 * var(--formula)) 0 0 0;

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

}



#em260401PUMA .sec4-img-01 {

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

  position: relative;

  z-index: 0;

}

#em260401PUMA .sec4-img-01::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ffffff;

  z-index: -1; /* 画像のすぐ後ろ */

}

#em260401PUMA .sec4-img-01::after {

  content: "";

  position: absolute;

  width: 100%;

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

  background: var(--brown);

  /* 指定通り top と left にズラす */

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

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

  z-index: -2; /* 白い壁より後ろ */

}

#em260401PUMA .sec4__inner-cont {

  display: flex;

  flex-direction: column;

  align-items: center;

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

  background: var(--beige);

}



#em260401PUMA .sec4-img-02 {

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

}



#em260401PUMA .sec4__credit {

  align-items: center;

}



#em260401PUMA .sec5 {

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

}



#em260401PUMA .sec5__txt-cont {

  margin: calc(-29 * var(--formula)) 0 calc(83 * var(--formula)) 0;

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

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

}



#em260401PUMA .sec5-txt-01 {

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

}



#em260401PUMA .sec5-txt-02 {

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

}



#em260401PUMA .sec5-txt-03 {

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

}



#em260401PUMA .sec5-txt-04 {

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

}



#em260401PUMA .sec6__txt-cont {

  margin: calc(-31 * var(--formula)) 0 calc(119 * var(--formula)) 0;

  padding: calc(88 * var(--formula)) 0 calc(66 * var(--formula)) 0;

}

#em260401PUMA .sec6-txt-03 {

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

  padding: calc(19 * var(--formula)) calc(33 * var(--formula))

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

}

#em260401PUMA .sec6-txt-01 {

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

  padding: calc(23 * var(--formula)) calc(38 * var(--formula))

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

}



#em260401PUMA .sec6__h3 {

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

}



#em260401PUMA .sec6__txt1 {

  padding: 0 0 calc(12 * var(--formula)) 0;

}

#em260401PUMA #sec6-slider {

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

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

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

}



#em260401PUMA #sec6-slider .splide__slide {

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

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

  margin: 0;

}

#em260401PUMA .sec6-txt-02 {

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

  margin: 0 0 0 0;

}



#em260401PUMA .sec6-img-05 {

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

  margin: calc(44 * var(--formula)) 0 calc(60 * var(--formula)) 0;

}



#em260401PUMA .sec6__txt--small {

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

  line-height: 1.76;

  padding: calc(53 * var(--formula)) 0 0 0;

}



#em260401PUMA .lp-footer {

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

}

@media (max-width: 767px) {

  #em260401PUMA {

    flex-direction: column;

  }

  #em260401PUMA .lp-mv-area {

    position: relative;

    height: auto;

  }



  #em260401PUMA .lp-mv-img-01 {

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

    height: auto;

  }



  #em260401PUMA .lp-mv-txt-01 {

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

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

  }



  #em260401PUMA .lp-main-area {

    width: 100%;

  }



  #em260401PUMA .sec-set {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

  }

}

#em260401PUMA .slide-up {

  opacity: 0;

  transform: translateY(calc(60 * var(--formula)));

  transition: all 1s ease-out;

}

#em260401PUMA .is-visible.slide-up {

  opacity: 1;

  transform: translateY(0);

}



#em260401PUMA .fade-in {

  opacity: 0;

  transition: all 1.2s cubic-bezier(0.83, 0, 0.17, 1);

}

#em260401PUMA .is-visible.fade-in {

  opacity: 1;

}