* {
    margin: 0;
    padding: 0;
}

#contents-details {
    text-align: left;
    font-size: 15px;
}

#contents-details h2 {
    font-size: 20px;
    margin: 20px 0;
}
#contents-details h2 span {
    background-color: #83c600;
    color: #fff;
    font-weight: bold;
    padding: 2px 5px;
}
.bgcolor_gray {
    background-color: #8d8d8d !important;
}

#contents-details .box-2 {
    display: flex;
    justify-content: space-between;
}
#contents-details .box-2 .wrap_slider {
    width: 60%;
}
#contents-details .box-2 .swiper_main {
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
}
#contents-details .box-2 .swiper_main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
}
#contents-details .box-2 .swiper_main .swiper-slide img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
#contents-details .box-2 .swiper_main .swiper-pagination-bullet-active {
    background-color: #608716;
}
#contents-details .box-2 .swiper-button-next, .swiper-button-prev {
    color: #000 !important;
}

#contents-details .box-2 .wrap_thumbnail {
    display: flex;
}
#contents-details .box-2 .swiper_thumbnail {
    height: fit-content;
}
#contents-details .box-2 .swiper_thumbnail .swiper-slide img {
    width: 100%;
    object-fit: contain;
    height: 60px;
}
#contents-details .swiper_thumbnail ul.thumbnail-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    justify-content: center;
    column-gap: 5px;
    row-gap: 5px;
    margin: 10px;
}
#contents-details .swiper_thumbnail ul.thumbnail-wrapper li {
    list-style: none;
    width: 84px;
    height: 64px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
#contents-details .swiper_thumbnail ul.thumbnail-wrapper img {
    object-fit: contain;
    width: 80px;
    height: 60px;
}
#contents-details .swiper_thumbnail ul.thumbnail-wrapper li img.active_thumbnail {
    border: 2px solid rgb(216, 108, 126);
}
#contents-details .box-2 .box-2-r {
    width: 40%;
}
#contents-details .box-2 .box-2-r table {
    width: calc(100% - 10px);
    margin-left: 10px;
}
#contents-details .box-2 .box-2-r table th {
    background-color: #83c600;
    border: 1px solid #83c600;
    color: #fff;
    padding: 15px;
    width: 35%;
}
#contents-details .box-2 .box-2-r table td {
    border: 1px solid #83c600;
    padding: 15px 5px;
    text-align: right;
    word-break: break-all;
}

#contents-details .box-2 .box-2-r .price_table {
    margin-top: 10px;
}

#contents-details .box-2 .box-2-r .red {
    color: red;
    font-size: 25px;
    font-weight: bold;
    margin-right: 5px;
}

#contents-details .box-2 .box-2-r .lease_price {
    color: red;
    font-size: 30px;
    font-weight: bold;
    margin-right: 5px;
}
#contents-details .box-2 .box-2-r .lease_comment {
    margin-top: 10px;
    text-align: left;
}

#contents-details .box-2 .box-2-r .caution {
    margin: 10px 0 10px 10px;
    font-size: 14px;
}
#contents-details .box-2 .box-2-r .caution ul {
    list-style-type: '※';
    padding-left: 14px;
}

#contents-details .box-2 .box-2-r .salespoint {
    background-color: #e9ffbe;
    margin-left: 10px;
    padding: 10px;
}
#contents-details .box-2 .box-2-r .salespoint p {
    color: #014a0d;
    font-weight: bold;
}

.wrap_button {
    margin: 10px 0 0 10px;
}

#mitsumori_button {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-radius: 10px;
    background-color: #ff6a00;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
#mitsumori_button:hover {
    background-color: #ffaf1b;
    cursor: pointer;
}


