@charset "utf-8";

/* COMMON STYLE
------------------------------- */
html { width: 100%; }
body {
	width: 100%;
	font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", YuMincho, "Yu Mincho", "游明朝";
	font-size: 15px;
	line-height: 1.8;
	background-color: #F4F4F4;
}
img { display: block; max-width: 100%; }
/* .ft_bask { font-family: baskerville-pt; } */

.container { width: 100%; position: relative; overflow-x: hidden; }
.inner { max-width: 1500px; margin: 0 auto; padding: 0 20px; }
.wrap_ttl { display: flex; align-items: flex-end; }
.line { display: inline-block; padding-left: 1.5em; position: relative; }
.line::before { content: ''; width: 1em; height: 1px; background-color: #000; transform: rotate(-45deg); position: absolute; left: .25em; top: 50%; }
.menu_list .line::before { background-color: #fff; }

.header { width: 100%; display: flex; justify-content: space-between; position: absolute; top: 0; left: 0; z-index: 10; }
.header .logo { width: 208px; height: 208px; }
.footer { margin-top: 140px; padding: 40px 0; }
.footer .txt { font-size: 12px; text-align: center; }

.mainvisual { width: 100%; position: relative; }
.mainvisual .main_title { width: 100%; position: absolute; top: 22vw; }
.mainvisual .main_title .ttl img { width: 642px; margin: 0 auto; }
.mainvisual .main_title .txt { color: #fff; font-size: 26px; text-align: center; }
.mainvisual .txt_scroll { width: 100%; height: 100px; color: #fff; font-size: 18px; text-align: center; position: absolute; bottom: 0; }
.mainvisual .txt_scroll::after { content: ''; width: 1px; /*height: 60%;*/ background-color: #fff; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
.mainvisual .txt_scroll::after { animation: lineAnm 4s ease infinite; }
.mainvisual .slick-dots { position: absolute; bottom: 0; right: 0; }
.mainvisual .slick-dots li { width: 12px; height: 12px; }
.mainvisual .slick-dots li button { display: block; width: 100%; height: 100%; padding: 0; border: 2px solid #fff; border-radius: 50%; }
.mainvisual .slick-dots li.slick-active button { background-color: #fff; }
.mainvisual .slick-dots li button::before { content: none; }
.mainvisual .slick-prev,
.mainvisual .slick-next { display: none !important; }
.mainvisual .slick-dotted.slick-slider { margin-bottom: 0; }

/* Banner */
.banner_area{ display: block; margin: 50px auto 0; max-width: 1100px; width: 70%; }
.banner_area a:hover{ opacity: 0.8; }
.banner_area.flexBox{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top:30px;}
.banner_area.flexBox a{width:48%;}
.banner_area.flexBox a:nth-child(n+3){margin-top: 30px;}

/* NEWS */
.sec_news { display: block; padding-top: 50px;}
.sec_news .ttl { font-size: 46px; }
.sec_news .ttl .line { font-size: 20px; margin-bottom: 0.5em; padding-left: 1.8em;}
.sec_news .ttl .line::before { left: 0.5em; }
.sec_news .news_content { margin-top: 20px; }
.sec_news .news_content .spBox { display: flex; align-items: center; }
.sec_news .news_content li { display: flex; align-items: center; border-top: 1px solid #6F6F6F; border-bottom: 1px solid #6F6F6F; padding: 15px 10px; }
.sec_news .news_content li:nth-child(n+2) { border-top: none; }
/*.sec_news .news_content li a{ text-decoration: underline; }*/
.sec_news .news_content li a:hover{ text-decoration: none; }
.sec_news .date { margin-right: 1.5em; }
.sec_news .store { margin-right: 1.5em; background: #6F6F6F; color: #ffffff; font-size: 0.8em; font-weight: bold; text-align: center; padding: 1px 1em 0px; line-height: 1.7em;  }

/* Concept */
.sec_concept { padding: 150px 0 90px; background: #F4F4F4 url(../img/bg_concept.png) no-repeat center / cover; }
.sec_concept .ttl { font-size: 32px; }
.sec_concept .ttl span { font-size: 28px; margin-top: 5px; display: block; }
.sec_concept .txt { font-size: 18px; line-height: 2; margin-top: 50px; }

/* Shop Info */
.sec_shopinfo { background-color: #E3E3E3; }
.sec_shopinfo .ttl img { width: auto; height: 83px; }
.sec_shopinfo .txt_area .ttl { font-size: 24px; padding: 5px 0; border-bottom: 1px solid #6F6F6F; }
.sec_shopinfo .txt_area .txt { font-size: 15px; padding: 10px 0; border-bottom: 1px solid #6F6F6F; }
.sec_shopinfo .txt_area a { text-decoration: underline; }
.sec_shopinfo .txt_list { display: flex; flex-wrap: wrap; }
.sec_shopinfo .txt_list dt,
.sec_shopinfo .txt_list dd { font-size: 15px; padding: 10px 0; border-bottom: 1px solid #6F6F6F; }
.sec_shopinfo .txt_list dt { width: 20%; }
.sec_shopinfo .txt_list dd { width: 80%; }
.sec_shopinfo .txt_list a { color: #0033FF; }
.sec_shopinfo .txt_list a:hover { text-decoration: none; }
.sec_shopinfo .txt_list .banner_area { margin-top: 10px; width: 100%; }
.sec_shopinfo .txt_list .all_you_can_eat_bread_txt { display: block; margin-top: 10px; }
.sec_shopinfo .txt_list .sales_time_01 { padding-left: 41px; }
.sec_shopinfo .txt_list .sales_time_02 { padding-left: 104px; }
.sec_shopinfo .txt_list .sales_time_03 { padding-left: 15px; }
.sec_shopinfo .txt_list .sales_time_04 { padding-left: 148px; }
.sec_shopinfo .box01 { margin-top: 60px; }
.sec_shopinfo .box02 { margin-top: 100px; }
.sec_shopinfo .map_area { margin-top: 40px; width: 100%; }
.sec_shopinfo .map_area iframe { width: 100%; }

/* Instagram */
.sec_instagram { background: linear-gradient(180deg, #E3E3E3 0%, #E3E3E3 50%, transparent 50%, transparent 100%); }
.sec_instagram .inner { padding: 100px 100px 60px; background-color: #fff; position: relative; }
.sec_instagram .ttl img { width: auto; height: 64px; }
.sec_instagram .txt { font-size: 18px; margin-top: 30px; }
.sec_instagram .photo_list { margin-top: 50px; display: flex; justify-content: space-between; flex-wrap: wrap; }
.sec_instagram .photo_list li { width: calc((100% - 120px) / 4); margin-bottom: 40px; }
.sec_instagram .photo_list .post blockquote { width: 100% !important; max-width: 100% !important; min-width: 100% !important; }

/* Contact */
.sec_contact { margin-top: 100px; }
.sec_contact .wrap_ttl { justify-content: center; }
.sec_contact .ttl img { width: auto; height: 83px; }
.sec_contact .txt { font-size: 16px; margin-top: 40px; text-align: center; }
.sec_contact .box_tel { padding-left: 80px; }
.sec_contact .box_tel .ttl { font-size: 28px; }
.sec_contact .box_tel .btn_tel { margin-top: 10px; }
.sec_contact .box_tel .btn_tel .btn { display: inline-block; font-size: 48px; line-height: 1; position: relative; }
.sec_contact .box_tel .btn_tel .btn::after { content: ''; width: 64px; height: 64px; background: #000 url(../img/icon_tel.png) no-repeat center / 31px; border-radius: 50%; position: absolute; left: -80px; top: 50%; transform: translateY(-50%); }

/* PC
------------------------------- */
@media screen and (min-width: 829px) {
	.for-sp { display: none !important; }
	.wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
	.wrap_ttl .line { font-size: 20px; margin-bottom: .5em; padding-left: 1.8em; }
	.wrap_ttl .line::before { left: .5em; }
	.btn,
	.btn img { transition-duration: .5s; transition-property: opacity; }
	.btn:hover,
	.btn:hover img { opacity: .6; }
	
	
	.header .menu_area { margin: 25px 25px 0 0; display: flex; align-items: center; align-self: flex-start; }
	.header .menu_list { display: flex; }
	.header .menu_list li { margin-right: 40px; }
	.header .menu_list .ttl img { width: auto; height: 23px; }
	.header .btn_insta .btn { display: block; width: 64px; height: 64px; background: #a5a5a5 url(../img/icon_instagram.png) no-repeat center / 26px; border-radius: 50%; }
	.header .menu_list .header_txt { color: #ffffff; font-size: 15px; }
	
	.mainvisual { max-height: 100vh; overflow-y: hidden; }
	.mainvisual .slick-dots { width: auto; bottom: 40px; right: 30px; }
	.mainvisual .slick-dots li { display: block; }
	.mainvisual .slick-dots li:not(:last-child) { margin-bottom: 20px; }

	/* Concept */
	.sec_concept .wrap .box_txt { width: 42%; }
	.sec_concept .wrap .img { width: 52%; position: relative; }
	.sec_concept .wrap .img::before { content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); position: absolute; bottom: 0; right: 0; }
	.sec_concept .wrap .img img { position: relative; transform: translate(-50px, -50px); }

	/* Shop Info */
	.sec_shopinfo .inner { padding-top: 80px; background-color: #E3E3E3; transform: translateY(-130px); position: relative; }
	.sec_shopinfo .inner::before { content: ''; width: 50%; height: 130px; background-color: #E3E3E3; position: absolute; left: -50%; top: 0; }
	.sec_shopinfo .wrap .img { width: 45%; }
	.sec_shopinfo .wrap .txt_area { width: 45%; }

	/* Instagram */
	.sec_instagram .box_follow { width: 180px; height: 180px; }
	.sec_instagram .box_follow .btn { display: block; width: 100%; height: 100%; background: #E3E3E3 url(../img/icon_instagram.png) no-repeat center top 30px / 57px; border-radius: 50%; padding-top: 100px; }
	.sec_instagram .box_follow .btn span { display: block; text-align: center; line-height: 1; }
	.sec_instagram .box_follow .btn span:nth-child(1) { font-size: 23px; }
	.sec_instagram .box_follow .btn span:nth-child(2) { font-size: 16px; margin-top: 5px; }

	/* Contact */
	.sec_contact .wrap { margin-top: 80px; justify-content: center; }
	.sec_contact .box_tel { margin: 0 50px; }
}

@media screen and (min-width:829px) and ( max-width:1500px) {
}

/* SP
------------------------------- */
@media screen and (max-width: 828px) {
	.for-pc { display: none !important; }
	.wrap_ttl .line { font-size: 14px; }

	.header { height: 80px; }
	.header .logo { width: 80px; height: 80px; }
	.header .menu_area { width: 100%; height: calc(100vh - 80px); background-color: rgba(0, 0, 0, .9); position: absolute; top: 80px; right: -100%; transition-duration: .5s; transition-property: right; }
	.header .menu_area.active { right: 0; }
	.header .menu_list li { padding: 0 20px; border-top: 1px solid #707070; }
	.header .menu_list .btn { padding: 20px 0; color: #fff; }
	.header .menu_list .btn .header_txt { font-size: 18px;  }
	.header .menu_list .ttl img { width: auto; height: 28px; }
	.header .menu_list .txt { font-size: 14px; }
	.header .btn_insta { padding: 20px; border-top: 1px solid #707070; }
	.header .btn_insta .btn { display: inline-block; padding-left: 50px; position: relative; }
	.header .btn_insta .btn::after { content: ''; width: 40px; height: 40px; background: url(../img/icon_instagram_w.png) no-repeat center / 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
	.header .btn_insta .ttl img { width: auto; height: 28px; }
	.header .btn_menu { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; }
	.header .btn_menu span { display: block; width: 45%; height: 35%; position: relative; background: linear-gradient(180deg, transparent 0%, transparent 46%, #fff 46%, #fff 54%, transparent 54%, transparent 100%); }
	.header .btn_menu span::before,
	.header .btn_menu span::after { content: ''; width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0; transition-duration: .5s; transition-property: top, bottom, transform; }
	.header .btn_menu span::before { top: 0; }
	.header .btn_menu span::after { bottom: 0; }
	.header .btn_menu.active { background-color: #000; }
	.header .btn_menu.active span { background: none; }
	.header .btn_menu.active span::before { top: calc(50% - 1px); transform: rotate(45deg); }
	.header .btn_menu.active span::after { bottom: calc(50% - 1px); transform: rotate(-45deg); }
	.footer { margin-top: 60px; padding: 20px 0; }
	
	.mainvisual .main_title { top: 25vw; }
	.mainvisual .main_title .ttl img { width: 188px; }
	.mainvisual .main_title .txt { font-size: 14px; }
	.mainvisual .slick-dots { bottom: 10px; }
	.mainvisual .slick-dots li { width: 10px; height: 10px; margin: 0 10px; }
	.btn_pagetop { width: 90px; height: 90px; position: fixed; bottom: 20px; right: 20px; display: none; }
	.btn_pagetop .btn { display: block; width: 100%; height: 100%; padding-top: 35px; color: #fff; font-size: 14px; text-align: center; line-height: 1.5; background-color: #211300; border-radius: 50%; position: relative; }
	.btn_pagetop .btn::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 11px 18px 11px; border-color: transparent transparent #fff transparent; position: absolute; top: 10px; left: 0; right: 0; margin: 0 auto; }
	
	/* Banner */
	.banner_area { margin: 40px auto 0; width: 90%;}
	.banner_area.flexBox { margin: 30px auto 0; width: 90%; padding-bottom: 40px; display:block;}
	.banner_area.flexBox a{margin-top: 30px; width: 100%; display:block;}
	
	/* NEWS */
	.sec_news { padding-top: 0; margin-bottom: 40px; }
	.sec_news .ttl { font-size: 22px; }
	.sec_news .ttl .line { font-size: 14px; }
	.sec_news .news_content .spBox { margin-bottom: 5px; }
	.sec_news .news_content li { display: block; padding: 10px 10px; }
	
	/* Concept */
	.sec_concept { padding: 0 0 80px; background: #F4F4F4 url(../img/bg_concept_sp.png) no-repeat center / cover; }
	.sec_concept .ttl { font-size: 22px; }
	.sec_concept .ttl span { font-size: 18px; }
	.sec_concept .txt { font-size: 15px; margin-top: 20px; }
	.sec_concept .wrap .img { margin-top: 40px; position: relative; }
	.sec_concept .wrap .img::before { content: ''; width: 95%; height: 100%; background-color: rgba(0, 0, 0, .4); position: absolute; bottom: -5%; right: 0; }
	.sec_concept .wrap .img img { position: relative; width: 95%; height: auto; }

	/* Shop Info */
	.sec_shopinfo { padding-top: 30px; }
	.sec_shopinfo .ttl img { height: 36px; }
	.sec_shopinfo .txt_area { margin-top: 5px; }
	.sec_shopinfo .txt_area .ttl { font-size: 18px; }
	.sec_shopinfo .txt_area .txt { font-size: 14px; }
	.sec_shopinfo .txt_list dt,
	.sec_shopinfo .txt_list dd { font-size: 14px; }
	.sec_shopinfo .txt_list .banner_area  { padding-bottom: 0px; }
	.sec_shopinfo .txt_list .banner_area a { margin-top: 10px; }
	.sec_shopinfo .txt_list .sales_time_01 { padding-left: 25px; }
	.sec_shopinfo .txt_list .sales_time_02 { padding-left: 98px; }
	.sec_shopinfo .txt_list .sales_time_03 { padding-left: 15px; }
	.sec_shopinfo .txt_list .sales_time_04 { padding-left: 140px; }
	.sec_shopinfo .box01 { margin-top: 30px; }
	.sec_shopinfo .box02 { margin-top: 40px; }
	.sec_shopinfo .map_area { margin-top: 20px; }
	.sec_shopinfo .map_area iframe { width: 100%; }

	/* Instagram */
	.sec_instagram { padding: 50px 20px 0; }
	.sec_instagram .inner { padding: 20px 10px 5px; }
	.sec_instagram .ttl img { height: 36px; }
	.sec_instagram .txt { font-size: 14px; margin-top: 10px; }
	.sec_instagram .box_follow { margin-top: 20px; }
	.sec_instagram .box_follow .btn { width: 100%; background: #251815 url(../img/icon_instagram_w.png) no-repeat center left 16vw / 20px; border-radius: 4px; padding: 2px 0; color: #fff; padding-left: 25vw; display: flex; align-items: center; }
	.sec_instagram .box_follow .btn span:nth-child(1) { font-size: 18px; }
	.sec_instagram .box_follow .btn span:nth-child(2) { font-size: 12px; padding-left: 2em; }
	.sec_instagram .photo_list { margin-top: 20px; }
	.sec_instagram .photo_list li { width: 49%; margin-bottom: 2%; }

	/* Contact */
	.sec_contact { margin-top: 50px; }
	.sec_contact .ttl img { height: 36px; }
	.sec_contact .txt { font-size: 14px; margin-top: 20px; }
	.sec_contact .box_tel { padding-left: 45px; width: fit-content; margin: 30px auto 0; }
	.sec_contact .box_tel .ttl { font-size: 18px; }
	.sec_contact .box_tel .btn_tel .btn { font-size: 28px; }
	.sec_contact .box_tel .btn_tel .btn::after { width: 35px; height: 35px; background-size: 17px auto; left: -45px; }
}

/* Animation
------------------------------- */
@keyframes lineAnm {
	0%, 40% { height: 60%; }
	80% { height: 0; opacity: 1; }
	86% { height: 0; opacity: 0; }
	88% { height: 60%; opacity: 0; }
	to { height: 60%; opacity: 1; }
}