@charset "utf-8";
/* CSS Document */

/* ==============================
  共通
============================== */
/* タイトル */
.sec-title h2 {
    font-weight: 700;
    color: #0153FF;
}
.sec-title h3 {
    font-weight: 700;
    line-height: 1.3;
}

/* ==============================
    FVアニメーション
============================== */
/*main {
    padding-top: 0;
}*/
#fv {
    position: relative;
    overflow: hidden;
}

.anime-wrapper {
    position: relative;
}

.anime-item {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.anime-img {
    display: block;
    width: 100%;
}

/* 初期状態：画面外に配置、非表示 */
.anime-img.anime-01 {
    transform: translate(-10%, 5%);
    opacity: 0;
    animation: slideUpRight 0.6s cubic-bezier(0.2, 0.93, 0.48, 1) 0.4s forwards;
}
.anime-img.anime-02 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(10%, -3%);
    opacity: 0;
    animation: slideDownLeft 0.6s cubic-bezier(0.2, 0.93, 0.48, 1) 0.6s forwards;
}

/* 左から右へスライドイン */
@keyframes slideUpRight {
    from {
        /* 左下 - X軸で-100%（左外）、Y軸で100%（下外） */
        transform: translate(-10%, 5%); 
        opacity: 0;
        filter: blur(5px) drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.3));
    }
    to {
        /* 中央 - 元の位置へ */
        transform: translate(0, 0); 
        opacity: 1;
        filter: blur(0) drop-shadow(0 0 0 transparent);
    }
}

/* 右から左へスライドイン */
@keyframes slideDownLeft {
    from {
        /* 右上 - X軸で100%（右外）、Y軸で-100%（上外） */
        transform: translate(10%, -3%);
        opacity: 0;
        filter: blur(5px) drop-shadow(-5px 5px 2px rgba(0, 0, 0, 0.3));
    }
    to {
        /* 中央 - 元の位置へ */
        transform: translate(0, 0); 
        opacity: 1;
        filter: blur(0) drop-shadow(0 0 0 transparent);
    }
}

/* FV テキスト */
#fv .text-wrapper {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    padding: 2.9% 0 3.1%;
}

#fv .text-wrapper h2 {
    width: 14.1%;
}
#fv .text-wrapper p {
    font-size: min(1.4vw, 1.8rem);
    margin: 0 6.5% 0 5.7%;
    line-height: 1.9;
}

#fv .text-wrapper .btns {
    width: 20%;
}
#fv .text-wrapper .btns .btn + .btn {
    margin: 7.8% 0 0;
}
#fv .text-wrapper .btn.bg-black a {
    display: block;
    background-color: #FFF;
    width: 100%;
    color: #000;
    border-radius: 3.125vw;
    font-size: min(1.25vw, 1.9rem);
    padding: 7.4% 3.9% 7%;
    background-repeat: no-repeat;
    background-position: left 3.9% center;
    background-size: 16.1% auto;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    border: none;
    transition: 2s;
}
#fv .text-wrapper .btn.bg-black a:hover {
    border: none;
    opacity: .7;
}
#fv .text-wrapper .btn.icn-contact a {
    background-image: url(../common/images/icn-contact.svg?20251123);
}
#fv .text-wrapper .btn.icn-dl a {
    background-image: url(../common/images/icn-dl.svg?20251123);
}
#fv .text-wrapper .btn.bg-black a::before {
    display: none;
}
@media print, screen and (max-width: 1799px) {
    #fv .text-wrapper .btn.bg-black a {
        font-size: min(1.25vw, 1.6rem);
    }
}
@media print, screen and (max-width: 768px) {
    main {
        background: initial;
        padding-top: 16vw;
    }
    .anime-wrapper {
        /*padding: 14.4vw 0 18.667vw;*/
        height: 60vh;
    }
    .anime-item {
        width: 95%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #fv .text-wrapper {
        flex-direction: column;
        padding: 10.2vw 4.42vw 12.48vw 4.5vw;
    }

    #fv .text-wrapper h2 {
        width: 46.3vw;
    }
    #fv .text-wrapper p {
        margin: 6.4vw 0 0;
        font-size: 4.02vw;
    }
    #fv .text-wrapper .btns {
        margin: 8.72vw 0 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #fv .text-wrapper .btns .btn {
        width: 44.29vw;
    }
    #fv .text-wrapper .btns .btn + .btn {
        margin: 0;
    }
    #fv .text-wrapper .btn.icn-contact a,
    #fv .text-wrapper .btn.icn-dl a {
        font-size: 3.2vw;
        background-size: 10.07vw auto;
        padding: 0;
        min-height: 13.42vw;
        box-sizing: border-box;
        border-radius: 40px;
    }
    #fv .text-wrapper .btn.icn-contact a {
        padding: 4.8vw 8vw 4.8vw 16.1vw;
    }
    #fv .text-wrapper .btn.icn-dl a {
        padding: 2vw 8.7vw 2.4vw 15.43vw;
    }
}


