:root {
  --font-family-Baskervville: "Baskervville", serif;
  --font-family-NotoSerifJP: "Noto Serif JP", serif;

  --max-width-1920px: 1920px;
  --max-width-1800px: 1800px;
  --max-width-1100px: 1100px;
  --max-width-1000px: 1000px;
  --max-width-785px: 785px;

  font-weight: 300;
  font-size: 10px;
}

/* ボディー */
body {
  background-color: #401c3c;
  font-size: 1.6rem;
  font-family: var(--font-family-NotoSerifJP);
  color: #fff;
  font-weight: 300;
  font-style: normal;
}

img {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

a:hover {
  opacity: 0.5;
  transition: 0.3s;
}
/* 下線 */
.text-under-line {
  text-decoration: underline;
}

/* SP用gnav */
.sp-gmav {
  display: none;
}
/* ヘッダーのナビ部分 */

.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #401c3ccc;
  transition: ease 0.4s;
}

@media screen and (min-width: 919px) {
  .header__nav {
    display: none;
  }
}

.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}

@media screen and (min-width: 919px) {
  .nav-items {
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }
}

/* ナビのリンク */
.nav-items__item a {
  width: 100%;
  display: block;
  margin-bottom: 3.4rem;
  color: #fff;
  text-align: center;
  font-family: var(--font-family-NotoSerifJP);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 919px) {
  .nav-items__item a {
    margin-bottom: 0;
  }
}

/* ハンバーガーメニュー */

.header__hamburger {
  width: 48px;
  height: 100%;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

@media screen and (min-width: 919px) {
  .hamburger {
    display: none;
  }
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  position: relative;
  transition: ease 0.4s;
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}

/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

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

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}

/* ヘッダー */

.header-top {
  background-color: #401c3c;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.header-logo {
  margin: 1rem 4rem;
  width: 7rem;
}

.header-gmav a {
  display: block;
  padding: 3rem 3rem;
  transition: all 0.3s ease;
}

@media only screen and (min-width: 920px) and (max-width: 1130px) {
  .header-gmav a {
    padding: 3rem 1.5rem;
  }
}

.header-gmav a:hover {
  display: block;
  padding: 3rem 3rem;
  background-color: #e8e8e8;
  color: #401c3c;
}
@media only screen and (min-width: 920px) and (max-width: 1105px) {
  .header-gmav a:hover {
    padding: 3rem 1.5rem;
  }
}

