@charset "UTF-8";

/*************************
 common 
**************************/
.clg-c-header-brand {
    padding: 0;
    margin: 0;
    line-height: 1;
    color: #595959;
    font-size: 12px;
    text-align: center;
}


/* FLOCSS entry */
/* Layout: Grid */
/* FLOCSS entry */
.clg-l-footer {
  background-color: #000;
  padding: 46px 0;
}
@media screen and (max-width: 996px) {
  .clg-l-footer {
    padding: 51px 0 65px;
  }
}
.clg-l-footer__inner {
  display: grid;
  grid-template-areas: "logo info" "nav info" "copyright info";
  grid-template-columns: auto 315px;
  grid-template-rows: auto auto auto;
  align-items: center;
  padding: 0 calc(47 / 1440 * 100vw);
  margin-inline: auto;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__inner {
    grid-template-areas: "logo" "info" "nav" "copyright";
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 0 calc(28 / 375 * 100vw);
  }
}
.clg-l-footer__logo {
  grid-area: logo;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__logo {
    justify-self: center;
  }
}
.clg-l-footer__info {
  grid-area: info;
  align-self: flex-start;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__info {
    align-self: center;
    justify-self: center;
  }
}
.clg-l-footer__info__button {
  margin-top: 18px;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__info__button {
    margin-top: 48px;
    text-align: center;
  }
}
.clg-l-footer__nav {
  grid-area: nav;
  margin-top: 62px;
  max-width: 642px;
  width: 100%;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__nav {
    max-width: unset;
    margin-top: 0;
  }
}
@media screen and (max-width: 996px) {
  .clg-l-footer__nav__top {
    justify-self: center;
  }
}
.clg-l-footer__nav__bottom {
  margin-top: 30px;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__nav__bottom {
    justify-self: center;
  }
}
.clg-l-footer__copyright {
  margin-top: 84px;
  grid-area: copyright;
}
@media screen and (max-width: 996px) {
  .clg-l-footer__copyright {
    margin-top: 0;
    justify-self: center;
  }
}


/* FLOCSS entry */
.clg-c-footer-logo {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.clg-c-footer-logo img {
  display: block;
  width: 148px;
  height: auto;
}

.clg-c-footer-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
@media screen and (max-width: 996px) {
  .clg-c-footer-nav {
    justify-content: center;
    gap: 43px 55px;
  }
}


/* FLOCSS entry */
/* Component: Button */
.clg-c-button, .clg-c-button--footer, .clg-c-button--primary, .clg-c-button--gold, .clg-c-button--secondary, .clg-c-button--load-more, .clg-c-button--view-more, .clg-c-button--message-us, .clg-c-button--back-to-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--clg-spacing-xs);
  padding: var(--clg-spacing-xs) var(--clg-spacing-sm);
  font: inherit;
  color: var(--clg-color-primary-contrast);
  background-color: var(--clg-color-primary);
  border: 0;
  border-radius: var(--clg-radius-sm);
  cursor: pointer;
  transition: background-color var(--clg-duration-base) var(--clg-ease-standard), box-shadow var(--clg-duration-base) var(--clg-ease-standard);
  letter-spacing: 0;
}
.clg-c-button--footer, .clg-c-button--primary, .clg-c-button--gold, .clg-c-button--secondary, .clg-c-button--load-more, .clg-c-button--view-more, .clg-c-button--message-us, .clg-c-button--back-to-top {
  background-color: transparent;
  border: 1px solid #595959;
  padding: 26px;
  line-height: 1;
  font-size: 14px;
  color: #fff;
  max-width: 292px;
  width: 100%;
  transition: color 0.3s ease, background-color 0.3s ease;
  position: relative;
}
@media screen and (max-width: 996px) {
  .clg-c-button--footer, .clg-c-button--primary, .clg-c-button--gold, .clg-c-button--secondary, .clg-c-button--load-more, .clg-c-button--view-more, .clg-c-button--message-us, .clg-c-button--back-to-top {
    max-width: 228px;
  }
}
.clg-c-button--footer::after, .clg-c-button--primary::after, .clg-c-button--gold::after, .clg-c-button--secondary::after, .clg-c-button--load-more::after, .clg-c-button--view-more::after, .clg-c-button--message-us::after, .clg-c-button--back-to-top::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 33px;
  width: 9px;
  height: 15px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"9\" height=\"15\" viewBox=\"0 0 9 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 0.5L8 7.5L1 14.5\" stroke=\"white\" stroke-linejoin=\"round\"/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}
