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

/*  video
-----------------------------------------*/
.video-container {
  width: 100%;
  height: 100vh; /* 画面の高さ（View Height）いっぱいに指定 */
  overflow: hidden;
  position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  /* ここが重要：アスペクト比を維持して隙間なく表示 */
  object-fit: cover; 
  
  /* 中央配置（必要に応じて） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* フェードインアップ
-----------------------------------------*/
.fade-up-image {
  /* アニメーションの設定 */
  animation: fadeUp 2s ease-out forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px); /* 30px下から開始 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 元の位置へ */
  }
}
/* フェードイン
-----------------------------------------*/
/* 最初は隠しておく */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}

/* 画面に入った時に付与するクラス */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.item {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}
/*  スライダー
-----------------------------------------*/
/* スライダーの外枠：はみ出た画像を隠す */
.thumb-item .slick-slide {
  overflow: hidden;
}

/* 通常時の画像の状態 */
.thumb-item .slick-slide img {
  transform: scale(1);
  transition: transform 6s cubic-bezier(.645, .045, .355, 1); /* アニメーションの時間 */
}

/* アクティブ（表示中）になった時の画像の状態 */
.thumb-item .slick-current img {
  transform: scale(1.15); /* 1.15倍に拡大 */
}

/*  画像ズーム*/
-----------------------------------------
.zoom-1 img {
      width: 100%;
      height: auto;
      animation: animationZoom1 3s ease-in-out forwards;
    }

    @keyframes animationZoom1 {
      100% { transform:scale(1.1)} 
    }

.zoom {
      width: 100%;
      height: auto;
      overflow: hidden;
    }

/*　タイトル
-----------------------------------------*/

#title-red {
	margin: 0 auto;
	padding: 20px 0 0 0;
	background-image:url(../img/t-red.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
	width:520px;
	height:120px;
}

#title-brown {
	margin: 0 auto;
	padding: 20px 0 0 0;
	background-image: url(../img/t-brown.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
	width:520px;
	height:120px;
}

#title-pink {
	margin: 0 auto;
	padding: 20px 0 0 0;
	background-image: url(../img/t-pink.png);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:contain;
	width:520px;
	height:120px;
}

#fe-subt01 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-image: url(../img/t-line.png), url(../img/t02.png);
	background-repeat:no-repeat;
	background-position:center bottom, left top;
	background-size:contain;
	width:520px;
	height:80px;
}

#fe-sbt01 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-image: url(../img/sbt.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:contain;
	width:400px;
	height:70px;
}

#fe-subt02 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-image: url(../img/t-line.png), url(../img/t03.png);
	background-repeat:no-repeat;
	background-position:center bottom, left top;
	background-size:contain;
	width:520px;
	height:80px;
}


#fe-subt03 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-image: url(../img/t-line.png), url(../img/t04.png);
	background-repeat:no-repeat;
	background-position:center bottom, left top;
	background-size:contain;
	width:520px;
	height:80px;
}

/* スクロールダウン
-----------------------------------------*/
.scrolldown a {
  position: absolute;
  bottom: 20px;
  top:85%;
  left: 50%;
  z-index: 100;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  color:#FFF;
}
.scrolldown a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
/*  スライド画像
-----------------------------------------*/
.f-slide {
  /*height: 100%;  高さを画面いっぱいに指定する。(vhが効かない場合の対策)*/
  /*height: 1000px;*/
  /*height: 100vh;  高さを画面いっぱいに指定する。*/
  position: relative;  /*横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/
  width: 100%; /* 横幅もいっぱいに。*/
  /*z-index:-2;*/
}

.f-slide img {
  /*width:100%;*/
  width: 100vw;
  height: auto;
  /*height: 100vh;*/
  min-height: auto;
}


/* ドット
-----------------------------------------*/
.dot {
	width:100%;
	height:100%;
	/*height: 850px;*/
	height: 100vh;
	position:absolute;
	z-index:2;
	background: url(../img/dot3.png);
	background-repeat: repeat;
}


/*=============
背景パターン / 王冠
==============*/

