/*.cms-main-area{ background-image: linear-gradient(-180deg, #fff 30%, #ffe1b4 100%);  } */
.bg-1{background: url("../images/index/bg-1-v.jpg") no-repeat right  top; background-size: auto;}
  
 /*font-size*/
.title { font-size: 1.125rem; font-weight: 700;width: 90%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 740px) {
.title {font-size: 1.5rem; }
}
@media (min-width: 1100px) {
.title {font-size: 1.75rem; }
}
@media (min-width: 1300px) {
.title {font-size: 1.875rem; }
}
@media (min-width: 1600px) {
.title {font-size: 2rem; }
}
  
.card-container{width: 100%;padding: 0px; display: flex; flex-wrap: wrap; align-content:flex-start;}
   
.card-list{ width: calc(100%/4 - 60px);  margin:30px;  overflow: hidden;  position: relative;}
@media (max-width: 992px) {
 .card-list{ width: calc(100%/3 - 60px); }   
}
@media (max-width: 767.98px) {
 .card-list{ width: calc(100%/2 - 30px); margin:15px; }   
}
@media (max-width: 320px) {
 .card-list{ width: calc(100%/2 - 20px); margin:15px 10px; }   
}
.card-count-container{ display: flex; align-items: center; width: 100px; height: 100px;  padding: 0px; position: absolute; top:0px; left:0px; }
.card-count{ font-weight: bold; font-size: 36px;width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; align-content: center; border-radius: 50%; margin: auto;   overflow: hidden; color: #fff;  box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5);text-shadow: 0px 0px 5px rgba(0, 0,0, 0.2); transition: all 0.2s ease-in-out;background-color:#f39700;}

.card-content{ padding:0px;border-radius:99rem; border: solid 3px rgba(255,255,255,.5); box-shadow: 0px 4px 8px -2px #fda668; background-blend-mode: overlay; }
.card-content img{ padding:0px;border-radius:99rem; }
.card-footer{ padding: 15px 20px; color:#000; font-size: 1.188rem; font-weight: 700; text-align:center;background-color:transparent; border-top:none; }
 @media (max-width: 640px) {
.card-count-container{   width:40px; height: 40px;   }
.card-count{ font-weight: bold; font-size: 16px;width: 30px; height: 30px; }
 .card-footer{ padding: 15px 0px; font-size: 1rem; }    
}


.article-info{ width: 100%; margin: 0 auto; padding:50px 20px; background: #fff; position: relative; z-index: 9;}
.article-pretitle { margin: auto auto 30px auto; font-size:2.5rem;font-weight: 700;color: #f39800; word-wrap: normal; }
.article-pretitle::before { content: "\2015"; margin-right: 0.25rem;  color:#f39800}
.article-text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 

.article-info::before{ content: attr(data-content); color: #fff; font-size: 72px; font-weight: 700; position: absolute; left:0px; top:0px;  -webkit-text-stroke: 2px #f39800; z-index: -1; opacity: .1;}
.article-content{width: 100%; margin: 0 auto; padding:50px 0px;}

.article-content .navfix{margin: 0px; }


.article-box { position: relative;  -webkit-column-count: 2;  column-count: 2; -webkit-column-gap: 130px; column-gap: 130px; color: #515151; font-size: 0.9rem; line-height: 1.5rem; letter-spacing: 0.05em; margin-bottom: 65px;text-align: justify;  }
.article-box:before { position: absolute;left: 50%; top: 0;content: '';width: 1px; height: 100%;background-color: #ebebeb;}
@media (max-width: 992px) {
.article-box { -webkit-column-gap: 60px; column-gap: 60px;  margin-bottom: 65px; }
}
@media (max-width: 767.98px) {
.article-pretitle { margin: auto auto 30px auto; font-size:2rem;  }
.article-info{ padding:50px 0px; }
.article-box {  -webkit-column-count: 1;  column-count: 1; text-align: left; }
.article-box:before {display: none }
.article-content .btnbox{justify-content: center;}
}



.gooey{ background-image: linear-gradient(120deg, #34e0f0 0%, #00c48b 100%); border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;  width: 350px; height: 444px;  position: absolute; right:-10%; top:5%;animation: morph 3s linear infinite;  transform-style: preserve-3d; outline: 1px solid transparent;  will-change: border-radius;}
.gooey:before,.gooey:after{  content: '';  display: block;  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;  box-shadow: 5px 5px 89px rgba(0, 102, 255, 0.21);  will-change: border-radius, transform, opacity; animation-delay: 200ms;  background-image: linear-gradient(120deg, rgba(0,196,139,.55) 0%, rgba(0,196,139,.89) 100%);}
.gooey:before{  content: ""; width: 100%; height: 80%; position: absolute; left: 0px; top: 50px; animation: morph 3s linear infinite; opacity: .21; animation-duration: 1.5s;}
.gooey:after{ content: ""; width: 80%; height:60%; position: absolute; left: -60px; top: 150px;  animation: morph 3s linear infinite; animation-delay: 400ms; opacity: .8;   }
@keyframes morph{
0%,100%{ border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate3d(0,0,0) rotateZ(0.01deg); }
34%{  border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform:  translate3d(0,5px,0) rotateZ(0.01deg); }
50%{  opacity: .89; transform: translate3d(0,0,0) rotateZ(0.01deg); }
67%{ border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ; transform: translate3d(0,-3px,0) rotateZ(0.01deg); }
}


/*----------------------------------------/
social-icons
----------------------------------------*/
.product-info .social-icons{color:#675952;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.75rem;   }
.product-info .social-icons li{ width: auto!important; margin:5px; padding-top: 8px;  }
.product-info .social-icons li a{ opacity:1;font-size:0!important;color:#675952!important;  }
/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%; margin:0 auto; padding:20px;  background-image: linear-gradient(to bottom, #f1f4f4 0%, #d9e1e0 100%);}
.best-wrap .product-item { width:100%; text-align: center;   padding:0px 30px;  margin: 10px auto; }
.best-wrap .product-item  li{ margin: 0px 10px;  border-radius:10px;border: solid 1px rgba(119,141,141,.1)}
.best-wrap .slick-dots li button:before{ color: #fff; }
.best-wrap .slick-dots li.slick-active button:before { opacity: .75; color: #fff; }
.best-wrap .slick-dots {bottom:-30px;}
.best-wrap .slick-dots li{margin: 15px 2px;}
.best-wrap .product-item .slick-prev {left:-30px; }
.best-wrap .product-item .slick-next{right:-30px;}
.best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next{ top:30%; }

@media (max-width: 767.98px) {
 .best-wrap{  padding:20px 5px;  }   
 .best-wrap .product-item {   padding:0px 10px;  margin: 10px auto; }   
.product-item .slick-prev,.product-item .slick-next{ width:36px; height:36px;top:35%; }
.product-item .slick-prev {left:-15px; }
.product-item .slick-next{right:-15px;}

}



/*-------contact-location-----------*/
 .fullwidth-map { padding: 40px 0; position: relative;  background-image: linear-gradient(to top , #d8e3eb 20%, #fff 100%); }
.map-wrapper-row { max-width:1100px; margin: 0 auto; padding: 60px;}
 .map-pins-component { margin-top: 60px; position: relative; }
.map-pins-component .map-image {  max-width: 100%; opacity: 1;  }
.map-pins-component .pin-icon { width: 40px;}
.map-pins-component .pin { position: absolute;  display: inline-block; text-align: center;  z-index: 10; transition: 0.5s; transform: scale(1) translateY(0); cursor: pointer; perspective: 300px; transform: rotateX(25deg); transform-origin: 50% 100%;}
.map-pins-component .pin:hover, .map-pins-component .pin.is-opened { transition: 0.5s; transform: scale(1.3) translateY(0); z-index: 30;}
.map-pins-component .pin:hover .pin-label span { background: #FFF1C6; color: black; transition: 0.5s;}
.map-pins-component .pin:active { transform: rotateX(25deg) scale(1.1); transition: 0.2s;}
.map-pins-component .pin-popup { border-radius:5px;  position: absolute;  left: calc(100% + 20px); transition: 0.5s;  top: 0; width: auto; max-height: 300px; padding:5px; text-align: left;  transform: scaleY(0); transform-origin: 0 0;   overflow-y: auto;  box-shadow: 6px 6px 5px rgb(0, 0, 0,20%);background: linear-gradient(-180deg, #597990 0%, #d8e3eb 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
    background-blend-mode: screen; }
.map-pins-component .pin-popup h3{font-size:12px!important; font-weight: 600; margin-bottom: 5px; color: #fff; }
.map-pins-component .pin.is-opened .pin-popup { transform: scaleY(1); transition: 0.5s; opacity: 1;}
.map-pins-component .pin-popup figure  {  width: 100px; height: 100px;   display: block; margin: auto;}
.map-pins-component .pin-popup figure img {  width: 100%; height:100%; border-radius:5px;  }

 
 /*座標*/
.map-pins-component .pin-location-1 {  left:22%; top:46%;}
.map-pins-component .pin-location-2 { left: 36%; top: 31%;}
.map-pins-component .pin-location-3 { left: 30%; top: 52%;}
.map-pins-component .pin-location-4 {  left:40%; top:66%;}
.map-pins-component .pin-location-5{ left: 75%; top: 28%;}
  
.pin-dot { width: 26px; height: 26px;color: #fff; font-size: 1rem; font-weight: 700;  border-radius: 50%; background-image: linear-gradient(to right, #ff7c93 0%, #cf0004 100%);position: absolute;z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.pulse { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 30px; height: 30px;}
.pulse:before { content: ""; position: relative; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%;  margin-top: -100%; border-radius: 45px; background-color: #cf0004; -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
.pulse:after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background-color: white; border-radius: 15px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;}

@-webkit-keyframes pulse-ring {
  0% { transform: scale(0.33); }
  80%, 100% { opacity: 0;  }
}
@keyframes pulse-ring {
  0% { transform: scale(0.33); }
  80%, 100% { opacity: 0;  }
}
@-webkit-keyframes pulse-dot {
  0% { transform: scale(0.8); }
  50% { transform: scale(1); }
  100% { transform: scale(0.8); }
}
@keyframes pulse-dot {
  0% { transform: scale(0.8); }
  50% { transform: scale(1); }
  100% { transform: scale(0.8); }
}