/*===============================================================================
地域
================================================================================*/
.area-chiiki {
    margin: var(--g-28) auto 2.75rem;
}

.area__chiiki-text {
    padding-bottom: var(--g-28);
    font-size: var(--fz-16);
    font-weight: var(--fw-md);
}

.--area_4chiiki {
    font-weight: var(--fw-lg);
}

.--area_annotation {
    font-size: var(--fz-12);
}

/* レイアウト */
.area-chiiki__groups {
    --count: 2;
    --gap: var(--g-16);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--g-40) var(--gap);
}

.area-chiiki__group.--w-full {
    max-width: 100%;
}

/* 地域のコンテンツ部分 */
.area-chiiki__container {
    position: relative;
    max-width: 11.75rem;
    aspect-ratio: 1;
}

/* 地域名 */
.area-chiiki__title {
    padding-left: 1rem;
    font-size: var(--fz-20);
    font-weight: var(--fw-lg);
    color: var(--area-color);
}

.--kouchi {
    --area-color: #119BA7;
}

.--ehime {
    --area-color: #D6A315;
}

.--kagawa {
    --area-color: #D3451A;
}

.--tokushima {
    --area-color: #78CC25;
}

.--okayama {
    --area-color: #0698E6;
}

/* 画像とリスト */
.area-chiiki__flex {
    position: relative;
    font-size: var(--fz-12);
    font-weight: var(--fw-lg);
}

/* 画像 */
.area-chiiki__illust {
    max-width: 13.75rem;
    width: calc(100% - 6.75em);
}

/* リスト */
.area-chiiki__list {
    position: absolute;
    top: 0;
    left: calc(100% - 5.75em);
    min-width: max-content;
}

.area-chiiki__note {
    font-family: var(--ff-g);
    font-size: var(--fz-12);
}

@media (min-width: 600px) {

    .area-chiiki {
        max-width: 960px;
        margin-inline: auto;
        margin: var(--g-sec--md) auto;
    }

    .area__chiiki-text {
        padding-bottom: var(--g-sec--sm);
        font-size: var(--fz-20);
    }

    .--area_annotation {
        font-size: unset;
    }

    /* 地域 */
    .area-chiiki__group {
        flex-grow: 1;
        max-width: 380px;
        width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
    }

    .area-chiiki__group.--w-full {
        max-width: 100%;
    }

    /* 地域のコンテンツ部分 */
    .area-chiiki__container {
        position: relative;
        max-width: 380px;
        aspect-ratio: 1;
    }

    /* 丸背景 */
    .area-chiiki__container::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: "";
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--c-light);
        z-index: -1;
    }

    /* 地域名 */
    .area-chiiki__title {
        padding-left: 3.5rem;
        font-size: var(--fz-40);
    }

    /* 画像とリスト */
    .area-chiiki__flex {
        font-size: var(--fz-20);
    }

    /* 画像 */
    .area-chiiki__illust {
        width: calc(100% - 8em);
    }

    /* リスト */
    .area-chiiki__list {
        left: calc(100% - 7em);
    }
    
    .area-chiiki__note {
        text-align: right;
        font-size: var(--fz-20);
    }

}

/*===============================================================================
スピード
================================================================================*/
.area-speed {
    position: relative;
    margin-bottom: 2.75rem;
    padding: 2.75rem 0;
}

.area-speed::before {
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    content: "";
    width: 100vw;
    height: 100%;
    background: var(--c-act01);
    z-index: -1;
}

@media (min-width: 600px) {

    .area-speMediaText {
        --count: 1;
        --gap: var(--g-16);
        --media-width: 84%;
        --body-width: calc(200% - var(--media-width));
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    .area-speed {
        margin-bottom: var(--g-sec--md);
        padding: var(--g-sec--md) 0;
    }

    .area-speMediaText {
        --count: 2;
    }
}

.area-speMediaText__body {
    flex-grow: 1;
    width: calc((var(--body-width) - var(--gap) * (var(--count) - 1)) / var(--count));
}

@media (min-width: 600px) {
    .area-speMediaText__body {
        max-width: 612px;
    }
}

.area-speed__title {
    margin-bottom: var(--g-20);
    font-family: var(--ff-g);
    font-weight: var(--fw-xl);
    font-size: var(--fz-24);
    color: var(--c-main);
    transform: skew(-5deg);
}

.area-speed__list {
    font-size: var(--fz-18);
    font-weight: var(--fw-lg);
    padding-bottom: var(--g-sec--sm);
}

.area-speed__list>li:not(:last-of-type) {
    margin-bottom: var(--g-14);
}

.area-speMediaText__media {
    position: relative;
    left: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

@media (min-width: 600px) {

    .area-speed__title {
        margin-bottom: var(--g-20);
        font-size: var(--fz-32);
    }

    .area-speed__list {
        padding-left: var(--g-24);
        font-size: var(--fz-20);
        padding-bottom: unset;
    }

    .area-speMediaText__media {
        position: unset;
        left: unset;
        max-width: 438px;
        flex-grow: 1;
        width: calc((var(--media-width) - var(--gap) * (var(--count) - 1)) / var(--count));
    }

    .area-speed__list>li:not(:last-of-type) {
        margin-bottom: var(--g-12);
    }
}

/*===============================================================================
ポイント
================================================================================*/

.area-point__title {
    text-align: center;
    margin-bottom: var(--g-28);
    font-size: var(--fz-20);
    font-weight: var(--fw-lg);
    color: var(--c-main);
}

.area-poiMediaText {
    --gap: var(--g-14);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.area-poiMediaText:not(:last-of-type) {
    margin-bottom: var(--g-28);
}

.area-poiMediaText__media {
    flex-grow: 1;
    width: calc((var(--media-width) - var(--gap) * (var(--count) - 1)) / var(--count));
}

.area-poiMediaText__body {
    flex-grow: 1;
    width: calc((var(--body-width) - var(--gap) * (var(--count) - 1)) / var(--count));
}

.area-poiMediaText__title {
    margin-bottom: var(--g-16);
    padding: var(--g-12) var(--g-14);
    background: var(--c-main);
    font-size: var(--fz-20);
    font-weight: var(--fw-lg);
    color: var(--c-light);
}

@media (min-width: 600px) {

    .area-point__title {
        margin-bottom: var(--g-sec--sm);
        font-size: var(--fz-32);
    }

    .area-poiMediaText {
        --count: 1;
        --gap: var(--g-24);
        --media-width: 84%;
        --body-width: calc(200% - var(--media-width));
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    .area-poiMediaText:not(:last-of-type) {
        margin-bottom: var(--g-40);
    }

    .area__sp-br {
        display: none;
    }

    .area-poiMediaText {
        --count: 2;
    }

    .area-poiMediaText__title {
        margin-bottom: var(--g-16);
        padding: var(--g-8) var(--g-16);
    }
}