/* トップページ: ヒーロー画像(PC/SP切り替え) */
.hero-image {
    width: 100%;
}

.hero-image picture,
.hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-cta {
    text-align: center;
    margin: 24px 0 0;
}

/* トップページ: ヒーロー直下の「立川でつくる、課題解決のデザイン。」帯 */
.tachikawa-intro {
    background-color: #000;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    color: #fff;
}

.tachikawa-intro__inner {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding: 6rem 1.5rem;
}

.tachikawa-intro__title {
    margin: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.6;
}

.tachikawa-intro__text {
    margin: 0.75rem 0 0;
    color: #fff;
    font-size: 0.9375rem;
    line-height: 1.8;
}

@media screen and (max-width: 768px) {
    .tachikawa-intro {
        background-size: 260px auto;
        background-position: right -20px top 50%;
    }

    .tachikawa-intro__inner {
        padding: 2rem 1.5rem;
    }

    .tachikawa-intro__title {
        font-size: 1.2rem;
    }
}

/* トップページ: 主要セクションの最大幅をテーマの基準幅(1180px)に揃える */
.features-section,
.wp-block-media-text.alignwide,
.messages-section {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* トップページ: スマホ幅で左右に余白を確保 */
@media screen and (max-width: 768px) {
    .features-section,
    .wp-block-media-text.alignwide,
    .about-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        box-sizing: border-box;
    }
}

/* トップページ: カオルデザインの特徴(ボックスグリッド) */
.features-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* core/group は "flow" レイアウトの場合、実際の子要素を
   .wp-block-group__inner-container というラッパーの中に描画するため、
   グリッド化はそのラッパーに対して行う */
.features-grid > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "a b b"
        "a c d"
        "e e f";
    gap: 1.5rem;
}

.feature-card {
    background-color: #000;
    color: #fff;
    padding: 1.5rem;
    box-sizing: border-box;
}

.feature-card--a { grid-area: a; }
.feature-card--b { grid-area: b; }
.feature-card--c { grid-area: c; }
.feature-card--d { grid-area: d; }
.feature-card--e { grid-area: e; }
.feature-card--f { grid-area: f; }

.feature-card__image img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.feature-card__image--contain img {
    object-fit: contain;
}

@media screen and (max-width: 768px) {
    .features-grid > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a"
            "b"
            "c"
            "d"
            "e"
            "f";
    }
}

/* カードB・Eのみ、PC幅でテキスト+画像の2カラムにする(テキストが左、画像が右) */
@media screen and (min-width: 769px) {
    .feature-card--b > .wp-block-group__inner-container,
    .feature-card--e > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 1fr minmax(160px, 35%);
        column-gap: 1.5rem;
        align-items: center;
    }

    .feature-card--b .feature-card__image,
    .feature-card--e .feature-card__image {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .feature-card--b h3,
    .feature-card--e h3 {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }

    .feature-card--b p,
    .feature-card--e p {
        grid-column: 1;
        grid-row: 2;
    }
}

/* トップページ: 画像マーキー(1行目 右→左、2行目 左→右) */
@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes slideLeftToRight {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

.marquee-container,
.slide-rtl-container {
    overflow: hidden;
    width: 100%;
}

.slide-rtl-container {
    margin-top: 24px;
}

.marquee-track,
.slide-rtl-track {
    width: max-content;
    will-change: transform;
}

.marquee-track {
    animation: marquee 40s linear infinite;
}

.slide-rtl-track {
    animation: slideLeftToRight 40s linear infinite;
}

/* エディタ内では無限アニメーションを止める(レイアウト計測処理と衝突してプレビューが
   壊れるのを防ぐため)。フロントエンドの表示には影響しない。 */
.editor-styles-wrapper .marquee-track,
.editor-styles-wrapper .slide-rtl-track {
    animation: none;
    transform: none;
}

.marquee-track > *,
.slide-rtl-track > * {
    flex-shrink: 0;
}

.marquee-track img,
.slide-rtl-track img {
    display: block;
    height: 320px;
    width: auto;
}

@media screen and (max-width: 768px) {
    .marquee-track img,
    .slide-rtl-track img {
        height: 200px;
    }
}

/* トップページ: 先輩社員の声(横スライド、コンテンツ幅に3枚表示) */
.messages-slider ul.wp-block-post-template {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
}

.messages-slider ul.wp-block-post-template > li {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    margin-block-start: 0 !important;
}

@media screen and (max-width: 768px) {
    .messages-slider ul.wp-block-post-template > li {
        flex-basis: 80%;
    }
}

.message-card__image img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.message-card__title {
    margin-top: 1rem;
    margin-bottom: 0;
}

.message-card__date {
    display: block;
    font-size: 0.875rem;
    opacity: 0.6;
}

.message-card__date::before {
    content: "#";
}

.message-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* トップページ: カオルデザインを知る(3カラム、画像+フローティングボタン) */
.about-section {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.about-columns {
    gap: 1.5rem;
}

.about-columns__image img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 4px;
}

.about-columns__buttons {
    position: relative;
    z-index: 1;
}

.about-columns__link .wp-block-button__link {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border-radius: 9999px;
    padding: 0.7em 1.8em;
    font-size: 0.9375rem;
    font-weight: bold;
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
}

.about-columns__link .wp-block-button__link:hover,
.about-columns__link .wp-block-button__link:focus {
    opacity: 0.75;
}

@media screen and (max-width: 768px) {
    .about-columns__image img {
        height: 200px;
    }
}