/* 
/* 横田商事専用 査定画面 css
----------------------------------------------- */
.active {
    display: block;
}
.none {
    display: none !important;
}
.border-red {
    border-color: #FF0000 !important;
}

/* 横幅 */
.yestimate-guide .yestimate-grid {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 55px;
}

/** 画面上部説明テキスト */
.top-text {
    font-size: 60px;
    color:#08a7e0;
    font-weight: bold;
    text-align: center;
}

/** 価格と需要を見る */
.yestimate-title {
    text-align: center;
    margin-top: 10px;
}
.yestimate-title > .text {
    display: inline-block;
    padding: 5px 35px;
    color: #FFFFFF;
    background-color: #08a7e0;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    font-size: 55px;
    margin: 0 auto -10px auto;
}
.yestimate-title > .line {
    width: 100%;
    border: 15px #08a7e0 solid;
    background-color: #08a7e0;
    margin-bottom: 20px;
}

/** 郵便番号入力エリア */
.yestimate-zip {
    text-align: center;
    margin: 30px 0;
}
.yestimate-zip > .text {
    display: inline-block;
    color: #b7adb3;
    margin-bottom: 30px;
}
.yestimate-zip > .input-area > .zip-code {
    width: 250px;
    height: 100px;
    font-size: 60px;
    text-align: center;
    border: #000 5px solid;
}
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

/** 無料価格と需要を見る・他のエリアを見るボタン */
.yestimate-button-area > button {
    font-size: 55px;
    padding: 10px 30px;
    border-radius: 0px;
}
/* 無料価格と需要を見る */
.yestimate-button-area > button:first-child {
    width: 900px;
    font-size: 70px;
    padding: 20px 30px;
    border: #08a7e0 10px solid;
    background-color: #036eb8;
}
.yestimate-button-area > button:first-child > span {
    font-size: 60px;
    color:#FFFFFF;
    padding-right: 30px;
}
/* 他のエリアを見る */
.yestimate-button-area > button:last-child {
    border: #b5b5b6 10px solid;
    background-color: #727171;
}

/** 所在地 */
.yestimate-address-area {
    display: flex;
    width: 980px;
    margin: 30px auto;
    align-items: center;
    justify-content: center;
    border-bottom: 5px #727171 solid;
}
.yestimate-address-area > div:first-child {
    width:  80%;
}
.yestimate-address-area > div:last-child {
    width: 20%;
}
.yestimate-address-area > .yestimate-address {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}
/* ー */
.yestimate-address-area > .yestimate-address > div {
    display: inline-block;
    width: 10%;
}
.yestimate-address-area > .yestimate-address > input {
    display: inline-block;
    font-size: 50px;
    height: 80px;
    border: none !important;
    overflow: hidden;
    white-space: nowrap;
}
/* 市区町村 */
.yestimate-address-area > .yestimate-address > input#citytown {
    width: 45%;
}
/* 区 */
.yestimate-address-area > .yestimate-address > input#addku {
    width: 45%;
}
/* 説明文 */
.yestimate-text-area {
    width: 100%;
    margin: auto;
}
/* タイトル */
.yestimate-text-area > .title {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
}
.yestimate-text-area > .title > span:first-child {
    color:#08a7e0;
    font-weight: bold;
}
.yestimate-text-area > .title > span:last-child {
    color:#127342;
    font-weight: bold;
}
/* テキスト */
.yestimate-text-area > .text-body > div:first-child {
    background-color: #bae3f9;
    padding: 40px;
}

/** クロスメーター */
.yestimate-crossmeter-main-area {
    font-size: 16px !important;
    margin: 40px auto;
}
.yestimate-crossmeter-main-area .cross-meter-content {
    zoom: 175%;
}
.yestimate-crossmeter-main-area #area-all {
    width: 550px;
    margin: 0 auto;
}
.yestimate-crossmeter-main-area .operation-explanation {
    text-align: center;
    font-size: 50px;
}
.yestimate-crossmeter-main-area img {
    width: 500px;
}
.yestimate-crossmeter-main-area .operation-explanation > div:last-child {
    text-align: left;
    padding: 0 45px;
    font-size: 45px;
    line-height: 45px;
}

