/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a,a:hover,a:visited{
  color: inherit;
}

textarea {
  resize: none;
  min-width:350px;
  max-width:100%;
  min-height:100px;
}

.container {
  width: 1180px;
  margin: 0 auto;
}

.top-wrapper {
  padding: 180px 0 30px 0;
  background-image:  url(./Images/top-wrapper.jpg);
  background-size: cover;
  color: white;
  text-align: center;
}

.wrapper-container {
  width: 1180px;
  margin: 0 auto;
}

.top-wrapper h1 {
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper h2 {
  opacity: 0.7;
}


.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 15px;
}

.top-window {
  background-color: beige;
  width: 800px;
  height: 200px;
  border:solid 1px lightgray;
  border-radius: 10px;
  display: block;
  margin:30px auto;
  padding: 20px;
}

.title {
  color: black;
  font-style: italic;
  font-size: 25px;
  font-weight: bold;
  line-height: 50px;
  padding-left: 10px;
  vertical-align: middle;

}

header {
  height: 50px;
  width: 1180px;
  background-image: url(./Images/HeadBanner7.png);
  background-color: rgba(255,255,255,0.8);
}

.header_inside {
  height: 50px;
  width: 1180px;
  background-image: url(./Images/HeadBanner7.png);
  background-color: rgba(255,255,255,0.8);
  background-repeat: no-repeat;         /* 繰り返しを防ぐ */
  background-size: cover;               /* 要素全体にフィットさせる */
  background-position: center center;   /* 中央に表示する */
  margin:0;
  padding:0;
  display: block;
}

p {
  white-space: pre-wrap;
}

.logo {
  position: relative;
  height: 50px;
  margin:0;
  padding:0;
}

.bar {
  position: relative;
  height: 20px;
}

