/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ページ固有のbodyスタイル */
body {
  background: linear-gradient(135deg, #faf8f6 0%, #f5f3f0 50%, #ece8e3 100%);
  background-attachment: fixed;
  padding: 60px;
  line-height: 1.8;
  font-family: 'Shippori Mincho B1', serif;
  color: #4a4540;
  overflow-x: hidden;

}



  .green-button {
      background: rgba(90, 142, 111, 0.08);
      color: #5a8e6f;
      padding: 10px 18px;
      border-radius: 4px;
      border: 1px solid rgba(90, 142, 111, 0.25);
      text-decoration: none;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.3px;
      box-shadow: none;
      transition: all 0.3s ease;
    }
  
  .green-button:hover {
    background: rgba(90, 142, 111, 0.15);
    color: #4a7659;
    border-color: rgba(90, 142, 111, 0.4);
    box-shadow: inset 0 1px 3px rgba(90, 142, 111, 0.1);
  }
  
  .green-button:active {
    background: rgba(90, 142, 111, 0.25);
    box-shadow: inset 0 1px 2px rgba(90, 142, 111, 0.15);
  }

  .logout-button {
    background: rgba(30, 58, 138, 0.08);
    color: #1e3a8a;
    border-color: rgba(30, 58, 138, 0.25);
  }

  .logout-button:hover {
    background: rgba(30, 58, 138, 0.15);
    color: #1e2d7d;
    border-color: rgba(30, 58, 138, 0.4);
    box-shadow: inset 0 1px 3px rgba(30, 58, 138, 0.1);
  }

  .logout-button:active {
    background: rgba(30, 58, 138, 0.25);
    box-shadow: inset 0 1px 2px rgba(30, 58, 138, 0.15);
  }

  /* ヘッダースタイル */
  .header {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }

  /* ユーザー編集ページのCSS */
  .field{
    margin-bottom: 30px;
  }

  /* 必須マークスタイル */
  .required-mark {
    color: #dc3545;
    font-weight: bold;
    margin-left: 4px;
  }

@media screen and (max-width: 524px) {
  body {
    padding: 0 10px;
  }
}