/* ========================================
   あらすじセクション（.ema-synopsis-container）
======================================== */

/* ▼ コンテナ全体のスタイル設定（背景画像 or 飾り枠） */
.ema-synopsis-container {
    position: relative;                     /* 背景画像や擬似要素の配置基準に */
    padding: 2em;                           /* 内側の余白 */
    margin: 150px auto;                     /* 上下に大きめの間隔、中央揃え */
    max-width: 900px;                       /* 最大幅 */
    width: 86%;                             /* 画面幅に応じたレスポンシブ設定 */
    color: #2a4c1c;                         /* テキストの基本色 */
    font-family: 'Noto Serif JP', serif;    /* フォント指定 */
    line-height: 1.8;                       /* 通常行間 */
    z-index: 30;                            /* 他要素より前面に出す */
    overflow: hidden;                       /* 子要素のはみ出しを隠す */
}

/* ▼ 背景イラスト（PC表示時に中央配置される装飾） */
.ema-decoration {
    position: absolute;
    top: 53%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);       /* 中央揃え */
    opacity: 0.4;                            /* 薄くして読みやすく */
    z-index: -1;                             /* 背景として配置 */
}

/* ▼ 飾り枠（角の線）：デフォルトは非表示、スマホのみ表示用 */
.ema-synopsis-container::before,
.ema-synopsis-container::after {
    content: '';
    width: 20px;                             /* 飾り線の横幅 */
    height: 30px;                            /* 飾り線の縦幅 */
    position: absolute;
    display: none;                           /* スマホでのみ表示 */
    --corner-offset: 10px;                    /* 横位置の調整が必要な場合にカスタム可能 */
}

/* 左上の飾り枠 */
.ema-synopsis-container::before {
    border-left: solid 1px #5767bf;
    border-top: solid 1px #5767bf;
    top: 0;
    left: var(--corner-offset, 0px);         /* 横位置を可変に（デフォルト0px） */
}

/* 右下の飾り枠 */
.ema-synopsis-container::after {
    border-right: solid 1px #5767bf;
    border-bottom: solid 1px #5767bf;
    bottom: 0;
    right: var(--corner-offset, 0px);        /* 横位置を可変に（デフォルト0px） */
}

/* ▼ テキスト要素の共通スタイル */
.ema-title,
.ema-title-title,
.ema-content {
    margin: 0.5em 0;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    line-height: 2.3;
}

/* タイトル（「あらすじ」） */
.ema-title {
    font-size: 2.3em;
}

/* サブタイトル（「偶然狐の嫁入りをしてしまったのだが。」） */
.ema-title-title {
    font-size: 1.8em;
}

/* 本文（あらすじの本文） */
.ema-content {
    font-size: 1.3em;
}

/* ========================================
   スマートフォン対応（768px以下）
======================================== */
@media (max-width: 768px) {
    .ema-synopsis-container {
        padding: 1em;
        margin: 30px auto;
        width: 92%;
        line-height: 1.7;
    }

    .ema-decoration {
        display: none;                       /* 背景画像はスマホで非表示に */
    }

    .ema-synopsis-container::before,
    .ema-synopsis-container::after {
        display: inline-block;              /* 飾り枠をスマホで表示 */
    }
/* タイトル（「あらすじ」） */
    .ema-title {
        font-size: 1.6em;
    }
/* サブタイトル（「偶然狐の嫁入りをしてしまったのだが。」） */
    .ema-title-title {
        font-size: 1.1em;
    }
/* 本文（あらすじの本文） */
    .ema-content {
        font-size: 1.1em;
        line-height: 2;
    }
}