@charset "UTF-8";

.txt_shadow {
text-shadow: 1px 1px 5px #333 ,
-1px 1px 3px #333 ,
1px -1px 7px #444 ,
-1px -1px 7px #444;
}


@media screen and (max-width: 767px) {


.lifeinfo_ttl {
width: 100%;
margin: 40px auto 0;
background-color: #e6e6e6;
padding: 20px 0;
}
.lifeinfo_ttl div {
font-family: "Montserrat", system-ui;
font-weight: 300;
font-size: 20px;
text-align: center;
}

.lifeinfo_cont {
width: 100%;
margin: 40px auto;
}
.map_list {
width: 100%;
display: flex;
flex-direction: column;
}
.map_list .mapbox {
width: 100%;
margin-bottom: 20px;
}
.map_list .listbox {
width: 96%;
margin: 0 auto;
}
.ph_name {
  display: flex;
  align-items: flex-start;
  font-size: 11px;
  color: #000;
  line-height: 1.5;
  margin-top: 5px;
  }

.circle-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: #b54215;
  color: #fff; 
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 3px;
  font-size: 10px;
}

  /* 全体のレイアウト */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 20px auto;
  }

  /* ラジオボタンは隠す */
  .tab-input {
    display: none;
  }

  /* タブのラベル（見た目） */
  .tab-label {
    padding: 5px 0;
    cursor: pointer;
    border-bottom: none;
    transition: background 0.3s, color 0.3s;
    border-bottom: 2px solid #000;
  text-align: center; /* ★追加：文字を中央寄せにする */
  transition: .3s;
  font-size: 12px;
  flex: 1 1 calc(50% - 5px);
   gap:10px;
   box-sizing: border-box;
  }


  /* --- Active（選択中）時の設定 --- */
  /* チェックされたラジオボタンの直後のラベルを選択 */
  .tab-input:checked + .tab-label {
    background: #fff;
    font-weight: bold;
    border-bottom: 10px solid #b54215;
    position: relative;
    color: #b54215;
    z-index: 2;
    font-size: 13px;
  }

  /* コンテンツ部分の初期状態 */
  .tab-content {
    display: none; /* 基本は非表示 */
    width: 100%;
    background: #fff;
    padding-top: 10px;
    order: 1; /* コンテンツをラベルの下に配置 */
  }

  /* --- 選択されたタブに対応するコンテンツを表示 --- */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4,
  #tab5:checked ~ #content5{
    display: block;
  }
  
  
.custom-list {
  list-style: none;
  counter-reset: my-count;
  padding-left: 0;
  font-size: 12px; /* 全体の文字サイズ */
}

.custom-list li {
  counter-increment: my-count;
  position: relative;
  padding-left: 1.6em; /* 丸数字との間隔 */
  margin-bottom: 10px;
  line-height: 1.5;    /* テキストの行間 */
  color: #000;         /* 【指定】テキストの色 */
  font-feature-settings: "palt";
text-justify: inter-character;
}

/* 丸数字のデザイン */
.custom-list li::before {
  content: counter(my-count);
  position: absolute;
  left: 0;
  font-size: 11px;
  /* --- 上揃えの調整 --- */
  top: 0.1em;          /* 少し下げることで1行目の文字と高さが合います */
  
  /* --- 色とスタイルの設定 --- */
  background-color: #b54215; /* 【指定】背景色 */
  color: #fff;               /* 【指定】文字色 */
  
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  border-radius: 50%;
  text-align: center;
}
.list_cat {
font-size: 12px;
color: #000;
margin-bottom: 5px;
}
  
ul.ph_list {
width: 96%;
margin: 30px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.ph_list li {
  width: calc((100% - 10px) / 2);
  width: 49%;
  box-sizing: border-box;
  margin-bottom: 10px;
}




}


@media screen and (min-width: 768px) {

.lifeinfo_ttl {
width: 100%;
margin: 60px auto 0;
background-color: #e6e6e6;
padding: 20px 0;
}
.lifeinfo_ttl div {
font-family: "Montserrat", system-ui;
font-weight: 300;
font-size: 36px;
text-align: center;
}

.lifeinfo_cont {
width: 1200px;
margin: 60px auto;
}
.map_list {
width: 100%;
display: flex;
justify-content: space-between;
}
.map_list .mapbox {
width: 55%;
}
.map_list .listbox {
width: 43%;
}
.ph_name {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  color: #000;
  line-height: 1.6;
  margin-top: 5px;
  }

.circle-number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: #b54215;
  color: #fff; 
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 5px;
  font-size: 11px;
}

  /* 全体のレイアウト */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 1200px;
    margin: 20px auto;
  }

  /* ラジオボタンは隠す */
  .tab-input {
    display: none;
  }

  /* タブのラベル（見た目） */
  .tab-label {
    padding: 10px 10px 5px;
    cursor: pointer;
    border-bottom: none;
    transition: background 0.3s, color 0.3s;
    margin-right: 2px;
    border-bottom: 2px solid #000;
    flex: 1;            /* ★追加：親の幅に対して均等に広がる */
  text-align: center; /* ★追加：文字を中央寄せにする */
  transition: .3s;
  }

  /* --- Hover時の設定 --- */
  .tab-label:hover {
    border-bottom: 10px solid #b54215;
    color: #b54215;
  }

  /* --- Active（選択中）時の設定 --- */
  /* チェックされたラジオボタンの直後のラベルを選択 */
  .tab-input:checked + .tab-label {
    background: #fff;
    font-weight: bold;
    border-bottom: 10px solid #b54215;
    position: relative;
    color: #b54215;
    z-index: 2;
  }

  /* コンテンツ部分の初期状態 */
  .tab-content {
    display: none; /* 基本は非表示 */
    width: 100%;
    background: #fff;
    padding-top: 20px;
    order: 1; /* コンテンツをラベルの下に配置 */
  }

  /* --- 選択されたタブに対応するコンテンツを表示 --- */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2,
  #tab3:checked ~ #content3,
  #tab4:checked ~ #content4,
  #tab5:checked ~ #content5{
    display: block;
  }
  
  
.custom-list {
  list-style: none;
  counter-reset: my-count;
  padding-left: 0;
  font-size: 13px; /* 全体の文字サイズ */
}

.custom-list li {
  counter-increment: my-count;
  position: relative;
  padding-left: 1.8em; /* 丸数字との間隔 */
  margin-bottom: 10px;
  line-height: 1.6;    /* テキストの行間 */
  color: #000;         /* 【指定】テキストの色 */
  font-feature-settings: "palt";
text-justify: inter-character;
}

/* 丸数字のデザイン */
.custom-list li::before {
  content: counter(my-count);
  position: absolute;
  left: 0;
  font-size: 12px;
  /* --- 上揃えの調整 --- */
  top: 0.1em;          /* 少し下げることで1行目の文字と高さが合います */
  
  /* --- 色とスタイルの設定 --- */
  background-color: #b54215; /* 【指定】背景色 */
  color: #fff;               /* 【指定】文字色 */
  
  width: 1.4em;
  height: 1.4em;
  line-height: 1.4em;
  border-radius: 50%;
  text-align: center;
}
.list_cat {
font-size: 13px;
color: #000;
margin-bottom: 5px;
}
  
ul.ph_list {
width: 1000px;
margin: 30px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 10px; 
}

ul.ph_list li {
  width: calc((100% - (10px * 3)) / 4);
  box-sizing: border-box;
}



}