@charset "UTF-8";
/*---------------------------------------------------------------------------
font
---------------------------------------------------------------------------*/
.en {
  font-family: 'Playfair Display', serif; }

.min,
#topics .topicsList li h3,
#ticket h4 {
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; }

/*--------------------------------------------------------------
space-size
--------------------------------------------------------------*/
/*--------------------------------------------------------------
Media Queries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
fontsize
--------------------------------------------------------------*/
/*---------------------------------------------------------------------------
color
---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------

common

---------------------------------------------------------------------------*/
body {
  background-color: #091c2e;
  color: #fff;
  overflow-x: hidden;
  line-height: 1.7; }

a {
  color: #fff; }

.clf:after {
  content: "";
  clear: both;
  display: block; }

.header {
  background-color: #122F48; }
  .header h1 {
    background-color: #122F48; }
  .header .global {
    background-color: #122F48; }
    .header .global li {
      font-weight: bold; }
      .header .global li span {
        color: #10B7F5;
        letter-spacing: 0.2em; }
      @media screen and (min-width: 1000px) {
        .header .global li a:after {
          background-color: #10B7F5; } }

@media screen and (min-width: 1000px) {
  .header .global li a:hover:after, #topics #nav_topics a:after, #ticket #nav_ticket a:after {
    width: 100%; } }

.drawer-hamburger {
  color: #fff; }

.drawer-nav {
  background-color: #000; }

.btn {
  text-align: center; }
  .btn a {
    font-size: 18px; }
    @media screen and (min-width: 1000px) {
      .btn a {
        font-size: 18px; } }
  .btn a, .btn span {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    padding: 3px 30px;
    margin: 0 auto;
    text-decoration: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px; }

.btn a, .btn span, #topics .topicsList li .btn {
  color: #fff;
  background-color: #10B7F5;
  border: 2px solid #10B7F5; }

.btn a:hover, .profileBtn span:hover {
  background-color: #fff;
  text-decoration: none;
  color: #10B7F5; }

.contentIn {
  max-width: 960px;
  margin: 0 auto 20px;
  box-sizing: border-box; }

.ttl {
  color: #fff; }
  .ttl span.en {
    color: #10B7F5; }

#snsBlock {
  margin: 20px 0;
  float: right; }

.caption {
  margin-top: 10px;
  margin-bottom: 0; }

.flLeft {
  float: left; }

.flRight {
  float: right; }

.ttl {
  line-height: 1.0;
  margin: 0 0 30px 0;
  text-align: center; }
  .ttl span {
    display: block;
    margin-bottom: 20px;
    font-size: 56px; }
    @media screen and (min-width: 769px) {
      .ttl span {
        font-size: 64px; } }

h3 {
  font-size: 18px; }
  @media screen and (min-width: 769px) {
    h3 {
      font-size: 32px; } }

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

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

p {
  margin-bottom: 1.0em; }

#pageTop {
  background-color: #10B7F5;
  color: #fff; }

footer .returnBlock li a {
  color: #fff; }
footer .global {
  background-color: #091c2e; }

/* #loading
---------------------------------------------------------------------------*/
#loading {
  background-color: #091c2e;
  color: #10B7F5; }

#loading img {
  max-width: 227px; }

/* #mainvisual
---------------------------------------------------------------------------*/
#mainvisual {
  background-color: #1C415C; }
  #mainvisual img {
    margin: auto; }

/* #bnr_access
---------------------------------------------------------------------------*/
#bnr_access {
  padding-top: 40px; }
  #bnr_access .bnr {
    margin: 0 auto 40px;
    text-align: center; }
    #bnr_access .bnr img {
      margin: 0 auto; }

/* #news
---------------------------------------------------------------------------*/
#news {
  background: #1C415C; }

/* #highlight
---------------------------------------------------------------------------*/
#point {
  padding-bottom: 40px;
  background: #122F48 url("/orchard/lineup/18_ozone/images/bg.png") left top no-repeat; }
  @media screen and (min-width: 769px) {
    #point {
      background-attachment: fixed;
      padding-bottom: 80px; } }
  #point h3 {
    text-align: center;
    margin-bottom: 20px; }

/* #message
---------------------------------------------------------------------------*/
#message {
  background: #091c2e url("/orchard/lineup/18_ozone/images/message_bg.jpg") center top no-repeat;
  background-size: 100% auto;
  padding-top: 30vw; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #message {
      background-image: url("/orchard/lineup/18_ozone/images/message_bg@2x.jpg"); } }
  @media screen and (min-width: 769px) {
    #message {
      padding-top: 40vw;
      background-size: cover; } }
  #message .content {
    background: rgba(9, 28, 46, 0.8);
    width: 100%;
    padding: 0; }
  #message .contentIn {
    padding: 2% 5% 5%; }
    @media screen and (min-width: 1000px) {
      #message .contentIn {
        padding: 5% 0; } }
    #message .contentIn p.en {
      margin-top: 20px; }
    #message .contentIn p.en, #message .contentIn p.name {
      text-align: right;
      font-size: 18px;
      font-weight: bold; }

