@charset "UTF-8";
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, sub, sup, 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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* clearfix */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

html {
  font-size: 62.5%;
  /*16px×62.5%=10px*/
  height: 100%;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 0%;
}

*:focus {
  outline: none;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

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

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

.text-justify, p {
  text-align: justify;
  text-justify: inter-ideograph;
}

.share_btn {
  width: 100%;
  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;
      flex-wrap: wrap;
  line-height: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.share_btn li {
  padding: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.share_btn .fb_iframe_widget > span {
  vertical-align: baseline !important;
}

span.and {
  font-size: .6em;
}

@media screen and (max-width: 768px) {
  span.text-pc {
    display: none;
  }
}

span.text-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  span.text-sp {
    display: inherit;
  }
}

.br-pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .br-pc {
    display: none;
  }
}

.br-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .br-sp {
    display: block;
  }
}

.cont-pc {
  display: inherit;
}

@media screen and (max-width: 768px) {
  .cont-pc {
    display: none;
  }
}

.cont-tb {
  display: none;
}

@media screen and (max-width: 1024px) {
  .cont-tb {
    display: inherit;
  }
}

.cont-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .cont-sp {
    display: inherit;
  }
}

.insta_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: calc(400px + 8%);
}

@media screen and (max-width: 768px) {
  .insta_list {
    padding-top: 40px;
  }
}

.insta_list li {
  width: 100px;
  height: 100px;
  margin: 0 1% 2%;
  overflow: hidden;
}

.insta_list li a .square-content {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.insta_list li a .square-content.insta_image {
  position: relative;
}

.insta_list li a .square-content.insta_video {
  position: relative;
}

.insta_list li a .square-content.insta_video::after {
  content: url("../img/play-circle.svg");
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 3;
  width: 50%;
  opacity: .8;
  vertical-align: bottom;
  line-height: 1;
  font-size: 0;
}

.insta_list li a .square-content.insta_video:hover::after {
  opacity: .5;
}

.insta_list li a .square-content img {
  width: 100px;
  height: 100px;
  -webkit-transition: .4s;
  transition: .4s;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

.insta_list li a .square-content p {
  display: block;
  position: absolute;
  background-color: rgba(128, 62, 62, 0.5);
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  padding: 10px;
  color: #fff;
  overflow: hidden;
  -webkit-transition: .4s;
  transition: .4s;
}

@media screen and (max-width: 768px) {
  .insta_list li a .square-content p {
    padding: 10px;
  }
}

.insta_list li a .square-content:hover img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.insta_list li a .square-content:hover p {
  top: 0;
}

@-webkit-keyframes noise {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100px 800px;
  }
}

@keyframes noise {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100px 800px;
  }
}

.fadeInUp {
  opacity: 0;
}

.fadeInUp.active {
  -webkit-animation: fadeInUp 1s forwards;
          animation: fadeInUp 1s forwards;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.39062deg) skewY(0.39062deg);
    transform: skewX(0.39062deg) skewY(0.39062deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg);
  }
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
  -ms-interpolation-mode: bicubic;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0 auto;
}

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #240000;
  opacity: 0.7;
  filter: alpha(opacity=90);
}

#colorbox {
  outline: 0;
}

#cboxContent {
  margin-top: 0px;
  overflow: visible;
  background: #000;
}

.cboxIframe {
  background: #000;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxLoadedContent {
  background: #000;
  padding: 1px;
}

#cboxLoadingGraphic {
  background: url(images/loading.gif) no-repeat center center;
}

#cboxLoadingOverlay {
  background: #000;
}

#cboxTitle {
  position: absolute;
  top: -22px;
  left: 0;
  color: #000;
}

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -20px;
}

#cboxPrevious, #cboxNext {
  top: calc(50% - 25px);
  left: 0;
  color: #950000;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 0, 0, 0.2);
  position: absolute;
}

