html {
  height: 100%;
}

body.body {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  color: #585a61;
  min-height: 100%;
  display: flex; 
  flex-direction: column
}
main {
  margin:  0 0 3em 0;
}
a {
  color: #585a61 !important;
  text-decoration: none !important;
  display: block;
}

a:hover {
  color: #999 !important;
}
ul,ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
p {
  margin: 0;
  padding: 0;
}
h2.square {
  width: calc(100% - 12px);
  font-size: 1.3em;
  letter-spacing: .1em;
  margin: 0.8em auto;
  padding: 0 0 0 1.4em;
  line-height: 1.6;
  border-bottom: 2px solid #fff;
  position: relative;
}
h2.square::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 12px;
    height: 12px;
    background: #fff;
}
.h3_ttl {
  width: calc(100% - 12px);
  margin: 0 auto;
  padding: 0 0 0.5em 0;
  font-size: 1.1rem;
  letter-spacing: .05em;
  border-bottom: 1px dotted #ddd;
}
.ttl{
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: .05em;
  padding: 0.6em 0;
  color: #072040;
}

.font_f {
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: .05em;
  font-size: 1.2em;
}
.db {
  display: block;
}
.contents {
  width: calc(100% - 2em);
  padding: 1em;
  margin: 0 auto 2em auto;
}
.footer {
  margin-top: auto;
  padding: 0.6em 0;
  background-color: #187FC4;
  font-size: 14px;
  letter-spacing: .06em;
  color: #fff;
  position: sticky;
  bottom: 0;
}
.footer i {
  display: block;
  text-align: center;
  font-size: 20px;
}
.footer a {
  display: block;
  color: #fff !important;
}
.text_grey {
  color: #999;
}
.btn,
a.btn,
button.btn {
  position: relative;
  top: 0;
  width: 100%;
  max-width: 480px;
  line-height: 2.4em;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  transition: all .3s;
  text-align: center;
  letter-spacing: .1em;
  color: #0D0D0D;
  border-radius: 0.6rem;
  background-color: #ccc;
}
.btn:hover,
a.btn:hover,
button.btn:hover
li a:hover {
  top:-3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
}
.btn.main,
a.btn.main,
button.btn.main {
  background-color: #F2E74B;
}
.btn_arrow {
  border: none;
  background: none;
  cursor: pointer;
}
.btn_small {
  width: 100%;
  max-width: 280px;
  line-height: 2.4em;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  text-align: center;
  letter-spacing: .05em;
  color: #0D0D0D;
  border: none;
  border-radius: 0.6em;
  background-color: #F2E74B;
}
button.btn.btn_delete {
  margin: 0 0 0 auto;
  line-height: 20px;
  max-width: 90px;
  background-color: #C30D23;
  color: #fff;
  border-radius: 20px;
}
.menu li {
  display: block;
  margin: 1.6em auto;
  padding: 0 0.4em;
  line-height: 2.8em;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: .5rem;
  letter-spacing: .1em;
  font-weight: 700;
}
.menu li a:hover {
  top:-3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  opacity: 0.4;
}

.icon-circle {
  margin: 0 0.3em;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
  color: #fff !important;
}
.icon-circle.yet {
  background-color: #F2A922;
}
.icon-circle.done {
  background-color: #187FC4;
}
.icon-circle.new {
  background-color: #00A95F;
}

/* form */
.form_input {
  padding: 0 1em;
}
.text_red {
  color: #C30D23;
  padding: 0 0 0 0.4em;
  font-size: 0.9em;
  letter-spacing: .05em;
}
.tax_check {
  color: #3c5791;
  font-size: 0.9em;
  padding: 0 0 0.4em 0;
}

/*  lower */
.lower {
  color: #fff;
  margin: 0 0 2em 0;
  padding: 2em 1em;
}
.lower.new_report {
  background-color: #00A95F
}
.lower.yet_report {
  background-color: #F2A922
}
.lower.done_report {
  background-color: #187FC4;
}
.lower.profile {
  background-color: #9350BF;
}
form dl {
  width: calc(100% - 1em);
  margin: 0 auto;
}
form dd, 
.case dd,
.font_w {
  font-weight: 700;
  letter-spacing: .1em;
}
form dt,
.case dt {
  font-weight: 400;
}
.confirm_style {
  padding: 0.8em 0.4em;
  border-bottom: 1px solid #ddd;
}
.list_style {
  padding: 0.4em;
  border-bottom: 1px solid #fff;
}
.list_style:last-child {
  border-bottom: none;
}
.complete_style p {
  margin: 0 0 3em 0;
  font-size: 1.2em;
  font-weight: 500;
}
.calendar-tab {
  font-weight: 700;
}
.calendar-tab i {
  font-size: 1.2em;
  padding: 0 1em;
  vertical-align: text-top;
}
.list {
  border: 1px solid #f1f1f1;
  margin: 0 auto 3em auto;
  padding: 1em 0.6em 0 0.6em;
}
.case {
  background-color: #f1f1f1;
}
.link_adjust {
  width: 100%;
  max-width: 180px;
  line-height: 2em;
  display: block;
  cursor: pointer;
  text-align: center;
  letter-spacing: .05em;
  color: #0D0D0D;
  border-radius: 180px;
  background-color: #F2E74B
}
.link_adjust.l_p {
  background-color: #f1f1f1;
  max-width: 100px;
}

@media screen and (min-width:768px){
  .form_input {
    padding: 0 2em;
  }
}

@media screen and (min-width:992px){
  .form_input {
    padding: 1em 4em;
  }
}