@charset "utf-8";


/* common ---------------- */
#contents {  }

/* title */

/* contents ---------------- */

/* contact ---------------- */
#contact .pageTitle { padding-block: 1.2em; text-align: center; font-size: 2.5em; color: var(--color-wht); background-color: var(--color-base); }
.noticeBox { width: fit-content; margin: 3em auto; }
.noticeBox p { margin-block: 0 .8em; line-height: 1.5; }
form { max-width: 820px; width: 100%; margin-inline: auto; }
.form-area > div { display: flex; }
.form-area > div > dt { width: 30%; padding: 15px; font-weight: 600; text-align: left; background-color: #f7f7f7; border-bottom: 1px dotted var(--color-text); }
.form-area > div > dd { width: 70%; padding: 1em; border-bottom: 1px dotted var(--color-text); }
input[type="text"], input[type="number"], input[type="tel"], input[type="email"] { border-left: 2px solid #c00; }
.form-area > div > dd.yoyaku-list > input:nth-of-type(n+2) { border-left: 1px solid #ccc; }
.noticeBox2 p { width: fit-content; margin: 2em auto; padding: 1.5em 2.5em; line-height: 1.6; border: 1px solid #ccc; }
input[type=submit],input[type=button],.btn-def { margin-bottom: 2em; padding: .7em 1.7em; color: var(--color-wht); font-size: 1.3em; font-weight: bold; background-color: var(--color-sub2); border-radius: 9999px; box-shadow: 0 5px 1px #ccc; }
.btn-def { font-size: 1em; }
input[type=submit],input[type=button] { padding: .5em 1.5em; }
input[type=button] { background-color: #b7b7b7; }
a.btn-def:hover { color: var(--color-wht); background-color: var(--color-base); }
input[type=submit]:hover { background-color: var(--color-base); transition: all .3s; }
.contents { margin-block: 3em; }
#myForm .submit { max-width: 600px; margin: .5em auto 0; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {

}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  #contact .pageTitle { font-size: 2em; }
  #contents.inner { margin: 0; }
  .noticeBox { margin: 3em 1em; }
  .form-area > div { flex-direction: column; }
  .form-area > div > dt { width: 100%; padding: 8px 15px; }
  .form-area > div > dd { width: 100%; }
  .noticeBox2 p { padding: 1em 1.5em; }

}