@charset "utf-8";

/*------------------------------ 共通 ------------------------------*/
.pc {
  display: none;
}

.invert-btn {
  width: 90%;
  text-align: center;
  max-width: 30.3rem;
  padding: 1.8rem 3.6rem;
}

.set-heading {
  font-size: 2.4rem;
  line-height: 2;
}

.under-btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 6rem;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  z-index: 5;
  transition: .3s;
}

.under-btn.active {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

main {
  padding-top: 8rem;
}

#news,
#business,
#line-up,
#outline,
#contact {
  scroll-margin-top: 80px;
}

/*------------------------------ header ------------------------------*/
header {
  height: 8rem;
  padding: 0 5%;
}

header .menu {
  position: absolute;
  top: 8rem;
  left: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3rem 0;
  width: 100%;
  background-color: #fff;
  padding-bottom: 3.8rem;
  opacity: 0;
  pointer-events: none;
}

/* ハンバーガーメニュークリック後のメニュー */
header .menu.active {
  opacity: 1;
  pointer-events: all;
  transition: .3s;
}

header .menu ul {
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

header .hamburger-menu {
  position: relative;
  width: 5.2rem;
  height: 5.2rem;
  border: transparent;
  transition: .5s;
}

header .hamburger-menu span {
  position: absolute;
  left: 50%;
  /* width: 5.2rem; */
  width: 3.8rem;
  height: 0.2rem;
  background-color: #000;
  transform: translateX(-50%);
  transform-origin: center;
  transition: .5s;
}

header .hamburger-menu span:nth-child(1) {
  top: 1.6rem;
}

header .hamburger-menu span:nth-child(2) {
  top: 2.6rem;
}

header .hamburger-menu span:nth-child(3) {
  top: 3.6rem;
}

/* ハンバーガーメニュークリック後のスタイル */
header .hamburger-menu.active span:nth-child(1) {
  transform: translateX(-50%) rotate(30deg);
  top: 2.6rem;
}

header .hamburger-menu.active span:nth-child(2) {
  opacity: 0;
  transition: none;
}

header .hamburger-menu.active span:nth-child(3) {
  transform: translateX(-50%) rotate(-30deg);
  top: 2.6rem;
}

header .menu .invert-btn {
  background-color: #8B806E;
  color: #fff;
  border: 0.2rem solid #8B806E;
}

header .menu .invert-btn:hover {
  color: #8B806E;
  background-color: #fff;
}

/*------------------------------ hero ------------------------------*/
#top .hero .container {
  display: block;
  position: relative;
}

#top .hero .container .hero-title {
  position: absolute;
  top: 3rem;
  right: 3.6rem;
  z-index: 2;
  text-align: start;
}

#top .hero .container .hero-title h2 {
  letter-spacing: 0.2em;
  text-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.16);
}

#top .hero .container .hero-title h2 .sp {
  display: inline;
}

#top .hero .container .img {
  display: block;
  width: 100%;
  height: calc(100vh - 14rem);
  height: calc(100svh - 14rem);
}

/*------------------------------ news ------------------------------*/
#top .news {
  margin-top: 7.2rem;
}

#top .news .small-inner .news-wrap {
  margin-top: 4rem;
}

#top .news .small-inner .news-wrap .each-news {
  flex-direction: column;
  padding: 1.2rem 0;
  gap: 0.4rem 0;
}

/*------------------------------ business ------------------------------*/
#top .business {
  margin-top: 10rem;
}

#top .business .inner .tab-list {
  height: 6.4rem;
  gap: 0 0.6rem;
}

#top .business .inner .tab-list .tab-item {
  width: calc((100% - 1.2rem) / 3);
}

#top .business .inner .business-main .content {
  flex-direction: column-reverse;
  gap: 2rem 0;
  padding: 2rem 1.6rem;
}

#top .business .inner .business-main .content .text-wrap h3 {
  font-size: 2rem;
  line-height: 2.4;
}

#top .business .inner .business-main .content .text-wrap p {
  margin-top: 1.2rem;
}

#top .business .inner .business-main .content.active .text-wrap .small-text {
  margin-top: 1.8rem;
}

#top .business .inner .business-main .content.active .img {
  width: 100%;
}

/*------------------------------ line-up ------------------------------*/
#top .line-up {
  margin-top: 10rem;
}

#top .line-up .inner .line-up-group {
  gap: 3.1rem 1.4rem;
  margin-top: 4rem;
}

#top .line-up .inner .line-up-group .line-up-card {
  width: calc((100% - 1.4rem) / 2);
}

#top .line-up .inner .line-up-group .line-up-card p:first-of-type {
  font-size: 1.6rem;
  margin-top: 0.6rem;
}

#top .line-up .inner .line-up-group .line-up-card p:nth-of-type(2) {
  margin-top: 0.6rem;
  line-height: 1.667;
}

#top .line-up .inner .line-up-group .line-up-card p:nth-of-type(3) {
  margin-top: 0.6rem;
}

#top .line-up .inner .invert-btn {
  margin-top: 3.2rem;
  width: 100%;
}

/*------------------------------ outline ------------------------------*/
#top .outline {
  margin-top: 10rem;
}

#top .outline .small-inner dl {
  margin-top: 4rem;
}

#top .outline .small-inner dl .company-detail {
  flex-direction: column;
  gap: 0.4rem 0;
  padding: 1.2rem 0;
}

#top .outline .small-inner .google-map {
  margin-top: 1.2rem;
}

/*------------------------------ contact ------------------------------*/
#top .contact {
  margin-top: 10rem;
}

#top .contact .small-inner {
  padding: 4rem 5%;
}

#top .contact .small-inner .contact-form {
  margin-top: 4rem;
}

#top .contact .small-inner .contact-form .dl-wrap dl {
  flex-direction: column;
  gap: .8rem 0;
}

#top .contact .small-inner .contact-form .dl-wrap dl:not(:first-of-type) {
  margin-top: 3.2rem;
}

#top .contact .small-inner .contact-form .privacy-check {
  margin-top: 3.2rem;
}

#top .contact .small-inner .contact-form .invert-btn {
  margin-top: 3.2rem;
}

#top .contact .confirm-modal .small-inner .content {
  padding: 4rem 5%;
}

#top .contact .confirm-modal .small-inner .dl-wrap {
  margin-top: 3rem;
}

#top .contact .confirm-modal .small-inner .dl-wrap dl:not(:first-of-type) {
  margin-top: 1.8rem;
}

#top .contact .confirm-modal .small-inner .dl-wrap dl {
  flex-direction: column;
}

#top .contact .confirm-modal .small-inner .btns p {
  margin-top: 3rem;
  align-items: center;
  flex-direction: column;
}

#top .contact .thanks-modal .small-inner p:first-of-type {
  margin-top: 3rem;
}

#top .contact .thanks-modal .small-inner .close-btn {
  margin-top: 3rem;
}

/*------------------------------ footer ------------------------------*/
footer {
  margin-top: 10rem;
  padding: 3.9rem 0 3.8rem;
}

footer .inner .footer-top {
  flex-direction: column;
  gap: 4rem 0;
}

footer .inner .footer-top .menu {
  flex-direction: column;
}

footer .inner .footer-top .menu ul {
  flex-wrap: wrap;
  width: 100%;
  gap: 3rem 0;
}

footer .inner .footer-top .menu ul li {
  width: 50%;
}

footer .inner .footer-top .menu .invert-btn {
  margin-top: 4rem;
}

footer .inner small {
  margin-top: 10rem;
  text-align: center;
}

/*------------------------------ 404 ------------------------------*/
#not-found {
  padding-top: 16rem;
}