@charset "UTF-8";

/* * {
  outline: 1px solid blue;
} */

body {
  margin: 0;
}

@media screen and (min-width: 780px) {
  body {
    margin: 0;
  }
}

/* 検証サイズ用

.fs-l-main {
  margin: 0;
  padding: 0;
}

.fs-l-main,
.fs-l-pageMain {
  width: 100%;
  max-width: 100%;
}
/* futureshop css 反映用 */

/* .device-click a,
.device-click button {
  transition: unset;
} */

/* .device-click a:hover,
.device-click button:hover {
  opacity: unset !important;
} */

/* ボタン回り 挙動の反映のリセット */

.bramone_contest_2607 {
  /* --min-size: 0;
  --max-size: 10px;
  --fluid-size: 1.25vw;
  font-size: min(var(--fluid-size), var(--max-size)); */
  /* テストアップ、本アップ用でサイズが異なるため非表示 */

  position: relative;
  overflow: hidden;
  /* 全体設定  article class セールタイトル名 */

  --main-font:
    "ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic",
    Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-family: var(--main-font);
  --second-font: "the-seasons", sans-serif;
  --main-font-family:
    "the-seasons", "Yu Mincho", "游明朝", "游明朝体", YuMincho,
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  --third-font-family:
    "Yu Mincho", "游明朝", "游明朝体", YuMincho, "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", "MS PMincho", serif;
  /* フォント設定 游ゴシックの場合 カスタムプロパティー反映用*/
}

.feature_lp {
  font-family: var(--main-font);
  background-color: #fff !important;
  /* メイン カスタムプロパティー反映例 */
}
.second_font_template {
  font-family: var(--second-font);
  /* セカンド カスタムプロパティー反映例 */
}

.bramone_contest_2607 .l-inner {
  margin: 0 auto;
  max-width: 800px;
}

.sc1-view-more-btn a,
.sc2-size-btn a,
.sc2-view-more-btn a,
.sc3-cart-btn a,
.sc4-size-btn a,
.sc4-view-more-btn a,
.sc5-view-more-btn a,
.sc5-col-view-more-btn a {
  color: #fff !important;
}

a.sc1-view-more-btn,
a.sc2-size-btn,
a.sc2-view-more-btn,
a.sc3-cart-btn,
a.sc4-size-btn,
a.sc4-view-more-btn,
a.sc5-view-more-btn,
a.sc5-col-view-more-btn {
  color: #fff !important;
  text-decoration: none;
}

@media (hover: hover) {
  .bramone_contest_2607 .u-hover-btn {
    transition: opacity 0.5s ease;
    cursor: pointer;
  }
  .bramone_contest_2607 .u-hover-btn:hover {
    opacity: 0.7 !important;
  }
}
/* ボタン回り */

/* section_01 fv sp */

.fv-container {
  position: relative;
  width: calc(800 / 800 * 100vw);
  margin: 0 auto;
  overflow: hidden;
}

/* 背景のベース画像 */
.fv-base-image {
  width: 100%;
  height: auto;
  display: block;
}

.animation-area {
  position: absolute;
  bottom: 9%;
  left: 57%;
  transform: translateX(-50%);
  width: 75%;
  height: calc(120 / 800 * 100vw);
  pointer-events: none;
  mix-blend-mode: screen;
}

.anim-part {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ----------------------------------
       2. 線の「左から右へワイプ表示」アニメーション
    ---------------------------------- */
.line-image {
  width: calc(482 / 800 * 100vw);
  height: calc(44 / 800 * 100vw);
  top: 0;
  left: 0;
  /* 透過PNGの線の画像パスを指定 */
  background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/line_gold.png");
  background-position: center;

  /* 最初は右側を100%切り取って（隠して）おく */
  clip-path: inset(0 100% 0 0);
  animation: wipeIn 1.5s ease-in-out forwards;
}

@keyframes wipeIn {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  } /* 全部表示する */
}

/* ----------------------------------
       3. キラキラの「順次フェードイン」アニメーション
    ---------------------------------- */
.shine-image_1,
.shine-image_2,
.shine-image_3 {
  background-position: center;
  opacity: 0; /* 最初は透明 */
  transform: scale(0.8);
  animation: fadeInPop 0.8s ease-out forwards;
}

