/* ----- 共通 -----*/
.top-page-section {
  margin: 60px 0 0 0;
}

.top-page-section header {
  /*border-top: solid 1px #CDBC8D;*/
  /*color: #CDBC8D;*/
  font-size: 16px;
  padding: 23px 0 40px 0;
  text-align: center;
}


/* ----- エリア ----- */
body{
    overflow-x: hidden;
}

/* -- アイキャッチ -- */
.eye-catch {
  width: calc(100% + 16px);
  margin-left: -8px;
  overflow-x: hidden;
}

.eye-catch img {
  /*height: calc(100vh - 48px);*/

  height: calc(100vh - 48px); /* Fallback */
  height: calc(calc(var(--vh, 1vh) * 100) - 48px);
  object-fit: cover;
}

.eye-catch a img,
.eye-catch div img{ 
  width: 100%;/* 20210814 nagoya popup*/
}

.eye-catch-message{
    position: absolute;
    bottom: 20px;
    left: 30%;
    right: 30%;
    font-size: 20px;
    text-shadow: 0 1px 4px #ffffff;
}
.eye-catch-message h4{
  font-size: 28px;
}
.eye-catch-message .button-icon {
    border: solid 1px #333333;
    text-align: center;
    box-shadow: 0px 0px 6px 0px #ffffff;
    background-color: rgba(256,256,256,0.5);
    margin-top: 20px;
    width: 100%;
    height: 40px;
}
.eye-catch-message .transparent-button {
    display: block;
    margin-top: 20px;
    width: 100%;
  height: 100px;
}


/* -- 商品一覧 -- */
#product-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 36px 8px;
  margin: 0px 0 0 0;
}

/* -- 商品のサムネイル画像 -- */
#product-list .thumb-nail {
  position: relative;
  width: 100%;
}

#product-list .thumb-nail:before {
  content: "";
  display: block;
  padding-top: 150%;
}

#product-list .thumb-nail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#product-list .thumb-nail span.tag-sold-out {
  position: absolute;
  display: block;
  top: 0;
  padding: 4px 8px;
  color: #ffffff;
  font-size: 12px;
  background: #808080;
  background: linear-gradient(315deg, transparent 3px, rgba(128, 128, 128, 0.75) 3px);
}

/* -- 商品の名称と価格 -- */
#product-list .abstract {
  margin-top: 12px;
}

#product-list .abstract span {
  display: block;
  text-align: center;
  font-size: 12px;
  margin-top: 2px;
}

#product-list .abstract span.price {
  font-size: 10px;
}

#product-list .abstract .price-sold-out {
  font-size: 10px;
  text-decoration: line-through;
}


/* -- カスタム・カテゴリー -- */
.photo-tile {
  height: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, calc(calc(50vw - 8px) * 0.75));
  grid-gap: 12px;
}
.photo-grid-tile {
  display: grid;
}
/* - カスタム - */
.custom-tile {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(5, calc(calc(50vw - 8px) * 0.75)) !important;
}
/* - カテゴリー - */
.category-tile {
  grid-template-areas:
  "ring ring"
  "pierce necklace"
  "bracelet earcuff"
  "earring hair"
  "gift other";
}

.photo-tile div {
  position: relative;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.photo-tile div:hover {
  opacity: 0.6;
  filter: brightness(110%);
}

.photo-tile img {
  height: 20vh;
  height: -webkit-fill-available;
  height: fill-available;
  width: -webkit-fill-available;
  width:  fill-available;
  object-fit: cover;
  border-radius: 1px;
}

.photo-tile span {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 20px;
}
.photo-tile span p{
  text-align: center;
  text-align: -webkit-center;
  color: #FFFFFF;
  font-size: 20px;
}

/* -- コンセプト -- */
#top-page-concept img{
  height: calc(100vw * 0.65);
  object-fit: cover;
}
#top-page-concept .concept-message{
  margin: 24px 0 0 0;
  font-size: 10px;
  text-align: center;
}
#top-page-concept .concept-message p{
  line-height: 1.8;
}
#top-page-concept .concept-message p:not(:last-child){
  margin: 0 0 4px 0;
}

/* -- コンセプトビデオ -- */
#top-page-concept .js-player-wrapper-wrapper{
  overflow: hidden;
}
#top-page-concept .js-player-wrapper{
  width: 212%;
  height: 65vw;
  margin-left: calc(-0.5 * calc(16*16/9/9 - 1) * 100% - 17px);
  object-fit: contain;
  overflow: hidden;
}
#top-page-concept iframe#js-player {
  margin-top: -400px;
}