/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		全体の配色を変える
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body{
	/* 全体の背景色 */
	background-color: #eeeeee;

	/* 全体の文字色 */
	color: #333333;
	}
	
.wrapper{
	/* ベースの背景の色 */
	background-color: #ffffff;

	/* 基本設定 */
	width: 900px;
	margin: 50px auto;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		ヘッダー、プロフィール画像を変更する
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

header {
	/* ヘッダーに画像を設置しない場合に表示される、ヘッダー背景の色です */
	background: #b3b3b3;
	
	/* ヘッダーの画像を配置できます。中央部分が拡大縮小・トリミングされます */
	/* 画像を入れない場合は↓の内容に書き換えてください */
	/* background-image: none; */
	background-image: url("../images/header.jpg");

	/* 画像の切り取り箇所の設定 */
	/* 上下→top,middle(center),bottom　左右→left,center,right */
	background-position: center center;

	/* ヘッダーその他の設定 */
	width: 100%;
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
	}

.user-image {
	/* プロフィール画像を設置しない場合に表示される、プロフィール背景の色です */
	background: #333333;
	
	/* プロフィール画像を配置できます。中央部分が拡大縮小・トリミングされます */
	/* 画像を入れない場合は↓の内容に書き換えてください */
	/* background-image: none; */
	background-image: url("../images/user.png");
	
	/* 画像の切り取り箇所の設定 */
	/* 上下→top,center,bottom　左右→left,center,right */
	background-position: center center;

	/*プロフィール画像その他の設定 */
	width: 180px;
	height: 180px;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 90px;
	border: 5px solid #ffffff;
	background-repeat: no-repeat;
	position: relative;
	top :180px;
	}

/* ユーザー名 */
.user-name {
	color: #333333;
	margin: 80px 0 40px 0;
	font-size: 36px;
	font-weight: bolder;
	text-align: center;
	}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		文字・リンク設定
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* リンク下の下線を消す */
a{
	text-decoration:none;
	transition: color .5s;
	}

/* リンクの色 */
a:link { color: #dc143c; }

/* 訪問済みのリンクの色 */
a:visited { color: #dc143c; }

/* カーソルを置いたときのリンクの色 */
a:hover { color: #191970; }

/* クリックしたときのリンクの色 */
a:active { color: #191970; }




/* その他基本設定 */
body, input, select, textarea {
	font-family: -apple-system, "Noto Sans Japanese", meiryo, sans-serif;	/* Googleフォント */
	font-size: 1rem;	/* フォントサイズ */
	line-height: 1.65;	/* 行間 */
	}

/* 見出し設定 */
h1 {
	color: #cccccc;		/* 文字色 */
	font-size: 36px;	/* フォントサイズ */
	font-weight: bolder;/* 太字 */
	line-height: 0;		/* 行間無視 */
	}

h2 {
	color: #aaaaaa;		/* 文字色 */
	font-size: 24px;	/* フォントサイズ */
	font-weight: bolder;/* 太字 */
	}

/* 罫線 */
hr {
	height: 0;
	margin: 10px 0;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,0.2);
	}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		フッター設定
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

footer {
	/* フッター部分（更新情報、クレジット部分）の文字色です */
	color: #aaaaaa;

	/* フッター基本設定 */
	font-size: 0.9em;
	padding: 40px;
	text-align: center;
	}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		ページ設定
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

main {
	width:95%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	}

.main section {
	width: 90%;
	-webkit-flex: 1;
	flex-grow: 1;
	flex: 1;
	}

section .right{
	border-left: 1px solid rgba(0,0,0,0.1);
	padding: 30px;
	}

section .left{
	padding: 30px;
	}

section .text{
	margin: 0 10px 70px 10px;
	}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		BOOKSのところの設定です
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

ul, ol {
	padding: 0;
	position: relative;
	}

ul li, ol li {
  	padding: 0.5em;
	margin-bottom: 3px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	list-style-type: none;
	}

li:first-child {	/* 1行目だけ太い下線 */
	border-bottom: 3px solid rgba(0,0,0,0.2);
	}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		メールフォームの設定
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* メールフォーム */

input[type="text"],
input[type="reset"],
input[type="submit"],
textarea, select {
	font-size: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #efefef;
	margin: 5px;
	padding: 5px;
	border: none;
	border-radius: 5px;
	outline: none;
	}

input[type="text"],
textarea {
	width: 100%;
	}

/* メールフォーム：送信ボタン */

input[type="reset"],
input[type="submit"] {
	display: inline-block;
	width: 120px;
	background : #333333;
	color: #ffffff;
	padding: 10px;
    transition: .4s;
	}
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #cccccc;
	}
input[type="reset"]:active,
input[type="submit"]:active {
	background: #cccccc;
	}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*		メールフォームの設定
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* SNSボタン基本の設定 */
.button {
    color: #ffffff;
    position: relative;
    display: inline-block;
    font-size: 90%;
    font-weight: bold;
    padding: 0.25em 1em;
    margin: 3px;
    text-decoration: none;
    transition: .4s;
	border-radius: 5px;
	}

.button:hover {
    background: #cccccc;
	}

a.button:link { color: #ffffff; }
a.button:visited { color: #ffffff; }
a.button:hover { color: #ffffff; }
a.button:active { color: #ffffff; }


/* それぞれの色 */
.privetter	 { background: #00bcd4;}
.pixiv		 { background: #55acee;}
.booth		 { background: #dd4b39;}
.pictbland	 { background: #4f9296;}
.webclap	 { background: #9acd32;}
.marshmallow { background: #f3969a;}
.odaibako	 { background: #303030;}
.tumblr		 { background: #36465d;}
.note		 { background: #2dcdb5;}
.wordpress	 { background: #21759b;}
.homete		 { background: #31b0d5;}
.twitter	 { background: #00aced;}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 
/* ここから下は、タグ弄り非推奨です
/* ある程度CSSの知識のある方のみ編集してください
/* 
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* レスポンシブ設定 */	
@media screen and (max-width: 920px) {
	.wrapper {
		width: 100%;
		margin: 0;
		box-shadow: none;
		}
	}


@media screen and (max-width: 768px) {
	.wrapper {
		width: 100%;
		margin: 0;
		box-shadow: none;
		}

	main {
		width: 90%;
		margin: 0 auto;
		display: block;
		}

	footer {
		font-size: 0.9em;
		padding: 40px;
		text-align: center;
		}
	
	section .right {
		width: 90%;
		padding: 0;
		margin: 0 auto;
		border: none;
		}
	
	section .left {
		width: 90%;
		padding:0;
		margin: 0 auto;
		}
	}