@charset "utf-8";

/* --------------------------------------------------------------------------
 * contents_extension.css
 *
 * 提供HTMLに含まれないクラスへの暫定スタイル。
 * クライアント（南谷氏）より正式CSSを受領次第、該当箇所を削除または置換する。
 *
 * 関連:
 *  - docs/CLIENT_REQUEST_CSS.md      （CSS依頼書）
 *  - docs/CLIENT_DECISIONS_20260605.md（確定方針メモ）
 *  - docs/KNOWN_ISSUES.md            （既知の制約一覧）
 *
 * 2026-06-10 タスクC: 提供 contents.css 全面同期で重複したスタイル
 *   （span.required, div.request_completion, .flex, video.property_movie 等）は削除済。
 *   クライアント方針:
 *     - span.required: 提供版（赤文字 var(--red)）を採用。
 *     - .property_movie: 提供版（width: 90% / モバイル 100%）を採用。
 *     - div.request_completion: 提供版に寄せる。
 *     - .flex の gap 値: 提供版（5px）を採用。
 * -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
 * 2026-06-12 提供CSS更新反映で削除した暫定スタイル:
 *  - :root { --red } 補完 → 提供 basic.css に正式定義（--red: #b80909 ほか）が追加されたため撤去
 *  - .pagination* 系 → 提供 contents.css の ul#pager / a.current / span.dot へ移行したため撤去
 *    （admin 系は resources/css/scss/Component/pagination.scss を継続使用）
 * -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
 * 物件追加申請フォーム（property/additional_requests/create）
 *
 * 提供HTML `property/additional_requests/create.php` の <label class="input short select">
 * 構造に対する補完スタイル。提供 contents.css 側のセレクタは label.short / label.select で
 * Blade 側の <label class="input ..."> と一致しないため、ここで補完する。
 *
 * クライアントから正式CSS受領次第、削除または置換する。
 * -------------------------------------------------------------------------- */