#contents-details .box-3 {
    margin: 20px 0 30px 0;
}
#contents-details .box-3 p {
    background-color: #8d8d8d;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 5px;
    margin: 20px 0;
}
#contents-details .box-3 table {
    width: 100%;
}
#contents-details .box-3 table th {
    background-color: #83c600;
    border: 1px solid #83c600;
    color: #fff;
    padding: 10px;
    width: 13.5%;
    font-size: 14px;
}
#contents-details .box-3 table td {
    border: 1px solid #83c600;
    padding: 10px;
    width: 19.5%;
    font-size: 14px;
}

.simulator {
    text-align: left;
    font-size: 15px;
    margin: 50px 0;
}
h3 {
    border-left: 5px solid #014a0d;
    border-bottom: 2px solid #014a0d;
    padding: 5px 0 5px 5px;
}
.simulator p {
    margin: 5px;
}
.simulator .wrap_simulator {
    width: 100%;
    max-width: 800px;
}
.simulator table {
    width: 100%;
}
.simulator table th {
    background-color: #83c600;
    border: 1px solid #83c600;
    color: #fff;
    padding: 15px;
    width: 20%;
}
.simulator table td {
    border: 1px solid #83c600;
    padding: 15px;
}
.simulator input {
    width: 80px;
    padding: 5px;
    font-size: 18px;
    border: 1px solid #bbb;
    border-radius: 5px;
}
.simulator select {
    width: 80px;
    padding: 5px;
    font-size: 18px;
    border: 1px solid #bbb;
    border-radius: 5px;
}
.simulator .red {
    color: red;
}
.simulator .s_caution {
    font-size: 11px;
    line-height: 12px;
}
.simulator .pos_button {
    text-align: center;
    margin: 10px 0;
}
.simulator #calcSimulator {
    width: 200px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background-color: #ff6a00;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}
.simulator #calcSimulator:hover {
    background-color: #ff8d00;
    cursor: pointer;
}
.simulator .caution {
    font-size: 12px;
}
.simulator table.result {
    text-align: center;
}
.simulator table.result .price {
    font-size: 30px;
    font-weight: bold;
}

.simulator_sp table th,
.simulator_sp table td {
    padding: 5px;
}
.simulator_sp table.result th {
    width: 30%;
}


.form {
    text-align: left;
    font-size: 15px;
    margin: 50px 0;
}
.form .wrap_table {
    width: 100%;
    max-width: 800px;
}
.form table {
    width: 100%;
}
.form table th {
    background-color: #83c600;
    border: 1px solid #83c600;
    color: #fff;
    padding: 15px;
    width: 35%;
}
.form table th p {
    position: relative;
}
.form table th p::after {
    content: "必須";
    position: absolute;
    right: 0;
    top: -3px;
    background-color: red;
    color:#fff;
    padding: 3px;
}
.form table td {
    border: 1px solid #83c600;
    padding: 15px;
}
.form input[type=text] {
    width: 200px;
    padding: 5px;
    font-size: 18px;
    border: 1px solid #bbb;
    border-radius: 5px;
}
.form textarea {
    width: 100%;
    font-size: 18px;
    border: 1px solid #bbb;
    border-radius: 5px;
    resize: vertical;
}
.form .pos_button {
    text-align: center;
    margin: 10px 0;
}
.form input[type=submit] {
    width: 200px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background-color: #ff6a00;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}
.form input[type=submit]:hover {
    background-color: #ff8d00;
    cursor: pointer;
}


.form_sp th,
.form_sp td {
    display: block;
    width: calc(100% - 30px) !important;
}
.form_sp input[type=text] {
    width: 90%;
}
.form_sp input[name=name_first],
.form_sp input[name=name_last] {
    width: 45%;
}

.form .error {
    font-size: 12px;
    margin: 5px 0 0 0;
    color: red;
}

/*---------------------------------------------*/

#contents-details-sp {
    text-align: left;
    font-size: 15px;
    padding-top: 10px;
}
#contents-details-sp h2 {
    font-size: 19px;
    margin-bottom: 20px;
}
#contents-details-sp h2 span {
    background-color: #83c600;
    color: #fff;
    font-weight: bold;
    padding: 2px 5px;
}


