.area-description-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 16px;
    gap: 16px;
}

.area-details {
    display: flex;
    justify-content: space-between;
    /* エリア名が長くても写真との間隔を確保する */
    gap: 16px;
}

.area-details>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* エリア名側。長いエリア名は折り返して残り幅に収める */
.area-details>div:not(.area-img) {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* エリア名 */
h1.area-name {
    color: rgb(17, 17, 17);
    font-size: 38px;
    font-weight: bold;
    word-break: break-word;
}

/* 店舗数・在籍数 */
.currently-published-counts {
    font-size: medium;
    font-weight: 500;
    color: #888;
}

.currently-published-counts .shop-counts,
.currently-published-counts .girl-counts
{
    color: var(--red);
}

/* エリア記事 */
.area-article-text.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: var(--full-height, none);
}

.area-article-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    /* JSが計測した高さ(--collapsed-height/--full-height)をmax-heightに反映し、
       その変化をtransitionでアニメーションさせる */
    max-height: var(--collapsed-height, none);
    transition: max-height .5s ease-in-out;
}

.area-article-before {
    /* 初期状態は非表示にする。JS（area_description.js）が高さを計測し、
       2行を超える記事のときだけ表示に切り替える。
       display:block をデフォルトにしていると、JS実行前（測定完了前）の
       一瞬だけ全記事でボタンが見えてしまう（リロード時のチラつきの原因） */
    display: none;
    color: #0f65ef;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
    margin: 10px auto 0;
    width:70px;
}

.area-article-after {
    display: none;
    color: #0f65ef;
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
    margin: 10px auto 0;
    width: 60px;
}

.area-img {
    width: 25%;
    display: flex;
    align-self: flex-start;
    /* エリア名に押されて画像が縮まないようにする */
    flex-shrink: 0;
}

.area-img img {
    border-radius: 10px;
}

/* 幅が767以下の時 */
@media not all and (min-width: 768px) {
    .area-description-container {
        margin: 16px;
    }
    h1.area-name {
        font-size: 18px;
        word-break: break-word;
    }
    /* エリア名:画像 = 6:4 */
    .area-img {
        width: 40%;
    }
}