/* ============================================================
   ヘッダー統合スタイル（2ブロック統合版）20260515
   ============================================================ */

/* ----------------------------------------------------------
   ロゴ
---------------------------------------------------------- */
.header-top .logo {
  margin-top: 10px;
  margin-left: 35px;
}

.header-logo {
  margin: 0;
  margin-left: 25px;
}

.header-logo img {
  width: 100%;
}

.header-top .logo img {
  max-height: 49px;
  width: auto;
}

/* ----------------------------------------------------------
   ヘッダーナビゲーション（右上ボタンエリア）
---------------------------------------------------------- */
.header-top-navi {
  max-width: 420px;
  display: flex;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

.header-top-navi div {
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;

  /* 追加：ホバーアニメーション */
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;

  /*  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; */
}

/*
.header-top-navi-01, .header-top-navi-02 {
  padding-top: 1.5rem;
}*/

/* ============================================================
   リンク共通
   ※ 修正：transition追加
============================================================ */

/*.header-top-navi-01 a,*/
.header-top-navi-02 a,
.header-top-navi-03 a {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1.1;

  /* 追加 */
  transition: color 0.3s ease;
}

/* ============================================================
   ホバー時
============================================================ */

/* 修正：.header-top-navi-01 a:hover を除外（01は個別管理） */
.header-top-navi-02 a:hover,
.header-top-navi-03 a:hover {
  color: #ffffff;
}

/* 修正：.header-top-navi-01 a:visited を除外（01は個別管理） */
.header-top-navi-02 a:visited,
.header-top-navi-03 a:visited {
  color: #ffffff;
}

/* ============================================================
   無料でお試し
============================================================ */

.header-top-navi-01,
.header-top-navi-01-sp {
  /* 変更前 */
  /*
  background-image: linear-gradient(50deg, #e84c6b, #ffc641 56%);
  */

  /* 変更後 */
  background-color: #ffffff;
  border: 2px solid #ff7b50;

  width: 12rem;
}

/* 追加：文字色 */
.header-top-navi-01 a,
.header-top-navi-01-sp a {
  color: #ff7b50;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1.1;
  font-weight: 600;

  /* 追加 */
  transition: color 0.3s ease;
}

/* 追加：visited（白上書き防止） */
.header-top-navi-01 a:visited,
.header-top-navi-01-sp a:visited {
  color: #ff7b50;
}

/* 追加：ホバー時反転 */
.header-top-navi-01:hover,
.header-top-navi-01-sp:hover {
  background-color: #ff7b50;
}

/* 追加 */
.header-top-navi-01:hover a,
.header-top-navi-01-sp:hover a {
  color: #ffffff;
}

/* ============================================================
   資料請求
============================================================ */

.header-top-navi-02,
.header-top-navi-02-sp {
  /*background-image: url( '../img/bg_header_contact.png' );  */
  background-image: linear-gradient(21deg, #d51e91, #ff7b50 60%);
  width: 12rem;
  letter-spacing: 0.5em;
}

/* 追加：ホバー反転 */
.header-top-navi-02:hover,
.header-top-navi-02-sp:hover {
  background: #ffffff;
  border: 2px solid #d51e91;
}

/* 追加 */
.header-top-navi-02:hover a,
.header-top-navi-02-sp:hover a {
  color: #d51e91;
}

/* ============================================================
   オンプレミス版はこちら
============================================================ */

.header-top-navi-03 {
  width: 14rem;
  background-image: linear-gradient(90deg, #3aaaec, #0082d0 66%);
  box-sizing: border-box;
}

/* 追加：ホバー反転 */
.header-top-navi-03:hover {
  background: #ffffff;
  outline: 2px solid #0082d0;
  outline-offset: -2px;
}

/* 追加 */
.header-top-navi-03:hover a {
  color: #0082d0;
}

/* ----------------------------------------------------------
   ヘッダー全体
---------------------------------------------------------- */
#header {
  background-color: rgba(255, 255, 255, 0.3);
}

#header .global-nav .header-container {
  width: 100%;
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  align-items: center;
}

#header .global-nav ul {
  font-weight: 400;
}

#header .global-nav ul li a {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* グローバルナビ区切り線 */
#header #global-nav-ul > li::after {
  position: absolute;
  top: calc((40px - 1em) / 2);
  left: 100%;
  content: "";
  width: 1px;
  height: 1em;
  background-color: #333;
}

#header #global-nav-ul > li:nth-child(1) {
  border-left: none;
}

#header #global-nav-ul > li:last-child::after {
  content: none;
}

.font-size {
  /*padding-top: 1.1rem;*/
  font-size: 2.1rem;
}

/* ----------------------------------------------------------
   レスポンシブ（大 → 小 順）
---------------------------------------------------------- */

/* 1322px 以下 */
@media screen and (max-width: 1322px) {
  #header .global-nav ul {
    padding: 0 50px;
    font-size: 1.3rem;
  }
}

/* 1197px 以下 */
@media screen and (max-width: 1197px) {
  #header .global-nav ul {
    padding: 0 50px;
    font-size: 1.1rem;
  }
}

/* 1123px 以下 */
@media screen and (max-width: 1123px) {
  #header .global-nav ul {
    padding: 0 40px;
  }
}

/* 1100px 以下 */
@media screen and (max-width: 1100px) {
  .header-top-navi img {
    width: 100%;
  }

  .header-logo img {
    width: 130px;
  }

  #header .global-nav ul {
    font-size: 1rem;
  }

  #header .global-nav ul li a {
    padding: 0 10px;
  }
}

