@charset "UTF-8";
@media screen and (max-width: 767px) {
  .sp {
    display: none;
  }
}

/*----- スムーズスクロール -----*/
.back-top {
  position: fixed; /* 要素固定*/
  bottom: 15px; /*下からの位置*/
  right: 15px; /*右からの位置*/
  display: none; /*初めは非表示*/
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-color: #0169CC;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .back-top {
    width: 60px;
    height: 60px;
  }
}
.back-top a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  line-height: 80px;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .back-top a {
    line-height: 60px;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

img {
  width: 100%;
  max-width: 100%;
}

h2 {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #707070;
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 24px;
  }
}

section {
  padding: 100px 0;
}
section div {
  max-width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  section {
    padding: 50px 6vw;
  }
}

.botton {
  color: #09ADEA;
  border: 1px solid #09ADEA;
  background-color: #fff;
  padding: 10px;
  border-radius: 50px;
  width: 200px;
  text-align: center;
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin: 0 auto;
}
.botton:hover {
  border: 1px solid #fff;
  background-color: #09ADEA;
  transition: 0.5s;
  color: #fff;
}

body {
  max-width: 100%;
}

header {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 99;
  display: flex;
  max-width: 1100px;
}
@media screen and (max-width: 767px) {
  header {
    top: 15px;
    right: 15px;
    flex-direction: column;
    align-items: end;
  }
}
header .logo {
  max-width: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  header .logo {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  header .logo img {
    width: auto;
  }
}
header nav {
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 15px 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  header nav.menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
}
header nav ul {
  display: flex;
}
@media screen and (max-width: 767px) {
  header nav ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
header nav ul li {
  padding: 5px 1.5em;
}
@media screen and (max-width: 767px) {
  header nav ul li {
    line-height: 1.8;
  }
}
header nav ul li a {
  font-size: 16px;
}
header .hamburger-menu {
  z-index: 10;
  display: none;
  width: 60px;
  height: 60px;
  position: relative;
  border: none;
  background: transparent;
  appearance: none;
  padding: 3vw;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  header .hamburger-menu {
    display: block;
  }
}
header .hamburger-menu .hamburger-menu__bar {
  display: inline-block;
  width: 44%;
  height: 2px;
  background: #242424;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.5s;
}
header .hamburger-menu .hamburger-menu__bar:first-child {
  top: 20px;
}
header .hamburger-menu .hamburger-menu__bar:nth-child(2) {
  top: 28px;
}
header .hamburger-menu .hamburger-menu__bar:last-child {
  top: 38px;
}
header .hamburger-menu.hamburger-menu--open .hamburger-menu__bar {
  top: 50%;
}
header .hamburger-menu.hamburger-menu--open .hamburger-menu__bar:first-child {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
header .hamburger-menu.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
  display: none;
}
header .hamburger-menu.hamburger-menu--open .hamburger-menu__bar:last-child {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.mail {
  width: 95px;
  height: 90px;
  background-color: #0169CC;
  color: #fff;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-left: 10px;
}
@media screen and (max-width: 767px) {
  .mail {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
}

.main_view_wrap {
  position: relative;
}
.main_view_wrap .main_view {
  position: relative;
  z-index: 1;
}
.main_view_wrap .view_item {
  position: absolute;
  z-index: 2;
}
.main_view_wrap .view_item.main_01 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 30%;
  margin: 23% auto;
}
.main_view_wrap .view_item.main_02 {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 33%;
}
.main_view_wrap .view_item.main_03 {
  top: 0;
  right: 30%;
  width: 100%;
  max-width: 30%;
}
.main_view_wrap .view_item.main_04 {
  right: 0;
  top: 0;
  max-width: 28%;
  width: 100%;
}
.main_view_wrap .view_item.main_05 {
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 35%;
}
.main_view_wrap .view_item.main_06 {
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 30%;
}
.main_view_wrap.fadeUp .main_01 {
  animation-name: fadeUpAnime01;
  animation-delay: 4s;
  animation-duration: 1s;
  opacity: 0;
  animation-fill-mode: forwards;
}
@keyframes fadeUpAnime01 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main_view_wrap.fadeUp .main_02 {
  animation-name: fadeUpAnime02;
  animation-delay: 0.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime02 {
  from {
    opacity: 0;
    top: -100%;
    left: -100%;
  }
  to {
    opacity: 1;
    top: 0;
    left: 0;
  }
}
.main_view_wrap.fadeUp .main_03 {
  animation-name: fadeUpAnime03;
  animation-delay: 1s;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime03 {
  from {
    opacity: 0;
    top: -100%;
    right: -100%;
  }
  to {
    opacity: 1;
    top: 0;
    right: 30%;
  }
}
.main_view_wrap.fadeUp .main_04 {
  animation-name: fadeUpAnime04;
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime04 {
  from {
    opacity: 0;
    top: -100%;
    right: -100%;
  }
  to {
    opacity: 1;
    right: 0;
    top: 0;
  }
}
.main_view_wrap.fadeUp .main_05 {
  animation-name: fadeUpAnime05;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime05 {
  from {
    opacity: 0;
    right: -100%;
    bottom: -100%;
  }
  to {
    opacity: 1;
    right: 0;
    bottom: 0;
  }
}
.main_view_wrap.fadeUp .main_06 {
  bottom: 0;
  left: 0;
  animation-name: fadeUpAnime06;
  animation-delay: 2.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime06 {
  from {
    opacity: 0;
    bottom: -100%;
    left: -100%;
  }
  to {
    opacity: 1;
    bottom: 0;
    left: 0;
  }
}

.news {
  background-color: #fff;
  padding: 50px 6vw;
}
.news ul {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.news ul li {
  line-height: 1.8;
}
.news ul li a:hover {
  color: #0169CC;
  transition: 0.5s;
}

.top .flow {
  background-color: #09ADEA;
  position: relative;
  display: flex;
  justify-content: center;
}
.top .flow .images_bk {
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 4%;
  width: auto;
  max-width: 45%;
}
@media screen and (max-width: 767px) {
  .top .flow .images_bk {
    max-width: 100%;
    top: 3%;
  }
}
.top .flow img {
  max-height: 100%;
}
.top .flow_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .top .flow_wrap {
    flex-direction: column;
  }
}
.top .flow_wrap .images {
  z-index: 2;
  max-width: 380px;
  width: 100%;
  opacity: 0;
  transition: 1.5s;
}
.top .flow_wrap .images.transform {
  transform: 1.5s;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .top .flow_wrap .images {
    max-width: 80%;
    margin: 20% 0;
  }
}
.top .flow_wrap .images img {
  height: 100%;
}
.top .flow_wrap .text {
  color: #fff;
  max-width: 48%;
  z-index: 5;
  margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .top .flow_wrap .text {
    max-width: 100%;
  }
}
.top .flow_wrap .text h3 {
  text-align: left;
  font-size: 46px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .top .flow_wrap .text h3 {
    font-size: 23px;
  }
}
.top .flow_wrap .text p {
  padding-top: 50px;
  padding-bottom: 60px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .top .flow_wrap .text p {
    padding-top: 25px;
    padding-bottom: 30px;
    font-size: 14px;
  }
}
.top .recruit {
  display: flex;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}
.top .recruit .recruit_wrap {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background-image: url(../img/top/recruit.jpg);
  height: 380px;
  width: 100%;
}
.top .recruit .recruit_wrap h2 {
  color: #fff;
}
.top .recruit .recruit_wrap a {
  display: block;
}
.top .recruit .recruit_wrap:hover {
  transition: 0.5s;
}
.top .recruit .recruit_wrap .txt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  text-align: center;
  background-color: rgba(9, 173, 234, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .top .recruit .recruit_wrap .txt {
    padding: 6vw;
  }
}
.top .recruit .recruit_wrap .txt p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

footer {
  color: #fff;
}
footer .contact {
  background-color: #0169CC;
  padding: 150px 0;
  text-align: center;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  font-weight: bold;
}
footer .contact h2 {
  color: #fff;
}
@media screen and (max-width: 767px) {
  footer .contact {
    padding: 50px 6vw;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
}
footer .contact a {
  background-color: #fff;
  padding: 15px 30px;
  margin: 50px auto 0px;
  border-radius: 50px;
  color: #0169CC;
  display: flex;
  align-items: center;
  font-size: 18px;
  text-align: left;
  max-width: 420px;
}
footer .contact a span {
  width: 100%;
  max-width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0169CC;
  border-radius: 50%;
  color: #fff;
  margin-left: 20px;
}
footer .footer_wrap {
  background-color: #004383;
  padding: 150px 0;
}
@media screen and (max-width: 767px) {
  footer .footer_wrap {
    padding: 50px 0;
  }
}
footer .footer_wrap .footer_nav {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
@media screen and (max-width: 767px) {
  footer .footer_wrap .footer_nav {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  footer .footer_wrap .footer_nav .footer_left .logo {
    padding: 0 6vw;
  }
}
footer .footer_wrap .footer_nav .footer_left .sns {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  footer .footer_wrap .footer_nav .footer_left .sns {
    margin-bottom: 30px;
  }
}
footer .footer_wrap .footer_nav .footer_left .sns li {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
}
footer .footer_wrap .footer_nav .footer_left .sns li a {
  display: block;
}
footer .footer_wrap .footer_nav .footer_left .sns li a img {
  width: auto;
}
footer .footer_wrap .footer_nav .footer_rigth {
  display: flex;
  margin-left: 150px;
}
@media screen and (max-width: 767px) {
  footer .footer_wrap .footer_nav .footer_rigth {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
  }
}
@media screen and (max-width: 767px) {
  footer .footer_wrap .footer_nav .footer_rigth ul {
    text-align: center;
  }
}
footer .footer_wrap .footer_nav .footer_rigth ul:nth-of-type(2) {
  margin-left: 50px;
}
@media screen and (max-width: 767px) {
  footer .footer_wrap .footer_nav .footer_rigth ul:nth-of-type(2) {
    margin-left: 0px;
  }
}
footer .footer_wrap .footer_nav .footer_rigth ul li {
  line-height: 1.8;
  font-weight: bold;
}
footer .copy {
  background-color: #002140;
  text-align: center;
  padding: 1em 0;
}

.page_main_view_wrap .main_view {
  position: relative;
}
.page_main_view_wrap .main_view .page_ttl {
  text-align: center;
  font-size: 46px;
  font-weight: bold;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #707070;
}
@media screen and (max-width: 767px) {
  .page_main_view_wrap .main_view .page_ttl {
    font-size: 24px;
  }
}

.breadcrumb {
  color: #09ADEA;
  display: flex;
  padding-top: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .breadcrumb {
    padding: 6vw;
  }
}
.breadcrumb a {
  text-decoration: underline;
}
.breadcrumb li + li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: 900;
  margin: 0 1em;
}

.pagination {
  margin: 0 auto;
}
.pagination ul {
  display: flex;
  justify-content: center;
}
.pagination ul li {
  margin: 0 10px;
}
.pagination ul li span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0169CC;
  color: #FFF;
}
.pagination ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0169CC;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #0169CC;
}
.pagination ul li a:hover {
  border-color: #09ADEA;
  color: #09ADEA;
}

.pagination-total {
  text-align: center;
  margin: 0 auto;
}

/* 制作の流れ */
main.flow {
  background-color: #09ADEA;
}
main.flow h2 {
  color: #fff;
}
main.flow .breadcrumb {
  color: #fff;
}
main.flow .item_boxs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 150px;
}
@media screen and (max-width: 767px) {
  main.flow .item_boxs {
    flex-direction: column;
    justify-content: center;
    margin: 0 auto 70px;
  }
}
main.flow .item_boxs .images {
  max-width: 40%;
  width: 100%;
}
main.flow .item_boxs .images img {
  width: auto;
}
@media screen and (max-width: 767px) {
  main.flow .item_boxs .images {
    max-width: 100%;
  }
}
main.flow .item_boxs .text {
  color: #fff;
  width: 50%;
}
@media screen and (max-width: 767px) {
  main.flow .item_boxs .text {
    width: 100%;
  }
}
main.flow .item_boxs .text h3 {
  font-size: 46px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  main.flow .item_boxs .text h3 {
    font-size: 23px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
main.flow .item_boxs .text p {
  line-height: 1.5;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  main.flow .item_boxs .text p {
    font-size: 14px;
  }
}
main.news .wrap .list li {
  padding: 20px 0;
}
main.news .wrap .list li + li {
  border-top: 1px solid #333;
}
main.contact {
  margin: 0 auto;
}
main.contact .wrap {
  max-width: 768px;
  margin: 0 auto;
}
main.contact p {
  line-height: 1.5;
}
main.contact .hissu {
  text-align: center;
  margin: 1em 0;
}
main.contact .button {
  padding: 10px 1em;
  color: #0169CC;
  border: 1px solid #0169CC;
  border-radius: 10px;
  transition: 0.5s;
  padding: 10px 1em;
  margin: 10px auto;
  display: block;
}
main.contact .button:hover {
  background-color: #0169CC;
  color: #fff;
  transition: 0.5s;
}
main.contact table {
  margin-bottom: 40px;
}
main.story .item {
  display: flex;
  margin: 0 auto;
  padding: 20px 0;
}
@media screen and (max-width: 767px) {
  main.story .item {
    flex-direction: column;
  }
}
main.story .item + .item {
  border-top: 1px solid #333;
}
main.story .date {
  margin-right: 20px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  main.story .date {
    margin-right: 0px;
    margin-bottom: 10px;
  }
}
main.story .images {
  margin-right: 20px;
}
@media screen and (max-width: 767px) {
  main.story .images {
    margin-right: 0px;
    margin-bottom: 10px;
  }
}
main.policy h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
main.policy p {
  margin-bottom: 2em;
}

.works {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.works::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 334px;
  background-image: url(../img/top/top_02_lf.png);
  top: 60px;
  left: 0;
  z-index: -1;
  background-size: contain;
  background-repeat: no-repeat;
}
.works::before {
  position: absolute;
  content: "";
  background-image: url(../img/top/top_02_ri.png);
  width: 50%;
  height: 440px;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  background-position: bottom;
}
.works .works_wrap ul {
  display: flex;
  flex-wrap: wrap;
}
.works .works_wrap ul li {
  border: 1px solid #0169CC;
  border-radius: 15px;
  max-width: 310px;
  width: 100%;
  max-height: 280px;
  height: 100%;
  margin: 40px 28px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 767px) {
  .works .works_wrap ul li {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
    max-width: 100%;
  }
}
.works .works_wrap ul li a {
  display: block;
}
.works .works_wrap ul li .txt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(1, 105, 204, 0.7411764706);
  transform: translateY(100%);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bolder;
}
.works .works_wrap ul li:hover .txt {
  transform: translateY(0%);
  transition: 0.5s;
}

table {
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}
table th {
  background-color: #09ADEA;
  border-right: 1px solid #fff;
  padding: 20px;
  color: #fff;
}
table td {
  background-color: rgba(9, 173, 234, 0.4);
  padding: 20px;
}
table tr {
  border-bottom: 1px solid #fff;
}
table input, table textarea, table select {
  background-color: #fff;
  padding: 5px 10px;
}
@media screen and (max-width: 767px) {
  table td, table th {
    display: block;
    width: 100%;
  }
  table th {
    border-right: none;
  }
  table input, table textarea, table select {
    width: 100%;
    max-width: 100%;
  }
}

footer.flow_color {
  background-color: #09ADEA;
}/*# sourceMappingURL=style.css.map */