*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#000;
    color:#fff;
    font-family:
        "Hiragino Sans",
        "Yu Gothic",
        sans-serif;
    line-height:1.8;
}

img{
    display:block;
    width:100%;
    height:auto;
}

a{
    color:inherit;
}

.campaign-image{
    width:100%;
}

.entry-area{
    padding:40px 20px;
    text-align:center;
}

.entry-btn{
    display:inline-block;
    background:#ffffff;
    color:#000000;
    text-decoration:none;
    font-weight:bold;
    font-size:18px;
    padding:18px 50px;
    border-radius:999px;
    transition:.3s;
}

.entry-btn:hover{
    opacity:.85;
}

.terms{
    max-width:1200px;
    margin:0 auto;
    padding:40px 20px 40px;
}

.terms h2{
    text-align:left;
    font-size:32px;
    margin-bottom:50px;
}

.terms-block{
    margin-bottom:40px;
    padding-bottom:30px;
    border-bottom:1px solid #333;
}

.terms-block h3{
    font-size:22px;
    margin-bottom:15px;
}

.terms-block p,
.terms-block li{
    color:#dddddd;
    font-size:15px;
}

.terms-block ul,
.terms-block ol{
    padding-left:1.5em;
}

.terms-block a{
    text-decoration:underline;
}

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

    .entry-btn{
        width:100%;
        max-width:340px;
        font-size:16px;
        padding:16px;
    }

    .terms{
        padding:30px 20px 80px;
    }

    .terms h2{
        font-size:24px;
    }

    .terms-block h3{
        font-size:18px;
    }

    .terms-block p,
    .terms-block li{
        font-size:14px;
    }

}

/* ==================================
   キャンペーン応募ボタン
================================== */

.btn-area{
    text-align:center;
    margin:40px auto 60px;
}

.campaign-btn{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    width:min(90%,520px);
    height:150px;

    margin:auto;

    color:#fff;
    text-decoration:none;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            #5a5a5a 0%,
            #2b2b2b 50%,
            #161616 100%
        );

    border:2px solid rgba(212,175,55,.55);

    overflow:hidden;

    box-shadow:
        0 10px 20px rgba(0,0,0,.35),
        0 0 12px rgba(212,175,55,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    animation:glow 3s ease-in-out infinite;
}

.campaign-btn::before{
    content:"";
    position:absolute;

    top:0;
    left:-150%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform:skewX(-25deg);

    animation:shine 4s infinite;
}

.btn-sub{
    position:relative;
    z-index:2;

    font-size:18px;
    letter-spacing:.08em;
    margin-bottom:8px;
}

.btn-main{
    position:relative;
    z-index:2;

    font-size:56px;
    font-weight:700;
    line-height:1;
}

.arrow{
    position:absolute;
    right:35px;

    z-index:2;

    font-size:46px;
    font-weight:300;

    transition:transform .3s ease;
}

.campaign-btn:hover{
    transform:translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 28px rgba(212,175,55,.45);
}

.campaign-btn:hover .arrow{
    transform:translateX(8px);
}

@keyframes glow{

    0%{
        box-shadow:
            0 10px 20px rgba(0,0,0,.35),
            0 0 10px rgba(212,175,55,.15);
    }

    50%{
        box-shadow:
            0 10px 20px rgba(0,0,0,.35),
            0 0 28px rgba(212,175,55,.45);
    }

    100%{
        box-shadow:
            0 10px 20px rgba(0,0,0,.35),
            0 0 10px rgba(212,175,55,.15);
    }

}

@keyframes shine{

    0%{
        left:-150%;
    }

    20%{
        left:150%;
    }

    100%{
        left:150%;
    }

}

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

    .campaign-btn{
        height:110px;
    }

    .btn-sub{
        font-size:14px;
    }

    .btn-main{
        font-size:38px;
    }

    .arrow{
        right:20px;
        font-size:32px;
    }

}

.prize-list{
    margin:20px 0 25px;
}

.prize-item{
    background:#111;
    border-left:4px solid #c9a227;
    padding:18px 20px;
    margin-bottom:12px;
    border-radius:6px;
    line-height:1.8;
}

.prize-item strong{
    color:#fff;
    font-size:18px;
}

.notes p{
    margin:10px 0;
    color:#ccc;
    line-height:1.8;
}

.example-box,
.attention-box{
    margin:20px 0;
    padding:20px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
}

.ok{
    border-left:4px solid #6abf69;
}

.ng{
    border-left:4px solid #d46a6a;
}

.example-box h4,
.attention-box h4{
    margin-bottom:15px;
}

.example-box ul{
    margin:10px 0 20px 20px;
}

.example-box li{
    margin-bottom:8px;
}

.attention-box p{
    margin-bottom:10px;
}

.indent-list{
    margin:10px 0 15px 20px;
}

.indent-list p{
    margin:4px 0;
}

.bullet{
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.8;
}

.contact-mail{
    margin:15px 0 25px;
    padding:15px 20px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:6px;
    line-height:1.8;
}

.contact-mail a{
    color:#c9a227;
    word-break:break-all;
}

.indent-list p{
    margin:0 0 10px;
    padding-left:1em;
    text-indent:-1em;
    line-height:1.8;
}

.sp-br{
    display:none;
}

@media screen and (max-width:768px){
    .sp-br{
        display:block;
    }
}

.note{
    margin:10px 0;
    color:#ccc;
    line-height:1.8;
    padding-left:1.2em;
    text-indent:-1.2em;
}

.product-list{
    list-style:none;
    margin:15px 0;
}

.product-list li{
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.product-list .name{
    display:block;
    color:#fff;
    font-weight:600;
}

.product-list .spec{
    display:block;
    color:#bbb;
    font-size:.9em;
}

footer {
  text-align: center;
  padding: 20px 10px;
  font-size: 12px;
  color: #fff;
  background: #000; 
}