@charset "UTF-8";
@import '../css/reset.css';
:root {
  --base-vw: 0.0520833333vw;
}

@media (max-width: 768px) {
  :root {
    --base-vw: calc(0.0520833333vw + 0.1vw);
  }
}
* {
  box-sizing: border-box;
}

img {
  margin: 0 auto;
}

a:hover {
  opacity: 0.6;
  transition: 0.3s;
}

main {
  overflow: hidden;
}

section {
  padding: calc(var(--base-vw) * 60) 0 4.1666666667vw;
}
@media (max-width: 768px) {
  section {
    padding: calc(var(--base-vw) * 80) 0 5.2083333333vw;
  }
}
@media (max-width: 480px) {
  section {
    padding: calc(var(--base-vw) * 80) 0 7.2916666667vw;
  }
}

html {
  font-size: 62.5%;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

.btn_icon {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background-image: -moz-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  background-image: -webkit-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  background-image: -ms-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  text-decoration: none;
}
.btn_icon span {
  position: relative;
  padding-left: 30px;
  display: inline-block;
}
.btn_icon span:before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
}
.btn_icon.icon_user_large span:before {
  width: 20px;
  height: 20px;
  background: url(../images/icon_user_large.png) no-repeat center/cover;
}
.btn_icon.icon_mail_large span:before {
  width: 21px;
  height: 17px;
  background: url(../images/icon_mail_large.png) no-repeat center/cover;
}
.btn_icon.icon_exclamation_large span:before {
  width: 27px;
  height: 21px;
  background: url(../images/icon_exclamation_large.png) no-repeat center/cover;
}
.btn_icon.icon_user_small span:before {
  width: 16px;
  height: 16px;
  background: url(../images/icon_user_small.png) no-repeat center/cover;
}
.btn_icon.icon_mail_small span:before {
  width: 18px;
  height: 15px;
  background: url(../images/icon_mail_small.png) no-repeat center/cover;
}
.btn_icon.orange {
  background: #e15b10;
}

/* style.scss */
body {
  height: 100%;
  font-size: calc(var(--base-vw) * 16);
  color: #333;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.6px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-break: normal;
  font-feature-settings: "palt";
  text-rendering: optimizeSpeed;
}
@media (max-width: 768px) {
  body {
    font-size: calc(var(--base-vw) * 16);
  }
  body.active {
    overflow: hidden;
  }
}
@media (max-width: 480px) {
  body {
    font-size: calc(var(--base-vw) * 14);
  }
}

