@charset "UTF-8";

:root {
    --color-red: #c3002f;
    --color-red-shadow: #6a0000;
    --color-yellow: #ffe900;
    --color-navy: #02007f;
    --color-blue: #0300b6;
    --color-blue-shadow: #02002f;
    --color-link: #0b6fb0;
    --chance01-head: #0056d0;
    --chance01-border: #0064ef;
    --chance01-info: #dfedfa;
    --chance02-head: #0099bf;
    --chance02-border: #00bae8;
    --chance02-info: #e5faff;
    --chance03-head: var(--color-navy);
    --chance03-border: var(--color-navy);
    --chance03-info: #dfe3fa;
    --bg-other: #a7cced;
    --bg-other-card: #dfedfa;
    --bg-reserve: #fff;
    --bg-footnote: #484848;
    --color-photo-border: #878787;
    --color-column-border: #ff8800;
    --sp: calc(100vw / 393);
    --pc: 1px;
    --column-width: 370px;
    --header-height-pc: calc(98 * var(--pc));
}
/* =========================================================
  COMMON
========================================================= */

.section__inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}


/* =========================================================
  KV
========================================================= */

.kv-area {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: none;
}

.kv-area__inner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
}

.kv-area__bg {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

.kv-area__bg picture {
  display: block;
  width: 100%;
}

.kv-area__bg img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.kv-area__title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  transform: none;
}

.kv-area__title picture {
  display: block;
  width: 100%;
}

.kv-area__title img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.kv-area__people {
  display: none;
}

/* =========================================================
  PRESENT
========================================================= */

.present-area {
  position: relative;
  padding: 25px 0 40px;

  background:
    url("../img/chance-bg.jpg") center top / cover no-repeat;
}

.present-area .section__inner {
  width: 100%;
  max-width: none;
  padding: 0 15px;
  box-sizing: border-box;
}


/* 黄色枠 */
.present-area__box {
  position: relative;

  width: 100%;
  padding: 18px 15px 30px;

  background: #fff;

  border: 3px solid #ffe000;
  border-radius: 16px;

  box-sizing: border-box;
}


/* =========================================================
  タイトル
========================================================= */

.present-area__title {
  width: 100%;
  margin: 0 auto;
}

.present-area__title img {
  width: 100%;
}


/* 51.7万円 */
.present-area__subtitle {
  position: static;

  width: 88%;
  margin: 0px auto 0;
}

.present-area__subtitle img {
  width: 100%;
}


/* キャンペーン概要 */
.present-area__heading {
  width: 80%;
  margin: 28px auto 25px;
}

.present-area__heading img {
  width: 100%;
}


/* =========================================================
  CHANCE01 / CHANCE02
========================================================= */

.present-area__chance {
  position: relative;

  display: block;

  margin-top: 0;

  gap: 0;
}


/* PCの中央線を消す */
.present-area__chance::before {
  display: none;
}


.present-area__chance-item {
  width: 100%;

  text-align: center;
}

.present-area__chance-item+.present-area__chance-item {
  margin-top: 32px;
}


/* CHANCE画像 */
.present-area__chance-image {
  width: 100%;
}

.present-area__chance-image img {
  width: 100%;
}


/* =========================================================
  詳しく見る
========================================================= */

.present-area__detail-button {
  width: 88%;
  margin: 14px auto 0;
}

.present-area__detail-trigger {
  display: block;

  width: 100%;

  padding: 0;
  border: 0;

  background: transparent;

  cursor: pointer;
}

.present-area__detail-trigger picture {
  display: block;
  width: 100%;
}

.present-area__detail-trigger img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
  注意書き
========================================================= */

.present-area__notes {
  width: 100%;
  max-width: none;

  margin: 30px auto 0;

  font-size: 1.3rem;
  line-height: 1.4;

  text-align: left;
}

.present-area__notes p {
  margin: 0;
  text-align: center;
}

.present-area__notes p+p {
  margin-top: 7px;
  text-align: center;
}


/* PC用の強制改行をSPでは無効 */
/* .present-area__notes br {
  display: none;
} */


