/*
Theme Name: MyTheme
Author: あなたの名前
Description: ホーム＋ブログ＋背景切り替え
Version: 1.0
*/

main {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

body {
  font-family: "Zen Kaku Gothic New" !important; /* ←修正：位置を正しく */
  line-height: 1.8;
  color: #c0ffee; /* テキスト色 */
  background-color: #fff; /* デフォルト（トップページなど） */
}

a {
  color: #c0ffee;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Blogページ専用：背景を黒に、文字を白に */
.blog {
  background-color: #c0ffee !important;
}


/* 背景エリア */
#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  transition: background-image 0.6s ease-in-out;
  z-index: -1;
  cursor: pointer;
}

main ul {
  list-style: none;   /* 「・」を消す */
  padding-left: 0;
  margin-left: 0;
}

/* ===== ヘッダー上部（タイトル＋電光掲示板） ===== */
.header-top {
  display: flex;
  align-items: baseline; 
  gap: 10rem;             /* タイトルとテキストの間に少し余白 */
  overflow: hidden;
  white-space: nowrap;
}

/* サイトタイトル */

.site-title {
  margin: 0;
  padding: 0;
}

.site-title a {
  font-size: 1.8rem;
  text-decoration: none;
  color: #c0ffee;        /* あなたのテーマ色 */
  font-weight: bold;
}

/* ===== 電光掲示板部分 ===== */
.ticker {
  flex: 1;               /* 残りスペースいっぱいに広がる */
  overflow: hidden;
  position: relative;
  height: 2rem;
}

.ticker__inner {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 20s linear infinite;
  color: #c0ffee;           /* 緑（変更可：#fff などでもOK） */
  font-weight: bold;
  font-size: 0.9rem;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}


/* ===== About（自己紹介）ページ専用スタイル ===== */
body.post-name-about {
  background-color: #000 !important;
}


main h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  line-height: 1;
}

body.single,
body.single-post {
  background-color: #522f60;   
}

.pagination .page-numbers.current {
  background-color: #c0ffee;
  color: #000;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* === produce ページ専用 全画面背景 === */
body.page-template-produce {
  background: url('http://www.towaie-itsuka.com/wp-content/uploads/2025/07/img_0219-1.jpg') no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-color: #000;
  color: #fff;
}

/* mainの背景を透明に（背景が透けるように） */
body.page-template-produce main {
  background: transparent !important;
}

/* ヘッダー・フッターを透過させる */
body.page-template-produce header,
body.page-template-produce footer {
  background: transparent !important;
  box-shadow: none !important;
}

/* 投稿一覧（ブログトップ）だけ背景を当てる */
body.blog {
  background: url('http://www.towaie-itsuka.com/wp-content/uploads/2025/05/KT003191-scaled.jpg')
              no-repeat center center fixed;
  background-size: cover;
  background-color: #000;
  color: #c0ffee;
}

/* フェード演出 */
html.fade-in {
  opacity: 1;
  transition: opacity .35s ease;
}
html.fade-out {
  opacity: 0;
  transition: opacity .25s ease;
}


/* === singleページ専用 背景画像 === */
body.single,
body.single-post {
  background: url('http://www.towaie-itsuka.com/wp-content/uploads/2025/05/KT003191-scaled.jpg')
              no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-color: #000;
  color: #c0ffee;
}