@charset "utf-8";

.visibility_hidden {
  visibility: hidden!important;
}

/* ::::: overwrite content.css start ::::: */
div.wrap {
  overflow-x: hidden;
}

div.section {
  padding: 0;
}

div.section.mainV {
  background: #d2e5f6;
  height: auto;
  padding: 0 0 50px;
}

div.section.mainV h1 {
  display: block;
  height: auto;
  position: static;
  padding-top: 60px;
}

div.section h2 {
  background: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

div.section h3 {
  margin: 0;
  padding: 0;
}

div.section p {
  margin: 0;
}

div.section p.commnonBtn a {
  border: 4px solid #003366;
  border-radius: 50rem;
}

div.section.mainV ul.breadcrumbs li:first-child {
  background: url(../../img/common/breadcrumbs_blue.svg) no-repeat left center;
  background-size: 15px 15px;
}

div.section.mainV ul.breadcrumbs li {
  color: #003366;
}

div.section.mainV ul.breadcrumbs li a {
  color: #003366;
}

/* ::::: overwrite content.css end ::::: */


body {
  background-color: #d2e5f6;
}

footer.mainFooter {
  background-color: #FFF;
}

.bg_color {
  background-color: #d2e5f6;
}

.contents_outer {
  font-family: 'YakuHanJP_Noto', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif;
  margin: 0 auto;
/*
  max-width: 1300px;
*/
  text-align: center;
}

.contents_outer img {
  height: auto;
  max-width: 100%;
}

.mv_contents_outer {
  margin: 0 auto;
  max-width: 1300px;
}

.mv_contents {
  margin: -6% 4.95% 0 35%;
  max-width: 660px;
  text-align: left;
}

div.section .mv_contents h2 {
  font-size: 29px;
  letter-spacing: .1em;
  line-height: 35px;
}

div.section .mv_contents p {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 39px;
  margin: 8px 0 0;
  position: relative;
}

.mv_counter {
  align-items: center;
  display: flex;
  margin: 35px 0 0;
  white-space: nowrap;
}

.mv_counter_label {
  text-align: right;
  padding: 0 20px 0 0;
}

.mv_counter_label_txt {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 39px;
}

.mv_counter_label_date {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 32px;
}

.mv_counter_num_value {
  background-color: #113961;
  border-radius: 10px;
  color: #FFF;
  display: inline-block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 51px;
  height: 62.5px;
  letter-spacing: .12em;
  line-height: 24px;
  margin: 0 14px 0 0;
  padding: 32.5px 0 0 .12em;
  text-align: center;
  min-width: 265px;
}

.mv_counter_num_suffix {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 39px;
}

.section.contents {
  background-color: #FFF;
  border-radius: 10px;
  margin: 0 auto;
  max-width: 1000px;
  padding-top: 50px;
  width: 96%;
}

.section.contents + .section.contents {
  margin: 80px auto 0;
}

.contents_inner {
  margin: 0 2.8% 0 10%;
  max-width: 872px;
}

div.contents_title {
  align-items: center;
  display: flex;
}

div.contents h3 {
  margin: 0 20px 0 0;
}

.contents_tag {
  background-color: #113961;
  border-radius: 10px;
  color: #FFF;
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  line-height: 25px;
  padding: 2px 7px 3px;
}
.contents_tag.spacing_01 {
  letter-spacing: .19em;
}
.contents_tag.spacing_02 {
  letter-spacing: .1em;
}

.contents_title_tags {
  font-size: 0;
  padding: 7px 0 0 7px;
  text-align: left;
}
#contents_workshop .contents_title_tags {
  flex-basis: 293px;
  width: 293px;
}
#contents_aqua_meister .contents_title_tags {
  flex-basis: 400px;
  width: 400px;
}

.contents_title_tags .contents_tag {
  margin: 0 7px 7px 0;
}

.contents_lead {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 32px;
  max-width: 800px;
  padding: 10px 0 0;
  text-align: justify;
  width: 91.8%;
}

.contents_imgs {
  align-items: center;
  display: flex;
  margin: 0 -12.5px;
}

.contents_imgs_item {
  margin: 0 12.5px;
}

.contents_imgs_item img {
  width: 100%;
}

.contents_imgs_item.contents_imgs_card img {
  margin-bottom: 32px;
}

