/**
 * Theme Name: Maruyochaya
 * Theme URI: none
 * Description: LOKAL Japan
 * Version: 0.0.0
 * Author: LOKAL JAPAN
 * Author URI: http://lokal.co.jp/
 *
 */

@charset "utf-8";

/**
 * ========================================
 * // common
 * ========================================
 */

body {
  font-family: "Noto Sans JP", "Yu Gothic", "メイリオ", Meiryo,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight    : 400;
  line-height    : 1.5;
  text-decoration: none;
  word-break     : break-all;
}

#wrap {
  width     : 100%;
  position  : relative;
  height    : auto !important;
  /*IE6対策*/
  height    : 100%;
  /*IE6対策*/
  min-height: 100%;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

/* -- >>> styles for wide layout ----- */
@media screen and (max-width: 960px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

ul {
  list-style: none;
}

/**
 * ========================================
 * // table
 * ========================================
 */
table {
  border-collapse: collapse;
  width          : 100%;
  margin-bottom  : 30px;
}

table tr {
  border-bottom: dashed 1px #d3c4b0;
  text-align   : left;
}

table tr:first-child {
  border-top: dashed 1px #d3c4b0;
}

table th,
td {
  padding: 16px 16px;
}

table th {
  color: #866239;
  width: 30%;
}

table td {
  color: #000;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  table {
    border: none;
    width : 100%;
  }

  table thead {
    display: none;
  }

  table tr {
    display: block;
    padding: 10px 0;
  }

  table th,
  table td {
    width    : 100%;
    font-size: 1rem;
    padding  : 5px 0;
  }

  table td {
    display: block;
  }
}

/* -- >>> styles for narrow layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  table th,
  td {
    font-size: 0.9rem;
  }

  table th {
    color: #866239;
    width: 40%;
  }
}


/**
 * ========================================
 * // Link
 * ========================================
 */

a {
  text-decoration: none;
  color          : #000;
  display        : block;
}

a:hover {
  opacity: 0.5;
}

a:visited {}

a:active {}

.mod-btn {
  border               : 1px solid #E6D5BE;
  position             : relative;
  border-radius        : 4px;
  background           : #E6D5BE;
  transition           : all 0.5s ease 0s;
  -moz-border-radius   : 50px;
  -webkit-border-radius: 50px;
  border-radius        : 50px;
  margin               : 30px;
}

.mod-btn a {
  display   : block;
  padding   : 16px;
  font-size : 16px;
  color     : #42210B;
  text-align: center;
}

.mod-btn a:after {
  color          : #E6D5BE;
  background     : url("images/common/right_arrow.png") no-repeat 0 50%;
  content        : "";
  width          : 7px;
  height         : 8px;
  display        : inline-block;
  position       : absolute;
  top            : 50%;
  right          : 12px;
  margin-top     : -4px;
  background-size: contain;
}

.mod-btn:hover {
  background: #fff;
  border    : 1px solid #42210B;
  opacity   : 1.0;
}

.mod-btn:hover a {
  color  : #42210B;
  opacity: 1.0;
}

.mod-btn:hover a:after {
  background     : url("img/common/right_arrow_red.png") no-repeat 0 50%;
  content        : "";
  width          : 7px;
  height         : 8px;
  background-size: contain;
}

@media screen and (max-width: 599px) {
  .mod-btn a {
    display  : block;
    padding  : 13px 20px 13px 15px;
    font-size: 12px;
    font-size: 0.9rem;

  }
}


/**
 * ========================================
 * // header
 * ========================================
 */

header {
  /*min-width: 1000px;*/
  width   : 100%;
  margin  : 0 auto;
  position: relative;
  z-index : 10;
}

/**
 * ========================================
 * // topページ　トップイメージ
 * ========================================
 */

.top-img {
  position: relative;
  height  : 400px;
}

.header-top {
  position: absolute;
  top     : 0;
  left    : 0;
  right   : 0;
  bottom  : 0;
  margin  : auto;
  z-index : 50;
}

#container {
  height: 400px;
}

@media screen and (max-width: 599px) {}

.top-img {
  height: 400;
}

.top-img .title_txt {
  background     : url("") no-repeat center center;
  background-size: contain;
  height         : 220px;
  width          : 100px;
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  margin         : auto;
}

.top-img .logo {
  margin-top : 20px;
  margin-left: 20px;
}

.sns_btn {
  margin-right: 20px;
}

.sns_btn ul li {
  display: inline-block;
  padding: 20px 5px 0 5px;
}

#top-head {
  position: relative;
  width   : 100%;
  margin  : 0 auto;
  z-index : 100;
}

#global-nav .inner {
  width: 1165px;
}

.nav_list_kasui {
  max-width: 960px;
  margin   : 0 auto;
}

@media screen and (min-width: 600px) {
  .ul_kasui {
    display        : flex;
    justify-content: space-evenly;
    align-items    : center;
  }
}

@media screen and (min-width: 961px) {
  .ul_kasui {
    height: 15vh;
  }
}

#global-nav .nav_list ul li {
  display    : inline-block;
  margin-left: 5.5%;
  text-align : center;
  padding-top: 12px;
}

#global-nav .nav_list ul li:nth-child(1) {
  margin-left: 0;
}

@media screen and (max-width: 599px) {

  #global-nav .nav_list ul li:nth-child(2) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(3) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(4) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(5) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(6) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(7) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(8) {
    margin-left: 0;
  }

  #global-nav .nav_list ul li:nth-child(9) {
    margin-left: 0;
  }
}

#global-nav .nav_list ul li a {
  height        : 95px;
  display       : table-cell;
  vertical-align: bottom;
  position      : relative;
}

#global-nav .nav_list ul li a:before {
  position       : absolute;
  left           : 50%;
  margin-left    : -35px;
  top            : -3px;
  content        : '';
  display        : inline-block;
  width          : 60px;
  height         : 60px;
  background-size: contain;
  vertical-align : middle;
}

