body {
    --npower-color: #3d9764;
    --wrapper-bg: #f3f4f6;
    background-color: var(--wrapper-bg);
}

img {
    max-width: 100%;
}

.wrapper {
    background: var(--wrapper-bg);
    padding-bottom: 10vh;
}

#contents_list section.container {
    padding: 25px clamp(10px, 2vw, 2em) 0;
}

.card {
    background: #ffffff;
    box-shadow: 0 0 0 1px rgb(53 72 91 / 7%), 0 2px 2px rgb(0 0 0 / 1%), 0 4px 4px rgb(0 0 0 / 2%), 0 10px 8px rgb(0 0 0 / 3%);
    padding: clamp(1em, 5vw, 2em) 6% clamp(1em, 5vw, 2em) 5%;
}

.link_more {
    width: clamp(8em,50vw,16em);
    font-size: clamp(13px, 4vw, 16px);
    padding: 0.5em 2em;
}

.link_wrapper {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.item_list>li {
    margin-bottom: .5em;
    padding-left: 1em;

    text-indent: -1em;
}

.heading_style1 {
    font-size: clamp(20px, 2.4vw, 29px);
}

#contents_list {
    counter-reset: header 0;
}

.heading_style-count {
    font-size: clamp(16px, calc(1.5vw + .714rem), 1.3rem);
    text-align: center;
    background-position: bottom center;
    margin-bottom: 1.5em;
    text-align: left;
    counter-increment: header 1;
}

.heading_style-count::before {
    content: "0"counter(header);
    display: inline-block;
    color: var(--npower-color);
    font-family: 'Oswald';
    font-size: 150%;
    margin-right: 0.5em;
    border-bottom: solid 1px var(--npower-color);
    font-weight: normal;
    padding-bottom: 10px;
}


.mainvisual-container {
    background: url(/energy_supply/energy/nuclear_power/necessity/images/main_necessity.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.mainvisual-container::before {
    position: absolute;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    content: '';

    background: rgba(0, 0, 0, .8);
}

.mv-about {
    position: relative;
    z-index: 2;

    align-items: center;
}

.mainvisual-container .top {
    width: 100%;
    height: clamp(20em, 30vh, 500px);

    grid-area: mv-top;
}

.mainvisual-container .bottom {
    grid-area: mv-bottom;
}



.mainvisual-container .top img {
    height: 100%;
    object-fit: cover;
    max-height: 100%;
    max-width: 100%;
}

.mainvisual-container .bottom {
    padding: 4em 1em 3em;

    color: #fff;
}

.list-mainvisual {
    display: grid;

    margin: 1em 3vw;

    border-top: solid 1px #2d2d2d;
    border-left: solid 1px #2d2d2d;

    grid-template-columns: repeat(2, 50%);
}

.list-mainvisual a {
    font-size: clamp(11px, calc((1.1vw + .714rem) * .75), .785rem);

    position: relative;

    display: flex;
    align-items: center;

    height: 100%;
    padding: 1em 1em 1em 1.5em;

    color: #fff;
    border-right: solid 1px #2d2d2d;
    border-bottom: solid 1px #2d2d2d;
    background-color: #070707;
}



.list-mainvisual a::before {
    position: absolute;
    top: calc(50% - 1.5px);
    left: 0;

    display: inline-block;

    width: 1em;
    height: 2px;

    content: '';

    background-color: var(--npower-color);
}

.mv-about .lead-text {
    font-size: calc((1.2vw + .714rem) * .75);
    line-height: 2em;

    padding-right: 3vw;
    padding-left: 3vw;

    color: #fff;
}


@media (min-width:950px) {
    .heading_style1 {
        /* margin-top: 75px; */
        margin-left: 40px;

        text-align: left !important;
        letter-spacing: .2em;
    }

    .mainvisual-container {
        height: clamp(400px, 40vh, 500px);
    }

    .mv-about {
        display: grid;
        width: 100%;
        grid-template-columns: calc((100vw - 1200px) / 2) 1fr 1fr calc((100vw - 1200px) / 2);
        grid-template-areas:
            '. mv-top mv-bottom .';
        height: 100%;
        overflow: hidden;
    }

    .mv-about .lead-text {
        font-size: 13px;

        margin-bottom: 37px;
    }

    .mv-about .top {
        display: flex;
        height: 100%;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px);
        mask-image: linear-gradient(90deg, transparent, #000 60px);
    }

    .container-grid {
        display: grid;
        grid-template-columns: 66% 34%;
        grid-template-rows: repeat(2, auto);
        grid-gap: 0 2em;
    }

    #contents_list section:nth-of-type(even) .container-grid {
        grid-template-columns: 34% 66%;
    }

    .container-grid figure {
        margin: 0;

        grid-row: 1/3;
        grid-column: 2/3;
    }

    #contents_list section.container:nth-of-type(even) .container-grid figure {
        grid-column: 1/2;
    }
}