@charset "utf-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

/* 固定ヘッダーの実寸に合わせて調整 */
:root{ --header-h: 120px; }          /* PCのヘッダー高 */
@media (max-width:900px){ :root{ --header-h: 50px; } } /* SPのヘッダー高など */

html { scroll-behavior: smooth; }    /* 任意：スムーススクロール */

/* アンカー着地の要素に余白（ヘッダー分）を確保 */
.section[id],
[id].anchor-target {
  scroll-margin-top: calc(var(--header-h) + 12px); /* 少し余白を足すと綺麗 */
}

.anchor-offset {
  position: relative;
}
.anchor-offset::before{
  content:"";
  display:block;
  height: calc(var(--header-h) + 12px);
  margin-top: calc(var(--header-h) * -1 - 12px);
  visibility: hidden;
}


/* helpers */
.mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-20{margin-top:20px} .mt-60{margin-top:60px}
.mb-8{margin-bottom: 8px} .mb-12{margin-bottom: 12px} .mb-16{margin-bottom: 16px} .mb-20{margin-bottom: 20px} .mb-30{margin-bottom: 30px} .mb-40{margin-bottom: 40px} .mb-70{margin-bottom: 70px}

body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:'Noto Sans SC', sans-serif;
  line-height:1.6;
}

/* 共通 */
.container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ヘッダー */
.header {
  position: fixed;
  width: 100%;
  padding-top: 15px;
  margin: 0 auto;
  z-index: 1000;
  height: 100px;
  background: #fff;

  /* 横はみ出し対策 */
  overflow-x: clip;
  left: 0;
  right: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

/* 左上ロゴ */
.logo-top {
  margin-top: 6px;
}
.logo-top img {
  width: 328px; /* 調整可能 */
  max-width: 100%;
  height: auto;
}

/* 右側のロゴ＋言語切替を横並び */
.header-top-right {
  display: flex;
  align-items: center;       /* 縦中央揃え */
  gap: 16px;                 /* ロゴと言語の間隔 */
  min-width: 0;
}

.logo-inline img {
  height: 28px;              /* 高さを適宜調整 */
  width: auto;
  display: block;
}

.header-bottom {
  display: flex;
  justify-content: center; /* ← グローバルナビを右寄せ */
  align-items: center;
  margin: 0;
  padding: 0;
}


/* グローバルナビ */
.global-nav {
  color: #000;
  background: #fff;
  display: inline-block;
}

.global-nav a {
  color: #005bac;
  font-size: 0.9rem;
  text-decoration: none;
  position: relative;
  display: block;
  padding: 8px 25px;
}
.global-nav a:last-child {
  border-right: none;
}

.global-nav a:hover {
  background-color: #eee;
}


.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav > ul > li {
  position: relative;
  display: inline-block;
}


/* サブメニュー非表示 */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 180px;
  z-index: 100;
}

.sub-menu li a {
  padding: 12px 12px;
  color: #000;
}

.sub-menu li a:hover {
  background-color: #ddd;
}

/* ホバーで表示 */
.has-sub:hover .sub-menu {
  display: block;
}

/* 言語切替タブ */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-tab {
  padding: 2px 5px;
  border: 1px solid #005bac;
  border-radius: 9999px; /* 丸ボタン */
  background: #fff;
  color: #005bac;
  cursor: pointer;
  font-size: .8rem;
  transition: all 0.2s ease;
}

.lang-tab:hover, .lang-tab.active {
  background: #005bac;
  color: #fff;
}


/* --- ハンバーガーメニュー（PCでは非表示） --- */
/* ★重要：nav（.hamburger-menu）は“箱”なので幅/高さ固定しない */
.hamburger-menu {
  display: none; /* PCでは非表示 */
}


/* ページヘッダー領域（ヘッダーにかぶらないよう余白を確保） */
.page-header {
  padding-top: 100px;     /* 固定ヘッダーの高さ分 + 余白 */
  margin-bottom: 20px;
}