/* ==============================
    ABOUT
============================== */
#about {
    padding: 6.3% 0 4.24%;
    overflow: hidden;
}
#about .sec-wrapper {
    position: relative;
}

#about .sec-title {
    position: relative;
    color: #000000;
    width: 66.333vw;
    padding: 3.889vw 0 10.444vw 9.778vw;
    box-sizing: border-box;
}
#about .sec-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: #F3F3F3;
    width: 100%;
    height: 30.056vw;
    z-index: -1;
}
#about .sec-title h2 {
    font-size: min(2.5vw, 3.2rem);
    font-weight: 700;
    color: #0153FF;
}
#about .sec-title h3 {
    font-size: min(4.111vw, 12.4rem);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2%;
}
#about .sec-title p {
    font-size: min(1.5vw, 2.5rem);
    line-height: 2;
    width: 32.722vw;
    margin-top: 2.563vw;
    text-align: justify; /* 両端揃え */
    text-justify: inter-ideograph;/* 両端揃えの種類 */
}
#about .sec-title .btn {
    margin-top: 2.611vw;
}
#about .sec-title .btn.bg-black a {
    width: 9.9em;
    min-width: 145px;
}
@media print, screen and (max-width: 1799px) {
    #about {
        padding: 6.3% 0 4.24%;
        overflow: hidden;
    }
    #about .sec-wrapper {
        position: relative;
    }

    #about .sec-title {
        position: relative;
        color: #000000;
        width: 69.92%;
        padding: 5% 5% 5.4% 7%;
        box-sizing: border-box;
    }
    #about .sec-title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background: #F3F3F3;
        width: 100%;
        height: 55.9%;
        z-index: -1;
    }
    #about .sec-title h2 {
        font-size: min(2.5vw, 3.2rem);
        font-weight: 700;
        color: #0153FF;
    }
    #about .sec-title h3 {
        font-size: min(4.7vw, 6.1rem);
        font-weight: 700;
        line-height: 1.3;
        margin-top: 2%;
    }
    #about .sec-title p {
        font-size: min(1.5vw, 2rem);
        line-height: 2;
        width: 56.62%;
        margin-top: 5.3%;
        text-align: justify; /* 両端揃え */
        text-justify: inter-ideograph;/* 両端揃えの種類 */
    }
    #about .sec-title .btn {
        margin-top: 7.3%;
    }
    #about .sec-title .btn.bg-black a {
        width: 9.9em;
        min-width: 145px;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1799px) {
    #about .sec-title h3 {
        font-size: 4.7vw;
    }
}
@media print, screen and (max-width: 768px) {
    #about {
        padding: 20vw 0 10.2vw;
    }

    #about .sec-title {
        width: 100%;
        padding: 8.7vw 7.5vw 15.57vw 7.7vw;
        box-sizing: border-box;
    }
    #about .sec-title::before {
        width: 73.5vw;
        height: 126.84vw;
    }
    #about .sec-title h2 {
        font-size: 5.9vw;
    }
    #about .sec-title h3 {
        font-size: 8.05vw;
        margin-top: 1.8vw;
    }
    #about .sec-title p {
        font-size: 4.02vw;
        font-weight: bold;
        width: 100%;
        margin-top: 9.6vw;
    }
    #about .sec-title .btn {
        margin-top: 18.92vw;
    }
    #about .sec-title .btn.bg-black a {
        width: 11.36em;
        min-width: 38.12vw;
    }
}

/* 背景白の四角 */
#about .sec-content {
    position: absolute;
    bottom: 5vw;
    right: 0;
    background-color:#FFF;
    width: 44.611vw;
    margin: 0 0 0 auto;
    padding: 2.222vw 10vw 1.778vw 2.333vw;
    box-sizing: border-box;
    border: 1px solid #000;
    border-right: 0;
}
#about .sec-content h5 {
    color: #000;
    font-weight: 700;
    font-size: min(1.56vw, 2rem);
}
#about .sec-content ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2.3%;
}
#about .sec-content ul li {
    border: 1px solid #000;
    color: #000;
    font-weight: bold;
    font-size: min(1.09vw, 1.4rem);
    padding: 0.71em;
    margin: 0 1em 1em 0;
}

@media print, screen and (max-width: 1799px) {
    #about .sec-content {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color:#FFF;
        width: 53.2%;
        margin: 0 0 0 auto;
        padding: 2.7% 3.75% 2.1%;
        box-sizing: border-box;
        border: 1px solid #000;
        border-right: 0;
    }
    #about .sec-content h5 {
        color: #000;
        font-weight: 700;
        font-size: min(1.56vw, 2rem);
    }
    #about .sec-content ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-top: 2.3%;
    }
    #about .sec-content ul li {
        border: 1px solid #000;
        color: #000;
        font-weight: bold;
        font-size: min(1.09vw, 1.4rem);
        padding: 0.71em;
        margin: 0 1em 1em 0;
    }
}
@media print, screen and (max-width: 768px) {
    #about .sec-content {
        position: relative;
        width: 100%;
        padding: 11.4vw 3vw 8.05vw 2.4vw;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-right: -4.1vw;
    }
    #about .sec-content h5 {
        font-size: 5.9vw;
        letter-spacing: 0.05em;
        writing-mode: vertical-rl;
    }
    #about .sec-content ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 0 4.7vw;
    }
    #about .sec-content ul li {
        font-size: 3.2vw;
        padding: 0.41em;
        margin: 0 1em 1em 0;
    }
    #about .logos-wrapper {
        display: block;
    }
}

