@charset "utf-8";

/* ===================================================================
 index
=================================================================== */

#d-navi{
	display: block;
	position: relative;
	z-index: 99;
	height: 40px;
	line-height: 40px;
	margin-top: 55px;
}

#d-navi li{
	float: left;
	background: #000000;
	box-sizing:border-box;
	width: 33%;
	text-align: center;
	font-size: 12px;
	font-weight: 900;
}

#d-navi li a{
	color: #fff;
	display: block;
}

#d-navi li:nth-child(2)	{
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	width: 34%
}

#home #main-slide {
	margin-top: 0;
}

#home #main-slide img{
	width: 100%;
	min-width: 100%;
	margin-top: auto !important
}

#home .caption-slide{
	min-width: 100%;
	bottom: 1px;
	height: 30px
}

#home #slider1.slider-pro p.sp-layer{
	font-size: 10px;
	line-height: 1;
	font-weight: 900
}

#home .caption-slide p{
	width: auto;
}

#home #slider1 .sp-slide{
	width: 100% !important;
}

#home .sp-button{
	width: 10px;
	height: 10px;
	margin-right: 8px;
	margin-left: 8px
}

#home .sp-selected-button{
	background: #000000;
	border: #000000
}

#home #info{
	height: auto;
	padding-top: 24px;
	padding-bottom: 50px
}

#home #info .inner{
	overflow: visible;
}

#home #info .inner dd,
#home #info .inner dt{
	float: none;
}

#home #info .inner dd{
	border: none;
	width: 100%;
	margin-bottom: 10px
}

#home #info .inner dt{
	width: 90% !important;
	max-width: 86% !important;
	margin: 0 7% !important;
	height: auto;
	text-align: center;
	font-size: 12px;
}

#home #info .inner dt span{
	display: block;
	width: 100%;
	margin-right: 0;
	font-size: 10px;
	margin-bottom: 6px
}

#home #slider2.sp-horizontal .sp-arrows{
	top: 100%;
	width: 100% !important;
}

#home #slider2.sp-horizontal .sp-previous-arrow{
	right: auto;
	left: 0;
	margin-left: -4%;
	border-right: none;
	padding-right: 0
}

#home #slider2.sp-horizontal .sp-next-arrow{
	right: 0px;
	margin-right: -4%;
}

#home #slider2 .sp-arrow{
	margin-top: 0px
}


#home section{
	position: relative;
	z-index: 99;
	background: #fff
}

#home .outer{
	height:180px;
}

#home .outer p{
	font-size: 24px;
	line-height: 38px;
	margin-top: 110px
}

#home #slide{
	background-size: 140% auto ;
	margin-top: 0;
	top: 0 !important;
	right: 0;
	bottom: 0;
	left: 0;
}

#home .slide01{
	background-image: url(/img/index/bg_parallax-sp_01.jpg);
}

#home .slide02{
	background-image: url(/img/index/bg_parallax-sp_02.jpg);
}

#home #read-box{
	padding: 0 0 54px;
}

#home #read-box .img-box,
#home #read-box .txt-box{
	width: 100%;
	height: auto;
	float: none;
}

#home #read-box .img-box img,
#home #read-box .img-box div{
	width: 50%;
	height: auto;
}

#home #read-box .img-box div img{
	width: 100%
}

#home .txt-box{
	line-height: 18px;
	padding-top: 44px;
}

#home .txt-box h1{
	font-size: 24px;
	margin-bottom: 24px
}

#home .txt-box p{
	font-size: 10px;
}

#home .txt-box hr{
	border-top: 2px solid #000;
	margin: 20px auto;
	width: 40px
}

#home .txt-box hr+p{
	font-size: 12px;
}

#home #world{
	margin-top: 54px
}

#home #fresh{
	min-width: 100%;
}

#home #fresh .inner{
	height: auto;
	padding-bottom: 96%
}

#home #fresh img{
	width: 92%;
	top: 340px
}

#home #fresh img.b-left{
	left: -48%;
}

#home #fresh img.b-right{
	right: -48%;
}

#home #insta h1{
	font-size: 18px;
	margin-bottom: 30px;
}

#home #insta #instafeed{
	height: auto;
	margin-bottom: 44px;
	padding: 0 10px;
	box-sizing:border-box;
}