.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffe9a7;
  opacity: 0.4;
  z-index: -1;
}
.Crown {
  background-image: linear-gradient(45deg, #ffc107 25%, transparent 25%), linear-gradient(315deg, #ffc107 25%, #ffe9a7 25%);
  background-position: 10px 0, 20px 0, 0 0, 0 0;
  background-size: 20px 20px;
  background-repeat: repeat;
}

/* トップ画像
-----------------------------------------*/



/* 背景色
-----------------------------------------*/
.bg-brown {
	background-color:#633d0e;
}
.bg-brown1 {
	background-color:#746B5E;
}
.bg-brown2 {
	background-color:#bb9c75;
}
.bg-brown3 {
	background-color:#493823;
}
.bg-ivory {
	background-color:#f4e4d4;
}

.bg-black {
	background-color:#000;
}

.bg-blue {
	background-color:midnightblue;
}

/* 背景イメージ
-----------------------------------------*/
.bg-wood1 {
	background-image:url(../img/bg01.png);
	background-repeat: repeat;
	z-index:-2;
}

.bg-wood2 {
	background-image: url(../img/bg02.png);
	background-repeat: repeat;
	z-index:-2;
}

.bg-paper1 {
	background-image: url(../img/bg03.png);
	background-repeat: repeat;
	z-index:-2;
}

.bg-paper2 {
	background-image: url(../img/bg04.png);
	background-repeat: repeat;
	z-index:-2;
}

.bg-roof {
	background-image: url(../img/b-bg.png);
	background-repeat: repeat-x;
	background-position:top;
	z-index:2;
}

.b-btm {
	background-image: url(../img/b-btm.png);
	background-repeat: repeat-x;
	background-position:bottom;
	padding-bottom: 200px;
	z-index:2;
}

.bg-gold {
 background: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
	background-repeat: repeat;
	z-index:-2;
}

.bg-silver {
 background: linear-gradient(90deg, #BDC3C9 0%, #ebf2f7 50%, #BDC3C9 100%);
	background-repeat: repeat;
	z-index:-2;
}
/* フェルマータについて
-----------------------------------------*/

#waku0 {
	margin: 0 auto 0 auto;
	padding-top:0px;
	width: 1300px;
	height: auto;
}

.waku0-img {
	background-image:url(../img/b01.png),url(../img/b02.png),url(../img/b03.png),url(../img/b04.png),url(../img/b05.png),url(../img/b06.png),url(../img/b07.png),url(../img/b08.png),url(../img/b09.png);
	background-repeat:no-repeat;
	background-position:0px top,150px top,300px top,900px top,1000px top,1200px top,0px bottom,500px bottom,1150px bottom;
	background-size: 115px auto,102px auto,116px auto,111px auto,195px auto,119px auto,119px auto,244px auto,119px auto;
	width: 1300px;
	height: 900px;
}

/* コメント 　 */
#box-comt {
	margin: 0 auto;
	width: 1200px;
	height: auto;
	background-image: url(../img/comt-m.png);
	background-repeat:repeat-y;
}

.box-comt-img {
	margin: 0 auto;
	width: 1200px;
	height: auto;
	background-image: url(../img/a14.png), url(../img/a-16.png), url(../img/a15.png);
	background-repeat: no-repeat;
	background-position:10% bottom, 50% bottom, 90% bottom;
	background-size: 80px auto,130px auto,80px auto;
}

/*コメント内容*/
#box-comt p {
	text-align:center;
}

.comt-t {
	margin: 0 auto;
	background-image:url(../img/comt-t.png);
	background-repeat: no-repeat;
	background-position:top;
	width: 1200px;
	height: 120px;
}

.comt-b {
	margin: 0 auto;
	background-image: url(../img/comt-b.png);
	background-repeat: no-repeat;
	background-position:bottom;
	width: 1200px;
	height: 80px;
}

/* イラスト(フェルマータについて)
-----------------------------------------*/

.hb {
	background-image:url(../img/humburg.png);
	background-repeat:no-repeat;
	background-size:contain;
	position: relative;
	width:500px;
	height: 368px;
	top:0;
	left:90px;
	z-index:20;
}

.hc {
	background-image:url(../img/hotcake.png);
	background-repeat:no-repeat;
	background-size:contain;
	position: relative;
	width:500px;
	height: 342px;
	top:-400px;
	left:700px;
	z-index:21;
}


/* メニュー
-----------------------------------------*/

#waku1 {
	margin: 0 auto 0 auto;
	padding-top:0px;
	width: 1300px;
	height: auto;
}

#waku1-img {
	margin: 0 auto 0 auto;
	background-image: url(../img/top-l.png), url(../img/top-r.png), url(../img/btm-l.png), url(../img/btm-m.png), url(../img/btm-r.png);
	background-repeat:no-repeat;
	background-position: left top, right top, left bottom, center bottom, right bottom;
	background-size: 340px auto,340px auto,340px auto,520px auto,340px auto;
	width: 1200px;
	height: auto;
}

#waku2-img {
	margin: 0 auto 0 auto;
	background-image: url(../img/t-line2.png), url(../img/t-line2.png);
	background-repeat:no-repeat;
	background-position: left bottom, right bottom;
	background-size: 340px auto,340px auto;
	width: 1200px;
	height: auto;
}

#menu-box03 {
	margin:0;
	padding:0;
	width:400px;
	float:left;
}

#menu-box03 img {
	margin: 0;
	padding: 0;
	vertical-align:bottom;
	max-width:400px;
	height:350px;
}

.loupe {
	background-image:url(../img/loupe.png);
	background-repeat:no-repeat;
	background-size: 60px auto;
	background-position:right bottom;
}

.closed-btn {
	background-image:url(../../shared/img/common/close.png);
	background-repeat:no-repeat;
	background-size:33px auto;
	background-position:right top;
}

.drop-bg-line {
	background-image:url(../img/bg-line1.png),url(../img/bg-line1.png);
	background-repeat: no-repeat;
	background-position: left bottom, right bottom;
	background-size: 450px auto,450px auto;
	width: 1200px;
	height: auto;
}

.drop-bg-line img {
	margin: 0 auto;
	width:297px;
	position: relative;
	left: 38%;
}

#m-btm {
	background-image: url(../img/m-btm.png);
	background-repeat: repeat-x;
	background-position:bottom;
	padding-bottom: 160px;
	z-index:2;
}

