@charset "UTF-8";
/* 日本語 charset "utf-8 */
@keyframes test { 0% { background-position: left center; }
  100% { background-position: -1733px center; } }
@keyframes bg-move { 0% { width: 0; }
  100% { width: 100%; left: 180px; } }
#contact { width: calc(100% - 40px); margin-left: 40px; margin-top: 80px; }
#contact .page-header { width: 100%; height: 200px; background-image: url(../images/contact/header.png); background-size: cover; background-color: black; background-repeat: no-repeat; padding-top: 24px; }
#contact .page-header .header-wrap { margin: 0 auto; width: 1024px; }
#contact .page-header .header-wrap .page-name { font-family: "Fjalla One", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; font-size: 40px; line-height: 32px; color: white; text-align: center; margin-top: 44px; margin-bottom: 40px; }
#contact .container { margin-top: 72px; }
#contact .container .txt { text-align: center; }
#contact .container .txt p { font-size: 16px; line-height: 32px; }
#contact .container .form { margin-top: 72px; border-top: 1px solid black; }
#contact .container .form * { font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; }
#contact .container .form .form-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; }
#contact .container .form .form-wrap::after { position: absolute; content: ""; display: block; top: 0; left: 214px; width: 1; height: 100%; border-right: 1px dotted black; }
#contact .container .form .form-wrap dt, #contact .container .form .form-wrap dd { margin-top: 24px; padding-left: 48px; }
#contact .container .form .form-wrap dt { width: 214px; font-size: 14px; font-weight: bold; padding-top: 12px; }
#contact .container .form .form-wrap dt span { color: #dd0000; font-weight: bold; }
#contact .container .form .form-wrap dd { width: calc(100% - 214px); }
#contact .container .form .form-wrap dd input, #contact .container .form .form-wrap dd select, #contact .container .form .form-wrap dd textarea { border: 1px solid black; padding: 12px; }
#contact .container .form .form-wrap dd input[type=text] { width: 230px; }
#contact .container .form .form-wrap dd .form-select { position: relative; display: inline-block; }
#contact .container .form .form-wrap dd .form-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 104px; }
#contact .container .form .form-wrap dd .form-select:after { position: absolute; content: ""; display: block; top: calc(50% - 4px); right: 17px; width: 5px; height: 5px; border: 1px solid black; border-top: none; border-right: none; transform: rotate(-45deg); }
#contact .container .form .form-wrap dd .form-select._items select { width: 230px; }
#contact .container .form .form-wrap dd textarea { width: 664px; height: 320px; }
#contact .container .form .form-wrap dd .form-txt { font-size: 14px; line-height: 26px; }
#contact .container .form .form-wrap dd .form-txt a { text-decoration: underline; }
#contact .container .form .form-wrap dd .form-btn { padding: 64px 0 104px; }
#contact .container .form .form-wrap dd .form-btn button { width: 312px; border: 1px solid black; display: flex; justify-content: space-between; align-items: center; line-height: 48px; box-sizing: border-box; background: white; margin: 0 auto; }
#contact .container .form .form-wrap dd .form-btn button p { position: relative; font-size: 16px; color: black; text-align: center; width: 100%; height: 48px; text-indent: -24px; font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; }
#contact .container .form .form-wrap dd .form-btn button p span { position: absolute; width: 48px; height: 48px; background: black; color: white; border-left: 1px solid black; display: flex; top: 0; right: 0; box-sizing: border-box; }
#contact .container .form .form-wrap dd .form-btn button p span::before { display: block; position: absolute; width: 7px; height: 7px; content: ''; transform: rotate(-45deg); border-right: 1px solid white; border-bottom: 1px solid white; top: calc(50% - 4px); left: calc(50% - 4px); }
#contact .container .form .form-wrap dd .form-btn button:hover { background: black; }
#contact .container .form .form-wrap dd .form-btn button:hover p { color: white; }
#contact .container .form .form-wrap dd .form-btn button:hover p span { border-left: 1px solid white; }
#contact .container .form .form-wrap dd .form-block:nth-of-type(n+2) { margin-top: 24px; }
#contact .container .form .form-wrap dd span { font-size: 14px; display: inline-block; margin-left: 10px; }
#contact .container .form .form-wrap dd > span { margin-left: 4px; vertical-align: bottom; }