@charset "UTF-8";

/* body */
body {
	color:#1a1a1a;
	margin:0px;
	padding:0px;
	background-position:center;
	font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
    /*font-family: Arial, sans-serif;*/
    background-color: #f0f0f0; /* 背景色を設定（任意） */

}

/* コンテナのスタイル */
.container {
    display: grid;
    grid-template-areas: 
        "header header"
        "main aside"
        "footer footer";
    grid-template-columns: 3fr 1fr; /* メインとサイドの比率 */
    gap: 20px;
    padding: 20px;

    /* 横幅を固定し、中央に配置 */
    max-width: 1000px;
    margin: 0 auto; /* ページ中央に配置 */
    background-color: white; /* 背景色を白に */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 薄い影を追加（任意） */
    border-radius: 8px; /* 角を丸くする（任意） */
}

/* 各セクションのスタイル */
header {
    grid-area: header;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px 8px 0 0; /* 上部の角を丸くする（任意） */
}

main {
    grid-area: main;
    background-color: #e8e8ff;
    padding: 20px;
}

aside {
    grid-area: aside;
    background-color: #fff3e8;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 0 0 8px 8px; /* 下部の角を丸くする（任意） */
}

/* スマホ向けのスタイル */
@media (max-width: 768px) {
    .container {
        grid-template-areas: 
            "header"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr; /* 1列にする */
    }
}

p  { margin:3px 5px; }


/* コンテンツ */
h1 { color:#3f3f3f; font-size:14px; margin:0px 0px; line-height:120%;}
h2 { color:#ffffff; font-size:17px; margin: 5px 5px 5px 15px;}
h3 { color:#1a1a1a; font-size:17px; margin:0px 0px;}
h4 { color:#8c0c0b; font-size:17px; border-bottom:1px solid #8c0c0b; line-height:170%; margin:15px 0px;}

/* フッター情報 */
footer {
  background-color: darkgreen;
  color: white;
  padding: 20px;
}

footer a {
  color: white;
  text-decoration: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:10px;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.copyright {
  text-align: center;
  font-size: 14px;
}

/* ナビゲーション全体 */
.nav-item {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 43px;
  max-width: 1000px; /* ← 幅を拡張（お好みで調整） */
  margin: 0 auto;     /* ← 中央寄せ */
  background-color: #ffffff;
}

/* 各メニュー項目 */
.nav-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px; /* ← 横幅の余白 */
  height: 43px;
  background-image: url('new_menubar.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  color: green; /* ← 文字色緑色に変更 */
  text-decoration: none; /* ← 下線を消す */
  font-weight: bold;
  font-size: 12pt;
  border-right: 1px solid #aaa; /* 区切り線 */
  transition: background-color 0.3s;
  background-color: transparent;
  background-blend-mode: multiply; /* ← ブレンドモード追加 */
}

/* 最後の項目だけ右線を消す */
.nav-item a:last-child {
  border-right: none;
}

/* ホバー時 */
.nav-item a:hover {
  background-color: orange; /* ← 上に重ねる色*/
  color: white; /* ← 文字色を白に（見やすく） */
}


@media (max-width: 768px) {
.nav-item{
display: none;
}
}

/*　各ページの記事の表題　*/
.hyodai{
    padding: 1px;
    border: 1px solid #333;
    background: green;
}

/*パソコンでは表示するが、スマホでは表示しない*/
.pc { display: block !important;}

.sp { display: none !important;}

/*スマホでは"sp"のclassがついた画像を表示*/
@media only screen and (max-width:750px) {
	.pc { display: none !important;}
	.sp { display: block !important;}

/*===============================================================
 スマホ向けのスタイルシート
===============================================================*/

@media screen and (max-width: 767px) {

    /* スマホでは画像を拡大する */
    img {
        max-width: 100%;
        height: auto;
    }


    /* スマホではメールフォームのボタンを大きくする */
    input[type="submit"] {
      padding: 15px 20px;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    /* スマホではメールフォームの横幅を広げる */
    input[type="text"], textarea {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* スマホでも入力フォームの「生年月日」の箇所は広げない */
    input.no-expand {
      width: auto;
      max-width: 80px;
      box-sizing: border-box;
    }

    /* スマホではテーブルを縦に並べる */
    .responsive-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* フッター情報 */
    .footer-links {
        display: block;
    }

    .footer-section {
        margin-bottom: 20px;
        border-bottom: 1px dotted white;
        padding-bottom: 10px;
    }

    .footer-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .footer-section a {
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }

    .footer-section a:last-child {
        margin-bottom: 0;
    }
}

/*===============================================================
 ここまでスマホ向けのスタイルシート
================================================================*/