@charset "UTF-8";

/*************************************************
	デモ
**************************************************/
.grad-wrap {
  position: relative;
  padding-bottom: 30px;
}
@media screen and (max-width:767px) {
	.grad-wrap {
		padding-bottom: 40px;
	}
}
.grad-wrap + .grad-wrap {
  margin-top: 400px;
}
.grad-trigger {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  bottom: -1em;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #009e8f;
  background: #58a853;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.grad-trigger::after {
  content: "続きを読む"
}
.grad-trigger:hover {
  background: #fff;
  color: #009e8f;
  color: #58a853;
}
.grad-trigger .fa {
  margin-right: .5em;
}
.grad-item {
  position: relative;
  overflow: hidden;
}
.grad-item.is-hide {
  height: 200px;
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item p {
	text-align: left;
	text-indent: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-item-notice::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(113,140,199,0) 0%, rgba(113,140,199,0.9) 50%, rgba(113,140,199,0.9) 50%, rgba(113,140,199,1.0) 100%);
  background: linear-gradient(top, rgba(113,140,199,0) 0%, rgba(113,140,199,0.9) 50%, rgba(113,140,199,0.9) 50%, rgba(113,140,199,1.0) 100%);
 }
.grad-trigger.is-show {
  bottom: -2em;
}
.grad-trigger.is-show::after {
  content: "閉じる";
}
.grad-trigger.is-show .fa {
  transform: rotate(180deg);
}
.grad-trigger.is-show + .grad-item::before {
  display: none;
}


/*テキストと写真を並べる*/
.grad-2column {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.grad-2column-txt {
	width: 700px;
}
.grad-2column-img {
	width: 140px;
}
.grad-2column-img img {
	height: auto;
	width: 100%;
}