@import url("https://fonts.googleapis.com/css2?family=Cabin+Sketch&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
/*----------------------------------------------------*/
/* element reset
------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, a, input {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

ul, ol, dl {
  list-style: none; }

del {
  text-decoration: line-through; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  font-size: inherit;
  font: 100%; }

th, td, img {
  border: 0; }

caption, th {
  text-align: left; }

img, a img {
  background: transparent; }

address {
  font-style: normal; }

hr {
  display: none; }

input, select {
  vertical-align: middle; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*----------------------------------------------------*/
/* link
------------------------------------------------------*/
a:link {
  color: #534A31;
  text-decoration: none; }

a:visited {
  color: #534A31;
  text-decoration: none; }

a:hover {
  color: #534A31;
  text-decoration: none; }

a:active {
  color: #534A31;
  text-decoration: none; }

a:hover img,
input[type=image]:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8; }

a[href*="tel:"] {
  pointer-events: none; }
  @media screen and (max-width: 768px) {
    a[href*="tel:"] {
      pointer-events: initial; } }

/*----------------------------------------------------*/
/* base
------------------------------------------------------*/
html {
  font-size: 62.5%;
  overflow: auto; }
  @media screen and (max-width: 767px) {
    html {
      font-size: calc(1000vw / 384); } }

body {
  color: #534A31;
  font-family: 'Zen Maru Gothic', Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  font-size: 2rem;
  overflow: hidden;
  min-width: 1240px; }

p {
  line-height: 1.8;
  letter-spacing: .03em; }

dt, dd, li, th, td, address {
  line-height: 1.8;
  letter-spacing: .03em; }

h2, h3, h4 {
  letter-spacing: .03em; }

p, dt, dd, li, th, td, input, textarea, address {
  font-size: 100%; }

img {
  vertical-align: bottom;
  height: auto;
  max-width: 100%; }

a[href*="tel:"] {
  pointer-events: none; }
  @media screen and (max-width: 1240px) {
    a[href*="tel:"] {
      pointer-events: initial; } }

.sp {
  display: none !important; }

@media screen and (max-width: 1240px) {
  body {
    font-size: 1.666vw;
    min-width: initial; } }
@media screen and (max-width: 767px) {
  body, html {
    min-width: 0; }

  body {
    font-size: 1.4rem; }

  .pc {
    display: none; }

  .sp {
    display: block !important; }

  img {
    max-width: 100%; } }
/* mv
------------------------------------------------------*/
#mv {
  padding-bottom: 30px;
  position: relative; }
  #mv:before {
    background: url("/kids/lib/img/top/mv_pin_01.png") no-repeat;
    background-size: 100% auto;
    content: "";
    height: 285px;
    left: 9%;
    position: absolute;
    top: 20%;
    width: 144px;
    z-index: 10; }
  #mv:after {
    background: url("/kids/lib/img/top/mv_pin_02.png") no-repeat;
    background-size: 100% auto;
    content: "";
    height: 247px;
    position: absolute;
    right: 9%;
    top: 26%;
    width: 167px;
    z-index: 10; }
  #mv .slide li img {
    width: 100%; }
  @media screen and (max-width: 1240px) {
    #mv:before {
      height: 23.75vw;
      width: 12vw; }
    #mv:after {
      height: 20.583vw;
      width: 13.916vw; } }
  @media screen and (max-width: 767px) {
    #mv {
      padding-bottom: 1.5rem; }
      #mv:before {
        top: 40%; }
      #mv:after {
        top: 46%; }
      #mv .slide li img.pc {
        display: none; } }

/* slick */
.slick-dots li:nth-of-type(1) button:before {
  background: url("/kids/lib/img/top/dot_01_off.png") no-repeat;
  background-size: contain !important; }

.slick-dots li:nth-of-type(2) button:before {
  background: url("/kids/lib/img/top/dot_02_off.png") no-repeat;
  background-size: contain !important; }

.slick-dots li:nth-of-type(3) button:before {
  background: url("/kids/lib/img/top/dot_03_off.png") no-repeat;
  background-size: contain !important; }

.slick-dots li:nth-of-type(1).slick-active button:before {
  background: url("/kids/lib/img/top/dot_01_on.png") no-repeat;
  background-size: contain !important; }

.slick-dots li:nth-of-type(2).slick-active button:before {
  background: url("/kids/lib/img/top/dot_02_on.png") no-repeat;
  background-size: contain !important; }

.slick-dots li:nth-of-type(3).slick-active button:before {
  background: url("/kids/lib/img/top/dot_03_on.png") no-repeat;
  background-size: contain !important; }

.slick-dots li button:before {
  content: "" !important;
  height: 100% !important;
  width: 100% !important; }

.slick-dots li {
  width: 26px !important;
  height: 26px !important;
  margin: 0 10px !important;
  transition: all 0.5s 0s ease;
  vertical-align: middle; }
  .slick-dots li.slick-active {
    height: 44px !important;
    width: 44px !important; }

.slick-dots li button {
  width: 100% !important;
  height: 100% !important; }

