@charset "utf-8";


/* Common-style
--------------------------------------------------------- */
#content {
	width: 100%;
	max-width: 1440px;
}
section {
	margin: 0 auto 100px;
}
.post_box {
	font-size: 110%;
}

h2.content-title-home {
    text-align:center;
    font-size: 240%;
    color:rgb(22, 134, 226);
    font-weight:bold;
}
h2.content-title-home span {
    position: relative;
    display: inline-block;
    padding-right: calc(1.0em + 35px);
}
h2.content-title-home span::after {
  content: attr(data-txt);
  height: auto;
  display: inline-block;
/*  background: rgb(22, 134, 226);*/
  background: rgb(226,134,22);
  border-radius: 7px;
  font-size: 50%;
  line-height: 1.4;
  color: #fff;
  padding: 0 10px;
  position: absolute;
  right: 0;
  top: 1.125em;
}
h2.content-title-home span.c2::after {
  background: rgb(226,22,134);
}

.link-btn {
    text-align: right;
    margin: 20px;
}
.link-btn a {
    background:rgb(255, 255, 255);
    display: inline-block;
    padding: 5px 10px;
    border:1px dotted black;
    color:black;
    text-decoration: none;
}
.link-btn a:hover{
  background:rgb(255, 239, 115);
}

.banner {
	max-width:90%;
	margin: 50px auto 0;
	text-align: center;
}
.banner a:hover,
.banner a:active {
	opacity: 0.5;
}




/* Top-Photo
--------------------------------------------------------- */
#topphoto {
  width: 100%;
  height: 65vw;
  max-height: 1000px;
  margin-bottom: 200px;
  position: relative;
  background-image: url(images/topphoto-bg.jpg);
  background-size: cover;
  overflow: hidden;
}
#balloons {
	width: 100%;
	height: 100%;
	position: relative;
}
#balloons > div {
	position: absolute;
	bottom: -200px;
	width: 150px;
	height: 180px;
	border-radius: 50%;
	box-shadow: -6px -6px 0 rgba(0, 0, 0, 0.15) inset;
}
#balloons > div::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 2px;
	height: 90px;
	bottom: -90px;
	background: #ffffff;
	transform: rotate(2deg);
}
@media only screen and (min-width: 1181px){
 #balloons > div {
	bottom: -200px;
	width: 150px;
	height: 180px;
 }
 #balloons > div::after {
	height: 90px;
	bottom: -90px;
 }
}
@media only screen and (min-width: 801px) and (max-width: 1180px){
 #balloons > div {
	bottom: -130px;
	width: 100px;
	height: 120px;
 }
 #balloons > div::after {
	height: 70px;
	bottom: -70px;
 }
}
@media only screen and (max-width: 800px){
 #balloons > div {
	bottom: -90px;
	width: 60px;
	height: 70px;
 }
 #balloons > div::after {
	height: 40px;
	bottom: -40px;
 }
}

#balloons > div:nth-of-type(1) {
	left: -5%;
	background: #9400d3;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 13s ease-in-out infinite;
}
#balloons > div:nth-of-type(2) {
	left: 12%;
	background: #ffc0cb;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 9s ease-in-out infinite;
}
#balloons > div:nth-of-type(3) {
	left: 18%;
	background: #ffa07a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 18s ease-in-out infinite;
}
#balloons > div:nth-of-type(4) {
	left: 22%;
	background: #f0f8ff;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 16s ease-in-out infinite;
}
#balloons > div:nth-of-type(5) {
	left: 36%;
	background: #ffa07a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 9s ease-in-out infinite;
}
#balloons > div:nth-of-type(6) {
	left: 50%;
	background: #00fa9a;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
	  wobbling_y 1.2s ease-in-out infinite alternate,
	  fly_high 14s ease-in-out infinite;
}
#balloons > div:nth-of-type(7) {
	left: 62%;
	background: #ffc0cb;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 17s ease-in-out infinite;
}
#balloons > div:nth-of-type(8) {
	left: 68%;
	background: #9400d3;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 14s ease-in-out infinite;
}
#balloons > div:nth-of-type(9) {
	left: 78%;
	background: #ffa07a;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
	  wobbling_y 1.2s ease-in-out infinite alternate,
	  fly_high 11s ease-in-out infinite;
}
#balloons > div:nth-of-type(10) {
	left: 90%;
	background: #ff6868;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 13s ease-in-out infinite;
}

