@charset "UTF-8";

/* ----------------------------------------------------------------
reset
----------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

body {
  font-family: "ヒラギノ角ゴシック", sans-serif;
}

img {
  width: 100%;
  vertical-align: bottom;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: #fff;
}

a {
  text-decoration: none;
  color: #000;
  transition: 0.3s ease-in-out;
}

a:hover {
  opacity: 0.6;
}

button {
  color: #000;
}

picture {
  display: block;
}

/* ----------------------------------------------------------------
header
----------------------------------------------------------------- */
.Hd {
  width: 100%;
  z-index: 1000;
  background-color: #000;
}

.Hd .Wrap {
  text-align: center;
}

.Hd_Logo {
  max-width: 167px;
  margin: 0 auto;
}

@media screen and (max-width:479px) {
  .Hd_Logo {
    max-width: 83.5px;
    margin: 0 auto;
  }
}

/* --------------
breadcrumb
--------------*/
.breadcrumb {
  background-color: #fff;
}

.breadcrumb ul {
  display: flex;
  padding: 10px;
}

.breadcrumb ul li {
  position: relative;
  margin: 0 15px;
  font-size: 20px;
}

.breadcrumb ul li a {
  text-decoration: underline;
}

.breadcrumb ul li:first-child {
  margin-left: 0;
}

.breadcrumb ul li::after {
  position: absolute;
  top: 0;
  margin: auto;
  content: "＞";
  vertical-align: middle;
  right: -18px;
  width: 9px;
  height: 9px;
}

.breadcrumb ul li:last-child::after {
  content: none;
}

@media screen and (max-width:760px) {
  .breadcrumb ul li {
    position: relative;
    margin: 0 10px;
  }

  .breadcrumb ul li::after {
    right: -15px;
  }
}

/* --------------
    sec07
--------------*/
.sec07 {
  background-color: #000;
  padding: 15px 0 0;
}

.sec07 p {
  font-size: 16px;
  text-align: center;
  color: #fff;
}

.sec07 p span {
  font-size: 18px;
  font-weight: bold;
}

.sec07 .sec07_sns_area {
  border-bottom: 1px solid rgb(119, 119, 119);
  padding-bottom: 24px;
}

.sec07 .sec07_sns_area ul {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.sec07 .sec07_sns_area ul li:first-child {
  margin-right: 8px;
}

.sec07 .sec07_sns_area img {
  max-width: 41px;
}

.sec07 .sec07_app_area {
  padding-top: 24px;
}

.sec07 .sec07_app_area ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px 5% 0;
}

.sec07 .sec07_app_area ul li:first-child {
  max-width: 153px;
}

.sec07 .sec07_app_area ul li a,
.sec07 .sec07_app_area ul li a img {
  display: block;
  width: 100%;
}

.sec07 .sec07_app_area ul li:not(:last-child) {
  margin-right: 16px;
}

.sec07 .sec07_app_area ul li:nth-child(2) {
  margin-right: 48px;
}

@media screen and (max-width:760px) {
  .sec07 p {
    font-size: 2.11vw;
  }

  .sec07 p span {
    font-size: 2.37vw;
  }

  .sec07 .sec07_sns_area img {
    max-width: 8.16vw;
  }

  .sec07 .sec07_app_area ul li:not(:last-child) {
    margin-right: 2.11vw;
  }

  .sec07 .sec07_app_area ul li:nth-child(2) {
    margin-right: 6.32vw;
  }
}

/* --------------
footer
--------------*/
.footer {
  font-size: 12px;
  text-align: center;
  background-color: #000;
  padding: 2.4vw 0;
  color: #fff;
}

@media screen and (min-width:769px) {
  .footer {
    padding: 48px 0 18px;
  }
}

.wrapper {
  margin: 0 auto;
}

.responsive-area {
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
}

@media screen and (min-width: 769px) {
  .responsive-area {
    max-width: 1280px;
  }
}

@media screen and (min-width: 1281px) {
  .responsive-area {
    width: 1280px;
  }
}

.kv_section {
  position: relative;
  background: linear-gradient(to top, #950403, #e19516);
}

.kv_section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #000;
}

.kv_section h1 {
  position: relative;
  z-index: 1;
}

.auspicious_day_section {
  position: relative;
  background-color: #910c13;
}

.auspicious_day_section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 26px;
  background: linear-gradient(to bottom, #8e0b0b 35%, #f8d88c 84%);
}

.auspicious_day_section picture {
  position: relative;
  z-index: 1;
}

.entry_section {
  background-color: #f8d88c;
  padding: 20px 0 47px;
}

