@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');



@media only screen and (max-width: 480px) {




/*======================================

	side 
	
========================================*/


.side-menu-wrapper{
	width: 100%;
	margin-bottom: 45px;
}

h3.h3-side-menu{
	font-size:18px;
	line-height: 1;
	font-weight: 600;
	padding: 12px 0 12px 18px;
	margin: 0 0 24px 0;
	border-left:6px solid #fc864c;
	border-bottom:0px solid #fc864c;
}

.side-menu{
	
}

.side-menu a{
	width: 100%;
	font-size: 16px;
	display:block;
	text-decoration: none;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 9px;
	padding: 0 0 3px 24px;
	position: relative;
}

.side-menu a::before {
	content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    left: 0;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 4px solid transparent;
    border-left: 6px solid #fc864c;   /* 好みで色を変えてください */  
}

.side-menu a.current{
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	color:#fc864c;
	display:block;
	text-decoration: none;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 9px;
	padding: 0 0 3px 24px;
	position: relative;
}


.side-to-category{
	width: 100%;
	margin: 24px 0 0 0;
	padding: 0 0 0 0;
}

.side-to-category button{
	width: 100%;
	margin: 0px 0 0 0;
	padding: 6px;
	background-color: transparent;
	border: 1px dotted #fc864c;
	cursor: pointer;
	outline: none;
	appearance: none;
	font-size: 15px;
	color: #555555;
	
}
.side-to-category button:hover{
	color: #fc864c;
	
}



.side-to-category a{
	display: block;
	width: 100%;
	margin: 0px 0 0 0;
	padding: 6px;
	background-color: transparent;
	border: 1px dotted #fc864c;
	cursor: pointer;
	outline: none;
	appearance: none;
	font-size: 14px;
	color: #555555;
	text-decoration: none;
	text-align: center;
	
}


/*======================================

	side-banner 
	
========================================*/

.side-banner{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap:12px;
	align-items: center;
	margin-bottom: 12px;
	text-decoration: none;
}

.side-banner img{
	width: 160px;
	height: 90px;
	object-fit:cover;
	display: block;
}


.side-banner span{
	font-size:15px;
	display: block;
}





/*======================================

	modal-bar 
	
========================================*/


.mobile-filter-bar{
	margin: -9px auto 30px auto;
	display: flex;
	justify-content: center;
	gap:3px;
}

.mobile-filter-bar button{
	width: 42%;
	margin: 0px 0 0 0;
	padding: 6px;
	background-color: transparent;
	border: 1px dotted #fc864c;
	cursor: pointer;
	outline: none;
	appearance: none;
	font-size: 14px;
	color: #555555;
}



/*======================================

	lilst-head 
	
========================================*/
.list-head{
	width: 100%;
	margin:0 0 0 0;
}

h3.h3-list-lead{
	font-size:18px;
	line-height: 1;
	font-weight: 600;
	padding: 12px 0 12px 18px;
	margin: 0 0 24px 0;
	border-left:6px solid #fc864c;
	border-bottom:0px solid #fc864c;
}



/*======================================

	function 
	
========================================*/

.function{
	width: 100%;
	display: block;
	justify-content: center;
	font-size: 15px;
	margin: 21px auto 30px auto;
	text-align: center;
}

.function-left{
	margin-bottom: 6px;
}
.function-right strong{
	color:#fc864c;
}

.function-sort{
	display: block;
	margin-bottom: 6px;
}
.function-stock{
	display: block;
}



/*======================================

	page number 
	
========================================*/

.page-menu-box{
	width:100%;
	margin:30px 0 30px 0;
	padding:0 0 0 0;
}
.page-menu-box-all{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align: center;
}

.page-menu{
background-color: transparent;
border-top:0px solid #333;
border-left:0px solid #aaaaaa;
border-right:0px solid #aaaaaa;
border-bottom:0px solid #aaaaaa;
margin: auto;
padding: 0px 4px 0px 4px ;
text-align: center;
clear:both;
}

.page-menu ul{
background-color: transparent;
padding: 0 20px 0 20px ;
margin: 0 0 0 0;
line-height:14px;
display: flex;
justify-content: space-between;
}

.page-menu li{
display:inline-block;
list-style:none ;
background: transparent; 
color:#333;
}
.page-menu li a{
display:inline-block;
list-style:none ;
background: transparent; 
padding: 6px 9px 6px 9px ;
margin: 0 6px 6px 6px ;
font-size:21px;
line-height:16px;
border: 0px solid #222;
text-decoration: none;
border-radius: 3px;
background: #ddd;
}
.page-menu li a:hover{
	background: #fc864c;
	color: #fff;
}
.page-menu li span{
display:inline-block;
list-style:none ;
background: transparent; 
padding: 6px 9px 6px 9px ;
margin: 0 6px 6px 6px ;
font-size:16px;
line-height:16px;
border: 0px solid #222;
color:#333;
}
.page-menu li strong{
display:inline-block;
list-style:none ;
background: transparent; 
padding: 6px 9px 6px 9px ;
margin: 0 6px 6px 6px ;
font-size:16px;
line-height:16px;
border-radius: 3px;
background: #fc864c;
color: #fff;
}

.page-menu li.anchor-num{
	display: none;
}




/*======================================

	list 
	
========================================*/

.item-list-wrapper{
	width: 100%;
	border-top: 1px solid #ddd;
}

.item-list{
	width: 100%;
	border-bottom: 1px solid #ddd;
}

a.item-list-col{
	width: 100%;
	display: block;
	justify-content: space-between;
	align-items: center;
	padding: 18px;
	text-decoration: none;
}

.item-list-col:hover{
	cursor: pointer;
}


.item-list-left{
	width: 100%;
	text-align: center;
	margin-bottom: 21px;
}

.item-list-right{
	width: 100%;
}

.item-list-thumbnail{
	margin: 0 auto;
	width: 200px;
	height: 200px;
	object-fit: contain;
}
h3.item-list-h3{
	text-decoration: none;
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 12px 0;
	padding: 0 0 0 0;
}

.item-list-artist:after{
	content: "";
}

.item-list-h3 span{
	display: block;
	margin-bottom: 9px;
}

.item-list-h3 span.item-list-artist{
	display: block;
	margin-bottom: 9px;
	font-size:16px;
}

.item-list-h3 span.item-list-author{
	display: block;
	margin-bottom: 9px;
	font-size:14px;
}

.item-list-note{
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 6px;
}




/*======================================

	カテゴリーから探す 
	
========================================*/

h3.h3-category{
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	font-size:24px;
	line-height: 1;
	border-bottom:0px solid #ccc;
	padding: 0 0 15px 0;
	margin: 0px auto 33px auto;
	display: flex;
	align-items: center;
}

.h3-category:before,
.h3-category:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #fc864c;
	width: 200px;
}

