/*
Theme Name: Tsujikawa_wp_theme
Author: Naoki Matsukiyo, Miki Atsushi
Description: このテーマは、洋食屋Tsujikawaのホームページ用です。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html,
body,
input,
textarea,
select,
button {
  font-family: "ten-mincho", serif;
  font-weight: 400;
  font-style: normal;
    background-color: #ffffff;
}

html,
body{
  background-color: #f1efe5;
  background-image: url("./images/background/arches.png");
}

h1 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0.8em 0;
}
h2{
  font-size: 24px;
  font-weight: 500;
}
h3{
  font-size: 22px;
  font-weight: 400;
}
h4{
  font-size: 20px;
  font-weight: 400;
}
h5{
  font-size: 19px;
  font-weight: 400;
}
h6{
  font-size: 18px;
  font-weight: 400;
}
p{
  font-size: 17px;
  line-height: 1.2em;
}
a{
  color: #357E91;
}
a:hover{
  color: #155E71;
}

.screen-reader-text{
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

 /*************
 ****Layout****
 *************/
body{
  display: flex;
  margin: 0;
  width: 100%;
  overflow-y: scroll;
}
.wrapper{
  position: relative;
  z-index: 5;
  overflow: hidden;
  width: 100%;
  margin-left: 210px;
}
article{
  overflow: hidden;
}
.post-section{
  padding: 10px;
}

/*************
****Header****
*************/
#masthead{
  position: fixed;
  z-index: 10;
  width: 210px;
  top: 0;
  bottom: 0;
  background: #222;
  box-shadow: 3px 0px 3px -1px rgba(0,0,0,0.1);
}
.site-branding{
  padding: 6px;
}
.site-logo{
  width: 198px;
}
header a{
  display: inline-block;
}
.global-nav a{
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.global-nav .main-menu-item a{
  display: block;
}
.header-link{
  display: flex;
  line-height: 0;
}
.header-link a{
  font-size: 0;
}
.global-nav,
.global-nav ul,
.global-nav ul li,
.global-nav ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.global-nav {
  font-size: 20px;
  width: 210px;
}
.global-nav ul {
  position: relative;
  z-index: 597;
  background: #222;
}
.global-nav ul a,
.global-nav ul a:link,
.global-nav ul a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.global-nav ul li {
  float: left;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
  float: none;
}
.global-nav > ul > li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
  background: #155E71;
}
.global-nav > ul > li > a,
.global-nav > ul > li > div > a {
  padding: 10px 20px;
}
.global-nav > ul > li:hover > a {
  color: #fff;
}
.global-nav ul ul {
  margin-top: 1px;
  visibility: hidden;
  position: absolute;
  top: 1px;
  left: 99%;
  z-index: 598;
  width: 100%;
  width: 230px;
  background: #fff;
  border-left: 20px solid transparent;
  border: 2px solid #155E71;
  padding: 10px 20px;
}
.global-nav ul > li:hover > ul {
  visibility: visible;
}
.global-nav ul ul a {
  font-size: 18px;
  padding: 8px 0;
}
.global-nav ul ul a:link,
.global-nav ul ul a:visited {
  color: #000;
  font-weight: 400;
  border-bottom: 1px solid #222
}
.global-nav ul ul a:hover{
  font-weight: 600;
  color: #fff;
  background-color: #155E71;
}
.global-nav ul ul li {
  padding: 0;
  color: #000;
  font-weight: normal;
  float: none;
}
.global-nav ul ul ul {
  top: 1px;
  left: 99%;
}
.global-nav ul ul li:last-child > a {
  border-bottom: none;
}
.global-nav ul ul li:first-child:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}

.tel-link{
	display: none;
}

/*mobile-nav*/

