@charset "UTF-8";

/*
 * エアコン取付・買替 LP 専用スタイル（固定ページ lp_airconditioner）
 *
 * 方針:
 * - 詳細度を低く保つため、各ブロックは接頭辞 aircon- を付けた単一クラスで記述する。
 *   （例: .aircon-mv / .aircon-mv__title）既存サイトCSSとの衝突回避も兼ねる。
 * - 子孫セレクタ・タグ/ID併用は避け、BEMでフラットに書く。
 * - 各セクションのスタイルはスクショ受領後にこのファイル末尾へ追記していく。
 *
 * SP/PC基準幅（ブレークポイント）はセクション実装時にスクショで確定する（要確認）。
 */

/* =============================================================================
   ページ全体ラッパー
   ============================================================================= */

/* LP内のbox-sizingを統一（このLP単体でも崩れないよう border-box を保証） */
.lp-aircon *,
.lp-aircon *::before,
.lp-aircon *::after {
    box-sizing: border-box;
}

.lp-aircon {
    overflow-x: hidden;
}

/* =============================================================================
   共通インナー（コンテンツ幅・中央寄せ）
   ※基準幅はセクション実装時に確定（暫定値）
   ============================================================================= */

.aircon-inner {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
}

/* =============================================================================
   各セクション（スクショ受領後に追記）
   ============================================================================= */

/* -----------------------------------------------------------------------------
   メインビジュアル
   緑枠内全体を1枚の画像として表示。画像サイズ・アスペクト比はラッパー側で管理。
   ----------------------------------------------------------------------------- */

.aircon-mv {
    padding-inline: 30px;
    background-color: #dff0f7;
}

@media (max-width: 1399px) and (min-width: 1093px) {
    .aircon-mv {
        /* 1399px以下で可変（100/1399）。上限100px・下限は768px相当で55px */
        padding-top: 100px;
    }
}

@media (max-width: 1092px) {
    .aircon-mv {
        padding-top: 100px;
    }
}

@media (max-width: 499px) {
    .aircon-mv {
        /* 499px以下で可変（100/499）。上限100px・下限は320px相当で64px */
        padding-top: clamp(64px, 20.04vw, 100px);
        padding-inline: 15px;
    }
}

