/* ====================================
   基本設定：アクセシビリティと読みやすさを最優先
   ==================================== */
body {
    /* フォントサイズを大きくし、コントラストを確保 */
    font-size: 18px; /* 16pt (約21px) 相当に近づけるが、pxで制御しやすく */
    color: #333333; /* 濃いグレーで読みやすく */
    line-height: 1.7; /* 行間を広げて読みやすく */
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; /* 視覚障害者向けにゴシック体（見やすい）を優先 */
    margin: 0;
    padding: 0;
    background-color: #f8f8f8; /* わずかにオフホワイトで目の疲れを軽減 */
}

/* リンクの色はコントラスト比に注意 */
a:link { color: #004080; } /* 濃い青 */
a:visited { color: #600060; } /* 濃い紫 */
a:hover { color: #cc0000; text-decoration: underline; } /* ホバーで赤く、下線を表示 */
a:active { text-decoration: none; }

/* 見出しは大きく、明確に */
h1 { font-size: 2.2em; color: #006400; border-bottom: 3px solid #e0e0e0; padding-bottom: 10px; } /* 濃い緑で強調 */
h2 { font-size: 1.8em; color: #3333FF; margin-top: 30px; }
h3 { font-size: 1.5em; }

/* 画像とテーブルのデフォルト設定 */
img { max-width: 100%; height: auto; border: 0; }
a img { border: none; }


/* ====================================
   レイアウト（レスポンシブの基礎）
   ==================================== */
#container {
    max-width: 1000px; /* 900pxから少し広げ、可変幅に対応 */
    width: 95%; /* 画面幅の95%を使用 */
    margin: 0 auto;
    background-color: #ffffff; /* 白い背景 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影で立体感を出す */
    padding: 20px;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* ナビゲーションとメインコンテンツを横並びにする部分 */
#content-wrap {
    display: flex; /* Flexboxでレイアウト */
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
    gap: 30px;
    margin-top: 20px;
}

/* ナビゲーション（左側） */
#global-nav, #global-nav-sub {
    width: 250px; /* ある程度の固定幅 */
    background-color: #f0fff0; /* 淡い緑の背景 */
    padding: 15px;
    border: 1px solid #c0c0c0;
    /* モバイルでは幅いっぱいになるように調整 */
}

/* メインコンテンツ（右側） */
#main-content {
    flex-grow: 1; /* 残りのスペースを全て使用 */
    min-width: 300px; /* 最小幅を設定 */
}

/* ====================================
   メニューとリスト
   ==================================== */
#global-nav ul, .side-menu-list {
    list-style-type: none; /* リストのマーカーを削除 */
    padding: 0;
    margin: 0;
}

#global-nav li a, .side-menu-list li a {
    display: block;
    padding: 10px 15px;
    margin-bottom: 5px;
    background-color: #e6e6fa; /* 淡い紫 */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.side-menu-list li a:hover {
    background-color: #d8bfd8;
}

/* ====================================
   トップページ固有のスタイル
   ==================================== */
#qualification-statement {
    text-align: center;
    font-size: 1.1em;
    color: #cc0000; /* 赤で強調 */
}

/* ... (既存のCSSは省略) ... */


/* ====================================
   トップページ固有のスタイル
   ==================================== */
#qualification-statement {
    text-align: center;
    font-size: 1.1em;
    color: #cc0000; /* 赤で強調 */
}

/* ★お知らせ・更新情報、および新しい「まえおかについて」セクションの共通スタイル */
.info-block {
    margin-bottom: 30px; /* 他のコンテンツとの間に余白を設ける */
}

.info-block h2 {
    /* 既存のお知らせ・更新情報と共通の見た目 */
    background-color: #add8e6; /* 淡い青の背景 */
    padding: 8px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    /* 既存のh2スタイルを上書き */
    font-size: 1.5em; 
    color: #3333FF;
    margin-top: 0;
}

.info-block .content-body {
    background-color: #f0fff0; /* 淡い緑の背景 */
    padding: 15px;
    border: 1px solid #c0c0c0;
    border-top: none;
    border-radius: 0 0 5px 5px; /* 下部に角丸を適用 */
}

/* ★新設セクション用の固有スタイル（編集しやすくするための注釈） */
/* 新しい「マッサージ・はり治療まえおかについて」のテキスト部分の調整 */
#about-us .content-body p {
    /* 必要であれば、このセクションの段落のみを調整できます */
    text-align: left; /* 左寄せに戻す */
    margin-top: 5px;
    margin-bottom: 5px;
}

