/* =========== 導入企業ロゴ =========== */

.tmsintroduce {
    margin-bottom:100px; 
}
.tmsintroduce .inner {
    width: 100%;
}


.tmsintroduce ul.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 40px;
    gap: 45px;
}

.tmsintroduce ul.logos li {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tmsintroduce ul.logos li img {
    width: 150px;
    height: auto;
    display: inline-block;
}

.tmsintroduce ul.logos li:nth-child(n+7) {
    margin-top: 0;
}

@media screen and (min-width: 768px){
    /* 個別調整 PC */
    ul.logos li.ttdc img {
        width: 70px;
        height: auto;
    }
    ul.logos li.tyd img {
        width: 120px;
        height: auto;
    }
    ul.logos li.mxl img {
        width: 100px;
        height: auto;
    }

}

@media screen and (max-width: 767px) {
    .tmsintroduce ul.logos {
       gap: 2.5rem;
    }
    .tmsintroduce ul.logos li {
        width: 9rem;
    }

    /* 個別調整 SP */
    ul.logos li.ttdc img {
        width: 4rem;
        height: auto;
    }
    ul.logos li.tyd img {
        width: 7rem;
        height: auto;
    }
    ul.logos li.mxl img {
        width: 7rem;
        height: auto;
    }

    .tmssupport-title span {
		font-size: 2.4rem;
	}
}



/* =========== リクルートマネジメントソリューションズだからこそ =========== */

.tmssupport-title span.line1 {
    display: block;
    font-size: 28px;
    font-weight:900;
    text-align: center;
    color:#0070F2;    
    margin:10px;
}

.tmssupport-title span.line1 .dot {
  position: relative;
  display: inline-block;
  font-size: 32px;
  color:#0070F2;
}

.tmssupport-title span.line1 .dot::before {
  content: "● ● ● ● ●";
  position: absolute;
  top: -0.6em;
  left: 0.2em;
  width: 100%;
  font-size: 0.3em;
  letter-spacing: 1.1em;
  text-align: center;
  pointer-events: none;
}


@media screen and (max-width: 767px) {
    .tmssupport-title span.line1 {
        font-size:22px;
    }
    .tmssupport-title span.line1 span.dot {
        font-size:22px;
    }
    .tmssupport-title span.line1 span.wrap {
        white-space:nowrap;
        font-size:22px;
    }
}


/* =========== 人事領域における支援実績 =========== */

.hr-support{
    margin:0 auto;
    width:100%;
    background:#FFF;
    font-weight:700;
    font-size:1.5rem;
    padding:2rem 0;
    
}
.hr-support__title{
    text-align: center;
    margin-bottom:2rem;
    font-size:2.5rem;
}
@media screen and (max-width: 767px) {
    .hr-support__title {
        text-align: left;
        font-size: 1.8rem;
        margin-left:5.5rem;
    }
}

.hr-support_table{
    margin: 0 auto;
    width:95%;
    border:1px solid #D6EFFF;;
}
table{
    border:collapse;
    line-height: 1.2;
}
table tr:first-child th:nth-child(1),
table tr:first-child td:nth-child(1),
table tr:first-child th:nth-child(2),
table tr:first-child td:nth-child(2),
table tr:first-child th:nth-child(3),
table tr:first-child td:nth-child(3) {
    width: 33.333%; 
}
table,th,td{
    padding:0.5rem 3rem;
}
th,td{
    border:1px solid #D6EFFF;
    text-align:center;
    vertical-align: middle; 
    height:40px;
    white-space: nowrap;
}
th{
    background:#D6EFFF;
}
.hr-support__note{
    width:95%;
    margin:10px auto;
    font-size:1rem;
    font-weight: 400;
}
.no-right-border{
    border-right:none !important;
}
.no-left-border{
    border-left:none !important;
}
.white-left-border{
    border-left-color:#FFF !important;
}
.white-right-border{
    border-right-color:#FFF !important;
}
.small-text{
    font-size:1.3rem;
}
.text-size{
    font-size:3rem;
}
.footnote-mark{
    font-size:0.8rem;
    vertical-align:sub;
    position: relative;
      top: -2px;
}
.text-color{
    color:#0070F2;
}
.td-text-r-alignment{
    text-align:center;
    vertical-align:middle;
}
.text-align-content{
    display:inline-block;
    text-align:left;
}


.table-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 5px 0;
    padding-left: 10px;
    text-align: left;
}
.table-text-wrap span:nth-of-type(1) {
    padding-left: 2px;
}


/* =========== ご支援内容の例（前半） =========== */

.tmsfeature-block {
    align-items: flex-start;
}

.tmsfeature-block .label {
    display: inline-block;
    margin: 10px 0 10px 20px;
    padding: 5px 15px;
    background: #1ea7fc;
    color: #ffffff;
}

/* ----- 「導入」ブロック ----- */
.tmsfeature-block .intro-phase {
    --point: 80px;
    --height: 180px;

    background: #ffffff;
    color: #111;
    width: 100%;
    height: var(--height);
    margin: 0 0 20px 0;
    padding: 0 32px;
    box-sizing: border-box;

    clip-path: polygon(
        0 0,
        calc(100% - var(--point)) 0,
        100% 50%,
        calc(100% - var(--point)) 100%,
        0 100%
    );

    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tmsfeature-block .intro-phase .text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.5;
}

