/*
Theme Name: genzaijapan.com
Theme URI: genzaijapan.com
Description: hayatokumagai
Author: H.K
Author URI: hayatokumagai.com
Template: 
Version: 1.0
*/

@charset "UTF-8";

html{
min-height:100%;
  position:relative;
  color: #333;
}
#box{
	margin-top: 5em;
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* ← 3列にする */
	gap: 1rem;
	align-items: end; /* 各行の要素を下揃えに */
}
#artist a{
	text-decoration:none;
	color:grey;
}
#news{
	text-align:center;
	margin: 0 auto 120px;
	line-height: 2em;
	width:62.5%;
	border-top: .1px solid #888;
	border-bottom: .1px solid #888;
	padding: 40px;
	position:relative;
	max-width: 900px;
}
	.news_journal div a, .news_journal p a{
		color:#aaa;
	}
.post_news {
  display: block;
	width:fit-content;
	position:relative;
  margin-bottom: 1em;
  text-align: left;
  white-space:nowrap;

}
.post_news a {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.post_news .post_date,
.post_news .post_title {
    display: inline-block;
    white-space: normal;
	word-break: break-word;
	padding: 0 .5em;
}
.post_archive{
	float:left;
	text-align:center;
	margin-bottom: 3em;
}
.archive_img{
	margin: 0em auto .5em;
    opacity:0;
	border:.1px solid #EEE;
	display: block;
	transition: opacity 1s ease;	
	min-width: 70%;
}
.archive_img.loaded{
	opacity:1;
}

.post_archive:not(:nth-child(4n)){
  margin-right: 5%;
}
.archive_head{
	text-align:center;
	line-height: 2.4em;
}
.post_date{
	color:#aaa;
	width: fit-content;
    float: right;
    white-space: nowrap !important;
}
.post_time{
	color:#aaa;	
    font-size: 12px;
}
.post_title{
	width: fit-content;
    float: left;
	text-decoration:none;	
}
.news{
margin: 0 auto 20%;
  width:75%;
}


#gallery{
     width: 62.5%;
    margin: 0 auto 140px;
	text-align: center;
	line-height: 2.4em;
}
#gallery img{
	margin-bottom:50px;
 border:.1px solid #EEE;
}
.gallery{
		    margin: auto;
	}
.more{
text-decoration:underline;
	    margin-top: 2em;
    font-size: 16px;
}  
.txt{
	margin:1.5em 0 0;
  text-indent: -1em;
  padding-left: 1em;
}
.comment{
  text-indent: -1em;
  padding-left: 1em;
}
.top{
	margin:4em 0 2em;
}
.copy{
	text-align: center;
	line-height: 3em;
	margin: 70px 0;
}
.copy p{
	margin:2em;
}
.copy_w{
text-wrap:nowrap;
margin-top: -1em;
}
#cafe{
	text-align:center;
}
#cafe_menu{
  font-size: 14px;
  line-height: 0;
}
.cafe_menu {
  margin-top: 3em;
  display: inline-block;
  min-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.menu_head {
    font-size: 18px;
	margin-bottom: .5em;
    width: 100%;
    border-bottom: .1px solid #000;
    display: inline-block;
    padding: 2.5em 0 1em;
    text-align: left;
}

.menu_item {
  display: flex;
  line-height: 2.4em;
}

.menu_l {
  text-align: left;
  width: 70%;
}

.menu_r {
  width: 30%;
  text-align: right;
}
.page_title{
	font-size:16px;
	text-align: center;
    margin-bottom: 1.5em;
}
.photo_block{
    margin-top: 4%;
    display: flex;
    justify-content: space-evenly;
    width: 100vw;
    margin-left: calc(-23.1vw);
}
#post_page .cafe_photo{
    width: 24%;
    margin: 0!important;
    border: none;
}
#about{
	text-align:center;
	width:62.5%;
	margin:0 auto 140px;	
	line-height:3em;
}
.about_a,.about_c{
	text-decoration:underline;
	width: 48%;
	margin: 50px auto 0;
    display: inline-block;
}
.about_a{
	float:left;
}
.about_c{
	float:right;	
}
#access{
	text-align:center;
	margin:0 auto 90px;	
	line-height: 2em;
}
.access{
	margin-bottom:3em;
}
.access a{
	text-decoration:underline;
}
.info{
	margin:8em auto 3em;
}
.map{
	position: relative;
	width:60%;
	margin:0 auto 2em;
}
#icons{
    width: 60px;
    margin: 0 auto 60px;
	display: inline-block;
}
#icons img{
  width:20px;
}
.icon_ig{
	float:left;
}
.icon_fb{
	float:right;	
}
img {
      height: auto;
  max-width: 100%;
}
a{
  text-decoration: none;
  color: #333;
}

