@charset "UTF-8";
/* =========================
変数 
============================*/
body {
  --s-val: 10px;
  --pdg-inline-common: calc(var(--s-val) * 3.8);
  --base-color: #000;
  --color-neutral-pink: #ece0df;
  --color-pink-brown: #b38686;
  --color-salmon-pink: #f0b0aa;
  --color-rose-brown: #8f6163;
  --color-muted-pink: #c28686;
  --color-green-olive: #b1b74e;
  --color-green-soft: #d7daa4;
  --color-green-pale: #d8daa6;
  --color-gray: #f2f2f2;
  --color-gray-deep: #555555;
  --header-line-gray: #999;
}

/* レスポンシブ */
@media screen and (max-width: 1330px) {
  body {
    --s-val: 0.7vw;
  }
}
@media screen and (max-width: 780px) {
  body {
    --s-val: 1.45vw;
  }
}
@media screen and (max-width: 540px) {
  body {
    --s-val: 1.5vw;
  }
}
/* === このCSSは全ページ共通です === */
/* =========================
ヘッダー
============================*/
.g-header {
  width: 100%;
  position: fixed;
  z-index: 9999;
  background-color: #fff;
}
.g-header__top {
  padding: calc(var(--s-val) * 1) calc(var(--s-val) * 1);
  border-bottom: 1px solid var(--header-line-gray);
  position: relative;
}
.g-header__logo {
  display: block;
  max-width: 272px;
  width: 100%;
  margin-inline: auto;
}
.g-header__menu {
  --menu-pdg-block: calc(var(--s-val) * 1.5);
  padding: var(--menu-pdg-block) calc(var(--s-val) * 5);
  border-bottom: 1px solid var(--header-line-gray);
  font-size: calc(var(--s-val) * 1.9);
  font-weight: 600;
  line-height: 1.2em;
}
.g-header__menu .font-futura {
  font-size: calc(var(--s-val) * 2);
  font-weight: 500;
}
.g-header__menu-list {
  --menulist-max-w: 1020px;
  max-width: var(--menulist-max-w);
  margin-inline: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.g-header__menu-item {
  position: relative;
}
.g-header__menu-item:last-of-type .g-header__submenu {
  right: calc((100vw - var(--menulist-max-w) - calc(var(--s-val) * 3)) / 2);
}
.g-header__menu-item .disabled-link {
  color: #999999;
}
.g-header__submenu {
  --w-submenu-item: calc(50% - calc(var(--s-val) * 0.5));
  position: fixed;
  padding: calc(var(--s-val) * 4) 2% calc(var(--s-val) * 3);
}
.g-header__submenu::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - calc(var(--s-val) * 1.5));
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: calc(var(--menu-pdg-block) + 1px);
  left: 0;
  z-index: -1;
}
.g-header__submenu-list, .g-header__submenu-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.g-header__submenu-list {
  gap: calc(var(--s-val) * 1.5) calc(var(--s-val) * 1);
}
.g-header__submenu-wrap {
  gap: calc(var(--s-val) * 3) calc(var(--s-val) * 1);
}
.g-header__submenu-block {
  width: var(--w-submenu-item);
}
.g-header__submenu-wrap .g-header__submenu-list {
  margin: calc(var(--s-val) * 1.5) 0 0 1em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.g-header__submenu-item {
  min-width: var(--w-submenu-item);
}

/* サブメニュー ============= */
.js-submenu {
  display: none;
}

.js-submenu.is_open {
  display: block;
}

/* レスポンシブ ============= */
@media screen and (max-width: 960px) {
  .g-header__top {
    border: none;
    padding: calc(var(--s-val) * 1.9) calc(var(--s-val) * 1) calc(var(--s-val) * 1);
  }
  .g-header__logo {
    max-width: 190px;
  }
  .g-header__menu {
    width: 100%;
    padding: 0;
    opacity: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    pointer-events: none;
  }
  .g-header__menu .font-futura {
    font-size: calc(var(--s-val) * 3);
  }
  .g-header__menu-list {
    display: none;
  }
  .g-header__menu-item {
    --s-pdginline: calc(var(--s-val) * 2);
    padding: calc(var(--s-val) * 3) var(--s-pdginline);
    border-bottom: 1px solid var(--header-line-gray);
  }
  .g-header__menu-item--ja {
    font-size: calc(var(--s-val) * 2.2);
  }
  .g-header__menu-item:first-of-type {
    border-top: 1px solid var(--header-line-gray);
  }
  .g-header__menu-item.g-header__submenu-item {
    border: none;
  }
  .g-header__submenu-title {
    position: relative;
  }
  .g-header__submenu-title::before {
    content: "";
    display: block;
    width: calc(var(--s-val) * 1.3);
    aspect-ratio: 1/1;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    position: absolute;
    top: 23%;
    right: calc(var(--s-val) * -1);
    z-index: -10;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .g-header__menu-item:last-of-type .g-header__submenu {
    right: auto;
  }
  .g-header__submenu {
    --w-submenu-item: 100%;
    font-size: calc(var(--s-val) * 2);
    position: relative;
    -webkit-margin-before: calc(var(--s-val) * 2);
            margin-block-start: calc(var(--s-val) * 2);
    padding: calc(var(--s-val) * 3.5) 0 0;
    position: relative;
  }
  .g-header__submenu::before {
    content: "";
    width: calc(100% + var(--s-pdginline) * 2);
    height: 1px;
    background-color: var(--header-line-gray);
    position: absolute;
    top: 0;
    left: calc(var(--s-pdginline) * -1);
  }
  .g-header__submenu::after {
    display: none;
  }
  .g-header__submenu-list, .g-header__submenu-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .g-header__submenu-wrap {
    gap: calc(var(--s-val) * 5.2) calc(var(--s-val) * 1);
  }
  .g-header__submenu-item {
    padding: 0;
  }
  .g-header .js-submenu-trigger.is_open .g-header__submenu-title::before {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  /* === hamburger === */
  body.scroll_lock {
    overflow: hidden;
  }
  .js-hamburger_toggle.is_open.g-header__menu {
    height: 100vh;
    opacity: 1;
    pointer-events: auto;
    padding: calc(var(--s-val) * 3.5) calc(var(--s-val) * 4) calc(var(--s-val) * 15);
    overflow-y: auto;
  }
  .js-hamburger_toggle.is_open .g-header__menu-list {
    display: block;
  }
  .hamburger-icon {
    cursor: pointer;
    width: calc(var(--s-val) * 3.5);
    height: calc(var(--s-val) * 2.2);
    margin: 0 0 0 auto;
    z-index: 999;
    position: absolute;
    top: 50%;
    right: calc(var(--s-val) * 6);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    --width: 100%;
    --height: 2px;
    --hamburger-color: #333;
  }
  .hamburger-icon::before,
  .hamburger-icon::after,
  .hamburger-icon__line {
    content: "";
    display: block;
    width: var(--width);
    height: var(--height);
    background-color: var(--hamburger-color);
    position: absolute;
    -webkit-transition: opacity 0.3s 0s, -webkit-transform 0.3s 0s;
    transition: opacity 0.3s 0s, -webkit-transform 0.3s 0s;
    transition: opacity 0.3s 0s, transform 0.3s 0s;
    transition: opacity 0.3s 0s, transform 0.3s 0s, -webkit-transform 0.3s 0s;
  }
  .hamburger-icon::before {
    top: auto;
    margin: auto;
  }
  .hamburger-icon::after {
    bottom: 0;
  }
  .hamburger-icon__line {
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .hamburger-icon.is_open {
    width: calc(var(--s-val) * 3.5);
    --move_pos: calc(var(--s-val) * 0.65);
  }
  .hamburger-icon.is_open .hamburger-icon__line {
    opacity: 0;
    -webkit-transform: translate(50%, 0px);
            transform: translate(50%, 0px);
  }
  .hamburger-icon.is_open::before {
    -webkit-transform: rotate(48deg) translate(var(--move_pos), var(--move_pos));
            transform: rotate(48deg) translate(var(--move_pos), var(--move_pos));
  }
  .hamburger-icon.is_open::after {
    -webkit-transform: rotate(-48deg) translate(var(--move_pos), calc(var(--move_pos) * -1));
            transform: rotate(-48deg) translate(var(--move_pos), calc(var(--move_pos) * -1));
  }
}
@media screen and (max-width: 780px) {
  .hamburger-icon {
    right: calc(var(--s-val) * 4.4);
  }
}