.contents_img_caption {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 32px;
  text-align: justify;
}

div.section p.contents_link {
  padding: 0 0 40px;
}

div.section p.contents_link a {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 35px;
  padding: 4px 10px;
  width: 252px;
}

.contents_howto {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}

.contents_howto_desc {
  flex-basis: 42.5%;
  text-align: left;
  width: 42.5%;
}

.contents_howto .contents_tag {
  font-size: 23px;
  font-weight: 700;
  line-height: 25px;
  padding: 10px 14px;
}

.counter_list {
  counter-reset: cnt;
  margin-bottom: 0;
  margin-left: 2.2em;
  padding-left: 0;
}
.counter_list li {
  counter-increment: cnt;
  list-style-type: none;
  position: relative;
}

.counter_list li::before {
  border: 1px solid;
  border-radius: 50%;
  content: counter(cnt);
  display: inline-block;
  height: 1em;
  left: 0;
  line-height: 1;
  margin-left: -2.2em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1em;
}

.contents_howto .counter_list {
  margin: 12px 0 0 18px;
}

.contents_howto .counter_list li {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 25px;
  margin-bottom: 12px;
}

.contents_howto .counter_list li::before {
  font-size: 12px;
  font-weight: 500;
  height: 15px;
  line-height: 15px;
  margin-bottom: 3px;
  margin-left: -18px;
  margin-top: 5px;
  width: 15px;
}

.contents_howto_img {
  flex-basis: 57.5%;
  width: 57.5%;
}

.contents_howto_img img {
  display: block;
  margin: 0 auto 0 0;
  max-width: 460px;
  width: 92%;
}

div.section p.contents_howto_note {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 20px;
  padding: 10px 0 0;
  text-align: left;
}

.contents_inner#contents_school_program {
  margin: 0 10%;
  padding: 0 0 70px;
  max-width: 800px;
}

#contents_school_program .counter_list {
  margin: 0;
  padding: 10px 0 0;
  text-align: left;
}

#contents_school_program .counter_list li + li {
  margin: 30px 0 0;
}

#contents_school_program .counter_list li::before {
  font-size: 19px;
  font-weight: 500;
  height: 19px;
  line-height: 19px;
  margin-bottom: 6px;
  margin-left: 0;
  margin-top: 8px;
  width: 19px;
}

.sp_list_title {
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: .15em;
  margin-left: 26px;
}

.sp_list_desc {
  display: flex;
  margin: 0 -22px;
  padding: 6px 0 0;
}

.sp_list_desc_img,
div.section p.sp_list_desc_txt {
  margin: 0 22px;
}

.sp_list_desc_img {
  flex-basis: 38.5%;
  max-width: 290px;
  padding-top: 8px;
  width: 38.5%;
}

.sp_list_desc_img img {
  display: block;
  width: 100%;
}

div.section #contents_school_program p.contents_link {
  padding: 20px 0 0;
}

div.section #contents_school_program p.contents_link a {
  font-size: 16px;
  line-height: 30px;
  padding: 3px 10px;
  width: calc(100% - 28px);
}

div.section p.sp_list_desc_txt {
  flex-basis: 60.5%;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 32px;
  text-align: justify;
  width: 60.5%;
}

div.section p.sp_list_desc_txt span {
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 26px;
}

#aqtion {
  background-color: #d2e5f6;
  border-radius: 0;
  margin: 62px auto 0;
  padding-top: 0;
}

div.section#aqtion p.contents_link {
  padding: 62px 0 75px;
}

div.section#aqtion p.contents_link a {
  background-color: #FFF;
  font-size: 20px;
  line-height: 35px;
  padding: 6px 0;
  width: 276px;
}

/* ::::::::::::::::::::::: illust ::::::::::::::::::::::: */
.deco_illust {
  left: 0;
  position: absolute;
  top: 0;
}

#deco_illust_penguin {
  left: -90px;
  top: -290px;
  width: 242px;
}

#deco_illust_fish_mv {
  left: auto;
  right: -125px;
  top: -5px;
  width: 206px;
}

#deco_illust_fish_aqua_meister {
  left: -130px;
  top: 80px;
  width: 206px;
  z-index: -1;
}