@media screen and (max-width: 768px) {
  #cboxPrevious, #cboxNext {
    width: 40px;
    height: 40px;
    top: calc(100% - 50px);
    left: calc(50% - 50px);
  }
}

#cboxPrevious::after, #cboxNext::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  color: #ff0000;
  width: 50px;
  height: 50px;
  background-image: url(../img/arrow.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 768px) {
  #cboxPrevious::after, #cboxNext::after {
    width: 40px;
    height: 40px;
    left: 0px;
  }
}

#cboxNext {
  left: calc(100% - 50px);
}

@media screen and (max-width: 768px) {
  #cboxNext {
    left: calc(50% + 10px);
  }
}

#cboxNext::after {
  content: '';
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

#cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  width: 60px;
  height: 60px;
  top: 10px;
  right: 10px;
  z-index: 10000;
  -webkit-transition: .4s;
  transition: .4s;
  position: absolute;
  background-color: transparent;
}

@media screen and (max-width: 768px) {
  #cboxClose {
    top: calc(100% - 70px);
  }
}

#cboxClose::after, #cboxClose::before {
  position: absolute;
  content: '';
  height: 2px;
  width: 60px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #ff0000;
  top: 30px;
  right: 0px;
}

#cboxClose::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#cboxClose:hover {
  opacity: .5;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 66px;
}

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 44px;
}

.cboxSlideshow_on #cboxSlideshow:hover {
  background-position: -100px -25px;
}

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 44px;
}

.cboxSlideshow_off #cboxSlideshow:hover {
  background-position: -75px -25px;
}

.gnav ul {
  z-index: 101;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 0;
  background-color: rgba(111, 0, 0, 0.85);
}

@media screen and (max-width: 768px) {
  .gnav ul {
    background-color: rgba(111, 0, 0, 0.85);
    top: calc(100% - 50px);
  }
}

.gnav ul li {
  height: 50px;
}

@media screen and (max-width: 768px) {
  .gnav ul li {
    width: calc(100% / 6);
  }
}

.gnav ul li a {
  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;
          justify-content: center;
  padding: 0 .5em;
  height: 100%;
  letter-spacing: .1em;
  color: #fff;
}

.gnav ul li a.cont-sp {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .gnav ul li a {
    padding: 0;
    letter-spacing: 0em;
  }
}

.gnav ul li a:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 768px) {
  .gnav ul li a:hover {
    background-color: #950000;
  }
}

.gnav ul li a .menu_item-pc {
  font-size: 2.2rem;
}

@media screen and (max-width: 768px) {
  .gnav ul li a .menu_item-pc {
    display: none;
  }
}

.gnav ul li a .menu_item-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .gnav ul li a .menu_item-sp {
    font-size: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .gnav ul li a .menu_item-sp p {
    height: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    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-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    text-align: center;
  }
  .gnav ul li a .menu_item-sp p span {
    display: inline-block;
    white-space: nowrap;
  }
  .gnav ul li a .menu_item-sp i {
    padding-top: 4px;
    height: 24px;
    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;
            justify-content: center;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    text-align: center;
    font-style: normal;
    font-size: 18px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
  }
  .gnav ul li a .menu_item-sp i.icon_top::after {
    content: '\f341';
  }
  .gnav ul li a .menu_item-sp i.icon_trailer::after {
    content: '\f144';
  }
  .gnav ul li a .menu_item-sp i.icon_intro::after {
    content: '\f518';
  }
  .gnav ul li a .menu_item-sp i.icon_cast::after {
    content: '\f2c2';
  }
  .gnav ul li a .menu_item-sp i.icon_staff::after {
    content: '\f675';
  }
  .gnav ul li a .menu_item-sp i.icon_theater::after {
    content: '\f008';
  }
  .gnav ul li a .menu_item-sp i.icon_menu::after {
    content: '\f0c9';
  }
}

.gnav ul li a.active {
  color: #ff8f8f;
}