#global-nav .nav_list .nav01 a:before {
  background     : url("images/common/icon_about.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav02 a:before {
  background     : url("images/common/icon_tea.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav03 a:before {
  background     : url("images/common/icon_food.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav04 a:before {
  background     : url("images/common/icon_product.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav05 a:before {
  background     : url("images/common/icon_local.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav06 a:before {
  background     : url("images/common/icon_channel.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav07 a:before {
  background     : url("images/common/icon_shop.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav08 a:before {
  background     : url("images/common/icon_shopping.png") no-repeat center center;
  background-size: auto 60px;
}

/* KASUI */
#global-nav .nav_list .nav_kasui01 a:before {
  background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/common/icon_about.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav_kasui02 a:before {
  background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/common/icon_shop.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav_kasui03 a:before {
  background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/common/icon_food.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list .nav_kasui04 a:before {
  background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/common/icon_access.png") no-repeat center center;
  background-size: auto 60px;
}

#global-nav .nav_list ul li a:hover {
  opacity: 1;
}

#global-nav .nav_list ul li a:hover:before {
  margin-top: -5px;
}

#global-nav .nav_list .nav_txt01 {
  font-family   : 'Reem Kufi', sans-serif;
  font-size     : 0.7rem;
  letter-spacing: 1px;
  color         : #00953a;
  line-height   : 1.6;
}

#global-nav .nav_list .nav_txt02 {
  font-size: 0.9rem;
  color    : #000;
}

/* Fixed */
.fixed {
  position  : fixed;
  top       : 0;
  width     : 100%;
  z-index   : 1001;
  background: rgba(255, 255, 255, 0.8);
}

#top-head #global-nav.fixed {
  width             : 960px;
  margin-top        : 0;
  top               : 0;
  position          : fixed;
  height            : 100px;
  background        : rgba(255, 255, 255, 0.8);
  transition        : top 0.65s ease-in;
  -webkit-transition: top 0.65s ease-in;
  -moz-transition   : top 0.65s ease-in;
  left              : 50%;
  transform         : translateX(-50%);
}

#top-head.fixed #global-nav .nav_list ul li a {
  height        : 80px;
  display       : table-cell;
  vertical-align: bottom;
  position      : relative;
}

#top-head.fixed #global-nav ul li {
  text-align: center;
}

#top-head.fixed #global-nav ul li {
  background-image: none;
}

#top-head.fixed #global-nav ul li a {
  color     : #333;
  transition: 0.3s;
}

#top-head.fixed #global-nav ul li a:hover {
  color: #f8f8ff;
}

#top-head.fixed #global-nav .nav_list ul li a:before {
  position       : absolute;
  left           : 50%;
  margin-left    : -35px;
  top            : -3px;
  content        : '';
  display        : inline-block;
  height         : 44px;
  background-size: contain;
  vertical-align : middle;
}

@media screen and (max-width: 599px) {

  #global-nav .nav_list ul {
    padding: 20px 12%;
  }

  #global-nav .nav_list ul li {
    width      : 100%;
    margin-left: 2.9%;
    text-align : left;
    padding    : 0 10px 0 50px;
  }

  #global-nav .nav_list ul li a {
    height        : 60px;
    display       : table-cell;
    vertical-align: middle;
    padding-left  : 50px;
    text-align    : left;
  }

  #global-nav .nav_list ul li a div {
    display: none;
  }

  #global-nav .nav_list ul li a:before {
    position: absolute;
    left    : 0;
  }

  #global-nav .nav_list .pc img {
    display: none;
  }

  #top-head.fixed #global-nav .nav_list ul li a {
    height        : 60px;
    display       : table-cell;
    vertical-align: middle;
    padding-left  : 50px;
    text-align    : left;
  }

  #top-head.fixed #global-nav .nav_list ul li a:before {
    position: absolute;
    left    : 0;
    height  : 70px;
  }

  .top-img {
    height: 500px;
  }

  #container {
    height: 500px;
  }
}

@media screen and (min-width: 961px) and (max-width: 1142px) {

  #global-nav .inner,
  #global-nav .nav_list {
    width: 100%;
  }

  #global-nav .nav_list ul {
    text-align: center;
  }

  #global-nav .nav_list ul li {
    margin-left: 30px;
  }
}

@media screen and (min-width: 600px) and (max-width: 959px) {

  /* エライン */
  #global-nav .nav_list {
    margin: 0;
  }

  #global-nav .nav_list ul li {
    display    : inline-block;
    margin-left: 5%;
  }

  #global-nav .nav_list .nav_txt01 {
    font-size: 0.5rem;
  }

  #global-nav .nav_list .nav_txt02 {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 960px) {

  #top-head {
    background: #FFF;
    width     : 100%;
    position  : fixed;
    top       : 0;
    left      : 0;
    z-index   : 1000;
  }

  header {
    position: relative;
  }

  header h1 {
    display    : block;
    margin-left: 10px;
  }

  .top-img {
    height    : 320px;
    margin-top: 65px;
  }

  .sns_btn ul li {
    padding: 5px 5px;
  }

  .sns_btn {
    position: absolute;
    right   : 60px;
    top     : 7px;
  }

  .sns_btn img {
    width : 42px;
    height: 42px;
  }

}



/**
 * ========================================
 * // content
 * ========================================
 */

#content {
  width         : 100%;
  margin        : 0 auto;
  padding-bottom: 50px;
}

h2 {
  padding-top   : 20px;
  margin-bottom : 20px;
  font-family   : 'Reem Kufi', sans-serif;
  font-size     : 1rem;
  letter-spacing: 2px;
  color         : #00953a;
}

#akahori {
  display        : flex;
  justify-content: center;
  margin-right   : 0;

}

#tea h2,
#cafemenu h2,
#product h2,
#local h2 {
  margin-bottom: -50px;
}

h3 {}

h4 {
  text-align: center;
}

h4 ul li {
  padding: 10px;
}

article {
  margin: 10px 0;
}

section p {
  margin-bottom: 20px;
  line-height  : 1.6;
}

#about,
#tea,
#cafemenu,
#product,
#local,
#shop,
#sns,
  {
  margin-top : -100px;
  padding-top: 100px;
}

#tea section,
#cafemenu section,
#product section,
#local section {
  padding: 80px 0;
}

section .under {
  font-size    : 1rem;
  line-height  : 2.4;
  border-bottom: dashed 1px #d3c4b0;
  padding      : 0 10px 6px;
}

.mg50 {
  margin-top: -50px;
}

.mg100 {
  margin-top: -100px;
}

.mg200 {
  margin-top: -200px;
}

#banner ul {
  margin-bottom: 20px;
  text-align   : center;
}

#banner ul li {
  display: inline-block;
  width  : 28%;
  margin : 10px;
}

#banner img {
  border: solid 1px #e6e6e6;
}

.bg_news {
  height         : 500px;
  background     : url("images/top/bg_news.jpg") no-repeat center center;
  background-size: cover;
}

#news {
  clear: both;
}

#news article {
  margin-top: 10px;
}

.tag {
  margin-left    : 20px;
  padding        : 1px 20px;
  background     : url("images/top/tag.png") no-repeat center center;
  background-size: cover;
  color          : #000;
  font-size      : 0.8rem;
}

#about h2 {
  margin-top: 30px;
}

#about h3 {
  padding: 0 55px 50px 55px;
  background: url("images/top/leaf_left.png") no-repeat 15% 20px,
    url("images/top/leaf_right.png") no-repeat 85% 20px;
}

