/*
Rewrite:  Kau-Design
*/
@import url(https://fonts.googleapis.com/earlyaccess/kokoro.css);
@import url(//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&display=swap);

/* Font Face */
.wf-kokoro {
  font-family: "Kokoro";
}

.wf-hannari {
  font-family: "Hannari";
}

.wf-sawarabimincho {
  font-family: "Sawarabi Mincho";
}

.noto {
  font-family: 'Noto Sans JP', sans-serif;
}

/* Reset */

body {
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height:1.6;
}

h1, h2, h3, h4, h5 {font-family: 'Noto Sans JP', sans-serif;}
.f100 {font-weight: 100;}
.f300 {font-weight: 300;}
.f400 {font-weight: 400;}
.f500 {font-weight: 500;}
.f700 {font-weight: 700;}

.f14 {font-size:14px;}
.f16 {font-size:16px;}
.f18 {font-size:18px;}
.f20 {font-size:20px;}
.f24 {font-size:24px;}

.tcenter {text-align:center;}

.site-content {
  padding-top: 2em;
  padding-bottom: 1.5em;
}

.btn {padding: .5em 1em; margin:.8em 0;}

.btn.btn-default {
  background-color: #fff;
  color: #555;
  margin: .5em 0 1.5em;
}

.site-header-wrap {
  text-align: left;
  padding: 1em 1em .5em 1em;
}

.site-branding {
  max-width: 170px;
}

.single-page .entry-title {
  font-weight:400;
  }

.nav-links {display:none;}
.tcenter {text-align: center;}
.tright {text-align:right;}
input[type='text'], input[type='email'], input[type='url'], input[type='password'], input[type='search'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='month'], input[type='time'], input[type='week'], input[type='number'], input[type='tel'], textarea 
{font-size:.8rem}

input[type='number'] {width:30%;}

input[type='button'],
input[type='reset'],
input[type='submit'] {border:1px solid #eee; background:#fff; border-radius:8px;}

input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover {border:1px solid #ddd; background:#eee; border-radius:8px;}
.input_tel {max-width:5em;}
::placeholder {color:#ccc;}

.category-5 .counter-blog-default.is-sidebar .content-area { float:none; margin:0 auto;}
.category-5 .entry-meta {display:none;}

.archive .post-thumbnail {pointer-events:none }

@media screen and (min-width: 768px) {
  .site-header-wrap {
    text-align: center;
  }

  .site-branding {
    max-width: 280px;
    margin: 3% 0;
  }
}

@media screen and (min-width: 1024px) {
  .single .content-area {
    float: none;
    max-width: 612px;
    margin: 0 auto;
  }
}



/* images */
.img_left, .img_right {width:100%; text-align:center;}

@media screen and (min-width: 768px) {
  .img_left {width:260px; float:left; margin:0 20px 20px 0;}
  .img_right {width:260px; float:right; margin:0 0 20px 20px;}
}
/* navimenu */
.fa-2x {font-size:1.8em;}

.menu-toggle:before {width: 28px;
  height: 28px;
  font-family: "Font Awesome 5 Free";
  font-size:28px;
  line-height:1;
  font-weight: 900;
  color:#000;}

.main-navigation a {
  font-size: 1em;
}
.main-navigation.toggled li.menu-item br {display:none;}

/* navimenu shop icon */
li#menu-item-291 a:before {
  margin:0 .6em 0 .25em;
  height: 1rem;
  font-family: "Font Awesome 5 Free";
  font-size: inherit;
  content: '\f3cd';
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
  
  /* navimenu shop icon */
li#menu-item-248 a:before {
  margin-right:.3em;
  height: 1rem;
  font-family: "Font Awesome 5 Free";
  font-size: inherit;
  content: '\f54e';
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

/* navimenu cart icon */
li#menu-item-92 a:before {
  margin-right:.3em;
  height: 1rem;
  font-family: "Font Awesome 5 Free";
  font-size: inherit;
  content: '\f07a';
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
/* navimenu menulist icon */
  li#menu-item-658 a:before {
  margin-right:.3em;
  height: 1rem;
  font-family: "Font Awesome 5 Free";
  font-size: inherit;
  content: '\f0ca';
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

.sns {position:absolute; margin:10px 20px; top:10px; right:20px; z-index:9999;}
.sns_ft {margin:10px 20px; }
.sns .fa-2x, .sns_ft .fa-2x { margin: 0 .5em 0 0;}
.sns a, .sns_ft a {color:#000;}

@media screen and (max-width: 480px) {
  .sns .fb, .sns .tw, .sns .ins {display:none;}
  .sns .fa-2x {margin:0 1.5em 0 0;}
}

@media screen and (min-width: 481px) {
  .sns_ft {display:none;}
}

/* Bagels */


/* panels */
#panel-0 h2.panel-title {
  font-size: 32px;
  font-family: fot-klee-pro, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.panel .panel-data {
  max-width: 800px;
}

#panel-0 .panel .panel-data {
  max-width: 740px;
}

#panel-1 .panel .panel-data {
  max-width: 800px;
}


#panel-1 {
  background: #efeded;
}

#panel-2 h3,
#panel-3 h3,
#panel-4 h3 {
  font-size: 18px;
  font-family: fot-klee-pro, sans-serif;
  font-weight: 500;
  font-style: normal;
}

#panel-2 h3 .entxt,
#panel-3 h3 .entxt,
#panel-4 h3 .entxt {font-size:.7em; line-height:1.2; padding-top:.3em;}

#panel-2 p.jptxt,
#panel-3 p.jptxt,
#panel-4 p.jptxt {font-size:1em; line-height:1.6; text-align: justify;}

#panel-2 p.entxt,
#panel-3 p.entxt,
#panel-4 p.entxt {font-size:.9em; line-height:1.5; text-align: justify;}

#panel-2 p,
#panel-3 p {
  text-align: left;
  font-size: .93em;
}

#panel-1 h2.panel-title,
#panel-2 h2.panel-title,
#panel-3 h2.panel-title,
#panel-4 h2.panel-title {
  font-size: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  letter-spacing: .1em;
}

#panel-1 h2.panel-title:before,
#panel-2 h2.panel-title:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  background-size: contain;
  vertical-align: middle;
  margin-right: .5em;
}