.shine-image_1 {
  width: calc(106 / 800 * 100vw);
  height: calc(105 / 800 * 100vw);
}

.shine-image_2 {
  width: calc(40 / 800 * 100vw);
  height: calc(35 / 800 * 100vw);
}

.shine-image_3 {
  width: calc(106 / 800 * 100vw);
  height: calc(77 / 800 * 100vw);
}

/* 各キラキラの画像パス、位置、アニメーション開始時間を個別に設定 */
.shine-left {
  background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/shine_left.png"); /* 左のキラキラ画像 */
  top: calc(-52 / 800 * 100vw);
  left: 13%;
  animation-delay: 1.2s; /* 0.3秒後に開始 */
}

.shine-center {
  background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/shine_center.png"); /* 中央のキラキラ画像 */
  top: calc(22 / 800 * 100vw);
  left: 53%;
  animation-delay: 1.7s; /* 0.7秒後に開始 */
}

.shine-right {
  background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/shine_right.png"); /* 右のキラキラ画像 */
  top: calc(-26 / 800 * 100vw);
  left: 68%;
  animation-delay: 2.2s; /* 1.1秒後に開始 */
}

@keyframes fadeInPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.1); /* 少しだけ大きくなる */
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* section_01 fv sp */

/* section_01 fv pc */

@media screen and (min-width: 780px) {
  .fv-container {
    position: relative;
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* 背景のベース画像 */
  .fv-base-image {
    width: 100%;
    height: auto;
    display: block;
  }

  /* アニメーションパーツを置くエリア */
  .animation-area {
    position: absolute;
    bottom: 9%; /* デザインに合わせて調整 */
    left: 57%;
    transform: translateX(-50%);
    width: 75%;
    height: 120px; /* パーツが入る高さに合わせて調整 */
    pointer-events: none;
    /* 光彩効果（スクリーン）をブラウザで再現 */
    mix-blend-mode: screen;
  }

  /* 各画像パーツの共通設定 */
  .anim-part {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* ----------------------------------
       2. 線の「左から右へワイプ表示」アニメーション
    ---------------------------------- */
  .line-image {
    width: 482px;
    height: 44px;
    top: 0;
    left: 0;
    /* 透過PNGの線の画像パスを指定 */
    background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/line_gold.png");
    background-position: center;

    /* 最初は右側を100%切り取って（隠して）おく */
    clip-path: inset(0 100% 0 0);
    animation: wipeIn 1.5s ease-in-out forwards;
  }

  @keyframes wipeIn {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0 0 0 0);
    } /* 全部表示する */
  }

  /* ----------------------------------
       3. キラキラの「順次フェードイン」アニメーション
    ---------------------------------- */
  .shine-image_1,
  .shine-image_2,
  .shine-image_3 {
    background-position: center;
    opacity: 0; /* 最初は透明 */
    transform: scale(0.8);
    animation: fadeInPop 0.8s ease-out forwards;
  }

  .shine-image_1 {
    width: 106px;
    height: 105px;
  }

  .shine-image_2 {
    width: 40px;
    height: 35px;
  }

  .shine-image_3 {
    width: 106px;
    height: 77px;
  }

  /* 各キラキラの画像パス、位置、アニメーション開始時間を個別に設定 */
  .shine-left {
    background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/shine_left.png"); /* 左のキラキラ画像 */
    top: -52px;
    left: 13%;
    animation-delay: 1.2s; /* 0.3秒後に開始 */
  }

  .shine-center {
    background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/shine_center.png"); /* 中央のキラキラ画像 */
    top: 22px;
    left: 53%;
    animation-delay: 1.7s; /* 0.7秒後に開始 */
  }

  .shine-right {
    background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/shine_right.png"); /* 右のキラキラ画像 */
    top: -26px;
    left: 68%;
    animation-delay: 2.2s; /* 1.1秒後に開始 */
  }

  @keyframes fadeInPop {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1.1); /* 少しだけ大きくなる */
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}
/* section_01 fv pc */

/* section_01 introduction sp */
.bramone-lp-container {
  width: calc(800 / 800 * 100vw);
  margin: 0 auto;
  position: relative;
  background-image: url("/img/feature/260724_bramone_contest/section01/bg_01.png");
  background-size: cover;
  background-repeat: repeat-y;
  background-position: top center;
  padding-bottom: calc(120 / 800 * 100vw);
  overflow: hidden;
}

