@charset "utf-8";
#monotoneGirly {
  box-sizing: border-box;
  width: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック",  YuGothic, "Yu Gothic Medium", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 10px;
  color: #333333;
}
#monotoneGirly img{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
#monotoneGirly p, h3{
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
}
#monotoneGirly p {
  font-size: min(3.8vw,28px);
}
#monotoneGirly span {
  line-height: 1.5;
}
#monotoneGirly i{
  font-style: inherit;;
}
#monotoneGirly small, sub, sup{
  font-size: .8em;
}
#monotoneGirly a{
  text-decoration: none;
  transition: .6s;
}
#monotoneGirly .flex_rvs{
  flex-direction: row-reverse;
}
#monotoneGirly .forpc{
  display: none;
}
#monotoneGirly .forsp{
  display: block;
}
#monotoneGirly * {
  box-sizing: border-box;
}
#monotoneGirly>span {
  display: block;
  text-align: center;
}
/* contents */

/* slider */
#monotoneGirly .slider {
  opacity: 0;
  transition: opacity .1s linear;
}
#monotoneGirly .slider.slick-initialized {
  opacity: 1;
}
#monotoneGirly .slick-slide {
  width: 100%;
}
#monotoneGirly .slider .slick-dots {
  bottom: 2%;
  z-index: 5;
  padding-right: 5%;
  text-align: right;
}
#monotoneGirly .slick-dots li {
  margin: 0 2%;
  text-align: center;
  line-height: 1;
  border: none;
  width: 4px;
  height: 4px;
}
#monotoneGirly .slick-dots li button {
  width: 7px;
  height: 7px;
  margin: auto;
}
#monotoneGirly .slick-dots li button:hover:before,
#monotoneGirly .slick-dots li button:focus:before {
  opacity: 1;
}
#monotoneGirly .slick-dots li button:before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #ffffff;
  opacity: 1;
}
#monotoneGirly .slick-dots li.slick-active button:before {
  background: #626262;
}
#monotoneGirly .slick-dotted.slick-slider {
  margin-bottom: 0;
}
@media screen and (min-width:721px) {
  #monotoneGirly .slick-dots li {
    width: 4px;
    height: 4px;
  }
  #monotoneGirly .slick-dots li button {
    width: 4px;
    height: 4px;
  }
  #monotoneGirly .slick-dots li button:before {
    width: 10px;
    height: 10px;
  }
  /* #monotoneGirly .slick-arrow {
    width: min(15px, 1.26vw);
  } */
}
/* END slider */
#monotoneGirly {
  font-size: 3.8vw;
  overflow: hidden;
  background: #f6f6f6;
}
#monotoneGirly #introVideo {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .6s ease;
}
#monotoneGirly #introVideo picture {
  display: block;
  width: 100%;
  height: 100%;
}
#monotoneGirly #introImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  animation: introZoom 3.1s ease-out forwards;
}
@keyframes introZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}
#monotoneGirly span {
  display: block;
}
#monotoneGirly .kanban {
  position: relative;
}
#monotoneGirly .nKanbanTtl {
  position: absolute;
  width: 56%;
  right: 0;
  bottom: -5%;
}
#monotoneGirly .kanbanArea {
  padding: 14% 0;
  background: url("/img/interior/monotone_girly/kanban_ribon01.png") -23% -16%/54% no-repeat, url("/img/interior/monotone_girly/kanban_ribon02.png") 106% 106%/60% no-repeat, url("/img/interior/monotone_girly/bg01.jpg") 50% 50%/100% repeat-y;;
}
#monotoneGirly .kanbanText {
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 9% 0 6%;
  text-align: center;
  background: url("/img/interior/monotone_girly/icon_heart.png") 7% 8%/11% no-repeat, #ffffff;
  border: 2px solid #000;
  box-shadow: 0 0 0 6px #fff, 0 0 0 10px #000;
}
#monotoneGirly .kanbanText::before,
#monotoneGirly .kanbanText::after {
  position: absolute;
  content: "";
}
#monotoneGirly .kanbanText::before {
  width: 25%;
  aspect-ratio: 169/83;
  background: url("/img/interior/monotone_girly/icon_ribon.png") 50% 50%/contain no-repeat;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
}
#monotoneGirly .kanbanText::after {
  width: 26%;
  aspect-ratio: 163/153;
  background: url("/img/interior/monotone_girly/icon_heartcake.png") 50% 50%/contain no-repeat;
  bottom: -12%;
  right: -9%;
}
#monotoneGirly .kanbanText span {
  font-size: 114%;
  font-weight: bold;
}
#monotoneGirly .kanbanText p {
  margin-top: 7%;
}
/* Section */
#monotoneGirly #layout {
  padding-bottom: 12%;
  background: url("/img/interior/monotone_girly/bg02.jpg") 50% 50%/100% repeat-y;
}
#monotoneGirly .mainTitle{
  padding: 3% 0 4%;
  text-align: center;
  background: #ffffff;
  margin: 0 auto;
}
#monotoneGirly .mainTitle h2 {
  width: 85%;
  position: relative;
  margin: 0 auto;
  background: url("/img/interior/monotone_girly/ttl_underline.png") 50% 100%/62% no-repeat;
}
#monotoneGirly .mainTitle span {
  margin: 0 auto;
}
#monotoneGirly .mainTitle .mainTitleTxt {
  width: 40%;
}
#monotoneGirly .mainTitle .mainTitleSub {
  margin-top: 3%;
  width: 81%;
}
#monotoneGirly .mainImg {
  margin-bottom: 6%;
  text-align: center;
}
#monotoneGirly .mainImg img {
  border: 2px solid #4b4b4b;
}
#monotoneGirly [class^="lessonArea0"] .lesson {
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
#monotoneGirly .lessonTxt {
  width: 40%;
}
#monotoneGirly .lessonTxtImg {
  position: relative;
  width: 83%;
  margin: 0;
}
#monotoneGirly .lessonTxtImg::before {
  content: "";
  position: absolute;
  width: 130%;
  aspect-ratio: 50;
  background: url("/img/interior/monotone_girly/lesson_line.png") top left/100% no-repeat;
  left: -10%;
  bottom: -30%;
}
#monotoneGirly [class^="lessonArea0"] .lessonTxt p {
  margin-top: 12%;
  text-align: left;
  font-size: 90%;
  line-height: 1.7;
}
#monotoneGirly [class^="lessonArea0"] .lessonTxt p span:not(.txt_icon) {
  margin-bottom: 6%;
  line-height: 1.4;
  font-weight: 500;
  font-size: 126%;
  font-family: "A-OTF Ryumin Pro", serif, "游ゴシック", YuGothic, "Yu Gothic Medium", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}
