@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Zen+Kaku+Gothic+New:wght@500&display=swap');

:root {
	--text:#333333;
	--menu-text:#ffffff;
	--link:#1dacff;
	--accent:#fffdab;
	--menu-background:#1dacff;
	--menu-hover-text:pink;
	--body-background:#ffffff;
}

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

html {
	font-size:62.5%;
	background-color:var(--body-background);
}

body{
	font-size:1.6rem;
	font-family: "Lato", "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
}

a, a:visited, a:hover, a:active {
	color:var(--link);
}

.container {
	width:100%;
	background-color:var(--container-background);
	padding-bottom:1px;
}

.container {
	min-height:100vh;
}

.menu {
	background-color:var(--menu-background);
	position:sticky;
	top:0;
	z-index:9999;
}


.menu nav ul {
	display:flex;
	justify-content:flex-end;
	margin:0;
}

.menu nav ul li a {
	display:block;
	padding:1.5rem 4rem;
	text-align:center;
	font-size:2rem;
	text-decoration:none;
	color:var(--menu-text);
}

.menu nav ul li a:hover {
	color:var(--menu-hover-text);
	transition : .5s;
}

header {

}

.main-img img{
	width:100%;
	height:auto;
	border-top-right-radius:2rem;
	border-top-left-radius:2rem;
}



main {
	width:70%;
	padding:8rem 0 6rem;
	margin:0 auto;
}

.onelogbox {
	border-bottom:1px solid var(--text);
	padding:4rem 0;
}

.onelogbox:first-of-type {
	padding-top:0;
}

.onelogbox:last-of-type {
	border:none;
}

.comment {
	margin-bottom:1rem;
	letter-spacing:0.1rem;
}

.date {
	text-align:right;	
}

.date p {
	font-size:1.4rem;
}

.cat-faq .onelogbox {
	border:none;
}

.cat-faq .date, .log-1 .date, .log-2 .date, .log-3 .date, .log-4 .date {
	display:none;
}

	.url {
		word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
	}

	/* ---------------------- */
	/* ▼カード型リンクの装飾 */
	/* ---------------------- */
	.cardlink {
		display: inline-block;
		width: 100%;
		padding: 0 0.25em 0.5em 0;	/* 内側の余白量 */
		font-size: 0.9rem;			/* 文字サイズ */
		text-decoration: none;		/* リンク文字の下線を消す */
		vertical-align: middle;		/* 行内の上下方向では中央配置 */
	}

		/* ------------------------------------- */
		/* リンクカードの装飾(サイズS/L共通部分) */		/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
		/* ------------------------------------- */
		/* カード外枠 */
		.cardlinkbox {
			border: 1px solid var(--text);		/* 枠線 */
			border-radius: 7px;			/* 角丸 */
			background-color: white;	/* 背景色 */
			display: flex;				/* 内部レイアウトのFlexbox化 */
		}
		/* (マウスが載ったとき) */
		.cardlinkbox:hover {
		}
			/* ▽リンクカード内の画像枠 (※読み込まれた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;
	-webkit-line-clamp: 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.75rem;				/* 文字サイズ(小さめ) */
				}

	/* ---------------------------------------------------- */
	/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
	/* ---------------------------------------------------- */
	/* B:太字(Bold) */
	.decorationB {
		font-weight: bold;		/* 太字 */
	}
	/* D:削除(Delete) */
	.decorationD {
		color: #888;	/* 文字色 */
		text-decoration-line: line-through;	/* 取り消し線 */
		text-decoration-color: red;			/* 線の色 */
	}
	/* E:強調(Emphasis) */
	.decorationE {
		color: var(--text);	/* 文字色 */
		font-style: normal;
		font-weight: bold;
		background:linear-gradient(transparent 60%, var(--accent) 60%);
		font-size:2rem;
		display:inline;
		margin-bottom:3rem;
	}
	/* I:斜体(Italic) */
	.decorationI {
		font-style: italic;		/* 斜体 */
	}
	/* Q:引用(Quote) */
	.decorationQ {
		margin: 1em 0.3em 1em 1em;		/* 外側の余白(上→右→下→左) */
		padding: 0.75em 0.5em;			/* 内側の余白(上下→左右) */
		border-left: 5px double #5c5;	/* 左端の枠線 */
		background-color: #efe;			/* 背景色 */
		font-size: 0.95em;				/* 文字サイズ */
		display: block;					/* ※Ver 2.2.0以降必須の記述 */
	}
	.decorationQ::before,
	.decorationQ::after {
		content: '';			/* 標準で付加されてしまう引用符を無効にする */
	}
	.decorationQ + br {
		display: none;	/* 引用直後の改行を無効化する */
	}
	/* S:小文字(Small) */
	.decorationS {
		font-size: 0.8em;	/* 文字サイズ */
	}
	/* T:極小文字(Tiny) */
	.decorationT {
		font-size: 0.6em;	/* 文字サイズ */
	}
	/* U:下線(Underline) */
	.decorationU {
		text-decoration-line: underline;	/* 線位置 */
		text-decoration-style: double;		/* 線種類 */
		text-decoration-color: lime;		/* 線配色 */
	}
	.decoration1 {
		text-align:center;
	}
	.decoration2 {
		border-bottom:2px solid #ffccdb;
	}


	/* -------------- */
	/* ▼埋め込み画像 */
	/* -------------- */
	/* ▽画像ボックス(FIGオプション指定時) */
	.embeddedpictbox {
		margin: 0;					/* 外側の余白を消す */
		padding: 0;					/* 内側の余白を消す */
		display: inline-table;		/* 横方向に並べる */
		border-collapse: collapse;	/* displayをinline-tableにする場合に必要 */
		border: 1px solid #e0eee0;	/* 枠線 */
		vertical-align: top;		/* 行内では上に寄せる */
	}
		/* キャプション */
		.embeddedpictbox figcaption {
			display: table-caption;		/* キャプションが画像幅から外に出ないようにする */
			caption-side: bottom;		/* キャプションの位置(上にしたければtop) */
			font-size: 0.8em;			/* 文字サイズ */
			text-align: center;			/* センタリング */
			background-color: #e0eee0;	/* 背景色 */
		}

		/* 画像ボックスに含まれる画像 */
		.embeddedpictbox img {
			vertical-align: middle;
		}

	/* ▽画像リンク */
	.imagelink {
		display: inline-block;
		line-height: 1;				/* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
		vertical-align: inherit;	/* 同上 */
	}

	/* ▽画像そのもの */
	.embeddedimage {
		max-width: 100%;	/* 横方向にはみ出ないようにする */
		max-height: 240px;	/* 大きくなりすぎないようにする */
		width: auto;	/* 画像サイズを固定したい場合はここに具体的なpx値を指定するのがお勧め */
		height: auto;	/* 高さを固定したい場合を除いて、ここは auto のままにするのがお勧め */
	}

	/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを2重に指定しています。) */
	figure.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	.imagelink.nsfw {
		overflow: hidden;	/* ぼかし領域がfigureのボックスからはみ出ないようにする */
	}
	img.nsfw {
		filter: blur(9px);	/* ぼかす */
	}

	/* -------------- */
	/* ▼埋め込み動画 */
	/* -------------- */
	/* ▽[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: inline-block;
		max-width: 100%;
		width: auto;
		height: auto;
	}

	/* YouTube埋め込み */
	@media all and (max-width: 600px) {
		.embeddedmovie {
			display: inline-block;
			max-width: 100%;	/* はみ出ないようにする */
			width: auto;
			height: auto;
		}
	}

	/* --------------- */
	/* ▼埋め込みTweet */	/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。(ただし横幅を制限することはできます。→後述) */
	/* --------------- */
	blockquote.twitter-tweet {
		background-color: #f8f8f8;
		border: 1px dashed #ddd;
		border-radius: 9px;
		margin: 0.3em 0;
		padding: 1em;
		font-size: 0.95em;
		color: #999;
		text-shadow: 1px 1px 1px #fff;
	}

	/* ▼埋め込みツイートの横幅を強制的に制限 */
	div.twitter-tweet {
		max-width: 350px !important;
	}

	
