@charset "utf-8";
/* -------------- /0522-------------- */

#ulp_cmntop h1,
#ulp_cmntop h2 {
  padding: 0;/* ------ /変更部分 ------ */
}

.br_sp {
  display: none;
}

.pc_bg {
  position: fixed;
  inset: 0;
  background: url("/cp_6/dpscp/2026dpoint_actweb2/img/pc_back.jpg") center center / cover no-repeat;
  z-index: -1;
}

.bg_fixed {
  position: relative;
  z-index: 1;
}

#wrap_page .fv img,
#wrap_page #use img,
#wrap_page #start img,
#wrap_page #shop img,
#wrap_page #point img,
#wrap_page #rank img {
  display: block;
  width: 100%;
  margin-bottom: -1px;
}
#wrap_page .notebox {
  width: 90%;
  margin: 0 auto;
  padding: 15px 0;
}
#wrap_page .notebox2 {
  position: absolute;
  width: 80%;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  padding: 15px 0;
}
#wrap_page .notebox3 {
  width: 75%;
  margin: 0 auto;
  padding: 15px 0;
}
#wrap_page .notebox4 {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  padding: 15px 0;
  z-index: 100;
}
#wrap_page .notebox li {
  text-align: left;
  line-height: 1.4;
  font-size: 12px;
  text-indent: -1em;
  padding-left: 1em;
}
#wrap_page .notebox2 li {
  text-align: left;
  line-height: 1.4;
  font-size: 12px;
  text-indent: -1em;
  padding-left: 1em;
}
#wrap_page .notebox3 li {
  text-align: left;
  line-height: 1.4;
  font-size: 12px;
  text-indent: -1em;
  padding-left: 1em;
}
#wrap_page .notebox4 li {
  text-align: right;
  line-height: 1.4;
  font-size: 12px;
  text-indent: -1em;
  padding-left: 1em;
}
#wrap_page .notebox4 li a {
  color: #ffffff;
}
#wrap_page .notebox li .txt_blue {
  display: contents;
  color: #128bdd;
}
#wrap_page .notebox li .txt_blue span {
  color: #128bdd;
  text-decoration: underline;
}
#wrap_page .bg_r {
  background: #cc0033;
}
/* ------- /btn_motion------ */
#wrap_page .sideMenu a,
#wrap_page #use .use_btn a,
#wrap_page #use #use_use_btn04,
#wrap_page #use #use_use_btn05,
#wrap_page #start #start_start_btn01,
#wrap_page #shop #shop_shop_btn01,
#wrap_page #point #point_point_btn01,
#wrap_page #point #point_point_btn02,
#wrap_page #rank #rank_rank_btn01,
#wrap_page #rank #rank_rank_btn02 {
  display: inline-block;
  transition: transform 0.3s ease;
}
#wrap_page .sideMenu a:hover,
#wrap_page #use .use_btn a:hover,
#wrap_page #use #use_use_btn04:hover,
#wrap_page #use #use_use_btn05:hover,
#wrap_page #start #start_start_btn01:hover,
#wrap_page #shop #shop_shop_btn01:hover,
#wrap_page #point #point_point_btn01:hover,
#wrap_page #point #point_point_btn02:hover,
#wrap_page #rank #rank_rank_btn01:hover,
#wrap_page #rank #rank_rank_btn02:hover {
  transform: scale(1.02);
}

/* ------- /side menu------ */
.sideMenu {
  position: fixed;
  top: 8%;

  display: flex;
  flex-direction: column;
  gap: 10px;

  z-index: 100;
}

/* -- /left- */
.sideMenu-left {
  right: 50%;
  margin-right: 360px;
}
/* -- /right- */
.sideMenu-right {
  left: 50%;
  margin-left: 360px;
}

/* -- /btn- */
.sideMenu a {
  display: block;
  width: 280px;
  padding: 6px 15px;

  text-align: center;
  text-decoration: none;
}

.sideMenu a img {
  width: 100%;
}



/* ------- /FV------ */
#wrap_page .fv {
  position: relative;
  text-align: center;
}
#wrap_page .fv .next_note {
  position: absolute;
  bottom: 3%;
  margin: 0 auto;
  left: 0;
  right: 0;
  color: #ffffff;
  text-align: center;
}
#wrap_page .fv .next_note a {
  color: #ffffff;
}

/* ------- /use------ */
#wrap_page #use {
  background: #fffbd7;
}
#wrap_page #use .use_btn {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/use_back01.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* ------- /start------ */

/* ------- /shop------ */
#wrap_page #shop .moreBox {
  width: 100%;
  --close-height: 840px;
}

#wrap_page #shop .moreContent {
  position: relative;
  overflow: hidden;
  height: var(--close-height);
  background: #cc0033;
  transition: height 0.5s ease;
}

#wrap_page #shop .moreContent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 60px;

  background: linear-gradient(
    to top,
    rgba(204,0,51,1),
    rgba(204,0,51,0)
  );

  transition: opacity 0.3s ease;
}

ul.storebox_wrap {
  justify-content: flex-start;
  gap: 16px;
  background: #cc0033;
}
ul.storebox_wrap li {
  padding: 2.5% 0 3%;
  margin-bottom: 1.8%;
  background: #ffffff;
  flex-basis: 22.47%;
  width: 22.47%;
  border: none;
  background-clip: padding-box;
}
ul.storebox_text .text_block {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto;
}
ul.storebox_text .text_block .list_text {
  white-space: normal;
}

#wrap_page #shop .moreBox.is-open .moreContent::after {
  opacity: 0;
}