.bramone-lp-hero {
  position: relative;
  width: calc(800 / 800 * 100vw);
  padding: calc(100 / 800 * 100vw) 0 calc(114 / 800 * 100vw);
  display: flex;
  justify-content: center;
}

.bramone-lp-hero-card {
  width: calc(700 / 800 * 100vw);
  height: calc(673 / 800 * 100vw);
  background-image: url("/img/feature/260724_bramone_contest/section01/tu_bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0px 6px 19px rgba(116, 93, 80, 0.3);
}

.bramone-lp-hero-text {
  font-family: var(--main-font-family);
  font-size: calc(24 / 800 * 100vw);
  line-height: 1.8;
  color: #5d4f47;
  font-weight: 400;
  margin-top: calc(30 / 800 * 100vw);
}

.bramone-lp-slider-section {
  width: calc(800 / 800 * 100vw);
  height: calc(320 / 800 * 100vw);
  margin: 0 auto calc(48 / 800 * 100vw);
}

.bramone-lp-swiper {
  width: calc(800 / 800 * 100vw);
  height: auto;
}

.bramone-lp-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

.bramone-lp-swiper .swiper-wrapper[style="transition-duration: 0ms"] {
  transition-duration: 0ms !important;
}

/* 3. スマホで画像サイズがブレないよう固定 */
.bramone-lp-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.bramone-lp-swiper .swiper-slide {
  width: calc(250 / 800 * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 calc(12 / 800 * 100vw);
}

.bramone-lp-swiper img {
  width: 100%;
  height: auto;
  display: block;
}

.bramone-lp-period {
  font-family: var(--main-font);
  font-weight: 500;
  text-align: center;
  margin-bottom: calc(90 / 800 * 100vw);
}

.bramone-lp-period-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(41 / 800 * 100vw);
  font-size: calc(22 / 800 * 100vw);
  letter-spacing: 0.1em;
  color: #333333;
  margin-bottom: calc(12 / 800 * 100vw);
}

.bramone-lp-period-title::before,
.bramone-lp-period-title::after {
  content: "";
  display: inline-block;
  width: calc(80 / 800 * 100vw);
  height: 1px;
  background-color: #333333;
}

.bramone-lp-period-date {
  font-size: calc(22 / 800 * 100vw);
  letter-spacing: 0.05em;
  color: #333333;
}

.bramone-lp-title-img-wrap {
  text-align: center;
  margin-bottom: calc(54 / 800 * 100vw);
}

.bramone-lp-title-img-wrap img {
  width: calc(510 / 800 * 100vw);
  height: auto;
  display: inline-block;
}

.bramone-lp-description {
  font-family: var(--main-font-family);
  text-align: center;
  line-height: 2;
  color: #333333;
  font-size: calc(24 / 800 * 100vw);
  margin-bottom: calc(60 / 800 * 100vw);
  font-weight: 400;
}

.bramone-lp-description .highlight-quotes {
  margin-bottom: calc(25 / 800 * 100vw);
}

.bramone-lp-description p {
  margin-bottom: calc(25 / 800 * 100vw);
}

.bramone-lp-accordion-wrap {
  width: calc(680 / 800 * 100vw);
  margin: 0 auto calc(50 / 800 * 100vw);
}

.bramone-lp-accordion {
  border: 1px solid #aaa099;
  background-color: #ffffff;
}

.bramone-lp-accordion summary {
  padding: calc(18 / 800 * 100vw) calc(24 / 800 * 100vw);
  font-size: calc(24 / 800 * 100vw);
  color: #333333;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #aaa099;
}

.bramone-lp-accordion summary::-webkit-details-marker {
  display: none;
}

/* 通常時（閉じた状態）：下向き */
.accordion-icon {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
  margin-left: calc(2 / 800 * 100vw);
}

/* open属性がついた時（開いた状態）：上向き */
details[open] .accordion-icon {
  transform: rotate(90deg);
}

.bramone-lp-accordion-content {
  font-family: var(--main-font);
  letter-spacing: 0.04em;
  padding: calc(30 / 800 * 100vw) calc(20 / 800 * 100vw) calc(40 / 800 * 100vw)
    calc(26 / 800 * 100vw);
  color: #333333;
}

.bramone-lp-step {
  margin-bottom: calc(30 / 800 * 100vw);
}

.bramone-lp-step:last-child {
  margin-bottom: 0;
}

.bramone-lp-step-title {
  font-size: calc(24 / 800 * 100vw);
  font-weight: bold;
  letter-spacing: 0.13em;
  margin-bottom: calc(8 / 800 * 100vw);
  color: #333333;
}

.bramone-lp-step-subtitle {
  font-size: calc(22 / 800 * 100vw);
  margin-bottom: calc(6 / 800 * 100vw);
  line-height: 1.5;
}

.bramone-lp-step-subtitle_wt {
  font-weight: 700;
}

.bramone-lp-step-body {
  font-size: calc(20 / 800 * 100vw);
  line-height: 1.6;
  color: #333333;
}

.bramone-lp-hashtag {
  font-size: calc(22 / 800 * 100vw);
  font-weight: 700;
  margin-top: calc(6 / 800 * 100vw);
  line-height: 1.6;
}

.bramone-lp-notes {
  width: calc(700 / 800 * 100vw);
  margin: 0 auto;
  font-family: var(--main-font);
  font-weight: 500;
}

.bramone-lp-notes-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(44 / 800 * 100vw);
  font-size: calc(22 / 800 * 100vw);
  letter-spacing: 0.1em;
  color: #5d4f48;
  margin-bottom: calc(25 / 800 * 100vw);
}

