@charset "UTF-8";
/* --------------------------------
 * Modal
 * -------------------------------- */



/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}




/*g-navより上に*/
.modaal-overlay {
  z-index: 99999991;
}
.modaal-wrapper {
  z-index: 99999992;
  background-color: hsla(0,0%,100%,1.00);
}
.modaal-inner-wrapper {
  /*padding: 10px;*/
  padding: 0px;
}

.modaal-container {
 /*box-shadow: 0 4px 15px rgba(0, 0, 0, .2);*/
 box-shadow: none;
}





/*.modaal-close {
	position: fixed;
	right: 20px;
	top: 20px;
	color: $modaal-light;
	cursor: pointer;
	opacity: 1;
	width: 50px;
	height: 50px;
	background: rgba(0,0,0, 0);
	border-radius: 100%;
	@include modaal-transition(all);
	&:focus,
	&:hover {
		outline: none;
		background: #fff;
		&:before,
		&:after { background: $modaal-close-hover-color; }
	}
	span {
		@include modaal-hidetext;
	}
	&:before,
	&:after {
		display: block;
		content: " ";
		position: absolute;
		top: 14px;
		left: 23px;
		width: 4px;
		height: 22px;
		border-radius: 4px;
		background: #fff;
		@include modaal-transition(background);
	}
	&:before {
		transform: rotate(-45deg);
	}
	&:after {
		transform: rotate(45deg);
	}*/
/*モーダルの横幅を変更したい場合*/
.modaal-container {
  max-width: 600px;
}
.modaal-wrapper .modaal-close {
  position: fixed;
  right: 15px;
  top: auto;
  bottom: 20px;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  width: 80px;
  height: 80px;
  background: hsla(356, 100%, 45%, 0.80);
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.modaal-wrapper .modaal-close:focus, .modaal-wrapper .modaal-close:hover {
  outline: none;
  background: hsla(356, 100%, 45%, 1.0);
}
.modaal-wrapper .modaal-close:before, .modaal-wrapper .modaal-close:after {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  border-radius: 0px;
  background: transparent;
  transform: rotate(0);
  color: #fff;
  line-height: 1.3;
  text-align: center;
}
.modaal-wrapper .modaal-close:before {
  font-family: "Material Symbols Outlined";
  content: '\e5cd';
  font-size: 20px;
}
.modaal-wrapper .modaal-close:after {
  content: "CLOSE";
}
.modaal-wrapper .modaal-close:focus:before, .modaal-wrapper .modaal-close:focus:after, .modaal-wrapper .modaal-close:hover:before, .modaal-wrapper .modaal-close:hover:after {
  background: transparent;
}

/*.modaal-wrapper .modaal-close:before,
.modaal-wrapper .modaal-close:after {
	background: #fff;
}
.modaal-wrapper .modaal-close:focus:before,
.modaal-wrapper .modaal-close:focus:after,
.modaal-wrapper .modaal-close:hover:before,
.modaal-wrapper .modaal-close:hover:after {
	background: #fff;
}*/