.readmorebutton {
	display:block;
	width:100%;
	padding:1rem 2rem;
	margin: 0 0 1rem;
	border: 1px solid var(--link);
	border-radius: 0.8rem;
	text-align:center;
	text-decoration:none;
	color:var(--link);	
}


.foldswitch {
	list-style:none;
	}

details{
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  margin-bottom:3rem;
  border:1px solid black;
}
summary:after {
  content: "＋";
  font-size:2rem;
  font-weight:bold;
  margin-left:auto;
}
details[open] summary:after {
  content: "ー";
}
/* Q */
summary {
  line-height: 1.6em;
  display: flex;
  gap: 1em;
  padding: 1rem 2rem 1rem 1.5rem;
  align-items:center;
}
summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "Q";
  color:white;
  font-weight:bold;
  background-color:var(--link);
  padding:0.5rem;
  width:4rem;
  height:4rem;
  border-radius:50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* A */
.foldedarea {
  overflow: hidden;
  margin: 0;
  display: flex;
  gap: 1em;
  padding: 1rem 4rem 3rem 1.5rem;
}
.foldedarea:before {
  content: "A";
  color:white;
  font-weight:bold;
  background-color:var(--link);
  padding:0.5rem;
  width:4rem;
  height:4rem;
  border-radius:50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* オープン時にアニメーションを設定 */
details[open] .foldedarea {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
footer {
	text-align:center;
}
.poweredby {  }


@media screen and (max-width:768px) {
	body {
		background-color:var(--container-background;)
	}
	.container {
		width:100%;
		margin:0;
		border-radius:0;
	}
	.menu nav ul {
		justify-content:space-around;
	}
	.menu nav ul li {
		width:calc (100% / 3)
	}
	.menu nav ul li a {
		padding:1.5rem 0rem;	
	}
	.main-img img {
		border-radius:0;
	}
	main {
		width:100%;
		padding:8rem 4rem 0;
	}	
}

@media screen and (max-width:500px) {
	.menu nav ul li a {
		font-size:1.8rem;
	}
	main {
		padding:8rem 2rem 0;
	}
}