/* ダイアログモーダル */

#ts-dialog-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}

#ts-dialog-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9999;
    max-width: 90vw;
    width: 400px;
}

.ts-dialog-content p {
    font-size: 1rem;
    margin-bottom: 20px;
    text-align: center;
}

.ts-dialog-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* ファイルインプット */

.file-upload-button {
  position: relative;
  background: transparent;
  cursor: pointer;
  border: none;
  padding: 5px;
  border-radius: 3px;
    overflow: hidden;
}
.file-upload-button:has(input:not(:disabled)):hover {
  background: rgba(0, 0, 0, 0.2);
}
.file-upload-button:has(input:disabled) {
  color: rgba(0, 0, 0, 0.3);
}
.file-upload-input {
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
    position: absolute;
}

/* オーバーレイロード画像 */

#ts-loading-overlay {
    position: fixed;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8);
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #ccc;
    border-top: 4px solid #2d2d2d;
    border-radius: 50%;
    animation: ts-spin 1s linear infinite;
}

@keyframes ts-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* バナーアラート */

@media screen and (max-width: 834px) {
    #ts-alert-container {
        top: 85px;
    }
}
@media screen and (min-width: 835px) and (max-width: 1023px) {
    #ts-alert-container {
        top: 112px;
    }
}
@media screen and (min-width: 1024px) {
    #ts-alert-container {
        top: 95px;
    }
}

/* 
#ts-alert-container {
    opacity: 0;
    z-index: -1;

    position: fixed;
    width: 90%;
    left: 50%;
    max-width: 500px;
    transform: translate(-50%, 0);
    transition: opacity 0.2s;
    color: #ffffff;
    justify-content: center;

    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}
#ts-alert-content {
    display: none;
}



#ts-alert-container.alert-info {
    background: linear-gradient(to right, #5bc0de, #46b8da);
}
#ts-alert-container.alert-success {
    background: linear-gradient(to right, #5cb85c, #4cae4c);
}
#ts-alert-container.alert-error {
    background: linear-gradient(to right, #d9534f, #c9302c);
} */

/* 固定バナーアラート */

/*スマホ表示*/
@media screen and (max-width: 834px){
    .form-wrapper {
        background: transparent;
        margin: 0 auto;
        width: calc(100% - 1em);
        overflow: hidden;
        background: #fafafa;
    }
}
/*pc表示*/
@media screen and (min-width: 834px){
    .form-wrapper {
        background: #fafafa;
        margin: 20px auto;
        overflow: hidden;
    }
}
.form-wrapper-sizer {
    max-width: 600px;
}
.form-wrapper-sizer p {
    margin: 0;
}
.info-container {
    background: #fafafa;
    margin: 1em auto;
    padding: 1em;
    border-left: 4px solid rgb(50, 50, 50);
}
.success-container {
    background: #fafafa;
    margin: 1em auto;
    padding: 1em;
    color: rgb(13, 214, 40);
    border-left: 4px solid rgb(13, 214, 40);
}
.error-container {
    background: #fafafa;
    margin: 1em auto;
    padding: 1em;
    color: rgb(243, 15, 15);
    border-left: 4px solid rgb(243, 15, 15);
}

/* ------------------ 🔽🔽🔽 ポップアップメニュー 始 🔽🔽🔽　------------------ */

.ts-menu-popup-container {
    position: relative;
}
.ts-menu-popup-wrapper-container{
    height: 0;
    width: 0;
}
.ts-menu-popup-wrapper {
    position: absolute;
    display: none;
    background-color: white;
    box-shadow: 0px 1px 3px 1px #555555, 0px 1px 2px 0px #555555;
    list-style: none;
    width: fit-content;
    height: fit-content;
    padding: 5px;
}
.ts-menu-popup-wrapper li {
    padding: 5px 10px;
    transition: all 0.15s;
    cursor : pointer;
}
.ts-menu-popup-wrapper a:not(.ts-disabled) li:hover {
    background-color: rgba(0, 0, 0, 0.2);
}
.ts-menu-popup-wrapper a {
    font-size: 14px;
    text-decoration: none;
    color: #2d2d2d;
}

.ts-option-red {
    color: rgb(238, 87, 87) !important;
}

.ts-menu-popup-wrapper .ts-disabled {
    pointer-events: none;
}
.ts-menu-popup-wrapper .ts-disabled:not(.ts-option-red) {
    color: gray;
}
.ts-menu-popup-wrapper .ts-disabled.ts-option-red {
    color: rgb(255, 172, 172);
}