#about p {
  font-size  : 1rem;
  line-height: 2.5rem;
  padding    : 0 55px;
}

#about .madori {
  padding-top: 20px;
  text-align : center;
}

#about section {
  margin-bottom: 20px;
}

#tea section {
  background     : url("images/top/bg_tea.jpg") no-repeat 30px top;
  background-size: contain;
}

#cafemenu section {
  background     : url("images/top/bg_food.jpg") no-repeat left top;
  background-size: contain;
}

#product section {
  background     : url("images/top/bg_product.jpg") no-repeat 30px top;
  background-size: contain;
}

#local section {
  background     : url("images/top/bg_local.jpg") no-repeat left top;
  background-size: contain;
}

.bg_sns {
  background-color: rgba(229, 212, 190, 0.5);
  padding-bottom  : 30px;
}

#sns ul li {
  display: inline-block;
  width  : 28%;
  margin : 5px;
}

#sns iframe {
  width : 600px;
  height: 320px;
}

@media screen and (max-width: 599px) {

  #banner ul li {
    width : 47.5%;
    margin: 3px;
  }

  .bg_news {
    height: 640px;
  }

  #about h3 {
    background: none;
    padding   : 10px 10px 40px 10px;
  }

  h3 .sp img {
    width: 100%;
  }

  #about p {
    font-size  : 1rem;
    line-height: 1.6rem;
    padding    : 0 20px;
    text-align : left;
  }

  section p {
    font-size : 1rem;
    text-align: left;
  }

  #tea .sp img,
  #cafemenu .sp img,
  #product .sp img,
  #local .sp img {
    width: 30%;
  }

  #sns iframe {
    width : 100%;
    height: 320px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  #banner ul li {
    width : 30%;
    margin: 5px;
  }

  .bg_news {
    height: 500px;
  }

  #about p {
    font-size  : 1rem;
    line-height: 1.8rem;
    padding    : 0 20px;
    text-align : center;
  }

  #about .madori img {
    width: 80%;
  }

  section .under {
    font-size  : 1rem;
    line-height: 2rem;
    padding    : 0;
  }

  section p {
    font-size : 1rem;
    text-align: left;
  }

  section img {
    text-align: center;
  }

  h3 .sp img {
    width : 78%;
    margin: 0 auto;
  }

  h4 ul li,
  h4 ul li .sp {
    display: inline-block;
  }

  h4 ul li:first-child {
    width: 35%;
  }

  h4 ul li:last-child {
    width      : 55%;
    margin-left: 5%;
  }

  #tea .sp img,
  #cafemenu .sp img,
  #product .sp img,
  #local .sp img {
    width: 30%;
  }

}

/* -- >>> styles for wide layout ----- */
@media screen and (max-width: 960px) {
  #tea section {
    background: url("images/top/bg_tea.jpg") no-repeat 0 top;
  }

  #cafemenu section {
    background: url("images/top/bg_food.jpg") no-repeat center top;
  }

  #product section {
    background: url("images/top/bg_product.jpg") no-repeat 0 top;
  }

  #local section {
    background: url("images/top/bg_local.jpg") no-repeat center top;
  }
}

/**
 * ========================================
 * // inner
 * ========================================
 */

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .inner {
    width : 94%;
    margin: 0 auto;
  }

  #global-nav .inner,
  #global-nav .nav_list {
    width: 100%;
  }

  #global-nav .nav_list ul {
    text-align: center;
  }

  #global-nav .nav_list ul li {
    margin-left: 30px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .inner {
    width : 90%;
    margin: 0 auto;

  }

  #global-nav .inner,
  #global-nav .nav_list {
    width: 959px;
    width: 100%;
  }

  #global-nav .nav_list ul {
    text-align: center;
  }

  #global-nav .nav_list ul li {
    margin-left: 30px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .inner {
    width : 960px;
    margin: 0 auto;
  }

  .inner:after {
    content: "";
    clear  : both;
    display: block;
  }

  #global-nav .inner,
  #global-nav .nav_list {
    width: 100%;
  }

  #global-nav .nav_list ul {
    text-align: center;
  }

  #global-nav .nav_list ul li {
    margin-left: 30px;
  }
}


/**
 * ========================================
 * // side_bnanner
 * ========================================
 */
.side_bn {
  position: fixed;
  bottom  : 200px;
  right   : 10px;
  z-index : 999;
}

