*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, .container, .scroller {
	height: 100%;
}

.scroller {
	/* overflow-y: scroll; */ /*M&C*/
}

.scroller,
.scroller-inner {
	position: relative;
}

.container {
	position: relative;
	overflow: hidden;
	background: #34495e;
}

.menu-trigger {
	position: relative;
	/*
	padding-left: 60px;
	font-size: 0.9em;
	*/
}

.menu-trigger:before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 40px;
	height: 6px;
	background: #fff;
	box-shadow: 0 6px #2da3c7, 0 12px #fff, 0 18px #2da3c7, 0 24px #fff;
	content: '';
}

.menu-trigger span{
	display : block;
	padding : 5px 0 0 0;
}

.mp-pusher {
	position: relative;
	left: 0;
	height: 100%;
}

.mp-menu {
	position: absolute; /* we can't use fixed here :( */
	top: 0;
	left: 0;
	z-index: 1;
	width: 300px;
	height: 100%;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.mp-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #336ca6;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	content: '';
	opacity: 0;
}

.mp-pusher::after,
.mp-level::after {
	background: rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	-moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
}

.mp-level::after {
	z-index: -1;
}

.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.mp-level.mp-level-overlay {
	cursor: pointer;
}

.mp-level.mp-level-overlay.mp-level::before {
	width: 100%;
	height: 100%;
	background: transparent;
	opacity: 1;
}

.mp-pusher,
.mp-level {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
	box-shadow: 1px 0 2px rgba(0,0,0,0.2);
	-webkit-transform: translate3d(-40px, 0, 0);
	-moz-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
	box-shadow: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* cover */
.mp-cover .mp-level.mp-level-open {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

/* content style */
.mp-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-menu h2 {
	margin: 0;
	/*padding: 1em; */
	padding: 1em 5px 1em 5px;
	color: rgba(0,0,0,0.4);
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
	font-weight: 300;
	font-size: 2em;
}

.mp-menu.mp-overlap h2::before {

		/* M&C */
 -webkit-transform: scale(0.4) !important; 
 -moz-transform: scale(0.4) !important; 	

	position: absolute;
	top: 0;
	right: 0;
	/*	margin-right: 8px; */ 
	margin-right: -12px;	/* M&C */
	font-size: 75%;
	line-height: 1.8;
	opacity: 0;

	

	-webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
	transition: opacity 0.3s, transform 0.1s 0.3s;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	

	
}

.mp-menu.mp-cover h2 {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 1em;
}

.mp-overlap .mp-level.mp-level-overlay > h2::before {

	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	
		/* M&C */
 -webkit-transform: scale(0.4) !important; 
 -moz-transform: scale(0.4) !important; 	


}

.mp-menu ul li > a {
	display: block;
/*	padding: 0.7em 1em 0.7em 1.8em;*/ /* M&C */
	padding: 0.5em 1em 0.5em 1.8em; /* M&C */
	outline: none;
	box-shadow: inset 0 -1px rgba(0,0,0,0.2);
	text-shadow: 0 0 1px rgba(255,255,255,0.1);
	/*font-size: 1.4em;*/ /* M&C */
	font-size: 110%; /* M&C */
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s;
}

.mp-menu ul li::before {
	position: absolute;
	left: 10px;
	z-index: -1;
/*	color: rgba(0,0,0,0.2); */ /*M&C */
	color: rgba(255,255,255,0.9); /* M&C */
	line-height: 3.5;
}

.mp-level > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
	background: rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0);
} /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

.mp-back {
	background: rgba(0,0,0,0.1);
	outline: none;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	display: block;
	font-size: 0.8em;
	padding: 1em;
	position: relative;
	box-shadow: inset 0 1px rgba(0,0,0,0.1);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
}

.mp-back::after {
	font-family: 'linecons';
	position: absolute;
	/*content: "\e037"; */ /* M&C */
	content: "\003e";
	font-weight : bold; /* M&C */
	right: 10px;
	/*font-size: 1.3em; *//* M&C */
	/* color: rgba(0,0,0,0.3); */ /* M&C */
	color: rgba(255,255,255,0.9);
}

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
	background: transparent;
	box-shadow: none;
	color: transparent;
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher {
	padding-left: 300px;
}

.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
	display: none;
}

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
	display: block;
}




/* =======================================================================

	アイコンの定義
	
======================================================================== */
.icon{
	text-align:left;
}
#mp-menu h2,
#mp-menu,
.mp-menu,
#mp-menu a,
.mp-menu a{
	color : #fff;
	text-decoration:none;
}
#mp-menu a:hover img,
.mp-menu a:hover img {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}


.icon:before {
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	display: inline-block;
	margin-right: 0.6em;
}

/* 下層へ導く矢印 */
.icon-arrow-left:before {
	content: "\003c";
	font-weight : bold;
}


.icon_kyotu{
	width:45px;
 	height : 40px;
	vertical-align: middle;	
}
	

/* トップページ */
.icon-toppage{
	background : url(../images/icon/home.png) 0 0px no-repeat;
	background-size : 35px;
}

/* 旅する */
.icon-tabisuru{
	background : url(../images/icon/tabisuru.png) 0 0px no-repeat;
	background-size : 35px;
}

/* ものづくり */
.icon-monozukuri{
	background : url(../images/icon/monozukuri.png) 0 0 no-repeat;
	background-size : 35px;
}

