@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
}

html,body {
   font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
   width: 100%;
   height: 100%;
}

a {
  color: #000;
  text-decoration: none;
}

a:link {
  color: #000;
  text-decoration: none;
}

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;*/
}

body {
  min-width: 960px;
}

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

nav 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;
}

p {
  line-height: 170%;
}

ins {
  color: #000;
  text-decoration: none;
}

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;
}

hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #fff;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

h1,h2,h3,h4,h5,h6{
  font-weight: normal;
  margin: 0;
}

ol,ul{
  list-style: none;
}

.clear{
  zoom: 100%;
}

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

.t-ind{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.fs2{
  font-size: 12px;
}

.fs7{
  font-size: 17px;
}

.mt25{
  margin-top: 25px;
}

.mt20{
  margin-top: 20px;
}

.mt15{
  margin-top: 15px;
}

.bo{
  font-style: bold;
}

.w{
  color: white;
}

.end{
position: absolute;
right:140px;
margin-top:382px;
z-index:100;
}

.close{
position: absolute;
right:-60px;
margin-top:0px;
cursor: pointer;
}

#modalBody{
  background-image: url(../images/mb.png);
  width:720px;
  height:auto;
  position: absolute;
  z-index:1000;
  margin-left:-360px;
  margin-top:-360px;
  left:50%;
  top:53%;
}

#modalBody table{
  font-size:13px;
  font-weight:bold;
  margin-left:38px;
  margin-top:490px;
}

#modalBody table a{
  text-decoration:underline
}

#modalBody table span{
  color:#FDAA31;
  margin-left:-6px;
}

#modalBody table span.non{
  font-weight:normal;
  margin-left:0;
  color:black
}

#modalBody .bottom{
  font-size:12px;
  width:644px;
  margin-left:38px;
  margin-top:26px;
}

#modalBody .bottom span{
  font-weight:bold;
  margin-left:-6px;
}

#modalBody .sponsor{
  font-size:12px;
  width:644px;
  margin-left:38px;
  margin-top:20px;
  text-align:center;
}

#modalBK{
  position: fixed;
  z-index:999;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:#000;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  display:none;
}

header{
    height: 77px;
    position: relative;
    background: center -70px / auto url(../images/bg.svg);
}
header .wrap{
    width: 960px;
    margin: 0 auto;
}

header nav{
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -37px;
    margin: 0;
    padding-top: 0;
    height: 73px;
    overflow: hidden;
}

header nav ul{
    margin-top: 25px;
}

ul.sns{
  height: 20px;
  float:right;
  display:block;
  padding-top:12px
}

ul.sns li{
  float: right;
}

ul.sns li.tweet{
  width: 73px;
  margin-left: 7px;
}

ul.sns li.like{
    position: relative;
    top: -4px;
}

ul.sns li.official a img{
  margin-right: 8px;
}

#bgtop{
  /*background: url(../images/bg.jpg) ;*/
  background: #FFFBF3;
  min-width: 100%;
  height:636px;
  box-sizing: border-box;
  left: 0;
  top: 0px;
  position: relative;
/*  background-size: cover;*/
  background-position:center;
  padding-top: 100px;
}

#bgtop:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -37px;
    height: 73px;
    width: 100%;
    background: repeat-x center / auto url(../images/min-obi.svg);
}

#bgtop a {
  float: right;
}

#bgmid{
  background: url(../images/bgtop.svg) ;
  width: 100%;
  height:auto;
  left: 0px;
  margin-top: -70px;
  padding-top:100px;
  padding-bottom: 50px;
  background-position:center;
}

#top{
  width: 960px;
  height: auto;
  margin: 0 auto;
  position: relative;
  display:block;
}

#top .top_text{
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 0;
}

