@charset "UTF-8";

/*
=====================================================================
こどものくにガーデン トップページ css
=====================================================================
*/

.splide__slide img {
  height: auto;
  width: 100%;
}

.splide__pagination{
  margin-top: 40px !important;
}

.splide__pagination button{
  background-color: #ccc;
  height: 15px;
  transition: .5s all;
  width: 15px;
  border-radius: 50%;
}

.splide__pagination__page.is-active {
  background-color: #000 !important;
  opacity: 1 !important;
}

.splide__pagination li {
  margin: 0 5px !important;
}

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

/********************************************************
 * header
 *******************************************************/

/* headerInner */
#headerInner{
  position: relative;
  min-width: 1100px;
  margin-bottom: 130px;
}

#mvWrap{
  width: 1100px;
  margin: 0 auto 120px;
}

#mvWrap h1{
  width: 420px;
  margin: 0 auto 55px;
}

#illustTopB{
  width: 62.5%;
  margin: 0 auto;
}

/* newsWrap
----------------------------------------------------- */
#newsWrap{
  width: 1100px;
  margin: 0 auto 130px;
}

#newsTtl {
  width: 180px;
}

#newsTtl h2 {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}

#contents .btn {
  font-size: 1.6rem;
  font-weight: 700;
}

#contents .btn a {
  display: block;
  padding: 8px;
  text-align: center;
  color: #fff;
  background: #977d30;
  border-radius: 5px;
}

#contents .btn a:hover{
  opacity: 0.5;
}

#newsInner{
  width: 780px;
}

#newsInner .inner {
  border-bottom: 1px solid #aaa9a7;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

#newsInner .inner .date {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

#newsInner .inner h3 {
  font-size: 1.6rem;
  font-weight: 700;
}

#newsInner .inner h3 a {
  color: #4c8977;
}

#newsInner .inner h3 a:hover {
  opacity: 0.5;
}


/* introWrap
----------------------------------------------------- */
#introWrap{
  width: 920px;
  margin: 0 auto 130px;
}

#introInnerTop{
  width: 830px;
  margin: 0 auto 100px;
}

#introInnerTop p{
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  line-height: 230%;
}

#introInnerTop .photo{
  width: 260px;
}

#introInnerSec{
  width: 830px;
  margin: 0 auto 80px;
}

#introInnerSec .photo{
  width: 320px;
}

#introInnerSec .illust{
  width: 305px;
}

/* bannerWrap
----------------------------------------------------- */
#bannerWrap{
  width: 880px;
  margin: 0 auto 150px;
}

#bannerWrap .bannerInner{
  width: 400px;
  border: 2px solid #4c8977;
  border-radius: 10px;
}

#bannerWrap .bannerInner a{
  display: block;
  padding: 35px;
}

#bannerWrap .bannerInner a:hover p{
  color: #acccc2;
}

#bannerWrap .bannerInner .column{
  align-items: center;
}

#bannerWrap .bannerInner h2{
  width: 330px;
  margin: 0 auto 30px;
}

#bannerWrap .bannerInner .illust{
  width: 110px;
}

#bannerWrap .bannerInner p{
  font-size: 1.4rem;
  color: #4c8977;
}


/* supportWrap
----------------------------------------------------- */
#supportWrap{
  width: 930px;
  margin: 0 auto 200px;
}

#supportWrap h3{
  font-size: 2.0rem;
}

#supportWrap p{
  font-size: 1.6rem;
}

/* cheer */
#supportWrap .cheer{
  width: 350px;
}

#supportWrap .cheer .supTop{
  width: 300px;
  margin: 0 auto 35px;
}

#supportWrap .cheer .supTtlWrap{
  margin-bottom: 50px;
  align-items: center;
}

#supportWrap .cheer .supTtlWrap .illust{
  width: 120px;
}

#supportWrap .cheer .btnLink{
  margin-top: 55px;
  text-align: center;
}

#supportWrap .cheer .supBottom{
  width: 335px;
  margin: 60px auto 0;
}

/* set */
#supportWrap .set{
  width: 460px;
  margin-top: 80px;
}

#supportWrap .set .supTop{
  width: 410px;
  margin: 0 auto 35px;
}

#supportWrap .set .supTtlWrap{
  align-items: center;
}

#supportWrap .set .supTtlWrap .inner{
  width: 200px;
}

#supportWrap .set .supTtlWrap .inner h3{
  margin-bottom: 30px;
}

#supportWrap .set .supTtlWrap .inner p{
  margin-bottom: 40px;
}