.header-top-contants {
  max-width: var(--max-width-1920px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
}

.header-gmav {
  display: flex;
}

.header-gmav a {
  color: #fff;
  text-decoration: none;
}

.header-contents {
  height: fit-content;
  max-width: var(--max-width-1920px);
  margin: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.header-box1 {
  margin-top: 3rem;
  display: flex;
  flex-direction: row-reverse;
}

.header-text1 {
  margin: 10vw 1vw 0vw 5vw;
  width: 40%;
  font-family: var(--font-family-NotoSerifJP);
  font-style: normal;
  font-weight: 300;
}

.header-text1 h1 {
  font-size: 3.6rem;
  margin-bottom: 3rem;
  font-weight: 300;
}

.header-text1 p {
  font-size: 1.4rem;
  line-height: 1.8rem;
}

.header-img1 {
  width: 50vw;
  height: 100%;
}

.header-img1 img {
  width: 100%;
}

.header-box2 {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}

.header-text2 {
  width: fit-content;
  color: #ffffff33;
  text-align: right;
  font-family: var(--font-family-Baskervville);
  font-size: 7vw;
  font-weight: 400;
}

.header-img2 {
  display: flex;
  width: 20vw;
  margin-top: -8rem;
}

.header-img2 img {
  width: 100%;
}

/* フッター */
footer {
  background-color: #00000080;
  margin: auto;
}

.footer-contents {
  margin: 0 auto;
  max-width: var(--max-width-1920px);
  padding: 1rem 1rem;
  display: flex;
  align-items: flex-end;
}

.footer-contents-box {
  margin: 1rem 4rem;
  display: flex;
  align-items: flex-end;
}

.footer-contents-box p {
  margin-right: auto;
}

.footer-contents-logo2 {
  display: flex;
}

.footer-contents-text {
  margin-left: auto;
}

.logo1 {
  margin: 0 4rem;
}

.logo2 {
  margin: 0 4rem;
}

/* タブレット */
@media only screen and (min-width: 391px) and (max-width: 919px) {
  :root {
    font-size: 8.5px;
  }

  .header-logo {
    margin: 0.5rem 2rem;
  }

  .header-top-contants {
    padding: 1rem 0;
  }

  .header-box1 {
    margin-top: 3rem;
    display: block;
  }

  .header-img1 {
    width: 90vw;
    height: 100%;
    margin-top: -5rem;
    margin-left: auto;
  }

  .header-text1 h1 {
    font-size: 2.8rem;
    font-weight: 400;
  }

  .header-text1 {
    margin: 10vw 0;
    width: 87vw;
    margin-left: auto;
    padding-right: 3vw;
  }

  .header-text1 p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem;
  }

  .header-box2 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  .header-img2 {
    width: 75vw;
    height: 100%;
    margin: 0;
    margin-right: auto;
    margin-top: 2rem;
  }

  .header-text2 {
    margin-bottom: 10vw;
    font-size: 9.5vw;
  }

  .header-gmav {
    display: none;
  }

  /* 事業紹介 */
  .about-client-text1 {
    margin: 3rem 0;
  }

  .about-client-box2 {
    justify-content: center;
  }

  .about-contents {
    padding: 20vw 2vw 10vw 2vw;
  }

  .about-contents-text {
    font-size: 1.8rem;
  }

  .about-box1 {
    margin-bottom: 25vw;
  }

  .about-text1 {
    right: 4vw;
    bottom: -28rem;
    line-height: 4rem;
  }

  .about-box2 {
    margin: 0 5vw 3vw 3vw;
  }

  .about-text2 {
    font-size: 1.4rem;
  }

  .about-box3 {
    margin: 35vw 3vw 3vw 0;
  }

  .about-text3 {
    font-size: 1.4rem;
  }

  /* 採用情報 */

  .recruit-catchphrase {
    margin: 5rem 0;
    font-size: 1.6rem;
  }

  .recruit-contents {
    padding: 13vw 4vw;
  }

  .recruit-item {
    width: 25%;
  }

  .recruit-contact {
    margin-top: 6rem;
    font-size: 2.2rem;
  }

  .recruit-contact a {
    padding: 2rem 6rem;
  }

  .recruit-indent {
    padding-left: 2em;
    text-indent: -2em;
  }

  /* 会社概要 */
  .company-item {
    padding-left: 10rem;
  }

  .company-contents {
    padding: 20vw 2vw 2vw 2vw;
  }

  /* グーグルマップ */
  .gmap-contents {
    padding: 2vw 5vw 5vw 5vw;
  }

  .footer-contents {
    margin: 0 auto;
    max-width: var(--max-width-1920px);
    padding: 1rem 1rem;
    display: block;
    align-items: flex-end;
  }

  .footer-contents-box {
    margin: 1rem 4rem;
    display: block;
    align-items: flex-end;
  }

  .footer-contents-box p {
    margin-right: auto;
  }

  .footer-contents-logo2 {
    height: 3rem;
    display: flex;
    justify-content: center;
  }

  .footer-contents-text {
    text-align: end;
  }

  .logo1 {
    margin: 0 auto;
    width: 50rem;
    max-width: 10rem;
    padding-bottom: 2rem;
  }

  .logo2 {
    margin: 0 4rem;
  }

  .logo3 {
    margin: 0 4rem;
  }
}

/* モバイル */
@media only screen and (max-width: 390px) {
  :root {
    font-size: 8px;
  }

  .header-logo {
    margin: 0.5rem 2rem;
  }

  .header-top-contants {
    padding: 1rem 0;
  }

  .header-box1 {
    margin-top: 3rem;
    display: block;
  }

  .header-img1 {
    width: 90vw;
    height: 100%;
    margin-top: 4rem;
    margin-left: auto;
  }

  .header-text1 h1 {
    font-size: 2.4rem;
    font-weight: 400;
  }

  .header-text1 {
    margin: 10vw 0;
    width: 87vw;
    margin-left: auto;
    padding-right: 3vw;
  }

  .header-text1 p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2rem;
  }

  .header-img2 {
    width: 75vw;
    height: 100%;
    margin: 0;
    margin-right: auto;
    margin-top: 2rem;
  }

  .header-box2 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  .header-text2 {
    margin-bottom: 10vw;
    right: 5vw;
    font-size: 9.5vw;
  }

  .header-gmav {
    display: none;
  }

  /* 事業紹介 */
  .about-client-text1 {
    margin: 3rem 0;
  }

  .about-client-box2 {
    justify-content: center;
  }

  .about-contents {
    padding: 10vw 2vw 10vw 2vw;
  }

  .about-contents-text {
    font-size: 1.6rem;
  }

  .about-text1 {
    right: 4vw;
    bottom: -25rem;
    line-height: 3rem;
  }

  .about-box2 {
    margin: 0 5vw 0vw 3vw;
  }

  .about-text2 {
    font-size: 1.4rem;
  }

  .about-box3 {
    margin: 40vw 3vw 0vw 0;
  }

  .about-text3 {
    font-size: 1.4rem;
  }

  /* 採用情報 */

  .recruit-catchphrase {
    margin: 5rem 0;
    font-size: 1.6rem;
  }

  .recruit-contents {
    padding: 20vw 4vw;
  }

  .recruit-item {
    width: 25%;
  }

  .recruit-contact {
    margin-top: 6rem;
    font-size: 2.2rem;
  }

  .recruit-contact a {
    padding: 2rem 6rem;
  }

  .recruit-indent {
    padding-left: 2em;
    text-indent: -2em;
  }

  /* 会社概要 */
  .company-item {
    padding-left: 5rem;
  }

  .company-contents {
    padding: 20vw 2vw 2vw 2vw;
  }

  /* グーグルマップ */
  .gmap-contents {
    padding: 2vw 5vw 5vw 5vw;
  }

  .footer-contents {
    margin: 0 auto;
    max-width: var(--max-width-1920px);
    padding: 1rem 1rem;
    display: block;
    align-items: flex-end;
  }

  .footer-contents-box {
    margin: 1rem 4rem;
    display: block;
    align-items: flex-end;
  }

  .footer-contents-box p {
    margin-right: auto;
  }

  .footer-contents-logo2 {
    display: flex;
    justify-content: center;
  }

  .footer-contents-text {
    text-align: end;
  }

  .logo1 {
    margin: 0 auto;
    width: 50rem;
    max-width: 10rem;
    padding-bottom: 2rem;
  }

  .logo2 {
    margin: 0 4rem;
  }

  .logo3 {
    margin: 0 4rem;
  }
}