.bramone-lp-notes-title::before,
.bramone-lp-notes-title::after {
  content: "";
  display: inline-block;
  width: calc(120 / 800 * 100vw);
  height: 1px;
  background-color: #5d4f48;
}

.bramone-lp-notes-list {
  list-style: none;
  font-size: calc(18 / 800 * 100vw);
  line-height: 2;
  color: #333333;
  padding: 0 calc(10 / 800 * 100vw);
  white-space: nowrap;
}

.bramone-lp-notes-list a {
  color: #333333;
  text-decoration: underline;
}

.bramone-lp-notes-list a:hover {
  opacity: 0.8;
}
/* section_01  introduction sp */

/* section_01  introduction pc */

@media screen and (min-width: 780px) {
  .bramone-lp-container {
    width: 800px;
    margin: 0 auto;
    position: relative;
    background-image: url("/img/feature/260724_bramone_contest/section01/bg_01.png");
    background-size: cover;
    background-repeat: repeat-y;
    background-position: top center;
    padding-bottom: 120px;
    overflow: hidden;
  }

  .bramone-lp-hero {
    position: relative;
    width: 800px;
    padding: 100px 0 114px;
    display: flex;
    justify-content: center;
  }

  .bramone-lp-hero-card {
    width: 700px;
    height: 673px;
    background-image: url("/img/feature/260724_bramone_contest/section01/tu_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0px 6px 19px rgba(116, 93, 80, 0.3);
  }

  .bramone-lp-hero-text {
    font-family: var(--main-font-family);
    font-size: 24px;
    line-height: 1.8;
    color: #5d4f47;
    font-weight: 400;
    margin-top: 30px;
  }

  .bramone-lp-slider-section {
    width: 800px;
    height: 320px;
    margin: 0 auto 48px;
  }

  .bramone-lp-swiper {
    width: 800px;
    height: auto;
  }

  .bramone-lp-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
  }

  .bramone-lp-swiper .swiper-slide {
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
  }

  .bramone-lp-swiper img {
    width: 100%;
    height: auto;
    display: block;
  }

  .bramone-lp-period {
    font-family: var(--main-font);
    font-weight: 500;
    text-align: center;
    margin-bottom: 90px;
  }

  .bramone-lp-period-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 41px;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: #333333;
    margin-bottom: 12px;
  }

  .bramone-lp-period-title::before,
  .bramone-lp-period-title::after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 1px;
    background-color: #333333;
  }

  .bramone-lp-period-date {
    font-size: 22px;
    letter-spacing: 0.05em;
    color: #333333;
  }

  .bramone-lp-title-img-wrap {
    text-align: center;
    margin-bottom: 54px;
  }

  .bramone-lp-title-img-wrap img {
    width: 510px;
    height: auto;
    display: inline-block;
  }

  .bramone-lp-description {
    font-family: var(--main-font-family);
    text-align: center;
    line-height: 2;
    color: #333333;
    font-size: 24px;
    margin-bottom: 60px;
    font-weight: 400;
  }

  .bramone-lp-description .highlight-quotes {
    margin-bottom: 25px;
  }

  .bramone-lp-description p {
    margin-bottom: 25px;
  }

  .bramone-lp-accordion-wrap {
    width: 680px;
    margin: 0 auto 50px;
  }

  .bramone-lp-accordion {
    border: 1px solid #aaa099;
    background-color: #ffffff;
  }

  .bramone-lp-accordion summary {
    padding: 18px 24px;
    font-size: 24px;
    color: #333333;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #aaa099;
  }

  /* 通常時（閉じた状態）：下向き */
  .accordion-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    margin-left: 2px;
  }

  /* open属性がついた時（開いた状態）：上向き */
  details[open] .accordion-icon {
    transform: rotate(90deg);
  }

  .bramone-lp-accordion summary::-webkit-details-marker {
    display: none;
  }

  .bramone-lp-accordion-content {
    font-family: var(--main-font);
    letter-spacing: 0.04em;
    padding: 30px 2px 40px 26px;
    color: #333333;
  }

  .bramone-lp-step {
    margin-bottom: 30px;
  }

  .bramone-lp-step:last-child {
    margin-bottom: 0;
  }

  .bramone-lp-step-title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.13em;
    margin-bottom: 8px;
    color: #333333;
  }

  .bramone-lp-step-subtitle {
    font-size: 22px;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  .bramone-lp-step-subtitle_wt {
    font-weight: 700;
  }

  .bramone-lp-step-body {
    font-size: 20px;
    line-height: 1.6;
    color: #333333;
  }

  .bramone-lp-hashtag {
    font-size: 22px;
    font-weight: 700;
    margin-top: 6px;
    line-height: 1.6;
  }

  .bramone-lp-notes {
    width: 700px;
    margin: 0 auto;
    font-family: var(--main-font);
    font-weight: 500;
  }

  .bramone-lp-notes-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    font-size: 22px;
    letter-spacing: 0.1em;
    color: #5d4f48;
    margin-bottom: 25px;
  }

  .bramone-lp-notes-title::before,
  .bramone-lp-notes-title::after {
    content: "";
    display: inline-block;
    width: 120px;
    height: 1px;
    background-color: #5d4f48;
  }

  .bramone-lp-notes-list {
    list-style: none;
    font-size: 18px;
    line-height: 2;
    color: #333333;
    padding: 0 10px;
    white-space: nowrap;
  }

  .bramone-lp-notes-list a {
    color: #333333;
    text-decoration: underline;
  }

  .bramone-lp-notes-list a:hover {
    opacity: 0.8;
  }
}
/* section_01 introduction pc */

