/*
-------------------
全体の装飾
-------------------
*/

/* Webフォント読み込み */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* Webフォント指定 */
#eventbody{
font-family:"Noto Sans Japanese";
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale; // Firefox用
-webkit-font-smoothing: antialiased; // Webkit系ブラウザ用
}

/*
-------------------
文字サイズ
-------------------
*/

/*
section直下のpを変更
itemsにかからないようにするため
 */
section>p{
font-size:1rem;
}

/* 見出しはcatchクラスを付け目立たせる */
p.catch{
font-size:1.1rem;
text-align: center;
font-weight: bold;
}

/* 背景(ヘッダー下白地、フッター下白地、赤グラデーション、テクスチャ) */
body.basic{
background:url("../images/white.jpg") repeat-x,
url("../images/white2.jpg") repeat-x bottom,
linear-gradient(to right, rgba(88,0,0,0.5) 0%,rgba(169,3,41,0.5) 50%,rgba(88,0,0,0.5) 100%),
url("http://geestore.com/event/gallery/ariaaa/img/background.jpg");
background-attachment: scroll,scroll,fixed,fixed;
}


/* ヘッドイメージに装飾
div#headimage{
}
 */

/* h1
#event h1.t_item{
margin-top: 34px;
}
 */


/* h2 */
#eventbody h2{
font-size:1rem;
color: #fff;
background: #660000;
}

/* h3 */
#eventbody h3{
font-size:1rem;
color:#000;
background:#EFEFEF;
margin-left: 0px;
}

/*
-------------------
ナビメニュー
-------------------
*/

/* 初期表示 */
nav#aria_nav{
-webkit-transition: 0.5s;
transition: 0.5s;
overflow: hidden;
width: 950px;
margin:0 0 50px;
border-radius: 10px;
background: #fff;
}


/* スクロールfixedクラスを追加 */
#eventbody nav.fixed{
-webkit-transition: 2s;
transition: 2s;
position: fixed;
top:0px;
margin:0;
z-index: 999;
border-radius: 0 0 10px 10px;
background: #640809;
}


#eventbody nav ul{
margin:0;
padding: 0;
display: table;
table-layout:fixed;
text-align: center;
width: 100%;
}


#eventbody nav li{
margin:0px;
padding:0;
display:table-cell;
vertical-align: middle;
border-left:1px solid #ccc;
}

#eventbody nav li:first-child
{
border-left:0px;
}

#eventbody nav li:hover{
background: #eee;
}

#eventbody nav li a{
margin:0;
padding: 5px 0;
font-size:1.5rem;
font-weight:bold;
text-decoration: none;
color: #222;
display: block;
border-bottom:10px solid #CC0000;
}

#eventbody nav li a:hover{
border-bottom:10px solid #ff5500;
}

#eventbody nav.fixed a{
color:#fff;
font-size:1rem;
}

#eventbody nav.fixed a:hover{
color:#640809;
}



/*
-------------------
会場
-------------------
*/
div.place{
font-size:1rem;
margin:0 0 0 20px;
}

div.place th{
text-align: right;
}


/*
-------------------
展示スライドショー
-------------------
*/
#eventbody #slide,
#eventbody #slide2{
width:600px;
height:338px;
position:relative;
margin:0 auto;
}

#slide img,
#slide2 img{
position:absolute;
left:0;
top:0;
}

#eventbody #slide li,
#eventbody #slide2 li{
border:0px;
}

/*
-------------------
スペシャル企画ポップアップ
下の方でレスポンシブ対応
-------------------
*/
div.special{
position: relative;
border-radius: 100%;
}

div.special img{
position: absolute;
top: -276px;
right: -166px;
z-index: 995;
transform: rotate(-10deg);
-webkit-transition: 0.3s;
transition: 0.3s;
animation:show 0.5s ease-out both 1s,
move 0.3s ease-in-out both 5s;
}

@keyframes show{
0%{
top: 500px;
right: -166px;
}

70%{
top: -300px;
right: -166px;
opacity: 1;
}

100%{
top: -276px;
right: -166px;
}
}

@keyframes move{
0%{
transform:rotate(-10deg);
}

50%{
transform:rotate(-20deg);
}

80%{
transform:rotate(0deg);
}

100%{
transform:rotate(-10deg);
}
}

/*
-------------------
セクション
section要素で囲う
-------------------
*/

#eventbody section{
background:rgba(255,255,255,1);
box-shadow: 0 0 25px 3px rgba(0,0,0,0.5);
padding: 20px;
margin-bottom: 150px;
}

#eventbody section#main{
margin-bottom: 50px;
}

/*
-------------------
新着・注目情報(赤枠)
「div#spotlight」でふたつのp要素（見出し）（本文）を囲う

<div class="spotlight">
<p></p>
<p></p>
</div>

-------------------
*/
#eventbody div#spotlight{
margin:12px 0;
background:#FFF0F5;
border:1px solid #FFB6C1;
line-height:1.6;
}