/* フォームコンテンツ */
.contact {
  margin-top: 15rem;
}

.success-message-text {
  display: none;
}

.contact-text-box {
  text-align: center;
}

.contact-text-box h1 {
  margin-bottom: 5rem;
  color: #fff;
  text-align: center;
  font-size: 3.6rem;
  font-weight: 700;
  font-family: var(--font-family-RocknRollOne);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-text-box p {
  margin: 2rem 0;
  color: #fff;
  text-align: center;
  font-family: var(--font-family-NotoSerifJP);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: normal;
}

@media only screen and (min-width: 391px) and (max-width: 919px) {
  .contact-text-box h1 {
    margin-bottom: 5rem;
    font-size: 3rem;
  }

  .contact-text-box p {
    margin: 2rem 0;
    font-size: 1.4rem;
  }
}

@media only screen and (max-width: 390px) {
  .contact-text-box h1 {
    margin-bottom: 4rem;
    font-size: 3rem;
  }

  .contact-text-box p {
    margin: 2rem 0;
    font-size: 1.4rem;
  }
}

/* ニュース */
.news {
  text-align: center;
}

.news-to {
  color: #000;
  font-family: var(--font-family-NotoSerifJP);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: end;
  width: fit-content;
}

.news .title {
  position: relative;
}

.news .backtitle {
  position: absolute;
  top: -65%;
  left: 50%;
}

.news-container {
  margin: auto;
  height: auto;
  width: 100%;
  max-width: 1000px;
  min-height: calc(100vh - 350px);
}

.news-contents-box {
  display: block;
  padding: 0 10rem;
}

.news-box {
  display: flex;
  margin: 1rem 0;
  padding: 2rem 1rem;
  align-items: center;
  border-bottom: 1px solid #fff;
}

.news-main {
  display: flex;
}

.news-days-out {
  display: flex;
  margin: 1rem 0;
  padding: 0rem 1rem;
  align-items: center;
}

@media only screen and (min-width: 376px) and (max-width: 650px) {
  .news-box {
    margin: 1rem 0;
  }

  .news-days-out {
    margin: 1rem 0;
  }

  .news-main {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .news-contents-box {
    padding: 0 3rem;
  }
}

@media only screen and (max-width: 375px) {
  .news-box {
    margin: 1rem 0;
  }

  .news-days-out {
    margin: 1rem 0;
  }

  .news-main {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .news-contents-box {
    padding: 0 1rem;
  }
}

.news-days {
  color: #fff;
  font-family: var(--font-family-Montserrat);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  width: 15rem;
}

.news-text {
  color: #fff;
  font-family: var(--font-family-NotoSansJP);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  padding-right: 1rem;
}

.dli-chevron-right {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: 2rem;
  transform: translateX(-25%) rotate(45deg);
}

.dli-chevron-down {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: 2rem;
  transform: translateY(-25%) rotate(135deg);
}

.news-img-box {
  margin: 3rem 0 1rem 0;
  width: fit-content;
  max-width: 100%;
}

.news-img-box img {
  width: auto;
  height: 100%;
  max-width: 100%;
}

.news-text-box {
  margin: 1rem 0 10rem 0;
  color: #fff;
  font-family: var(--font-family-NotoSansJP);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  text-align: start;
}

@media only screen and (min-width: 376px) and (max-width: 650px) {
  .news-img-box {
    margin: 3rem 0 1rem 0;
  }

  .news-text-box {
    margin: 1rem 0 10rem 0;
    font-size: 14px;
  }

  .news-days {
    font-size: 14px;
  }

  .news-text {
    font-size: 14px;
  }
}

@media only screen and (max-width: 375px) {
  .news-img-box {
    margin: 3rem 0 1rem 0;
  }

  .news-text-box {
    margin: 1rem 0 10rem 0;
    font-size: 12px;
  }

  .news-days {
    font-size: 12px;
  }

  .news-text {
    font-size: 12px;
  }
}

.newstlink {
  margin: 4rem 0 10rem 0;
}

.news-return {
  color: #fff;
  font-family: var(--font-family-NotoSansJP);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  margin: 1rem 0 3rem 0;
  text-align: start;
  border-top: 1px solid #fff;
}

.news-return a {
  display: block;
  margin-top: 3rem;
}

@media only screen and (min-width: 376px) and (max-width: 650px) {
  .news-return {
    font-size: 14px;
    margin: 1rem 0 3rem 0;
  }
}

@media only screen and (max-width: 375px) {
  .news-return {
    font-size: 12px;
    margin: 1rem 0 3rem 0;
  }
}

.newstlink a {
  display: block;
  margin-top: 3rem;
}

@media only screen and (min-width: 376px) and (max-width: 650px) {
  .newstlink {
    font-size: 14px;
    margin: 1rem 3rem;
  }
}

@media only screen and (max-width: 375px) {
  .newstlink {
    font-size: 12px;
    margin: 1rem 1rem;
  }
}

.newstlink {
  text-align: center;
  font-size: 2.4rem;
  line-height: normal;
  margin-top: 10rem;
}

.newstlink a {
  padding: 2rem 8rem;
  color: #fff;
  border: 1px solid #fff;
  display: inline-block;
  transition: all 0.3s ease;
}

.newstlink a:hover {
  background-color: #e8e8e8;
  color: #401c3c;
}

@media only screen and (min-width: 376px) and (max-width: 650px) {
  .newstlink {
    margin: 3rem 0;
    font-size: 2.2rem;
  }

  .newstlink a {
    padding: 2rem 6rem;
  }
}

@media only screen and (max-width: 375px) {
  .newstlink {
    margin-top: 6rem;
    font-size: 2.2rem;
  }

  .newstlink a {
    padding: 2rem 6rem;
  }
}