/*--------------------------------------------------------*/
/*	共通                                                  */
/*--------------------------------------------------------*/
.left	{ text-align 	: left ; }
.center { text-align 	: center ; }
.right  { text-align 	: right ; }

.top	{ vertical-align: top ; }
.middle { vertical-align: middle ; }
.bottom { vertical-align: bottom ; }

/* 下線 */
.underline { 
	text-decoration 	: underline ;
}

/* 太字 */
.bold { 
	font-weight 		: bold ;
}

/* 通常太さ */
.font-normal { 
	font-weight			: normal ;
}

/* 縦書き */
.text-vertical { 
	-webkit-writing-mode	: vertical-rl ;
	   -moz-writing-mode	: vertical-rl ;
	    -ms-writing-mode	: tb-rl ;
	     -o-writing-mode	: vertical-rl ;
	        writing-mode	: vertical-rl ;
}


/*---------------------------------*/
/*	block要素の位置合わせ          */
/*---------------------------------*/
/* 位置合わせクリア */
.block-clear {
    display					: block ;
}

/* 横 左寄せ */
.block-left {
    display					: flex ;
    justify-content			: flex-start ;	/* 横方向 */
	/* 以下 Safari用 */
	display					: -webkit-flex ;
    -webkit-justify-content	: flex-start ;
}

/* 横 中央寄せ */
.block-center {
    display					: flex ;
    justify-content			: center ;	/* 横方向 */
	/* 以下 Safari用 */
	display					: -webkit-flex ;
    -webkit-justify-content	: center ;
}

/* 横 右寄せ */
.block-right {
    display					: flex ;
    justify-content			: flex-end ;	/* 横方向 */
	/* 以下 Safari用 */
	display					: -webkit-flex ;
    -webkit-justify-content	: flex-end ;
}

/*------------------------*/
/* 縦 上寄せ */
.block-top {
    display					: flex ;
    align-items				: flex-start ;	/* 縦方向 */
	/* 以下 Safari用 */
	display					: -webkit-flex ;
    -webkit-align-items		: flex-start ;
}

/* 縦 中央寄せ */
.block-middle {
    display					: flex ;
    align-items				: center ;	/* 縦方向 */
	/* 以下 Safari用 */
	display					: -webkit-flex ;
    -webkit-align-items		: center ;
}

/* 縦 下寄せ */
.block-bottom {
    display					: flex ;
    align-items				: flex-end ;	/* 縦方向 */
	/* 以下 Safari用 */
	display					: -webkit-flex ;
    -webkit-align-items		: flex-end ;
}


/*---------------------------------*/
/*	col要素の高さを揃える（rowに指定） */
/*---------------------------------*/
.row-same-height { 
	display			: flex ;
	flex-wrap		: wrap ;
}


/*---------------------------------*/
/*	必須マーク                     */
/*---------------------------------*/
.label-required { 
	background-color: #ff9eff ;
}


/*--------------------------------------------------------*/
/*	Labelタグ                                             */
/*--------------------------------------------------------*/
/*---------------------------------*/
/*	ラジオボタンを太字にしない     */
/*---------------------------------*/
label.RadioLabel { 
	font-weight		: normal ;
	font-size		: 90% ;
}

label.RadioLabel2 { 
	font-weight		: normal ;
	margin-right	: 15px ;
	margin-bottom	: 4px ;
}


/*---------------------------------*/
/*	通常ラベルを太字にしない       */
/*---------------------------------*/
label.form-title { 
	font-weight		: normal ;
	padding			: 0 20px 0 0 ;
}


/*--------------------------------------------------------*/
/*	spanタグ アイコン                                    */
/*--------------------------------------------------------*/
.icon-csv { 
	background		: url(./browser_comp/img/csv_icon.svg) no-repeat 0 50% ;
	background-size	: 28px ;
	display			: block ;
	padding			: 0px 0 0 35px ;
}


/*--------------------------------------------------------*/
/*	spanタグ 色丸                                         */
/*--------------------------------------------------------*/
.CircleMark { 
	font-weight		: bold ;
	font-size		: 32px ;
	display			: inline-block ;
	margin-top		: -6px ;
	vertical-align	: middle ;
	line-height		: 14px ;
}

/* 980px 以下 */
@media screen and ( max-width: 980px ) 
{ 
	.CircleMark { 
		font-size		: 24px ;
		margin-top		: -6px ;
	}
}




/*--------------------------------------------------------*/
/*	ステータスのラベル                                    */
/*--------------------------------------------------------*/
.status-label { 
	display	: inline-block;
	margin	: 0 auto;
	padding	: 0.5em 0.6em ;
}

.status-label.required {
	background-color: #ff7f7f ;
}

.status-label.none {
	color: black;
}

.status-label.reserved {
	background-color: #dd5600 ;
}

.status-label.ordered {
	background-color: #ffa500 ;
}

.status-label.intransit {
	background-color: #9acd32 ;
}

.status-label.arrived {
	background-color: #008000 ;
}

.status-label.shipped {
	background-color: #7f7fff ;
}

.status-label.cancel {
	background-color: #808080 ;
}

.status-label.nonshipment {
	background-color: #808080 ;
}


/*--------------------------------------------------------*/
/*	前景色			                                      */
/*--------------------------------------------------------*/
/* ステータス色 */
.color-none { 
	color: black ;
}
.color-reserved {
	color: #dd5600 ;
}
.color-ordered {
	color: #ffa500 ;
}
.color-intransit {
	color: #9acd32 ;
}
.color-arrived {
	color: #008000 ;
}
.color-shipped {
	color: #7f7fff ;
}
.color-cancel {
	color: #808080 ;
}
.color-nonshipment {
	color: #808080 ;
}

/* フラットボタン（FlatBtn）と同じ色 */
.ColorChinaRed { 
	color: #FF4E00 ;
}
.ColorRed { 
	color: #FF0000 ;
}
.ColorDarkRed { 
	color: #cc0000 ;
}
.ColorLightBlue { 
	color: #00C2FF ;
}
.ColorSteelBlue { 
	color: #5384b5 ;
}
.ColorBlue { 
	color: #0000FF ;
}
.ColorGreen { 
	color: #82EA18 ;
}
.ColorLightGreen { 
	color: #5FE6DC ;
}
.ColorOrange { 
	color: #e68b5e ;
}
.ColorGray { 
	color: #616161 ;
}



/*--------------------------------------------------------*/
/*	背景色			                                      */
/*--------------------------------------------------------*/
/* ステータス色 */
.bgcolor-none { 
	background-color: black ;
}
.bgcolor-reserved {
	background-color: #dd5600 ;
}
.bgcolor-ordered {
	background-color: #ffa500 ;
}
.bgcolor-intransit {
	background-color: #9acd32 ;
}
.bgcolor-arrived {
	background-color: #008000 ;
}
.bgcolor-shipped {
	background-color: #7f7fff ;
}
.bgcolor-cancel {
	background-color: #808080 ;
}
.bgcolor-nonshipment {
	background-color: #808080 ;
}