#balloons > div:nth-of-type(11) {
	left: 0%;
	background: #f0f8ff;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 11s ease-in-out infinite 7s;
}
#balloons > div:nth-of-type(12) {
	left: 3%;
	background: #ffa07a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 9s ease-in-out infinite 2s;
}
#balloons > div:nth-of-type(13) {
	left: 10%;
	background: #ff7575;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 10s ease-in-out infinite 5s;
}
#balloons > div:nth-of-type(14) {
	left: 25%;
	background: #00ced1;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 14s ease-in-out infinite 6s;
}
#balloons > div:nth-of-type(15) {
	left: 37%;
	background: #00fa9a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 9s ease-in-out infinite 4s;
}
#balloons > div:nth-of-type(16) {
	left: 45%;
	background: #00ced1;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
	  wobbling_y 1.2s ease-in-out infinite alternate,
	  fly_high 11s ease-in-out infinite;
}
#balloons > div:nth-of-type(17) {
	left: 55%;
	background: #ffc0cb;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 15s ease-in-out infinite 8s;
}
#balloons > div:nth-of-type(18) {
	left: 60%;
	background: #f0f8ff;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 12s ease-in-out infinite 1s;
}
#balloons > div:nth-of-type(19) {
	left: 75%;
	background: #00fa9a;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
	  wobbling_y 1.2s ease-in-out infinite alternate,
	  fly_high 17s ease-in-out infinite 7s;
}
#balloons > div:nth-of-type(20) {
	left: 95%;
	background: #00ced1;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
	  wobbling_y 1.1s ease-in-out infinite alternate,
	  fly_high 13s ease-in-out infinite 6s;
}

@keyframes wobbling_x {
	  0% { margin-left: 8px; }
	100% { margin-left: 0px; }
}
@keyframes wobbling_y {
	  0% { margin-bottom: 0px; }
	100% { margin-bottom: 8px; }
}
@keyframes fly_high {
	  0% { transform:translateY(0); }
	100% { transform:translateY(-200vh); }
}

#main-photo {
	width: 100%;
/*	max-width: 2000px;*/
	max-width: 1600px;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#main-photo > div {
	position: absolute;
}
#main-photo ul,
#main-photo ul li {
	margin: 0;
	padding: 0;
}
#main-photo ul {}
#main-photo ul li {
	position: absolute;
	border: 1px solid #999;
	padding: 5px;
	background: #fff;
}

.home-txt {
	margin: 0 auto;
	bottom: 15px;
	text-align: center;
}
.home-txt > img:nth-of-type(2) {
	border: 5px solid #FC0;
	border-radius: 50%;
	padding: 5px;
}
@media only screen and (min-width: 801px){
 .home-txt {
	width: 22.5%;
/*	left: 99%;
	transform: translateX(-100%);*/
	right: 2%;
 }
}
@media only screen and (max-width: 800px){
 .home-txt {
	width: 35%;
	left: 1%;
	transform: translateX(0);
 }
}
#main-photo > div > img {
	max-width: 100%;
}
#main-photo ul li::after {
	position: absolute;
	color: #FFF;
	font-weight: bold;
	white-space: nowrap;
	text-shadow: 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039;
}
#main-photo ul li:nth-child(1)::after { content: "あいあい保育園"; }
#main-photo ul li:nth-child(2)::after { content: "太閤の杜"; }
#main-photo ul li:nth-child(3)::after { content: "エスポワールこすぎ"; }
#main-photo ul li:nth-child(4)::after { content: "大江苑"; }
#main-photo ul li:nth-child(5)::after { content: "つな～ぐ"; text-shadow: 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039, 0 0 5px #039; }

