@charset "utf-8";
    body {
      font-family: sans-serif;
      margin: 5px;
      padding: 5px;
      background-color: #f8f8f8;
      width:90%;
    }

    /*.container {
      max-width: 600px;
      margin: 2em auto;
      background: white;
      padding: 1.5em;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 8px;
      border-style: solid;
      border-width: 2px;
      border-color:green;
    }
    @media (max-width: 480px) {
      .container {
        margin: 1em;
        padding: 1em;
      }
    }*/

    /*.container2 {
      max-width: 600px;
      margin: 2em auto;
      background: white;
      padding: 1.5em;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 8px;
      margin-bottom:20px;
      padding-right:4px;
      padding-bottom:4px;
      border-right:15px solid #5BD1D7;
      border-bottom:15px solid #5BD1D7;
      border-radius:30px;
    }
    @media (max-width: 480px) {
      .container2 {
        margin: 1em;
        padding: 1em;
      }
    }
    */

    /*チャレンジャー用マイページ*/
    .container3 {
      max-width: 600px;
      margin: 2em auto;
      border-right:15px solid #922;
      border-bottom:15px solid #922;
      border-left:1px solid #922;
      border-top:1px solid #922;
      padding-left:20px;
      padding-right:20px;
      padding-bottom:4px;
    }
    @media (max-width: 720px) {
      .container3 {
      margin: 1em;
      /*padding: 1em;*/
      padding-left:10px;
      padding-right:10px;
      padding-bottom:4px;
      }
    }
    @media (max-width: 480px) {
      .container3 {
      margin: 1em auto;
      /*padding: 1em;*/
      padding-left:5px;
      padding-right:5px;
      padding-bottom:4px;
      }
    }


    /*チャレンジャー用マイページから遷移する各情報詳細画面*/
    .container4 {
      max-width: 600px;
      margin: 2em auto;
      border-style :none;
      padding-left:20px;
      padding-right:20px;
      padding-bottom:4px;
    }
    @media (max-width: 720px) {
      .container4 {
      margin: 1em;
      padding-left:10px;
      padding-right:10px;
      padding-bottom:4px;
      }
    }
    @media (max-width: 480px) {
      .container4 {
      margin: 1em auto;
      padding-left:5px;
      padding-right:5px;
      padding-bottom:4px;
      }
    }



    h1 {
      text-align: center;
      font-size: 1.5em;
    }
    @media (max-width: 480px) {
      h1 {
        font-size: 1.2em;
      }
    }

    label {
      display: block;
      margin-top: 1em;
      font-weight: bold;
    }

    /*input, select { width: 100%; padding: 8px; margin: 5px 0; }*/

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="login_password"],
    input[type="admin_password"],
    input[type="url"],
    textarea {
      width: 100%;
      padding: 0.6em;
      margin-top: 0.3em;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1em;
      box-sizing: border-box;
    }

    textarea {
      resize: vertical;
    }

    input[type="submit"],
    button {
      background-color: #922;
      color: white;
      padding: 0.6em 0.6em;
      border: none;
      border-radius: 4px;
      font-size: 0.8em;
      cursor: pointer;
      /*width: 100%;*/
      margin:5px;
      display: inline-block;
    }
    @media (max-width: 720px) {
      button {
      padding: 0.6em 0.6em;
      margin:0px;
      }
    }
    @media (max-width: 480px) {
      button {
        font-size: 1em;
      }
    }

    input[type="number"],
    input[type="date"]
    {
      padding: 0.6em;
      margin-top: 0.3em;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1em;
      box-sizing: border-box;
    }

    button.edit {
      margin-right: 0.5em;
      padding: 0.5em 1.0em;
      font-size: 0.8em;
    }
    @media (max-width: 720px) {
      button.edit {
        margin-right: 0.5em;
        padding: 0.5em 0.5em;
        font-size: 0.8em;
      }
    }

    button.backbtn {
      margin-right: 0.5em;
      padding: 0.5em 0.5em;
      font-size: 0.8em;
      background-color: rgb(255, 255, 255);
      border: solid  #922;
      color: rgb(47, 46, 46);
    }
 
    input[type="submit"]:hover,
    button:hover {
      background-color: rgb(95, 21, 21);
    }

    div.center{
      max-width: 600px;
      margin: 2em auto;
      background: white;
      padding: 1.5em;
    }

    /*dsh_header.php,dsh_header_mypage.php*/
    img.topimg {
      width: 100%;
      max-width: 600px;
    }

    /*dsh_header_admin.php*/
    img.topimg_admin{
      width: 100%;
      max-width: 600px;
      border-top: 5px solid #ff0000; /* 上の枠 */
      border-bottom: 5px solid #ff0000; /* 下の枠 */
      border-left: none; /* 左の枠なし */
      border-right: none; /* 右の枠なし */
    }

    /*dsh_header_pdf.php*/
    img.topimg_pdf {
      width: 300px;
    }

    /*エラー内容表示エリア*/
    .error {
      color: red;
      font-size: 0.9em;
      margin-top: 0.2em;
    }

    /* cssに画像を埋める場合 */
    .site-logo {
      background-image: url("../image/dsh3gyou.png");
      background-repeat: no-repeat;
      background-size: contain; /* or 'cover' or specific size */
      background-position: center;
      width: 600px;   /* 必要に応じてサイズを指定 */
      height: 160px;
      margin: 0 auto; /* 中央寄せ */
    }

    /* 必須 */
    .required::after {
      content: " *";
      color: red;
      vertical-align: middle;
    }

    /* 単票　項目 */
    .field { margin-bottom: 12px; }

    /* マイページの枠 */
    .header-box {
      border-bottom: 1px solid #ccc;
      padding: 0.5em;
      position: relative;
      background-color: #f9f9f9;
    }

    /* マイページのログアウト枠 */
    .logout-area {
      position: absolute;
      top: 1em;
      right: 1em;
    }

    /* マイページのログアウトボタン */
    .logout-button {
      padding: 0.5em 1em;
      background-color: #e53935;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    @media (max-width: 700px) {
      .logout-button {
        padding: 0.5em 0.5em;
      }
    }

    /* マイページの各枠内のデータ項目 */
    /* ■お知らせ/■マネージャー情報/■銀行口座情報　等 */
    .detailed_title{
      color: rgb(19, 19, 19);
      font-size: larger;
      font-weight: bold;
    }

    /* マイページの各枠内のデータ項目 */
    .user-info {
      margin-top: 1em;
    }

    /* マイページのボタン枠 */
    .detailed_area {
      position: absolute;
      top: 1em;
      right: 1em;
    }

    /* マイページの未登録時の文字色 */
    .text-danger {
        color: red;
        font-weight: bold;
    }
    /* マイページの登録済時の文字色 */
    .text-normal {
        color: black;
    }

    /* 利用規約、プライバシーポリシーのページ関連 */
    .pdf-container {
        width: 100%;
        height: 90vh;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }
    .btn-area {
        text-align: center;
        margin-top: 20px;
    }
    .btn-area form {
        display: inline-block;
    }
    .btn-area button {
        margin: 0px 10px; /* ボタン間のスペース */
        padding: 10px 20px;
        font-size: 1em;
        display: inline-block;
    }

    .form-box {
        border: 1px solid black; /* 黒い実線の枠 */
        padding: 16px;           /* 内側に余白 */
        width: fit-content;      /* 必要な分だけ幅を取る */
        margin-top: 20px;        /* 上に余白 */
    }

    .button-group form,
    .button-group button {
        display: inline-block;
        margin-right: 10px; /* ボタン間の余白 */
    }
    .button-area {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        align-items: center;
    }

    .button-area form {
        display: inline;
    }

    .button-area button {
        min-width: 80px;
        padding: 6px 12px;
    }

    .hashtagbutton{
        background-color: rgb(233, 133, 133);
        color: white;
        border: none;
        border-radius: 4px;
        font-size:small;
        margin:2px;
        display: inline-block;
        padding: 5px 8px;
    }

    .tagshow{
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        width: 100%;
    }
    
    .image-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 10px;
    }
    .image-gallery img {
      max-width: 200px;
      height: auto;
      border: 1px solid #ccc;
      padding: 5px;
      background: #f9f9f9;
    }

    /*チャレンジ用ページ*/
    /*.container5 {
      max-width: 600px;
      margin: 2em auto;
      padding-left:10px;
      padding-right:10px;
      padding-top:20px;
      padding-bottom:20px;
      color:white;
      background-color: #9c2424;
    }
    @media (max-width: 720px) {
      .container5 {
      margin: 1em;
      padding-left:10px;
      padding-right:10px;
      padding-bottom:4px;
      }
    }
    @media (max-width: 480px) {
      .container5 {
      margin: 1em auto;
      padding-left:5px;
      padding-right:5px;
      padding-bottom:4px;
      }
    }*/

    .container5 {
      max-width: 600px;
      margin: 2em auto;
      padding: 20px 10px;
      color: white;
      background-color: #9c2424;
      font-family: sans-serif;
    }

    .row {
      margin-bottom: 0.5em;
    }

    .label {
      font-weight: bold;
      font-size: 1em;
      margin-bottom: 0.2em;
    }

    .value {
      width: 90%;
      font-size: 1em;
      margin-left:20px;
      background-color:white;
      color: black;
      padding-left:10px;
      padding-right:10px;
    }

    .multiline {
      white-space: pre-wrap;
    }

    .challenge-image {
      max-width: 100%;
      height: auto;
      border: 2px solid #fff;
      margin-top: 0.5em;
    }

    .spacer {
      height: 1em;
    }


    /* ラベルと値を横並びに */
    .row-inline {
      margin-bottom: 0.5em;
      white-space: nowrap; /* 改行防止 */
    }

    .row-inline .label,
    .row-inline .value {
      display: inline;
    }



    /*チャレンジ用ページ ↑　*/


