@charset "utf-8";
/* CSS Document */
/*------------------------------------*\
    $MENU
\*------------------------------------*/
body.no-scroll {
 position: fixed;
 top: 0;
 left: 0;
 right: 0; /* ← 追加！ */
 width: 100%;
 overflow: hidden;
 height: 100%;
 overscroll-behavior: none;
}


/* ヘッダー高さ（実寸に合わせて）*/
:root { --sp-header-h: 85.17px; }/* ★都度変更する */

/* SPだけ適用 */
@media (max-width:1299px){
  /* ハンバーガーは前面でタップ優先（z-indexが効くようにposition付与） */
  .hamburger{ position: relative; z-index: 5000; }

  /* ナビはヘッダーの下から開始（← topをずらす） */
  .header-nav{
    position: fixed;
    top: var(--sp-header-h);
    height: calc(var(--vh, 100vh) - var(--sp-header-h));
    z-index: 200; /* headerより下に */
  }
}
  
.sp_header {
 display: flex;
 justify-content: space-between;
 align-items: center;
	box-shadow: 0px 6px 20px rgba(0, 0, 0, .05);
}
.header-nav {
 z-index: 40;
 position: fixed;
	top: 94px;
 right: 0;
 left: 0;
 width: 100%;
 height: var(--vh, 100vh);
 opacity: 0;
 visibility: hidden;
 transform: translateX(20px); /* ← 初期状態で右に20pxずらす */
 background-color: #d5ecfc;/*#366aa1;*/
 transition: transform .3s ease-in-out, opacity .3s ease-in-out;
 overflow-y: auto;
}
@media (max-width:767px){
	.header-nav {
		top: 80px;
	}
}
@media (max-width:380px){
	.header-nav {
		top: 78px;
	}
}


.header-nav__containar {
 padding: 5rem 2rem 20rem;/* ← ★都度変更する */
 flex: 1;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch; /* iOS対応の慣性スクロール */
}
.header-nav__containar__inner {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 100%;
 gap: 4rem;
}
/* 表示状態（フェードイン＋左へ移動） */
.header-nav.active {
 opacity: 1;
 visibility: visible;
 transform: translateX(0);
}
/* 戻るとき（フェードアウト＋右へ移動） */
.header-nav.closing {
 opacity: 0;
 transform: translateX(20px);
 visibility: visible; /* アニメーション中は非表示にしない */
}
@media screen and (min-width: 1300px) {
 .header-nav {
  position: static;
  transform: initial;
  background-color: inherit;
  height: inherit;
  display: flex;
  justify-content: end;
  width: 50%;
 }
}
@media screen and (min-width: 1300px) {
 .nav__items {
  width: 100%;
  display: flex;
  align-items: center;
  height: initial;
  justify-content: space-between;
 }
}
.nav-items {}
@media screen and (min-width: 1300px) {
 .nav-items {
  padding-top: inherit;
  padding-bottom: inherit;
  position: inherit;
  top: 0;
  left: 0;
  transform: translate(0, 0);
 }
}
.nav-items__item {
 margin-bottom: 1rem;
}
.nav-items__item:last-child {
 margin-bottom: 0;
}
.nav-items__item a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-radius: 1rem;
 background: #fff;
 color: #0d4394;/*#366aa1;*/
 font-weight: bold;
 font-size: 2rem;
 padding: .5rem 2rem;
 height: 6rem;
 box-shadow: 6px 6px 10px rgba(0, 0, 0, .1);
}
@media screen and (max-width: 767px) {
.nav-items__item a {
 font-size: 1.5rem;
}
}
.nav-items__item:last-child a {
 margin-bottom: 0;
}
@media screen and (min-width: 1300px) {
 .nav-items__item a {
  margin-bottom: 0;
 }
}
.cicle-arrow__inner {
 width: 3rem;
 height: 3rem;
 position: relative;
 overflow: hidden;
 border-radius: 50%;
 border: 1px solid #0d4394;
 display: grid;
 place-items: center;
}
.cicle-arrow__inner::before {
 content: "";
 display: inline-block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 border-radius: 50%;
 transition: all .75s;
 background: #0d4394;
 transform: scale(0);
}
.fa-arrow-right {
 color: #0d4394;
 font-size: 1.1rem;
}
.nav-sub__items__item {
 margin-bottom: 2rem;
}
.nav-sub__items__item:last-child {
 margin-bottom: 0;
}
.nav-sub__items__item a {
 color: #0d4394;/*#fff;*/
 font-size: 1.3rem;
 line-height: 1.8;
 font-weight: bold;
}
/* ハンバーガーメニュー */
.header__hamburger {
 width: 48px;
 height: 100%;
}
.hamburger {
 background-color: transparent;
 border-color: transparent;
 z-index: 9999;
	margin: 0 5px;
}
@media screen and (min-width: 1300px) {
 .hamburger {
  display: none;
 }
}
.hamburger span {
 width: 100%;
 height: 2px;
 background-color: #333;
 position: relative;
 transition: ease .4s;
 display: block;
}
.hamburger span:nth-child(1) {
 top: 0;
}
.hamburger span:nth-child(2) {
 margin: 8px 0;
}
.hamburger span:nth-child(3) {
 top: 0;
}
/* ハンバーガーメニュークリック後のスタイル */
.header-nav.active {
 transform: translateX(0);
}
.hamburger.active span:nth-child(1) {
 top: 9px;
 transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
 opacity: 0;
}
.hamburger.active span:nth-child(3) {
 top: -11px;
 transform: rotate(-45deg);
}
.nav-button:checked ~ .slide-menu-izq {
 right: 0px;
 -webkit-box-shadow: 3px 0px 4px 0px rgba(50, 50, 50, 0.73);
 -moz-box-shadow: 3px 0px 4px 0px rgba(50, 50, 50, 0.73);
 box-shadow: 3px 0px 4px 0px rgba(50, 50, 50, 0.73);
}
.nav-button:checked ~ .nav-button-label {
 right: 29rem;
}
.drawer-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.4); /* ← ここで薄暗さ調整 */
 z-index: 98; /* メニューより下、コンテンツより上に */
}
.nav-button:checked ~ .drawer-overlay {
 display: block;
}
input[type="checkbox"].nav-button {
 display: none;
}