/*
Theme Name: ART EXHIBITION FLYERS
Description:ART EXHIBITION FLYERS
Theme URI: ART EXHIBITION FLYERS
Author: mizu
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

body{
    font-family: 'Julius Sans One', sans-serif , helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif; 
}

a{
    text-decoration:none;
}

.fl{
    float: left;
}




header{
    opacity: 0.8;
    position: fixed;
    top:0;
    z-index: 100;
    overflow: hidden;
}

h1{
    font-size: 21px;
    font-weight: lighter;
    letter-spacing: 3px;
    color: #000;
    text-align: center;
}

#top-head2 h1 a{
   color: #fff; 
}




/* =======================================
    header
======================================= */

  /* header */
#top-head,
#top-head2{
    height: 200px;
    width: 100%;
    margin: 0px auto 0;
    line-height: 1;
    background-color: #fff;
    overflow: hidden;
    float: left;
}
#top-head:after {
    content: "";
    display: block;
    width: 100%;
}

#top-head a{
    color: #aaa;
    text-decoration: none;
}

#top-head .inner {
    position: relative;
}

/*ロゴ初期*/
#top-head .logo{
    color:#aaa;
    float: left;
    font-size: 25px;
    position: absolute;/* 中央揃え*/
    top: 100px;
    left:50%;
    margin-left:-180px;
}

#global-nav ul{
    font-weight: lighter;
    letter-spacing: 4px;
    list-style: none;
    font-size: 12px;
    text-align: center;
    position: absolute;/* 中央揃え*/
    top:180px;
    left:50%;
    margin-left:-225px;
}


.about a{
    font-weight: lighter;
    letter-spacing: 4px;
    list-style: none;
    font-size: 12px;
    padding: 3px 20px 2px;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa; 
    text-align: center;
    position: absolute;/* 中央揃え*/
    top:30px;
    right:100px;
}

#top-head .about a:hover{
    color: #000;
}



#global-nav ul li {
    float: left;
    margin: 0 20px;
}

/*#global-nav ul li:first-child{
    float: left;
    margin: 0 20px;
    padding: 3px 10px 2px;
    border-top:1px solid #333; 
    border-bottom:1px solid #333;
}*/

#global-nav ul li a {
    padding: 0 10px 5px;
    color: #aaa;
    border-bottom: 1px #aaa solid;
}

#global-nav ul li a:hover{
    padding: 0 10px 5px;
    color: #000;
    border-bottom: 1px #000 solid;
}


/* transition */
#top-head,
#top-head:after,
#top-head .about a,
#top-head2 .about a,
#top-head .logo,
#global-nav ul li,
#global-nav ul li a,
.search-main a,
.search-design ul li {
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

/* Fixed */
#top-head.fixed,
#top-head2 {
    height: 70px;
    background-color: #333;
}

#top-head2 .about a{
    color: #fff;
}

#top-head2 .about a:hover{
    color: #000;
}

#top-head.fixed a{
     color: #fff;
    text-decoration: none;
}

#top-head.fixed .logo,
#top-head2 .logo{
    margin: 20px 0 0 60px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    top: 10px;
    left:5%;
}

#top-head.fixed #global-nav ul,
#top-head2 #global-nav ul
{
    font-weight: lighter;
    letter-spacing: 4px;
    list-style: none;
    font-size: 12px;
    color: #fff;
    position: absolute;
    top:22px;
    left:70%;
}

#top-head.fixed #global-nav ul li,
#top-head2 #global-nav ul li{
    margin: 10px 5px 0;
}

#top-head.fixed #global-nav ul li a,
#top-head2 #global-nav ul li a {
    color: #fff;
    border: none;
}

#top-head.fixed #global-nav ul li a:hover,
#top-head2 #global-nav ul li a:hover{
    padding: 0 10px 5px;
    color: #000;
    border-bottom: none;
}


/* =======================================
    hover
======================================= */

.content{
    transition: 0.6s ;
}
.content:hover {
   opacity: 0.5;
   }


