.serch_6item{
    background-image: url(../images/6item_back.png);
    background-size: cover;
    background-position: center;
    padding-bottom: 50px;
}

.serch_system{
    padding: 50px;
    overflow-x: hidden;
}

.search-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group.dynamic-sub-area-group {
    border-radius: 8px;
}

.form-group label {
    margin-bottom: 10px;
    font-weight: bold;
    color: #B03B3B;
    font-size: 30px;
    margin-top: 20px;
}

/* 左右に縦線を2本（外側＋内側）見せる。::before と ::after に box-shadow を使い
   それぞれの側にもう1本の細い線を作る方式。HTML は変更不要。 */
/* ラベルの左右に水平の二重線（外側＋内側）を表示する */
.form-group {
    position: relative; /* 疑似要素の基準 */
    /* ラベルごとにオーバーライド可能なカスタムプロパティ */
    --label-line-length: 120px; /* 横線の長さ（左右に伸ばす量） */
    --label-line-gap: 8px; /* ラベルとの間隔 */
    --label-line-offset: 6px; /* 内側に見せる線の垂直オフセット（box-shadow） */
}

.form-group label {
    position: relative; /* ラベル自体を基準にして線を配置 */
    display: inline-block; /* 疑似要素をラベルの左右に伸ばすため */
    padding: 0 20px;
    z-index: 2;
}

/* ラベルの左右に伸びる水平線（外側）。box-shadow を使って内側の細い線を作る */
.form-group label::before,
.form-group label::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px; /* 線の太さ */
    width: var(--label-line-length); /* ラベルの左右に伸ばす長さ（個別指定可） */
    background: #B03B3B;
    border-radius: 1px;
}

.form-group label::before {
    /* 左側へ伸ばす */
    right: 100%;
    margin-right: var(--label-line-gap); /* ラベルとの間隔を内側に寄せる */
    box-shadow: 0 var(--label-line-offset) 0 #B03B3B; /* 下側にもう1本（同色） */
}

.form-group label::after {
    /* 右側へ伸ばす */
    left: 100%;
    margin-left: var(--label-line-gap); /* ラベルとの間隔を内側に寄せる */
    box-shadow: 0 var(--label-line-offset) 0 #B03B3B; /* 下側にもう1本（同色） */
}

/* 各ラベルごとの値 */
.label--area { --label-line-length: 50%; }
.label--time { --label-line-length: 30%; }
.label--budget { --label-line-length: 140%; }
.label--people { --label-line-length: 60%; }
.label--space { --label-line-length: 40%; }
.label--genre { --label-line-length: 20%; }
.label--subarea { --label-line-length: 120%; }


.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 15px;
}

.filter-button {
    letter-spacing: 0.1em;
    padding: 7px 20px;
    border: 1px solid #B03B3B;
    border-radius: 999px;
    background-color: #fff;
    color: #B03B3B;
    text-decoration: none;
    transition: all 0.3s;
}

.filter-button.active {
    background-color: #B03B3B;
    color: #fff;
    border-color: #B03B3B;
}

.submit-button {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 20px;
}

.submit-button button {
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    background-color: #D3B083;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: "Shippori Mincho", serif;
}

.submit-button button:hover {
    background-color: #b89a73;
}
.yosan_btn{
    gap: 10px;
}

.btn_sm{
    padding: 5px 13px;
}

/* 検索リセット画像ボタンをフォーム内で中央揃えにする */
.form-btn{
    text-align: center;
    margin-top: 50px;
    display: block;
}
.form-btn a{
    display: block; /* 縦に並べる */
    margin: 0 auto 30px; /* 中央揃え、下に少し間隔 */
    max-width: 400px; /* 元の画像幅を尊重 */
}
.form-btn a:last-child{ margin-bottom: 0; }
.form-btn img{
    display: block;
    width: 100%;
    height: auto;
}

.icons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.icon {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    background-color: #BB9C75; /* Changed */
    border: 1px solid #BB9C75; /* Changed to match background */
    border-radius: 999px; /* Changed */
    font-size: 14px; /* Changed */
    color: #fff; /* Changed */
    white-space: nowrap;
}

.icon i {
    margin-right: 5px;
    color: #fff; /* Changed */
}