@charset 'utf-8';

:root {
  --color-white: #fff;
  --color-black: #333;
  --color-gray: #75787b;
  --color-gray-light: #ddd;
  --color-gray-disabled: #e8e8e8;
  --color-selected: #40bfc1;
  --color-link:#ff6f5e;
  --color-dengerous:#ff6f5e;
  --color-third:#ff1493;
  --color-border:#e7ecee;
  --color-border-1: #333;
  --color-border-2: #aaa;
  --color-header:#f2f2f2;
  --color-ok:#27a1b5;
  --color-error:#ee5c5c;
  --color-background:#151b26;
  --color-pink:#E510E5;
}



/*layout
---------------------------------*/
html{
  overflow-x: hidden;
}
body {

  font-family:"Lato-Bold", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",Verdana,sans-serif;
  overflow-x: hidden;
  line-height: 1.33em;
  background-color: #fcfcfc;
  color: #333;
}

a {
  -webkit-transition: color .1s ease;
  transition: color .1s ease;
      text-decoration: none;
    color:var(--color-link);
}
a:hover,
button:hover {
    opacity: .8;
}
a img {
  -webkit-transition: opacity .1s ease;
  transition: opacity .1s ease;
}

a:hover img {
  opacity: .8;
}
.link{
  color:var(--color-link);
  cursor: pointer;
}
.link.stop{
  color:var(--color-dengerous);
}
.text-link{
  color:var(--color-selected);
  cursor: pointer;
  text-align: center;
  width: 100%;
  text-decoration: underline;
    margin: 10px auto;
    font-size: .8em;
}
.text-link:hover{
  opacity: .8;
}
.delete{
  cursor: pointer;
  color:var(--color-dengerous);
}
.sml{
  font-size: .8em;
}
.bold{
  font-weight: bold;
}
h2{
  font-size: .8em;
  padding: 5px;
}


/*************************************************
	全体レスポンシブ
**************************************************/
/*PC*/
@media screen and (min-width: 770px) {
  .is-mob {
    display: none !important;
  }
}
/*スマホ*/
@media screen and (max-width: 770px) {
  .is-pc {
    display: none !important;
  }
}


@media screen and (max-width: 639px) {
  form{
    width: 100%;
  }
}

/*************************************************
	items
**************************************************/
.message{
  color:var(--color-dengerous);
  font-size: .8em;
  margin: 10px auto;
}

.loading{
  font-size: 1.2em;
  color:var(--color-dengerous);
  text-align: center;
  width: 100%;
}

div.button-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.button-create{
  background-color: var(--color-selected);
  width: 200px;
  padding: 8px;
  border-radius: 3px;
  color:#fff;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align:bottom;
  font-size: .8em;
  margin: 10px auto;
}
div.button-create-line{
  color: var(--color-selected);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  float:right;
  margin-left: 10px;
}

div.button-create-left{
  width: 100%;
  color: var(--color-selected);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  float:right;
  margin: 5px 0;
}

div.button-create i,
div.button-create-line i {
  font-size: .8em;
  margin-right:2px;
}

div.button-close{
  font-size: 1.2em;
  color:#aaa;
  cursor: pointer;
}

div.button-create div{
  font-size: .75em;
}

.overlay-wrap{
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
    z-index: 1001;
}
.overlay{
  background-color: #000;
  position: fixed;

  width: 100vw;
  height: 100vh;
  opacity: .77;

}

div.btn-box div.cancell{
  padding: 7px 20px;
  border: 1px solid #aaa;
  border-radius: 3px;
  margin-right: 20px;
  cursor: pointer;
}

div.btn-box div.ok{
  padding: 7px 20px;
  color: #fff;
  background-color: var(--color-link);
  border-radius: 3px;
  margin-right: 20px;
  cursor: pointer;
}
div.btn-box div.cancell:hover,
div.btn-box div.ok:hover{
  opacity: .8;
}
div.row{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
div.row div.row-item{
  margin-bottom: 5px;
}