﻿@charset "UTF-8";
/* mainタグ */
.contact_main {
  max-width: 50vw;
  width: 50vw;
  margin: 0 auto;
  font-size: 1.1vw;
  color: #333;
  background-color: #fff;
  padding-top:0.2em;
  font-weight: 400;
  line-height: 1.8;
  text-align:left;
  margin-left:0;
}
/* 見出し */
.contact_h1 {
  font-size: 2.4rem;
  font-weight: 500;
  text-align: center;
}
/* formタグ：フォーム全体 */
.contact_form {
  width:50vw;
}

/* ------------------------------------ */
/* フォーム共通書式 */
/* ------------------------------------ */
/* labelタグ：項目のラベルと入力欄を囲うタグ */
.form_block {
  display: grid;
  grid-template-columns: 14vw 1fr;
  border-top: 1px dotted #606060;
  padding: 1em;
  align-items: center;
  height: 5em;
}
/* 必須アイコン */
.form-required {
  margin-left: 0.3vw;
  color: #fff;
  background-color: #f67a7a;
  padding: 0.2vw 0.4vw;
  font-size: 1vw;
  border-radius: 3px;
}
/* 入力欄 */
.form_field {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em 1em;
}
/* ------------------------------------ */
/* 段落入力 */
/* ------------------------------------ */
.form_block.--textfield {
  align-items: start;
  border-bottom: 1px dotted #606060;
  height: auto;
}
.form_field.--textfield {
  height: 20em;
  resize: none;
}
/* ------------------------------------ */
/* 送信ボタン */
/* ------------------------------------ */
.form-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12em;
  height: 3em;
  font-size: 1.5vw;
  background-color: #6695ED;
  border-radius: 5px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}
/* ------------------------------------ */
/* 個人情報保護 */
/* ------------------------------------ */
.privacy{
  text-align: center;
  font-size: 0.7vw;
  margin-top: 1em;
}

/* ------------------------------------ */
/* 送信後のサンクスページ専用 */
/* ------------------------------------ */
.section-thanks{
  padding: 100px 40px;
}
.thanks_h1{
  font-size: 2.8rem;
  text-align: center;
}
.thanks_a{
  background-color:#6695ED;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.8rem;
  width: 12em;
  height: 3em;
}


/*-----------------------------------------------------------------------------------------*/


/*スマホ対応CSS*/


@media only screen and (max-width: 800px) {

.contact_main {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  font-size: 1.1vw;
}

.contact_form {
  width:100%;
}

.form_field {
  width:90%;
  height:8vw;
  grid-row: 2/ 3;
  grid-column: 1 / 3;
  margin-left:5%;
  margin-right:5%;
  font-size:4vw;

}

.form_label {
  font-size:5vw;
  width:90%;
  grid-row: 1/ 2;
  grid-column: 1/3;
}



/* 必須アイコン */
.form-required {
  margin-left: 0.2em;
  vertical-align:middle;
  color: #fff;
  background-color: #f67a7a;
  padding: 4px 10px;
  font-size: 3vw;
  border-radius: 2vw;
}

/* ------------------------------------ */
/* 送信ボタン */
/* ------------------------------------ */
.form-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53%;
  height: 9vw;
  font-size: 4vw;
  background-color: #6695ED;
  border-radius: 5px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
}

.form_block {
  display: grid;
  grid-template-columns: 14vw 1fr;
  border-top: 1px dotted #606060;
  padding: 2em;
  text-align:center;
  align-items: center;
  height:20vw;
}


/* ------------------------------------ */
/* 個人情報保護 */
/* ------------------------------------ */
.privacy{
  text-align: center;
  font-size:2.5vw;
  margin-top: 0.5em;
  margin-left:2vw;
  margin-right:2vw;
}





}



