@charset "UTF-8";
/*
Theme Name: yakitori yoemon
Author: panda-project
Description: this is my original theme.
Version: 1.0
*/

/* CSS Document */
/*YOEMON Panda-project 20200720 */

* {
    margin: 0;
    padding: 0;
}
html {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 100%;
}
body{
	box-sizing: border-box;
	line-height: 1.7;
}
p {
	font-size: 1rem;
}
a {
	color: #FFFFFF;
	text-decoration: none;
}
a :visited{
	color: #FFFFFF;
}
#shopnews a{
	color: #666666;
}
header{
	background-color: #000000;
	margin-bottom: 2rem;
}
header{
	display: flex;
	height: auto;
	justify-content:space-between;
}
header .yoemon-logo {
	width: 220px;
	height: auto;
	flex-grow: 2;
	margin: 0.5rem;
	color: #FFFFFF;
}

header .yoemon-logo small{
	display: block;
	font-size: 0.875rem;
	font-weight: normal;
	text-align: center;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


@media (min-width:768px){
	header .yoemon-logo{
		flex-grow: 0;
		margin: 1rem;
	}
}
header .header-log{
	flex-shrink: 2;
	font-size: 2rem;
	color: #FFFFFF;
	margin: 1rem;
}
@media (min-width:768px){
	header .header-log{
		flex-shrink: 0;
		width: 400px;
	}
}
header .header-log p{
	text-align: right;
}
header img,main img,footer img{
width:100%;
max-width: 100%;
height: auto;
}
section{
	margin-bottom: 2rem;
}
.newMark{
	color: #ff4500;
	font-weight: bold;
}
.title{
	font-size: 2rem;
	margin-bottom: 1rem;
	font-weight: 500;
}
.title.center{
	text-align: center
}
.title.center.single{
	margin-bottom: 0;
}
.sub-title{
	font-size: 1.125rem;
	margin-bottom: 1rem;
	font-weight: 500;
}
.sub-title.center{
	text-align: center;
}
.sub-title.center.single{
	margin-bottom: 1.5rem;
}
.sub-lead{
	font-size: 1.125rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

.hero{
	margin-bottom: 2rem;
}
.head-hero{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	height: 75vh;
	background-image:url("images/hero-img@2x.png");
	background-size:cover;
	background-repeat: no-repeat;
	background-position:top;
}
@media (min-width:1280px){
	.head-hero{
		background-size: contain;
		max-width: 1440px;
		max-height: 800px;
	}
}
.head-hero h1{
	position: absolute;
	top: 45%;
	left: 55%;
    transform: translate(-50%, -50%);
}
.head-hero h1 img{
	width: auto;
	max-width: 136px;
}
@media(min-width:520px){
	.head-hero h1 img{
		width: auto;
		max-width: 84px;
	}
}
@media(min-width:768px){
	.head-hero h1 img{
		max-width: 185px;
	}
}


.head-hero nav{
	position: absolute;
	bottom: 2%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}
.head-hero nav ul{
	color: #fff;
}
.head-hero nav li{
	display: inline-block;
	list-style-type: none;
	font-size: 1rem;
}
@media (min-width:768px){
	.head-hero nav li{
		font-size: 1.5rem;
	}
}
.head-hero nav li::after{
	content: "｜";
}
.head-hero nav li:last-child::after{
	content: none;
}
main {
	margin: auto;
	max-width: 1024px;
	padding: 0 8px;
}
.greeting{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.greeting-img{
	width: 260px;
	height: auto;	
}
.greeting-img img{
margin-bottom: 1rem;
}
.lead{
	text-align: center;
}


@media (min-width:1024px){
	.greeting{
		flex-direction: row;
		justify-content: space-around;
	}
}
main figure{
	margin-bottom: 1rem;
}

figcaption{
	font-size: 0.875rem;
}
@media (min-width:768px){
.yakitori-img{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	}
	main figure{
		width: 360px;
	}
	main #shopnews figure{
	width: auto;
}
}
@media (min-width:1024px){
	main figure{
		width: 470px;
	}
	main #shopnews figure{
	width: auto;
}
}

#yoemon-mune .menu{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 2rem;
	margin-right: 2rem;
}
#yoemon-mune .menu table,#shopnews table{
	border-collapse: collapse;
	margin-bottom: 1rem;
	width: 100%;
}
#yoemon-mune .menu th,#yoemon-mune .menu td,#shopnews th,#shopnews td{
	border-bottom: 1px solid #333;
	padding: 0.5rem;
}
#yoemon-mune .menu th,#shopnews th{
	text-align: left;
	font-weight: bold;
	background: aliceblue;
  border-bottom: none;
}
#yoemon-mune .menu td,#shopnews td{
	text-align: right;
}
#yoemon-mune .menu td:nth-child(odd),#shopnews td:nth-child(odd){
	text-align: left;
}
@media (min-width:768px){
	#yoemon-mune .menu{
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-left: 0;
	}
	#yoemon-mune .menu .table-box{
 display:block;
	width: 100%;
		margin: 1rem;
	}
	
	#yoemon-mune .menu table{
		width: 100%;
	}
}
#shopnews table{
	width: 100%;
}
@media (min-width:768px){
#shopnews table{
	width: 50%;
	margin: auto;
}
}
.catch-img{
	vertical-align: middle;
}
.catch-img img{
	max-width: 220px;
	margin-left: 1rem;
}
.news-box img{
	max-width: 220px;
	height: auto;
}


.insta  a{
	color: #000000;
}

#shopnews h3{
	margin-bottom: 1rem;
}
#shopnews hr{
	margin: 2rem 0;
}

#shopnews .btn{
	margin-top: 2rem;
}

#shopnews .btn a{
	color: #FFFFFF;
	background-color: #000;
	display: inline-block;
	padding: 6px;
	border-radius: 2px;
	border-bottom: 1px solid #333333;
}
#shopnews .btn a:hover{
	background-color: #333333;
}

#shopnmap p a{
	color: #000000;
}

footer{
	background-color: #000000;
	height: 100%;
	padding: 2rem;
	display: flex;
	align-items: center;
	flex-direction: column;
}
@media (min-width:520px){
	footer{
		flex-direction: row;
	}
}

.footer-img{
	display: flex;
	height: auto;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	align-items: baseline;
}

.footer-img img{
	display: inline-block;
}
.footer-img img:first-child{
	margin-right: 1.125rem;
	width: auto;
	height: 190px;
}
.footer-img img:nth-child(2){
	height: 290px;
	width: auto;
}

.footer-logo{
	margin-left: auto;
	margin-right: 1rem;
}
.footer-logo img{
	width: 260px;
}
.footer-logo p{
	font-size: 1rem;
	color: #FFFFFF;
	text-align: right;
}
@media (min-width:768px){
	.footer-logo{
		margin-right: 2rem;
	}
}