@charset "UTF-8";
/* =============================================================================
   乾太くんLP（page-lp_kanta.php）専用スタイル
   - 既存のグローバルCSS（reset/main/common 等）とのクラス衝突を避けるため、
     全体を .kanta でラップし、ブロック名は kanta- 接頭辞の BEM で命名する
   - SCSS は使わず素の CSS
   - リキッドレイアウト（.kanta 配下のみにスコープ。html は触らずヘッダー/フッターを保護）
       サイズ単位は var(--rem) を使う。1単位 = デザイン上の 1px。
       例) font-size: calc(16 * var(--rem));  → 16px相当で画面幅に応じ可変
           padding:   calc(40 * var(--rem));  → 40px相当
   - 基準幅：PC 1100px / SP 375px、ブレイクポイント：768px・1100px（2箇所）
       ≥1100px       … --rem: 1px（固定）
       768〜1099px   … --rem: 100vw / 1100（PC基準で縮小可変）
       <768px        … --rem: 100vw / 375（SP基準で可変）
   - line-height は単位なし、letter-spacing は em、border 等の固定値は px
   ============================================================================= */

/* -----------------------------------------------------------------------------
   リキッド単位 --rem ＆ 変数（カスタムプロパティ）
   ----------------------------------------------------------------------------- */
.kanta {
    /* リキッド単位（既定＝768〜1099pxのPC基準。下のメディアクエリで上書き） */
    --rem: calc(100vw / 1100);

    /* カラー */
    --kanta-orange: #f15a24;
    /* メインのオレンジ（ボタン・見出し） */
    --kanta-red: #e7211a;
    /* 強調の赤 */
    --kanta-blue: #1d3f8b;
    /* 濃紺（見出し文字） */
    --kanta-sky: #bbdcef;
    /* 水色の帯背景 */
    --kanta-sky-light: #e8f5fb;
    /* 薄い水色 */
    --kanta-cream: #fffdf5;
    /* クリーム地（ページ背景） */
    --kanta-text: #231815;
    /* 基本テキスト色（ページ全体） */
    --kanta-max: 1100px;
    /* コンテンツ最大幅 */
}

/* PC：1100px以上は固定（1単位=1px） */
@media (min-width: 1100px) {
    .kanta {
        --rem: 1px;
    }
}

/* SP：768px未満は375px基準で可変 */
@media (max-width: 767.98px) {
    .kanta {
        --rem: calc(100vw / 375);
    }
}

/* -----------------------------------------------------------------------------
   box-sizing：このLP配下のみ border-box を徹底する
   （既存テーマは * への box-sizing 指定がなく content-box のため、
     width:100% + padding ではみ出す。.kanta 配下だけ border-box に統一）
   ----------------------------------------------------------------------------- */
