@charset "UTF-8";

:root {
  --scale: min(calc(100vw / 450), 1px);
  --font-color-base: #000000;
  --font-poppins: "Poppins", sans-serif;
}


/*==============================
  Reset
==============================*/
#lp-suitcase h3,
#lp-suitcase h2 {
  margin: unset;
}


/*==============================
  Layout
==============================*/
#lp-suitcase {
  color: var(--font-color-base);
}
#lp-suitcase img {
  max-width: 100%;
  vertical-align: bottom;
}
#lp-suitcase a {
  transition: opacity .3s;
}
#lp-suitcase a:hover {
  opacity: .7;
}
#lp-suitcase a:focus:not(:focus-visible) {
  outline: none;
}
#lp-suitcase .lp-layout {
}
@media (min-width: 768px) {
  #lp-suitcase {
    background-color: #F8F8F8;
    background-image: url('/img/usr/freepage/suitcase-3selects-lp/bg_lp.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  #lp-suitcase .lp-layout {
    display: grid;
    grid-template-columns: minmax(0, 375fr) minmax(0, 450fr);
    gap: 60px;
    max-width: 885px;
    margin-inline: auto;
  }
}


/*==============================
  Left Menu
==============================*/
#lp-suitcase .lp-leftmenu {
  display: none;
}
@media (min-width: 768px) {
  .wrapper:has(.lp-leftmenu) {
    overflow: clip;
  }
  #lp-suitcase .lp-leftmenu {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    padding-top: 156px;
  }
  #lp-suitcase .lp-leftmenu-header {
    margin-bottom: 60px;
  }
  #lp-suitcase .lp-leftmenu-title {
    text-align: center;
  }
  #lp-suitcase .lp-leftmenu-nav {
    margin-bottom: 40px;
  }
  #lp-suitcase .lp-leftmenu-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #lp-suitcase .lp-leftmenu-nav li {
  }
  #lp-suitcase .lp-leftmenu-nav a {
    display: block;
  }
  #lp-suitcase .lp-leftmenu-btn {
    text-align: center;
  }
  #lp-suitcase .lp-leftmenu-btn a {
    display: block;
  }
}


/*==============================
  Main
==============================*/
#lp-suitcase .lp-main {
  background-color: #EFEFEF;
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/bg_main.png');
  background-repeat: repeat-y;
  background-size: 100%;
  padding-top: calc(80 * var(--scale));
}
@media (min-width: 768px) {
  #lp-suitcase .lp-main {
    max-width: 450px;
  }
}


/* MV */
#lp-suitcase .lp-mv {
  margin-bottom: calc(21 * var(--scale));
}
#lp-suitcase .lp-mv img {
}


/* Nav */
#lp-suitcase .lp-nav {
  padding-inline: calc(40 * var(--scale));
}
#lp-suitcase .lp-nav-title {
  margin-bottom: 0;
}
#lp-suitcase .lp-nav-title img {
  width: calc(100 * var(--scale));
}
#lp-suitcase .lp-nav-nav {
}
#lp-suitcase .lp-nav-nav ul {
}
#lp-suitcase .lp-nav-nav li {
}
#lp-suitcase .lp-nav-nav a {
  display: grid;
  grid-template-columns: calc(64 * var(--scale)) 1fr;
  position: relative;
  background-image: radial-gradient(circle, #BABABA 1px, transparent 1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: bottom;
  padding-block: calc(18 * var(--scale)) calc(20 * var(--scale));
  text-decoration: none;
}
#lp-suitcase .lp-nav-nav a::after {
  content: '';
  position: absolute;
  top: calc(50% - calc(2 * var(--scale)));
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: calc(6 * var(--scale)) solid transparent;
  border-left: calc(6 * var(--scale)) solid transparent;
  border-top: calc(8 * var(--scale)) solid #C12F3C;
  border-bottom: 0;
}
#lp-suitcase .lp-nav-num {
  font-family: var(--font-poppins);
  font-size: calc(25 * var(--scale));
  font-weight: bold;
  letter-spacing: .12em;
  line-height: 1;
  position: relative;
  top: calc(3 * var(--scale));
  padding-left: calc(4 * var(--scale));
}
#lp-suitcase .lp-nav-name {
  font-size: calc(18 * var(--scale));
  font-weight: 500;
  letter-spacing: .1em;
  line-height: calc(26 / 18);
}


