@charset "UTF-8";
/*
    Component styles
    再利用する小さなパーツを置くファイルです。
    色はbase-rem-normal.cssのColor tokensを参照します。
    rem指定には1rem = 16px換算のコメントを付けています。
*/

/*
    Button:
    CTA、フォーム送信、詳細リンクなどで使う汎用ボタンです。
    色や余白は各バリエーション側のCSS変数で上書きできます。
*/
.c-btn {
    --btn-bg: var(--color-primary);
    --btn-bg-hover: var(--color-primary-strong);
    --btn-color: var(--color-text-inverse);
    --btn-border: transparent;
    --btn-radius: var(--radius-pill);
    --btn-padding-block: 0.72em;
    --btn-padding-inline: 1.5em;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 2.75rem; /* 44px */
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    color: var(--btn-color);
    background: var(--btn-bg);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.c-btn:hover,
.c-btn:focus-visible {
    color: var(--btn-color);
    background: var(--btn-bg-hover);
    text-decoration: none;
}

.c-btn:active {
    transform: translateY(1px);
}

.c-btn--outline {
    --btn-bg: transparent;
    --btn-bg-hover: var(--color-primary-soft);
    --btn-color: var(--color-primary);
    --btn-border: currentColor;
}

.c-btn--ghost {
    --btn-bg: transparent;
    --btn-bg-hover: color-mix(in srgb, var(--color-text) 5%, transparent);
    --btn-color: var(--color-text);
    --btn-border: transparent;
}

.c-btn--sm {
    min-height: 2.25rem; /* 36px */
    --btn-padding-block: 0.5em;
    --btn-padding-inline: 1em;
    font-size: 0.875rem; /* 14px */
}

.c-btn--lg {
    min-height: 3.25rem; /* 52px */
    --btn-padding-block: 0.85em;
    --btn-padding-inline: 2em;
    font-size: 1.0625rem; /* 17px */
}

.c-btn--block {
    display: flex;
    width: 100%;
}

/*
    Button group:
    ボタンを複数並べる時のラッパーです。スマホでは縦積みになります。
*/
.c-btn-group {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.c-btn-group--center { justify-content: center; }
.c-btn-group--right { justify-content: flex-end; }

@media (max-width: 480px) {
    .c-btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .c-btn-group .c-btn {
        width: 100%;
    }
}

/*
    Card:
    お知らせ、サービス一覧、実績一覧などに使う薄いカードです。
*/
.c-card {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.c-card__eyebrow,
.c-media__eyebrow,
.section-heading__eyebrow {
    color: var(--color-primary);
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.c-card__title,
.c-media__title {
    font-size: 1.25rem; /* 20px */
}

.c-card__text,
.c-media__text {
    color: var(--color-text-muted);
}

/*
    Media:
    画像 + テキストの横並び/縦並びパーツです。
    サービス紹介、実績、記事導線に向いています。
*/
.c-media {
    --media-gap: var(--space-lg);

    container-type: inline-size;
    display: grid;
    gap: var(--media-gap);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.c-media__media {
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.c-media__media > img,
.c-media__media > picture,
.c-media__media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-media__body {
    display: grid;
    gap: var(--space-sm);
    align-content: center;
}

@media (min-width: 769px) {
    .c-media {
        grid-template-columns: minmax(16rem, 40%) minmax(0, 1fr); /* image min 256px */
        align-items: center;
    }

    .c-media--reverse {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 40%); /* image min 256px */
    }

    .c-media--reverse .c-media__media {
        order: 2;
    }
}

.c-media--compact {
    --media-gap: var(--space-sm);
    padding: var(--space-sm);
}

.c-media--noborder {
    border-color: transparent;
    background: transparent;
}

.c-media--square .c-media__media { aspect-ratio: 1 / 1; }
.c-media--wide .c-media__media { aspect-ratio: 16 / 9; }

/*
    Scroll slider:
    Slickなしで軽い横スクロールを作りたい時のパーツです。
*/
.c-scroll-slider {
    display: grid;
    gap: var(--space-sm);
}

.c-scroll-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 32%); /* min 256px */
    gap: var(--space-md);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.c-scroll-slider__item {
    scroll-snap-align: start;
}

/*
    Form:
    問い合わせフォームなどで使う最低限の入力UIです。
*/
.c-form-field {
    display: grid;
    gap: var(--space-xs);
}

.c-form-field__label {
    font-weight: 700;
}

.c-input,
.c-textarea,
.c-select {
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}