.aircon-mv__image {
    width: 100%;
    max-width: 1026px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.aircon-mv__image picture {
    display: block;
}

.aircon-mv__image img {
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   スピード対応・メリットバッジ
   雲は擬似要素の背景画像。キャラ／キャッチ／数字は画像、タブ・カード・説明文はCSS。
   ※色・サイズ・余白・ブレークポイントは仮値（要確認）
   ----------------------------------------------------------------------------- */
.aircon-speed {
    /* 1280px以下で可変（-145/1280）。1280px以上は-145px・768px相当で-87px止まり */
    margin-top: clamp(-145px, -11.33vw, -87px);
}

@media (max-width: 1092px) {
    .aircon-speed {
        margin-top: -87px;
    }
}

@media (max-width: 730px) {
    .aircon-speed {
        margin-top: 0;
    }
}

/* 雲（装飾画像）。HTMLの <img> として表示する。 */
.aircon-speed__clouds img {
    display: block;
    width: 100%;
    height: auto;
}

.aircon-speed__inner {
    background-color: #fff;
    padding-right: 30px;
    padding-left: 30px;
}

@media (max-width: 768px) {
    .aircon-speed__inner {
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* パンくず（既存 the_breadcrumb をLPコンテンツ幅に合わせて中央寄せ） */
.aircon-speed__breadcrumb {
    max-width: 1180px;
    margin-inline: auto;
}

/* 見出し（キャラ＋テキスト一体画像） */
.aircon-speed__head {
    margin-inline: auto;
    width: 100%;
    max-width: 720px;
    /* 仮：一体画像の最大幅 */
}

.aircon-speed__heading {
    max-width: 825px;
    width: 100%;
    height: auto;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .aircon-speed__heading {
        max-width: 500px;
    }
}

.aircon-speed__heading img {
    width: 100%;
    height: auto;
}

/* 4枚のカード（行・列が均等に決まるため Grid） */
.aircon-speed__cards {
    display: grid;
    grid-template-columns: repeat(4, 329px);
    justify-content: center;
    gap: 46px 16px;
    margin-top: -50px;
}

@media (max-width: 1439px) {

    /* 1439px以下は2行2列 */
    .aircon-speed__cards {
        grid-template-columns: repeat(2, 329px);
    }
}

@media (max-width: 768px) {

    /* 768px以下も2列（2行2列）を維持。カード幅は画面に合わせて可変 */
    .aircon-speed__cards {
        grid-template-columns: repeat(2, minmax(0, 329px));
        /* 行方向のみ768px以下で可変（40/768）。上限40px・下限22px。列は12px固定 */
        gap: clamp(22px, 5.21vw, 40px) 12px;
        margin-top: 0;
    }
}

.aircon-speed__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: 324px;
    padding: 51px 34px 16px;
    background-color: #ffe41f;
    border-radius: 27px;
}

@media (max-width: 768px) {
    .aircon-speed__card {
        /* 768px以下で可変（20/768）。上限20px・下限9px */
        gap: clamp(9px, 2.60vw, 20px);
        height: clamp(151px, 45.57vw, 350px);
        padding: clamp(16px, 6.64vw, 51px) clamp(11px, 4.43vw, 34px) 16px;
    }
}



/* タブ（安い／見積り無料／早い／安心）はラベル画像 */
.aircon-speed__label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 263px;
}

@media (max-width: 768px) {
    .aircon-speed__label {
        max-width: 303px;
        padding-inline: 20px;
    }
}

.aircon-speed__label img {
    width: 100%;
    height: auto;
}

.aircon-speed__number {
    margin-top: 8px;
}

.aircon-speed__number img {
    width: 100%;
    height: auto;
}

/* 説明文は画像 */
.aircon-speed__desc {
    padding-inline: 19px;
}

@media (max-width: 768px) {
    .aircon-speed__desc {
        padding-inline: 0;
    }
}

.aircon-speed__desc img {
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   お問い合わせCTA（共通コンポーネント / template-parts/cta.php）
   複数セクションで使い回す。人物＋テキスト・各ボタンのコンテンツ・矢印・背景アイコンは画像。
   ボタンの色・角丸・配置はCSS。※色・サイズ・余白・ブレークポイントは仮値（要確認）
   ----------------------------------------------------------------------------- */

/* CTAを囲むセクション枠（既定は白） */
.aircon-ctablock {
    background-color: #fff;
    padding-block: 80px;
}

@media (max-width: 768px) {
    .aircon-ctablock {
        padding-block: 40px;
    }
}

/* 2回目（施工事例下）はクリーム背景 */
.aircon-ctablock--cream {
    background-color: #fffbee;
}

.aircon-ctablock__inner {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
}

.aircon-cta {
    position: relative;
    /* 人物写真の絶対配置の基準 */
    z-index: 0;
    /* 人物(z-index:-1)を内側に収めるための重なり文脈 */
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .aircon-cta {
        max-width: 500px;
    }
}

/* 上段: LINE・電話を右側に縦積み（gridは使わない） */
.aircon-cta__top {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {

    /* 768px以下は縦1列（人物が先頭→LINE→TEL） */
    .aircon-cta__top {
        flex-direction: column;
        align-items: center;
    }
}

.aircon-cta__top-buttons {
    width: 100%;
    /* LINE/TELボタンの幅。1080px以下で可変（728/1080）。上限728px・下限は769px相当 */
    max-width: clamp(518px, 67.41vw, 728px);
}

@media (max-width: 768px) {
    .aircon-cta__top-buttons {
        max-width: none;
        margin-top: -66px;
    }
}

/* LINEとTELの間隔は LINE 側の margin-bottom で取る */
.aircon-cta__btn--line {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .aircon-cta__btn--line {
        margin-bottom: 6px;
    }
}

/* 人物写真は左に絶対配置し、ボタンの背面へ重ねる（足元が見積りボタンの下に潜る） */
.aircon-cta__staff {
    position: absolute;
    left: 0;
    bottom: 36px;
    z-index: -1;
    width: clamp(283px, 36.76vw, 397px);
    /* 1080px以下で可変（397/1080）。上限397px・下限は769px相当 */
}

@media (max-width: 768px) {

    /* 縦1列時は重ねず通常配置（一番上） */
    .aircon-cta__staff {
        position: static;
        width: 100%;
        max-width: 340px;
        padding-inline: 20px;
    }
}

.aircon-cta__staff img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 397 / 391;
}

/* 下段: かんたん見積り（オレンジ）＋ メール（紺）を flex で横並び */
.aircon-cta__bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .aircon-cta__bottom {
        margin-top: 6px;
        gap: 6px;
    }
}

@media (max-width: 599px) {

    /* 599px以下は縦並び・中央寄せ（横並びは600px以上で維持） */
    .aircon-cta__bottom {
        flex-direction: column;
        align-items: center;
        margin-top: 1px;
        gap: 2px;
    }
}

.aircon-cta__btn--estimate,
.aircon-cta__btn--mail {
    width: 515px;
    /* 見積り/メールボタンの幅 */
    max-width: 100%;
}

/* ボタンはボタン全体を1枚の画像とする（色・形・矢印すべて画像内） */
.aircon-cta__btn {
    display: block;
}

.aircon-cta__btn img {
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   お悩み（こんな悩みありませんか？）
   人物・タイトル・チェックは画像。リスト文言・見出し・段落はテキスト。
   ※色・サイズ・余白・ブレークポイントは仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-worry {
    background-color: #002f7b;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 60px;
}

.aircon-worry__inner {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    margin-top: -99px;
}

@media (max-width: 768px) {
    .aircon-worry__inner {
        margin-top: 0;
    }
}

/* 見出し（人物＋テキスト一体画像） */
.aircon-worry__head {
    max-width: 900px;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .aircon-worry__head {
        max-width: 510px;
    }
}

.aircon-worry__heading img {
    width: 100%;
    height: auto;
}

/* 悩みリスト（2列×2行） */
.aircon-worry__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 70px;
    margin-top: 24px;
    width: fit-content;
    margin-inline: auto;
}

@media (max-width: 768px) {

    /* SPデザイン未確定のため暫定で1列 */
    .aircon-worry__list {
        grid-template-columns: 1fr;
    }
}

.aircon-worry__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.aircon-worry__check {
    flex-shrink: 0;
}

/* SVGは内在サイズが無いと潰れるため表示幅を明示 */
.aircon-worry__check img {
    display: block;
    width: 28px;
    height: auto;
    margin-top: 4px;
}

@media (max-width: 768px) {

    /* テキスト縮小（18px）に合わせてアイコンも縮小 */
    .aircon-worry__check img {
        width: 20px;
        margin-top: 1px;
    }
}

.aircon-worry__text {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .aircon-worry__text {
        font-size: 18px;
    }
}

/* リード（見出し＋段落） */
.aircon-worry__lead {
    margin-top: 40px;
    max-width: 937px;
    margin-inline: auto;
    letter-spacing: 0.07em;
}

@media (max-width: 768px) {
    .aircon-worry__lead {
        max-width: 510px;
    }
}

.aircon-worry__lead-title {
    font-size: 29px;
    font-weight: bold;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .aircon-worry__lead-title {
        font-size: 18px;
    }
}

.aircon-worry__lead-text {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: calc(24 / 14);
}

@media (max-width: 768px) {
    .aircon-worry__lead-text {
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   おすすめ商品
   キャラクター・見出しは画像。商品カードは後続で追記。
   ※色・サイズ・余白は仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-products {
    background-color: #002f7b;
    padding-top: 40px;
    padding-bottom: 110px;
}

@media (max-width: 768px) {
    .aircon-products {
        padding-top: 0;
    }
}

.aircon-products__inner {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
}

/* 見出し（キャラ＋テキスト一体画像） */
.aircon-products__head {
    margin-inline: auto;
    width: 100%;
    max-width: 750px;
    padding-inline: 15px;
}

@media (max-width: 768px) {
    .aircon-products__head {
        max-width: 530px;
    }
}

.aircon-products__heading img {
    width: 100%;
    height: auto;
}

/* 商品カード（2行2列） */
.aircon-products__cards {
    display: grid;
    grid-template-columns: repeat(2, 563px);
    justify-content: center;
    gap: 24px 14px;
    margin-top: -75px;
}

@media (max-width: 768px) {

    /* SPデザイン未確定のため暫定で1列。カードは最大563pxのまま中央寄せ */
    .aircon-products__cards {
        grid-template-columns: minmax(0, 563px);
        /* 768px以下で可変（-40/768）。768pxで-40px・下限は320px相当で-17px */
        margin-top: clamp(-40px, -5.21vw, -17px);
    }
}

/* 1199px以下はslickスライダー（footer-lp.phpで初期化）。初期化時はgridを解除。
   centerModeで左右をチラ見させるため、中央カード563px＋左右チラ見60px×2＝683pxに絞る */
.aircon-products__cards.slick-initialized {
    display: block;
    max-width: 683px;
    margin-inline: auto;
}

/* カード（=スライド）間の余白。スライドにmargin、リストに負のmarginで位置を補正 */
.aircon-products__cards .slick-list {
    margin-inline: -8px;
}

.aircon-products__cards .slick-slide {
    margin-inline: 8px;
}

/* 端のカード（先頭/末尾）では無効化された矢印を非表示
   （slickがinlineで display:block を付けるため、opacityで確実に消す） */
.aircon-products__cards .slick-disabled {
    opacity: 0;
    pointer-events: none;
}

/* 矢印（既存サイトの画像を使用。slickのフォント矢印 :before は無効化） */
.aircon-products__cards .slick-prev,
.aircon-products__cards .slick-next {
    width: 44px;
    height: 44px;
    z-index: 2;
}

.aircon-products__cards .slick-prev {
    left: -22px;
}

@media (max-width: 760px) {

    /* 狭い画面では見切れない範囲で、カードを少しはみ出す位置に */
    .aircon-products__cards .slick-prev {
        left: -12px;
    }
}

.aircon-products__cards .slick-next {
    right: -22px;
}

@media (max-width: 760px) {
    .aircon-products__cards .slick-next {
        right: -12px;
    }
}

.aircon-products__cards .slick-prev:before,
.aircon-products__cards .slick-next:before {
    content: '';
}

/* ドットインジケーター（CSSの丸で描画。slickフォントの「•」に依存しない） */
.aircon-products__cards .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.aircon-products__cards .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0;
}

.aircon-products__cards .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
}

.aircon-products__cards .slick-dots li button:before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    /* 未選択（ナビ背景で見える半透明白） */
    opacity: 1;
}

.aircon-products__cards .slick-dots li.slick-active button:before {
    background-color: #fff;
    /* 表示中（白） */
}

@media (max-width: 768px) {

    /* SPはドットを少し小さく（12px→9px） */
    .aircon-products__cards .slick-dots li {
        width: 9px;
        height: 9px;
    }

    .aircon-products__cards .slick-dots li button {
        width: 9px;
        height: 9px;
    }

    .aircon-products__cards .slick-dots li button:before {
        width: 9px;
        height: 9px;
    }
}

/* 商品カード本体 */
.aircon-card {
    height: 1032px;
    /* カード高さ */
    background-color: #fff;
    border-radius: 12px;
    padding-top: 16px;
    padding-left: 18px;
    padding-right: 5px;
    overflow: hidden;
}

/* 上部の一体画像（エアコン＋ロゴ＋スペックラベル） */
.aircon-card__image {
    width: 100%;
}

.aircon-card__image img {
    width: 100%;
    height: auto;
}

.aircon-card__body {
    padding: 20px;
}

@media (max-width: 768px) {
    .aircon-card__body {
        padding-inline: 5px 16px;
    }
}

.aircon-card__title {
    font-size: 23px;
    font-weight: bold;
    color: #333;
}

@media (max-width: 768px) {
    .aircon-card__title {
        font-size: 18px;
    }
}

.aircon-card__desc {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: calc(23 / 16);
}

@media (max-width: 768px) {
    .aircon-card__desc {
        font-size: 13px;
    }
}

/* 価格ブロック */
.aircon-card__prices {
    margin-top: 35px;
    display: grid;
    gap: 32px;
}

.aircon-card__price {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 41px;
}

.aircon-card__price-info {
    flex-shrink: 0;
}

.aircon-card__price-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 38px;
    background-color: #002f7b;
    border-radius: 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .aircon-card__price-tab {
        width: 98px;
        height: 30px;
        border-radius: 14px;
        font-size: 13px;
    }
}

