@charset "UTF-8";
/* @importの記述はTOPに */
@import url('sys/reset.css');
@import url('sys/font.css');
@import url('sys/fontawesome/all.min.css');


body {
	font-family: "Inter","Gen Shin Gothic P";	
		/* font-family: "Gen Seki Gothic";	 */

	/* フォントサイズ：最大1rem・最小0.9remで流動的に変化 */
	font-size: clamp(1rem, 0.5rem + 1.6vw, 1.05rem);
	line-height: 1.5;
	/* letter-spacing: 0.5px; */
	/* テスト用の背景 */
	background: linear-gradient(202deg, #fffbeb, #ffd3c1);
}


#body-container {
	background: white;
}
/* テスト用の背景 */

/* #header { */
    /* background: #ffe9f7; */
/* } */
/* #content { */
	/* background: linear-gradient(202deg, #f5ffe9, #c0ecff); */
/* } */
/* #content-left { */
    /* background: linear-gradient(45deg, #ffffff 100%, #fed3ff 100%); */
/* } */
/* #content-right { */
    /* background: linear-gradient(45deg, #ffffff 100%, #fed3ff 100%); */
/* } */




/* body にコンテナクエリを指定するとmagnific popup が誤動作するので、新たにコンテナを作って指定。 */
#body-container {
	/* コンテナクエリ用：幅にのみ反応 */
	container-type: inline-size; 
	/* ヘッダーをブラウザ幅全開にしない場合はここで指定 */
	max-width:1100px;
	margin:0 auto;
}


#header2 {
	font-family: "Audiowide","MPLUS2","Helvetica Neue",'Gen Shin Gothic P',Arial;
	text-align: center;
	background:url(../img/header);
	background-position: center;
	background-size: 80%;
	background-repeat:no-repeat;
	/* height:5rem; */
	height:6.3rem;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	/* タイトルは折り返しなしで */
	word-break: normal;

	display: flex;
	align-items: center;
	justify-content: center;
}
#header2-container {
	position:relative;
    margin-bottom: 2.5rem;
}

#header2 a #header2-title {
	color:white;
	text-decoration:none;
	&:hover {
		text-decoration: underline;
	}
}

#header2-out {
	/* background: radial-gradient(circle,black, transparent); */
	background: url(../img/header);
	/* background-size: 100%; */
	filter: blur(3px);
	position: absolute;
	width: 100%;
	z-index: -1;
	height: 117%;
	background-size: 104%;
	/* background-repeat: no-repeat; */
	background-position: center;
	top: -0.2rem;
	/* left: -0.2rem; */
}
/* ヘッダータイトル */
#header2-title {
	color:white;
	font-size:150%;
    position: relative;
    display: inline-block;
    text-shadow: 0.1rem 0.1rem 0.2rem #000000b5,0.1rem 0.1rem 0.3rem #000000b5,0.1rem 0.1rem 0.4rem #000000b5;
    letter-spacing: 0.06rem;
}




#content {
	display: flex;/* サイトを左右に分ける */
	flex-wrap: wrap;/* float的な動作 これが無いと横並びのみになる */
    flex-direction: row-reverse;
	/* gap: 1rem; */
	
	color:#333333;
	/* font-size:1.1rem; */
	line-height: 1.7;

	margin: 0 auto;
	max-width: 1400px;
	
  min-height: 80vh;
}

#content-left {
    padding: 1rem;
    flex: 1 /* 1を指定すると幅を最大まで伸ばす */;
}

.text {
    padding: 0 1rem;
}

.text img {
	/* margin-top:0.5rem; */
	box-shadow: rgb(128, 128, 128) 0px 0px 1px;
	width:40%;
	margin-top: 0.5rem;
}
.text img.H {
	width:30%;
	aspect-ratio: auto 3/4;
}
.text img.W {
	aspect-ratio: auto 4/3;
}

.text img.PX {
	image-rendering: pixelated;
}




