@charset "UTF-8";
/* CSS Document */




/*トップ画面*/

.top{
	padding: 70px 0;
	width: 100%;
    height: auto;
	background-color: #1a1a1a;
	text-align: center;
	line-height: 550px;
}

.top .my-logo{
	display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    animation: fadeIn 2s ease 0s normal;
}

.top .my-logo-phone{
	display: none;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}


/*Works上画面*/

.works-wrap{
    padding: 70px 0 100px;
    background-color: #1a1a1a;
    text-align: center;
    display: inline-block;
    width: 100%;
}

.works-title{
    padding:0 0 30px; 
}

.works-title h2{
    font-size: 32px;
    color: white;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
}

.works-list{
    padding:0 0 60px;
    width: 800px;
    margin: 0 auto;
}

.works-list .works-btn{
    width: 200px;
    color:white;
    font-size: 20px;
    padding: 5px 10px;
    display: inline-block;
    transition: all 0.2s ease-out;
    cursor: pointer;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
    font-variant-ligatures: none;
}

.works-list .works-btn:first-child:hover{
    color:#dc6000;
    background-color: rgba(220,90,0,0.1);
}

/*.works-list .works-btn:nth-child(2):hover{
    color:#3fa24c;
    background-color: rgba(63,162,76,0.1);
}*/

/*.works-list .works-btn:nth-child(3):hover{
    color:#494d7c;
    background-color: rgba(73,77,124,0.1);
}*/

/*.works-list .works-btn:nth-child(4):hover{
    color:#d70012;
    background-color: rgba(215,0,15,0.1);
}*/

.works-list .works-btn:nth-child(2):hover{
    color:#974A88;
    background-color: rgba(151,74,136,0.1);
}

.works-list .works-btn:last-child:hover{
    color:#974A88;
    background-color: rgba(151,74,136,0.1);
}

/*.works-list .works-btn:last-child:hover{
    color:#e4d300;
    background-color: rgba(228,211,0,0.1);
}*/

.works-image{
    height:420px;
    line-height: 420px;
    position: relative;
}

.slides {
  /*padding: 0;*/
    width:700px;
    height: 430px;
    margin: 0 auto;
    overflow: hidden;
}

.slides ul{
    width: 1400px;
    height: 430px;
    position: relative;
}

.slides ul .slide{
    width: 700px;
    height: 430px;
    position: absolute;
    left: 700px;
    display: inline-block;
    text-align: center;
    transition: left 0.4s ease-out;
    animation: fadeOut 0.5s ease 0s normal;
}

@keyframes fadeOut{
    0%{opacity: 1}
    100%{opacity: 0}
}

.slides ul .active {
    display: block;
    position: absolute;
    left: 0px;
    animation: fadeIn 1.5s ease 0s normal;
}

@keyframes fadeIn{
    0%{opacity: 0}
    100%{opacity: 1}
}

.works-left{
    float: left;
    cursor: pointer;
    position: absolute;
    top:185px;
    left: 0;
}

/*.works-left-phone{
display: none;
}*/

.works-right{
    float: right;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top:185px;
    right: 0;
}

.works-detail{
    color: white;
    display: inline-block;
    cursor: pointer;
    width: 200px;
    margin: 20px auto 0;
    padding: 5px 0;
    border-top-left-radius: 100px 50%;
    border-top-right-radius: 100px 50%;
    border-bottom-left-radius: 100px 50%;
    border-bottom-right-radius: 100px 50%;
    transition: all 0.2s ease-out;
}

.works-detail:hover{
    background-color: rgba(239,239,240,0.3);
}

.works-detail p{
    color: white;
    text-align: center;
    transition: all 0.2s ease-out;
    display: inline-block;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
}

.works-detail:hover p{
    text-decoration-line: underline;
}

.works-wrap .notes{
    height: auto;
    display: inline-block;
    padding-top: 20px;
    width: 100%;
}

.works-wrap .notes p{
    color: white;
    text-align: center;
    font-size: 7px;
    display: inline-block;
}



/*Works下画面*/

.item-wrap{
    padding: 70px 0 70px;
    background-color: #EFEFF0;
    text-align: center;
}

.item-title{
    padding:30px 0 60px; 
}

.item-title h2{
    font-size: 32px;
    color: #4d4d4d;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
}

.items{
    width: 960px;
    margin: 0 auto;
}

.item-left{
    float: left;
    width: 50%;
    display: block;
}

.item-right{
    float: right;
    width: 50%;
    display: block;
}

.item-left .item{
    margin:0 10px 20px 100px;
    width: 370px;
    height: 230px;
    background-color: white;
    display: block;
}

.item-right .item{
    margin:0 100px 20px 10px;
    width: 370px;
    height: 230px;
    background-color: white;
    display: block;
}

.item a{
    margin: 15px 15px 15px;
    display: inline-block;
}

