@charset "UTF-8";

@import url("gridlex.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Josefin+Sans&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/*初期化*/
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
h1,h2,img,p{
	margin:0;
	padding:0;
}
ul,ol{
	list-style: none;
}
h1,h2{
	font-weight:700;
	color:#61b7bf;
	font-family: 'Josefin Sans', sans-serif;
}
h1:first-letter,h2:first-letter{
	color:#bf62b7;
}

/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */

/*基本設定*/
html{
	font-size:62.5%;
}
body{
	background-size: auto auto;
	background-color:#f0ffff;
	color:#1a3133;
	background-image:radial-gradient(#e5f7ff 6%, transparent 15%),radial-gradient(#e5f7ff 6%, transparent 15%);
	background-position: 0 0, 4rem 4rem;
	background-size: 8rem 8rem;
	font-size:1.6em;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	line-height:1.7;
}
a{
	color:#33b3cc;
	text-decoration:none;
}
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}
#content{
	background-color:#ffffff;
	width:96%;
	max-width:1024px;
	margin:1.6rem auto;
	border-radius:1.6rem;
}
@media (max-width: 768px){
	#content{
		width:98%;
		max-width:600px;
	}
}
@media (max-width: 576px){
	#content{
		width:98%;
	}
}


/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */

/*ヘッダー*/
header{
	text-align:center;
}
header h1{
	font-size:3.2rem;
	font-weight:bold;
	padding-top:1.6rem;
}
header img.icon{
	display:block;
	height:80px;
	width:80px;
	border-radius:50%;
	border: solid 2px #bf62b7;
	margin:auto;
}
header p{
	color:#61b7bf;
	font-size:1.4rem;
	margin-top:1.4rem;
	margin-bottom:2.4rem;
}
header p:first-letter{
	color:#bf62b7;
}
/*コンテンツ*/
.item{
	margin:0 1.6rem 3.2rem 1.6rem;
}
.item h2{
	font-size:2rem;
}
/* メールのアットマーク */
.domain::before {
	content: '@';
}
/* B:太字(Bold) */
.decorationB {
	font-weight: bold;	/* 太字 */
	color:#3f8c8c;
}
/* D:削除(Delete) */
.decorationD {
	color:#B0B4C3;
	text-decoration-line: line-through;
	text-decoration-color: #B0B4C3;
}
/* E:強調(Emphasis) */
.decorationE {
	color:#3f8c8c;
	font-style: normal;
	font-weight: bold;
	background: linear-gradient(transparent 60%, #bfff7f);
	border-radius:.3rem;
}
/* I:斜体(Italic) */
.decorationI {
	font-style: italic;
}
/* Q:引用(Quote) */
.decorationQ {
	padding: 1rem 1.6rem;
	margin: 2rem 0;
	color: #bf62b7;
	font-size:1.4rem;
	background: #ffffff;
	border-left: solid 5px #bf99bc;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.decorationQ::before,
.decorationQ::after {
	content: '';
}
.decorationQ + br {
	display: none;
}
.deco-cite{
	display:inline-block;
	font-size:1.2rem;
	font-style: italic;
	padding-top:1rem;
}
.deco-q{
	color:#6a67b8;
}
.deco-q:before{
	content: "「";
}
.deco-q:after{
	content: "」";
}
/* S:小文字(Small) */
.decorationS {
	font-size: 1.4rem;
}
/* T:極小文字(Tiny) */
.decorationT {
	font-size: 1.2rem;
}
/* U:下線(Underline) */
.decorationU {
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-decoration-color: #61b7bf;
}
/*div - margin*/
.deco-div{
	display:block;
	margin:1rem 0;
}
/*h1*/
.deco-h1{
	display:inline-block;
	color:#61b7bf;
	font-weight:bold;
	margin-top:.5rem;
}
.deco-h1:first-letter{
	color:#bf62b7;
	font-size:2rem;
	margin:0;
}
/*h2*/
.deco-h2{
	display:inline-block;
	color:#61b7bf;
	font-weight:bold;
	margin-top:.5rem;
}
.deco-h2:first-letter{
	color:#bf62b7;
	margin:0;
}
/*List*/
.deco-ul,.deco-ol{
	display:block;
	width:100%;
	padding-left:3.2rem;
}
.deco-ul .deco-li,.deco-ol .deco-li{
	display:block;
	position: relative;
	padding-left:1.6rem;
	margin:1rem 0;
}
.deco-ul .deco-ul,.deco-ul .deco-ol,.deco-ol .deco-ol,.deco-ol .deco-ul{
	margin:0;
}
.deco-ol .deco-li{
	counter-increment: num;
}
.deco-ol{
	counter-reset: num;
}
.deco-ul .deco-li:before {
	font-family: "bootstrap-icons";
	color: #bf62b7;
	content: "\F26A";
	position: absolute;
	text-align:right;
	width:1.6rem;
	height:1.6rem;
	top:.14rem;
	left:-.3rem;
}
.deco-ol .deco-li:before {
	display: inline-block;
	content: counter(num) ". ";
	position: absolute;
	color: #bf62b7;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:bold;
	text-align:right;
	width:3.2rem;
	height:1.6rem;
	top:.25rem;
	left:-1.8rem;
}
.deco-dl{
	display:block;
	width:100%;
	margin:1rem 0;
	padding-left:1.6rem;
}
.deco-dt{
	display:block;
	font-weight:bold;
}
.deco-dt:before{
	display:inline-block;
	font-family: "bootstrap-icons";
	color: #bf62b7;
	content: "\F155";
	text-align:left;
	width:2rem;
	height:1.6rem;
	top:.2rem;
	left:0;
}
.deco-dd{
	display:block;
	padding-left:2rem;
}
/* shadow:影付き文字 */
.deco-shadow{
	text-shadow: 1px 1px 2px #b0b0b0;
	font-weight:bold;
	color:#3f8c8c;
}
/* code:コード表示 */
.deco-code{
	display:inline-block;
	font-family: 'Inconsolata', monospace;
	background-color:#fffff0;
	border-radius:3px;
	padding:0 3px;
}
/* pre */
.deco-pre{
	display:block;
	position: relative;
	width:100%;
	line-height:1.4;
	white-space: pre;
	font-family: 'Inconsolata', monospace;
	background-color:#f0f8ff; 
	border-left: .3rem solid #93b6b8;
	padding:1rem 0 1rem 4.4rem;
	margin:1.6rem 0;
	overflow-x: auto;
	overflow-y:hidden;
}
.deco-pre:before {
	position: absolute;
	top:1rem;
	left:0;
	bottom:1rem;
	overflow: hidden;
	color:#93b6b8;
	content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A";
	border-right:.1rem solid #93b6b8;
	padding-right:1rem;
	width:2.8rem;
	text-align:right;
}
/*list*/
ul.decorationL,ol.decorationL{
	width:100%;
	padding-left:3.2rem;
	margin:1rem 0;
}
ul.decorationL ul.decorationL,ul.decorationL .ol.decorationL,ol.decorationL ol.decorationL,ol.decorationL ul.decorationL{
	margin:0;
}
ul.decorationL li,ol.decorationL li{
	position: relative;
	padding-left:1.6rem;
}
ol.decorationL li{
	list-style: none;
}
ol.decorationL{
	counter-reset: li;
}
ul.decorationL li::before {
	font-family: "bootstrap-icons";
	color: #67b5b7;
	content: "\F26A";
	position: absolute;
	text-align:right;
	width:1.6rem;
	height:1.6rem;
	top:.14rem;
	left:-.3rem;
}
ol.decorationL li::before {
	display: inline-block;
	position: absolute;
	color: #67b5b7;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:bold;
	text-align:right;
	width:3.2rem;
	height:1.6rem;
	top:.25rem;
	left:-1.8rem;
	counter-increment: li;
	content: counter(li)'. ';
}
dl.decorationL{
	width:100%;
	margin:1rem 0;
	padding-left:1.6rem;
}
dl.decorationL dt{
	font-weight:bold;
}
dl.decorationL dt::before{
	display:inline-block;
	font-family: "bootstrap-icons";
	color: #67b5b7;
	content: "\F155";
	text-align:left;
	width:2rem;
	height:1.6rem;
	top:.2rem;
	left:0;
}
dl.decorationL dd{
	display:block;
	padding-left:2rem;
}

/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼続きを読むリンク（ボタン） */		/* ※注：「続きを読む」機能は、JavaScriptが無効な閲覧環境では機能せず、その場合はボタンも表示されません。 */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▽ボタン枠の装飾(共通) */
.readmorebutton {
	display: inline-block;
	padding: 0px 8px;
	margin: 0 1px;
	border: 1px solid #61b7bf;
	border-radius: 7px;
}
/* ▽ボタン表面の装飾(共通) */
.readmorebutton:link,
.readmorebutton:visited {
	background-color: #61b7bf;
	color: #f0ffff;
	text-decoration: none;
}
/* ▽ボタンにマウスが載った際の装飾(共通) */
.readmorebutton:hover {
	background-color: #6680cc;
	color: #e5f7ff;
}
/* ▽開く（続きを読む）ボタン専用の装飾 */
.readmorebutton.readmoreopen {
	font-size: 14px;
}

/* ▽閉じる（畳む）ボタン専用の装飾 */
.readmorebutton.readmoreclose {
	font-size: 14px;
}
/* fuwaimg - モーダルウィンドウ表示プログラム用 */
img.embeddedimage{
	display:block;
	width:80%;
	max-width:300px;
	text-align:center;
	margin:.5em auto;
	height:auto;
	border-radius:1rem;
	box-shadow: rgba(0, 0, 0, 0.16) 0 .1rem .4rem;
}
/* ツイート用 */
blockquote.twitter-tweet {
	background-color: #f8f8f8;
	border: 1px dashed #ddd;
	border-radius: 9px;
	margin: 0.3em 0;
	font-size: 0.95em;
	color: #999;
	text-shadow: 1px 1px 1px #fff;
}
div.twitter-tweet {
	max-width:350px !important;
	width: 90% !important;
	margin-left: auto;
	margin-right: auto;
}
/* YouTube・ニコニコ動画用 */
span.embeddedmovie{
	display: block;
	width: 90%;
	max-width:500px;
	margin:1rem auto;
}
span.embeddedmovie span{
	position: relative;
	display:block;
	padding-bottom: calc(315 / 560 * 100%);
}
iframe.embeddedmovie,span.embeddednicovideo span iframe{
	position: absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}
/* Spotify用 */
span.embeddedmusic{
	display: block;
	max-width:300px;
	width: 90%;
	margin:1rem auto;
}
span.embeddedmusic span{
	position: relative;
	display:block;
	padding-bottom: 152px;
}
span.embeddedmusic span iframe{
	position: absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}
/*Instagram*/
.instagram-media{
	max-width:350px !important;
	width: 90% !important;
	margin:1rem auto !important;
}


span.date,span.title{
	display:block;
	font-size:90%;
	font-weight:bold;
	color:#61b7bf;
}
span.date,span.update{
	font-family: 'Josefin Sans', sans-serif;
}
span.date span{
	padding-left:.5em;
	font-size:80%;
}
span.update{
	display:block;
	font-size:80%;
	color:#61b7bf;
	text-align:right;
}
p.tegalog{
	font-size:70%;
	color:#61b7bf;
	text-align:right;
}
.archives{
	text-align:right;
	margin-top:1em;
}

/*フッター*/
footer{
	text-align:center;
	margin-top:3.2rem;
	margin-bottom:0.8rem;
}
footer ul{
	margin-bottom:3.2rem;
	display:flex;
	justify-content: center;
}
footer li{
	display:inline-block;
	padding:0 0.8rem;
}
footer p{
	margin-top:3.2rem;
	font-family: 'Josefin Sans', sans-serif;
	font-size:1.2rem;
}
.icon_round{
	border-radius:3px;
}
.img_filter{
	filter: grayscale(42%) hue-rotate(143deg);
}

	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	/* ▽[VIDEO:キャプション]URL記法で、キャプション付きで掲載される場合の外側要素 */
	figure.embeddedvideo {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column-reverse;
	}
		/* ▽[VIDEO:キャプション]URL記法で、キャプション付きで掲載される場合のキャプション部分 */
		.videotitle {
			text-align: center;
			background-color: #dcf3dc;
		}

	/* ▽[VIDEO]URL記法（または [VIDEO:キャプション]URL記法）で掲載されるvideo要素部分 */
	video.embeddedvideo {
		display: block;
		max-width: 500px;
		width: 90%;
		height: auto;
		margin:1rem auto;
	}
	p.fallbackmessage{
		display:none;
	}
	/* ---------------------- */
	/* ▼カード型リンクの装飾 */
	/* ---------------------- */
	.cardlink {
		display: inline-block;
		width: 90%;
		max-width: 500px;			/* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
		padding: 0 0.25em 0.5em 0;	/* 内側の余白量 */
		font-size: 1.2rem;			/* 文字サイズ */
		text-decoration: none;		/* リンク文字の下線を消す */
		vertical-align: middle;		/* 行内の上下方向では中央配置 */
		margin-left:5%;
		margin-right:5%;
	}

		/* ------------------------------------- */
		/* リンクカードの装飾(サイズS/L共通部分) */		/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
		/* ------------------------------------- */
		/* カード外枠 */
		.cardlinkbox {
			border: 1px solid #ccc;		/* 枠線 */
			border-radius: 7px;			/* 角丸 */
			background-color: white;	/* 背景色 */
			display: flex;				/* 内部レイアウトのFlexbox化 */
		}
		/* (マウスが載ったとき) */
		.cardlinkbox:hover {
			background-color: #f5fff5;	/* 背景色 */
			border-color: #8c8;			/* 枠線色 */
		}
			/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
			.cardlinkimage {
				background-image: linear-gradient(-30deg, #8a8, #e0f0e0);		/* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
				background-size: cover;					/* 背景画像で枠を埋める */
				background-position: center center;		/* 背景画像を中央に寄せる */
				background-repeat: no-repeat;			/* 背景画像を繰り返さない */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardlinktextbox {
				display: flex;				/* Flexbox化 */
				flex-direction: column;		/* 子要素を縦方向に並べる */
				padding: 0.5em 1em;			/* 内側の余白量 */
			}
				/* ▽リンクカードのテキスト枠内の3要素共通 */
				.cardlinktitle,
				.cardlinkdescription,
				.cardlinkurl {
					/* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
					display: -webkit-box;			/* -webkit-line-clampを使うために必要な記述1 ※A */
					-webkit-box-orient: vertical;	/* -webkit-line-clampを使うために必要な記述2 ※A */
					overflow: hidden;				/* 表示量を制限する場合に必須の記述 */
					/* ↓制限の仕様 */
					line-clamp: 1;				/* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
					-webkit-line-clamp: 1;		/* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
					text-overflow: ellipsis;	/* 省略記号(三点リーダー) */
				}
				/* リンクタイトル */
				.cardlinktitle {
					padding-bottom: 0.25em;		/* 内側下端の余白量 */
				}
				/* リンク概要文 */
				.cardlinkdescription {
					line-height:1.3;			/* 行の高さ */
					color:#555;					/* 文字色 */
					line-clamp: 2;				/* (既存指定の上書き) 最大2行まで見せる */
					-webkit-line-clamp: 2;		/* (既存指定の上書き) 最大2行まで見せる */
				}
				/* リンクドメイン */
				.cardlinkurl {
					color: #999;				/* 文字色 */
				}

		/* ----------------------------------- */
		/* リンクカードの装飾(サイズS用の追記) */		/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
		/* ----------------------------------- */
		.cardsize-S {
			flex-direction: row;				/* 画像とテキストは横に並べる(Flexbox) */
		}
			/* ▽リンクカード内の画像枠 */
			.cardsize-S .cardlinkimage {
				min-width: 100px;				/* 最小の横幅 */
				min-height: 100px;				/* 最小の高さ */
				border-radius: 6px 0 0 6px;		/* 左側だけ角丸 */
				flex-shrink: 0;					/* 枠サイズを自動縮小させない */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardsize-S .cardlinktextbox {
				border-left: 1px solid #ccc;	/* 左側の枠線 */
				justify-content:center;			/* Flexboxの上下方向での中央寄せ */
			}
				/* ▽リンクカードのテキスト枠内の3要素 */
				.cardsize-S .cardlinktitle { order: 2; }		/* タイトルは、2番目に表示 */
				.cardsize-S .cardlinkdescription { order: 3; }	/* 概要文　は、3番目に表示 */
				.cardsize-S .cardlinkurl { order: 1; }			/* ドメインは、1番上に表示 */

		/* ----------------------------------- */
		/* リンクカードの装飾(サイズL用の追記) */		/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
		/* ----------------------------------- */
		.cardsize-L {
			flex-direction: column;			/* 画像とテキストは縦に並べる(Flexbox) */
		}
			/* ▽リンクカード内の画像枠 */
			.cardsize-L .cardlinkimage {
				aspect-ratio: 1.91 / 1;		/* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
				width: 100%;				/* 横幅は枠最大に拡げる */
				height: auto;				/* 高さは自動計算 */
				border-radius: 6px 6px 0 0;	/* 上側だけ角丸 */
			}
			/* ▽リンクカード内のテキスト枠 */
			.cardsize-L .cardlinktextbox {
				border-top: 1px solid #ccc;	/* 上側の枠線 */
			}
				/* ▽リンクカードのテキスト枠内の3要素 */
				.cardsize-L .cardlinktitle { font-weight: bold; }			/* 太字 */
				.cardsize-L .cardlinkdescription { min-height: 2.5em; }		/* 内容量が少ない場合でも一定の高さを確保 */
				.cardsize-L .cardlinkurl {
					border-top: 1px solid #ddd;		/* 上側の枠線 */
					margin-top:0.5em;				/* 上側の枠線より上の余白量 */
					padding-top:0.5em;				/* 上側の枠線より下の余白量 */
					font-size:0.8rem;				/* 文字サイズ(小さめ) */
				}