@charset "UTF-8";
/*
**************************************************************************
*	fields ULTRAMAN style.css
**************************************************************************/
:root {
  --fonts-notosansjp: "Noto Sans JP", sans-serif;
  --fonts-notoserifjp: "Noto Serif JP", serif;
  --color-black: #000;
  --color-white: #fff;
  --color-gray1: #191919;
  --color-gray2: #292929;
  --color-gray3: #707070;
  --color-gray4: #9B9B9B;
  --color-gray5: #EDEDED;
  --color-base: var(--color-gray5);
  --color-footer: var(--color-gray1);
  --color-complete1: var(--color-gray2);
  --color-complete2: var(--color-gray3);
  --text-shadows1: 0 0 5px rgba(0, 0, 0, 0.8);
  --text-shadows2: 0 0 14px rgba(0, 0, 0, 0.8);
  --easing-cubic1: cubic-bezier(0, 0, .2, 1);
}

/* --------------------------------------------------
		共通
-------------------------------------------------- */
.complete-limit {
  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;
  -ms-flex-wrap: wrap;
  z-index: 1;
  position: relative;
      flex-wrap: wrap;
  margin-inline: auto;
  padding: 30px 20px;
  gap: 8px 24px;
  background-color: #535353;
}
.complete-limit__text {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.complete-limit__notice {
  color: var(--color-white);
  font-weight: 400;
  font-size: calc(14 / 10 * 1rem);
  line-height: 1.7142857143;
  letter-spacing: calc(25 / 1000 * 1em);
}

.c-section {
  padding-right: 20px;
  padding-left: 20px;
}

/* --------------------------------------------------
	MARK:Movie
-------------------------------------------------- */
.movie {
  z-index: 1;
  position: relative;
  padding-inline: 20px;
  padding-block: 148px;
  background: url("../img/bg-movie_pc.jpg") center no-repeat;
  background-size: cover;
}
.movie::before, .movie::after {
  display: block;
  z-index: 2;
  position: absolute;
  left: 0;
  width: 100%;
  height: 208px;
  content: "";
}
.movie::before {
  top: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}
.movie::after {
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}
.movie__block {
  z-index: 5;
  position: relative;
  max-width: 750px;
  margin-inline: auto;
}
.movie__block + .movie__block {
  -webkit-margin-before: 64px;
          margin-block-start: 64px;
}
.movie__block--thumbnail {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-transition: opacity 0.6s var(--easing-cubic1);
  transition: opacity 0.6s var(--easing-cubic1);
}
.movie__block--thumbnail img {
  pointer-events: none;
}
.movie__block--thumbnail:hover {
  opacity: 0.8;
}
.movie__block--embed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 50px;
}
.movie__block--trigger {
  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;
  padding: 20px 90px;
  gap: 20px;
  border: 1px solid var(--color-white);
  background: none;
  cursor: pointer;
  -webkit-transition: opacity 0.6s var(--easing-cubic1);
  transition: opacity 0.6s var(--easing-cubic1);
}
.movie__block--trigger picture {
  pointer-events: none;
}
.movie__block--trigger:hover {
  opacity: 0.8;
}
.movie__block--trigger::before {
  display: block;
  aspect-ratio: 1/1;
  width: 40px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  background: url("../img/icon-play.svg") center no-repeat;
  content: "";
}

