.gallery-container {
    margin-left: 25%;
    padding-top: 100px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    position: relative;
    z-index: 1;
    /* grid-template-rows: 150px 130px; */
}
.item img {
    width: 100%;
}
.item {
    overflow: hidden;
    position: relative;
}
.item .caption {
	font-size: 1rem;
	text-align: left;
	color: #fff;
    text-decoration: underline;
}
.item .mask {
	width: 100%;
	height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(0,0,0,0.7);
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
    padding: 10px;
}
.item:hover .mask {
	opacity: 1;	/* マスクを表示する */
	padding-top: 15px;	/* ホバーで下にずらす */
}
.btnvm {
    display: none;
}
.bgfr-text {
    display: none;
}

@media(max-width: 820px) {
    .gallery-container {
        width: 100%;
        margin-left: 0;
        padding-right: 0;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        padding-top: 40%;
    }
    .item img {
        width: 100%;
    }
    .is-pc {
        display: none;
    }

    /*矢印が右に移動する*/
    .btnvm{
        font-family: var(--en-fontFamily);
        font-size: 1.25rem;
        /*矢印と下線の基点とするためrelativeを指定*/
        position: relative;
        /*形状*/
        display: inline-block;
        text-align: center;
        margin: auto;
        color: #333;
        text-decoration: none;
        outline: none;
    }
    
    /*矢印と下線の形状*/
    .btnvm::before{
        content: '';
        /*絶対配置で下線の位置を決める*/
      position: absolute;
        bottom: -3px;
        left:0%;
        /*下線の形状*/    
        width: 122%;
        height: 1px;
      background:#333;
        /*アニメーションの指定*/
        transition: all .3s;
    }
        .btnvm::after{
            content: '';
            /*絶対配置で矢印の位置を決める*/
        position: absolute;
        bottom:2px;
        right: -23px;;
        /*矢印の形状*/    
        width: 15px;
        height:1px;
      background:#333;
        transform: rotate(43deg);
        /*アニメーションの指定*/
        transition: all .3s;
    }
    /*hoverした際の移動*/
.btnvm:hover::before{
    left:20%;
}

.btnvm:hover::after{
    right:-43%;
    }
    .bgfr-text {
        font-size: 0.625rem;
        display: block;
        text-align: right;
        top: auto;
        position: absolute;
        width: auto;
        left: 55%;
        padding-top: 130px;
        z-index: -1;
        
    }
}