@charset "UTF-8";
/*//////////////////////////////////////////////////

Title : _firstview.css
For   : "Canal 4℃ coordinate list" styles of the site

Created       : 2021-11-02
Last Modified : 2021-11-02

==========================================

Content

    1. list

//////////////////////////////////////////////////*/
/*
==============================================================================================
																			1. list
==============================================================================================
*/
.main-container.__coordinateList-page {
  width: 100%;
}

.main-container.__coordinateList-page .breadcrumb {
  padding: 0 calc(15* (100vw / 375));
  line-height: 1;
}

.main-container.__coordinateList-page .breadcrumb ul {
  font-size: calc(10* (100vw / 375));
}

.main-container.__coordinateList-page .breadcrumb ul li,
.main-container.__coordinateList-page .breadcrumb ul a {
  display: inline-block;
}

.main-container.__coordinateList-page .coordinate__heading {
  margin-top: calc(45* (100vw / 375));
  text-align: center;
}

.main-container.__coordinateList-page .coordinate__heading .coordinate__title {
  font-size: calc(24* (100vw / 375));
  font-family: var(--font-title);
  letter-spacing: 0.075em;
  line-height: 1;
}

.main-container.__coordinateList-page .coordinate__tag {
  margin-top: calc(10* (100vw / 375));
}
.main-container.__coordinateList-page .coordinate__tag ul{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0 calc(10* (100vw / 375));
}
.main-container.__coordinateList-page .coordinate__tag ul li {
  /* display: inline-block; */
  /* color: #096aa7; */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', Meiryo, sans-serif;
  font-size: 1.2rem;
  color: var(--color-coodrinate-tag);
  letter-spacing: 0.075em;
  line-height: 1;
}

/* .main-container.__coordinateList-page .coordinate__tag ul li:not(:nth-of-type(1)) {
  margin-right: calc(10* (100vw / 375));
} */

.main-container.__coordinateList-page .coordinate__wrapper {
  margin-top: calc(30* (100vw / 375));
}

.main-container.__coordinateList-page .coordinate__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 calc(15* (100vw / 375));
}

.main-container.__coordinateList-page .coordinate__block--top {
  margin-top: calc(20* (100vw / 375));
}

.main-container.__coordinateList-page .coordinate__block--history {
  display: block;
  padding: initial;
}

.main-container.__coordinateList-page .coordinate__unit {
  width: calc(170* (100vw / 375));
}

.main-container.__coordinateList-page .coordinate__unit:nth-of-type(even) {
  margin-left: calc(5* (100vw / 375));
}

.main-container.__coordinateList-page .coordinate__unit:nth-of-type(n + 3) {
  margin-top: calc(30* (100vw / 375));
}

.main-container.__coordinateList-page .coordinate__description {
  margin-top: calc(15* (100vw / 375));
  line-height: 1.83333;
}

.main-container.__coordinateList-page .coordinate__description .staffname {
  color: var(--color-light);
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.main-container.__coordinateList-page #pagination.pagination__wrapper {
  padding: 0 calc(15* (100vw / 375));
}

.main-container.__coordinateList-page #pagination.pagination__wrapper--upper .listPager {
  display: none;
}

.main-container.__coordinateList-page #pagination.pagination__wrapper--lower {
  margin: calc(60* (100vw / 375)) auto calc(110* (100vw / 375));
}

.main-container.__coordinateList-page #pagination.pagination__wrapper--lower .item_num {
  display: none;
}

.main-container.__coordinateList-page #pagination .item_num {
  font-family: var(--brandName-font);
  font-size: calc(16* (100vw / 375));
  line-height: 1;
}

.main-container.__coordinateList-page #pagination .listPager ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: calc(14* (100vw / 375));
  font-family: quasimoda, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.075em;
  text-align: center;
}

.main-container.__coordinateList-page #pagination .listPager ul li.num {
  display: inline-block;
  width: calc(24* (100vw / 375));
  margin: 0 calc(15* (100vw / 375));
  padding-bottom: calc(10* (100vw / 375));
  border-bottom: 1px solid var(--color-normal);
}

.main-container.__coordinateList-page #pagination .listPager ul li.num.current {
  /* color: #096AA7;
  border-bottom: 1px solid #096AA7; */
  color: var(--color-coodrinate-tag);
  border-bottom: 1px solid var(--color-coodrinate-tag);
}

.main-container.__coordinateList-page #pagination .listPager ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.main-container.__coordinateList-page #pagination .listPager ul li.prev, .main-container.__coordinateList-page #pagination .listPager ul li.next {
  width: calc(10* (100vw / 375));
  height: calc(20* (100vw / 375));
  background-size: contain;
  background-repeat: no-repeat;
}

.main-container.__coordinateList-page #pagination .listPager ul li.prev {
  margin-right: calc(30* (100vw / 375));
  background-image: url(/Contents/ImagesPkg/top/Canal/pager-arrpw-prev.svg);
}

.main-container.__coordinateList-page #pagination .listPager ul li.next {
  margin-left: calc(30* (100vw / 375));
  background-image: url(/Contents/ImagesPkg/top/Canal/pager-arrpw-next.svg);
}

.main-container.__coordinateList-page #history {
  padding: 0 0 calc(120* (100vw / 375));
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(var(--bg-light)));
  background: linear-gradient(to bottom, #fff 0%, var(--bg-light) 100%);
}

.main-container.__coordinateList-page .history__wrapper .ttlArea {
  text-align: center;
}

.main-container.__coordinateList-page .history__wrapper .ttlArea .section-ttl-jp {
  font-size: calc(18* (100vw / 375));
}

.main-container.__coordinateList-page .history__wrapper .cardUnit-history {
  margin-top: calc(45* (100vw / 375));
  overflow-x: auto;
}

.main-container.__coordinateList-page .history__wrapper .card-history {
  width: calc(140* (100vw / 375));
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.main-container.__coordinateList-page .history__wrapper .card-history:not(:nth-of-type(1)) {
  margin-left: calc(20* (100vw / 375));
}

.main-container.__coordinateList-page .history__wrapper .itemList_textarea {
  margin-top: calc(5* (100vw / 375));
  font-size: calc(11* (100vw / 375));
  font-style: normal;
  font-weight: 400;
  line-height: 1.81818;
  letter-spacing: 0.05em;
}

.main-container.__coordinateList-page .history__wrapper .itemList_textarea .brandName {
  display: none;
}

.main-container.__coordinateList-page .history__wrapper .itemList_textarea .itemName {
  margin-top: calc(10* (100vw / 375));
}

.main-container.__coordinateList-page .history__wrapper .itemList_textarea .priceArea {
  /* color: var(--color-light);
  font-family: quasimoda, sans-serif; */
  color: var(--color-coordinateDetail-price);
  font-family: var(--font-coordinateDetail-price);
}