* {
    box-sizing: border-box;
}
 
button, input[type="submit"] {
    outline: none;
}
 
.clear {
    clear: both;
}
 
hr {
    margin-top: 45px;
    margin-bottom: 45px;
    border: 1px solid rgba(128, 128, 128, 0.673);
}
 
body {
    color: #2b546a;
    background-color: #fafafa;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}
 
h1 {
    font-size: 24px;
    margin: 0;
}
header a{
	text-decoration:none;
}
.c-txt{
  cursor: pointer;
	color:#2b546a;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
 // display: inline-block;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.06em;
}
.c-txt.line {
  padding-bottom: 5px;
  position: relative;
}
.c-txt.line::before {
  background: #d1d1d1;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: center top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.c-txt.line:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}
.content {
    position: relative;
    margin: 10px auto;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    max-width: 1200px;
    padding: 30px;
    border-radius: 5px;
}
.s1{
    width:70%;
}
#link_wrap{
    width:30%;
}
#main{
	display:flex;
	flex-direction:row;
    width:100%;
}
input {
    border: none;
    border-bottom: 1px solid #d1d1d1;
    font-size: 1.2em;
    width: 100%;
    padding: 8px;
}
 
.btn {
    width: 100%;
    background-color: rgba(32, 152, 243, 0.9);
    border: none;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    cursor: pointer;
}
.btnjoin,.btncancel{
    width: 100%;
    border: none;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    cursor: pointer;
}
.btnjoin{
    background-color: rgba(86, 241, 96, 0.9);
    margin-bottom:10px;
}
.btncancel{
    background-color: rgba(88, 212, 243, 0.9); 
}
.btn:hover {
    background-color: rgba(32, 152, 243, 1.0);
}
 
.btn:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}
.btntd{
    padding:15px;
}
.next-btn {
    float: right;
    width: 48%;
}
 
.back-btn {
    width: 48%;
    text-decoration: none;
    text-align: center;
    background-color: rgba(27, 177, 112, 0.8);
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    padding: 15px;
    cursor: pointer;
    display: block;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
}
 
.back-btn:hover {
    background-color: rgba(27, 177, 112, 1.0);
}
 
.back-btn:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}
 
.control {
    margin-bottom: 3em;
}
 
label {
    display: block;
    margin-bottom: .5em;
}
 
.required {
    margin-left: .3em;
    color: #f33;
    font-size: .9em;
    padding: 3px;
    background-color: #fee;
    font-weight: bold;
}

.pass-match {
    color: #d60e0e;
    font-size: 60%;
}

.error {
    color: #d60e0e;
    font-size: 60%;
}
 
.check-info {
    color: #2b546a;
    font-weight: bold;
}
 


@media (max-width: 600px) {
    h1 {
        font-size: 18px;
    }
 
    p {
        font-size: .8em;
    }
 
    .login-btn {
        padding: 4px 3px 4px 8px;;
        top: 28px;
        line-height: 21px;
    }
 
    .login-btn:active {
        top: 30px;
    }
}