/* カスタムプロパティ */
:root
{
    --border-color-gray : 1px #cccccc solid; 
}
.display_grid
{
    display: grid;
}
a
{
    text-decoration: underline;
}
a.next_link_button 
{
    text-decoration: none;
}
h1
{
    font-size: 24px;
    width: 100%;
}
.subpage_title
{
	/*background-color: var(--color-light);*/
    
    /*border: 1px solid var(--color-dark);*/
    grid-template-columns: auto 1fr;
    align-items: center;
    border-radius: 10px;
    letter-spacing: 5px;
    font-family: Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
    font-weight: bold;
    background-color: var(--color-dark);
	/*background-image: linear-gradient(to right, var(--color-dark) 0%, var(--color-light) 50%, var(--color-dark) 100%);*/
    color: var(--color-white);
}
.subpage_title span
{
    padding: 10px;
    font-weight: normal;
    font-size: 23px;
    color: var(--color-white);
}
.subpage_title img, .subpage_title svg
{
    height: 30px;
    margin: 0px 0px 0px 10px;
}
.subpage_title svg .st0{
    fill:#ffffff;
}
.subpage_title span:nth-of-type(1)
{
    border-radius: 8px 0px 0px 8px;
}
h2
{
    color: var(--color-dark);
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, var(--color-dark) 0%, var(--color-light) 50%, var(--color-dark) 100%) 1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
table
{
    border-collapse: collapse;
    width: 100%;
}
th, td
{
    border: var(--border-color-gray);
    padding: 5px;
    vertical-align: middle;
}
.table_amount
{
    margin:-1px 0px 0px 0px;
}
.table_amount th
{
    text-align: center;
}
.border_none
{
    border: 0px #ffffff;
}
.table_amount td.font_right
{
    text-align: right;
}
.colmun_table-stamp
{
    grid-template-columns: auto 150px;
    align-items: end;
}
.gap_100
{
    gap: 100px;
}
.stamp
{
    border: 1px #cccccc solid;
    width: 150px;
    height: 150px;
}
.stamp span
{
    display: block;
    text-align: center;
    padding: 5px;
    border-bottom: 1px #cccccc solid;
}
.stamp_list
{
    display: flex;
}
.stamp_list > div
{
    margin-left: -1px;
}
.colmun_table-stamp table td:nth-of-type(1) {
    width: 377px;
}
#QRCODE,
#DEAL_NUMBER
{
    display : none;
}
.ledger_title .display_grid
{
    grid-template-columns: 1fr 2fr 1fr;
    justify-items: start;
    align-items: center;
    gap: 20px;
}
.ledger_title .title
{
    display: inline-block;
    width: 100px;
}
.ledger_title div > div:nth-of-type(1)
{
    text-align: center;
    border: var(--border-color-gray);
    display: flex;
    flex-wrap: wrap;
}
.ledger_title div > div:nth-of-type(1) > span
{
    width: 50%;
    border-top: var(--border-color-gray);
}
.ledger_title div > div:nth-of-type(1) > span:nth-of-type(1)
{
    border-right: var(--border-color-gray);
}
.ledger_title div > div:nth-of-type(2) > span
{
    display: block;
}
tbody
{
    display: contents;
}
.staff_earnings td
{
    width : 200px;
}
.ledger_title div > div:nth-of-type(1){
    width : 100%;
}
/* ====================================ページ内リンク用 */
.page_link
{
    display : grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
}
.page_link button
{
    width : 150px;
    margin-left : 30px;
    margin-bottom : 20px;
}
.page_link ul
{
    display : contents;
}
.page_link ul li
{
    cursor: pointer;
}
.page_link ul li:not(:last-child)::after
{
	content: "｜";
	display: inline-block;
	margin: 0px 5px 0px 5px;
}
/* ====================================対価合計 */
.earnings > div
{
    /*width: 250px;*/
    border: var(--border-color-gray);
    font-size: 18px;
    text-align: center;
}
.earnings > div:nth-of-type(2)
{
    display: grid;
    grid-template-columns: 70mm auto;
    border: 0px none;
}
.earnings > div:nth-of-type(2) dl
{
    /*display: grid;
    grid-auto-columns: 100px auto;
    width: 70mm;*/

    display: flex;
    flex-wrap: wrap;
    border: 3px #555555 solid;
    margin: 10px 0px 10px 0px;
}
.earnings > div:nth-of-type(2) dt
{
    width: 100px;
    text-align: left;
}
.earnings > div:nth-of-type(2) dd
{
    width: calc(100% - 100px);
    text-align: right;
}
.earnings > div:nth-of-type(2) dt, .earnings > div:nth-of-type(2) dd
{
    padding: 2px 10px;
    border-bottom: 1px #555555 solid;
}
.earnings > div:nth-of-type(2) dt:nth-last-of-type(1), .earnings > div:nth-of-type(2) dd:nth-last-of-type(1)
{
    border-bottom: unset;
    border-top: 3px #555555 double;
}
.earnings > span
{
    width : 50px;
    margin: auto 0px;
    text-align: center;
}
.earnings > div:nth-of-type(2) > div > span:nth-of-type(1)
{
    background-color: #555555;
    color: #ffffff;
    display: block;
    padding: 5px;
    font-size : 16px;
}
.earnings > div:nth-of-type(2) > div.sum
{
    width: calc(100% - (250px + 250px + 100px));
    grid-template-columns: 200px 1fr;
}
.earnings > div:nth-of-type(2) > div.sum > span
{
    display: inline-block;
    font-size: 13px;
}
.earnings > div:nth-of-type(2) > div.sum > span:first-child
{
	display: grid;
    align-items: center;
}
.earnings > div:nth-of-type(2) > div.sum > span:nth-of-type(2)
{
    font-size: 21px;
    display: block;
    margin: auto 15px auto auto;
}
/* ====================================物件概要 */
.equipment
{
    padding : 0px;
    border : none;
    border-right : var(--border-color-gray);
}
.equipment th,
.equipment td
{
    border : none;
    border-right : var(--border-color-gray);
}
.equipment td:last-child{
    border : none;
}
/* ====================================売主・買主 */
.remuneration th,
.table_company_data th, .table_amount th
{
    background-color: #555555;
    color: #ffffff;
}
.table_company_data .title
{
    width: 60px;
    font-weight: bold;
    text-align: center;
}
.table_company_data td:nth-of-type(2), 
.table_company_data td:nth-of-type(4)
{
    width: 370px;
}
.colmun_table-stamp table th
{
    font-size: 12px;
    text-align: center;
}

