/* インスタグラム埋め込み用スタイル */

/* インスタグラム埋め込みコンテナ */
.instagram-embed {
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* インスタグラム埋め込みラッパー */
.instagram-wrapper {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
}

/* インスタグラム埋め込み内のblockquote要素 */
.instagram-embed blockquote {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

/* インスタグラム埋め込み内のiframe要素 */
.instagram-embed iframe {
    max-width: 100% !important;
    width: 540px !important;
    margin: 0 auto;
}

/* サイドバイサイドレイアウト用のスタイル */
.instagram-embed.side-by-side {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
}

.instagram-embed.side-by-side .instagram-wrapper {
    flex: 0 0 540px; /* 固定幅 */
    max-width: 540px;
}

.instagram-embed.side-by-side .instagram-caption {
    flex: 1;
    margin-top: 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .instagram-embed.side-by-side {
        flex-direction: column;
    }
    
    .instagram-embed.side-by-side .instagram-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .instagram-embed.side-by-side .instagram-caption {
        width: 100%;
    }
}

/* インスタグラムキャプション */
.instagram-caption {
    margin: 10px 0 0 0;
    font-size: 0.9em;
    color: #E4405F;
    font-weight: bold;
    font-style: italic;
}

/* インスタグラム埋め込みエラー */
.instagram-embed-error {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
}

.instagram-embed-error p {
    margin: 0;
    color: #856404;
    font-weight: bold;
}

.error-detail {
    font-size: 0.8em;
    font-weight: normal;
    margin-top: 5px;
    color: #6c757d;
}

/* 読み込み中表示 */
.instagram-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: #f0f0f0;
    border-radius: 8px;
    margin: 15px 0;
    border: 1px dashed #dee2e6;
}

.instagram-loading span {
    color: #6c757d;
    font-style: italic;
    font-size: 0.9em;
}

/* 再読み込みボタンのスタイル */
.retry-button {
    background-color: #0c0675;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.retry-button:hover {
    background-color: #0a0559;
}

/* Instagram処理完了後のアニメーション */
.instagram-embed.loaded {
    animation: fadeInScale 0.5s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* スマートフォン対応 */
@media (max-width: 480px) {
    .instagram-embed {
        margin: 0;
    }
    
    .instagram-loading {
        padding: 30px 15px;
    }
}

/* プレビュー用のインスタグラム表示 */
.instagram-preview {
    margin: 15px 0; /* 上下に余白 */
    padding: 10px; /* 内側に余白 */
    background-color: #f0f0f0; /* 背景色を少し濃いグレーに */
    border-left: 4px solid #E4405F; /* インスタグラムブランドカラーの左ボーダー */
    border-radius: 4px; /* 角を少し丸く */
}

/* インスタグラム投稿があることを示すノート */
.instagram-note {
    margin: 0 0 10px 0; /* 下部のみ余白 */
    font-size: 0.9em; /* フォントサイズを少し小さく */
    color: #E4405F; /* インスタグラムブランドカラー */
    font-weight: bold; /* 太字 */
}

/* ホームページでのインスタグラム埋め込みプレビュー */
.instagram-embed-preview {
    max-height: 400px; /* 最大高さを制限 */
    overflow: hidden; /* はみ出た部分を隠す */
    border-radius: 4px; /* 角を丸く */
    position: relative; /* 相対位置指定 */
}

.instagram-embed-preview .instagram-wrapper {
    transform: scale(0.8); /* 少し縮小して表示 */
    transform-origin: top center; /* 変形の基準点を上部中央に */
}

.instagram-embed-preview blockquote {
    margin: 0 auto !important; /* 中央揃え（重要） */
}

/* ニュースカードのスタイル */
.news-card {
    background: #f0f0f0; /* 背景色を少し濃いグレーに */
    border: 1px solid #ddd; /* 薄いグレーのボーダー */
    border-radius: 8px; /* 角を丸く */
    margin-bottom: 30px; /* 下部に余白 */
    padding: 20px; /* 内側に余白 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影を追加 */
    transition: box-shadow 0.3s ease; /* 影の変化をアニメーション */
}

.news-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* ホバー時の影を強く */
}

/* ニュースヘッダー */
.news-header {
    border-bottom: 1px solid #eee; /* 下部にボーダー */
    padding-bottom: 15px; /* 下部に余白 */
    margin-bottom: 15px; /* 下部に余白 */
}

.news-title {
    color: #0c0675; /* 紺色に設定 */
    margin-bottom: 10px; /* 下部に余白 */
    font-size: 1.4em; /* フォントサイズを大きく */
    line-height: 1.4; /* 行間を設定 */
}

/* ニュースメタ情報 */
.news-meta {
    display: flex; /* フレックスボックスレイアウト */
    justify-content: space-between; /* 両端寄せ */
    align-items: center; /* 縦方向の中央揃え */
    font-size: 0.9em; /* フォントサイズを小さく */
    color: #666; /* 文字色をグレーに */
}

.news-date {
    font-weight: bold; /* 太字 */
}

.news-author {
    font-style: italic; /* 斜体 */
}

/* ニュース本文 */
.news-content {
    line-height: 1.6; /* 行間を設定 */
    color: #333; /* 文字色 */
}

.news-content p {
    margin-bottom: 15px; /* 段落の下部に余白 */
}

/* エラーメッセージ用のスタイル */
.error-message {
    text-align: center; /* 中央揃え */
    color: #d32f2f; /* エラー色（赤） */
    font-weight: bold; /* 太字 */
    padding: 20px; /* 内側に余白 */
    background-color: #ffebee; /* 薄い赤の背景色 */
    border: 1px solid #ffcdd2; /* 薄い赤のボーダー */
    border-radius: 4px; /* 角を丸く */
}

/* お知らせがない場合のメッセージ */
.no-news {
    text-align: center; /* 中央揃え */
    color: #666; /* グレーの文字色 */
    font-style: italic; /* 斜体 */
    padding: 40px 20px; /* 内側に余白 */
}

/* Instagram埋め込み強制スタイル（画像表示問題解決用） */
.instagram-embed blockquote.instagram-media {
    background: white;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15);
    margin: 1px auto;
    max-width: 540px;
    min-width: 326px;
    padding: 0;
    width: calc(100% - 2px);
}

/* Instagram iframe要素の強制設定 */
.instagram-embed iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 3px;
}

/* Instagram画像要素の強制表示 */
.instagram-embed img {
    max-width: 100%;
    height: auto;
    display: block;
}