/**
 * Theme Name: cheechee
 * Template: astra
 */

/* =========================================================
   Sticky Header (固定ヘッダー)
   ========================================================= */

/* ヘッダー基本設定
   フェード: 背景色・影・ボーダー色・文字色・透明度を 0.4s ease-in-out でなめらかに切替 */
#masthead,
#masthead *,
#ast-desktop-header,
#ast-desktop-header *,
#ast-mobile-header,
#ast-mobile-header * {
    transition-property: background-color, box-shadow, border-color, color, fill, stroke, opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
}

#masthead {
    width: 100%;
    z-index: 999;
}

/* ▼ 下層ページ（非透過）: 常に固定表示 ▼ */
.cheechee-sticky:not(.ast-theme-transparent-header) #masthead {
    position: fixed;
    top: 0;
    left: 0;
}

/* ▼ トップページ（透過）: 初期は絶対配置でコンテンツに重ねる → Astra標準透過挙動と同じ ▼ */
.cheechee-sticky.ast-theme-transparent-header:not(.cheechee-scrolled) #masthead {
    position: absolute;
    top: 0;
    left: 0;
}

/* ▼ トップページ（透過）: スクロール開始後は固定表示で追従 ▼ */
.cheechee-sticky.ast-theme-transparent-header.cheechee-scrolled #masthead {
    position: fixed;
    top: 0;
    left: 0;
}

/* 管理バーが表示されている場合の調整 (ログイン時) */
.admin-bar.cheechee-sticky:not(.ast-theme-transparent-header) #masthead,
.admin-bar.cheechee-sticky.ast-theme-transparent-header.cheechee-scrolled #masthead {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar.cheechee-sticky:not(.ast-theme-transparent-header) #masthead,
    .admin-bar.cheechee-sticky.ast-theme-transparent-header.cheechee-scrolled #masthead {
        top: 46px;
    }
}

/* 固定ヘッダー分のコンテンツ上部余白
   - 下層ページ: 常に余白あり（fixedで追従するため）
   - トップページ透過時: 余白なし（absolute配置でヘッダーがコンテンツに上から重なる = Astra標準透過と同じ）
   - トップページスクロール後: 余白あり（fixed切替後にコンテンツ先頭がヘッダー下に隠れないように）
   ※ padding-topはヘッダー背景のトランジションと同じ時間をかけてなめらかに切替（JS scrollTo補正の代替） */
.cheechee-sticky:not(.ast-theme-transparent-header) #page,
.cheechee-sticky.ast-theme-transparent-header.cheechee-scrolled #page {
    padding-top: var(--cheechee-header-height, 80px);
    transition: padding-top 0.6s ease-in-out;
}

/* トップページ透過時: #page のパディングを明示的に0にしてコンテンツをヘッダー下に潜り込ませる */
.cheechee-sticky.ast-theme-transparent-header:not(.cheechee-scrolled) #page {
    padding-top: 0;
    transition: padding-top 0.6s ease-in-out;
}

/* =========================================================
   スクロール時のヘッダースタイル切替
   ========================================================= */

/* --- 透過ヘッダーページ (トップページ等) --- */

/* ▼ 初期状態（未スクロール）: 背景を完全に透明に ▼ */
body.ast-theme-transparent-header:not(.cheechee-scrolled) #masthead,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-desktop-header,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-desktop-header .main-header-bar,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-desktop-header .ast-above-header-bar,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-desktop-header .ast-below-header-bar,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-mobile-header,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-mobile-header .main-header-bar,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-mobile-header .ast-above-header-bar,
body.ast-theme-transparent-header:not(.cheechee-scrolled) #ast-mobile-header .ast-below-header-bar {
    background-color: transparent;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

