/* メインコンテナのレイアウト */
.main-container {
    display: flex; /* 横並びを基本設定 */
    width: 100%;
    gap: 20px; /* 左右コンテンツの間隔 */
    box-sizing: border-box;
}

/* 左コンテンツ */
/* 左コンテンツのスタイル */
.left-content {
    width: 100%; /* 左コンテンツを全体の65%に設定 */
    background-color: #f9f9f9; /* 背景色 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
    border-radius: 8px; /* 角を丸くする */
    box-sizing: border-box;
    padding: 0px 20px 20px 20px;
}

/* 見出しのスタイル */
.left-content h1 {
    font-size: 2rem;
    color: #37415a;
    background-color: #a5ca5b;
    padding-left: 1rem;
}

.left-content h2 {
    font-size: 1.5rem;
    color: #37415a;
    background-color: #cbed87;
    margin-top: 20px;
    padding-left: 1rem;
}

.left-content h3 {
    font-size: 1.2rem;
    color: #555;
    background-color: #e1f1c4;
    margin-top: 15px;
    padding-left: 1rem;
}

/* テキストとリストのスタイル */
.left-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-left: 1rem;
    color: #333;
}

.left-content ul {
    margin: 0;

    list-style-type: none; /* リストのmarker設定 */
}

.left-content ul li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
}



/* 右コンテンツ */
.right-content {
    width: 35%; /* 右コンテンツの幅 */
    background-color: #f9f9f9;  /* 背景色（任意） */
    padding: 20px; /* 内側余白 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を付ける */
    border-radius: 8px; /* 角を丸くする */
    box-sizing: border-box;
}

/* 画像リンクコンテナ */
.image-links-container {
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 縦方向に並べる */
    gap: 10px; /* 各画像リンク間の余白 */
}

/* 各リンクのスタイル */
.image-link {
    display: block;
    width: 80%; /* リンクの幅を親要素に合わせる */
    text-align: center; /* 画像を中央揃え */
}

.image-link img {
    max-width: 80%; /* 親要素に収まるよう調整 */
    height: auto; /* アスペクト比を維持 */
    border-radius: 8px; /* 角を丸くする（任意） */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

.image-link img:hover {
    transform: scale(1.05); /* 拡大して強調 */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* ホバー時の影 */
}

/* レスポンシブデザイン：幅767px以下でレイアウトを縦並びに変更 */
@media screen and (max-width: 767px) {
    .main-container {
        display: flex;
        flex-direction: column; /* コンテンツを縦並びに */
        gap: 20px; /* 各コンテンツ間の間隔 */
    }

    .left-content,
    .right-content {
        width: 100%; /* コンテンツを全幅に */
        box-shadow: none; /* 影を消す（任意） */
    }
}

.telmail a {
    color: #37415a;
    text-decoration: none;  
}

.telmail a:hover {
    color: wheat;
    text-decoration: none;  
}