@charset "UTF-8";
.pc * {
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}

/* ========== ========== ========== ========== ========== */
/* TOP CONTENTS */
/* ========== ========== ========== ========== ========== */
/* ---------- Main Visual ---------- */
#top-mainvisual {
	margin-bottom: 40px;
}
#top-slider {
	width: 1024px;
	height: 512px;
	overflow: hidden;
}
#top-slider a {
	position: absolute;
	top: 0; left: 0;
	opacity: 0;
	z-index: 0;
	transition: all 1200ms;
}
#top-slider a.active {
	opacity: 1;
	z-index: 1;
}

#top-maincontents {
	text-align: left;
}
#top-maincontents #rside {
	margin-left: 40px;
	width: 696px;
}

/* ---------- TOP - TOPICS ---------- */
#top-topics {
	padding: 4px 4px 12px;
}
/* #top-topics:hover img {
	-webkit-filter: grayscale(100%);
}>*/
#top-topics p {
	text-align: center;
}
#top-topics p a img {
	margin: 8px auto 4px;
	width: 656px;
	transition: all 200ms;
}
#top-topics p a:hover img {
	-webkit-filter: grayscale(0%);
}

/* ---------- TOP - NEWS ---------- */
#top-news {
	padding: 20px 12px 32px 12px;
}
#top-news > a {
	overflow: hidden;
	float: left;
	display: block;
	width: 154px;
	height: 200px;
	margin: 0 0 12px 12px;
	color: #212121;
	border-radius: 4px;
}
#top-news > a:nth-of-type(4n-3) {
	clear: both;
	margin-left: 0;
}
#top-news > a:nth-of-type(n+9) {
	display: none;
}
#top-news > a:hover {
	box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16),
		0 3px 13px 0 rgba(0,0,0,0.12)
}
#top-news > a h3 {
	width: 100%;
	height: 80px;
	overflow: hidden;
}
#top-news > a h3 img {
	max-height: 100%;
}
#top-news > a h4 {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 16px;
	line-height: 16px;
	text-align: right;
	color: #ffffff;
	z-index: 10;
}
#top-news > a h4 span {
	font-size: 12px;
	padding: 0 4px 0 0;
}
#top-news > a div {
	margin: 0 4px;
	padding: 4px 2px 0;
	background-color: transparent;
}
#top-news > a div p {
	font-size: 12px;
}
#top-news .event {
	border: 2px solid #f07b00;
}
#top-news .event h4 {
	background-color: #f07b00;
}
#top-news .blog {
	border: 2px solid #2f529f;
}
#top-news .blog h4 {
	background-color: #2f529f;
}
#top-news .product {
	border: 2px solid #d746de;
}
#top-news .product h4 {
	background-color: #d746de;
}
#top-news .other {
	border: 2px solid #009300;
}
#top-news .other h4 {
	background-color: #009300;
}
#top-news-more {
	cursor: pointer;
	clear: both;
	top: -32px;
	margin: auto;
	width: 670px;
	text-align: center;
}
#top-news-more:hover {
	background-color: #FFF9C4;
}
#top-maincontents aside {
	width: 288px;
}

/* ---------- TOP - TWITTER ---------- */
#top-twitter div {
	height: 510px;
}
#top-twitter div iframe {
	height: 100% !important;
}

/* ---------- TOP - PRODUCTS ---------- */
#top-products div {
	padding-bottom: 8px;
}
#top-products p {
	width: 288px;
}
#top-products p img {
	margin: 8px 0 0 8px;
	width: 270px;
}

/* ---------- TOP - NICONICO ---------- */
#top-niconico iframe {
	margin: 8px auto 0 8px;
	width: 268px;
	height: 200px;
	border: 1px solid #cccccc;
}

/* ========== ========== ========== ========== ========== */
/* PRODUCTS CONTENTS */
/* ========== ========== ========== ========== ========== */
#products .main {
	padding: 20px;
}
#products .product-data {
	padding: 20px;
	border: 2px solid #ff7000;
}
#products .product-data + .product-data {
	margin-top: 20px;
}
#products .product-data::after {
	content: "";
	display: block;
	clear: both;
}
#products .product-data img {
	float: left;
	width: 200px;
	border: 4px solid #ffffff;
	outline: 1px solid #9E9E9E;
}
#products .product-data dl {
	float: right;
}
#products .product-data dl::after {
	content: "";
	display: block;
	clear: both;
}
#products .product-data dt {
	cursor: pointer;
	clear: both;
	float: left;
	margin: 0 20px 0 0;
	width: 70px;
	height: 20px;
	line-height: 20px;
	font-size: 11px;
	color: #ffffff;
	background-color: #770000;
	text-align: center;
}
#products .product-data dd {
	float: left;
	margin: 0 0 12px 0;
	width: 600px;
	font-size: 14px;
}
#products .product-data dd p {
	font-size: 14px;
}
#products .product-data a:hover {
	opacity: 0.6;
}
#products .product-data .product-anchor {
	position: absolute;
	bottom: 12px;
	right: 12px;
	height: 28px;
	line-height: 28px;
	padding: 0 8px 0 28px;
	letter-spacing: 1px;
	font-size: 14px;
	color: #ffffff;
	background-color: #ff7000;
}
#products .product-data .product-anchor::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 8px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid #ffffff;
}