.wrapper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 20px calc(var(--base-vw) * 40);
  background-color: #fff;
  position: fixed;
  align-items: center;
  width: 100%;
  top: 0;
  z-index: 900;
  height: 85px;
}
@media (max-width: 768px) {
  .header {
    height: 65px;
  }
}
@media screen and (max-width: 768px) {
  .header__logo {
    margin: auto;
  }
}
.header__nav {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .header__nav {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    z-index: -100;
    opacity: 0;
    display: block;
    background-color: #fff;
    min-height: 100%;
    padding: 50px 30px;
    overflow-y: scroll;
  }
  .header__nav.active {
    opacity: 1;
    z-index: 900;
    left: 0;
    transition: 0.6s;
  }
}
.header__nav .nav__list {
  display: flex;
  gap: calc(var(--base-vw) * 40);
  margin-right: calc(var(--base-vw) * 50);
}
@media screen and (max-width: 768px) {
  .header__nav .nav__list {
    display: block;
    margin-right: 0;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .header__nav .nav__list li {
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
  }
}
.header__nav .nav__list li a {
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .header__nav .nav__list li a {
    font-size: 18px;
    display: block;
  }
}
@media screen and (max-width: 480px) {
  .header__nav .nav__list li a {
    font-size: 16px;
  }
}
.header__nav .nav__list li:nth-of-type(2) {
  padding-right: 20px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .header__nav .nav__list li:nth-of-type(2) {
    padding-right: 0;
    padding-left: 25px;
  }
}
.header__nav .nav__list li:nth-of-type(2):before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: url(../images/icon_window.png) no-repeat center/cover;
}
@media screen and (max-width: 768px) {
  .header__nav .nav__list li:nth-of-type(2):before {
    right: auto;
    left: 0;
    bottom: 10px;
  }
}
.header__nav .header__btn {
  margin-left: calc(var(--base-vw) * 30);
  background-image: -moz-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  background-image: -webkit-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  background-image: -ms-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  padding: calc(var(--base-vw) * 10) calc(var(--base-vw) * 30);
  border-radius: 6px;
}
@media screen and (max-width: 768px) {
  .header__nav .header__btn {
    display: block;
    background: none;
    padding: 0;
  }
}
.header__nav .header__btn a {
  color: #fff;
  background: none;
  display: inline-block;
  padding: 0 0 0 25px;
  background: none;
  width: auto;
  max-width: inherit;
}
@media screen and (max-width: 768px) {
  .header__nav .header__btn a {
    display: block;
    padding: 20px 10px;
    background-image: -moz-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
    background-image: -webkit-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
    background-image: -ms-linear-gradient(8deg, rgb(16, 109, 182) 0%, rgb(40, 150, 200) 100%);
  }
}
.header__nav .header__btn a:before {
  left: 0;
}
.header__nav .header__btn a:nth-of-type(1) {
  position: relative;
  padding-left: 0;
  padding-right: calc(var(--base-vw) * 20);
}
@media screen and (max-width: 768px) {
  .header__nav .header__btn a:nth-of-type(1) {
    background: #e15b10;
    margin-bottom: 20px;
  }
}
.header__nav .header__btn a:nth-of-type(1):after {
  content: "";
  position: absolute;
  right: calc(var(--base-vw) * -3);
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .header__nav .header__btn a:nth-of-type(1):after {
    display: none;
  }
}
.header__nav .header__btn a span::before {
  left: 0;
}
.header__tel {
  width: calc(var(--base-vw) * 165);
}
@media screen and (max-width: 768px) {
  .header__tel {
    width: auto;
    padding: 0 50px;
    margin-bottom: 30px;
  }
}
.header .hamburger {
  display: none;
}
@media screen and (max-width: 768px) {
  .header .hamburger {
    display: block;
  }
}
.header .hamburger .hamburger__line {
  width: 25px;
  height: 2px;
  background: #000;
  margin: 5px 0;
}

.header_btn {
  margin: calc(var(--base-vw) * 50) 0 calc(var(--base-vw) * 50);
}
@media screen and (max-width: 768px) {
  .header_btn {
    margin: 0;
  }
}
.header_btn a {
  padding: 20px 0;
}
.header_btn a::before {
  width: 30px;
  height: 30px;
}

.scroll-target::before {
  content: "";
  display: block;
  height: 85px; /* ヘッダーの高さに合わせて調整 */
  margin-top: -85px; /* ヘッダーの高さに合わせて調整 */
  visibility: hidden; /* 見えないようにする */
}
@media screen and (max-width: 480px) {
  .scroll-target::before {
    height: 100px;
    margin-top: -100px;
  }
}

.header_mobile_btn {
  position: absolute;
  right: 20px;
  top: 21px;
}
@media (max-width: 1050px) {
  .header_mobile_btn {
    top: 16px;
  }
}
.header_mobile_btn .hamburger {
  width: 32px;
  height: 20px;
  position: relative;
  transition: 0.5s; /* 追記 */
}
.header_mobile_btn .hamburger span {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: 0.5s; /* 追記 */
}
.header_mobile_btn .hamburger span:first-of-type { /* ハンバーガーメニューの1番目の線 */
  top: 0;
}
.header_mobile_btn .hamburger span:nth-of-type(2) { /* ハンバーガーメニューの2番目の線 */
  top: 50%;
}
.header_mobile_btn .hamburger span:last-of-type { /* ハンバーガーメニューの3番目の線 */
  top: 100%;
}
.header_mobile_btn .hamburger.active { /* 追記 */
  transform: rotateY(360deg); /* 追記 */
}
.header_mobile_btn .hamburger.active span:first-of-type { /* ハンバーガーメニューの1番目の線 */
  top: 50%;
  transform: rotate(45deg);
}
.header_mobile_btn .hamburger.active span:nth-of-type(2) { /* ハンバーガーメニューの2番目の線 */
  opacity: 0; /* 透明にする */
}
.header_mobile_btn .hamburger.active span:last-of-type { /* ハンバーガーメニューの3番目の線 */
  top: 50%;
  transform: rotate(-45deg);
}