/* フラットボタン（FlatBtn）と同じ色 */
.BgColorChinaRed { 
	background-color: #FF4E00 ;
}
.BgColorRed { 
	background-color: #FF0000 ;
}
.BgColorDarkRed { 
	background-color: #cc0000 ;
}
.BgColorLightBlue { 
	background-color: #00C2FF ;
}
.BgColorSteelBlue { 
	background-color: #5384b5 ;
}
.BgColorBlue { 
	background-color: #0000FF ;
}
.BgColorGreen { 
	background-color: #82EA18 ;
}
.BgColorLightGreen { 
	background-color: #5FE6DC ;
}
.BgColorOrange { 
	background-color: #e68b5e ;
}
.BgColorGray { 
	background-color: #616161 ;
}




/*--------------------------------------------------------*/
/*	ボタン/フォーム                                       */
/*--------------------------------------------------------*/
/* 大ボタン */
.btn-xxl {
	margin			: 10px 20px ;
	padding			: 12px 16px;
	font-size		: 26px ;
	border-radius	: 8px ;
}

/* 小ボタン */
.btn-xxs {
	margin			: 1px 1px ;
	padding			: 0px 5px;
	font-size		: 11px ;
	border-radius	: 2px ;
}


/*----------------------------------*/
/*  フラットボタン					*/
/*----------------------------------*/
.FlatBtn { 
	color			: #ffffff ;
	margin-left		: 2px ;
	margin-right	: 2px ;
	border			: none ;
	transition		: .25s ;
}
.FlatBtn:hover { 
	opacity			: 0.8 ;
}
.FlatBtn:disabled { 
	opacity			: 0.4 ;
}

/* サイズ */
.FlatBtn.btn-xxs { 
	margin			: 1px 1px ;
	padding			: 1px 5px ;
	border-radius	: 100px ;
	font-size		: 11px ;
}
.FlatBtn.btn-xs { 
	padding			: 2px 10px ;
	border-radius	: 100px ;
	font-size		: 11px ;
}
.FlatBtn.btn-sm { 
	padding			: 5px 14px ;
	border-radius	: 100px ;
}
.FlatBtn.btn-md { 
	padding			: 9px 20px ;
	border-radius	: 100px ;
}
.FlatBtn.btn-lg { 
	padding			: 14px 25px ;
	border-radius	: 100px ;
}
.FlatBtn.btn-xxs-rect { 
	margin			: 1px 1px ;
	padding			: 1px 5px ;
	border-radius	: 4px ;
	font-size		: 11px ;
}
.FlatBtn.btn-xs-rect { 
	padding			: 2px 10px ;
	border-radius	: 4px ;
	font-size		: 11px ;
}
.FlatBtn.btn-sm-rect { 
	padding			: 5px 14px ;
	border-radius	: 5px ;
}
.FlatBtn.btn-md-rect { 
	padding			: 9px 20px ;
	border-radius	: 5px ;
}
.FlatBtn.btn-lg-rect { 
	padding			: 14px 25px ;
	border-radius	: 5px ;
}

/* 色 */
.FlatBtn.Red { 
	background-color: #FF4E00 ;
}
.FlatBtn.DarkRed { 
	background-color: #cc0000 ;
}
.FlatBtn.LightBlue { 
	background-color: #00C2FF ;
}
.FlatBtn.Blue { 
	background-color: #5384b5 ;
}
.FlatBtn.Green { 
	background-color: #82EA18 ;
}
.FlatBtn.LightGreen { 
	background-color: #5FE6DC ;
}
.FlatBtn.Orange { 
	background-color: #e68b5e ;
}
.FlatBtn.Gray { 
	background-color: #616161 ;
}


/*--------------------------------------------------------*/
/*	自作チェックボックス                                  */
/*--------------------------------------------------------*/
input.CustumCheckbox01 { 
	-webkit-appearance	: none ;
	   -moz-appearance	: none ;
	        appearance	: none ;
	
	border-radius		: 3px ;
	position			: relative ;
	width				: 26px ;
	height				: 26px ;
	border				: 2px solid #C0C0C0 ;
	vertical-align		: middle ;
	background			: #FFFFFF ;
	margin				: 0 5px 0 0 ;
}

.CustumCheckbox01:checked { 
	background			: rgba( 57 , 202 , 148 , 0.08 ) ;
	border				: 2px solid #39CA94 ;
}

.CustumCheckbox01:checked:before { 
	content				: '' ;
	position			: absolute ;
	display				: block ;
	top					: 75% ;
	left				: 41% ;
	width				: 50% ;
	height				: calc( 11.7% + 1.6px ) ;
	max-height			: 20% ;
	border-radius		: 100px ;
	transform			: rotateZ( -135deg ) ;
	transform-origin	: left ;
	background			: #39CA94 ;
}

.CustumCheckbox01:checked:after { 
	content				: '' ;
	position			: absolute ;
	display				: block ;
	top					: 75% ;
	left				: 32% ;
	width				: 90% ;
	height				: calc( 11.7% + 1.6px ) ;
	max-height			: 20% ;
	border-radius		: 100px ;
	transform-origin	: left ;
	transform			: rotateZ( -45deg ) ;
	background			: #39CA94 ;
}

.CustumCheckbox01:focus { 
	outline				: none !important ;
	box-shadow			: 0 0 4px #004AA1 ;
}

/* サイズ */
.CustumCheckbox01.chk-xs { 
	width				: 16px ;
	height				: 16px ;
	margin-right		: 3px ;
}
.CustumCheckbox01.chk-sm { 
	width				: 20px !important ;
	height				: 20px !important ;
	margin-right		: 4px ;
}
.CustumCheckbox01.chk-md { 
	width				: 26px !important ;
	height				: 26px !important ;
	margin-right		: 5px ;
}
.CustumCheckbox01.chk-lg { 
	width				: 32px !important ;
	height				: 32px !important ;
	margin-right		: 7px ;
}

CustumCheckbox01.m0 { 
	margin				: 0 ;
}


/*--------------------------------------------------------*/
/*	divタグ                                               */
/*--------------------------------------------------------*/
/*---------------------------------*/
/*	エラーメッセージ用 div         */
/*---------------------------------*/
div.ErrMsgArea { 
    background-color: #ffefff ;
    color			: red ;
    font-size		: 110% ;
    padding			: 10px ;
    margin-bottom	: 20px ;
    border			: 1px solid red ;
    border-radius	: 5px ;
}