.aircon-card__price-model {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: calc(20 / 16);
}

@media (max-width: 768px) {
    .aircon-card__price-model {
        font-size: 13px;
    }
}

/* 金額・税込はそれぞれ画像（連番 product_cost / product_cost_tax） */
.aircon-card__price-amount {
    text-align: right;
}

/* 価格画像の共通スタイル（幅は連番モディファイアの --price-w で個別指定。heightは自動で比率維持） */
.aircon-card__price-main img {
    display: block;
    width: var(--price-w);
    max-width: 100%;
    height: auto;
    margin-left: auto;
    /* 右寄せ */
}

@media (max-width: 768px) {

    /* 768px以下は各画像幅を0.8倍に縮小 */
    .aircon-card__price-main img {
        width: calc(var(--price-w) * 0.8);
    }
}

.aircon-card__price-tax img {
    display: block;
    width: var(--price-w);
    max-width: 100%;
    height: auto;
    margin-top: 4px;
    margin-left: auto;
    /* 右寄せ */
}

@media (max-width: 768px) {
    .aircon-card__price-tax img {
        width: calc(var(--price-w) * 0.8);
    }
}

/* 各カードの価格画像の幅（連番01〜08＝カード順×価格2行）。
   --price-w に基準幅を設定。768px以下は共通ルールで0.8倍に縮小される。 */