/* スライドショー専用 */
.slideshow {
  /* width: 360px; */
  /* height:200px; */
}
.slideshow span {
  width: 100%;
}
.slick-slide img {
	width: 100%;
}
.slideshow img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  box-shadow: unset;
}






#content-right {
	padding:0.5rem;
    width: 250px /* サイドバー幅固定で250pxぴったりに */;
}
#content-right img {
	margin-top:0.5rem;
	margin-bottom:0.5rem;
	width:100%;
}
#content-right .title {
	font-size:1.1rem;
	border-radius: 0.5rem;
	text-align: center;
	box-shadow: 1px 1px 2px #6c87a4fc;
	margin: 1em 0rem;
}
/* first-childだと要素の最初でないと反応しないため */
#content-right p:first-of-type {
  margin-top:1rem;
}



/* アルバム用 正方形で表示 */
.textAlbum {
    display: grid;
    gap: 0.3rem;
    grid-template-columns: repeat( auto-fill, minmax(100px,1fr) );
    margin: 1.5rem 0;
}
#content-left .textAlbum .Img {
	width:100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	box-shadow: unset;
}
/* 画像用 背景に灰色画像を指定するとアルバムは良い感じ */
#content-left .textAlbum .magimg {
	/* background-image:url(../img/photobg.png) */
	background:#ddd;
}

/* サイドバーのアルバム用 */
#content-right .textAlbum .Img {
	width:100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	box-shadow: unset;
	margin:unset;
}
/* 画像用 背景に灰色画像を指定するとアルバムは良い感じ */
#content-right .textAlbum .magimg {
	/* background-image:url(../img/photobg.png) */
	background:#ddd;
}




#footer {
    color: white;
	font-family: "Audiowide","MPLUS2";
	letter-spacing: 0.03em;
	
    background: #333;
	padding-top:5rem;
	padding-bottom:5rem;
	
	display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	gap:0.2em;
	white-space: nowrap;
}
#footer small{
	color:white;
}






/* コンテンツ */
h1 {
	font-size: 1.5rem;
	font-weight: bold;
	letter-spacing: 0.05rem;
	margin: 0 0 0.5rem 0;
	padding: 0.8rem 0.4rem;
	position: relative;
	line-height: 1.5;
	/* border: 1px solid #ccb499; */
	/* border-bottom: 1px solid #f08bff; */
	/* background: repeating-linear-gradient(90deg, #ffdac0f0 0%, #ffababf0),url(../img/header-riviera.webp); */
	/* background: repeating-linear-gradient(90deg, #d3b8b7d1 0%, #b48470f7),url(../img/header-riviera.webp); */
	/* background-position: center; */
	/* background-size: cover; */
	/* color: white; */
	/* text-shadow: 1px 1px 2px white; */
	/* box-shadow: 1px 1px 3px #422c2c; */
}

