@charset "utf-8";

/* ==================================================
base
================================================== */
/*サイト全体の背景色を変更する場合*/
/*body { background: #fff; }*/
/*コンテンツ部の背景に画像を敷く場合*/
/*.wrapper { background: url(../img/xxx.png) repeat-x; }*/
/*コンテンツ部の上部をヘッダーに付ける場合*/
/*#contents { padding-top: 0; }*/

/*1カラムだけの場合*/
#main { width: 100%; }
aside#side { display: none; }

/* ==================================================
オリジナルの追加
================================================== */
#contents { max-width: 1060px; }
#contents ul li { padding-left: 0; }
#contents ul li:before { display: none; }


@media screen and (min-width: 480px) {
	
.sp{display:none;}

/*TOPへ戻る*/
/*
#page-top a{background-image:url(../img/back.png); padding:71px 21px; background-color:white; text-indent:-9999px}
#page-top a:hover{background-image:url(../img/back_o.png); background-color:white;}
*/
#suzunone_main{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#9a6c5e; width:1060px; margin:0 auto;}
.target{height:auto; margin:40px auto 10px auto;}
.target:first-child,.target:nth-child(2){margin:15px auto;}/*トップ画像は上空けない*/
.target:nth-child(n+3){width:960px;}/*3番目以降のsection.targetは幅960px*/

.navi{width:970px; height:120px; margin:0 auto;background:url(../img/navi.png) 0px 0;}
.navi ul{list-style:none;}
.navi ul li{float:left;}
.navi ul li:before{ display: none; }
.navi ul li a{height:120px; display:block; text-indent:-10000px; background-image:url(../img/navi_o.png); transition:all .5s; }

.navi ul li#open a{width:300px; background-position:0px 0;}
.navi ul li#histry a{width:175px; background-position:-300px 0;}
.navi ul li#menu a{width:195px; background-position:-475px 0;}
.navi ul li#event a{width:260px; background-position:-670px 0;}

.navi ul li a:hover{height:150px; transform:rotate(6deg);}
/*旧軽井沢カフェ涼の音3月オープン*/
.open_wrap{position:relative; width:960px; height:1220px;}

.ow{position:absolute;}
.box_sample01{ top:0; left:0;}
.box_sample02{ top:270px; right:55px;}
.box_sample03{ top:620px; right:100px; z-index:1;}
.box_sample04{ top:920px; left:30px;}
.box_sample05{ top:920px; left:345px;}
.box_sample06{ top:875px; right:100px; z-index:0;}

.box_sample07{ top:690px; left:85px;}
.text-title{ font-size:18px; font-weight:bold; margin:0;}
.text{font-size:14px; width:323px; margin:0;}

.box_sample08{ top:855px; left: 175px;}

/*ヒストリー*/
.box-histry{width:750px; margin:0 auto; overflow:hidden;}
.histry_left{float:left; width:360px;}
.histry_left p{margin-top:100px; font-size:14px; line-height:180%; text-align:justify;}
.histry_right{float:right; margin-top:-340px;}

/*歴史*/
.box_rekishi{width:550px; margin:0 auto; overflow:hidden; position:relative; height:345px;}
.br{position:absolute;}

.text-category{margin:0 0 -5px 0;}
.text-ruby{ font-size:10px; margin-top:-5px;}

.rekishi_sample01{top:15px; left:55px;}
.rekishi_sample02{top:160px; left:0px;}
.rekishi_sample03{top:80px; right:0px; width:230px; text-align:center;}
.rekishi_sample03 .text{text-align:left; width:230px;}
.rekishi_sample04{top:35px; right:0px;}
.rekishi_sample05{top:15px; left:240px;}
.rekishi_sample06{top:158px; right:0px;}
.rekishi_sample07{top:75px; left:0px; width:230px; text-align:center;}
.rekishi_sample07 .text{text-align:left; width:230px;}
.rekishi_sample08{top:35px; left:0px;}
.rekishi_sample09{top:-7px; right:-5px;}

/*メニュー*/
.box_menu{width:750px; margin:0 auto; overflow:hidden;}
.menu_left{float:left; margin:45px 0 0 80px;}
.menu_right{float:right; position:relative; width:260px; height:290px;}

.mr{position:absolute;}
.menu_sample01{top:50px; left:-130px; z-index:3;}
.menu_sample02{top:0px; left:-40px;}

.menu_intro{position:relative; height:415px;}
.menu_sample03{top:0px; left:0px; z-index:1;}
.menu_sample04{top:175px; right:0px; z-index:2;}
.menu_sample05{top:335px; left:125px; z-index:0;}
.menu_sample06{top:50px; right:-4px; z-index:2;}
.menu_sample07{top:30px; right:35px; z-index:2;}

.menu_text{text-align:center; margin-bottom:20px;}
.menu_text p.text{width:500px; text-align:left; margin:0 auto;}
.other{text-align:center!important;}
.menu_other img{float:left;}
.akagera{float:right; margin-top:-210px;}
.risu{float:left; margin-top:-183px;}

/*イベント*/
.box-event{overflow:hidden; clear:both; width:750px; margin:0 auto;}
.event_left{float:left;}
.event_right{float:right;}
.event-text{width:280px; margin:65px 60px 0 0;}
.text_data{margin:0;}

/*フッター*/
.footer{background-image:url(../img/footer.png); height:925px; margin-bottom:150px;}
.footer_over{width:500px; color:white; margin:0 auto; text-align:center; padding-top:50px; overflow:hidden;}
.footer_over .text-title{font-size:20px; font-weight:100;}
.text-url{margin:0; font-size:14px; margin-bottom:-10px;}
.text-url a{color:white; text-decoration:underline;}
.footer_under{width:635px; margin:15px auto 0 auto; overflow:hidden;}
.footer_left,.footer_right{float:left; color:white; font-size:14px;}
.footer_right{margin-left:20px;}
.footer_right table{margin-top:13px;}
.googlemap{padding:20px; margin:0px auto; width:635px;}


/****大きな地図でみる****/
.btn-medium{padding:7px 13px;}
.btn {position: relative; background: transparent; display: inline-block; text-decoration: none; border: 1px solid; border-radius: 4px; margin-right: 20px; -webkit-transition: 0.3s; transition: 0.3s; margin-left:212px;}
.btn:after { content: ""; position: absolute; border-radius: 4px; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; background: transparent;}
.btn:before { content: ""; position: absolute;}
.btn-t-b { color: white!important; border-color: white;}
.btn-t-b:hover { color: #9a6c5e!important; text-decoration:none; border-color:#9a6c5e;}
.btn-t-b:hover:after { background: #9a6c5e; height: 100%;}
.btn-t-b:after { top: 0; left: 0; width: 100%; height: 0%;}

}
@media screen and (max-width: 479px) {
	
.pc{display:none;}

#suzunone_main{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#9a6c5e; width:100%; margin:0 auto;}
.target{height:auto; margin:40px auto 10px auto; width:100%;}
.target:first-child,.target:nth-child(2){margin:15px auto;}/*トップ画像は上空けない*/
.target:first-child img{width:100%;}
.target:nth-child(n+3){width:100%;}/*3番目以降のsection.targetは幅960px*/

.navi1{width:100%; margin:0 auto;background:url(../img/navi_sp01.png) no-repeat 0px 0; background-size:100%; list-style:none; text-indent:-9999px; overflow:hidden;}
.navi1 ul{width:315px; overflow:hidden; margin:0 auto;}
.navi1 ul li{float:left; padding:41px 72px; background-size:100%!important;}
.navi1 ul li a{display:block;}
#open{background:url(../img/navi_sp02.png) 0 0;}
#histry{background:url(../img/navi_sp03.png) 0 0;}
#menu{background:url(../img/navi_sp04.png) 0 0;}
#event{background:url(../img/navi_sp05.png) 0 0;}

#a,#b,#c,#d{margin-top:-100px;
  padding-top:100px;}


/*旧軽井沢カフェ涼の音3月オープン*/
.target:nth-child(3) img{width:100%;}
.target:nth-child(3) img:nth-child(4){width:50%;}
.box_sample02{overflow:hidden;}
.box_sample02 img{width:50%!important; float:left;}
.box_sample07{margin-top:20px;}
.box_sample07 .text-title{font-size:16px; font-weight:bold; text-align:center;}
.box_sample07 .text{font-size:14px; padding:5px 20px;}

/*ヒストリー*/
.box_title img{width:100%; margin-bottom:20px;}
.histry_left{font-size:14px; margin-top:10px; line-height:180%;}
.histry_left p{padding:5px 20px; text-align:justify;}

/*歴史*/
.rekishi_sample01,.rekishi_sample05{text-align:center;}
.rekishi_sample03,.rekishi_sample07{text-align:center;}
.rekishi_sample03 .text,.rekishi_sample07 .text{font-size:14px; text-align:justify; padding:10px 20px;}

/*メニュー*/
.menu_left{text-align:center;}
.menu_sample02{text-align:center;}
.menu_sample02 img{width:80%; margin-top:15px;}
.menu_sample03 img{width:100%;}
.menu_sample04{text-align:center;}
.menu_sample04 img{margin-top:-35px;}

.menu_text,.other{text-align:center!important;}
.menu_text .text{text-align:justify; padding:10px 30px;}

.menu_other{text-align:center; overflow:hidden;}
.menu_other img{float:left; width:50%;}

/*イベント*/
.event_left,.event_right{text-align:center;}
.event-text .text{text-align:justify; padding:5px 30px;}
#d img{width:100%;}

/*フッター*/
.footer{background-image:url(../img/footer.png); padding-bottom:30px; margin-bottom:20px;}
.footer_over{color:white; margin:0 auto; text-align:center; padding-top:50px; overflow:hidden;}
.footer_over .text-title{font-size:20px; font-weight:100;}
.text-url{margin:0; font-size:14px; margin-bottom:-10px;}
.text-url a{color:white; text-decoration:underline;}
.footer_under{ margin:15px auto 10px auto; overflow:hidden;}
.footer_left,.footer_right {color:white; font-size:14px;}
.footer_left{text-align:center;}
.footer_right{width:307px; margin:0 auto;}
.footer_right table{margin-top:13px;}
.googlemap{padding:20px; margin:0px auto; width:635px;}


/****大きな地図でみる****/
.googlemap_button{text-align:center;}
.btn-medium{padding:20px 75px;}
.btn {position: relative; background: transparent; display: inline-block; text-decoration: none; border: 1px solid; border-radius: 4px; -webkit-transition: 0.3s; transition: 0.3s;}
.btn:after { content: ""; position: absolute; border-radius: 4px; -webkit-transition: 0.3s; transition: 0.3s; z-index: -1; background: transparent;}
.btn:before { content: ""; position: absolute;}
.btn-t-b { color: white!important; border-color: white;}
.btn-t-b:hover { color: #9a6c5e!important; text-decoration:none; border-color:#9a6c5e;}
.btn-t-b:hover:after { background: #9a6c5e; height: 100%;}
.btn-t-b:after { top: 0; left: 0; width: 100%; height: 0%;}

	}