@charset "UTF-8";
/* --------------------------------
 * for babykids
 * -------------------------------- */
body {
  font-family: "Noto Sans JP",'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, sans-serif; /*for IE9*/
}
/* --------------------------------
 * main-color
 * -------------------------------- */
.main-color-s {
  color: #00adae;
}
.main-color-f {
  color: #8ecda9;
}
.main-color-f02 {
  color: #e9a177;
}
/* --------------------------------
 * movie-tt-color
 * -------------------------------- */
.movie-ttl strong::before, .movie-ttl strong::after {
  background-color: #ff3893;
}
/* inner ------------------------ */
.inner {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  overflow:hidden;
}
.inner-none {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow:hidden;
}
/* --------------------------------
 * ttl--wrap
 * -------------------------------- */
/* ttl-babykids-wrap ------------------------ */
.ttl-babykids-wrap {
  position: relative;
  margin-bottom: 4em;
}
.ttl-babykids-wrap h3 {
  position: absolute;
  top: 60%;
  right: 6%;
  width: 23%;
  max-width: 140px;
  z-index: 9;
}
/* ttl-babykids02-wrap ------------------------ */
.ttl-babykids02-wrap {
  position: relative;
  margin-bottom: 2em;
}
.ttl-babykids02-wrap h2 {
  padding-top: 10%;
}
.ttl-babykids02-wrap h3 {
  position: absolute;
  top: 20%;
  right: 5%;
  /*width: 25%;*/
  width: 22%;
  max-width: 140px;
  z-index: 9;
}
/* ttl-babykids03-wrap ------------------------ */
.ttl-babykids03-wrap {
  position: relative;
  margin-bottom: 4em;
}
.ttl-babykids03-wrap h2 {
  position: absolute;
  bottom: 15%;
  left: 5%;
  width: 65%;
  max-width: 450px;
  overflow: hidden;
  z-index: 9;
}
.ttl-babykids03-wrap h3 {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 25%;
  max-width: 140px;
  z-index: 9;
}/* ttl-babykids04-wrap ------------------------ */
.ttl-babykids04-wrap {
  position: relative;
}
.ttl-babykids04-wrap h3 {
  position: absolute;
  top: 4%;
  left: 8%;
  width: 22%;
  max-width: 140px;
  z-index: 9;
}
/* ttl-babykids-scroll-wrap ------------------------ */
.ttl-babykids-scroll-wrap {
  position: absolute;
  bottom: -30px;
  right: calc(50% - 30px);
  width: 60px;
  height: 60px;
  z-index: 9;
}
.ttl-babykids-scroll {
  position: relative;
  z-index: 99;
}
.ttl-babykids-scroll-img {
  position: absolute;
  bottom: 0px;
  right: -20px;
  width: 80px;
  height: 80px;
}
/* ttl-btn-infant ------------------------ */
.ttl-btn-infant {
  max-width: 520px;
  width: 93%;
  margin: 0 auto;
}
/* --------------------------------
 * description
 * -------------------------------- */
.ttl-description-wrap {
  text-align: center;
  /*padding-bottom: 13%;
  background-image: url("../img/description_bg_ag.gif");
  background-repeat: no-repeat;
  background-position: 5% bottom;
  background-size: 20% auto;*/
}
.description-xxl {
  font-size: 4.0rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .1em;
}
.description-xl {
  font-size: 2.2rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .1em;
}
.description-l {
  font-size: 1.8rem;
  font-weight: 400;
  text-align: center;
}
.description-m {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
 letter-spacing: .05em;
}
.description-sub-en {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  text-align: center;
  color: #9d9d9d;
  letter-spacing: .05em;
}
@media screen and (max-width: 600px) {
  .description-xxl {
    font-size: 7.0vw;
  }
  .description-xl {
    font-size: 4.8vw;
  }
  .description-l {
    font-size: 3.6vw;
  }
  .description-m {
    font-size: 3.0vw;
  }
  .description-sub-en {
    font-size: 2.8vw;
  }
}
/* --------------------------------
 * note
 * -------------------------------- */
.note-spec {
  padding: 0.8em 0 0 2em;
  font-size: 1.0rem;
}
.note-spec.note-right {
  padding: 0.8em 2em 0 0;
  text-align: right;
}
.note-spec.note-center {
  padding-top: 0.8em;
  text-align: center;
}
@media screen and (max-width: 500px) {
  .note-spec {
    font-size: 2vw;
  }
}
/* --------------------------------
 * style
 * -------------------------------- */

/* header ------------------------ */
.st-ttl {
  padding-top: 2em;
}

