/*========================================
  建築会社 詳細ページ
  デザイン幅 1600px
========================================*/
.company-detail {
    padding-bottom: 130.4px;
}

/* 見出し・表・カードを収める内側カラム */
.company-detail__inner {
    max-width: 1197px;
    margin: 0 auto;
}

/* 本文まわりは内側カラムより一段内側に入る */
.company-detail__text {
    padding: 0 17px;
}

/*----------------------------------------
  ページ見出し
----------------------------------------*/
.company-detail__head {
    padding-top: 19.1px;
    text-align: center;
}

.company-detail__icon {
    display: block;
    width: 44.82px;
    height: auto;
    margin: 0 auto;
}

.company-detail__page-title {
    margin-top: 7.35px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-indent: 0.08em;
}

.company-detail__line {
    display: block;
    width: 153.23px;
    height: auto;
    margin: 24.15px auto 0;
}

/*----------------------------------------
  会社名 ＋ タグ ＋ お気に入り
----------------------------------------*/
.company-detail__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    max-width: 1050px;
    margin: 18.65px auto 0;
}

.company-detail__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.company-detail__tags {
    display: flex;
    flex-wrap: wrap;
    /* タグ数によっては折り返すので、行間も少し空ける */
    gap: 5px 22.4px;
    margin-top: 2.6px;
    color: #a7ce7a;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

.company-detail__fav {
    flex: 0 0 auto;
    width: 52.41px;
    height: 52.41px;
    margin-top: 5.75px;
    transition: opacity 0.3s;
}

.company-detail__fav img {
    display: block;
    width: 100%;
    height: auto;
}

/* スライダー本体は common.css の .slider を使う。ドットの色だけ差し替える */
.company-detail .slider {
    margin-top: 13.5px;
}

.company-detail .slider .slick-dots {
    margin-top: 24.71px;
}

.company-detail .slider .slick-dots li.slick-active button::before {
    background: #a7ce7a;
}

/*----------------------------------------
  リード ＋ 本文
----------------------------------------*/
.company-detail__lead {
    margin-top: 31.1px;
    color: #a7ce7a;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 32px;
}

.company-detail__body {
    margin-top: 35.3px;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 38px;
}

/*----------------------------------------
  セクション見出し（Topics / Message / Movie / Access）
----------------------------------------*/
.company-detail__section-title {
    padding: 0 0 6.4px 17px;
    border-bottom: 3px solid #a7ce7a;
    color: #a7ce7a;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1;
}

/*----------------------------------------
  Topics
----------------------------------------*/
.company-detail__topics {
    margin-top: 48.2px;
}

.company-detail__topic {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    padding: 0 19px 0 33px;
}

/* 見出しが先頭なので :first-child ではなく隣接セレクタで指定する */
.company-detail__section-title + .company-detail__topic {
    margin-top: 27.5px;
}

.company-detail__topic + .company-detail__topic {
    margin-top: 41px;
}

/* 縦長・横長どちらでも切り抜かず、枠に収まるよう長辺揃えで見せる。
   余白は写真を邪魔しない薄いグレーで埋める */
.company-detail__topic-figure {
    flex: 0 0 416px;
    width: 416px;
    aspect-ratio: 416 / 400;
    background: #f2f1f1;
    overflow: hidden;
}

.company-detail__topic-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.company-detail__topic-body {
    flex: 1 1 auto;
    min-width: 0;
}

.company-detail__topic-head {
    display: flex;
    align-items: center;
    gap: 18.4px;
    margin-top: 4px;
}

.company-detail__topic-num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 12px;
    background: #a7ce7a;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.company-detail__topic-title {
    color: #a7ce7a;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 32px;
}

.company-detail__topic-text {
    margin-top: 19.2px;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 38px;
}

/*----------------------------------------
  Message
----------------------------------------*/
.company-detail__message {
    margin-top: 51.5px;
}

.company-detail__message-body {
    display: flex;
    align-items: flex-start;
    gap: 35.8px;
    margin-top: 38.5px;
    padding: 0 19px 0 28px;
}

.company-detail__message-profile {
    flex: 0 0 305px;
    width: 305px;
}

.company-detail__message-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 33.83px;
    background: #a7ce7a;
}

/* 写真が登録されているときは、緑地のノーイメージではなく写真を敷き詰める */
.company-detail__message-figure--photo {
    background: #eae8e9;
}

.company-detail__message-figure--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-detail__message-figure img {
    display: block;
    width: 207px;
    height: auto;
}

.company-detail__message-name {
    margin-top: 19.2px;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 22px;
}

.company-detail__message-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 43px;
}

/*----------------------------------------
  Company data
----------------------------------------*/
.company-detail__data-section {
    margin-top: 65.5px;
}

/* 表の上罫線が見出しの下線を兼ねるので、見出し側には引かない */
.company-detail__data-title {
    padding: 0 0 0 17px;
    border-bottom: 0;
}