#home #insta #instafeed li{
	float: none;
	display: inline-block;
	width: 50%;
	height: auto;
	padding: 0 5px;
	box-sizing:border-box;
	margin-right: 0;
	margin-bottom: 10px
}

#home #insta #instafeed li img{
	width: 100%;
	height: 100%
}

#home #press{
	padding: 40px 0 30px
}

#home #press h1{
	font-size: 18px;
	margin-bottom: 30px
}

#home #press dl {
	width: 100%;
	padding: 0 20px;
	box-sizing:border-box;
}

#home #press dl dt{
	width: 100%;
	line-height: 10px;
	font-size: 10px;
    position: relative;
    padding: 0;
    margin-bottom: 10px;
}

#home #press dl dd{
	padding-left: 0;
	width: 100%;
	font-size: 12px;
	box-sizing:border-box;
	line-height: 20px;
}

#home #press dl dd:last-child{
	margin-bottom: 26px
}

/* ===================================================================
 ABOUT
=================================================================== */

#about .inner h2{
	font-size: 18px;
	margin-bottom: 34px;
}

#about .inner .box{
	width: 100%;
	float: none;
}

#about .inner .box+.box{
	margin-left: 0;
	margin-top: 50px;
}

#about .inner h3{
	font-size: 18px;
	margin-top: 16px;
	margin-bottom: 18px;
}

#about .inner h4{
	font-size: 12px;
	margin-bottom: 20px;
	line-height: 20px
}

#about .inner p{
	font-size: 12px;
	line-height: 20px;
	padding-left: 16px;
	padding-right: 16px
}

#about .inner+.inner{
	margin-top: 70px
}

/* ===================================================================
 MENU
=================================================================== */

#menu.index .inner h2{
	font-size: 18px;
	margin-top: 30px;
	margin-bottom: 30px;
}

#menu.index .inner .box{
	width: 100%;
	float: none;
	margin-bottom: 50px;
}

#menu.index .inner .box img{
	width: 100%
}

#menu.index .inner .box+.box{
	margin-left: 0px
}

#menu.index .inner .box:nth-of-type(n+4){
	margin-bottom: 50px
}

#menu.index .inner .box:last-child{
	margin-bottom: 0
}

#menu.index .inner p{
	font-size: 12px;
	line-height: 20px;
	padding-left: 10px;
	padding-right: 10px
}

#menu.index .inner a.ghost-btn{
	width: 200px
}

#menu.third #contents h1{
	margin-bottom: 10px
}

#menu p.note{
	text-align: center;
	width: 100%;
	font-size: 10px;
	line-height: 1;
	margin: 0 auto 50px;
	position: static;
}

.detail{
	padding: 0 10px;
}

.detail li{
	width: 100%;
	border-right: 0 !important;
	text-align: left;
	padding: 20px 0;
	float: none;
	margin: 0;
	min-height: 1px !important;
	overflow: hidden;
}

.detail li:first-child{
	padding-top: 0
}

.detail li img{
	width: 40%;
	height: auto;
	float: left;
}

.side .detail li,
.dessert .detail li{
	min-height: auto;
}

.detail h2{
	line-height: 18px;
	font-size: 14px;
	padding-left: 44%;
	text-align: left !important;
	box-sizing:border-box;
	margin-top: 0px;
	margin-bottom: 4px
}

.detail h2.one-line{
	height: auto
}

.detail h3{
	font-size: 10px;
	line-height: 14px;
	margin-bottom: 6px;
	padding-left: 44%;
	text-align: left !important;
	box-sizing:border-box;
}

.detail dl{
	margin-bottom: 10px;
	font-size: 10px;
	padding-left: 44%;
	text-align: left !important;
	box-sizing:border-box;
}

.detail dt+dd{
	margin-left: 10px
}

.detail dl br+dd{
	margin-left: 0;
	margin-top: 4px
}

.detail p{
	font-size: 10px;
	line-height: 16px;
	height: auto;
	padding-left: 44%;
	text-align: left !important;
	box-sizing:border-box;
}

.detail p br{
	display: none;
}