.fv {
  height: calc(100vh - 85px);
  background: url("../images/fv_bg.jpg") no-repeat center/cover;
  text-align: center;
  font-weight: 900;
  overflow: hidden;
  margin-top: 85px;
  padding: 0;
}
@media (max-width: 768px) {
  .fv {
    margin-top: 65px;
    height: calc(100vh - 65px);
  }
}
.fv .wrapper {
  display: grid;
  place-items: center;
  height: calc(100vh - 85px);
}
@media (max-width: 768px) {
  .fv .wrapper {
    height: calc(100vh - 65px);
  }
}
.fv__content__title {
  text-shadow: 1px 1px 10px white, 0 0 5em white, 0 0 0.2em white;
}
@media (max-width: 768px) {
  .fv__content__title {
    padding: 0 calc(var(--base-vw) * 40);
  }
}
.fv__content__title h1 {
  display: inline-block;
  margin-bottom: calc(var(--base-vw) * 80);
  position: relative;
}
.fv__content__title h1:before, .fv__content__title h1:after {
  content: "";
  position: absolute;
  mix-blend-mode: color-burn;
}
.fv__content__title h1:before {
  width: 131px;
  height: 127px;
  left: -140px;
  top: -80px;
  background: url(../images/fv_img_left.png) no-repeat center/cover;
}
@media (max-width: 768px) {
  .fv__content__title h1:before {
    width: 103px;
    height: 99px;
    left: -43px;
    top: -127px;
  }
}
.fv__content__title h1:after {
  width: 66px;
  height: 66px;
  right: -70px;
  bottom: -70px;
  background: url(../images/fv_img_right.png) no-repeat center/cover;
}
@media (max-width: 768px) {
  .fv__content__title h1:after {
    width: 54px;
    height: 56px;
    right: -43px;
    bottom: -51px;
  }
}
.fv__content__btn {
  display: flex;
  align-items: center;
  max-width: 700px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .fv__content__btn {
    display: block;
  }
  .fv__content__btn a:nth-of-type(1) {
    margin-bottom: 20px;
  }
}

