:root {
    --shoppingColor: #ec6d74;
    --beautyHealthColor: #42bab4;
    --gourmetColor: #e5815d;
    --communityParkColor: #6db27f;
    --cityFunctionsColor: #a18a1e;
}

.page_lead {
    text-align: center;
    font-size: clamp(18px,2vw,24px);
}

.page_nav {
    max-width: 1054px;
    width: 90%;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
}

.page_nav li {
    width: calc(95%/5);
}

.page_nav li a {
    display: block;
    text-align: center;
    font-size: clamp(13px,1.4vw,15px);
    color: #fff;
    padding: 15px 0;
    position: relative;
}

.page_nav li a::after {
    content: '';
    width: 10px;
    height: 7px;
    background-color: #fff;
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 8px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    animation: move-y 1s infinite ease-in-out;
}

@keyframes move-y {
    0% {
        top: 50%;
    }

    50% {
        top: 58%;
    }

    100% {
        top: 50%;
    }
}

.page_nav li.category01 a {
    background-color: var(--shoppingColor);
}

.page_nav li.category02 a {
    background-color: var(--beautyHealthColor);
}

.page_nav li.category03 a {
    background-color: var(--gourmetColor);
}

.page_nav li.category04 a {
    background-color: var(--communityParkColor);
}

.page_nav li.category05 a {
    background-color: var(--cityFunctionsColor);
}


.main_contents {
    display: flex;
    flex-direction: column;
    gap: 120px 0;
}

.sec_ttl_en {
    text-align: center;
    font-size: clamp(17px,2vw,25px);
}

.sec_ttl {
    text-align: center;
    font-size: clamp(25px,3vw,33px);
}

.sec_lead {
    text-align: center;
    font-size: clamp(18px, 2vw, 24px);
    margin-top: 15px;
}

.box_ttl {
    text-align: center;
    font-size: clamp(18px,2vw,24px);
}

.box_txt {
    font-size: clamp(13px,1.4vw,15px);
}

#shopping .sec_ttl_en,
#shopping .sec_ttl {
    color: var(--shoppingColor);
}

#beauty-health .sec_ttl_en,
#beauty-health .sec_ttl {
    color: var(--beautyHealthColor);
}

#gourmet .sec_ttl_en,
#gourmet .sec_ttl {
    color: var(--gourmetColor);
}

#community-park .sec_ttl_en,
#community-park .sec_ttl {
    color: var(--communityParkColor);
}

#city-functions .sec_ttl_en,
#city-functions .sec_ttl {
    color: var(--cityFunctionsColor);
}


/* SPのみ */
@media screen and (max-width:730px) {
    
    .page_nav {
        flex-wrap: wrap;
        gap: 10px;
        margin: 30px auto 50px;
    }

    .page_nav li {
        width: calc(50% - (10px/2));
    }

    .page_nav li a::after {
        width: 8px;
        height: 5px;
        right: 5px;
    }

    .sec_lead {
        padding-left: 0.5em;
    }

    .bottom_note {
        margin-top: 40px;
    }
}





#shopping .box01 {
    max-width: 1054px;
    width: 90%;
    margin: 40px auto ;
    display: flex;
    justify-content: space-between;
}

#shopping .box01-01 {
    width: 45%;
}

#shopping .box01-01 .lead {
    font-size: clamp(18px,2vw,25px);
    line-height: 1.7;
}

#shopping .box01-01 .image {
    width: 70%;
    margin: 10px 0 0 auto;
}

#shopping .box01-02 {
    width: 53%;
}


/* SPのみ */
@media screen and (max-width:730px) {
    #shopping .box01 {
        margin: 20px auto 30px;
        flex-direction: column;
    }

    #shopping .box01-01 {
        width: 100%;
    }

    #shopping .box01-01 .lead {
        text-align: center;
        padding-left: 0.5em;
    }

    #shopping .box01-02 {
        width: 111%;
        margin: -10% -5.5% 0;
    }
}

#shopping .box02 {
    background-color: #f3f9f6;
    padding: 50px 0 80px;
}

#shopping .box02 .lead {
    text-align: center;
    font-size: clamp(20px,2vw,24px);
}

#shopping .box02_inner {
    max-width: 1054px;
    width: 90%;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
}

