@charset "utf-8";

/*********************************************************************
 *
 *  For GUIDE LINE
 *
*********************************************************************/

/* contents */
/* ---------------------------------------------------- */
@media print,
screen and (min-width: 768px) {
    #contents {
        background: #e9516a;
        background: -webkit-linear-gradient(left, #ffceae 0%, #ff918a 50%, #ffa492 100%);
        background: linear-gradient(to right, #ffceae 0%, #ff918a 50%, #ffa492 100%);
    }

    #contents::before,
    #contents::after {
        content: "";
        position: absolute;
        display: block;
        background-size: contain;
        background-position: center center;
        z-index: 1;
    }

    #contents::before {
        left: -50px;
        top: 130px;
        width: 345px;
        height: 284px;
        background-image: url(../img/balloon_1.png);
    }

    #contents::after {
        right: -50px;
        top: 130px;
        width: 238px;
        height: 300px;
        background-image: url(../img/balloon_2.png);
    }
}

@media screen and (max-width: 767px) {
    #contents {
        background: #e9516a;
        background: -webkit-linear-gradient(left, #ffceae 0%, #ff918a 50%, #ffa492 100%);
        background: linear-gradient(to right, #ffceae 0%, #ff918a 50%, #ffa492 100%);
    }

    #contents::before,
    #contents::after {
        content: "";
        position: absolute;
        display: block;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #contents::before {
        left: -10px;
        top: 80px;
        width: 80px;
        height: 60px;
        background-image: url(../img/balloon_1.png);
    }

    #contents::after {
        right: -10px;
        top: 80px;
        width: 60px;
        height: 75px;
        background-image: url(../img/balloon_2.png);
    }
}

/* outline_wrap */
/* ---------------------------------------------------- */
@media print,
screen and (min-width: 768px) {
    .outline_wrap {
        z-index: 2;
    }

    .outline_wrap .box {
        margin: 0 auto;
        padding: 40px 60px;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .outline_wrap .box .logo {
        margin: 0 auto 30px;
        width: 380px;
    }

    .outline_wrap .box .list {
        margin: 0 auto;
    }

    .outline_wrap .box .list th {
        padding-bottom: 20px;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        vertical-align: top;
    }

    .outline_wrap .box .list td {
        padding-left: 60px;
        padding-bottom: 20px;
    }

    .outline_wrap .box .list td .sponsor {
        display: flex;
        align-items: center;
    }

    .outline_wrap .box .list td .sponsor img {
        margin-right: 15px;
        width: auto;
        height: 22px;
    }

    .outline_wrap .box .list td .sponsor img.sponsor2 {
        height: 14px;
    }

    .outline_wrap .box .list td .sponsor img.sponsor3,
    .outline_wrap .box .list td .sponsor img.sponsor4 {
        height: 18px;
    }

    .outline_wrap .box .list td .sponsor img.sponsor6,
    .outline_wrap .box .list td .sponsor img.sponsor7,
    .outline_wrap .box .list td .sponsor img.sponsor8 {
        height: 52px;
    }
}

@media screen and (max-width: 767px) {
    .outline_wrap {
        z-index: 2;
    }

    .outline_wrap .box {
        padding: 30px 4%;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .outline_wrap .box .logo {
        margin: 0 auto 20px;
        width: 80%;
    }

    .outline_wrap .box .list {
        margin: 0 auto;
    }

    .outline_wrap .box .list th {
        display: block;
        padding-bottom: 5px;
        font-weight: bold;
        text-align: center;
    }

    .outline_wrap .box .list td {
        display: block;
        padding-bottom: 20px;
        text-align: center;
    }

    .outline_wrap .box .list td .sponsor {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .outline_wrap .box .list td .sponsor img {
        margin: 0 5px 10px;
        width: auto;
        height: 22px;
    }

    .outline_wrap .box .list td .sponsor img.sponsor2 {
        height: 14px;
    }

    .outline_wrap .box .list td .sponsor img.sponsor3,
    .outline_wrap .box .list td .sponsor img.sponsor4 {
        height: 18px;
    }

    .outline_wrap .box .list td .sponsor img.sponsor6,
    .outline_wrap .box .list td .sponsor img.sponsor7,
    .outline_wrap .box .list td .sponsor img.sponsor8 {
        height: 50px;
    }
}