/*--------------------------------------------------
  すみれ野自治会 CSS 2026 完全版
  ・PC/スマホ統合レスポンシブ
  ・既存HTML互換
  ・今風UI
--------------------------------------------------*/

/* ===== リセット ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;

    background: linear-gradient(#f5f7fb, #e9eef5);
    background: #f5f7fb;
    color: #111;
    line-height: 1.6;
}

/* ===== リンク ===== */
a {
    color: #0011cc;
    text-decoration: none;
    font-weight: 700;
}

a:hover {
    text-decoration: underline;
}

/* ===== ヘッダ ===== */

.site-header {

/*	background: linear-gradient(to bottom, #f8f4ff, #e6e0fa); */
    background: #02ccff;  
    border-bottom: 3px solid #4facfe; 
}

.header-inner {
    max-width: 1000px;
    margin: 0 auto;
	padding: 0px 16px 0 16px; /* 上・右・下・左 の順。下(3番目)を 0 に設定 */
    text-align: center;
}

.header-inner img {
    max-width: 650px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ===== メインナビ（改善版） ===== */
.main-nav {
    background: #f8f8f8;
    border-bottom: 2px solid #999;
    text-align: center;
    padding: 6px 0;
}

.main-nav a {
    display: inline-block;
    padding: 12px 18px;
    font-size: 16px;   /* ← ここが重要（少し大きく） */
    color: #111;
    font-weight: bold; /* ← 読みやすさUP */
}

.main-nav a:hover {
    background: #eaeaea;
    border-radius: 4px;
}

/* ===== ナビメニュー（会員向け） ===== */

.nav_menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
}

.nav_menu a {
  display: block;
  text-align: center;
  padding: 10px 5px;

  background: #f2f2f2;
  background: #f0f4f8;

  border-radius: 8px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ddd;

  /* 今風ポイント */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;

}
.nav_menu a.active {
  background: #0078d7;
  background: #319CFF;  /* H2の水色 */
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* マウスを乗せたとき */
.nav_menu a:hover {
  background: #02ccff;
  color: #fff;
  transform: translateY(-2px);
}

/* クリック時（スマホ含む） */
.nav_menu a:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}


/* ===== メイン ===== */
main {
    max-width: 1000px;
    margin: 30px auto;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* ===== 見出し（mainの幅いっぱいまで広げる設定） ===== */
h2, h3, h4, h5, h6 
{
    /* mainのpadding(24px)分だけ外側に広げる */
/*    margin-left: -24px; */
/*    margin-right: -24px; */
    
    /* 広げた分、中の文字が端に寄りすぎるのを防ぐための余白 */
/*    padding-left: 24px; */
/*    padding-right:24px; */
    
}




/**************************************
【H1 タイトル】
***************************************/
H1
{
    FONT-WEIGHT: bold;
	font-size: 28px;
	line-height: 140%;
    padding: 0px 12px 0px 12px; 	 /* 上・右・下・左 */
}

/**************************************
【H2見出し　	反転】
***************************************/
H2 {
	background-color: #319CFF;	/*�E*/ /* 水色 */
	color:  WHITE;		/* ヘッダやH2やNAVIの文字（白色） */  

    FONT-WEIGHT: bold;
	font-size: 26px;

    position: relative;
    padding: 0.5em 0.7em;
    font-weight: bold;
/*    margin: 2em 0; */
}
H2:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    width: 0;
    height: 0;
}
H2 p {
    margin: 0; 
    padding: 0;
}
/**************************************
【H3 見出し　	｜左線　青色・黒字】
***************************************/
H3 {
	padding: 0.25em 0.5em;/*上下 左右の余白*/

	color: BLACK;
	background-color: transparent;/*背景透明に*/

	border-left: solid 8px #319CFF; /*左線*/ /* 水色 */ /*�E*/
	font-size: 22px;
	font-weight:  bold;
}

/**************************************
【H4 見出し　	｜下線色が変わる　青色・黒字】
***************************************/
H4 {
    margin-top: 15px;
    margin-bottom: 10px;

	border-bottom: solid 3px #C1E1FF; /*�F*/

	position: relative;
	font-size: 18px;
    padding-left: 5px;
}
H4:after {
  border-bottom: solid 3px #319CFF;   /*�E*/
}