/* --------------------------------------------------
	MARK:SYSTEM
-------------------------------------------------- */
.system {
  position: relative;
  padding-block: 32px 0;
  background: url("../img/bg-system.png") center 8% no-repeat;
  background-size: 100% auto;
}
.system__container {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
.system__title {
  margin-bottom: 72px;
}
.system__mode {
  margin-bottom: 128px;
}
.system__mode--title {
  margin-bottom: 40px;
}
.system__mode--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 24px;
  gap: 0;
}
.system__mode--item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
.system__mode--text {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
}
.system__howto {
  margin-bottom: 128px;
}
.system__howto--title {
  margin-bottom: 40px;
}
.system__howto--list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 504px;
  margin-inline: auto;
  gap: 56px;
}
.system__howto--item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 14px;
}
.system__howto--block {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 46px 1fr;
  grid-template-columns: 46px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
}
.system__howto--text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0px;
  text-align: left;
}
.system__howto--text .is-notice {
  font-weight: 400;
  font-size: 1rem;
}
.system__howto--thumbnail {
  padding: 14px;
  border: 1px solid #7d7db9;
}
.system__howto--img1 figcaption {
  font-weight: 400;
  font-size: 1.2rem;
  text-align: left;
}
.system__howto--img2 {
  margin-top: 8px;
}
.system__howto--trigger {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.system__howto--trigger img {
  -webkit-transition: opacity 0.6s var(--easing-cubic1);
  transition: opacity 0.6s var(--easing-cubic1);
}
.system__howto--trigger:hover img {
  opacity: 0.8;
}

/* --------------------------------------------------
		MARK:Flow
-------------------------------------------------- */
.flow {
  margin-bottom: 128px;
  padding-inline: 20px;
}
.flow__container {
  max-width: 853px;
  margin-inline: auto;
  text-align: center;
}
.flow__title {
  margin-bottom: 56px;
}

/* --------------------------------------------------
		MARK:注目演出
-------------------------------------------------- */
.effect {
  position: relative;
  padding-inline: 20px;
  background: url("../img/bg-effect.png") center top repeat-y;
  background-size: 100% auto;
}
.effect::before, .effect::after {
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  content: "";
}
.effect::before {
  top: 0;
  height: 320px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(75%, rgb(0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 75%);
}
.effect::after {
  bottom: 0;
  height: 200px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}
.effect__container {
  z-index: 2;
  position: relative;
  max-width: 850px;
  margin-inline: auto;
  padding-block: 32px 100px;
  text-align: center;
}
.effect__title {
  z-index: 2;
  position: relative;
  text-align: center;
}
.effect__leadtxt {
  margin-bottom: 20px;
}
.effect__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 10px;
}
.effect__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

/* --------------------------------------------------
		MARK:HAZARD JUDGE
-------------------------------------------------- */
.judge {
  position: relative;
  padding-inline: 20px;
  padding-block: 40px 0;
  background: url("../img/bg-judge.png") center top repeat-y;
  background-size: 100% auto;
}
.judge::before, .judge::after {
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 200px;
  content: "";
}
.judge::before {
  top: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(75%, rgb(0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 75%);
}
.judge::after {
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}
.judge__container {
  z-index: 2;
  position: relative;
  max-width: 850px;
  margin-inline: auto;
  padding-block: 32px 100px;
  text-align: center;
}
.judge__title {
  z-index: 2;
  position: relative;
  text-align: center;
}
.judge__leadtxt {
  margin-bottom: 20px;
}
.judge__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 10px;
}
.judge__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

/* --------------------------------------------------
		MARK:シューティング チャレンジ
-------------------------------------------------- */
.shooting {
  position: relative;
  padding-inline: 20px;
  padding-block: 40px 0;
  background: url("../img/bg-shooting.png") center top repeat-y;
  background-size: 100% auto;
}
.shooting::before, .shooting::after {
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 200px;
  content: "";
}
.shooting::before {
  top: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(75%, rgb(0, 0, 0)));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 75%);
}
.shooting::after {
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}
.shooting__container {
  z-index: 2;
  position: relative;
  max-width: 850px;
  margin-inline: auto;
  padding-block: 32px 100px;
  text-align: center;
}
.shooting__title {
  z-index: 2;
  position: relative;
  text-align: center;
}
.shooting__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
}
.shooting__block.is-1st {
  gap: 0;
}
.shooting__mainimg {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 848px;
          flex: 0 1 848px;
  max-width: 848px;
  text-align: left;
}
.shooting__main-notice {
  paint-order: stroke;
  -webkit-text-stroke: 4px black;
  padding-left: 40px;
  font-size: 1rem;
  line-height: 1.5;
}
.shooting__contents {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto auto 1fr;
  grid-template-rows: auto auto 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  padding-left: 10px;
}
.shooting__contents--txt1 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-top: 16px;
}
.shooting__contents--txt2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.shooting__contents--txt3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.shooting__arrowtxt {
  padding-block: 32px 10px;
}
.shooting__announce {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
.shooting__lasttxt {
  padding-block: 32px 0;
}

/* --------------------------------------------------
		MARK:CONTENTS
-------------------------------------------------- */
.contents {
  padding-block: 80px 0;
}
.contents__title {
  margin-bottom: 16px;
  padding-inline: 20px;
  text-align: center;
}
.contents__hero-img img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
		MARK:story
-------------------------------------------------- */
.story {
  padding-inline: 20px;
  padding-block: 0 100px;
}
.story__container {
  max-width: 964px;
  margin-inline: auto;
}
.story__title {
  margin-bottom: 32px;
  padding-left: 16px;
  border-left: 10px solid #6e0000;
}
.story__text {
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.6666;
}

/* --------------------------------------------------
		MARK:character
-------------------------------------------------- */
.character {
  padding-inline: 20px;
  padding-block: 0 100px;
}
.character__container {
  max-width: 964px;
  margin-inline: auto;
}
.character__title {
  margin-bottom: 52px;
  padding-left: 16px;
  border-left: 10px solid #6e0000;
}
.character__list {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(201px, 100%), 1fr));
  max-width: 834px;
  margin-inline: auto;
  gap: 20px 10px;
}
.character__list img {
  width: 100%;
  height: auto;
}

