@charset "utf-8";

/* 見出し */
h2{
  font-size:3rem;
  text-align:center;
  margin-bottom:30px;
  line-height:150%;
}

/* main */
#main{
  background:url("../images/top/bg_main.jpg") no-repeat center bottom/cover;
  text-align:center;
  color:#fff;
  padding:30px 20px 250px 20px;
}
#main h2{
  font-size:2.4rem;
  line-height:150%;
  margin-bottom:0;
}
#main p.lead{
  line-height:175%;
  margin-top:30px;
}
#main p.lead br{
  display:none;
}
#main ul.btn{
  margin-top:30px;
}
#main ul.btn li:first-child{
  margin-bottom:20px;
}
#main ul.btn a{
  display:inline-block;
  background:#e3930e;
  color:#fff;
  padding:20px;
  text-decoration:none;
  width:10em;
}
#main p.note{
  display:inline-block;
  margin-top:40px;
  line-height:150%;
  padding:10px;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
}

/* bnr */
#bnr{
  background:#d9e6ee;
  padding:30px 20px;
}
#bnr p{
  line-height:150%;
}
#bnr ul{
  margin-top:20px;
}
#bnr ul li:first-child{
  margin-bottom:10px;
}

/* 発達障害について */
#about{
  padding:30px 20px;
}
#about ul li{
  margin-bottom:10px;
}
#about ul li a{
  display:flex;
  align-items:center;
  text-decoration:none;
  border:1px solid #048bbf;
  padding:10px 0;
}
#about span.image{
  width:30%;
  text-align:center;
}
#about span.image img{
  max-height:80px;
}
#about span.text span{
  font-size:2.4rem;
  font-weight:bold;
}

/* センターのご紹介 */
#center{
  padding:30px 20px;
  background:#d9e6ee;
}
#center p.lead{
  line-height:150%;
}
#center ul.centerlist{
  margin-top:30px;
}
#center ul.centerlist li{
  margin-bottom:15px;
}
#center ul.centerlist li a{
  display:flex;
  background:#fff;
  align-items:center;
  text-decoration:none;
}
#center ul.centerlist li span.photo{
  width:40%;
}
#center ul.centerlist li span.text{
  width:60%;
  box-sizing:border-box;
  padding:10px;
  font-weight:bold;
}
#center ul.centerlist li span.text span{
  display:block;
  font-size:1rem;
  margin-bottom:5px;
  font-weight:normal;
}

/* 地図から探す */
#center .areamap h3{
  font-size:2rem;
  line-height:135%;
  margin-top:50px;
}
#center .areamap p{
  margin-top:10px;
  line-height:150%;
}
#center .areamap p br{
  display:none;
}
#center .areamap #map{
  margin-top:30px;
}

/* お知らせ */
#info{
  padding:30px 20px;
}
#info h2{
  padding-bottom:5px;
  border-bottom:2px solid #e3930e;
  text-align:left;
  line-height:100%;
  margin-bottom:0;
}
#info h2 span{
  display:block;
  font-size:1.2rem;
  line-height:135%;
  margin-top:5px;
  font-weight:normal;
}
#info table{
  width:100%;
  text-align:left;
}
#info table th,
#info table td{
  display:block;
  width:100%;
}
#info table th{
  margin-bottom:5px;
  padding-top:10px;
}
#info table th span{
  display:inline-block;
  color:#fff;
  background:#048bbf;
  font-weight:normal;
  padding:3px 5px;
  margin-left:10px;
}
#info table td{
  padding-bottom:10px;
  border-bottom:1px dotted #969696;
}
#info table tr:last-child td{
  border-bottom:2px solid #e3930e;
}
#info table td span{
  display:block;
}
#info table td span a{
  display:inline-block;
  background:url("../images/PDF_32.png") no-repeat right center;
  padding-right:35px;
  line-height:135%;
  min-height:32px;
}
#info table td span.event-date{
  margin:10px 0;
}
#info table td span.text{
  line-height:135%;
}
#info .btn{
  text-align:center;
  margin-top:20px;
}
#info .btn a{
  display:inline-block;
  padding:20px 70px;
  background:#e3930e;
  color:#fff;
  text-decoration:none;
}

/* リレーコラム */
#column{
  padding:30px 20px;
  background:#d9e6ee;
}
#column h2{
  padding-bottom:5px;
  border-bottom:2px solid #048bbf;
  text-align:left;
  line-height:100%;
  margin-bottom:10px;
}
#column h2 span{
  display:block;
  font-size:1.2rem;
  line-height:135%;
  margin-top:5px;
  font-weight:normal;
}
#column ul,
#column p.nodata{
  border-bottom:2px solid #048bbf;    
}
#column p.nodata{
  padding-bottom:10px;
}
#column ul li{
  margin-bottom:10px;
}
#column ul li a{
  display:flex;
  background:#fff;
  border-radius:5px;
  overflow:hidden;
  color:#000;
  text-decoration:none;
}
#column ul li .eye-catch{
  width:50%;
  min-height:112px;
}
#column ul li .eye-catch img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
}
#column ul li .text{
  width:50%;
  box-sizing:border-box;
  padding:10px;
}
#column ul li .text span{
  display:block;
}
#column ul li .text span.date{
  font-weight:bold;
}
#column ul li .text span.title{
  margin:5px 0 25px 0;
}
#column ul li .text span.view-more{
  text-align:right;
}
#column .btn{
  text-align:center;
  margin-top:20px;
}
#column .btn a{
  display:inline-block;
  padding:20px 70px;
  background:#048bbf;
  color:#fff;
  text-decoration:none;
}

