@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{
	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;
	}