@charset "utf-8";

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

#mangamaker .mangamaker-body summary {
	padding: 5px 0;
}

#mangamaker .mangamaker-body summary span:before {
	content: "マンガ原稿"
}

/*
comp:composition（構成）
*/
#mangamaker .mangamaker-body .comp > div {
	margin-top: 10px;
}

#mangamaker .mangamaker-body .comp dd {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"num"
		"serif"
		"sfx"
		"scene";
	gap: 1px;
	padding: 5px;
	border-top: 1px solid #000;
}
#mangamaker .mangamaker-body .comp dd:first-child {
	border-top: none;
}

#mangamaker .mangamaker-body .comp dd .num {
	grid-area: num;
}

#mangamaker .mangamaker-body .comp dd .serif,
#mangamaker .mangamaker-body .comp dd .sfx,
#mangamaker .mangamaker-body .comp dd .scene {
	display: flex;
	min-width: 0;
	width: 100%;
	padding: 10px 0;
}

#mangamaker .mangamaker-body .comp dd .serif {
	grid-area: serif;
}
#mangamaker .mangamaker-body .comp dd .serif:before {
	content: "セリフ：";
	width: 5rem;
	flex: 0 0 5rem;
	font-size: 1.2rem;
	color: #666;
}

#mangamaker .mangamaker-body .comp dd .sfx {
	grid-area: sfx;
	border-top: 1px dotted #000;
}
#mangamaker .mangamaker-body .comp dd .sfx:before {
	content: "効果音：";
	width: 5rem;
	flex: 0 0 5rem;
	font-size: 1.2rem;
	color: #666;
}

#mangamaker .mangamaker-body .comp dd .scene {
	grid-area: scene;
	border-top: 1px dotted #000;
}
#mangamaker .mangamaker-body .comp dd .scene:before {
	content: "シーン：";
	width: 5rem;
	flex: 0 0 5rem;
	font-size: 1.2rem;
	color: #666;
}

/*~連番~*/

#mangamaker .mangamaker-body .comp {
	counter-reset: scene;
}

#mangamaker .mangamaker-body .comp dd {
	counter-increment: scene;
}

#mangamaker .mangamaker-body .comp dd .num::before {
	content: "SCENE" counter(scene, decimal-leading-zero);
	font-size: 1.2rem;
}

/*~~*/

#mangamaker .mangamaker-body .asset > div {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#mangamaker .mangamaker-body .asset .name {
	margin-top: 5px;
	text-align: center;
}

#mangamaker .mangamaker-body .asset .name + .prof {
	margin-top: 2px;
}

/*~~*/



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

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

/*
□・10・□
*/
#mangamaker .mangamaker-body .asset dd {
	width: calc((100% - 10px) / 2);
}

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

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

#mangamaker .mangamaker-body .comp dd {
	display: grid;
	grid-template-columns: 7rem 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"num serif"
		"num sfx"
		"num scene";
	gap: 1px;
	padding: 5px;
	border-top: 1px solid #000;
}

#mangamaker .mangamaker-body .comp dd .num {
	border-right: 1px solid #000;
}

#mangamaker .mangamaker-body .comp dd .serif,
#mangamaker .mangamaker-body .comp dd .sfx,
#mangamaker .mangamaker-body .comp dd .scene {
	padding: 10px;
}


/*
□・10・□・10・□・10・□・10・□
*/
#mangamaker .mangamaker-body .asset dd {
	width: calc((100% - 40px) / 5);
}

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

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