@charset "utf";

/* * {
  outline: 2px red solid;
} */

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","平成角ゴシック Std";
}

header {
  text-align: right;
  width: 100%;
  height: 86px;
  z-index: 10;
  position: fixed;
  background-color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

header .sp_grobal , #nav-btn {
  display: none;
}

.sp_menu {
  transform: translateX(100%);
}

header h1 {
  position: absolute;
  display: block;
  top: 13px;
  left: 53px;
}

header h1 img {
  width: 124px;
}

nav {
  display: flex;
}

.nav_fast {
  height: 23px;
  margin-top: 17px;
  margin-left: auto;
  position: relative;
  display: inline-block;
}

.nav_fast li {
  display: inline-block;
}

.nav_fast li a {
  font-size: 13px;
  font-family: "Neue Haas Grotesk Text Pro";
  padding: 0 15px;
  display: inline-block;
  line-height: 23px;
  text-decoration: none;
  text-align: center;
  color: #0C162C;
}

header span {
  font-size: 16px;
  color: #192F60;
}

.nav_fast li span {
  display: block;
}

.nav_sec {
  display: flex;
}

.nav_sec .tel {
  margin: 20px 44px;
}

.inner {
  width: 1140px;
  margin: 0 auto;
}

.key_visua {
  height: 755px;
  background: url(image/fv-img01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
}

.key_visua_container {
  position: absolute;
  top: 260px;
}

.key_visua_container h2 {
  width: 913px;
  font-size: 60px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #192F60;
  background-color: #ffffff;
  margin-top: 8px;
  padding: 13px 16px;
  letter-spacing: 5px;
}

.key_visua_container h2:first-child {
  letter-spacing: 16px;
}

.key_visua p {
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  letter-spacing: 3px;
  position: absolute;
  padding: 13px 16px;
  font-size: 18px;
  color: #192F60;
  background-color: #ffffff;
  top: 464px;
}

.key_visua .contact_btn {
  position: absolute;
  top: 592px;
}

.contact_btn img:first-child {
  margin-right: 80px;
}

#concept {
  height: 1371px;
}

.concept_visua {
  position: relative;
  height: 849px;
}

.concept_bg {
  width: 343.8px;
  height: 676px;
  background-image: url(image/concept.bg.jpg) ;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: left;
}

.concept_visua h2 {
  font-size: 22px;
  color: #192F60;
  position: absolute;
  top: 44px;
  left: 30.6px;
}

.days_text p {
  font-size: 16px;
  font-family: "Quicksand";
  position: absolute;
  display: inline-block;
  top: 44px;
  left: 243.3px;
}

.days_text a {
  font-size: 16px;
  font-family: "平成角ゴシック Std";
  color: #2D2D2D;
  text-decoration: underline;
  position: absolute;
  display: inline-block;
  top: 44px;
  left: 367.3px;
}

.price {
  height: 317px;
  position: absolute;
  top: 100px;
  left: 10px;
  display: flex;
}

.price_img {
  background-image: url(image/img01.jpg);
  width: 475px;
  height: 317px;
}

.price_texts {
  width: 475px;
  text-align: right;
}

.price_texts p:nth-child(1) {
  font-size: 28px;
  font-weight: bold;
  font-family: "平成角ゴシック Std";
  letter-spacing: 2px;
  color: #ffffff;
  padding: 13px 16px;
  margin-top: 43px;
  background-color: #192F60;
  display: inline-block;
}

.price_texts p:nth-child(2) {
  font-size: 28px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  padding: 13px 16px;
  margin-top: 12px;
  background-color: #192F60;
  display: inline-block;
}

.price_footer span {
  font-size: 30px;
  font-family: "Neue Haas Grotesk Text Pro";
  margin: 0 10px;
}

#concept .price_footer {
  text-align: center;
  margin-top: 20px;
}

#concept .price_footer p {
  font-size: 20px;
  font-weight: normal;
  color: #192F60;
  margin-left: 12px;
  background-color: #ffffff;
}

#concept .under_text p {
  width: 950px;
  margin: 0 auto;
  position: absolute;
  top: 470px;
  left: 188.8px;
  line-height: 1.5;
}

.top_btn {
  position: absolute;
  top: 583px;
  left: 448.8px;
}

