@charset "utf-8";
/*
 * ======================================
 * site.css — 有限会社前野印刷 サイト固有CSS
 * 共通CSS(main.css)で再現できない値・サイト固有の装飾のみを追加する。
 * ======================================
 *
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * --------------------------------------
 * ＜site.css（全ページ共通）＞
 * .maeno-logo            - ヘッダー/フッターのテキストロゴ（社名＋英字）
 * .footer-bottom--brand  - コピーライト行をメインカラー背景＋白文字に
 * .header--scrolled      - スクロール時のヘッダー影強調（common.js が付与）
 * ＜top-custom.css＞
 * .maeno-mv / __slideshow / __catch / __copy 等 - メインビュー（#slideshow外枠＋キャッチ）
 * .maeno-about-img       - About 写真2枚の段違い配置
 * .maeno-lead            - 大きめリード文（参考サイト big-p 相当）
 * .maeno-service-card    - サービスカード（アイコンをパネル内 contain 表示）
 * ＜service-custom.css＞
 * .maeno-product         - 取扱商品カード（画像＋説明の横並び）
 * .maeno-flow            - ご依頼の流れ STEP（番号バッジ色＋下向きコネクター）
 * ＜contact-custom.css＞
 * .maeno-form*           - お問い合わせフォーム（行レイアウト・必須バッジ・チェック群）
 * .maeno-map             - アクセス地図の高さ
 *
 *  ※ ページ固有スタイルは各ページCSSに分離：
 *     top-custom.css / service-custom.css / contact-custom.css
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類整理）
 * ======================================
 * ［値の粒度不足］
 *   - heading-logo の __name が最大 1.4rem 固定。サイトの主ロゴとして使うには
 *     小さく、サイズ上書きが必要だった（.maeno-logo）。
 *   - 大きめリード文（big-p 相当 ＝ 3rem 前後の強調文）が無く自作（.maeno-lead）。
 * ［状態不足］
 *   - card-flow の番号色が $accent_color 固定。ベースカラーのSTEPバッジにする
 *     色変更フックが無かった（.maeno-flow で上書き）。
 * ［構造不足］
 *   - 写真2枚を段違いに並べる About 用の2枚組レイアウトが無く自作
 *     （.maeno-about-img）。
 *   - 画像（アイコン）をパネル内 contain 表示するカードが無く自作
 *     （.maeno-service-card / .maeno-product）。
 *   - お問い合わせフォームのレイアウト（ラベル＋入力の行組み）が form-input 単体
 *     しか無く、行レイアウト・必須バッジ・チェック群を自作（.maeno-form*）。
 * ［装飾パターン不足 / 色不足］
 *   - footer-bottom にメインカラー背景の色バリエーションが無く追加
 *     （.footer-bottom--brand。既存は --dark / --pastel / --base-light のみ）。
 * ［指定方向不足］
 *   - 特になし。
 */

/* --------------------------------------------------
 * 固定ヘッダー（header-bar）分のオフセット
 * -------------------------------------------------- */
body {
    padding-top: 80px;
    font-weight: 500;
}
@media screen and (max-width: 1100px) {
    body {
        padding-top: 60px;
    }
}

/* --------------------------------------------------
 * テキストロゴ（社名＋英字）
 * -------------------------------------------------- */
.maeno-logo {
    gap: 0;
}
.maeno-logo .header-logo__name {
    font-size: 2.6rem;
    color: #004EA1;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.maeno-logo .header-logo__sub {
    font-family: "Oswald", sans-serif;
    font-size: 0.95rem;
    color: #00B3E8;
    letter-spacing: 0.28em;
    font-weight: 600;
    margin-top: 2px;
}
.maeno-logo--footer .header-logo__name {
    font-size: 2.8rem;
}

/* ヘッダーナビ（日本語ラベル）の文字サイズ */
.header__nav-ja {
    font-size: 1.7rem;
}

/* --------------------------------------------------
 * コピーライト行：メインカラー背景＋白文字（フッターの「締め」）
 * -------------------------------------------------- */
