@charset "UTF-8";

.item_list_headimage{
width: 100%;
height: 300px;
background-repeat: no-repeat;
margin-bottom: 20px;
position: relative;
background: url("https://gigaplus.makeshop.jp/drofficial/img2026/item_head_image_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: right 35vw top ;
 background-color: #f5f5f5;
}
.ite_list_head_pic_right{
position: absolute;
right: 0;
top: 0;
width: 40%;
min-width: 500px;
height: 100%;
/*overflow: hidden;*/
}
.ite_list_head_pic_right::before{
content: "";
position: absolute;
left: -120px;
top: 0;
width: 120px; 
height: 100%;
background: rgba(0,0,0,0.1);
pointer-events: none; 
z-index: 1;
}
.ite_list_head_pic_right img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center -2.6vw; 
}
.item_list_headimage_inner{
width: 90%;
height: 100%;
max-width: 1100px;
display: grid;
margin: auto;
align-items: center;
}
h1.item_list_head_title{
font-size: 36px;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
padding-bottom: 0.5em;
}
.item_list_headimage_inner p{
font-size: 14px;
}
.item_list_headimage_inner p span{
color: #d11120;
}
@media screen and (max-width:1266px){
.item_list_headimage{
background-position: right 38vw top ;
}
}


h2.category-title{
text-align: center;
font-size: 24px;
padding-bottom: 25px;
}
h2.search-title{
text-align: center;
font-size: 24px;
padding-bottom: 25px;
}
div.itemList ul {
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
}
div.itemList ul li {
position: relative;
width: 30%;
margin:0 1.5% 3%;
background: url("../img2026/item_list_bg_pink.jpg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
padding: 20px;
box-sizing: border-box;
font-size: 14px;
}
div.itemList ul li.cat-for_beauty,
div.itemList ul li.cat-ct17,
div.itemList ul li.cat-ct36{
background: url("../img2026/item_list_bg_pink.jpg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
div.itemList ul li.cat-for_others,
div.itemList ul li.cat-ct21,
div.itemList ul li.cat-ct39{
background: url("../img2026/item_list_bg_gray.jpg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
div.itemList ul li.cat-for_sports,
div.itemList ul li.cat-ct18,
div.itemList ul li.cat-ct29,
div.itemList ul li.cat-ct30,
div.itemList ul li.cat-ct32,
div.itemList ul li.cat-ct37 {
background: url("../img2026/item_list_bg_blue.jpg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
div.itemList ul li.cat-for_health,
div.itemList ul li.cat-ct19,
div.itemList ul li.cat-ct38 {
background: url("../img2026/item_list_bg_green.jpg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
div.itemList ul li a{
position: relative;
display: block;
}
div.itemList ul li a span.thumIMG {
margin: 0 auto;
height: 160px;
display: block;
aspect-ratio: 1 / 1;
background: none;
text-align: center;
}
div.itemList ul li a span.thumIMG img{
height: 100%;
width: auto;
margin: auto;
}
div.itemList ul li a span.title {
padding: 1em 0 0;
display: block;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
box-sizing: content-box;
}
div.itemList ul li a span.price {
font-size: 115%;
color: #d11120;
font-weight: 500;
padding: 0.25em 0 0;
display: block;
}
div.itemList ul li a span.mark {
font-size: 75%;
}
div.itemList ul li a span.price .tax {
font-size: 85%;
padding-left: 0.25em;
/*
color: #000;
font-weight: 400;*/
}
div.itemList ul li .sale_badge{
position: absolute;
width: 46px;
height: 46px;
border-radius: 100%;
text-align: center;
align-content: center;
background: #d11120;
color: #fff;
line-height: 0.65;
font-size: 150%;
left: -15px;
top: -15px;
}
div.itemList ul li .sale_badge span{
font-size: 65%;
}
div.itemList ul li .sale_badge span.sale_badge_off{
font-size: 50%;
letter-spacing: 0.1em;
}
div.itemList ul li a span.price .sale {
font-size: 80%;
display: inline-block;
margin-left: 0.5em;
padding: 0 0.2em;
color: #fff;
background: #d11120;
font-weight: 500;
}
div.itemList ul li a span.recommend {
padding: 0.5em 0 0;
display: block;
font-size: 12px !important;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
box-sizing: content-box;
}
div.itemList ul li a span.recommend span{
font-size: 12px !important;
}
div.itemList ul li a span.recommend th{
width: 5em;
border: none;
text-align: justify;
text-align-last: justify;
vertical-align: top;
}
div.itemList ul li a span.recommend td{
padding-left: 0.5em;
border: none;
vertical-align: top;
}


/*
.item_list_note{
border: solid 1px #919191;
padding: 25px;
box-sizing: border-box;
display: grid;
align-content: center;
margin-top: 30px;
}
.item_list_note p{
width: object-fit;
margin: auto;
}
.item_list_links{
width: 100%;
border-top: solid 1px #919191;
margin-top: 30px;
padding-top: 25px;
box-sizing: border-box;
margin-bottom: 50px;
}
.item_list_links ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.item_list_links ul li{
width: 23%;
border: solid 1px #919191;
box-sizing: border-box;
text-align: center;
margin: 1.0%;
font-size: 14px;
padding: 0.5em;
}
.item_list_links ul li a{
display: block;
}
*/

ul.pager{
text-align: center;
}
ul.pager li{
display: inline-block;
margin: 0 0.25em;
border: solid 1px #E2E2E2;
}
ul.pager li span{
display: block;
padding: 0.05em 0.45em;
box-sizing: border-box;
}
ul.pager li span.current{
background: #d11120;
color: #fff;
}



/*////////////   //////////////*/

div.sort ul{
background: #f3f3f5;
padding: 5px 15px;
font-size: 11px;
text-align: left;
margin-bottom: 10px;
}
div.sort ul > * {
display: inline-block;
}
div.sort ul li{
margin-right: 1em;
}

div.sort dl{
background: #f3f3f5;
padding: 5px 0 5px 15px;
font-size: 11px;
text-align: right;
}
div.sort dl > * {
display: inline-block;
}
div.sort dl dd{
margin-right: 1em;
}

main article.article p {
font-size: 14px;
line-height: 2;
width: auto;
margin: 15px auto;
display: block;
}
main article.article p.item-count {
text-align: center;
}
main article.article p.list-head-count {
text-align: center;
}


/*////////////   //////////////*/

nav#bread.search_list ul {
width: 100%;
max-width: 1100px;
margin: 0 auto 20px;
font-size: 11px;
}
#bread.search_list ul li.home {
padding-left: 0;
}


/*//// MEMBER LOGIN ////*/

.login_btn{
text-align: center;
width:90%;
margin:40px auto 50px;
display: flex;
justify-content: center;
}
.login_btn a{
width: 48%;
max-width: 380px;
margin: 0 1%;
}


@media screen and (max-width:970px){
.ite_list_head_pic_right{
display: none;
}
.item_list_headimage{
background-position: right  top ;
}
.item_list_headimage::before{
content: none;
}
}

@media screen and (max-width:710px){
.login_btn{
width: 90%;
max-width: 400px;
flex-wrap: wrap;
}
.login_btn a{
width: 100%;
margin: 0 0 20px;
}
}


@media screen and (max-width:640px){
div.itemList ul li {
width: 47%;
margin:0 1.5% 3%;
}
}

@media screen and (max-width:500px){
div.itemList ul li {
width: 100%;
margin:0 0 3%;
padding: 15px;
background-position: bottom;
}
div.itemList ul li a{
display: grid;
grid-template-columns: 140px 1fr;
align-items:center;
}
div.itemList ul li a span.thumIMG {
margin: 0;
height: 130px;
width: 130px;
display: block;
aspect-ratio: 1 / 1;
background: none;
text-align: center;
}
div.itemList ul li .sale_badge{
top: -10px;
left: -8px;
}
}