#top #top_left{
  width: 670px;
  padding-top:20px;
  position: relative;
  float:left;
  margin-left: 130px;
}
/*
#top #top_left .logo{
  margin-left:88px;
  width: 476px;
  height: 408px;
  position: relative;
  display:block;
}
*/
#top #top_left .logo {
  width: 476px;
  height: 408px;
  margin-left:88px;
  position: relative;
  z-index: 10000;
  transform: scale(.93);
  perspective: 100px; }
  #top #top_left .logo img {
    position: absolute;
    z-index: 1;
    visibility: hidden; }
    #top #top_left .logo img.show {
      visibility: visible; }
    #top #top_left .logo img.a {
      top: 0;
      left: 0; }
    #top #top_left .logo img.ni {
      top: 0;
      right: 0; }
    #top #top_left .logo img.wa {
      left: 10px;
      bottom: 0; }
    #top #top_left .logo img.ra {
      right: 10px;
      bottom: 0; }
    #top #top_left .logo img.aniwara {
      transform-style: preserve-3d;
      z-index: 0;
      transform-origin: center 204px;
      transform: rotateX(90deg);
      transition: all .5s linear;
      visibility: visible; }
      #top #top_left .logo img.aniwara.on {
        transform: rotateX(0); }

#top #top_left .date{
  top:484px;
  position:absolute;
}

#top #top_right{
  width: 270px;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: 230px;
  cursor: pointer;
  z-index: 10;
}

#top #top_right:after{
    content: 'ⓒちょぼらうにょぽみ';
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -2.5em;
    text-align: center;
    font-size: 10px;
}

#top #top_right img{
  display: block;
  width: 100%;
  height: auto;
}

#top #top_right .mukai{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform-origin: 186px 186px;
    animation: mukai 5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s infinite;
}

@keyframes mukai {
    0%{
        transform: scale(1.05);
    }

    5%{
        transform: scale(1.5);
    }

    40%{
        transform: scale(1.5);
    }

    60%{
        transform: scale(1.05);
    }

    100%{
        transform: scale(1.05);
    }
}

#top #top_right .comment{
    position: absolute;
    width: 606px;
    top: 90px;
    right: 130px;
    transform-origin: right 96px;
    transform: scale(0);
    transition: all .5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

#top #top_right:hover .comment{
    transform: scale(1);
}

#top_bottom{
    display: block;
    margin: 15px auto 0;
}

nav {
  background: url(../images/min-obi.svg) repeat-x;
  min-width: 100%;
  height:84px;
  padding-top: 78px;
  margin: -49px auto 0 auto;
  background-position:center;
  position:relative;
  z-index:1;
}

nav ul{
  width: 900px;
  height: 90px;
  display:block;
  margin:-6px auto 0 auto;
  background:#;
  padding-left:70px;
}

nav ul li{
  float:left;
  margin-right: 73px;
}

#top-nav.current{
  background-position:left bottom;
  border:none;
}

#top-nav{
  background: url(../images/top-nav.png);
  width: 70px;
  height: 19px;
}

#about-nav{
  background: url(../images/about-nav.png);
  width: 108px;
  height: 19px;
}

#lineup-nav{
  background: url(../images/lineup-nav.png);
  width: 107px;
  height: 19px;
}

#ticket-nav{
  background: url(../images/ticket-nav.png);
  width: 109px;
  height: 19px;
}

#goods-nav{
  background: url(../images/goods-nav.png);
  width: 117px;
  height: 19px;
}

#access-nav{
  background: url(../images/access-nav.png);
  width: 121px;
  height: 19px;
}

#goods-nav:hover,
#about-nav:hover,
#lineup-nav:hover,
#ticket-nav:hover,
#access-nav:hover{
  background-position:left bottom;
  border:none;
}

#datetime{
  width:765px;
  height:61px;
  display: block;
  margin: 0 auto;
  padding-top:10px;
}

#contents{
  position: relative;
  width: 900px;
  height: auto;
  margin: 0px auto 70px auto;
  z-index: 5;
}

#contents #left{
  width: 620px;
  height: auto;
  float:left;
}

#contents #left #news {
  border: 4px solid #FBA93B;
  width: auto;
  height: auto;
  margin-top: 44px;
}
#artist{
    width: 620px;
    height: auto;
    margin-top: 25px;
}

#geinin{
    width: 620px;
    height: auto;
    margin-top: 25px;
}

.title1{
    width: auto;
    height:30px;
    background-color: #FBA93B;
    font-size: 28px;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    padding-top: 4px;
}

.title2{
    width: auto;
    height:26px;
    background-color: #FBA93B;
    font-size: 26px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding-left: 8px;
    padding-top: 4px;
}



.kochira{
  color:#fff;
  float: right;
  padding-right: 8px;
}

p.tw{
  font-size: 14px;
  text-align:center;
  margin-left:370px;
  margin-top:-18px;
  display:block;
  width: 250px;
}

