.main {
  position: relative; }
  .main .base {
    position: relative;
    z-index: 0; }
  .main .main-ttl {
    width: 60%;
    height: auto;
    position: absolute;
    max-width: 800px;
    left: 50%;
    bottom: 70%;
    transform: translateX(-50%);
    z-index: 1; }

.logo01 {
  text-align: center;
  margin-bottom: 5rem; }
  .logo01 img {
    width: 80%;
    height: auto;
    max-width: 300px; }

.midashi {
  text-align: center;
  margin-bottom: 3rem; }

.lead {
  text-align: center; }

.c-ttl {
  margin-bottom: 3rem;
  text-align: center; }
  .c-ttl img {
    max-width: 440px;
    width: 90%;
    height: auto; }
  @media screen and (max-width: 600px) {
    .c-ttl {
      border-top: 1px solid #ccc;
      padding-top: 8rem; } }

.note.c1 {
  text-align: center;
  margin-top: 2rem; }

.concept-list {
  max-width: 1200px;
  width: 90%;
  margin: auto; }
  .concept-list ul {
    font-size: 0; }
    .concept-list ul li {
      display: inline-block;
      vertical-align: top;
      margin-bottom: 4rem;
      width: 31.6%;
      margin-right: 2.6%; }
      .concept-list ul li:last-child {
        margin-right: 0; }
      .concept-list ul li img {
        width: 100%;
        height: auto; }
      @media screen and (max-width: 600px) {
        .concept-list ul li {
          width: 100%;
          margin-right: 0%; } }
  .concept-list .midashi {
    margin-top: 5rem;
    color: #004ea2; }

.c-columun {
  margin-top: 5rem;
  padding: 4rem 10rem;
  background: #eee; }
  @media screen and (max-width: 800px) {
    .c-columun {
      padding: 4rem 4rem; } }
  .c-columun .midashi {
    color: #004ea2; }
  .c-columun .lead {
    margin-top: 2.5rem; }
  .c-columun .listBox {
    font-size: 0; }
    .c-columun .listBox li {
      display: inline-block;
      margin-bottom: 1rem; }
      .c-columun .listBox li img {
        width: 100%;
        height: auto; }
    .c-columun .listBox.list02 li {
      width: 49.375%;
      margin-right: 1.25%; }
      .c-columun .listBox.list02 li:nth-child(2n) {
        margin-right: 0; }
      @media screen and (max-width: 600px) {
        .c-columun .listBox.list02 li {
          width: 100%;
          margin-right: 0%; } }
    .c-columun .listBox.list03 {
      margin-bottom: 2rem; }
      .c-columun .listBox.list03 li {
        width: 32.5%;
        margin-right: 1.25%;
        margin-bottom: 3rem; }
        .c-columun .listBox.list03 li:last-child {
          margin-right: 0; }
        @media screen and (max-width: 600px) {
          .c-columun .listBox.list03 li {
            width: 100%;
            margin-right: 0%; } }

.merit-li {
  padding: 1.5rem 0; }
  .merit-li li {
    display: block;
    text-align: center;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    font-size: 2.2rem;
    line-height: 140%;
    font-weight: bold;
    color: #fff;
    background: #0077bf;
    margin-top: 1.5rem; }

    .more-btn {
      width: 90%;
      max-width: 33rem;
      text-align: center;
      margin: 4rem auto 4rem; }
      .more-btn a {
        background-color: #004ea2;
        border-radius: 4.3rem;
        padding: 2rem 0;
        border: 1px solid #004ea2;
        transition: 0.3s ease 0s background;
        display: block;
        text-decoration: none; }
        .more-btn a span {
          font-size: 20px;
          font-weight: bold;
          color: #FFFFFF;
          vertical-align: middle;
          line-height: 1;
          transition: 0.3s ease 0s color; }
          .more-btn a p{
            font-size: 16px;
            color: #FFFFFF;
            padding-top: 10px;
            vertical-align: middle;
            line-height: 1;
            transition: 0.3s ease 0s color; } 
          
          @media screen and (max-width: 600px) {
            .more-btn a span {
              font-size: 16px; } }
        .more-btn:hover a {
          background-color: #fff;
          border: 1px solid #004ea2; }
          .more-btn:hover a span {
            color: #004ea2; }
            .more-btn:hover a p {
              color: #004ea2; }