@charset "utf-8";

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

$root

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

/* -- 基本 -- */
:root {
  --font-weight: 400;
  --line-height: 2;
  --sans_serif: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --serif: "Noto Serif JP", "Times New Roman", "游明朝", YuMincho,
    "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
  --font-color: #000000;
  --primary-color: #00d910;
  --secondary-color: #ffff00;
  --tertiary-color: #ff1493;
}

/* -- font-size -- */
:root {
  --font_h1: 4rem;
  --font_h2: 3.6rem;
  --font_h3: 3.2rem;
  --font_h4: 2.8rem;
  --font_h5: 2.4rem;
  --font_h6: 2rem;
}

:root {
  --font_xl: 2rem;
  --font_lg: 1.8rem;
  --font: 1.6rem;
  --font_sm: 1.4rem;
  --font_xs: 1.2rem;
}

/* -- inner-padding -- */
:root {
  --ip: 10rem 0;
}

@media screen and (max-width: 1140px) {
  :root {
    --ip: 8rem 0;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --ip: 4rem 2rem;
    --line-height: 1.8;
  }
}

/* -- width -- */
:root {
  --max-width: 1040px;
}

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

$body

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

body,
html {
  height: 100%;
}

html {
  /*scroll-padding-top: 100px;*/
}

body {
  font-family: var(--sans_serif);
  border-top: 10px solid var(--primary-color);
}

#wrapper {
  overflow: hidden;
  position: relative;
}

.green {
  color: var(--primary-color);
}

.yellow {
  color: var(--secondary-color);
}

.pink {
  color: var(--tertiary-color);
}

#Co .sectionInner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10rem 0;
  position: relative;
}

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

$topmain

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

#topmain {
  position: relative;
  width: 100%;
  overflow: hidden;
}

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

.main_slider div.img01 {
  background-image: url(../images/main_01.jpg);
  background-position: center;
}
.main_slider div.img02 {
  background-image: url(../images/main_02.jpg);
  background-position: center;
}
.main_slider div.img03 {
  background-image: url(../images/main_03.jpg);
  background-position: center;
}
.main_slider .slick-dots {
  bottom: 4%;
  z-index: +1;
}

/* ドットのサイズを変更 */
.main_slider .slick-dots li button:before {
  font-size: 12px !important;
}

.main_slider .slick-active button:before {
  color: var(--primary-color) !important;
}

#topmain::before {
  background: rgba(0, 0, 0, 0.2);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

#topmain .mainInner {
  width: 100%;
  margin: 0 auto;
  z-index: 200;
  position: absolute;
  padding: 0 10%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
}

#topmain .mainInner .itemmBox {
  width: 100%;
}

#topmain .mainInner h2 {
  color: #ffffff;
  font-size: 9rem;
  line-height: 1.2;
  margin-bottom: 2rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  #topmain .mainInner h2 {
    font-size: 7rem;
  }
  #topmain .mainInner img {
    width: 80%;
  }
}

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

$TOP共通

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

#Co.toppage h3.main_midashi {
  font-size: 4.5rem;
  margin-bottom: 5rem;
  line-height: 0.8;
}

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

#Co.toppage h4.sub_midashi {
  font-size: 3rem;
  margin-bottom: 2rem;
  padding-left: 2rem;
  border-left: 5px solid var(--primary-color);
  line-height: 1.4;
}

#Co.toppage .subtitle {
  position: absolute;
  right: -56px;
  bottom: 30px;
}

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

$recruitmentSection

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

#recruitmentSection {
  background: var(--primary-color);
  position: relative;
  z-index: 30;
}

#recruitmentSection:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 80%;
  width: 100%;
  display: block;
  background: rgba(0, 148, 11, 0.2);
  z-index: -1;
  clip-path: polygon(10% 100%, 0 0, 100% 0);
}

#recruitmentSection h3 {
  color: #ffffff;
  text-align: center;
  font-size: 4.5rem;
  z-index: 10;
  margin-bottom: 5rem;
}

#recruitmentSection h3 .midashi {
  position: relative;
  z-index: 10;
}