/* section_02 choose the best sp */

.bramone-lp-sec02-container {
  width: calc(800 / 800 * 100vw);
  margin: 0 auto;
  position: relative;
  background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/section02/bg_02.png");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: cover;
  padding: calc(72 / 800 * 100vw) 0;
}
.bramone-lp-sec02-center-img {
  text-align: center;
  margin-bottom: calc(30 / 800 * 100vw);
}

.bramone-lp-sec02-center-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: calc(-125 / 800 * 100vw) 0 auto;
}

.bramone-lp-sec02-result {
  text-align: center;
  margin-bottom: calc(40 / 800 * 100vw);
}

.bramone-lp-sec02-result-title {
  font-family: var(--third-font-family);
  font-size: calc(32 / 800 * 100vw);
  font-weight: 400;
  color: #333333;
  margin: calc(39 / 800 * 100vw) 0 0 0;
  margin-bottom: calc(8 / 800 * 100vw);
  letter-spacing: 0.09em;
}

.bramone-lp-sec02-result-text {
  font-family: var(--main-font-family);
  font-size: calc(18 / 800 * 100vw);
  color: #333333;
  margin: 0;
  letter-spacing: 0.09em;
}

.bramone-lp-sec02-gift-img {
  text-align: center;
  margin-bottom: calc(4 / 800 * 100vw);
}