#shopping .box02-01 {
    width: 48%;
}

#shopping .box02-01 .box_txt {
    margin: 10px 0;
}

#shopping .box02-01 .image .note {
    text-align: right;
    margin-top: 3px;
}

#shopping .box02-01 .icon {
    margin-top: 10px;
}

#shopping .box02-02 {
    width: 47%;
}

#shopping .box02-02 .btn_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#shopping .box02-02 .btn_wrap li {
    width: calc(95%/3);
}

#shopping .box02-02 .btn_wrap li a {
    display: block;
    background-color: #7f7f80;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-size: clamp(15px,1.6vw,18px);
}

#shopping .box02-02 .btn_wrap li.active a {
    pointer-events: none;
    background-color: var(--shoppingColor);
}

#shopping .box02-02 .image {
    width: 90%;
    margin: 0 auto;
    display: none;
}

#shopping .box02-02 .image.active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* SPのみ */
@media screen and (max-width:730px) {

    #shopping .box02 {
        padding: 30px 0;
    }

    #shopping .box02 .lead {
        padding-left: 0.5em;
    }

    #shopping .box02_inner {
        margin-top: 30px;
        flex-direction: column;
        gap: 30px 0;
    }
    
    #shopping .box02-01 {
        width: 100%;
    }
    
    #shopping .box02-02 {
        width: 100%;
    }
}


#shopping .box03 {
    max-width: 1054px;
    width: 90%;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 40px;
}

#shopping .box03-01 {
    width: 48%;
}

#shopping .box03-01 .box_txt {
    margin: 10px 0;
}

#shopping .box03-01 .image .note {
    text-align: right;
    margin-top: 3px;
}

#shopping .box03-02 {
    width: 42%;
    margin: 0 auto;
}

/* SPのみ */
@media screen and (max-width:730px) {

    #shopping .box03 {
        flex-direction: column;
        gap: 20px 0;
        margin-top: 40px;
    }

    #shopping .box03-01 {
        width: 100%;
    }

    #shopping .box03-02 {
        width: 100%;
        padding-left: 5%;
    }
}



#shopping .box04 {
    max-width: 1054px;
    width: 90%;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 40px;
}

#shopping .box04-01 {
    width: 48%;
}

#shopping .box04-01 .box_txt {
    margin: 10px 0;
}

#shopping .box04-01 .image .note {
    text-align: right;
    margin-top: 3px;
}

#shopping .box04-02 {
    width: 42%;
    margin: 0 auto;
}


/* SPのみ */
@media screen and (max-width:730px) {

    #shopping .box04 {
        flex-direction: column;
        gap: 20px 0;
        margin-top: 40px;
    }

    #shopping .box04-01 {
        width: 100%;
    }

    #shopping .box04-02 {
        width: 90%;
    }
}

#shopping .box05 {
    margin-top: 80px;
}

#shopping .box05 .lead {
    text-align: center;
    font-size: clamp(20px,2vw,24px);
}

#shopping .box05 .box_ttl {
    text-align: justify;
    font-size: clamp(15px,1.6vw,18px);
    margin-top: 2px;
}

#shopping .box05 .box_ttl .foot {
    font-size: clamp(12px,1.3vw,14px);
}

#shopping .box05_inner {
    max-width: 1054px;
    width: 90%;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4%;
}

#shopping .box05-02 {
    grid-column: 2;
    grid-row: 1/3;
}

#shopping .box05-02 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

#shopping .box05-02 ul li:nth-child(2) .icon {
    position: absolute;
    width: 55%;
    top: -14%;
    right: -5%;
}

#shopping .box05-02 .box_ttl {
    font-size: clamp(14px,1.5vw,16px);
}

#shopping .box05-02 .box_ttl .foot {
    display: block;
    font-size: clamp(11px,1.2vw,13px);
}

#shopping .box05-03 {
    max-width: 455px;
    margin-top: 40px;
}

/* SPのみ */
@media screen and (max-width:730px) {
    #shopping .box05 .lead {
        padding-left: 0.5em;
    }

    #shopping .box05_inner {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    #shopping .box05-02 {
        margin-top: 20px;
    }

    #shopping .box05-02 ul {
        gap: 20px 15px;
    }
}



#beauty-health {
    overflow: hidden;
}

