@charset "utf-8";

html {
    margin-right: 0 !important;
    --corporate-color: #e60012;
    --corporate-color2: #ec6c12;
    --border-color: #cccccc;
    --pale-orange: #FFF4EB;
    --pale-orange2: #FFBE91;
    --orange1: #eb6100;
    --max-width: 1240px;
    --default-text-color: #333333;
    --movie-area-bg-size: 30%;
}

@scope(main) {

    :scope {
        font-family: var(--main-font-family);
        --font-sizeM: 14px;
        --font-sizeL: calc(var(--font-sizeM) * 1.142);
        --font-sizeS: calc(var(--font-sizeM) * 0.86);
        --font-sizeXL: calc(var(--font-sizeM) * 1.285);
    }


    .sp_only, .tab-pc_only, .pc_only {
        display: revert !important;
    }

    .tab-pc_only, .pc_only {
        display: none !important;
    }

    * {
        box-sizing: border-box;
    }

    .container {
        --padding: clamp(18px, 6.25dvw, 90px) clamp(var(--font-sizeM), 1.32dvw, 40px) clamp(20px, 1.32dvw, 40px);
        padding: var(--padding);
        max-width: var(--max-width);
        --container-width: auto;
        width: var(--container-width);
    }

    img {
        vertical-align: middle;
    }

    a:hover img {
        opacity: .5;
    }

    .button_bg_red {
        display: inline-block;
        background-color: var(--corporate-color);
        vertical-align: middle;
        color: var(--white);
        border-radius: 2em;
        padding: .5em 1em;
        border: solid 1px var(--corporate-color);
    }

    .button_bg_red:hover {
        text-decoration: none;
        color: var(--corporate-color);
        background-color: var(--white);
    }

    .dropshadow1 {
        box-shadow: 0 0 10px rgb(65 65 65 / 38%);
        display: inline-block;
    }

    .dropshadow2 {
        box-shadow: 0 0 30px rgb(0 0 0 / 15%);
        display: inline-block;
    }

    a[class*="dropshadow"]:hover {
        box-shadow: none;
    }

    .add-mark {
        --indent: .4em;
        text-indent: calc(var(--indent) * -1);
        padding-left: var(--indent);
    }

    .add-mark::before {
        content: "";
        width: .35em;
        aspect-ratio: 1/1;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: var(--mark-image);
        background-position: center center;
        vertical-align: middle;
        margin-right: .25em;
        vertical-align: middle;
    }

    .heading-type1 {
        text-align: left;
        margin-bottom: 1em;
        --mark-image: url(/share/images/icon_corp_mark.svg);
        font-size: clamp(28px, 7.47dvw, 40px);
        line-height: 1.4;
    }

    .plus {
        position: relative;
        display: inline-block;
    }

    .plus::after {
        content: "";
        display: inline-block;
        background-image: url(/share/images/icon_plus.png);
        background-size: cover;
        width: 1em;
        aspect-ratio: 1/1;
        background-position: center center;
        background-repeat: no-repeat;
        margin-left: .5em;
        vertical-align: middle;
        line-height: 1;
        position: relative;
        top: -.1em;
    }

    input[name^="switch"], [name^="show"] {
        position: absolute;
        visibility: hidden;
        width: 1px;
        height: 1px;
        z-index: -1;
        opacity: 0;
    }

    @keyframes fadein1 {
        0% {
            opacity: 0;
            transform: translateY(-100%);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

}



@scope (.movie-area) {
    :scope {
        background: #000000;
    }

    .movie_container {
        margin: 0 auto;
        position: relative;
        width: 100%;
        aspect-ratio: 1/.475;
    }

    .top_movie {
        display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        .top_movie {
            display: block;
            width: 100%;
            max-width: 1920px;
            margin: auto;
            aspect-ratio: 1/.475;
            background: #000000;
        }
    }

    .video-overlay {
        position: absolute;
        right: .5em;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        grid-gap: .5em;
        font-size: clamp(12px, 1.5vw, 20px);
    }

    .video-overlay .link_button {
        display: inline-block;
        background: var(--corporate-color);
        color: var(--white);
        border-radius: 5em;
        padding: .25em 1em;
        text-decoration: none;
    }

    .video-overlay .link_button:hover {
        --corporate-color: #ffffff;
        --white: #e60012;
    }

    .video-overlay .link_button::after {
        border-color: var(--white);
        margin-left: .25em
    }

    .video-control-button {
        background-color: rgba(0, 0, 0, .5);
    }

    .video-control-button button {
        background: transparent;
        color: #ffffff;
        border: none;
        cursor: pointer;

    }

    .video-control-button button:not(:nth-last-of-type(1)) {
        border-right: solid 1px var(--gray3);
    }

    .video-control-button .icon-text {
        font-size: clamp(11px, 3.5vw, 30px);
        padding: .25em;
        line-height: 1;
        overflow: hidden;
        aspect-ratio: 1/1;
    }
}

@scope(.banner-75th) {
    :scope {
        background-color: var(--gray1);
        padding: 20px 0;
        text-align: center;
    }

    .link {
        max-width: 82%;
        display: inline-block;
        margin: 0 auto;
        border-radius: 6px;
        overflow: hidden;
        vertical-align: middle;
    }

    .link picture img {
        display: block;
        aspect-ratio: 16/5;
        width: 100%;
    }

    @media screen and (min-width:641px) {
        .link picture img {
            aspect-ratio: 5/1;
        }
    }
}

@scope(.top_menu_list) {
    :scope {
        background-color: var(--pale-orange);
        padding: 40px 0;
    }

    .list-banner {
        display: flex;
        grid-gap: 0 clamp(0px, 2dvw, 1em);
        justify-content: center;
        flex-wrap: wrap;
    }

    .list-item {
        width: clamp(90px, 30dvw, 150px);
    }

    .item {
        display: flex;
        flex-direction: column;
        grid-gap: .5em 0;
    }

    a.item:hover {
        text-decoration: none;
    }

    .icon {
        width: 70%;
        margin: 0 auto;
        background: var(--white);
        aspect-ratio: 1/1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        --border-color: var(--white);
        border: solid 2px var(--border-color);
    }

    .item .icon:hover {
        --border-color: var(--orange1);
    }

    .icon img {
        max-width: 50%;
        max-height: 50%;
    }

    .menu-text {
        color: var(--text-color);
        line-height: 1.4;
        text-align: center;
    }

    .item:hover .menu-text {
        text-decoration: underline;
    }
}

@scope(.news) {

    input {
        appearance: revert;
        position: absolute;
        z-index: -1;
        visibility: hidden;
    }

    @scope (.news_area) {

        :scope {
            margin: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .heading {
            grid-row: 1;
        }

        .news_area-item {
            display: contents;
        }

        .info_list {
            display: none;
            grid-column: 1/ -1;
            background: var(--white);
        }

        .news_view_more {
            display: none;
            grid-column: 1/ -1;
            text-align: center;
        }

        .heading label {
            display: block;
            cursor: pointer;
            position: relative;
            font-size: var(--font-sizeL);
            border: none;
            font-weight: 700;
            padding: .75em 0 .5em;
            text-align: center;
            background-color: var(--gray2);
            border: solid 1px var(--gray2);
            border-radius: 5px 5px 0 0;
            color: var(--gray3);
        }


        @scope(.news_area-item:has([name="switch-news"]:checked)) {
            .heading label {
                background-color: var(--white);
                color: var(--text-color);
            }

            .news_view_more,
            .info_list {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                justify-content: center;
            }
        }



        .info_list {
            margin-bottom: 30px;
            text-align: left;
        }

        .info_item {
            border-bottom: solid 1px var(--gray2);
            padding: 1em 0 0;
        }

        .info_item:nth-of-type(n+4) {
            display: none;
        }

        .info_list p {
            font-size: var(--font-sizeM);
            line-height: 1.4;
        }

        .info_list a {
            text-decoration: none;
            color: var(--default-text-color);
        }



        .info_list p.description {
            color: var(--default-text-color);
            font-size: var(--font-sizeL);
        }

        .info_list .badge {
            font-size: 12px;
            font-weight: 700;
            padding: 4px 5px;
            color: #fff;
            display: inline-block;
            margin-left: 10px;
            vertical-align: top;
            text-align: center;
            line-height: 1;
        }

        .info_list .date {
            margin-bottom: 10px;
            color: #888888;
        }


        .news_view_more .view_more {
            font-weight: 700;
            text-decoration: none;
            font-size: var(--font-sizeM);
            color: var(--text-color);
        }

        .news_view_more .view_more img {
            max-height: 1em;
            margin-left: .5em;
        }

        a[href$=".pdf"], a.outpdf, span.outpdf {
            background: none;
        }

        /*リンクのアイコン設定*/
        .info_list .info_item a {
            position: relative;
            display: block;
            padding-right: 1.5em;
            padding-bottom: 1em;
        }

        .info_list .info_item a:hover {
            background-color: var(--gray1);
        }

        .info_list .info_item a::after {
            position: absolute;
            right: 0;
            content: "";
            width: 1em;
            aspect-ratio: 1/1;
            background: url(/images_new/arrow_right.png) no-repeat center center;
            vertical-align: top;
            padding-left: 1px;
            display: inline-block;
            transform: scale(0.6);
            bottom: 1.5em;
        }

        .info_list .info_item a[href$=".pdf"] .description::after {
            content: url(/share/images/icon_pdf_s.gif);
            vertical-align: middle;
            padding-left: 2px;
            transform: scale(1);
        }

        .info_list .info_item a[rel="noopener noreferrer"] .description::after {
            content: none;
        }
    }

    @scope(.important) {
        :scope {
            border: solid 1px var(--corporate-color);
            border-radius: 6px;
            padding: clamp(1em, 3.75dvw, calc(var(--font-sizeM) * 2)) clamp(1em, 3.75dvw, calc(var(--font-sizeM) * 2)) clamp(1em, 3.75dvw, var(--font-sizeM));
            display: grid;
            grid-template-areas:
                "heading . switch"
                "list list list";
            margin-bottom: 2em;
            grid-template-columns: auto 1fr auto;
            grid-gap: 0;
        }

        .heading {
            color: var(--corporate-color);
            text-align: left;
            font-size: var(--font-sizeL);
            margin-bottom: .25em;
            grid-area: heading;
        }


        .list-item {
            text-align: left;
            --mark-image: url(/share/images/icon_exclamation-circle.svg);
            transition: max-height .5s;
            --indent: 1.5em;
            margin-bottom: .25em;
        }

        .list-item:nth-of-type(n+2) {
            max-height: 0;
            overflow: hidden;

        }

        [for^="switch"] {
            grid-area: switch;
            text-align: right;
            justify-items: flex-end;
            align-self: center;
            cursor: pointer;
        }


        .list {
            grid-area: list;
        }

        a.list-link {
            color: var(--default-text-color);
            text-decoration: underline;
        }

        a.list-link:hover {
            text-decoration: none;
        }

        .add-mark::before {
            width: 1em;
        }
    }

    .important:not(:has(.list-item:nth-of-type(2))) [for="switch-important"] {
        display: none;
    }

    .important:has(#switch-important:checked) .list-item:nth-of-type(n+2) {
        max-height: 10em;
    }

    .important:has(#switch-important:checked) [for^="switch"] {
        display: none;
    }
}



@scope(.pods_area) {

    .filter_area {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max-content, 5.75em));
        grid-gap: 1em clamp(.5em, 1.5dvw, 1em);
        margin-bottom: 1em;
        justify-content: flex-start;
    }

    .filter_area .item {
        --border-color: var(--text-color);
        --bg-color: var(--white);
        color: var(--text-color);
        display: inline-block;
        border: solid 1px var(--border-color);
        background-color: var(--bg-color);
        padding: .25em .5em;
        font-size: var(--font-sizeM);
        border-radius: 6px;
        cursor: pointer;
    }

    .filter_area .item:not(.active):hover {
        background: var(--gray1);
    }

    .filter_area .item.active {
        --border-color: var(--corporate-color);
        --bg-color: var(--corporate-color);
        color: var(--white);
        pointer-events: none;
    }

    @scope(.list) {
        :scope {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(clamp(165px, calc(25% - 1em), 255px), 1fr));
            grid-gap: 2em 1em;
            overflow: hidden;
            margin-bottom: 2em;
        }

        .item {
            display: block;
            animation-name: fadein1;
            animation-duration: .25s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }

        .item:nth-of-type(n+5) {
            display: none;
        }

        .item a {
            display: contents;
        }


        .image_cont {
            grid-area: image;
            max-width: 100%;
            border-radius: 6px;
            overflow: hidden;
            aspect-ratio: 165/93;
            background: var(--gray2);
            margin-bottom: .5em;
        }

        .image_cont img {
            width: 100%;
            object-fit: cover;
        }

        a:hover .image_cont img {
            opacity: .3;
        }

        .category {
            grid-area: category;
            text-align: left;
            align-self: start;
            margin-bottom: .25em;
        }

        .category span {
            background: var(--gray3);
            font-size: var(--font-sizeS);
            color: var(--white);
            vertical-align: middle;
            padding: 0 .5em;
        }

        .category span:not(:nth-last-of-type(1)) {
            margin-right: .5em;
        }

        [data-isnew="true"] .category::after {
            content: "NEW";
            color: var(--corporate-color);
            margin-left: .5em;
        }

        .text {
            grid-area: text;
            color: var(--text-color);
            text-align: left;
            line-height: 1.5;
        }

        .text .title {
            font-weight: bold;
            font-size: var(--font-sizeL);
        }

        a:hover .text {
            text-decoration: underline;
        }
    }

    input {
        appearance: revert;
    }

    :scope [for^="show-more"] {
        display: none;
        cursor: pointer;
        font-size: var(--font-sizeL);
        font-weight: bold;
    }
}

