@media only screen and (min-width: 320px) {
	body {
		font-size: 12px;
	}
}

@media only screen and (min-width: 480px) {
	body {
		font-size: 14px;
	}
}

@media only screen and (min-width: 960px) {
	body {
		font-size: 16px;
	}
}

/** Retina Display iPhone 4 and new iPad **/
@media only screen and (-webkit-device-pixel-ratio: 2.0) {

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {

}

@media only screen and (-webkit-device-pixel-ratio: 0.75) {

}

html, body {
	font-family:'Quicksand', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	height: 99.9%;
	font-size: 16px;
	font-weight:bold;
	overflow: hidden;
	background-color: #f5f5f5;
}

/* See http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
	visibility: hidden;
}

/** ページ/デフォルト **/
.page,
#loading-page {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	outline: 0;
	z-index: 0;
}

#loading-page {
	z-index: 20000;
	display: block;
	background-color: #f5f5f5;
}

#loading-page .loading-message {
	display: block;
	position: fixed;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	margin-left: -23px;
	top: 50%;
	left: 50%;
}

.page.active {
	z-index: 1;
}

.dialog {
	opacity: 0;
	z-index: -1;
	filter: Alpha(Opacity=0);
	position: absolute;
	background-color: transparent;
}

.dialog.active {
	display: block;
	opacity: 1;
	filter: Alpha(Opacity=1);
	z-index: 999;
	min-width: 286px;
	max-height: 320px;
}


/** ダイアログ コンテナー **/
.dialog > .dialog-container {
	position: relative;
	display: block;
	min-height: 80px;
  max-height: 100%;
	margin: 0;
	padding: 0;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	background-color: #fafafa;
	border: 1px solid #dedede;
}

.dialog > .dialog-container {
	font-size: .8em;
	line-height: 1.7em;
	overflow: hidden;
}

.dialog > .dialog-container a,
.dialog > .dialog-container a:link,
.dialog > .dialog-container a:hover,
.dialog > .dialog-container a:visited,
.dialog > .dialog-container a:active {
	color: #212121;
	text-decoration: unerline;
}

.dialog > .dialog-container ul {
	margin: 0;
	padding: 0 0 1em 0;
	list-style: none;
}

.dialog-content {
	display: block;
	position: relative;
 	color: #212121;
	border-width: 0;
	margin: 1.4em 0;
	padding: 0 1.4em;
	overflow: hidden;
	zoom: 1;
  background-color: transparent;
}

/** スクロールバー **/

.dialogScrollbarV {
	position:absolute;
	z-index:100;
	width:0.4em;
	bottom:0.1em;
	top:2px;
	right: 1.4em;
}

.dialogScrollbarV > div {
	position:absolute;
	z-index:100;
	width:100%;

	border: 1px solid #737373;
	background-color: #000;

	-webkit-background-clip:padding-box;
	-moz-background-clip:padding-box;
	-o-background-clip:padding-box;
	background-clip:padding-box;

	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;

	-webkit-border-radius:0.2em;
	-moz-border-radius:0.2em;
	-o-border-radius:0.2em;
	border-radius:0.2em;
}

/** ダイアログのヘッダ **/
.dialog-header {
  height: 1.4em;
  width: 100%;
  margin: 0;
  border-width: 0;
  position: absolute;
  background-color: transparent;
	z-index: 10;
	top: 0;
  left: 0;
}

/** ダイアログ 続きアイコン **/

.dialog-header {
	background: -moz-linear-gradient(top,  rgba(251,251,251,1) 70%, rgba(251,251,251,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(80%,rgba(251,251,251,1)), color-stop(100%,rgba(251,251,251,0)));
	background: -webkit-linear-gradient(top,  rgba(251,251,251,1) 70%,rgba(251,251,251,0) 100%);
	background: -o-linear-gradient(top,  rgba(251,251,251,1) 70%,rgba(251,251,251,0) 100%);
	background: -ms-linear-gradient(top,  rgba(251,251,251,1) 70%,rgba(251,251,251,0) 100%);
	background: linear-gradient(to bottom,  rgba(251,251,251,1) 70%,rgba(251,251,251,0) 100%);
}

.dialog-header-container {
	position: relative;
	height: 1.4em;
	width: 100%;
	margin: 0;
	padding: 0;
}

.borderradius .dialog-header {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	border-top-left-radius: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	border-top-right-radius: 0;
}

.dialog-header a.dialog-close-btn {
	width: 1.2em;
	height: 1.2em;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	position: absolute;
	right: .2em;
	top: .2em;
	z-index: 1000;
	margin: 0;
	padding: 0;
	text-indent: -20000em;
	text-decoration: none;
	background-image: url(images/close-button.png);
	background-size: 100% 100%;
}

.dialog-header .btn-text {
  color: #FFF;
}

.csstransitions #loading-page,
.csstransitions .page
{
	transition: opacity 2s ease-in;
	-moz-transition: opacity 2s ease-in;
	-webkit-transition: opacity 2s ease-in;
	-o-transition: opacity 2s ease-in;
}

.opacity #loading-page.disabled {
	opacity: 0;
	filter: Alpha(Opacity=0);
}