/* =======================================
    中央揃え
======================================= */
#main{
    max-width: 1450px;
    margin: 350px auto 0;
    overflow: hidden;
    font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}



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


#main>ul>li{
    margin: 0 55px 100px;
    font-size:0;
    text-align: center;
    width: 180px;
    height: 320px;
    float: left;
}


#main>ul>li>.content>a{
 font-size: 10px;
 padding: 0px 0 0 0;
 color: #000;
 text-align: left;
 letter-spacing: 1px;
display: block;
  line-height:1.5;
}

#main>ul>li>.content>a>img {
   /* display: none;*/
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    box-shadow: 8px 9px 6px rgba(0,0,0,0.1);
}

.content{
	width: 180px;
	height: 180px;
    position: relative;
}

.content img{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate(-50%, -50%);
transform: translate3d(-50%, -50%, 0);
}



.data{
    padding: 20px 0 5px;
    width: 180px;
    overflow: hidden;
    border-bottom: solid 1px #aaa;
    clear: both;
}


.data ul li,
.data ul li a{
    font-size: 10px;
    font-weight: normal;
    padding: 2px 0 0 0;
    color: #000;
    text-align: left;
    letter-spacing: 1px;
    line-height:1.5;
}




.data ul li span{
 font-size: 8px;
 font-weight: normal;
 padding: 2px 0 0 0;
 color: #aaa;
 text-align: left;
 letter-spacing: 1px;
   line-height:1.5;
}


/*.data ul li a.place{
 font-size: 10px;
 font-weight: normal;
 padding: 5px 0 0 0;
 color: #000;
 text-align: left;
 letter-spacing: 1px;
 line-height:1.5;
}


.data ul li a.place span{
 font-size: 10px;
 font-weight: normal;
 padding: 5px 0 0 0;
 color: #aaa;
 text-align: left;
 letter-spacing: 1px;
   line-height:1.5;
}


.data ul li a.date{
 font-size: 10px;
 font-weight: normal;
 padding: 5px 0 5px;
 color: #000;
 text-align: left;
  letter-spacing: 1px;
  line-height:1.5;
}


.data ul li a.date span{
 font-size: 8px;
 font-weight: normal;
  padding: 5px 0px 2px;
 color: #aaa;
 letter-spacing: 2px;
   line-height:1.5;
}*/



.size{
    width: 180px;
    margin: 5px 0 0 0;
    overflow: hidden;
    clear: both;
}

.size ul{
    width: 100%;
}

.size ul li{
     font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
 font-size: 10px;
 letter-spacing: 1px;
 height: 15px;
    color: #fff;
    background-color: #eee;
    padding: 4px 10px 1px;
    margin: 5px 5px 0 0;
    border-radius: 5px;
    float: left;
}

.size a{
    color: #aaa !important;
}


footer{
    height: 150px;
    margin: 50px 0 0;
    background-color: #eee;
    position: relative;
}

footer p{
    color: #aaa;
    font-size: 10px;
    letter-spacing: 2px;
    text-align: right;
    position: absolute;
    bottom: 30px;
    right: 100px;
}


/* =======================================
 フェードイン
======================================= */





/* =======================================
    ClearFixElements
======================================= */
#main>ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

#main>ul {
    display: inline-block;
}



/* =======================================
    cate
======================================= */
/*#cate{
    position: relative;
    top: 10px;
    z-index: 100;
}


#back2{
display:none;
width:100%;
height:180px;
background-color:#333;
filter: alpha(opacity=60);
  -moz-opacity:0.6;
  opacity:0.6;
position: fixed;
top:0px;

}

#back{
display:none;
width:100%;
height:180px;
}

#logo{
width:134px;
height:14px;
background-color: pink;
margin:0 0 10px 0;
}*/


/* =======================================
    Child
======================================= */

#main-child{
    width: 980px;
    margin: 150px auto 0;
    padding: 80px 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    clear: both;
    font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
    position: relative;
}

