@charset "UTF-8";

/*-----------------------------------------
  reset
-----------------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

body {
  background-color: #F8F4EF;
  /* color: #414e44; */
  /* color: #1a110e; */
  color: #33211c;
  font-size: 18px;
	font-family :
	YuGothic,    /* Mac用 */
	'Yu Gothic', /* Windows用 */
	"Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
  line-height: 1.5;
  font-weight: bold;
}

/*-----------------------------------------
  toTpo - setting
-----------------------------------------*/

#toTop {
  /* display: none; */
  display: block;/* マウスの反応領域を広げるため */
      width: 50px;
      position: fixed;
      bottom: 50px;
      right:20px;
      text-align: center;
      line-height: 50px;/* 高さと同じ行間にすれば縦中央にそろう */
      z-index: 2;

}
@media (min-width:768px) {
  #toTop{
      width: 80px;
      right:100px;
      line-height: 100px;/* 高さと同じ行間にすれば縦中央にそろう */
    }
}

/*-----------------------------------------
  layout(common)
-----------------------------------------*/

html {
  scroll-behavior: smooth;
}

.container {
  width: 960px;
  max-width: 90%;
  margin: 0 auto 60px;
}

h2 {
  text-align: center;
  margin-bottom: 40px;
}

h2::first-line {
  font-size: 16px;
  color: #ff8204;
  font-family: 'Noto Sans JP', sans-serif;
}

h3 {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  padding-top: .3em;
  padding-bottom: .3em;
  padding-left: .5em;
  margin-bottom: .5em;
  background-color: #ebf4f6;
  border-left: 5px solid #108345;
  border-bottom: 2px solid #cccccc;
  color: #108345;
}

/*==もっと見るボタンの設定*/

.btn01 a {
  background: #dd8706;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 220px;
  padding: 10px 25px;
  color: #33211c;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  box-shadow: 5px 5px 0 rgba(221, 135, 6, 0.6);
  font-size: 16px;
  line-height: 1.7;
  font-weight: bold;
}
.btn01 a:hover {
  background: linear-gradient(90deg, rgba(239, 153, 25, 0.5), rgb(246, 162, 37,1));
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
  font-weight: bold;
}

/*==電話の設定*/

.tel {
  padding: 0 13px;
}

.tel01 {
  text-align: center;
  font-weight: bold;
}

.tel01 >a {
  font-size: 22px;
  font-weight: bold;
}

.conicon {
  width: 20px;
  vertical-align: middle;
}


@media screen and (min-width:768px){
  .concept .catch {
  font-size: 25px;
  }
  .conicon {
  width: 40px;
  }
}

/*-----------------------------------------
  アニメーション
-----------------------------------------*/

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}

.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}


/*-----------------------------------------
  header - setting
-----------------------------------------*/

/* ロゴ */

.logo-wrapper{
  display: flex;
  flex-wrap: wrap;
  height: 150px;
  align-items: flex-end;
  text-align: center;
  justify-content: center;
}

.logo {
  margin: 0 auto;
  background-image: url(../img/logob_01.svg);
  background-position: center 15px;
  background-repeat: no-repeat;
  object-fit: cover;
  width: 130px;
  height: 130px;
  text-indent: 120%;   /* 右にずらす */
  white-space: nowrap;  /*  改行しない 文字列は繰り返さない*/
  overflow: hidden;
  margin-right: auto;
}

@media (min-width:768px) {
  .logo {
    margin-left: 0;
    width: 150px;
    height: 150px;
  }

  .logo-wrapper{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: right;
    margin-bottom: 0;
  }
}


/* instagram(header) */

.header_info .facebook {
  display: flex;
  align-items: center;
}

.header_info .facebook_btn {
  display: inline-block;
  text-align: center;
  font-size: 10px;
  text-decoration: none;
}

.header_info .facebook_btn:hover {
  color:#fff;
  text-shadow: -1px -1px 1px rgba(255, 255, 255, .44), 1px 1px 1px #4a0a11;
  transition: .5s;/*ゆっくり変化*/
}