/* 各社のロゴ */
@keyframes slide-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-left02 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.logos-wrapper {
    margin: 3.04% -9.722vw 7.8%;
    /*width: 120%;*/
}
.logo-image-wrap01,
.logo-image-wrap02 {
    display: flex;
    flex-wrap: nowrap;
    /*gap: 3.906vw;*/
    overflow: hidden;
}
.logo-image-wrap02 {
    margin-top: 1.6%;
}
.logo-image-wrap01 .logo-image-items {
    animation: slide-left 40s linear 0.5s infinite normal both running;
}
.logo-image-wrap02 .logo-image-items {
    animation: slide-left02 90s linear 0.5s infinite normal both running;
}
/* 親要素 */
.logo-image-items {
  display: flex;
  height: 7.187vw;
  align-items: center;
  /*gap: 3.906vw;*/
  box-sizing: border-box;
}
/* 子要素: Flexアイテム設定 */
.logo-image-item {
  height: 100%; 
  flex-shrink: 0; 
  box-sizing: border-box; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像要素: サイズ制限 */
.logo-image-item img {
  max-height: 100%; 
  width: auto;
  max-width: 19.531vw;    
  object-fit: contain; 
  box-sizing: border-box;
  /*aspect-ratio: 250 / 100;*/
}
@media screen and (min-width: 1280px) {
    .logo-image-wrap01,
    .logo-image-wrap02 {
        /*gap: 50px;*/
    }
    .logo-image-items {
        /*gap: 50px;*/
        height: 92px;
    }
    /* 画像要素: サイズ制限 */
    .logo-image-item img {
        max-width: 250px;
    }
}
@media print, screen and (max-width: 1799px) {
    .logos-wrapper {
        margin: 3.04% -8.1% 7.8%;
        /*width: 120%;*/
    }
    .logo-image-wrap01,
    .logo-image-wrap02 {
        display: flex;
        flex-wrap: nowrap;
        /*gap: 3.906vw;*/
        overflow: hidden;
    }
    .logo-image-wrap02 {
        margin-top: 1.6%;
    }
    .logo-image-wrap01 .logo-image-items {
        animation: slide-left 40s linear 0.5s infinite normal both running;
    }
    .logo-image-wrap02 .logo-image-items {
        animation: slide-left02 90s linear 0.5s infinite normal both running;
    }
    /* 親要素 */
    .logo-image-items {
      display: flex;
      height: 7.187vw;
      align-items: center;
      /*gap: 3.906vw;*/
      box-sizing: border-box;
    }
    /* 子要素: Flexアイテム設定 */
    .logo-image-item {
      height: 100%; 
      flex-shrink: 0; 
      box-sizing: border-box; 
      display: flex;
      align-items: center;
    }

    /* 画像要素: サイズ制限 */
    .logo-image-item img {
      max-height: 100%;
      max-width: 13.889vw;
      width: auto;      
      object-fit: contain; 
      box-sizing: border-box;
    }
}
@media print, screen and (max-width: 768px) {
    .logos-wrapper {
        margin: 6.5vw -6.933vw 0;
        overflow: hidden;
        /*width: auto;*/
    }

    .logo-image-items {
        /*gap: 6.667vw;*/
        height: 17.987vw;
    }
    .logo-image-wrap01,
    .logo-image-wrap02 {
        /*gap: 6.667vw;*/
    }
    .logo-image-wrap02 {
        margin-top: 1.399vw;
    }
    .logo-image-item img {
        max-width: 33.333vw;
    }
}

/* ==============================
  実績・事例紹介
============================== */
#works_cases {
    padding: 0 9.722vw 0 9.722vw;
    /*overflow: hidden;*/
}
#works_cases .sec-title {
    position: relative;
    color: #000000;
}
#works_cases .sec-title h2 {
    font-size: min(2.5vw, 3.2rem);
}
#works_cases .sec-title h3 {
    font-size: max(5.2vw, 6.7rem);
    letter-spacing: 0.05em;
}

#works_cases .sec-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 2.6% auto 0;
    width: 89.06%;
    max-width: 1140px;
}

