/* -----------------------------
    PC画面変数
  ----------------------------- */
:root {
    --res-h1: 25pt;
    --res-h2: 25pt;
    --res-h3: 15pt;
    --res-h4: 15pt;
    --res-p: clamp(12px, 2vw, 17px);
    --res-label-txt: 12pt;
    --res-div: 12pt;
    --section-mar: 40px;


    /* ========== 基本スペースとフォントサイズ ========== */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* ========== ヘッダー関連トークン ========== */
    /* 上下の余白（画面幅によって自動調整） */
    --header-padding-block: clamp(10px, 2vw, 15px);

    /* 最低高さ（必要なら設定） */
    --header-min-height: clamp(100px, 8vh, 96px);

    /* ロゴサイズ */
    --logo-height: clamp(28px, 5vw, 48px);

    /* ナビ間隔 */
    --nav-gap: clamp(8px, 2vw, 24px);

    /* 色など共通 */
    --header-bg: #fff;
    --header-text: #222;
    --header-border: #e5e5e5;
    --res-items-p: clamp(8pt, 2vw, 8pt);
    --items-img-w: 60%;
    --items-img-h: 60%;
    --res-items-h: 650px;
    --res-txt-left-mar: 20px;
    --res-txt-top-mar: 10px;
    --res-section-pad: 10px;
    --res-section-h: 700px;
    --task-gap: 16px;
    --task-group-w: 60%;
    --flow-txt-small: 12pt;
    --flow-task-txt: 16pt;
    --res-flex-input: flex;
    --theme-color: 516866;
    --theme-color: 9A5F4F;
    --theme-color: F7F2EA;
    --items-panel-mar: 40px;
    --services-panel-mar: 40px;
    --services-panel-h: 220px;
    --accordion-head-w: 60%;
    --small-txt: 12pt;
    --res-width: 60%;
    --line-assessment-w: 60%;
    --swiper-pad: 60px;
    --swiper-img-pad: 30px;
    --swiper-height: 400px;
    --swiper-pad: 40px;
    --footer-pad: 20px;
    --form-wrapper-w: 50%;
    --form-wrapper-pad: 30px 60px 60px 60px;
    --kaitori-swiper-w: 60%;
    --res-min-width: 1024px
    
}


/* -----------------------------
    タブレット画面変数
  ----------------------------- */
@media screen and (max-width: 1024px) {
    :root {
        --res-h1: 25pt;
        --res-h2: 25pt;
        --res-h3: 15pt;
        --res-h4: 15pt;
        --small-txt: 10pt;
        --section-mar: 25px;
        --header-min-height: clamp(90px, 8vh, 96px);
        --res-items-p: 10pt;
        --res-items-panel-w: 270px;
        --items-img-w: 45px;
        --res-txt-top-mar: 10px;
        --items-img-h: 50px;
        --res-items-h: auto;
        --res-retrotxt-top-mar: 0px;
        --res-txt-left-mar: 20px;
        --task-group-w: 50%;
        --flow-txt-small: 8pt;
        --flow-task-txt: 14pt;
        --res-flex-input: block;
        --items-panel-mar: 20px;
        --services-panel-mar: 20px;
        --res-section-h: 580px;
        --services-panel-h: 50px;
        --res-width: 60%;
        --line-assessment-w: 60%;
        --swiper-height: 250px;
        --form-wrapper-w: 60%;
            --res-min-width: none;
    }
}

/* -----------------------------
    ipadmini等画面変数
  ----------------------------- */
@media screen and (max-width: 900px) {
    :root {
        --res-h1: 25pt;
        --res-h2: 25pt;
        --res-h3: 15pt;
        --res-h4: 15pt;
        --small-txt: 8pt;
        --section-mar: 25px;
        --header-padding-block: clamp(16px, 1.5vw, 32px);
        --header-min-height: clamp(72px, 8vh, 120px);
        --logo-height: clamp(36px, 4vw, 64px);
        --header-min-height: clamp(70px, 8vh, 96px);
        --res-txt-top-mar: 15px;
        --res-txt-top-mar: 10px;
        --items-img-w: 45px;
        --items-img-h: 50px;
        --res-retrotxt-top-mar: 0px;
        --res-txt-left-mar: 30px;
        --task-group-w: 50%;
        --flow-task-txt: 12pt;
        --items-panel-mar: 20px;
        --services-panel-mar: 20px;
        --res-section-h: 560px;
        --res-width: 70%;
        --line-assessment-w: 80%;
        --swiper-pad: 20px;
        --swiper-height: 150px;
        --form-wrapper-w: 80%;
        --form-wrapper-pad: 30px 30px 60px 30px;
        --kaitori-swiper-w: 70%;

    }

}

/* -----------------------------
    スマホ画面変数
  ----------------------------- */
@media screen and (max-width: 730px) {

    :root {
        --res-h1: 15pt;
        --res-h2: 14pt;
        --res-h3: 8pt;
        --res-h4: 10pt;
        --res-div: 8pt;
        --small-txt: 8pt;
        --section-mar: 10px;
        --header-min-height: clamp(60px, 8vh, 96px);
        --res-section-h: 520px;
        --res-items-p: 6pt;
        --res-txt-top-mar: 15px;
        --res-txt-left-mar: 10px;
        --res-items-panel-w: 170px;
        --items-img-w: 30px;
        --items-img-h: 35px;
        --res-retrotxt-top-mar: 7px;
        --task-group-w: 75%;
        --flow-task-txt: 10pt;
        --items-panel-mar: 10px;
        --services-panel-h: 40px;
        --services-panel-mar: 15px;
        --accordion-head-w: 80%;
        --res-width: 80%;
        --line-assessment-w: 90%;
        --swiper-pad: 30px;
        --swiper-img-pad: 10px;
        --swiper-pad: 10px;
        --footer-pad: 10px;
        --form-wrapper-w: 95%;
        --form-wrapper-pad: 5px 10px 60px 10px;
        --res-label-txt: 8pt;
        --kaitori-swiper-w: 65%;
    }
}

/* -----------------------------
    スマホ画面変数(320px)
  ----------------------------- */
@media screen and (max-width: 320px) {

    :root {
        
        --res-items-panel-w: 160px;

    }
}

/* -----------------------------
    スマホ画面変数(320px)
  ----------------------------- */
@media screen and (max-width: 320px) {

    :root {
        --res-h1: 12pt;
        --res-h2: 15pt;
        --res-h3: 8pt;
        --res-h4: 10pt;
        --res-label-txt: 8pt;
        --section-mar: 10px;
        --header-min-height: clamp(50px, 8vh, 96px);
        --res-section-h: 500px;
        --items-img-w: 30px;
        --items-img-h: 32px;
        --res-items-p: 5pt;
        --res-items-panel-w: 140px;
        --res-txt-top-mar: 15px;
        --res-txt-left-mar: 10px;
        --accordion-head-w: 90%;
        --res-retrotxt-top-mar: 12px;
        --services-panel-mar: 15px;
        --res-width: 100%;

    }
}