#eventbody div#spotlight p:first-child{
color:#800000;
font-size:1rem;
font-weight:bold;
background:#FFA4B2;
margin:0px;
padding:0px 12px;
}

#eventbody div#spotlight p{
margin:12px;
font-size:0.875rem;
}

/*
-------------------
グッズ販売情報テーブル

<table class="goods">
<tr>

<td>
<p class="detiel">
<span class="sen">先行</span>
<strong>■は商品名</strong> ￥5,000＋税</p>
</p>
<img>
<p>コメント</p>
</td>

<td>
同上
</td>

</tr>
</table>
-------------------
*/

table.goods{
border-spacing : 10px 10px;
border-collapse: separate;
}

table.goods td{
text-align:center;
padding:0 1em 1em;
border-top: 5px solid #71532A;;
outline:solid 1px #dddddd;
width:50%;
box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.1);
}

table.goods td p{
text-align:left;
}

table.goods td strong{
font-size:0.9rem;
}

table.goods td p.detail{
background:#E9DFD3;
padding:5px;
}

/* タグ付け */
.sugen,
.gen,
.sen,
.onsen,
.new{
margin:0 5px 2px 0;
padding:2px 4px;
color:#FFFFFF;
border: 1px solid #fff;
outline: 1px solid #ddd;
}

.new{
background:#FF0000;
font-weight:bold;
}

.sugen{
background:#ff33cc;
}

.gen{
background:#FF0000;
}

.sen{
background:#FF8c00;
}

.onsen{
background:#228B22;
}

/* 売り切れ時画像黒くする */
img.soldout{
-webkit-filter: brightness(0.4);
 -moz-filter: brightness(0.4);
 -o-filter: brightness(0.4);
 -ms-filter: brightness(0.4);
 filter: brightness(0.4);
}



/*
-------------------
コピーライト
-------------------
*/

p.small{
margin-bottom:50px;
}

small{
text-align: right;
color:#fff;
}



/*
-------------------
文字揃え
-------------------
*/

.center{
text-align: center;
}

.right{
text-align: right;
}

/*
-------------------
float
親要素にfloatクラスを付け、子要素はdivで囲う
-------------------
*/

.float{
overflow:hidden;
}

.float>div{
float:left;
}


/*
-------------------
色付け用class
-------------------
*/

div#eventbody span.red,
div#eventbody p.red,
div#eventbody strong.red{
color:#FF0000;
}

div#eventbody span.deepred,
div#eventbody p.deepred,
div#eventbody strong.deepred{
color:#990000;
}

/* 注意書き */
div#eventbody .caution{
color:#990000;
font-size:0.8rem;
}

/*
-------------------
リンクがある画像は全て、マウスホバー明るくする
-------------------
*/

#eventbody a img:hover{
-webkit-filter: brightness(1.2);
-moz-filter: brightness(1.2);
-o-filter: brightness(1.2);
-ms-filter: brightness(1.2);
filter: brightness(1.2);
}

/*
-------------------
itemリストcss版（仮）
-------------------
*/
#eventbody .img strong{
bottom: 8px;
}

#eventbody .img{
width: 222px;
height: 130px;
background: #FFF;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
margin: 0 4px 2px 0;
}

/*
-------------------
レスポンシブ
-------------------
*/

/*
-------------------
ナビメニュー
-------------------
*/

@media screen and ( max-width:480px ){



#eventbody nav.fixed ul{
}

#eventbody nav li a{
font-size:2rem;
}

#eventbody nav.fixed li a{
padding:42px 0;
}


#eventbody nav.fixed li a{
font-size:2rem;
}

}

@media screen and ( max-width:1000px ){

div.special img{
position: absolute;
top: -250px;
right: -30px;
z-index: 995;
transform: rotate(-10deg);
transform: scale(0.7);
animation:show 1s both;
animation-delay:2.5s;
}

@keyframes show{
0%{
top: 1000px;
right: -30px;
}

70%{
top: -300px;
right: -30px;
opacity: 1;
}

100%{
right: -30px;
}
}
@keyframes move{
0%{
transform:rotate(-10deg);
}

50%{
transform:rotate(-20deg);
}

80%{
transform:rotate(0deg);
}

100%{
transform:rotate(-10deg);
}
}
}

/* -------------------
flexslider
------------------- */

#eventbody div.flexslider{
width:100%;
max-width:1366px;
border:0px !important;
}

#eventbody .flexslider .slides img{
max-height: 341px;
}

#eventbody ul.slides{
margin:0;
}

#eventbody li.slides_li{
margin:0;
padding:0;
border:0px !important;
}

#eventbody li.slides_li p{
font-size:1rem;
font-weight: 600;
text-align: center;
margin: 0px;
background: #6B080D;
color: #FFF;
}
#eventbody .flex-direction-nav a{
top: 40% !important;
}