@charset "UTF-8";
.clearfix {
  zoom: 1; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

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

html {
  min-height: 100%;
  color: #000;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  -webkit-text-size-adjust: 100%; }

body {
  min-height: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    body {
      min-width: 750px;
      font-size: 28px;
      line-height: 60px;
      overflow-x: hidden; } }

img {
  display: block; }

strong {
  font-weight: bold; }

a {
  text-decoration: none; }
  @media only screen and (min-width: 751px), print {
    a.telLink {
      color: inherit;
      pointer-events: none; } }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    * {
      max-height: 999999px; } }

#opening #skipBtn {
  display: none; }

#layoutWrap {
  display: flex;
  min-height: 100%; }
  @media only screen and (min-width: 751px), print {
    #layoutWrap:before {
      content: "";
      position: fixed;
      width: 50%;
      min-width: 620px;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(238, 233, 204, 0.97);
      z-index: 2;
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } }

#layoutBg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1; }
  @media only screen and (min-width: 751px), print {
    #layoutBg {
      background: url(/play/oresteia/common/img/bg_layout.jpg) repeat-x right top;
      background-size: cover;
      -webkit-animation: imgScroll 90s linear 0s infinite;
      -moz-animation: imgScroll 90s linear 0s infinite;
      -ms-animation: imgScroll 90s linear 0s infinite;
      animation: imgScroll 90s linear 0s infinite;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      animation-fill-mode: both; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #layoutBg {
      width: 100vw;
      height: 100vh;
      background: url(/play/oresteia/common/img/bg_layout_sp.jpg) repeat-x right top;
      background-size: cover; } }

@-webkit-keyframes imgScroll {
  0% {
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }
  20% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 5vw 0; }
  30% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  50% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    background-position: 25vw 0; }
  70% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 30vw 0; }
  80% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  99.9% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    background-position: 100vw 0; } }
@-moz-keyframes imgScroll {
  0% {
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }
  20% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 5vw 0; }
  30% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  50% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    background-position: 25vw 0; }
  70% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 30vw 0; }
  80% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  99.9% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    background-position: 100vw 0; } }
@-ms-keyframes imgScroll {
  0% {
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }
  20% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 5vw 0; }
  30% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  50% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    background-position: 25vw 0; }
  70% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 30vw 0; }
  80% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  99.9% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    background-position: 100vw 0; } }
@keyframes imgScroll {
  0% {
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }
  20% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 5vw 0; }
  30% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  50% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    background-position: 25vw 0; }
  70% {
    -moz-transform: scale(1.5, 1.5);
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    background-position: 30vw 0; }
  80% {
    -moz-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%; }
  99.9% {
    -moz-transform-origin: 100% 16.5%;
    -ms-transform-origin: 100% 16.5%;
    -webkit-transform-origin: 100% 16.5%;
    transform-origin: 100% 16.5%;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1); }
  100% {
    background-position: 100vw 0; } }
#mainContentWrap {
  position: relative;
  width: auto;
  z-index: 10; }
  @media only screen and (min-width: 751px), print {
    #mainContentWrap {
      width: calc(100% - 191px); } }

#stage {
  opacity: 0;
  -webkit-transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -o-transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
  #stage.loaded {
    -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -ms-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -o-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -ms-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    opacity: 1; }

