@charset "utf-8";

/* top
----------------------------------------- */
#logo {
	font-size: 50px;	
    font-family: 'Caveat', cursive;
}

.ttl{
	font-size: 50px;	
	font-family: 'Amatic SC';
}


#contact{
	text-align: center;
}

.content_size{
	font-size: 15px;
	margin:30px;
}

#mainVisual {
	margin-bottom: 30px;
	text-align: center;
	background-color: #ecebeb;
}
#mainVisual .pc {
	display: block;
	margin:auto;
	width:300px;
	height:270px;
	border-radius: 90%;
	background-position: top;
}
#mainVisual .sp {
	display: block;
}

/* profile_section */
#profile_section {
	margin-bottom: 60px;
	padding: 0 30px;
}
#profile_section section {
	margin-bottom: 40px;
}
#profile_section section.last {
	margin-bottom: 0;
}
#profile_section section .icon {
	margin-bottom: 20px;
	text-align: center;
}
#profile_section section .icon img {
	width: 49px;
	height: 51px;
}

/* Skill_section */
#Skill_section {
	margin-bottom: 70px;
	padding: 0 30px;
}
#Skill_section li {
	margin-bottom: 40px;
	text-align:center;
	border: 1px solid #e0e0e0;
}

.Learning_section{
	margin-bottom: 70px;
	padding: 0 30px;
}

.Learning_section li{
	margin-bottom: 40px;
	text-align:center;
	border: 1px solid #e0e0e0;
}


/* Works_section */
#Works_section {
	/* height:100%; */
	margin-bottom: 70px;
	padding: 0 30px;
}

.Works_list{
	display:flex;
	flex-wrap:wrap;
}

#Works_section li:nth-child(1){
	text-align:center;
	vertical-align: middle;
	width:100%;
	height:300px;
	margin-bottom:40px;
}

#Works_section li:nth-child(2){
	text-align:center;
	vertical-align: middle;
	width:100%;
	height:300px;
	margin-bottom:40px;
    border: 1px solid #e0e0e0;
    position:relative;
}

#Works_section li:nth-child(3){
	text-align:center;
	vertical-align: middle;
	width:100%;
	height:300px;
	margin-bottom:40px;
    border: 1px solid #e0e0e0;
    position:relative;
}

#Works_section li:nth-child(4){
	text-align:center;
	vertical-align: middle;
	width:100%;
	height:400px;
	margin-bottom:100px;
    border: 1px solid #e0e0e0;
    position:relative;
}



#Works_section li div{
	position:absolute;
	width:80px;
	height:20px;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	margin:auto;
}




.img{
	width:100%;
	height:100%;
}

.btn-square-slant {
	display: inline-block;
	position: relative;
	padding: 1px 3px;
	text-decoration: none;
	background:#e0e0e0 ;/*ボタン色*/
	color: black;
	border-bottom: solid 5px black;/*ボタン色より暗めに*/
	border-right: solid 5px black;/*ボタン色より暗めに*/
  }
  
  .btn-square-slant:before {  
	content: " ";
	position: absolute;
	bottom: -5px;
	left: -1px;
	width: 0;
	height: 0;
	border-width: 0 6px 6px 0px;
	border-style: solid;
	border-color: transparent;
	border-bottom-color: #FFF;
  }
  
  .btn-square-slant:after {  
	content: " ";
	position: absolute;
	top: -1px;
	right: -5px;
	width: 0;
	height: 0;
	border-width: 0px 6px 6px 0px;
	border-style: solid;
	border-color: #FFF;
	border-bottom-color: transparent;
  }
  
  .btn-square-slant:active {
	/*ボタンを押したとき*/
	border:none;
	-webkit-transform: translate(6px,6px);
	transform: translate(6px,6px);
  }
  
  .btn-square-slant:active:after, .btn-square-slant:active:before {
	content: none;/*ボタンを押すと線が消える*/
  }




/* タブレット向け：760px～960px */
@media only screen and (min-width: 760px) and (max-width: 960px) {

	/* mainVisual */
	#mainVisual {
		margin-bottom: 80px;
		background-color: #ecebeb;
		text-align: center;
	}
	
	#mainVisual img {
		max-width: 960px;
		height: auto;
	}
	
	/* top */
	#mainVisual .pc {
		display: block;
	}
	
	#mainVisual .sp {
		display: none;
	}
	
	/* profile_section */
	#profile_section {
		max-width: 920px;
		margin: 0 5% 80px 5%;
		padding: 0;
	}
	#profile_section section {
		float: left;
		width: 30%;
		height: auto;
		margin-right: 5%;
	}
	#profile_section section.last {
		margin-right: 0;
	}
	#profile_section section .icon {
		margin-bottom: 40px;
		text-align: center;
	}
	#profile_section section .icon img {
		width: 98px;
		height: 102px;
	}
	#profile_section section {
		margin-bottom: 0;
	}
	#profile_section section.last {
		margin-bottom: 0;
	}
	
	/* Skill_section */
	#Skill_section {
		position:relative;
		max-width: 920px;
		height: 310px;
		padding: 0;
		margin: 0 5% 80px 5%;
	}

	.Learning_section{
		position:relative;
		max-width: 920px;
		height: 190px;
		padding: 0;
		margin: 0 5% 80px 5%;
	}

	.worksList{
		position:relative;
		margin:0px;
		height:166px;
	}
	
	#Skill_section li{
		position:absolute;
		width:47%;
	}

	.Learning_section li{
		position:absolute;
		width:47%;
	}
	
	#Skill_section li:nth-child(1){
		left:0px;
		top:0%;
	}
	
	#Skill_section li:nth-child(2){
		right:0px;	
		top:0%;
	}
	
    #Skill_section li:nth-child(3){
		left:0px;
		top:40%;
	}
	
	#Skill_section li:nth-child(4){
		right:0px;
		top:40%;
	}
	
	#Skill_section li:nth-child(5){
		left:0px;
		top:80%;
	}
	
	#Skill_section li:nth-child(6){
		right:0px;
		top:80%;
	}
		
	#Skill_section li:nth-child(7){
		left:0px;
		top:120%;
	}
	
	#Skill_section li:nth-child(8){
		right:0px;
		top:120%;
	}

	.Learning_section li:nth-child(1){
		left:0px;
		top:0%;
	}
	
	.Learning_section li:nth-child(2){
		right:0px;	
		top:0%;
	}
	
	.Learning_section li:nth-child(4){
		left:0px;
		top:70px;
	}
	
	.Learning_section li:nth-child(3){
		right:0px;
		top:70px;		
		margin-bottom:0;
	}
	
