html {
  /* スムーズスクロールを有効化 */
  scroll-behavior: smooth;
  /* スクロール時の上paddingを動的に制御。JSが動かない場合のフォールバック値も設定 */
  scroll-padding-top: var(--header-height, 60px);
}

/* さらに保険として、IDを持つ全要素にもマージンを設定（ブラウザ互換用） */
[id] {
  scroll-margin-top: var(--header-height, 60x);
}



header {
 background: #FFFFFF;
 border-bottom: 1px solid #E5E7EB;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 transition: all 0.3s ease;
 }
 .header-container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 0 32px;
 height:140px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 transition: height 0.3s ease;
 }
 header.scrolled .header-container {
 height: 60px;
 }
 .logo {
 display: flex;
 align-items: center;
 height: 20px;
 text-decoration: none;
 transition: height 0.3s ease;
 }
 .logo img {
 height: 100%;
 width: auto;
 display: block;
 }
 header.scrolled .logo {
 height: 20px;
 }
 .header-right {
 display: flex;
 align-items: center;
 gap: 16px;
 }
 
 .hp_lgHeaderOnly{
 margin-left: 20px;
 }
 
 /* コーポレートサイトボタン */
 .corporate-btn {
 background: transparent;
 border: 1px solid #D1D5DB;
 color: #374151;
 padding: 8px 12px;
 border-radius: 6px;
 cursor: pointer;
 transition: all 0.2s ease;
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 14px;
 font-weight: 500;
 text-decoration: none;
 }
 .corporate-btn:hover {
 background: #F3F4F6;
 border-color: #9CA3AF;
 color: #111827;
 }
 .globe-icon {
 width: 18px;
 height: 18px;
 fill: currentColor;
 }