/* #artists
---------------------------------------------------------------------------*/
#artists {
  background: #122F48 url("/orchard/lineup/18_ozone/images/bg.png") left top no-repeat; }
  @media screen and (min-width: 769px) {
    #artists {
      background-attachment: fixed; } }
  #artists .contentIn {
    padding: 2% 5% 0; }
    @media screen and (min-width: 1000px) {
      #artists .contentIn {
        padding: 5% 0 0; } }
  #artists .name_ja {
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px; }
    #artists .name_ja span {
      font-size: 16px; }
  #artists .pic {
    width: 100%;
    margin: 0 auto 10px; }
    @media screen and (min-width: 769px) {
      #artists .pic {
        margin-bottom: 20px; } }
  @media screen and (min-width: 1000px) {
    #artists .profileBlock .pic {
      margin: 0;
      float: right; } }
  #artists .profileBlock .textBlock .name {
    font-size: 24px; }
  #artists #trio {
    margin-bottom: 40px; }
    #artists #trio .pic {
      max-width: 480px; }
    @media screen and (min-width: 1000px) {
      #artists #trio .textBlock {
        margin-right: 520px; } }
    #artists #trio .textBlock .name {
      margin-bottom: 20px;
      color: #319B4B;
      font-size: 24px; }
      @media screen and (min-width: 769px) {
        #artists #trio .textBlock .name {
          font-size: 32px; } }
  #artists #dashiell .pic {
    max-width: 300px; }
  @media screen and (min-width: 1000px) {
    #artists #dashiell .textBlock {
      margin-right: 340px; } }
  #artists #dashiell .textBlock .guest {
    color: #C40E1B;
    border: 2px solid #C40E1B;
    display: inline-block;
    padding: 0 1.0em;
    font-weight: bold; }
  #artists #dashiell .textBlock .name {
    color: #C40E1B;
    font-size: 24px; }
    @media screen and (min-width: 769px) {
      #artists #dashiell .textBlock .name {
        font-size: 32px; } }
    #artists #dashiell .textBlock .name span {
      font-size: 18px; }
  #artists .profileBlockSub {
    margin-bottom: 80px; }
    @media screen and (min-width: 769px) {
      #artists .profileBlockSub {
        margin-bottom: 40px; } }
    #artists .profileBlockSub .pic {
      max-width: 300px; }
      @media screen and (min-width: 1000px) {
        #artists .profileBlockSub .pic {
          float: left; } }
    @media screen and (min-width: 1000px) {
      #artists .profileBlockSub .textBlock {
        margin-left: 340px; } }
    #artists .profileBlockSub .textBlock .name {
      font-size: 24px;
      color: #319B4B; }
      #artists .profileBlockSub .textBlock .name span {
        font-size: 18px; }
    #artists .profileBlockSub .textBlock .btn {
      text-align: center;
      margin: 20px auto 0 0; }
      @media screen and (min-width: 769px) {
        #artists .profileBlockSub .textBlock .btn {
          text-align: left; } }

/* #past
---------------------------------------------------------------------------*/
#past {
  padding: 5% 0 0; }
  #past .ttl {
    text-align: center; }
    #past .ttl h2 {
      font-size: 24px;
      text-align: center;
      position: relative;
      display: inline-block;
      padding: 0 55px;
      margin: 0 auto;
      line-height: 1.7; }
      @media screen and (min-width: 769px) {
        #past .ttl h2 {
          font-size: 32px; } }
    #past .ttl h2:before, #past .ttl h2:after {
      content: '';
      position: absolute;
      top: 50%;
      display: inline-block;
      width: 45px;
      height: 2px;
      background-color: #fff; }
    #past .ttl h2:before {
      left: 0; }
    #past .ttl h2:after {
      right: 0; }
  #past li {
    margin-left: 1.0em;
    margin-bottom: 1.0em;
    position: relative; }
  #past li:before {
    content: '-';
    position: absolute;
    left: -1.0em; }

/*---------------------------------------------------------------------------

ticket

---------------------------------------------------------------------------*/
#ticket .content {
  padding-bottom: 0; }
  #ticket .content h4 {
    color: #10B7F5; }
  #ticket .content h4, #ticket .content .ticketPageLinkTtl {
    border-bottom: solid 1px #1C415C;
    border-top: solid 1px #1C415C;
    margin-bottom: 20px;
    padding: 5px; }
  #ticket .content .ticketPageLinkTtl h4 {
    border: none;
    margin: 0;
    padding: 0; }
  #ticket .content .eventSchedule .holiday, #ticket .content .info, #ticket .content #information .info, #ticket .content #bunkamuraTicket h5 + p {
    background-color: #122F48 !important; }

/*---------------------------------------------------------------------------

topics

---------------------------------------------------------------------------*/
#topics .content {
  padding-bottom: 0; }
  #topics .content .topicsList li {
    margin-bottom: 40px; }
  #topics .content .topicsList li > a, #topics .content .topicsList li > div, #topics .content #topicsEntry .text {
    background-color: #122F48;
    border: solid 1px #1C415C;
    padding: 5%;
    color: #fff; }
    #topics .content .topicsList li > a h3, #topics .content .topicsList li > div h3, #topics .content #topicsEntry .text h3 {
      color: #10B7F5; }
    #topics .content .topicsList li > a .update, #topics .content .topicsList li > div .update, #topics .content #topicsEntry .text .update {
      color: #7894a8;
      text-align: right; }
  #topics .content #topicsEntry h3 {
    font-size: 32px; }

/*---------------------------------------------------------------------------

#Anniversary

---------------------------------------------------------------------------*/
#Anniversary {
  text-align: center;
  padding: 40px;
  clear: both; }
