@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700&display=swap');

html {
  font-size:62.5%;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:1.6rem;
  line-height:1.8em;
  color:#333;
}

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

.mainVisual {
  position:relative;
  height:100vh;
  overflow: hidden;
}
.mainVisual__left,
.mainVisual__right {
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  height:100%;
  color:#FFF;
}
.mainVisual__left {
  width:510px;
}
.mainVisual__left__company {
  font-family: 'Noto Serif JP', serif;
  font-size:5rem;
  line-height:1.5em;
  padding:0 20px;
  letter-spacing:.14em;
}
.mainVisual__subTitle {
  font-size:4.5rem;
  line-height:1.6;
  font-family: 'Noto Serif JP', serif;
  padding:0 20px;
  letter-spacing: .4em;
}
.mainVisual__right {
  width:180px;
  background-color:#145192;
  left:auto;
  right:0;
  transition:all 1s ease;
  opacity:0;
  transform:translateX(50px);
}
.mainVisual__right.on {
  opacity:1;
  transform:translateX(0);
}
.mainVisual__right__logo {
  position:absolute;
  bottom:0;
  right:0;
}
.mainVisual__slide {
  position:relative;
}
.mainVisual__img {
  background:center center / cover no-repeat;
  height:640px;
}
.mainVisual__img-1 {
  background-image:url("../img/01.jpg");
}
.mainVisual__img-2 {
  background-image:url("../img/02.jpg");
}
.mainVisual__img-3 {
  background-image:url("../img/03.jpg");
}


.mainHeader {
  display:flex;
  background-color:#FFF;
  border-bottom:2px solid #145192;
  font-family: 'Noto Serif JP', serif;
  position:sticky;
  top:0;
  left:0;
  z-index:9999;
  transition:all 1.5s ease;
  opacity:0;
  transform:translateY(20px);
}
.mainHeader.on {
  opacity:1;
  transform: translateY(0);
}
.mainHeader a {
  transition:all .3s ease;
}
.mainHeader__company--sp {
  display:none;
}
.mainHeader__menuBtn--sp {
  display:none;
}
.mainHeader__nav {
  margin-left:auto;
  margin-right:auto;
}
.mainHeader__nav__list {
  list-style:none;
  margin:0;
  padding-left:0;
  display:flex;
}
.mainHeader__nav__item {
  font-size:1.8rem;
  line-height:1.1em;
  text-align:center;
}
.mainHeader__nav__item--sp {
  display:none;
}
.mainHeader__nav__item a {
  display:block;
  padding:20px 40px;
  color:#333;
  text-decoration: none;
}
.mainHeader__nav__item a:hover {
  background-color:#ddeaf8;
}
.mainHeader__nav__item span {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:1.3rem;
  line-height:1.5em;
  display:block;
  transition:all .3s ease;
}
.mainHeader__nav__item a:hover span {
  color:#145192;
}


.mainFooter__nav {
  border-top:2px solid #CCC;
}
.mainFooter__nav__list {
  list-style:none;
  margin:10px auto;
  padding-left:0;
  display:flex;
  justify-content: center;
}
.mainFooter__nav__item {
  border-left:1px solid #CCC;
  font-size:1.4rem;
  line-height:1.5em;
}
.mainFooter__nav__item-7 {
  border-right:1px solid #CCC;
}
.mainFooter__nav__item a {
  display:block;
  padding:0 15px;
  color:#333;
  text-decoration:none;
  transition: all .3s ease;
}
.mainFooter__nav__item a:hover {
  opacity:.6;
}
.mainFooter__copyright {
  margin:0;
  font-size:1.3rem;
  line-height:1.5em;
  border-top:1px solid #CCC;
  padding:10px;
  text-align:center;
}