/*---------------------------------*/
/*	成功メッセージ用 div           */
/*---------------------------------*/
div.SuccessMsgArea { 
    background-color: #efefff ;
    color			: #3333ff ;
    font-size		: 110% ;
    padding			: 10px ;
    margin-bottom	: 20px ;
    border			: 1px solid #3333ff ;
    border-radius	: 5px ;
}

/*---------------------------------*/
/*	注意メッセージ用 div           */
/*---------------------------------*/
div.AttentionMsgArea { 
    background-color: #ffffe0 ;
    color			: #ff8c00 ;
    font-size		: 110% ;
    padding			: 10px ;
    margin-bottom	: 20px ;
    border			: 1px solid #ff8c00 ;
    border-radius	: 5px ;
}


/*---------------------------------*/
/*	参考メッセージ用 div           */
/*---------------------------------*/
div.ExsampleMsgArea { 
/*    background-color: #f9f9f9 ; */
    color			: #999999 ;
    padding			: 10px ;
    margin-bottom	: 20px ;
    border			: 1px solid #999999 ;
    border-radius	: 5px ;
}

div.MocaExplain { 
/*    background-color: #f9f9f9 ; */
    color			: #999999 ;
    padding			: 10px ;
    margin-bottom	: 20px ;
    border			: 1px solid #999999 ;
    border-radius	: 5px ;
}


/*---------------------------------*/
/*	スクロール div                 */
/*---------------------------------*/
div.scroll_div { 
	overflow		: scroll ;
	margin-left		: 20px ;
	width			: 97% ;
	border			: 1px solid #666666 ;
}


/* X方向のみ */
div.ScrollDivX { 
	overflow-x		: scroll ;
}

/* Y方向のみ */
div.ScrollDivY { 
	overflow-y		: scroll ;
}


/*---------------------------------*/
/*	ドロップエリア div             */
/*---------------------------------*/
div.DropRectArea { 
	background-color: #e0e0e0 ;
	padding			: 10px ;
	border			: 5px dashed transparent ;
    border-color	: #a0a0a0 ;
    border-radius	: 4px ;
	font-size		: 20px ;
	color			: #808080 ;
	text-align 		: center ;
    display			: table-cell ;
    vertical-align	: middle ;
}