#beauty-health .bg {
    background-color: #dcf0fb;
    padding: 50px 0;
    margin-top: 30px;
}

#beauty-health .bg .img01 {
    position: absolute;
    max-width: 350px;
    width: 40%;
    right: -18%;
    top: -11%;
}

#beauty-health .bg .inner {
    position: relative;
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

#beauty-health .bg .box_ttl {
    margin-top: 5px;
    text-align: justify;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.3;
}

#beauty-health .bg .box_ttl .foot {
    font-size: clamp(11px, 1.2vw, 13px);
}


#beauty-health .box01 {
    display: flex;
    justify-content: space-between;
}

#beauty-health .box01-01 {
    width: 48%;
}

#beauty-health .box01-02 {
    width: 48%;
}

#beauty-health .box01-02 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#beauty-health .box01-02 .image {
    width: 48%;
}

#beauty-health .box01-02 .box_ttl {
    width: 50%;
}


#beauty-health .box02 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px 0;
    margin: 80px 0 0;
}

#beauty-health .box02 .lead {
    width: 100%;
    text-align: center;
    font-size: clamp(18px,2vw,24px);
    margin-bottom: -20px;
}

#beauty-health .box02-01 {
    width: 48%;
}

#beauty-health .box02-02 {
    width: 48%;
}

#beauty-health .box02-03 {
    width: 48%;
}

#beauty-health .box02-03 ul {
    display: flex;
    justify-content: space-between;
}

#beauty-health .box02-03 ul li {
    width: 48%;
}

#beauty-health .box02-03 .box_ttl .foot {
    display: block;
}

#beauty-health .box02-04 {
    width: 48%;
}

#beauty-health .box02-04 .image {
    max-width: 455px;
}


/* SPのみ */
@media screen and (max-width:730px) {

    #beauty-health .bg {
        margin-top: 40px;
    }

    #beauty-health .bg .img01 {
        position: static;
        max-width: none;
        width: 90%;
        margin: -70px auto 0;
    }

    #beauty-health .box01 {
        flex-direction: column;
        gap: 20px 0;
        margin-top: 20px;
    }

    #beauty-health .box01-01,
    #beauty-health .box01-02 {
        width: 100%;
    }

    #beauty-health .box02 {
        margin-top: 50px;
        gap: 20px 0;
    }

    #beauty-health .box02 .box_ttl .foot {
        display: block;
    }

    #beauty-health .box02 .lead {
        padding-left: 0.5em;
        margin: 0;
    }

    #beauty-health .box02-01,
    #beauty-health .box02-02,
    #beauty-health .box02-03 {
        width: 100%;
    }

    #beauty-health .box02-04 {
        width: 100%;
        margin-top: 30px;
    }
}



#gourmet {
    overflow: hidden;
}

#gourmet .bg .box_ttl {
    margin-top: 5px;
    text-align: justify;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.3;
}

#gourmet .bg .box_ttl .foot {
    font-size: clamp(11px, 1.2vw, 13px);
}

#gourmet .bg {
    background-color: #edebf5;
    padding: 50px 0;
    margin-top: 30px;
}

#gourmet .bg .lead {
    color: #83742a;
    font-size: clamp(18px,2vw,24px);
    text-align: center;
    margin-bottom: 20px;
}

#gourmet .bg .img01 {
    position: absolute;
    max-width: 350px;
    width: 40%;
    right: -18%;
    top: -11%;
}

#gourmet .bg .inner {
    position: relative;
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

#gourmet .box01 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#gourmet .box01 .lead {
    width: 100%;
}

#gourmet .box01-01 {
    width: 48%;
}

#gourmet .box01-02 {
    width: 48%;
}

#gourmet .box01-02 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

#gourmet .box01-02 .box_ttl .foot {
    display: block;
}

#gourmet .box01-02 ul li:nth-child(3) {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 25px;
}

#gourmet .box01-02 ul li:nth-child(3) .balloon {
    grid-column: 2;
    grid-row: 1/3;
    margin-top: -12%;
}



#gourmet .box02 {
    margin-top: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 4%;
}

#gourmet .box02 .lead {
    grid-column: 1/3;
    margin-bottom: -30px;
}

#gourmet .box02-02 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

#gourmet .box02-03 {
    grid-column: 1;
    grid-row: 3/5;
}

