@charset "utf-8";
/*body
---------------------------------------------------------------------------*/
body {
	color: #333;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin:0;
    padding:0;
	line-height: 1.6;
    text-align:center;
	background:url(../img/body_bg.png) repeat;
	-webkit-text-size-adjust: 100%;
	width: 100%;
	font-size: 16px;
	overflow-x: hidden; /* 横スクロールを防ぐ */
}
h1,h2,h3,h4,p,ul,li,dl,dt,dd{
    margin:0;
    padding:0;
}
ul{list-style-type: none;}
header,footer,main,menu,nav,section{display: block;}

/*ヘッダー
---------------------------------------------------------------------------*/
header {
    text-align: left;
    background: linear-gradient(135deg, #2e8b57, #98fb98); /* グラデーションの指定 */
    margin:0;
    padding:10px 0 10px 20px;
    line-height: 130%;
    width: 100%; /* 100%に変更 */
    box-sizing: border-box; /* box-sizingをborder-boxに設定 */
    letter-spacing: 10px; /* 文字間隔を広める */
}
.logo_text{
	font-size:1.5em;
	font-weight:bold;
	color:azure;
}
header a {
	color:azure;
	text-decoration: none; /* 下線を表示しない */
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .logo_text {
        font-size: 0.8em; /* スマートフォン向けにフォントサイズ調整 */
        padding: 0px 5px; /* スマホ向けに余白を少し減らす */
        letter-spacing: 3px; /* 文字間隔を狭める */
	}
}
/*メイン
---------------------------------------------------------------------------*/

h1 {
	text-align: center;
    background-color: #288F47;
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
}
main {
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: left;
}


h2 {
    font-size: 20px;
    color: #288F47;
    border-left: 5px solid #288F47;
    padding-left: 10px;
    margin-top: 20px;
}

p {
    font-size: 16px;
    margin-top: 10px;
}


/* 関連記事セクション */
.related-articles {
    margin-top: 40px;
    text-align: center;
    padding: 30px 20px; /* 上下左右に余白を追加 */
    background-color: #F5F5F5; /* 背景色でセクションを強調 */
    border-radius: 10px; /* コーナーを丸くして柔らかさを加える */
    border: 1px solid #ddd; /* セクションの枠線を追加 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 少し影をつけて立体感を持たせる */
}

.related-articles h3 {
    font-size: 24px;
    color: #288F47;
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 2px solid #288F47; /* タイトルの下にボーダーを入れて強調 */
    padding-bottom: 10px; /* ボーダーとテキストとの間隔を確保 */
}

/* カードコンテナ */
.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 各カードのスタイル */
.card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    margin-bottom: 20px; /* カードの下にスペースを追加 */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.card h4 {
    font-size: 18px;
    color: #288F47;
    margin-bottom: 10px;
}

.card p {
    font-size: 14px;
    color: #666;
}

/* 画像のスタイル */
.card-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* スマートフォン対応 */
@media (max-width: 768px) {
   .card-container {
    gap: 10px;
    }
	
	.card {
        width: 100%;
    }
}

/*運営者情報
---------------------------------------------------------------------------*/
table.unei_te{
width:96%;
line-height:130%;
margin:15px auto 10px auto;
	background: #DDDDDD;
	text-align: left;
	font-size: 14px;
}
table.unei_te th{
vertical-align:middle;
padding:8px 3px 5px 13px ;
	background: #FFFDE2;
	font-weight: normal;
	width: 30%;
	
}
table.unei_te td{
padding:8px 3px 5px 13px ;
	background: #FFF;
	font-weight: normal;
}
/*フッター
---------------------------------------------------------------------------*/
footer {
	text-align: center;
	background:	#FECB5F;
	margin:0;
	padding:10px 0 15px 5px;
	
	line-height: 160%;
	width: 100%;
}

footer p{
    font-size:90%;
}
footer a{
}
footer ul{
	margin:0;
	padding:0;
	}
footer li{
	margin:0 5px;
	padding:5px 0;
	vertical-align: middle;

	line-height: 140%;
	display: inline;
	font-size: 90%;
	}
#foot{
	position: relative;
	margin: 0 auto;
	width: 100%;
}

/*文字装飾
---------------------------------------------------------------------------*/
.b {font-weight:bold;}
.red {font-weight:bold; color:rgba(252,0,4,1.00);}
.red_un {font-weight:bold; color:rgba(252,0,4,1.00); text-decoration:underline;}
.bl {color: rgba(28,98,238,1.00);}
.bra { color:rgba(97,0,1,1.00);}
.line{ color:rgba(255,0,0,1.00); background:rgba(255,242,160,1.00); font-weight:bold;}
.x10{ font-size:10px;line-height: 140%;}
.x12{ font-size:10px; line-height:15px; display:block;}
.x8{ font-size:8px;}
.x11{ font-size:11px; }
.x18{ font-size:18px;}
.x22{ font-size:22px;}
.x28{ font-size:28px;}
.pink{ color:#FF50FE;}
.pink_b{color: #FF0086; font-weight: bold;}
.x11_110{font-size: 11px;;color: #515151 !important;}  
.white{color: #FFF; font-weight: bold;}
.orange{color:orange; font-weight: bold;}
.x24_b{ font-size:24px;font-weight: bold;}
.kome{margin-top:10px;}
.x30_b{ font-size:30px;font-weight: bold;}
.x28_b{ font-size:30px;font-weight: bold;}




/*画像の振り分け-----*/
.pc { display: block !important; }
.sp { display: none !important; }