@charset "utf-8";
/* CSS Document */

.contactbox label, input[type=text]{
    font-size: 12pt;
    display: block;
    margin-top: 10px;
    margin-right: 0;
    margin-left: 2px;
    margin-bottom: 4px;
}

.contactbox label.required:after {
  margin-left: 1.0em;
  padding: 0px 6px 0px 6px;
  border-radius: 10px;
  font-size: 10pt;
  color: white;
  background-color: crimson;
  content: "必須";
}

.contactbox input.typetext{
  /*基本のスタイル*/
  display: inline-block;
  margin-bottom: 25px;
  width: 70%;
  height:28px;
  font-size:12pt;
  border: solid 2px #ccc;
  border-radius: 5px;
  box-shadow: none;
  /*テキスト入力のエリアを調整*/
  padding: 3px;
  /*フォーカスしたときのトランジション設定 すべてのプロパティが0.5秒で切り替わる*/
  transition: all 0.5s;
}

.contactbox span {
    /*フォーカスしていないときは非表示に*/
    display: none;
    /*input要素にスタイルを合わせます*/
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
}

.contactbox input:focus {
  /*フォーカスした時に影をつける*/
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
  /*フォーカスした時に枠線を太く濃く*/
  border: solid 2px #666;
}

.contactbox input:focus + span {
  /*フォーカスしたらツールチップを表示させる*/
  display: inline;
}

.contactbox textarea.typetext{
  width: 95%;
  font-size:12pt;
  padding: 5px;
}

.contactbox textarea:focus {
  /*フォーカスした時に影をつける*/
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
  /*フォーカスした時に枠線を太く濃く*/
  border: solid 2px #666;
}

.contactbox span.arrowbox {
  /*フォーカスしていないときは非表示に*/
  display: none;
  /*input要素にスタイルを合わせます*/
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.4);
}

.contactbox input[type="submit"] {
	width: 120px;
    font-size: 13px;
    color: #fff;
	display: inline-block;
    padding: 5px 0px;
    text-align: center;
	background-color: #4682b4;
    border: 1px solid #4682b4;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
}

/*--hover--*/
.contactbox input[type="submit"]:hover {
    color: #fff;
    background-color: #add8e6;
    border: 1px solid #4682b4;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
}

.contactbox input[type="reset"] {
	width: 120px;
    font-size: 13px;
    color: #fff;
	display: inline-block;
    padding: 5px 0px;
    text-align: center;
	background-color: #4682b4;
    border: 1px solid #4682b4;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
}

/*--hover--*/
.contactbox input[type="reset"]:hover {
    color: #fff;
    background-color: #add8e6;
    border: 1px solid #4682b4;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 1s;
}

.contactbox span.arrow_box {
    font-size:12pt;
    position: relative;
    background: #c93434;
    border: 3px solid #ab2c2c;
    margin-left: 10px;
    padding: 3px;
    color: #fff;
}
.contactbox span.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.contactbox span.arrow_box:after {
    border-color: rgba(201, 52, 52, 0);
    border-right-color: #c93434;
    border-width: 6px;
    margin-top: -6px;
}
.contactbox span.arrow_box:before {
    border-color: rgba(171, 44, 44, 0);
    border-right-color: #ab2c2c;
    border-width: 10px;
    margin-top: -10px;
}

.contactbox .box0 {
    width: 90%;
    margin: 0 auto;
    color: #000000;/*文字色*/
    text-align: center;		/*文字を中央に*/
    background: #FFF;
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    display: block;
}

.contactbox .box1 {
	width: 90%;
    padding: 20px 20px 20px 20px;
    margin: 20px 20px 20px 20px;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.contactbox .box1 p {
    margin: 0; 
    padding: 0;
}