.slick-dots {
  bottom: initial !important;
  margin-top: -10px !important; }

@media screen and (max-width: 767px) {
  .slick-dots li {
    width: 1.3rem !important;
    height: 1.3rem !important;
    margin: 0 .5rem !important; }
    .slick-dots li.slick-active {
      height: 2.2rem !important;
      width: 2.2rem !important; }

  .slick-dots {
    margin-top: 1rem !important; } }
/* message
------------------------------------------------------*/
#message {
  background: #DDEFF8 url("/kids/lib/img/cmn/bg_blue_top.png") left top repeat-x;
  margin-bottom: 10px; }
  #message .btmbg {
    background: url("/kids/lib/img/cmn/bg_blue_btm.png") left bottom repeat-x;
    padding: 90px 0 110px; }
  #message .director {
    display: flex;
    justify-content: space-between; }
    #message .director .photo {
      width: 41%; }
    #message .director .txt {
      padding-top: 3em;
      position: relative;
      width: 50%; }
      #message .director .txt:after {
        background: url("/kids/lib/img/top/message_pin_01.png") right bottom no-repeat;
        background-size: contain;
        bottom: -170px;
        content: "";
        height: 55%;
        position: absolute;
        right: 0;
        width: 100%;
        z-index: 10; }
      #message .director .txt p {
        line-height: 2; }
  @media screen and (max-width: 1240px) {
    #message .btmbg {
      padding: 90px 1em 110px; } }
  @media screen and (max-width: 767px) {
    #message .btmbg {
      padding: 4.5rem 2rem 5.5rem; }
    #message .director {
      display: block; }
      #message .director .photo {
        margin: 0 auto;
        width: 50%; }
      #message .director .txt {
        padding-top: 2rem;
        width: auto; }
        #message .director .txt:after {
          bottom: -10rem;
          width: 60%; } }

/* forkids
------------------------------------------------------*/
#forkids {
  background: #E2C5D3 url("/kids/lib/img/cmn/bg_pink_top.png") left top repeat-x;
  margin-bottom: 10px; }
  #forkids .btmbg {
    background: url("/kids/lib/img/cmn/bg_pink_btm.png") left bottom repeat-x;
    padding: 90px 0 70px; }
  #forkids h2 {
    margin-bottom: 180px; }
  #forkids ul {
    display: flex;
    justify-content: space-between; }
    #forkids ul li {
      line-height: 1.2;
      position: relative;
      text-align: center;
      width: 31.6%; }
      #forkids ul li span {
        color: #fff;
        display: inline-block;
        left: 50%;
        padding: 4em .5em;
        position: absolute;
        top: 0;
        white-space: nowrap;
        min-width: 8em;
        transform: translateX(-50%) translateY(-68%); }
      #forkids ul li:first-child span {
        background: url("/kids/lib/img/top/bg_type_01.png") center center no-repeat;
        background-size: contain;
        padding: 4em 1em; }
      #forkids ul li:nth-child(2) span {
        background: url("/kids/lib/img/top/bg_type_02.png") center center no-repeat;
        background-size: contain;
        padding: 4em 1em; }
      #forkids ul li:last-child span {
        background: url("/kids/lib/img/top/bg_type_03.png") center center no-repeat;
        background-size: contain; }
  @media screen and (max-width: 1240px) {
    #forkids .btmbg {
      padding: 90px 1em 70px; } }
  @media screen and (max-width: 767px) {
    #forkids .btmbg {
      padding: 4.5rem 2rem 3.5rem; }
    #forkids h2 {
      margin-bottom: 9rem; }
    #forkids ul {
      flex-wrap: wrap;
      justify-content: center; }
      #forkids ul li {
        width: 48%; }
        #forkids ul li span {
          font-size: 1.2rem;
          padding: 4em .5em; }
        #forkids ul li:first-child {
          margin-bottom: 8rem; }
          #forkids ul li:first-child span {
            padding: 4em 1em; }
        #forkids ul li:nth-child(2) {
          margin-right: 4%; }
          #forkids ul li:nth-child(2) span {
            transform: translateX(-20%) translateY(-68%);
            left: 0;
            font-size: 80%;
            padding: 4em 1em; }
        #forkids ul li:nth-child(3) span {
          transform: translateX(-20%) translateY(-78%);
          left: 50%; }
        #forkids ul li:nth-child(n+2) {
          order: 1; }
      #forkids ul::after {
        content: "";
        width: 100%; } }

