@charset 'utf-8';

/* common
------------------------------------------------ */
#header { padding-bottom: 0 !important; }
.hd-main { position: absolute; top: 0; left: 0; }
.hd-main-top { background-color: rgba(0,114,151,0.9); }
.hd-announce + .hd-main { top: 30px; }
.body-hd-fixed .hd-main { top: 0; }
.fs-l-pageMain { padding-top: 10px; }
#footer { margin-top: 0; }

@media screen and (min-width: 769px) {
  .hd-announce + .hd-main { top: 28px; }
  .body-hd-fixed .hd-main { top: 0; }
  .fs-l-pageMain { padding: 98px 0 0; max-width: inherit; }
}

/* visual
------------------------------------------------ */.footer-gate
/*.top-visual { position: relative; }
.top-visual-logo { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding-bottom: 52.9333333333%; width: 30.8%; overflow: hidden; z-index: 5; }
.top-visual-logo img { position: absolute; top: 0; left: 0; }
.top-visual-frame { position: relative; width: 100%; height: calc(100vh - 30px); overflow: hidden; }
.top-visual-move { position: relative; height: 100%; }
.top-visual-item { display: none; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; z-index: 1; }
.top-visual-item.active { z-index: 2; }
.top-visual-item > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.top-visual-photo picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-item.active .top-visual-photo { transition: ease-in 10s; transform: scale(1.2); }
.top-visual-photo img { position: absolute; top: 0; left: 0; }
.top-visual-scrolldown { position: absolute; bottom: 15px; right: 15px; width: 80px; height: 103px; overflow: hidden; z-index: 5; }
.top-visual-scrolldown > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-visual-scrolldown img { position: absolute; }
.top-visual-scrolldown img.pic { bottom: 0; left: 17px; width: 47px; height: 87px; }
.top-visual-scrolldown img.word { top: 0; left: 0; animation: word-rotate 26s linear 0s infinite forwards; width: 80px; height: 80px; }

@keyframes word-rotate {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}

@media screen and (max-width: 768px) {
}

@media screen and (min-width: 769px) {
  .top-visual-frame { height: calc(100vh - 28px); }
  .top-visual-logo { padding-bottom: 308px; width: 180px; }
  .top-visual-scrolldown { bottom: 16px; right: 58px; width: 104px; height: 133px; }
  .top-visual-scrolldown img.pic { left: 22px; width: 60px; height: 112px; }
  .top-visual-scrolldown img.word { width: 104px; height: 104px; }

}*/

/* lpbanner
------------------------------------------------ */
.top-lpbanner { max-width: 1240px; width: 100%; margin: 0 auto;}
.top-lpbanner a {display: inline-block;}
.top-lpbanner img { height: auto;}


@media screen and (min-width: 769px) and (max-width: 1240px) {
}

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

@media screen and (max-width: 768px) {
}

@media screen and (min-width: 769px) {
}