/* =========================================================
  7.7万円
========================================================= */

.present-area__support {
  width: 100%;
  margin: 25px auto 0;
}

.present-area__support img {
  width: 100%;
}


/* =========================================================
  CTA
========================================================= */

.present-area__cv {
  margin-top: 30px;

  text-align: center;
}


/* 愛媛日産でご応募ください */
.present-area__cv-text {
  width: 76%;
  margin: 0 auto 10px;
}

.present-area__cv-text img {
  width: 100%;
}


/* 今すぐ応募 */
.present-area__cv-button {
  width: 100%;
  margin: 0 auto;
}

.present-area__cv-button a {
  display: block;
}

.present-area__cv-button picture {
  display: block;
  width: 100%;
}

.present-area__cv-button img {
  width: 100%;
}


/* =========================================================
  期間
========================================================= */

.present-area__period {
  margin-top: 24px;

  font-size: 1.05rem;
  line-height: 1.8;

  text-align: center;
}

.present-area__period p {
  margin: 0;
}

.present-area__terms {
  display: inline-block;

  margin-top: 5px;

  color: #e60046;

  font-size: 1.05rem;

  text-decoration: underline;
}


/* =========================================================
  詳しくは販売会社まで
========================================================= */

.present-area__company-button {
  width: 82%;
  max-width: none;

  margin: 24px auto 0;
}

.present-area__company-button a,
.present-area__company-button picture {
  display: block;
  width: 100%;
}

.present-area__company-button img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
  OTHER CAMPAIGN
========================================================= */

.other-campaign {
  padding: 35px 0 25px;
  background: #fff;
}

.other-campaign .section__inner {
  width: 100%;
  max-width: none;
  padding: 0 15px;
  box-sizing: border-box;
}

.other-campaign__title {
  width: 100%;
  margin: 0 auto;
}

.other-campaign__title img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  CASHBACK
========================================================= */

.cashback-area {
  padding: 0 0 45px;
  background: #fff;
}

.cashback-area .section__inner {
  width: 100%;
  max-width: none;
  padding: 0 15px;
  box-sizing: border-box;
}


/* メインビジュアル */
.cashback-area__visual {
  width: 100%;
  margin: 0 auto;
}

.cashback-area__visual img {
  display: block;
  width: 100%;
  height: auto;
}


/* 最大10万円 */
.cashback-area__title {
  width: 100%;
  margin: 25px auto 0;
}

.cashback-area__title img {
  display: block;
  width: 100%;
  height: auto;
}


/* 説明文 */
.cashback-area__text {
  margin-top: 20px;

  font-size: 1.1rem;
  line-height: 1.75;

  color: #111;
}

.cashback-area__note {
  margin-top: 0;

  font-size: 1.1rem;
  line-height: 1.75;
}


/* =========================================================
  詳しく見る
========================================================= */

.cashback-area__detail {
  margin-top: 25px;
}

.cashback-area__detail-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 60px;

  margin-top: 0;
  padding: 0;

  border: 0;

  background: #C90128;
  color: #fff;

  font-family: inherit;
  font-size: 2.2rem;
  font-weight: 400;

  cursor: pointer;
}


/* 矢印 */
.cashback-area__detail-arrow {
  position: absolute;

  top: 50%;
  right: 20px;

  width: 15px;
  height: 15px;

  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform:
    translateY(-70%) rotate(45deg);

  transition: transform .3s ease;
}

.cashback-area__detail-button.is-open .cashback-area__detail-arrow {
  transform:
    translateY(-25%) rotate(225deg);
}


/* =========================================================
  CASHBACK ACCORDION
========================================================= */

.cashback-detail__content {
  padding: 20px 15px 40px;
  background: #eee;
}


/* =========================================================
  キャンペーン概要
========================================================= */

.cashback-detail__heading {
  width: 100%;
  margin: 0 auto 8px;
}

.cashback-detail__heading picture {
  display: block;
}

.cashback-detail__heading img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  各セクション
========================================================= */

.cashback-detail__section+.cashback-detail__section {
  margin-top: 25px;
}


