/* CSS Document */
.color-dark {
  color: #289C4C; }

#wrapper {
  overflow: hidden; }

header.top-img {
  background: url("../img/title-back-l.png"), url("../img/title-back-r.png"), url("../img/title-back.jpg");
  background-repeat: no-repeat;
  background-position: left bottom,right bottom,bottom center;
  background-size: 30%, 30%, cover;
  height: 800px;
  text-align: center;
  position: relative;
  padding-top: 7rem;
  z-index: -2; }
  @media screen and (max-width: 1399px) {
    header.top-img {
      background-size: 25%, 25%, cover; } }
  @media screen and (max-width: 1199px) {
    header.top-img {
      height: 640px;
      background-position: left bottom,right bottom,bottom center;
      background-size: 25%, 25%, cover; } }
  @media screen and (max-width: 991px) {
    header.top-img {
      height: 515px; } }
  @media screen and (max-width: 767px) {
    header.top-img {
      height: 380px;
      padding-top: 5rem; } }
  @media screen and (max-width: 575px) {
    header.top-img {
      background: url("../img/title-back-l.png"), url("../img/title-back-r.png"), url("../img/title-xs-back.jpg");
      background-repeat: no-repeat;
      background-position: left 90%,right 90%,bottom center;
      background-size: 45%, 45%, cover;
      height: 460px;
      padding-top: 3rem; } }
  header.top-img .d-flex {
    align-items: center;
    justify-content: center; }
    header.top-img .d-flex .left-img {
      width: 19%;
      margin-right: 1%;
      position: relative;
      animation: bounce-illust 7s 5s steps(1) infinite; }
      @media screen and (max-width: 1199px) {
        header.top-img .d-flex .left-img {
          width: 16%;
          margin-right: 0.5%; } }
      @media screen and (max-width: 575px) {
        header.top-img .d-flex .left-img {
          display: none; } }
      header.top-img .d-flex .left-img::before {
        content: "";
        display: block;
        background-image: url("../img/title-l-f.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 140px;
        height: 140px;
        position: absolute;
        left: -40%;
        top: -20%;
        z-index: -1; }
        @media screen and (max-width: 1399px) {
          header.top-img .d-flex .left-img::before {
            width: 110px;
            height: 110px;
            left: -19%; } }
        @media screen and (max-width: 1199px) {
          header.top-img .d-flex .left-img::before {
            width: 90px;
            height: 90px;
            left: -15%;
            top: -15%; } }
        @media screen and (max-width: 991px) {
          header.top-img .d-flex .left-img::before {
            top: -50%; } }
        @media screen and (max-width: 767px) {
          header.top-img .d-flex .left-img::before {
            top: -80%;
            left: 10%; } }
        @media screen and (max-width: 575px) {
          header.top-img .d-flex .left-img::before {
            display: none; } }
    header.top-img .d-flex h1 {
      width: 60%; }
      @media screen and (max-width: 575px) {
        header.top-img .d-flex h1 {
          width: 100%; } }
      header.top-img .d-flex h1 img {
        width: 560px;
        margin-bottom: 1.5rem; }
        @media screen and (max-width: 1199px) {
          header.top-img .d-flex h1 img {
            width: 460px; } }
        @media screen and (max-width: 767px) {
          header.top-img .d-flex h1 img {
            width: 280px;
            margin-bottom: 1rem; } }
        header.top-img .d-flex h1 img + img {
          width: 645px;
          filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.2)); }
    header.top-img .d-flex .right-img {
      width: 19%;
      margin-left: 1%;
      animation: bounce-illust 7s 5s steps(1) infinite; }
      @media screen and (max-width: 1199px) {
        header.top-img .d-flex .right-img {
          width: 16%;
          margin-right: 0.5%; } }
      @media screen and (max-width: 575px) {
        header.top-img .d-flex .right-img {
          display: none; } }
  header.top-img .d-sm-none.d-flex {
    align-items: center;
    justify-content: center; }
    header.top-img .d-sm-none.d-flex .left-img {
      display: block !important;
      width: 20%;
      margin-right: 0.5%;
      position: relative; }
    header.top-img .d-sm-none.d-flex .center-img {
      width: 60%; }
    header.top-img .d-sm-none.d-flex .right-img {
      display: block !important;
      width: 20%;
      margin-right: 0.5%; }
  header.top-img .img-01 {
    position: relative;
    top: 60%;
    max-width: 1500px;
    margin: auto; }
    header.top-img .img-01 .img-01-1 {
      position: absolute;
      width: 200px;
      bottom: 5px;
      left: 245px;
      animation: floating-illust 4s infinite 1s ease alternate; }
      @media screen and (max-width: 1399px) {
        header.top-img .img-01 .img-01-1 {
          width: 190px;
          left: 200px; } }
      @media screen and (max-width: 1199px) {
        header.top-img .img-01 .img-01-1 {
          width: 150px;
          left: 180px;
          bottom: 15px; } }
      @media screen and (max-width: 991px) {
        header.top-img .img-01 .img-01-1 {
          width: 110px;
          left: 145px; } }
      @media screen and (max-width: 767px) {
        header.top-img .img-01 .img-01-1 {
          width: 82px;
          left: 110px; } }
      @media screen and (max-width: 575px) {
        header.top-img .img-01 .img-01-1 {
          width: 82px;
          left: 15px;
          bottom: 90px; } }
    header.top-img .img-01 .img-01-2 {
      position: absolute;
      width: 230px;
      bottom: 62px;
      left: 465px;
      animation: floating-illust2 5s infinite 1s ease alternate; }
      @media screen and (max-width: 1399px) {
        header.top-img .img-01 .img-01-2 {
          width: 220px;
          left: 410px; } }
      @media screen and (max-width: 1199px) {
        header.top-img .img-01 .img-01-2 {
          width: 180px;
          left: 350px; } }
      @media screen and (max-width: 991px) {
        header.top-img .img-01 .img-01-2 {
          width: 135px;
          left: 270px;
          bottom: 55px; } }
      @media screen and (max-width: 767px) {
        header.top-img .img-01 .img-01-2 {
          width: 100px;
          left: 210px;
          bottom: 40px; } }
      @media screen and (max-width: 575px) {
        header.top-img .img-01 .img-01-2 {
          width: 100px;
          left: 95px;
          bottom: 90px; } }
    header.top-img .img-01 .img-01-3 {
      position: absolute;
      width: 270px;
      bottom: 63px;
      right: 497px;
      animation: floating-illust 5s infinite 1s ease alternate; }
      @media screen and (max-width: 1399px) {
        header.top-img .img-01 .img-01-3 {
          width: 260px;
          right: 370px; } }
      @media screen and (max-width: 1199px) {
        header.top-img .img-01 .img-01-3 {
          width: 215px;
          right: 300px; } }
      @media screen and (max-width: 991px) {
        header.top-img .img-01 .img-01-3 {
          width: 160px;
          right: 240px;
          bottom: 55px; } }
      @media screen and (max-width: 767px) {
        header.top-img .img-01 .img-01-3 {
          width: 110px;
          right: 185px;
          bottom: 45px; } }
      @media screen and (max-width: 575px) {
        header.top-img .img-01 .img-01-3 {
          width: 110px;
          right: 93px;
          bottom: 90px; } }
    header.top-img .img-01 .img-01-4 {
      position: absolute;
      width: 270px;
      bottom: 5px;
      right: 245px;
      animation: floating-illust2 4s infinite 1s ease alternate; }
      @media screen and (max-width: 1399px) {
        header.top-img .img-01 .img-01-4 {
          width: 260px;
          right: 120px; } }
      @media screen and (max-width: 1199px) {
        header.top-img .img-01 .img-01-4 {
          width: 215px;
          right: 85px;
          bottom: 15px; } }
      @media screen and (max-width: 991px) {
        header.top-img .img-01 .img-01-4 {
          width: 160px; } }
      @media screen and (max-width: 767px) {
        header.top-img .img-01 .img-01-4 {
          width: 113px;
          right: 75px; } }
      @media screen and (max-width: 575px) {
        header.top-img .img-01 .img-01-4 {
          width: 113px;
          right: 0px;
          bottom: 90px; } }
  header.top-img .img-02 {
    position: absolute;
    bottom: -10%;
    display: block;
    width: 100%; }
    @media screen and (max-width: 1199px) {
      header.top-img .img-02 {
        bottom: -12%; } }
    @media screen and (max-width: 575px) {
      header.top-img .img-02 {
        bottom: -9%; } }
    header.top-img .img-02 img {
      width: 100%; }
  header.top-img .img-03 {
    position: absolute;
    bottom: -17%;
    left: 0;
    right: 0;
    margin: auto;
    animation: floating-illust 5s infinite 1s ease alternate; }
    @media screen and (max-width: 1199px) {
      header.top-img .img-03 {
        bottom: -25%;
        width: 70%; } }
    @media screen and (max-width: 575px) {
      header.top-img .img-03 {
        width: 100%; } }