@media only screen and (min-width: 801px){
 #topphoto {
  height: 65vw;
  max-height: 1000px;
  margin-bottom: 200px;
 }
 #main-photo ul {}
 #main-photo ul li {
	position: absolute;
	animation-name: popupshow;/* アニメーション名 */
	animation-delay: 1.0s;/* 遅延時間 */
	animation-direction: normal;/* 向き */
	animation-duration: 50s;/* 実行時間 */
	animation-iteration-count: infinite;/* 実行回数 */
	animation-fill-mode: forwards;/* 実行後の状態 */
	animation-play-state: running;/* 実行状態（running/paused） */
	animation-timing-function: linear;/* 進行方法 */
	opacity: 0;
 }
 #main-photo ul li:nth-child(1) { animation-delay:  1.0s; }
 #main-photo ul li:nth-child(2) { animation-delay: 11.0s; }
 #main-photo ul li:nth-child(3) { animation-delay: 21.0s; }
 #main-photo ul li:nth-child(4) { animation-delay: 31.0s; }
 #main-photo ul li:nth-child(5) { animation-delay: 41.0s; }
 #main-photo ul li:nth-child(4)   {
	animation-delay: 1.0s, 31.0s;
	animation-name: popupshow_z, popupshow;
	animation-iteration-count: 1, infinite;
	animation-duration: 25s, 50s;/* 実行時間 */
 }
 #main-photo ul li:nth-child(5)   {
	animation-delay: 1.0s, 41.0s;
	animation-name: popupshow_y, popupshow;
	animation-iteration-count: 1, infinite;
	animation-duration:  25s, 50s;/* 実行時間 */
 }
 #main-photo ul li { width: 35%; opacity: 0; top: 100%; left:   15%; transform: rotate(  0deg); z-index: 1; }
 #main-photo ul li::after {
	font-size: 240%;
	left: 10px;
	bottom: 0;
 }
}
@keyframes popupshow {
	   0% { width: 22%; opacity: 0; top:  100%; left:   20%; transform: rotate(  0deg); }
	 2.5% { width: 22%; opacity: 1; top:   75%; left:   45%; transform: rotate(  5deg); z-index: 1; }
	20.0% { width: 22%; opacity: 1; top:   75%; left:   45%; transform: rotate(  5deg); }
	22.5% { width: 28%; opacity: 1; top:   65%; left: 17.5%; transform: rotate(-10deg); z-index: 2; }
	40.0% { width: 28%; opacity: 1; top:   65%; left: 17.5%; transform: rotate(-10deg); }
	42.5% { width: 55%; opacity: 1; top:   15%; left:   10%; transform: rotate(7.5deg); }
	60.0% { width: 55%; opacity: 1; top:   15%; left:   10%; transform: rotate(7.5deg); z-index: 3; }
	62.5% { width: 22%; opacity: 0; top:  -30%; left:   30%; transform: rotate(  0deg); }
	 100% { width: 22%; opacity: 0; top:  100%; left:   20%; transform: rotate(0deg); }
}
@keyframes popupshow_z {
	  5% { width: 55%; opacity: 1; top:   15%; left:  10%; transform: rotate(7.5deg); z-index: 3; }
	 40% { width: 55%; opacity: 1; top:   15%; left:  10%; transform: rotate(7.5deg); z-index: 3; }
 	 45% { width: 22%; opacity: 0; top:  -30%; left:  30%; transform: rotate(0deg); }
 	 50% { width: 22%; opacity: 0; top:  100%; left:  20%; transform: rotate(0deg); }
 	100% { width: 22%; opacity: 0; top:  100%; left:  20%; transform: rotate(0deg); }
}
@keyframes popupshow_y {
	  5% { width: 28%; opacity: 1; top:   65%; left: 17.5%; transform: rotate(-10deg); }
	 40% { width: 28%; opacity: 1; top:   65%; left: 17.5%; transform: rotate(-10deg); }
	 45% { width: 55%; opacity: 1; top:   15%; left:  10%; transform: rotate(7.5deg); }
	 80% { width: 55%; opacity: 1; top:   15%; left:  10%; transform: rotate(7.5deg); z-index: 2; }
 	 85% { width: 28%; opacity: 0; top:  -30%; left:  30%; transform: rotate(0deg); }
 	100% { width: 22%; opacity: 0; top:  100%; left:  20%; transform: rotate(0deg); }
}

@media only screen and (max-width: 800px){
 #topphoto {
  height: 100vw;
  margin-bottom: 100px;
 }
 #main-photo ul li {
	width: 65%;
	top: 45%;
	right: 10px;
	opacity: 0;
	animation-name: popupshow2;/* アニメーション名 */
	animation-delay: 1.0s;/* 遅延時間 */
	animation-direction: normal;/* 向き */
	animation-duration: 50s;/* 実行時間 */
	animation-iteration-count: infinite;/* 実行回数 */
	animation-fill-mode: forwards;/* 実行後の状態 */
	animation-play-state: running;/* 実行状態（running/paused） */
	animation-timing-function: linear;/* 進行方法 */
 }
 #main-photo ul li:nth-child(1) { animation-delay:  1.0s; }
 #main-photo ul li:nth-child(2) { animation-delay: 11.0s; }
 #main-photo ul li:nth-child(3) { animation-delay: 21.0s; }
 #main-photo ul li:nth-child(4) { animation-delay: 31.0s; }
 #main-photo ul li:nth-child(5) { animation-delay: 41.0s; }
 #main-photo ul li::after {
	font-size: 5vw;
	top: 0px;
	right: 10px;
 }
}

