@charset "UTF-8";


/*スマホ*/
@media screen and (max-width:750px){
.lifeinfo{width:96%;margin: 0px auto 0px auto; padding: 3% 2% 3% 2%;text-align:center;color: #000;background-color: #FFF}
.title2{width:50%;margin: 0px auto 0px auto; padding: 13px 0px 13px 0px;text-align:center;color:#D3B562;font-weight: bold;font-size: 100%;background:#002060 }
	
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 0px;
}

.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  order: 0;
  background: #fff; /* 下部線は透明に設定 */
}

.tab-label {
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 1px 0px 10px; /* 上下のパディングを20pxに固定 */
  order: -1;
  position: relative;
  z-index: 1;
  border-radius:20px 20px 0 0;
 margin: 0px 0.1% 0px 0.1%;
  flex: 1;
  background: #999; /* タブの初期色を設定 */
  box-sizing: border-box; /* タブの大きさが変わらないようにする */
  transition: background-color 0.3s, color 0.3s, padding 0.3s; /* トランジションにpaddingを追加 */
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え */
}

.tab-label:not(:last-of-type) {
  margin-right: 0px;margin-bottom: 0px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0; 
}

.tab-switch:checked + .tab-label {
  background: rgba(153, 153, 153, 0.5); /* クリック後のタブ色を20%透明に変更 */
  color: #fff; /* 文字色を白に設定 */
  padding: 0px 0px; /* 上下のパディングを20pxに固定 */
  box-sizing: border-box; /* タブの大きさが変わらないようにする */
}

.tab-switch:checked + .tab-label + .tab-content {
  height: auto;
  overflow: auto;
  padding: 0px 0 0px 0px; /* 上下のパディングを20pxに固定 */
  opacity: 1;

}

.tab-switch {
  display: none;
}

.tab-switch:checked + .tab-label:after {
  top: 100%;
  left: 50%;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-width: 14px;
  margin-left: -14px;
}

.new-label {
    display: inline-block;
    padding: 3px 8px 2px;       /* 上下2px、左右4pxの内側余白 */
    border: 1px solid #a40c5e; /* 枠線の色 */
    color: #fff;          /* 文字色（枠線と合わせています） */
    font-weight: bold;       /* 文字を太字にする */
    font-size: 16px;         /* お好みでサイズ調整可能 */
    border-radius: 2px;      /* 角を少し丸くする場合 */
}
	

.new-label2 {
    display: inline-block;
    padding: 3px 0px 2px;       /* 上下2px、左右4pxの内側余白 */
    color: #fff;          /* 文字色（枠線と合わせています） */
    font-weight: bold;       /* 文字を太字にする */
    font-size: 20px;         /* お好みでサイズ調整可能 */
}

.new-label22 {
    display: inline-block;
    padding: 3px 0px 2px;       /* 上下2px、左右4pxの内側余白 */
    color: #002060;          /* 文字色（枠線と合わせています） */
    font-weight: bold;       /* 文字を太字にする */
    font-size: 20px;         /* お好みでサイズ調整可能 */
}
	
	
	/* ▼を選択しているタブの左10%の位置に表示（フェードイン） */
.tab-switch:checked + .tab-label:before {
  content: ""; /* ▼を表示 */
  font-size: 20px; /* サイズ調整 */
  color: #fff; /* 色を白に */
  position: absolute;
  left: 10%; /* タブの左10%の位置に配置 */
  top: 50%;
  transform: translate(-50%, -50%); /* 水平＆垂直中央調整 */
  opacity: 1; /* 表示 */
  transition: opacity 0.8s ease-in-out; /* フェードイン */
}

/* ▼を選択していないタブでは非表示 */
.tab-switch:not(:checked) + .tab-label:before {
  opacity: 0; /* フェードアウト */
}

/* 各タブの背景色 */
#tab1:checked + .tab-label,
#tab1:not(:checked) + .tab-label {
  background: #f18b00; 
  color: #fff;
  font-size: 100%; padding: 5px 0px 5px;
}

#tab2:checked + .tab-label,
#tab2:not(:checked) + .tab-label {
  background: #a40c5e;
  color: #fff;
  font-size: 160%; padding: 5px 0px 5px;
}

	
	/* 各タブの背景色 
#tab3:checked + .tab-label,
#tab3:not(:checked) + .tab-label {
  background: #002060; 
  color: #D3B562;
  font-size: 20px; padding: 14px 0px 14px;
}

#tab4:checked + .tab-label,
#tab4:not(:checked) + .tab-label {
  background: #D3B562;
  color: #002060;
  font-size: 20px; padding: 14px 0px 14px;
}
	*/
	
	
/* クリック後に線枠を非表示にする */
.tab-switch:checked + .tab-label {
  outline: none;
  border: none;
  position: relative;
}

/* ふわっと透明化（フェード効果） */
.tab-label {
  transition: opacity 0.5s ease-in-out;
}

.tab-label:hover {
  opacity: 1.0;
}


    a:hover {
  cursor: default !important; /* ホバー状態でも指カーソルを出さない */
}
}