.three_feature {
  height: 522px;
  padding: 0 113px;
  margin-right: auto;
  background-image: url(image/bg02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  position: relative;
}



.feature_left {
  width: 485px;
}

.feature_left p:nth-child(1) {
  font-size: 20px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #192F60;
  margin-top: 80px;
}

.feature_left h2 {
  font-size: 28px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #ffffff;
  background-color: #192F60;
  padding: 13px 16px;
  margin-top: 16px;
  display: inline-block;
}

#concept .feature_left_p p {
  font-size: 14px;
  font-family: "平成角ゴシック Std";
  font-weight: normal;
  color: #192F60;
  margin-top: 40px;
  line-height: 25px;
}

.feature_right ul {
  margin-top: 5px;
}

.feature_right ul li {
  margin-top: 58px;
}

.list {
  display: flex;
}

.list h2 {
  font-size: 100px;
  font-family: "Neue Haas Grotesk Text Pro";
  font-weight: bold;
  color: #EFF1F4;
}

.right_box {
  margin-right: auto;
  margin-left: 19px;
}

.first {
  margin-left: 191px;
}

.second {
  margin-left: 95px;
}

#concept .right_box h2 {
  font-size: 24px;
  font-family: "平成角ゴシック Std";
  color: #192F60;
  margin-top: 7px;
}

#concept .right_box p {
  font-size: 14px;
  font-family: "平成角ゴシック Std";
  color: #333333;
  margin-top: 11px;
  line-height: 26px;
}


#service {
  height: 863px;
}

.service_container {
  margin-top: 80px;
  position: relative;
}

.service_bg {
  width: 335px;
  height: 614px;
  background-image: url(image/service.bg.jpg) ;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
}

.service_top {
  position: absolute;
  top: 80px;
}

.service_top h2 {
  font-size: 28px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #ffffff;
  background-color: #192F60;
  padding: 13px 16px;
  margin-top: 16px;
  display: inline-block;
}

.service_top p {
  font-size: 14px;
  font-family: "平成角ゴシック Std";
  color: #333333;
  width: 950px;
  line-height: 2;
  margin-top: 40px;
}

.service_boxs {
  display: flex;
  position: absolute;
  top: 245px;
  margin: 31px 110px 0 110px;
}

.service_img {
  height: 205px;
}

#service .image_fst h2 {
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  letter-spacing: 3px;
  position: absolute;
  padding: 10px 16px;
  margin-top: 156px;
  margin-left: 10px;
  font-size: 20px;
  color: #192F60;
  background-color: #ffffff;
  
}

.service_img h2 {
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  letter-spacing: 3px;
  position: absolute;
  padding: 10px 16px;
  margin-top: 156px;
  margin-left: 31px;
  font-size: 20px;
  color: #192F60;
  background-color: #ffffff;
  
}

.image_fst {
  background-image: url(image/jobs01.jpg);
  margin-right: 6.5px;
}

.image_sec {
  background-image: url(image/jobs02.jpg);
  margin: 0 6.5px;
}
.image_thr {
  background-image: url(image/jobs03.jpg);
  margin-left: 6.5px;
}

.service_box {
  position: relative;
}

.service_box span {
  font-size: 11px;
  font-family: "Neue Haas Grotesk Text Pro";
  color: #192F60;
  position: absolute;
  top: 199px;
  left: 49px;
}

.service_texts p {
  font-size: 14px;
  line-height: 26px;
  margin: 32px 20px 40px 20px;
}

.btn_imgs {
  text-align: center;
  margin-top: 24px;
}

#works {
  height: 1200px;
}

.works_bg {
  width: 343.8px;
  height: 525px;
  background-image: url(image/works.bg.jpg) ;
  background-repeat: no-repeat;
  background-size: cover;
}

#works .inner {
  position: relative;
}

.title_slide {
  width: 100%;
  height: 964px;
  position: absolute;
  top: 80px;
}

.works_title {
  text-align: right;
  height: 184px;
}

.works_title h2 {
  font-size: 28px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #ffffff;
  background-color: #192F60;
  padding: 13px 16px;
  display: inline-block;
}