/* ▼ スクロール開始後: 背景100%不透明・影付き 通常ヘッダーと同じ見た目に ▼ */
.cheechee-scrolled.ast-theme-transparent-header #masthead {
    background-color: var(--cheechee-header-bg, var(--ast-global-color-10, rgba(68,1,106,1))) !important;
    background: var(--cheechee-header-bg, var(--ast-global-color-10, rgba(68,1,106,1))) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* スクロール後: デスクトップヘッダー背景色 100% 不透明上書き */
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .main-header-bar,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-above-header-bar,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-below-header-bar {
    background-color: var(--cheechee-header-bg, var(--ast-global-color-10, rgba(68,1,106,1))) !important;
    background: var(--cheechee-header-bg, var(--ast-global-color-10, rgba(68,1,106,1))) !important;
    background-image: none !important;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* スクロール後: モバイルヘッダー背景色 100% 不透明上書き */
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .main-header-bar,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .ast-above-header-bar,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .ast-below-header-bar {
    background-color: var(--cheechee-header-bg, var(--ast-global-color-10, rgba(68,1,106,1))) !important;
    background: var(--cheechee-header-bg, var(--ast-global-color-10, rgba(68,1,106,1))) !important;
    background-image: none !important;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* スクロール後: メニュー・サイトタイトル色をAstraカスタマイザーの設定値を優先して上書き
   → functions.php で --cheechee-menu-text 等のCSS変数にAstra設定値を動的注入
   Astra本体 (dynamic.css) と詳細度を一致・上回るよう .ast-builder-menu-N .menu-item > .menu-link /
   .main-header-menu > .menu-item:hover > .menu-link などのセレクタを列挙。
   通常色/ホバー/アクティブ/カレント 全て !important で確実に上書く。 */

/* メニューリンク 通常色 (.menu-linkクラス + a要素 両対応) */
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-1 .menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-1 .menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-2 .menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-2 .menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-3 .menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-3 .menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .main-header-menu > .menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .main-header-menu > .menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .ast-builder-menu-mobile .menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .ast-builder-menu-mobile .menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .main-header-menu > .menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .main-header-menu > .menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header .main-header-menu .menu-item > .ast-menu-toggle {
    color: var(--cheechee-menu-text, var(--ast-global-color-3, #ffffff)) !important;
}

/* メニューリンク ホバー / アクティブ / カレントメニュー / 先祖メニュー
   ▼ Astra透明ヘッダー動的CSS (inc/addons/transparent-header/classes/dynamic-css/dynamic.css.php L300-L302) と
   同一セレクタ集合体に、先頭に .cheechee-scrolled を追加して詳細度を +1 段上げ、
   Astra本体のホバー/カレント色を !important で強制上書き ▼ */
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item:hover > .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .ast-masthead-custom-menu-items a:hover,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .focus > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .focus > .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-ancestor > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-ancestor > .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-ancestor > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-item > .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .current-menu-ancestor > .ast-menu-toggle,
.cheechee-scrolled.ast-theme-transparent-header .main-header-menu .menu-item:hover > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header .main-header-menu .current-menu-item > .menu-link,
.cheechee-scrolled.ast-theme-transparent-header .main-header-menu .current-menu-ancestor > .menu-link,
/* ↓ 通常の a:hover パターンも念のため網羅（Astraがmenu-link以外のaタグを出力する場合に備え） */
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-1 a:hover,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-2 a:hover,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-3 a:hover,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:hover > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-2 .main-header-menu > .menu-item:hover > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-3 .main-header-menu > .menu-item:hover > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .main-header-menu > .menu-item:hover > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .ast-builder-menu-mobile a:hover,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .main-header-menu > .menu-item:hover > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-1 .current-menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-1 .current-menu-ancestor > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-2 .current-menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .ast-builder-menu-3 .current-menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-desktop-header .main-header-menu > .current-menu-item > a,
.cheechee-scrolled.ast-theme-transparent-header #ast-mobile-header .main-header-menu > .current-menu-item > a {
    color: var(--cheechee-menu-hover, var(--cheechee-menu-active, var(--ast-global-color-0, #ffde59))) !important;
}

/* サイトタイトル色 スクロール後上書き (ast-site-identity内も対象) */
.cheechee-scrolled.ast-theme-transparent-header .ast-site-identity .site-title a,
.cheechee-scrolled.ast-theme-transparent-header .ast-builder-layout-element .ast-site-identity .site-title a,
.cheechee-scrolled.ast-theme-transparent-header .site-title a,
.cheechee-scrolled.ast-theme-transparent-header .site-title a:hover {
    color: var(--cheechee-title-text, var(--cheechee-menu-text, var(--ast-global-color-3, #3a3a3a))) !important;
}

/* サイト説明 スクロール後上書き */
.cheechee-scrolled.ast-theme-transparent-header .ast-site-identity .site-description,
.cheechee-scrolled.ast-theme-transparent-header .site-header .site-description,
.cheechee-scrolled.ast-theme-transparent-header .site-description {
    color: var(--cheechee-desc-text, var(--ast-global-color-2, #7a7a7a)) !important;
}

/* ▼ トップページ透過時（未スクロール）: ロゴ・サイトタイトル全体を非表示 ▼
   ※ サイトタイトルテキスト・カスタムロゴimg・透過ロゴ 全て対象。フェードで消すため opacity 使用 */
.ast-theme-transparent-header:not(.cheechee-scrolled) .site-branding,
.ast-theme-transparent-header:not(.cheechee-scrolled) .ast-site-identity,
.ast-theme-transparent-header:not(.cheechee-scrolled) .site-logo-img,
.ast-theme-transparent-header:not(.cheechee-scrolled) .site-title,
.ast-theme-transparent-header:not(.cheechee-scrolled) .site-description {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ▼ スクロール後: ロゴ・サイトタイトルをフェードで再表示 ▼ */
.cheechee-scrolled.ast-theme-transparent-header .site-branding,
.cheechee-scrolled.ast-theme-transparent-header .ast-site-identity,
.cheechee-scrolled.ast-theme-transparent-header .site-logo-img,
.cheechee-scrolled.ast-theme-transparent-header .site-title,
.cheechee-scrolled.ast-theme-transparent-header .site-description {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 透過ロゴ → 通常ロゴの切替: display:none は transition 不可なので opacity でフェード */
.ast-theme-transparent-header.ast-replace-site-logo-transparent .site-logo-img .custom-logo-link {
    transition: opacity 0.4s ease-in-out !important;
}

/* スクロール後: 透過ロゴ非表示、通常ロゴをフェードで表示 */
.cheechee-scrolled.ast-theme-transparent-header.ast-replace-site-logo-transparent .site-logo-img .transparent-custom-logo {
    opacity: 0;
    display: none;
}

.cheechee-scrolled.ast-theme-transparent-header.ast-replace-site-logo-transparent .site-logo-img .custom-logo-link:not(.transparent-custom-logo) {
    opacity: 1;
    display: inline-block;
}

/* --- 非透過ヘッダーページ (下層ページ等) --- */

/* 下層ページは最初から影付き固定ヘッダー */
body:not(.ast-theme-transparent-header) #masthead {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* アーカイブページのすべてのアイキャッチ画像の比率を変更する */
.archive .post-thumbnail img,
.blog .post-thumbnail img,
.archive [class*="thumb"] img,
.blog [class*="thumb"] img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* お好みで比率を調整 */
    object-fit: cover !important;
}

/* パソコン画面（横幅922px以上）のときに記事一覧を列を変更 */
@media (min-width: 922px) {
    .ast-archive-post,
    .archive #main .ast-row,
    .blog #main .ast-row {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 「3」を「4」にすれば4列になります */
        gap: 30px !important; /* カードとカードの間のすき間（お好みで調整） */
    }

    /* レイアウト崩れを防ぐための調整 */
    .ast-archive-post article,
    .archive #main .ast-row article,
    .blog #main .ast-row article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}


#page h1.page-title,
#page h1.ast-archive-title,
#page h1.entry-title {
    font-family: 'Zen Old Mincho', serif !important;
}
.copi {
    font-family: 'Zen Old Mincho', serif !important;
}
/* Smart Slider 3内のすべてのテキスト要素にZen Old Minchoを強制適用する */
div[id^="n2-ss-"] .n2-font-9a, 
div[id^="n2-ss-"] p[class^="n2-font-"], 
div[id^="n2-ss-"] div[class^="n2-font-"] {
    font-family: 'Zen Old Mincho', serif !important;
}