.bramone-lp-sec02-gift-img img {
  width: calc(721 / 800 * 100vw);
  height: auto;
  display: block;
  margin: 0 0 0 calc(13 / 800 * 100vw);
}

.bramone-lp-sec02-gift-notes {
  text-align: center;
  font-size: calc(18 / 800 * 100vw);
  color: #333333;
  line-height: 1.8;
  margin-bottom: calc(120 / 800 * 100vw);
}

.bramone-lp-sec02-gift-notes a {
  text-decoration: none;
}

.bramone-lp-sec02-gift-notes_url {
  color: #1722fe;
}

.bramone-lp-sec02-special-title {
  text-align: center;
  font-family: var(--main-font-family);
  font-size: calc(38 / 800 * 100vw);
  font-weight: 400;
  color: #333333;
  margin: 0 0 calc(25 / 800 * 100vw) 0;
}

.bramone-lp-sec02-special-img {
  text-align: center;
  margin-bottom: calc(37 / 800 * 100vw);
}

.bramone-lp-sec02-special-img img {
  width: calc(643 / 800 * 100vw);
  height: auto;
  display: block;
  margin: 0 0 0 calc(57 / 800 * 100vw);
}

.bramone-lp-sec02-special-note {
  text-align: center;
  font-size: calc(18 / 800 * 100vw);
  color: #333333;
  margin-bottom: calc(60 / 800 * 100vw);
  letter-spacing: 0.13em;
}

.bramone-lp-sec02-btn-wrap {
  text-align: center;
  margin-bottom: calc(44 / 800 * 100vw);
}

.bramone-lp-sec02-btn-wrap a {
  display: inline-block;
  text-decoration: none;
}

.bramone-lp-sec02-btn-wrap img {
  width: calc(300 / 800 * 100vw);
  height: auto;
  display: block;
}

.bramone-lp-sec02-thanks {
  text-align: center;
  font-size: calc(22 / 800 * 100vw);
  font-weight: 500;
  letter-spacing: 0.13em;
  color: #333333;
  margin-bottom: calc(60 / 800 * 100vw);
}

.bramone-lp-sec02-inspired-header {
  text-align: center;
  margin-bottom: calc(60 / 800 * 100vw);
}