.men-img {
	width:100%;
	max-width:800px;
	max-height:700px;
}


/*　店舗情報
-----------------------------------------*/

.info-shop {
  width: 1300px;
  margin:0 auto;
}


#box01 {
	max-width:650px;
	width:50%;
	float:left;
}

#box02 {
	max-width:650px;
	width:50%;
	float:left;
}


#box-gmap {
	width:650px;
	float:left;
	padding:20px 0px;
}

#box-add {
	width:650px;
	padding: 0px  0px 0%;
	float:left;
}

#k1 {
	width:650px;
	height:410px;
	margin: 0 auto;
}

.k1-img {
	background-image:url(../img/k1.png);
	background-repeat:no-repeat;
	background-size:contain;
}

#k2 {
	width:650px;
	height:220px;
	margin: 0 auto;
}

.k2-img {
	background-image:url(../img/k2.png);
	background-repeat:no-repeat;
	background-size:contain;
}

#k1 h3 {
	padding: 80px 0 0 0;
	text-align:center;
	width:100%;
}

#k1 p {
	padding: 20px 0 20px 0;
	text-align:center;
	width:100%;
}

#k2 p {
	padding: 80px 0 20px 0;
	text-align:center;
	width:100%;
}

#k3 {
	width:1200px;
	height:220px;
	margin: 0 auto;
}

.k3-img {
	background-image:url(../img/k3.png);
	background-repeat:no-repeat;
	background-size: contain;
	background-position: center top;
}

#k3 p {
	padding: 100px 0 20px 0;
	text-align:center;
	width:100%;
	font-size:21px;
}
/* ボタン赤(幅250px)TOPアドレス
-----------------------------------------*/
.btn-red01add {
    width:250px;
    height:40px;
    line-height:30px;
}
.btn-red01add a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#8f0000;
    text-align:center;
    border:5px solid #8f0000;
    color:#FFFFFF;
    font-size:24px;
    border-radius:35px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
    transition: all 0.5s ease;
    transition: all 0.5s ease;
	background-image: url(../img/arrow1.png);
	background-repeat: no-repeat;
	background-position: right center;
}
.btn-red01add a:hover{
    background:#FFFFFF;
    color:#8f0000;
    margin-left:0px;
    margin-top:0px;
    border:5px solid #8f0000;
    box-shadow:none;
}

/* ボタン青(幅250px)TOPアドレス
-----------------------------------------*/
.btn-blue01add {
    width:250px;
    height:40px;
    line-height:30px;
}
.btn-blue01add a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#0086D1;
    text-align:center;
    border:5px solid #0086D1;
    color:#FFFFFF;
    font-size:24px;
    border-radius:35px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
    transition: all 0.5s ease;
    transition: all 0.5s ease;
	background-image: url(../img/arrow1.png);
	background-repeat: no-repeat;
	background-position: right center;
}
.btn-blue01add a:hover{
    background:#FFFFFF;
    color:#8f0000;
    margin-left:0px;
    margin-top:0px;
    border:5px solid #0086D1;
    box-shadow:none;
}

/* ボタン茶色(幅350px)TOPアドレス
-----------------------------------------*/
.btn-brown01add {
    width:400px;
    height:50px;
    line-height:40px;
}
.btn-brown01add a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background: #3B2B16;
    text-align:center;
    border:5px solid #32291B;
    color:#FFFFFF;
    font-size:18px;
    border-radius:35px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
    transition: all 0.5s ease;
    transition: all 0.5s ease;
	background-image: url(../img/arrow1.png);
	background-repeat: no-repeat;
	background-position: right center;
}
.btn-brown01add a:hover{
    background:#FFFFFF;
    color:#3B2B16;
    margin-left:0px;
    margin-top:0px;
    border:5px solid #32291B;
    box-shadow:none;
}

/*　Googleマップ トップページ
-----------------------------------------*/
.ggmap {
position: relative;
/*padding-bottom: 56.25%;*/
padding-bottom: 100%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*　SNS
-----------------------------------------*/

ul#sns-icon  {
	margin: 0 auto;
	padding: 5px 0;
	width:500px;
}

#sns-icon li {
	margin: 0 5px;
	padding: 0;
	width: auto;
	height: 30px;
	float:left;
}

#sns-icon li img {
	margin: 0;
	padding: 0;
	width: auto;
	height: 30px;
}


/*　SNS
-----------------------------------------*/
#waku-s {
	width:100%;
	float:left;
}

ul.sns {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	width: 250px;
}

.sns li {
    margin: 10px 3px;
    padding: 0;
    width: 35px;
    height: 35px;
    float: left;
}

/* ページトップボタン(固定)
-----------------------------------------*/
#fixedTop {
    padding: 10px 15px;
    right: 20px;
    bottom: 80px;
    color: #fff;
    text-align: center;
    display: none;
    background:#8f0000;
    position: fixed;
    border-radius: 10px;
    opacity: 0.8;
	box-shadow:3px 3px 3px rgba(0,0,0,.5);
    z-index: 5;
}


