@charset "utf-8";

/*--------------------------
	共通の設定/=iPhone 320px(縦)からの設定 /
-------------------------- */
body{
	/*background-color: aqua;*/
	font-family: fot-chiaro-std, sans-serif;
	font-weight: 700;
	font-style: normal;
	
}

.inner{
	background-color: #ffffff;
}

.title{
	margin-bottom: 260px;
}
.title_h2{
	color:#666666;
	/*font-family: fot-chiaro-std, sans-serif;
	font-weight: 700;
	font-style: normal;*/
	font-size:24px;
	letter-spacing:0.1em;
	text-align: center;
	padding: 200px 0 300px;
}

.h2_title_red{
	/*color: #8f0c2c;*/
	color: #d4145a;
	letter-spacing:0.16em;
}

.title_h3{
	color:#999999;
	/*font-family: fot-chiaro-std, sans-serif;
	font-weight: 700;
	font-style: normal;*/
	font-size:18px;
	text-align: center;
	letter-spacing:0.04em;
}

.title_h3 a:link{
	color: #999999;
}
.title_h3 a:visited{
	color: #999999;
}



.profile{
	background-color:#F6F6F6;
	padding-bottom: 40px;
	margin-bottom: 40px;	
}

.profile_h2,.works_h2{
	color: #666666;
	text-align: center;
	font-size: 1.8em;
	letter-spacing:0.04em;
	padding: 80px;
	margin-bottom: 20px;
}

.profile_box{
	align-items: center;
}

.profile_img{
	width: 40%;
	margin : 0 auto;
}

.profile_text{
	color: #4d4d4d;
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 2em;
}

.profile_p{
	padding: 40px;
}

dl {
display: flex;
flex-wrap: wrap;
}

dt {
	width: 20%;
padding: 10px;
}

dd {
	width: 80%;
padding: 10px;
}

.about_me{
	color: #4d4d4d;
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 2em;
	text-align: center;
	margin-bottom: 30px
}

.about_me_p{
	color: #4d4d4d;
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 2em;
	padding: 0 50px;
}

.works_box{
	display: flex;
	justify-content: space-around;
	padding:0 20px;
	margin-bottom: 80px;
}

.works_img{
	width: 36%;
}

.responsive {
width: 100%;
aspect-ratio: 16/9;
}



.works_text{
	width:64%;
	line-height: 8em;
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	text-align: center;
}

.works_a{
	text-decoration: none;
}

.works_a:link{
	color: #4d4d4d;
}
.works_a:visited{
	color: #4d4d4d;
}

.skill_container{
   /* display: flex;*/
    /*align-items: center;*/
    /*flex-direction: column;*/
	padding:0 40px;
  }

.skill_ul{

}

.skill_li{
	display: flex;
	justify-content:flex-start;
	align-items:center;
	color: #4d4d4d;
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6em;
	margin-bottom: 40px;
}

.skill_li img{
	width:10.04%;
	margin-right:40px;
}

.contact{
	padding: 0 20px 120px;
	/*margin-bottom: 120px;*/
}

.contact_mail{
	color:#999999;
	font-size:18px;
	text-align: center;
	letter-spacing:0.04em;
}
.contact_p{
	color:#666666;
	font-family: yu-gothic-pr6n, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8em;
	text-align: center;
	padding-top: 200px;
	margin-bottom: 100px;
}
.copyright{
	color:#999999;
	font-size: 14px;
	letter-spacing:0.04em;
	text-align: right;
}

.copyright_red{
	color: #d4145a;
	letter-spacing:0.04em;
}

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   /*opacity: 0.9;*/
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
	background-color: #ffffff;
	opacity: 0.9;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding:0;
	margin:0;
	font-size: 14px;
	border-right: 1px solid #666666;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
	color: #999999;
	text-align: center;
	display:block;
	width: 100%;
	padding:20px;
	text-decoration: none;
}





/*
--------------------------
	タブレット / iPad 768px(縦)から1023pxまでの設定 /
-------------------------- */

@media screen and (min-width:768px){

.profile_box{
	display: flex;
	justify-content: space-between;
	padding-left: 40px;
}

.profile_p{
	width: 60%;
	}

	.works_box{
		align-items: center;
	}

	.skill_ul{
		display: flex;
		flex-wrap: wrap;
	}
	
	.skill_li{
		width:50%;
	}

	.skill_li img{
	margin:0 40px;
}
}

/*--------------------------
	PC /1024px以上の設定/
-------------------------- */
@media screen and (min-width:1024px) {

	.inner{
	width:74%;
	margin: 0 auto;
	}

	.profile_img{
		width:30%;
	}
	
	
}