/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}


/* id="navi" 内の ul リストへの区切り線（太めの波線、緑色） */
#navi ul {
    /* 必要に応じて、この ul 自体の Flexbox 設定を追加し、li を横並びにします */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* list-style: none; /* デフォルトのリストマークを削除 */
}

#navi ul li {
    position: relative; /* 擬似要素の基準とするため */
    display: inline-block; /* 横並びにする場合 */
    padding: 0 25px; /* テキストと線の間の余白を調整 */
    vertical-align: middle; /* 垂直方向の配置調整 */
}

#navi ul li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px; /* 波線の太さ */
    height: 90%; /* 波線の高さ（liの高さの90%に設定、さらに長く） */
    
    /* 波線の表現と色の設定 */
    background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #4CAF50 50%, #4CAF50 100%); /* 緑色 */
    background-size: 100% 12px; /* 波のピッチ（間隔）を調整 */
    background-repeat: repeat-y; /* 縦方向に繰り返す */
}

/* レスポンシブデザインの調整 (必要であれば追加) */
@media screen and (max-width: 768px) {
    #navi ul li {
        display: block; /* モバイルでは縦並び */
        padding: 10px 0; /* 縦並び時の余白 */
        text-align: center;
    }

    #navi ul li::after {
        display: none; /* モバイルでは波線を非表示 */
    }
}


/* レスポンシブデザインの調整 (モバイルではプルダウンを無効化/変更) */
@media screen and (max-width: 768px) {
    /* ... 既存のモバイル用スタイル ... */

    /* グローバルメニュー本体の調整 (モバイルでハンバーガーメニューに収納) */
    .main-nav {
        /* ... 既存のスタイル ... */
    }

    .main-nav.active {
        display: flex;
        flex-direction: column; /* ハンバーガーメニュー展開時は縦並び */
        /* その他のスタイル */
    }

    /* モバイル時のプルダウンメニューの表示 */
    .dropdown-menu {
        position: static; /* 親要素の流れに沿って配置 */
        transform: none; /* アニメーションのためのtransformをリセット */
        opacity: 1; /* 常に不透明 */
        visibility: visible; /* 常に表示 */
        box-shadow: none; /* 影をなくす */
        border-radius: 0; /* 角丸をなくす */
        padding: 0; /* パディングをなくす */
        background-color: transparent; /* 背景色を透明に */
        min-width: unset;
        width: 100%; /* 親 li の幅に合わせる */
        margin-top: 5px; /* 親 li との間に少し余白 */
    }

    .dropdown-menu li a {
        padding: 8px 15px;
        text-align: center;
        flex-direction: row; /* アイコンとテキストは横並びを維持 */
        justify-content: center;
    }

    /* ハンバーガーメニューが展開された際（.main-nav.active）に、
       プルダウンメニューも表示されるようにする
       （上記 .dropdown-menu のスタイルで既に表示状態になっているため、
       ここでは display: block; などの明示的な設定は不要な場合が多いが、
       もし .main-nav が flex 以外の display を持つ場合などに調整が必要になることがある） */
    /* .main-nav.active .dropdown-menu {
        display: block;
    } */

    /* 親メニュー項目にホバー時のプルダウン表示を無効化 (重要) */
    .main-nav li:hover > .dropdown-menu {
        opacity: 1; /* ホバー効果を無効化 */
        visibility: visible;
        transform: none;
    }

    /* 親メニュー項目にマウスオンでプルダウンが出るのではなく、
       クリックでサブメニューを開閉するJavaScriptが必要になる場合が多い。
       現在のCSSホバーのみの実装では、モバイルで常時表示になる。
       必要であれば、後述のJavaScriptでのモバイル用トグル機能も検討 */
}


/* プルダウンメニュー（.dropdown-sub-menu）のスタイル */
.dropdown-sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    min-width: 180px; /* プルダウンメニュー全体の幅 */
    padding: 10px 0;
    z-index: 990;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;

    /* ここが重要：子要素を縦並びにするための設定 */
    display: block; /* ul 自体をブロック要素として表示 */
    /* または flexbox を使う場合: */
    /* display: flex; */
    /* flex-direction: column; */
}

.dropdown-sub-menu li {
    /* 以前設定済みですが、念のため確認 */
    display: block; /* 各メニュー項目をブロック要素として縦並びに */
    padding: 0; /* パディングをリセット（リンクにパディングを設定するため） */
    text-align: left; /* テキストは左寄せ */
    white-space: nowrap; /* テキストが改行されないように */
}