.clg-c-button--footer:hover, .clg-c-button--primary:hover, .clg-c-button--gold:hover, .clg-c-button--secondary:hover, .clg-c-button--load-more:hover, .clg-c-button--view-more:hover, .clg-c-button--message-us:hover, .clg-c-button--back-to-top:hover {
  background-color: #fff;
  color: #000;
  opacity: 1;
}
.clg-c-button--footer:hover::after, .clg-c-button--primary:hover::after, .clg-c-button--gold:hover::after, .clg-c-button--secondary:hover::after, .clg-c-button--load-more:hover::after, .clg-c-button--view-more:hover::after, .clg-c-button--message-us:hover::after, .clg-c-button--back-to-top:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"9\" height=\"15\" viewBox=\"0 0 9 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 0.5L8 7.5L1 14.5\" stroke=\"black\" stroke-linejoin=\"round\"/></svg>");
}
.clg-c-button--view-more, .clg-c-button--message-us, .clg-c-button--back-to-top {
  max-width: 314px;
  padding: 30px;
  background-color: #000;
  font-family: "EB Garamond", "Noto Serif JP", serif;
  font-size: 20px;
}
.clg-c-button--view-more::after, .clg-c-button--message-us::after, .clg-c-button--back-to-top::after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"9\" height=\"15\" viewBox=\"0 0 9 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 0.5L8 7.5L1 14.5\" stroke=\"%23A4A4A4\" stroke-linejoin=\"round\"/></svg>");
}
@media screen and (max-width: 996px) {
  .clg-c-button--view-more, .clg-c-button--message-us, .clg-c-button--back-to-top {
    max-width: 292px;
  }
}
@media screen and (max-width: 767px) {
  .clg-c-button--view-more, .clg-c-button--message-us, .clg-c-button--back-to-top {
    max-width: 100%;
    padding: 27px;
  }
}
.clg-c-button--load-more {
  max-width: 314px;
  padding: 30px;
  background-color: #000;
  font-family: "EB Garamond", "Noto Serif JP", serif;
  font-size: 20px;
}
.clg-c-button--load-more::after {
  right: 33px;
  width: 15px;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"15\" height=\"8\" viewBox=\"0 0 15 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.3535 0.353516L7.35352 7.35352L0.353516 0.353515\" stroke=\"%23A4A4A4\" stroke-linejoin=\"round\"/></svg>");
}
.clg-c-button--load-more:hover {
  background-color: #fff;
  color: #000;
  opacity: 1;
}
.clg-c-button--load-more:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"15\" height=\"8\" viewBox=\"0 0 15 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.3535 0.353516L7.35352 7.35352L0.353516 0.353515\" stroke=\"black\" stroke-linejoin=\"round\"/></svg>");
}
@media screen and (max-width: 996px) {
  .clg-c-button--load-more {
    max-width: 292px;
  }
}
@media screen and (max-width: 767px) {
  .clg-c-button--load-more {
    max-width: 100%;
    padding: 27px;
  }
}
.clg-c-button--back-to-top {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  color: #000;
}
.clg-c-button--back-to-top::after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"9\" height=\"15\" viewBox=\"0 0 9 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 0.5L8 7.5L1 14.5\" stroke=\"black\" stroke-linejoin=\"round\"/></svg>");
  transform: translateY(-50%) rotate(-90deg);
}
.clg-c-button--back-to-top:hover {
  background-color: #000;
  color: #fff;
  opacity: 1;
}
.clg-c-button--back-to-top:hover::after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width=\"9\" height=\"15\" viewBox=\"0 0 9 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 0.5L8 7.5L1 14.5\" stroke=\"white\" stroke-linejoin=\"round\"/></svg>");
}
.clg-c-button--message-us {
  background-color: #000;
  color: #fff;
}
.clg-c-button--message-us::after {
  width: 20px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width=%2721%27 height=%2717%27 viewBox=%270 0 21 17%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M2.5 0.5H18.5C19.6 0.5 20.5 1.4 20.5 2.5V14.5C20.5 15.6 19.6 16.5 18.5 16.5H2.5C1.4 16.5 0.5 15.6 0.5 14.5V2.5C0.5 1.4 1.4 0.5 2.5 0.5Z%27 stroke=%27white%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M20.5 2.5L10.5 9.5L0.5 2.5%27 stroke=%27white%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E%0A");
}
@media screen and (max-width: 767px) {
  .clg-c-button--message-us::after {
    right: 25px;
  }
}
.clg-c-button--message-us:hover {
  background-color: #fff;
  color: #000;
  opacity: 1;
}
.clg-c-button--message-us:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width=%2721%27 height=%2717%27 viewBox=%270 0 21 17%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M2.5 0.5H18.5C19.6 0.5 20.5 1.4 20.5 2.5V14.5C20.5 15.6 19.6 16.5 18.5 16.5H2.5C1.4 16.5 0.5 15.6 0.5 14.5V2.5C0.5 1.4 1.4 0.5 2.5 0.5Z%27 stroke=%27white%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M20.5 2.5L10.5 9.5L0.5 2.5%27 stroke=%27white%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E%0A");
  filter: invert(1);
}
.clg-c-button--primary, .clg-c-button--gold, .clg-c-button--secondary {
  background-color: #000;
  color: #fff;
  font-family: "EB Garamond", "Noto Serif JP", serif;
  font-size: 20px;
  width: 200px;
  height: 60px;
}
.clg-c-button--primary::after, .clg-c-button--gold::after, .clg-c-button--secondary::after {
  display: none;
}
.clg-c-button--primary:hover, .clg-c-button--gold:hover, .clg-c-button--secondary:hover {
  background-color: transparent;
  color: #000;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .clg-c-button--primary, .clg-c-button--gold, .clg-c-button--secondary {
    width: 100%;
    height: 80px;
  }
}
.clg-c-button--secondary {
  background-color: transparent;
  color: #b4a052;
  border: 1px solid #b4a052;
}
.clg-c-button--secondary:hover {
  background-color: #b4a052;
  color: #fff;
  opacity: 1;
}
.clg-c-button--gold {
  background-color: #b4a052;
  border: 1px solid #b4a052;
  color: #000;
}
.clg-c-button--gold:hover {
  background-color: #000;
  color: #b4a052;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .clg-c-button--gold {
    width: 100%;
    height: 40px;
  }
}

/* .clg-u-visually-hidden placeholder */
.clg-u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.clg-c-footer-nav__item a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}
.clg-c-footer-nav__item a:hover {
  text-decoration: underline;
}

.clg-c-footer-info {
  margin: 0;
  padding: 0;
  color: #a4a4a4;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}
@media screen and (max-width: 996px) {
  .clg-c-footer-info {
    text-align: center;
  }
}

.clg-c-footer-copyright {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
}

.clg-l-footer {
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}


/*************************
 common overwrite
*************************/
.clg-c-header-brand_adjustment {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-table;
}

.clg-l-footer {
    line-height: 1.15;
}

@media screen and (max-width: 767px) {
    .clg-c-header-brand_adjustment {
        display: none;
    }
}

/*************************
 header
*************************/
.header {
    position: relative;
    height: 60px;
    padding: 0 calc(28 / 1440 * 100vw) 0 calc(47 / 1440 * 100vw);
}

header img{
	max-width: 205px;
	width: 100%;
}

.header_logo {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: inline-table;
}

@media screen and (max-width: 767px) {
    .header {
       padding: 0 calc(18 / 375 * 100vw);
       height: 43px;
    }
    header img{
        max-width: 159px;
    }
}

/*************************
 footer
/*************************/