#deco_illust_fish_school_program {
  left: auto;
  right: -175px;
  top: 200px;
  width: 206px;
  z-index: -1;
}

#deco_illust_bubble {
  bottom: 50px;
  left: -15px;
  top: auto;
  width: 84px;
}

#deco_illust_goldfish {
  bottom: 30px;
  left: -125px;
  top: auto;
  width: 218px;
}

#deco_illust_jellyfish {
  bottom: -5px;
  left: -115px;
  top: auto;
  width: 186px;
}

/* ::::::::::::::::: spacing adjustment ::::::::::::::::: */
@media screen and (max-width: 1100px){
  div.section .mv_contents h2 {
    letter-spacing: .03em;
  }
  
  div.section .mv_contents p {
    letter-spacing: -0.07em;
  }
}

/* ::::::::::::::::::::::::: SP ::::::::::::::::::::::::: */
@media screen and (max-width: 989px){
  /* ::::: overwrite content.css start ::::: */
  div.section.mainV {
    padding: 0 0 75px;
  }

  div.section.mainV h1 {
    padding: 0;
    margin: 0 auto;
    max-width: 546px;
    width: 100%;
  }
  /* ::::: overwrite content.css end ::::: */


  .mv_contents {
    margin: 0 auto;
    max-width: 290px;
    width: 87.5%;
  }

  div.section .mv_contents h2 {
    font-size: 16px;
    letter-spacing: .18em;
    line-height: 26px;
  }

  div.section .mv_contents p {
    font-size: 13px;
    letter-spacing: .12em;
    line-height: 24px;
    margin: 4px 0 0;
  }

  .mv_counter {
    display: block;
    margin: 12px 0 0;
    padding: 0 0 30px;
  }

  .mv_counter_label {
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left;
    width: 240px;
  }

  .mv_counter_label_txt {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .09em;
    line-height: 30px;
  }

  .mv_counter_label_date {
    bottom: -55px;
    font-size: 11px;
    left: 0;
    line-height: 25px;
    position: absolute;
    text-align: right;
    transform: translate3d(0, 100%, 0);
    width: 170px;
  }

  .mv_counter_num {
    margin: 0 auto;
    width: 240px;
  }

  .mv_counter_num_value {
    font-size: 28px;
    height: 36px;
    line-height: 16px;
    margin: 0 10px 0 0;
    padding: 19px 0 0 .12em;
    min-width: 170px;
  }

  .mv_counter_num_suffix {
    font-size: 28px;
    line-height: 38px;
  }

  .section.contents {
    padding-top: 25px;
    width: 87.5%;
  }
  
  .section.contents + .section.contents {
    margin: 35px auto 0;
  }

  .contents_inner {
    margin: 0 auto;
    max-width: 700px;
    width: 89.3%;
  }

  div.contents_title {
    align-items: center;
    display: block;
  }

  div.contents h3 {
    margin: 0 auto 7px;
  }
  div.contents #contents_workshop h3 {
    width: 76%;
  }
  div.contents #contents_aqua_meister h3 {
    width: 85%;
  }
  div.contents #contents_school_program h3 {
    width: 92%;
  }

  .contents_tag {
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    padding: 1px 4px 1px;
  }

  .contents_title_tags {
    padding: 13px 0 0;
  }
  #contents_workshop .contents_title_tags {
    width: 220px;
  }
  #contents_aqua_meister .contents_title_tags {
    width: 220px;
  }

  .contents_lead {
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 22px;
    padding: 0;
    width: 100%;
  }

  .contents_imgs {
    align-items: baseline;
    flex-wrap: wrap;
    margin: 12px -2px 0;
  }

  .contents_imgs_item {
    box-sizing: border-box;
/*
IE bug support
    flex-basis: 50%;
*/
    margin: 0;
    padding: 0 2px;
    width: 50%;
  }

  .contents_imgs_item img {
    max-width: 328px;
  }

  .contents_imgs_item.contents_imgs_card {
/*
IE bug support
    flex-basis: 100%;
*/
    width: 100%;
  }

  .contents_imgs_item.contents_imgs_card img {
    min-width: 175px;
    margin: 34px auto 32px;
    max-width: 350px;
    width: 69.9%;
  }

  .contents_img_caption {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 22px;
    margin: 0 auto!important;
    max-width: 328px;
  }

  div.section #contents_aqua_meister p.contents_link {
    padding: 0;
  }

  .contents_howto {
    display: block;
  }

  .contents_howto_desc {
    margin: 0 auto;
    max-width: 290px;
    width: 87.5%;
  }

  .contents_howto .contents_tag {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 34px;
    padding: 1px 10px;
  }

  .contents_howto .counter_list {
    margin: 13px 0 0 13px;
  }

  .contents_howto .counter_list li {
    font-size: 12px;
    letter-spacing: .06em;
    line-height: 20px;
  }

  .contents_howto .counter_list li::before {
    font-size: 10px;
    height: 10px;
    line-height: 10px;
    margin-bottom: 4px;
    margin-left: -13px;
    margin-top: 4px;
    width: 10px;
  }

  .contents_howto_img {
    margin: 16px auto 0;
    width: 100%;
  }

  .contents_howto_img img {
    margin: 0 auto;
    max-width: 400px;
    width: 100%;
  }

  div.section p.contents_howto_note {
    font-size: 12px;
    line-height: 16px;
    margin: 0 auto;
    max-width: 350px;
  }

  .contents_inner#contents_school_program {
    margin: 0 auto;
    max-width: 700px;
    padding: 0 0 100px;
  }

  #contents_school_program .counter_list {
    padding: 14px 0 0;
  }

  #contents_school_program .counter_list li + li {
    margin: 20px 0 0;
  }

  #contents_school_program .counter_list li::before {
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    margin-bottom: 6px;
    margin-top: 6px;
    width: 12px;
  }

  .sp_list_title {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: .14em;
    margin-left: 19px;
  }

  .sp_list_desc {
    display: block;
    margin: 0;
  }

  .sp_list_desc_img,
  div.section p.sp_list_desc_txt {
    margin: 0;
    width: 100%;
  }

  .sp_list_desc_img {
    max-width: none;
    padding-top: 0;
    width: 100%;
  }

  .sp_list_desc_img img {
    margin: 0 auto;
    max-width: 375px;
  }

  div.section #contents_school_program p.contents_link a {
    width: 262px;
  }

  div.section p.sp_list_desc_txt {
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 22px;
    padding-top: 15px;
  }

  div.section p.sp_list_desc_txt span {
    font-size: 11px;
    letter-spacing: .03em;
    line-height: 19px;
  }

  #aqtion {
    margin: 100px auto 0;
    max-width: 462px;
    width: 65.625%;
  }

  div.section#aqtion p.contents_link {
    padding: 37px 0 68px;
  }


