@charset "shift_jis";
/* CSS Document */

.text-area__2col{
  display: block;
  max-width: 220px;
  min-height: 110px;
}

.g-layout-block__content{
  overflow: hidden;
  position: relative;
  box-shadow: 0px 4px 20px 0px #00000029;
}
.news-area{
  color: #00C18A;
  position: relative;
  background: radial-gradient(circle at right bottom, #D5FEF4 0% ,#ffffff 50%);
  animation: fadeInAnime 0.6s ease-in-out .1s 1 normal forwards;
}
.news-area::before{
  content: "";
  position: absolute;
  width: 135px;
  height: 129px;
  background-image: url(../img/index_icon_news.png);
  background-repeat: no-repeat;
  right: 5px;
  bottom: 10px;
}
.theme-area{
  color: #FF72BA;
  position: relative;
  background: radial-gradient(circle at right bottom, #FFE9F5 0% ,#ffffff 50%);
  animation: fadeInAnime 0.6s ease-in-out .2s 1 normal forwards;
}
.theme-area::before{
  content: "";
  position: absolute;
  width: 180px;
  height: 181px;
  background-image: url(../img/index_icon_theme.png);
  background-position: right bottom 10px;
  background-repeat: no-repeat;
  right: 0px;
  bottom: 10px;
}
.word-area{
  color: #21A4FA;
  position: relative;
  background: radial-gradient(circle at right bottom, #DDF2FF 0% ,#ffffff 50%);
  animation: fadeInAnime 0.6s ease-in-out .3s 1 normal forwards;
}
.word-area::before{
  content: "";
  position: absolute;
  width: 182px;
  height: 160px;
  background-image: url(../img/index_icon_word.png);
  background-repeat: no-repeat;
  right: 0px;
  bottom: 10px;
}
.sentence-area{
  color: #8E72FA;
  position: relative;
  background: radial-gradient(circle at right bottom, #E9E2FF 0% ,#ffffff 50%);
  animation: fadeInAnime 0.6s ease-in-out .4s 1 normal forwards;
}
.sentence-area::before{
  content: "";
  position: absolute;
  width: 174px;
  height: 187px;
  background-image: url(../img/index_icon_sentence.png);
  background-repeat: no-repeat;
  right: 0px;
  bottom: 10px;
}

@media screen and (max-width: 1080px) {
  .g-layout-block--col-2{
    display: block;
  }

  .g-layout-block__content{
    margin-bottom: 20px;
  }
  .text-area__2col {
    display: block;
    max-width: 500px;
  }
}

@media print, screen and (max-width: 767px) {
  .text-area__2col {
    max-width: 210px;
    min-height: 5em;
  }
  .news-area::before{
    background-size: 82px;
    right: 5px;
    bottom: 5px;
    width: 82px;
    height: 81px;
  }
  .theme-area::before{
    background-size: 100px;
    right: -5px;
    bottom: -5px;
    width: 110px;
    height: 110px;
  }
  .word-area::before{
    background-size: 120px;
    right: -10px;
    bottom: -5px;
    width: 120px;
    height: 106px;
  }
  .sentence-area::before{
    background-size: 109px;
    right: -10px;
    bottom: -10px;
    width: 109px;
    height: 112px;
  }
}