@charset "UTF-8";
/* ============================================================
   フォレストタウン 下層ページ共通＋concept（2026-10）
   Figma: LIR神奈川 フォレストタウン (EinAiQbBnceZZuJUwcMYPC)
   ft_top.css（ftt-共通部品）とセットで読み込む
   ============================================================ */

/* ============================================================
   下層共通ヒーロー（550px / SP300px バナー型）
   ============================================================ */
.ftl-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 28.6458vw; /* 550/1920（画面幅に比例。xl/lg/tabも同率のため共通） */
    padding-top: 60px; /* ヘッダー分（PCヘッダーは全幅60px固定） */
    overflow: hidden;
}
.ftl-hero__bg {
    position: absolute;
    inset: 0;
}
.ftl-hero__bg img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
/* 下層ヒーロー背景は全ページでconceptの書き出し(hero-mv-bg-pc/sp.webp)を共用（引き具合を統一）。
   グラデーションは書き出しに焼き込み済みのため、CSS側では掛けない（二重掛けでFigmaより暗くなる） */
.ftl-hero__text {
    position: relative;
    z-index: 5;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 1.5625vw; /* 30/1920 */
    padding: 0 30px 2.6042vw 8.3333vw; /* pb50 pl160 */
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.7)) /* ベタ黒だと細字が太って見える（Figmaの影描画に実測で合わせたアルファ） */;
}
.ftl-hero__en {
    margin: 0;
    color: var(--ftt-gold-mv);
    font-family: var(--ftt-garamond);
    font-size: 0.7813vw; /* 15/1920 */
    font-weight: 500;
    letter-spacing: 0.23em;
    line-height: 1;
    text-transform: uppercase;
}
.ftl-hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--ftt-serif);
    font-size: 2.0833vw; /* 40/1920 */
    font-weight: 200; /* Figma=Light(300)。白抜き細字はWindowsのガンマで1段太く描画されるため実表示をFigmaに合わせて200 */
    letter-spacing: 0.08em;
    line-height: 1.59;
    white-space: nowrap;
    /* Figmaはtext-box-trim前提の座標 */
    text-box: trim-both cap alphabetic;
}

/* ============================================================
   concept: CONCEPTセクション
   ============================================================ */
.ftl-concept {
    position: relative;
    padding: 120px 30px;
    background: var(--ftt-bg);
    overflow: hidden;
}
.ftl-concept__bg {
    position: absolute;
    left: 12.8%;
    top: 120px;
    z-index: 0;
    margin: 0;
    color: rgba(0, 35, 73, 0.04);
    font-family: var(--ftt-garamond);
    font-size: 177px;
    font-weight: 300;
    letter-spacing: 7px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.ftl-concept__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center; /* Figma: 見出しカラムは本文カラムに対し垂直中央 */
    justify-content: center;
    gap: 80px;
}
.ftl-concept__head {
    width: 383px;
    flex-shrink: 0;
}
.ftl-concept__head .ftt-h2 {
    margin: 40px 0;
    font-size: 32px;
    line-height: 1.8;
}
.ftl-concept__hang {
    display: block;
    margin-left: -0.55em; /* 行頭の「ぶら下げ */
    white-space: nowrap; /* カラム幅より1行目が数px長く「が、」だけ落ちるのを防止 */
}
.ftl-concept__body {
    width: 694px;
    max-width: 100%;
    padding-top: 41px;
}
.ftl-concept__text {
    margin: 0;
    color: var(--ftt-text);
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 2.3;
}
.ftl-concept__en {
    margin: 40px 0 0;
    color: var(--ftt-text-sub);
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 1.44px;
    line-height: 26.4px;
}

/* ============================================================
   concept: 4つのこだわり詳細
   ============================================================ */
