@charset "UTF-8";

body {
  position: relative;
  font-size: 15px;
  color: #444444;
  margin: 0 auto;
}

main {max-width:1200px; margin:0 auto;}

.title {
  width: 100%;
  background: #eff5ff;
  padding: 42px 0;
}

h1 {
  font-size: 48px;
  font-weight: bold;
  color: #055bb1;
  margin: 0 auto;
}

p {margin: 0.25em 0;}

img {width:100%; height:auto; margin-top:2em;}

table {
  width:100%;
  margin: 2em auto;
  border-collapse: collapse;
  border-spacing: 0;
  line-height:2.5em;
}

th,td {padding:1em;}

th {
  width: 28%;
  background: #f0f0f0;
  color: #055bb1;
  font-weight: bold;
  text-align: left;
  padding-left: 3em;
  border-bottom: solid 1px #999;
}

td {
  width:72%;
  background: #fff;
  border-bottom: solid 1px #999;
  padding-left: 2em;
}

input,select,textarea {
  background-color: #fff;
  border:solid 1px #bbb;
  border-radius: 4px;
  padding: 6px;
}

.agreement {width:100%; line-height: 1.8;}

select {
  width:10em;
  text-align:center;

  &:invalid {color:#bbb;}
  [disabled] {color:#bbb;}
  option{color:#444;}
}

::placeholder{color:#bbb;}

button {
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  width: 380px;
  padding: 16px;
  margin: 2em;
  cursor: pointer;
}

input[type=checkbox] {transform: scale(1.5);}
input[type=radio] {transform: scale(1.2);}

.required::before {
  position: relative;
  left: .5em;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.5;
  color: #ea3f00;
  background: #fff;
  content: "必須";
  border: 1px solid;
  border-radius: 4px;
}

.center {text-align:center;}

.caution {background:#ffeed6; color:red; font-weight:bold; padding:1em 0; margin: 0 auto;}


.mt1 {margin-top:1em;}

.mt3 {margin-top:3em;}

.ml3 {margin-left:3em;}

.member {
  margin: 3em auto;
  text-align: center;
}

.separate {
  font-size: 24px;
  font-weight: bold;
  background: #e7edf4;
  color: #055bb1;
  padding-left: 45px;
}

.inline_list {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
}

.wrapper {
  display:flex;
  justify-content: space-around;
  align-items: center;
  margin: 1em 0;
}

.place_result {
  background: #f0f0f0;
  margin-top: 12px;
  padding: 6px 24px;
}

.btn_red,
.btn_green{
  font-size: 1.5em;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 2px;
}

.btn_red{background:#2f56ad;}
.btn_green{background:#ccc;}

.confirm {background: #f6f6f6; border: solid 1px #ccc; color:#444;}
.confirm:hover {background: #055bb1; border: solid 1px #fff; color:#fff;}

.purchase {background: #fff; border: solid 1px #ea3f00; color:#ea3f00;}
.purchase:hover {background: #ea3f00;; border: solid 1px #fff; color:#fff;}

.icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  /* baselineより垂直方向にちょっとだけ下げる */
  top: 0.125em;
  cursor:pointer;
}

footer{margin-top:120px; padding:40px; background:#055bb1; color:#fff; text-align:center;}