@charset "UTF-8";

/**
 * 見出し
 */
h2.p-homeSection__title {

    font-family: var(--font-family-mincho-noto);
    display: block;
    margin: 0 auto 2.5rem auto;
    text-align: center;
    color: var(--color-cstm-dark-brown-02);
    font-weight: 600;
    line-height: 0.98em;

    & > span {
        font-family: var(--font-family-english);
        display: block;
        font-size: 1.4rem;
        letter-spacing : 0.02em;
        color : var(--color-gold);
        border-top: 1px solid var(--color-cstm-dark-brown-03);
        margin-top: 0.3em;
    }

}

/**
 * 特集
 */
#toppage-feature-div {

  margin-bottom : 6rem;

  .disp-flex {

    & > * {

      &.full-size {
        width: 100%;
      }

      & > img {
        width: 100%;
        height: auto;
      }
    }

  }
}


/**
 * おすすめ商品
 */
#toppage-recommend-items-div {

  padding-bottom: 6rem;
  background-color: var(--color-cstm-beige-01);

  ul.toppage-recommend-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 3rem;

    & > li {

      text-align: left;

      & > a {

        & > .product-image-area {
          position: relative;
        }

        & > .product-info-area {

            margin-top : 0.5rem;

            & > .product-name {
                font-size : 1.7rem;
                font-weight: bold;
            }

            & > .product-price {
                font-size : 1.8rem;
                font-weight: bold;

                & > .tax-type {
                    font-size : 0.8em;
                    margin-left : 0.5rem;
                }
            }
        }
      }

    }

  }

}

/**
 * セット商品
 */
#toppage-set-items-div {
  margin-bottom: 6rem;

  ul.toppage-setitem-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 3rem;

    & > li {

      text-align: left;

      & > a {

        & > .product-image-area {
          position: relative;
        }

        & > .product-info-area {

            margin-top : 0.5rem;

            & > .product-name {
                font-size : 1.7rem;
                font-weight: bold;
            }

            & > .product-price {
                font-size : 1.8rem;
                font-weight: bold;

                & > .tax-type {
                    font-size : 0.8em;
                    margin-left : 0.5rem;
                }
            }
        }
      }

    }

  }

}

/**
 * コラボ商品
 */
#toppage-collabo-items-div {

  padding-bottom: 6rem;
  background-color: var(--color-cstm-beige-02);

  ul.toppage-collabo-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 3rem;

    & > li {

      text-align: left;

      & > a {

        & > .product-image-area {
          position: relative;
        }

        & > .product-info-area {

            margin-top : 0.5rem;

            & > .product-name {
                font-size : 1.7rem;
                font-weight: bold;
            }

            & > .product-price {
                font-size : 1.8rem;
                font-weight: bold;

                & > .tax-type {
                    font-size : 0.8em;
                    margin-left : 0.5rem;
                }
            }
        }
      }

    }

  }

}

/**
 * 動画（初めての方へ）
 */
#toppage-movies-div {

  #section-topmovie {

    position: relative;
    width:100%;
    aspect-ratio: 16 / 9;
    /* height: auto; */
    overflow: hidden;

    #topmovie {

        width:100%;
        height:100%;

        z-index: -2;
        overflow: hidden;
        opacity: 1;
        transition-property: opacity;
        transition-duration: 1000ms;

        & > iframe{
            aspect-ratio: 16 / 9;

            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            width: 100%;
            height: auto;

            /*
              Youtubeの ファイル名、ロゴを隠す場合
            */
            /*
            width: 114%;
            height: auto;
            */
        }

    }

    #player-thumbnail
    {
      position: absolute;
      top : 0;
      left: 0;
      width: 100%;
      height: 100%;

      background: white;

      text-align: center;
      font-size: 2.5rem;
      overflow: hidden;
      cursor: pointer;

      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s, visibility 0.5s;

      &.hidden {
        opacity: 0;
        visibility: hidden;
      }

      .topmovie-img {
          min-width: 100%;
          min-height: 100%;
          max-width: 100%;
          max-height: 100%;
          object-fit: cover;
      }
    }
  }

  #bg-landscape-head {
    bottom: 0;
    z-index: -1;
  }

  #bg-landscape {

    position: relative;

    & > img {
      width: 100%;
      height: auto;
    }

    .text-content {

      background-color: var(--color-white-opa-07);

      margin : 2.5em 4em;
      color: var(--color-cstm-dark-brown-02);

      position: absolute;
      top : 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0 0;

    }

  }



}

/**
 * 梱包について
 */
#toppage-packaging-div {

  & > .p-homeSection {

    .gift-box-section,
    .gift-wrap-section
    {

      border : 1px solid var(--color-cstm-black-02);

      & > h3 {
        font-family: var(--font-family-mincho-noto);
        font-size : 1.8rem;
        font-weight: bold;
        margin-bottom: 0.5em;

      }

      ul.gift-box-image-list,
      ul.gift-wrap-image-list {
        margin-top : 2rem;
      }

    }

    .gift-wrap-section {

      .bottom-buttons {

        margin-top : 1.5rem;

        a.round-button {
          padding: 0.5em 1.5em;
        }
      }

    }

  }
}

/**
 * 新着情報
 */
#top-news-section {

  padding-bottom: 11rem;

  .p-homeSection__title {
    /* position: absolute; */
    font-size: 2.5rem;
    width: auto;
  }

  .div-goto-list-btn {
    text-align: right;
    margin: 0 auto 0.75em auto;
    margin-top: 0;
    max-width: 1100px;
    font-size: 1.7rem;
  }

  .p-homeNewsList {
    border-top: 1px solid #000000;
      border-bottom: 1px solid #000000;
    max-width:1100px;
    margin: 0 auto;
  }

  .p-homeNewsList > li {
    border-bottom: 1px solid #c0c0c0;
    font-size: 16px;
    display: flex;
    align-items: stretch;
  }

  .p-homeNewsList li > li:last-child {
      border-bottom: 0;
  }

  .p-homeNewsList > li > span.date {

    letter-spacing: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-style: italic;

  }

  .p-homeNewsList > li > span.title {
    flex-grow: 1;
    font-weight: 500;
  }

  .p-homeNewsList > li > span.title > a
  {
    display:inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: visible;
  }

  .p-homeNewsList > li > span.title > a dd
  {
    display: none;
  }

}