/* パンくず */
.breadcrumb {
  max-width: 1280px;
  width: 100%;
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0 auto 30px;
  padding: 100px 0 0 0;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumb li::after {
  content: "›";
  margin: 0 8px 0 15px;
  color: #9ca3af;
}
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a {
  text-decoration: none;
  color: #0b5cab;
  font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }

/* ページタイトル（Heroの上に独立） */
.page-ttl-box {
  max-width: 1280px;
  width: 100%;
  /* 右をautoにして中央化をやめ、左右のガターを確保 */
  margin: 60px auto 40px;
  padding-left: clamp(0px, (100vw - 1280px) / 2, 0px);
  padding-right: clamp(0px, (100vw - 1280px) / 2, 0px);
}
.ttl_page {
  display: flex;
  justify-content: flex-start;
  width: auto;
  padding-bottom: 20px;
  margin: 0; /* 中央寄せの auto を排除 */
  font-size: 1.6rem;
  font-weight: bold;
  color: #005bac;
  text-align: left;
}

.title-deco {
  display: flex;
  justify-content: flex-start; /* 左寄せ */
  gap: 8px;
  margin-bottom: 20px;
}

.title-deco .line {
  height: 4px;
  width: 86px;
  display: block;
}

.title-deco .red {
  background-color: #E60019;
}

.title-deco .blue {
  background-color: #005bac;
}

.page-title {
  text-align: center;
  color: #0b5cab;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 500;
  margin: 0;
}

/* Hero 見出しを使わないため念のため無効化（残っていても影響しない） */
.hero-heading{display:none}

/* Heroとの重なり対応 */
.hero {
  padding-top: 150px; /* ヘッダーの高さ分 */
}


/* ===== CTA Band ===== */
.cta-icon {
  margin: 70px 0 0 0;
  padding: 0;
  text-align: center;
  height: 20px;
}
.cta-icon img {
  width: 640px;
  max-width: 100%;
  height: auto;
}
.cta-band{
  /* 背景色 + 世界地図の背景画像（差し替え） */
  background-color:#0b5cab;
  background-image: url("../img/common/contactus_bg.png"); /* ← ここを差し替え */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 高さ・余白 */
  min-height: 140px;              /* デザインに合わせて調整(120–180px目安) */
  display: grid;
  place-items: center;
  padding: 20px 16px 22px;             /* 画面が低い時の余白保険 */
  margin: 0px auto 20px;
  color:#fff;
}

.cta-band__inner{
  width:min(1200px, 94%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  text-align:center;
}

.cta-band__title{
  margin:0;
  /*letter-spacing:.2em;*/
  font-size: clamp(20px, 3.0vw, 30px); /* 画像の見た目に近いサイズ感 */
}

.cta-band__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 18px;
  border-radius: 999px;           /* ピル型 */
  background:#fff;
  color:#124e9c;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.cta-band__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  opacity:.95;
}

/* スマホでの余白と並び */
@media (max-width: 560px){
  .cta-band__inner{
    flex-direction:column;
    gap:14px;
  }
}

.back-top {
  text-align: right;
  margin: 8px 0 24px;
}
.back-top a {
  display: inline-block;
  padding: 6px 14px;
  background: #0b5cab;
  color: #fff;
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.back-top a:hover {
  background: #093f80;
}


/* フッター */
.footer {
  background-color: #000;
  color: #fff;
  font-size: 14px;
  padding: 0px 0 0;
  margin-top: 70px;
}
.footer-top {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.footer-links-area {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 0 20px;
}

.footer-col {
  flex: 1;
  max-width: 350px;
  min-width: 180px;
  margin: 0 50px 20px 0;
}
.footer-col p {
  width: 300px;
  font-size: .9rem;
}

.footer-col2 {
  flex: 1;
  max-width: 230px;
  min-width: 180px;
  margin: 0 0px 20px 0;
}

.footer-col h4, .footer-col2 h4 {
  font-size: 1.1rem;
  margin-bottom: 15px;
  font-weight: bold;
  font-family:'Noto Sans SC', sans-serif;
}
.footer-col h4 a,.footer-col2 h4 a {text-decoration: none;color: #fff;}

.footer-col ul, .footer-col2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li, .footer-col2 ul li {
  margin-bottom: 6px;
}

.footer-col ul li a, .footer-col2 ul li a {
  font-size: .9rem;
  color: #fff;
  text-decoration: none;
}

.footer-col ul li a::before, .footer-col2 ul li a::before, .footer-col3 ul li a::before {
  content: "- ";
  color: #fff;
  padding-left: 5px;
}

.footer-col ul li a:hover, .footer-col2 ul li a:hover {
  text-decoration: underline;
  opacity: 1;
}

.footer-col3 {
  flex: 1;
  min-width: 180px;
  margin-top: 45px;
  margin-bottom: 20px;
}

.footer-col3 h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  font-weight: bold;
}

.footer-col3 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col3 ul li {
  margin-bottom: 10px;
}

.footer-col3 ul li a {
  font-size: 1.0rem;
  color: #fff;
  text-decoration: none;
}

.footer-bottom {
  text-align: center;
  padding: 15px 20px;
  font-size: 0.9rem;
  background-color: #fff;
  color: #000;
}

.footer-bottom-block {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
  color: #000;
}
.footer-bottom a {
  color: #000;
  text-decoration: none;
}

@media (max-width: 1350px) {
  .container {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 0;
  }
  .page-header {
    padding-top: 100px;
    margin-bottom: 20px;
  }
  .page-ttl-box {
    max-width: 1280px;
    width: 96%;
    margin: 60px auto 50px;
  }
  .footer-top {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
  }
  .footer-links-area {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 40px 70px;
  }
}

@media (max-width: 1280px) {
  .container {
    width: 98%;
    max-width: 1280px;
    margin: auto;
    padding: 0 1%;
  }
  .page-ttl-box {
    max-width: 1280px;
    width: 94%;
    margin: 60px auto 50px;
  }
  .breadcrumb {
    width: 96%;
    margin: 0 auto 30px;
    padding: 100px 0 0 0;
  }
}

@media (max-width: 1024px) {
  .footer-col, .footer-col2 {
    max-width: 300px;
    min-width: 240px;
  }
  .footer-col3 {
    min-width: 100px;
    margin-top: 45px;
    margin-bottom: 20px;
  }
}

@media (min-width: 769px) {
  .has-sub:hover .sub-menu {
    display: block;
    position: absolute;
    max-height: none;
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .nav ul {
    flex-direction: column;
    display: none;
  }
     
  .header { overflow-x: visible; }

  /* ★修正：左右の余白を安定させる */
  .header .container {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: 0 16px;
  }

  /* ヘッダー上段：3エリアで管理 */
  .header-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
  }

  /* 左：サイトロゴ */
  .logo-top { justify-self: start; }
  .logo-top img {
    width: min(220px, 58vw);
    max-width: 100%;
    height: auto;
  }

  /* 右側エリア（日本本社ロゴ＋ハンバーガー） */
  .header-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    min-width: 0;
  }

  .logo-inline { margin-right: 30px; }

  .logo-inline img {
    height: 22px;
    width: auto;
  }

  /* SPでは検索・言語切替は非表示 */
  .header-top-right .site-search,
  .header-top-right .lang-switch {
    display: none;
  }

  .header-bottom nav { display: none; }

  /* ===============================
     ★ハンバーガー（ここが肝）
     nav(.hamburger-menu)は“箱”
     三本線は .menu-icon に固定サイズ
  =============================== */

  .hamburger-menu {
    display: block;
    position: absolute;
    top: 10px;
    right: 6px;          /* 右余白 */
    z-index: 999;

    /* nav自体は縮ませない・タップしやすく */
    width: auto;
    height: auto;
    padding: 6px;         /* クリック領域を少し増やす */
  }

  .menu-icon{
    display:block;
    width: 34px;
    height: 30px;
    position: relative;
    flex: 0 0 34px;       /* ★絶対に細くならない */
    cursor: pointer;
  }

  .menu-icon span{
    position:absolute;
    left:0;
    width:100%;
    height:3px;
    background:#000;
    transition: 0.3s ease;
    border-radius: 0;
  }
  .menu-icon span:nth-child(1){ top:0; }
  .menu-icon span:nth-child(2){ top:10px; }
  .menu-icon span:nth-child(3){ top:20px; }

  #menu-toggle { display:none; }

  #menu-toggle:checked + .menu-icon span:nth-child(1){
    transform: rotate(45deg);
    top: 10px;
  }
  #menu-toggle:checked + .menu-icon span:nth-child(2){
    opacity: 0;
  }
  #menu-toggle:checked + .menu-icon span:nth-child(3){
    transform: rotate(-45deg);
    top: 10px;
  }

  /* メニュー本体：SPは fixed で“画面基準”にするのが安全 */
  .hamburger-menu .menu{
    display: none;
    position: fixed;
    top: 12%;
    right: 0;
    height: 100vh;
    width: min(92vw, 420px);  /* ← ここで広さを調整（例：最大420px） */
    max-width: 100vw;
    overflow-y: auto;
    background: rgba(255,255,255,1);
    border-radius: 0;
  }


  /* チェックで開く */
  #menu-toggle:checked + .menu-icon + .menu{
    display: block;
  }
    
  .menu ul { list-style:none; padding:0; margin:0; }
  .menu ul li { margin: 1rem 0; }

  .menu ul li a {
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
  }

  /* サブメニュー（アコーディオン） */
  .has-sub { position: relative; }
  .has-sub a { padding: 1rem 0; }

  .has-sub > .sub-menu {
    position: relative;
    max-height: 0;
    overflow: hidden;
    background: rgba(230,230,230,0.95);
    margin: 0;
    border-radius: 0px;
    transition: max-height 0.3s ease;
    padding: 0;
  }

  .has-sub > .sub-menu li {
    margin: 0;
    padding: 0.1rem 0rem;
    list-style: none;
    border-bottom: 1px solid #000;
  }

  .has-sub > .sub-menu li a {
    padding-left: 0.9rem;
    font-size: 0.9rem;
  }

  .has-sub.open > .sub-menu { max-height: 500px; }
    
  .hamburger-menu .has-sub > a .arrow{
  font-size: 12px !important;   /* 固定 */
  line-height: 1 !important;    /* 親の行高に引っ張られない */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;                 /* クリックしやすい横幅 */
  height: 1.6em;                /* クリックしやすい高さ */
  flex: 0 0 auto;
}
  * 親リンクがflexなので、矢印は右端に寄せる */
