@charset "utf-8";

#form { border: 1px solid #ddd; margin-top: 10px;}
#form .conditions { display: flex; margin-top: 20px; font-size: 16px;}
#form .conditions::before { content: attr(before); display: block; padding: 0 5px; font-weight: bold; width: 80px; text-align: right;}
#form .conditions div a,
#form .conditions div span { margin-left: 5px; padding: 5px; border-radius: 3px; color: #555;}
#form .conditions div span { background-color: var(--color-primary-7); color: #fff;}
#form .conditions div a:hover { background-color: var(--color-primary-5); color: #fff;}
#form .list_sort { border-top: 1px dashed #ddd; padding: 10px; margin-top: 15px;}
#form .list_sort a { color: #555; padding: 0 10px; border-right: 1px dashed #ccc;}
#form .list_sort a:hover { color: var(--color-warning-7);}
#form .list_sort a.active { color: var(--color-primary-7); cursor: default;}
#form .list_sort strong { padding-left: 10px; font-weight: bold;}
#form input,
#form button { border: 1px solid #ccc; border-radius: 3px; line-height: 24px; font-size: 14px; padding:0 10px;}
#form button { margin-left: 10px; background-color: #ddd;}
#form .list_sort span { padding-left: 10px; cursor: pointer;}
#form .list_sort span:hover { color: var(--color-primary-7);}
#form .list_sort span::before { font-family: 'icofont'; content: "\eab5"; border: 1px solid #ccc; margin-right: 3px; border-radius: 2px; vertical-align: middle; font-size: 18px;}
#form .list_sort span.active::before { content: "\e960"; color: var(--color-primary-7); border: 1px solid var(--color-primary-7);}

.line_list { display: flex; margin-top: 10px;}
.line_right { width: 270px; margin-left: 10px;}
.line_left { flex: 1;}
.line_info { border: 1px solid #ddd; margin-bottom: 10px; display: flex;}
.line_img { display: block; padding: 10px; width: 180px;}
.line_img img { display: block; width: 100%;}
.line_item { flex: 1; padding: 10px;}
.line_title { display: block; font-weight: bold; font-size: 18px; color: #000; border-bottom: 1px dashed #ddd; padding-bottom: 10px;}
.line_title:hover { color: var(--color-warning-7);}
.line_detail { display: flex; margin-top: 5px;}
.line_detail div { flex: 1;}
.line_detail dfn { font-size: 22px; color: #f60;}
.line_detail div p { color: var(--color-text-default); font-size: 14px; line-height: 1.8;}
.line_detail div p span { margin-right: 10px; color: var(--color-success-7);}
.line_detail div p i { padding-left: 20px; color: var(--color-warning-7);}
.line_monthly { border: 1px solid #ddd; padding: 10px;}
.line_monthly h2 { font-size: 18px; font-weight: bold; padding-bottom: 10px;}
.line_monthly a { display: block; border-top: 1px dashed #ddd; padding-top: 10px;}
.line_monthly a div { padding: 10px;}
.line_monthly a div h3 { font-size: 16px; color: var(--color-text-default);}
.line_monthly a div h4 { font-size: 14px; color: #999;}
.line_monthly a:hover { background-color: var(--color-primary-1);}
.line_monthly a img { display: block; width: 100%;}
.line_monthly a p { display: flex; padding: 10px 0; font-size: 14px;}
.line_monthly a p span { flex: 1; color: #999;}
.line_monthly a p dfn { color: #f60; font-size: 16px;}