@charset "UTF-8";
/*! グーグルフォントの読み込み */
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
/*! 共通指定 */
:root {
  /*! 文字色 */
  --font-color: #fff;
  /*! 背景色（About,Feature,Lineup,Sns,footer） */
  --background-color: #000;
  /*! 背景色2（Slider,Howto） */
  --background-color-2: #1e1e1e;
  /*! ヘッダーGnav */
  --gnav: #fff;
  /*! スクロールバー */
  --scroll: #fff;
  /*! メインビジュアル内、左下のテキスト */
  --subtext: #fff;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  scroll-behavior: smooth;
}
body p, body li, body dt, body dd, body th, body td, body div {
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
}
body h1, body h2, body h3, body h4, body h5, body h6, body p, body a, body span, body li, body dl, body dt, body dd, body th, body td, body div, body figure {
  margin: 0;
  line-break: strict;
}
body a {
  transition: 0.3s;
  text-decoration: none;
}
body a:hover {
  text-decoration: none;
}
body ul, body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body img {
  max-width: 100%;
  height: auto;
}
body .br_sp {
  display: none;
}
@media (max-width: 900px) {
  body .br_sp {
    display: inline-block;
  }
}
body .br_pc {
  display: inline-block;
}
@media (max-width: 900px) {
  body .br_pc {
    display: none;
  }
}
body .contents_title {
  color: var(--font-color);
  text-align: center;
  margin-bottom: 35px;
}
body .contents_title_en {
  font-size: 69px;
  font-family: "Mulish", sans-serif;
  letter-spacing: 0.12em;
  font-weight: 200;
  line-height: 1;
  display: block;
}
body .contents_title_jp {
  margin-top: 15px;
  font-size: 16px;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif;
  letter-spacing: 0.12em;
  font-weight: 500;
  line-height: 1;
  display: block;
}
@media (max-width: 900px) {
  body .contents_title {
    margin-bottom: 35px;
  }
  body .contents_title_en {
    font-size: 42px;
  }
  body .contents_title_jp {
    margin-top: 15px;
    font-size: 14px;
  }
}

/*! ヘッダー */
header {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 57px 50px;
  height: 97px;
  z-index: 100;
  position: relative;
}
header h1 a img {
  width: 174px;
}
header h1 a:hover {
  opacity: 0.5;
}
header .gnav ul {
  display: flex;
}
header .gnav ul li {
  padding-right: 30px;
}
header .gnav ul li a {
  display: block;
  height: 100%;
  font-size: 16px;
  letter-spacing: 0.12rem;
  font-weight: 500;
  color: var(--gnav);
  font-family: "Mulish", sans-serif;
}
header .gnav ul li a span {
  position: relative;
  padding-bottom: 10px;
}
header .gnav ul li a span::before {
  background-color: var(--gnav);
  content: "";
  height: 1px;
  position: absolute;
  left: 50%;
  opacity: 0;
  bottom: 0;
  transition: all 0.2s ease-in-out;
  transform: translateX(-50%);
  width: 0;
}
header .gnav ul li a:hover span::before {
  opacity: 1;
  width: 100%;
}
header .gnav ul li:last-child {
  padding-right: 0;
}
header .header__btn {
  width: 67px;
  height: 67px;
  position: relative;
  border-radius: 0;
  z-index: 101;
}
header .header__btn svg {
  width: 19px;
}
@media (min-width: 900px) {
  header .header__btn {
    display: none;
  }
}
@media (max-width: 900px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 0;
    justify-content: center;
    height: 63px;
    padding-inline: 0;
  }
  header h1 {
    margin-top: 10px;
  }
  header .header__btn {
    display: block;
    width: 24px;
    height: 12px;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 22px;
    right: 30px;
    z-index: 200;
  }
  header .header__btn::before, header .header__btn::after {
    content: "";
  }
  header .header__btn::before, header .header__btn::after, header .header__btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    transition: all 0.3s ease;
  }
  header .header__btn::before {
    top: 0;
  }
  header .header__btn span {
    top: 50%;
    transform: translateY(-50%);
  }
  header .header__btn::after {
    bottom: 0;
  }
  header .header__btn.open span {
    opacity: 0;
  }
  header .header__btn.open::before, header .header__btn.open::after, header .header__btn.open span {
    background-color: #000000;
  }
  header .header__btn.open::before {
    transform: translateY(5px) rotate(-45deg);
  }
  header .header__btn.open::after {
    transform: translateY(-5px) rotate(45deg);
  }
  header .gnav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 85%;
    z-index: 99;
    background-color: transparent;
    transform: translateX(100%);
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
  }
  header .gnav__inner {
    padding-top: 100px;
    padding: 80px 0.875rem 0.875rem;
  }
  header .gnav__inner ul {
    display: flex;
    flex-direction: column;
  }
  header .gnav__inner ul li {
    border-top: 1px solid #d8d8d8;
  }
  header .gnav__inner ul li:last-child {
    border-bottom: 1px solid #d8d8d8;
    padding-right: 30px;
  }
  header .gnav__inner ul li a {
    padding: 0.25em 0 0.25em 1.5em;
    color: #000000;
    align-items: center;
    display: flex;
    min-height: 3.3em;
    position: relative;
  }
  header .gnav__inner ul li a span {
    color: #000000;
    padding-bottom: 0;
  }
  header .gnav__inner ul li a::before {
    content: "";
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 1px #000000;
    border-right: solid 1px #000000;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  header .gnav.open {
    display: block;
    transform: translateX(0%);
    transition: transform 0.3s ease-in-out, background-color 0.2s ease-in-out;
  }
}

/*! フッター */
footer {
  background-color: var(--background-color);
  font-family: "游ゴシック体", "Yu Gothic", sans-serif;
  border-top: 1px solid #6b6b6b;
}
footer .footer_wrap {
  color: var(--font-color);
  padding-inline: 27px;
}
footer .footer_wrap_item {
  padding-top: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer .footer_wrap_item_lead {
  letter-spacing: 0.18rem;
  font-size: 13px;
}
footer .footer_wrap_item_logo {
  display: block;
  padding-inline: 35px 56px;
}
footer .footer_wrap_item_address {
  letter-spacing: 0.14em;
}
footer .footer_wrap_item_address a {
  color: var(--font-color);
  font-size: 13px;
  letter-spacing: 0.14em;
}
footer .footer_wrap_item_address p {
  color: var(--font-color);
  font-size: 13px;
  letter-spacing: 0.14em;
}
footer .footer_wrap small {
  display: block;
  text-align: center;
  color: #6b6b6b;
  font-size: 10px;
  letter-spacing: 0.16rem;
  font-weight: 500;
  padding-block: 80px 20px;
}
footer .footer_wrap a:hover {
  opacity: 0.7;
}
@media (max-width: 900px) {
  footer .footer_wrap_item {
    padding-top: 35px;
    flex-direction: column;
    gap: 20px;
  }
  footer .footer_wrap_item_logo {
    padding-inline: 0;
  }
  footer .footer_wrap small {
    letter-spacing: 0.1rem;
    padding-block: 45px 30px;
  }
}