@charset "utf-8";

.mv{position: relative;}
.mv h2{
    position: absolute;
    top: 10%;
    text-align: center;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        width: 100%;
    color: var(--dark);
    font-size: min(9vw, 2.6rem);
    line-height: 1.4;
        text-shadow: 0px 0px 6px #fff,0px 0px 6px #fff,0px 0px 6px #fff,0px 0px 6px #fff,0px 0px 6px #fff;
}

.contents{
    padding: 6% 0 0;
}
.loc_movie_area{
    margin: 0 auto 40px;
    max-width: 420px;
}
.approach_map{
    padding: 3% 0 5%;
}
.approach_map_img_wrap{
    max-width: 760px;
    margin: auto;
}
.approach_map_hanrei{
    display: flex;
    align-items: center;
    padding-top: 16px;
    gap: 24px;
}
.approach_map_hanrei dt{
    font-size: 14px;
}
.approach_map_hanrei dd{
    display: flex;
    font-size: 12px;
    line-height: 1.3;
    flex-wrap: wrap;
    gap: 6px;
}
.approach_map_hanrei dd span{
    display: flex;
    position: relative;
}
.approach_map_hanrei dd span::before{
    content: '■';
    display: block;
}
.approach_map_hanrei dd span:nth-of-type(1):before{color: #ea5d1e;}
.approach_map_hanrei dd span:nth-of-type(2):before{color: #009449;}
.approach_map_hanrei dd span:nth-of-type(3):before{color: #488ec2;}
.approach_map_hanrei dd span:nth-of-type(4):before{color: #009d9c;}
.approach_map_hanrei dd span:nth-of-type(5):before{color: #6a1684;}
.approach_map_hanrei dd span:nth-of-type(6):before{color: #ea6e8f;}
.approach_map_hanrei dd span:nth-of-type(7):before{color: #a5ca6c;}


.copact_city .inner_1500{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contents_box{
    padding: 5% 0;
}
.contents_box.shops{
        margin-top: 41%;
}
.contents_box h2{
    text-align: center;
    font-size: 32px;
}
.margin_out{
        margin-top: -53%;
}
.contents_box.shops .map_img{
    text-align: center;
    max-width: 80%;
    margin: 24px auto 0;
}
.loc_content_area{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.loc_content_area .ttl{
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
    padding-top: 40px;
}
.loc_content_area .main_wrap{
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.loc_content_area .main_wrap .img{
    flex-basis: 56%;
}
.loc_content_area .main_wrap .txt{
    flex: 1;
    margin-top: 4%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.loc_content_area .main_wrap .txt .ttl{
    text-align: left;
    font-size: 64px;
    line-height: 1;
    padding-top: 0;
}
.loc_content_area .main_wrap .txt .spec{
    font-size: 12px;
}
.loc_content_area .main_wrap .txt .copy{
    font-size: 16px;
}
.shops .loc_shop_list{
    width: 56%;
}
.loc_shop_list ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 8px;
}
.loc_shop_list li{
    width: calc((100% - 24px) / 4);
    background: var(--light);
}
.loc_shop_list li .icon{
    padding: 4% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.shops .flex{
    display: flex;
    justify-content: space-between; 
}
.floor_map{
    max-width: 40%;
    background: var(--light);
    border: 2px solid var(--yellow);
    padding: 3%;
    margin-top: -6%;
}
.floor_map .tab__menu{
    max-width: unset;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin-bottom: 24px;
}
.floor_map .tab__menu li {
    position: relative;
    border: 1px solid var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    color: #999999;
    padding: 3% 8% 2%;
    cursor: pointer;
    flex: 1;
    border-bottom-left-radius: 12px;
}
.floor_map .tab__menu li.is-active {
    background: var(--yellow);
    color: var(--light);
}
.floor_map .tab__menu li.is-active span{
    border: none;
}

.contents_box.other{}
.contents_box.other .flex{
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: flex-end;
}
.contents_box.other .other_main_img{
    flex-basis: 47%;
    position: relative;
}
.contents_box.other .other_main_img::before{
    content: '';
    display: block;
    position: absolute;
    right: -16px; top: 0;
    background: url(../images/location/other_line.svg);
    background-size: 100%;
    width: 2.6%;
    height: 100%;
    background-repeat: no-repeat;
}
.contents_box.other .loc_shop_list{
    flex: 1;
}
.contents_box.other .ttl{
    display: flex;
    justify-content: center;
    padding-top: 16px;
    gap: 16px;
}
.contents_box.other .ttl .txt{
    flex: 1;
    font-size: 16px;
    text-align: left;
}
.contents_box.other .ttl .map{
    flex-basis: 30%;
    background: var(--light);
    padding: 3%;
}

.spot_contents_wrap{
    max-width: 1000px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.spot_contents_wrap h3{
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
}
.spot_contents_wrap .txt{
    text-align: center;
    font-size: 16px;
}
.spot_contents{
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 64px;
}
.spot_contents_box{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.spot_contents_box h3{
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
}
.spot_contents_box .flex{
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.spot_contents_box .flex .main_img{
    flex-basis: 38%;
}
.spot_contents_box .flex .nikke{
    flex: 1;
    background: var(--light);
    padding: 3% 2%;
}
.spot_contents_box .flex .nikke .flex{
    flex-direction: row-reverse;
}
.spot_contents_box .flex .nikke .flex .img{
    flex-basis: 52%;
}
.spot_contents_box .flex .nikke .flex .txt{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.spot_contents_box .flex .nikke .flex .txt .ttl{
    font-size: 24px;
    line-height: 1.5;
}
.spot_contents_box .flex .nikke .flex .txt .spec{
    font-size: 12px;
}
.spot_contents_box .flex .nikke .flex .txt .copy{
    font-size: 13px;
}
.spot_area h4{
    text-align: center;
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
  text-shadow: 2px 2px 0px var(--light); 
  position: relative;
  z-index: 1;
}
.spot_area dl.large{
    display: flex;
    align-items: center;
}
.spot_area dl.large br{display: none;}
.spot_area .main_img{
    margin-top: -3%;
    position: relative;
    z-index: 0;
}
.spot_area dl{
    padding-top: 8px;
}
.spot_area dl.none{opacity: 0;}
.spot_area dt{
    font-size: 18px;
    line-height: 1.5;
}
.spot_area dd{
    font-size: 13px;
    line-height: 1.3;
}
.spot_area ul{
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-top: 24px;
}
.spot_area li{
    flex: 1;
}
.box3 h3{
    text-align: left;
}
.box3 .spot_area ul{
    width: 50%;
    margin-top: 0;
}

.area_point{
    padding: 4% 3%;
}
.area_point h4{
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
}
.area_point .flex{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
}
.area_point .flex .area_point_map{
    flex-basis: 46%;
}
.area_point .flex .table_wrap{
    flex: 1;
}

.nikke_wrap .main_img .txt{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.nikke_wrap .main_img .txt .ttl{
    font-size: 20px;
    line-height: 1.5;
}
.nikke_wrap .main_img .txt .spec{
    font-size: 12px;
}
.nikke_wrap .main_img .txt .copy{
    font-size: 13px;
}



/* テーブル */
.redevelopment-table {
  width: 100%;
  max-width: 600px; /* 必要に応じて調整してください */
  border-collapse: collapse;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid var(--dark);
}

/* 全てのセル（見出し・データ共通）の枠線と余白 */
.redevelopment-table th,
.redevelopment-table td {
  border: 1px solid var(--dark);
  padding: 8px;
  text-align: left;
  vertical-align: middle;
  height: 28px; /* セルの最小高さを確保 */
}

/* 1行目の大見出し：オレンジ */
.redevelopment-table .main-title {
  background-color: #f3ca94;
  text-align: center;
  font-weight: 600;
}
.redevelopment-table .main-title span {
    font-size: 90%;
}

/* 2行目中央「誘導地区」の見出し：薄紫 */
.redevelopment-table .col-guided {
  background-color: #dca7c6;
  text-align: center;
  width: 35%; /* 列幅の割合 */
}

/* 2行目右「2項再開発促進地区」の見出し：赤/濃いピンク */
.redevelopment-table .col-promotion {
  background-color: #ef836d;
  text-align: center;
  width: 35%; /* 列幅の割合 */
}

/* 左側の地区名列（1列目）：薄オレンジ */
.redevelopment-table .district-name,
.redevelopment-table .col-district-base {
  background-color: #f3ca94;
  width: 30%; /* 列幅の割合 */
}

/* 中央の「誘導地区」データ列（2列目）：薄紫 */
.redevelopment-table tbody td:nth-child(2) {
  background-color: #dca7c6;
}

/* 右側の「2項再開発促進地区」データ列（3列目）：赤/濃いピンク */
.redevelopment-table tbody td:nth-child(3) {
  background-color: #ef836d;
}


.area_point .txt{
    font-size: 16px;
    padding-top: 24px;
}
.area_point .txt small{
    font-size: 10px;
    vertical-align: 5px;
}
.table_wrap small{
    display: block;
    font-size: 12px;
    line-height: 1.3;
}
.table_wrap small.right{
    text-align: right;
}



.lifeinfo{
    padding: 48px 0;
}
.lifeinfo .inner{padding: 0;}
.lifeinfo .eng{
    text-align: center;
    font-weight: 600;
    position: relative;
    font-size: 24px;
        margin-bottom: 24px;
        padding-bottom: 16px;
}
.lifeinfo_map{
    padding: 6% 0;
}
#map{
    margin: 16px auto;
    width: 100%;
   height: 370px;
   order: 2;
}

.content {
    display: none;
}
.content.show {
    display: block;
}
.parent-container { /* 実際のご自身の親要素クラス名に合わせてください */
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
        margin-top: 5%;
    }
.lifeinfo_tab{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    order: 1;
}
.lifeinfo_tab .infotab{
    flex-basis: 32.4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--light);
    font-size: 16px;
    line-height: 1;
    color: var(--dark);
    transition: .3s;
    text-align: center;
    min-height: 50px;
    cursor: pointer;
}
.lifeinfo_tab .infotab.active,
.lifeinfo_tab .infotab:hover{
    background: var(--dark);
    color: var(--light);
}

.lifeinfo_txt{
    margin-top: 0;
    background: var(--light);
    padding: 3%;
    order: 3;
    width: 100%;
}
.kyori{
    display: flex;
}
.kyori .name{
    flex-basis: 37%;
}
.kyori_txt{
    font-size: 1.2rem;
    text-align: right;
    flex-basis: 60%;
}
.lifeinfo_date {
    display: flex;
    align-items: baseline; /* 文字の底辺に合わせる方が綺麗です */
    gap: 0 8px;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray);
    padding: 8px 0;
}

.lifeinfo_date_name {
    /* 固定幅をやめ、文字サイズ分だけ占有させる */
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1.4;
}
.lifeinfo_date_name span {padding-right: .2rem;}

/* ★ 1. 親要素の直下に擬似要素を挿入して、間を埋める */
.lifeinfo_date::after {
    content: "";
    flex-grow: 1;
    border-bottom: 2px dotted var(--dark);
    /* marginを増やすか、transformで上に微調整します */
    margin-bottom: 0.5em; 
    transform: translateY(-3px); 
}

.lifeinfo_date_kyori {
    /* ★ 2. 距離を一番右（擬似要素の後ろ）に配置する */
    order: 2; 
    flex-shrink: 0;
    font-size: 12px;
    white-space: nowrap;
}
.pin-icon {
    vertical-align: middle; /* 垂直方向の真ん中合わせ */
    margin-right: 2px;      /* テキストとの間の余白 */
    width: 20px !important;            /* 必要に応じてサイズ指定 */
}

@media screen and (max-width: 1250px) {
    .lifeinfo_tab{
        gap: 2px;
    }
    .lifeinfo_tab .infotab {
    flex-basis: 49.6%;
    font-size: 13px;
    min-height: 40px;
    border-radius: 0;
}
.kyori .name {
    flex-basis: 0;
}
.kyori_txt {
    font-size: 1.2rem;
    text-align: center;
    flex-basis: 100%;
}
.kyori_txt span{
    font-size: 80%;
}
.lifeinfo_date {
    display: block;
    align-items: baseline;
    margin-top: 16px;
}
.lifeinfo_date_name span img {
    width: 20px !important;
}
}
@media screen and (min-width: 768px) {
    .lifeinfo .eng{
        font-size: 24px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
       /* 親要素をFlexboxにする（body直下なら適切な共通の親クラスを指定してください） */
    /* 今回は仮にこの3つを囲んでいる親要素がある前提ですが、
       なければ個別に設定も可能です。 */
    
    /* マップ・タブ・リストの全体を囲むコンテナに適用 */
    .mapbox, .lifeinfo_tab, .lifeinfo_txt {
        /* 必要に応じて親要素で flex を指定するか、
           全体を囲む div に以下の設定を入れます */
    }

    /* 親要素に設定が必要な場合（例：containerなど） */
    .parent-container { /* 実際のご自身の親要素クラス名に合わせてください */
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
        margin-top: 5%;
    }

    /* 1. タブを一番上に（幅100%） */
    .lifeinfo_tab {
        order: 1;
        width: 100%;
        margin-bottom: 24px;
        flex-wrap: nowrap;
    }
    .lifeinfo_tab .infotab{
        flex: 1;
    }

    /* 2. マップを左側に */
    #map {
        order: 2;
        width: 55%; /* 幅はお好みで */
        margin: 0;
        height: 600px;
    }

    /* 3. テキストリストを右側に */
    .lifeinfo_txt {
        order: 3;
        width: calc(45% - 24px); /* マップとの隙間を引いた幅 */
        margin-top: 0;
        margin-left: 24px;
        height: 600px;
        overflow-y: auto;
    }

.lifeinfo .loc_content_area_ttl{
    max-width: 700px;
}
}



.contents.residential_wrap{
    background: #006590;
    padding-bottom: 6%;
}
.residential_box{
    background: #e4f3f8;
    padding: 5% 0;
}
.contents.parenting_wrap{
    background: #407344;
    padding-bottom: 6%;
}
.parenting_box{
    background: #f0f6dd;
    padding: 5% 0;
}
.parenting_box.support{
    background: var(--light);
    padding: 5% 0;
    margin-top: 30px;
}
.contents.residential_wrap .contents_ttl h3,
.contents.parenting_wrap .contents_ttl h3,
.contents.residential_wrap .contents_ttl .sub_ttl,
.contents.parenting_wrap .contents_ttl .sub_ttl{
    color: var(--light);
}
.contents.residential_wrap .contents_ttl h3::before,
.contents.parenting_wrap .contents_ttl h3::before{
    background: var(--light);
}

.residential .copy,
.parenting .copy{
    font-size: 16px;
    padding-top: 16px;
}
.residential .copy{color: #006590;}
.parenting .copy{color: #407344;}

.parenting .spot_shop{
    margin-top: 32px;
}
.park_area{
    margin-top: 32px;
    padding: 32px 0;
    border-top: 1px dashed #407344;
}
.park_area h4{
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
}
.park_area .flex{
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-top: 32px;
}
.park_area .spot_area{
    width: 50%;
}
.park_area .park_map{
    flex: 1;
}
.park_area .park_map img{
    width: 100%;
}
.support .ttl{
    text-align: center;
    font-size: 24px;
    line-height: 1.5;
}
.support ul{
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}
.support li{
    width: calc((100% - 32px) / 3);
            display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}
.support li{
    background: var(--light);
    border: 2px solid #b3b3b3;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 6px 6px 0 #c3c8b4;
}
.support .img{
    overflow: hidden;
    border-radius: 8px;
}
.support dl{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 8px;
}
.support dt{
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    display: flex;

    justify-content: center;
}
.support dd{
    font-size: 13px;
    line-height: 1.6;
}

.variety_spot{background: var(--yellow); padding-top: 8%;}

@media screen and (max-width: 768px) {
    .mv h2{
    font-size: min(5vw, 2.6rem);
    line-height: 1.6;
    width: 100%;
}

.contents{
    padding: 6% 0 0;
}
.loc_movie_area{

}
.approach_map{
    padding: 0 0 5%;
}
.approach_map_hanrei{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.approach_map_hanrei dt{
    font-size: 12px;
}
.approach_map_hanrei dd{
    font-size: 12px;
}
.approach_map_hanrei dd span{
    display: flex;
    position: relative;
}


.copact_city .inner_1500{
    gap: 40px;
}

.contents_box{
    padding: 8% 0;
}
.contents_box.shops{
        margin-top: 60%;
}
.contents_box h2{
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}
.margin_out{
        margin-top: -83%;
}
.contents_box.shops .map_img{
    text-align: center;
    max-width: 100%;
    margin: 24px auto 0;
}
.loc_content_area{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.loc_content_area .ttl{
    font-size: 18px;
    padding-top: 32px;
}
.loc_content_area .main_wrap{
    flex-direction: column;
    gap: 16px;
}
.loc_content_area .main_wrap .img{
    flex-basis: 56%;
}
.loc_content_area .main_wrap .txt{
    margin-top: 0;
    gap: 16px;
}
.loc_content_area .main_wrap .txt .ttl{
    text-align: center;
    font-size: 40px;
    line-height: 1;
    padding-top: 0;
}
.loc_content_area .main_wrap .txt .spec{
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}
.loc_content_area .main_wrap .txt .copy{
    font-size: 13px;
}
.shops .loc_shop_list{
    width: 100%;
}
.loc_shop_list ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 8px;
}
.loc_shop_list li{
    width: calc((100% - 8px) / 2);
    background: var(--light);
}
.loc_shop_list li .icon{
    padding: 4% 0;
    min-height: 55px;
}

.shops .flex{
    flex-direction: column;
    gap: 24px;
}
.floor_map{
    max-width: 100%;
    background: var(--light);
    border: 2px solid var(--yellow);
    padding: 3%;
    margin-top: 0;
}
.floor_map .tab__menu{
    max-width: unset;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 3px;
    padding: 0;
    margin-bottom: 24px;
}
.floor_map .tab__menu li {
    position: relative;
    border: 1px solid var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    color: #999999;
    padding: 3% 8% 2%;
    cursor: pointer;
    flex: 1;
    border-bottom-left-radius: 12px;
}
.floor_map .tab__menu li.is-active {
    background: var(--yellow);
    color: var(--light);
}
.floor_map .tab__menu li.is-active span{
    border: none;
}

.contents_box.other{}
.contents_box.other .flex{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
.contents_box.other .other_main_img{
    flex-basis: 100%;
    position: relative;
}
.contents_box.other .other_main_img::before{
    display: none;
}
.contents_box.other .loc_shop_list{
    flex: 1;
    position: relative;
}
.contents_box.other .loc_shop_list::before{
    content: '';
    display: block;
    position: absolute; top: -25px;
    background: url(../images/location/other_line_sp.svg);
    background-size: 100%;
    width: 100%;
    height: 23px;
    background-repeat: no-repeat;
}
.contents_box.other .ttl{
    display: flex;
    justify-content: center;
    padding-top: 16px;
    gap: 8px;
}
.contents_box.other .ttl .txt{
    flex: 1;
    font-size: 13px;
    text-align: left;
}
.contents_box.other .ttl .map{
    flex-basis: 33%;
    background: none;
    padding: 0;
}

.spot_contents_wrap{
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.spot_contents_wrap h3{
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}
.spot_contents_wrap .txt{
    text-align: left;
    font-size: 13px;
}
.spot_contents{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}
.spot_contents_box{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.spot_contents_box h3{
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
}
.spot_contents_box .flex{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}
.spot_contents_box .flex .main_img{
    flex-basis: 38%;
}
.spot_contents_box .flex .nikke{
    flex: 1;
    background: var(--light);
    padding: 6% 4%;
}
.spot_contents_box .flex .nikke .flex{
    flex-direction: column;
}
.spot_contents_box .flex .nikke .flex .img{
    flex-basis: 52%;
}
.spot_contents_box .flex .nikke .flex .txt{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.spot_contents_box .flex .nikke .flex .txt .ttl{
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
}
.spot_contents_box .flex .nikke .flex .txt .spec{
    font-size: 12px;
    text-align: center;
}
.spot_contents_box .flex .nikke .flex .txt .copy{
    font-size: 13px;
}
.spot_area h4{
    text-align: center;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
  text-shadow: 2px 2px 0px var(--light); 
  position: relative;
  z-index: 10;
}
.spot_area dl.large{
    display: flex;
    align-items: center;
}
.spot_area dl.large br{display: block;}
.spot_area .main_img{
    margin-top: -3%;
    position: relative;
    z-index: 0;
}
.spot_area dl{
    padding-top: 8px;
}
.spot_area dl.none{opacity: 0; display: none;}
.spot_area dt{
    font-size: 14px;
    line-height: 1.5;
}
.spot_area dd{
    font-size: 11px;
    line-height: 1.3;
}
.spot_area ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-top: 16px;
}
.spot_area li{
    width: calc((100% - 8px) / 2);
    flex: auto;
}
.box3 h3{
    text-align: left;
}
.box3 .spot_area ul{
    width: 100%;
    margin-top: 0;
}

.area_point{
    padding: 6% 3%;
}
.area_point h4{
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
}
.area_point .flex{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.area_point .flex .area_point_map{
    flex-basis: 46%;
}
.area_point .flex .table_wrap{
    flex: 1;
}
.area_point_cap{
    font-size: 10px;
    display: block;
    padding-top: 16px;
}



/* テーブル */
.redevelopment-table {
  width: 100%;
  max-width: 600px; /* 必要に応じて調整してください */
  border-collapse: collapse;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid var(--dark);
}

/* 全てのセル（見出し・データ共通）の枠線と余白 */
.redevelopment-table th,
.redevelopment-table td {
  border: 1px solid var(--dark);
  padding: 8px;
  text-align: left;
  vertical-align: middle;
  height: 28px; /* セルの最小高さを確保 */
}

/* 1行目の大見出し：オレンジ */
.redevelopment-table .main-title {
  background-color: #f3ca94;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}
.redevelopment-table .main-title span {
    font-size: 10px;
    display: block;
}

/* 2行目中央「誘導地区」の見出し：薄紫 */
.redevelopment-table .col-guided {
  background-color: #dca7c6;
  text-align: center;
  width: 35%; /* 列幅の割合 */
}

/* 2行目右「2項再開発促進地区」の見出し：赤/濃いピンク */
.redevelopment-table .col-promotion {
  background-color: #ef836d;
  text-align: center;
  width: 35%; /* 列幅の割合 */
}

/* 左側の地区名列（1列目）：薄オレンジ */
.redevelopment-table .district-name,
.redevelopment-table .col-district-base {
  background-color: #f3ca94;
  width: 30%; /* 列幅の割合 */
}

/* 中央の「誘導地区」データ列（2列目）：薄紫 */
.redevelopment-table tbody td:nth-child(2) {
  background-color: #dca7c6;
}

/* 右側の「2項再開発促進地区」データ列（3列目）：赤/濃いピンク */
.redevelopment-table tbody td:nth-child(3) {
  background-color: #ef836d;
}


.area_point .txt{
    font-size: 13px;
    padding-top: 16px;
}
.area_point .txt small{
    font-size: 10px;
    vertical-align: 5px;
}
.table_wrap small{
    display: block;
    font-size: 10px;
    line-height: 1.3;
}
.table_wrap small.right{
    text-align: left;
}


.contents.residential_wrap{
    background: #006590;
            padding-bottom: 6%;
}
.residential_box{
    background: #e4f3f8;
    padding: 5% 0;
}
.contents.parenting_wrap{
    background: #407344;
    padding-bottom: 6%;
}
.parenting_box{
    background: #f0f6dd;
    padding: 5% 0;
}
.parenting_box.support{
    background: var(--light);
    padding: 8% 0;
    margin-top: 30px;
}
.contents.residential_wrap .contents_ttl h3,
.contents.parenting_wrap .contents_ttl h3,
.contents.residential_wrap .contents_ttl .sub_ttl,
.contents.parenting_wrap .contents_ttl .sub_ttl{
    color: var(--light);
}
.contents.residential_wrap .contents_ttl h3::before,
.contents.parenting_wrap .contents_ttl h3::before{
    background: var(--light);
}

.residential .copy,
.parenting .copy{
    font-size: 13px;
    padding-top: 16px;
}
.residential .copy{color: #006590;}
.parenting .copy{color: #407344;}

.parenting .spot_shop{
    margin-top: 32px;
}
.park_area{
    margin-top: 32px;
    padding: 32px 0 0;
    border-top: 1px dashed #407344;
}
.park_area h4{
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}
.park_area .flex{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}
.park_area .spot_area{
    width: 100%;
}
.park_area .park_map{
    flex: 1;
}
.park_area .park_map img{
    width: 100%;
}
.support .ttl{
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
}
.support ul{
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 8px;
}
.support li:nth-of-type(1),
.support li:nth-of-type(2),
.support li:nth-of-type(3){
    width: 100%;
}
.support li{
    width: calc((100% - 8px) / 2);
}
.support li{
    background: var(--light);
    border: 2px solid #b3b3b3;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 6px 6px 0 #c3c8b4;
}
.support .img{
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 12px;
}
.support dl{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 0;
}
.support dt{
    text-align: center;
    font-size: 18px;
    line-height: 1.3;
    display: flex;
    justify-content: center;
}
.support dd{
    font-size: 13px;
    line-height: 1.6;
    padding: 0 8px 8px;
}








}


/* 元の display: none; を以下に書き換える */
/* .tab__content-item {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease; 
} */

/* 表示状態のクラス */
/* .tab__content-item.is-show {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
} */



.content_tab{
  max-width: 800px;
  margin: auto;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
}
.content_tab li{width: 100%;}
.content_tab li a{
  display: block;
  position: relative;
  border: 1px solid var(--dark);
  background: var(--yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  padding: 6% 8%;
  cursor: pointer;
}
.content_tab li a::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%; height: 100%;
  background: rgba(255,255,255,.5);
}
.content_tab li a span{
  display: block;
  padding-bottom: 4px;
}
.content_tab li.is-active a span{
  border-bottom: 2px solid var(--dark);
}
.content_tab li.is-active a::before{
  background: none;
}
@media (max-width: 768px) {
  .content_tab li a {
    flex: 1;
    font-size: 20px;
    padding: 3% 3%;
}
}