/* 共通CSS */
/* ボディCSS */
body{
	background-color:#FFF5EE;
	padding-top     :100px;      /* ヘッダーの高さに合わせる */
}

/* ヘッダーCSS */
.pageHeader{
	position    : fixed;
	top         : 0;
	left        : 0;
	right       : 0;
	z-index     : 20;
	/* 枠線（確認用） */
	/*border      : 1px solid #000000;*/
	height      : 80px;
}

.imgLogo{
	float       : left;
	/* 枠線（確認用） */
	/*border      : 1px solid #000000;*/
}

.hdStrBig{
	display        : inline-block;
	line-height    : 90px;
	color          :#FFFFFF;
	text-indent    : 20px;
	font-size      : 36pt;
	font-weight    : bold;
	letter-spacing : 10pt;
	text-shadow    :
		 5pt  5pt  20pt #CC9933,
		-5pt  5pt  20pt #CC9933,
		 5pt -5pt  20pt #CC9933,
		-5pt -5pt  20pt #CC9933,
		 5pt  0pt  20pt #CC9933,
		 0pt  5pt  20pt #CC9933,
		-5pt  0pt  20pt #CC9933,
		 0pt -5pt  20pt #CC9933;
	/* 枠線（確認用） */
	/*border      : 1px solid #000000;*/
}

.subName{
	font-size      : 18pt;
}

.hdStrSmall{
	font-size   : 14px;
	line-height : 20px;
	color       : #fff;
}


@Keyframes anim-spray{
	0%{
		width: 50px;
	}
	100%{
		width: 800px;
	}
}

.titl_spray{

	position    : fixed;
	top         : 0;
	left        : 0;
	right       : 0;
	z-index     : 10;

	height    : 90px;
	max-width :800px;
	/*color     : #FFFFFF;*/
	text-align:right;
	background-color  : #FFCC66;
	animation-name    : anim-spray;
	animation-duration: 7s;
	animation-timing-function: ease;
}

/* メイン画像設定 */
.imgMain{
	float        : none;
	display      : inline-block;
	position     : relative;
	padding      : 0
}

.imgMain_over{
	position     : absolute;
	box-sizing   : border-box;
	white-space  : nowrap;
	display      : block;
	width        : 100%;
	color        : rgba(255, 255, 255, 0.95);
	background   : rgba(255, 255, 255, 0.10);
	top          : 100%;
	left         : 0;
	text-align   : left;
	transform    : translateY(-100%);
	padding      : 10px;
	font-size    : 15pt;
	font-weight  : bold;
	line-heigth  : 1em;
	overflow     : hidden;
}

.imgMain_over span{
	display      : inline-block;
	white-space  : nowrap;
	line-heigth  : 1em;
	animation    : scrollAnime 15s linear 1;
}

@keyframes scrollAnime{
	  0% { transform : translateY(12.0em)}
	100% { transform : translateY(-12.0em)}
}

/* アコーディオンメニュー(最初のアコーディオンは展開) 
.toggle_contents:first-of-type dd {
	display     : block;
}
*/

.toggle_title {
	position    : relative;
	padding     : 5px; 
	cursor      : pointer;
	font-size   : 14px;
	text-align  : left;
	line-heigtht: 1.4;
	background  : linear-gradient(#CCCCCC, #FFF5EE); /* グレー系グラデーション */
	/* 枠線（確認用） */
	/* border     : 1px solid #000000;*/
}

.toggle_submenu {
	font-size   : 14px;
	/* 枠線（確認用） */
	/*border     : 1px solid #000000;*/
}

.toggle_btn {
	position    : absolute;
	top         : 50%;
	right       : 20px;
	transform   : translateY(-50%);
	background  : #708090;
	display     : block;
	width       : 14px;
	height      : 14px;
	text-indent : 100%;
	white-space : nowrap;
	overflow    : hidden;
	border-radius : 50%;
}

.toggle_btn:before, .toggle_btn:after {
	display     : block;
	content     : '';
	background-color : #fff;
	position    : absolute;
	width       : 10px;
	height      : 2px;
	top         : 50%;
	left        : 50%;
	transform   : translate(-50%, -50%);
}

.toggle_btn:before {
	width       : 2px;
	height      : 10px;
}

.toggle_title.selected .toggle_btn:before {
	content     : normal;
}

.toggle_contents dd {
	display     : none;
	padding     : 0px; 
	margin      : 0px; 
	/* 枠線（確認用） */
	/* border     : 1px solid #000000; */
}

/* 見出しヘッダ（吹き出し高さ調整用） */
.LineH {
	height        : 40px;
}

/* カテゴリ枠の設定 */
.CategoryLine {
	position      : relative;
	padding       : 1rem 2rem;
	text-align    : left;
	border        : 2px solid #DDDDDD;
	border-radius : 0 10px 10px 10px;
	box-shadow    : 0 0 0 2px rgba(128,128,128,0.4),  0 0 0 3px rgba(128,128,128,0.3) inset;
}

.CategoryLine:before {
	font-size     : 12px;
	font-size     : 1.5rem;
	position      : absolute;
	top           : -30px;
	left          : -5px;
	height        : 30px;
	padding       : 0 1em;
	color         : #DDDDDD;
	border-radius : 8px 8px 0 0;
	background    : #AAAAAA;
}

/* カテゴリ枠のタグ（個別）設定 */
#ContensGr:before {
	content       : 'Contents'; 
}

#WhatNew:before {
	content       : 'WhatsNew'; 
}

/* 詳細ボタン */
/* -- ボタン共通CSS ------- */
*,
*:before,
*:after {
	-webkit-box-sizing : inherit;
	box-sizing         : inherit;
}

html{
	-webkit-box-sizing : border-box;
	box-sizing         : border-box;
	font-size          : 62.5%;
}

.btn,
a.btn,
button.btn {
	font-size          : 1.6rem;
	font-weight        : 700;
	line-height        : 1.5;
	position           : relative;
	display            : inline-block;
	padding            : 1rem 4rem;
	cursor             : pointer;
	-webkit-user-select: none;
	-moz-user-select   : none;
	-ms-user-select    : none;
	user-select        : none;
	-webkit-transition : all 0.3s;
	transition         : all 0.3s;
	text-align         : center;
	vertical-align     : middle;
	text-decoration    : none;
	letter-spacing     : 0.1em;
	border-radius      : 0.5rem;
}

a.btn--details {
	color              : #fff;
	background-color   : #000033;
}

a.btn--details:hover {
	color              : #fff;
	background         : #000099;
}

a.btn-d01 {
	font-size          : 1.0rem;
	position           : relative;
	padding            : 0.5rem 1rem 0.5rem 1rem;
	border-radius      : 50vh;
}

a.btn-d01 i.fa {
	margin-right       : 1rem;
}

/*WhatNew横並び設定*/
.WhatNewBox {
	margin             :1rem 1rem 2rem;
	display            :inline-block;
	vertical-align     :top;
}

.thumbnail_coment {
	font-size          : 14px;
}

/*TOPボタン */
.to-top {
	position      : fixed;
	display       : flex;
	align-items   : center;
	justify-content: center;
	width         : 50px;
	height        : 50px;
	right         : 0px;
	bottom        : 0px;
	font-size     : 36px;
	font-weight   : bold;
	color         : #FFFFFF;
	background    : #FFFFFF;
	cursor        : pointer;
}