@keyframes bounce-illust {
  0% {
    transform: translateY(0); }
  30% {
    transform: translateY(0); }
  33% {
    transform: translateY(-5px); }
  36% {
    transform: translateY(0); }
  39% {
    transform: translateY(-5px); }
  42% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } }
@keyframes floating-illust {
  0% {
    transform: translate(0, 0) rotate(-1deg); }
  50% {
    transform: translate(0, -7px) rotate(0deg); }
  100% {
    transform: translate(0, 0) rotate(1deg); } }
@keyframes floating-illust2 {
  0% {
    transform: translate(0, 0) rotate(1deg); }
  40% {
    transform: translate(0, -10px) rotate(0deg); }
  100% {
    transform: translate(0, 0) rotate(-1deg); } }
.anim-box-popup {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0; }
  100% {
    transform: translateY(0) scale(1); }
  80%, 100% {
    opacity: 1; } }
.is-animated-popup {
  opacity: 1;
  transform: translateY(0) scale(1); }

.anim-box-popup2 {
  opacity: 0;
  animation: popup2 1s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes popup2 {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0; }
  100% {
    transform: translateY(0) scale(1); }
  80%, 100% {
    opacity: 1; } }
.is-animated-popup2 {
  opacity: 1;
  transform: translateY(0) scale(1); }