#gourmet .box02-04 {
    display: flex;
    justify-content: space-between;
}

#gourmet .box02-04 .image {
    width: 48%;
}

#gourmet .box02-04 .box_ttl {
    width: 48%;
    align-self: flex-end;
}

#gourmet .box02-05 .image {
    max-width: 455px;
}



/* SPのみ */
@media screen and (max-width:730px) {

    #gourmet {
        margin-top: -50px;
    }

    #gourmet .bg {
        margin-top: 60px;
    }

    #gourmet .bg .img01 {
        position: static;
        max-width: none;
        width: 90%;
        margin: -90px auto 0;
    }

    #gourmet .box01 {
        margin-top: 20px;
    }

    #gourmet .box01-01 {
        width: 100%;
    }
    #gourmet .box01-02 {
        width: 100%;
        margin-top: 25px;
    }

    #gourmet .box01-02 ul {
        gap: 25px 15px;
    }

    #gourmet .box01-02 ul li:nth-child(3) .balloon {
        width: 110%;
        margin-left: -5%;
    }

    #gourmet .box02 {
        display: flex;
        flex-direction: column;
        margin-top: 50px;
        gap: 25px 15px;
    }

    #gourmet .box02 .lead {
        margin-bottom: -5px;
    }

    #gourmet .box02-02 ul {
        gap: 25px 15px;
    }

    #gourmet .box02-03 {
        margin-top: 15px;
    }

    #gourmet .box02-05 {
        margin-top: 30px;
    }
}




#community-park {
    overflow: hidden;
}

#community-park .bg {
    background-color: #e8f3e2;
    padding: 50px 0 60px;
    margin-top: 30px;
}

#community-park .bg .lead {
    color: #83742a;
    font-size: clamp(18px, 2vw, 24px);
    text-align: center;
    margin-bottom: 20px;
}

#community-park .bg .txt {
    text-align: center;
    font-size: clamp(13px,1.5vw,16px);
    line-height: 1.8;
}

#community-park .bg .img01 {
    position: absolute;
    max-width: 350px;
    width: 40%;
    right: -18%;
    top: -8%;
}

#community-park .bg_inner {
    display: flex;
    flex-direction: column;
    gap: 50px 0;
    position: relative;
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

#community-park .white_bg .box_ttl {
    color: #83742a;
    font-size: clamp(18px, 2vw, 24px);
    text-align: center;
    margin-bottom: 20px;
}

#community-park .white_bg {
    padding: 30px 0;
}

#community-park .white_bg_inner {
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

#community-park .box01 {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

#community-park .box01-01 {
    width: 49%;
}

#community-park .box01-02 {
    width: 48%;
}

#community-park .box01-02 .note {
    text-align: right;
    margin-top: 3px;
}

#community-park .box02 {
    border-top: 1px solid #cac3a3;
    margin-top: 60px;
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 4%;
}


#community-park .box02-01 {
    grid-column: 1;
    grid-row: 1;
    width: 80%;
    margin: -80px 0 0 10px;
}

#community-park .box02-02 {
    grid-column: 1/3;
    grid-row: 1;
    width: 55%;
    margin: 0 0 0 auto;
}

#community-park .box02-02 .lead {
    text-align: justify;
    margin-bottom: 0;
    font-size: clamp(17px, 1.8vw, 24px);
}

#community-park .box02-04 .box_lead {
    font-size: clamp(16px,1.7vw,19px);
}

#community-park .box02-04 .box_lead .large {
    font-size: clamp(18px,2vw,22px);
}

#community-park .box02-04 .box_txt {
    margin-top: 10px;
}

#community-park .box03 {
    margin-top: -8%;
}


#community-park .box04 {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2%;
    padding: 30px 0;
    border-top: 2px solid #cac3a3;
    border-bottom: 2px solid #cac3a3;
}

#community-park .box04-01 h3 {
    width: 90%;
    margin: -50px auto 20px;
    padding-right: 20%;
}

#community-park .box04-02 {
    grid-column: 2;
    grid-row: 1/4;
}

#community-park .box04-02 .note {
    text-align: right;
    margin-top: -1%;
}


#community-park .box05 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 2%;
}

#community-park .box05 .lead {
    width: 100%;
}

