@charset "utf-8";
/*==========================================================
  共通ヘッダー（include/header.php 用）
===========================================================*/

/*----------------------------------------------------------
  サイト共通の緑（基本色 #6FBF8B とその濃淡）
  色を変えるときはここだけを直す
----------------------------------------------------------*/
:root {
  --ns-green: #6fbf8b;        /* 基本の緑（文字・ボタン・枠線） */
  --ns-green-dark: #58a875;   /* ホバーなど少し濃いとき */
  --ns-green-mid: #9cd3af;    /* 飾りの丸など */
  --ns-green-light: #dcefe3;  /* 薄い枠線 */
  --ns-green-pale: #edf7f1;   /* 薄い背景 */

  /* ヘッダーの実測の高さ。main の padding-top に使う。
     マークの大きさや上下の余白を変えたら、この値も合わせること
     （980px 以上は 147px、979px 以下は下の media query で 121px）*/
  --gnav-h: 147px;
}

/*----------------------------------------------------------
  ヘッダーをコンテンツの上に重ねる

  ヘッダーを絶対配置で浮かせ、その分だけ main に上余白を取る。
  main の背景（#F9F9F9）がヘッダーの裏側まで描画されるので、
  以前のような白い帯が出ない。
----------------------------------------------------------*/
.page {
  position: relative;
}
main {
  padding-top: var(--gnav-h);
}


/* このサイトには全体的な box-sizing 指定が無いため、ヘッダー内だけ揃える */
.gnav,
.gnav *,
.gnav *::before,
.gnav *::after,
.gnav_overlay {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 旧 CSS（20_style.css）の header 指定を打ち消す */
.gnav {
  position: absolute;
  top: 0;
  left: 0;
  /* トップページなどに z-index:1000 の装飾画像があり、DOM の後ろにある分だけ
     ヘッダーより前に描画されてしまう。それらより確実に上へ出すための値。
     .gnav はここで重なり合いを作るので、中の値（バー1001・ドロワー1100・
     ハンバーガー1200）はこの中での順番になる */
  z-index: 1300;
  width: 100%;
  background: transparent;
  padding: 0 0 14px;
  text-align: left;
}
/*----------------------------------------------------------
  スクロール時、ロゴバーだけを画面上部に固定する
  （認証マークの列は追従せず、そのまま流れて消える）
  .is-fixed は js/20_header.js が付け外しする
----------------------------------------------------------*/
.gnav_bar.is-fixed {
  position: fixed;
  /* 画面上端から浮かせて、角丸のバーとして見せる */
  top: 18px;
  left: 0;
  right: 0;
  z-index: 1001;
  animation: gnavBarDrop 0.25s ease-out;
}
/* transform で動かすと、アニメーション中のバーが別レイヤーに描き直されて
   文字がぼやけて見える。位置は動かさず、透明度だけで出すようにしている */
@keyframes gnavBarDrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 動きを減らす設定の環境では、スライドインさせずにそのまま表示する */
@media (prefers-reduced-motion: reduce) {
  .gnav_bar.is-fixed {
    animation: none;
  }
}
/* 固定中はページ内リンクの着地点がバーに隠れないようにする */
:root {
  --gnav-bar-offset: 90px;
}
[id] {
  scroll-margin-top: var(--gnav-bar-offset);
}
@media (max-width: 979px) {
  :root {
    --gnav-bar-offset: 80px;
  }
  .gnav_bar.is-fixed {
    top: 12px;
  }
}

/* ファーストビューが白いページ用（ページ側で $gnav_white = true; を指定）。
   ヘッダーの裏側を白にして、FV との段差をなくす */
.gnav__white {
  background: #fff;
}
/* ヘッダーの実高さ（146.25px など端数あり）と --gnav-h（147px）のズレで
   下端に 1px 弱のグレーの線が出るため、白を少しだけ下へ伸ばして塞ぐ。
   ブレイクポイントごとの端数に左右されないよう、余白ではなく擬似要素で持たせる */
.gnav__white::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 4px;
  background: #fff;
}

/*---------------  認証マーク（バーの真上）  ---------------*/
/* バーと同じ幅・同じ中央寄せにして、右端がバーとそろうようにする */
.gnav_marks {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  width: calc(100% - 80px);
  max-width: 1400px;
  margin: 0 auto;
  /* 上 ＝ ページ最上部からの余白、右 40px ＝ バーの右端からの内側の余白 */
  padding: 24px 40px 10px 0;
}
/* 元画像の縦横比が違うため、幅ではなく高さを揃える。
   margin: 0 は旧 CSS の「* + img { margin-top: 36px }」を打ち消すためのもの
   （これが無いと 2 枚目だけ下にずれる）*/
