@charset "UTF-8";

@media screen and (min-width: 10px) and (max-width: 800px) {

  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
  .loading{
    background-image: url("http://a-b-i.info/wp/wp-content/themes/abi/images/loading.gif");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
  }

  nav{
    position: fixed;
    width:100%;
    height: 60px;
    padding-top: 10px;
    padding-bottom: 0;
    border-bottom: solid 1px #000000;
    background-color: #ffffff;
    z-index: 999999;
  }
  h1{
    width: 100%;
    font-size: 16px; font-size: 1.6rem;
    line-height: 16px; line-height: 1.6rem;
    margin-left: 6px;
    margin-bottom: 4px;
  }
  h2{
    font-size: 38px; font-size: 3.8rem;
    line-height: 38px; line-height: 3.8rem;
  }
  ul{
    list-style-type: none;
  }
  nav ul{
    margin-left: 7px;
  }
  nav li{
    font-size: 16px; font-size: 1.6rem;
    line-height: 16px; line-height: 1.6rem;
    display: inline;
    margin-right: 14px;
  }

  .category{
    width: 100%;
    height: 100%;
    min-width: 200px;
  }
footer{
  display: none;
}

/*------ news --------------------------*/
#container_news{
  float: left;
  width: 100%;
  margin: 0;
  padding-bottom: 0;
  padding-left: 0;
}
#container_news .contentTitle{
  font-size: 18px; font-size: 1.8rem;
  line-height: 24px; line-height: 2.4rem;
  margin-top: 10px;
}
#container_news .mainCon{
  width: 100%;
  padding: 10px;
}
#container_news .date{
  font-size: 16px; font-size: 1.6rem;
  line-height: 16px; line-height: 1.6rem;
  margin-left: 2px;
  margin-top: 10px;
}

/*------ news end --------------------------*/

/*------ top --------------------------*/
#main_top{
  width: 100%;
  height: 100%;
}
.topTxt{
  padding:6px;
  font-size: 16px; font-size: 1.6rem;
  line-height: 22px; line-height: 2.2rem;
}
.topImg{
  position:relative;
  overflow: hidden;
}
.topImg img{
  position: absolute;
  top: -50%;
}
.topImg p{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 300px;
  height: 50px;
}
#story{
  float: left;
  overflow: hidden;
  position: relative;
  width: 60%;
  height: 100%;
  padding:0;
  border-right: solid 1px #000000;
  z-index: 99999;
}
#story .textWapperPC{
  display: none;
}
#story .textInner{
  width: 100%;
  float: left;
  margin-top:0 ;
}
#story{
  padding:0;
  float: left;
  width: 100%;
  height: 400px;
  border-right: none;
  border-bottom: solid 1px #000000;
  z-index: 99999;
  }
  #story h2{
    margin-top: 24px;
    margin-left: 4px;
  }
  #story img{
    float: left;
    width: 100%;
  }


  #activity{
    padding:0;
    float: left;
    width: 100%;
    height: 270px;
    border-right: none;
    border-bottom: solid 1px #000000;
    z-index: 99999;
  }
  #activity h2{
    margin-top: 6px;
    margin-left: 4px;
    color:#fff;
  }
  #activity img{
    width: 100%;
  }

  #activity .soon{
    font-size: 24px; font-size: 2.4rem;
    line-height: 24px; line-height: 2.4rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 180px;
    height: 50%;
  }

  #about{
    padding:0;
    float: left;
    width: 100%;
    height: 360px;
    border-right: none;
    z-index: 99999;
  }
  #about h2{
    margin-top: 6px;
    margin-left: 4px;
  }
  #about img{
    width: 100%;
  }

  .textWapper{
    /*position: absolute;*/
    bottom: 70px;
    width :100%;
  }
  #act_logo{
    float: left;
    position: relative;
    padding: 10px;
    width: 100%;
    height: 50px;
  }
/*------ top end --------------------------*/