.no-csstransitions #loading-page.disabled {
	z-index: 0 !important;
	display: none;
}

.loading-spinner {
	font-size: 0.7em;
	text-align: center;
	color: #555956;
	font-weight: bold;
	display: block;
	padding-top: 53px;
	background-image: url(images/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: top center;
}

/** コンテンツ／ヘッダー／フッター共通設計 **/
.header, .content, .footer {
	margin: 0;
	padding: 0;
	width: 100%;
	color: #555956;
}

.header, .footer, .header-navigator {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;
	zoom: 1;
	overflow: hidden;
}

.header-navigator {
	z-index: 11000;
}

.header {
	top: 0;
}

.footer {
	bottom: 0;
}

/** Tommorowland despres Theme **/
.theme-gv .footer {
	background-color:transparent;
	width: 100%;
}

.content {
	border-width: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

/** ヘッダー周り **/
.header {
	background-color: transparent;
}

.header,
#thumbnail-carousel-wrapper,
.theme-gv #thumbnail-carousel-wrapper {
	height: 114px;
}

div.carousel-item-image .carousel-item-container {
	height: 105px;
}

/** ヘッダーナビ **/

.header-navigator {
	width: 100%;
	height: 52px;
}

.csstransitions .header-navigator,
.no-cssanimations.csstransitions .header {
	transition: top .1s linear;
	-moz-transition: top .1s linear;
	-webkit-transition: top .1s linear;
	-o-transition: top .1s linear;
}

.header-navigator {
	top: 0;
	background-image: none;
}

.header-navigator.header-active {
	/*top: -52px;*/
	top: 122px;
}

.header-navigator a {
	display: block;
	float: left;
	text-indent: -20000em;
	padding: 0;
	margin: 0 5px;
	background: transparent url(images/splite-buttons-despres.png) no-repeat -2px -421px;
}

.header-navigator a.close-header-icon {
  -moz-opacity: 0;
	opacity:0;
	filter: alpha(opacity=0);
	width: 0;
	height: 0;
}

.header-navigator a.toggle-header-icon,
.header-navigator a.toggle-header-icon:link,
.header-navigator a.toggle-header-icon:visited {
	width: 28px;
	height: 38px;
	background-position: -2px -421px;
}

.header-navigator a.toggle-header-icon:hover,
.header-navigator a.toggle-header-icon:active {
	background-position: -257px -421px;
}

.header-navigator.header-active a.toggle-header-icon,
.header-navigator.header-active a.toggle-header-icon:link,
.header-navigator.header-active a.toggle-header-icon:visited {
	background-position: -2px -416px;
}

.header-navigator.header-active a.toggle-header-icon:hover,
.header-navigator.header-active a.toggle-header-icon:active {
	background-position: -257px -416px;
}

.header-navigator.header-active a.close-header-icon {
  -moz-opacity: 1;
	opacity:1;
	filter: alpha(opacity=100);
	width: 11px;
	height: 11px;
	margin: 15px 5px;
	background-position: 0 -483px;
}

.header-navigator.header-active  a.close-header-icon:hover,
.header-navigator.header-active  a.close-header-icon:active {
	background-position: -256px -483px;
}

/** Carousel **/
#thumbnail-carousel-wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

/** Tommorowland despres Theme **/
.theme-gv #thumbnail-carousel-wrapper {
	border: 0;
}

#thumbnail-carousel-wrapper .bx-wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	*zoom: 1;
}

a.bx-prev, a.bx-next
{
	display: block;
	height: 20px;
	width: 20px;
	line-height: 20px;
	text-indent: -10000em;
	overflow: hidden;
	background: transparent url(images/splite-buttons.png) no-repeat 0 -66px;
	margin: -10px 0 0;
	padding: 0;
	position: absolute;
	top: 50%;
}

/** Tommorowland Theme **/
.theme-gv a.bx-prev,.theme-gv a.bx-next
{
	background: transparent url(images/splite-buttons.png) no-repeat 0 -66px;
}

a.bx-prev
{
	left: 0;
	right: auto;
}

a.bx-next
{
	right : 0;
	left  : auto;
}

a.bx-prev:link,
a.bx-prev:visited
{
	background-position: 0 -66px;
}

