/*
Theme Name: Kale-child
Template: kale
Theme URI: https://www.lyrathemes.com/kale/
Author: LyraThemes
Author URI: https://www.lyrathemes.com/
Description: Kale is a charming and elegant, aesthetically minimal and uncluttered food blog theme that can also be used for a variety of purposes. Whether you want to share recipes or fashion tips, run a lifestyle, parenting or cooking blog, Kale is a perfect theme choice. Simple but feature-filled food blog or cooking blog WordPress theme with WooCommerce integration. Beautifully designed and extremely clean, Kale is super easy to set up and is optimized for search engines. Kale comes with a special front page; with featured posts and a large highlight post, the option to show a banner or a posts slider in the header, and RTL support. It also comes with built-in menus for displaying your social media presence, multiple blog feed layouts, text and image logo options, sidebar size options (compact and default), banner/slider color overlay options, multilevel menus, automatically responsive YouTube videos, and much more! Kale is versatile enough to be set up as a small business website as well, by using the a static page as the home page and using the special front page elements to showcase services or portfolio. Kale is backed by world class, one-on-one support, and a super active team of developers and designers ready to help!
Version: 2.5
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: kale
Domain Path: /languages/
Tags: one-column, two-columns, three-columns, right-sidebar, grid-layout, flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-images,footer-widgets, full-width-template, theme-options, threaded-comments, translation-ready, food-and-drink, rtl-language-support
*/
/* Embedded*/


body {
font-size:16px
}

.main-wrapper {
overflow: hidden;
}

.tabs {
font-size:13px
}

.navbar-nav > li > a {
font-size:15px
}

/*トップへ戻るボタン*/
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#pageTop i {
  padding-top: 6px
}

#pageTop a {
 display: block;
z-index: 999;
padding: 6px 0 0 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #9FD6D2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/4);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#lunch:checked ~ #lunch_content,
#dinner:checked ~ #dinner_content,
#drink:checked ~ #drink_content,
#party:checked ~ #party_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
	
/*タブのスタイル*/
.tab_item {
  width: 100%;
}
}


/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:15px;
 width:350px;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
 border:2px solid #ffaa56;
}

.navbar-default .navbar-nav > .current_page_item > a, .navbar-default .navbar-nav > .current_page_item > a:focus, .navbar-default .navbar-nav{
	background-color:#fff;color:#000
}
.navbar-default .navbar-nav > .menu-item-object-custom > a:hover{
	background-color:#f3f3f3;color:#000;
}
.navbar-default .navbar-nav > .menu-item-object-page > a:hover{
	background-color:#f3f3f3;color:#000;
}	

/*デザインボタン*/
.btn {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
  padding-top: 40px;
  display :block;
}
/* ここから下がボタンのCSS　*/
.btn-animation-02 {
  display: inline-block;
  width: 240px;
  text-align: center;
  background-color: #fff;
  border: 2px solid #9ec34b;
 font-size: 16px;
	color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 4px;
  position: relative;
}

.btn-animation-02 span {
  position: relative;
  z-index: 1;
}

.btn-animation-02::before,
.btn-animation-02::after {
  content: "";
  display: block;
  background-color: #9ec34b;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .2s;
}
.btn-animation-02::before {
  left: 0;
}
.btn-animation-02::after {
  right: 0;
}

.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
  width: 0;
  background-color: #fff;
}

.btn-animation-02:hover {
  color: #9ec34b;
  font-style :none;
}

/*flexbox*/
.FLEX1 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 35px 0 35px -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

ul.FLEX1 li {
	list-style:none;
}

.FLEX1 figcaption {
  margin-top: 5px;
  text-align: center;
}
.FLEX1 figure > img {
	border:solid 1px #000;	
    width: 100%;
}

.FLEX1 > li {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

.FLEX2 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 35px 0 -20px -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

ul.FLEX2 li {
	list-style:none;
}

.FLEX2 figcaption {
  margin-top: 5px;
  text-align: center;
}
.FLEX2 figure > img {
	border:solid 1px #000;	
    width: 100%;
}

.FLEX2 > li {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

/*記事ページアイキャッチの削除*/
.entry-thumb {display:none;}


@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
.FLEX2 > li {
    width: calc(100%);
    margin: 0 0 20px 0;
}
}

.FLEX2 > li.new {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

.FLEX2 > li:nth-child(2n + 1) figure {
    display: table;
    margin: 0 0 0 auto;
}

.FLEX2 > li:nth-child(2n) figure {
    display: table;
    margin: 0 auto 0 0;
}
.FLEX2._left {
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.FLEX2._right {
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.FLEX2._left > li, .img-col1-01._col2._right > li {
    width: auto;
}


/*flexbox*/
.FLEX3 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 35px 0 -20px -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

ul.FLEX3 li {
	list-style:none;
}

.FLEX3 figcaption {
  margin-top: 5px;
  text-align: center;
}
.FLEX3 figure > img {
	border:solid 1px #000;	
    width: 100%;
}

.FLEX3 > li {
    width: calc(33.3% - 20px);
    margin: 0 0 20px 20px;
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
.FLEX3 > li {
    width: calc(100%);
    margin: 0 0 20px 0;
}
}

.FLEX3 > li.new {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

.FLEX3 > li:nth-child(2n + 1) figure {
    display: table;
    margin: 0 0 0 auto;
}

.FLEX3 > li:nth-child(2n) figure {
    display: table;
    margin: 0 auto 0 0;
}
.FLEX3._left {
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.FLEX3._right {
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.FLEX3._left > li, .img-col1-01._col2._right > li {
    width: auto;
}

/*NEWS*/
ul.news_list {
  margin: 10px auto;
	width:500px;
}

ul.news_list li {
	list-style-type:none;
	line-height:2em;
}

ul.news_list span {
	margin-right:5px;
}

ul.news_list span.news_date {
	background:#000;
	color:#fff;
	padding:2px 3px;
}

ul.news_list span.add_New {
	font-weight:bold;
	color:#5ab4bd;
}

h1.entry-title{font-size:10px}

/*h1調整*/
h1.entry-title {
font-size: 48px;
}

/*accessカスタマイズ*/
#access h2 {
	font-size:25px;
	font-weight:bold;
}

#test03 {
	font-size:18px;
}

#test03 dt {
  position:absolute;
  font-weight:normal;
  width:8em;
  text-align:center;
  padding: .5em .75em;
  background: repeating-linear-gradient(45deg, #3E6133, #3E6133 5px, #457337 5px, #457337 10px);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

#test03 dd {
  display: block;
 margin: 0 0 5% 27%;
  padding: 0 1%;
  font-size: .9em;
}

#test03 dt:first-child,
#test03 dd:first-of-type { border-top: 0 none transparent; }

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}

.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #99cc33;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

@media (max-width: 1300px) {

.col-xs-6{
	width:100%;
	}
}		

@media (max-width: 767px) {
#test03 dt {
	position:relative;
	width:100%;
}
#test03 dd {
	width:100%;
	margin:0;
	text-align:center;	
}
}