@charset "utf-8";
/* ==========================
全体
========================== */
:root {
  --bs-body-line-height: 1.42857143;
}
html {
  font-size: 14px;
}
hr {
  --bs-border-width: 1px;
  border-top-color: #eee;
  margin: 20px 0;
  opacity: unset;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  line-height: 1.1;
}
ol, ul, dl {
  margin-bottom: 10px;
}
.information-message {
  position: fixed;
  z-index:2;
  width: 100%;
  overflow: hidden;
  display: none;
  margin: auto;
}
.information-message .alert {
  margin-bottom: 0;
  border-radius: 0px;
}
.information-message .btn-close {
  opacity: 1;
  font-size: 28px;
  padding: 10px;
  width: 15px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  /* 独自の✕マークを実装するため、Bootstrapの✕アイコンを削除 */
  background: none;
}
.information-message .btn-close:not(:hover) {
  color: inherit;
}
.information-message .btn-close:focus {
  box-shadow: none;
}
.information-message.position-top {
  top: 0%;
}
.information-message.position-middle {
  top: 50vh;
  transform: translateY(-50%);
}
.information-message.position-bottom {
  bottom: 0%;
}
.information-message .message-area {
  padding: 15px;
  padding-right: 0;
  display: inline-block;
  /* メッセージが半角英数字のみの場合に、幅を指定しないとoverflo-wrapが効かないためwidthを指定する。
  スクロールバーを除いた幅を100%とし、inline-block要素記述時の改行が原因で4px余分が存在するので
  ボタンサイズの35pxに対して少し余裕をもたせた40pxを引く。 */
  width: calc(100% - 40px);
}
.information-message .message-close-area {
  display: inline-block;
  vertical-align: top;
}
/*
通知メッセージの表示デフォルトアニメーション
（補足）IEではキーフレームのスタイルが未定義の場合に
アニメーションのイベントが発火しないためダミーのスタイルとしてopacityを定義する
*/
@keyframes defaultIn {
  100%{
    opacity: 1;
  }
}
/*
通知メッセージの非表示デフォルトアニメーション
（補足）IEではキーフレームのスタイルが未定義の場合に
アニメーションのイベントが発火しないためダミーのスタイルとしてopacityを定義する
*/
@keyframes defaultOut {
  100%{
    opacity: 0;
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes slideUpIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUpOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes slideDownIn {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDownOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
.vivr-start-animation .alert {
  animation-name: defaultIn;
  animation-duration: 1ms;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-end-animation .alert {
  animation-name: defaultOut;
  animation-duration: 1ms;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-start-animation.zoom .alert {
  animation-name: zoomIn;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-end-animation.zoom .alert {
  animation-name: zoomOut;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-start-animation.slide .alert {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-end-animation.slide .alert {
  animation-name: slideOut;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-start-animation.slideUp .alert {
  animation-name: slideUpIn;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-end-animation.slideUp .alert {
  animation-name: slideUpOut;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-start-animation.slideDown .alert {
  animation-name: slideDownIn;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
.vivr-end-animation.slideDown .alert {
  animation-name: slideDownOut;
  animation-duration: 1s;
  animation-iteration-count:1;
  animation-timing-function: linear;
}
html,
.sp-body {
	min-height: 100%;
}
.sp-body,
.sp-container {
	width: 100%;
	padding: 0;
  font-family: 'Avenir','Helvetica Neue','Helvetica','メイリオ', Meiryo,'Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','ＭＳ Ｐゴシック','MS PGothic';
	font-size: 12px;
	color: #111;
}
.sp-container {
	min-height: 100vh;
	margin: auto;
}
.sp-container.maintenance-message {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.sp-body * {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.sp-body a {
	text-decoration: none;
	color: #111;
}
.sp-body .popover,
.sp-body .tooltip {
  --bs-font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height: var(--bs-body-line-height);
}
.sp-body .popover {
  --bs-popover-font-size: 1rem;
  --bs-popover-body-padding-y: 9px;
}
.sp-body .form-control,
.sp-body .form-select {
  --bs-border-radius: 4px;
  --bs-border-color: #ccc;
  --bs-body-color: #555;
  --bs-secondary-color: #999;
  height: 34px;
  line-height: var(--bs-body-line-height);
}
.sp-body textarea.form-control {
  height: auto;
}
.sp-body .form-select {
  --bs-form-select-bg-img: none;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
@media screen and (min-width: 835px) {
	.sp-container, .information-message {
		max-width: 834px;
	}
}
@media screen and (min-width: 1280px) {
	.sp-container, .information-message {
		max-width: 650px;
	}
}
/* ==========================
コンテンツ部分共通設定
========================== */
.sp-header,
.sp-wrap-main,
.sp-main,
.sp-submain,
.sp-footer,
.sp-footer-wrap-title,
.sp-footer-inner {
	position: relative;
	width: 100%;
}
.sp-main,
.sp-footer-inner {
	padding: 5px;
}
/* 色指定 */
.sp-bg-glay1 {
	background-color: #eee;
}
.sp-bg-glay2 {
	background-color: #aaa;
}
.sp-bdt-white {
	border-top: 1px solid #fff;
}
/* h要素 */
.sp-body h1,
.sp-body h2,
.sp-body h3,
.sp-body h4,
.sp-body h5,
.sp-body h6 {
	margin: 0;
	font-size: initial;
}
/* p要素 */
.sp-body p {
	margin: 0;
}
/* ボタン関係[トップページ以外] */
.spbtn {
	display: block;
	text-align: center;
	width: 100%;
	margin: 0;
	border-radius: 4px;
}
/* tinymce上で両端揃えを選択した場合に適用 */
.tinymce-align-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
/* ==========================
========================== */