div.page-nav-link {
  margin: 3rem 0 7rem; }
  @media screen and (max-width: 1199px) {
    div.page-nav-link {
      margin: 7rem 0 7rem; } }
  @media screen and (max-width: 991px) {
    div.page-nav-link {
      margin: 7rem 0 0; } }
  @media screen and (max-width: 767px) {
    div.page-nav-link {
      margin: 7rem 0 5rem; } }
  @media screen and (max-width: 575px) {
    div.page-nav-link {
      margin: 7rem 0 0; } }
  div.page-nav-link ul {
    justify-content: space-between; }
    @media screen and (max-width: 575px) {
      div.page-nav-link ul {
        flex-wrap: wrap; } }
    div.page-nav-link ul li {
      width: 32%; }
      @media screen and (max-width: 575px) {
        div.page-nav-link ul li {
          width: 100%; } }
      div.page-nav-link ul li a {
        background-color: #289C4C;
        color: #fff;
        display: block;
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        font-size: 26px;
        font-size: 2.6rem;
        font-weight: bold;
        filter: drop-shadow(0px 5px 0px #126b45);
        transition: 0.3s; }
        @media screen and (max-width: 991px) {
          div.page-nav-link ul li a {
            font-size: 20px;
            font-size: 2rem; } }
        @media screen and (max-width: 767px) {
          div.page-nav-link ul li a {
            padding: 2rem 1rem;
            line-height: 1.2;
            font-size: 16px;
            font-size: 1.6rem; } }
        @media screen and (max-width: 575px) {
          div.page-nav-link ul li a {
            padding: 1.5rem 1rem;
            line-height: 1.2;
            font-size: 18px;
            font-size: 1.8rem;
            margin-bottom: 2rem; } }
        div.page-nav-link ul li a span {
          display: block;
          width: 200px;
          margin: auto; }
          @media screen and (max-width: 991px) {
            div.page-nav-link ul li a span {
              width: 150px; } }
          @media screen and (max-width: 767px) {
            div.page-nav-link ul li a span {
              width: 120px; } }
          div.page-nav-link ul li a span img {
            width: 100%; }
        div.page-nav-link ul li a:hover {
          filter: none;
          transform: translateY(5px); }

section {
  position: relative; }
  @media screen and (max-width: 767px) {
    section {
      padding-top: 4rem; } }
  section h2 {
    position: relative;
    display: block;
    position: relative;
    text-align: center;
    font-size: 34px;
    font-size: 3.4rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 5rem 0 4rem 0; }
    @media screen and (max-width: 767px) {
      section h2 {
        font-size: 30px;
        font-size: 3rem;
        padding: 0 0 3rem 0; } }
    section h2::before {
      content: "";
      display: block;
      width: 86px;
      height: 32px;
      background-image: url("../img/mini-title.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      margin: 0 auto 2rem; }
      @media screen and (max-width: 767px) {
        section h2::before {
          margin: 0 auto 1rem; } }
    section h2 span {
      width: 200px;
      display: block;
      margin: auto; }
      @media screen and (max-width: 767px) {
        section h2 span {
          width: 180px; } }

section#company-in-soja-city div.d-flex {
  justify-content: center;
  position: relative; }
  section#company-in-soja-city div.d-flex .left-img {
    position: absolute;
    bottom: -25%;
    left: 0;
    display: flex;
    justify-content: left; }
    @media screen and (max-width: 575px) {
      section#company-in-soja-city div.d-flex .left-img {
        display: none; } }
    section#company-in-soja-city div.d-flex .left-img::before {
      content: "";
      background-image: url("../img/company-l.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 170px;
      height: 110px;
      display: block;
      position: absolute;
      right: -95%;
      z-index: -1; }
      @media screen and (max-width: 991px) {
        section#company-in-soja-city div.d-flex .left-img::before {
          width: 100px;
          height: 70px;
          right: -20%; } }
      @media screen and (max-width: 767px) {
        section#company-in-soja-city div.d-flex .left-img::before {
          right: 0%;
          top: -25%; } }
    @media screen and (max-width: 991px) {
      section#company-in-soja-city div.d-flex .left-img img {
        width: 65%; } }
  section#company-in-soja-city div.d-flex .right-img {
    position: absolute;
    bottom: -25%;
    right: 0;
    display: flex;
    justify-content: right; }
    @media screen and (max-width: 575px) {
      section#company-in-soja-city div.d-flex .right-img {
        display: none; } }
    section#company-in-soja-city div.d-flex .right-img::before {
      content: "";
      background-image: url("../img/company-r.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 170px;
      height: 110px;
      display: block;
      position: absolute;
      left: -100%;
      z-index: -1; }
      @media screen and (max-width: 991px) {
        section#company-in-soja-city div.d-flex .right-img::before {
          width: 100px;
          height: 70px;
          left: -20%; } }
      @media screen and (max-width: 767px) {
        section#company-in-soja-city div.d-flex .right-img::before {
          left: -10%;
          top: -25%; } }
    @media screen and (max-width: 991px) {
      section#company-in-soja-city div.d-flex .right-img img {
        width: 65%; } }
