@charset "UTF-8";

/* トップページ（ＰＣ） ファーストビュー用 */

/* sys/base_misc.css のコピー ここから */

.img-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-center img {
  flex-shrink: 0;
  text-align: center;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* ここまで sys/base_misc.css のコピー */

/* sys/layout.css のコピー ここから */

.container {
  width: 1200px;
  margin: 0 auto;
}

.pane-header .container {
  display: flex;
  align-items: center;
  height: 90px;
}

.pane-globalnav {
  width: 100%;
}

.pane-contents {
  min-height: 600px;
}

.pane-contents .container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  /* IE11 */
  display: -ms-grid;
  -ms-grid-columns: auto 1fr;
  -ms-grid-rows: auto 1fr;
}

.pane-left-menu {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  /* IE11 */
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  width: 240px;
  margin: 30px 60px 0 0;
}

.pane-main {
  display: block;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  width: 100%;
}

/* ここまで sys/layout.css のコピー */

/* sys/block_common.css のコピー ここから */

/* ----左メニューブロック共通---- */

.pane-left-menu .pane-block--title {
  font-size: 16px;
  border-top: #444 1px solid;
  padding: 16px 0;
  font-weight: bold;
  margin-bottom: 0;
}

.pane-block--title {
  margin: 20px 0;
  font-size: 26px;
  font-weight: normal;
}

/* ここまで sys/block_common.css のコピー */

/* sys/block_goods.css のコピー ここから */

/* ----トップページイベント表示---- */

.block-top-event--header {
  /* font-size: 28px;
  text-align: center;
  border-top: #444 2px solid;
  padding: 19px 0 30px; */
}

/* ----商品一覧画面：サムネイル：block-thumbnail-t---- */

.block-thumbnail-t li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.block-thumbnail-t--goods {
  width: 200px;
  margin-left: 33px;
}

.block-thumbnail-t--goods:first-of-type {
  margin-left: 0;
}

.block-thumbnail-t--goods-image figure {
  background: #f5f5f5;
  width: 200px;
  height: 200px;
}

.block-thumbnail-t--goods a {
  color: #000;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.block-thumbnail-t--goods-description {
  margin-top: 20px;
}

.block-thumbnail-t--goods .price {
  font-weight: bold;
}

.block-thumbnail-t--goods .price,
.block-thumbnail-t--goods .net-price,
.block-thumbnail-t--goods .default-price,
.block-thumbnail-t--goods .exchange-price,
.block-thumbnail-t--goods .block-exchange-price--rate-dt {
  text-align: right;
}

.block-thumbnail-t--scomment {
  color: #cc3302;
}

/* ----カテゴリーツリー---- */

.block-category-tree--item__open,
.block-category-tree--item {
  border-top: #eee 1px solid;
}

.block-category-tree--item__open a,
.block-category-tree--item a,
.block-category-tree--item>span {
  display: flex;
  align-items: center;
  width: 100%;
  height: 43px;
}

.block-category-tree--image {
  width: 43px;
  height: 43px;
  margin-right: 9px;
}

/* ----ジャンルツリー---- */

.block-genre-tree--item__open,
.block-genre-tree--item {
  border-top: #eee 1px solid;
}

.block-genre-tree--item__open a,
.block-genre-tree--item a,
.block-genre-tree--item>span {
  display: flex;
  align-items: center;
  height: 43px;
}

.block-genre-tree--image {
  width: 43px;
  height: 43px;
  margin-right: 9px;
}

/* ここまで sys/block_goods.css のコピー */

/* ここまで usr/block.css のコピー */

/* ----トップページ本文---- */

.block-top-body--body {
  /* margin-top: 40px;
  width: 900px;
  height: 390px; */
}

/* ここまで usr/block.css のコピー */

.page-top .pane-contents {
  padding-bottom: 0;
}

.page-top .pane-main {
  overflow: hidden;
}

.page-top .pane-main>*:not(.block-top-body) {
  max-width: 1200px;
  margin: 0 auto;
}

.page-top .pane-main>*.block-top-topic {
  width: 100%;
  max-width: 100%;
  margin: 100px auto 0;
}

