/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* 404ページ専用のスタイル */
.error-404 {
    text-align: center; /* 中央寄せ */
    padding: 60px 20px;
}

.error-404 .page-title {
    font-weight: bold;       /* 太字 */   
    font-size: 2rem;
    margin-bottom: 20px;
}

.error-404 .page-content p {
    font-size: 1rem;
    margin-bottom: 15px;
}

.error-404 .page-content a:hover {
    text-decoration: underline; /* ホバー時に下線 */
}

/* 404ページの「ホームに戻る」ボタン風リンク */
.back-home-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #F5AF7D; /* 背景はオレンジ系 */
    color: #4d4d4d;             /* 文字色は濃いグレー系 */
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.back-home-btn:hover {
    background-color: #F5AF7D; /* 背景はそのまま */
    color: #4d4d4d;              /* ホバー時の文字色はグレー */
}





.system-notice-title {
  font-size: 1.4em;
  font-weight: 700;
  border-bottom: 2px solid #4d4d4d;
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.system-notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.system-notice-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
  flex-wrap: nowrap; /* 各列を1行に固定 */
}

/* ラベル（完全固定幅で揃える） */
.notice-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px; /* ←完全固定幅に変更 */
  height: 28px; /* 高さも固定で揃える */
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 15px;
  text-align: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.label-release { background-color: #F0795A; }
.label-bug { background-color: #004FA1; }
.label-important { background-color: #E74C3C; }
.label-other { background-color: #7F8C8D; }


.notice-date {
  color: #555;
  font-size: 0.9rem;
  min-width: 90px;
}

.notice-title {
  color: #0073aa;
  text-decoration: none;
  flex: 1;
  transition: color 0.2s ease;
}

.notice-title:hover {
  color: #e67e22;
  text-decoration: underline;
}

/* ボタン部 */
.notice-buttons {
  text-align: center;
  margin-top: 15px;
}

.notice-more-btn {
  padding: 8px 20px;
  font-size: 0.95rem;
  cursor: pointer;
}

.notice-more-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #0073aa;
  text-decoration: underline;
}

/* 初期非表示 */
.hidden-item {
  display: none;
}


/* ===============================
   システムからのお知らせ（整列調整・最終版）
   =============================== */
/* 日付部分 */
.notice-date {
  color: #555;
  font-size: 0.9rem;
  min-width: 100px; /* ←日付の桁数差を吸収 */
  text-align: left;
  flex-shrink: 0;
}



.notice-title:hover {
  color: #e67e22;
  text-decoration: underline;
}

/* ===== スマホ対応（レスポンシブ） ===== */
@media (max-width: 768px) {
  .system-notice-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .notice-label {
    margin-bottom: 2px;
  }

  .notice-date {
    min-width: auto;
  }

  .notice-title {
    width: 100%;
  }
}

/* 投稿ページでヘッダーと見出しの間を詰める */
.single-post #primary.content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ast-container や site-content など上位の余白もリセット */
.single-post .site-content,
.single-post .ast-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 投稿本文（entry-content）の余白も軽く詰める */
.single-post .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* h2（タイトル用）のマージンも微調整 */
.single-post .entry-content .wp-block-heading:first-of-type {
  margin-top: 10px !important; /* 必要なら0でもOK */
}
/* スマホ専用改行 */
br.sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  br.sp-only {
    display: inline;
  }
}

/* 画面左下の既存「戻る」ボタンを消す */
a#return-position-bottom,
.return-btn,
.back-btn,
footer .return-btn,
footer .back-btn {
    display: none !important;
}

/* メニューの切り替え CSS (メニューが両方表示されている場合) */

/* デフォルトでは両方のメニューを非表示にするなどの処理が必要 */
.main-header-menu .staff_menu,
.main-header-menu .parent_menu {
    display: none;
}

/* staffセグメントの時、staff_menuを表示 */
.segment-staff .main-header-menu .staff_menu {
    display: block; /* または flex */
}

/* parentセグメントの時、parent_menuを表示 */
.segment-parent .main-header-menu .parent_menu {
    display: block; /* または flex */
}

/*===============================
2025/12/10追記（FAQのアコーディオンについて） 
===============================*/


/* --- 1. カウンターの初期化 --- */
/* 記事エリア全体で番号をリセット */
body, .entry-content, .post-content {
    counter-reset: faq-count;
}

/* --- 2. アコーディオン全体 --- */
details.faq-accordion {
  margin: 0 0 6px 0;            /* ブロック間の下余白を小さく */
  border-bottom: 1px solid #eee; /* 下線 */
  counter-increment: faq-count; /* 番号を増やす */
  transition: all 0.25s ease;
}

/* 最終要素は下線/余白を消す（好みで） */
details.faq-accordion:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* --- 3. 質問（Q）のデザイン --- */
details.faq-accordion > summary {
  list-style: none !important; /* ▼を消す */
  cursor: pointer;
  position: relative;
  padding-left: 4em; /* Qのための左余白 */
  padding-top: 6px;
  padding-bottom: 6px; /* 高さを詰める */
  font-weight: bold; /* 太字 */
}

/* Chrome/Safari用 ▼消し */
details.faq-accordion > summary::-webkit-details-marker {
  display: none !important;
}

/* ★「Q + 番号」の表示 */
details.faq-accordion > summary::before {
  content: "Q." counter(faq-count);
  color: #cc0000; /* 赤色 */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 6px; /* summary の上下パディングに合わせて微調整 */
}

/* --- 4. 回答（A）のデザイン --- */
/* 「summary（質問）」の直後にある要素（＝回答エリア）をすべて対象にします */
details.faq-accordion > summary + * {
  margin-top: 8px;              /* 間隔を詰める（以前は15px） */
  position: relative; /* Aを配置する基準 */
  padding-left: 4em; /* Aのための左余白 */
  overflow: visible; /* Aが見切れないようにする */
}

/* ★「A + 番号」の表示 */
details.faq-accordion > summary + *::before {
  content: "A." counter(faq-count);
  color: #003399; /* 青色 */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1; /* 最前面に表示 */
}

/* --- 5. アニメーション */
details.faq-accordion > summary + * {
  /* 閉じている状態の初期値を明示 */
  opacity: 0;
  transform: translateY(-6px); /* 動きを短くして速く見せる */
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  will-change: opacity, transform;
}

/* 開いたときに毎回アニメーションするようにトランジションで制御 */
details.faq-accordion[open] > summary + * {
  opacity: 1;
  transform: translateY(0);
}

/* スマホでさらに詰めたい場合 */
@media (max-width: 480px) {
  details.faq-accordion {
  margin-bottom: 4px;
  padding: 6px 0;
  }
  details.faq-accordion > summary,
  details.faq-accordion > summary + * {
  padding-top: 4px;
  padding-bottom: 4px;
  }
  details.faq-accordion > summary::before {
  top: 4px;
  }
}


/* ===============================
    2025 12/15追記（検索窓のデザイン調整）
   =============================== */
/* --- ヘッダー検索ブロック（アイコン・文字重なり修正版） --- */

.my-custom-footer {
    background-color: transparent; /* 背景透明 */
    color: #4d4d4d;                   /* 文字色: 濃いグレー */
    padding: 60px 20px;
    font-size: 14px;
    /* 必要に応じて上部に境界線を追加してください */
    /* border-top: 1px solid #eee; */
}

.my-footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 上部レイアウト (Gridシステム) --- */
.my-footer-top {
    display: grid;
    /* 左(1fr)・中央(auto)・右(1fr) の3カラムに分割 */
    /* これにより左右のスペースが均等になり、真ん中の要素が正確に中央に来ます */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
}

/* --- ロゴエリア --- */

/* ★変更点: 画像サイズの制御 */
.my-footer-logo img {
    width: auto;        /* 幅はなりゆき */
    max-width: 200px;   /* 最大幅を制限 (大きすぎないように) */
    height: auto;       /* 比率を維持 */
    max-height: 80px;   /* 高さの上限も設定しておくと安全 */
    display: block;
}

/* ロゴ未設定時のテキストスタイル */
.no-logo-text {
    font-size: 24px;
    font-weight: bold;
    color: #4d4d4d;
    text-decoration: none;
}
/* --- メニューエリア --- */
.my-footer-nav {
  display: flex;
  justify-content: center; /* 親要素の中央ぞろえ */
}

.my-footer-nav ul.my-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* メニュー項目の間隔 */
}

.my-footer-nav ul.my-footer-menu li a {
  color: #4d4d4d; /* リンク文字色: 濃いグレー */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
  font-size: 16px;
}

.my-footer-nav ul.my-footer-menu li a:hover {
  color: #999; /* ホバー時: 薄いグレー */
}

/* --- 区切り線 --- */
.my-footer-divider {
    height: 1px;
    background-color: #ddd; /* 薄いグレーの線 */
    margin-bottom: 30px;
    width: 100%;
}

/* --- 下部リンクエリア --- */
.my-footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.my-legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.my-legal-links li a {
    color: #666; /* リンク色 */
    text-decoration: none;
}

.my-legal-links li a:hover {
    color: #000; /* ホバー時 */
    text-decoration: underline;
}

/* --- スマホ対応 (左寄せ・レスポンシブ) --- */
@media (max-width: 768px) {
    .my-custom-footer {
        padding-top: 40px;
    }

    .my-footer-top {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* ★変更点1: ロゴとメニューの塊を「左寄せ」にする */
        align-items: flex-start; 
        gap: 0;
        margin-bottom: 40px;
    }
    
    .my-footer-logo, 
    .my-footer-nav {
        grid-column: auto;
        justify-self: auto;
        width: auto;
        font-size: 18px;
    }

    /* ロゴの下のマージン */
    .my-footer-logo {
        margin-bottom: 40px;
    }

    .my-footer-nav ul.my-footer-menu {
        flex-direction: column;
        gap: 20px;
        /* ★変更点2: メニューの文字自体も「左寄せ」にする */
        align-items: flex-start; 
    }
    
    /* 下部リンク（規約など）も左に合わせる場合 */
    .my-footer-bottom {
        flex-direction: column;
        align-items: flex-start; /* 左寄せ */
        gap: 15px;
    }
}

/* ===============================
    2025 12/16追記（検索結果ページのスタイル調整）
   =============================== */

/* 1. 全体のレイアウト：幅をAstra標準(1200px)に広げる */
.my-search-page-container {
    max-width: 1200px; /* ★ここを変更 (800px -> 1200px) */
    margin: 60px auto;
    padding: 0 20px;
    font-family: arial, sans-serif;
}

/* 2. 「〇〇の検索結果」ヘッダー */
.search-page-header .page-title {
    font-size: 1.4em;
    color: #4d4d4d;
    font-weight: bold;
}

/* 区切り線 */
.search-header-divider {
    height: 1px;
    background-color: #ddd; /* 薄いグレーの線 */
    width: 100%;
}

/* 3. 個々の検索結果ブロック */
.search-item {
    margin-bottom: 80px; /* 間隔は広めのまま */
    width: 100%;
    max-width: 100%; /* ★ここを変更 (600px -> 100%): 横幅いっぱいに使う */
}

/* 4. タイトル（リンク）のスタイル */
.search-item-title {
    margin: 0 0 6px 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 400;
}

.search-item-title a {
    color: #1a0dab !important;
    text-decoration: none;
    cursor: pointer;
}

.search-item-title a:hover {
    text-decoration: underline;
}

/* 5. 抜粋（説明文）のスタイル */
.search-item-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #4d5156 !important;
    word-wrap: break-word;
}

.search-item-excerpt p {
    margin: 0;
}

/* 6. ページネーション */
.search-pagination {
    margin-top: 60px;
    text-align: left;
}

.search-pagination .page-numbers {
    color: #1a0dab;
    text-decoration: none;
    margin-right: 15px;
    font-size: 14px;
}

.search-pagination .current {
    color: #202124;
    font-weight: bold;
    text-decoration: none;
}