/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* アコーディオン全体のスタイル */
.my-faq {
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden;
}

/* 質問部分 */
.my-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
  cursor: pointer;
  list-style: none;
}

/* 標準の矢印を消す */
.my-faq summary::-webkit-details-marker { display: none; }

/* 右側のアイコン（ゆっくり回転） */
.my-faq summary::after {
  content: '▼';
  font-size: 12px;
  color: #666;
  transition: transform 0.4s ease-in-out;
}

.my-faq[open] summary::after {
  transform: rotate(180deg);
}


/* --- 【極上のゆとり版】ヌルッと開くための設定 --- */

/* 1. 外枠：高さをGridで制御 */
.my-faq .content-wrapper {
  display: grid;
  grid-template-rows: 0fr; /* 閉じている時は高さ0 */
  opacity: 0; /* 閉じている時は透明 */
  transition: 
    grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), /* 時間を0.6秒に延ばし、動きを粘り強く */
    opacity 0.5s ease;
}

/* 2. 開いた時：高さを出し、じわっと不透明度を上げる */
.my-faq[open] .content-wrapper {
  grid-template-rows: 1fr; /* 中身の高さ分だけ広げる */
  opacity: 1;
}

/* 3. 中身：滑らかさを邪魔する要素を排除 */
.my-faq .content {
  overflow: hidden;
  min-height: 0; /* Gridアニメーションを安定させる魔法の一行 */
}

/* 4. 実際のテキスト：余白の付け方を工夫 */
.my-faq .content p {
  padding: 25px 20px; /* 上下の余白を少し広げて「ゆとり」を演出 */
  margin: 0;
  background-color: #fff;
  /* 文字も少し遅れてふわっと出す */
  transform: translateY(-10px);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.my-faq[open] .content p {
  transform: translateY(0);
}

/* 右側のアイコンの回転も少しゆっくりに */
.my-faq summary::after {
  content: '▼';
  font-size: 12px;
  color: #666;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- その他の装飾 --- */

/* 「Q.」の色指定 */
.my-faq .q-color {
  color: #BE1417;
  font-weight: bold;
  margin-right: 10px;
}

/* h5の調整 */
.my-faq h5 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

/* フッターの赤色対策（現在地を赤くしない） */
footer .current-menu-item a {
    color: inherit !important;
}

/* アコーディオン全体のスタイル（枠線と外側の余白を消す） */
.my-faq {
  margin-bottom: 0; /* 下の余白を一旦ゼロに */
  border: none;     /* 二重の枠線を消す */
  border-radius: 0;
  overflow: hidden;
}

/* 質問部分（背景を透明にしてグループブロックの色を活かす） */
.my-faq summary {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0; /* 左右の余白を消してスッキリさせる */
  background-color: transparent; /* 背景色を透明に */
  cursor: pointer;
  list-style: none;
}

/* 矢印アイコンのゆとり（そのまま維持） */
.my-faq summary::after {
  content: '▼';
  font-size: 12px;
  color: #666;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 回答部分の余白調整 */
.my-faq .content p {
  padding: 10px 0 20px 0; /* 上下の間隔を調整 */
  margin: 0;
  background-color: transparent; /* 背景を透明に */
  transform: translateY(-5px);
  transition: transform 0.6s ease !important;
}

/* --- 上下の間隔（グループブロックの隙間）を制御 --- */
.wp-block-group:has(.my-faq) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Qの色指定（維持） */
.my-faq .q-color {
  color: #BE1417 !important;
  font-weight: bold;
}
/* --- 1. 文字の可読性アップ（光彩・シャドウ） --- */
/* 白い文字が背景に埋もれないよう、薄く黒い影と光彩を入れます */
.n2-ss-layer h1, 
.n2-ss-layer h2, 
.n2-ss-layer p {
    opacity: 1 !important; /* 強制的に表示 */
    transform: none !important; /* 位置を固定 */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 特定の赤文字設定 */
.red-text {
    color: #BE1417 !important;
    font-weight: bold;
    /* 赤文字には少し白い光彩を入れると浮き出て見えます */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
/* --- Givery風ボタン（強制表示・静止版） --- */
.givery-btn {
    /* 強制的に表示させるための最優先設定 */
    opacity: 1 !important; 
    transform: none !important; 
    visibility: visible !important;

    display: inline-flex !important;
    align-items: center !important;
    background-color: #BE1417 !important; /* 赤色 */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    padding: 0 30px 0 0 !important;
    font-weight: bold !important;
    overflow: hidden !important;
    height: 50px !important;
    line-height: 50px !important;
    /* ホバー時の変化をスムーズにする時間設定 */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ボタン内のアイコンエリア */
.givery-btn::before {
    content: '>'; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2) !important;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    font-size: 18px;
}

/* ホバー時の挙動：少し浮き上がるだけにする */
.givery-btn:hover {
    background-color: #d1161a !important; 
    transform: translateY(-3px) !important; /* 軽く浮く演出 */
    box-shadow: 0 8px 20px rgba(190, 20, 23, 0.4);
    opacity: 1 !important;
}

/* --- 3. レスポンシブ設計 --- */

/* スマホでのボタンサイズ調整 */
@media (max-width: 768px) {
    .givery-btn {
        font-size: 14px !important;
        height: 44px !important;
        line-height: 44px !important;
    }
    .givery-btn::before {
        width: 44px;
        height: 44px;
        margin-right: 10px;
    }
}

/* カラムの2列化（以前のものを維持） */
@media (max-width: 599px) {
    .my-4col {
        display: flex;
        flex-wrap: wrap;
    }
    .my-4col > .wp-block-column {
        flex-basis: calc(50% - 10px) !important;
        margin-bottom: 20px;
    }
}