@charset "UTF-8";
/* CSS Document */

#shitamachiclub section{width: 80%; margin: 0 auto;}
#shitamachiclub h1{width: 100%; text-align: center; padding-top: 4%; margin-bottom: 0;}
#shitamachiclub h1 img{max-width: 100%;}
#shitamachiclub h2{text-align: center; margin-top: 2rem;}
#shitamachiclub .mainimage{
  width: 100%; position: relative;
  background-size: 100%;
  padding-bottom: 33%;
    background-color: #e2e2e2;
  background-image: url('../images/shitamachiclub/shitamachiclub-main-pc.png');
}
#shitamachiclub .maincopy{
    width: 100%; margin: 5% auto 0; text-align: center; font-size: 110%;
}
#shitamachiclub .maincopy a {color: #990000; text-decoration: none;}
#shitamachiclub .maincopy a:hover {color:#333; transition: 1.0s; }


/* shitamachi ページ 
-----------------------------------------------*/
.shitamachi_contents{
	padding-top:5%;
}
.shitamachi_contents h3{
	font-size: 150%; line-height: 1.8; margin-bottom: 1rem;
}
.shitamachi_contentsIn { width: 100%; overflow: hidden; clear: both;}
.shitamachi_contentsIn > div { display: inline-block; vertical-align: top; }
.shitamachi_contentsIn p {margin-bottom: 1.6rem;}
.shitamachi_contentsIn .caption {font-size: .6rem; text-align: right;}
.shitamachi_contentsIn p strong{ background-color: #e9dfa6; font-weight: normal; padding: .5% 1%;}

#shitamachiclub .cssgrid {
    width: 70%;
    display:-webkit-box;
  	display:-ms-flexbox;
  display: flex;
    -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto 2em;
}
#shitamachiclub .cssgrid > div {
  position: relative;
  width: calc(100%/3);
  margin: 0 0 1rem;
  overflow: auto;
  padding: 1em;
}
#shitamachiclub .cssgrid img {
    width: 100%;
    height: auto; margin-bottom: 1rem;
}
#shitamachiclub .cssgrid figcaption { text-align: left; font-size: .9rem;}
#shitamachiclub .cssgrid h3 {font-size: 110%; margin:0; }
#shitamachiclub .cssgrid ul{list-style: none;}
#shitamachiclub .cssgrid ul li{list-style: none; font-size: .8rem; line-height: 2rem;}

.slide-wrap{
    width: 90%;
   display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   padding:0 0 1em;
   margin:0 auto 10%;
   scroll-behavior: smooth;
}
.slide-wrap .slide-content{
   flex: 0 0 90%;
   margin: 0 10px;
   height:100%;
    max-width:250px;
}
.slide-wrap .slide-content img{width: 100%; margin-bottom: 1rem;}


#shitamachiclub .blog {border: 1px solid #333; width: 70%; margin: 0 auto 5%;}
#shitamachiclub .blog h3{margin-top: -1rem; margin-left: 2rem; background-color: #fff; width: 14em;}
#shitamachiclub .blog .blog-inner{padding: 2% 5%;}
#shitamachiclub .blog .blog-inner .blog-contents{
    width: 70%; margin: 0 auto 5%; overflow: hidden; clear: both; display: table;
    border-collapse: separate;  /* セルの間隔を空ける */
    border-spacing: 20px 0;  /* 左右 上下で記述 */
}
#shitamachiclub .blog .blog-inner .blog-contents>div .title{font-size: 1.2rem; margin-bottom: 1rem;}
#shitamachiclub .blog .blog-inner .blog-contents>div{ display: table-cell; vertical-align: middle; margin-left: 2%;}
#shitamachiclub .blog .blog-inner img{ display: table-cell; max-width: 200px;}
#shitamachiclub .blog .blog-inner .profile{border-top: 1px solid #ccc; padding: 2% 17%; clear: both; overflow: hidden;}
#shitamachiclub .blog .blog-inner .profile .name{margin-bottom: 1rem;}
#shitamachiclub .blog .blog-inner .profile .name>span{margin-left: 1rem; font-size: 90%; color: #ccc;}
#shitamachiclub .blog .blog-inner .profile .prof-txt{font-size: 90%;}
#shitamachiclub .blog .blog-inner .profile img{float: right;margin-left: 1rem;}


@media only screen and (max-width: 780px) {
    #shitamachiclub section{width:  96%;}
    #shitamachiclub h1 img{width: 100%;}
    #shitamachiclub .mainimage{
      padding-bottom: 107.56%;
      background-image: url('../images/shitamachiclub/shitamachiclub-main.png');
    }
    .shitamachi_contents h3{font-size: 120%; line-height: 1.6; margin-bottom: 1rem;}
    .shitamachi_contents p{font-size: 90%;}


#shitamachiclub .cssgrid {
    width: 100%;
  margin: 0 auto 2em;
}
#shitamachiclub .cssgrid > div {
  width: calc(100%/2);
  margin: 0;
  padding: 0 2%;
}
#shitamachiclub .cssgrid img {
    width: 100%;
    height: auto; margin-bottom: 1rem;
}
#shitamachiclub .cssgrid figcaption { text-align: left; font-size: .9rem;}
#shitamachiclub .cssgrid h3 {font-size: 110%; margin:0; }
#shitamachiclub .cssgrid ul{list-style: none;}
#shitamachiclub .cssgrid ul li{list-style: none; font-size: .8rem; line-height: 2rem;}
    
    
#shitamachiclub .blog {width: 90%; margin: 0 auto 5%;}
#shitamachiclub .blog h3{margin-left: 1rem; font-size: 1rem;}
#shitamachiclub .blog .blog-inner{padding: 5% 2%;}
#shitamachiclub .blog .blog-inner .blog-contents{
    width: 100%; 
    border-spacing: 10px 0;
}
#shitamachiclub .blog .blog-inner .blog-contents > div{display: block;}
#shitamachiclub .blog .blog-inner .blog-contents > div p{font-size: .9rem;}
#shitamachiclub .blog .blog-inner .blog-contents > div .title{font-size: 1rem;}
#shitamachiclub .blog .blog-inner .blog-contents img{width: 100%; max-width: none; margin-bottom: 5%;}   
#shitamachiclub .blog .blog-inner .profile img{ max-width: 120px;}
#shitamachiclub .blog .blog-inner .profile{padding: 5% 5% 2%;}
#shitamachiclub .blog .blog-inner .profile .name{margin-bottom: 1rem;}
#shitamachiclub .blog .blog-inner .profile .name>span{display: block; margin-left: 0;}
#shitamachiclub .blog .blog-inner .profile .prof-txt{font-size: 90%;}

}
@media screen and (max-width: 480px){
.slide-wrap .slide-content {
    flex: 0 0 88%;
    margin: 0px 5px;
    scroll-snap-align:center;
}
}