/*フォント設定*/

/*メインフォント*/
@font-face {
	font-family: 'NotoSansJP';
	src: url('../fonts/NotoSansJP/NotoSansJP-Regular.otf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*サブフォント*/
@font-face {
	font-family: 'Bebas Neue';
	src: url('../fonts/BebasNeue/BebasNeue-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*プログラムフォント*/
@font-face {
	font-family: 'inconsolata';
	src: url('../fonts/inconsolata/inconsolata/static/Ligconsolata-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*ヘッダー(背景アニメーション)*/
@keyframes headerGradient {
	0% {
		background-position: 90% 0%
	}
	50% {
		background-position: 11% 100%
	}
	100% {
		background-position: 90% 0%
	}
}

/*グローバル変数*/
:root {
	--light-main-color: #ffffff;
	--light-sub-color: #bebebe;
	--light-accent-color: #e0e0e0;
	--light-link-color: #06c755;

	--dark-main-color: 	#243447;
	--dark-sub-color: #243447;
	--dark-accent-color: #E6F4F1;
	--dark-link-color: #00ffb3;

	--light-shadow : 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
	--dark-shadow : 5px 5px 10px #1e2b3b, -5px -5px 10px #2a3d53;	

	--radius-size: 7px;
	--main-font: 'NotoSansJP', cursive;
	--sub-font: 'Bebas Neue', sans-serif;
	--program-font: 'inconsolata', cursive;
	--letter-space: 1px;
}


/*ページ読み込みエラー*/
#error {
	font-size: 24px;
}


/*ヘッダー*/
#header {
	z-index: -1;
	color: rgb(145, 144, 144);
	background-color: var(--light-accent-color);
	height: 12px;
	border-radius: 0px;
}


/*ヘッダ文字*/
#header p {
	font-size: 8px;
	color: white;
	text-align: left;
	z-index: 12;
	font-family: var(--sub-font);
	padding-bottom: 7px;
}


#particle {
	height: 200px;
}

.particles-js-canvas-el {
	z-index: -2;
	filter: opacity(70%);
}


/*ヘッダー(背景描画)*/
#header-animation {
	text-align: center;
	height: 200px;
	background: linear-gradient(222deg, var(--dark-sub-color), var(--light-sub-color));
	background-size: 400% 400%;
	animation: headerGradient 10s ease infinite;
}


/*ヘッダー(背景文字)*/
#header-animation p {
	margin-top: -110px;
	text-align: center;
	font-size: 50px;
	font-family: var(--sub-font);
	letter-spacing: var(--letter-space);
	color: var(--light-accent-color);
}


/*ラッパー*/
#wrapper {
	width: 100%;
	overflow-x: hidden !important;
}


/*記事*/
.paper {
	padding-bottom: 10px;
}


/*記事タイトル*/
.title {
	font-size: 18px;
	margin: 5px;
	background-color: var(--light-accent-color);
	border-radius: var(--radius-size);
	padding: 15px;
	font-family: var(--main-font);
	color: var(--light-sub-color);
	box-shadow: var(--light-shadow);
}


/*本文*/
body {
	caret-color: transparent;
	border-radius: var(--radius-size);
	z-index: 1;
	margin: 15px;
	background-color: #e0e0e0 !important;
}

/*セパレータ*/
hr {
	height: 4px !important;
	border-radius: var(--radius-size);
	background-color: var(--light-sub-color) !important;
}

h1 {
	padding-top: 15px;
	color: var(--light-sub-color);
	letter-spacing: var(--letter-space);
	font-family: var(--sub-font);
}

p {
	font-size: 12px;
	font-family: var(--main-font);
	margin: 15px;
	line-height: 24px;
}

a {
	color: var(--light-link-color) !important;
}

/*コード*/
pre {
	border-radius: var(--radius-size);
	margin : 10px;
	padding: 15px;
	color:white;
	background-color: var(--light-accent-color);
	box-shadow: var(--light-shadow);
}

