@media screen and (max-width:768px){
	*{
		margin:0;
		padding:0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box;
	}
	html,body{
		overflow-x:hidden;
	}
	body{
		font-family:"メイリオ",Meiryo,Verdana,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",sans-serif;
		text-size-adjust:100%;
		-moz-text-size-adjust:100%;
		-webkit-text-size-adjust:100%;
		background:url(../image/body_bg.png);
		line-height:1.8em;
		background-color:#fff;
		word-break:break-all;
	}
	a:hover{
		opacity:.9;
	}
	a > img:hover{
		opacity:.8;
	}
	#section1{position:relative;z-index:9999;}
	#section2{position:relative;z-index:9998;}
	#section3{position:relative;z-index:9999;}
	#section4{position:relative;z-index:9998;}
	.gnav{
		display:none;
	}
	header{
		border-top:3px solid #fff;
	}
	header > h1{
		position:absolute;
		top:0;
		right:0;
	}
	header > h1 img{
		display:block;
		width:120px;
		border:5px solid #fff;
	}
	.mainImage h2{
		padding:50px 0 0;
		display:block;
		width:100%;
		margin:0 auto;
	background-image:
	    url(../image/main_image3.png),
	    url(../image/section_bg.png);
	background-repeat:no-repeat,no-repeat;
	background-position:center bottom,center bottom;
	background-size:130%,auto;
		margin:0 auto;
	}
	.mainImage h2 img{
		display:block;
		width:100%;
		margin:0 auto;
		opacity:0;
	}
	header .mainImage h2::after {
	    content: '';
	    display: block;
	    padding: 5% 0 5%;
	    margin: -4% 0 0;
	    text-align: center;
	    background: url(../image/section_h1.png) no-repeat center center;
	    background-size:30%;
	}
	#section1{
		background:url(../image/section_bg_bottom.png) left -25px top -3px;
		box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.4);
		-webkit-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.4);
		-moz-box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.4);
		border: transparent 1px solid;
	}
	#section1  h2{
	    display:block;
	}
	#section1  .in h2 img{
		display:block;
		margin:0 auto 0;
		position:relative;
		top:-9px;
	}
	#section1 > .middle .in > ul{
		display:block;
		overflow:hidden;
		padding:0 0 30px;
	}
	#section1 > .middle .in ul li{
		display:block;
		width:23%;
		margin:0 1%;
		float:left;
	}
	#section1 > .middle .in ul li img{
		display:block;
		width:100%;
	}
	#section1 > .bottom{
		/*background:url(../image/bg_bottom.png)no-repeat bottom 32px center;*/
		background: url(../image/section02_bg.png) left top;
		background-size:100%;
		padding:10px 0 10px;
	}
	#section1 > .bottom h2{
		display:block;
		width:98%;
		margin:10px auto 0;
	}
	#section1 > .bottom h2 img{
		display:block;
		width:100%;
	}
	#section1 > .bottom p{
		display:block;
		width:92%;
		text-align:center;
		padding:4px 0 13px;
		margin:0 auto;
		line-height:1.9em;
		font-weight:bold;
		font-size:14px;
	}
	#section1 > .bottom p span{
		display:block;
	}
	#section1 > .bottom .in .left img,
	#section1 > .bottom .in .right img{
		display:block;
		width:100%;
	}
	#section2{
		padding:30px 0 0;
		background:url(../image/section02_bg.png) no-repeat left top;
		background-size:cover;
	}
	#section2 > .in{
		overflow:hidden;
		background:url(../image/section2_left.png) no-repeat left bottom -8px;
		background-size:64%;
		/*padding:0 0 80px;*/
		padding:0 0 30%;
	}
	#section2 > .in{
		width:96%;
		margin:0 auto;
	}
	#section2 > .in dt{
		width:92%;
		display:block;
		margin:0 auto;
	}
	#section2 > .in dt img{
		width:100%;
		display:block;
	}
	#section2 > .in dd{
		display:block;
		overflow:hidden;
		padding:20px;
	}
	#section2 > .in ul{
		display:inline-block;
		overflow:hidden;
		float:right;
		position:relative;
		top:3px;
		left:-10px;
	}
	#section2 > .in li{
		display:block;
		border:1px solid #fff;
		margin:0 0 0 5px;
		float:right;
		width:17%;
		text-align:center;
	}
	#section2 > .in li img{
		display:block;
		width:100%;
	}
	#section3{
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.2);
		-moz-box-shadow: 0 0 6px rgba(0,0,0,0.2);
	}
	#section3 .inner ul{
		display:block;
		width:100%;
		padding:20px 0 0;
	}
	#section3 .inner ul li{
		display:block;
		width:92%;
		margin:0 auto 20px;
		border:1px solid #fff;
	}
	#section3 .inner ul li img{
		display:block;
		width:100%;
	}
	#section3 .middle:before{
		content:'';
		display:block;
		padding:27% 0;
		background:url(../image/section_middle.png) no-repeat center center;
		background-size:180%;
		margin:-16% -14% 0 0;
		position:relative;
		top:-5px;
	}
	#section3 .middle{
		padding:0 0 30px;
	}
	#section3 .middle .inner{
		width:92%;
		margin:0 auto;
	}
	#section3 .middle .left img{
		display:block;
		width:100%;
	}
	#section3 .middle .right{
		padding:10px 0 0;
	}
	#section3 .middle .right dl{
		display:block;
	}
	#section3 .middle .right dt{
		margin:0 auto 14px;
		display:block;
	}
	#section3 .middle .right dt img{
		display:block;
		width:84%;
		margin:0 auto;
	}
	#section3 .inner .right dl img{
		dipslay:block;
		width:100%;
		margin:20px auto 0;
	}
	#section3 .middle .inner .right dl dd{
		padding:10px 0 20px;
		width:100%;
		margin:0 auto 10px;
	}
	#section3 .middle .bottom .right dl dd{
		padding:0 0 20px;
		width:80%;
		margin:0 auto;
	}
	#section3 .bottom .inners{
		/*padding:30px 0 20px;*/
		padding:9% 0 5%;
		background-image:
			url(../image/be_image_01.png),
			url(../image/be_image_03.png);
		background-position:
			left top,
			left bottom;
		background-repeat:
			no-repeat,
			no-repeat;
		background-size:100%;
	}
	#section3 .bottom .inners .context{
		background:url(../image/be_image_02.png)  left top;
		background-size:100%;
	}
	#section3 .bottom .inners .context:after{
		content: "."; 
		display: block; 
		height: 0; 
		font-size:0;
		clear: both; 
		visibility:hidden;
	}
	#section3 .bottom .inners .context .left{
		display:none;
	}
	#section3 .bottom .inners .context .right dd{
		display:block;
	}
	#section4{
		background: url(../image/section02_bg.png) left top;
		padding:10px 0 10px;
	}
	#section4 h2{
		padding:50px 20px 20px;
		background:url(../image/parth01.png)no-repeat right 10px top 5px;
		background-size:70px;
	}
	#section4 .in:nth-child(2) .left dd{
		background:url(../image/parth02.png)no-repeat left center;
		background-size:84px;
	}
	#section4 .in:nth-child(3) dd{
		background:url(../image/parth03.png)no-repeat right center;
		background-size:92px;
	}
	#section4 .in:nth-child(4) .left dd{
		background:url(../image/parth04.png)no-repeat left center;
		background-size:84px;
	}
	#section4 h2 img{
		display:block;
		width:92%;
		margin:0 auto;
	}
	#section4 .in{
		width:92%;
		margin:0 auto;
	}
	#section4 .in:after{
		content: "."; 
		display: block; 
		height: 0; 
		font-size:0;
		clear: both; 
		visibility:hidden;
	}
	#section4 .in .left img{
		width:80%;
		display:block;
		margin:0 auto;
	}
	#section4 .in:nth-child(4) .right img,
	#section4 .in:nth-child(3) .right img,
	#section4 .in:nth-child(2) .right img{
		display:block;
		width:90%;
		margin:0 auto;
	}
	#section4 .in .left dt{
		display:block;
		padding:18px;
	}
	#section4 .in .left dd{
		display:block;
		padding:3% 0 3% 90px;
		margin:0 auto 20px;
	}
	#section4 .in .right dd b,
	#section4 .in .left dd b{
		border:1px solid #fff;
		display:block;
		background:#fff;
		padding:7px 3px 7px 7px;
		border-radius:16px;
	}
	#section4 .in:nth-child(3) dd{
		position:relative;
		left:10px;
	}
	#section4 .in:nth-child(3) dd b{
		position:relative;
		left:-10px;
	}
	#section4 .in:nth-child(3) .left dd{
		display:block;
		padding:3% 90px 3% 0;
		margin:0 auto 20px;
	}
	#section4 .in .right{
		margin:0 auto 20px;
	}
	#section5{
		background:url(../image/section5_background.png);
		background-size:cover;
		padding:0 0 30px;
	}
	#section5 .middle{
		width:92%;
		margin:0 auto;
		padding:0;
	}
	#section5 .middle h2{
		text-align:center;
		margin:0 0 30px;
	}
	#section5 .middle h2 img{
		display:block;
		margin:0 auto;
		width:100%;
		opacity:0;
	}
  article #section5 .middle h2:after{
  	content:'Interesting aspects of Hotel Yunomoto';
	display:block;
	background-image:
	url(../image/h_line1.png),
	url(../image/h_line2.png);
	padding:40px 0;
	margin:-100px auto 0;
	color:#fff;
	font-size:28px;
	line-height:1.8em;
	font-weight:bold;
	letter-spacing:1px;
	background-repeat:
	repeat-x,
	repeat-x;
	background-position:
	left top,
	left bottom;
  }
	#section5 .middle p{
		color:#fff;
		display:inline;
		margin:0 auto 20px;
	}
	#section5 dl{
		display:block;
		padding:20px 0 0;
		margin:30px auto 30px;
		width:92%;
	}
	#section5 dl:nth-child(1){
		background-color:#fff;
		position:relative;
	}
	#section5 dl:nth-child(2){
		background-color:#fff;
		position:relative;
	}
	#section5 dl:nth-child(3){
		background-color:#fff;
		position:relative;
	}
	#section5 dl:nth-child(1):before,
	#section5 dl:nth-child(2):before,
	#section5 dl:nth-child(3):before{
		content:'';
		width:100px;
		height:100px;
		display:block;
		position:absolute;
		left:-20px;
		top:-30px;
	}
	#section5 dl:nth-child(1):before{background:url(../image/poin1.png) no-repeat center center;background-size:90%;}
	#section5 dl:nth-child(2):before{background:url(../image/poin2.png) no-repeat center center;background-size:90%;}
	#section5 dl:nth-child(3):before{background:url(../image/poin3.png) no-repeat center center;background-size:90%;}
	#section5 dt{
		display:block;
		text-align:center;
		width:92%;
		margin:0 auto;
	}
	#section5 dt img{
		display:block;
		margin:0 auto;
		width:100%;
	}
	#section5 dd{
		display:block;
		padding:20px;
	}
	
  article #section5 .bottom dl:first-child dd span:after{
  	content:'The original Japanese cuisine which is made by Chef Seko has been nominated for numerous awards.';
	font-weight:bold;
	padding: 15px 0 3px;
	display:block;
  }
  article #section5 .bottom dl:nth-child(2) dd span:after{
    	content:'Enjoy the incredible view of lse Planin from open-air bath!';
	font-weight:bold;
	padding: 15px 0 3px;
	display:block;
  }
  article #section5 .bottom dl:nth-child(3) dd span:after{
    	content:'1 min from Gozaisho Ropeway station!';
	font-weight:bold;
	padding: 15px 0 3px;
	display:block;
  }
	#section5 dd span img{
		margin:0 auto;
		width:100%;
		display:none;
	}
	#section6{
	margin:0 0 30px;
	padding:0 0 30px;
	background-image:
		url(../image/section_7_bgg01.png),
		url(../image/bt_bg.png),
		url(../image/bt_bg2.png);
	background-position:
		left bottom,
		center top,
		left top;
	background-repeat:
		no-repeat,
		no-repeat,
		repeat-y;
	background-size:
		100%,
		100%,
		100%;
	}
	#section6 .in h2 img{
		display:block;
		width:100%;
	}
	#section6 .in .map{
	    width:92%;
	    margin:0 auto;
	    padding:10px 10px 2px;
	    background-image:
		    url(../image/lefttop.png),
		    url(../image/leftbottom.png),
		    url(../image/righttop.png),
		    url(../image/rightbottom.png);
	    background-position:
		    left top,
		    left bottom,
		    right top,
		    right bottom;
	    background-repeat:
		    no-repeat,
		    no-repeat,
		    no-repeat,
		    no-repeat,
		    no-repeat;
	}
	iframe{
		height:300px;
	}
	#section7{
		border:5px solid #e35a28;
		background:#fff;
		width:96%;
		margin:0 auto;
		padding:10px 20px 20px;
	}
	#section7 .in{
		background:url(../image/section7_dt.png) no-repeat center top;
		background-size:92%;
		padding:34% 0 0;
		overflow:hidden;
	}
	#section7 .in .left{
		width:100%;
		background:url(../image/hito.png) no-repeat right -76px bottom;
		background-size:280px;
	}
	#section7 .in .left dt{
		margin:-50px auto 0;
		display:none;
	}
	#section7 .in .left dt img{
		display:block;
		width:100%;
		opacity:.5;
	}
	#section7 .in .left dd{
		display:block;
		width:100%;
		margin:20px auto;
	}
	#section7 .in .left li{
		margin:0 auto 5px;
		position:relative;
		top:-6px;
	}
	#section7 .in .left li a{
		background:url(../image/btn_icon.png) no-repeat center right 7px;
		background-size:13px;
		background-color:#e35a28;
		color:#fff;
		padding:0 2px 0 10px;
		width:46%;
		display:block;
		font-size:10px;
		font-weight:bold;
		border-radius:5px;
	}
	#section7 .in .right{
		margin:0 auto;
	}
	#section7 .in .right dt{
		display:none;
	}
	#section7 .in .right dt img{
		display:block;
		width:100%;
	}
	#section7 .in .right dd{
		display:block;
		width:100%;
	}
	#section7 .in .right dd ul{
		display:block;
		width:100%;
		overflow:hidden;
		position:relative;
		top:10px;
	}
	#section7 .in .right dd ul li{
		width:50%;
		float:left;
		border:5px solid #fff;
	}
	#section7 .in .right dd ul li img{
		display:block;
		width:100%;
		margin:0 auto;
	}
	#section8 .in{
		padding:20px 0 0;
	}
	#section8 dt img{
		display:block;
		width:80%;
		margin:0 auto;
	}
	#section8 dd{
		text-align:center;
		margin:0 auto 30px;
	}
	#section8 dd img{
		display:block;
		width:90%;
		margin:0 auto;
	}
	footer{
		background:#000;
		color:#fff;
		font-size:10px;
		text-align:center;
		padding:18px 0;
	}
}