.icon {
  position: relative;
  height: 25px;
  border-style: none;
  opacity: 0.7;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.icon:hover {
  height: 25px;
  opacity: 1;
  border-radius: 10px;
  transition: all 0.2s;
}

.header-left-box {
height:50px;
float: left;
margin:0;
padding:0;
}

.header-right-box {
float: right;
margin:0;
padding:0;
}

.header-plan {/* プラン名と更新状態 */
  display: block;
  float: right;
  position:relative;
  text-align:center;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.5s;
  height: 50px;
  padding: 0px 20px 0px 20px;
}

.header-user{/* ユーザー名、アカウント名 */
  display: block;
  float: right;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.5s;
  line-height: 47px;
  padding: 0px 20px 0px 20px;
  margin:0;
}

.header-right{
  display: block;
  float: right;
  position:relative;
  text-align:center;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.5s;
  line-height: 50px;
  padding: 0px 20px;
}

.header-right-a{/* 当該ページロゴ */
  display: block;
  float: right;
  position:relative;
  text-align:center;
  background-color:  rgba(144, 238, 144, 1.0);
  transition: all 0.5s;
  line-height: 50px;
  padding: 0px 20px;
}

.header-right-b{/* 当該ページ以外のロゴ */
  display: block;
  float: right;
  position:relative;
  text-align:center;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.5s;
  line-height: 50px;
  padding: 0px 20px;
}

.header-right-b:hover {
  background-color: rgba(144, 238, 144, 1.0);

}

.header-right-b:hover ~ .header-right-a{
  background-color: rgba(255, 255, 255, 0);

}


.contents {
  width: 1165px;
  padding-left: 5px;
  height: 320px;
}

.contents3 {
  width: 1165px;
  height: 300px;
  padding-left: 5px;
  background-color: whitesmoke;
}

.contents4 {
  width: 1165px;
  padding-left:5px;
  margin:auto;
}

.contents5 {/* 公開用サイト */
  width: 1165px;
  padding-left: 15px;
}

.account {
  width: 80%;
  display:block;
}

.footer {
  width: 1165px;
  height: fit-content;
  padding-left:5px;
  background-color: lightgreen;
}

.pagetop{
  width:100%;
  height:30px;
  text-align:center;
  padding-bottom: 10px;
  border-bottom: solid 2px darkgray;
  margin-bottom:0px;
}


.pagesecondtop {
  width:100%;
  height:30px;
  text-align:center;
  margin-top:0;
}

.updategame {
  width: 100%;
  padding-left: 15px;
}

.update-games-table {
  .name {
    width: 15%;
  }
  .score{
    width: 5%;
  }
}

summary {
	list-style: none;
	cursor: pointer;
}

summary::-webkit-details-marker {
	display: none;
}

.accordion summary{
	position: relative;
	list-style: none; /* デフォルトの三角形アイコンを消します */
	padding: 10px 10px 10px 10px;
	border:1px solid darkgray;
	cursor: pointer; /* ポインターを指さしマークに変更 */
  background-color: rgba(144, 238, 144, 0.7);
}

.accordion summary:hover{
  background-color: rgba(144, 238, 144, 1);
  transition: all 0.5s;
}

.accordion summary::-webkit-details-marker {
	display: none; /* Safariで表示されるデフォルトの三角形アイコンを消します */
}

.accordion summary::after{
	position: absolute;
	width: 15px;
	height: 15px;
	top: calc(50% - 10px);
	right: 25px;
	border-right: 4px solid #0070c0;
	border-bottom: 4px solid #0070c0;
	box-sizing: border-box;
	content: "";
	transform: rotate(45deg);
	transition: top 0.4s ease-out, transform 0.4s ease-out;
}

.accordion details[open] summary::after{
	top: calc(50% - 5px);
	transform: rotate(-135deg);
}

.accordion .contents-accordion{
	padding: 5px 45px;
  border: 1px solid darkgray;
}

@media screen and (max-width: 640px){
  .updategame {
    width: Auto;
    padding-left: 5px;
  }
  .update-games-table thead{
    display: none;
  }
  .update-games-table{
    width: 400px;
    font-size:medium;
  }
  .update-games-table tr td::before {
    content: attr(aria-label);
    float: left;
    font-weight: bold;
    padding-left: .7em;
  }
  .update-games-table tr td,
  .update-games-table tr th {
    display:block;
    float: left;
  }
  .update-games-table th {
    width: 30%
    }
  .update-games-table td {
   width: 70%
   }
}

.NewAccount {
  background-color:beige;
  width: 600px;
  height: 200px;
  border-radius: 10px;
  display: block;
  margin:65px auto;
  padding: 20px;
}

.register {
  background-color: beige;
  width: 600px;
  height: 450px;
  border:solid 1px lightgray;
  border-radius: 10px;
  display: block;
  margin:40px auto;
  padding: 20px;
}

.login {
  background-color: beige;
  width: 600px;
  height: 250px;
  border:solid 1px lightgray;
  border-radius: 10px;
  display: block;
  margin:40px auto;
  padding: 20px;
}

.login table {
  margin: 0 auto;
}

.login-failed {
  margin: 65px 20px;
  background-color: gray;
  width: 600px;
  height: 200px;
  border-radius: 10px;
  display: block;
  margin:40px auto;
  padding: 20px;
}

.logged-out {
  margin: 65px 20px;
  background-color: beige;
  width: 600px;
  height: 250px;
  border-radius: 10px;
  display: block;
  margin:40px auto;
  padding: 20px;
}

.loginTop a{
  display:block;
}

.bulletin_board {
  background-color: beige;
  border: 1px solid lightgrey;
  height: fit-content;
  padding: 5px;
}

.venue{
  width: 10em;
}

.score{
  width: 35px;
}

.form-inline {
  display:inline;
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
}

.form-input {
  padding-left: 10px;
  width: 600px;
  background-color:greenyellow;
}

.form-input2 {
  width: 600px;
  background-color:rgb(193, 246, 238);
}

.form-scores {
  width: 20px;
  display: inline-block;
}

table {
  border-collapse: collapse;
  overflow-wrap: break-word;
  background-color: none;
}

.fixed-table {
  table-layout:fixed;
  width: 100%;
}

.fixed-table tr:nth-child(even) td{
  background-color: beige;
}

.fixed-table td {
  overflow-wrap: break-word;
}

.team-table {
  table-layout:fixed; 
  width: 100%;
  word-break:break-all;
}

.team-table tr:nth-child(even) td{
  background-color: beige;
}

.team-table td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.schedule-table {
  height:fit-content;
  max-height: 800px;
  width: 100%;
}

.schedule-table tr:nth-child(even){
  background-color: beige;
}

th, td {
  border: 1px solid lightgray;
  vertical-align: middle;
  white-space: nowrap;
}

th {
    background:rgba(105, 169, 237,1);
    padding: 8px;
    text-align: center;
}

td {
  padding: 3px;
  overflow-wrap : break-word;
  vertical-align: middle;
}

.td-l {
  border-right-style: none;
  width:35px;
  text-align:center;
}

.td-m {
  border-right-style: none;
  border-left-style: none;
  align-content: center;
}

.td-r {
  border-left-style: none;
  width: 35px;
  text-align:center;
}

.dateTime-10{
  width: 10ch;
  font-family: monospace;
}

.dateTime-6{
  width: 6ch;
  font-family: monospace;
}

.dateTime-4{
  width: 4ch;
  font-family: monospace;
}

.dateTime-2{
  width: 2ch;
  font-family: monospace;
}

.address{
  height:auto;
  max-width:25em;
}

.mailaddress{
  height:auto;
  max-width:10em;
}

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

.hide-first-column td:first-child {
  display: none;
}

.transparent-table{
  border: none;
  background: none;
}

.transparent-table tr{
  border: none;
  background: none;
}

.transparent-td {
  background: none;
}

.border-table {
  table-layout: fixed;
  max-width: 100%;
}

.border-table tr:nth-child(even) td{
  background-color: beige;
}

.table-sticky{
  width: fit-content;
  word-break:break-all;
  overflow:auto;
  border-collapse: collapse;
  border: 1px solid lightgray;
}

.table-sticky th {
  background-color: #69a9ed42;
  border: 1px solid lightgray;
  z-index: +1;
}

.table-sticky td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.table-wide {
  table-layout:fixed;
  width: 100%;
}

.table-narrow {
  width:fit-content;
  max-width: 80%;
}

.sticky_title_top {
  position:sticky;
  top:0;
  left:0;
  opacity:1;
  border: 1px solid lightgray;
  &::before{
    content:"";
    position:absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    background:rgba(105, 169, 237);
    z-index: -1;
  }
}

.sticky_title_left {
  position:sticky;
  top:0;
  left:0;
  opacity:1;
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
  &::before{
    content:"";
    position:absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    z-index: -1;
  }
}

.sticky_title_left2 {
  max-width: 30%;
  position:sticky;
  top:30;
  left:30;
  opacity:1;
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
  &::before{
    content:"";
    position:absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border-right: 1px solid lightgray;
    border-left: 1px solid lightgray;
    z-index: -1;
  }
}

.toggle-button-1 {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 40px;
  background-color: #dddddd;
  cursor: pointer;
  transition: background-color .4s;
}

.toggle-button-1:has(:checked) {
  background-color: #0070c0;
}

.toggle-button-1::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  background-color: #fff;
  content: '';
  transition: left .4s;
}