.mainContentInner {
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
  @media only screen and (min-width: 751px), print {
    .mainContentInner {
      width: calc((100% + 191px) / 2 - 191px);
      min-width: 429px; } }

.contentBlock {
  position: relative; }
  .contentBlock .contentTitle .en {
    color: #9B493F;
    font-size: 20px;
    font-family: "IM Fell Great Primer", serif; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .contentBlock .contentTitle .en {
        font-size: 40px; } }
  .contentBlock .contentTitle .jp {
    color: #333;
    font-size: 12px;
    line-height: 12px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .contentBlock .contentTitle .jp {
        font-size: 24px;
        line-height: 24px; } }

.accessBlock {
  margin-top: 30px;
  padding: 0 24px 25px;
  color: #4D4D4D; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .accessBlock {
      margin-top: 204px;
      padding: 135px 60px 60px;
      background: rgba(238, 233, 204, 0.97); } }
  .accessBlock .address {
    font-size: 12px;
    line-height: 21px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .accessBlock .address {
        font-size: 24px;
        line-height: 42px; } }
  .accessBlock .imgWrap {
    margin-top: 5px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .accessBlock .imgWrap {
        margin-top: 10px; } }
  .accessBlock .caption {
    margin-top: 12px;
    font-size: 12px;
    line-height: 21px; }
    @media only screen and (min-width: 751px), print {
      .accessBlock .caption {
        letter-spacing: -0.5px; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .accessBlock .caption {
        margin-top: 25px;
        font-size: 24px;
        line-height: 32px; } }
  .accessBlock .linkList {
    margin-top: 10px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .accessBlock .linkList {
        margin-top: 20px; } }
    .accessBlock .linkList li {
      line-height: 14px; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        .accessBlock .linkList li {
          line-height: 28px; } }
      .accessBlock .linkList li:nth-child(n+2) {
        margin-top: 8px; }
        @media only screen and (min-width: 1px) and (max-width: 750px) {
          .accessBlock .linkList li:nth-child(n+2) {
            margin-top: 10px; } }
    .accessBlock .linkList a {
      padding-left: 12px;
      color: #000;
      background: url(/play/oresteia/common/img/arw_footer_link.png) no-repeat left center; }
      @media only screen and (min-width: 751px), print {
        .accessBlock .linkList a:hover {
          color: #9B493F;
          background: url(/play/oresteia/common/img/arw_footer_link_on.png) no-repeat left center; } }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        .accessBlock .linkList a {
          padding-left: 24px;
          background: url(/play/oresteia/common/img/arw_footer_link_sp.png) no-repeat left center; } }
  .accessBlock .seasonWrap {
    margin-top: 18px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .accessBlock .seasonWrap {
        margin-top: 85px; } }
    .accessBlock .seasonWrap dl {
      width: 310px;
      margin-top: 6px; }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        .accessBlock .seasonWrap dl {
          width: 620px;
          margin-top: 12px; } }
      .accessBlock .seasonWrap dl dd {
        margin-top: 4px; }
    .accessBlock .seasonWrap ul {
      display: flex;
      justify-content: space-between; }
  .accessBlock .copyWrap {
    margin-top: 20px;
    font-size: 10px;
    line-height: 15px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .accessBlock .copyWrap {
        margin-top: 85px;
        font-size: 20px;
        line-height: 30px;
        text-align: center; } }

header {
  position: relative; }
  @media only screen and (min-width: 751px), print {
    header {
      width: 191px;
      z-index: 10; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    header {
      z-index: 100; } }
  header .headerInner {
    position: fixed;
    width: 191px;
    top: 0;
    left: 0;
    padding: 15px 13px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header .headerInner {
        width: 100%;
        height: 100%;
        padding: 28px 28px 80px;
        background: #EEE9CC;
        overflow: auto;
        opacity: 0;
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        -ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        -o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        -ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    header .logo {
      display: flex;
      justify-content: flex-start; }
      header .logo a:nth-child(n+2) {
        margin-left: 60px; } }
  header .ticketWrap {
    position: relative;
    margin-top: 18px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header .ticketWrap {
        margin-top: 40px; }
        header .ticketWrap img {
          margin: auto; } }
    header .ticketWrap .floatLink {
      position: absolute; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header .ticketWrap .telLink {
        width: 420px;
        height: 55px;
        top: 115px;
        left: 30px; } }
    @media only screen and (min-width: 751px), print {
      header .ticketWrap .boxLink {
        width: 142px;
        height: 34px;
        top: 122px;
        left: 12px;
        -webkit-transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        -ms-transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        -o-transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        -ms-transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
        header .ticketWrap .boxLink:hover {
          background: rgba(255, 255, 255, 0.3); } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header .ticketWrap .boxLink {
        width: 630px;
        height: 70px;
        top: 250px;
        left: 30px; } }
  header .snsWrap {
    margin-top: 15px; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header .snsWrap {
        margin-top: 36px; } }
    header .snsWrap ul {
      display: flex;
      flex-wrap: wrap; }
      @media only screen and (min-width: 751px), print {
        header .snsWrap ul {
          width: 96px;
          justify-content: space-between; } }
      @media only screen and (min-width: 1px) and (max-width: 750px) {
        header .snsWrap ul {
          justify-content: center; } }
    @media only screen and (min-width: 751px), print {
      header .snsWrap li:nth-child(n+3) {
        margin-top: 6px; } }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      header .snsWrap li:nth-child(n+2) {
        margin-left: 30px; } }
    header .snsWrap li a {
      display: block;
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      header .snsWrap li a:hover {
        opacity: 0.7; }

#gNavTrigger {
  position: fixed;
  width: 108px;
  height: 108px;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 100;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -o-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
  #gNavTrigger:before {
    content: "MENU";
    position: absolute;
    width: 100%;
    top: 60px;
    left: 0;
    color: #9B493F;
    font-size: 20px;
    text-align: center; }
  #gNavTrigger .line {
    position: absolute;
    width: 52px;
    height: 4px;
    top: 50%;
    left: 50%;
    margin-left: -26px;
    background: #9B493F; }
    #gNavTrigger .line.line01 {
      margin-top: -22px; }
    #gNavTrigger .line.line02 {
      margin-top: -6px; }
    #gNavTrigger .line.line03 {
      margin-top: 10px; }

