@charset "UTF-8";
// ▽ Bootstrap
/*Common*/
.fade{transition: opacity 0.15s linear;}
.fade:not(.show){opacity: 0;}
.collapse:not(.show){
	display: none;
}
.collapsing{
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}
.tab-pane {
	display: none;
}
.tab-pane.active {
	display: block;
}
.tooltip .arrow,
.popover .arrow {
	position: absolute;
}

// modal
// --------------------------------------------------
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	outline: 0;
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: rgba(0, 0, 0, 0.7);
}

// Dropdown menus
// --------------------------------------------------
.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
	width: fit-content;
  //min-width: 160px;
  //min-width: 10rem;
  //padding: 0.5rem 0;
  //margin: 0.125rem 0 0;
  //font-size: 1rem;
  //color: #212529;
  //text-align: left;
  //list-style: none;
  //background-color: #fff;
  //background-clip: padding-box;
  //border: 1px solid rgba(0, 0, 0, 0.15);
  //border-radius: 0.25rem;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
.position-static{
	position: static;
}
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  //margin-bottom: 0.125rem;
}
.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  //margin-left: 0.125rem;
}
.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  //margin-right: 0.125rem;
}
.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}
.dropdown-menu.show {
  display: block;
}
// △ Bootstrap

/*! Yaku Han JP v3.2.0 (OFL-1.1 AND MIT) by Qrac */
/*! Type: YakuHanJP - Based on Noto Sans CJK JP */
@font-face {
	font-family: "YakuHanJP";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/YakuHanJP/YakuHanJP-Regular.eot");
	src: url("../fonts/YakuHanJP/YakuHanJP-Regular.woff2") format("woff2"), url("../YakuHanJP/YakuHanJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "YakuHanJP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/YakuHanJP/YakuHanJP-Bold.eot");
  src: url("../fonts/YakuHanJP/YakuHanJP-Bold.woff2") format("woff2"), url("../YakuHanJP/YakuHanJP-Bold.woff") format("woff");
}

@font-face {
	font-family: "linefont1";
	src: url("../fonts/linefont1.woff2") format("woff2");
}

/*########################################
         VARIABLE
########################################*/
$sm: "(max-width: 699px)";
$lg: "(min-width: 700px)";
//$fontfamily:  YakuHanJP, メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'MS Pゴシック', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;


:root{
	--grad-1: radial-gradient(73.4% 100.98% at 95.54% 95.05%, rgba(255, 156, 65, 0.78) 0%, rgba(255, 168, 88, 0) 100%), linear-gradient(197.37deg, #FFF0A4 -0.38%, rgba(255, 240, 164, 0) 101.89%), radial-gradient(58.85% 73.83% at 9.82% 3.13%, rgba(49, 132, 255, 0.8) 0%, rgba(56, 75, 247, 0.208) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(117.39deg, #3E9EF6 3.91%, rgba(238, 43, 183, 0.33) 37.48%, rgba(246, 62, 106, 0) 73.98%), linear-gradient(306.53deg, #FFAADD 19.83%, rgba(255, 170, 221, 0) 97.33%);
	--grad-2: linear-gradient(180deg, #341D65 0%, rgba(52, 29, 101, 0) 100%), radial-gradient(94.51% 124.88% at 94.32% 94.43%, rgba(65, 244, 255, 0.78) 0%, rgba(128, 217, 255, 0.78) 46.52%, rgba(65, 198, 255, 0) 100%), linear-gradient(41deg, #FFFCE6 4.33%, rgba(255, 252, 230, 0) 73.7%);
	--font-family-base: linefont1, var(--font-family-add, 'メイリオ'), メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/*########################################
         KEYFRAMES
########################################*/
@keyframes shake3 {
	0% { transform: rotate3d(0, 0, 1, 0); }
	25% { transform: rotate3d(0, 0, 1, -5deg); }
	50% { transform: rotate3d(0, 0, 1, 0); }
	75% { transform: rotate3d(0, 0, 1, 5deg); }
	100% { transform: rotate3d(0, 0, 1, 0); }
}
@keyframes shake4 {
	0%   {transform: translate( 0px, 0px);}
	40%  {transform: translate( 0px, 0px);}
	60%  {transform: translate( 4px, 0px);}
	80%  {transform: translate(-4px, 0px);}
	100% {transform: translate( 0px, 0px);}
}
@keyframes heart_beat1 {
	0%  {transform: scale(1);}
	7% {transform: scale(1.2);}
	14% {transform: scale(1);}
	21% {transform: scale(1.2);}
	35% {transform: scale(1);}
}
@keyframes paper_plane {
	0% { color: #fff;transform: translate3d(0, 0, 0); }
	20% {color: #07e4c1;}
	40% { opacity: 1; }
	70% { opacity: 0; transform: translate3d(120px, -200px, 0); }
	90% { opacity: 0;color: #fff;transform: translate3d(0, 0, 0); }
	100% { opacity: 1; }
}

@keyframes blink {
	0% {opacity: 1}
	50% {opacity: 1}
	51% {opacity: 0}
	100% {opacity: 0}
}

/*########################################
         MIXIN
########################################*/
//@import url('https://fonts.googleapis.com/css?family=Pacifico');

/*########################################
         HELPER
########################################*/
.clearfix:after{content: " ";display: block;clear: both;}
:root:root:root .hide{display: none;}
@media(hover: hover){.opacity:hover{opacity: 0.6;cursor: pointer;}}
.opacity{transition: opacity 0.2s;}
.justify{text-align: justify;text-justify: inter-ideograph;}
.fleft{float: left;}
.fcenter{margin-left: auto;margin-right: auto;}
.fright{float: right;}
.tleft{text-align: left;}
.tcenter{text-align: center;}
.tright{text-align: right;}
.bgcover{background-size: cover;background-position: center;background-repeat: no-repeat;}
.bgcontain{background-size: contain;background-position: center;background-repeat: no-repeat;}
.vtop{vertical-align: top;}
.vmiddle{vertical-align: middle;}
.vbottom{vertical-align: bottom;}
.dtable{display: table;width: 100%;}
.dtable>*{display: table-cell;}
.dflex{display: flex;flex-wrap: wrap;align-items: flex-start;align-content: flex-start;}
.dflex>.flex{flex: 1;}
.dflex>.vtop{align-self: start;}
.dflex>.vmiddle{align-self: center;}
.dflex>.vbottom{align-self: end;}

[class*=btn_gradation]{
	border: none;
	outline: none;
	color: #fff;
	transition: box-shadow 0.5s, opacity 0.5s !important;
	&:hover{
		box-shadow: 0 0px 0px 0 rgba(0,0,0,0.16);
		opacity: 0.8;
	}
}
.btn_gradation_1{
	//background-image: linear-gradient(140deg, #17ead9 ,#6078ea);
	//background:linear-gradient(140deg, #FF57B9 0%,#A704FD 100%);
	background:linear-gradient(315deg, #f7b42c 0%, #fc575e 74%);
}

/*########################################
         CUSTOM-THEME
########################################*/
/*========================================
         共通（要素）
========================================*/
*,
*:before,
*:after{
	box-sizing:border-box;
}

html{
	height: 100%;
}

body{
	overflow-y: scroll;
	font-family: var(--font-family-base);
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: #333;
	height: 100%;
	font-size: 12px;
	text-align: left;
	@media #{$lg}{
		//min-width: 800px;
	}
	//@media #{$sm}{
	//	font-size: 14px;
	//}
}

textarea{
	resize: vertical;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

noscript p{
	display: block;
	padding: 10px;
	background: #000;
	color: #FFF;
	text-align: center;
	line-height: 1.8;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}

a:not(.unlink){
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6{line-height: inherit;}

	/*========================================
					 共通（ID名・クラス名）
	========================================*/
.page_wrapper{
}

.page_inner{
}

.bold{
	font-weight: bold;
}

.theme_light{
	background-color: #f3f3f3;
	color: #333;
}

.theme_dark{
	background-color: #37474F;
	color: #e6f1f5;
}

.mark_light{
	color: #546E7A;
	background-color: #CFD8DC;
	display: inline-block;
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2.1em;
	//border-radius: 999px;
	border-radius: 999px;
}

.js_message:empty{
	display: none !important;
}
//エラー表示
.js_message.error{
	font-weight: bold;
	color: red;
}

.hr_light{
	border: 1px solid #ddd;
	border-width: 1px 0 0;
}

.depth_1{box-shadow: 0 4px 5px rgba(0,0,0,0.05), 0 1px 5px rgba(0,0,0,0.05);}
.depth_2{box-shadow: 0 12px 15px rgba(0,0,0,0.05), 0 4px 15px rgba(0,0,0,0.05);}
.depth_3{box-shadow: 0 24px 30px rgba(0,0,0,0.05), 0 6px 30px rgba(0,0,0,0.05);}
.depth_4{box-shadow: 0 36px 45px rgba(0,0,0,0.05), 0 9px 45px rgba(0,0,0,0.05);}
.depth_5{box-shadow: 0 48px 60px rgba(0,0,0,0.05), 0 12px 60px rgba(0,0,0,0.05);}

.color_1{color: #007aff;}
.color_2{color: #ff3b30;}
.color_3{color: #ff9500;}
.color_4{color: #4cd964;}
.color_5{color: #9E9E9E;}
.bgcolor_1{background-color: #007aff;}
.bgcolor_2{background-color: #ff3b30;}
.bgcolor_3{background-color: #ff9500;}
.bgcolor_4{background-color: #4cd964;}
.bgcolor_5{background-color: #9E9E9E;}

.max_1{max-width: 100px;margin-left: auto;margin-right: auto;}
.max_2{max-width: 200px;margin-left: auto;margin-right: auto;}
.max_3{max-width: 300px;margin-left: auto;margin-right: auto;}
.max_4{max-width: 400px;margin-left: auto;margin-right: auto;}
.max_5{max-width: 500px;margin-left: auto;margin-right: auto;}
.max_6{max-width: 600px;margin-left: auto;margin-right: auto;}
.max_7{max-width: 700px;margin-left: auto;margin-right: auto;}
.max_8{max-width: 800px;margin-left: auto;margin-right: auto;}
.max_9{max-width: 900px;margin-left: auto;margin-right: auto;}

.blob_1{background-color: currentColor;border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%;}
.blob_2{background-color: currentColor;border-radius: 53% 47% 34% 66% / 63% 46% 54% 37%;}
.blob_3{background-color: currentColor;border-radius: 37% 63% 56% 44% / 49% 56% 44% 51%;}
.blob_4{background-color: currentColor;border-radius: 63% 37% 37% 63% / 43% 37% 63% 57%;}
.blob_5{background-color: currentColor;border-radius: 49% 51% 48% 52% / 57% 44% 56% 43%;}

.title_1{
	//opacity: 0.8;
	font-weight: bold;
	color: #546e7a;
	//color: #ff3c54;
	//letter-spacing: 0.05em;
	margin-bottom: 10px;
	font-size: 19px;
}

.title_3{
	opacity: 0.8;
	font-weight: bold;
	padding-left: 2px;
	padding-bottom: 2px;
	display: inline-block;
	color: #546e7a;
}

.dropzone{
	border: 1px dashed #aaa;
	display: block;
	text-align: center;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 11px;
	background-color: #fff;
	cursor: pointer;
}

.dropzone.state-over{
	background-color: #ddd;
}

.handle_bg{
	background-color: #fcfcfc;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23474747' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 4px 4px;
	//background-position: center;
	cursor: move;
}
.sortable-chosen .handle_bg{background-color: #ffbc38;}

.app_toast_wrapper{
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 10px;
	left: 10px;
}
.app_toast{
	position: absolute;
	top: -100px;
	right: 0px;
	background-color: #000;
	color: #fff;
	font-size: 11px;
	border-radius: 3px;
	display: inline-block;
	padding: 3px 6px;
	&[role]{
		transition: 0.4s;
		top: 10px;
	}
}

.j_btn_primary{
	--j_btn_main_color: #0d9488;
	--j_btn_text_color: #fff;
	--j_btn_depth_color: #0f766e;
}
.j_btn_danger{
	--j_btn_main_color: #dc2626;
	--j_btn_depth_color: #b91c1c;
}

.mod_font_msp{
	font-family: 'MS Pゴシック', 'MS PGothic', メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic ProN', sans-serif;
}

.mod_noto_sans{
	font-family: "Noto Sans JP", sans-serif;
}

.mod_text_clip{
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mod_img_frame{
	position: relative;
	background-color: #eee;
	border-radius: 15px;
	//box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
	padding: 30px 10px 10px ;
	letter-spacing: 0;
	line-height: 1;
	&:before{
		content: '●●●';
		position: absolute;
		top: 9px;
		left: 20px;
		background-image: linear-gradient(90deg, rgba(255,96,88,1) 0%, rgba(255,190,48,1) 56%, rgba(36,199,63,1) 100%);
		font-size: 12px;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	&:after{
		content: 'www.net';
		position: absolute;
		top: 7px;
		left: 70px;
		right: 30px;
		background-color: #fff;
		border-radius: 99px;
		color: #ccc;
		font-size: 11px;
		text-align: center;
		padding: 1px 0 4px;
	}
	img{
		border-radius: 10px;
		//border: 1px solid #ccc;
	}
}

//ページネーション
//.pagination{
//	display: inline-flex;
//	//padding-left: 0;
//	li{
//		//display: inline;
//		> *{
//			padding: 5px 10px;
//			font-size: 12px;
//			line-height: 1.5;
//			float: left;
//			margin-left: -1px;
//			//color: #337ab7;
//			background-color: #fff;
//			border: 1px solid #ddd;
//		}
//	}
//	li.disabled a{
//		cursor: default;
//	}
//	li:not(.disabled):not(.active) a:hover{
//		background-color: #f1f1f1;
//	}
//	.disabled{
//		color: #bbb;
//	}
//	.active > *{
//		color: #fff;
//		background-color: #546e7a;
//	}
//	//.first,
//	//.last{
//	//	display: none;
//	//}
//}
.pagination_1{
	display: flex;
	//flex-wrap: wrap;
	gap: 5px 5px;
	li{
		&.active{
			span{
				background-color: #778df1;
				color: #fff;
			}
		}
		.current:is(.prev, .next){
			opacity: 0.3;
		}
		& > *{
			display: inline-block;
			border-radius: 2px;
			min-width: 30px;
			padding: 0px 4px;
			text-align: center;
		}
		:is(a, .clickable):hover{
			@media(hover: hover){
				background-color: #eee;
			}
		}
	}
	li:nth-of-type(3),
	li:nth-of-type(4),
	li:nth-of-type(5){
		flex-shrink: 10;
		overflow: hidden;
	}
	.ellipse{
		text-decoration: underline;
	}
}

:root:root:root:root:root .hide_sm{
	@media #{$sm}{
		display: none;
	}
}
:root:root:root:root:root .hide_lg{
	@media #{$lg}{
		display: none;
	}
}

#page_loader{background-color: rgba(255,255,255,.3);}
#page_loader:before{border-bottom-color: #777;}
#page_loader:after{content: none;}

//notie
.notie-element-half.notie-background-success{background-color: #333;}
.notie-element-half.notie-background-error{background-color: #bbb;}

.basic_panel{
	background-color: #fff;
	border-radius: 3px;
	position: relative;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	.panel_title{
		letter-spacing: 0.2em;
		//background-color: #546E7A;
		background-color: #6b7280;
		//background-image:linear-gradient(170deg, #b6b6b6 0%, #6b7785 100%);
		color: #fff;
		border-radius: 3px 3px 0 0;
		padding: 6px 10px 6px 10px;
		font-size: 0.96em;
		&.collapsed{
			border-radius: 3px;
		}
		.fa-times{
			margin-top: 0.1em;
			font-size: 1.3em;
			&:after {
				content: "";
				position: absolute;
				width: 35px;
				height: 32px;
				top: 0;
				right: 0;
			}
		}
		.fa-chevron-up{
			margin-top: 4px;
		}
		&.collapsed .fa-chevron-up:before{
			content: "\f078";
		}
	}
}
.lightcase-contentInner{
	.basic_panel{
		.panel_title{
			position: sticky;
			top: 0;
			z-index: 9;
		}
	}
	.panel_footer{
		border-top: 1px solid #ddd;
		background-color: #fff;
		position: sticky;
		bottom: 0;
		z-index: 9;
		border-radius: 0 0 3px 3px;
	}
}

//jexcel
.jexcel_content{
	letter-spacing: 0;
}

//sortable.js
.sortable-fallback{
	display: none;
}


.block_1{
	border: 1px solid #ddd;
	background-color: #fff;
	//border-radius: 5px;
}
.theme_dark .block_1{
	border: 1px solid #293135;
	background-color: #293135;
}

/* リスト */
.list_1{
	display: table;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

.list_1 > *{
	display: table-cell;
	vertical-align: middle;
}

.list_1 > *:nth-child(2){
	//padding-top: 5px;
	//padding-bottom: 5px;
}

.list_1 > *:nth-child(1),
.list_1 > *:nth-child(3){
	//width: 30px;
	//min-width: 30px;
	//text-align: center;
}

.list_1 .list_1{
	margin-left: 30px;
}

//ドロップダウン
.basic_dropdown.dropdown_menu{
	background-color: #fff;
	border-radius: 2px;
	border: 1px solid #eee;
	padding-top: 8px;
	padding-bottom: 8px;
	overflow: hidden;
	.list_1{
		padding-top: 8px;
		padding-bottom: 8px;
		padding-left: 15px;
	}
	.list_1:hover{
		background-color: #f4f4f4;
	}
	.active{
		background-color: #f4f4f4;
	}
	.item_bar{
		height: 1px;
		background-color: #e7e7e7;
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

[data-dds-s]:before{
	content: '▼';
	font-size: 10px;
	padding-right: 5px;
}
[data-dds-v]{
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 15px;
}

.service_menu{
	.detail_text{
		margin-top: 5px;
		display: none;
	}
}

//改行
.nl2br{
	white-space: pre-wrap;
}

/* ローダー ################ */
.page_loader{
	z-index: 999;
}

//AMFフォーム
form{
	.amf_message.amf_message_error{
		margin-top: 5px;
		color: #f44336;
		font-weight: bold;
	}

	.amf_message.amf_message_main{
		font-size: 13px;
		margin-top: 10px;
		padding: 10px 20px;
		border-radius: 3px;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	.amf_message_main.amf_message_error{
		color: #fff;
		background-color: #f44336;
	}

	.amf_message_main.amf_message_success{
		color: #fff;
		background-color: #2196F3;
	}

	.amf_loader{
		font-size: 11px;
	}
	
	.amf_mode_confirm .amf_mode_confirm_hide,
	.amf_mode_input .amf_mode_input_hide{
		display: none;
	}
}

//meeeee
.riot_meeeee{
	//background-color: #efefef;
	background-color: #fff;
	border-radius: 5px;
	//padding: 20px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;

	.receive_wrap{
		display: inline-block;
		vertical-align: bottom;
		margin-top: 16px;
		border: 2px solid #07e4c1;
		color: #07e4c1;
		border-radius: 100px;
		transition: width 0.5s ,height 0.5s, border-radius 0.3s, color 0.5s, border 0.5s;
		width: 104px;
		min-height: 104px;
		&.state_before{
		}
		&.state_after{
			width: 100%;
			border-radius: 4px;
			border: 2px solid #000;
			color: #333;
			.receive_btn{
				display: none;
			}
		}
		.received_contents{
			display: none;
		}
	}
	.receive_btn{
		height: 100px;
	}
	.next_wrap{
		margin-top: -11px;
		text-align: right;
		padding-right: 20px;
	}
	.next_btn{
		overflow: hidden;
		transition: width 0.5s;
		white-space: nowrap;
		display: inline-block;
		background-color: #fff;
		text-align: center;
		width: 104px;
		font-weight: bold;
		color: #07e4c1;
		&.state_close{
			width: 0%;
		}
	}
	.anime_beat{
		animation: heart_beat1 linear 2s 1s 9;
	}
	.anime_shake{
		transform-origin: bottom;
		animation: shake3 linear 0.6s infinite;
	}
	.anime_send{
		animation: paper_plane linear 1s;
	}
}

//TODO 一時的
[class*=st_table] tr>*{
	padding: 0.8em 0.7em;
}

/*========================================
         ヘッダー
========================================*/
.page_header{
	h1{
		//text-align: center;
	}
	.dtable{
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.title_slugs{
		font-size: 20px;
		color: #546e7a;
	}
	.common .title_slugs{
		display: none;
	}
	.no_common .on_text{
		font-size: 11px;
		display: inline-block;
		margin-left: 8px;
	}
	.no_common .title_tools{
		margin-left: -2px;
		display: inline-block;
		width: 55px;
		position: relative;
		top: -1px;
	}
}

.page_title{
	text-align: center;
	position: relative;
	&:before{
		content: ' ';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.85;
		background-image:linear-gradient(130deg, #17ead9 0%,#6078ea 100%);
	}
	h2{
	}
	.re_container{
		position: relative;
		
	}
	.description_area{
		color: #fff;
		@media #{$sm}{
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.menu_area{
		display: none !important; //TODO HTMLから消す
		position: absolute;
		top: 6px;
		right: 5%;
	}
	.to_menu{
		color: #fff;
		font-size: 22px;
	}
}

.header_dark{
	//background-color: rgba(0, 0, 0, 0.6);
}

/*========================================
         メインコンテンツ
========================================*/
.account_box{
	@media #{$lg}{
		z-index: 5;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
	}
	.box_inner1{
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 10px;
		@media #{$sm}{
			padding: 0 5px;
		}
	}
	.box_inner2{
		display: inline-block;
		background-color: #fff;
		padding: 4px 15px;
		border-radius: 0px 0px 8px 8px;
		font-size: 11px;
	}
}
.news_box{
	dt{
		font-weight: bold;
	}
}

.links_area{
	.re_row{
		margin-left: 0;
		margin-right: 0;
	}
	[class*="re_col_"]{
		padding-left: 0;
		padding-right: 0;
	}
	a{
		display: block;
		text-align: center;
		padding: 25px 5px;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
	}
}

//CLS対策 読みのチラツキ
[data-is="riot-main"]:empty ~ :is(div, footer),
#v-app:empty ~ :is(div, footer) {
	display: none;
}

/*----------------------------------------
         404
----------------------------------------*/
.not_found_404{
	text-align: center;
	.not_found_inner{
		display: inline-block;
		text-align: left;
		padding: 50px 10px 50px;
	}
	.status{
	}
	.title{
		margin-bottom: 1em;
	}
	.description{
	}
	.links_area .re_col_lg_6{
		margin-bottom: 20px;
		//margin-left: auto;
		//margin-right: auto;
	}
}

/*----------------------------------------
         top
----------------------------------------*/
.slug-island{
	.island{
		color: #ff3b30 ;
	}
	tr.unzip{
		color: #9E9E9E;
	}
}

/*----------------------------------------
         top
----------------------------------------*/
.slug-top{
	background-image: url('../img/bg.jpg');
	background-position: center top;
	background-repeat: repeat;

	.links_area{
		background-color: transparent;
	}
	.page_footer{
		background-color: transparent;
	}
}

/*----------------------------------------
         Account
----------------------------------------*/
.slug-account{
	a.login_btn{
		height: auto;
		line-height: 1.4;
		display: block;
		padding-top: 8px;
		padding-bottom: 6px;
	}
	a.login_btn .fa{
		font-size: 19px;
	}
}


/*----------------------------------------
         Pattern
----------------------------------------*/
.slug-pattern{
	//table.control{
	//	td{
	//		width: 30px;
	//		height: 30px;
	//		text-align: center;
	//		vertical-align: middle;
	//	}
	//	.td_btn{
	//		background: #00ACED;
	//		//background-clip: content-box;
	//		//padding: 1px;
	//		cursor: pointer;
	//		color: #fff;
	//		&:hover{
	//			background: #005a7a;
	//		}
	//	}
	//}
}

/*----------------------------------------
         Dive
----------------------------------------*/
.slug-dive{
	.input_grid,
	.delete_grid{
		min-height: 20px;
		position: relative;
		.item{
			position: relative;
			min-height: 30px;
			border: 1px solid #999;
			border-radius: 3px;
			background-color: rgba(255, 255, 255, 0.8);
		}
		.handle_bg{
			position: absolute;
			top: 2px;
			left: 2px;
			bottom: 2px;
			width: 15px;
			border: 1px solid #ccc;
			border-radius: 2px;
		}
		.item_inner{
			padding-left: 23px;
		}
	}
	.sortable-ghost{
		.item{
			background-color: rgba(255, 249, 188, 0.8);
			&>*{
				visibility: hidden;
			}
		}
	}
	[data-is="riot-elem-input"]{
		label{
			display: inline-block;
			margin-right: 15px;
		}
	}
	.item_edit{
		.title_3{
			color: red;
		}
	}
	.input_grid{
		background-image: url("../slugs/dive/img/grid_bg.png");
		background-size: 100% auto;
		
	}
}

/*----------------------------------------
         open peeps generator
----------------------------------------*/
.slug-peeps{
	.space_group_man{
		position: relative;
		div{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
		.space_head{
			//top: 10%;
		}
		.space_face{
			top: 39%;
			left: 33.7%;
			width: 62%;
		}
		.space_accessories{
			top: 51.4%;
			left: 11%;
			width: 82%;
		}
		.space_facial-hair{
			top: 71.8%;
			left: 26.4%;
			width: 59%;
		}
	}
	[data-pose="bust"]{
		.space_group_face{
			left: 27.5%;
			width: 57.3%;
		}
		.space_pose{
			top: 56%;
		}
	}
	[data-pose="sitting"]{
		.space_group_face{
			left: 27%;
			width: 30%;
		}
		.space_pose{
			top: 29%;
		}
	}
	[data-pose="standing"]{
		.space_group_face{
			left:32%;
			width: 28.8%;
		}
		.space_pose{
			top: 28%;
		}
	}
}
/*----------------------------------------
         gnavi
----------------------------------------*/
.slug-gnavi.modal-open{overflow: hidden;}
.slug-gnavi{
	#map{
		//height: calc(100% - 200px);
		//height: 600px;
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.modal-dialog{
		max-width: 950px;
		margin: 10px auto;
	}
	
	//検索フォーム
	.search_form{
		[class*='col-']{
			margin-top: 10px;
		}
	}

	//結果表示
	.result{
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #ccc;
	}

	.menu{
		position: fixed;
		top: 9px;
		left: 5px;
		//.dropdown-menu {
		//	right: 0;
		//	left: auto;
		//}
	}


	//検索
	.area_category{

		.cat_l{
			padding-top: 8px;
			margin-top: 8px;
			//border-top: 1px solid #ccc;
			h3{
				//font-weight: bold;
				//color: darkred;
			}
		}

		.out .cat_l h3{
			//color: #2b669a;
		}

		.cat_s{
			//margin-left: -15px;
			font-size: 11px;
			padding-top: 10px;
			label{
				//font-weight: normal;
				margin-right: 15px;
			}
		}

	}

	.cluster{
		background-image: url("../slugs/gnavi/img/cluster.png");
		background-size: 20px 32px;
		color: #fff;
		text-align: center;
		width: 20px;
		height: 32px;
		padding-top: 2px;
		font-weight: bold;
	}

	.cluster-3{
		background-image: url("../slugs/gnavi/img/cluster_3.png");
	}


	//infowindow
	.info_window{
		.name{
			padding-top: 4px;
			font-weight: bold;
			font-family: var(--font-family-base);
		}
		.cat{
			font-size: 11px;
			color: #777;
			font-family: var(--font-family-base);
		}
	}

	//表示
	.main_display{
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background: #fff;
		.rest_main{
			padding-left: 10px;
			padding-right: 10px;
		}
		
		.expand{
			position: absolute;
			top: -33px;
			left: 0;
			width: 38px;
			height: 33px;
			line-height: 33px;
			background: #fff;
			display: block;
			margin-bottom: 0;
			text-align: center;
			cursor: pointer;
			border-radius: 0 6px 0 0;
		}
		
		[data-is="riot-rest"]{
			height: 200px;
			overflow-y: auto;
		}

		.expand:hover{
			background: #eee;
		}
	}

	#main_display:checked + .main_display{
		height: auto;
		top: 100px;
		[data-is="riot-rest"]{
			height: 100%;
		}
	}

	#main_display:checked ~ .expand{

	}

	//店舗情報表示
	.rest_items{
		margin: 0 !important;
		font-size: 12px;

		.item{
			margin-top: 15px;
		}
		.image{
			margin-right: 10px;
			width: 100px;
		}

		.name{
			font-weight: bold;
		}

		.copy{
			color: #777;
			font-size: 11px;
		}

		.address{
			font-size: 10px;
		}
	}
}

/*----------------------------------------
         トーク機能用 共通
----------------------------------------*/
.template_talk{
	.re_container{
		max-width: 728px;
	}
	.talk_page_header{
		.col2_wrap{
			display: flex;
			width: 100%;
			align-items: center;
		}
		.box_left{
			flex: 1;
		}
	}
	.contents_space{
		background-color: #fff;
		@media #{$lg}{
			padding-left: 80px;
			padding-right: 80px;
		}
		@media #{$sm}{
			//width: calc(100% + 20px);
			padding-left: 20px;
			padding-right: 20px;
			margin-left: -20px;
			margin-right: -20px;
		}
	}
	.input_normal{
		appearance: none;
		color: inherit;
		cursor: pointer;
		outline: none;
		border: none;
		background-color: transparent;
		display: inline;
		padding: 0;
	}

	.thread_box{
		border-bottom: 1px solid #eee;
	}
	.res_depth:not(.num1){
		.text_box{
			font-size: 85%;
		}
		
	}
	.res_depth{
		padding-left: 30px;
		position: relative;
		&:before{
			content: '';
			position: absolute;
			left: 15px;
			top: 8px;
			bottom: 0;
			width: 1px;
			border-left: 1px solid #eee;
		}
		&.num1{
			padding-left: 0;
			&:before{
				content: none;
			}
			&>.res_box{
				border-bottom: 1px solid #eee;
			}
		}
	}
	.res_box + .res_depth{
		margin-top: -1px;
		background-color: #fff;
	}
	.res_box{
		.user_host{
			font-weight: bold;
			color: #333;
		}
		.image_box{
			cursor: pointer;
			&.state_thumb{
				&:hover{
					opacity: 0.7;
				}
			}
		}
		.to_thread{
			min-height: 1em;
			display: block;
		}
		&.state_unread{
			.order_text:before{
				content: "\25cf";
				color: #ea5550;
				position: relative;
				top: -1px;
				margin-right: 4px;
			}
			.text_box{
				font-weight: bold;
			}
		}
		&.deleted_item{
			.user_host{
				color: #999;
			}
		}
	}
	.res_head{
		font-size: 91.67%;
		color: #999;
		
	}
	.res_foot{
		position: relative;
		//font-size: 91.67%;
		font-size: 120%;
		color: #999;
		.iine_form{
			display: inline-block;
			width: 100px;
			.count_text{
				font-weight: bold;
			}
			.unit_text{
				font-size: 70%;
			}
		}
		.input_normal:hover{
			color: #000;
		}
		.spam_form{
			position: absolute;
			bottom: 0;
			right: 0;
		}
		.comment_count{
			display: inline-block;
			width: 100px;
			.count_text{
				font-weight: bold;
			}
			.new_text{
				font-size: 75%;
			}
			.new_count{
				font-weight: bold;
				margin-right: 2px;
			}
		}
	}
	.form_area{
		.state_expired{
			padding: 20px 30px;
			text-align: center;
			border-radius: 3px;
			background-color: #eee;
		}
	}
	.image_upload{
		.title_text{
			font-size: 11px;
			padding-bottom: 4px;
		}
		.file_input{
		}
		.note_text{
			padding-top: 4px;
			font-size: 11px;
		}
	}
	.res_content{
		font-size: 15px;
		padding-top: 5px;
		padding-bottom: 10px;
		&.state_spam{
			.text_box{
				display: none;
			}
			.image_box{
				display: none;
			}
			.spam_message_box{
				display: block;
			}
		}
		.text_box{
			line-height: 1.5;
		}
		.link_text{
			text-decoration: underline;
			color: #aaa;
		}
		.image_box{
			img{
				border: 1px solid #ddd;
			}
		}
		.spam_message_box{
			display: none;
			color: #999;
			font-size: 80%;
			padding-top: 8px;
		}
	}
	.has_image{
		color: #999;
		margin-right: 7px;
	}
	
	.pagination_box{
		position: relative;
		margin-top: 20px;
		padding-bottom: 20px;
		.next_btn{
			position: absolute;
			top: 0;
			right: 0;
		}
	}
}
/*----------------------------------------
         imaichi
----------------------------------------*/
.slug-imaichi{
	.page_wrapper{
		height: 100%;
	}
	[data-is="riot-base"]{
		position: absolute;
		top: 20px;
		left: 0px;
		width: 100%;
	}
	.page_footer{
		display: none;
	}
	.point{
		pointer-events: none;
		position: absolute;
		top: 50%;
		left: 50%;
		&:before{
			position: absolute;
			top: 0px;
			left: -6px;
			content: ' ';
			display: block;
			height: 1px;
			width: 13px;
			background-color: #000;
		}
		&:after{
			position: absolute;
			top: -6px;
			left: 0px;
			content: ' ';
			display: block;
			height: 13px;
			width: 1px;
			background-color: #000;
		}
	}
}
/*----------------------------------------
         Map
----------------------------------------*/
.slug-map{
	.page_wrapper{
		height: 100%;
	}
	
	[data-is="riot-control"]{
		position: absolute;
		top: 10px;
		left: 10px;
		bottom: 10px;
		overflow-y: auto;
		background-color: #fff;
		padding: 10px;
		font-size: 11px;
		label{
			cursor: pointer;
			display: block;
		}
		label:hover{
			color: red;
		}
	}
	.parent_box{
		padding-left: 15px;
	}
	
	.standard_plus{
		position: fixed;
		top: calc(50% - 3px);
		left: calc(50% - 3px);
		border-radius: 99px;
		width: 5px;
		height: 5px;
		background-color: rgba(255, 0, 0, 0.5);
	}
	
	.area01{
		grid-area: header;
		background-color: red;
	}
	.area02{
		grid-area: sidenav;
	}
	.area03{
		grid-area: footer;
	}
	.area04{
		grid-area: footer;
		background-color: #d7d9ff;
	}
	.area_wrap{
		//display: grid;
		//grid-template-areas:
		//"header header"
		//"sidenav contents"
		//"footer footer";
		//grid-template-columns: 30% 70%;
		//grid-template-rows: 50px 200px 200px;
	}
	.testtable{
		//border-collapse: separate;
		//border-spacing: 10px;
		th, td{
			empty-cells: hide;
			border: 1px solid red;
		}
	}
	.grid{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		text-align: center;
	}
	.item{
		//border: 1px solid blue;
	}
	.item.num4{
		display: inline;
		//align-items: center;
		//justify-content: center;
		vertical-align: middle;
	}
	.page_footer{
		display: none;
	}
	.flex_wrap{
		display: flex;
		flex-wrap: wrap;
		height: 200px;
		align-content: flex-start;
	}
	.flex_item{
		text-align: center;
	}
	.flex_item.num2{
		flex-basis: 200px; }
}


/*----------------------------------------
         コロナ
----------------------------------------*/
.slug-okayama-covid19{
	.card{
		background-color: #fff;
		padding: 22px;
		color: #4d4d4d;
		border: 1px solid #ddd;
		.title{
			font-size: 20px;
		}
		.main_num{
			font-size: 30px;
		}
		.main_unit{
			margin-left: 7px;
			font-size: 18px;
		}
		.sub_num{
			font-size: 20px;
		}
		.sub_unit{
			font-size: 20px;
		}
		.split{
			display: flex;
			justify-content: space-between;
		}
	}
}

/*----------------------------------------
         Report
----------------------------------------*/
.slug-report{

	.info_box{
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.menu_box{
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		.st_btn_sm{
			margin-bottom: 10px;
		}
	}

	//キャンペーン編集
	.edit_btn_area{
		display: inline-block;
		background: #fff;
		padding: 5px;
		position: fixed;
		border: 1px solid #eee;
		top: 0;
		left: 0;
		border-radius: 3px;
	}

	//.edit{
	//	.service{
	//
	//	}
	//	.campaign,
	//	.adgroup,
	//	.top{
	//		padding: 10px 3px;
	//		border-top: 1px solid #ccc;
	//	}
	//
	//	.campaign .item{
	//		background: #555;
	//		padding: 3px 7px;
	//		border-radius: 2px;
	//		color: #fff;
	//		&:hover{
	//			background: #444;
	//			cursor: pointer;
	//		}
	//	}
	//
	//	.adgroup .item{
	//		background: #ddd;
	//		padding: 3px 7px;
	//		border-radius: 2px;
	//		& + .item{
	//			margin-top: 5px;
	//		}
	//	}
	//	th,td{
	//		vertical-align: top;
	//	}
	//
	//	td.select{
	//		background: yellow;
	//		& + td{
	//			background: yellow;
	//		}
	//	}
	//}

	//簡易テーブル
	.output{
		max-width: 100%;
		//overflow: scroll;
		display: none;
	}
	.output th:last-child,
	.output td:last-child{
		padding-right: 1.1em;
	}
	.output th,
	.output td{
		//white-space: nowrap;
	}
	&.start .title_select,
	&.start .output{
		display: block;
	}
	.output{
		//position: fixed;
		//z-index: 999;
		//bottom: 0;
		//left: 0;
		//right: 0;
		//max-height: 50%;
		//box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
		background-color: #fff;
		tbody{
			//visibility: hidden;
		}
		table,
		td,
		th{
			border-radius: 0 !important;
		}
		td:nth-child(2n){
			//background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgBQAACgAGQlQN+QAAAABJRU5ErkJggg==');
		}
	}

	.file_select{
		text-align: center;
		padding: 10px;
		border-radius: 4px;
		//border: 1px solid #444;
		//background-color: #007aff;
		background-color: #fff;
		border: 1px dashed #666;
		color: #333;
	}
	.file_select.drag{
		background-color: #666;
		border: 1px solid #666;
		color: #fff;
	}

	.title_select{
		font-size: 12px;

		label{
			vertical-align: top;
		}
	}

	.title_select .enable{
		margin-top: 10px;
		margin-bottom: 5px;
		padding: 5px 5px 0 0;
		border-radius: 4px;
		min-height: 20px;
		background: #fff;
		.tag{
			background-color: #37474F;
		}
	}

	.title_select .disable{
		background: #fff;
		padding: 5px 5px 0 0;
		border-radius: 4px;
		min-height: 20px;
		.tag{
			background-color: #546E7A;
		}
		label{
			display: none;
		}
	}

	.title_select .tag{
		//font-weight: bold;
		display: inline-block;
		margin-left: 5px;
		margin-bottom: 5px;
		//color: #333;
		//border: 1px solid #333;
		padding: 4px 8px;
		border-radius: 3px;
		cursor: move;
		color: #fff;
		&:hover{
			opacity: 0.9;
		}
		&.unselectable{
			opacity: 0.4 !important;
			cursor: default;
		}
	}
	.title_select{
		display: none;
	}
}

/*----------------------------------------
         カンプ
----------------------------------------*/
.slug-comp{
	//&.before{
	//	.nav{
	//		display: none;
	//	}
	//}
	&.has_image{
		min-width: 0;
		.page_header,
		.page_footer{
			display: none;
		}
	}

	.nav{
		//background-color: #f3f3f3;
		width: 180px;
		padding: 15px;
		position: fixed;
		top: 0;
		left: 0;
		transition-property: left;
		transition-duration: 0.2s;
		background-color: rgba(216, 216, 216, 0.9);
		//&.close{
		//	left: -180px;
		//}

		.tab{
			position: absolute;
			top: 0;
			left: 180px;
			padding: 3px 9px;
			display: inline-block;
			background-color: rgba(216, 216, 216, 0.9);
		}
		&.close{
			.tab i:before{
				content: "\f061";
			}
		}

		.up_img{
			margin-bottom: 8px;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		.up_bg{
			margin-top: 8px;
		}
		//.item > *:nth-of-type(2n){
		//	padding-top: 1px;
		//	padding-bottom: 1px;
		//}
		//.item{
		//
		//	table-layout: fixed;
		//	word-break: break-all;
		//	word-wrap: break-all;
		//}
		.item{
			word-break: break-all;
			word-wrap: break-word;
			padding-top: 5px;
			padding-bottom: 5px;
			line-height: 1.2;
		}
		.item.current{
			color: red;
		}
	}
}

/*----------------------------------------
         ホシイモ
----------------------------------------*/
.slug-hoshiimo{
	[data-is="riot-header"]{
		.cart_count{
			display: inline-block;
			text-align: center;
			line-height: 22px;
			width: 22px;
			background-color: red;
			color: #fff;
			border-radius: 99px;
			font-size: 11px;
		}
	}
	[data-is="riot-add"]{
		position: sticky;
		bottom: 0;
	}
	[data-is="riot-list"]{

	}
	[data-is="riot-modal-cart"]{
		.flow_text{
			font-size: 11px;
			margin-top: 4px;
		}
	}
	.item_list{
		.item{
			background-color: #fff;
			&.deleted{
				opacity: 0.3;
			}
			&.selected{
				background-color: #defcff;
			}
		}
		.item + .item{
			border-top: 1px solid #eee;
		}
		.thumb{
			width: 50px;
			height: 50px;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}


/*----------------------------------------
         Reversi
----------------------------------------*/
.slug-reversi{
	.board_wrap{
		position: relative;
		padding-bottom: 100%;
	}
	.board_area{
		display: block;
		position: absolute;
		top: 15px;
		left: 15px;
		right: 0;
		bottom: 0;
		table{
			display: block;
		}
		tbody{
			display: flex;
		}
		tr{
			display: block;
			height: 12.5%;
		}
		td{
			display: inline-block;
			appearance: none;
			width: 12.5%;
			height: 100%;
			border: none;
			border-right: 1px solid #4db6ac;
			border-bottom: 1px solid #4db6ac;
			position: relative;
			background-color: #349688;
			&:hover{
				@media (hover: hover){
					background-color: #248072;
				}
			}
		}
		ol{
		}
		li{
		}
		span{
		}
	}
	:is(.bar_x, .bar_y){
		position: absolute;
		background-color: #283238;
		color: #4db6ac;
	}
	.bar_x{
		top: 0;
		left: 15px;
		right: 0;
		height: 15px;
	}
	.bar_y{
		top: 15px;
		left: 0;
		bottom: 0;
		width: 15px;
	}
	:is(.stone_black, .stone_white){
		&:before{
			content: '';
			position: absolute;
			border-radius: 99px;
			top: 12%;
			left: 12%;
			right: 12%;
			bottom: 12%;
			background-image: linear-gradient(90deg, #283238 0%, #283238 50%, #f4f5f5 50%, #f4f5f5 100%);
			background-size: 202%;
			background-position: left bottom;
			transition: background-position 0.2s linear;
		}
	}
	.stone_white{
		&:before{
			background-position: right top;
		}
	}
	.stone_none{}
	.mark_last{
		&:after{
			content: '';
			position: absolute;
			top: 42%;
			left: 42%;
			right: 42%;
			bottom: 42%;
			border-radius: 99px;
			background-color: #ef5350;
		}
	}
}

/*----------------------------------------
         Reversi-Ai
----------------------------------------*/
.slug-reversi-ai{
	.board_area{
		background-color: #009688;
		.re_row_0{
			border-top: 1px solid #4DB6AC;
			border-left: 1px solid #4DB6AC;
		}
		.re_col_sm_1{
			width: 12.5%;
			border-right: 1px solid #4DB6AC;
			border-bottom: 1px solid #4DB6AC;
		}
		.state_box{
			padding-bottom: 100%;
			position: relative;
			//transform: rotateY(180deg);
			//transform-style: preserve-3d;
			//backface-visibility: visible;
			&.current:after{
				position: absolute;
				content: ' ';
				border-radius: 99px;
				top: 42%;
				left: 42%;
				right: 42%;
				bottom: 42%;
				background-color: #ef5350;
				//opacity: 0.4;
			}
		}
		.item_white:before,
		.item_black:before{
		//.item_white:after,
		//.item_black:after{
			position: absolute;
			content: ' ';
			border-radius: 99px;
			top: 12%;
			left: 12%;
			right: 12%;
			bottom: 12%;
		}
		.item_black:before{
			background-color: #263238;
			//animation: to_black .3s ease;
		}
		.item_white:before{
			background-color: #F5F5F5;
		}
		//.change.item_black:before,
		//.change.item_white:before{
		//	animation: shake4 .3s ease;
		//}
		.item_none{
		}
		.item_putable{
			cursor: pointer;
		}
		.item_putable:before{
			position: absolute;
			content: ' ';
			border-radius: 99px;
			top: 39%;
			left: 39%;
			right: 39%;
			bottom: 39%;
			background-color: #F5F5F5;
			opacity: 0.4;
		}
		.state_black .item_putable:before{
			background-color: #263238;
		}
		.item_putable:hover:before{
			opacity: 1;
		}
		.debug_num{
			font-size: 11px;
			position: absolute;
			display: none;
		}
	}
}

/*----------------------------------------
         
----------------------------------------*/
.slug-caniuse{
	.page_wrapper{
		background-color: #403828;
	}
	.re_container{
		max-width: 1200px;
		@media #{$lg}{
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	.feature_list{
		}
	.main_info{
		background-color: #f2e8d5;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		& > div:nth-of-type(1){
			@media #{$lg}{
				width: 5%;
			}
		}
		& > div:nth-of-type(2){
			@media #{$lg}{
				width: 25%;
			}
		}
		& > div:nth-of-type(3){
			@media #{$lg}{
				width: 36%;
			}
		}
		& > div:nth-of-type(4){
			@media #{$lg}{
				width: 28%;
			}
		}
	}

	.browser_box{
		//text-align: center;
	}
	.browser_mark{
		//display: inline-block;
		//padding: 0 4px;
		font-size: 10px;
		margin-top: 2px;
		color: #fff;
		line-height: 1.5;
		padding-left: 4px;
		margin-right: 2px;
	}
	.bg_n{background-color: #c44230;}
	.bg_p{background-color: #807301;}
	.bg_y{background-color: #2a8436;}
	
	.title_box{
		font-weight: bold;
		.cat_mark{
			font-weight: normal;
			background-color: #555;
			color: #fff;
			margin-right: 5px;
			display: inline-block;
			padding: 2px 4px 0;
			line-height: 1.5;
			font-size: 11px;
		}
	}
	
	.note_box{
		[ref="description"]{
			code{
				background-color: #eccd9f;
			}
		}
		[ref="code"]{
			margin-top: 5px;
		}
		//Codeエディター 高さ自動
		.codeflask{
			position: relative;
		}
		.codeflask__pre{
			position: static;
		}
		.codeflask__textarea{
			overflow: hidden;
			color: transparent;
		}
		//wordWap対応
		.codeflask__flatten{
			white-space: pre-wrap;
			word-wrap: break-word;
		}
	}
	.link_box{
		a{
			display: inline-block;
		}
		a:before{
			content: "";
			width: 12px;
			height: 12px;
			display: inline-block;
			margin-right: 5px;
			background-size: cover;
			background-color: #fff;
		}
		a[href^="https://caniuse.com/"]:before{
			background-image: url("../slugs/caniuse/img/favicon_caniuse.png");
		}
		a[href^="https://www.google.com/"]:before{
			background-image: url("../slugs/caniuse/img/favicon_google.png");
		}
		a[href^="https://developer.mozilla.org/"]:before{
			background-image: url("../slugs/caniuse/img/favicon_mdn.png");
		}
	}
	.browser_select{
		max-height: 80vh;
		overflow-y: scroll;
		input + span{
			cursor: pointer;
			font-weight: bold;
			color: green;
		}
		.check_n + span{
			color: #b90000;
		}
		input:checked + span{
			background-color: #000000;
			color: #fff;
		}
	}
	[data-is="riot-elem-search"]{
		position: sticky;
		top: 0;
		background-color: #f2e8d5;
		z-index: 9;
		margin-bottom: 10px;
		border-bottom: 1px solid #403828;
	}
}

/*----------------------------------------
         
----------------------------------------*/
.slug-chat3min{
	background-color: #46aef7;
	.page_footer{
		display: none;
	}
	.page-top + .page_footer{
		//display: block;
	}
	.page-room{

		.header_area{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 50px;
			background-color: red;
		}
		.bg_area{
			position: fixed;
			z-index: -1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #46aef7;
			background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
		}
		.message_area{
			padding: 80px 20px 40px;
			.message_list{
				max-width: 400px;
				margin-left: auto;
				margin-right: auto;
			}
			.message_item{
				width: 80%;
				overflow: hidden;
			}
			.message_inner{
				float: left;
			}
			.state_my{
				margin-left: auto;
				.message_inner{
					float: right;
				}
				.balloon_box{
					background-color: #6feb39;
					&:after{
						border-bottom-color: #6feb39;
						transform: rotate(25deg);
						right: -5px;
						left: auto;
					}
				}
				.date_text{
					text-align: right;
				}
			}
			.state_your{
			}
			.balloon_box{
				display: inline-block;
				border-radius: 17px;
				background-color: #fff;
				padding: 8px 15px;
				position: relative;
				font-size: 14px;
				line-height: 1.6;
				&:after{
					content: ' ';
					position: absolute;
					border: 15px solid transparent;
					border-bottom-color: #fff;
					transform: rotate(-25deg);
					left: -5px;
					bottom: -3px;
				}
			}
			.date_text{
				color: #fff;
				font-size: 10px;
				padding: 2px 25px 13px 25px;
			}
		}
		.post_area{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 42px;
			padding-top: 4px;
			padding-bottom: 4px;
			//max-width: 500px;
			margin-left: auto;
			margin-right: auto;
			background-color: #bbb;
			.input_post{
				position: absolute;
				left: 4px;
				bottom: 4px;
				height: 34px;
				width: calc(100% - 67px);
			}
			.btn_box{
				text-align: right;
				padding-right: 4px;
			}
		}
	}
}


/*----------------------------------------
         DECO
----------------------------------------*/
@keyframes deco_caret_blink {
	0% {opacity: 1}
	50% {opacity: 1}
	51% {opacity: 0}
	100% {opacity: 0}
}
@keyframes deco_line_str {
	0% {transform: translate3d(-3%, 0, 0);}
	100% {transform: translate3d(-30%, 0, 0);}
}
.slug-deco{
	.weight_black{
		font-family: "Noto Sans JP", "sans-serif";
		font-weight: 900;
		letter-spacing: -0.01em;
	}
	[data-is="riot-page-top"]{

	}

	.logo_caret{
		animation: 1s deco_caret_blink infinite;
	}
	.line_str_move{
		div{
			width: 10em;
			animation: 6s deco_line_str infinite linear;
		}
	}
	
	.check_bg{
		background-image: linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%),linear-gradient(45deg, #a9a9a9 25%, transparent 25%, transparent 75%, #a9a9a9 75%);
		background-size: 20px 20px;
		background-position: 0px 0px, 10px 10px;
		background-color: #eee;
	}
}

/*----------------------------------------
         タイマージ
----------------------------------------*/
.slug-timerge{
	
	[data-is="riot-page_top"]{
		.example_thumb{
			border: 1px solid currentColor;
			padding-top: 25px;
			padding-bottom: 25px;
			border-radius: 4px;
			text-align: center;
		}
		.example_box{
			p{
				font-weight: bold;
			}
		}
		.color_icon{
			border-radius: 5px;
			padding: 0.3em 0.7em;
			background-color: #fff;
			position: relative;
			font-size: 20px;
			&:before{
				content: "";
				background-color: currentColor;
				opacity: 0.2;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 5px;
			}
		}
	}
	

	.group_text0{color: #e53935;}
	.group_text1{color: rgba(229, 57, 53, 0.5);}
	.group_text2{color: #1E88E5;}
	.group_text3{color: rgba(242, 41, 37, 0.5);}
	.group_text4{color: #8E24AA;}
	.group_text5{color: rgba(142, 36, 170, 0.5);}
	.group_text6{color: #7CB342;}
	.group_text7{color: rgba(124, 179, 66, 0.5);}
	.group_text8{color: #FB8C00;}
	.group_text9{color: rgba(251, 140, 0, 0.5);}

	.top_main{
		//background: linear-gradient( to right, rgba(11, 35, 73, 0.5), rgba(11, 35, 73, 0.6)), url("../slugs/timerge/header.jpg");
		//background-size: cover;
		//background-position: center;
		//height: 800px;
	}

	.layout_wide{
		width: 100%;
	}

	.tab_menu{
		background-color: #37474f;

		a{
			display: block;
			padding-top: 13px;
			padding-bottom: 5px;
			border-radius: 15px 15px 0 0;
			color: #fff;
			background-color: #999;
			&:hover{
				background-color: #aaa;
			}
		}
		a.active{
			background-color: #fff;
			color: #333;
			&:hover{
				color: #999;
			}
		}
	}

.timeline_list_box{
	border: 1px solid #e2e2e2;
	background-color: #fff;
	margin-top: -1px;
	.other_area{
		.favorite_on i{
			color: #ff900b;
		}
		a span{
			text-decoration: underline;
		}
	}
}

.timeline_set{
	position: relative;

	.fixed{
		position: fixed !important;
	}

	&.event_hide .event{
		color: rgba(255, 0, 0, 0) !important;
	}

	&.text_size10 .event{font-size: 10px;font-family: 'MS Pゴシック', 'MS PGothic', メイリオ, Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic ProN', sans-serif;}
	&.text_size11 .event{font-size: 11px}
	&.text_size12 .event{font-size: 12px}
	&.text_size13 .event{font-size: 13px}
	&.text_size14 .event{font-size: 14px}

	&.scale_split2  .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split02.svg")}
	&.scale_split3  .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split03.svg")}
	&.scale_split4  .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split04.svg")}
	&.scale_split5  .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split05.svg")}
	&.scale_split6  .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split06.svg")}
	&.scale_split10 .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split10.svg")}
	&.scale_split12 .scale_head .unit_bar{background-image: url("../slugs/timerge/img/scale_split12.svg")}


	[data-is="riot-elem_event_detail"]{
		position: relative;
	}

	.timeline_wrapper{
		position: relative;
		.labels_wrap{
			color: #cb2203;
			position: absolute;
			//top: 42px;//jsで指定
			left: 0;
			width: 100%;
			top: 0;
			//z-index: 1;
			font-size: 11px;
			//pointer-events: none;
		}
		.labels{
			.label{
				position: relative;
				width: 100%;
				span{
					box-sizing: border-box;
					padding-left: 10px;
					padding-top: 2px;
					white-space: nowrap;
					font-weight: bold;
					position: sticky;
					top: 0px;
					z-index: 99;
				}
				&:before{
					content: ' ';
					//background-color: rgba(255, 0, 0, 0.26);
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background-color: #fff;
				}
				&:nth-of-type(2n):before{
					background-color: rgba(0, 0, 0, 0.03);
				}
				.bottom_bar{
					position: absolute;
					height: 13px;
					//background-color: rgb(88, 140, 255);
					bottom: -7px;
					left: 0;
					width: 100%;
					z-index: 99;
					cursor: n-resize;
					&:before{
						content: ' ';
						position: absolute;
						height: 0px;
						top: 6px;
						left: 0;
						width: 100%;
						border-bottom:1px solid #777;
					}
					&:hover:before{
						border-bottom: 1px solid red;
					}
				}
			}
		}
	}
	
	.scale_unit_display{
		position: absolute;
		top: 3px;
		left: 3px;
		background-color: rgba(255, 255, 255, 0.9);
		font-size: 11px;
		border-radius: 5px;
		z-index: 5;
		padding: 1px 7px;
	}

	.global_bar{
		position: absolute;
		top: 0px;
		left: 0;
		height: 100%;
		border-left: 1px dashed #aaa;
		z-index: 155;
		pointer-events: none;
	}
	.global_bar_tip{
		position: absolute;
		left: -30px;
		top: 0;
		background-color: rgba(255,255,255,0.5);
	}
	
	.timeline_visual{
		width: 100%;
		position: relative;
		overflow-x: hidden;
		padding-bottom: 14px;
		z-index: 5;
		.data{
			position:relative;
			//border-bottom:1px dotted #ccc;
		}
		.event{
			display:inline-block;
			position:absolute;
			z-index: 9;
			top: 0;
			left: 0;
			
			//border-left:2px solid red;
			//border-bottom: 3px solid #ff4966;
			//padding-left:3px;
			//top:7px;
			//border-radius: 1px;
			//text-shadow: 1px 0px 0px #fff, 0px 1px 0px #fff, -1px 0px 0px #fff, 0px -1px 0px #fff;
			white-space: nowrap;
			color: #000;
			user-select: none;
			&.group1,
			&.group3,
			&.group5,
			&.group7,
			&.group9{
				opacity: 0.4;
			}
			
		}
		.event.not_line_over{
			opacity: 0.5 !important;
		}
		.event.range{
			background-color: #ffefe7;
			border: 1px solid #ffbeb4;
			padding-top: 1px;
			padding-left: 4px;
			&.group2{border: 1px solid #1E88E5;}
			&.group3{border: 1px solid #1E88E5;}
			&.group4{border: 1px solid #8E24AA;}
			&.group5{border: 1px solid #8E24AA;}
			&.group6{border: 1px solid #7CB342;}
			&.group7{border: 1px solid #7CB342;}
			&.group8{border: 1px solid #FB8C00;}
			&.group9{border: 1px solid #FB8C00;}
			&.group2{background-color: rgba(30, 136, 229, 0.1);}
			&.group3{background-color: rgba(30, 136, 229, 0.1);}
			&.group4{background-color: rgba(142, 36, 170, 0.1);}
			&.group5{background-color: rgba(142, 36, 170, 0.1);}
			&.group6{background-color: rgba(124, 179, 66, 0.1);}
			&.group7{background-color: rgba(124, 179, 66, 0.1);}
			&.group8{background-color: rgba(251, 140, 0, 0.1);}
			&.group9{background-color: rgba(251, 140, 0, 0.1);}
		}
		.event.point{
			padding-top: 2px;
			padding-bottom: 1px;
			border-left: 1px solid #ff836f;
			padding-left: 5px;
			&.group2{border-left: 1px solid #1E88E5;}
			&.group3{border-left: 1px solid #1E88E5;}
			&.group4{border-left: 1px solid #8E24AA;}
			&.group5{border-left: 1px solid #8E24AA;}
			&.group6{border-left: 1px solid #7CB342;}
			&.group7{border-left: 1px solid #7CB342;}
			&.group8{border-left: 1px solid #FB8C00;}
			&.group9{border-left: 1px solid #FB8C00;}
			&.group2:before{border-top: 1px solid #1E88E5;}
			&.group3:before{border-top: 1px solid #1E88E5;}
			&.group4:before{border-top: 1px solid #8E24AA;}
			&.group5:before{border-top: 1px solid #8E24AA;}
			&.group6:before{border-top: 1px solid #7CB342;}
			&.group7:before{border-top: 1px solid #7CB342;}
			&.group8:before{border-top: 1px solid #FB8C00;}
			&.group9:before{border-top: 1px solid #FB8C00;}
			&:before{
				position: absolute;
				left: -3px;
				top: 9px;
				content: " ";
				width: 5px;
				/* border-top: 5px solid #ff836f; */
				display: block;
				background-color: #ff836f;
				height: 5px;
				border-radius: 3px;
			}
		}
		.event:hover{
			color:red;
			cursor:pointer;
		}
		//.detail{
		//	display:none;
		//	position:absolute;
		//	bottom:15px;
		//	left:15px;
		//	width:200px;
		//	background:#fff;
		//	padding:10px;
		//	border:1px solid #333;
		//	z-index:99;
		//	color:#000000;
		//}
		//.event:hover .detail{
		//	display:block;
		//}

		//スクロールバー
		//.iScrollHorizontalScrollbar{
		//	//position: absolute;
		//	position: sticky;
		//	bottom: 0;
		//	//bottom: 0;
		//	//left: 0;
		//	z-index: 100;
		//	width: 100%!important;
		//
		//	//background-color: red;
		//	//height: 20px;
		//	.iScrollIndicator{
		//		height: 14px;
		//		background-color: rgba(0, 0, 0, 0.15);
		//		//border: 1px solid rgba(0, 0, 0, 0.15);
		//		box-sizing: border-box;
		//		position: relative;
		//		&:before,
		//		&:after{
		//			//content: '';
		//			position: absolute;
		//			top: 0px;
		//			height: 14px;
		//			width: 9998px;
		//			background-color: rgba(255, 255, 255, 0.3);
		//		}
		//		&:before{
		//			left: -9999px;
		//		}
		//		&:after{
		//			right: -9999px;
		//		}
		//	}
		//}
	}

	.scale_head_wrap{
		position: sticky;
		top: 0;
		//height: 0;
		//height: calc(100% - 15px);
		width: 100%;
		z-index: 150;
		
		pointer-events: none;
	}

	.iscroll_scale_head{
		width: 100%;

		background-color: #ffdf84;
		//height: 100%;
		//overflow: hidden;
		overflow-x: hidden;
	}

	.iscroll_scale_head_move{
		display: block !important;//iscrollでのdisplay: none対策
		//height: 100%;
	}
	.unit_bar{
		&:before{
			content: ' ';
			display: block;
			position: absolute;
			width: 0;
			//height: calc(100% - 15px);
			top: 15px;
			left: 0;
			border-left: 1px dashed rgba(0, 0, 0, 0.08);
		}
		&:not(.dash):before{
			border-left: 1px solid rgba(0, 0, 0, 0.1);
			height: 100%;
			top: 0px;
		}
	}
	.scale_line{
		//display: flex;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99999;
		height: 100%;
		pointer-events: none;
		white-space:nowrap;
		.unit_bar{
			color: rgba(241, 241, 241, 0);
			height: 100%;
			//outline: 1px solid red;
			position: absolute;
			//display: inline-block;

		}
	}
	.scale_head{
		//position: sticky;
		//top: 0;
		//overflow: hidden;
		//width: 999999px;
		z-index: 94;
		//display: table-row;
		//overflow:hidden;
		font-size: 0;
		//display: flex;
		

		white-space:nowrap;
		position: relative;
		height: 29px;
		.unit_bar{
			//float:left;
			border-bottom:1px solid #ccc;
			position: absolute;
			//height: 42px;
			font-size: 13px;
			padding-top: 5px;
			padding-bottom: 10px;
			padding-left: 8px;
			letter-spacing: 0.05em;
			white-space: nowrap;
			line-height: 13px;
			//vertical-align: bottom;
			//display: inline-block;
			//height: 100%;
			//background-position: left bottom;
			background-repeat: no-repeat;
			background-size: 100% 5px;
			background-position: bottom;
			//background-size: auto 5px;

			//&.dash:before{
			//	border-left-style: dashed;
			//}

			&.odd{
				background-color: rgba(205, 108, 0, 0.1);
			}
			.unit{
				font-size: 11px;
				color: #888;
			}

		}
	}

	.iscroll_timeline_visual_move{
		min-width: 100%;
	}
	.ruler_box{
		pointer-events: none;
		position: fixed;
		z-index: 99;
		text-align: center;
		border-top: 1px solid #000;
		white-space: nowrap;
		padding-top: 3px;
		text-shadow: 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff, 0px 0px 6px #fff;
		//font-size: 11px;
		&:before{
			content: ' ';
			display: block;
			height: 5px;
			width: 100%;
			border-left: 1px solid #000;
			border-right: 1px solid #000;
			position: absolute;
			top: -3px;
			left: 0;
		}
		.ruler_date{
			position: absolute;
			bottom: 35px;
			left: 0;
		}
		.ruler_range{
			
		}
	}
	
	.data_wrapper{
		position: relative;
		min-width: 100%;
		.data{
			height: 100px;
		}
	}

	.mini_view_wrap{
		position: absolute;
		position: sticky;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 0px;
		z-index: 8;
	}

	.mini_view{
		width: 100%;
		overflow: hidden;
		position: relative;
		top: -15px;
		height: 15px;
		border-top: 1px solid #CCC;
		background-color: #ffdf84;
		z-index: 99;
		//.point{
		//}
		//.range{
		//}
		//.marker{
		//	top: 4px;
		//	height: 6px;
		//	width: 2px;
		//	position: absolute;
		//	opacity: 0.2;
			&.group0{background-color: #e53935;}
			&.group1{background-color: #e53935;}
			&.group2{background-color: #1e88e5;}
			&.group3{background-color: #1E88E5;}
			&.group4{background-color: #8e24aa;}
			&.group5{background-color: #8E24AA;}
			&.group6{background-color: #7cb342;}
			&.group7{background-color: #7CB342;}
			&.group8{background-color: #fb8c00;}
			&.group9{background-color: #FB8C00;}
		//}
	}
	.mini_view_canvas{
		width: 100%;
		height: 15px;
		image-rendering: pixelated;
		position: absolute;
		top: 0;
		left: 0;
	}
	.iscroll_mini_view_move{
		height: 15px;
		margin-top: -1px;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 8px;
	}
}

#display{
	display: inline-block;
	border:1px solid #111;
	padding: 10px;
}

.button_area_wrap{
	height: 0;
	position: sticky;
	top: 48px;
	z-index: 999;
}

.button_area{
	width: 40px;
	padding: 5px 5px;
	//right: 5px;
	//height: 500px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 4px;
	overflow: hidden;
	text-align: center;
	margin-left: auto;
	
	.icon_box{
		font-size: 20px;
	}

	.name_box{
		font-size: 10px;
		display: none;
	}

	.item_wrap{
		margin-left: -80px;
		//width: 130px;
	}
	select{
		appearance: none;
		//color: #fff;
		background-color: rgba(255, 255, 255, 0.8);
		border: none;
		width: 100%;
		border-radius: 4px;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 4px;
		line-height: 22px;
		height: 22px;
	}
	&.open{
		width: 210px;
		.item_wrap{
			margin-left: 0px;
			width: auto;
		}
		.icon_box{
			position: relative;
			top: 4px;
		}
		.name_box{
			display: block;
		}
	}
}

#loading{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -12px;
	margin-left: -12px;
	width: 24px;
	height: 24px;
}

	//年表詳細モーダル
	[data-is="riot-modal_timeline_detail"]{
		.group_select{
		}
		.half_select{
			opacity: 0.6;
		}
		.title{
			font-weight: bold;
		}
		.note:not(:empty){
			padding-top: 4px;
		}
	}
	//年表編集
	[data-is="riot-modal_timeline_edit"]{
		textarea[ref="data"]{
			//line-height: 1.8;
		}
		//.textoverlay-wrapper{
		//	line-height: 2;
		//	word-break: break-all;
		//	width: 100%;
		//	.textoverlay{
		//		//color: red !important;
		//		//letter-spacing: normal !important;
		//		font-family: monospace !important;
		//	}
		//	textarea{
		//		//width: 300px;
		//		line-height: 2;
		//		word-break: break-all;
		//		letter-spacing: normal !important;
		//		font-family: monospace !important;
		//	}
		//	.syntax.row{
		//		/*outline: 1px solid #ff9580;*/
		//		position: relative;
		//		z-index: 9;
		//	}
		//	.syntax.row:before{
		//		z-index: 0;
		//		position: absolute;
		//		/*background-color: #999999;*/
		//		/*top: 0;*/
		//		height: 0;
		//		border-bottom: 1px solid #ddd;
		//		//top: 10px;
		//		left: -2000px;
		//		right: -2000px;
		//		bottom: -6px;
		//		content: ' ';
		//	}
		//	.syntax.separator{
		//		//background-color: #ffccd2;
		//		//border-radius: 2px;
		//		border-bottom: 1px dotted red;
		//	}
		//}
	}


	[data-is="riot-modal_merge_add"]{
		//max-width: 400px;
	}

	.event_modal{
		.timeline_name{
			font-size: 12px;
		}
		.event_date{
			font-size: 12px;
		}
	}

	[data-is="riot-modal_merge_edit"]{
		.handle_area{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 8px;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		//.sortable-ghost{
		//	opacity: 0;
		//}
	}

}

/*----------------------------------------
         
----------------------------------------*/
.slug-stack{
	.page_wrapper{
		background-color: #fffbe6;
	}
}

/*----------------------------------------
         無人速報
----------------------------------------*/
.slug-msoku{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23ffffff' fill-opacity='0.9'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	background-color: #ddd;


	.site_header{
		.j_bg_cover{
			aspect-ratio: 2.5;
			@media #{$sm}{
				aspect-ratio: 0.9;
				width: 60px;
			}
		}
		.j_jc_center{
			@media #{$sm}{
				background-color: #fee;
			}
		}
	}

	.mod_box{
		border: 2px solid #999;
		background-color: #fff;
	}

	.mod_title{
		background-color: #cee7ff;
		border-left: 5px #385185 solid;
		font-weight: bold;
		line-height: 1.3;
	}

	.mod_link{
		color: #3578cf;
		display: inline-block;
	}

	.thread_list{
		letter-spacing: 0;
		li{
			margin-bottom: 60px;
			line-height: 1.5;
		}
	}


	@media (min-width: 700px) {
		.main_wrapper{
			max-width: 1100px;
		}
		main{
			width: calc(100% - 310px);
		}
		aside{
			width: 300px;
		}
	}
	@media (max-width: 699px) {
		:not(#x).sm\:j_ph_5 {
			padding-left: 5px;
			padding-right: 5px;
		}
	}

	.archive_menu{
		padding-top: 4px;
		padding-bottom: 4px;
		li{
			padding: 5px 10px;
		}
		li + li{
			border-top: 1px solid #ddd;
		}
		a{
			color: #3578cf;
		}
	}
	.archive_menu, .prev_next{
		a:visited{
			color: #9b00f5 !important;
		}
	}
	.thumbnail_link{
		&:visited h3{
			color: #9b00f5;
		}
		@media(hover: hover){
			&:hover{
				h3{
					text-decoration: underline;
				}
			}
		}
	}
}
/*----------------------------------------
         マークダウンデータベース
----------------------------------------*/
.slug-mdb{

	.main_wrap{
		align-items: stretch;
		width: 100%;
	}
	.left_area{
		border: 1px solid #ddd;
		width: 200px;
		box-sizing: border-box;
		overflow-y: auto;
	}
	.right_area{
		border: 1px solid #ddd;
		border-left: none;
		width: calc(100% - 200px);
		box-sizing: border-box;
		overflow-y: auto;
	}

	.list_wrap{
		.item{
			cursor: pointer;
			border-bottom: 1px solid #ddd;
			padding: 7px;
		}
		.item:hover{
			background-color: #fff9df;
		}
		.description{
			font-size: 11px;
			line-height: 1.5;
			color: #999;
		}
	}

	.display{
		padding: 1em;
			line-height: 1.5;
		h3{
			margin-top: 0.5em;
			font-size: 1.3em;
			font-weight: bold;
		}
		h4{
			margin-top: 0.5em;
			font-size: 1.2em;
			font-weight: bold;
		}
		h5{
			margin-top: 0.5em;
			font-size: 1.1em;
			font-weight: bold;
		}
		h6{
			margin-top: 0.5em;
			font-weight: bold;
		}
		p{
		}
		ul,
		ol{
			margin-left: 1em;
		}
		li{
			margin-left: 1em;
			list-style: disc outside;
		}
	}
}
/*----------------------------------------
         ツイオイ
----------------------------------------*/
.slug-twioi{
	.tweet_item{
		&+.tweet_item{
			border-top: 1px solid #ddd;
		}
	}
	.unread{
		background-color: #ffa;
	}
}

/*----------------------------------------
         xross
----------------------------------------*/
.slug-xross{
	.about_area{
		position: relative;
		.coming_soon{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.text{
			position: absolute;
			top: 50%;
			left: 50%;
			color: #fff;
			transform: translate(-50%, -50%);
		}
	}
	
	//view
	.tree_area{
		font-size: 12px;
		border-bottom: 1px solid #999;
		padding-bottom: 10px;
		margin-bottom: 10px;
		.type_directory,
		.type_bookmark{
			margin-top: 8px;
			cursor: pointer;
			display: block;
			&:hover{
				opacity: 0.6;
			}
		}
		.bookmark_children{
			padding-left: 17px;
		}
	}
}

/*----------------------------------------
         hiritsu ヒリツ
----------------------------------------*/
.slug-hiritsu{
	//input.invalid{
	//	border: 1px solid #ff4e3d !important;
	//}
	//input.candidate{
	//	background-color: #edfcff;
	//}
	//.jexcel_label{
	//	opacity: 0;
	//}
	//.jexcel>tbody>tr>td.readonly{
	//	background-color: rgba(0, 0, 0, 0.05);
	//}
	//.jexcel td.highlight{
	//	background-color: transparent;
	//}
	//.jexcel td.point{
	//	background-color: #edfcff !important;
	//}
	//.jexcel td.invalid{
	//	background-color: #fff1ea;
	//}
	//.handsontable{
	//	font-size: 1.2em;
	//	td.invalid{
	//		background-color: #fff1ea;
	//	}
	//	td.select{
	//		background-color: #edfcff !important;
	//	}
	//	td.htDimmed,
	//	td.readonly{
	//		background-color: rgba(0, 0, 0, 0.05);
	//	}
	//}
	.input_num{
		&.error{
			background-color: #ffdbd4;
		}
		&.base{
			background-color: #f3ffff;
		}
	}
}

/*----------------------------------------
         itimer タイマー
----------------------------------------*/
.slug-itimer{
	.flow_wrap{
		display: flex;
		padding-top: 20px;
		padding-left: 20px;
		
	}
	.flow_box{
		width: 240px;
		margin-right: 40px;
	}
	.timer_box{
		margin-top: -1px;
	}
	.time_btns{
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		button{
			width: 100%;
		}
	}
	.active{
		background-color: #fff4c4;
	}
}

/*----------------------------------------
         newapp ニューアプ
----------------------------------------*/
.slug-newapp{
	
	//.screen_shot_area{
	//	background-image: none !important;
	//}
	//.thumb_img,
	//.app_icon img,
	//.re_col_lg_4.re_hide_sm img{
	//	opacity: 0;
	//}
	//.screen_shot_area{
	//	display: none;
	//}
	
	.split_date{
		position: sticky;
		top: 5px;
		z-index: 9;
		text-align: center;
		.inner{
			color: #fff;
			background-color: #555;
			display: inline-block;
			border-radius: 99px;
		}
	}
	.page_area{
		.screen_shot_area{
			position: relative;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			border-radius: 2px;
			overflow: hidden;
			background-size: 28000px;
			background-position: 2% 40%;
			//&:hover{
			//	box-shadow: 0 0 0px 2px #ff8a40;
			//}
		}

		.thumb_img{
			background-size: 100% auto;
			background-position: top;
			background-repeat: no-repeat;
		}

		.app_info_area{
			position: absolute;
			bottom: 0;
			width: 100%;
		}

		.app_icon{
			width: 30%;
			margin-bottom: 10px;
			margin-left: 10px;
			&.software{
				box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
				border-radius: 20%;
				overflow: hidden;
			}
		}
		
		.price_box{
			position: relative;
		}
		
		.price{
			position: absolute;
			bottom: 10px;
			right: 10px;
			color: #fff;
			min-width: 60px;
			background: #4abff7;
			text-align: center;
			border-radius: 55px;
			font-weight: bold;
			font-size: 16px;
			line-height: 1;
			padding-top: 6px;
			padding-bottom: 6px;
			display: block;
	
			.border{
				display: inline-block;
				//border-radius: 6px;
				//border: 1px solid #4abff7;
				//font-size: 12px;
			}
			&.free{

			}
			&.pay{
				background:  #ff4f4d;
				//color: #ff4f4d;
			}
		}

		.text_wrap{
			background-color: rgba(0, 0, 0, 0.80);
			color: #fff;
			text-shadow: 0 0 3px #000;
			padding: 10px ;

			.box01{
				font-size: 11px;
			}
			.box02{
				margin-top: 4px;
			}
			.title{
				font-weight: bold;
			}
			
			.rank_genre{
				
			}

			.genres_price{
				//margin-top: 5px;
			}

			.genre{
				//padding-top: 5px;
				//font-size: 11px;
			}

			.box03{
				margin-top: 4px;
				.release{
					font-size: 0.9em;
				}
				.review{
					position: relative;
					
				}
				.stars_back{
					color: #666666;
				}
				.stars_front{
					color: #ffb45f;
					position: absolute;
					top: 0;
					left: 0;
					text-shadow: none;
				}
				.count{
					color: #fff;
				}
			}
		}
	}
	.bookmark_area{
		a{
			max-width: 200px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}

/*----------------------------------------
         カミポ
----------------------------------------*/
.slug-kamipo{
	/*.post_number{*/
	/*	position: absolute;*/
	/*	top: 10px;*/
	/*	right: 10px;*/
	/*	font-size: 12px;*/
	/*}*/
	.res_box{
		padding-top: 15px;
	}
	.card_box{
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 15px;
		letter-spacing: 0.05em;
		margin-left: auto;
		.anchor_text,
		.link_text{
			color: blue;
			&:hover{
				text-decoration: underline;
				cursor: pointer;
			}
		}
	}
	.card_box.state_tree{
		background-color: #fff;
		padding: 7px 22px 10px;
		@media #{$sm}{
			padding: 7px 10px 10px;
		}
	}
	.card_box.state_main{
		background-color: #fff;
		padding: 7px 22px 10px;
		position: relative;
		@media #{$sm}{
			padding: 7px 10px 10px;
		}
	}
	.card_box.state_main:not([data-depth="0"]){
		margin-top: -24px;
	}
	.card_box.state_dummy{
		background-color: #fbfbfb;
		color: #999;
		height: 64px;
		padding: 4px 10px 40px;
		overflow: hidden;
		font-size: 12px;
		@media #{$sm}{
			font-size: 11px;
		}
		&.state_last{
			position: static;
			max-height: 120px;
			height: auto;
		}
	}
	.card_box.state_dummy + .card_box.state_dummy{
		margin-top: -60px;
	}
	.card_box.state_dummy.state_last + .card_box{
		margin-top: -40px;
	}

	.card_box.state_parent{
		background-color: #fbfbfb;
		padding: 7px 22px 10px;
		position: relative;
		@media #{$sm}{
			padding: 7px 10px 10px;
		}
	}
	
	.card_box.state_parent + .card_box.state_parent{
		margin-top: -9px;
	}
	.card_box.state_parent + .card_box.state_main{
		margin-top: -9px;
	}
	.card_box.state_float{
		position: absolute;
		left: -4px;
		width: calc(100% + 4px);
		background-color: #fbfbfb;
		z-index: 3;
		padding: 20px;
		bottom: calc(100% - 3px);
	}
	.card_box.state_children{
		display: inline-block;
		padding: 0px 15px 6px;
		background-color: #fff;
		position: absolute;
		bottom: -7px;
		right: -1px;
		z-index: 2;
		line-height: 0.5em;
		font-weight: bold;
	}
	[data-depth]{width: calc(100% - 48px);}
	[data-depth="0"]{width: calc(100% - 0px);}
	[data-depth="1"]{width: calc(100% - 6px);}
	[data-depth="2"]{width: calc(100% - 12px);}
	[data-depth="3"]{width: calc(100% - 18px);}
	[data-depth="4"]{width: calc(100% - 24px);}
	[data-depth="5"]{width: calc(100% - 30px);}
	[data-depth="6"]{width: calc(100% - 36px);}
	[data-depth="7"]{width: calc(100% - 42px);}
	@media #{$sm}{
		[data-depth]{width: calc(100% - 24px);}
		[data-depth="0"]{width: calc(100% - 0px);}
		[data-depth="1"]{width: calc(100% - 3px);}
		[data-depth="2"]{width: calc(100% - 6px);}
		[data-depth="3"]{width: calc(100% - 9px);}
		[data-depth="4"]{width: calc(100% - 12px);}
		[data-depth="5"]{width: calc(100% - 15px);}
		[data-depth="6"]{width: calc(100% - 18px);}
		[data-depth="7"]{width: calc(100% - 21px);}
	}
	.meta_box{
		font-size: 11px;
		color: #ec5a00;
		padding-bottom: 3px;
		overflow: hidden;
	}
}
/*----------------------------------------
         ファイナンス
----------------------------------------*/
.slug-finance{
	.mark_area{
		color: #fff;
		.mark_box{
			&:not(:first-of-type) td{
				border-top: 1px solid #fff;
			}
			&.arrow-alt-up{
				background-color: #1E88E5;
			}
			&.arrow-alt-down{
				background-color: #e53935;
			}
			&.minus{
				background-color: #aaa;
			}
			.value{
				font-weight: bold;
			}
			.year{
				font-size: 11px;
			}
			.date{
				//margin-top: -3px;
				font-size: 11px;
			}
		}
	}
	.data_table{
		.title{
			font-weight: bold;
		}
	}
}


/*----------------------------------------
         oculusサーチ
----------------------------------------*/
.slug-oculus-search{
	.search_num{
		//padding: 0px 3px;
		//display:inline-block;
		padding-top: 3px;
		position: sticky;
		top: 0;
		z-index:9;
		background-color: #f6f6f6;
		@media #{$sm}{
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	.count_text{
		position: absolute;
		right: -5px;
		top: -5px;
		display: block;
		background-color: #333;
		font-size: 11px;
		width: 15px;
		text-align: center;
		line-height: 15px;
		border-radius: 99px;
	}
	
	.item_box{
		background-color: #fff;
		@media #{$lg}{
			padding: 20px;
			box-shadow: 0 4px 5px rgb(0 0 0 / 5%), 0 1px 5px rgb(0 0 0 / 5%);
			margin-top: 8px;
			border-radius: 5px;
		}
		@media #{$sm}{
			border: 1px solid #bbb;
			margin-top: -1px;
			padding: 15px 20px;
			border-left: none;
			border-right: none;
		}

		.fa-heart{
			font-size: 20px;
			color: #ccc;
			&.state_active{
				color: #ff0ab7;
			}
		}
		.publisher_name{
			color: #999;
		}
	}
	.this_current{
		opacity: 0.5;
	}

	.description_area{
		cursor: pointer;
		//padding: 15px;
		background-color: #f6f6f6;
		border-radius: 4px;
		overflow: hidden;
		border: 1px solid #eee;
		line-height: 2.3;
		@media #{$lg}{
			position: absolute;
			top: 0;
			left: 8px;
			right: 8px;
			bottom: 0;
			font-size: 15px;
		}
		@media #{$sm}{
			max-height: 78px;
			margin-top: 5px;
			//padding-top: 10px;
			//padding-bottom: 10px;
			font-size: 13px;
		}
		
		&:after{
			content: '全表示';
			position: absolute;
			right: 5px;
			bottom: 5px;
			font-size: 11px;
			background-color: #fff;
			border-radius: 3px;
			padding: 0px 7px;
			border: 1px solid #ccc;
			@media #{$sm}{
				right: 10px;
			}
		}
		&:hover:after{
			background-color: #f3f3f3;
		}
		&.state_show:after{
			content: none;
		}
		&.state_show{
			@media #{$lg}{
				position: static;
			}
			@media #{$sm}{
				max-height: none;
			}
		}
	}
	.preset_box{
		min-width: 300px;
		max-width: 600px;
		padding: 5px 2px 5px 13px;
		.depth_3{
			background-color: #fff;
			padding: 10px;
			border: 1px solid #ccc;
		}
		h3{
			background-color: #555;
			color: #fff;
			padding: 2px 8px;
			margin-bottom: 4px;
			font-size: 13px;
		}
		.choice{
				border-top: 1px dashed #999;
			a{
				//padding-top: 14px;
				//display: block;
				margin-top: 8px;
				background-color: #fcc02b;
				display: inline-block;
				border-radius: 4px;
				padding: 2px 10px 2px;
			}
			p{
				//padding-top: 4px;
				padding-bottom: 4px;
			}
		}
	}
	.state_free{
		color: #0170fe;
	}
	.image_wrap{
		background-color: #eee;
		margin-top: 3px;
	}
	.tag_jp{
		font-size: 11px;
		margin-left: 5px;
		background-color: #0170fe;
		color: #fff;
		padding: 0px 3px;
		border-radius: 4px;
		display: inline-block;
	}
	.rating_box{
		text-align: center;
		align-self: center;
		width: 30%;
		min-width: 100px;
	}
	.link_thumb{
		flex: 1;
	}
	.genre_list{
		//position: absolute;
		//bottom: 2px;
		//right: 2px;
		display: flex;
		//justify-content: flex-end;
		//flex-wrap: wrap;
		li{
			background-color: rgba(0, 0, 0, 0.6);
			color: #fff;
			font-size: 11px;
			margin-right: 2px;
			margin-top: 2px;
			padding: 0 4px;
			max-width: 140px;
		}
	}
	.app_lab_mark{
		margin-bottom: 8px;
		span{
			display: inline-block;
			background-color: #cd4848;
			color: #fff;
			padding: 0px 6px;
			border-radius: 2px;
			font-size: 11px;
		}
	}
	.rating_value{
		font-size: 37px;
		letter-spacing: -0.05em;
		line-height: 47px;
		padding-right: 5px;
		color: #000;
	}
	.basic_table{
		font-size: 11px;
		margin-top: 4px;
		width: 100%;
		th{
			font-weight: bold;
			width: 72px;
			text-align: left;
			color: #aaa;
		}
		tr{
			border-bottom: 1px solid #ccc;
		}
	}
	[data-is="riot-search"]{
		padding-top: 5px;
		.state_change:not([type="checkbox"]){
			background-color: #ffdf66;
		}
		.state_change[type="checkbox"] + span{
			background-color: #ffde25;
		}
		@media #{$sm}{
			padding-left: 10px;
			padding-right: 10px;
		}
	}
}

/*----------------------------------------
         チャンネルズ
----------------------------------------*/

@keyframes fade_change{
	0% {opacity: 1;}
	45% {opacity: 1;}
	50% {opacity: 0;}
	95% {opacity: 0;}
	100% {opacity: 1;}
}

.slug-channely_past{
	.tooltip{
		z-index: 99999999999;
		background-color: #222;
		color: #fff;
		//border: 1px solid #fff;
		padding: 5px 12px;
		border-radius: 3px;
	}
	.header_nav{
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 9;
	}
	.page_title{
		background-image: none !important;
		//.nav_area{
		//	padding-top: 10px;
		//	padding-bottom: 10px;
		//}
		.sub_area{
			display: none;
		}
	}
	[data-is="riot-account"]{
		@media #{$sm}{
			a + a{
				display: none !important;
			}
		}
	}
	.page_top.page_title{
		.sub_area{
			display: block;
		}
		.re_container{
			@media #{$sm}{
				padding-bottom: 0;
			}
		}
		.description_area{
			@media #{$lg}{
				padding-top: 70px;
				padding-bottom: 70px;
				width: 80%;
			}
		}
		.re_container:after{
			content: ' ';
			background-image: url('../slugs/channely/iphone.png');
			display: block;
			background-repeat: no-repeat;
			background-size: 260px auto;
			background-position: 50% -10px;
			@media #{$lg}{
				position: absolute;
				top: 0;
				right: 90px;
				height: 100%;
				width: 260px;
			}
			@media #{$sm}{
				height: 260px;
				position: relative;
				background-position: 50% 0px;
			}
		}
	}

	[data-is="riot-action-menu"]{
		.state_close{
			display: none;
		}
		[ref="action_wrap"]{
			background-color: #fff;
			border: 1px solid #ccc;
			padding: 5px;
			z-index: 99;
		}
		ul{
			//position: absolute;
			//z-index: 99;
			//top: 0px;
			//left: 0;
			//max-width: 500px;
			//overflow: hidden;
		}
		li{
			white-space: nowrap;
			padding: 5px;
			font-size: 13px;
		}
	}
	
	[data-is="riot-modal-manage"]{
		.state_dragging{
			position: relative;
			&:before{
				content: 'チャンネル追加';
				top: 50%;
				right: 0px;
				width: 100%;
				text-align: center;
				font-size: 11px;
				margin-top: -6px;
				pointer-events: none;
			}
			&:after{
				content: ' ';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
		}
	}
	
	[data-is="riot-list-new"]{
		background-color: #eee;
	}

	.row_wrap{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.row_space{
		display: flex;
		padding-bottom: 20px;
	}
	.row_item{
		flex: 0 0 230px;
		padding-left: 4px;
		overflow: hidden;
		min-height: 213px;
		@media #{$sm}{
			flex: 0 0 160px;
			min-height: 174px;
		}
	}
	.row_item:first-of-type{
		margin-left: 15px;
		@media #{$sm}{
			margin-left: 5px;
		}
	}
	.ch_head{
		padding-left: 20px;
		padding-bottom: 7px;
		@media #{$sm}{
			padding-left: 10px;
		}
	}
	.ch_title{
		padding-top: 18px;
		a:first-child{
			font-weight: bold;
			color: red;
		}
	}
	.unit_text{
		font-size: 80%;
		margin-left: 0.2em;
	}
	.item_data{
		.btn_box{
			margin-top: 4px;
			display: flex;
			justify-content: space-between;
		}
		.read_mark,
		.embed_link{
			font-size: 11px;
			padding: 0px 4px;
			border: 1px solid currentColor;
			appearance: none;
			border-radius: 0;
			background-color: transparent;
			line-height: 1.8;
			letter-spacing: 0;
			display: inline-block;
		}
		.read_mark{
			color: #444;
			border-style: dashed;
		}
	}
	.item_info{
		padding-top: 5px;
		font-size: 11px;
		overflow: hidden;
	}
	.touch_device .text_title{
		pointer-events: none;
	}
	.text_title{
		font-size: 11px;
		//max-height: 40px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 1.5;
		padding-top: 1px;
		margin-bottom: 5px;
		a:visited{
			color: #9f4998;
		}
	}
	.not_obey{
		text-decoration: line-through;
	}
	.empty_image{
		padding: 15px 0px;
		border: 1px solid #bbb;
		color: #bbb;
		text-align: center;
	}
	.row_wrap [ref="thumbnail"]{
		cursor: col-resize;
	}
	[ref="thumbnail"]{
		background-size: cover;
		background-position: center;
		padding-bottom: 55.9%;
		display: block;
		//background-color: #fff;
		position: relative;
		&:before{
			position: absolute;
			content: "";
			inset: 0;
			box-shadow: 0 0 0 1px #eee inset;
			mix-blend-mode: darken;
		}
		&.state_deleted{
			background-color: #aaa;
			&:after{
				position: absolute;
				translate: 0 -50%;
				width: 100%;
				top: 50%;
				left: 0;
				text-align: center;
				color: #fff;
				content: "未公開 または 削除済";
			}
		}
	}
	.duration_box{
		position: absolute;
		bottom: -19px;
		right: 16px;
		border-radius: 1px;
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		font-size: 10px;
		padding: 2px;
		line-height: 1;
		pointer-events: none;
		@media #{$sm}{
			right: 10px;
		}
	}
	.over_line{
		text-decoration: line-through;
	}
	.short_box{
		position: absolute;
		font-size: 20px;
		bottom: 4px;
		right: 4px;
		background-color: #fff;
		border-radius: 4px;
		padding: 0 8px;
		color: #f1121b;
	}
	[data-is="riot-sortable-list"] .ch_name,
	[data-is="riot-list-channel"] .ch_title{
		&.state_del{
			text-decoration: line-through;
		}
		&.state_private{
			opacity: 0.5;
		}
	}
	
	[data-is="riot-sortable-list"]{
		padding-bottom: 15px;
		.ch_item{
			padding-top: 5px;
			padding-bottom: 5px;
			border-bottom: 1px solid #ddd;
			&:first-of-type{
				border-top: 1px solid #ddd;
			}
			.list_1 > *:nth-child(1){
				width: 30px;
			}
			.list_1 > *:nth-child(3){
				width: 30px;
				text-align: right;
			}
		}
		.ch_name{
			color: red;
			font-weight: bold;
		}
		.mini_input_mark{
			display: inline-block;
			width: 15px;
			font-size: 10px;
		}
		.mini_input{
			appearance: none;
			font-size: 11px;
			border: none;
			width: calc(100% - 15px);
			&::placeholder{
				color: #aaa;
			}
		}
		.sortable-chosen{
			//background-color: #00ACED;
			opacity: 0.4;
		}
	}
	
	.mypage_btn{
		background-color: #5ba7e6;
		color: #fff;
		font-size: 25px;
		height: 60px;
		line-height: 60px;
		width: 60px;
		text-align: center;
		display: inline-block;
		border-radius: 100%;
		box-shadow: 5px 12px 15px rgba(0,0,0,0.2), 5px 12px 15px rgba(0,0,0,0.2);
	}
	.state_book{
		.from_now{
			background-color: #ff8d36;
			color: #fff;
			display: inline-block;
			padding: 0 3px;
		}
	}
	.marked{
		opacity: 0.4;
	}
}


/*----------------------------------------
         mojikae
----------------------------------------*/
.slug-mojikae{
	.setting_area{
		p{
			padding-bottom: 14px;
			text-indent: -2em;
			padding-left: 2em;
		}
		label:hover{
			color: #888;
		}
	}

	#output{
		background-color: #eee;
	}
}

/*----------------------------------------
         stare
----------------------------------------*/
.slug-stare{
	.word_line{
		writing-mode: vertical-rl;
		text-orientation: upright;
		text-combine-upright: all;
		font-size: 18px;
		font-family: serif;
		height: 20em;
		//width: 100%;
		padding-right: 1em;
		margin-left: auto;
		margin-right: 70px;
		//text-align: center;
		//white-space: nowrap;
		overflow: hidden;
	}

	.display_wrap{
		position: relative;
		background-color: #eee;
		//padding: 20px 0px;
		&:before{
			position: absolute;
			top: 50%;
			content: ' ';
			height: 1px;
			width: 100%;
			//background: rgba(255, 34, 0, 0.3);
		}
	}
	.display{
		/*padding: 1em;*/
		/*border: 1px solid #000;*/
		width: 12em;
		margin-left: auto;
		margin-right: auto;
	}
	.word{
		background-color: #CCC;
		/*opacity: 0.4;*/
		line-height: 1.5;
		position: relative;
		z-index: 100;
		white-space: nowrap;
	}
	.word.target{
		opacity: 1;
	}
}

/*----------------------------------------
         amafav
----------------------------------------*/
.slug-amafav{
	.page_wrapper{
		height: 100%;
	}
	.page_footer{
		display: none;
	}
	.title_box{
		text-align: center;
		font-size: 10px;
		position: absolute;
		left: 0;
		top: 2px;
		width: 100%;
		z-index: 9;
		font-weight: bold;
		color: #ff8720;
	}
	.box_wrap{
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		overflow: hidden;
	}
	.link_box{
		/*display: inline-block;*/
		font-size: 11px;
		width: 100%;
		height: 100%;
		//vertical-align: top;
		background-color: #fff;
		position: relative;
		//padding: 5px;
	}
	.image_box{
		//padding-bottom: 100%;
		position: absolute;
		top: 15px;
		left: 5px;
		right: 5px;
		bottom: 15px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.price_box{
		position: absolute;
		left: 0;
		bottom: 2px;
		width: 100%;
		text-align: center;
		font-weight: bold;
		color: #005f96;
	}
	.shadow_text{
		text-shadow:0px 3px 1px #fff,0px 2px 1px #fff,1px 2px 1px #fff,2px 2px 1px #fff,2px 1px 1px #fff,2px 0px 1px #fff,3px 0px 1px #fff,2px -1px 1px #fff,2px -2px 1px #fff,2px -3px 1px #fff,1px -3px 1px #fff,0px -3px 1px #fff,-1px -3px 1px #fff,-2px -3px 1px #fff,-3px -3px 1px #fff,-3px -2px 1px #fff,-3px -1px 1px #fff,-3px 0px 1px #fff,-3px 1px 1px #fff,-3px 2px 1px #fff,-2px 2px 1px #fff,-1px 2px 1px #fff;
	}

	@media all and (min-width:240px){.link_box{width: 50%}}
	@media all and (min-width:300px) and (max-height: 150px){.link_box{width: 25%}}
	//@media all and (min-width:350px){.link_box{width: 33.3333333%}}
	//@media all and (min-width:450px){.link_box{width: 25%}}

	@media all and (min-height:240px){.link_box{height: 50%}}
	@media all and (max-height:51px){
		.title_box{
			top: -3px;
		}
		.image_box{
			top: 2px;
			bottom: 2px;
		}
		.price_box{
			bottom: -3px;
		}
	}
	//@media all and (min-height:350px){.link_box{height: 33.3333333%}}
	//@media all and (min-height:450px){.link_box{height: 25%}}
}

/*----------------------------------------
         tempo
----------------------------------------*/
.slug-tempo{
	
	.st_form_addon{
		font-weight: normal;
	}
	.bpm_minus_btn{
		border-radius: 0;
	}
	.unit_item{
		background-color: #fff;
		border-radius: 3px;
	}
	.sortable-chosen .unit_item{
		box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
	}
	.accent_wrap{
		display: flex;
		flex-wrap: wrap;
		//justify-content: space-between;
		//border-left: 1px solid #fff;
		position: relative;
	}
	.accent_progress{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 0%;
		background-color: rgba(0, 172, 237, 0.6);
	}
	.accent_item{
		position: relative;
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		//border-left-width: 0px;
		background-color: #e3e3e3;
		height: 30px;
		&:first-of-type{
			border-left: 0px;
		}
		&.state_1{
			background-color: #80a8ba;
		}
		&.state_2{
			background-color: #d2858c;
		}
		&.current:before{
			content: '';
			display: block;
			width: 8px;
			height: 8px;
			//border: 1px solid #e3e3e3;
			background-color: #333;
			position: absolute;
			top: calc(50% - 4px);
			left: calc(50% - 4px);
		}
	}
}

/*----------------------------------------
         トーキュ
----------------------------------------*/
.slug-talq{
	
	.sm_no_padding{
		padding-left: 0;
		padding-right: 0;
	}
	.round_box{
		@media #{$lg}{
			border-radius: 14px;
		}
	}
	.font_size_1{
		
	}
	.font_size_2{
		.comment_box{
			font-size: 15px;
		}
		.view_tree{
			.res_item:not(.layer_0):not(.layer_1){
				.comment_box{
					font-size: 13px;
				}
			}
		}
	}
	.font_size_3{
		.comment_box{
			font-size: 17px;
		}

		.view_tree{
			.res_item:not(.layer_1):not(.layer_2){
				.comment_box{
					font-size: 15px;
				}
			}
		}
	}

	.drop_setting{
		background-color: #fff;
		border-radius: 4px;
	}
	
	.page_nation{
		text-align: center;
		a{
			margin-top: 20px;
		}
	}
	
	.board_icon{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		border-radius: 6px;
		background-color: #fff;
		img{
			width: 35px;
		}
	}
	.board_card{
		display: inline-flex;
		align-items: center;
		.title_box{
			flex: 1;
			padding-left: 15px;
			font-weight: bold;
			text-align: left;
		}
	}
	
	.res_header{
		color: #999;
	}

	//top
	.board_search{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 400px;
		background: #fff;
		border-radius: 99px;
		padding: 9px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;
		border: 1px solid #ddd;
		input{
			outline: none;
			appearance: none;
			border: none;
			width: calc(100% - 52px);
		}
	}
	
	//threadページ

	.thread_search{
		//margin-left: auto;
		//margin-right: auto;
		width: 100%;
		//max-width: 300px;
		background: #fff;
		border-radius: 99px;
		padding: 5px 12px 5px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		//font-size: 15px;
		border: 1px solid #ddd;
		input{
			outline: none;
			appearance: none;
			border: none;
			width: calc(100% - 52px);
		}
		button{
			appearance: none;
			border: none;
			background-color: transparent;
		}
	}
	
	.tab_btn{
		display: inline-block;
		padding: 7px 0 4px;
		font-size: 13px;
		border: 1px solid #ccc;
		//border-bottom: none;
		width: 31%;
		//background-color: #ccc;
		border-radius: 4px 4px 0 0;
		&.state_active{
			background-color: #fff;
			border-bottom-color: #fff;
			//position: relative;
			//z-index: 3;
		}
	}
	
	.thread_list{
		margin-left: auto;
		margin-right: auto;
		max-width: 650px;
		.res_item{
			background-color: #fff;
			border: 1px solid #ddd;

			padding: 15px 20px;
			@media #{$sm}{
				padding: 10px 20px;
			}
		}
		.res_item + .res_item{
			margin-top: 5px;
			@media #{$sm}{
				margin-top: -1px;
			}
		}
	}
	
	.add_thread_wrap{
		margin-left: auto;
		margin-right: auto;
		max-width: 700px;
		border: 1px solid #ccc;
		border-radius: 10px ;
		padding: 20px 30px;
		margin-top: 20px;
		background-color: #fff;
	}
	
	//single 
	.sort_menu{
		border-top: 1px solid #ddd;
		text-align: center;
		.sort_btn{
			margin-left: 13px;
		}
		.state_active{
			text-decoration: underline;
		}
	}
	
	.res_first{
		.comment_box{
			min-height: 60px;
		}
	}

	
	.res_list.all_res{
		.res_item + .res_item{
			border-top: 1px solid #ddd;
		}
	}
	
	.sort_menu + .res_list.not_tree{
		border-bottom: 1px solid #ddd;
		.res_item{
			border-top: 1px solid #ddd;
		}
	}
	
	
	
	//single + board-resページ
	.res_area{
		padding: 20px 50px;
		background-color: #fff;
		@media #{$lg}{
			border: 1px solid #ddd;
		}
		
		@media #{$sm}{
			padding: 0 0px 10px;
		}
		
	}
	
	.res_item{
		display: block;

		.res_header{
			@media #{$sm}{
				font-size: 11px;
			}
		}
		.res_num{
			display: block;
			//font-size: 11px;
			opacity: 0.5;
			margin-top: 7px;
		}
		.res_num + .comment_box{
			margin-top: 0px;
		}
		.comment_box{
			margin-top: 8px;
			word-break: break-all;
			//margin-bottom: 8px;
		}
		&.unread{
			font-weight: bold;
		}
	}
	
	.res_footer{
		margin-top: 8px;
	}
	
	.deleted_res{
		font-size: 11px;
		opacity: 0.6;
	}
	
	.not_tree{
		.res_item{
			padding: 20px 30px;
			@media #{$sm}{
				padding: 20px 20px;
			}
		}
	}
	
	.view_tree{
		
		.res_item{
			margin-left: auto;
			width: 75%;
			background-image: url("data:image/gif;base64,R0lGODlhAwABAIAAAN3d3QAAACH5BAAAAAAALAAAAAADAAEAAAIChAsAOw==");
			background-size: 1px calc(100%);
			background-repeat: no-repeat;
			background-position: left top;
			//border-top: none;
			padding: 0 20px;
			@media #{$sm}{
				padding: 0 20px;
			}
		}
		.layer_0,
		.layer_1{
			padding: 20px 30px;
			@media #{$sm}{
				padding: 20px 20px;
			}
		}
		.res_item + .res_item:not(.layer_1){
			margin-bottom: 18px;
		}
		.layer_1{
			border-top: 1px solid #ddd;
		}
		.layer_0{width: 100%;background: none;}
		.layer_1{width: 100%;background: none;}
		.layer_2{width: 95%;}
		.layer_3{width: 90%;}
		.layer_4{width: 85%;}
		.layer_5{width: 80%;}
		
		.layer_0{}
	}
	
	[data-is="riot-page-top"]{

	}
}

/*----------------------------------------
         サブスクまとめ
----------------------------------------*/
.slug-subsc{
	//.service_item{
	//	margin-top: 10px;
	//	border: 1px solid #ccc;
	//	width: 1100px;
	//	.col_group{
	//	}
	//	.col_row{
	//		display: table;
	//		border-collapse: collapse;
	//		table-layout: fixed;
	//		& + .col_row{
	//			border-top: 1px solid #eee;
	//		}
	//	}
	//	.row{
	//		& > div{
	//			display: table;
	//			border-collapse: collapse;
	//			table-layout: fixed;
	//			width: 100%;
	//			.col{
	//				display: table-cell;
	//				vertical-align: middle;
	//			}
	//		}
	//		.title{
	//			background-color: #f3f3f3;
	//			font-size: 11px;
	//			font-weight: bold;
	//			//color: #fff;
	//			.col{
	//				padding: 2px 5px;
	//				text-align: center;
	//			}
	//		}
	//		.content{
	//			border-bottom: 1px solid #eee;
	//			.col{
	//				padding: 2px 5px;
	//				border-left: 1px solid #eee;
	//			}
	//			.plan_price{
	//				text-align: right;
	//			}
	//		}
	//	}
	//	.service_logo{width: 50px;text-align: center;}
	//	.service_name{width: 100px;}
	//	.service_note{}
	//	.songs{width: 100px;}
	//	.trial{width: 100px;}
	//	.col_group{width: 300px;}
	//	.plan_name{width: 100px;}
	//	.plan_price{width: 100px;}
	//	.plan_note{width: 100px;}
	//}

	.service_item{
		.plan_list{
			display: flex;
			flex-wrap: wrap;
		}
		.plan_item{
			margin-right: 1px;
			margin-bottom: 1px;
			width: 200px;
			background-color: #fff;
			padding: 15px;
		}
		.plan_name{
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			color: #00a8f5;
		}
		.pros{
			text-indent: -1.3em;
			padding-left: 1.3em;
			padding-bottom: 7px;
		}
		.cons{
			text-indent: -1.3em;
			padding-left: 1.3em;
			padding-bottom: 7px;
			opacity: 0.5;
		}
		.platform{
			a:not([href]){
				opacity: 0.3;
				cursor: auto;
			}
		}
	}
}

/*----------------------------------------
         名言
----------------------------------------*/
.slug-meigen{
	.page_wrap{
		background-color: #fdfdfd;
	}
	.page_wrap.dark_mode{
		background-color: #292929;
		color: #fff;
	}
	.mincho{
		font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	}
	.phrase_area{
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.text_inner{
		//text-align: center;
		line-height: 2.5;
		padding: 0 8vw;
		min-width: 60vw;
	}
	.contents{
		display: inline-block;
		font-weight: bold;
		text-align: left;
	}
	.author{
		margin-top: 1em;
		text-align: right;
	}

	.scroll_btn{
		height: 100px;
		width: 100px;
		position: sticky;
		top: 0;
		background-color: rgba(255, 0, 0, 0.2);
	}
	.comment_box{
		padding-top: 15px;
		padding-bottom: 10px;
		border-bottom: 1px dotted currentColor;
	}
}

/*----------------------------------------
         カタロウ
----------------------------------------*/
.slug-katalaw{
	.modal-backdrop + .modal-backdrop{
		z-index: 1010;
	}
	[data-is="riot-elem-nav"]{
		position: fixed;
		z-index: 6;
		background-color: #fff;
		border: 1px solid #eee;
		@media #{$lg}{
			padding-top: 15px;
			padding-bottom: 15px;
			top: 50%;
			right: -1px;
			translate: 0 -50%;
		}
		@media #{$sm}{

			padding-right: 15px;
			padding-left: 15px;
			bottom: -1px;
			left: 50%;
			translate: -50% 0;
		}
	}
	//.state_2 .agenda_text_wrap{
	//	background-image: url('../slugs/lawlawlaw/asset/mark_date2.png');
	//	background-position: center;
	//	background-size: contain;
	//	background-repeat: no-repeat;
	//}
	//.state_3 .agenda_text_wrap{
	//	background-image: url('../slugs/lawlawlaw/asset/mark_date3.png');
	//	background-position: center;
	//	background-size: contain;
	//	background-repeat: no-repeat;
	//}
	.submit_group{
		margin-right: 5px;
		background:linear-gradient(transparent 60%, #fff5ad 60%);
	}
	.state_box{
		background-color: #eee;
		border: 1px solid #333;
		&.state_1{
			background-color: #4394f3;
			color: #fff;
		}
		&.state_3{
			background-color: #444;
			color: #ccc;
		}
		//&.state_2{
		//	background-color: #333;
		//	color: #aaa;
		//}
	}
	.popover .arrow {
		position: absolute;
	}
	.popover{
		padding: 5px;
		position: absolute;
		//max-width: 276px;
	}
	.popover-body{
		border: 1px solid #555;
		background-color: #fff;
		padding: 10px;
		border-radius: 3px;
		font-size: 11px;
	}
	.bookmark_link{
		&:not([href]){
			opacity: 0.2;
		}
		&.is_new{
			color: #ff8f22;
		}
	}
}

/*----------------------------------------
         カンバンTodo
----------------------------------------*/
.slug-kanban-todo{
	.area_row{
		min-height: 200px;
		background-color: #eee;
		padding: 5px;
		border-radius: 5px;
		height: 100%;
		.sortable-ghost{
			opacity: 0.8;
		}
	}
	.card_item + .card_item{
		margin-top: 5px;
	}
	.category_wrap{
		border-radius: 4px;
		background-color: #999;
	}
	.category_head{
		padding: 4px 8px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 4px 4px 0 0;
		display: flex;
		justify-content: space-between;
		.name_box{
			flex: 1;
			padding-right: 5px;
		}
		.btn_box{
			
		}
	}
	.task_list{
		padding: 0px 7px 7px;
		min-height: 30px;
	}
	.task_list_deleted{
		padding: 2px 7px 7px;
		background-color: rgba(0, 0, 0, 0.25);
		border-radius: 0 0 4px 4px;
		min-height: 30px;
	}
	.task_list_deleted .task_item{
		opacity: 0.5;
	}
	.task_item{
		overflow: hidden;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 5px;
		&.priority_1 .priority_mark:before{content: '!';}
		&.priority_2 .priority_mark:before{content: '!!';}
		&.priority_3 .priority_mark:before{content: '!!!';}
		.priority_mark{
			font-weight: bold;
			color: red;
		}

		.img_wrap{
			text-align: center;
			border-bottom: 1px solid #ddd;
			&.state_hide{
				max-height: 12px;
				overflow: hidden;
			}
		}
		.trash_wrap{
			width: 15px;
			text-align: right;
		}

		.date_info{
			font-size: 11px;
		}
		

		&.state_ago{
			background-color: #ffebeb;
			.days_text{
				color: red;
			}
		}
		.days_text{
			font-weight: bold;
			margin-right: 10px;

		}
		.date_text{
			color: #777;
		}
		.note_box{
			white-space: pre-wrap;
			font-size: 11px;
			&.state_hide{
				//margin-top: -2px;
				line-height: 1.4;
				max-height: 5px;
			}
		}
	}
	//[data-is="riot-task"]{
		//transition: transform 0.3s;
		//&.sortable-chosen{
		//	transform: scale(1.1);
		//}
	//}
	.re_col_lg_6 > .area_row [data-is="riot-task"]{
		@media #{$lg}{
			margin-right: 1%;
			float: left;
			width: 49%;
		}
	}
	
	[data-is="riot-modal-task"]{
		.html_input{
			border: 1px solid #ccc;
			min-height: 1em;
			padding: 5px;
			white-space: pre-wrap;
		}
		.html_input:empty + .placeholder{
			display: block;
			pointer-events: none;
		}
		.placeholder{
			display: none;
			position: absolute;
			top: 5px;
			left: 5px;
			color: #ccc;
		}
		.img_wrap{
			position: relative;
			padding: 1px;
			background-color: #444;
			text-align: center;
			.clear_image{
				position: absolute;
				top: 5px;
				right: 5px;
				display: inline-block;
				padding: 5px 9px;
				background-color: #fff;
				border-radius: 3px;
			}
		}
	}


	.calendar_area{
		background-color: #fff;
		border-radius: 4px;

		.weekday6 .title_day,
		.weekday6.title_weekday,
		.weekday6 .title_weekday{
			color: blue;
		}
		.weekday0 .title_day,
		.weekday0.title_weekday,
		.weekday0 .title_weekday{
			color: red;
		}
		.day_today .title_day,
		.day_today .title_weekday{
			font-weight: bold;
		}
		.day_today{
			background-color: #ffffbe;
		}

	}
	.style_list{
		//background-color: rgba(255, 255, 255, 0.97);
		font-size: 11px;
		//border: 1px solid rgba(0, 0, 0, 0.2);
		//border-top: none;
		//border-radius: 0 0 4px 4px;

		.event_box{
			/*display: inline-block;*/
		}
		.month_other + .month_this,
		.month_this + .month_other{
			border-top: 2px solid rgba(0, 0, 0, 0.18);
		}
		.line_day{
			border-top: 1px solid rgba(0, 0, 0, 0.18);
		}
		.title_day{
			width: 27px;
			text-align: center;
		}
		.title_weekday{
			width: 23px;
		}

		.day_today{
			.event_wrap:not(:empty){
				font-weight: bold;
				color: red;
				padding-top: 7px;
				padding-bottom: 7px;
			}
		}
	}
	.style_days{
		width: 100%;
		font-size: 10px;
		th{
			text-align: center;
			line-height: 1.4;
		}
		th + th,
		td + td{
			//border-left: 1px solid rgba(0, 0, 0, 0.18);
		}
		td{
			//border-top: 1px solid rgba(0, 0, 0, 0.18);
			padding: 0 2px 0 4px;
			position: relative;
			min-height: 20px;
		}
		.month_other{
			background-color: rgba(0, 0, 0, 0.05);
			.title_day{
				opacity: 0.5;
			}
		}
	}
	.instant_input{
		position: relative;
		top: -1px;
		display: flex;
		.category_name{
			padding-left: 5px;
			width: 40px;
			overflow: hidden;
			color: #fff;
			border-radius: 4px 0 0 4px;
			white-space: nowrap;
			position: relative;
			&:before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: -1;
			}
		}
		.input_box{
			border: 1px solid #999;
			min-height: 26px;
			width: 120px;
			border-radius: 0 4px 4px 0;
			padding-left: 4px;
		}
	}
}
/*----------------------------------------
         muscle
----------------------------------------*/
.slug-muscle{
	//color: #ccc !important;
	.training_image{
		padding-bottom: 60.62%;
		background-size: contain;
		background-position: center;
		background-color: #ccc;
		background-repeat: no-repeat;
	}
	.title_link{
		color: red;
		font-weight: bold;
	}
	.info_area{
		li{
			display: inline;
		}
		li:after{
			content: "\3001";
		}
		li:last-of-type:after{
			content: none;
		}
	}
	.video{
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		margin-top: 20px;
		iframe{
			border: none;
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
	}
	#lightcase-case [data-is^="riot-modal"]{
		max-width: 684px;
	}
	[data-is="riot-drop"]{
		position: fixed;
		z-index: 999999999;
		bottom: 0;
		right: 0;
		background: #eee;
		padding: 10px;
		display: none;
		&.dragging{
			display: block;
		}
	}
}
/*----------------------------------------
         Eleven Table Tennis
----------------------------------------*/
.slug-ett{

	[data-is="riot-page-top"],
	[data-is="riot-page-rank"],
	[data-is="riot-page-matchup"],
	[data-is="riot-page-leaderboard"]{
		.re_container{
			max-width: 500px;
		}
	}
	
	.font_mono{
		font-family: monospace;
	}

	.tooltip{
		z-index: 99999999999;
		background-color: #f3f3f3;
		border: 1px solid #fff;
		padding: 5px 12px;
		border-radius: 3px;
	}
	
	.current{
		opacity: 0.5;
	}
	
	.changelog_list{
		.day{
		}
		.date{
			padding-top: 15px;
			padding-bottom: 4px;
		}
		.content{
			padding-left: 10px;
			padding-top: 3px;
		}
	}
	
	.mod_oval{
		background-color: #fff;
		border-radius: 10px;
	}
	
	table.st_table_light{
		//background-color: transparent;
		tr{
			background-color: transparent;
		}
		td{
			border-bottom: 1px solid #ddd;
		}
		tr:last-child{
			td{
				border-bottom: none;
			}
		}
		//td:nth-of-type(n):nth-of-type(n):nth-of-type(n){
		//	border-radius: 0;
		//}
	}
	
	.fav_list{
		li{
			display: flex;
		}
		.fav_text{
			margin-left: 1em;
		}
	}
	.color_logo{
		color: #ff5941;
	}

	.color_win{color: #08a719;}
	.color_loss{color: red;}

	.status_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.type_box{
			padding: 10px 0;
			width: 24%;
			margin-bottom: 10px;
			text-align: center;
			position: relative;
			@media #{$sm}{
				width: 49%;
			}
			&.diff_chart{
				width: 49.5%;
				padding: 0;
				@media #{$sm}{
					width: 100%;
				}
				.height_space{
					height: 100px;
					position: relative;
				}
				.label_box{
					position: absolute;
					z-index: 999;
					bottom: -4px;
					left: 10px;
					width: calc(100% - 20px);
					text-align: center;
					text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff;
					span{
						font-size: 17px;
						//background-color: rgba(255, 255, 255, 0.5);
						font-weight: bold;
					}
				}
				.elo_max{
					top: 0;
					bottom: auto;
				}
				.elo_min{
				}
				.days_1{
					text-align: right;
				}
				.days_50{
					text-align: left;
				}
				
				[ref="elo_diff"]{
					position: relative;
					top: -18px;
				}
			}
			.power_bar{
				width: 95%;
				height: 2px;
				position: absolute;
				bottom: 5px;
				left: 2.5%;
				background-color: red;
				background-image: linear-gradient(#08a719, #08a719);
				background-repeat: repeat-y;
				background-position: left top;
				&:after{
					content: "";
					position: absolute;
					bottom: -1px;
					left: 50%;
					display: block;
					height: 4px;
					border-left: 1px solid #000;
				}
			}
		}
		.title_box{
			font-size: 11px;
		}
		.value_box{
			padding-top: 5px;
			font-weight: bold;
			font-size: 20px;
			line-height: 1.4;
			letter-spacing: 0;
		}
	}

	.fav_table{
		table-layout: fixed;
		td{
			word-break: break-all;
		}
		select{
			width: calc(100% - 12px);
		}
		.up_btn{
			margin-left: 8px;
			display: inline-block;
			transform: scale(1.2);
		}
		.del_btn{
			display: inline-block;
			transform: scale(1.2);
			margin-left: 19px;
		}
	}
	.match_user_table{
		width: 100%;
		table-layout: fixed;
		//border-bottom: 1px solid #bbb;
		//border-top: 1px solid #bbb;
		//td:nth-of-type(1),
		td:nth-of-type(2){
			font-size: 11px;
			width: 70px;
			color: #888;
		}
		.head_box{
			td{
				word-break: break-all;
				vertical-align: bottom;
				line-height: 1.35;
			}
			//border-bottom: 1px solid #bbb;
		}
	}
	.search_table{
		@media #{$sm}{
			min-width: 400px;
		}
	}

	[data-is="riot-page-leaderboard"]{
		table{
			table-layout: fixed;
		}
		th:nth-of-type(1){width: 20%;}
		th:nth-of-type(2){width: 26%;}
	}
	.activity_area{


	}
	.help_box{
		border: 1px solid #1b9a59;
		border-radius: 4px;
		padding: 4px;
		font-size: 11px;
		color: #1b9a59;
		line-height: 1.3;
		text-align: left;
	}
	.activity_area{
		.help_count{
			position: relative;
			height: 1em;
			width: 10px;
			display: inline-block;
			&:before{
				content: '';
			}
		}
		[class*="count_"]:before{content: '';display: block;position: absolute;top: 0px;left: 0;right: 0;bottom: 0;}
		.count_1:before {background-color: rgba(0, 0, 0, 0.1);}
		.count_2:before {background-color: rgba(0, 0, 0, 0.2);}
		.count_3:before {background-color: rgba(0, 0, 0, 0.3);}
		.count_4:before {background-color: rgba(0, 0, 0, 0.4);}
		.count_5:before {background-color: rgba(0, 0, 0, 0.5);}
		.count_6:before {background-color: rgba(0, 0, 0, 0.6);}
		.count_7:before {background-color: rgba(0, 0, 0, 0.7);}
		.count_8:before {background-color: rgba(0, 0, 0, 0.8);}
		.count_9:before {background-color: rgba(0, 0, 0, 0.9);}
		.count_10:before{background-color: rgba(0, 0, 0, 1.0);}
	}
	.activity_table{
		//margin-top: 20px;
		//padding-top: 20px;
		//padding-bottom: 20px;
		border-bottom: 1px solid #ccc;
		//background-color: #fff;
		.day_row{
			border-top: 1px solid #ddd;
			display: flex;
			
			&.head_box{
				.hour_3{
					@media #{$sm}{
						display: none;
					}
				}
				.hour_9{
					@media #{$sm}{
						display: none;
					}
				}
				.hour_15{
					@media #{$sm}{
						display: none;
					}
				}
				.hour_21{
					@media #{$sm}{
						display: none;
					}
				}
			}
		}
		.desc_box{
			width: 165px;
			display: flex;
			justify-content: space-between;
			padding-left: 8px;
			padding-right: 8px;
			@media #{$sm}{
				padding-top: 5px;
				padding-bottom: 5px;
			}
		}
		.points_box{
			span{
				display: inline-block;
				min-width: 20px;
				text-align: center;
			}
		}
		.timeline_box{
			width: 80%;
			flex: 1;
			position: relative;
			background-size: 25% 100%;
			background-position: right center;
			background-image: linear-gradient(to right,
			#666 0.00%, #666 calc(0.00% + 0.5%), transparent calc(0.00% + 0.5%), transparent 16.6%,
			#eee 16.6%, #eee calc(16.6% + 0.5%), transparent calc(16.6% + 0.5%), transparent 33.2%,
			#eee 33.2%, #eee calc(33.2% + 0.5%), transparent calc(33.2% + 0.5%), transparent 49.8%,
			#eee 49.8%, #eee calc(49.8% + 0.5%), transparent calc(49.8% + 0.5%), transparent 66.4%,
			#eee 66.4%, #eee calc(66.4% + 0.5%), transparent calc(66.4% + 0.5%), transparent 83.0%,
			#eee 83.0%, #eee calc(83.0% + 0.5%), transparent calc(83.0% + 0.5%), transparent 100%);
			@media #{$sm}{
				width: 50%;
				background-image: linear-gradient(to right,
				#666 0.00%, #666 calc(0.00% + 1.0%), transparent calc(0.00% + 1.0%), transparent 16.6%,
				#eee 16.6%, #eee calc(16.6% + 1.0%), transparent calc(16.6% + 1.0%), transparent 33.2%,
				#eee 33.2%, #eee calc(33.2% + 1.0%), transparent calc(33.2% + 1.0%), transparent 49.8%,
				#eee 49.8%, #eee calc(49.8% + 1.0%), transparent calc(49.8% + 1.0%), transparent 66.4%,
				#eee 66.4%, #eee calc(66.4% + 1.0%), transparent calc(66.4% + 1.0%), transparent 83.0%,
				#eee 83.0%, #eee calc(83.0% + 1.0%), transparent calc(83.0% + 1.0%), transparent 100%);
			}
		}
		.hour{
			position: absolute;
			top: 0;
			height: 100%;
			width: 4.15%;
			text-align: center;
			border-left: 1px solid transparent;
		}
		.hour_0 {left:0%;}
		.hour_1 {left:4.17%;}
		.hour_2 {left:8.34%;}
		.hour_3 {left:12.51%;}
		.hour_4 {left:16.68%;}
		.hour_5 {left:20.85%;}
		.hour_6 {left:25.02%;}
		.hour_7 {left:29.19%;}
		.hour_8 {left:33.36%;}
		.hour_9 {left:37.53%;}
		.hour_10{left:41.7%;}
		.hour_11{left:45.87%;}
		.hour_12{left:50.04%;}
		.hour_13{left:54.21%;}
		.hour_14{left:58.38%;}
		.hour_15{left:62.55%;}
		.hour_16{left:66.72%;}
		.hour_17{left:70.89%;}
		.hour_18{left:75.06%;}
		.hour_19{left:79.23%;}
		.hour_20{left:83.4%;}
		.hour_21{left:87.57%;}
		.hour_22{left:91.74%;}
		.hour_23{left:95.91%;}
		
		//.hour_0 {border-left: 1px solid #999;}
		//.hour_6 {border-left: 1px solid #999;}
		//.hour_12{border-left: 1px solid #999;}
		//.hour_18{border-left: 1px solid #999;}
		//.hour_0 {background-color: rgba(0, 0, 0, 0.4);}
		//.hour_1 {background-color: rgba(0, 0, 0, 0.5);}
		//.hour_2 {background-color: rgba(0, 0, 0, 0.5);}
		//.hour_3 {background-color: rgba(0, 0, 0, 0.5);}
		//.hour_4 {background-color: rgba(0, 0, 0, 0.5);}
		//.hour_5 {background-color: rgba(0, 0, 0, 0.3);}
		//.hour_6 {background-color: rgba(0, 0, 0, 0.1);}
		//.hour_7 {background-color: rgba(0, 0, 0, 0.0);}
		//.hour_8 {background-color: rgba(0, 0, 0, 0.0);}
		//.hour_9 {background-color: rgba(0, 0, 0, 0.0);}
		//.hour_10{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_11{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_12{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_13{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_14{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_15{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_16{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_17{background-color: rgba(0, 0, 0, 0.0);}
		//.hour_18{background-color: rgba(0, 0, 0, 0.1);}
		//.hour_19{background-color: rgba(0, 0, 0, 0.2);}
		//.hour_20{background-color: rgba(0, 0, 0, 0.3);}
		//.hour_21{background-color: rgba(0, 0, 0, 0.4);}
		//.hour_22{background-color: rgba(0, 0, 0, 0.4);}
		//.hour_23{background-color: rgba(0, 0, 0, 0.4);}
		//.hour_7,.hour_8,.hour_9,.hour_10,.hour_11,.hour_12,.hour_13,.hour_14,.hour_15,.hour_16,.hour_17,.hour_18,.hour_19{background-color: #f7f7f7;}
	}
	.weekday0 .date_text{color: #da242f;}
	.weekday6 .date_text{color: #1971ff;}
	
	.score_info{
		display: flex;
		justify-content: space-between;
		font-size: 11px;
		opacity: 0.8;
		padding-bottom: 2px;
	}
	
	.opponent_table{
		@media #{$sm}{
			min-width: 550px;
		}
	}
	
	.table_scroll{
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		@media #{$sm}{
			width: calc(100% + 40px);
			margin-left: -20px;
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	.score_table{
		table-layout: fixed;
		@media #{$sm}{
			min-width: 450px;
		}
		&.state_forfeit th{
			background-color: #ccc;
		}

		.col_elo{
			width: 90px;
		}
		.col_user{
			width: 160px;
		}
		.col_round{
			width: 40px;
			text-align: center;
		}
		.col_result{
			width: 62px;
			text-align: center;
		}

	}
	[data-is="riot-modal-1day"]{
		.panel_footer{
			display: flex;
			justify-content: space-between;
		}
	}
	.power_table{
		font-size: 11px;
		th{
			padding-left: 0.5em;
			padding-right: 0.3em;
		}
		td{
			text-align: center;
			padding-left: 0.3em;
			padding-right: 0.3em;
		}
	}
	.attention_forfeit{
		background-color: #d5111d;
		color: #fff;
	}

	
	.add_btn{
		position: sticky;
		bottom: 10px;
	}

	//トーナメント

	.court_item{
		display: flex;
		&.state_win{
			background-color: #e7bd56;
		}
	}
	.bar2{
		&:before,
		&:after{
			position: absolute;
			top: 0;

		}
	}
	.bar1{

	}
}


/*----------------------------------------
         train
----------------------------------------*/
.slug-train{
	.display{
		/*user-select: none;*/
	}
	.select_area{
		display: inline-block;
		position: relative;
	}
	.select_area img{
		max-height: 700px;
	}
	.select_rect{
		/*border: 1px solid red;*/
		position: absolute;
		/*box-shadow: -1px -1px 0 3px #fff;*/
	}
	.select_rect:before{
		position: absolute;
		content: '';
		display: block;
		top: -1px;
		left: -1px;
		right: -1px;
		bottom: -1px;
		border: 4px solid rgba(255, 255, 255, 0.7);
	}
	.select_rect:after{
		position: absolute;
		content: '';
		display: block;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		border: 2px solid red;
	}
	.rect_del{
		z-index: 9;
		position: relative;
		top: 0px;
		left: 0px;
		display: block;
		color: red;
		background-color: #fff;
		border: 2px solid red;
		width: 1.8em;
		line-height: 1.4;
	}
	.rect_del:hover{
		color: black;
		cursor: pointer;
	}
	.image_item{

		&.entered{
			color: #aaa;
		}
		&.current{
			display: block;
			background-color: #e7ede2;
		}
		a:hover{
			color: #289bff;
		}
	}
}

.slug-pusssh{
	//.swipeout .swipeout-content{
	//	transition: padding 0.3s;
	//}
	.list .item-content{
		position: relative;
		left: 0;
		transition-property: background-color, left;
	}
	.checkbox-handler{
		position: absolute;
		top: 10px;
		left: -22px;
		right: 0;
		bottom: 0;
		background-color: transparent !important;
		//opacity: 0;
		z-index: -1;
		//display: none;
		transition: left 0.3s, z-index 0s 0.3s;
	}
	.checkbox-enable{
		&.list .item-content{
			left: 36px;
		}
		.checkbox-handler{
			left: 14px;
			//opacity: 1;
			z-index: 99;
			//display: block;
		}
	}
}

/*----------------------------------------
         radio
----------------------------------------*/
.slug-radio{
	.episode_list{
		li{
			border-bottom: 1px solid #ccc;
		}

		.mark{
			color: #ff3b30;
			cursor: pointer;
		}
		.mark.read{
			color: #ccc;
		}
		.info{
			p:nth-of-type(1){
				font-size: 11px;
				color: #888;
			}
			p:nth-of-type(2){

			}
			p:nth-of-type(3){
				font-size: 11px;
				color: #888;
			}
		}
	}
}

/*----------------------------------------
         SVG
----------------------------------------*/
.sortable-chosen{
	//opacity: 0;
}

//.sortable-ghost{
//	opacity: 0;
//}

.sortable-ghost{
	//opacity: 1;
	.box{
		box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

.slug-svg{

	.aiueo{
		padding-top: 30px;
		padding-bottom: 10px;
	}

	.item .st_form_group{
		margin-bottom: 7px;
	}

	.st_form_light{
		&.st_form_addon,
		.st_form_addon{
			//background-color: #bbb;
			//border-color: #bbb;
			//color: #fff;
			//font-weight: normal;
		}
	}

	.items .box{
		padding: 10px;
		//background-color: #455A64;
		border-radius: 5px;
		background-color: #fff;
		transition: box-shadow 0.2s;
	}
	
	.items .item{
		margin-bottom: 20px;
	}

	.btn_list{
		a{
			margin-bottom: 5px;
		}
		//padding: 10px;
		//background-color: #fff;
	}

	.btn_area{
		/*text-align: right;*/
		margin-bottom: 5px;
	}

	.handle{
		cursor: move;
	}

	.item svg{
		vertical-align: middle;
		max-width: 100%;
	}

	.item .svg{
		display: inline-block;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMTAwOEM2MEVGN0QxMUUzODhENERFMEM3MTAyODJGNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMTAwOEM2MUVGN0QxMUUzODhENERFMEM3MTAyODJGNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQxMDA4QzVFRUY3RDExRTM4OEQ0REUwQzcxMDI4MkY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQxMDA4QzVGRUY3RDExRTM4OEQ0REUwQzcxMDI4MkY2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+87cekgAAACpJREFUeNpi+ffvHwM2cPbMWaziTAwkglENxAAWXOFtbGI8Gkr00wAQYAD2vAiFpS9a6gAAAABJRU5ErkJggg==);
	}

}

/*========================================
         フッター
========================================*/
.page_footer{
	//height: 200px;
	//background-color: #CFD8DC;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	color: #fff;
	background-color: #bbb;
	padding: 10px 5px;
	column-gap: 70px;
	@media #{$sm}{
		column-gap: 20px;
	}
}

/*========================================
         ST
========================================*/
[class*="st_table"]{
	//border-radius: 20px;
	overflow: hidden;
	//border: 1px solid #555;
}

.st_table_light{
	background-color: #fff;
}

//table.table_light{
//	width: 100%;
//	//border-radius: 4px;
//	//overflow: hidden;
//	border-collapse: collapse;
//	border-spacing: 0;
//	tr:nth-child(2n+1){
//		background: #eee;
//	}
//	tr>*{
//		padding: 10px 0px 10px 15px;
//	}
//	th{
//		background-color: #1976D2;
//		color: #fff;
//	}
//}

/*========================================
         lightcase(modal)
========================================*/
#lightcase-case [data-is^="riot-modal"]{
	//max-width: 800px;
	//margin-left: auto;
	//margin-right: auto;
}
#lightcase-overlay{
	//background-color: #08e8de !important
	background-color: #aaa !important
}
html:not([data-lc-type=error]) #lightcase-content .lightcase-contentInner .lightcase-inlineWrap{
	padding: 10px 5px 10px;
}

[data-lc-type="inline"]{
	.lightcase-icon-close{
		display: none;
	}
	#lightcase-case{
		//background-color: #f89 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		width: auto !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	#lightcase-content{
		display: flex !important;
		//display: table;
		min-height: 100%;
		background-color: transparent !important;
	}
	.lightcase-contentInner{
		align-self: center;
		//width: 100%;
		width: 100% !important;
		height: auto !important;
		//display: table-cell;
		//vertical-align: middle;
	}
	//.lightcase-inlineWrap{
	//}
	.lightcase-inlineWrap{
		overflow: visible !important;
		max-width: none !important;
		max-height: none !important;
	}
}

/*========================================
         nprogress
========================================*/
/* Make clicks pass-through */
#nprogress {
	pointer-events: none;
}

#nprogress .bar {
	background: #29d;
	position: fixed;
	z-index: 1031;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow: 0 0 10px #29d, 0 0 5px #29d;
	opacity: 1.0;
	transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
	display: block;
	position: fixed;
	z-index: 1031;
	top: 15px;
	right: 15px;
}

#nprogress .spinner-icon {
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: solid 2px transparent;
	border-top-color: #29d;
	border-left-color: #29d;
	border-radius: 50%;
	animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
	overflow: hidden;
	position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
	position: absolute;
}

@keyframes nprogress-spinner {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*========================================
         notie.js
========================================*/
.notie-container {
	padding: 8px 8px 0;
	font-size: 14px;
	height: auto;
	left: 0;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 2147483647;
	box-sizing: border-box;
	@media #{$lg}{
		max-width: 650px;
		left: calc(50% - (650px + 16px) / 2); 
	
	}
	@media #{$sm}{
		font-size: 13px;
	}
	&[style*="bottom:"]{
		padding-bottom: 8px;
	}
}

.notie-background-success {
	background-color: #57BF57; }

.notie-background-warning {
	background-color: #D6A14D; }

.notie-background-error {
	background-color: #E1715B; }

.notie-background-info {
	background-color: #4D82D6; }

.notie-background-neutral {
	background-color: #A0A0A0; }

.notie-background-overlay {
	background-color: #FFFFFF; }

.notie-textbox {
	color: #FFFFFF;
	border-radius: 4px;
	padding: 13px 10px; }


.notie-container.notie-textbox {
	margin: 8px 8px 0;
	width: calc(100% - 16px);
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
}

.notie-textbox-inner {
	margin: 0 auto;
	max-width: 900px; }

.notie-overlay {
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2147483646; }

.notie-button {
	border-radius: 4px;
	color: #FFFFFF;
	padding: 10px;
	margin-top: 6px;
	cursor: pointer; }

.notie-element {
	color: #FFFFFF;
	padding: 10px; }

.notie-element-half {
	display: inline-block;
	width: calc(50% - 3px);
	box-sizing: border-box; }

.notie-element-half + .notie-element-half{
	margin-left: 6px;
}

.notie-element-third {
	display: inline-block;
	width: 33.3333%;
	box-sizing: border-box; }

.notie-alert {
	cursor: pointer; }

.notie-input-field {
	margin-top: 6px;
	border-radius: 4px;
	background-color: #FFFFFF;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	outline: 0;
	padding: 10px;
	text-align: center;
	width: 100%;
	box-sizing: border-box; }

.notie-select-choice-repeated {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	box-sizing: border-box; }

.notie-date-selector-inner {
	margin: 0 auto;
	max-width: 900px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none; }
.notie-date-selector-inner [contenteditable], .notie-date-selector-inner [contenteditable]:focus {
	outline: 0px solid transparent; }

.notie-date-selector-up {
	transform: rotate(180deg); }



/*========================================
         テンプレート（エディタ機能）
========================================*/
$post-link: #28b;
$post-border: #ccc;

.mce_content{
	line-height: 1.75;

	h1,h2,h3,h4,h5,h6{
		margin-top: 1.3em;
		margin-bottom: 0.8em;
		font-weight: bold;
	}

	h1{
		font-size: 160%;
	}
	h2{
		font-size: 150%;
	}
	h3{
		font-size: 140%;
	}
	h4{
		font-size: 130%;
	}
	h5{
		font-size: 120%;
	}
	h6{
		font-size: 110%;
	}

	p{
		margin-bottom: 1em;
	}

	dt{
		margin-bottom: 0.4em;
		font-weight: bold;
	}
	dd{
		margin: 0 0 1em 1.6em;
	}

	ol,
	ul{
		margin-bottom: 1em;
		padding-left: 2em;
	}
	ol ol,
	ol ul,
	ul ol,
	ul ul {
		margin-bottom: 0em;
	}
	ol li {
		list-style: decimal;
	}
	ul li {
		list-style: disc;
	}

	table{
		margin-bottom: 1em;
		border-top: solid 1px $post-border;
		border-left: solid 1px $post-border;
		border-collapse: collapse;
	}
	th{
		text-align: center;
		font-weight: bold;
	}
	th,
	td{
		padding: 0.8em;
		border-right: solid 1px $post-border;
		border-bottom: solid 1px $post-border;
	}

	blockquote{
		position: relative;
		overflow: hidden;
		margin: 0 0 1em;
		padding: 1.5em;
		border: 1px dotted $post-border;
	}

	pre{
		overflow-x: auto;
		margin-bottom: 1.14em;
		padding: 1.6em;
		max-width: 100%;
		border: 1px solid $post-border;
		word-wrap: normal;
		font-size: 87.5%;
		-webkit-overflow-scrolling: touch;
	}

	hr{
		clear: both;
		margin-bottom: 1em;
		border-width: 0;
	}

	img{
		max-width: 100%;
		height: auto;
	}

	a{
		color: $post-link;
		text-decoration: underline;
	}
	a:hover{
		opacity: 0.7;
	}

	strong{
		font-weight: bold;
	}

	del{
		text-decoration: line-through;
	}

	em{
		font-style: italic;
	}

	code:not(.hljs),
	kbd,
	tt,
	var{
		padding: 3px 6px;
		border: 1px solid $post-border;
		border-radius: 3px;
		font-size: 87.5%;
	}

	ins{
		background: #fff9c0;
	}

	cite{
		border-bottom: 1px dotted $post-border;
	}

	acronym{
		border-bottom: 1px dotted $post-border;
		cursor: help;
	}

	/* 位置 ################ */
	img.aligncenter{
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	img.alignright{
		display: inline-block;
		margin: 0 0 1em 1em;
	}
	img.alignleft{
		display: inline-block;
		margin: 0 1em 1em 0;
	}
	@media #{$lg}{
		.alignright{
			float: right;
		}
		.alignleft{
			float: left;
		}
	}

	h1:last-child,
	h2:last-child,
	h3:last-child,
	h4:last-child,
	h5:last-child,
	h6:last-child,
	p:last-child,
	ol:last-child,
	ul:last-child,
	dl:last-child,
	table:last-child,
	blockquote:last-child,
	pre:last-child,
	hr:last-child{
		margin-bottom: 0;
	}
}