@media screen and (max-width: 800px){
  .wrapper{
  margin: 52px 0 0 0;
  }
	#masthead .touch-sensor{
		position:absolute;
		top: 0;
		right: 0;
		width:52px;
		height:52px;
		z-index: 10000;
	}
	.biscuits-wrap,
	.biscuits{
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}

	.biscuits-wrap{
		position: relative;
		width: 35px;
		height: 30.8px;
		margin: 10.5px 8px;
	}

	.biscuits{
		position: absolute;
		right: 0;
		width: 100%;
		height: 4px;
		background-color: #fff;
		border-radius: 4px;
	}

	.biscuits.top{
		top: 0;
	}

	.biscuits.cheese{
		top: 13.4px;
	}

	.biscuits.bottom{
		bottom: 0;
	}


	/*ハンバーガーボタンを「✖」に変える*/
	.touch-sensor.open .top{
		right: 0px;
		-webkit-transform: translateY(13.4px) rotate(-45deg);
		transform: translateY(13.4px) rotate(-45deg);
	}

	.touch-sensor.open .cheese{
		left: 50%;
		opacity: 0;
		-webkit-animation: active-menu-club .8s forwards;
		animation: active-menu-club .8s forwards;
	}

		@-webkit-keyframes active-menu-club {
		100% {
			height: 0;
		}
		}

		@keyframes active-menu-club {
		100% {
			height: 0;
		}
		}

	.touch-sensor.open .bottom{
		-webkit-transform: translateY(-13.4px) rotate(45deg);
		transform: translateY(-13.4px) rotate(45deg);
	}
	/*ハンバーガーメニューここまで*/

	.no-scroll{
		overflow: hidden;
		position: fixed;
	}

	#masthead{
    position: fixed;
    display: flex;
    justify-content: space-between;
		z-index: 999;
    width: 100%;
		height: 52px;
		box-shadow: 0px 3px 3px -1px rgba(255,255,255,0.1);
	}
	.site-branding{
		text-align: center;
		line-height: 0;
	}

	.site-branding a{
		font-size: 0;
	}
	.tel-link{
		display: block;
	}
	.tel-link a{
		font-size: 0;
	}
	.tel-link img{
		margin-right: 52px;
		padding: 8px;
		width: 52px;
		height: 52px;
	}
	#navigation{
		width: 100%;
	}
	.global-nav{
		display: none;
		position: absolute;
		z-index: 20;
		width: 100%;
		height: calc(100vh - 52px);
		top: 52px;
		left: 0;
		background-color: #222;
		transition: all 0.3s;
		opacity: 0;
	}
	.global-nav.active{
		display: block;
		width: 100%;
		overflow: scroll;
		padding-bottom: 120px;
		opacity: 1;
	}
	.global-nav .main-menu{
		display: none;
		transition: all 0.3s;
		opacity: 0;
	}
	.global-nav.active .main-menu{
		display: block;
		opacity: 1;
	}
	.global-nav .main-menu-item{
		background-color: #222;
		border-bottom: solid 2px #155E71;
	}

	.global-nav .main-menu-item .main-menu-link{
		color: #fff;
		text-align: left;
		font-size: 20px;
		padding:15px 15px 15px 15px;
	}
	.global-nav .sub-menu{
		display: none;
		margin: 0;
		border: none;
		padding: 5px 10px 5px 20px;
		position: static;
		visibility: visible;
		width: 100%;
	}
	.global-nav .sub-menu.open{
		display: block;
	}
	.global-nav .sub-menu-item{
		text-align: left;
		padding: 0 0 5px 0;
		line-height: normal;
	}
	.global-nav .sub-menu-item:first-child::after{
		display: none;
	}

	.global-nav .sub-menu-item > .menu-link{
		display: inline;
		font-size: 19px;
		border-bottom: 3px solid #155E71;
		padding: 0;
	}

	.main-menu-item-inner{
		display: flex;
		justify-content: space-between;
	}

	.down_switch{
		margin : 8px;
		width : 34px;
		height : 34px;
		background: url('./images/header/down_switch.svg');
		background-size: 20px 20px;
		background-repeat:no-repeat;
		background-position: center center;
	}
	.down_switch.rotate{
		transform: rotate(180deg);
	}
}

/*************
****Footer****
*************/
#footer{
  color: #fff;
  background-color: #222;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
  padding: 10px;
}
#footer p{
  margin: 0 0 1em 0;
}
.footer-link img{
  width: 1em;
  height: 1em;
}
.sns-link{
  display: flex;
  align-items: flex-start;
  padding-bottom: 10px;
}
.sns-icon{
  display: block;
  font-size: 0;
	margin-right: 5px;
	padding: 12px;
  background-color: #444;
}
.sns-icon img{
  width: 36px;
	height: 36px;
}
.sns-icon:hover{
	background: #999;
	opacity: 0.9;
	transition-duration: 0.3s;
}


/*************
**Components**
*************/
/*Form*/
form{
  margin: 10px 0;
  padding: 5px;
}

input[type="text"]:focus,
input[type="search"],
textarea {
  outline: none;
  padding: 5px;
  border: 1px solid #aaa;
  border-radius: 3px;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-size: 15px;
}

input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
  box-shadow: 0 0 7px #155e71;
  border: 1px solid #155e71;
}

