@charset "UTF-8";
/* CSS Document */
body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif, "NotoSansJPLight" ;
  word-wrap: break-word;
  line-height: 1.6;
  color: #323232;
}
img {
  max-width: 100%;
}

body > .wrap {
  display: flex;
  min-height: 100vh;
  height: 100%;
  flex-flow: column;
  justify-content: space-between;
  position: relative;
}
.text-caution {
  color: #ff6666 !important;
}
.text-green {
	color: #56d2c2;
}
.text-blue {
	color: #40b3ff;
}
.text-orange {
	color: #ffb555;
}
.text-pink {
	color: #fe6d6d;
}
.btn {
  border-radius: 2px;
  font-weight: 600;
  line-height: 2;
  font-size: 1.2em;
}
.btn-green {
  background: #00c9c8;
  color: var(--white);
  box-shadow: 0 3px 0 #40b6a7;
}
.btn-green:hover {
  background: #40b6a7;
  color: var(--white);
  box-shadow: 0 3px 0 #40b6a7;
}
.btn-blue {
  background: #40b3ff;
  color: var(--white);
  box-shadow: 0 3px 0 #37a2e9;
}
.btn-blue:hover {
  background: #37a2e9;
  color: var(--white);
  box-shadow: 0 3px 0 #37a2e9;
}
.btn-orange {
  background: #ffb555;
  color: var(--white);
  box-shadow: 0 3px 0 #eba242;
}
.btn-orange:hover {
  background: #eba242;
  color: var(--white);
  box-shadow: 0 3px 0 #eba242;
}
.btn-pink {
  background: #fe6d6d;
  color: var(--white);
  box-shadow: 0 3px 0 #f45959;
}
.btn-pink:hover {
  background: #f45959;
  color: var(--white);
  box-shadow: 0 3px 0 #f45959;
}

.btn-caution {
  background: #fe6d6d;
  color: #FFF;
}
.btn-regist {
  background: #40b3ff;
  color: #FFF;
}
.btn-subregist {
  background: #ff9966;
  color: #FFF;
}
.btn-tgl {
  text-align: left;
  height: 100px;
  background: #FFF;
  transition: .2s;
  border-radius: 4px;
  padding: 0 1em;
  font-size: 1.4em;
  display: flex;
  align-items: center;
  color: #808080;
  border: solid 1px #808080;
  box-shadow: 0px 0px 5px 5px #eeeded;
}
.btn-tgl:before {
	content: "\f0dd";
	font-family: 'NotoSansJPLight', FontAwesome;
  font-size: 0.8em;
  transform: rotate(-90deg);
  margin: 0 15px 0 0;
  padding: 0 0 20px 0;
}
.btn-tgl:focus {
  outline: none;
}
.btn-tgl.btn_on, .btn-tgl:hover {
  background-color: #808080;
  color: #FFF;
}
.btn-tgl-green {
  color: #56d2c2;
  border: solid 1px #56d2c2;
}
.btn-tgl-green:hover {
  background: #56d2c2;
}
.btn-tgl-blue {
  color: #40b3ff;
  border: solid 1px #40b3ff;
}
.btn-tgl-blue:hover {
  background: #40b3ff;
}
.btn-tgl-orange {
  color: #ffb555;
  border: solid 1px #ffb555;
}
.btn-tgl-orange:hover {
  background: #ffb555;
}
.btn-tgl-pink {
  color: #fe6d6d;
  border: solid 1px #fe6d6d;
}
.btn-tgl-pink:hover {
  background: #fe6d6d;
}
.btn-sm-txt {
  border: none;
  background: none;
  font-size: 0.8em;
  text-decoration: underline;
  color: #333366;
  font-weight: 300;
}
.btn-caution:hover, .btn-regist:hover, .btn-subregist:hover {
  color: #FFF;
}
select::-ms-expand {
  display: none;
}
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url(/custom_assets/images/common/icon_arrow_blue.svg);
  background-repeat: no-repeat;
  background-size: 12px 10px;
  background-position: right 10px center;
}
form {
  width: 100%;
}
.form-control::placeholder {
  font-size: 80%;
  color: #cccccc;
}
h4 {
  font-size: calc(100vw / 32 * 1.7);
  margin-bottom: 1em;
}
small {
  line-height: 1.2;
}
.form-control {
  border-radius: 1px;
  padding: 0.5rem 0.75rem;
}