.hamburger-menu .has-sub > a{
  display: flex;
  align-items: center;
}
.hamburger-menu .has-sub > a .arrow{
  margin-left: auto;
}
  .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  .has-sub.open > a .arrow { transform: rotate(180deg); }

  .menu-extra {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 1.5rem auto;
    border-top: 1px solid rgba(0,0,0,0.3);
    padding: 1rem 0;
    gap: 10px;
  }
  .menu-extra a { text-decoration: none; }
  .menu-extra img { width: 55%; }
    
  .system-btn .btn {
    width: 100%;             /* 幅を画面に合わせる */
    max-width: 100%;       /* 最大幅を設定 */
    font-size: 1rem;
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
    justify-content: flex-start;
    background: #005bac;
  }
  .system-btn .btn.blue {
    /*background: linear-gradient(to bottom, #1E90FF, #005bac);*/
    border-radius: 35px;
    padding: 10px 20px;
  }
  .system-btn .btn img {
    margin-right: 10px;    
  }
    

  /* フッター（SP） */
  .footer-top { margin:0 auto; padding:0 0 0 7%; }
  .footer-links-area {
    display:flex;
    flex-direction: column;
    max-height: 100%;
    margin:0 auto;
    padding:20px 20px 20px 7%;
  }
  .footer-col { min-width:240px; }
  .footer-col2 { min-width:240px; margin-bottom:0; }
  .footer-col3 { min-width:100px; margin-top:0; margin-bottom:20px; }

  .footer-col h4, .footer-col2 h4,
  .footer-col3 h4 { font-size:1.4rem; }

  .footer-col p { font-size:1rem; }
  .footer-col ul li a, .footer-col2 ul li a, .footer-col3 ul li a {
    font-size:1rem;
  }

  .footer-bottom { padding:15px 0; font-size:1rem; }
  .footer-bottom-block { display:flex; flex-direction:column; }
  .footer-bottom-block p { margin:15px 0; }
}

