@charset "UTF-8";
/******************************************************************************/
/* アクロスホーム 会社概要 CSS                                                */
/*----------------------------------------------------------------------------*/
/* モバイル向けメディアクエリ                                                 */
/*   現在はスマホもタブレットも区別せず max-width: 767px で統一               */
/*   ・タブレット：max-width: 959px                                           */
/*   ・スマホ    ：max-width: 480px                                           */
/******************************************************************************/


body {
    background-color    : #f3f2e9;
}


/*
################################################################################
#                                                                              #
#  ページヘッダ：メインビジュアル                                              #
#                                                                              #
################################################################################
*/

.main-visual {
    display             : flex;
    justify-content     : center;
    align-items         : center;
    height              : 80vh;
    min-height          : 720px;
    padding-bottom      : 100px;
    background-color    : #c9c7b8;
    background          : url( /wp/wp-content/themes/wp-templ/assets_new/page-company/images/main_visual.webp );
    background-size     : cover;
    background-position : center;
}

.main-visual__catch {
    font-size           : 5.5rem;
    font-weight         : bold;
    color               : #fff;
    letter-spacing      : 0.26em;
    text-align          : center;
}

@media (max-width: 767px){
    .main-visual__catch {
      font-size         : 3rem;
    }
}


/*
################################################################################
#                                                                              #
#  会社情報                                                                    #
#                                                                              #
################################################################################
*/

.company-info {
    position            : relative;
    width               : 94%;
    margin              : -100px auto 0;
}

.company-info__layout {
    padding             : 10px;
    background-color    : #fff;
    color               : #424242;
    border              : solid 1px #e7e6de;
    border-radius       : 25px;
}

@media screen and (max-width: 767px){

    .company-info {
        width           : calc( 100% - 20px );
    }

    .company-info__layout {
        padding         : 10px 10px 30px;
    }

}


/*----------------------------------------------------------------------------*/
/*  会社ロゴ                                                                  */
/*----------------------------------------------------------------------------*/

.company-info__logo {
    display             : block;
    width               : 297px;
    height              : auto;
    margin              : 75px auto 50px;
}

@media screen and (max-width: 767px){

    .company-info__logo {
        width           : 210px;
    }

}


/*----------------------------------------------------------------------------*/
/*  会社情報リスト                                                            */
/*----------------------------------------------------------------------------*/

.info-item {
    display             : flex;
    font-size           : 1.5rem;
}

.info-item__title {
    min-width           : 160px;
    font-weight         : bold;
}

.info-item__items {
    padding-left        : 40px;
}

.info-item__value {
    padding-left        : 40px;
}

.info-item_license {
    list-style-type     : disc;
    padding-left        : 60px;
}

.info-item_license--layout {
    margin-bottom       : 0.5em;
}

.product-images {
    display             : flex;
    margin-bottom       : 18px;
    font-size           : 1.3rem;
    text-align          : center;
    text-indent         : var( --ti-adjust );
    gap                 : 25px;
}

.product-list {
    list-style-type     : '■';
    padding-left        : 18px;
}

.product-list__item--design {
    font-weight         : bold;
}

.base-kojima,
.base-kabatake {
    margin-bottom       : 30px;
}

.base-green {
    margin-bottom       : 0;
}

.base-kojima__name,
.base-kabatake__name,
.base-green__name {
    font-size           : 1.5rem;
    font-weight         : 900;
}

.base-kojima__link,
.base-kabatake__link,
.base-green__link {
    position            : relative;
    display             : inline-flex;
    align-items         : center;
    gap                 : 5px;
}

.base-kojima__text,
.base-kabatake__text,
.base-green__text {
    margin-top          : 10px;
}

@media screen and ( max-width: 767px ){
    .info-item {
        flex-direction  : column;
    }

    .info-item__title {
        padding-bottom  : 4px;
        border-right    : none;
    }

    .info-item__value {
        padding-left    : 0;
    }

    .info-item_license {
        padding-left    : 20px;
    }

    .product-images {
        justify-content : space-between;
        margin-bottom   : 14px;
        font-size       : 1.2rem;
        gap             : 0;
    }

    .product-list {
        padding-left    : 15px;
    }

    .base-kojima__name,
    .base-kabatake__name,
    .base-green__name {
        width           : 100%;
        margin-bottom   : 30px;
    }

    .company-info__separater {
        width           : 100%;
        border          : 0 none;
        height          : 1px;
        background-color: rgba( 224, 224, 224, 0.9 );
    }

}


