@charset "utf-8";

/**
 * スマホ用設定
 */
@media ( max-width: 768px ) {

    main {
        margin: 0 auto;
        width: 100%;
    }

    .mv {
        margin: 0 auto;
        width: 100%;
        aspect-ratio: 2 / 1;
        overflow: hidden;
    }
    .mv .mv-bg {
        position: absolute;
        bottom: 0;
        right: -10%;
        width: calc( 100% * 808 / 1366 );
        height: auto;
    }
    .mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    .mv .mv-txt1 {
        position: absolute;
        bottom: 52%;
        left: 10%;
        margin: 0;
        padding: 0 0 0.5em;
        width: 80%;
        color: var(--color-accent);
        font-size: 3.2vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: left;
        border-bottom: 1px solid #d8d8d8;
    }
    .mv h1 {
        position: absolute;
        top: 50%;
        left: 10%;
        color: var(--fg-color);
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
        line-height: calc( 51 / 35 );
    }
    .mv .mv-txt2 {
        position: absolute;
        top: 65%;
        left: 10%;
        margin: 0;
        padding: 0;
        width: 80%;
        font-size: 3.2vw;
        font-weight: 500;
        text-align: left;
    }

    .mv-info {
        margin: 0 auto 8.0vw;
        width: 100%;
        height: auto;
    }
    .mv-info .txt1 {
        margin: 0 auto;
        width: 90%;
        font-size: 4.8vw;
        font-weight: 900;
        line-height: calc( 51 / 35 );
    }
    .mv-info .txt2 {
        margin: 1.0em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 700;
        line-height: calc( 35 / 18 );
    }

  

    .section-title {
        margin: 0 auto;
        width: 90%;
        color: var(--color-accent);
        font-size: 6.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }

    .section-title-s {
        margin: 0 auto;
        width: 90%;
        font-size: 3.2vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );    }
  
    #db-table {
        margin: 8.0vw auto 0;
        width: 100%;
        height: auto;
    }
    #db-table .db-table {
        margin: 0 auto;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid #d4dfe9;
    }
    #db-table .db-table > dt {
        margin: 0;
        padding: 1.0em 0 0.2em;
        font-size: 4.0vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
    }
    #db-table .db-table > dd {
        margin: 0;
        padding: 0.2em 0 1.0em;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
        border-bottom: 1px solid #d4dfe9;
    }

    #db-appeal {
        margin: 12.0vw auto 0;
        width: 100%;
    }
    #db-appeal h2 {
        margin: 0 auto;
        width: 90%;
        color: var(--color-accent);
        font-size: 6.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }
    #db-appeal .subtitle {
        margin: 0 auto;
        width: 90%;
        font-size: 3.2vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #db-appeal .appeal-flex {
        margin: 8.0vw auto;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 4.0vw;
    }
    #db-appeal .appeal-flex .appeal-pic {
        margin: 0;
        width: 35%;
        height: auto;
        apsect-ratio: 1 / 1;
    }
    #db-appeal .appeal-flex .appeal-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #db-appeal .appeal-flex .appeal-info {
        margin: 0;
        width: 65%;
    }
    #db-appeal .appeal-flex h3 {
        color: var(--color-accent);
        font-size: 4.0vw;
        font-weight: 700;
        line-height: calc( 40 / 24 );
    }
    #db-appeal .appeal-flex p {
        margin: 0.5em 0 0;
        font-size: 3.2vw;
        font-weight: 400;
        line-height: calc( 24 / 16 );
    }

    #db-final {
        margin: 12.0vw auto;
        width: 100%;
    }
    #db-final h2 {
        margin: 0 auto;
        width: 90%;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 75 / 50 );
    }
    #db-final p {
        margin: 20px auto 0;
        width: 90%;
        max-width: 980px;
        font-size: 4.0vw;
        font-weight: 400;
        text-align: center;
        line-height: calc( 40 / 24 );
    }

    .db-common {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 100%;
    }
    .db-common h2 {
        margin: 0 auto;
        width: 90%;
        color: var(--color-accent);
        font-size: 6.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }
    .db-common .subtitle {
        margin: 0 auto;
        width: 90%;
        font-size: 3.2vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    .db-common p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }
    #db-strong h3 {
        margin: 2.0em auto 1.0em;
        padding: 0;
        width: 90%;
        font-size: 4.8vw;
    }
    #db-strong h4 {
        margin: 2.0em auto 0;
        padding: 0;
        width: 90%;
        font-size: 4.0vw;
    }

    #cloud-about {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 100%;
    }
    #cloud-about p {
        margin: 1.5em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #cloud-area {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 100%;
    }
    #cloud-area p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #cloud-strong {
        margin: 12.0vw auto 0;
        padding: 0 0 12.0vw;
        width: 100%;
    }
    #cloud-strong p {
        margin: 1.5em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #ai-about {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 100%;
    }
    #ai-about p {
        margin: 1.5em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #ai-area {
        margin: 12.0vw auto 0;
        padding: 0;
        width: 100%;
    }
    #ai-area p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #ai-strong {
        margin: 12.0vw auto 0;
        padding: 0 0 12.0vw;
        width: 100%;
    }
    #ai-strong p {
        margin: 1.5em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    .common-table {
        margin: 0 auto;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .common-table > dt {
        margin: 0;
        padding: 1.0em 0 0.2em;
        font-size: 4.0vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
    }
    .common-table > dd {
        margin: 0;
        padding: 0.2em 0 1.0em;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
        border-bottom: 1px solid #d4dfe9;
    }

    #company-qualification {
        margin: 12.0vw auto;
    }
    #company-organization {
        margin: 12.0vw auto;
    }
    .company-flex {
        margin: 0 auto;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .company-flex .company-head {
        width: 100%;
    }
    .company-flex .company-head h2 {
        margin: 0 auto;
        width: 100%;
        color: var(--color-accent);
        font-size: 6.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: left;
        line-height: calc( 48 / 40 );
    }
    .company-flex .company-head .subtitle {
        margin: 0 auto;
        width: 100%;
        font-size: 3.2vw;
        font-weight: 700;
        text-align: left;
        line-height: calc( 24 / 16 );
    }
    .company-flex .company-info {
        width: 100%;
    }
    .company-flex .company-info ul {
        margin: 4.0vw 0 0;
        list-style: none;
    }
    .company-flex .company-info ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 3.6vw;
        font-weight: 500;
        line-height: calc( 24 / 18 );
    }
    .company-flex .company-info ul li::before {
        display: inline-block;
        content: "・";
        margin-right: 0.5em;
        color: var(--color-accent);
        scale: 2.0 2.0;
    }
    .company-flex .company-info ul li + li {
        margin-top: 4.0vw;
    }
    .company-flex .company-info .company-orgs {
        margin: 4.0vw 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 2.0vw 2.0vw;
    }
    .company-flex .company-info .company-orgs .company-org {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 20.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: center;
        line-height: calc( 29 / 20 );
        border: 1px solid var(--color-accent);
        border-radius: 100%;
    }

    #company-philosophy {
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        background: url(../images/page-company-pic1.jpg) no-repeat center / cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #company-philosophy h2 {
        margin: 0 auto;
        width: 90%;
        color: var(--color-accent);
        font-size: 8.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }
    #company-philosophy .subtitle {
        margin: 0 auto;
        width: 90%;
        font-size: 3,2vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #company-philosophy .txt1,
    #company-philosophy .txt3 {
        margin: 0 auto;
        width: 90%;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }
    #company-philosophy .txt1 {
        margin-top: 1.0em;
    }
    #company-philosophy .txt2 {
        margin: 0 auto;
        width: 90%;
        color: var(--color-accent);
        font-size: 8.0vw;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }

    #ses-main {
        margin: 0 auto;
        padding: 100.0vw 0 0;
        width: 100%;
    }
    #ses-main .ses-box {
        position: absolute;
        top: 0;
        left: 5%;
        margin: 0;
        padding: 4.0vw;
        width: 90%;
        font-size: 3.6vw;
        line-height: calc( 32 / 16 );
        background: #fff;
    }

    .recruit-common {
        margin: 8.0vw auto 0;
        padding: 8.0vw 0 0;
        width: 100%;
    }
    .recruit-common .recruit-list {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 80%;
        list-style: disc;
    }
    .recruit-common .recruit-list li {
        margin: 0.5em auto;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 500;
        list-style: disc;
    }

    #recruit-table {
        margin: 12.0vw auto 0;
        padding: 0 0 12.0vw;
        width: 100%;
    }
    #recruit-table .flex {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }
    #recruit-table .flex > div {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        line-height: calc( 30 / 16 );
    }

    #security-policy {
        margin: 8.0vw auto 0;
        padding: 8.0vw 0 12.0vw;
        width: 90%;
    }
    #security-policy h2 {
        position: relative;
        margin: 1.5em auto 0;
        padding: 0 0 0.5em;
        width: 100%;
        font-size: 4.8vw;
        font-weight: 700;
        text-align: left;
    }
    #security-policy h2::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( to right, var(--color-accent) 120px, #ccc 120px );
    }
    #security-policy p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        line-height: calc( 32 / 16 );
    }
    #security-policy ol {
        margin: 0 auto;
        padding: 0 0 0 2.0em;
        width: 100%;
    }
    #security-policy ol li {
        margin: 1.0em auto;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        line-height: calc( 32 / 16 );
    }

}


