@charset "UTF-8";
/* =======================================
LP luckybag2027
======================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  --lp-red: #bc0028;
  --lp-white: #ffffff;
  --lp-black: #000000;
  --lp-lightbrown: #69391c;
  --lp-darkbrown: #533719;
  --lp-green: #04694b;
  --base-spw: 750;
  --full-vw: 100vw;
}

main button {
  font-family: inherit;
}

main ol {
  list-style-type: '';
}

#luckybag2027 {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.03em;
  opacity: 0;
  visibility: hidden;
  position: relative;
  background: #ffe8a9;
}

#luckybag2027:before,
#luckybag2027::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
}

#luckybag2027:before {
  top: 0;
  right: calc(50% + 348px);
  width: 100%;
  height: 100%;
  background: url(/luckybag2027/files/bg_l.png) repeat top right / 840px 840px;
}

#luckybag2027::after {
  top: 0;
  left: calc(50% + 348px);
  width: 100%;
  height: 100%;
  background: url(/luckybag2027/files/bg_r.png) repeat top left / 840px 840px;
}

/*-----------------------------------------
  common
-----------------------------------------*/
#luckybag2027 img {
  max-width: 100%;
  height: auto;
}

.emphasis {
  color: var(--lp-red) !important;
}

.anim_item {
  opacity: 0;
  visibility: hidden;
}

/* modal_trigger */
.modal_trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  width: min(400px, calc(400 / var(--base-spw) * var(--full-vw)));
  padding-block: min(10px, calc(10 / var(--base-spw) * var(--full-vw)));
  margin-block: 
    min(30px, calc(30 / var(--base-spw) * var(--full-vw)))
    min(64px, calc(64 / var(--base-spw) * var(--full-vw)));
  margin-inline: auto;
  border-radius: 100vmax;
  font-weight: bold;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  line-height: 1;
  background-color: var(--lp-red);
  color: var(--lp-white);
}

.modal_trigger > img {
  width: min(37px, calc(37 / var(--base-spw) * var(--full-vw)));
}

/* notelist */
.notelist > li {
  margin-left: 1em;
  text-indent: -1em;
}

.notelist > li::before {
  content: '・';
}

.notelist.circle > li::before {
  content: '●';
}

.notelist.asterisk > li::before {
  content: '※';
}

/*-----------------------------------------
  layout
-----------------------------------------*/
#luckybag2027 .cont_inner {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.about_field .cont_inner {
  background: var(--lp-darkbrown);
  z-index: 3;
}

#sec_mv .cont_inner {
  aspect-ratio: 750 / 1321;
  background: url(/luckybag2027/files/mv_bg.jpg) no-repeat top center / 100% auto;
}

#sec_mv .cont_inner::before {
  content: '';
  width: 100%;
  height: min(110px, calc(110 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, #533719 100%);
}

/*-----------------------------------------
  mv
-----------------------------------------*/
#sec_mv .mv_title {
  max-width: 710px;
  padding-top: min(24px, calc(24 / var(--base-spw) * var(--full-vw)));
  margin-inline: min(20px, calc(20 / var(--base-spw) * var(--full-vw)));
}

#sec_mv .mv_coupon {
  width: min(210px, calc(210 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  top: min(196px, calc(196 / var(--base-spw) * var(--full-vw)));
  left: min(24px, calc(24 / var(--base-spw) * var(--full-vw)));
}

#sec_mv .mv_item {
  width: min(195px, calc(195 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  top: min(245px, calc(245 / var(--base-spw) * var(--full-vw)));
  right: min(12px, calc(12 / var(--base-spw) * var(--full-vw)));
}

#sec_mv .mv_reserve {
  width: min(451px, calc(451 / var(--base-spw) * var(--full-vw)));
  margin-inline: min(150px, calc(150 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  bottom: min(261px, calc(261 / var(--base-spw) * var(--full-vw)));
  left: 0;
}

#sec_mv .mv_price {
  max-width: 680px;
  margin-inline: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  bottom: min(138px, calc(138 / var(--base-spw) * var(--full-vw)));
  left: 0;
}

#sec_mv .mv_period {
  max-width: 680px;
  margin-inline: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  bottom: 0;
  left: 0;
}

/*-----------------------------------------
  sec_about
-----------------------------------------*/
#sec_about .cont_inner {
  padding: 
    min(40px, calc(40 / var(--base-spw) * var(--full-vw)))
    min(40px, calc(40 / var(--base-spw) * var(--full-vw)))
    min(86px, calc(86 / var(--base-spw) * var(--full-vw)))
    min(40px, calc(40 / var(--base-spw) * var(--full-vw)));
}

