@charset "utf-8";

.section + .section {
    margin-top: 40px;
}

.section-header {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 9;
    grid-column: 2 / 11;
}

.section-header .ttl {
    font-size: 1.6rem;
}

.section-body {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 9;
    grid-column: 2 / 11;
    margin-top: 20px;
}

.section-body p {
    line-height: 1.8;
}

.info__item {
    margin-top: 20px;
}

.info__item dt {
    
}

.info__item dd {
    margin: 0;
}


/* ============================================================================================== */
/* Media query                                                                                    */
/* ============================================================================================== */

/* ----------------------------------------------------------------------- */
/* SmartPhone */

@media screen and (min-width: 375px) {
}

@media screen and (min-width: 414px) {
}

@media screen and (orientation:landscape) {
}

/* over iphone 6 plus landscape */
@media screen and (orientation:landscape) and (min-width: 736px) {
}


/* ----------------------------------------------------------------------- */
/* Tablet */

@media screen and (min-width: 768px) {
}


/* ----------------------------------------------------------------------- */
/* over ipad landscape */

@media screen and (orientation:landscape) and (min-width: 1024px) {
}


/* ----------------------------------------------------------------------- */
/* Desktop */

@media screen and (min-width: 1280px) {
    
    .section + .section {
        margin-top: 100px;
    }
    
    .section-header {
        -ms-grid-column: 2;
        -ms-grid-column-span: 8;
        grid-column: 2 / 10;
    }
    
    .section-body {
        -ms-grid-column: 2;
        -ms-grid-column-span: 8;
        grid-column: 2 / 10;
        margin-top: 30px;
    }
    
    .info__item {
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: auto;
        grid-template-rows: auto;
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr);
    }
    
    .info__item dt {
        -ms-grid-column: 1;
        grid-column: 1 / 2;
    }
    
    .info__item dd {
        -ms-grid-column: 2;
        -ms-grid-column-span: 7;
        grid-column: 2 / 9;
    }
    
    .info__item dt:nth-of-type(2),
    .info__item dd:nth-of-type(2) {
        -ms-grid-row: 2;
        grid-row: 2;
    }
}


@media screen and (min-width: 1440px) {
}