@charset "utf-8";
/* CSS Document */

/* 全体 */
html {
scroll-behavior: smooth;
}
.pc {display: block;}
.sp {display: none;}

.content_info {
margin: 0 auto;
}
.content_info p {
font-size: 0.9em;
margin: 0.3em 1em 1.5em;
line-height: 1.5;
text-align: center;
}

h1 { margin:0; font-size:28px; }

.tag_title{
font-size: 1.25rem;
font-weight: bold;
width: 90%;
margin: 0.5em auto 0;
}

.border {
display: flex;
align-items: center;
}

.border:before,
.border:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
}

.border:before {
margin-right: 1rem;
}

.border:after {
margin-left: 1rem;
}

.tag_content{
background-color: #f7f7f7;
padding: 0.5em 1em 1em;
border-radius: 20px;
margin-bottom: 2em}

.tag-area, .size-area {
text-align: center;
width: 100%;
margin: 0.5em auto 1em;
}

@media screen and (min-width: 1024px) {
	.tag-area, .tag-area_pur {width: 90%}
}

.tag { display:inline-block; padding:6px 12px; margin:4px; border-radius:20px; background:#fff; cursor:pointer; font-size:12px; border: solid 1px #bbb}

.size-area .tag { 
    display: inline-block;
    padding: 4px 7px;
    margin: 4px;
    border-radius: 100vh;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    border: solid 1px #bbb;
}

.tag.active { background:#111; color:#fff; }
.tag:hover {border: solid 1px #333}

.tag-frame {}

.tag-frame_content {
max-height: 50px;
overflow: hidden;
transition: max-height 0.3s ease;
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
margin-bottom: 1em;
}

@media screen and (min-width: 1024px) {
  .tag-frame_content {
    max-height: none !important; 
    display: block !important;
	mask-image: none;  
  }
  .toggle_btn {
    display: none !important;
  }
}

.tag-frame_content.expanded {
max-height: none;
mask-image: none;
}

.tag-frame_btn {
max-height: none;
mask-image: none;
}

.hukusu {
  text-align: center;
  font-size:12px;
  color: #5e5e5e;
}

.toggle_btn {
  display: block;
  width: 100%;             
  position: relative;      
  padding: 10px 40px 10px 15px; 
  text-align: left;        
  background: #f9f9f9;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 14px;
}

.toggle_btn.arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  left: auto;
  width: 10px;
  height: 10px;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}

.toggle_btn.arrow[aria-expanded="true"]::before {
  transform: translateY(-30%) rotate(-135deg);
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); 
  gap: 20px;
  justify-content: center;
  margin: 2em auto;
}

/* タブレット（768px以上：2列） */
@media (min-width: 768px) {.products .item-card {max-width: 340px;}}

/* PC（1024px以上：3列） */
@media (min-width: 1024px) {.products .item-card {max-width: 385px;}}
@media (min-width: 1130px) {.products .item-card {max-width: 290px;}}


.products .item-card {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
background:#fff;
border-radius:10px 10px 0 0;
padding:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
transition:0.2s;
}

.products .item-card:hover { transform:translateY(-4px); }
.products .item-card h3{border-bottom: 3px solid #333}

.products .bs {border-bottom: 10px solid #333}
.products .yh {border-bottom: 10px solid #bf0d1a}
.products .dl {border-bottom: 10px solid #fee100}

.products .bs .card-img, .products .yh .card-img, .products .dl .card-img{position: relative;}

.products .bs .card-img::after, .products .yh .card-img::after, .products .dl .card-img::after{
position: absolute;
width: 136px;
height: 30px;
bottom: 0;
right: 0;
content: "";
background-size: contain;
vertical-align: middle;
}
.products .bs .card-img::after{background-image: url("../../../img/nw/feature/campaign/cp_logo/bs_logo.jpg");}
.products .yh .card-img::after{background-image: url("../../../img/nw/feature/campaign/cp_logo/yh_logo.jpg");}
.products .dl .card-img::after{background-image: url("../../../img/nw/feature/campaign/cp_logo/dl_logo.jpg");}

.products .item-card img { width:100%; }
.products .item-card h3 { font-size:16px; text-align: center; margin: 0 0 1em; padding-bottom: 0.5em; }
.products .item-card p { font-size:13px; color:#555; margin-bottom:10px; }
.products .btn { display:inline-block; padding:2px 12px; font-size:13px; background:#111; color:#fff; border-radius:6px; text-decoration:none; }

.card-tags,
.card-sizes {
margin:8px 0;
font-size:11px;
}

/*
.pages {
	font-size: 11px;
    background-color: #333;
    color: #fff;
	padding: 0.5em;
	border-radius: 5px;
}
*/

.pages{
	font-size: 15px;
    position: relative;
    padding: 1em 0 0.5rem;
    border-bottom: 3px solid;
    color: black;
    text-align: center;
    width: 80%;
    margin: 0 auto 1rem;
}

.pages:before,
.pages:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.pages:before {
    border: 14.5px solid;
    border-color: transparent;
    border-top-color: black;
    margin-left: -18px;
}

.pages:after {
    border: 12px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -13px;
}

.mini-tag {
display:inline-block;
background:#f1f3f5;
padding:4px 8px;
border-radius:12px;
margin:3px;
font-size:11px;
}

.mini-size-link {
display:inline-block;
background:#f1f3f5;
border: 1px solid #8E8E8E;
padding:4px 8px;
border-radius:0px;
margin:3px;
font-size:15px;
text-decoration:none;
color:#111;
transition:0.2s;
}

.mini-size-link:hover {
background:#111;
color:#fff;
}

.card-img {
width:100%;
height:180px;
overflow:hidden;
border-radius:10px 10px 0 0;
margin-bottom:12px;
}

.card-img img {
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.3s;
}

.card:hover .card-img img {
transform:scale(1.05);
}

/* フィルター */
.resultCount{
  text-align: center;
  font-size:17px;
}

.tag-area_pur{
display: grid;
text-align: center;
margin: 0 auto 1em;
margin-top: 0.5em;
}

@media (min-width: 768px) {.tag-area_pur {grid-template-columns:repeat(4,1fr);}}

.tag_pur { 
	display: inline-flex;
    justify-content: center;
    align-items: center; 
	padding:6px 12px; 
	margin:4px; 
	border-radius:20px; 
	background:#fff; 
	cursor:pointer; 
	font-size:12px; 
	border: solid 1px #bbb;
  }

.tag_pur.active { background:#feae70; color:#000000; }
.tag_pur:hover {border: solid 1px #333}

.clear-btn{
  display:block;
  margin:20px auto;
  padding:10px 20px;
  width:260px;
  
  border:1px solid #ccc;
  background:#fafafa;
  color:#555;
  
  border-radius:3px;
  font-size:13px;
  
  cursor:pointer;
  transition:0.2s;
  text-align: center;
}

.clear-btn:hover{
  background:#f0f0f0;
  border-color:#999;
}

@media screen and (max-width: 1546px) {
}
@media screen and (max-width: 1020px) {
}
@media screen and (max-width: 1080px) {
}
@media screen and (max-width: 940px) {
}
@media screen and (max-width: 880px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 760px) {
}
@media screen and (max-width: 720px) {
}

@media screen and (max-width: 600px) {
.pc {display: none;}
.sp {display: block !important;}
}