@charset "UTF-8";
/* =====================
  変数
===================== */
:root {
  --header-height: 16vw;
}

/* =====================
  共通
===================== */
html,
body {
  font-size: 3.466666666666667vw;
}
.pc {
  display: none;
}
.inner {
  padding-inline: 5.333333333333333vw;
}
/* =====================
  共通
===================== */
.inner {
  padding-inline: 5.333333333333333vw;
  margin-inline: auto;
}
/* =====================
  h2-title
===================== */
.h2-title {
  position: relative;
}
.h2-title::before {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--blue);
  position: absolute;
  top: 0;
  left: -2.4vw;
}
.h2-title h2 {
  line-height: 2;
  width: fit-content;
  position: relative;
}
.h2-title h2::before {
  content: '';
  display: block;
  width: 2.533333333333333vw;
  height: 2.533333333333333vw;
  border-top: 0.26666666666666666vw solid var(--blue);
  border-right: 0.26666666666666666vw solid var(--blue);
  position: relative;
  top: 0;
  margin-inline: auto -2.533333333333333vw;
}
.h2-title span {
  font-size: 6.933333vw;
  line-height: 1.5;
  display: inline-block;
}
.h2-title span::first-letter {
  color: var(--blue);
}
/* =====================
  h2-title 白
===================== */
.h2-title-w {
  position: relative;
  color: var(--white);
}
.h2-title-w::before {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--white);
  position: absolute;
  top: 0;
  left: -2.4vw;
}
.h2-title-w h2 {
  line-height: 2;
  width: fit-content;
  position: relative;
}
.h2-title-w h2::before {
  content: '';
  display: block;
  width: 2.533333333333333vw;
  height: 2.533333333333333vw;
  border-top: 0.26666666666666666vw solid var(--white);
  border-right: 0.26666666666666666vw solid var(--white);
  position: relative;
  top: 0;
  margin-inline: auto -2.533333333333333vw;
}
.h2-title-w span {
  font-size: 6.933333333333334vw;
  line-height: 1.5;
  display: inline-block;
}
.h2-title-w span::first-letter {
  color: var(--white);
}

/* =====================
  リンクボタン　四角
===================== */
.link-btn {
  border: solid 1px var(--blue);
  width: fit-content;
}
.link-btn a {
  display: block;
  padding-block: 1.8vw;
  padding-inline: 16vw;
}
.link-btn a span {
  font-size: 3.0666666666666664vw;
  line-height: 2.46;
}
/* =====================
  リンクボタン　四角 白
===================== */
.link-btn-w {
  border: solid 1px var(--white);
  width: fit-content;
}
.link-btn-w a {
  display: block;
  padding-block: 1.8vw;
  padding-inline: 16vw;
}
.link-btn-w a span {
  font-size: 3.0666666666666664vw;
  line-height: 2.46;
}
/* =====================
  ヘッダー
===================== */
.header {
  position: absolute;
  width: 100%;
  height: 20vw;
  top: 0;
  padding-top: 2.6666666666666665vw;
  z-index: 8;
}
.header .logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3.3333333333333335vw;
}
.header .logo a picture img {
  width: 48.666666666666664vw;
  height: 12.266666666666666vw;
}
.header .hnav {
  display: none;
}
/* =====================
  SPメニュー
===================== */
/* ==== ボタン ==== */
.sp-menu {
  position: absolute;
  top: 2.6666666666666665vw;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/humberger.png');
  box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.25);
  width: 16vw;
  height: 16vw;
  z-index: 201;
}

/* ==== ナビ ==== */
.sp-nav {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 100%;
  z-index: 202;
  transition: right 600ms var(--easeOutExpo) 0s;
  opacity: 0;
}
body.menu-on .sp-nav {
  opacity: 1;
  right: 0vw;
}
.sp-nav-inner {
  position: relative;
  background-color: rgba(0, 0, 0, 0.9);
  height: 100vh;
  overflow-y: scroll;
}
/* ==== ヘッド ==== */
.sp-nav-inner .head {
  position: relative;
  min-height: 13.333333333333334vw;
  background-color: rgba(0, 0, 0, 0.9);
  top: 4vw;
}
.sp-nav-inner .head .logo {
  position: absolute;
  top: 50%;
  left: 2.6666666666666665vw;
  transform: translateY(-50%);
}
.sp-nav-inner .head .logo a img {
  width: 48.666666666666664vw;
  height: 12.266666666666666vw;
}
.sp-nav-inner .head .close-menu {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/close.png');
  width: 16vw;
  height: 16vw;
  top: 0;
  right: 0;
}

/* ==== 内容 ==== */
.sp-nav-inner .body {
  padding-top: 12.933333333333334vw;
  padding-bottom: 23.333333333333332vw;
  padding-inline: 5.333333333333333vw;
}

.sp-nav-inner .body .fnav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.sp-nav-inner .body .fnav li a {
  display: block;
  width: 100%;
  height: inherit;
  padding-block: 4.266666666666667vw;
}
.sp-nav-inner .body .fnav li a > span {
  font-size: 4.8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-nav-inner .body .fnav li a > span::after {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/arrow_2x.png');
  width: 2.533333333333333vw;
  height: 4.266666666666667vw;
  flex-shrink: 0;
}
.sp-nav-inner .body .link-btn-w {
  margin-top: 17.066666666666666vw;
  margin-inline: auto;
}
/* =====================
  aside
===================== */
.f-contact {
  background-color: var(--blue);
  padding-top: 12.8vw;
  padding-bottom: 17.066666666666666vw;
}
.f-contact .fc-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.f-contact .fc-wrapper .fc-tel {
  font-size: 6.666666666666667vw;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.1333333333333333vw;
  margin-top: 5.693333333333333vw;
}
.f-contact .fc-wrapper .fc-tel::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/icon_tel_w_2x.png');
  width: 4.8vw;
  height: 4.8vw;
}
.f-contact .fc-wrapper .fc-tel-t {
  text-align: center;
  margin-top: 4.266666666666667vw;
}
.f-contact .fc-wrapper .link-btn-w {
  margin-top: 12.8vw;
}
.fc-logo img {
  width: 48.666666666666664vw;
  height: 12.133333333333333vw;
}
/* =====================
  footer
===================== */
.footer {
  padding-top: 12.8vw;
  padding-bottom: 8.533333333333333vw;
}
.footer .fnav-wrap {
  margin-inline: auto;
}
.footer .fnav-wrap .fnav {
  font-size: 3.3333333333333335vw;
  line-height: 2;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(2, 1fr);
  gap: 5.6vw 0;
}
.footer .fnav-wrap .fnav li {
  padding-left: 5.333333333333333vw;
}
.footer .fnav-wrap .fnav li:nth-child(4) {
  grid-row: 4/6;
}
.footer .fnav-wrap .fnav .sp {
  font-size: 3.0666666666666664vw;
  line-height: 2;
  color: rgba(0, 0, 0, 0.3);
}
.footer .foot {
  text-align: center;
  font-size: 2.1333333333333333vw;
  margin-top: 17.066666666666666vw;
}