.bgcolor_attention
{
    background-color: var(--color-light);
    position: relative;
}
.bgcolor_attention span
{
    display: block;
    width: 44px;
    height: 30px;
    background-image: url(../img/icon_attention.png);
    background-repeat: no-repeat;
    background-position: 5px 5px;
    position: absolute;
    top: -22px;
    left: -27px;
    background-color: #ffdc00;
    color: #555555;
    padding: 4px 0px 0px 25px;
    text-align: left;
    cursor: pointer;

}
#ERROR, #ATTENTION
{
    position: fixed;
    left: 10px;
    bottom: 10px;
    background-color: var(--color-light);
    width: calc(100% - 20px);

    border: 1px solid var(--color-lightgray);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 10px 0 rgb(193 193 193 / 50%);
    z-index: 10;
}
.button_close
{
    background-color: var(--color-dark);
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    padding: 5px;
    cursor: pointer;
}
.button_return
{
    background-color: #555555;
    color: #ffffff;
    padding: 10px;
}
.button_return:hover
{
    border: 2px #555555 solid;
    color: #555555;
    background-color: #ffffff;
    padding: 10px;
}
hr
{
    border-width: 1px 0px 0px 0px;
    border-color: #555555;
    border-style: solid;
}
#ERROR img, #ATTENTION img
{
    width: 24px;
    position: relative;
    top: 6px;
    margin-right: 5px;
    margin-top: -6px;
}
#ERROR .next_link_button, #ATTENTION .next_link_button
{
    padding: 5px 80px 5px 70px;
}
.remuneration
{
    margin-top : 5px;
}

/* ====================================ログイン */
#AUTHENTICATE_FORM span
{
    margin-top : 20px;
}
#AUTHENTICATE_FORM
{
    max-width: 500px;
    display: grid;
    background-color : #ededed;
    margin-top : 50px;
    margin-bottom : 10px;
    padding : 20px;
}
#AUTHENTICATE_FORM button
{
    margin : 30px auto;
}
#AUTHENTICATE_FORM p
{
    display : grid;
    grid-template-columns: auto auto;
    text-align : center;
    align-items: center;
    justify-content: center;
    margin : 10px 0px;
    gap : 10px;
}
#AUTHENTICATE_FORM p img
{
    width : 40px;
}
#AUTHENTICATE_FORM input[type="text"]
{
    border : 1px solid #cccccc;
    border-radius : 5px;
    margin-top : 5px;
    padding : 10px 5px;
    font-size : 16px;
    color : var(--color-black);
}
.text_link
{
    display : grid;
    grid-template-columns: auto 1fr;
    font-size : 14px;
    margin : 10px 5px;
    position : relative;
}
.text_link::before
{
    background-image: url(../img/icon_next.png);
    background-size: 100%;
    background-repeat: no-repeat;
    content: "";
    display: inline-block;
    left: 0px;
    width: 20px;
    height: 20px;
}
.text_link:hover
{
    text-decoration: underline;
}