.toggle-button-1:has(:checked)::after {
  left: 20px;
}

.toggle-button-1 input {
  display: none;
}

.sortable th {
  cursor: pointer;
}

.League-Results {
  width: fit-content;
}

.League-Results th {
  background:rgba(105, 169, 237,1);
  max-height:40px;
}

.League-Results th p {
  height:fit-content;
  max-height:35px;
  text-overflow: ellipsis;
}

.League-Results tr:nth-child(even) td{
  background-color: beige;
}

.League-Schedule {
  width: fit-content;
  max-width: 100%;
}

.League-Schedule th {
  background:rgba(105, 169, 237,1);
}

.League-Schedule tr:nth-child(even) td{
  background-color: beige;
}

.notice {
  width: 100%;
  height: fit-content;
  max-height:500px;
  overflow-y: scroll;
  border:solid 1px;
  border-color: lightgray;
  padding:5px;
}

.window {
	width: 90vw;
	max-width: 380px;
	height: 240px;
	background-color: #ffffff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.text {
	font-size: 18px;
	margin: 0;
}
.close {
	cursor:pointer;
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 20px;
}

.hidden {
  display: none;
  visibility: hidden;
}

.no-break {
  white-space: nowrap;
}

details summary {
  font-size: 15px;
  font-weight: bold;
}

