@charset "UTF-8";
/* --- 共通設定 --- */
*, *::before, *::after {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
	/* background-color: #f5f5f5; */
	color: #333;
	display: flex;
	flex-direction: column;
	min-height: 100dvh; /* フッターを最下部に固定するための設定 */
	background-image: url(../img/24108948.png);
}
/* リンク */
a:link {
	color: #b22222;
	text-decoration: none;
	transition: all 0.2s;
}
a:visited {
	color: #b22222;
	text-decoration: none;
}
a:hover {
	color: #d52929;
	/* background-color: #d37e7e; */
	text-decoration: underline;
}
/* 中央寄せの共通ルール */
.inner, .container {
	max-width: 1000px; /* すべての要素の最大幅を統一 */
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
/* --- ヘッダー・フッター --- */
.site-header, .site-footer {
	background-color: #778899;
	/* 3色をカンマ区切りで指定 */
	/* background: linear-gradient(#465666, #778899, #ACBDCF); */
	/* 角度(45deg)を指定 */
	/* background: linear-gradient(45deg, #465666, #778899, #ACBDCF); */
	/* 円形（放射状） */
	/* background: radial-gradient(circle, #ACBDCF, #778899, #465666); */
	/* to right: 左から右へ / 明るい -> 基準 -> 暗い */
	/* background: linear-gradient(to right, #ACBDCF, #778899, #465666); */
	/* 左から右へ / 暗い -> 基準 -> 明るい */
	/* background: linear-gradient(to right, #465666, #778899, #ACBDCF) */;
	/* 左（赤） → 中央（グレー） → 右（黄） */
	/* background: linear-gradient(to right, #A66F6F, #778899, #B5A675); */
	/* 左から右（to right）へ、明るい色へ変化 */
	/* background: linear-gradient(to right, #778899, #ACBDCF); */
	/* 角度(45deg)を指定 */
	/* background: linear-gradient(45deg, #778899, #ACBDCF); */
	color: #fff;
	width: 100%;
}
.site-header {
	padding: 20px 0;/* background-image: url(../img/page-header_bg.png); */
}
.site-title {
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-size: 48px;
	font-weight: normal;
	margin: 0 0 0 20px;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
/* --- フッター --- */
.site-footer {
	background-color: #778899;
	color: #fff;
	width: 100%;
	padding: 15px 0;
	margin-top: 0; /* auto を 0 に変更 */
	text-align: center;
}
/* --- メインコンテンツの枠（2カラム） --- */
.container {
	display: flex;
	flex: 1; /* ここを追加：中身が少なくてもコンテナが画面下まで伸びるようにする */
	gap: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	width: 100%;
	max-width: 1000px;
}
.main-content {
	flex: 1;
	/* background: #fff; */
	padding: 0;
	border-radius: 4px;
}
.sidebar {
	width: 300px;
	margin: 0 0 0 10px;
	padding: 0 20px 20px 20px;
	border-radius: 10px;
}
.post {
	margin: 10px 0 0 0;
	padding: 10px 20px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
}
.post h3 {
	margin: 0;
}
.description {
	font-size: 90%;
}
/* リスト */
ul {
/*
	list-style-type: none;
	padding-left: 0;
	*/
	/* margin-left: 0;*/ /* list-style-position: inside; */
}
li {
	margin-bottom: 20px;
}
 li::marker {
 color: #ccc;
}
/* メインコンテンツ内の画像の設定 */
.main-content img {
	border: 1px solid #ddd;
	max-width: 100%; /* 親要素の幅を超えないようにする */
	height: auto;    /* 縦横比を維持する */
}
/* 画像リンクの基本設定 */
a img {
	transition: filter 0.3s ease; /* 変化をふわっと滑らかにする設定 */
}
a:hover img {
	filter: brightness(1.2); /* 1.2倍の明るさにする */
}
.post a {
	-webkit-tap-highlight-color: transparent; /* タップ時のハイライト（青やグレーの影）を透明にする */
	outline: none;                            /* フォーカス時の枠線を消す */
}
.post img {
	border: 0;
	vertical-align: middle;
	margin-right: 15px; /* 右側に15pxの余白 */
	width: 64px;       /* 任意の幅 */
	height: 64px;      /* 幅と同じ高さ（正方形にする） */
	border-radius: 20%; /* 50%で真円になる */
	object-fit: cover;  /* 画像を歪ませずに中央でトリミング */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 影の設定：右に0px 下に2px ぼかし4px 色は黒の不透明度30% */
	/* 画像自体のフォーカス枠も念のため抑制 */
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
/* PC・共通設定 */
.app-container {
	display: flex;
	align-items: center; /* 画像の高さ中央に揃える */
	gap: 12px;
}
.text-area {
	display: flex;
	flex-direction: row; /* PCでは1行（横並び） */
	align-items: center;
	gap: 8px;
}
.app-title {
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.privacy-link {
	font-size: 0.9em;
	color: #666;
	text-decoration: none;
}
html {
	scroll-behavior: smooth; /* スムーズなスクロール */
}
/* 前のページに戻る */
.back-link {
	margin-top: 30px;
	text-align: center;
}
.back-link a {
	text-decoration: none;
	/* color: #007bff; */
	font-weight: bold;
}
/* ボタンの基本スタイル */
.page-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* 背景と文字色 */
	background-color: #b22222;
	/* 他のリンク設定に負けないよう color を指定 */
	color: #ffffff !important;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
	/* 浮き出るアニメーション */
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.5s;
	/* タップ時のハイライトを透明にする */
	-webkit-tap-highlight-color: transparent;
}
/* ホバー時も白を維持、または明るく */
.page-top:hover {
	background-color: #d52929;
	color: #ffffff !important;
	text-decoration: none;
}
/* JavaScriptで付与される表示用クラス */
.page-top.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* --- レスポンシブ（タブレット：1024px以下） --- */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    .sidebar {
        width: 200px; /* サイドバーを少し狭くしてメインを広く保つ */
    }
    .site-title {
        font-size: 36px; /* タイトルの改行を防ぐためサイズ調整 */
    }
}

/* --- レスポンシブ（スマホ：480px以下） --- */
@media screen and (max-width: 480px) {
    html {
        font-size: 90%; /* 全体の文字サイズをスマホ向けに微調整 */
    }
    .container {
        flex-direction: column; /* 1カラム（縦並び）に切り替え */
    }
    .sidebar {
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }
    .text-area {
        flex-direction: column; /* アプリ情報を2行（縦並び）に変更 */
        align-items: flex-start;
        gap: 10px;
    }
    .site-title {
        font-size: 28px; /* スマホ画面に合わせたタイトルサイズ */
    }
    /* タップデバイスでのホバー演出を抑制 */
    a img {
        transition: none !important;
    }
    a:hover img {
        filter: none !important;
    }
}