.pods_area:has(.list .item:nth-of-type(5)) [for^="show-more"] {
    display: block;
    text-align: center;
}

.pods_area:has([id^="show-more"]:checked) .list .item {
    display: block;
}

.pods_area:has([id^="show-more"]:checked) [for^="show-more"] {
    display: none !important;
}

@scope(.initiative) {
    .container {
        background-color: var(--pale-orange);
        padding-bottom: 40px;

    }

    .heading-type1 {
        line-height: 1.4;
    }

    .heading-type1 .sub {
        display: block;
        font-size: 71.4%;
    }

    .list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(350px, calc(50% - 2em), 440px), 1fr));
        grid-template-rows: max-content;
        grid-gap: 20px;

    }

    .item a {
        background-color: var(--white);
        padding: 2em 2em 2em 1em;
        border-radius: 10px;
        display: flex;
        align-items: center;
        color: var(--text-color);
        text-align: left;
        position: relative;
        box-shadow: 0 0 20px rgba(0, 0, 0, 10%);
        line-height: 1.4;
        width: 100%;
        font-size: var(--font-sizeL);
        aspect-ratio: 32/ 11;
    }

    .item a::after {
        position: absolute;
        right: 1em;
        top: calc(50% - 1em);
    }

    .item a:hover {
        text-decoration: none;
        background: var(--gray1);
        box-shadow: none;
    }
}

