@charset "Shift_JIS";

/* **************************************************

Name: common.css
Description: ecoassist common CSS * portalよりcopy *
Create: 2025.07.11
Update: 
Copyright 2025 Hitachi, Ltd.

***************************************************** */

/* ==================== */
/* custom property */
/* ==================== */
:root {
    /* フォント */
    --font-size-m: 0.875rem;/*14px*/
    --font-size-l: 1rem;/*16px*/
    --font-size-s: 0.8125rem;/*13px*/

    /* transition */
    --transition-primary: .3s ease;

    /* サイト幅(内容幅) */
    --max-width-default: 1275; /* main幅 */

    /* 左右余白 */
    --side-space: 15px;
    --side-space-half: calc(var(--side-space) / 2);
    --side-space-both: calc(var(--side-space) * 2);

    /* コンテンツ余白 */
    --contents-space-top: 80px;
    --contents-space-bottom: 100px;
    --contents-space-s: 60px;

    /* 角丸 */
    --radius-m: 6px;
}

@media (max-width: 767px) {
    :root {
        /* コンテンツ余白 */
        --contents-space-top: 50px;
        --contents-space-bottom: 60px;
        --contents-space-s: 30px;
    }
}

/* ==================== */
/* reuse */
/* ==================== */
.mb0 {
    margin-bottom: 0 !important;
}

.Content {
    margin: var(--contents-space-top) 0 var(--contents-space-bottom);
}

.Content:last-child {
    margin-bottom: 0;
}

.ContentBg {
    padding: var(--contents-space-top) var(--side-space) var(--contents-space-bottom);
    background-color: var(--color-primary-g1);
    margin-left: calc(var(--side-space) * -1);
    margin-right: calc(var(--side-space) * -1);
    margin-bottom: 0;
    width: calc(100% + var(--side-space));
    box-sizing: border-box;
}

.ContentBg .csHeadingLBox:first-child {
    margin-top: 0;
}


@media (max-width: 1304px) {
    .ContentBg {
        width: calc(100% + var(--side-space-both));
    }
}

.lead {
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: var(--contents-space-s);
    word-break: keep-all;
}

@media (max-width: 767px) {
    .lead {
        font-size: 1rem;
    }
}

.banner {
    transition: opacity var(--transition-primary);
}

.banner:hover,
.banner:active {
    opacity: .9;
}