/* ========== ========== ========== ========== ========== */
/* BLOG CONTENTS */
/* ========== ========== ========== ========== ========== */
article#blog h2 + div {
	padding-top: 40px;
}

.blog-contents {
	margin: 0 40px 40px;
	padding: 20px;
	line-height: 2.4;
	color: #424242;
	border: 2px solid #ff7000;
}
.blog-contents h3 {
	margin-bottom: 40px;
	height: 20px;
	line-height: 30px;
	font-size: 22px;
	color: #004777;
	text-shadow: 0 0 4px #ffffff;
}
.blog-contents h3 span {
	display: inline-block;
	height: 20px;
	border-bottom: 8px solid #fccd25;
}
.blog-contents .blog-date {
	position: absolute;
	top: 4px;
	right: 12px;
	text-align: right;
}
.blog-contents .blog-date a {
	color: #ff7000;
}
.blog-contents .blog-date a:hover {
	color: #ffaa77;
}
.blog-contents b {
	padding: 8px 0;
	font-size: 18px;
	font-weight: bold;
	color: #212121;
}
.blog-contents p {
	line-height: 1.5;
}
.blog-contents p + p {
	padding-top: 20px;
	padding-bottom: 0px;
}
.blog-contents p i {
	padding-left: 8px;
	line-height: 1.4;
	color: #D81B60;
}
.blog-contents figure {
	margin: 0;
}
.blog-contents img {
	cursor: default;
	max-width: 100%;
	margin: 8px 0;
	border: 4px solid #ffffff;
	outline: 1px solid #9E9E9E;
}
.blog-contents img.scale:hover {
	cursor: pointer;
	opacity: 0.7;
}
.blog-contents img.outlink:hover {
	cursor: pointer;
	opacity: 0.7;
}

#blog-pager {
	text-align: center;
}
#blog-pager p {
	padding: 20px;
}

#blog-modal img {
	max-width: 100%;
}

/* ========== ========== ========== ========== ========== */
/* EVENT CONTENTS */
/* ========== ========== ========== ========== ========== */
/* ---------- EVENT INDEX ---------- */
#eventindex .main {
	padding: 0px 20px 20px;
}
.event_title {
	margin-bottom: 20px;
	padding: 40px 0 0;
	height: 28px; line-height: 26px;
	text-indent: 12px;
	font-size: 27px;
	letter-spacing: 2px;
	color: #ffffff;
	text-shadow:
	0 0 1px #FF7000,
	0 0 2px #FF7000,
	0 0 2px #FF7000,
	0 0 3px #FF7000,
	0 0 3px #FF7000,
	0 0 3px #FF7000,
	0 0 3px #FF7000,
	0 0 3px #FF7000,
	0 0 3px #FF7000;
}
.event_title::before {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	display: block;
	background-color: #FFAA65;
	width: 100%; height: 8px;
	border-radius: 20px;
	z-index: -5;
}
.eventblock {
	margin-bottom: 20px;
	padding-bottom: 40px;
	border-bottom: 1px dashed #FF7000;
}
#eventindex h4 {
	font-size: 20px;
	margin-bottom: 20px;
}
.eventblock > a:hover {
	opacity: 0.7;
}

/* ---------- EVENT ---------- */
#event .main {
	padding: 0px 20px 40px;
}
#event .eventblock {
	padding: 0 12px;
	border: none;
}
#goods_image {
	text-align: center;
	width: 100%; height: 100%;
	overflow-y: scroll;
}
#goods_image img {
	max-width: 100%;
}
#goodsintro #modal-main {
	height: 80%;
	overflow: visible;
}
#goodsintro #modalclosebtn {
	width: 36px; height: 36px;
	top: 0; right: 0;
	border-radius: 0;
	background-color: #212121;
}
#goodsintro .modal-prev,
#goodsintro .modal-next {
	cursor: pointer;
	position: absolute; top: 50%;
	width: 30px; height: 80px;
	margin-top: -40px;
	background-color: rgba(0,0,0,0.5);
	background-size: 30px;
	background-position: 50% 50%;
}
#goodsintro .modal-prev:hover,
#goodsintro .modal-next:hover {
	opacity: 0.7;
 }
#goodsintro .modal-prev {
	left: 0;
	background-image: url(../_img/icon/navigate_prev_white.png);
	border-radius: 0 5px 5px 0;
}
#goodsintro .modal-next {
	right: 0;
	border-radius: 5px 0 0 5px;
	background-image: url(../_img/icon/navigate_next_white.png);
}