a.bx-prev:hover,
a.bx-prev:active
{
	background-position: -256px -66px;
}

a.bx-next:link,
a.bx-next:visited
 {
	background-position: 0 -98px;
}

a.bx-next:hover,
a.bx-next:active
 {
	background-position: -256px -98px;
}

.thumbnail-carousel-container div.carousel-list {
	position: relative;
	margin: 0;
	padding: 0;
}

/** サムネイル画像 **/
div.carousel-item-image {
	float: left;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

div.carousel-item-image img {
  padding: 0;
  margin: 0;
  background-color: transparent;
  box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}

div.carousel-item-image.selected {
	background-color: transparent;
}

div.carousel-item-image .carousel-item-frame {
	padding: 0;
	margin: 0;
}

div.carousel-item-image .carousel-item-container {
	padding: 0;
	margin: 9px 6px 0;
  box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */

  border: 1px solid #cdcdcd;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
}

div.carousel-item-image.selected .carousel-item-container {
	border: 1px solid #9b9b9b;
}

/** コンテンツ エリア **/
.content .frame {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	position: relative;
}

.content .frame {
	overflow: hidden;
}

/** フッター **/
/** despres **/
.footer,
.footer .page-controller-wrapper {
	height: 82px; /** 下マージン 1em; **/
	overflow: hidden;
}

/** フッター各部品このコンテナー設定 **/
.footer .page-controller-wrapper {
	width: 600px;
	margin: 0 auto;
	padding: 0 0 16px;
	position: relative;
}

.footer .page-controller-wrapper .logo-container {
	width: 230px;
	height: 26px;
	padding: 0;
	margin: 0 -230px 0 0;
	float: left;
}

.footer .page-controller-wrapper .page-controller-container {
	width: 261px;
	height: 26px;
	padding: 0;
	margin: 0 -491px 0 230px;
	float: left;
}

.footer .page-controller-wrapper .social-links-container {
	width: 109px;
	height: 26px;
	padding: 0;
	margin: 0 -600px 0 491px;
	float: left;
}

a#brand-logo {
	display: block;
	text-indent: -20000em;
	width: 200px;
	height: 26px;
	margin: 0;
	padding: 0;
	background: transparent url(images/logo.png) no-repeat 0 0;
}

.footer .page-controller-container ul.controller-items {
	width: 220px;
	margin: 6px 0 0;
	padding: 0 20px 0 21px;
	background: transparent url(images/border.png) no-repeat 0 0;
}

.footer .page-controller-container ul.controller-items li
 {
	float: left;
	position: relative;
	margin: 0 10px;
	padding: 0;
	width: 20px;
	height: 20px;
	list-style: none;
	list-style-image: none;
}

a.prev-page, a.next-page,
a#backward-page, a#forward-page {
	display: block;
	text-indent: -20000em;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background: transparent url(images/splite-buttons.png) no-repeat 0 -2px;
	height: 20px;
	width: 20px;
}

a#backward-page,
a#backward-page:link,
a#backward-page:visited {
	background: transparent url(images/splite-buttons.png) no-repeat 0 -2px;
}

a#backward-page:hover,
a#backward-page:active {
	background: transparent url(images/splite-buttons.png) no-repeat -256px -2px;
}

a#forward-page,
a#forward-page:link,
a#forward-page:visited {
	background: transparent url(images/splite-buttons.png) no-repeat 0 -34px;
}

a#forward-page:hover,
a#forward-page:active {
	background: transparent url(images/splite-buttons.png) no-repeat -256px -34px;
}

a.prev-page,
a.prev-page:link,
a.prev-page:visited {
	background-position: 0 -66px;
}

a.prev-page:hover,
a.prev-page:active {
	background-position: -256px -66px;
}

a.next-page,
a.next-page:link,
a.next-page:visited
{
	background-position: 0 -98px;
}

a.next-page:hover,
a.next-page:active {
	background-position: -256px -98px;
}

.side-navigator a.prev-page,
.side-navigator a.next-page {
	position: absolute;
	width: 128px;
	height: 384px;
	z-index: 1200;
	top: 50%;
	margin-top: -192px;
	background: transparent url(images/page-controller-icons.png) no-repeat 0 0;
}

.csstransitions .side-navigator a.prev-page,
.csstransitions .side-navigator a.next-page {
	transition: opacity .2s ease-in;
	-moz-transition: opacity .2s ease-in;
	-webkit-transition: opacity .2s ease-in;
	-o-transition: opacity .2s ease-in;
}