@media (max-width: 620px) {
  .header {
    width: 100%;
    max-width: none;
    left: 0;
    right: 0;
  }

  .header .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .header-top {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "site toggle"
      "jp   jp";
    row-gap: 6px;
  }

  .logo-top { grid-area: site; justify-self: start; }

  /* 本社ロゴを下段・左寄せ */
  .header-top-right {
    grid-area: jp;
    justify-self: start;
  }

  .header-top-right .site-search,
  .header-top-right .lang-switch {
    display: none;
  }

  .logo-inline { margin-right: 0; }
  .logo-inline img { height: 20px; width: auto; }
}

@media (max-width: 400px) {
  .footer-top img { width: 50%; }
  .footer-links-area { padding: 20px; }
  .footer-col, .footer-col3 {
    max-width: 100%;
    min-width: 180px;
    margin: 0 0 0 20px;
  }
  .footer-col2 {
    min-width: 180px;
    margin: 50px 0 0 20px;
  }
}


/* アクセシビリティ用（視覚的に非表示） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* サイト内検索（PC 上段） */
.site-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.site-search input[type="search"] {
  width: 200px;
  max-width: 24vw;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  font-size: 0.9rem;
  outline: none;
}

.site-search input[type="search"]::placeholder {
  color: #94a3b8;
}