#panel-1 h2.panel-title:before {
  width: 34px;
  /*画像の幅*/
  height: 26px;
  /*画像の高さ*/
  background-image: url(img/tt_news.png);
}

#panel-2 h2.panel-title:before {
  width: 30px;
  /*画像の幅*/
  height: 29px;
  /*画像の高さ*/
  background-image: url(img/tt_bagels.png);
  background-repeat: no-repeat;
}


#panel-3 h2.panel-title:after {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  background-size: contain;
  vertical-align: middle;
  margin-left: .5em;
  width: 67px;
  /*画像の幅*/
  height: 63px;
  /*画像の高さ*/
  background-image: url(img/tt_cafe.png);
  background-repeat: no-repeat;
}

#colophon h5 {
  font-size: 1.3em;
}


/* panel-1 NEWS */

dl.list {
  padding: 0;
  margin: 10px 0 25px;
  text-align: left;
  font-size: 1.1em;
}

.list dt {
  width: 6em;
  float: left;
  color: #666;
  font-weight: 400;
  padding: 7px 0;
}

.list dd {
  margin-left: 6em;
  padding: 7px 0 7px 7px;
  margin: 0 0 .5em 0;
}

/* MENU */
.page-header h1 {
  padding: 0 0 1em;
  font-size: 32px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-style: normal;
}

.category-menu .page-header h1:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 35px;
  /*画像の幅*/
  height: 35px;
  /*画像の高さ*/
  background-image: url(img/tt_bagels.png);
  background-size: contain;
  vertical-align: middle;
  margin-right: .2em;
}


.menu {
  margin: 0;
  padding: 0;
}

.menu_inner {
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding: 1em 0;

}

.menu_inner p {
  font-size: 1em;
  line-height: 1.6;
}

.menu ul,
.menu li {
  margin: 0;
  padding: 0;
}

.menu li {
  list-style: none;
  width: 47%;
  float: left;
  margin: 0 3% 0 0;
}
.menu li.rl-gallery-item {width: 100%;}

.menu ul.sy-pager {width:40%; margin:0 auto; display: block;}
.menu .sy-pager li,
.menu .sy-pager li.sy-active {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 .5em;
  border-radius: 50%;
  }

/* 2の倍数でmargin ---*/
.menu li:nth-child(2n) {
  margin: 0 0 0 3%;
}
.menu .sy-pager lili:nth-child(2n) {
  margin: 0;
}
.menu li.col2 {
  list-style: none;
  width: 100%;
}

