@charset "UTF-8";
/**********************************
body
***********************************/
.white {
  background-color: #f6f6f6;
}

.bg-white {
  opacity: 0;
  pointer-events: none;
}

/**********************************
news
***********************************/
.news {
  padding: 3% 0;
}
.news .news-box {
  background-color: #deeeec;
  position: relative;
  width: 70%;
  margin: 0 auto;
  z-index: 1;
  border-radius: 2.5em;
  padding: 2% 0;
}
.news .news-box .text {
  position: relative;
}
.news .news-box .text .text-shadow {
  position: absolute;
  font-size: 2.5vw;
  bottom: -10%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: #515151;
  z-index: 1;
  margin: 0;
  opacity: 16%;
  font-family: "Hiragino Kaku Gothic Std", sans-serif !important;
}
.news .news-box h3 {
  position: relative;
  text-align: center;
  opacity: 1 !important;
  color: #d2000f;
  font-size: 1.5vw;
  font-weight: 800;
  z-index: 2;
}
.news .news-box ul {
  position: relative;
  width: 80%;
  margin: 0 auto;
  list-style: none;
  height: 150px;
  overflow-y: scroll;
}
.news .news-box ul::-webkit-scrollbar {
  display: none;
}
.news .news-box ul li {
  background-image: linear-gradient(to right, #000 15px, transparent 15px);
  background-size: 18px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-top: 2%;
  padding-bottom: 0.5%;
  padding-left: 10%;
  font-size: 1.3vw;
}
.news .news-box ul li a {
  color: black;
  line-height: 150%;
  font-family: "Hiragino Kaku Gothic Pro";
}
.news .news-box ul li a span {
  margin-right: 10%;
}
.news .news-box .news-img {
  position: absolute;
  width: 7%;
  top: 15%;
  left: 10%;
}
.news .news-box .pen-img {
  position: absolute;
  width: 5%;
  bottom: 7%;
  right: 3%;
}
.news .news-box .circle-img {
  position: absolute;
  width: 8%;
  top: 0;
  left: -15%;
}

/**********************************
about
***********************************/
.about {
  position: relative;
}
.about .about-title {
  color: white;
  position: absolute;
  top: 8%;
  left: 8%;
}
.about .about-title h4 {
  font-size: 4vw;
}
.about .about-title p {
  font-size: 1.4vw;
}
.about .circle-img1 {
  width: 5%;
  position: absolute;
  top: 50%;
  left: 5%;
}
.about .circle-img2 {
  width: 17%;
  position: absolute;
  top: 7%;
  right: 12%;
}
.about .more {
  position: absolute;
  bottom: 10%;
  right: 5%;
  padding: 1% 6%;
  font-size: 1.5vw;
  background-color: #d2000f;
  box-shadow: -0.5em -0.5em #515151;
}
.about .more:hover {
  box-shadow: none;
  transform: translate(-0.5em, -0.5em);
  filter: brightness(110%);
}

.works {
  background-color: #bf2e2e;
  margin-top: 3%;
}

.works-box {
  display: flex;
  width: 100%;
  padding: 5% 5% 2% 5%;
}
.works-box .work1 {
  font-size: 7vw;
  color: white;
}
.works-box .work1 h4 {
  text-shadow: -0.15em -0.1em #515151;
}
.works-box .work2 {
  width: 7%;
  margin: 0 auto;
}

.work-text-box {
  margin-left: 5%;
  color: white;
}
.work-text-box h5 {
  font-size: 1.5vw;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
  padding-bottom: 0.5%;
}
.work-text-box p {
  font-size: 1.3vw;
}

.works-box2 {
  display: flex;
  align-items: center;
  width: 92%;
  margin: 0 auto;
  padding-top: 3%;
  padding-bottom: 7%;
}
.works-box2 .work {
  background-color: #5e9e99;
  margin: 1%;
  text-align: center;
  padding: 3%;
  width: 30%;
  box-shadow: -0.3em -0.3em white;
  margin: 0 auto;
}
.works-box2 .work:hover {
  box-shadow: none;
  transform: translate(-0.3em, -0.3em) !important;
  filter: brightness(110%);
}
.works-box2 .work h6 {
  font-size: 1.5vw;
  padding-bottom: 5%;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.works-box2 .work .work-img {
  display: block;
  width: 50%;
  margin: 0 auto;
}
.works-box2 .work:nth-child(1) .work-img {
  width: 37%;
}
.works-box2 .work:nth-child(2) .work-img {
  padding-top: 7%;
  padding-bottom: 2%;
}
.works-box2 .work:nth-child(3) .work-img {
  padding-top: 0.5%;
  padding-bottom: 0%;
  width: 49%;
}

.history h5 {
  font-size: 8.5vw;
  color: #d2000f;
  padding-top: 7%;
  padding-left: 5%;
  padding-bottom: 1%;
  text-shadow: -0.15em -0.08em #515151;
}
.history a {
  text-align: center;
  width: 20%;
  padding: 1.5% 6%;
  font-size: 1.5vw;
  background-color: #d2000f;
  box-shadow: -0.5em -0.5em #515151;
  margin: 2% auto;
}
.history a:hover {
  box-shadow: none;
  transform: translate(-0.5em, -0.5em);
  filter: brightness(110%);
}

.gallery-box {
  width: 92%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.gallery-box .img-box {
  padding-bottom: 0.8%;
}
.gallery-box .b1 {
  width: 55%;
}
.gallery-box .b2 {
  width: 22.5%;
  padding-left: 1%;
}
.gallery-box .b3 {
  width: 22.5%;
  padding-left: 1%;
}
.gallery-box .b3 .history-img:nth-child(1) {
  margin-bottom: 3.5%;
}
.gallery-box .b4 {
  width: 22.4%;
  padding-right: 1%;
}
.gallery-box .b4 .history-img:nth-child(1) {
  margin-bottom: 4.5%;
}
.gallery-box .b5 {
  width: 22.4%;
  padding-right: 1%;
}
.gallery-box .b6 {
  width: 55%;
}
.gallery-box .circle {
  position: absolute;
  width: 5%;
  z-index: 20;
}
.gallery-box .circle-img1 {
  width: 7%;
  top: 15%;
  left: -2%;
}
.gallery-box .circle-img2 {
  width: 4%;
  top: 26%;
  left: -2%;
}
.gallery-box .circle-img3 {
  width: 3%;
  bottom: -2.5%;
  left: 10%;
}
.gallery-box .circle-img4 {
  width: 3.5%;
  bottom: 25%;
  right: -1.5%;
}
.gallery-box .circle-img5 {
  width: 8%;
  bottom: 4%;
  right: -4%;
}
.gallery-box .circle-img6 {
  width: 6%;
  bottom: -5%;
  right: 14%;
}

.flow {
  margin-top: 10%;
}
.flow h5 {
  font-size: 2.5vw;
  text-align: center;
  color: #d2000f;
  margin-bottom: 2%;
  text-shadow: -0.15em -0.08em #515151;
}

.flow-box {
  width: 92%;
  margin: 0 auto;
  background-color: #5e9e99;
  padding: 7% 6%;
  border-radius: 3em;
  position: relative;
  padding-top: 10%;
  /*
  .fl {
      position: relative;
  }*/
}
.flow-box .fl-content {
  display: flex;
  align-items: center;
  margin-top: 5%;
  margin: 0 auto;
  margin-bottom: 5%;
}
.flow-box .fl-img {
  width: 30%;
}
.flow-box .fl-img img {
  width: 50%;
  margin: 0 auto;
}
.flow-box .fl-content:nth-child(1) .fl-img img {
  width: 35%;
}
.flow-box .fl-text {
  color: white;
  width: 70%;
  left: 4%;
}
.flow-box .fl-text h6 {
  font-size: 2vw;
  padding-bottom: 3%;
}
.flow-box .fl-text p {
  font-size: 1.3vw;
  font-family: "Hiragino Kaku Gothic Pro";
}
.flow-box .text-right {
  right: 4%;
}
.flow-box .text-right {
  top: 50%;
  left: 3%;
  left: auto;
}
.flow-box .fl:nth-child(1) .fl-text {
  top: 20%;
}
.flow-box .fl:nth-child(2) {
  margin-top: -16%;
}
.flow-box .fl:nth-child(2) .fl-text {
  top: 32%;
}
.flow-box .fl:nth-child(3) {
  margin-top: -12.5%;
}
.flow-box .fl:nth-child(3) .fl-text {
  top: 32%;
}
.flow-box .fl:nth-child(4) {
  margin-top: -11%;
}
.flow-box .fl:nth-child(4) .fl-text {
  top: 26%;
}
.flow-box .fl:nth-child(5) {
  margin-top: -11.5%;
}
.flow-box .fl:nth-child(5) .fl-text {
  top: 28%;
}
.flow-box .fl:nth-child(1) {
  z-index: 9;
}
.flow-box .fl:nth-child(2) {
  z-index: 8;
}
.flow-box .fl:nth-child(3) {
  z-index: 7;
}
.flow-box .fl:nth-child(4) {
  z-index: 6;
}
.flow-box .fl:nth-child(5) {
  z-index: 5;
}

.screw {
  position: absolute;
  width: 4%;
}

.screw:nth-of-type(1) {
  top: 2%;
  left: 2%;
}

.screw:nth-of-type(2) {
  top: 2%;
  right: 2%;
}

.screw:nth-of-type(3) {
  bottom: 2%;
  left: 2%;
}

.screw:nth-of-type(4) {
  bottom: 2%;
  right: 2%;
}

.access {
  background: linear-gradient(0deg, #f6f6f6 1%, #d2000f 20%, #f6f6f6 100%);
}
.access h5 {
  text-align: center;
  color: white;
  padding-top: 15%;
  font-size: 2vw;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.fo-box {
  width: 80%;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  margin-bottom: -15%;
  margin-top: 3%;
}
.fo-box .fo-box1 {
  flex: 50%;
}
.fo-box .fo-box1 .adrress {
  font-size: 2vw;
  text-align: left;
  margin-top: 5%;
  margin-bottom: 5%;
  color: white;
  font-family: "kozuka-gothic-pr6n", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.fo-box .fo-box2 {
  flex: 50%;
}
.fo-box .fo-box2 .map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  /* 比率を4:3に固定 */
}
.fo-box .fo-box2 .map iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 80%;
  transform: translate(-50%, -50%);
}

.copyright {
  background-color: #515151;
  margin-top: 2%;
}
.copyright p {
  color: white;
  text-align: center;
  padding: 1% 0;
  font-size: 1.3vw;
}

.insta-box {
  display: flex !important;
  width: 40%;
  z-index: 10;
  position: relative;
  margin-left: auto;
  margin-right: 18%;
}
.insta-box .insta1 img {
  margin-left: auto;
  margin-right: 5%;
}
.insta-box .insta2 img {
  width: 70%;
  margin: -5% auto 0 auto;
}

@media (max-width: 700px) {
  .news {
    padding: 10% 0;
  }
  .news .news-box {
    width: 85%;
    padding: 5% 0;
  }
  .news .news-box h3 {
    font-size: 17px;
  }
  .news .news-box .text .text-shadow {
    font-size: 30px;
  }
  .news .news-box ul {
    width: 90%;
    height: 160px;
  }
  .news .news-box ul li {
    font-size: 15px;
  }
  .news .news-box ul li span {
    font-size: 13px;
  }
  .news .news-box .news-img {
    width: 17%;
    top: 0%;
    left: -3%;
  }
  .news .news-box .circle-img {
    top: 55%;
    left: -3%;
  }
  .news .news-box .pen-img {
    bottom: 7%;
    right: 0%;
    width: 10%;
  }
  .about {
    width: 100%;
    overflow-x: hidden;
  }
  .about .about-img {
    width: 170%;
    margin-left: -20%;
  }
  .about .circle-img1 {
    top: 70%;
  }
  .about .about-title {
    top: 22%;
    left: 12%;
  }
  .about .about-title h4 {
    font-size: 20px;
  }
  .about .about-title p {
    font-size: 14px;
    line-height: 150%;
  }
  .about .more {
    font-size: 15px;
    right: 10%;
    padding: 1% 8%;
  }
  .works {
    margin-top: 10%;
  }
  .works-box {
    padding-top: 7%;
    padding-bottom: 7%;
  }
  .works-box2 {
    display: block;
    /*
    .work:nth-child(even) {
        margin-right: 10%;
    }

    .work:nth-child(odd) {
        margin-left: 10%;
    }*/
  }
  .works-box2 .work {
    width: 70%;
    margin-top: 7%;
    margin-bottom: 7%;
  }
  .works-box2 .work h6 {
    font-size: 15px;
  }
  .img-box {
    margin-bottom: 2%;
  }
  .work-text-box h5 {
    font-size: 15px;
  }
  .work-text-box p {
    width: 90%;
    font-size: 13px;
  }
  .gallery-box .b1 {
    width: 100%;
  }
  .gallery-box .b2 {
    width: 50%;
    padding-left: 0;
    padding-right: 1%;
  }
  .gallery-box .b3 {
    width: 50%;
    padding-left: 1.5%;
  }
  .gallery-box .b4 {
    width: 50%;
    padding-right: 1.5%;
  }
  .gallery-box .b5 {
    width: 50%;
    padding-left: 1.5%;
    padding-right: 0;
  }
  .gallery-box .b6 {
    width: 100%;
  }
  .gallery-box .circle-img1 {
    width: 15%;
    top: 15%;
    left: -2%;
  }
  .gallery-box .circle-img2 {
    width: 7%;
    top: 32%;
    left: -2%;
  }
  .gallery-box .circle-img3 {
    width: 5%;
    bottom: -2.5%;
    left: 10%;
  }
  .gallery-box .circle-img4 {
    width: 5.5%;
    bottom: 35%;
    right: -1.5%;
  }
  .gallery-box .circle-img5 {
    width: 14%;
    bottom: 17%;
    right: -4%;
  }
  .gallery-box .circle-img6 {
    width: 10%;
    bottom: -5%;
    right: 14%;
  }
  .gallery-box .b3 .history-img:nth-child(1) {
    margin-bottom: 5%;
  }
  .history a {
    font-size: 15px;
    width: 30%;
    margin-top: 5%;
  }
  .flow {
    margin-top: 15%;
  }
  .flow h5 {
    font-size: 15px;
  }
  .flow-box {
    border-radius: 15px;
  }
  .flow-box .fl-content {
    display: block;
    margin-bottom: 10%;
  }
  .flow-box .fl-img {
    width: 100%;
  }
  .flow-box .fl-img img {
    width: 30%;
  }
  .flow-box .fl-text {
    width: 100%;
  }
  .flow-box .fl-text h6 {
    text-align: center;
    font-size: 17px;
  }
  .flow-box .fl-text p {
    width: 80%;
    margin: 0 auto;
    font-size: 14px;
  }
  .flow-box .fl-content:nth-child(1) .fl-img img {
    width: 20%;
  }
  .screw {
    position: absolute;
    width: 5%;
  }
  .screw:nth-of-type(1) {
    top: 1%;
  }
  .screw:nth-of-type(2) {
    top: 1%;
  }
  .screw:nth-of-type(3) {
    bottom: 1%;
  }
  .screw:nth-of-type(4) {
    bottom: 1%;
  }
  .access {
    margin-top: -10%;
  }
  .access h5 {
    font-size: 15px;
    padding-top: 25%;
  }
  .access .fo-box {
    display: block;
  }
  .fo-box .fo-box1 .adrress {
    font-size: 15px;
  }
  .fo-box .fo-box2 .map iframe {
    width: 100%;
  }
  .insta-box {
    width: 150px;
    margin-right: 0;
  }
}
@media (max-width: 700px) {
  .copyright p {
    font-size: 13px;
  }
}/*# sourceMappingURL=home.css.map */