/* _layout.css - モバイルファーストに対応 */

/*main基本レイアウト*/
main {
    width: 100%;

    > section {
        width: 100%;
        padding: clamp(6.4rem, 8.33vw, 9rem) 2rem clamp(3.2rem, 4.1vw, 4.5rem);

        > * {
            width: 100%;
            max-width: 1100px;
            margin: 3.2rem auto;
        }
    }
}

/* ヘッダー、フッター、ナビゲーションの基本スタイル (モバイル向けがデフォルト) */
/* ヘッダーの基本スタイル */
.header {
  background-color: var(--background-color); /* CSS変数を使用 */
  color: var(--text-color); /* CSS変数を使用 */
  padding: 1rem 0; 
  text-align: center;
  position: relative; /* ハンバーガーボタンの absolute 配置の基準 */
  z-index: 100; /* コンテンツの上に表示 */
}
.header > div {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ヘッダー内部の配置（モバイル向けは縦並びを想定） */
.header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
    .header-subTxt {
        display: none;
    }
}
@media (min-width:768px) {
  .header__content {
    display: grid;
    grid-template-columns: clamp(120px, 11.7vw, 150px) 1fr clamp(120px, 11.7vw, 150px);
    justify-items: start;
    grid-column-gap: 20px;
   
    .header-subTxt {
        display: block;
        font-size: 1.4rem;
    }
  }
}

/* ヘッダーのタイトル (My Framework) */
.header h1 {
  margin-bottom: 0; /* タイトルの下のマージンをリセット */
  /* 必要に応じて、モバイルでタイトルのフォントサイズを調整 */
}

/* ハンバーガーメニューボタン - モバイルのみ表示 */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.8rem; /* 8px */
  z-index: 1000; /* メニューの上に表示 */
  position: absolute; /* ヘッダー内の位置調整 */
  top: 0.6rem; /* 10px */
  right: 1.6rem; /* 16px */
  width: 4.8rem; /* 48px */
  height: 4.8rem; /* 48px */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: transparent;
}

.menu-toggle:hover {  
  background-color: transparent;
}

.menu-toggle .icon-bar {
  display: block;
  width: 3.2rem; /* 32px */
  height: 0.3rem; /* 3px */
  background-color: var(--text-color); /* CSS変数を使用 */
  border-radius: 0.3rem; /* 3px */
  transition: all 0.3s ease-in-out;
}

/* ハンバーガーアイコンのアニメーション */
.menu-toggle.is-active .icon-bar:nth-child(3) {
  opacity: 0; /* 真ん中の線を消す */
}
.menu-toggle.is-active .icon-bar:nth-child(2) {
  transform: translateY(1.15rem) rotate(45deg); /* 上の線を回転・移動 */
}
.menu-toggle.is-active .icon-bar:nth-child(4) {
  transform: translateY(-1rem) rotate(-45deg); /* 下の線を回転・移動 */
}


/* スクリーンリーダー専用コンテンツ (変更なし) */
.sr-only {
  position: absolute;
  width: 0.1rem;
  height: 0.1rem;
  padding: 0;
  margin: -0.1rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ナビゲーション - モバイルでは全画面レイヤー */
.header__nav {
  position: fixed; /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100vw; /* 画面幅いっぱい */
  height: 100vh; /* 画面高さいっぱい */
  background-color: rgba(255, 255, 255, 0.9); /* 半透明の黒でコンテンツを覆う */
  color: var(--text-color); /* CSS変数を使用 */
  display: flex;
  justify-content: center; /* メニューを中央に配置 */
  align-items: center;
  z-index: 999; /* ハンバーガーボタンより下、コンテンツより上 */

  transform: translateX(100%); /* 初期状態では画面外に隠す */
  transition: transform 0.4s ease-out; /* 出てくるアニメーション */
}

.header__nav.is-open {
  transform: translateX(0); /* is-open クラスが付いたら表示 */
}

.header__nav ul {
  padding: 0;
  list-style: none;
  text-align: center; /* リンクテキストを中央寄せ */
  width: 100%; /* メニューの幅 */
}

.header__nav li {
  display: block; /* 縦並び */
  margin: 1.6rem 0; /* 16px 上下マージン */
}

.header__nav a {
  padding: 1.2rem 1.6rem; /* 12px 16px */
  display: block;
  font-size: 2.4rem; /* 24px - 大きめのフォントサイズ */
  transition: opacity 0.4s ease;
}
.header__nav a:hover {
  background-color: #00A1B9 !important; /* CSS変数を使用 */
  opacity: 0.8;
  text-decoration: none;
}

/* メニューが開いているときにbodyのスクロールを抑制 */
body.menu-active {
  overflow: hidden;
}


/* フッター (変更なし) */

.footer {
  background-color: #2c3840;
  padding: 2.4rem 0; /* 24px */
  text-align: center;
  color: var(--white-text-color); /* CSS変数を使用 */
}

.footMenu {
    display: flex;
    font-size: 1.4rem;
    flex-direction: column;
    row-gap: 1rem;
    margin: 0 0 2rem 0;

    @media (min-width: 768px) {
      flex-direction: row;
      justify-content: center;
      gap: 3rem;
    }
}

/* メインビジュアル */
#mv {
  height: 70lvh;
  background-color: #ccc;

  @media (min-width: 1024px) {
    height: 450px;
  }
}

