@charset "utf-8";
/* mv *********************************************************/
.story-mv {
  width: 100%;
  position: relative;
}
.story-mvTitle {
  display: inline-block;
}
/* common *********************************************************/
.story-box {
  position: relative;
}
.story-boxS {
  width: 450px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
.story-boxS .h2-styleA {
  margin-bottom: 4rem;
}
.story-txtBox {
  text-align: center;
  margin: 0 auto;
}
.story-txtBox p {
  margin: 4rem 0;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
  line-height: 2.2;
}
.secBoxM img {
  border-radius: 12px;
  background: #f1f1f1;
}
.story-res {
  position: relative;
  z-index: 1;
}
.story-abs {
  position: absolute;
  z-index: -1;
}
/* intro *********************************************************/
/* img */
.story-introChild {
  top: 20%;
  left: 2rem;
  width: 26%;
}
.story-introStudio {
  top: 60%;
  right: 2rem;
  width: 26%;
}
/* Turning Point *********************************************************/
.story-tp.secBoxM {
  background-image: linear-gradient(180deg, #e8e8e8, #fdfdfd 80%, #fff);
  padding: 6rem 0;
  border-bottom: solid 1px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: -2;
}
.story-tp img {
  background: #fff !important;
  height: 320px;
  margin-bottom: 4rem;
  object-fit: cover;
}
.story-tp h2.h2-styleA {
  margin-left: 2rem;
}
.story-tpTxtLeft {
  text-align: left;
}
p.story-tpTxtLeftMgSS {
  margin-left: 3%;
}
p.story-tpTxtLeftMgS {
  margin-left: 8%;
}
p.story-tpTxtLeftMgM {
  margin-left: 16%;
}
p.story-tpTxtLeftMgL {
  margin-left: 30%;
}
p.story-tpTxtLeftMgLL {
  margin-left: 52%;
}
p.story-tpTxtMain {
  margin: 6rem 0;
}
p.story-tpTxtMain span {
  letter-spacing: 0.1rem;
}
p.story-tpTxtLast {
  margin-bottom: 0;
}
/* img */
.story-tpAnguish {
  top: 38%;
  right: 2rem;
  width: 26%;
}
.story-tpAnguish img {
  height: auto;
}
/* resolve *********************************************************/
.story-resolve.secBoxM {
  margin-top: 5rem;
  padding-top: 5rem;
}
.story-resolve img {
  width: 100%;
}
/* img */
.story-resolveFather {
  top: 16%;
  right: 2rem;
  width: 26%;
}
.story-resolveKana {
  top: 52%;
  left: 2rem;
  width: 26%;
}
.story-resolveFlower {
  height: 320px;
  object-fit: cover;
}
/* future *********************************************************/
p.story-futureTxtRight {
  text-align: right;
}
/* img */
.story-futureHome {
  top: 16%;
  left: 2rem;
  width: 26%;
}
.story-futureFlowerYou {
  top: 70%;
  right: 2rem;
  width: 20%;
}
@media screen and (max-width: 768px) {
  /* common *********************************************************/
  .story-boxS .h2-styleA {
    margin-bottom: 3rem;
  }
  .story-txtBox p {
    margin: 3rem 0;
  }
  .secBoxM img {
    border-radius: 8px;
    position: relative;
  }
  .story-abs img.fade-in_slow {
    opacity: 0;
  }
  .story-abs img.fade-in_slow.visible {
    opacity: 30%;
  }
  /* intro *********************************************************/
  /* img */
  .story-introChild {
    left: 1.5rem;
    width: 33%;
  }
  .story-introStudio {
    right: 1.5rem;
    width: 33%;
  }
  /* Turning Point *********************************************************/
  .story-tp.secBoxM {
    padding: 4rem 0;
  }
  .story-tp img {
    margin-bottom: 3rem;
  }
  .story-tp h2.h2-styleA {
    margin-left: 1.5rem;
  }
  p.story-tpTxtLeftMgS {
    margin-left: 8%;
  }
  p.story-tpTxtLeftMgM {
    margin-left: 16%;
  }
  p.story-tpTxtLeftMgL {
    margin-left: 30%;
  }
  p.story-tpTxtLeftMgLL {
    margin-left: 52%;
  }
  p.story-tpTxtMain {
    margin: 6rem 0;
  }
  p.story-tpTxtMain span {
    letter-spacing: 0.1rem;
  }
  p.story-tpTxtLast {
    margin-bottom: 0;
  }
  /* img */
  .story-tpAnguish {
    top: 33%;
    right: 1.5rem;
    width: 33%;
  }
  .story-tpAnguish img {
    height: 175px;
  }
  /* resolve *********************************************************/
  .story-resolve.secBoxM {
    margin-top: 4rem;
    padding-top: 4rem;
  }
  .story-resolve img {
    width: 100%;
  }
  /* img */
  .story-resolveFather {
    right: 1.5rem;
    width: 33%;
  }
  .story-resolveKana {
    left: 1.5rem;
    width: 33%;
  }
  /* future *********************************************************/
  p.story-futureTxtRight {
    text-align: right;
  }
  /* img */
  .story-futureHome {
    left: 1.5rem;
    width: 33%;
  }
  .story-futureFlowerYou {
    right: 1.5rem;
    width: 28%;
  }
}
@media screen and (max-width: 550px) {
  /* common *********************************************************/
  .story-boxS {
    width: 375px;
    max-width: 100%;
  }
  .story-boxS .h2-styleA {
    margin-bottom: 2.5rem;
  }
  .story-txtBox p {
    margin: 2.5rem 0;
  }
  /* intro *********************************************************/
  /* img */
  .story-introChild {
    top: 24%;
    left: 1.25rem;
    width: 40%;
  }
  .story-introStudio {
    top: 70%;
    right: 1.25rem;
    width: 40%;
  }
  /* Turning Point *********************************************************/
  .story-tp.secBoxM {
    padding: 3rem 0 5rem;
  }
  .story-tp img {
    margin-bottom: 2.5rem;
    height: 175px;
  }
  .story-tp h2.h2-styleA {
    margin-left: 1.25rem;
  }
  p.story-tpTxtLeftMgS {
    margin-left: 8%;
  }
  p.story-tpTxtLeftMgM {
    margin-left: 16%;
  }
  p.story-tpTxtLeftMgL {
    margin-left: 30%;
  }
  p.story-tpTxtLeftMgLL {
    margin-left: 48%;
  }
  p.story-tpTxtMain {
    margin: 4rem 0;
  }
  p.story-tpTxtMain span {
    letter-spacing: 0.1rem;
  }
  p.story-tpTxtLast {
    margin-bottom: 0;
  }
  /* img */
  .story-tpAnguish {
    display: none;
  }
  /* resolve *********************************************************/
  .story-resolve.secBoxM {
    margin-top: 3rem;
    padding-top: 3rem;
  }
  .story-resolve img {
    width: 100%;
  }
  /* img */
  .story-resolveFather {
    right: 1.25rem;
    width: 40%;
  }
  .story-resolveKana {
    top: 52%;
    left: 1.25rem;
    width: 40%;
  }
  .story-resolveFlower {
    height: 175px;
  }
  /* future *********************************************************/
  p.story-futureTxtRight {
    text-align: right;
  }
  /* img */
  .story-futureHome {
    top: 22%;
    left: 1.25rem;
    width: 45%;
  }
  .story-futureFlowerYou {
    top: 65%;
    right: 1.25rem;
    width: 33%;
  }
}