/* ------------------ 🔽🔽🔽 ツールチップ 始 🔽🔽🔽　------------------ */
.ts-tooltip.ts-disabled {
  display: none;
}
.ts-tooltip:not(.ts-disabled) {
    --_bg: #2d2d2d;
    --_color: #fff;
    --_triangle-size: 5px;
    --_gap: 3px;
  
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
  
    /* ツールチップのみため */
    width: max-content;
    max-width: 150px;
    padding: 10px;
    background-color: var(--_bg);
    color: var(--_color);
    text-align: left;
    border-radius: 8px;
    font-size: 12px;
  
    /* 表示・非表示の指定 */
    visibility: hidden;
    opacity: 0;
  }
  
  /* ツールチップが上に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-top {
    bottom: calc(100% + var(--_triangle-size) + var(--_gap));
    left: 50%;
    translate: -50% var(--_y, 0);
  }
  
  /* ツールチップが下に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-bottom {
    top: calc(100% + var(--_triangle-size) + var(--_gap));
    left: 50%;
    translate: -50% var(--_y, 0);
  }
  
  /* ツールチップが右に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-right {
    bottom: 50%;
    left: calc(100% + var(--_triangle-size) + var(--_gap));
    translate: var(--_x, 0) 50%;
  }
  
  /* ツールチップが左に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-left {
    bottom: 50%;
    right: calc(100% + var(--_triangle-size) + var(--_gap));
    translate: var(--_x, 0) 50%;
  }

  /* 右上 */
.ts-tooltip:not(.ts-disabled).-top-right {
    bottom: calc(100% + var(--_triangle-size) + var(--_gap));
    left: 0;
    translate: var(--_x, 0) var(--_y, 0);
  }
  
  /* 左上 */
  .ts-tooltip:not(.ts-disabled).-top-left {
    bottom: calc(100% + var(--_triangle-size) + var(--_gap));
    right: 0;
    translate: var(--_x, 0) var(--_y, 0);
  }
  
  /* 右下 */
  .ts-tooltip:not(.ts-disabled).-bottom-right {
    top: calc(100% + var(--_triangle-size) + var(--_gap));
    left: 0;
    translate: var(--_x, 0) var(--_y, 0);
  }
  
  /* 左下 */
  .ts-tooltip:not(.ts-disabled).-bottom-left {
    top: calc(100% + var(--_triangle-size) + var(--_gap));
    right: 0;
    translate: var(--_x, 0) var(--_y, 0);
  }
  
  
  /*
    △を擬似要素で作成
  */
  .ts-tooltip::before {
    position: absolute;
    margin: auto;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
  }
  
  /* ツールチップが上に表示される場合の△ */
  .ts-tooltip:not(.ts-disabled).-top::before {
    bottom: calc(var(--_triangle-size) * -1);
    right: 0;
    left: 0;
    border-width: var(--_triangle-size) var(--_triangle-size) 0 var(--_triangle-size);
    border-color: var(--_bg) transparent transparent transparent;
  }
  
  /* ツールチップが下に表示される場合の△ */
  .ts-tooltip:not(.ts-disabled).-bottom::before {
    top: calc(var(--_triangle-size) * -1);
    right: 0;
    left: 0;
    border-width: 0 var(--_triangle-size) var(--_triangle-size) var(--_triangle-size);
    border-color: transparent transparent var(--_bg) transparent;
  }
  
  /* ツールチップが左に表示される場合の△ */
  .ts-tooltip:not(.ts-disabled).-left::before {
    top: 0;
    bottom: 0;
    right: calc(var(--_triangle-size) * -1);
    border-width: var(--_triangle-size) 0 var(--_triangle-size) var(--_triangle-size);
    border-color: transparent transparent transparent var(--_bg);
  }
  
  /* ツールチップが右に表示される場合の△ */
  .ts-tooltip:not(.ts-disabled).-right::before {
    top: 0;
    bottom: 0;
    left: calc(var(--_triangle-size) * -1);
    border-width: var(--_triangle-size) var(--_triangle-size) var(--_triangle-size) 0;
    border-color: transparent var(--_bg) transparent transparent;
  }
  /* 右上 */
