@charset "utf-8";

.contact_form_wrap {
    /* 最大幅を950pxにして中央配置 */
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

.contact_form_inner {
    padding: var(--content-gutter) var(--gutter-base);
    margin: var(--gutter-base);
    border: var(--text-color) 1px solid;
}

.contact_form_box {
    margin-bottom: var(--gutter-2x);
    margin-left: var(--gutter-base);
    margin-right: var(--gutter-base);
}

label {
    display: block;
    margin-bottom: var(--gutter-base);
    cursor: default;
}

input {
    width: 100%;
    padding: var(--gutter-base);
    outline: none;
}

textarea {
    width: 100%;
    height: 160px;
    padding: var(--gutter-base);
    outline: none;
}

@media screen and (min-width:950px) {
    .contact_form_inner {
        padding: var(--content-gutter-pc) var(--gutter-2x);
        margin: var(--gutter-2x);
    }

    .contact_form_box {
        margin-bottom: var(--gutter-4x);
        margin-left: var(--gutter-2x);
        margin-right: var(--gutter-2x);
    }

    label {
        font-size: 18px;
        margin-bottom: var(--gutter-2x);
    }

    input {
        font-size: 18px;
        padding: var(--gutter-2x);
    }

    textarea {
        font-size: 18px;
        padding: var(--gutter-2x);
        height: 320px;
    }
}

/*=====min-width:950px=====*/

/* ボタンの設定 */
.contact_form_btn_wrap {
    /* 最大幅を950pxにして中央配置 */
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    /* ボタン内文字を中央配置 */
    text-align: center;
    /* 入力フォームとの間に余白を設ける */
    margin-top: var(--content-gutter);
}

.contact_form_btn_inner {
    /* テキスト横余白 */
    margin: 0 var(--gutter-base);
}

.contact_form_btn {
    /* ボタンらしく囲い線を作る */
    border: var(--sub-color) 2px solid;
    /* リンク範囲を親要素の横幅いっぱいにする */
    display: block;
    /* 上下余白 */
    padding: var(--gutter-2x) 0;
    /* 文字サイズを大きめにする */
    font-size: var(--size-lg);
    /* リンク文字の下線を消す */
    text-decoration: none;
    /* 文字色を囲い線と同じにする */
    color: var(--sub-color);
    /* hoverアニメーションの速さを通常程度にする */
    transition: 0.2s;
    /* 横幅を親要素に合わせる */
    width: 100%;
    /* 背景色を白色にする */
    background-color: var(--white);
    /* hover時指カーソルにする */
    cursor: pointer;
}

.contact_form_btn:hover {
    /* hover時ボタン色変更文字白抜き */
    background-color: var(--sub-color);
    color: var(--white);
}

@media screen and (min-width:950px) {
    .contact_form_btn_wrap {
        /* 入力フォームとの間に余白を設ける */
        margin-top: var(--content-gutter-pc);
    }

    .contact_form_btn_inner {
        /* テキスト横余白 */
        margin: 0 var(--gutter-2x);
    }

    .contact_form_btn {
        /* ボタンらしく囲い線を作る */
        border: var(--sub-color) 2px solid;
        /* 上下余白 */
        padding: var(--gutter-4x) 0;
    }
}

/*=====min-width:950px=====*/

/* フォームの細かい設定 */
.attention {
    color: var(--sub-color);
}

/* 戻るボタンの設定 */
.contact_back_btn {
    display: block;
    margin-top: var(--content-gutter);
    margin-left: auto;
    margin-right: auto;
    transition: 0.2s;
}

.contact_back_btn:hover {
    color: var(--sub-color);
}

@media screen and (min-width:950px) {
    .contact_back_btn {
        margin-top: var(--content-gutter-pc);
    }
}

/*=====min-width:950px=====*/


/* フッターの設定 */
footer {
    margin-top: var(--footer-gutter);
}

@media screen and (min-width:950px) {
    footer {
        margin-top: var(--footer-gutter-pc);
    }
}

/*=====min-width:950px=====*/

/* 240727追記 */
/* トップ画像を設定 */
.page_title_wrap {
    background-image: url(../../img/contact_top_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 30%;
}

/* 240727追記ここまで */