@charset "utf-8";

/*　====================================================
共通css
====================================================*/
body {
    background-color: #F0F0F0;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
}

.section_title {
    margin-bottom: 5.1rem;
}

.section_title .en {
    font-size: 3.6rem;
    letter-spacing: 1.08rem;
    display: block;
    margin-bottom: 2.1rem;
}

.section_title .ja {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 4rem;
}

.section_title::after {
    content: "";
    width: 4rem;
    height: 0.1rem;
    background-color: black;
    display: block;
}

/*　====================================================
ヘッダー
====================================================*/
header {
    max-width: 100vw;
    height: 8rem;
}

.header_inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.header_left {
    display: flex;
    align-items: center;
}

.logo {
    width: 10.039rem;
    margin-left: 9.1rem;
    margin-right: 6rem;
}

.nav_wrap {
    display: flex;
    gap: 3rem;
}

header a {
    color: black;
}

header a:visited {
    color: black;
}

.contact {
    width: 20rem;
    height: 100%;
    background-color: #000;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact:visited {
    color: #fff;
}

/*　====================================================
メインビジュアル
====================================================*/
.mainvisual {
    width: 100vw;
    height: 60rem;
    margin-bottom: 13rem;
}

/*　====================================================
ニュース
====================================================*/
.news {
    max-width: 100rem;
    margin: 0 auto 12rem;
}

.news_wrap {
    display: flex;
}

.news_item {
    width: calc(100%/3);
    border-right: 0.1rem solid #000;
    padding: 1rem 2rem;
    color: #000;
}

.news_item:last-child {
    border-right: none;
    padding-right: 0;
}

.date_area {
    margin-bottom: 1.9rem;
}

.news_date {
    font-size: 1.4rem;
    margin-right: 1.9rem;
}

.news_tag {
    font-size: 1.2rem;
    padding: 0.2rem 0.7rem;
    background-color: black;
    color: white;
}

.news_title {
    font-size: 1.6rem;
}

/*　====================================================
アバウト
====================================================*/
.about {
    width: 100vw;
    display: flex;
    margin-bottom: 13.4rem;
}

.about_img {
    width: 54.3%;
    height: 40rem;
    object-fit: cover;
}

.about_text_area {
    width: 45.7%;
}

.about_text_wrap {
    max-width: 47.3rem;
    margin: 19rem auto 0;
    display: block;
    line-height: 1.4;
    font-size: 1.4rem;
}

.about_detail_text {
    font-size: 1.4rem;
    line-height: 1.8;
}

/*　====================================================
ビジネス
====================================================*/
.business {
    max-width: 90rem;
    margin: 0 auto 12rem;
}

.business_wrap {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    gap: 6.4rem;
    justify-content: space-between;
}

/* 左側 */
.business .left {
    width: 50%;
    /* 左側のみ上に余白あり */
    margin-top: 10rem;
}

/* 右側 */
.business .right {
    width: 50%;
}

/* アイテム */
.business_item {
    margin-bottom: 5.3rem;
}

.business_item:last-child {
    margin-bottom: 0;
}

.business_item .title {
    font-weight: bold;
    position: relative;
    margin: 0 0 1rem 1.8rem;
}

.business_item .title::before {
    content: "";
    background-color: black;
    width: 0.8rem;
    height: 0.1rem;
    position: absolute;
    top: 50%;
    left: -1.8rem;
}

.bushiness_img {
    width: 36.8rem;
    height: 23.2rem;
}

/*　====================================================
カンパニー
====================================================*/
.company {
    max-width: 100rem;
    margin: 0 auto 11rem;
}

