/*@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);*/

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#000;
  background: transparent;
  border:none;
}

body{

background: url(../img/image01.png);
background-size: 100% auto;
background-repeat: no-repeat;
font-family: 'Kosugi Maru', sans-serif;
font-weight:400;
overflow-x: hidden;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #f9c 50%, #ffc 50%);
  bottom:0;
  left:-50%;
  opacity:.1;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:29s;
}

.bg3 {
  animation-duration:30s;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

/*画面フェード設定*/
@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
/* .fade{animation: fadeIn 5s ease 0s 1 normal;-webkit-animation: fadeIn 5s ease 0s 1 normal;}  */

.top{
	background-color:#FF0000;
	padding-top: 10%;
	height:30px;
	line-height:30px;
	font-size:90%;
	text-align:center;
	color:#ffffff;
}

.wrap {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
   width: 100%;
  z-index: 1;
}

.catch-img{text-align:center;animation: fadeIn 2s ease 0s 1 normal;-webkit-animation: fadeIn 2s ease 0s 1 normal;}

/*************
/* ヘッダー
*************/
#header{
  margin:0;
  padding:0;
  height:auto;
 width: 100%;
 overflow-x: hidden;
}

.header-img {width: 100%;filter: drop-shadow(10px 10px 6px rgba(0,0,0,.5));}

@media screen and (max-width: 599px){
.header-img {width: 120%;filter: drop-shadow(5px 5px 3px rgba(0,0,0,.5));
position:relative; left:-10%;overflow-x: hidden;}
}

#container {
padding-top: 40%; /**padding-top: 66.6666666667%;*/
 width: 70%;
 margin: 0 auto;
}

@media only screen and (max-width: 640px){
#container{
		width: 90%;
		height: auto;
	}
}

.pictbox {
padding: 20px;
position: relative;
overflow: hidden;
}

.pictbox ul {
position: relative;
left: 50%;
float: left;
}

.pictbox li {
position: relative;
left: -50%;
float: left;
}

.pictbox li p{
  text-align:center;
  font-size:12px;
}

.pictbox li img{
  width: 20%;
}



/*************
/* Twitter
*************/