.ts-tooltip:not(.ts-disabled).-top-right::before {
    bottom: calc(var(--_triangle-size) * -1);
    left: 10px; /* 端から少し寄せた位置に矢印を出す */
    border-width: var(--_triangle-size) var(--_triangle-size) 0 var(--_triangle-size);
    border-color: var(--_bg) transparent transparent transparent;
  }
  
  /* 左上 */
  .ts-tooltip:not(.ts-disabled).-top-left::before {
    bottom: calc(var(--_triangle-size) * -1);
    right: 10px;
    border-width: var(--_triangle-size) var(--_triangle-size) 0 var(--_triangle-size);
    border-color: var(--_bg) transparent transparent transparent;
  }
  
  /* 右下 */
  .ts-tooltip:not(.ts-disabled).-bottom-right::before {
    top: calc(var(--_triangle-size) * -1);
    left: 10px;
    border-width: 0 var(--_triangle-size) var(--_triangle-size) var(--_triangle-size);
    border-color: transparent transparent var(--_bg) transparent;
  }
  
  /* 左下 */
  .ts-tooltip:not(.ts-disabled).-bottom-left::before {
    top: calc(var(--_triangle-size) * -1);
    right: 10px;
    border-width: 0 var(--_triangle-size) var(--_triangle-size) var(--_triangle-size);
    border-color: transparent transparent var(--_bg) transparent;
  }
  
  
  /* 透明な要素を背面に敷くことでツールチップにマウスをのせやすくする */
  .ts-tooltip::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  /* ツールチップが上に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-top::after {
    top: 100%;
    left: 0;
    height: calc(var(--_triangle-size) + var(--_gap));
  }
  
  /* ツールチップが下に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-bottom::after {
    bottom: 100%;
    left: 0;
    height: calc(var(--_triangle-size) + var(--_gap));
  }
  
  /* ツールチップが左に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-left::after {
    top: 0;
    left: 100%;
    width: calc(var(--_triangle-size) + var(--_gap));
  }
  
  /* ツールチップが右に表示される場合 */
  .ts-tooltip:not(.ts-disabled).-right::after {
    top: 0;
    right: 100%;
    width: calc(var(--_triangle-size) + var(--_gap));
  }
  
  /*
    ツールチップがあることを、支援技術に伝えるための非表示テキスト
  */
  .ts-tooltip-body {
    display: block;
  }
  .ts-tooltip-body::before {
    content: "。ツールチップあり：";
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
  }
  
  /*
    対象の要素の周囲に表示されるツールチップを上下左右に配置するために親要素をrelativeにする
    ※親要素のpositionの値を自身で調整したい場合は不要
  */
  .ts-tooltip-container {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  
  /*
    ホバー、フォーカス、アクティブ時にツールチップを表示する
  */
  .ts-tooltip-target:hover + .ts-tooltip:not(.ts-disabled) {
    visibility: visible;
    opacity: 1;
  }
  
  /*
    no-preferenceはprefers-reduced-motionの設定を行なっていない場合
    アニメーションさせる
  */
  @media (prefers-reduced-motion: no-preference) {
    /* フェードアウト用の指定 */
    .ts-tooltip:not(.ts-disabled) {
      transition: visibility 0s linear 0.1s, opacity 0.1s, translate 0.1s;
    }
    /* フェードイン用の指定 */
    .ts-tooltip-target:hover + .ts-tooltip:not(.ts-disabled) {
      transition: visibility 0s linear 0s, opacity 0.3s, translate 0.3s;
    }
    /*
      ホバー・フォーカス・アクティブ時にツールチップをCSS Transitionさせるため
      ホバー・フォーカス・アクティブ時でないときに、初期位置を指定する
    */
    .ts-tooltip-target:not(:hover) + .ts-tooltip:not(.ts-disabled).-top {
      --_y: var(--_gap);
    }
    .ts-tooltip-target:not(:hover) + .ts-tooltip:not(.ts-disabled).-bottom   {
      --_y: calc( var(--_gap) * -1);
    }
    .ts-tooltip-target:not(:hover) + .ts-tooltip:not(.ts-disabled).-left {
      --_x: var(--_gap);
    }
    .ts-tooltip-target:not(:hover) + .ts-tooltip:not(.ts-disabled).-right {
      --_x: calc(var(--_gap) * -1);
    }  
  }

/* ------------------ 🔽🔽🔽 ツールチップ文章 始 🔽🔽🔽　------------------ */

.hover-tips-container {
  position: relative;
}
.hover-tips-wrapper {
  position: absolute;
  transition: opacity 0.15s;
  background-color: white;
  padding: 10px 20px;
  box-shadow: 0px 1px 3px 1px #555555, 0px 1px 2px 0px #555555;
  pointer-events: none;
  line-height: 0.8em;
}
.hover-tips-target span {
  color: gray;
}
.hover-tips-wrapper {
  opacity: 0;
}
.hover-tips-target:hover ~ .hover-tips-wrapper {
  opacity: 1;
}