#monotoneGirly .lessonArea03 .lessonTxt p span:not(.txt_icon) {
  font-size: 124% !important;
  letter-spacing: -0.05em;
}
#monotoneGirly .lessonImg {
  position: relative;
  width: 56%;
}
#monotoneGirly .lessonImg a {
  width: 100%;
  display: block;
  clip-path: inset(0 round 35% 35% 0 0);
}
#monotoneGirly .lessonImg .btnCheck {
  width: 26%;
  position: absolute;
  border-radius: 100vh;
  background: url("/img/interior/monotone_girly/arw_heart.png") 50% 86%/17% no-repeat, rgba(0, 0, 0, 0.6);
  bottom: 4%;
  right: 6%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
}
#monotoneGirly .lessonImg a span:not(.btnCheck) img {
  width: 100%;
}
#monotoneGirly .btnCheck img {
  width: 80%;
  margin-bottom: 7%;
}
#monotoneGirly .lessonArea01 .txt_icon {
  width: 30%;
}
#monotoneGirly .lessonArea01 .txt_icon:last-of-type {
  width: 28%;
}
#monotoneGirly .lessonArea02 .txt_icon {
  width: 42%;
}
#monotoneGirly .txt_icon {
  display: inline-block;
  width: 35%;
}
#monotoneGirly .point {
  margin-top: 6%;
}
#monotoneGirly .pointImg {
  width: 73%;
  position: relative;
  margin: 0 auto 3%;
}
#monotoneGirly .pointMainImg {
  position: relative;
  display: inline-block;
  z-index: 2;
  width: 100%;
  display: block;
  border: 6px solid #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
