@charset "UTF-8";
/* Begin #ss-snapDetail styles */
#ss-snapDetail .block-goods-detail {
	-webkit-box-align: stretch;
	align-items: stretch;
}

#ss-snapDetail .pane-goods-right-side {
	display: flex;
	position: static;
	flex-direction: column;
	justify-content: space-between;
}

#ss-snapDetail .block-goods-detail--block {
	margin-top: 0px;
}

#ss-snapDetail .mini-staff-info-container {
	grid-template-columns: auto 1fr;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	margin-top: 0px;
	box-sizing: border-box;
	display: grid;
}

#ss-snapDetail .staff-profile-container img {
	width: 64px;
	max-width: 64px;
}

#ss-snapDetail .staff-profile-container {
	grid-column: 1/2;
	margin: 0 auto;
	grid-template-columns: 1fr;
	justify-items: center;
	text-decoration: none;
	gap: 10px;
	box-sizing: border-box;
	display: grid;
	width: 100%;
	height: 100%;
}

#ss-snapDetail .staff-profile-image {
	width: 40px;
	height: auto;
	max-width: 40px;
	border-radius: 100%;
	display: block;
	box-sizing: border-box;
}

#ss-snapDetail .mini-staff-info-text {
	margin: 0px;
}

#ss-snapDetail .block-goods-sales-detail-append {
	border-color: #E0E0E0;
	border-style: solid;
	border-width: 1px 0;
	padding-top: 16px;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

#ss-snapDetail .comment-section {
	margin-bottom: 24px;
}

#ss-snapDetail .snap-date {
	display: block;
	margin-bottom: 16px;
}

#ss-snapDetail .snap-item-list {
	gap: 10px;
	flex-flow: column nowrap;
	box-sizing: border-box;
	display: flex;
}

#ss-snapDetail .snap-header {
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ss-snapDetail .snap-item-container {
	grid-auto-flow: row dense;
	gap: 10px;
	box-sizing: border-box;
	display: grid;
}

#ss-snapDetail .snap-product-item {
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	flex-flow: row nowrap;
	box-sizing: border-box;
	display: flex;
}

#ss-snapDetail .snap-product-image {
	box-sizing: border-box;
	height: auto;
	border-radius: 10px;
}

#ss-snapDetail .snap-product-info {
	padding: 0;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing: border-box;
	height: auto;
	border-radius: 10px;
}

#ss-snapDetail .snap-product-name {
	padding: 0;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ss-snapDetail .snap-product-color {
	padding: 0;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ss-snapDetail .snap-product-size {
	padding: 0;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ss-snapDetail .block-top-title {
	width: 100%;
}

#ss-snapDetail .block-top-event {
	padding-left: 0;
	padding-right: 0;
}

#ss-snapDetail .block-top-title.block-top-title--left {
	text-align: left;
}

#ss-snapDetail .img-content {
	height: 100%;
	object-fit: cover;
}
/* End #ss-snapDetail styles */

/* Begin #ss-snapList styles */
#ss-snapList .block-filter--form .custom-search-form {
	justify-content: center;
	width: 100%;
}

#ss-snapList .block-filter--form .cmn-searchmenu .block-global-search--keyword {
	width: auto;
	flex: 1;
	max-width: calc(100% - 42px);
}

#ss-snapList .custom-search-button {
	flex: none;
	appearance: none;
	border: 0;
}

#ss-snapList .filter-checkbox-input {
	outline: initial;
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

#ss-snapList .custom-search-form {
	justify-content: flex-end;
}

#ss-snapList .block-genre-page--header {
	margin: 0 0 20px !important;
}

#ss-snapList .tag.active {
	/*
	 * (jp)
	 * SSQ 開発者の方は、タグが選択されたときの色やその他のプロパティを変更
	 * してください。青山開発者の方は編集の必要はありません。
	 *
	 * (en)
	 * For SSQ developers, please change the color and other properties when
	 * a tag is selected. For Aoyama developers, there is no need to edit.
	 */
	background-color: #222;
	color: #fff;
}

#ss-snapList .tag {
	/*
	 * (jp)
	 * SSQ開発者の方は、以下のプロパティのコメントを解除し、必要に応じて対応する
	 * プロパティにコメントを追加してください。Aoyama開発者の方は編集する必要はあ
	 * りません。
	 *
	 * (en)
	 * For SSQ developers, please uncomment the properties below and comment
	 * their counterpart properties as needed. For Aoyama developers, there is no
	 * need to edit.
	 */
	/** SSQ Begin */

	color: #222;
	border: 2px solid #0000;
	padding: 16px;
	font-weight: 700;

	/** SSQ End */
	/** Aoyama Begin */
	/*
	color: #00498f;
	border: 1px solid #00498f;
	padding: 5px;
	*/
	/** Aoyama End */
	background-color: #fff;
	display: inline-flex;
	margin: 0 10px 10px 0;
	border-radius: 5px;
	line-height: 1;
	text-decoration: none;
	min-height: 26px;
	vertical-align: top;
	align-items: center;
	font-size: 80%;
}