#guidance{
	font-size: 10px;
	line-height: 18px;
	padding: 20px 10px;
	width: 94%;
	box-sizing:border-box;
	margin: 30px auto 0
}

/* ===================================================================
 COMPANY and CONTACT
=================================================================== */

#company #contents .inner,
#contact #contents .inner{
	width: 96%
}

#company #contents #map.inner{
	width: 100%
}

#company #contents .inner+.inner{
	margin-top: 70px
}

#company #contents h2{
	font-size: 18px;
	margin-bottom: 34px;
}

#company #contents table{
	border: 1px solid #E6E6E6;
	width: 100%
}

#company #contents table th,
#company #contents table td{
	padding: 6px 10px;
}

#company #contents table th{
	width: 80px
}

#company #contents .box{
	padding: 20px;
	width: auto;
}

#company #contents .box p{
	line-height: 22px;
	font-size: 12px
}

#company #contents .box div{
	width: auto;
	float: none;
	margin-top: 20px;
	margin-bottom: 30px
}

#company #contents .box div img{
	width: 100%;
}

#company #contents .box div+div{
	margin-left: 0
}

#contact th span{
	display: block;
	margin-left: 0px;
	width: 50px;
	text-align: center;
}

#contact td .hs{
	width: 90%;
}

#contact label{
	margin-top: 30px
}

#contact .submit input{
	margin-top: 30px
}

/* ===================================================================
 LOCATION
=================================================================== */

#location #contents h1{
	margin-bottom: 60px;
}

#location #menu-list.shop-list{
	width: 140%;
	box-sizing: border-box;
}

#location #menu-list.shop-list li{
	width: 32%
}

#location #menu-list.shop-list li a{
	width: auto;
}

#location .inner .box{
	width: 100%;
	float: none;
	margin-bottom: 0
}

#location .inner .box img{
	width: 100%;
	height: auto;
}

#location .inner .box+.box{
	margin-left: 0;
	margin-top: 60px;
}

#location.index .inner h2{
	font-size: 18px;
	margin-top: 16px;
	margin-bottom: 14px;
}

#location.index .inner p{
	font-size: 12px;
	line-height: 20px;
	padding-left: 16px;
	padding-right: 16px;
	margin-bottom: 20px
}

#location.third .inner div>h2,
#location.third article>h2{
	font-size: 18px;
	margin-bottom: 30px;
}

div.content,
div.slideshow,
div.slideshow span.image-wrapper{
	width: 100%;
	overflow: hidden;
}

div#thumbs{
	width: 100% !important;
}


@media only screen and (min-device-width:320px) and (max-device-width:568px) {
	div.content,
div.slideshow,
div.slideshow-container,
div.slideshow span.image-wrapper{
	height: 210px;
}

div.slideshow img{
	width: auto;
	height: 100%;
	max-height: 210px
}
}

@media only screen and (min-device-width:375px) and (max-device-width:667px) {
div.content,
div.slideshow,
div.slideshow-container,
div.slideshow span.image-wrapper{
	height: 240px;
}

div.slideshow img{
	width: auto;
	height: 100%;
	max-height: 420px
}
}

@media only screen and (min-device-width:414px) and (max-device-width:736px) {
div.content,
div.slideshow,
div.slideshow-container,
div.slideshow span.image-wrapper{
	height: 270px;
}

div.slideshow img{
	width: auto;
	height: 100%;
	max-height: 420px
}
}

ul.thumbs li {
	width: 25%;
	box-sizing: border-box;
	padding: 0 2%;
	margin: 0
}

#location.third #contents table th{
	width: 60px
}

#location.third #icon-list li{
	margin: 0 2px;
	width: 14%
}

#location.third #icon-list li img{
	width: 100%;
	height: auto
}

@media only screen and (min-device-width:320px) and (max-device-width:568px) {
#location.third #icon-list li p{
	font-size: 30px;
}
}

@media only screen and (min-device-width:375px) and (max-device-width:667px) {
#location.third #icon-list li p{
	font-size: 34px;
}
}

@media only screen and (min-device-width:414px) and (max-device-width:736px) {
#location.third #icon-list li p{
	font-size: 38px;
}
}

#location.third #menu-list{
	margin-bottom: 0
}

#location.third #outline{
	margin-bottom: 60px
}

