/**
 * HIDESIGN | ABOUT
 * 固定ページ /about/ 専用
 * COMPANY / PHILOSOPHY / WORKS / MESSAGE / HISTORY
 */

.about-page,
.about-page *,
.about-page *::before,
.about-page *::after {
    box-sizing: border-box;
}

/* PROCESS / PATENTS と統一した背景・ページ幅 */
.about-page {
    width: 100vw;
    max-width: none !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0;
    background: #f3f3f3;
    color: #202020;
    font-family: inherit;
}

.about-page__inner {
    width: 87.5%;
    margin: 0 auto;
    padding: 45px 0 65px;
}

/* Twenty Twenty-Five 固定ページテンプレートの余白補正 */
body.page:has(.about-page) .wp-block-post-title {
    display: none;
}

body.page:has(.about-page) .wp-site-blocks .wp-block-group:has(.about-page),
body.page:has(.about-page) .wp-site-blocks .wp-block-post-content:has(.about-page),
body.page:has(.about-page) .wp-site-blocks main:has(.about-page):not(.about-page) {
    margin-block-start: 0 !important;
    padding-block-start: 0 !important;
}

/* 外側の下余白も薄グレーで埋める */
body.page:has(.about-page) .wp-site-blocks > main:has(.about-page),
body.page:has(.about-page) .wp-site-blocks .wp-block-post-content:has(.about-page),
body.page:has(.about-page) .wp-site-blocks main .wp-block-group:has(.about-page) {
    background-color: #f3f3f3 !important;
}

body.page:has(.about-page) {
    overflow-x: clip;
}

body.page:has(.about-page) .wp-site-blocks > footer,
body.page:has(.about-page) footer.wp-block-template-part {
    width: 100vw !important;
    max-width: none !important;
}

/* ページタイトル */
.about-page__title {
    margin: 0 !important;
    padding: 0;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .015em;
}

.about-page__subtitle {
    margin: 9px 0 0 !important;
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .07em;
}

/* COMPANY以下はページ中央の細いカラム */
.about-page__sections {
    width: 62.5%;
    margin: 24px auto 0;
}

.about-section {
    margin: 0;
    padding: 0;
}

.about-section + .about-section {
    margin-top: 36px;
}

.about-section__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin: 0 !important;
    padding: 0 16px 10px;
    border-bottom: 2px solid #c6c6c6;
    font-weight: 400;
    line-height: 1.4;
}

.about-section__english {
    font-family: var(--font-en, inherit);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .045em;
}

.about-section__japanese {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
}

/* COMPANY */
.about-company__list {
    margin: 0 !important;
    padding: 0 !important;
}

.about-company__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
    min-height: 45px;
    padding: 11px 24px;
    border-bottom: 1px solid #d1d1d1;
    font-size: 11px;
    line-height: 1.75;
    letter-spacing: .035em;
}

.about-company__label,
.about-company__value {
    margin: 0 !important;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    overflow-wrap: anywhere;
}

/* PHILOSOPHY */
.about-philosophy__statement {
    margin: 27px 0 0 !important;
    padding: 0 10px;
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: .07em;
    text-align: center;
}

/* WORKS：ACFで登録したロゴ一覧の画像1枚をそのまま表示 */
.about-works__visual {
    width: 84%;
    margin: 31px auto 0;
    text-align: center;
}

.about-works__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.about-works__actions {
    display: flex;
    justify-content: flex-end;
    margin: 25px 0 0;
}

.about-works__button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    width: 194px;
    max-width: 100%;
    min-height: 37px;
    padding: 9px 14px;
    border: 1px solid #cfcfcf;
    border-bottom: 2px solid #262626;
    background: transparent;
    color: #202020;
    font-family: var(--font-en, inherit);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .03em;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.about-works__button:hover,
.about-works__button:focus-visible {
    background: #222;
    border-color: #222;
    color: #fff;
}

.about-works__arrow {
    font-size: 20px;
    line-height: .8;
    font-weight: 300;
}

