@media screen and (min-width: 768px) {
    input[type=radio] {
        display: none;
    }
    
    .radio-label {
        position: relative;
        padding: 0 15px 0 22px;
    }
    
    .radio-label:after, .radio-label:before {
        position: absolute; /* ボックスの位置を指定する */
        content: ""; /* ボックスのコンテンツ */
        display: block; /* ブロックレベル要素化する */
        top: 50%; /* 上部から配置の基準位置を決める */
        transition: 0.2s;
    }
    
    .radio-label:after {
        left: 0; /* 左から配置の基準位置を決める */
        margin-top: -10px; /* チェック枠の位置 */
        width: 15px; /* ボックスの横幅を指定する */
        height: 15px; /* ボックスの高さを指定する */
        border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
        border-radius: 50%; /* ボックスの角丸を指定する */
    }
    
    .radio-label:before {
        left: 5px; /* 左から配置の基準位置を決める */
        margin-top: -5px; /* チェックマークの位置 */
        width: 9px; /* ボックスの横幅を指定する */
        height: 9px; /* ボックスの高さを指定する */
        background: #1d2051;/* ボックスの背景色を指定する */
        border-radius: 50%; /* ボックスの角丸を指定する */
        opacity: 0; /* 要素を透過指定する */
    }
    
    input[type=radio]:checked + .radio-label:before {
        opacity: 1; /* 要素を表示する */
    }
    
    .radio-label:hover:after {
        border-color: #1d2051; /* ボックスの境界線を実線で指定する */
    }
    
    .form,
    input::placeholder {
        letter-spacing: 0.07em
    }
    
    .text-input {
        border: solid 1px #da251d;
        font-size: 16px;
        width: 70%;
        padding: 10px;
    }
    
    .heading {
        margin: 150px 0 50px;
        width: 80%;
        padding: 250px 0 30px 5%;
        background: linear-gradient(60deg, #fff, #CCEDEF);
    }
    
    .heading img {
        position: absolute;
        top: 75px;
        right: 20%;
    }
    
    .main {
        background: linear-gradient(60deg, #E3EBEB, #E6ECEF);
        padding: 80px 0;
    }
    
    .main .content {
        display: flex;
        font-size: 16px;
    }
    
    .main .content .name {
        width: 35%;
        margin: 0 20px 50px 0;
        text-align: right;
    }
    
    .main .content .name.radio {
        margin-right: 20px;
    }
    
    .main .content .answer {
        width: 65%;
        position: relative;
    }
    
    .main .content .answer .hint {
        position: absolute;
        bottom: calc(100% + 8px);
        background: #1D2051;
        padding: 14px;
        color: white;
        border-radius: 5px;
        font-size: 14px;
        display: none;
    }
    
    .hint .check {
        display: inline-block;
    }
    
    .hint .check.ok {
        width: 14px;
        height: 14px;
        border: solid 2px #7BD81E;
        border-radius: 50%;
        margin: 0 5px -4px 0;
    }
    
    .hint .check.error {
        margin: 0 5px 0 0;
        width: 18px;
        height: 0;
    }
    
    .hint .check.error::before,
    .hint .check.error::after {
        content: '';
        width: 16px;
        height: 2px;
        background: #da251d;
        display: inline-block;
        position: absolute;
    }
    
    .hint .check.error::before {
        transform: rotate(-45deg);
        top: 24px;
    }
    
    .hint .check.error::after {
        transform: rotate(45deg);
        top: 24px;
    }
    
    .confirm {
        margin: 0 auto;
        text-align: center;
        color: #da251d;
    }
    
    .confirm .error {
        margin-top: 80px;
    }
    
    .confirm .error-items {
        text-align: left;
        display: inline-block;
        margin: auto;
    }
    
    .main .c-button {
        margin: 50px auto 0;
        padding: 15px 0;
        width: 230px;
        opacity: 0.5;
        display: block;
        pointer-events: none;
    }
    
    .thanks {
        display: none;
        margin: 100px auto;
        text-align: center;
        font-size: 18px;
        letter-spacing: 0.04em;
    }
    
    .thanks .title {
        font-size: 30px;
        margin-bottom: 20px;
    }
}


@media screen and (max-width: 767px) {
    input[type=radio] {
        display: none;
    }
    
    .radio-label {
        position: relative;
        padding: 0 15px 0 22px;
        margin-bottom: 1vw;
        display: block;
    }
    
    .radio-label:after, .radio-label:before {
        position: absolute; /* ボックスの位置を指定する */
        content: ""; /* ボックスのコンテンツ */
        display: block; /* ブロックレベル要素化する */
        top: 50%; /* 上部から配置の基準位置を決める */
        transition: 0.2s;
    }
    
    .radio-label:after {
        left: 0; /* 左から配置の基準位置を決める */
        margin-top: -10px; /* チェック枠の位置 */
        width: 15px; /* ボックスの横幅を指定する */
        height: 15px; /* ボックスの高さを指定する */
        border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
        border-radius: 50%; /* ボックスの角丸を指定する */
    }
    
    .radio-label:before {
        left: 5px; /* 左から配置の基準位置を決める */
        margin-top: -5px; /* チェックマークの位置 */
        width: 9px; /* ボックスの横幅を指定する */
        height: 9px; /* ボックスの高さを指定する */
        background: #1d2051;/* ボックスの背景色を指定する */
        border-radius: 50%; /* ボックスの角丸を指定する */
        opacity: 0; /* 要素を透過指定する */
    }
    
    input[type=radio]:checked + .radio-label:before {
        opacity: 1; /* 要素を表示する */
    }
    
    .radio-label:hover:after {
        border-color: #1d2051; /* ボックスの境界線を実線で指定する */
    }
    
    .text-input {
        border: solid 1px #DA251D;
        font-size: 3.8vw;
        width: calc(100% - 3vw * 2);
        padding: 3vw;
    }
    
    .heading {
        margin: 21vw 0 30vw;
        width: 85%;
        height: 35vw;
        background: linear-gradient(60deg, #fff, #CCEDEF);
    }
    
    .heading img {
        position: absolute;
        top: 17vw;
        right: 18%;
        width: 8vw;
    }
    
    .heading .text {
        font-size: 3.2vw;
        width: 90vw;
        position: absolute;
        top: 68vw;
        left: 5vw;
    }
    
    .main {
        background: linear-gradient(60deg, #E3EBEB, #E6ECEF);
        padding: 8vw 0;
    }
    
    .main .content {
        font-size: 3.6vw;
    }
    
    .main .content .name {
        width: 35%;
        margin: 0 auto 2vw;
        text-align: center;
    }
    
    .main .content .answer {
        width: 85vw;
        margin: 0 auto 7vw;
    }
    
    .main .content .answer .hint {
        position: absolute;
        bottom: calc(100% + 8px);
        background: #1D2051;
        padding: 14px;
        color: white;
        border-radius: 5px;
        font-size: 14px;
        display: none;
    }
    
    .confirm {
        margin: 0 auto;
        text-align: center;
        color: #da251d;
    }
    
    .confirm .error {
        margin-top: 15vw;
        font-size: 3.5vw;
    }
    
    .confirm .error-items {
        text-align: left;
        display: inline-block;
        margin: auto;
        font-size: 4vw;
    }
    
    .main .c-button {
        margin: 10vw auto 0;
        padding: 5vw 0;
        width: 65vw;
        display: block;
        opacity: 0.5;
        pointer-events: none;
    }
    
    .thanks {
        display: none;
        margin: 25vw auto;
        text-align: center;
        font-size: 3.8vw;
        letter-spacing: 0.04em;
        width: 90vw;
    }
    
    .thanks .title {
        font-size: 4.8vw;
        margin-bottom: 5vw;
    }
}