@charset "utf-8";
/* CSS Document */
*{
	margin: 0 ;
	padding: 0 ;
}
body{margin: 0;}
body{
    font-family: "Kiwi Maru";
	background: #FFF9EE;
	color: #762F07;
}
/*バーガーメニューここから*/
ul{
    padding: 0;
    margin: 0;
}

li{list-style: none;}

a{
    color: #762F07;
    text-decoration: none;
}

h1{margin: 0;}
/* ここまでブラウザの初期値をリセット */
.header{
    position: fixed;
    width: 100%;
}

.header-inner{
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.menu-wrapper{
    position: relative;
}

.btn{
    width: 100%;
    display: block;      
    width: 39px;      
    height: 39px;      
    position: absolute;
    right: 0;
   z-index: 999/*;追記：いつも一番上*/
}
  
.bar{      
    width: 20px;      
    height: 1px;        
    display: block;      
    position: absolute;      
    left: 50%;      
    transform: translateX(-50%);      
    background-color: #762F07;    
}
  
.bar-top{ top: 10px;}
.bar-middle{    
    top: 50%;
    transform: translate(-50%,-50%);
}
.bar-bottom{ bottom: 10px;}

.btn.close .bar-top{      
    transform: translate(-50%,10px) rotate(45deg);      
    transition: transform .3s;    
}  

.btn.close .bar-middle{      
    opacity: 0;       
    transition: opacity .3s;    
}    

.btn.close .bar-bottom{      
    transform: translate(-50%,-8px) rotate(-45deg);      
    transition: transform .3s;    
}

.menu-lists{
    display: none;
    background-color: #F1E5D7;
    width: 100vw;
    height: 100vh;
    position: fixed;
   font-size: 32px;
    top: 0;
    left: 0;
    padding-top: 50px;
   /* padding-bottom: 50px;*/
    text-align: center;
}

.main{
    padding-top: 80px;/*追記*/
}
/*.main a:hover{
  opacity: 0.7;
}
.menu-lists:hover {
  background-color: #e0e0e0;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}*/
/*バーガーメニューここまで*/
/*ヘッダーここから*/

h2{
	display: flex;
	text-align: center; 
}
h2 img{
	height: 100%;
	width:100%;
}

/*ヘッダーココまで*/
/*メインここから*/

h3{
	text-align: center;
	font-size: 60px;
	margin-top: 100px;
	margin-bottom: 50px;
	text-decoration: underline;
}
h4{
	font-size: 36px;
	margin-top: 50px;
	margin-bottom: 125px;
	margin-left: 40px;
	margin-right: 40px;
}
/*メインここまで*/
/*ボタンここから*/

.bn {
  display: inline-block;
  width: 150px;
  height: 50px;
  font-size: 20px;
  font-family: "Kiwi Maru";
  background: #FFF9EE;
  border-radius: 115px;
  line-height: 50px;
  padding-left: 1em;
  position: relative;
}

.bn-7::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 90%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #762F07;
}
.b{
 font-family: "Kiwi Maru";
  text-align: center;
}
.b li{
  display: inline-block;
	margin-bottom: 50px;
}
.b a{
  font-family: "Kiwi Maru";
  display: block;
  padding: 10px 20px;
}
.b a:hover{
  opacity: 0.7;
}

/*ボタンここまで*/
.navi{
  font-size: 34px;
  color:#762F07;
 font-family: "Kiwi Maru";
  text-align: center;
  margin-top: 50px;
}
.navi li{
	font-family: "Kiwi Maru";
  display: inline-block;
	/*margin-bottom: 50px;*/
}
.navi a{
  display: block;
  padding: 10px 20px;
}
.navi a:hover{
  opacity: 0.7;
}
#adr{
	background: #F1E5D7;
}
/*お店の説明ここから*/
/* 全体の設定 */
.container {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 縦方向も中央に揃える */
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    max-width: 1200px; /* 最大幅を指定して真ん中に配置 */
    width: 100%; /* 幅を100%にする */
    margin: 0 auto; /* 中央揃え */
}

/* 交互に画像と文章を並べるために、偶数番目のコンテナに逆方向を指定 */
.container:nth-child(even) {
    flex-direction: row-reverse;
}

/* 画像の設定 */
.image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* テキストエリアの設定 */
.text {
    font-size: 28px;
    flex: 1; /* テキスト部分が残りのスペースを占有 */
    text-align: left;
}

/* 画面が狭いときのレスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 縦並びでも中央に揃える */
    }

    .container:nth-child(even) {
        flex-direction: column; /* 狭い画面でも通常に戻す */
    }

    .image, .text {
        width: 100%;
    }

    .text {
        text-align: center; /* 画面が狭いときはテキストも中央に */
    }
}

