@charset "UTF-8";
/* 変数
-------------------------------------------------- */
/* ----- メディアクエリー ----- */
@media only screen and (max-width: 767px) {
  .pc_only {
    display: none;
  }
}

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

/* 共通
-------------------------------------------------- */
* {
  letter-spacing: 0.1em;
  font-family: "Zen Maru Gothic", sans-serif;
}

img {
  max-width: 100%;
  backface-visibility: hidden;
}

/* reset
-------------------------------------------------- */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

/* ==================================================
  メインビジュアル
================================================== */
.mv {
  height: 858px;
  background: url(../img/mv_bg.jpg) no-repeat top center;
  position: relative;
  text-align: center;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .mv {
    background: none;
    height: auto;
  }
}
@media (max-width: 960px) and (min-width: 768px) {
  .mv {
    height: 720px;
  }
}
@media (max-width: 960px) and (min-width: 768px) {
  .mv_content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: 100%;
    z-index: 2;
  }
}
@media only screen and (max-width: 767px) {
  .mv_content {
    position: absolute;
    width: 100%;
    margin-top: 8px;
  }
}
.mv_title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  left: 0%;
  bottom: 0;
  top: 20px;
  width: 100%;
  z-index: 1;
}
@media (max-width: 960px) and (min-width: 768px) {
  .mv_title {
    width: 95%;
    position: relative;
    top: 0;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .mv_title {
    width: 93%;
    position: relative;
    top: 0;
    margin: 0 auto;
  }
}
.mv_btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.5s;
  width: 336px;
  display: block;
  bottom: 50px;
  z-index: 2;
}
.mv_btn:hover {
  filter: brightness(115%) drop-shadow(0 3px 8px rgba(207, 43, 15, 0.4));
}
@media (max-width: 960px) and (min-width: 768px) {
  .mv_btn {
    position: relative;
    margin-top: -20px;
    bottom: 0;
    width: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .mv_btn {
    width: 248px;
    position: relative;
    margin-top: 16px;
    bottom: 0;
    margin: 16px auto 0;
    left: auto;
    transform: translateX(0);
  }
}
.mv_inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  left: 0%;
  z-index: 0;
  bottom: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .mv .delay_01 {
    animation-delay: 0.3s;
  }
  .mv .delay_02 {
    animation-delay: 0.6s;
  }
  .mv .delay_03 {
    animation-delay: 0.8s;
  }
  .mv .scale_anime {
    animation-name: scale_anime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  .mv .up_anime {
    animation-name: up_anime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  .mv .fade_anime {
    animation-name: fade_anime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  @keyframes scale_anime {
    0% {
      transform: scale(0.75);
      opacity: 0;
    }
    50% {
      transform: scale(1.05, 1);
      opacity: 1;
    }
    80% {
      transform: scale(0.9, 0.95);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes up_anime {
    0% {
      transform: scale(0.75);
      transform: translateY(20px);
      opacity: 0;
    }
    50% {
      transform: scale(1.025, 1);
      opacity: 1;
    }
    80% {
      transform: scale(0.9, 0.925);
      transform: translateY(0px);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes fade_anime {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
@media only screen and (max-width: 767px) {
  .mv .fade_anime, .mv .scale_anime {
    animation-name: anime-sp;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  @keyframes anime-sp {
    0% {
      transform: scale(0.75);
      opacity: 0;
    }
    50% {
      transform: scale(1.05, 1);
      opacity: 1;
    }
    80% {
      transform: scale(0.9, 0.95);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
}

/* ==================================================
  Lineup
================================================== */
.lineup {
  background: linear-gradient(to top, #fff 0%, #fff 50%, #856b5a 50%, #856b5a 50%), linear-gradient(to bottom, #fff 0%, #fff 50%, #856b5a 50%, #856b5a 50%), url(../img/base_bg_deco.png), url(../img/base_bg_repeat.jpg);
  background-position: top, bottom, center 20px, top;
  background-size: 8px 8px, 8px 8px, auto, auto;
  background-repeat: repeat-x, repeat-x, no-repeat, repeat;
  text-align: center;
  padding: 100px 0;
}
@media only screen and (max-width: 767px) {
  .lineup {
    background: linear-gradient(to top, #fff 0%, #fff 50%, #856b5a 50%, #856b5a 50%), linear-gradient(to bottom, #fff 0%, #fff 50%, #856b5a 50%, #856b5a 50%), url(../img/base_bg_deco_sp.png), url(../img/base_bg_repeat.jpg);
    background-position: top, bottom, 0 12px, top;
    background-size: 5px 5px, 5px 5px, 100%, 100%;
    background-repeat: repeat-x, repeat-x, no-repeat, repeat;
    padding: 56px 0;
    text-align: left;
  }
}
.lineup_inner {
  max-width: 1024px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
}
@media only screen and (max-width: 767px) {
  .lineup_inner {
    width: auto;
    padding: 0 20px;
  }
}
.lineup_head {
  width: 330px;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .lineup_head {
    width: 221px;
  }
}
.lineup_head_text {
  font-size: 24px;
  font-weight: 700;
  margin-top: 12px;
  display: inline-block;
  color: #604c3f;
}
@media only screen and (max-width: 767px) {
  .lineup_head_text {
    font-size: 16px;
    margin-top: 8px;
  }
}
.lineup .lineup_01 {
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .lineup .lineup_01 {
    margin-top: 28px;
  }
}
.lineup .lineup_02 {
  margin-top: 64px;
}
@media (max-width: 960px) {
  .lineup .lineup_02 {
    margin-top: 48px;
  }
}
.lineup_box_img {
  position: relative;
  height: 426px;
  max-width: 996px;
  text-align: center;
}
@media (max-width: 960px) and (min-width: 768px) {
  .lineup_box_img {
    height: 394px;
  }
}
@media only screen and (max-width: 767px) {
  .lineup_box_img {
    text-align: left;
    height: auto;
  }
}
.lineup_box_img img {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media only screen and (max-width: 767px) {
  .lineup_box_img img {
    position: relative;
  }
}
.lineup_box_detail {
  color: #604c3f;
  font-size: 16px;
  line-height: 1.8;
  margin-top: 4px;
}
@media only screen and (max-width: 767px) {
  .lineup_box_detail {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
  }
}
.lineup_box_detail span {
  font-size: 20px;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .lineup_box_detail span {
    font-size: 17px;
  }
}
.lineup_box_detail .color_01 {
  color: #fd6e0a;
}
.lineup_box_detail .color_02 {
  color: #e5463e;
}
.lineup_box_detail .color_03 {
  color: #369de2;
}
.lineup_box_detail .color_04 {
  color: #3cc8dc;
}
.lineup_box_btn {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .lineup_box_btn {
    margin-top: 12px;
    gap: 12px;
  }
}
.lineup_box_btn .btn_sample {
  transition: 0.5s;
}
.lineup_box_btn .btn_sample:hover {
  filter: brightness(115%) drop-shadow(0 3px 8px rgba(40, 167, 70, 0.4));
}
.lineup_box_btn .btn_detail {
  transition: 0.5s;
}
.lineup_box_btn .btn_detail:hover {
  filter: brightness(115%) drop-shadow(0 3px 8px rgba(207, 43, 15, 0.4));
}

/* タイマー設定
-------------------------------------------------- */
.lineup_box .btn_detail.switch_before, .lineup_box .lineup_box_img.switch_before { /* 更新前 */
  display: block;
}
.lineup_box .btn_detail.switch_before.hide, .lineup_box .lineup_box_img.switch_before.hide { /* 非表示用のクラス */
  display: none;
}
.lineup_box .btn_detail.switch_after, .lineup_box .lineup_box_img.switch_after { /* 更新後 */
  display: none;
}
.lineup_box .btn_detail.switch_after.show, .lineup_box .lineup_box_img.switch_after.show { /* 表示用のクラス */
  display: block;
}

/* ==================================================
  ストーリー
================================================== */
.story {
  background: url(../img/story_bg.jpg) no-repeat center top;
  background-size: cover;
  padding: 80px 0;
}
@media only screen and (max-width: 767px) {
  .story {
    background: url(../img/story_bg_sp.jpg) no-repeat;
    padding: 56px 0;
  }
}
.story_intro {
  max-width: 1024px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .story_intro {
    width: auto;
    padding: 0 20px;
  }
}
@media only screen and (max-width: 767px) {
  .story_intro {
    display: block;
  }
}
.story_intro_head {
  width: 284px;
  margin-right: 28px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .story_intro_head {
    margin: 0 auto;
    width: 211px;
  }
}
.story_intro_head_text {
  font-size: 24px;
  font-weight: 700;
  margin-top: 12px;
  display: inline-block;
  color: #38291f;
  text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff, 1px -1px 5px #fff, -1px -1px 5px #fff;
}
@media only screen and (max-width: 767px) {
  .story_intro_head_text {
    font-size: 16px;
    margin-top: 8px;
  }
}
.story_intro_detail {
  font-size: 17px;
  color: #38291f;
  line-height: 2;
  font-weight: 700;
  text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff, 1px -1px 5px #fff, -1px -1px 5px #fff;
}
@media only screen and (max-width: 767px) {
  .story_intro_detail {
    font-size: 15px;
    line-height: 1.7;
    margin-top: 16px;
  }
}
.story_slider {
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .story_slider {
    margin-top: 24px;
  }
}
.story_slider_item {
  border: 3px solid #fff;
  margin: 0 15px;
}
.story_link {
  margin: 48px auto 0;
  max-width: 410px;
}
@media only screen and (max-width: 767px) {
  .story_link {
    max-width: 1024px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 12px;
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .story_link {
    width: auto;
    padding: 0 20px;
  }
}
.story_link_hp {
  display: block;
  transition: 0.5s;
}
.story_link_hp:hover {
  filter: brightness(115%) drop-shadow(0 3px 8px rgba(207, 43, 15, 0.4));
}
.story_link_sns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.story_link .btn_sns {
  color: #39576e;
  font-size: 16px;
  background-color: #fff;
  border: 2px solid #4c7493;
  box-shadow: 0 2px 0 #4c7493;
  padding: 12px 12px;
  border-radius: 26px;
  width: 48.5%;
  text-align: center;
  transition: 0.5s;
}
.story_link .btn_sns:hover {
  color: #678eab;
  border: 2px solid #678eab;
  box-shadow: 0 2px 0 #678eab;
}
@media only screen and (max-width: 767px) {
  .story_link .btn_sns {
    font-size: 14px;
  }
}
.story_link .btn_tw:before, .story_link .btn_yt:before {
  content: " ";
  position: relative;
  display: inline-block;
  width: 24px;
  height: 20px;
  top: 4px;
  margin-right: 8px;
}
@media only screen and (max-width: 767px) {
  .story_link .btn_tw:before, .story_link .btn_yt:before {
    width: 20px;
    height: 16px;
    margin-right: 4px;
  }
}
.story_link .btn_tw:before {
  background: url(../img/story_icon_tw.svg) no-repeat;
  background-size: contain;
}
.story_link .btn_yt:before {
  background: url(../img/story_icon_yt.svg) no-repeat;
  background-size: contain;
}

/* ==================================================
  footer
================================================== */
.footer {
  background-image: linear-gradient(to top, #fff 0%, #fff 50%, #856b5a 50%, #856b5a 50%), url(../img/base_bg_repeat.jpg);
  background-size: 8px 8px, auto;
  background-repeat: repeat-x, repeat;
  background-position: top;
  padding-top: 48px;
}
@media only screen and (max-width: 767px) {
  .footer {
    background-image: linear-gradient(to top, #fff 0%, #fff 50%, #856b5a 50%, #856b5a 50%), url(../img/base_bg_repeat.jpg);
    background-size: 5px 5px, auto;
    padding-top: 56px;
  }
}
.footer_inner {
  max-width: 1024px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .footer_inner {
    width: auto;
    padding: 0 20px;
  }
}
@media only screen and (max-width: 767px) {
  .footer_inner {
    flex-direction: column-reverse;
  }
}
.footer_logo_dl {
  width: 138px;
  transition: 0.5s;
}
.footer_logo_dl:hover {
  opacity: 0.75;
}
@media only screen and (max-width: 767px) {
  .footer_logo_dl {
    width: 114px;
    margin-top: 28px;
  }
}
.footer_beast {
  text-align: center;
}
.footer_beast_logo {
  width: 360px;
}
@media only screen and (max-width: 767px) {
  .footer_beast_logo {
    width: 268px;
  }
}
.footer_beast_copy {
  margin-top: 12px;
  color: #987e6e;
  font-size: 11px;
}
@media only screen and (max-width: 767px) {
  .footer_beast_copy {
    margin-top: 8px;
  }
}
.footer_tw {
  background-color: #55acee;
  border-radius: 28px;
  border: 2px solid #295d85;
  box-shadow: 0 2px 0 #295d85;
  position: relative;
  padding: 12px;
  margin-left: 82px;
  transition: 0.5s;
}
.footer_tw:hover {
  opacity: 0.75;
}
@media only screen and (max-width: 767px) {
  .footer_tw {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -80px;
    margin-left: 0;
  }
}
.footer_tw img {
  width: 28px;
  height: 28px;
}
.footer_copy {
  margin-top: 40px;
  background-color: #523f33;
  color: #987e6e;
  text-align: center;
  padding: 12px 0;
}
@media only screen and (max-width: 767px) {
  .footer_copy {
    margin-top: 32px;
  }
}

/* ==================================================
  モーダル用共通スタイル
================================================== */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(37, 32, 27, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease-in-out;
}
.modal.is_active {
  opacity: 1;
  visibility: visible;
}
.modal_inner {
  position: relative;
  width: 60vw;
  background-color: #fff;
  border-radius: 20px;
}
@media only screen and (max-width: 767px) {
  .modal_inner {
    width: 92%;
    border-width: 0.2rem;
  }
}
.modal_body {
  padding: 48px;
}
@media only screen and (max-width: 767px) {
  .modal_body {
    padding: 20px;
  }
}
.modal_player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.modal_player iframe,
.modal_player video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.modal_close {
  cursor: pointer;
  background-color: #f3ebe6;
  font-size: 18px;
  padding: 10px 22px;
  display: block;
  margin: 24px auto 0;
  color: #987e6e;
  font-weight: 700;
  border-radius: 23px;
}
.modal_close::before {
  content: " ";
  position: relative;
  display: inline-block;
  margin-right: 8px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: url(../img/lineup_close.svg) no-repeat;
  background-size: contain;
}
.modal_close:hover {
  transition: 0.5s;
}
.modal_close:hover:hover {
  opacity: 0.75;
}
@media only screen and (max-width: 767px) {
  .modal_close {
    font-size: 15px;
    padding: 8px 18px;
    margin: 16px auto 0;
  }
  .modal_close::before {
    margin-right: 8px;
    top: 2px;
    width: 15px;
    height: 15px;
  }
}/*# sourceMappingURL=lp.css.map */