@charset "UTF-8";
html{margin:0;padding:0}
body{margin:0;padding:0}
button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;font-size:1.0rem;margin:0;padding:0}
dl,dd,ol,ul,li{list-style-type:none;margin:0;padding:0}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;margin:0;padding:0}
html{color:#000;font-family:"Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-size:12px;-moz-font-smoothing:antialiased;-webkit-font-smoothing:antialiased}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.mainPanel{
	padding-bottom:56.25%;
	position:relative;
	height:0
}
.mainPanel h1 {
	max-width: 560px;
	width: auto;
	margin: 0px;
	font-size: 34px;
	display: inline-block;
	right: auto;
	left: 10%;
	top: 65%;
	padding: 2%;
	font-weight: 600;
	color: #000;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: content-box;
	position: absolute;
	z-index: 10;
}
@media screen and (max-width: 941px) { 
    .mainPanel h1 {font-size: 24px;}
}
@media screen and (max-width : 768px){
    .mainPanel h1 {padding: 2%; max-width: 340px;}
}
@media screen and (max-width : 469px){
    .mainPanel h1 {top: 75%; left: 5%;}
}
@media screen and (max-width : 361px){
    .mainPanel h1 {font-size: 20px; left: 5%; }
}

.mainPanel_playLayout{
	display:table;
	height:100%;
	left:0;
	position:absolute;
	text-align:center;
	top:0;
	white-space:nowrap;
	width:100%
}
.mainPanel_playInnerLayout{
	display:table-cell;
	vertical-align:middle
}
.mainPanel_playMark{
	text-indent:-9999px;
	background:url(../../img/mujitogo/play.svg) no-repeat center;
	background-size:contain;
	display:inline-block;
	height:50px;
	/*margin-right:20px;*/
	vertical-align:top;
	width:50px
}
@media only screen and (max-width: 800px){
	.mainPanel_playMark{height:50px;width:50px}
}

.mainPanel_playText{
	color:white;
	display:inline-block;
	font-size:2.0rem;
	font-weight:bold;
	height:50px;
	line-height:50px;
	text-shadow:0 2px 2px rgba(0,0,0,0.2);
	vertical-align:top
}
@media only screen and (max-width: 800px){
	.mainPanel_playText{
		font-size:1.5rem;
		height:30px;
		line-height:30px
	}
}
.mainPanel_videoLayout{
	overflow:hidden;
	position:relative;
	background-color:#eee;
	height:0;
	padding-bottom:56.25%
}
.mainPanel_videoLayout iframe,
.mainPanel_videoLayout object{
	-webkit-transform:scale(1.01);
	transform:scale(1.01);
	height:100% !important;
	left:0;
	position:absolute;
	top:0;
	width:100% !important
}

@-webkit-keyframes loading-indicator-show{
	0%{opacity:0.0;visibility:visible}
	100%{opacity:1.0}
}
@keyframes loading-indicator-show{
	0%{opacity:0.0;visibility:visible}
	100%{opacity:1.0}
}
@-webkit-keyframes loading-indicator-hide{
	0%{opacity:1.0;visibility:visible}
	100%{opacity:0.0;visibility:hidden}
}
@keyframes loading-indicator-hide{
	0%{opacity:1.0;visibility:visible}
	100%{opacity:0.0;visibility:hidden}
}
.loadingIndicator{
	background-image:url(../../img/mujitogo/loading.png);
	background-repeat:no-repeat;
	background-size:44px auto;
	bottom:0;
	height:44px;
	left:0;
	margin:auto;
	position:absolute;
	right:0;
	top:0;
	-webkit-transition:opacity 0.2s ease-out;
	transition:opacity 0.2s ease-out;
	width:44px
}
.loadingIndicator.loadingIndicator-show{
	-webkit-animation-duration:0.2s;
	animation-duration:0.2s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-name:loading-indicator-show;
	animation-name:loading-indicator-show;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out
}
.loadingIndicator.loadingIndicator-hide{
	-webkit-animation-duration:0.2s;
	animation-duration:0.2s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-name:loading-indicator-hide;
	animation-name:loading-indicator-hide;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out
}