/*PC*/
@media print, screen and (min-width:751px){


.lifeinfo{width:76%;margin: 0px auto 0px auto; padding: 3% 2% 3% 2%;text-align:center;color: #000;background-color: #FFF}
.title2{width:100%;margin: 0px auto 0px auto; padding: 13px 0px 13px 0px;text-align:center;color:#D3B562;font-weight: bold;font-size: 150%;background:#002060 }
	
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 0px;
}

.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  order: 0;
  background: #fff; /* 下部線は透明に設定 */
}

.tab-label {
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 1px 0px 10px; /* 上下のパディングを20pxに固定 */
  order: -1;
  position: relative;
  z-index: 1;
  border-radius:20px 20px 0 0;margin: 0px 8px 0px 8px;
  flex: 1;
  background: #999; /* タブの初期色を設定 */
  box-sizing: border-box; /* タブの大きさが変わらないようにする */
  transition: background-color 0.3s, color 0.3s, padding 0.3s; /* トランジションにpaddingを追加 */
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え */
}

.tab-label:not(:last-of-type) {
  margin-right: 0px;margin-bottom: 0px;
}

.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0; 
}

.tab-switch:checked + .tab-label {
  background: rgba(153, 153, 153, 0.5); /* クリック後のタブ色を20%透明に変更 */
  color: #fff; /* 文字色を白に設定 */
  padding: 10px 20px; /* 上下のパディングを20pxに固定 */
  box-sizing: border-box; /* タブの大きさが変わらないようにする */
}

.tab-switch:checked + .tab-label + .tab-content {
  height: auto;
  overflow: auto;
  padding: 10px 0 10px 0px; /* 上下のパディングを20pxに固定 */
  opacity: 1;

}

.tab-switch {
  display: none;
}

.tab-switch:checked + .tab-label:after {
  top: 100%;
  left: 50%;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-width: 14px;
  margin-left: -14px;
}

.new-label {
    display: inline-block;
    padding: 3px 8px 2px;       /* 上下2px、左右4pxの内側余白 */
    border: 1px solid #a40c5e; /* 枠線の色 */
    color: #fff;          /* 文字色（枠線と合わせています） */
    font-weight: bold;       /* 文字を太字にする */
    font-size: 16px;         /* お好みでサイズ調整可能 */
    border-radius: 2px;      /* 角を少し丸くする場合 */
}
	

.new-label2 {
    display: inline-block;
    padding: 3px 0px 2px;       /* 上下2px、左右4pxの内側余白 */
    color: #fff;          /* 文字色（枠線と合わせています） */
    font-weight: bold;       /* 文字を太字にする */
    font-size: 20px;         /* お好みでサイズ調整可能 */
}

.new-label22 {
    display: inline-block;
    padding: 3px 0px 2px;       /* 上下2px、左右4pxの内側余白 */
    color: #002060;          /* 文字色（枠線と合わせています） */
    font-weight: bold;       /* 文字を太字にする */
    font-size: 20px;         /* お好みでサイズ調整可能 */
}
	
	
	/* ▼を選択しているタブの左10%の位置に表示（フェードイン） */
.tab-switch:checked + .tab-label:before {
  content: ""; /* ▼を表示 */
  font-size: 20px; /* サイズ調整 */
  color: #fff; /* 色を白に */
  position: absolute;
  left: 10%; /* タブの左10%の位置に配置 */
  top: 50%;
  transform: translate(-50%, -50%); /* 水平＆垂直中央調整 */
  opacity: 1; /* 表示 */
  transition: opacity 0.8s ease-in-out; /* フェードイン */
}

/* ▼を選択していないタブでは非表示 */
.tab-switch:not(:checked) + .tab-label:before {
  opacity: 0; /* フェードアウト */
}

/* 各タブの背景色 */
#tab1:checked + .tab-label,
#tab1:not(:checked) + .tab-label {
  background: #f18b00; 
  color: #fff;
  font-size: 160%; padding: 14px 0px 14px;
}

#tab2:checked + .tab-label,
#tab2:not(:checked) + .tab-label {
  background: #a40c5e;
  color: #fff;
  font-size: 20px; padding: 14px 0px 14px;
}

	
	/* 各タブの背景色 
#tab3:checked + .tab-label,
#tab3:not(:checked) + .tab-label {
  background: #002060; 
  color: #D3B562;
  font-size: 20px; padding: 14px 0px 14px;
}

#tab4:checked + .tab-label,
#tab4:not(:checked) + .tab-label {
  background: #D3B562;
  color: #002060;
  font-size: 20px; padding: 14px 0px 14px;
}
	*/
	
	
/* クリック後に線枠を非表示にする */
.tab-switch:checked + .tab-label {
  outline: none;
  border: none;
  position: relative;
}

/* ふわっと透明化（フェード効果） */
.tab-label {
  transition: opacity 0.5s ease-in-out;
}

.tab-label:hover {
  opacity: 1.0;
}

}
.tab-label:hover {
cursor: pointer !important;

}