/* ベーススタイル */
html {
    scroll-padding-top: 95px; /* 目次リンクジャンプ時にヘッダーに隠れないように調整 */
}

body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    line-height: 1.8;
    color: #5d4037; /* 柔らかいブラウン */
    background-color: #fffcf5; /* 暖かいクリーム色 */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth; /* スムーズスクロール有効化 */
}

.container {
    max-width: 1400px; /* 全体の最大幅を広めに設定 */
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
header {
    background-color: rgba(255, 255, 255, 0.9);
    color: #5d4037;
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(93, 64, 55, 0.05);
    position: sticky;
    top: 0;
    z-index: 1400;
}

.site-logo {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
    color: #d84315; /* 温かみのあるオレンジ */
}

/* ヒーローセクション（TOP画像） */
.hero-section {
    padding: 0;
    text-align: center;
    background-color: #fffcf5;
}

.hero-image-container {
    width: 100%;
    max-width: 1500px; /* PCでの最大幅をさらに拡大 */
    margin: 0 auto;
}

.hero-image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 8px 30px rgba(93, 64, 55, 0.12);
}

/* 目次セクション */
.mokuji-section {
    padding: 40px 0;
    background-color: #fdf6e9; /* 薄いオレンジ系の背景 */
    text-align: center;
    margin-bottom: 40px;
}

.mokuji-section h2 {
    font-size: 1.8em;
    color: #bf360c;
    margin-bottom: 20px;
}

.mokuji-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px;
    text-align: left;
    display: inline-block; /* 中央寄せ用 */
}

.mokuji-list li {
    margin-bottom: 10px;
    border-bottom: 1px dashed #ffab91;
    padding-bottom: 5px;
}

.mokuji-list a {
    color: #5d4037;
    text-decoration: none;
    font-size: 1.1em;
    display: block;
    transition: color 0.3s;
}

.mokuji-list a:hover {
    color: #d84315;
    padding-left: 5px; /* ホバー時に少し右へ動くアニメーション */
}

/* コンテンツセクション */
.content-section {
    padding: 50px 0; /* 余白を少し調整 */
}

/* 導入文の特別な背景 */
.introduction-bg {
    background-color: #fff8e1;
}

.lead-text {
    font-size: 1.15em;
    font-weight: 500;
    color: #4e342e;
    max-width: 850px;
    margin: 0 auto;
}

/* 交互の背景色 */
.alternate-bg {
    background-color: #fcf4ec;
}

/* 見出し（中央寄せ） */
.content-section h2 {
    font-size: 2.2em;
    color: #bf360c;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 12px;
}

.content-section h2::after {
    content: '';
    width: 100%;
    height: 3px;
    background-color: #ffab91;
    border-radius: 2px;
    margin-top: 5px;
}

/* インパクトメッセージ（ラエリアンはいます）用スタイル */
.impact-message {
    font-size: 3em !important; /* 文字を大きく */
    color: #d84315 !important; /* 強いオレンジ色 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1); /* 影をつける */
    margin-bottom: 50px !important;
    font-weight: 900 !important; /* 極太字 */
    letter-spacing: 0.1em;
    text-align: center;
    width: 100% !important; /* 幅制限解除 */
    animation: fadeIn 2s ease-in-out; /* ふわっと表示 */
}

/* インパクトメッセージの下線を消す */
.content-section h2.impact-message::after {
    content: none !important;
    display: none !important;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 本文 */
.content-section p {
    font-size: 1.0em; /* 本文サイズ */
    margin-bottom: 1.5em;
    text-align: justify;
    max-width: 850px; /* テキストの幅を制限して読みやすく */
    margin-left: auto;
    margin-right: auto;
}

/* 「最後に」セクションの段落間隔を詰める */
#conclusion p {
    margin-bottom: 0.8em; /* 通常(1.5em)より狭く */
}

/* 目次に戻るボタン */
.back-to-mokuji-wrapper {
    text-align: right;
    margin-top: 20px;
    padding-right: 10px;
    max-width: 1350px; /* 画像の幅に合わせる */
    margin-left: auto;
    margin-right: auto;
}

.back-to-mokuji {
    display: inline-block;
    padding: 8px 25px;
    background-color: #fffcf5;
    color: #d84315;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.95em;
    font-weight: bold;
    border: 2px solid #ffab91;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(216, 67, 21, 0.1);
}