/* ペアレント・メンター研修動画 */
#movie{
  padding:30px 20px;
}
#movie .movie-inner{
  text-align:center;
}



/* タブレット
-------------------------------------------------- */
@media only screen and (min-width: 667px) {

  /* main */
  #main p.lead br{
    display:inline;
  }
  #main ul.btn{
    display:flex;
    justify-content:center;
  }
  #main ul.btn li:first-child{
    margin-bottom:0;
    margin-right:10px;
  }
  #main p.note br{
    display:none;
  }

  /* bnr */
  #bnr p{
    text-align:center;
  }
  #bnr ul{
    display:flex;
    justify-content:center;
  }
  #bnr ul li:first-child{
    margin-bottom:0;
    margin-right:10px;
  }
  #bnr ul li img{
    max-width:400px;
  }

  /* 発達障害について */
  #about ul{
    display:flex;
    justify-content:center;
  }
  #about ul li{
    margin-bottom:0;
    width:32%;
    margin-right:2%;
  }
  #about ul li:last-child{
    margin-right:0;
  }
  #about ul li a{
    display:block;
    text-align:center;
    padding:25px 0;
  }
  #about span.image{
    display:block;
    width:100%;
    margin-bottom:15px;
  }
  #about span.text{
    text-align:center;
  }
  #about span.text span{
    display:block;
    margin-top:5px;
  }

  /* センターのご紹介 */
  #center p.lead{
    text-align:center;
  }
  #center ul.centerlist{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  #center ul.centerlist li{
    width:49%;
  }

  /* 地図から探す */
  #center .areamap h3{
    text-align:center;
  }
  #center .areamap p{
    text-align:center;
  }

  /* お知らせ */
  #info h2 span{
    display:inline-block;
    margin-top:0;
    margin-left:10px;
  }

  /* リレーコラム */
  #column h2 span{
    display:inline-block;
    margin-top:0;
    margin-left:10px;
  }
  #column ul{
    display:flex;
  }
  #column ul li{
    width:32%;
    margin-right:2%;
  }
  #column ul li:last-child{
    margin-right:0;
  }
  #column ul li a{
    display:block;
  }
  #column ul li .eye-catch{
    width:100%;
    height:134px;
  }
  #column ul li .text{
    width:100%;
  }
}



/* PC
-------------------------------------------------- */
@media only screen and (min-width: 1024px) {

  /* main */
  #main{
    padding:50px 30px 250px 30px;
  }

  /* bnr */
  #bnr{
    padding:40px 30px 50px 30px;
  }
  #bnr ul li:first-child{
    margin-right:30px;
  }

  /* 発達障害について */
  #about{
    padding:40px 30px 50px 30px;
  }
  #about ul{
    max-width:1000px;
    margin:0 auto;
  }
  #about ul li{
    margin-bottom:0;
    width:30%;
    margin-right:5%;
  }
  #about span.image img{
    max-height:120px;
  }

  /* センターのご紹介 */
  #center{
    padding:40px 30px 50px 30px;
  }
  #center ul.centerlist{
    max-width:1000px;
    margin:30px auto 0 auto;
  }
  #center ul.centerlist li span.text{
    padding:20px;
  }

  /* 地図から探す */
  #center .areamap{
    display:flex;
    margin:0 auto;
    justify-content:center;
  }
  #center .areamap h3{
    text-align:left;
    margin-top:100px;
  }
  #center .areamap p{
    text-align:left;
  }
  #center .areamap p br{
    display:inline;
  }

  /* お知らせ */
  #info{
    padding:40px 30px 50px 30px;
  }
  #info h2{
    max-width:1000px;
    margin:0 auto;
  }
  #info table{
    max-width:1000px;
    margin:0 auto;
  }
  #info table th,
  #info table td{
    display:table-cell;
    width:auto;
  }
  #info table th{
    white-space:nowrap;
    padding-right:10px;
    border-bottom: 1px dotted #969696;
  }
  #info table tr:last-child th {
    border-bottom: 2px solid #e3930e;
  }

  /* リレーコラム */
  #column{
    padding:40px 30px 50px 30px;
  }
  #column h2{
    max-width:1000px;
    margin:0 auto 20px auto;
  }
  #column ul,
  #column p.nodata{
    max-width:1000px;
    margin:0 auto;
  }
  #column p.nodata{
    padding-bottom:20px;
  }
  #column ul li{
    width:30%;
    margin-right:5%;
    margin-bottom:20px;
  }
  #column ul li .eye-catch{
    height:200px;
  }
  #column ul li .text{
    padding:20px;
  }

  /* ペアレント・メンター研修動画 */
  #movie{
    padding:50px 30px;
  }
}