/*    
    Add by Misaki*
    2021/09/27
    */
/* 
.pr{position:relative;}
.pr > div{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:flex-end;}
.pr_name{ margin: 0 calc(50% - 50vw); width: 58vw; background-color:rgba(255,255,255,.7); padding:1rem; margin:0 0 1.5rem;}
.pr_name > div p.h3{font-size:3.8vw;}
.pr_name > div p.h5{font-size: 3vw;}
.pr_name small{font-weight:normal; display:table; align-items:center; border:1px solid #43534A; padding:.25rem .5rem; font-size:2.9vw; margin-bottom:.5rem;}
@media (min-width: 768px) {
  .pr_name{width: 45vw;}
  .pr_name > div p{line-height:2.3rem;}
  .pr_name > div p.h3{font-size:2.8vw;}
  .pr_name > div p.h5{font-size: 2.3vw;}
  .pr_name small{padding:.3rem 1.5rem; font-size:1rem; margin-bottom:.8rem; font-size:2.2vw;}
}
@media (min-width: 992px) {
  .pr_name{ margin: 0 0 3rem; width:auto; padding:1.8rem;}
  .pr_name > div p.h3{font-size: calc(1.3rem + .6vw);}
  .pr_name > div p.h5{font-size: 1.25rem;}
  .pr_name small{font-size:1rem;}
}
*/

/* ======
  main
 ====== */
body {
  background-color: #f7f7f8;
}
header .navbar,
header .navbar.js-scroll-nav {
  background-color: #fff;
}
main {
  overflow: hidden;
}
main section {
  position: relative;
}
@media (min-width: 992px) {
  header .navbar {
    background-color: transparent;
  }
  /* 
  main section.news > .container-y,
  main section.staff > .container-y{padding-bottom:10rem; border-bottom:1px solid #000;}*/
}

/* ======
  headline
 ====== */

/* ======
  color
 ====== */

.service,
.introduction {
  border-top: none;
}

main .btn {
  box-shadow: none !important;
  padding: 0.375rem 1rem;
  color: var(--sub);
  position: relative;
  font-size: 1.05rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
main .btn:before,
main .btn:after {
  content: "";
  height: 2px;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: var(--sub);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
main .btn:after {
  width: 0;
  transform: scaleX(0);
  opacity: 0;
}
main .btn:hover:after {
  width: 100%;
  transform: scaleX(1);
  opacity: 1;
  background-color: var(--main_deep);
}

main a:hover .btn.btn-ho-white,
.btn.btn-ho-white:hover {
  color: #fff;
}
main a:hover .btn.btn-ho-white:after,
.btn.btn-ho-white:hover:after {
  width: 100%;
  background-color: #fff;
  transform: scaleX(1);
  opacity: 1;
}

main .btn.btn-white {
  color: #fff;
}
main .btn.btn-white:before,
main .btn.btn-white:after {
  background-color: #fff;
}
main .btn.btn-white:hover {
  color: var(--main_deep);
}
main .btn.btn-white:hover:after {
  background-color: var(--main_deep);
}

.product .product_text {
  padding: 2rem 15px;
  background-color: var(--main_light);
  color: #fff;
  text-align: center;
}
.product h3 {
  margin-bottom: 2rem;
}
@media (min-width: 992px) {
  .product {
    display: flex;
    position: relative;
    padding: 4rem 0;
  }
  .product:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--main_light);
    width: 70%;
  }
  .product .product_img {
    width: 50%;
  }
  .product .product_text {
    width: calc(960px / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
  }
  .product h3 {
    font-size: 2rem;
  }
}
@media (min-width: 1200px) {
  .product .product_text {
    width: calc(1140px / 2);
  }
  .product .product_text > div > p:last-child {
    margin-top: 4rem;
  }
}
@media (min-width: 1400px) {
  .product .product_text {
    width: calc(1320px / 2);
  }
}

.btn-bunjo {
  color: #fff;
  font-weight: bold;
  background-color: #937d4c;
  border: 1px solid #fff;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  margin: 3rem auto;
}
.btn-bunjo > p {
  font-size: 2.25rem;
}
.btn-bunjo .btn {
  color: #fff;
}
.btn-bunjo .btn:before,
main .btn:after {
  background-color: #fff;
}
.btn-bunjo:hover {
  color: #937d4c;
  background-color: #fff;
  border: 1px solid #937d4c;
}
.btn-bunjo:hover .btn {
  color: #937d4c;
}
.btn-bunjo:hover .btn:before,
main .btn:after {
  background-color: #937d4c;
}

#index .col_two a {
  position: relative;
  overflow: hidden;
}
#index .col_two a > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 1rem 5rem 1rem 2rem;
}
#index .col_two a > div:before,
#index .col_two a > div:after {
  position: absolute;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#index .col_two a > div:before {
  content: "";
  background-color: #fff;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