#community-park .box05 .box_ttl {
    margin: 5px 0 0;
    text-align: justify;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.3;
}

#community-park .box05 .box_ttl .foot {
    font-size: clamp(11px, 1.2vw, 13px);
}

#community-park .box05-01 {
    max-width: 200px;
}

#community-park .box05-02 {
    max-width: 285px;
}



/* SPのみ */
@media screen and (max-width:730px) {

    #community-park {
        margin-top: -50px;
    }

    #community-park .bg {
        margin-top: 60px;
        padding-bottom: 50px;
    }

    #community-park .bg .img01 {
        position: static;
        max-width: none;
        width: 90%;
        margin: -90px auto -30px;
    }

    #community-park .bg .txt {
        text-align: justify;
    }

    #community-park .bg_inner {
        gap: 40px 0;
    }

    #community-park .white_bg {
        padding: 20px 0;
    }

    #community-park .white_bg_inner {
        width: calc(100% - 40px);
    }

    #community-park .box01 {
        flex-direction: column;
        gap: 20px 0;
        margin-top: 20px;
    }

    #community-park .box01-01,
    #community-park .box01-02 {
        width: 100%;
    }

    #community-park .box02 {
        display: flex;
        flex-direction: column;
    }

    #community-park .box02-01 {
        width: 90%;
        margin-left: -5px;
    }

    #community-park .box02-02 {
        width: 100%;
        margin: -10px 0;
    }

    #community-park .box02-02 .lead {
        text-align: center;
        margin: 0 -5.5%;
        padding-left: 0.5em;
    }

    #community-park .box02-04 {
        margin-top: -45px;
    }

    #community-park .box03 {
        margin-top: -4%;
    }

    #community-park .box04 {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        margin-top: 0;
    }

    #community-park .box04-01 h3 {
        width: 100%;
        margin-top: -55px;
    }

    #community-park .box04-02 {
        width: 105%;
        margin: -5px -5.5% 18px;
    }

    #community-park .box05 {
        justify-content: space-between;
    }
    
    #community-park .box05-01 {
        width: 39%;
    }

    #community-park .box05-02 {
        width: 56%;
    }
}





#city-functions {
    padding-top: 1%;
    overflow: hidden;
}

#city-functions .bg {
    background-color: #eeeae5;
    padding: 50px 0 60px;
    margin-top: 30px;
}

#city-functions .bg .lead {
    color: #83742a;
    font-size: clamp(18px, 2vw, 24px);
    text-align: center;
    margin-bottom: 20px;
}

#city-functions .bg .txt {
    text-align: center;
    font-size: clamp(13px, 1.5vw, 16px);
    line-height: 1.8;
}

#city-functions .bg .img01 {
    position: absolute;
    max-width: 350px;
    width: 40%;
    right: -18%;
    top: -22%;
}

#city-functions .bg_inner {
    position: relative;
    max-width: 1054px;
    width: 90%;
    margin: 0 auto;
}

#city-functions .box_ttl {
    margin-top: 5px;
    text-align: justify;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.3;
}

#city-functions .foot {
    font-size: clamp(11px, 1.2vw, 13px);
}

#city-functions .box01 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3%;
}

#city-functions .box01 .lead {
    grid-column: 1/3;
}

#city-functions .box01-01 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-self: flex-start;
}

#city-functions .box01-01 .image {
    width: 45%;
    background-image: url(../images/location/city-functions_img02.jpg);
    background-size: auto 100%;
    background-position: 5%;
}

#city-functions .box01-01 .txt_wrap {
    width: 55%;
    background-color: #fff;
    padding: 15px;
}

#city-functions .box01-01 .txt_wrap .box_ttl {
    text-align: justify;
    color: #877610;
    font-size: clamp(17px,1.8vw,20px);
    margin: 3px 0 10px;
}

#city-functions .box01-01 .txt_wrap ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: clamp(12px,1.3vw,14px);
}

#city-functions .box01-01 .note {
    margin-top: 10px;
}

#city-functions .box01-02 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

#city-functions .box01-02 .box_ttl {
    margin-top: 5px;
    text-align: justify;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.3;
}

#city-functions .box01-02 .foot {
    font-size: clamp(11px, 1.2vw, 13px);
}

#city-functions .box01-02 ul li:nth-child(3) {
    grid-column: 1/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 25px;
}

