@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

/* Common
------------------------------ */
.font-weight-bold {
  font-weight: bold;
}


/* Header
------------------------------ */
/* Header Logo*/
.s-header__container {
  padding: .1rem 1.875rem;
}
.s-header__logo-img-default {
  width: 70px;
}
.s-header__logo-img-shrink {
  display: none;
  position: relative;
  top: 0;
  width: 70px;
}
.s-header__logo-img-default:hover {
  opacity: 0.6;
}
.s-header__logo-img-shrink:hover {
  opacity: 0.6;
}
.s-header__shrink .s-header__logo-img-shrink {
  display: block;
}
.s-header__shrink .s-header__navbar {
  background: rgba(255,255,255,.8);
}
.s-header__shrink .s-header__container {
  padding: 0 1.875rem;
}
.s-header__shrink .s-header__logo-img-default {
  display: none;
}
.s-header__logo{
  display: flex;
  align-items: center;
  margin: 0 calc(20px / 2 * -1);
}
.s-header__logo a {
  font-size: 16px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
}
.s-header__logo a:hover {
  color: #aaa;
}
.s-header__shrink .s-header__logo a {
  color: #222324;
}
.s-header__menu {
  margin-right: auto;
  flex: 1;
  margin: 0 calc(10px / 2);
}
.s-header__menu:first-of-type {
  flex: 8;
}
@media (max-width: 65em) {
  .s-header__menu {
    display: none;
  }
  .s-header__menu:first-of-type {
    display: initial;
  }
}


/* Main Visual
------------------------------ */
/* MV*/
.mainVisual__img {
  background: #fff url('../img/finx_mv.jpg');
  background-repeat: no-repeat;
}
.mainVisual__keyword {
  color: #fff;
  font-size: 60px;
  text-shadow: 0 0 10px #363c70;
  font-family: 'Sawarabi Gothic';
  -webkit-transform: translateY(-50%)!important;
  -ms-transform: translateY(-50%)!important;
  transform: translateY(-50%)!important;
}
@media (max-width: 65em) {
  .mainVisual__keyword {
    font-size: 36px;
  }
}
@media (max-width: 33.9em) {
  .mainVisual__keyword {
    font-size: 24px;
    font-weight: bold;
  }
}
.scrollButton {
  color: #fff!important;
}


/* About
------------------------------ */
#about {
  margin: 80px 0;
}
@media (max-width: 47.9em) {
  #about {
    margin: 0;
  }
}


/* Profile
------------------------------ */
.profile {
  margin: 0 auto;
  text-align: center;
}
.profile__item {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  width: 50%;
}
.profile table {
  width: 100%;
  margin: 0 auto;
}
.profile th {
  vertical-align: top;
  padding-top: 20px;
  width: 110px;
}
.profile td {
  vertical-align: top;
  padding: 20px 0 0 10px;
}
@media (max-width: 80em) {
  .profile__item {
    width: 70%;
  }
  .profile th {
    width: 20%;
  }
  .profile td {
    width: 80%;
  }
}
@media (max-width: 50em) {
  .profile__item {
    display: block;
    padding-top: 0;
    width: 100%;
  }
  .profile__item:first-of-type {
    padding-top: 0;
  }
  .profile table {
    width: 100%;
  }
}


/* Mail Form
------------------------------ */
.mailForm p {
  color: #fff;
}
.mailForm a:hover {
  background: #aaa;
  border-color: #aaa;
}
.mailForm a:visited {
  background: #fff;
  border-color: #fff;
}
.mailForm__btn {
  background: #fff;
  border-color: #fff;
  color: #222324;
}


/* footer
------------------------------ */
.footer {
  text-align: center;
}
.footer-img {
  width: 100px;
}
@media (max-width: 47.9em) {
  .footer-img {
    width: 80px;
  }
}

/*----------------------------------
  Back To Top
------------------------------------*/
.back-to-top-btn a {
  display: block;
}
.s-back-to-top {
  position: fixed;
  right: 3.125rem;
  bottom: 100%;
  display: block;
  width: 30px;
  height: 48px;
  background: #363c70;
  border-radius: 3.125rem;
  text-align: center;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-back-to-top:before {
  display: block;
  position: relative;
  font-size: 10px;
  font-style: normal;
  font-family: themify;
  top: 0;
  line-height: 48px;
  color: #fff;
  content: "\e627";
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.s-back-to-top:hover:before {
  color: #363c70;
}


/*----------------------------------
  parallax
------------------------------------*/
.parallax_01 {
  background: url(../img/finx_parallax.jpg) 50% center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
@media (max-width: 991px) {
  .parallax_01 {
    background-position: 50% -100px!important;
  }
}


/*----------------------------------
  other
------------------------------------*/
@media (max-width: 991px) {
  .pcOnly {
    display: none;
  }
}
@media (min-width: 650px){
  .spOnly {
    display: none;
  }
}


/*----------------------------------
  animation
------------------------------------*/
/* fade in */
.fadeIn {
  opacity: 0;
  -webkit-transition: 1000ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: 1000ms cubic-bezier(0.694, 0, 0.335, 1);
  -webkit-transform: translateY(40px);
      -ms-transform: translateY(40px);
          transform: translateY(40px);
}

.fadeIn.anim {
  opacity: 1;
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
}