/* style.css - 整理版 */
@charset "utf-8";

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ベース */
body {
  background-color: #fff;
  color: #333333;
  font-family: sans-serif;
}

/* ヘッダー */
header {
  background-color: #708090;
  width: 100%;
  height: 50px;
}

/* グローバルナビゲーション */
nav {
  float: right;
  margin: 5px auto 0;
  padding: 10px 100px;
}

.global-nav {
  list-style: none;
}
.global-nav li {
  float: left;
  margin: 0 10px;
  font-size: 18px;
  font-family: "Hiragino Kaku Gothic ProN W6", Meiryo, sans-serif;
}
.global-nav li a {
  color: #ffffff;
  text-decoration: none;
}
.global-nav li a:hover {
  border-bottom: 2px solid #ff0000;
  padding-bottom: 3px;
}

/* パンくずリスト */
.breadcrumb {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.breadcrumb a,
.breadcrumb span {
  margin: 0 0.25rem;
}
.breadcrumb a {
  color: #005249;
  text-decoration: none;
}

/* 第2ヘッダー（バナー） */
.header2 {
  background-color: #ffe579;
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner {
  width: 800px;
  height: 60px;
  background-color: #ffcc0c;
  border: 2px solid #003559;
  border-radius: 6px;
  padding: 5px 40px;
  text-align: center;
}
.banner h1 {
  color: #FFFFFF;
  font-size: 2.0rem;
  font-weight: bold; /* 通常のBoldを維持 */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  /* 文字を右に10px移動 */
  display: inline-block;      /* translateXを効かせるため */
  transform: translateX(10px);

  /* 方法1: 文字にアウトラインを追加（Chrome, Safari対応） */
  -webkit-text-stroke: 1px #FFFFFF;
}

/* レイアウト */
.container {
  display: flex;
  width: 1540px;             /* 幅を 70% に設定 */
  min-height: calc(100vh - 100px);
  margin: 0 auto;         /* 左右のマージンを自動にして中央寄せ */
  gap: 0.5rem;            /* サイドバーとメインの間隔 */
}

/* サイドバーのスタイル */
nav.sidebar {
  width: 260px;              /* お好みの幅 */
  background: #f7f7f7;       
  padding: 0;                /* 上下の余白を詰める */
  margin: 0;                 
  box-sizing: border-box;    
  overflow: hidden;          /* はみ出しを隠す */
}

/* STAFF LINK ↓ */
nav.sidebar .staff-link {
  padding: 0;               /* 上下余白をなくす */
  text-align: center;
}
nav.sidebar .staff-link img {
  max-width: 90%;          /* 幅を 80% に縮小 */
  height: auto;
  display: inline-block;
}

/* ul, li の余白をリセット */
nav.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.sidebar li {
  margin: 0;
  padding: 0;
}

/* リンク内の画像を枠いっぱいに収める */
nav.sidebar li a img {
  display: block;
  width: 100%;               /* 親要素いっぱいに */
  height: auto;              
}


/* メインコンテンツ */
main.content {
  flex: 1;
  padding: 1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: left;
  padding-left: 150px;
}
main.content img + img {
  margin-top: 1.5rem;
}

/* メインコンテンツ内の画像サイズを統一して小さく表示 */
.content img {
  max-width: 700px;  /* 幅を300pxまで縮小 */
  width: 100%;       /* ビューポートに応じて縮小 */
  height: auto;
  margin-bottom: 1rem;
  display: block;
}

/* ページトップへのリンク */
.back-to-top {
  display: inline-block;
  width: 200px;
  margin: 1rem 0;
  text-decoration: none;
  font-size: 1rem;
  color: #005249;
  border: 1px solid #005249;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-align: center;
}
.back-to-top:hover {
  background-color: #e0f2f1;
}

/* フッター */
footer {
  background: #005249;
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
}