@charset "utf-8";

/* ===== 英字用（先に定義） ===== */
@font-face {
  font-family: "BrandFont";
  src:
    local("Be Vietnam Pro"),
    url("https://fonts.gstatic.com/s/bevietnampro/v15/QdVMSTAyLFyeg_IDWvOJmVES_Hw.woff2") format("woff2");
  unicode-range: U+0000-00FF; /* 英数字 */
}

/* ===== 日本語用 ===== */
@font-face {
  font-family: "BrandFont";
  src:
    local("Noto Sans JP"),
    url("https://fonts.gstatic.com/s/notosansjp/v52/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.woff2") format("woff2");
  unicode-range:
    U+3000-30FF,
    /* ひらがな・カタカナ */ U+4E00-9FFF,
    /* 漢字 */ U+FF00-FFEF; /* 全角 */
}

#new_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 96px;
  z-index: 9999;
  isolation: isolate;
  overflow: visible;
}

/* メガ背景レイヤー（ヘッダー要素の背面） */
#new_header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px; /* メガ高さ */
  background: linear-gradient(90deg, rgba(2, 18, 52, 0.84) 0%, rgba(6, 36, 84, 0.84) 100%);
  /*backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);*/
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 0;
}

#new_header_pc_nav{
position:relative;
top:3px;
}
/* Products / Support のドロップダウン表示時のみ背景ON */
#new_header:has(#new_header_pc_nav > li:hover > ul)::before,
#new_header:has(#new_header_pc_nav > li:focus-within > ul)::before {
  opacity: 1;
}
:root {
  --colw: 300px; /* 1段目メニュー幅 */
  --support_offset: 230px; /* Supportのプルダウンを右に寄せる（+で右へ） */
}
#new_header_logo {
  position: absolute;
  top: 34px;
  left: 55px;
  width: 160px;
  z-index: 10;
}
#new_icon_member {
  position: absolute;
  top: 34px;
  right: 55px;
  display: flex;
  justify-content: space-between;
  width: 105px;
  z-index: 10;
}
#new_icon_member a img.icon_member {
  width: 36px;
  z-index: 10;
}
#new_icon_member a img.icon_cart {
  width: 29px;
  z-index: 10;
}
#new_header_pc_nav {
  display: flex;
  width: 620px;
  margin: 32px auto;
  color: #051d47;
  gap: 60px;
  z-index: 10;
}
#new_header_pc_nav a {
  font-size: 17px;
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
  color: #051d47;
}

/* ================================
   2段階プルダウン（PC）
   - 1階層目：#new_header_pc_nav > li > ul
   - 2階層目：#new_header_pc_nav > li > ul > li > ul
   ================================ */

/* 親 */
#new_header_pc_nav {
  position: relative;
}
#new_header_pc_nav > li {
  position: relative;
  padding-bottom: 28px;
}
#new_header_pc_nav > li:first-child::after,
#new_header_pc_nav > li:last-child::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid #051d47;
  border-right: 1px solid #051d47;
  top: 10px;
  right: -15px;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
#new_header_pc_nav > li:first-child:hover::after,
#new_header_pc_nav > li:first-child:focus-within::after,
#new_header_pc_nav > li:last-child:hover::after,
#new_header_pc_nav > li:last-child:focus-within::after {
  transform: rotate(-135deg);
  top: 15px;
}
/* 1階層目（第一プルダウン） */
/* ===== メガメニュー（横100%） ===== */
#new_header_pc_nav > li > ul {
  position: absolute; /* li基準で出す（hoverエリアが広がらない） */
  top: 100%; /* 親メニュー直下 */
  left: 0;
  width: var(--colw);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

  padding: 0; /* gapはli側のpadding-bottomで確保 */
  margin: 0;
  list-style: none;

  background: transparent;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;

  z-index: 5;
}
#new_header_pc_nav > li:hover > ul,
#new_header_pc_nav > li > a:hover + ul,
#new_header_pc_nav > li:focus-within > ul,
#new_header_pc_nav > li:has(> ul:hover) > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 1階層目の項目 */
#new_header_pc_nav > li > ul > li {
  position: relative;
  width: var(--colw);
}
#new_header_pc_nav > li > ul > li .check_arrow {
  position: relative;
  top: -10px;
  right: -5px;
  display: inline-block;
  width: 12px;
}
/* Support（最後のメニュー）は右基準で表示 */
#new_header_pc_nav > li:last-child > ul {
  left: auto;
  right: calc(0px - var(--support_offset));
}
#new_header_pc_nav > li > ul > li > a {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 7px;
  display: block;
  font-size: 16px;
  font-family: "BrandFont", sans-serif;
  white-space: nowrap;
}
#new_header_pc_nav > li > ul a:hover {
  opacity: 0.85;
}