.tmsfeature-block .intro-phase .line1 {
    font-size: 16px;
    font-weight: 600;
}

.tmsfeature-block .intro-phase .line2 {
    color:#0070F2;
    font-weight:700;
    font-size :20px;
}

.tmssupport-text{
    text-align:left;
}

.tmsfeature-block .intro-phase .line3 {
    font-size: 14px;
    color: #333;
}

@media (min-width: 768px) and (max-width: 1080px) { /* smallPC調整 */
    .tmsfeature-block .intro-phase .line1 { font-size: 3rem; }
    .tmsfeature-block .intro-phase .line2 { font-size: 3rem; }
    .tmsfeature-block .intro-phase .line3 { font-size: 2rem; }
}

@media screen and (max-width: 767px) { /* SP調整 */
    .tmsfeature-block .intro-phase .line1 { font-size: 1.2rem; }
    .tmsfeature-block .intro-phase .line2 { font-size: 1.6rem; line-height:1.3; }
    .tmsfeature-block .intro-phase .line3 { font-size: 1.1rem; margin-top:10px; }
}

@media screen and (max-width: 767px) { /* SP体裁だけ矢羽根を下向きに変更 */
    .tmsfeature-block .intro-phase-wrap {
        display: flex;
        justify-content: center;
    }

    .tmsfeature-block .intro-phase {
        display:flex;
        width: 45%;
        height: 320px;
        padding: 20px;
        margin:0 10px;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--point)),
            50% 85%,
            0 calc(100% - var(--point))
        );

        justify-content: center;
        text-align: center;
        align-items: flex-start;
    }

    .tmsfeature-block .intro-phase .text-wrap {
        text-align: left;
    }
}

/* ----- 「運用」ブロック ----- */
.tmsfeature-block .operation-phase {
    background: #ffffff;
    color: #111;
    width: 100%;
    height: 380px;
    padding: 0 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.tmsfeature-block .operation-phase li {
    font-size: 20px;
    font-weight: 600;
}
.tmsfeature-block .operation-phase li:first-child {
    margin-bottom: 50px;
}

.tmsfeature-block .operation-phase li p {
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    padding-left: 1.5em;
}

@media (min-width: 768px) and (max-width: 1080px) { /* smallPC調整 */
    .tmsfeature-block .operation-phase li { font-size: 3rem; }
    .tmsfeature-block .operation-phase li p { font-size: 2rem; }
}

@media screen and (max-width: 767px){
    .tmsfeature-block .operation-phase { /* SP調整 */
        width:95%;
        height: auto;
        margin:0 auto;
        padding: 2rem 1.5rem;
    }
    .tmsfeature-block .operation-phase ol .list-title{
        font-size:1.3rem;
    }
    .tmsfeature-block .operation-phase li:first-child {
        margin-bottom: 20px;
    }
    .tmsfeature-block .operation-phase li p { font-size: 1.1rem; }

}

/* =========== ご支援内容の例（後半） =========== */

.tmsfeature-image{
    width:100%;
    margin:0 auto;
}
.tmsfeature-image h3 {
    font-size: 26px;
}
.tmsfeature-image strong {
    display: inline-flex;
    background: #ffdb1a;
    align-items: center;
    padding: 0.1em 3px;
    line-height: 1.0;
}


.tmsfeature-image-item {
    display: flex;
    align-items:center;
    margin:0 auto;
    text-align:center;
    width:90%;
}

.tmsfeature-image-item .image{
    width:80%;
    margin:30px auto;
    padding-right: 40px;
}

.tmsfeature-image .bubble {
    --bg: #fff;
    --shadow: 0 2px 6px rgba(0,0,0,0.12);
    --padding-y: 14px;
    --padding-x: 18px;
    --triangle-w: 12px;
    --triangle-h: 10px;

    position: relative;
    display: inline-block;
    background: var(--bg);
    padding: var(--padding-y) var(--padding-x);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: #111;
    line-height: 1.5;
    width:500px;
    font-weight:700;
    text-align: left;
    line-height: 2;
}

.tmsfeature-image .bubble::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--triangle-w));
    top: 30%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: var(--triangle-h) solid transparent;
    border-bottom: var(--triangle-h) solid transparent;
    border-right: var(--triangle-w) solid var(--bg);
}

.tmsfeature-image .bubble p {
    padding: 20px 0;
}

@media screen and (max-width: 767px) {
    .tmsfeature-image h3{
        width:90%;
        margin:0 auto;
        line-height:2;
        font-size:2rem;
    }
    .tmsfeature-image strong{
        display: inline;
        background: #ffdb1a;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone; /* Safari対応 */
        align-items: center;
        padding: 0.1em 3px;
        line-height: 1.9; 
        padding:2px 3px; 

    }
    .tmsfeature-image-item {
        display:flex;
        flex-direction: column;
    }
    .tmsfeature-image-item .image{
        width:100%;
        margin:30px auto;
        padding:0;
    }
    .tmsfeature-image .bubble {
        width: 100%;
    }

    .tmsfeature-image .bubble::before {
        left: 50%;
        top: calc(-1 * var(--triangle-h));
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: var(--triangle-w) solid transparent;
        border-right: var(--triangle-w) solid transparent;
        border-bottom: var(--triangle-h) solid var(--bg);
        border-top: none;
    }
}