@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* rewrite
------------------------------------------------------------------------- */
#header {
  margin-bottom: 0px !important;
}

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

body {
  margin: 0;
  padding: 0;
}

#wrap {
  background: url(../images/bg.jpg) center center/50% auto repeat;
}

.lp_area {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-feature-settings: "palt";
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  color: #333333;
  padding-bottom: 5%;
}
.lp_area img {
  vertical-align: top;
  border: 0;
  width: auto;
  height: auto;
}
.lp_area {
  /* link default */
}
.lp_area a:link {
  color: #333333;
  text-decoration: none;
}
.lp_area a:visited {
  color: #333333;
  text-decoration: none;
}
.lp_area a:hover {
  color: #333333;
  text-decoration: none;
}
.lp_area a:active {
  color: #333333;
  text-decoration: none;
}

.lp_title span {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 3.7333333333vw;
  color: #00a084;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .lp_title span {
    font-size: 16px;
  }
}
.lp_title h2 {
  font-size: 6.4vw;
  font-weight: 500;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .lp_title h2 {
    font-size: 32px;
  }
}

p,
form,
ul,
li,
dl,
dt,
dd,
ol,
div,
img,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/*　カラー　*/
.bg_red {
  background-color: #e50012;
}

.bg_blue {
  background-color: #505fc7;
}

.bg_yellow {
  background: #ffd800;
}

/*　レスポンシブ切り替え　*/
.only_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .only_pc {
    display: block;
  }
}

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

/* コンテンツ
------------------------------------------------------------------------- */
/*　メインビジュアル　*/
@media screen and (min-width: 768px) {
  .lp_mainvisual_inner {
    display: flex;
    justify-content: center;
  }
}
.lp_mainvisual_main {
  position: relative;
  display: grid;
  align-items: center;
  padding: 5% 5% 0;
}
@media screen and (min-width: 768px) {
  .lp_mainvisual_main {
    padding: 170px 5%;
  }
}
.lp_mainvisual_main .mainvisual_logo {
  max-width: 454px;
  margin: 0 auto;
}
.lp_mainvisual_main .mainvisual_icon {
  max-width: 168px;
  margin: 16px auto 0;
}
@media screen and (min-width: 768px) {
  .lp_mainvisual_main .mainvisual_icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.lp_mainvisual_main.selforder {
  background-color: #2353a4;
}
.lp_mainvisual_main.selforder .mainvisual_sub {
  max-width: 210px;
  margin: 16px auto 0;
}
.lp_mainvisual_main.mobile {
  background-color: #bc1d21;
}
.lp_mainvisual_main.mobile .mainvisual_sub {
  max-width: 300px;
  margin: 16px auto 0;
}
.lp_mainvisual_main img {
  width: 100%;
  height: auto;
}
.lp_mainvisual_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #ffe100;
  border-radius: 10px;
  padding: 16px;
  width: 100%;
  line-height: 1.2;
  margin: 32px auto 0;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .lp_mainvisual_btn {
    width: 300px;
    height: 56px;
  }
}
.lp_mainvisual_btn::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}
.lp_mainvisual_btn.btn-selforder {
  color: #2353a4 !important;
}
.lp_mainvisual_btn.btn-selforder::after {
  mask-image: url("../images/arrow.svg");
  -webkit-mask-image: url("../images/arrow.svg");
  background-color: #2353a4;
}
.lp_mainvisual_btn.btn-mobileorder {
  color: #bc1d21 !important;
}
.lp_mainvisual_btn.btn-mobileorder::after {
  mask-image: url("../images/arrow.svg");
  -webkit-mask-image: url("../images/arrow.svg");
  background-color: #bc1d21;
}

/*　対象劇場　*/
.lp_theater {
  padding: 32px 5% 0;
  font-size: 16px;
}
@media screen and (min-width: 768px) {
  .lp_theater {
    padding: 128px 5% 0;
    font-size: 18px;
  }
}
.lp_theater_inner {
  max-width: 800px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .lp_theater_inner {
    width: fit-content;
  }
}
.lp_theater h3 {
  background-color: #333333;
  border: 1px solid #333333;
  color: #fff;
  padding: 8px 16px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .lp_theater h3 {
    padding: 8px 32px;
  }
}
.lp_theater .theater_list {
  background-color: #fff;
  border: 1px solid #333333;
  border-radius: 0 0 10px 10px;
  padding: 16px;
}
@media screen and (min-width: 768px) {
  .lp_theater .theater_list {
    padding: 16px 32px;
  }
}
.lp_theater .theater_list ul {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.lp_theater .theater_list ul:first-child {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .lp_theater .theater_list ul {
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .lp_theater .theater_list ul .prefectures {
    min-width: 100px;
  }
}

/* 動画 */
.lp_movie {
  padding: 32px 5% 0;
}
@media screen and (min-width: 768px) {
  .lp_movie {
    padding: 64px 5% 0;
  }
}
.lp_movie_inner {
  max-width: 862px;
  margin: 0 auto;
}
.lp_movie_player {
  position: relative;
}
.lp_movie_player--pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .lp_movie_player--sp {
    display: none;
  }
  .lp_movie_player--pc {
    display: block;
  }
}
.lp_movie_player.is-started .lp_movie_play_button {
  opacity: 0;
  pointer-events: none;
}
.lp_movie_video {
  display: block;
  width: 100%;
  height: auto;
}
.lp_movie_play_button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #333333;
  border: 2px solid #fff;
  padding: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.lp_movie_play_button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid rgba(255, 255, 255, 0.92);
}
@media screen and (min-width: 768px) {
  .lp_movie_play_button::before {
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 21px;
  }
}

/* サービスについて */
.lp_service_inner {
  padding: 32px 5%;
}
@media screen and (min-width: 768px) {
  .lp_service_inner {
    padding: 48px 5% 0;
  }
}
.lp_service_inner h2 img {
  display: block;
  max-width: 510px;
  width: 100%;
  margin: 0 auto;
}
.lp_service_inner p {
  display: block;
  max-width: 810px;
  margin: 24px auto 0;
  line-height: 2.4;
  letter-spacing: 0.14em;
  text-align: justify;
}

/* セルフオーダー、モバイルオーダー */
.lp_order {
  padding: clamp(2rem, 0.545rem + 7.27vw, 6rem) 5%;
  margin-top: clamp(3rem, 1.182rem + 9.09vw, 8rem);
  border-radius: 50px 50px 0 50px;
}
.lp_order_inner {
  max-width: 960px;
  margin: 0 auto;
}
.lp_order_selforder {
  background-color: #2353a4;
}
.lp_order_selforder h2 img {
  max-width: 454px;
}
.lp_order_mobileorder {
  background-color: #bc1d21;
}
.lp_order_mobileorder h2 img {
  max-width: 487px;
}
.lp_order h2 img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.lp_order p {
  display: block;
  max-width: 810px;
  margin: 24px auto 0;
  line-height: 2.4;
  letter-spacing: 0.14em;
  text-align: justify;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .lp_order p {
    text-align: center;
  }
}

.order_flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .order_flow {
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
  }
}
.order_flow_item {
  display: block;
}
@media screen and (min-width: 768px) {
  .order_flow_item {
    max-width: 304px;
  }
}
.order_flow_item img {
  width: 100%;
}

.order_card {
  margin-top: 24px;
}
.order_card img {
  width: 100%;
}

.order_flow_item span,
.order_card span {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  margin-top: 8px;
}

.order_bnr {
  margin-top: 24px;
}
.order_bnr img {
  width: 100%;
}

.color_yellow {
  color: #ffe100 !important;
}/*# sourceMappingURL=style.css.map */