@charset "utf-8";

#facilities{padding-top: 150px;}
#facilities article{width: 70%;}
#facilities hr{max-width: 900px; width: 100%; margin: 50px 0;}
#facilities article p,#facilities article li{max-width: 900px; width: 100%;}

@media only screen and (max-width:1100px){
#facilities hr{max-width: 500px; width: 100%; margin: 50px 0;}
#facilities article p,#facilities article li{max-width: 600px; width: 100%;}
#facilities article{max-width: 500px;  width: 100%; margin: 0 auto;}
}

/* text-color */
#facilities h2{padding: .1rem 1.3rem; border-left: 6px solid #000;}
#facilities .syuro-iko h2{border-left: 6px solid #3786c7;}
#facilities .syuro-keizoku h2{border-left: 6px solid #00aa71;}
#facilities .group-home h2{border-left: 6px solid #f39939;}
#facilities .smile h2{color: #ed6d46; border-left: 6px solid #ed6d46;}
#facilities .ichiran h2{color: #e60012; border-left: 6px solid #e60012;}
#facilities .syuro-iko h2,#facilities .syuro-iko h3{color: #3786c7;}
#facilities .syuro-keizoku h2,#facilities .syuro-keizoku h3{color: #00aa71;}
#facilities .group-home h2,#facilities .group-home h3{color: #f39939;}

/* 全体 */
#facilities .yoko{display: flex; flex-flow:row wrap; justify-content:center; align-content:stretch; align-items:stretch;}
#facilities .link{width: 25%;}
#facilities .link ul{position: -webkit-sticky; position: sticky; top:15%; background: url("../img/facilities/link.png"); background-repeat: no-repeat; background-size: 100% auto;  background-position: top center; padding:20% 0 20% 5%; width: 80%;  border-bottom: solid 1px #12222b;}
#facilities .link ul li{padding:5px 5% 0; margin-top: 20px; width:90%;}
#facilities .link ul li a{color: #12222b; position: relative; line-height: 1.1; display: block;}
#facilities .link ul li a:hover{color: #3786c7;}
#facilities .link ul li a::after {
	content: '';
	position: absolute;
	top: 60%;
	left: -10%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	background-color: #3786c7;
	border-radius: 50%;
	transition: 0.3s;
}
#facilities .link ul li a::after {background-color: #3786c7;}
#facilities .link ul li a:hover::after,#facilities .link ul li a.now::after {width: 8px; height: 8px;}

@media only screen and (max-width:1100px){
#facilities .link{width: 100%; max-width: 900px; margin: 0 auto;}
#facilities .link ul{position: -webkit-sticky; position: sticky; top:15%; background: url("../img/facilities/link-sp.png"); background-repeat: no-repeat; background-size: 550px; background-position: center; padding:20% 0 15% 25%; width: 100%; max-width: 700px; margin: -50px auto 0; border-bottom:none;}
}

/* 共通 */
#facilities table{max-width: 900px; width: 100%; margin:40px 0;}
#facilities table th{text-align: center; color: #fff; padding:5px 0; font-size: 1.2rem; width: 50%;}
#facilities table td{text-align: center; line-height: 1.1; vertical-align: middle; padding:15px 0; background: #fff; font-weight: 700; width: 50%;}
#facilities .syuro-iko table th{background: #3786c7;}
#facilities .syuro-keizoku table th{background: #00aa71;}
#facilities .group-home table th{background: #f39939;}
#facilities .syuro-iko table td{color: #3786c7;}
#facilities .syuro-keizoku table td{color: #00aa71;}
#facilities ol li{padding-left: 20px;}
#facilities  h3{margin-top: 10px;}


/* .job-coach */
#facilities .job-coach{background: url("../img/facilities/job-coach-bg.png"); background-repeat: no-repeat; background-size: auto;  max-width: 900px; width: 100%;  padding: 100px 40px;}
#facilities .job-coach h3,#facilities .job-coach p{color: #fff;}
#facilities .job-coach h3{text-align: center; border-bottom: solid 5px #fff; width: 300px; margin: 0 auto; margin-bottom: 10px;}

@media only screen and (max-width:1100px){
    #facilities .job-coach h3{width: 330px;}
    #facilities .job-coach{background: url("../img/facilities/job-coach-bg-sp.png"); background-repeat: no-repeat; background-size: auto;  max-width: 900px; width: 100%;  padding: 15% 5%;}
}

/* .group-home */
#facilities .group-home li {
   display: flex;
   align-items: baseline;
   column-gap: 8px;
   padding-left:20px;
   position: relative;
}
#facilities .group-home li::before,
#facilities .group-home li::after{
   position: absolute;
   content: '';
}
#facilities .group-home li::before {
   top: .8em;
   left: .2em;
   z-index: 2;
   width: 0.8em;
   height: 0.4em;
   border-bottom: 3px solid #e60012;
   border-left: 3px solid #e60012;
   transform: rotate(-45deg) translate(2px, -2px);
   content: '';
}
#facilities .group-home li::after {
   top: .6em;
   left: .2em;
   width: 0.8em;
   height: 0.8em;
   border: 1px solid #12222b;
   content: '';
}

/* .smile */
.smile p{margin-top: 40px;}

/* .zigyosyo */
#facilities .zigyosyo h3{margin-top: 50px;}
#facilities .zigyosyo h3 img{width: 3%;}
#facilities .map-waku{display: flex; flex-wrap: wrap; max-width: 900px; width: 100%; margin-top: 20px;}
#facilities .map-waku iframe{margin-bottom:20px; border-radius: 15px; width:432px; height:330px;}
#facilities .map-waku p{width: 48%; margin-left: 20px;}
#facilities .map-waku p span{background: #3786c7; color: #fff; border-radius: 50px; padding:1px 10px; font-size: .8rem; font-weight: 700; margin-right: 10px;}
#facilities .map-waku img{width: 48%; border-radius: 15px;}
#facilities .map-waku img:nth-of-type(2){margin-left: 20px;}

@media only screen and (max-width:1100px){
    #facilities .zigyosyo h3 img{width: 8%;}
    #facilities .map-waku iframe{width:500px; height:300px;}
#facilities .map-waku p{width: 100%; margin-left: 0; margin-bottom: 30px;}
}


/* activity */
#activity h1{margin-left: -450px;}
#activity h2,#activity h3,#activity li span{color: #ea6094;}
#activity h2{border-left: 6px solid #ea6094; margin: 40px 0;}
#activity h3 small{margin-left: 15px;}
#activity .schedule img{max-width: 100%;}
#activity ul{display: flex; max-width: 900px; width: 100%; flex-wrap: wrap; margin: 0 0 30px 0;}
#activity ul li{width: 30%; margin: 5px 0;}
#activity .photo-waku{display: flex; max-width: 900px; width: 100%; flex-wrap: wrap; margin: 0 0 30px 0;}
#activity .photo-waku div{width: 32%; margin: 0 3px;}
#activity .photo-waku div img{width: 100%; border-radius: 15px;}
#activity img.gurahu{margin-top: 40px;}
#activity ol{display: flex; max-width: 900px; width: 100%; flex-wrap: wrap; margin: 0 0 30px 0;}
#activity ol li{width:30%;}
#activity ol li span{margin-right: 10px;}

@media only screen and (max-width:1100px){
    #activity h1{text-align: center; margin-left:0;}
    #activity .schedule img{max-width: 100%; margin: 30px auto 0; display: block;}
    #activity ol li{width:100%; padding:0;}
    #activity ul li{width: 50%; margin: 5px 0;}
    #activity .photo-waku div{width: 48%; margin: 5px 3px;}
}