:root {
  --sans: "NotoSansJP", sans-serif;
  --serif: "NotoSerifJP", serif;
  --en: "Oswald", sans-serif; }

br.mdl {
  display: none; }
  @media screen and (max-width: 1200px) {
    br.mdl {
      display: block; } }

#header.index .logo {
  max-width: 100px;
  top: 35px;
  left: 30px; }
@media screen and (max-width: 768px) {
  #header.index .logo {
    max-width: 80px;
    top: 10px;
    left: 20px; } }

#footer.index {
  background: none; }
  #footer.index .copyright {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: #004d00;
    background: none;
    padding: 0;
    position: fixed;
    left: 20px;
    bottom: 20px; }
  @media screen and (max-width: 1023px) {
    #footer.index .copyright {
      padding: 10px 0;
      position: static; } }

h1 {
  font-size: 24rem;
  font-family: var(--en);
  line-height: 0.9;
  color: #39ba92;
  opacity: 0.15;
  position: fixed;
  top: 10px;
  left: 160px;
  z-index: -10; }
  @media screen and (max-width: 1023px) {
    h1 {
      left: 10px; } }
  @media screen and (max-width: 768px) {
    h1 {
      font-size: 27vw;
      margin-top: 112px; } }

.index-cont {
  max-width: 980px;
  width: 75%;
  padding-top: 40px;
  padding-bottom: 60px;
  margin-left: auto; }
  @media screen and (max-width: 1023px) {
    .index-cont {
      max-width: 100%;
      width: 100%; } }
  @media screen and (max-width: 768px) {
    .index-cont {
      margin-top: 100px; } }
  .index-cont .link-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .index-cont .link-wrap li {
      width: 50%; }
      .index-cont .link-wrap li a {
        font-size: 2rem;
        font-weight: 800;
        text-align: center;
        color: #000;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: 0.3s; }
        .index-cont .link-wrap li a:before, .index-cont .link-wrap li a:after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0; }
        .index-cont .link-wrap li a:before {
          background-color: #39ba92;
          opacity: 0.8;
          z-index: -2; }
        .index-cont .link-wrap li a:after {
          background: #004d00;
          transform: scale(0, 1);
          transform-origin: right top;
          z-index: -1;
          transition: transform 0.3s; }
        .index-cont .link-wrap li a:hover {
          color: #fff;
          opacity: 1; }
          .index-cont .link-wrap li a:hover:after {
            transform-origin: left top;
            transform: scale(1, 1); }
    @media screen and (max-width: 1023px) {
      .index-cont .link-wrap li a {
        font-size: 1.6rem;
        height: 95px; } }
    @media screen and (max-width: 768px) {
      .index-cont .link-wrap li a {
        font-size: 1.2rem; } }
  .index-cont .index-top {
    width: 100%; }
    .index-cont .index-top li {
      width: 100%; }
      .index-cont .index-top li a {
        font-size: 3.6rem; }
    @media screen and (max-width: 1023px) {
      .index-cont .index-top li a {
        font-size: 2rem; } }
  .index-cont .index-center,
  .index-cont .index-bottom {
    margin-top: 20px;
    display: flex; }
    @media screen and (max-width: 1023px) {
      .index-cont .index-center,
      .index-cont .index-bottom {
        margin-top: 50px;
        flex-direction: column; } }
    .index-cont .index-center .left,
    .index-cont .index-bottom .left {
      width: 210px;
      padding: 25px 20px;
      margin-right: 20px;
      background-color: rgba(196, 234, 222, 0.8);
      position: relative; }
      .index-cont .index-center .left .head-wrap,
      .index-cont .index-bottom .left .head-wrap {
        position: sticky;
        top: 10px;
        left: 0; }
        .index-cont .index-center .left .head-wrap .head,
        .index-cont .index-bottom .left .head-wrap .head {
          font-size: 2rem;
          color: #004d00; }
        .index-cont .index-center .left .head-wrap .en,
        .index-cont .index-bottom .left .head-wrap .en {
          font-size: 1.4rem;
          font-weight: 300;
          font-family: var(--en);
          color: #004d00; }
      @media screen and (max-width: 1023px) {
        .index-cont .index-center .left,
        .index-cont .index-bottom .left {
          width: 100%;
          border: 2px solid #69c8a8;
          border-bottom: none; } }
    .index-cont .index-center .right,
    .index-cont .index-bottom .right {
      max-width: calc(100% - 250px); 
      width: 100%;}
      .index-cont .index-center .right .link-wrap li:nth-of-type(odd),
      .index-cont .index-bottom .right .link-wrap li:nth-of-type(odd) {
        padding-right: 10px; }
      .index-cont .index-center .right .link-wrap li:nth-of-type(even),
      .index-cont .index-bottom .right .link-wrap li:nth-of-type(even) {
        padding-left: 10px; }
      .index-cont .index-center .right .link-wrap li:nth-of-type(n + 3),
      .index-cont .index-bottom .right .link-wrap li:nth-of-type(n + 3) {
        margin-top: 20px; }
      @media screen and (max-width: 1023px) {
        .index-cont .index-center .right,
        .index-cont .index-bottom .right {
          max-width: 100%;
          width: 100%; }
          .index-cont .index-center .right .link-wrap,
          .index-cont .index-bottom .right .link-wrap {
            padding: 20px;
            border: 2px solid #69c8a8;
            border-top: none; } }

/*# sourceMappingURL=gi-index.css.map */