@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* 大枠 */
html,
body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch !important;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 15px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  color: #fff;
}
body #wrapper {
  height: auto;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

@media print {
  html,
  html body {
    overflow: visible !important;
  }
}
/* アクセシビリティ */
img {
  image-rendering: auto;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  -webkit-box-shadow: #000 0 0 0;
          box-shadow: #000 0 0 0; /* ロールオーバー対応 */
}

img,
x:-moz-any-link,
x:default {
  box-shadow: #000 0 0 0; /* IE7対応 */
}

/* リンク */
a {
  display: inline-block;
}
a:link, a:visited, a:active {
  color: inherit;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  a:hover {
    color: inherit;
    opacity: 0.7;
    text-decoration: none !important;
  }
}

.josefin {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
}

.container {
  width: 100%;
  max-width: 1040px;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
}

.pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .pc {
    display: block;
  }
}

.sp {
  display: block;
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

#main {
  margin: 0 auto;
  clear: both;
  overflow: visible;
}

/* ▼▼▼ ヘッダー
====================================================== */
header {
  width: 100%;
  background: #fff;
}
header .header_inner {
  width: 100%;
  background: #fff;
  padding: 8px;
}
header .header_inner #site_title {
  text-align: center;
}

/* ▼▼▼ SP幅コンテンツ
====================================================== */
.col_bg_fixed {
  display: none;
}

.contents_wrap {
  width: 100%;
  background-color: #0DB2E2;
  position: relative;
}
.contents_wrap .btn_yellow {
  position: fixed;
  bottom: 21px;
  left: 50%;
  translate: -50%;
  font-size: 14px;
  color: #003484;
  font-weight: 800;
  text-align: center;
  background-color: #FFED00;
  border: 1px solid #003484;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 0 #003484;
          box-shadow: 1px 1px 0 #003484;
  max-width: 220px;
  width: 100%;
  line-height: 1.3;
  padding: 9px;
  z-index: 999;
}
.contents_wrap .btn_yellow span {
  font-size: 11px;
  font-weight: 700;
}
.contents_wrap .btn_yellow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #003484;
  position: absolute;
  top: 0;
  right: 9px;
  bottom: 0;
  margin: auto;
}

/*--- MV ---*/
.mv img {
  width: 100%;
}

/*--- anchor ---*/
#anchor .sp_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #D00080;
  padding: 8px;
  width: 100%;
  height: 65px;
}
#anchor .sp_nav li {
  width: 25%;
}
#anchor .sp_nav li:not(:last-child) {
  border-right: 1px solid #FC3FB3;
}
#anchor .sp_nav li a {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#anchor .sp_nav li a span {
  padding-bottom: 10px;
  text-align: center;
}
#anchor .sp_nav li a::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50%;
  rotate: 90deg;
}

/*--- 共通 ---*/
section {
  z-index: 0;
}

.sec_ttl {
  text-align: center;
  font-size: 14px;
  color: #003484;
  font-weight: 700;
  position: relative;
  z-index: 0;
  margin-bottom: 23px;
}
.sec_ttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 34px;
  top: -5px;
  left: 50%;
  translate: -50%;
}
.sec_ttl.ttl_bg01::before {
  width: 135px;
  background: url(../img/ttl_bg_1.svg) no-repeat center/contain;
}
.sec_ttl.ttl_bg02::before {
  width: 259px;
  background: url(../img/ttl_bg_2.svg) no-repeat center/contain;
}

.txt {
  text-align: center;
  font-weight: 700;
  margin-bottom: 24px;
}
.txt .pink {
  color: #D00080;
  background-color: #F7F1A8;
}
.txt .fs10 {
  font-size: 10px;
}

.kome_indent {
  font-size: 13px;
  padding-left: 2.5em;
  text-indent: -2.5em;
  line-height: 1.4;
}

.kome {
  font-size: 13px;
}

.indent {
  font-size: 13px;
  padding-left: 1em;
  text-indent: -1em;
}

.note_list li {
  font-size: 13px;
}
.note_list li::before {
  content: "・";
}

.nami01 {
  position: relative;
}
.nami01::after {
  content: "";
  position: absolute;
  aspect-ratio: 375/77;
  width: 100%;
  background: url(../img/nami01.webp) no-repeat top center/cover;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.nami02 {
  position: relative;
}
.nami02::after {
  content: "";
  position: absolute;
  aspect-ratio: 375/77;
  width: 100%;
  background: url(../img/nami02.webp) no-repeat top center/cover;
  bottom: 0;
  left: 0;
  z-index: -1;
}

/*--- 概要 ---*/
#overview {
  padding: 50px 0 107px;
  position: relative;
}
#overview::before {
  content: "";
  position: absolute;
  aspect-ratio: 375/123;
  width: 100%;
  background: url(../img/fireworks.webp) no-repeat center/contain;
  top: 0;
  left: 0;
}
#overview .present {
  margin: 34px auto;
  text-align: center;
}
#overview .present_note .note {
  border-left: 3px solid #FFED00;
  padding-left: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
}

/*--- 対象店舗 ---*/
#shop {
  background-color: #286AB7;
  padding-bottom: 110px;
}
#shop .sec_ttl {
  margin-bottom: 36px;
}
#shop .shop_block:not(:last-child) {
  margin-bottom: 15px;
}
#shop .shop_block dt {
  padding: 10px;
  background: #FFF;
  position: relative;
  cursor: pointer;
  color: #286AB7;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
}
#shop .shop_block dt::before {
  content: "";
  background: url(../img/icon_minus.svg);
  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  right: 10px;
  translate: 0 -50%;
}
#shop .shop_block dt.open::before {
  background: url(../img/icon_plus.svg);
}
#shop .shop_block dd {
  display: none;
  padding: 16px 0 20px;
}
#shop .shop_block dd .shop_list li {
  font-size: 14px;
  font-weight: 700;
  padding-left: 2em;
  position: relative;
}
#shop .shop_block dd .shop_list li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