/**
 * PC用設定
 */
@media ( min-width: 768.01px ) {

    main {
        margin: 0 auto;
        width: 100%;
    }

    .mv {
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1366 / 420;
        overflow: hidden;
    }
    .mv .mv-bg {
        position: absolute;
        bottom: 0;
        right: -20%;
        width: calc( 100% * 808 / 1366 );
        height: auto;
    }
    .mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    .mv .mv-txt1 {
        position: absolute;
        bottom: 52%;
        left: 10%;
        margin: 0;
        padding: 0 0 0.5em;
        width: 80%;
        color: var(--color-accent);
        font-size: 16px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: left;
        border-bottom: 1px solid #d8d8d8;
    }
    .mv h1 {
        position: absolute;
        top: 50%;
        left: 10%;
        color: var(--fg-color);
        font-size: 35px;
        font-weight: 700;
        text-align: left;
        line-height: calc( 51 / 35 );
    }
    .mv .mv-txt2 {
        position: absolute;
        top: 65%;
        left: 10%;
        margin: 0;
        padding: 0;
        width: 80%;
        font-size: 18px;
        font-weight: 500;
        text-align: left;
    }

    .mv-info {
        margin: 0 auto 40px;
        width: 100%;
        height: auto;
    }
    .mv-info .txt1 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 35px;
        font-weight: 900;
        line-height: calc( 51 / 35 );
    }
    .mv-info .txt2 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 18px;
        font-weight: 700;
        line-height: calc( 35 / 18 );
    }

    .section-title {
        margin: 0 auto;
        width: 90%;
        color: var(--color-accent);
        font-size: min(6.0vw, 60px);
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc(48 / 40);

    }
    .section-title-s {
        margin: 0 auto;
        width: 90%;
        font-size: min(20px, 3.2vw);
        font-weight: 700;
        text-align: center;
        line-height: calc(24 / 16);
    }
  
    #db-table {
        margin: 70px auto 0;
        width: 100%;
        height: auto;
    }
    #db-table .db-table {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 0;
        border-top: 1px solid #d4dfe9;
    }
    #db-table .db-table > dt {
        margin: 0;
        padding: 16px 0;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
        border-bottom: 1px solid #d4dfe9;
    }
    #db-table .db-table > dd {
        margin: 0;
        padding: 16px 0;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
        border-bottom: 1px solid #d4dfe9;
    }

    #db-appeal {
        margin: 80px auto 0;
        width: 100%;
    }
    #db-appeal h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        color: var(--color-accent);
        font-size: 40px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }
    #db-appeal .subtitle {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #db-appeal .appeal-flex {
        margin: 40px auto;
        width: 90%;
        max-width: 980px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 30px;
    }
    #db-appeal .appeal-flex .appeal-pic {
        margin: 0;
        width: 30%;
        height: auto;
        apsect-ratio: 1 / 1;
    }
    #db-appeal .appeal-flex .appeal-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #db-appeal .appeal-flex .appeal-info {
        margin: 0;
        width: 70%;
    }
    #db-appeal .appeal-flex h3 {
        color: var(--color-accent);
        font-size: 24px;
        font-weight: 700;
        line-height: calc( 40 / 24 );
    }
    #db-appeal .appeal-flex p {
        margin: 0.5em 0 0;
        font-size: 16px;
        font-weight: 400;
        line-height: calc( 24 / 16 );
    }

    #db-final {
        margin: 80px auto;
        width: 100%;
    }
    #db-final h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 50px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 75 / 50 );
    }
    #db-final p {
        margin: 20px auto 0;
        width: 90%;
        max-width: 980px;
        font-size: 24px;
        font-weight: 400;
        text-align: center;
        line-height: calc( 40 / 24 );
    }

    .db-common {
        margin: 60px auto 0;
        padding: 60px 0 0;
        width: 100%;
    }
    .db-common h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        color: var(--color-accent);
        font-size: 60px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }
    .db-common .subtitle {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    .db-common p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }
    #db-about {
        padding: 80px 0;
        background: url(../images/page-db-pic1.jpg) no-repeat top right / auto 100%;
    }
    #db-about p {
        margin: 1.5em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
    }
    #db-strong {
        margin: 0 auto;
        padding: 160px 0 80px;
        width: 100%;
        background: url(../images/page-db-pic2.png) no-repeat top right / 40% auto;
    }
    #db-strong p {
        margin: 1.5em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
    }
    #db-strong h3 {
        margin: 2.0em auto 1.0em;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
        font-size: 32px;
    }
    #db-strong h4 {
        margin: 2.0em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
        font-size: 24px;
    }

    #cloud-about {
        margin: 80px auto 0;
        padding: 80px 0 0;
        width: 100%;
        background: url(../images/page-cloud-pic1.jpg) no-repeat top right / 70% auto;
    }
    #cloud-about p {
        margin: 1.5em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #cloud-area {
        margin: 80px auto 0;
        padding: 80px 0 0;
        width: 100%;
    }
    #cloud-area p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #cloud-strong {
        margin: 0 auto;
        padding: 160px 0 80px;
        width: 100%;
        background: url(../images/page-cloud-pic2.png) no-repeat top right / 40% auto;
    }
    #cloud-strong p {
        margin: 1.5em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #ai-about {
        margin: 80px auto 0;
        padding: 80px 0;
        width: 100%;
        background: url(../images/page-ai-pic1.jpg) no-repeat top right / auto 100%;
    }
    #ai-about p {
        margin: 1.5em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #ai-area {
        margin: 80px auto 0;
        padding: 80px 0 0;
        width: 100%;
    }
    #ai-area p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    #ai-strong {
        margin: 0 auto;
        padding: 160px 0 80px;
        width: 100%;
        background: url(../images/page-ai-pic2.png) no-repeat top right / 40% auto;
    }
    #ai-strong p {
        margin: 1.5em auto 0;
        padding: 0 25% 0 0;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 32 / 16 );
    }

    .common-table {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 0;
    }
    .common-table > dt {
        margin: 0;
        padding: 16px 0;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
        border-bottom: 1px solid #d4dfe9;
    }
    .common-table > dd {
        margin: 0;
        padding: 16px 0;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 16 );
        border-bottom: 1px solid #d4dfe9;
    }

    #company-qualification {
        margin: 0 auto;
        padding: 80px 0;
    }
    #company-organization {
        margin: 0 auto;
        padding: 80px 0;
    }
    .company-flex {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .company-flex .company-head {
        width: 320px;
    }
    .company-flex .company-head h2 {
        margin: 0 auto;
        width: 100%;
        color: var(--color-accent);
        font-size: 40px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: left;
        line-height: calc( 48 / 40 );
    }
    .company-flex .company-head .subtitle {
        margin: 0 auto;
        width: 100%;
        font-size: 16px;
        font-weight: 700;
        text-align: left;
        line-height: calc( 24 / 16 );
    }
    .company-flex .company-info {
        width: calc( 100% - 320px );
    }
    .company-flex .company-info ul {
        margin: 0;
        list-style: none;
    }
    .company-flex .company-info ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 18px;
        font-weight: 500;
        line-height: calc( 40 / 18 );
    }
    .company-flex .company-info ul li::before {
        display: inline-block;
        content: "・";
        margin-right: 0.5em;
        color: var(--color-accent);
        scale: 2.0 2.0;
    }
    .company-flex .company-info ul li + li {
        margin-top: 10px;
    }
    .company-flex .company-info .company-orgs {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px 20px;
    }
    .company-flex .company-info .company-orgs .company-org {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: auto;
        aspect-ratio: 1 / 1;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        line-height: calc( 29 / 20 );
        border: 1px solid var(--color-accent);
        border-radius: 100%;
    }

    #company-philosophy {
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 2732 / 1040;
        background: url(../images/page-company-pic1.jpg) no-repeat center / cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #company-philosophy h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        color: var(--color-accent);
        font-size: 60px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        text-align: center;
        line-height: calc( 48 / 40 );
    }
    #company-philosophy .subtitle {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: calc( 24 / 16 );
    }
    #company-philosophy .txt1,
    #company-philosophy .txt3 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }
    #company-philosophy .txt1 {
        margin-top: 1.0em;
    }
    #company-philosophy .txt2 {
        margin: 0 auto;
        width: 90%;
        max-width: 980px;
        color: var(--color-accent);
        font-size: 120px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }

    #ses-main {
        margin: 0 auto;
        padding: 200px 0 0;
        width: 100%;
    }
    #ses-main .ses-box {
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0;
        padding: 40px;
        width: 90%;
        max-width: 980px;
        font-size: 16px;
        line-height: calc( 32 / 16 );
        background: #fff;
        translate: -50% 0;
    }

    .recruit-common {
        margin: 40px auto 0;
        padding: 40px 0 0;
        width: 100%;
    }
    .recruit-common .recruit-list {
        margin: 40px auto 0;
        padding: 0;
        width: max-content;
        max-width: 800px;
        list-style: disc;
    }
    .recruit-common .recruit-list li {
        margin: 16px auto;
        padding: 0;
        font-size: 18px;
        font-weight: 500;
        list-style: disc;
    }

    #recruit-table {
        margin: 80px auto 0;
        padding: 0 0 80px;
        width: 100%;
    }
    #recruit-table .flex {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #recruit-table .flex > div {
        margin: 0;
        padding: 0;
        width: 48%;
        font-size: 16px;
        font-weight: 400;
        line-height: calc( 30 / 16 );
    }

    #security-policy {
        margin: 40px auto 0;
        padding: 40px 0 80px;
        width: 90%;
        max-width: 980px;
    }
    #security-policy h2 {
        position: relative;
        margin: 1.5em auto 0;
        padding: 0 0 0.5em;
        width: 100%;
        font-size: 20px;
        font-weight: 700;
        text-align: left;
    }
    #security-policy h2::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( to right, var(--color-accent) 120px, #ccc 120px );
    }
    #security-policy p {
        margin: 1.5em auto 0;
        padding: 0;
        width: 100%;
        font-size: 16px;
        line-height: calc( 32 / 16 );
    }
    #security-policy ol {
        margin: 0 auto;
        padding: 0 0 0 2.0em;
        width: 100%;
    }
    #security-policy ol li {
        margin: 1.0em auto;
        padding: 0;
        width: 100%;
        font-size: 16px;
        line-height: calc( 32 / 16 );
    }

}