code {
	color: #00cb84 !important;
	font-family: 'inconsolata' !important;
	width: 100%;
	font-size: 10.5px !important;
}


/*フッター*/
footer {
	width: 100%;
	height: 120px;
	text-align: center;
	padding: 50px 0;
	margin-top: 20px;
	background-color: #cccccc;
}

footer p {
	color: #fff;
	font-size: 10.5px;
	font-family: var(--main-font);
}


/*説明書き*/
.Explain {
	font-size: 10px;
	color: #888888;
}


/*記事画像のラッパー*/
#img-wrapper {
	margin: 10px;
}


/*記事画像*/
#wrapper img {
	border-radius: var(--radius-size);
	max-width: 100%;
	height: auto;
}


/*記事本文の余白*/
#contents {
	margin-top: 20px;
	margin-bottom: 20px;
}


/*サムネイル*/
.img-thumbnail {
	width: 426px !important;
	height: 240px !important;
	object-fit: cover !important;
	box-shadow: var(--light-shadow);
}

/*サムネイル*/
iframe {
	width: 97% !important;
	height: 240px !important;
	object-fit: cover !important;
	box-shadow: var(--light-shadow);
	margin: 10px;
	border-radius: var(--radius-size);
}

/*カテゴリ*/
#category {
	font-size: 10px;
	margin: 15px;
	font-family: var(--program-font);
}


/*作成日時*/
#createdAt {
	font-size: 10px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	margin: 15px;
	font-family: var(--program-font);
}

#share {
	margin: 10px;
}


/*シェアボタン*/
.share {
	/* color: white; */
	border-radius: var(--radius-size);
	margin: 5px;
	box-shadow: var(--light-shadow);
	display: flex;
	color: white !important;
}

.share:hover{
	opacity: 0.6;
	transition: 1.0s;
}

.share a{
	display: block;
	color: white !important;
	font-size: 8px;
	letter-spacing: var(--letter-space);
	font-family: var(--main-font);
	text-decoration: none;
	padding-top: 4px;
	padding-left: 6px;
}

/*Tweetボタン*/
#Twitter {
	background-color: #00acee;
}

/*facebookボタン*/
#Facebook {
	background-color: #222222;
}

/*Lineボタン*/
#Line {
	background-color: #06c755;
}

/*サイドバー*/
#SideList {
	border-radius: var(--radius-size);
	font-family: var(--program-font);
}

#SideList ul {
	border-radius: var(--radius-size);
	box-shadow: var(--light-shadow);
}

#SideList li {
	background-color: #e0e0e0;
	border: none;
}

#SideList a {
	font-size: 13.5px;
	font-family: var(--program-font);
	margin: 10px;
	transition: color 0.3s;
	text-decoration-line: none;
}

#SideList span {
	font-size: 12px;
	font-family: var(--program-font);
	background-color: var(--light-link-color) !important;
}

.ft-area {
	height: 300px;
	background-color: #1d2324;
	margin: 10px;
	margin-top: 10px;
	font-size: 18px;
	font-family: var(--program-font);
	border-radius: var(--radius-size);
}

/*ローディングアニメーション*/
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	color: var(--light-accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-family: var(--sub-font);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

.loading.active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.loading-txt {
	animation: 1.0s flashing infinite;
	letter-spacing: 3px;
}

#RecentlyList {
	list-style: none;
	font-size: 8px;
}

.RecentlyList {
	border-radius: 7px;
}

.Thumb {
	width: 25%;
	/* padding-top: 20px;
	padding-bottom: 20px; */
}

#categoryid{
	font-size: 10px;
	margin: -20px;
}

@keyframes flashing {
	50% {
		opacity: .4;
	}
}

/* スクロールバー*/
::-webkit-scrollbar {
	width: 5px;
}

 ::-webkit-scrollbar-track {
	background: linear-gradient(var(--dark-accent-color), var(--light-accent-color));
	border-radius: var(--radius-size);
}

 ::-webkit-scrollbar-thumb {
	background: var(--light-accent-color);
	border-radius: var(--radius-size);
}

