@charset "utf-8";

/* ===== ベース ===== */
body {
  margin: 0;
  font-family: "Kaisei Tokumin", sans-serif;
  background-color: #f8f5f0;
  color: #333;
}
#history, #time {
scroll-margin-top: 100px; 
}
#map{
  scroll-margin-top: 150px;
}

/* =========================================================
   BASE & COMMON STYLES
   ========================================================= */
body {
    margin: 0;
    font-family: "Kaisei Tokumin", sans-serif;
    color: #333;
    line-height: 1.6;
    padding-top: 70px; /* ← ヘッダー高さ分の余白を追加（固定対応） */
}

a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */
header {
    background-color: #3b2b25;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: fixed;   /* ← ヘッダーを固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;     /* ← 他要素より前に表示 */
}

.mokuji {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    z-index: 10;
}

.mokuji .logo a {
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
}

#nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
}
#nav-list a:hover{
  color: #ffd700;
}

#nav-list li a {
    color: white;
    padding: 8px 15px;
    display: block;
}

/* ハンバーガーアイコン/クローズアイコンのスタイル */
#menu-toggle {
    display: none; /* PCでは非表示 */
    font-size: 2rem;
    color: white;
    cursor: pointer;
    z-index: 1001; 
    line-height: 1; 
}

/* オーバーレイのスタイル */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 5;
}

#overlay.active {
    display: block;
}

/* =========================================================
   RESPONSIVE STYLES (Mobile / ~768px)
   ========================================================= */
@media screen and (max-width: 768px) {
    
    /* ハンバーガーボタンの位置を固定 */
    #menu-toggle { 
        display: block;
        position: fixed; /* 画面に対して位置を固定 */
        top: 15px;
        right: 20px;
    } 

    /* ドロワーメニューとして動作するナビゲーション */
    .mokuji ul { display: none; }
    #nav-list {
        display: none;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0; 
        right: -300px;
        width: 180px;
        height: 100%;
        background-color: #3b2b25;
        padding-top: 60px;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        gap: 0;
    }

    #nav-list.active { 
        right: 0; 
        display: flex; 
    }
}

/* ===== ヒーロー・スライドショー ===== */
.slideshow-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide .hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,0.4);
  color: white;
  padding: 1rem 2rem;
  border-radius: 10px;
  text-align: center;
  max-width: 80%;
  font-size: 13px;
}

.fade {
  animation-name: fade;
  animation-duration: 2.5s;
}

@keyframes fade {
  from {opacity: 0.8;}
  to {opacity: 3;}
}


/* ===== お店について ===== */
.about{
  padding: 50px 20px;
  text-align: center;
}

.sp-only {
  display: none;
}


@media  screen and (max-width:575px) {.sp-only{display: block;}}




.about-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.about-item {
  width: 270px;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
a{
  color: black;
}
a:hover{
  color: #ffd700;
}

.about-item img {
  width: 100%;
  border-radius: 5px;
}

.map-container {
  position: relative;
  width: 65%;
  margin: 0 auto;
  padding-bottom: 45%;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 6%;
  left: 0;
  width: 100%;
  height: 90%;
  border: 0;
}

/* ===== メニューセクション ===== */
.menu-hero {
  position: relative;
  height: 65vh;
  overflow: hidden;
}
.menu-hero .hero-img {
  width: 100%;
  height: 75vh;
  object-fit: cover;
  filter: brightness(90%);
}


.menu-hero .hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  padding: 4rem 0.5rem;
  border-radius: 15px;
  color: #fff;
  text-align: center;
}

.menu-hero ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-hero li {
  margin: 1rem 0;
}

.menu-hero a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.menu-hero a:hover {
  color: #ffd700;
}
 
