@charset "utf-8";
@import url("confirm.css");
@import url("../mfp.statics/css/loading.css");
@import url("error.css");
@import url("../mfp.statics/css/warning.css");
@import url("phase.css");
/* CSS Document */

/************************************
			desktop
************************************/
@media screen and (min-width: 1024px){

    dl.mailform dt{
        padding:25px 0;
        width: 300px;
        float: left;
    }
    dl.mailform dd{
        width: 700px;
        padding:25px 0 25px 300px;
        border-bottom: 1px solid #b3b3b3;
    }

    .mailform{padding-bottom: 20px;}
    .form_title{padding-bottom: 5px;}

    input.textarea_01{width: 400px; height: 24px;}
    select,
    input.textarea_02{width: 198px;height: 24px;}
    select.time{width: 50px;}
    
    /*any*/
    span.must,span.any{
        font-size: 14px;
        margin-right: 20px;
        padding: 2px 10px 0 10px;
        color: #fff;
        font-weight: bold;
        border-radius: 3px;
    }
    span.tips{
        margin-top: 10px;
        display: block;
    }
    span.notes{
        font-size: 12px;
        line-height: 15px;
    }
    label{
            transition: 0.3s;
        }
    textarea{
        width: 99%;
    }


    h1.tnx_tt{
        padding-bottom: 5px;
        margin-top: 50px;
        font-size: 25px;
        color: #4d4d4d;
        border-bottom: 1px solid #4d4d4d;
    }
    p.caution{
        font-size: 18px;
    }
    p.tnx_tex{
        padding-bottom: 1em;
        line-height: 1.5em;
    }
    
}
/************************************
			smart phone
************************************/
@media screen and (max-width: 1023px){

    dl.mailform dt{
        padding:25px 0 0 0;
    }
    dl.mailform dd{
        padding:10px 0 25px 0;
        border-bottom: 1px solid #b3b3b3;
    }

    .mailform{padding-bottom: 20px;}
    .form_title{padding-bottom: 5px;}
    /*any*/
    
    input.textarea_01{width: 100%;height: 1.8rem;}
    select,
    input.textarea_02{width: 45%;height: 1.8rem;}
    select.time{width: 3rem;}
    
    span.must,span.any{
        font-size: 0.85rem;
        margin-right: 10px;
        padding: 2px 10px 0 10px;
        color: #fff;
        font-weight: bold;
        border-radius: 3px;
    }

    span.tips{
        margin-top: 10px;
        display: block;
    }
    span.notes{
        font-size: 0.85rem;
        line-height: 15px;
    }
    textarea{
        width: 100%;
    }
    span.notes{
        font-size: 0.85rem;
        line-height: 1rem;
    }
    span.sp_br:before{
        content: "\A" ;
        white-space: pre ;
    }

    h1.tnx_tt{
        margin-top: 1rem;
        padding:20px 0;
        font-size: 1.25rem;
        background: #4d4d4d;
        color: #fff;
    }
    p.caution{
        font-size: 1rem;
    }
    p.tnx_tex{
        padding-bottom: 1rem;
        line-height: 1.5rem;
    }
}

/*input design*/
select,input,textarea{
	border: 1px solid #b3b3b3;
	border-radius: 3px;
	background: #fff;
}
select option{
	font-size: 15px;
}
span.date{
	margin: 0 10px;
	font-size: 14px;
}

div.mfp_buttons {
	clear: both;
	padding: 10px 0px;
	text-align: center;
}

button{
	margin-top: 25px;
	padding: 5px 30px;
	background: #4d4d4d;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}

.button {
  display: flex;
  align-items: center;
  column-gap: 4px;
  width: fit-content;
  line-height: 1;
  cursor: pointer;
}

.button:not(:last-of-type) {
  margin-bottom: 16px;
}

.option-input {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #6640d1;
  border-radius: 9999px;
  cursor: pointer;
}

.option-input:checked {
  border: none;
  background-color: #6640d1;
}

.option-input:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 9999px;
  background-color: #ffffff;
}

.checkboxItem {
  display: flex;
  align-items: center;
  column-gap: 4px;
  width: fit-content;
  line-height: 1;
  cursor: pointer;
}

.checkboxItem:not(:last-of-type) {
  margin-bottom: 16px;
}

.checkbox {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #6640d1;
  border-radius: 2px;
  cursor: pointer;
}

.checkbox:checked {
  background-color: #6640d1;
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 12px;
  height: 6px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: rotate(-45deg);
}

p.caption{
	padding: 25px 0 0 0;
	line-height: 1.25em;
}


/*tnx*/
h1.tnx_tt{
	text-align: center;
}
p.caution{
	padding: 25px 0;
	font-weight: bold;
	color: #b80000;
	text-align: center;
}

.return_button{
	margin-top: 20px;
	text-align: center;}
.return_button a{
	padding: 10px 20px;
	background: #3a3a3a;
	color: #EFEFEF;
	border-radius: 5px;
}
span.must{background: #b80000;}
span.any{background: #4d4d4d;}