/*------------↓ここからウィンドウ幅が770〜1300pxの場合に適用するCSS---------------*/
@media screen and (max-width: 1300px) {
	


/*  スライド画像
-----------------------------------------*/
.f-slide {
  /*height: 100%;*/ /* 高さを画面いっぱいに指定する。(vhが効かない場合の対策)*/
  /*height: 1000px;*/
  height: auto;
  /*height: 100vh;  高さを画面いっぱいに指定する。*/
  position: relative;  /*横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/
  width: 100%; /* 横幅もいっぱいに。*/
}

.f-slide img {
  /*width:auto;*/
  width:100%;
  /*width: 100vw;*/
  height: auto;
  /*height: 100vh;*/
  min-height: auto;
}



/* ドット
-----------------------------------------*/
.dot {
	width:100%;
	height:100%;
	/*height: 915px;*/
	height: 100vh;
	position:absolute;
	z-index:2;
}
	
#waku0 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

/*　タイトル
-----------------------------------------*/

#fe-subt01,#fe-subt02,#fe-subt03 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-size:contain;
	width:520px;
	height:80px;
}

#fe-sbt01 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-position:center bottom;
	background-size:contain;
	width:90%;
	height:70px;
}

/* フェルマータについて
-----------------------------------------*/

#waku0 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

.waku0-img {
	background-position:0% top,10% top,20% top,78% top,90% top,100% top,0% bottom,50% bottom,100% bottom;
	background-size: 95px auto,82px auto,96px auto,91px auto,155px auto,99px auto,99px auto,224px auto,99px auto;
	width: 100%;
	height: 800px;
}

/* コメント 　 */
#box-comt {
	margin: 0 auto;
	/*width:92.31%;*/
	height: auto;
}

.box-comt-img {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

.comt-t {
	margin: 0 auto;
	width: 92.31%;
	height: 120px;
}

.comt-b {
	margin: 0 auto;
	width: 92.31%;
	height: 80px;
}

/* イラスト(フェルマータについて)
-----------------------------------------*/

.ab {
	background-size:contain;
	position: absolute;
	width:38.46%;
	height: 100%;
	top:15vh;
	left:10vw;
	z-index:20;
}

.ac {
	background-size:contain;
	position: absolute;
	width:38.46%;
	height: 100%;
	top:60vh;
	left:60vw;
	z-index:21;
}

/* イラスト(フェルマータについて)
-----------------------------------------*/

.hb {
	background-size:contain;
	position: relative;
	width:38.46%;
	height: 100%;
	top:0;
	left:5%;
	z-index:20;
}

.hc {
	background-size:contain;
	position: relative;
	width:38.46%;
	height: 100%;
	top:-800px;
	left:55%;
	z-index:21;
}
	


/*　店舗情報
-----------------------------------------*/
#box-gmap {
	width:33%;
	float:left;
}

#box-add {
	width:65%;
	padding: 30px 0 20px 1%;
	float:left;
}

/* メニュー
-----------------------------------------*/

#waku1 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

#waku1-img {
	background-position: left top, right top, left bottom, center bottom, right bottom;
	background-size: 28.33% auto,28.33% auto,28.33% auto,43.33% auto,28.33% auto;
	width: 92.31%;
	height: auto;
}

#waku2-img {
	background-position: left bottom, right bottom;
	background-size: 28.33% auto,28.33% auto;
	width: 92.31%;
	height: auto;
}

#menu-box03 {
	margin:0;
	padding:0;
	width:33.33%;
	float:left;
}

#menu-box03 img {
	margin: 0;
	padding: 0;
	vertical-align:bottom;
	max-width:100%;
	height: auto;
}

.drop-bg-line {
	background-position: left bottom, right bottom;
	background-size: 37.5% auto,37.5% auto;
	width: 100%;
	height: auto;
}

.drop-bg-line img {
	margin: 0 auto;
	width:297px;
	position: relative;
	left: 36%;
}

#m-btm {
	background-position:bottom;
	padding-bottom: 160px;
	z-index:2;
}


/*　店舗情報
-----------------------------------------*/

.info-shop {
  width: 100%;
  margin:0 auto;
}


#box-gmap {
	width:45%;
	float:left;
	padding:20px 0px 20px 20px;
}

#box-add {
	width:55%;
	padding: 0px 0% 0px 0%;
	float:left;
}

#k1 {
	width:100%;
	height:410px;
	margin: 0 auto;
}

#k2 {
	width:100%;
	height:210px;
	margin: 0 auto;
}

#k1 h3 {
	padding: 60px 0 0 0;
	text-align:center;
	width:100%;
}

#k1 p {
	padding: 20px 0 20px 0;
	text-align:center;
	width:100%;
}

#k2 p {
	padding: 60px 0 20px 0;
	text-align:center;
	width:100%;
}

.k1-img,.k2-img,.k3-img {
	background-size:contain;
	background-position:center;
}

#k3 {
	width:100%;
	height:220px;
	margin: 0 auto;
}

#k3 p {
	padding: 100px 0 20px 0;
	text-align:center;
	width:100%;
	font-size:21px;
}

.k3-img {
	background-size:contain;
	background-position:700px auto;
}

/*　Googleマップ トップページ
-----------------------------------------*/
.ggmap {
position: relative;
/*padding-bottom: 56.25%;*/
padding-bottom: 100%;
padding-top: 0px;
height: 0;
overflow: hidden;
}

/*　フッター
-----------------------------------------*/


