@charset "utf-8";

/*========================================================================*\

$root

\*========================================================================*/

:root {
  --font_h1: 2.8rem;
  --font_h2: 2.4rem;
  --font_h3: 2rem;
  --font_h4: 1.8rem;
  --font_h5: 1.6rem;
  --font_h6: 1.4rem;
}

:root {
  --line-height: 1.8;
}

/*========================================================================*\

$wrapper

\*========================================================================*/

#wrapper {
  overflow: hidden;
}

#Co .sectionInner,
footer #footerInner,
#contactSection .sectionInner {
  padding: 4rem 2rem;
}

#Co .sectionInner p {
  font-size: 1.4rem;
}

/*========================================================================*\

$topmain

\*========================================================================*/

.main_slider div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0;
  z-index: -1;
  position: relative;
  height: 300px;
}

.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}

#topmain .mainInner {
  padding: 5rem 2rem;
}

#topmain .mainInner h2 {
  font-size: 3.5rem;
  margin-bottom: 2rem;
}

#topmain .mainInner img {
  width: 90%;
}

/*========================================================================*\

$TOP共通

\*========================================================================*/

#Co.toppage h3.main_midashi {
  font-size: 3rem;
  margin-bottom: 3rem;
}

#Co.toppage h3.main_midashi img {
  display: block;
  margin-left: 1rem;
  width: 40%;
}

#Co.toppage h4.sub_midashi {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

#Co.toppage .subtitle {
  display: none;
}

/*========================================================================*\

$recruitmentSection

\*========================================================================*/

#recruitmentSection:after {
  height: 30%;
}

#recruitmentSection h3 {
  font-size: 2.5rem;
  margin-bottom: 3rem;
}

#recruitmentSection h3 .midashi::before {
  top: 0;
  left: -30px;
  height: 47px;
  width: 24px;
}

#recruitmentSection h3 .midashi:after {
  top: 0;
  right: -30px;
  height: 47px;
  width: 24px;
}

#recruitmentSection h3 .midashi .yellow::after {
  bottom: -14px;
  height: 16px;
  width: 100%;
}

#recruitmentSection .swiper {
  margin-bottom: 2rem;
}

#recruitmentSection .swiper .swiper-slide {
  padding: 2rem 2rem 3rem 2rem;
}

#recruitmentSection .swiper-slide .box02 .box02Inner {
  width: 100%;
}

#recruitmentSection .swiper-slide .box02 .box02Inner:first-child {
  width: 100%;
  margin-bottom: 2rem;
}

#recruitmentSection .swiper-slide .box02 .box02Inner th {
  text-align: left;
}

#recruitmentSection .box03 li {
  font-size: 1.6rem;
  padding: 1rem 0;
}

#recruitmentSection .box03 li:nth-child(n + 3) {
  margin-top: 1.5rem;
}

#recruitmentSection .badge {
  right: -132px;
  top: 135px;
}

#recruitmentSection .badge img {
  width: 30%;
}

#recruitmentSection .swiper-button-prev::after,
#recruitmentSection .swiper-button-next::after {
  content: none;
}

#recruitmentSection .swiper-pagination {
  display: block; /* PC/タブレット時はページネーションを非表示 */
}

#recruitmentSection .swiper-pagination-bullet-active {
  background: var(--primary-color) !important;
}

#Co.toppage #recruitmentSection .subtitle {
  right: 10px;
  width: 50%;
}

/*========================================================================*\

$featuresSection

\*========================================================================*/

#featuresSection .featuresBox {
  background: url(../images/logomark.png) no-repeat 90% center #ffffff;

  background-size: 50%;
  padding: 2rem;
  margin-bottom: 3rem;
}

#featuresSection .featuresBox.reverse {
  background: url(../images/logomark.png) no-repeat 90% center #ffffff;
  background-size: 50%;
}

#featuresSection .featuresBox .box02Inner:first-child {
  margin-bottom: 2rem;
}

#featuresSection .supplementBox {
  padding: 2rem;
}

#featuresSection .supplementBox .box03Inner:nth-child(n + 3) {
  margin-top: 2rem;
}