.side_bn a {
  text-decoration: none;
  text-align     : center;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .side_bn a {
    display: none;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .side_bn a {
    display: none;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {}


/**
 * ========================================
 * // pagetop
 * ========================================
 */
.pagetop {
  position: fixed;
  bottom  : 10px;
  right   : 10px;
  z-index : 999;
}

.pagetop a {
  text-decoration: none;
  text-align     : center;
  display        : block;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .pagetop {
    bottom: 10px;
  }

  .pagetop a img {
    display: block;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .pagetop {}

  .pagetop a img {
    display: block;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .pagetop {}

  .pagetop a img {
    display: block;
  }
}


/**
 * ========================================
 * // footer
 * ========================================
 */

footer {
  font-size : 0.8rem;
  background: #ecf4dc;
}

.footer_garden {
  height             : 310px;
  background-color   : white;
  background-image   : url("images/common/footer-gardenbg.png");
  background-position: center bottom;
  background-size    : cover;
}

.footer_garden_sp {
  height             : 300px;
  background-color   : white;
  background-image   : url("images/common/footer-gardenbg-sp.png");
  background-position: center bottom;
  background-size    : cover;
}

.footer_garden_kasui {
  height             : 310px;
  background-color   : white;
  background-image   : url("images/common/footer-gardenbg-kasui.svg");
  background-position: center bottom;
  background-size    : cover;
}

.footer_garden_sp_kasui {
  height             : 300px;
  background-color   : white;
  background-image   : url("images/common/footer-gardenbg-sp-kasui.svg");
  background-position: center bottom;
  background-size    : cover;
}

footer .inner {
  width  : 890px;
  margin : 0 auto;
  padding: 50px 0;
}

.footer_navi {
  display        : flex;
  flex-direction : row;
  flex-wrap      : wrap;
  align-content  : flex-start;
  justify-content: flex-start;
  align-items    : flex-start;
}

.footer_navi li {
  width        : 33%;
  margin-bottom: 10px;
}

footer .inner ul li {
  padding  : 5px 5px;
  font-size: 0.8rem;
}

.inner_flex {
  display        : flex;
  align-items    : flex-end;
  justify-content: flex-end;
}

.info_flex {
  display        : flex;
  flex-direction : column;
  flex-wrap      : nowrap;
  justify-content: space-between;
  height         : 166px;
}

.rightside {
  padding-top: 95px;
}

footer .sns_icon li {
  display: inline-block;
}

footer .inner ul li a:link {
  color: #000;
}

footer .inner ul li a:visited {
  color: #000;
}

footer .inner ul li a:hover {
  color: #00953a;
}

.faxemail img {
  vertical-align: bottom;
  margin-right  : 10px;
}

.faxemail span {
  margin-right: 10px;
}

.faxemail a {
  display: unset;
}

.copyright {
  padding-top: 80px;
  clear      : both;
  font-size  : 0.6rem;
}

@media screen and (max-width: 959px) {
  footer .inner {
    width: 100%;
  }

  .inner_flex {
    flex-direction: column;
  }

  .rightside {
    padding-top: 20px;
  }

  .col6 {
    width: 100%;
  }
}


/**
 * ========================================
 * // topページ　トップイメージ
 * ========================================
 */

.home .top-img {
  height: 600px;
}

.home #container {
  height   : 600px;
  max-width: 1500px;
  margin   : 0px auto;
  position : relative;
}

.home #container #theTarget a {
  display : block;
  width   : 100%;
  height  : 100%;
  position: absolute;
  z-index : 99;
}

.home #container .top-img01 {
  background     : url("images/top/top_hanshin_pc.jpg") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img02 {
  background     : url("images/top/slider_wide_takeoutmenu2020.jpg") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img03-2025ss {
  background     : url("images/bn/p_slider_wide_2025ssmenu.png") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img04 {
  background     : url("images/top/top_shop01_pc.jpg") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img05 {
  background     : url("images/top/top_shop02_pc.jpg") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img06 {
  background     : url("images/top/image06_pc.jpg") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img07-kasui {
  background     : url("images/top/slider_wide_kasuinomori.jpg") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img08-line {
  background     : url("images/top/slider_wide_line.jpg?new2") no-repeat center bottom;
  background-size: cover;
}

.home #container .top-img-kinencha {
  background     : url("images/top/slider_wide_kinencha.jpg") no-repeat center bottom;
  background-size: cover;
}

@media screen and (max-width: 599px) {
  .home .top-img {
    height: 500px;
  }

  .home #container {
    height: 500px;
  }

  .home #container .top-img01 {
    background     : url("images/top/top_hanshin_sp.jpg") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img02 {
    background     : url("images/top/slider_mobile_takeoutmenu2020.jpg") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img03-2025ss {
    background     : url("images/bn/p_slider_mobile_2025ssmenu.png") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img04 {
    background     : url("images/top/top_shop01_sp.jpg") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img05 {
    background     : url("images/top/top_shop02_sp.jpg") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img06 {
    background     : url("images/top/image06_sp.jpg") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img07-kasui {
    background     : url("images/top/slider_mobile_kasuinomori.jpg") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img08-line {
    background     : url("images/top/slider_mobile_line.jpg?new2") no-repeat center center;
    background-size: cover;
  }

  .home #container .top-img-kinencha {
    background     : url("images/top/slider_mobile_kinencha.jpg") no-repeat center center;
    background-size: cover;
  }

}

/* KASUI */
.top_kasui {
  height: 85vh;
}

.nav_fixed {
  position  : fixed;
  top       : 0;
  width     : 100%;
  background: #ffffff;
}

.top-img .logo-kasui {
  margin-left: 50px;
  width      : 185px;
  height     : 260px;
}

.bg-logo-kasui {
  width           : 185px;
  /* height       : 260px; */
  height          : 220px;
  background-color: #ffffff;
  opacity         : 0.85;
}


.logo-kasui #logo-kasui {
  position: absolute;
  top     : 8px;
  left    : 62.5px;
  z-index : 50;
}

.logo-kasui #openmark-kasui {
  position: absolute;
  top     : 190px;
  left    : 70.5px;
  z-index : 50;
}

#container_kasui {
  height: 85vh;
}

#container_kasui .top-kasui {
  background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/kasui/topimgkasui.jpg") no-repeat center bottom;
  background-size: cover;
}

.btn_honten {
  display: none;
}

@media screen and (min-width: 600px) and (max-width: 959px) {

  .top_kasui {
    height: 400px;
  }

  #container_kasui {
    height: 400px;
  }

  #container_kasui .top-kasui {
    background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/kasui/topimgkasui-tb.jpg") no-repeat center bottom;
    background-size: cover;
  }

  .btn_honten {
    display      : block;
    text-align   : center;
    padding      : 10px 0px;
    border-top   : dashed 1px #d3c4b0;
    border-bottom: dashed 1px #d3c4b0;
    font-size    : 0.9rem;
  }

  .btn_honten a:after {
    background : url("images/common/right_arrow.png") no-repeat 0 50%;
    content    : "";
    width      : 7px;
    height     : 8px;
    display    : inline-block;
    margin-left: 12px;
  }
}

@media screen and (max-width: 599px) {

  .top_kasui {
    height: 300px;
  }

  #container_kasui {
    height: 300px;
  }

  #container_kasui .top-kasui {
    background     : url("https://maruyo-chaya.com/wp/wp-content/themes/maruyochaya/images/kasui/topimgkasui-sp.jpg") no-repeat center bottom;
    background-size: cover;
  }

  .btn_honten {
    display      : block;
    text-align   : center;
    padding      : 10px 0px;
    border-top   : dashed 1px #d3c4b0;
    border-bottom: dashed 1px #d3c4b0;
    font-size    : 0.9rem;
  }

  .btn_honten a:after {
    background : url("images/common/right_arrow.png") no-repeat 0 50%;
    content    : "";
    width      : 7px;
    height     : 8px;
    display    : inline-block;
    margin-left: 12px;
  }
}




/**
 * ========================================
 * //　下層ページ共通
 * ========================================
 */
.page .title_txt {
  height: 90px;
  width : 180px;
}

/*.page-food #container {
  display: none;
}*/
.page #index01,
.page #index02,
.page #index03,
.page #index04,
.page #index05 {
  margin-top : -100px;
  padding-top: 100px;
}

.page .mod-btn {
  display: inline-block;
  width  : 21%;
  margin : 1%;
}

.page #inner {
  width   : 90%;
  position: relative;
}

.page article {
  padding-top: 30px;
}

.page section {
  margin-bottom: 30px;
}

.page section p {
  font-size  : 0.9rem;
  line-height: 2.0;
}

.page .small {
  font-size: 0.9rem;
}

.page section ul {
  margin    : 0 auto;
  text-align: center;
}

.page section ul li {
  display       : inline-block;
  /*  padding   : 0 10px;*/
  text-align    : center;
  vertical-align: top;
}

.page section ul li img {
  margin-bottom: 5px;
}

.page .col3_list li {
  width : 19%;
  margin: 0 0 30px 7%;
}

.page .col3_list li:nth-child(1),
.page .col3_list li:nth-child(5),
.page .col3_list li:nth-child(9),
.page .col3_list li:nth-child(13),
.page .col3_list li:nth-child(17) {
  margin: 0 0 30px 0;
}

.page .col4_list li {
  width : 28%;
  margin: 0 0 30px 7%
}

.page .col4_list li:nth-child(1),
.page .col4_list li:nth-child(4),
.page .col4_list li:nth-child(7) {
  margin: 0 0 30px 0;
}

.page .col6_list li {
  width : 46%;
  margin: 0 0 30px 30px;
}

.page .col6_list li:nth-child(odd) {
  margin: 0 0 30px 0;
}

.page .midashi {
  margin: 50px auto;
  width : 260px;
  background: url("images/food/midashi_left.png") no-repeat left center,
    url("images/food/midashi_right.png") no-repeat right center;
  font-size     : 1.3rem;
  letter-spacing: 1px;
  color         : #42210B;
}

.page .midashi_en {
  font-family: 'Reem Kufi', sans-serif;
  font-size  : 0.8rem;
  color      : #A07C52;
}

.page .sub_topic {
  background: url("images/food/midashi_left.png") no-repeat left center,
    url("images/food/midashi_right.png") no-repeat right center;
  padding: 0 25px;
  margin : 0 25px 25px 0;
}

.page .menu_name {
  padding-bottom: 7px;
  border-bottom : dashed 1px #d3c4b0;
  font-size     : 1.2rem;
  margin        : 30px 0 8px 0;
  text-align    : left;
}

.page .menu_name.new {
  margin: 10px 0 8px 0;
}

.page .menu_name.new::before {
  content         : "NEW";
  display         : block;
  background-color: #ffed51;
  width           : fit-content;
  padding         : 3px 10px;
  border          : 1px dashed black;
  font-size       : 14px;
  margin-bottom   : 10px;
}

.page .menu_small {
  font-size     : 1.1rem;
  padding-bottom: 5px;
  border-bottom : dashed 1px #d3c4b0;
  margin-bottom : 6px;
}

.page .price {
  font-size     : 1.0rem;
  padding-left  : 30px;
  letter-spacing: 0.08rem;
}

.page ul li .price {
  font-size   : 0.8rem;
  padding-left: 7px;
}

@media screen and (max-width: 599px) {
  .page .top-img {
    height: 300px;
  }

  #index01,
  #index02,
  #index03,
  #index04 {
    margin-top : -100px;
    padding-top: 100px;
  }

  .page .mod-btn {
    width : 46%;
    margin: 2% 1.5%;
  }

  .page article {
    padding-top: 20px;
  }

  .page section {
    margin-bottom: 20px;
  }

  .page .midashi {
    margin: 20px auto 40px auto;
  }

  .page .col3_list li,
  .page .col4_list li,
  .page .col6_list li,
  .page .col4_list li:nth-child(1),
  .page .col4_list li:nth-child(4),
  .page .col4_list li:nth-child(7),
  .page .col6_list li:nth-child(odd) {
    margin: 0 0 20px 0;
  }

  .page .col3_list li {
    width : 45%;
    margin: 0 2% 20px 2%;
  }

  .page .col4_list li,
  .page .col6_list li {
    width: 100%;
  }

  .page .col3_list li:nth-child(1),
  .page .col3_list li:nth-child(5),
  .page .col3_list li:nth-child(9) {
    margin: 0 2% 20px 2%;
  }

}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .page .top-img {
    height: 400px;
  }

  .title_txt {
    height: 430px;
  }

  .page .mod-btn {
    width : 46%;
    margin: 2% 1.5%;
  }

  .page section {
    width        : 80%;
    margin       : 0 auto;
    margin-bottom: 30px;
  }

  .page section .imgL,
  .page section .imgR {
    width : 94%;
    margin: 0 auto;
  }

  .page .col3_list li {
    width: 28%;
  }

  .page .col4_list li,
  .page .col6_list li {
    width: 46%;
  }

  .page .col3_list li p,
  .page .col4_list li p,
  .page .col6_list li p {
    font-size: 0.8rem;
  }

  .page .col3_list li:nth-child(1),
  .page .col3_list li:nth-child(4),
  .page .col3_list li:nth-child(7),
  .page .col3_list li:nth-child(10) {
    margin: 0 0 30px 0;
  }

  .page .col3_list li:nth-child(5),
  .page .col3_list li:nth-child(9) {
    margin: 0 0 30px 7%;
  }
}


