﻿@charset "UTF-8";
:root {
  /* 各レイアウト用要素幅 */
  --responsive-usr-ranking-r--item-width: 295px;
  --responsive-usr-thumbnail-t--item-width: 245px;
	
  /* コンテナ要素幅 */
  --responsive-sys-container-width: 1440px;
  --responsive-sys-content-header-width: 23%;
  --responsive-sys-content-goods-width: 1280px;
  --responsive-sys-content-mypage-width: 1280px;
  --responsive-sys-content-login-width: 1240px;

  /* ボタン幅 */
  --responsive-sys-button-width: 450px;
  --responsive-sys-snssync-button-width: 355px;

  /* 枠色 */
  --responsive-sys-border-color-gray-primary: #c8c8c8;
  --responsive-sys-border-color-gray-tertiary: #e5e5e5;
  --responsive-sys-border-color-gray-secondary: #dcdcdc;

  /* 背景色 */
  /*--responsive-sys-content-header-background-color: #f8f8f8;*/
  --responsive-sys-content-header-background-color: #F5F5F5;
  --main-highlight-background-color: #D00F31;
}
/* ヘッダ（レスポンシブ） ファーストビュー用 */

/*レスポンシブ要素補正用常時読み込みCSS*/

/*usr/sb_block.css のコピー ここから */

/*.block-header-nav .block-headernav--item-list > li {
  width: inherit;
  height: inherit;
}*/

/*.block-headernav--item-boookmark a {
  display: block;
  width: 40px;
  height: 40px;
  background: url(../../img/usr/common/ico_bookmark.png) center center / auto auto no-repeat;
  font-size: 0;
}*/

/* ここまでusr/sb_block.css  のコピー */

/*usr/sb_block.css のコピー ここから */

/*.block-header-nav .block-headernav--item-list.right-list {
  margin-right: 0;
  margin-left: auto;
}*/

/* ここまでusr/sb_block.css  のコピー */

@media screen and (min-width: 960px) {
  /*sys/responsive_base_misc.css のコピー ここから */

  /* ----表示・非表示---- */

  .hidden-fb {
    display: none !important;
  }

  /* ここまでsys/responsive_base_misc.css のコピー */

  /*sys/responsive_base_form.css のコピー ここから */

  /* ----入力フォームボタン---- */

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    padding: 4px;
    border: 1px solid #ccc;
  }

