/* base width 1280px  */


/* basic -------------------------------------------------- */
.red {
    color: #CA2600;
}
.blue {
    color: #0205d6;
}


/* .field -------------------------------------------------- */
.bb {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}
.pp {
    margin-top: 60px;
}
::placeholder{
    font-size: 1rem;
}
/* .field {
    border-top: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
} */
.field > fieldset {
    display: grid;
    grid-template-columns: min(21.875vw, 280px) 1fr;
}
.field > fieldset > div {
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #bbb;
}
@media screen and (max-width: 768px) {
    .field {
        /* border: 1px solid #cccccc;*/
        box-sizing: border-box;
        /* padding: 5%;*/
    }
    .field > fieldset {
        /*  border-bottom: 1px dashed #cccccc;*/
        grid-template-columns: 1fr;
    }
    .field > fieldset > div {
        border: none;
    }
    .pp {
        margin-top: 40px;
    }
}


/* .col -------------------------------------------------- */
.col {
    box-sizing: border-box;
    padding: 10px 0;
}
@media screen and (max-width: 768px) {
    .col {
        background: unset;
        padding: 20px 0 10px;
    }
}


/* .val -------------------------------------------------- */
.val {
    box-sizing: border-box;
    padding: 0px 10px 20px 0;
}
.val p {
    color: #333;
    font-size: 14px;
    margin: 15px 0;
}
.val a {
    color: #2200c1;
    display: block;
    font-size: 14px;
    font-weight: 900;
    margin: 5px 0;
    text-decoration: underline;
}
.val > h2 {
    color: #333;
    display: block;
    font-size: 16px;
    padding-top: 20px;
}
@media screen and (max-width: 768px) {
    .val {
        padding: 0 0 20px;
    }
    .val > p {
        font-size: 14px;
        margin: 10px 0 0;
    }
}


/* .foreword -------------------------------------------------- */
.foreword {
    box-sizing: border-box;
    padding: 20px 10px 40px 0;
}
.foreword p {
    color: #333;
    font-size: 16px;
    margin: 15px 0;
}
.foreword dl {
	margin: 20px 0;
	color: #333;
    font-size: 16px;
}
.foreword dl dt {
	font-weight: 900;
    line-height: 175%;
}
.foreword dl dd {
    line-height: 175%;
}
@media screen and (max-width: 768px) {
    .foreword {
        padding: 10px 0 40px 0;
    }
    .foreword p {
        font-size: 14px;
        margin: 10px 0 0;
    }
    .foreword dl {
        font-size: 14px;
    }
}




/* input, select, textarea -------------------------------------------------- */

input[type="radio"],input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
input[type="radio"] {
        margin-top: -5px;
}
input[type="text"],
select,
textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 18px;
    padding: 5px;
    max-width: 100%;
}
input[type="text"],
select {
    height: 40px;
    background: #fff;
    color: #333;
}
select {
    width: 250px;
}
textarea {
    width: min(100%, 500px);
    height: 200px;
}

#tel select {
      width: 100px;
        margin-right: 5px;
    }
#tel select[name="Time1"],#tel select[name="Time2"],#tel select[name="Time3"] {
        width: 250px!important;
    }    


@media screen and (max-width: 768px) {
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-top: -20px;
    }
    input[type="text"],
    select,
    textarea {
        font-size: 16px;
		width: 100%;
    }

#tel select {
        font-size: 16px;
        width: 42%;
        margin-bottom: 10px;
        margin-right: 5px;
    }
#tel select[name="Time1"],#tel select[name="Time2"],#tel select[name="Time3"] {
        font-size: 16px;
        width: 100%;
    }
}


/* #Service -------------------------------------------------- */

#Service{ 
margin: 0 0 40px 0;
}
#Service div.val h2{
	margin: 0 0 20px 0;
}
label.radio{
	display: block;
	font-weight: 300;
	margin-bottom: 10px;
}
label.radio span{
    color: #333;
}

@media screen and (max-width: 768px) {
label.radio span{
    font-size: 15px;
}
}


/* #check -------------------------------------------------- */
.form-inner > h2 {
    border-bottom: solid 3px #ccc;
    position: relative;
    font-size: 24px;
    color: #333;
    margin: 0;
    padding: 5px 5px 5px 0;
}
.form-inner > h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px var(--green_color);
  bottom: -3px;
  width: 20%;
}
#check {
    padding-bottom: 50px;
}

.form-inner > div > div > .val > .check > label {
    align-items: center;
    display: flex;
    grid-gap: min(0.78vw, 10px);
	margin-left: -5px;
}
.form-inner > div > div > .val > .check dl{
    font-weight: 300;
	font-size: 16px;
}
.form-inner > div > div > .val > .check dl dt {
	color: #333;
}
.form-inner > div > div > .val > .check dl dd {
	color: #333;
}



@media screen and (max-width: 768px) {
    .form-inner > h2 {
        font-size: 20px;
    }
    .form-inner > h2 > .pc {
        display: none!important;
    }
    #check {
        padding-bottom: 30px;
    }
    .form-inner > div > div > .val > .check {
        margin: 20px 0 0 0;
    }
    /* #schedule > .val > .check:last-of-type {
        margin: 0;
    } */
    .form-inner > div > div > .val > .check > label {
        font-size: clamp(13px, 2.08vw, 16px);
        grid-gap: 5px;
    }
	.form-inner > div > div > .val > .check > label > input[type="checkbox"] {
        width: 18px!important;
        height: 18px!important;
        margin-top: 0px;
    }
    .form-inner > div > div > .val > .check dl {
		width: 80%;
        font-weight: 300;
        font-size: 15px;
    }  
}