/*--- 抽選方法 ---*/
#method {
  background-color: #5D9AE0;
  padding-bottom: 54px;
}
#method .method_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
#method .method_wrap .method_box {
  width: calc(50% - 5px);
  text-align: center;
}
#method .method_wrap .method_box .method_txt {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.4;
}

/*--- 会員番号確認方法 ---*/
#number .tab_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
#number .tab_list .tab {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  color: #286AB7;
  font-size: 13px;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc(50% - 5px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#number .tab_list .tab::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent #286AB7;
  position: absolute;
  top: 0;
  right: 13px;
  bottom: 0;
  margin: auto;
  rotate: 90deg;
}
#number .tab_list .tab.active, #number .tab_list .tab:hover {
  background: #286AB7;
  color: #fff;
}
#number .tab_list .tab.active::after, #number .tab_list .tab:hover::after {
  border-color: transparent transparent transparent #fff;
}
#number .tab_article_list .tab_article {
  padding: 36px 0px 55px;
}
#number .tab_article_list .tab_article:not(.active) {
  display: none;
}
#number .tab_article_list .tab_article .card_ttl {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}
#number .tab_article_list .tab_article .img {
  margin-bottom: 24px;
  text-align: center;
}
#number .step {
  margin-bottom: 36px;
}
#number .step_box {
  position: relative;
  padding: 28px 25px 18px;
  background-color: #fff;
  border: 2px solid #003484;
  border-radius: 20px;
  color: #000;
}
#number .step_box::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  top: -18px;
  left: -18px;
}
#number .step_box:nth-child(1)::before {
  background: url(../img/icon_step01.svg) no-repeat center/contain;
}
#number .step_box:nth-child(2)::before {
  background: url(../img/icon_step02.svg) no-repeat center/contain;
}
#number .step_box:nth-child(3)::before {
  background: url(../img/icon_step03.svg) no-repeat center/contain;
}
#number .step_box:not(:last-child) {
  margin-bottom: 26px;
}
#number .step_box:not(:last-child)::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 14px;
  border-color: transparent transparent transparent #000;
  position: absolute;
  left: 50%;
  bottom: -19px;
  translate: -50%;
  rotate: 90deg;
}
#number .step_box .img_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#number .step_box .img_wrap .step_txt {
  font-weight: 700;
}
#number .step_box .img_wrap .step_img {
  max-width: 100px;
}
#number .step_box .img_wrap .step_img img {
  width: 100%;
}
#number .attention {
  border: 1px solid #fff;
}
#number .attention_ttl {
  border-bottom: 1px solid #fff;
  text-align: center;
  font-weight: 700;
  padding: 13px 0;
}
#number .attention_inner {
  padding: 30px 15px 28px;
}
#number .attention_inner .txt {
  text-align: left;
}
#number .attention_inner .img {
  text-align: center;
  margin-bottom: 22px;
}
#number .attention_inner .indent {
  font-size: 13px;
  padding-left: 1em;
  text-indent: -1em;
}
#number .attention_inner .note {
  margin: 24px auto 21px;
  text-align: center;
  font-size: 13px;
  color: #E00000;
  font-weight: 700;
}
#number .attention_inner .note span {
  background-color: #FFED00;
  border-radius: 100vmax;
  padding: 8px;
}

/*--- 応募規約 ---*/
#terms {
  background-color: #286AB7;
  padding-bottom: 53px;
}
#terms .sec_ttl_nobg {
  text-align: center;
  font-weight: 700;
  margin-bottom: 20px;
}
#terms .terms_txt {
  font-size: 13px;
  line-height: 1.4;
}
#terms .terms_txt a {
  text-decoration: underline;
}

#number {
  background-color: #5D9AE0;
  padding: 5px 0 118px;
}

/* ▼▼▼ フッター
====================================================== */
footer {
  background-color: #286AB7;
  padding-bottom: 100px;
}
footer .footer_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px 12px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer .footer_inner li {
  width: calc(50% - 6px);
}
footer .footer_inner li a {
  width: 100%;
}
footer .footer_inner li a img {
  width: 100%;
}

/* ▼▼▼ PC表示
====================================================== */
.campaign {
  /*--- PCスマホ幅で表示 ---*/
}
@media screen and (min-width: 768px) {
  .campaign {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .campaign .col_bg_fixed {
    display: block;
  }
  .campaign .contents_wrap {
    width: 100%;
    max-width: 375px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    overflow: hidden;
    z-index: 1;
  }
  .campaign .col_left {
    position: sticky;
    top: 0;
    left: 0;
    width: calc(100% - (50vw + 187.5px));
    height: 100vh;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    background: url(../img/pc_bg_left.webp) no-repeat top left/cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .campaign .col_left .lp_header {
    max-width: 442px;
    padding: 0 20px;
  }
  .campaign .col_right {
    position: sticky;
    top: 0;
    right: 0;
    width: calc(100% - (50vw + 187.5px));
    height: 100vh;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    background: url(../img/pc_bg_right.webp) no-repeat top right/cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .campaign .col_right .category_list {
    max-width: 390px;
    width: 100%;
    padding: 0 20px;
  }
  .campaign .col_right .category_list .pc_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
  }
  .campaign .col_right .category_list .pc_nav li {
    width: calc(50% - 5px);
  }
  .campaign .col_right .category_list .pc_nav li a {
    position: relative;
    background-color: #D00080;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
  }
  .campaign .col_right .category_list .pc_nav li a::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    right: 13px;
    bottom: 0;
    margin: auto;
    rotate: 90deg;
  }
}