/* h1::before, */
h1::after {
	position: absolute;
	left: 0;
	z-index: 0;
	content: "";
	display: block;
	width: 100%;
	height: 0.2rem;
	background: repeating-linear-gradient(90deg, #665858d4 0%, #b48470f7),url(../img/header);
	background-position: center;
	background-size: cover;
	border-radius: 4.8px;
}
h1::before {
	top: 0;
}
h1::after {
	bottom: 0;
}





h2 {
	font-size: 1.4em;
	margin-top:3em;
	border-bottom: 1px dotted brown;
	padding-bottom: 0.2em;
}

h3 {
	font-size: 1.2em;
	margin: 3em 0 0 0;
}
/* h3:before { */
	/* font-family: "Font Awesome 6 Free"; */
	/* content:"\f07b"; */
	/* color:purple; */
    /* font-size: 90%; */
	/* margin-right:0.4rem; */
/* } */



/* カテゴリリンク */
.MenuFlex {
	font-size: 90%;
	text-align: left;
	
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	
	/* background: linear-gradient(to right, #d508ff, #ff8dbd, #ff906d,#f9ff42, #39ffff); */
	/* background-clip: text; */
	/* -webkit-background-clip: text; */
	/* color: transparent; */
    /* text-shadow: none; */
}
.MenuFlex div {
	/* flex: auto;//要素がストレッチ */
}
.MenuFlex div.home:before {/*家アイコンに*/
	color: #080066;
	font-family: "Font Awesome 6 Free";
    content: '\f015';
	font-size: 85%;
	font-weight: 900;
	vertical-align: text-bottom;
	margin-right:0.2rem;
}
.MenuFlex a {
	/* color: rgba(0,0,0,0); */
	color: #666;
	text-decoration:none;
	
}


.Flex {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	gap: 1rem;
}
.FlexLR {
	display: flex;
	gap: 0.5rem;
	/* flex-direction: row-reverse; */
	justify-content: space-between;
	align-items: center;
	word-break: normal;
	position:relative;

}


/* グリッドのコンテナ */
.GridMenu {
	display: grid;
	position:relative;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem,1fr));
    gap: 0.1rem;
	/* margin: 2rem 0; */
}
/* グリッド内のメニュー */
.GridMenu .Item {
	font-size:90%;
    /* background: linear-gradient(30deg, #fce4ff, white); */
	text-align: center;
	user-select: none;
	line-height: 2;
	white-space: nowrap;
}
.GridMenu .Item a {
    text-decoration: none;
}
.display-none{
	/* デフォルトで非表示にするアイテムに指定 */
	display:none;
	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.display-none2{
	/* デフォルトで非表示にするアイテムに指定 */
	display:none;
}
/* a.MenuToggleButton:hover { */
	/* color:red; */
/* } */



.date {
	color:#888;
	text-align: right;
	/* border-bottom: 1px solid #ccc; */
	padding-bottom: 0.1rem;
	font-size:small;
}



/*********************************
 Fontawesome icon
**********************************/
.icon-link-default:before {
	color:#666;
	content: "\f0c1";
	/* content: "\f08e"; */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
    font-size: 0.7em;
}
.icon-link-szr::before {
	content: "\f669";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: 0.2rem;
	font-size: 1em;
}
.icon-link-szr2:before {
	color: #b1005c;
	content: "\f50e";
	font-family: "Font Awesome 6 Brands";
	font-weight: 900;
	margin-right: 0.2em;
}
.icon-link-szr-book:before {
	color: #b1005c;
    content: "\f66a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.2em;
}
.icon-link-jedi-order:before {
    content: "\f50e";
    font-family: "Font Awesome 6 Brands";
    font-weight: 900;
    margin-right: 0.2em;
}
.icon-link-youtube:before {
	color:#F92610;
	content: "\f167";
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
    margin-right: 0.2em;
}
.icon-link-discord:before {
	color:#5c63df;
	content: "\f392";
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
    margin-right: 0.2em;
}
.icon-link-instagram:before {
	color: rgba(0,0,0,0);
	  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	  background-clip: text;
	-webkit-background-clip: text;
	content: "\e055";
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
    margin-right: 0.2em;
}
.icon-link-itch-io:before {
	color:#FF2449;
	content: "\f83a";
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
    margin-right: 0.2em;
}
.icon-link-github:before {
	color:#444;
	content: "\f09b";
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
    margin-right: 0.3em;
    font-size: 1.1em;
}
.icon-link-google-play {
	padding-left: 1.1em;
	margin-right: 0.2em;
	background-image: url(icon/google-play);
	background-size: contain;
	background-repeat: no-repeat;
	/* vertical-align: text-top; */
	vertical-align: text-top;
}
.icon-link-mozilla {
	padding-left: 1.2em;
	margin-right: 0.2em; 
	background-image: url(icon/mozilla);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.icon-link-chrome-web-store {
	padding-left: 1.2em;
	margin-right: 0.2em;
	background-image: url(icon/chrome-web-store);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: sub;
}
.icon-link-apple-store {
	padding-left: 1.1em;
	margin-right: 0.2em;
	background-image: url(icon/apple-store);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: text-top;
}
.icon-link-amazon {
	padding-left: 1.4em;
	margin-right: 0.2em;
	vertical-align: text-top;
	background-image: url(icon/amazon);
	background-size: contain;
	background-repeat: no-repeat;
}
.icon-link-nicovideo {
	padding-left: 1.2em;
	margin-right: 0.2em;
	background-image: url(icon/nicovideo);
	background-size: contain;
	background-repeat: no-repeat;
}
.icon-link-steam {
	padding-left: 1.1em;
	margin-right: 0.15em;
	background-image: url(icon/steam);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.icon-link-ameblo {
	padding-left: 1.3em;
	margin-right: 0.3em;
	background-image: url(icon/ameblo);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}








/* オーバーフローする要素の外側に使う */
@media screen and (min-width: 0px) and (max-width: 800px) {
  .OverflowArea {
    overflow-x: auto;
  }
}
/* 横スクロールする要素に指定：設定しないと横にスクロールできない */
@media screen and (min-width: 0px) and (max-width: 800px) {
  .OverflowContent {
	  width:100%;
    min-width: 700px;
  }
}
/* 基本的には幅最大で表示 */
.OverflowContent {
  width: 100%;
}
tr th {
	font-size:80%;
}
/* 記事リスト テーブルのtd */
.ListTime {
	font-size:90%;
	position:relative;
    vertical-align: top;
    white-space: nowrap;
	width:1rem;
}
/* .ListTime .icon-new { */
	/* position: absolute; */
	/* top: 0.1rem; */
	/* right: 0.1rem; */
	/* line-height: 1.1; */
/* } */
.icon-new::before {
	color: red;
	font-family: "Font Awesome 6 Free";
	font-size: 80%;
	font-weight: 900;
	content: "\f06a";
  vertical-align: text-bottom;
 }
.ListCate {
	font-size:90%;
    vertical-align: top;
    white-space: nowrap;
	width:1rem;
}
.ListTag {
	font-size:90%;
    max-width: 7rem;
	/* 文字を丸める */
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
 }
.ListTitle {
	font-size:92%;
}







/* 非公開記事 */
.admin {
	background: #fff5fd !important;
	/* border: 1px solid #ff80c8 !important; */
}





/************ 記事内のリスト ************/
ul.list {
    padding-left: 1.5rem;
	position: relative;
	/* display: block; */
	/* background: #f5e9ff; */
}
ul.list li {
  padding: 0.2rem 0;
  list-style-type: none!important;
}
ul.list li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	/* content: "\f00c"; */
	content: "\f058";
	position: absolute;
	left: 0em;
	color: #ff3fab;
}
ul.list li:after {
  /*タブ*/
  background: #ffb03f;
  color: #fff;
  font-family: "Font Awesome 5 Free",'Avenir','Arial',sans-serif;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  letter-spacing: 0.05em;/*字間*/
}













/********** YouTube サムネイル仕様 **********/

.yt-box { 
	background:black;
	position: relative;
	margin-top:0.5rem;
	/* border-radius: 10px; */
    display: inline-block;
	/* width:70%; */
}
.yt-iframe { 
	background:black;
	/* position: relative; */
	margin-top:0.5rem;
	/* border-radius: 10px; */
    display: inline-block;
    aspect-ratio: 16/9;
	/* width:70%; */
}
/* #content-left img.yt-sum { */
img.yt-sum {
	width:100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* border-radius: 10px; */
    box-shadow: 1px 1px 4px #8a8a8a75;
	margin:0;
}
.yt-icon {
	position:absolute;
	text-align:center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:20%;
	margin:unset;
}
.yt-title {
    color: white;
    font-size: 1em;
    text-shadow: 1px 1px 1px black, 1px 1px 2px black, 0px 0px 4px #000000b8, 0px 0px 5px #000000b8, 0px 0px 5px #000000b8, 0px 0px 5px #000000b8, 0px 0px 5px #000000b8, 0px 0px 6px #000000b8;
    /* border-radius: 10px; */
    position: absolute;
    margin: 0;
    top: 0px;
    left: 0px;
    padding: 0.3rem 0.2rem 0  0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.yt-title:before {
	color: rgb(235, 45, 25);
    content: "\f167";
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    text-shadow: 0px 0px 4px white;
    margin-right: 0.3rem;
}
@media screen and (min-width: 601px) {/*** 指定幅以上↑***/
	.text .yt-box,
	.yt-iframe {
		width:60%;
	}
}
@media screen and (max-width: 600px) {/*** 指定幅以下↓***/
	.text .yt-box,
	.yt-iframe {
		width:100%;
	}
}
@media screen and (min-width: 601px) {/*** 指定幅以上↑***/
	.yt-icon {
		/* width:20%; */
	}
}



/********** pager **********/

.pager{
    margin: 0 0 0 auto;
	padding: 0;
	display:flex;
	font-weight:normal;
	   font-size: 1rem;
	  color:#ccc;
}
.pager li {
	list-style: none;
}
.pager li a,.pager li span {
	  padding: 0rem 0.5rem;
	  color:#ccc;
}



/********** パンくずリスト **********/

.breadcrumb {
	margin:0 0 1rem 0;
	padding: 0 0.5rem;
	/* 折り返しなし：良いと思ったが縮まないとおかしくなる*/
	/* white-space: nowrap; */
	/* text-overflow: ellipsis; */
	/* overflow: hidden; */
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-size: 80%;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  padding: 0 0.2em;
  color: silver;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #888;
}

.breadcrumb li:first-child a::before {
	font-family: "Font Awesome 5 Free";
	content: '\f015';
	color: #3F51B5;
	font-weight: 900;
	margin-right: 0.2rem;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}



















/********** コンテナクエリ：800px⇑ **********/
@container (min-width: 800px) {
	#content-left {
		/*PCでは少し大きく*/
		font-size:110%; 
	}

	#header2 {
	  height:8rem;
	    background-size: 80%;
	}
	#header2-out {
		height: 125%;
	}
	.display-none {
		/* デフォルトで非表示にするアイテムに指定 */
		display:block;
	}
	.GridMenu {
		margin-top: 0.5rem;
		grid-template-columns: repeat(auto-fill, minmax(10rem,1fr));
}
	.MenuToggleButton {
		display:none;
	}
	.slideshow {
		width:600px;
	}
}