/*
#event h3 {
	margin: 0 40px;
	border: 2px solid #ffbb22;
	background-color: #fff8e8;
}
#event h3::after {
	content: "";
	display: block;
	clear: both;
}
#event h3 p {
	float: left;
	line-height: 40px;
	font-weight: bold;
}
#event h3 p.event-date {
	width: 120px;
	text-align: center;
	border-right: 2px solid #ffbb22;
}
#event h3 p.event-title {
	padding-left: 20px;
}*/
#event .event-goods {
	clear: both;
	min-height: 200px;
	margin: 0 20px;
	padding: 20px;
}
#event .event-goods::after {
	content: "";
	display: block;
	clear: both;
}
#event .event-goods img {
	cursor: pointer;
	float: left;
	margin: 20px 20px 0 20px;
	width: 200px;
	border: 4px solid #ffffff;
	outline: 1px solid #9E9E9E;
}
#event .event-goods img:hover {
	opacity: 0.6;
}
#event .event-goods h4, #event .event-goods p, #event .event-goods table, #event .event-goods q, #event .event-goods div, #event .event-goods dl, #event .event-goods ul, #event .event-goods ol {
	max-width: 640px;
	text-align: left;
}
#event .event-goods h4 {
	float: right;
	top: 12px;
	margin: 0 0 12px;
	padding: 0px 0 2px 12px;
	width: 640px;
	font-size: 19px;
	color: #f75b85;
	font-weight: bold;
	background-image: url(../_img/event-line1.png);
	background-repeat: repeat-x;
	background-position: 0 100%;
}
#event .event-goods p {
	float: right;
	width: 640px;
}
#event .event-goods h4 span {
	margin-right: 8px;
	padding: 0px 8px;
	color: #ffffff;
	font-size: 14px;
	background-color: #f75b85;
	border-radius: 20px;
}
#event .event-goods table {
	float: left;
	margin: 20px;
}
#event .event-goods table th {
	font-weight: normal;
	padding-right: 20px;
}

/* ========== ========== ========== ========== ========== */
/* SUPPORT CONTENTS */
/* ========== ========== ========== ========== ========== */
#support .main {
	padding-top: 20px;
}
#support p {
	width: 860px;
	margin: auto;
}
#support p + p {
	padding-top: 8px;
}
#support #support_message {
	padding-top: 20px;
	font-size: 14px;
	color: #f44336;
	text-align: center;
}
#support dl {
	width: 860px;
	margin-left: 80px;
	padding-top: 20px;
	border-bottom: 2px solid #452000;
}
#support dl dt {
	clear: both;
	float: left;
	width: 300px;
	line-height: 34px;
	padding: 8px 0;
	border-top: 2px solid #452000;
}
#support dl dd {
	float: left;
	padding: 8px 0;
	width: 560px;
	border-top: 2px solid #452000;
}
#support dl span {
	position: absolute;
	top: 8px;
	right: 16px;
	line-height: 20px;
	padding: 4px;
	font-size: 12px;
	color: #ffffff;
	background-color: #ee0022;
	border-radius: 3px;
}
#support dl input, #support dl select {
	width: 300px;
}
#support dl select {
	background-image: url(../_img/icon/expand_more_black.png);
	background-position: top 50% right 0px;
	background-size: 30px;
}
#support dl textarea {
	width: 536px;
	height: 120px;
}
#support #check {
	padding: 20px 0;
	text-align: center;
}
#support #check span {
	cursor: pointer;
	display: block;
	margin: auto;
	width: 140px;
	height: 40px;
	line-height: 40px;
	color: #ffffff;
	background-color: #ee0022;
	border-radius: 3px;
}
#support #check span:hover {
	opacity: 0.7;
}

#verification #check_title {
	padding-top: 40px;
	font-size: 20px;
}
#verification dl {
	width: 720px;
	padding: 20px 0;
	margin: auto;
}
#verification dl dt {
	clear: both;
	float: left;
	width: 160px;
	padding-top: 20px;
}
#verification dl dd {
	float: left;
	width: 560px;
	padding-top: 20px;
	text-align: left;
}
#verification dl span {
	display: block;
	width: 100%;
	min-height: 20px;
	padding-left: 8px;
	border-left: 4px solid #BDBDBD;
}
#verification dl pre {
	width: 100%;
	padding-left: 8px;
	border-left: 4px solid #BDBDBD;
}
#verification #submitarea {
	padding-bottom: 40px;
}
#verification #submitarea input, #verification #submitarea span {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	min-width: auto;
	width: 300px;
	padding: 4px 0;
	font-size: 18px;
	color: #ffffff;
	border: 1px solid #BDBDBD;
}
#verification #submitarea input:hover, #verification #submitarea span:hover {
	opacity: 0.7;
}
#verification #submitarea span {
	background-color: #2196F3;
}
#verification #submitarea input {
	background-color: #ef5350;
}