#ss-snapList .cmn-tabs {
	margin: 10px auto 20px;
	padding-top: 20px;
}

#ss-snapList .cmn-tabs__nav {
	padding: 0 20px;
	justify-content: flex-start;
}

#ss-snapList .cmn-tabs__wrap {
	margin-top: 40px;
}

#ss-snapList .block-thumbnail-t--goods-name.point-leader a {
	border-bottom: 0px;
}

#ss-snapList .cmn-tabs__wrap .img-content {
	height: 100%;
	width: 100%;
	background-color: #f5f5f6;
	object-fit: cover;
}

#ss-snapList .block-genre-page .block-thumbnail-t--empty {
	background-color: #f5f5f6;
}

/*
 * (jp)
 * SSQ 開発者の方は、以下のスタイルのコメントを解除してコンテナに適切な色を設定
 * してください。 Aoyama 開発者の方は編集する必要はありません。
 *
 * (en)
 * For SSQ developers, uncomment the style below to color the container
 * properly. For Aoyama developers, there is no need to edit.
 */

#ss-snapList .block-goods-list--narrowdown {
	background-color: #f6f7f7;
}

#ss-snapList .cmn-tabs__nav {
	padding: 0;
	gap: 30px;
	font-family: inherit;
}

#ss-snapList .cmn-tabs__nav::after {
	height: 0px;
}

#ss-snapList .cmn-tabs__nav li {
	background: white;
	position: relative;
	width: 103px;
}

#ss-snapList .cmn-tabs__nav li a.js-tabs-btn {
	color: black;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	gap: 16px;
}

#ss-snapList .cmn-tabs__nav li a.js-tabs-btn::after {
	content: "";
	border: none;
	background-color: white;
	display: block;
	width: 40px;
	height: 6px;
	border-radius: 9999px;
	font-weight: 700;
}

#ss-snapList .cmn-tabs__nav li a.js-tabs-btn.is-active::after {
	background-color: #222;
}

/* Begin #ss-snapDetail styles */
#ss-snapDetail .staff-profile-container {
/* End #ss-snapList styles */
	grid-auto-flow: column;
}

#ss-snapDetail .snap-item-container {
	grid-template-columns: 1fr 1fr;
}

#ss-snapDetail .snap-product-image {
	width: 30%;
}

#ss-snapDetail .snap-product-info {
	font-size: 11px;
	width: 70%;
}

#ss-snapDetail .snap-product-name {
	font-size: 11px;
}

#ss-snapDetail .snap-product-color {
	font-size: 11px;
}

#ss-snapDetail .snap-product-size {
	font-size: 11px;
}
/* End #ss-snapDetail styles */

/* Begin other specific styles */
/*
 * (jp)
 * SSQ開発者の方は、以下のスタイルのコメントを解除して表示位置を適切に調整してく
 * ださい。Aoyama開発者の方は編集する必要はありません。
 *
 * (en)
 * For SSQ developers, uncomment the style below to align the display properly.
 * For Aoyama developers, there is no need to edit.
 */

body > .wrapper > .pane-contents > .container {
	width: 1400px;
	min-width: 1400px;
	max-width: 1400px;
}

#ss-snapList {
	/*
	 * (jp)
	 * SSQ開発者の方は、スナップを5列表示するために幅を1400pxに設定してくださ
	 * い。Aoyama開発者の方は編集する必要はありません。
	 *
	 * (en)
	 * For SSQ developers, please set width to 1400px to display 5 columns of
	 * snaps. For Aoyama developers, there is no need to edit.
	 */
	width: 1400px;
	min-width: 1400px;
	max-width: 1400px;
}

#ss-snapList .pane-main {
	/*
	 * (jp)
	 * SSQ開発者の方は、スナップを5列表示するために幅を1130pxに設定してくださ
	 * い。Aoyama開発者の方は編集する必要はありません。
	 *
	 * (en)
	 * For SSQ developers, please set width to 1130px to display 5 columns of snaps.
	 * For Aoyama developers, there is no need to edit.
	 */
	width: 1130px;
	min-width: 1130px;
}

#ss-snapList .cmn-searchmenu .block-global-search {
	margin: 0px 20px 0px auto;
}

#ss-snapList .cmn-searchmenu + .block-goods-list--narrowdown {
	margin: 20px 0px 0px;
}