/* Works_section */

#Works_section {
	max-width: 920px;
	margin: 0 5% 80px 5%;
	padding: 0;
}


.Works_list{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	height:auto;
	padding:0;
}	

#Works_section li:nth-child(1) {
	position:relative;
	width: 40%;
	height:auto;
	bottom:0;
	margin-bottom:50px;
}

.btn-square-slant{
align-self: flex-start;
margin-right: 70%;
width:100%;
}
	
#Works_section li:nth-child(2) {
	position:relative;
	width: 40%;
	height:auto;
	margin-bottom:50px;
}

#Works_section li:nth-child(3){
	position:relative;
	width: 40%;
	margin-right:0;
	height:auto;
	margin:0;
}

#Works_section li:nth-child(4){
	position:relative;
	width: 40%;
	margin-right:0;
	height:auto;
	margin:0;
}

#Works_section li:nth-child(5){
	position:relative;
	width: 40%;
	margin-right:0;
	height:auto;
	margin-top:50px;
}

.img{
	width:100%;
	height:100%;
}
	.toTop a {
		display: block;
		width: 24px;
		margin: 0 auto 20px auto;
		padding: 8px 20px;
	}
	
	} /* タブレット向け */
	




/* PC向けレイアウトの指定：961px～ */
@media only screen and (min-width: 961px) {

.content_size{
	font-size: 15px;
	margin:30px;
}


/* profile_section */
#profile_section {
	width: 920px;
	margin: 0 auto 130px auto;
	padding: 0;
}
#profile_section section {
	float: left;
	width: 280px;
	height: auto;
	margin-right: 40px;
}
#main h2.ttl {
	margin-bottom: 65px;
	font-size: 50px;
}

/* Skill_section */
#Skill_section {
	width: 920px;
	margin: 0 auto 130px auto;
	padding: 0;
}

#Skill_section li{
	box-sizing: border-box;
	display: inline-block;
	width: 30%;
	margin-right: 5%;
	margin-left: 0%;
	margin-bottom: 60px;
	border: 1px solid #e0e0e0;
	vertical-align: top;
}

.Learning_section{
	width: 920px;
	margin: 0 auto 130px auto;
	padding: 0;
}

.Learning_section li{
	box-sizing: border-box;
	display: inline-block;
	width: 30%;
	margin-right: 5%;
	margin-left: 0%;
	margin-bottom: 60px;
	border: 1px solid #e0e0e0;
	vertical-align: top;
}

.Learning_section li:nth-child(3n){
	margin-right: 0;
}


	.worksList{
		position:relative;
		margin:0px;
		height:166px;
	}

	.br::after{
	  content: "" ;
	  white-space: pre;
	}
	
	#Skill_section li{
		position:absolute;
		width:30%;
	}
	
	
	#Skill_section li:nth-child(1){
		left:0px;
		top:0%;
	}
	
	#Skill_section li:nth-child(2){
		left:323px;	
		top:0%;
	}

    #Skill_section li:nth-child(3){
	    right:0;
	    margin:0;
    }

	#Skill_section li:nth-child(4){
		left:0%;
		top:40%;
	}

	#Skill_section li:nth-child(5){
		left:323px;
		top:40%;
	}
	
	#Skill_section li:nth-child(6){
	    top:40%;
	    right:0;
	    margin:0;
	}

	#Skill_section li:nth-child(7){
		left:0%;
		top:80%;;
	}

	#Skill_section li:nth-child(8){
		right:0%;
		top:80%;
		left:323px;
	}

	.Learning_section li{
		position:absolute;
		width:30%;
	}
	
	
	.Learning_section li:nth-child(1){
		left:0px;
		top:0%;
	}
	
	.Learning_section li:nth-child(2){
		left:323px;	
		top:0%;
	}

	.Learning_section li:nth-child(3){
		left:0%;
		bottom:0;
		margin-bottom:0;
	}
	
	.Learning_section li:nth-child(4){
		right:0%;
		top:0%;
		margin:0;
	}
	



/* Works_section */
#Works_section {
	width: 920px;
	margin: 0 auto 130px auto;
	padding: 0;
	/* height:auto; */
}

.Works_list{
    /* height:auto; */
    padding:0;
    margin-bottom:130px;
}	




#Works_section li:nth-child(1){
	width:920px;
	height:auto;
	margin-bottom:120px;

}

#Works_section li:nth-child(2){
	height:461.67px;
    margin-bottom:120px;
}

#Works_section li:nth-child(3){
	height:461.67px;
	margin-bottom: 120px;
	border:1px solid #e0e0e0;
}

#contact{
	width:100%;
}

.content_size{
	font-size: 15px;
	margin:0;
}

#mainVisual .pc {
	display: block;
	margin:auto;
	width:470px;
	height:400px;
	border-radius: 80%;
	background-position: top;
}

} /* PC向け */