/*------ category --------------------------*/
#category_main{
  width: 100%;
  min-width: 0;
  height: 100%;
}
#head{
  position: static;
  padding-top: 26px;
  padding-bottom: 10px;
  float: left;
  width: 100%;
  height:auto;
  margin-right: -1px;
  background-color: #ffffff;
  border-right: none;
  border-bottom: solid 1px #000000;
  z-index: 10;
}
#head .text{
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  line-height: 24px;
}
.head_back{
  display: none;
}
#container{
  float: left;
  width: 100%;
  /*height: 100%;*/
  margin: 0;
  padding-bottom: 0;
  border-right: none;
}
.thumb{
  float: left;
  width: 100%;
  height: 160px;
  border-bottom: solid 1px #000000;
}
.thumb img{
  float: left;
  width: 132px;
  height: 160px;
  margin-right: 10px;
  border-left: none;
}
.data{
  float: left;
  padding-right: 10px;
}
.name{
  font-size: 16px; font-size: 1.6rem;
  line-height: 18px; line-height: 1.8rem;
  margin-top: 10px;
}
.name .en{
  font-size: 14px; font-size: 1.4rem;
  line-height: 16px; line-height: 1.6rem;
}
.title{
  margin-top: 10px;
  font-size: 16px; font-size: 1.6rem;
  line-height: 18px; line-height: 1.8rem;
}
.data .date{
  bottom:6px;
  left:143px;
}
#list{
  display: none;
}
#list h3{
  padding-top: 60px;
  font-size: 14px; font-size: 1.4rem;
  line-height: 16px; line-height: 1.6rem;
  margin-bottom: 20px;
}
#list ul{
  font-size: 14px; font-size: 1.4rem;
  line-height: 16px; line-height: 1.6rem;
}
#list li{
  margin-bottom: 10px;
}
/*------ category end --------------------------*/

/*------ single --------------------------*/
.profile{
  width: 100%;
  /*height: 200px;*/
  border-bottom: solid 1px #000000;
}
.profile img{
  float: left;
  width: 140px;
  margin-right: 0;
}
.dataSingle{
  float: left;
  width: webkit-calc(100% - 150px);
  width: calc(100% - 150px);
  padding-top: 10px;
  padding-left: 10px;
}
.profile .name{
  margin-right: 0;
  float: none;
  margin-top: 0;
  margin-bottom: 6px;
}
.contentsList{
  padding:20px 20px 0 20px;
  border-bottom: solid 1px #000000;
}
.contentsList a{
  margin-bottom: 20px;
}
.profile .title{
  margin-top: 20px;
}
.contentTitle{
  margin-bottom: 20px;
}
.mainCon .text{
  width: 100%;
}
/*------ single end --------------------------*/

/*------ tag --------------------------*/
.tag{
  font-size: 16px; font-size: 1.6rem;
  line-height: 20px; line-height: 2.0rem;
  margin-bottom: 20px;
}
.tagTitle{
  width: 100%;
  padding: 20px;
  border-bottom: solid 1px #000000;
  margin-bottom: -20px;
  font-size: 18px; font-size: 1.8rem;
  line-height: 22px; line-height: 2.2rem;
}
.tagCat{
  font-size: 16px; font-size: 1.6rem;
  line-height: 30px; line-height: 3.0rem;
}
/*------ tag end --------------------------*/