#block_of_top_body {
  width: 100%;
  margin: 0 auto;
}

.block-top-body--items a {
  display: block;
}

.block-top-body--items a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.block-top-body--body {
  margin: 0 auto;
}

/*予備TEMPLATE読み込みパーツ*/

.block-menu-box--list {
  padding: 0 10px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 30px;
}

.block-menu-box--item {
  width: calc((100% / 2) - (30px / 2));
  padding: 29px 30px 30px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.block-menu-box--link {
  display: block;
  transition: 0.3s;
}

.block-menu-box--link:hover {}

.block-menu-box--body {
  margin: 29px auto 0;
  display: flex;
  gap: 30px;
}

.block-menu-box--img {
  width: 200px;
  flex-shrink: 0;
}

.block-menu-box--heading {
  padding: 0 0 17px 26px;
  margin: 0;
  font-size: 26px;
  position: relative;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.block-menu-box--heading::before {
  content: '';
  display: block;
  width: 8px;
  height: 26px;
  background: var(--font-color-red);
  border-radius: 4px;
  position: absolute;
  top: 9px;
  left: 0;
}

.block-menu-box--heading::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: url(../../img/usr/common/border_red.png) repeat-x center;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.block-menu-box--desc {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
}

.block-menu-box--txt {
  line-height: 1.73;
}

.block-menu-box--icons {
  margin: 13px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.block-menu-box--icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 11px 5px;
  border: 1px solid var(--font-color-red);
  border-radius: 2px;
  line-height: 1;
  white-space: nowrap;
  font-size: 13px;
  color: var(--font-color-red);
  min-height: 26px;
}

.block-menu-box--inner {
  margin: 60px auto 0;
}

.block-menu-box--price {
  padding: 10px 0 5px;
  margin-top: auto;
  font-weight: bold;
  font-size: 24px;
}

.block-menu-box--price>.yenTxt {
  font-size: 18px;
}

.block-menu-box--price>.taxTxt {
  font-size: 14px;
}

/*トピック調整*/

.block-top-topic {
  padding: 39px 0 80px;
  background: #fff;
}

.block-top-topic--header {
  max-width: 1200px;
  padding: 0 0 13px 26px;
  margin: 0 auto 0;
  position: relative;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 0.2em;
}

.block-top-topic--header::before {
  content: '';
  display: block;
  width: 8px;
  height: 24px;
  background: var(--font-color-red);
  border-radius: 4px;
  position: absolute;
  top: 9px;
  left: 0;
}

.block-top-topic--header::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: url(../../img/usr/common/border_red.png) repeat-x center;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: 0;
}

.block-top-topic--body {
  max-width: 1200px;
  padding: 29px 0 0;
  margin: 0 auto 0;
  position: relative;
}

.block-top-topic--items>li {
  padding: 12px 0 11px;
  margin: 0;
  position: relative;
  font-size: 16px;
}

.block-top-topic--items>li>a>dl,
.block-top-topic--items>li>dl {
  display: flex;
  gap: 20px 20px;
}

.block-top-topic--items>li>a>dl>dt,
.block-top-topic--items>li>dl>dt {
  width: 140px;
  padding: 0;
  margin: 0;
}

.block-top-topic--items>li>a>dl>dd,
.block-top-topic--items>li>dl>dd {
  padding: 0;
  margin: 0;
}

.block-top-topic--items>li::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: url(../../img/usr/common/border_gray.png) repeat-x center;
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  bottom: 0;
}

.block-top-topic--next-page {
  position: absolute;
  top: -22px;
  transform: translateY(-100%);
  right: 29px;
  text-align: right;
  margin: 0 0 0;
  font-size: 14px;
}

.block-top-topic--next-page a {
  color: var(--font-color-red);
  position: relative;
}

.block-top-topic--next-page a::before {
  content: '';
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  background: url(../../img/usr/common/icon_circle_arrow_red.png) no-repeat center center/contain;
  right: -10px;
  transform: translate(100%, -50%) translateY(1px);
  top: 50%;
  bottom: auto;
}

/*# sourceMappingURL=firstview_toppage.css.map */