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


/*ここからスマホの設定*/

/*ここからメイン*/

/*後で消す（ここにタイトルと下線あり自己紹介を入れる↓）*/
/*トップタイトル部分*/
#title_area {
	width:100%;
	height:200px;
	padding:0 30px;
	box-sizing:border-box;
	background-color:#65a7b1;
}

/*タイトルペンギン部分*/
#pg_img {
	width:30%;
	height:200px;
	float:left;
	box-sizing:border-box;
/*	background-color:#C90;*/
}

#pg_img img {
	display:block;
	margin:0 auto;
	min-width:80%;
	max-height:190px;
}

/*タイトルイメージ部分*/
#title {
	width:70%;
	height:200px;
	padding:50px 0 30px 0;
	float:right;
	box-sizing:border-box;
/*	background-color:#C6F;*/
}

#title img {
	display:block;
	margin:0 auto;
	width:100%;
	max-height:140px;
}
/*トップタイトル部分ここまで*/

#works_area {
	width:85%;
/*	height:800px;*/
	margin: 0 auto;
	box-sizing:border-box;
/*	background-color:#33CCFF;*/
}

.contents_area {
	width:100%;
/*	height:400px;*/
	margin:0 auto;
	box-sizing:border-box;
/*	background-color:#FFFF99;*/	
}

.sub_title {
	margin:0 auto 30px auto;
	padding-left:20px;
	border-bottom:5px solid #65a7b1;
/*	background-color:#fff;*/
}

.sub_title h3 {
	margin-top:30px;
	color:#65a7b1;
	font-size:1.5em;
}
/*後で消す（ここにタイトルと下線あり自己紹介を入れる↑）*/



/*プロフイラスト部分*/

#profile_img  {
	width:100%;
/*	height: 250px;*/
	margin:20px auto;
/*	background-color: #150D92;*/
}

#profile_img img {
	display: block;
	margin: 0 auto;
	max-width:250px;
}

/*プロフ文章部分*/

#profile_text_area {
/*	height: 250px;*/
}

#profile_text {
	width:100%;
	margin: 20px auto 0 auto;
	padding:20px;
/*	height: 250px;*/
	box-sizing: border-box;
/*	background-color:#B7393B;*/
}

#p_name {
	font-size: 1.2em;/*名前部分*/
	margin-bottom:0.8em;
	border-bottom: 1px solid #4e4e4e; 
}

#text_2 {
	font-size: 0.5em;/*読み仮名部分*/
}

#p_text {
	font-size:0.8em;/*文章部分*/
	box-sizing: border-box;
}

/*スキル部分設定*/

#skill_base {
	width:100%;
	margin: 0 auto;
/*	background-color: #CE6163;*/
}

#skill_area {
	margin: 0 auto;
	padding:20px 0;
	border-radius: 20px;
	background-color: #d0e4e7;
}

/*スキルタイトル部分*/

#skill_title_area {
	height: 50px;
/*	background-color: #A170A6;*/
}

#skill_title_area img {
	display: block;
	margin: 0 auto;
	height: 50px;
}


/*スキル１つ分の設定*/
.skill_set {
	width:300px;
	height: 80px;
	margin: 20px auto 10px auto;
/*	background-color: #832425;*/
}

.skill_icon {
	width:80px;
	height: 80px;
	float:left;
/*	background-color: #248323;*/
}

.skill_text {
	font-size: 0.9em;
	width:220px;
	height: 80px;
	padding:20px 10px;
	float:right;
	box-sizing: border-box;
/*	background-color: #837922;*/
}

.text_padding {
	font-size: 0.8em;
	padding:10px 10px 0 10px;
}

.text_padding2 {
	padding:35px 10px 0 10px;
}

/*topに戻るボタンここから*/

#top_btn_area {
	width:80%;
	height:150px;
	margin:0 auto;
	padding-top:45px;
	box-sizing:border-box;
/*	background-color:#33C;*/
}

#top_btn_area a {
	color:#fff;
}

#top_rt_btn {
	width:140px;
	height:50px;
	margin:0 auto;
	padding-top:15px;
/*	border-radius:20px;*/
	box-sizing:border-box;

}

/*ぴょこ部分*/
#bou1-s{
	position:absolute;
	z-index:1;
	left:44%;
	bottom:60px;
	transition:0.5s;
}

#top_rt_btn:hover~#bou1-s{
	transform:translate(0px,-30px);
}
/*ぴょこ部分*/

#top_rt_btn p {
	text-align:center;
	border-radius:20px;
	padding:5px;
	position:relative;/*ぴょこ部分*/
	z-index:2;/*ぴょこ部分*/
	box-sizing:border-box;
	background-color:#e4aa87;
}
	