.h3-category:before {
	margin-right: 1rem;
}

.h3-category:after {
	margin-left: 1rem;
}

h3.h3-category a{
	text-decoration: none;
}



.genre-list-h4{
	font-size:18px;
	line-height: 1;
	font-weight: 600;
	padding: 12px 0 12px 18px;
	margin: 0 0 24px 0;
	border-left:6px solid #fc864c;
	border-bottom:0px solid #fc864c;
}

ul.genre-list{
	widows: 100%;
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	margin: 0 0 36px 0;
	list-style: none;
	padding: 0;
}

ul.genre-list li{
	font-size:18px;
	display: inline-block;
	margin: 0 15px 15px 0;
}





}/*//end  max-width: 480px ///////////////////////*/











@media only screen and (min-width: 481px) {



/*======================================

	side 
	
========================================*/


.side-menu-wrapper{
	width: 100%;
	margin-bottom: 45px;
}

h3.h3-side-menu{
	font-size:18px;
	line-height: 1;
	font-weight: 600;
	padding: 12px 0 12px 18px;
	margin: 0 0 24px 0;
	border-left:6px solid #fc864c;
	border-bottom:0px solid #fc864c;
}

.side-menu{
	
}

.side-menu a{
	width: 100%;
	font-size: 16px;
	display:block;
	text-decoration: none;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 9px;
	padding: 0 0 3px 24px;
	position: relative;
}

.side-menu a::before {
	content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    left: 0;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 4px solid transparent;
    border-left: 6px solid #fc864c;   /* 好みで色を変えてください */  
}

.side-menu a.current{
	width: 100%;
	font-size: 16px;
	font-weight: 600;
	color:#fc864c;
	display:block;
	text-decoration: none;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 9px;
	padding: 0 0 3px 24px;
	position: relative;
}


.side-to-category{
	width: 100%;
	margin: 24px 0 0 0;
	padding: 0 0 0 0;
}

.side-to-category button{
	width: 100%;
	margin: 0px 0 0 0;
	padding: 6px;
	background-color: transparent;
	border: 1px dotted #fc864c;
	cursor: pointer;
	outline: none;
	appearance: none;
	font-size: 15px;
	color: #555555;
	
}
.side-to-category button:hover{
	color: #fc864c;
	
}



.side-to-category a{
	display: block;
	width: 100%;
	margin: 0px 0 0 0;
	padding: 6px;
	background-color: transparent;
	border: 1px dotted #fc864c;
	cursor: pointer;
	outline: none;
	appearance: none;
	font-size: 14px;
	color: #555555;
	text-decoration: none;
	text-align: center;
	
}



/*======================================

	side-banner 
	
========================================*/

.side-banner{
	width: 100%;
	display: block;
	justify-content: flex-start;
	gap:12px;
	align-items: center;
	margin-bottom: 12px;
	text-decoration: none;
}

.side-banner img{
	width: 160px;
	height: 90px;
	object-fit:cover;
	display: block;
}


.side-banner span{
	font-size:15px;
	display: block;
}






/*======================================

	lilst-head 
	
========================================*/
.list-head{
	width: 100%;
	margin:0 0 0 0;
}

h3.h3-list-lead{
	font-size:18px;
	line-height: 1;
	font-weight: 600;
	padding: 12px 0 12px 18px;
	margin: 0 0 24px 0;
	border-left:6px solid #fc864c;
	border-bottom:0px solid #fc864c;
}



/*======================================

	function 
	
========================================*/

.function{
	width: 100%;
	display: block;
	justify-content: space-between;
	font-size: 14px;
	margin-bottom: 30px;
}

.function-left{
	margin-bottom: 6px;
	text-align: center;
}

.function-right{
	text-align: center;
}

.function-right strong{
	color:#fc864c;
}


/*======================================

	page number 
	
========================================*/

.page-menu-box{
	width:100%;
	margin:30px 0 30px 0;
	padding:0 0 0 0;
}
.page-menu-box-all{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align: center;
}

.page-menu{
background-color: transparent;
border-top:0px solid #333;
border-left:0px solid #aaaaaa;
border-right:0px solid #aaaaaa;
border-bottom:0px solid #aaaaaa;
margin: auto;
padding: 0px 4px 0px 4px ;
text-align: center;
clear:both;
}

.page-menu ul{
background-color: transparent;
padding: 0 0 0 0 ;
margin: 0 0 0 0;
line-height:14px;
display: flex;
justify-content: center;
}

.page-menu li{
display:inline-block;
list-style:none ;
background: transparent; 
color:#333;
}
.page-menu li a{
display:inline-block;
list-style:none ;
background: transparent; 
padding: 6px 9px 6px 9px ;
margin: 0 6px 6px 6px ;
font-size:16px;
line-height:16px;
border: 0px solid #222;
text-decoration: none;
border-radius: 3px;
background: #ddd;
}
.page-menu li a:hover{
	background: #fc864c;
	color: #fff;
}
.page-menu li span{
display:inline-block;
list-style:none ;
background: transparent; 
padding: 6px 9px 6px 9px ;
margin: 0 6px 6px 6px ;
font-size:16px;
line-height:16px;
border: 0px solid #222;
color:#333;
}
.page-menu li strong{
display:inline-block;
list-style:none ;
background: transparent; 
padding: 6px 9px 6px 9px ;
margin: 0 6px 6px 6px ;
font-size:16px;
line-height:16px;
border-radius: 3px;
background: #fc864c;
color: #fff;
}





/*======================================

	list 
	
========================================*/

.item-list-wrapper{
	width: 100%;
	border-top: 1px solid #ddd;
}

.item-list{
	width: 100%;
	border-bottom: 1px solid #ddd;
}

a.item-list-col{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px;
	text-decoration: none;
}

.item-list-col:hover{
	cursor: pointer;
}


.item-list-left{
	width: 200px;
}

.item-list-right{
	width: 420px;
}

.item-list-thumbnail{
	width: 200px;
	height: 200px;
	object-fit: contain;
}
h3.item-list-h3{
	text-decoration: none;
	font-size: 18px;
	line-height: 1.5;
	margin: 0 0 12px 0;
	padding: 0 0 0 0;
}

.item-list-artist:after{
	content: "";
}

.item-list-h3 span{
	display: block;
	margin-bottom: 9px;
}

.item-list-h3 span.item-list-artist{
	display: block;
	margin-bottom: 9px;
	font-size:18px;
}

.item-list-h3 span.item-list-artist-en{
	display: block;
	margin-bottom: 9px;
	font-size:18px;
	font-weight: normal;
}

.item-list-h3 span.item-list-author{
	display: block;
	margin-bottom: 9px;
	font-size:16px;
}

.item-list-note{
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 6px;
}




/*======================================

	カテゴリーから探す 
	
========================================*/

h3.h3-category{
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	font-size:24px;
	line-height: 1;
	border-bottom:0px solid #ccc;
	padding: 0 0 15px 0;
	margin: 0px auto 33px auto;
	display: flex;
	align-items: center;
}

.h3-category:before,
.h3-category:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #fc864c;
	width: 200px;
}

.h3-category:before {
	margin-right: 1rem;
}

.h3-category:after {
	margin-left: 1rem;
}

h3.h3-category a{
	text-decoration: none;
}



.genre-list-h4{
	font-size:18px;
	line-height: 1;
	font-weight: 600;
	padding: 12px 0 12px 18px;
	margin: 0 0 24px 0;
	border-left:6px solid #fc864c;
	border-bottom:0px solid #fc864c;
}

ul.genre-list{
	widows: 100%;
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	margin: 0 0 36px 0;
	list-style: none;
	padding: 0;
}

ul.genre-list li{
	font-size:18px;
	display: inline-block;
	margin: 0 15px 15px 0;
}

}/*//end  min-width: 481px ///////////////////////*/