/* .slick-dots {
  bottom:10px;
}
.slick-dots li button:before {
  font-size:1.8rem;
  color:#FFF;
  opacity:1;
}
.slick-dots li.slick-active button:before {
  color:#000;
  opacity:1;
} */
.slider {
  position:relative;
  min-height:100vh;
}
.slider canvas {
  width: 217vh !important;
  height: 200vh !important;
  min-height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
@media screen and (max-width:767px) {
  .slider canvas {
    width:150vh !important;
    height:150vh !important;
  }
}



.mainContents {
  margin:60px auto 100px;
}

.content {
  transition:all 1s ease;
  opacity:0;
  visibility: hidden;
  transform:translateY(15px);
}
.content.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

a.btn {
  display:block;
  margin:30px auto 50px;
  background-color:#ddeaf8;
  border:2px solid #145192;
  width:280px;
  text-align:center;
  padding:15px;
  font-size:2.2rem;
  line-height:1.1em;
  text-decoration: none;
  color:#145192;
  font-family: 'Noto Serif JP', serif;
  transition:all .3s ease;
}
a.btn:hover {
  color:yellow;
  background-color:#145192;
}



/* Home */
body.home .content-1,
body.home .content-2 {
  max-width:1000px;
  width:100%;
  padding-left:15px;
  padding-right:15px;
  box-sizing:border-box;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:80px;
}
body.home .content-1__title/*,
body.home .content-2__title*/ {
  font-family: 'Noto Serif JP', serif;
  font-weight:normal;
  font-size:2.6rem;
  line-height:1.5em;
  text-align:center;
  padding:10px 0 20px;
  border-bottom:1px solid #CCC;
  margin:0 auto 25px;
}
body.home .content-1__title span/*,
body.home .content-2__title span*/ {
  display:block;
  font-size:1.8rem;
  line-height:1.5em;
  margin-top:8px;
}
/*body.home .content-2__news {
  display:flex;
  margin-bottom:25px;
}
body.home .content-2__news__date,
body.home .content-2__news__cat {
  margin:0 15px 0 0;
  font-size:1.4rem;
  line-height:1.5em;
}
body.home .content-2__news__cat a {
  display:inline-block;
  vertical-align: top;
  background-color:#145192;
  color:#FFF;
  text-decoration: none;
  padding:2px 10px;
}
body.home .content-2__news__title a {
  color:#333;
}*/
body.home .content-2 {
  display:flex;
}
body.home .content-2__left,
body.home .content-2__right {
  width:50%;
  box-sizing:border-box;
}
body.home .content-2__left,
body.home .content-2__right__fb,
body.home .content-2__right__tw {
  border:1px solid #CCC;
  padding:20px 15px;
}
body.home .content-2__left__yt__title,
body.home .content-2__right__fb__title,
body.home .content-2__right__tw__title {
  font-size:2.8rem;
  margin:0 0 20px;
}
body.home .content-2__left__yt__cont iframe {
  width:100%;
  height:255px;
}
body.home .content-2__right__fb__title img {
  width:160px;
}
body.home .content-2__right__fb__title img,
body.home .content-2__right__tw__title img {
  width:40px;
  margin-right:10px;
}




/* subpage */
/*.mainHeader__logo {
  font-size:2rem;
  margin:0;
}
.mainHeader__logo a {
  color:#333;
  text-decoration: none;
  display:block;
  padding:25px 10px;
}
.mainHeader__logo a:hover {
  opacity:.6;
}*/
body.page .mainHeader__logo {
  font-size:2rem;
  margin:0;
}
body.page .mainHeader__logo img {
  width:50px;
  vertical-align: middle;
  margin-right:12px;
}
body.page .mainHeader__logo a {
  color:#333;
  text-decoration: none;
  display:block;
  padding:14px 10px;
}
body.page .mainHeader__logo a:hover {
  opacity:.6;
}
body.page .mainContents {
  margin-top:0;
}
body.page .pageTitle {
  background:url("../img/subpage/bg_img.png") center center / cover no-repeat;
  padding:50px 0;
  margin-bottom:70px;
}
body.page .pageTitle__text {
  max-width:1000px;
  width:92%;
  margin:0 auto;
  font-family: 'Noto Serif JP', serif;
  font-size:4.2rem;
  line-height:1.2em;
  letter-spacing: .2em;
  /* opacity:0; */
}
/* body.page .pageTitle__text.on {
  opacity:1;
} */
body.page .content__title {
  font-family: 'Noto Serif JP', serif;
  font-weight:normal;
  font-size:2.6rem;
  line-height:1.5em;
  text-align:center;
  padding:10px 0 20px;
  border-bottom:1px solid #CCC;
  margin:0 auto 25px;
}



/* company */
body.company .content {
  max-width:1000px;
  width:92%;
  margin-left:auto;
  margin-right:auto;
}
/*body.company .content-1 {
  margin-bottom:50px;
}
body.company .content-1__presName {
  margin-top:15px;
  text-align:right;
}*/
body.company .content-1,
body.company .content-2 {
  margin-bottom:50px;
}
body.company .content-1__tableContent,
body.company .content-2__tableContent {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
body.company .content-1__tableContent th,
body.company .content-1__tableContent td,
body.company .content-2__tableContent th,
body.company .content-2__tableContent td {
  padding:15px;
  vertical-align: top;
  box-sizing:border-box;
}
body.company .content-1__tableContent th,
body.company .content-2__tableContent th {
  border-bottom:2px solid #888;
  text-align:left;
  width:180px;
}
body.company .content-1__tableContent td,
body.company .content-2__tableContent td {
  border-bottom:1px solid #CCC;
}
body.company .content-3__mapContent iframe {
  width:100%;
}
body.company iframe {
  width:100%;
}



/* service */
body.service .content-1 {
  max-width:1000px;
  margin:0 auto;
}
body.service .content-1__serviceBlock {
  padding-bottom:15px;
  margin-bottom:50px;
}
body.service .content-1__serviceBlock h3 {
  border-left:5px solid #145192;
  border-bottom:1px solid #CCC;
  padding-left:12px;
  margin-bottom:10px;
}




/* works */
body.works .worksMessage{
  max-width:1000px;
  margin:40px auto;
}
.worksList {
  display:flex;
  flex-wrap:wrap;
  max-width:1000px;
  width:94%;
  margin:0 auto;
}
.worksPost {
  display:block;
  width:24%;
  margin:0 1% 40px;
  position:relative;
  color:#FFF;
  text-decoration:none;
}
.worksPost::after {
  content:"";
  display:block;
  position:absolute;
  z-index: 1;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
  transition:all .3s ease;
  opacity:0;
}
.worksPost:hover::after {
  opacity:1;
}
.worksPost img {
  display:block;
  width:100%;
  height:250px;
  object-fit: cover;
}
.worksPost__title {
  width:90%;
  font-size:14px;
  position:absolute;
  z-index: 2;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition:all .3s ease;
  opacity:0;
  margin-top:10px;
  text-align:center;
}
.worksPost:hover .worksPost__title {
  opacity:1;
  margin-top:0;
}
.work {
  max-width:1000px;
  width:92%;
  margin:0 auto 50px;
  padding-bottom:20px;
  border-bottom:1px solid #CECECE;
}
.work__title {
  display:inline-block;
  vertical-align: top;
  position:relative;
  margin:0 0 15px;
  font-size:2.8rem;
  line-height:1.4em;
}
.work__title__span {
  position:relative;
  display:inline-block;
  vertical-align: top;
  padding:0 10px;
}
.work__title:before {
  content:"";
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:0.45em;
  background-color:#c5d5e6;
}
.work__date {
  font-size:1.4rem;
  line-height:1.5em;
  margin:0 0 15px;
}




/* associate */
body.associate .content-1 {
  max-width:1000px;
  margin:0 auto;
}
body.associate .content-1__thumbArea {
  text-align: center;
}
body.associate .content-1__btnArea {
  display:flex;
  justify-content: center;
}
body.associate .content-1__btnArea .btn {
  margin-left:10px;
  margin-right:10px;
}



/* recruit */
body.recruit .content {
  max-width:1000px;
  width:92%;
  margin-left:auto;
  margin-right:auto;
}
body.recruit .content-1 {
  margin-bottom:50px;
}
body.recruit .content-1__tableContent {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
body.recruit .content-1__tableContent th,
body.recruit .content-1__tableContent td {
  padding:15px;
  vertical-align: top;
  box-sizing:border-box;
}
body.recruit .content-1__tableContent th {
  border-bottom:2px solid #888;
  text-align:left;
  width:180px;
}
body.recruit .content-1__tableContent td {
  border-bottom:1px solid #CCC;
}


/* privacy-policy */
body.privacy-policy .content {
  max-width:1000px;
  margin:0 auto 60px;
  border-bottom:1px solid #CCC;
  padding-bottom:15px;
}
body.privacy-policy .content__title {
  font-size:2rem;
  line-height:1.5em;
  text-align:left;
  border-left:5px solid #145192;
  border-bottom:0;
  padding: 8px 12px;
  margin-bottom:10px;
}


/* contact */
body.contact .content {
  max-width:1000px;
  margin:0 auto 60px;
}
body.contact table {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
body.contact table th,
body.contact table td {
  border:1px solid #CCC;
  font-weight:normal;
  text-align:left;
  padding:12px;
}
body.contact table th {
  width:240px;
}
body.contact .required {
  display:inline-block;
  background-color:red;
  color:#FFF;
  font-size:1.3rem;
  line-height:1em;
  padding:5px;
  margin-left:4px;
}
body.contact input[type='text'],
body.contact input[type='email'],
body.contact input[type='tel'] {
  width:250px;
  padding:4px;
  border:1px solid #CCC;
}
body.contact input[type='email'] {
  width:80%;
}
body.contact textarea {
  width:80%;
  height:180px;
  border:1px solid #CCC;
}
body.contact .contactForm__btnArea {
  text-align:center;
  margin:25px;
}
body.contact .contactForm__btnReset,
body.contact .contactForm__btnBack,
body.contact .contactForm__btnSbmt {
  padding:8px;
  margin:10px;
}


.txt-animation {
  letter-spacing: 0.1em;
}
.txt-animation span {
  display:inline-block;
  opacity:0;
  transform:translateY(.7em);
}
.txt-animation span.on {
  animation: char .5s 1 ease forwards;
}

.fade-animation {
  overflow:hidden;
  position: relative;
}
body.page .fade-animation { display:inline-block; }
.fade-animation span {
  opacity:0;
  animation: txt-opacity 1s .6s forwards cubic-bezier(.8,0,.5,1);
}
body.home .fade-animation span {
  animation-delay: 1s;
}
.fade-animation::after {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  background-color: #145192;
  transform:translateX(-100%);
  animation: slide-block 1s .6s forwards cubic-bezier(.8,0,.5,1);
}
body.home .fade-animation::after {
  animation-delay: 1s;
}

@keyframes char {
  0%{
    opacity: 0;
    transform:translateY(.7em);
  }
  70% {
    transform:translateY(-0.2em);
  }
  100% {
    opacity: 1;
    transform:translateY(0);
  }
}
@keyframes slide-block {
  0% {
    transform: translateX(-102%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(102%);
  }
}
@keyframes txt-opacity {
  0% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  51% {
    opacity:1;
  }
  100% {
    opacity:1;
  }
}


@media screen and (max-width:1230px) {

  .mainHeader__nav__item a {
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1.8rem;
  }

}

@media screen and (max-width:1000px) {

  .mainHeader__nav__item a {
    font-size:1.52rem;
  }


  body.service .content,
  body.associate .content,
  body.privacy-policy .content,
  body.contact .content {
    width:92%;
  }

}

@media screen and (max-width:850px) {

  .mainHeader__nav__item a {
    padding-left:10px;
    padding-right:10px;
    font-size:1.4rem;
  }

  body.page .mainHeader__logo a {
    font-size:1.7rem;
  }

}

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

  .mainHeader__nav {
    display:block !important;
  }

}
@media screen and (max-width:767px) {

  .mainVisual {
    height:auto;
  }
  /* .mainVisual__left,
  .mainVisual__left__company, */
  .mainVisual__right {
    display:none;
  }
  .mainVisual__left__company {
    margin-top:180px;
    display:inline-block;
    font-size:5.5vw;
  }
  .mainVisual__subTitle {
    display:inline-block;
    font-size:6.5vw;
  }
  .mainVisual__img {
    height:100vh;
  }

  .mainHeader {
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    background:#145192 url('../img/logo.png') left bottom /contain no-repeat;
    border-bottom:0;
    color:#FFF;
    padding:15px 0;
    width:100%;
    box-sizing:border-box;
  }
  .mainHeader__logo {
    display:none;
  }
  .mainHeader__company--sp {
    display:block;
    font-size:1.8rem;
    width:80px;
    margin:0 0 0 100px;
    line-height:1.4;
  }
  .mainHeader__company--sp a {
    text-decoration: none;
    color:#FFF;
  }
  .mainHeader__menuBtn--sp {
    display:block;
    width:50px;
    height:40px;
    position:relative;
    margin:4px 15px 0 auto;
  }
  .mainHeader__menuBtn--sp__line {
    display:block;
    position:absolute;
    left:0;
    width:100%;
    height:6px;
    background-color:#FFF;
    transition:all .3s ease;
  }
  .mainHeader__menuBtn--sp__line--top {
    top:0;
  }
  .mainHeader__menuBtn--sp__line--middle {
    top:50%;
    margin-top:-3px;
  }
  .mainHeader__menuBtn--sp__line--bottom {
    bottom:0;
  }
  .active .mainHeader__menuBtn--sp__line--top {
    transform:translateY(17px) rotate(45deg);
  }
  .active .mainHeader__menuBtn--sp__line--middle {
    opacity:0;
  }
  .active .mainHeader__menuBtn--sp__line--bottom {
    transform:translateY(-17px) rotate(-45deg);
  }
  .mainHeader__nav {
    display:none;
    position:fixed;
    top:80px;
    left:0;
    width:100%;
    background-color: #FFF;
    height:calc(100vh - 80px);
    overflow: auto;
  }
  .mainHeader__nav__list {
    display:block;
  }

  .mainHeader__nav__item--sp {
    display:block;
  }
  .mainHeader__nav__item-6 {
    padding-bottom:50px;
  }


  .mainFooter__nav {
    display:none;
  }



  .mainContents {
    margin-top:40px;
  }
  body.page .mainContents {
    margin-top:80px;
  }


  body.home .content-2 {
    display:block;
    width:92%;
    margin-left:auto;
    margin-right:auto;
  }
  body.home .content-2__left,
  body.home .content-2__right {
    width:100%;
  }


  body.page .pageTitle {
    padding: 25px 0;
    text-align:center;
  }
  body.page .pageTitle__text {
    font-size:2.8rem;
  }


  body.company .content {
    overflow: auto;
  }
  body.company .content__inner {
    min-width:700px;
  }

  .worksList {
    flex-wrap:wrap;
  }
  .worksPost {
    width:280px;
    margin-left:auto;
    margin-right:auto;
  }
  body.company iframe {
    width:300px;
    height:300px;
  }


  body.associate .content-1__btnArea {
    display:block;
  }
  body.associate .content-1__btnArea .btn {
    width:100%;
    box-sizing: border-box;
    margin-left:auto;
    margin-right:auto;
  }


  body.contact table th,
  body.contact table td {
    display:block;
    width:100%;
    box-sizing: border-box;
  }
  body.contact table th {
    border-bottom:0;
    padding-bottom:0;
  }
  body.contact table td {
    border-top:0;
  }
  body.contact input[type="text"],
  body.contact input[type="email"],
  body.contact input[type="tel"],
  body.contact textarea {
    width:calc(100% - 24px);
  }

  body.recruit .content-1__tableContent th,
  body.recruit .content-1__tableContent td {
    display:block;
    width:100%;
  }
  body.recruit .content-1__tableContent td {
    margin-bottom:40px;
  }

}