/**************************************
【H5 太い下線（若干グラデーション）　】
***************************************/
H5
{
	margin-bottom: 10px;
	margin-top: 10px;

	padding-left: 5px;

	font-size: 18px;
	background: linear-gradient(transparent 40%, #C1E1FF 100%);	 /*�F*/
 }


/**************************************
【H6 H3の薄い色での背景有り】
***************************************/
H6
{
    margin-bottom: 10px;
    margin-top: 10px;

	font-size: 22px;
	padding: 0.5em;  /*文字周りの余白*/
	color: BLACK;    /*文字色*/

	background: #C1E1FF; /*�F*/
	border-left: solid 5px #319CFF; /*左線*/ /* 水色 */ /*�E*/
}






/* ===== テーブル ===== */
table {
    width: 100%;
    border-collapse: collapse;
/*    margin: 10px 0; */
/*    background: #fff; */
/*    display: block;  */
    overflow-x: auto;

/*    border: 2px solid #666; */

}

td, th {
/*    border: 1px solid #888; */
    padding: 8px;
    font-size: 14px;
}

th {

  /*   background: #dbe9ff;  */
    color: #000;

}

/* ===== 画像 ===== */
img {
    max-width: 100%;
    height: auto; 
/*	width: auto;  */
}

.main-visual {
    width: 100%;
    max-width: 800px;
    display: block;
    margin: 0 auto 20px;
    border-radius: 8px;
}

/* ===== ボタン風リンク ===== */
.button {
    display: inline-block;
    background: #4facfe;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    transition: 0.2s;
}

.button:hover {
    background: #3399ff;
}

/* ===== フッター ===== */
.footer {

    background: #02ccff; 
    background: #333; 			/* 背景色：グレー */
    background: #02ccff;  		/* 背景色：水色 */

    color: #fff;
    margin-top: 40px;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 20px;
    text-align: center;
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    color: #ffffffff;
    margin: 0 10px;
    font-size: 14px;
}

.footer-links a:hover {
    color: #fff;
}

.footer-copy {
    font-size: 17px;
    color: #ffffffff;
    margin-top: 15px;
}

/* ===== 余白調整 ===== */
p {
    margin: 10px 0;
}


input, select, textarea {
  font-size: 24px;
  padding: 4px;
}




/* ===== スマホ最適化 ===== */
@media (max-width: 600px) {

    main {
        margin: 0px;
        padding: 10px;
    }

	.main-nav {
        overflow-x: auto;       /* 横方向のはみ出しを許可 */
        white-space: nowrap;    /* 文字を改行させない */
        -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかに */
        padding: 0 10px;
        text-align: left;       /* スクロールさせるため左寄せに */
    }

    .main-nav a {
        display: inline-block;  /* 縦並び（block）をやめて横並びに戻す */
        width: auto;            /* 幅を自動に */
        padding: 10px 10px;     /* 押しやすい幅に調整 */
        border-bottom: none;    /* 下線を消す */
    }


    td, th {
        font-size: 13px;
    }

	H1
	{   FONT-WEIGHT: bold;
		font-size: 24px;
	}
	H2
	{	font-size: 22px;
	}
	H3
	{	font-size: 18px;
	}
	H4
	{	font-size: 18px;
	}
	H5
	{	font-size: 16px;
	}
	H6
	{	font-size: 20px;
	}

    .footer-inner {
        padding: 15px;
    }

    /* スマホ表示時の mainのpadding 分だけ外側に広げる */
	H2, H3, H4, H5, H6 
	{
	    margin-left: -10px;
	    margin-right: -10px;
    
	    /* 広げた分、中の文字が端に寄りすぎるのを防ぐための余白 */
	    padding-left: 10px;
	    padding-right:10px;
	}

    /* ナビ_メニュー （スマホ向け）*/
   .nav_menu 
   {
     grid-template-columns: repeat(4, 1fr);
    }
   .nav_menu a
   {
     border: 1px solid #ddd;
     font-size: 13px;
     padding: 12px 5px;
    }
    /* テーブル微調整（スマホ向け）*/
    table
    {
     /*   display: block;  */
       overflow-x: auto;
     }

}