#main-child .port .box{
    overflow: hidden;
    clear: both;
}

#main-child .port .box img{
    width: 460px;
    padding: 0 10px 10px 0;
}

#main-child .land .box{
    width: 650px;
    float: left;
} 

#main-child .land .box img{
    width: 100%;
    padding: 0 10px 10px;
}

#main-child .port .info{
    width: 250px;
    margin: 20px 0 0 0;

} 


#main-child .land .info{
    width: 250px;
    float: left;
    position: absolute;
    right: 40px;
    bottom: 93px;
} 



.data-child{
    padding: 20px 0 5px;
    width: 250px;
    overflow: hidden;
    border-bottom: solid 1px #aaa;
    clear: both;
    text-align: right;
}


.data-child ul li,
.data-child ul li a{
    font-size: 10px;
    font-weight: normal;
    padding: 5px 0 0 0;
    color: #000;
    text-align: left;
    letter-spacing: 1px;
    line-height:1.5;
}




.data-child ul li span{
 font-size: 10px;
 font-weight: normal;
 padding: 5px 0 0 0;
 color: #aaa;
 text-align: left;
 letter-spacing: 1px;
}
  

.size-child{
    text-align: right;
    width: 250px;
    margin: 5px 0 0 0;
    overflow: hidden;
    clear: both;
}

.size-child ul{
    width: 100%;
}

.size-child ul li p{
     font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
 font-size: 10px;
 letter-spacing: 1px;
 height: 15px;
    color: #fff;
    background-color: #eee;
    padding: 4px 10px 1px;
    margin: 5px 5px 0 0;
    border-radius: 5px;
    float: left;
}

.size-child a{
    color: #aaa !important;
}


.search-main{
    font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
    font-weight: lighter;
    color: #ccc;
    overflow: hidden;
    clear: both;
}

.search-main p{
    font-family: 'Julius Sans One', sans-serif , helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif; 
    font-weight: lighter;
    letter-spacing: 2px;
    font-size:18px;
    padding: 0 0 10px 0;
    margin: 0 0 55px; 
    color: #aaa;
    border-bottom:1px solid #aaa ; 
}

.search{
    width: 250px;
    font-size:12px;
    letter-spacing: 2px; 
   margin: 0 20px 0 0;
}

.search ul li{
    margin: 0 0 15px 12px; 
}



.search ul li span{
    font-size:10px;
    padding: 0 0 0 15px; 
}

.search ul li:first-child{
    font-size:14px;
    padding: 0 0 0px 10px;
    margin: 0 0 25px; 
    color: #aaa;
    border-left:solid 2px #aaa;
}

.about ul li:first-child{
    font-size:14px;
    padding: 0 0 0px 10px;
    margin: 0 0 25px; 
    color: #aaa;
    border-left:solid 2px #aaa;
}

.about{
    width: 400px;
    font-size:12px;
    letter-spacing:1px; 
    margin: 0 80px 0 0;
    border: none;
}

.about ul li{
    margin: 0 0 15px 12px; 
    border: none;
}
.about p{
    font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
    font-size:12px;
    font-weight: lighter;
    letter-spacing:1px;
    line-height: 24px; 
}



.search-main a{
 color: #aaa;   
}


.search-main a:hover{
color: #000;
}

.search-design ul li{
   font-family:  helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
 font-size: 12px;
 letter-spacing: 1px;
 height: 15px;
    background-color: #eee;
    padding: 7px 20px 4px;
    margin: 5px 10px 0 0;
    border-radius: 5px;
    float: left;
}

.search-design ul li:hover{
    background-color: #ccc;
}

.search-design ul li a:hover{
    color: #fff;
}

/* =======================================
    @media screen
======================================= */



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

#main{
    max-width: 1160px;
    margin: 350px auto 0;
    overflow: hidden;
}

    }



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

#main{
    max-width: 870px;
    margin: 350px auto 0;
    overflow: hidden;
}

    }