@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ヘッダーCTAボタン共通 */
.header-cta-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 16px;
}

.header-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.3s;
    letter-spacing: 0.05em;
}

.header-cta-btn:hover {
    opacity: 0.8;
}

/* カタログボタン（白抜き） */
.header-cta-btn.catalog {
    background: transparent;
    border: 2px solid #333;
    color: #333;
}

/* 相談予約ボタン（塗り） */
.header-cta-btn.reserve {
    background: #c85a2a;
    border: 2px solid #c85a2a;
    color: #fff;
}

/* スマホでは非表示（下部固定バーで対応） */
@media (max-width: 959px) {
    .header-cta-buttons {
        display: none;
    }
}

/* ===================================
   PC用 フローティングCTA（右サイド）
   =================================== */
.floating-cta-pc {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.floating-cta-pc .floating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 72px;
    padding: 16px 8px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.floating-cta-pc .floating-btn span {
    display: block;
}

/* カタログボタン */
.floating-cta-pc .floating-btn.catalog {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.08);
}

.floating-cta-pc .floating-btn.catalog:hover {
    background: #f5f5f5;
    box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.15);
}

/* 相談予約ボタン */
.floating-cta-pc .floating-btn.reserve {
    background: #c85a2a;
    color: #fff;
    border: 1px solid #c85a2a;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 8px rgba(200, 90, 42, 0.2);
}

.floating-cta-pc .floating-btn.reserve:hover {
    background: #b55025;
    box-shadow: -2px 2px 12px rgba(200, 90, 42, 0.35);
}

/* スマホでは非表示 */
@media (max-width: 959px) {
    .floating-cta-pc {
        display: none;
    }
}

/* ===================================
   メインビジュアル改善
   =================================== */

/* オーバーレイをグラデーションに変更 */
.p-mainVisual__inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
            rgba(0, 0, 0, 0) 10%,
            rgba(0, 0, 0, 0.1) 30%,
            rgba(0, 0, 0, 0.45) 60%,
            rgba(0, 0, 0, 0.65) 100%);
    z-index: 0;
    pointer-events: none;
}

/* スライドのスタック文脈を解除（テキストをオーバーレイより前面に） */
.p-mainVisual__slide {
    z-index: auto !important;
}

/* テキストエリアを左寄せ・やや下に */
.p-mainVisual__textLayer {
    z-index: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 0 6% 12% !important;
    text-align: left !important;
}

/* メインテキスト */
.p-mainVisual__slideTitle {
    font-size: clamp(24px, 3.2vw, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.6 !important;
    color: #fff !important;
    text-shadow:
        0 2px 24px rgba(0, 0, 0, 0.5),
        0 1px 6px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 24px !important;
}

/* サブテキスト */
.p-mainVisual__slideText {
    font-size: clamp(13px, 1.4vw, 16px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.8 !important;
    color: #fff !important;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.7),
        0 1px 6px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 0, 0, 0.3) !important;
    background: none !important;
    padding: 0 !important;
}

/* ボタンエリアも左寄せ */
.p-mainVisual__slideBtn {
    justify-content: flex-start !important;
}

/* ボタンのスタイル改善 */
.p-mainVisual__slideBtn a {
    padding: 14px 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

/* スマホ対応 */
@media (max-width: 599px) {
    .p-mainVisual__textLayer {
        align-items: center !important;
        text-align: center !important;
        padding: 0 5% 16% !important;
    }

    .p-mainVisual__slideBtn {
        justify-content: center !important;
    }

    .p-mainVisual__slideTitle {
        font-size: 22px !important;
        letter-spacing: 0.04em !important;
    }

    .p-mainVisual__slideText {
        font-size: 12px !important;
        margin-bottom: 24px !important;
    }
}

/* 3つの約束 本文の読みやすさ改善 */
.promise-section .swell-block-columns__inner .wp-block-paragraph {
    line-height: 2.0 !important;
    letter-spacing: 0.04em !important;
}

/* ===== 施工事例セクション ===== */

/* カードのホバー時に少し浮かせる */
.works-section .p-postList__item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.works-section .p-postList__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* カードの角丸 */
.works-section .p-postList__item .p-postList__thumb {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* タイトルのスタイル */
.works-section .p-postList__item .p-postList__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #3a3226 !important;
    line-height: 1.6 !important;
}

/* ===== お客様の声セクション ===== */

/* カード全体の角丸とはみ出し制御 */
.voice-section .swell-block-columns__inner .wp-block-group {
    border-radius: 12px;
    overflow: hidden;
}

/* カード内の画像をフル幅で */
.voice-section .swell-block-columns__inner .wp-block-group .wp-block-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

/* ===== CTAセクション ===== */

/* サブテキストの行間 */
.cta-section .wp-block-paragraph {
    line-height: 2.0 !important;
}

/* 補足テキストの透明度 */
.cta-section .cta-note {
    opacity: 0.8;
}

/* ===== 代表挨拶セクション ===== */

/* 本文の行間・字間 */
.greeting-section .wp-block-media-text__content p {
    line-height: 2.0 !important;
    letter-spacing: 0.04em !important;
}

/* 画像の角丸 */
.greeting-section .wp-block-media-text__media img {
    border-radius: 12px;
}

/* ===== 施工事例一覧ページ ===== */
.page-id-36 .p-postList__item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-id-36 .p-postList__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}