@charset "UTF-8";

/*--------------
TOP_キービジュアル
--------------*/

#kv{
  background: url('../img/kv_bg.jpg') repeat center / auto;
  padding-bottom: calc(60/375*100%);
}

.kv_kikan_container {
  background: var(--color_white);
  border-radius: 10px;
  padding: calc(30/335*100%) calc(15/335*100%) calc(60/335*100%);
  position: relative;
}

.kv_kikan_container::before {
  content: "";
  position: absolute;
  background: url('../img/kv_point01.png') no-repeat center / contain;
  width: calc(42/335*100%);
  padding-top: calc(44/335*100%);
  top: 0;
  left: 0;
  margin: calc(-31/335*100%) 0 0 calc(19/335*100%);
}

.kv_kikan_container::after {
  content: "";
  position: absolute;
  background: url('../img/kv_point02.png') no-repeat center / contain;
  width: calc(97/335*100%);
  padding-top: calc(58/335*100%);
  bottom: 0;
  right: 0;
  margin: 0 calc(3/335*100%) calc(-28/335*100%) 0;
}

.kv_kikan_list {
  display: flex;
  align-items: center;
  gap: calc(10/335*100%);
  margin-top: calc(15/315*100%);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .kv_kikan_list {
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}

.kv_kikan_list + .kv_kikan_list {
  margin-top: calc(20/315*100%);
}

.kv_kikan_list .kv_kikan_list_number {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color_beige);
  color: var(--color_brown);
  padding: calc(5/335*100%) calc(12/335*100%);
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;

}

.kv_kikan_list .on {
  background: var(--color_red);
  color: var(--color_white);
}

.kv_kikan_list .kv_kikan_list_day {
  flex: 1;
  color: var(--color_brown);
}

#day {scroll-margin-top: 64px;}

.floating_btn {
  position: fixed;
  width: 132px;
  bottom: 0;
  left: 220px;
  right: 0;
  margin: 0 auto 20px;
  z-index: var(--z_floating);
}

/*--------------
TOP_ラカントとは
--------------*/
#sec_lakanto {
  background: url('../img/sec01_bg.jpg') no-repeat center / cover;
  padding: calc(40/375*100%) 0 calc(150/375*100%);
  position: relative;
  scroll-margin-top: 64px;
}

#sec_lakanto::after {
  content: "";
  background: url('../img/arch.png') no-repeat bottom center / cover;
  width: 100%;
  height: 88px;
  position: absolute;
  bottom: 0;
}

.sec_lakanto_contents {
  margin-top: calc(20/375*100%); 
}

.sec_lakanto_contents li + li {
  margin-top: calc(20/375*100%); 
}

.sec_lakanto_point01 {
  position: absolute;
  width: calc(115/375*100%);
  bottom:0;
  left:0;
  margin: 0 0 calc(45/375*100%) calc(16/375*100%);
  z-index: 5;
}

.sec_lakanto_point02 {
  position: absolute;
  width: calc(88/375*100%);
  bottom:0;
  right:0;
  margin: 0 calc(-14/375*100%) calc(82/375*100%) 0;
  z-index: 5;
}

/*--------------
TOP_このキャンペーンについて
--------------*/
#sec_cp {
  background: var(--color_white);
  position: relative;
  scroll-margin-top: 134px;
}

.sec_cp_ul {
  margin-top: calc(30/335*100%);
}

.sec_cp_ul + .sec_cp_ul {
  margin-top: calc(60/335*100%);
} 

.sec_cp_ul li + li {
  margin-top: calc(25/335*100%);
}

.sec_cp_image {
  margin-top: calc(40/375*100%);
}

.sec_cp_rankup {
  background: #FFF8E6;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--color_brown);
}

@media screen and (max-width: 374px) {
  .sec_cp_rankup {
    font-size: clamp(10px, 4.8vw, 1.8rem);
  }
}

/*--------------
TOP_応募方法
--------------*/
#sec_apply {
  background: #FFF8E6;
  padding: calc(55/375*100%) 0 calc(165/375*100%);
  position: relative;
  scroll-margin-top: 64px;
}

#sec_apply::after {
  content: "";
  background: url('../img/arch.png') no-repeat bottom center / cover;
  width: 100%;
  height: 88px;
  position: absolute;
  bottom: 0;
}

.step_ttl {
  display: flex;
  align-items: center;
  gap: calc(10/375*100%);
  margin-top: 20px;
}

.step_ttl_image {
  width: calc(96/375*100%);
}

.step_contents {
  display: flex;
  gap: calc(10/375*100%);
  margin-top: 20px;
  padding: 0 calc(20/375*100%);
}

.step_contents_image {
  width: calc(115/335*100%);
}

.step_contents + .step_ttl {margin-top: 30px;}

.sec_apply_point01 {
  position: absolute;
  width: calc(87/375*100%);
  bottom:0;
  left:0;
  margin: 0 0 calc(35/375*100%) calc(10/375*100%);
  transform: scaleX(-1);
  z-index: var(--z_floating);
}

.sec_apply_point02 {
  position: absolute;
  width: calc(49/375*100%);
  bottom:0;
  right:0;
  margin: 0 calc(20/375*100%) calc(68/375*100%) 0;
  z-index: var(--z_floating);
}


/*--------------
TOP_賞品・当選者数
--------------*/
#sec_win {
  background: var(--color_white);
  padding-bottom: calc(30/375*100%);
  position: relative;
  scroll-margin-top: 134px;
}

.sec_win_container {
  display: flex;
  flex-direction: column;
  gap:20px;
  margin-top: 30px;
}

.sec_win_ttl_wrap {
  width: calc(335/375*100%);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color_beige);
  border-radius: 4px;
  padding: 6px 0;
  gap: 10px;
  color: var(--color_brown);
  line-height: 1;
}

.sec_win_ttl {
  font-size: 16px;
  font-weight: 700;
}

@media screen and (max-width: 374px) {
  .sec_win_ttl {
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}

.sec_win_status {
  width: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--color_brown);
  color: var(--color_white);
  border-radius: 9999px;
  padding: 5px 0;
}