/*------ about --------------------------*/
.aboutCon #head{
  border-bottom: solid 1px #000000;
}
#aboutABI{
  padding:10px;
}
#statement{
  padding:10px;
}
#plan{
  padding:10px;
}
#contact{
  padding:10px;
}
.aboutCon ul{
  font-size: 16px; font-size: 1.6rem;
  line-height: 20px; line-height: 2.0rem;
  margin-top: 6px;
}
.aboutCon li{
  margin-bottom: 6px;
}
.aboutCon #container{
  width: 100%;
  margin-left: 0;
  padding-bottom: 0;
  border-right: none;
}
.aboutCon .mainCon{
  border-bottom: none;
}
.aboutCon .aboutInner{
  padding-left: 0;
}
.aboutCon .profInner{
  margin-left: 0;
}
.aboutCon .profile{
  border-top: solid 1px #000000;
}
.aboutCon .profile img{
  width: 110px;
  float: left;
}
.aboutCon .text{
  margin-bottom: 20px;
}
.profInner .name{
  font-size: 24px; font-size: 2.4rem;
  line-height: 24px; line-height: 2.4rem;
}
.profInner .title{
  margin-top: 20px;
}
.profileText{
  width: 100%;
  margin-left: 0;
  padding:20px;
  font-size: 14px; font-size: 1.4rem;
  line-height: 24px; line-height: 2.4rem;
}
/*------ about end --------------------------*/

