@charset "utf-8";
/*
	Theme Name: RE:DIVER-CHILD
	Template: rediver
	Description:  re:Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */
/* サイドバーに自動表示される画像のスタイル */
.sidebar-image-box {
    margin-bottom: 2em; /* 下のウィジェットとの間隔 */
    text-align: center;
    background: #fff;
    padding: 10px;      /* 少し内側に余白を入れる（Diver風） */
    border: 1px solid #eee; /* 薄い枠線 */
}

/* 画像自体の設定 */
.sidebar-auto-image {
    width: 100%;        /* 横幅いっぱい */
    height: auto;       /* 高さは自動調整 */
    display: block;
    object-fit: cover;
    box-shadow: none;   /* Diverはフラットなデザインが多いので影なし */
}

/* マウスを乗せた時の動き */
.sidebar-image-box a:hover .sidebar-auto-image {
    opacity: 0.7;
    transition: 0.3s;
}

/* サイドバーの転送先エリア */
#sidebar-pickup-place.sidebar-image-box {
    margin-bottom: 2em;
    text-align: center;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    display: block; /* 念のためブロック表示指定 */
}

/* 転送された画像 */
.sidebar-auto-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin: 0 auto;
}

/* --- 送信中ローダー全体の背景 --- */
.wpcf7-loader-wrapper {
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ここを修正：シンプルで互換性の高い透過設定 */
    background-color: rgba(255, 255, 255, 0.6);
    
    z-index: 999999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 表示指示があった時だけ flex になる */
.wpcf7-loader-wrapper.is-active {
    display: flex;
}

/* --- プログレスバーの外枠（グレー） --- */
.wpcf7-loader {
    width: 80%;
    max-width: 350px; /* 少し横幅も広げるとバランスが良いです */
    height: 20px;     /* ★10pxから20pxに太くしました */
    background-color: #eee;
    border-radius: 50px;
    position: relative;
    overflow: visible;
}

/* --- 動くオレンジのバー本体 --- */
.wpcf7-loader .wpcf7-loader-spinner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #FF9800, #FF5722);
    border-radius: 50px;
    width: 0%;
    animation: progress-anim 3s ease-in-out forwards;
    box-shadow: 0 3px 8px rgba(255, 87, 34, 0.4); /* 影も少し強くして立体感を */
}

/* --- 「資料をダウンロードしています...」の文字 --- */
.wpcf7-loader-spinner-text {
    margin-top: 25px; /* バーを太くしたので間隔を少し広げました */
    color: #FF5722;
    font-size: 18px;  /* ★14pxから18pxに大きくしました */
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.05em;
    font-family: sans-serif;
}

/* アニメーション設定 */
@keyframes progress-anim {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Contact Form 7 既存のスピンナーを隠す */
.wpcf7-spinner, .wpcf7-response-output { display: none !important; }