/*Button*/
button,
input[type="submit"]{
    display: inline-block;
    padding: 5px 8px;
    border-radius: 3px;
    text-decoration: none;
    color: #FFF;
    background-image: -webkit-linear-gradient(#155e71 0%, #158e91 100%);
    background-image: linear-gradient(#155e71 0%, #158e91 100%);
    transition: .4s;
    font-size: 15px;
}

button:hover,
input[type="submit"]:hover{
    background-image: -webkit-linear-gradient(#155e71 0%, #158e91 70%);
    background-image: linear-gradient(#155e71 0%, #158e91 70%);
}

/*Card*/

/**menu-card**/
.menu-card{
	position:relative;
}
.menu-box{
	display: block;
	position: relative;
	margin: 7px auto;
	box-sizing: border-box;
}
.ribbon_area {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 89px;
	height: 91px;
	overflow: hidden;
	z-index: 1;
}
.ribbon {
	display: inline-block;
	position: absolute;
	padding: 7px 0;
	right: -28px;
	top: 18px;
	width: 160px;
	text-align: center;
	font-size: 17px;
	line-height: 16px;
	background: #ffa520;
	color: #fff;
	letter-spacing: 0.05em;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.ribbon:before,.ribbon:after{
	position: absolute;
	content: "";
	border-top: 4px solid #b2751b;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	bottom: -4px;
}
.ribbon.popular{
	background: rgba(21,94,113,0.9);
}
.ribbon.popular:before,
.ribbon.popular:after{
	border-top: 4px solid rgba(21,94,113,0.9);
}
.ribbon.reco{
	background: rgba(91,123,15,0.9);
}
.ribbon.reco:before,
.ribbon.reco:after{
	border-top: 4px solid rgba(59,91,0,0.9);
}
.ribbon.limited{
	background: rgba(123,15,15,0.9);
}
.ribbon.limited:before,
.ribbon.limited:after{
	border-top: 4px solid rgba(91,0,0,0.9);
}
.ribbon.choinomi{
	background: rgba(98,33,145,0.9);
}
.ribbon.choinomi:before,
.ribbon.choinomi:after{
	border-top: 4px solid rgba(98,33,145,0.9);
}
.ribbon:before{
	right: 19px;
}
.ribbon:after{
	left: 13px;
}
.menu_meta_wrap{
  max-width: 95%;
	position: absolute;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	bottom: -7px;
	right: -7px;
}
.menu_meta{
	display: block;
	font-size: 15px;
	padding: 0 9px;
	margin: 0;
	color: white;
	text-align: right;
	background: rgba(21,94,113,0.9);
}
.menu_meta.e_name{
	font-size: 12px;
	line-height: 1.4;
}
@media screen and (max-width: 800px){
  .menu_meta{
    font-size: 19px;
  }
  .menu_meta.e_name{
  	font-size: 11px;
  }
}

.image_trimming{
  overflow: hidden;
  position: relative;
  padding-top: 75%;
}
.menu-card img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.sticky{
  padding: 8px;
  background-color: #222;
  margin: 0 5px 8px 5px;
  border-left: 5px solid #155E71;
  box-shadow: 2px 2px 4px gray;
}

.sticky.sub{
  padding: 5px;
  background-color: #333;
  margin: 0 5px 5px 20px;
  border-left: 4px solid #155E71;
  box-shadow: 2px 2px 4px gray;
}
.sticky h3,
.sticky h4{
  margin: 0;
}
.sticky a{
  color: white;
  text-decoration: none;
}

.page-title{
  margin: 20px 10px;
}
.information-board{
  padding: 0 15px;
}
.information-list{
  margin: 10px 5px 20px;
  list-style: none;
  border-bottom: 2px solid #222;
}
.information-list h3{
  margin: 0;
}

.content-header{
  background-color: #222;
  padding: 5px 8px;
  border-bottom: 3px solid #155E71;
}
.content-header h1,
.content-header p{
  color: #fff;
}
.content-header h1{
  margin: 0.2em 0;
}
.content-header p{
  text-align: right;
  margin: 0.1em 0;
}

button,
.wp-block-button,
.wp-block-file a.wp-block-file__button,
input[type="submit"]{
  font-weight: 700;
	margin-right: 6px;
	display: inline-block;
	/*padding: 0.5em 1em;*/
  padding: 8px 16px;
	text-decoration: none;
  font-size: 18px;
  background: #222;
  border: 4px solid #155E71;
	color: #fff;/*文字色*/
	border-radius: 3px;
	font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  line-height: 1.5;
}
input[type="submit"]{
    padding: 6px 16px;
    border-top:  solid 2px rgb(221,221,221);
    border-right:  solid 2px rgb(221,221,221);
    border-bottom:  solid 2px rgb(221,221,221);
}
.wp-block-file a.wp-block-file__button{
  margin: 8px 0 0 0;
}
.wp-block-file a.wp-block-file__button:hover{
  color: #fff;
}
button,
.wp-block-button{
  padding: 0;
}
.wp-block-button:hover{
  opacity: .85;
  box-shadow: none;
}
.wp-block-button__link{
  background-color: #222;
  border-radius: 0;
  padding: 8px 16px;
}
.wp-block-button__link:hover{
  text-decoration: none;
}