@charset "UTF-8";
html {
  font-size: 62.5%;
}
@media (min-width: 768px) and (max-width: 1400px) {
  html{
    font-size: calc(10* (100vw / 1400)); 
  }
}
@font-face {
  font-family: "NotoSerifJP-ExtraLight";
  src: url("../font/NotoSerifJP-ExtraLight.otf");
  font-style: normal;
}
@font-face {
  font-family: "NotoSerifJP-Light";
  src: url("../font/NotoSerifJP-Light.otf");
  font-style: normal;
}
@font-face {
  font-family: "Felidae";
  src: url("../font/Felidae.ttf");
  font-style: normal;
}
.FR240722romantictops {
  --color-black: #000000;
  --color-txt: #58595B;
  --full-width: 100%;
  --basic-width-pc: 140rem;
  --basic-width-sp: calc(750*(100vw / 750));
  --font-en: "Felidae";
  --font-ja: "NotoSerifJP-ExtraLight", "NotoSerifJP-Light";
  font-feature-settings: "palt";
  overflow: hidden;
}
/*========================================
▼共通デザイン
==========================================*/
:where(.FR240722romantictops) h4 {
  font-family: var(--font-noto_s);
  font-weight: 400;
  font-style: normal;
}
:where(.FR240722romantictops) p {
  font-family: var(--font-noto_r);
  font-weight: 400;
  font-style: normal;
}
:where(.FR240722romantictops) img {
  width: var(--full-width);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
:where(.FR240722romantictops) picture {
  display: block;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
firstview
//////////////////////////////////////////////////////////////////////////////////////////////
*/

.FR240722romantictops .firstview {
  width: 120rem;
  margin: 0 auto;
}
.FR240722romantictops .firstview .firstview__img {
  width: var(--full-width);
  margin: 0 auto;
}
.FR240722romantictops .firstview .firstview__txt {
  font-family: var(--font-ja);
  font-weight: 200;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.16em;
  margin-top: 5.6rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .firstview {
    width: var(--basic-width-sp);
  }
  .FR240722romantictops .firstview .firstview__txt {
    font-size: calc(26*(100vw / 750));
    line-height: 2.1538461538;
    letter-spacing: 0.12em;
    margin-top: calc(104*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
common
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model__credit {
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  line-height: 1.75;
  font-weight: 400;
  margin-top: 3.7rem;
}
.FR240722romantictops .model__inner {
  width: 140rem;
  margin: 0 auto;
}
.FR240722romantictops .model__grid {
  position: relative;
}
.FR240722romantictops .model__title {
  position: absolute;
  z-index: 5;
}
.FR240722romantictops .pc_only {
  display: block;
}
.FR240722romantictops .sp_only {
  display: none;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .model__credit {
    font-size: calc(22*(100vw / 750));
    margin-top: calc(44*(100vw / 750));
  }
  .FR240722romantictops .model__inner {
    width: var(--basic-width-sp);
  }
  .FR240722romantictops .pc_only {
    display: none;
  }
  .FR240722romantictops .sp_only {
    display: block;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
model01
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model01 {
  margin-top: 11.3rem;
}
.FR240722romantictops .model01 .model__grid {
  width: 104rem;
  margin-left: 20rem;
  display: grid;
  grid-template-columns: 48rem;
  grid-template-rows: 21.5rem;
}
.FR240722romantictops .model01 .model__wrapper01 {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  grid-column: 1;
  grid-row: 1 / 3;
}
.FR240722romantictops .model01 .model__wrapper02 {
  grid-column: 2;
  grid-row: 2;
}
.FR240722romantictops .model01 .model__img0101 {
  width: 42rem;
}
.FR240722romantictops .model01 .model__img0102 {
  width: 42rem;
}
.FR240722romantictops .model01 .model__img0103 {
  width: 56rem;
}
.FR240722romantictops .model01 .model__credit {
  text-align: right;
}
.FR240722romantictops .model01 .model__title {
  width: 40.1rem;
  top: 13.5rem;
  left: 37.5rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .model01 {
    margin-top: calc(106*(100vw / 750));
  }
  .FR240722romantictops .model01 .model__grid {
    width: var(--basic-width-sp);
    margin-left: 0;
    display: block;
    position: static;
  }
  .FR240722romantictops .model01 .model__wrapper01 {
    display: flex;
    flex-direction: column;
    row-gap: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model01 .model__wrapper01 .model__wrap:nth-of-type(2) {
    position: relative;
  }
  .FR240722romantictops .model01 .model__wrapper02 {
    display: block;
    width: calc(640*(100vw / 750));
    margin-left: calc(110*(100vw / 750));
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model01 .model__img0101 {
    width: var(--basic-width-sp);
  }
  .FR240722romantictops .model01 .model__img0102 {
    width: calc(540*(100vw / 750));
    margin-left: 0;
  }
  .FR240722romantictops .model01 .model__img0103 {
    width: var(--full-width);
  }
  .FR240722romantictops .model01 .model__credit {
    text-align: left;
  }
  .FR240722romantictops .model01 .model__title {
    width: calc(68*(100vw / 750));
    top: calc(40*(100vw / 750));
    left: initial;
    right: calc(172*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
model02
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model02 {
  margin-top: 18rem;
}
.FR240722romantictops .model02 .model__grid {
  width: 113.5rem;
  margin-left: 12rem;
  display: grid;
  grid-template-columns: 33rem 80.5rem;
  grid-template-rows: 114.5rem 138rem;
}
.FR240722romantictops .model02 .model__wrapper01 {
  width: 80.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 6rem;
  grid-column: 2;
  grid-row: 1 / 3;
}
.FR240722romantictops .model02 .model__img0101 {
  width: 50rem;
  margin-left: 0;
}
.FR240722romantictops .model02 .model__img0102 {
  width: 36rem;
  margin-inline-start: auto;
}
.FR240722romantictops .model02 .model__wrapper02 {
  width: 105rem;
  display: flex;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  position: relative;
}
.FR240722romantictops .model02 .model__wrapper02 .model__wrap:first-of-type {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.FR240722romantictops .model02 .model__wrapper02 .model__wrap:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.FR240722romantictops .model02 .model__img0103 {
  width: 43rem;
}
.FR240722romantictops .model02 .model__img0104 {
  width: 66rem;
}
.FR240722romantictops .model02 .model__credit {
  position: absolute;
  text-align: right;
  bottom: -0.4rem;
  left: -36.2rem;
}
.FR240722romantictops .model02 .model__title {
  width: 44.4rem;
  top: 35.8rem;
  left: 36.4rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .model02 {
    margin-top: calc(192*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__grid {
    width: var(--basic-width-sp);
    margin-left: 0;
    display: block;
    position: static;
  }
  .FR240722romantictops .model02 .model__wrapper01 {
    width: calc(715*(100vw / 750));
    row-gap: calc(60*(100vw / 750));
    margin-left: calc(35*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__img0101 {
    width: calc(600*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__img0102 {
    width: calc(500*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__wrapper01 .model__wrap:nth-of-type(2) {
    position: relative;
  }
  .FR240722romantictops .model02 .model__wrapper02 {
    width: var(--basic-width-sp);
    display: flex;
    flex-direction: column;
    position: static;
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__wrapper02 .model__wrap:first-of-type {
    position: static;
  }
  .FR240722romantictops .model02 .model__wrapper02 .model__wrap:nth-of-type(2) {
    position: static;
    display: block;
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__img0103 {
    width: calc(540*(100vw / 750));
    margin-left: 0;
  }
  .FR240722romantictops .model02 .model__img0104 {
    width: var(--full-width);
  }
  .FR240722romantictops .model02 .model__credit {
    position: static;
    text-align: left;
    padding-left: calc(40*(100vw / 750));
  }
  .FR240722romantictops .model02 .model__title {
    width: calc(52*(100vw / 750));
    top: calc(-94*(100vw / 750));
    left: calc(123*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
model03
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model03 {
  margin-top: 22.4rem;
}
.FR240722romantictops .model03 .model__grid {
  width: 119rem;
  margin-left: 10rem;
  display: grid;
  grid-template-columns: 34rem;
  grid-template-rows: 117.5rem 97.5rem;
}
.FR240722romantictops .model03 .model__wrapper01 {
  width: 85rem;
  display: flex;
  flex-direction: column;
  row-gap: 6rem;
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
}
.FR240722romantictops .model03 .model__img0101 {
  width: 52rem;
  margin-left: 0;
}
.FR240722romantictops .model03 .model__img0102 {
  width: 40rem;
  margin-inline-start: auto;
}
.FR240722romantictops .model03 .model__wrapper02 {
  width: 99.5rem;
  display: flex;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  position: relative;
}
.FR240722romantictops .model03 .model__slider {
  width: 65rem;
}
.FR240722romantictops .model03 .model__credit {
  position: absolute;
  bottom: -0.5rem;
  right: 0.1rem;
}
.FR240722romantictops .model03 .model__title {
  width: 5.8rem;
  top: -4.3rem;
  left: -2.7rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .model03 {
    margin-top: calc(235*(100vw / 750));
  }
  .FR240722romantictops .model03 .model__grid {
    width: var(--basic-width-sp);
    margin-left: 0;
    display: block;
  }
  .FR240722romantictops .model03 .model__wrapper01 {
    width: var(--basic-width-sp);
    display: flex;
    flex-direction: column;
    row-gap: calc(60*(100vw / 750));
    position: relative;
  }
  .FR240722romantictops .model03 .model__img0101 {
    width: calc(620*(100vw / 750));
    margin: 0 auto;
  }
  .FR240722romantictops .model03 .model__img0102 {
    width: calc(500*(100vw / 750));
    margin-left: 0;
  }
  .FR240722romantictops .model03 .model__wrapper02 {
    width: calc(680*(100vw / 750));
    display: flex;
    flex-direction: column;
    position: static;
    margin-left: calc(70*(100vw / 750));
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model03 .model__slider {
    width: calc(680*(100vw / 750));

  }
  .FR240722romantictops .model03 .model__credit {
    position: static;
  }
  .FR240722romantictops .model03 .model__title {
    width: calc(370*(100vw / 750));
    height: calc(80*(100vw / 750));
    top: calc(-40*(100vw / 750));
    left: initial;
    right: calc(48*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
model04
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model04 {
  margin-top: 18rem;
}
.FR240722romantictops .model04 .model__grid {
  width: 127rem;
  margin-left: 6rem;
  display: grid;
  grid-template-columns: 44rem 28rem;
  grid-template-rows: 60.5rem 34rem;
}
.FR240722romantictops .model04 .model__wrapper01 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.FR240722romantictops .model04 .model__wrapper02 {
  grid-column: 1;
  grid-row: 2 / 4;
  position: relative;
}
.FR240722romantictops .model04 .model__wrapper03 {
  display: flex;
  width: 83rem;
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  position: relative;
}
.FR240722romantictops .model04 .model__img0101 {
  width: 55rem;
}
.FR240722romantictops .model04 .model__img0102 {
  width: 38rem;
}
.FR240722romantictops .model04 .model__img0103 {
  width: 42rem;
}
.FR240722romantictops .model04 .model__credit {
  position: absolute;
  right: 6.6rem;
  bottom: -0.4rem;
}
.FR240722romantictops .model04 .model__title {
  width: 36.8rem;
  top: -8rem;
  left: 11rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .model04 {
    margin-top: calc(200*(100vw / 750));
  }
  .FR240722romantictops .model04 .model__grid {
    width: var(--basic-width-sp);
    margin-left: 0;
    display: block;
  }
  .FR240722romantictops .model04 .model__wrapper01 {
    width: calc(580*(100vw / 750));
    margin-left: calc(40*(100vw / 750));
  }
  .FR240722romantictops .model04 .model__wrapper02 {
    margin-top: calc(60*(100vw / 750));
    margin-left: calc(250*(100vw / 750));
  }
  .FR240722romantictops .model04 .model__wrapper03 {
    display: flex;
    width: calc(670*(100vw / 750));
    flex-direction: column;
    position: static;
    margin: 0 auto;
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model04 .model__img0101 {
    width: calc(580*(100vw / 750));
  }
  .FR240722romantictops .model04 .model__img0102 {
    width: calc(500*(100vw / 750));
  }
  .FR240722romantictops .model04 .model__img0103 {
    width: var(--full-width);
  }
  .FR240722romantictops .model04 .model__credit {
    position: static;
  }
  .FR240722romantictops .model04 .model__title {
    width: calc(70*(100vw / 750));
    top: initial;
    bottom: 0;
    left: calc(-91*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
model05
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model05 {
  margin-top: 18rem;
}
.FR240722romantictops .model05 .model__grid {
  width: 140rem;
  margin: 0 auto;
}
.FR240722romantictops .model05 .model__wrapper01 {
  width: 52rem;
  margin: 0 auto;
}
.FR240722romantictops .model05 .model__wrapper02 {
  width: 125.5rem;
  margin-left: 9rem;
  display: flex;
  column-gap: 16.5rem;
  margin-top: 6rem;
}
.FR240722romantictops .model05 .model__wrapper02 .model__wrap:first-of-type {
  width: 44rem;
  margin-left: 0;
  display: flex;
  flex-direction: column;
}
.FR240722romantictops .model05 .model__wrapper02 .model__wrap:nth-of-type(2) {
  width: 65rem;
  margin-top: 40rem;
  position: relative;
}
.FR240722romantictops .model05 .model__wrapper03 {
  width: 84rem;
  margin: 0 auto;
  margin-top: 10rem;
}
.FR240722romantictops .model05 .model__img0102 {
  width: 44rem;
}
.FR240722romantictops .model05 .model__img0103 {
  width: 65rem;
}
.FR240722romantictops .model05 .model__title {
  width: 41.2rem;
  top: -3.1rem;
  right: -3.6rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .model05 {
    margin-top: calc(192*(100vw / 750));
  }
  .FR240722romantictops .model05 .model__grid {
    width: var(--basic-width-sp);
    margin: 0 auto;
  }
  .FR240722romantictops .model05 .model__wrapper01 {
    width: calc(600*(100vw / 750));
    margin-left: calc(150*(100vw / 750));
  }
  .FR240722romantictops .model05 .model__wrapper02 {
    width: var(--basic-width-sp);
    margin-left: 0;
    display: block;
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model05 .model__wrapper02 .model__wrap:first-of-type {
    width: calc(540*(100vw / 750));
    margin-left: 0;
    display: block;
    margin-top: calc(60*(100vw / 750));
    position: relative;
    z-index: 10;
  }
  .FR240722romantictops .model05 .model__wrapper02 .model__wrap:nth-of-type(2) {
    width: calc(660*(100vw / 750));
    margin-top: calc(60*(100vw / 750));
    margin-left: calc(90*(100vw / 750));
  }
  .FR240722romantictops .model05 .model__wrapper03 {
    width: var(--basic-width-sp);
    margin: 0 auto;
    margin-top: calc(60*(100vw / 750));
  }
  .FR240722romantictops .model05 .model__img0102 {
    width: calc(540*(100vw / 750));
  }
  .FR240722romantictops .model05 .model__img0103 {
    width: var(--full-width);
  }
  .FR240722romantictops .model05 .model__title {
    width: calc(70*(100vw / 750));
    top: initial;
    bottom: calc(-106*(100vw / 750));
    right: calc(-91*(100vw / 750));
    pointer-events: none;
  }
  .FR240722romantictops .model05 .model__credit {
    margin-left: calc(45*(100vw / 750));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                SLICK
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .model__slider .slick-list img {
  width: 100%;
}
.FR240722romantictops .slick-dots {
  position: absolute;
  margin: 0;
  bottom: 1rem;
  left: 0.4rem;
}
.FR240722romantictops .slick-dots li button {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--color-black);
  border-radius: 50%;
}
.FR240722romantictops .slick-dots li.slick-active button {
  background: var(--color-black);
}
.FR240722romantictops .slick-dots li {
  margin: 0 0.6rem;
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .slick-dots {
    bottom: calc(20*100vw/750);
    left: initial;
    right: calc(8*100vw/750);
  }
  .FR240722romantictops .slick-dots li button {
    width: calc(10*100vw/750);
    height: calc(10*100vw/750);
  }
  .FR240722romantictops .slick-dots li { 
    margin: 0 calc(11*100vw/750);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                ENDVIEW
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.FR240722romantictops .endview {
  margin-top: 13.8rem;
  border-bottom: 0.1rem solid var(--color-txt);
}
.FR240722romantictops .endview_btn {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.3333333333;
  letter-spacing: 0.1em;
  color: var(--color-black);
  text-align: center;
}
.FR240722romantictops .endview_btn > a {
  padding-block: 0.25rem;
  border-bottom: 0.3rem double var(--color-txt);
}
.FR240722romantictops .endview_staff {
  font-family: var(--font-en);
  font-weight: 400;
  margin-block: 13.9rem 13.2rem;
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.1em;
  color: var(--color-black);
  text-align: center;
}
.FR240722romantictops .endview_staff .block_ch {
  display: inline-block;
}
.FR240722romantictops .endview_staff .change_font {
  font-family: var(--font-ja);
  font-weight: 200;
}
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .FR240722romantictops .endview {
    width: calc(1100*100vw/1400);
    margin: 0 auto;
    margin-top: calc(141*100vw/1400);
    border-bottom: calc(1*100vw/1400) solid var(--color-txt);
  }
  .FR240722romantictops .endview_btn {
    font-size: calc(20*100vw/1400);
  }
  .FR240722romantictops .endview_btn > a {
    padding-bottom: calc(1*100vw/1400);
  }
  .FR240722romantictops .endview_staff {
    margin-block: calc(145*100vw/1400) calc(136*100vw/1400);
    font-size: calc(12*100vw/1400);
  }
}
@media screen and (max-width: 767px) {
  .FR240722romantictops .endview {
    width: calc(750*100vw/750);
    margin-top: calc(144* 100vw / 750);
    border-bottom: 0;
  }
  .FR240722romantictops .endview_btn {
    font-size: calc(40*100vw/750);
  }
  .FR240722romantictops .endview_btn > a {
    padding-block: calc(11* 100vw / 750);
  }
  .FR240722romantictops .endview_staff {
    margin-block: calc(160* 100vw / 750) calc(147* 100vw / 750);
    font-size: calc(24*100vw/750);
  }
  .FR240722romantictops .endview_staff .block_ch {
    display: none;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                                                                Animation
//////////////////////////////////////////////////////////////////////////////////////////////
*/

/* その場でフェードイン */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
  
@keyframes fadeInAnime{
  from {
      opacity: 0;
  }
  
  to {
      opacity: 1;
  }
}
.FR240722romantictops .fadeInTrigger{
  opacity: 0;
}


.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}
  
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.FR240722romantictops .fadeUpTrigger{
  opacity: 0;
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
  display: inline-block;
}
.title-size {
  width: fit-content;
  height: fit-content;
}

.slide-in_inner {
  display: block;
}

/*左右のアニメーション*/
.leftAnime{
  opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

/*上下のアニメーション*/
.topAnime{
  opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeTopBottom {
  animation-name:slideTextY100;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextY100 {
  from {
  transform: translateY(-100%); /*要素を左の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateY(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

.slideAnimeBottomTop {
  animation-name:slideTextY-100;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextY-100 {
  from {
  transform: translateY(100%);/*要素を右の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateY(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

/*下上のアニメーション*/
.bottomAnime{
  opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeHeadFoot {
  animation-name:slideTextYb;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextYb {
  from {
  transform: translateY(100%); /*要素を左の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateY(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}

.slideAnimeFootHead {
  animation-name:slideTextY-b;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextY-b {
  from {
  transform: translateY(-100%);/*要素を右の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateY(0);/*要素を元の位置に移動*/
  opacity: 1;
  }
}