@charset "utf-8";

/*-----------------------------------------------
    kaitai.css - 解体査定ナビ専用スタイル
-----------------------------------------------*/

/* 画像選択UI */
.boxImageSelect {
    margin-top: 15px;
}

.imageGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* 建物階数選択用（5つの項目用） */
#floorSelectForm .imageGrid {
    grid-template-columns: repeat(3, 1fr);
}

#floorSelectForm .imageItem:nth-child(4) {
    grid-column: 1;
}

#floorSelectForm .imageItem:nth-child(5) {
    grid-column: 2;
}

/* 建物構造選択用（4つの項目用） */
#structureSelectForm .imageGrid {
    grid-template-columns: repeat(3, 1fr);
}

#structureSelectForm .imageItem:nth-child(4) {
    /* grid-column: 1 / span 3; */
    /* 最後の項目は全幅 */
    text-align: center;
    height: 160px;
}

/* 画像なしの項目用（その他・分からない）*/
 #structureSelectForm .imageItem:nth-child(4) {
    background-color: #f8f9fa; */
    border: 2px solid #dee2e6;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 床面積選択用 */
.boxFloorAreaSelect {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.floorAreaItem {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.floorAreaItem:hover {
    border-color: #FE9900;
    background-color: #fff8f0;
}

.floorAreaItem.selected {
    border-color: #FE9900;
    background-color: #FE9900;
    color: white;
}

.floorAreaItem .areaLabel {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 20px;
    padding-top: 5px;
}

.floorAreaItem .areaRange {
    display: block;
    font-size: 12px;
    color: #666;
}

.floorAreaItem.selected .areaRange {
    color: rgba(255, 255, 255, 0.8);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .boxFloorAreaSelect {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .floorAreaItem {
        padding: 12px;
    }

    .floorAreaItem .areaLabel {
        font-size: 14px;
    }

    .floorAreaItem .areaRange {
        font-size: 11px;
    }
}

/* @media (max-width: 480px) {
    .boxFloorAreaSelect {
        grid-template-columns: 1fr;
    }
} */

/* 詳細面積選択用 */
.boxDetailAreaSelect {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.detailAreaItem {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.detailAreaItem:hover {
    border-color: #FE9900;
    background-color: #fff8f0;
}

.detailAreaItem.selected {
    border-color: #FE9900;
    background-color: #FE9900;
    color: white;
}

.detailAreaItem .areaLabel {
    display: block;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
    padding-top: 5px;
}

.detailAreaItem .areaRange {
    display: block;
    font-size: 12px;
    color: #666;
}

.detailAreaItem.selected .areaRange {
    color: rgba(255, 255, 255, 0.8);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .boxDetailAreaSelect {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .detailAreaItem {
        padding: 12px;
    }

    .detailAreaItem .areaLabel {
        font-size: 14px;
    }

    .detailAreaItem .areaRange {
        font-size: 11px;
    }
}

/* @media (max-width: 480px) {
    .boxDetailAreaSelect {
        grid-template-columns: 1fr;
    }
} */

/* 解体後利用方法選択用 */
.futureUseGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.futureUseGrid .imageItem {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

.futureUseGrid .imageItem:hover {
    border-color: #FE9900;
    background-color: #fff8f0;
}

.futureUseGrid .imageItem.selected {
    border-color: #FE9900;
    background-color: #FE9900;
    color: white;
}

.futureUseGrid .imageItem .imageLabel {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}

/* 画像なしのアイテム用 */
.futureUseGrid .imageItem:nth-child(6) {
    justify-content: center;
}

.futureUseGrid .imageItem:nth-child(6) .imageLabel {
    font-size: 20px;
    line-height: 1.4;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .futureUseGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .futureUseGrid .imageItem {
        padding: 12px;
        min-height: 100px;
    }

    .futureUseGrid .imageItem img {
        max-width: 50px;
        max-height: 50px;
    }

    .futureUseGrid .imageItem .imageLabel {
        font-size: 12px;
    }
}

/* @media (max-width: 480px) {
    .futureUseGrid {
        grid-template-columns: repeat(2, 1fr);
    }
} */

/* 解体予定時期選択用 */
.demolitionTimingGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.demolitionTimingGrid .imageItem {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.demolitionTimingGrid .imageItem:hover {
    border-color: #FE9900;
    background-color: #fff8f0;
}

.demolitionTimingGrid .imageItem.selected {
    border-color: #FE9900;
    background-color: #FE9900;
    color: white;
}

.demolitionTimingGrid .imageItem .imageLabel {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}

p.txtNote {
    margin-top: 12px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .demolitionTimingGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .demolitionTimingGrid .imageItem {
        padding: 15px 10px;
        min-height: 70px;
    }

    .demolitionTimingGrid .imageItem .imageLabel {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* .demolitionTimingGrid {
        grid-template-columns: 1fr;
    } */

    .demolitionTimingGrid .imageItem {
        padding: 18px 15px;
    }
}

#structureSelectForm .imageItem:nth-child(4):hover {
    background-color: #fff8f0;
    border-color: #FE9900;
}

#structureSelectForm .imageItem:nth-child(4).selected {
    background-color: #FE9900;
    border-color: #FE9900;
    color: #fff;
}

.imageItem {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
}

.imageItem:hover {
    border-color: #FE9900;
    background-color: #fff8f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 153, 0, 0.2);
}

li.detailAreaItem.cursorPointer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imageItem.selected {
    border-color: #FE9900;
    box-shadow: 0 0 0 2px #FE9900;
    background-color: #FE9900;
}

.imageItem.cursorPointer.selected .imageLabel {
    color: #fff;
}

.imageItem img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 8px;
}

.imageLabel {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

/* チャット項目の表示制御 */
.itemChat.jsHide {
    display: none !important;
}

.itemChat.active {
    display: block !important;
}

/* ボタン選択状態のスタイル */
.btnSelect.selected {
    background-color: #FE9900 !important;
    color: #fff !important;
    border-color: #FE9900 !important;
}

/* 階数選択（text-only）のスタイル */
.chat04 .imageItem {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    transition: all 0.3s ease;
}

.chat04 .imageItem:hover {
    border-color: #FE9900;
    background-color: #fff8f0;
}

.chat04 .imageItem.selected {
    background-color: #FE9900;
    border-color: #FE9900;
}

.chat04 .imageItem.selected .imageLabel {
    color: #fff;
    font-weight: bold;
}

.chat04 .imageLabel {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* 円形プログレスバーアニメーション */
.lineCircleActive circle {
    stroke-dasharray: 0 314;
    stroke-dashoffset: 0;
    transition: stroke-dasharray 0.5s ease-in-out;
}

/* Neighbor Distance Selection Grid */
.neighborDistanceGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.neighborDistanceGrid .imageItem {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.neighborDistanceGrid .imageItem:hover {
    border-color: #FE9900;
    background: #fff8f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(254, 153, 0, 0.2);
}

.neighborDistanceGrid .imageItem.selected {
    border-color: #FE9900;
    /* box-shadow: 0 0 20px rgba(254, 153, 0, 0.3); */
    box-shadow: 0 0 0 2px #FE9900;
    background-color: #FE9900;
}

#neighborDistanceSelectForm>.imageItem.selected>.itemText {
    color: #fff;
}

/* p.txtPrivacy.third-privacy {
    text-align: left;
    margin-top: 0;
    font-size: 1em;
} */

/* .neighborDistanceGrid .imageItem img {
    width: 100%;
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
} */

.neighborDistanceGrid .imageItem .itemText {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}

@media only screen and (max-width:767px) {
    .imageGrid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
    }

    .imageItem {
        padding: 10px;
    }

    .imageItem img {
        width: 50px;
        height: 50px;
    }

    .imageLabel {
        font-size: 11px;
    }

    .neighborDistanceGrid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .neighborDistanceGrid .imageItem {
        padding: 15px;
    }

    .neighborDistanceGrid .imageItem .itemText {
        font-size: 14px;
    }

    #header .imgSince {
        width: 160px;
    }

    .imgSince img.imgR {
        width: 100% !important;
        height: auto !important;
        vertical-align: middle;
    }

    .boxSinceTxt_wrap {
        height: auto !important;
        margin: 0;
    }

    .imageItem {
        justify-content: space-between;
    }
    #structureSelectForm .imageItem:nth-child(4){
        justify-content: center;
        height: auto;
    }

    .imageItem img,
    .futureUseGrid .imageItem img {
        width: 100%;
        height: auto;
        max-width: unset;
        max-height: unset;
    }

    .imageLabel,
    .chat04 .imageItem,
    .chat04 .imageLabel,
    .floorAreaItem .areaLabel,
    .detailAreaItem .areaLabel,
    .futureUseGrid .imageItem .imageLabel,
    .futureUseGrid .imageItem:nth-child(6) .imageLabel,
    .demolitionTimingGrid .imageItem .imageLabel,
    .neighborDistanceGrid .imageItem .itemText {
        font-size: 16px;
    }


    #structureSelectForm .imageItem:nth-child(4),
    #floorSelectForm .imageItem:nth-child(5),
    #floorSelectForm .imageItem:nth-child(4) {
        grid-column: auto;
    }

    .imageGrid,
    .boxFloorAreaSelect,
    .boxDetailAreaSelect,
    .neighborDistanceGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: unset;
    }


    .futureUseGrid .imageItem {
        padding-bottom: 0;
    }

    .neighborDistanceGrid .imageItem {
        padding: 10px;
    }
    #main > div.secChat.wrapper800 > ul > li.itemChat.chat03-detail.active.jsShow > div.boxImageSelect > div > div:nth-child(8) {
    justify-content: center;
}
}