#recruitmentSection h3 .midashi::before {
  position: absolute;
  content: "";
  top: -10px;
  left: -70px;
  height: 94px;
  width: 49px;
  display: block;
  background: url(../images/midashi_l.png);
  background-size: cover;
  z-index: 0;
}

#recruitmentSection h3 .midashi:after {
  position: absolute;
  content: "";
  top: -10px;
  right: -60px;
  height: 94px;
  width: 49px;
  display: block;
  background: url(../images/midashi_r.png);
  background-size: cover;
  z-index: 0;
}

#recruitmentSection h3 .midashi .yellow {
  position: relative;
  z-index: 10;
}

#recruitmentSection h3 .midashi .yellow::after {
  position: absolute;
  content: "";
  bottom: -18px;
  left: 0;
  height: 27px;
  width: 188px;
  display: block;
  background: url(../images/ico_line.png);
  background-size: cover;
  z-index: 0;
}

#recruitmentSection .swiper {
  margin: 0;
  background: #ffffff;
  border-radius: 2rem;
  margin-bottom: 4rem;
}

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

#recruitmentSection .swiper-slide .box02 {
  margin: 0;
}

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

#recruitmentSection .swiper-slide .box02 .box02Inner:first-child {
  width: 45%;
}

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

#recruitmentSection .box03 {
  overflow: visible !important;
}

#recruitmentSection .box03 {
  position: relative;
  z-index: 3;
}

#recruitmentSection .box03 li {
  text-align: center;
  background: var(--secondary-color);
  border-radius: 1rem;
  color: var(--primary-color);
  font-size: 2rem;
  padding: 1rem 0;
  position: relative;
  font-weight: 900;
}

#recruitmentSection .box03 li:after {
  position: absolute;
  content: "";
  top: 5px;
  right: -5px;
  height: 100%;
  width: 100%;
  display: block;
  background: rgba(255, 255, 255, 0.3);
  z-index: -3;
  border-radius: 1rem;
}

#recruitmentSection .badge {
  position: absolute;
  right: -56px;
  top: 185px;
  z-index: 300;
}

@media (min-width: 768px) and (max-width: 1024px) {
  #recruitmentSection .badge {
    position: absolute;
    right: 10px;
  }
}

/* 前へ次への矢印カスタマイズ */
#recruitmentSection .swiper-button-prev,
#recruitmentSection .swiper-button-next {
  height: 50px;
  width: 50px;
}

#recruitmentSection .swiper-button-prev {
  left: -70px;
}

#recruitmentSection .swiper-button-next {
  right: -70px;
}

/* 前へ次への矢印カスタマイズ */
#recruitmentSection .swiper-button-prev::after,
#recruitmentSection .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}

/* 前への矢印カスタマイズ */
#recruitmentSection .swiper-button-prev::after {
  background-image: url(../images/button_prev.png);
}

/* 次への矢印カスタマイズ */
#recruitmentSection .swiper-button-next::after {
  background-image: url(../images/button_next.png);
}

/* 画像サイズ調整 */
#recruitmentSection .swiper-slide img {
  height: auto;
  width: 100%;
}

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

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

$featuresSection

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

#featuresSection {
  background: #f2f2f2;
}

#featuresSection .featuresBox {
  background: url(../images/logomark.png) no-repeat 96% center #ffffff;
  border: 2px solid #000000;
  border-radius: 20px;
  padding: 5rem;
  margin-bottom: 5rem;
}

#featuresSection .featuresBox .box02 {
  margin-bottom: 0;
}

#featuresSection .featuresBox img {
  border-radius: 20px;
}

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

#featuresSection .supplementBox {
  border-radius: 20px;
  padding: 5rem;
  background: #e5fbe7;
}

#featuresSection .supplementBox h5 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

#featuresSection .supplementBox figure {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

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

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

#featuresSection .supplementBox p .green {
  font-size: 1.5rem;
  font-weight: 900;
}

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

$messageSection

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

#Co #messageSection {
  background: url(../images/bg_message.jpg) no-repeat left top;
  background-size: 60%;
}

#Co #messageSection .messageBox {
  display: flex;
  justify-content: flex-end;
}

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