.entry_section .button_02 {
  max-width: 510px;
  margin-top: 50px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.entry_section .button_02:hover {
  opacity: 0.8;
}

.caption {
  width: fit-content;
  margin: 0 auto;
}

.entry_section .caption {
  margin-top: 10px;
  padding-left: 123px;
  padding-right: 123px;
}

.caption li {
  padding-left: 1em;
  text-indent: -1em;
  font-weight: bold;
  font-size: 24px;
}

.entry_section .caption li {
  font-size: 24px;
}

.entry_section .caption li:not(:first-child) {
  margin-top: 10px;
}

.fc_red {
  color: #ff0000;
}

.button {
  display: block;
  margin: 0 auto;
}

.button a {
  display: block;
  transition: 0.3s ease-in-out;
}

.button a:hover {
  opacity: 0.8;
}

.button.button_entry {
  width: 520px;
}

.image {
  margin: 0 auto;
}

.banner_section-01 {
  position: relative;
  background-image: url(/contents_lp/3rdanniversary/img/img-anniversary_bg_01.png);
}

.reward_section {
  background: linear-gradient(to bottom, #d60000 0%, #880000 100%);
  position: relative;
}

.reward_section::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 9px;
  background-image: url(/contents_lp/3rdanniversary/img/img-anniversary_bg_02.png);
}

.reward_section .block_wrap_01 {
  background-image: url(/contents_lp/3rdanniversary/img/img-reward_bg_01.png);
  background-size: 100% 100%;
}

.reward_section .block_wrap_01~.banner {
  margin-top: -208px;
}

.reward_section .block_wrap_02 {
  background-image: url(/contents_lp/3rdanniversary/img/img-reward_bg_03.png);
  background-size: 100% 100%;
  padding-bottom: 77px;
}

.reward_section .block {
  max-width: 793px;
  background-color: #f8d88c;
  margin: 0 auto;
  padding: 35px 0 48px;
  position: relative;
}

.reward_section .block::before {
  content: '';
  width: 100%;
  height: 11px;
  position: absolute;
  bottom: 0;
  background-image: url(/contents_lp/3rdanniversary/img/img-reward_bg_02.png);
}

.reward_section .block .image_01 {
  max-width: 612px;
}

.reward_section .block .image_02 {
  max-width: 240px;
  margin-top: 37px;
}

.reward_section .block .image_03 {
  max-width: 466px;
  margin-top: 34px;
}

.reward_section .block .image_04 {
  max-width: 240px;
  margin-top: 37px;
}

.reward_section .block .image_05 {
  max-width: 366px;
  margin-top: 34px;
}

.reward_section .block .image_06 {
  max-width: 492px;
  margin-top: 37px;
}

.reward_section .block .button_entry {
  margin-top: 35px;
}

.reward_section .block .step_02 {
  margin-top: 75px;
}

.reward_section .caption li {
  font-size: 19px;
  margin-top: 28px;
}

.reward_section .kuji_list {
  display: flex;
  max-width: 620px;
  justify-content: space-between;
  margin: 47px auto 0;
}

.banner_section {
  position: relative;
}

.banner_section-02 {
  background: linear-gradient(to top, #5e1700 0%, #7d1700 25%, #601800 100%);
}

.banner_section-02::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 41px;
  background-image: url(/contents_lp/3rdanniversary/img/img-banner_bg_01.png);
}

.banner_section-02 .responsive-area {
  position: relative;
  z-index: 1;
}

.banner_section-03 {
  background: linear-gradient(to top, #5e1700, #970003);
}

.campaign_section {
  position: relative;
  background-image: url(/contents_lp/3rdanniversary/img/img-campaign_bg_02.png);
}

.campaign_section .responsive-area {
  background-image: url(/contents_lp/3rdanniversary/img/img-campaign_bg_01.png);
  background-size: 100% 100%;
  height: 885px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 103px 0 109px;
}

.campaign_section .responsive-area .text_01 {
  max-width: 816px;
  margin: 0 auto;
}

.campaign_section .responsive-area .banner {
  max-width: 832px;
  margin: 50px auto 0;
}

.campaign_section .responsive-area .text_02 {
  max-width: 731px;
  margin: 0 auto;
}

.campaign_section .responsive-area .button {
  max-width: 663px;
  margin-top: 40px;
}

.easy_modal {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #666;
}

.easy_modal .modal_content {
  position: absolute;
  background-color: #fff;
  width: 89.3333333333vw;
  height: 82.0089955022%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5.6vw 0;
  font-size: 14px;
  line-height: 1.4285714286;
}

@media screen and (min-width: 769px) {
  .easy_modal .modal_content {
    width: 689px;
    padding: 50px 0 50px;
    line-height: 1.4285714286;
  }
}

@media screen and (min-width: 1025px) {
  .easy_modal .modal_content {
    width: 985px;
  }
}

.modal_content .modal_close {
  position: absolute;
  width: 5.6vw;
  height: 5.6vw;
  position: absolute;
  background-image: url(../img/ico-modal_close.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: -8vw;
  right: 0vw;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .modal_content .modal_close {
    width: 3.5vw;
    height: 3.5vw;
    top: -5vw;
  }
}

@media screen and (min-width: 1025px) {
  .modal_content .modal_close {
    width: 42px;
    height: 42px;
    top: -60px;
  }
}

.modal_content .inner {
  width: 84vw;
  height: 100%;
  margin: 0 auto;
  padding: 0 2.6666666667vw 0 0;
  overflow-y: scroll;
  scrollbar-width: medium;
  scrollbar-color: #afafaf #fff;
}

@media screen and (min-width: 769px) {
  .modal_content .inner {
    width: 645px;
    padding: 0 30px 0 29px;
  }
}

@media screen and (min-width: 1025px) {
  .modal_content .inner {
    width: 940px;
    padding: 0 44px 0 29px;
  }
}

.modal_content .inner .n-Block {
  padding-left: 3.7333333333vw;
}

@media screen and (min-width: 769px) {
  .modal_content .inner .n-Block {
    padding-left: 23px;
  }
}

@media screen and (min-width: 1025px) {
  .modal_content .inner .n-Block {
    padding-left: 28px;
  }
}

.modal_content .inner .n-Block .Block {
  width: 74.9333333333vw;
}

@media screen and (min-width: 769px) {
  .modal_content .inner .n-Block .Block {
    width: 547px;
  }
}

@media screen and (min-width: 1025px) {
  .modal_content .inner .n-Block .Block {
    width: 816px;
  }
}

.modal_content .inner .n-Block .Block dd {
  width: 74.9333333333vw;
}

@media screen and (min-width: 769px) {
  .modal_content .inner .n-Block .Block dd {
    width: 547px;
  }
}

@media screen and (min-width: 1025px) {
  .modal_content .inner .n-Block .Block dd {
    width: 816px;
  }
}

.modal_content .inner dl dt {
  font-weight: 600;
}

.modal_content .inner dl dd .Block {
  width: 78.6666666667vw;
  display: flex;
  justify-content: space-between;
  margin-top: 0.9333333333vw;
}

@media screen and (min-width: 769px) {
  .easy_modal .modal_content .inner dl dd .Block {
    width: 559px;
    margin-top: 7px;
  }
}

@media screen and (min-width: 1025px) {
  .easy_modal .modal_content .inner dl dd .Block {
    width: 844px;
  }
}

.easy_modal .modal_content .inner dl dd .Block dt {
  width: 26px;
  font-weight: 300;
}

@media screen and (min-width: 769px) {
  .easy_modal .modal_content .inner dl dd .Block dt {
    width: 24px;
  }
}

.easy_modal .modal_content .inner dl dd .Block dd {
  width: 74.6666666667vw;
}

@media screen and (min-width: 769px) {
  .easy_modal .modal_content .inner dl dd .Block dd {
    width: 535px;
  }
}

@media screen and (min-width: 1025px) {
  .easy_modal .modal_content .inner dl dd .Block dd {
    width: 815px;
  }
}

.easy_modal .modal_content .inner::-webkit-scrollbar {
  width: 2.6666666667vw;
}

@media screen and (min-width: 769px) {
  .easy_modal .modal_content .inner::-webkit-scrollbar {
    width: 1.6666666667vw;
  }
}

@media screen and (min-width: 1025px) {
  .easy_modal .modal_content .inner::-webkit-scrollbar {
    width: 20px;
  }
}

.easy_modal .modal_content .inner::-webkit-scrollbar-track {
  background-color: #fff;
}

.easy_modal .modal_content .inner::-webkit-scrollbar-thumb {
  background-color: #afafaf;
}

@media screen and (max-width:1280px) {
  .button.button_entry {
    width: 40.6vw;
  }

  .auspicious_day_section::before {
    height: 2.03vw;
  }

  .entry_section {
    padding: 1.56vw 0 3.67vw;
  }

  .entry_section .button_02 {
    max-width: 39.8vw;
    margin-top: 3.91vw;
  }

  .entry_section .caption {
    padding-left: 9.61vw;
    padding-right: 9.61vw;
  }

  .entry_section .caption li:not(:first-child) {
    margin-top: 0.78vw;
  }

  .entry_section .caption li {
    font-size: 1.875vw;
  }

  .reward_section::before {
    display: none;
  }

  .reward_section .block_wrap_02 {
    padding-bottom: 6.02vw;
  }

  .reward_section .block {
    max-width: 61.9vw;
    padding: 2.73vw 0 3.75vw;
  }

  .reward_section .block::before {
    height: 0.86vw;
  }

  .reward_section .block .image_01 {
    max-width: 47.8vw;
  }

  .reward_section .block .image_02 {
    max-width: 18.7vw;
    margin-top: 2.9vw;
  }

  .reward_section .block .image_03 {
    max-width: 36.4vw;
    margin-top: 2.7vw;
  }

  .reward_section .block .image_04 {
    max-width: 18.7vw;
    margin-top: 2.9vw;
  }

  .reward_section .block .image_05 {
    max-width: 28.6vw;
    margin-top: 2.7vw;
  }

  .reward_section .block .image_06 {
    max-width: 38.44vw;
    margin-top: 2.7vw;
  }

  .reward_section .block .step_02 {
    margin-top: 5.86vw;
  }

  .reward_section .kuji_list .kuji_item {
    max-width: 14.84vw;
  }

  .reward_section .kuji_list {
    max-width: 48.4vw;
    margin-top: 3.7vw;
  }

  .reward_section .block_wrap_01~.banner {
    margin-top: -16.25vw;
  }

  .reward_section .caption li {
    font-size: 1.484vw;
    margin-top: 2.1875vw;
  }

  .reward_section .block .button_entry {
    margin-top: 2.73vw;
  }

  .campaign_section .responsive-area {
    height: 69.1vw;
    padding: 8vw 0 8.5vw;
  }

  .campaign_section .responsive-area .text_01 {
    max-width: 63.7vw;
  }

  .campaign_section .responsive-area .banner {
    max-width: 65vw;
    margin-top: 3.9vw;
  }

  .campaign_section .responsive-area .text_02 {
    max-width: 57.1vw;
  }

  .campaign_section .responsive-area .button {
    max-width: 51.8vw;
    margin-top: 3.1vw;
  }
}

@media screen and (max-width:768px) {
  .breadcrumb ul li {
    font-size: 14px;
  }

  .button.button_entry {
    width: 67.71vw;
  }

  .entry_section .caption {
    padding-left: 4.82vw;
    padding-right: 4.82vw;
  }

  .entry_section .caption li {
    font-size: 2.08vw;
  }

  .entry_section .button_02 {
    margin-top: 2.60vw;
    max-width: 67.71vw;
  }

  .reward_section .block_wrap_01~.banner {
    margin-top: -18.25vw;
  }

  .reward_section .block_wrap_01 {
    background-image: url(/contents_lp/3rdanniversary/img/img-reward_bg_01_sp.png);
  }

  .reward_section .block_wrap_02 {
    background-image: url(/contents_lp/3rdanniversary/img/img-reward_bg_03_sp.png);
  }

  .reward_section .block {
    max-width: 86.07vw;
    padding: 3.91vw 0 5.21vw;
  }

  .reward_section .block::before {
    height: 1.6vw;
  }

  .reward_section .block .image_01 {
    max-width: 66.28vw;
  }

  .reward_section .block .image_02 {
    max-width: 25.91vw;
    margin-top: 4.17vw;
  }

  .reward_section .block .image_03 {
    max-width: 50.65vw;
    margin-top: 3.78vw;
  }

  .reward_section .caption li {
    font-size: 2.08vw;
  }

  .reward_section .block .image_04 {
    max-width: 25.91vw;
    margin-top: 6.9vw;
  }

  .reward_section .block .image_05 {
    max-width: 39.71vw;
    margin-top: 3.78vw;
  }

  .reward_section .block .image_06 {
    max-width: 53.26vw;
    margin-top: 3.78vw;
  }

  .reward_section .kuji_list {
    max-width: 67.32vw;
  }

  .reward_section .kuji_list .kuji_item {
    max-width: 20.05vw;
  }

  .campaign_section .responsive-area {
    height: 77.21vw;
  }

  .campaign_section .responsive-area .banner {
    max-width: 83.33vw;
  }

  .campaign_section .responsive-area .button {
    max-width: 66.28vw;
    margin-top: 4.69vw;
  }
}

.campaign_close {
  display: none;
  text-align: center;
  padding: 15px;
  color: #FF0000;
  font-weight: bold;
  border: 4px solid #CC0933;
  background-color: #fff;
  max-width: 1280px;
  margin: 10px auto;
}