/*---------------------------------*/
/*	ファイル選択 labelボタン（水色）*/
/*---------------------------------*/
.FileSelBtn {
	padding				: 8px 12px ;
	height				: 38px ;
	font-weight			: normal ;
	text-align			: center ;
	vertical-align		: middle ;
	line-height			: 1.42857143 ;
	color				: #ffffff ;
    cursor				: pointer ;
	border-radius		: 4px ;
	background-image	: linear-gradient(#54b4eb, #2fa4e7 60%, #1d9ce5);
    background-repeat	: no-repeat	;
	border-bottom		: 1px solid #178acc ;
	background-color	: #2fa4e7 ;
    border-color		: #2fa4e7 ;
	filter				: none ;
	-ms-filter			: none ;
	text-shadow			: 0 1px 0 rgba(0,0,0,0.1) ;
}

.FileSelBtn:active {  /* クリックした時 */
  -ms-transform			: translateY(2px);
  -webkit-transform		: translateY(2px);
  transform				: translateY(2px);
  box-shadow			: none;
}



/*--------------------------------------------------------*/
/*	spanタグ                                              */
/*--------------------------------------------------------*/
/*---------------------------------*/
/*	説明文章用                     */
/*---------------------------------*/
span.SpanExplain { 
	font-size			: 16px ;
	color				: #666666 ;
	padding				: 2px ;
	margin				: 2px ;
}


/*--------------------------------------------------------*/
/*	上部タブリンク                                        */
/*--------------------------------------------------------*/
.PageLinkTabWrap { 
	font-size			: 0 ;
	border-bottom		: solid 3px #f16272 ;
	margin-bottom		: -4px ;
	z-index				: 10 ;
}
.PageLinkTab { 
	width				: 256px ;
	font-size			: 20px ;
	display				: inline-block ;
	border				: solid 1px #F1F0F2 ;
	text-align			: center ;
	color				: #f16272 ;
	background			: #F1F0F2 ;
	padding				: 15px ;
	font-weight			: bold ;
	border-radius		: 10px 10px 0 0 ;
}
.PageLinkTab.current { 
	background			: #f16272 ;
	border				: solid 1px #f16272 ;
	border-radius		: 10px 10px 0 0 ;
	color				: #fff ;
}
.PageLinkTab:hover { 
	text-decoration		: none ;
	background			: #f16272 ;
	color				: #fff ;
	border				: solid 1px #f16272 ;
}
.PageLinkTab.current:hover { 
	text-decoration		: none ;
	color				: #fff ;
}

/* 990px 以下 */
@media screen and ( max-width: 990px ) 
{
	.PageLinkTab { 
		width				: 33.333% ;
	}
}

/* 767px 以下 */
@media screen and ( max-width: 767px ) 
{
	.PageLinkTabWrap	{ 
		margin-top			: 5px ;
		margin-bottom		: -4px ;
	}
	.PageLinkTab { 
		width				: 33.333333% ;
		font-size			: 14px ;
		padding				: 15px 7px ;
	}
}



/*--------------------------------------------------------*/
/*	ページネーション                                      */
/*--------------------------------------------------------*/
.PaginateContainer {
    padding			: 5px ;
}


/*---------------------------------*/
/*	白系                           */
/*---------------------------------*/
.PaginateBtn {
    display			: inline-block ;
    padding			: 6px 12px ;
    margin-right	: 6px ;
    border-radius	: 3px ;
    border			: solid 1px #c0c0c0 ;
    background		: #e9e9e9 ;
    box-shadow		: inset 0px 1px 0px rgba( 255 , 255 , 255 , .8 ) , 0px 1px 3px rgba( 0 , 0 , 0 , .1 ) ;
    font-weight		: bold ;
    text-decoration	: none ;
    color			: #717171 ;
    text-shadow		: 0px 1px 0px rgba( 255 , 255 , 255 , 1 ) ;
}

.PaginateBtn.active {
    border			: none ;
    background		: #616161 ;
    box-shadow		: inset 0px 0px 8px rgba( 0 , 0 , 0 , .5 ) , 0px 1px 0px rgba( 255 , 255 , 255 , .8 ) ;
    color			: #f0f0f0 ;
    text-shadow		: 0px 0px 3px rgba( 0 , 0 , 0 , .5 ) ;
}

.PaginateBtn.gradient {
    background		: -webkit-gradient( linear , 0% 0% , 0% 100% , from( #f8f8f8 ) , to( #e9e9e9 ) ) ;
    background		: -moz-linear-gradient( 0% 0% 270deg , #f8f8f8 , #e9e9e9 ) ;
}

.PaginateBtn.gradient:hover {
    background		: #fefefe ;
    background		: -webkit-gradient( linear , 0% 0% , 0% 100% , from( #FEFEFE ) , to( #f0f0f0 ) ) ;
    background		: -moz-linear-gradient( 0% 0% 270deg,#FEFEFE, #f0f0f0);
}


/*---------------------------------*/
/*	黒系                           */
/*---------------------------------*/
.PaginateContainer.dark {
    background		: #414449 ;
    color			: #feffff ;
}

.PaginateBtn.dark {
    border			: solid 1px #32373b;
    background		: #3e4347;
    box-shadow		: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
    color			: #feffff;
    text-shadow		: 0px 1px 0px rgba(0,0,0, .5);
}

.PaginateBtn.dark.gradient:hover {
    background		: #3d4f5d;
    background		: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
    background		: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}

.PaginateBtn.dark.active {
    border			: none ;
    background		: #2f3237 ;
    box-shadow		: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);
}

.PaginateBtn.dark.gradient {
    background		: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
    background		: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);
}


/*--------------------------------------------------------*/
/*	初期読込中表示                                        */
/*--------------------------------------------------------*/
.DocumentLoading {
	height		: 100vh;
	position	: relative;
}

.balls-guruguru {
	position		: absolute;
	left			: 50%;
	top				: 50%;
	transform		: translate(-50%, -50%);
	width			: 100px;
	height			: 100px;
	background-color: #fff;
}

.ball {
	width			: 50%;
	height			: 20px;
	position		: absolute;
	top				: calc(50% - 10px);
	transform-origin: 100% 50%;
	left			: 0;
}

.ball::before {
	content			: '';
	display			: block;
	width			: 20px;
	height			: 20px;
	border-radius	: 50%;
	background-color: #333;
	position		: absolute;
	left			: 0;
	top				: 50%;
	transform		: translateY(-50%);
}
.ball-1::before {
  animation			: ball-guruguru 1s linear 0s infinite;
}
.ball-2 {
  transform			: rotate(45deg);
}
.ball-2::before {
  animation			: ball-guruguru 1s linear -0.125s infinite;
}
.ball-3 {
  transform			: rotate(90deg);
}
.ball-3::before {
  animation			: ball-guruguru 1s linear -0.25s infinite;
}
.ball-4 {
  transform			: rotate(135deg);
}
.ball-4::before {
  animation			: ball-guruguru 1s linear -0.375s infinite;
}
.ball-5 {
  transform			: rotate(180deg);
}
.ball-5::before {
  animation			: ball-guruguru 1s linear -0.5s infinite;
}
.ball-6 {
  transform			: rotate(225deg);
}
.ball-6::before {
  animation			: ball-guruguru 1s linear -0.625s infinite;
}
.ball-7 {
  transform			: rotate(270deg);
}
.ball-7::before {
  animation			: ball-guruguru 1s linear -0.75s infinite;
}
.ball-8 {
  transform			: rotate(315deg);
}
.ball-8::before {
  animation			: ball-guruguru 1s linear -0.875s infinite;
}
@keyframes ball-guruguru {
	0% {
		width		: 20px;
		height		: 20px;
		opacity		: 1;
	}
	100% {
		width		: 6px;
		height		: 6px;
		opacity		: .2;
		margin-left	: 7px;
	}
}


/*--------------------------------------------------------*/
/*	テーブル                                              */
/*--------------------------------------------------------*/
/* エラーセル */
.table .ErrorCell {
	border-top		: solid 2px #FF0000 ;
	border-right	: solid 2px #FF0000 ;
	border-left		: solid 2px #FF0000 ;
	border-bottom	: solid 2px #FF0000 ;
}


/*--------------------------------------------------------*/
/*	テーブル Grid01                                       */
/*--------------------------------------------------------*/
table.Grid01 {
	table-layout		: fixed ;
	border				: 1px solid black ;
	border-collapse		: collapse ;
	font-size			: 14px ;
}

/*---------------------------------*/
/*	全ての td/th 共通              */
/*---------------------------------*/
table.Grid01 td {
	line-height			: 1.2em ;
	border				: 1px solid gray ;
	padding				: 8px ;
}

table.Grid01 th {
	line-height			: 1.2em ;
	border				: 1px solid gray ;
	padding				: 8px ;
	background-color	: #eeeeee ;
}

/*---------------------------------*/
/*	thead 部分                     */
/*---------------------------------*/
table.Grid01 thead td ,
table.Grid01 thead th { 
	text-align			: center  ;
/*	background-color	: #b7b7ff ;	*/
	background-color	: #eeeeee ;
	padding				: 6px 2px ;
}


/*--------------------------------------------------------*/
/*	テーブル Grid02                                       */
/*--------------------------------------------------------*/
/*	Grid01 と同じで、偶数行/奇数行 に色が付く版           */
/*--------------------------------------------------------*/
table.Grid02 {
	table-layout		: fixed ;
	border				: 1px solid black ;
	border-collapse		: collapse ;
	font-size			: 14px ;
}

/*---------------------------------*/
/*	全ての td/th 共通              */
/*---------------------------------*/
table.Grid02 td {
	line-height			: 1.2em ;
	border				: 1px solid gray ;
	padding				: 8px ;
}

table.Grid02 th {
	line-height			: 1.2em ;
	border				: 1px solid gray ;
	padding				: 8px ;
	background-color	: #eeeeee ;
}


/*---------------------------------*/
/*	thead 部分                     */
/*---------------------------------*/
table.Grid02 thead td ,
table.Grid02 thead th { 
	text-align			: center  ;
	background-color	: #b7b7ff ;
	padding				: 6px 2px ;
}

/*---------------------------------*/
/*	tbody 部分                     */
/*---------------------------------*/
/* ヘッダー列（trの 偶数/奇数 行で、thで指定した部分） */
table.Grid02 tbody tr:nth-child( even ) th {
    background			: #cccccc ;
}

table.Grid02 tbody tr:nth-child( odd ) th {
    background			: #dddddd ;
}

/* データ行（trの 偶数/奇数 行で、tdで指定した部分） */
table.Grid02 tbody tr:nth-child( even ) td {
    background			: #f0f0f0 ;
}

table.Grid02 tbody tr:nth-child( odd ) td {
    background			: #ffffff ;
}


/*--------------------------------------------------------*/
/*	テーブル Grid03（Grid01のborder色が薄いグレー）       */
/*--------------------------------------------------------*/
table.Grid03 {
	table-layout		: fixed ;
	border				: 1px solid #dddddd ;
	border-collapse		: collapse ;
	font-size			: 14px ;
}

/*---------------------------------*/
/*	全ての td/th 共通              */
/*---------------------------------*/
table.Grid03 td {
	line-height			: 1.2em ;
	border				: 1px solid #dddddd ;
	padding				: 8px ;
}

table.Grid03 th {
	line-height			: 1.2em ;
	border				: 1px solid #dddddd ;
	padding				: 8px ;
	background-color	: #eeeeee ;
}

/*---------------------------------*/
/*	thead 部分                     */
/*---------------------------------*/
table.Grid03 thead td ,
table.Grid03 thead th { 
	text-align			: center  ;
/*	background-color	: #b7b7ff ;	*/
	background-color	: #eeeeee ;
	padding				: 6px 2px ;
}


/*--------------------------------------------------------*/
/*	テーブル Grid04                                       */
/*--------------------------------------------------------*/
/*	Grid03 と同じで、偶数行/奇数行 に色が付く版           */
/*--------------------------------------------------------*/
table.Grid04 {
	table-layout		: fixed ;
	border				: 1px solid #dddddd ;
	border-collapse		: collapse ;
	font-size			: 14px ;
}

/*---------------------------------*/
/*	全ての td/th 共通              */
/*---------------------------------*/
table.Grid04 td {
	line-height			: 1.2em ;
	border				: 1px solid #dddddd ;
	padding				: 8px ;
}

table.Grid04 th {
	line-height			: 1.2em ;
	border				: 1px solid #dddddd ;
	padding				: 8px ;
	background-color	: #eeeeee ;
}

/*---------------------------------*/
/*	thead 部分                     */
/*---------------------------------*/
table.Grid04 thead td ,
table.Grid04 thead th { 
	text-align			: center  ;
	background-color	: #b7b7ff ;
	padding				: 6px 2px ;
}

/*---------------------------------*/
/*	tbody 部分                     */
/*---------------------------------*/
/* ヘッダー列（trの 偶数/奇数 行で、thで指定した部分） */
table.Grid04 tbody tr:nth-child( even ) th {
    background			: #cccccc ;
}

table.Grid04 tbody tr:nth-child( odd ) th {
    background			: #dddddd ;
}

/* データ行（trの 偶数/奇数 行で、tdで指定した部分） */
table.Grid04 tbody tr:nth-child( even ) td {
    background			: #f0f0f0 ;
}

table.Grid04 tbody tr:nth-child( odd ) td {
    background			: #ffffff ;
}


/*--------------------------------------------------------*/
/*	テーブル グレーのストライプ                           */
/*--------------------------------------------------------*/
table.GrayStripe { 
	width				: 100% ;
	border				: solid 1px #a9a9a9 ;
}

table.GrayStripe thead th {
	background-color	: #D0D0D0 ;
    border				: solid 1px #9a9a9a ;
	padding				: 8px 6px ;
}

table.GrayStripe tbody tr:nth-child( odd ) {
	background			: #F8F8FA ;
}

table.GrayStripe tbody tr:nth-child( even ) {
	background			: #FFFFFF ;
}

table.GrayStripe tbody td {
	padding				: 8px 6px ;
    border				: none ;
}

table.GrayStripe tbody td:not(:last-child) {
	border-right		: solid 1px #d5d5d5 ;
}




/*--------------------------------------------------------*/
/*	テーブル ClearGrid（完全に透明なテーブル）            */
/*--------------------------------------------------------*/
table.ClearGrid {
	border				: 0 ;
	padding				: 0 ;
	margin				: 0 ;
}

table.ClearGrid th ,
table.ClearGrid td ,
table.ClearGrid tbody th ,
table.ClearGrid tbody td {
	border				: 0 ;
	padding				: 2px ;
	margin				: 0 ;
}




/*--------------------------------------------------------*/
/*	マウスオーバーで標示される吹き出し                    */
/*--------------------------------------------------------*/

/* 幅600 */
.fukidashi_baloon { 
	z-index : 30 ;
}

.fukidashi_600 {
    position: relative;
}

.fukidashi_600:hover .fukidashi_text_600 {
  display: inline;
}

.fukidashi_text_600 {
   	position: absolute;
   	display: none;
   	padding: 10px;
   	border-radius	: 5px;
   	left			: 0px;		/* 表示位置 */
   	margin-bottom 	: 0px;		/* 表示位置 */
   	bottom			: 100%;		/* 表示位置 */
   	width: 600px;
   	background: #ffbf7f;
   	color: #000000;
   	/*
   	font-weight: bold;
   	*/
 	font-size: 12px;

}

.fukidashi_text_600:after {
  	position: absolute;
  	bottom: -20px;
  	left: 10px;
  	width: 0;
  	height: 0;
  	margin-left: 10px;
  	border: solid transparent;
  	border-color: rgba(51, 51, 51, 0);
  	border-top-color: #ffbf7f;
  	border-width: 10px;
  	pointer-events: none;
  	content: " ";
}

/* 幅400 */
.fukidashi_400 {
    position: relative;
}

.fukidashi_400:hover .fukidashi_text_400 {
  display: inline;
}

.fukidashi_text_400 {
   	position: absolute;
   	display: none;
   	padding: 10px;
   	border-radius	: 5px;
   	left			: 0px;		/* 表示位置 */
   	margin-bottom 	: 12px;		/* 表示位置 */
   	bottom			: 100%;		/* 表示位置 */
   	width: 400px;
   	background: #ffbf7f;
   	color: #000000;
   	/*
   	font-weight: bold;
   	*/
 	font-size: 12px;

}

.fukidashi_text_400:after {
  	position: absolute;
  	bottom: -20px;
  	left: 10px;
  	width: 0;
  	height: 0;
  	margin-left: 10px;
  	border: solid transparent;
  	border-color: rgba(51, 51, 51, 0);
  	border-top-color: #ffbf7f;
  	border-width: 10px;
  	pointer-events: none;
  	content: " ";
}



/* 幅300 */
.fukidashi_300 {
    position: relative;
}

.fukidashi_300:hover .fukidashi_text_300 {
  display: inline;
}

.fukidashi_text_300 {
   	position: absolute;
   	display: none;
   	padding: 10px;
   	border-radius	: 5px;
   	left			: 0px;		/* 表示位置 */
   	margin-bottom 	: 12px;		/* 表示位置 */
   	bottom			: 100%;		/* 表示位置 */
   	width: 300px;
   	background: #ffbf7f;
   	color: #000000;
   	/*
   	font-weight: bold;
   	*/
 	font-size: 12px;

}

.fukidashi_text_300:after {
  	position: absolute;
  	bottom: -20px;
  	left: 10px;
  	width: 0;
  	height: 0;
  	margin-left: 10px;
  	border: solid transparent;
  	border-color: rgba(51, 51, 51, 0);
  	border-top-color: #ffbf7f;
  	border-width: 10px;
  	pointer-events: none;
  	content: " ";
}



/* 幅200 */
.fukidashi_200 {
    position: relative;
}

.fukidashi_200:hover .fukidashi_text_200 {
  display: inline;
}

.fukidashi_text_200 {
   	position: absolute;
   	display: none;
   	padding: 10px;
   	border-radius	: 5px;
   	left			: 0px;		/* 表示位置 */
   	margin-bottom 	: 12px;		/* 表示位置 */
   	bottom			: 100%;		/* 表示位置 */
   	width: 200px;
   	background: #ffbf7f;
   	color: #000000;
   	/*
   	font-weight: bold;
   	*/
 	font-size: 12px;

}

.fukidashi_text_200:after {
  	position: absolute;
  	bottom: -20px;
  	left: 10px;
  	width: 0;
  	height: 0;
  	margin-left: 10px;
  	border: solid transparent;
  	border-color: rgba(51, 51, 51, 0);
  	border-top-color: #ffbf7f;
  	border-width: 10px;
  	pointer-events: none;
  	content: " ";
}


/* 幅150 */
.fukidashi_150 {
    position: relative;
}

.fukidashi_150:hover .fukidashi_text_150 {
  display: inline;
}

.fukidashi_text_150 {
   	position: absolute;
   	display: none;
   	padding: 10px;
   	border-radius	: 5px;
   	left			: 0px;		/* 表示位置 */
   	margin-bottom 	: 12px;		/* 表示位置 */
   	bottom			: 100%;		/* 表示位置 */
   	width: 150px;
   	background: #ffbf7f;
   	color: #000000;
   	/*
   	font-weight: bold;
   	*/
 	font-size: 12px;

}

.fukidashi_text_150:after {
  	position: absolute;
  	bottom: -20px;
  	left: 10px;
  	width: 0;
  	height: 0;
  	margin-left: 10px;
  	border: solid transparent;
  	border-color: rgba(51, 51, 51, 0);
  	border-top-color: #ffbf7f;
  	border-width: 10px;
  	pointer-events: none;
  	content: " ";
}


/* 幅100 */
.fukidashi_100 {
    position: relative;
}

.fukidashi_100:hover .fukidashi_text_100 {
  display: inline;
}

.fukidashi_text_100 {
   	position: absolute;
   	display: none;
   	padding: 10px;
   	border-radius	: 5px;
   	left			: 0px;		/* 表示位置 */
   	margin-bottom 	: 12px;		/* 表示位置 */
   	bottom			: 100%;		/* 表示位置 */
   	width: 100px;
   	background: #ffbf7f;
   	color: #000000;
   	/*
   	font-weight: bold;
   	*/
 	font-size: 12px;

}

.fukidashi_text_100:after {
  	position: absolute;
  	bottom: -20px;
  	left: 10px;
  	width: 0;
  	height: 0;
  	margin-left: 10px;
  	border: solid transparent;
  	border-color: rgba(51, 51, 51, 0);
  	border-top-color: #ffbf7f;
  	border-width: 10px;
  	pointer-events: none;
  	content: " ";
}


/*--------------------------------------------------------*/
/*	大きいチェックボックス                                */
/*--------------------------------------------------------*/
/* 参考サイト */
/* https://kodocode.net/design-css-checkbox/ */
label.btn span {
  font-size: 1.5em ;
}

label input[type="radio"] ~ i.fa.fa-circle-o{
    color: #c8c8c8;    display: inline;
}

label input[type="radio"] ~ i.fa.fa-dot-circle-o{
    display: none;
}

label input[type="radio"]:checked ~ i.fa.fa-circle-o{
    display: none;
}

label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
	color: #7AA3CC;    display: inline;
}

label:hover input[type="radio"] ~ i.fa {
	color: #7AA3CC;
}

label input[type="checkbox"] ~ i.fa.fa-square-o{
    color: #c8c8c8;    display: inline;
}

label input[type="checkbox"] ~ i.fa.fa-check-square-o{
    display: none;
}

label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
    display: none;
}

label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
    color: #7AA3CC;    display: inline;
}

label:hover input[type="checkbox"] ~ i.fa {
	color: #7AA3CC;
}

div[data-toggle="buttons"] label.active{
    color: #7AA3CC;
}

div[data-toggle="buttons"] label {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 2em;
	text-align: left;
	white-space: nowrap;
	vertical-align: top;
	cursor: pointer;
	background-color: none;
	border: 0px solid 
	#c8c8c8;
	border-radius: 3px;
	color: #c8c8c8;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

div[data-toggle="buttons"] label:hover {
	color: #7AA3CC;
}

div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*ページトップボタン*/
#page_top {
	position: fixed;
	z-index:9999;
	bottom: 20px;
	right: 20px;
}

#page_top a {
	background-color: #f16272;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 2px 10px;
	border-radius: 4px;
	display: block;
}

#page_top a:hover {
	opacity:.8;
	text-decoration: none;
}

