@charset "UTF-8";

html {
  font-size: 10px !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media screen and (max-width: 890px) {
  html {
    font-size: 1.3333333333vw !important;
  }
}

body {
  background-color: #EEE5C9;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴシック", sans-serif;
  font-size: 16px;
  color: #333333;
  overflow-x: hidden;
}

*.sp-only {
  display: block;
}

@media screen and (min-width: 891px) {
  *.sp-only {
    display: none;
  }
}

*.pc-only {
  display: none;
}

@media screen and (min-width: 891px) {
  *.pc-only {
    display: block;
  }
}

.mvBg {
  background-image: url(/assets/img/common/bg.png);
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
  background-size: cover;
  margin-top: -10px;
}

@media screen and (max-width: 890px) {
  .mvBg {
    background-image: url(/assets/img/common/bg_sp5.png);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: center;
    background-size: cover;
  }
}

/* add 241127 */
.closeAtt {
  padding-top: 20rem;
}

@media screen and (max-width: 890px) {
  .closeAtt {
    padding-top: 25rem;
  }
}

.closeAtt__wrap {
  margin-inline: auto;
  width: 84rem;
  height: 12.6rem;
  background-image: url(/assets/img/top/close_bg_pc.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 890px) {
  .closeAtt__wrap {
    width: 54rem;
    height: 25.8rem;
    background-image: url(/assets/img/top/close_bg_sp.png);
  }
}

.closeAtt__txt {
  width: 83rem;
  padding: 1.8rem 0 0 2.5rem;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  color: #ff0000;
}

@media screen and (max-width: 890px) {
  .closeAtt__txt {
    width: 53.5rem;
    padding: 2.5rem 0;
    font-size: 1.8rem;
  }
}

.destinationCampaign img {
  position: absolute;
  top: 18px;
  left: 220px;
  width: 166px;
  height: 144px;
  z-index: 2;
}

@media screen and (max-width: 890px) {
  .destinationCampaign img {
    position: absolute;
    top: 2.3vw;
    left: 25vw;
    width: 32vw;
    height: 22.4vw;
  }
}

.kv {
  margin: 0 auto;
  padding-top: 8rem;
  max-width: 839px;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 890px) {
  .kv {
    padding-top: 13rem;
    max-width: 100%;
  }
}

.kv__main {
  margin-left: 80px;
  position: relative;
  z-index: 1;
  width: 808px;
}

@media screen and (max-width: 890px) {
  .kv__main {
    margin-left: 0;
    padding-left: 1rem;
    width: 100%;
  }
}

.kv__day {
  width: 190px;
  position: absolute;
  top: 120px;
  right: -60px;
  /* z-index: 1; */
}

@media screen and (max-width: 890px) {
  .kv__day {
    width: 30%;
    top: 15vw;
    right: 2.5vw;
  }
}

.intro__container {
  margin: 0 auto;
  max-width: 839px;
  position: relative;
}

@media screen and (max-width: 890px) {
  .intro__container {
    max-width: initial;
  }
}

.intro__payArticle {
  margin: 30px 0 0 0;
  text-align: center;
  padding-bottom: 97px;
}

@media screen and (max-width: 890px) {
  .intro__payArticle {
    margin: 6rem 0 0;
    padding: 0 9rem 13rem;
  }
}

.intro__payArticle img {
  width: 701px;
  height: auto;
}

@media screen and (min-width: 891px) {
  .intro__payArticle img {
    margin: 0 auto;
  }
}

@media screen and (max-width: 890px) {
  .intro__payArticle img {
    width: 100%;
  }
}

.intro__payArticle--qr {
  position: absolute;
  top: -135px;
  right: -70px;
  z-index: 1;
}

@media screen and (max-width: 890px) {
  .intro__payArticle--qr {
    top: -10rem;
    right: 7rem;
    z-index: 2;
  }
}

.intro__payArticle--qr img {
  width: 180px;
  height: auto;
}

@media screen and (max-width: 890px) {
  .intro__payArticle--qr img {
    width: 23rem;
  }
}

.intro__payArticle--icon {
  position: absolute;
  top: 30px;
  right: -15px;
  z-index: 1;
}

@media screen and (max-width: 890px) {
  .intro__payArticle--icon {
    top: 11rem;
    right: 7rem;
    z-index: 2;
  }
}

.intro__payArticle--icon img {
  width: 124px;
  height: auto;
}

@media screen and (max-width: 890px) {
  .intro__payArticle--icon img {
    width: 16.4rem;
  }
}

.intro__pageLink {
  display: flex;
  gap: 60px;
  justify-content: center;
  padding-bottom: 50px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink {
    flex-direction: column;
    gap: 10rem;
    padding: 0 10rem 12rem;
  }
}

.intro__pageLink-list {
  position: relative;
  background-color: #fff;
  width: 388px;
  border-radius: 20px;
  text-align: center;
  padding: 100px 12px 13px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list {
    width: 100%;
    padding: 14rem 2rem 2rem;
    position: relative;
    z-index: 2;
  }
}

.intro__pageLink-list img {
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
}

.intro__pageLink-list p {
  position: relative;
  font-weight: 500;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list p {
    font-size: calc(22 / 750* 100vw);
  }
}

.intro__pageLink-list p::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -13px;
  background-image: url(/assets/img/top/intro_pageLink_mark01.png);
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  height: 38px;
  width: 26px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list p::before {
    left: 3rem;
    top: -2rem;
    background-size: contain;
    height: 5rem;
    width: 4rem;
  }
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list p {
    font-size: calc(22 / 750* 100vw);
  }
}

.intro__pageLink-list p::after {
  content: "";
  position: absolute;
  right: 22px;
  top: -13px;
  background-image: url(/assets/img/top/intro_pageLink_mark02.png);
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  height: 38px;
  width: 26px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list p::after {
    right: 3rem;
    top: -2rem;
    background-size: contain;
    height: 5rem;
    width: 4rem;
  }
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list p {
    font-size: calc(22 / 750* 100vw);
  }
}

.intro__pageLink-campaignimg {
  width: 140px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list .intro__pageLink-campaignimg {
    width: 19rem;
    top: -7rem;
  }
}

.intro__pageLink-searchimg {
  width: 190px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list .intro__pageLink-searchimg {
    width: 26rem;
    top: -6rem;
  }
}

.intro__pageLink-list .link-btn {
  max-width: 367px;
  width: 100%;
  aspect-ratio: 367 / 53;
  margin-top: 18px;
}

@media screen and (max-width: 890px) {
  .intro__pageLink-list .link-btn {
    max-width: calc(504 / 750* 100vw);
    aspect-ratio: 504 / 74;
    margin-top: 2rem;
  }
}

.link-btn.link-btn--about {
  background-image: url(/assets/img/top/img_campaignbtn.png);
}

.link-btn.link-btn--about:hover {
  background-image: url(/assets/img/top/img_campaignbtn_h.png);
}

@media screen and (max-width: 890px) {
  .link-btn.link-btn--about:hover {
    background-image: url(/assets/img/top/img_campaignbtn.png);
  }
}

.link-btn.link-btn--search {
  background-image: url(/assets/img/top/img_searchbtn.png);
}

.link-btn.link-btn--search:hover {
  background-image: url(/assets/img/top/img_searchbtn_h.png);
}

@media screen and (max-width: 890px) {
  .link-btn.link-btn--search:hover {
    background-image: url(/assets/img/top/img_searchbtn.png);
  }
}

.intro__point-list {
  display: flex;
  align-items: flex-end;
  gap: 60px;
}

@media screen and (max-width: 890px) {
  .intro__point-list {
    flex-direction: column;
    gap: calc(40 / 750 * 100vw);
  }
}

.intro__point-list .intro__point:last-of-type {
  height: 238px;
  background-image: url(/assets/img/top/search_img_store.png);
}

@media screen and (max-width: 890px) {
  .intro__point-list .intro__point:last-of-type {
    height: calc(331 / 750 * 100vw);
  }
}

.intro__point-list .intro__point:last-of-type a {
  background-image: url(/assets/img/top/store_search_btn.png);
}

.intro__point-list .intro__point:last-of-type:hover.intro__point a {
  background-image: url(/assets/img/top/store_search_btn_hoverd.png);
}

.intro__point {
  position: relative;
  max-width: 389px;
  height: 257px;
  width: 100%;
  margin: 0 auto;
  background-image: url(/assets/img/top/search_img_h.png);
  background-position: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 890px) {
  .intro__point {
    max-width: calc(540 / 750 * 100vw);
    height: calc(356 / 750 * 100vw);
    z-index: 2;
  }
}

.intro__point a {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 50%;
  max-width: 363px;
  width: 100%;
  height: 53px;
  transform: translateX(-50%);
  background-image: url(/assets/img/top/search_btn.png);
  background-position: no-repeat;
  background-size: cover;
  cursor: pointer;
}

@media screen and (max-width: 890px) {
  .intro__point a {
    bottom: calc(20 / 750 * 100vw);
    max-width: calc(504 / 750 * 100vw);
    height: calc(73 / 750 * 100vw);
  }
}

.intro__point:hover.intro__point a {
  background-image: url(/assets/img/top/search_btn_hoverd.png);
}

.intro__att {
  margin-top: 40px;
  position: relative;
}

@media screen and (max-width: 890px) {
  .intro__att {
    margin-top: 8rem;

  }
}

.intro__att--bg {
  margin: 0 auto;
}

@media screen and (max-width: 890px) {
  .intro__att--bg {
    width: 72%;
    position: relative;
    z-index: 3;
  }
}

.intro__att--p {
  /* width: 700px; */
  text-align: center;
  line-height: 30px;
  color: red;
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px 0;
  /* position: absolute; */
  /* top: 30px;
  left: 85px; */
}

@media screen and (max-width: 890px) {
  .intro__att--p {
    /* width: 54rem; */
    font-size: calc(20 / 750* 100vw);
    line-height: 4rem;
    margin: 0 10rem;
    padding: 4rem 0.5rem;
    /* top: 3.5rem;
    left: 11rem; */
    z-index: 3;
  }
}

.intro__att--p.p01 {
  width: 670px;
  top: 15px;
  left: 85px;
}

@media screen and (max-width: 890px) {
  .intro__att--p.p01 {
    width: 54rem;
    top: 2rem;
    left: 11rem;
  }
}

.intro__att--p.p02 {
  /* width: 700px; */
  /* top: 30px;
  left: 85px; */
}

@media screen and (max-width: 890px) {
  .intro__att--p.p02 {
    /* width: 54rem; */
    /* top: 3.5rem;
    left: 11rem; */
  }
}

.intro__att--p a {
  text-decoration: underline;
}

.intro__att--p span {
  display: block;
  text-align: center;
  font-size: 10px;
}

@media screen and (max-width: 890px) {
  .intro__att--p span {
    text-align: left;
    margin-top: 1.5rem;
    font-size: 1.4rem;
    line-height: 1.5em;
    text-indent: -1em;
    padding-left: 2em;
  }
}

.intro__illust1 {
  width: 46vw;
  display: block;
  position: absolute;
  top: -8vw;
  left: -22vw;
}

.intro__illust2 {
  width: 46vw;
  display: block;
  position: absolute;
  top: 92vw;
  right: -22vw;
}

.intro__img {
  text-align: center;
  display: inline-block;
}

@media screen and (max-width: 890px) {
  .intro__img figcaption img {
    margin-bottom: 9vw;
    width: 48vw;
  }
}

@media screen and (max-width: 890px) {
  .intro__img figcaption img:nth-child(3) {
    margin-bottom: 0;
  }
}

.intro__img2 {
  margin: 0 auto 11px auto;
}

@media screen and (max-width: 890px) {
  .intro__img2 {
    width: 44vw;
  }
}

.intro__img3 {
  margin: 0 auto 11px auto;
}

@media screen and (max-width: 890px) {
  .intro__img3 {
    width: 39vw;
  }
}

.home-campaign-wrap {
  position: relative;
  width: 100vw;
  margin: 110px calc(50% - 50vw) 0;
  padding-top: 60px;
  background-color: #f5ebcd;
}

@media screen and (max-width: 890px) {
  .home-campaign-wrap {
    margin-top: calc(140 / 750 * 100vw);
    padding-top: calc(50 / 750 * 100vw);
  }
}

.home-campaign-wrap::before {
  content: "";
  position: absolute;
  top: -2vw;
  left: 0;
  background-image: url(/assets/img/common/brawn-line.png);
  background-repeat: repeat-x;
  background-size: cover;
  width: 100%;
  aspect-ratio: 2400 / 66;
}

.home-campaign-title {
  max-width: 564px;
  width: 100%;
  margin: 0 auto;
}

.home-campaign-intro {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}

@media screen and (max-width: 890px) {
  .home-campaign-intro {
    font-size: calc(20 / 750 * 100vw);
  }
}

.campaign-bnr {
  position: relative;
  padding-right: 24px;
  width: 470px;
  min-height: 160px;
  border-radius: 8px;
  background-color: #fff;
  z-index: 2;

  /* カラム数1つ */
  /* margin: 0 auto;
  width: 470px;
  height: 168px; */
}

@media screen and (max-width: 890px) {
  .campaign-bnr {
    padding-right: calc(30 / 750 * 100vw);
    min-height: calc(230 / 750 * 100vw);

    /* カラム数1つ */
    /* width: 100%;
    height: 23rem; */
  }
}

/* カラム数4つ */
.campaign-list {
  position: relative;
  /* display: grid; */
  /* grid-template-columns: repeat(2, 1fr); */
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  /* width: 980px; */
  max-width: 1020px;
  margin: 48px auto 0;
  padding: 0 20px 140px;
}

@media screen and (max-width: 890px) {
  .campaign-list {
    grid-template-columns: auto;
    gap: calc(60 / 750 * 100vw);
    max-width: calc(700 / 750 * 100vw);
    margin-top: calc(68 / 750 * 100vw);
    padding: 0 0 calc(180 / 750 * 100vw);
  }
}

/* カラム数1つ */
/* .campaign-list {
  position: relative;
  max-width: 1020px;
  margin: 48px auto 0;
  padding: 0 20px 140px;
}
@media screen and (max-width: 890px) {
  .campaign-list {
    max-width: calc(700 / 750 * 100vw);
    margin-top: calc(68 / 750 * 100vw);
    padding: 0 0 calc(180 / 750 * 100vw);
  }
} */

.campaign-bnr__link {
  display: flex;
  align-items: center;
  column-gap: 9px;
  height: 100%;
  margin-right: 14px;
  padding: 20px 0 20px 20px;
}

@media screen and (max-width: 890px) {
  .campaign-bnr__link {
    padding: calc(25 / 750 * 100vw) 0 calc(25 / 750 * 100vw) calc(25 / 750 * 100vw);
  }
}

.campaign-bnr__link.noLink {
  pointer-events: none;
}

.campaign-bnr__att {
  display: block;
  color: red;
  font-size: 14px;
  font-weight: bold;
}

@media screen and (max-width: 890px) {
  .campaign-bnr__att {
    font-size: calc(20 / 750 * 100vw);
  }
}

.campaign-bnr__att.lh {
  line-height: 1.5;
}

.campaign-bnr__date {
  font-size: 13px;
  font-weight: 600;
  line-height: calc(32 / 13);
  color: #0050b4;
  font-feature-settings: "palt";
}

@media screen and (max-width: 890px) {
  .campaign-bnr__date {
    font-size: calc(20 / 750 * 100vw);
  }
}

.campaign-bnr__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: calc(24 / 14);
}