#contents-details-sp .wrap_slider {
    margin-bottom: 20px;
}
#contents-details-sp .box-2 .swiper_main {
    width: 100%;
    height: 250px;
    margin-bottom: 10px;
}
#contents-details-sp .box-2 .swiper_main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
}
#contents-details-sp .box-2 .swiper_main .swiper-slide img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
#contents-details-sp .box-2 .swiper-button-next, .swiper-button-prev {
    color: #000 !important;
}
#contents-details-sp .box-2 .swiper_thumbnail {
    height: fit-content;
}
#contents-details-sp .box-2 .swiper_thumbnail .swiper-slide img {
    width: 100%;
    object-fit: contain;
    height: 60px;
}
#contents-details-sp .box-2 .wrap_thumbnail {
    display: flex;
}
#contents-details-sp .swiper_thumbnail ul.thumbnail-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    justify-content: center;
    column-gap: 5px;
    row-gap: 5px;
    margin: 10px;
}
#contents-details-sp .swiper_thumbnail ul.thumbnail-wrapper li {
    list-style: none;
    width: 84px;
    height: 64px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
#contents-details-sp .swiper_thumbnail ul.thumbnail-wrapper img {
    object-fit: contain;
    width: 80px;
    height: 60px;
}
#contents-details-sp .swiper_thumbnail ul.thumbnail-wrapper li img.active_thumbnail {
    border: 2px solid rgb(216, 108, 126);
}
#contents-details-sp .box-2 .box-2-r table {
    width: 100%;
}
#contents-details-sp .box-2 .box-2-r table th {
    background-color: #83c600;
    border: 1px solid #83c600;
    color: #fff;
    padding: 10px;
    width: 35%;
}
#contents-details-sp .box-2 .box-2-r table td {
    border: 1px solid #83c600;
    padding: 10px 5px;
}

#contents-details-sp .box-2 .box-2-r .price_table {
    margin: 10px 0;
}
#contents-details-sp .box-2 .box-2-r .price_table td {
    text-align: right;
}
#contents-details-sp .box-2 .box-2-r .price_table .lease_comment {
    text-align: left;
}

#contents-details-sp .box-2 .box-2-r .red {
    color: red;
    font-size: 25px;
    font-weight: bold;
    margin-right: 5px;
}
#contents-details-sp .box-2 .box-2-r .caution {
    margin: 10px 0;
    font-size: 13px;
}
#contents-details-sp .box-2 .box-2-r .caution ul {
    list-style-type: '※';
    padding-left: 14px;
}

#contents-details-sp .box-2 .box-2-r .salespoint {
    background-color: #e9ffbe;
    padding: 10px;
}
#contents-details-sp .box-2 .box-2-r .salespoint p {
    color: #014a0d;
    font-weight: bold;
}

#contents-details-sp .box-3 {
    margin: 20px 0 30px 0;
}
#contents-details-sp .box-3 p {
    background-color: #8d8d8d;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    margin: 20px 0;
}
#contents-details-sp .box-3 table {
    width: 100%;
}
#contents-details-sp .box-3 table th {
    background-color: #83c600;
    border: 1px solid #83c600;
    color: #fff;
    padding: 15px;
    width: 17%;
}
#contents-details-sp .box-3 table td {
    border: 1px solid #83c600;
    padding: 15px;
    width: 17%;
}

/*---------------------------------------------*/

.wrap_material {
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(20% - 8px));
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}
.wrap_material div {
    padding: 10px;
    border: 1px solid #bbb;
    color: #bbb;
    font-size: 14px;
}
.wrap_material div.on {
    color: #fff;
    background-color: #83c600;
    border: 1px solid #83c600;
    font-weight: bold;
}