@media screen and (max-width: 374px) {
  .sec_win_status {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.sec_win_ttl_wrap .on {
  background: var(--color_red);
}

.sec_win_ttl_wrap .before {
  background: var(--color_white);
  color: var(--color_brown);
}


.sec_win_status_day {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color_brown);
  line-height: 1;
  text-align: center;
  margin: 15px auto 0;
}

@media screen and (max-width: 374px) {
  .sec_win_status_day {
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}


/* ===== アコーディオン全体 ===== */


    /* ===== アコーディオンアイテム ===== */
    .accordion-item {
      overflow: hidden;
      transition: 0.3s ease;
    }

    /* ===== ボタン（ヘッダー） ===== */
    .accordion-btn {
      width: 100%;
      border: none;
      cursor: pointer;
      padding: 15px 10px; /* 左右に余白を確保しアイコン分を右側に追加 */
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; /* テキストを中央揃え */
      text-align: center;
      transition: background 0.2s ease;
      border-radius: 9999px;
      margin: 10px auto 0;
      transition: var(--transition);
    }

    .accordion-btn.pro {background: var(--color_pro);}
    .accordion-btn.expert {background: var(--color_expert);}
    .accordion-btn.standard {background: var(--color_standard);}

    .accordion-btn_detail,
    .accordion-btn_close {
      border: none;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: 0.2s ease;
      margin: 10px auto 0;
      gap:5px;
      font-size: 16px;
      font-weight: 700;
      color: var(--color_brown);
      transition: var(--transition);
    }

    .accordion-btn_close {
      margin: 40px auto 0;
    }

    .accordion-btn_detail.pro::after,
    .accordion-btn_detail.expert::after,
    .accordion-btn_detail.standard::after,
    .accordion-btn_close.pro::after,
    .accordion-btn_close.expert::after,
    .accordion-btn_close.standard::after {
      content: "";
      width: 20px;
      height: 20px;
    }

    .accordion-btn_detail.pro::after {background: url('../img/btn_detail_pro.png') no-repeat center / contain;}
    .accordion-btn_detail.expert::after {background: url('../img/btn_detail_expert.png') no-repeat center / contain;}
    .accordion-btn_detail.standard::after {background: url('../img/btn_detail_standard.png') no-repeat center / contain;}
    .accordion-btn_close.pro::after {background: url('../img/close_pro.png') no-repeat center / contain;}
    .accordion-btn_close.expert::after {background: url('../img/close_expert.png') no-repeat center / contain;}
    .accordion-btn_close.standard::after {background: url('../img/close_standard.png') no-repeat center / contain;}

    @media (hover: hover) {
      .accordion-btn:hover, .accordion-btn_detail:hover {opacity: .5;}
      .accordion-btn:hover, .accordion-btn_close:hover {opacity: .5;}
    }


    /* テキスト */
    .accordion-btn-text {
      font-size: 2.0rem;
      font-weight: 700;
      color: var(--color_white);
      line-height: 1;
    }

    @media screen and (max-width: 374px) {
      .accordion-btn-text {
        font-size: clamp(10px, 5.333vw, 2.0rem);
      }
    }

    /* ===== アイコン「+」「-」(CSS製) ===== */
    .accordion-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* 横棒（共通） */
    .accordion-icon::before,
    .accordion-icon::after {
      content: '';
      position: absolute;
      background: var(--color_white);
      border-radius: 9999px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.35s ease, opacity 0.35s ease;
    }

    /* 横棒 */
    .accordion-icon::before {
      width: 16px;
      height: 2px;
    }

    /* 縦棒（「+」のみ表示 → 展開時に消える） */
    .accordion-icon::after {
      width: 2px;
      height: 16px;
      opacity: 1;
    }

    .accordion-item.is-open .accordion-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
      opacity: 0;
    }

    /* ===== コンテンツエリア ===== */
    .accordion-body {
      display: grid;
      grid-template-rows: 0fr; /* 高さ 0 で隠す */
      transition: grid-template-rows 0.4s ease;
    }

    .accordion-item.is-open .accordion-body {
      grid-template-rows: 1fr; /* 自然な高さに展開 */
    }

    /* overflow hidden で中身をクリップ */
    .accordion-body-inner {
      overflow: hidden;
    }

    .accordion-body-content {
      margin: 0;
      padding-bottom: 0;
    }

.sec_win_course_container {
  width: 100%;
  padding:calc(75/375*100%) calc(20/375*100%) 0;
  display: flex;
  flex-direction: column;
  gap:15px;
  position: relative;
}

.sec_win_course_container + .sec_win_course_container{margin-top: 10px;}

.sec_win_course_point01 {
  position: absolute;
  width: calc(54/375*100%);
  top:0;
  right:0;
  margin: calc(15/375*100%) calc(5/375*100%) 0 0;
  opacity: .4;
}

.sec_win_course_point02 {
  position: absolute;
  width: calc(121/375*100%);
  top:0;
  left:0;
  margin: calc(7/375*100%) 0 0 calc(-38/375*100%);
  opacity: .4;
}

.sec_win_course_point03 {
  position: absolute;
  width: calc(61/375*100%);
  top:0;
  right:0;
  margin: calc(-18/375*100%) calc(15/375*100%) 0 0;
  opacity: .4;
}

.sec_win_course_point04 {
  position: absolute;
  width: calc(128/375*100%);
  bottom:0;
  left:0;
  margin: 0 0 calc(-73/375*100%) calc(20/375*100%);
  opacity: .4;
}

.sec_win_course_image {
  width: 100%;
  position: relative;
  z-index: 1;
}

.sec_win_course_ttl {
  position: absolute;
  width: calc(240/335*100%);
  top:0;
  left:0;
  right:0;
  margin: calc(-22/335*100%) auto 0;
  z-index: 2;
}

.prize_name {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color_brown);
}

@media screen and (max-width: 374px) {
  .prize_name {
    font-size: clamp(10px, 6.4vw, 2.4rem);
  }
}

.sec_win_course_point_platinum,
.sec_win_course_point_gold,
.sec_win_course_point_silver {
  width: 100%;
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color_white);
  box-sizing: border-box;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.sec_win_course_point_platinum::before,