#monotoneGirly .bgNewspaper {
  position: absolute;
  width: 50%;
  top: -2%;
  left: -3%;
  z-index: 1;
  opacity: 0;
  transition: transform 0.9s ease-out, opacity 0.9s ease-out;
}
#monotoneGirly .bgNewspaper.in-view {
  transform: rotate(10deg);
  opacity: 1;
}
#monotoneGirly .pointTxt {
  position: relative;
  width: 88%;
  padding: 5% 0;
  margin: 0 auto;
  text-align: center;
  background: #ffffff;
}
#monotoneGirly .lessonArea01 .pointTxt::before,
#monotoneGirly .lessonArea03 .pointTxt::before {
  content: "";
  position: absolute;
  background: url("/img/interior/monotone_girly/icon_heartcandy.png") 50% 50%/contain no-repeat;
  width: 11%;
  aspect-ratio: 81/156;
  top: -35%;
  right: -4%;
}
#monotoneGirly .pointTtl {
  width: 19%;
  margin: 0 auto 4%;
  line-height: 1;
}
#monotoneGirly .pointTxt ul {
  font-size: 93%;
  text-align: left;
  padding-left: 1.8em;
}
#monotoneGirly .pointTxt ul li {
  position: relative;
  padding-left: 1em;
  line-height: 1.8;
}
#monotoneGirly .pointTxt ul li + li {
  margin-top: 2%;
}
#monotoneGirly .pointTxt ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 4%;
  aspect-ratio: 29/30;
  background: url("/img/interior/monotone_girly/icon_check.png") center / contain no-repeat;
}

#monotoneGirly .lessonArea02 {
  padding-top: 26%;
  background: url("/img/interior/monotone_girly/icon_moon.png") 8% 4%/14% no-repeat, url("/img/interior/monotone_girly/icon_star.png") 97% 50%/12% no-repeat;
}
#monotoneGirly .lessonArea02 .lesson .lessonTxtImg::before {
  left: 0;
  right: -10%;
}
#monotoneGirly .lessonArea02 .lesson .btnCheck {
  left: 6%;
  right: 0;
}
#monotoneGirly .lessonArea02 .lessonTxt {
  margin-bottom: 8%;
}
#monotoneGirly .lessonArea02 .point,
#monotoneGirly .lessonArea03 .point {
  margin-top: 8%;
}
#monotoneGirly .lessonArea03 {
  padding-top: 25%;
  background: url("/img/interior/monotone_girly/icon_heart02.png") 44% 11% / 11% no-repeat;
}
#monotoneGirly .lessonArea03 .txt_icon img {
  width: 55%;
}
#monotoneGirly .lessonArea03 .bgNewspaper {
  width: 48%;
  top: unset;
  left: unset;
  bottom: 0%;
  right: -8%;
}
#monotoneGirly .lessonArea03 .pointImg {
  margin-bottom: 6%;
  position: relative;
  z-index: 2;
}
#monotoneGirly .lessonArea03 .lessonTxt {
  margin-bottom: 8%;
}
#monotoneGirly .lessonArea03 .pointImg::before {
  content: "";
  position: absolute;
  background: url("/img/interior/monotone_girly/icon_piece.png") 50% 50%/contain no-repeat;
  width: 16%;
  aspect-ratio: 92 / 157;
  top: -13%;
  left: -6%;
  z-index: 3;
}
#monotoneGirly .lessonArea03 .pointTxt::before {
  background: url("/img/interior/monotone_girly/icon_ribon03.png") 50% 50% / contain no-repeat;
  width: 17%;
  aspect-ratio: 112 / 81;
  top: unset;
  right: -4%;
  bottom: 5%;
}
#monotoneGirly #stepup {
  padding-bottom: 18%;
  background: url("/img/interior/monotone_girly/icon_cherry02.png") 94% 38% / 8% no-repeat, url("/img/interior/monotone_girly/bg03.jpg") 50% 50% / 100% repeat-y;

}
#monotoneGirly #stepup .mainTitle {
  padding: 4% 0;
  background: #e2e2e2;
}
#monotoneGirly #stepup .mainTitle h2 {
  background: url("/img/interior/monotone_girly/ttl_underline.png") 50% 88%/60% no-repeat,url("/img/interior/monotone_girly/ttl_bg.png") 50% 50% / contain no-repeat;
  aspect-ratio: 641 / 322;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#monotoneGirly #stepup .mainTitle h2::before {
  content: "";
  position: absolute;
  background: url("/img/interior/monotone_girly/icon_cherry.png") 50% 50%/72% no-repeat;
  width: 15%;
  aspect-ratio: 81/95;
  top: 12%;
  left: -5%;
}
#monotoneGirly .cardSlider {
  margin-top: 5%;
}
#monotoneGirly .cardSlider .slide {
  width: 63%;
  margin: 0 auto;
}
#monotoneGirly .cardSlider .slide img {
  border-radius: 5px;
}
#monotoneGirly .cardSlider .sliderTxt {
  margin-top: 4%;
  line-height: 1.6;
}

