@charset "UTF-8";
/* CSS Document */


/* 営業情報の箱 */
.box16{
	font-size: 0.9em;
    padding: 0.2em 0.6em;
    margin: 0.6em 0;
	background-color: #F5F9F2;
}
.box16 p {
    margin: 0; 
    padding: 0;
}
.box16 a {
	color: cornflowerblue;
}


/* instaの箱 */
.boxins{
	font-size: 0.9em;
    padding: 0.2em 0.8em 0 0.8em;
    margin: 3px 15px 0px 15px;
	background-color: #fff;
}
.boxins p {
    margin: 0; 
    padding: 0;
}
.boxins a {
	color: cornflowerblue;
}

/* イベントの箱 */
.box15{
	font-size: 0.9em;
     padding: 0.2em 0.6em;
    margin: 0.6em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #FFF9DC, #FFF9DC 3px,#FFF8E9 3px, #FFF8E9 7px);
    background: repeating-linear-gradient(-45deg, #FFF9DC, #FFF9DC 3px,#FFF8E9 3px, #FFF8E9 7px);
}
.box15 p {
    margin: 0; 
    padding: 0;
}
.box15 a {
	color: cornflowerblue;
}
/* イベントの箱 */
.box14{
	font-size: 0.9em;
     padding: 0.2em 0.6em;
    margin: 0.6em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #F9EFF3, #F9EFF3 3px,#F7F4F6 3px, #F7F4F6 7px);
    background: repeating-linear-gradient(-45deg, #F9EFF3 #F9EFF3 3px,#F7F4F6 3px, #F7F4F6 7px);
}
.box14 p {
    margin: 0; 
    padding: 0;
}
.box14 a {
	color: cornflowerblue;
}

.box27 {
    position: relative;
    margin: 2.5em 0 1em 0;
    padding: 0.5em 1em;
    border: solid 3px #1c0000;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 1.0em;
    background: #1c0000;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
	letter-spacing: 0.1em;
}

/* イベントの箱 */

 

#event {
    background-color: #1c0000;
    width: 100%;
    margin: 0 auto;
    padding: 1em 2em 0.0015em 2em;
    text-align: center;
    color: #fff;
}
#event h2 {
   position: relative;
	color: #fff;
	margin: 0 auto;
}
#event h2:before, h2:after {
   content: "";
   position: absolute;
   top: 1;
   bottom: 1;
	font-size: 1.2em;
   width: 9999px;   /* some huge width */
}
#event h2:before {
   right: 100%;
}
#event h2:after {
   left: 100%;
}

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

#event {
    background-color: #1c0000;
    width: 100%;
    margin: 0 auto;
    padding: 1em 2em 0 2em;
    text-align: center;
    color: #fff;
    font-size: 0.8em;
}
#event p {
	padding: 1em 0;
}
}

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

#event {
    background-color: #1c0000;
    width: 100%;
    margin: 0 auto;
    padding: 1em 2em 0 2em;
    text-align: center;
    color: #fff;
    font-size: 1.0em;
}
#event p {
	padding: 1em 0;}
	
.cloum{
	width: auto;
	line-height: 1.6em;
	}
.cloumimg{
	width: 100%;
	margin: 10px  0px;
	}	
	
}

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

#event {
    background-color: #1c0000;
    width: 100%;
    margin: 0 auto;
    padding: 1em 2em 0 2em;
    text-align: center;
    color: #fff;
    font-size: 1.0em;
}
#event p {
	padding: 1em 0;
}


/* ボタン */
.btn{
	 position: relative;
  display: inline-block;
	width: 100%;
	margin-top: -1em;
	margin-bottom: 0em;
	margin-left:0;
}




.btn-square-pop {
  position: relative;
  display: inline-block;
  float: left;
  margin: 0.3em 1.5em 0.5em 0;
  padding: 0.05em 0.5em;
  text-decoration: none;
  color: #444;
  background: #eee;/*背景色*/
  border: solid 1px #bbb;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  text-align: left;
  font-weight: 400;
}

.btn-square-pop:hover {
  border-color: #1c0000;
  color: #1c0000 !important;
  background: #fff;/*背景色*/
}
}

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

.btn-square-pop {
  margin: 0.3em 1.5em 0.5em 0;
  padding: 0.05em 0.25em;
  font-size: 0.9em;
}
}

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

.btn-square-pop {
  margin: -0.3em 1.0em 0em 0;
  padding: 0em 0.2em;
  font-weight: 400;
  line-height: 1.8em;
  font-size: 0.65em;
}



/* 各店舗ページトップのスライドショー */


.shopslide {
  position: relative;
  width: 100%;
  height: 400px;
  margin-bottom: 1em;
  overflow: hidden;
}
}

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }

}

.shopslide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}

.shopslide img:nth-child(2){
  animation-delay: 8s;
}

.shopslide img:last-child{
  animation-delay: 16s;
}




@media screen and (min-width: 1681px) {
.shopslide {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}
}




@media screen and (max-width: 1680px) {
.shopslide {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}
}


@media screen and (max-width: 980px) {
.shopslide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
	}


@media screen and (max-width: 736px) {
.shopslide {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}
	}



@media screen and (max-width: 480px) {
.shopslide {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
	}

@media screen and (max-width: 375px) {
.shopslide {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

			}

@media screen and (max-width : 993px ){
.shopslide {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

			}


/* 定番商品紹介ページ用 */
/* 写真紹介*/

*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	line-height: 125%;
	font-size: 1.0em;
}
.col_4 > div{
	width: calc(33% - 1.8em);
	padding: 0.1em;
	margin-right: 0.5em;
	margin-bottom: 0.5em; 
	margin-top: 1.5em; 
	font-size: 0.88em;
}

.col_4 > div:last-child {
			margin-right:: 0; 
		}
.col_4 img{
	width: 100%;
	border-radius: 0.35em;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	margin-bottom: 0.05em;
	box-shadow: 1px 1px 2px -1px rgba(0,0,0,2.5);
}
.col_4 h1{
	color: #003B02;
	margin: 0 0.5em 0.1em 0;
	font-size: 1.2em;
	font-family: "Roboto Slab",M PLUS 1p,serif;
	line-height: 1.1em;
}
.col_4 p{
	margin: 0.4em 0.08em 0.5em 0.05em;
	font-size: 1.0em;
	font-family: "Roboto Slab",M PLUS 1p,serif;
	color: #1c0000;
}


.col_4 h2{
	color:#262D23;
	font-size: 1.0em;
	margin: 0.2em  0.08em 0.3em 0.05em;
	line-height: 115%;
}
@media screen and (min-width: 1024px) {
	.col_4 > div{
		width: calc(33% - 1.5em);
		margin-right: 1.5em;
		font-size: 1.25em;
		line-height: 1.25em;
	}
	.col_4 img{
	width: 100%;
}
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: calc(33% - 0.8em);
		padding: 0.1em;
	margin-right: 0.8em;
		font-size: 1.1em;
		line-height: 1.25em;
	}
	.col_4 img{
	width: 100%;
}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: calc(50% - 0.8em);
		padding: 0.1em;
	margin-right: 0.8em;
		font-size: 0.8em;
		line-height: 115%;
	}
.col_4 p{
	margin-top: 0.6em;
	font-family: "Roboto Slab",M PLUS 1p,serif;
}
.col_4 img{
	width: 100%;
}
}