@charset "utf-8";
/* CSS Document */

body {
  font-family: 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  color: #212121;
}

header {
  display: block;
  background-color: #fff;
}

footer {
  display: block;
  background-color: #fff;
}

.content p {
  font-size: 12px;
  line-height: 1;
}

.content h2 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.content h3 {
  text-align: center;
  margin-bottom: 20px;
}

.content a {
  display: inline-block;
  line-height: 1;
}

.content a img {
  transition: opacity 0.6s;
}

.content a img:active,
.content a img:focus,
.content a img:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  display: inline-block;
}

.section_inner {
  max-width: 1220px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.sp_only {
  display: none;
}

.pc_only {
  display: block;
}

/*------------------------------------------------- ヘッダー --*/
.header {
  box-shadow: none;
}

.header__link img {
  display: block;
}

/*------------------------------------------------- MV --*/
.MV {
  background-color: #f9ed89;
}

.MV_inner {
  max-width: 1220px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

.MV_ly {
  display: flex;
  padding-top: 40px;
}

.MV_ly_left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  max-width: 514px;
  margin-right: 28px;
}

.MV_ly_left p {
  margin-bottom: 40px;
}

.MV_ly_left h1 {
  margin-bottom: 10px;
}

.MV_ly_left .cross_link a {
  text-decoration: underline;
  color: #4c4c4c;
  font-size: 20px;
}

.MV_ly_left .cross_link a:hover {
  text-decoration: none;
}

.MV_ly_right {
  position: relative;
}

.MV_ly_right .MV_photo {
  min-width: 400px;
}

.MV_ly_right .MV_catch {
  position: absolute;
  top: 0%;
  right: 0%;
  height: 100%;
}

.MV_ly_right .MV_catch img {
  max-height: 100%;
}

/*------------------------------------------------- コンテンツ境界線（波線） --*/
.Wave_01 {
  background: url("../img/wave_01.png") no-repeat;
  background-size: 100%;
  background-position: top left;
  background-color: #f9ed89;
  height: 36px;
}

.Wave_02 {
  background: url("../img/wave_02.png") no-repeat;
  background-size: 100%;
  background-position: top left;
  background-color: #f7d1b5;
  height: 107px;
}

.Wave_03 {
  background: url("../img/wave_03.png") no-repeat;
  background-size: 100%;
  background-position: bottom left;
  background-color: #f7d1b5;
  height: 130px;
}

.Wave_04 {
  background: url("../img/wave_04.png") no-repeat;
  background-size: 100%;
  background-position: bottom left;
  background-color: #eaebb9;
  height: 80px;
}

/*-------------------------------------------------  --*/
.center_align {
  text-align: center;
}

.mar_btm34 {
  margin-bottom: 34px;
}

.mar_btm54 {
  margin-bottom: 54px;
}

.Kirari {
  position: absolute;
  top: 0%;
  left: 5%;
  width: 129px;
  height: 157px;
  background: url("../img/visual_Kirari.png") no-repeat center center / 100% auto;
}

.Futaba {
  position: absolute;
  bottom: 5%;
  left: 3%;
  width: 119px;
  height: 110px;
  background: url("../img/visual_Futaba.png") no-repeat center center / 100% auto;
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  margin-top: 15px;
}

.fuwafuwa2 {
  animation: fuwafuwa 4s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.8s ease-in-out;
  margin-top: 15px;
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/*------------------------------------------------- 雲母保育園の魅力 --*/
.bl_kirara_charm {
  background-color: #f7d1b5;
  background-image:
    url("../img/visual_charm_01.png"),
    url("../img/visual_charm_02.png"),
    url("../img/visual_charm_03.png"),
    url("../img/visual_charm_04.png"),
    url("../img/visual_charm_05.png"),
    url("../img/visual_charm_06.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    top 100px left 30px,
    top 500px right 30px,
    top 1000px left 30px,
    bottom 1000px right 30px,
    bottom 500px left 30px,
    bottom 100px right 30px;
  background-size:
    10% auto,
    10% auto,
    10% auto,
    10% auto,
    10% auto,
    10% auto;
  overflow: hidden;
}

.bl_kirara_charm_cols {
  display: flex;
  flex-wrap: wrap;
}

.bl_kirara_charm_col {
  display: block;
  background-color: #fff;
  border: 2px solid #4c4c4c;
  box-shadow: 8px 8px 0px #fc7070;
  border-radius: 20px;
  width: 47%;
  margin-bottom: 64px;
  padding: 38px 25px;
}

.bl_kirara_charm_col:nth-child(odd) {
  margin-right: 6%;
}

.bl_kirara_charm_col p {
  font-size: 16px;
  line-height: 1.9;
}

.bl_kirara_charm_link {
  overflow: hidden;
}

/*------------------------------------------------- SNSでも随時情報公開中です --*/
.bl_sns_info {
  background-color: #eaebb9;
  overflow: hidden;
}

.h2_sns_info {
  padding-top: 40px;
}

.bl_sns_info_cols {
  display: flex;
  line-height: 1;
  justify-content: center;
  margin-bottom: 40px;
}

.bl_sns_info_col {
  line-height: 1;
  margin-right: 25px;
}

.bl_sns_info_col:last-child {
  margin-right: 0;
}

/*------------------------------------------------- 雲母保育園で働いてみませんか？ --*/
.bl_work_together {
  background-color: #fff;
  overflow: hidden;
  z-index: 99;
}

.h2_work_together {
  padding-top: 40px;
}

.bl_work_together p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 20px;
}

.bl_work_together_link {
  overflow: hidden;
}

.bl_work_together_link p {
  line-height: 1 !important;
}

/*------------------------------------------------- フッター --*/
.bl_footer_pageTop {
  z-index: 200;
}

.footer {
  overflow: hidden;
}

@media screen and (max-width: 1500px) {

  /*------------------------------------------------- 雲母保育園の魅力 --*/
  .bl_kirara_charm {
    background-image: none, none, none, none, none, none;
  }
}

@media screen and (max-width: 1200px) {

  /*------------------------------------------------- コンテンツ境界線（波線） --*/
  .Wave_01 {
    display: none;
  }

}

@media screen and (max-width: 900px) {

  /*------------------------------------------------- コンテンツ境界線（波線） --*/
  .Wave_01 {
    height: 25px;
  }

  .Wave_02 {
    height: 63px;
  }

  .Wave_03 {
    height: 80px;
  }

  .Wave_04 {
    height: 52px;
  }

  /*-------------------------------------------------  --*/
  .Kirari {
    top: 0;
    left: 0;
    background: url("../img/visual_Kirari.png") no-repeat center center / 60% auto;
  }

  .Futaba {
    bottom: 0;
    left: 0;
    background: url("../img/visual_Futaba.png") no-repeat center center / 60% auto;
  }

  /*------------------------------------------------- 雲母保育園の魅力 --*/
  .h2_kirara_charm img {
    max-height: 50px;
    max-width: 80%;
  }

  .bl_kirara_charm_col h3 img {
    width: 80%;
  }

}


/*------------------------------------------------- タブレット用 --*/
@media screen and (max-width: 767px) {

  /* 481px以上に適用されるCSS（タブレット用）*/
  .section_inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sp_only {
    display: block;
  }

  .pc_only {
    display: none;
  }

  /*------------------------------------------------- tabs MV --*/
  .MV_inner {
    padding: 0;
  }

  .MV_ly {
    display: block;
  }

  .MV_ly_left {
    margin: 0 auto;
  }

  .MV_ly_left img {
    max-width: 80%;
  }

  .MV_ly_left p {
    margin-bottom: 20px;
    text-align: center;
  }

  .MV_ly_left h1 {
    margin-bottom: 5px;
    text-align: center;
  }

  .MV_ly_left .cross_link {
    margin-left: auto;
    margin-right: auto;
  }

  .MV_ly_left .cross_link a {
    font-size: 18px;
  }

  .MV_ly_right {
    overflow: hidden;
  }

  .MV_ly_right .MV_photo {
    min-width: 0;
  }

  .MV_ly_right .MV_catch {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    height: auto;
  }

  /*------------------------------------------------- コンテンツ境界線（波線） --*/
  .Wave_02 {
    background-size: 150%;
    background-position: top left;
    height: 63px;
  }

  .Wave_03 {
    background-size: 150%;
    background-position: bottom 0% left 70%;
    height: 80px;
  }

  .Wave_04 {
    background-size: 150%;
    background-position: bottom 0% left 70%;
    height: 52px;
  }

  /*-------------------------------------------------  --*/
  .mar_btm34 {
    margin-bottom: 13px;
  }

  .mar_btm54 {
    margin-bottom: 33px;
  }

  .Kirari {
    position: absolute;
    top: 0%;
    left: 5%;
    width: 87px;
    height: 105px;
    background: url("../img/visual_Kirari.png") no-repeat center center / 100% auto;
  }

  .Futaba {
    position: absolute;
    bottom: auto;
    left: auto;
    top: 2%;
    right: 3%;
    width: 85px;
    height: 82px;
    background: url("../img/visual_Futaba.png") no-repeat center center / 100% auto;
  }

  /*------------------------------------------------- 雲母保育園の魅力 --*/
  .h2_kirara_charm img {
    max-height: 50px;
    max-width: 80%;
  }

  .bl_kirara_charm_cols {
    display: block;
  }

  .bl_kirara_charm_col {
    box-shadow: 6px 6px 0px #fc7070;
    width: 100%;
    margin-bottom: 33px;
    padding: 26px 22px;
  }

  .bl_kirara_charm_col:nth-child(odd) {
    margin-right: 0;
  }

  .bl_kirara_charm_col h3 img {
    width: auto;
    max-width: 100%;
  }

  .bl_kirara_charm_col p {
    font-size: 14px;
    line-height: 1.7;
  }

  /*------------------------------------------------- SNSでも随時情報公開中です --*/
  .h2_sns_info {
    padding-top: 0px;
  }

  .h2_sns_info img {
    max-height: 30px;
    margin-bottom: 5px;
  }

  .bl_sns_info_cols {
    margin-bottom: 0;
  }

  /*------------------------------------------------- 雲母保育園で働いてみませんか？ --*/
  .h2_work_together {
    padding-top: 10px;
  }

  .h2_work_together img {
    max-height: 30px;
    margin-bottom: 5px;
  }

  .bl_work_together p {
    font-size: 14px;
    line-height: 1.7;
  }

  .bl_work_together_link p {
    margin-bottom: 0px !important;
  }

  /*------------------------------------------------- フッター --*/
  .bl_footerUtils_logo img {
    display: block;
  }
}