@charset "utf-8";

/********************************************
company (会社概要) ページ個別
********************************************/

/* FV 背景(共通 .subfv の背景だけ差し替え) */
.subfv{ background-image: url(../images/company/company_fv_pc.jpg); }
@media (max-width: 768px){
    .subfv{ background-image: url(../images/company/company_fv_sp.jpg); }
}

/********************************************
message(代表メッセージ)
********************************************/
.company__message{ padding: 100px 0; }
.company__message .inner{
    display: flex;
    gap: 20px;
    align-items: center;
}
.message__body{ flex: 1; }
.message__text{
    margin-top: 30px;
    line-height: 2.1;
}
.message__text p + p{ margin-top: 1.8em; }
.message__sign{
    margin-top: 34px;
    text-align: right;
}
.message__sign strong{ font-size: 20px; margin-left: 10px; font-weight: 700; }
.message__photo{
    width: 38%;
    flex-shrink: 0;
}

@media (max-width: 768px){
    .message__body{order: 2;}
    .company__message{ padding: 14vw 0;order: 1; }
    .company__message .inner{ flex-direction: column; gap: 4vw; }
    .message__photo{ width: 60%;margin: 0 auto;overflow: hidden; }
    .message__text{ font-size: 3.2vw; line-height: 2;margin-top: 0; }
    .message__sign{ font-size: 3.2vw; }
    .message__sign strong{ font-size: 4.8vw; }
}

/********************************************
history(沿革)
********************************************/
.company__history{
    background: var(--color-primary);
    color: #fff;
    padding: 90px 0 100px;
}
.company__history .inner{
    max-width: 860px;
}
.history__list{ margin: 0 auto; }
.history__item{
    display: flex;
    gap: 20px;
    padding: 22px 6px;
    border-bottom: 1px solid #FFF;
}
.history__date{
    flex-shrink: 0;
    width: 130px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.history__text{ flex: 1; }

@media (max-width: 768px){
    .company__history{ padding: 14vw 0; }
    .history__item{ gap: 1.5vw; padding: 4vw 1vw; }
    .history__date{ width: 22vw; font-size: 3.2vw;letter-spacing: 0.05em;}
    .history__text{ font-size: 3.2vw; letter-spacing: -0.05em;}
}

/********************************************
company info(会社概要テーブル)
********************************************/
.company__info{ padding: 100px 0; }
.company__info .inner{
    max-width: 860px;
}
.info__table{
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}
.info__table th,
.info__table td{
    text-align: left;
    vertical-align: top;
    padding: 22px 10px;
    border-bottom: 1px solid var(--color-line);
    line-height: 1.8;
}
.info__table th{
    width: 180px;
    color: var(--color-primary);
    font-weight: 700;
}
.info__table td{ font-weight: 400; }
.info__table a{ color: var(--color-primary); text-decoration: underline; }

@media (max-width: 768px){
    .company__info{ padding: 14vw 0 16vw; }
    .info__table th,
    .info__table td{ padding: 0; font-size: 3.2vw;padding: 3vw 0;}
    .info__table th{ width: 20vw; }
}