/* header ------------------------ */
.c-text {
  width: 100%;
  overflow: hidden;
  display: flex;
  position: absolute;
  z-index: 99;
  top: 1.5%;
}
.c-text__item {
  font-family: 'futura-pt', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8.0rem;
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.c-text__item:nth-child(odd) {
    animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
  }
.c-text__item:nth-child(even) {
    animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
  }
@keyframes MoveLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes MoveLeft2 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

@media screen and (max-width: 600px) {
  .c-text__item {
    font-size: 14.2vw;
  }
}




/* product ------------------------ */
/*.st-product-wrap {
  width: calc((500 / 600) * 100%);
  margin-left: auto;
  margin-right: auto;
}*/
.st-ttl-s {
  position: relative;
  border-bottom: 1px solid #ff3893;
  text-align: center;
  font-weight: 500;
  width: 84%;
  margin: 0 auto 3em;
}
.st-ttl-s::before, .st-ttl-s::after {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 20px;
  height: 14px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
  margin-left: -10px;
}
.st-ttl-s::before {
  background-color: #ff3893;
}
.st-ttl-s::after {
  bottom: -12px;
  background-color: #ffffff;
}
#infant .st-ttl-s {
  border-bottom: 1px solid #e9a177;
}
#infant .st-ttl-s::before {
  background-color: #e9a177;
}
#infant .st-ttl-s::after {
  bottom: -12px;
  background-color: #ffffff;
}
.st-ttl-s-in {
  display: block;
  position: relative;
  /*padding: 20% 0 1em;*/
  padding: 10% 0 1em;
  width: 100%;
  overflow: hidden;
}
.st-ttl-s strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  display: block;
  font-size: 1.8rem;
  letter-spacing: .1em;
}
@media screen and (max-width: 600px) {
  .st-ttl-s {
    font-size: 2.6vw;
  }
  .st-ttl-s strong {
    font-size: 4.0vw;
  }
}
.st-product-cols {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  text-align: center;
  justify-content: center;
}
.st-product-cols.st-product-cols02 {
  justify-content: space-between;
}
.st-product-col {
  /*width: calc((260 / 500) * 100%);*/
  text-align: center;
  margin-bottom: 40px;
}
.st-product-cols02 .st-product-col {
  width: calc((225 / 500) * 100%);
}
.st-product-col h3 {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 15px;
  padding: 1.2em .1em 1em;
  border-radius: 10px;
  background-color: #e2ddce;
  font-weight: 500;
  font-size: 1.5rem;
}
.st-product-col h3::before {
  position: absolute;
  bottom: -10px;
  width: 12px;
  height: 10px;
  background-color: #e2ddce;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}




#infant .st-product-col h3 {
  background-color: #e1ddce;
}
#infant .st-product-col h3::before {
  background-color: #e1ddce;
}
.st-product-col h3 .st-product-h3-info {
  position: absolute;
  top: -1.7em;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
}
.st-product-col h3 .st-product-h3-info span {
  display: inline-block;
}
.st-product-col h3 .st-product-h3-info span::before {
  content: "|";
  display: inline-block;
  transform: rotate(-20deg);
  margin-right: .8em;
}
.st-product-col h3 .st-product-h3-info span::after {
  content: "|";
  display: inline-block;
  transform: rotate(20deg);
  margin-left: .8em;
}




.st-product-col a {
  text-decoration: none;
  color: #434343;
}
.st-product-name {
  margin-bottom: .2em;
  line-height: 1.6;
  font-weight: 500;
}
.st-product-spec {
  margin-bottom: .8em;
  font-size: 1.3rem;
  line-height: 1.6;
}
.st-product-hop {
  display: block;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  font-weight: bold;
  text-align: center;
  padding: .6em 0;
  font-size: 14px;
  border-radius: 50px;
  width: 90%;
  margin: 0 auto 5px;
}
.st-product-hop::after {
  font-family: "fontello";
  content: '\e800';
  margin-left: .7em;
}

.st-product-col a:hover .st-product-hop {
  background-color: #000;
  color: #fff;
}
.st-product-no {
  font-size: 1.1rem;
}
@media screen and (max-width: 600px) {
  .st-product-col h3 {
    font-size: 2.8vw;
  }
  .st-product-col h3 .st-product-h3-info {
    font-size: 2.4vw;
  }
  .st-product-name {
    font-size: 2.4vw;
  }
  .st-product-spec {
    font-size: 2.3vw;
  }
  .st-product-no {
    font-size: 2.0vw;
  }
  .st-product-hop {
    font-size: 2.6vw;
  }
}
/* --------------------------------
 * infant
 * -------------------------------- */