/*------ story --------------------------*/
.story_list_pc {
  display: none;
}
.act_talk_guest{
  font-size: 12px; font-size: 1.2rem;
  line-height: 16px; line-height: 1.6rem;
}
.story_list_sp {
  padding:0;
  margin:0;
  display: block;
  min-height: 200px;
  border-bottom:solid 6px #000000;
}
.story_list_sp img{
  width: 100%;
}
.story_list_sp .bg{
  height: 150px;
  display: block;
  background: no-repeat center center;
  background-position: center center;
  background-size:cover;
  border-bottom: solid 1px #000000;
}
.story_list_sp .spImg{
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.story_list_sp .contentTitle{
  /*width: 100%;*/
  min-height: 60px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.story_list_sp .theme{
  float: left;
  margin-top: 2px;
  font-size: 14px; font-size: 1.4rem;
  line-height: 20px; line-height: 2.0rem;
}
/*------ story end --------------------------*/

/*------ activity --------------------------*/

#container_activity{
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
#container_activity h2{
  height: 30px;
}
#container_activity .text{
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
}
.act_top{
  float: left;
  width: 100%;
  padding: 0;
  border-right: none;
  border-bottom: solid 1px #000000;
}
.act_top ul{
  margin-top: 10px;
  margin-left: 10px;
}
#actTop_artbridge{
  height: 300px;
}
#actTop_map{
  height:300px;
}
#actTop_projects{
  height:320px;
}
#actTop_talk{
  padding-top:18px;
  height:260px;
}
#act_map_wrapper{
  display: none;
}
#act_map{
  display: none;
}
.activity h2{
  font-size:30px; font-size: 3.0rem;
  height: 40px;
}
.activity .text{
  margin-top: 20px;
  height: 100px;
  font-size: 14px; font-size: 1.4rem;
  line-height: 24px; line-height: 2.4rem;
}
#actul{
  margin-top: 20px;
}
.act_bg_img h2{
  padding-top: 10px;
  padding-left: 10px;
 font-size: 42px; font-size: 4.2rem;
 line-height: 42px; line-height: 4.2rem;
 color: #ffffff;
}
#container_artbridge{
  float: left;
  width: 100%;
  /*height: 100%;*/
  margin: 0;
  padding-bottom: 0;
  border-right: none;
}
.artbridge_pc {
  display: none;
}
.artbridge_sp {
  padding:0;
  margin:0;
  display: block;
  min-height: 200px;
  border-bottom:solid 6px #000000;
}
.artbridge_sp img{
  width: 100%;
}
.artbridge_sp .bg{
  height: 150px;
  display: block;
  background: no-repeat center center;
  background-size:cover;
  border-bottom: solid 1px #000000;
}
.artbridge_sp .spImg{
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.artbridge_sp .contentTitle{
  /*width: 100%;*/
  min-height: 50px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.artbridge_sp .issueNum{
  float: left;
  font-size: 54px; font-size: 5.4rem;
  line-height: 54px; line-height: 5.4rem;
  margin-right: 10px;
}
.artbridge_sp .theme{
  float: left;
  margin-top: 6px;
  font-size: 20px; font-size: 2.0rem;
  line-height: 20px; line-height: 2.0rem;
}
.bc_thumb{
  height: 70px;
}
.bc_thumb .contentTitle{
  margin-top: -6px;
  font-size: 18px; font-size: 1.8rem;
  line-height: 18px; line-height: 1.8rem;
  height: 70px;
}

.bc_thumb_slug{
  font-size: 12px; font-size: 1.2rem;
  line-height: 16px; line-height: 1.6rem;
}

#map_head{
  position: static;
  padding-top: 26px;
  padding-bottom: 10px;
  float: left;
  width: 100%;
  height:auto;
  margin-right: -1px;
  background-color: #ffffff;
  border-right: none;
  border-bottom: solid 1px #000000;
  z-index: 10;
}

#act_map_mini{
  display: none;
}
.act_bg_img{
  width: 100%;
  height: 160px;
  border-bottom: solid 1px #000000;
  background-size: cover;
}
#actTop_artbridge .act_bg_img{
  background-position: center center;
}
.act_map_article{
  display: block;
}
#act_map_list{
  display: none;
}
.act_talk_pc {
  display: none;
}
.act_talk_guest{
  font-size: 12px; font-size: 1.2rem;
  line-height: 16px; line-height: 1.6rem;
}
.act_talk_sp {
  padding:0;
  margin:0;
  display: block;
  min-height: 200px;
  border-bottom:solid 6px #000000;
}
.act_talk_sp img{
  width: 100%;
}
.act_talk_sp .bg{
  height: 150px;
  display: block;
  background: no-repeat center center;
  background-position: center center;
  background-size:cover;
  border-bottom: solid 1px #000000;
}
.act_talk_sp .spImg{
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.act_talk_sp .contentTitle{
  /*width: 100%;*/
  min-height: 60px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.act_talk_sp .issueNum{
  float: left;
  font-size: 64px; font-size: 6.4rem;
  line-height: 62px; line-height: 6.2rem;
  margin-right: 10px;
}
.act_talk_sp .theme{
  float: left;
  margin-top: 2px;
  font-size: 14px; font-size: 1.4rem;
  line-height: 20px; line-height: 2.0rem;
}
.act_talk_cate{
  margin-bottom: 4px;
  font-size: 12px; font-size: 1.2rem;
  line-height: 12px; line-height: 1.2rem;
}
/*------ activity end --------------------------*/

}

@media screen and (min-width: 10px) and (max-width: 640px) {
  .topImg{
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;
    margin-bottom: 4px;
  }
  .topImg img{
    position: absolute;
    top: -18%;
  }
  #activity{
    height: 270px;
  }
  .contents_box{
  width: 100%;
  /*min-height: 100%;*/
  }
  .contents_title_size_large{
    font-size: 24px; font-size: 2.4rem;
    line-height: 30px; line-height: 3.0rem;
  }
  .contents_title_size_middle{
    font-size: 18px; font-size: 1.8rem;
    line-height: 22px; line-height: 2.2rem;
  }
  .contents_title_size_small{
    font-size: 12px; font-size: 1.2rem;
    line-height: 16px; line-height: 1.6rem;
  }
  .contents_head{
    float: none;
    margin-top: 20px;
    width: 100%;
    height: 30px;
    font-size: 16px; font-size: 1.6rem;
    line-height: 20px; line-height: 2.0rem;
  }
  .contents_title_wrapper{
    float: none;
  }
  .contents_title{
    float: none;
    margin-bottom: 10px;
  }
  .contents_title li{
    margin-bottom: 6px;
  }
}

@media screen and (min-width: 640px) and (max-width: 800px) {
  .sns{
    top:16px;
  }
  .sns li{
    margin-left: -14px;
  }
  .topImg{
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;
    margin-bottom: 4px;
  }
  #activity{
    height: 350px;
  }
}
@media screen and (min-width: 640px) and (max-width: 1100px) {
  .thumb{
    width: 100%;
  }
  .dataSingle .name{
    margin-bottom: 10px;
  }
  .profile .name{
    float: none;
  }
}