/* メール */
.list1, .list2, .list3, .list4, .list5 {
    float: left;
    font-size: 15px;
}
.list1 {
    width: 38%;
    height: 60px;
    color: #f82055;
    vertical-align: top;
}
/* メール */
.list2, .list3 {
    width: 60%;
    height: 30px;
}
/* メール */
.list4 {
    width: 100%;
    height: 30px;
}
.search-btn-container {
    float: left;
    width: 100%;
    text-align: right;
    height: 30px;
    font-size: 15px;
}
.select-area-btn, .search-do-btn {
    font-size: 110%;
    position: relative;
    z-index: 2;
    background-color: #333;
    border: 2px solid #333;
    color: #fff;
    line-height: 32px;
    width: 100%;
    box-shadow: 5px 5px 4px #AAAAAA;
    &:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
    }
}
.search-do-btn {
    width: 95%;
    margin-top: 20px;
}
.select-area-btn {
    width: 40%;
    margin: -10px 0px 0px 7px;
}
.mail_list_item {
    font-size: 11px;
    background: #565656;
    border-radius: 2px;
    color: #eee;
    padding: 1px 2px 0 4px;
    margin: 1px 3px 0 0;
    display: inline-block;
}

.list_header {
    //display: block; /* リボン用追加2022/3/23 */
    display: flex;
    align-items: center;
    position: relative;  /* リボン用追加2022/3/23 */
    margin: 15px auto;  /* リボン用追加2022/3/23 */
    padding: 10px 0;  /* リボン用追加2022/3/23 */
    /* width: 100%;  /\* リボン用追加2022/3/23 *\/ */
    height: 30px;  /* リボン用追加2022/3/23 */
    font-size: 16px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: dimgray;
    padding: 0.2em 0.3em 0.1em 0.3em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    color: dimgray;
    background-repeat: no-repeat;
    background-position: left 60%;
    background-position-x: left;
    background-position-y: 60%;
    background-image: url("../images/h2.gif");
    padding-left: 26px;
}
.ribbon17-content {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 89px;
    height: 91px;
    overflow: hidden;
}

.ribbon17 {
    display: inline-block;
    position: absolute;
    padding: 7px 0;
    left: -23px;
    top: 22px;
    width: 160px;
    text-align: center;
    font-size: 18px;
    line-height: 16px;
    background: #ffa520;
    color: #fff;
    letter-spacing: 0.05em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    &:before, &:after {
	position: absolute;
	content: "";
	border-top: 4px solid #b2751b;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	bottom: -4px;
    }
    &:before { left: 14px; }
    &:after { right: 18px; }
}
.list_photo {
    width: 30%;
    vertical-align: top;
}
.list_desc {
    width: 70%;
    vertical-align: top;
}

.list_header_pickup {
    font-size: 14px;
    border: 1px solid dimgray;
    padding: 0.2em 0.3em 0.1em 0.3em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    color: dimgray;
}
.list_photo_pickup {
    width: 35%;
    vertical-align: top;
}
.list_desc_pickup {
    width: 65%;
    vertical-align: top;
}
#note {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding-top: 7px;
    text-align: center;
    background-color: lightpink;
    z-index: 99;
}
@media only screen and (max-width: 999px) {
    .list1, .list2, .list3, .list4, .list5 {
	font-size: 15px;
    }
    .list1 {
	height: 50px;
	width: 38%;
    }
    .list2, .list3 {
	height: 25px;
	width: 60%;
    }
    .list4, .list5 {
	height: 25px;
	width: 98%;
    }
}