.pager{
    margin: 10px auto;
    text-align: left;
}
.paging{
	width: 100%;
}
.current-exhibition{
text-align:center;	
}
a.page-numbers,
.pager .current{
    background-color: #fff;
    border: solid 1px #999;
    padding:8px 12px;
    margin:0 2px;
}
 
.pager .current{
    background-color: #999;
    color: #fff;
}
.current-exhibition{
    margin: 80px auto 0;
} 
.pager a:hover{
    color: #fff;
    border: solid 1px #999;
    background-color: #999;
}
.category{
	width:10%;
	float:left;
}
.c_a{
	display:flex;
}
.artist{
	margin:1.5em 0;
}
body {
  margin:0;
  line-height: 22px;
  background-color: #FFF;
  font:13px/1.57 'EB Garamond', serif,"Hiragino Mincho ProN";
  letter-spacing:.04em;
  height:100%;
}

#wrapper{
  width:88vw;
  margin:0 auto;
}

#veil{
    display: none;
    position: absolute;
    top:0;
    height: 100%;
    width: 100%;
    background-color: #BBB;
    z-index: 1;
    opacity: 0.7;
}
h3{
  margin:0 auto 10px;
}

header {
  top: 0;
  margin: 40px auto;
  width:85vw;
  width: calc(95vw - 9%);
  width: -webkit-calc(95vw - 7%);
  font:21px/1.57 'EB Garamond', serif,"Hiragino Mincho ProN";
  z-index:2;
  height: 1em;
}

#sidebar{
  right:0;
  width: 20%;
  position: absolute;
  margin: 0;
  font-size:16px;
  padding-top: 45px;
  letter-spacing:.05em;
}
#sidebar2{
    display: none;
}
#sidebar2 li{
}
#sidebar2 , #sidebar li,#sidebar2 li,#category_list li{
  list-style:none;
}

.name{
     font-size: 18px;
    display: inline-block;
    position: absolute;
    margin-top: 10px;
    color:#BBB;
}
#name img{
    position: absolute;
    margin-top: -20px;

}
#name{
  float:left;
  margin-top:-8px;
  cursor:pointer;
}

.logomark{
  display:inline-block;
  margin-right:12px;
    width:50px;
}
.logoname{
  display:inline-block;
  margin-right:12px;
  width:60px;
}
.logoname img{
width:90px;
}

#menu{
  font-size:13px;
    width: 100%;
    margin: 0 auto;
    display:block;
  text-align:center;
}
#menu_sp .works_menu{
  margin-left:1em;
  display: none;
}
#menu_sp{
    font-size: 16px;
    position: fixed;
    width: 50%;
    height: 100%;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 2;
}

#menu_sp{
    display:none;
}
.menu_icon, #gallery .menu_icon{
	height: 22px;
    border: none;
	margin-bottom:20px;
	opacity:.8;
    width: auto;
}
  #icons_sp a{
  display:inline-block;
  line-height:2em;
  }
  #icons_sp span{
  float: left;
  margin-left:1em;
  }
 
  #icons_sp img{
  width:20px;
}

#icons_sp{
    width: auto;
    margin-right: 0;
    float: left;
  margin-top:1em;
}
  #mt_sp{
  position:initial;
  }

#menu > a:not(:first-child){
  margin-left:3%;
}
.post_head{
    font-size: 14.5px;
    margin-bottom: 1em;
    width: 100%;
}
.paging{
	width:100%;
    margin: 50px auto;
    display: inline-flex;
	justify-content: center;
    position: relative;
}
.pager{
	    display: inline;
	margin:0;
}
.next, .prev, .back{
  color: #000;
  cursor:pointer;
  z-index:2;
    margin-right: 1em;}
.prev{
    left: 0;
    position: absolute;
	margin-top: -8px !important;
}
.next{
    right: 0;
    position: absolute;
	margin-top: -8px !important;
}