/*----------------------------------------------------------------------------*/
/*  ピックアップリスト                                                        */
/*----------------------------------------------------------------------------*/

.company-news {
    width               : 100%;
    overflow            : hidden;
}

.pickup-list {
    display             : flex;
    justify-content     : center;
    width               : 80%;
    padding             : 40px 0;
    margin              : 40px auto;
    border-top          : solid 1px #cecece;
    gap                 : 30px;
}

.pickup-list__item {
    display             : block;
    width               : 310px;
    margin              : 0 15px;
}

.pickup-list__image {
    display             : block;
    width               : 100%;
    height              : auto;
    aspect-ratio        : 1.7 / 1;
    object-fit          : cover;
    object-position     : top;
    border              : solid 1px #ddd;
}

.pickup-list__title {
    display             : -webkit-box;
    -webkit-box-orient  : vertical;
    -webkit-line-clamp  : 2;
    overflow            : hidden;
    margin              : 12px auto;
    font-size           : 1.8rem;
    font-weight         : 900;
}

.pickup-list__text {
    display             : -webkit-box;
    -webkit-box-orient  : vertical;
    -webkit-line-clamp  : 3;
    overflow            : hidden;
    font-size           : 1.2rem;
}

.pickup-list__date {
    margin-top          : 6px;
    padding-right       : 1em;
    font-size           : 1.2rem;
    font-weight         : 700;
    color               : #333;
    text-align          : right;
}

@media screen and (max-width: 767px){
    .pickup-list.sp {
        width           : calc( 100% + 40px );
        position        : relative;
        left            : -20px;
        background-color: #fff;
        border-bottom   : solid 1px #cecece;
    }

    .pickup-list__item {
        width           : 73vw;
    }

    .pickup-list__title {
        font-size       : 1.8rem;
        font-weight     : 900;
    }
}


/*----------------------------------------------------------------------------*/
/*  他ページへのリンク                                                        */
/*----------------------------------------------------------------------------*/

.links {
    flex-wrap           : wrap;
    width               : calc( 100% - 20px );
    max-width           : 1310px;
    margin              : 75px auto;
    transition-duration : 0.5s;
    gap                 : 60px 35px;
}

.links__layout {
    display             : flex;
    align-items         : center;
    justify-content     : center;
    flex-wrap           : wrap;
    width               : 100%;
    gap                 : 60px 35px;
}

.links__item {
    display             : flex;
    align-items         : center;
    justify-content     : center;
    flex-direction      : column;
    width               : 22%;
    transition-duration : .3s;
}

.links__lineup,
.links__model,
.links__works,
.links__voice {
    display             : flex;
    justify-content     : center;
    align-items         : center;
    width               : 90%;
    height              : auto;
    aspect-ratio        : 1 / 1;
    overflow            : hidden;
    margin-right        : -0.25em;
    font-size           : 3rem;
    font-weight         : bold;
    text-align          : center;
    color               : #fff;
    background-size     : 100%;
    background-position : center;
    background-color    : #eee;
    border-radius       : 50%;
    transition-duration : .3s;
}

.links__lineup:hover,
.links__model:hover,
.links__works:hover,
.links__voice:hover {
    background-size     : 120%;
}

.links__text {
    margin-top          : 10px;
    line-height         : 1em;
    font-size           : 1.2rem;
}

.links__lineup {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets_new/page-company/images/circle_lineup.webp );
}

.links__model {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets_new/page-company/images/circle_modelhouse.webp );
}

.links__works {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets_new/page-company/images/circle_works.webp );
}

.links__voice {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets_new/page-company/images/circle_voice.webp );
}

@media screen and ( max-width: 767px ){

    .links {
        width           : 100%;
        margin          : 30px auto;
    }

    .links__layout {
        justify-content : space-evenly;
        gap             : 35px 0;
    }

    .links__item {
        width           : 45%;
        height          : auto;
    }

    .links__lineup,
    .links__model,
    .links__works,
    .links__voice {
        width           : 95%;
        font-size       : 1.8rem;
    }

}


/*----------------------------------------------------------------------------*/
/* End of Files                                                               */
/*----------------------------------------------------------------------------*/