.dropdown-sub-menu li a {
    display: block; /* リンク全体がクリック可能になるように */
    padding: 10px 20px; /* 各メニュー項目のパディング */
    color: #333;
    font-weight: normal;
    font-size: 1em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 親メニュー項目にマウスが重なった時にプルダウンを表示 (PC向け) */
#navi ul li:hover > .dropdown-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* プルダウンメニュー（.dropdown-sub-menu）のスタイル */
.dropdown-sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* 背景色を透明に近い、または非常に薄い白に変更 */
    background-color: rgba(0, 0, 0, 0.0); /* 非常に薄い半透明の白 */
    /* または完全に透明にする場合: background-color: transparent; */

    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 影は残す */
    border-radius: 8px;
    min-width: 180px;
    padding: 10px 0;
    z-index: 990;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    display: block;
}

/* プルダウンメニューの各項目（li）に背景色を交互に設定 */
/* 文字を白くするために、li の背景色を半透明の濃い色にするか、透明度を高める */
.dropdown-sub-menu li:nth-child(odd) { /* 奇数番目の項目 */
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒（暗い色）*/
    /* または: background-color: rgba(76, 175, 80, 0.3); /* 緑の半透明 */
}

.dropdown-sub-menu li:nth-child(even) { /* 偶数番目の項目 */
    background-color: rgba(0, 0, 0, 1); /* より濃い半透明の黒 */
    /* または: background-color: rgba(76, 175, 80, 0.5); /* より濃い緑の半透明 */
}

.dropdown-sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: #FFFFFF; /* ここを白に変更 */
    font-weight: normal;
    font-size: 1em;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* プルダウンメニュー内の項目（リンク）のホバー時の背景色と文字色 */
.dropdown-sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* ホバー時は明るい半透明に */
    color: #FFFFFF; /* ホバー時の文字色も白を維持 */
}

