@charset "UTF-8";

/* =====================
  変数
===================== */
:root {
  --header-height: 16vw;
}

/* =====================
  共通
===================== */
.inner {
  padding-inline: 5.33333333vw;
  margin-inline: auto;
}
html,
body {
  font-size: 3.7333333333333334vw;
}

/* =====================
  汎用ボタン
===================== */
.u-anchor {
  display: block;
  width: 15.6vw;
  height: 15.6vw;
  position: relative;
  background-color: rgba(257, 257, 257, 7%);
  border-radius: 50rem;
}
.u-anchor::after {
  content: '';
  display: block;
  position: absolute;
  width: 1.6vw;
  height: 1.6vw;
  border: 2px solid;
  border-color: var(--white) var(--white) transparent transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =====================
  header
===================== */
.header {
  height: var(--header-height);
  background: var(--white);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.32);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}
.header-inner {
  height: inherit;
}
/* ==== ロゴ ==== */
.header-inner .logo {
  height: inherit;
  display: grid;
  place-content: center;
  background-color: var(--white);
  position: absolute;
  left: 3.1vw;
}
.header-inner .logo h1 {
  text-align: center;
}
.header-inner .logo img {
  width: 45.333333333333336vw;
  height: 10.666666666666666vw;
}
.sp-menu {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--red);
  width: 16vw;
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
  gap: 1.33333333vw;
}
.sp-menu::before,
.sp-menu::after {
  display: block;
  margin-inline: auto;
  width: 9.8vw;
  height: 1px;
  background: var(--white);
  border-radius: 50rem;
  transition: all 250ms ease 0s;
}
.sp-menu::before,
.sp-menu::after {
  content: '';
  transition: transform 600ms var(--easeOutQuart) 0ms;
}
.sp-menu::before {
  transform-origin: 0% 100%;
}
.sp-menu::after {
  transform-origin: 40% -80%;
}

html.menu-on {
  overflow: hidden;
  height: 100%;
}
html.menu-on,
body.menu-on {
  overflow: hidden;
  height: 100%;
}

/* ==== ON ==== */
/* .menu-on::after {
  content: '';
  display: block;
  position: fixed;
  z-index: 10;
  background: #00000070;
  inset: 0;
}
.menu-on .sp-menu span {
  width: 0;
  opacity: 0;
}
.menu-on .sp-menu::before {
  position: absolute;
  transform: rotate(45deg) translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.menu-on .sp-menu::after {
  transform: rotate(-45deg);
} */

/* ==== nav ==== */
.header .nav {
  position: absolute;
  top: 0;
  right: 0;
  height: inherit;
  display: none;
}
.header .nav ul {
  display: flex;
  height: inherit;
  gap: 15px;
}
.header .nav ul li {
  position: relative;
  text-align: center;
  width: 100px;
  font-size: 15px;
  height: inherit;
  color: var(--white);
  font-family: var(--mincho);
}
.header .nav ul li a {
  display: grid;
  width: 100%;
  place-content: center;
  height: inherit;
}
.header .nav ul li:last-child {
  background-color: var(--red);
  width: 190px;
}
.header .nav ul li:last-child a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.header .nav ul li:last-child a::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('/assets/image/common/mail.png');
  width: 20px;
  height: 16px;
}

/* =====================
  小見出し
===================== */
.title-wrapper {
  color: var(--white);
  font-family: var(--mincho);
  display: flex;
  flex-direction: column-reverse;
  margin-left: 4vw;
  gap: 5px;
}
.title-wrapper h2 {
  color: var(--white);
  font-size: 3.466666666666667vw;
}
.title-wrapper span {
  display: flex;
  align-items: center;
  font-size: 6.4vw;
  font-weight: 800;
  position: relative;
  white-space: nowrap;
}
.title-wrapper span::before {
  content: '';
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  display: block;
  background: var(--red);
  position: absolute;
  left: -4vw;
}

/* =====================
bread
===================== */
.bread {
  color: var(--white);
  font-size: 2.933333333333333vw;
  font-family: var(--mincho);
  padding-inline: 4.666666666666667vw;
  position: relative;
  z-index: 2;
}
.bread ul li {
  display: inline-block;
}
.bread ul li + li::before {
  content: '›';
  display: inline-block;
  margin-inline: 0.5em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 1.0666666666666667vw;
  height: 1.6vw;
}

