@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

/* pc */
@media screen and (min-width: 769px) {
    .contactWrap {
        background-color: #ffffff;
        color: #333333;
    }
    
    .contact_title {
        font-size: 30px;
        line-height: 30px;
        padding-top: 60px;
    }
    .main-contents {
        text-align: center;
    }
    .contact_titleText {
        font-size: 19px;
    }
    .form_listWrap {
        margin: 30px auto 0 auto;
        max-width: 940px;
        width: 100%;
        text-align: left;
    }
    .form_list {
        box-sizing: border-box;
        text-align: center;
        border-top: 1px solid #6e6d6d;
        border-bottom: 1px solid #6e6d6d;
    }
    .form_text {
        display: inline-block;
        position: relative;
        text-align: left;
        letter-spacing: .04em;
        padding: 50px 0;
        font-size: 14px;
        max-width: 200px;
        width: 100%;
        margin-right: 130px;
    }
    .form_text::after {
        content: "必須";
        position: absolute;
        padding: 1px 8px;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        font-size: 13px;
        background-color: #2c2c2c;
        color: #fff;
    }
    .form_text.-not_must::after {
        content:none
    }
    .inputWrap {
        display: inline-block;
        text-align: left;
        padding: 50px 0;
        font-size: 14px;
        max-width: 550px;
        width: 100%;
    }
    
    .input_radio{
        appearance: none;
        position: absolute;
    }
    .radio_text::before {
        content: ''; 
        display: block; 
        border-radius: 50%; 
        border: 1px solid orange;
        width: 16px;
        height: 16px;
    }
    
    .radio_text::after {
        content: '';
        display: block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: orange;
    }
    .radio_text {
        position: relative;
        display: flex;
        align-items: center;
    }
    .radio_text::after {
        content: '';
        position: absolute;
        left: 3px;
        display: block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: orange;
    }
    .input_radio:checked+.radio_text::after { 
        content: '';
        position: absolute;
        left: calc(8px - 5px);
        display: block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: orange;
    }

    .radio input{
        display: none;
    }
    .radio label{
        display: inline-block;
        position: relative;
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 2px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        line-height: 1;
        letter-spacing: .07rem;
    }
    .radio label:not(:first-of-type){
        margin-left: 45px;
    
    }
    .radio label:before{
        position: absolute;
        content: "";
        top: 50%;
        left: -10px;
        width: 18px;
        height: 18px;
        margin-top: -10px;
        background: #ffffff;
        border: 1px solid #c1c1c1;
        border-radius: 50%;
    }
    .radio input[type="radio"]:checked + label:after {
        position: absolute;
        content: "";
        top: 15px;
        left: -6px;
        width: 10px;
        height: 10px;
        margin-top: -4px;
        border-radius: 50%;
        background: #2c2c2c;
    }

    input[type="text"] {
        width: 325px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="text"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    input[type="tel"] {
        width: 325px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="tel"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    input[type="email"] {
        width: 420px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="email"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    input[type="date"] {
        width: 115px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="date"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    .scene {
        width: 200px;
        height: 40px;
    }
    .scene:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }

    .submit_button button {
        color: #ffffff;
        font-size: 14px;
        letter-spacing: .14rem;
        background-color: #2c2c2c;
        padding: 15px 55px;
        border: none;
        margin-top: 60px;
        cursor: pointer;
    }

    .policy_link {
        display: inline-block;
        position: relative;
        margin-top: 25px;
        margin-bottom: 120px;
        border-bottom: 1px solid #d9782d;
        transition: all 0.3s ease 0s;
    
    }
    .policy_link::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: 7px solid;
        border-color: transparent transparent transparent #d9782d;
        margin-left: 10px;
    }
    .policy_link:hover {
        transform: translateY(-0.2em);
        text-shadow: 1px 2px 3px #808080; 
    }

    .submit_button {
        margin-bottom: 120px;
    }
    
    textarea {
        width: 420px;
        height: 200px;
        box-sizing: border-box;
        vertical-align: top;
        border: 1px solid #2c2c2c;
    }
    textarea:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    th, td {
        border: none !important;
    }
}


/* sp */
@media screen and (max-width: 769px) {
    .main-contents {
        padding-top: 150px;
        text-align: center;
    }
    .contact_titleText {
        font-size: 19px;
    }
    .form_listWrap {
        margin: 90px auto 0 auto;
        max-width: 940px;
        width: 100%;
        text-align: left;
    }
    .form_list {
        box-sizing: border-box;
        text-align: center;
        border-top: 1px solid #6e6d6d;
        border-bottom: 1px solid #6e6d6d;
    }
    .form_text {
        display: inline-block;
        position: relative;
        text-align: left;
        padding: 50px 0;
        font-size: 14px;
        max-width: 200px;
        width: 100%;
        margin-right: 130px;
    }
    .form_text::after {
        content: "必須";
        position: absolute;
        padding: 1px 8px;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        font-size: 13px;
        background-color: #2c2c2c;
        color: #fff;
    }
    .form_text.-not_must::after {
        content:none
    }
    .inputWrap {
        display: inline-block;
        text-align: left;
        padding: 50px 0;
        font-size: 14px;
        max-width: 550px;
        width: 100%;
    }
    
    .input_radio{
        appearance: none;
        position: absolute;
    }
    .radio_text::before {
        content: ''; 
        display: block; 
        border-radius: 50%; 
        border: 1px solid orange;
        width: 16px;
        height: 16px;
    }
    
    .radio_text::after {
        content: '';
        display: block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: orange;
    }
    .radio_text {
        position: relative;
        display: flex;
        align-items: center;
    }
    .radio_text::after {
        content: '';
        position: absolute;
        left: 3px;
        display: block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: orange;
    }
    .input_radio:checked+.radio_text::after { 
        content: '';
        position: absolute;
        left: calc(8px - 5px);
        display: block;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: orange;
    }

    .radio input{
        display: none;
    }
    .radio label{
        display: inline-block;
        position: relative;
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 2px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        line-height: 1;
    }
    .radio label:not(:first-of-type){
        margin-left: 45px;
    
    }
    .radio label:before{
        position: absolute;
        content: "";
        top: 50%;
        left: -10px;
        width: 18px;
        height: 18px;
        margin-top: -10px;
        background: #ffffff;
        border: 1px solid #c1c1c1;
        border-radius: 50%;
    }
    .radio input[type="radio"]:checked + label:after {
        position: absolute;
        content: "";
        top: 16px;
        left: -5px;
        width: 10px;
        height: 10px;
        margin-top: -4px;
        border-radius: 50%;
        background: #2c2c2c;
    }

    input[type="text"] {
        width: 325px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="text"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    input[type="tel"] {
        width: 325px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="tel"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    input[type="email"] {
        width: 420px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="email"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    input[type="date"] {
        width: 115px;
        height: 40px;
        box-sizing: border-box;
    }
    input[type="date"]:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    .scene {
        width: 200px;
        height: 40px;
    }
    .scene:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }

    .submit_button button {
        color: #ffffff;
        font-size: 14px;
        background-color: #2c2c2c;
        padding: 15px 55px;
        border: none;
        margin-top: 60px;
        cursor: pointer;
    }

    .policy_link {
        display: inline-block;
        position: relative;
        margin-top: 25px;
        margin-bottom: 120px;
        border-bottom: 1px solid #d9782d;
        transition: all 0.3s ease 0s;
    
    }
    .policy_link::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: 7px solid;
        border-color: transparent transparent transparent #d9782d;
        margin-left: 10px;
    }
    .policy_link:hover {
        transform: translateY(-0.2em);
        text-shadow: 1px 2px 3px #808080; 
    }

    .submit_button {
        margin-bottom: 48px;
        padding-bottom: 70px;
        border-bottom: 1px solid #555;
    }
    
    textarea {
        width: 420px;
        height: 200px;
        box-sizing: border-box;
        vertical-align: top;
    }
    textarea:focus {
        border: 2px solid #2c2c2c; 
        z-index: 10;
        outline: 0;
    }
    th, td {
        border: none !important;
    }
/* 480px以下に適用されるCSS（スマホ用） */
body {
    min-width: 320px !important;
    max-width: 769px !important;
}
/* 
.contactWrap {
    padding-top: 20px;
} */
.contact_title {
    font-size: 32px;
    line-height: 1.3;
    padding-top: 190px;
    margin-top: -190px;
}
.main-contents{
    padding-top: 90px;
}
.form_listWrap{
    margin-top: 50px;
    overflow: hidden;
}
.header_logo{
    font-size: 25px;
}
.radio label {
    display: block;
}
.radio label:before {
    left: 10px;
}
.radio input[type="radio"]:checked + label:after {
    left: 15px;
}
.radio label:not(:first-of-type){
    margin-left: 0;
}
.inputWrap{
    text-align: center;
    padding: 15px 0 25px 0;
}
.inputWrap.radio{
    width: 50%;
    display: block;
    margin: 0 auto;
}

.form_text {
    margin-right: 0;
    padding: 25px 16px 0 65px;
    max-width: none;
    
}
.form_text::after {
    content: "必須";
    position: absolute;
    padding: 1px 8px;
    top: 76%;
    transform: translateY(-50%);
    left: 16px;
    right: unset;
    font-size: 13px;
    background-color: #2c2c2c;
}

.footer_contents {
    flex-direction: column;
}
.footer_textWrap {
    margin-left: 0;
}
.footer_leftTitle {
    padding-left: 0;
    text-align: center;
}
input[type="text"] ,input[type="email"],input[type="tel"] {
	width:90%;
}
textarea {
    width: 90%;
}
.contact_note {
    font-size: 14px;
    padding: 0 16px;
}
.submit_button button {
    margin-top: 40px;
}
.contact_titleText {
    font-size: 14px;
}
}