.button1 {
	width: 200px;
	text-align: center;
	background-color: #ccccff;
	font-size: 20px;
	padding: 20px 50px;
	border-radius: 40px;
	cursor: pointer;
}

.button1:hover {
	background-color: #d3d3ff;
}

body {
    font-family: "font7";
}

ol, li { list-style-type: decimal; }

.paginate li {
	display: inline;
	padding: 3px;
	color: #444;
}

.paginate a {
	color: #00f;
	text-decoration: none;
	background-color: #fff;
	border: solid 2px;
	border-color: #bbf;
	border-radius: 10px;
}

.active {

	background-color: #bbf;
	border-radius: 10px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ＰＣ画面用設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (min-width: 1024px) { /*ウィンドウ幅が767px以上の場合に適用*/
	.main{
		width : 1000px;
		margin: 0 auto;
	}

  .footermenu{
    width: 1000px;
  }

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝font-size設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-font1 {
		font-size: 3vw;
	}

	.r-font2 {
		font-size: 2vw;
	}

	.r-font3 {
		font-size: 3vw;
	}

	.r-font4 {
		font-size: 2vw;
	}

	.r-font5 {
		font-size: 1.5vw;
	}

	.r-font6 {
		font-size: 2.7vw;
	}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝width設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-pb1 {
		padding-bottom: 40%;
	}

	.rmt1 {
		margin-top: 30px;
	}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝width設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-width1 {
		width: 30%;
	}


	.r-width2 {
		width: 65%;
		margin: auto;
	}

	.r-width3 {
		width: 58%;
	}

	.r-width4 {
		width: 80%;
	}

	.r-width5 {
		width: 60%;
	}

	.r-width6 {
		width: 22%;
	}

	.r-width7 {
		width: 85%;
	}

	.r-width8 {
		width: 70%;
	}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝position設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.relat1 {
		width: 100;
		height: 0;
		padding-top: calc(1082 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background: url(../img/pc/1c.jpg) center center / cover no-repeat;
	}

  .absol1a {
  	top: 2%;
  	left: 31%;
  	font-size: 5.8vw;
  	color: #f90;
  }

  .absol1 {
  	top: 15%;
  	left: 47%;
  	font-size: 6vw;
  	color: #d00;
  }

  .absol2 {
  	top: 28%;
  	left: 25%;
  	font-size: 6.5vw;
  	color: #d00;
  }

  .absol3 {
  	top: 41%;
  	left: 37%;
  	font-size: 8.6vw;
  	/*color: #d00;*/
  	color: #000;
  }

  .absol4 {
  	top: 89%;
  	left: 20%;
  	font-size: 2vw;
  	/*letter-spacing: 0.08em;*/
  	color: #fff;
  }

  .absol5 {
  	width: 30%;
  	height: 10%;
  	top: 0;
  	left: -2%;
		background: url(../img/3.png) bottom left / 100% 50% no-repeat;
  }

  .absol6 {
  	width: 22%;
  	height: 0;
  	top: 42%;
  	left: 5%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/4.png) center center / cover no-repeat;*/
  }

  .absol7 {
  	width: 22%;
  	height: 0;
  	top: 70%;
  	left: 5%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/5.png) center center / cover no-repeat;*/
  }

  .absol8 {
  	width: 22%;
  	height: 0;
  	top: 58%;
  	left: 28%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/6.png) center center / cover no-repeat;*/
  }

  .absol9 {
  	width: 47%;
  	height: 0;
  	top: 47%;
  	right: 0;
  }

  .absol10 {
  	width: 23%;
  	top: 85%;
  	right: 1%;
  }

  .absol11 {
  	width: 12%;
  	top: 0px;
  	right: 1%;
  }

  .absol12 {
  	width: 20%;
  	bottom: 10px;
  	left: -5%;
  }

	.foot-mb {
	  margin-bottom: 50px;	
	}
}