/* Section */
#lp-suitcase .lp-section {
  position: relative;
  padding-inline: calc(40 * var(--scale));
}
#lp-suitcase .lp-section#item01 {
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/deco_item01.png');
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: calc(318 * var(--scale));
}
#lp-suitcase .lp-section#item02 {
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/deco_item02.png');
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: calc(392 * var(--scale));
}
#lp-suitcase .lp-section#item03 {
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/deco_item03.png');
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: calc(392 * var(--scale));
}
#lp-suitcase .lp-section-inner {
  position: relative;
  background-color: #fff;
  border-color: #000000;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  padding-inline: calc(30 * var(--scale));
  padding-bottom: calc(39 * var(--scale));
}
#lp-suitcase .lp-section-inner::before {
  content: '';
  position: absolute;
  left: -1px;
  bottom: calc(100% - 1px);
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/section_header.png');
  background-size: 100%;
  width: calc(100% + 2px);
  height: calc(53 * var(--scale));
}
#lp-suitcase .lp-section-inner::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(-11 * var(--scale));
  background-color: #fff;
  width: 100%;
  height: calc(10 * var(--scale));
}
#lp-suitcase .lp-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(19 * var(--scale));
  text-align: center;
}
#lp-suitcase .lp-section-title-num {
  font-family: var(--font-poppins);
  font-size: calc(32 * var(--scale));
  font-weight: bold;
  letter-spacing: .12em;
  line-height: 1;
}
#lp-suitcase .lp-section-title-main {
  font-size: calc(20 * var(--scale));
  font-weight: bold;
  letter-spacing: .1em;
  line-height: calc(36 / 20);
}
#lp-suitcase .lp-section-item {
  position: relative;
  margin-bottom: calc(60 * var(--scale));
}
#lp-suitcase .lp-section-item-image-swiper {
  position: static;
  margin-bottom: calc(26 * var(--scale));
}
#lp-suitcase .lp-section-item-image-swiper .swiper-button-next,
#lp-suitcase .lp-section-item-image-swiper .swiper-button-prev {
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/arrow_next.png');
  background-size: 100%;
  z-index: 10;
  width: calc(44 * var(--scale));
  height: calc(44 * var(--scale));
  margin-top: 0;
  top: calc(148 * var(--scale));
  translate: 0 -50%;
}
#lp-suitcase .lp-section-item-image-swiper .swiper-button-prev {
  rotate: -180deg;
  left: calc(-57 * var(--scale));
}
#lp-suitcase .lp-section-item-image-swiper .swiper-button-next {
  right: calc(-57 * var(--scale));
}
#lp-suitcase .lp-section-item-image-swiper .swiper-button-next::after,
#lp-suitcase .lp-section-item-image-swiper .swiper-button-prev::after {
  content: none;
}
#lp-suitcase .swiper-pagination {
  position: static;
}
#lp-suitcase .swiper-pagination-bullet {
  width: calc(16 * var(--scale));
  height: 2px;
  border-radius: 0;
  background: #BBBBBB;
  opacity: 1;
}
#lp-suitcase .swiper-pagination-bullet-active {
  background: #000;
}
#lp-suitcase .lp-section-item-name {
  position: relative;
  border-width: 1px 0;
  border-style: solid;
  font-size: calc(20 * var(--scale));
  font-weight: bold;
  letter-spacing: .1em;
  line-height: calc(36 / 20);
  text-align: center;
  padding-block: calc(12 * var(--scale)) calc(11 * var(--scale));
  margin-bottom: calc(30 * var(--scale));
}
#lp-suitcase .lp-section-item-name::before {
  content: '';
  position: absolute;
  inset: 0;
  border-width: 1px 0;
  border-style: solid;
  margin-block: calc(2 * var(--scale));
}
#lp-suitcase .lp-section-item-text {
  font-size: calc(14 * var(--scale));
  font-weight: 500;
  letter-spacing: .1em;
  line-height: calc(25 / 14);
}
#lp-suitcase .lp-section-lineup {
}
#lp-suitcase .lp-section-lineup-title {
  margin-bottom: calc(16 * var(--scale));
}
#lp-suitcase .lp-section-lineup-title img {
  width: calc(186 * var(--scale));
}
#lp-suitcase .lp-section-lineup-event {
  margin-bottom: calc(20 * var(--scale));
  position: relative;
}
#lp-suitcase .lp-section-lineup-event .swiper {
  position: static;
}
#lp-suitcase .lp-section-lineup-event .swiper-button-next,
#lp-suitcase .lp-section-lineup-event .swiper-button-prev {
  background-image: url('/img/usr/freepage/suitcase-3selects-lp/arrow_next.png');
  background-size: 100%;
  z-index: 10;
  width: calc(44 * var(--scale));
  height: calc(44 * var(--scale));
  margin-top: 0;
  top: calc(148 * var(--scale));
  translate: 0 -50%;
}
#lp-suitcase .lp-section-lineup-event .swiper-button-prev {
  rotate: -180deg;
  left: calc(-57 * var(--scale));
}
#lp-suitcase .lp-section-lineup-event .swiper-button-next {
  right: calc(-57 * var(--scale));
}
#lp-suitcase .lp-section-lineup-event .swiper-button-next::after,
#lp-suitcase .lp-section-lineup-event .swiper-button-prev::after {
  content: none;
}
#lp-suitcase .lp-section-lineup-event .block-pickup-list-p .block-pickup-list-p--items {
  flex-wrap: nowrap;
  gap: 0px;
  margin: 0;
}
#lp-suitcase .lp-section-lineup-event .block-pickup-list-p .block-pickup-list-p--items .block-pickup-list-p--item {
  width: calc(125 * var(--scale));
}
#lp-suitcase .lp-section-lineup-event .block-pickup-list-p .block-pickup-list-p--goods-image figure {
  padding: 0;
}
#lp-suitcase .lp-section-lineup-event .block-goods-detail-j--items {
  flex-wrap: nowrap;
  margin: 0;
}
#lp-suitcase .lp-section-lineup-event .block-goods-detail-j--items li {
  display: block;
  padding: 0;
  margin: 0;
  width: 125px;
}
  #lp-suitcase .lp-section-lineup-event .block-goods-detail-j--goods-image figure {
  padding: 0;
}
#lp-suitcase .lp-section-lineup-btn {
  display: block;
}


/* Bottom */
#lp-suitcase .lp-main-bottom {
  margin-top: calc(90 * var(--scale));
}
#lp-suitcase .lp-main-bottom-title {
  text-align: center;
  margin-bottom: calc(25 * var(--scale));
}
#lp-suitcase .lp-main-bottom-title img {
  width: calc(356 * var(--scale));
}
#lp-suitcase .lp-main-bottom-image {
}


/* Footer */
#lp-suitcase .lp-main-footer {
  background-color: #A9ACB5;
  padding-inline: calc(77 * var(--scale));
  padding-block: calc(40 * var(--scale)) calc(60 * var(--scale));
}
#lp-suitcase .lp-main-footer-title {
  font-size: calc(28 * var(--scale));
  font-weight: bold;
  letter-spacing: .1em;
  line-height: calc(42 / 28);
  color: #fff;
  text-align: center;
  margin-bottom: calc(20 * var(--scale));
}
#lp-suitcase .lp-main-footer-btn {
  display: block;
}