@charset "utf-8";


#grid-list {
	display: none;
}
.gridofall > a i {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
[id^="grid-list"] > [class^="grid"].special .clock-base {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 999;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% auto;
}



@media screen and (min-width: 1000px) {
	
	#grid-list,
	#grid-list-all {
		position: relative;
		background: url(../img/bg_grid.png) 0 0 repeat-y;
		background-size: 100% auto;
		overflow: hidden;
	}

	[id^="grid-list"] > [class^="grid"] {
		position: absolute;
		width: 16.66%;
		padding-top: 16.66%;
		
		-ms-transition:     opacity 200ms ease-out;
		-webkit-transition: opacity 200ms ease-out;
		-moz-transition:    opacity 200ms ease-out;
		transition:         opacity 200ms ease-out;
	}
	body.filter-ready [id^="grid-list"] > [class^="grid"] {
		-ms-transition:     opacity 0ms ease-out;
		-webkit-transition: opacity 0ms ease-out;
		-moz-transition:    opacity 0ms ease-out;
		transition:         opacity 0ms ease-out;
	}
	
	[id^="grid-list"] > [class^="grid"].large {
		width: 33.33%;
		padding-top: 33.33%;
	}
	
	
	
	
	
	
	
	/*
	[id^="grid-list"] > [class^="grid"].product {
		width: 50%;
		padding-top: 50%;
	}
	*/
	[id^="grid-list"] > [class^="grid"].product {
		width: 33.33%;
		padding-top: 33.33%;
	}
	
	[id^="grid-list"] > [class^="grid"].product .ex {
		position: absolute;
		display: block;
		left: 5px;
		top: 5px;
		right: 5px;
		bottom: 5px;
		overflow: hidden;
		text-align: center;
	}
	[id^="grid-list"] > [class^="grid"].product .ex:before {
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
		background: #000;
		visibility: hidden;
	}
	[id^="grid-list"] > [class^="grid"].product .ex header {
		display: none;
	}


	[id^="grid-list"] > [class^="grid"].product .group {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
	[id^="grid-list"] > [class^="grid"].product .group nav a {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-align: left;
		
		-ms-transition:     opacity 300ms ease-out;
		-webkit-transition: opacity 300ms ease-out;
		-moz-transition:    opacity 300ms ease-out;
		transition:         opacity 300ms ease-out;
	}
	[id^="grid-list"] > [class^="grid"].product .group nav a:hover {
		opacity: 0.7;
	}


	[id^="grid-list"] > [class^="grid"].product.coharu .group {
		background: url(../asset/product/coharu.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.coharu .group nav a {
		background: url(../asset/product/coharu_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product.kitta .group {
		background: url(../asset/product/kitta.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.kitta .group nav a {
		background: url(../asset/product/kitta_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product.masurie .group {
		background: url(../asset/product/masurie.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.masurie .group nav a {
		background: url(../asset/product/masurie_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product.kiroku .group {
		background: url(../asset/product/kiroku.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.kiroku .group nav a {
		background: url(../asset/product/kiroku_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product.seal .group {
		background: url(../asset/product/seal.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.seal .group nav a {
		background: url(../asset/product/seal_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product.girly-tepra .group {
		background: url(../asset/product/girly-tepra.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.girly-tepra .group nav a {
		background: url(../asset/product/girly-tepra_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product.hiyori .group {
		background: url(../asset/product/hiyori.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	[id^="grid-list"] > [class^="grid"].product.hiyori .group nav a {
		background: url(../asset/product/hiyori_btn.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	[id^="grid-list"] > [class^="grid"].product .card *,
	[id^="grid-list"] > [class^="grid"].product .card *::before,
	[id^="grid-list"] > [class^="grid"].product .card *::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	[id^="grid-list"] > [class^="grid"].product .card {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_block {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 40px 10%;
		border: 3px solid transparent;
		background-color: #fff;
		color: #585a59;
		line-height: 1.5;
		text-decoration: none;
		text-align: left;
		-webkit-transition: border-color .3s ease-out 0s;
		transition: border-color .3s ease-out 0s;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_header {
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_subtitle {
		margin-bottom: .25em;
		font-size: .75rem;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		background: none;
		font-size: 2.0rem;
		line-height: 1.25;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_article {
		margin-top: 2em;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_article > *:first-child,
	[id^="grid-list"] > [class^="grid"].product .card .card_article > section:first-child > [class*="heading-lv"] {
		margin-top: 0 !important;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_copy {
		display: inline-block;
		position: relative;
		padding-bottom: 4px;
		font-size: 1rem;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_copy::after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #999;
		content: "";
		-webkit-transition: background-color .3s ease-out 0s;
		transition: background-color .3s ease-out 0s;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_lead {
		margin-top: 1.5em;
		font-size: .8rem;
		line-height: 2;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_notes {
		margin-top: .5em;
		padding-left: 1em;
		text-indent: -1em;
		font-size: .75rem;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_nav {
		margin-top: 1.5em;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_button {
		display: inline-block;
		padding: 12px 15px;
		background-color: #999;
		color: #fff;
		font-size: .8rem;
		-webkit-transition: background-color .3s ease-out 0s;
		transition: background-color .3s ease-out 0s;
	}
	[id^="grid-list"] > [class^="grid"].product .card a.card_block:hover {
		border-color: #666;
	}
	[id^="grid-list"] > [class^="grid"].product .card a.card_block:hover .card_copy::after {
		background-color: #666;
	}
	[id^="grid-list"] > [class^="grid"].product .card a.card_block:hover .card_button {
		background-color: #666;
	}
	
	
	[id^="grid-list"] > [class^="grid"].special img {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	
	
	
	
	[id^="grid-list"] > [class^="grid"] img {
		width: 100%;
		height: auto;
	}
	[id^="grid-list"] > [class^="grid"] > a {
		position: absolute;
		display: block;
		left: 5px;
		top: 5px;
		right: 5px;
		bottom: 5px;
		cursor: pointer;
		overflow: hidden;
	}
	
	
	
	
	[id^="grid-list"] > [class^="grid"] > a .overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		/*
		background: rgba(255,255,255,0.9);
		*/
		opacity: 0;
		
		-ms-transition:     all 200ms ease-out;
		-webkit-transition: all 200ms ease-out;
		-moz-transition:    all 200ms ease-out;
		transition:         all 200ms ease-out;
	}
	[id^="grid-list"] > [class^="grid"] > a:hover .overlay {
		opacity: 1;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		z-index: 10;
		transform: translate(-50%,-50%);
		display: none;
		
		mix-blendmode: multiply;
	}
	[id^="grid-list"] > [class^="grid"] > a.instagram .overlay ul {
		display: block;
	}
	
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li {
		padding: 0 6px;
		text-align: center;
		color: #333;
		font-size: 13px;
		line-height: 1.2;
	}
	[id^="grid-list"] > [class^="grid"].large > a .overlay ul li {
		font-size: 16px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li:before {
		content: "#";
		margin-right: 3px;
	}
	
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li + li {
		margin-top: 5px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li + li + li + li + li + li {
		display: none;
	}
	
	
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		position: absolute;
		display: block;
		width: 130px;
		height: 40px;
		left: 50%;
		top: 50%;
		z-index: 10;
		margin: -20px 0 0 -65px;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		color: #333;
	}
	[id^="grid-list"] > [class^="grid"] > a.instagram .overlay span {
		color: #fafafa;
		background: #999;
		display: none;
	}
	[id^="grid-list"] > [class^="grid"].special > a .overlay span {
		white-space: nowrap;
	}
	
	
	/*
	body.windows [id^="grid-list"] > [class^="grid"] > a .overlay {
		background: none;
		overflow: hidden;
	}
	body.windows [id^="grid-list"] > [class^="grid"] > a.instagram .overlay i {
		position: absolute;
		display: block;
		width: 200%;
		height: 200%;
		left: -50%;
		top: -50%;
		z-index: 1;
		opacity: 0.6;
		background-size: 2500% auto;
		
		-ms-filter: blur(100px);
		-webkit-filter: blur(100px);
		-moz-filter: blur(100px);
		filter: blur(100px);
	}
	*/
	[id^="grid-list"] > [class^="grid"] > a .overlay {
		background: none;
		overflow: hidden;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay i {
		position: absolute;
		display: block;
		width: 200%;
		height: 200%;
		left: -50%;
		top: -50%;
		z-index: 1;
		opacity: 0.5;
		background-size: 2500% auto;
		
		-ms-filter: blur(100px);
		-webkit-filter: blur(100px);
		-moz-filter: blur(100px);
		filter: blur(100px);
	}
	
	
	
	
	#filter {
		position: relative;
		box-sizing: border-box;
		height: 32px;
		margin: 0 -5px;
		padding: 0 0 0 40px;
		font-size: 0;
		overflow: hidden;
		
		-webkit-font-smoothing: antialiased;
		
		-ms-transition:     height 300ms ease-out;
		-webkit-transition: height 300ms ease-out;
		-moz-transition:    height 300ms ease-out;
		transition:         height 300ms ease-out;
		
		text-align: left;
	}
	body.fixed-menu #filter {
		position: fixed;
		max-width: 1280px;
		width: 100%;
		z-index: 1000;
		left: 0;
		top: 100px;
		margin: 0;
		background: #fafafa;
	}
	body.fixed-menu #filter + main {
		padding-top: 32px;
	}
	
	
	#filter.show_product {
		position: relative;
		height: 32px;
		overflow: hidden;
  -webkit-transition:  all 300ms 0s ease;
  -moz-transition:  all 300ms 0s ease;
  -o-transition:  all 300ms 0s ease;
  transition:  all 300ms 0s ease;
	}
	#filter.show_product.open {

  -webkit-transition:  all 300ms 0s ease;
  -moz-transition:  all 300ms 0s ease;
  -o-transition:  all 300ms 0s ease;
  transition:  all 300ms 0s ease;
	}
	#filter.show_product > a {
		position: absolute;
		display: block;
		background: url(../img/arrow_menu_open.png) 50% 0% no-repeat;
		background-size: 16px auto;
		margin: 5px;
		padding: 10px;
		cursor: pointer;
		left: 0;
		top: 0;
  -webkit-transition: all 300ms 0s ease;
  -moz-transition: all 300ms 0s ease;
  -o-transition: all 300ms 0s ease;
  transition: all 300ms 0s ease;
	}
	#filter.show_product.open > a {
		position: absolute;
		display: block;
		background: url(../img/arrow_menu_close.png) 50% 80% no-repeat;
		background-size: 16px auto;
		margin: 5px;
		padding: 10px;
		cursor: pointer;
		left: 0;
		top: 0;
  -webkit-transition: all 300ms 0s ease;
  -moz-transition: all 300ms 0s ease;
  -o-transition: all 300ms 0s ease;
  transition: all 300ms 0s ease;
	}
	#filter.show_product > a:hover {
		background: url(../img/arrow_menu_open.png) 50% 80% no-repeat;
		background-size: 16px auto;
	}
	#filter.show_product.open > a:hover {
		background: url(../img/arrow_menu_close.png) 50% 80% no-repeat;
		background-size: 16px auto;
	}
	
	#filter li {
		display: inline-block;
		margin-right: 22px;
		line-height: 32px;
	}
	
	#filter li a {
		line-height: 1;
		font-size: 16px;
		color: #999;
		cursor: pointer;
	}
	#filter li a:before {
		content: "#";
		margin-right: 3px;
	}
	#filter li a.active {
		color: #000;
	}
	#filter li a:hover {
		color: #000;
	}
	
	#filter .more {
		position: absolute;
		right: 8px;
		top: -5px;
		line-height: 1;
		font-size: 16px;
	}
	#filter .more a {
		display: inline-block;
		padding: 5px 10px 5px 50px;
		color: #999;
		cursor: pointer;
		background: rgba(250,250,250,0.85);
		background: linear-gradient(90deg, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 45px);
	}
	#filter .more a:hover {
		color: #000;
	}
	
	/*
	#filter .less {
		position: relative;
		width: 32px;
		height: 32px;
		margin: -10px auto 0;
		
		visibility: hidden;
	}
	#filter .less a {
		display: block;
		height: 32px;
		font-size: 0;
		cursor: pointer;
		background: url(../img/arrow_top_mini.png) 50% 25% no-repeat;
		background-size: 18px auto;
		
		opacity: 0.5;
		
		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	*/
	
	
	#filter .less {
		position: absolute;
		right: 8px;
		top: -5px;
		line-height: 1;
		font-size: 16px;
		display: none;
	}
	#filter .less a {
		display: inline-block;
		padding: 5px 10px 5px 50px;
		color: #999;
		cursor: pointer;
		background: rgba(250,250,250,0.85);
		background: linear-gradient(90deg, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 45px);
		
		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	
	
	
	#filter .less a:hover {
		color: #000;
	}
	
	body.expanded-filter #filter {
	}
	body.expanded-filter #filter li {
		display: inline-block !important;
	}
	body.expanded-filter #filter .more {
		visibility: hidden;
	}
	body.expanded-filter #filter .less {
		display: block;
	}
	
	
	
	
	#show-more {
		padding: 45px 0 10px;
		text-align: center;
		font-size: 20px;
		font-family: "Futura-Light", Futura, Arial, Helvetica, sans-serif;
	}
	#show-more a {
		display: inline-block;
		padding: 0 0 28px;
		background: url(../img/arrow_bottom_mini.png) 50% 80% no-repeat;
		background-size: 30px auto;
		cursor: pointer;
		
		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	#show-more a:hover {
		background-position: 50% 95%;
	}
	
	
	#instagram-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1100;
		background: rgba(0,0,0,0.8);
		opacity: 0;
		
		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	#instagram-popup {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1200;
	}
	#instagram-close {
		position: fixed;
		display: block;
		width: 30px;
		height: 30px;
		right: 20px;
		top: 20px;
		z-index: 1500;
		background: url(../img/icon_close.png) 0 0 no-repeat;
		background-size: 24px auto;
		cursor: pointer;
		opacity: 0;
		
		-ms-transition:     opacity 300ms ease-out;
		-webkit-transition: opacity 300ms ease-out;
		-moz-transition:    opacity 300ms ease-out;
		transition:         opacity 300ms ease-out;
	}
	
	#instagram-popup .inner {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1200;
		overflow-y: auto;
	}
	#instagram-popup iframe {
		display: block;
		width: 640px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 50px !important;
		border-radius: 0 !important;
		opacity: 0;
		
		-ms-transition:     opacity 300ms ease-out;
		-webkit-transition: opacity 300ms ease-out;
		-moz-transition:    opacity 300ms ease-out;
		transition:         opacity 300ms ease-out;
	}
	#instagram-popup blockquote {
		visibility: hidden;
	}
	
	body.overlay {
		overflow: hidden;
	}
	body.overlay #instagram-overlay,
	body.overlay #instagram-close {
		opacity: 1;
	}
	#instagram-popup iframe.loaded {
		opacity: 1;
	}
	
	
}


@media screen and (min-width: 1300px) {
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li {
		font-size: 13px;
	}
	[id^="grid-list"] > [class^="grid"].large > a .overlay ul li {
		font-size: 18px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		width: 150px;
		margin-left: -75px;
		font-size: 15px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li {
		font-size: 15px;
	}
	#filter {
		margin: 0;
	}
	body.fixed-menu #filter {
		left: auto;
	}
	#filter .more,
	#filter .less {
		right: 0;
	}
}


@media screen and (min-width: 1000px) and (max-width: 1280px) {
	[id^="grid-list"] > [class^="grid"].product .card .card_block {
		padding: 30px 7%;
	}
}


@media screen and (min-width: 1000px) and (max-width: 1200px) {
	[id^="grid-list"] > [class^="grid"].product .card .card_article {
		margin-top: 1.5em;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_lead {
		line-height: 1.75;
	}
}


@media screen and (min-width: 1000px) and (max-width: 1140px) {
	[id^="grid-list"] > [class^="grid"].product .card .card_block {
		padding: 25px 5%;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		font-size: 1.8rem;
		line-height: 1.1;
	}
}


@media screen and (min-width: 1000px) and (max-width: 1080px) {
	[id^="grid-list"] > [class^="grid"].product .card .card_nav {
		margin-top: 1em;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_copy {
		font-size: .95rem;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_lead {
		font-size: .75rem;
	}
	[id^="grid-list"] > [class^="grid"].product.seal .card .card_lead br {
		display: none;
	}
}


@media screen and (min-width: 1000px) and (max-width: 1024px) {
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		font-size: 1.7rem;
	}
}


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

	
	#grid-list,
	#grid-list-all {
		position: relative;
	}
	
	[id^="grid-list"] > [class^="grid"] {
		position: absolute;
		width: 33.33%;
		padding-top: 33.33%;
		
		transition: opacity 200ms ease-out;
	}
	[id^="grid-list"] > [class^="grid"].large {
		width: 66.66%;
		padding-top: 66.66%;
	}
	
	
	
	
	
	[id^="grid-list"] > [class^="grid"].product {
		width: 66.66%;
		padding-top: 66.66%;
	}
	[id^="grid-list"] > [class^="grid"].product .bg {
		position: absolute;
		display: block;
		left: 5px;
		top: 5px;
		right: 5px;
		bottom: 5px;
		overflow: hidden;
	}
	
	[id^="grid-list"] > [class^="grid"].product .ex {
		position: absolute;
		display: block;
		left: 5px;
		top: 5px;
		right: 5px;
		bottom: 5px;
		overflow: hidden;
		text-align: center;
	}
	[id^="grid-list"] > [class^="grid"].product .ex:before {
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
		background: #000;
		visibility: hidden;
	}
	
	[id^="grid-list"] > [class^="grid"].product div.group {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
		text-align: left;
	}
	
	[id^="grid-list"] > [class^="grid"].product header {
		padding: 0 20px 15px;
	}
	[id^="grid-list"] > [class^="grid"].product .lead {
		width: 160px;
		margin: 0 auto 10px;
		font-size: 13px;
		line-height: 1;
		color: #595959;
		text-align: center;
	}
	
	
	[id^="grid-list"] > [class^="grid"].product h2 {
		width: 160px;
		margin: 0 auto;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		background-position: 0 0;
		background-repeat: no-repeat;
		font-size: 0;
	}
	
	[id^="grid-list"] > [class^="grid"].product.coharu h2 {
		width: 75px;
		height: 21px;
		background-size: auto 21px;
	}
	[id^="grid-list"] > [class^="grid"].product.kitta h2 {
		width: 76px;
		height: 21px;
		background-size: auto 21px;
	}
	[id^="grid-list"] > [class^="grid"].product.masurie h2 {
		width: 105px;
		height: 21px;
		background-size: auto 21px;
	}
	[id^="grid-list"] > [class^="grid"].product.kiroku h2 {
		width: 125px;
		height: 18px;
		background-size: auto 18px;
	}
	[id^="grid-list"] > [class^="grid"].product.seal h2 {
		width: 157px;
		height: 40px;
		background-size: auto 40px;
	}
	[id^="grid-list"] > [class^="grid"].product.girly-tepra h2 {
		width: 149px;
		height: 20px;
		background-size: auto 20px;
	}
	[id^="grid-list"] > [class^="grid"].product.hiyori h2 {
		width: 68px;
		height: 21px;
		background-size: auto 21px;
	}
	
	
	
	
	
	
	[id^="grid-list"] > [class^="grid"].product article {
		margin: 0 20px;
	}
	[id^="grid-list"] > [class^="grid"].product nav {
		padding: 10px 20px 0 !important;
		font-size: 0;
	}
	[id^="grid-list"] > [class^="grid"].product article dt {
		display: inline;
		font-size: 13px;
		color: #595959;
		letter-spacing: -1px;
		line-height: 1.8;
		border-bottom: 2px solid #595959;
		
		display: none;
	}
	[id^="grid-list"] > [class^="grid"].product article dd {
		margin: 14px 0 0;
		font-size: 12px;
		line-height: 1.5;
		color: #595959;
		
		display: none;
	}
	[id^="grid-list"] > [class^="grid"].product article dd br {
		display: none;
	}
	[id^="grid-list"] > [class^="grid"].product article p strong {
		font-weight: normal;
		background: rgba(255,255,255,0.6);
	}
	[id^="grid-list"] > [class^="grid"].product article .note {
		margin: 10px 0 0;
		font-size: 11px;
	}
	[id^="grid-list"] > [class^="grid"].product article .price {
		margin: 10px 0 0;
		font-size: 11px;
		color: #595959;
		display: none;
	}
	
	[id^="grid-list"] > [class^="grid"].product nav {
	}
	[id^="grid-list"] > [class^="grid"].product nav:after {
		clear: both;
		content: "";
		display: block;
		visibility: hidden;
	}
	[id^="grid-list"] > [class^="grid"].product nav a {
		display: block;
		max-width: 160px;
		height: 32px;
		margin: 0 auto;
		color: #595959;
		line-height: 32px;
		font-size: 12px;
		text-align: center;
		background: #fafafa;
	}
	
	[id^="grid-list"] > [class^="grid"].product .card *,
	[id^="grid-list"] > [class^="grid"].product .card *::before,
	[id^="grid-list"] > [class^="grid"].product .card *::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	[id^="grid-list"] > [class^="grid"].product .card {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
		text-align: left;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_block {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 20px 5%;
		border: 3px solid transparent;
		background-color: #fff;
		color: #585a59;
		line-height: 1.5;
		text-decoration: none;
		text-align: center;
		-webkit-transition: border-color .3s ease-out 0s;
		transition: border-color .3s ease-out 0s;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_subtitle {
		display: none;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		width: 100%;
		height: auto;
		background: none;
		font-size: 1.8rem;
		line-height: 1.25;
		white-space: normal;
		text-indent: 0;
		overflow: visible;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_article {
		display: none;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_nav {
		margin-top: 1.5em;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_button {
		display: inline-block;
		padding: 6px 25px;
		background-color: #999;
		color: #fff;
		font-size: .8rem;
		-webkit-transition: background-color .3s ease-out 0s;
		transition: background-color .3s ease-out 0s;
	}
	
	[id^="grid-list"] > [class^="grid"].special img {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	
	
	
	
	[id^="grid-list"] > [class^="grid"] img {
		width: 100%;
		height: auto;
	}
	[id^="grid-list"] > [class^="grid"] > a {
		position: absolute;
		display: block;
		left: 5px;
		top: 5px;
		right: 5px;
		bottom: 5px;
		background: #fff;
		overflow: hidden;
		-webkit-tap-highlight-color: rgba(255,255,255,0);
	}
	
	[id^="grid-list"] > [class^="grid"] > a .overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		/*
		background: rgba(255,255,255,0.9);
		*/
		opacity: 0;
	}
	body.pc [id^="grid-list"] > [class^="grid"] > a:hover .overlay,
	[id^="grid-list"] > [class^="grid"] > a.touched .overlay {
		opacity: 1;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul {
		position: absolute;
		width: 100%;
		left: 50%;
		top: 50%;
		z-index: 20;
		transform: translate(-50%,-50%);
		display: none;
	}
	[id^="grid-list"] > [class^="grid"] > a.instagram .overlay ul {
		display: block;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li {
		text-align: center;
		color: #333;
		font-size: 9px;
		letter-spacing: -1px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li + li {
		margin-top: 3px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li:before {
		content: "#";
		margin-right: 3px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li + li + li + li + li + li {
		display: none;
	}
	
	
	
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		position: absolute;
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 12px;
		left: 0;
		top: 50%;
		z-index: 100;
		padding: 5px 0;
		margin: -6px 0 0;
		font-size: 10px;
		line-height: 12px;
		text-align: center;
		color: #333;
		white-space: nowrap;
		letter-spacing: -0.5px;
	}
	[id^="grid-list"] > [class^="grid"] > a.instagram .overlay span {
		color: #fafafa;
		background: #999;
		display: none;
	}
	
	
	
	[id^="grid-list"] > [class^="grid"] > a .overlay {
		background: none;
		overflow: hidden;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay i {
		position: absolute;
		display: block;
		width: 200%;
		height: 200%;
		left: -50%;
		top: -50%;
		z-index: 1;
		opacity: 0.5;
		background-size: 2500% auto;
		
		-webkit-filter: blur(10px);
	}
	
	[id^="grid-list"] > [class^="grid"] > a .overlay i.classicc {
		background-size: 200% auto;
	}
	
	
	
	
	#filter {
		position: relative;
		height: 47px;
		margin: 0 -5px;
		padding: 0 25px;
		z-index: 200;
		font-size: 0;
		text-align: center;
		overflow: hidden;
		
		transition: height 300ms ease-out;
	}
	body.fixed-menu #filter {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		z-index: 1000;
		top: 45px;
		left: 0;
		margin: 0;
		background: #fafafa;
	}
	body.fixed-menu #filter + main {
		padding-top: 47px;
	}
	
	
	
	
	#filter.show_product {
		position: relative;
		height: 18px;
		overflow: hidden;
		-ms-transition:     all 300ms 0s ease;
		-webkit-transition: all 300ms 0s ease;
		-moz-transition:    all 300ms 0s ease;
		transition:         all 300ms 0s ease;
	}
	#filter.show_product.open {
		height: auto;
		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	#filter.show_product > a {
		position: absolute;
		display: block;
		width: 16px;
		height: 10px;
		background: url(../img/arrow_menu_open.png) 50% 80% no-repeat;
		background-size: contain;
		margin: 0 20px;
		cursor: pointer;
		left: 0;
		top: 4px;
		-ms-transition:     all 300ms 0s ease;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	#filter.show_product.open > a {
		position: absolute;
		display: block;
		width: 16px;
		height: 10px;
		background: url(../img/arrow_menu_close.png) 50% 80% no-repeat;
		background-size: contain;
		margin: 0 20px;
		cursor: pointer;
		left: 0;
		top: 4px;
		-ms-transition:     all 300ms ease-out;
		-webkit-transition: all 300ms ease-out;
		-moz-transition:    all 300ms ease-out;
		transition:         all 300ms ease-out;
	}
	
	#filter ul {
		/*
		display: inline;
		*/
		font-size: 0;
		padding-bottom: 6px;
		margin-left: 13px;
	}
	#filter li {
		display: inline-block;
		height: 18px;
		margin-bottom: 4px;
		margin-right: 12px;
		line-height: 18px;
		white-space: nowrap;
	}
	/*
	#filter li + li {
		margin-left: 12px;
	}
	*/
	#filter li a {
		display: inline-block;
		line-height: 18px;
		font-size: 12px;
		color: #999;
	}
	#filter li a:before {
		content: "#";
		margin-right: 3px;
	}
	#filter li a.active {
		color: #000;
	}
	
	
	/*
	#filter .more {
		position: absolute;
		display: inline;
		line-height: 18px;
		font-size: 14px;
		margin-top: -5px;
	}
	#filter .more a {
		display: inline-block;
		margin-left: 12px;
		padding: 5px;
		color: #999;
		background: rgba(250,250,250,0.85);
	}
	
	
	#filter .less {
		display: block;
		width: 32px;
		height: 32px;
		margin: -2px auto 0;
		
		visibility: hidden;
	}
	#filter .less a {
		display: block;
		height: 32px;
		font-size: 0;
		background: url(../img/arrow_top_mini.png) 50% 50% no-repeat;
		background-size: 14px auto;
		
		opacity: 0.5;
	}
	*/
	


	#filter .more {
		position: absolute;
		display: block;
		line-height: 18px;
		font-size: 13px;
		top: 16px;
		right: 8px;
	}
	#filter .more a {
		display: inline-block;
		margin-left: 12px;
		padding: 5px;
		color: #999;
		background: rgba(250,250,250,0.85);
	}
	
	
	#filter .less {
		position: absolute;
		display: block;
		line-height: 18px;
		font-size: 13px;
		top: 16px;
		right: 8px;
		
		visibility: hidden;
	}
	#filter .less a {
		display: inline-block;
		margin-left: 12px;
		padding: 5px;
		color: #999;
		background: rgba(250,250,250,0.85);
	}
	
	
	

	body.expanded-filter #filter {
	}
	body.expanded-filter #filter ul {
	}
	body.expanded-filter #filter li {
		display: inline-block !important;
	}
	body.expanded-filter #filter .more {
		display: none !important;
	}
	body.expanded-filter #filter .less {
		visibility: visible;
	}
	
	body.expanded-check #filter ul {
		display: block !important;
	}
	
	
	
	
	
	#show-more {
		padding: 20px 0 10px;
		text-align: center;
		font-size: 16px;
		font-family: Futura, Arial, Helvetica, sans-serif;
	}
	#show-more a {
		display: inline-block;
		padding: 0 0 16px;
		background: url(../img/arrow_bottom_mini.png) 50% 100% no-repeat;
		background-size: 20px auto;
	}
	
	
	
	
	#instagram-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1100;
		background: rgba(0,0,0,0.9);
		opacity: 0;
		
		transition: all 300ms ease-out;
	}
	#instagram-popup {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1200;
	}
	#instagram-close {
		position: fixed;
		display: block;
		width: 30px;
		height: 30px;
		right: 10px;
		top: 10px;
		z-index: 1500;
		background: url(../img/icon_close.png) 50% 50% no-repeat;
		background-size: 16px auto;
		opacity: 0;
		
		transition: opacity 300ms ease-out;
	}
	
	#instagram-popup .inner {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1200;
		
		overflow:scroll;
		-webkit-overflow-scrolling:touch;
	}
	#instagram-popup iframe {
		display: block;
		
		/*
		width: 90% !important;
		margin-left: 5% !important;
		margin-right: 5% !important;
		margin-top: 50px !important;
		margin-bottom: 10px !important;
		
		width: calc(100% - 20px) !important;
		margin-left: calc(10px + 0px) !important;
		margin-right: calc(10px + 0px) !important;
		*/
		width: 380px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 50px !important;
		margin-bottom: 10px !important;
		
		border-radius: 0 !important;
		opacity: 0;
		
		overflow: scroll;
		
		transition: opacity 300ms ease-out;
	}
	#instagram-popup blockquote {
		visibility: hidden;
	}
	
	body.overlay {
		overflow: hidden;
	}
	body.overlay #instagram-overlay,
	body.overlay #instagram-close {
		opacity: 1;
	}
	#instagram-popup iframe.loaded {
		opacity: 1;
	}
	
	
	
	
	
}