.main_contentLayout{
	position:relative
}
.main_archivesLayout{
	background-color:white;
	bottom:0;
	left:0;
	opacity:0;
	position:absolute;
	right:0;
	top:0;
	-webkit-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
	visibility:hidden;
	z-index:1
}
.main_archivesLayout.main_archivesLayout-expanded{
	opacity:1.0;
	visibility:visible
}
.main_scenesLayout{
	margin-top:10px
}
.main_scenesLayout:after{display:block;clear:both;content:''}
.main_sceneLayout{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	float:left;
	width:33.33333%
}
.main_sceneLayout:nth-child(3n){
	padding-left:1px
}
@media only screen and (max-width: 800px){
	.main_sceneLayout:nth-child(3n){
		padding-left:0
	}
}
.main_sceneLayout:nth-child(3n+1){
	padding-right:1px
}
@media only screen and (max-width: 800px){
	.main_sceneLayout:nth-child(3n+1){
		padding-right:0
	}
}
.main_sceneLayout:nth-child(3n+2){
	padding-left:1px;
	padding-right:1px
}
@media only screen and (max-width: 800px){
	.main_sceneLayout:nth-child(3n+2){
		padding-left:0;
		padding-right:0
	}
}
@media only screen and (max-width: 800px){
	.main_sceneLayout{
		float:none;
		width:auto
	}
}

.product {display: flex; flex-wrap: wrap; max-width:1500px; width: auto; margin:50px auto;}
.product_section {width: 33.33333%; padding: 5px;}

@media only screen and (max-width: 800px){
	.product_section {width: 50%; padding: 5px;}
}
@media only screen and (max-width: 414px){
	.product_section {width:100%;}
}
.product_interactive{
	display:block
}
.product_imageLayout{
	overflow:hidden;
	position:relative;
	background-color:#eee;
	border-width:0;
	/*height:0*/
	padding-bottom:56.25%;
}
.product_imageLayout iframe,
.product_imageLayout object{
	-webkit-transform:scale(1.01);
	transform:scale(1.01);
	height:100% !important;
	left:0;
	position:absolute;
	top:0;
	width:100% !important
}
@media only screen and (max-width: 800px){
	.product_imageLayout{
		/*height:0*/
		padding-bottom:56.25%
	}
}
.product_playMark{
	text-indent:-9999px;
	background-size:contain;
	background:url(../../img/mujitogo/play.svg) no-repeat center;
	bottom:0;
	height:50px;
	left:0;
	margin:auto;
	position:absolute;
	right:0;
	top:0;
	width:50px
}
.product_descriptionLayout{
	display:table;
	height:70px;
	text-align:center;
	width:100%
}
@media only screen and (max-width: 800px){
	.product_descriptionLayout{
		height:auto
	}
}

.product_description{
	display:table-cell;
	font-weight:bold;
	padding:0 10px;
	vertical-align:middle;
	text-align:left;
}
@media only screen and (max-width: 800px){
.product_description{text-align:left;font-size:0.83rem;padding:5px 0 0}
.product_description:lang(ae){text-align:right}
.product_description:lang(kw){text-align:right}
.product_description:lang(sa){text-align:right}
}

.scene_title{display:none;font-size:1.67rem;font-weight:bold;margin:36px 0 10px;text-align:center}
@media only screen and (max-width: 800px){.scene_title{display:block}}

