/* 変数定義 */
:root {
  --default-padding: .5rem;
  --default-font-family: "メイリオ";
  --default-font-size: 14px;
  --default-font-color: black;
  --default-border-color: #ccc;
  --default-transition-duration: .2s;
  --header-height: 3rem;
  --header-title-font-size: 18px;
  --header-title-font-weight: bold;
  --header-font-color: black;
  --menu-width: 6rem;
  --menu-hover-background-color: #ccc;
  --main-background-color: #ffffff;
  --main-title-font-size: 180%;
  --main-title-font-weight: bold;
  --side-background-color: #ddd;
  --side-width: 10rem;
  --footer-height: 1.6rem;
  --footer-background-color: #000;
  --footer-font-color: #fff;
  --error-red-color: #d32f2f;
}

/* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ヘッダーのAngleTryと左側メニューボタンの色 */
.menu-color {
	color: #C10000;
}
/* 「MT System」の色 */
.menu-mtsystem {
	color: #037ACF;
}

.bold {
	font-weight: bold;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

/* メニューリンク用 */
a.menu {
  text-decoration: none;
}

/* コンテナ */
.container {
  /* 文字のデフォルト設定 */
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  color: var(--default-font-color);

  /* ヘッダー */
  .header {
  	z-index: 10;
    /* ヘッダーを画面上部固定位置に張り付ける */
    position: sticky;
    top: 0;
    /* 構成要素を横方向に並べる */
    display: flex;
    /* 高さ・背景色・文字色 */
    height: var(--header-height);
    background: linear-gradient(to right, #f2f2f2, #bfbfbf);
    color: var(--header-font-color);

    /* ハンバーガーメニュー */
    .hamburger-menu {
      display: flex;
      /* トランジション制御のためのチェックボックスは表示しない */
      #hamburger-checkbox {
        display: none;
      }
      /* ハンバーガーアイコン(三本線) */
      .hamburger-lines {
        /* 縦方向に中央寄せ */
        align-self: center;
        /* 横方向パディング */
        padding: 0 1rem;
        /* マウスを乗せた時にマウスカーソルをポインタ型にする */
        cursor: pointer;
        .hamburger-line {
          display: block;
          width: 25px;
          height: 3px;
          margin: 5px 0;
          background-color: black;
          border-radius: 1.5px;
          /* 開閉時にトランジションをかける */
          transition: var(--default-transition-duration);
        }
      }
      /* メニューを閉じた時のハンバーガーアイコン(×タイプ) */
      #hamburger-checkbox:checked ~ .hamburger-lines.cross {
        .hamburger-line {
          &:nth-child(1) { transform: translate(-1px, 3px) scale(80%) rotate(-35deg); }
          &:nth-child(2) { opacity: 0; }
          &:nth-child(3) { transform: translate(-1px, -3px) scale(80%) rotate(35deg); }
        }
      }
      /* メニューを閉じた時のハンバーガーアイコン(←タイプ) */
      #hamburger-checkbox:checked ~ .hamburger-lines.arrow {
        .hamburger-line {
          &:nth-child(1) { transform: rotate(-45deg) translate(-5px, 0px); width: 15px; }
          &:nth-child(2) { opacity: 1; }
          &:nth-child(3) { transform: rotate(45deg)  translate(-4px, 0px); width: 15px; }
        }
      }
    }
    /* ヘッダーロゴ */
    .header-logo {
      /* 縦横方向に中央寄せ */
      display: grid;
      justify-items: center;
      align-content: center;
      /* フォント */
      font-size: 170%;
    }
    /* ヘッダータイトル */
    .header-title {
      /* 縦・横方向に中央寄せ */
      display: grid;
      align-content: center;
	  text-align: center;
      /* パディング */
      padding: 0 var(--default-padding);
      /* フォント */
      font-weight: var(--header-title-font-weight);
      font-size: var(--header-title-font-size);
	  /* 行間隔 */
	  line-height: 1.1;
	  white-space: nowrap;
    }
	/* ヘッダーボタン */
	.header-button {
		/* 横幅最大 */
		flex: 1;
		/* 縦方向に中央寄せ */
		display: grid;
		align-content: center;
	}

    /* ユーザ名 */
    .header-user {
      min-width: 5em;
      /* 縦横方向に中央寄せ */
      display: grid;
      justify-items: center;
      align-content: center;
      /* パディング */
      padding: 0 var(--default-padding);
    }
    /* ログアウトメニュー */
    .header-menu {
      /* 縦横方向に中央寄せ */
      display: grid;
      justify-items: center;
      align-content: center;
      /* パディング */
      padding: 0 var(--default-padding);
    }
  }

  /* ボディ(左メニュー＋メインパネル＋サイドメニュー) */
  .body {
    /* 子要素を横方向に並べる */
    display: flex;

    /* 左メニュー */
    .menu {
      /* 閉じてる時の横幅は0 */
      width: 0;
      /* 高さは画面の高さからヘッダーとフッターを差し引いた高さ */
      height: calc(100vh - var(--header-height) - var(--footer-height));
      /* 表示しきれない領域はスクロールバー表示 */
      overflow-y: auto;
      /* 背景色 */
      background: linear-gradient(to right, #a7a7a7, #f2f2f2);
      /* メニュー開閉時のトランジション */
      transition: var(--default-transition-duration);
      ul {
        /* リストの・は表示しない */
        list-style: none;
        li {
          /* ボーダー線 */
          border-top: 1px solid var(--default-border-color);
          border-bottom: 1px solid var(--default-border-color);
          border-left: 1px solid var(--default-border-color);
          /* 上下のボーダーが重なると線が太くなってしまう問題の対処 */
          margin-bottom: -1px;
          /* マウスを乗せるとマウスカーソルをポインタ型にする */
          cursor: pointer;
          /* メニューアイテム */
          .menu-item {
			text-align: center;
			font-weight: bold;
			font-size: 120%;
            /* パディング */
            padding: .2rem;
            /* マウスを乗せた時 */
            &:not(.selected):hover {
              /* 背景色を変える */
              background-color: var(--menu-hover-background-color);
            }
			&.selected:hover{
			  background-color: rgb(230, 204, 204);
			}
		  }
		  
		  &:has(.selected){
		  	background: linear-gradient(to right, #c8acac, #fff3f3);
			.menu-color{
			  color: rgb(221, 0, 0);
			}
		  }
        }
      }
      /* 最上位以外のメニューに左インデントをつける */
      & > ul ul {
        margin-left: .7rem;
      }
    }

    /* メインパネル */
    .main   {
      /* 左右に最大表示する */
      flex: 1;
      /* 高さは画面の高さからヘッダーとフッターを差し引いた高さ */
      height: calc(100vh - var(--header-height) - var(--footer-height));
      /* 表示しきれない領域はスクロールバー表示 */
      overflow: auto;
      /* 背景色 */
      background-color: var(--main-background-color);
      /* パディング */
      padding: var(--default-padding);
      /* メインパネルタイトル */
      .main-title {
        font-size: var(--main-title-font-size);
        font-weight: var(--main-title-font-weight);
      }
    }

    /* サイドバー */
    .side   {
      /* 横幅 */
      width: var(--side-width);
      /* 高さは画面の高さからヘッダーとフッターを差し引いた高さ */
      height: calc(100vh - var(--header-height) - var(--footer-height));
      /* 表示しきれない領域はスクロールバー表示 */
      overflow: auto;
      /* 背景色 */
      background-color: var(--side-background-color);
      /* パディング */
      padding: var(--default-padding);
    }
  }

  /* フッター */
  .footer {
    /* フッターを画面上部固定位置に張り付ける */
    position: sticky;
    bottom: 0;
    /* 高さ固定 */
    height: var(--footer-height);
    /* 縦方向に中央寄せ */
    display: grid;
    align-content: center;
    /* 背景色 */
    background-color: var(--footer-background-color);
    /* パディング */
    padding: var(--default-padding);
    /* 文字色 */
    color: var(--footer-font-color);
  }
}

/* 開いたときの左メニュー */
.header:has(#hamburger-checkbox:checked) ~ .body .menu {
  /* 横幅をトランジションして開く */
  width: var(--menu-width);
}

/* 画面の横幅が狭いときはサイドバーを非表示にする */
@media (width < 768px) {
  .side {
    display: none;
  }
}

/* ボタン類 */
input.btn {
  background-color: white;
  font-weight: bold;
  color: black;
  border: 2px solid #2898e8;
  padding: 0px 20px 2px 20px;
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
input.btn:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.3);
}
input.btn-disabled {
  background-color: white;
  font-weight: bold;
  color: #7f7f7f;
  border: 2px solid rgb(192, 192, 192);
  padding: 0px 20px 2px 20px;
  font-size: 15px;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
input.margin-big {
  margin-right: 50px;
}
input.margin-small {
  margin-right: 20px;
}
/* エラーメッセージ */
.invalid-feedback {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--error-red-color); /* 赤系のエラー色 */
}

/* 必須入力（ラベルの後ろに赤いアスタリスクを表示） */
label.required::after {
  content: " *";
  color: var(--error-red-color);
  font-weight: bold;
}

/* 画面上部に表示するメッセージの定義 */
.alert {
  position: relative;
  padding: 2px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  list-style-type: none;   /* 先頭の「・」を消す */
  white-space: pre-line;   /* 改行を有効に */
}
/* 通常メッセージの定義 */
.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}
/* エラーメッセージの定義 */
.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
/* 警告メッセージの定義 */
.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}