#featuresSection .supplementBox h5 {
  font-size: 1.6rem;
}

#featuresSection .supplementBox figure {
  margin-bottom: 1rem;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#featuresSection .supplementBox figure img {
  max-height: auto;
  width: 70%;
  text-align: center;
}

#featuresSection .supplementBox p {
  font-size: 1.2rem;
  line-height: 1.4;
}

#featuresSection .supplementBox p .green {
  font-size: 1.3rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/*========================================================================*\

$messageSection

\*========================================================================*/

#Co #messageSection {
  background: none;
}

#Co #messageSection .messageBox {
  display: block;
}

#Co #messageSection .messageBox .messageBoxInner {
  width: 100%;
}

#Co #messageSection .messageBox .messageBoxInner figure {
  margin-bottom: 2rem;
}

/*========================================================================*\

$resultsSection

\*========================================================================*/

#Co #resultsSection h3 {
  font-size: 3rem;
}

#Co #resultsSection .catch {
  font-size: 1.6rem;
}

#Co #resultsSection .box02 .box02Inner {
  width: 100%;
}

#Co #resultsSection .box02 .box02Inner:nth-child(n + 2) {
  margin-top: 1rem;
}

#Co #resultsSection .box02 .box02Inner .circle {
  width: 40px;
  height: 40px;
}
#Co #resultsSection .box02 .box02Inner .circle img {
  width: 20px;
  height: 20px;
}

#Co #resultsSection .box02 .box02Inner .results_item {
  width: calc(100% - 55px);
}

#Co #resultsSection .box02 .box02Inner dt {
  font-size: 1.4rem;
}

#Co #resultsSection .box02 .box02Inner dd {
  font-size: 1.3rem;
}

#Co #resultsSection .btn a::after {
  width: 20px;
  height: 20px;
}

/*========================================================================*\

$interviewSection

\*========================================================================*/

#Co #interviewSection .box02Inner:nth-child(n + 3) {
  margin-top: 2rem;
}

#Co #interviewSection .box02Inner .ico {
  font-size: 1.1rem;
}

#Co #interviewSection .box02Inner .name {
  font-size: 1.6rem;
}

#Co #interviewSection .box02Inner .honorific {
  font-size: 1.3rem;
}

#Co #interviewSection .box02Inner .ss {
  font-size: 1.2rem;
}

/*========================================================================*\

$numberSection

\*========================================================================*/

#Co #numberSection {
  clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
  background: #e5fbe7;
}
#Co #numberSection .sectionInner {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

#Co #numberSection h3 {
  font-size: 3rem;
  z-index: 10;
  margin-bottom: 2rem;
}

#Co #numberSection .swiper-slide .title {
  font-size: 1.8rem;
  margin-bottom: 3.2rem;
}

#Co #numberSection .swiper-slide .title.ss {
  font-size: 1.6rem;
}

#Co #numberSection .swiper-slide figure {
  height: 120px;
}

#Co #numberSection .swiper-slide .detail {
  font-size: 1.8rem;
}

#Co #numberSection .swiper-slide .detail.ss {
  font-size: 1.6rem;
}

#Co #numberSection .swiper-slide .detail .big {
  font-size: 4rem;
}

#Co #numberSection .swiper-slide .detail.ss .big {
  font-size: 1.8rem;
}

#Co #numberSection .swiper-wrapper {
  transition-timing-function: linear !important;
}

#Co #numberSection .subtitle {
  bottom: 100px;
}

/*========================================================================*\

$companySection

\*========================================================================*/

#Co #companySection .box02Inner {
  padding: 2rem;
}

#Co #companySection .box02Inner:nth-child(n + 2) {
  margin-top: 2rem;
}

#Co #companySection .box02Inner figure {
  margin-bottom: 2rem;
}

#Co #companySection .box02Inner h4 {
  font-size: 2rem;
}

/*========================================================================*\

$descriptionSection

\*========================================================================*/

#Co #descriptionSection .tab-contents-item {
  padding: 2rem;
}

#Co #descriptionSection .tab-btn {
  font-size: 1.8rem;
  padding: 1rem 0;
}

#Co #descriptionSection #tab-contents {
  padding: 2rem;
}

