/* bootstrap.cssのスタイルを上書きするためのスタイル定義 */

/* Webフォントのimport */
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Otomanopee+One&display=swap');

:root {
  /***** 色関係 *****/
  /* テーマカラー */
  --theme-color: #3A0088;
  --theme-color-transparent: rgb(58, 0, 136, 0.5);
  /* サブカラー */
  --sub-color1: #0076c0;
  --sub-color2: #333231;
  --sub-color3: #141413;
  --sub-color4: #cce6ff;
  --info-color: #add8e6;
  --warning-color: #ff8c00;
  --error-color: #ff4500;
  --action-color: #ffbd39;
  --action-color-transparent: rgb(255, 189, 57, 0.5);
  /* ヘッダー・サイドメニューの文字色 */
  --aside-link-string-color: white;
  /* 画面表示メッセージの文字色 */
  --page-message-string-color: black;
  /* 画面表示メッセージの文字色 */
  --page-error-message-string-color: red;
  /***** 配置関係 *****/
  /* ページ全体のオフセット値（左側） */
  --page-offset-left: 10px;
  /* ページ全体のオフセット値（右側） */
  --page-offset-right: 10px;
  /***** 要素のサイズ関係 *****/
  /* ヘッダーの高さ */
  --header-height: 50px;
  /* サイトタイトル背景の高さ */
  --site-title-height: 210px;
}

body {
  padding-top: 50px;
}

.max-h-32px {
  max-height: 32px;
}

.max-h-40px {
  max-height: 45px;
}

.max-h-45px {
  max-height: 45px;
}

.bg-theme-color {
  background-color: var(--theme-color);
}

.bg-sub-color1 {
  background-color: var(--sub-color1);
}

.bg-sub-color2 {
  background-color: var(--sub-color2);
}

.bg-sub-color3 {
  background-color: var(--sub-color3);
}

.bg-sub-color4 {
  background-color: var(--sub-color4);
}

.bg-info-color {
  background-color: var(--info-color);
}

.bg-warning-color {
  background-color: var(--warning-color);
}

.bg-error-color {
  background-color: var(--error-color);
}

.jumbotron {
  background-image: url("../images/big-bg.jpg");
  background-size: cover;
  background-position: center 50%;
  font-family: 'Fugaz One', cursive;
}

a.disabled {
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

/* --- リンク文字列の装飾を消す ------------------- */

.non-text-underline {
  text-decoration: none;
}

/* --- リンク文字列のマウスホバー時に下線を表示する -- */
.text-underline-hover {
  text-decoration: none;
}

.text-underline-hover:hover {
  text-decoration: underline;
  cursor: pointer;
}

.w-15 {
  width: 15% !important;
}


/*
======================================================
Bootstrap5の定義の上書き
======================================================
*/

.btn-primary {
  color: #fff;
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--theme-color-transparent);
  border-color: var(--theme-color-transparent);
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
  color: #fff;
  background-color: var(--theme-color-transparent);
  border-color: var(--theme-color-transparent);
  box-shadow: 0 0 0 0.25rem var(--theme-color-transparent);
}

.btn-check:checked+.btn-primary, .btn-check:active+.btn-primary, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--theme-color-transparent);
  border-color: var(--theme-color-transparent);
}

.btn-check:checked+.btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background-color: var(--theme-color-transparent);
  border-color: var(--theme-color-transparent);
}

.btn-action {
  color: #fff;
  background-color: var(--action-color);
  border-color: var(--action-color);
}

.btn-action:hover {
  color: #fff;
  background-color: var(--action-color-transparent);
  border-color: var(--action-color-transparent);
}