.updown_nav {
  z-index: 102;
  position: fixed;
  right: 40px;
  top: calc(100% - 160px);
}

@media screen and (max-width: 768px) {
  .updown_nav {
    right: 10px;
    top: calc(100% - 140px);
  }
}

.updown_nav ul li {
  width: 50px;
  height: 50px;
  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;
  background-color: rgba(111, 0, 0, 0.85);
  text-transform: uppercase;
  margin: 10px 0;
  font-size: 20px;
  color: #fff;
}

.updown_nav ul li:hover {
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .updown_nav ul li {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

.updown_nav ul li a {
  height: 100%;
  width: 100%;
  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;
          justify-content: center;
}

.sns_nav {
  z-index: 103;
  position: fixed;
}

@media screen and (max-width: 768px) {
  .sns_nav {
    top: calc(100% - 90px);
    left: 10px;
  }
}

.sns_nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media screen and (max-width: 768px) {
  .sns_nav ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.sns_nav ul li {
  background-color: rgba(111, 0, 0, 0.85);
  width: 30px;
  height: 30px;
  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;
          justify-content: center;
  font-size: 16px;
  border-radius: 50%;
  margin-right: 10px;
}

.sns_nav ul li a {
  color: #fff;
}

.fixed_bg::before {
  content: '';
  display: block;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  overflow: hidden;
}

body {
  font-size: 1.6rem;
  font-family: "New Tegomin", serif;
  position: relative;
  overflow-x: hidden;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 1.3rem;
  }
}

body.fixed {
  height: 100%;
  overflow: hidden;
}

/*
LOADING----------------------- Z: 10000~
*/
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1000;
  background-color: #000;
  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;
          justify-content: center;
}

.loading .loader {
  max-width: 40px;
  -webkit-animation: flash 5s infinite;
          animation: flash 5s infinite;
}

/*
TRAILER----------------------- Z: 1000~
*/
/*
NAV--------------------------- Z: 100~
*/
.youtube_outer {
  width: 100%;
  overflow: hidden;
}

.youtube_embed {
  width: 100%;
  position: relative;
  padding-top: 20px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .youtube_embed {
    padding-top: 10px;
    margin-bottom: 5px;
  }
}

.youtube_embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1001;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 100%;
  -webkit-transition: .4s;
  transition: .4s;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.modal .modal_overlay {
  display: block;
  opacity: 0;
  position: fixed;
  top: 0;
  left: -100%;
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  -webkit-transition: .4s;
  transition: .4s;
}

.modal .modal_close {
  opacity: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  line-height: 1;
  -webkit-transition: .5s;
  transition: .5s;
  width: 40px;
  height: 40px;
  -webkit-transition: 1s;
  transition: 1s;
  border: solid 2px #000;
}

.modal .modal_close::before, .modal .modal_close::after {
  position: absolute;
  content: '';
  background-color: #000;
  width: 40px;
  height: 2px;
  top: calc(50% - 1px);
  left: -1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.modal .modal_close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
  .modal .modal_close {
    top: 0px;
    right: 0px;
    font-size: 20px;
  }
}

.modal .modal_close:hover {
  cursor: pointer;
}

.modal .modal_inner {
  opacity: 0;
  position: relative;
  background-color: #fff100;
  width: 80%;
  max-height: 90%;
  padding: 80px;
  -webkit-transition: .5s;
  transition: .5s;
  overflow-y: scroll;
}

@media screen and (max-width: 768px) {
  .modal .modal_inner {
    padding: 20px;
  }
}

.modal .modal_inner_close {
  border: solid 1px #000;
  padding: 8px;
  text-align: center;
  max-width: 180px;
  margin: 40px auto 0;
}

.modal .modal_inner_close:hover {
  cursor: pointer;
}

.modal.active {
  top: 0;
}

.modal.active .modal_overlay {
  opacity: 1;
  left: 0;
}

.modal.active .modal_close {
  opacity: 1;
}

.modal.active .modal_inner {
  opacity: 1;
}

/*
MAIN------------------
*/
/*
SECTIONS------------------
*/
h2 {
  width: 30%;
  max-width: 400px;
  min-width: 300px;
  margin: 0 auto 40px;
  opacity: .7;
}

h2.tate {
  width: 8%;
  min-width: 40px;
}

section {
  width: 100%;
  background-color: #dddddd;
  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;
}

section .section_inner {
  width: 100%;
}

section .section_inner .section_title {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  left: 40px;
  color: #ff0000;
}

@media screen and (max-width: 768px) {
  section .section_inner .section_title {
    top: 20px;
    left: 0px;
  }
}

section .section_inner .section_main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
}

