@charset "UTF-8";

<style>

*{margin: 0px; padding: 0px;}
body{margin: 0px; padding: 0px; width: auto; min-width: 1080px; background-image: url(http://8eito.about-with.co.jp/assets/img/bg.jpg);}
a{text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0); color: inherit !important;}
img{border: none; display: block;}
ul{margin: 0px; padding: 0px;}
li{list-style: none;}

/*font*/
h1,h2,h3,h4,h5,h6,p,div,input,select,textarea,th,td{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 100; color: #575757; margin: 0px; padding: 0px;}
.gothic{font-family: "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.b{font-weight: bold;}
.fs_big{font-size: 150px;}
.fs_semibig{font-size: 72px;}
.fs_l{font-size: 24px;}
.fs_m{font-size: 20px;}
.fs_s{font-size: 18px;}
.fs_xs{font-size: 16px;}
.webfont{font-family: aracne_ultra_condensultraCnLt !important;}
.white{color: white;}

h2{line-height: 22px;}

/*layout*/
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}
.float{float: left;}
.bb{box-sizing: border-box;}
.m_auto{margin: 0 auto;}
.column_2{width: 50%;}
.column_3{width: 30%; margin-left: 2.5%;}
.pl30{padding-left: 30px;}
.re{position: relative;}
.ab{position: absolute;}
.fx{position: fixed;}
.clear{clear: both;}

/*shape*/
.curve{border-radius: 2px;}
.round{border-radius: 50%;}

.headline{line-height: 160px;}
.headline_h2{margin-top: 20px;}

.pc_br{display: block;}
.mob_br{display: none;}

/*--------------header--------------*/
#header{width: 100%; min-width: 1080px; height: 500px; background-color: #fdf8f1;}
#m_logo{display: none;}
.mobile_menu_btn{display: none;}
#g_nav_box{width: 190px; height: 100%; padding: 30px 0px;}
#g_nav_box ul{margin-top: 20px;}
#g_nav_box ul li{width: 150px; height: 16px; left: -70px; padding: 12px 0px; padding-left: 80px; margin-top: 10px; border-radius: 20px; background-color: #575757; line-height: 40px; cursor: pointer;}

.swiper-container{width: 890px; height: 500px; overflow: hidden;}
.header_visual{width: 100%; height: 100%; background-position: left top; background-size: cover; background-repeat: no-repeat;}
#header_visual_1{background-image: url(http://8eito.about-with.co.jp/assets/img/header_visual.jpg);}
#header_visual_2{background-image: url(http://8eito.about-with.co.jp/assets/img/header_visual_2.jpg); background-position: center center;}
#header_visual_3{background-image: url(http://8eito.about-with.co.jp/assets/img/header_visual_3.jpg);}
#header_visual_5{background-image: url(http://8eito.about-with.co.jp/assets/img/header_visual_5.jpg);}
#main-pn.swiper-pagination{}
#main-pn .swiper-pagination-bullet{position: relative; width: 12px !important; height: 12px !important; margin-right: 10px; background-color: black !important; opacity: 0.4 !important;}
#main-pn .swiper-pagination-bullet-active{opacity: 1.0 !important; background-color: white !important;}

.HPG_reserveGadgetsWrap{margin: 30px auto 0px auto !important;}

#content{padding: 30px 50px;}
.content_inner{padding: 100px 0px 0px 0px; background-color: #fffdfb;}

/*--------------TOP--------------*/
#index #section_1 h2{padding: 30px 40px;}
#index #section_1 #visual_1{position: relative; width: 330px; height: 330px; overflow: hidden;}
#index #section_1 #visual_1 img{position: relative;}
#index #icon_1{top: -40px; left: 280px;}
#index #icon_2{top: 25px; left: 50px;}
#index #icon_3{top: 50px; right: 80px;}

#index #section_2{width: 794px; padding: 60px 0px;}
.organic_vegi{margin-right: 30px;}
.organic_vegi.last{margin-right: 0px;}
.organic_text{padding-top: 40px;}

#section_3{width: 800px; margin-top: 60px;}
#section_3 h3{line-height: 30px; padding-top: 25px;}
#quate_l{top: 0px; left: 0px;}
#quate_r{top: 0px; right: 0px;}
#check{left: -10px; top: -100px;}

#section_4{margin-top: 140px;}
#icon_4{top: 120px; left: 120px;}
#icon_5{top: 40px; left: 240px;}
#icon_6{top: 20px; right: 260px;}
#icon_7{top: 100px; right: 140px;}
#menu_nav_area{margin-top: 40px;}
.menu_box{width: 235px; height: 176px; cursor: pointer;}
.menu_box.hov{top: 0px; left: 0px; display: none;}
.menu_box h2{padding-top: 70px; padding-left: 8px;}
.menu_box.hov h2{color: white;}
.menu_nav.active .menu_box.hov{display: block;}
.menu_box .menu_title{margin-top: 20px;}
.menu_cloud{width: 100%;}

#section_5{margin-top: 100px;}
#section_5 .column_2{margin-top: 50px; height: 306px;}
.more{width: 240px; margin-top: 60px; cursor: pointer;}
.quate_l_min{top: 0px; left: 0px;}
.quate_r_min{top: 0px; right: 0px;}

#section_6{margin-top: 100px;}

#section_7{margin-top: 60px;}
#section_7 h1{font-size: 100px;}
#graph{margin-top: 40px;}

#section_8{width: 880px; margin: 0 auto; margin-top: 80px;}
.insta{margin-top: 30px;}
.insta .thumb_box{width: 100%; padding-bottom: 100%;}
.insta .thumb{width: 100%; height: 100%; overflow: hidden;}
.insta .thumb img{width: 100%; height: auto;}
.insta p{margin-top: 10px; line-height: 20px; height: 40px;}

#section_9{margin-top: 100px;}

#section_10{padding-top: 50px;}
#google_map{width: 100%; height: 500px;}


/*--------------MENU PAGES--------------*/

#menu_section{width: 940px; margin-top: 60px;}
#menu_wrapper{width: 100%;}
.menu_tab_area{margin-top: 60px;}
.menu_tab_area li{padding: 3px 5px; border-right: solid 2px #beb3a8; cursor: pointer;}
.menu_tab_area li.last{border-right: none;}
.menu_area{display: none;}
.menu_area.active{display: block;}
.menu_area .column_3{margin-bottom: 20px;}
.the_menu{width: 270px; height: 195px; overflow: hidden;}
.the_menu img{width: 100%;}
.menu_filter{top: 10%; left: 10%; width: 80%; height: 80%; background-color: rgba(87,87,87,0.7); opacity: 0;}
.menu_filter h3{margin-top: 70px; line-height: 24px;}
.menu_filter p{position: absolute; width: 100%; bottom: 5px; margin-top: 0px; line-height: 24px; letter-spacing: 2px;}

#cafe .content_inner{padding: 50px 0px 60px 0px; background-color: #fffdfb;}
#cafe #section_4{margin-top: 0px;}

#lunch .content_inner{padding: 50px 0px 60px 0px; background-color: #fffdfb;}
#lunch #section_4{margin-top: 0px;}
#lunch #all_880{margin-top: 60px;}
#lunch .menu_area{display: block;}
#lunch #menu_wrapper{width: 800px;}
#lunch .menu_area{margin-top: 60px;}
#lunch .lunch_eyecatch{width: 270px; height: 195px; border: solid 8px white; box-shadow: 2px 2px 1px rgba(0,0,0,0.3); overflow: hidden;}
#lunch .menu_area h2{font-size: 30px; line-height: 46px; margin-left: -60px; margin-top: 10px;}
#lunch .menu_area p{font-size: 18px; margin-left: -60px; margin-top: 20px; line-height: 24px;}
#lunch #section_12{margin-top: 60px;}
#lunch #set_drink_box{width: 60%; padding: 10px 0px; margin-top: 20px; border-radius: 10px; border: solid 2px #575757;}
#lunch #sweets_wrapper{width: 800px;}

#bal .content_inner{padding: 50px 0px 60px 0px; background-color: #fffdfb;}
#bal #section_4{margin-top: 0px;}
#bal .menu_tab_area{margin-top: 10px;}
#bal .menu_tab_area li{padding: 3px 8px; border-right: solid 2px #beb3a8; cursor: pointer;}
#bal .menu_tab_area li.last{border: none;}

.wine_category{font-size: 24px; font-weight: bold; line-height: 1.5; margin-top: 30px;}
.wine_box{width: 100%;}
.wine_box .cf{width: 100%; height: 50px; margin-top: 10px; margin-bottom: 5px;}
.wine_box .flag_thumb{width: 75px; height: 50px; margin-right: 20px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.wine_box h4{width: 400px; height: 50px; line-height: 20px; margin-top: 0px; font-size: 20px;}
.wine_box h4 span{font-size: 13px;}
.wine_box .taste{width: 300px; height: 50px;}
.wine_box .taste li{width: 20px; height: 20px; margin-top: 14px; float: left; border-top: solid 1px rgb(70,70,70); border-bottom: solid 1px rgb(70,70,70); border-left: solid 1px rgb(70,70,70);}
.wine_box .taste li.edge{border-right: solid 1px rgb(70,70,70);}
.wine_box .taste li.active{background-color: #d19a41;}
.wine_box .taste li.label{width: 40px; font-size: 12px; line-height: 20px; text-align: center; border: none;}
.wine_box .wine_price{line-height: 50px; height: 50px; font-size: 18px;}
.wine_exp{margin-top: 10px; margin-bottom: 20px; font-size: 18px;}

#bal #course{margin-top: 50px;}
#bal #course ul{margin-top: 40px;}
#bal .course_box{margin-bottom: 50px;}
#bal .course_box h2{padding: 30px 0px; margin-top: 30px; text-align: center; border-top: 2px dotted #caab91; border-bottom: 2px dotted #caab91; line-height: 1.6;}
.course_visual{width: 100%; height: 600px; background-position: center center; background-size: cover;}
.course_visual_1{background-image: url(http://8eito.about-with.co.jp/assets/img/course_1.jpg);}
.course_visual_2{background-image: url(http://8eito.about-with.co.jp/assets/img/course_2.jpg);}
.course_visual_3{background-image: url(http://8eito.about-with.co.jp/assets/img/course_3.jpg);}
#bal .course_box li{margin-bottom: 20px;}
#bal .course_box li span{color: #919191;}
#bal .notice_txt{margin-bottom: 20px;}
#bal .notice_txt span{font-weight: bold;}

/*--------------news--------------*/

#news .content_inner{padding: 50px 0px 00px 0px; background-color: #fffdfb;}
#news .news_contents{margin-top: 50px; padding-bottom: 50px;}
#news .news_contents p.date{color: #d1781e;}
#news .news_contents h1{width: 800px; margin: 0 auto; padding-bottom: 20px; border-bottom: solid 3px #ebe3d8;}
#news .content_box{width: 800px; margin-top: 30px; padding: 0px 20px; box-sizing: border-box;}
#news .content_box img{width: auto; max-width: 100%;}

/*--------------blog--------------*/

#section_blog{padding-top: 50px; background-color: #fbf4ed;}
.news_box{width: 80%; height: 380px; padding: 20px; margin-bottom: 30px; background-color: #5a4c41; overflow: hidden;}
.news_thumb{width: 100%; height: 230px; overflow: hidden;}
.news_thumb img{width: 100%;}
.news_box h3{line-height: 24px; margin-top: 5px;}

/*--------------footer--------------*/
#footer{width: 100%; height: 230px; padding-top: 30px; background-color: white;}
#footer_nav{width: 725px;}
#footer_nav li{padding: 3px 5px; border-right: solid 2px #787878; cursor: pointer;}
#footer_nav li.last{border-right: 0px;}

#social_box{width: 190px; margin-top: 30px;}

#footer p{margin-top: 30px;}



@media only screen and (max-width: 480px){
	
	body{min-width: 320px; background-size: 50%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
	h2,h3,p{-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
	
	/*font*/
	.fs_big{font-size: 100px;}
	.fs_semibig{font-size: 60px;}
	.fs_l{font-size: 18px;}
	.fs_m{font-size: 16px;}
	.fs_s{font-size: 12px;}
	.fs_xs{font-size: 10px;}
	
	h2{line-height: 22px;}
	
	/*layout*/
	.column_2{width: 100%;}
	.column_3{width: 100%; margin-left: 0%;}
	.pl30{padding-left: 30px;}
	
	.pc_br{display: none;}
	.mob_br{display: block;}
	
	/*--------------header--------------*/
	#header{position: relative; width: 100%; min-width: 320px; height: auto; overflow: hidden;}
	#logo{display: none;}
	#m_logo{width: 150px; margin: 10px; padding: 7px; float: none; display: block;}
	.mobile_menu_btn{position: absolute; top: 0px; right: 0px; width: 40%; height: 100%; padding-top: 18px; display: block;}
	.mobile_menu_btn .mobile_menu_inner{width: 40px; margin-right: 15px; float: right;}
	.mobile_menu_btn .mobile_menu_inner div{width: 40px; height: 6px; margin-bottom: 7px; border-radius: 3px; box-sizing: border-box; border: solid 1px rgb(50,50,50);}
	#g_nav_box{width: 100%; padding: 0px 0px; margin: 0px; z-index: 1000; float: none;}
	#g_nav_box ul{position: relative; width: 100%; height: 0px; margin-top: 0px; overflow: hidden;}
	#g_nav_box ul li{width: 50%; height: 40px; left: 0px; padding: 0px; margin-top: 0px; border-radius: 0px; background-color: rgba(50,50,50); line-height: 40px; cursor: pointer; float: left; text-align: center; border-top: solid 1px white;}
	#g_nav_box ul li img{display: inline-block;}
	
	.header_visual{width: 100%; height: 100%; background-position: center center;}
	.swiper-container{width: 100%; height: 260px; overflow: hidden;}
	#main-pn.swiper-pagination{display: none;}
	
	#content{padding: 15px 15px;}
	.content_inner{padding: 10px 0px 0px 0px; background-color: #fffdfb;}
	
	.HPG_reserveGadgetsWrap{margin: 20px auto 0px auto !important;}
	
	/*--------------TOP--------------*/
	#index #section_1 h2{padding: 0px 20px;}
	#index #section_1 #visual_1{width: 260px; height: 260px;}
	#index #section_1 #visual_1 img{height: 100%;}
	#index #icon_1{height: 30px; top: 0px; left: 45%;}
	#index #icon_2{height: 30px; top: 45px; left: 10%;}
	#index #icon_3{height: 30px; top: 55px; right: 12%;}
	
	#index #section_2{width: 100%; padding: 40px 0px;}
	.organic_vegi{width: 41%; margin-right: 0%; margin-left: 6%; margin-bottom: 10px;}
	.organic_vegi.last{margin-right: 0px;}
	.organic_text{width: 90%; padding-top: 20px;}
	
	#section_3{width: 100%; margin-top: 20px;}
	#section_3 h3{width: 65%; margin: 0 auto; line-height: 20px; padding-top: 0px; font-size: 13px !important;}
	#section_3 h3 br{display: none;}
	#quate_l{height: 100%; top: 0px; left: 10px;}
	#quate_r{height: 100%; top: 0px; right: 10px;}
	#check{height: 40px; left: 10px; top: -50px;}
	
	#section_4{margin-top: 40px;}
	#icon_4{height: 40px; top: -10px; left: 50px;}
	#icon_5{height: 40px; top: 80px; left: 60px;}
	#icon_6{height: 40px; top: 0px; right: 30px;}
	#icon_7{height: 40px; top: 60px; right: 50px;}
	#menu_nav_area{margin-top: 40px;}
	.menu_box{width: 190px; height: 146px; margin-bottom: 30px;}
	.menu_box.hov{width: 190px; height: 146px; top: 0px; left: 0px; display: none;}
	.menu_box h2{padding-top: 50px; padding-left: 8px;}
	.menu_box.hov h2{color: white;}
	.menu_nav.active .menu_box.hov{display: block;}
	.menu_box .menu_title{width: 80%; margin-top: 20px;}
	.menu_cloud{width: 100%; height: 100%;}
	.menu_cloud_active{width: 100%; height: 100%;}
	
	#section_5{position: relative; margin-top: 30px; overflow: hidden;}
	#section_5 .column_2{position: relative; margin-top: 0px; height: auto;}
	#section_5 .column_2 img{width: 85%;}
	#section_5 .column_2.mob_1{margin-top: -140%; left: 15%;}
	#section_5 .column_2.mob_1 img{width: 60%;}
	#section_5 .column_2.mob_2{margin-top: 90%; left: -4%;}
	#section_5 .column_2.mob_3{left: -4%;}
	#section_5 .column_2.mob_3 img{width: 90%;}	
	#section_5 .column_2.mob_4{left: -4%; margin-bottom: 20px;}
	#section_5 .column_2.mob_4 img{width: 90%;}
		
	.more{width: 240px; margin-top: 0px; cursor: pointer;}
	.more p{font-size: 24px; line-height: 50px;}
	.quate_l_min{top: 0px; left: 0px;}
	.quate_r_min{top: 0px; right: 0px;}
	
	
	#section_6{margin-top: 50px;}
	#section_6 .mob_1{position: relative; left: -30px;}
	#section_6 .mob_1 img{width: 60%;}
	#section_6 .mob_1 h2 br{display: none;}
	
	#section_6 .mob_2{position: relative; left: -30px; margin-top: 30px;}
	#section_6 .mob_2 img{width: 95%;}
	
	#section_7{margin-top: 50px;}
	#section_7 h1{font-size: 100px;}
	#section_7 img.h{width: 90%;}
	#section_7 p.link{font-size: 13px; margin-top: 20px;}
	#graph{width: 98%; margin-left: 1%; margin-top: 40px;}
	
	#section_8{width: 100%; margin: 0 auto; margin-top: 50px;}
	#section_8 img.h{width: 80%;}
	.insta{margin-top: 20px;}
	.insta .thumb_box{width: 80%; margin-left: 10%; padding-bottom: 80%;}
	.insta .thumb{width: 100%; height: 100%; overflow: hidden;}
	.insta .thumb img{width: 100%; height: auto;}
	.insta p{width: 80%; margin-left: 10%; margin-top: 10px; line-height: 20px; height: 40px;}
	#section_8 .more{margin-top: 30px;}
	
	#section_9{margin-top: 50px;}
	
	#section_10{padding-top: 50px;}
	#google_map{width: 100%; height: 320px;}
	
	/*--------------MENU PAGES--------------*/

	#menu_section{width: 100%; margin-top: 60px;}
	
	/*--------------blog--------------*/

	#section_blog{padding-top: 50px; background-color: #fbf4ed;}
	.news_box{width: 80%; height: 270px; padding: 20px; margin-bottom: 30px; background-color: #5a4c41; overflow: hidden;}
	.news_thumb{width: 100%; height: 140px; overflow: hidden;}
	.news_thumb img{width: 100%;}
	.news_box h3{line-height: 24px; margin-top: 5px;}
	
	/*--------------footer--------------*/
	#footer{width: 100%; height: 230px; padding-top: 30px; background-color: white;}
	#footer_nav{width: 280px; margin: 0 auto; text-align: center;}
	#footer_nav li{padding: 3px 5px; border-right: solid 1px #787878; cursor: pointer;}
	#footer_nav li img{height: 12px;}
	#footer_nav li.last{border-right: 0px;}
	
	#social_box{width: 190px; margin-top: 30px;}
	
	#footer p{margin-top: 30px; font-size: 12px;}
	
	
	.the_menu{width: 270px; height: 195px; overflow: hidden;}
	.the_menu img{width: 100%;}
	.menu_filter{top: 10%; left: 10%; width: 80%; height: 80%; background-color: rgba(87,87,87,0.7); opacity: 0;}
	.menu_filter h3{margin-top: 70px; line-height: 24px;}
	.menu_filter p{ margin-top: 45px; line-height: 24px; letter-spacing: 2px;}
	
	.menu_tab_area{margin-top: 40px;}
	.menu_tab_area li{position: relative; left: -10px; width: 100%; text-align: center !important; padding: 3px 5px; border-right: none; float: none !important;}
	.menu_tab_area li img{display: inline;}
	.menu_tab_area li.last{border-right: none;}
	
	.wine_category{margin-top: 20px; text-align: center;}
	.wine_box{width: 100%; padding: 10px; box-sizing: border-box; overflow: hidden;}
	.wine_box .cf{width: 100%; height: 50px; margin-top: 10px; margin-bottom: 5px;}
	.wine_box .flag_thumb{width: 75px; height: 50px; margin-right: 5px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
	.wine_box h4{width: 180px; height: 50px; line-height: 17px; margin-top: 0px; font-size: 18px; float: left;}
	.wine_box h4 span{font-size: 12px;}
	.wine_box .taste{width: 200px; height: 50px; float: left;}
	.wine_box .taste li{width: 15px; height: 15px; margin-top: 14px; float: left; border-top: solid 1px rgb(70,70,70); border-bottom: solid 1px rgb(70,70,70); border-left: solid 1px rgb(70,70,70);}
	.wine_box .taste li.edge{border-right: solid 1px rgb(70,70,70);}
	.wine_box .taste li.active{background-color: #d19a41;}
	.wine_box .taste li.label{width: 40px; font-size: 10px; line-height: 20px; text-align: center; border: none;}
	.wine_box .wine_price{line-height: 50px; height: 50px; padding-right: 10px; font-size: 18px; float: right;}
	.wine_exp{margin-top: 10px; margin-bottom: 20px; font-size: 16px; float: none; clear: both;}
	
	#lunch .content_inner{padding: 50px 0px 60px 0px; background-color: #fffdfb;}
	#lunch #section_4{margin-top: 0px;}
	#lunch #all_880{width: 80%; margin-top: 40px;}
	#lunch .menu_area{display: block;}
	#lunch #menu_section{margin-top: 0px;}
	#lunch #menu_wrapper{width: 100%; overflow: hidden;}
	#lunch .menu_area{margin-top: 20px;}
	#lunch .lunch_eyecatch{width: 270px; height: 195px; margin: 0 auto; border: solid 8px white; box-shadow: 2px 2px 1px rgba(0,0,0,0.3); overflow: hidden;}
	#lunch .menu_area h2{width: 80%; font-size: 16px; line-height: 24px; margin: 10px auto;}
	#lunch .menu_area p{width: 80%; font-size: 12px; margin: 10px auto; line-height: 24px;}
	#lunch #section_12{margin-top: 20px;}
	#lunch #set_drink_box{width: 90%; padding: 10px 0px; margin-top: 20px; border-radius: 10px; border: solid 2px #575757;}
	#lunch #sweets_wrapper{width: 100%; overflow: hidden;}
	#lunch .lunch_sweets{width: 80%; margin-left: 15px; }
	#lunch #sweets_wrapper .lunch_eyecatch{position: relative; left: -90px; top: -20px; }
	
	/*--------------news--------------*/

	#news .content_inner{padding: 50px 0px 00px 0px; background-color: #fffdfb;}
	#news .news_contents{margin-top: 50px; padding-bottom: 50px;}
	#news .news_contents p.date{color: #d1781e;}
	#news .news_contents h1{width: 100%; margin: 0 auto; padding-bottom: 20px; border-bottom: solid 3px #ebe3d8;}
	#news .content_box{width: 100%; margin-top: 30px; padding: 0px 20px; box-sizing: border-box;}
	
	.mob_tel_number{color: #397bc0; text-decoration: underline;}
	
	#bal .course_visual{width: 100%; height: 300px; background-position: center center; background-size: cover;}
	#bal .course_box ul{padding: 0px 30px; box-sizing: border-box;}
	#bal .notice_txt{padding: 0px 30px; box-sizing: border-box;}
}

</style>