/**
 * ========================================
 * // tea page
 * ========================================
 */
.page-tea #container {
  display: none;
}

.page-news_list .top-img {
  background     : url("images/top/top_shop02_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-tea .top-img {
  background     : url("images/tea/top_tea_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-tea .title_txt {
  background     : url("images/tea/title_txt_tea.png") no-repeat center center;
  background-size: contain;
}

.page-tea .point_ttl {
  font-size      : 1.4rem;
  letter-spacing : 0.08rem;
  background     : url("images/tea/tea_border.png") repeat-x center bottom;
  background-size: 8px 8px;
  padding        : 0 10px 10px 10px;
}

.page-tea .process_map {
  background     : url("images/tea/process_pc.png") no-repeat center center;
  background-size: contain;
}

.page-tea #index01 ul li {
  min-height: 370px;
}

.page-tea #index02 ul li {
  min-height: 390px;
}

.page-tea .level dl {
  font-size : 0.9rem;
  text-align: left;
}

.page-tea .level dd {
  margin : -1.5em 0 4px 0;
  padding: 0 0 4px 90px;
}

.page-tea .level dd.lv1 {
  background: url("images/tea/lv_1.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea .level dd.lv2 {
  background: url("images/tea/lv_2.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea .level dd.lv3 {
  background: url("images/tea/lv_3.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea .level dd.lv4 {
  background: url("images/tea/lv_4.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea .level dd.lv5 {
  background: url("images/tea/lv_5.png") no-repeat left 90px center;
  height    : 20px;
}

.graybox {
  border       : solid 1px #C6C6C6;
  background   : #fff;
  padding      : 25px;
  margin-bottom: 20px;
}

.page-tea .order_price {
  background     : url("images/tea/order_04.png") no-repeat center center;
  background-size: 210px;
}

.page-tea #index04 img {
  margin-bottom: 20px;
}

@media screen and (max-width: 599px) {
  .page-tea .top-img {
    background     : url("images/tea/top_tea_sp.jpg") no-repeat center center;
    background-size: cover;
  }

  .page-tea .process_map {
    background     : url("images/tea/process_sp.png") no-repeat center center;
    background-size: contain;
  }

  .page-tea #index01 .col4_list .col5 {
    float: left;
    width: 40%;
  }

  .page-tea #index01 .col4_list .col7 {
    float: left;
    width: 58%;
  }

  .page-tea #index03 ul li .col4 {
    float     : left;
    width     : 31.333%;
    text-align: center;
  }

  .page-tea #index03 ul li .col4 p {
    text-align: center;
  }

  .page-tea #index01 ul li,
  .page-tea #index02 ul li {
    min-height: 100px;
  }

  .page-tea #index02 ul li {
    margin-bottom: 40px;
  }

  .page-tea #index04 img {
    margin-bottom: 10px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  .page-tea #index01 ul li,
  .page-tea #index02 ul li:last-child,
  .page-tea #index03 ul li {
    margin-left: 0;
    width      : 100%;
    min-height : 100px;
  }

  .page-tea #index03 ul li .col4 {
    float     : left;
    width     : 31.333%;
    text-align: center;
  }

  .page-tea #index03 ul li .col4 p {
    text-align: center;
  }
}

