@charset "UTF-8";

.cap-under {
  min-height: 21px;
}

.container--section {
  padding : 0;
  position : relative;
}

.mv img {
  width: 100%;
  opacity : 0;
  transition : 1s;
}

.mv.on img {
  opacity : 1;
}

.mv-ttl {
  position: absolute;
  top: 5vw;
  left: 5%;
  font-size: 34px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.17em;
  color: #fff;
}

.mv__cap {
  position : absolute;
  color : #fff;
  right : 10px;
  bottom : 5px;
  font-size : 12px;
}

.intro__inner {
  padding-top : 75px;
  padding-bottom: 100px;
  text-align : center;
}

@media screen and (max-width: 767px) {
  .intro__inner {
    padding : 60px 0;
  }
}

.intro__img {
  position : relative;
  display : flex;
  flex-wrap : wrap;
}

.intro__img > div {
  position : relative;
}

.introimg__txt {
  position : absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  background : rgba(0,0,0,.1);
  padding : 5px 0px 5px 7px;
  font-size : clamp(16px, 2vw, 22px);
  color : #fff;
  display : inline-block;
  white-space: nowrap;
}

.introimg1 {
  width : calc(821.74 / 1400 * 100%);
}

.introimg2 {
  width : calc(578.26 / 1400 * 100%);
}

.introimg3 {
  width : calc(700.42 / 1400 * 100%);
}

.introimg4 {
  width : calc(699.58 / 1400 * 100%);
}

.introimg5 {
  width : 100%;
}

@media screen and (max-width: 767px) {
  .intro__img > div {
    width : 100%;
  }
}

h1 .intro-img {
  width: 640px;
  max-width : 80%;
  display : block;
  margin : 0 auto;
}
.intro__inner h2 {
  margin: 100px 0 20px;
  font-size: 28px;
  font-weight: 300;
}
.under__note {
  padding: 5px 5px 10px;
  font-size: 12px;
}
@media screen and (max-width: 767px) {
  .mv-ttl {
    left : auto;
    right: 2%;
    top : auto;
    bottom : 8%;
    font-size: 21px;
    line-height: 1.6;
    letter-spacing: 0;
  }
  h1 .intro-img {
    max-width: 320px;
    width : 90%;
  }
  .intro__inner h2 {
    margin-top : 40px;
    font-size : 20px;
  }
  .intro__inner p {
    font-size : 14px;
  }
}

.sec-row {
  display : flex;
  justify-content : space-between;
  flex-wrap : wrap;
}

.intro__cap {
  right : calc(445 / 1300 * 100%);
}

@media screen and (max-width: 767px) {
  .intro__cap {
    right : calc(460 / 750 * 100%);
  }
}

.intro__footer-txt {
  text-align : center;
  padding : 150px 0;
  font-size : 26px;
}

@media screen and (max-width: 767px) {
  .intro__footer-txt {
    font-size : 20px;
    padding : 60px 0;
  }
}

.sec-ttls {
  width: 850px;
  max-width : calc(100% - 40px);
  margin: 100px auto 0;
  text-align : center;
}

@media screen and (max-width: 767px) {
  .sec-ttls {
    margin-top : 60px;
  }
}

.sec-en-ttl {
  margin-bottom : 50px;
}

.sec-en-ttl img {
  width : auto;
  height : 15px;
  display : block;
  margin : 0 auto;
}

.sec-ttl {
  font-weight : normal;
  font-size : 26px;
  margin-bottom : 25px;
}

.sec-txt {
  text-align : left;
}

.sec-ttl span {
  display : block;
  font-size : 14px;
}

@media screen and (max-width: 767px) {
  .sec-en-ttl {
    margin-bottom : 30px;
  }
  .sec-ttl {
    font-size : 20px;
  }
  .sec-txt {
    font-size : 14px;
  }
}

.bg-color {
  background : #eff0e8;
  padding: 1px 0 200px;
}


@media screen and (max-width: 767px) {
  .bg-color {
    padding-bottom : 30px;
  }
}

.commonspace__row {
  width: 700px;
  max-width : calc(100% - 40px);
  margin: 40px auto 0;
  text-align : center;
}