/** 需要一覧  */
.yestimate-demand-area {
    width: 98%;
    margin: auto;
    font-size: 45px;
}
.yestimate-demand-area > .yestimate-demand {
    margin: 20px 0;
}
/* タイトル */
.yestimate-demand-area > .yestimate-demand > .title {
    font-weight: bold;
    font-size: 55px;
}
/* 表 */
.yestimate-demand-area table {
    width: 100%;
    margin: auto;
}
.yestimate-demand-area table > thead > tr > th {
    position: sticky;
    top: 100px;
    z-index: 0;
    background-color: #FFFFFF;
    &:before{
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 2px solid #000;
    }
}
.yestimate-demand-area table > thead > tr > th:first-child {
    &:before{
        border-left: none;
    }
}
.yestimate-demand-area table > thead > tr > th:last-child {
    &:before{
        border-right: none;
    }
}
.yestimate-demand-area table, .yestimate-demand-area td {
    border: 3px #000 solid;
}
.yestimate-demand-area table, .yestimate-demand-area tbody tr:first-child td{
    border-top: none;
}
/* 表タイトルベース */
.yestimate-demand-area th {
    width: 200px;
    text-align: center;
    padding: 10px;
}
/* 地区 */
.yestimate-demand-area th:first-child {
    width: 600px;
}
/* 項目ベース */
.yestimate-demand-area td {
    text-align: right;
    padding: 10px;
}
/* 地区 */
.yestimate-demand-area td:first-child {
    text-align: left;
}

/** 査定を申し込む */
/* 査定を申し込むボタン */
.yestimate-application-area {
    width: 100%;
    background-color: #fff;
}
.yestimate-application-area > .space {
    text-align: center;
    margin: 50px auto;
    z-index: 350;
    width: 900px;
}
.follow {
    position: fixed;
    bottom: -2px;
    left: 0;
    border: 3px #FFFFFF solid;
    z-index: 400;
}
.yestimate-application-area > .space > button {
    font-size: 70px;
    font-weight: bold;
    padding: 25px 110px;
    color: #FFFFFF;
    border: #f29b7e 10px solid !important;
    background-color: #c30d23;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
}
.yestimate-application-area > .space > button > span {
    color: #FFFFFF;
    padding-right: 30px;
}
/* 画像 */
.yestimate-application-img-area > img {
    text-align: center;
    height: 180px;
}

/** TODO 既存項目は現状大きくするだけ */
/** 問い合わせ */
.form-box h3, .form-box dt, .form-box .required, .form-box li , .form-box label {
    font-size: 50px !important;
}
.form-box textarea {
    height: 160px;
    font-size: 50px;
}
.form-box input[type="text"] {
    height: 80px;
    font-size: 50px;
}
.yestimate-grid .btn_green > div {
    font-size: 50px;
}
.yestimate-grid .btn_green > span {
    font-size: 40px;
}
.page-guide .p_text {
    font-size: 50px !important;
}
.page-top .btn_page_top {
    max-width: 400px;
    font-size: 50px;
}
.yestimate-guide .yestimate-grid .h3_ttl {
    padding-left: 30px;
}
input[type="radio"] {
    transform: scale(3.8);
    position: relative;
    top: -7px;
    margin-right: 15px;
}
.form-box dl dt {
    padding: 2% 3%;
}
.form-box dl  ul {
    padding: 0 2%;
}
input[name="land_area"] {
    max-width: 800px;
    margin-right: 30px;
}
.header-view-yestimate {
    max-height: none !important;
}

