/* ------------------------------------------------------------ 
レスポンシブについて

＜ブレイクポイントの設定＞
PC：~1080px
タブレット・スマホ：~640px、~480px
※ 479px以下はmin-width設定（スクロール表示でOK）
 ------------------------------------------------------------ */


/* ------------------------------------------------------------ 
全体の設定
 ------------------------------------------------------------  */
@-ms-viewport {
	width: device-width;
}
html {
	height:100%;
}
body {
	height:100%;
	min-height: 100%;
	overflow:hidden;
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000000;
	background-color:#FFF;
	-webkit-text-size-adjust: 100%;
}


/* =============================== 
デバイスサイズの最大幅(480px)。このサイズより小さい場合に適用

チラシ情報の文字を非表示
 =============================== */
@media all and (max-width:480px)
{
	body {
		width:480px;
		overflow-x: scroll;
		transform: translateZ(0); /* 要素の表示位置を移動させる（Z軸の移動） */
	}
}



/* ------------------------------------------------------------ 
ヘッダーの設定
 ------------------------------------------------------------  */
#header1 {			/* ヘッダー全体 */
	background-color:#FFF;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #e40114;
	height: 72px;
	display: block;
}
#header2 {			/* ヘッダーオブジェクト部 */
	width: 1080px;
	margin: 0 auto;
	height: 100%;
}
#header_img {		/* ヘッダーイメージ（PC用）*/
	float: left;
}
#header_img_sp {		/* ヘッダーイメージ（スマホ用） */
	display: none;
}
#header_info {		/* チラシ情報  */
	width: auto;
	height: 50px;
	padding-top: 17px;
	padding-bottom: 5px;
	color: #000;
	font-weight: bolder;
	float: right;
	display: block;
}
#header_info_sp {		/* チラシ情報（スマホ用）*/
	display: none;
}
#header_info_min {		/* チラシ情報_3段（スマホ用）*/
	display: none;
}
.vshop_display {	/* 店舗情報 */
	font-size: 20px; 
}
.vperiod_display {	/* 公開日付 */
	font-size: 20px;
}
.vtitle_display {	/* チラシタイトル */
	font-size: 18px;
	color: #e40114;
}

/*　サムネイル表示ボタンは「サムネイル折り畳み設定」に記載　*/



/* =============================== 
デバイスサイズの最大幅(1080px)。このサイズより小さい場合に適用

スマホ・タブレット用にロゴとチラシ情報を2段で表示
 =============================== */
@media all and (max-width:1080px)
{
	#header1 {			/* ヘッダー全体（ポジション固定） */
		position: fixed;
		top: 0;
		left: 0;
		background-color:#FFF;
		border-bottom-width: 3px;
		border-bottom-style: solid;
		border-bottom-color: #e40114;
		width: 100%;
		height: 120px;
		display: block;
	}
	#header2 {			/* ヘッダーオブジェクト部 */
		min-width: 480px;
	}
	#header_img {		/* ヘッダーイメージ（PC用）*/
		display: none;
		float: none;
	}
	#header_img_sp {		/* ヘッダーイメージ（スマホ用） */
		max-width: 100%;
		display: block;
	}
	#header_info {		/* チラシ情報  */
		display: none;
	}
	#header_info_sp {		/* チラシ情報  */
		width: auto;
		height: 50px;
		padding-top: 10px;
		padding-bottom: 5px;
		color: #000;
		font-weight: bolder;
		float: right;
		display: block;
		margin-left: 20px;
	}	
}

/* =============================== 
デバイスサイズの最大幅(640px)。このサイズより小さい場合に適用

チラシ情報の文字を小さくし、ヘッダー幅を広げる
 =============================== */
@media all and (max-width:640px)
{
	#header1 {
		height: 144px;
	}
	#header_info_sp {
		display: none;
	}
	#header_info_min {
		display: block;
		font-weight: bolder;
		margin-left: 20px;
		padding-top: 10px;
	}
	.vshop_display {
		font-size: 18px; 
	}
	.vperiod_display {
		font-size: 18px;
	}
	.vtitle_display {
		font-size: 16px;
	}
}

/* =============================== 
デバイスサイズの最大幅(480px)。このサイズより小さい場合に適用

チラシ情報の文字を非表示
 =============================== */
@media all and (max-width:480px)
{
	#header1 {
		position: fixed;
		width: 480px;
	}
	#header2 {
		width: 480px;
	}
}



/* ------------------------------------------------------------ 
Viewer設定
 ------------------------------------------------------------  */
#osd_view {			/* PC用ビューワー */
	width: 100%;
	background-color:#CCC;
	height: calc(100% - 72px - 80px);
	display: block;
}
#osd_view_sp {		/* スマホ用ビューワー */
	display: none;
	background-color:#CCC;
}