.box:nth-child(even) {
  flex-direction: row-reverse;
}
/* 画面が狭いときのレスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 縦並びでも中央に揃える */
    }

    .image, .text {
        width: 100%;
    }

    .text {
        text-align: center; /* 画面が狭いときはテキストも中央に */
    }
}

/*お店の説明ここまで*/
/*お知らせ欄*/

/*上へボタンここから*/
#top{
	width: 60px;
	height: 61px;
	position: fixed;
	bottom: 10px;
	right: 20px;
}
/*上へボタンここまで*/
/*メニュートップページここから*/
.menutop{
  text-align: center;
}
.menutop li{
  display: inline-block;
	margin-bottom: 50px;
}
.menutop a{
  display: block;
  padding: 10px 20px;
}
.menutop a:hover{
  opacity: 0.7;
}
/*メニュートップページここまで*/
/*メニューページここから*/
.menu{
  text-align: center;
}
.menu li{
  display: inline-block;
	margin-bottom: 50px;
}
.menu a{
  display: block;
  padding: 10px 50px;
}
.menu a:hover{
  opacity: 0.7;
}


/*メニューページここまで*/

/*フッターここから*/
footer{
	background:#F1E7D8;
	font-size: 15px;
	height: 220px;
	color:#762F07;
	text-align: center;
}
footer a{
	font-size: 16px;
	color: #000;
	text-decoration: none;
}
.copy{
	font-size: 15.5px;
	text-align: center;
}
h5{
	margin-bottom: 20px;
	font-size: 16px
}
small{
	font-size: 16px;
}
.sns{
  text-align: center;
}
.sns li{
  display: inline-block;
	margin-bottom: 50px;
}
.sns a{
  display: block;
  padding: 10px 20px;
}
.sns a:hover{
  opacity: 0.7;
}
/*フッターここまで*/
#wagashi{
	margin-top: 100px;
	background: #F1E7D8;
}
#bread{
	margin-top: 100px;
	background: #F1E7D8;
}
#about{
	margin-top: 100px;
	background: #F1E7D8;
}
#menu{
	margin-top: 100px;
	background: #F1E7D8;
}
#amap{
	margin-top: 100px;
	background: #F1E7D8;
	margin-bottom: 100px
}
#kare{
	margin-top: 100px;
	background: #F1E7D8;

}
h6{
	font-size: 36px;
	margin: 0 25px 0 25px;
}

.flex {
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: center; /* 縦方向で中央揃え */
    margin-bottom: 100px;
}

.g-map {
    width: 100%;
    max-width: 1000px; /* 最大幅を指定 */
    position: relative;
    padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
}

.g-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*ボタンここから*/

.abc {
  display: inline-block;
  width: 150px;
  height: 50px;
  font-size: 20px;
font-family: "Kiwi Maru";
  background: #F1E5D7; /* 背景色を青に変更 */
  border-radius: 115px;
  line-height: 50px;
  padding-left: 1em;
  position: relative;
}

.abc-7::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 90%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #762F07;
}
.ab{
font-family: "Kiwi Maru";
  text-align: center;
}
.ab li{
	font-family: "Kiwi Maru";
  display: inline-block;
	margin-bottom: 50px;
}
.ab a{
	font-family: "Kiwi Maru";
  display: block;
  padding: 10px 20px;
}
.ab a:hover{
  opacity: 0.7;
}

/*ボタンここまで*/

/*アクセス*/
.info {
    font-size: 20px;
    width: 100%;
    max-width: 780px;
    margin: auto;
    /*padding: 0 1.5rem;*/
    border-spacing: 0;
  margin-bottom: 50px;
}

.info th,
.info td {
    border-bottom: 1px solid #762F07;
}
.info th {
    text-align: left;
   /* font-weight: normal;*/
    padding: 1rem;
}
.info td {
    padding: 1rem 0;
}


/* コンテンツを中央に配置 */



.slider {
    width: 100%;
    max-width: 800px; /* 最大幅を800pxに制限 */
    height: 400px; /* 高さを400pxに設定 */
    overflow: hidden;
    margin: 0 auto; /* 中央揃え */
    position: relative;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* JavaScriptで幅を設定 */
}

.slide {
    flex-shrink: 0;
    width: 100%; /* JavaScriptで正確な幅を設定 */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を保ちながらスライダーのサイズに合わせる */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .slider {
        height: 250px; /* モバイル向けの高さを250pxに設定 */
    }

    .slide img {
        height: 100%;
        object-fit: cover;
    }
}