.square-arrow-left {
  display: inline-block;
  vertical-align: middle;
  color: #00c9c8;
  /* color: #b3b2b2; */
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  background: currentColor;
  border-radius: 10%;
  box-sizing: content-box;
  margin-right: 45px;
}
.square-arrow-left::before{
  content: '';
  color: #fff;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.3em 0.4em;
  border-right-color: currentColor;
  border-left: 0;
  transform: translateX(-15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.square-arrow-right {
  display: inline-block;
  vertical-align: middle;
  color: #00c9c8;
  /* color: #b3b2b2; */
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  background: currentColor;
  border-radius: 10%;
  box-sizing: content-box;
  margin-left: 45px;
}
.square-arrow-right::before{
  content: '';
  color: #fff;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.3em 0.4em;
  border-left-color: currentColor;
  border-right: 0;
  transform: translateX(15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.unabled {
  pointer-events: none;
  color: #b3b2b2;
}

@media (min-width: 576px) {

  h4 {
    font-size: calc((100vw / 57.6) * 1.8);
  }
  .btn {
    border-radius: 4px;
    font-size: 1.4em;
  }
}
@media (min-width: 1025px) {
  body {
/*    height:calc(100vh - 100px);*/
  }
  .btn{
    font-size: 1.0em;
  }
  h4 {
    font-size: 1.5rem;
  }

  .container {
    max-width: 1000px;
  }
  .btn-tgl {
    font-size: 1.4em;
    line-height: 50px;
  }
  .form-control {
    border-radius: 2px;
    padding: 0.375rem 0.75rem;
  }
}

/**header**/
header {
  width: 100%;
}
body:not(.p-login) header {
  height: 50px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.1);
}
body:not(.p-login) header > .wrap {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
body:not(.p-login) header > .wrap .brand {
  width: 56%;
  max-width: 200px;
  text-align: center;
}
body:not(.p-login) header > .wrap .brand img {
  max-width: 100%;
  max-height: 45px;
}
body:not(.p-login) header > .wrap .menu-function {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
}
body:not(.p-login) header > .wrap .function-logout {
  right: 50px;
}
body:not(.p-login) header > .wrap .menu-function > input {
  width: 100%;
}
body:not(.p-login) header > .wrap .menu-function laber {
  display: none;
}
@media (min-width: 576px) {
  body:not(.p-login) header {
    height: 88px;
  }
  body:not(.p-login) header > .wrap .brand {
    width: 40%;
    max-width: 320px;
  }
  body:not(.p-login) header > .wrap .menu-function {
    right: 20px;
    width: 60px;
    height: auto;
  }
  body:not(.p-login) header > .wrap .function-logout {
    right: 90px;
  }
  body:not(.p-login) header > .wrap .menu-function laber {
    display: block;
    font-size: 10px;
    text-align: center;
    color: #00c9c8;
    font-weight: 600;
  }
  body:not(.p-login) header > .wrap .function-logout laber {
    width: 50px;
  }
}

@media (max-width: 1024px) {
  .hamburger {
    position: absolute;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 300;
    left:25px;
  }
  .hamburger__line {
    position: absolute;
    border-radius: 5px;
    left: 0;
    width: 30px;
    height: 5px;
    background-color: #00c9c8;
    transition: all .6s;
  }

  .nav-open .hamburger__line {
    background-color: #00c9c8;
  }

  .hamburger__line--1 {
    top: 3px;
  }

  .hamburger__line--2 {
    top: 13px;
  }

  .hamburger__line--3 {
    top: 23px;
  }
  /* 表示された時用のCSS */
  .nav-open .global-nav {
    right: 0;
  }

  .nav-open .bg-black {
    opacity: .8;
    visibility: visible;
    width:100%;
    height:100vh;
    position:absolute;
    background:#000;
    z-index: 10;
  }

  .nav-open .hamburger__line--1 {
    transform: rotate(45deg);
    top: 15px;
  }

  .nav-open .hamburger__line--2 {
    width: 0;
    left: 50%;
  }

  .nav-open .hamburger__line--3 {
    transform: rotate(-45deg);
    top: 15px;
  }
}
@media (min-width: 1025px) {
  header, body:not(.p-login) header {
    width: 100%;
    height: 100px;
    background: var(--white);
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.15));
  }
  header .wrap, body:not(.p-login) header .wrap{
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    align-items: center;
    justify-content: flex-start;
  }
  header .brand, body:not(.p-login) header .wrap .brand{
    width: 372px;
  }
  header .brand img {
    max-width: 100%;
    max-height: 95px;
  }

}

/* Important Managment style */
.important-input-box .display_months label{
  margin-right: 15px;
}

.important-input-box .display_months label input{
  margin-right: 5px;
}

/**main**/
main {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  flex-grow: 2;
}
body:not(.p-login) main {
  padding: 2.5em 0;
}
main section {
  padding-bottom: 2em;
}
main section:last-child {
  padding-bottom: 0;
}
main section > p {
  font-size: 80%;
}
@media (min-width: 576px) {
  body:not(.p-login) main {
    padding: 4em 0;
  }
}

/**footer**/

footer {
  background: #00c9c8;
  padding: 0.5em 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
footer p.copy {
  color: var(--white);
  font-size: 10px;
  margin: 0;
}