@charset "UTF-8";

img {
  max-width: 100%;
}
.wrapper {
  width: 100%;
  /* max-width: 96rem; */
  margin: 0 auto;
}


/* ----- 
main_contents
----- */
#main_contents {
  margin-top: 13.2rem;
  margin-bottom: 18.29rem;
}
.main_visual {
  position: relative;
  margin-bottom: 6.9rem;
}
.filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40.9rem;
  background-color: #868686;
  opacity: 0.54;
}
.main_visual_size {
  width: 100%;
  height: 40.9rem;
  object-fit: cover;
  vertical-align: bottom;
  object-position: bottom;
}
.catch_copy_area {
  position: absolute;
  top: 8.4rem;
  left: 80.1rem;
}
.catch_copy {
  font-size: 3.6rem;
  font-weight: var(--extra-bold);
  line-height: 1.42857142857em;
  font-family: var(--NotoSerif);
  color: #FFFFFF;
  z-index: 10;
}
.comment {
  font-size: 1.8rem;
  font-weight: var(--medium);
  line-height: 2.25em;
  font-family: var(--NotoSerif);
  color: #3C3C3C;
}
.img_box {
  position: relative;
  /* width: 21.3rem; */
  /* height: 21.2rem; */
  margin-right: 4rem;
}
.border_box {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 23rem;
  height: 23rem;
  border: solid 0.2rem #EBB91B;
  /* margin-right: 4rem; */
}
.img_size {
  position: absolute;
  top: 4rem;
  /* right: -4rem; */
  width: 23rem;
  left: 4rem;
  object-fit: cover;
  vertical-align: bottom;
  background-color: gray; /* 画像サイズ確認用 */
  aspect-ratio: 1;
}
/* コメントエリア(上段) */
.comment_area01 {
  display: flex;
  height: auto;
  justify-content: space-between;
  margin: 0 auto 14rem;
  max-width: 96rem;
}
.text_box01 {
  width: 48rem;
  height: auto;
}
/* コメントエリア(中段) */
.comment_area02 {
  display: flex;
  flex-direction: row-reverse;
  height: auto;
  justify-content: space-between;
  margin: 0 auto 14rem;
  max-width: 96rem;
}
.text_box02 {
  width: 36.7rem;
  height: auto;
}
/* コメントエリア(下段) */
.comment_area03 {
  display: flex;
  height: auto;
  justify-content: space-between;
  margin: 0 14.6rem 0 13rem;
}
.text_box03 {
  width: 48rem;
  height: auto;
}

/* -----
company_philosophy(企業理念)
----- */
/* lead(導く) */
/* promise(約束) */
/* evaluation(評価) */
#company_philosophy {
  margin-bottom: 11.45rem;
  text-align: center;
}
.bg_philosophy {
  width: 52.248rem;
  height: 6.186rem;
  margin: 0 auto 6.03rem;
  color: #FFFFFF;
  background-color: #3C3C3C;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0.3rem 0.9rem #00000029;
}
.three_philosophy {
  font-size: 2.6rem;
  font-weight: var(--bold);
  line-height: 1.34615384615em;
  font-family: var(--NotoSerif);
}
.pc_lead_three {
  position: relative;
  width: 54.6rem;
  height: 49.6rem;
  text-align: left;
  margin: 0 auto 6.07rem;
}
.circle {
  width: 25.8rem;
  height: 25.8rem;
  border-radius: 50%;
  background-color: #E67F12;
  box-shadow: inset 0.9rem 0.9rem 0.9rem #00000029;
}
.circle:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 14.4rem;
}
.circle:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  left: 0;
}
.circle:nth-of-type(3) {
  position: absolute;
  bottom: 0;
  right: 0;
}
.lead {
  display: inline-block;
  font-size: 2rem;
  font-weight: var(--medium);
  line-height: 1.35em;
  font-family: var(--NotoSerif);
  color: #FFFFFF;
}
.text_position01 {
  position: absolute;
  top: 7.2rem;
  left: 6.9rem;
  width: 12rem;
}
.text_position02 {
  position: absolute;
  top: 7.4rem;
  left: 4.3rem;
  width: 16rem;
}
.text_position03 {
  position: absolute;
  top: 6.9rem;
  left: 5.4rem;
  width: 16rem;
}
.promise_area {
  position: relative;
  width: 59.8rem;
  height: 5.3rem;
  margin: 0 auto 9.63rem;
  border-bottom: 0.3rem solid #EBB91B;
  border-right: 0.9rem solid #EBB91B;
}
.pc_promise {
  position: absolute;
  top: 0.567rem;
  left: 0;
  display: inline-block;
  font-size: 2.5rem;
  font-weight: var(--medium);
  line-height: 1.44em;
  font-family: var(--NotoSans);
  white-space: nowrap;
  color: #3C3C3C;
}