.side-navigator a.prev-page.disabled:hover,
.side-navigator a.next-page.disabled:hover,
.side-navigator a.prev-page.disabled:active,
.side-navigator a.next-page.disabled:active {
	-moz-opacity: 0.30;
	opacity:.30;
	filter: alpha(opacity=100);
}

.side-navigator a.prev-page,
.side-navigator a.prev-page:link,
.side-navigator a.prev-page:visited {
	left: 0;
	-moz-opacity: 1.0;
	opacity: 1.0;
	filter: alpha(opacity=100);
	background-position: -64px 64px;
}

.side-navigator a.prev-page:hover,
.side-navigator a.prev-page:active {
	-moz-opacity: 1.0;
	opacity:1.0;
	filter: alpha(opacity=100);
	background-position: -318px 64px;
}

.side-navigator a.next-page,
.side-navigator a.next-page:link,
.side-navigator a.next-page:visited {
	right: 0;
	-moz-opacity: 1.0;
	opacity: 1.0;
	filter: alpha(opacity=100);
	background-position: -64px -192px;
}

.side-navigator a.next-page:hover,
.side-navigator a.next-page:active {
	-moz-opacity: 1.0;
	opacity:1.0;
	filter: alpha(opacity=100);
	background-position: -318px -192px;
}


.footer .page-controller-container ul.controller-items li.change-button-item {
	margin: 0 2px;
}

#increase-size,
#decrease-size {
	display: block;
	width: 18px;
	height: 20px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	text-indent: -20000em;
	background: transparent url(images/splite-buttons.png) no-repeat 0 -130px;
}

#increase-size:link,
#increase-size:visited {
	background-position: 0 -130px;
}

#decrease-size,
#decrease-size:link,
#decrease-size:visited {
	background-position: 0 -162px;
}

#increase-size:hover,
#increase-size:active {
	background-position: -256px -130px;
}

#decrease-size:hover,
#decrease-size:active {
	background-position: -256px -162px;
}

ul.controller-items li a.disabled {
  -moz-opacity: 0.30;
	opacity:.30;
	filter: alpha(opacity=30);
}

ul.social-links-list {
	display: block;
	list-style: none;
	list-style-position: outside;
	background: transparent url(images/border.png) no-repeat 0 0;
	width: 109px;
	height: 20px;
	margin: 6px 0 0;
	padding: 0;
}

ul.social-links-list li {
	float: right;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 4.5px;
	padding: 0;
}

ul.social-links-list li a {
	text-indent: -2000em;
	display: block;
	height: 20px;
	width: 20px;
	line-height: 20px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent url(images/splite-buttons.png) no-repeat 0 -196px;
}

ul.social-links-list li a.other-catalogs,
ul.social-links-list li a.other-catalogs:link,
ul.social-links-list li a.other-catalogs:visited {
	background-position: 0 -196px;
}

ul.social-links-list li a.other-catalogs:hover,
ul.social-links-list li a.other-catalogs:active {
	background-position: -256px -196px;
}

ul.social-links-list li a.facebook-icon,
ul.social-links-list li a.facebook-icon:link,
ul.social-links-list li a.facebook-icon:visited {
	background-position: 0 -228px;
}

ul.social-links-list li a.facebook-icon:hover,
ul.social-links-list li a.facebook-icon:active {
	background-position: -256px -228px;
}

ul.social-links-list li a.pinit-icon,
ul.social-links-list li a.pinit-icon:link,
ul.social-links-list li a.pinit-icon:visited {
	background-position: 0 -260px;
}

ul.social-links-list li a.pinit-icon:hover,
ul.social-links-list li a.pinit-icon:active {
	background-position: -256px -260px;
}

ul.social-links-list li a.twitter-icon,
ul.social-links-list li a.twitter-icon:link,
ul.social-links-list li a.twitter-icon:visited {
	background-position: 0 -260px;
}

ul.social-links-list li a.twitter-icon:hover,
ul.social-links-list li a.twitter-icon:active {
	background-position: -256px -260px;
}

/** カタログページ **/

.catalog-book-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	z-index: 5;
}

.catalog-book-wrapper.ui-draggable {
	cursor: move;
	cursor: -moz-grab!important;
	cursor: -webkit-grab!important;
}

.catalog-book-wrapper.ui-draggable.ui-draggable-dragging {
	cursor: move;
	cursor: -moz-grabbing!important;
	cursor: -webkit-grabbing!important;
}

.csstransitions .catalog-book-wrapper:not(.ui-draggable),
.csstransitions .dialog-container {
	transition: left .2s ease-in;
	-moz-transition: left .2s ease-in;
	-webkit-transition: left .2s ease-in;
	-o-transition: left .2s ease-in;
}