/* 白い見出し */
.cashback-detail__title {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 35px;

  margin: 0;
  padding: 6px 10px;

  background: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;

  text-align: center;

  box-sizing: border-box;
}


/* =========================================================
  対象期間
========================================================= */

.cashback-detail__period {
  margin-top: 15px;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;

  text-align: center;
}

.cashback-detail__note {
  margin-top: 5px;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;

  text-align: center;
}


/* =========================================================
  特典内容
========================================================= */

.cashback-detail__lead {
  margin-top: 15px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  font-weight: 500;
}


/* 10万円 / 5万円 */
.cashback-detail__cash-list {
  display: block;

  margin-top: 20px;
}

.cashback-detail__cash-item {
  width: 100%;
}

.cashback-detail__cash-item+.cashback-detail__cash-item {
  margin-top: 18px;
}

.cashback-detail__cash-item picture {
  display: block;
}

.cashback-detail__cash-item img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  適用条件
========================================================= */

.cashback-detail__conditions {
  margin: 25px 0 0;
  padding: 0;

  list-style: none;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.65;

  text-align: center;
}

.cashback-detail__conditions li+li {
  margin-top: 25px;
}


/* =========================================================
  注意書き
========================================================= */

.cashback-detail__notes {
  margin-top: 5px;

  font-size: 1.3rem;
  line-height: 1.7;

  text-align: left;
}

.cashback-detail__notes p {
  margin: 0;
  padding-left: 1em;

  text-indent: -1em;
}

.cashback-detail__notes p+p {
  /* margin-top: 5px; */
}


/* =========================================================
  販売店
========================================================= */

.cashback-detail__store {
  width: 100%;
  margin: 30px auto 0;
}

.cashback-detail__store a,
.cashback-detail__store picture {
  display: block;
  width: 100%;
}

.cashback-detail__store img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  閉じる
========================================================= */

