@charset "utf-8";
@import "common.css";



    div#column_1st
    {
        width: 218px;

        vertical-align: top;

        display: inline-block;
    }
    div#column_2nd
    {
        width: 854px;

        margin-left: 28px;

        vertical-align: top;

        display: inline-block;
    }



    div#column_1st div.all_rec {
        text-align: center;
        padding: 10px;
    }
    div#column_1st dl
    {
        margin-bottom: 20px;
        background: #ffffff;
    }
    div#column_1st dl dt
    {
        color: #000080;
        font-weight: bold;
        text-indent: 33px;
        line-height: 30px;

        width: 216px;
        height: 33px;

        border-top: 1px solid #aaaaaa;
        border-left: 1px solid #aaaaaa;
        border-right: 1px solid #aaaaaa;

        background: url("../images/titlebar_background.gif") left top no-repeat;
    }
    div#column_1st dl dd
    {
        border-left: 1px solid #aaaaaa;
        border-right: 1px solid #aaaaaa;
        border-bottom: 1px dotted #666666;

        position: relative;
    }

    /* マッチング登録リンク */

    div#column_1st dl dd.match
    {
        text-align: center;
        background: none;
    }
    div#column_1st dl dd a.matching
    {
        color: #006600;
        font-weight: bold;

        border: 3px solid #bff2cc;

        background: #4adb6e;
    }
    div#column_1st dl dd a.matching:hover
    {
        border: 3px solid #4adb6e;

        background: #bff2cc;
    }

    /* /マッチング登録リンク */

    div#column_1st dl dd:last-child
    {
        border-bottom: 1px solid #aaaaaa;
    }
    div#column_1st dl dd a, div#column_1st dl dd > span
    {
        color: #333333;
        text-decoration: none;

        padding: 8px 20px 8px 8px;

        background: url("../images/cont_box_bottom_bg_arrow.gif") right center no-repeat #ffffff;

        display: block;
    }
    div#column_1st dl dd a:hover, div#column_1st dl dd > span:hover
    {
        background: url("../images/cont_box_bottom_bg_arrow_mo.gif") right center no-repeat #eeeeee;
    }



    /* region for 地域選択 */

    div#column_1st dl dd > label
    {
        color: #333333;
        text-decoration: none;

        padding: 8px;

        background: url("../images/cont_box_bottom_bg_arrow.gif") right center no-repeat #ffffff;

        display: block;
    }
    div#column_1st dl dd > label input
    {
        vertical-align: middle;
        margin: 5px;
    }
    div#column_1st dl dd > ul.areas
    {
        list-style: none;

        width: 823px;

        position: absolute;
        top: 0;
        left: 216px;
        z-index: 5;
        display: none;
    }
    div#column_1st dl dd > ul.areas li
    {
        white-space: nowrap;
        border: 1px solid #aaaaaa;
        background: #ffffff;
        width: 200px;
        float: left;
    }
    div#column_1st dl dd > ul.areas li label
    {
        padding: 8px;

        display: inline-block;
    }
    div#column_1st dl dd > ul.areas li label input
    {
        vertical-align: middle;
        margin: 5px;
    }

    div.selected_areas
    {
        height: 0px;
        overflow: auto;
    }
    div.selected_areas div.selected_area
    {
        border: 3px double #aaaaaa;
        background: #cbcbcb;
        margin: 0 3px 3px 3px;
    }
    div.selected_areas div.selected_area input
    {
        vertical-align: middle;
        margin: 5px;
    }

    /* end region */


    div#column_1st dl dd table.search_form
    {
        width: 100%;
    }
    table.search_form tr th, table.search_form tr td
    {
        padding: 5px;
    }
    table.search_form tr th
    {
        background: #cbcbcb;
    }
    table.search_form tr td input, table.search_form tr td select
    {
        vertical-align: middle;
        margin: 5px;
    }
    table.search_form tr td.submit
    {
        text-align: center;

        border-top: 1px dotted #666666;
    }
    table.search_form tr td.submit > input
    {
        border-color: #cbcbcb;
        border-radius: 5px;

        padding: 5px 15px;
    }
    dd.submit {
        text-align: center;
    }
    dd.submit > input
    {
        border-color: #cbcbcb;
        border-radius: 5px;
        padding: 5px 15px;
    }
    div#column_2nd dl
    {
        margin-bottom: 20px;
    }
    div#column_2nd dl dd
    {
        line-height: 1.4em;

        padding-bottom: 8px;
    }
    div#column_2nd dl dd a
    {
        text-decoration: none;
    }
    div#column_2nd dl dd a:hover
    {
        text-decoration: none;
    }

    .pointer {
        cursor: pointer;
    }


    #data ul
    {
        list-style: none;

        margin: 0;
        padding: 0;
    }
    #data > ul > li
    {
        /* border-bottom: 1px dotted #666666; */

        margin-bottom: 15px;
        /*padding-bottom: 15px;*/

        clear: both;
    }
    #data > ul > li.data_table
    {
        border-top: 5px solid #006600;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;

        margin-bottom: 75px;
    }
    #data > ul > li.sumi
    {
        background: #999999;
    }

    #data > ul > li.refine {
        border: 0;
        border-radius: 4px;
        padding: 5px 10px;
        background: #ffffcc;
    }
    #data > ul > li.refine input, #data > ul > li.refine select {
        margin: 5px;
    }


    #data > ul > li.record_li
    {
        line-height: 1.4em;

        margin-bottom: 0;
        padding: 0 10px 10px 10px;
    }
    #data > ul > li.record_li div.record
    {
        padding: 5px 0;

        float: left;
    }
    #data > ul > li.record_li div.record span.rec
    {
        color: #0066ff;
        font-weight: bold;
        font-size: 180%;
        line-height: 1.4em;

        margin-right: 3px;
    }

    #data > ul > li.record_li ul.boxies li
    {
        line-height: 1.6em;
        text-align: center;

        border-radius: 3px;

        margin-left: 5px;

        background: #f5f5f5;

        float: right;
    }
    #data > ul > li.record_li ul.boxies li.no_fav {
        padding: 10px;
    }
    #data > ul > li.record_li ul.boxies li a
    {
        color: #000000;

        border-radius: 3px;

        padding: 10px;

        display: block;
    }
    #data > ul > li.record_li ul.boxies li a:hover
    {
        background: #ffbbbb;
    }
    #data > ul > li.record_li ul.boxies li span.num
    {
        font-size: 160%;
        font-weight: bold;
        color: #ff6347;

        margin: 0 3px;
    }

    #data > ul > li.record_li ul.boxies li#fav_on1,
    #data > ul > li.record_li ul.boxies li#fav_on2 {
        border: 3px solid #ffbbbb;
    }
    #data > ul > li.record_li ul.boxies li#fav_on1 a,
    #data > ul > li.record_li ul.boxies li#fav_on2 a {
        padding: 7px;
    }

    @-webkit-keyframes pulse {
     from {
        background: #f5f5f5;
     }
     to {
        background: #ffbbbb;
     }
    }
    .blinking{
    -webkit-animation-name: pulse;/* 実行する名前 */
    -webkit-animation-duration: 1s;/* 0.3秒かけて実行 */
    -webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
    -webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
    -webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
    -webkit-animation-delay: 0s; /* 実行までの待ち時間 */
    }

    #data > ul > li.record_li > div#sunbbs
    {
        border-radius: 5px;
        border: 3px double #cbcbcb;

        background: #f0f5ff;

        margin-top: 20px;
    }
    #data > ul > li.record_li > div#sunbbs a
    {
        color: #ff6600;
        display: block;
        padding: 5px 10px;
    }

    #data > ul > li.record_li > div#sale
    {
        border-radius: 5px;
        border: 3px solid #ffca95;

        background: #ffe4ca;

        margin-top: 20px;
    }
    #data > ul > li.record_li > div#sale a
    {
        color: #993300;
        display: block;
        padding: 5px 10px;
    }


    li.pages
    {
        padding: 10px 0 10px 10px;
    }
    ul.page_anchor li
    {
        float: left;
    }
    ul.page_anchor li span, ul.page_anchor li a
    {
        display: block;
    }
    ul.page_anchor li span
    {
        color: #cbcbcb;

        margin-right: 10px;
        padding: 5px;

        border: 1px solid #cbcbcb;
    }
    ul.page_anchor li a
    {
        color: #333333;
        text-decoration: underline;

        margin-right: 10px;
        padding: 5px;

        border: 1px solid #cbcbcb;
    }
    ul.page_anchor li a:hover
    {
        background: #eeeeee;
    }



    div.catch
    {
        font-size: 140%;
        color: #0063ff;
        line-height: 1.4em;

        padding: 10px;

        position: relative;
        z-index: 1;
    }
    div.img
    {
        font-size: 120%;
        text-align: center;
        line-height: 2em;

        width: 141px;

        float: left;
    }
    span.new
    {
        font-weight: bold;
        font-size: 60%;
        color: #ffffff;

        /*border: 3px solid #ffcc99;*/
        border-radius: 3px;
        box-shadow: 0 2px 3px #ccc;

        margin-right: 5px;
        padding: 2px 5px;

        position: relative;
        top: -3px;
        left: -5px;
        z-index: 1;

        background: #ff6633;
    }
    span.seen
    {
        font-size: 85%;
        color: #ffffff;

        border-radius: 5px;
        border: 2px solid #bff2cc;

        background: #4adb6e;

        padding: 2px 5px;
    }

    span.seen2
    {
        font-size: 70%;
        color: #ffffff;

        border-radius: 5px;
        border: 2px solid #cce5ff;

        background: #80bdff;

        padding: 5px;
    }

    table.data
    {
        width: 680px;

        border-collapse: collapse;

        margin: 0 0 10px 0;

        float: right;
    }
    table.data tr th, table.data tr td
    {
        border: 1px solid #cbcbcb;

        padding: 3px;
    }
    table.data tr th
    {
        font-weight: normal;
        text-align: center;

        white-space: nowrap;

        background: #dfdfdf;
    }
    table.data tr td
    {
        text-align: center;
        line-height: 2em;
    }

    span.mae_price {
        text-decoration: line-through;
    }
    span.price
    {
        color: #ba0000;
        font-weight: bold;
        font-size: 120%;
    }
    span.menseki
    {
        color: #027abb;
        font-weight: bold;
        font-size: 120%;
    }

    /* 消費税アイコン */

    span.taxin
    {
        font-size: 75%;
        color: #000000;
        font-weight: normal;

        margin-left: 5px;
        padding: 2px 5px 0 4px;
    }
    span.taxunknown
    {
        font-size: 75%;
        color: #000000;
        font-weight: normal;

        margin-left: 5px;
        padding: 2px 5px 0 4px;
    }
    span.taxfree
    {
        font-size: 75%;
        color: #000000;
        font-weight: normal;

        margin-left: 5px;
        padding: 2px 5px 0 4px;
    }

    /* /消費税アイコン */

    div.detail ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    div.detail ul li
    {
        margin: 8px 0 8px 15px;

        float: right;
    }

    div.detail ul li.to_detail {
        border-radius: 5px;
        border: 3px solid #bff2cc;

        background: #4adb6e;
    }
    div.detail ul li.to_detail:hover {
        border-radius: 5px;
        border: 3px solid #4adb6e;

        background: #bff2cc;
    }
    div.detail ul li.to_detail:hover a {
        color: #21a542;
    }

    div.detail ul li.to_contact {
        border-radius: 5px;
        border: 3px solid #ffcccc;

        background: #ff6699;
    }
    div.detail ul li.to_contact:hover {
        border-radius: 5px;
        border: 3px solid #ff6699;

        background: #ffcccc;
    }
    div.detail ul li.to_contact:hover a {
        color: #ff1e67;
    }

    div.detail ul li.sumi
    {
        border-radius: 5px;
        border: 3px solid #cbcbcb;

        background: #666666;
    }

    div.detail ul li.favorite_yet {
        border-radius: 5px;
        border: 3px solid #aaffff;

        background: #00ccff;

        cursor: pointer;
    }
    div.detail ul li.favorite_yet:hover {
        border-radius: 5px;
        border: 3px solid #00ccff;

        background: #aaffff;

        cursor: pointer;
    }
    div.detail ul li.favorite_yet:hover span {
        color: #009ec6;
    }

    div.detail ul li.favorite {
        text-indent: 1.2em;

        border-radius: 5px;
        border: 3px solid #aaaaaa;

        background: url("../images/favorite_check.png") left center no-repeat #f5f5f5;

        cursor: pointer;
    }
    div.detail ul li.favorite span {
        color: #333333;
    }

    div.detail ul li.web_itiran
    {
        font-size: 110%;
        font-weight: bold;
        color: #ff3333;

        width: 350px;

        margin-left: 5px;
        padding: 8px 10px 8px 0;

        float: left;
    }
    div.detail ul li a, div.detail ul li span
    {
        color: #ffffff;

        padding: 5px 10px;

        display: block;
    }

    div.icons
    {
        margin-top: 10px;
        padding: 10px;

        border-top: 1px dotted #666666;
    }
    div.icons ul li
    {
        /*border-left: 3px solid #ff9933;*/

        margin-right: 10px;
        padding: 5px 10px;

        float: left;
    }
    div.icons ul li img
    {
        margin-right: 5px;
    }
    div.icons ul li a {
        color: #000000;
        text-decoration: none;
    }

