@charset "UTF-8";

/* ======================================================= */
/* 3. レイアウトコンテナ (シングルカラム対応) */
/* ======================================================= */
#container{
    /* サイト全体の中央寄せ設定 */
    width: 974px; 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 10px; 
}

/* メインコンテンツエリア */
#main{
  width: auto; 
  float: none; /* floatの残骸を削除 */
  padding-left: 3px;
  padding-right: 2px;
  text-align: left;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: black;
  background-image: url(../image/kabegami_wafu.jpg);
}

/* ======================================================= */
/* 4. ヘッダー・ユーティリティ・フッター */
/* ======================================================= */
#TOP{
  background-image : url(../image/header2025.jpg);
  border-bottom-width : 2px;
  border-bottom-style : solid;
  border-bottom-color : #004000;
  height : 150px;
  background-repeat : no-repeat;
}

/* SSI維持のため残すレガシーCSS */
.TOP-1{
  width : 335px;
  float : left;
  padding-left : 3px;
  right : auto;
}
.TOP-2{
  width : 300px;
  float : left;
  font-size : 17px;
  text-align : left;
  padding-top : 16px;
  padding-left : 14px;
  font-weight : 700;
  line-height : 31px;
  right : auto;
  color : #dedede;
}

/* utility-nav (SNS/TELバー) */
#utility-nav{
  border-bottom-width : 2px;
  border-bottom-style : solid;
  border-bottom-color : #004000;
  background-color : #002000;
  text-align : left;
  font-size : 16px;
  color : white;
}
#utility-nav a:link, #utility-nav a:visited{
	color : #ffffc4;text-decoration : none;
}
#utility-nav a:hover{
	text-decoration : none;background-color : #008000;
}
#utility-nav .utility-content{
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 5px 10px; 
}


/* footer */
footer{
  font-size : 15px;
  text-align : center;
  border-top-width : 2px;
  border-top-style : solid;
  border-top-color : #002b00;
  clear : both; 
  background-image : url(../image/kabegami_wafu.jpg);
}
.footer-content{
	padding: 20px 10px;
}
.footer-nav ul{
    list-style: none; margin: 0; padding: 0; display: flex; 
    justify-content: center; flex-wrap: wrap; gap: 15px; padding-bottom: 15px;
}
.footer-nav li{
	padding-right: 15px; border-right: 1px solid #777;
}
.footer-nav li:last-child{
	border-right: none; padding-right: 0;
}
.footer-nav a{
	font-size: 15px;
}
.footer-address{
	font-style: normal; margin-top: 15px; margin-bottom: 10px; text-align: center;
}
.footer-address p{
	margin: 3px 0; line-height: 1.5;
}
.footer-copy{
	font-size: 12px; display: block; text-align: center; margin-top: 15px; padding-top: 10px; border-top: 1px dashed #777;
}


/* 保育園ページ専用レイアウト (本文 Flexbox) */
.intro-content-wrapper{
    display: flex;
    justify-content: space-between; 
    gap: 20px; 
    padding: 20px 0;
}

.intro-visual{
    width: 404px; 
    flex-shrink: 0;
    text-align: center;
}

.intro-text{
    flex-grow: 1;
    font-size: 16px; 
    line-height: 1.6;
}

/* ======================================================= */
/* 5. モバイル対応 (767px以下で適用) */
/* ======================================================= */
@media screen and (max-width: 767px) {

    /* 1. サイト全体の中央寄せ設定をモバイル対応 */
    #container{
        /* 固定幅を削除し、paddingのみで余白を確保 */
        width: auto; 
        /* PC用設定 max-width: 100%; があるので、それを活かし、横スクロールを解消 */
        padding: 0 10px; /* 左右に10pxの余白を確保 */
    }
    
    /* 2. 保育園ページ専用レイアウト (本文 Flexbox) の修正 */
    .intro-content-wrapper{
        /* Flexboxの並びを横 (row) から縦 (column) に変更 */
        flex-direction: column;
        gap: 15px; /* 縦並びになった時の間隔を調整 */
    }

    /* 3. 画像エリアの固定幅を削除 */
    .intro-visual{
        /* PCで404pxに固定されていた幅を解除し、画面いっぱいに広げる */
        width: 100%; 
        /* 画像が親要素に合わせて自動で縮小するようにする */
        max-width: 100%;
    }
    /* 4. すべての画像要素をレスポンシブ化 */
    img {
        max-width: 100%;
        height: auto; /* 縦横比を維持 */
    }

    /* (補足：画像自体にも max-width: 100% を適用する必要があります) */
    .intro-visual img {
        max-width: 100%; 
        height: auto;
    }
}