/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2017/12/25, 16:42:32
    Author     : hayashiyu
*/
.regist-grid {
/*    display: -ms-grid;*/
/*    -ms-grid-columns: (1fr 20px)[5] 1fr;*/
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
/*    display: grid;*/
    grid-template-columns: repeat(5, 1fr 20px) 1fr;
    margin: 40px auto;
}
.regist-item-name {
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    -ms-grid-column-align: end;
    -ms-grid-row-align: center;
    grid-column: 1 / 5 span;
    justify-self: right;
    align-self: center;
    text-align: right;
}
.regist-item-name.optional::after,
.regist-item-name.mandatory::after {
    content: "必須";
    font-size: 11rem;
    color: #dc6220;
    background-color: #ffeae2;
    margin-left: 10px;
    margin-right: 20px;
    padding: 0 5px;
}
body[data-locale="en"] .regist-item-name.optional::after,
body[data-locale="en"] .regist-item-name.mandatory::after {
    content: "Required";
}
.regist-item-name.optional::after {
    visibility: hidden;
}
.regist-input {
    -ms-grid-column: 7;
    -ms-grid-column-span: 3;
    grid-column: 7 / 3 span;
}
.regist-input > .TextBoxBase {
    width: 400px;
}
.regist-mail1,
.regist-password1,
.regist-name1{
    -ms-grid-row: 1;
    grid-row: 1;
}
.regist-mail2 {
    -ms-grid-row: 2;
    grid-row: 2;
    margin-top: 20px;
}
.regist-submit {
    text-align: center;
}

.caption.regist-caption {
    width: calc((100% - 100px) * (4 / 6) + 60px);
    margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
    .regist-grid {
/*        -ms-grid-columns: (1fr 8px)[5] 1fr;*/
        -ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr;
        grid-template-columns: repeat(5, 1fr 8px) 1fr;
    }
    .regist-item-name {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        grid-column: 1 / 3 span;
    }
    .regist-input {
        -ms-grid-column: 5;
        -ms-grid-column-span: 6;
        grid-column: 5 / 6 span;
    }
    .caption.regist-caption {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .regist-grid {
        display: block;
    }
    .regist-input {
        margin-top: 5px;
    }
}

#button-terms-of-service-submit {
    display: block;
    padding: 13px 20px 12px;
    background-color: #0091be; /*#88ae2a;*/
    font-weight: bold;
    border-radius: 4px;
    color: #fff;
    transition: 1s;
    width: 450px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    margin-top: 25px;
}
#button-terms-of-service-submit.signup-disabled {
    opacity: 0.2;
    cursor: auto;
}
#button-terms-of-service-submit:not(.signup-disabled):hover {
    background-color: #a1d4e6; /*#99c32f;*/
    color: #edf7d5;
    text-decoration: none;
}

.table-terms-of-service{
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:40px;
    width:100%;
    border-collapse: separate;
    border-spacing:0 20px;
}
/* 入力内容確認画面の利用規約タイトルバー*/
.kiyaku_title {
    display: block;
    position: relative;
    padding-top: 15px;
    font-size: 22px;
    line-height: 22px;
    border-bottom: solid 1px #666666;
    color: #666666;
}

.registinfo-title1 {
  display: inline-block;
  width: auto;
  min-width: 170px;
  height: 28px;
  font-size: 17px;
  color: #ffffff;
  text-align: center;
  background-color: #0091be; /*#8dc21f;*/
  margin-top: 40px;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0 8px;
}

.registinfo-title2 {
  display: table-cell;
  width: 145px;
  height: 30px;
  color: #666666;
  background-color: #cccccc;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  margin-top: 12px;
}