.footer-bottom--brand {
    background: #004EA1;
}
.footer-bottom--brand .footer-bottom__copyright {
    color: rgba(255, 255, 255, 0.9);
}

/* フッターCTAのメールボタン：文字色をメインカラーに（白ボタン上） */
.footer-cta__mail {
    color: #004EA1;
    font-weight: 600;
}

/* --------------------------------------------------
 * お問い合わせCTA帯：横2カラムでコンパクトに
 * （縦の間延び・左右余白対策。左:見出し+説明／右:電話+受付+ボタン）
 * -------------------------------------------------- */
.maeno-cta {
    padding: 60px 0;
}
.maeno-cta .footer-cta__inner {
    max-width: 1100px;
    gap: 50px;
    padding: 0 5%;
    align-items: center;
}
.maeno-cta__heading {
    margin-bottom: 16px;
}
.maeno-cta__heading .heading__en {
    font-size: 3.4rem;
}
.maeno-cta__heading .heading__ja {
    font-size: 2.2rem;
    margin-top: 4px;
}
.maeno-cta .footer-cta__desc {
    font-size: 1.4rem;
    line-height: 1.9;
}
.maeno-cta .footer-cta__right {
    align-items: flex-start;
    gap: 8px;
}
.maeno-cta .footer-cta__tel {
    line-height: 1.1;
}
.maeno-cta__hours {
    font-size: 1.4rem;
    opacity: 0.85;
}
.maeno-cta .footer-cta__mail {
    margin-top: 10px;
}
@media screen and (max-width: 896px) {
    .maeno-cta {
        padding: 44px 0;
    }
    .maeno-cta .footer-cta__right {
        align-items: center;
    }
}

/* --------------------------------------------------
 * フッター本体（参考レイアウト）
 * 左：中央寄せ（ロゴ→住所→「｜」区切りナビ）／右：地図大きめ
 * -------------------------------------------------- */
.footer-body__inner {
    max-width: 1300px;
    align-items: center;
}
.footer-body__left {
    width: 42%;
    text-align: center;
}
.footer-body__right {
    width: 54%;
}
.footer-body__map {
    height: 240px;
}
/* ロゴ：中央寄せ＋下余白 */
.footer-body__left .header-logo {
    justify-content: center;
    margin-bottom: 18px;
}
/* 会社情報テキスト：黒・中央 */
.footer-body__info {
    color: #333;
    margin-bottom: 24px;
}
/* ナビ：中央寄せ＋縦棒区切り */
.footer-body__nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 0;
    white-space: nowrap;
}
.footer-body__nav-item {
    position: relative;
    padding: 0 18px;
}
.footer-body__nav-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1em;
    background: #cfd8e2;
}
@media screen and (max-width: 896px) {
    .footer-body__left,
    .footer-body__right {
        width: 100%;
    }
}

/* --------------------------------------------------
 * スクロール時のヘッダー影を少し強める（common.js が付与）
 * -------------------------------------------------- */
.header--scrolled {
    box-shadow: 0 4px 16px rgba(0, 78, 161, 0.12);
}

/* --------------------------------------------------
 * セクション背景画像（bg01.jpg）を30%透過で敷く
 * TOPのABOUT・会社概要の代表挨拶で共用
 * -------------------------------------------------- */
.maeno-about-section {
    position: relative;
    overflow: hidden;
}
.maeno-about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28297/bg01.jpg") center center / cover no-repeat;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}
.maeno-about-section > .container,
.maeno-about-section > .container-narrow {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------
 * 全ページ共通：画像・ボタンの角丸をなしにする（直角）
 * ※ フォーム入力欄など、画像・ボタン以外は対象外
 * -------------------------------------------------- */
img,
.btn,
.btn-pill,
.btn-circle-arrow,
.btn-frame,
.btn-offset,
.btn-cta-mail,
.btn-cta-line,
.btn-cta-tel--bordered,
.btn-submit,
.footer-cta__mail,
.card-service__item,
.card-service__img,
.card-bnr__item,
.card-photo,
.card-blog__img,
.mbox,
.news-box,
.embed,
.footer-body__map {
    border-radius: 0;
}