@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300&family=Open+Sans+Condensed:wght@300&family=Quicksand:wght@300&family=Sawarabi+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

#Gothic {
    font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

#Mincho {
    font-family: 'Sawarabi Mincho', sans-serif;
}

#Numbers {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-family: 'Open Sans Condensed', sans-serif;
    font-family: 'Quicksand', sans-serif;
}

#Noto {
    font-family: 'Noto Sans JP', sans-serif;
}

#YuGothic {
    font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

.breadcrumb {
    height: auto;
    width: 74%;
    color: #323232;
    margin: 0 auto;
    padding: 1.2em 0;
}

.list, .slash {
    line-height: 0.2em;
    font-size: 0.9em;
}

.link-privacy_policy:link, .link-privacy_policy:visited, .link-privacy_policy:active {
    color: #073061;
}

.slash {
    margin: 0 0.4em;;
}


/* メインページ */
.contact {
    color: #323232;
}

.contact-header {
    height: auto;
    width: 100%;
}

.contact-header-inner {
    height: auto;
    width: 74%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 1.2em 0;
    /* 複数行テキスト上下中央 */
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: left;  /* 子要素をflexboxにより中央に配置する */
}

span.contact-header-title {
    font-size: 2.4vw;
    font-weight: 200;
}

span.contact-header-subtitle {
    font-size: 1.6vw;
    color: #b5c1de;
    padding-left: 0.2em;
}

.contact1 {
    width: 60%;
    margin: 0 auto;
}

.contact1-inner {
    height: auto;
    width: 80%;
    box-sizing: border-box;
    margin: 0 auto;
}

.contact1-attention {
    margin: 0.4em 0;
    padding: 30px 50px;
}

.contact1-contact-form {
    height: auto;
    width: 60%;
    border: 1px solid silver;
    text-align: center;
    margin: 0 auto;
    padding: 2.6em 3.2em;
}

span.contact1-attention-text, span.contact1-form-text, span.contact1-form-phone {
    font-size: 1em;
    line-height: 1.8;
    display: block;
}

.contact2 {
    height: auto;
    width: 60%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 2.6em 3.2em;
}

.contact2-attention {
    width: 80%;
    text-align: right;
    box-sizing: border-box;
    margin: 0 auto;
    padding-bottom: 0.4em;
}

span.contact2-attention-require {
    color: #fa723d;
}

form {
    width: 92%;
    box-sizing: border-box;
    margin: 0 auto;
}

.form-group {
    display: flex;
    box-sizing: border-box;
    padding: 0.4em 0;
}

.labels {
    width: 30%;
    padding: 0.8em;
}

label {
    width: 30%;
    padding: 0.8em;
}

input#company, input#email, textarea#comment, .name-group {
    width: calc(100% - 30%);
    box-sizing: border-box;
}

.name-group {
    display: flex;
}

input#lastname, input#firstname {
    width: 100%;
    box-sizing: border-box;
}

input#firstname {
    margin-left: 0.8em;
}

input, textarea, select {
    border: solid 1px #c0c0c0;
    border-radius: 4px;
    resize: none;
    padding: 0.8em;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1em;
}

.form-button {
    text-align: center;
    margin-top: 4em;
}

.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
    font-size: 1em;
    text-align: center;
    cursor: pointer;
    padding: 1em 6em;
    background: #073061;
    color: #ffffff;
    line-height: 1em;
    transition: .3s;
    border: 1px solid #073061;
}

.button:hover {
    color: #073061;
    background: #ffffff;
}

/* スマートフォン */
@media screen and (max-width: 600px) {

    .breadcrumb {
        width: 90%;
        padding: 0.6em 0;
    }

    .list, .slash {
        font-size: 0.8em;
    }

    .contact-header-inner {
        width: 90%;
    }

    span.contact-header-title {
        font-size: 5.4vw;
        font-weight: 200;
    }

    span.contact-header-subtitle {
        font-size: 4.2vw;
    }
    
    .contact1 {
        width: 100%;
    }

    .contact1-attention {
        padding: 10px;
    }

    .contact1-contact-form {
        width: 90%;
        padding: 10px 20px;
    }

    .contact2 {
        width: 90%;
        margin-top: 20px;
        padding: 0;
    }

    .form-group {
        display: block;
    } 

    span.contact1-attention-text, span.contact1-form-text, span.contact1-form-phone, span.contact2-attention-require {
        font-size: 0.8em;
    }

    .contact1-attention {
        padding: 10px;
    }

    span.purchase1-attention-text, label, span.required, input, select, textarea {
        font-size: 0.8em;
    }

    .purchase2 {
        width: 90%;
        margin-top: 20px;
        padding: 0;
    }

    form {
        width: 90%;
    }

    .form-group {
        display: block;
    }

    .labels {
        width: 100%;
        margin-bottom: 6px;
        padding: 0;
    }

    input#email, input#phone, input#postcode, textarea#comment, .name-group, select, input#address, input#building, input#count {
        width: 100%;
    }
}

/* タブレット */
@media screen and (min-width: 601px) and (max-width: 1024px) {

    .breadcrumb {
        width: 84%;
    }

    .contact-header-inner {
        height: 12vw;
        width: 84%;
    }

    .contact1, .contact2 {
        width: 100%;
    }

    .contact1-inner, form {
        width: 84%;
    }

    .contact-header-inner {
        height: 12vw;
        width: 84%;
    }

    .contact2 {
        padding: 0;
    }

    .contact1-attention {
        padding: 30px;
    }

    .contact1-inner, form {
        width: 84%;
    }
}