/*    body {
      font-family: sans-serif;
      text-align: center;
    }*/

    /*PDF表示ページ*/
    #pdf-canvas {
      max-width: 100%;
      border: 1px solid #ccc;
    }
    #nav-buttons {
      margin-top: 1em;
    }


    button.page {
      background-color: rgb(248, 245, 245);
      color: rgb(21, 21, 21);
      padding: 0.6em 0.6em;
      border: none;
      border-radius: 4px;
      font-size: 0.8em;
      cursor: pointer;
      /*width: 100%;*/
      margin:5px;
      display: inline-block;
    }
    @media (max-width: 720px) {
      button.page  {
      padding: 0.6em 0.6em;
      margin:0px;
      }
    }
    @media (max-width: 480px) {
      button.page {
        font-size: 1em;
      }
    }


  /*支援希望入力フォーム*/
  .support-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 1em;
  }

  .support-input-wrapper label {
    min-width: 80px;
  }

  .support-input-wrapper input {
    max-width: 150px;
  }

  @media (max-width: 600px) {
    .support-input-wrapper {
      flex-direction: column;
      align-items: flex-start;
    }

    .support-input-wrapper input {
      width: 100%;
    }

    .support-input-wrapper div {
      width: 100%;
    }
  }

  .hrdotted {
    width:90%;
    border-top: 0px dotted #ccc;
  }