/* =============================== 
デバイスサイズの最大幅(1080px)。このサイズより小さい場合に適用

スマホ・タブレット用ビューワーの表示（PC用は非表示）
 =============================== */
@media all and (max-width:1080px)
{
	
	#osd_view{			/* PC用ビューワー */
		display: none;
	}
	#osd_view_sp{		/* スマホ用ビューワー（ポジション固定） */
		position: fixed;
		top: 123px;
		width: 100%;
		height: calc(100% - 120px - 80px);
		display: block;
	}
}


/* =============================== 
デバイスサイズの最大幅(640px)。このサイズより小さい場合に適用

ビューワーの表示領域変更
 =============================== */
@media all and (max-width:640px)
{
	#osd_view_sp{		/* スマホ用ビューワー（ポジション固定） */
		position: fixed;
		top: 147px;
		width: 100%;
		height: calc(100% - 144px - 80px);
		display: block;
	}
}


/* =============================== 
デバイスサイズの最大幅(480px)。このサイズより小さい場合に適用

ビューワーの表示領域変更
 =============================== */

/*
**		なし
*/



/* ------------------------------------------------------------ 
Viewer サムネイル折り畳み設定
 ------------------------------------------------------------  */
#sidethumb{			/* サムネイルエリア全体*/
	position: fixed;
	right: 0; 				/* サムネイルスペースを右寄せ */
	width: 320px;			/* widthはメニュー幅+keyボタン幅 */
	height: calc(100% - 72px - 80px - 6px) !important;
	right: -270px;			/* メニュー幅に合わせる */
	z-index: 1000;
}
#sidethumb_spmin{			/* 最小時サムネイル表示エリアを非表示 */
	display: none;
}
#sidemenu_key{		/* PC用サムネイル表示ボタンエリア */
	width: 50px;
	height: 100%;
	background: #000;
	float: left;
}
.mojiarea{			/* 文字エリア */
	display: table;
	table-layout: fixed;
    width: 30px;
	margin: 0 10px;
	height: 100%;
}
.sidemoji{			/* ボタン文字 */
	display: table-cell;
	color: #FFF;
	font-size: 18px;
	font-weight: bolder;
	height: auto;
	text-align: center;
	vertical-align: middle;
}
#thumbarea{			/* サムネイル表示エリア */
	overflow-y: scroll;
	overflow-x: hidden;
	display:block;
	width: 270px;
	height: 100%;
	background: #000;
	opacity: 0.9;
}
#thumbimg{
	background: #000;
	opacity: 0.9;
	height: auto;
	min-height: 100%;
	z-index: 1200;
}
#tcreat{
	width: 250px;
	height: auto;
	margin-bottom: 30px;
	/*background-color: #111;*/
	z-index: 1100;
}
.timgsize{
	width: 150px;
	/*height: 150px;*/
	/*margin-left: 50px;*/
	margin: 0 auto;
	margin-bottom: 10px;
	display: block;
}
.timgsize img{
	margin: 0 auto;
}
.mojistyle {		/* サムネイル表示エリアの文字のクラス */
	display: block;
	width: 200px;
	margin-left: 25px;
	margin-bottom: 10px;
	text-align: center;
	color: #FFF;
}
#thumbimg li a:hover{
	opacity: 0.5;
}
#vthumb{			/* サムネイル_htmlの生成先 */
	width: 250px;
	height: calc(100% - 72px - 80px - 6px) !important;
}

#sidemenu_key_sp {	/* スマホ用サムネイル表示ボタン全体 */
	display: none;
}
#sidemenu_key_spmin {	/* 最小時サムネイル表示ボタン全体 */
	display: none;
}



/* =============================== 
デバイスサイズの最大幅(1080px)。このサイズより小さい場合に適用

ビューワー領域内ではなく、ヘッダー部にボタン表示
 =============================== */
@media all and (max-width:1080px)
{
	#sidethumb{			/* PC用サムネイル表示のクリック範囲を隠し、横幅をサムネイル表示範囲のみにする（ポジション固定） */
		top: 123px;
		width: 250px;
		height: calc(100% - 120px - 80px - 6px) !important;
	}
	#sidemenu_key{		/* PC用サムネイル表示ボタンエリア*/
		display: none;
	}
	#vthumb{			/* サムネイル_htmlの生成先 */
		height: calc(100% - 120px - 80px - 6px) !important;
	}
	#sidemenu_key_sp {	/* スマホ用サムネイル表示ボタン全体 */
		display: block;
		float: right;
		height: 70px;
		padding-top: 10px;
		margin-right: 30px;
	}
	.sidemoji_sp{		/* スマホ用サムネイル表示ボタンエリア */
		height: 100%;
	}
	.fc_sp {			/* スマホ用サムネイル表示ボタンの号の数のクラス */
		position: fixed;
		top: 65px;
		right: 80px;
		font-size: 42px;
		text-align: right;
		-webkit-appearance: none;
	}
	.flyericon_sp{		/* スマホ用サムネイル表示ボタンの画像のクラス（ポジション固定）*/
		position: fixed;
		top: 65px;
		right: 20px;		
		text-align: left;
		-webkit-appearance: none;
	}
}


