@charset "utf-8";

/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/

/*~~*/

#jsmaker  .process:before {
	content: "処理内容："
}

#jsmaker .jsmaker-body li {
	margin-top: 25px; padding-top: 25px;
	border-top: 1px solid #ccc;
}
#jsmaker .jsmaker-body li:first-child {
	margin-top: 0px; padding-top: 0px;
	border-top: none;
}

/*~~*/

#jsmaker .jsmaker-body .date span {
	font-size: 1.2rem; line-height: 100%;
}

#jsmaker .jsmaker-body .framework {
	width: 100%;
	padding: 5px 15px;
	border-radius: 20px; background: rgba(0,0,0,0.7);
	font-size: 1.2rem; line-height: 140%; color: #FFF; text-align: center;
}

#jsmaker .jsmaker-body summary {
	display: inline-block;
}

#jsmaker .jsmaker-body summary:hover {
	cursor: pointer;
}

#jsmaker .jsmaker-body .source pre {
	position: relative;
	margin: 10px 0 15px;
}

#jsmaker .jsmaker-body .source pre:before {
	position: absolute; content: "\025bc"; bottom: -16px; left: 12px;
	font-size: 2.4rem; line-height: 100%; color: #ebebeb;
	transform: scale(1, 1);
}

#jsmaker .jsmaker-body .source code {
	display: block; margin: 0; line-height: 1.2;
}

#jsmaker .jsmaker-body .source code + code {
	margin-top: 10px;
}

#jsmaker .jsmaker-body .source code.sourcehtml:before {
	content: "HTML"; font-size: 1.2rem; line-height: 100%;  color: #999;
	margin-bottom: 7px; padding-bottom: 5px;
	border-bottom: 1px dotted #999;
	display: block;
}

#jsmaker .jsmaker-body .source code.sourcecss:before {
	content: "CSS"; font-size: 1.2rem; line-height: 100%; color: #999;
	margin-bottom: 7px; padding-bottom: 5px;
	border-bottom: 1px dotted #999;
	display: block;
}

#jsmaker .jsmaker-body .html {
	font-size: 1.2rem; line-height:16px; color: #fff;
	background: rgba(0,0,0,0.7);
}
#jsmaker .jsmaker-body .html:has(> p) {
	background: #ff0033;
}

#jsmaker .jsmaker-body .js,
#jsmaker .jsmaker-body .css {
	margin-top: 15px; padding: 10px; border: 1px solid #ccc; position: relative;
	font-size: 1.4rem; line-height:16px; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;
}

#jsmaker .jsmaker-body pre.js:before {
	padding: 0 5px; background: #fff; font-size: 1.2rem; color: #ccc;
	content: "javascript"; position: absolute; transform: translateY(-21px);
}

#jsmaker .jsmaker-body pre.css:before {
	padding: 0 5px; background: #fff; font-size: 1.2rem; color: #ccc;
	content: "css"; position: absolute; transform: translateY(-21px);
}

#jsmaker .jsmaker-body pre code {
	font-size: 1.4rem; line-height:140%;
	display: block;
}

/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/

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

#jsmaker .jsmaker-body .framework {
	margin-bottom: 10px;
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}


@media screen and (min-width: 769px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

#jsmaker .jsmaker-body li > div {
	display: grid;
	grid-template-columns: 1fr 110px;
	grid-template-rows: auto auto;
	/**/
	.name {
		grid-area: 1 / 1 / 2 / 2;
	}
	.process {
		grid-area: 2 / 1 / 3 / 2;
	}
	.info {
		grid-area: 1 / 2 / 3 / 3;
	}

#jsmaker .jsmaker-body pre {
	font-size: 1.4rem; line-height:18px;
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}

/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/