section#company-in-soja-city ul {
  margin-bottom: 0; }
  section#company-in-soja-city ul li {
    margin-bottom: 7rem; }
    @media screen and (max-width: 991px) {
      section#company-in-soja-city ul li {
        margin-bottom: 4rem; } }
    section#company-in-soja-city ul li .banner {
      position: relative;
      overflow: hidden;
      max-width: 450px;
      height: 200px;
      background: #289C4C;
      border: 1px solid #333333; }
      section#company-in-soja-city ul li .banner::after {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        background: url("../img/company-01.jpg") no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -ms-transition: all .3s ease-out;
        transition: all .3s ease-out; }
      section#company-in-soja-city ul li .banner:hover::after {
        opacity: 0.8;
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1); }
      section#company-in-soja-city ul li .banner a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        height: 100%;
        text-decoration: none;
        color: #fff; }
    section#company-in-soja-city ul li dd {
      padding-top: 1rem;
      font-weight: bold;
      color: #4D4D4D;
      line-height: 1.2; }
      section#company-in-soja-city ul li dd span {
        font-weight: normal;
        font-size: 10px;
        font-size: 1rem;
        color: #808080;
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: strict; }
    section#company-in-soja-city ul li:nth-child(2) .banner::after {
      position: absolute;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      background: url("../img/company-02.jpg") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      background-size: cover;
      -webkit-transition: all .3s ease-out;
      -moz-transition: all .3s ease-out;
      -ms-transition: all .3s ease-out;
      transition: all .3s ease-out; }
    section#company-in-soja-city ul li:nth-child(3) .banner::after {
      position: absolute;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      background: url("../img/company-03.jpg") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      background-size: cover;
      -webkit-transition: all .3s ease-out;
      -moz-transition: all .3s ease-out;
      -ms-transition: all .3s ease-out;
      transition: all .3s ease-out; }