#city-functions .box01-02 ul li:nth-child(3) .img02 {
    grid-column: 2;
    grid-row: 1/4;
}


#city-functions .box02 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 70px;
}

#city-functions .box02 .lead {
    width: 100%;
}

#city-functions .box02-01 {
    width: 48%;
}

#city-functions .box02-02 {
    width: 48%;
}

#city-functions .box02-02 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* SPのみ */
@media screen and (max-width:730px) {

    #city-functions {
        margin-top: -50px;
    }

    #city-functions .bg {
        margin-top: 60px;
        padding-bottom: 50px;
    }

    #city-functions .bg .img01 {
        position: static;
        max-width: none;
        width: 90%;
        margin: -90px auto 20px;
    }

    #city-functions .bg .txt {
        text-align: justify;
    }

    #city-functions .box01 {
        display: flex;
        flex-direction: column;
    }

    #city-functions .box01 .lead {
        margin: 0 -5.5% 20px;
    }

    #city-functions .box01-02 {
        margin-top: 25px;
    }

    #city-functions .box01-02 ul {
        gap: 25px 15px;
    }

    #city-functions .box02 {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
    }

    #city-functions .box02-01,
    #city-functions .box02-02 {
        width: 100%;
    }

    #city-functions .box02-02 ul {
        gap: 15px;
        margin-top: 25px;
    }
}


#lifeInformation .sec_ttl {
    color: #a0916e;
    margin-bottom: 10px;
}

#lifeInformation .sec_inner {
    max-width: 1200px;
    width: 90%;
    margin: 30px auto 0;
}

#lifeInformation .lifeInfo_btn_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

#lifeInformation .lifeInfo_btn_wrap li {
    width: calc(95%/6);
}

#lifeInformation .lifeInfo_btn_wrap li a {
    display: block;
    padding: 5px 0;
    text-align: center;
    color: #a0916e;
    border: 1px solid #998765;
    position: relative;
    font-size: clamp(12px,1.3vw,14px);
}

#lifeInformation .lifeInfo_btn_wrap li a:hover {
    color: #fff;
}

#lifeInformation .lifeInfo_btn_wrap li a::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}


#lifeInformation .lifeInfo_btn_wrap li.lifeInfo_btn01 a::after {
    background-color: #ec6d74;
}

#lifeInformation .lifeInfo_btn_wrap li.lifeInfo_btn02 a::after {
    background-color: #e5815d;
}

#lifeInformation .lifeInfo_btn_wrap li.lifeInfo_btn03 a::after {
    background-color: #56859e;
}

#lifeInformation .lifeInfo_btn_wrap li.lifeInfo_btn04 a::after {
    background-color: #6db27f;
}

#lifeInformation .lifeInfo_btn_wrap li.lifeInfo_btn05 a::after {
    background-color: #3fa1c6;
}

#lifeInformation .lifeInfo_btn_wrap li.lifeInfo_btn06 a::after {
    background-color: #a18a1e;
}

#lifeInformation .lifeInfo_btn_wrap li a:hover::after {
    transform: scale(1, 1);
}

#lifeInformation .lifeInfo_btn_wrap li a span {
    position: relative;
    z-index: 1;
}

#lifeInformation .lifeInfo_btn_wrap li a .ja {
    display: none;
}

#lifeInformation .lifeInfo_btn_wrap li a:hover .en {
    display: none;
}

#lifeInformation .lifeInfo_btn_wrap li a:hover .ja {
    display: block;
}


#lifeInformation .lifeInfo_btn_wrap li.active a {
    color: #fff;
}

#lifeInformation .lifeInfo_btn_wrap li.active a::after {
    transform: scale(1, 1);
}

#lifeInformation .lifeInfo_btn_wrap li.active a .ja {
    display: block;
}

#lifeInformation .lifeInfo_btn_wrap li.active a .en {
    display: none;
}


#lifeInformation .lifeinfo_contents.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#lifeInformation .lifeinfo_contents {
    display: none;
}

#lifeInformation .lifeinfo_contents_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#lifeInformation .lifeinfo_contents .map {
    width: 65%;
    outline: 1px solid #a0916e;
    outline-offset: -1px;
}