.creature {
  padding-inline: 20px;
  padding-block: 0 128px;
}
.creature__container {
  max-width: 964px;
  margin-inline: auto;
}
.creature__title {
  margin-bottom: 52px;
  padding-left: 16px;
  border-left: 10px solid #6e0000;
}
.creature__list {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(201px, 100%), 1fr));
  max-width: 834px;
  margin-inline: auto;
  gap: 20px 10px;
}
.creature__list img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
		MARK:SPEC
-------------------------------------------------- */
.spec {
  padding-inline: 20px;
  padding-block: 0 80px;
}
.spec__container {
  max-width: 1000px;
  margin-inline: auto;
}
.spec__title {
  margin-bottom: 72px;
  text-align: center;
}
.spec__block {
  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;
  gap: 24px;
}
.spec__case {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  text-align: center;
}
.spec__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px 16px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 592px;
}
.spec__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 calc(50% - 8px);
          flex: 0 1 calc(50% - 8px);
}
.spec__item:last-child {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
}
.spec__graph {
  margin-top: 54px;
}
.spec__graph img {
  width: 100%;
  height: auto;
}
.spec__notice {
  margin-top: 14px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------
		MARK:モーダル
-------------------------------------------------- */
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  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;
  z-index: 40;
  position: fixed;
  top: 0;
  left: 0;
          justify-content: center;
  width: 100%;
  height: 100dvh;
  padding: 60px 40px;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-overflow-scrolling: touch;
}
[aria-hidden=false] .modal__overlay {
  -webkit-animation: fadeIn 0.3s ease-out;
          animation: fadeIn 0.3s ease-out;
}
[aria-hidden=true] .modal__overlay {
  -webkit-animation: fadeOut 0.3s ease-out;
          animation: fadeOut 0.3s ease-out;
}
.modal__close {
  display: block;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  margin-left: auto;
  padding: 0;
  translate: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all;
  -webkit-transition: opacity 0.3s ease-out, rotate 0.3s ease-out;
  position: relative;
  transition: opacity 0.3s ease-out, rotate 0.3s ease-out;
}
.modal__close::before, .modal__close::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  translate: -50% -50%;
  border-radius: 10px;
  background-color: var(--color-white);
  content: "";
}
.modal__close::before {
  rotate: 45deg;
}
.modal__close::after {
  rotate: -45deg;
}
.modal__container {
  width: 100%;
  max-width: 840px;
  margin-right: auto;
  margin-left: auto;
  translate: 0 -70px;
}
#system_mv .modal__container {
  max-width: 340px;
}
.modal__embed {
  position: relative;
  aspect-ratio: 840/475;
}
#system_mv .modal__embed {
  aspect-ratio: 230/182;
}
.modal__embed--inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all;
}
.modal__embed--inner > * {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------
		MARK:コンテンツ表示アニメーション
-------------------------------------------------- */
[data-fadein] {
  opacity: 0;
}
[data-fadein].is-view {
  -webkit-animation: fadeIn 0.6s var(--easing-cubic1) forwards;
          animation: fadeIn 0.6s var(--easing-cubic1) forwards;
}

[data-slideup] {
  opacity: 0;
}
[data-slideup].is-view {
  -webkit-animation: slideUp 0.6s var(--easing-cubic1) forwards;
          animation: slideUp 0.6s var(--easing-cubic1) forwards;
}

[data-slidedown] {
  opacity: 0;
}
[data-slidedown].is-view {
  -webkit-animation: slideDown 0.6s var(--easing-cubic1) forwards;
          animation: slideDown 0.6s var(--easing-cubic1) forwards;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@media screen and (max-width: 977px){
  .complete-limit {
    padding-top: 24px;
    padding-bottom: 24px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  .complete-limit__text img {
    max-width: 240px;
  }
  .movie {
    padding-block: 64px;
    background: url("../img/bg-movie_sp.jpg") center top no-repeat;
    background-size: cover;
  }
  .movie::before, .movie::after {
    height: 80px;
  }
  .movie__block + .movie__block {
    gap: 40px;
  }
  .movie__block--embed {
    gap: 24px;
  }
  .movie__block--trigger {
    padding: 10px 60px;
    gap: 10px;
  }
  .movie__block--trigger::before {
    width: 26px;
  }
  .system {
    padding-inline: 20px;
    padding-block: 24px 0;
  }
  .system__mode {
    margin-bottom: 64px;
  }
  .system__howto {
    margin-bottom: 64px;
  }
  .flow {
    margin-bottom: 64px;
  }
  .effect__container {
    padding-block: 32px 56px;
  }
  .judge__container {
    padding-block: 32px 56px;
  }
  .shooting__container {
    padding-block: 32px 56px;
  }
}
@media screen and (max-width: 767px){
  .movie {
    padding-block: 64px 32px;
  }
  .system__title {
    margin-bottom: 24px;
  }
  .system__mode--title {
    margin-bottom: 8px;
  }
  .system__mode--list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 16px;
    margin-inline: -16px;
  }
  .system__mode--text {
    margin-inline: -16px;
    font-size: 1.6rem;
  }
  .system__howto--title {
    margin-bottom: 32px;
  }
  .system__howto--list {
    gap: 32px;
  }
  .system__howto--block {
    -ms-grid-columns: 32px 1fr;
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }
  .flow__title {
    margin-bottom: 32px;
  }
  .flow__block {
    margin-inline: -12px;
  }
  .effect::before {
    height: 200px;
  }
  .effect::after {
    height: 100px;
  }
  .effect__container {
    padding-block: 24px 0;
  }
  .judge::before, .judge::after {
    height: 100px;
  }
  .judge__container {
    padding-block: 24px 0;
  }
  .shooting::before, .shooting::after {
    height: 100px;
  }
  .shooting__container {
    padding-block: 24px 0;
  }
  .shooting__block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .shooting__mainimg {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  .shooting__main-notice {
    padding-left: 0;
  }
  .shooting__contents {
    padding-left: 0;
  }
  .shooting__contents--txt1 {
    margin-left: -10px;
  }
  .shooting__arrowtxt {
    padding-block: 24px 10px;
  }
  .shooting__lasttxt {
    padding-block: 24px 56px;
  }
  .contents {
    padding-block: 16px 0;
  }
  .story {
    padding-block: 0 64px;
  }
  .story__container {
    padding-block: 10px 0;
  }
  .story__title {
    margin-bottom: 16px;
  }
  .story__title img {
    width: auto;
    height: 34px;
  }
  .story__text {
    font-size: 1.6rem;
  }
  .character {
    padding-block: 0 64px;
  }
  .character__container {
    padding-block: 10px 0;
  }
  .character__title {
    margin-bottom: 32px;
  }
  .character__title img {
    width: auto;
    height: 34px;
  }
  .character__list {
    gap: 10px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .creature {
    padding-block: 0 64px;
  }
  .creature__container {
    padding-block: 10px 0;
  }
  .creature__title {
    margin-bottom: 32px;
  }
  .creature__title img {
    width: auto;
    height: 34px;
  }
  .creature__list {
    gap: 10px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .spec {
    padding-block: 0 32px;
  }
  .spec__title {
    margin-bottom: 24px;
  }
  .spec__block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24px;
  }
  .spec__list {
    max-width: 100%;
  }
  .spec__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
  }
  .spec__item img {
    width: 100%;
    height: auto;
  }
  .spec__graph {
    margin-top: 24px;
  }
  .spec__notice {
    margin-top: 8px;
    text-align: left;
  }
}
@media screen and (max-width: 576px){
  .modal__overlay {
    padding: 40px 20px;
  }
  .modal__close {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  .modal__container {
    translate: 0 -50px;
  }
}
@media screen and (max-width: 360px){
  .complete-limit {
    padding-right: 10px;
    padding-left: 10px;
  }
  .c-section {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media (any-hover: hover){
  .modal__close:hover {
    opacity: 0.5;
  }
}
/*# sourceMappingURL=style.css.map */