#sec_about .notelist {
  font-size: min(1.7rem, calc(17 / var(--base-spw) * var(--full-vw)));
  line-height: 1.65;
  color: var(--lp-white);
}

/* border_box */
.border_box {
  margin-top: min(40px, calc(40 / var(--base-spw) * var(--full-vw)));
  padding: 
    min(28px, calc(28 / var(--base-spw) * var(--full-vw)))
    min(22px, calc(22 / var(--base-spw) * var(--full-vw)))
    min(22px, calc(22 / var(--base-spw) * var(--full-vw)))
    min(22px, calc(22 / var(--base-spw) * var(--full-vw)));
  color: var(--lp-white);
  border: 1px solid var(--lp-white);
  border-radius: 16px;
}

.border_box {
  font-size: min(2.1rem, calc(21 / var(--base-spw) * var(--full-vw)));
  line-height: 1.65;
}

/* store_note */
.store_note {
  margin-top: min(5px, calc(5 / var(--base-spw) * var(--full-vw)));
}

.store_note .store_name::before {
  content: '●';
}

.store_note .store_info {
  margin-left: min(22px, calc(22 / var(--base-spw) * var(--full-vw)));
}

/* about_box */
.about_box {
  margin-top: min(34px, calc(34 / var(--base-spw) * var(--full-vw)));
  padding: 
    min(40px, calc(40 / var(--base-spw) * var(--full-vw)))
    min(45px, calc(45 / var(--base-spw) * var(--full-vw)))
    min(50px, calc(50 / var(--base-spw) * var(--full-vw)))
    min(45px, calc(45 / var(--base-spw) * var(--full-vw)));
  border-radius: 16px;
  background-color: var(--lp-white);
}

.about_box .about_heading {
  font-weight: 700;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  line-height: 1.7;
  text-align: center;
  color: var(--lp-red);
}

.about_box .about_lead {
  margin-top: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
  font-weight: 500;
  font-size: min(2.5rem, calc(25 / var(--base-spw) * var(--full-vw)));
  line-height: 1.78;
  letter-spacing: 0.111em;
  color: var(--lp-lightbrown);
}

.about_box dl small {
  margin-top: min(10px, calc(10 / var(--base-spw) * var(--full-vw)));
  font-weight: 500;
  font-size: min(2.2rem, calc(22 / var(--base-spw) * var(--full-vw)));
  letter-spacing: 0.12em;
}

.about_box dl {
  margin-top: min(28px, calc(28 / var(--base-spw) * var(--full-vw)));
}

.about_box dl + dl {
  margin-top: min(60px, calc(60 / var(--base-spw) * var(--full-vw)));
}

.about_box dl > dt {
  padding-block: min(13px, calc(13 / var(--base-spw) * var(--full-vw)));
  font-weight: 700;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  color: var(--lp-white);
  background-color: var(--lp-green);
  text-align: center;
}

.about_box dl > dd {
  margin-top: min(32px, calc(32 / var(--base-spw) * var(--full-vw)));
  font-weight: 700;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--lp-lightbrown);
}

