@charset "utf-8";
@import "../css/style.css";

/* --------------------------------------------------
	メインイメージ  / MAIN IMAGE
-------------------------------------------------- */

div#main { margin: 0 0 40px 0; }
div#main div.bx-controls { display: none; }

@media screen and (max-width : 767px) {
div#main img { width: 100%; }
}

h1{
	text-align:center;
	background:#05806c;
	color:#FFF;
	padding:8px 0;
	font-size:24px
}
/* --------------------------------------------------
	お知らせ / NEWS
-------------------------------------------------- */

section#news {}
section#news ul { list-style: none; }
section#news li { margin: 0 0 10px 0; padding: 0 10px 10px 10px; border-bottom: dashed 1px #ccc; }
section#news li span { font-size: 95%; display: block; }

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

/* --------------------------------------------------
	商品紹介 / PRODUCTS
-------------------------------------------------- */

section#products {}
section#products ul { /*! width: 840px; */ list-style: none; display: flex;flex-wrap: wrap;}
section#products li {   text-align: center; width: 25%;padding: 10px;box-sizing: border-box;}
section#products li img { margin: 0 0 10px 0; }
section#products li p { margin: 0; }
section#products li p span { font-size: 90%; display: block; }
section#products .caution { font-weight:bold; }

@media screen and (max-width : 767px) {
section#products ul { width: auto; }
section#products li { margin: 0 0 20px 0; width: auto; float: none; }
section#products li img { margin: 0 0 8px 0; }
section#products li p span { margin: 0 1em 0 0; display: inline; }
}

/* --------------------------------------------------
	お店の紹介 / SHOP
-------------------------------------------------- */

section#smoothie {}
/*
section#smoothie ul { margin: 0 auto 30px auto; width: 660px; list-style: none; }
section#smoothie li { margin: 0 15px; width: 300px; float: left; }
section#smoothie li img { width: 300px; height: 300px; }
section#smoothie li span { font-size: 90%; display: block; text-align: center; }
section#smoothie li span p strong { font-size: 100%; }
*/
section#smoothie ul { list-style: none; display: flex; flex-wrap: wrap; }
section#smoothie li { margin-bottom:10px; margin-right:2%; width: 32%; text-align: center;  }
section#smoothie li:nth-child(3n) { margin-right:0;  }
section#smoothie li img { margin: 0 0 10px 0; width: 180px; height: 180px; object-fit: cover; object-position: 0 100%; }
section#smoothie li p { margin: 0; }
section#smoothie li p span { font-size: 90%; display: block; }


@media screen and (max-width : 767px) {
section#smoothie ul { margin: 0 0 20px 0; width: auto; }
section#smoothie li { margin: 0 0 10px 0; width: 100%; text-align: center; float: none; }
section#smoothie li img { width: 280px; height: auto; }
}

/* --------------------------------------------------
	お店の紹介 / SHOP
-------------------------------------------------- */
section#shop ul { list-style:none; display:flex; flex-wrap:wrap; margin: 0 -10px;}
section#shop li { width: 33%;box-sizing: border-box;padding: 10px; }
section#shop li img{ height:auto; }
section#shop p.centre { text-align: center; }
section#shop p.shop { margin-top:30px; }
section#shop p.shop img { width: 400px; height: auto; }
section#shop p.map img { margin: 0 0 10px 0; width: 500px; height: auto; }

@media screen and (max-width : 767px) {
section#shop li { width: 100%; }
section#shop p.shop img { width: 90%; }
section#shop p.map img { width: 90%; }
}

/* --------------------------------------------------
	タブ切替
-------------------------------------------------- */

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

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

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

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


/*選択されているタブのコンテンツのみを表示*/
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #05806c;
  color: #fff;
}
.tabs .midashi{
	width: 100% !important;
	background: #05806c;
	color: #FFF;
}

@media screen and (max-width : 767px) {
	.tab_item {
	  width: calc(100%/2);
	}
}