@media screen and (max-width: 768px) {
  section .section_inner .section_main {
    padding: 20px;
  }
}

@media screen and (max-width: 768px) {
  section.section_bg_fixed {
    background: none;
    background-color: transparent;
    display: block;
    background-image: none;
  }
}

section.section_bg_fixed .section_bg_img_outer {
  display: none;
}

@media screen and (max-width: 768px) {
  section.section_bg_fixed .section_bg_img_outer {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    height: calc(100vh - 50px);
    z-index: -1;
  }
}

section.section_bg_fixed .section_bg_img_outer .section_bg_img {
  display: none;
}

@media screen and (max-width: 768px) {
  section.section_bg_fixed .section_bg_img_outer .section_bg_img {
    display: block;
    width: 100%;
    height: calc(100vh - 50px);
    z-index: -1;
    background-size: cover;
    background-position: center center;
  }
}

@media screen and (max-width: 768px) {
  section.section_bg_fixed .section_inner {
    margin-top: calc(-100vh + 50px);
  }
}

#top {
  position: relative;
  width: 100%;
  background-color: #000;
}

@media screen and (max-width: 768px) {
  #top {
    padding-top: 0;
  }
}

#top .main_img {
  position: relative;
  width: 100%;
}

@media screen and (max-width: 768px) {
  #top .main_img {
    padding-top: 4%;
  }
}

#top .main_img .main_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg_l.png");
  background-repeat: repeat;
  background-size: 300px;
  -webkit-animation: noise 2s steps(10) infinite;
          animation: noise 2s steps(10) infinite;
  line-height: 0;
  opacity: 0.4;
  overflow: hidden;
}

#top .award {
  position: absolute;
  width: 33%;
  left: 58.29%;
  top: 13%;
}

@media screen and (max-width: 768px) {
  #top .award {
    width: 100%;
    left: 0%;
    background-color: #000;
    padding: 2% 4%;
    top: 0%;
  }
}

#top .copy_yoko {
  position: absolute;
  width: 18%;
  left: 72.9%;
  top: 23.3%;
}

@media screen and (max-width: 768px) {
  #top .copy_yoko {
    width: 59.47%;
    top: 54.5%;
    left: 35%;
  }
}

#top .title {
  position: absolute;
  width: 33%;
  left: 58.29%;
  top: 31%;
  opacity: .8;
}

@media screen and (max-width: 768px) {
  #top .title {
    width: 62.47%;
    left: 34%;
    top: 61%;
  }
}

#top .billing_cast {
  position: absolute;
  width: 20.18%;
  left: 64.32%;
  top: 71.5%;
  opacity: .6;
}

@media screen and (max-width: 768px) {
  #top .billing_cast {
    width: 70%;
    left: 15%;
    top: 85%;
  }
}

#top .copy_tate {
  position: absolute;
  width: 2.2%;
  left: 24.9%;
  top: 11.3%;
}

@media screen and (max-width: 768px) {
  #top .copy_tate {
    width: 6%;
    left: 49%;
    top: 8.6%;
  }
}

#top .release {
  position: absolute;
  width: 13.31%;
  left: 1.4%;
  top: 65.35%;
  opacity: .9;
  -webkit-transform: rotate(-4deg);
          transform: rotate(-4deg);
}