@keyframes popupshow2 {
	  0% { opacity: 0; transform:translateY(2px); }
 	  2% { opacity: 1; transform:translateY(0px); }
 	 19% { opacity: 1; transform:translateY(0px); }
	 21% { opacity: 0; transform:translateY(-2px); }
}


/* News-Contents
--------------------------------------------------------- */
#news {}
#news2 {}
#news .post_box,
#news2 .post_box {
	width: 90%;
	max-width: 1040px;
	margin: 0px auto;
	padding: 0 30px 30px;
	position: relative;
}
#news .post_box::before,
#news .post_box::after,
#news2 .post_box::before,
#news2 .post_box::after {
	content: "";
	display: block;
	position: absolute;
	top: 2.0em;
	z-index: -1;
}
#news .post_box::before,
#news2 .post_box::before {
	width: 100%;
	height: calc(100% - 2.0em);
	left: 0;
	background: linear-gradient(to left, #9C7 0px, #9c7 5px, transparent 5px, transparent calc(100% - 5px),  #9c7 calc(100% - 5px), #9c7 100%),
		 linear-gradient(to bottom, #9C7 0px, #9c7 5px, transparent 5px, transparent calc(100% - 5px),  #9c7 calc(100% - 5px), #9c7 100%);
}
#news .post_box::after,
#news2 .post_box::after {
	width: calc(50% + 10.0em);
	height: 40%;
	background: #fff;
}
#news .post_box::after {
	left: 0;
}
#news2 .post_box::after {
	right: 0;
}
#news .inner,
#news2 .inner {
    width: 100%;
    padding: 20px 30px 120px;
}
#news .inner {
    background:rgb(253, 255, 222);
}
#news2 .inner {
    background:rgb(255, 242, 253);
}

#news2 dl{
    overflow: hidden;
    border-bottom:1px solid rgb(105, 105, 105);
}
#news2 dt{
    float:left;
    padding:10px 5px;
}
#news2 dt a {
     border-radius:5px;
     color:#fff;
     margin: 0 10px;
     padding: 1px 10px 2px;
     text-decoration:none;
     font-size: 75%;
     white-space: nowrap;
}
#news2 dt a:hover,
#news2 dt a:active { opacity: 0.5; }
#news2 dd {
     margin-left: 160px;
     padding: 10px 15px;
}
#news2 dd a {
   text-decoration: none;
}
#news2 dd .sticky,
#news2 dd .kiji-new { font-size: 65%; font-weight: bold; padding: 0 5px; white-space: nowrap; text-shadow: 1px 1px 1px #FFF, 1px 1px 2px #000; }
#news2 dd .sticky   { color: #00F; }
#news2 dd .kiji-new { color: #F00; }

@media only screen and (max-width: 799px){
 #news2 .inner { width: 96%; }
 #news2 dt { float: none; }
 #news2 dd { margin-left: 0; }
}

.news-more {
	width: 180px;
	height: 180px;
	display: inline-block;
	background: #fff;
	border-radius: 50%;
	border: 5px solid #9C7;
	overflow: hidden;
	position: absolute;
	right: -30px;
	bottom: -60px;
}
.news-more:hover,
.news-more:active {
	border-color: #f90;
}
.news-more a {
	width: 100%;
	height: 100%;
	padding: 40px 35px;
	line-height: 1.4;
	display: block;
	text-decoration: none;
	font-weight: 600;
}
.news-more a span {
	display: inline-block;
	text-align: center;
}