.commonspace__con {
  width : calc(260 / 700 * 100%);
}

.commonspace__map {
  width : calc(400 / 700 * 100%);
}

@media screen and (max-width: 767px) {
  .commonspace__row {
    flex-wrap : wrap-reverse;
  }
  .commonspace__con {
    width : 80%;
    margin : 0 auto 20px;
  }
  .commonspace__map {
    width : 80%;
    margin : 0 auto 20px;
  }
}

.item-ttl {
  border : solid 0.5px #000;
  padding : 10px;
  margin-bottom : 20px;
  font-size : 18px;
}

.item-txt {
  font-size : 15px;
  text-align : left;
  line-height : 1.8;
}

.commonspace__con-img {
  display : block;
  margin-top : 20px;
}

.commonspace__con-cap {
  font-size : 15px;
  margin-top : 10px;
}

@media screen and (max-width: 767px) {
  #sec3,
  #sec5,
  #sec6,
  #sec7,
  #sec8,
  #sec9 {
    display : flex;
    flex-direction : column;
  }
  #sec3 .under__note,
  #sec4 .under__note,
  #sec5 .under__note,
  #sec6 .under__note,
  #sec7 .under__note,
  #sec8 .under__note,
  #sec9 .under__note {
    order : 5;
    margin : 20px 15px 0;
  }
}

#sec4 {
  margin-top : 178px;
}

@media screen and (max-width: 767px) {
  #sec4 {
    margin-top : 60px;
  }
  
}

#sec5 {
  width: 1200px;
  max-width : calc(100% - 40px);
  margin: 190px auto 0;
}

@media screen and (max-width: 767px) {
  #sec5 {
    max-width : 100%;
    margin-top : 60px;
  }
}

.kids__row {
  width: 620px;
  max-width : calc(100% - 40px);
  margin: 0 auto 0;
}

.sec-row-con {
  width : calc(320 / 620 * 100%);
  margin-right : 10px;
}

.sec-row-img {
  flex : 1;
}

@media screen and (max-width: 767px) {
  .kids__row .sec-row-con {
    width : 100%;
    margin-right : 0;
  }
  .kids__row .sec-row-img {
    width : 100%;
    flex : auto;
  }
  .kids__row .sec-row-img > div {
    width : 80%;
    margin : 20px auto 0;
  }
}

#sec6 {
  width: 1200px;
  max-width : calc(100% - 40px);
  margin: 190px auto 0;
}

@media screen and (max-width: 767px) {
  #sec6 {
    max-width : 100%;
    margin-top : 60px;
  }
}

.working__row {
  width: 620px;
  max-width : calc(100% - 40px);
  margin: 0 auto 0;
  flex-direction:row-reverse;
}

.working__row .sec-row-con {
  margin : 0 0 0 10px;
}

@media screen and (max-width: 767px) {
  .working__row .sec-row-con {
    width : 100%;
    margin-right : 0;
  }
  .working__row .sec-row-img {
    width : 100%;
    flex : auto;
  }
  .working__row .sec-row-img > div {
    width : 80%;
    margin : 20px auto 0;
  }
}

#sec7 .sec-ttls {
  margin-top : 200px;
}

@media screen and (max-width: 767px) {
  #sec7 {
    max-width : 100%;
    margin-top : 60px;
  }
  #sec7 .sec-ttls {
    max-width : 100%;
    margin-top : 60px;
  }
}

.sound__row {
  width: 1030px;
  max-width : calc(100% - 40px);
  margin: 40px auto 0;
  text-align : center;
}

#sec7 .under__note {
  width: 1030px;
  max-width : calc(100% - 40px);
  margin: 10px auto 0;
}

#sec7 .sec-row-img {
  flex : auto;
  width : calc(750 / 1030 * 100%);
}

#sec7 .sec-row-con {
  width : calc(246 / 1030 * 100%);
  margin-left : 20px;
  display : flex;
  flex-direction : column;
  margin-right: 0;
}

#sec7 .sec-row-con .cap-image {
  margin-top : auto;
}