.company-detail__data {
    width: 100%;
    margin-top: 12.7px;
    border-top: 3px solid #a7ce7a;
    border-bottom: 3px solid #a7ce7a;
    border-collapse: collapse;
    table-layout: fixed;
}

.company-detail__data tr + tr th,
.company-detail__data tr + tr td {
    border-top: 1px solid #ccc;
}

.company-detail__data th,
.company-detail__data td {
    padding: 12.4px 0;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 34px;
    vertical-align: middle;
}

.company-detail__data th {
    width: 192.5px;
    padding-left: 27.5px;
    background: #eaf9d7;
}

.company-detail__data td {
    padding-left: 33px;
}

.company-detail__sns {
    display: flex;
    align-items: center;
    gap: 34.9px;
}

.company-detail__sns a {
    display: block;
    width: 29px;
    transition: opacity 0.3s;
}

.company-detail__sns img {
    display: block;
    width: 100%;
    height: auto;
}

/*----------------------------------------
  Movie
----------------------------------------*/
.company-detail__movie {
    margin-top: 90.6px;
}

.company-detail__movie-frame {
    width: 936px;
    margin: 42.1px auto 0;
    aspect-ratio: 936 / 530.75;
    background: #a7ce7a;
    overflow: hidden;
}

.company-detail__movie-frame iframe,
.company-detail__movie-frame video,
.company-detail__movie-frame img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.company-detail__movie-text {
    max-width: 845px;
    margin: 18px auto 0;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 43px;
}

/*----------------------------------------
  問い合わせボタン ＋ 注記
----------------------------------------*/
.company-detail__contact {
    margin-top: 71.7px;
}

.company-detail__contact-btns {
    display: flex;
    justify-content: center;
    gap: 23px;
}

.company-detail__contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 412px;
    height: 70px;
    border-radius: 7.73px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.21em;
    line-height: 1;
    text-indent: 0.21em;
    transition: opacity 0.3s;
}

.company-detail__contact-btn--tel {
    background: #a7ce7a;
}

.company-detail__contact-btn--request {
    background: #e28383;
}

.company-detail__contact-note {
    max-width: 813px;
    margin: 22.1px auto 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 24.7px;
}

/*----------------------------------------
  Access
----------------------------------------*/
.company-detail__access {
    margin-top: 89.7px;
}

.company-detail__map {
    margin-top: 30.5px;
    aspect-ratio: 1201 / 442;
    border-radius: 23.58px;
    background: #c4c2c3;
    overflow: hidden;
}

.company-detail__map iframe,
.company-detail__map img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/*----------------------------------------
  この会社のイベント・見学会
----------------------------------------*/
.company-detail__events {
    margin-top: 52.4px;
}

.company-detail__events-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    text-indent: 0.02em;
}

.company-detail__events-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 40px 24px;
    margin-top: 24.5px;
}

.company-detail__event {
    display: flex;
    flex-direction: column;
}

/* min-height: 0 が無いと、flexアイテムの自動最小サイズ（画像の高さ）が
   aspect-ratio より優先されて、画像によって数px高くなってしまう */
.company-detail__event-figure {
    min-height: 0;
    aspect-ratio: 1;
    background: #c4c2c3;
    overflow: hidden;
}