/* お知らせ */
.icon-oshirase{
	background : url(../images/icon/oshirase.png) 0 0 no-repeat;
	background-size : 35px;
}

/* イベント */
.icon-event{
	background : url(../images/icon/event.png) 0 0 no-repeat;
	background-size : 35px;
}

/* よくある質問 */
.icon-qa{
	background : url(../images/icon/qa.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 観光案内所 */
.icon-annai{
	background : url(../images/icon/annai.png) 0 0 no-repeat;
	background-size : 35px;
}

/* お問い合わせ */
.icon-inquiry{
	background : url(../images/icon/inquiry.png) 0 0 no-repeat;
	background-size : 35px;
}

/* その他 */
.icon-sonota{
	background : url(../images/icon/sonota.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 言語 */
.icon-gengo{
	background : url(../images/icon/gengo.png) 0 0 no-repeat;
	background-size : 35px;
}
div.gengosentaku{
	display: block;
	padding: 0.7em 1em 0.7em 1.8em;
	padding: 0.5em 1em 0.5em 1.8em;
	outline: none;
	box-shadow: inset 0 -1px rgba(0,0,0,0.2);
	text-shadow: 0 0 1px rgba(255,255,255,0.1);
	font-size: 1.4em;
	font-size: 110%;
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s;
}
div.gengosentaku a{
	color : #000 !important;
}
/* ********** */
/* ********** */
/* ********** */

/* 観る */
.icon-watch{
	background : url(../images/icon/miru.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 食べる */
.icon-eat{
	background : url(../images/icon/taberu.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 泊まる */
.icon-stay{
	background : url(../images/icon/tomaru.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 体験する */
.icon-experience{
	background : url(../images/icon/taikensuru.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 買う */
.icon-buy{
	background : url(../images/icon/kau.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 遊ぶ */
.icon-play{
	background : url(../images/icon/asobu.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 交通・駐車場 */
.icon-traffic{
	background : url(../images/icon/koutsuu.png) 0 0 no-repeat;
	background-size : 35px;
}


/* 利用する */
.icon-use{
	background : url(../images/icon/use.png) 0 0 no-repeat;
	background-size : 35px;
}

/* モデルコース */
.icon-model{
	background : url(../images/icon/model.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ********** */
/* ********** */
/* ********** */

/* 風景 */
.icon-landscape{
	background : url(../images/icon/landscape.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 神社仏閣 */
.icon-temple{
	background : url(../images/icon/temple.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 美術館 */
.icon-museum{
	background : url(../images/icon/museum.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ********** */
/* ********** */
/* ********** */

/* 和食 */
.icon-wasyoku{
	background : url(../images/icon/wasyoku.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 洋食 */
.icon-western{
	background : url(../images/icon/western.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 中華・ラーメン */
.icon-chinese{
	background : url(../images/icon/chinese.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 中華・ラーメン */
.icon-chinese{
	background : url(../images/icon/chinese.png) 0 0 no-repeat;
	background-size : 35px;
}

/* うどん */
.icon-udon{
	background : url(../images/icon/udon.png) 0 0 no-repeat;
	background-size : 35px;
}

/* カフェ・喫茶 */
.icon-cafe{
	background : url(../images/icon/cafe.png) 0 0 no-repeat;
	background-size : 35px;
}

/* お好み焼き・焼肉・その他 */
.icon-bake{
	background : url(../images/icon/bake.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ********** */
/* ********** */
/* ********** */

/* ホテル */
.icon-hotel{
	background : url(../images/icon/hotel.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 旅館・民宿・その他 */
.icon-ryokan{
	background : url(../images/icon/ryokan.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ********** */
/* ********** */
/* ********** */

/* ジーンズ */
.icon-jeans{
	background : url(../images/icon/jeans.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 帆布製品 */
.icon-canvas{
	background : url(../images/icon/canvas.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 畳縁製品 */
.icon-tatamiberi{
	background : url(../images/icon/tatamiberi.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 海産物 */
.icon-seafood{
	background : url(../images/icon/seafood.png) 0 0 no-repeat;
	background-size : 35px;
}

/* お酒 */
.icon-sake{
	background : url(../images/icon/sake.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 菓子 */
.icon-sweets{
	background : url(../images/icon/sweets.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 菓子 */
.icon-other{
	background : url(../images/icon/other.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ********** */
/* ********** */
/* ********** */

/* バス */
.icon-bus{
	background : url(../images/icon/bus.png) 0 0 no-repeat;
	background-size : 35px;
}

/* タクシー */
.icon-taxi{
	background : url(../images/icon/taxi.png) 0 0 no-repeat;
	background-size : 35px;
}

/* レンタカー */
.icon-car_rental{
	background : url(../images/icon/car_rental.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 駐車場・その他 */
.icon-parking{
	background : url(../images/icon/parking.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ********** */
/* ********** */
/* ********** */

/* コース */
.icon-course{
	background : url(../images/icon/course.png) 0 0 no-repeat;
	background-size : 35px;
}

/* 特集 */
.icon-feature{
	background : url(../images/icon/feature.png) 0 0 no-repeat;
	background-size : 35px;
}

/* ************************************************** */
/* メニューを選択後、戻る場所を表示するナビで使う　　 */
/* ************************************************** */

.icon-home:before {
	content:url(../images/icon/home.png);
}
.icon_tabi:before {
	content:url(../images/icon/tabisuru.png);
}
.icon_mono:before {
	content:url(../images/icon/monozukuri.png);
}