@charset "UTF-8";
/* gallery.css */


/*------------ pc  ------------*/	
@media screen and (min-width: 501px) {
/*ここにpc用スタイルを記述*/
	
	
	


/*------------  BACKGROUND ------------*/	


#background_top {
	width: 100%;
	background-image: url("../images/gallery_bg.webp");
	background-repeat: no-repeat;
	background-size:contain;
	padding: 0 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:1;
}



/*------------  MAIN ------------*/	

#wrap_box_w {
	width: 10%;
	position: relative;
	padding: 0 0 22% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-right: 1.5px #ffffff solid;
}

#wrap_box_b {
	width: 90%;
	position: relative;
	padding: 0 0 20% 0;
	margin-left: 10%;
	margin-top: -5%;
	margin-bottom: -0.0em;
	border-left: 1.5px #000000 solid;
	white-space: nowrap;
}

#wrap_box_w h2 {
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #ffffff;
	top: 0;
	font-size: 3.0em;
	padding: 120% 0 0 30%;
	position: relative;
	transform: scale(1.25, 1);
	font-display: swap;
	z-index: 20;
}




.font_main01 {
	text-align: left; 
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #323232;
	top: 0;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	padding: 4% 0 3% 8%;
	line-height: 2.2em;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

/*------------  BAR ------------*/	

#bar02 {
	position: relative;
	width: 100%;
	height: 310px;
	background-image: url(../images/gallery_bar.webp);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center top;
	margin-top: -10%;
	padding: -70% 0 0 0;
}

#wrap_box_w02 {
	width: 10%;
	position: relative;
	padding: 0 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-right: 1.5px #ffffff solid;
	height: 100%;
	z-index: 20;
}

}



/*------------ smartPhone  ------------*/	
@media screen and (max-width: 500px) {
/*ここにスマホ用スタイルを記述*/



/*------------  BACKGROUND ------------*/	


#background_top {
	width: 100%;
	background-image: url("../images/gallery_bg_smp.webp");
	background-repeat: no-repeat;
	background-size:contain;
	padding: 0 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:1;
}
	

/*------------  MAIN ------------*/	

#wrap_box_w {
	width: 18%;
	position: relative;
	padding: 0 0 22% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-right: 1.5px #ffffff solid;
}

#wrap_box_b {
	width: 82%;
	position: relative;
	padding: 0 0 20% 0;
	margin-left: 18%;
	margin-top: -5%;
	margin-bottom: -0.0em;
	border-left: 1.5px #ffffff solid;
	white-space: nowrap;
}

#wrap_box_w h2 {
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 100;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	color: #ffffff;
	top: 0;
	font-size: 1.9rem;
	letter-spacing: 0.06em;
	line-height: 1.4rem;
	padding: 80% 0 0 30%;
	position: relative;
	transform: scale(1.25, 1);
	font-display: swap;
	z-index: 20;
}




.font_main01 {
	text-align: left; 
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-style: normal;
	font-weight: 300;
	color: #323232;
	top: 0;
	font-size: 0.9rem;
	letter-spacing: 0.06rem;
	padding: 4% 0 3% 8%;
	line-height: 2.2em;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}
	

/*------------  BAR ------------*/	

#bar02_smp {
	position: relative;
	width: 100%;
	height: 210px;
	background-image: url(../images/gallery_bar.webp);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center top;
	margin-top: -10%;
	padding: -70% 0 0 0;
}

#wrap_box_w02 {
	width: 18%;
	position: relative;
	padding: 0 0 0 0;
	top:0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	border-right: 1.5px #ffffff solid;
	height: 100%;
	z-index: 20;
}	
	
}