/* cardSlider */
#monotoneGirly .cardSlider {
  padding: 0 20px;
}
#monotoneGirly .cardSlider .slick-slide {
  transition: transform .35s ease, opacity .35s ease;
  transform: scale(0.8);
  transform-origin: bottom center;
}
#monotoneGirly .cardSlider .slick-slide.slick-center {
  transform: scale(1);
  z-index: 5;
}
#monotoneGirly .cardSlider .slide {
  outline: none;
}
#monotoneGirly .cardSlider .slide a {
  display: block;
  padding: 0.6em 0.6em 1.5em;
  border: 2px solid #4b4b4b;
  border-radius: 5px;
  background: url("/img/interior/monotone_girly/arw_2heart.png") 95% 97%/9% no-repeat, #ffffff;
  margin: 0 10px;
  color: #333333;
}
#monotoneGirly .cardSlider .slide a p {
  color: #333333;
}
#monotoneGirly .cardSlider .img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
}
#monotoneGirly .cardSlider .sliderTxt {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}
#monotoneGirly .cardSlider .sliderTxt .txt_icon {
  width: 8%;
}
#monotoneGirly .cardSlider .slick-list {
  overflow: visible;
}
#monotoneGirly .cardSlider .slick-dots {
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
}
#monotoneGirly .cardSlider .slick-dots li {
  margin: 0 1%;
}
#monotoneGirly .cardSlider .slick-dots li button:before {
  background: #878787;
}
#monotoneGirly .cardSlider .slick-dots li.slick-active button:before {
  background: #000000;
}

/* END cardSlider */



/* OtherItems */
#monotoneGirly .otherItems {
  position: relative;
  background: url("/img/interior/monotone_girly/bg04.jpg") 50% 50%/100% repeat-y;
  padding: 8% 0 4%;
}
#monotoneGirly .otherItems::before {
  content: "";
  position: absolute;
  background: url("/img/interior/monotone_girly/icon_perfume.png") 50% 50%/100% no-repeat;
  width: 13.5%;
  aspect-ratio: 105 / 143;
  top: -2%;
  left: 8%;
}
#monotoneGirly .otherTtl {
  width: 80%;
  margin: 0 auto;
}
#monotoneGirly .otherItems .othrlst {
  margin-top: 8%;
  padding: 0 2%;
}
#monotoneGirly .otherItems .btnOther {
  width: 100%;
  margin-top: 6%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