.kanta,
.kanta *,
.kanta *::before,
.kanta *::after {
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   ベース：ページ全体ラッパー
   ----------------------------------------------------------------------------- */
.kanta {
    background-color: #fff;
    /* ページ基本背景：白 */
    color: var(--kanta-text);
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(16 * var(--rem));
    /* 16px相当（基準フォントサイズ） */
    line-height: calc(28 / 16);
    /* 1.75 */
    overflow-x: hidden;
    /* 全幅背景のはみ出し対策 */
}

@media (max-width: 1399px) {
    .kanta {
        padding-top: 56px;
    }
}

.kanta img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 中央寄せの内側コンテナ（色帯は全幅、内側を 1100px で中央寄せ） */
.kanta-container {
    width: 100%;
    max-width: var(--kanta-max);
    margin-inline: auto;
    /* 左右20px */
}

/* セクション共通の上下余白 */
.kanta-section {
    padding-block: calc(64 * var(--rem));
    /* 上下64px */
}

@media (max-width: 767.98px) {
    .kanta-section {
        padding-block: calc(60 * var(--rem));
        /* SP：上下40px */
    }
}

/* 共通：中央寄せ見出し（画像見出し） */
.kanta-heading {
    text-align: center;
    margin-bottom: calc(40 * var(--rem));
    /* 40px */
}

@media (max-width: 767.98px) {
    .kanta-heading {
        margin-bottom: calc(24 * var(--rem));
        /* SP：24px */
    }
}

/* =============================================================================
   MV（メインビジュアル）
   ============================================================================= */
/* 上部の雲装飾（MVの上に独立配置・全幅）
   白い雲を見せるため背景は空の水色。下のMV（白）との境界になる */
.kanta-cloud {
    width: 100%;
    background-color: #bbdcef;
    line-height: 0;
    /* 画像下の余白を消す */
}

.kanta-cloud img {
    width: 100%;
    height: auto;
}



.kanta-mv {
    position: relative;
    margin-top: clamp(-330px, -12.85vw, -185px);
    /* 1440px以上は画面幅に追従して可変（雲の拡大に合わせ上へ）。1440pxで-185px、下限-330px */
    overflow: hidden;
    /* ドット地を section 内に収める */
    padding-bottom: calc(50 * var(--rem));
}



@media (max-width: 1300px) {
    .kanta-mv {
        margin-top: calc(-110 * var(--rem));
    }
}

@media (max-width: 767.98px) {
    .kanta-mv {
        margin-top: calc(-38 * var(--rem));
    }
}



/* ドット地：MV上部から約1/3の位置〜下端に全幅で敷く（2x素材を半分でタイル） */
.kanta-mv::before {
    content: "";
    position: absolute;
    inset: 41% 0 0 0;
    background-image: url('../img/kanta/mv_bottom_bg.webp');
    background-repeat: repeat;
    background-position: top center;
    background-size: calc(1568 * var(--rem)) auto;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .kanta-mv::before {
        inset: 20% 0 0 0;
        background-size: calc(1300 * var(--rem)) auto;

    }
}


/* コンテンツはドット地より前面に */
.kanta-mv__inner {
    position: relative;
    z-index: 1;
    padding-inline: calc(30 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-mv__inner {
        padding-inline: calc(20 * var(--rem));
        /* SP：左右20px */
    }
}

.kanta-mv__visual {
    width: 100%;
    max-width: calc(1100 * var(--rem));
    /* 画像の実寸1100pxまで */
    margin-inline: auto;
    margin-bottom: calc(20 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-mv__visual {
        margin-bottom: 5px;
    }
}

.kanta-mv__visual img {
    width: 100%;
    height: auto;
}


/* =============================================================================
   ヘッダー背景の上書き（このLPページのみ／kanta.cssは当ページのみ読込）
   - .head_block の親要素 #head00 の背景を空の水色にする
     （.head_block 自体の白カードはそのまま）
   ============================================================================= */
#head00 {
    background-color: #bbdcef;
    margin-bottom: 0;
}

/* =============================================================================
   CTA（お問い合わせ）／MV内・フッター前で共通
   ============================================================================= */
.kanta-cta {
    padding-block: calc(24 * var(--rem));
    /* 上下24px */
}

/* フッター前のCTA（背景クリーム地） */
.kanta-cta--footer {
    background-color: #fcf6f0;
    padding-block: calc(12 * var(--rem)) calc(80 * var(--rem));
    padding-inline: calc(20 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-cta--footer {
        padding-top: calc(1 * var(--rem));
    }
}

/* バナー（cta_01） */
.kanta-cta__head {
    max-width: calc(769 * var(--rem));
    /* 実寸1538pxの半分 */
    margin: calc(20 * var(--rem)) auto 0;
    /* 下20px */
    text-align: center;
}

.kanta-cta__head img {
    width: 100%;
}

/* ボタン2つ（PCは2カラム・列は可変。ボタン側 max-width で533pxを上限に） */
.kanta-cta__btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 可変列。余白を超えない */
    justify-items: center;
    /* 各列内でボタンを中央寄せ */
    gap: calc(24 * var(--rem));
    /* 24px */
    margin-inline: auto;
}

/* SP：ボタン1カラム */
@media (max-width: 767.98px) {
    .kanta-cta__btns {
        /* minmax(0,1fr) で、中身の最小幅に引っ張られずトラックを画面幅まで縮める */
        grid-template-columns: minmax(0, 1fr);
        gap: calc(16 * var(--rem));
    }
}

/* ボタン本体（最大533×130px・幅は列に追従し533pxを上限） */
.kanta-cta__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12 * var(--rem));
    width: 100%;
    max-width: calc(533 * var(--rem));
    /* 横幅の上限533px（はみ出し防止） */
    height: calc(130 * var(--rem));
    /* 高さ130px */
    padding-inline: calc(74 * var(--rem)) calc(46 * var(--rem));
    /* 上下16・左右28px */
    border-radius: calc(16 * var(--rem));
    /* 角丸16px・リキッド連動 */
    /* ドロップシャドウ（デザイン：乗算20%・Y+7px・ぼかし0・#000） */
    box-shadow: 0 calc(5 * var(--rem)) 0 rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* PC：電話リンク無効（既存サイト踏襲） */
}

/* SP：電話リンク有効・内部を画面幅に収める */
@media (max-width: 767.98px) {
    .kanta-cta__btn {
        pointer-events: auto;
        /* SP：電話リンク有効 */
        padding-inline: calc(36 * var(--rem));
        /* SP用に左右余白を縮小 */
        height: auto;
        /* SP：固定高さをやめ内容＋上下paddingで高さを決める */
        padding-block: calc(16 * var(--rem));
        /* 上下18px */
    }
}

.kanta-cta__btn--anjyou {
    background-color: #f44d0b;
    /* 安城店 */
}

.kanta-cta__btn--toyokawa {
    background-color: #ff7b39;
    /* 豊川店 */
}

/* ボタン内：ラベル＋番号を縦積み */
.kanta-cta__btn-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4 * var(--rem));
}

/* SP：ラベル・番号画像をボタン幅に収まるよう可変に */
@media (max-width: 767.98px) {
    .kanta-cta__btn-body {
        flex: 1;
        min-width: 0;
    }
}