.gnav_mark-sme,
.gnav_mark-isms {
  width: auto;
  height: 28px;
  margin: 0;
}
/* ASR / ISMS は元画像に余白が含まれていて小さく見えるため、少し大きめにする */
.gnav_mark-isms {
  height: 32px;
}

/* プライバシーポリシー・情報セキュリティ方針へのアイコンリンク */
.gnav_mark-link {
  display: flex;
  align-items: center;
  transition: opacity 0.25s;
}
.gnav_mark-link:hover,
.gnav_mark-link:focus-visible {
  opacity: 0.7;
}
.gnav_mark-icon {
  width: auto;
  height: 26px;
  margin: 0;
}

/*---------------  白い角丸バー  ---------------*/
.gnav_bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: calc(100% - 80px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 14px 10px 36px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/*---------------  ロゴ  ---------------*/
.gnav_brand {
  margin: 0;
  flex-shrink: 0;
}
.gnav_brand a {
  display: block;
  text-decoration: none;
  line-height: 1.25;
}
.gnav_brand a:hover {
  opacity: 0.7;
  transition: 0.3s;
}
.gnav_brand-ja {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--ns-green);
  letter-spacing: 0.02em;
}
.gnav_brand-en {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ns-green);
  letter-spacing: 0.04em;
}

/*---------------  メニュー  ---------------*/
.gnav_nav {
  display: flex;
  align-items: center;
}
.gnav_list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnav_item {
  position: relative;
  margin: 0;
  padding: 0;
}
.gnav_link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #3c423e;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.25s, background-color 0.25s;
}
.gnav_link:hover,
.gnav_link:focus-visible {
  color: var(--ns-green);
  text-decoration: none;
}
.gnav_item.is-current > .gnav_link {
  color: var(--ns-green);
}

/* ▼ */
.gnav_caret {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--ns-green);
  transition: transform 0.25s;
}
.gnav_item__parent.is-open > .gnav_link .gnav_caret {
  transform: rotate(180deg);
}

/*---------------  CTA ボタン  ---------------*/
.gnav_cta {
  display: inline-block;
  padding: 13px 28px;
  background: var(--ns-green);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: 0.25s;
}
.gnav_cta:hover,
.gnav_cta:focus-visible {
  background: var(--ns-green-dark);
  color: #fff;
  text-decoration: none;
}

/*---------------  ドロップダウン  ---------------*/
.gnav_sub {
  position: absolute;
  /* ナビ項目の下端からの距離。バーの下端から約 10px 離れる */
  top: calc(100% + 21px);
  left: 50%;
  z-index: 10;
  min-width: 250px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  border-radius: 18px;
  /* 影はヘッダーバー（.gnav_bar）と同じ指定に揃える */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
/* バーとパネルのすき間を埋める見えない当たり判定。
   これが無いと、マウスがすき間を通る瞬間にホバーが切れてメニューが閉じる。
   パネル自体が非表示のときは当たり判定も消えるので、他の操作の邪魔はしない */
.gnav_sub::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  height: 21px;
}
.gnav_item__parent:hover > .gnav_sub,
.gnav_item__parent:focus-within > .gnav_sub,
.gnav_item__parent.is-open > .gnav_sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.gnav_sub li {
  margin: 0;
  padding: 0;
}
.gnav_sub a {
  display: block;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #3c423e;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
}
/* ホバー時は背景を付けず、文字色だけ緑に変える */
.gnav_sub a:hover,
.gnav_sub a:focus-visible {
  color: var(--ns-green);
  text-decoration: none;
}

/* ヘッダー内では使わない補助リンク（SP のドロワーでのみ表示）*/
.gnav_sublinks {
  display: none;
}

/*---------------  ハンバーガー  ---------------*/
.gnav_toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.gnav_toggle span {
  display: block;
  position: absolute;
  left: 11px;
  width: 24px;
  height: 2px;
  background: var(--ns-green);
  border-radius: 2px;
  transition: 0.3s;
}
.gnav_toggle span:nth-child(1) {
  top: 15px;
}
.gnav_toggle span:nth-child(2) {
  top: 22px;
}
.gnav_toggle span:nth-child(3) {
  top: 29px;
}
.gnav_toggle[aria-expanded="true"] span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}
.gnav_toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.gnav_toggle[aria-expanded="true"] span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

