@charset "utf-8";
/* CSS Document */
/* -表單-------------------------------------------------------------------------------------------------------*/
.styled-input {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px 0px 0px 0px; padding:0; list-style:none;
}
.styled-input li {
    position: relative;
    width: 100%;
    margin: 0px 0px 25px 0px; padding:0; list-style:none;
    font-size: 14px; color: var(--color-c05); background:none;
    display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.styled-input li.half {
    width: calc(50% - 15px);
    display: flex;
    align-items: center;
}
.styled-input input[type="text"],
.styled-input input[type="tel"],
.styled-input input[type="email"],
.styled-input input[type="password"]{
    width:100%; 
    padding: 10px 15px;
    font-size:var(--font-s00);
    color: var(--color-c05);
    background-color: #f5f6f7;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
           border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;        
}
.styled-input input:read-only {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0%,0%,0%,0.2);
  border-radius: 0px;  
  padding: 15px 15px 15px 0px;  
  font-size: 18px;
  color: #666;
}

.styled-input textarea {
    width:100%; 
    padding: 10px 15px;
     font-size:var(--font-s00);
    color: var(--color-c05);
    background-color: #f5f6f7;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
            border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}
.styled-input textarea {
    resize: none;
    height: 150px;
    display: block;
}
.styled-input textarea:read-only {
  background: none;
  border: none;
  border-radius: 0px;  
  padding: 15px 15px 15px 0px;  
  font-size: 18px;
  color: #666;    
  height: auto;         
}
.styled-input select{
    width:100%; 
    padding: 10px 15px;
    background-color: transparent; 
    border-radius: 5px;  
    font-size:var(--font-s00);
    color: var(--color-c05);
    background-color: #f5f6f7;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.styled-input label {
    color: var(--color-c05);
    width: 100%;
    font-size:var(--font-s00); font-weight: 500;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 10px 0px; 
}
.styled-input .code {
  position: absolute;
  top: calc(50% - 10px);
  right: 5px;
  display: flex;
  justify-content:flex-end;
  flex-wrap: nowrap;
}
.styled-input .code img{
    height: 41px; margin: 3px 0 0 0; 
}
.styled-input .code .fas {
  width: 35px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
}
.styled-input .code .fas:hover {
  opacity: 0.8;
}
.styled-input .btn{
    width: 100%; padding: 0 0 0 100px; margin: 0;  
}
@media only screen and (min-width: 0px) and (max-width: 1000px){
.styled-input li.half {
    width: 100%;
}
}

.inputGroup_box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
}
.inputGroup_box04{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; 
}
.inputGroup_box04 .inputGroup_pd {
   margin: 3px 12px 3px 0;
}
.inputGroup_pd {
   display: block;
   margin: 3px 0;
   position: relative;
}
.inputGroup_pd label {
   padding: 0px 0px 0px 24px;
   width: 100%;
   display: block;
   text-align: left;
   cursor: pointer;
   position: relative;
   z-index: 2;
   transition: color 200ms ease-in;
   overflow: hidden;
   font-size: var(--font-s01);
   font-weight: normal;
   color: var(--color-c04);
}
.inputGroup_pd label:after {
   width: 13px;
   height: 14px;
   content: '';
   border-radius: 2px;
   border: 1px solid #d4d4d4;
   background-color: none;
   z-index: 2;
   position: absolute;
   left: 4px;
   top: 10px;
   cursor: pointer;
   transition: all 200ms ease-in;
}
.inputGroup_pd:hover label, .inputGroup_pd input:checked ~ label {
   color: var(--color-c03);
}
 .inputGroup_pd input:checked ~ label:after {
   border: 1px solid var(--color-c03);
   background-color: var(--color-c03);
}
 .inputGroup_pd input:checked ~ label:before {
   content : '';
   width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);

   z-index: 3;
   position: absolute;
   left: 8px;
   top: 12px;
}
 .inputGroup_pd input {
   width: 32px;
   height: 32px;
   order: 1;
   z-index: 2;
   position: absolute;
   left: 30px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   visibility: hidden;
}
.inputGroup_pd input[type="radio"][disabled] + label {
    color: rgba(255, 255, 255, 0.1);
}
.inputGroup_pd input[type="radio"][disabled] + label:after  {
  display: none;
}
@media screen and (max-width: 1024px) {
.inputGroup_pd label:after {
   top: 7px;
}
.inputGroup_pd input:checked ~ label:before {
   top: 9px;
}
}
@media screen and (max-width: 700px) {
.inputGroup_pd label:after {
   top: 5px;
}
.inputGroup_pd input:checked ~ label:before {
   top: 7px;
}
}

.inputGroup_box02, .inputGroup_box03{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
}
.inputGroup_box02 .inputGroup_pd02 {
   margin: 3px 0;
   position: relative;

   width: calc(100% / 3 - 5px);
}
.inputGroup_box03 .inputGroup_pd02 {
   width: calc(100% / 4 - 5px);
}
.inputGroup_pd02 label {
   padding: 3px 5px;
   width: 100%;
   display: block;
   text-align: center;
   cursor: pointer;
   position: relative;
   z-index: 2;
   transition: color 200ms ease-in;
   overflow: hidden;
   font-size: var(--font-s01);
   font-weight: normal;
   color: var(--color-c04);

   border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #fff;
}

.inputGroup_pd02:hover label, .inputGroup_pd02 input:checked ~ label {
   color: var(--color-c03);
}
 .inputGroup_pd02 input:checked ~ label:after {
   border: 1px solid var(--color-c03);
   background-color: var(--color-c03);
}
 .inputGroup_pd02 input {
   width: 32px;
   height: 32px;
   order: 1;
   z-index: 2;
   position: absolute;
   left: 30px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   visibility: hidden;
}
.inputGroup_pd02 input[type="radio"][disabled] + label {
    color: rgba(255, 255, 255, 0.1);
}
.inputGroup_pd02 input[type="radio"][disabled] + label:after  {
  display: none;
}

/* -gender-*/
.gender{
    width: auto; margin:0 0 0px 0px; padding:0 0 0px 0px; list-style:none; 
    display: flex;
  justify-content: flex-start; 
  flex-wrap: wrap; 
}
.gender .g_list {
    margin:10px 20px 0px 0px;
    width:auto;
}
.gender .g_list02 {
    margin:10px 20px 0px 0px;
    width:calc(100% / 2 - 20px);
}
.gender .g_list06 {
    margin:10px 20px 0px 0px;
    width:calc(100% / 6 - 20px);
}
.gender [type="radio"]:checked,
.gender [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.gender [type="radio"]:checked + label,
.gender [type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    line-height: 22px;
    display: flex;
  justify-content: flex-start;
    color: #666;
    font-weight: normal;
    font-size: var(--font-s02);
}
.gender [type="radio"]:checked + label:before,
.gender [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: none;
    border: 1px solid #d4d4d4;
    border-radius: 100%;
    background: #fff;
}
.gender [type="radio"]:disabled + label:before{
    background: var(--color-c03);
    border: 1px solid #fff;
}
.gender [type="radio"]:checked + label:after,
.gender [type="radio"]:not(:checked) + label:after {
    content: "\F272";
    font-family: bootstrap-icons;
    font-size: var(--font-f00);

  width       : 19px; height: 19px; border-radius: 100%;
  color       :  #fff;
  line-height : 19px;
  text-align  : center;
  font-weight : bold;
  position: absolute; margin-top: 2px;
  left: 0px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background: var(--color-c03);
}
.gender [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.gender [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
@media screen and (max-width: 380px) {
.gender .g_list02 {
    margin:10px 0px 0px 0px;
    width:100%;
}
}