.wrap_material_sp {
    display: grid;
    grid-template-columns: repeat(auto-fit, calc(33% - 8px));
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}
.wrap_material_sp div {
    padding: 10px;
    border: 1px solid #bbb;
    color: #bbb;
    font-size: 14px;
}
.wrap_material_sp div.on {
    color: #fff;
    background-color: #83c600;
    border: 1px solid #83c600;
    font-weight: bold;
}

.back {
    display: flex;
    justify-content: flex-start;
    margin: 5px 0px 10px 0px;
}

.back.nicosoku_button a {
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    background-image: url("/api/img/green-bg.png");
}

button.nicosoku_button,
button.nicosoku_button,
.nicosoku_button input[type="submit"] {
    background-image: url("/api/img/green-bg.png");
}
button.nicosoku_button:hover,
button.nicosoku_button:hover,
.nicosoku_button input[type="submit"]:hover {
    opacity: 0.7;
}

.nicosoku_price_table {
    width: 100%;
    margin: 10px 0;
    table-layout: fixed;
}

.nicosoku_price_table th {
    background-color: #f39595;
    padding: 10px;
    color: #fff;
}
.nicosoku_price_table td {
    border: 1px solid #f39595;
    padding: 10px;
}

div:has(> #moe) {
    text-align: right;
    position: relative;
}

#moe {
    position: absolute;
    width: 80px;
    height: auto;
    right: 10px;
    top: -50px;
}

div:has(> #shocked1) {
    text-align: right;
    position: relative;
}

#shocked1 {
    position: absolute;
    width: 100px;
    height: auto;
    right: 10px;
    top: -20px;
}

#print_button {
    width: 200px;
    padding: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;    
}
#print_button:hover {
    opacity: 0.7;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 5mm;
    }

    body {
        zoom: 1.22;
        width: 928px;
        -webkit-print-color-adjust: exact;
    }
    

    .print_none {
        display: none;
    }

    .box-3,
    .simulator,
    .form {
        break-inside: avoid;
    }

    #moe {
        position: unset;
    }
}

/*---------------------------------------------*/

.wrap_rank {
    width: calc(100% - 10px);
    margin: 10px 0 0 10px;
}
.wrap_rank_sp {
    width: 100%;
    margin-top: 10px;
}
.box_rank {
    display: flex;
    width: 100%;
    margin: 1px;
}
.box_rank .title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    background-color: #ff6a00;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    font-size: 15px;
}
.box_rank .rank {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #ff6a00;
    width: calc(80% - 2px);
    margin-left: 2px;
    font-weight: bold;
    font-size: 13px;
}
.box_rank .rank span {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #bbb;
    width: 32px;
    height: 32px;
    color: #fff;
    margin: 5px;
}
.box_rank .rank span.active {
    background-color: #ff6a00;
}

.aa_link {
    text-align: center;
    font-size: 15px;
    margin: 20px 0 30px 0;
}
.aa_link a {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
    width: 60%;
    max-width: 300px;
    background-color: #ff6a00;
    display: inline-block;
}
.aa_link a:hover {
    text-decoration: none;
    background-color: #ff8d00;
}

.wrap_carpicks_thumbnail {
    display:flex;
}
.wrap_carpicks_thumbnail .swiper_thumbnail {
    width: calc(100% - 100px);
}
#wrapper_developed_view {
    width: 85px;
    text-align: center;
}
#wrapper_developed_view img {
    width: 100%;
    height: auto;
}

#wrapper_developed_view.devview_sp {
    display: flex;
    justify-content: center;
    align-items: center;
}
#wrapper_developed_view.devview_sp img {
    width: 95% !important;
    height: auto !important;;
}