.company_contents {
    max-width: 56.7rem;
    padding: 11rem 6.2rem 10.4rem 6.2rem;
    background-color: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.company_text_wrap {
    max-width: 44.3rem;
}

.company_img_wrap {
    width: 54.7rem;
    height: 40rem;
    position: absolute;
    top: 12rem;
    left: 50rem;
}

.company_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info {
    display: flex;
    flex-wrap: wrap;
}

/* タイトル（左側） */
.info dt {
    width: 20%;
    margin-bottom: 1.7rem;
}

/* 内容（右側） */
.info dd {
    width: 80%;
}

/* 事業内容のリスト（li）の余白調整 */
.business_list li {
    margin-bottom: 1.1rem;
}

/* リストの一番下は余白をなくしてdtと高さを揃える */
.business_list li:last-child {
    margin-bottom: 0;
}

/*　====================================================
フッター
====================================================*/
.footer {
    max-width: 128rem;
    padding: 4.4rem 20rem;
    background-color: #FFFFFF;
}

.footer_info_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .logo {
    margin-right: 0;
    margin-left: 0;
}

.footer .copyright {
    font-size: 1.2rem;
}

.footer_info_wrap {
    font-size: 1.4rem;
}

@media (max-width: 699.98px) {

    /*　====================================================
    共通css
    ====================================================*/
    .pc_only {
        display: none;
    }

    .section_title {
        margin-bottom: 2.1rem;
    }

    .section_title .ja {
        margin-bottom: 2.8rem;
    }

    .section_title::after {
        margin-bottom: 4.5rem;
    }

    /*　====================================================
    ヘッダー
    ====================================================*/
    .header_left {
        display: block;
        margin: 1.6rem 1.6rem;
    }

    .logo {
        width: 8rem;
        margin: 0 0 1.152rem;
    }

    header a {
        font-size: 1.4rem;
    }

    /*　====================================================
    メインビジュアル
    ====================================================*/
    .mainvisual {
        margin-bottom: 9rem;
    }

    /*　====================================================
    ニュース
    ====================================================*/
    .news {
        max-width: 33.1rem;
        margin: 0 auto 9.5rem;
    }

    .news_wrap {
        display: block;
    }

    .news_item {
        width: 100%;
        border: none;
        padding: 0;
    }

    .date_area {
        margin-bottom: 2.2rem;
    }

    .news_title {
        margin-bottom: 4.6rem;
    }

    /*　====================================================
    アバウト
    ====================================================*/
    .about {
        display: block;
        margin-bottom: 9.4rem;
    }

    .about_img {
        width: 100%;
        height: 30rem;
        margin-bottom: 4rem;
    }

    .about_text_area {
        width: 100%;
    }

    .about_text_wrap {
        max-width: 33.1rem;
        margin: 0 auto;
    }

    /*　====================================================
    ビジネス
    ====================================================*/
    .business {
        max-width: 100%;
        margin-bottom: 8rem;
    }

    .business_inner {
        max-width: 33.1rem;
        margin: 0 auto;
    }


    .business_wrap {
        max-width: 100%;
        display: block;
    }

    /* 左側 */
    .business .left {
        width: 100%;
        margin-top: 0;
        margin-bottom: 3.3rem;
    }

    /* 右側 */
    .business .right {
        width: 100%;
    }

    /* アイテム */
    .business_item {
        max-width: 33.1rem;
        margin: 0 auto 3.3rem;
    }

    .business_item .title {
        margin: 0 0 1.3rem 2rem;
    }

    .business_item .title::before {
        left: -1rem;
    }

    .bushiness_img {
        width: 100%;
        height: 23.2rem;
    }

    /*　====================================================
    カンパニー
    ====================================================*/
    .company {
        max-width: 100%;
        height: 63.5rem;
        margin: 0 auto 51.4rem;
    }

    .company_contents {
        max-width: 29rem;
        margin: 0 auto;
        padding: 5rem 2rem 4.4rem 2rem;
        position: relative;
        display: block;
    }

    .company_text_wrap {
        max-width: 30.3rem;
        font-size: 1.4rem;
    }

    .company_img_wrap {
        width: 100%;
        position: absolute;
        top: 74.8rem;
        left: 0;
    }

    .info {
        display: block;
    }

    .info dt {
        width: 100%;
        margin-bottom: 1.2rem;
    }

    .info dd {
        width: 100%;
        margin-left: 1.4rem;
        margin-bottom: 2.7rem;
    }

    /* 事業内容リストの余白 */
    .business_list li {
        margin-bottom: 0;
    }

    /*　====================================================
    フッター
    ====================================================*/
    .footer {
        max-width: 100%;
        padding: 4rem 1.6rem;
    }

    .footer_info_wrap {
        display: block;
        max-width: 33.1rem;
        margin: 0 auto;
    }

    .info {
        margin-bottom: 4.7rem;
    }

    .copyright {
        max-width: 33.1rem;
        margin: 0 auto;
    }

}