@charset "UTF-8";
/* 釣果情報ページ CSS（ssm-uraga から移植） */

/* main.css の a {display:block} で .user_name 内の場所リンクが縦並びになるのを抑止 */
.user_name span a {
    display: inline;
}

.common_fv {
    background-image: url(../img/fishing/main_image.jpg);
}
/* ===============================================
  PC（770px以上）
=============================================== */
@media screen and (min-width: 770px) {
    .innerarea {
        max-width: 1100px;
        width: 100%;
        font-size: 17px;
        line-height: 2;
        color: var(--color-thema);
        margin: 0 auto;
    }
    h3 {
        margin-top: 40px;
        margin-bottom: 24px;
        color: #009fd6;
        font-size: 33px;
        font-weight: bold;
        line-height: 1.6;
        text-align: center;
    }
    #main_conts {
        width: 100%;
        float: left;
        clear: both;
        margin: 0 auto;
        margin-bottom: 125px;
    }
    #main_conts h4 {
        font-size: 24px;
        line-height: 1.3;
        color: #fff;
        background-color: var(--color-thema);
        padding: 6px 10px 4px;
    }
    #main_conts .left_box {
        width: 720px;
        float: left;
    }
    #main_conts .left_box .subtitle_text {
        font-size: 15px;
        padding-top: 9px;
        padding-bottom: 27px;
    }
    #main_conts .left_box .fishing_area .fishing_index {
        display: flex;
        width: 100%;
        border: solid 1px var(--color-border-main);
        padding: 30px 26px;
        box-sizing: border-box;
        float: left;
        clear: both;
        position: relative;
        margin-bottom: 20px;
        justify-content: space-between;
    }
    #main_conts .left_box .fishing_area .fishing_index:last-of-type {
        margin-bottom: 0;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img {
        display: inline-block;
        vertical-align: top;
        width: 212px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img {
        width: 100%;
        height: 212px;
        text-align: center;
        background-color: #eaeaea;
        display: block;
        overflow: hidden;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img_yoko {
        width: 100%;
        height: 212px;
        text-align: center;
        background-color: #eaeaea;
        margin-bottom: 10px;
        display: table-cell;
        vertical-align: middle;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img img {
        height: 100%;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img_yoko img {
        width: 100%;
        vertical-align: middle;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul {
        width: 212px;
        height: 40px;
        margin: 10px 0;
        font-size: 0px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li {
        width: 40px;
        display: inline-block;
        margin-right: 3px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li:last-child {
        margin-right: 0px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li .img {
        width: 100%;
        height: 40px;
        text-align: center;
        background-color: #eaeaea;
        display: block;
        overflow: hidden;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li .img_yoko {
        width: 100%;
        height: 40px;
        text-align: center;
        background-color: #eaeaea;
        margin-bottom: 10px;
        display: table-cell;
        vertical-align: middle;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text {
        float: right;
        width: 432px;
        color: #434343;
        font-size: 14px;
        line-height: 28px;
        padding-left: 15px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .user_name {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .user_name span {
        display: flex;
        gap: 6px;
        width: fit-content;
        color: var(--color-thema);
        flex-wrap: wrap;
        margin-left: 20px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .user_name a {
        width: fit-content;
        padding: 2px 0 2px 20px;
        background-image: url(/img/fishing/icon_img_02.png);
        background-repeat: no-repeat;
        background-position: 0 8px;
        background-size: 11px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text h5 {
        font-size: 23px;
        line-height: 26px;
        padding-left: 7px;
        padding-top: 2px;
        border-left: solid 6px var(--color-thema);
        color: var(--color-thema);
        margin-top: 4px;
        margin-bottom: 16px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .main_text {
        color: var(--color-thema);
        margin-bottom: 16px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .fishing_result {
        display: inline-block;
        line-height: 1.7;
        background-color: var(--color-bg-main);
        padding-left: 1.7em;
        padding-right: 4px;
        padding-top: 2px;
        padding: 3px 8px 3px 28px;
        background-image: url(/img/fishing/icon_img_03.png);
        background-repeat: no-repeat;
        background-size: 15px;
        background-position: 8px center;
        margin-right: 4px
    }
    #main_conts .left_box .fishing_area .fishing_index .date {
        font-size: 15px;
        position: absolute;
        right: -2px;
        bottom: -2px;
        color: #fff;
        line-height: 1.5;
        padding: 2px 13px 2px 13px;
        background-color: var(--color-thema);
        background-repeat: no-repeat;
        background-size: cover;
    }
    #main_conts .right_box {
        width: 330px;
        float: right;
    }
    #main_conts .right_box h4 {
        text-align: center;
    }
    #main_conts .right_box .wrapper {
        border-bottom: solid 1px var(--color-border-main);
        border-left: solid 1px var(--color-border-main);
        border-right: solid 1px var(--color-border-main);
        padding-top: 16px;
        float: left;
        clear: both;
        width: 326px;
        padding-bottom: 12px;
    }
    #main_conts .right_box .fish_search_area {
        float: left;
        clear: both;
        margin-bottom: 45px;
    }
    #main_conts .right_box .fish_search_area ul li {
        line-height: 1.2;
        display: inline-block;
        margin: 4px 12px;
        padding-left: 1.2em;
        background-image: url(/img/fishing/icon_img_03.png);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 12px;
    }
    #main_conts .right_box .point_search_area {
        float: left;
        clear: both;
        margin-bottom: 45px;
    }
    #main_conts .right_box .point_search_area ul li {
        line-height: 1.2;
        display: inline-block;
        margin: 4px 12px;
        padding-left: 1.2em;
        background-image: url(/img/fishing/icon_img_02.png);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 10px;
    }
    .search_area {
        width: 100%;
        text-align: right;
    }
    .search_area li, .search_area ul {
        display: inline-block;
    }
    .search_area ul {
        display: inline-block;
        margin-right: 10px;
    }
    .search_area ul:last-of-type {
        display: inline-block;
        margin-right: 0;
    }
    .search_area .title {
        display: inline;
        padding-right: 10px;
        font-weight: bold;
    }
    .search_area .name {
        display: inline;
    }
    .search_area select.search {
        -webkit-appearance: none;
        appearance: none;
        font-size: 15px;
        line-height: 1;
        margin-bottom: 15px;
        display: inline;
        padding: 8px 20px 8px 10px;
        border-radius: 4px;
        background: #fff url(../img/share/button_icon.png) no-repeat right 10px center/11px;
        border: 1px solid var(--color-border-main);
        position: relative;
    }
    .pagination_area {
        clear: both;
        text-align: center;
        padding: 20px 0;
    }
    .pagination {
        list-style: none;
        padding: 0;
    }
    .pagination li {
        display: inline-block;
        margin: 0 5px;
    }
    .pagination li a,
    .pagination li .current {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #009fd6;
        color: #009fd6;
        text-decoration: none;
    }
    .pagination li a:hover {
        background: #009fd6;
        color: #fff;
    }
    .pagination li .current {
        background: #009fd6;
        color: #fff;
    }
}

/* ===============================================
  SP（769px以下）
=============================================== */
@media screen and (max-width: 769px) {
    #main_conts {
        padding-top: 0px;
        width: 100%;
        margin-bottom: 80px;
    }
    #main_conts .innerarea {
        width: 90%;
        margin-inline: auto;
    }
    #main_conts h4 {
        font-size: 20px;
        line-height: 1.5;
        color: #fff;
        background-color: var(--color-thema);
        padding: 6px 10px 4px;
        margin-bottom: 0;
    }
    #main_conts .left_box, #main_conts .right_box {
        width: 100%;
        float: none;
        clear: both;
    }
    #main_conts .left_box {
        margin-bottom: 30px
    }
    #main_conts .left_box .subtitle_text {
        font-size: 15px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #main_conts .left_box .search_area {
        display: flex;
        font-size: 15px;
        line-height: 1.5;
        gap: 20px;
        margin-bottom: 20px;
    }
    #main_conts .left_box .search_area .title {
        white-space: nowrap;
        font-weight: 600;
    }
    #main_conts .left_box .search_area select.search {
        -webkit-appearance: none;
        appearance: none;
        max-width: 132px;
        font-size: 13px;
        color: inherit;
        padding: 7px 24px 6px 6px;
        margin-top: 4px;
        border-radius: 4px;
        border: 1px solid var(--color-border-main);
        background: #fff url(../img/share/button_icon.png) no-repeat right 8px center/11px;
    }
    #main_conts .left_box .fishing_area .fishing_index {
        width: 100%;
        border: solid 1px var(--color-border-main);
        padding: 20px 5% 22px;
        box-sizing: border-box;
        position: relative;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img {
        width: 100%;
        margin-bottom: 20px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .main-image {
        height: auto;
        display: block;
        margin-bottom: 12px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img_yoko {
        height: auto;
        display: block;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img {
        position: relative;
        height: 297px;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img .img img {
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul {
        width: 100%;
        display: flex;
        height: auto;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li {
        width: 18%;
        margin-right: 1.25%;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li>p img_yoko {
        margin-bottom: 0;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li:nth-child(5n) {
        margin-right: 0;
    }
    #main_conts .left_box .fishing_area .fishing_index .left_img ul li .img_yoko {
        height: auto;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text {
        width: 100%;
        padding: 0;
        margin-bottom: 14px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .user_name {
        margin-bottom: 20px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .user_name span {
        display: flex;
        gap: 6px;
        font-size: 14px;
        width: fit-content;
        color: var(--color-thema);
        flex-wrap: wrap;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .user_name a {
        width: fit-content;
        padding: 2px 0 2px 17px;
        background-image: url(/img/fishing/icon_img_02.png);
        background-repeat: no-repeat;
        background-position: 0 7px;
        background-size: 11px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text h5 {
        font-size: 18px;
        line-height: 1.2;
        padding-left: 7px;
        padding-top: 2px;
        border-left: solid 6px var(--color-thema);
        color: var(--color-thema);
        margin-top: 4px;
        margin-bottom: 14px;
    }
    #main_conts .left_box .fishing_area .fishing_index .right_text .fishing_result {
        line-height: 1.7;
        font-size: 13px;
        display: inline-block;
        padding-left: 20px;
        padding-right: 6px;
        padding-top: 2px;
        background-color: var(--color-bg-main);
        background-image: url(/img/fishing/icon_img_03.png);
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: left 6px center;
    }
    #main_conts .right_box .wrapper {
        border: 1px solid var(--color-border-main);
        box-sizing: border-box;
        padding: 20px 5% 22px;
        margin-bottom: 0;
        width: 100%;
    }
    #main_conts .right_box .fish_search_area,
    #main_conts .right_box .point_search_area {
        margin-bottom: 30px;
        width: 100%;
    }
    #main_conts .right_box .fish_search_area .subtitle,
    #main_conts .right_box .point_search_area .subtitle {
        margin-bottom: 0;
    }
    #main_conts .right_box .fish_search_area ul {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }
    #main_conts .right_box .point_search_area ul {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }
    #main_conts .right_box .fish_search_area ul li {
        line-height: 1.2;
        display: inline-block;
        padding-left: 18px;
        background-image: url(/img/fishing/icon_img_03.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 13px;
        font-size: 14px;
    }
    #main_conts .right_box .point_search_area ul li {
        line-height: 1.2;
        display: inline-block;
        padding-left: 18px;
        background-image: url(/img/fishing/icon_img_02.png);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 11px;
        font-size: 14px;
    }
    .main_text {
        font-size: 15px;
        margin-bottom: 12px;
        line-height: 2;
    }
    .pagination {
        margin-bottom: 40px;
        padding: 10px 0;
    }
}