.header_info .facebook_btn .face{/*アイコンの背景*/
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin: 11px;
}

.header_info .facebook_btn .facebook-primary {/*アイコン*/
  color: #FFF;
  font-size: 35px;/*アイコンサイズ*/
  line-height: 22px;/*高さと合わせる*/
  text-shadow: -1px -1px 1px rgba(255, 255, 255, .44), 2.1px 2px 2px #4a0a11;
}

/*-----------------------------------------
  nav - setting
-----------------------------------------*/
nav {
  text-align: center;
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: #F8F4EF;
  transition: .3s;
  z-index: 2;
  /* スマホの際、position:fixedの固定。top:0 left:100%で固定位置の開始場所設定。幅・高さ全画面、背景色、CSSアニメーション時間設定 */
}

nav.drawer {
  left: 0;
  /* クラスを追加された際の、navのleft側の設定 left:0でnavを閉じる設定 */
}

nav ul a {
  display: block;
  line-height: 70px;
  text-align: center;
  font-weight: bold;
  letter-spacing: .1em;
}

@media (min-width:768px) {
  nav{
    position: sticky;
    top: 0;
    left: 0;
    /* width: auto;
    height: auto; */
    background-color: #F8F4EF;
  }

  nav ul a {
    line-height: 1.5;
    font-size: 16px;
  }
}

/*ナビゲーションを横並びに*/
nav ul {
  /*2階層目の基点にするためrelativeを指定*/
  position: relative;
  list-style: none;
  display: flex;
  justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
  display: block;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
  /*矢印の基点にするためrelativeを指定*/
  position: relative;
  display: block;
  text-decoration: none;
  color: #33211c;
  padding: 20px 20px;
  transition:all .3s;
}

nav ul li li a {
  padding:20px;
}