/* ===== アクセス情報 ===== */
.contact-info {
  background: #f3f2ec;
  padding: 40px 20px;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.contact-left, .contt-center, .contact-right {
  flex: 1;
  min-width: 250px;
  margin: 15px;
  text-align: center;
}

.access-link{
  background-color: #3b2b25;
  color: #fff;
  padding: 10px;
  border-radius: 10%;
}

/* ===== ベース ===== */
body {
  margin: 0;
  font-family: "Kaisei Tokumin", sans-serif;
  background-color: #f8f5f0;
  color: #333;
  padding-top: 70px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #ffd700;
}

/* ===== ヘッダー ===== */
header {
  background-color: #3b2b25;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.mokuji {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

.logo a {
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
}

#nav-list {
  display: flex;
  gap: 15px;
  list-style: none;
}

#nav-list li a {
  display: block;
  padding: 8px 15px;
  color: #fff;
}

#nav-list a:hover {
  color: #ffd700;
}

/* ハンバーガーメニュー */
#menu-toggle {
  display: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

#overlay.active {
  display: block;
}

/* ======== PC（1200px〜） ======== */
@media (min-width: 1201px) {
  body {
    font-size: 18px;
  }
}

/* ======== タブレット（768px〜1024px） ======== */
@media (max-width: 1024px) {
  body {
    font-size: 16px;
  }

  .mokuji {
    padding: 10px 15px;
  }

  #nav-list li a {
    padding: 8px 10px;
  }

  .about-container {
    gap: 20px;
  }

  .menu-hero .hero-overlay {
    padding: 2.5rem 1rem;
  }
}



/* ======== スマホ（〜767px） ======== */
@media (max-width: 767px) {

  /* ヘッダー */
  #menu-toggle {
    display: block;
    position: fixed;
    top: 15px;
    right: 20px;
  }

  #nav-list {
    display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: -260px;
    width: 200px;
    height: 100%;
    background-color: #3b2b25;
    padding-top: 80px;
    transition: right 0.3s;
  }

  #nav-list.active {
    right: 0;
    display: flex;
  }

  /* スライドショー */
  .slideshow-container {
    height: 45vh;
  }
  .hero-overlay h1 {
    font-size: 1.4rem;
  }

  /* お店について */
  .about {
    padding: 30px 10px;
  }
  .about-container {
    flex-direction: column;
    align-items: center;
  }
  .about-item {
    width: 90%;
  }

  /* メニューセクション */
  .menu-hero {
    height: 55vh;
  }
  .menu-hero .hero-overlay {
    width: 90%;
    padding: 2rem 1rem;
  }

  /* アクセス */
  .contact-container {
    flex-direction: column;
    text-align: center;
  }

  .contact-sns img {
    width: 120px;
  }

  footer {
    font-size: 0.9rem;
  }
}


/* ===== スライドショー（共通） ===== */
.slideshow-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

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

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 10px;
  text-align: center;
}

.fade {
  animation: fade 2.5s;
}
@keyframes fade {
  from { opacity: 3; }
  to { opacity: 6; }
}

/* ===== お店について ===== */
.about {
  padding: 50px 20px;
  text-align: center;
}

.about-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.about-item {
  width: 270px;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.about-item img {
  width: 100%;
  border-radius: 5px;
}

/* ===== メニュー ===== */
.menu-hero {
  position: relative;
  height: 70vh;
  overflow: hidden;
}

.menu-hero .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(90%);
}

.menu-hero ul {
  list-style: none;
  padding: 0;
}

.menu-hero a {
  color: #fff;
  font-weight: bold;
}

/* ===== アクセス ===== */
.contact-info {
  background: #f3f2ec;
  padding: 40px 20px;
}

.contact-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.access-link {
  background: #3b2b25;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
}


/* ===== フッター ===== */
footer {
  background: #3b2b25;
  color: white;
  text-align: center;
  padding: 20px;
}
.privacy{
  color: #fff;
}

/*--レスポンシブ対応--*/
@media screen and (max-width: 1024px){
  .hero-overlay h1{
    font-size: 40px;
    white-space: nowrap;
  }
}

@media screen and (max-width: 912px){
  .hero-overlay h1{
    font-size: 40px;
    white-space: nowrap;
  }
}