/* 2階層目（例：Exclusive Edition配下）はデフォルトで隠す */
#new_header_pc_nav > li > ul > li > ul {
  position: static;
  margin-top: 12px;
  padding-left: 10px; /* ← ここで下に入った感じを出す */
  list-style: none;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.18s ease,
    max-height 0.18s ease,
    visibility 0.18s ease;
}

#new_header_pc_nav > li > ul > li > ul li + li {
  margin-top: 12px;
}

/* 2階層目を表示（親liにhover / focusされた時だけ） */
#new_header_pc_nav > li > ul > li:hover > ul,
#new_header_pc_nav > li > ul > li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-height: 200px; /* 項目数に合わせて必要なら調整 */
}

/* 三角（2階層があるときの目印） */
#new_header_pc_nav > li > ul > li:has(> ul) > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-bottom: 1px solid #051d47;
  border-right: 1px solid #051d47;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
#new_header_pc_nav > li > ul > li:has(> ul):hover > a::after,
#new_header_pc_nav > li > ul > li:has(> ul):focus-within > a::after {
  transform: rotate(-135deg);
  top: 18px;
}
/* ================================
   Midnight対応（data-midnight / marker に連動）
   - #new_header に .is-white が付いたら黒文字へ
   ================================ */

#new_header #new_header_logo img,
#new_header #new_icon_member img,
#new_header #new_header_pc_nav > li > ul > li .check_arrow {
  filter: none;
}

/* ================================
   メガメニュー表示時は「白」にする（背景が濃紺なので）
   - Products / Support のドロップダウンが開いている間だけ適用
   ================================ */

/* メガ表示中：リンク文字を白へ */
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_header_pc_nav a,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_header_pc_nav a {
  color: #fff;
}

/* メガ表示中：矢印（▾ / 2階層矢印）を白へ */
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_header_pc_nav > li:first-child::after,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_header_pc_nav > li:first-child::after,
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_header_pc_nav > li:last-child::after,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_header_pc_nav > li:last-child::after,
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_header_pc_nav > li > ul > li:has(> ul) > a::after,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_header_pc_nav > li > ul > li:has(> ul) > a::after {
  border-bottom-color: #fff;
  border-right-color: #fff;
}

