:root {
    --color-white: #fff;
    --color-black: #000;
    --color-light-gray: #d3d3d3;
    --color-light-gray-rgb: 211, 211, 211;
    --color-navy: #1e2f4f;
    --color-gray: #707070;
    --color-blue: #1f8ce8;
    --color-blue-darken: #1266ae;
    --color-red: #e01e19;
}
html {
    scroll-behavior: smooth;
}
body{font-size:15px;}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
main {
    max-width: 1200px;
    margin: auto;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 500;
}
.navy-back {
    background-color: var(--color-navy);
}

.title {
    margin: 60px auto 35px auto;
    padding:20px 0px;
    color: var(--color-white);
    background: var(--color-navy);
    text-align:center;
}
.title h2{
    margin:0px;
    padding:0px;
    font-size:1.05em;
    letter-spacing:0.1em;
}

@media screen and (min-width: 768px) {
    .navy-back {
        background-color: unset;
    }
}
.sub {
    max-width: 960px;
    margin: auto;
}

main img {
    width: 100%;
    display: block;
}

.kv {
    width: 100%;
}

.title-sub {
    color: var(--color-gray);
    text-align: center;
    margin: 20px auto;
}
.requirements {
    margin-bottom: 40px;
}
.requirements_item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    padding: 20px 0;
}
.requirements_item::after {
    position: absolute;
    bottom: 0;
    content: "";
    display: block;
    background-size: 8px 3px;
    background-image: linear-gradient(
        to right,
        var(--color-light-gray),
        var(--color-light-gray) 3px,
        transparent 3px,
        transparent 8px
    );
    height: 3px;
    width: 90%;
}
.requirements_title {
    color: var(--color-gray);
    margin-bottom: 1em;
    width: 100%;
    padding-left: 20px;
}
.requirements_body {
    padding-left: 30px;
}
@media screen and (min-width: 768px) {
    .requirements {
        margin-bottom: 0;
    }
    .requirements_item {
        padding: 20px 40px;
    }
    .requirements_title {
        width: 30%;
        color: var(--color-navy);
        padding-left: 0;
    }
    .requirements_body {
        width: 70%;
        padding-left: 0;
    }
}
.quiz {
    margin: 20px auto;
    width:95%;
}
.quiz-list_item {
    margin: 30px auto;
    padding: 0 20px;
}
.quiz-list_q {
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.quiz-list_q span:first-child {
    border-left: 6px solid var(--color-navy);
    padding-left: 5px;
}
.quiz-list_q span:last-child {
    width: 93%;
    display: none;
}
.quiz-list_body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.quiz-list_image {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
}
.quiz-list_image-box {
    width: 40%;
    margin-right: 5px;
}
.quiz-list-image-caption {
    color: var(--color-gray);
    text-align: right;
    font-size: 0.8em;
}
.quiz-list_a {
    position: relative;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .quiz-list_item {
        padding: 0;
    }
    .quiz-list_q {
        margin-bottom: 30px;
    }
    .quiz-list_q span:first-child {
        width: 5%;
    }
    .quiz-list_q span:last-child {
        display: inline;
    }
    .quiz-list_image {
        justify-content: flex-start;
        width: 30%;
        margin: 0;
    }
    .quiz-list_image-box {
        width: 50%;
        margin-right: 5px;
    }
    .quiz-list_image + .quiz-list_q  {
        display: none;
    }
    .quiz-list_a {
        width: 60%;
    }
    .quiz-list_body {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}
.quiz-list_input {
    width: 100%;
}
.quiz-list_input label {
    display: block;
    font-weight: 0.8em;
    color: var(--color-gray);
    margin-bottom: 5px;
}
.quiz-list_input [type="text"] {
    display: block;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
    font-size: 1.2em;
    padding: 15px 20px;
    outline: none;
    letter-spacing: 0.1em;
}

.quiz-list_hint {
    display: block;
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
    border-radius: 10px;
    letter-spacing: 0.15em;
    width: 10em;
    padding: 10px 0;
    text-align: center;
    margin: 20px 0;
    font-weight: bold;
}
.quiz-list_hint::before {
    content: '';
    display: inline-block;
    vertical-align: sub;
    width: 1.4em;
    height: 1.4em;
    background-image: url(/images/campaign/winter/lightbulb-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.quiz-list_hint.external {
    position: relative;
}
.quiz-list_hint.external::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -1em;
    background-image: url(/images/campaign/winter/clone-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
}
@media screen and (min-width: 768px) {
    .quiz-list_input {
        position: absolute;
        bottom: 0;
    }
    .quiz-list_hint,
    .quiz-list_hint.external {
        position: absolute;
        bottom: 80px;
        right: 0;
    }
}
.form {
    padding: 10px;
}
.form_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
}
.form_title,
.form_title--full {
    padding: 10px 0;
    font-weight: bold;
}

.form_title,
.form_title--full {
    width: 100%;
}

.form_title.required::after,
.form_title--full.required::after {
    content: "※";
    color: var(--color-red);
    font-size: 0.5em;
}

.form_body,
.form_body--full {
    width: 100%;
}
.form_body li,
.form_body--full li {
    margin: 15px 0;
}
@media screen and (min-width: 768px) {
    .form {
        background: rgba(var(--color-light-gray-rgb), 15%);
        padding: 60px 0;
    }
    .form_title {
        width: 18%;
    }
    .form_body {
        width: 78%;
    }
}
.form-error {
    color: var(--color-red);
    font-weight: bold;
}
.title-border {
    padding: 40px 0;
    position: relative;
}
.title-border::before {
    position: absolute;
    top: 0;
    content: "";
    display: block;
    background-size: 8px 3px;
    background-image: linear-gradient(
        to right,
        var(--color-light-gray),
        var(--color-light-gray) 3px,
        transparent 3px,
        transparent 8px
    );
    height: 3px;
    width: 100%;
}
::placeholder {
    color: var(--color-light-gray);
}
.form input[type="text"],
.form input[type="radio"],
.form input[type="checkbox"],
.form input[type="tel"],
.form input[type="email"] {
    border: 1px solid var(--color-light-gray);
    outline: none;
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form label {
    padding: 10px;
    font-size: 1.2em;
}
.form label {
    cursor: pointer;
}
.form input.mini {
    width: 30%;
}
.form input.half {
    width: 45%;
}
.form input.full {
    width: 95%;
}
.form input {
    margin-right: 10px;
}
@media screen and (min-width: 768px) {
    .form input.mini {
        width: 15%;
    }
    .form input.half {
        width: 45%;
    }
}
.restaurants {
    align-items: center;
    margin: 30px 0;
}
.restaurants a {
    position: relative;
    display: block;
    margin: 10px auto;
    width: 50%;
    height: 55px;
}
.restaurants img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.restaurants a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -1em;
    background-image: url(/images/campaign/winter/clone-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
}
.restaurants a:hover {
    opacity: 0.5;
}
@media screen and (min-width: 768px) {
    .restaurants {
        display: flex;
    }
    .restaurants a {
        margin: 0;
        margin-right: 40px;
        width: 150px;
        height: 55px;
    }
}
.prize {
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
    align-items: flex-start;
}
.prize label:first-child {

}
.prize span {
    width: 1em;
    margin-top: 10px;
}
.prize label:last-child {
    width: calc(100% - 6em);
}
.campaign-info {
    background: var(--color-white);
    height: auto;
    margin: 40px auto;
}

.campaign-info table {
    border-collapse: collapse;
    width: 100%;
}
.campaign-info th {
    text-align: left;
    font-weight: bold;
}
.campaign-info th,
.campaign-info td {
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px dotted var(--color-gray);
}
@media screen and (min-width: 768px) {
    .campaign-info {
        overflow: auto;
        height: 300px;
    }
    .campaign-info th {
        text-align: center;
    }
    .campaign-info th,
    .campaign-info td {
        display: table-cell;
        width: auto;
    }
}
.privacy-policy {
    margin: 40px auto;
}
.privacy-policy_text {
    font-size: 0.8em;
    color: var(--color-gray);
}
.privacy-policy a {
    display: block;
    text-align: center;
    color: var(--color-gray);
    margin: 20px auto;
    font-size: 1.15em;
}
.privacy-policy a span {
    border-bottom: 1px solid var(--color-gray);
}
button[type="submit"],
.thanks_link {
    border-radius: 5px;
    color: var(--color-white);
    background: var(--color-blue);
    width: 80%;
    font-size: 1.15em;
    max-width: 300px;
    padding: 1.3em;
    outline: none;
    border: none;
    display: block;
    margin: auto;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-align: center;
}
button[type="submit"]:disabled,button[type="submit"]:disabled:hover{
    cursor: not-allowed;
    background-color:#797e82;
}
.thanks_link a {
    color: inherit;
}
button[type="submit"]:hover,
.thanks_link:hover {
    background: var(--color-blue-darken);
}
.thanks {
    padding: 20px 10px;
    border: 1px solid var(--color-light-gray);
    margin: 20px auto;
}
.thanks p {
    margin-bottom: 10px;
}
.thanks .restaurants {
    justify-content: center;
}
@media screen and (min-width: 768px) {
    .thanks {
        padding: 40px;
    }
}

.thanks-text {
    text-align: right;
    color: var(--color-gray);
    margin: 20px 0 40px 0;
}

#submit-check{
    padding:10px 0px 40px 0px;
    text-align:center;
}

.pc-present{
    width:100%;
    display:block;
}

.sp-present{display:none;}
@media screen and (max-width: 768px){
    .pc-present{display: none;}
    .sp-present{display: block;}
    .title{
        width:100%;
        margin:0px;
        padding:15px 0px;
    }
    .title h2{font-size:1em;}
    .requirements_item::after{width:100%;}

}