#lifeInformation .lifeinfo_contents .scroll_wrap {
    width: 35%;
    overflow: hidden;
    counter-reset: number 0;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .inner {
    overflow-y: scroll;
    border: 1px solid #a0916e;
    border-left: none;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .inner::-webkit-scrollbar {
    width: 15px;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .inner::-webkit-scrollbar-track {
    background-color: #fff;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .inner::-webkit-scrollbar-thumb {
    background-color: #a0916e;
}

#lifeInformation .lifeinfo_contents .list_lead {
    padding: 10px 15px;
    border-bottom: 1px solid #a0916e;
    border-right: 1px solid #a0916e;
    color: #a18a1e;
    font-size: clamp(14px, 1.5vw, 17px);
}

#lifeInformation .lifeinfo_contents .list_lead02  {
    border-top: 1px solid #a0916e;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 10px;
    border-right: 1px solid #a0916e;
    border-bottom: 1px solid #a0916e;
    font-size: clamp(12px, 1.5vw, 15px);
}

#lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li:last-child {
    border-bottom: none;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li .foot {
    font-size: clamp(10px, 1.4vw, 14px);
    margin-left: auto;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li .small {
    display: block;
    font-size: clamp(10px, 1.2vw, 12px);
}

#lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li::before {
    content: '';
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    font-size: clamp(11px, 1.4vw, 14px);
    letter-spacing: -0.01em;
    padding: 0 0 2px 0;
    border: 2px solid #998765;
}

#lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li.in::before {
    counter-increment: number 1;
    content: counter(number);
}


#lifeInformation .lifeinfo_contents#lifeInfo01 .scroll_wrap .list_wrap li::before {
    background-color: #ec6d74;
}

#lifeInformation .lifeinfo_contents#lifeInfo02 .scroll_wrap .list_wrap li::before {
    background-color: #e5815d;
}

#lifeInformation .lifeinfo_contents#lifeInfo03 .scroll_wrap .list_wrap li::before {
    background-color: #56859e;
}

#lifeInformation .lifeinfo_contents#lifeInfo04 .scroll_wrap .list_wrap li::before {
    background-color: #6db27f;
}

#lifeInformation .lifeinfo_contents#lifeInfo05 .scroll_wrap .list_wrap li::before {
    background-color: #3fa1c6;
}

#lifeInformation .lifeinfo_contents#lifeInfo06 .scroll_wrap .list_wrap li::before {
    background-color: #a18a1e;
}

#lifeInformation .lifeinfo_contents#lifeInfo06 .scroll_wrap .list_wrap li {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

#lifeInformation .lifeinfo_contents#lifeInfo06 .scroll_wrap .list_wrap li .small {
    grid-column: 1/4;
}






/* SP調整 */
@media screen and (max-width:730px) {

    #lifeInformation {
        margin-top: -50px;
    }
    
    #lifeInformation .sec_inner {
        width: 100%;
        margin-top: 20px;
    }

    #lifeInformation .lifeInfo_btn_wrap {
        width: 90%;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 10px;
    }

    #lifeInformation .lifeInfo_btn_wrap li {
        width: calc(100%/3 - 10px*2/3);
    }

    #lifeInformation .lifeInfo_btn_wrap li a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 4em;
    }

    #lifeInformation .lifeinfo_contents_inner {
        flex-direction: column;
        margin-top: 20px;
    }

    #lifeInformation .lifeinfo_contents .map {
        width: 100%;
        overflow-y: scroll;
        border: none;
    }

    #lifeInformation .lifeinfo_contents .map img {
        max-width: initial;
        width: auto;
        height: 400px;
    }

    #lifeInformation .lifeinfo_contents .slide_icon {
        width: 90%;
        margin: 5px auto 18px;
    }

    #lifeInformation .lifeinfo_contents .scroll_wrap {
        position: relative;
        width: 100%;
    }

    #lifeInformation .lifeinfo_contents .scroll_wrap .inner {
        border-left: none;
        border-right: none;
    }

    #lifeInformation .lifeinfo_contents .scroll_wrap .inner::-webkit-scrollbar {
        display: none;
    }

    #lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li {
        border-right: none;
    }

    #lifeInformation .lifeinfo_contents .scroll_wrap .list_wrap li::before {
        width: 20px;
        height: 20px;
        border-width: 1px;
    }
}