.kanta-cta__btn-label {
    width: calc(197 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-cta__btn-label {
        width: calc(170 * var(--rem));
        max-width: 100%;
    }
}

.kanta-cta__btn-tel {
    width: calc(340 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-cta__btn-tel {
        width: calc(210 * var(--rem));
        max-width: 100%;
    }
}

.kanta-cta__btn-label img,
.kanta-cta__btn-tel img {
    width: 100%;
}

/* 矢印（円） */
.kanta-cta__btn-arrow {
    flex-shrink: 0;
    width: calc(33 * var(--rem));
    margin-top: calc(17 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-cta__btn-arrow {
        width: calc(23 * var(--rem));
        margin-top: calc(16 * var(--rem));
    }
}

/* ホバー（PCはタップ無効のため主にSP/タブレットで有効） */
@media (any-hover: hover) {
    .kanta-cta__btn:hover {
        opacity: 0.8;
    }
}

/* =============================================================================
   乾太くんの特徴
   ============================================================================= */
.kanta-feature {
    background-color: #fcf6f0;
    /* セクション背景 */
    padding-inline: calc(20 * var(--rem));
    /* 左右ガター（.kanta-containerにpaddingが無いため／SP配慮） */
}

/* 見出し */
.kanta-feature__title {
    max-width: calc(558 * var(--rem));
    /* 1116pxの半分 */
    margin: calc(-80 * var(--rem)) auto calc(-11 * var(--rem));
    text-align: center;
    position: relative;
}

@media (max-width: 767.98px) {
    .kanta-feature__title {
        margin-bottom: 0;
    }
}

/* ---- 3カラム要約 ---- */
.kanta-feature__cards {
    display: grid;
    grid-template-columns: repeat(3, calc(330 * var(--rem)));
    /* PC：3カラム固定。余った行のカードは左詰め */
    justify-content: center;
    /* ブロック全体は中央寄せ */
    gap: calc(20 * var(--rem));
    margin-top: calc(30 * var(--rem));
    /* ラベルのはみ出し分の余白 */
    margin-bottom: calc(64 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__cards {
        /* SP：カード幅に応じて折り返し。ブロックは中央／カードは左詰め */
        grid-template-columns: repeat(auto-fill, minmax(0, 300px));
        gap: 52px 20px;
    }
}

.kanta-feature__card {
    position: relative;
    width: calc(330 * var(--rem));
    /* カード幅330px */
    min-height: calc(302 * var(--rem));
    /* カード高さ302px */
    background-color: #fff;
    border-radius: calc(28 * var(--rem));
    /* 角丸28px */
    padding: calc(52 * var(--rem)) calc(24 * var(--rem)) calc(28 * var(--rem));
    text-align: center;
}

@media (max-width: 767.98px) {
    .kanta-feature__card {
        width: 100%;
        max-width: 300px;
        height: fit-content;
        min-height: 264px;
        padding: 0 16px 30px;
        border-radius: 21px;
    }
}

/* ラベルはカード上辺をまたいで配置 */
.kanta-feature__card-label {
    position: absolute;
    top: calc(-30 * var(--rem));
    /* 263×60の半分ぶん上に出す */
    left: 50%;
    transform: translateX(-50%);
    width: calc(263 * var(--rem));
    /* ラベル263×60 */
}

@media (max-width: 767.98px) {
    .kanta-feature__card-label {
        width: calc(205 * var(--rem));
        max-width: 220px;
        top: 0;
        transform: translateX(-50%) translateY(-50%);
    }
}

.kanta-feature__card-heading {
    display: flex;
    justify-content: center;
    margin-bottom: calc(30 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__card-heading {
        margin-top: 44px;
        margin-bottom: 20px;
        padding-inline: 10px;
    }
}

.kanta-feature__card-heading img {
    width: auto;
    max-height: calc(93 * var(--rem));
    /* 見出し画像の高さを揃える（最大93px） */
}

.kanta-feature__card-text {
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    /* 太字 */
    line-height: calc(28 / 16);
    text-align: left;
    padding-inline: calc(22 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__card-text {
        font-size: 16px;
        padding-inline: 0;
    }
}

/* ---- 詳細ブロック ---- */
.kanta-feature__detail {
    margin-top: calc(95 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__detail {
        margin-top: 48px;
    }
}

.kanta-feature__detail-row {
    display: flex;
    align-items: flex-start;
    gap: calc(55 * var(--rem));
}

/* 経済的：写真を右に */
.kanta-feature__detail--reverse .kanta-feature__detail-row {
    flex-direction: row-reverse;
}

/* SP：縦積み（写真上→本文下）。reverseもSPは写真上に統一 */
@media (max-width: 767.98px) {

    .kanta-feature__detail-row,
    .kanta-feature__detail--reverse .kanta-feature__detail-row {
        flex-direction: column;
        gap: calc(20 * var(--rem));
    }
}


/* 写真 500×400・角丸24px */
.kanta-feature__detail-photo {
    flex: 0 0 calc(500 * var(--rem));
    width: calc(500 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__detail-photo {
        flex: none;
        width: 100%;
        max-width: 450px;
        margin-inline: auto;
    }
}

.kanta-feature__detail-photo img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: calc(24 * var(--rem));
    /* 角丸24px */
}

.kanta-feature__detail-body {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .kanta-feature__detail-body {
        max-width: 620px;
        margin-inline: auto;
    }
}

/* バッジ＋見出し（横並び） */
.kanta-feature__detail-head {
    display: flex;
    align-items: center;
    gap: calc(16 * var(--rem));
    margin-bottom: calc(55 * var(--rem));
}

@media (max-width: 767.98px) {

    .kanta-feature__detail-head {
        gap: calc(12 * var(--rem));
        margin-bottom: calc(20 * var(--rem));
        max-width: 500px;
        margin-inline: auto;
    }
}

.kanta-feature__detail-badge {
    flex: 0 0 calc(125 * var(--rem));
    /* 丸ラベル125×125 */
    width: calc(125 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__detail-badge {
        flex: none;
        width: calc(85 * var(--rem));
        max-width: 128px;
    }
}

/* 見出し画像（高さで揃える） */
.kanta-feature__detail-heading img {
    width: auto;
    /* 乾燥が早い基準。経済的/清潔も同等の高さ */
    max-width: 100%;
}

.kanta-feature__detail-lead {
    font-size: calc(23 * var(--rem));
    font-weight: 700;
    line-height: calc(34 / 23);
    margin-bottom: calc(23 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__detail-lead {
        font-size: 23px;
        margin-bottom: 20px;
    }
}

/* 経済的の金額アクセント */
.kanta-feature__detail-accent {
    color: #d71418;
}

.kanta-feature__detail-text {
    font-size: calc(15 * var(--rem));
    line-height: calc(26 / 15);
}

@media (max-width: 767.98px) {
    .kanta-feature__detail-text {
        font-size: 13px;
    }
}

.kanta-feature__detail-note {
    font-size: calc(15 * var(--rem));
    line-height: calc(24 / 15);
    margin-top: calc(24 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__detail-note {
        margin-top: 20px;
        font-size: 11px;
    }
}

/* チャート（早いのみ・全幅） */
.kanta-feature__chart {
    max-width: calc(756 * var(--rem));
    /* 1514pxの半分 */
    margin: calc(28 * var(--rem)) auto calc(16 * var(--rem));
}

.kanta-feature__chart-notes {
    font-size: calc(13 * var(--rem));
    line-height: calc(20 / 13);
    list-style: none;
    padding-inline: calc(167 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-feature__chart-notes {
        font-size: 11px;
        padding-inline: 0;
        max-width: 620px;
        margin-inline: auto;
    }
}

.kanta-feature__chart-notes li {
    padding-left: 1em;
    text-indent: -1em;
    /* ●以降をぶら下げインデント */
}

/* =============================================================================
   乾太くんの選び方
   ============================================================================= */
.kanta-choose {
    background-color: #fff;
    /* セクション背景：白 */
    padding-inline: calc(20 * var(--rem));
    /* 左右ガター（.kanta-containerにpaddingが無いため） */
}

/* 見出し */
.kanta-choose__title {
    max-width: calc(599 * var(--rem));
    /* 1198pxの半分 */
    margin: calc(-92 * var(--rem)) auto calc(32 * var(--rem));
    text-align: center;
}

/* タイトル下の画像（649×191・角丸24px・中央寄せ）＋重ねボタンの基準 */
.kanta-choose__point {
    position: relative;
    container-type: inline-size;
    /* 重ねボタンを cqw でバナー幅に追従させる */
    max-width: calc(649 * var(--rem));
    margin-inline: auto;
}

.kanta-choose__point img {
    width: 100%;
    border-radius: calc(24 * var(--rem));
    /* 角丸24px */
}

/* バナー画像の上に重ねるボタン（332×47・#f44d0b・角丸23px）
   サイズ・文字はバナー幅基準の cqw（1cqw = バナー幅の1%）。
   バナー表示幅649pxを100cqwとして換算 */
.kanta-choose__point-btn {
    position: absolute;
    left: 68%;
    bottom: 13%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(332 * var(--rem));
    height: calc(47 * var(--rem));
    border-radius: calc(23 * var(--rem));
    background-color: #f44d0b;
    color: #fff;
    font-size: calc(15 * var(--rem));
    /* 約15px相当 */
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    /* ドロップシャドウ（通常20%・Y+4・ぼかし0・#020100） */
    box-shadow: 0 0.62cqw 0 rgba(2, 1, 0, 0.2);
    transition: opacity 0.3s ease;
}

@media (max-width: 767.98px) {
    .kanta-choose__point-btn {
        max-width: 330px;
        max-height: 65px;
        width: calc(220 * var(--rem));
        height: calc(40 * var(--rem));
        font-size: 13px;
        bottom: -6%;
    }
}

@media (any-hover: hover) {
    .kanta-choose__point-btn:hover {
        opacity: 0.8;
        color: #fff;
        /* テーマ共通の a:hover で黒くならないよう維持 */
    }
}

/* ---- 選ぶポイントは大きくわけて2つ（4画像の組み合わせ） ---- */
.kanta-choose__points {
    display: flex;
    align-items: flex-start;
    /* 作業員は下揃え（立ち姿） */
    justify-content: center;
    margin-top: calc(48 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__points {
        position: relative;
        margin-top: calc(68 * var(--rem));
    }
}

.kanta-choose__points-worker {
    flex: 0 0 auto;
    width: calc(209 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__points-worker {
        position: absolute;
        width: calc(100 * var(--rem));
        top: calc(-25 * var(--rem));
    }
}

.kanta-choose__points-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(7 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__points-main {
        position: relative;
        align-items: center;
        width: 100%;
        max-width: 500px;
    }
}

.kanta-choose__points-heading {
    width: calc(457 * var(--rem));
    margin-top: calc(45 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__points-heading {
        width: 100%;
        max-width: calc(481 * var(--rem));
    }
}

.kanta-choose__points-circles {
    display: flex;
    gap: calc(42 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__points-circles {
        padding-left: 0;
        justify-content: center;
        gap: 15px;

    }
}

.kanta-choose__points-circle {
    width: calc(204 * var(--rem));
    /* 丸ラベル 204×204 */
}

@media (max-width: 767.98px) {
    .kanta-choose__points-circle {
        width: calc(125 * var(--rem));
        max-width: 180px;
    }
}

/* 下の本文（Noto Sans JP Regular 15px / 行間28px / トラッキング-100=-0.1em） */
.kanta-choose__points-text {
    margin-top: calc(32 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: calc(28 / 15);
    max-width: calc(721 * var(--rem));
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .kanta-choose__points-text {
        font-size: 13px;
        max-width: 620px;
        margin-inline: auto;
        margin-top: 20px;
    }
}

/* ---- 2人世帯／ファミリー の2カード ---- */
.kanta-choose__cards {
    display: flex;
    justify-content: center;
    margin-top: calc(56 * var(--rem));
    gap: calc(22 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__cards {
        flex-wrap: wrap;
        gap: 35px 15px;
    }
}

.kanta-choose__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(531 * var(--rem));
    /* カード531×510 */
    min-height: calc(510 * var(--rem));
    background-color: #fff;
    border: 7px solid #efefef;
    /* 固定px */
    border-radius: calc(29 * var(--rem));
    /* 角丸29px */
    padding: calc(30 * var(--rem)) calc(36 * var(--rem)) calc(40 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__card {
        max-width: 335px;
        min-height: 0;
        padding: 20px 16px 30px;
        border: 5px solid #efefef;
        border-radius: 21px;
    }
}

/* 見出し画像（1枚目431・2枚目453）。上部をカードから少しはみ出させる */
.kanta-choose__card-heading {
    width: calc(431 * var(--rem));
    margin-top: calc(-52 * var(--rem));
    /* カード上辺から少し上に出す */
    margin-bottom: calc(20 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__card-heading {
        margin-top: calc(-33 * var(--rem));
        margin-bottom: 20px;
    }
}

.kanta-choose__card--family .kanta-choose__card-heading {
    width: calc(453 * var(--rem));
}

@media (max-width: 767.98px) {

    .kanta-choose__card-heading,
    .kanta-choose__card--family .kanta-choose__card-heading {
        width: 100%;
        max-width: calc(453 * var(--rem));
        /* SP：カード幅に収める */
    }
}

/* チェックリスト（18px bold＋チェックアイコン） */
.kanta-choose__card-list {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--rem));
    margin-bottom: calc(28 * var(--rem));
    list-style: none;
    padding-inline: calc(12 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__card-list {
        gap: 10px;
        padding-inline: 0;
        margin-bottom: 20px;
    }
}

.kanta-choose__card-list li {
    position: relative;
    padding-left: calc(39 * var(--rem));
    /* チェックアイコン分 */
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    line-height: calc(26 / 18);
}

@media (max-width: 767.98px) {
    .kanta-choose__card-list li {
        font-size: 16px;
        padding-left: 35px;
    }
}

.kanta-choose__card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: calc(22 * var(--rem));
    height: calc(20 * var(--rem));
    background: url('../img/kanta/choose_check.svg') no-repeat center / contain;
}

@media (max-width: 767.98px) {
    .kanta-choose__card-list li::before {
        top: 0.1em;
        width: 22px;
        height: 20px;
    }
}

/* ボタン（423×69・#f44d0b・角丸33・18px・下部中央） */
.kanta-choose__card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: calc(423 * var(--rem));
    height: calc(69 * var(--rem));
    margin: auto auto 0;
    /* カード下部に配置・中央寄せ */
    background-color: #f44d0b;
    border-radius: calc(33 * var(--rem));
    /* 角丸33px */
    color: #fff;
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    text-decoration: none;
    /* ドロップシャドウ（通常20%・Y+4・ぼかし0・#020100） */
    box-shadow: 0 calc(4 * var(--rem)) 0 rgba(2, 1, 0, 0.2);
    transition: opacity 0.3s ease;
}

@media (max-width: 767.98px) {
    .kanta-choose__card-btn {
        max-height: 65px;
        height: calc(50 * var(--rem));
        font-size: 15px;
        box-shadow: 0 4px 0 rgba(2, 1, 0, 0.2);
    }
}

@media (any-hover: hover) {
    .kanta-choose__card-btn:hover {
        opacity: 0.8;
        color: #fff;
        /* テーマ共通の a:hover で黒くならないよう維持 */
    }
}

/* ---- 比較表（スタンダード／デラックス） ---- */
.kanta-choose__table-wrap {
    margin-top: calc(56 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-choose__table-wrap {
        margin-top: 45px;
    }
}

.kanta-choose__table {
    width: calc(797 * var(--rem));
    /* 193+310+294 */
    margin-inline: auto;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: calc(16 * var(--rem));
    line-height: calc(24 / 16);
}

/* SP：横スクロールせず全幅に収める（列%・高さ/文字を縮小） */
@media (max-width: 767.98px) {
    .kanta-choose__table {
        width: 100%;
        font-size: 13px;
    }
}

/* ヘッダー（高さ66px・白文字・中央） */
.kanta-choose__table thead th {
    height: calc(66 * var(--rem));
    color: #fff;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .kanta-choose__table thead th {
        height: 52px;
    }
}

.kanta-choose__th-item {
    width: calc(193 * var(--rem));
    background-color: #2c424c;
}

@media (max-width: 767.98px) {
    .kanta-choose__th-item {
        width: 26%;
    }
}

.kanta-choose__th-std {
    width: calc(310 * var(--rem));
    background-color: #0071bc;
}

@media (max-width: 767.98px) {
    .kanta-choose__th-std {
        width: 37%;
    }
}

.kanta-choose__th-dlx {
    width: calc(294 * var(--rem));
    background-color: #0a519e;
}

@media (max-width: 767.98px) {
    .kanta-choose__th-dlx {
        width: 37%;
    }
}

/* ボディ（行高104px・横線のみ #e2e2e2 1px） */
.kanta-choose__table tbody th,
.kanta-choose__table tbody td {
    height: calc(104 * var(--rem));
    border-bottom: 1px solid #e2e2e2;
    /* 横線のみ（縦線なし） */
    vertical-align: middle;
}

@media (max-width: 767.98px) {

    .kanta-choose__table tbody th,
    .kanta-choose__table tbody td {
        height: 78px;
    }
}

/* 最下部（最終行）の罫線は不要 */
.kanta-choose__table tbody tr:last-child th,
.kanta-choose__table tbody tr:last-child td {
    border-bottom: none;
}

/* 項目列（背景#f4f4f4・16px bold #2c424c・左揃え） */
.kanta-choose__table tbody th {
    background-color: #f4f4f4;
    color: #2c424c;
    font-weight: 700;
    text-align: left;
    /* 左揃えのまま、4文字がほぼ中央に来るよう左paddingで調整 */
    padding-left: calc(64 * var(--rem));
    /* 列193px・4文字(約64px)を中央化：(193-64)/2≈64 */
}

@media (max-width: 767.98px) {
    .kanta-choose__table tbody th {
        padding-left: calc(16 * var(--rem));
        /* SPは列が狭いので控えめに中央寄せ */
    }
}

/* スタンダード列（白・中央・regular #231815） */
.kanta-choose__table tbody td:nth-child(2) {
    background-color: #fff;
    color: #231815;
    font-weight: 400;
    text-align: center;
}

/* デラックス列（#f3fbff・中央・regular #231815） */
.kanta-choose__table tbody td:nth-child(3) {
    background-color: #f3fbff;
    color: #231815;
    font-weight: 400;
    text-align: center;
}

/* =============================================================================
   スタンダード／デラックス 商品
   ============================================================================= */
.kanta-product {
    background-color: #edf6f7;
    /* セクション背景 */
    padding-block: calc(64 * var(--rem)) calc(130 * var(--rem));
    padding-inline: calc(20 * var(--rem));
    /* 左右ガター */
}

@media (max-width: 767.98px) {
    .kanta-product {
        padding-block: calc(40 * var(--rem)) calc(80 * var(--rem));
    }
}

/* 看板＋人物（head自体は重なり順の基準を作らない＝z-index無し） */
.kanta-product__head {
    position: relative;
    width: 100%;
    max-width: calc(1080 * var(--rem));
    margin: 0 auto;
    padding-top: calc(52 * var(--rem));
    /* 人物が看板上にはみ出す分 */
}

@media (max-width: 767.98px) {
    .kanta-product__head {
        padding-top: calc(40 * var(--rem));
    }
}

.kanta-product__sign {
    position: relative;
    z-index: 0;
    /* カード(z-index:1)より背面 → 足がカードの下に隠れる */
    top: calc(18 * var(--rem));
    /* 看板のみ少し下げる（人物・カードは動かさない） */
    width: calc(514 * var(--rem));
    /* 看板514×143 */
    max-width: 90%;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .kanta-product__sign {
        z-index: 1;
        top: calc(15 * var(--rem));
    }
}

.kanta-product__person {
    position: absolute;
    bottom: 0;
    z-index: 2;
    /* カードより前面（看板の移動とは無関係に位置はそのまま） */
    width: calc(284 * var(--rem));
    /* 人物284×195 */
}

@media (max-width: 767.98px) {
    .kanta-product__person {
        z-index: 0;
        bottom: calc(59 * var(--rem));
    }
}

/* スタンダード：人物 左／デラックス：人物 右。肩〜腕が看板に重なる程度に */
.kanta-product__head--left .kanta-product__person {
    left: calc(77 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-product__head--left .kanta-product__person {
        left: 0;
        width: calc(133 * var(--rem));
        /* SPは左右とも縮小（PCの251/284を上書き） */
    }
}

.kanta-product__head--right .kanta-product__person {
    right: calc(100 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-product__head--right .kanta-product__person {
        right: 0;
        width: calc(150 * var(--rem));
    }
}

/* ページ内リンクの着地位置を固定ヘッダー分だけ下げる（高さはJSで --kanta-anchor-offset に設定） */
#kanta-standard,
#kanta-deluxe {
    scroll-margin-top: var(--kanta-anchor-offset, 0px);
}

/* カード（1080幅・角丸33・border6px #eae9e4） */
.kanta-product__card {
    position: relative;
    z-index: 1;
    /* 看板(sign z-index:0)より前面 → 看板の足がカードの下に隠れる */
    width: 100%;
    max-width: calc(1080 * var(--rem));
    margin: 0 auto;
    background-color: #fff;
    border: 6px solid #eae9e4;
    /* 固定px */
    border-radius: calc(33 * var(--rem));
    padding: calc(40 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-product__card {
        padding: calc(9 * var(--rem));
    }
}

/* ブロック間の余白（カードの後の次の看板） */
.kanta-product__card+.kanta-product__head {
    margin-top: calc(56 * var(--rem));
}

/* 機種の並び */
.kanta-product__items {
    display: grid;
    gap: calc(55 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-product__items {
        gap: 45px 10px;
    }
}

.kanta-product__items--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kanta-product__items--2 {
    grid-template-columns: repeat(2, minmax(0, calc(360 * var(--rem))));
    justify-content: center;
}

@media (max-width: 767.98px) {

    .kanta-product__items--3,
    .kanta-product__items--2 {
        grid-template-columns: repeat(auto-fill, minmax(0, 305px));
        justify-content: center;
        justify-items: center;
    }
}

@media (max-width: 767.98px) {
    .kanta-product__item {
        max-width: 305px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* 商品画像 */
.kanta-product__item-img {
    margin: 0;
    /* 画像の周りのmarginを外す。画像は項目幅いっぱい＝スペック文と同じ幅 */
}



/* reset.css の img{width:auto} を上書きし、項目幅いっぱいに（中央・スペック文と同じ幅） */
.kanta-product__item-img img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .kanta-product__item-img img {
        width: 180px;

    }
}

/* スタンダードは商品画像幅251に合わせ、項目内容（画像・キャプション・スペック）を
   251幅・中央寄せにする（全体の幅＝画像の幅。テキストは内側で左寄せのまま） */
#kanta-standard+.kanta-product__card .kanta-product__item>* {
    max-width: calc(251 * var(--rem));
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    #kanta-standard+.kanta-product__card .kanta-product__item>* {
        max-width: 100%;
    }
}

/* 乾燥容量キャプション */
.kanta-product__item-cap {
    font-size: calc(21 * var(--rem));
    /* 21px */
    font-weight: 500;
    /* medium（〜kgも同サイズ） */
    margin-top: calc(16 * var(--rem));
    /* 画像との間隔 */
    margin-bottom: calc(12 * var(--rem));
    text-align: left;
}

@media (max-width: 767.98px) {
    .kanta-product__item-cap {
        font-size: 21px;
    }
}

/* スペック／機能性能リスト（14px regular #4d4d4d） */
.kanta-product__spec,
.kanta-product__features {
    list-style: none;
    font-size: calc(14 * var(--rem));
    font-weight: 400;
    color: #4d4d4d;
    line-height: calc(26 / 14);
}

@media (max-width: 767.98px) {

    .kanta-product__spec,
    .kanta-product__features {
        font-size: 13px;
    }
}

/* @media (max-width: 767.98px) {
    .kanta-product__features li {
        display: inline;
    }
} */

@media (max-width: 767.98px) {
    .kanta-product__features li::after {
        content: "　";
        /* 全角スペース */
    }
}

.kanta-product__spec li,
.kanta-product__features li {
    padding-block: calc(2 * var(--rem));
    /* 行間 */
}

/* 機能性能のペア表示（デラックス）：
   li をインライン化し、奇数項目の後に全角スペース・偶数項目の後で改行（＝2項目/行） */
.kanta-product__features--pair li {
    display: inline;
    padding-block: 0;
}

.kanta-product__features--pair li:nth-child(odd)::after {
    content: "　";
    /* 全角スペース */
}

.kanta-product__features--pair li:nth-child(even)::after {
    content: "\A";
    white-space: pre;
    /* \A を改行として描画 */
}

/* もっと見るボタン（474×75・#f44d0b・角丸36） */
.kanta-product__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: calc(474 * var(--rem));
    height: calc(75 * var(--rem));
    margin: calc(32 * var(--rem)) auto 0;
    background-color: #f44d0b;
    border-radius: calc(36 * var(--rem));
    color: #fff;
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    text-decoration: none;
    /* ボックスシャドウは同セクション他ボタンと同じ */
    box-shadow: 0 calc(4 * var(--rem)) 0 rgba(2, 1, 0, 0.2);
    transition: opacity 0.3s ease;
}

@media (max-width: 767.98px) {
    .kanta-product__btn {
        height: calc(50 * var(--rem));
        font-size: 15px;
        max-width: 305px;
        max-height: 65px;
        box-shadow: 0 4px 0 rgba(2, 1, 0, 0.2);
        margin-block: 25px 20px;
    }
}

@media (any-hover: hover) {
    .kanta-product__btn:hover {
        opacity: 0.8;
        color: #fff;
        /* テーマ共通の a:hover で黒くならないよう維持 */
    }
}

/* =============================================================================
   取付がおススメな4つの理由
   ============================================================================= */
.kanta-reason {
    background-color: #fcf6f0;
    /* セクション背景 */
    padding-inline: calc(20 * var(--rem));
    /* 左右ガター */
}

@media (max-width: 767.98px) {
    .kanta-reason {
        padding-bottom: calc(43 * var(--rem));
    }
}

/* 見出し画像（588×273・中央） */
.kanta-reason__title {
    max-width: calc(588 * var(--rem));
    margin: calc(-167 * var(--rem)) auto calc(28 * var(--rem));
    text-align: center;
}

@media (max-width: 767.98px) {
    .kanta-reason__title {
        margin: calc(-100 * var(--rem)) auto calc(28 * var(--rem));
    }
}

/* リード＋本文のラッパー */
.kanta-reason__intro {
    padding-left: calc(128 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-reason__intro {
        padding-left: 0;
    }
}

/* リード（オレンジ 25px bold）。本文は折り返さない幅700pxの中央ブロックで左寄せ */
.kanta-reason__lead {
    max-width: calc(700 * var(--rem));
    margin: 0 auto calc(16 * var(--rem));
    text-align: left;
    font-size: calc(25 * var(--rem));
    font-weight: 700;
    color: #f44d0b;
}

@media (max-width: 767.98px) {
    .kanta-reason__lead {
        font-size: 24px;
    }
}


/* 本文（黒 14px regular） */
.kanta-reason__text {
    max-width: calc(700 * var(--rem));
    margin: 0 auto;
    text-align: left;
    font-size: calc(14 * var(--rem));
    font-weight: 400;
    color: #000;
    line-height: calc(24 / 14);
}

@media (max-width: 767.98px) {
    .kanta-reason__text {
        font-size: 14px;
    }
}

/* ---- 4つの理由カード ---- */
.kanta-reason__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, calc(427 * var(--rem))));
    justify-content: center;
    gap: calc(50 * var(--rem)) calc(28 * var(--rem));
    /* 行・列 */
    margin-top: calc(64 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-reason__cards {
        grid-template-columns: repeat(auto-fill, minmax(0, 335px));
        justify-content: center;
        justify-items: center;
        gap: 48px 10px;
    }
}

/* カード（427×385・角丸23・border 5px #e6e6e6・白） */
.kanta-reason__card {
    position: relative;
    width: 100%;
    max-width: calc(427 * var(--rem));
    height: calc(377 * var(--rem));
    background-color: #fff;
    border: 5px solid #e6e6e6;
    /* 固定px */
    border-radius: calc(23 * var(--rem));
    padding: calc(46 * var(--rem)) calc(16 * var(--rem)) calc(30 * var(--rem));
    text-align: center;
}

@media (max-width: 767.98px) {
    .kanta-reason__card {
        max-width: 335px;
        height: 345px;
        border-radius: 21px;
        padding: 46px 16px 30px;
    }
}

/* ラベル（189×48）：カード上部から約1/3はみ出す */
.kanta-reason__card-label {
    position: absolute;
    top: calc(-20 * var(--rem));
    /* 48の約1/3を上に出す */
    left: 50%;
    transform: translateX(-50%);
    width: calc(189 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-reason__card-label {
        width: 189px;
        top: -20px;
    }
}

/* 見出し画像（398×165・中央） */
.kanta-reason__card-heading {
    max-width: calc(398 * var(--rem));
    margin: 0 auto calc(8 * var(--rem));
}

/* 本文（14px regular #000・行間27/14・左寄せ） */
.kanta-reason__card-text {
    text-align: left;
    font-size: calc(14 * var(--rem));
    font-weight: 400;
    color: #000;
    line-height: calc(27 / 14);
    padding-inline: calc(32 * var(--rem));
}

@media (max-width: 767.98px) {
    .kanta-reason__card-text {
        font-size: 14px;
        padding-inline: 0;
    }
}

/* パンくず：このページのみ固定（SP:12px / PC:13px） */
.kanta .pan,
.kanta .pan a {
    font-size: 12px;
}

@media (min-width: 768px) {

    .kanta .pan,
    .kanta .pan a {
        font-size: 13px;
    }
}