@media screen and (max-width: 768px) {
  #top .release {
    width: 24%;
    left: 6%;
    top: 62%;
  }
}

#kokuchi {
  background-color: #000;
}

#kokuchi .kokuchi_inner {
  padding: 40px;
  margin: 40px auto 0;
  max-width: 1000px;
  background-color: rgba(99, 0, 0, 0.5);
  text-align: center;
}

#kokuchi .kokuchi_inner p {
  line-height: 2;
  color: #fff;
  text-align: center;
}

#kokuchi .kokuchi_inner .kokuchi_head {
  text-align: center;
  color: #ff0000;
  font-size: 1.3em;
  padding-bottom: 0.5em;
  font-weight: bold;
}

#sns_timeline {
  background-color: black;
  width: 100%;
  padding: 20px 0 40px;
}

#sns_timeline .section_inner, #sns_timeline .section_main {
  width: 100%;
  max-width: 1100px;
}

#sns_timeline .twitter_insta {
  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;
  width: 100%;
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  #sns_timeline .twitter_insta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

#sns_timeline .twitter_insta .twitter_tl {
  width: calc(96% - (400px + 8%));
  border: solid 1px #950000;
}

@media screen and (max-width: 768px) {
  #sns_timeline .twitter_insta .twitter_tl {
    width: 90%;
    margin: 0 auto;
  }
}

#sns_timeline .twitter_insta .twitter_tl .twitter_tl_head {
  background-color: #950000;
  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;
  padding: 4px 10px;
}

#sns_timeline .twitter_insta .twitter_tl .twitter_tl_head .twitter_icon {
  color: #1DA1F2;
  font-size: 24px;
  width: 30px;
}

#sns_timeline .twitter_insta .twitter_tl .twitter_tl_head p {
  width: calc(100% - 30px);
  display: block;
  text-align: right;
}

#sns_timeline .twitter_insta .twitter_tl .twitter_tl_head p a {
  color: #dddddd;
  font-size: .8em;
}

@media screen and (max-width: 768px) {
  #sns_timeline .twitter_insta .insta_list {
    width: 100%;
    margin: 0 auto;
  }
}

#sns_timeline .theater_btn {
  width: 70%;
  max-width: 300px;
  background-color: rgba(111, 8, 8, 0.2);
  margin: 0 auto 40px;
}

#sns_timeline .theater_btn:hover {
  opacity: .7;
}

#trailer {
  background-image: url("../img/bg_trailer.jpg");
  background-attachment: fixed;
  background-size: cover;
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  #trailer {
    background-attachment: inherit;
  }
}

#trailer .youtube_outer {
  margin: 0 auto;
  width: 100%;
  max-width: 900px;
  overflow: hidden;
}

#trailer .youtube_embed {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

#trailer .youtube_embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#intro {
  background-image: url("../img/bg_intro.jpg");
  background-attachment: fixed;
  background-size: cover;
  color: #dddddd;
  line-height: 2.2;
}

@media screen and (max-width: 768px) {
  #intro {
    background-image: none;
  }
}

#intro .section_bg_img {
  background-image: url("../img/bg_intro.jpg");
}

#intro .section_inner {
  padding: 0;
}

@media screen and (max-width: 768px) {
  #intro .section_inner {
    padding: 0;
  }
}

#intro .section_inner .shugo {
  opacity: .9;
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

#intro .section_inner .section_main {
  position: relative;
  max-width: inherit;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main {
    padding-bottom: 40px;
  }
}

#intro .section_inner .section_main .overlay {
  background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(0, 19, 36, 0)), color-stop(30%, rgba(0, 11, 20, 0.4)), color-stop(50%, rgba(0, 0, 0, 0.6)), to(rgba(29, 15, 15, 0.7))) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(180deg, rgba(0, 19, 36, 0) 0%, rgba(0, 11, 20, 0.4) 30%, rgba(0, 0, 0, 0.6) 50%, rgba(29, 15, 15, 0.7) 100%) 0% 0% no-repeat padding-box;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#intro .section_inner .section_main .content {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