.concept {
  padding: calc(var(--base-vw) * 170) 0 0;
  text-align: center;
  font-weight: 600;
  line-height: 2.4;
}
.concept p {
  font-size: calc(var(--base-vw) * 28);
  margin-bottom: calc(var(--base-vw) * 120);
}
@media (max-width: 768px) {
  .concept p {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .concept p {
    font-size: 18px;
  }
}
@media (max-width: 400px) {
  .concept p {
    font-size: 16px;
  }
}

.services {
  padding: calc(var(--base-vw) * 130) 0 calc(var(--base-vw) * 130);
  background: #f7f7f7;
  overflow: hidden;
  background: linear-gradient(180deg, #d6e4ef 0%, #d6e4ef 30%, #f4f4f4 30%, #f4f4f4 100%);
}
@media screen and (max-width: 480px) {
  .services {
    padding-top: calc(var(--base-vw) * 180);
    background: linear-gradient(180deg, #d6e4ef 0%, #d6e4ef 60%, #f4f4f4 60%, #f4f4f4 100%);
  }
}
.services__list {
  display: flex;
  justify-content: space-around;
  gap: calc(var(--base-vw) * 80);
  margin-bottom: calc(var(--base-vw) * 120);
}
@media screen and (max-width: 800px) {
  .services__list {
    gap: calc(var(--base-vw) * 20);
  }
}
@media screen and (max-width: 600px) {
  .services__list {
    display: block;
    margin-bottom: 50px;
  }
}
.services__list li {
  width: 100%;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  border: 5px solid #1270b7;
  padding: calc(var(--base-vw) * 120) 20px calc(var(--base-vw) * 50);
  position: relative;
}
@media screen and (max-width: 600px) {
  .services__list li {
    margin: 0 auto 50px;
    max-width: 400px;
  }
}
.services__list li .services__list__number {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -33px;
}
@media screen and (max-width: 768px) {
  .services__list li .services__list__number {
    max-width: 70px;
    top: -26px;
  }
}
.services__list li h3 {
  font-size: calc(var(--base-vw) * 28);
  font-weight: 700;
  margin: calc(var(--base-vw) * 50) 0 calc(var(--base-vw) * 20);
}
@media screen and (max-width: 768px) {
  .services__list li h3 {
    font-size: 28px;
  }
}
@media screen and (max-width: 480px) {
  .services__list li h3 {
    font-size: 22px;
  }
}
@media screen and (max-width: 768px) {
  .services__list li p {
    font-size: 20px;
  }
}
@media screen and (max-width: 480px) {
  .services__list li p {
    font-size: 16px;
  }
}
.services__bnr {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 80px;
}
@media (max-width: 768px) {
  .services__bnr {
    display: block;
  }
}
@media (max-width: 768px) {
  .services__bnr_left {
    margin-bottom: 30px;
  }
}

.company {
  padding: calc(var(--base-vw) * 100) 0;
  text-align: center;
}
.company__balloon {
  position: relative;
  display: inline-block;
  background: #9d9d9d;
  border-radius: 6px;
  padding: 16px 20px;
  color: #fff;
  margin-bottom: calc(var(--base-vw) * 50);
  font-weight: 500;
}
.company__balloon:before {
  content: "";
  /* borderで三角形を作る */
  border-width: 10px;
  border-style: solid;
  border-color: #9d9d9d transparent transparent transparent;
  /* 配置する */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .company__balloon_txt span {
    font-size: 18px;
  }
  .company__balloon_txt span .sp {
    display: none;
  }
}
@media (max-width: 480px) {
  .company__balloon_txt span {
    font-size: 16px;
  }
  .company__balloon_txt span .sp {
    display: block;
  }
}
.company__info {
  margin-top: calc(var(--base-vw) * 80);
}
.company__info h2 {
  color: #fff;
  font-size: calc(var(--base-vw) * 32);
  font-weight: 600;
  padding: calc(var(--base-vw) * 40) calc(var(--base-vw) * 20);
  background: #1270b7;
  line-height: 1.2;
  border-radius: 24px 24px 0 0;
}
@media (max-width: 768px) {
  .company__info h2 {
    font-size: 32px;
    border-radius: 12px 12px 0 0;
  }
}
@media (max-width: 480px) {
  .company__info h2 {
    font-size: 24px;
  }
}
.company__info__flex {
  display: flex;
  justify-content: space-between;
  background: #f4f8fb;
  border-radius: 0 0 24px 24px;
  padding: calc(var(--base-vw) * 70) 20px;
}
@media (max-width: 768px) {
  .company__info__flex {
    border-radius: 0 0 12px 12px;
    display: block;
  }
}
.company__info__flex table {
  width: 48%;
}
@media (max-width: 768px) {
  .company__info__flex table {
    width: 100%;
  }
}
.company__info__flex table th, .company__info__flex table td {
  vertical-align: middle;
  padding: calc(var(--base-vw) * 20) calc(var(--base-vw) * 10);
}
@media (max-width: 480px) {
  .company__info__flex table th, .company__info__flex table td {
    display: block;
  }
}
.company__info__flex table th {
  width: 25%;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid #333;
}
@media (max-width: 768px) {
  .company__info__flex table th {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .company__info__flex table th {
    width: 100%;
    font-size: 16px;
    border-bottom: none;
    background: #efefef;
  }
}
.company__info__flex table td {
  font-weight: 500;
  text-align: left;
  padding-left: calc(var(--base-vw) * 20);
}
@media (max-width: 768px) {
  .company__info__flex table td {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .company__info__flex table td {
    background: #fff;
    font-size: 14px;
  }
}

.map {
  padding: 0;
  line-height: 0;
}
.map iframe {
  width: 100%;
  height: 600px;
}
@media (max-width: 768px) {
  .map iframe {
    height: 360px;
  }
}
@media (max-width: 480px) {
  .map iframe {
    height: 260px;
  }
}

.footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
.footer p {
  font-size: calc(var(--base-vw) * 14);
  font-weight: 400;
}

#page-top {
  position: fixed;
  right: 20px;
  bottom: 20vh;
  z-index: 700;
  transform: translateY(100px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: none;
  z-index: 800;
}
@media (max-width: 768px) {
  #page-top {
    right: calc(var(--base-vw) * 20);
  }
}
#page-top a {
  position: relative;
  display: block;
  text-align: center;
  width: calc(var(--base-vw) * 48);
  height: calc(var(--base-vw) * 48);
}
@media (max-width: 1050px) {
  #page-top a {
    width: 42px;
    height: 42px;
  }
}

.scroll_up {
  transition: 1.2s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.scroll_up2 {
  transition: 1.6s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.scroll_up3 {
  transition: 1.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.scroll_up.on,
.scroll_up2.on,
.scroll_up3.on {
  transform: translateY(0);
  opacity: 1;
}/*# sourceMappingURL=style.css.map */