p.tw span{
 font-size: 22px;
}

.twm{
  margin-left:55px;
}

.gentei{
  margin-top:-44px;
  margin-left:384px;
  position:absolute;
  cursor:pointer;
}

.text1{
  font-size: 17px;
  font-weight: bold;
  line-height: 28px;
  padding: 10px 5px;
}
.text2{
  font-size: 19px;
  font-weight: bold;
  line-height: 28px;
  padding: 10px 5px;
}

p.name span{
  margin-top: 12px;
  font-size: 15px;
  font-weight: bold;
  line-height: 28px;
}

#cau{
  width:872px;
  margin:20px auto 0 auto;
  display:block;
  padding:10px;
  background:#FFF;
  border:4px solid #FDAA31
}

h3{
  font-size: 20px;
  font-weight: bold;
  text-indent:-0.5em;
  color:#FDAA31
}

p.caution{
  margin-top: 5px;
  font-size: 13px;
  line-height: 20px;
}

#twitter{
  width:250px;
  float:right;
  margin-top: 45px
}

footer {
  background: #FDAA31;
  position:relative;
  width: 100%;
  height: 65px;
  padding-top:3px;
  z-index:100;
}

footer p{
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: block;
  width: 960px;
  text-align: center;
  margin: 14px auto 0 auto;
}


#cp {
  color:#fff;
  font-size: 10px;
  font-weight: 700;
  display: block;
  width: 960px;
  text-align: center;
  margin: 8px auto 0 auto;
}

p.cu{
  font-size: 14px;
  padding-top: 16px;
}


#fl{
  width:620px;
  height:100px;
  border:4px solid #fff;
  marign-top:10px;
}

#fl p.pg1{
  font-size:18px;
  font-weight:bold;
  color: #FDAA31;
  padding-top:9px;
  margin-left:16px;
}

#fl p.pg2{
  font-size:18px;
  font-weight:bold;
  line-height:26px;
  color: #000;
  padding-top:2px;
  margin-left:16px;
}

.yomiuri{
  position:absolute;
  top: 395px;
  left: 99px;
  z-index:202;
  font-size: 11px;
  font-weight: bold;
  font-family:  "hiragino kaku gothic pro", "ヒラギノ角ゴ Pro";
}

.yomiuri:hover, .galakelink:hover, .pclink:hover{
  color: #3451a1;
}

/*PC LINK*/
.pclink{
  position:absolute;
  top: 555px;
  left: 233px;
  z-index:233;
  font-size: 10px;
  font-family: "hiragino kaku gothic pro", "ヒラギノ角ゴ Pro";
}

/*GALAKE LINK*/
.galakelink{
  position:absolute;
  top: 569px;
  left: 220px;
  z-index:204;
  font-size: 10px;
  font-family: "hiragino kaku gothic pro", "ヒラギノ角ゴ Pro";
}

.moushikomi{
  position:absolute;
  top: 440px;
  left: 358px;
  z-index:204;
}

#modal-overlay{
  z-index:200;
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:120%;
  background-color:rgba(0,0,0,0.70);
}

#modal-wp{
  width:605px;
  height:720px;
  position:absolute;
  left:53.5%;
  margin-left:-360px;
  top:50px;
  display:none;
  z-index:201
}

.cls{
  position:absolute;
  right:-60px;
  cursor:pointer
}

.p-link{
  cursor:pointer
}


.goods{
  margin-top:16px;
}

/*TOP PAGE*/
section#twitter{
/*  border: 3px solid red;*/
}

section#twitter iframe{
  border: 1px solid #FDAA31 !important;
  padding: 30px;
}

.timeline-header-title, section#twitter iframe .timeline-Widget{
  font-size: 12px !important;
  color: #FDAA31;
  background-color: aquamarine !important;
  data-border-color: #FDAA31
}

.twitter-tweet {
  display: inline-block;
  padding: 16px;
  margin: 10px 0;
  max-width: 468px;
  border:  #ff6490 1px solid;
  border-top-color: #ff6490;
  border-bottom-color: #ff6490;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  font: bold 14px/18px Helvetica, Arial, sans-serif;
  color: #FDAA31;
  data-border-color: #ff6490
}

.blog_bunner {
  margin-top:20px;
}

.text_small{
    font-size: 15px;
}