.form-Section {
padding-top: 25px;
}
.form-Section_Heading {
margin: 0;
font-size: 1.6rem;
font-weight: bold;
}
.form-Section_Heading:not(:first-child) {
margin-top: 30px;
}
.form-Section_Heading.-confirm {
margin-top: 10px;
font-weight: normal;
}
.form-Section_Notes {
margin: 0;
color: #d11927;
}
.form-Section_Btn {
margin-top: 20px;
}
.form-Section_Btn input {
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 200px;
height: 55px;
margin: 0 auto;
padding: 5px 10px;
border: 0;
border-radius: 0;
background-color: #161a38;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
text-align: center;
transition: .2s;
}
@media only screen and (min-width: 769px) {
.form-Section {
padding-top: 50px;
}
.form-Section_Heading {
font-size: 1.8rem;
}
.form-Section_Btn input {
max-width: 400px;
height: 80px;
font-size: 1.6rem;
}
}
.form-Form {
margin-top: 35px;
}
.form-Form_List li label {
display: flex;
align-items: center;
position: relative;
width: 100%;
height: 60px;
padding: 5px 30px 5px 45px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
color: #161a38;
cursor: pointer;
transition: .2s;
}
.form-Form_List li span {
font-weight: bold;
}
.form-Form_ListName {
margin-top: 12px;
}
.form-Form_ListName ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.form-Form_ListName ul:not(:first-child) {
margin-top: 12px;
}
.form-Form_ListName li {
flex: 1;
}
.form-Form_ListName li:not(:first-child) {
margin-left: 15px;
}
.form-Form_FormText {
margin-top: 10px;
}
.form-Form_Text {
margin: 0;
font-size: 1.2rem;
}
.form-Form_List {
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.form-Form_List li:not(:first-child) {
margin-top: 5px;
}
.form-Form_InputText {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 35px;
padding-right: 7px;
padding-left: 7px;
border-radius: 5px;
border: 2px solid #161a38;
background-color: #fff;
font-size: 1.5rem;
line-height: 35px;
}
.form-Form_InputTextarea {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 200px;
padding: 5px 7px;
border-radius: 5px;
border: 2px solid #161a38;
background-color: #fff;
font-size: 1.5rem;
}
.form-Form_Input {
position: absolute;
opacity: 0;
}
.form-Form_Input[type="radio"] {
display: none;
}
.form-Form_List li {
position: relative;
}
.form-Form_Input + label {
display: flex;
align-items: center;
width: 100%;
height: 60px;
padding: 5px 30px 5px 45px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
color: #161a38;
font-weight: bold;
cursor: pointer;
transition: .2s;
}
.is-checked .form-Form_InputIcon::before,
.is-checked .form-Form_InputIcon::after,
.is-checked .form-Form_InputIcon > span::before,
.is-checked .form-Form_InputIcon > span::after {
border-top-color: #0d6ccc;
border-bottom-color: #0d6ccc;
background-color: #0d6ccc;
}
.form-Form_InputIcon {
position: absolute;
top: 50%;
left: 16px;
width: 14px;
height: 14px;
transform: translateY(-50%);
cursor: pointer;
}
.form-Form_InputIcon::before,
.form-Form_InputIcon::after,
.form-Form_InputIcon > span::before,
.form-Form_InputIcon > span::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 43.182%;
height: 100%;
margin: auto;
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
transition: border .2s;
}
.form-Form_InputIcon::before {
transform: rotate(22.5deg);
}
.form-Form_InputIcon::after {
transform: rotate(67.5deg);
}
.form-Form_InputIcon > span::before {
transform: rotate(112.5deg);
}
.form-Form_InputIcon > span::after {
transform: rotate(157.5deg);
}
@media only screen and (min-width: 769px) {
.form-Form_List li label {
height: 80px;
padding-left: 60px;
font-size: 1.6rem;
}
.form-Form_ListName {
margin-top: 12px;
}
.form-Form_ListName ul:not(:first-child) {
margin-top: 15px;
}
.form-Form_Text {
margin-top: 5px;
font-size: 1.4rem;
}
.form-Form_List {
margin-top: 15px;
}
.form-Form_List li:not(:first-child) {
margin-top: 10px;
}
.form-Form_InputText {
height: 50px;
line-height: 50px;
}
.form-Form_Input + label {
height: 80px;
padding-left: 60px;
font-size: 1.6rem;
}
.form-Form_InputIcon {
width: 28px;
height: 28px;
}
}
.st-Contents_Btn div.sw-Link {
display: none;
}