/**
 * ========================================
 * // tea-test page
 * ========================================
 */
.page-tea-test #container {
  display: none;
}

.page-news_list .top-img {
  background     : url("images/top/top_shop02_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-tea-test .top-img {
  background     : url("images/tea/top_tea_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-tea-test .title_txt {
  background     : url("images/tea/title_txt_tea.png") no-repeat center center;
  background-size: contain;
}

.page-tea-test .point_ttl {
  font-size      : 1.4rem;
  letter-spacing : 0.08rem;
  background     : url("images/tea/tea_border.png") repeat-x center bottom;
  background-size: 8px 8px;
  padding        : 0 10px 10px 10px;
}

.page-tea-test .process_map {
  background     : url("images/tea/process_pc.png") no-repeat center center;
  background-size: contain;
}

.page-tea-test #index01 ul li {
  min-height: 370px;
}

.page-tea-test #index02 ul li {
  min-height: 390px;
}

.page-tea-test .level dl {
  font-size : 0.9rem;
  text-align: left;
}

.page-tea-test .level dd {
  margin : -1.5em 0 4px 0;
  padding: 0 0 4px 90px;
}

.page-tea-test .level dd.lv1 {
  background: url("images/tea/lv_1.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea-test .level dd.lv2 {
  background: url("images/tea/lv_2.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea-test .level dd.lv3 {
  background: url("images/tea/lv_3.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea-test .level dd.lv4 {
  background: url("images/tea/lv_4.png") no-repeat left 90px center;
  height    : 20px;
}

.page-tea-test .level dd.lv5 {
  background: url("images/tea/lv_5.png") no-repeat left 90px center;
  height    : 20px;
}

.graybox {
  border       : solid 1px #C6C6C6;
  background   : #fff;
  padding      : 25px;
  margin-bottom: 20px;
}

.page-tea-test .order_price {
  background     : url("images/tea/order_04.png") no-repeat center center;
  background-size: 210px;
}

.page-tea-test #index04 img {
  margin-bottom: 20px;
}

@media screen and (max-width: 599px) {
  .page-tea-test .top-img {
    background     : url("images/tea/top_tea_sp.jpg") no-repeat center center;
    background-size: cover;
  }

  .page-tea-test .process_map {
    background     : url("images/tea/process_sp.png") no-repeat center center;
    background-size: contain;
  }

  .page-tea-test #index01 .col4_list .col5 {
    float: left;
    width: 40%;
  }

  .page-tea-test #index01 .col4_list .col7 {
    float: left;
    width: 58%;
  }

  .page-tea-test #index03 ul li .col4 {
    float     : left;
    width     : 31.333%;
    text-align: center;
  }

  .page-tea-test #index03 ul li .col4 p {
    text-align: center;
  }

  .page-tea-test #index01 ul li,
  .page-tea-test #index02 ul li {
    min-height: 100px;
  }

  .page-tea-test #index02 ul li {
    margin-bottom: 40px;
  }

  .page-tea-test #index04 img {
    margin-bottom: 10px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  .page-tea-test #index01 ul li,
  .page-tea-test #index02 ul li:last-child,
  .page-tea-test #index03 ul li {
    margin-left: 0;
    width      : 100%;
    min-height : 100px;
  }

  .page-tea-test #index03 ul li .col4 {
    float     : left;
    width     : 31.333%;
    text-align: center;
  }

  .page-tea-test #index03 ul li .col4 p {
    text-align: center;
  }
}

/**
 * ========================================
 * // food page
 * ========================================
 */
.page-food .top-img {
  background     : url("images/food/top_food_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-food .title_txt {
  background     : url("images/food/title_txt_food.png") no-repeat center center;
  background-size: contain;
}

.page-food .cafemenu_bg section {
  background     : url("images/top/bg_food.jpg") no-repeat center top;
  background-size: contain;
}

.page-food #cafemenu article section img {
  text-align: center;
}