.btn-check:focus+.btn-action, .btn-action:focus {
  color: #fff;
  background-color: var(--action-color-transparent);
  border-color: var(--action-color-transparent);
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-check:checked+.btn-action, .btn-check:active+.btn-action, .btn-action:active, .btn-action.active, .show>.btn-action.dropdown-toggle {
  color: #fff;
  background-color: var(--action-color-transparent);
  border-color: var(--action-color-transparent);
}

.btn-check:checked+.btn-action:focus, .btn-check:active+.btn-action:focus, .btn-action:active:focus, .btn-action.active:focus, .show>.btn-action.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-action:disabled, .btn-action.disabled {
  color: #fff;
  background-color: var(--action-color-transparent);
  border-color: var(--action-color-transparent);
}

.btn-ss, .btn-group-ss>.btn {
  padding: 0.05rem 0.4rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

/*
======================================================
特定の共通パーツに対するカスタムスタイル
======================================================
*/

/* --- 二重下線を引く----------------------- */
.double-border-line {
  border-bottom: double 3px;
}

/* --- スペーサー ------------------------- */
.dummy-white-space {
  margin-top: 50vh;
}

.dummy-white-space-sm {
  margin-top: 10vh;
}

/* --- ログイン画面の背景 ------------------- */

.blur-bg {
  width: 100%;
  background: url("../images/login-page-img01.jpg") no-repeat center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

/* --- ログイン画面のフォーム ------------------- */

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- 「anyたいむ」タイトル用- --------------- */
.any-time-blog {
  font-family: 'Otomanopee One', sans-serif;
}

.any-time-blog .text-red {
  color: red;
}

.any-time-blog .text-blue {
  color: blue;
}

/* --- 機能タイトルに下線をつける ------------------- */

.function-title {
  border-bottom: double 3px;
}

/* --- テーブル上の無効行をグレーアウトする ----------- */
.disabled-row {
  background-color: #cccccc;
}

/* --- 入力必須項目のlabelにアスタリスクをつける ------------------- */

.input-required::after {
  content: "*";
  color: red;
}

/* --- Markdownエディタパーツ ------------------- */

.EasyMDEContainer .CodeMirror {
  height: 45vh;
}

/* --- 技術ブログ記事更新画面 erasymde.min.cssへの上書き ------------------- */

.editor-preview {
  background: #fdfdfd;
}

.editor-preview img {
  max-width: 100%;
}

.EasyMDEContainer .CodeMirror {
  padding: 0;
  font-size: smaller;
}

.editor-toolbar {
  padding: 2px 10px;
}

.editor-statusbar {
  padding: 0px;
}

/* --- 記事本文に対するスタイルの上書き --------------------- */

.markdown-body img {
  max-width: 80%;
  max-height: 500px;
}

/* --- ブログ記事閲覧画面のコメント欄のスタイル -------------  */
.blogComments pre {
  white-space: pre-wrap;
}

/* --- アイコン用スタイル ---------------------------------*/
/* 親要素の高さ・幅に収まるようにサイジング */
.paperclip-icon {
  width: 1.6rem;
  vertical-align: bottom;
}

/*
======================================================
カレンダー用コンテナ：
  新着情報・メニュー用コンテナとカレンダー用コンテナで横幅2:1
======================================================
*/

.calendar-container {
  margin-top: 10px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar-container .calendarFrame {
  max-width: 100%;
  margin: 0 auto
}

.calendar-container .calendarInformation {
  margin-top: 2%;
  margin-left: 15px;
}

.calendar-container .calendarInformationFrame {
  width: 100%;
}

.calendar-container .calendarInformationContents {
  display: flex;
  margin-left: 10%;
}

.calendar-container .calendarInformationDate {
  width: 30%
}

.calendar-container .container-calendar {
  background: #ffffff;
  padding: 15px;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
}

.calendar-container .button-container-calendar button {
  cursor: pointer;
  display: inline-block;
  zoom: 1;
  /* background: #00a2b7; */
  color: #fff;
  /* border: 1px solid #0aa2b5; */
  border-radius: 4px;
  padding: 5px 10px;
}

.calendar-container .table-calendar {
  border-collapse: collapse;
  width: 100%;
}

.calendar-container .table-calendar th, .table-calendar td {
  padding: 5px;
  border: 1px solid #e2e2e2;
  text-align: center;
  vertical-align: top;
}

.calendar-container .date-picker.selected {
  font-weight: bold;
  color: #fff;
  background: #cc0000;
}

/* 日曜 */

.calendar-container .date-picker:nth-child(1) {
  background-color: #ff00d426;
}

/* 土曜 */

.calendar-container .date-picker:nth-child(7) {
  background-color: #ff00d426;
}

.calendar-container .date-picker.other-month {
  color: lightgray;
}


.calendar-container .monthAndYear {
  text-align: center;
  margin-top: 0;
}

.calendar-container .button-container-calendar {
  position: relative;
  margin-bottom: 1em;
  overflow: hidden;
  clear: both;
  display: flex;
  justify-content: space-between;
}

#previous {
  float: left;
}

#next {
  float: right;
}

.calendar-container .footer-container-calendar {
  margin-top: 1em;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.calendar-container .footer-container-calendar select {
  cursor: pointer;
  zoom: 1;
  background: #ffffff;
  color: #454545;
  border: 1px solid #bfc5c5;
  border-radius: 3px;
  padding: 5px 1em;
}

.calendar-container .eventFrame {
  display: flex;
  height: 20px
}

.calendar-container .monthAndYear {
  font-size: x-large;
  margin-bottom: 0px;
}

.calendar-container .dialogElement {
  width: 100%;
}

/* 指定休日セルの背景色を薄い赤に変える */
.jf-holiday {
  background-color: #ff00d426;
}

/* イベントリストテーブル用 */
#eventListTable {
  margin: 0 auto;
  width: 300px;
  text-align: center;
  table-layout: fixed;
  border-collapse: collapse;
}

/* イベントリストのイベント名の欄を左揃えにする */
.left-align {
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* カレンダーの下に表示する薄い赤の箱 */
.holiday-color-box {
    display: inline-block;
    width: 17px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
    background-color:#ff00d426;
  }

/* カレンダーの下に表示するイベントマーク一覧 */
.type-mark-list{
  font-size: 0.8em;
    margin-top: 10px;
    color: #444;
}

/* カレンダーの横幅を固定する */
.day-header {
  width: 40px;
  text-align: center;   
  padding: 8px 0;       
  box-sizing: border-box; 
}

/* カレンダーの縦幅を固定 */
.calendar-container .date-picker {
  height: 65px;             
  vertical-align: top;      
  padding: 4px;              
  box-sizing: border-box;   
}

/* カレンダーの下に表示するリンクの中央揃え */
.link-center{
  text-align: center; 
}

.calendar-container .mark-size {
  font-size: 10px;  
}