@charset "utf-8";
/*************************************************************
 *
 * Copyright (c) 2022 ysrock Co., Ltd.	<info@ysrock.co.jp>
 * Copyright (c) 2022 Yasuo Sugano	<sugano@ysrock.co.jp>
 *
 * Version	: 1.0.0
 * Update	: 2022.09.08
 *
 *************************************************************/

body{
	background-color:#e1e1e1;
	padding:20px;
}



/**************************************************
 *
 * プレビュー
 *
 **************************************************/
body > div.preview_wrap{
	width:100%;
	background-color:#fff;
}
body > div.preview_wrap > div.headline{
	position:relative;
	border-top-style:solid;
	border-top-color:#dee5ec;
	background-color:#f4f6f9;
	font-weight:bold;
	line-height:1.2em;
	color:#777;
}
body > div.preview_wrap > div.headline > button{
	position:absolute;
	border-style:solid;
	border-color:#545b62;
	border-radius:0.25rem;
	background-color:#5a6268;
	color:#fff;
	line-height:1.6em;
	cursor:pointer;
	user-select:none;
}
body > div.preview_wrap > div.preview{
	overflow-x:auto;
	white-space:nowrap;
}

@media print, screen and (min-width: 1025px){
	body > div.preview_wrap{
		margin-bottom:50px;
		box-shadow:0 2px 2px 0 rgb(0 0 0 / 25%);
	}
	body > div.preview_wrap > div.headline{
		border-top-width:1px;
		padding:10px 180px 10px 10px;
		font-size:22px;
	}
	body > div.preview_wrap > div.headline > button{
		right:10px;
		border-width:1px;
		padding-left:10px;
		padding-right:10px;
		font-size:16px;
	}
	body > div.preview_wrap > div.preview{
		padding:10px;
	}
}
@media print, screen and (min-width: 641px) and (max-width: 1024px){
	/* px/8 */

	body > div.preview_wrap{
		margin-bottom:6.25vw;
		box-shadow:0 0.25vw 0.25vw 0 rgb(0 0 0 / 25%);
	}
	body > div.preview_wrap > div.headline{
		border-top-width:0.125vw;
		padding:1.25vw 21vw 1.25vw 1.25vw;
		font-size:3vw;
	}
	body > div.preview_wrap > div.headline > button{
		right:1.25vw;
		top:1vw;
		border-width:0.125vw;
		padding-left:1.25vw;
		padding-right:1.25vw;
		font-size:2vw;
	}
	body > div.preview_wrap > div.preview{
		padding:1.25vw;
	}
}
@media screen and (max-width: 640px){
	/* px/4 */

	body > div.preview_wrap{
		margin-bottom:12.5vw;
		box-shadow:0 0.5vw 0.5vw 0 rgb(0 0 0 / 25%);
	}
	body > div.preview_wrap > div.headline{
		border-top-width:0.25vw;
		padding:2.5vw 32vw 2.5vw 2.5vw;
		font-size:5.5vw;
	}
	body > div.preview_wrap > div.headline > button{
		right:2.5vw;
		top:2vw;
		border-width:0.25vw;
		padding-left:2.5vw;
		padding-right:2.5vw;
		font-size:3vw;
	}
	body > div.preview_wrap > div.preview{
		padding:2.5vw;
	}
}

/********** END プレビュー ********************/



/**************************************************
 *
 * ポップアップでソースコードを表示
 *
 **************************************************/
body.popup{
	overflow:hidden;
}
body.popup > div.sourcePopup{
	display:block;
}
body > div.sourcePopup{
	display:none;
	position:fixed;
	top:0;
	left:0;
	z-index:11;
	width:100vw;
	height:100vh;
}
body > div.sourcePopup::before{
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-color:#000;
	opacity:.5;
}

body > div.sourcePopup > div.wrap{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	overflow-y:scroll;
}
body > div.sourcePopup > div.wrap > div.close{
	position:relative;
	max-width:800px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	text-align:right;
}
body > div.sourcePopup > div.wrap > div.close > span{
	position:absolute;
	right:0;
	display:inline-block;
	width:50px;
	height:50px;
	cursor:pointer;
}
body > div.sourcePopup > div.wrap > div.close > span::before,
body > div.sourcePopup > div.wrap > div.close > span::after{
	content:"";
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	width:30px;
	height:4px;
	background-color:#fff;
	transform:rotate(45deg);
}
body > div.sourcePopup > div.wrap > div.close > span::after{
	transform:rotate(-45deg);
}

body > div.sourcePopup > div.wrap > div.window{
	position:relative;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
	background-color:#fff;
	border:1px solid rgba(0, 0, 0, .2);
	border-radius:.3rem;
}

body > div.sourcePopup > div.wrap > div.window > textarea{
	width:100%;
	height:800px;
	overflow:auto;
}

/********** END ポップアップでソースコードを表示 ********************/






/**************************************************
 *
 * テンプレート
 *
 **************************************************/

@media print, screen and (min-width: 1025px){
}
@media print, screen and (min-width: 641px) and (max-width: 1024px){
}
@media screen and (max-width: 640px){
}
/********** END テンプレート ********************/