@charset "UTF-8";

/* =========================================================
   style.css - 会社概要（company）専用

   ページタイトル帯 / 定義リスト（.spec__*）/ お問い合わせ帯 / フッターは
   すべて base.css 側にあるので、このファイルは余白の指定だけになる。
   定義リストは施工事例詳細の「施工概要」と同じ組み。
   ========================================================= */

/* =========================================================
   会社概要
   ========================================================= */

.spec {
    padding-top: 122px;
}

.spec__list {
    margin-top: 114px;
}

/* =========================================================
   お問い合わせ帯
   本体は base.css の .contact-cta。ここは上の余白だけ。
   ========================================================= */

.contact-cta {
    margin-top: 301px;
}

/* =========================================================
   スクロールで浮かび上がる演出
   ========================================================= */

.js-fadeIn {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.js-fadeIn.is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   SP（768px 以下）
   ========================================================= */

@media (max-width: 768px) {

    .spec {
        padding-top: 56px;
    }

    .spec__list {
        margin-top: 40px;
    }

    .contact-cta {
        margin-top: 90px;
    }
}

/* =========================================================
   小さめのスマホ（480px 以下）
   デザインどおりの改行位置だと 1 行が画面幅を超えるので、
   このサイズからは <br> を無効にして自然折り返しに任せる。
   ========================================================= */

@media (max-width: 480px) {

    .contact-cta__text br {
        display: none;
    }
}

/* =========================================================
   アニメーション抑制
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .js-fadeIn {
        opacity: 1;
        transform: none;
        transition: none;
    }
}