@media print, screen and (max-width: 1799px) {
    #works_cases {
        padding: 7.7% 7% 4.24% 7%;
        /*overflow: hidden;*/
    }
    #works_cases .sec-title {
        position: relative;
        color: #000000;
    }
    #works_cases .sec-title h2 {
        font-size: min(1.7vw, 2.3rem);
    }
    #works_cases .sec-title h3 {
        font-size: min(5.4vw, 7rem);
        letter-spacing: 0.05em;
    }

    #works_cases .sec-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 2.6%;
        width: 89%;
    }
}
@media print, screen and (max-width: 768px) {
    #works_cases {
        padding: 19.16vw 6.9vw 12.8vw;
        /*background: #F3F3F3;*/
    }
    #works_cases .sec-title h2 {
        font-size: 5.3vw;
    }
    #works_cases .sec-title h3 {
        font-size: 9.3vw;
        line-height: 1.5;
        letter-spacing: 0.04em;
    }

    #works_cases .sec-content {
        margin-top: 10.72vw;
        width: 100%;
    }
}

/* アイテム */
#works_cases .sec-content-item {
    position: relative;
    background: #FFFFFF;
    width: 100%;
    border: 1px solid #000;
    box-sizing: border-box;
}
#works_cases .sec-content-item + .sec-content-item {
    margin-top: 3.5%;
}
@media print, screen and (max-width: 768px) {
    #works_cases .sec-content-item + .sec-content-item {
        margin-top: 10.73vw;
    }
}

/* 共通 */
#works_cases .sec-content-item .text {
    width: 100%;
}
#works_cases .sec-content-item .text .text-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#works_cases .sec-content-item .text .category {
    background-color: #000;
    width: 21%;
    color: #FFF;
    text-align: center;
    font-size: min(1.4vw, 1.8rem);
    padding: 0.72em 0;
    font-weight: 700;
}
#works_cases .sec-content-item .text .product {
    font-size: min(1.25vw, 1.6rem);
    margin: 0 0 0 2.3em;
    vertical-align: middle;
    font-weight: 700;
    padding: 0.72em 0;
}
#works_cases .sec-content-item .text .product span {
    font-size: min(1.09vw, 1.4rem);
    margin-right: 1em;
    font-weight: 400;
}
#works_cases .sec-content-item .text h4 {
    font-size: min(2.34vw, 3rem);
    margin: 1.3% 3.9% 2.6%;
    font-weight: 700;
    line-height: 1.5;
}
#works_cases .sec-content-item .text h4 span {
    font-size:  min(1.25vw, 1.6rem);
    line-height: 2.7em;
    display: block;
    font-weight: 400;
}

@media print, screen and (max-width: 768px) {
    #works_cases .sec-content-item .text .text-head {
    }
    #works_cases .sec-content-item .text .category {
        width: 31.8vw;
        font-size: 3.2vw;
        padding: 0.68em 0;
    }
    #works_cases .sec-content-item .text .product {
        font-size: 3.2vw;
        margin: 0.825em 0 0.825em 1.35em;
        padding: 0;
    }
    #works_cases .sec-content-item .text .product span {
        font-size: 3.2vw;
    }
    #works_cases .sec-content-item .text h4 {
        font-size: 4vw;
        margin: 0 0.38em 0.57em;
    }
    #works_cases .sec-content-item .text h4 span {
        font-size: 2.133vw;
    }
}


/* 画像ボックス */
#works_cases .sec-content-item.image-box {
    border: 10px solid #000;
    transition: all 0.3s ease-out;
}
#works_cases .sec-content-item.image-box:hover {
    /*border: 10px solid #0153FF;*/
    opacity: .7;
}
#works_cases .sec-content-item.image-box a {
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    aspect-ratio: 16 / 9 auto;
    /*height: 35vw;*/
}
#works_cases .sec-content-item.image-box a:hover {
    opacity: 1;
}
#works_cases .sec-content-item.image-box .label {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #000;
    color: #FFF;
    font-weight: 700;
    font-size: min(1.5vw, 2rem);
    padding: 0.675em 0;
    width: 7.5em;
    text-align: center;
    z-index: 1;

    transition: background 0.3s ease-out;
}
#works_cases .sec-content-item.image-box .label span {
    display: inline-block;
    width: 12.05%;
    height: 12.05%;
    margin-left: 8.75%;
    line-height: 0.7;
}
#works_cases .sec-content-item.image-box .image {
    width: 100%;
    height: 100%;
}
#works_cases .sec-content-item.image-box .image img {
    height: 100%;
    object-fit: cover;
    object-position: top;
}
#works_cases .sec-content-item.image-box .image::after {
    content: ''; 
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0.6;
    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 1) 90%);
}
#works_cases .sec-content-item.image-box .image {
    width: 100%;
}
#works_cases .sec-content-item.image-box .text {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #FFF;
}
@media print, screen and (max-width: 768px) {
    #works_cases .sec-content-item.image-box {
        border-width: 1.34vw;
    }
    #works_cases .sec-content-item.image-box .label {
        position: absolute;
        top: -1.34vw;
        right: -1.34vw;
        font-size: 3.2vw;
        padding: 0.67em 0;
        width: 6.64em;
    }

    #works_cases .sec-content-item.image-box .text .category {
        font-size: 3.2vw;
        padding: 0.4em 0;
        width: 31.8vw;
    }
}