a.page-numbers,.pager .current{
	border: none;
	margin:0;
	padding:6px 9px;
}
.pager .current{
	color:#000;
	background-color:#fff;
	border-bottom: 1px solid;
}
.pager a:hover{
    color: #000;
    background-color: #fff;
	border:none;
    border-bottom: 1px solid;
}
.back{
  right:2%;
  top:4em;
  width:20px;
  opacity:0.6;
}

#mt{
      display: block;
	  float: right;
}

  #mt_sp{
    text-align: left;
    display: inline;
  }
  #mt_sp .works{
        float: inherit;
    padding: 0;
    display: inline;
  }
  #mt_sp a:first-child {
    float: inherit;
}
  #mt_sp .works .mt:first-child {
    margin:0;
}
  #mt_sp #me{
    text-align: left;
    float: left;
    margin: 0;
    display: contents;
  }
  #mt_sp p,#me p{
  margin: 0 0 2em 1em;
  }
  #mt_sp > p:first-child{
  margin-top:50%;
      margin-bottom: 2em;
  }

.mt{
  text-decoration: none;
}
.works .mt:first-child{
  margin:0 1em 1.5em;
  }

  #slidemenu{
  margin-top: -0.4em;
  color:#AAA;
  cursor:pointer;
  overflow:hidden;
  text-align: right;
  width: 3em;
  float: right;
	  margin-right: 3px;
  }
#slidemenu img{
  width: 65px;
  z-index:0;
}
#post_page{
  margin:0 auto;
  width:62.5%;
  font-size:13px;
  line-height:2.2em;
  padding:30px 0 90px;
}
.post_img{
	border:.1px solid #EEE;
	margin:0 auto 3em auto;
	display: block;
	  opacity: 0;
	transition: opacity 1s ease;	
}
.post_img.loaded {
  opacity: 1;
}
#post{
    margin: 0 auto;
    width: 100%;
    font-size: 12px;
    line-height: 2em;
}

  .metaslider .flex-control-nav{
  line-height: 40px;
  }

#container {
    margin: 0px auto 40px;
    top: 0;
    padding: 0;
}
  .spmain{
display:none;
  }
  .main{
display:block;
  }

#main{
  margin: 0 auto;
  width:fit-content;
}

#main .thumbnail{
 width:50%;
  float:left;
}
.thumbnail{
  position:relative;
}
#main .caption{
  font-size:18px;
  padding-left:5%;
  display:inline-block;
  width:45%;
   position: relative;
  top: 45%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}

.caption h3{
margin:0 auto;
}

#main .caption p{
  font-size:14px;
}

.content{
 width:30%;
 display:inline-block;
  margin:0px auto 60px;
}

#article{
 display:block;
  margin:0 auto;
	width: 100%;
      line-height: 2em;
    letter-spacing: 0.04em;
    font-size: 13px;
}
.line{
  margin: 20% auto;
}

.caption{
  width: 100%;
  line-height: 1em;
  text-align: center;
  margin: 1em 0;
}

#main .title{
margin-bottom:20px;
}
.article{
width: 75%;
    display: inline-block;
    margin: 0;
}
 .article .title{
  font-weight: bold;
  margin-bottom:2em;
  font-size: 14px;
}
.date, .place{
  margin:0 0 auto 0;
  padding:10px 0 0;
}

.contents {
  margin-top: 50px;
}

#footer {
  display:none;
  right: 0;
  left: 0;
  bottom: 0;
  height: 2em;
  position: relative;
  width: 100%;
  text-align:right;
  line-height: 8px;
  font-size: 12px;
  letter-spacing:.05em;
  margin:3em 0 2em;
}

@media screen and (max-width: 1024px) {
#box{
	    margin-top: 0;
	 display: block;
  grid-template-columns: none;
  gap: 0;
  align-items: normal;
}
  #menu{
		display:none;
	}
  #name img{
    width:80px;
    margin-top: -21px;
  }
  .logoname img{
width:80px;
}
  .metaslider .flex-control-nav{
  line-height: 20px;
  }
#post_page{
	width:100%;
}
.copy{
	margin: 35px 0;
}
.copy_w{
    text-wrap:auto;		
    display: block;
    margin-top: 0;
	}
  #slidemenu img{
    width:25px;
  }
  #container{
  margin:0 auto;
}
  .news{
    margin: 10% auto 30%;
  width:100%;
  }