/*========================================================================*\

$contactSection

\*========================================================================*/

#contactSection .subtitle {
  display: none;
}

#contactSection .sectionInner {
  padding: 4rem 2rem;
}

#contactSection .sectionInner h3 {
  font-size: 3rem;
}

#contactSection .sectionInner .catch {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

#contactSection .sectionInner ul {
  display: block;
  padding: 0;
  margin: 0 auto;
}

#contactSection .sectionInner ul::before {
  content: none;
}

#contactSection .sectionInner ul li {
  width: 90%;
  margin: 0 auto;
}

#contactSection .sectionInner ul li:last-child {
  margin: 1rem auto 0 auto;
}

#contactSection .sectionInner ul li a {
  padding: 1.5rem;
  font-size: 1.8rem;
}

#contactSection .sectionInner ul li.tel a {
  font-size: 2rem;
  padding: 1.4rem 2rem;
}

#contactSection .sectionInner ul li.tel a:before {
  width: 24px;
  height: 24px;
}

/*========================================================================*\

$footer

\*========================================================================*/

footer #footerInner {
  padding: 4rem 2rem;
  display: block;
}

footer #footerInner h2 {
  margin-bottom: 1.5rem;
  text-align: center;
}

footer #footerInner .address {
  text-align: center;
  margin-bottom: 1rem;
}

footer #footerInner .btn {
  margin: 0 0 0.5rem 0;
}

/*========================================================================*\

$localmain

\*========================================================================*/

#localmain {
  min-height: 120px;
}

#localmain h2 {
  font-size: 2.8rem;
}

/*========================================================================*\

$contact

\*========================================================================*/

#contact #contactPage .sectionInner h3 {
  font-size: 2.2rem;
}

/*========================================================================*\

$interviewpage

\*========================================================================*/

#localmain.interviemain {
  height: 350px;
}

#localmain.interviemain.interviemain_02 {
  background: url(../interview/img/interview_02_main.jpg) no-repeat center
    center transparent;
  background-size: cover;
}

#localmain.interviemain .itemBox {
  left: -40px;
  bottom: 20px;
}

#localmain.interviemain .itemBox .titleBox p {
  font-size: 1.4rem;
}

#localmain.interviemain .itemBox .profileBox h3 {
  font-size: 1.8rem;
}

#localmain.interviemain .itemBox .profileBox h3 .ss {
  font-size: 1.4rem;
}

#localmain.interviemain .itemBox .profileBox p {
  font-size: 1.3rem;
}

#Co #interviewpage #interviewSection h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

#Co #interviewpage #interviewSection h3 {
  position: relative;
  font-size: 1.8rem;
  margin: 3rem 0 1rem 0 !important;
  padding: 3rem 0 0 0;
}

#Co #interviewpage #interviewSection h3.first {
  margin-top: 0 !important;
  padding: 0;
  border-top: none;
}

#Co #interviewpage #interviewSection h3 .line {
  background: url(../interview/img/line.png) no-repeat left 12px;
  padding: 0 0 0 4rem;
  background-size: 30px;
}

#Co #interviewpage #interviewSection .box02 {
  margin-top: 3rem;
  padding: 3rem 0 0 0;
}

#Co #interviewpage #interviewSection .box02 .box02Inner {
  width: 100%;
}

#Co #interviewpage #interviewSection .box02 .box02Inner:first-child {
  width: 100%;
  margin-bottom: 2rem;
}

#Co #interviewpage #flowSection h2 {
  margin: 0 0 2rem 0 !important;
  font-size: 2.6rem;
}

#Co #interviewpage #flowSection .timelineArea {
  padding: 3rem 2rem;
}

#Co .page .timelineArea dl {
  margin: 0 0 0 6em;
  padding-bottom: 3rem;
}

#Co .page .border-line {
  left: 2.4em;
}

#Co #interviewpage #flowSection .timelineArea dt {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

#Co .page .timelineArea li {
  padding: 0 0 3rem 0;
}

#Co .page .border-line {
  width: 3px;
}

#Co #interviewpage .timelineArea li:after {
  height: 38px;
  width: 70px;
}