@charset "UTF-8";


/* --------------------------------------------------------------------
　共通設定
-------------------------------------------------------------------- */
main#page-main-wrapper{
padding:90px 0 200px 0;
}
main#page-main-wrapper > h1{
font-size:45px;
letter-spacing:.05em;
text-align:center;
line-height:1;
margin-bottom:30px;
}
main#page-main-wrapper > h1 > span{
width:100%;
font-size:22px;
margin-top:10px;
display:flex;
align-items:center;
justify-content:center;
font-style:italic;
background:-webkit-linear-gradient(135deg, #427eff 20%, #f13f79 70%) no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
main#page-main-wrapper > h1 > ion-icon{
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
padding:4px;
border-radius:8px;
font-size:40px;
color:#fff;
display:block;
margin:auto auto 20px auto;
}
main#page-main-wrapper > p.cacth{
font-size:14px;
text-align:center;
padding:0 20px;
}
main#page-main-wrapper > p.cacth > br{
display:none;
}
@media screen and (max-width:768px){
	main#page-main-wrapper{
	padding:40px 0 60px 0;
	}
	main#page-main-wrapper > h1{
	font-size:28px;
	}
	main#page-main-wrapper > h1 > span{
	font-size:18px;
	letter-spacing:.08em;
	}
	main#page-main-wrapper > h1 > span > ion-icon{
	font-size:20px;
	}
	main#page-main-wrapper > p.cacth{
	font-size:12px;
	}
	main#page-main-wrapper > p.cacth > br{
	display:block;
	}
}


/* --------------------------------------------------------------------
　絞り込みメニュー
-------------------------------------------------------------------- */
nav#instagrammer-coordination-filter{
margin:90px auto 30px auto;
}
nav#instagrammer-coordination-filter > ul.filter{
display:flex;
align-items:center;
margin:auto;
width:max-content;
}
nav#instagrammer-coordination-filter > ul.filter > li{
cursor:pointer;
margin:auto 10px;
font-weight:600;
border-bottom:2px solid #fff;
font-size:18px;
}
nav#instagrammer-coordination-filter > ul.filter > li.is-active{
color:#ca0000;
border-bottom:2px solid #ca0000;
}

@media screen and (max-width:768px){
	nav#instagrammer-coordination-filter{
	margin:60px auto 30px auto;
	}
	nav#instagrammer-coordination-filter > ul.filter > li{
	font-size:16px;
	}
}



/* --------------------------------------------------------------------
　インスタグラムエリア
-------------------------------------------------------------------- */
#instagrammer-coordination-list-wrap{
width:1024px;
padding:0 1.5rem;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:60px 20px;
}
.is-animate{
opacity:1;
animation:.6s zoom-in;
}