#index .col_two a:hover > div:before {
  background-color: transparent;
}
#index .col_two a > div:after {
  content: "Click";
  bottom: -0.5rem;
  right: 0;
  color: #fff;
  transition-delay: 0.3s;
  opacity: 0;
  font-size: 1.1rem;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 50%, var(--main_light) 50.5%) no-repeat top left/100% 100%;
  padding: 4rem 0.8rem 0.8rem 4rem;
}
#index .col_two a:hover > div:after {
  bottom: 0;
  right: 0;
  color: #fff;
  opacity: 1;
}
#index .col_two a > div > div {
  position: relative;
  z-index: 1;
}
#index .col_two p {
  margin-bottom: 0;
}
#index .col_two p br {
  display: none;
}
#index .col_two a:hover,
#index .col_two a:hover h3,
#index .col_two a:hover p {
  color: #fff;
}
@media (min-width: 576px) {
  #index .col_two a > div {
    padding: 1rem 2rem;
  }
}
@media (min-width: 768px) {
  #index .col_two p br {
    display: inline;
  }
}

.pickup .col_two a:before {
  background-color: rgba(0, 0, 0, 0.3);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.pickup .col_two a.disabled {
  pointer-events: none;
}
.pickup .col_two a.disabled:before {
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}
#index .col_two a.disabled > div:after {
  content: "準備中";
  z-index: 9999;
  top: 50%;
  left: 50%;
  right: revert;
  bottom: revert;
  background: revert;
  opacity: 1;
  padding: 0;
  transform: translate(-50%, -50%);
}
.pickup .col_two p {
  font-size: 0.85rem;
}
.pickup .col_two h3 {
  font-size: 1rem;
  font-weight: 500;
}
.pickup .col_two h3::before {
  content: attr(data-en);
  display: block;
  color: var(--main);
  font-size: 7vw;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  line-height: 1;
  margin-bottom: 5px;
}
.pickup .col_two a:hover h3::before {
  color: #fff;
}
@media (min-width: 576px) {
  .pickup .col_two h3 {
    font-size: 1.3rem;
  }
  .pickup .col_two h3::before {
    font-size: 6.5vw;
  }
  .pickup .col_two p {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  .pickup .col_two h3::before {
    font-size: 6vw;
  }
}
@media (min-width: 992px) {
  .pickup .col_two h3::before {
    font-size: 2.8rem;
  }
}
@media (min-width: 1200px) {
  .pickup .col_two h3::before {
    font-size: 3.8rem;
  }
}

.news_wrap div {
  box-sizing: border-box;
  transition: all ease-in-out 0.5s;
  -moz-transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
.news_wrap .tab {
  margin: 0px;
  cursor: pointer;
}

.news_wrap #news-content {
  overflow: hidden;
  position: relative;
}

.news_wrap .tabcontent {
  position: absolute;
  left: 0px;
  top: 0px;
  background: #f7f7f8;
  width: 100%;
  transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

.news_wrap .tabcontent:first-child {
  position: relative;
}
.news_wrap .tabcontent.tab-active {
  border-top: 0px;
  display: block;
  transform: translateY(0%);
  -moz-transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

/* A tiny wee bit of visual formating */
.news_wrap #news-container {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.news_wrap .tab {
  padding: 0.5rem 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: var(--sub);
  text-align: center;
  flex: 1;
  font-size: 0.85rem;
}
.news_wrap .current-tab {
  background: var(--sub);
  color: #fff;
}
.topics dl {
  margin: 0;
}
.topics .tabcontent dl > div {
  display: block;
  border-bottom: 1px solid transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.topics .tabcontent.tab-active dl > div {
  border-color: #000000;
}
.topics dl > div dt {
  font-weight: normal;
  width: auto;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 1.5rem 0 0 1.5rem;
  font-size: 0.95rem;
}
.topics dl > div dt span {
  margin-left: 1rem;
}
.topics dl > div dd {
  margin: 0;
  flex: 1;
  display: flex;
}
.topics dl > div dd a {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  font-size: 0.95rem;
}
@media (min-width: 992px) {
  .news_wrap {
    display: flex;
  }
  .news_wrap .news_inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .news_wrap #news-container {
    display: block;
  }
  .news_wrap #news-content {
    flex: 1;
    margin-left: 60px;
  }
  .news_wrap .tab {
    padding: 0.5rem 2rem;
    font-size: 0.95rem;
  }
  .topics .tabcontent dl > div {
    display: flex;
  }
  .topics dl > div dt {
    width: 230px;
  }
  .topics dl > div dt {
    padding: 2rem 0 2rem 1.5rem;
  }
  .topics dl > div dd a {
    padding: 2rem 1.5rem;
  }
  .topics dl > div dt span {
    margin-left: 2rem;
  }
}
@media (max-width: 576px) {
  .news .container,
  .staff .container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  /*
	.staff .container div.row,
	.staff .container div.row > div{margin-left:0; margin-right:0; padding-left:0; padding-bottom:0;}
	*/
  .staff .swiper_staff_intro {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.staff {
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
}
.staff dl {
  margin-bottom: 2rem;
}
.staff .topics dl > div dt {
  width: 230px;
}
.staff div.row > div > p:last-child,
.staff .swiper-slide > p:last-child {
  margin: auto 0 0;
}
.staff div.image {
  position: relative;
  overflow: hidden;
  padding-top: 66.66%;
}
.staff div.image img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  object-fit: cover;
}
.staff h3 {
  margin: 10% 0 2rem;
  text-align: center;
}
@media (min-width: 992px) {
  .staff div.row > div {
    display: flex;
    flex-direction: column;
  }
}

.staff #carousel_staff_intro > div.carousel-inner {
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
  flex: 1;
}
.swiper_staff_intro .swiper {
  position: relative;
}
.staff #carousel_staff_intro .carousel-indicators {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  background-color: transparent;
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #f7f7f8;
  margin: 0;
  display: flex;
}
.staff #carousel_staff_intro .carousel-indicators > button {
  border-radius: 0;
  background-color: #f7f7f8;
  border: 1px solid var(--sub);
  opacity: 1 !important;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0;
  border-right: none;
}
.staff #carousel_staff_intro .carousel-indicators > button:last-child {
  border-right: 1px solid var(--sub);
}
.staff #carousel_staff_intro .carousel-indicators > button[aria-current="true"] {
  background-color: var(--sub);
}
.staff #carousel_staff_intro .carousel-item > p:last-child {
  margin-top: auto;
}
@media (min-width: 350px) {
  .staff #carousel_staff_intro .carousel-indicators {
    top: 70%;
  }
}
@media (min-width: 576px) {
  .staff #carousel_staff_intro .carousel-indicators {
    top: 74%;
  }
}
@media (min-width: 768px) {
  .staff #carousel_staff_intro .carousel-indicators {
    top: 77%;
  }
}
@media (min-width: 992px) {
  .staff #carousel_staff_intro {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .staff #carousel_staff_intro .carousel-item {
    height: 100%;
    flex: 1;
  }
  .staff #carousel_staff_intro .carousel-item > div {
    display: flex;
    flex-direction: column;
  }
  .staff #carousel_staff_intro .carousel-item-next,
  .carousel-item-prev,
  .staff #carousel_staff_intro .carousel-item.active {
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 1200px) {
  .staff #carousel_staff_intro .carousel-indicators {
    top: 74%;
  }
  .staff #carousel_staff_intro > div.carousel-inner {
    max-width: inherit;
  }
}
@media (min-width: 1400px) {
  .staff #carousel_staff_intro .carousel-indicators {
    top: 76%;
  }
}

.gallery-wrapper .gallery-Swiper-thumb .swiper-slide {
  opacity: 0.4;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.gallery-wrapper .gallery-Swiper-thumb .swiper-slide-thumb-active {
  opacity: 1;
}