/*画像の複数*/

  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .image-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    height: 300px; /* 高さを統一 */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    background: #f9f9f9;
    box-sizing: border-box;
  }
  .image-box img {
    max-height: 200px; /* 画像の最大高さを制限 */
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* トースト通知 */
  .toast {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #333;
    color: white;
    padding: 12px 20px;
    border-radius: 5px;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
  }


  /*画像アップロード調整*/
  /*.image-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
  }
  .image-box {
      width: 200px;
  }
  .image-box img {
      width: 100%;
      height: auto;
      display: block;
  }
  .image-box textarea {
      margin-top: 5px;
  } */
  

  /*本人確認書類の説明*/
  .responsive-table {
    width: 100%;
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px;
  }

  th, td {
    border: 1px solid #cccccc;
    padding: 8px;
    text-align: center;
  }

  th {
    background-color: #b91616;
  }

  caption {
    text-align: left;
    font-weight: bold;
    margin: 1em 0 0.5em;
  }

  @media (max-width: 600px) {
    table {
      font-size: 14px;
    }
    th, td {
      padding: 6px;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
  }

  th, td {
    border: 1px solid #22044d;
    padding: 0.5em;
    text-align: center;
  }

  @media screen and (max-width: 600px) {
    table {
      font-size: 0.9em;
    }
  }