button {
  display: inline-block;
  background-color: transparent;
  border: none;
}

button .purchase {
  display: block;
  width: 90px;
  height: 30px;
  border-radius: 15px;
  cursor: pointer;
}

button .purchase:hover {
  position: relative;
  display: block;
  opacity: 1;
  border-radius: 15px;
  opacity: 0.8;
  cursor: pointer;
}

.League-Table_Container {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout:fixed;
  border: 1px solid lightgray;
}

.League-Table_Container tr:nth-child(even) td{
  background-color: beige;
}

.League-Table_Container tr:nth-child(odd) td{
  background-color: white;
}

.League-Table_Container td{
  border-left-color: lightgray;
  border-right-color: lightgray;
  border-bottom-color: lightgray;
  border-top-color:lightgray;
}

.League-Table_TeamNames {
  display:block;
  width:100px;
  overflow: hidden;
}

.League-Table {
  overflow-x:scroll;
  width:fit-content;
  max-width: 100%;
  table-layout: fixed;
  border: solid 1px lightgray;
}

/*
.League-Table tr td:nth-child(2) {
  font-weight: bold;
}
*/

.League-Table tr td:nth-child(1),
.League-Table tr td:nth-child(2) {
  position:sticky;
  position: -webkit-sticky;
  z-index: 1;
}

.League-Table th {
  background:rgba(105, 169, 237);
  font-size: 12px;
}

.League-Table tr td:nth-child(1) {
  left:0;
  border-right: 1px solid lightgray;
 }
 
.League-Table tr td:nth-child(2),
.League-Table tr th:nth-child(2) {
   left:41px;
   border-right: 1px solid lightgray;
   border-left: 1px solid lightgray;
  }
 
.gameCell:hover {
  background-color: aqua;
  transition: all 0.5s;
  cursor: pointer;
}

.icon_layers{
display: flex;
height: 3em;
min-width:2em;
position: relative;
align-items: center;
text-align: center;
}

.icon_layers_icon{
position: absolute;
top:1.1em;
display: inline-block;
width: 100%;
margin:auto;
font-size: 3em;
z-index:1;
}

.icon_layers:hover .icon_layers_icon{
  display:none;
}

.icon_layers_text{
  position: absolute;
  min-width: 100%;
  color: black;
  font-size: 0.5em;
  top:0.55em;
  top:90%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:0;
}

.icon_layers:hover .icon_layers_text{
position: absolute;
min-width: 100%;
color:black;
font-size: 0.5em;
top:0.55em;
top:60%;
left:50%;
transform:translate(-50%, -50%);
z-index:1;
}

.link {
  font-size:medium;
  float: left;
  position: relative;
  color: #0070c0;
  text-decoration: none;
  cursor: pointer;
  &:before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: #0070c0;
    transform: scale(0,1);
    transition: 0.2s;
    cursor: pointer;
  }
    &:hover:before{
      transform: scale(1);
      cursor: pointer;
    }
  }

.link:visited {
  color: #0070c0; /* 訪問済みも同じ色 */
}

.footer_element {
  font-size:small;
  float:left;
}

.footer_element:hover {
  font-weight:bold;
  cursor: pointer;
  text-decoration: underline;
}

.footer_division1 {
  width:20%;
  text-align: center;
  float: left;
}

.footer_division2 {
  display:inline-block;
  width:100%;
  text-align:center;
  margin:auto;
}


/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
.ddmenu {
  display: flex;
  justify-content: space-between;
  padding: 0 5px; /* 両端の余白 */
  list-style: none;
  border-bottom: 1px solid darkgray;
  margin: 0;
}