.twitter-wrap{margin:0 auto;text-align:center;}
.twitter-title{background-color:#20B2AA;height:70px;text-align:center;margin:0px;}
.twitter-title p {font-size:30px;color:#ffffff;font-weight: bold;line-height:75px;letter-spacing:0.1em;
font-family: 'Kosugi Maru', sans-serif;}

@media screen and (max-width: 320px){
.twitter-title{background-color:#20B2AA;height:60px;text-align:center;margin:0px;}
.twitter-title p {font-size:18px;color:#ffffff;font-weight: bold;line-height:125%;letter-spacing:0.1em;position:relative;top:10px;}
.twitter-wrap{padding:10px;}
}
@media screen and (min-width: 375px) and (max-width: 413px){
.twitter-title{background-color:#20B2AA;height:60px;text-align:center;margin:0px;}
.twitter-title p {font-size:20px;color:#ffffff;font-weight: bold;line-height:125%;letter-spacing:0.1em;position:relative;top:6px;}
.twitter-wrap{padding:10px;}
}
@media screen and (min-width: 414px) and (max-width: 599px){
.twitter-title{background-color:#20B2AA;height:60px;text-align:center;margin:0px;}
.twitter-title p {font-size:20px;color:#ffffff;font-weight: bold;line-height:125%;letter-spacing:0.1em;position:relative;top:6px;}
.twitter-wrap{padding:10px;}
}
@media screen and (min-width: 600px) and (max-width: 768px){
.twitter-title{background-color:#20B2AA;height:60px;text-align:center;margin:0px;}
.twitter-title p {font-size:18px;color:#ffffff;font-weight: bold;line-height:65px;letter-spacing:0.1em;}
.twitter-wrap{padding:10px;}
}
@media screen and (min-width: 769px) and (max-width: 960px){
.twitter-title{background-color:#20B2AA;height:65px;text-align:center;margin:0px;}
.twitter-title p {font-size:21px;color:#ffffff;font-weight: bold;line-height:70px;letter-spacing:0.1em;}
.twitter-wrap{padding:10px;}
}
@media screen and (min-width: 961px) and (max-width: 1024px){
.twitter-title{background-color:#20B2AA;height:65px;text-align:center;margin:0px;}
.twitter-title p {font-size:23px;color:#ffffff;font-weight: bold;line-height:70px;letter-spacing:0.1em;}
.twitter-wrap{padding:15px;}
}
@media screen and (min-width: 1025px) and (max-width: 1280px){
.twitter-title{background-color:#20B2AA;height:70px;text-align:center;margin:0px;}
.twitter-title p {font-size:28px;color:#ffffff;font-weight: bold;line-height:75px;letter-spacing:0.1em;}
.twitter-wrap{padding:15px;}
}
@media screen and (min-width: 1281px) and (max-width: 1440px){
.twitter-title{background-color:#20B2AA;height:70px;text-align:center;margin:0px;}
.twitter-title p {font-size:30px;color:#ffffff;font-weight: bold;line-height:75px;letter-spacing:0.1em;}
.twitter-wrap{padding:15px;}
}
@media screen and (min-width:1441px) {
.twitter-title{background-color:#20B2AA;height:70px;text-align:center;margin:0px;}
.twitter-title p {font-size:30px;color:#ffffff;font-weight: bold;line-height:75px;letter-spacing:0.1em;}
.twitter-wrap{padding:20px 0 0;}
}

  /*ギャラリー グリッドコンテナ*/

.twitter-timeline, .insta-box {width: 300px !important;height:400px !important;}

/* @media screen and (max-width: 320px){
  .twitter-timeline, .insta-box {width: 100%;height:550px !important;}}
@media screen and (min-width: 375px) and (max-width: 413px){
  .twitter-timeline, .insta-box {width: 100%;height:550px !important;}}
@media screen and (min-width: 414px) and (max-width: 599px){
  .twitter-timeline, .insta-box {width: 100%;height:550px !important;}}
@media screen and (min-width: 600px) and (max-width: 768px){
  .twitter-timeline, .insta-box {width: 100%;height:490px !important;}}
@media screen and (min-width: 769px) and (max-width: 960px){
  .twitter-timeline, .insta-box {width: 100%;height:510px !important;}}
@media screen and (min-width: 961px) and (max-width: 1024px){
  .twitter-timeline, .insta-box {width: 100%;height:525px !important;}}
@media screen and (min-width: 1025px) and (max-width: 1280px){
  .twitter-timeline, .insta-box {width: 100%;height:590px !important;}}
@media screen and (min-width: 1281px) and (max-width: 1440px){
  .twitter-timeline, .insta-box {width: 100%;height:630px !important;}}
@media screen and (min-width:1441px) {
  .twitter-timeline, .insta-box {width: 100%;height:770px !important;}} */

.insta-box {background:#fff;border-radius:4px;text-align:center;position: relative;}
.insta-box-inner { position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
.insta-box-img {width:150px;height:150px;border-radius: 50%;border:1px solid #d6d6d6;background-position: center center;}
.insta-box p {font-size:18px;font-family: 'M PLUS Rounded 1c', sans-serif;padding:5px;}
.insta-button {display: inline-block;width: 100%;height: 50px;border-radius: 5px;background-color: #006eff;margin-top:10px;}
.insta-button p {margin:0;padding:0;line-height:50px;text-decoration: none;color: #fff;font-size: 16px;text-align: center;}


 .grid_box{
/*  padding:20px 0; */
	display: table;
	width: 100%;
/* 	margin:0 auto;
	text-align:center; */
}

@media screen and (min-width: 1441px) {
.grid-container {
	width: 95%;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
 }
}
@media screen and (min-width: 1281px) and (max-width: 1440px){
.grid-container {
	width: 95%;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
 }
}
@media screen and (min-width: 1025px) and (max-width: 1280px){
.grid-container {
	width: 97%;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
 }
}
@media screen and (min-width: 961px) and (max-width: 1024px){
.grid-container {
	width: 98%;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
 }
}
@media screen and (min-width: 769px) and (max-width: 960px){
.grid-container {
	width: 98%;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 2;
  column-gap: 15px;
  column-fill: auto;
 }
}
@media screen and (min-width: 600px) and (max-width: 768px){
.grid-container {
	width: 98%;
  -webkit-column-count: 1;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 1;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 1;
  column-gap: 15px;
  column-fill: auto;
 }
}

@media screen and (min-width: 414px) and (max-width: 599px){
.grid-container {
	width: 100%;
  -webkit-column-count: 1;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 1;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 1;
  column-gap: 15px;
  column-fill: auto;
}
}
@media screen and (min-width: 375px) and (max-width: 413px){
.grid-container {
	width: 100%;
  -webkit-column-count: 1;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  -moz-column-count: 1;
  -moz-column-gap: 15px;
  -moz-column-fill: balance !important;
  column-count: 1;
  column-gap: 15px;
  column-fill: auto;
}
}
@media screen and (max-width: 320px){
.grid-container {
	width: 100%;
  -webkit-column-count: 1;
  -webkit-column-gap: 12px;
  -webkit-column-fill: auto;
  -moz-column-count: 1;
  -moz-column-gap: 12px;
  -moz-column-fill: balance !important;
  column-count: 1;
  column-gap: 12px;
  column-fill: auto;
}
}


.grid {
 display: inline-block;
 -webkit-column-break-inside: avoid;
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
/*  background:#20B2AA !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 1.0);
	padding:1em;
	margin-right:3px;
	margin-bottom:15px;
	font-size:12px;
	font-family: 'Kosugi Maru', sans-serif;
	line-height:160%;
	text-align:center;
	word-break: break-all; */
}

/* .grid div{
font-size:16px;font-weight:bold;line-height:140%;margin-bottom:5px;color:#fff;
} */


/* @media screen and (max-width: 599px){
.grid {
	width: 100%;
 display: inline-block;
 -webkit-column-break-inside: avoid;
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
 background:#8b0000 !important;
	padding:5px 0;
	margin-right:0px;
	margin-bottom:0px;
	font-size:12px;
	font-family: 'Kosugi Maru', sans-serif;
	line-height:140%;
	text-align:center;
	word-break: break-all;
}
 .grid div{font-size:12px;font-weight:bold;line-height:120%;margin-bottom:5px;color:#fff;}
 .sp-grid-size{width: 100%;margin:0;}
} */

/* BugFix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .grid {
  display: block !important;
 }
}
/*グリッドコンテナここまで*/


/*************
/* 店舗案内
*************/

.shopinfo-title {font-family: 'M PLUS Rounded 1c', sans-serif;background-color:#FFA500;height:60px;line-height:60px;font-size:200%;text-align:center;color:#ffffff;margin-top:20px;margin-bottom:10px;font-weight: bold;letter-spacing:0.2em;}

@media screen and (max-width: 599px){
.shopinfo-title {font-family: 'M PLUS Rounded 1c', sans-serif;background-color:#FFA500;height:40px;line-height:40px;font-size:150%;text-align:center;color:#ffffff;margin-top:20px;margin-bottom:10px;font-weight: bold;letter-spacing:0.2em;}
}


/*************
/* フローティング
*************/
.footback {
display: block;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 9999;
text-align: center;
padding:10px 0;
margin: auto;
background-color:#8b0000;
height:60px;
opacity: 0.9;
}

.footback p span {margin-right:1rem;color:#ffffff;}

.footback p {
font-family: 'Kosugi Maru', sans-serif;
font-size:1.25rem;
color:#ffffff;letter-spacing:1px;font-weight:700;margin:0;
}

@media screen and (min-width: 360px) and (max-width: 640px){
.footback {height:70px;}
.footback p span {margin-right:0;color:#ffffff;}
.footback p {font-size:1rem;line-height:1.65rem;}
}

@media screen and (max-width: 320px){
.footback {height:65px;}
.footback p span {margin-right:0;color:#ffffff;}
.footback p {font-size:0.9rem;line-height:1.5rem;}
}


/*************
/* フッター
*************/
#footer{
clear:both;
overflow:hidden;
padding:10px 10px 20px 10px;
background:#f5f5f5;
}

* html #footer{height:1%;}

#footer .grid{
padding:10px 0 5px;
margin:0;
background:transparent;
}

#footer #info .logo, #footer #info .info{float:none;}

#footer #info .info{
clear:both;
padding:10px 0 0 15px;
text-align:right;
}

#footer .logo{font-size:18px;}

#footer .info .tel,#footer .info .tel span,#footer #info .open{
font-size:12px;
color:#333;
font-family: 'Kosugi Maru', sans-serif;font-weight:400;
}

.indent {padding-left:0.8rem;text-indent:-0.8rem;}

.foot-add {margin: auto;text-align:center;width: 100%;height:260px;
font-family: 'Kosugi Maru', sans-serif;font-weight:400;color:#000000;}

.footer-add-txt {display: inline-block;padding: 0 15px;line-height:1.5rem;
position:relative;top:0;}

.footer-root-info {
width:650px; color: #333333;margin: 10px 10px; padding: 0px 10px;border-left: 5px solid #8B0000;text-align:justify;
font-size:0.8rem; line-height:1.4rem;font-family: 'Kosugi Maru', sans-serif;font-weight:400;
}

@media screen and (min-width: 641px) and (max-width: 1024px){
.foot-add {height:350px;}
.footer-root-info {
width:300px; color: #333333;margin: 0; padding: 0 10px;
font-size:0.8rem; line-height:1.4rem;}
.footer-add-txt {position:relative;top:-70px;}
}

@media screen and (min-width: 360px) and (max-width: 640px){
.foot-add {width: 340px;height:570px;}
.footer-root-info {
width:100%; color: #333333;margin-bottom:20px; padding: 0px;border-left: 0px;
font-size:0.8rem; line-height:1.4rem;position:relative;left:-10px;}
.footer-add-txt {width:100%; position:relative;top:0px;margin-bottom:30px;padding: 0;}
}

@media screen and (max-width: 320px){
.foot-add {width: 290px;height:640px;}
.footer-root-info {
width:100%; color: #333333;margin-bottom:20px; padding: 0px;border-left: 0px;
font-size:0.8rem; line-height:1.4rem;position:relative;left:-10px;}
.footer-add-txt {width:100%; position:relative;top:0px;margin-bottom:30px;padding: 0;}
}

ul.footnav{
float:right;
width:650px;
padding:10px 0;
}

ul.footnav li{
float:right;
margin-bottom:10px;
padding:0 7px 0 8px;
font-size:11px;
border-right:0px solid #b6b6b6;
}

#footer a{color:#333;}
#footer a:hover{color:#888;}

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* -----------pc-------------- */
	#footer .grid,#footer ul.footnav{
	float:none;
	width:100%;
	}

	ul.footnav li{float:none;display:inline-block;}

	#footer .grid p{display:block;}
	#footer #info .info{float:none;text-align:center;}

	#footer.logo,#footer .info{
	width:100%;
	float:none;
	}

/* -------------------------------------------------------------- */

  #footer{
    max-width: 100%;
    padding: 20px 0 70px;
  }

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
@media only screen and (min-width: 600px) {
.pc { display: block !important; }
.sp { display: none !important; }
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 640px) {
.pc { display: none !important; }
.sp { display: block !important; }
}