.evaluation_area {
  position: relative;
  display: inline-block;
  width: 47.05rem;
  text-align: left;
  padding-bottom: 0.65rem;
  margin-bottom: 4.0rem;
  overflow: hidden;
}
.evaluation_area::before,
.evaluation_area::after {
  content: "";
  position: absolute;
  height: 0.2rem;
  background-color: #3C3C3C;
}
.evaluation_area::before {
  width: 47.05rem;
  bottom: 0;
  left: 0;
  transform: scale(1,1);
  transform-origin: right top;
}
.evaluation_area:hover::before {
  animation: arrow-anim1 0.6s ease-in-out;
}
@keyframes arrow-anim1 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.evaluation_area::after {
  width: 2.34561461455rem;
  bottom: 0;
  right: 0;
  transform: rotate(45deg) scale(1,1);
  transform-origin: right top;
  transition: transform 0.2s ease-in-out;
}
.evaluation_area:hover:after {
  animation: arrow-anim2 0.4s 0.4s ease-in-out;
}
@keyframes arrow-anim2 {
  0% {
    bottom: 1.8rem;
    right: -0.9rem;
    transform-origin: left top;
    transform: rotate(45deg) scale(1,1)
  }
  50% {
    bottom: 1.8rem;
    right: -0.9rem;
    transform-origin: left top;
    transform: rotate(45deg) scale(0,1);
  }
  51% {
    bottom: 0;
    right: 0;
    transform-origin: right top;
    transform: rotate(45deg) scale(0,1);
  }
  100% {
    transform: rotate(45deg) scale(1,1)
  }
}
.evaluation {
  display: inline-block;
  width: 42.8rem;
  font-size: 2.1rem;
  font-weight: var(--regular);
  line-height: 1.75em;
  font-family: var(--NotoSans);
  margin-left: 0.15rem;
  color: #3C3C3C;
}
.pdf {
  display: inline-block;
  width: 3.7rem;
  position: absolute;
  top: 0.8rem;
  font-size: 2rem;
  font-weight: var(--regular);
  line-height: 2em;
  font-family: var(--NotoSans);
  margin-left: 1.4rem;
  color: #3C3C3C;
}

/* -----
blog
----- */
#blog {
  margin-bottom: 11.02rem;
  text-align: center;
}
.blog_title {
  display: inline-block;
  font-size: 3.5rem;
  font-weight: var(--bold);
  font-family: var(--NotoSans);
  color: #3C3C3C;
  margin-bottom: 3.45rem;
}
.blog_article {
  display: flex;
  flex-wrap: wrap;
  width: 65rem;
  margin: 0 auto 8.03rem;
}

.blog_container{
  display: flex;
  border-bottom: 0.1rem solid #3C3C3C;
  gap: 2rem;
  width: 100%;
  padding: 3rem 1rem;
}

