@charset "utf-8";

body{
max-width: 1170px;
margin: 0 15px;
padding: 0 15px;
font-family: "Zen Old Mincho", serif;
}
h1{
padding-bottom: 5px;
border-bottom: 3px solid #333;
font-size: 25px;
margin-bottom:15px;
font-family: "Zen Antique Soft", serif!important;
}
h2.h2-normal{
position: relative;
padding-left: 30px;
margin-bottom: 10px;
font-family: "Zen Antique Soft", serif!important;
}
h2.h2-normal::before{
position: absolute;
content: "";
top: 50%;
transform: translateY(-50%);
background: url(../../images/skills/htmlcss/pencil.svg);
width: 30px;
height: 30px;
background-size: contain;
left: 0;
}
.content-wrapper , .content-wrapper-inner{
padding-left:25px;
margin-bottom: 30px;
}

textarea,input[type="text"],input[type="password"]{
border: #333 1px solid;
box-sizing: border-box;
padding: 5px;
/* width: 100%; */
background: #fff;
}

input[type="submit"]{
border: #333 1px solid;
box-sizing: border-box;
padding: 5px;
/* width: 100%; */
background: #d1d1d1;
}
table{
background: #fff;
}



/* PHP ↓↓↓ */
button[type="submit"],
.resister-btn,
.ichiran-btn,
.kensaku-btn,
.back-btn{
color:#fff;
text-decoration:none;
border-radius:5px;
padding: 10px 45px 10px 10px;
transition:all 0.3s;
position:relative;
box-sizing:border-box;
display:block;
width:75%;
margin: 20px auto 0;
text-align: center;
}

button[type="submit"]::before,
.resister-btn::before,
.ichiran-btn::before,
.kensaku-btn::before,
.back-btn::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
width: 15px;
height: 2px;
background: #fff;
transition: 0.3s;
}
button[type="submit"]::after,
.resister-btn::after,
.ichiran-btn::after,
.kensaku-btn::after,
.back-btn::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
width: 8px;
height: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-135deg);
transition: 0.3s;
}

button[type="submit"]:hover,
.resister-btn:hover,
.ichiran-btn:hover,
.kensaku-btn:hover,
.back-btn:hover{
background:#fff;
}





button[type="submit"]{
background:#333;
border: 1px solid #333;
}
button[type="submit"]:hover{
color:#333;
}
button[type="submit"]:hover::before{
right: 12px;
background: #333;
}
button[type="submit"]:hover::after{
right: 12px;
border-left: 2px solid #333;
border-bottom: 2px solid #333;
}


.ichiran-btn{
background:#27AE60;
border: 1px solid #27AE60;
}
.ichiran-btn:hover{
color:#27AE60;
}
.ichiran-btn:hover::before{
right: 12px;
background: #27AE60;
}
.ichiran-btn:hover::after{
right: 12px;
border-left: 2px solid #27AE60;
border-bottom: 2px solid #27AE60;
}


.kensaku-btn{
background:#2C3E50;
border: 1px solid #2C3E50;
}
.kensaku-btn:hover{
color:#2C3E50;
}
.kensaku-btn:hover::before{
right: 12px;
background: #2C3E50;
}
.kensaku-btn:hover::after{
right: 12px;
border-left: 2px solid #2C3E50;
border-bottom: 2px solid #2C3E50;
}

.back-btn{
background:#ff8e0e;
border: 1px solid #ff8e0e;
}
.back-btn:hover{
color:#ff8e0e;
}
.back-btn:hover::before{
right: 12px;
background: #ff8e0e;
}
.back-btn:hover::after{
right: 12px;
border-left: 2px solid #ff8e0e;
border-bottom: 2px solid #ff8e0e;
}

.resister-btn{
background:#ae2740;
border: 1px solid #ae2740;
}
.resister-btn:hover{
color:#ae2740;
}
.resister-btn:hover::before{
right: 12px;
background: #ae2740;
}
.resister-btn:hover::after{
right: 12px;
border-left: 2px solid #ae2740;
border-bottom: 2px solid #ae2740;
}





.login-wrapper {
    background: #fffbb2;
    padding: 15px;
    margin-bottom: 30px;
}
/* PHP ↑↑↑ */

@media (max-width: 767px){
.content-wrapper , .content-wrapper-inner{
padding-left: 15px;
}

.content-wrapper-inner > img ,.content-wrapper-inner > a > img{
width: 100%;
}
.content-wrapper-inner > table{
width: 100%;
}



/* PHP ↓↓↓ */
.ichiran-btn,.kensaku-btn,.back-btn,.resister-btn{
width:100%;
}

/* PHP ↑↑↑ */

}