.aircon-card__price-main--01 img {
    --price-w: 283px;
}

.aircon-card__price-tax--01 img {
    --price-w: 142px;
}

.aircon-card__price-main--02 img {
    --price-w: 283px;
}

.aircon-card__price-tax--02 img {
    --price-w: 134px;
}

.aircon-card__price-main--03 img {
    --price-w: 310px;
}

.aircon-card__price-tax--03 img {
    --price-w: 151px;
}

.aircon-card__price-main--04 img {
    --price-w: 319px;
}

.aircon-card__price-tax--04 img {
    --price-w: 155px;
}

.aircon-card__price-main--05 img {
    --price-w: 316px;
}

.aircon-card__price-tax--05 img {
    --price-w: 157px;
}

.aircon-card__price-main--06 img {
    --price-w: 319px;
}

.aircon-card__price-tax--06 img {
    --price-w: 162px;
}

.aircon-card__price-main--07 img {
    --price-w: 318px;
}

.aircon-card__price-tax--07 img {
    --price-w: 155px;
}

.aircon-card__price-main--08 img {
    --price-w: 318px;
}

.aircon-card__price-tax--08 img {
    --price-w: 151px;
}

/* 標準工事費 */
.aircon-card__install {
    display: flex;
    align-items: center;
    height: 69px;
    background-color: #edf7f9;
    border-radius: 14px;
    /* 右上・右下のみ */
    margin-top: 30px;
}

@media (max-width: 768px) {
    .aircon-card__install {
        height: 55px;
    }
}

@media (max-width: 390px) {
    .aircon-card__install {
        height: 48px;
    }
}

.aircon-card__install-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 186px;
    height: 100%;
    background-color: #002f7b;
    border-radius: 14px 0 0 14px;
    /* 左上・左下のみ */
    color: #fff;
    font-size: 21px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .aircon-card__install-label {
        width: 149px;
        border-radius: 11px 0 0 11px;
        font-size: 16px;
    }
}

@media (max-width: 390px) {
    .aircon-card__install-label {
        width: 116px;
        font-size: 13px;
    }
}

.aircon-card__install-value {
    flex: 1;
    display: flex;
    align-items: flex-end;
    /* 数字と円（税込）を下揃え */
    justify-content: center;
    gap: 4px;
}

/* 数字（38,500） */
.aircon-card__install-num {
    font-family: 'Oswald', sans-serif;
    font-size: 37px;
    font-weight: 700;
    color: #ff0000;
    line-height: 1;
}

@media (max-width: 768px) {
    .aircon-card__install-num {
        font-size: 29px;
    }
}

@media (max-width: 390px) {
    .aircon-card__install-num {
        font-size: 24px;
    }
}

.aircon-card__install-value small {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1;
}

@media (max-width: 768px) {
    .aircon-card__install-value small {
        font-size: 13px;
    }
}

@media (max-width: 390px) {
    .aircon-card__install-value small {
        font-size: 12px;
    }
}

/* 商品一覧ボタン */
.aircon-products__more {
    margin-top: 50px;
    text-align: center;
}

/* -----------------------------------------------------------------------------
   汎用ボタン（オレンジのピル型）
   ※色・サイズ・余白は仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 638px;
    height: 104px;
    max-width: 100%;
    background-color: #f15a24;
    border: 2px solid #f15a24;
    /* 通常は背景と同色で目立たない。hover（白背景）時にオレンジ枠が見える */
    border-radius: 52px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
    /* 仮：下方向の影 */
    color: #fff;
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* hoverは色反転（背景オレンジ→白、文字白→オレンジ）。下線も出さない */
.aircon-btn:hover {
    background-color: #fff;
    color: #f15a24;
    text-decoration: none;
}

@media (max-width: 768px) {

    /* SPはフォーム下部の送信ボタン（max-width370px相当）に合わせて縮小 */
    .aircon-btn {
        display: flex;
        min-width: 0;
        width: 100%;
        max-width: 370px;
        height: 58px;
        margin-inline: auto;
        border-radius: 29px;
        box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
        font-size: 18px;
    }
}

/* -----------------------------------------------------------------------------
   施工事例
   見出しのキャラ・テキスト、カードのエアコン写真は画像。施工時間・価格・説明文はテキスト。
   ※色・サイズ・余白・ブレークポイントは仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-case {
    background-color: #fffbee;
    padding-top: 40px;
    padding-bottom: 60px;
}

.aircon-case__inner {
    width: 100%;
    max-width: 1360px;
    /* カード421px×3＋余白が収まる幅 */
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    margin-top: -95px;
}

@media (max-width: 768px) {
    .aircon-case__inner {
        margin-top: 0;
    }
}

/* 見出し（キャラ＋テキスト一体画像） */
.aircon-case__head {
    margin-inline: auto;
    width: 100%;
    max-width: 582px;
}

