@charset 'utf-8';
/*
 * name:top.css
 * author: Nulo Lab
*/

/* visual
===================================*/
#visual { display: block; position: relative; width: 100vw; height: calc(100vh - 13em); padding: 0; }
.visual__desc { width: 100%; position: absolute; left: 50%; top: calc( 50% - 5em ); transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.visual__desc img { width: 100%; height: auto; }
.visual__desc--logo { max-width: 43vw; }
.visual-slide { display: block; position: relative; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.visual-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.visual-slide .swiper-slide a{ display: block; }
.visual-slide .swiper-container { display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.visual-slide .swiper-slide { width: 100vw; height: 100vh; }
.visual-slide .swiper-slide img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; -o-object-fit: cover; object-fit: cover; }
.visual-slide .swiper-progress-bar { font-size: inherit; position: absolute; left: 50%; bottom: 5.9em; width: 12.4em; display: block; z-index: 1; height: 1px; transform: translateX(-50%); }
.visual-slide .swiper-progress-bar .slide_progress-bar { position: absolute; height: 1px; background: #F5EAD1; width: 100%; clear: both; opacity: 0; left: 0; top: 0; }
.visual-slide .swiper-progress-bar .slide_progress-bar:after { content: ''; position: absolute; top: 0; left: 0; background: #CEA248; height: 100%; width: 0; }
.visual-slide .swiper-progress-bar.active .slide_progress-bar { opacity: 1; }
.visual-slide .swiper-progress-bar.active.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition: 0.1s width linear; transition-duration: 4s; }
.visual-slide .swiper-pagination { position: absolute; top: auto; left: 50%; bottom: 5.15em; width: auto; transform: translateX(-50%); }
.visual-slide .swiper-pagination span { font-family: var(--ff-lato); font-size: 1.2em; font-weight: bold; line-height: 1; color: #fff; display: inline-block; }
.visual-slide .swiper-pagination span:first-child { margin-right: 16.1em; }
.visual-slide .swiper-button { font-size: 1em; margin: 0; width: auto; height: auto; left: calc( 50% - 1.8em ); top: auto; right: auto; bottom: 4em; }
.visual-slide .swiper-button:after { content: ''; font-family: inherit; font-size: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: block; width: 1em; height: 1em; background: url(../../img/icon/arrow1.svg) no-repeat; background-size: 100% 100%; background-position: center; }
.visual-slide .swiper-button svg { display: block; width: 3.8em; height: 3.8em; transform: rotate(270deg); }
.visual-slide .swiper-button svg circle { fill: transparent; stroke: #E8E8E8; stroke-width: 2; cx: 1.8em; cy: 1.8em; r: 1.7em; stroke-dasharray: 22em; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
.visual-slide .swiper-button svg:last-child { position: absolute; left: 0; top: 0; z-index: 2; }
.visual-slide .swiper-button svg:last-child circle { stroke: #CEA248; stroke-dashoffset: 22em; }
.visual-slide .swiper-button-next { left: calc( 50% + 13.5em ); }
.visual-slide .swiper-button-prev { left: calc( 50% - 17.5em ); transform: rotate(180deg); }
.visual-slide .swiper-button-next:after{ margin-bottom: .1em; }
.visual-slide .swiper-button-prev:after{ margin-top: .1em; }
.visual-slide .swiper-button:hover svg:last-child circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms; }
.visual-scroll{ position: absolute; left: 5em; bottom: 5em; font-size: 1.3em; font-weight: bold; color: #fff; font-family: var(--ff-lato); writing-mode: vertical-rl; text-orientation: mixed; -webkit-text-orientation: mixed; letter-spacing: .025em; line-height: calc(17/13); z-index: 2; }
.visual-scroll i {margin-top: 1.5384em; }
.visual-scroll svg{ width: .8461em; height: 3.5384em; }
/* Animate each path */
.visual-scroll .path1 {
  animation: fade 1.5s infinite;
}
.visual-scroll .path2 {
  animation: fade 1.5s infinite;
  animation-delay: 0.3s;
}
.visual-scroll .path3 {
  animation: fade 1.5s infinite;
  animation-delay: 0.6s;
}
#sb_instagram{ padding-bottom: 0 !important; }
#sb_instagram #sbi_images .sbi_item{ border-radius: .5em; }
#sb_instagram.sbi_mob_col_2 #sbi_images{ padding: 0; }

@media only screen and (max-width: 768px) {
  .visual-scroll{ visibility: hidden; }
}
@media only screen and (min-width: 769px) {
  #sb_instagram.sbi_mob_col_2 #sbi_images{ gap:2.6em !important; }
}
@media only screen and (max-width: 768px) {
  #visual { height: 43.3em; }
  .visual-scroll{ display: none; }
  .visual-slide .swiper-slide { height: 37.5em; }
  .visual__desc { top: calc( 50% - 3em ); }
  .visual-slide .swiper-slide{ overflow: hidden; }
  .visual-slide .swiper-button{ bottom: 0; }
  .visual-slide .swiper-button svg{ width: 3.6em; height: 3.6em; }
  .visual-slide .swiper-button:after{ background: url(../../img/icon/arrow2.svg) no-repeat; }
  .visual-slide .swiper-button-prev{ left: calc(36/375 * 100%); }
  .visual-slide .swiper-button-next{ left: unset; right: calc(36/375 * 100%); }
  .visual-slide .swiper-pagination{ bottom: 1.3em; width: 19.4em; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .visual-slide .swiper-pagination span{ color: var(--main-color); }
  .visual-slide .swiper-pagination span:first-child{ margin: 0; }
  .visual-slide .swiper-progress-bar{ bottom: 1.9em; width: 10em; }
  #sb_instagram.sbi_mob_col_2 #sbi_images{ gap:1.6em !important; }
}

/*
Top pickup
==================================================== */
.top-pickup{ padding: 6em 0; position: relative; }
.top-pickup::before{ content: ''; width: 100%; height: 21em; position: absolute; left: 0; top: 0; background-color: var(--red-color); }
.top-pickup-ttl{ position: relative; font-family: var(--ff-noto-serif); font-size: inherit; z-index: 1; }
.top-pickup-ttl b{ display: block; color:#fff; white-space: nowrap; }
.top-pickup-ttl small{ display: block; color:var(--yellow-color); }

@media only screen and (min-width: 769px) {
  .top-pickup-row{ display: flex; flex-wrap: wrap; justify-content: space-between; }
  .top-pickup-ttl b{ font-size: 4.5em; line-height: calc(64.5/45); }
  .top-pickup-ttl small{ font-size: 2em; text-align: center; }
  .top-pickup-items{ width: calc(1066/1320 * 100%); }
  .top-pickup-slide-item .lists1-item-img{ height: 18.6em; }
  .top-pickup-slide-item .lists1-item-link{ padding: 2.3em 2.5em 3em; }
}

@media only screen and (max-width: 768px) {
  .top-pickup{ padding: 3em 0 6em; margin-top: 3em; }
  .top-pickup-slide{ padding-bottom: 2.3em; }
  .top-pickup-pagination{ bottom: -2px !important; }
  .top-pickup-pagination .swiper-pagination-bullet{ margin: 0 .5em !important; width: 5em !important; height: 3px !important; border-radius: 5px !important; background-color: var(--light-brown) !important; opacity: 1 !important; }
  .top-pickup-pagination .swiper-pagination-bullet-active{ background-color: var(--yellow-color) !important; }
  .top-pickup::before{ height: 20em; }
  .top-pickup-ttl{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .top-pickup-ttl b{ font-size: 2.4em; }
  .top-pickup-ttl small{ font-size: 1.4em;}
  .top-pickup-items{ margin-top: 1.5em; }
}

/*
Top show
==================================================== */
.top-show{ margin-top: 8em; padding: 11.6em 0 11.3em; background-image: url(../../img/top/top_show_bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.top-show-btn{ max-width: 29em; margin: 4.4em auto 0; }
.top-show-row{ display: flex; flex-wrap: wrap; }
.top-show-ttl{ display: table; padding: 1em 3em 0 3.5em; margin: 0 auto; font-size: inherit; font-family: var(--ff-noto-serif); background: url(../../img/top/top_show_border_1.png) no-repeat 0 0 / auto 100%, url(../../img/top/top_show_border_2.png) no-repeat right bottom / auto 100%; }

/* .top-show-vlt--red{ margin-top: .4615em; margin-right: .0769em; font-size: 6.5em; line-height: calc(75/65); writing-mode: vertical-rl; text-orientation: upright; color:var(--red-color); letter-spacing: .21em; }
.top-show-vlt--black{ font-size: 3.5em; line-height: calc(45/35); writing-mode: vertical-rl; text-orientation: upright; vertical-align: top; letter-spacing: .21em; } */

.top-show-vlt--red{ display: inline-block; word-break: break-all; width: 1em; margin-top: .4615em; margin-right: .1846em; font-size: 6.5em; line-height: calc(75/65); /*writing-mode: vertical-rl;*/ text-orientation: upright; color:var(--red-color); letter-spacing: .21em; }
.top-show-vlt--black{ display: inline-block; word-break: break-all; width: 1em; font-size: 3.5em; line-height: calc(45/35); /*writing-mode: vertical-rl;*/ text-orientation: upright; vertical-align: top; letter-spacing: .21em; }

.top-show-ttl-2{ margin-top: 1.6875em; font-size: 3.2em; font-weight: bold; font-family: var(--ff-noto-serif); line-height: calc(48/32); }
.top-show-txt{ margin-top: 1em; }
.top-show-pht{ overflow: hidden; }

@media only screen and (min-width: 769px) {
  .top-show-row{ align-items: flex-end; padding-left: 8em; }
  .top-show-desc{ width: calc(570/1240 * 100%); padding-right: 5.5em; }
  .top-show-pht{ width: calc(670/1240 * 100%); border-radius: .5em; }
}

@media only screen and (max-width: 768px) {
  .top-show{ margin-top: 0; padding: 4.4em 0 0; background-image: url(../../img/top/top_show_bg_sp.png); background-size: 100% auto; background-position: center 0; }
  .top-show-row{ position: relative; flex-direction: column-reverse; align-items: flex-end; padding-top: 14.4em; }
  .top-show-ttl{ position: absolute; left: 0; top: 0; padding: 0 1.85em; }

  /* .top-show-vlt--red{ font-size: 3.3em; margin-right: 0; letter-spacing: .41em; }
  .top-show-vlt--black{ font-size: 1.8em; letter-spacing: .41em; } */

  .top-show-vlt--red{ font-size: 3.3em; line-height: 1.32; margin-right: .26em; letter-spacing: .41em; }
  .top-show-vlt--black{ font-size: 1.8em; line-height: 1.35; letter-spacing: .41em; }

  .top-show-pht{ max-width: 28.5em; margin-right: -2.5em; border-radius: .5em 0 0 .5em; }
  .top-show-desc{ width: 100%; }
  .top-show-ttl-2{ font-size: 2.1em; }
  .top-show-txt{ margin-top: .87em; }
  .top-show-btn{ margin-top: 3em; }
}

/*
Top Products
==================================================== */
.top-products{ padding-bottom: 7.7em; }
.top-products-items{ margin-top: 5.2em; }
.top-products-row{ display: flex; flex-wrap: wrap; }
.top-products-info{background-color:var(--light-brown);}
.top-products-pht img{ object-fit: cover; object-position: center; height: 100%; width: 100%; }
.top-products-title{ margin: 0 auto; font-size: 4.5em; font-weight: bold; font-family: var(--ff-noto-serif); line-height: calc(55/45); letter-spacing: .1222em; writing-mode: vertical-rl; color: var(--red-color); }
.top-products-name{ margin-bottom: .3125em; font-size: 3.2em; font-weight: bold; font-family: var(--ff-noto-serif); text-align: center; line-height: calc(48/32); }
@media only screen and (min-width: 769px) {
  .top-products-item:nth-child(odd){ display: flex; flex-wrap: wrap; justify-content: flex-end; background-color: var(--red-color); }
  .top-products-item:nth-child(even){ background-color: var(--main-color); }
  .top-products-item:nth-child(odd) .top-products-row{ flex-direction: row-reverse; }
  .top-products-row{ max-width: 154em; }
  .top-products-info{ width: 45em; padding: 8em calc(86/1540 * 100%) 6em; }
  .top-products-pht{ width: calc(100% - 45em); }
  .top-products-name{ margin-top:2.875em; }
  .top-prouducts-btn{ margin-top: 3.5em; }
}

@media only screen and (max-width: 768px) {
  .top-products{ padding-top: 6em; padding-bottom: 0; }
  .top-products-items{ margin-top: 1.5em; }
  .top-products-item:before{ content: ''; display: block; height: 3px; background-color:var(--red-color); background: linear-gradient(90deg, #ae915b 4%, #c8b28e 11%, #c1a77c 15%, #b28b50 21%, #ae8545 23%, #bf9e63 33%, #e3d1b1 44%, #b89443 80%, #c6ad74 100%); }
  .top-products-title{ font-size: 2.6rem; }
  .top-products-name{ margin-top: 1.8095em; margin-bottom: .4761em; font-size: 2.1em; line-height: calc(31.5/21); }
  .top-products-info{ padding: 4.5em 5.2em 7em; }
  .top-prouducts-btn{ margin-top: 3em; }
}

/*
Top Store
==================================================== */
.top-store{ padding-top: 5em; padding-bottom: 7.7em; }
.top-store-bnr{ margin-top: 5.4em; }
.top-store-info{ padding: 7em 8em; background-color: var(--light-brown); }
.top-store-table{ width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--light-orange); }
.top-store-table th,
.top-store-table td{ padding: 1.1875em 0; font-size: 1.6em; text-align: left; line-height: calc(27/16); border-top: 1px solid var(--light-orange); vertical-align:top; }
.top-store-table td p+p{ margin-top: .9375em; }
.top-store-map iframe{ width: 100%; border-radius: 5px; }
.top-store-access-txt-head{ display: block; position: relative; padding-left: .625em; margin-bottom: .3125em; }
.top-store-access-txt-head::before{ content: ''; position: absolute; left: 0; top: .625em; width: .4375em; height: .4375em; border-radius: 50%; background-color: var(--main-color); line-height: 1; }
.top-store-access-txt-block{ display: flex; flex: 2; }
.top-store-access-txt-block span:first-child{ white-space: nowrap; }

@media only screen and (min-width: 769px) {
  .top-store-row{ display: flex; flex-wrap: wrap; justify-content: space-between; }
  .top-store-desc{ width: calc(475/1160 * 100%); }
  .top-store-table th{ width: 7.125em; }
  .top-store-map{ width: calc(625/1160 * 100%); }
  .top-store-map iframe{ height: calc(100% - 4px); }
}

@media only screen and (max-width: 768px) {
  .top-store{ padding-top: 0; padding-bottom: 0; }
  .top-store .wrap-1320{ padding: 0 2em; }
  .top-store:before{ margin-bottom: 6em; content: ''; display: block; height: 3px; background-color:var(--red-color); background: linear-gradient(90deg, #ae915b 4%, #c8b28e 11%, #c1a77c 15%, #b28b50 21%, #ae8545 23%, #bf9e63 33%, #e3d1b1 44%, #b89443 80%, #c6ad74 100%); }
  .top-store-table th{ width: 5.625em; }
  .top-store-bnr{ margin-top: 1.5em; margin-left: -2em; width: calc(100% + 4em); }
  .top-store-info{ position: relative; padding: 5em 3em 4.8em; margin-top: -5em; border-radius: .5em; }
  .top-store-map{ margin-top: 5em; margin-left: -5em; width: calc(100% + 10em); height: 23em; }
  .top-store-map iframe{ height: 100%; }
  .top-store-access{ margin-top: 3em; }
  .top-store-access p+p{ margin-top: 1em; }
  .top-store-access b{ display: block; margin-bottom: .3125em; }
}

/*
Top About
==================================================== */
.top-about{ padding-top: 5em; }
.top-about-pannel{ margin-top: 5em; padding: 13em 0; background-color: #3c1100; }
.top-about-box{ position: relative; padding: 5.8em 0; color:var(--light-brown); }
.top-about-slide-title{ font-size: 3.2em; font-family: var(--ff-noto-serif); line-height: calc(48/32); }
.top-about-slide-txt{ margin-top: 1.125em; }
.top-about-slide-img{ overflow: hidden; border-radius: 5px; }
.top-about-slide-img img{ object-fit: cover; object-position: center; width: 100%; height: 100%; }
.top-about-slide-pagination{ bottom: -2px !important; }
.top-about-slide-pagination .swiper-pagination-bullet{ margin: 0 .5em !important; width: 5em !important; height: .6em !important; border-radius: .5em !important; background-color: var(--light-brown) !important; opacity: 1 !important; }
.top-about-slide-pagination .swiper-pagination-bullet-active{ background-color: var(--yellow-color) !important; }

@media only screen and (min-width: 769px) {
  .top-about-box::before{ content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; pointer-events: none; background: url(../../img/top/about_frame.png) no-repeat center center / 100% 100%; }
  .top-about-slide{ padding-bottom: 3em; }
  .top-about-slide-row{ max-width: calc(1030/1320 * 100%); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
  .top-about-slide-img{ width: calc(530/1030 * 100%); }
  .top-about-slide-info{ width: calc(440/1030 * 100%); }
  .swiper-button-custom-prev,
  .swiper-button-custom-next{ cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; position: absolute; top: calc(50% - 1.5em); transform: translateY(-50%); width: 5em; height: 5em; border: 1px solid var(--red-color); border-radius: 50%; background-color: var(--red-color); z-index: 1; transition: .2s ease; }
  .swiper-button-custom-prev{ transform: translateY(-50%) rotate(180deg); left: 4em; }
  .swiper-button-custom-next{ right: 4em; }
  .swiper-button-custom-prev:hover,
  .swiper-button-custom-next:hover{ border-color:#fff; background-color: transparent; }
}

@media only screen and (max-width: 768px) {
  .top-about{ padding-top: 6em; }
  .top-about-pannel{ position: relative; padding:6em 0; margin-top: 1.5em; }
  .top-about-pannel:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; background: url(../../img/top/about_frame_sp.png) no-repeat 0 0 / 100% 100%; }
  .top-about-pannel .wrap-1320{ padding: 0; }
  .top-about-box{ padding: 0; background: unset; }
  .top-about-slide{ padding-bottom: 3em; }
  .top-about-slide-title{ margin-top: 1.4285em; font-size: 2.1em; line-height: calc(31.5/21); }
  .top-about-slide-txt{ margin-top: .875em; }
  .top-about-slide-pagination .swiper-pagination-bullet{ height: 0.3em !important; }
  .swiper-button-custom-prev,
  .swiper-button-custom-next{ display: none; }
}

/*
Top News
==================================================== */
.top-news{ padding-top: 5em; margin-top: 7em; }
.top-linkbtn{ margin-top: 4em; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.top-linkbtn .btn-1{ min-width: 20.2em; }

/*
Top Instagram
==================================================== */
.top-instagram{ padding-top: 5em; margin-top: 9em; }
.top-instagram-items{ margin-top: 5em; }
.top-instagram-extract-link{ max-width: 29em; margin: 6em auto 0; }

@media only screen and (max-width: 768px) {
  .top-news{ margin-top: 0; padding-top: 6em; }
  .top-linkbtn .btn-1{ min-width: 18em; }
  .top-instagram{ margin-top: 1em; padding-top: 6em; }
  .top-instagram-items{ margin-top: 1.5em; }
  .top-instagram-extract-link{ margin-top: 4em; max-width: 27em; }
}