@charset "UTF-8";


/* 時限切換え　*/
.branch_icon_area{
  display: flex; justify-content: center;
}
body:has(.is_release_before):has(.is_platinum) .branch_icon_area{
  display: none;
}
body:has(.is_release_after) .branch_icon_area{
  display: none;
}

.branch_icon_coming{
  color: #fff; line-height: 1.1; background-color: #0e6eb8; text-align: center; padding: 0.3em 1em;
  font-size: min(calc(24/768*100vw), 16px)
}
.branch_main_area{
  display: none;
}
body:has(.is_release_before):has(.is_platinum) .branch_main_area{
  display: block;
}
body:has(.is_release_after) .branch_main_area{
  display: block;
}

/* 今回例外あり */
.branch_main_area02{
  display: none;
}
body:has(.is_release_after) .branch_main_area02{
  display: block;
}

/* priceの表示、非表示 */
/* 今回例外あり */
body:has(.is_release_before) .branch_price_before{
  display: none;
}
body:has(.is_release_after) .branch_price_before{
  display: none;
}
.branch_price_after{
  display: none;
}
body:has(.is_release_before) .branch_price_after{
  display: block;
}
body:has(.is_release_after) .branch_price_after{
  display: block;
}

/* 共通 */
.main .bg01{
  background-color: #ecac31;
}
.main .bg02{
  background-color: #fed380;
}
.main .bg03{
  background-color: #000;
}
.main .color01{
  color: #666; font-weight: 400;
}
.main .color02{
  color: #fab227;
}
.main .color03{
  color: #3a444a;
}
.main .pdt1px{
  padding-top: 1px;
}
.main .pdt005{
  padding-top: 0.5%;
}
.main .mgt005{
  margin-top: 0.5%;
}

.main .point01{
  width: min( calc(728/768*100vw), 728px); margin: 0 auto;
}
.main .point02{
  width: min( calc(677/768*100vw), 677px); margin: 0 auto;
}
.main .bnr_check{
  width: min( calc(721/768*100vw), 721px); margin: 0 auto;
}

/* アコーディオンの中 */
.main .slide11{
  width: calc(641/722*100%); margin: 0 0 0 5%;
}
.main .gif11{
  width: calc(640/722*100%); margin: 0 auto;
}
.main .slide12{
  width: calc(662/722*100%); margin: 0 0 0 5%;
}
.main .gif12{
  width: calc(640/722*100%); margin: 0 auto;
}
.main .slide13{
  width: calc(674/722*100%); margin: 0 0 0 5%;
}
.main .slide21{
  width: calc(646/722*100%); margin: 0 0 0 5%;
}
.main .slide31{
  width: calc(664/722*100%); margin: 0 0 0 5%;
}

/* こだわり */
.main .kodawari{
  display: grid; grid-template-columns:  auto 1fr;
  font-weight: bold;
  border-style: solid; border-color: #017ad5; border-width: 2px;
}
.main .kodawari_left{
  color: #fff; background-color: #017ad5; padding: 1em 2.3em;
}
.main .kodawari_right{
  color: #017ad5; background-color: #fff; padding: 1em 2.3em;
}

/* howto */
.main .sec_how{
  background-color: #fff8ec;
}
.main .sec_how_ttl{
  font-family: var(--font-family); font-size: min(calc(33/768*100vw), 33px); line-height: 1; padding: 0 0 0.3em; margin: 0 0 0.5em;
  border-style: solid; border-color: #333; border-width: 0 0 1px;
}
.main .how_link{
  display: block; position: relative; z-index: 0;
  text-decoration: underline; padding: 0 0 0 0.9em;
}
.main .how_link::before{
  position: absolute; z-index: 1; top: 0.3em; left: 0;
  content: ""; width: 0.6em; height: 0.8em; background: #333;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.main .how_point{
  font-weight: bold; text-align: center; background-color: #ffeaec; padding: 1em 0;
}
.main .sec_how_indent{
  width: 1em; height: 1em; background-color: #333; border-radius: 50%; margin: 0.25em 0.2em 0 0;
}
.main .sec_how_fig{
  width: min( calc(726/768*100vw), 726px); margin: 0 auto;
}

/* 限定 */
.main .limited_box{
  background-color: #f9d18d; padding: 1% 1%; border-radius: 10px;
}
.main .limited_row{
  display: flex; align-items: center;
  background-color: #fff; border-radius: 8px; overflow: hidden;
}
.main .limited_left{
  flex-shrink: 0;
  width: min( calc(295/768*100vw), 295px);
}
.main .limited_right{
  flex-grow: 1;
  margin: 0 3%;
}

/* アコーディオン */
.main .drw_btn{
  position: relative; z-index: 1; font-weight: bold; background-color: #fff; padding: 0.8em 2.75em 0.8em 1em; border-radius: 10px; margin: 5% 3% 0; cursor: pointer;
  border-style: solid; border-color: #e8eef1; border-width: 3px;
}
.main .drw_btn_icon{
  position: absolute; top: 0; bottom: 0; right: 1em;
  width: 1.5em; height: 1.5em; border: 2px solid #333; background-color: #fff;  margin: auto;
}
.main .drw_btn_icon::before,
.main .drw_btn_icon::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #333;
}
.main .drw_btn_icon::before{
  width: 1em; height: 0.2em;
}
.main .drw_btn_icon::after{
  width: 0.2em; height: 1em;
}
.main .active .drw_btn_icon::after{
  display: none;
}
.main .drw_target{
  display: none;
  position: relative; z-index: 0; top: -30px; margin: 0 3% -30px;
}
.main .drw_target.open{
  display: block;
}
.main .drw_target_in{
  background-color: #fbf5e4; padding: calc(30px + 4%) 0 4%;
  /* border-style: solid; border-color: #E8EEF1; border-width: 0 2px 2px; */
  border-radius: 0 0 10px 10px;
}
.main .drw_target_relative{
  position: relative;
}

/* セット */
.main .set_wrap{
  background-color: #b5ceeb; padding: min(calc(10/768*100vw), 10px);
  border-radius: min(calc(15/768*100vw), 15px);
}
.main .set_row{
  display: grid; grid-template-columns: min(calc(282/768*100vw), 282px) 1fr; justify-content: end; align-items: center; gap: 0 4%;
  background-color: #fff; border-radius: min(calc(10/768*100vw), 10px);
}
.main .set_right{
  margin: 0 4% 0 0;
}