@charset "utf-8";
/* modal------------------------------------------------------------- */
.modal_btn{display: inline-block; padding: 0.0em 1.5em;text-decoration:none;color:#0bac9e;border: solid 2px #0bac9e;border-radius:3px; transition: .4s;margin:2px;width:5.0em;text-indent:0.1em;text-align: center;}
.modal_btn:hover {background: #0bac9e;color: white;}
.modal_trigger {}

@-webkit-keyframes slideRightBg {
  0% {
    opacity: 0;
    left: -50%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes slideRightBg {
  0% {
    opacity: 0;
    left: -50%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.modal_box {
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.modal_bg {  background-color: rgba(30, 30, 30, 0.9);
  height: 100%;
  width: 100%;
  }

.modal_inner {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 40px;
  width:70%;
  max-width: 900px;
height : 50%;   /* お好みの高さで固定 */
overflow : auto;    /* 状況に応じて縦スクロールバーが出現 */
  background-color: #fff;
   -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.modal_close {
  cursor: pointer;
  position: absolute;
  top: 0.3rem;
  right: 1rem;
  font-size: 2rem;
}

@media screen and (max-width: 480px) {
  .modal_trigger {margin-left: 0;}

  .modal_close {top:10px;font-size: 2.2rem;}
}
 
@media screen and (max-width: 769px) {
 /*  ウィンドウサイズ769px以下の時のスタイル  */
.modal_close {width:40px;line-height: 40px;font-size: 30px;}
.modal_close i {line-height: 44px;}
.link_area {margin: 25px auto 0;}
.link_area .modal_link a {margin: 15px auto 0;}
.link_area .modal_link:first-child a {float: none; margin-top: 0;}
.link_area .modal_link:last-child a {float: none;}
}




















/* 開くボタン */
.modal_btn{display: inline-block; padding: 0.0em 1.5em;text-decoration:none;color:#0bac9e;border: solid 2px #0bac9e;border-radius:3px; transition: .4s;margin:2px;width:5.0em;text-indent:0.1em;text-align: center;}
.modal_btn:hover {background: #0bac9e;color: white;}


/* モーダルウィンドウ */
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px;
  width:70%;
  max-width: 900px;
  height : 50%;  /*お好みの高さで固定 */
  overflow : auto;  /* 状況に応じて縦スクロールバーが出現 */
  background-color: #fff;
  border-radius: 5px;
  z-index: 9999;
  padding: 2rem;
  }
.modal-title {margin:0;padding:1.0rem 0 1.0rem;border-bottom: 1px solid #dee2e6;color:#3e4751;font-size:100%;font-weight:600;}
.modal-footer {display: flex;justify-content: flex-end;padding:0.5rem;border-top: 1px solid #dee2e6;}
/* 閉じるボタン */
.button-close  { position: absolute;
	display: inline-block;
	font-weight: 400;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	background: #6c757d;
	border: 1px solid #6c757d;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: 0.15s;
	opacity: 1;
}
.button-close :hover {background: #5a6268;border-color: #545b62;opacity: 0.7;cursor: pointer;}
.modal_close {cursor: pointer;position: absolute;top: 0.3rem;right: 1rem;font-size: 2rem;}/*×クローズ */

/* オーバーレイ */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(30, 30, 30, 0.9);
  width: 100%;
  height: 100%;
  z-index: 9988;
}