.company-detail__event-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-detail__event-title {
    align-self: flex-start;
    /* line-height のぶん上下に余白が付くので、その半分を差し引いておく */
    margin-top: 15.8px;
    padding: 0 6px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* 罫線だと2行になったとき、短い2行目の下にも枠いっぱいの線が引かれてしまう。
   背景で描いて box-decoration-break: clone にすると、行ごとに文字幅だけ線がつく */
.company-detail__event-title span {
    padding-bottom: 4.4px;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.company-detail__event-date {
    margin-top: 7.3px;
    padding-left: 6px;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 28px;
}

/*----------------------------------------
  他の建築会社を見る（枠線ボタン）
----------------------------------------*/
.company-detail__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 412px;
    height: 70px;
    margin: 70.1px auto 0;
    border: 1px solid gray;
    border-radius: 7.73px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: 1;
    text-indent: 0.25em;
    transition: opacity 0.3s;
}

/* 実例一覧は common.css の .related-works（白背景）を使う */
.company-detail .related-works {
    padding-top: 107.4px;
    padding-bottom: 0;
    background: transparent;
}

@media (hover: hover) {
    .company-detail__fav:hover,
    .company-detail__contact-btn:hover,
    .company-detail__more:hover,
    .company-detail__sns a:hover,
    .company-detail__event-title a:hover {
        opacity: 0.7;
    }
}

/*========================================
  SP / タブレット（1023px 以下）
========================================*/
@media screen and (max-width: 1023px) {
    .company-detail {
        padding-bottom: 56px;
    }

    .company-detail__inner {
        padding: 0 16px;
    }

    .company-detail__text {
        padding: 0;
    }

    .company-detail__head {
        padding-top: 8px;
    }

    .company-detail__icon {
        width: 36px;
    }

    .company-detail__page-title {
        margin-top: 10px;
        font-size: 20px;
    }

    .company-detail__line {
        width: 110px;
        margin-top: 12px;
    }

    /* 会社名 */
    /* work_detail と同じ組み方。1段目にお気に入り（右）、2段目にタイトル */
    .company-detail__title-row {
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0;
        margin-top: 20px;
        padding: 0 16px;
    }

    .company-detail__title-block {
        order: 1;
        flex: 0 0 100%;
        min-width: 0;
        margin-top: 10px;
    }

    .company-detail__title {
        font-size: 19px;
    }

    .company-detail__tags {
        gap: 4px 14px;
        font-size: 14px;
    }

    /* work_detail と揃えて、お気に入りは1段目の右端に置く */
    .company-detail__fav {
        width: 38px;
        height: 38px;
        margin: 0 0 0 auto;
    }

    .company-detail .slider {
        margin-top: 16px;
    }

    .company-detail .slider .slick-dots {
        margin-top: 16px;
    }

    /* リード・本文 */
    .company-detail__lead {
        margin-top: 24px;
        font-size: 17px;
        line-height: 1.6;
    }

    .company-detail__body {
        margin-top: 16px;
        font-size: 14px;
        line-height: 2;
    }

    .company-detail__section-title {
        padding-left: 0;
        padding-bottom: 5px;
        font-size: 17px;
    }

    /* Topics */
    .company-detail__topics {
        margin-top: 32px;
    }

    .company-detail__topic {
        display: block;
        padding: 0;
    }

    .company-detail__section-title + .company-detail__topic {
        margin-top: 20px;
    }

    .company-detail__topic + .company-detail__topic {
        margin-top: 32px;
    }

    .company-detail__topic-figure {
        width: 100%;
        flex: none;
    }

    .company-detail__topic-head {
        gap: 12px;
        margin-top: 16px;
    }

    .company-detail__topic-num {
        width: 52px;
        height: 52px;
        border-radius: 8px;
        font-size: 28px;
    }

    .company-detail__topic-title {
        font-size: 16px;
        line-height: 1.5;
    }

    .company-detail__topic-text {
        margin-top: 12px;
        font-size: 14px;
        line-height: 2;
    }

    /* Message */
    .company-detail__message {
        margin-top: 40px;
    }

    .company-detail__message-body {
        display: block;
        margin-top: 20px;
        padding: 0;
    }

    .company-detail__message-profile {
        width: 200px;
        flex: none;
    }

    .company-detail__message-figure {
        border-radius: 22px;
    }

    .company-detail__message-figure img {
        width: 136px;
    }

    .company-detail__message-name {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    .company-detail__message-text {
        margin-top: 20px;
        font-size: 14px;
        line-height: 2;
    }

    /* Company data */
    .company-detail__data-section {
        margin-top: 40px;
    }

    .company-detail__data-title {
        padding-left: 0;
    }

    .company-detail__data th,
    .company-detail__data td {
        padding: 10px 0;
        font-size: 13px;
        line-height: 1.7;
    }

    .company-detail__data th {
        width: 100px;
        padding-left: 10px;
    }

    .company-detail__data td {
        padding-left: 12px;
    }

    .company-detail__sns {
        gap: 16px;
    }

    .company-detail__sns a {
        width: 24px;
    }

    /* Movie */
    .company-detail__movie {
        margin-top: 40px;
    }

    .company-detail__movie-frame {
        width: 100%;
        margin-top: 20px;
    }

    .company-detail__movie-text {
        margin-top: 12px;
        font-size: 14px;
        line-height: 2;
    }

    /* 問い合わせ */
    .company-detail__contact {
        margin-top: 40px;
    }

    .company-detail__contact-btns {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .company-detail__contact-btn {
        width: 100%;
        max-width: 340px;
        height: 56px;
        font-size: 14px;
        letter-spacing: 0.12em;
        text-indent: 0.12em;
    }

    .company-detail__contact-note {
        margin-top: 16px;
        font-size: 13px;
        line-height: 1.8;
    }

    /* Access */
    .company-detail__access {
        margin-top: 40px;
    }

    .company-detail__map {
        margin-top: 20px;
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    /* イベント */
    .company-detail__events {
        margin-top: 40px;
    }

    .company-detail__events-title {
        font-size: 18px;
    }

    .company-detail__events-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 12px;
        margin-top: 20px;
    }

    .company-detail__event-title {
        margin-top: 9px;
        padding: 0 4px;
        font-size: 15px;
    }

    .company-detail__event-title span {
        padding-bottom: 3px;
    }

    .company-detail__event-date {
        margin-top: 5px;
        padding-left: 4px;
        font-size: 13px;
        line-height: 1.6;
    }

    .company-detail__more {
        width: 100%;
        max-width: 340px;
        height: 56px;
        margin-top: 40px;
        font-size: 14px;
        letter-spacing: 0.12em;
        text-indent: 0.12em;
    }

    .company-detail .related-works {
        padding-top: 40px;
    }
}