@charset "UTF-8";
@import url(./base-style.css);

/* ------------------------------
section_h2
------------------------------ */
.h2_block {
  background-image: url(../images/contact_bg.jpg);
}

/* ------------------------------
入力フォーム
------------------------------ */
form {
  padding-right: 10px;
  color: #888;
}
/* お客様情報 */
fieldset {
  padding: 10px;
  border: solid 1px #bbb;
  margin-bottom: 1rem;
}
fieldset > legend {
  font-size: 0.9rem;
}
.controller {
  position: relative;
  margin: 0 0 20px;
}
.controller:last-of-type {
  margin-bottom: 10px;
}
.controller > .label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.5rem;
  transition: all 0.3s;
}
.controller > .input {
  width: 100%;
  height: 3.5rem;
  padding: 10px 10px 3px;
  border: solid 1px #888;
}
.controller.entered > .label {
  transform: translateY(-120%);
  font-size: 0.8rem;
  opacity: 0.6;
}

/* お問い合わせ内容 */
.controller.content > label {
  padding: 10px;
}
textarea {
  display: block;
  width: 100%;
  padding: 5px;
}

/* ボタン */
.btn_area > .button {
  width: 100%;
  background-color: #585858;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 1rem 0;
  cursor: pointer;
}
.btn_area.type_2 {
  display: flex;
  justify-content: space-between;
}
.btn_area.type_2 > .button {
  width: 48%;
}

/* 共通 */
.controller > .input,
textarea,
.btn_area .button {
  border-radius: 5px;
}


/* 画面幅1000px以下 */
@media screen and (max-width: 1000px) {
  
  form {
    padding: 10px;   /* 上書き */
  }
  /* 画像を非表示に */
  .set_bgimage {
    height: 0;
    overflow-y: hidden;
  }

}

/* 画面幅1001px以上 */
@media screen and (min-width: 1001px) {
  
  /* 画像設定 */
  form {
    flex: 0 0 50%;
  }
  .set_bgimage {
    flex: 1;
    background-image: url(../images/contact_form.jpg);
  }

}

/* ------------------------------
確認画面
------------------------------ */
.confirm_area {
  flex: 0 0 100%;
  max-width: 800px;
  margin: 0 auto;
}
form > .text {
  margin-bottom: 10px;
}
.client_info > .info_item {
  display: flex;
  margin-bottom: 10px;
}
.client_info dt,
.message_area span {
  display: block;
  width: 10rem;
  text-align: center;
  background-color: #eee;
  padding: 0 10px;
  margin-right: 1rem;
}
.message_area {
  margin-top: 2rem;
}
.message_area > .message {
  padding: 10px;
  border: solid 1px #888;
  margin: 10px 0 30px;
}
form > .small {
  margin-top: 10px;
}