@charset "UTF-8";

/* ================================================
共通設定
================================================ */
img {
  width: 100%;
  height: auto;
}

.u-hover {
  transition: .3s;
}

@media (any-hover: hover) {
  .u-hover:hover {
    opacity: .8;
  }
}

/* ================================================
余白
================================================ */
.u-mt-20 {
  margin-top: 2rem;
}

/* ================================================
テキスト・フォント
================================================ */
.u-tt--light {
  font-family: "TTCommons-Light", sans-serif;
  font-size: 110%;
  line-height: 1.5;
}

.u-tt--regular {
  font-family: "TTCommons-Regular", sans-serif;
  font-size: 110%;
  line-height: 1.5;
}

.u-tt--medium {
  font-family: "TTCommons-Medium", sans-serif;
  font-size: 110%;
  line-height: 1.5;
}

.u-text--center {
  text-align: center;
}

.u-text--right {
  text-align: right;
}

.u-text-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1em;
  transition: .2s;
}

@media (any-hover: hover) {
  .u-text-link:hover {
    border-bottom: 1px solid transparent;
  }
}

.u-text-note {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

/* ================================================
セクション
================================================ */
.l-wrapper {
  position: relative;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.4rem;
  font-weight: normal;
  color: #000030;
}

.l-main {
  max-width: 1000px;
  margin: auto;
}

.l-container {
  padding: 6rem 0 10rem;
  background-color: #fff;
}

.c-box-narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* コンテンツ */
.itemContent {
  padding: 0 3rem;
}

.itemContent + .itemContent {
  margin-top: 12rem;
}

@media screen and (max-width: 767px) {
  .l-container {
    padding: 4rem 1.5rem 8rem;
  }

  .itemContent {
    padding: 0;
  }

  .itemContent + .itemContent {
    margin-top: 8rem;
  }
}

/* ================================================
リード文
================================================ */
.topBox {
  padding-bottom: 9rem;
}

.leadBox {
  margin-bottom: 3rem;
}

.leadBox__text {
  font-size: 1.6rem;
  line-height: 1.875;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .topBox {
    padding-bottom: 5.6rem;
  }

  .leadBox {
    margin-bottom: 4rem;
  }

  .leadBox__text {
    font-size: 1.4rem;
  }
}

/* ================================================
プロフィール
================================================ */
.c-grid-profile {
  border: 2px solid #DEE2E3;
  padding: 3rem;
  display: grid;
  grid-template-areas: "image title" "image text";
  grid-template-columns: 120px 1fr;
  column-gap: 2rem;
  row-gap: 1.6rem;
}

.c-grid-profile-2 {
  border: 2px solid #DEE2E3;
  padding: 3rem;
  display: grid;
  grid-template-areas: "image text" "image title";
  grid-template-columns: 120px 1fr;
  column-gap: 2rem;
  row-gap: 1rem;
}

.c-grid-profile__img {
  grid-area: image;
}

.c-grid-profile__title {
  grid-area: title;
}

.c-grid-profile__text {
  grid-area: text;
  font-size: 1.4rem;
}

.c-grid-profile__title .staff-name {
  font-size: 1.8rem;
  font-weight: 600;
}

.c-grid-profile__title .staff-name--en {
  margin-left: 1em;
}

.c-grid-profile__title .katagaki {
  font-size: 1.2rem;
}


@media screen and (max-width: 767px) {
  .c-grid-profile {
    grid-template-areas: "image title" "text text";
    grid-template-columns: 100px 1fr;
    padding: 2rem;
  }

  .c-grid-profile__title .staff-name {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .c-grid-profile__title .staff-name--en {
    margin-left: 0;
  }

  .c-grid-profile__title .katagaki {
    font-size: 1.2rem;
  }

  .c-grid-profile-2 {
    padding: 2rem;
    grid-template-areas: "text text" "image title";
    grid-template-columns: 5rem 1fr;
    column-gap: 2rem;
    row-gap: 1rem;
    align-items: center;
  }

  .c-grid-profile-2 .c-grid-profile__img {
    justify-self: flex-end;
    width: 5rem;
  }
}

/* ================================================
ランキングカウンター
================================================ */
.rankingCounter {
  counter-reset: number 0;
}

.numberCount {
  position: relative;
  font-family: "TTCommons-Regular", sans-serif;
  line-height: 1;
}

.numberCount::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 23%;
  aspect-ratio: 1/1;
  background-color: #000030;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
}

.numberCount::after {
  position: absolute;
  counter-increment: number 1;
  content: counter(number)" ";
  color: #fff;
  top: 4%;
  left: 6%;
  font-size: 2.8rem;
  z-index: 2;
}

.numberCount--2::before {
  background-color: #bababa;
  width: 32%;
}

.numberCount--2::after {
  position: absolute;
  counter-increment: number 1;
  content: counter(number)" ";
  color: #fff;
  top: 6%;
  left: 7%;
  font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
  .numberCount::before {
    width: 32%;
  }

  .numberCount::after {
    top: 6%;
    left: 8%;
    font-size: 2rem;
  }

  .numberCount--2::before {
    width: 47px;
  }

  .numberCount--2::after {
    top: 5px;
    left: 10px;
    font-size: 2rem;
  }
}

/* ================================================
製品エリア
================================================ */

/* １:１レイアウト */
.c-grid-product {
  display: grid;
  margin-bottom: 4rem;
  grid-template-areas: "image text" "image button" "image .";
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 6rem;
}

.c-grid-product__img {
  grid-area: image;
}

.c-grid-product__text {
  grid-area: text;
  margin: 0;
  padding: 0;
}

.c-grid-product__button {
  grid-area: button;
  margin-top: 3rem;
}

.c-grid-product__textLink {
  margin-top: 3rem;
  display: flex;
  justify-content: flex-end;
}

/* 1:3レイアウト */
.c-grid-product-2 {
  display: grid;
  margin-bottom: 4rem;
  grid-template-areas: "image text" "image button" "image .";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 3rem;
}

.c-grid-product-2 .c-grid-product__button {
  margin-top: 2rem;
}


/* 製品名・価格 */
.productName {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.productPrice {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: 2rem;
  font-size: 1.8rem;
}

.productPrice + .productPrice {
  margin-top: 1rem;
}

.productTax {
  font-size: 0.8em;
}

.productDesc {
  font-size: 1.6rem;
  margin-top: 2rem;
}

/* タグ */
.tagList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tagList__item {
  font-size: 1rem;
  background-color: #F5F5DD;
  border-radius: 20px;
  padding: 0.5rem 1rem;
}

.tagList__item:not(:first-of-type) {
  margin-left: 0.5rem;
}

/* レビュー */
.reviewBox {
  background-color: #DEE2E3;
  padding: 2.2rem 2.4rem;
}

.reviewName {
  font-size: 1.2rem;
  margin-top: 1rem;
}

@media screen and (max-width: 767px) {
  /* １:１レイアウト */
  .c-grid-product {
    display: block;
    margin-bottom: 3rem;
  }

  .c-grid-product__img {
    width: 72%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
  }

  .c-grid-product__button {
    margin-top: 2rem;
  }

  .c-grid-product__textLink {
    margin-top: 2rem;
  }

  .productName {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    text-align: center;
  }
  
  .productPrice {
    justify-content: center;
    column-gap: 2rem;
    font-size: 1.6rem;
    text-align: center;
  }

  .productPrice + .productPrice {
    margin-top: 0;
  }

  .productDesc {
    font-size: 1.4rem;
    margin-top: 2rem;
  }

  .tagList {
    justify-content: center;
  }

  .reviewBox {
    padding: 2rem;
  }

  /* 1:3レイアウト */
  .c-grid-product-2 {
    display: grid;
    margin-bottom: 3rem;
    grid-template-areas: "image text" "button button";
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
    column-gap: 1rem;
  }

  .c-grid-product-2 .c-grid-product__img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
  }

  .c-grid-product-2 .productName {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-align: left;
  }

  .c-grid-product-2 .tagList {
    justify-content: flex-start;
  }

  .c-grid-product-2 .productPrice {
    justify-content: flex-end;
    column-gap: 2rem;
    font-size: 1.4rem;
  }
}

/* ================================================
ボタン
================================================ */
.c-button {
  background-color: #fff;
  border: 1px solid #000030;
  display: block;
  padding: 0.8rem 1rem 0.9rem;
  width: 100%;
  max-width: 440px;
  color: #000030;
  text-align: center;
  margin: 0 auto;
  font-size: 1.6rem;
  position: relative;
  transition: 0.3s;
}

@media (any-hover: hover) {
  .c-button:hover {
    background-color: #000030;
    border: 1px solid #000030;
    color: #fff;
  }
}

.c-button--navy {
  background-color: #000030;
  border: 1px solid #000030;
  color: #fff;
}

@media (any-hover: hover) {
  .c-button--navy:hover {
    background-color: #fff;
    color: #000030;
  }
}

.c-button--soldout {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #fff;
  pointer-events: none;
}

/* ボタンのレイアウト */
.c-buttonList {
  display: flex;
  column-gap: 5rem;
  width: 100%;
  justify-content: flex-end;
}

.c-buttonList .c-button {
  font-size: 1.4rem;
  max-width: 20rem;
  margin: 0;
}

.c-buttonList .c-button--soldout {
  font-size: 110%;
}

.c-buttonList-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
}