/*  input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
  }*/

  /* ----ボタン---- */

  .btn {
    display: inline-block;
    margin: 0;
    padding: 4px 10px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
  }

  /* ここまでsys/responsive_base_form.css のコピー */

  /* usr/responsive_layout.css のコピー ここから */

  .pane-header + .pane-globalnav + .pane-contents {
    padding-top: 162px;
  }

  .pane-globalnav {
    position: fixed;
    z-index: 9999;
    top: 112px;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #f5f5f5;
    color: #000;
  }

  /* usr/responsive_layout.css のコピー ここまで */

  /* usr/responsive_block.css のコピー ここから */
  /*ヘッダー*/
	#header .container {
		gap: 20px clamp(20px, 2.0vw, 30px);
		box-sizing: border-box;
		padding-bottom: 0;
	}
	.block-header-logo {
		order: 1;
		flex: 0 0 clamp(252px, 27%, 310px);
	}
	.block-header-logo a {
		width: clamp(252px, 26.25vw, 310px);
	}
	.block-global-search {
		order: 2;
		width: clamp(334px, 37.5vw, 670px);
		max-width: 670px;
		margin-left: auto;
		padding: 0;
	}
	.pane-header.at-login .block-header-nav {
		flex: 0 0 200px;
	}
	.block-global-category {
		order: 4;
		width: 100%;
		flex: 1 1 100%;
		position: relative;
	}
	.block-global-category > ul > li > a {
		/*font-size: 1.6rem;*/
		font-size: clamp(1.3rem, 1vw + 0.34rem, 1.6rem);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.02em;
		padding: 0 2px;
		display: block;
		position: relative;
	}
	#header .block-globalnav-menu {
		display: none;
	}
  /* グローバルナビ */

  .pane-header {
    box-shadow: none;
  }

  .pane-globalnav {
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  }

  ul.block-globalnav--item-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  ul.block-globalnav--item-list > li > a {
    display: block;
    padding: 15px 36px;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
  }

  ul.block-globalnav--item-list > li.js-animation-megamenu-hover > a {
    position: relative;
    padding-right: 52px;
    cursor: pointer;
  }

  ul.block-globalnav--item-list > li.js-animation-megamenu-hover > a::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 6px);
    right: 36px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    transition: all 0.3s;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }

  ul.block-globalnav--item-list > li.js-animation-megamenu-hover:hover > a::after {
    top: calc(50% - 2px);
    transform: rotate(225deg);
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu {
    display: none;
    position: absolute;
    z-index: 999;
    top: 50px;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-globalnav-menu--item-frame {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 1480px;
    max-width: calc(100% - 17px);
    margin: 0 auto;
    padding: 30px 0 30px 40px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-globalnav-menu--item-frame .block-globalnav-menu--item {
    width: 200px;
    margin-right: 40px;
    margin-bottom: 20px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-globalnav-menu--item-link {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 16px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-globalnav-menu--item-link .block-globalnav-menu--item-image {
    width: 56px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-globalnav-menu--item-link .block-globalnav-menu--item-image img {
    width: 100%;
    vertical-align: top;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-globalnav-menu--item-link .block-globalnav-menu--item-text {
    width: 130px;
    margin-left: 14px;
    font-size: 16px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-dynamic-category--row {
    padding: 6px 0;
    font-size: 13px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-dynamic-category--row img {
    display: none;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-dynamic-genre--row {
    padding: 8px 0;
    font-size: 13px;
  }

  ul.block-globalnav--item-list > li .block-globalnav-menu .block-dynamic-genre--row img {
    display: none;
  }
	.block-header-nav {
		order: 3;
		flex: 0 0 clamp(245px, 25.5vw, 280px);
		margin: 0;
	}
	.pane-header.at-login .block-header-nav {
		flex: 0 0 200px;
	}
	.block-headernav--item-list {
		width: 100%;
	}

	.block-headernav--item-list li.block-headernav--item-cart {
		width: 50px;
	}
	.block-headernav--item-list li.block-headernav--item-menu {
		display: none;
	}
	.block-headernav--item-list li a {
		padding-top: clamp(38px, 3.95vw, 50px);
	}
	.block-headernav--item-list li span {
		font-size: clamp(1.0rem, 1vw + 0.04rem, 1.1rem);
	}
	.block-headernav--item-list li.block-headernav--item-login a,
	.block-headernav--item-list li.block-headernav--item-entry a,
	.block-headernav--item-list li.block-headernav--item-cart a,
	.block-headernav--item-list li.block-headernav--item-boookmark a,
	.block-headernav--item-list li.block-headernav--item-mypage a {
		background-position: center clamp(6px, 0.625vw, 11px);
		background-size: clamp(32px, 3.33vw, 40px);
	}
	
	.block-event-page--goods.is-filter,
	.block-category-list--goods.is-filter,
	.block-genre-page--goods.is-filter,
	.block-goosearch-goods-list.is-filter {
		display: grid;
		grid-template-columns: clamp(200px, 20.83vw, 300px) 1fr;
		grid-template-rows: auto auto auto auto;
		gap: 0 40px;
	}
	.block-event-page--goods.is-filter .block-goods-list--params,
	.block-category-list--goods.is-filter .block-goods-list--params,
	.block-genre-page--goods.is-filter .block-goods-list--params,
	.block-goosearch-goods-list.is-filter .block-goods-list--params {
		order: 11;
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.block-event-page--goods.is-filter .block-filter,
	.block-category-list--goods.is-filter .block-filter,
	.block-genre-page--goods.is-filter .block-filter,
	.block-goosearch-goods-list.is-filter .block-filter {
		order: 21;
		max-width: 300px;
		grid-column: 1;
		grid-row: 2 / 6;
		background-color: #F5F5F5;
	}
	.block-event-page--goods.is-filter .block-goods-list-naviframe--top.block-goods-list-naviframe,
	.block-category-list--goods.is-filter .block-goods-list-naviframe--top.block-goods-list-naviframe,
	.block-genre-page--goods.is-filter .block-goods-list-naviframe--top.block-goods-list-naviframe,
	.block-goosearch-goods-list.is-filter .block-goods-list-naviframe--top.block-goods-list-naviframe {
		order: 31;
		grid-column: 2;
		margin: 0;
	}
	.block-event-page--goods.is-filter .block-thumbnail-t,
	.block-category-list--goods.is-filter .block-thumbnail-t,
	.block-genre-page--goods.is-filter .block-thumbnail-t,
	.block-event-page--goods.is-filter .block-pickup-list-p,
	.block-goosearch-goods-list.is-filter .block-thumbnail-t {
		order: 41;
		grid-column: 2;
	}
	.block-event-page--goods.is-filter .block-thumbnail-t .block-thumbnail-t--items,
	.block-category-list--goods.is-filter .block-thumbnail-t .block-thumbnail-t--items,
	.block-genre-page--goods.is-filter .block-thumbnail-t .block-thumbnail-t--items,
	.block-goosearch-goods-list.is-filter .block-thumbnail-t .block-thumbnail-t--items {
		padding-left: 0;
	}
	.block-event-page--goods.is-filter .block-goods-list-naviframe--bottom.block-goods-list-naviframe,
	.block-category-list--goods.is-filter .block-goods-list-naviframe--bottom.block-goods-list-naviframe,
	.block-genre-page--goods.is-filter .block-goods-list-naviframe--bottom.block-goods-list-naviframe,
	.block-goosearch-goods-list.is-filter .block-goods-list-naviframe--bottom.block-goods-list-naviframe {
		order: 51;
		grid-column: 2;
	}
	.block-event-page--goods.is-filter .block-thumbnail-t .block-thumbnail-t--item,
	.block-category-list--goods.is-filter .block-thumbnail-t .block-thumbnail-t--item,
	.block-genre-page--goods.is-filter .block-thumbnail-t .block-thumbnail-t--item,
	.block-goosearch-goods-list.is-filter .block-thumbnail-t .block-thumbnail-t--item {
		width: calc((100% - 33px * 3) / 4);
		margin: 0 33px 40px 0;
	}
	.block-event-page--goods.is-filter .block-thumbnail-t .block-thumbnail-t--item:nth-child(4n),
	.block-category-list--goods.is-filter .block-thumbnail-t .block-thumbnail-t--item:nth-child(4n),
	.block-genre-page--goods.is-filter .block-thumbnail-t .block-thumbnail-t--item:nth-child(4n),
	.block-goosearch-goods-list.is-filter .block-thumbnail-t .block-thumbnail-t--item:nth-child(4n) {
		margin-right: 0;
	}
  /* usr/responsive_block.css のコピー ここまで */
}

@media screen and (max-width: 959px) {
  /* ----表示・非表示---- */

  .hidden-sb {
    display: none !important;
  }
}
@media screen and (min-width: 1550px) {
	#header .container,
	.page-genre .block-topic-path,
	.page-category .block-topic-path,
	.page-goods .block-topic-path,
	.page-cart .block-accessory-list--list {
		padding-left: 0;
		padding-right: 0;
	}
	.block-top-title,
	.block-top-event-title,
	.block-header-information .container,
	.block-cart--body,
	.block-recent-item--header,
	.block-cart-recent-item--header,
	.block-top-lightningrecommend--header,
	.block-ranking-lightningrecommend--header,
	.block-top-ranking--tab-wrap,
	.block-top-ranking--tab-box,
	.block-recent-item .block-thumbnail-h,
	.block-recent-item--header,
	.page-cart h2.block-accessory-list--name {
		margin-left: auto;
		margin-right: auto;
	}
}