.info-block h2 {
    background-color: #add8e6; /* 淡い青の背景 */
    padding: 8px;
    text-align: center;
    border-radius: 5px 5px 0 0;
}

.info-block .content-body {
    background-color: #f0fff0; /* 淡い緑の背景 */
    padding: 15px;
    border: 1px solid #c0c0c0;
    border-top: none;
}

/* ====================================
   ヘッダーと季節のデザイン
   ==================================== */
header {
    text-align: center; /* ヘッダー内のコンテンツを中央寄せ */
    padding: 20px 0;
    /* 背景画像を適用するためのスペース */
    background-repeat: repeat;
    background-position: center top;
}

#site-branding {
    /* サイトタイトルと資格表示の周りに背景色を敷き、可読性を確保 */
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* 白の半透明背景 */
    border-radius: 10px;
}

#qualification-statement {
    /* コントラストを維持 */
    color: #333333;
    font-size: 1.1em;
}

.seasonal-decoration {
    text-align: center;
    margin: 20px auto;
    /* Flexboxで中央に配置しやすくします */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 画像の下端を揃える */
    gap: 15px; /* 画像間のスペース */
    flex-wrap: wrap; /* 小さい画面で画像が折り返すように */
}

.seasonal-decoration img {
    /* 季節画像は装飾のため、最大幅を設定して大きくなりすぎないように */
    max-width: 100%; 
    height: auto;
    border: none; /* 元の border:0 を継承 */
}

/* ====================================
   季節ごとの背景画像クラス
   ==================================== */

/* 1・2月 */
.season-winter {
    background-image: url(index/2gatu/febwall02.gif);
}

/* 3・4月 */
.season-spring-early {
    background-image: url(index/4gatu/marwall06.gif);
}

/* 5月 */
.season-spring-late {
    background-image: url(index/5gatu/maywall02.gif);
}

/* 6月 */
.season-rainy {
    background-image: url(index/6gatu/haikei6.gif);
}

/* 7・8月 */
.season-summer {
    background-image: url(index/7gatu/julbg04.gif);
}

/* 9・10・11月 */
.season-autumn {
    background-image: url(index/9gatu/sepwall02.gif);
}

/* 12月 */
.season-christmas {
    background-image: url(index/12gatu/kabe02.gif);
}

/* 7・8月の複雑なレイアウトをCSS Gridで再現 */
.layout-jul-aug {
    display: grid;
    /* 画像の幅に合わせてグリッドを定義 */
    grid-template-columns: 242px 121px; /* 幅242pxと121pxのカラム */
    grid-template-rows: 82px 97px 112px; /* 高さ82px, 97px, 112pxの行 */
    width: 363px; /* 242px + 121px = 363px */
    gap: 0;
}

/* 画像をグリッド内の正しい位置に配置 */
.img-jul-1 { grid-area: 1 / 1 / 2 / 2; } /* 1行目, 1カラム目から始まり、1行目, 2カラム目で終わる */
.img-jul-2 { grid-area: 1 / 2 / 3 / 3; height: 179px; } /* 1行目, 2カラム目から始まり、3行目, 3カラム目で終わる (2行分の高さ) */
.img-jul-3 { grid-area: 2 / 1 / 3 / 2; width: 162px; height: 97px; justify-self: start; } 
.img-jul-4 { grid-area: 2 / 1 / 3 / 2; width: 80px; height: 97px; justify-self: end; margin-right: 0; } 
.img-jul-5 { grid-area: 3 / 1 / 4 / 2; }
.img-jul-6 { grid-area: 3 / 2 / 4 / 3; }

/* 2行目の画像（jul-3とjul-4）を横並びにするための調整 */
/* jul-3, jul-4は同じグリッドセル(2/1)に重ねて配置し、justify-selfで左右に寄せます */
/* 元の画像サイズ (jul0205_3: 162x97, jul0205_4: 80x97) */
/* 242px = 162px + 80px なので、justify-selfを使い、マージンを調整して再現します */
.img-jul-3 { justify-self: start; }
.img-jul-4 { justify-self: end; }

/* フッター */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #f0f8ff;
    border-top: 2px solid #ccc;
}

/* ====================================
   モバイル対応（画面幅が狭い場合）
   ==================================== */
@media (max-width: 768px) {
    /* 768px以下の場合、ナビゲーションとメインコンテンツを縦に並べる */
    #content-wrap {
        flex-direction: column;
    }

    /* ナビゲーションを幅いっぱいに */
    #global-nav, #global-nav-sub {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* トップページではロゴが大きすぎる可能性があるため調整 */
    #site-branding img {
        width: 100%;
        height: auto;
    }
}