.cashback-detail__close {
  display: block;

  width: 84%;

  margin: 30px auto 0;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.cashback-detail__close picture {
  display: block;
  width: 100%;
}

.cashback-detail__close img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  STORE / RESERVE
========================================================= */

.cashback-area__buttons {
  display: block;

  margin-top: 30px;
}

.cashback-area__button {
  width: 100%;
  text-align: center;
}

.cashback-area__button+.cashback-area__button {
  margin-top: 25px;
}

.cashback-area__button-title {
  width: 74%;
  margin: 0 auto 10px;
}

.cashback-area__button-title picture,
.cashback-area__button>a picture {
  display: block;
  width: 100%;
}

.cashback-area__button-title img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.cashback-area__button>a {
  display: block;

  width: 100%;
  margin: 0 auto;
}

.cashback-area__button>a img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  BANNER
========================================================= */

.banner-area {
  padding: 25px 15px 35px;
  background: #fff;
}

.banner-area .section__inner {
  width: 100%;
  max-width: none;
  padding: 0;
}

.banner-area__image {
  width: 100%;
}

.banner-area__image a,
.banner-area__image picture {
  display: block;
  width: 100%;
}

.banner-area__image img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  FOOTNOTE
========================================================= */

.footnote {
  padding: 30px 0;

  background: #484848;
  color: #fff;
}

.footnote_inner {
  width: calc(100% - 30px);
  max-width: none;

  margin: 0 auto;
}

.footnote-list__item {
  font-size: 1rem;
  line-height: 1.7;
}


/* =========================================================
  PAGETOP
========================================================= */

.pagetop {
  right: 0;
  bottom: 60px;
}

.pagetop_anchor {
  width: 38px;
  height: 38px;
  padding-top: 0;
}

.pagetop_anchor::before {
  top: 15px;
}

body {
  padding-bottom: 0px;
}

/* =========================================================
  FLOATING ENTRY
  SP 下固定
========================================================= */

.floating-entry {
  position: fixed;

  top: auto;
  right: 0;
  bottom: 0;
  left: 0;

  display: block;

  width: 100%;

  transform: none;

  z-index: 9998;
}

.floating-entry__anchor {
  display: block;
  width: 100%;
}

.floating-entry__anchor picture {
  display: block;
  width: 100%;
}


/* =========================================================
追従フッター
========================================================= */
.floating-entry__anchor img {
  display: block;
  width: 100%;
  height: auto;
}


.pagetop {
  right: 0;
  bottom: 70px;
  z-index: 9997;
}









/* =========================================================
  RESULT
========================================================= */

.result-area {
  padding: 0;
  overflow: hidden;
}

.result-area .section__inner {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}

.result-area__main {
  width: 100%;
  margin: 0;
}

.result-area__main img {
  width: 100%;
}

.result-area__people {
  display: block !important;
  position: absolute;
  z-index: 3;
}

.result-area__people--left {
  width: 54px;
  left: 4px;
  top: -8px;
}

.result-area__people--right {
  width: 56px;
  right: -2px;
  bottom: -10px;
}


/* =========================================================
  CHANCE
========================================================= */

.chance-area {
  padding: 0 0 25px;

  background:
    url("../img/chance-bg.jpg") center top / cover no-repeat;
}

.chance-area .section__inner {
  width: 100%;
  max-width: none;

  padding: 0 15px;
}

.chance-area__title {
  width: 88%;
  margin: 0 auto 20px;
}

.chance-area__title img {
  width: 100%;
}


/* CHANCE01 / CHANCE02 */
.chance-area__list {
  display: block;
}

.chance-area__item {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.chance-area__item+.chance-area__item {
  margin-top: 15px;
}

.chance-area__item img {
  width: 100%;
}


/* 7.7万円 */
.chance-area__support {
  width: 100%;
  margin: 20px auto 0;
}

.chance-area__support img {
  width: 100%;
}


/* =========================================================
  PAGETOP
========================================================= */

.pagetop {
  right: 15px;
  bottom: 100px;
}

.pagetop_anchor {
  width: 38px;
  height: 38px;
}


/* =========================================================
  FOOTNOTE
========================================================= */

.footnote {
  padding: 30px 0;
}



/* =========================================================
  FLOATING ENTRY
  SP 下固定
========================================================= */

.floating-entry {
  position: fixed !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  transform: none !important;
  z-index: 9998;
}

.floating-entry__anchor {
  display: block;
  width: 100%;
}

.floating-entry__anchor picture {
  display: block;
  width: 100%;
}

.floating-entry__anchor img {
  display: block;
  width: 100%;
  height: auto;
}

body {
  padding-bottom: 0 !important;
}



.footer {
  padding-bottom: 60px;

}


/* =========================================================
  CHANCE01 MODAL
========================================================= */

.chance01-modal {
  padding: 18px 8px 30px;
}


/* グレー背景 */
.chance01-modal__overlay {
  background: rgba(0, 0, 0, .58);
}


/* 白い本体 */
.chance01-modal__box {
  width: calc(100% - 16px);
  max-width: none;
  margin: 30px auto;
  padding: 15px 15px 40px;
  border-radius: 10px;
}


/* 中身 */
.chance01-modal__content {
  width: 100%;

  padding: 25px 0px 5px;

  box-sizing: border-box;
}


/* =========================================================
  右上 ×
========================================================= */

.chance01-modal__icon-close {
  top: -38px;
  right: 0;

  width: 34px;
  height: 34px;

  background: transparent;

  color: #fff;

  font-size: 34px;
  font-weight: 200;
}


/* =========================================================
  CHANCE01 ラベル
========================================================= */

.chance01-modal__label {
  width: 72%;

  margin: -60px auto 18px;
}

.chance01-modal__label img {
  width: 100%;
}


/* =========================================================
  33万円
========================================================= */

.chance01-modal__main {
  width: 100%;
  max-width: none;

  margin: 0 auto 18px;
}

.chance01-modal__main picture {
  display: block;
  width: 100%;
}

.chance01-modal__main img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  CTA
========================================================= */

.chance01-modal__entry {
  text-align: center;
}

.chance01-modal__entry-text {
  width: 76%;
  margin: 0 auto 10px;
}

.chance01-modal__entry-text picture,
.chance01-modal__entry-button picture {
  display: block;
  width: 100%;
}

.chance01-modal__entry-text img {
  width: 100%;
}

.chance01-modal__entry-button {
  width: 98%;
  margin: 0 auto;
}

.chance01-modal__entry-button img {
  width: 100%;
}


/* =========================================================
  期間
========================================================= */

.chance01-modal__period {
  margin-top: 20px;

  font-size: 1.2rem;
  line-height: 1.75;

  text-align: center;
}

.chance01-modal__period p {
  margin: 0;
}

.chance01-modal__terms {
  margin-top: 4px;

  font-size: 1rem;
}


/* =========================================================
  SECTION
========================================================= */

.chance01-modal__section {
  margin-top: 28px;
}


.chance01-modal__heading {
  width: 100%;
  margin-top: 0;
  padding: 0;
  background: none;
}

.chance01-modal__heading picture {
  display: block;
  width: 100%;
}

.chance01-modal__heading img {
  display: block;
  width: 100%;
  height: auto;
}


/* ピンク見出し */
.chance01-modal__title {
  margin-top: 15px;
  padding: 7px 10px;

  font-size: 1.6rem;
  line-height: 1.4;
}


/* =========================================================
  本文
========================================================= */

.chance01-modal__text {
  margin-top: 15px;

  font-size: 1.6rem;
  line-height: 1.7;
}

.chance01-modal__text--center {
  text-align: center;
}


/* =========================================================
  適用条件
========================================================= */

.chance01-modal__condition {
  margin-top: 5px;
}

.chance01-modal__condition-main {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;

  text-align: center;
}


/* =========================================================
  注釈
========================================================= */

.chance01-modal__notes {
  margin-top: 12px;

  font-size: 1.3rem;
  line-height: 1.7;

  text-align: left;
}

.chance01-modal__notes p {
  margin: 0;

  padding-left: 1em;
  text-indent: -1em;
}

.chance01-modal__notes p+p {
  margin-top: 4px;
}


/* 赤注釈 */
.chance01-modal__red {
  color: #E72649;
}


/* =========================================================
  内容変更
========================================================= */

.chance01-modal__change {
  margin-top: 30px;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.7;

  text-align: center;
}


/* =========================================================
  下部CTA
========================================================= */

.chance01-modal__entry--bottom {
  margin-top: 30px;
}


/* =========================================================
  閉じる
========================================================= */

.chance01-modal__close {
  display: block;

  width: 78%;

  margin: 28px auto 0;
  padding: 0;

  border: 0;
  background: transparent;
}

.chance01-modal__close picture {
  display: block;
  width: 100%;
}

.chance01-modal__close img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
  CHANCE02 MODAL
========================================================= */

.chance02-modal {
  padding: 17px 15px 40px;
}

.chance02-modal__box {
  width: 100%;
  max-width: none;

  margin: 30px auto;

  border-radius: 10px;
}

.chance02-modal__content {
  width: 100%;
  padding: 25px 15px 30px;
  box-sizing: border-box;
}

.chance02-modal__icon-close {
  top: -38px;
  right: 0;

  width: 34px;
  height: 34px;

  background: transparent;

  color: #fff;

  font-size: 34px;
  font-weight: 200;
}

.chance02-modal__label {
  width: 58%;
  margin: -48px auto 18px;
}

.chance02-modal__main {
  width: 100%;
  max-width: none;
  margin: 0 auto 18px;
}

.chance02-modal__main picture,
.chance02-modal__main img {
  display: block;
  width: 100%;
}

.chance02-modal__entry-text {
  width: 82%;
  margin: 0 auto 10px;
}

.chance02-modal__entry-button {
  width: 100%;
  margin: 0 auto;
}

.chance02-modal__entry-text picture,
.chance02-modal__entry-button picture,
.chance02-modal__entry-text img,
.chance02-modal__entry-button img {
  display: block;
  width: 100%;
}

.chance02-modal__period {
  margin-top: 20px;

  font-size: 1rem;
  line-height: 1.75;

  text-align: center;
}

.chance02-modal__section {
  margin-top: 28px;
}

.chance02-modal__heading {
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  background: none;
}

.chance02-modal__heading picture,
.chance02-modal__heading img {
  display: block;
  width: 100%;
}

.chance02-modal__title {
  margin-top: 15px;
  padding: 7px 10px;

  font-size: 1.25rem;
  line-height: 1.4;
}

.chance02-modal__text {
  margin-top: 15px;

  font-size: 1.1rem;
  line-height: 1.7;
}

.chance02-modal__condition {
  margin-top: 25px;
}

.chance02-modal__condition-main {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;

  text-align: center;
}

.chance02-modal__notes {
  margin-top: 12px;

  font-size: .95rem;
  line-height: 1.7;

  text-align: left;
}

.chance02-modal__notes p {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}

.chance02-modal__notes p+p {
  margin-top: 4px;
}


/* STEP */
.chance02-modal__steps {
  width: 100%;
  margin-top: 20px;
}

.chance02-modal__step {
  width: 100%;
}

.chance02-modal__step+.chance02-modal__step {
  margin-top: 16px;
}

.chance02-modal__step picture,
.chance02-modal__step img {
  display: block;
  width: 100%;
  height: auto;
}

.chance02-modal__notes--step {
  margin-top: 18px;
  padding: 10px;

  background: #f7f7f7;
}

.chance02-modal__change {
  margin-top: 30px;

  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;

  text-align: center;
}

.chance02-modal__entry--bottom {
  margin-top: 30px;
}

.chance02-modal__close {
  display: block;

  width: 78%;

  margin: 28px auto 0;
  padding: 0;

  border: 0;
  background: transparent;
}

.chance02-modal__close picture,
.chance02-modal__close img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
  CHANCE02 MODAL SP 調整
========================================================= */

.chance02-modal {
  padding: 17px 15px 40px;
}


/* 白いモーダル */
.chance02-modal__box {
  width: 100%;
  max-width: none;
  margin: 30px auto 0;
  border-radius: 10px;
  padding: 15px 15px 40px;
}


/* 中身 */
.chance02-modal__content {
  width: 100%;

  padding: 25px 0px 5px;

  box-sizing: border-box;
}


/* =========================================================
  右上 ×
========================================================= */

.chance02-modal__icon-close {
  top: -42px;
  right: -2px;

  width: 40px;
  height: 40px;

  padding: 0;

  background: transparent;
  border: 0;

  color: #fff;

  font-size: 38px;
  font-weight: 200;
  line-height: 1;
}


/* =========================================================
  CHANCE02 ラベル
========================================================= */

.chance02-modal__label {
  width: 72%;

  margin: -60px auto 20px;
}

.chance02-modal__label img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
  11万円画像
========================================================= */

.chance02-modal__main {
  width: 100%;
  max-width: none;

  margin: 0 auto 20px;
}

.chance02-modal__main picture,
.chance02-modal__main img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
  CTA
========================================================= */

.chance02-modal__entry {
  text-align: center;
}

.chance02-modal__entry-text {
  width: 75%;

  margin: 0 auto 10px;
}

.chance02-modal__entry-text picture,
.chance02-modal__entry-text img {
  display: block;

  width: 100%;
  height: auto;
}

.chance02-modal__entry-button {
  width: 97%;

  margin: 0 auto;
}

.chance02-modal__entry-button a,
.chance02-modal__entry-button picture,
.chance02-modal__entry-button img {
  display: block;

  width: 100%;
  height: auto;
}


/* =========================================================
  キャンペーン期間
========================================================= */

.chance02-modal__period {
  margin-top: 22px;

  font-size: 1.2rem;
  line-height: 1.8;

  text-align: center;
}

.chance02-modal__period p {
  margin: 0;
}

.chance02-modal__terms {
  display: inline-block;

  margin-top: 5px;

  color: #C3002F;

  font-size: 1.05rem;

  text-decoration: underline;
}


/* =========================================================
  セクション
========================================================= */

.chance02-modal__section {
  margin-top: 30px;
}


/* キャンペーン賞品について画像 */
.chance02-modal__heading {
  width: 100%;

  margin: 0 0 16px;
  padding: 0;

  background: none;
}

.chance02-modal__heading picture,
.chance02-modal__heading img {
  display: block;

  width: 100%;
  height: auto;
}


/* 水色見出し */
.chance02-modal__title {
  width: 100%;

  margin: 15px 0 0;
  padding: 8px 10px;

  background: #39b8ea;
  color: #fff;

  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;

  text-align: center;

  box-sizing: border-box;
}


/* =========================================================
  本文
========================================================= */

.chance02-modal__text {
  margin-top: 18px;

  font-size: 1.6rem;
  line-height: 1.5;

  color: #111;
}

.chance02-modal__text--center {
  text-align: center;
}


/* =========================================================
  条件
========================================================= */

.chance02-modal__condition {
  margin-top: 28px;
}

.chance02-modal__condition-main {
  margin: 0;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;

  text-align: center;
}


/* =========================================================
  注釈
========================================================= */

.chance02-modal__notes {
  margin-top: 14px;

  font-size: 1.3rem;
  line-height: 1.75;

  text-align: left;
}

.chance02-modal__notes p {
  margin: 0;

  padding-left: 1em;
  text-indent: -1em;
}

.chance02-modal__notes p+p {
  margin-top: 4px;
}

.chance02-modal__red {
  color: #E72649;
}


/* =========================================================
  STEP
========================================================= */

.chance02-modal__steps {
  width: 100%;

  margin-top: 18px;
}

.chance02-modal__step {
  width: 100%;
}

.chance02-modal__step+.chance02-modal__step {
  margin-top: 15px;
}

.chance02-modal__step picture,
.chance02-modal__step img {
  display: block;

  width: 100%;
  height: auto;
}


/* STEP下注釈 */
.chance02-modal__notes--step {
  margin-top: 18px;
  padding: 10px 12px;

  background: #f7f7f7;

  box-sizing: border-box;
}


/* =========================================================
  内容変更
========================================================= */

.chance02-modal__change {
  margin-top: 32px;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;

  text-align: center;
}


/* =========================================================
  下部CTA
========================================================= */

.chance02-modal__entry--bottom {
  margin-top: 30px;
}


/* =========================================================
  閉じる
========================================================= */

.chance02-modal__close {
  display: block;

  width: 78%;

  margin: 30px auto 0;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.chance02-modal__close picture,
.chance02-modal__close img {
  display: block;

  width: 100%;
  height: auto;
}

/* ========================================
   RESULT / CHANCE（SP調整）
======================================== */
.result-area {
  position: relative;
  padding: 25px 0 60px;
  overflow: visible;
}

.result-area .section__inner {
  position: relative;
  width: calc(100% - 20px);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}

.result-area__main {
  width: 100%;
  margin: 0 auto;
}

.result-area__main img {
  width: 100%;
  height: auto;
}

/* 人物をSPでも表示 */
.result-area__people {
  position: absolute;
  z-index: 3;
  display: block !important;
}

.result-area__people img {
  display: block;
  width: 100%;
  height: auto;
}

.result-area__people--left {
  width: 53px;
  left: 4px;
  top: -37px;
}

.result-area__people--right {
  width: 51px;
  right: -16px;
  top: 200px;
}

/* CHANCEエリア */
.chance-area {
  position: relative;
  padding: 0 0 24px;
  margin-top: 0;
  background: url("../img/chance-bg.jpg") center top / cover no-repeat;
}

/* リボン */
.chance-area__title {
  position: relative;
  z-index: 2;
  width: 86%;
  margin: -6px auto 18px;
}

.chance-area__title img {
  width: 100%;
  height: auto;
}

/* 01 / 02 を縦並び */
.chance-area__list {
  display: block;
}

.chance-area__item {
  width: 100%;
  max-width: none;
}

.chance-area__item+.chance-area__item {
  margin-top: 16px;
}

.chance-area__item img {
  width: 100%;
  height: auto;
}

.chance-area__support {
  width: 100%;
  margin: 16px auto 0;
}

.chance-area__support img {
  width: 100%;
  height: auto;
}

.chance-area__title {
  position: relative !important;
  z-index: 5;
  width: 86% !important;
  margin: 0 auto -10px !important;
  transform: translateY(-28px);
}

.chance02-modal__step-arrow {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 12px;
}

.chance02-modal__step-arrow span {
  display: block;
  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #c9efff;
}

.chance02-modal__step-arrow {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 9px 0 11px;
}

.chance02-modal__step-arrow span {
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #c9efff;
}
.chance02-modal__step-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0 20px;
}

.chance02-modal__step-arrow span {
  display: block;
  width: 0;
  height: 0;

  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 17px solid #c9efff;
}

.modal-terms {
  padding: 60px 15px 40px;
}

.present-notes__title {
  font-size: 1.5rem;
}

.present-notes__subtitle {
  font-size: 1.4rem;
}

.present-notes__close {
  right: 0;
  top: 0;

  width: 50px;
  height: 50px;

  background-size: 60px 60px;
}

.pagetop {
  position: fixed;
  left: auto !important;
  right: 15px !important;
  bottom: 70px;
  z-index: 9997;
}
]

.present-notes__dd {
  font-size: 11.5px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.c-modal {
    max-width: 800px;
    padding: 55px 15px 44px;
}


@media screen and (min-width: 480px) {
.pagetop {
  position: fixed;
  left: auto !important;
  right: 15px !important;
  bottom: 100px;
  z-index: 9997;
}
}

@media screen and (min-width: 700px) {
 .pagetop {
   position: fixed;
   left: auto !important;
   right: 15px !important;
   bottom: 130px;
   z-index: 9997;
 }
}

.footer {
  padding-bottom: 70px;
}



@media screen and (min-width: 500px) {
 .footer {
   padding-bottom: 100px;
 }
}

@media screen and (min-width: 650px) {
 .footer {
   padding-bottom: 120px;
 }
}




.c-modal--terms .c-modal__close {


  width: 34px;
  height: 34px;

}
/* =========================================================
   12. モーダル：キャンペーン規約（.c-modal / .present-notes）
   ========================================================= */
.c-modal {
  padding: calc(56 * var(--sp)) calc(16 * var(--sp)) calc(32 * var(--sp));
  color: #000;
  text-align: left;
}

.c-modal__close {
  position: absolute;
  top: calc(12 * var(--sp));
  right: calc(12 * var(--sp));
  width: calc(36 * var(--sp));
  height: calc(36 * var(--sp));
  border-radius: 50%;
  background-color: var(--color-navy);
}

.c-modal__close::before,
.c-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 29%;
  width: 50%;
  height: 2px;
  background-color: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.c-modal__close:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.remodal-is-locked .pagetop {
  display: none !important;
}

.present-notes__title {
  font-size: calc(16 * var(--sp));
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.present-notes__heading {
  position: relative;
  margin: calc(24 * var(--sp)) 0;
  text-align: center;
}

.present-notes__heading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.present-notes__heading-text {
  position: relative;
  display: inline-block;
  padding: 0 calc(10 * var(--sp));
  background-color: #fff;
  font-size: calc(14 * var(--sp));
  font-weight: 700;
}

.present-notes__subtitle {
  margin: calc(20 * var(--sp)) 0 calc(5 * var(--sp));
  font-size: calc(14 * var(--sp));
  font-weight: 700;
  text-align: center;
}

.present-notes__dt {
  margin: calc(20 * var(--sp)) 0 calc(5 * var(--sp));
  font-size: calc(13 * var(--sp));
  font-weight: 700;
  line-height: 1.5;
}

.present-notes__dd,
.present-notes__text {
  margin-bottom: calc(16 * var(--sp));
  font-size: calc(12 * var(--sp));
  line-height: 1.5;
}

.present-notes__anchor {
  color: var(--color-link);
  word-break: break-all;
}

.present-notes .o-indent {
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
}

.present-notes .o-indent-big {
  display: inline-block;
  padding-left: 1.25em;
  text-indent: -1.25em;
}

.present-notes .o-red {
  color: var(--color-red);
}

/* キャンペーン概要の横幅調整 */
.cashback-detail__heading {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}

.cashback-detail__heading img {
  display: block;
  width: 100%;
  height: auto;
}