@charset "UTF-8";
/* CSS Document ---------------------------------------------------------------------------------------------------------------- */
/* (C)advista */
/* Default Style Reset --------------------------------------------------------------------------------------------------------- */
body,form,fieldset{margin: 0px;padding: 0px;}
fieldset          {border:none;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,dd{margin: 0px;padding: 0px;}
blockquote,li,dt,dd{}
li                {list-style:none;}
input,textarea    {font-size: 1em;}
img{border: 0px none;margin: 0;padding: 0;vertical-align: bottom;}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html              { scroll-behavior: smooth; height:100%;}

/* Tag Castam ----------------------------------------------------------------------------------------------------------------- */

#formbox                                        {display: flex; flex-direction: column; max-width:850px; margin:40px auto;}
fieldset                                        {display: flex; flex-direction: column; max-width:850px; border: none; margin-bottom: 40px;}

.eventinfo                                      {display: flex; flex-direction: column; margin-bottom: 40px;}
.eventinfo h2                                   {font-size: 1.5rem; margin-bottom: 15px;}
.eventinfo p.eventcont                          {margin-bottom: 20px;}
.eventinfo .eventetc                            {display: flex; flex-wrap: wrap; align-items: center; margin-top: 12px;}
.eventinfo .eventetc span                       {font-size: 0.8em; font-weight: bold; color: #fff; text-align: center; padding: 0.3em 0.8em; width: 100px; margin-right: 1em; border-radius: 3px; background-color: #28978d;}

.eventinfo a                                    { text-decoration:underline; color:#28978d;}
.eventinfo a:hover                              { text-decoration:none; opacity:0.75;}
.eventinfo a:active                             { text-decoration:none; opacity:0.75;}

legend                                          {font-size: 1.5rem; margin-bottom: 15px;}
legend .account                                 {margin-bottom: 12px;}
legend small                                    { color: #c00;}

.account span                                   {color:#00c95d;font-size:15px;}
.account span.red,.red                          {color:#C00;font-weight:bold;font-size:0.8em;}

.accountbox, .paybox, .transportbox             {margin-left: 50px;}
.paybox li .bank-type                           {display: flex; justify-content: end; align-items: center;}
.paybox li .bank-type span                      {margin: 0 1em 0 40px;}

#era, #year, #month, #day, #bank-type           {height: 35px;}
.era, .year, .month, .day, .bank-type           {height: 35px;}

li.flex                                         {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 24px;}
li .leftbox                                     {width: 160px;}
li .rightbox                                    {width: 500px; height: 35px;}
li .rightbox.post                               {width: 480px;}

input.pay                                       {height: 35px;}
/*input[class="pay" type="text"]                  {display: block; box-sizing: border-box; width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 5px;}*/

table                                           {border-collapse: collapse; width: 100%;}
th, td                                          {text-align: center; padding: 8px; border: 1px solid #636363;}
th                                              {font-weight: normal; background-color: #f2f2f2;}

table th:nth-child(1)                           {width: calc((100% / 5) * 1);}
table th:nth-child(2)                           {width: calc((100% / 5) * 2);}
table th:nth-child(3)                           {width: calc((100% / 5) * 1);}
table th:nth-child(4)                           {width: calc((100% / 5) * 1);}

table td:nth-child(1)                           {width: calc((100% / 5) * 1);}
table td:nth-child(2)                           {width: calc((100% / 5) * 2);}
table td:nth-child(3)                           {width: calc((100% / 5) * 1);}
table td:nth-child(4)                           {width: calc((100% / 5) * 1);}

table td input.pay.sect                         {width: 44%;}
table td input.pay.fare                         {width: 80%;}

.event-btn input.button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  background: #ccc;
  cursor: pointer;
}

.event-btn           {display: flex; justify-content: center; margin: 20px 0;}

.event-btn input.button        {
    border-radius: 50px;
		background-color: #3ad4c7;
		color: #fff;
    font-weight: bold;
/*		padding: 0.7em 3em;*/
		padding: 15px;
		font-size: 1.3em;
    width: 15em;
      }

      .event-btn input.button:hover {
        background: #14bf9a;
      }
      
      .event-btn input.button:focus {
        outline: none;
        box-shadow: 0 0 0 2px #eeeeee;
      }


.required_text                              { font-size:16px; color:#C00; line-height:1.6rem; margin-bottom:10px;}

/*.child_box                                  { margin-left:20px;}*/



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

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

@media screen and (max-width: 570px) {
#formbox                                        { padding:0 20px;}
#formbox h1                                     { font-size:24px;}

.eventinfo h2                                   {font-size: 1.3rem;}

legend                                          {font-size: 1.3rem;}

fieldset                                        { width:100%;}

.accountbox, .paybox, .transportbox             { margin-left: 20px;}

li .rightbox                                    { max-width: 300px; /*width:100%;*/}
li .rightbox.post                               { max-width: 300px; /*width:100%;*/}

li .leftbox                                     { /*width: 160px;*/ width:100%;}

#year                                           { max-width:100px;}

.transportbox01                                 { overflow-x: auto; white-space: nowrap; max-width:300px; margin-left:20px;}
.transportbox01 table                           { width:800px;}

.event-btn input.button                         { font-size:1.2rem;}

.required_text                                  { font-size:14px;}

}