body {
    background-color: #fff;
}

/* functions.css のキービジュアル関連のCSSを、すべてこちらに差し替え */

/* =============================================
 * Key Visual - 最終FIX版
 * ============================================= */
.key-visual {
    margin: 0;
    padding: 0; /* SP用のpaddingをリセット */
}

.key-visual .wrap {
    max-width: none; /* Override .wrap's max-width */
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
    min-height: 420px; /* 高さを調整してパンくずリストとの距離を縮める */
    background-image: url('https://deepeditor.jp/wp-content/uploads/2025/07/h1-background-scaled.png');
    background-size: contain; /* coverからcontainに戻す */
    background-position: center center; /* bottomからcenterに戻す */
    background-repeat: no-repeat;
    background-color: #fff; /* containで余白ができる場合の背景色 */
    overflow: hidden;
    /* display:flex と align-items:flex-end は削除 */
}

.key-visual .page-title {
    /* 768px以上でabsolute配置にするための準備として、基本スタイルをリセット */
    padding: 0;
    margin: 0;
    color: #333;
    width: 100%;
}

.key-visual .sub-title {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #0F58D5;
}

.key-visual .main-title {
    display: block;
    font-family: 'Oswald', sans-serif; /* DIN CondensedからOswaldに変更 */
    font-size: 96px; /* 文字サイズを少し小さくする */
    font-weight: 300; /* 300から100に変更。ウェブサイトにこの太さのフォントが読み込まれている必要があります。 */
    letter-spacing: 1.5px;
    line-height: 1;
    color: #000;
}

.key-visual-bg-sp {
    display: none; /* PC・タブレットでは非表示 */
}

/* =============================================
 * Responsive for Key Visual
 * ============================================= */

/* For Tablet (landscape) */
@media screen and (max-width: 1200px) {
    .key-visual .wrap {
        min-height: 30vw; /* 固定値360pxを削除 */
    }
    
    .key-visual .sub-title {
        font-size: 16px;
    }
    .key-visual .main-title {
        font-size: 64px;
    }
    .key-visual .page-title {
        padding: 0px 0px 40px 0px;
    }
}

/* For Tablet (portrait) */
@media screen and (max-width: 1023px) {
    .key-visual .wrap {
        min-height: 30vw; /* 固定値300pxを削除 */
    }
    .key-visual .page-title {
        /* absolute配置になるので不要なpaddingをリセット */
        padding: 0;
    }
    .key-visual .sub-title {
        font-size: 12px;
        margin-bottom: -8px;
    }
    .key-visual .main-title {
        font-size: 48px;
    }
}

/* For Mobile - with multiple breakpoints for fluid-like scaling */
@media screen and (max-width: 767px) {
    .key-visual {
        background-color: #fff;
    }
    .key-visual .wrap {
        position: relative;
        display: block;
        background-image: none;
        min-height: unset;
        line-height: 0;
        padding-left: 16px; /* Match mobile padding */
        padding-right: 16px; /* Match mobile padding */
    }
    .key-visual-bg-sp {
        display: block;
        width: 100%;
        height: auto;
    }
    .key-visual .page-title {
        position: absolute;
        bottom: 20px;
        width: auto;
        padding: 0;
        line-height: 1.2;
        box-sizing: border-box;
    }
    .key-visual .sub-title {
        font-size: 24px;
        margin-bottom: 4px;
    }
    .key-visual .main-title {
        font-size: 88px;
    }
}


@media screen and (max-width: 650px) {
    .key-visual .sub-title {
        font-size: 16px;
    }
    .key-visual .main-title {
        font-size: 72px;
    }
}

@media screen and (max-width: 540px) {
    .key-visual .page-title {
        bottom: 8px;
    }
}

@media screen and (max-width: 500px) {
    .key-visual .sub-title {
        font-size: 16px;
    }
    .key-visual .main-title {
        font-size: 60px;
    }
}

@media screen and (max-width: 420px) {
    .key-visual .sub-title {
        font-size: 12px;
    }
    .key-visual .main-title {
        font-size: 48px;
    }
} 

