@charset "UTF-8";

/* -------------------------------------------------------
    future.html タブレット版（768px〜1439px）
    css/future.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1439px) {

    /* -------------------------
        このファイルは future.html（03_ひだまりのこれから）専用のスタイルです。
        ヘッダー・フッター・共通ボタン等は css/common.css を参照しています。
    ------------------------- */

    :root {
        --color-blue-deep: #006c9e;
        --color-water: #41bcd7;
        --color-water-light: #d3f4fb;
        --color-center-orange: #ffa963;
    }

    .l-main {
        min-width: 69.4444vw;
    }


    /* -------------------------
        ページタイトル（ヒーロー）
    ------------------------- */

    .future-hero {
        position: relative;
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        height: 43.125vw;
        overflow: hidden;
        border-radius: 0 0 6.9444vw 6.9444vw;
        background: url(../images/future/bg_hero_lake.webp) center / cover no-repeat;
    }

    .future-hero__inner {
        position: relative;
        width: 100%;
        max-width: 100vw;
        height: 100%;
        margin: 0 auto;
    }

    .future-hero__title {
        position: absolute;
        left: 9.375vw;
        top: 19.6528vw;
        display: inline-flex;
        align-items: center;
        height: 5.9028vw;
        padding: 0 4.1667vw;
        background: var(--color-blue-deep);
        border-radius: 13.8889vw;
        color: #fff;
        font-size: 2.9861vw;
        font-weight: 700;
        letter-spacing: 4.3px;
        white-space: nowrap;
    }


    /* -------------------------
        共通：見出し・本文
    ------------------------- */

    .vision__title,
    .network__title,
    .guideline__title {
        color: #333;
        font-size: 2.4306vw;
        font-weight: 700;
        line-height: 4.1667vw;
        letter-spacing: 1.75px;
        text-align: center;
    }

    .points__title,
    .point__title {
        font-weight: 700;
        line-height: 4.1667vw;
        text-align: center;
    }

    .points__title {
        position: relative;
        width: fit-content;
        margin: 0 auto;
        color: #006C9E;
        font-size: 2.7778vw;
        letter-spacing: 2px;
    }

    .points__title::after {
        content: "";
        display: block;
        width: 100%;
        height: 0.0694vw;
        margin-top: 0.5556vw;
        background: #006C9E;
    }

    .point__title {
        color: #333;
        font-size: 2.0833vw;
        letter-spacing: normal;
    }

    .network__text,
    .guideline__text,
    .point__text {
        max-width: 63.8889vw;
        margin: 2.7778vw auto 0;
        color: #333;
        font-size: 1.3889vw;
        line-height: 2.4306vw;
        text-align: left;
    }


    /* -------------------------
        ビジョン（持続可能な地域社会に向けた新たな地方都市モデル）
    ------------------------- */

    .vision {
        padding: 11.1111vw 0 3.4722vw;
    }

    .vision::after {
        content: "";
        display: block;
        width: 69.0972vw;
        margin: 10.4167vw auto 0;
        border-bottom: 1px solid #D9D9D9;
    }

    .vision__inner {
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .vision__lead {
        max-width: 50.6944vw;
        margin: 2.7778vw auto 0;
        color: #333;
        font-size: 1.3889vw;
        line-height: 3.4722vw;
        text-align: center;
    }

    .ecosystem {
        margin-top: 6.25vw;
        text-align: center;
    }

    .ecosystem__diagram-img{
        width: 52.7778vw;
        margin: 0 auto;
    }

    .ecosystem__label {
        color: #41BCD7;
        font-size: 1.875vw;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 1.3889vw;
    }

    /* -------------------------
        「面」で支える地域まるごとケア
    ------------------------- */

    .network {
        padding: 6.9444vw 0;
    }

    .network::after {
        content: "";
        display: block;
        width: 69.0972vw;
        margin: 10.4167vw auto 0;
        border-bottom: 1px solid #D9D9D9;
    }

    .network__inner {
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
        text-align: center;
    }

    .network__illust {
        display: block;
        width: 100%;
        max-width: 69.4444vw;
        height: auto;
        margin: 4.1667vw auto 0;
    }

    .network__callout {
        max-width: 65.7639vw;
        margin: 4.1667vw auto;
        color: #333;
        font-size: 2.0139vw;
        font-weight: 500;
        line-height: 3.8194vw;
        letter-spacing: 1.45px;
        text-align: center;
    }
    .network__catch{
        width: 61.4583vw;
        margin: 0 auto;
    }


    /* -------------------------
        「みらい福祉」その指針
    ------------------------- */

    .guideline {
        padding: 6.9444vw 0 13.8889vw;
    }

    .guideline__inner {
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
        text-align: center;
    }

    .pillars {
        margin: 4.8611vw auto 0;
    }

    .pillars__img {
        max-width: 58.9583vw;
    }


    /* -------------------------
        3つのPOINT
    ------------------------- */

    .points {
        position: relative;
        background: rgba(211, 244, 251, 0.3);
        padding-bottom: 27.7778vw;
    }

    .points__transition-photo-mask {
        position: relative;
        width: 100%;
        min-width: 69.4444vw;
        height: 34.7222vw;
        overflow: hidden;
        margin-bottom: 10.7639vw;
    }

    .points__transition-photo {
        display: block;
        position: absolute;
        top: -15%;
        left: 0;
        width: 100%;
        height: 130%;
        object-fit: cover;
    }

    .points__inner {
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 1.3889vw;
    }

    .points__title {
        margin-bottom: 6.9444vw;
    }

    .point {
        margin-bottom: 10.4167vw;
    }

    .point__label {
        display: block;
        width: 15.6944vw;
        height: 3.8194vw;
        margin: 0 auto;
        background: var(--color-blue-deep);
        border-radius: 13.8889vw;
        color: #fff;
        font-size: 1.875vw;
        font-weight: 700;
        letter-spacing: 2.7px;
        line-height: 3.8194vw;
        text-align: center;
    }

    .point__title {
        margin-top: 1.3889vw;
    }

    .point__illust,
    .point__photo {
        display: block;
        width: 100%;
        max-width: 69.4444vw;
        height: auto;
        margin: 4.1667vw auto 0;
        border-radius: 1.3889vw;
    }

    .point__illust {
        margin: 5.5556vw auto 0;
    }

    .point__pill {
        max-width: 69.4444vw;
        margin: 4.1667vw auto 0;
        padding: 1.0417vw 1.3889vw;
        background: #41BCD7;
        border-radius: 13.8889vw;
        color: #fff;
        font-size: 1.9444vw;
        font-weight: 700;
        text-align: center;
        box-sizing: border-box;
    }

    .care-cards {
        display: flex;
        justify-content: center;
        gap: 1.3889vw;
        max-width: 71.3889vw;
        margin: 3.4722vw auto 0;
        padding: 0;
        list-style: none;
    }

    .care-cards__item {
        width: 16.3194vw;
        padding: 1.3889vw 1.3889vw;
        background: #fff;
        border-radius: 1.3889vw;
        text-align: center;
    }

    .care-cards__title {
        color: var(--color-water);
        font-size: 1.8056vw;
        font-weight: 700;
        line-height: 1.4;
    }

    .care-cards__heading {
        margin-top: 0.6944vw;
        color: var(--color-water);
        font-size: 1.25vw;
        font-weight: 500;
        letter-spacing: -0.9px;
    }

    .care-cards__text {
        margin-top: 0.8333vw;
        color: rgba(0, 0, 0, 0.8);
        font-size: 1.25vw;
        letter-spacing: -0.9px;
        line-height: 1.4;
        text-align: left;
    }


    /* -------------------------
        CTAボタン
    ------------------------- */

    .future-cta {
        display: flex;
        justify-content: center;
        gap: 2.0833vw;
        margin-top: 4.1667vw;
    }

    .future-cta .c-btn-more {
        background: var(--color-water);
        text-align: center;
        line-height: 1.3;
    }

    .future-cta .c-btn-more::after {
        background-image: url("../images/future/icon_btn_arrow.svg");
    }
}