@keyframes zoom-in{
	0% {
		opacity:.3;
		transform:scale(.8);
	}
	100% {
		opacity:1;
		transform:none;
	}
}
#instagrammer-coordination-list-wrap > section > figure{
position:relative;
width:100%;
padding-top:120%;
overflow:hidden;
border-radius:10px;
}
#instagrammer-coordination-list-wrap > section > figure > img{
position:absolute;
top:50%;
left:50%;
height:100%;
width:auto;
transform:translate(-50%,-50%);
}
#instagrammer-coordination-list-wrap > section > .user{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;;
margin-top:15px;
}
#instagrammer-coordination-list-wrap > section > .user > .icon{
width:40px;
height:40px;
border-radius:100%;
overflow:hidden;
position:relative;
}
#instagrammer-coordination-list-wrap > section > .user > .icon > img{
position:absolute;
top:50%;
left:50%;
height:auto;
width:100%;
transform:translate(-50%,-50%);
}
#instagrammer-coordination-list-wrap > section > .user > .name{
width:calc(100% - 60px);
font-size:13px;
font-weight:600;
line-height:1.4;
word-wrap:break-word;
overflow-wrap:break-word;
}
#instagrammer-coordination-list-wrap > section > .user > .name:after{
content:"さん";
}
#instagrammer-coordination-list-wrap > section > .js-modal-open{
border:1px solid #333;
padding:10px 0;
width:100%;
display:block;
text-align:center;
margin-top:15px;
font-weight:600;
font-size:13px;
border-radius:30px;
cursor:pointer;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
background:rgba(0,0,0,50%);
padding:40px 20px;
overflow:auto;
opacity:0;
visibility:hidden;
transition:.3s;
box-sizing:border-box;
z-index:999;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content:before{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content.active{
opacity:1;
visibility:visible;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body{
position:relative;
display:inline-block;
vertical-align:middle;
max-width:500px;
width:90%;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content{
background:#fff;
text-align:left;
padding:30px;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > h3{
font-size:18px;
font-weight:600;
text-align:center;
margin-bottom:20px;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li{
margin-bottom:30px;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a{
display:flex;
align-items:center;
justify-content:space-between;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > img{
width:180px;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > .text{
width:calc(100% - 210px);
line-height:1.4;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > .text > span{
font-size:13px;
letter-spacing:0;
color:#999;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > .text > p{
font-size:13px;
font-weight:600;
margin:10px 0;
line-height:1.4;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
#item-price,
#item-price > #normalPrice,
#item-price > #salePrice,
#item-price > #membersPrice{
display:flex;
font-size:14px;
margin:auto 0 0 0;
}
#item-price > #normalPrice:before,
#item-price > #salePrice:before,
#item-price > #membersPrice:before{
content:"￥";
margin:auto 2px 0 0;
}
#item-price > #normalPrice > span#sale-off,
#item-price > #membersPrice > span#members-off{
margin-left:2px;
font-size:11px;
margin:auto auto auto 5px;
display:flex;
align-items:baseline;
}
#item-price > #normalPrice > span#sale-off:after,
#item-price > #membersPrice > span#members-off:after{
content:"OFF";
}
#item-price > #normalPrice{
color:#ca0000;
}
#item-price > #membersPrice{
color:#8f7f67;
}
#item-price.sale:not(.members) > #normalPrice,
#item-price.members:not(.sale) > #normalPrice,
#item-price.members.sale > #salePrice{
text-decoration:line-through;
margin:auto 8px 0 0;
}
#item-price.members.sale > #normalPrice,
#item-price.members.sale > #salePrice > #sale-off,
#item-price.normal > #salePrice,
#item-price.normal > #membersPrice,
#item-price.members:not(.sale) > #salePrice,
#item-price.sale:not(.members) > #membersPrice{
display:none;
}

#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .js-modal-close{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
top:-40px;
right:-40px;
width:40px;
height:40px;
font-size:40px;
color:#fff;
cursor:pointer;
}
#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .js-modal-close:before{
font-family:'Material Symbols Outlined';
font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 48;
font-size:40px;
content:"\e5cd";
}

@media screen and (min-width:769px){
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > .text:after{
	content:"この商品を見る";
	background:#000;
	color:#fff;
	padding:10px 20px;
	display:block;
	margin-top:20px;
	font-size:12px;
	border-radius:20px;
	text-align:center;
	font-weight:600;
	width:max-content;
	}
}
@media screen and (max-width:768px){
	#instagrammer-coordination-list-wrap{
	width:100%;
	grid-template-columns:repeat(2,1fr);
	overflow:hidden;
	}
	#instagrammer-coordination-list-wrap > section{
	overflow:hidden;
	width:100%;
	}
	#instagrammer-coordination-list-wrap > section > .user > .icon{
	width:30px;
	height:30px;
	}
	#instagrammer-coordination-list-wrap > section > .user > .name{
	font-size:11px;
	width:calc(100% - 40px);
	}
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content{
	padding:0;
	}
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body{
	width:calc(100% - 30px);
	}
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content{
	max-height:calc(100vh - 50px);
	padding:20px;
	overflow-y:scroll;
	}
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > img{
	width:90px;
	}
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .modal-content > ul > li > a > .text{
	width:calc(100% - 100px);
	}
	#instagrammer-coordination-list-wrap > section > .instagrammer-modal-content > .modal-body > .js-modal-close{
	right:-10px;
	}
}