/* ::::::::::::::::::::::: illust ::::::::::::::::::::::: */
  #deco_illust_penguin {
    left: -10px;
    top: -105px;
    width: 88px;
  }
  
  #deco_illust_goldfish {
    bottom: auto;
    display: block;
    left: auto;
    margin: -40px 5.35% 0 auto;
    top: auto;
    transform: translate3d(0, 15%, 0);
    position: relative;
    width: 200px;
  }
  
  #deco_illust_jellyfish {
    bottom: -70px;
    display: block;
    left: 1.8%;
    position: absolute;
    top: auto;
    width: 254px;
  }

}

@media screen and (max-width: 575px){
  div.section p.contents_link {
    padding: 0 0 20px;
  }

  div.section p.contents_link a {
    border: 3px solid #003366;
    font-size: 13px;
    letter-spacing: .08em;
    line-height: 25px;
    padding: 3px 10px;
    width: 179px;
  }

  div.section #contents_school_program p.contents_link {
    padding: 20px 0 0;
  }

  div.section #contents_school_program p.contents_link a {
    font-size: 13px;
    line-height: 25px;
    padding: 3px 4px;
    width: 191px;
  }

  div.section#aqtion p.contents_link a {
    font-size: 13px;
    line-height: 25px;
    padding: 3px 4px;
    width: 191px;
  }

  #deco_illust_goldfish {
    margin: -20px 5.35% 0 auto;
  }
  
}

/* ::::::::::::::::: spacing adjustment ::::::::::::::::: */
@media screen and (max-width: 374px){
  .contents_img_caption {
    letter-spacing: -0.08em;
  }

  .contents_howto .counter_list li {
    letter-spacing: -0.01em;
  }
}