.ftl-4c {
    position: relative;
    padding-bottom: 120px;
    background: #fff;
}
.ftl-4c__mainimg {
    width: 80.2%; /* 1540/1920 */
}
.ftl-4c__mainimg img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.ftl-4c__inner {
    max-width: 1220px; /* 内容1160 + 左右30（border-box） */
    margin: 0 auto;
    padding: 0 30px;
}
.ftl-4c__head {
    display: flex;
    align-items: flex-end;
    gap: 19px;
    margin-top: 0; /* Figma: 見出しレールはメイン画像直下に密着 */
}
.ftl-4c__head-line {
    flex-shrink: 0;
    width: 0.5px;
    height: 154px;
    background: var(--ftt-line);
}
.ftl-4c__head .ftt-h2 {
    margin-top: 20px;
    font-size: 30px;
    letter-spacing: 1.8px;
    line-height: 57.6px;
}
.ftl-4c__item {
    display: flex;
    align-items: center;
    margin-top: 120px;
    scroll-margin-top: 60px;
}
.ftl-4c__img {
    flex-shrink: 0;
    width: 42.76%; /* 496/1160 */
    margin-right: -20px;
}
.ftl-4c__img img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.ftl-4c__detailwrap {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding-bottom: 66px;
}
.ftl-4c__no {
    /* Figma: トリム済み数字の下端に詳細ブロックが27px重なる */
    margin: 0 0 -27px;
    color: rgba(0, 35, 73, 0.04);
    font-family: var(--ftt-serif);
    font-size: 128px;
    font-weight: 300;
    letter-spacing: 7px;
    line-height: 1;
    text-box: trim-both cap alphabetic;
}
.ftl-4c__detail {
    padding-left: 90px;
}
.ftl-4c__en {
    margin: 0;
    color: var(--ftt-gold);
    font-family: var(--ftt-ebgaramond);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    line-height: 18px;
    /* Figma: 先頭のみ大文字（Locality等）。uppercaseにしない */
}
.ftl-4c__h3 {
    margin: 21px 0 0;
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1.32px;
    line-height: 25.6px;
}
.ftl-4c__ensub {
    margin: 21px 0 0;
    color: var(--ftt-text-sub);
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 1.44px;
    line-height: 26.4px;
}
.ftl-4c__text {
    margin: 40px 0 0;
    color: var(--ftt-text);
    font-size: 14px;
    letter-spacing: 0.84px;
    line-height: 1.9;
}
/* 主な分譲エリア */
.ftl-4c__area {
    margin-top: 40px;
}
.ftl-4c__area-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 20px;
    color: var(--ftt-primary);
    font-size: 13px;
    letter-spacing: 0.78px;
    line-height: 1.9;
}
.ftl-4c__area-head img {
    width: 9px;
    height: 13px;
}
.ftl-4c__area-row {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--ftt-primary);
    font-size: 13px;
    letter-spacing: 0.78px;
    line-height: 1.9;
}
.ftl-4c__area-row + .ftl-4c__area-row {
    margin-top: 15px;
}
.ftl-4c__area-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 26px; /* Figma: py8+トリム済みテキスト＝実高約26px（flexコンテナにはtext-box-trimが効かないため明示指定） */
    border: 0.5px solid var(--ftt-line);
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 0.72px;
    line-height: 1.9;
}
/* 03 品質の選択コラム */
.ftl-4c__column {
    display: flex;
    gap: 30px;
    margin-top: 70px;
}
.ftl-4c__column-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 220px;
    background: var(--ftt-bg);
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.08px;
    line-height: 1.8;
    text-align: center;
}
.ftl-4c__column-list {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 30px;
}
.ftl-4c__column-item {
    display: flex;
    align-items: center;
    gap: 30px;
}
.ftl-4c__column-item img {
    display: block;
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    max-width: none; /* .ftt img の max-width:100% が固定幅を潰して幅狭になるためこのimgのみ解除 */
    object-fit: cover;
}
.ftl-4c__column-title {
    margin: 0;
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
}
.ftl-4c__column-text {
    margin: 20px 0 0;
    color: #8e8e8e;
    font-size: 14px;
    letter-spacing: 0.84px;
    line-height: 1.8;
}
/* 04 保証グリッド */
.ftl-4c__support {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    margin-top: 70px;
}
.ftl-4c__support-item {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 500px;
    max-width: 810px;
}
.ftl-4c__support-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 165px;
    min-height: 100px;
    padding: 0 10px;
    background: var(--ftt-bg);
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}
.ftl-4c__support-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 20px 0 20px 20px;
    color: var(--ftt-text);
    font-size: 14px;
    letter-spacing: 0.84px;
    line-height: 1.8;
}
/* アンカーナビ（左固定） */
.ftl-4c__navwrap {
    position: absolute;
    left: 0;
    top: 600px;
    bottom: 120px;
    z-index: 10;
    padding-left: 30px;
    pointer-events: none;
}
.ftl-4c__nav {
    position: sticky;
    top: 42vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: auto;
}
.ftl-4c__nav a {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--ftt-line);
    font-family: var(--ftt-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.66px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s;
}
.ftl-4c__nav a::before {
    content: '';
    width: 0.7px;
    height: 30px;
    background: currentColor;
}
.ftl-4c__nav a.is-active {
    color: var(--ftt-primary);
}

/* ============================================================
   products: 沿線アンカーナビ（PC=左固定レール / SP=上部横並び）
   ============================================================ */
