@charset "utf-8";

img{
  max-width: 100%;
}

#branding{
  height: auto;
  padding-bottom: 15px;
}

#branding hgroup{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-align-items: flex-end;
  align-items: flex-end;
  width: 90%;
}
#site-title{
  position: relative;
  top: 22px;
  -webkit-order: 1;
  -ms-order: 1;
  order: 1;
}
#site-title a{
  width: auto;
  height: auto;
}
#access{
  position: static;
  width: 100%;
  -webkit-order: 4;
  -ms-order: 4;
  order: 4;
  padding-top: 25px;
}
#access .gnavi{
  margin: 0;
  text-align: right;
}
#access .gnavi::after{
  display: block;
  content: '';
  clear: both;
}
#access .gnavi li{
  float: none;
  display: inline-block;
}
#access .gnavi li:last-child{
  margin-right: 0;
}
#access .gnavi li a{
  height: 1.5em;
  line-height: 1.5em;
  text-indent: 0px !important;
  background: none;
  width: auto !important;
  font-weight: bold;
  font-size: 0.8rem;
  color: #b6b6b6;
}
#access .gnavi li a::before,
#access .gnavi li:last-child a::after {
  content: '|';
  color: #8b8b8b;
  position: relative;
  bottom: 1px;
}
#access .gnavi li:last-child a::after{
  padding-right: 0px;
}
#branding .zozo{
  position: absolute;
  width: auto;
  margin-left: auto;
  -webkit-order: 2;
  -ms-order: 2;
  order: 2;

}
#branding .zozo img{
  margin: 0;
}
#branding .sns {
  position: absolute;
  width: auto;
  margin-left: 10px;
  -webkit-order: 3;
  -ms-order: 3;
  order: 3;
}




#page #wrapper{
  width: 90%;
}
.topTopic{
  width: 58%;
}
.topBnrbox{
  width: 36%;
}
#pageCustom .pageSide,
#secondary{
  width: 25.5%;
}
#pageCustom .pageSide h2,
#secondary h2,
.category-blog #secondary h2, .single-post #secondary h2,
#pageCustom .pageSide h2, #secondary h2, .category-blog #secondary h2, .single-post #secondary h2{
  width: 100%;
  background-position: center center !important;
}
.widget_search #s{
  width: 100%;
  box-sizing: border-box;
  height: 2em;
}

#pageCustom .pageMain,
#primary{
  width: 70%;
}
#pageCustom .collectionWrap{
  width: 100%;
}
#pageCustom .collectionWrap div{
  width: 25%;
  margin: 0;
  padding: 4px;
  box-sizing: border-box;
}
#pageCustom .collectionWrap div a{
  width: 100%;
  box-sizing: border-box;
}



#colophon{
  width: 100%;
  padding: 15px 30px;
  box-sizing: border-box;
}
#colophon .pagetop {
  right: 30px;
}



/*
#################################################
# home
################################################# */


.mv,.sec_1,.sec_2{
  height: min( 60vw , 100vh);
}

.mv_text{
  display: none;
}	

.mv .scroll{
  left: 30px;
}

.sec_1_list{
  padding-left: 30px;
  top: min( 20vw , 20vh);
}
.sec_2_list{
  padding-left: 30px;
  top: min( 20vw , 20vh);
}


.instagram{
  width: auto;
}
.instagram_l{
  padding-left: 30px;
}
.instagram-list {
  width: 60vw;
  padding-right: 30px;
}