ul.sns {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	width: 250px;
}
	
.sns li {
        margin: 10px 3px;
        padding: 0;
        width: 35px;
        height: 35px;
        float: left;
    }

}


/*------------↓ここからウィンドウ幅が901〜1100pxの場合に適用するCSS---------------*/
@media screen and (max-width: 1200px) {
	
/*　タイトル
-----------------------------------------*/

#title-red,#title-brown,#title-pink {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-size:contain;
	width:43.33%;
	height:100px;
}
	
/* フェルマータについて
-----------------------------------------*/

/* コメント 　 */
#box-comt {
	margin: 0 auto;
	padding: 0 10%;
	width:100%;/**/
	height: auto;
	background-size: 100% auto;
}

/*コメント内容*/
#box-comt p {
	text-align:center;
}

.comt-t {
	margin: 0 auto;
	width: 100%;
	height: 100px;
	background-size: 100% auto;
}

.comt-b {
	margin: 0 auto;
	width: 100%;
	height: 80px;
	background-size: 100% auto;
}

}
/*------------↓ここからウィンドウ幅が901〜1100pxの場合に適用するCSS---------------*/
@media screen and (max-width: 1100px) {

	
	
	
.waku0-img {
	background-position:0% top,10% top,20% top,78% top,90% top,100% top,0% bottom,50% bottom,100% bottom;
	background-size: 75px auto,62px auto,76px auto,71px auto,135px auto,79px auto,79px auto,204px auto,79px auto;
	width: 100%;
	height: 800px;
}


/* ドット
-----------------------------------------*/
.dot {
	width:100%;
	height:100%;
	/*height: 770px;*/
	height: 100vh;
	position:absolute;
	z-index:2;
}


/* トップ画像
-----------------------------------------*/
#fermata-logo {
	background-size: contain;
	width:30%;
	height:210px;
	position:absolute;
	top:0px;
	left:35%;
	z-index:70;
}

.a01,.a02,.a03,.a04,.a06,.a07,.a08,.a09,.a10,.a11,.a12,.a13,.a13,.break {
	background-size:80%;
}

.a05,.a03 {
	visibility:hidden;
}


/* メニュー
-----------------------------------------*/

#waku1 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

#waku1-img {
	background-position: left top, right top, left bottom, center bottom, right bottom;
	background-size: 28.33% auto,28.33% auto,28.33% auto,43.33% auto,28.33% auto;
	width: 92.31%;
	height: auto;
}

#waku2-img {
	background-position: left bottom, right bottom;
	background-size: 28.33% auto,28.33% auto;
	width: 92.31%;
	height: auto;
}

#menu-box03 {
	margin:0;
	padding:0;
	width:33.33%;
	float:left;
}

#menu-box03 img {
	margin: 0;
	padding: 0;
	vertical-align:bottom;
	max-width:100%;
	height: auto;
}

.drop-bg-line {
	background-position: left bottom, right bottom;
	background-size: 37.5% auto,37.5% auto;
	width: 100%;
	height: auto;
}

.drop-bg-line img {
	margin: 0 auto;
	width:27%;
	position: relative;
	left: 36%;
}

#m-btm {
	background-position:bottom;
	padding-bottom: 160px;
	z-index:2;
}



/* フレックスボックス
-----------------------------------------*/
/* 上から下に配置 */
#flexbox {
  display: flex;
  flex-direction: column;
}

/*　店舗情報
-----------------------------------------*/

.info-shop {
  width: 100%;
  margin:0 auto;
}

#k1 {
	width:100%;
	height:250px;
	margin: 0 auto;
}

#k2 {
	width:100%;
	height:210px;
	margin: 0 auto;
}

#k1 h3 {
	padding: 60px 0 0 0;
	text-align:center;
	width:100%;
}

#k1 p {
	padding: 20px 0 20px 0;
	text-align:center;
	width:100%;
}

#k2 p {
	padding: 60px 0 20px 0;
	text-align:center;
	width:100%;
}

#k3 {
	width:100%;
	height:220px;
	margin: 0 auto;
}

#k3 p {
	padding: 100px 0 20px 0;
	text-align:center;
	width:100%;
	font-size:21px;
}


/*　Googleマップ トップページ
-----------------------------------------*/
#box-gmap {
	width:90%;
	float:left;
	margin:0 5%;
	order: 2;
}

#box-add {
	width:90%;
	margin:0 5%;
	float:left;
	order: 1;
}

/* フェルマータについて
-----------------------------------------*/

/* コメント 　 */
#box-comt {
	margin: 0 auto;
	padding: 0 10%;
	width:100%;/**/
	height: auto;
	background-size: 100% auto;
}

/*コメント内容*/
#box-comt p {
	text-align:center;
}

.comt-t {
	margin: 0 auto;
	width: 100%;
	height: 90px;
	background-size: 100% auto;
}

.comt-b {
	margin: 0 auto;
	width: 100%;
	height: 70px;
	background-size: 100% auto;
}
/* イラスト(フェルマータについて)
-----------------------------------------*/

.hb {
	background-size:contain;
	position: relative;
	width:38.46%;
	height: 100%;
	top:0;
	left:5%;
	z-index:20;
}