.gnav_overlay {
  display: none;
}

/*==========================================================
  タブレット（メニューが入り切らない幅）
===========================================================*/
@media (max-width: 1199px) {
  /* 20_style.css が旧モバイルパネル（.rd-mobilepanel）のために
     body へ確保していた 50px の余白を打ち消す。
     新ヘッダーではそのパネルを使わないため、ただの空白になっていた */
  body {
    padding-top: 0;
  }
  .gnav_bar {
    padding-left: 24px;
  }
  .gnav_link {
    padding: 12px 10px;
    font-size: 15px;
  }
  .gnav_cta {
    padding: 12px 20px;
    font-size: 15px;
  }
  .gnav_brand-ja {
    font-size: 20px;
  }
  .gnav_brand-en {
    font-size: 14px;
  }
}

/*==========================================================
  スマートフォン・タブレット縦（ドロワー）
===========================================================*/
@media (max-width: 979px) {
  /* この幅ではヘッダーが低くなるので、main の上余白も合わせる */
  :root {
    --gnav-h: 121px;
  }
  .gnav {
    padding-bottom: 10px;
  }
  .gnav_marks {
    gap: 10px;
    width: calc(100% - 24px);
    padding: 16px 14px 8px 0;
  }
  .gnav_mark-sme {
    height: 22px;
  }
  .gnav_mark-isms {
    height: 25px;
  }
  .gnav_mark-icon {
    height: 21px;
  }
  .gnav_bar {
    width: calc(100% - 24px);
    padding: 8px 8px 8px 20px;
  }
  .gnav_toggle {
    display: block;
    flex-shrink: 0;
  }
  .gnav_brand-ja {
    font-size: 18px;
  }
  .gnav_brand-en {
    font-size: 13px;
  }

  .gnav_nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(330px, 86vw);
    height: 100%;
    padding: 72px 20px 40px;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s, visibility 0.3s;
  }
  .gnav_nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  /* ドロワーを開いている間は、閉じるボタンをドロワー右上に固定する */
  .gnav_toggle {
    z-index: 1200;
  }
  .gnav_toggle[aria-expanded="true"] {
    position: fixed;
    top: 12px;
    right: 14px;
  }

  .gnav_list {
    display: block;
  }
  .gnav_item {
    border-bottom: 1px solid var(--ns-green-light);
  }
  .gnav_link {
    justify-content: space-between;
    width: 100%;
    padding: 16px 6px;
    border-radius: 0;
    font-size: 16px;
  }

  /* SP ではパネルがアコーディオンなので、すき間の当たり判定は不要 */
  .gnav_sub::before {
    display: none;
  }
  .gnav_sub {
    position: static;
    min-width: 0;
    padding: 0 0 10px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .gnav_item__parent.is-open > .gnav_sub {
    display: block;
    transform: none;
  }
  /* SP ではホバー／フォーカスで勝手に開かない */
  .gnav_item__parent:hover > .gnav_sub,
  .gnav_item__parent:focus-within > .gnav_sub {
    display: none;
  }
  .gnav_item__parent.is-open:hover > .gnav_sub,
  .gnav_item__parent.is-open:focus-within > .gnav_sub {
    display: block;
  }
  .gnav_sub a {
    padding: 12px 10px;
    white-space: normal;
  }

  .gnav_item__cta {
    border-bottom: 0;
    margin-top: 18px;
    text-align: center;
  }
  .gnav_cta {
    display: block;
    padding: 15px 10px;
  }

  .gnav_sublinks {
    display: block;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
  }
  .gnav_sublinks li {
    margin: 0;
  }
  .gnav_sublinks a {
    display: block;
    padding: 9px 6px;
    font-size: 13px;
    color: #6b7670;
    text-decoration: none;
  }

  /* ドロワー（.gnav の中）より下、ページ側の装飾画像（1000）より上に置く。
     .gnav は z-index:1300 なので、その手前の 1250 にする */
  .gnav_overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .gnav_overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 479px) {
  .gnav_bar {
    padding-left: 14px;
  }
  .gnav_brand-ja {
    font-size: 15px;
  }
  .gnav_brand-en {
    font-size: 12px;
  }
}