@scope(.pickup) {
    :scope {
        background-color: var(--gray1);
    }

    @scope(.pods_area) {
        @scope(.list) {
            @media (min-width: 566px) {
                :scope {
                    grid-template-columns: repeat(3, minmax(calc(100% / 3 - 2em), 340px));
                }

                .item:nth-of-type(n+5) {
                    display: block;
                }

                .item:nth-of-type(n+7) {
                    display: none;
                }
            }

        }
    }
}javascript:apply();
 @media (min-width: 566px) {
    .pickup .pods_area:has(.list .item:nth-of-type(5)) [for^="show-more"] {
        display: none;
    }
    .pickup .pods_area:has(.list .item:nth-of-type(7)) [for^="show-more"] {
        display: block;
        text-align: center;
    }
 }

@scope(.link_area) {
    :scope {
        background: var(--gray1);
        --ypadding: 40px;
        padding: var(--ypadding) 0;
    }

    .container {
        background: var(--white);
        max-width: calc(100% - 2em);
        border-radius: 20px;
        padding: calc(var(--ypadding) * 0.88) clamp(var(--font-sizeM), 1.32dvw, 40px);
    }

    :scope.ir .heading-type1 {
        font-size: clamp(25px, 6.66dvw, 40px);
    }

    .list {
        margin: 2em 0;
    }

    .list {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1.5em clamp(1em, 2.4dvw, 2em);
    }

    .list.thumbs {
        --min-size: clamp(148px, 25%, 255px);
        grid-template-columns: repeat(auto-fit, minmax(var(--min-size), 1fr));
    }

    .list.col {
        grid-template-columns: 1fr 1fr;
    }

    .item {
        text-align: left;
    }

    .item a {
        color: var(--text-color);
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    .list:not(.thumbs) .item:hover a {
        background: var(--gray1);
    }

    .link_arrow_pos_r::after {
        margin: 0;
    }

    .image_cont img {
        max-width: min(100%, 400px);
        margin: 0 auto;
        display: block;
    }

    @scope(.list:not(.thumbs)) {
        .item {

            padding-bottom: .5em;

            border-bottom: solid 1px var(--gray2);

            font-size: var(--font-sizeL);

            line-height: 1.5;

        }

        .link_category_top a {
            display: block;
            font-size: var(--font-sizeXL);
        }
    }

    @scope(.list.thumbs) {
        .item a {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .image_cont {
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: .5em;
            width: 100%;
        }

        .image_cont img {
            width: 100%;
        }

        .text {
            align-self: stretch;
        }
    }

    .link_category_top {
        text-align: center;
    }

    .link_category_top a {
        display: block;
        font-size: var(--font-sizeXL);
        padding: .5em 0;
        max-width: 326px;
        text-align: center;
        margin: auto;
    }

    .link_arrow_pos_r {
        grid-gap: 0;
        grid-template-columns: 1fr auto;
    }

}

.link_area.firstcareer {
    background: var(--white);
}

.link_area.firstcareer .container {
    background: var(--gray1);
}

@scope(.link_group) {
    .list {
        margin: 0 auto min(40px, 29.5dvw);
        max-width: min(calc(100% - 2em), 1200px);
    }

    .item {
        padding: 20px;
        text-align: center;
    }

    .item a {
        border-radius: 6px;
        overflow: hidden;
        background: var(--gray3);
    }

    .item a:hover {
        box-shadow: none;
        opacity: .5;
    }
}

@media screen and (min-width:40em) {
    @scope (.news) {
        @scope(.news_area) {
            :scope {
                grid-gap: 0 3em;
            }

            .info_list {
                grid-column: auto;
                display: grid;

            }

            input[name="switch-news"] {
                appearance: none;
            }

            .heading label {
                background-color: var(--gray1) !important;
                border: none;
                color: var(--text-color);
                pointer-events: none;
            }

            .news_area-item {
                display: block;
            }

            .news_view_more {
                display: block;
                grid-column: auto;
            }

            .news_view_more .view_more {

                font-size: var(--font-sizeL);
            }

            .news_view_more .view_more:hover {
                text-decoration: underline;
            }

            .info_item:nth-of-type(n+4) {
                display: revert;
            }
        }
    }
}

@scope (body[data-size="isMedium"], body[data-size="isWide"]) {
    @scope(main) {
        .pc_only {
            display: revert !important;
        }

        .sp_only, .pc_only.hide-tab {
            display: none !important;
        }

        :scope {
            --font-sizeM: clamp(11px, 1.17vw, 14px);
        }

        .heading-type1 .sub {
            display: inline-block !important;
            text-indent: 0;
            margin-left: .5em;
        }

        .container {
            --container-width: 83.33dvw;
        }


        @scope(.top_menu_list) {
            .icon {
                width: 80%;
            }

            .menu-text {
                margin-top: .5em;
                font-size: var(--font-sizeXL);
            }
        }

        @scope(.initiative) {
            :scope {
                padding: clamp(40px, 5.5dvw, 80px) 0;
            }

            .container {
                border-radius: 20px;
            }

            .item a {
                aspect-ratio: 53/11;
                font-size: var(--font-sizeXL);
                height: 100%;
            }
        }

        @scope(.link_area) {
            .container {
                display: grid;
                grid-template-areas:
                    "heading heading"
                    "image_cont list"
                    "link_category_top link_category_top";
                grid-gap: 2em 3em;
                grid-template-columns: min(340px, 23.6dvw) 1fr;
                padding-left: 3em;
                padding-right: 3em;
                align-items: stretch;
                max-width: var(--max-width1);
            }


            .heading-type1 {
                grid-area: heading;
                margin-bottom: 0;
            }

            .list {
                grid-area: list;
                margin: 0;
                display: grid;
                grid-template-columns: 1fr;
            }

            .list.thumbs {
                --min-size: clamp(165px, 20%, 255px);
            }

            .container>.image_cont {
                grid-area: image_cont;
            }

            .container>.image_cont img {
                max-width: 100%;
            }

            .link_category_top {
                grid-area: link_category_top;
            }

            .link_category_top a {
                display: inline-block;
                width: 100%;
            }


        }

        .link_area.energy_supply .container {
            grid-template-areas: "heading heading""list list""link_category_top link_category_top";
        }

        .link_area.firstcareer .list {
            grid-template-columns: 1fr 1fr;
        }
    }

}
適用 閉じる