.date {
  /* width: 11rem; */
  text-align: left;
  font-size: 1.3rem;
  font-weight: var(--regular);
  font-family: var(--NotoSans);
  color: #3C3C3C;
  /* border-top: 0.1rem solid #3C3C3C; */
  /* padding: 2.85rem 0 4.25rem 0.3rem; */
  flex-shrink: 0;
}
.article_title {
  width: 39rem;
  text-align: left;
  font-size: 2rem;
  font-weight: var(--regular);
  font-family: var(--NotoSans);
  overflow-wrap: break-word;
  color: #3C3C3C;
  /* border-top: 0.1rem solid #3C3C3C; */
  /* padding: 2.35rem 0 3.75rem 0.3rem; */
}
.date:nth-last-of-type(1),
.article_title:nth-last-of-type(1) {
  /* border-bottom: 0.1rem solid #3C3C3C; */
}
.blog_link_area {
  display: inline-block;
  position: relative;
  width: 18.95rem;
  height: 4.083rem;
  text-align: left;
  overflow: hidden;
}
.blog_link_area::before,
.blog_link_area::after {
  content: "";
  position: absolute;
  height: 0.2rem;
  background-color: #3C3C3C;
}
.blog_link_area::before {
  width: 18.95rem;
  bottom: 0;
  left: 0;
  transform: scale(1,1);
  transform-origin: right top;
}
.blog_link_area:hover::before {
  animation: arrow-anim3 0.6s ease-in-out;
}
@keyframes arrow-anim3 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  51% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.blog_link_area::after {
  width: 2.34561461455rem;
  bottom: 0;
  right: 0;
  transform: rotate(45deg) scale(1,1);
  transform-origin: right top;
  transition: transform 0.2s ease-in-out;
}
.blog_link_area:hover:after {
  animation: arrow-anim4 0.4s 0.4s ease-in-out;
}
@keyframes arrow-anim4 {
  0% {
    bottom: 1.8rem;
    right: -0.9rem;
    transform-origin: left top;
    transform: rotate(45deg) scale(1,1)
  }
  50% {
    bottom: 1.8rem;
    right: -0.9rem;
    transform-origin: left top;
    transform: rotate(45deg) scale(0,1);
  }
  51% {
    bottom: 0;
    right: 0;
    transform-origin: right top;
    transform: rotate(45deg) scale(0,1);
  }
  100% {
    transform: rotate(45deg) scale(1,1)
  }
}
.blog_link {
  font-size: 2.2rem;
  font-weight: var(--regular);
  line-height: 1.2;
  font-family: var(--NotoSans);
  color: #3C3C3C;
}

/* -----
related_company(関連企業)
----- */
#related_company {
  text-align: center;
  margin-bottom: 11rem;
}
.related_company_title {
  display: inline-block;
  font-size: 4rem;
  font-weight: var(--regular);
  font-family: var(--NotoSans);
  margin-bottom: 3.5rem;
  color: #3C3C3C;
}
/* slick-slider */
.slider_img {
  width: 37.5rem;
  height: 15.7rem;
  object-fit: cover;
  vertical-align: bottom;
  margin: 0 1.25rem;
}
.slider_img2 {
  width: 37.5rem;
  height: 15.7rem;
  object-fit: cover;
  vertical-align: bottom;
  margin: 0 1.25rem;
  border: #707070 solid 0.1rem;
}
.slick-dotted.slick-slider {
  margin-bottom: 2.4rem;
}
.slick-dots {
  bottom: -5rem;
  text-align: unset;
}
.slick-dots li {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 0.8rem;
}
.slick-dots li button {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
}
.slick-dots li button:before {
  font-family: unset;
  font-size: 0;
  line-height: 0;
  width: 2.4rem;
  height: 2.4rem;
  content: "";
  border: 0.1rem solid;
  border-radius: 50%;
  text-align: unset;
  opacity: 1;
  color: #707070;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #707070;
  background-color: #8C8C8C;
}

/* 追加 */
.article_title a{
color: #3c3c3c;
}

/* 修正 */
.text_box03 {
  /* width: 33.6rem; */
}