/**
 * Below are the styles from usr/firstview_genre.css
 */
#ss-snapList .block-goods-list--narrowdown {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 8px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 20px;
	margin-top: 80px;
	background-color: #fafafa;
}

#ss-snapList .block-goods-list--narrowdown + .block-goods-list--narrowdown {
	margin-top: 10px;
}

#ss-snapList .block-goods-list--narrowdown dt {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 134px;
	font-weight: bold;
}

#ss-snapList .block-goods-list--narrowdown dd {
	position: relative;
	overflow: hidden;
}

#ss-snapList .block-goods-list--narrowdown dd:has(.is-swiper) {
	padding: 0 40px;
}

#ss-snapList .block-goods-list--narrowdown-inner.swiper-horizontal {
	position: initial;
	width: 668px;
	overflow: hidden;
}

#ss-snapList .block-goods-list--narrowdown-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

#ss-snapList .block-goods-list--narrowdown .swiper-navigation {
	top: 50%;
	margin-top: -15px;
}

#ss-snapList .block-goods-list--narrowdown .swiper-navigation .carousel-button-prev,
#ss-snapList .block-goods-list--narrowdown .swiper-navigation .carousel-button-next {
	top: 0;
	-webkit-transform: translateY(0) translateZ(0);
	transform: translateY(0) translateZ(0);
}

/* ----商品一覧---- */
#ss-snapList .block-goods-list--items-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	padding-top: 40px;
	margin: 40px 0;
	border-top: 1px solid #e8e8e8;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 10px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 0;
	font-size: 14px;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items + dl.block-goods-list--sort-order-items {
	margin-left: 40px;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items > dt {
	display: block;
	font-weight: bold;
	white-space: nowrap;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--sort-order-items > dt {
	display: block;
	margin-right: 4px;
	font-weight: bold;
	white-space: nowrap;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items > dd, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items > dd {
	display: block;
	margin: 0;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li {
	margin-right: 20px;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li a, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li a {
	position: relative;
	display: block;
	padding-left: 21px;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li.active, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li.active {
	position: relative;
	padding-left: 21px;
	color: #081f2c;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li.active::before, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li.active::before {
	position: absolute;
	top: calc(50% - 8.5px);
	left: 0;
	z-index: 1;
	width: 17px;
	height: 17px;
	content: "";
	background: #fff;
	border: 1px solid #bbb;
	border-radius: 50%;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li.active::after, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li.active::after {
	position: absolute;
	top: calc(50% - 4.5px);
	left: 4px;
	z-index: 2;
	width: 9px;
	height: 9px;
	content: "";
	background: #444;
	border-radius: 50%;
}

#ss-snapList .block-goods-list--items-wrap dl.block-goods-list--display-style-items ul.block-goods-list--display-style-items-list > li a::before, .block-goods-list--items-wrap dl.block-goods-list--sort-order-items ul.block-goods-list--sort-order-items-list > li a::before {
	position: absolute;
	top: calc(50% - 8.5px);
	left: 0;
	z-index: 1;
	width: 17px;
	height: 17px;
	content: "";
	background: #fff;
	border: 1px solid #bbb;
	border-radius: 50%;
}

/* ここまで usr/block.css のコピー */
#ss-snapList .wrapper .pane-topic-path {
	margin-top: 0;
}

/* Overrided styles for snap list only*/
#ss-snapList .block-thumbnail-t .block-thumbnail-t--items {
	width: 1200px;
}

#ss-snapList .block-filter--form .cmn-searchmenu .block-global-search {
	width: 100%;
}

#ss-snapList .block-global-search {
	justify-content: flex-end;
}

#ss-snapList .block-global-search--keyword {
	flex: none;
	width: 202px;
	height: 34px;
}

#ss-snapList .custom-search-button {
	height: 34px;
}

#ss-snapList .block-genre-page .block-thumbnail-t--goods-description--empty {
	margin-top: 5px;
}

#ss-snapList .cmn-tabs__wrap .block-thumbnail-t--goods-name {
	margin-top: 5px;
}

#ss-snapList .cmn-tabs__wrap .block-thumbnail-t--goods-description {
	margin-top: 5px;
}

/*
 * (jp)
 * SSQ 開発者の方は、以下のスタイルのコメントを解除してコンテナに適切な色を設定
 * してください。 Aoyama 開発者の方は編集する必要はありません。
 *
 * (en)
 * For SSQ developers, uncomment the style below to color the container
 * properly. For Aoyama developers, there is no need to edit.
 */

#ss-snapList .block-goods-list--narrowdown {
	background-color: #f6f7f7;
}

#ss-snapList .cmn-tabs__nav li a.js-tabs-btn {
	padding: 0px;
}


/* End other specific styles */