/* テキストボックス */
#works_cases .sec-content-item.text-box .text .text-head {
    border-bottom: 1px solid #000;
}

#works_cases .sec-content-item.text-box .text .content {
    font-size: min(1.25vw, 1.6rem);
    line-height: 1.8;
    padding: 2.1% 4.17% 2.1% 3.9%;
}
#works_cases .sec-content-item.text-box .text .content a {
    display: inline-block;
    color: #000;
    font-weight: 700;
    text-decoration: underline;
}
/*#works_cases .sec-content-item.text-box .text .content a:hover {
    color: #0153FF;
}*/

#works_cases .sec-content-item.text-box .text .text-foot {
    background: #F1F1F1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1.8% 4.3% 2%;
}
#works_cases .sec-content-item.text-box .text .text-foot .service {
    font-size: min(0.93vw, 1.2rem);
    font-weight: 700;
    display: inline;
}
#works_cases .sec-content-item.text-box .text .text-foot .service span {
    font-weight: 400;
}
#works_cases .sec-content-item.text-box .text .text-foot .service + .purpose {
    border-left: 1px solid #000;
    margin-left: 2.5em;
    padding-left: 2.5em;
}
#works_cases .sec-content-item.text-box .text .text-foot .purpose {
    font-size: min(0.93vw, 1.2rem);
    font-weight: 700;
    display: inline;
}
#works_cases .sec-content-item.text-box .text .text-foot .purpose span {
    font-weight: 400;
}
#works_cases .sec-content-item.text-box .text .text-foot .service ul {
    display: inline;
}
#works_cases .sec-content-item.text-box .text .text-foot .service ul li {
    display: inline;    
}
#works_cases .sec-content-item.text-box .text .text-foot .purpose ul {
    display: inline;
}
#works_cases .sec-content-item.text-box .text .text-foot .purpose ul {
    gap: 0.2em 0.9em;
    display: inline;
}
#works_cases .sec-content-item.text-box .text .text-foot .purpose ul li {
    font-weight: 700;
    display: inline;
}
#works_cases .sec-content-item.text-box .text .text-foot .service ul > li::after {
    content: "、";
}
#works_cases .sec-content-item.text-box .text .text-foot .service ul > li:last-child::after {
    content: none; /* contentを空にすることで非表示にする */
}

#works_cases .sec-content-item.text-box .text .text-foot .purpose ul > li {
    margin-right:1em;
}
@media print, screen and (max-width: 768px) {
    #works_cases .sec-content-item.text-box .text .text-head {
        align-items: stretch;
    }
    #works_cases .sec-content-item.text-box .text .product {
        padding: 0;
    }
    #works_cases .sec-content-item.text-box .text .content {
        font-size: 3.2vw;
        padding: 4vw 3.8vw;
    }
    #works_cases .sec-content-item.text-box .text .content {
        font-size: 3.2vw;
        padding: 4vw 3.8vw;
    }

    #works_cases .sec-content-item.text-box .text .text-foot {
        flex-direction: column;
        align-items: flex-start;
        padding: 2vw 4.2vw 1.7vw;
    }
    #works_cases .sec-content-item.text-box .text .text-foot .service {
        font-size: 3.2vw;
    }
    #works_cases .sec-content-item.text-box .text .text-foot .service + .purpose {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }
    #works_cases .sec-content-item.text-box .text .text-foot .purpose {
        font-size: 3.2vw;
        margin-top: 2.4vw;
    }

}

#works_cases .btn {
    margin-top: 5.4%;
}
#works_cases .btn.bg-black a {
    width: 12.5em;
    min-width: 175px;
    margin: 0 auto;
}

@media print, screen and (max-width: 1799px) {
    #works_cases .btn {
        margin-top: 5.4%;
    }
    #works_cases .btn.bg-black a {
        width: 12.5em;
        min-width: 175px;
        margin: 0 auto;
    }
}
@media print, screen and (max-width: 768px) {
    #works_cases .btn {
        margin-top: 12.97vw;
    }
    #works_cases .btn.bg-black a {
        width: 13.68em;
        min-width: 45.9vw;
        margin-left: 0;
    }
}

