@charset "UTF-8";

/*
=====================================================================
特定非営利活動法人 ひびきの杜 下層ページ css
=====================================================================
*/

/* ============================================================================================== */
@media screen and  (min-width:769px) {

/**
 * contents
 */
#contents{
  padding: 115px 0 200px;
}

#contents .w1100{
  width: 1100px;
}

/* facility
********************************************************************/

/* facilityList */
.facilityList{
  margin: 0 auto 150px;
}

.facilityList:last-child{
  margin-bottom: 0;
}

.facilityList h3{
  font-size: 1.8rem;
  margin-bottom: 30px;
}

.facilityList h3:before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 21px;
  margin: 0 10px 0 0;
  background: url(../img/union/icon_facility.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  transform: translateY(-3px);
}

.facilityList .inner{
  width: 530px;
  border: 2px solid #000;
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-sizing: border-box;
}

.facilityList .inner .photo{
  margin-bottom: 40px;
}

.facilityList .inner h2{
  font-size: 2.4rem;
  margin-bottom: 40px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.facilityList .inner h2 span{
  font-size: 1.6rem;
  display: block;
}

.facilityList .inner p{
  font-size: 1.8rem;
  text-align: center;
  font-weight: 500;
}

.facilityList .inner p a{
  display: inline-block;
  border: 1px solid #000;
  background: #ffe56d;
  border-radius: 100px;
  padding:12px 25px;
  box-sizing: border-box;
}

.facilityList .inner p a:hover{
  opacity: 0.5;
}

.facilityList .inner p a:before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 10px 0 0;
  background: url(../img/sec/icon_arrow.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* fcpageTtl */
#fcpageTtl{
  margin:0 auto 90px;
  width: 1100px;
}

#fcpageTtl h1{
  width: 176px;
}

#fcpageTtl #illust{
  width: 115px;
}

/* fcCat */
#fcCat{
  margin:0 auto 50px;
  width: 1100px;
}

#fcCat p{
  font-size: 1.8rem;
  letter-spacing: 0.08em;
}

#fcCat p:before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 21px;
  margin: 0 10px 0 0;
  background: url(../img/union/icon_facility.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  transform: translateY(-3px);
}

/* fcmainArea */
#fcmainArea{
  margin:0 auto 90px;
  align-items: center;
}

#fcmainArea #mainPhoto{
  width: 620px;
}

#fcmainArea .inner{
  width: 420px;
}

#fcmainArea .inner h2{
  font-size: 2.4rem;
  margin-bottom: 40px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

#fcmainArea .inner h2 span{
  font-size: 1.6rem;
  display: block;
}

#fcmainArea .inner p{
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

/* fcphotoArea */
#fcphotoArea{
  margin:0 auto 90px;
}

#fcphotoHeader{
  background-image: url(../img/sec/facility/bg_line_left.png), url(../img/sec/facility/bg_line_right.png);
  background-position: center left, center right;
  background-size: 25% auto, 25% auto;
  background-repeat: no-repeat, no-repeat;
  margin-bottom: 80px;
}

#fcphotoHeader h2{
  width: 230px;
  margin: 0 auto;
}

#fcphotoInner ul{
  flex-wrap: wrap;
}

#fcphotoInner li{
  width: 340px;
  margin-bottom: 40px;
}

#fcphotoInner li span{
  margin-top: 15px;
  font-size: 1.6rem;
  display: block;
  letter-spacing: 0.1em;
}

/* fcflowArea */
#fcflowArea{
  background-image: url(../img/sec/facility/bg_diagonal.png);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: 0 auto 120px;
  padding: 80px 0 0;
}

#fcflowHeader{
  margin-bottom: 95px;
}

#fcflowHeader h2{
  width: 235px;
}

#fcflowHeader p{
  font-size: 1.8rem;
}

#fcflowArea #time{
  margin-bottom: 80px;
}

/* fcoutlineArea */
#fcoutlineArea{
  background: #fff;
  padding: 80px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 15px;
}

#fcoutlineHeader{
  margin-bottom: 100px;
}

#fcoutlineHeader h2{
  font-size: 2.2rem;
  letter-spacing: 0.1em;
}