@media (max-width: 768px) {
    .aircon-case__head {
        max-width: 530px;
        padding-inline: 15px;
    }
}

.aircon-case__heading img {
    width: 100%;
    height: auto;
}

/* 事例カード（PC=3カラム固定・折り返さない。1200px未満はslickでスライダー化＝おすすめ商品と同様）。
   カード幅はminmax(0,421px)で、3枚が収まらない幅では縮む（wrapはさせない）。 */
.aircon-case__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 421px));
    justify-content: center;
    gap: 15px;
    margin-top: -65px;
}

@media (max-width: 560px) {
    .aircon-case__cards {
        /* 560px以下で可変（-65/560）。560pxで-65px・下限は320px相当で-37px */
        margin-top: clamp(-65px, -11.61vw, -37px);
    }
}

/* ▼ 1199px以下：slickでスライダー表示（footer-lp.php の airconCaseSlider で初期化） */
.aircon-case__cards.slick-initialized {
    display: block;
    max-width: 541px;
    /* カード421px＋左右チラ見分 */
    margin-inline: auto;
}

/* カード（=スライド）間の余白。スライドにmargin、リストに負のmarginで位置を補正 */
.aircon-case__cards .slick-list {
    margin-inline: -8px;
}

.aircon-case__cards .slick-slide {
    margin-inline: 8px;
}

/* 端のカード（先頭/末尾）では無効化された矢印を非表示 */
.aircon-case__cards .slick-disabled {
    opacity: 0;
    pointer-events: none;
}

/* 矢印（既存サイトの画像を使用。slickのフォント矢印 :before は無効化） */
.aircon-case__cards .slick-prev,
.aircon-case__cards .slick-next {
    width: 44px;
    height: 44px;
    z-index: 2;
}

.aircon-case__cards .slick-prev {
    left: -22px;
}

@media (max-width: 760px) {

    /* 狭い画面では見切れない範囲で、矢印を内側に */
    .aircon-case__cards .slick-prev {
        left: -12px;
    }
}

.aircon-case__cards .slick-next {
    right: -22px;
}

@media (max-width: 760px) {
    .aircon-case__cards .slick-next {
        right: -12px;
    }
}

.aircon-case__cards .slick-prev:before,
.aircon-case__cards .slick-next:before {
    content: '';
}

/* ドットインジケーター（クリーム背景で見えるよう紺色で描画） */
.aircon-case__cards .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.aircon-case__cards .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0;
}

.aircon-case__cards .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
}

.aircon-case__cards .slick-dots li button:before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 47, 123, 0.25);
    /* 未選択（紺の半透明） */
    opacity: 1;
}

.aircon-case__cards .slick-dots li.slick-active button:before {
    background-color: #002f7b;
    /* 表示中（紺） */
}

@media (max-width: 768px) {

    /* SPはドットを少し小さく（12px→9px） */
    .aircon-case__cards .slick-dots li,
    .aircon-case__cards .slick-dots li button,
    .aircon-case__cards .slick-dots li button:before {
        width: 9px;
        height: 9px;
    }
}

.aircon-case__card {
    width: 421px;
    height: 530px;
    max-width: 100%;
    padding: 16px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .aircon-case__card {
        height: 495px;
        padding: 10px 10px 15px;
    }
}

@media (max-width: 375px) {
    .aircon-case__card {
        height: auto;
    }
}

.aircon-case__image {
    width: 386px;
    height: 238px;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 6px;
}

.aircon-case__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 施工時間・参考価格 */
.aircon-case__spec {
    margin-top: 34px;
    display: grid;
    padding-inline: 20px;
}

@media (max-width: 768px) {
    .aircon-case__spec {
        padding-inline: 15px;
    }
}

.aircon-case__spec-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aircon-case__spec-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 89px;
    height: 26px;
    background-color: #f2f2f2;
    border-radius: 13px;
    color: #333;
    font-size: 12px;
    font-weight: normal;
    /* regular */
}

@media (max-width: 768px) {
    .aircon-case__spec-label {
        font-size: 11px;
    }
}

.aircon-case__spec-value {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

@media (max-width: 768px) {
    .aircon-case__spec-value {
        font-size: 14px;
    }
}

.aircon-case__price {
    font-family: 'Oswald', sans-serif;
    font-size: 37px;
    font-weight: 700;
    color: #ff0000;
}

@media (max-width: 768px) {
    .aircon-case__price {
        font-size: 25px;
    }
}

.aircon-case__spec-value small {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-left: 5px;
}

@media (max-width: 768px) {
    .aircon-case__spec-value small {
        font-size: 12px;
    }
}

.aircon-case__desc {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    line-height: calc(27 / 16);
    letter-spacing: 0.1em;
    padding-inline: 22px;
}

@media (max-width: 768px) {
    .aircon-case__desc {
        font-size: 14px;
        padding-inline: 15px;
    }
}

/* -----------------------------------------------------------------------------
   サービスの流れ
   白背景の上に背景画像パネルを重ねる（パネルの上下左右に白の余白）。見出しは画像。
   ※背景画像・サイズ・余白は仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-flow {
    /* 上下＋左右に余白を取り、内側パネルの周囲に白フチを作る */
    padding: 50px 16px 60px;
    background-color: #fff;
}