#monotoneGirly .otherItems .btnOther a {
  width: 70%;
  margin: 5% auto 0;
  padding: 0.6em 0.5em 0.6em 0;
  border-radius: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: url("/img/interior/monotone_girly/btn_heart02.png") 90% 50%/7% no-repeat , #000000;
  transition: 0.3s ease-in-out;
}
#monotoneGirly .otherItems .flex-btwn {
  display: flex;
  align-items: stretch;
  padding-bottom: 10%;
  gap: 35px 10px;
  z-index: 10;
}
#monotoneGirly .otherItems .flex-btwn>li {
  width: 48%;
  display: flex;
  flex-direction: column;
}
#monotoneGirly .otherItems .othrlst .itmimg {
  text-align: center;
  transition: 0.3s ease-in-out;
}
#monotoneGirly .otherItems [class^="btn_ot"] {
  flex: 1;
  font-size: 116%;
  font-weight: bold;
  color: #ffffff;
  transition: 0.3s ease-in-out;
}
#monotoneGirly .otherItems [class^="btn_ot"] span {
  font-size: 94%;
}
#monotoneGirly .lastBtn .btn {
  position: relative;
  margin: 0 auto;
  width: 53%;
  display: flex;
  justify-content: center;
  border-radius: 50vh;
  padding: 1.2em 1em 1.2em 0;
  color: #ffffff;
  background: url("/img/interior/monotone_girly/btn_heart02.png") 93% 50%/5% no-repeat , #000000;
  outline: 1px solid #ddc8cc;
  outline-offset: -4px;
}
#monotoneGirly .lastBtn .btn::before {
  content: "";
  position: absolute;
  background: url("/img/interior/monotone_girly/icon_ribon02.png") 50% 50%/100% no-repeat;
  width: 20%;
  aspect-ratio: 72/48;
  top: -14%;
  left: 0%;
}
#monotoneGirly .lastBanner {
  padding-bottom: 15%;
  background: url("/img/interior/monotone_girly/bg01.jpg") 50% 50%/100% repeat-y;
}

/* contents */
@media screen and (min-width: 768px){
#monotoneGirly {
  max-width: 1020px;
  font-size: min(25px,2.5vw);
}
#monotoneGirly p {
  font-size: min(25px,2.5vw);
}
#monotoneGirly .forsp {
  display: none;
}
#monotoneGirly .forpc {
  display: block;
}
#monotoneGirly .kanbanArea {
  padding: 8% 0 10%;
  background-size: 28%, 45%, 100%;
  background-position: -4% -10%,104% 107%, 50%;
}
#monotoneGirly .nKanbanTtl {
  width: 43%;
  right: -2%;
}
#monotoneGirly .kanbanText {
  width: 69%;
  padding: 7% 0 5%;
  background-position: 5% 18%;
  background-size: 10%;
}
#monotoneGirly .kanbanText p {
  font-size: 95%;
}
#monotoneGirly .kanbanText p {
  margin-top: 4%;
}
#monotoneGirly .kanbanText::after {
  width: 23%;
  bottom: -16%;
  right: -12%;
}
#monotoneGirly .kanbanText::before {
  width: 18%;
}
#monotoneGirly .mainTitle {
  padding: 2% 0 1%;
}
#monotoneGirly .mainTitle .mainTitleTxt {
  width: 42%;
}
#monotoneGirly .mainTitle h2 {
  width: 42%;
  background-position: 50% 91%;
  background-size: 65%;
}
#monotoneGirly .mainTitle .mainTitleSub {
  margin-top: 1%;
  width: 86%;
}
#monotoneGirly .mainImg {
  width: 57%;
  margin: 4% auto 3%;
}
#monotoneGirly [class^="lessonArea0"] {
  width: 58%;
  margin: 0 auto;
}
#monotoneGirly .lessonImg {
  width: 55%;
  margin-bottom: 4%;
}
#monotoneGirly [class^="lessonArea0"] .lessonTxt p {
  font-size: 74%;
}
#monotoneGirly .lessonArea01 .txt_icon {
  width: 20%;
}
#monotoneGirly .lessonArea01 .txt_icon:last-child {
  width: 19%;
}
#monotoneGirly .lessonImg .btnCheck {
  width: 22.5%;
}
#monotoneGirly .lessonImg a:hover .btnCheck {
  background-position: 50% 90%;
  background-color: rgba(0, 0, 0, 0.8);
}
#monotoneGirly .pointImg {
  width: 69%;
  margin: 0 auto 5%;
}
#monotoneGirly .pointTxt {
  width: 86%;
}
#monotoneGirly .pointTxt ul {
  font-size: 80%;
}
#monotoneGirly .pointTtl {
  margin-bottom: 3%;
}
#monotoneGirly .lessonArea01 .pointTxt::before {
  top: -23%;
}
#monotoneGirly .lessonArea02 {
  padding-top: 18%;
}
#monotoneGirly .lessonArea02 .txt_icon {
  width: 33%;
}
#monotoneGirly .lessonArea03 {
  padding-top: 14%;
}
#monotoneGirly .pointTxt ul li::before {
  width: 3.5%;
  top: 0.5em;
}
#monotoneGirly #layout {
  padding-bottom: 8%;
}
#monotoneGirly #stepup .mainTitle {
  padding: 2% 0;
}
#monotoneGirly #stepup .mainTitle h2 {
  background-position: 50% 84%, 50%;
  background-size: 60%,contain;
}
#monotoneGirly .cardSlider {
  padding: 0 40px;
}
#monotoneGirly .cardSlider .slide {
  width: 100%;
  margin: 0;
}
#monotoneGirly .cardSlider .slide a {
  margin: 0 0 5% 0;
}
#monotoneGirly .cardSlider .slide a:hover {
  box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.4);
}
#monotoneGirly .cardSlider .slick-dots {
  bottom: -3%;
}
#monotoneGirly .cardSlider .slick-slide {
  transform: scale(0.85);
}
#monotoneGirly .cardSlider .slick-slide.slick-center {
  transform: scale(1);
}
#monotoneGirly .cardSlider .slick-list {
  overflow: hidden;
}
#monotoneGirly #stepup {
  padding-bottom: 11%;
  background-position: 73% 34%, 50%;
  background-size: 5%, 100%;
}
#monotoneGirly .lastBanner {
  padding-bottom: 8%;
}