nav ul li li a img {
  width: 95%;
  filter: drop-shadow(2px 2px 2px #9d9c9c);
}

nav ul li a:hover {
  color:#ff8204;
  background-color: #fafafa;
  filter: drop-shadow(2px 2px 2px #9d9c9c);
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/

nav ul li.has-child > a::before {
  content:'';
  position: absolute;
  left:8px;
  top:25px;
  width:8px;
  height:8px;
  border-top: 2px solid #ccc;
  border-right:2px solid #ccc;
  transform: rotate(135deg);
}

/*==2階層目以降の画像設定*/

nav ul li.has-child img {
  max-width: 100%;
  height: auto;
  transition: all .5s;
  vertical-align: bottom;
}

/*hoverしたら画像拡大*/
nav ul li.has-child img:hover {
  transform: scale(1.2);
}

nav ul li.has-child dt{
  overflow: hidden;
  height: 20vh;
  margin:0 0 20px 0;
}

@media screen and (max-width:1200px) {
nav ul li.has-child dt{
  height: 12vh;
}

}

/*== 2層目の設定 */

nav li.has-child ul {
  position: absolute;
  left: 0;
  top:58px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background:#fafafa;
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul {
  visibility: visible;
  opacity: 1;
}

/*各ナビゲーション横幅*/
nav li.has-child ul li {
  width:20%;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
  color: #33211c;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
  background:#fff;
  color: #ff8204;
}

/*==768px以下の形状*/
@media (max-width:768px) {

  nav ul{
    display: block;
  }

  nav li.has-child ul {
    position: relative;
    left:0;
    top:0;
    width:100%;
    visibility:visible;/*JSで制御するため一旦表示*/
    opacity:1;/*JSで制御するため一旦表示*/
    display: none;/*JSのslidetoggleで表示させるため非表示に*/
    transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}

nav li.has-child:hover > ul {
  display: none;
}

  nav li.has-child ul li {
    width:100%;
    text-align: left;
  }

  nav li.has-child ul li dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav li.has-child ul li dt {
    width:30%;
    height: auto;
    margin: 0;
  }

  nav li.has-child ul li dd {
    width:64%;
  }

  nav ul li a {
    padding: 10px 20px;
    border-bottom:1px solid #ccc;
}

  nav ul li li a {
    padding: 0;
}

/*矢印の位置と向き*/

nav ul li.has-child > a::before {
  top:17px;
  left:20px;
  transform: rotate(135deg);
}

nav ul li.has-child.active > a::before {
  transform: rotate(-45deg);
}
}


/*-----------------------------------------
  burger - setting
-----------------------------------------*/

.burgerbtn {
  position: fixed;
  z-index: 1000;
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #33211c;
  border-radius: 5px;
  top: 30px;
  right: 5%;
  transition: .3s;
  cursor: pointer;
}

.burgerbtn span {
  display: block;
  position: absolute;
  width: 70%;
  height: 2px;
  background-color: #33211c;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: .3s;
}

.burgerbtn span:nth-child(1) {
  background-color: #33211c;
  top: -18px;
}

.burgerbtn span:nth-child(2) {
  top: 0px;
  background-color: #ffffff;
}

.burgerbtn span:nth-child(2)::after {
  content:"Menu";/*2つ目の要素のafterにMenu表示を指定*/
	position: absolute;
  top: -6px;
	left:0;
  color: #33211c;
	font-size: 0.6rem;
	text-transform: uppercase;
}

.burgerbtn span:nth-child(3) {
  background-color: #33211c;
  top: 18px;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.burgerbtn.active span:nth-of-type(1) {
  top: 0;
  transform: rotate(135deg);
}

.burgerbtn.active span:nth-of-type(2) {
  top: 0px;
  background-color: rgba(115, 99, 87, 0)
}

.burgerbtn.active span:nth-of-type(3) {
  top: 0px;
  transform: rotate(-135deg);
}

.burgerbtn.active span:nth-of-type(2)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
	position: absolute;
	top:11px;
	left:0px;
  color: #33211c;
	font-size: 0.6rem;
	text-transform: uppercase;
  z-index: 1;
}

@media (min-width:768px) {
  .burgerbtn{
  display: none;
  }
  /* PCの場合、ハンバーガーボタンの非表示設定 */
}

/*-----------------------------------------
  key-visual
-----------------------------------------*/

.bxslider img {
  width: 100%;
  object-fit: cover;
  height: calc(100vh - 184px);
  position: relative;
}

.bxslider p {
  position: absolute;
  top: 50%;
  /* left: 10%; */
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  /* width: fit-content; */
  padding: 30px;
}

@media (min-width:768px) {
  .bxslider img {
  width: 100%;
  object-fit: cover;
  height: calc(100vh - 217.2px);
  position: relative;
  margin-bottom: 60px;
  }
}

/*-----------------------------------------
  文字アニメーション setting
------------------------------------------*/

.bxslider .flowing{
  /* width: 0; */
  margin: 0;
  font-size: 6vw;
  font-weight: bold;
  color: #fff;
  background: -webkit-linear-gradient(45deg, rgba(16, 12, 8, 0.7), rgba(15, 12, 7, 0.7),rgba(82, 65, 60, 0.7));
  background: linear-gradient(45deg, rgba(16, 12, 8, 0.7), rgba(15, 12, 7, 0.7),rgba(82, 65, 60, 0.7));

  white-space: nowrap;
  overflow: hidden;
  animation: flowing-anim 3s forwards;
}

.bxslider .flowing:nth-of-type(2) {
  animation-delay: 2.5s;
}

.bxslider .flowing:nth-of-type(3) {
  animation-delay: 5s;
}

.bxslider .flowing:nth-of-type(4) {
  animation-delay: 7.5s;
}

@keyframes flowing-anim {
  0%{
    /* width: 0%; */
    opacity: 0;

  }
  100%{
    /* width: 100%; */
    opacity: 1;

  }
}
@media (min-width:768px) {
  .bxslider .flowing {
    font-size: 3vw;
  }
}


/*-----------------------------------------
  news - setting
-----------------------------------------*/
.news {
  padding: 40px 20px;
  background-color: rgba(16, 131, 69, 0.1);
  margin: 0 auto 40px;
  width: 100%;
}

.news dl {
  line-height: 2.5;
  font-weight: bold;
}
.news dl:nth-of-type(1) {
  border-top: 1px solid #665241;
}
.news dd {
  border-bottom: 1px solid #665241;
  padding: 12px 1em;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.news dt {
  padding: 0 1em;
  font-size: 16px;
}

.news + .btn01 {
  margin-bottom: 40px;
}

.news a span {
  text-decoration: underline;
  color: blue;
}


.news .facebook-primary {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin: 0 10px;
}

/*news-hover きらっと光る*/

.news .shine{
  /*キラッと光る基点とするためrelativeを指定*/
position: relative;
  /*ボタンの形状*/
display:inline-block;
  /* color: #fff; */
  padding: 0;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}

/*キラッと光る*/
.news .shine::before {
content: '';
  /*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
  /*キラッと光る形状*/
width: 50%;
height: 100%;
background: -webkit-linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-25deg);
z-index: 7;
}

/*hoverした際の移動のアニメーション*/
.news .shine:hover::before {
animation: shine 0.7s;
}

@keyframes shine {
100% {
  left: 125%;
}
}

@media (min-width:768px) {
  .news{
    width: 960px;
    max-width: 90%;
    padding: 40px 0;
  }
  .news dl {
    display: grid;
    width: 80%;
    margin-inline: auto;
    grid-template-columns: 7em 1fr;
    /* 左と右の幅指定 1frの意味は残り全部という意味 */
    place-content: center;
  }

  .news dt, .news dd {
    border-bottom: 1px solid #33211c;
    padding: 14px 0;
    display: flex;
    align-items: center;
    font-size: 20px;
  }
}


/*-----------------------------------------
  consept
  回転アニメーション
-----------------------------------------*/

.block {
  /* 大きさを決める */
  width: 100px;
  height: 100px;
  margin-right: auto;
}
.circleText {
 /* はみ出た部分も見えるようにする（overflow） */
  overflow: visible;
}

#circle {
  /* 塗りを消す（fill） */
  fill: none;
  overflow: visible;
}

.circleText_text {
   /* テキストを彩る */
  fill: #665241;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.circleText {
  overflow: visible;
   /* 回転するアニメーション */
  animation: rotation 18s linear infinite;
}

@keyframes rotation {
  0% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(360deg);
  }
}

/*-----------------------------------------
  concept- setting
-----------------------------------------*/

.keyVisual {
  background: url(../img/consept.webp) center center / cover no-repeat;
  height: 560px;
  text-align: center;
  padding-left: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.concept{
  margin: 20px auto 100px;
  line-height: 2;
  margin-bottom: 60px;
  background-color: rgba(255, 255, 255, 0.5);
}

.text-wrapper{
  margin-bottom: 40px;
  text-align: center;
  align-items: center;
}

.concept .current{
  font-size: 30px;
  color: #ff8204;
  font-family :
	YuGothic,    /* Mac用 */
	'Yu Gothic', /* Windows用 */
	"Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}

.concept .current span{
  font-size: 30px;
  color: #414e44;
}

.concept .catch {
font-size: 20px;
}

.concept p {
  font-size: 18px;
  /* color: #380808; */
  font-family: 'Homemade Apple', cursive;
  font-family: 'Zen Old Mincho', serif;
}


.concept p {
    font-size: 22px;
    font-weight: bold;
  }

  .concept .current{
    font-size: 40px;
  }

/*-----------------------------------------
  concept index.html - setting
-----------------------------------------*/

.column-wrapper {
  width: 100%;
  display: flex;
}
:nth-of-type(even) {
flex-direction: row-reverse;
}
.column1, .column2 {
  width: 50%;
  display: flex;
  align-items: center;
}
.column1 {
  background: -webkit-linear-gradient(90deg, #f7e5d7, #fbf4ed);
  background: linear-gradient(90deg, #f7e5d7, #fbf4ed);

  padding: 0 60px;
  box-sizing: border-box;
}
.column-wrapper:nth-of-type(2n) .column1:nth-of-type(1){
  background: -webkit-linear-gradient(-90deg,rgb(206,195,182,0.6), rgb(249,241,232,0.2));
  background: linear-gradient(-90deg,rgb(206,195,182,0.6), rgb(249,241,232,0.2));
}

.column1title {
  font-size: 20px;
  text-align: center;
}

.column1txt {
  font-size: 18px;
}

.column2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@media screen and ( max-width:860px )
{
  .column-wrapper {
    flex-direction: column-reverse;
  }
  .column1, .column2 {
  width: 100%;
}
  .column1 {
  padding: 25px;
}
}


#sineCanvas,#sineCanvas1 {
  margin-bottom: 40px;
  max-width: 100%;
}

#sineCanvas1 {
  transform: scale(-1, -1);
}

/*-----------------------------------------
  menu - setting (メニューのスライダー)
-----------------------------------------*/

.menu {
  width: 100%;
}


.menu .slider1 img {
  width:180px;
  height: 138px;
  object-fit: cover;
}

.menu .slider1 li {
  position:relative;
  top: 0;
  left: 0;
}


.category{
  position: absolute;
  top: -35px;
  left: -35px;
  padding: 10px 10px;
  transform: rotate( -15deg );
  color: #ff8204;
  font-size: 32px;
  font-family: 'Lora', serif;
  font-weight: bold;
  z-index: 6;
}

.category_1{
  position: absolute;
  left:15px;
  bottom:10px;
  color: #fff;
  text-shadow: 1px 1px 3px#33211c;
  padding: 2px 20px;
  border-radius: 10px;
  font-size: 25px;
  z-index: 6;
}

@media (min-width:375px) {
  .menu .slider1 img {
    width: 240px;
    height: 184px;
  }
}

@media (min-width:768px) {
  .menu .slider1 img {
    width: 500px;
    height: 384px;
  }
}


/*-----------------------------------------
  menu_all - setting  (menu/index.html)
-----------------------------------------*/

/*hover きらっと光る*/

.menu_all .shine{
  /*キラッと光る基点とするためrelativeを指定*/
position: relative;
  /*ボタンの形状*/
display:inline-block;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}

/*キラッと光る*/
.menu_all .shine::before {
content: '';
/*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
/*キラッと光る形状*/
width: 50%;
height: 100%;
background: -webkit-linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-25deg);
z-index: 7;
}

/*hoverした際の移動のアニメーション*/
.menu_all .shine:hover::before {
animation: shine 0.7s;
}

@keyframes shine {
100% {
  left: 125%;
}
}

.menu_all ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
  .menu_all > li {
    width: 320px;
    padding-bottom: 40px;
    text-align: left;
  }
  .menu_all img {
    margin-bottom: 24px;
    filter: drop-shadow(3px 3px 3px #9d9c9c);
  }

  .menu_all img:hover {
    position: relative;
    top:3px;
    left:3px;
    filter: none;
  }

  .menu_all p {
    margin-bottom: 10px;
    font-size: 18px;
    text-align: center;
    color: #33211c;
  }

  @media (min-width:768px) {
  .menu_all ul {
    gap: 40px;
  }
  }




/*-----------------------------------------
  menu-list setting (menu common)
------------------------------------------*/
/*メニュー*/
.menuCard {
  margin: 40px 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 15px;
}

.menuCard p {
  margin-top: 16px;
}

.memuItemMain__img {
  box-shadow: none;
}

@media (min-width: 768px) {
  .menuCard__item {
    width: calc(100%/4 - 120px/4);
    margin: 0 40px 40px 0;
  }
  .menuCard__item:nth-child(4n) {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .menuCard__item {
    width: calc(100%/3 - 48px/3);
    margin: 0 24px 24px 0;
  }
  .menuCard__item:nth-child(3n) {
    margin-right: 0;
  }
}

.menuCard__link {
  display: block;
  transition: 0.3s all;
}

.menuCard__img {
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.16);
}

.cofee .menuCard__img:hover, .drink .menuCard__img:hover {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  transition: 0.3s all;
}

.menuCard__title {
  margin-top: 16px;
  color: #33211c;
  font-weight: bold;
  font-size: 16px;
}

.menuCard__detail {
  font-size: 12.5px;
}

.menuCard__price {
  font-size: 13px;
  margin: 8px 0;
}

.menuCard__set {
  display: inline-block;
  background-color: #E5DCCD;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 10px;
  padding: 4px;
  margin-right: 8px;
}

@media (max-width: 432px) {
  .menuCard__title {
    font-size: 13px;
  }
  .menuCard p {
    font-size: 13px;
}
}

/*-----------------------------------------
  coffee-map - setting
-----------------------------------------*/

.coffee-map {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0 ;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.coffee-map-belt {
  position: relative;
  text-align: center;
  font-size: 1vw;
  margin-bottom: 13vh;
}

.coffee-map-belt img {
  display: block;
  width: 300em;
  margin: 0 auto;
}

.coffee-map-belt ul {
  padding: 0;
  margin: 0;
}

.coffee-map-belt ul:hover .area {
  opacity: 0.1;
}

.coffee-map-belt ul:hover .area:hover {
  opacity: 1;
}

.coffee-map-belt .area {
  position: absolute;
  min-width: 15em;
  transition: all 0.25s ease-out;
}

.coffee-map-belt .area:hover {
  min-width: 26em !important;
}

.coffee-map-belt .area.grow-left {
  text-align: left;
}

.coffee-map-belt .area.grow-left h5 {
  font-size: 1.2em;
  padding-right: 1em;
}

.coffee-map-belt .area.grow-left h5:after {
  right: 0;
  transform: translate(50%, 50%);
}

.coffee-map-belt .area.grow-right {
  text-align: right;
}

.coffee-map-belt .area.grow-right h5 {
  font-size: 1.2em;
  padding-left: 1em;
}

.coffee-map-belt .area.grow-right h5:after {
  left: 0;
  transform: translate(-50%, 50%);
}

.coffee-map-belt .area h5 {
  position: relative;
  padding: 0 0 0.4em;
  border-bottom: solid 0.2em;
  margin: 0 0 0.4em;
  text-shadow: 0 1em 1em rgba(0, 0, 0, 0.1);
}

.coffee-map-belt .area h5:after {
  position: absolute;
  bottom: -0.1em;
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #33211c;
}

.coffee-map-belt .area p {
  margin: 0;
  padding: 0;
  text-shadow: 0 1em 1em rgba(0, 0, 0, 0.1);
}

.coffee-map-belt .area.america {
  right: 74%;
  top: 40%;
  min-width: 16em;
}

.coffee-map-belt .area.africa {
  position: absolute;
  right: 44%;
  top: 50%;
  min-width: 16em;
  max-width: 100px;
}

.coffee-map-belt .area.asia {
  left: 71%;
  top: 33%;
  min-width: 16em;
}

.coffee-map-belt .flag {
  width: 2.5em;
  display: inline-block;
  vertical-align: middle;
  padding: 0 0.2em 0;
}

@media (min-width: 768px) {
  .coffee-map-belt .flag {
  width: 2em;
  }
}

.atention {
  text-align: right;
  font-size: 0.4em;
}

.menuCard .flag {
  width: 1.8em;
  display: inline-block;
  vertical-align: middle;
  padding: 0 0.2em 0;
}



/*-----------------------------------------
  event- setting
-----------------------------------------*/

.event {
  line-height: 2;
}

.event-wrapper {
  background: -webkit-linear-gradient(90deg, rgba(150, 166, 159, 0.1), #0877771f);
  background: linear-gradient(90deg, rgba(150, 166, 159, 0.1), #0877771f);
  margin-bottom: 40px;
}

.eventtext-wrapper {
  width: 100%;
  padding: 1em;
}


.event .eventimg-wrapper {
  width: 100%;
}

.event .eventimg-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.event span {
  /* text-shadow: 1px 1px 2px #dd8706; */
  color: #dd8706;
  font-size: 22px;
}

@media (min-width:768px) {
  .event{
    line-height: 2.5;
  }

  .event-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .event_img {
    width: 100%;
  }

  .eventtext-wrapper {
    margin: 30px;
    width: 100%;
  }
}

/*-----------------------------------------
  deni - setting
-----------------------------------------*/

.deni {
  line-height: 2;
}


.deni-wrapper {
  background: -webkit-linear-gradient(90deg, rgba(150, 166, 159, 0.1), #0877771f);
  background: linear-gradient(90deg, rgba(150, 166, 159, 0.1), #0877771f);
  margin-bottom: 40px;
}

.denitext-wrapper {
  width: 100%;
  padding: 1em;
}

.deni .deniimg-wrapper {
  width: 100%;
}

.deni .deniimg-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.deni span {
  color: #dd8706;
  font-size: 22px;
}

.deni .btn01 {
  margin-bottom: 80px;
}

@media (min-width:768px) {
  .deni {
    line-height: 2.5;
  }
  .deni span {
    font-size: 24px;
  }

  .deni-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .deni_img {
    width: 100%;
  }

  .denitext-wrapper {
    margin: 30px;
    width: 100%;
  }

  .deni .btn01 {
    margin-bottom: 120px;
  }

}

/*-----------------------------------------
  access - setting
------------------------------------------*/

.access {
  margin: 0 auto 40px;
}

.access .info {
  width: 100%;
  background: -webkit-linear-gradient(90deg, rgba(150, 166, 159, 0.1), #0877771f);
  background: linear-gradient(90deg, rgba(150, 166, 159, 0.1), #0877771f);

  display: grid;
  grid-template-columns: 6em 1fr;
  line-height: 1.7;
  padding: 20px 1em 20px;
}

.info dt {
  display: table-cell;
  vertical-align: middle;
}

.info dd {
  display: table-cell;
  vertical-align: middle;
}

.map-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

.map {
  width: 100%;
  aspect-ratio: 600 / 500;
  object-fit: cover;
  /* filter: grayscale(70%); */
}

@media (min-width:768px) {
  .access{
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
  }

  .map-area {
    flex-direction: row;
  }

  .info {
    width: 50%;
    height: 500px;
  }

  .info dt {
    align-self: center;
  }

  .info dd {
    align-self: center;
  }

  .map {
    width: 50%;
  }
}


/* ------------------------------
  current
------------------------------ */

.coffeeGoods > h2 {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.coffeeGoods > h2::before {
display: block;
content: 'CURRENT';
position: absolute;
left: 0px;
top: -100px;
font-size: 2em;
background-image: -webkit-linear-gradient(90deg, #ba9578, #edcdb2,#f7ebdf);
background-image: linear-gradient(90deg, #ba9578, #edcdb2,#f7ebdf);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
}

@media (min-width:358px){
  .coffeeGoods > h2::before {
    position: absolute;
    left: 0px;
    top: -170px;
    font-size: 2em;
  }
}

@media (min-width:768px){
  .coffeeGoods > h2::before {
    position: absolute;
    top: -200px;
    font-size: 3.9em;
  }
}


/*-----------------------------------------
  goods - setting
-----------------------------------------*/

a.good-img {
  display: block;
}

.coffeeGoods{
  margin: 20px auto 100px;
  line-height: 2;
  margin-bottom: 60px;
  /* background-color: #fff;
  opacity: 0.4; */
  background-color: rgba(255, 255, 255, 0.561);
}

.goods {
  background: url(../img/goods.webp) center center / cover no-repeat;
  height: 560px;
  text-align: center;
  padding-left: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
}

.goods .text-wrapper{
  margin-bottom: 40px;
  text-align: center;
}

.coffeeGoods p {
  font-size: 16px;
  /* color: #380808; */
  font-family: 'Homemade Apple', cursive;
  font-family: 'Zen Old Mincho', serif;
}

.coffeeGoods_text {
  margin-bottom: 40px;
}

.coffeeGoods .current{
  font-size: 30px;
  color: #ff8204;
  font-family :
	YuGothic,    /* Mac用 */
	'Yu Gothic', /* Windows用 */
	"Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}

.coffeeGoods .current span{
  font-size: 30px;
  color: #414e44;
}

.coffeeGoods_text .btn01 {
  margin: 40px 40px;
}

@media (min-width:768px){
  .coffeeGoods p {
    font-size: 22px;
    font-weight: bold;
  }

  .coffeeGoods .current{
    font-size: 40px;
  }
}

/*-----------------------------------------
  gallery - setting (slider)
------------------------------------------*/
.gallery {
  margin-bottom: 20px;
}

.slider {
  width:100%;
  margin:0 auto;
}

.slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin:0 5px;
}

/*-----------------------------------------
  privacy-policy - setting
------------------------------------------*/

.privacy-policy a {
  /* text-decoration:underline; */
  background:-webkit-linear-gradient(transparent 70%, #edcdb2 0%);
  background:linear-gradient(transparent 70%, #edcdb2 0%);
}

/*-----------------------------------------
  footer - setting (PC)
------------------------------------------*/

.footer {
  background: #23160e;
}

.footer .cont {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 20px 0;
}

.footer .cont-item {
  display: block;
  width: calc(100% / 4);
}

.footer .nav a {
  display: block;
  color: #ccc;
}

.footer .nav .ttl {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #ccc;
}

.footer .nav .ttl + .ttl {
  margin-top: 10px;
}

.footer .nav ul {
  display: block;
  font-size: 12px;
  line-height: 2;
}

.footer .nav li {
  display: block;
  font-size: 12px;
  line-height: 2;
}

.footer .nav li ul {
  margin: 0 0 0 2em;
}

.footer .nav li li {
  position: relative;
}

.footer .nav li li:before {
  position: absolute;
  top: 50%;
  left: -10px;
  content: "";
  display: block;
  width: 4px;
  height: 1px;
  background-color: #fff;
}

.footer .company {
  display: block;
  display: flex;
  justify-content: space-evenly;
}

.footer .f-logo img {
  width: 120px;
}

.footer .address {
  display: block;
  font-size: 12px;
  line-height: 2;
  color: #ccc;
}


.footer .current{
  font-size: 20px;
  color: #ff8204;
}

.footer .current span{
  font-size: 15px;
  color: #567744;
}

.footer i.fa-solid.fa-phone::before{
  font-size: 15px;
}

.footer div.tel {
  padding: 0 0 4px 5px;
}

.footer a.tel {
  padding-left: 15px;
}

/* facebook(footer) */

.footer .facebook-secondary{
  width: 22px;
  height: 22px;
  color: #fff;
  margin-right: 11px;
  font-size: 22px;/*アイコンサイズ*/
  line-height: 22px;/*高さと合わせる*/
  text-shadow: none;
  vertical-align: middle;
}

.footer .facebook:hover {/*ホバー時*/
  color: #edcdb2;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}


/* copyright */

.footer .copyright {
  text-align: center;
  padding: 10px 0;
  background-image: -webkit-linear-gradient(90deg, #ba9578, #edcdb2,#fbf4ed);
  background-image: linear-gradient(90deg, #ba9578, #edcdb2,#fbf4ed);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

/*-----------------------------------------
  footer - setting (SP)
------------------------------------------*/

@media (max-width: 640px) {
  .footer .cont {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }
  .footer .cont-item {
    display: block;
    width: 48%;
  }

  .footer .nav ul {
    margin: 0;
    font-size: 10px;
  }

  .footer .nav li {
    font-size: 10px;
  }
  .footer .company {
    display: block;
    margin: 0 auto;
    padding: 0 20px;
  }
  .footer .address {
    margin: 10px 0 0;
    font-size: 10px;
  }
  .footer .tel {
    font-size: 18px;
  }
  .footer .copyright {
    font-size: 10px;
  }
}

/*-----------------------------------------
  footer hover（疑似要素） - setting
-----------------------------------------*/
@media (min-width:768px){
  .footer .nav a:hover {
  color: #edcdb2;
  }
}