.works_title p {
  font-size: 14px;
  font-family: "平成角ゴシック Std";
  font-weight: normal;
  color: #333333;
  margin-top: 40px;
}

.slide_box {
  /* height: 636px; */
  position: relative;
  width: 100%;
  height: 76vh;
  padding: 0;
  margin: 0;
}











.slide_container {
  height: 510px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slider {
  width: 618px;
  height: 480px;
  position: relative;
}
.slider .slide {
  width: 618px;
  height: 412px;
  margin: 0 auto;
  overflow: hidden;
}

.slider .slide img {
  width: 618px;
  height: 412px;
}

.slider .slide ul {
  width: 1854px;
  height: 412px;
  list-style: none;
  font-size: 0;
  position: relative;
}

.slider .slide li {
  display: inline-block;
  position: absolute;
  transition: 0.5s cubic-bezier(0.45, 0.06, 0.32, 1);
}

.slide li:nth-of-type(1){
  left: -600px;
}

.slide li:nth-of-type(2){
  left: 0;
}

.slide li:nth-of-type(3){
  left: 600px;
}

.controller {
  display: flex;
  width: 100%;
  height: 65px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.controller .prev_btn {
  margin-left: 3rem;
  cursor: pointer;
  color: #181818;
}

.controller .next_btn {
  margin-right: 3rem;
  cursor: pointer;
  color: #181818;
}

.controller .indicator {
  display: flex;
  width: 80px;
  height: 16px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background: #181818;
  border-radius: 10px;
}

.indicator span {
  width: 8px;
  height: 8px;
  background: whitesmoke;
  border-radius: 50%;
  margin: 0 4px 0 4px;
}

#active {
  background-color: red;
}














.slide_texts {
width: 528px;
margin: 0 auto;
position: relative;
}

.slide_texts h2 {
  font-size: 20px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #192F60;
  position: absolute;
  top: -60px;
}

.slide_texts p {
  font-size: 14px;
  color: #333333;
  margin-top: 52px;
  line-height: 26px;
}

#works .slide_texts .btn_imgs {
  margin-top: 40px;
}

.slide_box .btn_imgs {
  margin-top: 24px;
}

#blog {
  height: 595px;
}

#blog .inner {
  position: relative;
}

.blog_bg {
  width: 335px;
  height: 409px;
  margin-left: auto;
  background-image: url(image/blog.bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.blog_img {
  height: 515px;
  background-image: url(image/last.bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.blog_bg_ms {
  width: 77.5px;
  height: 321.5px;
  background-image: url(image/blog.ms.png);
  background-repeat: no-repeat;
  background-size: cover;
  transform: rotateX(90);
  position: absolute;
  top: 46.3px;
  right: 0;
}

.blog_ul {
  width: 950px;
  height: 408px;
  margin: 0 auto;
  background-color: #ffffff;
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}


.blog_textline {
  margin: 0 115px;
  display: flex;
  border-bottom: 1px solid #CACACA;
}

.blog_text p {
  padding: 38px 39px;
  margin-left: 10px;
}

.blog_text a {
  font-size: 16px;
  font-family: "平成角ゴシック Std";
  padding: 38px 15px;
  margin: 0 auto;
  text-decoration: underline;
}

#lastcontact {
  height: 316px;
  background-image: url(image/cta.bg.jpg);
}

.footer_contact {
  width: 560px;
  height: 180px;
  padding-top: 80px;
  margin: 80px auto 40px auto;
}

.last_text {
  width: 388px;
  margin: 0 auto;
}

.last_text p {
  font-size: 24px;
  font-family: "平成角ゴシック Std";
  font-weight: bold;
  color: #ffffff;
  line-height: 36px;
}

.footer_contact .contact_btn {
  margin: 40px auto 0 auto;
  display: flex;
}

footer {
  height: 221px;
  background-color: #192F60;
}

footer .inner {
  text-align: center;
}

footer h2 {
  color: #707070;
  font-size: 35px;
  font-weight: bold;
  padding-top: 49.2px;
  letter-spacing: 4px;
}

footer p {
  color: #ffffff;
  font-size: 16px;
  padding-top: 24px;
  padding-bottom: 40px;
}

footer small {
  color: #ffffff;
  font-size: 11px;
  padding-top: 40px;
}