@charset "UTF-8";

/*---------------------- MV---------------------- */

.mv-inn {
    width: 88%;
    margin: 0 auto;
	
}
.h1-logo {
    width: 270px;
}
@media only screen and (max-width: 768px) {
    .mv-inn {
        width: 90%;
        margin: 0 auto;
    }
}
.smart-area{
	background-image: url("../img/contact_bg.svg");
	background-size:contain;
	background-position: top right;
	background-repeat: no-repeat;
	padding-bottom: 30px

}
@media only screen and (max-width: 768px) {
	.smart-area{
		background-position: bottom right;
		background-size:30vw;
		padding-bottom: 2vw
	}
	
}

/*----------------------contact---------------------- */
.contact{
    width: 100%;
    padding: 80px 0;

}
@media only screen and (max-width: 768px) {
	.contact{
        width: 100%;
        padding: 6vw 0;
    }
}

.contact-form{
	background: var(--color-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	width:90%;
	max-width: 800px;
	margin: 40px auto 0;
	padding: 40px 60px;
	border-radius:20px;
	font-size:16px
}
.contact-form.end {
	text-align: center
}

.form-wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	font-size:15px;
}
.form-wrap .check-btn-wrap a{
	color:var(--color-main);
}
.form-wrap .ttl{
	font-weight: 600;
	display: flex;
	align-items: center;
	gap:0.8em;
	width:12em
}
.form-wrap .req{
	font-size:0.6em;
	line-height: 1;
	padding: 0.4em 0.5em;
	border-radius: 0.4em;
	background:#B30A0D;
	color:var(--color-white);
}
.form-wrap .input{
	width:calc(100% - 12em);
	margin-bottom: 3em
}
.conf　.form-wrap .input{
	border-bottom: 1px solid var(--color-bg-gray);
	padding: 0 1em
}
.conf .form-wrap .input{
	border-bottom: 1px solid var(--color-bg-gray);
}
.form-wrap .check-btn-wrap{
	text-align: center;
	margin:0 auto 3em;
}
.form-wrap .submit{
	text-align: center;
	width:100%;
}


.toTop{
	margin-top: 3em;
	text-align: center
}
.toTop a{
	color:var(--color-white);
	background: var(--color-main);
	border: 2px solid var(--color-main);
	border-radius: 3em;
	padding: 0.5em 2em;
}

@media (max-width: 768px) {
	.contact-form{
		width:96%;
		max-width: inherit;
		padding: 4vw;
		border-radius:2vw
	}


	.form-wrap{
		margin-top: 4vw;
		font-size:3.2vw
	}
	.form-wrap .ttl,
	.form-wrap .input{
		width:100%
	}
	.form-wrap .ttl{
		margin-bottom: 0.2em
	}
		
}



/*---------- form ----------*/
input[type='text'],
input[type='email'],
input[type='checkbox'],
input[type='radio'],
input[type='submit'],
input[type='button'],
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

input[type='text'],
input[type='email']{
	margin:0 auto;
	width:100%;
    border: 1px solid var(--color-bg-gray);
	padding: 0.1em 0.4em;
}
textarea{
	margin:0 auto;
	width:100%;
    border: 1px solid var(--color-bg-gray);
	padding: 0.1em 0.4em;
	line-height: 1.4;
	resize: none;
	box-sizing: border-box;
}

input[type='submit']{
	color:var(--color-white);
	background: var(--color-main);
	border: 2px solid var(--color-main);
	border-radius: 3em;
	padding: 0.5em 2em
}
input[type='text'],
input[type='email']{
	padding: 0.4em 1em;
	border-radius: 0
}
textarea{
	padding: 0.4em 1em;
	border-radius: 0.2em;
	box-sizing: border-box;
}


/* ---チェックボックス--- */
.check-btn-wrap {
  margin-top: 1em;
}
.check-agreement {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.check-agreement input[type="checkbox"] {
  /* common.css の input[type='checkbox']{display:none} を上書きする。
     display:none のままだと jQuery が :hidden 扱いにし、
     validationEngine が required チェックをスキップしてしまうため。 */
  display: inline-block;
  position: absolute;
  opacity: 0;
  width: 1em;
  height: 1em;
  margin: 0;
}
.checkmark {
  width: 1em;
  height: 1em;
  border: 1px solid var(--color-txt-gray);
  border-radius: 0.1em;
  margin-right: 0.5em;
  position: relative;
  box-sizing: border-box;
}
.check-agreement input:checked + .checkmark {
  /*background-color: var(--color-bg-gray);*/
}
.check-agreement input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0;
  width: 0.3em;
  height: 0.6em;
  border: solid #B30A0D;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


@media (hover: hover) and (pointer: fine) {
	input[type='submit']:hover{
	color:var(--color-main);
		background: var(--color-white);
}
}




/*---------- 確認画面：修正するボタン ----------*/
.form-wrap .submit input[type='button'].submit-back{
	color:var(--color-main);
	background: var(--color-white);
	border: 2px solid var(--color-main);
	border-radius: 3em;
	padding: 0.5em 2em;
	margin-right: 1em;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.form-wrap .submit input[type='button'].submit-back:hover{
		color:var(--color-white);
		background: var(--color-main);
	}
}