@media screen and (max-width: 699.98px) {
  .wrapper {
    width: 100%;
    /* max-width: 37.5rem; */
    margin: 0 auto;
  }
  
  /* ----- 
  main_contents
  ----- */
  #main_contents {
    margin-top: 5rem;
    margin-bottom: 7rem;
  }
  .main_visual {
    position: relative;
    margin-bottom: 7rem;
    background-color: #868686;
  }
  .filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 21rem;
    background-color: #868686;
    opacity: 0.54;
  }
  .main_visual_size {
    width: 100%;
    height: 21rem;
    object-fit: cover;
    vertical-align: bottom;
    object-position: bottom;
  }
  .catch_copy_area {
    position: absolute;
    top: 7.07rem;
    left: 15.3rem;
  }
  .catch_copy {
    font-size: 1.8rem;
    font-weight: var(--extra-bold);
    line-height: 1.66666666667em;
    font-family: var(--NotoSerif);
    color: #FFFFFF;
    z-index: 10;
  }
  .comment {
    font-size: 1.5rem;
    font-weight:  var(--regular);
    line-height: 1.92307692308em;
    font-family: var(--NotoSerif);
    color: #3C3C3C;
  }
  .img_box {
    position: relative;
    /* width: 21.3rem; */
    /* height: 21.2rem; */
    /* margin-left: 1.1rem; */
    align-self: center;
  }
  /* コメントエリア(上段) */
  .comment_area01 {
    /* display: inline-block; */
    height: auto;
    justify-content: unset;
    margin: 0 3rem 10rem;
    flex-direction: column;
  }
  /* コメントエリア(中段) */
  .comment_area02 {
    /* display: inline-block; */
    flex-direction: column;
    height: auto;
    justify-content: unset;
    margin: 0 3rem 10rem;
  }
  /* コメントエリア(下段) */
  .comment_area03 {
    display: inline-block;
    height: auto;
    justify-content: unset;
    margin: 0 6.9rem 0 7rem;
  }
  .text_box01,
  .text_box02,
  .text_box03 {
    width: 100%;
    height: auto;
    padding-bottom: 7rem;
  }
  
  /* -----
  company_philosophy(企業理念)
  ----- */
  #company_philosophy {
    margin-bottom: 7.01rem;
    text-align: center;
  }
  .bg_philosophy {
    width: 25.98rem;
    height: 4.186rem;
    margin: 0 auto 4.08rem;
    color: #FFFFFF;
    background-color: #3C3C3C;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .three_philosophy {
    font-size: 1.3rem;
    font-weight: var(--bold);
    line-height: 1.30769230769em;
    font-family: var(--NotoSerif);
  }
  .sp_lead_three {
    height: auto;
    text-align: left;
    margin: 0 3rem 4rem;
  }
  .lead {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: var(--bold);
    line-height: 2.25em;
    font-family: var(--NotoSerif);
    color: #E67F12;
  }
  .lead:nth-of-type(1) {
    /* width: 24.7rem; */
    padding-bottom: 4rem;
  }
  .lead:nth-of-type(2) {
    /* width: 27.3rem; */
    padding-bottom: 4rem;
  }
  .lead:nth-of-type(3) {
    /* width: 27.3rem; */
  }
  .text_indent {
    text-indent: -1em;
    padding-left: 1em;
  }
  .promise_area {
    width: 21.8rem;
    height: 5.201rem;
    text-align: center;
    margin: 0 auto 4rem;
    border-bottom: 0.3rem solid #EBB91B;
    border-right: none;
  }
  .sp_promise {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: var(--bold);
    line-height: 1.66666666667em;
    font-family: var(--NotoSerif);
    white-space: nowrap;
    color: #3C3C3C;
  }
  .evaluation_area {
    position: relative;
    display: inline-block;
    width: 20.286rem;
    padding-bottom: 0.6rem;
    margin-left: unset;
    overflow: hidden;
  }
  .evaluation_area::before,
  .evaluation_area::after {
    content: "";
    position: absolute;
    height: 0.1rem;
    background-color: #3C3C3C;
  }
  .evaluation_area::before {
    width: 20.286rem;
    bottom: 0;
    right: 0;
    transform: scale(1,1);
    transform-origin: right top;
  }
  .evaluation_area:hover::before {
    animation: arrow-anim1 0.6s ease-in-out;
  }
  @keyframes arrow-anim1 {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(100%);
    }
    51% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  .evaluation_area::after {
    width: 2.445584412275rem;
    bottom: 0;
    right: 0;
    transform: rotate(45deg) scale(1,1);
    transform-origin: right top;
    transition: transform 0.2s ease-in-out;
  }
  .evaluation_area:hover:after {
    animation: arrow-anim2 0.4s 0.4s ease-in-out;
  }
  @keyframes arrow-anim2 {
    0% {
      bottom: 1.8rem;
      right: -0.9rem;
      transform-origin: left top;
      transform: rotate(45deg) scale(1,1)
    }
    50% {
      bottom: 1.8rem;
      right: -0.9rem;
      transform-origin: left top;
      transform: rotate(45deg) scale(0,1);
    }
    51% {
      bottom: 0;
      right: 0;
      transform-origin: right top;
      transform: rotate(45deg) scale(0,1);
    }
    100% {
      transform: rotate(45deg) scale(1,1)
    }
  }
  .evaluation {
    display: inline-block;
    width: 13rem;
    font-size: 1rem;
    font-weight: var(--regular);
    line-height: 1.7em;
    font-family: var(--NotoSans);
    color: #3C3C3C;
  }
  .pdf {
    display: inline-block;
    position: absolute;
    top: 0.75rem;
    font-size: 1.5rem;
    font-weight: var(--regular);
    line-height: 1.4em;
    font-family: var(--NotoSans);
    margin-left: 0.95rem;
    color: #3C3C3C;
  }
  
  /* -----
  blog
  ----- */
  #blog {
    margin-bottom: 7.09rem;
    text-align: center;
  }
  .blog_title {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: var(--bold);
    font-family: var(--NotoSans);
    width: 25.95rem;
    margin: 0 5.75rem 4rem;
    text-align: left;
  }

  .blog_container{padding: 2rem 1rem;}

  .blog_article {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 4.01rem;
    padding: 0 3rem;
  }
  .date {
    /* width: 10.8rem; */
    text-align: left;
    font-size: 1.4rem;
    font-weight: var(--regular);
    line-height: 1.9em;
    font-family: var(--NotoSans);
    /* border-top: 0.1rem solid #3C3C3C; */
    /* padding: 0.95rem 0 0.95rem 1.9rem; */
  }
  .article_title {
    /* width: 15.15rem; */
    text-align: left;
    font-size: 1.4rem;
    font-weight: var(--regular);
    line-height: 1.58333333333em;
    font-family: var(--NotoSans);
    overflow-wrap: break-word;
    /* border-top: 0.1rem solid #3C3C3C; */
    /* padding: 0.95rem 0 0.95rem 0; */
  }
  .date:nth-last-of-type(1),
  .article_title:nth-last-of-type(1) {
    /* border-bottom: 0.1rem solid #3C3C3C; */
  }
  .blog_link_area {
    display: inline-block;
    position: relative;
    width: 10.457rem;
    height: 2.283rem;
    text-align: left;
    overflow: hidden;
  }
  .blog_link {
    font-size: 1.3rem;
    font-weight: var(--regular);
    line-height: 1.46153846154em;
    font-family: var(--NotoSans);
    color: #3C3C3C;
  }
  .blog_link_area::before,
  .blog_link_area::after {
    content: "";
    position: absolute;
    height: 0.1rem;
    background-color: #3C3C3C;
  }
  .blog_link_area::before {
    width: 10.457rem;
    bottom: 0;
    left: 0;
    transform: scale(1,1);
    transform-origin: right top;
  }
  .evaluation_area:hover::before {
    animation: arrow-anim3 0.6s ease-in-out;
  }
  @keyframes arrow-anim3 {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(100%);
    }
    51% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  .blog_link_area::after {
    width: 1.31421356237rem;
    bottom: 0;
    right: 0;
    transform: rotate(45deg) scale(1,1);
    transform-origin: right top;
    transition: transform 0.2s ease-in-out;
  }
  .blog_link_area:hover:after {
    animation: arrow-anim4 0.4s 0.4s ease-in-out;
  }
  @keyframes arrow-anim4 {
    0% {
      bottom: 1rem;
      right: -0.5rem;
      transform-origin: left top;
      transform: rotate(45deg) scale(1,1)
    }
    50% {
      bottom: 1rem;
      right: -0.5rem;
      transform-origin: left top;
      transform: rotate(45deg) scale(0,1);
    }
    51% {
      bottom: 0;
      right: 0;
      transform-origin: right top;
      transform: rotate(45deg) scale(0,1);
    }
    100% {
      transform: rotate(45deg) scale(1,1)
    }
  }

  /* -----
  related_company(関連企業)
  ----- */
  #related_company {
    text-align: center;
    margin-bottom: 7rem;
  }
  .related_company_title {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: var(--regular);
    font-family: var(--NotoSans);
    margin-bottom: 3.96rem;
    color: #3C3C3C;
  }
  /* slick-slider */
.slider_img {
  width: 37.5rem;
  height: 15.7rem;
  object-fit: cover;
  vertical-align: bottom;
  margin: 0 1.25rem;
}
.slider_img2 {
  width: 37.5rem;
  height: 15.7rem;
  object-fit: cover;
  vertical-align: bottom;
  margin: 0 1.25rem;
  border: none;
}
  .slick-dotted.slick-slider {
    margin-bottom: 2rem;
  }
  .slick-dots {
    bottom: -3.1rem;
  }
  .slick-dots li {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 0.3rem;
  }
  .slick-dots li button {
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
  }
  .slick-dots li button:before {
    width: 0.9rem;
    height: 0.9rem;
  }
}