/*
Theme Name: Feel2025 Theme
Author: Ruka
Author URI: https://design.pon-poo.com  
Description: A custom theme for Uses Bootstrap 5.
Version: 1.0.5
*/

/* --- CSSカスタムプロパティ (Variables) --- */
/* Bootstrap 5のデフォルト変数を補完・上書きする形で定義 */
:root {
    --bs-primary: #0d6efd; /* Bootstrapのプライマリカラー */
    --bs-secondary: #6c757d; /* Bootstrapのセカンダリカラー */
    --bs-accent: #3498db; /* カスタムアクセントカラー */
    --bs-dark-text: #212529; /* Bootstrapのデフォルトテキストカラー */
    --bs-light-bg: #f8f9fa; /* Bootstrapのライト背景色 */
    --bs-border-color: #dee2e6; /* Bootstrapのボーダーカラー */

    /* カスタムフォント (Google Fontsからの読み込みを前提) */
    --font-family-base: 'Noto Sans JP', 'Lato', sans-serif;
    --font-family-heading: 'Montserrat', 'Noto Sans JP', sans-serif;
    --font-family-code: 'Source Code Pro', monospace;
}

/* --- Base Styles --- */
html {
    font-size: 16px; /* remの基準となる基本フォントサイズ */
}

body {
    font-family: var(--font-family-base);
    line-height: 1.6; /* 読みやすさのためline-heightを指定 */
    color: var(--bs-dark-text);
    background-color: var(--bs-light-bg); /* 少し明るめの背景 */
    margin: 0; /* BootstrapのRebootが設定済みだが念のため */
    padding: 0;
}

/* リンクの基本スタイルをカスタムプロパティで設定 */
a {
    color: var(--bs-accent); /* カスタムアクセントカラーを使用 */
    text-decoration: none;
    transition: color 0.3s ease-out; /* ホバーアニメーション */
}
a:hover {
    color: #2980b9; /* アクセントカラーの少し濃い色 */
    text-decoration: underline; /* ホバーで下線を表示 */
}

/* --- 画像のレスポンシブ対応と親要素内への収まりを強化 (修正版) --- */
/*
 * 基本ルール: 全ての画像は親要素の幅を超えず、アスペクト比を維持する。
 * これが最も重要なルールです。
 */
img {
    max-width: 100%;
    height: auto;
    display: block;
    vertical-align: middle;
    box-sizing: border-box;
}

/*
 * WordPressのブロックエディタが生成するfigureタグ(.wp-block-image)自体を
 * レスポンシブにします。これにより、figureがコンテナからはみ出すのを防ぎます。
 */
.wp-block-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5em; /* 他の要素との間隔を確保 */
}
.wp-block-image img {
    /* figure の幅に対して100%になるようにします */
    width: 100%;
}


/* WordPressのクラシックエディタや古いコンテンツで使われるキャプション */
.wp-caption {
    max-width: 100% !important; /* WordPressが付与するインラインスタイルに勝つために!importantを追加 */
    height: auto;
    background: #f9f9f9;
    border: 1px solid var(--bs-border-color);
    padding: 10px;
    margin-bottom: 1.5em;
    box-sizing: border-box;
}

.wp-caption img {
   /* キャプションの枠(paddingの内側)いっぱいに広げる */
   width: 100%;
   margin-bottom: 5px; /* 画像とキャプションテキストの間に余白 */
}

.wp-caption-text {
    font-size: 0.9em;
    padding: 5px 0;
    text-align: center;
    color: #666;
    margin: 0;
}

/* WordPressの画像配置クラス */
.alignleft {
    float: left;
    margin: 0.5em 1.5em 0.5em 0;
    max-width: 50%; /* floatさせた画像が幅を取りすぎないように調整 */
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1.5em;
    max-width: 50%; /* floatさせた画像が幅を取りすぎないように調整 */
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none; /* floatをリセット */
}

/* WordPress 5.0以降のブロックエディタ（Gutenberg）で挿入される画像ブロックへの対応 */
.wp-block-image .alignleft,
.wp-block-image .alignright,
.wp-block-image .aligncenter {
    max-width: 100%; /* alignクラスが付与されてもfigureの幅は保つ */
}


