@charset "UTF-8";

/* Data Sample
============================================================================= */
.data-sample-area {
    padding: 4rem 0 5rem 0;
    background-color: #ECECEC;
}

.data-sample-area > .inner {
    width: 1100px;
    margin: 0 auto;
    padding: 4rem;
    background-color: #FFFFFF;
}

@media (min-width: 768px) and (max-width: 950px) {

    .data-sample-area {
        padding: 4rem 1rem;
    }

}

@media (max-width: 767px) {

    .data-sample-area {
        padding: 2rem 1rem;
    }

    .data-sample-area > .inner {
        width: auto;
        margin: 0;
        padding: 2rem 1rem;
    }

}

/* Title ==================================================================== */
.data-sample-area .title-block {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 0.8rem;
    border-bottom: 0.3rem solid #00A3E5;
}

.data-sample-area .title-block h1 {
    margin-bottom: 0;
    font-size: 2rem;
}

.data-sample-area .title-block p {
    margin: 0 0 0 auto;
    color: #666666;
}

.data-sample-area .title-block p span {
    display: inline-block;
    margin-left: 1rem;
    padding: .4rem .6rem;
    border: .1rem solid #666666;
    font-size: 1.3rem;
    line-height: 1;
}

@media (max-width: 767px) {

    .data-sample-area .title-block {
       align-items: flex-start;
       flex-direction: column;
    }

    .data-sample-area .title-block h1 {
        width: 100%;
        margin-bottom: .25em;
    }

    .data-sample-area .title-block p {
        width: 100%;
        font-size: 1.3rem;
    }

    .data-sample-area .title-block p span {
        font-size: 1.2rem;
    }

}

/* Data Table =============================================================== */
.data-sample-area .sample-data :last-child {
    margin-bottom: 0;
}

.data-sample-area .sample-data > table tr:nth-child(1) th:nth-child(1) {
    width: 22%;
}

.data-sample-area .sample-data table th {
    background-color: #F5F5F5;
}

.data-sample-area .sample-data table table th {
    text-align: center;
}

.data-sample-area .sample-data table td {
    background-color: #FFFFFF;
}

.data-sample-area .sample-data table .left {
    text-align: left;
}

.data-sample-area .sample-data table .center {
    text-align: center;
}

.data-sample-area .sample-data table .right {
    text-align: right;
}

.data-sample-area .sample-data table.border-none1 {
	border-right: none;
	border-bottom: none;
}

.data-sample-area .sample-data table .border-none2 {
	border-right: none;
	border-bottom: none;
	border-top: none;
}

.data-sample-area .sample-data table + table {
    margin-top: 2rem;
}

.data-sample-area .sample-data dl.section dt {
	padding: 1rem;
    background-color: #777777;
    border: .1rem solid #BABABA;
	color: #FFFFFF;
	font-weight: bold;
}

.data-sample-area .sample-data dl.section dd {
	border: .1rem solid #BABABA;
	border-top: none;
	padding: 1rem;
}


@media (max-width: 767px) {

    .data-sample-area .sample-data {
        overflow-x: scroll;
    }

    .data-sample-area .sample-data > table,
    .data-sample-area .sample-data > .section {
        max-width: none;
        min-width: 980px;
        width: 980px;
    }

}

/* Text ===================================================================== */
.data-sample-area .signature {
    margin-top: 2rem;
    font-size: 1.8rem;
    text-align: right;
}

@media (max-width: 767px) {

    .data-sample-area .signature {
        width: 980px;
    }

}


/* Print ==================================================================== */
@page {
    margin: 6mm;
    size: 210mm 297mm;
}

@media print {

    body {
        width: 1100px;
        zoom: .76;
    }

    .breadcrumb,
    #page-top {
        display: none;
    }

    .data-sample-area {
        padding: 0;
        background-color: #FFFFFF;
    }

    .data-sample-area > .inner {
        width: 100%;
        padding: 4rem 0;
    }

    .data-sample-area .title-block p {
        font-size: 1.6rem;
        text-align: right;
    }

    .data-sample-area .title-block p span {
        background-color: #000000;
        color: #FFFFFF;
        font-size: 1.6rem;
    }

    footer {
        padding-bottom: 0;
        background-color: #FFFFFF;
        border-top: .1rem solid #000000;
        color: #000000;
    }

}

@media print and (max-width: 767px) {

    header .logo span {
        display: block;
    }

    .data-sample-area .title-block {
        align-items: center;
        flex-direction: row;
    }

    .data-sample-area .sample-data {
        overflow-x: visible;
    }

}