@charset "UTF-8";
/*--------------------------------------------------------------

 ページタイトル

--------------------------------------------------------------*/
.PageTitle {
  height: 50vw;
  max-height: 500px;
}
.PageTitle__left {
  background: url("../img/page-title_pht_main.jpg") no-repeat center top;
  background-size: cover;
}
.PageTitle__right {
  background: #e14e4e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PageTitle__right .flame {
  width: 38vw;
  height: 38vw;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PageTitle__right .flame-inner {
  color: #fff;
  text-align: center;
}
.page-ttl {
  font-size: 5.2vw;
}
@media print, screen and (min-width: 481px) {
  .PageTitle > div {
    width: 50%;
  }
  .PageTitle__right .flame {
    width: 30vw;
    height: 30vw;
  }
  .PageTitle__right .flame-inner {
    letter-spacing: 2px;
  }
  .page-ttl {
    font-size: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .Main__head .PageTitle__right .flame {
    width: 280px;
    height: 280px;
  }
  .Main__head .page-ttl {
    font-size: 3.8rem;
  }
}


/*--------------------------------------------------------------

 コンテンツ

--------------------------------------------------------------*/
.Main__body {
  padding: 3rem 0 4rem;
}
@media print, screen and (min-width: 769px) {.Main__body {
    padding: 5rem 0 8rem;
  }
}

/*--------------------------------------------------------------

 案内文

--------------------------------------------------------------*/
.th-msg p {
  line-height: 1.6;
}
.th-msg p + p {
  margin-top: 1rem;
}
@media print, screen and (min-width: 481px) {
  .TopHeadline {
    text-align: center;
  }
}


/*--------------------------------------------------------------

 メインメニュー

--------------------------------------------------------------*/
.MainNav {
  margin-top: 5rem;
}
.MainNav > nav {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.MainNav__box {
  width: 100%;
  height: 20rem;
  text-align: center;
}
@media print, screen and (min-width: 481px) {
  .MainNav > nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  .MainNav__box {
    width: calc(50% - 1rem);
    max-width: 540px;
    height: 22rem;
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .MainNav__box {
    height: 27rem;
  }
}

/*
 #画像
--------------------------------------------------------------*/
.Contents__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.Contents__inner::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.Contents__inner::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all .5s ease-out;
}
.Contents__inner:hover::after {
  transform: scale(1.1);
}
#message .Contents__inner::before {
  background: rgba(46, 50, 146, .5);
}
#message .Contents__inner::after {
  background-image: url("../img/main-nav_bg_message.jpg");
}
#person .Contents__inner::before {
  background: rgba(244, 133, 0, .5);
}
#person .Contents__inner::after {
  background-image: url("../img/main-nav_bg_person02.jpg");
  background-position: top left;
}
#advantage .Contents__inner::before {
  background: rgba(187, 0, 5, .5);
}
#advantage .Contents__inner::after {
  background-image: url("../img/main-nav_bg_advantage.jpg");
}
#career .Contents__inner::before {
  background: rgba(255, 105, 150, .5);
}
#career .Contents__inner::after {
  background-image: url("../img/main-nav_bg_career.jpg");
}
#information .Contents__inner::before {
  background: rgba(0, 170, 157, .5);
}
#information .Contents__inner::after {
  background-image: url("../img/main-nav_bg_information.jpg");
}

/*
 テキスト
--------------------------------------------------------------*/
.ContentsTitle {
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 2;
}
.contents-ttl {
  font: normal 700 2.6rem 'Roboto Condensed', sans-serif;
  margin-bottom: 1rem;
}
.ContentsTitle .btn-bdrs {
  width: 200px;
}
@media print, screen and (min-width: 481px) {
  .contents-ttl {
    font-size: 3rem;
  }
  .ContentsTitle .btn-bdrs {
    transition: all 0.5s ease;
  }
  .ContentsTitle .btn-bdrs:hover {
    background: rgba(255, 255, 255, .2);
  }
}
@media screen and (min-width: 769px) {
  .contents-ttl {
    font-size: 3.6rem;
    margin-bottom: 2rem;
  }
}