/* MESSAGE */
.about-message__visual {
    margin: 18px auto 0;
    text-align: center;
}

.about-message__photo {
    display: block;
    width: min(100%, 260px);
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
    background: #d1d1d1;
}

.about-message__content {
    width: 84%;
    margin: 18px auto 0;
}

.about-message__body {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .028em;
    overflow-wrap: anywhere;
}

/* WYSIWYGの文章は段落間を控えめに */
.about-message__body p {
    margin: 0 0 .85em !important;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.about-message__body p:last-child {
    margin-bottom: 0 !important;
}

.about-message__body ul,
.about-message__body ol {
    margin: .6em 0;
    padding-left: 1.5em;
}

.about-message__body img {
    max-width: 100%;
    height: auto;
}

.about-message__signoff {
    margin: 18px 0 0;
    text-align: right;
}

.about-message__signature-image {
    display: block;
    width: auto;
    max-width: 200px;
    height: auto;
    margin: 0 0 8px auto;
}

.about-message__identity {
    margin: 0 !important;
    padding: 0;
    font-size: 11px;
    line-height: 1.75;
    letter-spacing: .03em;
}

.about-message__identity span {
    display: block;
}

/* HISTORY */
.about-history__list {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.about-history__row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    column-gap: 18px;
    margin: 0;
    padding: 10px 24px;
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: .035em;
}

.about-history__date {
    font-weight: 400;
    white-space: nowrap;
}

.about-history__description {
    overflow-wrap: anywhere;
}

/* タブレット */
@media (max-width: 1000px) {
    .about-page__sections {
        width: 77%;
    }

    .about-works__visual,
    .about-message__content {
        width: 90%;
    }
}

/* スマートフォン */
@media (max-width: 680px) {
    .about-page__inner {
        width: calc(100% - 40px);
        padding: 36px 0 60px;
    }

    .about-page__title {
        font-size: 28px;
    }

    .about-page__sections {
        width: 100%;
        margin-top: 36px;
    }

    .about-section + .about-section {
        margin-top: 38px;
    }

    .about-section__heading {
        padding: 0 8px 9px;
    }

    .about-company__row {
        grid-template-columns: 80px minmax(0, 1fr);
        column-gap: 12px;
        padding: 11px 8px;
        font-size: 11px;
    }

    .about-philosophy__statement {
        margin-top: 24px !important;
        font-size: 15px;
    }

    .about-works__visual,
    .about-message__content {
        width: 100%;
    }

    .about-works__actions {
        margin-top: 22px;
    }

    .about-works__button {
        width: 180px;
    }

    .about-message__photo {
        width: min(100%, 260px);
    }

    .about-history__row {
        grid-template-columns: 74px minmax(0, 1fr);
        column-gap: 11px;
        padding: 10px 8px;
    }
}


/* ========================================
   ABOUT MESSAGE - 社長写真を本文と同じ幅に
   プラグイン側 about.css の「一番下」に追記
======================================== */

/* 本文 .about-message__content と同じ幅 */
.about-message__visual {
    width: 84%;
    margin: 18px auto 0;
}

/* 以前の 260px 制限を解除し、横長比率を保持 */
.about-message__photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0;
}

@media screen and (max-width: 1000px) {
    .about-message__visual {
        width: 90%;
    }
}

@media screen and (max-width: 680px) {
    .about-message__visual {
        width: 100%;
    }
}


/* ========================================
   ABOUT MESSAGE PHOTO FIX
   写真の上下余白を解消
======================================== */

.about-message__visual {
    width: 84%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 18px auto 0;
}

.about-message__visual img.about-message__photo {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1292 / 334 !important;
    object-fit: cover !important;
    object-position: center;
    background: transparent;
}

/* タブレット */
@media (max-width: 1000px) {
    .about-message__visual {
        width: 90%;
    }
}

/* スマートフォン */
@media (max-width: 680px) {
    .about-message__visual {
        width: 100%;
    }
}