#supportWrap .set .supTtlWrap .photo{
  width: 200px;
}

#supportWrap .set .supBottom{
  width: 440px;
  margin: 60px auto 0;
}

/* photoWrap
----------------------------------------------------- */
#photoWrap .photoList{
  width: 340px;
}

#photoWrap .photoList li{
  margin-bottom: 40px;
}

#photoWrap .photoList li:last-child{
  margin-bottom: 0;
}



}

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

/********************************************************
 * header
 *******************************************************/

/* headerInner */
#mvWrap h1{
  width: 60%;
  margin: 0 auto 30px;
}

#illustTopB{
  width: 62.5%;
  margin: 0 auto;
}

/* introWrap
----------------------------------------------------- */
#introWrap{
  margin: 0 0 80px;
}

#introInnerTop{
  display: flex;
  justify-content: space-between;
  margin: 0 0 40px;
}

#introInnerTop p{
  width: 60%;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  line-height: 230%;
}

#introInnerTop p br{
  display: none;
}

#introInnerTop .photo{
  width: 31%;
}

#introInnerSec{
  display: flex;
  justify-content: space-between;
  margin: 0 0 40px;
}

#introInnerSec .photo{
  width: 50%;
}

#introInnerSec .illust{
  width: 36%;
}

/* newsWrap
----------------------------------------------------- */
#newsWrap{
  margin: 0 auto 80px;
}

#newsTtl{
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#newsTtl h2 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#contents .btn {
  font-size: 1.3rem;
  font-weight: 700;
}

#contents .btn a {
  display: block;
  padding: 8px 20px;
  text-align: center;
  color: #fff;
  background: #977d30;
}

#newsInner{
  
}

#newsInner .inner {
  border-bottom: 1px solid #aaa9a7;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#newsInner .inner .date {
  font-size: 1.2rem;
  margin-bottom: 10px;
  line-height: 100%;
}

#newsInner .inner h3 {
  font-size: 1.4rem;
  font-weight: 700;
}

#newsInner .inner h3 a {
  color: #4c8977;
}

#newsInner .inner h3 a:hover {
  opacity: 0.5;
}

/* bannerWrap
----------------------------------------------------- */
#bannerWrap{
  margin: 0 0 80px;
}

#bannerWrap .bannerInner{
  width: 100%;
  border: 2px solid #4c8977;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

#bannerWrap .bannerInner a{
  display: block;
  padding: 25px 15px;
}

#bannerWrap .bannerInner a:hover p{
  color: #acccc2;
}

#bannerWrap .bannerInner .column{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#bannerWrap .bannerInner h2{
  width: 90%;
  margin: 0 auto 30px;
}

#bannerWrap .bannerInner .illust{
  width: 30%;
}

#bannerWrap .bannerInner p{
  font-size: 1.3rem;
  color: #4c8977;
}

/* supportWrap
----------------------------------------------------- */
#supportWrap{
  margin: 0 auto 80px;
}

#supportWrap h3{
  font-size: 1.6rem;
}

#supportWrap p{
  font-size: 1.3rem;
}

/* cheer */
#supportWrap .cheer{
  margin-bottom: 100px;
}

#supportWrap .cheer .supTop{
  margin: 0 0 35px;
}

#supportWrap .cheer .supTtlWrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  align-items: center;
}

#supportWrap .cheer .supTtlWrap .illust{
  width: 40%;
}

#supportWrap .cheer .btnLink{
  margin-top: 40px;
  text-align: center;
}

#supportWrap .cheer .supBottom{
  margin: 40px auto 0;
}

/* set */
#supportWrap .set{
  
}

#supportWrap .set .supTop{
  margin: 0 0 35px;
}

#supportWrap .set .supTtlWrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#supportWrap .set .supTtlWrap .inner{
  width: 45%;
}

#supportWrap .set .supTtlWrap .inner h3{
  margin-bottom: 20px;
}

#supportWrap .set .supTtlWrap .inner p{
  margin-bottom: 30px;
}

#supportWrap .set .supTtlWrap .inner p.btnLink{
  margin: 0;
}

#supportWrap .set .supTtlWrap .photo{
  width: 40%;
}

#supportWrap .set .supBottom{
  margin: 40px auto 0;
}

/* photoWrap
----------------------------------------------------- */
#photoWrap{
  display: flex;
  justify-content: space-between;
}

#photoWrap .photoList{
  width: 31%;
}

#photoWrap .photoList li{
  margin-bottom: 12%;
}

#photoWrap .photoList li:last-child{
  margin-bottom: 0;
}

}