#page_top a span {
	font-size:10px;
	display:block;
	line-height: 0;
	padding: 10px 0 4px;
}

.navbar-default .top-menu >.open>a, 
.navbar-default .top-menu >.open>a:hover, 
.navbar-default .top-menu >.open>a:focus {
	background-color: #ffffff;
	color:#555555;
}

.navbar .dropdown-menu {
	padding: 0;
}

.navbar .dropdown-menu>li>a {
	padding: 6px 20px;
}

.navbar .dropdown-menu>li>a:hover, 
.navbar .dropdown-menu>li>a:focus {
	background-color: #f16272;
}

.navbar {
	background: #fff;
	border:none;
	border-bottom: solid 2px #e0e0e0;
	box-shadow: none;
}

.navbar .navbar-nav>li>a, .navbar-brand {
	text-shadow: none;
	color: #555555;
}

.navbar-inner .pull-right .dropdown-toggle {
	background: none;
	box-shadow: none;
	border: none;
}

.navbar-inner .navbar-nav {
	float:right;
}

.HeaderDMenu button {
	background: none;
	border: none;
}

.HeaderDMenu:hover {
	color:#fff;
}

.navbar-inner li.dropdown a[data-toggle="dropdown"]:hover {
	background:none;
	color:#555;
}

.col-lg-2.col-sm-2 .sidebar-nav {
	box-shadow: none;
	border-radius: 3px;
	border: solid 1px #e2e2e2;
	padding: 5px 13px;
}

