@charset "UTF-8";

/**
 * ファイル名: css/contract_category.css
 * 更新日: 2026-04-07
 * 管理部署: システム管理課
 * --------------------------------------------------------------------------
 * 【管理メモ】
 * 01. 大タイトル(c-contract-hero): style.cssのヒーロー指針に基づき実装。
 * 02. セクションタイトル(c-heading-primary): 御幸ブルーのアクセント。
 * 03. 3カラムレイアウト(p-contract-card-grid): 3個並びのカード設定。
 * 04. 番号・アイコン付きカード(c-contract-step-card): 視認性最大化。
 * 05. 印刷設定: style.cssの横並び維持設定を継承。
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   01. 大タイトル（ヒーローエリア）デザイン
   -------------------------------------------------------------------------- */
.c-contract-hero {
    position: relative;
    height: 400px; /* style.css の共通高さに準拠 */
    display: flex;
    align-items: center;
    background-color: #000;
    overflow: hidden;
    margin-bottom: 50px;
}

.c-contract-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; /* 写真の上の白文字を際立たせる */
}

.c-contract-hero__content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.c-contract-hero__title {
    font-size: 2.8rem;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   02. セクションタイトル（御幸ブルーの装飾）
   -------------------------------------------------------------------------- */
.c-heading-primary {
    border-left: 6px solid #0070b8;
    padding: 10px 20px;
    background-color: #f8fafc;
    margin-bottom: 35px;
    font-size: 1.6rem;
}

/* --------------------------------------------------------------------------
   03. 3カラムレイアウト設定
   -------------------------------------------------------------------------- */
.p-contract-card-grid {
    display: flex;
    gap: 20px;
    align-items: stretch; /* カードの高さを一番長いものに合わせる */
    margin: 40px 0;
}

/* --------------------------------------------------------------------------
   04. カード装飾（番号・アイコン付き）
   -------------------------------------------------------------------------- */
.c-contract-step-card {
    flex: 1;
    background: #fff;
    border: 1px solid #dce4ec;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.c-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.c-card-number {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.5rem;
    color: #e2e8f0; /* 背景に馴染む薄いグレー番号 */
    line-height: 1;
}

.c-card-icon {
    font-size: 2rem;
    background-color: #f0f7ff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.c-card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #0070b8;
    border-bottom: 2px solid #f0f7ff;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.c-card-body {
    font-size: 0.9rem;
    line-height: 1.9;
    color: #333;
}

/* --------------------------------------------------------------------------
   05. Responsive & 06. Print (style.css継承)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .p-contract-card-grid { flex-direction: column; }
}

@media print {
    /* style.css の設定を優先しつつ、カード幅を調整 */
    .p-contract-card-grid {
        display: flex !important;
        flex-direction: row !important;
    }
    .c-contract-step-card {
        width: 32% !important;
        border: 1px solid #ccc !important;
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 07. 瑕疵担保履行法セクション用
 * --------------------------------------------------------------------------
 */

/* 07-1. 補足情報ボックス（活用・実務など） */
.u-small-box {
    background: #f0f7ff;
    padding: 30px;
    border: 1px solid #dceeff;
    border-radius: 8px;
    margin: 30px 0;
    font-size: 0.95rem;
    line-height: 1.9;
}

/* 07-2. セクション内のリスト調整 */
.u-list-dot {
    list-style: none;
    padding-left: 0;
}

.u-list-dot li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 10px;
}

.u-list-dot li::before {
    content: "・";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #0070b8; /* 御幸ブルー */
}

/* 07-3. 印刷時の設定 */
@media print {
    .u-small-box {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 08. 建築工事請負契約書セクション用
 * --------------------------------------------------------------------------
 */

/* 08-1. 呼称カード内の補足テキスト */
.u-small {
    font-size: 0.8rem;
    color: #666;
}

/* 08-2. 結びの強調テキスト（中央揃え・重要性） */
.u-text-center {
    text-align: center;
    background: #fff5f7; /* 薄いミユキピンク背景で注意喚起 */
    padding: 20px;
    border-radius: 8px;
    border: 1px dashed #e6007e;
}

/* --------------------------------------------------------------------------
   09. Section Spacing: セクション間の余白と区切り
   -------------------------------------------------------------------------- */
/* 各セクション（大項目）ごとの外側余白 */
.p-contract-section {
    margin-top: 100px;    /* 前の項目との距離を十分に確保 */
    margin-bottom: 100px;
    padding-bottom: 80px;
    border-bottom: 2px dashed #dce4ec; /* 緩やかな区切り線を追加 */
}

/* 最後のセクションからは区切り線を除去 */
.p-contract-section:last-of-type {
    border-bottom: none;
    margin-bottom: 50px;
}

/* ページ内コンテナの左右余白の再調整 */
.l-container {
    padding-left: 20px;
    padding-right: 20px;
}

/* --------------------------------------------------------------------------
   10. Inner Spacing: カード内・要素間の微調整
   -------------------------------------------------------------------------- */
/* カードリスト（3個並び）の上下余白 */
.p-contract-card-grid {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* 導入文とカードエリアの距離 */
.u-mb-30 {
    margin-bottom: 40px !important;
}

/* --------------------------------------------------------------------------
   11. Print Styles: 印刷時の視認性維持
   -------------------------------------------------------------------------- */
@media print {
    .p-contract-section {
        margin-top: 50px;
        margin-bottom: 50px;
        padding-bottom: 30px;
        page-break-after: always; /* 印刷時はセクションごとに改ページを推奨 */
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 12. 設計監理業務セクション用
 * --------------------------------------------------------------------------
 */

/* 12-1. アイコン（絵文字）のバリエーション */
/* HTML側で直接入力するため、ここではカードの整合性のみを管理 */

/* 12-2. 流れ（具体例）のテキスト装飾 */
.u-small-box p {
    word-break: break-all; /* 長いフロー図の改行対応 */
}

/* 12-3. 強調用：青色テキスト */
.u-blue {
    color: #0070b8 !important;
}

/* 12-4. 印刷時の改ページ抑制 */
@media print {
    .p-contract-card-grid {
        page-break-inside: avoid;
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 13. ミユキサブリース（ピンク系）スタイル
 * --------------------------------------------------------------------------
 */

/* 13-1. ミユキピンクのテキストユーティリティ */
.u-pink {
    color: #e6007e !important;
}

/* 13-2. ピンク版の見出し装飾 */
.c-heading-primary.u-pink {
    border-left-color: #e6007e;
    background-color: #fff5f7; /* 薄いピンク背景 */
}

/* 13-3. ピンク版カードのホバー装飾 */
.c-contract-step-card--pink:hover {
    border-color: #e6007e;
    box-shadow: 0 4px 15px rgba(230, 0, 126, 0.1);
}

.c-contract-step-card--pink .c-card-number {
    color: #fce7f3; /* 番号も薄いピンクに */
}

.c-contract-step-card--pink .c-card-icon {
    background: #fff5f7;
}

/* 13-4. ピンク版カードのタイトル下線 */
.c-contract-step-card--pink .c-card-title {
    border-bottom-color: #fff5f7;
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 14. 転賃貸借契約セクション用（ピンク系継続）
 * --------------------------------------------------------------------------
 */

/* 14-1. アイコン（絵文字）の選定 */
/* 👥(関係図)、🔑(条件)、⚠️(リスク) を使用 */

/* 14-2. カード内の重要箇所の太字装飾（style.css継承） */
.u-bold {
    font-weight: bold !important;
}

/* 14-3. リスト項目の下白白余白 */
.u-list-dot li {
    margin-bottom: 15px !important;
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 15. 管理委託契約セクション用（ピンク系継続）
 * --------------------------------------------------------------------------
 */

/* 15-1. アイコン（絵文字）の選定 */
/* 🛠️(業務)、📄(形態)、ℹ️(注意点) を使用 */

/* 15-2. 印刷時の改ページ制御 */
@media print {
    .p-contract-section {
        page-break-inside: avoid;
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 16. 賃貸借契約のベース法セクション用（ピンク系継続）
 * --------------------------------------------------------------------------
 */

/* 16-1. アイコン（絵文字）の選定 */
/* ⚖️(一般法)、🏠(借家)、📜(規定・スクロール) を使用 */

/* 16-2. 印刷時の改ページ制御 */
@media print {
    .p-contract-section {
        page-break-inside: avoid;
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 17. 居住用・事業用賃貸借契約セクション用（ピンク系継続）
 * --------------------------------------------------------------------------
 */

/* 17-1. アイコン（絵文字）の選定 */
/* 🏘️(住宅)、✨(特徴)、💰(家計・費用) */
/* 🏢(オフィス)、🛠️(原状回復)、💴(高額保証金) */

/* 17-2. セクション間の余白確保（管理番号09の設定を適用） */

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 18. 駐車場・事業用定期借地セクション用（ピンク系継続）
 * --------------------------------------------------------------------------
 */

/* 18-1. アイコン（絵文字）の選定 */
/* 🅿️(駐車場)、🚗(車・賃貸借) */
/* 🏗️(事業建物)、🧹(更地返還)、✍️(公正証書・署名) */

/* 18-2. デスクトップ表示時の調整 */
@media screen and (min-width: 1025px) {
    .u-desktop-only {
        display: block !important;
    }
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 19. 定期借家契約セクション用（ピンク系継続）
 * --------------------------------------------------------------------------
 */

/* 19-1. アイコン（絵文字）の選定 */
/* ⏳(期間満了)、📑(説明書類)、🚪(中途解約・出口) */

/* 19-2. 印刷時の改ページ制御（管理番号11を継承） */

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 20. 火災保険・ポータル誘導用
 * --------------------------------------------------------------------------
 */

/* 20-1. アイコン（絵文字）の選定 */
/* 🏠(建物全体)、🛋️(家財・インテリア) を使用 */

/* 20-2. 社内ポータル誘導ボックス */
.u-portal-box {
    background-color: #f0f7ff;
    border: 1px solid #0070b8;
    border-radius: 12px;
    padding: 60px 40px;
    box-shadow: inset 0 0 20px rgba(0, 112, 184, 0.05);
}

/* 20-3. ポータルボタン（style.cssの共通クラスを拡張） */
.c-btn-portal {
    display: inline-block;
    background-color: #0070b8;
    color: #fff !important;
    padding: 18px 60px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 112, 184, 0.3);
    transition: all 0.3s ease;
	margin-bottom: 10px;
	}

.c-btn-portal:hover {
    background-color: #005a96;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 112, 184, 0.4);
}

/* 20-4. 最後のセクションの区切り線除去（管理番号09の上書き） */
.p-contract-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   21. Header: 右寄せオーバーレイデザインの実装
   -------------------------------------------------------------------------- */
.p-work-hero {
    position: relative;
    height: 350px; /* 画像の比率に合わせて調整 */
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: stretch;
}

/* 背景画像 */
.p-work-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* 右側のグレー半透明エリア */
.p-work-hero__overlay {
    position: relative;
    z-index: 2;
    width: 45%; /* 右側約半分をカバー */
    background-color: rgba(0, 0, 0, 0.4); /* グレーの半透明背景 */
    display: flex;
    align-items: center;
    padding: 0 40px;
    color: #fff;
}

.p-work-hero__content {
    max-width: 500px;
}

/* メインタイトル */
.p-work-hero__title {
    font-size: 2.2rem;
    line-height: 1.3;
    margin-bottom: 15px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/**
 * ファイル名: css/contract_category.css
 * 管理番号: 23. 民法詳細セクション用（ブルー系継続）
 * --------------------------------------------------------------------------
 */

/* 23-1. カード内のリスト項目間の余白を調整 */
.c-contract-step-card .u-list-dot li {
    margin-bottom: 12px;
    line-height: 1.6;
}

/* 23-2. 強調テキストの御幸ブルー適用 */
.u-bold.u-blue {
    color: #0070b8;
}

/* 23-3. 印刷時の改ページ制御 */
@media print {
    .p-contract-section {
        page-break-inside: avoid;
    }
}