.infant-wrap {
  padding-bottom: 30px;
  /*background-color: #fff5ea;
  background-image: url(../img/infnat_bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding-top: calc(15% + 40px);*/
}
.if-ttl-sub {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 2em;
  font-weight: 600;
  text-align: center;
  letter-spacing: .1em;
}
.if-ttl-sub::before {
  content: "";
  display: block;
  width: 10%;
  margin: 1.8em auto 1.5em;
  border-bottom: 1px solid #78c3a0;
}
@media screen and (max-width: 500px) {
  .if-ttl-sub {
    font-size: 3.6vw;
  }
}
.if-nav {
  max-width: 500px;
  width: 90%;
  margin: 0 auto 4em;
}
.if-nav li {
  width: 32%;
  position: relative;
}
.if-nav li a {
  position: relative;
  z-index: 1;
}
/* --------------------------------
 * page-top
 * -------------------------------- */
/*リンクを右下に固定*/
/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(150px);
  }
  to {
    opacity: 1;
    transform: translateY(-40px);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(150px);
  }
}
/* ----------------
 * foote-note
 * ---------------- */
.footer-note {
  padding-top: 50px;
  padding-bottom: 100px;
  font-size: 1.1rem;
  text-align: center;
}
.footer-note-p {
  border: 1px solid #ba2b77;
  color: #ba2b77;
  padding: 1em;
}
.footer-note-r {
  border: 1px solid #d21a25;
  color: #d21a25;
  padding: 1em;
}
@media screen and (max-width: 500px) {
  .footer-note {
    font-size: 2.3vw;
  }
}
/* ----------------
 * foote-nav
 * ---------------- */
.foote-nav li {
  width: 49.8%;
}
.foote-nav li a {
  padding: 5px 2px;
}
.foote-nav li a img {
  max-width: 180px;
}
/* --------------------------------
 * animation
 * -------------------------------- */
.st-ttl-s-an011, .st-ttl-s-an031 {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 30%;
  z-index: -1;
}
.st-ttl-s-an031 {
  width: 20%;
}
.st-ttl-s-an012, .st-ttl-s-an032 {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 20%;
  z-index: -1;
}
.st-ttl-s-an032 {
  width: 26%;
  bottom: -25%;
}
.if-nav li .if-nav-an {
  position: absolute;
  top: -65px;
  right: 10px;
  width: 60px;
}
.if-nav li a {
  position: relative;
  z-index: 1;
}
.st-pop-left-an {
  position: absolute;
  top: 0;
  left: -38%;
  width: 130%;
}
.if-pop-right-an {
  position: absolute;
  top: 15%;
  right: -50px;
  width: 150px;
}
.img-left-an {
  padding-right: 20%;
}
.img-right-an {
  padding-left: 20%;
}
.img-left-s-an {
  padding-right: 10%;
}
.img-right-s-an {
  padding-left: 10%;
}
/* scloll右斜上にょん */
.sclollRightTop {
  animation-name: sclollRightTopAnime;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}
@keyframes sclollRightTopAnime {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(30%, -30%);
  }
}
/* ttls上にょん */
.ttlsTop {
  animation-name: ttlsTopAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}
@keyframes ttlsTopAnime {
  from {
    transform: translateY(150px);
  }
  to {
    transform: translateY(0);
  }
}
.ttlsTopTrigger {
  transform: translateY(150px);
}
/* nav上にょん */
.navTop {
  animation-name: navTopAnime;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  animation-timing-function: ease-in-out;
}
@keyframes navTopAnime {
  from {
    transform: translateY(40px);
  }
  to {
    transform: translateY(0);
  }
}
.navTopTrigger {
  transform: translateY(40px);
}
/* pop左から */
.popLeft {
  animation-name: popLeftAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}
@keyframes popLeftAnime {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}
/* pop右から */
.popRight {
  animation-name: popRightAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  animation-timing-function: ease-in;
}
@keyframes popRightAnime {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.popLeftTrigger {
  transform: translateX(-100px);
}
.popRightTrigger {
  transform: translateX(100px);
}
/* fade base */
/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
  opacity: 0;
}
.fadeUpTrigger {
  transform: translateY(50px);
}
.fadeLeftTrigger {
  transform: translateX(-100px);
}
.fadeRightTrigger {
  transform: translateX(100px);
}

/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2; /*この数字を必要回数分に変更*/
}
.countinfinite {
  animation-iteration-count: infinite; /*無限ループ*/
}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s;
}
.delay-time1 {
  animation-delay: 1s;
}
.delay-time15 {
  animation-delay: 1.5s;
}
.delay-time2 {
  animation-delay: 2s;
}
.delay-time25 {
  animation-delay: 2.5s;
}
/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s;
}
.change-time1 {
  animation-duration: 1s;
}
.change-time15 {
  animation-duration: 1.5s;
}
.change-time2 {
  animation-duration: 2s;
}
.change-time25 {
  animation-duration: 2.5s;
}