.scene_topImageLayout{background-color:#eee;overflow:hidden}
.scene_topImage{background-position:center;background-repeat:no-repeat;background-size:cover;height:23.57488vw;opacity:0;-webkit-transition:opacity 0.4s ease-out;transition:opacity 0.4s ease-out}
.scene_topImage.b-loaded{opacity:1.0}
@media only screen and (max-width: 800px){.scene_topImage{height:64vw}}

.scene_productsLayout{font-size:0}
.scene_productsLayout:after{display:block;clear:both;content:''}
@media only screen and (max-width: 800px){.scene_productsLayout{padding:50px 20px}}

.scene_productLayout{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:1.0rem}
@media only screen and (max-width: 800px){.scene_productLayout:nth-child(2n){padding-left:5px}}
@media only screen and (max-width: 800px){.scene_productLayout:nth-child(2n+1){padding-right:5px}}
@media only screen and (max-width: 800px){.scene_productLayout:nth-child(n+3){margin-top:40px}}
@media only screen and (max-width: 800px){.scene_productLayout{display:inline-block;vertical-align:top;width:50%}}

.sceneNavigator{padding:20px 0}
@media only screen and (max-width: 800px){.sceneNavigator{display:none}}

.sceneNavigator_title{font-size:1.5rem;font-weight:bold;text-align:center}
.sceneNavigator_arrow{background:url(../../img/mujitogo/scene-navigator-arrow.svg) no-repeat center;background-size:contain;height:20px;margin:15px auto 0;width:40px}

@-webkit-keyframes video-cover-show{
	0%{opacity:0.0;visibility:visible}
	100%{opacity:1.0}
}
@keyframes video-cover-show{
	0%{opacity:0.0;visibility:visible}
	100%{opacity:1.0}
}
@-webkit-keyframes video-cover-hide{
	0%{opacity:1.0;visibility:visible}
	100%{opacity:0.0;visibility:hidden}
}
@keyframes video-cover-hide{
	0%{opacity:1.0;visibility:visible}
	100%{opacity:0.0;visibility:hidden}
}
.video{
	bottom:0;
	left:0;
	opacity:.001;
	position:absolute;
	right:0;
	top:0;
	-webkit-transition:opacity 0.4s ease-out;
	transition:opacity 0.4s ease-out
}
.video.video-loaded{
	opacity:1.0
}
.video_coverLabel{
	cursor:pointer;opacity:0.0
}
.video_coverLabel.video_coverLabel-show{
	-webkit-animation-duration:0.4s;
	animation-duration:0.4s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-name:video-cover-show;
	animation-name:video-cover-show;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out
}
.video_coverLabel.video_coverLabel-hide{
	-webkit-animation-duration:0.4s;
	animation-duration:0.4s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-name:video-cover-hide;
	animation-name:video-cover-hide;
	-webkit-animation-timing-function:
	ease-out;animation-timing-function:ease-out
}
.video_hoverInteractive{
	opacity:0.75;
	-webkit-transition:opacity 0.2s ease-out;
	transition:opacity 0.2s ease-out
}
.video:hover .video_hoverInteractive{
	opacity:1.0
}
.video_coverImage{
	-webkit-transform:scale(1.01);
	transform:scale(1.01);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	bottom:0;
	cursor:pointer;
	left:0;
	position:absolute;
	right:0;
	top:0;
	-webkit-transition:opacity 0.4s ease-out;
	transition:opacity 0.4s ease-out
}
.video_coverImage.video_coverImage-show{
	-webkit-animation-duration:0.4s;
	animation-duration:0.4s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-name:video-cover-show;
	animation-name:video-cover-show;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out
}
.video_coverImage.video_coverImage-hide{
	-webkit-animation-duration:0.4s;
	animation-duration:0.4s;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-name:video-cover-hide;
	animation-name:video-cover-hide;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out
}

.main_mymujitogoList{font-weight:bold;font-size:20px;text-align:center;}
.main_mymujitogoListDd:last-child{margin: 10px 0; }


.relatedLink {display: block; text-align: center; margin-top: 20px;}
.relatedLink a {display: inline-block; background: url(/img/common/arrow_right.png) no-repeat 14px 50%; border: 1px solid #ccc; padding: 10px 20px 10px 35px; text-decoration: none;}
.relatedLink a:hover {border: 1px solid #191919;}

#misc {background: #fff; padding: 0 4%;}

aside.share {border: none; text-align: center; margin-top: 0; background: #fff; padding: 40px 0; border-radius: 0;}
aside.share a {display: inline-block; margin-right: 20px;}
aside.share a:last-child {margin-right: 0;}
aside.share span {display: inline-block; margin-right: 15px; color: #999; font-size: small;}
aside.share img {vertical-align: middle; opacity: .4;}
aside.share img.fbBtn {width: 20px; padding-right: 0;}
aside.share img.tw_btnImg {width: 26px; padding-right: 0;}
aside.share img.weibo {width: 24px; padding-right: 0;}

html[lang="zh-CN"] aside.share img {width: 22px;}

html[lang="en"] .product_description ul li {font-size: 14px;}
.region {font-size: 14px; font-weight: normal; margin-left: 0.5em;}
