body,html{
background-color: #f1ecdd;
}

header{
background: linear-gradient(to right, #1194a4, #7bc05d);
padding: min(80px, 8vw) 10%;
}

h1{
color: #fff;
max-width: 800px;
padding: 0 0;
margin: auto;
font-family: 'mobo-bold', sans-serif;
font-size: 4.5rem;
font-weight: normal;
}

h1 span{
font-family: 'Impact', sans-serif;
}

h1 br{
display: none;
}

body > div{
padding: min(80px, 8vw) 10%;
}

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

h1{
font-size:3rem;
}
h1 br{
display: block;
}
body > div{
padding: 10% 5%;
}

}

form{
max-width: 800px;
margin: auto;
}

form dl{
font-size: 2rem;
}

form p{
font-size: 1.8rem;
}

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

form dl{
font-size: 1.5rem;
}

form p{
font-size: 1.3rem;
}

}


form dt{
display: flex;
align-items: center;
line-height: 1;
font-family: 'mobo-bold', sans-serif;
}

form dt::before{
content:'■';
}

form dt span{
display: inline-block;
background-color: #e9453e;
color: #fff;
border-radius: 5px;
padding: 0.1em 0.5em 0.3em 0.5em;
margin-left: 0.4em;
line-height: 1;
font-family: 'mobo-semibold', sans-serif;
font-size: 1.6rem;
}

form dt br{
display: none;
}

form dd{
padding-left: 1em;
margin:0.5em 0 1.7em 0;
line-height: 1.6;
}

form dd:has(input[type="text"]),
form dd:has(input[type="email"]),
form dd:has(input[type="tel"]),
form dd:has(select),
form dd:has(textarea){
margin:0.9em 0 1.7em 0;
}


form dd:first-of-type{
display: flex;
flex-direction: column;
align-items: flex-start;
}

form label{
padding-right: 0.8em;
}

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

form dt{
line-height: 1.4;
text-align: left;
}

form dt::before{
margin-right: 0.3em;
}

form dt span{
padding: 2px 3px 3px 3px;
font-size: 1.2rem;
}

form dt br{
display: block;
}

form dd{
padding-left: 0;
text-align: left;
}

form label{
padding-right: 0;
}

form .house{
display: flex;
flex-direction: column;
align-items: flex-start;
}


}


table,
input,
textarea,
select{
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック', 'Noto Sans JP', YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
font-size: 1.4rem;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
border:none;
outline:2px solid transparent;
width: 380px;
padding: 0.3em 0.7em;
line-height: 1;
transition: all 0.3s ease-in-out;
vertical-align: top;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus{
outline:2px solid #1194a5;
}

input[type="checkbox"],
input[type="radio"]{
margin-right: 0.8rem;
}


textarea{
width: 100%;
line-height: 1.8;
}

a:link,
a:visited{
color: #2ea7e0;
text-underline-offset:4px;
}


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

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
width: 100%;
}

}

.period{
width: 23em;
}

form .pryvacy{
text-align: right;
}

form .pryvacy span{
display: inline-block;
text-align: left;
}

form .submit{
margin-top: 5rem;
text-align: center;
}

form button{
background-color: #494949;
border:1px solid #666;
color: #fff;
border-radius: 10px;
width: 15.5em;
padding: 0.6em 0 0.7em 0;
line-height: 1;
font-family: 'mobo-bold', sans-serif;
font-size: 2.4rem;
text-align: center;
transition: all 0.3s ease-in-out;
}

form button:not(:disabled){
cursor: pointer;
}

form button:disabled{
background-color: #aaa;
cursor: not-allowed;
}

form button:not(:disabled):hover{
opacity: 0.7;
}

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

form button{
width:100%;
font-size: 1.7rem;
}

}



h2{
position: relative;
margin-bottom: 0.5em;
font-family: 'mobo-bold', sans-serif;
font-size: 3rem;
}

h2::before{
content:"";
display: inline-block;
background: linear-gradient(to bottom, #1194a4, #7bc05d);
width: 10px;
height: 1.5em;
margin-right: 0.4em;
vertical-align: middle;
}

h2 span{
display: inline-block;
background: linear-gradient(to right, #1194a4, #7bc05d);
background-clip: text;
-webkit-text-fill-color: transparent;
}

table{
background-color: #fff;
max-width: 100%;
width: 800px;
margin: auto;
font-size: 1.8rem;
}

td, th{
border-bottom: 1px solid #ddd;
padding: 0.6em 0 0.7em 1.3em;
}

tr:last-child th,
tr:last-child td{
border-bottom: none;
}

td ul{
padding-left: 1.6em;
}

input[type="hidden"] + p{
margin-top: 1em;
}

input[type="hidden"] + p + div + .submit{
margin-top: 1em;
}

table + p{
margin-top: 1em;
}

.back p{
margin-top: 2em;
}

.back .submit{
margin-top: 1em;
}

.back .submit button{
background-color: #696969;
}

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

h2{
font-size: 2rem;
}

table{
font-size: 1.3rem;
}

tr,th,td{
display: block;
width: 100%;
}

th{
border-bottom: none;
padding-bottom: 0;
}

td{
padding-top: 0;
padding-left:2.5em;
}



td{
padding-right: 1em;
}

}


.finish{
max-width: 800px;
margin: auto;
}

.finish p{
font-size: 1.8rem;
}

.finish p + p{
margin-top: 0.7em;
}

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

.finish p{
font-size: 1.3rem;
}

}

.cf-turnstile{
text-align: center;
margin-top: 1rem;
}