#fcoutlineHeader h2:before {
  content: "";
  display: inline-block;
  width: 73px;
  height: 48px;
  margin: 0 15px 0 0;
  background: url(../img/sec/facility/illust_outline.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

#fcoutlineHeader p{
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  font-weight: 500;
}

#fcoutlineArea .inner table{
  font-size: 1.8rem;
  border-collapse: collapse;
  margin-bottom: 25px;
  text-align: left;
  width: 100%;
}

#fcoutlineArea .inner table tr{
  border-bottom: 1px dotted #3e3a39;
}

#fcoutlineArea .inner table th{
  padding: 25px 0;
  width: 320px;
  font-weight: 500;
}

#fcoutlineArea .inner table td{
  padding: 25px 0;
}

#fcoutlineArea .inner table td span{
  font-size: 1.4rem;
  margin-top: 10px;
}

#fcoutlineArea #map h3{
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom:20px;
}

/* sflowArea */
#sflowArea{
  margin:0 auto 150px;
  width: 1100px;
  background: url(../img/sec/facility/terrace/bg_flow_bottom.png) no-repeat left bottom;
  background-size:contain;
  padding-bottom: 40px;
}

#sflowHeader{
  background-image: url(../img/sec/facility/terrace/bg_flow_top.png), url(../img/sec/facility/terrace/bg_flow_top.png);
  background-position: center left, center right;
  background-size: 15% auto, 15% auto;
  background-repeat: no-repeat, no-repeat;
  margin-bottom: 70px;
}

#sflowHeader h2{
  font-size: 2.0rem;
  text-align: center;
  color: #52A5CE;
}

#sflowArea p.intro{
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 70px;
}

#sflowInner{
  flex-wrap: wrap;
  width: 1000px;
  margin: 0 auto;
}

#sflowInner .inner{
  width: 240px;
  margin-bottom: 80px;
}
#sflowInner .arrow{
  width: 140px;
  display: grid;
  place-content: center;
  padding-bottom: 80px;
}

#sflowInner .arrow img{
  width: 70px;
}

#sflowInner .inner h3 img{
  height: 40px;
  width: auto;
}

#sflowInner .inner h3{
  margin-bottom: 10px;
}

#sflowInner .inner .illust{
  margin-bottom: 20px;
}

#sflowInner .inner p{
  font-size: 1.8rem;
}

#sflowInner::before{
  content:"";
  display: block;
  width:240px;
  order:1;
}

#sflowInner::after{
  content:"";
  display: block;
  width:140px;
}






}

/* ============================================================================================== */
@media screen and  (max-width:768px) {

/**
 * contents
 */
#contents{
  padding: 30px 0 60px;
}


/* facility
********************************************************************/

/* facilityList */
.facilityList{
  width: 90%;
  margin: 0 auto 80px;
}

.facilityList h3{
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.facilityList h3:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  background: url(../img/union/icon_facility.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  transform: translateY(-3px);
}

.facilityList .inner{
  width: 100%;
  border: 2px solid #000;
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.facilityList .inner .photo{
  margin-bottom: 20px;
}

.facilityList .inner h2{
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.facilityList .inner h2 span{
  font-size: 1.2rem;
  display: block;
}

.facilityList .inner p{
  font-size: 1.6rem;
  text-align: center;
  font-weight: 500;
}

.facilityList .inner p a{
  display: block;
  border: 1px solid #000;
  background: #ffe56d;
  border-radius: 100px;
  padding:12px 25px;
  box-sizing: border-box;
}

.facilityList .inner p a:hover{
  opacity: 0.5;
}

.facilityList .inner p a:before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 10px 0 0;
  background: url(../img/sec/icon_arrow.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}


/* fcpageTtl */
#fcpageTtl{
  margin:0 auto 40px;
  width: 90%;
  display: flex;
  justify-content: space-between;
}

#fcpageTtl h1 img{
  width: auto;
  height: 38px;
}

#fcpageTtl #illust{
  width: 20%;
}

/* fcCat */
#fcCat{
  margin:0 auto 30px;
  width: 90%;
}

#fcCat p{
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

#fcCat p:before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 21px;
  margin: 0 10px 0 0;
  background: url(../img/union/icon_facility.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  transform: translateY(-3px);
}