@media (min-width: 768px) and (max-width: 1024px) {
  #Co #messageSection {
    background-size: cover;
  }

  #Co #messageSection .messageBox .messageBoxInner {
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    padding: 5rem;
    border-radius: 20px;
  }
}

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

$resultsSection

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

#Co #resultsSection {
  background: var(--primary-color);
}

#Co #resultsSection h3 {
  color: #ffffff;
  text-align: center;
  font-size: 4.5rem;
  z-index: 10;
  margin-bottom: 0;
}

#Co #resultsSection .catch {
  color: #ffffff;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  font-weight: 900;
}

#Co #resultsSection .box02 .box02Inner {
  background: #ffffff;
  border-radius: 10px;
  padding: 2rem;
  width: 49%;
}

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

#Co #resultsSection .box02 .box02Inner .circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

#Co #resultsSection .box02 .box02Inner dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

#Co #resultsSection .box02 .box02Inner dt {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.4;
}

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

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

#Co #resultsSection .btn a {
  border: 2px solid #ffffff;
  font-size: 1.6rem;
  font-weight: 900;
}

#Co #resultsSection .btn a::after {
  content: ""; /*何も入れない*/
  display: inline-block;
  width: 30px; /*画像の幅*/
  height: 30px; /*画像の高さ*/
  background-image: url(../images/ico_arrow.png);
  background-size: contain;
  vertical-align: middle;
  transform: translateY(-50%) rotate(0);
  border: none;
}

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

$interviewSection

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

#Co #interviewSection .box02Inner figure {
  margin-bottom: 2rem;
  box-shadow: 0px 5px 10px 0px #e6e6e6;
  border-radius: 20px;
}

#Co #interviewSection .box02Inner figure img {
  border-radius: 20px;
}

#Co #interviewSection .box02Inner {
  text-decoration: none;
}

#Co #interviewSection .box02Inner .ico {
  background: #00d8ff;
  color: #ffffff;
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
  padding: 0.2rem 1rem;
  text-align: center;
  font-weight: 900;
  display: inline;
  border-radius: 4px;
}

#Co #interviewSection .box02Inner .ico_hosyo {
  background: #ff5200;
}

#Co #interviewSection .box02Inner .name {
  font-size: 1.8rem;
  font-weight: 900;
  margin: 0;
}

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

#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: 20rem;
  padding-bottom: 20rem;
}

#Co #numberSection h3 {
  font-size: 4.5rem;
  z-index: 10;
  margin-bottom: 3rem;
  text-align: center;
  vertical-align: middle;
}

#Co #numberSection .swiper-slide {
  background: var(--primary-color);
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  border-radius: 20px;
}

#Co #numberSection .swiper-slide .title {
  text-align: center;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 3.2rem;
  line-height: 1.4;
}

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

#Co #numberSection .swiper-slide figure {
  background: #ffffff;
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  height: 150px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#Co #numberSection .swiper-slide figure img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

#Co #numberSection .swiper-slide .detail {
  font-size: 2rem;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  margin: 0;
  line-height: 1;
}

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

#Co #numberSection .swiper-slide .detail .big {
  font-size: 4rem;
  font-family: "Roboto", sans-serif;
}

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

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

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

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

$companySection

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

#Co #companySection {
  background: linear-gradient(
    0deg,
    rgba(242, 242, 242, 1) 50%,
    rgba(255, 255, 255, 1) 50%
  );
}

#Co #companySection .box02Inner {
  background: #ffffff;
  padding: 3rem;
  box-shadow: 0px 5px 10px 0px #e6e6e6;
}

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

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

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

#Co #companySection .box02Inner p {
  line-height: 1.8;
}

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

$descriptionSection

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

#Co #descriptionSection .tab-contents-item {
  display: none;
  background: #ffffff;
  padding: 5rem;
}

#Co #descriptionSection .tab-contents-item table {
  margin: 0;
}

#Co #descriptionSection #tab-menu {
  display: flex;
  justify-content: space-between;
}

