@charset "UTF-8";
/*モーダルを開くボタン*/
.modal-open{
	cursor: pointer;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
  box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 670px;
	width: 90%;
  color: rgb(77 91 117);
}

/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
  align-items: center;
  justify-content: center;
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
  text-align: left;
  padding: 0;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.txt_lightblue {
  color: rgb(57 160 234);
  margin-bottom: 1.2rem;
}

.txt_big {
  font-size: 20px;
  margin-bottom: 30px;
}

/*aboutページ専用*/

.about-modal-content_img {
	flex: 1;
}

.about-modal-content_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px 0 0 30px;
  display: block;
}

.about-modal-content_txt {
	flex: 1;
  padding: 30px;
  box-sizing: border-box;
}


@media screen and (min-width: 901px) {

}

@media only screen and (min-width: 781px) and (max-width: 900px) {

}

@media screen and (max-width: 780px) {
	/*モーダル内のコンテンツの指定*/
	/*aboutページ専用*/
	.modal-content {
    flex-direction: column;
  }

  .about-modal-content_img img {
		max-height: 250px;
    border-radius: 30px 30px 0 0;
  }

	.about-modal-content_txt {
	  flex: 1;
		padding: 20px;
	  box-sizing: border-box;
	  max-height: 300px;
	  overflow-y: auto;
		position: relative;
		-webkit-mask-image: linear-gradient(to bottom, white 78%, transparent 100%);
	  mask-image: linear-gradient(to bottom, white 78%, transparent 100%);
	  -webkit-mask-size: 100% 100%;
	  mask-size: 100% 100%;
	  -webkit-mask-repeat: no-repeat;
	  mask-repeat: no-repeat;
	}

}