.catalog-book-wrapper.ui-state-disabled {
	opacity: 1;
	filter: Alpha(Opacity=100);
	cursor: default !important;
}

.catalog-book-container {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.catalog-book-container .catalog-page-wrapper,
.catalog-book-container .catalog-page-wrapper .catalog-page-container,
.catalog-book-container .catalog-page-wrapper .catalog-page-loader,
.catalog-book-container .catalog-page-wrapper .catalog-instruction-container {
	position: absolute;
	left: 0;
	right: auto;
	top:0;
}

.catalog-book-container .catalog-page-wrapper .catalog-instruction-container {
	opacity: .6;
	text-align: center;
	z-index: 10;
}

.catalog-book-container .catalog-page-wrapper .catalog-instruction-container.disabled {
	opacity: 0;
	z-index: 2;
}

.catalog-book-container .catalog-page-wrapper .catalog-page-container.current
{
	z-index: 3;
	opacity: 1;
	filter: Alpha(Opacity=100);
}

.catalog-page-container {
	z-index: 2;
	opacity: 0;
	filter: Alpha(Opacity=0);
}

.catalog-book-container .catalog-page-wrapper .catalog-page-loader {
	z-index: 0;
	opacity: 0;
	filter: Alpha(Opacity=0);
}

.catalog-book-container .catalog-page-wrapper .catalog-page-loader.viewed {
	z-index: 100;
	opacity: .7;
	left: 50%;
	top: 50%;
	filter: Alpha(Opacity=70);
}

.catalog-page-loader .catalog-loading-message {
	background: #FFF;
	width: 100%;
	height: 100%;
	position: relative;
}

.catalog-page-loader .loading-spinner {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 53px;
 margin-left: -26px;
 margin-top: -26px;
}

.boxshadow.rgba .catalog-page-wrapper .catalog-page-container {
	box-shadow: 0px 2px 61px rgba(0, 0, 0, 0.38);
  -moz-box-shadow: 0px 2px 61px rgba(0, 0, 0, 0.38);
  -webkit-box-shadow: 0px 2px 61px rgba(0, 0, 0, 0.38);
}

.csstransitions .catalog-page-wrapper .catalog-page-container {
	transition: opacity .8s ease-in-out;
	-ms-transition: opacity .8s ease-in-out;
	-moz-transition: opacity .8s ease-in-out;
	-webkit-transition: opacity .8s ease-in-out;
	-o-transition: opacity .8s ease-in-out;
}

.touch.csstransitions .catalog-page-wrapper .catalog-page-container {
	transition: transform .5s linear, opacity .3s ease-in;
	-ms-transition: -moz-transform .5s linear, opacity .3s ease-in;
	-moz-transition: -moz-transform .5s linear, opacity .3s ease-in;
	-webkit-transition: -webkit-transform .5s linear, opacity .3s ease-in;
	-o-transition: -o-transform .5s linear, opacity .3s ease-in;
}

.touch.csstransforms .catalog-page-wrapper .catalog-page-container.current,
.touch.csstransforms .catalog-page-wrapper .catalog-page-container.current
{
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
}

/** タッチはスライドするように残しておく **/
.touch.csstransitions.csstransforms .catalog-page-container.prev {
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
}

.no-touch.csstransitions.csstransforms .catalog-page-container.prev,
.no-touch.csstransitions.csstransforms .catalog-page-container.next {
	opacity:0;
}

.touch.csstransitions.csstransforms .catalog-page-container.next {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
}

.catalog-page-wrapper > div {
	position: absolute;
	left: auto;
	right: auto;
	bottom: auto;
	top: auto;
}

/** Animation **/
@-webkit-keyframes fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fade-in-down {
	0% {
		opacity: 0;
		-moz-transform: translateY(-120px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fade-in-down {
	0% {
		opacity: 0;
		-ms-transform: translateY(-120px);
	}

	100% {
		opacity: 1;
		-ms-transform: translateY(0);
	}
}

@keyframes fade-in-down {
	0% {
		opacity: 0;
		transform: translateY(-120px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fade-in-up {
	0% {
		opacity: 0;
		-webkit-transform: translateY(120px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fade-in-up {
	0% {
		opacity: 0;
		-moz-transform: translateY(120px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fade-in-up {
	0% {
		opacity: 0;
		-o-transform: translateY(120px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fade-in-up {
	0% {
		opacity: 0;
		transform: translateY(120px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-up {
	-webkit-animation-name: fade-in-up;
	-moz-animation-name: fade-in-up;
	-o-animation-name: fade-in-up;
	animation-name: fade-in-up;
}

@-webkit-keyframes fade-out-up {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
}
@-moz-keyframes fade-out-up {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-moz-transform: translateY(-100%);
	}
}
@-o-keyframes fade-out-up {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-o-transform: translateY(-100%);
	}
}
@keyframes fade-out-up {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
}

@-webkit-keyframes fade-out-down {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
}

@-moz-keyframes fade-out-down {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-moz-transform: translateY(100%);
	}
}

@-o-keyframes fade-out-down {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-o-transform: translateY(100%);
	}
}

@keyframes fade-out-down {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}

.cssanimations .header {
	-webkit-animation-duration: 500ms;
	-moz-animation-duration: 500ms;
	-o-animation-duration: 500ms;
	animation-duration: 500ms;
}

.no-cssanimations .header
 {
	opacity: 0;
	top: -100%;
}

.cssanimations .header {
	opacity: 0;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-animation-name: fade-out-up;
	-moz-animation-name: fade-out-up;
	-o-animation-name: fade-out-up;
	animation-name: fade-out-up;
}

.cssanimations .header {
	position: absolute;
}

.no-cssanimations .header.active {
	opacity: 1;
	filter: alpha(opacity=100);
	filter: "alpha(opacity=100)";
	top: 0;
}

.cssanimations .header.active {
	-webkit-animation-name: fade-in-down;
	-moz-animation-name: fade-in-down;
	-o-animation-name: fade-in-down;
	animation-name: fade-in-down;
	opacity: 1.0;
	filter: alpha(opacity=100);
	filter: "alpha(opacity=100)";
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.footer,
.footer.active {
	opacity: 1.0;
	filter: alpha(opacity=100);
	filter: "alpha(opacity=100)";
}

.csstransitions .footer.active {
	transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-webkit-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
}

.footer.active:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
	filter: "alpha(opacity=100)";
}

/** Touch Devices **/
/** フッターとヘッダーの高さ設定 **/

.touch .header,.touch .footer, .touch .header-navigator {
	width: 100%;
}

.touch .footer.active {
	opacity: 1.0;
}

.touch .header-navigator {
	position: absolute !important;
	top: 0 !important;
	bottom: auto !important;
}

.touch .footer {
	height: 40px;
	min-height: 40px;
	overflow: hidden;
}

.touch .header {
	height: 60px !important;
	min-height: 60px !important;
}

/** Carousel 設定 **/

.touch #thumbnail-carousel-wrapper {
	height: 60px;
	margin: 0;
	padding: 0;
}

.touch div.carousel-item-image {
	padding: 0;
	margin: 0;
}

.touch div.carousel-item-image img {
	padding: 0;
	margin: 0;

}

.touch div.carousel-item-image .carousel-item-container {
	height: 50px;
	padding: 0;
	margin: 5px 2px;
}

.touch div.carousel-item-image.selected .carousel-item-container {
	background-image: none;
}

.catalog-book-wrapper {
	top: 50%;
	left: 50%;
}

.touch .dialog {
	width: 90%;
	left: 5%;
}

.touch .dialog-container {
	font-size: 14px !important;
	-webkit-text-size-adjust: none !important;
}

.touch .dialog-content ul li {
	margin: 0.5em 0;
}

.touch .dialog-content ul li,
.touch .dialog-content a {
	display: block;
	line-height: 2em;
}

.touch .dialog-content a:hover {
	opacity: .5;
}

.touch .dialog-content a {
	margin: -0.25em -0.5em;
	text-decoration: none;
	color: #474747;
	padding: 0.25em 0.5em;
	background: -moz-linear-gradient( top, #fafafa 0%, #e6e6e6 );
	background: -webkit-gradient( linear, left top, left bottom,  from(#fafafa), to(#e6e6e6));
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;
	border-radius: 0.4em;
	border: 1px solid #e8e8e8;
	-moz-box-shadow: 0px 1px 1px rgba(153,153,153,1), inset 0px -1px 0px rgba(255,255,255,0.6);
	-webkit-box-shadow: 0px 1px 1px rgba(153,153,153,1), inset 0px -1px 0px rgba(255,255,255,0.6);
	box-shadow: 0px 1px 1px rgba(153,153,153,1), inset 0px -1px 0px rgba(255,255,255,0.6);
	text-shadow: 1px 1px 0px rgba(255,255,255,0.7), 0px 1px 0px rgba(255,255,255,0.3);
}

.touch .dialog-header {
	display: none;
}

.touch .dialog-header a.dialog-close-btn {
	width: 1.4em;
	height: 1.4em;
	background-repeat: no-repeat;
	background-image: url(images/close-button.png);
	background-position: 50% 50%;
	top: 0.4em;
	right: 0.4em;
}

@media screen and (orientation:portrait) {

	.touch .dialog,
	.touch .dialog > .dialog-container {
		margin: 0;
		min-height: 7em !important;
		max-height: 7em !important;
	}

	.touch .dialog .dialog-container .dialog-content {
		margin: 1.5em 0;
		padding: 0 1em;
		max-height: 4em;
	}

	.dialogScrollbarV {
		right: 0.4em;
	}
}

@media screen and (orientation:landscape) {

	.touch .dialog {
		font-size: 10px;
		min-width: 40%;
		width: 40%;
		left: 50%;
	}

	.touch .dialog,
	.touch .dialog > .dialog-container {
		margin: 0;
		min-height: 6em;
		max-height: 6em !important;
	}

	.touch .dialog .dialog-container .dialog-content {
		margin: 0;
		padding: 0 1em;
		min-height: 4em;
		max-height: 4em;
	}

	.dialogScrollbarV {
		right: 0.4em;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {

	.touch .dialog,
	.touch .dialog > .dialog-container {
		margin: 0;
		max-height: 20em !important;
	}

	.touch .dialog .dialog-container .dialog-content {
		margin: 2em 0;
		padding: 0 1.0em;
		max-height: 16em;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
	.touch .dialog .dialog-container .dialog-content {
		max-height: 640px;
	}
}

.touch .footer .page-controller-wrapper {
	width: 100%;
	margin: 0;
}

/**　サムネイルリストの移動ボタン **/

.touch #thumbnail-carousel-wrapper .bx-wrapper {
	padding: 0 30px;
}

.touch a.bx-prev,.touch a.bx-next
{
	height: 20px;
	width: 20px;
	line-height: 20px;
	margin: -10px 0 0 0;
}

.touch a.bx-prev
{
	left: 0;
	right: auto;
}

.touch a.bx-next
{
	right : 0;
	left  : auto;
}

.touch a.bx-prev:link,
.touch a.bx-prev:visited,
.touch a.bx-prev:hover,
.touch a.bx-prev:active
{
	background-position: 0 -66px;
}

.touch a.bx-next:link,
.touch a.bx-next:visited,
.touch a.bx-next:hover,
.touch a.bx-next:active
{
	background-position: 0 -98px;
}

.touch .header.active,
.touch .footer.active,
.touch .content {
	position: relative;
}

.touch .content {
	overflow: visible;
}

.touch .dialog {
	-webkit-animation-duration: 1000ms;
	-moz-animation-duration: 1000ms;
	-o-animation-duration: 1000ms;
	animation-duration: 1000ms;
	opacity: 0;
	z-index: -1;
}

.touch .dialog.active {
	opacity: 1;
	bottom: 0;
	z-index: 999;
}


/** フッターコンテンツ **/

.touch .footer .smartphone-footer-container {
	text-align: center;
	position: relative;
}

.touch .footer .smartphone-footer-container a {
	display: inline-block !important;
	position: relative !important;
	text-indent: -20000em;
	width: 20px !important;
	height: 20px !important;
	padding: 0 !important;
	margin: 10px !important;
	background: transparent url(images/splite-buttons.png) no-repeat 0 0;
	overflow: hidden;
}

.touch .footer .smartphone-footer-container a#brand-logo {
	width: 60px !important;
	height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	background-position: 0 3px !important;
	background-size: 100% !important;
}

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

	.touch .footer .smartphone-footer-container a#brand-logo {
		width: 30px !important;
		height: 10px !important;
	}

	.touch .footer .smartphone-footer-container a {
		margin: 10px 5px !important;
	}

}

.touch .smartphone-footer-container a.disabled {
	opacity: .3;
}

/** 吹き出し **/
.touch .footer .smartphone-footer-container a.open-dialog {
	background-position: 0 0 !important;
}


/** 最初のページへ **/
.touch .footer .smartphone-footer-container a#backward-page,
.touch .footer .smartphone-footer-container a#backward-page:link,
.touch .footer .smartphone-footer-container a#backward-page:visited,
.touch .footer .smartphone-footer-container a#backward-page:hover {
	background-position: 0 -2px;
}

.touch .footer .smartphone-footer-container a#backward-page:active {
	background-position: -256px -2px;
}

/** 最後のページへ **/
.touch .footer .smartphone-footer-container a#forward-page,
.touch .footer .smartphone-footer-container a#forward-page:link,
.touch .footer .smartphone-footer-container a#forward-page:visited,
.touch .footer .smartphone-footer-container a#forward-page:hover {
	background-position: 0 -34px;
}

.touch .footer .smartphone-footer-container a#forward-page:active {
	background-position: -256px -34px;
}

@media only screen and (max-width: 567px) {
   /** 小さい画面では、ロゴが入りきらないので **/
	.touch .footer .smartphone-footer-container a#brand-logo {
		width: 30px !important;
		background-position: 0 6px !important;
		margin: 0 0 0 5px !important;
	}

	.touch .footer .smartphone-footer-container a#backward-page,
	.touch .footer .smartphone-footer-container a#forward-page {
		display: none !important;
	}
}

/** iPad **/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.touch .footer .smartphone-footer-container a#brand-logo {
		width: 120px !important;
		height: 40px !important;
		background-position: 0 3px !important;
		background-size: 100% !important;
	}
}

/** ページを戻す **/
.touch .footer .smartphone-footer-container a.prev-page,
.touch .footer .smartphone-footer-container a.prev-page:link,
.touch .footer .smartphone-footer-container a.prev-page:visited,
.touch .footer .smartphone-footer-container a.prev-page:hover {
	background-position: 0 -66px;
}

.touch .footer .smartphone-footer-container a.prev-page:active {
	background-position: -256px -66px;
}

/** ページを進める **/
.touch .footer .smartphone-footer-container a.next-page,
.touch .footer .smartphone-footer-container a.next-page:link,
.touch .footer .smartphone-footer-container a.next-page:visited,
.touch .footer .smartphone-footer-container a.next-page:hover {
	background-position: 0 -98px;
}

.touch .footer .smartphone-footer-container a.next-page:active {
	background-position: -256px -98px;
}

/** 最大化／最小化　ボタン **/
.touch .footer .smartphone-footer-container a#increase-size,
.touch .footer .smartphone-footer-container a#increase-size:link,
.touch .footer .smartphone-footer-container a#increase-size:visited,
.touch .footer .smartphone-footer-container a#increase-size:hover {
	background-position: 0 -130px;
}

.touch .footer .smartphone-footer-container a#increase-size:active {
	background-position: -256px -130px;
}
.touch .footer .smartphone-footer-container a#decrease-size,
.touch .footer .smartphone-footer-container a#decrease-size:link,
.touch .footer .smartphone-footer-container a#decrease-size:visited,
.touch .footer .smartphone-footer-container a#decrease-size:hover {
	background-position: 0 -162px;
}

.touch .footer .smartphone-footer-container a#decrease-size:active {
	background-position: -256px -162px;
}

/** Other Catalog **/

.touch .footer .smartphone-footer-container a.other-catalogs,
.touch .footer .smartphone-footer-container a.other-catalogs:link,
.touch .footer .smartphone-footer-container a.other-catalogs:visited,
.touch .footer .smartphone-footer-container a.other-catalogs:hover {
	background-position: 0 -196px;
}

.touch .footer .smartphone-footer-container a.other-catalogs:active {
	background-position: -256px -196px;
}

/** ソーシャルリンク **/

.touch .footer .smartphone-footer-container a.pinit-icon,
.touch .footer .smartphone-footer-container a.pinit-icon:link,
.touch .footer .smartphone-footer-container a.pinit-icon:visited,
.touch .footer .smartphone-footer-container a.pinit-icon:hover {
	background-position: 0 -260px;
}

.touch .footer .smartphone-footer-container a.pinit-icon:active {
	background-position: -256px -260px;
}

.touch .footer .smartphone-footer-container a.facebook-icon,
.touch .footer .smartphone-footer-container a.facebook-icon:link,
.touch .footer .smartphone-footer-container a.facebook-icon:visited,
.touch .footer .smartphone-footer-container a.facebook-icon:hover {
	background-position: 0 -228px;
}

.touch .footer .smartphone-footer-container a.facebook-icon:active {
	background-position: -256px -228px;
}

/** ヘッダー・フッターのオンオフ **/

.touch .header-navigator.header-active {
	top: 0 !important;
	background-image: none;
}

.touch .header-navigator.header-active a.toggle-header-icon:hover {
	background-position: -2px -416px !important;
}
.touch .header-navigator.header-active a.toggle-header-icon:hover {
	background-position: -2px -416px !important;
}

.touch .header-navigator.header-active  a.close-header-icon:hover {
	background-position: 0 -483px !important;
}


/*** マウス・バルーン ***/
#hover-speach-balloon {
	position:absolute;
	z-index:10000;
	background-color:#222;
	color:#FFF;
	font-size:10px;
	line-height: 18px;
	padding: 0 8px;
	letter-spacing:0.1em;


	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	opacity:.6;
	-moz-opacity:.6;
	filter: alpha(opacity=60);
}

#hover-speach-arrow {
	height:0;
	width:0;
	position:absolute;

	opacity:.6;
	-moz-opacity:.6;
	filter: alpha(opacity=60);

	z-index:9999;
}