@media screen and (max-width: 890px) {
  .campaign-bnr__desc {
    font-size: calc(20 / 750 * 100vw);
  }
}

.campaign-bnr__desc span {
  font-size: 10px;
}

@media screen and (max-width: 890px) {
  .campaign-bnr__desc span {
    font-size: calc(20 / 750 * 100vw);
  }
}

.campaign-bnr__img {
  flex-shrink: 0;
  width: 160px;
}

@media screen and (max-width: 890px) {
  .campaign-bnr__img {
    width: calc(240 / 750 * 100vw);
  }
}

.campaign-bnr__arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  background-color: #00ccff;
  border-radius: 0 8px 8px 0;
}

@media screen and (max-width: 890px) {
  .campaign-bnr__arrow {
    width: calc(30 / 750 * 100vw);
  }
}

.campaign-bnr__arrow::after {
  content: "";
  background-image: url(/assets/img/top/traiangle-arrow.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 8px;
  height: 9.6px;
}

.campaign-bnr__arrow2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 100%;
  background-color: #00ccff;
  border-radius: 0 8px 8px 0;
}

@media screen and (max-width: 890px) {
  .campaign-bnr__arrow2 {
    width: calc(30 / 750 * 100vw);
  }
}

@media screen and (max-width: 890px) {
  .campaign-bnr__after::after {
    width: calc(10 / 750 * 100vw);
    height: calc(12 / 750 * 100vw);
  }
}

