@charset "utf-8";

/* main */
main{position: relative;}
main img{width: 100%;}

/* news */
.news{margin: 50px auto 0;}
.news ul.category{display: flex; width: 30%; margin: 20px auto 0; justify-content: space-around;}
.news ul.category li{position: relative;}
.news ul.category li a{color: #707070;}
.news ul.category li a:hover,.news ul.category li a.now{color: #3786c7;}
.news .kari{border: solid 1px #12222b; border-radius: 15px; max-width: 800px; width: 100%; background: #fff; margin: 10px auto 0; padding: 20px;}
.news .kari:first-of-type{margin: 40px auto 0;}
.news .kari p span{color: #fff; border-radius: 50vw; padding:2px 15px; margin-right: 10px;}
.news .kari ul.pdf-box{display: flex;flex-wrap: wrap; margin-top: 10px;}
.news .kari ul.pdf-box li a{border-radius: 10px; padding:1px 35px; margin: 5px 5px 0 0; background: #fff; display: inline-block; vertical-align: middle;}
.news .kari ul.pdf-box li a:hover{color: #fff;}
/* .kouho */
.news .kouho p span{background: #3786c7;}
.news .kouho ul.pdf-box li a{border: solid 1px #3786c7;}
.news .kouho ul.pdf-box li a:hover{background: #3786c7;}
.news .kouho ul.pdf-box li a{color: #3786c7;}
/* .siryo */
.news .siryo p span{background: #00aa71;}
.news .siryo ul.pdf-box li a{border: solid 1px #00aa71;}
.news .siryo ul.pdf-box li a:hover{background: #00aa71;}
.news .siryo ul.pdf-box li a{color: #00aa71;}
/* .sonota */
.news .sonota p span{background: #f39939;}
.news .sonota ul.pdf-box li a{border: solid 1px #f39939;}
.news .sonota ul.pdf-box li a:hover{background: #f39939;}
.news .sonota ul.pdf-box li a{color: #f39939;}
ul.pdf-box li a.pdf::after {
    background-image: url("../img/share/pdf.png");
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-left: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px auto;
    vertical-align: middle;
}
ul.pdf-box li a.pdf:hover::after {background-image: url("../img/share/pdf-w.png");}

@media (max-width:640px){
.news ul.category{width: 70%;}
.news .kari{max-width: 550px; margin: 15px auto 0;}
}


/* facilities */
.facilities{margin: 100px auto 0;}
.facilities ul{display: flex; justify-content: center; max-width: 1300px; width: 100%; margin: 50px auto 0; flex-wrap: wrap;}
.facilities ul li{width:30%; display: flex;  height: 100%; margin: 15px; position: relative; flex-wrap: wrap;}
.facilities ul li > img{position: absolute; right: 110px; top:-25px; z-index: 90; mix-blend-mode:multiply; width: 40%;}
.facilities ul li a .text-box{line-height: 1.2; color: #12222b;  transition: .5s;}
.facilities ul li a:hover .text-box{color: #f3a046;}
a.zoom-out .img-box{
	width:100%;
	display:block;
    overflow:hidden;
    border-radius: 15px;
    margin-bottom: 10px;
} 
a.zoom-out img{transform:scale(1.07); max-width: 100%; width: 100%;}
a.zoom-out img:hover{
	transform:scale(1);
	transition:0.5s;
}
.text-box{position: relative;}
.text-box::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 27px;
	height: 27px;
	background-color: transparent;
	border: 1px solid #f3a046;
	border-radius: 50%;
    background: #f3a046;
    transition:0.5s;
}

.text-box::after {
	content: '';
	position: absolute;
	top: calc(50% - 1px);
	right: 14px;
	transform: rotate(45deg) translateY(-50%);
	width: 10px;
	height: 10px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff #fff transparent transparent;
}
.facilities ul li a:hover .text-box::before {
	border: 1px solid #f3a046;
    background: #fff;
}
.facilities ul li a:hover .text-box::after {
	border-color: #f3a046 #f3a046 transparent transparent;
}

@media (max-width:640px){
.facilities{margin: 80px auto 0;}
.facilities ul li{width: 100%; justify-content: center; margin: 28px auto; position: relative;}
.facilities ul li:first-of-type{margin: 5px auto 28px;}
.facilities ul li > img{position: absolute; right: 230px; top:-25px; width: 25%;}
}