/** スマホサイズ */
@media (max-width: 736px) {
/** 画面上部説明テキスト */
    .top-text {
        font-size: 20px;
        line-height: 1.5em;
    }
    /* 横幅 */
    .yestimate-guide {
        padding-bottom: 10px;
    }
    .yestimate-guide .yestimate-grid {
        font-size: 20px;
    }
    .yestimate-demand-area > .yestimate-demand {
        margin: 0px 0;
    }

    /** 価格と需要を見る */
    .yestimate-title > .text {
        padding: 3px 11px;
        font-size: 20px;
        margin-top: 0;
    }
    .yestimate-title > .line {
        border: 5px #08a7e0 solid;
        margin-top: -1px;
        margin-bottom: 10px;
    }
    .yestimate-demand-area {
        font-size: 16px;
    }
    .yestimate-demand-area > .yestimate-demand > .title {
        font-size: 18px;
    }
    .yestimate-demand-area table > thead > tr > th {
        &:before {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            border: 1px solid #000;
            border-left: none;
        }
    }
    .yestimate-demand-area table > thead > tr > th:nth-child(2) {
        &:before {
            border-right: none;
        }
    }
    .yestimate-demand-area table > thead > tr > th:nth-child(3) {
        &:before {
            border-left: 1px solid #000 !important;
        }
    }
   .yestimate-demand-area table, .yestimate-demand-area td {
        border: 1px #000 solid;
    }
    .yestimate-demand-area th {
        width: 60px;
        padding: 3px;
        font-size: 14px;
    }
    .yestimate-demand-area th:first-child {
        width: 200px;
    }
    .yestimate-demand-area td {
        padding: 3px;
        font-size: 14px;
    }

    .yestimate-zip {
        font-size: 18px;
        margin: 10px 0;
    }
    .yestimate-zip > .text {
        margin-bottom: 10px;
    }
    .yestimate-zip > .input-area > .zip-code {
        width: 79px;
        height: 32px;
        font-size: 18px;
        border: #000 2px solid;
    }
    .yestimate-address-area {
        width: 350px;
        margin: 15px auto;
    }
    .yestimate-address-area > .yestimate-address > input {
        font-size: 20px;
        height: 40px;
    }
    .yestimate-text-area > .title {
        font-size: 30px;
    }
    .yestimate-text-area > .text-body > div:first-child {
        padding: 10px;
    } 
    .yestimate-button-area > button {
        font-size: 25px;
    }
    .yestimate-button-area > button:first-child {
        width: 285px;
        font-size: 20px;
        border: #08a7e0 5px solid;
        padding: 10px 20px;
    }
    .yestimate-button-area > button:last-child {
        border: #b5b5b6 5px solid;
    }
    .yestimate-button-area > button:first-child > span {
        font-size: 18px;
        padding-right: 20px;
    }

    .yestimate-crossmeter-main-area {
        margin: 15px auto;
    }
    .yestimate-crossmeter-main-area .cross-meter-content {
        zoom: 55%;
    }
    .yestimate-crossmeter-main-area .operation-explanation {
        font-size: 16px;
        padding: 5px 7px;
        line-height: 1.2em;
    }
    .yestimate-crossmeter-main-area .operation-explanation > .icon {
        text-align: center;
    }
    .yestimate-crossmeter-main-area img {
        width: 180px;
    }

    .yestimate-application-area > .space {
        margin: 10px auto;
        width: 285px;
    }
    .yestimate-application-area > .space > button {
        font-size: 18px;
        padding: 10px 20px;
        border: #f29b7e 5px solid !important;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    }
    .yestimate-application-area > .space > button > span {
        padding-right: 20px;
    }
    
    .yestimate-application-img-area > img {
        height: 65px;
    }

    .form-box h3, .form-box dt, .form-box .required, .form-box li, .form-box label {
        font-size: 16px !important
    }
    .form-box dl ul {
        padding: 0 1%;
    }
    input[type="radio"] {
        transform: scale(1.5);
        position: relative;
        top: 3px;
        margin-right: 0px;
    }

    .yestimate-grid button {
        padding: 5px 25px;
    }
    .yestimate-grid .btn_green > div {
        font-size: 18px;
    }
    .yestimate-grid .btn_green > span {
        font-size: 13px;
        margin-bottom: 0;
    }
    .page-guide .p_text {
        font-size: 16px !important;
        margin-top: 5px;
    }
    .yestimate-crossmeter-main-area .operation-explanation > div:last-child {
        padding: 0px 6px;
        font-size: 15px;
        line-height: 20px;
    }
    .yestimate-guide .yestimate-grid .h3_ttl {
        padding-left: 8px;
    }
    .form-box input[type="text"] {
        height: 30px;
        font-size: 17px;
    }
    .form-box input.s-text {
        width: 55%;
    }
    input[name="land_area"] {
        margin-right: 5px;
    }
    .page-top .btn_page_top {
        max-width: 156px;
        font-size: 20px;
        padding: 0px 0px;
    }
    .form-box dl dt {
        line-height: 1;
    }
    .form-box textarea {
        height: 65px;
        font-size: 17px;
    }
    .form-box dl dt, .form-box dl dd {
        padding: 2% 2%;
    }
}