/*
Theme Name:  Sydney Child
Theme URI:
Description: Sydney の子テーマ
Author:
Template:    sydney
Version:     1.0.0
Text Domain: sydney-child
*/

/* ============================================================
   Smash Balloon Instagram Feed — Sydneyテーマとの競合修正
   ============================================================

   対象プラグイン : Instagram Feed (Smash Balloon) / #sb_instagram
   対象テーマ     : Sydney (親テーマ) / css/styles.css
   修正日         : 2026-04-14

   ────────────────────────────────────────────────────────────
   問題1: .entry-content > * { margin-bottom: 1.5em; }
          フィードコンテナの直下に不要な余白が生まれる
   ──────────────────────────────────────────────────────────── */
.entry-content > #sb_instagram,
.entry-content > p > #sb_instagram {
    margin-bottom: 0;
}

/* ────────────────────────────────────────────────────────────
   問題2: .hentry .post-content { overflow: hidden; }
          ホバー時の .sbi_link オーバーレイ（position:absolute）が
          親の overflow:hidden によってクリップされる
   ──────────────────────────────────────────────────────────── */
.hentry .post-content #sb_instagram {
    overflow: visible;
}

/* ────────────────────────────────────────────────────────────
   問題3: img { height: auto; }
          グリッドセル内の写真が正方形を保てなくなる場合がある。
          object-fit: cover で aspect-ratio を維持しつつ填充する。
   ──────────────────────────────────────────────────────────── */
#sb_instagram .sbi_photo_wrap,
#sb_instagram .sbi_photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

#sb_instagram .sbi_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Sydney の height:auto を明示的に上書き */
    height: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   問題4: a:hover { color: #443f3f; }
          ホバーオーバーレイ (.sbi_link) 内の白テキストが
          テーマのリンクホバー色で上書きされる
   ──────────────────────────────────────────────────────────── */
#sb_instagram a:hover,
#sb_instagram a:focus,
#sb_instagram .sbi_link a:hover,
#sb_instagram .sbi_link a:focus {
    color: #fff;
    outline: none;
}

/* ────────────────────────────────────────────────────────────
   問題5: sticky ヘッダーの z-index: 999 と
          ライトボックス (#sbi_lightbox) の重なり順が逆転する
   ──────────────────────────────────────────────────────────── */
#sbi_lightbox {
    z-index: 1000000;
}

/* ────────────────────────────────────────────────────────────
   問題6: h3 { margin: 10px 0 24px; }
          フィードヘッダー内の h3（アカウント名）に
          不要な下マージンが付く
   ──────────────────────────────────────────────────────────── */
#sb_instagram .sb_instagram_header h3,
.sb_instagram_header h3 {
    margin: 0;
    padding: 0;
}

/* ────────────────────────────────────────────────────────────
   問題7: .no-sidebar .page-wrap { overflow-x: hidden; }
          フィードが横方向にはみ出すと切れる。
          フィード自体は 100% 幅に収まるよう明示する。
   ──────────────────────────────────────────────────────────── */
#sb_instagram {
    max-width: 100%;
    box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────────
   補足: Elementor ウィジェットコンテナ内でのフィード幅
          .elementor-widget-container に padding が付いている場合も
          フィードが width:100% で正しく広がるよう保証する
   ──────────────────────────────────────────────────────────── */
.elementor-widget-container > #sb_instagram {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════
   中高生クラス (youth-class) ページ専用スタイル
   ════════════════════════════════════════════════════════════ */

/* ── CTA ボタン ── */
.yc-btn {
    display: inline-block;
    background-color: #56C5C7;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.yc-btn:hover {
    background-color: #3ba8aa;
    color: #0f172a;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(86, 197, 199, 0.35);
}

/* ── セクション共通余白 ── */
.yc-hero,
.yc-concept,
.yc-feature,
.yc-stage,
.yc-detail {
    padding: 72px 24px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* ── CTA セクション ── */
.yc-cta {
    text-align: center;
    background-color: #f0fafa;
    padding: 80px 24px;
}

.yc-cta h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: 16px;
}

/* ── コンセプト items ── */
.yc-concept__item {
    border-left: 4px solid #56C5C7;
    padding-left: 24px;
    margin-bottom: 48px;
}

.yc-concept__item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

/* ── 募集詳細テーブル ── */
.yc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
}

.yc-table th,
.yc-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.yc-table th {
    width: 36%;
    color: #6b7280;
    font-weight: 500;
    background-color: #f9fafb;
}

.yc-table td {
    color: #111827;
    font-weight: 600;
}

/* ── 注釈テキスト ── */
.yc-note {
    font-size: 0.82rem;
    color: #9ca3af;
    margin-top: 8px;
}

/* ── eyebrow ラベル ── */
.yc-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #56C5C7;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── Feature tagline ── */
.yc-feature__sub {
    font-size: 1.1rem;
    color: #4b5563;
    margin-top: 8px;
}

/* ── STAGE 写真2枚の横幅修正 ── */
/*
   対象: elementor-element-2488377（中間発表会・発表会の 2カラムグリッド）
   問題: Elementor の image-box が figure を inline-block で描画するため
         width:100% が効かず、上の .yc-stage テキストエリアより狭く見える
   修正: !important で Elementor のデフォルト CSS を上書きし、
         figure・img をブロック要素として 100% 幅に統一する
*/
.elementor-element-2488377 .elementor-image-box-wrapper {
    width: 100%;
}

.elementor-element-2488377 .elementor-image-box-img {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

.elementor-element-2488377 .elementor-image-box-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ── 見出しデザインルール（H2 相当 / 標準の約 150%・Bold） ── */
.yc-section-title,
.yc-concept h2,
.yc-feature h2,
.yc-stage h2,
.yc-detail h2 {
    font-size: clamp(1.8rem, 4vw, 2.625rem); /* 標準 H2（~1.75rem）の約 150% */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #111827;
    margin-bottom: 32px; /* 見出し直下の余白を広げ、文字の詰まりを解消 */
}

/* ── サブ見出し・見出し直下の p との余白 ── */
.yc-section-subtitle,
.yc-concept h2 + p,
.yc-feature h2 + p,
.yc-stage h2 + p,
.yc-detail h2 + p {
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.9;
}

/* ── レスポンシブ ── */
@media (max-width: 600px) {
    .yc-hero,
    .yc-concept,
    .yc-feature,
    .yc-stage,
    .yc-detail {
        padding: 48px 20px;
    }

    .yc-btn {
        width: 100%;
        text-align: center;
        padding: 16px 24px;
    }

    .yc-table th {
        width: 40%;
        font-size: 0.85rem;
    }

    .yc-table td {
        font-size: 0.85rem;
    }
}