/* --- Header --- */
.site-header .header-image-area img {
    width: 100%; /* ヘッダー画像は常に幅いっぱいに */
    height: auto;
}

.site-header .main-navigation {
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.site-header .main-navigation .navbar-nav .nav-link {
    padding: 10px 20px;
    color: #333;
}
.site-header .main-navigation .navbar-nav .nav-link:hover {
    background-color: #e0e0e0;
}

/* --- Main Content --- */
.site-content {
    padding: 30px 0;
}

.post-entry {
    margin-bottom: 40px;
}
.post-entry .post-thumbnail img {
    /* max-width: 100%; height: auto; は汎用imgルールでカバー */
    margin-bottom: 15px;
}
.post-entry .entry-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.post-entry .entry-title a {
    text-decoration: none;
    color: #333;
}
.post-entry .entry-title a:hover {
    color: var(--bs-accent); /* カスタムアクセントカラーに */
}
.top-widget-area {
    margin-top: 50px;
}

/* --- Sidebar --- */
.widget {
    margin-bottom: 20px;
    background-color: var(--bs-light-bg); /* BS5のライト背景色に合わせる */
    padding: 15px;
    border: 1px solid var(--bs-border-color); /* BS5のボーダーカラーに合わせる */
    border-radius: .25rem; /* BS5の角丸に合わせる */
}

.widget_title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bs-border-color); /* BS5のボーダーカラーに合わせる */
    color: var(--bs-dark-text); /* テキストカラーに合わせる */
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget ul li {
    margin-bottom: 10px;
    border-bottom: 1px dotted #ccc; /* 点線ボーダーはそのまま */
    padding-bottom: 10px;
}
.widget ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- Footer --- */
.site-footer {
    background-color: #333; /* 濃いグレー */
    color: #fff;
    padding: 30px 0;
    text-align: center;
    margin-top: 30px;
}

.footer-navigation {
    margin-bottom: 20px;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px; /* 項目間の余白（上下 左右） */
}

.footer-nav-list li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
}

.footer-nav-list li a:hover {
    text-decoration: underline;
}

.copyright-text {
    margin: 0;
    font-size: 0.85em;
    color: #ccc;
}

/* --- Modern Animations --- */

/* アニメーションの定義 (キーフレーム) */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 1. ヘッダー画像のアニメーション */
.site-header .header-image-area {
  animation-name: fadeInDown;
  animation-duration: 0.8s; /* アニメーションの時間 */
  animation-timing-function: ease-out; /* アニメーションの速度変化 */
  animation-fill-mode: both; /* アニメーション後もスタイルを維持 */
}

/* 2. ナビゲーションメニューの項目を順番にアニメーション */
.main-navigation .navbar-nav .nav-item {
  opacity: 0; /* 初期状態は透明に */
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* 各項目に遅延を設定して順番に表示させる */
.main-navigation .navbar-nav .nav-item:nth-child(1) { animation-delay: 0.3s; }
.main-navigation .navbar-nav .nav-item:nth-child(2) { animation-delay: 0.4s; }
.main-navigation .navbar-nav .nav-item:nth-child(3) { animation-delay: 0.5s; }
.main-navigation .navbar-nav .nav-item:nth-child(4) { animation-delay: 0.6s; }
.main-navigation .navbar-nav .nav-item:nth-child(5) { animation-delay: 0.7s; }
/* メニュー項目がさらに多い場合は、ここに追加してください */


/* 3. ナビゲーションリンクのホバーアニメーション */
.main-navigation .navbar-nav .nav-link {
  position: relative; /* 擬似要素の位置の基準にする */
  text-decoration: none;
  
}

/* 下線の元となる擬似要素を作成 */
.main-navigation .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 5px; /* 下線の位置 */
  left: 0;
  width: 100%;
  height: 2px; /* 下線の太さ */
  background-color: #333; /* 下線の色 */
  transform: scaleX(0); /* 初期状態では幅を0にする */
  transform-origin: center; /* 中央を基点に変化させる */
  transition: transform 0.3s ease-out; /* なめらかな変化 */
}