section#company-in-soja-city div.d-flex.d-sm-none {
  justify-content: center;
  position: relative;
  padding-top: 15rem; }
  section#company-in-soja-city div.d-flex.d-sm-none .left-img {
    position: absolute;
    bottom: -25%;
    left: 0;
    display: flex;
    justify-content: left; }
    section#company-in-soja-city div.d-flex.d-sm-none .left-img::before {
      content: "";
      background-image: url("../img/company-l.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 100px;
      height: 70px;
      display: block;
      position: absolute;
      right: 0%;
      top: -25%;
      z-index: -1; }
    section#company-in-soja-city div.d-flex.d-sm-none .left-img img {
      width: 65%; }
  section#company-in-soja-city div.d-flex.d-sm-none .right-img {
    position: absolute;
    bottom: -25%;
    right: 0;
    display: flex;
    justify-content: right; }
    section#company-in-soja-city div.d-flex.d-sm-none .right-img::before {
      content: "";
      background-image: url("../img/company-r.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 100px;
      height: 70px;
      display: block;
      position: absolute;
      left: -10%;
      top: -25%;
      z-index: -1; }
    section#company-in-soja-city div.d-flex.d-sm-none .right-img img {
      width: 65%; }

section#company-tour {
  background-image: url("../img/tour-back.svg"); }
  @media screen and (max-width: 575px) {
    section#company-tour h2 {
      padding: 0 0 10rem 0; } }
  section#company-tour div.d-flex {
    justify-content: center;
    position: relative; }
    section#company-tour div.d-flex .right-img {
      animation: floating-illust 4s infinite 1s ease alternate;
      position: absolute;
      bottom: -48%;
      right: 0;
      margin-right: -2rem;
      display: flex;
      justify-content: right; }
      @media screen and (max-width: 991px) {
        section#company-tour div.d-flex .right-img {
          bottom: -40%; } }
      @media screen and (max-width: 767px) {
        section#company-tour div.d-flex .right-img {
          right: 2%;
          bottom: -60%; } }
      @media screen and (max-width: 575px) {
        section#company-tour div.d-flex .right-img {
          right: 5%;
          bottom: -40%; } }
      section#company-tour div.d-flex .right-img::before {
        content: "";
        background-image: url("../img/tour-r.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 150px;
        height: 80px;
        display: block;
        position: absolute;
        left: -70%;
        z-index: -1; }
        @media screen and (max-width: 991px) {
          section#company-tour div.d-flex .right-img::before {
            width: 120px;
            height: 60px;
            left: -15%;
            top: -10%; } }
        @media screen and (max-width: 767px) {
          section#company-tour div.d-flex .right-img::before {
            background-image: url("../img/tour-sm-r.svg");
            width: 120px;
            height: 60px;
            left: 35%;
            top: -30%; } }
        @media screen and (max-width: 575px) {
          section#company-tour div.d-flex .right-img::before {
            left: -15%;
            top: 3%; } }
      @media screen and (max-width: 991px) {
        section#company-tour div.d-flex .right-img img {
          width: 65%; } }
  section#company-tour h3 {
    font-size: 19px;
    font-size: 1.9rem;
    font-weight: bold;
    margin-bottom: 1.5rem; }
  section#company-tour ul li {
    margin-bottom: 7rem; }
    @media screen and (max-width: 767px) {
      section#company-tour ul li {
        margin-bottom: 5rem; } }

