@charset "utf-8";
    ul {
        list-style-type: none;
    }
    
    .mainvl {
        position: relative;
    }
    
    .content {
        width: calc(90% - 80px);
        max-width: 1100px;
        margin: 0 auto !important;
        position: relative;
        z-index: 0;
    }
    /*main*/
    
    h1 {
        padding-top: 82px;
    }
    
    main {
        position: relative;
        margin-bottom: -5%;
        padding-top: 0;
    }
    
    .cover {
        position: relative;
        z-index: 50;
    }
    
    img {
        vertical-align: bottom;
    }
    /* プレゼントキャンペーン */
    
    .campaign {
        background: url(img/campaign-bg.svg);
        background-position: top center;
        background-repeat: repeat-y;
        background-size: 100%;
        background-color: #1F1F1F;
        text-align: center;
        padding: 100px 0;
    }
    
    .campaign .campaign-over h2,
    .campaign .campaign-app h2,
    .campaign .campaign-pre h2,
    .campaign .campaign-con h2,
    .campaign .campaign-test h2 {
        width: 40%;
        margin: 0 auto 50px;
    }
    
    .subaroad-cnt,
    .campaign-app,
    .campaign-con {
        background: #313131;
        border-radius: 20px;
        margin-top: 100px;
        margin-bottom: 5% !important;
        color: #fff;
    }
    
    .campaign-over,
    .campaign-pre,
    .campaign-test {
        background: #F7D206;
        border-radius: 20px;
        padding: 50px 0;
        margin-top: 100px;
        margin-bottom: 5% !important;
    }
    
    .subaroad-cnt,
    .campaign-app,
    .campaign-con,
    .campaign-over,
    .campaign-pre,
    .campaign-test {
        padding: 50px 0;
    }
    
    .subaroad-cnt {
        padding: 0 50px 50px;
    }
    /* キャンペーン概要 */
    
    .campaign .campaign-over .lead-inner p {
        line-height: 2;
        color: #313131;
        font-size: 1.3em;
        font-weight: 500;
    }
    
    .campaign .campaign-over .lead-inner p:first-of-type {
        padding-bottom: 15px;
    }
    /* SUBAROAD */
    
    .subaroad-area {
        display: flex;
        justify-content: space-between;
        position: relative;
        top: -30px;
        text-align: left;
    }
    
    .subaroad-area h3 {
        font-size: 1.5rem;
        font-weight: 500;
        padding: 20px 0;
    }
    
    .subaroad-area p {
        font-size: 1.1rem;
    }
    
    .subaroad-cnt-list {
        display: flex;
        justify-content: space-between;
        width: 85%;
        margin: 0 auto 3%;
    }
    /* 応募方法 */
    
    .campaign .campaign-app .app-list,
    .campaign .campaign-app .step ul {
        display: flex;
        justify-content: center;
        text-align: left;
    }
    
    .campaign .campaign-app .app-list li {
        width: 35%;
        background: #fff;
        color: #313131;
        border-radius: 20px;
    }
    
    .campaign .campaign-app .app-list li:first-child {
        margin-right: 30px;
    }
    
    .campaign .campaign-app ul li h3 {
        background: #FF0076;
        color: #fff;
        text-align: center;
        border-radius: 20px 20px 0 0;
        font-weight: 400;
        padding: 10px 0;
    }
    
    .campaign .campaign-app ul li dl div {
        padding: 20px;
        font-weight: 500;
        letter-spacing: 1.5px;
    }
    
    .campaign .campaign-app ul li dl div:last-child {
        background: #FFF4F9;
        border-radius: 0 0 20px 20px;
    }
    
    .campaign .campaign-app ul li dl div dd {
        font-size: 1.3em;
    }
    
    .campaign .campaign-app .lead-inner {
        margin: 50px 0 35px;
    }
    
    .campaign .campaign-app .lead-inner p {
        line-height: 1.75;
        color: #fff;
        padding-bottom: 15px;
        font-size: 1.2em;
        font-weight: 400;
    }
    
    .campaign .campaign-app .lead-inner p a {
        color: #FF0076;
        text-decoration: none;
        transition: ease all 0.3s;
    }
    
    .campaign .campaign-app .lead-inner p a:hover {
        color: #F7D206;
    }
    
    .campaign .campaign-app .step {
        width: 90%;
        margin: 0 auto;
    }
    
    .campaign .campaign-app .step ul {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }
    
    .campaign .campaign-app .step ul li {
        border-radius: 10px;
        width: 32%;
        padding: 20px;
        line-height: 1.7;
        color: #000;
        background: #fff;
    }
    
    .campaign .campaign-app .step ul li h4 {
        background: #FF0076;
        color: #fff;
        display: inline-block;
        padding: 3px 10px;
    }
    
    .campaign .campaign-app .step ul li p a {
        color: #000;
    }
    
    .campaign .campaign-app .step ul li .icon {
        width: 23%;
        margin: 20px auto;
        min-height: 60px;
    }
    
    .campaign .campaign-app .step ul li:first-of-type .icon {
        width: 20%;
    }
    
    .campaign .campaign-app .step ul li:last-of-type .icon {
        width: 100%;
    }
    
    .campaign .campaign-app .step ul li .image {
        margin: 20px auto 0;
    }
    
    .campaign .campaign-app .step ul li:first-of-type .image {
        width: 50%;
    }
    
    .campaign .campaign-app .step ul li span {
        display: block;
        font-size: 13px;
        margin: 10px 0 0 0;
    }
    
    .campaign .precautions {
        text-align: left;
        width: 90%;
        margin: 50px auto 0;
    }
    
    .campaign .campaign-app .precautions {
        border: 1px solid #fff;
    }
    
    .campaign .campaign-pre .precautions {
        border: 1px solid #313131;
    }
    
    .campaign .precautions h5 {
        background: #FF0076;
        text-align: center;
        color: #FFF;
        font-weight: 400;
        font-size: 13px;
        padding: 5px 20px 7px;
        display: inline-block;
        letter-spacing: 1px;
    }
    
    .campaign .precautions ul {
        list-style-type: none;
        margin: 20px 20px 20px 2em;
    }
    
    .campaign .precautions ul li::before {
        content: "※";
    }
    /* ご当選プレゼント */
    
    .campaign .campaign-pre>p {
        width: 50%;
        margin: 0 auto;
    }
    
    .campaign .campaign-pre h3 {
        width: 50%;
        margin: 30px auto;
    }
    
    .campaign .campaign-pre h3>img {
        width: 60%;
        margin-bottom: 10px;
    }
    
    .campaign .campaign-pre>ul {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
    
    .campaign .campaign-pre>ul li {
        width: 32%;
    }
    /* 当選のご連絡 */
    
    .campaign .campaign-con p {
        line-height: 2;
        color: #fff;
        padding-bottom: 0;
        font-size: 20px;
    }
    /* ご注意事項 */
    
    .campaign .campaign-test div {
        width: 90%;
        margin: 0 auto;
    }
    
    .campaign .campaign-test ul,
    .campaign .campaign-test p,
    .campaign .campaign-test dl {
        text-align: left;
    }
    
    .campaign .campaign-test p,
    .campaign .campaign-test dt {
        text-indent: -1em;
    }
    
    .campaign .campaign-test li,
    .campaign .campaign-test p,
    .campaign .campaign-test dt,
    .campaign .campaign-test dd {
        text-align: left;
        line-height: 2;
    }
    
    .campaign .campaign-test li,
    .campaign .campaign-test dl:first-of-type dt {
        margin-left: 1em;
        text-indent: 0em;
    }
    
    .campaign .campaign-test dl:last-of-type dt {
        margin-left: 1em;
    }
    
    .campaign .campaign-test p {
        margin-left: 0em;
        text-indent: 0em;
    }
    
    .campaign .campaign-test ul {
        list-style: disc;
    }
    
    .campaign .campaign-test dl:first-of-type dt {
        margin: 20px 0 7px 0;
    }
    
    .campaign .campaign-test dl ol p a {
        color: #000;
    }
    /*ボタン*/
    
    .btn {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
    
    .btn div {
        width: 49%;
    }
    
    .btn div::after {
        content: '';
        border: 0;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
    }
    
    .btn div a {
        text-decoration: none;
        display: block;
        background: #FF0076;
        border: 2px solid #FF0076;
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 1.1em;
        padding: 15px 0;
        letter-spacing: 2px;
        transition: ease all 0.3s;
        border-radius: 50px;
    }
    
    .btn div a:hover {
        background: #fff;
        color: #FF0076;
        border: 2px solid #FF0076;
    }
    
    .btn div:hover::after {
        border-top: solid 2px #FF0076;
        border-right: solid 2px #FF0076;
    }
    
    .btn div,
    .btn2 {
        position: relative;
    }
    
    .btn2 {
        width: 60%;
        margin: 50px auto 0;
        position: relative;
    }
    
    .btn2 a {
        text-decoration: none;
        display: block;
        background: #FF0076;
        border: 2px solid #FF0076;
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 1.1em;
        padding: 15px 0;
        transition: ease all 0.3s;
        letter-spacing: 2px;
        border-radius: 50px;
    }
    
    .btn2 a:hover {
        background: #fff;
        color: #FF0076;
        border: 2px solid #FF0076;
    }
    
    .btn2::after {
        content: '';
        border: 0;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
    }
    
    .btn2:hover::after {
        border-top: solid 2px #FF0076;
        border-right: solid 2px #FF0076;
    }
    
    .btn3 {
        padding: 30px 0 0;
    }
    
    .btn4 {
        padding: 70px 0 0;
        line-height: 1.5;
    }
    
    @media screen and (max-width: 480px) {
        .content {
            width: 90%;
            max-width: inherit;
        }
        p,
        dd {
            font-size: 1.2em;
        }
        h1 {
            padding-top: 65px;
        }
        /* プレゼントキャンペーン */
        .campaign {
            padding: 30px 0;
        }
        .campaign .campaign-over h2,
        .campaign .campaign-app h2,
        .campaign .campaign-pre h2,
        .campaign .campaign-con h2,
        .campaign .campaign-test h2 {
            width: 80%;
            margin: 0 auto 15px;
        }
        .subaroad-cnt,
        .campaign-app,
        .campaign-con {
            margin-top: 50px;
        }
        .campaign-over,
        .campaign-pre,
        .campaign-test {
            padding: 30px 0;
            margin-top: 50px;
        }
        .subaroad-cnt,
        .campaign-app,
        .campaign-con,
        .campaign-over,
        .campaign-pre,
        .campaign-test {
            padding: 30px 0;
        }
        .subaroad-cnt {
            padding: 0 20px 30px;
        }
        /* キャンペーン概要 */
        .campaign .campaign-over .lead-inner p,
        .campaign .campaign-over .btn2 {
            width: 90%;
            margin: 0 auto;
        }
        .campaign .campaign-over .lead-inner p {
            padding-bottom: 15px;
        }
        /* SUBAROAD */
        .subaroad-area {
            top: -15px;
            flex-direction: column;
        }
        .subaroad-area h3 {
            font-size: 1.5rem;
            font-weight: 500;
            padding: 20px 0;
        }
        .subaroad-area p {
            font-size: 1.1rem;
        }
        .subaroad-cnt-list {
            width: 100%;
            margin: 0 auto 7%;
        }
        .subaroad-cnt-list .subaroad-cnt-itm {
            width: 24%;
        }
        .subaroad-area-img {
            width: 80%;
            margin: 8% auto 0;
        }
        /* 応募方法 */
        .campaign .campaign-app .app-list,
        .campaign .campaign-app .step ul {
            display: block;
        }
        .campaign .campaign-app .app-list {
            width: 90%;
            margin: 25px auto 0;
        }
        .campaign .campaign-app .app-list li {
            width: 100%;
        }
        .campaign .campaign-app .app-list li:first-child {
            margin-right: 0;
            margin-bottom: 15px;
        }
        .campaign .campaign-app ul li h3 {
            font-size: 1.3em;
            padding: 5px 0;
        }
        .campaign .campaign-app ul li dl div {
            padding: 10px 20px;
        }
        .campaign .campaign-app .lead-inner {
            width: 90%;
            margin: 20px auto 15px;
        }
        .campaign .campaign-app .lead-inner p {
            padding-bottom: 10px;
        }
        .campaign .campaign-app .step ul li {
            width: 100%;
            margin-bottom: 15px;
            padding: 20px;
        }
        .campaign .campaign-app .step ul li h4 {
            font-size: 1.2em;
        }
        .campaign .campaign-app .step ul li .icon {
            margin: 10px auto;
        }
        .campaign .campaign-app .step ul li .image {
            margin: 15px auto 0;
        }
        .campaign .campaign-app .step ul li:first-of-type .image {
            width: 40%;
            margin-top: 0;
        }
        .campaign .precautions {
            margin: 20px auto 0;
        }
        /* ご当選プレゼント */
        .campaign .campaign-pre>p {
            width: 80%;
            margin-top: 20px;
        }
        .campaign .campaign-pre h3 {
            width: 90%;
            margin: 15px auto;
        }
        .campaign .campaign-pre h3>img {
            width: 50%;
            margin-bottom: 5px;
        }
        /* 当選のご連絡 */
        .campaign .campaign-con p {
            width: 90%;
            margin: 0 auto;
            font-size: 1.4em;
        }
        /* ご注意事項 */
        .campaign .campaign-test p {
            font-size: 0.8em;
        }
        .campaign .campaign-test li,
        .campaign .campaign-test p,
        .campaign .campaign-test dt,
        .campaign .campaign-test dd {
            line-height: 1.75;
        }
        .campaign .precautions ul {
            list-style-type: none;
            margin: 10px 10px 10px 1em;
        }
        /* ボタン */
        .btn2 {
            width: 100%;
            margin: 0 auto;
        }
        .btn2 a {
            padding: 10px 0;
            font-size: 1.1em;
            letter-spacing: 1.5px;
        }
        .btn div::after,
        .btn2::after {
            width: 7px;
            height: 7px;
        }
        .btn {
            flex-wrap: wrap;
            padding: 0 0;
            gap: 10px 0;
        }
        .btn div {
            width: 100%;
        }
        .btn div a {
            font-size: 1.1em;
        }
        .btn4 {
            width: 100%;
            margin: 15px auto 0;
            padding: 0;
        }
        .btn4 .btn {
            width: 100%;
        }
        .btn3 {
            padding: 10px 0 0;
        }
        .btn3 .btn {
            width: 100%;
        }
    }