@charset "utf-8";

:root {
	/* size */
	--site-max-width: 1280px;
	--space-LR: 40px;
	--space-LR-sp: 8px;
    /* color */
	--color-lightB: #d3e7f5;
	--color-textB: #6eaece;
	--color-textG: #9c9c9c;
	--color-gray: #e8e8e8;
	--color-lightG: #f4f4f4;
	--color-boldB: #1c468b;
	--color-wh: #fff;
}

/* main-------------------*/

.block h3 {
        color: var(--color-textB);
        font-size: 1.6em;
        padding: 32px 0;
        margin: 0 32px 24px;
}
#grid-area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 0;
}

.block {
        padding: 32px;
        max-width: 700px;
        margin: 16px 0;
        max-width: 80%;
}

.block a {
        font-weight: bold;
}
main ul li {
        padding: 16px 46px 0;
}
.contents {
        display: flex;
        justify-content: space-between;
}
.nenpyou {      
        padding: 16px;
}
.illusut-01 {
        max-width: 100%;
        height: auto;
        align-self: flex-end;
        opacity: 50%;
        padding: 0 0 24px;
}
.illusut-02 {
        max-width: 100%;
        height: auto;
        padding: 16px 0 0;
        opacity: 50%;
}


/* レスポンシブデザイン */
 @media (max-width: 600px) {

    main .wrapper {
            padding: 0;
    }
    h3 {
            color: var(--color-wh);
            font-size: 1.3em;
            padding: 16px 0;
    }
    #grid-area {
            grid-template-columns: none;
            gap: 24px;
            padding: 16px 0;
    }
    .block {
        margin: 0 auto;
        padding: 16px;
       
    }
    .contents {
        display: block;
        margin: 0 auto;
        }
    
    main ul li {
            padding: 8px 0 0;
            
    }
    .nenpyou {
            max-width: 100%;
            padding: 16px 0;

    }
    .illusut-01 {
            max-width: 30%;
            height: auto;
            margin: 0 auto;
            padding-bottom: 16px;
    }
    .illusut-02 {
            max-width: 40%;
            height: auto;
            margin: 0 auto;
            padding-bottom: 16px;
    }
    
 }