/* =============================

2021年06月17日css追加分

============================== */


    .ndata_table {
        border: 1px solid #000;
        border-radius: 5px;
    }

    .help img {
        vertical-align: middle;
    }

    .info_title {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
        background-color: #dfdfdf;
        padding: 10px 0;
        border-radius: 5px 5px 0 0;
    }

    .num_syu {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
    }

    .num_syu a {
        color: #000000;
    }

    .syumoku {
        background-color: #004385;
        padding: 10px 20px;
        font-weight: bold;
        color: #fff;
        font-size: 1.15rem;
        vertical-align: middle;
        margin: 5px 0 0 15px;
    }

    .b_num {
        padding-left: 15px;
        font-weight: bold;
        font-size: 1.3rem;
        margin-top: 5px;
        padding-top: 10px;
    }

    .icon_photo {
        margin-left:auto;
        margin-right: 15px;
    }

    .icon_photo li {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
    }
    .icon_photo img {
        width: 100px;
        margin: 0 2px;
    }

    .photo_info {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
        margin: 15px 0 15px 15px;

    }

    .photo_main img {
        width: 250px;
        height: 187.5px;
    }

    .info_table {
        margin-left: 15px;
    }

    .info_table table {
        border-collapse: collapse;
        width: 560px;
        height: 188px;
        font-size: 1.1rem;
    }

    .info_table table th , .info_table table td {
        border: 1px solid #cbcbcb;
    }

    .info_table table td {
        padding-left: 15px;
        /* font-weight: bold; */
        font-size: 15px;
        vertical-align: middle;
    }

    .info_table table th {
        background: #dfdfdf;
        text-align: center;
        width: 80px;
        padding: 10px 5px 5px 5px;
        vertical-align: middle;
        font-size: 15px;
        color: #666666;
    }

    .botton_line a {
        color: #004386;
        text-decoration: underline;
        /* border-bottom: 1px solid #666666; */
    }

    .wide {
        width: 250px;
    }

    .bold {
        font-weight: bold;
        font-size: 15.5px;
    }

    .wide_mini {
        width: 150px;
    }

    .catch_f {
        display:-webkit-box;
        display:-ms-flexbox;
        display: flex;
        margin-bottom: 15px;
    }

    .catch_ff {
        margin-left: 15px;
    }

    .catch_ff table {
        width: 645px;
        height: 48px;
    }

    .catch_ff table th , .catch_ff table td {
        border: 2px solid #004386;
    }

    .catch_ff table th {
        width: 180px;
        vertical-align: middle;
        text-align: center;
        font-size: 1rem;
        color: #004386;
    }

    .catch_ff table td {
        background-color: #EBF6FD;
        padding: 5px;
        font-size: 15.5px;
        vertical-align: middle;
        width: 500px;
    }

    .info_view img {
        /* width: 180px; */
        height: 46px;
        margin-left: 15px;
        /* padding-top: 7px; */
    }

    .info_view p img {
        vertical-align: middle;
    }


    .footer_img {
        text-align: right;
        margin: 0 10px 10px 0;
    }
    .pd_20 {
        padding-left: 10px;
        width: 150px;
    }

    .footer_img img {
        /* width: 150px; */
        height: 43px;
    }

    .fs_15 {
        font-size: 15.5px;
    }

    .fav_pop {
        position:fixed;
        display:none;
        z-index:9999;
        max-width: 1500px;
        /* min-height: 650px; */
        height: 70vh;
        /* min-height: 600px; */
        max-height: 700px;
        margin:0;
        padding:20px 20px;
        border: 3px solid #d5d5d5;
        border-radius: 15px;
        background: #fff;
    }

    .modal-overlay {
        z-index:1;
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:120%;
        background-color:rgba(0,0,0,0.75);
    }

    .fav_info_mainimg img {
        width: 80%;
    }

    .fav_info_mainimg {
        text-align: center;
        margin-top: 30px;
    }

    .info_title_list {
        text-align: center;
        margin-top: 20px;
        font-size: 1.3rem;
        color: red;
    }

    .fav_detail img:hover {
        opacity: .7;
    }

    .fav_detail img {
        vertical-align: middle;
    }

    .close_set {
        margin-top: 6%;
    }

    .close_set input {
        padding-left: 50px;
    }


    .close_set img {
        padding-left: 28%;
        text-align: center;
    }
    .ribon {
      position: relative;
      display: inline-block;
      overflow: hidden;
    }

    .ribon .caption {
      display: inline;
    }

    .ribon span {
      position: absolute;
      display: inline-block;
      top: 20px;
      left: -25px;
      width: 100px;
      padding: 2px 10px;
      background: #cc0c0c;
      color: #fff;
      text-align: center;
      transform: rotate(-45deg);
    }