.sidebar-nav ul li a {
	color:#555;
}

.sidebar-nav .RedArrow {
	background: url(./browser_comp/img/arrow_icon_2.svg) no-repeat right 15px center;
}

.sidebar-nav .main-menu > li > a {
	border:none;
	border-bottom:solid 1px #e2e2e2;
	border-radius:0;
}

.sidebar-nav .main-menu > li:last-child > a {
	border:none;
}

.sidebar-nav .ChatCounts {
	display: inline-block;
	position: static;
	background: #f16272;
	border: none;
	font-size: 14px;
	min-height: 18px;
	min-width: 18px;
	line-height: 18px;
}

.sidebar-nav .nav>li>a:hover, 
.sidebar-nav .nav>li>a:focus {
	color:#555;
	background-color: #fff;
}

.sidebar-nav .nav-pills>li.active>a, 
.sidebar-nav .nav-pills>li.active>a:hover, 
.sidebar-nav .nav-pills>li.active>a:focus {
	color:#555;
	background-color: #fff;
}

.navbar-brand {
	width: auto;
}

.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus {
	background: #fff !important;
	color:#555;
}

.CommentaryLink {
	text-align: right;
	margin: 10px 0;
}

.CommentaryLink a {
	text-align: center;
	display: inline-block;
	padding: 5px 20px;
	color: #fff;
	font-size: 16px;
	background: #f16272;
	border-radius: 100px;
}


