@charset "UTF-8";

:root{
	--main_txt:#333;
	--theme_color:#1b1c1d;
}

*{
  word-break: break-all;
  overflow-wrap : break-word;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
  
}

html{
	scroll-behavior:smooth;
}

img{
  max-width:100%;
  height:auto;
}

body {
	background: #f0f0f0;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    font-family:"メイリオ", meiryo, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック';
    color:var(--main_txt);
    line-height:1.5;
    display:block;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

h1{
  animation: fadeIns 2s ease 0.3s 1 normal backwards;
}

@keyframes fadeIns {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

p{
    line-height:1.6;
    margin-bottom:0.5em;
}
.ttl{
  font-size:1.2rem;
}
#content{
  margin-top:70px;
}

.inner {
  max-width: 1250px;
  margin: 0 auto;
}

.main {
  display: flex;
}

.main-content {
  width: 780px;
  background: #ffffff;
}

/* 記事ページ伸縮用 */
.main-content{
	transition:1s all;
}
.main-content.full-width {
  width: 100%;
	transition:1s;
}

.hdb{
  color:white;
  cursor:pointer;
  font-size:24px;
  margin-left: auto !important;
}

.hdb i{
  margin-top:5px;
}

.hdb:hover{
  color:rgb(197, 108, 12);
}

#l-post{
	padding:15px;
	font-size:16px;
}

.sidebar {
  width: 470px;
  margin-left:20px;
}

/*親要素であるsidebar-contentと同じ高さにする*/
.sidebar-inner {
  height: 100%;
}
.sidebar-content {
  margin-bottom: 20px;
  background: var(--sidecontent_color);
  color: #fff;
  padding:7px;
}

.sidebar-content:last-of-type {
  position: sticky;
  top: 70px;
}

#mbs{
	display:none;
}

.toc_ttl{
	background:#888888;
	padding:7px;
	text-align:center;
	margin-bottom:5px;
}

#div_TableOfContents{
	margin:10px;
	max-height:80vh;
	overflow-y:auto;
	scrollbar-width: thin;/* thin */
	scrollbar-color: #222222 #000000;
}

.ui.dropdown .menu > .item .div_TableOfContents{
	line-height: 1.5em;
}

.div_TableOfContents::-webkit-scrollbar{
	width: 5px;
}
.div_TableOfContents::-webkit-scrollbar-track{
	background-color: #000000;
}
.div_TableOfContents::-webkit-scrollbar-thumb{
	background-color: #222222;
}

.div_TableOfContents a{
  color:#ffffff;
  font-size:13px;
  font-weight:normal;
  transition:2s;
}

.toc_ttl a{
  display: block;
}

.div_TableOfContents a:hover{
  color:#ff8000;
}

.ui.menu .ui.dropdown .menu > .item{
	max-width:100vw;
	max-height:85vh;
	overflow-y:auto;
}

.ui.menu .ui.dropdown .menu > .item .div_TableOfContents a{
	color:#0066cc;
	transition:2s;
}

.ui.menu .ui.dropdown .menu > .item .div_TableOfContents a:hover{
  color:#ff8000;
}

.ui.menu .ui.dropdown .menu > .item .div_TableOfContents .toc_ttl a{
	color:#ffffff;
	transition:2s;
}

.ui.menu .ui.dropdown .menu > .item .div_TableOfContents .toc_ttl a:hover{
  color:#ff8000;
}


#footer{
	text-align:center;
	margin-top:10px;
	padding:20px;
	border-top:1px solid #cccccc;
	background:var(--theme_color);
	color:#ffffff;
}

.ui.inverted.menu {
	background:var(--theme_color);
}

.ui.container{
	width:1250px;
}

.ui.items > .item > .content > .description{
  margin-top:0.4em;
}

.ui.items > .item > .content > .header:not(.ui) {
  font-size: 1.2em;
}

#l-post ul.pagination{
  background: none;
  border:none;
  margin:0;
}
#l-post ul.pagination li{
  background: none;
  border-bottom:none;
  padding:0;
}

.ui.items{
  margin: 1.2em 0;
  padding:0.7em;
	box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
  transition: 2s;
}
#l-post .ui.items:hover{
background:#e4ecf0;
} 


/*-------- Pager --------*/
.pagination {
  border-radius: 4px;
  display: inline-block;
  margin: 20px 0;
  padding-left: 0;
}
.pagination > li {
  display: inline;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  margin-left: 0;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pagination > li > a, .pagination > li > span {
  background-color: #fff;
  border: 1px solid #ddd;
  color: #428bca;
  float: left;
  line-height: 1.42857;
  margin-left: -1px;
  padding: 6px 12px;
  position: relative;
  text-decoration: none;
}
.pagination > .active > a, .pagination > pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: var(--theme_color);
  border-color:var(--theme_color);
  color: #fff;
  cursor: default;
  z-index: 2;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
  background-color: #eee;
  border-color: #ddd;
  color: #2a6496;
}

.item_list{
  display:block;
  margin:1.2rem 0;
/*  border: 1px solid #f0f0f0;
  border-radius: 5px;*/
}

/*キラッと光るhover*/
a.item_list {
  position: relative;
  overflow: hidden;
}
a.item_list::before {
  content: '';
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
  transform: skewX(-45deg);
  }
  /*hoverした際の移動のアニメーション*/
  a.item_list:hover::before {
  animation: shine 1.3s;
  }
  
  @keyframes shine {
  100% {
    left: 125%;
  }
  }

#footer a{
	color:#e9e98c;
  transition:all 1s;
}

#footer a:hover{
	color:#e8b860;
}

.cat_list a{
  color: #4183c4;
  transition:1s;
}

.cat_list a:hover{
  color:#ff8c00;
  font-size:1.6rem;
}

#l-post ul li{
  transition:1s;
}

#l-post ul li:hover{
  padding: 3px 0 3px 16px;
}

.ui.items > .item > .image > img{
	height:75px;
}

.ui.tiny.image{
	width:150px;
}

.ui.tiny.image img{
	object-fit: cover;
}


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

  .ttl{
    font-size:1.0rem;
  }
  a.ttl{
    max-width:70%;
  }
    #mbs{
		display:block;
	}

	.sidebar {
		display:none;
	}

  pre[class*="language-"] {
    max-width: 90vw;
  }

  .hdb{display:none;}

	.ui.items > .item > .image > img{
		height:auto;
	}

	.item_list{
	  border:none;
	}


}