.home-news-title {
  max-width: 564px;
  width: 100%;
  margin: 0 auto;
}

.center-btn {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 40px;
}

@media screen and (max-width: 890px) {
  .center-btn {
    flex-direction: column;
    align-items: center;
    margin-top: calc(37 / 750 * 100vw);
  }
}

.sns-link-flex {
  display: flex;
  align-items: center;
  column-gap: 7px;
  position: absolute;
  top: 50%;
  right: 0;
  max-width: 184px;
  width: 100%;
  transform: translateY(-50%);
}

@media screen and (max-width: 890px) {
  .sns-link-flex {
    align-self: flex-end;
    position: unset;
    max-width: 27rem;
    margin-top: calc(60 / 750 * 100vw);
    margin-right: calc(84 / 750 * 100vw);
    transform: translateY(0);
  }
}

.sns-link-flex .icon {
  max-width: 29px;
  width: 100%;
}

@media screen and (max-width: 890px) {
  .sns-link-flex .icon {
    max-width: calc(40 / 750 * 100vw);
  }
}

.sns-link-flex p {
  font-size: 16px;
  letter-spacing: 0.1em;
  color: #00b4ff;
}

@media screen and (max-width: 890px) {
  .sns-link-flex p {
    font-size: calc(22 / 750 * 100vw);
  }
}