.ddmenu li.menutop {
  position: relative;
  cursor: pointer;
  padding: 0.5em;
  border-radius: 5px 5px 0 0;
  background-color: rgba(211, 211, 211, 0.5);
  color: darkgray;
  text-align: center;
  flex: 1;
  margin: 0 5px; /* 各項目間の余白 */
  box-sizing: border-box;
}

.ddmenu li.menutop a {
  text-decoration: none;
  font-weight:bold;
  color: inherit;
  display: block;
  width: 100%;
}

.ddmenu li.menutop:hover {
  background-color: rgba(144, 238, 144, 1.0);
  color: black;
}

.ddmenu li.menu-4 {
  width: auto;
}

.ddmenu li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  text-align: left;
  font-weight:normal;
  background-color: white;
  box-shadow: 0 0 5px gray;
  padding: 5px;
  width:fit-content;
  min-width: 150px;
  max-width: 250px;
  max-height: 300px;
  z-index: 3;
}

.ddmenu li.menutop:hover .submenu {
  display: block;
}

.ddmenu .menusecond a {
  color: #0070c0;
  text-decoration: none;

}

.ddmenu .menusecond:hover {
  background-color: rgba(144, 238, 144, 1.0);
  color:  #0070c0;
  text-decoration: underline;
}

ul.ddmenu li .submenu a {
  font-weight: normal;
  color: #0070c0;
}





/* タブの装飾 */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
  position: relative; /* 親要素を基準に位置を調整 */
}

.tab-wrap:after {
  content: '';
  width: 100%;
  height: 1px;
  background: darkgray;
  position: absolute;
  bottom: -1px; /* タブの下に横棒が来るように調整 */
  left: 0;
  z-index: 0;
}

/* 各要素の順序を調整 */
.btn-1 {
  order: 1;  /* 1番目に配置される */
}
.btn-2 {
  order: 2;  /* 2番目に配置される */
}
.btn-3 {
  order: 3;  /* 3番目に配置される */
}
.btn-4 {
  order: 4;  /* 4番目に配置される */
}

.tab-label-a {
  color: black;
  background: rgba(144, 238, 144, 1.0);
  font-size: small;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  padding: 10px .5em;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
  margin: 0px 5px;
}

.tab-label-b {
  color: darkgray !important;
  background: rgba(211, 211, 211, 0.5);
  font-size: small;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  padding: 10px .5em;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
  margin: 0px 5px;
}

.tab-label-c {
  color: darkgray !important;
  background: white;
  font-size: small;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  padding: 10px .5em;
  position: relative;
  z-index: 1;
  
  border-radius: 5px 5px 0 0;
  flex: 1;
  margin: 0px 5px;
}

/* Hover効果 */
.tab-label-b:hover {
  color: black !important;
  background: rgba(144, 238, 144, 1.0);
}

.tab-label-b:hover ~ .tab-label-a {
  color: darkgray;
  background: rgba(211, 211, 211, 0.5);
}




/* ul 初期状態で非表示 */
.tab-wrap .tabtop {
  display: none;
  position: absolute;
  top: 100%;
  border-radius: 0 0 5px 5px;
  padding: 10px;
  min-width: 150px;
  width: max-content;
  z-index: 3;
}

/* 「リーグ編集」にホバーでリーグ用の ul を表示 */
.tab-wrap .edit-leagues:hover ~ .league-options,
.tab-wrap .league-options:hover {
  display: block;
  left: 25%; /* 表示位置を調整 */
  color: #0070c0;
  background-color: white;
  box-shadow: 0 0 5px gray;
  transition: 0.2s;
}

/* 「リーグ編集」またはリーグ用の ul にホバーしている場合のスタイル変更 */
.tab-wrap .edit-leagues:hover,
.tab-wrap .league-options:hover ~ .edit-leagues {
  color: black !important;
  background: rgba(144, 238, 144, 1.0);
}

