@charset "UTF-8";

/*****************************************************************

    header

*****************************************************************/
header {
	width: 100%;
}
header h1 {
	width: 100%;
	margin: 4% auto 0;
}


/*****************************************************************

    main

*****************************************************************/
main {
	width: 90%;
	max-width: 1220px;
	margin: 4% auto;
}
.form-wrap {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/* h2 */
h2 {
	margin: 14% 0 5%;
	padding: 5px 10px;
	border: 1px solid #D4ECFF;
	border-radius: 5px;
	box-shadow: 0 0 0 3px #0663a9;
	background: #0663a9;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
  line-height: 1.6;
}
h2:first-child { margin-top: 0; }

/* table */
table { width: 100%; }
tr {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10%;
	text-align: left;
}
tr:first-child { margin-top: 1%; }
th, td { width: 100%; }
th {
	padding: 3px 10px;
	border-radius: 2px;
	background: #D0EFF7;
}
td { padding: 10px 2px; }
span.badge {
  position: relative;
  top: -2px;
  display: inline-block;
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 3px;
  background: #D43650;
  color: #fff;
	font-size: 1.2rem;
  font-weight: normal;
  line-height: 1;
}
span.badge.option { background: #7D7D7D; }
td p { margin-top: 3px; }
.f-small { font-size: 0.9em; }
.f-bold { font-weight: bold; }
.red { color: #CA0F2B; }

/* caution */
div.caution {
  display: block;
  height: 22em;
  margin: 0.8em 0;
  padding: 3.5% 5%;
  overflow: auto;
  border: 1px solid #A4A4A4;
  font-size: 1.5rem;
}
div.caution p { text-indent: -0.7em; }
div.caution p + p { margin-top: 0.8em; }

/* form */
div.item { margin-top: 0.4em; }
div.item:first-child { margin-top: 0; }
input, textarea, select {
  margin: 0;  
  outline: none;
  border: 1px solid #D3D3D3;
	font-size: 1.6rem;
}
input:not([type="radio"]):not([type="checkbox"]), textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input, textarea {
  margin-right: 10px;
	padding: 6px;
  background: #F4F4F4;
}
input[type="text"] { width: 100%; }
textarea { width: 100%; }
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):focus, textarea:focus {
  background-color: #FFF;
  box-shadow: 0 0 1px 2px #B7DDF8;
}
select {
  display: inline-block;
  padding: 0.5em 3.5em 0.5em 1em;
  background-color: #FAFAFA;
  background-image:
    linear-gradient(45deg, transparent 49%, #999 51%),
    linear-gradient(135deg, #999 51%, transparent 49%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

/* btn */
div.btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8% 0 0;
}

input[type="submit"], input[type="button"], button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  border: 0;
  border-radius: 4px;
  color: #fff;
}
button {
	margin-left: 8px;
	padding: 5px 11px;
	background: #4A5688;
	font-size: 0.95em;
}
input[type="submit"], input[type="button"] {
  margin: 0 10px 15px;
  padding: 10px 20px;
  letter-spacing: 0.1em;
}
input[type="submit"] { background: #d4473c; }
input[type="button"] { background: #222; }

@media print, screen and (min-width: 540px) {
  div.wrap-btn { margin-top: 4%; }
  input[type="submit"], input[type="button"] { margin: 0.8em; padding: 15px 25px; }
}

/* after */
p.after-message { margin-bottom: 3%; }
div.caution-after {
  margin: 0.8em 0;
  padding: 3.5% 5%;
  border: 1px solid #A4A4A4;
  font-size: 1.3rem;
}
div.caution-after p { text-indent: -0.7em; }
div.caution-after p + p { margin-top: 0.8em; }


/*****************************************************************

    main responsive

*****************************************************************/
@media screen and (min-width: 480px) {
  h2 { margin: 11% 0 4%; }
  tr, div.btn-wrap { margin-top: 6%; }
}
@media screen and (min-width: 768px) {
  header h1 { width: 100%; max-width: 1220px; }
  h2 { margin: 8% 0 2%; }
  tr, div.btn-wrap { margin-top: 4%; }
  tr { justify-content: space-between; }
  th { width: 36%; padding: 8px 10px; }
  td { width: 62%; padding: 5px 0; }
  th.wide, td.wide { width: 100%; }
  th.wide { margin-bottom: 1%; }
  div.caution, div.caution-after { padding: 1.5% 3%; }
  input[type="submit"], input[type="button"] { margin: 10px; padding: 15px 25px; }
  p.after-message { text-align: center; }
}