@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
}

@media all and (-ms-high-contrast: none) {
  html, body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  html, body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
.wf-mplus1p {
  font-family: "M PLUS 1p";
}

.container h1,
.main-nav a {
  font-family: "M PLUS 1p", sans-serif;
}

.main-nav a {
  font-size: 1rem;
}

/* ----------------------------------
	#intoro
----------------------------------- */
#intro {
  width: 100%;
  height: 70vh;
  position: relative;
  background: #f5f8fd url("../img/intro-bg2.jpg") center top no-repeat;
  background-size: cover;
}
#intro .intro-info .bnr_misawa {
  width: 150px;
  margin-bottom: 2em;
}
#intro .intro-info .bnr_misawa img {
  border: 1px solid #ccc;
  width: 100%;
  height: auto;
}
#intro .intro-info .bnr_misawa img:hover {
  box-shadow: 1px 1px 5px #ccc;
}
#intro .intro-info h2, #intro .intro-info h3, #intro .intro-info h5 {
  font-family: "M PLUS 1p", sans-serif;
}

@media (min-width: 992px) {
  #intro .intro-info {
    padding-top: 25px;
  }
  #intro .intro-img {
    padding-top: 70px;
  }
}
@media (max-width: 767px) {
  #intro .md-center > div {
    margin: 0 auto;
  }
  #intro .intro-info {
    margin: 0 auto;
    padding-top: 0;
  }
  #intro .intro-info .bnr_misawa {
    width: 30vw;
    margin-bottom: 10vw;
  }
  #intro .intro-info h5 span {
    display: block;
  }
}
@media (min-width: 768px) {
  #intro .intro-info h5 span {
    display: inline-block;
    padding-left: 1em;
  }
}
/* 20px @ 320px increasing to 50px @ 990px */
@media (min-width: 320px) {
  #intro .intro-info h2 {
    font-size: calc(1.25rem + (1vw - 3.2px) * 4.4776);
    letter-spacing: 0.1rem;
  }
  #intro .intro-info h3 {
    font-size: calc(1.0625rem + (1vw - 3.2px) * 1.6418);
  }
  #intro .intro-info h5 {
    font-size: calc(1rem + (1vw - 3.2px) * 0.8955);
  }
}
@media (min-width: 990px) {
  #intro .intro-info h2 {
    font-size: 50px;
  }
  #intro .intro-info h3 {
    font-size: 28px;
  }
  #intro .intro-info h5 {
    font-size: 22px;
  }
}
/* ----------------------------------
	#about
----------------------------------- */
#about .about-content p {
  line-heignt: 1.8;
  font-size: 1.2rem;
}

/* ----------------------------------
	#interview
----------------------------------- */
#interview {
  padding: 80px 0;
}
#interview .staff-img {
  position: relative;
  margin: 0 30px 30px 0;
}
@media (max-width: 375px) {
  #interview .section-header h3 {
    font-size: 28px;
  }
}
#interview p {
  margin: 0 0 20px 0;
}
#interview .staff-img img {
  width: 100%;
  border: 8px solid #fff;
  transition: 0.5s;
}
#interview .staff-img img:hover {
  width: 100%;
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}
#interview .staff-img::after {
  position: absolute;
  right: -31px;
  bottom: -30px;
  width: 90%;
  height: 92%;
  z-index: -1;
  content: "";
  background-color: #ebf1fa;
  transition: 0.5s;
}
#interview .interview-top-read h5 {
  font-weight: 700;
  letter-spacing: 0.2em;
}
#interview .interview-top-read h5 span {
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0;
}
#interview .interview-top-read h5 span:first-child {
  display: block;
  margin-bottom: 1em;
}
#interview .interview-top-read h5 span:nth-of-type(2) {
  display: inline-block;
  padding-left: 20px;
}

/* ----------------------------------
	#title-header
----------------------------------- */
#title-header {
  background-image: linear-gradient(to bottom, rgb(240, 248, 255), rgba(255, 255, 255, 0.8)), url("../img/title-back.jpg");
  background-size: cover;
  padding: 150px 0 80px;
}
@media (max-width: 375px) {
  #title-header {
    padding: 17vw 0 8vw;
  }
  #title-header .section-header h3 {
    font-size: 28px;
    margin-bottom: 0;
  }
}

/* ----------------------------------
	#footer
----------------------------------- */
#footer .footer-top .footer-links ul li {
  padding: 0 0;
}

#footer .footer-top .footer-info h3 {
  font-size: 34px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-family: "M PLUS 1p", sans-serif; /* "Montserrat", sans-serif */
  color: #413e66;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 575px) {
  #footer .footer-top .footer-info h3 {
    font-size: calc(1.8rem + (1vw - 0.64rem) * 0.7143);
  }
}
#footer .footer-top .f-bnr_misawa {
  width: 150px;
}
@media (max-width: 992px) {
  #footer .footer-top .f-bnr_misawa {
    margin-bottom: 2em;
  }
}
@media (max-width: 767px) {
  #footer .footer-top .f-bnr_misawa {
    width: 30vw;
  }
}
#footer .footer-top .f-bnr_misawa img {
  border: 1px solid #ccc;
  width: 100%;
  height: auto;
}
#footer .footer-top .f-bnr_misawa img:hover {
  box-shadow: 1px 1px 5px #ccc;
}

#footer .footer-top .footer-info p {
  font-size: 1rem;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "M PLUS 1p", sans-serif;
  color: #535074;
}

.back-to-top {
  background: #1a5ea8;
}

/* ----------------------------------
	utility style
----------------------------------- */
.btn-basic {
  border: 0;
  border-radius: 3px;
  padding: 8px 30px;
  color: #fff;
  background-color: #1a5ea8;
  transition: all ease-in 0.3s;
}
.btn-basic:hover, .btn-basic:active, .btn-basic:focus {
  color: white;
}
.btn-basic:hover, .btn-basic:active, .btn-basic:focus {
  background-color: #4691e2;
}

.underline {
  background: linear-gradient(transparent 50%, rgba(255, 255, 0, 0.5) 50%);
}