#Co #descriptionSection .tab-btn {
  background: rgba(0, 217, 16, 0.2);
  color: var(--primary-color);
  width: 50%;
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  padding: 1.5rem 0;
  border-radius: 20px 20px 0 0;
}

#Co #descriptionSection .tab-btn.active {
  background-color: #00d910;
  color: var(--secondary-color);
}

#Co #descriptionSection .tab-contents-item.active {
  display: block;
}

#Co #descriptionSection #tab-contents {
  background: var(--primary-color);
  padding: 5rem;
}

#Co #descriptionSection #tab-contents td a {
  color: #00a2ff;
}

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

$contactSection

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

#contactSection {
  background: url(../images/bg_contact.jpg) no-repeat center 100%;
  background-size: cover;
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#contactSection .subtitle {
  position: absolute;
  right: -56px;
  bottom: 30px;
}

#contactSection::before {
  background: rgba(0, 0, 0, 0.5);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

#contactSection .sectionInner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 10rem 0;
}

#contactSection .sectionInner h3 {
  font-size: 4.5rem;
  z-index: 10;
  margin-bottom: 0;
  text-align: center;
  color: #ffffff;
}

#contactSection .sectionInner .catch {
  color: #ffffff;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 5rem;
  font-weight: 900;
}

#contactSection .sectionInner ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  position: relative;
  padding: 4rem 0;
}

#contactSection .sectionInner ul::before {
  background: #ffffff;
  width: 1px;
  content: "";
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  z-index: 0;
}

#contactSection .sectionInner ul li {
  width: 35%;
  margin-right: 4%;
}

#contactSection .sectionInner ul li:last-child {
  margin-right: 0;
  margin-left: 4%;
}

#contactSection .sectionInner ul li a {
  border: 2px solid #ffffff;
  padding: 2rem;
  display: block;
  border-radius: 300px;
  text-align: center;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  position: relative;
}

#contactSection .sectionInner ul li a:after {
  border-right: solid 2px #ffffff;
  border-top: solid 2px #ffffff;
  content: "";
  height: 8px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: 0.3s;
  width: 8px;
}

#contactSection .sectionInner ul li.tel a:after {
  content: none;
}

#contactSection .sectionInner ul li a:hover {
  opacity: 0.7;
  transform: translateY(-5px);
}

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

#contactSection .sectionInner ul li.tel a:before {
  content: ""; /*何も入れない*/
  display: inline-block;
  width: 30px; /*画像の幅*/
  height: 30px; /*画像の高さ*/
  background-image: url(../images/ico_tel.png);
  background-size: contain;
  vertical-align: middle;
  margin-right: 0.8rem;
}

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

$footer

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

footer #footerInner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 5rem 0;
  display: flex;
  justify-content: space-between;
}

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

footer #footerInner .address {
  font-size: 1.3rem;
  line-height: 1.3;
}

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

footer #footerInner .btn a {
  width: 250px;
  background: var(--secondary-color);
  color: #000;
  padding: 1.5rem 1rem;
  font-weight: 900;
}

footer #footerInner .btn a:after {
  border-right: solid 2px #000000;
  border-top: solid 2px #000000;
}

footer #footerInner ul {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

footer #footerInner ul li:first-child {
  margin-right: 1rem;
}

footer #footerInner ul li a {
  font-size: 1.3rem;
}

footer #copy {
  background: var(--primary-color);
  text-align: center;
  color: #ffffff;
  padding: 1rem 0;
}

@media screen and (max-width: 1040px) {
  #Co .sectionInner,
  footer #footerInner,
  #contactSection .sectionInner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 8rem 2rem;
    position: relative;
  }
}

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

$localmain

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

#localmain {
  background: #e5fbe7;
  min-height: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#localmain h2 {
  font-size: 3.4rem;
  line-height: 1;
  color: var(--primary-color);
}

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

$contact

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

#contact #contactPage .sectionInner h3 {
  font-size: 3rem;
  margin-bottom: 2rem;
  padding-left: 2rem;
  border-left: 5px solid var(--primary-color);
  line-height: 1.4;
  margin: 0 0 2rem 0 !important;
}

#contact #contactSection .sectionInner {
  opacity: 1;
  z-index: 10;
  display: block;
}

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