.sns-link-flex .arrow {
  max-width: 13px;
  width: 100%;
}

@media screen and (max-width: 890px) {
  .sns-link-flex .arrow {
    position: relative;
    max-width: 2rem;
    top: -0.2rem;
  }
}

.intro__charm {
  margin: 94px 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

@media screen and (max-width: 890px) {
  .intro__charm {
    margin-top: 8rem;
    display: block;
  }
}

.intro__mapImg {
  margin: 0 auto;
  width: 91vw;
}

.loopSlide {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  width: 100vw;
  overflow: hidden;
  z-index: 5;
  height: 350px;
  padding-top: 40px;
}

@media screen and (max-width: 890px) {
  .loopSlide {
    height: 180px;
    padding-top: 20px;
  }
}

.loopSlide ul {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.loopSlide ul:first-child {
  -webkit-animation: slide1 80s -40s linear infinite;
  animation: slide1 80s -40s linear infinite;
}

.loopSlide ul:last-child {
  -webkit-animation: slide2 80s linear infinite;
  animation: slide2 80s linear infinite;
}

.loopSlide ul li {
  display: inline-block;
  width: 100%;
  min-width: 150px;
  margin-right: 40px;
  list-style: none;
  text-align: center;
}

@media screen and (max-width: 890px) {
  .loopSlide ul li {
    display: inline-block;
    width: 100%;
    min-width: 150px;
    margin-right: 20px;
    list-style: none;
    text-align: center;
  }
}

.loopSlide ul li img {
  display: block;
  height: auto;
  max-width: 264px;
}

@media screen and (max-width: 890px) {
  .loopSlide ul li img {
    width: 150px;
  }
}

@-webkit-keyframes slide1 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slide1 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@keyframes slide2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

.sns {
  padding: 61px 0 79px 0;
}

@media screen and (max-width: 890px) {
  .sns {
    padding: 7vw 0 11vw 0;
  }
}

.sns__movie {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.sns__illust1 {
  display: block;
  position: absolute;
  top: -224px;
  left: -225px;
}

.sns__illust2 {
  position: absolute;
  top: -166px;
  right: -409px;
  z-index: 1;
}

.sns__movieAtc {
  text-align: center;
}

.sns__movieAtcTtl {
  margin-bottom: 18px;
}

.sns__movieAtcTtl img {
  width: 500px;
  margin: 0 auto;
}

@media screen and (max-width: 890px) {
  .sns__movieAtcTtl img {
    width: 80vw;
  }
}

.sns__movieAtcDtl {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 1px;
}

@media screen and (max-width: 890px) {
  .sns__movieAtcDtl {
    font-size: 2rem;
    line-height: 4rem;
  }
}

.sns__ttl {
  margin-top: 75px;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 890px) {
  .sns__ttl {
    margin-top: 11vw;
  }
}

.sns__ttl img {
  margin: 0 auto;
}

@media screen and (max-width: 890px) {
  .sns__ttl img {
    width: 89vw;
  }
}

.sns__dtl {
  margin: 4px 0 33px 0;
  text-align: center;
  font-size: 16px;
}

@media screen and (max-width: 890px) {
  .sns__dtl {
    margin: 1vw 0 5vw 0;
    font-size: 2rem;
  }
}

.sns__moreBtn {
  display: block;
  margin: 46px auto 93px auto;
}

@media screen and (max-width: 890px) {
  .sns__moreBtn {
    margin: 6vw auto 16vw auto;
  }
}

@media screen and (max-width: 890px) {
  .sns__moreBtn img {
    width: 48vw;
  }
}

.sns__timeLine {
  max-width: 600px;
  width: 100%;
  position: relative;
}

.sns__twitter {
  margin: 0 auto;
  width: 520px;
}

@media screen and (max-width: 890px) {
  .sns__twitter {
    margin: 0 auto;
    width: 83vw;
  }
}

.sns__twitterTtl {
  margin-top: 0px;
}

.sns__twitterImg {
  margin: 0 auto;
}

@media screen and (max-width: 890px) {
  .sns__twitterImg {
    width: 98vw;
  }
}

.sns__illust3 {
  position: absolute;
  top: 45px;
  left: -580px;
  z-index: 1;
}

@media screen and (max-width: 890px) {
  .sns__illust3 {
    width: 50vw;
    top: 108vw;
    left: -34vw;
    z-index: -1;
  }
}

.sns__illust4 {
  position: absolute;
  top: -355px;
  right: -594px;
  z-index: 1;
}

@media screen and (max-width: 890px) {
  .sns__illust4 {
    width: 64vw;
    margin: 0 auto;
    top: -177vw;
    left: 33vw;
  }
}

.container {
  margin: 30px auto 0 auto;
  width: 100%;
  position: relative;
}

@media screen and (max-width: 890px) {
  .container {
    margin: 0 auto 0 auto;
  }
}

.sliderBox img {
  opacity: 0.3;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
  margin: 0 auto;
  width: 40vw;
  cursor: pointer;
}

.js_slider .slick-center img {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  margin: 0 auto;
  width: 40vw;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

@media screen and (max-width: 890px) {
  .js_slider .slick-center img {
    width: 77vw;
  }
}

.start_btn {
  position: relative;
}

.start_btn::before {
  content: "";
  display: inline-block;
  background-image: url(/assets/img/common/start.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 7vw;
  height: 7vw;
  position: absolute;
  top: 8vw;
  left: 18vw;
  z-index: 3;
}

@media screen and (max-width: 890px) {
  .start_btn::before {
    width: 13vw;
    height: 13vw;
    top: 13vw;
    left: 43vw;
  }
}

.js_ttl {
  margin-top: 20px;
  text-align: center;
  color: #0050B4;
}

@media screen and (max-width: 890px) {
  .js_ttl {
    margin-top: 4vw;
    font-size: 2.4rem;
  }
}

.modal {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(35, 24, 21, 0.7);
  z-index: 100;
  display: none;
}

.modal.is-open {
  display: block;
}

.modal_container {
  width: 60%;
  max-width: 1200px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.modal iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.modal__close {
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  margin-left: auto;
  margin-bottom: 20px;
}

.modal__close-line {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
}

.modal__close-line:first-of-type {
  top: 15px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.modal__close-line:last-of-type {
  bottom: 12px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.prev,
.next {
  width: 4vw;
  height: 4vw;
  background-size: cover;
  position: absolute;
  top: 40%;
  -webkit-transform: translate(-40%, 0);
  transform: translate(-40%, 0);
  z-index: 1;
  cursor: pointer;
}

@media screen and (max-width: 890px) {

  .prev,
  .next {
    width: 8vw;
    height: 8vw;
  }
}

.prev {
  top: 38%;
  left: 29%;
}

@media screen and (max-width: 890px) {
  .prev {
    top: 33%;
    left: 9%;
  }
}

.prev::before {
  content: "";
  display: block;
  background-image: url(/assets/img/common/arrow5.png);
  background-repeat: no-repeat;
  width: 4vw;
  height: 4vw;
  background-size: contain;
}

@media screen and (max-width: 890px) {
  .prev::before {
    width: 9vw;
    height: 9vw;
  }
}

.prev:hover:before {
  content: "";
  display: block;
  background-image: url(/assets/img/common/arrow5_h.png);
  background-repeat: no-repeat;
  width: 4vw;
  height: 4vw;
  background-size: contain;
}

@media screen and (max-width: 890px) {
  .prev:hover:before {
    width: 9vw;
    height: 9vw;
  }
}

.next {
  top: 38%;
  right: 26%;
}

@media screen and (max-width: 890px) {
  .next {
    top: 30%;
    right: 3%;
  }
}

.next::before {
  content: "";
  display: block;
  background-image: url(/assets/img/common/arrow6.png);
  background-repeat: no-repeat;
  width: 4vw;
  height: 4vw;
  background-size: contain;
}

@media screen and (max-width: 890px) {
  .next::before {
    width: 9vw;
    height: 9vw;
  }
}

.next:hover:before {
  content: "";
  display: block;
  background-image: url(/assets/img/common/arrow6_h.png);
  background-repeat: no-repeat;
  width: 4vw;
  height: 4vw;
  background-size: contain;
}

@media screen and (max-width: 890px) {
  .next:hover:before {
    width: 9vw;
    height: 9vw;
  }
}

.btn_aHover1 {
  display: block;
  background-image: url(/assets/img/top/store_btn.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 259px;
  height: 53px;
}

@media screen and (max-width: 890px) {
  .btn_aHover1 {
    margin: 0 auto 9vw auto;
    width: 49vw;
    height: 10vw;
    background-size: cover;
  }
}

.btn_hover1:hover a {
  background-image: url(/assets/img/top/store_btn_hoverd.png);
  background-repeat: no-repeat;
}

.btn_aHover2 {
  display: block;
  background-image: url(/assets/img/top/otoku_btn.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 259px;
  height: 53px;
}

@media screen and (max-width: 890px) {
  .btn_aHover2 {
    margin: 0 auto 9vw auto;
    width: 49vw;
    height: 10vw;
    background-size: cover;
  }
}

.btn_hover2:hover a {
  background-image: url(/assets/img/top/otoku_btn_hoverd.png);
  background-repeat: no-repeat;
}

.btn_aHover3 {
  display: block;
  background-image: url(/assets/img/top/campaign_btn.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 259px;
  height: 53px;
}

@media screen and (max-width: 890px) {
  .btn_aHover3 {
    margin: 0 auto 9vw auto;
    width: 49vw;
    height: 10vw;
    background-size: cover;
  }
}

.btn_hover3:hover a {
  background-image: url(/assets/img/top/campaign_btn_hoverd.png);
  background-repeat: no-repeat;
}

.btn_aHover4 {
  display: block;
  background-image: url(/assets/img/top/more_btn.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 259px;
  height: 53px;
}

@media screen and (max-width: 890px) {
  .btn_aHover4 {
    width: 49vw;
    height: 10vw;
    background-size: cover;
  }
}

.btn_hover4:hover a {
  background-image: url(/assets/img/top/more_btn_h.png);
  background-repeat: no-repeat;
}

.btn_aHover5 {
  display: block;
  margin: 0 auto 11px auto;
  background-image: url(/assets/img/top/online_img_h.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 238px;
  height: 166px;
}

@media screen and (max-width: 890px) {
  .btn_aHover5 {
    width: 44vw;
    height: 31vw;
    background-size: cover;
  }
}

.btn_aHover6 {
  display: block;
  margin: 0 auto 11px auto;
  background-image: url(/assets/img/top/otoku_img_h.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 238px;
  height: 166px;
}

@media screen and (max-width: 890px) {
  .btn_aHover6 {
    width: 44vw;
    height: 31vw;
    background-size: cover;
  }
}

.btn_aHover7 {
  display: block;
  margin: 0 auto 11px auto;
  background-image: url(/assets/img/top/sns_img_h-alt.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 238px;
  height: 166px;
}

@media screen and (max-width: 890px) {
  .btn_aHover7 {
    width: 39vw;
    height: 30vw;
    background-size: cover;
  }
}

.car-fixed-btn {
  position: fixed;
  display: block;
  max-width: 190px;
  width: 100%;
  bottom: 0;
  right: 0;
  z-index: 10;
}

@media screen and (max-width: 890px) {
  .car-fixed-btn {
    max-width: calc(220 / 750 * 100vw);
  }
}

/* 背景イラスト */
.illust1 {
  position: absolute;
  top: -660px;
  left: -330px;
  width: 350px;
  z-index: 1;
}

@media screen and (max-width: 890px) {
  .illust1 {
    top: calc(1080 / 750 * -100vw);
    left: calc(168 / 750 * -100vw);
    width: calc(350 / 750 * 100vw);
  }
}

.illust2 {
  position: absolute;
  bottom: 710px;
  right: -355px;
  width: 350px;
  z-index: 1;
}

@media screen and (max-width: 890px) {
  .illust2 {
    bottom: calc(-1550 / 750 * -100vw);
    right: calc(160 / 750 * -100vw);
    width: calc(350 / 750 * 100vw);
  }
}

/*add 202312*/
.close202312 {
  margin: 0 auto;
  padding-top: 150px;
  max-width: 630px;
  position: relative;
  left: -1%;
}

.close202312 div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 156px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.close202312 div p {
  position: relative;
  font-size: min(2vw, 17px);
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #ff0000;
}

@media screen and (max-width: 890px) {
  .close202312 {
    margin: 0 auto;
    padding-top: 25vw;
    max-width: 80.4vw;
    position: relative;
    left: 0;
  }

  .close202312 div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 25vw);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .close202312 div p {
    position: relative;
    font-size: 2.8vw;
    line-height: 1.65;
    font-weight: 700;
    letter-spacing: 0em;
    text-align: center;
    color: #ff0000;
  }
}

/*202401 add*/
.close_cp {
  position: relative;
}

.close_cp::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #6B6B6B;
  border-radius: 8px;
  opacity: 0.8;
  mix-blend-mode: multiply;
  position: absolute;
  z-index: 10;
  top: 0px;
  left: 0px;
}

@media screen and (max-width: 890px) {
  .close_cp::before {
    width: 100%;
    height: 100%;
  }
}

.close_cp.link_open::before {
  pointer-events: none;
}

.close_cp::after {
  content: "キャンペーンは終了しました";
  font-size: 18px;
  line-height: 25px;
  font-weight: 700;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  top: 50%;
}

@media screen and (max-width: 890px) {
  .close_cp::after {
    width: max-content;
  }
}

.close_cp.link_open::after {
  pointer-events: none;
}