@media screen and (max-width: 767px) {
  .sound__row {
    margin-top : 0;
  }
  #sec7 .sec-row-con {
    width : 100%;
    margin-right : 0;
    justify-content:revert;
  }
  #sec7 .sec-row-con .cap-image {
    width : 80%;
    margin : 20px auto 40px;
  }
}

#sec8 .service-image {
  display : flex;
}

.service-image > div {
  width : 50%;
}

#sec8 .sec-ttls {
  margin-top : 200px;
}

@media screen and (max-width: 767px) {
  #sec8 {
    max-width : 100%;
    margin-top : 60px;
  }
  #sec8 .sec-ttls {
    max-width : 100%;
    margin-top : 0;
  }
}

#sec9 {
  width: 900px;
  max-width : calc(100% - 40px);
  margin: 40px auto 0;
  text-align : center;
}

#sec9 .sec-ttls {
  margin-top: 80px;
}

.tansaku {
  width : 300px;
  display : block;
  margin : 40px auto;
}

.txt2 {
  text-align : center;
}

@media screen and (max-width: 767px) {
  #sec9 {
    max-width : 100%;
    margin-top : 120px;
  }
  #sec9 .sec-ttls {
    max-width : 100%;
    margin : 0;
  }
  #sec9 .sec-txt {
    margin : 0 15px 0;
  }
  .tansaku {
    width : 60%;
  }
  .txt2 {
    text-align : left;
  }
}

.support-con3 {
  margin-top: 80px;
}

.support-con__item {
  width : calc((100% - 60px) / 3);
  text-align : left;
  font-size : 14px;
  margin-bottom : 20px;
}

@media screen and (max-width: 767px) {
  .support-con__item {
    width : 45%;
    margin : 0 auto 20px;
  }
}

.support-con__item .cap {
  left : 10px;
  right : auto;
}

.support-con__icon {
  position : absolute;
  right : 5px;
  bottom : -20px;
  width : 40px;
}

@media screen and (max-width: 767px) {
  .support-con__icon {
    bottom : -10px;
  }
}

.support-con__item-txt {
  margin-top : 10px;
  text-align  : center;
}

.osanpo {
  margin-top : 120px;
}

.osanpo__ttl-img {
  width : 100px;
  display : block;
  margin : 0 auto 30px;
}

.osanpo h3 {
  font-weight : normal;
}

.osanpo__inner {
  border-top : 1px solid #000;
  border-bottom : 1px solid #000;
  padding : 60px 0;
  margin-top : 40px;
}

.osanpo__img {
  width : calc(200 / 900 * 100%);
  margin-right : 20px;
}

.osanpo__img .cap {
  right : auto;
  left : 10px;
}

.osanpo__img img {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.osanpo__con {
  flex : 1;
}

.osanpo__ttl {
  width : 225px;
  margin-right : 20px;
  font-size : 12px;
  text-align : center;
}

.osanpo__txt1 {
  text-align : left;
  font-size : 14px;
  flex : 1;
}

.osanpo__txt2 {
  text-align : center;
  font-size : 14px;
  margin-top : 20px;
}

@media screen and (max-width: 767px) {
  .osanpo {
    margin-top: 60px;
    border : none;
  }
  .osanpo h3 {
    margin : 0 15px;
    font-size : 16px;
    text-align : left;
  }
  .osanpo__inner {
    margin : 20px 0 0;
    padding : 30px 20px;
  }
  .osanpo__img {
    width : 100%;
    margin : 0 0 20px;
    padding : 0 20%;
  }
  .osanpo__con {
    flex-wrap : wrap;
    flex: auto;
  }
  .osanpo__txt1 {
    margin : 0;
    order : 1;
    width : 100%;
    flex : auto;
  }
  .osanpo__ttl {
    order : 2;
    width: 100%;
    flex : auto;
    margin : 20px auto;
  }
  .osanpo__ttl img {
    width : 70%;
  }
  .osanpo__txt2 {
    order : 3;
    width : 100%;
    flex : auto;
    text-align : left;
  }
}

#sec9 {
  margin-top : -150px;
  padding-top : 150px;
}

@media screen and (max-width: 767px) {
  #sec9 {
    margin-top : -80px;
  }
}