@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/* ==================================================
   ブレイクポイント
   SP：〜767px ／ PC：768px〜
   ※ボタン・注釈・注意事項アコーディオンはテンプレート由来の 640px を維持
================================================== */


/* ==================================================
   ベース
================================================== */
.main-vis .wrp-vis {
  max-width: 800px !important;
}

.ulp_page {
  line-height: 1.6;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
}
.ulp_page .inner {
  position: relative;
  padding: 0 10%;
}
@media only screen and (max-width: 767px) {
  .ulp_page .inner {
    padding: 0 20px;
  }
}

/* インデントリスト */
.indent {
  margin: 2vw 0;
}
.indent li {
  text-indent: -1em;
  padding-left: 1em;
  text-align: left;
}
.indent li.no-indent {
  text-indent: 0;
  padding-left: 0;
}
li.indent_3 {
  text-indent: -1em;
  padding-left: 2em;
}
li.indent_4 {
  text-indent: -1.5em;
  padding-left: 1.5em;
}
@media only screen and (min-width: 640px) {
  .indent {
    margin: 0;
  }
}

/* 余白 */
.mt3 {
  margin-top: 3vw !important;
}
@media only screen and (min-width: 768px) {
  .mt3 {
    margin-top: 30px !important;
  }
}


/* ==================================================
   ボタン・リンク
================================================== */
/* 利用者情報登録ボタン */
.c-btn-b {
  box-sizing: border-box;
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
  color: #fff;
  background: #CC0033;
  padding: 17px 55px;
  max-width: 531px;
  width: 100%;
  text-align: center;
  position: relative;
  margin: 0;
  border-radius: 8px;
}
.c-btn-b::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background: url(../img/arrow_01.png) center right no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
}
@media only screen and (max-width: 640px) {
  .c-btn-b {
    font-size: 19px;
    padding: 11px 10px;
    max-width: 320px;
    font-weight: 400;
  }
  .c-btn-b::after {
    width: 20px;
    height: 20px;
    right: 14px;
  }
}

/* 「はるやまについて詳しくはこちら」ボタン */
.about-btn {
  text-align: center;
  margin-top: 16px;
}
.c-btn-c {
  box-sizing: border-box;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  color: #fff;
  background: #062663;
  padding: 28px 60px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  position: relative;
  margin: 0 0 6px;
  box-shadow: 0 6px 0 #000d27;
  border-radius: 8px;
}
.c-btn-c::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background: url(../img/arrow_02.png) center right no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
}
@media only screen and (max-width: 640px) {
  .c-btn-c {
    font-size: 18px;
    padding: 7px 35px;
    max-width: 320px;
  }
  .c-btn-c::after {
    width: 20px;
    height: 20px;
    right: 15px;
  }
}

/* テキストリンク */
.c-link {
  display: inline;
  font-weight: 500;
  color: #034bde;
  text-decoration: underline !important;
}

/* 注釈リスト（カード下） */
.c-notes-list-a > li {
  line-height: 1.4;
  padding-left: 1em;
  text-indent: -1em;
  margin-top: 10px;
}
@media only screen and (max-width: 640px) {
  .c-notes-list-a > li {
    font-size: 15px;
  }
}


/* ==================================================
   キャンペーン（.campaign）
================================================== */
.campaign {
  position: relative;
  padding: 8.3333333333% 0 10.4166666667%;
  background-color: #fff3c0;
  overflow: hidden;
}
.img_txt {
  margin: 5vw auto 0;
}
.cptxt_box {
  border: solid 3px #360000;
  border-radius: 3vw;
  background-color: #fff;
  padding: 0 0 2vw;
  margin-top: 9vw;
}
.cptxt_box img {
  margin: -6vw auto -4vw;
  max-width: 95vw !important;
}

/* キャンペーン対象条件 */
.campaign__box {
  position: relative;
  margin-top: 5.2083333333%;
}
.campaign__box > *:first-child {
  margin-top: 0 !important;
}
.campaign__title02 {
  background-color: #000;
  border-radius: 2vw 2vw 0 0;
  text-align: center;
  padding: 10px;
  font-size: 32px;
  color: #fff;
  margin: 4.5454545455% 0 0 0;
  font-weight: bold;
}
.campaign__box_white {
  background-color: #fff;
  padding: 3% 7% 7%;
  border-radius: 0 0 2vw 2vw;
}
@media only screen and (max-width: 640px) {
  .campaign__title02 {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .campaign {
    padding: 40px 70px;
  }
  .img_txt {
    margin: 40px auto 0;
  }
  .cptxt_box {
    border: solid 5px #360000;
    border-radius: 30px;
    padding: 0 0 40px;
    margin-top: 70px;
  }
  .cptxt_box img {
    margin: -43px auto -69px;
    max-width: 700px !important;
  }
  .campaign__title02 {
    border-radius: 20px 20px 0 0;
  }
  .campaign__box_white {
    padding: 20px 30px 30px;
    border-radius: 0 0 20px 20px;
  }
	.campaign__box {
    margin-top: 50px;
}
}


/* ==================================================
   期間（.period）
================================================== */
.period {
  padding: 4vw 0;
  background-color: #e60012;
  overflow: hidden;
}
.period_txt {
  color: #fff;
  margin-top: 2vw;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .period {
    padding: 30px 0;
  }
  .period_txt {
    margin-top: 20px;
  }
}


/* ==================================================
   対象店舗アコーディオン（.qa_accordion_container02）
================================================== */
.qa_accordion_container02 {
  padding: 0 5vw;
  max-width: 600px;
  margin: 5vw auto 2vw;
}
.qa_accordion_title02 {
  position: relative;
  background-color: #360000;
  padding: 3.5vw 3vw;
  font-size: 4vw;
  font-weight: 600;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}
.qa_accordion_title02.open {
  border-radius: 4px 4px 0 0;
}
.qa_accordion_inner02 {
  background-color: #360000 !important;
  margin-top: -0.1vw;
  padding: 1vw 1.5vw;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  font-weight: 400;
}
.qa_accordion_inner02_bg {
  background-color: #fff;
  border-radius: 4px;
  padding: 1vw 3vw;
}
.qa_accordion_inner02 .indent li {
  text-indent: 0;
  padding-left: 0;
}

/* ＋／− アイコン（タイトル右端に配置） */
.acc_icon {
  position: absolute;
  top: 50%;
  right: 5vw;
  width: 5vw;
  height: 5vw;
  transform: translateY(-50%);
}
.acc_icon::before,
.acc_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.7vw;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .2s;
}
/* 縦棒（閉じているときは＋） */
.acc_icon::after {
  transform: translateY(-50%) rotate(90deg);
}
/* 開いているときは縦棒を寝かせて− */
.js-accordion_title.open .acc_icon::after {
  transform: translateY(-50%) rotate(0deg);
}