/* マウスホバー時に下線を表示（幅を100%に戻す） */
.main-navigation .navbar-nav .nav-link:hover::after {
  transform: scaleX(1);
}


/* --- Form & Utility Styles --- */

/* Contact Form 7のHoneypotフィールドを非表示にする */
.wpcf7-form-control.wpcf7-hp-field { /* Contact Form 7のクラス名に合わせる */
  display: none !important; /* !important で強制的に非表示 */
}

/* カスタムフォームの確認・完了画面でヘッダーとフッターを非表示にする */
body.form-confirm .site-header,
body.form-confirm .site-footer,
body.form-complete .site-header,
body.form-complete .site-footer {
  display: none !important;
}

/* フォームのコンテナがヘッダー非表示時に上に詰まるのを防ぐ */
body.form-confirm #content.site-content,
body.form-complete {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* もしパンくずリストも非表示にする場合 */
body.form-confirm .aioseo-breadcrumbs,
body.form-complete .aioseo-breadcrumbs {
    display: none !important;
}

/* 全画面表示の背景色 */
body.form-confirm,
body.form-complete {
    background-color: #f8f9fa;
}

/* フォームをページの中央に配置するための調整（お好みで） */
body.form-confirm .site,
body.form-complete .site {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
}

/* --- Modern Headings (H1-H6) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading); /* 見出し用フォント */
    line-height: 1.2;
    font-weight: 700;
    color: var(--bs-dark-text); /* Bootstrapのデフォルトをベースに */
    margin-top: 2em; /* Bootstrapのデフォルトマージンを上書き */
    margin-bottom: 0.8em;
}

/* H1 (最重要見出し) */
h1 {
    font-size: clamp(2.5rem, 6vw, 4rem); /* レスポンシブにサイズ調整 */
    font-weight: 800;
    text-align: center;
    color: #1a2a3a; /* さらに濃い色 */
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    position: relative;
    letter-spacing: -0.03em;
}

h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--bs-accent); /* カスタムアクセントカラー */
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

/* H2 */
h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    padding-left: 1rem;
    border-left: 6px solid var(--bs-accent); /* カスタムアクセントカラー */
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* H3 */
h3 {
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    border-bottom: 1px solid var(--bs-border-color); /* Bootstrapのボーダーカラー */
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* H4 */
h4 {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    color: #4a627a; /* やや薄めの色 */
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

/* H5 */
h5 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: #5d748f;
    margin-top: 1.8rem;
    margin-bottom: 0.7rem;
}

/* H6 */
h6 {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: #7a8fa6;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
}

/* --- Paragraph (p) --- */
p {
    margin-bottom: 1.5em; /* BS5のデフォルト(1rem)より少し広めに */
    font-size: 1rem; /* BS5のデフォルトと同じ */
}

/* --- Code Blocks (pre/code) --- */
pre {
    background-color: var(--bs-light-bg);
    padding: 1em;
    border-radius: .25rem;
    overflow-x: auto;
    font-family: var(--font-family-code);
    font-size: 0.9em;
    border: 1px solid var(--bs-border-color);
}
code {
    font-family: var(--font-family-code);
    background-color: #e9ecef;
    padding: 0.2em 0.4em;
    border-radius: .25rem;
}

/*
 * ===================================================================
 * 【修正】ナビゲーションバーの重なり順を修正
 * ===================================================================
 */

/*
 * ヘッダー全体(.site-header)に z-index を設定し、
 * メインコンテンツ(.site-content)よりも前面に表示されるようにします。
 * position: relative; は z-index を有効にするために必要です。
 */
.site-header {
    position: relative;
    z-index: 1030; /* Bootstrapのドロップダウンのz-index(1000)やモーダル(1050)を参考に、十分な値を設定 */
}

/*
 * メインコンテンツエリアに position: relative を指定し、
 * 意図せずヘッダーの上に重なるのを防ぎます。
 * z-indexは指定しない（または0）ことで、ヘッダーより背面に配置されます。
 */
.site-content {
    position: relative;
    z-index: 1;
}