/* =============================================
 * Hero section full-width override (desktop & tablet)
 * Ensures background spans edge-to-edge with 40px side gutters
 * For wide screens, centers the container instead of stretching.
 * ============================================= */
@media screen and (min-width: 768px) {
    .key-visual > .wrap {
        /* On standard desktops, use gutters */
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;

        padding-left: 0;
        padding-right: 0;
    }

    .key-visual .wrap {
        /* 固定のmin-heightをやめ、vw単位でレスポンシブな高さを設定 */
        min-height: 30vw;
    }

    .key-visual .page-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 40px clamp(24px, 3vw, 40px) 40px; /* top, right, bottom, left */
        box-sizing: border-box;
    }
} 

/* Wide screens (≥1441px): let background fill width */
@media screen and (min-width: 1441px) {
} 

/* Wide screens ≥1441px – stretch image to full width without cropping */
@media screen and (min-width: 1441px) {
    .key-visual > .wrap {
        min-height: 30vw; /* approximate aspect ratio to avoid cropping */
    }
} 

/* Page title padding for <1440px */
@media screen and (min-width: 1201px) and (max-width: 1440px) {
    .key-visual .page-title {
        padding: 0 0 40px 0;
    }
} 

/* =============================================
 * Bottom-align page title to background (desktop & tablet)
 * ============================================= */
@media screen and (min-width: 768px) {
    .key-visual .page-title {
        position: absolute;
        bottom: 32px;              /* distance from background bottom edge */
        left: 0;
        right: 0;
        padding: 0 40px;          /* maintain side gutters */
        margin: 0;                /* reset in case earlier rules add margins */
    }
}

/* =============================================
 * FIX: use flex-end + fluid padding instead of absolute positioning
 * to keep title always flush with background bottom.
 * ============================================= */
@media screen and (min-width: 768px) {
    .key-visual .page-title {
        position: static !important;      /* revert to normal flow */
        bottom: auto !important;          /* cancel absolute offset */
        padding: 0 0 clamp(24px, 3vw, 40px) 0 !important; /* fluid bottom gap */
    }
    /* make sure wrapper still aligns items to end */
    .key-visual .wrap {
        display: flex;
        align-items: flex-end;
    }
}

/* =============================================
 * Fluid typography for page title
 * ============================================= */
@media screen and (min-width: 768px) {
    .key-visual .sub-title {
        font-size: clamp(12px, 1.5vw, 20px); /* 16px → 20px */
    }
    .key-visual .main-title {
        font-size: clamp(48px, 6vw, 96px);   /* 48px → 96px */
    }
} 

/* =============================================
 * Align page title flush to background bottom (desktop & tablet)
 * ============================================= */
@media screen and (min-width: 768px) {
    .key-visual .wrap {
        background-position: center bottom !important; /* align bg bottom edge */
        display: flex;
        align-items: flex-end;         /* keep children bottom-aligned */
    }
    .key-visual .page-title {
        padding-bottom: 0 !important; /* remove variable gap */
    }
} 

/* =============================================
 * Offset page title slightly to avoid clipping (desktop & tablet)
 * ============================================= */
@media screen and (min-width: 768px) {
    .key-visual .page-title {
        margin-bottom: clamp(12px, 1.5vw, 20px) !important; /* small responsive offset */
    }
} 

@media screen and (min-width: 768px) {
    .key-visual .page-title {
        /* Linear interpolation: 16px at 768px → 32px at 1440px, clamped outside range */
        margin-left: clamp(16px, calc(16px + (16 * (100vw - 768px) / 672)), 32px) !important;
    }
} 

/* =============================================
 * Update fluid typography for mobile to reach
 * 350px→48px, 420px→56px, 500px→72px, 600px→80px, 750px→104px
 * and sub-title 420px→12px → up to 20px at 750px
 * ============================================= */
@media screen and (max-width: 767px) {
    .key-visual .main-title {
        font-size: clamp(48px, calc(-1px + 14vw), 104px) !important;
    }
    .key-visual .sub-title {
        font-size: clamp(12px, calc(2px + 2.4vw), 20px) !important;
    }
}