#wrap_page #shop .shop_more_btn {
  padding: 20px 0;
  background: #cc0033;
  text-align: center;
}
#wrap_page #shop .morebtn {
  position: relative;
  width: 200px;
  height: 60px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
#wrap_page #shop .morebtn .shop_ac_btn {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  transition:transform 0.3s ease,
    opacity 0.3s ease;
}
#wrap_page #shop .morebtn:hover .shop_ac_btn {
  transform: scale(1.05);
}
.closebtn_img {
  opacity: 0;
  pointer-events: none;
}

.moreBox.is-open .morebtn_img {
  opacity: 0;
}

.moreBox.is-open .closebtn_img {
  opacity: 1;
}

#wrap_page #shop .shop_btn {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/shop_back01.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

#wrap_page #shop .shop_search {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/shop_back02.jpg");
  background-repeat:repeat-y;
  background-size: cover;
  margin-top: -1px;
  margin-bottom: -1px;
  padding: 20px 0;
  overflow: hidden;
  transform: translateZ(0);
}

#wrap_page #shop .shop_note {
  position: relative;
}

#wrap_page #shop .shop_map_btn {
  max-width: 480px;
  width: 90%;
  margin: 10px auto;
  background: #ffffff;
  border: 1px solid #000000;
  text-align: left;
}

#wrap_page #shop .shop_map_btn a {
  display: block;
  color: #000000;
}
#wrap_page #shop .shop_map_btn a:hover {
  opacity: 0.6;
}

#wrap_page #shop .shop_map_btn a p {
  position: relative;
  padding: 16px 50px;
  font-size: 4vw;
  font-weight: normal;
  color: #000000;
  line-height: 1.3;
}

#wrap_page #shop .shop_map_btn a p::before {
  display: block;
  position: absolute;
  width: 25px;
  height: 100%;
  top: 0;
  left: 3%;
  background: url("/cp_6/dpscp/2026dpoint_actweb2/img/shop_map_icon.png") no-repeat 50% 50%;
  background-size: 20px;
  content: "";
}
#wrap_page #shop .shop_map_btn a p::after {
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 50%;
  right: 6%;
  content: "";
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  -webkit-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
  vertical-align: middle;
  background: none;
}

/* ------- /point------ */
#wrap_page #point {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/point_bg01.jpg");
  background-repeat: repeat-y;
  background-size: contain;
}

#wrap_page #point .point_note {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/point_back01.png");
  background-repeat: no-repeat;
  background-size: cover;
}

/* ------- /rank------ */
#wrap_page #rank {
  background: #fffbd7;
  padding: 0 0 48px 0;
}

#wrap_page #rank .rank_bg {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/point_bg01.jpg");
  background-repeat: repeat-y;
  background-size: cover;
}

/* accordion */
/* all */
.accordion {
  border: none;
  overflow: hidden;
}

/* btn */
.accordion__head {
  width: 90%;
  margin: 10px auto 0;
  padding: 14px 20px;
  background: #cc0033;
  border: 2px solid #cc0033;

  display: flex;
  justify-content: space-between;
  align-items: center;

  cursor: pointer;
}

/* title */
.accordion__title {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
}

/* +-icon */
.accordion__icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 横棒 */
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: #ffffff;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  transition: 0.3s;
}

/* 横線 */
.accordion__icon::before {
  width: 16px;
  height: 2px;
}

/* 縦線 */
.accordion__icon::after {
  width: 2px;
  height: 16px;
}

/* 開いている時は - にする */
.accordion.is-open .accordion__icon::after {
  opacity: 0;
}

/* 中身 */
.accordion__body {
  width: 90%;
  height: 0;
  overflow: hidden;
  margin: 0 auto;
  background: #ffffff;
  outline: 2px solid #cc0033;
  outline-offset: -2px;
  transition: height .4s ease;
}

.accordion__inner {
  padding: 5%;
}

/* 画像 */
.accordion__body img {
  display: block;
  max-width: 100%;
}

#wrap_page #rank .rank_note {
  background-image: url("/cp_6/dpscp/2026dpoint_actweb2/img/rank_back01.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}


@media screen and (min-width: 641px) {
  #ulp_cmntop h1,
	#ulp_cmntop h2 {
    padding: 0;/* ------ /変更部分 ------ */
	}
  
  #wrap_page .notebox li,
  #wrap_page .notebox2 li,
  #wrap_page .notebox3 li{
    font-size: 14px;
  }
  
  /* ------- /shop------ */
  #wrap_contents {
    margin: 0;
  }
  #wrap_page #shop .shop_map_btn a p {
    font-size: 16px;
  }
}

@media screen and (max-width: 1400px) {
  /* ------- /side menu------ */
  .sideMenu {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  ul.storebox_wrap {
    gap: 9px;
  }
  ul.storebox_wrap li {
    padding: 2.5% 0 1%;
  }
  ul.storebox_text .text_block .list_text {
    font-size: 2.4vw;
    line-height: 1.2;
  }
  .br_sp {
    display: block;
  }
  #wrap_page .notebox2 {
    width: 85%;
    padding: 0;
  }
  
  /* ------- /shop------ */
  #wrap_page #shop .moreBox {
    --close-height: 540px;
  }
  #wrap_page #shop .shop_search {
    padding: 14px 30px;
  }
  #wrap_page #shop .shop_map_btn {
    width: 100%;
  }
  
  /* ------- /rank------ */
  .accordion__title {
    font-size: 18px;
  }
}