/* 基本スタイル */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #f7f7f7;
        }
        .section {
            padding: 20px;
            text-align: center;
        }
        .section-title {
            font-weight: bold;
            font-size: 24px;
            margin: 20px 0;
        }
        .description {
            font-size: 16px;
            color: #333;
            margin-bottom: 0px;
        }
        hr {
            width: 80%;
            border: 0;
            border-top: 1px solid #333;
            margin: 40px auto;
        }

        /* メディアクエリでレスポンシブ対応 */
        @media (max-width: 768px) {
            .section-title {
                font-size: 20px;
            }
            .description {
                font-size: 14px;
                margin-bottom: 30px;
            }
            .login-btn {
                padding: 16px 30px;
                font-size: 20px;
            }
            .category {
                min-width: 45%;
                margin-bottom: 20px;
            }
            hr {
                width: 90%;
            }
        }
        /* 告知ページ用のCSS */
        .campaign.real .campaign-title {
            display: none;

        }
		
   		 /* クーポンの箇条書きスタイル */
   		 .coupon-usage-list {
       		list-style-type: none; /* 箇条書きのマーカーを消す */
        	padding-left: 0; /* 左側の余白を削除 */
        	margin: 0 auto;
        	max-width: 600px; /* 横幅を制限して中央に */
        	text-align: left; /* 左寄せに設定 */
    	}
    	.coupon-usage-list li {
        	margin-bottom: 10px; /* 各項目の間隔を調整 */
        	line-height: 1.6; /* 行間を調整 */
    	}
		
		/* PC用の画像スタイル */
			img.pc {
    			width: 80%; /* PCでの幅 */
    			display: block; /* PCで表示 */
				margin: 0 auto; /* 左右のマージンを自動にして中央寄せ */
		}

		/* SP用の画像スタイル */
			img.sp {
    			width: 100%; /* スマートフォンでの幅 */
    			display: none; /* デフォルトで非表示 */
				margin: 0 auto; /* スマートフォンでも中央寄せ */
		}

		/* スマートフォン用のメディアクエリ */
			@media (max-width: 768px) {
   			img.pc {
       			 display: none; /* スマートフォンではPC画像を非表示 */
    		}
    		img.sp {
       			display: block; /* スマートフォンでSP画像を表示 */
    		}
		}
		
		/* 表全体 */
        table {
            width: 60%; /* 表の幅を60%に調整 */
            max-width: 800px; /* 表の最大幅を800pxに設定 */
            margin: 20px auto; /* 上下20px、左右自動で中央揃え */
            border-collapse: collapse; /* 枠線を重ねる */
        }

        /* セルのスタイル */
        th, td {
            padding: 15px 10px; /* 上下15px、左右10pxの余白 */
            text-align: left; /* テキストを左揃え */
            border-bottom: 1px solid #999999; /* 罫線の色を#999999に */
        }

        /* 左側の列を固定幅に */
        td:first-child, th:first-child {
            width: 30%; /* 左列を30%に調整 */
            white-space: nowrap; /* 折り返しなし */
            font-weight: bold; /* 見出しっぽく強調 */
        }

        /* 右側は柔軟に広げる */
        td:last-child, th:last-child {
            width: 70%; /* 残りの幅を使用 */
        }

        /* 最後の行にも横線を表示 */
        tr:last-child td {
            border-bottom: 1px solid #999999; /* 最後の行の罫線も表示 */
        }
		
		/* 説明文のスタイルを調整 */
        .description {
            font-size: 16px;
            color: #333;
            text-align: left; /* 左揃えに変更 */
            margin: 0 auto; /* センター配置は維持 */
            max-width: 800px; /* 最大幅を800pxに制限 */
            line-height: 1.8; /* 行間を広げる */
        }

        /* 中央揃えが必要な要素には個別に適用 */
        .section-title {
            text-align: center; /* タイトルは中央揃え */
        }
		
        /* ISEKADOの画像スタイル */
        .image-gallery {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin: 20px auto;
            max-width: 1000px;
        }

        .image-card {
            text-align: center;
            width: 45%;
            min-width: 280px;
            border-radius: 0;
            overflow: hidden;
            background-color: transparent;
            box-shadow: none; /* 影を削除 */
            border: none; /* 枠線を削除 */
        }

        .image-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        .image-caption {
            font-size: 14px;
            padding: 10px;
            color: #333;
            text-align: center;
            border-top: none;
            background: none;
        }

        @media (max-width: 768px) {
            .image-gallery {
                flex-direction: column;
                gap: 10px;
            }
            .image-card {
                width: 90%;
                margin: 0 auto;
            }
        }
		
        /* ボタンコンテナのスタイル */
