/*
	詳しくしりたい/調査活動編
*/

/*----------------------------------------
	メリット
----------------------------------------*/
.bg_color_blue h3 {
  text-align: center;
}

.bg_color_blue h3 span{
  font-size: 1.8rem;
}

.bg_color_blue h4 {
  text-align: center;
}

.bg_color_blue h4 span{
  font-size: 1.6rem;
}

.merit_type_list {
  margin-top: -20px;
}

.merit_type_item,
.merit_type_item2 {
  margin: 55px auto 0px;
}

.merit_type_data,
.merit_type_data2 {
  margin: 20px 10%;
}

.merit_type_data dt {
  font-weight: bold;
  font-size: 2rem;
  color: #fff;
}

.merit_type_data2 dt {
  font-weight: bold;
  font-size: 2rem;
  color: #504949;
}

.merit_type_data dd,
.merit_type_data2 dd {
  margin-top: 10px;
  margin-left: 0;
  line-height: 1.4;
  font-size: 1.6rem;
  color: #504949;
}

.merit_type_data img,
.merit_type_data2 img {
  width: 100%;
  float: initial;
  margin: 0 0 10px 0;
}

.merit_type_thumb {
  margin-top: 5px;
}

.link-area {
  margin-top: 10px;
  font-size: 1.6rem;
}

.area {
  margin-top: 20px;
  padding: 0 10px 0 10px;
  font-size: 1.6rem;
  color: #707070;
}

.paragraph {
  margin-top: 10px;
}

.read-area .q_bold {
  font-size: 2.5rem;
  color: #095ca8;
  font-weight: bold;
}

h3 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #707070;
}

.read-area .answer span {
  background-color: #8ed1fc;
}

.graph,
.graphs {
  background-color: #fff;
}

.graph img,
.graphs img {
  padding: 10px;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 8px 5px;
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  background: #d5d5d5;
  border: 1px solid #f5f5f5;
}

th.empty {
  background: 0 0;
  border: none;
}

th.highlight {
  background: #5ebbf1;
}

td {
  padding: 8px 5px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.6;
  border: 1px solid #f5f5f5;
  background: #fff;
}

td.highlight {
  background: #b8e1f9;
}

td .red {
  color: #095ca8;
}

.title-area p span {
  color: #095ca8;
  font-weight: 700;
}
.link-area {
  margin-top: 48px;
  text-align: center;
}

.link-area a {
  margin-top: 16px;
  display: block;
}

.link-area p span {
  font-weight: 700;
  color: #095ca8;
}

.contract-area {
  background: #f5f5f5;
  padding: 24px 48px;
  margin-top: 48px;
}

.contract-area .title {
  text-align: center;
  margin-bottom: 24px;
  font-weight: 700;
}

.m-illustration img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.m-cast {
  position: relative;
}

.read-area {
  margin-bottom: 48px;
}

.read-area p span {
  font-weight: 700;
  color: #095ca8;
}

.illustration {
  display: none;
}

.illustration img {
  display: none;
}

.m-cast .link-area .btn {
  width: 100%;
}

.m-cast .link-area img {
  width: 25px;
  margin-right: 10px;
}

.m-cast .comment {
  font-size: 1rem;
}

.workstyleAbout .title-area,
.m-cast .read-area {
  text-align: center;
  margin-top: 50px;
}

.workstyleIntroduction .graph,
.graph-area .graph1,
.graph-area .graph2 {
  padding: 20px;
  border: 2px solid #44aeea;
  border-radius: 8px;
}

.question {
  text-decoration: underline;
  text-decoration-color: #095ca8;
}

.btn_enter:active {
  transform: translateY(6px);
  box-shadow: none;
}

@media screen and (min-width: 400px) {
  .m-cast .link-area .btn {
    width: 350px;
  }
}

/************** media ******************/
@media screen and (min-width: 768px) {
  .bg_color_blue h3 span{
    font-size: 2.5rem;
  }
  
  .bg_color_blue h4 span{
    font-size: 2rem;
  }

  .merit_type_data,
  .merit_type_data2 {
    display: inline-block;
  }

  .merit_type_data img,
  .merit_type_data2 img {
    max-width: 340px;
    float: left;
    margin: 0 10px 10px 0;
  }

  .merit_type_data dt,
  .merit_type_data2 dt {
    font-size: 3rem;
  }

  .merit_type_data dd,
  .merit_type_data2 dd  {
    line-height: 1.3;
    font-size: 2rem;
  }

  .area {
    font-size: 2rem;
  }

  .graph img,
  .graphs img {
    display: block;
    margin: auto;
    padding: 10px;
    height: 400px;
    width: auto;
  }

  .schedule img {
    height: 250px;
  }

  .m-illustration img {
    width: 100%;
    height: 360px;
    object-fit: cover;
  }

  .m-cast .link-area .btn {
    width: 450px;
  }

  .m-cast .comment {
    font-size: 1.5rem;
  }

  .workstyleAbout .title-area,
  .m-cast .read-area {
    text-align: center;
    margin-top: 50px;
    font-size: 2.5rem;
  }

  .btn_enter:active {
    transform: translateY(0.3vw);
    box-shadow: none;
  }
}

@media screen and (min-width: 1024px) {
  .illustration {
    display: block;
    position: absolute;
    top: 0;
    right: 5px;
    text-align: right;
    width: 130px;
  }
  
  .illustration img {
    display: block;
  }
}