.about_box .about_start > dd {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about_box .about_location > dd {
  display: flex;
  flex-direction: column;
}

.about_box .about_location > dd small {
  margin-top: min(34px, calc(34 / var(--base-spw) * var(--full-vw)));
}

.about_box .about_location > dd .emphasis {
  line-height: 1.45;
  text-align: left;
}

.about_box .about_location .btn_search {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  width: min(262px, calc(262 / var(--base-spw) * var(--full-vw)));
  padding-top: min(11px, calc(11 / var(--base-spw) * var(--full-vw)));
  padding-bottom: min(13px, calc(13 / var(--base-spw) * var(--full-vw)));
  border-radius: 100vmax;
  margin-top: min(40px, calc(40 / var(--base-spw) * var(--full-vw)));
  margin-inline: auto;
  font-weight: 700;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  background-color: var(--lp-red);
  color: var(--lp-white);
}

.about_box .about_location .btn_search > img {
  width: min(28px, calc(28 / var(--base-spw) * var(--full-vw)));
}

.about_box .about_location .btn_frame {
  padding-block: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  border: solid 3px var(--lp-red);
  margin-top: min(65px, calc(65 / var(--base-spw) * var(--full-vw)));
  font-weight: bold;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  background-color: var(--lp-white);
  color: var(--lp-red);
}

.about_box .about_location .btn_frame[disabled] {
  border-color: #888;
  font-size: min(2.4rem, calc(24 / var(--base-spw) * var(--full-vw)));
  background-color: #e2e2e2;
  color: #888;
  cursor: default;
  pointer-events: none;
}

.about_box .about_location .excluded {
  margin-top: min(42px, calc(42 / var(--base-spw) * var(--full-vw)));
  font-size: min(2.2rem, calc(22 / var(--base-spw) * var(--full-vw)));
  line-height: 1.6;
  color: var(--lp-red);
  text-align: left;
  letter-spacing: 0.09em;
}

.about_box .step_wrap {
  padding: 0 6px;
}

.about_box .step {
  text-align: left;
  counter-reset: step-count 0;
}

.about_box .step > li {
  position: relative;
  padding-top: min(60px, calc(60 / var(--base-spw) * var(--full-vw)));
  line-height: 1.5;
}

.about_box .step > li:not(:last-child) {
  margin-bottom: min(36px, calc(36 / var(--base-spw) * var(--full-vw)));
}

.about_box .step > li::before {
  content: 'STEP' counter(step-count);
  counter-increment: step-count 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: min(3rem, calc(30 / var(--base-spw) * var(--full-vw)));
  line-height: 1;
  color: var(--lp-red);
}

.about_box .step > li::after {
  content: '';
  display: block;
  position: absolute;
  top: min(13px, calc(13 / var(--base-spw) * var(--full-vw)));
  right: 0;
  width: calc(100% - min(113px, calc(113 / var(--base-spw) * var(--full-vw))));
  height: min(3px, calc(3 / var(--base-spw) * var(--full-vw)));
  background-color: var(--lp-red);
}

.about_box .notelist {
  padding-inline: min(10px, calc(10 / var(--base-spw) * var(--full-vw)));
  margin-top: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
}

.about_box .notelist > li {
  font-weight: 500;
  font-size: min(2.2rem, calc(22 / var(--base-spw) * var(--full-vw)));
  line-height: 1.65;
  color: var(--lp-lightbrown);
  letter-spacing: 0.08em;
}

.about_box .notelist .base_color {
  color: var(--lp-lightbrown);
}

/*-----------------------------------------
  sec_item
-----------------------------------------*/
#sec_item .cont_inner {
  position: relative;
  padding-top: min(32px, calc(32 / var(--base-spw) * var(--full-vw)));
  padding-bottom: min(80px, calc(80 / var(--base-spw) * var(--full-vw)));
  background: #fee7a8;
}

/* item_heading */
.item_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(24px, calc(24 / var(--base-spw) * var(--full-vw)));
  position: relative;
  z-index: 2;
}

.item_heading > h2 {
  width: min(798px, calc(798 / var(--base-spw) * var(--full-vw)));
}

