/* CSS Document */
html, body, header, footer, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, p, div, a, table, tr, td, th {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6, body {
  line-height: .5; }

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

ul {
  list-style: none; }

a {
  text-decoration: none; }

img {
  width: 100%; }

.container-fluid {
  padding: 0; }

.sp {
  display: block; }
  @media screen and (min-width: 768px) {
    .sp {
      display: none; } }

.pc {
  display: none; }
  @media screen and (min-width: 768px) {
    .pc {
      display: block; } }

p {
  line-height: 1; }

header {
  padding-bottom: 4vw;
  background: #000; }
  header .btn01-sp, header .btn02-sp {
    width: 11vw;
    height: auto; }
  header .absmenu {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 3vw; }
  header h1 {
    line-height: 0.5;
    width: 50%;
    padding-right: 10%;
    margin-left: 10px; }
    header h1 img {
      width: 40vw; }
      @media screen and (min-width: 768px) {
        header h1 img {
          width: auto; } }
    @media screen and (min-width: 768px) {
      header h1 {
        width: auto;
        margin-left: 0; } }
  header .topcopy img {
    width: 100%; }
  header .middlecopy img {
    width: 100%; }
  header .mainslick {
    margin-top: 2vw; }
    @media screen and (min-width: 768px) {
      header .mainslick {
        margin-top: 50px; } }
    header .mainslick h2 {
      text-align: center;
      padding: 20px; }
      @media screen and (min-width: 768px) {
        header .mainslick h2 {
          padding: 0; } }
    header .mainslick .slick {
      margin-top: 4vw;
      padding: 0 2vw; }
      header .mainslick .slick .slickarea {
        margin: 0 2vw;
        background: url("../images/main-slick-bg.svg") repeat-y center center;
        background-size: cover; }
        header .mainslick .slick .slickarea a {
          color: #000; }
          header .mainslick .slick .slickarea a:hover {
            text-decoration: none;
            opacity: 0.6; }
        header .mainslick .slick .slickarea p {
          padding: 20px;
          text-align: center; }
        header .mainslick .slick .slickarea img {
          width: 100%;
          max-width: auto; }
  header .endcopy {
    margin-top: 6vw; }

.reason {
  text-align: center;
  background: #c2ecf1; }
  .reason h2 {
    width: 100%; }
    .reason h2 img {
      width: 100%; }
  .reason h3 {
    padding-bottom: 2vw; }
  .reason .fifa {
    padding: 2vw 4vw; }
  .reason .g-frame {
    padding-bottom: 3vw; }

.sec02 {
  padding: 6vw 2vw;
  text-align: center;
  background: -moz-linear-gradient(top, #fffcfa, #fce3c9);
  background: -webkit-linear-gradient(top, #fffcfa, #fce3c9);
  background: linear-gradient(to bottom, #fffcfa, #fce3c9); }
  .sec02 h3 {
    padding-bottom: 2vw; }
  .sec02 h4 {
    padding-bottom: 2vw; }
  .sec02 p {
    padding-bottom: 5vw; }
  .sec02 .g-frame {
    padding-bottom: 5vw; }
  .sec02 .photo {
    padding: 0 4vw;
    padding-bottom: 5vw;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .sec02 .photo {
        padding: 0 10vw 3vw; } }

.sec03 {
  padding: 4vw 2vw;
  background: url("../images/sec03-bg.jpg") no-repeat bottom center;
  background-size: 100% auto; }
  @media screen and (min-width: 768px) {
    .sec03 {
      padding: 5vw 0px; } }
  .sec03 h2 {
    margin-bottom: 4vw; }
  .sec03 .ybg {
    background: #fff43c; }
    .sec03 .ybg img {
      width: auto !important;
      max-width: 100% !important; }
  .sec03 .row {
    margin: 0; }
  @media screen and (min-width: 768px) {
    .sec03 .work {
      padding: 0 10vw; } }
  .sec03 .work img {
    width: 100%;
    max-width: auto; }
  .sec03 .work .s3t {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center; }
    .sec03 .work .s3t img {
      width: auto;
      max-width: 100%; }
  .sec03 .work .g1 {
    background: #45b77c; }
  .sec03 .work .g2 {
    background: #1c8051; }

.sec04 {
  padding: 5vw 2vw; }
  @media screen and (min-width: 768px) {
    .sec04 {
      padding: 50px; } }
  .sec04 img {
    width: auto;
    max-width: 100%; }
  .sec04 .photo {
    width: 100%;
    text-align: left; }
    @media screen and (min-width: 768px) {
      .sec04 .photo {
        width: 50%;
        text-align: right; } }
  .sec04 .text {
    width: 100%;
    padding-left: 0;
    margin-top: 30px; }
    @media screen and (min-width: 768px) {
      .sec04 .text {
        margin-top: 0px;
        width: 50%;
        padding-left: 30px; } }
  .sec04 a {
    padding: 20px 40px;
    border: 4px solid #1c8051;
    display: inline-block;
    -webkit-transition: all 0.5s cubic-bezier(0.51, 0.11, 0.5, 0.94);
    transition: all 0.5s cubic-bezier(0.51, 0.11, 0.5, 0.94); }
    .sec04 a:hover {
      background: rgba(28, 128, 81, 0.3); }

.sec05 {
  padding: 4vw 2vw;
  background: url("../images/sec05-bg.jpg") no-repeat center center;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .sec05 {
      padding: 4vw; } }
  .sec05 h3 {
    text-align: center; }
  .sec05 img {
    padding-bottom: 3vw; }

footer {
  padding: 4vw 2vw 1vw;
  background: #1c8051 url("../images/footer-bg.svg") no-repeat right bottom;
  text-align: center;
  color: #fff; }
  @media screen and (min-width: 768px) {
    footer {
      padding: 3vw 4vw 1vw; } }
  footer img {
    width: auto;
    max-width: 100%; }
  footer a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
    margin: 30px 0;
    display: inline-block; }
    footer a:hover {
      color: #fff;
      opacity: .5; }

.wrap {
  width: 100%;
  margin: 0 auto; }

.gotop {
  position: fixed;
  bottom: 5vw;
  right: 3vw; }