/* ==============================
  CAPABILITIES
============================== */
#capablities {
    padding: 10.889vw 0 9.944vw;
}
#capablities .sec-wrapper {
    position: relative;
}
#capablities .sec-wrapper .img {
    position: absolute;
    top: 6%;
    left: 0;
    width: 34.556vw;
}
#capablities .sec-wrapper .sec-title {
    position: relative;
    color: #000000;
    width: 68.944vw;
    margin: 0 0 0 auto;
    padding: 3.111vw 19.778vw 0 14.944vw;
    box-sizing: border-box;
}
#capablities .sec-wrapper .sec-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: #F3F3F3;
    width: 100%;
    height: 33.5vw;
    z-index: -1;
}
#capablities .sec-wrapper .sec-title h2 {
    font-size: min(2.3vw, 3.2rem);
    font-weight: 700;
    color: #0153FF;
}
#capablities .sec-wrapper .sec-title h3 {
    font-size: min(4.111vw, 12.4rem);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.833vw;
}
#capablities .sec-wrapper .sec-title p {
    font-size: min(1.5vw, 2.5rem);
    line-height: 2;
    width: 43.722vw;
    margin-top: 2.563vw;
    text-align: justify; /* 両端揃え */
    text-justify: inter-ideograph;/* 両端揃えの種類 */
}
#capablities .sec-wrapper .sec-title .btn {
    margin-top: 3.667vw;
}
#capablities .sec-wrapper .sec-title .btn.bg-black a {
    width: 12.5em;
    min-width: 175px;
}
@media print, screen and (max-width: 1799px) {
    #capablities {
        padding: 6.3% 0 12.8%;
    }
    #capablities .sec-wrapper {
        position: relative;
    }
    #capablities .sec-wrapper .img {
        position: absolute;
        top: 6%;
        left: 0;
        width: 34.6%;
    }
    #capablities .sec-wrapper .sec-title {
        position: relative;
        color: #000000;
        width: 69.92%;
        margin: 0 0 0 auto;
        padding: 4.8% 8% 7.1% 16%;
        box-sizing: border-box;
    }
    #capablities .sec-wrapper .sec-title::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background: #F3F3F3;
        width: 100%;
        height: 64.14%;
        z-index: -1;
    }
    #capablities .sec-wrapper .sec-title h2 {
        font-size: min(2.5vw, 3.2rem);
        font-weight: 700;
        color: #0153FF;
    }
    #capablities .sec-wrapper .sec-title h3 {
        font-size: min(4.7vw, 6.1rem);
        font-weight: 700;
        line-height: 1.3;
        margin-top: 2.5%;
    }
    #capablities .sec-wrapper .sec-title p {
        font-size: min(1.5vw, 2rem);
        line-height: 2;
        width: 100%;
        margin-top: 2.5%;
        text-align: justify; /* 両端揃え */
        text-justify: inter-ideograph;/* 両端揃えの種類 */
    }
    #capablities .sec-wrapper .sec-title .btn {
        margin-top: 4.1%;
    }
    #capablities .sec-wrapper .sec-title .btn.bg-black a {
        width: 12.5em;
        min-width: 175px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1799px) {
    #capablities .sec-wrapper .sec-title h3 {
        font-size: 4.7vw;
    }
}
@media print, screen and (max-width: 768px) {
    #capablities {
        padding: 14.89vw 0 21.47vw;
    }
    #capablities .sec-wrapper .img {
        position: relative;
        top: 0;
        width: 85.81vw;
    }
    #capablities .sec-wrapper .sec-title {
        width: 100%;
        margin: 10.06vw 0 21.47vw;
        padding: 0 6.8vw;
    }
    #capablities .sec-wrapper .sec-title::before {
        width: 80.4vw;
        height: 84.533vw;
        right: 0;
        left: auto;
        top: -57.733vw;
    }
    #capablities .sec-wrapper .sec-title h2 {
        font-size: 5.9vw;
        letter-spacing: 0.05em;
    }
    #capablities .sec-wrapper .sec-title h3 {
        font-size: 8.05vw;
        margin-top: 1.87vw;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }
    #capablities .sec-wrapper .sec-title p {
        font-size: 4.02vw;
        font-weight: bold;
        margin-top: 6.17vw;
    }
    #capablities .sec-wrapper .sec-title .btn {
        margin-top: 6.44vw;
    }
    #capablities .sec-wrapper .sec-title .btn.bg-black a {
        width: 13.68em;
        min-width: 45.9vw;
    }
}

/* ==============================
  メンバー
============================== */
#capablities .members {
    position: relative;
    padding: 7.222vw 0 10%;
}
#capablities .members .members-title {
    position: absolute;
    top: 71.2%;
    left: 0;
    background-color: #000;
    color: #FFF;
    width: 44.611vw;
    box-sizing: border-box;
    padding: 4.944vw 0 3.971vw 9.722vw;
}
#capablities .members .members-title h3 {
    font-weight: 700;
    font-size: max(1.7vw, 2.3rem);
}
#capablities .members .members-title h2 {
    font-size: max(5.2vw, 6.7rem);
    font-weight: 700;
    line-height: 1;
    margin-top: 2.6%;
    letter-spacing: 0.05em;
}

#capablities .members .members-title .btn {
    margin-top: 1.833vw;
}
#capablities .members .members-title .btn a {
    width: 10.9em;
}

