/*table*/
.com_table td,.com_table th{border:1px black solid;padding:0.5em 1em;}
.com_table{border-collapse: collapse;}
.table_width{width:calc(100% - 2em);margin-left:1em;}
.table_width td:first-child{width:5.5em;font-size:0.9em;font-weight:bold;text-align:center;}
/*radio*/
.div_com_radio {
    display: inline-flex;border: 1px solid #ccc;
    border-radius: 8px;overflow: hidden;margin:0.5em;}
.div_com_radio input[type='radio'] {display: none;}
.div_com_radio label {padding: 0.5em 1.2em;
    cursor: pointer;background: #f5f5f5;
    border-right: 1px solid #ccc;user-select: none;
    transition: background 0.2s, color 0.2s;}
.div_com_radio label:last-child {border-right: none;}
.div_com_radio input[type='radio']:checked + label {
    background: #3156c9;color: white;font-weight: bold;}
/*select*/
.com_sel{
  padding: 0.6em 0.8em;border: 1px solid #ccd4e0;
  border-radius: 8px;font-size: 1em;
  background-color: #fff;color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;}
.com_sel:focus, select:focus {
  border-color: #5078ff;outline: none;
  box-shadow: 0 0 4px rgba(80, 120, 255, 0.4);}
/*input*/
.com_lab_text, .com_lab_area {display: inline-block;flex-direction: column;
  margin:0.75em 0;width: 12em;}
.com_lab_text label, .com_lab_area label {
  font-size: 0.95em;left:0.5em;position:relative;
  color: #333;width:5em;display:table-row;
  font-weight: 500;}
.com_lab_text input[type='text'], .com_lab_area textarea {
  padding: 0.6em 0.8em;border: 1px solid #c9d2e0;border-radius: 8px;
  font-size: 1em;width:8em;background-color: #fff;color: #333;margin-top:0.3em;
  transition: border-color 0.25s, box-shadow 0.25s;}
.com_lab_text input[type='text']::placeholder {color: #aaa;}
.com_lab_text input[type='text']:focus, .com_lab_area textarea:focus {
  border-color: #4a6fdc;outline: none;
  box-shadow: 0 0 4px rgba(74, 111, 220, 0.4);}
.input_text{
  padding: 0.6em 0.8em;border: 1px solid #c9d2e0;border-radius: 8px;
  font-size: 1em;width:8em;background-color: #fff;color: #333;
  transition: border-color 0.25s, box-shadow 0.25s;}
.input_text::placeholder {color: #aaa;}
.input_text:focus {border-color: #4a6fdc;outline: none;
  box-shadow: 0 0 4px rgba(74, 111, 220, 0.4);}
.input_new{width:5em;margin:0 2em 0 -1.5em;}
/*btn設定*/
.com_btn {
  background-color: #4169E1;color: #ffffff;border: none;
  border-radius: 9999px;padding: 0.8em 1.8em;font-size: 1rem;
  letter-spacing: 0.03em;cursor: pointer;
  box-shadow: 0 6px 14px rgba(65, 105, 225, 0.25);
  transition: all 0.25s ease;display: inline-flex;
  align-items: center;gap: 0.5em;}
.com_btn:hover {
  background-color: #3156c9;
  box-shadow: 0 8px 18px rgba(49, 86, 201, 0.35);
  transform: translateY(-2px);}
.com_btn:active {
  background-color: #264bb0;transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(38, 75, 176, 0.25);}
svg {width: 18px;height: 18px;stroke: #ffffff;}
/*com_button*/
.div_com_button {display: inline-flex;gap: 2.8em;}
.com_button{
  border: none;border-radius: 8px;padding: 0.6em 1.4em;
  font-size: 1em;cursor: pointer;
  transition: background-color 0.25s, transform 0.1s, box-shadow 0.25s;
  font-weight: 500;color: #fff;}
.com_button{background-color: #6e7b8a;}
.com_button:hover {background-color: #5f6c7a;}
.com_button:active {transform: scale(0.97);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;}
/*com_toggle*/
.com_toggle span{margin: 0.5em 0;display: inline-block;}
.com_toggle input[type="checkbox"] {
  position: absolute;opacity: 0;pointer-events: none;}
.com_toggle label{
  display: inline-block;padding: 8px 14px;border-radius: 16px;
  background: #e5e7eb;color: #374151;font-weight: 400;margin-right:1.4em;
  cursor: pointer;transition: all 0.2s ease;user-select: none;}
.com_toggle input[type="checkbox"]:checked + label {
  background: #264bb0;color: #ffffff;font-weight: 600;}
.com_toggle label:hover {filter: brightness(0.95);}