.post_news{
        text-align: center;
	display: block;
  margin: 0 auto 1em;
  width: auto; /* JSで設定する前提 */
	}
	.post_news a {
	display: flex;
	flex-direction: column; /* デフォルトは縦並び */
    text-align: left;
 }	
	.post_archive{
	width: 100%;
        float: none;
}
.post_archive:not(:nth-child(3n)){
  margin-right: 0;
}
	.post_img{
			min-width: 70%;
	}
.post_title {
  order: 2;
}

.post_date {
  order: 1;
}
	.post_news .post_date {
    text-align: center; /* 中央揃え */
    flex: 1;
  }
  .post_news .post_title {
    text-align: right;
    flex: 2;
  }
  .post_news .post_date,
  .post_news .post_title {
  display: block;
  text-align: center;
    float: none;
    margin: 0 auto;
  }
	#blog{
    margin: auto;
    width: auto;
  }
  #gallery{
    margin-top:0;
}
  #name span{
 display:none;
}

header {
  margin: 50px auto 25px;
}
  #post_single img,  #post_art img{
    width: 70%;
}
	.photo_block{
		    margin-left: -6vw;
	}
.pager{
  margin:10px 0;
}
  #main{
  margin:0% auto 120px;
    height:auto;
}
#main .thumbnail{
 width:100%;
}

#main .caption p{
  font-size:14px;
}
  
.slick-slider{
display:none;
  }
.paging{
	width:100%;
}

.more{
    margin-top:10px;
    }
#post{
margin-top:0;
width: 100%;
  text-align:center;
}
  #footer {
  height:3em;
  }
}

@media screen and (max-width: 640px) {
  header{
        width: 90vw;
  }
  #container{
      margin: 0 auto;
  }
  #wrapper{
  width:90vw;
  }
  #main{
  max-width:100%;
  }  
  .spmain{
    display:block;
    margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
  }
  .main{
display:none;
  }
		.photo_block{
        margin-left: -5vw;
        width: 100vw;
        flex-wrap: wrap;
	}

  #main{
  margin-top:0;
  max-width:100%;
}
	.paging{
	width:100%;
}
}
@media screen and (max-width: 430px) {
	#post_page{
  font-size: 14px;		
		padding-bottom:40px;
	}
	.post_head{
		    font-size: 16px;
	}
	#main{
		margin-bottom:75px;
	}
	.main{
		display:none;
	}
	.spmain{
		display:block;
        width:100vw;
        margin: 3em 0 0 -5vw;
	}
	#about{
		width:100%;
	}
		#news{
        width: calc(100% - 80px);
		margin-bottom:75px;
	}
.current-exhibition{
    margin: 50px auto 0;
} 
#post_page .cafe_photo{
        width: 46%;
        padding: 1% 0;
	}
	.map{
		width:100%;
	}
	#gallery{
		margin-top:120px;
		width:100%;
	}
	.gallery{
		width:100%!important;
	}
	.menu_r{
		text-align:right;
	}
	.cafe_menu{
		    min-width: 100%;
	}
	#access{
		margin-bottom:50px;
	}
}
@media screen and (min-width: 1025px) {
 header{
  width:85vw;
}
	#wrapper{
		  width:86vw;
	}
  #menu{
  font-size: 15px;
  }
  #mt > a{
  margin: auto 1.5em;
}
	#mt > a:last-child{
		    margin-right: 0;
	}
.mt:hover, .bio:hover{
 cursor:pointer;
  color: #666;
}
.works .mt:first-child:hover{
    cursor:default;
  }
  #slidemenu{
  display:none;
  }
.photo_block {
         width: 45vw;
        margin-left: 4.5vw;
	}
}

@media screen and (min-width:1500px){
.photo_block {
         width: 80%;
        margin-left: 5.5vw;
	}
}
	@media screen and (max-height: 375px) {
	/* スマホ横用 */
	   #mt p, #me p{
       line-height:1em;
  }
  #mt p:first-child {
    margin-top: 25%;
}
    #gallery img{
  width: 70%;
  }

}
	@media screen and (min-height: 1000px) {
		#box{
			margin-top:8em;
		}
}