/* ユーティリティクラス (変更なし) */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 1.6rem !important; } /* 16px */
.mb-1 { margin-bottom: 1.6rem !important; } /* 16px */
.ml-1 { margin-left: 1.6rem !important; } /* 16px */
.mr-1 { margin-right: 1.6rem !important; } /* 16px */
.my-1 { margin-top: 1.6rem !important; margin-bottom: 1.6rem !important; } /* 上下16px */
.mx-1 { margin-left: 1.6rem !important; margin-right: 1.6rem !important; } /* 左右16px */

.p-0 { padding: 0 !important; }
.pt-1 { padding-top: 1.6rem !important; } /* 16px */
.pb-1 { padding-bottom: 1.6rem !important; } /* 16px */
.pl-1 { padding-left: 1.6rem !important; } /* 16px */
.pr-1 { padding-right: 1.6rem !important; } /* 16px */
.py-1 { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; } /* 上下16px */
.px-1 { padding-left: 1.6rem !important; padding-right: 1.6rem !important; } /* 左右16px */


/* タブレット向けスタイル (Min-width: 768px または 76.8rem) */
@media (min-width: 768px) {
  .header__content {
    flex-direction: row; /* デスクトップでは横並び */
    justify-content: space-between; /* 両端揃え */
    align-items: center; /* 中央寄せ */
  }

  .menu-toggle {
    display: none; /* デスクトップではハンバーガーボタンを非表示 */
  }

  .header__nav {
    position: static; /* デスクトップでは通常の配置 */
    width: auto;
    height: auto;
    background-color: transparent; /* 背景色なし */
    color: white; /* ヘッダーの文字色を継承 */
    display: block; /* デスクトップではナビゲーションを常に表示 */
    transform: translateX(0); /* 常に表示 */
    margin-top: 0;
  }

  .header__nav ul {
    display: flex; /* 横並び */
    justify-content: center;
    gap: 1.6rem; /* 16px */
  }

  .header__nav li {
    margin: 0; /* マージンをリセット */
  }

  .header__nav a {
    height: 3rem;
    min-width: 140px;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    text-align: center;
    line-height: 3rem;
  }

  /* メニューが開いているbodyスタイルをデスクトップでは適用しない */
  body.menu-active {
    overflow: visible;
  }
}

/*ページトップへ戻る*/

.pageTop {
    padding: min(0.9765625vw, 1rem) 0;
    border-bottom: solid 1px var(--border-color);

    a {
      display: block;
      height: 4.6rem;
      padding: 1rem;
    }

    a span {
      position: relative;
      display: block;
      width: 4.6rem;
      height: 2.8rem;
      margin: 0 auto;
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
  }

    a span::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 3.2rem;
      height: 3.2rem;
      margin: -.6rem 0 0 -1.6rem;
      border: .4rem solid #2C3840;
      border-left-width: 0;
      border-top-width: 0;
      transform: rotate(-135deg);
      transition: .3s ease-in-out;
    }

}

/* デスクトップ向けスタイル (必要に応じてさらに大きなブレークポイントを設定) */
/* @media (min-width: 99.2rem) { } /* 992px */
/* @media (min-width: 120rem) { } /* 1200px */