/* メガ表示中：ロゴ/アイコン/外部リンク矢印画像の黒化フィルターを解除（白に戻す） */
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_header_logo img,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_header_logo img,
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_icon_member img,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_icon_member img,
#new_header:has(#new_header_pc_nav > li:hover > ul) #new_header_pc_nav > li > ul > li .check_arrow,
#new_header:has(#new_header_pc_nav > li:focus-within > ul) #new_header_pc_nav > li > ul > li .check_arrow {
  filter: brightness(0) invert(1);
}
@media print, screen and (max-width: 767px) {
  /*ウィンドウ幅が最大767pxまでの場合に適用*/
  /*Header*/
  #new_header_logo {
    position: absolute;
    top: 40px;
    left: 32.335%;
    width: 250px;
    z-index: 1;
    pointer-events: auto;
  }
  #new_icon_member {
    display: flex;
    position: absolute;
    top: 34px;
    right: 40px;
    justify-content: space-between;
    width: 130px;
    z-index: 10;
  }
  #new_icon_member a img.icon_member {
    width: 50px;
    z-index: 10;
  }
  #new_icon_member a img.icon_cart {
    position: relative;
    top: -5px;
    width: 46px;
    pointer-events: auto;
  }

  #new_header_pc_nav {
    display: none;
  }
  /*ハンバーガーメニュー*/
  nav.NewNavMenu {
    position: fixed; /*表示位置を固定*/
    z-index: 998; /*重ね順を変更*/
    top: 0; /*表示位置を指定*/
    left: 0;
    background: #fff; /*背景を白にする*/
    color: #051d47;
    text-align: left;
    width: 100%; /*全幅表示*/
    height: 100vh;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s linear;
    transform: translateZ(0);
  }

  nav.NewNavMenu .NewNavMenu_inner {
    font-feature-settings: "palt";
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 1500px;
    margin: 0 auto;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: auto !important;
  }

  nav.NewNavMenu .NewNavMenu_content {
    display: block;
    width: 100%;
    height: 1900px;
    padding: 0 9%;
  }

  nav.NewNavMenu.active {
    pointer-events: auto;
    opacity: 1;
  }

  .Toggle {
    display: block;
    position: fixed; /* bodyに対しての絶対位置指定 */
    left: 37px;
    top: 52px;
    width: 45px;
    height: 36px !important;
    cursor: pointer;
    z-index: 999;
    pointer-events: auto;
  }

  .Toggle span {
    display: block;
    position: absolute;
    border-bottom: solid 2px #000;
    -webkit-transition: 0.35s ease-in-out; /*変化の速度を指定*/
    -moz-transition: 0.35s ease-in-out; /*変化の速度を指定*/
    transition: 0.35s ease-in-out; /*変化の速度を指定*/
    left: 0;
  }
  .Toggle.black span {
    border-bottom: solid 2px #000;
  }

  .Toggle span:nth-child(1) {
    width: 45px;
    top: 14px;
  }

  .Toggle span:nth-child(2) {
    width: 30px;
    top: 23px;
  }

  /* 最初のspanをマイナス45度に */
  .Toggle.active span:nth-child(1) {
    top: 16px;
    width: 43px;
    -webkit-transform: rotate(-16deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-16deg);
    border-bottom: solid 2px #051d47 !important;
  }

  /* 2番目のspanを45度に */
  .Toggle.active span:nth-child(2) {
    top: 16px;
    width: 43px;
    -webkit-transform: rotate(16deg);
    -moz-transform: rotate(16deg);
    transform: rotate(16deg);
    border-bottom: solid 2px #051d47 !important;
  }

  #NavMenu_logo {
    position: relative;
    top: 41px;
    left: 0;
    width: 265px;
    margin: 0 auto;
    z-index: 3;
  }
  #NavMenu_logo img {
    width: 100%;
  }
  #NavMenu_icon_cart {
    position: absolute;
    top: 31px;
    right: calc(50% - 337px);
    width: 47px;
    height: auto;
    z-index: 3;
  }
  #NavMenu_icon_cart img {
    width: 100%;
  }
  #NavMenu_icon_cart span {
    display: block;
    position: absolute;
    bottom: -9px;
    right: -19px;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #051d47;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  a#NavMenu_login {
    position: relative;
    display: block;
    background-color: #051d47;
    width: 268px;
    height: 76px;
    border-radius: 40px;
    margin: 24% 0 10% 0;
    text-align: center;
  }
  a#NavMenu_login img {
    position: absolute;
    top: 15px;
    left: 23%;
    width: 47px;
  }
  a#NavMenu_login span {
    position: absolute;
    top: 20px;
    left: 45%;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 27px;
    color: #fff;
    text-decoration: none;
  }
  .NewNavMenu .products .midashi {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 35px;
    letter-spacing: -0.02em;
    margin: 95px 0 58px 0;
  }
  .NewNavMenu .products ul li {
    list-style: none;
  }
  .NewNavMenu .products ul li:first-child {
    margin: 0;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.075em;
  }
  .NewNavMenu .products ul li:last-child {
    display: flex;
    margin: 26px 0 42px 0;
    font-size: 26px;
    font-weight: 700;
  }
  .NewNavMenu .products ul li:last-child a {
    display: block;
    border: 2px solid #051d47;
    text-decoration: none;
    color: #051d47;
    font-weight: 700;
    width: 128px;
    height: 53px;
    text-align: center;
    line-height: 48px;
    border-radius: 30px;
    margin-right: 20px;
  }
  .NewNavMenu .products .special a {
    display: block;
    font-family: "Be Vietnam Pro", sans-serif;
    text-decoration: none;
    color: #051d47;
    font-size: 27px;
    font-weight: 600;
    width: 100%;
    text-align: left;
    letter-spacing: -0.01em;
  }
  .NewNavMenu .menu .midashi {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 34px;
    letter-spacing: -0.05em;
    margin: 93px 0 50px 0;
  }
  .NewNavMenu .menu ul li {
    list-style: none;
    margin-bottom: 17px;
  }
  .NewNavMenu .menu ul li a {
    position: relative;
    color: #051d47;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 26px;
    width: 128px;
    height: 53px;
    text-decoration: none;
  }

  .NewNavMenu .menu ul li:last-child a::after {
    position: absolute;
    top: 7px;
    right: -28px;
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-image: url("https://d2w53g1q050m78.cloudfront.net/orthomoljapancom/uploads/img/check_arrow.png");
    background-size: cover;
  }
  .NewNavMenu .sns ul {
    display: flex;
    margin-top: 13%;
    margin-bottom: 19%;
  }
  .NewNavMenu .sns ul li {
    list-style: none;
    margin: 0 40px 150px 0;
    width: 50px;
    height: 50px;
  }
  .NewNavMenu .sns ul li a {
    position: relative;
    color: #051d47;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 26px;
    width: 50px;
    height: 50px;
    text-decoration: none;
  }

  /*メニューアコーディオン */
  .NewNavMenu_inner {
    padding: 0 10% 40px;
    font-family: "Be Vietnam Pro", "Noto Sans JP", sans-serif !important;
    font-weight: 600;
    font-style: normal;
  }
  .sp-gnav {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .NewNavMenu_product01 {
    font-size: 4.3vw;
    margin: 15% 0 9% 0;
    padding: 0;
  }
  .NewNavMenu_product02 {
    font-size: 4.3vw;
    margin: 0 0 12%;
    padding: 0;
  }
  .sp-gnav > li > a,
  .sp-gnav > li > .acc-toggle {
    display: block;
    width: 100%;
    padding: 38px 0;
    font-size: 4.3vw;
    color: #041a3b;
  }

  .acc-toggle {
    background: none;
    border: none;
    text-align: left;
    position: relative;
    width: 100%;
  }

  .acc-toggle .chevron {
    position: absolute;
    right: 5%;
    top: 50%;
    width: 15px;
    height: 15px;
    border-right: 2px solid #041a3b;
    border-bottom: 2px solid #041a3b;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.2s;
  }

  li.is-open > .acc-toggle .chevron {
    transform: translateY(-50%) rotate(-135deg);
  }

  .sub {
    display: none;
    padding: 0 0 10px 0;
    font-size: 3.6vw;
    font-weight: 500;
    font-style: normal;
  }

  .NewNavMenu,
  .NewNavMenu * {
    font-family: "Be Vietnam Pro", "Noto Sans JP", sans-serif !important;
  }

  .sub > li {
    padding: 4% 0 4% 5%;
    border-bottom: 1px solid #bbb;
    font-family: "Be Vietnam Pro", "Noto Sans JP", sans-serif !important;
  }
  .sub > li:last-child {
    border-bottom: none;
  }
  .sub > li > a,
  .sub > li > .acc-toggle {
    padding: 10px 0 10px 12px;
  }

  .grand {
    display: none;
    padding-left: 24px;
    padding-bottom: 20px;
  }

  .grand li a {
    display: block;
    padding: 6.5% 0 3% 2%;
    font-size: 3.1vw;
    font-weight: 500;
    font-style: normal;
  }

  .NewNavMenu_sns {
    display: flex;
    gap: 16px;
    margin-top: 26px;
  }

  .ext-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10%;
  }

  /*プルダウン*/
  #NewNavMenu_logo {
    position: absolute;
    top: 40px;
    left: 32.335%;
    width: 250px;
    z-index: 1;
    pointer-events: auto;
  }
  #new_header_logo img {
    width: 100%;
  }
  #NewNavMenu_icon_cart {
    position: absolute;
    top: 28px;
    right: 5%;
    width: 50px;
    pointer-events: auto;
  }
  #NewNavMenu_icon_cart img {
    width: 100%;
  }
  #icon_cart {
    position: absolute;
    top: 31px;
    right: 5%;
    width: 47px;
    height: auto;
    pointer-events: auto;
  }
  #icon_cart img {
    width: 100%;
  }
  #icon_cart span {
    display: block;
    position: absolute;
    bottom: -9px;
    right: -19px;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  a#NewNavMenu_login {
    position: relative;
    display: block;
    background-color: #051d47;
    width: 268px;
    height: 76px;
    border-radius: 40px;
    margin: 35% 0 15% 0;
    text-align: center;
    color: #fff;
  }
  a#NewNavMenu_login img {
    position: absolute;
    top: 15px;
    left: 23%;
    width: 47px;
  }
  a#NewNavMenu_login span {
    position: absolute;
    top: 20px;
    left: 45%;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 27px;
    color: #fff;
    text-decoration: none;
  }
}