#wrap_print {
    display: none;
}
@media print {
    main.carpicks {
        display: none;
    }
    #wrap_print {
        display: block;
        top:0; 
        left:0; 
        width: calc(100% - 20px); 
        height: calc(100% - 20px);
        z-index: 9999; 
        background-color: #fff; 
        overflow: hidden;
        padding: 10px;
        font-size: 13px;
        text-align: left;
        color: #000;
    }
    #wrap_print .date {
        text-align: right
    }
    #wrap_print .info {
        display: flex;
    }
    #wrap_print .info p {
        border-left: 8px solid #01014e;
        padding-left: 10px;
        margin-right: 20px;;
    }
    #wrap_print .title {
        background-color: #333;
        color: #fff;
        font-size: 15px;
        padding: 8px;
        margin: 10px 0;
    }
    #wrap_print .title span {
        font-size: 13px;
    }
    #wrap_print .wrap_detail {
        display: flex;
    }
    #wrap_print .wrap_detail .imgs {
        width: 77%;
    }
    #wrap_print .wrap_detail .imgs .wrap_imgs {
        display: flex;
    }
    #wrap_print .wrap_detail .imgs .wrap_imgs img {
        width: 40%;
        margin-right: 10px;
    }

    #wrap_print .wrap_detail .imgs .wrap_syuppinhyou {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        margin: 20px 0;
    }
    #wrap_print .wrap_detail .imgs .wrap_syuppinhyou .hl {
        border-left: 8px solid #01014e;
        padding-left: 10px;
        margin-right: 20px;
        font-size: 15px;
    }
    #wrap_print .wrap_detail .imgs #syuppinhyou_img {
        width: 90%;
        margin-top: 10px;
    }

    #wrap_print .wrap_detail .data {
        width: 23%;
    }
    #wrap_print .wrap_detail .data table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    #wrap_print .wrap_detail .data table.tbl1 th,
    #wrap_print .wrap_detail .data table.tbl1 td {
        border: 1px solid #333;
        padding: 10px;
    }
    #wrap_print .wrap_detail .data table.tbl1 th {
        background-color: #ddd;
        font-size: 16px;
        width: 47%;
    }
    #wrap_print .wrap_detail .data table.tbl1 td {
        text-align: right;
    }

    #wrap_print .wrap_detail .data table.tbl2 {
        margin: 10px 0;
    }
    #wrap_print .wrap_detail .data table.tbl2 tr:nth-child(even) {
        background-color: #ddd;
    }

    #wrap_print .wrap_detail .data table.tbl2 th {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        border-left: 1px solid #333;
        padding: 5px;
        width: 40%;
    }
    #wrap_print .wrap_detail .data table.tbl2 td {
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        padding: 5px;
    }
    #wrap_print .wrap_detail .data table.tbl2 .material_tr {
        background-color: #fff !important;
    }
    #wrap_print .wrap_detail .data table.tbl2 .teisei_tr {
        background-color: #ddd !important;
    }
    #wrap_print .wrap_detail .data table.tbl2 .material_th {
        border-right: 1px solid #333;
        border-bottom: none;
    }
    #wrap_print .wrap_detail .data table.tbl2 .material_td {
        border-left: 1px solid #333;
        border-top: none;
        font-size: 10px;
        height: 300px;
        vertical-align: top;
    }

    #wrap_print .wrap_detail .data .memo {
        padding: 5px;
        border: 1px solid #aaa;
        color: #aaa;
        height: 300px;
    }

    #wrap_print .caution {
        display: flex;
        margin-top: 10px;
    }
    #wrap_print .caution p {
        writing-mode: vertical-rl;
        padding: 10px;
        background-color: #cfe9f3;
        color: #1b2981;
        border: #99c4e1 1px solid;
        text-align: center;
    }
    #wrap_print .caution div {
        width: 100%;
        padding: 10px;
        border-top: #777 1px solid;
        border-right: #777 1px solid;
        border-bottom: #777 1px solid;
    }
}


.otoriyose select {
    width: 100%;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 5px;
}
.otoriyose p {
    font-size: 13px;
}
.otoriyose #otoriyose {
    font-weight: bold;
}