/* categories
------------------------------------------------ */
.top-categories { position: relative; margin-top: 50px; }
.top-categories-block { position: relative; margin-top: 50px; }
.top-categories-block:first-child { margin-top: 0; }
.top-categories-top { position: relative; margin-bottom: 30px; }
.top-categories-top--title { position: absolute; bottom: 40px; color: #fff; z-index: 1; }
.top-categories-top--title::after { content: ''; position: absolute; top: 50%; margin-top: -25px; width: 52px; height: 50px; background: url(../../img/icon/initial_c1.svg) no-repeat center center; background-size: 100% 100%; z-index: -1; }
.top-categories-top--title--en { font-family: 'Jost', sans-serif; font-size: 2.6rem; font-weight: 500; line-height: 1.2; }
.top-categories-top--title--ja { margin-top: -3px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.top-categories-top--photo { position: relative; z-index: -1; }

.top-categories-block:nth-of-type(odd) .top-categories-top--title { right: 0; padding-right: 40px; text-align: right; }
.top-categories-block:nth-of-type(odd) .top-categories-top--title::after { right: 0; }
.top-categories-block:nth-of-type(even) .top-categories-top--title { left: 0; padding-left: 40px; }
.top-categories-block:nth-of-type(even) .top-categories-top--title::after { left: 0; }

@media screen and (max-width: 768px) {
  .top-categories-top--photo { margin: 0 -20px; width: calc(100% + 40px); }
}

@media screen and (min-width: 769px) {
  .top-categories { margin-top: 100px; }
  .top-categories-block { margin-top: 80px; }
  .top-categories-top { margin-bottom: 60px; }
  .top-categories-top--title { bottom: 118px; }
  .top-categories-top--title--en { font-size: 4rem; }
  .top-categories-top--title--ja { margin-top: -2px; font-size: 1.6rem; }
  .top-categories-top--title::after { margin-top: -36px; width: 77px; height: 73px; }
  .top-categories-top--photo { width: calc(100% - 70px); }
  
  .top-categories-block:nth-of-type(odd) .top-categories-top--title { right: calc((100% - 1200px)/2); padding-right: 60px; }
  .top-categories-block:nth-of-type(odd) .top-categories-top--photo { margin-left: auto; }
  .top-categories-block:nth-of-type(even) .top-categories-top--title { left: calc((100% - 1200px)/2); padding-left: 60px; }
}

@media screen and (min-width: 769px) and (max-width: 1240px) {
  .top-categories-top--title { bottom: 9.83333333333vw; }
  .top-categories-block:nth-of-type(odd) .top-categories-top--title { right: 20px; }
  .top-categories-block:nth-of-type(even) .top-categories-top--title { left: 20px; }
}

/* ranking
------------------------------------------------ */
.top-ranking { position: relative; margin-top: 50px; }
.top-ranking .slide-1-frame { padding-top: 14px; }

@media screen and (max-width: 768px) {
  .top-ranking .slide-1 { margin: 0 -20px; width: calc(100% + 40px); }
  .top-ranking .slide-1-frame { padding-left: 20px; }
  .top-ranking .slide-1-direct { display: none; }
}

@media screen and (min-width: 769px) {
  .top-ranking { margin-top: 100px; }
  .top-ranking .slide-1 { padding-left: calc((100% - 1200px)/2); }
  .top-ranking .slide-1-frame { margin-left: -10px; padding: 15px 0 0 10px; width: calc(100% + 10px); }
  .top-ranking .slide-1-direct { margin-top: -10px; }
  .top-ranking .slide-1-direct--prev { left: calc((100% - 1200px)/2 - 20px); }
  .top-ranking .slide-1-direct--next { right: calc((100% - 1200px)/2 - 20px); }
}

@media screen and (min-width: 769px) and (max-width: 1240px) {
  .top-ranking .slide-1 { padding: 0; }
  .top-ranking .slide-1-frame { margin-left: 0; padding: 15px 20px 0; width: 100%; }
  .top-ranking .slide-1-direct--prev { left: 10px; }
  .top-ranking .slide-1-direct--next { right: 10px; }
}

/* shop
------------------------------------------------ */
.top-shop > .wrap { z-index: 1; }
.top-shop-lists--item { padding: 20px 20px 35px; background-color: rgba(0,114,151,0.90); border-radius: 5px; color: #fff; }
.top-shop-lists--photo { position: relative; padding-bottom: 74.9152542373%; width: 100%; height: 0; overflow: hidden; }
.top-shop-lists--photo img { position: absolute; top: 0; left: 0; }
.top-shop-lists__info { margin-top: 18px; }
.top-shop-lists--name { font-size: 1.5rem; font-weight: 400; line-height: 1.2; }
.top-shop-lists--material { margin-top: 14px; font-size: 1.2rem; line-height: 1.625; }
.top-shop-lists--material .gmap { display: inline-block; margin: 4px 0 0 10px; width: 35px; height: 13px; background-color: #ca9513; text-align: center; vertical-align: top; font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 400; line-height: 14px; color: #fff; }

@media screen and (max-width: 768px) {
  .top-shop { margin: 50px -20px 0; padding: 40px 20px 20px; width: calc(100% + 40px); }
  .top-shop-lists--item { margin-top: 40px; }
  .top-shop-lists--item:first-child { margin-top: 0; }
  .top-shop .ft-anm { bottom: -145px; margin: 0 -20px; width: calc(100% + 40px); }
}

@media screen and (min-width: 769px) {
  .top-shop { margin-top: 20px; padding: 60px 0 50px; }
  .top-shop-lists { display: flex; flex-wrap: wrap; }
  .top-shop-lists--item { margin: 8.33333333333% 8.33333333333% 0 0; padding: 46px 50px; width: 45.8333333333%; border-radius: 10px; }
  .top-shop-lists--item:nth-of-type(-n+2) { margin-top: 0; }
  .top-shop-lists--item:nth-of-type(2n) { margin-right: 0; }
  .top-shop-lists__info { margin-top: 22px; }
  .top-shop-lists--name { font-size: 1.8rem; }
  .top-shop-lists--material { margin-top: 18px; font-size: 1.4rem; line-height: 1.64285714286; }
  .top-shop-lists--material .gmap { margin: 0 0 0 10px; width: 52px; height: 22px; font-size: 1.4rem; line-height: 23px; }

}

/* footer-gate (ゲート画像をそのまま入れる)　インスタに入れてる場合はbk参照
------------------------------------------------ */
.footer-gate { position: relative; /*background-color: #f5f5f5;*/ }
.footer-gate > .wrap { z-index: 1; }

.footer-gate .ft-anm { position: absolute; left: 0; width: 100%; height: 186px; overflow: hidden; z-index: -1; }
.footer-gate .ft-anm-target { position: absolute; bottom: 0; }
.footer-gate .ft-anm-gate { left: 18.1333333333%; width: 246px; height: 165px; }
.footer-gate .ft-anm-light.light-1 { left: 2.66666666667%; width: 42px; height: 90px; }
.footer-gate .ft-anm-light.light-2 { right: 2.66666666667%; width: 25px; height: 50px; }

@media screen and (max-width: 768px) {
  .footer-gate { margin: 40px -20px 0; padding: 5px 20px 95px; width: calc(100% + 40px); }
  .footer-gate .ft-anm { bottom: -95px; margin: 0 -20px; width: calc(100% + 40px); }
}

@media screen and (min-width: 769px) {
  .footer-gate { margin-top: 0; padding: 0 0 338px; }

  .footer-gate .ft-anm { bottom: -338px; left: 50%; margin-left: -405px; width: 810px; height: 417px; }
  .footer-gate .ft-anm-gate { left: 16.2962962963%; width: 560px; height: 400px; }
  .footer-gate .ft-anm-light.light-1 { left: 0; width: 95px; height: 200px; }
  .footer-gate .ft-anm-light.light-2 { right: 0; width: 57px; height: 100px; }
}