.item_heading > p {
  position: relative;
  font-weight: 700;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  color: var(--lp-lightbrown);
  letter-spacing: 0.08em;
}

.item_heading > p::before,
.item_heading > p::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  width: min(195px, calc(195 / var(--base-spw) * var(--full-vw)));
  height: 2px;
  background-color: var(--lp-lightbrown);
}

.item_heading > p::before {
  right: calc(100% + min(15px, calc(15 / var(--base-spw) * var(--full-vw))));
}

.item_heading > p::after {
  left: calc(100% + min(15px, calc(15 / var(--base-spw) * var(--full-vw))));
}

/* item_lineup */
.item_lineup {
  width: min(670px, calc(670 / var(--base-spw) * var(--full-vw)));
  margin-top: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  margin-inline: min(40px, calc(40 / var(--base-spw) * var(--full-vw)));
}

.item_lineup > li {
  padding-top: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
  padding-inline: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  padding-bottom: min(40px, calc(40 / var(--base-spw) * var(--full-vw)));
  position: relative;
  background-color: #fff4d6;
  box-shadow: 0 0 12px #c89c5e;
  border-radius: 16px;
}

.item_lineup > li + li {
  margin-top: min(45px, calc(45 / var(--base-spw) * var(--full-vw)));
}

.item_subimg_wrap {
  position: relative;
}

.item_description {
  margin-bottom: min(20px, calc(20 / var(--base-spw) * var(--full-vw)));
  padding-block: 
    min(13px, calc(13 / var(--base-spw) * var(--full-vw)))
    min(20px, calc(20 / var(--base-spw) * var(--full-vw)));
  padding-inline: min(25px, calc(23 / var(--base-spw) * var(--full-vw)));
  border-radius: 15px;
  background: var(--lp-white);
}

.item_description > p {
  font-weight: 500;
  font-size: min(2.4rem, calc(24 / var(--base-spw) * var(--full-vw)));
  line-height: 2;
  letter-spacing: 0.07em;
  color: var(--lp-lightbrown);
}

.item_spec {
  display: flex;
  font-weight: 500;
  font-size: min(2.2rem, calc(22 / var(--base-spw) * var(--full-vw)));
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--lp-lightbrown);
}

.item_spec > dt {
  width: min(88px, calc(88 / var(--base-spw) * var(--full-vw)));
  position: relative;
}

.item_spec > dt::after {
  content: '：';
  position: absolute;
  right: 0;
}

.item_spec > dd {
  letter-spacing: 0.05em;
}