@media screen and (max-width: 599px) {
  .page-food .top-img {
    background     : url("images/food/top_food_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {}


/**
 * ========================================
 * // delivery page
 * ========================================
 */
.page-delivery .top-img {
  background     : url("images/delivery/top_delivery_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-delivery .title_txt {
  background     : url("images/delivery/title_txt_delivery.png") no-repeat center center;
  background-size: contain;
  height         : 90px;
  width          : 250px;
}

@media screen and (max-width: 599px) {
  .page-delivery .top-img {
    background     : url("images/delivery/top_delivery_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}

/**
 * ========================================
 * // popup page
 * ========================================
 */
.page-popup .top-img,
.page-popup-form .top-img {
  background     : url("images/popup/top_blog_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-popup .title_txt,
.page-popup-form .title_txt {
  background     : url("images/popup/title_txt_popup.png") no-repeat center center;
  background-size: contain;
  height         : 150px;
  width          : 250px;
}


@media screen and (max-width: 599px) {

  .page-.page-popup .top-img,
  .page-popup-form .top-img {
    background     : url("images/popup/top_blog_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}

/**
 * ========================================
 * // tasting page
 * ========================================
 */
.page-tasting .top-img {
  background     : url("images/tasting/top_tasting_pc.jpg") no-repeat center center;
  background-size: cover;
}

.page-tasting .title_txt {
  background     : url("images/tasting/title_txt_tasting.png") no-repeat center center;
  background-size: contain;
  height         : 150px;
  width          : 250px;
}


@media screen and (max-width: 599px) {
  .page-.page-tasting .top-img {
    background     : url("images/tasting/top_tasting_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}



/**
 * ========================================
 * // ブログページ　トップ共通
 * ========================================
 */
.single .top-img,
.archive .top-img,
.category .top-img,
.page-list .top-img {
  background     : url("images/blog/top_blog_pc.jpg") no-repeat center center;
  background-size: cover;
}

.single .top-img #container,
.archive .top-img #container,
.category .top-img #container,
.page-list .top-img #container {
  display: none;
}

.single .title_txt,
.archive .title_txt,
.category .title_txt,
.page-list .title_txt {
  background     : url("images/blog/title_txt_blog.png") no-repeat center center;
  background-size: contain;
  height         : 90px;
  width          : 250px;
}

@media screen and (max-width: 599px) {

  .single .top-img,
  .archive .top-img,
  .category .top-img,
  .page-list .top-img {
    background     : url("images/blog/top_blog_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}


/**
 * ========================================
 * // sigle page
 * ========================================
 */

#single section,
#archive section {
  margin-bottom: 50px;
}

.blog_title {
  border-left  : solid 5px #e6d5be;
  border-bottom: dashed 1px #e6d5be;
  margin       : 50px 0 20px 0;
  font-size    : 1.1rem;
}

.blog_title p {
  margin-left  : 15px;
  margin-bottom: 5px;
}

.blog_time {
  padding-left : 25px;
  margin-bottom: 50px;
}

.blog_content {
  margin-bottom: 50px;
}

.blog_content img {
  text-align: center;
}

.blog_content p {
  font-size  : 1rem;
  font-weight: 300;
}

.past {
  padding: 30px 20px;
}

.past_title {
  background-color: #e6d5be;
  padding         : 6px 20px;
  margin-bottom   : 12px;
  font-size       : 0.8rem;
}

.past ul li {
  border-bottom: dashed 1px #e6d5be;
  padding      : 10px 0 10px 10px;
  font-size    : 0.8rem;
}

#archive .blog_block {
  padding: 30px 0;

}

#archive .blog_title {
  border-left: solid 5px #e6d5be;
}

#archive .blog_time {
  padding-left : 10px;
  margin-bottom: 20px;
}

#archive .blog_time p {
  font-size: 0.8rem;
}

#archive .blog_content p {
  font-size: 0.9rem;
}

@media screen and (max-width: 599px) {}


/* -- >>> styles for wide layout ----- */
@media screen (min-width: 600px) and (max-width: 959px) {

  #blog .past ul li {
    width      : 24.8%;
    float      : right;
    border-top : none;
    border-left: dashed 1px #e6d5be;
    padding    : 10px 20px;
  }

  #blog .past ul li:last-child {
    border-right : dashed 1px #e6d5be;
    border-bottom: none;
  }
}





.flow {
  padding   : 20px 0 0 0;
  text-align: center;
}

.flow li {
  display    : inline-block;
  width      : 28%;
  margin-left: 3%;
  padding    : 0 25px 25px 25px;
  position   : relative;
}

.flow li:nth-child(1) {
  margin-left: 0;
}

.flow li:before {
  content        : '';
  display        : inline-block;
  width          : 21px;
  height         : 72px;
  background     : url("images/common/flow_yajirushi_pc.png") no-repeat center center;
  background-size: contain;
  position       : absolute;
  top            : 130px;
  left           : -30px;
}

.flow li:nth-child(1):before {
  display: none;
}

.flow .flow_bottom {
  border    : solid 2px rgba(134, 98, 57, 0.3);
  padding   : 20px;
  min-height: 300px;
}

.flow .flow_bottom img {
  padding      : 20px 0;
  margin-bottom: 10px;
}

.flow .flow_bottom p {
  text-align: left;
}

.flow .flow_bottom .btm_left {
  height        : 80px;
  display       : table-cell;
  vertical-align: middle;
}

.flow .flow_bottom .btm_left p {
  color    : #866239;
  font-size: 1rem;
}

.flow .flow_bottom .btm_right {
  border-top : dashed 2px rgba(134, 98, 57, 0.3);
  padding-top: 15px;
}

@media screen and (max-width: 599px) {
  .flow li {
    display: block;
    width  : 100%;
    margin : 20px 0 30px 0;
    padding: 0 25px;
  }

  .flow .flow_bottom {
    background: #fff;
    padding   : 10px 5px 10px 5px;
    min-height: 0;
  }

  .flow .flow_bottom img {
    padding      : 0;
    margin-bottom: 0;
  }

  .flow .flow_bottom p {
    border-top: none;
    padding   : 0 0 0 10px;
    text-align: left;
  }

  .flow .flow_bottom .btm_left {
    float      : left;
    width      : 40%;
    padding-top: 15px;
  }

  .flow .flow_bottom .btm_right {
    border-top : none;
    border-left: dashed 2px rgba(134, 98, 57, 0.3);
    float      : right;
    width      : 55%;
  }

  .flow li:before {
    content        : '';
    display        : inline-block;
    width          : 50px;
    background     : url("images/common/flow_yajirushi_sp.png") no-repeat center center;
    background-size: contain;
    position       : absolute;
    top            : -50px;
    /*矢印画像の高さと配置を考慮して設定*/
    left           : 46.5%;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  .flow li {
    display: block;
    width  : 100%;
    margin : 20px 0 10px 0;
    padding: 0 25px;
  }

  .flow .flow_bottom {
    background: #fff;
    padding   : 20px;
    min-height: 0;
  }

  .flow .flow_bottom img {
    padding      : 0;
    margin-bottom: 0;
  }

  .flow .flow_bottom p {
    border-top: none;
    text-align: left;
  }

  .flow .flow_bottom .btm_left {
    float      : left;
    width      : 50%;
    padding-top: 15px;
  }

  .flow .flow_bottom .btm_right {
    border-top  : none;
    border-left : dashed 2px rgba(134, 98, 57, 0.3);
    float       : right;
    width       : 50%;
    padding-left: 20px;
  }

  .flow li:before {
    content        : '';
    display        : inline-block;
    width          : 50px;
    background     : url("images/common/flow_yajirushi_sp.png") no-repeat center center;
    background-size: contain;
    position       : absolute;
    top            : -50px;
    /*矢印画像の高さと配置を考慮して設定*/
    left           : 46.5%;
  }
}

/**
 * ========================================
 * // annoucement ページ
 * ========================================
 */
.page-template-page-announcement .top-img {
  background     : url("images/top/top_shop02_pc.jpg") no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 599px) {
  .page-.page-template-page-announcement .top-img {
    background     : url("images/top/top_shop02_sp.jpg") no-repeat center center;
    background-size: cover;
  }
}

/**
 * ========================================
 * // takeout ページ
 * ========================================
 */
.page-template-page-takeout .top-img {
  background     : url("images/food/top_takeout_pc.jpg") no-repeat center center;
  background-size: cover;
}

@media screen and (max-width: 599px) {
  .page-.page-template-page-takeout .top-img {
    background     : url("images/food/top_takeout_pc.jpg") no-repeat center center;
    background-size: cover;
  }
}

.page-takeout .title_txt {
  background     : url("images/food/title_txt_takeout.png") no-repeat center center;
  background-size: contain;
}

/**
 * ========================================
 * // store page
 * ========================================
 */
.page-store .top-img {
  background     : url("images/store/staff2022/top_store_pc.png") no-repeat center center;
  background-size: cover;
}

.page-store .title_txt {
  background     : url("images/store/title_txt_store.png") no-repeat center center;
  background-size: contain;
}

.page-store .cafemenu_bg section {
  background     : url("images/top/bg_store.jpg") no-repeat center top;
  background-size: contain;
}

.page-store #cafemenu article section img {
  text-align: center;
}

#div_main_desk {
  max-width: 1000px;
  margin   : 100px auto;
}

#div_staff_desk {
  margin     : 50px auto;
  border-top : dashed 1px #d3c4b0;
  padding-top: 50px;
}

.div_staff {
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 50px;
  border-bottom  : dashed 1px #d3c4b0;
  padding-bottom : 50px;
}

.div_staff:nth-child(even) {
  /*flex-direction: row-reverse;*/
}

.div_staff_img {
  text-align: center;
  width     : 40%;
}

.img_staff_img {
  max-width: 300px;
}

.img_staff_name {
  max-height      : 50px;
  margin-top      : -40px;
  background-color: #ffffffd6;
  padding         : 10px 30px;
  transform       : rotate(4deg);
}

.div_staff_info {
  padding    : 30px 0px;
  width      : calc(60% - 20px);
  font-weight: 400;
}

.div_staff_info h4 {
  text-align   : left;
  font-size    : 1.2rem;
  margin-bottom: 10px;
  color        : #502a27;
  font-weight  : 800;
}

.div_staff .kotoba {
  font-size        : 1.1rem;
  /* letter-spacing: 0.4rem; */
}

.div_staff p {
  letter-spacing: 0.1rem;
  line-height   : 2.2rem;
}

@media screen and (max-width: 699px) {
  .page-store .top-img {
    background     : url("images/store/staff2022/top_store_sp.png") no-repeat center center;
    background-size: cover;
  }

  #div_main_desk {
    width: 100%;
  }

  .div_staff {
    flex-direction: column;
  }

  .div_staff .kotoba {
    letter-spacing: 0rem;
  }

  .div_staff_img {
    width: 100%;
  }

  .div_staff_info {
    width  : calc(100% - 40px);
    padding: 50px 20px;
  }

  .div_staff p br {
    display: none;
  }

}


/**
 * ========================================
 * // 可睡の杜　kasui
 * ========================================
 */
#about-kasui h2,
#shop-kasui h2,
#access-kasui h2 {
  margin-bottom: -50px;
}

#menu-kasui h2 {
  margin-bottom: -20px;
}

#about-kasui {
  margin-top : -100px;
  padding-top: 100px;
}

.about-kasui-fixed {
  margin-top: 50px !important;
}

#shop-kasui,
#menu-kasui,
#access-kasui {

  padding-top: 100px;
}

#about-kasui section {
  padding-top: 80px;
}

#shop-kasui section,
#access-kasui section {
  padding: 80px 0;
}

