#gallery-mv{
	position: relative;
	min-height: 100vh;
}
.gl_bg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-image: url('https://porte-stylo-cafe-studio.jp/wp-content/themes/jinr-child/images/common/bg.png');
	background-repeat: repeat;
	background-position: left top;
	pointer-events: none; 
}
.gl_dt{
	position: relative;
 	z-index: 1;
}
.gl-title{
	padding-top: 288px;
	margin: 0 auto 62px;
	text-align: center;
}
.gl-title h1{
	font-size: 154px;
	letter-spacing: 0.15em;
	color: transparent; 
	-webkit-text-stroke: 2px #071715;
	text-stroke: 2px #071715;
	margin-bottom: 50px;
}
.gl-title h2{
	font-size: 21px;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
	#gallery-mv{
		position: relative;
		min-height: 100vh;
	}
	.gl_bg{
	}
	.gl_dt{
	}
	.gl-title{
		padding-top: 62.5px;
		margin: 80px auto 54px;
	}
	.gl-title h1{
		font-size: 73px;
		letter-spacing: 0.07em;
		margin-bottom: 28.5px;
	}
	.gl-title h2{
		font-size: 14px;
	}
}

/*----- tab -----*/
.gl_tab{
	width: 100%;
}
.tab_wrap{
	width: 100%;
	max-width: 1200px;
	margin:0 auto 200px;
}
input[type="radio"]{
	display:none;
}
.tab_area{
	position: relative;
	height: 65px;
	width: 1150px;
	font-size:0;
	margin:0 auto 80px;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    border: 1px solid #333;
    border-radius: 40px;
    background: #fff;
    padding: 0;
    box-sizing: border-box;
}
.tab_slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    background: #ECECEC;
    border-radius: 40px;
    z-index: 1;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.tab_area li{
	flex: 1;
	margin-right: 0;
	z-index: 2;
	position: relative;
}
.tab_area label{
	height: 63px;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-align:center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.16em;
	cursor:pointer; 
	transition:ease 0.3s opacity;
	border-radius: 40px;
	opacity: 0.34;
}
.tab_area li:nth-child(4){
	margin-right: 0;
}
.tab_area label.active{
    font-weight: bold;
    opacity: 1;
}
.panel_area{
}
.tab_panel{
	width:100%; 
	display:none;
}
.tab_panel_block{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.tab_panel_block:after{
	content: "";
    display: block;
    width: calc((100% - 70px) / 3);
    height: 0;
}
.tab_panel .gallery-modal{
	width: calc((100% - 70px) / 3);
}
.tab_panel .gallery-modal img{
	width: 100%;
	margin-bottom: 35px;
}
#tab1:checked ~ .tab_area .tab1_label{
	background:#fff; 
}
#tab1:checked ~ .panel_area #panel1{
	display:block;
}
#tab2:checked ~ .tab_area .tab2_label{
	background:#fff;
}
#tab2:checked ~ .panel_area #panel2{
	display:block;
}
#tab3:checked ~ .tab_area .tab3_label{
	background:#fff; 
}
#tab3:checked ~ .panel_area #panel3{
	display:block;
}
#tab4:checked ~ .tab_area .tab4_label{
	background:#fff; 
}
#tab4:checked ~ .panel_area #panel4{
	display:block;
}

@media screen and (max-width: 768px) {
	.gl_tab{
	}
	.tab_wrap{
		width: 100%;
		max-width: initial;
		margin:0 auto 120px;
	}
	input[type="radio"]{
	}
	.tab_area{
		position: relative;
		height: auto;
		width: calc(100% - 60px);
		margin:0 30px 50px;
		display: -webkit-flex;
	    display: flex;
	    -webkit-justify-content: center;
	    justify-content: space-between;
	    flex-wrap: wrap;
	    border: none;
	    border-radius: 0;
	    background: transparent;
	}
	.tab_slider {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: calc((100% - 17px) / 2);
	    height: 40px;
	    display: none;
	}
	.tab_area li{
		flex: initial;
		margin-right: 0;
		margin-bottom: 16px;
		z-index: 2;
		position: relative;
		width: calc((100% - 17px) / 2);
		border: 1px solid #333;
	    border-radius: 40px;
	    padding: 0;
	    box-sizing: border-box;
	}
	.tab_area label{
		height: 40px;
		font-size: 14px;
		letter-spacing: 0.05em;
		border-radius: 45px;
	}
	.tab_area li:nth-child(2n){
		margin-right: 0;
	}
	.tab_area label.active{
		background: #ECECEC;
	    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.panel_area{
		width: calc(100% - 40px);
		margin: 0 20px;
	}
	.tab_panel{
	}
	.tab_panel_block{
	}
	.tab_panel_block:after{
		content: "";
	    display: block;
	    width: calc((100% - 15px) / 2);
	    height: 0;
	}
	.tab_panel .gallery-modal{
		width: calc((100% - 15px) / 2);
	}
	.tab_panel .gallery-modal img{
		width: 100%;
		margin-bottom: 15px;
	}
	#tab1:checked ~ .tab_area .tab1_label{
	}
	#tab1:checked ~ .panel_area #panel1{
	}
	#tab2:checked ~ .tab_area .tab2_label{
	}
	#tab2:checked ~ .panel_area #panel2{
	}
	#tab3:checked ~ .tab_area .tab3_label{
	}
	#tab3:checked ~ .panel_area #panel3{
	}
	#tab4:checked ~ .tab_area .tab4_label{
	}
	#tab4:checked ~ .panel_area #panel4{
	}
}