.c-buttonList-2 .c-button {
  font-size: 1.4rem;
  max-width: 38rem;
}

.categoryButton {
  width: 65%;
  max-width: 650px;
  margin: 5rem auto;
}

.c-button-category {
  display: block;
  position: relative;
  padding: 2rem 3rem;
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .2em;
  transition: .3s;
  border: 1px solid #b3b3b3;
  background-color: #fff;
}

.c-button-category::before {
  position: absolute;
  content: '';
  width: 15px;
  height: 15px;
  border-top: solid 1px #b3b3b3;
  border-right: solid 1px #b3b3b3;
  right: 4rem;
  top: 47%;
  transform: rotate(45deg) translateY(-50%); 
  transition: .3s;
}

@media (any-hover: hover) {
  .c-button-category:hover {
    opacity: .8;
  }
  
  .c-button-category:hover::before {
    right: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .c-buttonList {
    column-gap: 4rem;
    justify-content: center;
  }

  .c-buttonList-2 {
    flex-direction: column;
    row-gap: 2rem;
  }

  .categoryButton {
    width: 100%;
    padding: 0 1.5rem;
    margin: 3rem auto;
  }
  
  .c-button-category {
    padding: 2rem 3rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .c-button-category::before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    right: 6%;
  }
}

/* ================================================
バナー
================================================ */
.bannerArea__item {
  display: block;
  transition: .3s;
}

.bannerArea__item + .bannerArea__item {
  margin-top: 2rem;
}