/* fcmainArea */
#fcmainArea{
  width: 90%;
  margin:0 auto 40px;
}

#fcmainArea #mainPhoto{
  margin-bottom: 20px;
}

#fcmainArea .inner h2{
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

#fcmainArea .inner h2 span{
  font-size: 1.2rem;
  display: block;
}

#fcmainArea .inner p{
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

/* fcphotoArea */
#fcphotoArea{
  width: 90%;
  margin:0 auto 40px;
}

#fcphotoHeader{
  background-image: url(../img/sec/facility/bg_line_left.png), url(../img/sec/facility/bg_line_right.png);
  background-position: center left, center right;
  background-size: 20% auto, 20% auto;
  background-repeat: no-repeat, no-repeat;
  margin-bottom: 40px;
}

#fcphotoHeader h2{
  width: 50%;
  margin: 0 auto;
}

#fcphotoInner li{
  margin-bottom: 30px;
}

#fcphotoInner li span{
  margin-top: 15px;
  font-size: 1.4rem;
  display: block;
  letter-spacing: 0.1em;
}

/* fcflowArea */
#fcflowArea{
  background-image: url(../img/sec/facility/bg_diagonal.png);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: 0 auto 60px;
  padding: 40px 0 0;
  width: 90%;
}

#fcflowHeader{
  margin-bottom: 40px;
}

#fcflowHeader h2 {
  margin-bottom: 20px;
}

#fcflowHeader h2 img{
  height: 30px;
  width: auto;
}

#fcflowHeader p{
  font-size: 1.4rem;
}

#fcflowArea #time{
  margin-bottom: 40px;
}

/* fcoutlineArea */
#fcoutlineArea{
  background: #fff;
  margin: 0 auto;
  box-sizing: border-box;
  width: 90%;
  padding: 10% 5%;
}

#fcoutlineHeader{
  margin-bottom: 50px;
}

#fcoutlineHeader h2{
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 20px;
}

#fcoutlineHeader h2:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 33px;
  margin: 0 15px 0 0;
  background: url(../img/sec/facility/illust_outline.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

#fcoutlineHeader p{
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
}

#fcoutlineArea .inner table{
  font-size: 1.4rem;
  border-collapse: collapse;
  margin-bottom: 25px;
  text-align: left;
}

#fcoutlineArea .inner table tr{
  border-bottom: 1px dotted #3e3a39;
}

#fcoutlineArea .inner table th{
  padding: 25px 0;
  font-weight: 500;
  display: block;
}

#fcoutlineArea .inner table td{
  padding: 0 0 25px;
  display: block;
}

#fcoutlineArea .inner table td span{
  font-size: 1.4rem;
  margin-top: 10px;
}

#fcoutlineArea #map h3{
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom:20px;
}

#fcoutlineArea #map iframe{
  width: 100% !important;
}


/* sflowArea */
#sflowArea{
  margin:0 auto 120px;
  width: 90%;
  background: url(../img/sec/facility/terrace/bg_flow_bottom.png) no-repeat left bottom;
  background-size:contain;
  padding-bottom: 40px;
}

#sflowHeader{
  background-image: url(../img/sec/facility/terrace/bg_flow_top.png), url(../img/sec/facility/terrace/bg_flow_top.png);
  background-position: center left, center right;
  background-size: 15% auto, 15% auto;
  background-repeat: no-repeat, no-repeat;
  margin-bottom: 40px;
}

#sflowHeader h2{
  font-size: 1.6rem;
  text-align: center;
  color: #52A5CE;
}

#sflowArea p.intro{
  font-size: 1.4rem;
  margin-bottom: 40px;
}

#sflowInner{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#sflowInner .inner{
  width: 45%;
  margin-bottom: 50px;
}
#sflowInner .arrow{
  display: none;
}

#sflowInner .arrow img{
  width: 70px;
}

#sflowInner .inner h3 img{
  height: 40px;
  width: auto;
}

#sflowInner .inner h3{
  margin-bottom: 10px;
}

#sflowInner .inner .illust{
  margin-bottom: 20px;
}

#sflowInner .inner p{
  font-size: 1.4rem;
  line-height: 180%;
}

#sflowInner .inner p br{
  display: none;
}

#sflowInner .inner p span{
  display: inline-block;
}








}