/* セレクト用の幅短縮版 input ラベル */
label.input.short {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

/* select 用 input ラベル（プルダウン矢印を擬似的に表示） */
label.input.select {
    position: relative;
    background: #fff;
}

label.input.select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: solid 2px #888;
    border-bottom: solid 2px #888;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

label.input.select select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 28px;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

label.input.select select:disabled {
    color: #bbb;
    cursor: not-allowed;
}

/*
 * 送信ボタン用ラッパ
 * 提供 contents.css に div.submit { margin-bottom: 30px } があるため、
 * ここでは margin-top と text-align のみ補完（重複しない属性のみ）。
 */
div.submit {
    margin-top: 32px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    label.input.short {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
 * 所有物件一覧 property_list レイアウト（2026-06-15）
 *
 * owner/properties.blade.php を ul.search 構造から div.property_list 構造へ変更。
 * 提供 contents.css が河原崎氏より更新され次第、こちらは削除または置換する。
 * -------------------------------------------------------------------------- */

div.property_container {
    width: 900px;
    margin: 0 auto;
}

div.property_list {
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 15px;
    color: #000;
    border-bottom: dotted 1px #dcdcdc;
    padding: 15px 0;
}

p.property_id {
    width: 50px;
    text-align: center;
    margin: 0;
}

a.property_name {
    width: 280px;
    color: var(--blue);
}

a.property_name:hover {
    text-decoration: underline;
}

div.review_container {
    display: flex;
    align-items: center;
    gap: 5px;
}

img.review_icon_item_property {
    width: 24px;
    height: 24px;
}

p.review_font {
    font-size: 14px;
    color: #000;
    margin: 0;
    min-width: 20px;
}

p.property_phone {
    width: 200px;
    margin: 0;
    font-size: 15px;
}

a.property_show_link {
    width: 100px;
    margin: 0 0 0 auto;
    display: block;
    background: var(--orange);
    padding: 8px 0;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
}

a.property_show_link:hover {
    opacity: 0.8;
}

@media screen and (max-width: 768px) {
    div.property_container {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    div.property_list {
        flex-wrap: wrap;
        gap: 8px;
    }

    p.property_id {
        width: 40px;
    }

    a.property_name {
        width: calc(100% - 55px);
    }

    p.property_phone {
        width: 100%;
        order: 3;
    }

    div.review_container {
        order: 2;
    }

    a.property_show_link {
        margin: 0 0 0 auto;
        order: 4;
    }
}

/* --------------------------------------------------------------------------
 * 口コミ投稿フォーム 送信ボタン・確認モーダル（2026-07-08）
 *
 * property/detail.blade.php・manage_company/detail.blade.php の口コミ投稿フォーム
 * （.review-post_submit 系）・確認モーダル（.modal 系）は
 * resources/css/scss/pages/property-detail.css（Vite）にのみ定義されており、
 * フロント公開ページ（layouts.app）では読み込まれていなかったため、
 * 「投稿する」ボタンが無地表示になり、また display:none が効かずモーダルの中身が
 * ページ最下部に常時表示されてしまっていた。
 * property-detail.css の該当スタイルをこちらに移植して読み込ませる。
 * クライアントから正式CSS受領次第、削除または置換する。
 * -------------------------------------------------------------------------- */

.review-post_submit {
    margin: 50px auto;
    text-align: center;
}

.review-post_submit_button {
    background: #FF9900;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 15px;
    text-align: center;
    width: 100%;
    max-width: 200px;
    transition: 0.3s;
}

.review-post_submit_button:hover {
    background: #EA5417;
}

.review-post_submit_button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.modal {
    background: rgba(0, 0, 0, 0.9);
    display: none;
    height: 100%;
    left: 0;
    padding: 30% 20px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.modal_title {
    font-size: 20px;
    margin: 0 0 10px;
}

.modal_text {
    font-size: 14px;
}

.modal_container {
    background: #fff;
    border-radius: 6px;
    left: 50%;
    max-width: 400px;
    padding: 15px 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.modal_confirm {
    margin: 50px auto;
}

.modal_confirm_container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}

.modal_confirm_title {
    background: #FAF4EB;
    margin: 0 20px 0 0;
    padding: 5px 10px;
    text-align: left;
    width: 125px;
}

.modal_confirm_text {
    text-align: left;
    width: calc(100% - 125px);
    word-break: break-word;
}

.modal_confirm_rating {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    width: calc(100% - 125px);
}

.modal_confirm_rating > img {
    height: 32px;
}

.modal_action {
    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
}

.modal_action_cancel {
    background: #fff;
    border: 1px solid #FF9900;
    border-radius: 5px;
    color: #FF9900;
    cursor: pointer;
    max-width: 140px;
    padding: 10px 15px;
    text-align: center;
    width: 200px;
}

.modal_action_send {
    background: #FF9900;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    max-width: 140px;
    padding: 10px 15px;
    text-align: center;
    width: 200px;
}

@media screen and (max-width: 450px) {
    .modal_container {
        width: calc(100% - 40px);
    }

    .modal_confirm_container {
        display: flex;
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
        width: 100%;
    }

    .modal_confirm_title {
        margin: 0;
        width: 100%;
    }

    .modal_confirm_text {
        margin: 15px 0;
        width: 100%;
    }

    .modal_confirm_rating {
        margin: 15px 0;
        width: 100%;
    }

    .modal_action {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0;
    }

    .modal_action_cancel {
        margin: 20px auto;
    }

    .modal_action_send {
        margin: 0 auto 20px;
    }
}

/* --------------------------------------------------------------------------
 * 公開ページCSS棚卸し（2026-07-08）
 *
 * 「投稿する」ボタン・確認モーダルと同根の問題（Vite側のresources/css/scss/配下
 * にしかスタイルが無く、フロント公開ページ(layouts.app)に読み込まれていない）を
 * 一斉点検し、実際に見た目が崩れていた箇所のみ移植・追加した。
 * クライアントから正式CSS受領次第、削除または置換する。
 * -------------------------------------------------------------------------- */

/* アラート（口コミ投稿・お問い合わせ等の成功/失敗メッセージ、バリデーションエラー）
   Component/alert.css を移植。alerts.blade.php が入れ子の _text クラスを使わないため、
   文字色は .alert-success / .alert-danger に直接指定する */
.alert {
    margin: 30px auto;
    max-width: 600px;
    width: 100%;
}

.alert-danger {
    background: #fff;
    border: 1px solid #ff2626;
    color: #ff2626;
    padding: 15px 20px;
}

.alert-success {
    background: #fff;
    border: 1px solid #a1ffa1;
    color: #07a107;
    padding: 15px 20px;
}

/* バリデーションエラーテキスト（お問い合わせフォーム等） */
.valid-error {
    color: #ff2626;
    margin: 5px 0 15px;
}

.valid-error_input {
    border: 1px solid #ff2626;
}

/* お問い合わせフォーム（contact.blade.php） */
.contact-head {
    margin: 80px 0;
}

.contact-form_container {
    align-items: flex-start;
    display: flex;
    justify-content: flex-start;
    margin: 0 0 30px;
}

.contact-form_label {
    display: block;
    margin: 0 15px 0 0;
    width: 150px;
}

.contact-form_input {
    max-width: 400px;
    width: calc(100% - 150px);
}

.contact-form_textarea {
    max-width: 700px;
    width: calc(100% - 150px);
}

.contact-form_comment {
    max-width: 700px;
    width: calc(100% - 150px);
}

.contact-form_counter {
    text-align: right;
    font-size: 13px;
    color: #999;
    margin-top: 5px;
}

.contact-form_counter-text {
    font-weight: bold;
}

.contact-form_submit {
    margin: 60px auto 30px;
    text-align: center;
}

.contact-form_submit-button {
    background: #FF9900;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 15px;
    text-align: center;
    width: 100%;
    max-width: 200px;
    transition: 0.3s;
}

.contact-form_submit-button:hover {
    background: #EA5417;
}

@media screen and (max-width: 959px) {
    .contact-head {
        margin: 50px 0;
    }
}

@media screen and (max-width: 450px) {
    .contact-form_container {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin: 20px 0;
    }

    .contact-form_label {
        margin: 0 0 10px;
    }

    .contact-form_input,
    .contact-form_textarea,
    .contact-form_comment {
        width: 100%;
    }
}

/* お問い合わせ完了ページ（contact_completed.blade.php） */
.contact-completed_section {
    text-align: center;
}

.contact-completed_title {
    font-weight: bold;
    margin: 50px auto;
}

.contact-completed_container {
    background: #fff;
    border: 1px solid #CACACA;
    box-shadow: 1px 1px 3px #dcdcdc;
    padding: 30px 40px;
    text-align: left;
}

.contact-completed_headline {
    font-weight: bold;
    margin: 30px auto;
    text-align: center;
}

.contact-completed_headline-sub {
    font-size: 16px;
    margin: 30px 0;
}

.contact-completed_text {
    line-height: 1.7;
    margin: 10px 0;
}

.contact-completed_link {
    margin: 80px auto 50px;
    text-align: center;
}

.contact-completed_link-item {
    background: #FF9900;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    padding: 15px 80px;
}

@media screen and (max-width: 959px) {
    .contact-completed_container {
        padding: 20px 30px;
    }
}

@media screen and (max-width: 450px) {
    .contact-completed_container {
        padding: 15px 20px;
    }
}

/* 口コミ投稿フォーム Good/Bad アイコン（property/detail.blade.php・manage_company/detail.blade.php 共通） */
.review-post_icon {
    height: 32px;
    margin: 0 15px;
}

@media screen and (max-width: 450px) {
    .review-post_icon {
        margin: 0 0 0 15px;
    }
}

/* オーナー所有物件一覧（owner/properties.blade.php）の口コミ件数・電話番号表示 */
.review_container .bad {
    margin-left: 20px;
}

.property_phone .tel_label {
    font-weight: bold;
    margin-right: 8px;
}

.property_phone .number {
    font-weight: bold;
}

/* 口コミカード下部（日付・返信/削除依頼リンクの行）
   property/detail.blade.php・components/review_card.blade.php・review_card_page.blade.php・
   property/reviews/reply/index.blade.php で共通使用 */
.review_bottom {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* 検索結果・エリアTOPのGood/Bad件数表示 */
.review_count {
    margin: 0 15px 0 5px;
}

/* 口コミ一覧(review_card_page)の物件名・サムネイルから物件詳細へのリンク色
   (aタグ規定色が白のため、search_name同様に明示上書きが必要) */
h3.review_top a {
    color: var(--blue);
}

h3.review_top a:hover {
    text-decoration: underline;
}