.back-to-mokuji:hover {
    background-color: #ffab91;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(216, 67, 21, 0.2);
}

/* テキストリンク */
.text-link {
    color: #e65100;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s;
}
.text-link:hover {
    color: #ff8f00;
}

/* コンテンツ内画像（大きく表示し、テキスト幅の基準にする） */
.content-image {
    text-align: center;
    margin: 35px auto;
    max-width: 1350px; /* 画像の最大幅を大きく設定 */
}

.content-image img {
    width: 100%; /* コンテナいっぱいに大きく表示 */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(93, 64, 55, 0.08);
    border: 6px solid #fff;
}

/* リンク集セクション */
.links-section {
    padding: 60px 0;
    background-color: #f1f8f1; /* 優しいグリーン */
}

.links-section h3 {
    font-size: 1.8em;
    color: #2e7d32;
    text-align: center;
    margin-bottom: 30px;
}

.links-section ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 850px; /* 700pxから850pxに拡大し、「最後に」の文章幅と合わせる */
}

.links-section li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

.links-section li::before {
    content: '◎';
    color: #8bc34a;
    position: absolute;
    left: 0;
}

.links-section a {
    color: #2e7d32;
    text-decoration: none;
    border-bottom: 1px solid #a5d6a7;
    transition: all 0.3s;
}

.links-section a:hover {
    color: #1b5e20;
    border-color: #2e7d32;
}

/* リンク集の追加テキスト（◎なし、左端揃え） */
.extra-links-text {
    max-width: 850px;
    margin: 20px auto 0;
}

.extra-links-text p {
    text-align: justify;
    margin-bottom: 1em;
}

/* マイトレーヤ画像の配置（追加文章の後） */
.maitreya-bottom-container {
    max-width: 500px; /* 画像サイズを制限 */
    margin: 30px auto 0; /* 上に余白をとって中央寄せ */
    text-align: center;
}

.maitreya-bottom-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(93, 64, 55, 0.08);
    border: 6px solid #fff;
}

/* ポスターセクション（レスポンシブ対応） */
.sub-image-section {
    background-color: #fffcf5;
    padding: 60px 0;
    text-align: center;
}
.sub-image-section h3 {
    color: #5d4037;
    margin-bottom: 30px;
    font-size: 1.8em;
}

.sub-image-full-container {
    width: 100%;
    max-width: 1400px; /* PCでの最大幅を調整 */
    margin: 0 auto;
    padding: 0 20px;
}

.sub-image {
    width: 100%;
}

.sub-image img {
    width: 100%; /* コンテナ幅いっぱいに拡大縮小 */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(93, 64, 55, 0.15);
    transition: transform 0.3s ease;
}

.poster-link:hover img {
    transform: scale(1.01); /* ホバー時にわずかに拡大してインタラクティブに */
}

/* SNSシェア */
.sns-share-section {
    padding: 60px 0;
    background-color: #fff3e0;
    text-align: center;
}

.sns-share-section h3 {
    margin-bottom: 30px;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.share-btn {
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(93, 64, 55, 0.15);
    transition: transform 0.2s;
}

.share-btn:hover { transform: translateY(-3px); }

.twitter-btn { background-color: #000; }
.facebook-btn { background-color: #1877F2; }
.line-btn { background-color: #00C300; }

/* フッター */
footer {
    background-color: #4e342e;
    color: #fff;
    text-align: center;
    padding: 40px 0;
    font-size: 0.9em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .container, .sub-image-full-container { padding: 0 20px; }
    .hero-image-container img { border-radius: 0; }
    .content-section h2 { font-size: 1.8em; }
    .impact-message { font-size: 2.2em !important; }
    .content-section p, .extra-links-text p { font-size: 1.1em; text-align: left; max-width: 100%; }
    .content-image img { max-width: 100%; border-width: 3px; }
    .share-buttons { flex-direction: column; align-items: center; }
    .share-btn { width: 85%; }
    .mokuji-list { padding-left: 20px; } /* スマホでの目次調整 */
}

/* 画像保存防止（スマホ長押し含む） */
img {
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
}

/* SNSシェアボタンなどのリンク機能は、画像(img)の上の記述で
   クリック判定が透過して親要素(aタグ)に伝わるため、
   基本的には問題なく動作します。 */