#intro .section_inner .section_main .content .copy_kor_yoko {
  position: relative;
  opacity: .4;
  width: 80%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .content .copy_kor_yoko {
    width: 100%;
  }
}

#intro .section_inner .section_main .content h2.cont-sp {
  margin: 40px auto;
}

#intro .section_inner .section_main .content .intro_body {
  z-index: 3;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  margin: 0 10% 0 auto;
  padding: 80px 20px 40px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .content .intro_body {
    width: 100%;
    padding: 0 0 40px;
    margin: 0 auto;
  }
}

#intro .section_inner .section_main .content .intro_body .left {
  width: 10%;
}

#intro .section_inner .section_main .content .intro_body .left h2 {
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .content .intro_body .left {
    display: none;
  }
}

#intro .section_inner .section_main .content .intro_body .right {
  width: 85%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .content .intro_body .right {
    width: 100%;
  }
}

#intro .section_inner .section_main .content .intro_body .right .copy_camp {
  width: 100%;
  opacity: .9;
  margin-bottom: 60px;
}

#intro .section_inner .section_main .content .intro_body .right .copy_kitai, #intro .section_inner .section_main .content .intro_body .right .copy_kantoku {
  opacity: .5;
  width: 70%;
  margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .content .intro_body .right .copy_kitai, #intro .section_inner .section_main .content .intro_body .right .copy_kantoku {
    width: 100%;
    max-width: 500px;
  }
}

#intro .section_inner .section_main .content .intro_body .right p {
  line-height: 2.2;
  margin-bottom: 40px;
}

#intro .section_inner .section_main .intro_imgs {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 1%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0;
  }
}

#intro .section_inner .section_main .intro_imgs img {
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
}

#intro .section_inner .section_main .intro_imgs div {
  margin: 0 .5%  0 .5%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs div.intro_img1 {
    width: 60%;
  }
}

#intro .section_inner .section_main .intro_imgs div.intro_img2 {
  padding-top: 2%;
  margin-left: .5%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs div.intro_img2 {
    width: 40%;
    margin-right: 2%;
  }
}

#intro .section_inner .section_main .intro_imgs div.intro_img3 {
  padding-top: 4%;
  margin-right: .5%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs div.intro_img3 {
    width: 50%;
    padding-top: 10%;
  }
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs div.intro_img4 {
    width: 80%;
    padding-top: 4%;
  }
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs div.intro_img5 {
    width: 45%;
    padding-right: 1%;
  }
}

#intro .section_inner .section_main .intro_imgs div.intro_img6 {
  margin-top: -4%;
  margin-left: .5%;
}

@media screen and (max-width: 768px) {
  #intro .section_inner .section_main .intro_imgs div.intro_img6 {
    width: 45%;
    padding-top: 10%;
    margin-top: 0;
  }
}

#story {
  background-image: url("../img/bg_story.jpg");
  background-attachment: fixed;
  color: #dddddd;
  line-height: 2.2;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  #story {
    background-image: none;
  }
}

#story .section_bg_img {
  background-image: url("../img/bg_story.jpg");
}

#story .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(58, 3, 3, 0.6)), to(rgba(119, 9, 9, 0.2))) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(180deg, rgba(58, 3, 3, 0.6) 0%, rgba(119, 9, 9, 0.2) 100%) 0% 0% no-repeat padding-box;
  z-index: 2;
}

#story .video_box {
  max-width: 550px;
  width: 50%;
  position: absolute;
  top: 20%;
  right: 55%;
  z-index: 1;
  -webkit-transform: skew(-10deg) rotate(-10deg);
          transform: skew(-10deg) rotate(-10deg);
}