.sec_win_course_point_gold::before,
.sec_win_course_point_silver::before {
  content: "";
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.sec_win_course_point_platinum::before {border: 4px solid #5b7fb5;}
.sec_win_course_point_gold::before {border: 4px solid var(--color_pro);}
.sec_win_course_point_silver::before {border: 4px solid #8D9A9F;}

.sec_win_course_point_platinum_left,
.sec_win_course_point_gold_left,
.sec_win_course_point_silver_left {
  position: relative;
  margin-right: -1px;
  color: var(--color_white);
  text-align: center;
  padding: 10px 30px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    85% 100%,
    0% 100%
  );
}

@media screen and (max-width: 374px) {
  .sec_win_course_point_platinum_left,
  .sec_win_course_point_gold_left,
  .sec_win_course_point_silver_left {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.sec_win_course_point_platinum_left {background: #5579AC;}
.sec_win_course_point_gold_left {background: var(--color_pro);}
.sec_win_course_point_silver_left {background: #8D9A9F;}

.sec_win_course_point_platinum_left .point,
.sec_win_course_point_gold_left .point,
.sec_win_course_point_silver_left .point {
  font-family: var(--ff_qs);
  font-size: 3.2rem;
}

@media screen and (max-width: 374px) {
  .sec_win_course_point_platinum_left .point,
  .sec_win_course_point_gold_left .point,
  .sec_win_course_point_silver_left .point{
    font-size: clamp(10px, 8.53vw, 3.2rem);
  }
}

.sec_win_course_point_platinum_left .point span,
.sec_win_course_point_gold_left .point span,
.sec_win_course_point_silver_left .point span {
  font-size: 1.2rem;
}

@media screen and (max-width: 374px) {
  .sec_win_course_point_platinum_left .point span,
  .sec_win_course_point_gold_left .point span,
  .sec_win_course_point_silver_left .point span{
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.sec_win_course_point_platinum_right,
.sec_win_course_point_gold_right,
.sec_win_course_point_silver_right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .sec_win_course_point_platinum_right,
  .sec_win_course_point_gold_right,
  .sec_win_course_point_silver_right{
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}

.sec_win_course_point_platinum_right {color: #5579AC;}
.sec_win_course_point_gold_right {color: var(--color_pro);}
.sec_win_course_point_silver_right {color: #8D9A9F;}

.sec_win_course_point_platinum_right span,
.sec_win_course_point_gold_right span,
.sec_win_course_point_silver_right span {
  font-family: var(--ff_qs);
  font-size: 3.2rem;
}

@media screen and (max-width: 374px) {
  .sec_win_course_point_platinum_right span,
  .sec_win_course_point_gold_right span,
  .sec_win_course_point_silver_right span {
    font-size: clamp(10px, 8.57vw, 3.2rem);
  }
}


.course_container {
  display: flex;
  flex-direction: column;
  gap:55px;
  margin-top: 30px;
}

.course_container .course_pro {
  position: relative;
  border-radius: 10px;
  padding: calc(40/335*100%) calc(20/335*100%) calc(20/335*100%);
  box-sizing: border-box;
  border: 2px solid #E5BF58;
  background: #FFFBF0;
}

.course_container .course_expert {
  position: relative;
  border-radius: 10px;
  padding: calc(40/335*100%) calc(20/335*100%) calc(20/335*100%);
  box-sizing: border-box;
  border: 2px solid var(--color_expert);
  background: #F7F7F7;
}

.course_container .course_standard {
  position: relative;
  border-radius: 10px;
  padding: calc(40/335*100%) calc(20/335*100%) calc(20/335*100%);
  box-sizing: border-box;
  border: 2px solid var(--color_standard);
  background: #FFF8FA;
}

#course-pro,
#course-expert,
#course-standard {
  scroll-margin-top: 89px; /* 固定ヘッダーの高さ */
}

.course_ttl {
  position: absolute;
  width: calc(280/335*100%);
  top: 0;
  left: 0;
  right: 0;
  margin: calc(-15/335*100%) auto 0;
}

.course_point {
  position: relative;
  font-size: 4.0rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--ff_qs);
  text-align: center;
  display: block;
}

@media screen and (max-width: 374px) {
  .course_point {
    font-size: clamp(10px, 10.666vw, 4.0rem);
  }
}

.course_point span {
  font-size: 55%;
}

.course_point::before,
.course_point::after {
  content:"";
  position: absolute;
  background: url('../img/point_kira.png') no-repeat center / contain;
  width: calc(49/295*100%);
  height: 26px;
  top: 0;
  bottom:0;
  margin: auto 0 auto calc(20/295*100%);
}

.course_point::before {
  left:0;
  margin: auto 0 auto calc(20/295*100%);
}

.course_point::after {
  right:0;
  margin: auto calc(20/295*100%) auto 0 ;
  transform: scale(-1, 1);
}

.course_point.pro {color: var(--color_pro);}
.course_point.expert {color: var(--color_expert);}
.course_point.standard {color: var(--color_standard);}

.course_lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color_brown);
  text-align: center;
  margin-top: calc(15/295*100%);
}

@media screen and (max-width: 374px) {
  .course_lead {
    font-size: clamp(10px, 4.2666vw, 1.6rem);
  }
}

.course_lead_image {
  margin: calc(15/295*100%) auto 0;
}

.shouhin_conatiner {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.shouhin_conatiner .shouhin_pro,
.shouhin_conatiner .shouhin_expert,
.shouhin_conatiner .shouhin_standard {
  padding: 0 0 40px 0;
  margin: 0 0 40px 0;
  border-radius: 0;
}

.shouhin_conatiner .shouhin_pro {
  border-bottom: 1px solid var(--color_pro);
}

.shouhin_conatiner .shouhin_expert {
  border-bottom: 1px solid var(--color_expert);
}

.shouhin_conatiner .shouhin_standard {
  border-bottom: 1px solid var(--color_standard);
}

.shouhin_conatiner .shouhin_pro:last-child,
.shouhin_conatiner .shouhin_expert:last-child,
.shouhin_conatiner .shouhin_standard:last-child {
  padding: 0 0 0 0;
  margin: 0;
  border-bottom: none;
}

.shouhin_ttl {
  font-size: 2.0rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  color: var(--color_brown);
  margin-top: 15px;
}

@media screen and (max-width: 374px) {
  .shouhin_ttl {
    font-size: clamp(10px, 5.3333vw, 2.0rem);
  }
}

.shouhin_number_wrap {
  width:  100%;
  display: flex;
  align-items: stretch; 
  margin: 20px auto 0;
}

.shouhin_number_wrap + .shouhin_number_wrap {
  margin-top: 10px;
}

.shouhin_number_ttl_pro,
.shouhin_number_ttl_expert,
.shouhin_number_ttl_standard {
  width: 40%;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color_white);
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
}

@media screen and (max-width: 374px) {
  .shouhin_number_ttl_pro,
  .shouhin_number_ttl_expert,
  .shouhin_number_ttl_standard {
    font-size: clamp(10px, 4.8vw, 1.8rem);
  }
}

.shouhin_number_ttl_pro {background: var(--color_pro);}
.shouhin_number_ttl_expert {background: var(--color_expert);}
.shouhin_number_ttl_standard {background: var(--color_standard);}

.shouhin_number_text_pro,
.shouhin_number_text_expert,
.shouhin_number_text_standard {
  flex:1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  color: var(--color_brown);
  background: var(--color_white);
  border-radius: 0 10px 10px 0;
  padding: 5px 5px 10px 15px;
}

@media screen and (max-width: 374px) {
  .shouhin_number_text_pro,
  .shouhin_number_text_expert,
  .shouhin_number_text_standard {
    font-size: clamp(10px, 4.8vw, 1.8rem);
  }
}

.shouhin_number_text_pro span,
.shouhin_number_text_expert span,
.shouhin_number_text_standard span {
  font-size: 177.777%;
}

.shouhin_number_text_pro {border: 2px solid var(--color_pro);}
.shouhin_number_text_expert {border: 2px solid var(--color_expert);}
.shouhin_number_text_standard {border: 2px solid var(--color_standard);}


/*--------------
TOP_さらに当選確率2倍！
--------------*/
#sec_more {
  background: #FFF8E6;
  position: relative;
  padding: calc(115/375*100%) 0 calc(60/375*100%);
  scroll-margin-top: -24px;
}

#sec_more::before {
  content: "";
  width: 100%;
  height: 88px;
  background: url('../img/arch.png') no-repeat top center / cover;
  transform: scaleY(-1);
  position: absolute;
  top:0;
  left:0;
  right: 0;
}

.sec_more_point {
  position: absolute;
  width: calc(120/375*100%);
  transform: rotate(-0deg);
  top:0;
  right: 0;
  margin: 0px 20px 0 0;
}

.sec_more_ttl {
  padding-top: 0;
}

@media screen and (max-width: 374px) {
  .sec_more_ttl {
    padding-top: calc(20/375*100%)
  }
}

.more_container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap:20px;
}

.more_list {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

@media (hover: hover) {
  .more_list:hover {opacity: .5;}
}

.more_list_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #F4E3C9;
  border-radius: 4px 4px 0 0;
  padding: 6px 0;
}

.more_list_no {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color_brown);
}

@media screen and (max-width: 374px) {
  .more_list_no {
    font-size: clamp(10px, 4.2666vw, 1.6rem);
  }
}

.more_lis_status_fin,
.more_lis_status_on,
.more_lis_status_before {
  width: 5em;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-radius: 9999px;
  color: var(--color_white);
}

@media screen and (max-width: 374px) {
  .more_lis_status_fin,
  .more_lis_status_on,
  .more_lis_status_before {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.more_lis_status_fin {background: var(--color_white); color: var(--color_brown);}
.more_lis_status_on {background: var(--color_red);}
.more_lis_status_before {background: var(--color_brown);}

.more_list_contents {
  display: flex;
  background: var(--color_white);
  border-radius: 0 0 4px 4px;
  align-items: center;
  gap: 5px;
  padding: 10px;
  position: relative;
}

.more_list_contents::after {
  position: absolute;
  content:  "";
  background: url('../img/arrow_brown02.png') no-repeat center / contain;
  width: 20px;
  height: 20px;
  top:0;
  bottom: 0;
  right: 0;
  margin: auto 8px auto 0 ;
}

@media screen and (max-width: 374px) {
  .more_list_contents::after {
    width: 5.333vw;
    height: 5.333vw;
  }
}

.more_list_image {
  width: calc(69/315*100%);
}

.more_list_text {
  flex:1;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
  color: var(--color_brown);
}

@media screen and (max-width: 374px) {
  .more_list_text {
    font-size: clamp(10px, 4.2666vw, 1.6rem);
  }
}

.more_list_text span {
  font-size: 15px;
}

@media screen and (max-width: 374px) {
  .more_list_text span {
    font-size: clamp(10px, 4vw, 1.5rem);
  }
}

/*--------------
TOP_オープン記念コース
--------------*/
#sec_open {
  background: url('../img/kv_bg.jpg') repeat center / auto;
  position: relative;
  padding: calc(20/375*100%) 0 calc(60/375*100%);
  scroll-margin-top: 64px;
}

.sec_open_point01 {
  position: absolute;
  width: calc(64/375*100%);
  top:0;
  left:0;
  margin: calc(-34/375*100%) 0 0 calc(15/375*100%);
}

.sec_open_point02 {
  position: absolute;
  width: calc(110/375*100%);
  bottom:0;
  right: 0;
  margin: 0 8px -33px 0;
}

.sec_open_container {
  background: var(--color_white);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  padding: 25px 0 40px;
}

.sec_open_ttl {
  font-size: 2.0rem;
  line-height: 1.3;
  color: var(--color_brown);
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap:10px;
}

@media screen and (max-width: 374px) {
  .sec_open_ttl {
    font-size: clamp(10px, 5.3vw, 2.0rem);
  }
}

.sec_open_ttl::before,
.sec_open_ttl::after {
  content: "";
  background: url("../img/slash.png") no-repeat center / contain;
  width: 21px;
  height: 47px;
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 374px) {
  .sec_open_ttl::before,
  .sec_open_ttl::after {
    width: 5.6vw;
    height: 12.5333vw;
  }
}

.sec_open_ttl::before {
  left: 0;
  margin: auto 0 auto 37px;
}

@media screen and (max-width: 374px) {
  .sec_open_ttl::before {
    margin: auto 0 auto 9.866vw;
  }
}

.sec_open_ttl::after {
  right: 0;
  margin: auto 37px auto 0;
  transform:scale(-1, 1);
}

@media screen and (max-width: 374px) {
  .sec_open_ttl::after {
    margin: auto 9.866vw auto 0;
  }
}

.sec_open_point {
  width: calc(250/335*100%);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap:2px;
  overflow: hidden;
  border-radius: 10px;
}

.sec_open_touroku,
.sec_open_receipt,
.sec_open_oubo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 7px calc(15/250*100%) 10px;
  gap:10px;
  color:var(--color_white);
  font-weight: 700;
  line-height: 1;
}

.sec_open_touroku {background: #F23855;}
.sec_open_receipt {background: #F3981C;}
.sec_open_oubo {background: #92D651;}

.first_ttl {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 374px) {
  .first_ttl {
    font-size: clamp(10px, 4.2666vw, 1.6rem);
  }
}

.first_point {
  font-size: 2.0rem;
  font-family: var(--ff_qs);
}

@media screen and (max-width: 374px) {
  .first_point {
    font-size: clamp(10px, 5.3333vw, 2.0rem);
  }
}

.first_point span {
  font-size: 140%;
}

.sec_open_bounus {
  /* margin: 15px auto 0; */
  margin: 15px auto;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color_red);
  position: relative;
}

@media screen and (max-width: 374px) {
  .sec_open_bounus {
    font-size: clamp(10px, 6.4vw, 2.4rem);
  }
}

.sec_open_bounus span {font-size: 133.3333%;}

.sec_open_bounus span.qs_large {
  font-size: 183.333%;
  font-family: var(--ff_qs);
}

.sec_open_bounus span.qs_small {
  font-size: 133.3333%;
  font-family: var(--ff_qs);
}

.sec_open_bounus::before,
.sec_open_bounus::after {
  content:"";
  position: absolute;
  background: url("../img/point_kira02.png") no-repeat center / contain;
  width: 41px;
  height: 69px;
  bottom: 0;
}

@media screen and (max-width: 374px) {
  .sec_open_bounus::before,
  .sec_open_bounus::after {
    width: 10.93333vw;
    height: 18.4vw;
  }
}

.sec_open_bounus::before {
  left: 0;
  margin: 0 0 0 calc(16/335*100%);
}

.sec_open_bounus::after {
  right: 0;
  margin: 0 calc(16/335*100%) 0 0;
  transform: scale(-1, 1);
}

.sec_open_flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap:15px;
  margin-top: 15px;
  padding: 0 calc(20/315*100%) calc(20/315*100%);
}

.lottery_text {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color:var(--color_red)
}

@media screen and (max-width: 374px) {
  .lottery_text {
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}

.lottery_text span {
  font-family: var(--ff_qs);
  font-size: 3.2rem;
}

@media screen and (max-width: 374px) {
  .lottery_text span {
    font-size: clamp(10px, 8.53vw, 3.2rem);
  }
}

/*--------------
TOP_キャンペーン対象商品
--------------*/
#sec_products {
  background: #FFF8E6;
  padding: calc(50/375*100%) 0 calc(40/375*100%);
  scroll-margin-top: 64px;
}

/* ----- スワイパー ----- */

.products_swiper {
  width: 100%;
  margin: 25px auto 0;
  padding: 20px 0 80px;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}

.products_text_conversion {
  position: absolute;
  font-size: 1.6rem;
  line-height: 1.4375;
  font-weight: 700;
  color: var(--color_red);
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 20px;
}

.products_swiper_body {
  width: 100%;
  padding:0;
}

.products_swiper_main {
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: auto;
  padding:0;
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--ff_noto);
  gap:5px;
  margin: 0 ;
}

@media screen and (max-width: 374px) {
  .swiper-slide {
    font-size: clamp(10px, 3.73vw, 1.4rem);
  }
}

.swiper-slide .name {
  margin-top: 10px;
}

.swiper-slide .point {
  color:var(--color_red);
  text-align: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  padding:0;
}

.products_swiper_pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;  
  margin: 0 auto -43px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.products_swiper_pagination .swiper-pagination-bullet {
  width: 8px;
  height: auto;
  aspect-ratio: 1/1;
  margin: 0 !important;
  background: #F4E3C9;
  opacity: 1;
}

.products_swiper_pagination .swiper-pagination-bullet-active {
  background: var(--color_standard);
}

.products_swiper_prev,
.products_swiper_next {
  width: 20px;
  height: auto;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-top: 0;
  top:  105.5%;
  /* top: 50%; */
  /* transform: translateY(-50%); */
  z-index: 3;
}

/* デフォルトの矢印を消す */
.products_swiper_prev::after,
.products_swiper_next::after {
  display: none;
}

/* 左矢印 */
.products_swiper_prev {
  left: 80px;
  background: url("../img/swiper_l.png") no-repeat center / contain;
}

/* 右矢印 */
.products_swiper_next {
  right: 80px;
  background: url("../img/swiper_r.png") no-repeat center / contain;
}

/* ----- スワイパー ここまで ----- */

.slide_kcal,
.slide_point {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  font-family: var(--ff_noto);
  text-align: center;
  font-size: 14px;
}

.slide_kcal {
  border: 1px solid #F4E3C9;
  margin-top: 10px;
}

.slide_point {
  border: 1px solid #FDE7EA;
  margin-top: 5px;
}

.slide_kcal_ttl,
.slide_point_ttl {
  width: 100%;
  padding: 5px 0;
}

.slide_kcal_ttl{background: #F4E3C9;}
.slide_point_ttl {background: #FDE7EA;}

.slide_contents_text {
  width: 100%;
  background: var(--color_white);
  padding: 5px 0;
}

/*--------------
TOP_応募要項
--------------*/
#sec_oubo {
  background: var(--color_white);
  padding: calc(45/375*100%) 0 calc(80/375*100%);
  scroll-margin-top: 64px;
}

.scroll_area {
  border: 1px solid #E0E0E0;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 300px;
  padding: 1em;
  margin-top: 15px;
}

.scroll_area + h2 {margin-top: 45px;}

#riyou {scroll-margin-top: 94px;}

/*--------------
TOP_ログイン
--------------*/
#sec_login {
  background: #FFF8E6;
  padding: 50px 0 80px;
  scroll-margin-top: 64px;
}

.login_flex {
  display: flex;
  flex-direction: column;
  gap:25px;
}

.login_ttl {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--color_brown);
  margin-bottom: 10px;
}

@media screen and (max-width: 374px) {
  .login_ttl {
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}

/*--------------
login_メールアドレスでログイン
--------------*/
.mail_container {
  padding: 25px 0 20px;
}

.mail_flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:20px;
}

.mail_wrap {
  background: var(--color_white);
  padding: 15px 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:20px;
}

.form_wrap {
  background: var(--color_white);
  padding: 15px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:20px;
  border-radius: 4px;
}


/*--------------
mypagen_マイページ
--------------*/

.sec_mypage {
  background: #FFF8E6;
  padding: 0 0 calc(138/375*100%);
  position: relative;
}

.sec_mypage::after {
  content: "";
  background: url('../img/arch.png') no-repeat bottom center / cover;
  width: 100%;
  height: 88px;
  position: absolute;
  bottom: 0;
}

.mypage_kv {
  display: flex;
  justify-content: center;
  gap:calc(10/375*100%);
  padding-top: 20px;
}

.mypage_kv_image {
  width: calc(137/375*100%);
}

.mypage_kv_image img {
  width: calc(97/137*100%);
  margin: 0 0 0 auto ;
}

.mypage_kv_rank {
  display: flex;
  flex-direction: column;
  gap:15px;
  color: var(--color_brown);
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
}

@media screen and (max-width: 374px) {
  .mypage_kv_rank {
    font-size: clamp(10px, 4.26vw, 1.6rem);
  }
}

.mypage_kv_rank .rank_image {
  max-width: 163px;
  margin: 0 auto;
}

.mypage_kv_rank .cal {
  font-size: 5.8rem;
  font-family: var(--ff_qs);
}

@media screen and (max-width: 374px) {
  .mypage_kv_rank .cal {
    font-size: clamp(10px, 15.4vw, 5.8rem);
  }
}

.mypage_kv_rank .cal span {
  font-size: 20px;
}

.mypage_container {
  width: 100%;
  background: var(--color_white);
  border-radius: 10px;
  box-sizing: border-box;
  padding: calc(20/335*100%) calc(20/335*100%) calc(30/335*100%);
  position: relative;
  z-index: 1;
}

.mypage_wrap {
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap:15px;
}

.mypage_point_image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:10px;
}

