@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);

/* 初期化-------------------- */
*{
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	color: #222222;
	font-family: Verdana, Arial,"メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",sans-serif;
    }
html{
    overflow-y: scroll;
    }

/* border-box化-------------------- */
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

/* 著作権表示-------------------- */
#copy{
	margin: 10px 0px;
	text-align: center;
	font-size: 9pt;
	color: #222222;
	text-decoration: none;
	}
copyright::before {
    content: " 2015-2024 tfvesp 手布部";
    }

/* 背景---------------------------------------- */
body{
	background: #A9A9A9;
	}

/* 大枠---------------------------------------- */
#wrapper{
    margin:30px auto 0 auto;
    max-width:980px;
    padding:0 1%;
    }
#container {
	background: #f5f5f5;	
	}

/* ********************************************************* */
/* ヘッダー */
/* ********************************************************* */

/* ヘッダー---------------------------------------- */
#header{
	/*background-image:url(header.png);*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
	height:200px;
    text-align: center;
	}

/* サイト名-------------------- */
h1{
    font-family: 'Libre Baskerville', serif;
	font-weight: normal;
	font-size: xx-large;
    padding: 70px 0px 0px 0px;
	margin: 0px 0px 10px 0px;
	}
	
/* メニュー---------------------------------------- */
.menu li,.menu li a{
	font-family: 'Libre Baskerville', serif;
	}
.menu{
	font-size: 14px;
	}
.menu li{
	display: inline-block;
	padding: 0px 10px;
    }

.menu a{
    text-decoration: none;
    }
.menu a:hover{
    position:relative; top:-1px;
    opacity:0.5;
    }
.menu a:hover img{
    position:relative; top:1px;
    }

/* ********************************************************* */
/* カラム */
/* ********************************************************* */

.main{
    font-size: 14px;
    padding:17px 2%;
    }
.side{
    font-size: 12px;
    padding:17px 2%;
    }

.main a,.side a{
    text-decoration: none;
        }
.main a:hover,.side a:hover{
    position:relative; top:-1px;
    opacity:0.5;
    }
.main a:hover img,.side a:hover img{
    position:relative; top:1px;
    }

/* 600px以上時-------------------- */
@media(min-width: 600px){
.flexbox{
    display: -webkit-flex;
    display: flex;
    }
.main{
    width: 63%;
    padding:17px 3.8% 25px 4.6%;
    }
.side{
    width: 37%;
    padding:17px 4.6% 25px 1.8%;
    }
}

/* カラム内要素-------------------- */
.topic{
    padding: 0px 25px 30px 25px;
	line-height: 1.5;
	}

/* ********************************************************* */
/* ページ */
/* ********************************************************* */

/* 見出し---------------------------------------- */
h2{	
	background: #585858;
	color: #f5f5f5;
    line-height: 1.6;
	font-weight: normal;
	font-size: 16px;
	margin: 0px 0px 20px 0px;
	padding: 0px 10px;
	}
h3{
	background: #585858;
	color: #f5f5f5;
    line-height: 1.6;
	font-weight: normal;
	font-size: 16px;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px;
	}
h4{
	font-weight: normal;
	font-size: 14px;
	margin: 16px 0px 2px 0px;
	}
h4:before{
	content:" ◆ ";
	}

/* ギャラリー縦---------------------------------------- 
#gallery{
    padding:17px 2% 2% 2%;
    display: flex;
    justify-content: center;
}
.column{
    column-count: 3;
    column-gap: 0;
    }
.item {
    overflow: hidden;
    break-inside: auto;
    width: 230px;
    padding: 2px;
    background-color: #222222;
    }
.item img {
    max-width: 100%;
    height: auto;
    }*/

/* ギャラリー横---------------------------------------- */
#gallery{
    padding:17px 2% 2% 2%;
    display: flex;
    justify-content: center;
    }
.column{
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 0;
    }
.item {
    overflow: hidden;
    max-width:230px;
    padding: 2px;
    background-color:#222222;
    }
.item img {
    width: 100%;
    height:300px;
    object-fit: cover;
    }

/* ********************************************************* */
/* マスク */
/* ********************************************************* */

/* マスク---------------------------------------- */    
.item a {
    display: block;
    position: relative;
    }

.mask {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
    opacity: 0;
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.item:hover .mask {
	opacity: 1;
	padding-top: 50px;
    }

/* キャプション---------------------------------------- */    
.caption {
    margin-top: -50px;
    }
.caption p {
    display: flex;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    padding: 0px 10px;
    }

/* カテゴリー---------------------------------------- */    
.category {
    position: absolute;
    display: block;
    padding:4px 8px;
    top: 0;
    left: 0;
    background: #585858;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    z-index: 10;
    }
.item:hover .category{
    color: #585858;
    background: #ffffff;
    }

/* ********************************************************* */
/* その他 */
/* ********************************************************* */

/* 文章装飾---------------------------------------- */
.color1{
    color: #999999;
    }

/* スマホでの表示-------------------- */
@media all and (max-width: 768px){
	#header{
        background-position: center;
        background-size: cover;
        height:180px;
        }
    h1{
        font-size: x-large;
        }
	.topic{
        padding: 0px 3px 20px 3px;
        }
    .column{
        column-count: 2;
        }
    }