/* =============================== 
デバイスサイズの最大幅(640px)。このサイズより小さい場合に適用

サムネイル表示領域変更とヘッダーのボタン調整
 =============================== */
@media all and (max-width:640px)
{
	#sidethumb{			/* PC用サムネイル表示のクリック範囲を隠し、横幅をサムネイル表示範囲のみにする（ポジション固定） */
		top: 147px;
		height: calc(100% - 144px - 80px - 6px) !important;
	}
	#vthumb{			/* サムネイル_htmlの生成先 */
		height: calc(100% - 144px - 80px - 6px) !important;
	}
	.fc_sp{				/* スマホ用サムネイル表示ボタンの号の数のクラス */
		top: 90px;
	}
	.flyericon_sp{		/* スマホ用サムネイル表示ボタンの画像のクラス（ポジション固定）*/
		top: 90px;
	}
}


/* =============================== 
デバイスサイズの最大幅(480px)。このサイズより小さい場合に適用

ヘッダーボタン固定
サムネイル表示領域をスライド表示でなく表示・非表示に変更
 =============================== */
@media all and (max-width:480px)
{
	#sidethumb{			/* PC・スマホ用サムネイル表示エリアを非表示 */
		display: none;
	}
	
	#sidethumb_spmin{			/* 最小時サムネイルエリア全体の表示*/
		display: none;
		position: fixed;
		top: 147px;
		height: calc(100% - 144px - 80px - 6px) !important;
		width: 250px;
		right: 0; 				/* サムネイルスペースを右寄せ */
		z-index: 1000;
	}
	
	#sidemenu_key_sp {	/* スマホ用サムネイル表示ボタン全体 */
		display: none;
	}

	#sidemenu_key_spmin {	/* 最小時サムネイル表示ボタン全体 */
		display: block;
		float: right;
		height: 70px;
		padding-top: 10px;
		margin-right: 0px;
	}
	.sidemoji_spmin{		/* 最小時サムネイル表示ボタンエリア */
		height: 100%;
	}
	.fc_spmin {			/* ス最小時サムネイル表示ボタンの号の数のクラス */
		position: fixed;
		top: 90px;
		left: 370px;
		font-size: 42px;
		text-align: right;
		-webkit-appearance: none;
	}
	.flyericon_spmin{		/* 最小時サムネイル表示ボタンの画像のクラス（ポジション固定）*/
		position: fixed;
		top: 90px;
		left: 400px;		
		text-align: left;
		-webkit-appearance: none;
	}
}



/* ------------------------------------------------------------ 
フッターの設定
 ------------------------------------------------------------  */
#footer1 {
	width: 100%;
	position: fixed;
	bottom: 0;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #e40114;
	height: 80px;
	background-color:#FFF;
}
#footerBtn {
	text-align: center;
	display: block;
}
#footerBtn_sp {
	display: none;
}
.fbtn ul {			/* フッターボタン */
	padding: 0px;
}
.fbtn li {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	vertical-align: bottom;
}
.cpage {
	background-color: #fff;
	vertical-align: middle;
	display: table-cell;
	height: 50px;
	width: 150px;
}
.cpage_chara {
	font-size: 16px;
}
.cpage_num {
	font-size: 22px;
}


/* =============================== 
デバイスサイズの最大幅(1080px)。このサイズより小さい場合に適用

スマホ・・タブレット用ボタンに変更
 =============================== */
@media all and (max-width:1080px)
{
	#footerBtn {
		display: none;
	}
	#footerBtn_sp {
		text-align: center;
		display: block;
	}
	.fbtn li {
		margin-left: 15px;
		margin-right: 15px;
	}
	.cpage_chara {
		font-size: 14px;
	}
	.cpage_num {
		font-size: 24px;
	}
	
}


/* =============================== 
デバイスサイズの最大幅(640px)。このサイズより小さい場合に適用

ボタンや文字のサイズ調整
 =============================== */
@media all and (max-width:640px)
{
	.fbtn li {
		margin-left: 5px;
		margin-right: 5px;
	}
	.cpage {
		width: 120px;
	}
	.cpage_chara {
		font-size: 12px;
	}
	.cpage_num {
		font-size: 20px;
	}
}


/* =============================== 
デバイスサイズの最大幅(480px)。このサイズより小さい場合に適用

フッター領域の固定
 =============================== */
@media all and (max-width:480px)
{
	#footer1 {			/* 幅固定にする　*/
		position: fixed;
		width: 480px;
		bottom: 0;
		left: 0;
	}
}