/*
Theme Name: BusinessPress Child
Template: businesspress
Description: BusinessPress Child Theme
Version: 1.0.0
*/

/* ==========================================
   Button Hover Effects
   ========================================== */

.wp-block-button.has-custom-width.wp-block-button__width-100 {
    position: relative;
}

.wp-block-button.has-custom-width.wp-block-button__width-100 a,
.wp-block-button.has-custom-width.wp-block-button__width-100.is-style-fill a {
    position: relative;
    overflow: hidden;
    display: block;
}

.wp-block-button.has-custom-width.wp-block-button__width-100 a span,
.wp-block-button.has-custom-width.wp-block-button__width-100.is-style-fill a span {
    position: relative;
    display: block;
    transition: transform 0.3s ease;
}

.wp-block-button.has-custom-width.wp-block-button__width-100 a:hover span,
.wp-block-button.has-custom-width.wp-block-button__width-100.is-style-fill a:hover span {
    transform: translateY(-100%);
}

.wp-block-button.has-custom-width.wp-block-button__width-100 a::after,
.wp-block-button.has-custom-width.wp-block-button__width-100.is-style-fill a::after {
    content: '詳細を見る';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    color: inherit;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    font-weight: bold;
}

.wp-block-button.has-custom-width.wp-block-button__width-100 a:hover::after,
.wp-block-button.has-custom-width.wp-block-button__width-100.is-style-fill a:hover::after {
    transform: translateY(0);
}
/* 画像ホバーエフェクト - CSSのみで完結 */
.wp-block-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.wp-block-image img {
    display: block;
    transition: transform 0.3s ease;
}

.wp-block-image:hover img {
    transform: scale(1.05);
}

.wp-block-image::after {
    content: '詳細を見る';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.wp-block-image:hover::after {
    transform: translateY(0);
}

/* ==========================================
   Custom Image Header
   ========================================== */
.custom-video-header {
    position: relative;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

/* ▼ ヘッダー画像：src に使用する画像のURLを指定してください */
.custom-header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.video-content {
    color: white;
    text-align: center;
    z-index: 10;
    padding: 20px;
    pointer-events: auto;
}

.site-header .custom-header {
    display: none;
}

/* ==========================================
   ▼▼▼ 動画ヘッダー（コメントアウト中・将来使用予定）▼▼▼
   ==========================================

#header-video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

   ▲▲▲ 動画ヘッダーここまで ▲▲▲
   ========================================== */

/* ==========================================
   Responsive Media Queries
   ========================================== */

/* 超大画面 1920px以上 */
@media (min-width: 1920px) {
    .custom-video-header {
        height: 600px;
    }
}

/* 大画面 1600-1919px */
@media (min-width: 1600px) and (max-width: 1919px) {
    .custom-video-header {
        height: 550px;
    }
}

/* 中画面 1200-1599px */
@media (min-width: 1200px) and (max-width: 1599px) {
    .custom-video-header {
        height: 500px;
    }
}

/* タブレット 900-1199px */
@media (min-width: 900px) and (max-width: 1199px) {
    .custom-video-header {
        height: 450px;
    }
}

/* スマホ横 600-899px */
@media (min-width: 600px) and (max-width: 899px) {
    .custom-video-header {
        height: 500px;
    }
}

/* スマホ縦 400-599px */
@media (min-width: 400px) and (max-width: 599px) {
    .custom-video-header {
        height: 450px;
    }
}

/* 小型スマホ 399px以下 */
@media (max-width: 399px) {
    .custom-video-header {
        height: 400px;
    }
}