.home-icon {
  width: 20px;
  height: 20px;
  fill: currentColor; /* 親要素の文字色に合わせて黒く表示されます */
}
 /* 選択ボタン（メガメニュートリガー） */
 .region-selector {
 position: relative;
 }
 .region-select-btn {
 background: #000000;
 border: none;
 color: #FFFFFF;
 padding: 10px 20px;
 border-radius: 4px;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s ease;
 font-family: inherit;
 white-space: nowrap;
 display: flex;
 align-items: center;
 gap: 8px;
 }
 .region-select-btn:hover {
 background: #1F2937;
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 .region-select-btn:active {
 transform: translateY(0);
 }
 .dropdown-arrow {
 font-size: 10px;
 transition: transform 0.2s ease;
 }
 .region-select-btn.active .dropdown-arrow {
 transform: rotate(180deg);
 }
 /* お問い合わせボタン */
 .contact-btn {
 background: #e60012;
 border: none;
 color: #FFFFFF;
 padding: 10px 24px;
 border-radius: 4px;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s ease;
 font-family: inherit;
 white-space: nowrap;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 }
 .contact-btn:hover {
 background: #EA580C;
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3);
 }
 .contact-btn:active {
 transform: translateY(0);
 }
 /* ボタン内アイコン制御 */
 .btn-icon {
 display: none;
 width: 18px;
 height: 18px;
 fill: currentColor;
 flex-shrink: 0;
 }
 /* スクロール時の表示制御 - コーポレートボタンのみ非表示 */
 header.scrolled .corporate-btn {
 display: none;
 }
 /* メガメニュー */
 .mega-menu {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: #FFFFFF;
 border-top: 1px solid #E5E7EB;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
 opacity: 0;
 visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.3s ease;
 z-index: 99;
 }
 .mega-menu.active {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
 }
 .mega-menu-container {
 max-width: 1400px;
 margin: 0 auto;
 padding: 40px 32px;
 }
 .mega-menu-header {
 margin-bottom: 32px;
 padding-bottom: 20px;
 border-bottom: 1px solid #E5E7EB;
 }
 .mega-menu-header h3 {
 font-size: 20px;
 font-weight: 600;
 color: #000000;
 margin-bottom: 8px;
 }
 .mega-menu-header p {
 font-size: 14px;
 color: #6B7280;
 }
 .mega-menu-search {
 margin-bottom: 32px;
 }
 .mega-menu-search input {
 width: 100%;
 max-width: 400px;
 padding: 12px 16px;
 border: 1px solid #D1D5DB;
 border-radius: 6px;
 font-size: 14px;
 font-family: inherit;
 outline: none;
 transition: border-color 0.2s ease;
 }
 .mega-menu-search input:focus {
 border-color: #000000;
 }
 .region-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 24px;
 }
 .region-section {
 background: #F9FAFB;
 border: 1px solid #E5E7EB;
 border-radius: 8px;
 padding: 20px;
 transition: all 0.2s ease;
 }
 .region-section:hover {
 border-color: #D1D5DB;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 .region-section h4 {
 font-size: 16px;
 font-weight: 600;
 color: #000000;
 margin-bottom: 16px;
 padding-bottom: 12px;
 border-bottom: 2px solid #000000;
 }
 .country-list {
 list-style: none;
 }
 .country-item {
 margin-bottom: 10px;
 }
 .country-link {
 color: #374151;
 text-decoration: none;
 font-size: 14px;
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 8px;
 border-radius: 4px;
 transition: all 0.15s ease;
 }
 .country-link:hover {
 background: #FFFFFF;
 color: #000000;
 padding-left: 12px;
 }
 .country-flag {
 font-size: 16px;
 }
 /* メガメニューオーバーレイ */
 .mega-menu-overlay {
 position: fixed;
 top: 70px;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.3);
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
 z-index: 98;
 }
 .mega-menu-overlay.active {
 opacity: 1;
 visibility: visible;
 }
 header.scrolled .mega-menu-overlay {
 top: 60px;
 }
 /* コンテンツエリア */
 .content {
 padding: 140px 32px 60px;
 max-width: 1400px;
 margin: 0 auto;
 }
 .hero-section {
 text-align: center;
 margin-bottom: 80px;
 }
 .hero-section h1 {
 font-size: 48px;
 font-weight: 600;
 margin-bottom: 20px;
 color: #000000;
 line-height: 1.2;
 }
 .hero-section p {
 font-size: 18px;
 color: #6B7280;
 max-width: 700px;
 margin: 0 auto 40px;
 line-height: 1.6;
 }
 .scroll-indicator {
 display: inline-block;
 padding: 12px 24px;
 background: #F3F4F6;
 border-radius: 8px;
 font-size: 14px;
 color: #6B7280;
 margin-top: 40px;
 }
 .demo-section {
 padding: 60px 0;
 background: #F9FAFB;
 border-radius: 12px;
 margin: 40px 0;
 text-align: center;
 }
 .demo-section h2 {
 font-size: 32px;
 margin-bottom: 16px;
 color: #000000;
 }
 .demo-section p {
 font-size: 16px;
 color: #6B7280;
 margin-bottom: 80px;
 }


/* ========================================
   タブレット時（768px〜1024px）の固定高さ＆スクロール
   ======================================== */
