.inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
   /* padding: 60px 0 0 0;*/
}
.rule {
font-size: 12px;
margin: 0 0 20px 0;
}
.tabBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
	margin: 0 0 100px 0;
}
.tabBtn li {
  position: relative;
  width: 25%;
  text-align: center;
  padding-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
	line-height: 1.1;
	height: 40px;
	

}
.tabBtn li p {
position: absolute;
  bottom: 0;          /* 下揃え */
  left: 50%;          /* 左から50%の位置に */
  transform: translateX(-50%); /* 自身の幅の半分だけ左に戻す＝左右中央揃え */
  margin: 0;
  padding: 0 0 10px 0;
  text-align: center;
  width: 100%;  
	font-size: 1.5rem !important;
}
.tabBtn li:nth-child(2),
.tabBtn li:nth-child(4){
margin-left:5px;
margin-right:5px;
}
/* タブ選択時のCSS */
.tabBtn li.selected {
  color: #009844;
}
.tabBtn li::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #dddddd;
}

.tabBtn li.selected::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #009844;
}
.tabBtn li,
.tabBtn li::before {
transition: 0.3s;
}
.tabBtn li:hover {
  color: #009844;
	transition: 0.3s;
}
.tabBtn li:hover::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #009844;
	transition: 0.3s;
}


.tabContents {
  font-size: 1.6rem !important;
}

.tabContents li {
  /*border-bottom: 1px solid #eee;*/
	padding: 20px 0 60px 0;
	display: flex;
  align-items: center; 
}
.tabContents li img {
	padding: 0 15px 0 0;
	width: 80px;
	 flex-shrink: 0; /* ★ 画像が縮まないように固定 */
}
.tabContents li div:not(.listbox) {
	display: inline-block;
	margin: 0 10px 0 0;
	line-height: 1;

}
.tabContents span {
	font-size: 1.2rem;
				transition: 0.3s;
}
.remarks {
color: #8e8887 !important; 
}
.listbox {
border-left: 1px solid;
padding-left:10px;
min-height: 65px;
display: flex;          /* ★ これを追加 */
  align-items: center;    /* ★ 子要素を上下中央 */
}

.tabContents li div a span {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px dotted #404040;
    line-height: 1;
}
.name {
  font-size: 1.6rem !important;
}
.overseas {
 font-size: 1.75rem !important;
}
.tabContents li div a {
    display: inline-block;
   
}
.tabContents a {
		transition: 0.3s;
}
.tabContents a:hover span {
  border-bottom-color: #009844;
		color: #009844;
		transition: 0.3s;
}
.listbox > div {
  display: flex !important;
  flex-direction: column;
}



/* category は必ず改行して下に置く */
.category {
  display: block !important;
  margin: 6px 0 15px 0 !important;
}



.category p {
display: inline;
margin: 4px 10px 0 0;
padding: 2px 8px;
background: #adadad;
color: #ffffff;
font-size: 12px;
font-weight: normal;

}
@media screen and (min-width: 768px) {
.tabContents {
   /*コレ*/display: flex;
    /*コレ*/flex-wrap: wrap;
}
.tabContents li {
/*コレ*/width: 50%;
    /*コレ*/box-sizing: border-box;
}
}
@media screen and (min-width: 450px) {
.br {
display: none;
}
}
@media screen and (max-width: 449px) {
.br {
display: block;
}
}
 #modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
  }

#modal img {
    display: block;
    width: auto;
    height: auto;

    /* 画面の90%まで大きくなる（左右上下に5%ずつ余白） */
    max-width: 90vw;
    max-height: 90vh;

    margin: auto;           /* 中央に配置 */
    object-fit: contain;    /* 縦横比を崩さない */
    padding: 10px;          /* 任意でさらに余白を足すことも可能 */
		margin: 7vh auto 0 auto; /* 上に10vhの余白、左右は中央 */
}

  #closeBtn {
    position: absolute;
    top: 20px; right: 30px;
    font-size: 30px;
    color: white;
    cursor: pointer;
  }