#AUTHENTICATE_BOX 
{
    margin: 10px auto;
    max-width: 500px;
}
#BTN_WRAPPER
{
    gap: 15px;
    display: grid;
    grid-template-columns: auto auto auto;
    margin: 20px auto;
    justify-content: center;
}



/* ----------------------------------------------------------------------------- */
/* 414px以下 */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width : 414px)
{

}
@media screen and (max-width : 900px)
{
    #BTN_WRAPPER
    {
        grid-template-columns: auto;
    }
}

/* ----------------------------------------------------------------------------- */
/* 768px以下 */
/* ----------------------------------------------------------------------------- */
@media screen and (max-width : 768px)
{
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, capion, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, av, section, summary, time, mark, audio, video
    {
        font-size: 14px;
    }
    main
    {
        padding : 10px;
    }
    .earnings > div
    {
        width: calc(100% / 2 - 10px);
    }
    .earnings > span
    {
        width: 20px;
    }
    .earnings > div > span:nth-of-type(1)
    {
        font-size : 14px;
    }
    .earnings > div:nth-of-type(2) > div.sum
    {
        width: calc(100% - 20px);
        grid-template-columns: 120px 1fr;
        margin-top : 10px;
    }
    .earnings > div:nth-of-type(2) > div.sum > span
    {
        font-size: 14px;
    }
    .earnings > div:nth-of-type(2) > div.sum > span:nth-of-type(2)
    {
        font-size: 21px;
    }
    .ledger_title .display_grid
    {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .ledger_title h1 {
        font-size: 18px;
    } 
    .ledger_overview th,
    .staff_earnings th
    {
        width : 100%;
    }   
    .ledger_title div > div:nth-of-type(2) > span
    {
        font-size : 12px;
    }
    .ledger_overview
    {
        display : grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .ledger_overview th
    {
        background-color : #f5f5f5;
    }
    .table_company_data
    {
        display : block;
    }
    .table_company_data .title
    {
        width: 30%;
    }
    .colmun_table-stamp table td:nth-of-type(1)
    {
        width: 377px;
    }
    .colmun_table-stamp table td:nth-of-type(2), .colmun_table-stamp table td:nth-of-type(3), .colmun_table-stamp table td:nth-of-type(4), .colmun_table-stamp table td:nth-of-type(5)
    {
        width: 145px;
    }
    .table_amount
    {
        display : flex;
        flex-wrap: wrap;
    }
    .table_company_data tr
    {
        display : flex;
        flex-wrap: wrap;
    }
    .table_amount
    {
        border-top : 3px solid #555555;
    }
    .table_amount tr
    {
        display : grid;
        grid-template-columns: 1fr;
        width : 100%;
        margin : 10px 0px;
    }
    .table_amount tr:first-child
    {
        display : none;
    }
    .table_amount td:before{
        content : attr(data-label);
        display : block;
        background-color: #555555;
        color: #ffffff;
        padding : 5px;
        margin-right : 10px;
        width : 150px;
    }
    .table_amount td
    {
        padding : 0px;
        display: grid;
        grid-template-columns: auto 1fr;
    }
    .table_amount tr:first-child td,
    .table_amount tr:last-child td
    {
        padding : 5px;
    }
    .table_amount tr:last-child td:before
    {
        display : none;
    }
    .table_amount tr:last-child
    {
        width : 100%;
    }
    
    .table_company_data th:first-child
    {
        width: 100%;
    }
    .ledger_overview tr
    {
        display : grid;
        grid-template-columns: 1fr;
    }
    .table_company_data td:nth-of-type(2),
    .table_company_data td:nth-of-type(4),
    .table_company_data td
    {
        width: 70%;
    }
    .staff_earnings tr,
    .estate_table tr
    {
        display : grid;
        grid-template-columns: 40% 1fr;
    }
    .equipment th,
    .equipment td,
    .equipment td:last-child
    {
        border : var(--border-color-gray);
    }
    .colmun_table-stamp
    {
        grid-template-columns: 1fr auto;
        gap : 0px;
    }
    .bgcolor_attention span
    {
        top: 0;
        left: unset;
        right: 5px;
    }
    #ATTENTION
    {
        padding: 50px 20px 0px 20px;
    }
    #ATTENTION .button_style
    {
        width : calc(100% / 2 - 10px);
        margin-top : 20px;
    }
    #ATTENTION .next_link_button
    {
        padding: 10px 50px 10px 50px;
    }
 
}
/* ----------------------------------------------------------------------------- */
/* 768px以上 */
/* ----------------------------------------------------------------------------- */
@media screen and (min-width : 768px)
{
    /* ログイン */
    #AUTHENTICATE_FORM
    {
        width: 500px;
    }
}