/* ==========================================
   1. オープニング（ロゴ表示）
   ========================================== */
/* 背景（黒い幕） */
.opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    display: none; /* ★最初は完全に消しておく */
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* ★このクラスがついた時だけアニメーションを開始する */
.opening-overlay.is-active {
    display: flex; 
    animation: fadeOutContainer 2s ease-in-out forwards !important;
}

.opening-overlay.is-active .opening-logo {
    animation: logoFadeInOut 1.8s ease-out 0.2s forwards !important;
}

/* --- ロゴの設定 --- */
.opening-logo {
    max-width: 180px;
    height: auto;
    opacity: 0;
    
    /* ロゴのアニメーションも2秒に合わせて調整 */
    animation: logoFadeInOut 1.8s ease-out 0.2s forwards !important;
}

/* --- 背景が消えるアニメーション（2秒版） --- */
@keyframes fadeOutContainer {
    0% { opacity: 1; visibility: visible; }
    75% { opacity: 1; visibility: visible; } /* 1.5秒（75%）まで黒を維持 */
    100% { opacity: 0; visibility: hidden; } /* 2秒地点で完全に消える */
}

/* --- ロゴがふわっと出て消えるアニメーション --- */
@keyframes logoFadeInOut {
    0% { opacity: 0; transform: scale(0.95); }
    40% { opacity: 1; transform: scale(1); }    /* 早めにくっきり出す */
    70% { opacity: 1; transform: scale(1); }    /* 少し維持 */
    100% { opacity: 0; transform: scale(1.05); } /* 消える */
}

.is-mv-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}



/* イベント情報３行表示 */
.event-summary-data {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* ここで「3行」を指定 */
    overflow: hidden;
    margin-top: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #333;
}




/* 先端 */
.more-concept a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}


/* 横線（長い部分） */
.more-button a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 28px;   /* ← 長さここで調整 */
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
    transition: width 0.3s ease;
}

/* 矢印の先端 */
.more-button a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
}

/* ホバー演出 */
.more-button a:hover::before {
    width: 36px; /* 伸びる */
}

.more-button a:hover::after {
    transform: translateY(50%) rotate(45deg);
	
}
.more-concept a {
    position: relative;
    display: inline-block;
    padding-right: 40px;
    text-decoration: none;
}

/* 長い線 */
.more-concept a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 24px; /* ←ここで長さ調整 */
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
}




/* ==========================================
   ウッドホームの人セクション（縦書き・右寄せ・画像被せ）
   ========================================= */

/* 親要素：右寄せ用ラッパー */
.woodhome-person-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    z-index: 50;
    padding: 0 !important;
    margin-top: -1em !important;
    margin-bottom: 0 !important;
}

/* 子要素：縦書きテキスト */
/* display: block !important を削除し、エディタのクラスが優先されるように調整 */
.woodhome-person-text {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    
    /* 配置設定 */
    margin-right: var(--wp--preset--spacing--80, 0) !important;
    margin-left: auto !important;
    margin-bottom: -7.5em !important; 
    
    position: relative;
    
    /* デザイン設定 */
    line-height: 1.8;
    letter-spacing: 0.3em;
    padding: 5px 10px;
    font-weight: bold;
    color: #333;
}

/* スライダー自体の重なり順 */
.smb-spider-slider {
    position: relative;
    z-index: 10;
    margin-top: 0 !important;
}
/* ==========================================
   7. 特定セクションのスマホ非表示設定
   ========================================= */
@media screen and (min-width: 1024px) {
    /* top-concept クラスがついたセクションのサブタイトルを非表示 */
    .top-concept .smb-section__subtitle {
        display: none !important;
    }
}


/*
 * topページ 施工事例
 */
.caselist-sm .c-entry-summary__figure, 
.caselist .c-entry-summary__figure,
.eventlist .c-entry-summary__figure{
    aspect-ratio: 1 / 1 !important;
}
/* 2. 文字部分を「最初は透明」にして画像の上に重ねる（縦並びに変更） */
.caselist .c-entry-summary__body {
    position: absolute;
 top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
	
display: flex;
    flex-direction: column;    /* 縦並び */
    align-items: flex-start;   /* ★左寄せ */
    justify-content: flex-end; 
    
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.4s ease;
    
    /* ★左側の余白を少し多め（50px）に設定 */
    padding: 20px 50px; 
    box-sizing: border-box;
    pointer-events: none;
}

/* 3. マウスを乗せた時だけ文字を見せる */
.caselist .c-entry-summary:hover .c-entry-summary__body {
    opacity: 1;
}

/* 4. タイトルの文字スタイル ＋ 下線を追加 */
.caselist .c-entry-summary__title {
    color: #fff !important;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

/* ★タイトルの下に「白い線」を入れる設定 */
.caselist .c-entry-summary__title::after {
    content: "";
    display: block;
    width: 80px;          /* 線の長さ */
    height: 1px;          /* 線の太さ */
    background-color: #fff;
    margin: 15px auto;    /* 上下の余白（15px）と中央寄せ */
}

/* 5. 抜粋（本文）の文字を白くする設定 */
.caselist .c-entry-summary__content {
    color: #fff !important;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    /* 3行以上になったら「…」にする（お好みで） */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 施工事例リストの 2, 4, 7, 8 番目のタイトルを非表示にする */

.case-section .smb-taxonomy-posts .c-entries__item:nth-child(2) .c-entry-summary__title,
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(4) .c-entry-summary__title,
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(7) .c-entry-summary__title,
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(8) .c-entry-summary__title {
    display: none !important;
}

/* 指定のカードをクリック不可にする */
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(2) a,
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(4) a,
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(7) a,
.case-section .smb-taxonomy-posts .c-entries__item:nth-child(8) a {
    pointer-events: none;
    cursor: default;
}


/* タイトルを画像の上に重ねる（視認性アップのグラデーション付き） */
.caselist .c-entry-summary {
    position: relative;
}

.caselist .c-entry-summary__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 10px 10px; 
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    pointer-events: none; 
}
/* 📱 スマホ専用（caselist-sm）画像の下に文字を出す設定 */
@media screen and (max-width: 767px) {
    
    /* 1. 画像の設定（重ねる基準を解除） */
    .caselist-sm .c-entry-summary__figure {
        aspect-ratio: 1 / 1 !important;
        position: relative;
        overflow: hidden;
    }

    /* 2. 文字部分：重ねるのをやめて、画像の下に配置する */
    .caselist-sm .c-entry-summary__body {
        position: relative !important; /* ★重ねるのをやめる */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;      /* ★高さは文字量に合わせる */
        
        display: block !important;     /* ★Flexをやめて通常の縦並びにする */
        
        /* 背景色を白（またはサイトの色）にする */
        background: #fff !important; 
        
        opacity: 1 !important;
        padding: 15px 10px !important; /* スマホ用の余白 */
        pointer-events: auto !important;
    }

    /* 3. タイトルの調整（黒文字に戻す） */
    .caselist-sm .c-entry-summary__title {
        color: #333 !important;        /* ★背景が白くなるので文字は濃く */
        font-size: 1.1rem !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* 4. 線（::after）をグレーなどの見えやすい色に */
    .caselist-sm .c-entry-summary__title::after {
        content: "" !important;
        display: block !important;
        width: 50px !important;
        height: 1px !important;
        background-color: #ccc !important; /* ★線も見える色に */
        margin: 10px 0 !important;
    }

    /* 5. 抜粋（本文）を黒文字に戻す */
    .caselist-sm .c-entry-summary__content {
        color: #666 !important;        /* ★文字は濃く */
        font-size: 0.9rem !important;
        text-align: left !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}