.aircon-flow__inner {
    width: 100%;
    max-width: 1478px;
    margin-right: auto;
    margin-left: auto;
    padding: 60px 24px;
    background-image: url("../img/lp_air-conditioner/flow-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

@media (max-width: 768px) {

    .aircon-flow__inner {
        background-image: url("../img/top/mizu_bg_50.png");
        background-repeat: repeat;
        background-position: top left;
        background-size: auto;
        padding: 40px 15px;
    }
}

/* 見出し（ラップ最大1180px・中央寄せ／画像は左寄せ最大423px） */
.aircon-flow__title {
    max-width: 1180px;
    margin-inline: auto;
    text-align: left;
}

@media (max-width: 768px) {

    /* 768px以下は中央寄せ */
    .aircon-flow__title {
        text-align: center;
    }
}

.aircon-flow__title img {
    display: inline-block;
    width: 100%;
    max-width: 423px;
    height: auto;
}

@media (max-width: 768px) {

    /* 768px以下は画像自体を中央寄せ（width:100%でも確実に中央へ） */
    .aircon-flow__title img {
        display: block;
        margin-inline: auto;
    }
}

/* STEPリスト（最大1180px・中央寄せ） */
.aircon-flow__steps {
    display: grid;
    max-width: 1180px;
    margin-inline: auto;
    gap: 10px;
    margin-top: 32px;
}

.aircon-flow__step {
    display: grid;
    grid-template-columns: auto 1fr;
    /* 左マーカー列はアイコン画像の幅にフィット（SPでアイコンが縮むと列も縮む） */
    gap: 43px;
    align-items: stretch;
    /* マーカーを行の高さまで伸ばし、余白をドットで埋められるように */
}

@media (max-width: 620px) {
    .aircon-flow__step {
        gap: 10px;
    }
}

/* 左マーカー（STEPラベル＋円アイコン＋接続ドット） */
.aircon-flow__step-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aircon-flow__step-label img {
    width: 60px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 620px) {
    .aircon-flow__step-label img {
        width: 40px;
    }
}

.aircon-flow__step-icon {
    margin-top: 8px;
}

.aircon-flow__step-icon img {
    width: 165px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 620px) {
    .aircon-flow__step-icon img {
        /* 620px以下で可変（100/620）。上限100px・下限70px */
        width: clamp(70px, 16.13vw, 100px);
    }
}

/* 次のステップへ繋がるドット（擬似要素・CSSで描画）。
   flex:1 でマーカー内の余白を埋めて縦に伸び、repeat-y でドットがリピート。
   基準の高さは32px（min-height）、次ステップとの余白が広がるほど伸びる。 */
.aircon-flow__step-marker::after {
    content: "";
    flex: 1;
    width: 11px;
    min-height: 60px;
    /* 最低4ドット（15px周期×4）。余白が広がればさらにリピートで伸びる */
    margin-top: 8px;
    background-image: radial-gradient(circle, #002f7b 3.5px, transparent 4px);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 11px 15px;
    /* 1ドットの周期（縦15px） */
}

@media (max-width: 768px) {

    /* SPはドットを少し小さく（ドット径・周期を縮小） */
    .aircon-flow__step-marker::after {
        width: 8px;
        background-image: radial-gradient(circle, #002f7b 2.5px, transparent 3px);
        background-size: 8px 12px;
    }
}

/* 最後のステップはドットを表示しない */
.aircon-flow__step-marker--last::after {
    content: none;
}

/* 右側の説明カード */
.aircon-flow__step-body {
    align-self: start;
    max-width: 967px;
    min-height: 173px;
    padding: 20px 24px;
    background-color: #fff;
    border-radius: 27px;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.15);
}

@media (max-width: 620px) {
    .aircon-flow__step-body {
        padding: 10px 15px 15px;
        margin-bottom: 20px;
    }
}

.aircon-flow__step-title {
    color: #002f7b;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

@media (max-width: 620px) {
    .aircon-flow__step-title {
        /* 620px以下で可変（20/620）。上限20px・下限15px */
        font-size: clamp(16px, 3.23vw, 20px);
    }
}

.aircon-flow__step-desc {
    margin-top: 8px;
    font-size: 15px;
    color: #231815;
    line-height: calc(28 / 15);
}

@media (max-width: 620px) {
    .aircon-flow__step-desc {
        font-size: 13px;
    }
}

.aircon-flow__step-note {
    margin-top: 4px;
    font-size: 13px;
    line-height: calc(20 / 13);
}

/* -----------------------------------------------------------------------------
   選ばれる3つの理由
   白背景の上に背景画像を重ねる。見出し（人物＋テキスト）・数字・見出しテキストは画像。
   理由1のみ横長（全幅）、理由2・3は2列。※背景画像・色・サイズ・余白は仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-reason {
    background-color: #dff0f7;
    background-image: url("../img/lp_air-conditioner/reason-bg.png");
    /* 仮：背景に重ねる背景画像 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 60px;
}

.aircon-reason__inner {
    width: 100%;
    max-width: 1195px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
}

.aircon-reason__title {
    text-align: left;
    padding-left: 20px;
}

@media (max-width: 768px) {

    .aircon-reason__title {
        text-align: center;
        padding-right: 15px;
        padding-left: 15px;
    }
}

.aircon-reason__title img {
    display: inline-block;
    width: 100%;
    max-width: 608px;
    height: auto;
}

@media (max-width: 768px) {
    .aircon-reason__title img {
        max-width: 500px;
    }
}

/* カード（理由1=全幅／理由2・3=2列） */
.aircon-reason__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1180px;
    margin-inline: auto;
    gap: 24px 20px;
    margin-top: -78px;
}

@media (max-width: 768px) {

    /* SPデザイン未確定のため暫定で1列 */
    .aircon-reason__cards {
        grid-template-columns: 1fr;
        /* 768px以下で可変（-60/768）。768pxで-60px・下限は320px相当で-25px */
        margin-top: clamp(-60px, -12.81vw, -25px);
    }
}

.aircon-reason__card {
    padding: 33px 50px;
    background-color: #fff;
    border-radius: 20px;
}

@media (max-width: 550px) {
    .aircon-reason__card {
        padding: 20px 15px;
    }
}

/* 理由1のみ横長（全幅） */
.aircon-reason__card--wide {
    grid-column: 1 / -1;
}

.aircon-reason__heading img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 見出し画像はカードごとに横幅が異なるため個別に最大幅を指定 */
/* 1枚目（横長カード） */
.aircon-reason__card--wide .aircon-reason__heading img {
    max-width: 395px;
}

/* 2枚目（下段左） */
.aircon-reason__card:nth-of-type(2) .aircon-reason__heading img {
    max-width: 349px;
}

/* 3枚目（下段右） */
.aircon-reason__card:nth-of-type(3) .aircon-reason__heading img {
    max-width: 364px;
}

.aircon-reason__desc {
    margin-top: 31px;
    font-size: 15px;
    line-height: calc(28 / 15);
    padding-inline: 10px;
}

@media (max-width: 768px) {

    /* 768px以下は13px */
    .aircon-reason__desc {
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   会社について（写真スライダー）
   既存サイトの slick を使用。
   ★slickの読み込み・初期化（slidesToShow/centerPadding等）は footer-lp.php の
     is_page('lp_airconditioner') ブロックに記述（CSSではなくそちらで調整）。
   ★対象マークアップは page-lp_airconditioner.php の .aircon-company__slider。
   スライドの幅・配置は slick が制御。ここでは余白と画像の見た目のみ。
   ※余白・角丸は仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-company {
    padding-block: 60px;
    background-color: #fff;
}

/* slick 初期化前のちらつき防止（横並びを隠す） */
.aircon-company__slider {
    overflow: hidden;
}

/* slick 初期化前は1枚目以外を隠す */
.aircon-company__slide {
    display: none;
}

.aircon-company__slide:first-child {
    display: block;
}

/* slick 初期化後は各スライドを表示（slick-initialized が付与される） */
.slick-initialized .aircon-company__slide {
    display: block;
}

.aircon-company__image {
    padding-right: 8px;
    /* 仮：スライド間の余白 */
    padding-left: 8px;
}

.aircon-company__image img {
    display: block;
    width: 483px;
    height: auto;
    border-radius: 12px;
}

@media (max-width: 768px) {

    /* 768px以下はスライド画像を300px幅に */
    .aircon-company__image img {
        width: 300px;
    }
}

/* 会社情報・対応エリア（スライダー下） */
.aircon-company__inner {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 60px;
    padding-inline: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 仮：左=会社情報／右=対応エリア */
    gap: 32px;
}

@media (max-width: 768px) {

    /* SPデザイン未確定のため暫定で1列 */
    .aircon-company__inner {
        grid-template-columns: 1fr;
        margin-top: 40px;
        padding-inline: 16px;
    }
}

.aircon-company__logo img {
    width: 227px;
    max-width: 100%;
    height: auto;
}

.aircon-company__details {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.aircon-company__detail {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aircon-company__detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
}

/* SVGに width/height 属性が無いため寸法を明示。幅はアイコンごとに異なる（高さはアスペクト比で自動） */
.aircon-company__detail-icon img {
    width: auto;
    height: auto;
}

/* 1つ目：住所 */
.aircon-company__detail:nth-of-type(1) .aircon-company__detail-icon img {
    width: 15px;
}

/* 2つ目：電話 */
.aircon-company__detail:nth-of-type(2) .aircon-company__detail-icon img {
    width: 16px;
}

/* 3つ目：受付時間 */
.aircon-company__detail:nth-of-type(3) .aircon-company__detail-icon img {
    width: 19px;
}

/* 4つ目：定休日 */
.aircon-company__detail:nth-of-type(4) .aircon-company__detail-icon img {
    width: 17px;
}

.aircon-company__detail-text {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {

    /* 768px以下は13px */
    .aircon-company__detail-text {
        font-size: 13px;
    }
}

.aircon-company__area-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 134px;
    height: 30px;
    background-color: #002f7b;
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {

    /* 768px以下は他テキストとのバランスで少し小さく */
    .aircon-company__area-label {
        width: 118px;
        height: 26px;
        border-radius: 13px;
        font-size: 14px;
    }
}

.aircon-company__area-text {
    margin-top: 16px;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 768px) {

    .aircon-company__area-text {
        font-size: 15px;
    }
}

/* Googleマップ（全幅） */
.aircon-company__map {
    max-width: 1200px;
    margin-top: 60px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (max-width: 768px) {
    .aircon-company__map {
        margin-top: 40px;
    }
}

.aircon-company__map-frame {
    display: block;
    width: 100%;
    height: 478px;
    border: 0;
}

@media (max-width: 768px) {

    /* 768px以下は高さを小さく */
    .aircon-company__map-frame {
        height: 300px;
    }
}

/* -----------------------------------------------------------------------------
   お問い合わせフォーム
   雲は擬似要素の背景画像。吹き出し・見出し・ステップ内テキスト・三角は画像。円はCSS。
   ※雲画像・色・サイズ・余白・ブレークポイントは仮値（要確認）
   ----------------------------------------------------------------------------- */

.aircon-form {
    background-color: #fff;
}

/* セクション上部の雲（装飾）。MV下（.aircon-speed__clouds）と同じく全幅画像として設置 */
.aircon-form__clouds img {
    display: block;
    width: 100%;
    height: auto;
}

.aircon-form__inner {
    background-color: #edf5f7;
    width: 100%;
    padding: 1px 16px 60px;
}

/* 吹き出し＋見出し（一体画像） */
.aircon-form__head {
    max-width: 644px;
    margin-inline: auto;
    margin-top: -175px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {

    /* 768px以下は最大500px＋左右15px余白 */
    .aircon-form__head {
        max-width: 500px;
        padding-inline: 15px;
        /* 768px以下で可変（-140/768）。768pxで-140px・下限は320px相当で-58px */
        margin-top: clamp(-140px, -18.23vw, -58px);
    }
}

.aircon-form__head img {
    width: 100%;
    height: auto;
}

/* 入力ステップ（円はCSS／中のテキスト・三角は画像） */
.aircon-form__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 768px) {

    /* SPデザイン未確定のため暫定で縮小（折り返しは許可） */
    .aircon-form__steps {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.aircon-form__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border: 2px solid #e60012;
    border-radius: 50%;
    background-color: #faf0d7;
}

/* 最終ステップ（完了）はオレンジ塗り */
.aircon-form__step--active {
    border-color: #e8821e;
    background-color: #e8821e;
}

.aircon-form__step-text img {
    width: 100%;
    height: auto;
}

.aircon-form__step-arrow {
    flex-shrink: 0;
}

.aircon-form__step-arrow img {
    width: 100%;
    height: auto;
}

.aircon-form__note {
    margin-top: 24px;
    font-size: 14px;
    text-align: center;
}

/* フォーム本体（送信処理は既存プラグイン側。ここは見た目＋バリデーション表示のみ） */
.aircon-form__form {
    margin-top: 32px;
}

/* 入力行をまとめる枠（全体をボーダーで囲む） */
.aircon-form__table {
    background-color: #fff;
    border: 1px solid #fde0ba;
}

.aircon-form__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    /* 仮：ラベル幅 */
    border-bottom: 1px solid #fde0ba;
}

@media (max-width: 768px) {

    /* SPデザイン未確定のため暫定で縦積み */
    .aircon-form__row {
        grid-template-columns: 1fr;
    }
}

/* 最終行の下線は枠線と重なるため消す */
.aircon-form__row:last-child {
    border-bottom: 0;
}

/* 必須項目の行は背景色を付ける */
.aircon-form__row--required {
    background-color: #fff6ee;
}

.aircon-form__label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
}

.aircon-form__label-text {
    font-weight: bold;
}

/* 必須バッジ */
.aircon-form__badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 10px;
    background-color: #e60012;
    border-radius: 9999px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.aircon-form__field {
    padding: 24px;
    border-left: 1px solid #fde0ba;
    /* ラベルとの区切り（縦線） */
}

@media (max-width: 768px) {

    /* 縦積み時は縦線を消す */
    .aircon-form__field {
        border-left: 0;
    }
}

/* 入力欄共通 */
.aircon-form__input {
    width: 100%;
    padding: 14px 20px;
    border: 1px solid #fde0ba;
    border-radius: 9999px;
    /* 仮：ピル型 */
    background-color: #fff;
}

.aircon-form__input--zip {
    width: 200px;
    max-width: 100%;
}

.aircon-form__textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #fde0ba;
    border-radius: 16px;
    background-color: #fff;
    resize: vertical;
}

/* チェックボックス（テキスト部分も含めてクリック可能・ポインター） */
.aircon-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    /* クリック領域を内容幅に限定（行幅いっぱいにしない） */
    cursor: pointer;
}

.aircon-form__check+.aircon-form__check {
    margin-top: 8px;
}

/* 補足テキスト */
.aircon-form__help {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #888;
}

/* フォーム上部のリード文 */
.aircon-form__lead {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 100;
    /* 一番細い太さ */
    color: #000;
    text-align: center;
}

/* フォーム本体の最大幅（estimate流用。estimate側CSSは触らずここで指定） */
.mail01_01.alleft {
    max-width: 910px;
    margin-inline: auto;
}

/* 個人情報の取り扱い文（LP専用に自己完結。estimateクラス(.p_w90等)の !important 干渉を避けるため付け替え済み） */
.aircon-form__privacy-note {
    max-width: 782px;
    margin: 35px auto 0;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    text-align: left;
    padding-inline: 16px;
}

/* 送信ボタン（sub.css の input[type="submit"] を紺色に上書き。詳細度を上げて確実に適用） */
.lp-aircon input[type="submit"] {
    background: #002f7b;
    border-color: #002f7b;
    margin-top: 35px;
}

/* hoverは色に合わせて反転（白背景＋紺文字＋紺枠） */
.lp-aircon input[type="submit"]:hover {
    background: #fff;
    color: #002f7b;
}

/* チェックボックスのカスタマイズ（赤系のチェックを表示） */
.aircon-form__check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

.aircon-form__check input[type="checkbox"]:checked {
    /* チェック時は赤系（LPアクセントオレンジ寄り）のチェックマークを描画 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23e8542a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5 L8.5 15 L16 5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

/* 郵便番号ブロック（郵便番号ラベル＋入力＋補足を横並び。以降に住所入力） */
.aircon-form__zip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 12px;
}

.aircon-form__zip-label {
    font-weight: bold;
}

/* 郵便番号入力は幅を絞る（estimateの .text は全幅のため上書き） */
.aircon-form__zip-input {
    width: auto;
    max-width: 220px;
}

.aircon-form__zip-note {
    flex: 1;
    min-width: 220px;
    margin: 0;
    font-size: 12px;
    color: #666;
}

/* バリデーションエラー（未入力必須項目に表示） */
.aircon-form__error {
    margin-top: 8px;
    color: #e60012;
    font-size: 13px;
    font-weight: bold;
}

/* 個人情報の取り扱い文 */
.aircon-form__privacy {
    margin-top: 24px;
    font-size: 13px;
    line-height: calc(22 / 13);
    text-align: center;
}

/* 送信（確認）ボタン */
.aircon-form__submit {
    margin-top: 32px;
    text-align: center;
}

.aircon-form__submit-btn {
    min-width: 320px;
    max-width: 100%;
    padding: 16px 40px;
    border: 0;
    border-radius: 9999px;
    background-color: #1b2a6b;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 768px) {
    .aircon-form__submit-btn {
        min-width: 0;
        width: 100%;
    }
}