/* ============================================================                                                            
    HAUTE グローバルナビゲーション オーバーライドCSS                                                                          
    既存の style18.css / base03.css を上書きします                                                                          
    読み込み順：既存CSSの後に <link> で追加してください
    ============================================================ */


 /* ============================================================
    PC（891px 以上）
    ============================================================ */
 @media screen and (min-width: 891px) {

  /* nav itemとdropdownの隙間を透明要素で埋め、カーソル移動中にhoverが外れるのを防ぐ */                                                                                  
.has-dropdown::after {                                                                                                                                                 
    content: '';                                                                                                                                                       
    position: absolute;                                                                                                                                           
    top: 100%;                                                                                                                                                    
    left: 0;                                                                                                                                                      
    right: 0;                                                                                                                                                     
    height: 14px; /* .nav-dropdown の top: calc(100% + 14px) に合わせた値 */                                                                                      
  }   
  
   /* SP専用要素を非表示 */
   .sp-only {
     display: none !important;
   }

   /* 旧タブドロップダウンを無効化 */
   .tab {
     display: none !important;
   }

   /* ---------- nav 配置リセット ---------- */
   header .inner nav {
     position: absolute;
     top: 50% !important;
     transform: translateY(-50%);
     left: 115px;
     right: 270px;
     display: block !important;
     padding: 0;
   }

   /* ---------- PC メインメニュー ---------- */
   header .inner .pc-only.main-menu {
     display: flex;
     align-items: center;
     justify-content: right;
     flex-wrap: nowrap;
     list-style: none;
     margin: 0;
     padding: 0;
   }

   header .inner .pc-only.main-menu > li {
    position: relative;
    padding: 0 0 0 13px;
    line-height: 1;
    white-space: nowrap;
    text-align: right;
   }

   header .inner .pc-only.main-menu > li:first-child {
     padding-left: 0;
   }

   header .inner .pc-only.main-menu > li:last-child {
     padding-right: 0;
   }

   header .inner .pc-only.main-menu > li > a {
     display: block;
     font-size: 13px;
     font-weight: 500;
     color: #333333;
     text-decoration: none;
     letter-spacing: 0.02em;
     line-height: 1;
   }

   header .inner .pc-only.main-menu > li > a:hover {
     color: #C1272D;
   }

   /* 旧 span.en / span.ja スタイルを上書き（念のため） */
   header .inner .pc-only.main-menu li span.en,
   header .inner .pc-only.main-menu li span.ja {
     display: none;
   }

   /* "+" マーク */
   .nav-plus {
     display: inline!important;;
     margin-left: 2px;
     font-size: 13px;
     font-weight: 500;
   }

   /* ---------- ドロップダウン ---------- */
   .nav-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 14px);
     left: 0;
     background: #ffffff;
     width: 237px;   /* Figma: dropdown幅237px */
     padding: 17px 0 26px; /* Figma: 上36px / 下52px（行高37pxの半分を調整） */
     list-style: none;
     margin: 0;
     z-index: 1000;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }

   /* ブランドなど長いテキストを含む列 */
   .nav-dropdown--wide {
     width: 257px;
   }

   .has-dropdown:hover .nav-dropdown {
     display: block;
   }

  /* 既存の header .inner .main-menu li { padding: 0 20px 30px } を上書き
     position: relative は矢印の ::after を li 基準で配置するために必要 */
  .nav-dropdown > li {
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    position: relative !important;
  }

  .nav-dropdown > li > a {
    display: block;
    padding: 9px 40px 9px 41px; /* 右40px = 矢印スペース確保 */
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.46;
  }

  .nav-dropdown > li > a:hover {
    color: #C1272D;
  }

  /* li を基準に absolute 配置 → li の padding-right に一切依存しない
     これにより style18.css の last-child { padding-right: 20px } の影響を完全に排除 */
  .nav-dropdown > li > a::after {
    content: '\2192';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #333333;
    line-height: 1;
    margin-left: 0;
    width: auto;
    border: none;
    background: none;
  }

  .nav-dropdown > li > a:hover::after {
    color: #C1272D;
  }
  header .inner .account {
        top: -3px;
        font-size: 13px;
    }

 }


 /* ============================================================
    SP（890px 以下）
    ============================================================ */
 @media screen and (max-width: 890px) {

   /* PC専用要素を非表示 */
   .pc-only {
     display: none !important;
   }

   /* ---------- SP nav パネル ---------- */
   /* 既存の header .inner nav の display:none / fixed は維持しつつ、
      内部レイアウトをリセットして SP デザインを適用する */

   header .inner nav {
     padding: 0 !important; /* 既存の padding: 30px 30px を上書き */
   }

   /* ---------- 検索バー ---------- */
   .sp-search {
     background: #333333;
     margin: 0;
     padding: 0;
     line-height: 1;
   }

   .sp-search a {
     display: block;
     padding: 18px 20px;
     color: #ffffff;
     font-size: 13px;
     font-weight: 500;
     text-decoration: none;
     text-align: center;
   }

   /* ---------- SP メニューリスト ---------- */
   .sp-menu {
     list-style: none;
     margin: 0;
     padding: 0;
   }

   .sp-item {
     border-bottom: 1px solid #eeeeee;
     margin-bottom: 0 !important; /* 既存の margin-bottom: 2em を上書き */
   }

   /* リンク・ボタン共通スタイル */
   .sp-link {
     display: flex;
     align-items: center;
     width: 100%;
     padding: 16px 20px;
     background: transparent;
     border: none;
     cursor: pointer;
     text-decoration: none;
     text-align: left;
     color: #333333;
     font-family: inherit;
     box-sizing: border-box;
   }

   /* EN ラベル */
   .sp-en {
     display: inline-block;
     font-size: 16px;
     font-weight: 500;
     color: #333333;
     min-width: 135px;
     flex-shrink: 0;
     letter-spacing: 0.02em;
     /* 既存の span スタイル上書き */
     margin-right: 0 !important;
   }

   /* JA ラベル */
   .sp-ja {
     display: inline-block;
     font-size: 14px;
     font-weight: 500;
     color: #333333;
     letter-spacing: 0.02em;
   }

   /* "+" / "-" トグルアイコン */
   .sp-toggle-icon {
     display: inline-block;
     margin-left: auto;
     padding-left: 10px;
     font-size: 20px;
     font-weight: 500;
     color: #333333;
     line-height: 1;
     flex-shrink: 0;
   }

   /* ---------- アコーディオン サブメニュー ---------- */
   .sp-sub {
     list-style: none;
     margin: 0;
     padding: 0;
     background: #f7f7f7;
   }

   .sp-sub > li > a {
     display: flex;
     align-items: center;
     padding: 12px 20px 12px 32px;
     text-decoration: none;
     color: #333333;
     font-size: 13px;
     font-weight: 500;
     border-bottom: 1px solid #eeeeee;
   }

   .sp-sub > li:last-child > a {
     border-bottom: none;
   }

   .sp-sub > li > a .sp-en {
     font-size: 14px;
     min-width: 100px;
     font-weight: 500;
   }

   .sp-sub > li > a .sp-ja {
     font-size: 13px;
     font-weight: 500;
   }

  /* ---------- SP → 矢印 ---------- */
  /* Figma: RECOMMEND / ABOUT RENTAL / BUY / BLOG / CONTACT の右端に → */
  /* アコーディオンボタン（+/-）は除外 */
  .sp-link:not(.sp-accordion-btn)::after {
    content: '\2192'; /* → */
    margin-left: auto;
    padding-left: 12px;
    font-size: 13px;
    color: #333333;
    flex-shrink: 0;
  }

  /* Figma: アコーディオン内サブアイテムの右端に → */
  .sp-sub > li > a::after {
    content: '\2192'; /* → */
    margin-left: auto;
    padding-left: 12px;
    font-size: 13px;
    color: #333333;
    flex-shrink: 0;
  }

   /* ---------- 既存の main-menu スタイル上書き ---------- */
   /* SP nav 内で .main-menu が表示された場合の崩れを防ぐ */
   header .inner .main-menu {
     display: block;
   }

 }
 
 @media screen and (min-width: 891px) {
    header .inner .account {
        top: -3px !important;
        font-size: 13px !important;
    }
}