#location.third #local-menu .scroll-box{
	margin-top: 0
}

#location.third .tab li.title{
	width: 100%;
	display: block;
	height: auto;
	min-height: auto;
	margin: 0 0 60px;
	padding: 0
}

#location.third .tab li.title {
	font-size: 16px;
	padding: 0 10px;
	margin-bottom: 20px
}

/* ===================================================================
 NEWS and PRESS
=================================================================== */

body#news.seconde dl,
body#press.seconde dl {
	width: 90%;
	padding-top: 20px;
}

body#news.seconde dl dt,
body#news.seconde dl dd,
body#press.seconde dl dt,
body#press.seconde dl dd{
	line-height: 16px;
	margin-bottom: 20px;
	padding-bottom: 20px
}

body#news.seconde dl dt,
body#press.seconde dl dt{
	width: 100%;
	line-height: 10px;
	font-size: 10px;
    position: relative;
    padding: 0;
    margin-bottom: 4px;
}

body#news.seconde dl dd,
body#press.seconde dl dd{
	padding-left: 0px;
	font-size: 12px;
	width: 100%;
}

body#news.seconde dl dd:last-child,
body#press.seconde dl dd:last-child{
	margin-bottom: 0
}

body#news.third #contents .inner,
body#news.third #contents .inner .content_box{
	width: 100%;
}

body#news.third .inner h2{
	font-size: 14px;
	margin-bottom: 10px;
	padding: 0 10px
}

body#news.third #contents .inner img{
	width: 100%;
	height: auto
}

body#news.third .inner .time{
	font-size: 12px;
	margin-bottom: 30px
}

body#news.third #contents .inner p{
	font-size: 12px;
	line-height: 18px;
	padding: 0 20px
}

body#news.third #contents .inner img+p{
	margin-top: 40px
}

body#news.third #contents .inner p+p{
	margin-top: 20px
}

body#news.third dl{
	width: 90%;
	padding-top: 20px;
}

body#news.third dl dt,
body#news.third dl dd{
	line-height: 16px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	text-align: center;
}

body#news.third dl dt{
	width: 100%;
	line-height: 18px;
	font-size: 12px;
    position: relative;
    padding: 0;
    margin-bottom: 10px;
}

body#news.third dl dd{
	padding-left: 0px;
	font-size: 12px;
	width: 100%;
}

body#news.third #contents .inner dd img{
	width: 80%;
}

/* ===================================================================
 PRIVACY
=================================================================== */

#privacy #contents .inner{
	width: 90%;
}

#privacy #contents{
	font-size: 12px;
	line-height: 22px;
}

#privacy #contents h2{
	font-size: 18px;
}

#privacy #contents h3{
	font-size: 16px;
}		

#privacy #contents h2+p,
#privacy #contents h3+p,
#privacy #contents p+p{
	margin-top: 10px
}

#privacy #contents p+h2{
	margin-top: 60px
}

#privacy #contents p+h3,
#privacy #contents ul+h3{
	margin-top: 30px
}

#privacy #contents p+h4,
#privacy #contents p+ul{
	margin-top: 20px
}

#privacy #contents h4+p{
	margin-top: 10px
}

#privacy #contents h2+h3{
	margin-top: 30px
}

/* ===================================================================
 RECRUIT
=================================================================== */

#recruit #contents h1{
	margin-bottom: 60px;
}

#recruit #menu-list{
	width: 100%;
	box-sizing: border-box;
}

#recruit #menu-list li{
	width: 50%
}

#recruit #menu-list li a{
	width: auto;
}

#recruit.index .inner .box{
	width: 100%;
	float: none;
	margin-bottom: 0
}

#recruit.index .inner .box+.box{
	margin-left: 0;
	margin-top: 60px;
}

#recruit.index .inner h2{
	font-size: 18px;
	margin-top: 16px;
	margin-bottom: 14px;
}

#recruit.index .inner p{
	font-size: 12px;
	line-height: 20px;
	padding-left: 16px;
	padding-right: 16px;
	margin-bottom: 20px
}

#recruit #contents .inner,
#recruit.third #contents .inner{
	width: 100%
}

#recruit #contents td p+p{
	margin-top: 10px
}