.site-search button[type="submit"] {
  padding: 8px 14px;
  border: 1px solid #005bac;
  border-radius: 9999px;
  background: #005bac;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity .2s ease, transform .1s ease;
}
.site-search button[type="submit"]:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* メニュー内検索（SP メイン） */
.site-search--menu {
  display: none;
  padding: 10px 12px 0;
}
.site-search--menu input[type="search"] {
  width: 100%;
}

.site-search__toggle {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  color: inherit;
}
.site-search__toggle .icon { display: block; }
.site-search__toggle:active { transform: translateY(1px) scale(.98); }

.site-search__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,91,172,.18), 0 0 0 6px rgba(0,91,172,.10);
}

@media (prefers-reduced-motion: reduce) {
  .site-search__toggle { transition: none !important; }
}
@media (prefers-color-scheme: dark) {
  .site-search__toggle { color: #fff; }
}

.site-search__toggle.is-brand {
  background: #005bac;
  color: #fff !important;
  border-color: #005bac;
}
.site-search__toggle.is-brand:hover {
  transform: translateY(-1px);
}

/* レスポンシブ（検索） */
@media (max-width: 768px) {
  .site-search { display: none; }
  .site-search--menu { display: flex; gap: 8px; }
}

@media (max-width: 768px) {
  /* nav自体をflex化して縮み計算を安定させる */
  .hamburger-menu{
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 三本線ボタンは min-size で絶対に縮ませない */
  .hamburger-menu .menu-icon{
    width: 34px !important;
    height: 30px !important;
    min-width: 34px !important;
    min-height: 30px !important;
    flex: 0 0 auto !important;
  }

  /* 線の幅も保険で固定 */
  .hamburger-menu .menu-icon span{
    width: 100% !important;
    min-width: 100% !important;
  }
}