@charset "UTF-8";
/*================================================================
			　　　　　　　　　　　　チートシート
================================================================*/
/*================================
			基本設定
================================*/

*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

/* google fonts */
.stick-regular {
  font-family: "Stick", sans-serif;
  font-weight: 400;
  font-style: normal;
}


body {
 	/*background-color: #b5b5b6;*/
	color: #0d0103;
	background: url("images/background_img.png");
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*================================
			ヘッダー
================================*/

header{
	width: 100%;
	height: 32px;
	margin-bottom: 90px;

}

h1,h2{
	text-align: center;
	font-size: 32px;
	color: #f9f9fc;
	padding: 10px 0;
	font-family: "Zen Maru Gothic", sans-serif;/*googlefont*/
	font-weight: bold;
}

h1.html_sheet,h2.html_sheet{
	background-color: #0363A6;
}

h1.css_sheet,h2.css_sheet{
	background-color: #e37560;
}



/*================================
			ナビゲーション
================================*/
nav{
	position: fixed;/* ナビ固定　*/
	top: 100px;/* headerのheight分 */
	right: 0;
	overflow: auto;
}

nav ul li{
	width: 240px;
	height: 50px;
	background-color: rgba(164,196,232,0.7);
}

nav ul li.css_sheet{
	background-color: rgba(246,196,190,0.7);
}

nav ul li a{
	display: flex;/*２行テキストの重なりを解消するためblockではなくflexに*/
	justify-content: center;/*テキストのボックスを水平中央に*/
	align-items: center;/*テキストのボックスを垂直中央に*/
	width: 100%;/*liのサイズいっぱいにリンク*/
	height: 100%;/*liのサイズいっぱいにリンク*/
	font-size: 12px;
	color: #f6f296;
	font-weight: bold;
	text-align: center;/*テキストのボックスの中を中央に*/
	font-family: "Zen Maru Gothic", sans-serif;/*googlefont*/
	font-weight: bold;
}

nav ul#menu li a:hover{
	color: #f9f9fc;
}

nav ul#menu li:hover{
	background-color: #0363A6;
}

nav ul#menu li.css_sheet:hover{
	background-color: #e37560;
}

/* CSS・HTML切り替えタブ */
nav ul#sheet{
	display: flex;
}

nav ul#sheet li{
	width: 115px;
	height: 40px;
	background-color: #a4c4e8;
	border-radius: 20px 20px 0 0;
	margin-right: 10px;
}

nav ul#sheet li:last-child{
	margin-right: 0;
}


/* CSS・HTML 項目タブ */
nav ul#menu li:last-child{
		border-radius: 0 0 20px 20px;
}

nav ul#sheet li a:hover{
	color: #f9f9fc;

}

nav ul#sheet li:hover{
	background-color: #0363A6;
}

/*==========htmlタブ==========*/
nav ul#sheet li.html_sheet {
  background-color: #a4c4e8;
}

nav ul#sheet li.html_sheet:hover{
  background-color: #0363A6;
}

/*==========CSSタブ==========*/
nav ul#sheet li.css_sheet {
  background-color: #f6c4be;
}

nav ul#sheet li.css_sheet:hover {
  background-color: #e37560;
}


/*================================
　　メイン
================================*/
/*　メインボックス　*/
article{
	width: 900px;
	margin: 30px auto;
}

/*　分類タイトル　*/
article h2{
	width: 490px;
	text-align: center;
	font-size: 20px;
	color: #f9f9fc;
	background-color: #0363A6;
	border-radius: 30px 30px 0 0;
	padding: 10px 5px;
}

article h2 span{
	font-size: 12px;
}

/*　分類説明　*/
article p{
	padding: 20px 0;
	text-align: center;
	background-color: #f9f9fc;
	border-radius: 0 30px 0 0;
  font-family: "Zen Maru Gothic", sans-serif;/*googlfont*/

}

article p span{
	background: linear-gradient(#f9f9fc,#f6f296);
	padding: 0 5px;
}

/*　分類ボックス　*/
article dl{
	width: 700px;
	border-radius: 0 0 30px 30px; 
	margin-bottom: 30px;
	margin: 0 auto;
	background-color: #f9f9fc;
}

/* コンテンツラッパー */
div.content_wrapper{
	background-color: #f9f9fc;
	border-radius: 0 0 30px 30px;
	padding: 20px;

}

article h2,article p,div.content_wrapper,h1{
	box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
}

	
	/*　タグ・プロパティ　*/
article dl dt{
	padding: 5px 10px;
	font-weight: bold;
}

/* 説明文 */
article dl dd{
	margin-bottom: 10px;
	padding-left: 20px;
	font-family: "Zen Maru Gothic", sans-serif;/*googlefont*/
}

article dl dd.html_sheet{
	border-bottom: 2px dashed #0363A6;
}

article dl dd.css_sheet{
	border-bottom: 2px dashed #e37560;
}




/*================================
			フッター
================================*/
footer{
	width: 100%;
	height: 100px;
	margin-top: 30px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}


footer.html_sheet{
	background-color: #0363A6;
}

footer.css_sheet{
	background-color: #e37560;
}