@charset "utf-8";

/*フォームCSSリセット*/
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  appearance: none
}

textarea {resize: vertical;}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
  appearance: none
}

select::-ms-expand {
  display: none;
}

/*---テキストパーツCSS---------------*/

.contact-text{}

@media only screen and  (max-width: 834px) {
.contact-text{	margin-top:1rem;}
}

.contact-text a, .cp_ipcheck a{
	color: #084e8f;
    text-decoration: underline;
}


/*---フォームCSS---------------*/

input, select, option{
  background:#f5f5f5;
  border: 1px solid #CCC;
  box-sizing: border-box;
}

.form-table{

}

.form-table dl{
	display: flex;
	width: 100%;
	align-items: center;
	padding: 0.9rem 0;
	border-bottom: 1px dotted #CCC;
}

.form-table dt{
	width: 30%;
	align-items: center;
	display: flex;
}

.form-table dd{
	width: 70%;
	box-sizing: border-box;
}

.form-table span{
	padding: 0.1rem 0.5rem;
	background-color: #71c3d8;
	font-size: 0.7rem;
	color: #FFF;
	font-weight: bold;
	border-radius: 3px;
	margin-right: 0.5rem;
}

.text-form{
	padding: 0.4rem 1rem 0.4rem 0.6rem; 
	border-radius: 3px;
	font-size: 1.1rem;
}

.text-area{
	background:#f5f5f5;
	border: 1px solid #CCC;
	border-radius: 3px;
	height:100px;
}

.text-area:focus,.text-form:focus{
  border: 1px solid #88c0ce;
  background-color: #f3fcff;
}


.txt-w100{width: 100%;}
.txt-w80{width: 80%;}
.txt-w50{width: 50%;}


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

.form-table dl{
	flex-wrap: wrap;
	padding: 1.2rem 0;
}

.form-table dt{
	width: 100%;
	margin-bottom: 0.5rem;
}

.form-table dd{	width: 100%;}


.txt-w100{width: 100%;}
.txt-w80{width: 100%;}
.txt-w50{width: 100%;}
}

/*---チェックポイント---------------*/

.cp_ipcheck {
	text-align: center;
	padding: 0.9rem 0;
}

@keyframes click-wave {
	0% {
		position: relative;
		width: 30px;
		height: 30px;
		opacity: 0.35;
	}
	100% {
		width: 50px;
		height: 50px;
		margin-top: -15px;
		margin-left: -15px;
		opacity: 0;
	}
}
.cp_ipcheck .option-input02 {
	position: relative;
	right: 0;
	bottom: 0;
	left: 0;
	width: 25px;
	height: 25px;
	border-radius: 3px;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	background: #CCC;
	-webkit-appearance: none;
	        appearance: none;
}
.cp_ipcheck .option-input02:hover {
	background: #5888b0;
}
.cp_ipcheck .option-input02:checked {
	background: #237cc7;
}
.cp_ipcheck .option-input02:checked::before {
	font-size: 20px;
	line-height: 25px;
	position: absolute;
	display: inline-block;
	width: 25px;
	height: 25px;
	content: '✔';
	text-align: center;
}
.cp_ipcheck .option-input02:checked::after {
	position: relative;
	display: block;
	content: '';
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;
	background: #237cc7;
}
.cp_ipcheck .option-input02.radio {
	border-radius: 50%;
}
.cp_ipcheck .option-input02.radio::after {
	border-radius: 50%;
}
.cp_ipcheck label {
	line-height: 40px;
	display: block;
}
.cp_ipcheck .option-input02:disabled {
	cursor: not-allowed;
	background: #58b5b8;
}
.cp_ipcheck .option-input02:disabled::before {
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	content: '✖︎';
	text-align: center;
}


/*---ボタンデザイン---------------*/

.form-btn-wrap{
	text-align: center;
    padding: 0.9rem 0;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


form input[type="submit"]{
	padding: 0.8rem 3rem;
	color: #FFF;
	background: #71c3d8;
	border-radius: 5px;
	border: 0;
	font-weight: bold;
	font-size: 1.2rem;
	font-feature-settings: "palt";
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    box-shadow: 0px 4px 0px 0px rgba(213,213,213,0.6);
    transition: all 0.5s ease 0s;
}


form input[type="submit"]:hover{background: #25b2d6;}

.form-btn{
	position: relative;
	display: initial;
}

.form-btn:after{
    content: "";
    border: solid 2px #fff;
    border-width: 2px 2px 0 0;
    position: absolute;
    top: calc(50% - 5.5px);
    right: 20px;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
}


form input[type="reset"]{
	padding: 0.3rem 1rem;
	color: #FFF;
	background: #CCC;
	border-radius: 3px;
	border: 0;
	cursor: pointer;
	margin-left: 1rem;
	transition: all 0.5s ease 0s;
}

form input[type="reset"]:hover{background: #2bbbb6;}

@media only screen and  (max-width: 834px) {
.form-btn{
	position: relative;
	display: initial;
	margin-bottom: 1rem;
}
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {



}