@media screen and (min-width: 600px) and (max-width:999px) {
	[id^="grid-list"] > [class^="grid"].product {
		width: 66.66%;
		padding-top: 66.66%;
	}
	[id^="grid-list"] > [class^="grid"].product article dd {
		font-size: 14px;
	}
	[id^="grid-list"] > [class^="grid"].product article .price {
		margin-top: 15px;
		font-size: 13px;
	}
	[id^="grid-list"] > [class^="grid"].product article .note {
		margin-top: 15px;
		font-size: 13px;
	}
	[id^="grid-list"] > [class^="grid"].product nav {
		padding-top: 30px;
	}
	
	
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li,
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		font-size: 14px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		display: block;
		width: 100%;
		left: 0;
		margin-left: 0;
		text-align: center;
	}
	
}


@media screen and (min-width: 375px) and (max-width:599px) {
	[id^="grid-list"] > [class^="grid"].product article dd {
		font-size: 13px;
	}
	[id^="grid-list"] > [class^="grid"].product article .price {
		font-size: 12px;
	}
	[id^="grid-list"] > [class^="grid"].product article .note {
		font-size: 12px;
	}
	[id^="grid-list"] > [class^="grid"].product nav {
		padding-top: 20px;
	}
	
	[id^="grid-list"] > [class^="grid"] > a .overlay ul li,
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		font-size: 12px;
	}
	[id^="grid-list"] > [class^="grid"] > a .overlay span {
		width: 100%;
		left: 0;
		margin-left: 0;
		text-align: center;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		font-size: 1.6rem;
	}
}


@media screen and (max-width: 414px) {
	#instagram-popup iframe {
		width: 380px !important;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 375px) {
	#instagram-popup iframe {
		width: 340px !important;
	}
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		font-size: 1.2rem;
	}
}


@media screen and (max-width: 374px) {
	#filter li a {
		font-size: 11px;
	}
	#filter li {
		margin-right: 10px;
	}
	#instagram-popup iframe {
		width: 300px !important;
	}
}
@media screen and (max-width: 320px) {
	[id^="grid-list"] > [class^="grid"].product .card .card_title {
		font-size: 1rem;
	}
}