@media print, screen and (max-width: 1799px) {
    #capablities .members {
        position: relative;
        padding: 0 0 19.7%;
    }
    #capablities .members .members-title {
        position: absolute;
        top: 63.62%;
        left: 0;
        background-color: #000;
        color: #FFF;
        width: 53%;
        box-sizing: border-box;
        padding: 5.9% 5.6% 4.7% 7%;
    }
    #capablities .members .members-title h3 {
        font-weight: 700;
        font-size: min(1.7vw, 2.3rem);
    }
    #capablities .members .members-title h2 {
        font-size: min(5.4vw, 7rem);
        font-weight: 700;
        margin-top: 2.6%;
    }

    #capablities .members .members-title .btn {
        margin-top: 2.6%;
    }
    #capablities .members .members-title .btn a {
        width: 10.9em;
    }
}
@media print, screen and (max-width: 768px) {
    #capablities .members {
        position: relative;
        padding: 0 0 40.62vw;
    }
    #capablities .members .members-title {
        top: 51.33vw;
        width: 81.47vw;
        padding: 7.11vw 9.6vw 8.3vw;
    }
    #capablities .members .members-title h3 {
        font-size: 3.7vw;
    }
    #capablities .members .members-title h2 {
        font-size: 10.73vw;
        margin-top: 2.6vw;
    }

    #capablities .members .members-title .btn {
        margin-top: 4.6vw;
    }
    #capablities .members .members-title .btn a {
        width: 11.36em;
        max-width: 38.12vw;
    }
}

/* ==============================
  お仕事に関する質問・相談
============================== */
#capablities .contact {
    width: 63.333vw;
    height: 15vw;
    margin: 9.889vw auto 0;
    background-color: #0153FF;
    color: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#capablities .contact .image {
    width: 35.466vw;
    height: 100%;
}
#capablities .contact .image img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#capablities .contact .text {
    width: 45.056vw;
    box-sizing: border-box;
    padding: 0 2.611vw 0 3.833vw;
}
#capablities .contact .text h2 {
    font-size: min(2.333vw, 4.2rem);
    font-weight: 700;
}
#capablities .contact .text p {
    font-size: min(1vw, 1.7rem);
    line-height: 1.7;
    margin-top: 2.8%;
}
#capablities .contact .text .btn {
    margin-top: 1.611vw;
}
#capablities .contact .text .btn a {
    width: 11.9em;
}
@media print, screen and (max-width: 1799px) {
    #capablities .contact {
        width: 78%;
        height: 20vw;
        margin: 12.89% auto 0;
        background-color: #0153FF;
        color: #FFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #capablities .contact .image {
        width: 39.82%;
    }
    #capablities .contact .text {
        width: 60.18%;
        box-sizing: border-box;
        padding: 0 2.8% 0 7%;
    }
    #capablities .contact .text h2 {
        /*font-size: min(3.2vw, 4.2rem);*/
        font-weight: 700;
    }
    #capablities .contact .text p {
        /*font-size: min(1.4vw, 1.8rem);*/
        line-height: 1.7;
        margin-top: 2.8%;
    }
    #capablities .contact .text .btn {
        margin-top: 4.1%;
    }
    #capablities .contact .text .btn a {
        width: 11.9em;
    }
}
@media print, screen and (max-width: 768px) {
    #capablities .contact {
        height: auto;
        width: 88.32vw;
        margin: 21.47vw auto 0;
        flex-direction: column;
    }
    #capablities .contact .image {
        width: 100%;
    }
    #capablities .contact .text {
        width: 100%;
        padding: 9.5vw 5.6vw 8.18vw;
    }
    #capablities .contact .text h2 {
        font-size: 5.6vw;
    }
    #capablities .contact .text p {
        font-size: 3.22vw;
        margin-top: 2.9vw;
    }
    #capablities .contact .text .btn {
        margin-top: 7.9vw;
    }
    #capablities .contact .text .btn a {
        width: 12.44em;
        max-width: 41.74vw;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==============================
  NEWS
============================== */
#news {
    background: #F3F3F3;
    padding: 6.4% 9.722vw 5.2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#news .sec-title {
    width: 35.1%;
}
#news .sec-title h2 {
    color: #000;
    font-size: max(5.2vw, 6.7rem);
}
#news .btn.bg-black {
    margin-top: 14%;
}
#news .btn.bg-black a {
    background: none;
    border-color: #000;
    color: #000;
    width: 10.9em;
}
#news .btn.bg-black a::before {
    background-color: #000;
}

