/*
 * sx_base: 基本タグ
 *
 ******************************************************************************/

/*  html: HTML  */
/*----------------------------------------------------------------------------*/
html {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0;

  line-height: normal;

  /* テキスト範囲選択可能とするため、以下をコメントアウトする
  /* -webkit-touch-callout: none; */  /* iOS Safari */
  /*   -webkit-user-select: none; */  /* Safari */
  /*    -khtml-user-select: none; */  /* Konqueror HTML */
  /*      -moz-user-select: none; */  /* Firefox */
  /*       -ms-user-select: none; */  /* Internet Explorer/Edge */
  /*           user-select: none; */  /* Non-prefixed version, currently */
  /*                              */  /*   supported by Chrome and Opera */
}

/*  body: ボディ  */
/*----------------------------------------------------------------------------*/
body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0;

  line-height: normal;

  /* font: フォント
   *   ヒラギノ: Max OS(Safari, Opera, Firefox, Chrome)
   *   メイリオ: Windows OS(IE11)
   *   ゴシック: Windows OS(Opera, Firefox, Chrome)
   *--------------------------------------------------------*/
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", arial, helvetica, sans-serif;
  color: #111111;
}

body.edit{
	background-color: #4b300222;
}

/* label: ラベル  */
/*----------------------------------------------------------------------------*/
label {
  margin: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*  outline: アウトライン  */
/*----------------------------------------------------------------------------*/
a,
input,
select,
textarea,
button {
  outline: none;
}

/*  input: 入力  */
/*----------------------------------------------------------------------------*/
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s !important;
}
input[type=date] {
  background-color: #FFFFFF;
}
input[type=text]:-webkit-autofill::first-line{
  font-family: snas-serif;
  font-size: 2rem;
}
/*  select: セレクトボックス  */
/*----------------------------------------------------------------------------*/
select {
  cursor: pointer;

  background-color: #FFFFFF;

  /* -webkit-appearance: none; */  /* ベンダープレフィックス(Google Chrome、Safari用) */
  /*    -moz-appearance: none; */  /* ベンダープレフィックス(Firefox用) */
  /*         appearance: none; */  /* 標準のスタイルを無効にする */
}

/* select要素のデザインを無効にする（IE用） */
/*
::-ms-expand {
  display: none;
}
*/
input:disabled,
select:disabled,
textarea:disabled {
	background-color: #EEEEEE !important;
}

/*  button: ボタン  */
/*----------------------------------------------------------------------------*/
button {
  text-decoration: none;
  cursor: pointer;
}

/*  svg: Scalable Vector Graphics  */
/*----------------------------------------------------------------------------*/
svg {
  margin: auto;
  background-color: transparent;
}

/*  オーバーフロー  */
/*----------------------------------------------------------------------------*/
.sx-overflow {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sx-overflow-x {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
  overflow: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.sx-overflow-y {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sx-overflow-y-mod {
  height: inherit;
  min-height: 50vh;
  max-height: 75vh;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sx-overflow-hidden {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
.sx-overflow-all {
  height: inherit;
  min-height: inherit;
  max-height: inherit;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: inline-block;
  table-layout: fixed;
  height: 100%;
}

/* 処理中表示
 *----------------------------------------------------------------------------*/
.sx-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  background-color: transparent;
  cursor: wait;
}
.sx-spinner {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.spinner {
  display: none;
  width: 5rem;
  height: 5rem;
  border: 0.5rem #2e93e6 solid;
  border-top: 0.5rem #DDEEFF solid;
  border-top: 0.5rem transparent solid;
  border-radius: 50%;
  animation: sp-anime 1s infinite linear;
}
@keyframes sp-anime {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(239deg);
  }
  100% {
    transform: rotate(359deg);
  }
}