/* .name -------------------------------------------------- */
.name > .val {
    align-items: center;
}
.name > .val > input[type="text"]{
    width: 400px;
}
.name > .val > span {
    font-size: 14px;
    margin: 0 0 0 min(0.78vw, 10px);
}
@media screen and (max-width: 768px) {
    .name > .val > div > input[type="text"] {
        background: #fdebeb;
        width: 100%;
    }
    .name > .val > div > span {
        grid-column: 1/3;
        font-size: 12px;
        margin: 0;
    }
}


/* #mail -------------------------------------------------- */
#mail > .val > input[type="text"] {
    width: min(100%, 400px);
}


/* #Address -------------------------------------- */

#Address{
	
}
.address{
	width: 100%;
	margin: 0 0 10px 0;
}

/* .submit_area -------------------------------------------------- */

.submit_area {
	width: 420px;
    margin: 10px auto 0;
    padding: 10px 0;
    text-align: center;
}
.submit_area > button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    max-width: 100%;
}
@media screen and (max-width: 768px) {
    .submit_area {
	width: 100%;
        background: transparent;
        margin: 20px 0 0;
        padding: 0;
        text-align: center;
    }
    .submit_area > button {
        width: min(74.47vw, 572px);
    }
}



/* ADD20220913
.check -------------------------------------------------- */

.check {
    padding-bottom: 20px;
}
.check h3 {
    border-left: 5px solid #c5c5c5;
    padding-left: 10px;
    margin: 10px 0 15px 0;
}
.check dl {
    padding: 7px 0;
}
@media screen and (max-width: 768px) {
    .check dl dl dd {
        font-size: 16px;
    }
}

/* .error -------------------------------------------------- */
.val > .error,
.val > .flex > .error,
.val > label > .error{
    background: #fdebeb!important;
    /* background: #ffe3e3!important; */
}
.val  > .valid,
.val > .flex  >.valid {
	background: #ccffff!important;
	/* background: #d1ffdd!important; */
}
.errorText > label.error {
	color: #b92000;
	display: block;
	font-size: 14px;
	font-weight: bold;
}
.errorText > label.error > br{
	display: none;
}
@media screen and (max-width: 768px) {
	.errorText > label.error > br{
		display: block;
	}
}


/* #area -------------------------------------------------- */
@media screen and (min-width: 769px) {
    #area {
        margin: 0 0 25px;
    }
}
@media screen and (max-width: 768px) {
    #area {
        margin: 20px 0 25px;
    }
}


/* #Chosa -------------------------------------------------- */

#chosa{ 
margin: 0 0 40px 0;
}
#chosa div.val h2{
	margin: 0 0 20px 0;
}
#chosa div.val label.radio{
	display: block;
	font-weight: 300;
	margin-bottom: 10px;
}

.chosa06_sonota{ 
	width: 100%;
}
.chosa06_sonota input[type="text"]{
	width: 100%;
}


/* #benri -------------------------------------------------- */

#benri{ 
    margin: 0 0 40px 0;
    }
    #benri div.val h2{
        margin: 0 0 20px 0;
    }
    #benri div.val label.radio{
        display: block;
        font-weight: 300;
        margin-bottom: 10px;
    }
    
    .cbenri_sonota{ 
        width: 100%;
    }
    .benri_sonota input[type="text"]{
        width: 100%;
    }

   /* #resukyu -------------------------------------------------- */

#resukyu{ 
    margin: 0 0 40px 0;
    }
    #resukyu div.val h2{
        margin: 0 0 20px 0;
    }
    #resukyu div.val label.radio{
        display: block;
        font-weight: 300;
        margin-bottom: 10px;
    }
    
    .resukyu_sonota{ 
        width: 100%;
    }
    #resukyu input[type="text"]{
        width: 100%;
    } 

    #resukyu #resukyu02 input[type="text"]{
        width: 50%;
    } 

    @media screen and (max-width: 768px) {
        #resukyu #resukyu02 input[type="text"]{
            width: 90%;
        } 
    }

 /* #tel -------------------------------------------------- */

 #tel{ 
    margin: 0 0 40px 0;
    }
    #tel div.val h2{
        margin: 0 0 20px 0;
		padding-top: 5px;
    }
    #tel div.val .check{
        display: block;
        font-weight: 300;
        margin-bottom: 10px;
    }
    #tel div.val .check ul{
		list-style: none;
    }

    #tel div.val .check ul li{
		margin: 20px 0;
    }
    #tel div.val .check ul li span{
		margin: 0 0 10px;
    }


 /* #sonota -------------------------------------------------- */

 #sonota{ 
    margin: 0 0 40px 0;
    }
    #sonota div.val h2{
        margin: 0 0 20px 0;
    }
    #sonota div.val label.radio{
        display: block;
        font-weight: 300;
        margin-bottom: 10px;
    }