.menu li.col3 {
  list-style: none;
  width: 50%;
}

.menu .menu_inner h2 {
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  padding: .5em 0 .3em;
  
}


.menu li h3 {
  margin-top: .5em;
  color: #555;
  font-weight: 700;
  letter-spacing: .05em;
  font-size: .9em;
  text-align:center;
}

.menu li p {
  font-size: .9em;
  line-height: 1.4;
}

dl.menu {
  font-size: 0.9em;
  overflow: hidden;
}

.menu dt {
  width: 85%;
  float: left;
  text-align: left;
  color: #666;
  font-weight: 700;
  padding: 2px 0;
}

.menu dt::after {
  margin-left: 5px;
  margin-top: 10px;
  border-top: 1px dotted #ccc;
  content: "";
  flex-grow: 1;
}

.menu dd {
  padding: 2px 0;
  text-align: right;
  margin: 0 0 0 15%;
}

.menu dt::before {
  content: "◆";
  font-size: 0.8em;
  margin-right: .5em;
}

p.privacy { padding:.5em; border:1px solid #ddd; background:#efefef; font-size:.9em; margin-top: 1.5em;}



@media screen and (min-width: 768px) {
	.main-navigation a {
	padding: .5em 1.25em;}
	.dropdown-toggle { top: .5em; }

	.panel.split-right.has-post-thumbnail .panel-data {
		padding: 0 2% 0 3%;
		}

	.panel.split-right.has-post-thumbnail .panel-thumbnail {
		width: 40%;
		margin-left: 60%;
		}

	.panel.split-right.has-post-thumbnail .panel-data {
		width: 55%;
		max-width: 55%;}
	.panel.split-right.has-post-thumbnail .panel-thumbnail {
		width: 45%;
		max-width: 45%;
		margin-left: 55%;
		min-height: 400px;
		}

	.panel.split-left.has-post-thumbnail .panel-data {
		padding: 0 3% 0 2.5%;
		}



  #panel-0 h2.panel-title {
    font-size: 36px;
  }

  #panel-2 h3,
  #panel-3 h3,
  #panel-4 h3 {
    font-size: 20px;
    xletter-spacing: -0.04em;
  }

  #panel-2 p,
  #panel-3 p {
    font-size: 1em;
  }

  #panel-1 h2.panel-title,
  #panel-2 h2.panel-title,
  #panel-3 h2.panel-title,
  #panel-4 h2.panel-title {
    font-size: 36px;
  }

  #panel-1 h2.panel-title,
  #panel-2 h2.panel-title,
  #panel-3 h2.panel-title,
  #panel-4 h2.panel-title {
    font-size: 20px;
  }

  #panel-1 h2.panel-title:before {
    width: 40px;
    /*画像の幅*/
    height: 29px;
    /*画像の高さ*/
  }

  #panel-2 h2.panel-title:before {
    width: 39px;
    /*画像の幅*/
    height: 39px;
    /*画像の高さ*/
  }

  #panel-3 h2.panel-title:after {
    width: 30px;
    /*画像の幅*/
    height: 39px;
    /*画像の高さ*/
  }
  #panel-2 p.jptxt,
  #panel-3 p.jptxt,
  #panel-4 p.jptxt {font-size:.8em; line-height:1.4;}

  #panel-2 p.entxt,
  #panel-3 p.entxt,
  #panel-4 p.entxt {font-size:.8em; line-height:1.2;}

  .btn {font-size:1em; padding:.1em 1em .3em;}

  .btn.btn-default {
    margin: 1em 0 2em;
    }

  .menu li,
  .menu li:nth-child(2n)  {
    list-style: none;
    float: left;
    width: 22.75%;
    margin: 0 3% 0 0;
  }