$interviewpage

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

#localmain.interviemain {
  background: url(../interview/img/interview_01_main.jpg) no-repeat center
    center transparent;
  background-size: cover;
  height: 650px;
  position: relative;
  margin-left: 15%;
  display: block;
}

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

@media screen and (max-width: 1040px) {
  #localmain.interviemain {
    height: 450px;
  }
}

#localmain.interviemain::before {
  background: rgba(0, 0, 0, 0.2);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

#localmain.interviemain .mainInner {
  width: 100%;
  height: 100%;
  display: block;
}

#localmain.interviemain .itemBox {
  left: -60px;
  position: absolute;
  bottom: 60px;
  width: 100%;
  text-align: left;
  z-index: 1000;
}

#localmain.interviemain .itemBox .profileBox {
  background: #ffffff;
  padding: 20px;
  display: inline-block;
}

#localmain.interviemain .itemBox .titleBox p {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

#localmain.interviemain .itemBox .titleBox h2 {
  margin-bottom: 2rem;
}

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

#localmain.interviemain .itemBox .profileBox h3 .ico_sokuryo {
  color: #00d8ff;
}

#localmain.interviemain .itemBox .profileBox h3 .ico_hosyo {
  color: #ff5200;
}

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

#localmain.interviemain .itemBox .profileBox p {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
}

#Co #interviewpage #pan {
  text-align: right;
}

@media screen and (max-width: 1040px) {
  #Co #interviewpage #pan {
    padding: 1rem 2rem 0 2rem;
  }
}

#Co #interviewpage #interviewSection h3 {
  position: relative;
  font-size: 2.6rem;
  margin: 6rem 0 2rem 0 !important;
  padding: 6rem 0 0 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  border-top: 1px dashed #000000;
}

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

#Co #interviewpage #interviewSection h3 .line {
  position: relative;
  background: url(../interview/img/line.png) no-repeat left 17px;
  padding: 0 0 0 8rem;
  background-size: 60px;
}

#Co #interviewpage #interviewSection p {
  line-height: 1.6;
}

#Co #interviewpage #interviewSection .box02 {
  margin-top: 6rem;
  padding: 6rem 0 0 0;
  border-top: 1px dashed #000000;
}

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

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

#Co #interviewpage #interviewSection .box02 .box02Inner:first-child {
  width: 35%;
}

#Co #interviewpage #flowSection {
  background: #f2f2f2;
}

#Co #interviewpage #flowSection h2 {
  text-align: center;
  margin: 0 0 3rem 0 !important;
  font-size: 3.2rem;
}

#Co #interviewpage #flowSection .timelineArea {
  background: #fff;
  padding: 5rem;
}

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

#Co #interviewpage #flowSection .timelineArea dt {
  font-size: 1.8rem;
  color: var(--primary-color);
}

#Co #interviewpage #flowSection .timelineArea dd {
  line-height: 1.6;
}

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

#Co #interviewpage .timelineArea li:after {
  text-align: center;
  font-weight: 700;
  background: #ffffff;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  width: 112px;
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(1):after {
  content: "08：20";
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(2):after {
  content: "08：45";
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(3):after {
  content: "12：00";
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(4):after {
  content: "13：00";
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(5):after {
  content: "17：00";
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(6):after {
  content: "17：30";
}

#Co #interviewpage .timelineArea.timeline_01 li:nth-child(7):after {
  content: "18：00";
}

#Co #interviewpage .timelineArea.timeline_02 li:nth-child(1):after {
  content: "08：20";
}

#Co #interviewpage .timelineArea.timeline_02 li:nth-child(2):after {
  content: "08：30";
}

#Co #interviewpage .timelineArea.timeline_02 li:nth-child(3):after {
  content: "12：00";
}

#Co #interviewpage .timelineArea.timeline_02 li:nth-child(4):after {
  content: "13：00";
}

#Co #interviewpage .timelineArea.timeline_02 li:nth-child(5):after {
  content: "17：00";
}

#Co #interviewpage .timelineArea.timeline_02 li:nth-child(6):after {
  content: "18：00";
}