.hc {
	background-size:contain;
	position: relative;
	width:38.46%;
	height: 100%;
	top:-800px;
	left:55%;
	z-index:21;
}
/*　BOX
-----------------------------------------*/
#box01 {
	width:50%;
	float:left;
}

#box02 {
	width:50%;
	float:left;
}

#box01 img {
	width:100%;
}
}

/*------------↓ここからウィンドウ幅が770〜1024pxの場合に適用するCSS---------------*/
@media screen and (max-width: 1024px) {




}


/*------------↓ここからウィンドウ幅が771〜900pxの場合に適用するCSS---------------*/
@media screen and (max-width:900px) {
	/* スクロールダウン
-----------------------------------------*/
.scrolldown a {
  top:75%;
  left: 50%;
}	


}

/*------------↓ここからウィンドウ幅が580〜830pxの場合に適用するCSS---------------*/
@media screen and (max-width:830px) {
ul.sns {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
}

.sns li {
        margin: 20px 3px;
        padding: 0;
        width: 35px;
        height: 35px;
        float: left;
    }
}

/*------------↓ここからウィンドウ幅が580〜770pxの場合に適用するCSS---------------*/

	
@media screen and (max-width:770px) {
.order1 {
	order: 1;
}
.order2 {
	order: 2;
}
	
/* 背景イメージ
-----------------------------------------*/
.b-btm {
	background-position:bottom;
	padding-bottom: 120px;
	z-index:2;
}

/* タイトル
-----------------------------------------*/
#title-red,#title-brown,#title-pink {
	margin: 0 auto;
	padding: 10px 0 0 0;
	background-size:contain;
	width:43.33%;
	height:60px;
}

/* 食べ物写真
-----------------------------------------*/

.ab {
	background-size:contain;
	position: absolute;
	width:38.46%;
	height: 100%;
	top:15vh;
	left:10vw;
	z-index:20;
}

.ac {
	background-size:contain;
	position: absolute;
	width:38.46%;
	height: 100%;
	top:70vh;
	left:60vw;
	z-index:21;
}

/* フェルマータについて
-----------------------------------------*/
#waku0 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

.waku0-img {
	background-position:0% top,10% top,20% top,78% top,90% top,100% top,0% bottom,50% bottom,100% bottom;
	background-size: 65px auto,52px auto,66px auto,61px auto,105px auto,69px auto,69px auto,154px auto,69px auto;
	width: 100%;
	height: 600px;
}
/* コメント 　 */
#box-comt {
	margin: 0 auto;
	/*width:92.31%;*/
	height: auto;
}

.comt-t {
	margin: 0 auto;
	/*width: 92.31%;*/
	height: 70px;
}

.comt-b {
	margin: 0 auto;
	/*width: 92.31%;*/
	height: 40px;
}

/* イラスト(フェルマータについて)
-----------------------------------------*/

.hb {
	background-size:contain;
	position: relative;
	width:38.46%;
	height: 100%;
	top:0;
	left:5%;
	z-index:20;
}

.hc {
	background-size:contain;
	position: relative;
	width:38.46%;
	height: 100%;
	top:-600px;
	left:55%;
	z-index:21;
}

/* メニュー
-----------------------------------------*/

#waku1 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

#waku1-img {
	margin: 0 auto 0 auto;
	background-image: url(../img/btm-l.png), url(../img/btm-m.png), url(../img/btm-r.png);
	background-repeat:no-repeat;
	background-position:left bottom,center bottom, right bottom;
	background-size:30% auto,40% auto,30% auto;
	width: 100%;
	height: auto;
}

#waku2-img {
	background-position: left bottom, right bottom;
	background-size: 28.33% auto,28.33% auto;
	width: 92.31%;
	height: auto;
}

#menu-box03 {
	margin:0;
	padding:0;
	width:50%;
	height:500px;
	float:left;
}

#menu-box03 img {
	margin: 0;
	padding: 0;
	vertical-align:bottom;
	max-width:100%;
	height: auto;
}

.drop-bg-line {
	background-position: left bottom, right bottom;
	background-size: 37.5% auto,37.5% auto;
	width: 100%;
	height: auto;
}

.drop-bg-line img {
	margin: 0 auto;
	width:27%;
	position: relative;
	left: 36%;
}

#m-btm {
	background-position:bottom;
	padding-bottom: 160px;
	z-index:2;
}

/*　店舗情報
-----------------------------------------*/

#k1 h3 {
	padding: 60px 0 0 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k1 p {
	padding: 20px 0 20px 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k2 p {
	padding: 60px 0 20px 0;
	text-align:center;
	width:100%;
	font-size:100%;
}
#k3 p {
	padding: 100px 0 20px 0;
	text-align:center;
	width:100%;
	font-size:3vw;
}

/*　Googleマップ トップページ
-----------------------------------------*/
.ggmap {
position: relative;
padding-bottom: 70%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

}


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


	
}

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


	
}