/* worries
------------------------------------------------------*/
#worries {
  background: #FAE89A url("/kids/lib/img/cmn/bg_yellow_top.png") left top repeat-x;
  margin-bottom: 70px; }
  #worries .btmbg {
    background: url("/kids/lib/img/cmn/bg_yellow_btm.png") left bottom repeat-x;
    padding: 100px 0 70px; }
  #worries ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px; }
    #worries ul li {
      background: url("/kids/lib/img/top/worries_05.png") center bottom no-repeat;
      background-size: 81px auto;
      padding-bottom: 170px;
      width: 34%; }
  #worries section {
    background: url("/kids/lib/img/top/bg_box_mdl.gif") center top repeat-y;
    background-size: 100% auto;
    padding: 70px 50px;
    position: relative; }
    #worries section:before {
      background: url("/kids/lib/img/top/bg_box_top.gif") center top repeat-y;
      background-size: 100% auto;
      content: "";
      height: 21px;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; }
    #worries section:after {
      background: url("/kids/lib/img/top/bg_box_btm.gif") center top repeat-y;
      background-size: 100% auto;
      bottom: 0;
      content: "";
      height: 12px;
      left: 0;
      position: absolute;
      width: 100%; }
  #worries h3 {
    background: url("/kids/lib/img/top/bg_worries.png") center center no-repeat;
    background-size: contain;
    color: #fff;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 1.2em;
    text-align: center;
    padding: .8em 0;
    position: relative; }
    #worries h3:before {
      background: url("/kids/lib/img/top/worries_pin_01.png") center top no-repeat;
      background-size: 100% auto;
      content: "";
      height: 319px;
      left: -20px;
      position: absolute;
      top: -140px;
      width: 123px; }
    #worries h3:after {
      background: url("/kids/lib/img/top/worries_pin_02.png") center top no-repeat;
      background-size: 100% auto;
      content: "";
      height: 321px;
      position: absolute;
      right: -30px;
      top: -132px;
      width: 169px; }
  #worries .health {
    display: flex;
    justify-content: space-between; }
    #worries .health .photo {
      width: 34%; }
    #worries .health .txt {
      width: 60%; }
      #worries .health .txt p {
        margin-bottom: 1.5em; }
  @media screen and (max-width: 1240px) {
    #worries .btmbg {
      padding: 100px 1em 70px; }
    #worries section:before {
      height: 1.666vw; }
    #worries section:after {
      height: 1vw; }
    #worries h3 {
      font-size: 3.333vw; }
      #worries h3:before {
        height: 26.583vw;
        left: -1.666vw;
        top: -11.666vw;
        width: 10.25vw; }
      #worries h3:after {
        height: 26.75vw;
        right: -2.5vw;
        top: -11vw;
        width: 14.083vw; } }
  @media screen and (max-width: 767px) {
    #worries .btmbg {
      padding: 5rem 2rem 3.5rem; }
    #worries ul {
      margin-bottom: 2rem;
      padding-bottom: 10rem;
      position: relative; }
      #worries ul li {
        background: url("/kids/lib/img/top/worries_05.png") center bottom no-repeat;
        background-size: 4rem auto;
        padding-bottom: 8rem;
        width: 45%; }
        #worries ul li:nth-child(2) {
          bottom: 0;
          left: 50%;
          position: absolute;
          transform: translateX(-50%);
          z-index: 3; }
    #worries section {
      padding: 2rem; }
    #worries h3 {
      font-size: 1.6rem; }
      #worries h3:before {
        height: 15.9rem;
        left: -4rem;
        top: -5rem;
        width: 5rem; }
      #worries h3:after {
        height: 16rem;
        right: -4rem;
        top: -5rem;
        width: 6.5rem; }
    #worries .health {
      display: block; }
      #worries .health .photo {
        margin-bottom: 1.5em;
        width: auto; }
        #worries .health .photo img {
          width: 100%; }
      #worries .health .txt {
        width: auto; } }

/* scene
------------------------------------------------------*/
#scene {
  padding-bottom: 60px; }
  #scene .slide2 li {
    padding-bottom: 3em; }
    #scene .slide2 li dl {
      position: relative; }
      #scene .slide2 li dl dd {
        bottom: -3em;
        left: 50%;
        position: absolute;
        text-align: center;
        transform: translateX(-50%);
        width: 100%;
        z-index: 3; }
        #scene .slide2 li dl dd span {
          color: #fff;
          display: inline-block;
          min-width: 65%; }
    #scene .slide2 li.scene01 dl dd span {
      background: url("/kids/lib/img/top/bg_slide2_01.png") center center no-repeat;
      background-size: contain;
      padding: 1.5em 3em; }
    #scene .slide2 li.scene02 dl dd span {
      background: url("/kids/lib/img/top/bg_slide2_02.png") center center no-repeat;
      background-size: contain;
      padding: 3em 4em; }
    #scene .slide2 li.scene03 dl dd span {
      background: url("/kids/lib/img/top/bg_slide2_03.png") center center no-repeat;
      background-size: contain;
      padding: 3em 4em; }
    #scene .slide2 li.scene04 dl dd span {
      background: url("/kids/lib/img/top/bg_slide2_01.png") center center no-repeat;
      background-size: contain;
      padding: 1.5em 5em; }
    #scene .slide2 li.scene05 dl dd span {
      background: url("/kids/lib/img/top/bg_slide2_02.png") center center no-repeat;
      background-size: contain;
      padding: 1.5em 2em; }
  @media screen and (max-width: 767px) {
    #scene {
      padding-bottom: 3rem; }
      #scene .slide2 li dl dd span {
        font-size: 1.2rem; } }