/* Guide-Contents
--------------------------------------------------------- */
#shisetsu {
	background: #DDF5FF;
	padding: 30px 0;
	margin-bottom: 0;
}
#shisetsu .inner {
    display:flex;
    justify-content: center;
    gap:50px;
    flex-wrap:wrap;
    width: 100%;
    overflow: visible;
}
#shisetsu .inner > div {
    border:1px solid black;
    border-radius:10px;
    overflow:hidden;
    background: #FFF;
    margin-bottom: 50px;
    text-align: center;
    transition-duration: .7s;
}
@media only screen and (min-width: 1800px){
 #shisetsu .inner > div { max-width: calc(50% - 50px); }
}
@media only screen and (min-width: 980px)and (max-width: 1799px){
 #shisetsu .inner > div { max-width: calc(50% - 50px); }
}
@media only screen and (max-width: 979px){
 #shisetsu .inner > div { max-width: calc(100% - 50px); }
}
#shisetsu .inner > div:hover{
  transform: scale(1.1, 1.1);
}
#shisetsu .inner > div#shisetsu-aiai:hover{
  background:linear-gradient(to left,#FBD,#FFF,#FBD);
}
#shisetsu .inner > div#shisetsu-espo:hover{
  background:linear-gradient(to left,#FDA,#FFF,#FDA);
}
#shisetsu .inner > div#shisetsu-oogo:hover{
  background:linear-gradient(to left,rgb(130, 166, 255),white,rgb(130, 166, 255));
}
#shisetsu .inner > div#shisetsu-taiko:hover{
  background:linear-gradient(to left,rgb(118, 255, 127),white,rgb(118, 255, 127));
}
#shisetsu .inner > div#shisetsu-tsunagu:hover{
	background:linear-gradient(to left,#DBF,#FFF,#DBF);
}
#shisetsu .inner > div#shisetsu-bakusyou {
	border-radius: 0!important;
	border-color: transparent!important;
	background: #FFF;
	display: flex;
	align-items: center;
}
#shisetsu .inner > div#shisetsu-bakusyou:hover {}
#shisetsu .inner > div#shisetsu-bakusyou:hover img {
	opacity: 0.4;
}




/* Swiper-Contents
--------------------------------------------------------- */
.swiper-container {}
.swiper-slide {}
.swiper-wrapper img {
	width: auto;
	max-width: 100%;
	height: auto;
}

#topphoto .swiper-wrapper {
	max-width: 1000px;
}
#topphoto .swiper-wrapper img {
	border-radius:40px;
}
#slideshow {
	width: 100%;
	max-width: 2400px;
	position: relative;
	overflow: visible;
	padding: 60px 0;
}
#slideshow::before,
#slideshow::after {
	content: "";
	width: 100%;
	height: min(12.5vw, 100px);
	display: block;
	background: url(images/border_dot.png) center no-repeat;
	background-size: contain;
	position: absolute;
	z-index: 3;
}
#slideshow::before {
	top: -50px;
}
#slideshow::after {
	bottom: -50px;
}

#slideshow-list {
	display: none;
}
#slideshow .swiper-wrapper {/* 一定速度で切り替え */
  transition-timing-function: linear;
}
#slideshow .swiper-slide {
	text-align: center;
}
#slideshow-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#slideshow-bg ul {
	width: 100%;
	height: 100%;
	position: relative;
}
#slideshow-bg ul li {
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-size: cover;
	background-position: center;
	list-style: none;
	margin-left: 0;
	transition-duration: 2.0s;
	position: absolute;
	top: 0;
	left: 0;
}
#slideshow-bg ul li.show {
	opacity: 1.0;
}
#slideshow-bg ul li:not(.show) {
	opacity: 0;
}
#home-slideshow {
	padding-top: 30px;
}
#home-slideshow .swiper-slide {
	padding: 10px;
}
#home-slideshow .swiper-slide img {
/*	box-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;*/
}




/* Recuruit
--------------------------------------------------------- */
#recuruit {}
#recuruit .inner {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5em 0 0.5em;
    font-size: 200%;
    text-align: center;
}
#recuruit .inner > div {
    border: 2px solid #059;
    margin: 30px auto;
    padding: 2px;
    max-width: 640px;
}
@media only screen and (min-width: 1200px){
  #recuruit .inner {
    display: flex;
    justify-content:center;
    gap: 30px;
    padding: 0 30px;
  }
  #recuruit .inner > div {
	width: 50%;
  }
}
#recuruit .application a {
    width: 100%;
    max-width: 640px;
    display: flex;
    justify-content:center;
    align-items: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: #FFF;
}
#recuruit .application a:hover,
#recuruit .application a:active {
    background: #693;
}
#recuruit .application a img {
    width: 50%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
#recuruit .application a span {
    display: block;
    width: 50%;
    color: #000;
}
#recuruit .application a:hover span,
#recuruit .application a:active span {
	opacity: 0.1;
}

.hover-text {
    position: relative;
}
.hover-text a::after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 85%;
    color: #FFF;
    display: none;
}
.hover-text a:hover img {
  opacity: 0.20;
}
.hover-text a:hover::after {
   display: inline-block;
}