/* 「チーム編集」にホバーでチーム用の ul を表示 */
.tab-wrap .edit-teams:hover ~ .team-options,
.tab-wrap .team-options:hover {
  display: block;
  left: 75%; /* 表示位置を調整 */
  color: #0070c0;
  background-color: white;
  box-shadow: 0 0 5px gray;
  transition: 0.2s;
}

/* 「アカウント選択」にホバーでチーム用の ul を表示 */
.tab-wrap .select-account:hover ~ .account-options,
.tab-wrap .account-options:hover {
  display: block;
  left: 0%; /* 表示位置を調整 */
  color: #0070c0;
  background-color: white;
  box-shadow: 0 0 5px gray;
  transition: 0.2s;
}




/* 「チーム編集」または対応する ul にホバーしているとき */
.tab-wrap .team-options:hover ~ .edit-teams {
  color: black !important;
  background: rgba(144, 238, 144, 1.0);
}

/* 「アカウント選択」または対応する ul にホバーしているとき */
.tab-wrap .account-options:hover ~ .select-account {
  color: black !important;
  background: rgba(144, 238, 144, 1.0);
}

/* リストアイテムのホバー時のスタイル */
.tab-wrap .tabtop .tabsecond:hover {
  text-align: left;
  color: #0070c0;
  min-width: 150px;
  width: 100%;
  text-decoration: underline;
  background-color: rgba(144, 238, 144, 1.0);
  cursor: pointer;
  z-index: 3;
}

.trace {
  clear:both;
}

.trace_element {
  font-size:small;
  text-align:left;
}

.trace_element:hover {
  color:#0070c0;
  text-decoration: underline;
}

.setting_element{
  float: left;
  width: 45%;
  margin-right: 3%;

}

.password-container {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* updateplan.htmlで商品選択をするボタンの装飾 */
.radio-3-label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 250px;
    margin: .2em auto;
    padding: .5em .7em;
    border: 1px solid #0070C0;
    border-radius: 25px;
    background-color: #0070C026;
    cursor: pointer;
    font-weight: normal;
    line-height: 1.4;
}

.radio-3-label:has(:checked) {
    background-color: #0070C0;
    color: #fff;
}

.radio-3-label::before,
.radio-3-label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

.radio-3-label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}

.radio-3-label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + .7em);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #0070C0;
}

.radio-3-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.actions {
    display: flex;
    gap: .75rem;
    align-items: center;
}

/* ベース（全ボタン共通） */
.actions .btn {
  padding: .75rem 1.25rem;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 700;
  color: #fff;               /* デフォは白字 */
  opacity: 0.7;
  transition: filter .15s ease, transform .02s ease;
}
.actions .btn:hover { opacity: 1; }
.actions .btn:active { transform: translateY(1px); }

/* アクセシビリティ：キーボードフォーカス */
.actions .btn:focus-visible {
  outline: 3px solid #0000;  /* 透明のアウトラインでレイアウト揺れ防止 */
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}

/* バリアント（色だけ差し替え） */
.actions .btn--blue  { background: #0070C0; } /* hover時は上のbrightnessで暗くなる */
.actions .btn--green { background: #548235; }
.actions .btn--red   { background: #FF0000; }

/* 無効状態 */
.actions .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

[inert] {
  opacity: .4;
  filter: grayscale(100%);
}

/* 1) クリック遮断＋見た目グレー化 */
.disabled-overlay {
  position: relative;           /* 擬似要素の基準にする */
  opacity: .45;
  filter: grayscale(100%);
}

/* 全面カバーでクリック遮断（ここが肝）*/
.disabled-overlay::after {
  content: "";
  position: absolute;
  inset: 0;                     /* 上下左右0で全面 */
  z-index: 9999;                /* stacking文脈で負けないよう強めに */
  background: transparent;      /* 透明でもOK（薄いグレーにしたければ rgba(255,255,255,.2) など） */
  pointer-events: auto;         /* 下の要素へのイベントをブロック */
  cursor: not-allowed;
}

/* 「万一」を潰す：子孫の pointer-events を殺す（強制） */
.disabled-overlay * {
  pointer-events: none !important;
}