#news .sec-content {
    width: 64.9%;
}
#news .sec-content .news-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 2.9% 0;
    font-size: min(1.4vw, 1.8rem);
    font-weight: 400;
    color: #000;
    border-bottom: 1px solid  rgba(0, 0, 0, 0.4);
}
#news .sec-content .news-item .category {
    font-size: min(1.09vw, 1.4rem);
    background-color: #000;
    color: #FFF;
    text-align: center;
    width: 7.92em;
    padding: 0.7em 0;
    border-radius: 0.35em;
    margin: 0 1.3em;
}
#news .sec-content .news-item .title a {
    color: #000;
    text-decoration: none;
}
@media print, screen and (max-width: 1799px) {
    #news {
        background: #F3F3F3;
        padding: 6.4% 7% 5.2%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #news .sec-title {
        width: 35.1%;
    }
    #news .sec-title h2 {
        color: #000;
        font-size: min(5.2vw, 6.7rem);
    }
    #news .btn.bg-black {
        margin-top: 14%;
    }
    #news .btn.bg-black a {
        background: none;
        border-color: #000;
        color: #000;
        width: 10.9em;
    }
    #news .btn.bg-black a::before {
        background-color: #000;
    }

    #news .sec-content {
        width: 64.9%;
    }
    #news .sec-content .news-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 2.9% 0;
        font-size: min(1.4vw, 1.8rem);
        font-weight: 400;
        color: #000;
        border-bottom: 1px solid  rgba(0, 0, 0, 0.4);
    }
    #news .sec-content .news-item .category {
        font-size: min(1.09vw, 1.4rem);
        background-color: #000;
        color: #FFF;
        text-align: center;
        width: 7.92em;
        padding: 0.7em 0;
        border-radius: 0.35em;
        margin: 0 1.3em;
    }
    #news .sec-content .news-item .title a {
        color: #000;
        text-decoration: none;
    }
}
@media print, screen and (max-width: 768px) {
    #news {
        padding: 7.24vw 6.17vw 14.24vw;
        flex-direction: column;
    }
    #news .sec-title {
        width: auto;
    }
    #news .sec-title h2 {
        font-size: 9.71vw;
        letter-spacing: 0.05em;
    }
    #news .sec-title .btn.bg-black {
        display: none;
    }
    #news .btn.bg-black {
        margin-top: 7.65vw;
    }
    #news .btn.bg-black a {
        width: 11.36em;
        max-width: 38.12vw;
    }

    #news .sec-content {
        width: 100%;
    }
    #news .sec-content .news-item {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        align-items: start;
        padding: 5.5vw 0;
        font-size: 3.75vw;
    }
    #news .sec-content .news-item .category {
        grid-area: 1 / 1 / 3 / 2;
        font-size: 3.2vw;;
        width: 6.28em;
        box-sizing: border-box;
        padding: 0;
        border-radius: 5px;
        margin: 0 3.08vw 0 0;
        padding: 0.58em 1.09em;
        height: 9.26vw;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        text-align: left;
    }
    #news .sec-content .news-item .date {
        grid-area: 1 / 2 / 2 / 3;
        font-size: 3.2vw;
    }
    #news .sec-content .news-item .title { grid-area: 2 / 2 / 3 / 3; }
}

/* ==============================
  採用情報
============================== */
#recruit {
    background: #000;
    padding: 3.306vw 0 3.306vw 9.722vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFF;
    box-sizing: border-box;
}
#recruit .sec-title {
    width: 47.6%;
}
#recruit .sec-title h3 {
    font-size: max(1.5vw, 2rem);
}
#recruit .sec-title h2 {
    margin-top: 3.2%;
    font-size: max(5.2vw, 6.7rem);
    color: #FFF;
}
#recruit .sec-title p {
    font-size: max(1.722vw, 3.1rem);
    margin-top: 0.8%;
}
#recruit .sec-title .btn {
    margin-top: 12.9%;
}
#recruit .sec-title .btn a {
    width: 10.9em;
}
#recruit .image {
    width: 52.31%;
}
@media print, screen and (max-width: 1799px) {
    #recruit {
        background: #000;
        padding: 7% 0 6.9% 7%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #FFF;
        box-sizing: border-box;
    }
    #recruit .sec-title {
        width: 47.6%;
    }
    #recruit .sec-title h3 {
        font-size: min(1.5vw, 2rem);
    }
    #recruit .sec-title h2 {
        margin-top: 3.2%;
        font-size: min(5.2vw, 6.7rem);
        color: #FFF;
    }
    #recruit .sec-title p {
        font-size: min(2.4vw, 3.1rem);
        margin-top: 0.8%;
    }
    #recruit .sec-title .btn {
        margin-top: 12.9%;
    }
    #recruit .sec-title .btn a {
        width: 10.9em;
    }
    #recruit .image {
        width: 52.31%;
    }
}
@media print, screen and (max-width: 768px) {
    #recruit {
        margin-top: 21.47vw;
        padding: 11.54vw 0 15.43vw 5.23vw;
        flex-direction: column;
    }
    #recruit .sec-title {
        width: 100%;
    }
    #recruit .sec-title h3 {
        font-size: 3.7vw;
        letter-spacing: 0.05em;
    }
    #recruit .sec-title h2 {
        margin-top: 2.1vw;
        font-size: 10.73vw;
        letter-spacing: 0.05em;
    }
    #recruit .sec-title p {
        font-size: 3.5vw;
        font-weight: bold;
        letter-spacing: 0.05em;
        margin-top: 3.7vw;
    }
    #recruit .sec-title .btn {
        margin-top: 8.18vw;
    }
    #recruit .sec-title .btn a {
        width: 11.36em;
        max-width: 38.12vw;
    }
    #recruit .image {
        width: 100%;
        margin-top: 11.67vw;
    }
}