.item-img-wrap{
    overflow: hidden;
    width: 310px;
}

.item img{
    transition: all 0.5s ease-out;
    filter: brightness(0.75)
}

.item img:hover{
    filter: brightness(1);
    transform: scale(1.1);
}

.item p{
    color:#a4a4a4;
    font-size: 12px;
}


/*自己紹介画面*/

.about-wrap{
    background-image: url(../image/about%20background.jpg);
    background-blend-mode: soft-light;
    background-color: rgba(360,360,360,0.6);
    background-size: cover;
    width:100%;
	padding: 0 0 70px;
}

.about-title{
    text-align: center;
    padding: 70px 0 60px;
}

.about-title h2{
    font-size: 32px;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
}

.status-wrap{
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 700px;
}

.about-left{
    padding:0px 0px 0px 30px;
}

.about-left img{
    width: 280px;
    height:280px;
}

.about-right{
    padding: 0 0 0 40px;   
    width:400px;
    margin: 0 auto;
    text-align: left;
    max-width: 100%;
}

.about-right h3{
    font-size: 27px;
    width:120px;
}

.about-right .name p{
    width: 120px;
    font-size: 10px;
    color:white;
    padding:4px 15px;
    background-color: black;
}

.about-right h3{
    font-size: 20px;
    width:120px;
}

dt{
    font-size: 20px;
    display: inline-block;
    width: 120px;
    border-right: 1px solid black;
}

dd{
    font-size: 17px;
    display: inline-block;
}

dd a{
        transition: all 0.2s ease-out;
        text-decoration: none;
        color: black;
    }

dd a:hover{
        color: #a4a4a4;
    }


.border-black p{
    width: 100%;
    height: 18px;
    background-color: black;
}

.status-item{
    font-size: 12px;
}

.status-item p{
    padding-top: 10px;
    line-height: 150%;
}

/*スキル画面*/

.skill-wrap{
    background-image: url(../image/skill-bg.jpg);
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,0.6);
    background-size: cover;
    width:100%;
    padding: 70px 0 40px;
}

.skill-title{
    text-align: center;
    padding: 0px 0 60px;
}

.skill-title h2{
    font-size: 32px;
    color: white;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
}

.skill{
    display: flex;
    align-items: center;
    margin: 0 0 30px;
}

.meter{
    width: 615px;
    height:30px;
    color:white;
    line-height:30px;
    padding: 0 0 0 30px;
}

.ps{
    background-image:linear-gradient(90deg, rgba(0,200,250,1.0) 10%,rgba(0,200,250,0.3) 50%,rgba(0,200,250,0) 90%);
}

.ai{
    background-image:linear-gradient(90deg, rgba(239,111,36,1.0) 10%,rgba(239,111,36,0.3) 50%,rgba(239,111,36,0) 90%);
}

.dw{
    background-image:linear-gradient(90deg, rgba(51,250,2,1.0) 10%,rgba(51,250,2,0.3) 50%,rgba(51,250,2,0) 85%);
}

.id{
    background-image:linear-gradient(90deg, rgba(255,64,140,1.0) 10%,rgba(255,64,140,0.3) 50%,rgba(255,64,140,0) 80%);
}

.ae{
    background-image:linear-gradient(90deg, rgba(200,143,255,1.0) 10%,rgba(200,143,255,0.3) 50%,rgba(200,143,255,0) 70%);
}

.pr{
    background-image:linear-gradient(90deg, rgba(207,96,235,1.0) 10%,rgba(207,96,235,0.3) 50%,rgba(207,96,235,0) 70%);
}


/*お問い合わせ画面*/

.contact-wrap{
    padding: 70px 0 70px;
    background-color: #EFEFF0;
    /*background-color: #00588c;*/
    text-align: center;
}

.contact-title{
    padding:0 0 90px; 
}

.contact-title h2{
    font-size: 32px;
    color: #4d4d4d;
    font-family: 'Philosopher', sans-serif;
    letter-spacing: 0.1em;
}

.form-icon{
    height: 400px;
    display: flex;
}

.contact-left{
    width: 140px;
    height: 94px;
    margin-left: 20px;
    margin-top: 70px;
}

.contact-right{
    width: 140px;
    height: 94px;
    margin-right: 20px;
    margin-top: 70px;
}


.form-wrap{
    width: 400px;
    margin: 0 auto;
}

.contact-right-phone{
    display: none;
}

form input{
    width: 400px;
    height: 30px;
    border: none;
    margin: 0 0 35px;
}

form textarea{
    width: 400px;
    border: none;
    height: 150px;
    margin: 0 0 35px;
}

.btn{
    border-radius:15px;
    width: 120px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px black;
}

.btn:active{
    margin-top: 2px;
    box-shadow: none;
}



.btn-submit{
    background-color:#4d4d4d;
    /*background-color:#ffb600;*/
    color: #EFEFF0;
}