#about-kasui section {
  background     : url("images/top/bg_tea.jpg") no-repeat 30px top;
  background-size: contain;
}

.gmap-kasui {
  max-width: 100%;
  width    : 100%;
  height   : 495px;
}

.menu_hide {
  display: none !important;
}

.btn_show {
  background: #502A27;
}

.btn_show a {
  color: #eeeeee;
}

.btn_normal {
  background: #E6D5BE;
}


.mod-btn-kasui {
  display      : inline-block;
  width        : 190px;
  margin-top   : 20px;
  border       : 1px solid #E6D5BE;
  position     : relative;
  background   : #E6D5BE;
  transition   : all 0.5s ease 0s;
  border-radius: 50px;
}

.mod-btn-kasui a {
  display   : block;
  padding   : 12px;
  font-size : 14px;
  color     : #42210B;
  text-align: center;
}

.mod-btn-kasui a:after {
  color          : #E6D5BE;
  background     : url(images/common/right_arrow.png) no-repeat 0 50%;
  content        : "";
  width          : 7px;
  height         : 8px;
  display        : inline-block;
  position       : absolute;
  top            : 50%;
  right          : 12px;
  margin-top     : -4px;
  background-size: contain;
}


.ul_sns_kasui {
  display        : flex;
  justify-content: space-evenly;
}

#sec_bn_kasui {
  padding-top   : 250px !important;
  padding-bottom: 0px !important;
}

.ul_bn_kasui {
  display        : flex;
  justify-content: space-evenly;
  flex-wrap      : wrap;
}

.ul_bn_kasui li {
  border: #dddddd 1px solid;
}



@media screen and (max-width: 599px) {

  #about-kasui .sp img {
    width: 30%;
  }

  #sec_bn_kasui {
    padding-top: 0px !important;
  }

  .ul_bn_kasui {
    justify-content: center;
  }

  .ul_bn_kasui li {
    max-width: 100%;
  }

  #li_bn02 {
    margin-left: 0px !important;
    margin-top : 15px !important;
  }

  #li_bn03 {
    margin-top: 15px !important;
  }

}

@media screen and (min-width: 600px) and (max-width: 959px) {


  #about-kasui .sp img {
    width: 30%;
  }

  #shop-kasui section,
  #access-kasui section {
    padding: 80px 0 0 0;
  }

  #shop-kasui,
  #menu-kasui,
  #access-kasui {
    padding-top: 35px;
  }

  #sec_bn_kasui {
    padding-top: 0px !important;
  }

  .ul_bn_kasui {
    justify-content: center;
  }

  .ul_bn_kasui li {
    max-width: 44%;
  }

  #li_bn02 {
    margin-left: 15px !important;
  }

  #li_bn03 {
    margin-top: 15px !important;
  }
}

@media screen and (max-width: 959px) {
  #about-kasui section {
    background: url("images/top/bg_tea.jpg") no-repeat 0 top;
  }

  #shop-kasui section,
  #access-kasui section {
    padding: 80px 0 0 0;
  }

  #shop-kasui,
  #menu-kasui,
  #access-kasui {
    padding-top: 15px;
  }

  .br_pc {
    display: none;
  }
}