@media only screen and (min-width: 768px) {
  .qa_accordion_container02 {
    padding: 0 40px;
    margin: 50px auto 20px;
  }
  .qa_accordion_title02 {
    padding: 30px 3vw;
    font-size: 26px;
    border-radius: 10px;
  }
  .qa_accordion_title02.open {
    border-radius: 10px 10px 0 0;
  }
  .qa_accordion_inner02 {
    margin-top: -0.1px;
    padding: 10px;
    border-radius: 0 0 20px 20px;
    font-size: 16px;
  }
  .qa_accordion_inner02_bg {
    border-radius: 11px;
    padding: 30px;
  }
  .acc_icon {
    right: 24px;
    width: 34px;
    height: 34px;
  }
  .acc_icon::before,
  .acc_icon::after {
    height: 5px;
  }
}


/* ==================================================
   dポイントカード（.card）
================================================== */
.card {
  padding-top: 5vw;
}
.card__box {
  border: 8px solid #CE0F31;
  border-radius: 20px;
  padding: 7.1614583333% 5.859375%;
}
.card__box > ul {
  margin-top: 3.90625%;
}
.card__img {
  margin: 0;
  width: 100%;
}
.card__topic {
  font-size: 26px;
  font-weight: bold;
  color: #CC0033;
  margin-top: 4.1666666667%;
}
.card__btn {
  margin-top: 3.125%;
  text-align: center;
}

/* アプリダウンロードボタン */
.btn_box {
  padding: 3vw 0 0;
  text-align: center;
}
.btn_box img {
  margin-top: 3vw;
}
.btn_txt {
  width: 52vw;
  margin: 0 auto;
}

@media only screen and (max-width: 640px) {
  .card__box {
    border-width: 4px;
    border-radius: 16px;
  }
  .card__topic {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .card {
    padding-top: 30px;
  }
  .btn_box {
    padding: 25px 0 0;
  }
  .btn_box img {
    margin-top: 30px;
  }
  .btn_txt {
    width: 300px;
  }
}


/* ==================================================
   キャンペーンの詳細と注意事項アコーディオン（.qa_accordion）
================================================== */
.js-accordion_title {
  cursor: pointer;
}
.minus {
  display: none;
}
.qa_accordion_container {
  padding: 0 37px;
}
.qa_accordion_title {
  position: relative;
  padding: 1.5vw 3vw 2vw;
  font-size: 1.2em;
  font-weight: 600;
  text-align: left;
  border: solid 3px #d00f31;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 0 0 #d00e31 inset;
}
.qa_accordion_title.open {
  border-radius: 4px;
  box-shadow: 0 -4px 0 0 #d00e31 inset;
}
.qa_accordion_inner {
  display: none;
  border-right: 3px solid #d00e31;
  border-left: 3px solid #d00e31;
  border-bottom: 3px solid #d00e31;
  margin-top: 0;
  padding: 2vw 3vw;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  box-shadow: 0 -4px 0 0 #d00e31 inset;
  font-size: 14px;
  font-weight: 400;
}
.qa_accordion_inner .indent li a {
  display: inline;
  color: #cc0033;
  text-decoration: underline;
}
.Subttl {
  margin-top: 1em;
  color: #d00e31;
  font-size: 20px;
  font-weight: 700;
}
@media only screen and (min-width: 640px) {
  .qa_accordion_container {
    padding: 0 14%;
  }
  .qa_accordion_title {
    border: solid 6px #d00f31;
    padding: 13px 20px 15px;
  }
  .qa_accordion_inner {
    border-right: 6px solid #d00e31;
    border-left: 6px solid #d00e31;
    border-bottom: 6px solid #d00e31;
    padding: 30px;
  }
.notesIndent {
	text-align: center;
}
}


/* ==================================================
   追従エントリーボタン（#floatBtn）
================================================== */
#floatBtn.float-btn {
  position: static;
  text-align: center;
  background-color: #fff;
  padding: 4vw 8vw;
  box-shadow: 0 -5px 9px 0 rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#floatBtn.float-btn.is-show {
  opacity: 1;
  visibility: visible;
}
#floatBtn.float-btn.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
@media only screen and (min-width: 768px) {
  #floatBtn.float-btn {
    padding: 28px 0;
  }
  .entry__btn {
    width: 540px;
    margin: 0 auto;
  }
}