/********** コンテナクエリ：800px⇓ **********/
@container (max-width: 800px) {
	
	#header2-title {
		font-size: 1.2rem; /* ビューポート幅でフォントサイズ */
	}
	#header2-container {
		margin-bottom: 1.0rem;
	}
	#header .menu {
		font-size: 75%;
		/* padding:0 1rem; */
	}
	#content {
		flex-direction: column; /* 縦並びにする */
	}
	#content-left {
		font-size:95%;
		width: 100%;
		padding: 0.5rem;
	}
	#content-right {
		color: #604e4f;
		font-size: 90%;
		/* font-family: "Audiowide","MPLUS2","Helvetica Neue",'Gen Shin Gothic P',Arial; */
		/* font-family: "MPLUS2",'Gen Shin Gothic P'; */
		width: 100%;
		padding: 0rem;
		border-bottom: 1px solid #e6e1cf;
		background: linear-gradient(#ffffff, #fff8ee);
	}
	.GridMenu {
		margin: 0 2rem 0 0;
	}
	.text {
		padding: 0 0.5rem;
	}
	.text img {
		width:90%;
	}
	.text img.H {
		width:70%;
	}

	blockquote {
		  padding: 0.05rem 1rem;
	}
	blockquote::before {
		top: -0.4rem;
		left: 0.5rem;
		font-size: 2.0rem;
	}
	blockquote::after {
		bottom: -0.6rem;
		right: 0.7rem;
		font-size: 2.0rem;
	}

	.pager{
		font-size:0.9rem;
	}

}

/***********************************
 コンテナクエリ：450px以下
 ***********************************/
 
@container (max-width: 450px) {

	.text img {
		width:100%;
	}
}