@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,800");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mitr&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arimo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Allura&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cabin&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap");
@import url("https://use.typekit.net/pkp6cyi.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mulish&display=swap");
@import url("https://use.typekit.net/lpx2egf.css");

@import url("https://use.typekit.net/dli7wrx.css");

body{
  letter-spacing: 0;
}

div {
  position: relative;
}


h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.wrapper {
  width: 100%;
  max-width: 1600px;
  margin: auto
}

.wrapper-1800 {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1750 {
  max-width: 1750px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1700 {
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1650 {
  max-width: 1650px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1550 {
  max-width: 1550px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1500 {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1450 {
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1400 {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1350 {
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1300 {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1250 {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1200 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1150 {
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1100 {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1050 {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-1000 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-950 {
  max-width: 950px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-900 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-850 {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-800 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-750 {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-700 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-650 {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-600 {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-550 {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto
}

.wrapper-500 {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto
}

.btn {
  font-size: 17px !important;
  font-weight: 100;
  border-radius: 1.25em !important
}

.btn-back {
  font-size: 15px !important;
  color: #303030 !important;
  padding: .35em 1.25em !important
}

.btn-noRound {
  border-radius: 0 !important
}

.btn svg {
  margin-top: -5px
}

.btn:hover {
  background-color: #a47764 !important;
  color: #fff !important
}

.btn:hover path {
  fill: #fff
}

.bgColor-main {
  background-color: #a47764 !important
}

.bgColor-submain {
  background-color: #cee2e0 !important
}

.bgColor-itemSub,
.bgColor-itemContent {
  background-color:  !important
}

.bgColor-Normal {
  background-color: #f1f4f7 !important
}

.bgColor-Default {
  background-color: #dbdbdb !important
}

.btnColor-main {
  background-color: #a47764;
  color: #fff !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.btnColor-main:hover {
  background-color: #8cbb59
}

.btnColor-submain {
  background-color: #cee2e0;
  color: #fff !important;
  padding: .75rem 1.5rem
}

.btnColor-submain:hover {
  background-color: #a47764
}

.btnColor-dark {
  background-color: #000;
  color: #fff !important;
  padding: .75rem 1.5rem
}

.btnColor-dark:hover {
  background-color: #a47764
}

.btnColor-dark-outline {
  background-color: #fff;
  border: 1px solid #000;
  color: #000 !important
}

.btnColor-danger {
  background-color: #c41c1c;
  color: #fff !important;
  padding-top: .75rem;
  padding-bottom: .75rem;
  padding-right: 3.5rem !important;
  padding-left: 3.5rem !important;
  line-height: 1.75 !important
}

.btnColor-danger:hover {
  background-color: #a47764
}

.btnColor-white {
  background-color: #fff;
  color: #000 !important;
  padding: .75rem 1.5rem
}

.btnColor-white:hover {
  background-color: #a47764;
  color: #fff !important
}

@media screen and (min-width: 1201px) {
  .btnColor-paypal {
    width: 25%
  }
}

.btnColor-outline-main {
  border: 1px solid #a47764;
  color: #a47764;
  background-color: #fff;
  padding: .4rem 1.25rem .3rem !important
}

.btnColor-outline-main:hover {
  background-color: #a47764;
  color: #fff !important
}

.btnColor-outline-submain {
  border: 1px solid #cee2e0;
  color: #cee2e0;
  padding: .4rem 1.25rem .3rem !important
}

.btnColor-outline-submain:hover {
  background-color: #cee2e0;
  color: #fff !important
}

.btnColor-outline-default {
  border: 1px solid #dbdbdb;
  color: #000;
  padding: .4rem 1.25rem .3rem !important;
  background-color: #fff
}

.btnColor-outline-default:hover {
  background-color: #a47764;
  color: #fff !important
}

.btnColor-outline-lg {
  line-height: 1;
  padding: 1.25rem 1.5rem 1rem !important
}

.btnColor-xlg {
  padding: .75rem 1.5rem !important
}

.btnColor-lg {
  line-height: 1;
  padding: 1.25rem 3rem !important
}

.btnColor-sm {
  line-height: 1;
  padding: .6rem 1rem .65rem !important
}

/* :root {
  --grid-columns: 1fr;
  --grid-columns-desklg: 1fr;
  --grid-columns-desk: 1fr;
  --grid-columns-mobile: 1fr;
  --grid-gap: 10px
} */

:root {
    --grid-columns: 1fr;
    --grid-columns-desklg: 1fr;
    --grid-columns-desk: 1fr;
    --grid-columns-mobile: 1fr;
    --grid-gap: 10px;
    --grid-bg-color: transparent;
    --grid-bg-image: url(../assets-compressed/bg.png);
    --grid-bg-position: top;
    --grid-bg-size: contain;
    --grid-bg-size-mobile: contain;
    --grid-padding: 0;
    --grid-padding-mobile: 0;
    --grid-margin: 0;
    --grid-margin-mobile: 0
}

.grid-container {
  display: grid;
  grid-template-columns: var(--grid-columns) !important;
  gap: var(--grid-gap) !important
}

@media screen and (min-width: 1501px) and (max-width: 1700px) {
  .grid-container {
    grid-template-columns: var(--grid-columns-desklg) !important;
    gap: var(--grid-gap-mobile) !important
  }
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
  .grid-container {
    grid-template-columns: var(--grid-columns-desk) !important;
    gap: var(--grid-gap-mobile) !important
  }
}

@media screen and (max-width: 1200px) {
  .grid-container {
    grid-template-columns: var(--grid-columns-mobile) !important;
    gap: var(--grid-gap-mobile) !important
  }

  .grid-container .card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin: 0 !important
  }
}

.headingColor-main {
  /* background-color: #a47764 !important;
  color: #fff !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  --min-size: 18;
  --max-size: 25;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important;
  font-family: 'Poppins', sans-serif !important; */

  /* border: #a47764 1px solid !important; */
  color: #7b5747 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
  --min-size: 18;
  --max-size: 28;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important;
  /* font-family: 'Poppins', sans-serif !important; */
  font-family: "avenir-next-world", sans-serif !important;
  font-weight: 900 !important;

}

.headingColor-main.text-center{
  text-align: left !important;
  padding-left: 0 !important;
}

.rounded-5 {
  border-radius: 2rem !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-center {
  text-align: center !important;
}

/* 首頁 */
.index-content {
  padding-top: 2em;
  padding-bottom: 2em
}

@media screen and (min-width: 1201px) {
  .index-content {
    padding: .75em
  }
}

@media screen and (min-width: 1201px) and (max-width: 1700px) {
  .index-content.index-pageCard {
    padding-left: 5.2631578947vw;
    padding-right: 5.2631578947vw
  }

  .index-pageCard-best{
    padding-left: 2em !important;
    padding-right: 2em !important;
  }

  .index-pageCard-best .index-pageHead{
    padding-left: 2.5em;
  }
}

@media screen and (max-width: 1200px) {
  .index-content {
    padding: 1em
  }

  .index-content [data-aos] {
    opacity: 1 !important;
    transform: translateY(0) !important
  }
}

.index-content-bg {
  background-color: #e7eadf
}

.index-pageArticle {
  --min-size: 18;
  --max-size: 20;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
  line-height: 2
}

.index-pageBrand .jumbotron-slogan {
  --min-size: 16;
  --max-size: 50;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
  font-family: 'Poppins', sans-serif !important
}

.index-Hotproduct-swiper {
  padding-left: 2rem;
  padding-right: 2rem
}

@media screen and (min-width: 1201px) {
  .index-Hotproduct-swiper {
    padding-right: 5rem;
    padding-left: 5rem
  }
}

@media screen and (min-width: 1201px) and (max-width: 14500px) {
  .index-Hotproduct-swiper {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }

  .index-Hotproduct-swiper .swiper-button-prev{
    left: 0;
  }

  .index-Hotproduct-swiper .swiper-button-next{
    right: 0;
  }
}

@media screen and (max-width: 1200px) {
    .index-pageBrand .jumbotron-container {
      margin-left: calc(var(--bs-gutter-x) * -0.25);
      margin-right: calc(var(--bs-gutter-x) * -0.25);
    }
  
    .index-pageBrand .jumbotron-slogan{
        margin-bottom: 0.1em !important;
    }

    .index-pageBrand .jumbotron-img img{
        margin-bottom: -6px;
    }
}

.page-banner {
  width: 100%;
  overflow: hidden;
  z-index: 1
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  .page-banner {
    margin-top: 1%
  }
}

@media screen and (min-width: 1201px) {
  .fancy-banner {
    margin-top: 1em;
    padding-left: .75em;
    padding-right: .75em
  }
}

.fancy-banner-swiper {
  overflow: hidden
}

.fancy-banner-swiper-photo .btn{
  background-color: transparent !important;
  border: #fff 2px solid;
  font-weight: 300 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

.fancy-banner-swiper-photo .btn:hover{
  background-color: #fff !important;
  color: #000 !important;
}

@media screen and (min-width: 1201px) {
  .fancy-banner-swiper-photo {
    -webkit-mask-position: left bottom;
    mask-position: left bottom
  }

  .fancy-banner-swiper-photo .jumbotron-content {
    width: 100%;
    top: 0;
    transform: translateY(0);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
  }

  .fancy-banner-swiper-photo .jumbotron-slogan {
    transform: translateY(2.5dvw);
    transition: .15s
  }

  .fancy-banner-swiper-photo .jumbotron-button {
    transform: translateY(160%);
    transition: .15s .15s
  }

  .fancy-banner-swiper-photo .btn {
    border-radius: 0 !important;
    line-height: 1
  }

  .fancy-banner-swiper-photo .jumbotron-container {
    cursor: pointer
  }

  .fancy-banner-swiper-photo .jumbotron-container:hover .jumbotron-slogan,
  .fancy-banner-swiper-photo .jumbotron-container:hover .jumbotron-button {
    transform: translateY(0)
  }
}

@media screen and (max-width: 1200px) {
  .fancy-banner-swiper-photo .jumbotron-column {
    flex: 0 0 100% !important;
    width: 100% !important
  }

  .fancy-banner-swiper-photo .jumbotron-container {
    margin-bottom: 0 !important
  }

  .fancy-banner-swiper-photo .jumbotron-row li:first-child .jumbotron-container .jumbotron-content{
    display: none;
  }

  .fancy-banner-swiper-photo .btn {
    font-size: 15px !important;
    line-height: 1.35;
    padding: .25em .75em !important
  }
}

.fancy-swiper-pagination {
  position: static !important;
  margin-top: 1em
}

.fancy-swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: #a47764 1px solid;
  opacity: 1
}

.fancy-swiper-pagination .swiper-pagination-bullet-active {
  background-color: #a47764
}

.fancy-swiper-navigation {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0
}

.fancy-swiper-navigation .swiper-button-prev,
.fancy-swiper-navigation .swiper-button-next {
  color: #000
}

.swiper-slide{
    width: 100% !important;
}

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

  .fancy-swiper-navigation .swiper-button-prev:after,
  .fancy-swiper-navigation .swiper-button-next:after {
    font-size: 1.75em
  }
}

@media screen and (max-width: 1200px) {
  .fancy-swiper-navigation .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -5px)
  }

  .fancy-swiper-navigation .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, -5px)
  }
}

.jumbotron-button a {
  font-weight: 100
}

.jumbotron .text-dark .jumbotron-button,
.jumbotron .text-dark .jumbotron-button a {
  color: #606060
}

.jumbotron .text-white .jumbotron-button,
.jumbotron .text-white .jumbotron-button a {
  color: #e2e2e2 !important
}

.jumbotron-container {
  margin-bottom: 1em;
  overflow: hidden
}

@media screen and (max-width: 1200px) {
  /* .jumbotron-container:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #00000059;
    position: absolute;
    top: 0
  } */

  .jumbotron .text-dark .jumbotron-button a{
    color: #fff !important;
  }
}

.jumbotron-img {
  position: relative
}

.jumbotron-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.card-head,
.jumbotron-head,
.jumbotron-slogan {
  font-family: 'Poppins', sans-serif, Arial !important;
  line-height: 1
}

.jumbotron-slogan {
  --min-size: 18;
  --max-size: 30;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px) !important
}

@media screen and (max-width: 1200px) {
  .jumbotron-slogan {
    color: #fff;
    line-height: 1.1 !important;
  }
}

.jumbotron-button {
  padding-left: 5px;
  margin-top: 2px !important;
}

@media screen and (max-width: 1200px) {
  .jumbotron-button {
    color: #fff !important;
    font-size: .75em
  }
}

.jumbotron-content {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end
}

@media screen and (max-width: 1200px) {
  /* .jumbotron-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end
  } */

  .jumbotron-content .jumbotron-button {
    margin-top: 0;
    margin-bottom: 0
  }
}

.pageCard {
  border: #d1c6c2 1px solid;
  /* cursor: pointer */
}

@media screen and (max-width: 1200px) {
  .pageCard {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem !important
  }
}

.pageCard .card-img-box {
  height: 0;
  /* padding-bottom: 66% */
  padding-bottom: 100%
}

.pageCard .card-img-front,
.pageCard .card-img-back {
  position: absolute;
  width: 100%;
  top: 0;
  transition: .25s
}

.pageCard .card-img-back {
  opacity: 0
}

.pageCard .card-img-top {
  overflow: hidden
}

.pageCard .card-img-top img {
  transition: .25s;
  transform: scale(1)
}

.pageCard .card-head,
.pageCard .card-body {
  padding: 1em 1em 0.5em
}

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

  .pageCard .card-head,
  .pageCard .card-body {
    padding: .5em;
    line-height: 1.1
  }
}

.pageCard .card-head,
.pageCard .card-title {
  --min-size: 16;
  --max-size: 20;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
  font-weight: 300 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
}

.pageCard .card-body {
  background-color: #fff
}

@media screen and (min-width: 1200px) and (max-width: 1500px) {
  .pageCard .card-body .grid-container {
    align-items: flex-start !important;
    padding-top: .2em !important
  }
}

@media screen and (max-width: 1200px) {
    .grid-container .card.pageCard{
      margin-bottom: 10px !important;
    }

    .pageCard .card-head,
    .pageCard .card-title {
        min-height: 3.5em;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

.pageCard .card-des {
  --min-size: 16;
  --max-size: 18;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
  line-height: 1.25
}

@media screen and (max-width: 1200px) {
  .pageCard .card-des {
    line-height: 1.1
  }
}

.pageCard .card-price {
  line-height: 1;
  padding-top: .3em;
  text-align: end
}

.pageCard .card-colour {
  display: flex;
  flex-wrap: wrap;
  gap: .75em
}

.pageCard .card-colour .color_dot {
  position: relative;
  /* cursor: pointer */
}

.pageCard .card-colour .color_dot:before {
  content: "";
  position: absolute;
  top: 8%;
  left: 8%;
  width: calc(73% - 1.5px);
  height: calc(73% - 1.5px);
  border-radius: 50%;
  border: #fff 2px solid;
  opacity: 0
}

.pageCard .card-colour .color_dot:hover:before,
.pageCard .card-colour .color_dot.active:before {
  opacity: 1
}

@media screen and (max-width: 640px) {
  .pageCard .card-colour {
    gap: .25em
  }
}

.pageCard:hover .card-img-front {
  opacity: 0
}

.pageCard:hover .card-img-back {
  opacity: 1
}

.pageCard .card-button .btn {
  padding-top: .3rem !important;
  padding-bottom: .25rem !important
}

.pageCard .card-linkNormal:hover~.card-body .btn {
  background-color: #a47764;
  border-color: #a47764;
  color: #fff !important
}

.pageCard .card-linkNormal:hover~.card-img-top img {
  transform: scale(1.1)
}

.heading-slogan {
  --min-size: 18;
  --max-size: 24;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px)
}

.index-pageSlogan .heading-slogan {
  position: absolute;
  top: .75em;
  left: .75em;
  z-index: 2;
}

.articlebox {
  --min-size: 18;
  --max-size: 20;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px)
}

@media screen and (min-width: 1201px) {
  .articlebox {
    line-height: 1.5 !important
  }
}

.color_dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
  background-color: var(--dotcolor);
  background-image: var(--dotimg)
}

@media screen and (max-width: 640px) {
  .color_dot {
    width: 17px;
    height: 17px
  }
}

.headingColor-secondary {
  /* background-color: #606060 !important;
  color: #fff !important; */
  color: #606060 !important;
  padding: .85rem 1.5rem .75rem;
  --min-size: 18;
  --max-size: 32;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px,var(--font-size),var(--max-size) * 1px);
  line-height: 1.1;
  font-family: "avenir-next-world", sans-serif !important;
}

.text-main {
  color: #a47764 !important;
}

.articlebox,
.articlebox p {
  --min-size: 18;
  --max-size: 20;
  --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
  font-size: clamp(var(--min-size) * 1px,var(--font-size),var(--max-size) * 1px) !important;
  font-weight: initial !important;

  font-family: "avenir-next-world", sans-serif;
  /* font-weight: 100 !important; */
}

@media (min-width: 1201px) {
  .articlebox {
    line-height: 1.5 !important;
  }

  .aboutus-top-container {
    width: calc(100% - 280px);
    margin-left: auto;
  }
}

@media (max-width: 1200px) {
  .page-header{
    float: none !important;
  }
}

/* For 編輯器 */
footer .wrapper .twoflex {
  align-items: flex-start;
}

footer .wrapper .twoflex .rightbox{
  margin-top: 0;
}

footer .wrapper .twoflex .leftbox .companyname img{
  max-height: 60px;
  max-width: 100%;
  /* mix-blend-mode: darken; */
}

footer .wrapper .twogrid{
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 1em;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 1200px) {
  footer .wrapper .twogrid{
    grid-template-columns: 1fr;
  }
}

footer .wrapper .twoflex .rightbox .social .one{
  padding-right: 0.5em;
}

.social-txt{
  font-size: 95%;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.middlebox .menu ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;

  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;

}

.middlebox .menu ul li{
  margin: 0 15px;
}

.middlebox .menu ul li:first-child {
  margin-left: 0;
}

.middlebox .menu .menutxt{
  font-size: 15px;
  padding: 0.65em 1.25em;
  border: #333 1px solid;
  border-radius: 3em;
  text-decoration: none;
  text-align: center;
}

.middlebox .menu .menutxt:hover{
  background-color: #333;
  color: #fff !important;
}

@media (max-width: 1200px) {
  .middlebox .menu ul{
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    gap: 0.5em;
  }

  .middlebox .menu ul::before{
    display: none;
  }

  .middlebox .menu ul li{
    margin: 0;
  }

  .middlebox .menu .menutxt{
    display: block;
    padding-left: 0.25em;
    padding-right: 0.25em;
  }

  footer .wrapper .twoflex .rightbox .social-txt{
    text-align: center;
  }

  footer .wrapper .twoflex .rightbox .social{
    justify-content: center;
  }

  footer .wrapper .twoflex .leftbox .companyname {
    margin-bottom: 0px;
    text-align: center;
  }

  footer .wrapper .twoflex .rightbox .iwaredesign{
    text-align: center;
  }

}

@media (max-width: 380px) {
  .middlebox .menu ul{
    grid-template-columns: repeat(2,1fr);
  }
}

footer .wrapper .twoflex .rightbox .iwaredesign{
  /* color: #333 !important; */
  color: #000 !important;
}