@media screen and (max-width: 768px) {
  #story .video_box {
    width: 90%;
    right: inherit;
    left: 0;
    top: 4%;
  }
}

#story .video_box video {
  width: 100%;
}

#story .section_inner {
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding: 0 10%;
  position: relative;
}

@media screen and (max-width: 768px) {
  #story .section_inner {
    padding: 0;
    margin: 0;
    margin-top: calc(-100vh + 50px);
  }
}

#story .section_inner .section_main .story_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 40px 0;
}

@media screen and (max-width: 768px) {
  #story .section_inner .section_main .story_body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

#story .section_inner .section_main .story_body .left {
  width: 50%;
  padding-top: 20%;
}

@media screen and (max-width: 768px) {
  #story .section_inner .section_main .story_body .left {
    width: 100%;
  }
}

#story .section_inner .section_main .story_body .right {
  width: 50%;
}

@media screen and (max-width: 768px) {
  #story .section_inner .section_main .story_body .right {
    width: 100%;
  }
}

#story .section_inner .section_main .story_body .right p {
  margin-bottom: 1.5em;
}

#story .img_story {
  position: relative;
  z-index: 1;
  width: 100%;
}

#story .img_story .noise_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg_l.png");
  background-repeat: repeat;
  background-size: 500px;
  -webkit-animation: noise 2s steps(10) infinite;
          animation: noise 2s steps(10) infinite;
  line-height: 0;
  opacity: 0.4;
  overflow: hidden;
}

#cast {
  background-image: url("../img/bg_cast.jpg");
  background-attachment: fixed;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  #cast {
    background-image: none;
  }
}

#cast img {
  -webkit-filter: brightness(90%);
          filter: brightness(90%);
}

#cast img:hover {
  -webkit-filter: grayscale(70%);
          filter: grayscale(70%);
}

#cast .section_bg_img {
  background-image: url("../img/bg_cast.jpg");
}

#cast .section_inner .section_main {
  padding: 80px 20px;
}

#cast .section_inner .section_main .cast_thumb_box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#cast .section_inner .section_main .cast_thumb_box ul li {
  width: calc(90% / 8);
  padding-bottom: 16px;
}

@media screen and (max-width: 768px) {
  #cast .section_inner .section_main .cast_thumb_box ul li {
    width: calc(90% / 4);
  }
}

#cast .section_inner .section_main .cast_thumb_box ul li .cast_thumb_img {
  padding-bottom: 8px;
}

#cast .section_inner .section_main .cast_thumb_box ul li .cast_thumb_name {
  text-align: center;
  font-size: .75em;
  color: #dddddd;
}

#cast .section_inner .section_main .cast_thumb_box ul li .cast_thumb_name a {
  color: #dddddd;
}

#staff {
  background-image: url("../img/bg_staff.jpg");
  background-attachment: fixed;
  background-size: cover;
  color: #dddddd;
  line-height: 2.2;
}

@media screen and (max-width: 768px) {
  #staff {
    background-image: none;
  }
}

#staff .section_bg_img {
  background-image: url("../img/bg_staff.jpg");
}

#staff .section_inner .section_main {
  padding: 80px 20px;
}

#staff .section_inner .section_main .staff_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: rgba(0, 119, 164, 0.25);
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

#staff .section_inner .section_main .staff_box .staff_img {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  width: 25%;
  margin: -20px auto auto -20px;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box .staff_img {
    width: 60%;
    margin: -20px auto 0 0;
  }
}

#staff .section_inner .section_main .staff_box .staff_body {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  width: 75%;
  padding: 40px 40px 40px 20px;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box .staff_body {
    width: 100%;
    padding: 20px 20px 40px;
  }
}

#staff .section_inner .section_main .staff_box .staff_body .staff_name {
  width: 50%;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box .staff_body .staff_name {
    width: 100%;
  }
}

#staff .section_inner .section_main .staff_box .staff_body .staff_text p {
  margin-bottom: 4px;
}