/* 960px 以下 */
@media screen and (max-width: 960px) {
  #header .global-nav ul {
    font-size: 10px;
  }

  #header .global-nav ul li a {
    padding: 0 10px;
  }

  /* スマホ用ナビ */
  .header-top-navi-sp {
    position: fixed; /* 画面に固定 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 半分ずつ均等に分割 */
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 10px 8px;
    text-align: center;
    /* ↓ iPhoneのホームバー（セーフエリア）対応 */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
    z-index: 100;
  }

  .header-top-navi-01-sp,
  .header-top-navi-02-sp {
    padding: 0.7rem;
    font-size: 2rem;
    width: 100%; /* ← セル幅いっぱいに広げる */
    box-sizing: border-box;
  }

  /* 修正：01-sp と 02-sp を分離（文字色の競合解消） */
  .header-top-navi-01-sp {
    color: #ff7b50;
  }

  .header-top-navi-02-sp {
    color: #ffffff;
  }

  .header-top-navi-01-sp a {
    color: #ff7b50;
    text-decoration: none;
    font-weight: 400;
  }

  .header-top-navi-02-sp a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
  }

  .header-top-navi-01-sp a:hover {
    color: #ffffff;
    font-weight: 500;
  }

  .header-top-navi-02-sp a:hover {
    color: #ffffff;
    font-weight: 500;
  }

  .header-top-navi-01-sp a:visited {
    color: #ff7b50;
    font-weight: 500;
  }

  .header-top-navi-02-sp a:visited {
    color: #ffffff;
    font-weight: 500;
  }

  /* コンテンツがフッターに隠れないように余白を確保 */
  .page-content {
    padding-bottom: 80px;
  }
}

/* 900px 以下 */
@media screen and (max-width: 900px) {
  #header .global-nav ul {
    font-size: 10px;
    padding: 0;
  }

  .header-logo img {
    width: 100px;
  }
}

/* 870px 以下 */
@media screen and (max-width: 870px) {
  #header .global-nav ul {
    font-size: 10px;
    padding: 0;
  }

  .header-logo img {
    width: 100px;
  }

  .header-logo {
    margin-left: 12px;
  }
}

/* 775px 以下 */
@media screen and (max-width: 775px) {
  .header-top-navi img {
    width: 80px;
  }

  .header-logo img {
    width: 75px;
  }
}

/* 751px 以下 */
@media screen and (max-width: 751px) {
  .header-logo img {
    width: 55px;
  }
}

/* 705px 以下 */
@media screen and (max-width: 705px) {
  .header-top-navi img {
    width: 70px;
  }

  .header-logo img {
    width: 62px;
  }
}

/* 695px 以下 */
@media screen and (max-width: 695px) {
  .header-top-navi img {
    width: 71px;
  }

  .header-logo img {
    width: 62px;
  }

  #header .global-nav ul li a {
    padding: 0;
  }

  #header .header-top-sp .container ul li a {
    padding: 8px;
  }

  #header #global-nav-ul-sp > li::after {
    top: calc((18px - 1em) / 2);
  }
}

/* 579px 以下 */
@media screen and (max-width: 579px) {
  #header .header-top .logo {
    margin-top: 0.2vw;
    margin-left: 2vw;
    max-width: 120px;
    height: 18px;
  }

  .header-top-navi {
    max-width: 160px;
  }

  .header-top-navi img {
    max-width: 80px !important;
  }

  #header .global-nav ul {
    font-weight: normal;
  }

  #header .global-nav ul li::after {
    content: none !important;
  }

  #header #global-nav-ul-sp > li {
    border-left: none;
  }

  #header .global-nav ul li {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #f7f7f7;
  }
}

/* ============================================================
   SP版メニュー展開制御用 CSS（修正版）
   ★ position: absolute → position: fixed に変更
   ============================================================ */

/* スマホサイズ（~579px）でのメニュー初期状態 */
@media screen and (max-width: 579px) {
  /* SP用のメインメニューはデフォルト非表示 */
  #global-nav-ul-sp {
    display: none !important;
    position: fixed;
    /* ★修正：absolute → fixed に変更（viewport全体を基準にする） */
    top: 80px; /* ヘッダーの高さに合わせて調整 */
    left: 0;
    right: 0;
    max-height: auto;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    z-index: 999;
    flex-direction: column;
    overflow-y: auto;
    width: 100vw;
  }

  #global-nav-ul-sp.is-open {
    display: flex !important;
  }

  /* メニューのスタイル調整 */
  #header .header-top-sp .container {
    width: 100%;
    /* ★修正：width: 100vw → width: 100% に変更（スクロール防止） */
  }

  #header .header-top-sp #global-nav-ul-sp li {
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    /* ★修正：width: 100vw → width: 100% に変更 */
  }

  #header .header-top-sp #global-nav-ul-sp li a {
    display: block;
    padding: 12px 16px;
    width: 100%;
    /* ★修正：width: 100vw → width: 100% に変更 */
  }

  /* ハンバーガーアイコン・CLOSEボタンの表示切り替え */
  #sp-menu .open {
    display: block;
    cursor: pointer;
  }

  #sp-menu .close {
    display: none;
    cursor: pointer;
  }

  /* サブメニューのスタイル */
  #header .header-top-sp .sub-menu {
    background-color: #f7f7f7;
    border-left: 4px solid #d9d9d9;
    padding-left: 16px;
  }

  #header .header-top-sp .sub-menu li {
    border-bottom: 1px solid #e5e5e5;
    border-left: none !important;
    border-right: none !important;
  }
}

/* PC版（580px 以上）では全て表示 */
@media screen and (min-width: 580px) {
  #global-nav-ul-sp {
    display: flex !important;
  }

  #sp-menu {
    display: none !important;
  }

  .visible-xs-block {
    display: none !important;
  }
}