#top_rt_btn p:hover {
	background-color:#e24040;
}

/*topに戻るボタンここまで*/

.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

/*ここまでメイン*/


/*ここまでスマホ設定*/





/*●●●●●●●●●●ここからタブレット・ｐｃ設定●●●●●●●●●●*/

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


/*タブレット・PC・トップ(タイトル)部分ここから*/

#title_area {
	width:60%;
	height:250px;
	margin:0 auto 60px auto;
  	border-radius: 0 0 20px 20px;
	background-color:#65a7b1;
}
/*タブレット・PC・タイトルペンギン部分*/
#pg_img {
	width:30%;
	height:250px;
	float:left;
/*	background-color:#C90;*/
}

#pg_img img {
	display:block;
	margin:0 auto;
	min-width:80%;
	max-height:240px;
}

/*タブレット・PC・タイトルイメージ部分*/
#title {
	width:70%;
	height:250px;
	float:right;
/*	background-color:#C6F;*/
}

#title img {
	display:block;
	margin:0 auto;
	width:100%;
	max-height:190px;
}

.sub_title {
	width:80%;
	min-width:600px;
}

.sub_title h3 {
	font-size:2em;
}


/*タブレット・PC・トップ(タイトル)部分ここまで*/	

	
/*タブレット・PC・プロフ部分ここから*/	

#profile_box {
	width: 70%;
/*	height: 350px;*/
	margin: 0 auto;
	box-sizing: border-box;
/*	background-color: #C7EC88;*/
}

	
	
/*タブレット・PC・プロフイラスト部分*/	
#profile_img  {
	width:40%;
	padding:0 0 0 0;
	float:left;
	box-sizing: border-box;
/*	background-color: #150D92;*/
}

#profile_img img {
	display: block;
	margin: 0 0 0 auto;
	max-width:300px;
/*	min-width: 250px;*/
}

	
/*タブレット・PC・プロフ文章部分*/
#profile_text_area {
	width:60%;
	padding:0px 0 0 0px;
	float:right;
	box-sizing: border-box;
/*	background-color: #69859F;*/
}	
	
#profile_text {
	width:100%;
	margin: 0 0 0 0px;
	padding:20px;
/*	height: 250px;*/
	box-sizing: border-box;
}
	
#profile_text p {
	box-sizing: border-box;

}	
	
	

/*タブレット・PC・プロフスキル部分*/	
#skill_base {
	width:80%;
	min-width:600px;
	margin: 0 auto;
	padding-top:20px;
	box-sizing: border-box;
/*	background-color: #CE6163;*/
}

#skill_area {
	margin: 0 auto;
	width:90%;
	min-width:550px;
/*	height:300px;*/
	padding:20px 20px 20px 20px;
	border-radius: 20px;
	background-color: #d0e4e7;
}

#sk_flex_box {
	margin: 0 auto;
	display: flex;
/*	background-color: #559033;*/
}
	
.skill_float_box {
	margin: 0 auto;
}
	
.skill_set {
	max-width:300px;
	min-width:150px;
}
	
/*.skill_set_margin {
	margin-right:10px;
}*/

.skill_icon {
	max-width:30%;
}

.skill_text {
	max-width:70%;
}	

.text_padding {
	font-size: 0.7em;
}


#bou1-s{
	left:47%;
}

	
/*タブレット・PC・プロフ部分ここまで*/	
	
	
}
/*●●●●●●●●●●ここまでタブレット・ｐｃ設定●●●●●●●●●●*/



/*■■■■■■■■■■■ここからｐｃ設定■■■■■■■■■■*/
@media screen and (min-width:950px) {

/*PC・TOP(タイトル)部分*/

#main_top {
	height: 490px;
/*	background-color:#fff;*/
}
	
/*PC・タイトルイメージ部分*/	
	
#title img {
	margin:0 0 0 0;
	width:90%;
/*	background-color:#333366;*/
}






/*PC・プロフ部分*/

	
#profile_img img {
	display: block;
	margin: 0 auto;
	min-width: 250px;
}
	
#profile_text {
	max-width:95%;
	margin-left: 30px;
	min-width: 350px;
}
	
#p_name {
	font-size: 1.5em;/*名前部分*/
	margin-bottom:0.8em;
	border-bottom: 1px solid #4e4e4e; 
}

#text_2 {
	font-size: 0.5em;/*読み仮名部分*/
}

#p_text {
	font-size:1em;/*文章部分*/
	box-sizing: border-box;
}
	
.text_padding {
	font-size: 0.9em;
}

#bou1-s{
	left:48%;
}

}
/*■■■■■■■■■■■ここまでｐｃ設定■■■■■■■■■■*/