/*------------↓ここからウィンドウ幅が0〜580pxの場合に適用するCSS---------------*/
@media screen and (max-width:580px) {
/*  スライド画像
-----------------------------------------*/
.f-slide {
  /*height: 100%;*/ /* 高さを画面いっぱいに指定する。(vhが効かない場合の対策)*/
  /*height: 500px;*/
  height: auto;
  /*height: 100vh;  高さを画面いっぱいに指定する。*/
  position: relative;  /*横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/
  width: 100%; /* 横幅もいっぱいに。*/
}

.f-slide img {
  /*width:auto;*/
  width:100%;
  /*width: 100vw;*/
  height: auto;
  /*height: 100vh;*/
  min-height: auto;
}


/* タイトル
-----------------------------------------*/
#title-red,#title-brown,#title-pink {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-size:contain;
	width:70%;
	height:80px;
}

#fe-subt01,#fe-subt02,#fe-subt03 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-size:contain;
	width:100%;
	height:80px;
}
/* トップ画像
-----------------------------------------*/
#fermata-logo {
	background-size: contain;
	width:40%;
	height:210px;
	position:absolute;
	top:0px;
	left:30%;
	z-index:70;
}

.a01,.a06 {
	background-size:50%;
	top:20vh;
}

.a07 {
	background-size:50%;
	top:50vh;
}

.a09,.a12,.a13 {
	background-size:50%;
	top:90vh;
}

.break {
	background-size:50%;
	top:40vh;
}

.a02,.a03,.a04,.a05,.a08,.a10,.a11 {
	visibility:hidden;
}

.h-btm {
	background-size:contain;
	position:absolute;
	width:100%;
	height: 200px;
	bottom:0;
	left:0;
	z-index:3;
}

/* 食べ物写真
-----------------------------------------*/

.ab {
	background-size:contain;
	position: absolute;
	width:50%;
	height: 100%;
	top:15vh;
	left:10vw;
	z-index:20;
}

.ac {
	background-size:contain;
	position: absolute;
	width:50%;
	height: 100%;
	top:75vh;
	left:50vw;
	z-index:21;
}

/* フェルマータについて
-----------------------------------------*/
#waku0 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}


.waku0-img {
	background-image:url(../img/b01.png),url(../img/b04.png),url(../img/b06.png),url(../img/b08.png),url(../img/b09.png);
	background-repeat:no-repeat;
	background-position:0% top,90% top,0% bottom,50% bottom,100% bottom;
	background-size: 65px auto,61px auto,69px auto,154px auto,69px auto;
	width: 100%;
	height: 600px;
}

/* コメント 　 */
#box-comt {
	margin: 0 auto;
	/*width:92.31%;*/
	height: auto;
}

.box-comt-img {
	background-position:10% bottom, 50% bottom, 90% bottom;
	background-size: 60px auto,100px auto,60px auto;
}
/*コメント内容*/
#box-comt p {
	text-align:center;
	font-size:13px;
}

.comt-t {
	margin: 0 auto;
	/*width: 92.31%;*/
	height: 50px;
}

.comt-b {
	margin: 0 auto;
	/*width: 92.31%;*/
	height: 30px;
}

/* メニュー
-----------------------------------------*/

#waku1 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}

#waku1-img {
	margin: 0 auto 0 auto;
	background-image: url(../img/btm-l.png), url(../img/btm-m.png), url(../img/btm-r.png);
	background-repeat:no-repeat;
	background-position:left bottom,center bottom, right bottom;
	background-size:30% auto,40% auto,30% auto;
	width: 100%;
	height: auto;
}

#waku2-img {
	background-image: none;
}

#menu-box03 {
	margin:0;
	padding:0;
	width:50%;
	height:400px;
	float:left;
}

#menu-box03 img {
	margin: 0;
	padding: 0;
	vertical-align:bottom;
	max-width:100%;
	height: auto;
}

.drop-bg-line {
	background-position: left bottom, right bottom;
	background-size: 37.5% auto,37.5% auto;
	width: 100%;
	height: auto;
}

.drop-bg-line img {
	margin: 0 auto;
	width:50%;
	position: relative;
	left: 25%;
}

#m-btm {
	background-position:bottom;
	padding-bottom: 160px;
	z-index:2;
}

/*　店舗情報
-----------------------------------------*/
#k1 {
	padding:0;
	line-height: 1.2em;
	height:150px;
}

#k2 {
	padding:30px 0 0 0;
	line-height: 1.2em;
	height:210px;
}

#k1 h3 {
	padding: 0px 0 0 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k1 p {
	padding: 10px 0 10px 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k2 p {
	padding: 50px 0 10px 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k3 {
	padding:30px 0 0 0;
	line-height: 1.2em;
	height:220px;
}

#k3 p {
	padding: 70px 0 10px 0;
	text-align:center;
	width:100%;
	font-size:3vw;
}

/* ボタン赤(幅250px)TOPアドレス
-----------------------------------------*/
.btn-red01add {
    width:200px;
    height:30px;
    line-height:20px;
}
.btn-red01add a{
    font-size:18px;
}

/* ボタン青(幅250px)TOPアドレス
-----------------------------------------*/
.btn-blue01add {
    width:200px;
    height:30px;
    line-height:20px;
}
.btn-blue01add a{
    font-size:18px;
}
/*　BOX
-----------------------------------------*/
#box01 {
	width:100%;
	margin:0;
	float:left;
}

#box02 {
	width:100%;
	margin:0;
	float:left;
}

}