.ftp-nav {
    position: absolute;
    left: 0;
    top: 220px;
    bottom: 120px;
    z-index: 10;
    padding-left: 30px;
    pointer-events: none;
}
.ftp-nav__inner {
    position: sticky;
    top: 42vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: auto;
}
.ftp-nav a {
    display: flex;
    align-items: center;
    gap: 30px;
    color: var(--ftt-line);
    font-family: var(--ftt-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.66px;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s;
}
.ftp-nav a::before {
    content: '';
    width: 0.7px;
    height: 30px;
    background: currentColor;
}
.ftp-nav a.is-active {
    color: var(--ftt-primary);
}

/* ============================================================
   products: 販売中物件一覧
   ============================================================ */
.ftp-properties {
    position: relative;
    padding: 120px 0;
    background: var(--ftt-bg);
    /* overflow:hiddenを置くと子孫のposition:sticky（アンカーナビ追随）が無効になるため禁止 */
}
.ftp-properties__bg {
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    color: rgba(0, 35, 73, 0.04);
    font-family: var(--ftt-garamond);
    font-size: 11.8229vw; /* 227/1920（画面幅に比例縮小・はみ出し防止） */
    font-weight: 300;
    letter-spacing: 0.7813vw; /* 15/1920 */
    line-height: 1; /* Figmaのlh518.4pxはtrim前提値。トリムはftl用@supportsで適用 */
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.ftp-properties__inner {
    position: relative;
    z-index: 1;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 30px;
}
/* 左の沿線アンカーナビ（左30px＋幅約160px）と重なる幅帯では中央寄せをやめてナビの右に寄せる。
   1600px＝中央寄せの左余白がちょうど190pxになる境界のため、切替えはシームレス */
@media screen and (min-width: 769px) and (max-width: 1600px) {
    .ftp-properties__inner {
        margin-left: 190px;
        margin-right: 30px;
    }
}
.ftp-group {
    padding-top: 165px;
}
.ftp-group:first-child {
    padding-top: 100px;
}
.ftp-group__label {
    margin-bottom: 20px;
}
.ftp-group__name {
    margin: 0 0 80px;
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 1.8px;
    line-height: 57.6px;
}
.ftp-group__list {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ftp-group__list > li {
    width: calc((100% - 60px) / 3);
}
.ftp-group__empty {
    display: inline-block;
    margin: 0;
    padding: 20px 30px;
    border: 1px solid var(--ftt-line);
    color: #979797;
    font-family: var(--ftt-serif);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.96px;
    line-height: 1.2; /* Figmaのlh57.6pxはtrim前提値（箱高52px） */
}
/* 会員様限定物件バナー（テキスト・ボタン・鍵アイコンは画像に焼き込み済み。HTMLで重ねない） */
.ftp-members {
    display: block;
}
.ftp-members img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   achievement: 販売実績
   ============================================================ */
.fta-achievement {
    position: relative;
    padding: 120px 0;
    background: #fff;
    overflow: hidden;
}
.fta-achievement__bg {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(0, 35, 73, 0.04);
    font-family: var(--ftt-garamond);
    font-size: 11.8229vw; /* 227/1920（画面幅に比例縮小・はみ出し防止） */
    font-weight: 300;
    letter-spacing: 0.7813vw; /* 15/1920 */
    line-height: 1; /* Figmaのlh518.4pxはtrim前提値 */
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.fta-achievement__inner {
    position: relative;
    z-index: 1;
    max-width: 1220px;
    margin: 0 auto;
    padding: 80px 30px 0;
}
.fta-achievement__list {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fta-achievement__list > li {
    width: calc((100% - 30px) / 2);
}
.fta-achievement__list > li.fta-achievement__more-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Figma: グリッド下の全幅行に中央配置 */
}
.fta-achievement__item img {
    display: block;
    width: 100%;
    aspect-ratio: 460 / 345;
    object-fit: cover;
}
.fta-achievement__name {
    margin: 30px 0 0;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--ftt-line);
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.96px;
    line-height: 24px;
}
.fta-achievement__more {
    display: inline-block;
    padding: 10px 20px;
    border: 0.7px solid var(--ftt-primary);
    background: transparent;
    color: var(--ftt-primary);
    font-family: var(--ftt-serif);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1.68px;
    line-height: 16.5px;
    cursor: pointer;
}

/* ============================================================
   下層 SP（768px以下・tabは767デザイン＝SP準拠で調整）
   ============================================================ */
@media screen and (max-width: 768px) {
    /* hero（375基準のvwで比例） */
    .ftl-hero {
        height: 80vw; /* 300/375 */
        padding-top: 50px;
    }
    .ftl-hero__text {
        justify-content: flex-end;
        gap: 4vw; /* 15/375 */
        padding: 0 5.3333vw 32vw 8vw; /* pr20 pb120 pl30 */
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7));
    }
    /* products / achievement のSPヒーローもconceptと同じ（高さ80vw・cover表示。基底を継承） */
    .ftl-hero__en {
        font-size: 2.6667vw; /* 10/375 */
        letter-spacing: 0.3em;
        line-height: 4vw; /* 15/375 */
    }
    .ftl-hero__title {
        font-size: 5.8667vw; /* 22/375 */
        letter-spacing: 0.08em;
        line-height: 1.6;
    }

    /* products: アンカーナビはSPでは上部の横並びリスト */
    .ftp-nav {
        position: relative;
        top: auto;
        bottom: auto;
        padding: 30px 20px 27px 30px;
        pointer-events: auto;
    }
    .ftp-nav__inner {
        position: static;
        top: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
    }
    .ftp-nav a {
        gap: 10px;
        color: var(--ftt-primary);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0.78px;
    }
    .ftp-nav a::before {
        width: 0.7px;
        height: 15px;
    }

    /* products */
    .ftp-properties {
        padding: 40px 0 80px;
    }
    .ftp-properties__bg {
        font-size: 65px;
        letter-spacing: 0;
        line-height: 1;
        top: 28px;
    }
    .ftp-properties__inner {
        padding: 0 30px;
    }
    .ftp-group {
        padding-top: 80px;
    }
    .ftp-group:first-child {
        padding-top: 50px;
    }
    .ftp-group__label {
        margin-bottom: 30px;
    }
    .ftp-group__name {
        margin-bottom: 50px;
        font-size: 18px;
        letter-spacing: 0.36px;
        line-height: 1.6;
    }
    .ftp-group__list {
        gap: 60px 30px;
    }
    .ftp-group__list > li {
        width: 100%;
    }
    .ftp-group__empty {
        width: 100%;
        font-size: 14px;
        letter-spacing: 0.84px;
        text-align: center;
    }
    /* achievement */
    .fta-achievement {
        padding: 0 0 60px;
    }
    .fta-achievement__bg {
        font-size: 65px;
        letter-spacing: -6.9px;
        line-height: 1;
        top: 30px;
    }
    .fta-achievement__inner {
        padding: 75px 30px 0; /* max-width制限なし（productsとタブレット帯の見え方を統一） */
    }
    .fta-achievement__list {
        gap: 60px 30px;
    }
    .fta-achievement__list > li {
        width: 100%;
    }
    .fta-achievement__more {
        font-size: 11px;
        letter-spacing: 3.3px;
    }
}

/* ---- sp: 〜768px（concept本文。tab専用デザインは廃止しSP準拠、769px以上はlgデザイン） ---- */
@media screen and (max-width: 768px) {
    /* concept */
    .ftl-concept {
        padding: 81px 30px 60px;
    }
    .ftl-concept__bg {
        left: 0;
        top: 61px;
        font-size: 75px;
        letter-spacing: 5.36px;
        width: 100%;
    }
    .ftl-concept__inner {
        flex-direction: column;
        align-items: flex-start; /* 縦積み時に基底のcenterを解除（中央寄せ事故防止） */
        gap: 20px;
    }
    .ftl-concept__head {
        width: 100%;
    }
    .ftl-concept__head .ftt-h2 {
        margin: 20px 0;
        font-size: 18px;
        line-height: 1.8;
    }
    .ftl-concept__body {
        width: 100%;
        padding-top: 0;
    }
    .ftl-concept__text {
        font-size: 13px;
        letter-spacing: 0.65px;
        line-height: 2;
    }
    .ftl-concept__en {
        margin-top: 30px;
        letter-spacing: 0.72px;
    }

    /* 4つのこだわり */
    .ftl-4c {
        padding-bottom: 60px;
    }
    .ftl-4c__mainimg {
        width: 92%; /* 345/375 */
    }
    .ftl-4c__mainimg img {
        height: 260px;
    }
    .ftl-4c__inner {
        /* 左60pxはアンカーナビ用の余白（Figma: コンテンツw315右寄せ） */
        max-width: none;
        padding: 0 30px 0 60px;
    }
    .ftl-4c__head {
        gap: 9px;
        margin-top: 0;
    }
    .ftl-4c__head-line {
        height: 137px;
    }
    .ftl-4c__head .ftt-h2 {
        font-size: 18px;
        letter-spacing: 0.36px;
        line-height: 1.6;
    }
    .ftl-4c__item {
        display: block;
        margin-top: 60px;
    }
    .ftl-4c__img {
        width: 285px;
        max-width: 100%;
        margin-right: 0;
    }
    .ftl-4c__detailwrap {
        padding-bottom: 0;
    }
    .ftl-4c__no {
        margin: 20px 0 -25px;
        font-size: 70px;
    }
    .ftl-4c__detail {
        padding-left: 0;
    }
    .ftl-4c__en {
        font-size: 9px;
        letter-spacing: 1.8px;
    }
    .ftl-4c__h3 {
        margin-top: 20px;
        font-size: 16px;
        letter-spacing: 0.96px;
    }
    .ftl-4c__ensub {
        margin-top: 20px;
        font-size: 11px;
        letter-spacing: 1.32px;
        line-height: 1.6;
    }
    .ftl-4c__text {
        margin-top: 30px;
    }
    .ftl-4c__area {
        margin-top: 30px;
    }
    .ftl-4c__area-head {
        margin-bottom: 15px;
        font-size: 12px;
        letter-spacing: 0.72px;
    }
    .ftl-4c__area-row {
        gap: 8px;
        font-size: 11px;
        letter-spacing: 0.66px;
    }
    .ftl-4c__area-row + .ftl-4c__area-row {
        margin-top: 10px;
    }
    .ftl-4c__area-tag {
        width: 48px;
        height: 24px; /* PC26pxの文字サイズ比（12→10px）換算 */
        font-size: 10px;
        letter-spacing: 0.6px;
    }
    .ftl-4c__column {
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
    }
    .ftl-4c__column-label {
        width: 100%;
        height: 60px;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0.9px;
        line-height: 1.6;
    }
    .ftl-4c__column-list {
        gap: 30px;
    }
    .ftl-4c__column-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .ftl-4c__column-item img {
        /* SP用書き出し(285×140)を比率のまま全体表示（高さ固定だと375px超のSP帯で上下が切れる） */
        width: 100%;
        height: auto;
    }
    .ftl-4c__column-title {
        font-size: 13px;
        font-weight: 400;
    }
    .ftl-4c__column-text {
        margin-top: 15px;
        font-size: 12px;
        letter-spacing: 0.72px;
    }
    .ftl-4c__support {
        gap: 15px 30px;
        margin-top: 40px;
    }
    .ftl-4c__support-item {
        min-width: 200px;
        flex-basis: 100%;
    }
    .ftl-4c__support-label {
        align-self: stretch;
        width: 120px;
        min-height: 0;
        font-size: 13px;
        font-weight: 400;
    }
    .ftl-4c__support-text {
        padding: 15px 0 15px 15px;
        font-size: 12px;
        letter-spacing: 0.72px;
        line-height: 1.9;
    }
    /* アンカーナビ（左縦書きレール）
       Figma: 各項目の上に水平15pxのティック線、その下に縦書きテキスト */
    .ftl-4c__navwrap {
        top: 320px;
        bottom: 60px;
        padding-left: 12px;
    }
    .ftl-4c__nav {
        top: 20vh; /* 4項目目まで画面内に収まる位置（35vhでは04が見切れる） */
        gap: 30px;
    }
    .ftl-4c__nav a {
        display: block;
        position: relative;
        padding-top: 8px; /* 横ティック線ぶん */
        writing-mode: vertical-rl;
    }
    .ftl-4c__nav a::before {
        position: absolute;
        top: 0;
        right: 2px;
        width: 15px;
        height: 1px;
    }
}

/* ============================================================
   concept専用ブレークポイント（Figma: concept-pc-xl 1400 / -lg 1280 / -tab 767）
   body.is-concept でconceptページのみに適用（他ページはPC/SPの2段）
   ============================================================ */

/* ---- xl: 1281〜1400px ---- */
@media screen and (min-width: 1281px) and (max-width: 1400px) {
    /* ヘッダーは全幅60px固定（基底で指定）のためxl個別指定なし */
    .is-concept .ftl-hero__text {
        gap: 25px;
        padding-left: 120px;
    }
    .is-concept .ftl-hero__title {
        font-size: 35px;
        letter-spacing: 2.8px;
    }
    .is-concept .ftl-concept {
        padding: 100px 30px;
    }
    .is-concept .ftl-concept__bg {
        left: 100px;
        top: 102px;
    }
    .is-concept .ftl-concept__inner {
        gap: 50px;
    }
    .is-concept .ftl-concept__head {
        width: 346px;
    }
    .is-concept .ftl-concept__head .ftt-h2 {
        font-size: 28px;
    }
    .is-concept .ftl-concept__body {
        width: 604px;
    }
    .is-concept .ftl-4c__mainimg {
        width: 85.71%; /* 1200/1400 */
    }
    .is-concept .ftl-4c__mainimg img {
        height: 389px;
    }
    .is-concept .ftl-4c__inner {
        max-width: 1001px;
        padding: 0;
    }
    .is-concept .ftl-4c__head .ftt-h2 {
        font-size: 26px;
        letter-spacing: 1.56px;
    }
    .is-concept .ftl-4c__item {
        margin-top: 100px;
    }
    .is-concept .ftl-4c__img {
        width: 400px;
    }
    .is-concept .ftl-4c__no {
        margin-bottom: -26px;
        font-size: 100px;
    }
    .is-concept .ftl-4c__detail {
        padding-left: 80px;
    }
    .is-concept .ftl-4c__h3 {
        font-size: 20px;
        letter-spacing: 1.2px;
    }
    .is-concept .ftl-4c__column {
        margin-top: 60px;
    }
    .is-concept .ftl-4c__column-label {
        width: 180px;
        font-size: 17px;
        letter-spacing: 1.02px;
    }
    .is-concept .ftl-4c__column-item img {
        width: 180px;
        height: 180px;
    }
    .is-concept .ftl-4c__column-title {
        font-size: 15px;
    }
    .is-concept .ftl-4c__support {
        margin-top: 60px;
    }
    .is-concept .ftl-4c__support-item {
        min-width: 420px;
    }
    .is-concept .ftl-4c__support-label {
        width: 140px;
        font-size: 15px;
    }
    .is-concept .ftl-4c__navwrap {
        top: 489px;
    }
}

/* ---- lg: 769〜1280px（1280px基準のvwで比例縮小） ---- */
@media screen and (min-width: 769px) and (max-width: 1280px) {
    /* ヘッダーは全幅60px固定（基底で指定）のためlg個別指定なし */
    .is-concept .ftt-header__nav a {
        font-size: 1.0938vw; /* 14/1280 */
        letter-spacing: 0.1em;
    }
    .is-concept .ftl-hero {
        padding-top: 60px; /* ヘッダー高60px固定と連動 */
    }
    .is-concept .ftl-hero__text {
        gap: 1.9531vw; /* 25/1280 */
        padding: 0 30px 3.9063vw 9.375vw; /* pb50 pl120 */
    }
    .is-concept .ftl-hero__title {
        font-size: 2.7344vw; /* 35/1280 */
        letter-spacing: 0.08em;
    }
    .is-concept .ftl-concept {
        padding: 10.7813vw 30px 7.8125vw; /* 138 / 100 */
    }
    .is-concept .ftl-concept__bg {
        left: 5.4688vw; /* 70/1280 */
        top: 7.8125vw; /* 100/1280 */
        font-size: 12.1094vw; /* 155/1280 */
        letter-spacing: 0.045em;
    }
    .is-concept .ftl-concept__inner {
        gap: 3.9063vw; /* 50/1280 */
    }
    .is-concept .ftl-concept__head {
        width: 23.9844vw; /* 307/1280 */
    }
    .is-concept .ftl-concept__head .ftt-h2 {
        font-size: 1.9531vw; /* 25/1280 */
    }
    .is-concept .ftl-concept__body {
        width: 43.9844vw; /* 563/1280 */
    }
    .is-concept .ftl-4c__mainimg {
        width: 85.94%; /* 1100/1280 */
    }
    .is-concept .ftl-4c__mainimg img {
        height: 27.3438vw; /* 350/1280 */
    }
    .is-concept .ftl-4c__inner {
        max-width: 71.875vw; /* 920/1280 */
        padding: 0;
    }
    .is-concept .ftl-4c__head {
        margin-top: 0;
    }
    .is-concept .ftl-4c__head-line {
        height: 10.4688vw; /* 134/1280 */
    }
    .is-concept .ftl-4c__head .ftt-h2 {
        font-size: 2.0313vw; /* 26/1280 */
        letter-spacing: 0.06em;
        line-height: 4.5vw; /* 57.6/1280 */
    }
    .is-concept .ftl-4c__item {
        margin-top: 6.25vw; /* 80/1280 */
    }
    .is-concept .ftl-4c__img {
        width: 29.0625vw; /* 372/1280 */
        margin-right: -1.5625vw;
    }
    .is-concept .ftl-4c__no {
        margin-bottom: -1.875vw; /* -24/1280 */
        font-size: 7.0313vw; /* 90/1280 */
    }
    .is-concept .ftl-4c__detail {
        padding-left: 5.4688vw; /* 70/1280 */
    }
    .is-concept .ftl-4c__h3 {
        font-size: 1.4063vw; /* 18/1280 */
        letter-spacing: 0.06em;
    }
    .is-concept .ftl-4c__text {
        font-size: 1.0156vw; /* 13/1280 */
        letter-spacing: 0.06em;
    }
    .is-concept .ftl-4c__column {
        margin-top: 4.6875vw; /* 60/1280 */
    }
    .is-concept .ftl-4c__column-label {
        width: 11.7188vw; /* 150/1280 */
        font-size: 1.25vw; /* 16/1280 */
        letter-spacing: 0.06em;
        line-height: 1.6;
    }
    .is-concept .ftl-4c__column-item img {
        width: 12.5vw; /* 160/1280 */
        height: 12.5vw;
    }
    .is-concept .ftl-4c__column-title {
        font-size: 1.1719vw; /* 15/1280 */
    }
    .is-concept .ftl-4c__column-text {
        font-size: 1.0156vw;
        letter-spacing: 0.06em;
        line-height: 1.7;
    }
    .is-concept .ftl-4c__support {
        margin-top: 4.6875vw;
    }
    .is-concept .ftl-4c__support-item {
        min-width: 31.25vw; /* 400/1280（常に2カラム維持） */
    }
    .is-concept .ftl-4c__support-label {
        width: 9.375vw; /* 120/1280 */
        min-height: 7.0313vw; /* 90/1280 */
        font-size: 1.1719vw;
    }
    .is-concept .ftl-4c__support-text {
        font-size: 1.0156vw;
        letter-spacing: 0.06em;
        line-height: 1.9;
    }
    .is-concept .ftl-4c__navwrap {
        top: 34.1406vw; /* 437/1280 */
        padding-left: 1.5625vw;
    }
    .is-concept .ftt-contact {
        padding: 7.8125vw 30px; /* 100/1280 */
    }
    .is-concept .ftt-contact__bg {
        top: 12.7344vw; /* 163/1280 */
        font-size: 12.8906vw; /* 165/1280 */
    }
    .is-concept .ftt-contact__btn {
        height: 9.375vw; /* 120/1280 */
    }
    .is-concept .ftt-footer {
        padding: 4.6875vw 7.8125vw; /* 60 100 */
    }
}
/* ---- tab: 768px（iPad縦のみ・767px基準。〜767pxはSPデザイン、769px〜はlg） ---- */
@media screen and (min-width: 768px) and (max-width: 768px) {
    /* ヘッダー: tabはテキストナビ表示（ハンバーガー非表示） */
    .is-concept .ftt-header {
        padding-right: 5.2151vw; /* 40/767 */
    }
    .is-concept .ftt-header__logo {
        width: 19.6871vw; /* 151/767 */
        height: 5.9974vw; /* 46/767 */
    }
    .is-concept .ftt-header__nav {
        display: flex;
        gap: 2.6076vw; /* 20/767 */
    }
    .is-concept .ftt-header__nav a {
        font-size: 1.695vw; /* 13/767 */
        letter-spacing: 0.1em;
    }
    .is-concept .ftt-header__burger {
        display: none;
    }
    /* hero */
    .is-concept .ftl-hero {
        height: 28.6832vw; /* 220/767 */
        padding-top: 5.9974vw; /* ヘッダー高と連動 */
    }
    .is-concept .ftl-hero__bg {
        bottom: 0;
        height: auto;
    }
    .is-concept .ftl-hero__bg img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .is-concept .ftl-hero__text {
        justify-content: center;
        gap: 1.3038vw; /* 10/767 */
        padding: 0 2.6076vw 5.2151vw 9.1265vw; /* pr20 pb40 pl70 */
        filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.7)) /* ベタ黒だと細字が太って見える（Figmaの影描画に実測で合わせたアルファ） */;
    }
    .is-concept .ftl-hero__en {
        font-size: 1.5645vw; /* 12/767 */
        letter-spacing: 0.28em;
        line-height: 1;
    }
    .is-concept .ftl-hero__title {
        font-size: 2.8683vw; /* 22/767 */
        letter-spacing: 0.08em;
        line-height: 1.59;
    }
    /* concept */
    .is-concept .ftl-concept {
        padding: 14.6024vw 3.9113vw 10.4302vw 24.1199vw; /* 112 30 80 185 */
    }
    .is-concept .ftl-concept__bg {
        left: 10.8214vw; /* 83/767 */
        top: 10.4302vw; /* 80/767 */
        width: auto;
        font-size: 12.7771vw; /* 98/767 */
        letter-spacing: 0.07em;
    }
    .is-concept .ftl-concept__inner {
        align-items: flex-start;
        gap: 3.9113vw; /* 30/767 */
    }
    .is-concept .ftl-concept .ftt-label {
        font-size: 1.4342vw; /* 11/767 */
        letter-spacing: 0.26em;
    }
    .is-concept .ftl-concept__head {
        width: 32.4641vw; /* 249/767 */
    }
    .is-concept .ftl-concept__head .ftt-h2 {
        margin: 3.9113vw 0;
        font-size: 2.6076vw; /* 20/767 */
        letter-spacing: 0;
        line-height: 1.8;
    }
    .is-concept .ftl-concept__body {
        width: 64.6675vw; /* 496/767 */
        max-width: 100%;
    }
    .is-concept .ftl-concept__text {
        font-size: 1.6949vw; /* 13/767 */
        letter-spacing: 0.05em;
        line-height: 2;
    }
    .is-concept .ftl-concept__en {
        margin-top: 3.9113vw;
        font-size: 1.5645vw; /* 12/767 */
        letter-spacing: 0.06em;
    }
    /* 4つのこだわり */
    .is-concept .ftl-4c {
        padding-bottom: 10.4302vw; /* 80/767 */
    }
    .is-concept .ftl-4c__mainimg {
        width: 89.57%; /* 687/767 */
    }
    .is-concept .ftl-4c__mainimg img {
        height: 29.0743vw; /* 223/767 */
    }
    .is-concept .ftl-4c__inner {
        max-width: none;
        padding: 0 10.4302vw; /* 80/767 */
    }
    .is-concept .ftl-4c .ftt-label {
        font-size: 1.4342vw;
        letter-spacing: 0.26em;
    }
    .is-concept .ftl-4c__head {
        gap: 2.4772vw; /* 19/767 */
        margin-top: 0;
    }
    .is-concept .ftl-4c__head-line {
        height: 15.9061vw; /* 122/767 */
    }
    .is-concept .ftl-4c__head .ftt-h2 {
        margin-top: 2.6076vw;
        font-size: 2.6076vw; /* 20/767 */
        letter-spacing: 0.06em;
        line-height: 7.5098vw; /* 57.6/767 */
    }
    .is-concept .ftl-4c__item {
        display: flex;
        align-items: center;
        margin-top: 6.5189vw; /* 50/767 */
    }
    .is-concept .ftl-4c__img {
        width: 31.8123vw; /* 244/767 */
        margin-right: -1.3038vw;
    }
    .is-concept .ftl-4c__detailwrap {
        padding-bottom: 4.1721vw; /* 32/767 */
    }
    .is-concept .ftl-4c__no {
        margin: 0 0 -2.4772vw; /* -19/767 */
        font-size: 9.1265vw; /* 70/767 */
    }
    .is-concept .ftl-4c__detail {
        padding-left: 6.5189vw; /* 50/767 */
    }
    .is-concept .ftl-4c__en {
        font-size: 1.3038vw; /* 10/767 */
        letter-spacing: 0.2em;
        line-height: 1.8;
    }
    .is-concept .ftl-4c__h3 {
        margin-top: 1.9557vw;
        font-size: 2.086vw; /* 16/767 */
        letter-spacing: 0.06em;
    }
    .is-concept .ftl-4c__ensub {
        margin-top: 2.6076vw;
        font-size: 1.4342vw; /* 11/767 */
        letter-spacing: 0.12em;
        line-height: 1.6;
    }
    .is-concept .ftl-4c__text {
        margin-top: 2.6076vw;
        font-size: 1.6949vw; /* 13/767 */
        letter-spacing: 0.06em;
        line-height: 1.9;
    }
    /* 01 エリアタグ: 川崎市/横浜市グループを横並び */
    .is-concept .ftl-4c__area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.9557vw 3.9113vw;
        margin-top: 1.3038vw;
        padding-top: 1.3038vw;
    }
    .is-concept .ftl-4c__area-head {
        flex-basis: 100%;
        margin: 0;
        font-size: 1.5645vw; /* 12/767 */
        letter-spacing: 0.06em;
    }
    .is-concept .ftl-4c__area-row {
        gap: 0.9126vw; /* 7/767 */
        font-size: 1.5645vw;
        letter-spacing: 0.06em;
    }
    .is-concept .ftl-4c__area-row + .ftl-4c__area-row {
        margin-top: 0;
    }
    .is-concept .ftl-4c__area-tag {
        width: 6.5189vw; /* 50/767 */
        font-size: 1.4342vw; /* 11/767 */
        letter-spacing: 0.06em;
    }
    /* 03 品質コラム: 横並び維持 */
    .is-concept .ftl-4c__column {
        flex-direction: row;
        gap: 2.6076vw;
        margin-top: 2.8683vw; /* 22/767 */
    }
    .is-concept .ftl-4c__column-label {
        width: 16.9492vw; /* 130/767 */
        height: auto;
        font-size: 1.8253vw; /* 14/767 */
        font-weight: 500;
        letter-spacing: 0.06em;
        line-height: 1.6;
    }
    .is-concept .ftl-4c__column-list {
        gap: 2.6076vw;
    }
    .is-concept .ftl-4c__column-item {
        flex-direction: row;
        align-items: center;
        gap: 2.6076vw;
    }
    .is-concept .ftl-4c__column-item img {
        width: 19.5567vw; /* 150/767 */
        height: 19.5567vw;
    }
    .is-concept .ftl-4c__column-title {
        font-size: 1.6949vw; /* 13/767 */
        font-weight: 400;
        line-height: 1.6;
    }
    .is-concept .ftl-4c__column-text {
        margin-top: 1.9557vw;
        font-size: 1.4342vw; /* 11/767 */
        letter-spacing: 0.06em;
        line-height: 1.7;
    }
    /* 04 保証: 1カラム */
    .is-concept .ftl-4c__support {
        gap: 2.6076vw;
        margin-top: 4.5633vw; /* 35/767 */
    }
    .is-concept .ftl-4c__support-label {
        width: 21.5124vw; /* 165/767 */
        min-height: 9.7784vw; /* 75/767 */
        padding: 0 2.6076vw;
        font-size: 1.6949vw; /* 13/767 */
        font-weight: 400;
    }
    .is-concept .ftl-4c__support-text {
        padding: 0 0 0 2.6076vw;
        font-size: 1.6949vw;
        letter-spacing: 0.06em;
        line-height: 1.9;
    }
    /* アンカーナビ: 左端の縦書きレール */
    .is-concept .ftl-4c__navwrap {
        top: 34.289vw; /* 263/767 */
        bottom: 10.4302vw;
        padding-left: 4.3025vw; /* 33/767 */
    }
    .is-concept .ftl-4c__nav {
        gap: 3.9113vw;
    }
    /* sales: 2カラム横並び（PC縮小版） */
    .is-concept .ftt-sales {
        padding: 10.4302vw 0; /* 80/767 */
    }
    .is-concept .ftt-sales__inner {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 4.4329vw; /* 34/767 */
    }
    .is-concept .ftt-sales__col {
        gap: 3.9113vw;
        width: 45.3716vw; /* 348/767 */
    }
    .is-concept .ftt-sales__role,
    .is-concept .ftt-sales__copy {
        font-size: 1.8253vw; /* 14/767 */
    }
    .is-concept .ftt-sales__logo {
        width: 25.5541vw; /* 196/767 */
        height: 7.8227vw; /* 60/767 */
        /* imgはボックス全体表示（基底のwidth/height:100%）。SVG側に余白込みのためmax制限しない */
    }
    .is-concept .ftt-sales__logo--seiken {
        width: 25.4237vw; /* 195/767 */
        height: 7.8227vw;
    }
    .is-concept .ftt-sales__logo--seiken img {
        max-width: 100%;
        max-height: 7.8227vw;
    }
    .is-concept .ftt-sales__vline {
        display: block;
        align-self: center;
        width: 1px;
        height: 18.2529vw; /* 140/767 */
    }
    /* contact */
    .is-concept .ftt-contact {
        padding: 10.4302vw 13.0378vw; /* 80 100 */
    }
    .is-concept .ftt-contact__bg {
        top: 21.2516vw; /* 163/767 */
        font-size: 13.4289vw; /* 103/767 */
        letter-spacing: 0.058em;
        line-height: 1;
    }
    .is-concept .ftt-contact__bg span {
        display: inline;
        font-size: inherit;
        letter-spacing: inherit;
        line-height: inherit;
    }
    .is-concept .ftt-contact__company {
        font-size: 1.8253vw; /* 14/767 */
    }
    .is-concept .ftt-contact__btns {
        flex-direction: row;
        gap: 3.9113vw;
        margin-top: 6.5189vw; /* 50/767 */
        width: auto;
    }
    .is-concept .ftt-contact__btn {
        flex: 1 1 0;
        width: auto;
        height: 13.0378vw; /* 100/767 */
        padding: 2.6076vw 1.3038vw;
    }
    /* footer */
    .is-concept .ftt-footer {
        padding: 5.2151vw 13.0378vw; /* 40 100 */
    }
    .is-concept .ftt-footer__text {
        font-size: 1.4342vw; /* 11/767 */
        letter-spacing: 0.1em;
        line-height: 2.2;
    }
}


/* ============================================================
   Figma座標系（text-box-trim＝インク端基準）の厳密一致（下層ページ）
   未対応ブラウザは従来表示のまま
   ============================================================ */
@supports (text-box: trim-both cap alphabetic) {
    .ftl-hero__en,
    .ftl-concept__text,
    .ftl-concept__en,
    .ftl-4c__en,
    .ftl-4c__h3,
    .ftl-4c__ensub,
    .ftl-4c__text,
    .ftl-4c__area-head,
    .ftl-4c__area-row,
    .ftl-4c__column-title,
    .ftl-4c__column-text,
    .ftl-4c__support-label,
    .ftl-4c__support-text,
    .ftl-concept__bg,
    .ftp-group__name,
    .ftp-group__empty,
    .fta-achievement__name,
    .fta-achievement__more {
        text-box: trim-both cap alphabetic;
    }
    /* 透かし文字（products/achievement）はSP側が非トリム前提の座標調整済みのためPCのみ */
    @media (min-width: 769px) {
        .ftp-properties__bg,
        .fta-achievement__bg {
            text-box: trim-both cap alphabetic;
        }
    }
}