.menu li.rl-gallery-item {width: 100%;}

  .menu li:nth-child(4n) {
    margin: 0 0 0 0;
  }

  .menu li img {
    padding: 15px 16px 0;
  }

  .menu li .p_col2 img {
    padding: 0;
  }

  .menu li p {
    font-size: 1em;
    line-height: 1.4;
  }

  .menu_inner p {
    font-size: 1.1em;
    line-height: 1.7;
  }

  .menu .menu_inner h2 {
    font-size: 24px;
    padding: 1em 0 .5em;
  }


  .menu li:nth-child(4n+1) {
    clear: both;
  }

  .menu li.col2 {
    width: 47%;
    margin: 0 6% 0 0;
  }

  .menu li.col2:nth-child(2n) {
    margin: 0;
  }

  .menu li h3 {
    padding-top: 1em;
    letter-spacing: .08em;
  }

  .menu li.col3 {
    width: 31.3%;
    margin: 0 3% 0 0;
  }

  .menu li.col3:nth-child(3n) {
    margin: 0;
  }

  dl.contact {
    font-size: 0.9em;
    overflow: hidden;
  }
  
  .contact dt {
    width: 30%;
    float: left;
    color: #666;
    font-weight: 700;
    padding: 3px .5em 3px 0;
  }
  
  .contact dd {
    padding: 3px 0;
    margin: 0 0 3px 30%;
  }
  
  .contact dt::before {
    content: "◆";
    font-size: 0.8em;
    margin-right: .3em;
  }

}

@media screen and (min-width: 1024px) {
  
  .panel.split-right.has-post-thumbnail .panel-data,
  .panel.split-left.has-post-thumbnail .panel-data {
    padding: 0 6.25% 0;
    }

  #panel-0 h2.panel-title {
    font-size: 36px;
  }

  #panel-2 h3,
  #panel-3 h3,
  #panel-4 h3 {
    font-size: 24px;
  }

  #panel-2 p,
  #panel-3 p {
    font-size: 1em;
  }

  #panel-1 h2.panel-title,
  #panel-2 h2.panel-title,
  #panel-3 h2.panel-title,
  #panel-4 h2.panel-title {
    font-size: 36px;
  }

  #panel-1 h2.panel-title,
  #panel-2 h2.panel-title,
  #panel-3 h2.panel-title,
  #panel-4 h2.panel-title {
    font-size: 30px;
  }

  #panel-1 h2.panel-title:before {
    width: 47px;
    /*画像の幅*/
    height: 35px;
    /*画像の高さ*/
  }

  #panel-2 h2.panel-title:before {
    width: 44px;
    /*画像の幅*/
    height: 44px;
    /*画像の高さ*/
  }

  #panel-3 h2.panel-title:after {
    width: 38px;
    /*画像の幅*/
    height: 50px;
    /*画像の高さ*/
  }
  
  #panel-2 p.jptxt,
  #panel-3 p.jptxt,
  #panel-4 p.jptxt {font-size:1em; line-height:1.4;}

  #panel-2 p.entxt,
  #panel-3 p.entxt,
  #panel-4 p.entxt {font-size:1em; line-height:1.4;}

  .menu li,
  .menu li:nth-child(2n)  {
    list-style: none;
    float: left;
    width: 22.75%;
    margin: 0 3% 0 0;
  }
.menu li.rl-gallery-item {width: 100%;}

  .menu li:nth-child(4n) {
    margin: 0 0 0 0;
  }

  .menu li img {
    padding: 15px 16px 0;
  }

  .menu li .p_col2 img {
    padding: 0;
  }

  .menu li p {
    font-size: 1em;
    line-height: 1.4;
  }

  .menu_inner p {
    font-size: 1.1em;
    line-height: 1.7;
  }

  .menu .menu_inner h2 {
    font-size: 24px;
    padding: 1em 0 .5em;
  }


  .menu li:nth-child(4n+1) {
    clear: both;
  }

  .menu li.col2 {
    width: 47%;
    margin: 0 6% 0 0;
  }

  .menu li.col2:nth-child(2n) {
    margin: 0;
  }

  .menu li h3 {
    padding-top: 1em;
    letter-spacing: .08em;
  }

  .menu li.col3 {
    width: 31.3%;
    margin: 0 3% 0 0;
  }

  .menu li.col3:nth-child(3n) {
    margin: 0;
  }

  dl.contact {
    font-size: 0.9em;
    overflow: hidden;
  }
  
  .contact dt {
    width: 30%;
    float: left;
    color: #666;
    font-weight: 700;
    padding: 3px .5em 3px 0;
  }
  
  .contact dd {
    padding: 3px 0;
    margin: 0 0 3px 30%;
  }
  
  .contact dt::before {
    content: "◆";
    font-size: 0.8em;
    margin-right: .3em;
  }

}