/* =========================================================
   RESPONSIVE STYLES (Mobile / ~768px)トップスライド
   ========================================================= */
@media screen and (max-width: 768px) {

    .slideshow-container { 
        height: 40vh; 
    }
    
    .slide .hero-overlay { 
        padding: 0.5rem 1rem; 
        max-width: 95%; 
    }
    
    .slide .hero-overlay h1 { 
        font-size: 1.5rem; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  }
  
/* さらに小さい画面での調整 */
@media screen and (max-width: 480px){
  .slideshow-container { height: 50vh; }
  .slide .hero-overlay h1 { 
    font-size: 1.2rem; /* 480px以下ではさらに小さく */
  }
  /* ... 既存のドットのスタイルは省略 ... */
}



/*---メニュー---*/
body{
background-color: #f5f5ef;
overflow-x: hidden;
}
.menu{
color:rgba(95, 43, 43, 0.864);
font-size: 50px;
text-align: center;
}
.menu-button {
display: flex;
justify-content:left;
transition: all 0.25s ease;
margin: 0 100px;
gap: 0;
}

/* 【変更点 4-1】aタグにflexのプロパティを適用 */
.menu-button a {
    flex: 1; 
    min-width: 0; 
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

/* 【変更点 4-2】アクティブなスタイルをa.activeの中のbuttonに適用 */
.menu-button a.active button {
 color: #FFFFFF;
 font-weight: bold;
 transform: scale(1.1);
 z-index: 2;
 position: relative; 
 border-radius: 6px 6px 0 0;
}

button{
font-family: 'Kaisei Tokumin', sans-serif;
font-size: 20px;
padding: 10px 20px;
background-color: #f7a25c;
color: #FFFFFF;
border: none;
box-shadow: -5px 0 5px -2px rgba(193, 108, 22, 0.5),5px 0 5px -2px rgba(193, 108, 22, 0.5);
/* flex: 1; min-width: 0; は a タグに移動 */
white-space: nowrap;
text-align: center;
transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
transform: scale(1.0);
transform-origin: center bottom;
width: 100%; /* aタグの幅いっぱいにボタンを広げる */
}

button:hover {
color: #ffd700;
cursor: pointer;
}

/* 【新規追加】固定ヘッダーに隠れないようにジャンプ位置を調整 */
#menu-season, #menu-teiban, #menu-takeout {
    scroll-margin-top: 80px; 
}


.menu-main{
background-color:#fcd9aa;
color: #000000;
padding-top: 15px;
padding-bottom: 50px;
text-align: center;
margin: 0 50px;
border-radius: 10px;
}
.teiban-name,.season-name,.menu-TEL{
 font-size: 50px;
 color: #EA5532;
 margin-bottom: 50px;
 text-align: center;
}

/*--季節限定メニュー--*/
.seasonal img{
  width: 400px;
  height: 230px;
  border-radius: 10px;
}


/*--定番メニュー--*/

.menu-name{
 display: flex;
 justify-content: center;
 align-items: stretch;
 flex-wrap: wrap;
 gap: 150px;
}

.teiban-menu{
  font-size: 23px;
}


.menu-picture img{
 display: block;
 width: 400px;
 height: 260px;
 border-radius: 10px;
}

.menu-infomation { 
 width: 400px;
 text-align: left;
}

.menu-infomation h2 {
 display: flex;
 justify-content: space-between;
 margin: 20px 0;
 gap: 20px;
}

.menu-LAST{
text-align: center;
padding-top: 15px;
}

/*--テイクアウトメニュー--*/
.takeout-name{
font-size: 50px;
}

.udon{
  color: red;
}

.takeout-picture{
  width: 400px;
  height: auto;
  border-radius: 10px;
}


/*--コース内容--*/
.menu-course {
font-size: 20px;
margin: 10% 10%;
text-align: center;
}

/*--レスポンシブ対応--*/
@media screen and (max-width: 1024px) {
  .menu-button {
    margin: 0 70px; 
  }
  .menu-main{
    margin: 0 30px;
  }
  .menu-name{
    gap: 50px;
  }
  .menu-picture img .seasonal img{
    width: 350px; 
    height: 175px;
  }
  .menu-infomation {
    width: 350px;
  }
  .teiban-menu,.menu-price {
    font-size: 21px;
  }
}

@media screen and (max-width: 768px) {
    .menu-button {
      margin: 0 50px; 
    }
    .menu-button button.active {
      transform: scale(1.2); 
    }
    .menu-button button {
      font-size: 18px; 
    }
    .menu-main {
      margin: 0 15px;
    }
    .menu-name {
      flex-direction: column; 
      align-items: center; 
      gap: 30px; 
    }

    .menu-season .set{
      display: block;
    }

    .menu-picture img, .seasonal img {
      max-width: 100%;
      width: 320px;
      height: 190px;
    }
    .menu-infomation {
      width: 90%; 
      max-width: 400px;
      margin: 0 auto; 
      text-align: left; 
      padding: 0; 
    }
    .teiban-name, .season-name, .menu-TEL {
      font-size: 36px;
    }
}

@media screen and (max-width: 540px) {
  .menu-button{
    margin: 0 30px;
  }
  .menu-button button{
    font-size: 15px; 
    padding: 4px 8px;
  }
  .teiban-name, .season-name, .menu-TEL {
    font-size: 32px;
    margin-bottom: 30px;
  }
  .takeout-name{
    font-size: 40px;
  }
  .menu-main{
    margin: 0 15px; 
  }
  .menu-picture img, .seasonal img {
    width: 250px; 
    max-width: 300px; 
    height: 160px; 
  }
  .menu-infomation h2 {
    flex-direction: column;
    gap: 3px;
    width: 95%; 
    max-width: 320px;
    margin: 10px auto; 
    font-size: 20px;
  }
  .menu-infomation p {
    width: 90%; 
    max-width: 350px;
    margin: 10px auto; 
    font-size: 14px;
  } 

  .menu-season .set{
    margin-left: auto;
    margin-right: auto;
  }

  .takeout-picture{
    width: 300px;
    height: auto;
  }

  .menu-course{
    font-size: 14px; 
  }
}

@media screen and (max-width: 430px){
  .menu-button{
    margin: 0 25px;
  }
  .menu-button button {
    font-size: 9px; 
    padding: 10px 6px;
  }  
  .menu-season h2{
    font-size: 20px;
  }
  .menu-text {
    font-size: 15px;
  }
  .menu-infomation h2 {
    width: 95%; 
    max-width: 320px;
    margin: 10px auto; 
    font-size: 15px;
  }
  .menu-infomation p {
    width: 90%; 
    max-width: 350px;
    margin: 10px auto; 
    font-size: 12px;
  } 
  .takeout-name{
    font-size: 25px;
  }
  .menu-takeout h2{
    font-size: 20px;
  }
  .menu-course {
    margin: 30px 5px;
  }
  .course .course-kind{
    display: block;
  }
}

@media screen and (max-width: 320px ) {
  .menu-button button{
    font-size: 8px;
  }
  .set {
    font-size: 20px;
  }
  .menu-text{
    font-size: 13px;
  }
  .teiban-menu{
    font-size: 20px;
  }
}

@media screen and (max-width: 424px ){
  .about-item{
    margin-bottom: 100px;
  }
  .hero-overlay a{
    font-size: 15px;
  }
}

/*store*/
.about {
    width: 80%;
    margin: 0 auto;
}

.about h1 {
    color:rgba(95, 43, 43, 0.864);
    font-size: 2.5rem;
    margin-bottom:40px;
    text-align: center;
}

.about-block {
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 60px;
    
}

.about-block.reverse {
    flex-direction:row-reverse ;

}

.about-image img {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px ; 
    display: flex;

}

.about-text {
    font-size: 20px;
    flex: 1;
    padding: 0 20px;
    padding : 40px 20px;
    text-align: center;
}

section h2{
    color:rgba(95, 43, 43, 0.864);
    font-size:2rem;
    margin-bottom:20px;
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid #c2a67a;
}

.about-text{
    flex: 1;
   padding: 0 20px;
}

.about-text h2{
    font-size: 2em;
    margin-bottom: 25px;
}
.time{
  font-size: 25px;
}



h2 {
    text-align: center;
    width: 100%;
    display: block;
}

.owner-image img{
  border-radius: 10px;
}

.gallery-images {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.gallery-images img {
    width: 300px;
    height: 300px;
    border-radius: 10px;
}




.section-title {
    text-align: center;
    margin-bottom:40px ;
}

.access-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.map iframe {
    width: 600px;
    height: 500px; 
    border: 0;
}

.map {
text-align: center;
}

.access-text {
    text-align: center;
    font-size:18px;
    line-height: 1.8;

}




/*store*/
.about {
    width: 80%;
    margin: 0 auto;
}

.about h1 {
    color:rgba(95, 43, 43, 0.864);
    font-size: 2.5rem;
    margin-bottom:40px;
    text-align: center;
}

.about-block {
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 60px;
    
}

.about-block.reverse {
    flex-direction:row-reverse ;

}

.about-image img {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 10px ; 
    display: flex;

}

.about-text {
    font-size: 20px;
    flex: 1;
    padding: 0 20px;
    padding : 40px 20px;
    text-align: center;
}

section h2{
    color:rgba(95, 43, 43, 0.864);
    font-size:2rem;
    margin-bottom:20px;
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid #c2a67a;
}

.about-text{
    flex: 1;
   padding: 0 20px;
}

.about-text h2{
    font-size: 2em;
    margin-bottom: 25px;
}
.time{
  font-size: 25px;
}



h2 {
    text-align: center;
    width: 100%;
    display: block;
}

.owner-image img{
  border-radius: 10px;
}

.gallery-images {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.gallery-images img {
    width: 300px;
    height: 300px;
    border-radius: 10px;
}




.section-title {
    text-align: center;
    margin-bottom:40px ;
}

.access-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.map iframe {
    width: 600px;
    height: 500px; 
    border: 0;
}

.map {
text-align: center;
}

.access-text {
    text-align: center;
    font-size:18px;
    line-height: 1.8;

}

/*store*/

/* =====レスポンシブ対応===== */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* お店紹介ページのブロック調整 */
  .about-block, .about-block.reverse {
    flex-direction: column;
    gap: 30px;
  }

  .about-image img {
    width: 350px;
    height: 225px;
  }

  .about-text {
    font-size: 1rem;
    padding: 10px;
  }

      /* 店主画像を縮小 */
    .owner-image img {
        width: 60%;
    }
        /* ギャラリー画像2列 */
    .gallery-images img {
        width: calc(50% - 10px);
    }
  }

@media screen and (max-width: 767px){
  .about {
        width: 95%; 
        padding: 0 10px; 
    }
    .about-block, .about-block.reverse {
    flex-direction: column;
    gap: 30px;
  }

  .about-image img {
    width: 300px;
    max-width: 400px;
    height: 225px;
  }
    .owner-image img {
        width: 350px;
        height: 225px;
    }

    .about-text{
      text-align: left;
    }

  .gallery-images img {
        width: 250px; 
        max-width: 300px; 
        height: 250px;
    }

  .map iframe{
    width: 100%;
    height: 300px;
  }
}

/* ===== SNS公式アカウント ===== */
.sns-section h1{
  color:rgba(95, 43, 43, 0.864);

}
.sns-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦中央 */
  align-items: center;     /* 横中央 */
  padding: 40px 20px;
  box-sizing: border-box;
}

.sns-icons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}
.sns-icons a img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  outline: none; /* クリック時の□線を消す */
}