.bramone-lp-sec02-inspired-header img {
  width: calc(442 / 800 * 100vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.bramone-lp-sec02-columns {
  width: calc(680 / 800 * 100vw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bramone-lp-sec02-col {
  width: calc(325 / 800 * 100vw);
}

.bramone-lp-sec02-col-title {
  margin-bottom: calc(18 / 800 * 100vw);
  text-align: center;
}

.bramone-lp-sec02-col-title img {
  width: calc(260 / 800 * 100vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.bramone-lp-sec02-col-img {
  text-align: center;
}

.bramone-lp-sec02-col-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* section_02 choose the best sp */

/* section_02 choose the best pc */

@media screen and (min-width: 780px) {
  .bramone-lp-sec02-container {
    width: 800px;
    margin: 0 auto;
    position: relative;
    background-image: url("https://tu-hacci.co.jp/img/feature/260724_bramone_contest/section02/bg_02.png");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: cover;
    padding: 72px 0;
  }
  .bramone-lp-sec02-center-img {
    text-align: center;
    margin-bottom: 30px;
  }

  .bramone-lp-sec02-center-img img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: -125px 0 auto;
  }

  .bramone-lp-sec02-result {
    text-align: center;
    margin-bottom: 40px;
  }

  .bramone-lp-sec02-result-title {
    font-family: var(--third-font-family);
    font-size: 32px;
    font-weight: 400;
    color: #333333;
    margin: 39px 0 0 0;
    margin-bottom: 8px;
    letter-spacing: 0.09em;
  }

  .bramone-lp-sec02-result-text {
    font-family: var(--main-font-family);
    font-size: 18px;
    color: #333333;
    margin: 0;
    letter-spacing: 0.09em;
  }

  .bramone-lp-sec02-gift-img {
    text-align: center;
    margin-bottom: 4px;
  }

  .bramone-lp-sec02-gift-img img {
    width: 721px;
    height: auto;
    display: block;
    margin: 0 0 0 13px;
  }

  .bramone-lp-sec02-gift-notes {
    text-align: center;
    font-size: 18px;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 120px;
  }

  .bramone-lp-sec02-gift-notes a {
    text-decoration: none;
  }

  .bramone-lp-sec02-gift-notes_url {
    color: #1722fe;
  }

  .bramone-lp-sec02-special-title {
    text-align: center;
    font-family: var(--main-font-family);
    font-size: 38px;
    font-weight: 400;
    color: #333333;
    margin: 0 0 25px 0;
  }

  .bramone-lp-sec02-special-img {
    text-align: center;
    margin-bottom: 37px;
  }

  .bramone-lp-sec02-special-img img {
    width: 643px;
    height: auto;
    display: block;
    margin: 0 0 0 57px;
  }

  .bramone-lp-sec02-special-note {
    text-align: center;
    font-size: 18px;
    color: #333333;
    margin-bottom: 60px;
    letter-spacing: 0.13em;
  }

  .bramone-lp-sec02-btn-wrap {
    text-align: center;
    margin-bottom: 44px;
  }

  .bramone-lp-sec02-btn-wrap a {
    display: inline-block;
    text-decoration: none;
  }

  .bramone-lp-sec02-btn-wrap img {
    width: 300px;
    height: auto;
    display: block;
  }

  .bramone-lp-sec02-thanks {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.13em;
    color: #333333;
    margin-bottom: 60px;
  }

  .bramone-lp-sec02-inspired-header {
    text-align: center;
    margin-bottom: 60px;
  }

  .bramone-lp-sec02-inspired-header img {
    width: 442px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .bramone-lp-sec02-columns {
    width: 680px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .bramone-lp-sec02-col {
    width: 325px;
  }

  .bramone-lp-sec02-col-title {
    margin-bottom: 18px;
    text-align: center;
  }

  .bramone-lp-sec02-col-title img {
    width: 260px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .bramone-lp-sec02-col-img {
    text-align: center;
  }

  .bramone-lp-sec02-col-img img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* section_02 choose the best pc */

/* section_03 lucuaosaka sp */

.bramone-lp-lucua-container {
  width: calc(800 / 800 * 100vw);
  margin: 0 auto;
  background-color: #e5d3c9;
  padding: calc(100 / 800 * 100vw) 0 calc(95 / 800 * 100vw);
  text-align: center;
}

.bramone-lp-lucua-text {
  font-family: var(--third-font-family);
  font-size: calc(32 / 800 * 100vw);
  line-height: 1.7;
  color: #5d4f48;
  margin: 0 0 calc(38 / 800 * 100vw) 0;
  font-weight: 400;
}

.bramone-lp-lucua-img-wrap {
  margin-bottom: calc(60 / 800 * 100vw);
  text-align: center;
}

.bramone-lp-lucua-img-wrap img {
  width: calc(600 / 800 * 100vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

.bramone-lp-lucua-btn-wrap {
  text-align: center;
}

.bramone-lp-lucua-btn-wrap a {
  display: inline-block;
  text-decoration: none;
}

.bramone-lp-lucua-btn-wrap img {
  width: calc(300 / 800 * 100vw);
  height: auto;
  display: block;
  margin: 0 auto;
}
/* section_03 lucuaosaka sp */

/* section_03 lucuaosaka pc */

@media screen and (min-width: 780px) {
  .bramone-lp-lucua-container {
    width: 800px;
    margin: 0 auto;
    background-color: #e5d3c9;
    padding: 100px 0 95px;
    text-align: center;
  }

  .bramone-lp-lucua-text {
    font-family: var(--third-font-family);
    font-size: 32px;
    line-height: 1.7;
    color: #5d4f48;
    margin: 0 0 38px 0;
    font-weight: 400;
  }

  .bramone-lp-lucua-img-wrap {
    margin-bottom: 60px;
    text-align: center;
  }

  .bramone-lp-lucua-img-wrap img {
    width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .bramone-lp-lucua-btn-wrap {
    text-align: center;
  }

  .bramone-lp-lucua-btn-wrap a {
    display: inline-block;
    text-decoration: none;
  }

  .bramone-lp-lucua-btn-wrap img {
    width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* section_03 lucuaosaka pc */