.mypage_point_image li {
  width: 54px;
}

.mypage_point_box {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color_brown);
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.mypage_point_ttl {
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .mypage_point_ttl {
    font-size: clamp(10px, 5.3333vw, 2.0rem);
  }
}

.mypage_point {
  font-size: 4.0rem;
  font-weight: 700;
  line-height: 1;
  font-family: var(--ff_qs);
}

@media screen and (max-width: 374px) {
  .mypage_point {
    font-size: clamp(10px, 10.6vw, 4.0rem);
  }
}

.mypage_point span {
  font-size: 55%;
}

.mypage_detail {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}

.mypage_detail_box {
  width: 50%;
}

.mypage_detail_box:first-child {
  border-right: 1px solid #E0E0E0;
}

.mypage_detail_box p {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 374px) {
  .mypage_detail_box p {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.mypage_detail_box .plus {
  max-width: 7em;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color_red);
  background: #FFEAED;
  border-radius: 5px;
  padding: 5px 0;
  margin: 10px auto 0;
  display: block;
}

@media screen and (max-width: 374px) {
  .mypage_detail_box .plus {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.mypage_detail_box .check {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 15px auto;
}

.mypage_detail_box .check li {
  width: 30px;
}

.btn_detail {
  max-width: 7em;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  margin: 0 auto;
  padding: 10px 0;
  color: var(--color_brown);
  border: 1px solid var(--color_brown);
  border-radius: 9999px;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn_detail:hover {
  opacity: .5
}


@media screen and (max-width: 374px) {
  .btn_detail {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.mypage_btn_container {
  max-width: 295px;
  width: 100%;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:11px;
}

.mypage_btn_container li {
  max-width: 142px;
  width: 100%;
}

.btn_mypage {
  width: 100%;
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: var(--color_white);
  text-decoration: none;
  background: var(--color_brown);
  border-radius: 9999px;
  padding: 12px 0;
}

@media screen and (max-width: 374px) {
  .btn_mypage {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.sec_mypage_flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap:15px;
  margin-top: 15px;
  padding: 0 calc(20/315*100%) calc(40/315*100%);
}

.sec_mypage_point02 {
  position: absolute;
  width: calc(98/375*100%);
  bottom:0;
  right: 0;
  margin: 0 8px 36px 0;
}

.mypage_lank_pro {background: url('../img/mypage_pro_bg.png') no-repeat center top / cover;}
.mypage_lank_expert {background: url('../img/mypage_expert_bg.png') no-repeat center top / cover;}
.mypage_lank_standard {background: url('../img/mypage_standard_bg.png') no-repeat center top / cover;}
.mypage_lank_beginner {background: url('../img/mypage_beginner_bg.png') no-repeat center top / cover;}

.mypage_lank_kcal {
  padding-top: calc(90/375*100%);
  text-align: center;
  font-size: 6.0rem;
  font-family: var(--ff_qs);
  font-weight: 700;
  line-height: 1;
  color: var(--color_white);
}

@media screen and (max-width: 374px) {
  .mypage_lank_kcal {
    font-size: clamp(1.0rem, 16vw, 6.0rem);
  }
}

.mypage_lank_kcal span {
  font-size: 40%;
}

.mypage_lank_next {
  margin-top: calc(105/375*100%);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  color: var(--color_brown);
}

@media screen and (max-width: 374px) {
  .mypage_lank_next {
    font-size: clamp(1.0rem, 4.2666vw, 1.6rem);
  }
}

.mypage_lank_next span {
  color: #FFF8E6;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  pointer-events: none;
}

.mypage_message_wrap {
  position: relative;
}

.mypage_message_image {
  width: calc(335/375*100%);
  margin: calc(9/375*100%) auto 0;
}

.mypage_message_point01 {
  position: absolute;
  width: calc(28/375*100%);
  top:0;
  right: 0;
  margin: calc(-18/375*100%) calc(13/375*100%) 0 0 ;
}

.mypage_message_point02 {
  position: absolute;
  width: calc(53/375*100%);
  top:0;
  left: 0;
  margin: calc(9/375*100%) 0 0 calc(-12/375*100%) ;
}

.mypage_message_point03 {
  position: absolute;
  width: calc(77/375*100%);
  bottom:0;
  right: 0;
  margin: 0 calc(-25/375*100%) calc(-18/375*100%) 0 ;
}

.mypage_get_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.mypage_get_box li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  background: var(--color_red);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color_white);
  padding: calc(10/295*100%);
}

@media screen and (max-width: 374px) {
  .mypage_get_box li {
    font-size: clamp(1.0rem, 4.2666vw, 1.6rem);
  }
}

.mypage_get_box li.done {
  background: #CCCCCC;
  position: relative;
}

.mypage_get_box li.done::after {
  content: "獲得済";
  background: var(--color_white);
  color: #CCCCCC;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 9999px;
  width: 5em;
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  margin: auto 10px auto 0;
}

@media screen and (max-width: 374px) {
  .mypage_get_box li.done::after {
    font-size: clamp(10px, 3.2vw 1.2rem);
  }
}

/*--------------
問い合わせ
--------------*/

.toiawase_ttl {
  background: var(--color_brown);
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  color: var(--color_white);
  font-family: var(--ff_noto);
}

@media screen and (max-width: 374px) {
  .toiawase_ttl  {
    font-size: clamp(10px, 3.733vw, 2.8rem);
  }
}

.toiawase_wrap {
  background: #FFF8E6;
  padding: calc(20/375*100%);
  color: var(--color_brown);
  display: flex;
  flex-direction: column;
  gap:15px;
}

.text18_b {
  font-size: 18px;
  font-weight: 700;
}

/* ▽ モーダル --------------*/

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* ←これが効くようにする */
}

/* 表示時だけflex */
.modal.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 背景 */
.modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(51, 51, 51, 0.9);
}

/* 中身 */
.modal_content {
  position: relative;
  width: 100%;
  max-width: 335px;
  max-height: 70vh;
  background: var(--color_white);
  border-radius: 10px;
  /* overflow: hidden; */
  overflow: visible;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: -58px;
}

.modal_content.-detail {
  padding: 10px 5px ;
}

/* スクロール領域 */
.modal_body {
  /* padding: 20px; */
  overflow-y: auto;
  /* max-height: calc(80vh - 60px);  */
  flex: 1;
}

/* 閉じるボタン */
.modal_close {
  width: 125px;
  background: var(--color_white);
  border-radius: 9999px;
  border: 1px solid var(--color_brown);
  box-sizing: border-box;
  position: absolute;
  font-size: 16px;
  color: var(--color_brown);
  line-height: 1;
  font-weight: 500;
  text-align: center;
  padding: 10px 0 ;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0 auto -58px;
  transition: var(--transition);
}

.modal_close:hover {opacity: .5;}

.modal_close::after {
  content: "";
  position: absolute;
  background: url('../img/close.png') no-repeat center / contain;
  width: 8px;
  height: 8px;
  z-index: 3;
  top:0;
  bottom:0;
  right:0;
  margin: auto 10px auto 0 ;
}

.modal_scroll_wrap {
  padding: 15px 10px;
}


/*--------------
oubo_history_応募履歴
--------------*/
.sec_oubo_history {
  padding-bottom: 20px;
}

.oubo_history_container {
  display: flex;
  flex-direction: column;
  font-family: var(--ff_noto);
  font-size: 1.6rem;
}

@media screen and (max-width: 374px) {
  .oubo_history_container {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.oubo_history_container li {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap:1em;
  padding: 25px 10px;
  border-bottom: 1px solid #E0E0E0;
}

.oubo_history_container li .time {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

@media screen and (max-width: 374px) {
  .oubo_history_container li .time {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

/*--------------
receipt_history_レシート登録履歴
--------------*/
.sec_receipt_history {
  padding-bottom: 20px;
}

.receipt_history_container {
  display: flex;
  flex-direction: column;
  font-family: var(--ff_noto);
}

.receipt_history_container li.wrapper {
  display: flex;
  flex-direction: column;
  gap:10px;
  padding: 20px 0;
  border-bottom: 1px solid #E0E0E0;
}

.receipt_history_container li .time {
  font-size: 1.4rem;
}

@media screen and (max-width: 374px) {
  .receipt_history_container li .time {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.receipt_history_wrap {
  display: flex;
  justify-content: center;
  gap:calc(20/335*100%)
}

.receipt_history_image {
  width: calc(98/335*100%);
  height: 98px;
  position: relative;
  display: block;
  transition: var(--transition);
  cursor: pointer;
}

.receipt_history_image:hover {
  opacity: .5;
}

.receipt_history_btn_modal {
  width: calc(22/98*100%);
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 4px 4px 0;
}

.receipt_history_contents {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
}

.receipt_history_contents .point {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 374px) {
  .receipt_history_contents .point {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.receipt_history_contents .point span {
  font-size: 2.4rem;
}

@media screen and (max-width: 374px) {
  .receipt_history_contents .point span {
    font-size: clamp(10px, 6.4vw, 2.4rem);
  }
}

.receipt_history_date {
  display: flex;
  flex-direction: column;
  gap:5px;
}

.receipt_history_date p {
  font-size: 1.4rem;
  line-height: 1.4;
}

@media screen and (max-width: 374px) {
  .receipt_history_date p {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.receipt_history_tabel {
  width: 100%;
  display: flex;
  justify-content:center ;
  align-items: center;
  border: 1px solid var(--color_beige);
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 374px) {
  .receipt_history_tabel {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.receipt_history_tabel .ryou {
  width: 50%;
  background: var(--color_beige);
  padding: 5px 0;
}

.receipt_history_tabel .cal {
  width: 50%;
  padding: 5px 0;
}


/*--------------
touroku_新規登録
--------------*/
.sec_touroku {
  padding-bottom: 20px;
}

/* ===== ボタン非活性 ===== */
.btn_container.is-disabled a {
  background-color: #E0E0E0;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color_white);
}


/* ===== 同意チェックボックス ===== */
.agree_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 25px 10px;
  background: #F2F2F2;
  margin-top: 40px;
}

.agree_check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 500;
  cursor: pointer;
}

.agree_check p,
.agree_check .agree_text {
  font-family: var(--ff_noto);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75;
}

@media screen and (max-width: 374px) {
  .agree_check p,
  .agree_check .agree_text {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

/* 元のinputを非表示 */
.agree_check input {
  display: none;
}

/* カスタムチェックボックス */
.checkmark {
  width: 30px;
  height: 30px;
  min-width: 30px; /* 追加：テキスト量でつぶれないように */
  aspect-ratio: 1/1;
  border: 2px solid #b7b7b7;
  background-color: var(--color_white);
  position: relative;
}

/* チェック時のレ点 */
.agree_check input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 2px;
  width: 10px;
  height: 16px;
  border-right: 3px solid var(--color_red);
  border-bottom: 3px solid var(--color_red);
  transform: rotate(45deg);
}

/*--------------
touroku_input 新規登録
--------------*/
.input_container {
  padding: 0 0 20px;
  background: #FFF8E6;
}

/*--------------
present プレゼント応募
--------------*/
.sec_present01{
  background: var(--color_white);
  padding-bottom: 20px;
}
.present_image_container {
  display: flex;
  justify-content: center;
  gap:calc(10/335*100%);
  margin-top: 20px;
}

.present_image {
  width: calc(134/335*100%);
}

.present_contents {
  width: calc(191/335*100%);
  display: flex;
  flex-direction: column;
}

.present_contents .rank {
  font-size: 1.2rem;
  font-family: var(--ff_noto);
  font-weight: 400;
  line-height: 1.4;
}

@media screen and (max-width: 374px) {
  .present_contents .rank {
    font-size: clamp(10px, 3.428vw, 1.2rem);
  }
}

.present_contents .name {
  font-size: 1.6rem;
  font-family: var(--ff_noto);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 6px;
}

@media screen and (max-width: 374px) {
  .present_contents .name {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.present_contents .name span {
  font-size: 1.2rem;
  font-weight: 400;
}

@media screen and (max-width: 374px) {
  .present_contents .name span {
    font-size: clamp(10px, 3.428vw, 1.2rem);
  }
}

.present_point_wrap {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color_beige);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-size: 1.6rem;
  text-align: center;
  font-family: var(--ff_noto);
  margin-top: 12px;
}

@media screen and (max-width: 374px) {
  .present_point_wrap {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.present_point_wrap .present_point_ttl {
  flex:1;
  text-align: center;
  padding: 3px 0;
  background: var(--color_beige);
}

.present_point_wrap .present_point {
  text-align: center;
  padding: 3px 10px;
}

.sec_present02{
  background: #FFF8E6;
  padding-top: 25px;
  padding-bottom: 20px;
}

/*--------------
receipt レシート確認
--------------*/

.receipt_container {
  padding: 0 0 20px;
  background: #FFF8E6;
}

.receipt_status {
  width: 100%;
  background: var(--color_white);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color_brown);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin-top: 40px;
}

.receipt_status .kcal {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.0rem;
  padding: 25px 0;
  gap:15px;
}

@media screen and (max-width: 374px) {
  .receipt_status .kcal {
    font-size: clamp(10px, 5.333vw, 2.0rem);
  }
}

.receipt_status .kcal .num {
  font-size: 5.8rem;
  font-family: var(--ff_qs);
}

@media screen and (max-width: 374px) {
  .receipt_status .kcal .num  {
    font-size: clamp(10px, 15.466vw, 5.8rem);
  }
}

.receipt_status .kcal .num span {
  font-size: 2.0rem;
}

@media screen and (max-width: 374px) {
  .receipt_status .kcal .num span {
    font-size: clamp(10px, 5.333vw, 2.0rem);
  }
}

.receipt_status .point {
  width: 100%;
  border-radius: 0 0 10px 10px;
  background: #FFEAED;
  border: 2px solid var(--color_white);
  padding: 15px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2.0rem;
  gap: 20px;
}

@media screen and (max-width: 374px) {
  .receipt_status .point {
    font-size: clamp(10px, 5.333vw, 2.0rem);
  }
}

.receipt_status .point span {
  font-size: 4.0rem;
  font-family: var(--ff_qs);
}

@media screen and (max-width: 374px) {
  .receipt_status .point span {
    font-size: clamp(10px, 10.666vw, 4.0rem);
  }
}

.receipt_please {
  width: 100%;
  background: var(--color_white);
  border: 2px solid var(--color_red);
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color_red);
  font-family: var(--ff_noto);
  gap: 15px;
  border-radius: 4px;
  margin-top: 40px;
}

.receipt_please .ttl {
  font-size: 20px;
  text-align: center;
  font-weight: 700;
}

@media screen and (max-width: 374px) {
  .receipt_please .ttl {
    font-size: clamp(10px, 5.333vw, 2.0rem);
  }
}

.receipt_confirm_image {
  max-width: 200px;
  margin:  0 auto;
}

.receipt_confirm_buy {
  width: 100%;
  display: flex;
  justify-content: center;
  gap:calc(10/295*100%);
}

.receipt_confirm_buy_image {
  width: calc(98/295*100%);
}

.receipt_confirm_buy_contents {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap:10px;
  font-family: var(--ff_noto);
  line-height: 1.4;
}

.receipt_confirm_buy_contents p {
  font-size: 1.4rem;
}

@media screen and (max-width: 374px) {
  .receipt_confirm_buy_contents p  {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.receipt_confirm_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
  border: 1px solid var(--color_beige);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

@media screen and (max-width: 374px) {
  .receipt_confirm_box  {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.receipt_confirm_box .ttl{
  width: 50%;
  padding: 5px 0;
  background-color: var(--color_beige);
}

.receipt_confirm_box .num{
  width: 50%;
  padding: 5px 0;
  background-color: var(--color_white);
}

.receipt_confirm_buy_contents .dust {
  width: 40px;
  display: block;
  margin: 0 0 0 auto;
}

.receipt_confirm_buy + .receipt_confirm_buy{
  border-top: 1px dotted #E0E0E0;
  padding-top: 20px;
}

.receipt_confirm_buy_container{
  border-top: 1px dotted #E0E0E0;
  margin-top: 20px;
}

.btn_upload {
  width: calc(240/335*100%);
  margin: 40px auto;
  font-family: var(--ff_noto);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  padding: 15px;
  border-radius: 9999px;
  background: var(--color_brown);
  display: block;
  color: var(--color_white);
  transition: var(--transition);
  cursor: pointer;
}

@media screen and (max-width: 374px) {
  .btn_upload {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.btn_upload:hover {
  opacity: .5;
}

.input_receipt_wrap {
  width: calc(240/335*100%);
  margin: 40px auto;
  font-family: var(--ff_noto);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  padding: 15px;
  border-radius: 9999px;
  background: var(--color_brown);
  display: block;
  color: var(--color_white);
}

@media screen and (max-width: 374px) {
  .input_receipt_wrap {
    font-size: clamp(10px, 4.266vw, 1.6rem);
  }
}

.bad_ttl {
  font-family: var(--ff_noto);
  font-size: 2.0rem;
  color: var(--color_standard);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  gap:8px;
}

@media screen and (max-width: 374px) {
  .bad_ttl {
    font-size: clamp(10px, 5.333vw, 2.0rem);
  }
}

.bad_ttl::before {
  content:"";
  background: url('../img/bad.png') no-repeat center / contain;
  width: 22px;
  height:22px;
}

.bad_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.bad_wrap li {
  width: calc(91/295*100%);
}

.bad_wrap li p {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 10px;
  font-family: var(--ff_noto);
}

@media screen and (max-width: 374px) {
  .bad_wrap li p {
    font-size: clamp(10px, 3.733vw, 1.4rem);
  }
}

.btn_point_list {
  position: absolute;
  top:0;
  right:0;
  font-family: var(--ff_noto);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color_white);
  text-align: center;
  background: var(--color_brown);
  border-radius: 9999px;
  padding: 0px 15px;
  text-decoration: none;
  margin: 20px 20px 0 0;
  padding: 5px 15px;
  display: block;
}

@media screen and (max-width: 374px) {
  .btn_point_list {
    font-size: clamp(10px, 3.2vw, 1.2rem);
  }
}

.select_flex {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn_tuika {
  width: calc(125/295*100%);
  margin: 0 auto;
  background: var(--color_red);
  text-align: center;
  color: var(--color_white);
  line-height: 1;
  font-family: var(--ff_noto);
  font-weight: 700;
  padding: 10px 0;
  text-decoration: none;
  border-radius: 9999px;
}

/* =============================
   購入日カレンダー
============================= */
.calendar_wrap {
  /* border: 1px solid #e0d5c8; */
  /* border-radius: 8px; */
  overflow: hidden;
  background: #fff;
  font-family: var(--ff_noto);
}

.calendar_display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  /* border-bottom: 1px solid #e0d5c8; */
  cursor: pointer;
}

.calendar_input {
  border: none;
  outline: none;
  font-size: 14px;
  color: #999;
  background: transparent;
  cursor: pointer;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
}

.calendar_input.is_selected {
  color: #333;
}

/* 矢印アイコン（∧） */
.calendar_arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: rotate(-45deg);
  margin-top: 4px;
  flex-shrink: 0;
}

/* =============================
   Flatpickr カスタムスタイル
============================= */
/* inputは非表示にしてカレンダーだけ見せる */
.calendar_inner input {
  display: none;
}

/* カレンダー全体 */
.calendar_wrap .flatpickr-calendar {
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
  background: #F5F5F5 !important;
  padding: 12px 8px 16px;
}

/* ナビゲーション */
.calendar_wrap .flatpickr-months {
  align-items: center;
}

.calendar_wrap .flatpickr-month {
  background: transparent !important;
  color: #333 !important;
}

.calendar_wrap .flatpickr-current-month {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #333 !important;
  font-family: var(--ff_noto) !important;
}

.calendar_wrap .flatpickr-prev-month,
.calendar_wrap .flatpickr-next-month {
  color: #666 !important;
  fill: #666 !important;
}

/* 曜日ヘッダー */
.calendar_wrap .flatpickr-weekdays {
  background: transparent !important;
}

.calendar_wrap span.flatpickr-weekday {
  background: transparent !important;
  color: #555 !important;
  font-size: 13px;
  font-weight: bold;
}

/* 日付セル */
.calendar_wrap .flatpickr-days,
.calendar_wrap .dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

.calendar_wrap .flatpickr-day {
  /* height: 36px;
  line-height: 36px; */
  font-size: 13px;
  border-radius: 50% !important;
  border: none !important;
  /* max-width: 40px; */
}

/* 今日の色： */
.calendar_wrap .flatpickr-day.today {
  background: #40AEDE !important;
  color: #fff !important;
  border: none !important;
}

/* 選択日の色： */
.calendar_wrap .flatpickr-day.selected {
  background: var(--color_red) !important;
  color: #fff !important;
  border: none !important;
}

/* 今日が選択されたとき（両方のクラスが付く） */
.calendar_wrap .flatpickr-day.selected.today {
  background: var(--color_red) !important;
  color: #fff !important;
}

/* 日曜・土曜（過去・今日のみ色付け） */
.calendar_wrap .flatpickr-day.sun { 
  color: var(--color_standard); 
}
.calendar_wrap .flatpickr-day.sat { 
  color: #40AEDE; 
}

/* 未来の日付（Flatpickrデフォルトの半調スタイルを土日にも適用） */
.calendar_wrap .flatpickr-day.flatpickr-disabled {
  color: rgba(57, 57, 57, 0.3) !important;
  cursor: default;
  pointer-events: none;
}

/* 前月・翌月の日付はすべて半調（土日含む） */
.calendar_wrap .flatpickr-day.prevMonthDay,
.calendar_wrap .flatpickr-day.nextMonthDay {
  color: rgba(57, 57, 57, 0.3) !important;
  pointer-events: none;
  cursor: default;
}

/* 未来の日付（当月内）も半調 */
.calendar_wrap .flatpickr-day.flatpickr-disabled {
  color: rgba(57, 57, 57, 0.3) !important;
  cursor: default;
  pointer-events: none;
}