@media (min-width: 768px) and (max-width: 1280px) {
  .mega-menu {
    height:  70vh; /* ビューポートの70%に固定 */
    max-height: 600px; /* 最大高さも設定（任意） */
    overflow-y: auto; /* 縦スクロールを有効化 */
    -webkit-overflow-scrolling: touch; /* iOSスムーズスクロール */
  }
  
  /* メニュー内のコンテンツもスクロール可能に */
  .mega-menu-container {
    padding: 24px 32px;
  }
  
  /* グリッドを2列のまま維持 */
  .region-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ========================================
   スマホ時（～768px）の固定高さ＆スクロール
   ======================================== */
@media (max-width: 768px) {
  .mega-menu {
    height: 95vh; /* ビューポートの70%に固定 */
    overflow-y: auto; /* 縦スクロールを有効化 */
    -webkit-overflow-scrolling: touch; /* iOSスムーズスクロール */
  }
}

 /* レスポンシブ */
 @media (max-width: 1024px) {
 .region-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 }
 @media (max-width: 768px) {
 .header-container {
 padding: 0 20px;
 height: 60px;
 }
 header.scrolled .header-container {
 height: 56px;
 }
 .logo {
 height: 20px;
 }
 header.scrolled .logo {
 height: 20px;
 }
 .header-right {
 gap: 8px;
 }
 .corporate-btn span {
 display: none;
 }
 .region-select-btn {
 padding: 8px 10px;
 font-size: 13px;
 }
 .contact-btn {
 padding: 8px 10px;
 font-size: 13px;
 }
  /*コーポレートボタンのみ非表示 */
.corporate-btn {
 display: none;
 }
 
 /* モバイル時：テキスト非表示・アイコンのみ表示 */
 .btn-text {
 display: none;
 }
 .btn-icon {
 display: block;
 }
 .region-select-btn .dropdown-arrow {
 display: none;
 }
 .mega-menu-container {
 padding: 24px 20px;
 }
 .mega-menu-header h3 {
 font-size: 18px;
 }
 .region-grid {
 grid-template-columns: 1fr;
 gap: 16px;
 }
 .region-section {
 padding: 16px;
 }
 .mega-menu-overlay {
 top: 60px;
 }
 header.scrolled .mega-menu-overlay {
 top: 56px;
 }
 .content {
 padding: 100px 20px 40px;
 }
 .hero-section h1 {
 font-size: 28px;
 }
 .hero-section p {
 font-size: 15px;
 }
 }
 @media (max-width: 480px) {
 .contact-btn {
 padding: 8px 10px;
 }
 }


.mega-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.mega-menu-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #333;
  line-height: 1;
  flex-shrink: 0;
}

.mega-menu-close:hover {
  opacity: 0.6;
}

.mega-menu-close svg {
  display: block;
  fill: currentColor;
}


/* ========================================
   クローズボタン右寄せ＆装飾CSS
   ======================================== */

/* 1. 親要素：ボタンを右端に寄せる */
.mega-menu-top {
  display: flex;
  justify-content: space-between; /* 左：タイトル / 右：ボタン */
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* タイトル部分は伸縮させる */
.mega-menu-head {
  flex: 1;
  min-width: 0;
}

.mega-menu-head h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}

.mega-menu-head p {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* ========================================
   2. クローズボタン装飾（2パターン）
   ======================================== */

/* --- Aパターン：企業カラー ネイビー（推奨） --- */
#closeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: #1e3a8a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(30, 58, 138, 0.25);
  transition: all 0.2s ease;
}

/* × アイコンを擬似要素で追加 */
#closeBtn::before {
  content: "×";
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

#closeBtn:hover {
  background: #152a63;
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.35);
  transform: translateY(-1px);
}

#closeBtn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(30, 58, 138, 0.25);
}

/* --- Bパターン：白抜き シンプル（Aを無効にしてこちらを使う場合） --- */
/*
#closeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: #ffffff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

#closeBtn::before {
  content: "×";
  color: #ef4444;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

#closeBtn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
*/



/* ========================================
   横並びリスト
   ======================================== */

.list-yoko {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* 5の倍数番目だけ右のmarginを消す */
.list-yoko li:nth-child(5n) {
  margin-right: 0;
}

.list-yoko li {
  display: flex;
  width: 20%;
  box-sizing: border-box;
  margin: 0;
}

.list-yoko li a {
  display: flex;
  position: relative;
  justify-content: left;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 20px 10px 20px 30px;
  line-height: 1.2;
}

.list-yoko li a::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 0;
  border-top: 2px solid #c6001c;
  border-right: 2px solid #c6001c;
  transform: rotate(45deg);
  position: absolute;
  top: 44%;
  left: 10px;
}

@media(max-width:800px) {
  .list-yoko {
    /*追加*/
    flex-wrap: wrap;
  }

  .list-yoko li {
    /*追加*/
    width: 50%;
  }

  .list-yoko li:nth-child(n+2) {
    margin-left: 0;
  }
}