@charset "utf-8";


#contents{
  padding: 60px 0 120px;
  .mb{
    margin-bottom: 120px !important;
  }
  h2{
    font-size: 2.5rem;
    line-height: 120%;
    text-align: left;
    padding: 0 0 15px;
    margin: 0 auto 40px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: #00b800;
    &.v2{
      text-align: center;
    }
  }
  p{
    font-size: 1.6rem;
    line-height: 220%;
    text-align: left;
    strong{
      color: #00b800;
    }
    &.img{
      line-height: 0;
      text-align: center;
      margin: 0 auto 40px;
    }
    &.txt{
      text-align: center;
      margin: 0 auto 40px;
      &.v2{
        margin-bottom: 0;
      }
    }
    &.btn{
      a{
        cursor: pointer;
      }
    }
  }
  .linkss{
    display: block;
    line-height: 0;
    border-bottom: 1px solid #999;
    margin: 0 auto 80px;
    >ul{
      display: block;
      letter-spacing: -0.4em;
      text-align: center;
      line-height: 0;
      >li{
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
        width: 260px;
        margin: 0 6px 0 0;
        font-size: 1.6rem;
        color: #333;
        background: #fff;
        border: 1px solid #333;
        border-bottom: none;
        text-align: center;
        cursor: pointer;
        position: relative;
        transition: 0.3s ease-in-out;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        &:last-child{
          margin-right: 0;
        }
        &:hover,
        &.active{
          color: #fff;
          background: #333;
          &::after{
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
          }
          >a{
            text-decoration: none;
            color: #fff;
          }
        }
        &::after{
          position: absolute;
          top: 50%;
          right: 20px;
          display: block;
          /*content: '';*/
          width: 8px;
          height: 8px;
          margin-top: -4px;
          border-top: 1px solid #333;
          border-right: 1px solid #333;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
        }
        >a{
          display: table;
          width: 100%;
          min-height: 65px;
          color: #333;
          transition: 0.3s ease-in-out;
          >span{
            display: table-cell;
            line-height: 140%;
            vertical-align: middle;
          }
        }
      }
    }
  }
  ul.icn{
    display: block;
    letter-spacing: -0.4em;
    text-align: center;
    line-height: 0;
    margin: 0 auto 120px;
    li{
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      width: 270px;
      margin: 0 30px 0 0;
      &:last-child{
        margin-right: 0;
      }
      span{
        display: block;
        font-size: 1.6rem;
        line-height: 200%;
        text-align: center;
        strong{
          color: #00b800;
        }
        small{
          font-size: 1.2rem;
        }
        i{
          font-style: normal;
          font-size: 2.4rem;
        }
        &.img{
          display: inline-block;
          line-height: 0;
          margin: 0 auto 20px;
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
          border-radius: 100%;
        }
        &.t{
          font-size: 2rem;
          font-weight: bold;
          line-height: 180%;
          color: #666;
          margin: 0 auto 20px;
        }
      }
      &:nth-child(3),
      &:nth-child(4){
        span{
          &.img{
            margin-bottom: 40px;
          }
          &.t{
            padding-bottom: 0.7em;
          }
        }
      }
    }
  }
  .page-link{
    display: block;
    letter-spacing: -0.4em;
    text-align: left;
    line-height: 0;
    margin: 0 auto 120px;
    p{
      letter-spacing: normal;
      font-size: 1.6rem;
      line-height: 160%;
      text-align: left;
      padding: 60px 0 0;
    }
    .col{
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      width: 373px;
      margin: 0 40px 0 0;
      background: #f8fff8;
      border: 2px solid #00b800;
      padding: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      &:nth-child(3n){
        margin-right: 0;
      }
      p{
        text-align: center;
        margin: 0 auto 20px;
        padding: 0;
        color: #00b800;
        font-weight: bold;
      }
      >a{
        display: block;
        letter-spacing: normal;
        vertical-align: top;
        margin: 0 20px -50px;
        font-size: 1.4rem;
        color: #333;
        background: #fff;
        border: 1px solid #333;
        text-align: center;
        cursor: pointer;
        position: relative;
        border-radius: 10px;
        transition: 0.3s ease-in-out;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        &::after{
          position: absolute;
          top: 50%;
          right: 20px;
          display: block;
          content: '';
          width: 8px;
          height: 8px;
          margin-top: -6px;
          border-top: 1px solid #333;
          border-right: 1px solid #333;
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
        }
        >span{
          display: table;
          width: 100%;
          min-height: 55px;
          >span{
            display: table-cell;
            line-height: 140%;
            vertical-align: middle;
          }
        }
        &:hover{
          color: #fff;
          background: #333;
          text-decoration: none;
          &::after{
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
          }
        }
      }
    }
  }
  .in{
    padding: 0 0 80px;
    &:last-child{
      padding-bottom: 0;
    }
    p.tx{
      margin: 0 auto 35px;
      padding: 0;
      font-size: 1.6rem;
      &.v2{
        margin-bottom: 10px;
      }
      strong{
        font-size: 2rem;
        color: #00b800;
      }
    }
  }
  ul.flow{
    display: block;
    letter-spacing: -0.4em;
    text-align: left;
    line-height: 0;
    margin: 0 auto;
    padding: 0 0 46px;
    >li{
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
      width: 270px;
      min-height: 400px;
      border: 1px solid #ccc;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0 40px 50px 0;
      position: relative;
      &:nth-child(4n){
        margin-right: 0;
      }
      &::after{
        position: absolute;
        top: 50%;
        right: -25px;
        display: block;
        content: '';
        width: 10px;
        height: 10px;
        margin-top: -5px;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
        transform: rotate(45deg);
      }
      &:last-child{
        &::after{
          content: none;
        }
      }
      p{
        &.img{
          line-height: 0;
          margin: 0 auto 20px;
          text-align: center;
        }
        &.tx{
          line-height: 160%;
          padding: 0 20px;
          margin: 0 auto;
          strong{
            color: #3a7775;
            font-size: 100%;
          }
          a{
            color: #00b800;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

@media screen and (min-width:768px){

}

@media screen and (max-width:767px){
	#contents{
    padding: 40px 0 60px;
    .page-link{
      >a{
        width: 48%;
        margin: 0 2% 8px 0;
        font-size: 1.2rem;
        &:nth-child(2n){
          margin-right: 0;
        }
        &::after{
          right: 15px;
          width: 4px;
          height: 4px;
          margin-top: -2px;
        }
        >span{
          min-height: 50px;
        }
      }
	  .col{
          margin-bottom: 15px;
		>a {
			margin: 0 20px 0;
		}
	  }
    }
    .linkss{
      width: 100%;
      overflow: auto;
      margin: 0 auto 60px;
      >ul{
        >li{
          width: 110px;
          font-size: 1.4rem;
          margin: 0 3px 0 0;
          &::after{
            right: 15px;
            width: 4px;
            height: 4px;
            margin-top: -2px;
          }
          >a{
            min-height: 55px;
            >span{
              line-height: 120%;
            }
          }
        }
        &.v2{
          >li{
            width: 87px;
          }
        }
      }
    }
    h2{
      font-size: 1.8rem;
      padding: 0 0 15px;
      text-align: left;
      &.v2{
        font-size: 1.7rem;
        text-align: left;
      }
    }
    p.txt{
      font-size: 1.6rem;
      text-align: left;
    }
    .in{
      p.tx{
        margin: 0 auto 20px;
        font-size: 1.4rem;
        strong{
          font-size: 1.8rem;
        }
      }
    }
    ul.flow{
      >li{
        width: 100%;
        margin: 0 auto 40px;
        padding-bottom: 20px;
        min-height: 1px;
        &:last-child{
          margin-bottom: 0;
        }
        &::after{
          top: initial;
          right: 50%;
          bottom: -25px;
          transform: rotate(135deg);
        }
        p{
          &.tx{
            font-size: 1.4rem;
            strong{
              font-size: 100%;
            }
          }
        }
      }
    }
    ul.icn{
        margin-bottom: 0;
        li{
          margin: 0 0 50px;
          padding: 0 0 30px;
          border-bottom: 1px solid #CCC;
            > .img {
                width: 60%;
            }
        }
      }
  }
}