@charset 'utf-8';

/* visual
------------------------------------------------ */
.top-visual-slide { position: relative; margin-left: auto; width: 80%; opacity: 0; }
.top-visual-slide__frame { position: relative; padding-bottom: 100%; width: 100%; height: 0; overflow: hidden; z-index: 1; }
.top-visual-slide__move { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-slide--item { position: relative; width: 100%; height: 100%; z-index: 1; }
.top-visual-slide--item.active { z-index: 2; }
.top-visual-photo { position: relative; padding-bottom: 100%; width: 100%; height: 0; overflow: hidden; z-index: 1; }
.top-visual-photo picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-info { position: relative; z-index: 2; }
.top-visual-copy { display: inline-block; background: rgba(255,255,255,.85); vertical-align: top; }
.top-visual-link { margin-top: 48px; text-align: center; }
.top-visual-link + .top-visual-link { margin-top: 24px; }

@media screen and (max-width: 768px) {
  .top-visual-info { margin-top: -24.8vw; }
  .top-visual-copy { padding: 25px 16px 0 13px; width: 77.7333333333%; }
}

@media screen and (min-width: 769px) {
  .top-visual { display: flex; align-items: flex-end; flex-flow: row-reverse; }
  .top-visual-slide { width: 60%; }
  .top-visual-slide__frame,
  .top-visual-photo { padding-bottom: 0; height: calc(100vh - 90px); min-height: 500px; }
  .top-visual-info { padding-bottom: 6.40732265446vh; width: 40%; }
  .top-visual-copy { margin: 0 45px 0 calc((100vw - 1300px) / 2); }
  .top-visual-link { margin-top: 10vh; }
  .top-visual-link + .top-visual-link { margin-top: 4vh; }
}

@media screen and (min-width: 769px) and (max-width: 1340px) {
  .top-visual-copy { margin-left: 20px; }
}

/* recommend
------------------------------------------------ */
.top-recommend { position: relative; }

@media screen and (max-width: 768px) {
  .top-recommend { margin: 58px 15px 0; }
  .top-recommend .post-lists { margin: 0 35px; }
  .top-recommend .post-lists-item { margin-top: 30px; }
  .top-recommend .post-lists-item:first-child { margin-top: 0; }
}

@media screen and (min-width: 769px) {
  .top-recommend { margin-top: 98px; }
  .top-recommend .post-lists { display: flex; flex-wrap: wrap; }
  .top-recommend .post-lists-item { margin: 4.765625% 4.765625% 0 0; width: 30.15625%; }
  .top-recommend .post-lists-item:nth-of-type(-n+3) { margin-top: 0; }
  .top-recommend .post-lists-item:nth-of-type(3n) { margin-right: 0; }
}

/* products
------------------------------------------------ */
.top-products { position: relative; margin-top: 55px; }
.top-products-block { position: relative; margin-top: 55px; }
.top-products-block:first-child { margin-top: 0; }

@media screen and (max-width: 768px) {
  .top-ranking .prd-lists-item { margin: 20px 15px 0 0; width: calc((100% / 2) - (15px / (2 / 1))); }
  .top-ranking .prd-lists-item:nth-of-type(-n+2) { margin-top: 0; }
  .top-ranking .prd-lists-item:nth-of-type(2n) { margin-right: 0; }
  .top-season .prd-lists-item { margin: 20px 15px 0 0; width: calc((100% / 2) - (15px / (2 / 1))); }
  .top-season .prd-lists-item:nth-of-type(-n+2) { margin-top: 0; }
  .top-season .prd-lists-item:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (min-width: 769px) {
  .top-products { margin-top: 100px; }
  .top-products-block { margin-top: 90px; }
  .top-ranking .prd-lists-item { margin: 42px 2.8395061728% 0 0; width: 22.8703703704%; }
  .top-ranking .prd-lists-item:nth-of-type(4n+6) { margin-right: 0; }
  .top-ranking .prd-lists-item:nth-of-type(-n+6) { margin-right: 5.55555555556% !important; width: 29.6296296296%; }
  .top-ranking .prd-lists-item:nth-of-type(-n+3) { margin-top: 0; }
  .top-ranking .prd-lists-item:nth-of-type(3),
  .top-ranking .prd-lists-item:nth-of-type(6) { margin-right: 0 !important; }
  .top-season .prd-lists-item { margin: 42px 2.8395061728% 0 0; width: 22.8703703704%; }
  .top-season .prd-lists-item:nth-of-type(-n+4) { margin-top: 0; }
  .top-season .prd-lists-item:nth-of-type(4n) { margin-right: 0; }
}

/* library
------------------------------------------------ */
.top-library { position: relative; margin-top: 56px; padding: 15px 15px 60px; background-color: #f3f3ef; }
.top-library-title { position: relative; width: 154px; z-index: 1; }
#top-library-wpload { position: relative; margin-top: -12px; z-index: 2; }
.top-library-lists { display: flex; flex-wrap: wrap; }
.top-library-lists--item { position: relative; }
.top-library-lists--item > a { display: block; position: relative; }
.top-library-lists--frame { position: relative; margin-bottom: 16px; min-height: 50px; }
.top-library-lists--frame::after { content: ''; position: absolute; bottom: -5px; right: -5px; width: 100%; height: 100%; background-color: #fff; border-radius: 0 10px 10px 0; z-index: -1; }
.top-library-lists--frame .i-new { position: absolute; top: 8px; left: -6px; padding: 6px 16px; background-color: rgba(229,123,27,0.8); border-radius: 2.5px; font-family: 'Roboto', sans-serif; font-size: 1.2rem; font-weight: 700; font-style: normal; line-height: 1.2; color: #fff; z-index: 2; }
.top-library-lists--photo { position: relative; padding-bottom: 127.272727273%; width: 100%; height: 0; border-radius: 0 10px 10px 0; overflow: hidden; z-index: 1; }
.top-library-lists--photo img { position: absolute; top: 0; left: 0; }
.top-library-lists__info { position: relative; }
.top-library-lists--title { font-size: 1.3rem; line-height: 1.38461538462; }
.top-library-lists--date { margin-top: 12px; font-size: 1.2rem; line-height: 1.2; color: #999; }
.top-library .btn-1 { margin-top: 28px; text-align: right; }
.top-library .btn-1 > a::after { background-color: #fff; }

@media screen and (max-width: 768px) {
  .top-library-lists--item { margin: 30px calc(8.695652174% - 5px) 0 0; width: 45.652173913%; }
  .top-library-lists--item:nth-of-type(-n+2) { margin-top: 0; }
  .top-library-lists--item:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (min-width: 769px) {
  .top-library { margin-top: 100px; padding: 25px 0 62px; }
  .top-library-title { width: 241px; }
  #top-library-wpload { margin-top: -16px; }
  .top-library-lists--item { margin: 60px calc(5.83333333333% - 3.5px) 0 0; width: 20.625%; }
  .top-library-lists--item:nth-of-type(-n+4) { margin-top: 0; }
  .top-library-lists--item:nth-of-type(4n) { margin-right: 0; }
  .top-library-lists--frame { margin-bottom: 26px; }
  .top-library-lists--frame::after { bottom: -10px; right: -10px; border-radius: 0 20px 20px 0; }
  .top-library-lists--frame .i-new { top: 10px; left: -10px; padding: 7px 20px; border-radius: 5px; font-size: 1.4rem; }
  .top-library-lists--photo { border-radius: 0 20px 20px 0; }
  .top-library-lists--title { font-size: 1.5rem; line-height: 1.4667; }
  .top-library-lists--date { margin-top: 5px; font-size: 1.3rem; }
  .top-library .btn-1 { margin-top: 32px; }
}

/* bnrs
------------------------------------------------ */
.top-bnrs { position: relative; margin-top: 55px; }
.top-bnrs-hd { position: relative; margin-bottom: 6px; padding-bottom: 42.6666666667%; width: 100%; height: 0; overflow: hidden; z-index: 1; }
.top-bnrs-hd > a { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-bnrs-hd__info { position: relative; }
.top-bnrs-hd--title,
.top-bnrs-hd--text { text-align: center; font-weight: 600; line-height: 1.2; color: #fff; }
.top-bnrs-hd--title { font-size: 2.5rem; }
.top-bnrs-hd--text { margin-top: 15px; font-size: 1.2rem; }
.top-bnrs-hd--bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.top-bnrs-hd--bg picture { width: 100%; height: 100%; }
.top-bnrs-lists--item { position: relative; padding-bottom: 42.6666666667%; width: 100%; height: 0; overflow: hidden; z-index: 1; }
.top-bnrs-lists--item > a { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-bnrs-lists--item > a::after { content: ''; position: absolute; top: 50%; right: 30px; margin-top: -5px; width: 14px; height: 10px; background: url(../../img/icon/arrow_white1.svg) no-repeat center center; background-size: 100% 100%; }
.top-bnrs-lists--item > a.link-none::after { display: none; }
.top-bnrs-lists--name { font-size: 1.6rem; line-height: 1.2; color: #fff; }
.top-bnrs-lists--bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

.device-click .top-bnrs-hd--bg,
.device-click .top-bnrs-lists--bg { transition: ease .4s; }
.device-click .top-bnrs-hd > a:hover,
.device-click .top-bnrs-lists--item > a:hover { opacity: 1; }
.device-click .top-bnrs-hd > a:hover .top-bnrs-hd--bg,
.device-click .top-bnrs-lists--item > a:hover .top-bnrs-lists--bg { transform: scale(1.1); }

.top-library + .top-bnrs { margin-top: 8px; }

@media screen and (max-width: 768px) {
  .top-bnrs-lists--item { margin-top: 6px; }
  .top-bnrs-lists--item:first-child { margin-top: 0; }
}

@media screen and (min-width: 769px) {
  .top-bnrs { margin-top: 100px; }
  .top-bnrs-hd { margin-bottom: .5%; padding-bottom: 20%; }
  .top-bnrs-hd--title { font-size: 4rem; }
  .top-bnrs-hd--text { margin-top: 20px; font-size: 2rem; }
  .top-bnrs-lists { display: flex; flex-wrap: wrap; }
  .top-bnrs-lists--item { margin: .5% .5% 0 0; padding-bottom: 20%; width: 33%; }
  .top-bnrs-lists--item:nth-of-type(-n+3) { margin-top: 0; }
  .top-bnrs-lists--item:nth-of-type(3n) { margin-right: 0; }
  .top-bnrs-lists--item > a::after { right: 2.66666666667vw; margin-top: -8px; width: 19px; height: 17px; }
  .top-bnrs-lists--name { font-size: 1.8rem; }

  .top-library + .top-bnrs { margin-top: 10px; }
}

/* news
------------------------------------------------ */
.top-news { position: relative; }
.top-news-content { position: relative; }
.top-news .title-2 { justify-content: flex-start; text-align: left; }
.top-news .title-2 .en { padding-right: 18px; font-size: 2rem; }
.top-news .title-2 .ja { padding-left: 18px; font-size: 1rem; }
.top-news .btn-1 { text-align: right; }

@media screen and (max-width: 768px) {
  .top-news { margin: 56px 15px 0; }
}

@media screen and (min-width: 769px) {
  .top-news { margin-top: 100px; }
  .top-news-content { display: flex; align-items: center; }
  .top-news .title-2 { margin-bottom: 0; width: 360px; }
  .top-news .title-2 .en { padding-right: 28px; font-size: 3.6rem; }
  .top-news .title-2 .ja { padding-left: 28px; font-size: 1.6rem; }
  .top-news-lists { width: calc(100% - 360px); }
}

/* instagram
------------------------------------------------ */
.top-instagram { position: relative; }
.top-instagram .title-1 { text-align: center; }
.top-instagram .btn-1 { text-align: center; }

@media screen and (max-width: 768px) {
  .top-instagram { margin: 52px 15px 0; }
  .top-instagram .instagram-lists-item { margin: 15px 15px 0 0; width: calc((100% / 2) - (15px / (2 / 1))); }
  .top-instagram .instagram-lists-item:nth-of-type(-n+2) { margin-top: 0; }
  .top-instagram .instagram-lists-item:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (min-width: 769px) {
  .top-instagram { margin-top: 94px; }
  .top-instagram .instagram-lists-item { margin: 4.6875% 4.6875% 0 0; width: 21.484375%; }
  .top-instagram .instagram-lists-item:nth-of-type(-n+4) { margin-top: 0; }
  .top-instagram .instagram-lists-item:nth-of-type(4n) { margin-right: 0; }
}