#staff .section_inner .section_main .staff_box .staff_body .staff_btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 40px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box .staff_body .staff_btns {
    display: block;
  }
}

#staff .section_inner .section_main .staff_box .staff_body .staff_btns a {
  width: 48%;
}

#staff .section_inner .section_main .staff_box .staff_body .staff_btns a div {
  background-color: #000;
  color: #dddddd;
  padding: 4px 40px;
  letter-spacing: .2em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box .staff_body .staff_btns a div {
    width: 100%;
    margin-bottom: 10px;
  }
}

#staff .section_inner .section_main .staff_box .staff_body .staff_btns a:hover {
  opacity: .5;
}

#staff .section_inner .section_main .staff_box.ramb .staff_img {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin: auto -20px 20px auto;
  width: 30%;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box.ramb .staff_img {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: 89%;
    margin: -20px auto 0 0;
  }
}

#staff .section_inner .section_main .staff_box.ramb .staff_body {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  width: 70%;
  padding: 40px 20px 40px 40px;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box.ramb .staff_body {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 100%;
    padding: 20px 20px 40px;
  }
}

#staff .section_inner .section_main .staff_box.ramb .staff_body .staff_name {
  width: 120%;
}

@media screen and (max-width: 768px) {
  #staff .section_inner .section_main .staff_box.ramb .staff_body .staff_name {
    width: 100%;
  }
}

.modal_hide {
  display: none;
}

.modal_box {
  text-align: center;
  padding: 80px 80px;
  background-color: #000;
  color: #dddddd;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .modal_box {
    padding: 40px 20px;
  }
}

.modal_box .cap {
  text-align: center;
  font-size: 1.4em;
  margin-bottom: 20px;
}

.modal_box .year {
  margin-top: 40px;
  color: rgba(225, 31, 31, 0.878);
  font-size: 1.3em;
}

.modal_box .title {
  font-size: 1.1em;
  margin-top: 30px;
}

.modal_box .festival {
  margin-left: 1em;
  margin-top: 20px;
}

.modal_box .branch {
  margin-left: 1em;
}

.modal_box p {
  padding-bottom: 20px;
  line-height: 2.4;
}

.modal_box .cast_prof {
  text-align: left;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .modal_box .cast_prof {
    -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;
  }
}

.modal_box .cast_prof .prof_img {
  width: 30%;
}

@media screen and (max-width: 768px) {
  .modal_box .cast_prof .prof_img {
    width: 70%;
    margin-bottom: 20px;
  }
}

.modal_box .cast_prof .prof_body {
  width: 65%;
}

@media screen and (max-width: 768px) {
  .modal_box .cast_prof .prof_body {
    width: 100%;
    padding-bottom: 40px;
  }
}

.modal_box .cast_prof .prof_body .prof_name {
  font-size: 1.8em;
}

.modal_box .cast_prof .prof_body .prof_name .en {
  color: #ff0000;
  font-size: .8em;
}

.modal_box .cast_prof .prof_body .prof_name .en .yaku {
  font-size: .8em;
}

.modal_box .cast_prof .prof_body .prof_text {
  border-top: solid 1px #aaa;
  margin-top: 20px;
  padding-top: 20px;
}

.modal_box .cast_prof .prof_body .prof_text p {
  margin-bottom: 10px;
  padding-bottom: 0;
}

.modal_box .cast_prof .prof_body .prof_text p.comment_mizu {
  font-size: 1.2em;
}

#footer {
  background-image: url("../img/bg_footer.jpg");
  background-size: cover;
  padding: 40px 20px;
}

@media screen and (max-width: 768px) {
  #footer {
    padding: 40px 20px 90px;
  }
}

#footer .billing_upper {
  max-width: 400px;
  margin: 0 auto 40px;
}

#footer .billing_lower {
  max-width: 800px;
  margin: 0 auto;
}
/*# sourceMappingURL=style.css.map */