@media screen and ( max-width: 767px ) {

	#page_top {
		bottom: 6px;
		right: 6px;
	}

	#page_top a {
		padding: 10px 6px;
	}

	footer.row {
		margin: 0;
	}

	.navbar .animated.flip {
		border: none;
		background: #f16272;
	}

	ul.main-menu a.RedArrow:hover, .nav-sm a.RedArrow:hover {
		background: url(./browser_comp/img/arrow_icon_2.svg) no-repeat right 15px center !important;
	}

	#content .sidebar-nav {
		position:static;
		padding: 0;
		box-shadow: none;
	}

	#content .sidebar-nav .nav-canvas {
		position: static;
		background: #fff;
		width: 100%;
	}

	#content .sidebar-nav .box-header {
		background: none;
	}

	#content .sidebar-nav .box-header h2 {
		color:#777777;
	}

	#content .sidebar-nav .box-inner {
		box-shadow:none;
	}

	.sidebar-nav ul.nav li {
		border-bottom:solid 1px #ccc;
	}

	.sidebar-nav .nav-sm.nav {
		display:none;
	}

	.sidebar-nav ul.nav li ul li:last-child {
		border-bottom: none
	}

	.sidebar-nav .nav-pills>li.active>a, .sidebar-nav .nav-pills>li.active>a:hover, .sidebar-nav .nav-pills>li.active>a:focus {
		background: none;
	}

	.sidebar-nav .nav>li>a:hover, .sidebar-nav .nav>li>a:focus {
		background: none;
	}
	.sidebar-nav .RedArrow {
		background: url(./browser_comp/img/arrow_icon_2.svg) no-repeat right 15px center !important;
	}

	.sidebar-nav {
		border: none;
	}
	
	.col-lg-2.col-sm-2 .sidebar-nav {
		border: none;
		padding: 0;
	}

	.SpSideNav ul li a {
		color:#fff !important;
	}

	.HeaderLogo {
		height: auto !important;
		width: 100px !important;
		margin-top: -1px !important;
	}

	.HeaderUserName {
		padding:0;
	}

	.HeaderUserName span {
		font-size:11px;
	}

	.HeaderUserDeposits {
		padding:0;
	}

	.HeaderUserDeposits span {
		font-size:11px !important;
	}

	.navbar-inner {
		position:relative;
	}

	.navbar-inner .btn-group {
		margin: 7px 0px 0 0px;
	}

	.HeaderUserNameWrap {
		float: none !important;
		position: absolute;
		top: 0px;
		right: 10px;
	}

	.HeaderUserDepositsWrap {
		float: none !important;
		position: absolute;
		top: 25px;
		right: 10px;
	}

	.navbar-brand {
		padding: 15px 5px;
	}



}



@media screen and ( max-width: 350px ) {

	.HeaderLogo {
		width: 80px !important;
		margin-top: 1px !important;
	}

}