/*------------↓ここからウィンドウ幅が0〜480pxの場合に適用するCSS---------------*/
@media screen and (max-width:480px) {
	

	
/*  スライド画像
-----------------------------------------*/
.f-slide {
  /*height: 100%;*/ /* 高さを画面いっぱいに指定する。(vhが効かない場合の対策)*/
  height: 500px;/**/
  /*height: 100vh;  高さを画面いっぱいに指定する。*/
  position: relative;  /*横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。*/
  width: 100%; /* 横幅もいっぱいに。*/
  top:0vh;
}

.f-slide img {
  width:auto;
  /*width:100%;*/
  /*width: 100vw;*/
  height: auto;/**/
  /*height: 100vh;*/
  min-height: auto;
}
		/* スクロールダウン
-----------------------------------------*/
.scrolldown a {
  top:75%;
  left: 50%;
}
/* トップ画像
-----------------------------------------*/
#fermata-logo {
	background-size: contain;
	width:55%;
	height:150px;
	position:absolute;
	top:40px;
	left:0%;
	z-index:5;
}
.a01 {
	background-size:50%;
	top:20vh;
}

.a07 {
	background-size:50%;
	top:60vh;
}

.a09,.a12,.a13 {
	background-size:50%;
	top:90vh;
}

.a02,.a03,.a04,.a05,.a06,.a08,.a10,.a11,.break {
	visibility:hidden;
}

.h-btm {
	background-size:contain;
	position:absolute;
	width:100%;
	height: 200px;
	bottom:0;
	left:0;
	z-index:3;
}

/* 食べ物写真
-----------------------------------------*/

.ab {
	background-size:contain;
	position: absolute;
	width:50%;
	height: 100%;
	top:20vh;
	left:10vw;
	z-index:20;
}

.ac {
	background-size:contain;
	position: absolute;
	width:50%;
	height: 100%;
	top:75vh;
	left:50vw;
	z-index:21;
}

/* タイトル
-----------------------------------------*/
#title-red,#title-brown,#title-pink {
	margin: 0 auto;
	padding: 10px 0 0 0;
	background-size:contain;
	width:100%;
	height:60px;
}

#fe-subt01,#fe-subt02,#fe-subt03 {
	margin: 0 auto;
	padding: 15px 0 0 0;
	background-position:center bottom, left top;
	background-size:contain;
	width:100%;
	height:60px;
}


/* フェルマータについて
-----------------------------------------*/
#waku0 {
	margin: 0 auto;
	padding-top:0px;
	width: 100%;
	height: auto;
}


.waku0-img {
	background-image:url(../img/b06.png),url(../img/b08.png),url(../img/b09.png);
	background-repeat:no-repeat;
	background-position:0% bottom,50% bottom,100% bottom;
	background-size: 49px auto,124px auto,49px auto;
	width: 100%;
	height: 600px;
}
/* コメント 　 */
#box-comt {
	margin: 0 auto;
	/*width:92.31%;*/
	height: auto;
}

.comt-t {
	margin: 0 auto;
	/*width: 92.31%;*/
	height: 40px;
}

.comt-b {
	margin: 0 auto;
	/*width: 92.31%;*/
	height: 30px;
}

/* イラスト(フェルマータについて)
-----------------------------------------*/

.hb {
	background-size:contain;
	position: relative;
	width:45%;
	height: 100%;
	top:0;
	left:5%;
	z-index:20;
}

.hc {
	background-size:contain;
	position: relative;
	width:45%;
	height: 100%;
	top:-600px;
	left:55%;
	z-index:21;
}

/* メニュー
-----------------------------------------*/


#menu-box03 {
	margin:0;
	padding:0;
	width:100%;
	height: auto;
	float:left;
}

.drop-bg-line {
	background-position: left bottom, right bottom;
	background-size: 37.5% auto,37.5% auto;
	width: 100%;
	height: auto;
}

#m-btm {
	background-position:bottom;
	padding-bottom: 160px;
	z-index:2;
}



/*------------↓ここからウィンドウ幅が0〜360pxの場合に適用するCSS---------------*/
@media screen and (max-width:360px) {
/* 食べ物写真
-----------------------------------------*/

.ab {
	background-size:contain;
	position: absolute;
	width:70%;
	height: 100%;
	top:20vh;
	left:10vw;
	z-index:20;
}

.ac {
	background-size:contain;
	position: absolute;
	width:70%;
	height: 100%;
	top:70vh;
	left:30vw;
	z-index:21;
}

/*　店舗情報
-----------------------------------------*/
#k1 {
	padding:50px 0 0 0;
	line-height: 1.0em;
	height:250px;
}

#k2 {
	padding:70px 0 0 0;
	line-height: 1.0em;
	height:220px;
}
.k1-img,.k2-img,.k3-img {
	background-size: cover;
	background-position:center;
}

#k1 h3 {
	padding: 0px 0 0 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k1 p {
	padding: 10px 0 10px 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k2 p {
	padding: 0px 0 10px 0;
	text-align:center;
	width:100%;
	font-size:100%;
}

#k3 {
	padding:100px 0 0 0;
	line-height: 1.0em;
	height:220px;
}

#k3 p {
	padding: 0px 0 10px 0;
	text-align:center;
	width:100%;
	line-height: 24px;
	font-size:18px;
}

}