@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  color: #906963;
}

html {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}


main p {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.02em;
  padding-left: 1em;
  margin-bottom: 1em;
}



/* ================================================= */
body {
  font-size: 22px;
  background-image: url(../img/service-bg.jpg);
  background-repeat:repeat-y;
  background-size: contain;
}

.wrapper {
    overflow: hidden;
}
/* ================================================= */
/* fz触らない */


main {
  margin-top: 200px;
}

main h2 {
  font-size: 43px;
  color: #E3608C;
}


main .ttl-en {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;  
  font-size: 22px;
  padding-left: 0;
}


main .page-ttl {
  text-align: center;
  margin-bottom: 70px;
}

main .page-ttl img {
  display: block;
  max-width: 45px;
  margin: 0 auto;
  margin-bottom: 9px;
}

/* ------------------------------------------------ */

main #fv  {

  text-align: center;
  margin-bottom: 85px;
}

main #fv img {
  width: 100%;
}
/* ------------------------------------------------ */
main .service-hr {
  width: 92%;
  margin: 0 auto 64px;

}

main .service-hr img {
  width: 100%;
}
/* ------------------------------------------------ */
main .support {
  max-width: 1280px;
  margin: 0 auto;

}
/* ------------------------------------------------ */


main .page-icon {
  max-width: 78px;
  margin: 0 auto 103px;
}


/* ------------------------------------------------ */

main h3 {
  width: 50%;
  margin-bottom: 20px;
}

main h3 img {
  width: 100%;
}

main .parenting-support,
main .medical-care,
main .developmental-support,
main .school-refusal-support,
main .sibling-support {
  padding:0 1em;
  margin-bottom: 180px;
  position: relative;
}

main h4 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5em;
  padding-left: 1em;
  margin-bottom: 73px;
}

/* ------------------------------------------------ */
main .img-balloon1 img,
main .img-bird1 img,
main .img-balloon2 img,
main .img-bird2 img,
main .img-balloon3 img  {
  width: 100%;
}


main .img-balloon1 {
  width: 30%;
  position: absolute;
  bottom: -10%;
  right: -20%;
} 

main .img-bird1 {
  width: 6%;
  position: absolute;
  top: 30%;
  left: -10%;
}

main .img-balloon2 {
  width: 20%;
  position: absolute;
  top: -20%;
  right: -10%;
} 

main .img-bird2 {
  width: 5%;
  position: absolute;
  top: 35%;
  right: 10%;  
}

main .img-balloon3 {
  width: 16%;
  position: absolute;
  top: 25%;
  left: -15%;   
}

main .main-u-img {
  width: 77%;
  margin: 0 auto;
  opacity: 0.4;
}

main .main-u-img img {
  width: 100%;
}

/* ================================================= */

.js-scroll.-fadein {
  opacity: 0;
  transform: translateY(7rem);
}
.js-scroll.-fadein.js-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ================================================= */

/* ================================================= */
@media screen and (max-width:1000px) {
.u-1000 {
  display: block;
}

.u-1000-none {
  display: none;
}

/* ------------------------------------------------ */
body {
  font-size: clamp(1.125rem, 0.5vw + 0.938rem, 1.25rem);
  /* 1000:20-600:18 */
}
/* ------------------------------------------------ */
main {
  margin-top: 150px;
}
  
main h2 {
  font-size: 30px;
}  

main .ttl-en {
  font-size: 18px; 
}

main .page-ttl img {
  max-width: 35px;
}
/* ------------------------------------------------ */

main .page-icon {
  max-width: 60px;
}

/* ------------------------------------------------ */

main #fv  {
  margin-bottom: 60px;
}

main h3 {
  width: 70%;
  margin-bottom: 20px;
}

main .parenting-support,
main .medical-care,
main .developmental-support,
main .school-refusal-support,
main .sibling-support {
  margin-bottom: 100px;
}


main .img-balloon1,
main .img-bird1,
main .img-balloon2,
main .img-bird2,
main .img-balloon3  {
  display: none;
}

main h4 {
 font-size: 28px;

 margin-bottom: 40px;
}



}/* media screen max-width:1000px */

@media screen and (max-width:600px) {
/* ------------------------------------------------ */
body {
  font-size: clamp(1rem, 0.667vw + 0.875rem, 1.125rem);
  /* 600:18-300:16 */
}
/* ------------------------------------------------ */

main {
  margin-top: 100px;
}

  main h2 {
  font-size: 24px;
}  

main .ttl-en {
  font-size: 14px; 
}

main .page-ttl {
  margin-bottom: 40px;
}

main .page-ttl img {
  max-width: 20px;
}

/* ------------------------------------------------ */
main .page-icon {
  max-width: 30px;
  margin: 0 auto 50px;
}

/* ------------------------------------------------ */
main #fv  {
  margin-bottom: 20px;
}

main .parenting-support,
main .medical-care,
main .developmental-support,
main .school-refusal-support,
main .sibling-support {
  margin-bottom: 80px;
}

main h4 {
  font-size: 16px;
  margin-bottom: 40px;
}

main h3 {
  width: 100%;
  margin-bottom: 10px;
}

}
/* media screen max-width:600px */