/*--------------------------------------------------------*/
/*	大きなモーダルダイアログ                              */
/*--------------------------------------------------------*/
.modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
}
.ModalBg{
	background: rgba(255,255,255,.7);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.ModalContent{
	background: #f7f7fb;
	left: 50%;
	padding: 20px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 768px;
	border-radius:5px;
}

.ModalTtl {
	font-size:22px;
	font-weight:bold;
	text-align:center;
	margin: 0px 0 14px;
}

.mr10 {
	margin-right:10px;
}

.ModalArea {
	display: flex;
	margin-bottom: 20px;
	line-height: 170%;
}

.ModalArea > div {
	width:100%;
}

.ModalBtnArea >div {
	height: 68px;
}

.ModalBtnArea button,
.ModalBtnArea a {
	font-size:24px;
	font-weight:bold;
	text-align:center;
	color:#fff;
	border: none;
	width: 100%;
	display: block;
	height: 100%;
	line-height: 68px;
	border-radius: 3px;
	transition:0s;
}

.ModalBtnArea button:hover, 
.ModalBtnArea a:hover {
	opacity:.7;
}

.ModalBtnArea .bg-aqua {
	background:#00C2FF;
}

.ModalBtnArea .bg-red {
	background:#FF4E00;
}

.ModalBtnArea .bg-green {
	background:#15FF4F;
}

.ModalBtnArea a:hover,
.ModalBtnArea a:focus {
	text-decoration: none;
}

.ModalArea2 div {
	margin:0 10px;
}

.JsModalOpen {
	background: #efefef;
	border: solid 1px #6e6e6e;
	padding: 2px 4px;
	border-radius: 2px;
	color: #555;
	transition:0s;
	display:inline-block;
}

.JsModalOpen:hover,
.JsModalOpen:focus {
	text-decoration: none;
	color: #555;
}

.JsModalOpen:hover {
	background:#e2e2e2;
}

.status-btn button {
	background: #efefef;
	border: solid 1px #6e6e6e;
	padding: 2px 4px;
	border-radius: 2px;
	color: #555;
}

.ModalArea3 > div {
	background:#fff;
	border-radius:3px;
	padding: 15px;
}

.TextIndent {
	padding-left:1em;
	text-indent:-1em;
}


@media screen and ( max-width: 768px ) 
{
	.ModalContent {
		width: calc(100% - 10px);
		height:100%;
		padding: 5px;
	}
	.ModalArea > div {
		font-size: 12px;
	}
	
	.ModalBtnArea button,
	.ModalBtnArea a {
		height: 50px;
		line-height: 50px;
	}
	
	.SpScrollArea {
		height:350px;
		height:76%;
		overflow:scroll;
	}
	
	.ModalTtl {
		font-size: 20px;
	}
	
	.SpModalTtl {
		margin-top:30px;
	}

}


/*--------------------------------------------------------*/
/*	ダイアログ                                            */
/*--------------------------------------------------------*/
.Dialog {
	display			: none ;
	position		: fixed ;
	top				: 0 ;
	left			: 0 ;
	width			: 100% ;
	height			: 100vh ;
	z-index			: 9998 ;
}

.DialogBackground { 
	background		: rgba( 0 , 0 , 0 , 0.6 ) ;
	position		: absolute ;
	top				: 0 ;
	left			: 0 ;
	height			: 100vh ;
	width			: 100% ;
}

.DialogContent { 
	background		: #FFFFFF ;
	position		: absolute ;
	top				: 50% ;
	left			: 50% ;
	width			: auto ;
	min-width		: 20% ;
	padding			: 30px 30px 20px 30px ;
	border-radius	: 3px ;
	transform		: translate( -50% , -50% ) ;
}

.DialogBtnArea { 
	margin-top		: 30px ;
    display			: flex ;
    justify-content	: center ;	/* 横方向 */
}



@media screen and ( max-width: 767px ) {
	.DialogContent {
		width: calc( 100% - 30px ) ;
	}
}




/*--------------------------------------------------------*/
/*	カルーセル（画像スライダー）                          */
/*--------------------------------------------------------*/
.CarouselDialog {
	display				: none ;
	position			: fixed ;
	top					: 0 ;
	left				: 0 ;
	width				: 100% ;
	height				: 100vh ;
	z-index				: 9990 ;
}

.CarouselBackground { 
	background			: rgba( 0 , 0 , 0 , 0.6 ) ;
	position			: absolute ;
	top					: 0 ;
	left				: 0 ;
	height				: 100vh ;
	width				: 100% ;
}

.CarouselContent { 
	background			: rgba( 0 , 0 , 0 , 0.8 ) ;
	width				: 70% ;
	height				: 80% ;
	overflow			: hidden ;
	margin				: 0 auto ;
	position			: absolute ;
	top					: 50% ;
	left				: 50% ;
	transform			: translate( -50% , -50% ) ;
	back
}

@media screen and ( max-width: 767px ) {
	.CarouselContent {
		width				: calc( 100% - 30px ) ;
		height				: 60% ;
	}
}
.CarouselSlider { 
	display				: flex ;
	flex-flow			: row nowrap ;
	align-items			: center ;
	position			: absolute ;
	top					: 0 ;
	width				: 100% ;
	height				: 100% ;
}

.CarouselItem {
	min-width			: 100% ;
	height				: 100% ;
	z-index				: 9992 ;
	margin				: 0 ;
	img {
		position			: absolute ;
		width				: 100% ;
		height				: 100% ;
		object-fit			: scale-down ;
		z-index				: 9991 ;
	}
}

.CarouselCloseBtn {
	z-index				: 9993 ;
	position			: absolute ;
	top					: 30px ;
	right				: 0 ;
	width				: 60px ;
	height				: 60px ;
	transform			: translateY( -50% ) ;
	border				: none ;
	outline				: none ;
	padding				: 0 ;
	background			: transparent center no-repeat ;
	cursor				: pointer ;
	opacity				: 0.4 ;
	&:before ,
	&:after {
		content				: '' ;
		display				: inline-block ;
		position			: absolute ;
		top					: calc( 50% - 3px ) ;
		width				: 100% ;
		height				: 6px ;
		border-radius		: 6px ;
		background			: #e0e0e0 ;
	}
	&:before {
		transform-origin	: center center ;
		transform			: rotate( 45deg ) ;
	}
	&:after {
		transform-origin	: center center ;
		transform			: rotate( -45deg ) ;
	}
	&:hover {
		opacity				: 0.8 ;
	}
}


.CarouselNaviBtn {
	z-index				: 9993 ;
	position			: absolute ;
	top					: 50% ;
	width				: 50px ;
	height				: 80px ;
	transform			: translateY( -50% ) ;
	border				: none ;
	outline				: none ;
	padding				: 0 ;
	background			: transparent center no-repeat ;
	cursor				: pointer ;
	opacity				: 0.4 ;
	&.prev {
		left				: 0 ;
	}
	&.next {
		right				: 0 ;
	}
	&:before ,
	&:after {
		content				: '' ;
		display				: inline-block ;
		position			: absolute ;
		top					: calc( 50% - 3px ) ;
		width				: 70% ;
		height				: 6px ;
		border-radius		: 6px ;
		background			: #e0e0e0 ;
	}
	&.prev:before {
		left				: 10% ;
		transform-origin	: 3px 4px ;
		transform			: rotate( 45deg ) ;
	}
	&.prev:after {
		left				: 10% ;
		transform-origin	: 3px 2px ;
		transform			: rotate( -45deg ) ;
	}
	&.next:before {
		right				: 10% ;
		transform-origin	: calc( 100% - 2px ) 2px ;
		transform			: rotate( 45deg ) ;
	}
	&.next:after {
		right				: 10% ;
		transform-origin	: calc( 100% - 2px ) 4px ;
		transform			: rotate( -45deg ) ;
	}
	&:hover {
		opacity				: 0.8 ;
	}
}





/*--------------------------------------------------------*/
/*  解析ページのデザイン                                  */
/*--------------------------------------------------------*/

	.CommentaryLink 										{ text-align: right;margin: 10px 0; }
	.CommentaryLink a										{ text-align: center;display:inline-block;padding:5px 20px;color:#fff;font-size:16px;background:#f16272;border-radius:100px; }
	.CommentaryLink a:hover									{ text-decoration: none;opacity:.8; }
	.CommentaryLink a:focus									{ text-decoration: none; }


/*--------------------------------------------------------*/
/*	ページローディングメッセージ                          */
/*--------------------------------------------------------*/
	.blockUI { 
		display:none; 
		z-index:9998; 
		position: fixed; 
		top: 50% ; 
		left: 50% ; 
		transform: translate(-50%, -50%); 
		text-align: center; 
		background: #fff; 
		height: 100%; 
		width: 100%; 
	}
	.loadingMsg2 { 
		z-index:9999; 
		position: fixed; 
		top: 30%; 
		left: 50%; 
		transform: translate(-50%, -50%); 
		font-size: 16px; 
		white-space:nowrap; 
		background: #f7f7fb;
		padding: 12px 30px;
		border-radius: 3px;
	}
	.LoadingTxt {
		font-size:34px;
		font-weight:bold;
		color:#F16272;
	}
	.loadingMessage {
		margin-top:0px;
		font-weight: bold;
		font-size: 15px;
		line-height: 180%;
	}

	@media screen and ( max-width: 768px ) {
		
		.loadingMsg2 {
			width: calc(100% - 30px);
		}
		
	/*▲@media screen and ( max-width: 768px )▲*/
	}