/* =====================
  aside
===================== */
.aside {
  padding-block: 15.7vw 19vw;
  position: relative;
  background-image: url('/assets/image/common/contact-bg_2x.png');
  min-height: 113.86666666666666vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
.bg3 {
  pointer-events: none;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  background-color: #f5f2f3;
  width: 100%;
  height: 85.06666666666666vw;
  bottom: 0px;
  clip-path: polygon(0 79.7%, 100% 43.2%, 100% 100%, 0% 100%);
}
/* ==== インナー ==== */
.aside .inner {
  position: relative;
  z-index: 2;
}

/* ==== タイトル ==== */
.aside .title-wrap {
  display: flex;
  flex-direction: column-reverse;
  font-family: var(--mincho);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.aside .title-wrap h2 {
  font-weight: bold;
  font-size: 4vw;
  text-align: center;
  line-height: 1;
}
.aside .title-wrap span {
  text-align: center;
  font-size: 7.733333333333333vw;
  font-weight: 800;
}
.aside .title-wrap .deco {
  font-size: 12vw;
  color: var(--red);
}

/* ==== コンテンツ ==== */
.aside .contact-wrapper {
  margin-inline: auto;
  /* padding: 42px 90px 62px; */
}
.aside .contact-wrapper > p {
  text-align: center;
  line-height: 1.9;
  margin-top: 8.333333vw;
}
.aside .contact-wrapper .form-wrapper {
  width: 80.8vw;
  background-color: var(--red);
  color: var(--white);
  padding-block: 3.7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.333333333333333vw;
  margin-inline: auto;
  margin-top: 5.533333vw;
  font-family: var(--mincho);
  font-size: 4vw;
}

/* =====================
  footer
===================== */
.footer {
  background: #1a1517;
  color: var(--white);
  position: relative;
  z-index: 2;
}

.footer .inner {
  padding-inline: 9.6vw;
  padding-block: 17.6vw 0;
  display: flex;
  flex-direction: column-reverse;
}

/* ==== names ==== */
.footer .names .body h1 {
  font-family: var(--mincho);
  font-size: 40px;
  line-height: 1;
  margin-top: 11.3vw;
}
.footer .names .body h1 img {
  width: 48vw;
  height: 33.46666666666667vw;
  margin-inline: auto;
  display: block;
}
.footer .names .body p {
  margin-bottom: 0.5em;
  font-size: 14px;
  line-height: 1;
}

/* ==== address ==== */
.footer .address {
  margin-top: 8.466667vw;
  font-size: 3.2vw;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ==== menu ==== */
.footer .menu {
  font-size: 15px;
  font-family: var(--mincho);
}
.footer .menu .menu-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.footer .menu .menu-2 {
  opacity: 0.5;
  margin-top: 15.1vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.footer .menu .menu-2 a {
  white-space: nowrap;
}
.footer .menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 14vw 9vw;
  justify-content: flex-start;
}
.footer .menu ul li {
  font-size: 3.7333333333333334vw;
}

/* ==== copy ==== */
.footer .copy {
  display: block;
  text-align: center;
  font-size: 3.2vw;
  opacity: 0.2;
  padding: 7.3vw;
}

/* =====================
  to-top
===================== */
.to-top {
  display: block;
  background-color: var(--grey);
  width: 100%;
  height: 16vw;
  position: relative;
}
.to-top::after {
  content: '';
  display: block;
  position: absolute;
  width: 3.666667vw;
  height: 3.666667vw;
  border: 2px solid;
  border-color: var(--white) var(--white) transparent transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -25%) rotate(-45deg);
}

/* =====================
  main
===================== */
.main {
  min-height: 100vh;
}

/* =====================
  フォームエラー
===================== */
.form-error {
  color: #d00;
  padding-top: 0.5em;
  font-size: 3.2vw;
}
.form-error:empty {
  display: none;
}

/* =====================
  SPmenu
===================== */
.sp-menu-inner {
  position: fixed;
  top: 0;
  left: 100vw;
  background-color: var(--red);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('../image/common/spnav.png');
  width: 100%;
  height: 177.86666666666667vw;
  z-index: 20;
  transition: all 600ms var(--easeOutExpo) 0s;
}
.menu-on .sp-menu-inner {
  left: 0;
}
.sp-menu-contents {
  padding-bottom: 22vw;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
}
.sp-menu-contents .head {
  display: flex;
  padding-block: 3.0666666666666664vw;
  align-items: center;
  justify-content: space-between;
  padding-inline: 3.8666666666666667vw 3.3333333333333335vw;
}
.sp-menu-contents .head .logo-w {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../image/common/logo-w.png');
  width: 44.4vw;
  height: 10.4vw;
}
.sp-menu-contents .head button {
  width: 16vw;
  position: absolute;
  top: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: 8.266666666666666vw;
  background-position: center;
  background-image: url('../image/common/close.png');
}
.sp-menu-contents .body {
  color: white;
  margin-top: 12vw;
  padding: 0 7vw;
}
.sp-menu-contents .body ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.sp-menu-contents .body ul a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 7vw 8vw;
  font-family: var(--mincho);
  width: 100%;
  font-size: 3.7333333333333334vw;
}
.sp-menu-contents .anchor {
  color: white;
  text-align: center;
  margin-top: 8.1vw;
}
.sp-menu-contents .anchor a {
  gap: 2vw;
  display: inline-flex;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  font-size: 3.7333333333333334vw;
  padding: 6.6vw 16.6vw;
  font-family: var(--mincho);
}
.sp-menu-contents .anchor a::before {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../image/common/ml.png');
  width: 4.933333333333334vw;
  height: 3.7333333333333334vw;
}
.sp-menu-contents .foot {
  color: white;
  margin-top: 10.8vw;
}
.sp-menu-contents .foot small {
  font-size: 3.2vw;
  opacity: 0.4;
  text-align: center;
  display: block;
  padding: 4.1vw 0;
}
.sp-menu-contents .foot::before {
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../image/common/img.png');
  width: 100%;
  height: 58.666666666666664vw;
}