@charset "utf-8";

/* 英語のサブタイトルを先頭に、固定ページのページヘッダーのタイトルとサブタイトルを横に並べるスタイル */
body.page .page-header-inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0 1em;
    flex-wrap: wrap;
}
body.page .page-header-subtitle {
    font-family: Hiragino Mincho ProN,"游明朝",serif;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
}
body.page:has(.page-header-subtitle) h1.page-header-title {
    font-size: 1.35rem;
    color: #cccccc; /* サイトに合わせてカラーコードを書き換えてください。 */
}

/* タイトル、サブタイトル（投稿の場合は投稿日も）が時間差でフェードイン */
/* ※これは、固定ページ等で英語のサブタイトルを先頭に配置しているサイト向けのコードです。 */
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
body:is(.page, .blog) .page-header-inner.container .page-header-subtitle {
  animation: fadeIn 1s ease both 0s;
}
body .page-header-inner.container h1.page-header-title {
  animation: fadeIn 1s ease both 0.15s;
}
body .page-header-inner.container .page-header-subtitle {
  animation: fadeIn 1s ease both 0.3s;
}
body .page-header-inner.container .entry-meta {
  animation: fadeIn 1s ease both 0.45s;
}