@charset "utf-8";
/* CSS Document */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-image: url('background-image.jpg'); /* 背景画像の指定 */
    background-size: cover; /* 画面全体を覆うように画像を拡大縮小 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-attachment: fixed; /* ★背景画像を固定する重要なプロパティ */
    background-position: center; /* 背景画像を中央に配置 */
    min-height: 100vh; /* ページが短い場合でも背景が見えるように最低限の高さを確保 */            
}

h1 {
    display: block; /* 画像をブロック要素にする */
    margin: 0; /* 必要に応じて余白をリセット */
    margin-top: 10px; /* 上の余白 */
    margin-bottom: 5px;  /* 下の余白 */
}

h2 {
    margin-top: 5px; /* 上の余白 */
    margin-bottom: 5px;  /* 下の余白 */
	font-family: Arial, sans-serif; /* フォント */
    font-size: 15px; /* 文字サイズ */
    color: #333; /* 文字色 */
}

h3 {
    font-weight: normal; /* 太字を解除して標準の太さに */
    font-family: Arial, sans-serif; /* フォント */
    font-size: 15px; /* 文字サイズ */
    color: #333; /* 文字色 */
}

.h2-center {
    text-align: center;
    font-size: 150%;
    margin-bottom: 30px;
}

.p-main {
    font-family: Arial, sans-serif; /* フォント */
    font-size: 16px; /* 文字サイズ */
    color: #333; /* 文字色 */
    line-height: 1; /* 行間 */
    text-align: justify; /* 両端揃え */
    margin-bottom: 1em; /* 段落の下に余白を追加 */
}

.p-sub {
    margin-bottom: 3em;
}

.p-smallmargin {
    margin: 1px
}

/* 特定の<p>タグに適用する場合 */
.adjusted-paragraph {
  line-height: 0; /* 行間を1.6倍に設定 */
  margin: 0 0 30px; /* 上下の余白を調整 */
}

/* 文字下のアンダーライン */
.underline-container {
  margin: 0 0 5px; /* pタグの上下の余白を調整 */
  /* white-space: normal; がデフォルトなので、特に指定は不要 */
}

.underline-text-content {
  border-bottom: 4px solid #8B4513; /* 太さ2px、破線、下線の色 solid:実線 dotted:点線 dashed:破線 */
  padding-bottom: 1px; /* テキストと下線の間の隙間 */
  /* spanはデフォルトでinline要素なので、display: inline-block; は不要 */
  /* inline要素にborder-bottomを適用すると、テキストの幅に合わせて線が引かれ、
     テキストが改行されれば、その行ごとに下線が引かれます。 */
  line-height: 1.5; /* 行間を適切に設定（0だとテキストが重なる可能性） */
  font-size: 125%; /* HTMLのstyle属性から移動 */
}

.content-center {
    text-align: center; /* 中央揃え */
}

 /* スマホサイズクエリ */
@media only screen and (max-width: 480px) {
    
}

 /* タブレットサイズクエリ */
@media only screen and (max-width: 481px) and (max-width: 768px) {
    
}
		
 /* 新着メッセージ */
#new-messages {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#new-messages h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

 .message {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
}

 .message .date {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

 .message .content {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

 .line {
    height: 3px; /* ラインの高さ */
    background-color: #001; /* ライン色 */
    width: 90%; /* 横幅の%設定 */
    margin: 30px auto; /* 上下の余白と中央寄せ */
}

.bottom {
    margin-bottom: 80px;
}

        /* マップを中央に配置したり、レスポンシブにするためのスタイル例 */
        .map-container {
            margin: auto;
            position: relative;
            padding-bottom: 56.25%; /* 16:9のアスペクト比 (高さ / 幅 * 100) */
            height: 0;
            overflow: hidden;
            max-width: 80%;
            background: #eee;
        }
        .map-container iframe {
           position: absolute;
            top: 0;	
    left: 50%;
    transform: translateX(-50%);
            width: 100%;
            height: 100%;
            border: 0;
        }