@media only screen and (min-width: 751px), print {
  #gNav {
    margin-top: 14px; } }
@media only screen and (min-width: 1px) and (max-width: 750px) {
  #gNav {
    margin-top: 40px; } }
#gNav .jp {
  color: #9B493F;
  font-size: 16px;
  font-weight: bold;
  line-height: 14px; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #gNav .jp {
      font-size: 46px;
      line-height: 46px; } }
#gNav .en {
  margin-top: 3px;
  color: #333;
  font-family: "IM Fell Great Primer", serif;
  font-size: 10px;
  line-height: 10px; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #gNav .en {
      font-size: 24px;
      line-height: 24px; } }
@media only screen and (min-width: 1px) and (max-width: 750px) {
  #gNav li {
    text-align: center; } }
#gNav li:nth-child(n+2) {
  margin-top: 12px; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    #gNav li:nth-child(n+2) {
      margin-top: 30px; } }
@media only screen and (min-width: 751px), print {
  #gNav a {
    display: block;
    -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -ms-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -o-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    -ms-transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    #gNav a:hover {
      opacity: 0.7; } }

html.menu header #gNavTrigger {
  width: 100px;
  height: 100px;
  top: 0;
  left: calc(100% - 100px);
  background: #000; }
  html.menu header #gNavTrigger:before {
    opacity: 0; }
  html.menu header #gNavTrigger .line {
    width: 40px;
    margin-left: -20px;
    background: #fff; }
    html.menu header #gNavTrigger .line.line01 {
      margin-top: -2px;
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    html.menu header #gNavTrigger .line.line02 {
      opacity: 0; }
    html.menu header #gNavTrigger .line.line03 {
      margin-top: -2px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); }
html.menu header .headerInner {
  opacity: 1;
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0); }

.accordion {
  display: none; }

.imgWrap {
  position: relative; }
  .imgWrap:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }

.btnStyle {
  display: flex;
  position: relative;
  width: 198px;
  height: 52px;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #9B493F;
  background: #9B493F; }
  @media only screen and (min-width: 1px) and (max-width: 750px) {
    .btnStyle {
      width: 100%;
      height: 104px;
      border-width: 2px;
      white-space: nowrap; }
      .btnStyle.active {
        color: #fff;
        background: #9B493F; } }
  @media only screen and (min-width: 751px), print {
    .btnStyle {
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      .btnStyle:hover {
        opacity: 0.7; } }
  .btnStyle.arw:after {
    content: url(/play/oresteia/common/img/arw_btn.png);
    position: absolute;
    top: 50%;
    right: 15px;
    line-height: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .btnStyle.arw:after {
        content: url(/play/oresteia/common/img/arw_btn_sp.png);
        right: 30px; } }
  .btnStyle.modalTrigger:before, .btnStyle.modalTrigger:after, .btnStyle.switchTrigger:before, .btnStyle.switchTrigger:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1px;
    top: 50%;
    right: 17px;
    background: #fff;
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0); }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .btnStyle.modalTrigger:before, .btnStyle.modalTrigger:after, .btnStyle.switchTrigger:before, .btnStyle.switchTrigger:after {
        width: 24px;
        height: 2px;
        right: 36px;
        margin-top: 1px; } }
  .btnStyle.modalTrigger:after, .btnStyle.switchTrigger:after {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  @media only screen and (min-width: 751px), print {
    .btnStyle.modalTrigger, .btnStyle.switchTrigger {
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
      .btnStyle.modalTrigger:hover, .btnStyle.switchTrigger:hover {
        opacity: 0.7; } }
  .btnStyle.modalTrigger.active:before, .btnStyle.switchTrigger.active:before {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  .btnStyle.modalTrigger.active:after, .btnStyle.switchTrigger.active:after {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  .btnStyle.iconPdf {
    padding-right: 30px; }
    .btnStyle.iconPdf:before {
      position: absolute;
      top: 50%;
      right: 14px;
      line-height: 0;
      content: url(/play/oresteia/common/img/icon_pdf_on.png);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; }
    @media only screen and (min-width: 1px) and (max-width: 750px) {
      .btnStyle.iconPdf:before {
        content: url(/play/oresteia/common/img/icon_pdf_sp.png);
        right: 28px; } }

.ie11 .btnStyle {
  padding-top: 5px; }

@media only screen and (min-width: 751px), print {
  .s {
    display: none !important; } }
@media only screen and (min-width: 1px) and (max-width: 750px) {
  .l {
    display: none !important; } }