a.bg-colorGray {
  transition: opacity .4s ease;
}
a.bg-colorGray:hover {
    opacity: .6;
}
.compo__txtArea.bg-colorGray {
  background-color: #ECE8E6;
  padding: 2em; }
  .compo__txtArea.bg-colorGray .txt-m {
    margin-bottom: 0; }
  .compo__txtArea.bg-colorGray .compo__txtArea__title {
    text-align: center;
    font-size: 31px;
    margin-bottom: .8em; }

.compo01__imgArea {
  max-width: 900px;
  margin-top: 4em; }

.compo__steps {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  width: 100%;
  font-size: 18px; }
  @media only screen and (max-width: 1100px) {
    .compo__steps {
      font-size: 1.6363636364vw; } }
.compo__steps table {
  font-size: 16px; }
  @media only screen and (max-width: 1100px) {
    .compo__steps table {
      font-size: clamp(14px,calc(16vw/11),16px); } }
  .compo__steps .compo__step {
    width: 15.4545%;
    padding: 1em .5em 1em 1em;
    position: relative;
    background-color: #b6e1ff; }
    .compo__steps .compo__step:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 0;
      right: 0;
      width: 13.5%;
      padding-bottom: 118%;
      background: url("../img/compo__step__after.jpg") no-repeat center center/100% 100%;
      margin-right: -13.2620320856%; }
    .compo__steps .compo__step:last-child:after {
      display: none; }

.compo__step__tag {
  text-align: center;
  font-size: 1.0555555556em; }
  .compo__step__tag span {
    color: #fff;
    padding: .3em 1em;
    background: #004a93;
    line-height: 1;
    display: inline-block;
    margin-bottom: .8em; }

.compo__step__txt {
  font-size: 0.9444444444em;
  line-height: 1.7; }

.compo__step__txt__note {
  display: block;
  font-size: 0.7222222222em;
  line-height: 1.3;
  margin-top: 1em; }

.u-cellBgLightBlue {
  background: #e4f2ff; }
.point {
  display: inline-block;
  background: #004a93;
  width: .65em;
  height: .65em;
  border-radius: 50%;
  vertical-align: middle;
  margin: -0.25em 0.35em 0 0;
}
.point02 {
  display: inline-block;
  background: #029c79;
  width: .65em;
  height: .65em;
  border-radius: 50%;
  vertical-align: middle;
  margin: -0.25em 0.35em 0 0;
}

.compo__iconLists {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1em;
}
.compo__iconLists li {
    width: 50px;
    margin: 1em 10px 0 0;
}
.compo__iconLists li img {
  width: 100%;
  height: auto;
}
.compo__iconLists li.is-size-big {
   width: 70px;
}
.u-lineThrough {
  text-decoration: line-through; }

.contentAnchorNav2 {
  margin-top: 30px;
  margin-bottom: auto; }

.l-column.is-2column {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; }
  .l-column.is-2column.u-justifyCenter {
    justify-content: center; }
  .l-column.is-2column > div {
    width: 48%; }
    .l-column.is-2column > div.u-widthFix {
      width: 35%; }
    .l-column.is-2column > div.u-padding {
      padding: 0 1em; }
.l-column + .l-column {
  margin-top: 2em; }

.compo01__imgArea {
  margin-bottom: 3em; }

.compo01__imgArea__inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto; }

.caption.u-taL {
  position: absolute;
  left: 0;
  bottom: -1.5em; }

.caption.u-taR {
  right: 0; }

.compo02__img--l {
  width: 40%;
  float: left; }

.compo__tableArea {
  width: 100%; }

.compo02__tableArea {
  width: 56%;
  float: right; }

.u-cellBgLightBlue {
  background: #e4f2ff; }

table, td, th {
  border: 1px solid #595959;
  border-collapse: collapse; }

table {
  width: 100%;
  margin: 0 auto 30px; }

td, th {
  padding: .3em .5em;
  width: 30px;
  height: 25px; }

th {
  font-weight: normal;
  background: #e4f2ff; }

tr + tr th {
  width: 10%; }

@media only screen and (max-width: 780px) {
  .compo__txtArea.bg-colorGray {
    width: 85%;
    margin: auto; }

  .compo__stepsFrame {
    width: 100vw;
    overflow-x: scroll; }

  .compo__steps {
    justify-content: flex-start;
    max-width: 240vw;
    width: 240vw;
    overflow-x: scroll; }
  .compo__steps table {
    margin-right: 40px; }
    .compo__steps .compo__step {
      width: 16%;
      margin-right: 3%;
      padding-top: 4vw; }
      .compo__steps .compo__step:after {
        width: 6vw;
        padding-bottom: 39.66666vw;
        background: url("../img/compo__step__after.jpg") no-repeat center center/100% 100%;
        margin-right: -5.86vw; } }
      @media only screen and (max-width: 780px) and (max-width: 320px) {
        .compo__steps .compo__step:after {
          padding-bottom: 47.66666vw; } }
@media only screen and (max-width: 780px) {
      .compo__steps .compo__step:last-child {
        margin-right: 4%; }

  .compo__txtArea.icon--scroll {
    position: relative; }
    .compo__txtArea.icon--scroll:before {
      content: "";
      position: absolute;
      z-index: 2;
      display: block;
      top: 3vw;
      right: 2.6875vw;
      width: 12.0625vw;
      height: 12.0625vw;
      background-image: url(/recruit/cooperation/img/icon_swipe.png);
      background-size: 100% 100%; }

  .compo__step__tag {
    font-size: 3vw; }

  .compo__step__txt {
    font-size: 3vw; } }

@media only screen and (max-width: 768px) {
  .contentAnchorNav2 {
    padding: 0; }

  .compo {
    padding: 0 20px; }

  .l-column.is-2column {
    display: block; }
    .l-column.is-2column > div {
      width: 100%; }
      .l-column.is-2column > div.u-widthFix {
        width: 100%; }
      .l-column.is-2column > div.u-padding {
        padding: 0; }

  .compo01__imgArea + .compo01__imgArea {
    margin-top: 2em;
    margin-bottom: 2em; }

  .compo--wrap .compo__inner, .compo--wrap .compo__txtArea {
    padding: 0; }

  .compo02__img--l {
    max-width: 520px;
    margin: 0 auto;
    margin-bottom: 2em;
    width: 100%;
    float: none; }

  .compo02__tableArea {
    width: 100%; }

  .compo02__imgArea {
    padding: 0; }

  .compo02__txtArea, .compo02__upArea {
    padding: 0; } }