/* ヘッダーのスタイル */
header {
    background-color: #2C8F4E; /* キィニチっぽい緑色 */
    padding: 20px;
    text-align: center;
    color: white;
    font-size: 31px;  /* 少し文字を大きく変更 */
}

/* text-content 内の p タグの文字サイズを少し大きくする */
.text-content p {
    font-size: 18px; /* 元々のサイズが16pxの場合、少し大きく */
    line-height: 1.6; /* 行間を適度に広げることで可読性を向上 */
}

/* header タグの文字サイズを少し大きくする */
header {
    font-size: 36px; /* 元々のサイズが31pxの場合、少し大きく */
}

/* メインコンテンツ */
main {
    padding: 20px;
}

/* キャラクター情報セクションのh1タグ */
.character-info h1 {
    font-size: 32px;  /* 文字サイズを大きく */
}

.character-details p strong {
    font-size: 20px; /* h3と同じ大きさに設定 */
}

.character-details p {
    font-size: 18px; /* 元々のサイズが16pxの場合、少し大きく */
    line-height: 1.6; /* 行間を適度に広げることで可読性を向上 */
}

/* 能力と戦術セクションのh2タグ */
.abilities h2 {
    font-size: 32px;  /* h1と同じ大きさに設定 */
}

.text-content p strong {
    font-size: 23px; /* 少し大きくする */
}

/* text-content 内の p タグの文字サイズを少し大きくする */
.text-content p {
    font-size: 18px; /* 元々のサイズが16pxの場合、少し大きく */
    line-height: 1.6; /* 行間を適度に広げることで可読性を向上 */
}

/* エピソードセクションのh3タグ */
.episode h3 {
    font-size: 32px;  /* h1と同じ大きさに設定 */
}

/* エピソードセクション */
.episode-content {
    display: flex;
    gap: 20px;
}

.episode-text {
    max-width: 60%;
}

.speech-bubble p {
    font-size: 18px; /* 元々のサイズが16pxの場合、少し大きく */
    line-height: 1.6; /* 行間を適度に広げることで可読性を向上 */
}

.episode-image {
    flex-shrink: 0;
    max-width: 35%;
}

.episode-image img {
    width: 50%;  /* 画像の幅を80%に縮小 */
    height: auto;
    border-radius: 8px;
}

/* 吹き出しのスタイル */
.speech-bubble {
    position: relative;
    background-color: #f1f1f1;
    padding: 15px;
    border-radius: 15px;
    font-size: 16px;
    max-width: 70%;
    margin-top: 20px;
    line-height: 1.5;
    border: 3px solid #2C8F4E;  /* ヘッダーと同じ緑色で枠線を追加 */
}

.speech-bubble:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;   /* 三角形の上辺を少し大きく */
    border-bottom: 18px solid transparent;  /* 三角形の下辺を少し大きく */
    border-left: 18px solid #2C8F4E;    /* 三角形の縁をヘッダーと同じ緑色に変更 */
    transform: translateY(-50%);
}

/* 動画のスタイル */
.video-content iframe {
    width: 100%;
    height: 500px; /* 高さを500pxに指定 */
    max-width: 100%; /* 親要素に合わせてサイズ調整 */
    border: none; /* 枠線なし */
}

/* スクロールアニメーションのスタイル */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

/* アハウの画像のアニメーション */
#ahau-image {
    transition: transform 0.5s ease-in-out;
}

#ahau-image:hover {
    transform: scale(1.1);
}