/*ダークモード*/
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--dark-main-color) !important;
		color: #e4e4e4 !important;
	}
	a {
		color: var(--dark-link-color) !important;
	}
	pre {
		background-color: var(--dark-main-color);
		box-shadow: var(--dark-shadow);
	}
	iframe {
		box-shadow: var(--dark-shadow);
	}

	.img-thumbnail {
		box-shadow: var(--dark-shadow);
	}
	.share {
		box-shadow: var(--dark-shadow);
	}

	/*記事内画像*/
	#wrapper img {
		filter: grayscale(30%);
		background-color: var(--light-accent-color);
		border-radius: var(--radius-size);
	}
	/*ヘッダー*/
	#header {
		background-color: var(--dark-main-color) !important;
	}
	#header p {
		color: var(--light-accent-color);
	}
	.title {
		background-color: var(--dark-sub-color) !important;
		box-shadow: var(--dark-shadow);
		color: var(--light-accent-color);
	}

	/*サイドバー*/
	#SideList ul {
		box-shadow: var(--dark-shadow);
	}
	#SideList li {
		background-color: var(--dark-sub-color) !important;
	}
	#SideList span {
		background-color: var(--dark-link-color) !important;
		color: black;
	}
	#SideList p {
		color: black;
	}
	/*フッター*/
	footer {
		background-color: var(--dark-main-color) !important;
	}
	/*ローディング文字*/
	.loading {
		color: white;
		background-color: var(--dark-main-color);
	}
	/*シェアボタン文字*/
	#share a {
		color: white !important;
	}
}

@media (max-width:767px){
	html, body{
	  overflow-x: hidden;
	}
	.nav{
	  position: fixed;
	  top: 0;
	  left: 100%;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0,0,0,0.9);
	  color: #ffffff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /* 右からスライド */
	  transition: left 0.6s;
	  z-index: 100;
	}
	.nav ul{
	  list-style:none;
	}
	.nav li:not(:last-child){
	  margin-bottom: 30px;
	}
	.nav a{
	  text-decoration: none;
	  font-size: 30px;
	  letter-spacing: 14px;
	  font-family: var(--sub-font);
	}
  }
  /* ナビゲーションボタン（開く） */
  #navbtn{
	position: fixed;
	top: 15px;
	right: 15px;
	padding: 0;
	outline: none;
	border: none;
	background: none;
	width: 30px;
	height: 20px;
	cursor: pointer;
	z-index: 1;
	color:white;
  }
  
  #navbtn::before,
  #navbtn::after{
	content : '';
	display: block;
	height: 1px;
	background-color: #333333;
	transform: translateY(10px);
	transition: 0.3s ease-in-out;
  }
  
  #navbtn::before{
	transform: translateY(-10px);
	box-shadow: 0 10px #333333;
  }
  
  /* ナビゲーションボタン（閉じる） */
  .open #navbtn{
	z-index: 100;
  }
  .open #navbtn::before{
	transform: rotate(-45deg);
	box-shadow: none;
  }
  .open #navbtn::after{
	transform: rotate(45deg);
	box-shadow: none;
  }
  /* ナビゲーションメニュー 開いた時*/
  .open .nav{
	left: 0;
  }
  
  @media(min-width: 768px){
	/* PCではボタン非表示 */
	#navbtn{
	  display:none;
	}
	/* ヘッダーは横並び */
	#hm{
	  display: flex;
	  align-items: center;
	}
	/* メニューを右に寄せる */
	.nav{
	  /* 右寄せ */
	  z-index: -5;
	  margin-top: -24px !important;
	}
	.nav ul{
	  display: flex;
	  list-style:none
	}
	.nav ul li:not(:first-child){
	  margin-left:20px;
	}
	.nav ul li a { 
	  color: #000000;
	}
  }