/* item_bag */
.item_lineup .item_bag .item_title {
  width: min(413px, calc(413 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_bag .item_mainimg {
  width: min(490px, calc(490 / var(--base-spw) * var(--full-vw)));
  margin-top: min(5px, calc(5 / var(--base-spw) * var(--full-vw)));
  margin-right: min(13px, calc(13 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_bag .item_subimg_wrap {
  height: min(285px, calc(285 / var(--base-spw) * var(--full-vw)));
  margin-top: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_bag .item_subimg.left {
  width: min(360px, calc(360 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.item_lineup .item_bag .item_subimg.right {
  width: min(266px, calc(266 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  top: min(22px, calc(22 / var(--base-spw) * var(--full-vw)));
  right: min(10px, calc(10 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_bag .item_description {
  margin-top: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

/* item_mug */
.item_lineup .item_mug .item_title {
  width: min(415px, calc(415 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_mug .item_mainimg {
  width: min(457px, calc(457 / var(--base-spw) * var(--full-vw)));
  margin-top: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
  margin-right: min(22px, calc(22 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_mug .item_subimg_wrap {
  height: min(297px, calc(297 / var(--base-spw) * var(--full-vw)));
  margin-top: min(5px, calc(5 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_mug .item_subimg.left {
  width: min(352px, calc(352 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  top: min(5px, calc(5 / var(--base-spw) * var(--full-vw)));
  left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_mug .item_subimg.right {
  width: min(284px, calc(284 / var(--base-spw) * var(--full-vw)));
  position: absolute;
  top: min(85px, calc(85 / var(--base-spw) * var(--full-vw)));
  right: min(25px, calc(25 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_mug .item_description {
  margin-top: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
}

/* item_strainer */
.item_lineup .item_strainer .item_title {
  width: min(399px, calc(399 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_strainer .item_mainimg {
  width: min(572px, calc(572 / var(--base-spw) * var(--full-vw)));
  margin-top: min(32px, calc(32 / var(--base-spw) * var(--full-vw)));
  margin-right: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_strainer .item_description {
  margin-top: min(45px, calc(45 / var(--base-spw) * var(--full-vw)));
}

/* item_apple_tea */
.item_lineup .item_apple_tea .item_title {
  width: min(542px, calc(542 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_apple_tea .item_mainimg {
  width: min(583px, calc(583 / var(--base-spw) * var(--full-vw)));
  margin-top: min(20px, calc(20 / var(--base-spw) * var(--full-vw)));
  margin-right: min(5px, calc(5 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_apple_tea .item_description {
  margin-top: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_apple_tea .item_spec > dt {
  width: min(106px, calc(106 / var(--base-spw) * var(--full-vw)));
  position: relative;
}

/* item_mugcover */
.item_lineup .item_mugcover .item_title {
  width: min(380px, calc(380 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_mugcover .item_mainimg {
  width: min(496px, calc(496 / var(--base-spw) * var(--full-vw)));
  margin-top: min(5px, calc(5 / var(--base-spw) * var(--full-vw)));
  margin-right: min(65px, calc(65 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_mugcover .item_description {
  margin-top: min(25px, calc(25 / var(--base-spw) * var(--full-vw)));
}

/* item_coaster */
.item_lineup .item_coaster .item_title {
  width: min(374px, calc(374 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_coaster .item_mainimg {
  width: min(577px, calc(577 / var(--base-spw) * var(--full-vw)));
  margin-top: 0;
  margin-right: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_coaster .item_description {
  margin-top: min(25px, calc(25 / var(--base-spw) * var(--full-vw)));
}

/* item_coupon */
.item_lineup .item_coupon {
  padding-bottom: min(50px, calc(50 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_coupon .item_title {
  width: min(423px, calc(423 / var(--base-spw) * var(--full-vw)));
  margin-left: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
}

.item_lineup .item_coupon .item_mainimg {
  width: min(555px, calc(555 / var(--base-spw) * var(--full-vw)));
  margin-top: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  margin-right: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  margin-left: auto;
}

.item_lineup .item_coupon .item_period {
  margin-top: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  margin-left: min(25px, calc(25 / var(--base-spw) * var(--full-vw)));
  font-weight: 700;
  font-size: min(2.5rem, calc(25 / var(--base-spw) * var(--full-vw)));
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--lp-red);
}

.item_lineup .item_coupon .coupon_note {
  margin-top: min(15px, calc(15 / var(--base-spw) * var(--full-vw)));
  font-weight: 500;
  font-size: min(2.3rem, calc(23 / var(--base-spw) * var(--full-vw)));
  line-height: 1.7;
  color: var(--lp-darkbrown);
}

.item_lineup .item_coupon .coupon_note li {
  margin-top: min(2px, calc(2 / var(--base-spw) * var(--full-vw)));
  margin-left: min(13px, calc(13 / var(--base-spw) * var(--full-vw)));
  padding-left: min(20px, calc(20 / var(--base-spw) * var(--full-vw)));
  line-height: 1.5;
  letter-spacing: 0.04em;
  position: relative;
}

.item_lineup .item_coupon .coupon_note li::before {
  content: '・';
  position: absolute;
  top: 0;
  left: 0;
}

/* modal_trigger */
#sec_item .modal_trigger {
  width: min(528px, calc(528 / var(--base-spw) * var(--full-vw)));
  margin-top: min(38px, calc(38 / var(--base-spw) * var(--full-vw)));
  margin-bottom: 0;
  letter-spacing: 0.05em;
}

#sec_item .btn_wrap {
  margin-top: min(70px, calc(70 / var(--base-spw) * var(--full-vw)));
}

#sec_item .btn_faq {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(528px, calc(528 / var(--base-spw) * var(--full-vw)));
  aspect-ratio: 1101 / 232;
  border-radius: 100vmax;
  margin: 0 auto;
  font-weight: 700;
  font-size: min(2.8rem, calc(28 / var(--base-spw) * var(--full-vw)));
  line-height: 1.41;
  letter-spacing: 0.05em;
  background-color: var(--lp-lightbrown);
  color: var(--lp-white);
}

#sec_item .cont_inner > .notelist {
  max-width: min(575px, calc(575 / var(--base-spw) * var(--full-vw)));
  margin-top: min(54px, calc(54 / var(--base-spw) * var(--full-vw)));
  margin-inline: auto;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.75;
  color: var(--lp-lightbrown);
}

#sec_item .cont_inner > .notelist > li {
  margin-left: 0;
  text-indent: initial;
  font-size: min(2.2rem, calc(22 / var(--base-spw) * var(--full-vw)));
  letter-spacing: 0.08em;
  line-height: 1.6;
}

/*-----------------------------------------
  modal
-----------------------------------------*/
.modal {
  top: 0;
  left: 0;
  width: 100%;
  max-width: unset;
  height: 100%;
  max-height: unset;
  border: unset;
  color: unset;
  background-color: unset;
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

.modal.is-visible {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
}

.modal.is-visible::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

.modal::-webkit-scrollbar {
  display: none;
  /* Chrome,Safari */
}

.modal::before {
  content: '';
  width: 1px;
  height: calc(100% + 1px);
  display: block;
}

.modal_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: min(600px, calc(600 / var(--base-spw) * var(--full-vw)));
  max-height: 85%;
  overflow: auto;
  padding: 
    min(47px, calc(47 / var(--base-spw) * var(--full-vw)))
    min(38px, calc(38 / var(--base-spw) * var(--full-vw)))
    min(44px, calc(44 / var(--base-spw) * var(--full-vw)))
    min(45px, calc(45 / var(--base-spw) * var(--full-vw)));
  border-radius: 10px;
  background: var(--lp-white);
  translate: -50% -50%;
}

.modal_inner h2 {
  font-weight: 700;
  font-size: min(3.2rem, calc(32 / var(--base-spw) * var(--full-vw)));
  text-align: center;
  color: var(--lp-black);
}

.modal_inner .notelist {
  margin-top: min(35px, calc(35 / var(--base-spw) * var(--full-vw)));
  font-weight: 700;
  font-size: min(2.4rem, calc(24 / var(--base-spw) * var(--full-vw)));
  line-height: 1.33;
}

.modal_inner .close_btn {
  display: block;
  width: min(165px, calc(165 / var(--base-spw) * var(--full-vw)));
  padding-top: min(7px, calc(7 / var(--base-spw) * var(--full-vw)));
  padding-bottom: min(9px, calc(9 / var(--base-spw) * var(--full-vw)));
  border-radius: 100px;
  margin-top: min(30px, calc(30 / var(--base-spw) * var(--full-vw)));
  margin-inline: auto;
  font-weight: 500;
  font-size: min(2.4rem, calc(24 / var(--base-spw) * var(--full-vw)));
  line-height: 1;
  background-color: #d6d6d6;
  color: var(--lp-black);
}

/*-----------------------------------------
  hover
-----------------------------------------*/
@media (any-hover: hover) {
  main a,
  main button {
    transition: all 0.3s ease;
  }

  .btn_search:hover,
  .modal_trigger:hover,
  .modal_inner .close_btn:hover,
  .btn_faq:hover {
    opacity: 0.7;
  }

  #sec_about .btn_frame:hover {
    background-color: var(--lp-red);
    color: var(--lp-white);
  }
}