.sns-icons a:hover img {
  transform: scale(1.1); /* ホバー時に10％拡大 */
}

.sns-icons a:focus {
  outline: none; /* クリック時のフォーカス枠を非表示 */
  
}

/*--SNS--*/
@media screen and (min-width:600px) {
  .sns-icons {
    flex-direction: row; /* PCでは横並び */
  }
}

/* ===== タブレット専用（768px〜1024px） ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* ナビゲーション */
  .mokuji {
    padding: 15px 30px;
  }

  .mokuji ul {
    gap: 20px;
  }

  .mokuji li a {
    font-size: 1rem;
    padding: 10px 12px;
  }

  /* スライドショーの高さを調整（全画面だと窮屈なため） */
  .slideshow-container {
    height: 70vh;
  }

  /* Aboutセクション：画像と文章を縦並びに変更 */
  .about-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .about-item {
    width: 70%;
  }

  /* メニューセクション */
  .menu-hero {
    height: 50vh;
  }

  .menu-hero .hero-overlay {
    padding: 1rem 1.5rem;
  }

  /* アクセス情報の調整 */
  .contact-container {
    flex-direction: column;
    gap: 20px;
  }

  .contact-left, .contact-center, .contact-right {
    width: 80%;
    text-align: center;
  }

  .sns-box img {
    max-width: 250px;
    height: auto;
  }

  /* フッター文字の大きさ */
  footer p {
    font-size: 0.9rem;
  }
}
/* ===== アクセスレイアウト ===== */
.contact-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px 0;
}