.link-buttons {
    display: flex;
    flex-wrap: wrap; /* 横並びが収まらない場合、折り返し */
    justify-content: center; /* 中央揃え */
    gap: 20px; /* ボタン間の隙間 */
}

/* ボタン自体のスタイル */
.link-button {
    background-color: #226942; /* 背景色 */
    border-radius: 8px; /* 角丸 */
    width: 300px; /* 固定幅 */
    padding: 20px; /* 内側の余白を追加 */
    display: flex;
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    text-align: center; /* テキスト中央揃え */
    font-size: 16px; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    color: white; /* テキストカラー */
    text-decoration: none; /* テキストの下線を消す */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 軽い影 */
    transition: transform 0.3s ease, background-color 0.3s ease; /* ホバー時のエフェクト */
    min-height: 80px; /* 最小高さを設定 */
}

.link-button:hover {
    transform: scale(1.05); /* ホバー時に少し拡大 */
    background-color: #1b5637; /* ホバー時の背景色 */
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
    .link-buttons {
        flex-direction: column; /* 縦並びにする */
    }

    .link-button {
        width: 100%; /* ボタンを画面幅いっぱいに */
    }
}

        /* クリック時（アクティブ状態） */
        .link-button:active {
            color: white;
        }

        /* 訪問済みリンクのスタイル */
        .link-button:visited {
            color: white;
        }
/* テーブルの罫線を統一する */
table {
    border-collapse: collapse;
    width: 100%;
}

table th, table td {
    border: 1px solid #ddd; /* 統一された罫線のスタイル */
    padding: 8px;
}

table tr:last-child {
    border-bottom: 1px solid #ddd; /* 最下行も統一する */
}
/* テーブルの罫線のスタイルを修正 */
table th, table td {
    border: 1px solid #ddd !important; /* !importantで強制上書き */
}

/* 画像リンクの表示を強制 */
.link-button img {
    display: block !important; /* 画像が非表示にされている場合に対応 */
    max-width: 100%;
    height: auto;
}

/* リンクボタンの表示を強制 */
.link-button {
    display: inline-block !important;
    text-align: center;
    text-decoration: none;
}

.link-button img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.link-button {
    display: inline-block !important;
    text-align: center !important;
    margin: 10px !important;
}

/* SP用テーブルレスポンシブ対応（枠線を非表示にする） */
@media (max-width: 768px) {
    table {
        width: 100%; /* テーブル全体を画面幅いっぱいに */
        border-collapse: separate; /* 枠線を分離 */
        border: none; /* テーブル全体の枠線を削除 */
    }

    table th, table td {
        display: block; /* 各セルをブロック要素に変更 */
        width: 100%; /* 幅を100%に設定 */
        text-align: left; /* テキストを左揃え */
        padding: 10px; /* 余白を調整 */
        box-sizing: border-box; /* ボックスサイズを調整 */
        border: none !important; /* 枠線を完全に削除 */
    }

    table tr {
        display: flex; /* 行をフレックスボックスとして表示 */
        flex-direction: column; /* 縦並びに変更 */
        margin-bottom: 10px; /* 行ごとに隙間を追加 */
        border: none; /* 行全体の枠線を削除 */
        background-color: #f9f9f9; /* 行全体に背景色を追加 */
        padding: 5px; /* 行に余白を追加 */
    }

    table tr:last-child {
        margin-bottom: 0; /* 最後の行の余白を削除 */
    }
}