/* レスポンシブデザインの調整 */
@media screen and (max-width: 768px) {
    .dropdown-sub-menu {
        background-color: transparent; /* モバイルでは完全に透明に */
        box-shadow: none; /* 影も消す */
        /* ... その他のモバイル用スタイル ... */
    }

    .dropdown-sub-menu li:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0.3); /* モバイルでも奇数行の色 */
    }
    
    .dropdown-sub-menu li:nth-child(even) {
        background-color: rgba


/* 全要素のボックスサイジングをborder-boxに設定 */
* {
    box-sizing: border-box;
}

/* body要素のデフォルトマージンとパディングをリセット */
body {
    margin: 0;
    padding: 0;
    /* 固定ヘッダーの高さ分、bodyのコンテンツを下にずらすためのpadding-topを追加 */
    padding-top: 90px; /* ★ ヘッダーのmin-height+padding に合わせて調整 (例: 80px + 10px = 90px) */
}


		

/* 全要素のボックスサイジングをborder-boxに設定 */
* {
    box-sizing: border-box;
}

/* body要素のデフォルトマージンとパディングをリセット */
body {
    margin: 0;
    padding: 0;
    padding-top: 90px; /* Adjust this based on your final header-inner height + padding */
}

/* ヘッダーの最上位コンテナ (全幅、固定表示、背景) */
.header-3 {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #ffecc7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ヘッダーの内部コンテンツコンテナ (中央寄せ、Flexboxのメイン) */
.header-inner {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    /* justify-content: space-between; /* ★★ この行を一時的に削除またはコメントアウト ★★ */
    /* justify-contentを調整して、画像エリアも考慮した配置にする */
    justify-content: flex-start; /* 初期配置は左寄せに */
    
    max-width: 1024px;
    height: 80px;
    padding: 0 40px; /* 左右のパディング */
    margin: 0 auto;
    font-size: 1.2em;
}

/* ヘッダー左側のセクション（ロゴと園名）*/
.header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* margin-right: auto; /* ★★ これで左寄せにしながら、後続の要素との間に最大限のスペースを確保 ★★ */ */
    /* あるいは flex-grow: 1; を使って左側を伸ばす方法もあるが、今回はロゴを左端に固定する */
}

/* ロゴ画像のスタイル */
.sitetitle img {
    margin-right: 5px;
    height: 60px;
    width: auto;
}

/* 園名テキストのスタイル */
.kindergarten-name {
    margin: 0;
    font-size: 24px;
    white-space: nowrap;
    line-height: normal;
}

/* 吹き出しエリア */
.header-bubble-area {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1; /* 利用可能な中央のスペースを占有 */
    padding: 0 20px;
}

/* 住所と電話番号の新しいエリア */
.header-address-area {
    text-align: right;
    flex-shrink: 0;
    margin-left: auto; /* ★★ これで住所エリアを右端に寄せる ★★ */
    /* background-color: lightcoral; /* デバッグ用 */ */
    display: flex; /* これにより、contact-infoがFlexアイテムとなる */
    flex-direction: column; /* contact-info内のpタグを縦に並べるため */
    align-items: flex-end; /* contact-infoブロック全体をheader-address-areaの右端に寄せる */
    min-width: 150px; /* テキストが折り返さないように最低限の幅を確保 */
}

/* 連絡先情報のスタイル */
.contact-info {
    font-size: 14px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

/* 吹き出しのスタイル (変更なし) */
.speech-bubble {
    position: relative;
    background-color: #ffe0b2;
    border-radius: 10px;
    padding: 8px 12px;
    max-width: 200px;
    text-align: center;
    font-size: 14px;
    color: #333;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 15px;
    width: 0;
    height: 0;
    border-top: 10px solid #ffe0b2;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}


/* ★★ 新しく追加する楕円形イメージのスタイル ★★ */
.header-oval-image-area {
    /* ヘッダーの右端に寄せるための調整 */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    flex-shrink: 0; /* 縮まないように */
    margin-left: 20px; /* 住所エリアとの間隔 */
    /* background-color: lightsalmon; /* デバッグ用 */ */
}

.oval-image {
    width: 80px; /* ★★ 楕円形にする画像の幅 ★★ */
    height: 60px; /* ★★ 楕円形にする画像の高さ ★★ */
    border-radius: 50% / 50%; /* ★★ これで楕円形に切り抜く ★★ */
    object-fit: cover; /* ★★ 画像が歪まないように切り抜く ★★ */
    display: block; /* 余計な下部の隙間を防ぐ */
}

/* レスポンシブ対応（スマートフォンなど）*/
@media (max-width: 768px) {
    body {
        padding-top: 120px;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 10px;
    }

    .header-left,
    .header-bubble-area,
    .header-address-area,
    .header-oval-image-area { /* ★★ 楕円形エリアもスマホ対応に追加 ★★ */
        width: 100%;
        margin-bottom: 10px;
        justify-content: flex-start;
        text-align: left;
        align-items: flex-start;
    }

    .oval-image {
        width: 100px; /* スマホでサイズ調整 */
        height: 75px;
    }

    .speech-bubble {
        max-width: 100%;
        text-align: left;
    }

    .speech-bubble::after {
        right: auto;
        left: 15px;
    }

    .contact-info {
        text-align: left;
    }
}
		
		
		
		
		/* .sitetitle の中に Flexbox を適用して、子要素を横並びにする */
.sitetitle {
    display: flex; /* 子要素（ロゴと画像リンクのグループ）を横並びに */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 20px; /* ロゴと画像リンクのグループの間のスペース */
    /* 必要に応じて、justify-content も調整 (例: space-between, flex-start, centerなど) */
    /* justify-content: flex-start; /* 左寄せにする場合 */
}

/* ヘッダー内の画像リンクのグループ */
.header-image-links {
    display: flex; /* このグループ内の画像リンクを横並びに */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 10px; /* 画像リンク間のスペース */
    flex-wrap: wrap; /* 画面幅が狭い時に折り返す（必要であれば） */
}

/* 各画像リンク内の画像 */
.header-image-links .header-link-img {
    height: 40px; /* 画像の高さ。適宜調整してください */
    width: auto; /* 元のアスペクト比を維持 */
    display: block; /* リンク内に余計な空白ができないように */
}

/* レスポンシブデザインの調整 */
@media screen and (max-width: 768px) {
    .sitetitle {
        flex-direction: column; /* モバイルでは縦並びにする */
        align-items: center; /* 中央揃え */
        gap: 10px;
    }

    .header-image-links {
        justify-content: center; /* モバイルで画像リンクを中央揃え */
        gap: 8px; /* モバイルでの画像リンク間のスペース */
    }

    .header-image-links .header-link-img {
        height: 30px; /* モバイルでの画像の高さ */
    }
}
		
		
/* 新着情報リストの背景色 */
.news-list {
    background-color: #f9f9f9; /* 例：非常に薄いグレー */
    padding: 20px; /* 内側の余白 */
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影をつける */
}

/* 各お知らせアイテムの背景色（必要であれば） */
.news-list .item {
    background-color: #ffffff; /* 白（リストアイテムの背景を白に保つ場合） */
    margin-bottom: 10px; /* アイテム間の余白 */
    padding: 15px; /* アイテムの内側の余白 */
    border-bottom: 1px solid #eee; /* アイテムの下線 */
}

/* 最後のアイテムの下線は不要 */
.news-list .item:last-child {
    border-bottom: none;
}