/* ===== リセット（影響遮断） ===== */

body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.7;
  color:#333;
  margin:0;
  background:#ffffff;
}

/* ===== コンテナ ===== */

.container{
  max-width:1000px;
  margin:auto;
  padding:12px;
}

/* ===== ヘッダー（画像専用） ===== */

header{
  padding:0;
  background:none;
}

header img{
  width:95%;
  height:auto;
  display:block;
  margin:0;
}

/* ===== タイトル＋ロゴ ===== */

.title-with-logo{
  text-align:center;
  font-size:1.4em;
  margin:16px 0;
  color:#2a5d84;
}

.title-with-logo img{
  height:80px;
  width:auto;
  margin-left:6px;
  vertical-align:middle;
  display:inline;
}

/* ===== ナビゲーション（白＋枠＋影） ===== */

nav{
  display:flex;
  justify-content:center;
  gap:15px;
  margin:25px 0;
  flex-wrap:wrap;
}

nav a{
  background:#ffffff;                 /* 白 */
  color:#2a5d84;
  text-decoration:none;
  padding:12px 20px;
  border-radius:10px;

  border:1px solid #ddd;              /* ← 薄いグレー枠（重要） */

  font-weight:bold;

  box-shadow:0 2px 6px rgba(0,0,0,0.08); /* ← 軽い影 */

  transition:0.2s;
}

nav a:hover{
  background:#f9f9f9;
  border-color:#bbb;

  box-shadow:0 4px 10px rgba(0,0,0,0.15); /* ← 少し強い影 */

  transform:translateY(-2px);
}
/* ===== 見出し ===== */

h2{
  color:#2a5d84;
  border-left:5px solid #2a5d84;
  padding-left:8px;
  margin-top:1.8em;
}

h3{
  color:#2a5d84;
  margin-top:1.2em;
}

/* ===== 段落 ===== */

p{
  margin-bottom:1em;
}

/* ===== お知らせ強調 ===== */

h2:first-of-type + p{
  background:#f0f8ff;
  padding:10px;
  border-radius:8px;
  border:1px solid #cce0f5;
}

/* ===== 箇条書き ===== */

ul,ol{
  padding-left:1.2em;
}

li{
  margin-bottom:0.4em;
}

/* ===== 画像 ===== */

img{
  max-width:100%;
  height:auto;
}

/* ===== テキスト＋画像レイアウト（最終版） ===== */

.text-image{
  display:flex;
  align-items:center;
  gap:20px;
  margin:20px 0;
  flex-wrap:wrap;
}

.text-image .text{
  flex:1;
  min-width:250px;
}

/* 画像サイズ（ここが調整ポイント） */
.text-image img{
  width:420px;          /* ← 少し大きめ（おすすめ） */
  max-width:100%;       /* ← 画面が小さい時の保険 */
  height:auto;
  border-radius:8px;
}

/* ===== ボックス内の余白リセット（重要） ===== */

.box > :first-child,
.note > :first-child,
.column > :first-child{
  margin-top: 0;
}

.box > :last-child,
.note > :last-child,
.column > :last-child{
  margin-bottom: 0;
}

/* ===== ボックス共通（引き締め） ===== */

.box,
.note,
.column{
  margin:10px 0;
}

/* ボックス 強調*/

.box {
  background-color: #fff3e0;
  border: 2px solid #ff9800;
  padding: 6px 10px;
  border-radius: 10px;
}

/* たまにつかう補足*/

.note {
  background-color: #f9f9f9;
  border: 2px solid #999;
  padding: 6px 10px;
  border-radius: 10px;
}

/* コラム（基本、専門的） */

.column {
  background-color: #f0f8ff;
  border: 2px solid #2196F3;
  padding: 6px 10px;
  border-radius: 10px;
}

/* ===== 表（テーブル） ===== */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

th, td {
  border: 1px solid #999;
  padding: 8px;
  vertical-align: top;
}

th {
  background-color: #e8f4ff;
  text-align: left;
}

/* ===== フッター ===== */

footer{
  text-align:center;
  font-size:0.8em;
  color:#666;
  margin:30px auto;
}

/* ===== スマホ対応 ===== */

@media (max-width:600px){

  body{
    font-size:16px;
  }

  nav{
    flex-direction:column;
    align-items:center;
  }

  nav a{
    width:80%;
    text-align:center;
  }

  .text-image{
    flex-direction:column;
  }

  .text-image img{
    width:100%;
  }
}