/* otherItems */
#monotoneGirly .otherItems {
  padding: 5% 0 4%;
}
#monotoneGirly .otherItems h2 {
  width: 40%;
}
#monotoneGirly .otherItems::before {
  width: 9%;
  top: -1.5%;
  left: 14%;
}
#monotoneGirly .otherItems .othrlst {
  margin-top: 5%;
  padding: 0 12%;
}
#monotoneGirly .otherItems .flex-btwn {
  width: 80%;
  margin: 0 auto;
  gap: 35px 30px;
}
#monotoneGirly .otherItems .flex-btwn>li {
  width: 46%;
}
#monotoneGirly .otherItems [class^="btn_ot"] {
  font-size: min(22px,2.2vw);
  letter-spacing: unset;
}
#monotoneGirly .otherItems .othrlst .itmimg img {
  width: 100%;
}
#monotoneGirly .otherItems .btnOther a:hover,
#monotoneGirly .lastBtn .btn:hover {
  filter: drop-shadow(0px 2px 4px #fff);
}
#monotoneGirly .lastBtn .btn {
  width: 35%;
  transition: 0.3s ease-in-out;
}
#monotoneGirly .lastBtn .btn::before {
  top: -20%;
}
#monotoneGirly .lastBanner img {
  width: 100%;
  border-bottom: 1px solid #434343;
}
}
/*///// animation /////*/
.anmt, .at-anmt1, .at-anmt2{
  position: relative;
  height: 100%;
}
.anmt, .anmt > div, .at-anmt1, .at-anmt2{
  opacity: 0;
}
.at-anmt1.animated{
  animation: mainshow1 .8s ease-in-out 0s forwards;
}
@keyframes mainshow1{
  10%{
    opacity: 0;
    transform: translateY(100px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
.at-anmt2.animated{
  animation: mainshow2 .8s ease-in-out .5s forwards;
}
@keyframes mainshow2{
  40%{
    opacity: 0;
    transform: translateY(100px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
.anmt.animated, .anmt.animated > div{
  animation: boxshow 1s ease-in-out 0s forwards;
}
@keyframes boxshow{
  0%{
    opacity: 0;
    transform: translateY(70px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}