section#character div.d-flex {
  justify-content: center;
  position: relative; }
section#character ul {
  justify-content: space-between;
  flex-wrap: wrap; }
  section#character ul li {
    width: 49%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 2rem;
    padding: 1rem;
    margin-bottom: 2rem; }
    @media screen and (max-width: 767px) {
      section#character ul li {
        margin-bottom: 1.5rem; } }
    @media screen and (max-width: 575px) {
      section#character ul li {
        width: 100%; } }
    section#character ul li div.character-l img {
      filter: drop-shadow(8px 8px 1px rgba(0, 0, 0, 0.15)); }
      @media screen and (max-width: 991px) {
        section#character ul li div.character-l img {
          width: 50%; } }
    section#character ul li div.character-r .h3-mini {
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.3;
      margin-bottom: 1rem; }
      @media screen and (max-width: 767px) {
        section#character ul li div.character-r .h3-mini {
          font-size: 14px;
          font-size: 1.4rem; } }
    section#character ul li div.character-r h3 {
      font-size: 36px;
      font-size: 3.6rem;
      font-weight: bold;
      margin-bottom: 2rem;
      line-height: 0.8; }
      @media screen and (max-width: 767px) {
        section#character ul li div.character-r h3 {
          font-size: 30px;
          font-size: 3rem; } }
      section#character ul li div.character-r h3 span {
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: normal; }
        @media screen and (max-width: 767px) {
          section#character ul li div.character-r h3 span {
            font-size: 14px;
            font-size: 1.4rem; } }
    section#character ul li div.character-r p {
      line-height: 1.5; }
    section#character ul li:nth-child(1) {
      background-color: #FCE7E4; }
      section#character ul li:nth-child(1) div.character-l {
        width: 40%;
        margin: auto; }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(1) div.character-l {
            width: 100%;
            text-align: center; } }
      section#character ul li:nth-child(1) div.character-r {
        width: 60%;
        padding: 2rem 2rem 2rem 0rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(1) div.character-r {
            padding: 1.5rem 1.5rem 1.5rem 0rem; } }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(1) div.character-r {
            width: 100%;
            padding: 3rem 1.5rem 1.5rem 1.5rem; } }
        section#character ul li:nth-child(1) div.character-r h3 {
          color: #BA5D4F; }
          section#character ul li:nth-child(1) div.character-r h3 span {
            color: #333333; }
    section#character ul li:nth-child(2) {
      background-color: #EDE8FA; }
      section#character ul li:nth-child(2) div.character-l {
        width: 40%;
        margin: auto; }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(2) div.character-l {
            width: 100%;
            text-align: center; } }
      section#character ul li:nth-child(2) div.character-r {
        width: 60%;
        padding: 2rem 2rem 2rem 0rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(2) div.character-r {
            padding: 1.5rem 1.5rem 1.5rem 0rem; } }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(2) div.character-r {
            width: 100%;
            padding: 3rem 1.5rem 1.5rem 1.5rem; } }
        section#character ul li:nth-child(2) div.character-r h3 {
          color: #A379B4; }
          section#character ul li:nth-child(2) div.character-r h3 span {
            color: #333333; }
    section#character ul li:nth-child(3) {
      background-color: #F4FBEF; }
      section#character ul li:nth-child(3) div.character-l {
        width: 40%;
        margin: auto; }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(3) div.character-l {
            width: 100%;
            text-align: center; } }
      section#character ul li:nth-child(3) div.character-r {
        width: 60%;
        padding: 2rem 2rem 2rem 0rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(3) div.character-r {
            padding: 1.5rem 1.5rem 1.5rem 0rem; } }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(3) div.character-r {
            width: 100%;
            padding: 3rem 1.5rem 1.5rem 1.5rem; } }
        section#character ul li:nth-child(3) div.character-r h3 {
          color: #28884C; }
        section#character ul li:nth-child(3) div.character-r .h3-mini {
          color: #28884C; }
    section#character ul li:nth-child(4) {
      background-color: #FFF4C6; }
      section#character ul li:nth-child(4) div.character-l {
        width: 40%;
        margin: auto; }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(4) div.character-l {
            width: 100%;
            text-align: center; } }
      section#character ul li:nth-child(4) div.character-r {
        width: 60%;
        padding: 2rem 2rem 2rem 0rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(4) div.character-r {
            padding: 1.5rem 1.5rem 1.5rem 0rem; } }
        @media screen and (max-width: 991px) {
          section#character ul li:nth-child(4) div.character-r {
            width: 100%;
            padding: 3rem 1.5rem 1.5rem 1.5rem; } }
        section#character ul li:nth-child(4) div.character-r h3 {
          color: #A87146; }
        section#character ul li:nth-child(4) div.character-r .h3-mini {
          color: #A87146; }
    section#character ul li:nth-child(5) {
      background-color: #FCEBEB;
      width: 32%; }
      @media screen and (max-width: 767px) {
        section#character ul li:nth-child(5) {
          width: 49%; } }
      @media screen and (max-width: 575px) {
        section#character ul li:nth-child(5) {
          width: 100%; } }
      section#character ul li:nth-child(5) div.character-l {
        width: 100%;
        text-align: center; }
      section#character ul li:nth-child(5) div.character-r {
        width: 100%;
        padding: 2rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(5) div.character-r {
            padding: 1.5rem; } }
        section#character ul li:nth-child(5) div.character-r h3 {
          color: #785060; }
          section#character ul li:nth-child(5) div.character-r h3 span {
            color: #333333; }
    section#character ul li:nth-child(6) {
      background-color: #FCEFDA;
      width: 32%; }
      @media screen and (max-width: 767px) {
        section#character ul li:nth-child(6) {
          width: 49%; } }
      @media screen and (max-width: 575px) {
        section#character ul li:nth-child(6) {
          width: 100%; } }
      section#character ul li:nth-child(6) div.character-l {
        width: 100%;
        text-align: center; }
      section#character ul li:nth-child(6) div.character-r {
        width: 100%;
        padding: 2rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(6) div.character-r {
            padding: 1.5rem; } }
        section#character ul li:nth-child(6) div.character-r h3 {
          color: #9F6323; }
          section#character ul li:nth-child(6) div.character-r h3 span {
            color: #333333; }
    section#character ul li:nth-child(7) {
      background-color: #E8F5FD;
      width: 32%; }
      @media screen and (max-width: 767px) {
        section#character ul li:nth-child(7) {
          width: 49%; } }
      @media screen and (max-width: 575px) {
        section#character ul li:nth-child(7) {
          width: 100%; } }
      section#character ul li:nth-child(7) div.character-l {
        width: 100%;
        text-align: center; }
      section#character ul li:nth-child(7) div.character-r {
        width: 100%;
        padding: 2rem; }
        @media screen and (max-width: 1199px) {
          section#character ul li:nth-child(7) div.character-r {
            padding: 1.5rem; } }
        section#character ul li:nth-child(7) div.character-r h3 {
          color: #61659E; }
          section#character ul li:nth-child(7) div.character-r h3 span {
            color: #333333; }
  section#character ul + p {
    text-align: center;
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #808080;
    margin-bottom: 12rem; }
    @media screen and (max-width: 991px) {
      section#character ul + p {
        margin-bottom: 7rem; } }

footer {
  background-image: url("../img/tour-back.svg");
  background-size: cover;
  padding: 4rem; }
  footer p {
    line-height: 1.3;
    text-align: center; }
    footer p .green-font {
      font-size: 16px;
      font-size: 1.6rem;
      font-weight: bold;
      color: #289C4C; }
    footer p .black-font {
      font-size: 24px;
      font-size: 2.4rem;
      font-weight: bold;
      color: #231815;
      display: block;
      margin-bottom: 1rem; }