.contact-left,
.contact-right,
.contact-sns {
  text-align: center;
}
.contact-container {
  display: flex;
  justify-content: center; /* 🔹全体を中央揃え */
  align-items: center;     /* 縦位置も中央 */
  gap: 60px;               /* 左右の間隔を広めに */
  flex-wrap: wrap;         /* 狭い画面で折り返し */
  padding: 20px 0;
  text-align: center;      /* テキスト中央寄せ */
}

/* 左側（住所） */
.contact-left h3 {
  font-size: 1.6em;
  margin-bottom: 10px;
}

/* 右側（SNSアイコン） */
.contact-sns {
  display: flex;
  flex-direction: row;  /* 横並び */
  gap: 30px;            /* アイコン間の余白 */
  justify-content: center; /* 🔹中央寄せ */
}

.contact-sns img {
  width: 95px;
  height: 95px;
  transition: transform 0.3s ease;
}

.contact-sns img:hover {
  transform: scale(1.1);
}

/* スマホ対応（縦並び） */
@media (max-width: 700px) {
  .contact-container {
    flex-direction: column;
    gap: 20px;
  }

  .contact-sns img {
    width: 80px;
    height: 80px;
  }
}


/* ===== iPad・タブレット対応 ===== */
@media screen and (max-width: 1024px) {
  .contact-container {
    flex-direction: column;
    text-align: center;
  }
  .contact-sns {
    flex-direction: row;
    justify-content: center;
  }
  .contact-sns img {
    width: 70px;
    height: 70px;
  }
}
/* ===== スマホ対応 ===== */
@media screen and (max-width:768px){
  #menu-toggle { display: block; }

  .mokuji ul {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 60px;          /* ヘッダーの高さ分下げる */
    right: 20px;        /* 右上に配置 */
    width: 200px;       /* 横幅を小さく */
    height: auto;       /* 高さは自動 */
    background-color: #3b2b25;
    padding: 15px;
    gap: 8px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
  }

  .mokuji ul.active { display: flex; }

  .mokuji li a {
    font-size: 14px;
    padding: 8px 0;
    width: 100%;
    text-align: center;
  }

  .about-container, .contact-container {
    flex-direction: column;
    align-items: center;
  }

  .slideshow-container { height: 60vh; }
  .slide .hero-overlay { padding: 0.5rem 1rem; max-width: 90%; }
  .slide .hero-overlay h1 { font-size: 1.5rem; }
}

@media screen and (max-width:480px){
  .slideshow-container { height: 50vh; }
  .slide .hero-overlay h1 { font-size: 1.2rem; }
  .dot { height: 10px; width: 10px; margin: 0 3px; }
}