@media screen and (max-width: 1024px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
	.main{
		width : 100%;
	}

  .footermenu{
    width: 100%;
  }

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝font-size設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-font1 {
		font-size: 3vw;
	}

	.r-font2 {
		font-size: 2vw;
	}

	.r-font3 {
		font-size: 3vw;
	}

	.r-font4 {
		font-size: 3vw;
	}

	.r-font5 {
		font-size: 2vw;
	}

	.r-font6 {
		font-size: 2.7vw;
	}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝width設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-pb1 {
		padding-bottom: 40%;
	}

	.rmt1 {
		margin-top: 30px;
	}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝width設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-width1 {
		width: 30%;
	}

	.r-width2 {
		width: 65%;
		margin: auto;
	}

	.r-width3 {
		width: 57%;
	}

	.r-width4 {
		width: 80%;
	}

	.r-width5 {
		width: 60%;
	}

	.r-width6 {
		width: 22%;
	}

	.r-width7 {
		width: 85%;
	}

	.r-width8 {
		width: 70%;
	}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝position設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.relat1 {
		width: 100;
		height: 0;
		padding-top: calc(1082 / 1920 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background: url(../img/pc/1c.jpg) center center / cover no-repeat;
	}

  .absol1a {
  	top: 2%;
  	left: 31%;
  	font-size: 5.8vw;
  	color: #f90;
  }

  .absol1 {
  	top: 15%;
  	left: 47%;
  	font-size: 6vw;
  	color: #d00;
  }

  .absol2 {
  	top: 28%;
  	left: 25%;
  	font-size: 6.5vw;
  	color: #d00;
  }

  .absol3 {
  	top: 41%;
  	left: 37%;
  	font-size: 8.6vw;
  	/*color: #d00;*/
  	color: #000;
  }

  .absol4 {
  	top: 89%;
  	left: 20%;
  	font-size: 2vw;
  	/*letter-spacing: 0.08em;*/
  	color: #fff;
  }

  .absol5 {
  	width: 30%;
  	height: 10%;
  	top: 2%;
  	left: -2%;
		background: url(../img/3.png) bottom left / 100% 50% no-repeat;
  }

  .absol6 {
  	width: 22%;
  	height: 0;
  	top: 42%;
  	left: 5%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/4.png) center center / cover no-repeat;*/
  }

  .absol7 {
  	width: 22%;
  	height: 0;
  	top: 70%;
  	left: 5%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/5.png) center center / cover no-repeat;*/
  }

  .absol8 {
  	width: 22%;
  	height: 0;
  	top: 58%;
  	left: 28%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/6.png) center center / cover no-repeat;*/
  }

  .absol9 {
  	width: 47%;
  	height: 0;
  	top: 47%;
  	right: 0;
  }

  .absol10 {
  	width: 23%;
  	top: 85%;
  	right: 1%;
  }

  .absol11 {
  	width: 15%;
  	top: 0px;
  	right: 1%;
  }

  .absol12 {
  	width: 25%;
  	bottom: 10px;
  	left: -5%;
  }

	.foot-mb {
	  margin-bottom: 50px;	
	}
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
	.main{
		width : 100%;
	}

  .footermenu{
    width: 100%;
  }

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝font-size設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-font1 {
		font-size: 7vw;
	}

	.r-font2 {
		font-size: 5vw;
	}

	.r-font3 {
		font-size: 6vw;
	}

	.r-font4 {
		font-size: 4vw;
	}

	.r-font5 {
		font-size: 3.5vw;
	}

	.r-font6 {
		font-size: 2.7vw;
	}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝width設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-pb1 {
		padding-bottom: 60%;
	}

	.rmt1 {
		margin-top: 0;
	}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝width設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.r-width1 {
		width: 100%;
	}

	.r-width2 {
		width: 100%;
	}

	.r-width3 {
		width: 100%;
	}

	.r-width4 {
		width: 70%;
	}

	.r-width5 {
		width: 80%;
	}

	.r-width6 {
		width: 30%;
	}

	.r-width7 {
		width: 100%;
	}

	.r-width8 {
		width: 90%;
	}

	.foot-mb {
	  margin-bottom: calc(536 / 1914 * 100% + 100px);	
	}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝position設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.relat1 {
		width: 100;
		height: 0;
		padding-top: calc(692 / 835 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background: url(../img/1b.jpg) center center / cover no-repeat;
	}

  .absol1a {
  	top: 2%;
  	left: 24%;
  	font-size: 7.2vw;
  	color: #f90;
  }

  .absol1 {
  	top: 14%;
  	left: 44%;
  	font-size: 7.5vw;
  	color: #d00;
  }

  .absol2 {
  	top: 26%;
  	left: 18%;
  	font-size: 8vw;
  	color: #d00;
  }

  .absol3 {
  	top: 37%;
  	left: 34%;
  	font-size: 10.7vw;
  	/*color: #d00;*/
  	color: #000;
  }

  .absol4 {
  	top: 89%;
  	left: 8%;
  	font-size: 3vw;
  	/*letter-spacing: 0.08em;*/
  	color: #fff;
  }

  .absol5 {
  	width: 65%;
  	height: 10%;
  	top: 0;
  	left: -2%;
		background: url(../img/3.png) bottom left / 100% 50% no-repeat;
  }

  .absol5b {
  	width: 50%;
  	height: 30%;
  	bottom: 30%;
  	left: -8%;
  }

  .absol5c {
  	width: 90%;
  	height: 30%;
  	bottom: 40%;
  	left: -8%;
  }

  .absol6 {
  	width: 29%;
  	height: 0;
  	top: 70%;
  	left: 5%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/4.png) center center / cover no-repeat;*/
  }

  .absol7 {
  	width: 29%;
  	height: 0;
  	top: 70%;
  	left: 29%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/5.png) center center / cover no-repeat;*/
  }

  .absol8 {
  	width: 29%;
  	height: 0;
  	top: 85%;
  	left: 15%;
/*  	padding-top: calc(343 / 342 * 20%);
		background: url(../img/6.png) center center / cover no-repeat;*/
  }

  .absol9 {
  	width: 62%;
  	height: 0;
  	top: 71%;
  	left: 48%;
  }

  .absol10 {
  	width: 23%;
  	top: 85%;
  	right: 1%;
  }

  .absol11 {
  	width: 15%;
  	top: 0px;
  	right: 1%;
  }

  .absol12 {
  	width: 25%;
  	bottom: 10px;
  	left: -5%;
  }
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝パディング設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.anchor {
	padding-top: 70px;
	margin-top: -70px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝バックカラー＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.bgc1 {
	background-color: #ddd;
}

.bgc2 {
	background-color: #eee;
}

.bgc3 {
	background-color: #f3f3f3;
}

.bgc4 {
	/*黄土色*/
	background-color: #D2B48C;
}

.bgc5 {
	/*オレンジ*/
	background-color: #FF8C00;
}

.bgc6 {
	/*薄いオレンジ　ボタンに使用*/
	background-color: #FFdCcc;
	border: 0 solid;
	color: #d77;
	cursor : pointer;
	border-radius: 8px;
}

.bgc6:hover {
	background-color: #FFd0c0;
}

.bgc6:active {
	background-color: #FFe5d5;
}

.bgc6b {
	/*もっと薄いオレンジ*/
	background-color: #FFF0ee;
}

.bgc7 {
	/*問い合わせ用黄色*/
	background-color: #faf9cf;
}

.bgc8 {
	/*サービス用薄い黄色*/
	background-color: #FAEBD7;
}

.bgc9 {
	/*細胞を元気にする色*/
	background-color: #dd6655;
}


.color1 {
	color: #cc0;
}
.color2 {
	/*グレー*/
	color: #aaa;
}
.color3 {
	/*薄い黄土*/
	color: #BDB76B;
}
.color4 {
	/*白*/
	color: #fff;
}
.color5 {
	/*メニューバーの電話番号*/
	color: #ec707b;
}
.color6 {
	/*テキスト濃い茶*/
	color: #7f4f21;
}
.color7 {
	/*テキスト薄い茶*/
	color: #6f4c22;
}
.color8 {
	/*テキスト赤黒*/
	color: #882222;
}
.color9 {
	/*未病下部テキスト*/
	color: #d65;
}
.color10 {
	/*濃いグレー*/
	color: #eee;
}

.aColor1 {
	color: #77e;
}

.aColor1 a {
	color: #77e;
	text-decoration: underline;
}

.aColor1 a:hover {
	text-decoration: none;
}

.formColor1 {
	background-color: #fed;
	border: 2px solid #dca;
	outline: 0px solid #dca;
	border-radius: 8px;
}

.formColor1:focus {
	border: 2px solid #ffa5a0;
	outline: 0 solid #fff3f3;
}

input::placeholder {
	font-size: 13px;
  color: #aaa;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝ライン設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*アンダーライン中太黄土色*/
.uline1 {
	border-bottom: solid 5px #3c7;
	margin-bottom: 10px;
}

/*トップライン細グレー*/
.tline1 {
	border-top: solid 2px #ddd;
}

/*アンダーライン細グレー*/
.uline2 {
	border-bottom: solid 2px #ddd;
}

/*アンダーライン中太い黄土*/
.uline3 {
	border-bottom: solid 3px #990;
}

/*アンダーライン極太オレンジ*/
.uline4 {
	background:linear-gradient(transparent 50%, #fe8 0%);
	/*border-bottom: solid 20px #da8;*/
}

.uline5 {
	/*アンダーライン極太オレンジ*/
	/*レスポンシブ対応*/
	/*border-bottom: solid 20px #da8;*/
}

.uline7 {
/*アンダーライン中太赤*/
	border-bottom: solid 6px #f00;
}

/*アンダーライン太赤*/
.uline8 {
	background:linear-gradient(transparent 90%, #f00 0%);
}

/*レフトライン中太い黄土*/
.lline1 {
	border-left: solid 5px #990;
}

/*外枠細線グレー*/
.line1 {
	border: solid 1px #eee;
}

/*外枠朱色赤角丸*/
.line2 {
	border: solid 2px #f00;
	border-radius: 10px;
}

.line3 {
	/*申し込みフォームへのリンク*/
	border: solid 8px #FF8C00;
}

.noline {
	border: 0 solid #990;
}

.focusline:focus {
	outline: 2px solid #f60;
}

.footermenu{
  margin-bottom: 0px;
    position: fixed;/*←絶対位置*/
    bottom: 0; /*下に固定*/
  z-index: 99;
}

.p-stat {
	position: initial;
}


.menu-bana {
  cursor : pointer;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ロード中画面＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.loader {
	width: 100%;
	margin: auto;
	height: 2000px;
	overflow: hidden;
	text-align: center;
	background-color: #f90;
}

.load-wait {
	display: none;
}


.sk-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



#delete {
	cursor: pointer;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝モーダル＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 2rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}

.modal-dialog-scrollable {
    display: flex;
    max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
    display: block;
    height: calc(100vh - 1rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
    content: none;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #00000094;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: 0.5;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.6;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
/*    border-top: 1px solid #dee2e6;*/
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer>* {
    margin: 0.25rem;
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

.modal-dialog2 {
    max-width: 80%;
    margin: 1.75rem auto;
}
@media (min-width: 400px) {

  }

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem);
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem);
    }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

    .modal-dialog-centered::before {
        height: calc(100vh - 3.5rem);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
    }

    .modal-sm {
        max-width: 300px;
    }
}

@media (min-width: 992px) {

    .modal-lg,
    .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {

    .modal-xl {
        max-width: 1140px;
    }
}